/* Pix's game (D186-D188): only the pieces his context adds to the game's own HUD - the strip of today's letters, the
   courier die, the road picker, the situation and curiosity cards, the loading screen of the Post. The same units
   (--u: one frame unit), tokens (ink, plum, violet, gold, cream), font (Nunito) and plum-tinted light as hud-e-v2. */

.pix-hud { position: absolute; inset: 0; z-index: 14; pointer-events: none; opacity: 0; transition: opacity .45s; }
.pix-hud.on { opacity: 1; }
.pix-hud > * { pointer-events: auto; }

/* ---------------------------------------------------------------- the strip: satchel, three invitations (D189, D191: no clock) */
.px-strip { position: absolute; left: 50%; top: calc(var(--u) * 16); translate: -50% 0; display: flex; align-items: center;
  gap: calc(var(--u) * 14); height: calc(var(--u) * 92); padding: 0 calc(var(--u) * 26) 0 calc(var(--u) * 12); border-radius: 999px;
  background: linear-gradient(180deg, #fffaf1, #f6e7cf); color: var(--ink);
  box-shadow: inset 0 calc(var(--u) * 3) 0 rgba(255, 255, 255, .9), inset 0 0 0 calc(var(--u) * 3) rgba(124, 58, 237, .28), var(--sh-2); }
.px-satchel { width: calc(var(--u) * 82); height: calc(var(--u) * 82); object-fit: contain; margin: calc(var(--u) * -6) 0; filter: drop-shadow(0 calc(var(--u) * 4) calc(var(--u) * 4) rgba(60, 20, 90, .25)); }
.px-envs { display: flex; gap: calc(var(--u) * 6); }
.px-env { position: relative; width: calc(var(--u) * 64); height: calc(var(--u) * 56); display: grid; place-items: center; transition: transform .4s cubic-bezier(.3, 1.6, .4, 1), filter .4s; }
.px-env img { width: 100%; height: 100%; object-fit: contain; }
.px-env .px-seal { position: absolute; right: calc(var(--u) * -8); bottom: calc(var(--u) * -8); width: calc(var(--u) * 34); height: calc(var(--u) * 34); opacity: 0; scale: .4; transition: opacity .3s, scale .45s cubic-bezier(.3, 1.8, .4, 1); }
.px-env.done { filter: drop-shadow(0 0 calc(var(--u) * 8) rgba(255, 197, 61, .9)); }
.px-env.done .px-seal { opacity: 1; scale: 1; }
.px-env.pop { transform: translateY(calc(var(--u) * -10)) scale(1.18); }

/* ---------------------------------------------------------------- the courier die (faces 4-9 in envelopes, D44) */
.px-die { position: absolute; right: calc(var(--u) * 42); bottom: calc(var(--u) * 34); width: calc(var(--u) * 176); height: calc(var(--u) * 200);
  border: 0; padding: 0; background: none; cursor: pointer; outline: none; font: inherit; opacity: 0; scale: .6; pointer-events: none;
  transition: opacity .35s, scale .45s cubic-bezier(.3, 1.6, .4, 1); }
.px-die.show { opacity: 1; scale: 1; pointer-events: auto; }
/* a real cube: cream faces, purple pips, rounded plum edges (an inner core fills the rounded corners) */
.px-scene { --s: calc(var(--u) * 112); position: absolute; left: 50%; top: calc(var(--u) * 22); width: var(--s); height: var(--s); translate: -50% 0; perspective: calc(var(--u) * 700); }
.px-squash { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 50% 100%; }
.px-cube { position: absolute; inset: 0; transform-style: preserve-3d; transform: rotateX(-20deg) rotateY(26deg); }
.pc { position: absolute; inset: 2%; border-radius: 9%; background: linear-gradient(160deg, #8b5cf6, #5b21b6); backface-visibility: hidden; }
.pc.c-front { transform: translateZ(calc(var(--s) * .47)); }
.pc.c-back { transform: rotateY(180deg) translateZ(calc(var(--s) * .47)); }
.pc.c-right { transform: rotateY(90deg) translateZ(calc(var(--s) * .47)); }
.pc.c-left { transform: rotateY(-90deg) translateZ(calc(var(--s) * .47)); }
.pc.c-top { transform: rotateX(90deg) translateZ(calc(var(--s) * .47)); }
.pc.c-bottom { transform: rotateX(-90deg) translateZ(calc(var(--s) * .47)); }
.pf { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 19%;
  background: radial-gradient(circle at 32% 26%, #fffdf7, #fff4de 55%, #f2dcb8); box-shadow: inset 0 0 0 calc(var(--s) * .05) #7c3aed, inset 0 0 calc(var(--s) * .08) rgba(91, 42, 134, .35);
  backface-visibility: hidden; }
/* the number itself (owner 2026-10-21: «реальною цифрою, бо так буде простіше дитині»), embossed in the game's purple;
   6 and 9 carry a little bar under them, as on real game dice */
.pn { position: relative; font: 1000 calc(var(--s) * .64) / 1 "Nunito", system-ui, sans-serif; letter-spacing: -.02em; translate: 0 2%;
  background: linear-gradient(180deg, #a78bfa, #7c3aed 45%, #4c1d95); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 calc(var(--s) * .012) 0 rgba(255, 255, 255, .85)) drop-shadow(0 calc(var(--s) * .02) calc(var(--s) * .02) rgba(60, 20, 90, .35)); }
.pn.u::after { content: ""; position: absolute; left: 22%; right: 22%; bottom: -2%; height: calc(var(--s) * .055); border-radius: 99px; background: #6d28d9; }
.f-front { transform: translateZ(calc(var(--s) * .5)); }
.f-back { transform: rotateY(180deg) translateZ(calc(var(--s) * .5)); }
.f-right { transform: rotateY(90deg) translateZ(calc(var(--s) * .5)); }
.f-left { transform: rotateY(-90deg) translateZ(calc(var(--s) * .5)); }
.f-top { transform: rotateX(90deg) translateZ(calc(var(--s) * .5)); }
.f-bottom { transform: rotateX(-90deg) translateZ(calc(var(--s) * .5)); }
.px-shadow { position: absolute; left: 50%; top: calc(var(--u) * 150); width: calc(var(--u) * 110); height: calc(var(--u) * 22); translate: -50% 0; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(42, 18, 69, .45), rgba(42, 18, 69, 0)); }
.px-die.ready .px-scene { animation: pxBob 1.6s ease-in-out infinite; }
.px-die.ready::before { content: ""; position: absolute; left: 50%; top: calc(var(--u) * 80); width: calc(var(--u) * 210); height: calc(var(--u) * 210); translate: -50% -50%;
  border-radius: 50%; background: radial-gradient(circle, rgba(255, 197, 61, .45), rgba(255, 197, 61, 0) 62%); animation: pxGlow 1.6s ease-in-out infinite; }
.px-die.landed .px-scene { animation: pxLand .45s cubic-bezier(.3, 1.8, .4, 1); }
.px-roll { position: absolute; left: 50%; bottom: 0; translate: -50% 0; padding: calc(var(--u) * 6) calc(var(--u) * 22); border-radius: 999px;
  background: linear-gradient(170deg, #ffe58f, #ffc53d 52%, #f5a50a); color: #3a1b00; font-weight: 1000; font-size: calc(var(--u) * 22); letter-spacing: .02em;
  box-shadow: inset 0 calc(var(--u) * 2) 0 rgba(255, 255, 255, .6), var(--sh-1); opacity: 0; transition: opacity .25s; }
.px-die.ready .px-roll { opacity: 1; }
.px-die kbd { position: absolute; right: calc(var(--u) * 2); bottom: calc(var(--u) * 4); min-width: calc(var(--u) * 30); height: calc(var(--u) * 30); border-radius: 50%;
  display: grid; place-items: center; font: 900 calc(var(--u) * 15) "Nunito", sans-serif; color: var(--cream); background: var(--plum); opacity: 0; }
.px-die.ready kbd { opacity: .9; }
.px-mod { position: absolute; left: calc(var(--u) * -4); top: calc(var(--u) * 6); padding: calc(var(--u) * 4) calc(var(--u) * 12); border-radius: 999px; font-size: calc(var(--u) * 24); font-weight: 1000;
  color: #fff; background: #c2410c; box-shadow: var(--sh-1); opacity: 0; scale: .5; transition: opacity .25s, scale .35s cubic-bezier(.3, 1.8, .4, 1); }
.px-mod.on { opacity: 1; scale: 1; }
@keyframes pxBob { 0%, 100% { translate: -50% 0; } 50% { translate: -50% calc(var(--u) * -8); } }
@keyframes pxGlow { 0%, 100% { opacity: .55; scale: .92; } 50% { opacity: 1; scale: 1.05; } }
@keyframes pxLand { 0% { scale: 1.12 .9; } 60% { scale: .96 1.04; } 100% { scale: 1; } }

/* ---------------------------------------------------------------- the road picker (the game's answer pills) */
.px-roads { position: absolute; right: calc(var(--u) * 40); bottom: calc(var(--u) * 40); width: calc(var(--u) * 560); display: flex; flex-direction: column; gap: calc(var(--u) * 12); }
.px-roads[hidden] { display: none; }
.px-roads-q { margin: 0 0 calc(var(--u) * 4) calc(var(--u) * 18); color: var(--cream); font-weight: 900; font-size: calc(var(--u) * 26);
  text-shadow: 0 calc(var(--u) * 2) calc(var(--u) * 10) rgba(42, 18, 69, .8); }
.px-road { box-shadow: inset calc(var(--u) * 8) 0 0 var(--c), inset 0 calc(var(--u) * 2) 0 rgba(255, 255, 255, .22), var(--sh-1); }
.px-road kbd { display: grid; place-items: center; flex: none; min-width: calc(var(--u) * 38); height: calc(var(--u) * 38); border-radius: 50%;
  font: 900 calc(var(--u) * 18) "Nunito", sans-serif; background: var(--c); color: var(--ink); }
.f-ios .px-road kbd { min-width: calc(var(--u) * 20); height: calc(var(--u) * 20); font-size: calc(var(--u) * 11); }
.px-road .tk-t { display: flex; flex-direction: column; font-weight: 900; font-size: calc(var(--u) * 24); }
.px-road .tk-t small { font-weight: 700; font-size: calc(var(--u) * 17); opacity: .75; text-transform: lowercase; }

/* ---------------------------------------------------------------- Pix's tips on the road to Fred (the tutorial, D187) */
/* (a note sits under Pix's strip, top centre: never over the road pills, the die or a card's answers) */
.px-tip { position: absolute; left: 50%; margin-left: calc(var(--u) * -260); top: calc(var(--u) * 132); width: calc(var(--u) * 520); display: grid; z-index: 45;
  grid-template-columns: calc(var(--u) * 86) 1fr; align-items: center; gap: calc(var(--u) * 14); padding: calc(var(--u) * 16) calc(var(--u) * 20) calc(var(--u) * 16) calc(var(--u) * 14);
  border-radius: calc(var(--u) * 28); background: linear-gradient(180deg, #fffaf1, #f6e7cf); color: var(--ink);
  box-shadow: inset 0 0 0 calc(var(--u) * 3) rgba(124, 58, 237, .25), var(--sh-2); opacity: 0; translate: 0 calc(var(--u) * 20); transition: opacity .3s, translate .4s cubic-bezier(.3, 1.6, .4, 1); }
.px-tip[hidden] { display: none; }
.px-tip.on { opacity: 1; translate: 0 0; }
.px-tip img { width: calc(var(--u) * 86); height: calc(var(--u) * 96); object-fit: contain; object-position: bottom; }
.px-tip p { margin: 0; font-weight: 800; font-size: calc(var(--u) * 23); line-height: 1.3; }
.px-tip p small { display: block; margin-bottom: calc(var(--u) * 2); font-size: .68em; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--violet); }
.px-tip-ok { grid-column: 2; justify-self: end; border: 0; cursor: pointer; padding: calc(var(--u) * 8) calc(var(--u) * 24); border-radius: 999px; font: 900 calc(var(--u) * 20) "Nunito", sans-serif;
  background: linear-gradient(170deg, #ffe58f, #ffc53d 52%, #f5a50a); color: #3a1b00; box-shadow: var(--sh-1); }

/* ---------------------------------------------------------------- situation and curiosity cards */
.pix-card { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; background: radial-gradient(ellipse at center, rgba(42, 18, 69, .35), rgba(20, 8, 34, .72));
  opacity: 0; transition: opacity .3s; }
.pix-card.on { opacity: 1; }
.pxc-panel { position: relative; width: calc(var(--u) * 1360); height: calc(var(--u) * 740); display: grid; grid-template-columns: calc(var(--u) * 640) 1fr; gap: calc(var(--u) * 30);
  padding: calc(var(--u) * 30); border-radius: calc(var(--u) * 44); background: linear-gradient(180deg, #fffaf1, #f4e3c8); color: var(--ink);
  box-shadow: inset 0 calc(var(--u) * 4) 0 rgba(255, 255, 255, .9), inset 0 0 0 calc(var(--u) * 4) rgba(124, 58, 237, .22), var(--sh-2);
  scale: .94; translate: 0 calc(var(--u) * 24); transition: scale .45s cubic-bezier(.3, 1.5, .4, 1), translate .45s cubic-bezier(.3, 1.5, .4, 1); }
.pix-card.on .pxc-panel { scale: 1; translate: 0 0; }
.pxc-art { position: relative; border-radius: calc(var(--u) * 30); overflow: hidden; background: #e9d8bd; box-shadow: inset 0 0 0 calc(var(--u) * 3) rgba(91, 42, 134, .15); }
.pxc-art img { width: 100%; height: 100%; object-fit: cover; }
.pxc-art.none { background: radial-gradient(circle at 40% 35%, #fff6e2, #e7cfa8); }
.pxc-art.none::after { content: ""; position: absolute; inset: 22%; background: url(../../../engine/icons/story.webp) center / contain no-repeat; opacity: .5; }
.pxc-place { position: absolute; left: calc(var(--u) * 18); bottom: calc(var(--u) * 18); padding: calc(var(--u) * 6) calc(var(--u) * 16); border-radius: 999px;
  background: rgba(42, 18, 69, .72); color: var(--cream); font-weight: 800; font-size: calc(var(--u) * 18); }
.pxc-place:empty { display: none; }
.pxc-body { position: relative; display: flex; flex-direction: column; min-height: 0; }
.pxc-head { display: flex; align-items: center; gap: calc(var(--u) * 14); }
.pxc-ft { width: calc(var(--u) * 64); height: calc(var(--u) * 52); object-fit: contain; }
.pxc-head h2 { margin: 0; font-size: calc(var(--u) * 40); font-weight: 1000; letter-spacing: -.01em; color: var(--plum); }
.pxc-lines { margin: calc(var(--u) * 14) 0 calc(var(--u) * 16); display: flex; flex-direction: column; gap: calc(var(--u) * 10); overflow: auto; }
.pxc-l { margin: 0; font-size: calc(var(--u) * 25); line-height: 1.38; font-weight: 700; }
.pxc-l.said b { display: block; font-size: calc(var(--u) * 17); text-transform: uppercase; letter-spacing: .08em; color: var(--violet); }
.pxc-opts { display: flex; flex-direction: column; gap: calc(var(--u) * 10); }
.pxc-opts .tk-ans { min-height: calc(var(--u) * 66); }
.pxc-opts .tk-ans .tk-t { font-size: calc(var(--u) * 23); font-weight: 800; }
.pxc-opts .tk-ans:disabled { cursor: default; opacity: .55; }
.pxc-opts .tk-ans.picked { opacity: 1; }
.pxc-tools { margin-top: auto; padding-top: calc(var(--u) * 14); display: flex; align-items: center; gap: calc(var(--u) * 14); }
.pxc-timer { position: relative; width: calc(var(--u) * 76); height: calc(var(--u) * 76); }
.pxc-timer img { position: absolute; inset: calc(var(--u) * 12); width: calc(100% - var(--u) * 24); height: calc(100% - var(--u) * 24); object-fit: contain; }
.pxc-timer svg { position: absolute; inset: 0; width: 100%; height: 100%; rotate: -90deg; }
.pxc-timer .tr-bg { fill: none; stroke: rgba(91, 42, 134, .15); stroke-width: 3.5; }
.pxc-timer .tr { fill: none; stroke: var(--gold-d); stroke-width: 3.5; stroke-linecap: round; stroke-dasharray: 106.8; stroke-dashoffset: 0; transition: stroke .3s; }
.pix-card.paused .pxc-timer .tr { stroke: var(--violet); }
.pxc-pause, .pxc-help { display: flex; align-items: center; gap: calc(var(--u) * 8); border: 0; cursor: pointer; padding: calc(var(--u) * 8) calc(var(--u) * 20) calc(var(--u) * 8) calc(var(--u) * 10);
  border-radius: 999px; font: 900 calc(var(--u) * 21) "Nunito", sans-serif; color: var(--ink); background: #fff; box-shadow: inset 0 0 0 calc(var(--u) * 2) rgba(124, 58, 237, .25), var(--sh-1); }
.pxc-pause img { width: calc(var(--u) * 64); height: calc(var(--u) * 42); object-fit: contain; }
.pxc-help img { width: calc(var(--u) * 40); height: calc(var(--u) * 46); object-fit: contain; }
.pxc-help i { font-style: normal; min-width: calc(var(--u) * 28); height: calc(var(--u) * 28); border-radius: 50%; display: grid; place-items: center; background: var(--plum); color: var(--cream); font-size: calc(var(--u) * 16); }
.pxc-help:disabled { opacity: .45; cursor: default; }
.pix-card.paused .pxc-panel { box-shadow: inset 0 calc(var(--u) * 4) 0 rgba(255, 255, 255, .9), inset 0 0 0 calc(var(--u) * 5) rgba(124, 58, 237, .55), 0 0 calc(var(--u) * 60) rgba(196, 181, 253, .55), var(--sh-2);
  animation: pxBreathe 4s ease-in-out infinite; }
@keyframes pxBreathe { 0%, 100% { scale: 1; } 50% { scale: 1.006; } }
.pxc-side { position: absolute; right: calc(var(--u) * -10); bottom: calc(var(--u) * 96); width: calc(var(--u) * 560); }
.pxc-say { display: grid; grid-template-columns: calc(var(--u) * 92) 1fr; align-items: end; gap: calc(var(--u) * 12); padding: calc(var(--u) * 14) calc(var(--u) * 18);
  border-radius: calc(var(--u) * 26); background: linear-gradient(180deg, rgba(92, 44, 150, .95), rgba(58, 22, 104, .96)); color: var(--cream); box-shadow: var(--sh-2);
  animation: pxSay .45s cubic-bezier(.3, 1.6, .4, 1); }
.pxc-say img { width: calc(var(--u) * 92); height: calc(var(--u) * 110); object-fit: contain; object-position: bottom; }
.pxc-say p { margin: 0; font-size: calc(var(--u) * 22); font-weight: 700; line-height: 1.35; }
.pxc-say p b { display: block; color: var(--gold); font-weight: 1000; }
.pxc-ok { grid-column: 2; justify-self: end; border: 0; cursor: pointer; padding: calc(var(--u) * 6) calc(var(--u) * 20); border-radius: 999px; font: 900 calc(var(--u) * 18) "Nunito", sans-serif;
  background: var(--gold); color: #3a1b00; }
@keyframes pxSay { from { opacity: 0; translate: 0 calc(var(--u) * 16); } to { opacity: 1; translate: 0 0; } }
.pxc-chips { display: flex; flex-wrap: wrap; gap: calc(var(--u) * 8); }
.pxc-chip { padding: calc(var(--u) * 6) calc(var(--u) * 14); border-radius: 999px; font-weight: 900; font-size: calc(var(--u) * 19); background: rgba(194, 65, 12, .12); color: #9a3412; }
.pxc-chip.clock { background: rgba(124, 58, 237, .12); color: var(--plum); }
.pxc-chip.up { background: rgba(43, 181, 168, .15); color: #0f766e; }
.pxc-go { align-self: flex-end; margin-left: auto; }
.pxc-curiosity .pxc-panel { width: calc(var(--u) * 1180); height: calc(var(--u) * 620); grid-template-columns: calc(var(--u) * 560) 1fr; }
/* (the pills and helpers above set their own display, so a hidden one must be told twice) */
.pix-card [hidden] { display: none !important; }
/* before Ready the child reads the scene; the choice, the clock and the two helpers come with the 15 seconds (P24) */
.pxc-ready { align-self: flex-end; margin-left: auto; }
/* the grown-up's small screen at the end of the day (D41, D75): no picture, one calm column */
.pxc-grownup .pxc-panel { width: calc(var(--u) * 900); height: auto; max-height: calc(var(--u) * 700); grid-template-columns: 1fr; }
.pxc-intro { margin: calc(var(--u) * 12) 0 0; font-size: calc(var(--u) * 21); font-weight: 700; color: var(--violet); }
.pxc-q { padding: calc(var(--u) * 12) calc(var(--u) * 18); border-radius: calc(var(--u) * 20); background: rgba(124, 58, 237, .07); }

/* ---------------------------------------------------------------- the loading screen: the Post, the letters (D163, D186) */
.pix-loading { position: absolute; inset: 0; z-index: 60; background: #1d1230; opacity: 0; transition: opacity .45s; }
.pix-loading.on { opacity: 1; }
.pl-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; animation: plKen 6s ease-out both; }
@keyframes plKen { from { scale: 1.08; } to { scale: 1; } }
.pl-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 8, 34, 0) 45%, rgba(20, 8, 34, .78)); }
.pl-text { position: absolute; left: calc(var(--u) * 70); right: calc(var(--u) * 70); bottom: calc(var(--u) * 54); color: var(--cream); }
.pl-text small { font-weight: 900; font-size: calc(var(--u) * 22); letter-spacing: .18em; text-transform: uppercase; color: var(--gold); }
.pl-text h1 { margin: calc(var(--u) * 4) 0 calc(var(--u) * 12); font-size: calc(var(--u) * 76); font-weight: 1000; line-height: .95; letter-spacing: -.03em;
  text-shadow: 0 calc(var(--u) * 4) 0 #5b2a86, 0 calc(var(--u) * 10) calc(var(--u) * 30) rgba(20, 8, 34, .6); }
.pl-ft { display: flex; align-items: center; gap: calc(var(--u) * 14); margin: 0 0 calc(var(--u) * 22); font-size: calc(var(--u) * 26); font-weight: 700; max-width: calc(var(--u) * 1100); }
.pl-ft img { width: calc(var(--u) * 58); height: calc(var(--u) * 46); object-fit: contain; }
.pl-bar { height: calc(var(--u) * 12); border-radius: 999px; background: rgba(255, 248, 236, .18); overflow: hidden; max-width: calc(var(--u) * 700); }
.pl-bar i { display: block; height: 100%; width: 0; border-radius: inherit; background: linear-gradient(90deg, #ffe58f, #ffc53d, #f5a50a); }

/* ---------------------------------------------------------------- iPhone: the same pieces, laid out round the paws */
.f-ios .px-strip { top: calc(var(--u) * 8); height: calc(var(--u) * 52); padding: 0 calc(var(--u) * 14) 0 calc(var(--u) * 6); gap: calc(var(--u) * 8); }
.f-ios .px-satchel { width: calc(var(--u) * 48); height: calc(var(--u) * 48); }
.f-ios .px-env { width: calc(var(--u) * 36); height: calc(var(--u) * 32); }
.f-ios .px-env .px-seal { width: calc(var(--u) * 20); height: calc(var(--u) * 20); }
.f-ios .px-die { right: calc(var(--u) * 62); bottom: calc(var(--u) * 118); width: calc(var(--u) * 96); height: calc(var(--u) * 110); }
.f-ios .px-scene { --s: calc(var(--u) * 58); top: calc(var(--u) * 12); }
.f-ios .px-shadow { top: calc(var(--u) * 80); width: calc(var(--u) * 60); height: calc(var(--u) * 12); }
.f-ios .px-die kbd { display: none; }
.f-ios .px-roll { font-size: calc(var(--u) * 13); padding: calc(var(--u) * 3) calc(var(--u) * 12); }
.f-ios .px-roads { right: calc(var(--u) * 64); bottom: calc(var(--u) * 24); width: calc(var(--u) * 330); gap: calc(var(--u) * 7); }
.f-ios .px-roads-q { font-size: calc(var(--u) * 15); }
.f-ios .px-road .tk-t { font-size: calc(var(--u) * 14); }
.f-ios .px-road .tk-t small { font-size: calc(var(--u) * 10); }
.f-ios .px-road { padding-left: calc(var(--u) * 12); gap: calc(var(--u) * 8); }
.f-ios .px-road .tk-t small { line-height: 1.1; }
.f-ios .pix-card:has(.pxc-opts:not([hidden])) .pxc-panel { grid-template-columns: calc(var(--u) * 190) 1fr; }
.f-ios .pxc-lines { margin: calc(var(--u) * 6) 0 calc(var(--u) * 8); min-height: calc(var(--u) * 64); }
.f-ios .pxc-opts { gap: calc(var(--u) * 5); }
.f-ios .px-tip { margin-left: calc(var(--u) * -160); top: calc(var(--u) * 66); width: calc(var(--u) * 320); grid-template-columns: calc(var(--u) * 50) 1fr; padding: calc(var(--u) * 10); border-radius: calc(var(--u) * 18); }
.f-ios .px-tip img { width: calc(var(--u) * 50); height: calc(var(--u) * 56); }
.f-ios .px-tip p { font-size: calc(var(--u) * 13); }
.f-ios .px-tip-ok { font-size: calc(var(--u) * 12); padding: calc(var(--u) * 5) calc(var(--u) * 14); }
.f-ios .pxc-panel { width: calc(var(--u) * 740); height: calc(var(--u) * 350); grid-template-columns: calc(var(--u) * 280) 1fr; gap: calc(var(--u) * 14); padding: calc(var(--u) * 14); border-radius: calc(var(--u) * 24); }
.f-ios .pxc-head h2 { font-size: calc(var(--u) * 20); }
.f-ios .pxc-ft { width: calc(var(--u) * 32); height: calc(var(--u) * 26); }
.f-ios .pxc-l { font-size: calc(var(--u) * 13); }
.f-ios .pxc-l.said b { font-size: calc(var(--u) * 10); }
.f-ios .pxc-opts .tk-ans { min-height: calc(var(--u) * 36); padding: calc(var(--u) * 4) calc(var(--u) * 12) calc(var(--u) * 4) calc(var(--u) * 6); gap: calc(var(--u) * 8); }
.f-ios .pxc-opts .tk-ans .tk-t { font-size: calc(var(--u) * 12.5); }
.f-ios .pxc-opts .tk-ans kbd { min-width: calc(var(--u) * 20); height: calc(var(--u) * 20); font-size: calc(var(--u) * 11); }
.f-ios .pxc-timer { width: calc(var(--u) * 40); height: calc(var(--u) * 40); }
.f-ios .pxc-pause, .f-ios .pxc-help { font-size: calc(var(--u) * 12); padding: calc(var(--u) * 4) calc(var(--u) * 10) calc(var(--u) * 4) calc(var(--u) * 5); }
.f-ios .pxc-pause img { width: calc(var(--u) * 34); height: calc(var(--u) * 22); }
.f-ios .pxc-help img { width: calc(var(--u) * 22); height: calc(var(--u) * 26); }
.f-ios .pxc-side { width: calc(var(--u) * 320); bottom: calc(var(--u) * 50); }
.f-ios .pxc-say { grid-template-columns: calc(var(--u) * 48) 1fr; padding: calc(var(--u) * 8) calc(var(--u) * 10); }
.f-ios .pxc-say img { width: calc(var(--u) * 48); height: calc(var(--u) * 58); }
.f-ios .pxc-say p { font-size: calc(var(--u) * 12); }
.f-ios .pxc-chip { font-size: calc(var(--u) * 11); }
.f-ios .pxc-grownup .pxc-panel { width: calc(var(--u) * 560); height: auto; max-height: calc(var(--u) * 360); grid-template-columns: 1fr; }
.f-ios .pxc-intro { font-size: calc(var(--u) * 12); }
.f-ios .pxc-q { padding: calc(var(--u) * 6) calc(var(--u) * 10); }
.f-ios .pl-text { left: calc(var(--u) * 70); bottom: calc(var(--u) * 26); }
.f-ios .pl-text h1 { font-size: calc(var(--u) * 40); }
.f-ios .pl-text small { font-size: calc(var(--u) * 12); }
.f-ios .pl-ft { font-size: calc(var(--u) * 14); }
.f-ios .pl-ft img { width: calc(var(--u) * 30); height: calc(var(--u) * 24); }
.f-ios .pl-bar { height: calc(var(--u) * 7); }