/* Pix's day, board B (owner 2026-10-22: «Ось так приблизно хочу, але ще краще і гарно розміщено і допасовано»;
   design/hud/mix/shots/pix-b-04..09 and -03). Violet glass panels with white words over the living scene, gold for the
   step forward, cream for what happened. Only Pix's own pieces; the game's HUD stays as it is (D186). */

.pxs, .pxr, .pxn, .pix-hud {
  --glass: linear-gradient(180deg, rgba(116, 66, 196, .78) 0%, rgba(74, 32, 140, .82) 100%);
  --glass-hi: inset 0 calc(var(--u) * 2) 0 rgba(255, 255, 255, .28), inset 0 0 0 calc(var(--u) * 1.5) rgba(255, 255, 255, .16);
  --glass-shadow: 0 calc(var(--u) * 14) calc(var(--u) * 34) rgba(26, 8, 46, .45);
  --cream: linear-gradient(180deg, rgba(255, 252, 245, .98), rgba(255, 244, 224, .96));
  --gold: linear-gradient(170deg, #fff0b3 0%, #ffd45a 42%, #f5a50a 100%); --gold-edge: #b86f00;
  --vio: linear-gradient(180deg, #9b6bff 0%, #7c3aed 45%, #5b21b6 100%); --vio-edge: #3b0f78; }

.pxs { position: absolute; inset: 0; z-index: 40; overflow: hidden; opacity: 0; transition: opacity .5s ease; color: #fff; }
.pxs.on { opacity: 1; }

/* the scene: full bleed, slowly breathing; a soft grade so white words always read */
.pxs-stage { position: absolute; inset: -3%; background: #2a1245; transition: filter .9s ease, scale .9s ease; }
.pxs-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 60% 45%; animation: pxsKen 28s ease-in-out infinite alternate; }
@keyframes pxsKen { from { scale: 1.02; translate: 0 0; } to { scale: 1.09; translate: -1.2% -.8%; } }
.pxs-stage.none { background: radial-gradient(120% 90% at 55% 40%, #f6dfb8, #c99d66 55%, #6f4a7e); }
.pxs-shade { position: absolute; inset: 0; pointer-events: none; transition: opacity .9s ease;
  background: linear-gradient(90deg, rgba(26, 8, 46, .55) 0%, rgba(26, 8, 46, .15) 42%, transparent 60%), radial-gradient(140% 100% at 60% 40%, transparent 55%, rgba(26, 8, 46, .5) 100%); }
.pxs.helping .pxs-stage, .pxs.result .pxs-stage { filter: blur(6px) brightness(.62) saturate(.9); scale: 1.03; }

/* the Pix Pause veil: violet, falling fast, then deepening for as long as the pause lasts; motes drift slowly */
.pxs-veil { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.6s ease;
  background: radial-gradient(85% 75% at 45% 45%, rgba(150, 90, 255, .28), rgba(58, 16, 112, .78) 90%); mix-blend-mode: normal; }
.pxs-veil::before, .pxs-veil::after { content: ""; position: absolute; inset: -10%;
  background-image: radial-gradient(2px 2px at 10% 20%, rgba(255, 236, 170, .9), transparent 60%), radial-gradient(3px 3px at 30% 70%, rgba(220, 200, 255, .85), transparent 60%),
    radial-gradient(2px 2px at 55% 35%, rgba(255, 255, 255, .9), transparent 60%), radial-gradient(3px 3px at 75% 80%, rgba(255, 226, 150, .8), transparent 60%),
    radial-gradient(2px 2px at 88% 30%, rgba(214, 190, 255, .9), transparent 60%), radial-gradient(2.5px 2.5px at 45% 90%, rgba(255, 255, 255, .8), transparent 60%);
  background-size: 33% 33%; animation: pxsMotes 18s linear infinite; opacity: .75; }
.pxs-veil::after { background-size: 21% 27%; animation-duration: 27s; animation-direction: reverse; opacity: .5; }
@keyframes pxsMotes { from { translate: 0 0; } to { translate: -6% -14%; } }
.pxs.paused .pxs-veil { opacity: 1; animation: pxsVeilDeep 10s linear forwards; }
@keyframes pxsVeilDeep { from { filter: brightness(1.15) saturate(1); } to { filter: brightness(.78) saturate(1.35); } }
.pxs.paused .pxs-art { filter: saturate(.5) blur(1.4px) brightness(.9); transition: filter 10s linear; }

/* ---- glass, the house material of board B */
.pxs-glass { background: var(--glass); box-shadow: var(--glass-hi), var(--glass-shadow); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); }
.pxs-place { display: flex; align-items: center; gap: calc(var(--u) * 7); font: 1000 calc(var(--u) * 14)/1 "Nunito", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #ffe2a0; }
.pxs-place::before { content: ""; flex: none; width: calc(var(--u) * 11); height: calc(var(--u) * 11); border-radius: 50% 50% 50% 0; rotate: -45deg; background: #ffd45a; }

/* B-04: the scene's words, bottom left, before the choice */
.pxs-card { position: absolute; left: calc(var(--u) * 44); bottom: calc(var(--u) * 40); width: calc(var(--u) * 760); display: flex; flex-direction: column;
  padding: calc(var(--u) * 22) calc(var(--u) * 30) calc(var(--u) * 26); border-radius: calc(var(--u) * 30); animation: pxsUp .7s .15s cubic-bezier(.2, .9, .25, 1.06) both; }
@keyframes pxsUp { from { opacity: 0; translate: 0 calc(var(--u) * 40); } to { opacity: 1; translate: 0 0; } }
.pxs-card h2 { margin: calc(var(--u) * 8) 0 calc(var(--u) * 10); font: 1000 calc(var(--u) * 40)/1.05 "Nunito", sans-serif; letter-spacing: -.01em; text-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 8) rgba(26, 8, 46, .35); }
.pxs-card.gone { animation: pxsDown .45s ease forwards; pointer-events: none; }
@keyframes pxsDown { to { opacity: 0; translate: 0 calc(var(--u) * 40); } }
.pxs-lines { display: flex; flex-direction: column; gap: calc(var(--u) * 10); }
.pxs-l { margin: 0; font: 800 calc(var(--u) * 25)/1.4 "Nunito", sans-serif; }
.pxs-l b { display: block; margin-bottom: calc(var(--u) * 3); font: 1000 calc(var(--u) * 14)/1 "Nunito", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #ffe2a0; }
.pxs-l.said { padding-left: calc(var(--u) * 16); border-left: calc(var(--u) * 4) solid rgba(255, 226, 160, .55); }
.pxs-l .w { display: inline-block; }

/* B-05: the header pill, top left: the clock ring, the place, the title */
.pxs-head { position: absolute; left: calc(var(--u) * 40); top: calc(var(--u) * 34); display: flex; align-items: center; gap: calc(var(--u) * 16); padding: calc(var(--u) * 8) calc(var(--u) * 34) calc(var(--u) * 8) calc(var(--u) * 8);
  border-radius: 999px; animation: pxsDrop .6s cubic-bezier(.2, .9, .25, 1.1) both; }
.pxs-head[hidden] { display: none; }
@keyframes pxsDrop { from { opacity: 0; translate: 0 calc(var(--u) * -30); } to { opacity: 1; translate: 0 0; } }
.pxs-head h2 { margin: calc(var(--u) * 4) 0 0; font: 1000 calc(var(--u) * 32)/1 "Nunito", sans-serif; }
.pxs-clock { position: relative; flex: none; width: calc(var(--u) * 96); height: calc(var(--u) * 96); border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, #b48cff 0%, #7c3aed 55%, #4c1d95 100%); box-shadow: inset 0 calc(var(--u) * 3) 0 rgba(255, 255, 255, .35), 0 0 0 calc(var(--u) * 4) rgba(255, 255, 255, .9), 0 calc(var(--u) * 8) calc(var(--u) * 18) rgba(26, 8, 46, .45); }
.pxs-clock svg { position: absolute; inset: calc(var(--u) * 6); width: calc(100% - var(--u) * 12); height: calc(100% - var(--u) * 12); rotate: -90deg; }
.pxs-clock .rg { fill: none; stroke: rgba(255, 255, 255, .18); stroke-width: 7; }
.pxs-clock .rf { fill: none; stroke: var(--ring, #ffffff); stroke-width: 7; stroke-linecap: round; stroke-dasharray: 289; transition: stroke .6s; filter: drop-shadow(0 0 3px rgba(255, 255, 255, .6)); }
.pxs-clock b { position: absolute; inset: 0; display: grid; place-items: center; font: 1000 calc(var(--u) * 38)/1 "Nunito", sans-serif; color: #fff; text-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 4) rgba(26, 8, 46, .5); }
.pxs-clock.tick b { animation: pxsTick .35s ease-out; }
@keyframes pxsTick { 0% { scale: 1.18; } 100% { scale: 1; } }
.pxs-clock .plus { position: absolute; left: 50%; bottom: calc(var(--u) * -16); white-space: nowrap; translate: -50% 0; padding: calc(var(--u) * 3) calc(var(--u) * 10); border-radius: 999px;
  font: 1000 calc(var(--u) * 14)/1.2 "Nunito", sans-serif; color: #fff; background: var(--vio); box-shadow: 0 0 0 calc(var(--u) * 2) rgba(255, 255, 255, .8); opacity: 0; transition: opacity .4s; }
.pxs.paused .pxs-clock { animation: pxsHeart 1.8s ease-in-out infinite; }
.pxs.paused .pxs-clock .plus { opacity: 1; }
@keyframes pxsHeart { 0%, 100% { scale: 1; } 12% { scale: 1.08; } 24% { scale: 1; } 36% { scale: 1.04; } }

/* the choices: violet glass pills with a number square, under the header */
.pxs-opts { position: absolute; left: calc(var(--u) * 40); top: calc(var(--u) * 168); width: calc(var(--u) * 740); display: flex; flex-direction: column; gap: calc(var(--u) * 14); }
.pxs-opts[hidden] { display: none; }
.pxs-opt { display: flex; align-items: center; gap: calc(var(--u) * 18); min-height: calc(var(--u) * 82); padding: calc(var(--u) * 12) calc(var(--u) * 30) calc(var(--u) * 12) calc(var(--u) * 16);
  border: 0; border-radius: calc(var(--u) * 26); cursor: pointer; text-align: left; color: #fff;
  transition: translate .3s cubic-bezier(.3, 1.6, .4, 1), background .25s, box-shadow .3s;
  animation: pxsOptIn .55s calc(var(--i, 0) * 85ms + 140ms) cubic-bezier(.2, .9, .25, 1.12) both; }
@keyframes pxsOptIn { from { opacity: 0; translate: calc(var(--u) * -60) 0; } to { opacity: 1; translate: 0 0; } }
.pxs-opt:hover { translate: calc(var(--u) * 10) 0; background: linear-gradient(180deg, rgba(140, 86, 230, .86), rgba(92, 44, 170, .9)); box-shadow: var(--glass-hi), 0 0 0 calc(var(--u) * 2) rgba(255, 226, 160, .7), var(--glass-shadow); }
.pxs-opt:active { translate: calc(var(--u) * 6) calc(var(--u) * 3); }
.pxs-num { flex: none; display: grid; place-items: center; width: calc(var(--u) * 50); height: calc(var(--u) * 50); border-radius: calc(var(--u) * 15); color: #fff; font: 1000 calc(var(--u) * 24)/1 "Nunito", sans-serif;
  background: rgba(255, 255, 255, .16); box-shadow: inset 0 calc(var(--u) * 2) 0 rgba(255, 255, 255, .3), inset 0 0 0 calc(var(--u) * 1.5) rgba(255, 255, 255, .2); }
.pxs-opt .pxs-t { font: 900 calc(var(--u) * 27)/1.22 "Nunito", sans-serif; text-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 6) rgba(26, 8, 46, .35); }
.pxs-opt:disabled { cursor: default; }
.pxs-opts.done .pxs-opt:not(.picked) { pointer-events: none; animation: pxsOptOut .45s calc(var(--i, 0) * 45ms) cubic-bezier(.5, 0, .75, 0) forwards; }
@keyframes pxsOptOut { from { opacity: 1; translate: 0 0; } to { opacity: 0; translate: calc(var(--u) * -70) 0; } }
.pxs-opt.picked { background: var(--gold); color: #3a1b00; box-shadow: inset 0 calc(var(--u) * 3) 0 rgba(255, 255, 255, .7), 0 calc(var(--u) * 6) 0 var(--gold-edge), 0 0 calc(var(--u) * 40) rgba(255, 197, 61, .6); animation: pxsPicked .6s cubic-bezier(.3, 1.6, .4, 1) both; }
.pxs-opt.picked .pxs-t { text-shadow: none; }
.pxs-opt.picked .pxs-num { background: rgba(255, 255, 255, .55); color: #5a2e00; }
@keyframes pxsPicked { 0% { scale: 1; } 40% { scale: 1.05; } 100% { scale: 1; } }

/* ---- bottom left: PIX PAUSE and the Help deck. Pix is never in a frame: the cut-out character stands over the button
   and breaks out above it (owner 2026-10-22: «він також не може бути в рамці... вони над усім») */
.pxs-tools { position: absolute; left: calc(var(--u) * 40); bottom: calc(var(--u) * 30); display: flex; align-items: flex-end; gap: calc(var(--u) * 26); z-index: 6; }
.pxs-tools[hidden] { display: none; }
.pxs-pause { position: relative; display: flex; align-items: center; height: calc(var(--u) * 116); padding: 0 calc(var(--u) * 48) 0 calc(var(--u) * 196); border: 0; border-radius: 999px; cursor: pointer;
  color: #fff; background: linear-gradient(180deg, #b088ff 0%, #7c3aed 48%, #5b21b6 100%); overflow: visible;
  box-shadow: inset 0 calc(var(--u) * 4) 0 rgba(255, 255, 255, .5), inset 0 calc(var(--u) * -5) 0 rgba(40, 8, 80, .35), inset 0 0 0 calc(var(--u) * 2) rgba(255, 255, 255, .35),
    0 calc(var(--u) * 10) 0 var(--vio-edge), 0 calc(var(--u) * 24) calc(var(--u) * 40) rgba(46, 12, 92, .6);
  transition: translate .3s cubic-bezier(.3, 1.6, .4, 1), box-shadow .3s, filter .3s; animation: pxsUp .6s .3s cubic-bezier(.2, .9, .25, 1.1) both; }
.pxs-pause .shine { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; pointer-events: none; }
.pxs-pause .shine::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .45) 50%, transparent 65%) -150% 0 / 60% 100% no-repeat; animation: pxsShine 4.5s 1.2s ease-in-out infinite; }
@keyframes pxsShine { 0%, 70% { background-position: -150% 0; } 100% { background-position: 260% 0; } }
.pxs-pause .pixcut { position: absolute; left: calc(var(--u) * -6); bottom: calc(var(--u) * -4); width: calc(var(--u) * 196); pointer-events: none;
  filter: drop-shadow(0 calc(var(--u) * 10) calc(var(--u) * 14) rgba(26, 8, 46, .45)); transform-origin: 50% 100%; animation: pxsPixHop .7s .45s cubic-bezier(.3, 1.6, .4, 1) both; }
@keyframes pxsPixHop { from { opacity: 0; translate: 0 calc(var(--u) * 50); scale: .7; } to { opacity: 1; translate: 0 0; scale: 1; } }
.pxs-pause:hover { translate: 0 calc(var(--u) * -5); filter: brightness(1.07); }
.pxs-pause:hover .pixcut { animation: pxsPixWiggle .6s ease-in-out; }
@keyframes pxsPixWiggle { 0%, 100% { rotate: 0deg; } 30% { rotate: -4deg; } 65% { rotate: 3deg; } }
.pxs-pause:active { translate: 0 calc(var(--u) * 7); box-shadow: inset 0 calc(var(--u) * 4) 0 rgba(255, 255, 255, .5), 0 calc(var(--u) * 3) 0 var(--vio-edge), 0 calc(var(--u) * 8) calc(var(--u) * 14) rgba(46, 12, 92, .55); }
.pxs-pause .lbl { position: relative; display: flex; flex-direction: column; align-items: flex-start; }
.pxs-pause .lbl b { font: 1000 calc(var(--u) * 44)/1 "Nunito", sans-serif; letter-spacing: .04em; text-shadow: 0 calc(var(--u) * 3) 0 rgba(40, 8, 80, .45); }
.pxs-pause .lbl small { display: flex; align-items: center; gap: calc(var(--u) * 8); margin-top: calc(var(--u) * 8); font: 800 calc(var(--u) * 16)/1 "Nunito", sans-serif; opacity: .92; }
.pxs-key { padding: calc(var(--u) * 3) calc(var(--u) * 9); border-radius: calc(var(--u) * 7); font: 900 calc(var(--u) * 13)/1.2 "Nunito", sans-serif; background: rgba(255, 255, 255, .22); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.pxs-pause.glow { animation: pxsUp .6s .3s cubic-bezier(.2, .9, .25, 1.1) both, pxsGlow 1.6s ease-in-out infinite; }
@keyframes pxsGlow { 0%, 100% { filter: drop-shadow(0 0 calc(var(--u) * 4) rgba(255, 210, 90, .5)); } 50% { filter: drop-shadow(0 0 calc(var(--u) * 28) rgba(255, 210, 90, 1)); } }
.pxs.paused .pxs-pause { filter: saturate(.55) brightness(.92); pointer-events: none; }
.pxs.paused .pxs-pause .pixcut { visibility: hidden; }
/* while the pause lasts, Pix has stepped out of the button to the scene; the button closes up and its light drains away */
.pxs-pause { transition: translate .3s cubic-bezier(.3, 1.6, .4, 1), box-shadow .3s, filter .3s, padding .5s cubic-bezier(.2, .9, .25, 1); }
.pxs.paused .pxs-pause { padding-left: calc(var(--u) * 48); }
.pxs-pause .slowbar { position: absolute; left: calc(var(--u) * 36); right: calc(var(--u) * 36); bottom: calc(var(--u) * 14); height: calc(var(--u) * 6); border-radius: 999px; background: rgba(255, 255, 255, .18); opacity: 0; transition: opacity .3s; overflow: hidden; }
.pxs-pause .slowbar i { position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(90deg, #ffe08a, #fff); box-shadow: 0 0 calc(var(--u) * 10) rgba(255, 224, 138, .9); transform-origin: 0 50%; }
.pxs.paused .pxs-pause .slowbar { opacity: 1; }
.pxs.paused .pxs-pause .slowbar i { animation: pxsDrain 10s linear forwards; }
@keyframes pxsDrain { from { scale: 1 1; } to { scale: 0 1; } }

/* the Help deck: a real stack of thick cards with a gold ? seal; it fans when pointed at */
.pxs-deck { position: relative; display: flex; align-items: flex-end; gap: calc(var(--u) * 14); height: calc(var(--u) * 190); padding: 0; border: 0; background: none; cursor: pointer; color: #fff;
  animation: pxsUp .6s .4s cubic-bezier(.2, .9, .25, 1.1) both; }
.pxs-deck .stack { position: relative; width: calc(var(--u) * 150); height: calc(var(--u) * 190); }
.pxs-deck .stack i { position: absolute; left: 0; bottom: 0; width: calc(var(--u) * 132); height: calc(var(--u) * 176); border-radius: calc(var(--u) * 18); transform-origin: 50% 100%;
  background: radial-gradient(circle at 50% 46%, rgba(255, 212, 90, .95) 0 calc(var(--u) * 26), rgba(184, 111, 0, .9) calc(var(--u) * 27) calc(var(--u) * 30), transparent calc(var(--u) * 31)),
    repeating-linear-gradient(45deg, rgba(255, 210, 120, .09) 0 calc(var(--u) * 9), transparent calc(var(--u) * 9) calc(var(--u) * 18)), linear-gradient(160deg, #6b34b0, #3b1478);
  box-shadow: inset 0 0 0 calc(var(--u) * 4) #ffcf5a, inset 0 0 0 calc(var(--u) * 8) #3b0f78, inset 0 calc(var(--u) * 10) calc(var(--u) * 14) rgba(255, 255, 255, .12),
    0 calc(var(--u) * 3) 0 #2a0a58, 0 calc(var(--u) * 6) 0 #ffcf5a, 0 calc(var(--u) * 9) 0 #2a0a58, 0 calc(var(--u) * 20) calc(var(--u) * 30) rgba(10, 2, 20, .5);
  transition: rotate .4s cubic-bezier(.3, 1.6, .4, 1), translate .4s cubic-bezier(.3, 1.6, .4, 1); }
.pxs-deck .stack i::after { content: "?"; position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: calc(var(--u) * 4); font: 1000 calc(var(--u) * 46)/1 "Nunito", sans-serif; color: #5a2e00; text-shadow: 0 calc(var(--u) * 2) 0 rgba(255, 255, 255, .5); }
.pxs-deck .stack i:nth-child(1) { rotate: -12deg; translate: calc(var(--u) * -8) 0; }
.pxs-deck .stack i:nth-child(2) { rotate: -4deg; translate: calc(var(--u) * 2) calc(var(--u) * -4); }
.pxs-deck .stack i:nth-child(3) { rotate: 5deg; translate: calc(var(--u) * 12) calc(var(--u) * -8); }
.pxs-deck:hover .stack i:nth-child(1) { rotate: -22deg; translate: calc(var(--u) * -26) calc(var(--u) * -4); }
.pxs-deck:hover .stack i:nth-child(2) { rotate: -6deg; translate: calc(var(--u) * 2) calc(var(--u) * -18); }
.pxs-deck:hover .stack i:nth-child(3) { rotate: 14deg; translate: calc(var(--u) * 28) calc(var(--u) * -10); }
.pxs-deck .cnt { position: absolute; right: calc(var(--u) * -4); top: calc(var(--u) * -6); z-index: 2; display: grid; place-items: center; width: calc(var(--u) * 54); height: calc(var(--u) * 54); border-radius: 50%;
  font: 1000 calc(var(--u) * 26)/1 "Nunito", sans-serif; color: #3a1b00; background: var(--gold); box-shadow: inset 0 calc(var(--u) * 3) 0 rgba(255, 255, 255, .7), 0 calc(var(--u) * 4) 0 var(--gold-edge), 0 calc(var(--u) * 10) calc(var(--u) * 16) rgba(10, 2, 20, .45); }
.pxs-deck .lbl { padding: calc(var(--u) * 10) calc(var(--u) * 22) calc(var(--u) * 12); border-radius: calc(var(--u) * 22); margin-bottom: calc(var(--u) * 8); }
.pxs-deck .lbl b { display: block; font: 1000 calc(var(--u) * 26)/1 "Nunito", sans-serif; }
.pxs-deck .lbl small { display: flex; align-items: center; gap: calc(var(--u) * 8); margin-top: calc(var(--u) * 6); font: 800 calc(var(--u) * 15)/1 "Nunito", sans-serif; opacity: .92; }
.pxs-deck:disabled { filter: grayscale(.8) brightness(.8); cursor: default; }
.pxs-deck:disabled .stack i { rotate: 0deg; translate: 0 0; }

/* ---- B-06: Pix himself, bottom right, his mantra in a cloud above him */
.pxs-pix { position: absolute; right: calc(var(--u) * 36); bottom: 0; width: calc(var(--u) * 420); height: calc(var(--u) * 470); pointer-events: none; z-index: 3; }
.pxs-pix img { position: absolute; right: 0; bottom: calc(var(--u) * -10); width: calc(var(--u) * 330); filter: drop-shadow(0 calc(var(--u) * 18) calc(var(--u) * 30) rgba(26, 8, 46, .5)); animation: pxsPixIn .8s cubic-bezier(.2, .9, .25, 1.12) both; transform-origin: 50% 100%; }
@keyframes pxsPixIn { from { opacity: 0; translate: calc(var(--u) * 80) calc(var(--u) * 60); rotate: 6deg; } to { opacity: 1; translate: 0 0; rotate: 0deg; } }
.pxs-pix img { animation: pxsPixIn .8s cubic-bezier(.2, .9, .25, 1.12) both, pxsBreath 4s 1s ease-in-out infinite; }
@keyframes pxsBreath { 0%, 100% { scale: 1; } 50% { scale: 1.015 .99; } }
.pxs-bubble { position: absolute; padding: calc(var(--u) * 18) calc(var(--u) * 26); border-radius: calc(var(--u) * 28); background: var(--cream); color: var(--ink);
  box-shadow: inset 0 calc(var(--u) * 3) 0 #fff, 0 calc(var(--u) * 16) calc(var(--u) * 34) rgba(26, 8, 46, .45); animation: pxsBubble .55s .35s cubic-bezier(.2, .9, .25, 1.15) both; }
@keyframes pxsBubble { from { opacity: 0; scale: .85; translate: 0 calc(var(--u) * 14); } to { opacity: 1; scale: 1; translate: 0 0; } }
.pxs-bubble::after { content: ""; position: absolute; width: calc(var(--u) * 26); height: calc(var(--u) * 26); rotate: 45deg; border-radius: calc(var(--u) * 5); background: #fff3e0; }
.pxs-bubble b { display: block; margin-bottom: calc(var(--u) * 6); font: 1000 calc(var(--u) * 14)/1 "Nunito", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--violet); }
.pxs-bubble p { margin: 0; font: 1000 calc(var(--u) * 26)/1.3 "Nunito", sans-serif; color: var(--plum); }
.pxs-pix .pxs-bubble { right: calc(var(--u) * 200); bottom: calc(var(--u) * 330); width: calc(var(--u) * 440); }
.pxs-pix .pxs-bubble::after { right: calc(var(--u) * 46); bottom: calc(var(--u) * -10); }
.pxs.paused .pxs-pix .pxs-bubble { box-shadow: inset 0 calc(var(--u) * 3) 0 #fff, 0 0 0 calc(var(--u) * 3) rgba(196, 163, 255, .85), 0 0 calc(var(--u) * 50) rgba(196, 163, 255, .6); }
.pxs-pix.out { animation: pxsFade .6s ease forwards; }
@keyframes pxsFade { to { opacity: 0; translate: calc(var(--u) * 60) calc(var(--u) * 30); } }

/* ---- B-07: the ? card: two big portrait cards; the drawn one turns over and speaks, the other stays face down */
.pxs-help { position: absolute; inset: 0; z-index: 4; display: flex; justify-content: center; align-items: center; gap: calc(var(--u) * 40); perspective: calc(var(--u) * 1600); }
.pxs-hc { position: relative; width: calc(var(--u) * 300); height: calc(var(--u) * 400); perspective: calc(var(--u) * 1400); animation: pxsDeal .7s cubic-bezier(.2, .9, .25, 1.1) both; }
.pxs-hc .flip { position: absolute; inset: 0; transform-style: preserve-3d; }
.pxs-hc:nth-child(2) { animation-delay: .1s; }
@keyframes pxsDeal { from { opacity: 0; transform: translateY(calc(var(--u) * 360)) rotate(-8deg) scale(.6); } to { opacity: 1; transform: none; } }
.pxs-hc .side { position: absolute; inset: 0; border-radius: calc(var(--u) * 26); backface-visibility: hidden; overflow: hidden; }
.pxs-hc .back { background: radial-gradient(circle at 50% 50%, #ffd45a 0 calc(var(--u) * 40), #b86f00 calc(var(--u) * 41) calc(var(--u) * 45), transparent calc(var(--u) * 46)), repeating-linear-gradient(45deg, rgba(255, 210, 120, .08) 0 calc(var(--u) * 10), transparent calc(var(--u) * 10) calc(var(--u) * 20)), linear-gradient(160deg, #5b2a86, #2a1245);
  box-shadow: inset 0 0 0 calc(var(--u) * 5) #ffcf5a, inset 0 0 0 calc(var(--u) * 10) #3b0f78, 0 calc(var(--u) * 24) calc(var(--u) * 40) rgba(10, 2, 20, .55); }
.pxs-hc .back::after { content: "?"; position: absolute; inset: 0; display: grid; place-items: center; padding-bottom: calc(var(--u) * 4); font: 1000 calc(var(--u) * 56)/1 "Nunito", sans-serif; color: #5a2e00; text-shadow: 0 calc(var(--u) * 2) 0 rgba(255, 255, 255, .5); }
.pxs-hc .front { transform: rotateY(180deg); background: linear-gradient(180deg, #fff6e2, #f3dcb3); box-shadow: inset 0 0 0 calc(var(--u) * 5) var(--card-c, #ffcf5a), 0 calc(var(--u) * 24) calc(var(--u) * 40) rgba(10, 2, 20, .55); }
.pxs-hc .front img { position: absolute; left: 50%; bottom: 0; width: 112%; translate: -50% 0; }
.pxs-hc .front .rib { position: absolute; left: 50%; top: calc(var(--u) * 12); translate: -50% 0; padding: calc(var(--u) * 5) calc(var(--u) * 22); border-radius: 999px; font: 1000 calc(var(--u) * 18)/1.2 "Nunito", sans-serif; color: #3a1b00; background: var(--gold); box-shadow: 0 calc(var(--u) * 3) 0 var(--gold-edge); z-index: 1; }
.pxs-hc.ed .front { --card-c: #2bb5a8; }
.pxs-hc.turned .flip { animation: pxsTurn .9s .55s cubic-bezier(.3, 1.2, .4, 1) forwards; }
@keyframes pxsTurn { from { transform: rotateY(0deg); } 50% { transform: rotateY(90deg) scale(1.06); } to { transform: rotateY(180deg); } }
.pxs-hc.dim { filter: brightness(.6) saturate(.7); }
.pxs-help .pxs-bubble { width: calc(var(--u) * 380); animation-delay: 1.3s; }
.pxs-help .pxs-bubble.left { right: calc(50% + var(--u) * 352); top: calc(50% - var(--u) * 150); }
.pxs-help .pxs-bubble.left::after { right: calc(var(--u) * -10); top: calc(var(--u) * 40); }
.pxs-help .pxs-bubble.right { left: calc(50% + var(--u) * 352); top: calc(50% - var(--u) * 150); }
/* while a card speaks, nothing else is on the screen: the choices, the clock and the tools step back */
.pxs.helping :is(.pxs-opts, .pxs-tools, .pxs-pix) { opacity: 0; pointer-events: none; transition: opacity .35s; }
.pxs.helping .pxs-head { visibility: hidden; }
.pxs-help .pxs-bubble.right::after { left: calc(var(--u) * -10); top: calc(var(--u) * 40); }

/* ---- gold: the step forward (Ready, Continue, Run on, Follow) */
.pxs-go { position: absolute; right: calc(var(--u) * 44); bottom: calc(var(--u) * 40); display: inline-flex; align-items: center; gap: calc(var(--u) * 14); height: calc(var(--u) * 86); padding: 0 calc(var(--u) * 26) 0 calc(var(--u) * 40);
  border: 0; border-radius: 999px; cursor: pointer; font: 1000 calc(var(--u) * 32)/1 "Nunito", sans-serif; color: #3a1b00; background: var(--gold);
  box-shadow: inset 0 calc(var(--u) * 3) 0 rgba(255, 255, 255, .75), 0 calc(var(--u) * 8) 0 var(--gold-edge), 0 calc(var(--u) * 20) calc(var(--u) * 34) rgba(26, 8, 46, .45);
  transition: translate .3s cubic-bezier(.3, 1.6, .4, 1), box-shadow .3s; animation: pxsPop .55s .45s cubic-bezier(.3, 1.6, .4, 1) both; z-index: 5; }
@keyframes pxsPop { from { opacity: 0; scale: .5; } to { opacity: 1; scale: 1; } }
.pxs-go .pxs-key { color: #6b3a00; background: rgba(255, 255, 255, .5); }
.pxs-go:hover { translate: 0 calc(var(--u) * -4); }
.pxs-go:active { translate: 0 calc(var(--u) * 6); box-shadow: inset 0 calc(var(--u) * 3) 0 rgba(255, 255, 255, .75), 0 calc(var(--u) * 2) 0 var(--gold-edge), 0 calc(var(--u) * 6) calc(var(--u) * 12) rgba(26, 8, 46, .45); }

/* ---- B-08 / B-09: what happened (cream, bottom centre) and a curiosity (cream, right) */
.pxs-res { position: absolute; left: 50%; bottom: calc(var(--u) * 46); width: calc(var(--u) * 1180); margin-left: calc(var(--u) * -590); display: grid; grid-template-columns: calc(var(--u) * 96) 1fr auto; gap: calc(var(--u) * 26); align-items: center;
  padding: calc(var(--u) * 26) calc(var(--u) * 30) calc(var(--u) * 26) calc(var(--u) * 26); border-radius: calc(var(--u) * 32); background: var(--cream); color: var(--ink);
  box-shadow: inset 0 calc(var(--u) * 3) 0 #fff, 0 calc(var(--u) * 24) calc(var(--u) * 50) rgba(10, 2, 20, .5); animation: pxsUp .65s cubic-bezier(.2, .9, .25, 1.08) both; z-index: 4; }
.pxs-res .medal { width: calc(var(--u) * 96); height: calc(var(--u) * 96); border-radius: 50%; display: grid; place-items: center; background: var(--gold); box-shadow: inset 0 calc(var(--u) * 3) 0 rgba(255, 255, 255, .7), 0 calc(var(--u) * 6) 0 var(--gold-edge); }
.pxs-res .medal img { width: 58%; height: 58%; object-fit: contain; }
.pxs-res .pxs-l { color: var(--plum); font-size: calc(var(--u) * 27); font-weight: 1000; }
.pxs-res .pxs-l b { color: var(--violet); }
.pxs-res .pxs-l.said { border-left-color: rgba(124, 58, 237, .3); }
.pxs-res .where { display: flex; align-items: center; gap: calc(var(--u) * 8); margin-top: calc(var(--u) * 10); font: 1000 calc(var(--u) * 14)/1.3 "Nunito", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--violet); }
.pxs-res .pxs-go { position: static; animation-delay: .5s; }
.pxs-fact { position: absolute; right: calc(var(--u) * 60); top: 0; bottom: 0; margin: auto 0; height: fit-content; width: calc(var(--u) * 620); padding: calc(var(--u) * 70) calc(var(--u) * 40) calc(var(--u) * 32); border-radius: calc(var(--u) * 34);
  background: var(--cream); color: var(--ink); box-shadow: inset 0 calc(var(--u) * 3) 0 #fff, 0 calc(var(--u) * 24) calc(var(--u) * 50) rgba(10, 2, 20, .5); animation: pxsRise .7s cubic-bezier(.2, .9, .25, 1.08) both; z-index: 4; }
@keyframes pxsRise { from { opacity: 0; translate: calc(var(--u) * 60) 0; } to { opacity: 1; translate: 0 0; } }
.pxs-fact .bulb { position: absolute; left: calc(var(--u) * 40); top: calc(var(--u) * -48); width: calc(var(--u) * 104); height: calc(var(--u) * 104); border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 40% 35%, #c9fff6, #2bb5a8 60%, #0f766e); box-shadow: 0 0 0 calc(var(--u) * 6) #fff, 0 0 calc(var(--u) * 40) rgba(43, 181, 168, .6); }
.pxs-fact .bulb img { width: 56%; height: 56%; object-fit: contain; filter: brightness(0) invert(1); }
.pxs-fact h2 { margin: 0 0 calc(var(--u) * 12); font: 1000 calc(var(--u) * 44)/1.05 "Nunito", sans-serif; color: #0f766e; }
.pxs-fact .pxs-l { color: var(--plum); font-size: calc(var(--u) * 25); }
.pxs-fact .pxs-l b { color: #0f766e; }
.pxs-fact .foot { display: flex; align-items: center; justify-content: space-between; margin-top: calc(var(--u) * 22); }
.pxs-fact .chip { display: inline-flex; align-items: center; gap: calc(var(--u) * 6); padding: calc(var(--u) * 7) calc(var(--u) * 16); border-radius: 999px; font: 1000 calc(var(--u) * 13)/1.2 "Nunito", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #0f766e; background: rgba(43, 181, 168, .14); }
.pxs-fact .pxs-go { position: static; height: calc(var(--u) * 72); font-size: calc(var(--u) * 27); }

/* the step token on what happened: a coin */
.pxs-token { display: inline-flex; align-items: center; gap: calc(var(--u) * 12); margin-top: calc(var(--u) * 12); padding: calc(var(--u) * 6) calc(var(--u) * 18) calc(var(--u) * 6) calc(var(--u) * 6); border-radius: 999px;
  background: rgba(124, 58, 237, .1); font: 900 calc(var(--u) * 19)/1.1 "Nunito", sans-serif; color: var(--plum); animation: pxsPop .5s .35s cubic-bezier(.3, 1.6, .4, 1) both; }
.pxs-token i { display: grid; place-items: center; width: calc(var(--u) * 48); height: calc(var(--u) * 48); border-radius: 50%; font: 1000 calc(var(--u) * 20)/1 "Nunito", sans-serif; font-style: normal; color: #fff;
  background: radial-gradient(circle at 35% 30%, #ff9b7a, #e0703a 55%, #a3401a); box-shadow: inset 0 calc(var(--u) * -3) 0 rgba(0, 0, 0, .2); }
.pxs-token.up i { background: radial-gradient(circle at 35% 30%, #8ff0e2, #2bb5a8 55%, #0f766e); }

/* ---- B-03: the road picker, a glass panel on the right */
.pxr { position: absolute; right: calc(var(--u) * 40); top: calc(var(--u) * 150); width: calc(var(--u) * 520); padding: calc(var(--u) * 22) calc(var(--u) * 22) calc(var(--u) * 24); border-radius: calc(var(--u) * 30); z-index: 30; color: #fff;
  background: var(--glass); box-shadow: var(--glass-hi), var(--glass-shadow); backdrop-filter: blur(10px) saturate(1.2); -webkit-backdrop-filter: blur(10px) saturate(1.2); animation: pxsRiseR .65s cubic-bezier(.2, .9, .25, 1.08) both; }
@keyframes pxsRiseR { from { opacity: 0; translate: calc(var(--u) * 60) 0; } to { opacity: 1; translate: 0 0; } }
.pxr[hidden] { display: none; }
.pxr h3 { display: flex; align-items: center; gap: calc(var(--u) * 12); margin: 0 0 calc(var(--u) * 16); font: 1000 calc(var(--u) * 30)/1 "Nunito", sans-serif; }
.pxr h3 .por { width: calc(var(--u) * 50); height: calc(var(--u) * 50); border-radius: 50%; overflow: hidden; background: #f2d29a; box-shadow: 0 0 0 calc(var(--u) * 3) #fff; }
.pxr h3 .por img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; transform: scale(1.25); transform-origin: 50% 20%; }
.pxr-card { display: flex; align-items: center; gap: calc(var(--u) * 16); width: 100%; margin-top: calc(var(--u) * 12); padding: calc(var(--u) * 14) calc(var(--u) * 18) calc(var(--u) * 14) calc(var(--u) * 14); border: 0; border-radius: calc(var(--u) * 22); cursor: pointer; text-align: left; color: #fff;
  background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 calc(var(--u) * 1.5) rgba(255, 255, 255, .16), inset calc(var(--u) * 6) 0 0 var(--c);
  transition: translate .3s cubic-bezier(.3, 1.6, .4, 1), background .25s, box-shadow .3s; animation: pxsOptIn .55s calc(var(--i) * 100ms + 200ms) cubic-bezier(.2, .9, .25, 1.12) both; }
.pxr-card:hover, .pxr-card.lit { translate: calc(var(--u) * -8) 0; background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 calc(var(--u) * 2) var(--c), inset calc(var(--u) * 6) 0 0 var(--c), 0 0 calc(var(--u) * 26) var(--c); }
.pxr-card .pxs-num { background: var(--c); color: var(--ink); box-shadow: inset 0 calc(var(--u) * 2) 0 rgba(255, 255, 255, .5); }
.pxr-card b { display: block; font: 1000 calc(var(--u) * 25)/1.15 "Nunito", sans-serif; }
.pxr-card .chips { display: flex; gap: calc(var(--u) * 8); margin-top: calc(var(--u) * 8); }
.pxr-card .chips span { padding: calc(var(--u) * 3) calc(var(--u) * 12); border-radius: 999px; font: 900 calc(var(--u) * 14)/1.3 "Nunito", sans-serif; background: rgba(255, 255, 255, .16); }
/* Pix stands on the panel's corner, a cut-out, never framed; while his note is open he is in the note, not twice */
.pix-hud:has(> .pxn:not([hidden])) .pxr .pixcut { visibility: hidden; }
.pxr h3 { padding-left: calc(var(--u) * 118); min-height: calc(var(--u) * 44); }
.pxr .pixcut { position: absolute; left: calc(var(--u) * -6); top: calc(var(--u) * -104); width: calc(var(--u) * 150); pointer-events: none; transform-origin: 50% 100%;
  clip-path: inset(-20% -20% calc(100% - var(--u) * 110) -20%);
  filter: drop-shadow(0 calc(var(--u) * 10) calc(var(--u) * 14) rgba(26, 8, 46, .45)); animation: pxsPixHop .7s .35s cubic-bezier(.3, 1.6, .4, 1) both, pxsBreath 4s 1.2s ease-in-out infinite; }

/* ---- Pix's note: a letter that unfolds out of the satchel; the Fairy Teller speaks with his book */
.pxn { position: absolute; left: 50%; top: calc(var(--u) * 130); width: calc(var(--u) * 620); margin-left: calc(var(--u) * -310); z-index: 46; perspective: calc(var(--u) * 1200); }
.pxn[hidden] { display: none; }
.pxn .paper { position: relative; display: grid; grid-template-columns: calc(var(--u) * 92) 1fr; gap: calc(var(--u) * 18); align-items: center; padding: calc(var(--u) * 24) calc(var(--u) * 28) calc(var(--u) * 20) calc(var(--u) * 22);
  border-radius: calc(var(--u) * 26); background: var(--cream); color: var(--ink); transform-origin: 50% 0;
  box-shadow: inset 0 calc(var(--u) * 3) 0 #fff, 0 calc(var(--u) * 22) calc(var(--u) * 44) rgba(26, 8, 46, .5); animation: pxnUnfold .75s cubic-bezier(.2, .9, .25, 1.1) both; }
@keyframes pxnUnfold { 0% { opacity: 0; transform: rotateX(-80deg) translateY(calc(var(--u) * -30)); } 60% { opacity: 1; transform: rotateX(8deg); } 100% { transform: none; } }
.pxn .stamp { width: calc(var(--u) * 92); height: calc(var(--u) * 92); border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 40% 35%, #fff4d6, #f2d29a); box-shadow: 0 0 0 calc(var(--u) * 4) #fff, 0 0 0 calc(var(--u) * 7) #a77bff; }
.pxn .stamp img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 12%; transform: scale(1.25); transform-origin: 50% 20%; }
.pxn.teller .stamp { display: grid; place-items: center; background: radial-gradient(circle at 40% 35%, #b896ff, #5b21b6); }
.pxn.teller .stamp img { width: 70%; height: 70%; object-fit: contain; transform: none; }
.pxn p { margin: 0; font: 900 calc(var(--u) * 25)/1.32 "Nunito", sans-serif; color: var(--plum); }
.pxn p small { display: block; margin-bottom: calc(var(--u) * 6); font: 1000 calc(var(--u) * 14)/1 "Nunito", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--violet); }
.pxn .pxs-go { position: static; grid-column: 2; justify-self: end; height: calc(var(--u) * 58); padding: 0 calc(var(--u) * 16) 0 calc(var(--u) * 28); font-size: calc(var(--u) * 22); margin-top: calc(var(--u) * 6); animation-delay: .35s; }
/* Pix's own note: he leans in at its left edge, a cut-out over the paper */
.pxn:not(.teller) .paper { grid-template-columns: 1fr; padding-left: calc(var(--u) * 30); padding-top: calc(var(--u) * 26); }
.pxn:not(.teller) .pxs-go { grid-column: 1; }
/* Pix peeks over the note's top right corner; the rest of him is behind the paper */
.pxn .paper { z-index: 1; }
.pxn .pixcut { position: absolute; right: calc(var(--u) * -26); top: calc(var(--u) * -112); width: calc(var(--u) * 172); z-index: 0; pointer-events: none; transform-origin: 50% 100%;
  filter: drop-shadow(0 calc(var(--u) * 12) calc(var(--u) * 16) rgba(26, 8, 46, .5)); animation: pxsPixHop .7s .25s cubic-bezier(.3, 1.6, .4, 1) both, pxsBreath 4s 1.1s ease-in-out infinite; }

/* ---- iPhone: the same pieces round the paws */
.f-ios .pxs-card { left: calc(var(--u) * 62); bottom: calc(var(--u) * 14); width: calc(var(--u) * 430); padding: calc(var(--u) * 10) calc(var(--u) * 16) calc(var(--u) * 12); border-radius: calc(var(--u) * 18); }
.f-ios .pxs-card h2 { font-size: calc(var(--u) * 20); margin: calc(var(--u) * 4) 0 calc(var(--u) * 5); }
.f-ios .pxs-place { font-size: calc(var(--u) * 9); }
.f-ios .pxs-l { font-size: calc(var(--u) * 12.5); line-height: 1.32; }
.f-ios .pxs-l b { font-size: calc(var(--u) * 8.5); }
.f-ios .pxs-head { left: calc(var(--u) * 62); top: calc(var(--u) * 12); padding: calc(var(--u) * 4) calc(var(--u) * 18) calc(var(--u) * 4) calc(var(--u) * 4); gap: calc(var(--u) * 8); }
.f-ios .pxs-head h2 { font-size: calc(var(--u) * 16); }
.f-ios .pxs-clock { width: calc(var(--u) * 50); height: calc(var(--u) * 50); }
.f-ios .pxs-clock b { font-size: calc(var(--u) * 20); }
.f-ios .pxs-opts { left: calc(var(--u) * 62); top: calc(var(--u) * 76); width: calc(var(--u) * 400); gap: calc(var(--u) * 7); }
.f-ios .pxs-opt { min-height: calc(var(--u) * 40); padding: calc(var(--u) * 5) calc(var(--u) * 14) calc(var(--u) * 5) calc(var(--u) * 6); border-radius: calc(var(--u) * 14); gap: calc(var(--u) * 9); }
.f-ios .pxs-num { width: calc(var(--u) * 26); height: calc(var(--u) * 26); font-size: calc(var(--u) * 13); border-radius: calc(var(--u) * 8); }
.f-ios .pxs-opt .pxs-t { font-size: calc(var(--u) * 13); }
.f-ios .pxs-tools { left: calc(var(--u) * 62); bottom: calc(var(--u) * 12); gap: calc(var(--u) * 10); }
.f-ios .pxs-pause { height: calc(var(--u) * 56); padding: 0 calc(var(--u) * 22) 0 calc(var(--u) * 92); }
.f-ios .pxs-pause .pixcut { width: calc(var(--u) * 94); }
.f-ios .pxs.paused .pxs-pause { padding-left: calc(var(--u) * 22); }
.f-ios .pxs-pause .slowbar { left: calc(var(--u) * 18); right: calc(var(--u) * 18); bottom: calc(var(--u) * 5); height: calc(var(--u) * 3); }
.f-ios .pxs-clock .plus { font-size: calc(var(--u) * 8); bottom: calc(var(--u) * -9); padding: calc(var(--u) * 1) calc(var(--u) * 6); }
.f-ios .pxs-pause .lbl b { font-size: calc(var(--u) * 19); }
.f-ios .pxs-pause .lbl small { font-size: calc(var(--u) * 8); margin-top: calc(var(--u) * 3); }
.f-ios .pxs-deck { height: calc(var(--u) * 92); gap: calc(var(--u) * 6); }
.f-ios .pxs-deck .stack { width: calc(var(--u) * 72); height: calc(var(--u) * 92); }
.f-ios .pxs-deck .stack i { width: calc(var(--u) * 64); height: calc(var(--u) * 86); border-radius: calc(var(--u) * 10); }
.f-ios .pxs-deck .stack i::after { font-size: calc(var(--u) * 22); }
.f-ios .pxs-deck .stack i { background: radial-gradient(circle at 50% 46%, rgba(255, 212, 90, .95) 0 calc(var(--u) * 13), rgba(184, 111, 0, .9) calc(var(--u) * 13.5) calc(var(--u) * 15), transparent calc(var(--u) * 15.5)),
  repeating-linear-gradient(45deg, rgba(255, 210, 120, .09) 0 calc(var(--u) * 5), transparent calc(var(--u) * 5) calc(var(--u) * 10)), linear-gradient(160deg, #6b34b0, #3b1478); }
.f-ios .pxs-deck .cnt { width: calc(var(--u) * 26); height: calc(var(--u) * 26); font-size: calc(var(--u) * 13); }
.f-ios .pxs-deck .lbl { padding: calc(var(--u) * 5) calc(var(--u) * 10) calc(var(--u) * 6); border-radius: calc(var(--u) * 12); margin-bottom: calc(var(--u) * 4); }
.f-ios .pxs-deck .lbl b { font-size: calc(var(--u) * 12); }
.f-ios .pxs-deck .lbl small { font-size: calc(var(--u) * 8); }
.f-ios .pxs-key { display: none; }   /* a phone has no keys: no "Space" / "H" / "Enter" chips (the die hides its E the same way) */
.f-ios .pxs-pix { right: calc(var(--u) * 60); width: calc(var(--u) * 220); height: calc(var(--u) * 250); }
.f-ios .pxs-pix img { width: calc(var(--u) * 170); }
.f-ios .pxs-bubble { padding: calc(var(--u) * 9) calc(var(--u) * 13); border-radius: calc(var(--u) * 14); }
.f-ios .pxs-bubble p { font-size: calc(var(--u) * 13); }
.f-ios .pxs-bubble b { font-size: calc(var(--u) * 8); }
.f-ios .pxs-pix .pxs-bubble { right: calc(var(--u) * 100); bottom: calc(var(--u) * 170); width: calc(var(--u) * 230); }
.f-ios .pxs-hc { width: calc(var(--u) * 150); height: calc(var(--u) * 200); }
.f-ios .pxs-help { gap: calc(var(--u) * 20); }
.f-ios .pxs-help .pxs-bubble { width: calc(var(--u) * 200); }
.f-ios .pxs-help .pxs-bubble.left { right: calc(50% + var(--u) * 178); top: calc(50% - var(--u) * 80); }
.f-ios .pxs-help .pxs-bubble.right { left: calc(50% + var(--u) * 178); top: calc(50% - var(--u) * 80); }
.f-ios .pxs-go { right: calc(var(--u) * 64); bottom: calc(var(--u) * 14); height: calc(var(--u) * 44); padding: 0 calc(var(--u) * 14) 0 calc(var(--u) * 20); font-size: calc(var(--u) * 16); }
.f-ios .pxs-res { bottom: calc(var(--u) * 14); width: calc(var(--u) * 640); margin-left: calc(var(--u) * -320); grid-template-columns: calc(var(--u) * 50) 1fr auto; gap: calc(var(--u) * 12); padding: calc(var(--u) * 12) calc(var(--u) * 14); border-radius: calc(var(--u) * 18); }
.f-ios .pxs-res .medal { width: calc(var(--u) * 50); height: calc(var(--u) * 50); }
.f-ios .pxs-res .pxs-l { font-size: calc(var(--u) * 13.5); }
.f-ios .pxs-res .where { font-size: calc(var(--u) * 9); }
.f-ios .pxs-fact { right: calc(var(--u) * 64); width: calc(var(--u) * 330); padding: calc(var(--u) * 38) calc(var(--u) * 20) calc(var(--u) * 16); border-radius: calc(var(--u) * 18); }
.f-ios .pxs-fact .bulb { width: calc(var(--u) * 56); height: calc(var(--u) * 56); top: calc(var(--u) * -26); left: calc(var(--u) * 20); }
.f-ios .pxs-fact h2 { font-size: calc(var(--u) * 22); }
.f-ios .pxs-fact .pxs-l { font-size: calc(var(--u) * 12.5); }
.f-ios .pxs-fact .chip { font-size: calc(var(--u) * 9); }
.f-ios .pxs-fact .pxs-go { height: calc(var(--u) * 38); font-size: calc(var(--u) * 14); }
.f-ios .pxs-token { font-size: calc(var(--u) * 10); }
.f-ios .pxs-token i { width: calc(var(--u) * 24); height: calc(var(--u) * 24); font-size: calc(var(--u) * 11); }
.f-ios .pxr { right: calc(var(--u) * 64); top: calc(var(--u) * 64); width: calc(var(--u) * 280); padding: calc(var(--u) * 10) calc(var(--u) * 12); border-radius: calc(var(--u) * 16); }
.f-ios .pxr h3 { font-size: calc(var(--u) * 15); margin-bottom: calc(var(--u) * 6); }
.f-ios .pxr h3 .por { width: calc(var(--u) * 26); height: calc(var(--u) * 26); }
.f-ios .pxr-card { margin-top: calc(var(--u) * 6); padding: calc(var(--u) * 6) calc(var(--u) * 8); border-radius: calc(var(--u) * 12); gap: calc(var(--u) * 8); }
.f-ios .pxr-card b { font-size: calc(var(--u) * 13); }
.f-ios .pxr-card .chips span { font-size: calc(var(--u) * 8); }
.f-ios .pxn { top: calc(var(--u) * 66); width: calc(var(--u) * 340); margin-left: calc(var(--u) * -170); }
.f-ios .pxn .paper { grid-template-columns: calc(var(--u) * 50) 1fr; padding: calc(var(--u) * 12) calc(var(--u) * 14) calc(var(--u) * 10) calc(var(--u) * 12); gap: calc(var(--u) * 10); border-radius: calc(var(--u) * 14); }
.f-ios .pxn .stamp { width: calc(var(--u) * 50); height: calc(var(--u) * 50); }
.f-ios .pxn p { font-size: calc(var(--u) * 13); }
.f-ios .pxn p small { font-size: calc(var(--u) * 8.5); }
.f-ios .pxn .pxs-go { height: calc(var(--u) * 32); font-size: calc(var(--u) * 13); }
.f-ios .pxn:not(.teller) .paper { padding-left: calc(var(--u) * 16); padding-top: calc(var(--u) * 14); }
.f-ios .pxn .pixcut { right: calc(var(--u) * -14); top: calc(var(--u) * -58); width: calc(var(--u) * 90); }
.f-ios .pxr h3 { padding-left: calc(var(--u) * 62); min-height: calc(var(--u) * 24); }
.f-ios .pxr .pixcut { left: calc(var(--u) * -4); top: calc(var(--u) * -54); width: calc(var(--u) * 78); clip-path: inset(-20% -20% calc(100% - var(--u) * 57) -20%); }

/* ---- a child plays this (owner 2026-10-22: «це грає дитина... тексти більшими... ніде нічого ні на що не налазило»).
   Every word about a third bigger, every button bigger. The screen is 900u high (fix11.css), so the choice column is
   measured against the tools under it: pix-game.js fitChoices() lowers --fit until the last choice clears Pix's cap,
   so a long card shrinks a little instead of running under PIX PAUSE. */
.pixcut { aspect-ratio: 595 / 764; }
.pxs-place { gap: calc(var(--u) * 9); font-size: calc(var(--u) * 18); }
.pxs-place::before { width: calc(var(--u) * 14); height: calc(var(--u) * 14); }
.pxs-key { font-size: calc(var(--u) * 16); padding: calc(var(--u) * 4) calc(var(--u) * 11); border-radius: calc(var(--u) * 8); }

/* B-04: the scene's words */
.pxs-card { left: calc(var(--u) * 40); bottom: calc(var(--u) * 36); width: calc(var(--u) * 980); padding: calc(var(--u) * 26) calc(var(--u) * 38) calc(var(--u) * 32); border-radius: calc(var(--u) * 34); }
.pxs-card h2 { margin: calc(var(--u) * 10) 0 calc(var(--u) * 14); font-size: calc(var(--u) * 56); }
.pxs-l { font-size: calc(var(--u) * 34); line-height: 1.36; }
.pxs-l b { margin-bottom: calc(var(--u) * 5); font-size: calc(var(--u) * 18); }
.pxs-l.said { padding-left: calc(var(--u) * 20); border-left-width: calc(var(--u) * 5); }
.pxs-lines { gap: calc(var(--u) * 14); }

/* B-05: the header and the choices */
.pxs-head { left: calc(var(--u) * 36); top: calc(var(--u) * 28); gap: calc(var(--u) * 20); padding: calc(var(--u) * 8) calc(var(--u) * 44) calc(var(--u) * 8) calc(var(--u) * 8); }
.pxs-head h2 { margin-top: calc(var(--u) * 6); font-size: calc(var(--u) * 42); }
.pxs-clock { width: calc(var(--u) * 118); height: calc(var(--u) * 118); }
.pxs-clock b { font-size: calc(var(--u) * 50); }
.pxs-clock .plus { font-size: calc(var(--u) * 17); bottom: calc(var(--u) * -18); }
.pxs-opts { left: calc(var(--u) * 36); top: calc(var(--u) * 176); width: calc(var(--u) * 1010); gap: calc(var(--u) * 12); --fit: 1; }
.pxs-opt { gap: calc(var(--u) * 20); min-height: calc(var(--u) * 92 * var(--fit)); padding: calc(var(--u) * 10 * var(--fit)) calc(var(--u) * 34) calc(var(--u) * 10 * var(--fit)) calc(var(--u) * 14); border-radius: calc(var(--u) * 28); }
.pxs-opt .pxs-t { font-size: calc(var(--u) * 36 * var(--fit)); line-height: 1.2; }
.pxs-opts .pxs-num { width: calc(var(--u) * 64 * var(--fit)); height: calc(var(--u) * 64 * var(--fit)); font-size: calc(var(--u) * 32 * var(--fit)); border-radius: calc(var(--u) * 18); }

/* the tools: a bigger label on the deck */
.pxs-deck .lbl { padding: calc(var(--u) * 12) calc(var(--u) * 24) calc(var(--u) * 14); }
.pxs-deck .lbl b { font-size: calc(var(--u) * 32); }
.pxs-deck .lbl small { font-size: calc(var(--u) * 18); }
.pxs-pause .lbl small { font-size: calc(var(--u) * 19); }

/* B-06: Pix speaks in a big cloud, clear of the choices */
.pxs-bubble { padding: calc(var(--u) * 22) calc(var(--u) * 30); border-radius: calc(var(--u) * 32); }
.pxs-bubble b { margin-bottom: calc(var(--u) * 8); font-size: calc(var(--u) * 18); }
.pxs-bubble p { font-size: calc(var(--u) * 34); line-height: 1.28; }
.pxs-pix { width: calc(var(--u) * 560); height: calc(var(--u) * 560); }
.pxs-pix img { width: calc(var(--u) * 340); }
.pxs-pix .pxs-bubble { right: calc(var(--u) * 210); bottom: calc(var(--u) * 446); width: calc(var(--u) * 560); }

/* B-07: two bigger cards; the cloud stands beside the drawn one */
/* the two cards are bigger and lean a little, like cards just dealt onto the table; the drawn one rises (owner 2026-10-22) */
.pxs-hc { width: calc(var(--u) * 380); height: calc(var(--u) * 508); }
.pxs-help { gap: calc(var(--u) * 36); }
.pxs-hc.fred { rotate: -6deg; }
.pxs-hc.ed { rotate: 6deg; }
.pxs-hc.turned { z-index: 1; translate: 0 calc(var(--u) * -12); scale: 1.04; transition: translate .6s .9s cubic-bezier(.3, 1.4, .4, 1), scale .6s .9s cubic-bezier(.3, 1.4, .4, 1); }
/* the face: the cream card with him standing in it; once it has turned he RISES out of it as a whole (owner
   2026-10-22: «виходить, але чисто»): nothing is clipped at the sides, his lower edge melts into the card's light, his
   shadow falls on the card. The back carries the real silhouettes of the opening emblem over a golden question mark. */
.pxs-hc .front { overflow: visible; transform-style: preserve-3d;
  background: radial-gradient(85% 60% at 50% 32%, #fff1c4 0%, #f6c46a 38%, #b5652e 70%, #5b2a86 100%); }
.pxs-hc.ed .front { background: radial-gradient(85% 60% at 50% 32%, #dcfff8 0%, #6fdccd 36%, #1f8f86 66%, #1d3a6b 100%); }
.pxs-hc .front::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: repeating-radial-gradient(circle at 50% 32%, rgba(255, 255, 255, .07) 0 calc(var(--u) * 2), transparent calc(var(--u) * 2) calc(var(--u) * 14)); }
/* the glare: a soft band of light that slides with the tilt */
.pxs-hc .front::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; transform: translateZ(calc(var(--u) * 60));
  background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .28) 48%, rgba(255, 255, 255, .06) 56%, transparent 66%) var(--gx, 50%) 0 / 220% 100% no-repeat; mix-blend-mode: soft-light; }
/* everything on the face lives in 3D now, so each piece hides its own back when the card shows its back */
.pxs-hc .front img, .pxs-hc .front::before, .pxs-hc .front::after { backface-visibility: hidden; }
.pxs-hc .tilt { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .35s cubic-bezier(.2, .8, .3, 1); }
.pxs-hc .front img { left: 50%; bottom: var(--fb, -3%); width: var(--fw, 124%); height: auto; object-fit: fill; translate: -50% 0; transform-origin: 50% 100%; transform: translateZ(calc(var(--u) * 46));
  -webkit-mask-image: linear-gradient(to top, transparent 0, #000 22%); mask-image: linear-gradient(to top, transparent 0, #000 22%);
  filter: drop-shadow(0 calc(var(--u) * 18) calc(var(--u) * 16) rgba(26, 8, 46, .45)); }
.pxs-hc.ed .front img { --fw: 152%; --fb: -2%; }
.pxs-hc.turned .front img { animation: pxsCardRise .9s 1.3s cubic-bezier(.25, 1.35, .4, 1) both; }
@keyframes pxsCardRise { from { translate: -50% 16%; scale: .86; } to { translate: -50% 0; scale: 1; } }
.pxs-hc .back { background: repeating-linear-gradient(45deg, rgba(255, 210, 120, .08) 0 calc(var(--u) * 10), transparent calc(var(--u) * 10) calc(var(--u) * 20)), radial-gradient(80% 60% at 50% 38%, #6d36b8, transparent 70%), linear-gradient(160deg, #5b2a86, #2a1245); }
.pxs-hc .back::after { content: none; }
.pxs-hc .back::before { content: "?"; position: absolute; left: 0; right: 0; top: 2%; text-align: center; font: 1000 calc(var(--u) * 330)/1 "Nunito", sans-serif;
  background: linear-gradient(180deg, #fff6c8 0%, #ffd45a 45%, #c47f00 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 calc(var(--u) * 22) rgba(255, 200, 80, .55)); }
.pxs-hc .back .sil, .pxs-hc .back .rim { position: absolute; left: 50%; bottom: calc(var(--u) * 6); width: 96%; aspect-ratio: 1; translate: -50% 0; pointer-events: none; }
/* the emblem's silhouettes, as on the opening screen: deep plum shapes with the warm rim light along their edges */
.pxs-hc .back .sil { background: linear-gradient(180deg, #4b1f80 0%, #2a0f4d 60%, #1a0833 100%);
  -webkit-mask: url(../../../story/title/emblem-silhouette.webp) center / contain no-repeat; mask: url(../../../story/title/emblem-silhouette.webp) center / contain no-repeat; }
.pxs-hc .back .rim { mix-blend-mode: screen; filter: brightness(1.6) saturate(1.2); }
.f-ios .pxs-hc .back::before { font-size: calc(var(--u) * 158); }
.f-ios .pxs-hc .back .sil, .f-ios .pxs-hc .back .rim { bottom: calc(var(--u) * 3); }
/* his name on a gold plate across the foot of the card, in front of everything (the head now covers the top) */
.pxs-hc .plate { position: absolute; left: 50%; bottom: calc(var(--u) * -20); translate: -50% 0; z-index: 3; padding: calc(var(--u) * 8) calc(var(--u) * 34); border-radius: 999px; white-space: nowrap;
  font: 1000 calc(var(--u) * 30)/1.1 "Nunito", sans-serif; color: #3a1b00; background: var(--gold); box-shadow: inset 0 calc(var(--u) * 3) 0 rgba(255, 255, 255, .7), 0 calc(var(--u) * 5) 0 var(--gold-edge), 0 calc(var(--u) * 14) calc(var(--u) * 22) rgba(26, 8, 46, .45);
  animation: pxsPop .5s 1.75s cubic-bezier(.3, 1.6, .4, 1) both; }
.pxs-hc.ed .plate { background: linear-gradient(170deg, #b8fff4 0%, #4fd6c6 45%, #1a9a8c 100%); color: #06362f; box-shadow: inset 0 calc(var(--u) * 3) 0 rgba(255, 255, 255, .7), 0 calc(var(--u) * 5) 0 #0e6b61, 0 calc(var(--u) * 14) calc(var(--u) * 22) rgba(26, 8, 46, .45); }
.pxs-hc .front .rib { display: none; }
.f-ios .pxs-hc .plate { bottom: calc(var(--u) * -10); padding: calc(var(--u) * 4) calc(var(--u) * 16); font-size: calc(var(--u) * 15); }
.pxs-hc .front .rib { font-size: calc(var(--u) * 24); padding: calc(var(--u) * 6) calc(var(--u) * 26); }
.pxs-help .pxs-bubble { width: calc(var(--u) * 430); }
.pxs-help .pxs-bubble.left { right: calc(50% + var(--u) * 448); top: calc(50% - var(--u) * 190); }
.pxs-help .pxs-bubble.right { left: calc(50% + var(--u) * 448); top: calc(50% - var(--u) * 190); }

/* gold: the step forward */
.pxs-go { right: calc(var(--u) * 40); bottom: calc(var(--u) * 36); height: calc(var(--u) * 100); gap: calc(var(--u) * 16); padding: 0 calc(var(--u) * 30) 0 calc(var(--u) * 46); font-size: calc(var(--u) * 42); }

/* B-08: what happened */
.pxs-res { width: calc(var(--u) * 1360); margin-left: calc(var(--u) * -680); bottom: calc(var(--u) * 40); grid-template-columns: calc(var(--u) * 116) 1fr auto; gap: calc(var(--u) * 30); padding: calc(var(--u) * 30) calc(var(--u) * 34) calc(var(--u) * 30) calc(var(--u) * 30); }
.pxs-res .medal { width: calc(var(--u) * 116); height: calc(var(--u) * 116); }
.pxs-res .pxs-l { font-size: calc(var(--u) * 35); }
.pxs-res .where { font-size: calc(var(--u) * 17); }
.pxs-token { font-size: calc(var(--u) * 24); gap: calc(var(--u) * 14); padding-right: calc(var(--u) * 22); }
.pxs-token i { width: calc(var(--u) * 58); height: calc(var(--u) * 58); font-size: calc(var(--u) * 25); }

/* B-09: did you know? */
.pxs-fact { width: calc(var(--u) * 780); padding: calc(var(--u) * 80) calc(var(--u) * 46) calc(var(--u) * 36); }
.pxs-fact .bulb { width: calc(var(--u) * 116); height: calc(var(--u) * 116); top: calc(var(--u) * -54); }
.pxs-fact h2 { font-size: calc(var(--u) * 56); margin-bottom: calc(var(--u) * 14); }
.pxs-fact .pxs-l { font-size: calc(var(--u) * 33); }
.pxs-fact .chip { font-size: calc(var(--u) * 16); padding: calc(var(--u) * 8) calc(var(--u) * 18); }
.pxs-fact .pxs-go { height: calc(var(--u) * 84); font-size: calc(var(--u) * 34); }

/* B-03: the roads */
.pxr { width: calc(var(--u) * 620); top: calc(var(--u) * 158); padding: calc(var(--u) * 24) calc(var(--u) * 24) calc(var(--u) * 26); }
.pxr h3 { font-size: calc(var(--u) * 40); padding-left: calc(var(--u) * 132); min-height: calc(var(--u) * 52); margin-bottom: calc(var(--u) * 14); }
.pxr .pixcut { width: calc(var(--u) * 172); top: calc(var(--u) * -118); clip-path: inset(-20% -20% calc(100% - var(--u) * 124) -20%); }
.pxr-card { gap: calc(var(--u) * 18); margin-top: calc(var(--u) * 14); padding: calc(var(--u) * 16) calc(var(--u) * 20) calc(var(--u) * 16) calc(var(--u) * 16); border-radius: calc(var(--u) * 24); }
.pxr-card .pxs-num { width: calc(var(--u) * 64); height: calc(var(--u) * 64); font-size: calc(var(--u) * 32); border-radius: calc(var(--u) * 18); }
.pxr-card b { font-size: calc(var(--u) * 33); }
.pxr-card .chips span { font-size: calc(var(--u) * 18); padding: calc(var(--u) * 4) calc(var(--u) * 14); }

/* Pix's note: bigger, and set left of centre so it never lies over the road panel; Pix peeks over its left corner,
   clear of the satchel strip in the middle of the top */
.pxn { width: calc(var(--u) * 760); left: calc(50% - var(--u) * 150); margin-left: calc(var(--u) * -380); top: calc(var(--u) * 150); }
.pxn .paper { padding: calc(var(--u) * 28) calc(var(--u) * 32) calc(var(--u) * 24) calc(var(--u) * 26); border-radius: calc(var(--u) * 30); }
.pxn:not(.teller) .paper { padding-left: calc(var(--u) * 34); padding-top: calc(var(--u) * 30); }
.pxn p { font-size: calc(var(--u) * 33); }
.pxn p small { font-size: calc(var(--u) * 18); margin-bottom: calc(var(--u) * 8); }
.pxn .pxs-go { height: calc(var(--u) * 72); font-size: calc(var(--u) * 28); padding: 0 calc(var(--u) * 20) 0 calc(var(--u) * 34); }
.pxn .pixcut { right: auto; left: calc(var(--u) * -30); top: calc(var(--u) * -126); width: calc(var(--u) * 180); }

/* ---- iPhone: the screen is 844 x 390 (fix9.css), so sizes here are points; a child's reading size is 16 and up */
.f-ios .pxs-place { font-size: calc(var(--u) * 10); }
.f-ios .pxs-key { font-size: calc(var(--u) * 8); padding: calc(var(--u) * 1) calc(var(--u) * 5); }
.f-ios .pxs-card { left: calc(var(--u) * 58); bottom: calc(var(--u) * 12); width: calc(var(--u) * 540); padding: calc(var(--u) * 12) calc(var(--u) * 18) calc(var(--u) * 14); border-radius: calc(var(--u) * 20); }
.f-ios .pxs-card h2 { font-size: calc(var(--u) * 27); margin: calc(var(--u) * 4) 0 calc(var(--u) * 6); }
.f-ios .pxs-l { font-size: calc(var(--u) * 16.5); line-height: 1.32; }
.f-ios .pxs-l b { font-size: calc(var(--u) * 9.5); }
.f-ios .pxs-lines { gap: calc(var(--u) * 6); }
.f-ios .pxs-head { left: calc(var(--u) * 58); top: calc(var(--u) * 10); gap: calc(var(--u) * 10); padding: calc(var(--u) * 4) calc(var(--u) * 22) calc(var(--u) * 4) calc(var(--u) * 4); }
.f-ios .pxs-head h2 { font-size: calc(var(--u) * 21); margin-top: calc(var(--u) * 3); }
.f-ios .pxs-clock { width: calc(var(--u) * 56); height: calc(var(--u) * 56); }
.f-ios .pxs-clock b { font-size: calc(var(--u) * 24); }
.f-ios .pxs-opts { left: calc(var(--u) * 58); top: calc(var(--u) * 82); width: calc(var(--u) * 520); gap: calc(var(--u) * 6); }
.f-ios .pxs-opt { min-height: calc(var(--u) * 42 * var(--fit)); padding: calc(var(--u) * 4 * var(--fit)) calc(var(--u) * 16) calc(var(--u) * 4 * var(--fit)) calc(var(--u) * 6); border-radius: calc(var(--u) * 14); gap: calc(var(--u) * 10); }
.f-ios .pxs-opt .pxs-t { font-size: calc(var(--u) * 17 * var(--fit)); }
.f-ios .pxs-opts .pxs-num { width: calc(var(--u) * 32 * var(--fit)); height: calc(var(--u) * 32 * var(--fit)); font-size: calc(var(--u) * 16 * var(--fit)); border-radius: calc(var(--u) * 9); }
.f-ios .pxs-tools { left: calc(var(--u) * 58); bottom: calc(var(--u) * 10); }
.f-ios .pxs-pause { height: calc(var(--u) * 54); padding: 0 calc(var(--u) * 22) 0 calc(var(--u) * 84); }
.f-ios .pxs-pause .pixcut { width: calc(var(--u) * 86); }
.f-ios .pxs-pause .lbl b { font-size: calc(var(--u) * 21); }
.f-ios .pxs-pause .lbl small { font-size: calc(var(--u) * 9.5); }
.f-ios .pxs-deck .lbl b { font-size: calc(var(--u) * 15); }
.f-ios .pxs-deck .lbl small { font-size: calc(var(--u) * 9.5); }
.f-ios .pxs-bubble { padding: calc(var(--u) * 10) calc(var(--u) * 14); border-radius: calc(var(--u) * 16); }
.f-ios .pxs-bubble b { font-size: calc(var(--u) * 9); margin-bottom: calc(var(--u) * 3); }
.f-ios .pxs-bubble p { font-size: calc(var(--u) * 16.5); }
.f-ios .pxs-pix { right: calc(var(--u) * 50); width: calc(var(--u) * 260); height: calc(var(--u) * 280); }
.f-ios .pxs-pix img { width: calc(var(--u) * 160); }
/* on the phone the cloud stands right over Pix, clear of the choices on the left */
.f-ios .pxs-pix { right: calc(var(--u) * 44); width: calc(var(--u) * 200); }
.f-ios .pxs-pix .pxs-bubble { right: calc(var(--u) * -20); bottom: calc(var(--u) * 206); width: calc(var(--u) * 226); }
.f-ios .pxs-pix .pxs-bubble p { font-size: calc(var(--u) * 15.5); }
.f-ios .pxs-hc { width: calc(var(--u) * 180); height: calc(var(--u) * 240); }
.f-ios .pxs-help { gap: calc(var(--u) * 24); }
.f-ios .pxs-hc .front .rib { font-size: calc(var(--u) * 12); }
.f-ios .pxs-help .pxs-bubble { width: calc(var(--u) * 220); }
/* the phone is short of width: the two cards move over to make room for the cloud on the speaking side */
.f-ios .pxs-help:has(.pxs-bubble.left) { padding-left: calc(var(--u) * 230); }
.f-ios .pxs-help:has(.pxs-bubble.right) { padding-right: calc(var(--u) * 230); }
.f-ios .pxs-help .pxs-bubble.left { right: calc(50% + var(--u) * 110); top: calc(50% - var(--u) * 96); }
.f-ios .pxs-help .pxs-bubble.right { left: calc(50% + var(--u) * 110); top: calc(50% - var(--u) * 96); }
.f-ios .pxs-go { right: calc(var(--u) * 58); bottom: calc(var(--u) * 12); height: calc(var(--u) * 50); padding: 0 calc(var(--u) * 14) 0 calc(var(--u) * 22); font-size: calc(var(--u) * 21); }
.f-ios .pxs-res { width: calc(var(--u) * 700); margin-left: calc(var(--u) * -350); bottom: calc(var(--u) * 12); grid-template-columns: calc(var(--u) * 56) 1fr auto; gap: calc(var(--u) * 14); padding: calc(var(--u) * 14) calc(var(--u) * 16); border-radius: calc(var(--u) * 20); }
.f-ios .pxs-res .medal { width: calc(var(--u) * 56); height: calc(var(--u) * 56); }
.f-ios .pxs-res .pxs-l { font-size: calc(var(--u) * 17); }
.f-ios .pxs-res .where { font-size: calc(var(--u) * 9); }
.f-ios .pxs-token { font-size: calc(var(--u) * 12); }
.f-ios .pxs-token i { width: calc(var(--u) * 30); height: calc(var(--u) * 30); font-size: calc(var(--u) * 13); }
.f-ios .pxs-fact { right: calc(var(--u) * 58); width: calc(var(--u) * 400); padding: calc(var(--u) * 40) calc(var(--u) * 22) calc(var(--u) * 16); border-radius: calc(var(--u) * 20); }
.f-ios .pxs-fact .bulb { width: calc(var(--u) * 58); height: calc(var(--u) * 58); top: calc(var(--u) * -28); }
.f-ios .pxs-fact h2 { font-size: calc(var(--u) * 26); margin-bottom: calc(var(--u) * 6); }
.f-ios .pxs-fact .pxs-l { font-size: calc(var(--u) * 15.5); }
.f-ios .pxs-fact .chip { font-size: calc(var(--u) * 9); }
.f-ios .pxs-fact .pxs-go { height: calc(var(--u) * 42); font-size: calc(var(--u) * 17); }
.f-ios .pxr { right: calc(var(--u) * 58); top: calc(var(--u) * 70); width: calc(var(--u) * 320); padding: calc(var(--u) * 10) calc(var(--u) * 12) calc(var(--u) * 12); border-radius: calc(var(--u) * 18); }
.f-ios .pxr h3 { font-size: calc(var(--u) * 20); padding-left: 0; padding-right: calc(var(--u) * 84); min-height: calc(var(--u) * 26); margin-bottom: calc(var(--u) * 6); }
.f-ios .pxr .pixcut { left: auto; right: calc(var(--u) * 6); width: calc(var(--u) * 86); top: calc(var(--u) * -58); clip-path: inset(-20% -20% calc(100% - var(--u) * 61) -20%); }
.f-ios .pxr-card { margin-top: calc(var(--u) * 6); padding: calc(var(--u) * 7) calc(var(--u) * 10); border-radius: calc(var(--u) * 13); gap: calc(var(--u) * 9); }
.f-ios .pxr-card .pxs-num { width: calc(var(--u) * 32); height: calc(var(--u) * 32); font-size: calc(var(--u) * 16); border-radius: calc(var(--u) * 9); }
.f-ios .pxr-card b { font-size: calc(var(--u) * 16.5); }
.f-ios .pxr-card .chips span { font-size: calc(var(--u) * 9.5); padding: calc(var(--u) * 2) calc(var(--u) * 8); }
.f-ios .pxn { width: calc(var(--u) * 300); left: calc(var(--u) * 140); margin-left: 0; top: calc(var(--u) * 92); }
.f-ios .pxn .paper { padding: calc(var(--u) * 14) calc(var(--u) * 16) calc(var(--u) * 12); border-radius: calc(var(--u) * 16); }
.f-ios .pxn:not(.teller) .paper { grid-template-columns: 1fr; padding-left: calc(var(--u) * 18); padding-top: calc(var(--u) * 16); }
.f-ios .pxn p { font-size: calc(var(--u) * 16.5); }
.f-ios .pxn p small { font-size: calc(var(--u) * 9); }
.f-ios .pxn .pxs-go { height: calc(var(--u) * 38); font-size: calc(var(--u) * 15); padding: 0 calc(var(--u) * 10) 0 calc(var(--u) * 18); }
.f-ios .pxn .pixcut { right: auto; left: calc(var(--u) * -16); top: calc(var(--u) * -62); width: calc(var(--u) * 88); }

/* ---- the tutorial's spotlight: everything but the subject of Pix's note blurs and darkens; the subject stays sharp in a
   soft hole with a breathing gold ring (js: spotlight()) */
.pxn-spot { position: absolute; inset: 0; z-index: 45; pointer-events: none; opacity: 0; transition: opacity .45s ease;
  background: radial-gradient(120% 90% at 50% 40%, rgba(42, 18, 69, .28), rgba(20, 6, 36, .62));
  backdrop-filter: blur(5px) saturate(.85); -webkit-backdrop-filter: blur(5px) saturate(.85); }
.pxn-spot.on { opacity: 1; }
.pxn-spot.hole {
  -webkit-mask-image: radial-gradient(ellipse calc(var(--w) * .8 + var(--u) * 26) calc(var(--h) * .8 + var(--u) * 26) at var(--x) var(--y), transparent 74%, #000 100%);
  mask-image: radial-gradient(ellipse calc(var(--w) * .8 + var(--u) * 26) calc(var(--h) * .8 + var(--u) * 26) at var(--x) var(--y), transparent 74%, #000 100%); }
/* the subject itself: a gold frame with light running round it, a breathing halo and four twinkles at its corners */
@property --spin { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
.pxn-glow { position: absolute; z-index: 45; left: var(--x); top: var(--y); width: calc(var(--w) + var(--u) * 26); height: calc(var(--h) + var(--u) * 26);
  translate: -50% -50%; border-radius: calc(var(--u) * 30); pointer-events: none; opacity: 0; transition: opacity .5s ease; }
.pxn-glow.on.show { opacity: 1; }
.pxn-glow::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: calc(var(--u) * 4);
  background: conic-gradient(from var(--spin), rgba(255, 212, 90, .7) 0deg, rgba(255, 212, 90, .7) 170deg, #fff8d8 230deg, #ffd45a 262deg, #ff9be6 292deg, #c9a6ff 318deg, rgba(255, 212, 90, .7) 350deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: pxnSpin 2.8s linear infinite; filter: drop-shadow(0 0 calc(var(--u) * 6) rgba(255, 220, 120, .9)); }
.pxn-glow::after { content: ""; position: absolute; inset: calc(var(--u) * -10); border-radius: inherit;
  box-shadow: 0 0 calc(var(--u) * 50) calc(var(--u) * 6) rgba(255, 200, 90, .35), inset 0 0 calc(var(--u) * 30) rgba(255, 220, 140, .25); animation: pxnHalo 2.2s ease-in-out infinite; }
@keyframes pxnSpin { to { --spin: 360deg; } }
@keyframes pxnHalo { 0%, 100% { opacity: .55; scale: 1; } 50% { opacity: 1; scale: 1.025; } }
.pxn-glow i { position: absolute; width: calc(var(--u) * 18); height: calc(var(--u) * 18); background: radial-gradient(circle, #fff 0 18%, rgba(255, 230, 150, .9) 30%, transparent 70%);
  clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); animation: pxnTwinkle 2.4s ease-in-out infinite; }
.pxn-glow i:nth-child(1) { left: calc(var(--u) * -9); top: calc(var(--u) * -9); }
.pxn-glow i:nth-child(2) { right: calc(var(--u) * -9); top: calc(var(--u) * -9); animation-delay: .6s; }
.pxn-glow i:nth-child(3) { right: calc(var(--u) * -9); bottom: calc(var(--u) * -9); animation-delay: 1.2s; }
.pxn-glow i:nth-child(4) { left: calc(var(--u) * -9); bottom: calc(var(--u) * -9); animation-delay: 1.8s; }
@keyframes pxnTwinkle { 0%, 100% { opacity: 0; scale: .4; rotate: 0deg; } 40% { opacity: 1; scale: 1.15; rotate: 45deg; } 70% { opacity: .2; scale: .7; } }
.pxn { transition: none; }


/* ---- Pix's notes, whole (owner 2026-10-22: no head cut by a card): the layer covers the screen and lets clicks through;
   Pix stands at the foot on the far side from his subject, his cloud sits where js placeNote() finds free room */
.pxn.pix, .pxn.teller, .f-ios .pxn.pix, .f-ios .pxn.teller { inset: 0; left: 0; top: 0; width: auto; margin: 0; pointer-events: none; perspective: none; }
.pxn .pxn-box { position: absolute; pointer-events: auto; }
.pxn.pix .pxn-pix { position: absolute; bottom: calc(var(--u) * -14); width: calc(var(--u) * 320); aspect-ratio: 595 / 764; pointer-events: none; transform-origin: 50% 100%;
  filter: drop-shadow(0 calc(var(--u) * 16) calc(var(--u) * 26) rgba(16, 4, 30, .55)); animation: pxsPixIn .7s cubic-bezier(.2, .9, .25, 1.12) both, pxsBreath 4s 1s ease-in-out infinite; }
.pxn.pix[data-side="left"] .pxn-pix { left: calc(var(--u) * 26); }
.pxn.pix[data-side="right"] .pxn-pix { right: calc(var(--u) * 26); }
.pxn.pix .pxn-bubble { width: calc(var(--u) * 560); padding: calc(var(--u) * 22) calc(var(--u) * 28) calc(var(--u) * 20); border-radius: calc(var(--u) * 30); background: var(--cream); color: var(--ink);
  box-shadow: inset 0 calc(var(--u) * 3) 0 #fff, 0 0 0 calc(var(--u) * 3) rgba(196, 163, 255, .55), 0 calc(var(--u) * 22) calc(var(--u) * 44) rgba(16, 4, 30, .5); animation: pxsBubble .5s .25s cubic-bezier(.2, .9, .25, 1.15) both; }
.pxn.pix .pxn-bubble::after { content: ""; position: absolute; left: var(--tail, 60px); bottom: calc(var(--u) * -12); width: calc(var(--u) * 26); height: calc(var(--u) * 26); rotate: 45deg; border-radius: calc(var(--u) * 5); background: #fff3e0; }
.pxn.pix .pxn-bubble.below::after { bottom: auto; top: calc(var(--u) * -12); }
.pxn.pix .pxn-bubble small { display: block; margin-bottom: calc(var(--u) * 6); font: 1000 calc(var(--u) * 18)/1 "Nunito", system-ui, sans-serif; letter-spacing: .12em; text-transform: uppercase; color: var(--violet); }
.pxn.pix .pxn-bubble p { margin: 0; font: 900 calc(var(--u) * 33)/1.3 "Nunito", system-ui, sans-serif; color: var(--plum); }
.pxn.pix .pxn-bubble .pxs-go { position: static; float: right; margin-top: calc(var(--u) * 12); height: calc(var(--u) * 70); font-size: calc(var(--u) * 28); padding: 0 calc(var(--u) * 20) 0 calc(var(--u) * 34); }
.pxn.teller .paper { width: calc(var(--u) * 700); }
.f-ios .pxn.pix .pxn-pix { width: calc(var(--u) * 150); bottom: calc(var(--u) * -8); }
.f-ios .pxn.pix[data-side="left"] .pxn-pix { left: calc(var(--u) * 50); }
.f-ios .pxn.pix[data-side="right"] .pxn-pix { right: calc(var(--u) * 50); }
.f-ios .pxn.pix .pxn-bubble { width: calc(var(--u) * 290); padding: calc(var(--u) * 11) calc(var(--u) * 14) calc(var(--u) * 10); border-radius: calc(var(--u) * 16); }
.f-ios .pxn.pix .pxn-bubble small { font-size: calc(var(--u) * 9); }
.f-ios .pxn.pix .pxn-bubble p { font-size: calc(var(--u) * 16.5); }
.f-ios .pxn.pix .pxn-bubble .pxs-go { height: calc(var(--u) * 38); font-size: calc(var(--u) * 15); padding: 0 calc(var(--u) * 10) 0 calc(var(--u) * 18); margin-top: calc(var(--u) * 6); }
.f-ios .pxn.teller .paper { width: calc(var(--u) * 320); }
/* while a note speaks, the step forward of the scene waits out of sight */
.pxs:has(> .pxn:not([hidden])) [data-ready] { visibility: hidden; }


/* the road panel without Pix: its heading starts at the panel's own edge */
.pxr h3, .f-ios .pxr h3 { padding-left: 0; padding-right: 0; justify-content: center; }

/* ---- UI standard fixes (2026-10-22, layout check): the scene's header clears the avatar, the tilted help cards never
   touch, the HUD under a full scene is put away, the Fairy Teller stands whole like Pix */
.pxs-head { left: calc(var(--u) * 196); }
.pxs-opts { top: calc(var(--u) * 196); }
.f-ios .pxs-head { left: calc(var(--u) * 176); }
.f-ios .pxs-opts { top: calc(var(--u) * 124); }
.pxs-help { gap: calc(var(--u) * 84); }
.f-ios .pxs-help { gap: calc(var(--u) * 46); }
.game:has(.pxs.on) .pix-hud .px-die, .game:has(.pxs.on) .pix-hud .px-strip { visibility: hidden; }

/* ---- iPhone by measurement (844 x 389 u; avatar 62-162 x 6-114, satchel 324-520 x 8-60, tablet 702-784 x 8-84,
   die 686-782 x 161-271, paws 71-179 and 670-780 x 256-366): Pix's pieces sit in the free middle */
.f-ios .pxr { left: calc(var(--u) * 352); right: auto; top: calc(var(--u) * 70); width: calc(var(--u) * 316); }
.f-ios .pxn.pix .pxn-pix { width: calc(var(--u) * 118); }
.f-ios .pxn.pix[data-side="left"] .pxn-pix { left: calc(var(--u) * 196); }
.f-ios .pxn.pix[data-side="right"] .pxn-pix { right: calc(var(--u) * 196); }
.f-ios .pxs .pxn.pix[data-side="left"] .pxn-pix { left: calc(var(--u) * 24); }
.f-ios .pxs .pxn.pix[data-side="right"] .pxn-pix { right: calc(var(--u) * 24); }
.f-ios .pxs-card { width: calc(var(--u) * 600); }
.f-ios .pxs-opts { width: calc(var(--u) * 600); }
.f-ios .pxs-fact { left: calc(50% - var(--u) * 210); right: auto; width: calc(var(--u) * 420); }
.f-ios .pxs-hc { width: calc(var(--u) * 150 * var(--help-k, 1)); height: calc(var(--u) * 200 * var(--help-k, 1)); }
.f-ios .pxs-help, .f-ios .pxs-help:has(.pxs-bubble.left), .f-ios .pxs-help:has(.pxs-bubble.right) { padding: 0; gap: calc(var(--u) * 40); }
.f-ios .pxs-help .pxs-bubble { width: calc(var(--u) * 196); }
.f-ios .pxs-help .pxs-bubble.left { right: calc(50% + var(--u) * 182); top: calc(50% - var(--u) * 40); }
.f-ios .pxs-help .pxs-bubble.right { left: calc(50% + var(--u) * 182); top: calc(50% - var(--u) * 40); }
.pxs-help .pxs-bubble.left { right: calc(50% + var(--u) * 486); }
.pxs-help .pxs-bubble.right { left: calc(50% + var(--u) * 486); }

/* ---- focus while a note of the tutorial speaks: the HUD's own corners step back (the subject stays lit) */
.game:has(.pxn:not([hidden])) :is(#avatarButton, #tabletButton, #joystickZone, #touchAction, .px-strip) { visibility: hidden; }
/* iPhone, by measurement: the scene's words start right of the avatar; the choices under the header pill, clear of the
   tools; the die above the right paw */
.f-ios .pxs-card { left: calc(var(--u) * 176); width: calc(var(--u) * 460); }
.f-ios .pxs-opts { left: calc(var(--u) * 176); top: calc(var(--u) * 76); width: calc(var(--u) * 480); }
.f-ios .px-die { bottom: calc(var(--u) * 140); }

/* iPhone, second measure: the gift card stops before the gold button, the help cloud keeps off the tilted card, Pix's
   pause cloud is a little smaller so it finds room above the choices */
.f-ios .pxs-card { width: calc(var(--u) * 440); }
.f-ios .pxs-help .pxs-bubble.left { right: calc(50% + var(--u) * 194); }
.f-ios .pxs-help .pxs-bubble.right { left: calc(50% + var(--u) * 194); }
.f-ios .pxs-pix .pxs-bubble { width: calc(var(--u) * 210); }
.f-ios .pxs-pix .pxs-bubble p { font-size: calc(var(--u) * 15.5); }
@media (prefers-reduced-motion: reduce) { .pxs *, .pxr *, .pxn * { animation-duration: .01ms !important; transition-duration: .01ms !important; } }

/* ---- the owner's play-test of 2026-10-22 (pix-pause/OWNER-TEST-2026-10-22.md; numbers are its items) */
/* 6. PIX PAUSE, Pix on it and the Help deck stand still: no hop on any card, a soft appearance with the choice, and
   they stay while the help cards are dealt (they only wait, nothing is pressed under the cards); Pix breathes */
.pxs-pause, .pxs-deck { animation: none; }
.pxs-pause .pixcut { animation: pxsBreath 4s ease-in-out infinite; }
.pxs-pause.glow { animation: pxsGlow 1.6s ease-in-out infinite; }
.pxs-tools:not([hidden]) { animation: pxsFadeIn .35s ease both; }
@keyframes pxsFadeIn { from { opacity: 0; } to { opacity: 1; } }
.pxs.helping .pxs-tools { opacity: 1; pointer-events: none; }
.pxs.helping .pxs-tools > * { pointer-events: none; }
/* ... and the dealt cards stand higher and a little smaller, the character rising out of the card whole inside the
   screen, the cards clear of the tools under them; the cloud stands right beside the drawn card */
.pxs-hc { width: calc(var(--u) * 320); height: calc(var(--u) * 428); }
.pxs-help { align-items: flex-start; padding-top: calc(var(--u) * 152); }
.pxs-help .pxs-bubble.left { right: calc(50% + var(--u) * 404); top: calc(var(--u) * 206); }
.pxs-help .pxs-bubble.right { left: calc(50% + var(--u) * 404); top: calc(var(--u) * 206); }
.f-ios .pxs-help, .f-ios .pxs-help:has(.pxs-bubble.left), .f-ios .pxs-help:has(.pxs-bubble.right) { align-items: flex-start; padding-top: calc(var(--u) * 62); --help-k: .86; }
.f-ios .pxs-help .pxs-bubble.left { right: calc(50% + var(--u) * 168); top: calc(var(--u) * 84); }
.f-ios .pxs-help .pxs-bubble.right { left: calc(50% + var(--u) * 168); top: calc(var(--u) * 84); }
/* 3, 7. Pix's day moves by the die and the cards: the walking paws and the free world's "In Focus" thought are not on
   his day (they come back when the day pauses or ends: the day's HUD is gone then) */
.game:has(.pix-hud) #touchControls, .game:has(.pix-hud) #touchControls * { visibility: hidden !important; }
.game:has(.pix-hud) .avatar-thought { display: none; }
/* a scene covers the HUD's avatar and tablet (z-index); said in so many words, so nothing measures against them */
.game:has(.pxs.on) :is(#avatarButton, #tabletButton) { visibility: hidden; }
/* 10. the choice screen: the clock pill in the top-left corner, the answers in the middle of the screen, PIX PAUSE and the
   deck centred under them with air between (no transforms: the layout boxes are what the clouds and fitChoices measure) */
.pxs-head { left: calc(var(--u) * 40); top: calc(var(--u) * 28); }
.pxs-opts { left: calc(50% - var(--u) * 505); }
.pxs-tools { left: 0; right: 0; justify-content: center; gap: calc(var(--u) * 64); pointer-events: none; }
.pxs-tools > * { pointer-events: auto; }
.f-ios .pxs-head { left: calc(var(--u) * 58); top: calc(var(--u) * 10); }
.f-ios .pxs-opts { left: calc(50% - var(--u) * 240); top: calc(var(--u) * 88); }
/* (owner 2026-10-22, second look) PIX PAUSE in the bottom-left corner, the Help cards in the bottom-right corner */
.pxs-tools { left: calc(var(--u) * 40); right: calc(var(--u) * 40); justify-content: space-between; gap: 0; }
.f-ios .pxs-tools { left: calc(var(--u) * 58); right: calc(var(--u) * 58); gap: 0; }
/* whoever speaks over the choice (Pix in his pause, Fred's reminder) stands SMALL in the middle between the two, his
   cloud beside him at the decided reading size, its point toward him (js standIn measures the middle) */
.pxs-pix.mid { right: auto; width: auto; height: auto; display: flex; align-items: center; justify-content: center; gap: calc(var(--u) * 16); }
.pxs-pix.mid img { position: relative; right: auto; bottom: auto; align-self: flex-end; flex: none; width: auto; height: 100%; max-height: calc(var(--u) * 250);
  margin-bottom: calc(var(--u) * -10); aspect-ratio: 595 / 764; object-fit: contain; }
.f-ios .pxs-pix.mid img { width: auto; max-height: calc(var(--u) * 118); margin-bottom: calc(var(--u) * -6); }
.pxs-pix.mid .pxs-bubble, .f-ios .pxs-pix.mid .pxs-bubble { position: relative; left: auto; right: auto; top: auto; bottom: auto; flex: 0 1 auto; width: auto; max-width: calc(var(--u) * 560); }
.f-ios .pxs-pix.mid .pxs-bubble { max-width: calc(var(--u) * 260); }
.pxs-pix.mid .pxs-bubble p { font-size: calc(var(--u) * 34); }
.f-ios .pxs-pix.mid .pxs-bubble p { font-size: calc(var(--u) * 16.5); }
.pxs-pix.mid .pxs-bubble::after, .f-ios .pxs-pix.mid .pxs-bubble::after { left: calc(var(--u) * -17); right: auto; top: 34%; bottom: auto; }
.f-ios .pxs-pix.mid .pxs-bubble::after { left: calc(var(--u) * -9); }
/* the help cards' Continue goes to the middle of the bottom: the corners hold PIX PAUSE and the deck */
.pxs-help > .pxs-go { left: 0; right: 0; margin: 0 auto; width: fit-content; }
/* while a note speaks, the game's own notices wait (a "new friend" card once squeezed Pix's cloud onto his cap) */
.game:has(.pxn:not([hidden])) .notification-dock, .iphone-page:has(.pxn:not([hidden])) .notification-dock { visibility: hidden; }
/* 7. on the phone the game's notices (a new friend, a goal) drop below Pix's satchel strip instead of under it */
.iphone-page:has(.pix-hud) .notification-dock, .game.f-ios:has(.pix-hud) .notification-dock { top: calc(var(--u) * 68); width: calc(var(--u) * 290); }
/* 4. the die (owner 2026-10-22: «зроби трошки більшим і помісти його нижче»): bigger, in the bottom-right corner where
   the free world's action paw stands (Pix's day has no paws): under the right thumb on a phone held sideways, the road
   and the hero free in the middle. Its glow, shadow and "Roll" grow with it. */
.px-die { right: calc(var(--u) * 40); bottom: calc(var(--u) * 26); width: calc(var(--u) * 220); height: calc(var(--u) * 250); }
.px-scene { --s: calc(var(--u) * 140); top: calc(var(--u) * 28); }
.px-shadow { top: calc(var(--u) * 186); width: calc(var(--u) * 138); height: calc(var(--u) * 27); }
.px-die.ready::before { top: calc(var(--u) * 98); width: calc(var(--u) * 262); height: calc(var(--u) * 262); }
.px-roll { font-size: calc(var(--u) * 26); padding: calc(var(--u) * 7) calc(var(--u) * 26); }
.f-ios .px-die { right: calc(var(--u) * 58); bottom: calc(var(--u) * 12); width: calc(var(--u) * 126); height: calc(var(--u) * 146); }
.f-ios .px-scene { --s: calc(var(--u) * 76); top: calc(var(--u) * 16); }
.f-ios .px-shadow { top: calc(var(--u) * 102); width: calc(var(--u) * 79); height: calc(var(--u) * 16); }
.f-ios .px-die.ready::before { top: calc(var(--u) * 54); width: calc(var(--u) * 140); height: calc(var(--u) * 140); }
.f-ios .px-roll { font-size: calc(var(--u) * 16); padding: calc(var(--u) * 4) calc(var(--u) * 14); }
.f-ios .px-mod { left: calc(var(--u) * -6); top: calc(var(--u) * 2); padding: calc(var(--u) * 2) calc(var(--u) * 9); font-size: calc(var(--u) * 15); }
/* 1. the roads: the panel keeps to the right edge (the camera frames the roads in the rest, js showRoadPicker) and the
   note about them blurs and darkens nothing (js NO_VEIL) */
.f-ios .pxr { left: auto; right: calc(var(--u) * 58); top: calc(var(--u) * 96); }
.pxn-spot.clear { background: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
/* 9, 12. a curiosity and the grown-up's screen: the picture WHOLE in the left half, the card on the right; behind both
   the same picture, softened (js openScene .pxs-plate) */
.pxs-spread .pxs-stage { filter: blur(18px) brightness(.5) saturate(.9); scale: 1.08; }
.pxs-spread .pxs-art { animation: none; }
.pxs-spread .pxs-shade { background: linear-gradient(90deg, transparent 45%, rgba(26, 8, 46, .3)); }
.pxs-plate { position: absolute; left: 0; top: 0; bottom: 0; width: 56%; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, #000 82%, transparent); mask-image: linear-gradient(90deg, #000 82%, transparent); }
.pxs-plate img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 55%; animation: pxsKen 28s ease-in-out infinite alternate; }
.f-ios .pxs-plate { width: 50%; }
.f-ios .pxs-fact { left: auto; right: calc(var(--u) * 58); width: calc(var(--u) * 400); }
.pxs-grownup .pxs-card { left: auto; right: calc(var(--u) * 40); bottom: calc(var(--u) * 36); width: calc(var(--u) * 820); }
.pxs-grownup .pxs-card .foot { display: flex; justify-content: flex-end; margin-top: calc(var(--u) * 18); }
.pxs-grownup .pxs-card .pxs-go { position: static; animation-delay: .9s; }
.f-ios .pxs-grownup .pxs-card { left: auto; right: calc(var(--u) * 58); bottom: calc(var(--u) * 12); width: calc(var(--u) * 410); }
.f-ios .pxs-grownup .pxs-card .foot { margin-top: calc(var(--u) * 8); }
/* 2. every cloud speaks like the game's approved talk card (hud-e-v2 .tk-card): its point is the cloud's own cream,
   tucked BEHIND it, so only a soft point shows toward the speaker; no ring round the cloud, no loose diamond */
.pxs-bubble::after, .pxn.pix .pxn-bubble::after { z-index: -1; width: calc(var(--u) * 34); height: calc(var(--u) * 34); rotate: 45deg;
  border-radius: calc(var(--u) * 6); background: rgba(255, 245, 228, .97); }
.pxn.pix .pxn-bubble::after, .pxs-pix .pxs-bubble::after { left: var(--tail, 50%); right: auto; top: auto; bottom: calc(var(--u) * -17); }
.pxn.pix .pxn-bubble.below::after { top: calc(var(--u) * -17); bottom: auto; background: rgba(255, 252, 245, .98); }
.pxn.pix .pxn-bubble { box-shadow: inset 0 calc(var(--u) * 3) 0 #fff, 0 calc(var(--u) * 22) calc(var(--u) * 44) rgba(16, 4, 30, .5); }
.pxs.paused .pxs-pix .pxs-bubble { box-shadow: inset 0 calc(var(--u) * 3) 0 #fff, 0 0 calc(var(--u) * 46) rgba(196, 163, 255, .65), 0 calc(var(--u) * 16) calc(var(--u) * 34) rgba(26, 8, 46, .45); }
.pxs-help .pxs-bubble.left::after { left: auto; right: calc(var(--u) * -17); top: calc(var(--u) * 46); bottom: auto; }
.pxs-help .pxs-bubble.right::after { left: calc(var(--u) * -17); right: auto; top: calc(var(--u) * 46); bottom: auto; }
.f-ios .pxs-bubble::after, .f-ios .pxn.pix .pxn-bubble::after { width: calc(var(--u) * 18); height: calc(var(--u) * 18); border-radius: calc(var(--u) * 3); }
.f-ios .pxn.pix .pxn-bubble::after, .f-ios .pxs-pix .pxs-bubble::after { bottom: calc(var(--u) * -9); }
.f-ios .pxn.pix .pxn-bubble.below::after { top: calc(var(--u) * -9); }
.f-ios .pxs-help .pxs-bubble.left::after { right: calc(var(--u) * -9); top: calc(var(--u) * 24); }
.f-ios .pxs-help .pxs-bubble.right::after { left: calc(var(--u) * -9); top: calc(var(--u) * 24); }