/* Figma UI rebuild (2026-11-03): the kit every rebuilt screen uses.
   --m   = CSS px per mock px (the Figma frames are 1440 x 2560), set by chrome.js measure()
   art   = PNG exports from Figma (src/figkit.js, assets/ui/fig/), never re-drawn in CSS
   text  = Futura Bold (Apple devices) / Jost Bold, white with the mock's black outside stroke */
:root { --font-ui: "UI", "Futura", "Jost", "Arial Black", sans-serif; }

/* outlined text: --sw = the mock's outside stroke weight (mock px), --fs = font size (mock px) */
.fx {
  font-family: var(--font-ui); font-weight: 700; color: #fff; line-height: 1; white-space: nowrap;
  font-size: calc(var(--m) * var(--fs, 32)); letter-spacing: 0;
  -webkit-text-stroke: calc(var(--m) * var(--sw, 6) * 2) #000; paint-order: stroke fill;
}
.fx.nostroke { -webkit-text-stroke: 0; }

/* an exported image as an element's whole background (fixed-size art) */
.fimg { background: var(--img) 0 0 / 100% 100% no-repeat; }
.fabs { position: absolute; }

/* a button made of exported art; the mock has no pressed state, so it sinks and darkens a little */
.fbtn {
  position: absolute; display: grid; place-items: center; padding: 0; margin: 0; border: 0; cursor: pointer;
  background: var(--img) 0 0 / 100% 100% no-repeat; font: inherit; color: inherit; touch-action: manipulation;
  transition: transform .06s, filter .06s;
}
.fbtn:active:not(:disabled) { transform: translateY(calc(var(--m) * 4)); filter: brightness(.92); }
.fbtn:focus-visible { outline: calc(var(--m) * 8) solid #fff; outline-offset: calc(var(--m) * 4); }
.fbtn:disabled { cursor: default; filter: grayscale(.6) brightness(.9); }

/* 9-slice: art that stretches (--img, --sl = slice insets in image px, --bw = their on-screen size) */
.f9 {
  border-style: solid; border-color: transparent; background: none;
  border-image: var(--img) var(--sl) fill / var(--bw) stretch;
}

/* ---- chrome: top bar + nav (src/chrome.js; mock Home 265:156) ---- */
.fc-top { position: absolute; z-index: 9; left: var(--colx); top: var(--sat, 0px); width: var(--colw); height: 0; pointer-events: none; }
.fc-top > *, .fc-world > * { pointer-events: auto; }
.fc-top[hidden], .fc-nav[hidden], .fc-top [hidden], .fc-nav [hidden] { display: none !important; }
.fc-world { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.fc-top button, .fc-nav button { background-color: transparent; border: 0; padding: 0; margin: 0; cursor: pointer; font: inherit; touch-action: manipulation; }
.fc-top button:not(.fbtn):active, .fc-nav .fc-tab:active { filter: brightness(.93); }
.fc-txt { display: flex; align-items: center; justify-content: center; text-align: center; overflow: visible; }
.fc-pbird canvas, .fc-tabbird canvas { display: block; image-rendering: pixelated; }
.fc-pill.pump { animation: hudPump .25s; }
.fc-pill.shield { cursor: pointer; }
.fc-dot { position: absolute; right: calc(var(--m) * -6); top: calc(var(--m) * -6); width: calc(var(--m) * 34); height: calc(var(--m) * 34); border-radius: 50%; background: #e8322e; border: calc(var(--m) * 5) solid #000; }
.fc-badge { display: grid; place-items: center; box-sizing: border-box; border-radius: 999px; background: #e8322e; border: calc(var(--m) * 5) solid #000;
  font: 700 calc(var(--m) * 28)/1 var(--font-ui); color: #fff; pointer-events: none; }
.fc-badge.care { background: #fff; }
/* 5 Nov: a nav badge is a circle for one digit, a pill for more (style.css's old .tab-badge min-width made every one an
   oval, and the care emoji a pill that ran under the next tab); the care badge is its icon in a circle */
.fc-nav .fc-badge.tab-badge { width: auto !important; min-width: calc(var(--m) * 52); padding: 0 calc(var(--m) * 9); }
.fc-nav .fc-badge.tab-badge.care { width: calc(var(--m) * 52) !important; min-width: 0; padding: 0; }
.fc-badge.care img { display: block; width: 80%; height: 80%; object-fit: contain; }
.fc-nav { position: absolute; z-index: 9; left: var(--colx); width: var(--colw); bottom: var(--sab, 0px); height: calc(var(--m) * 239); pointer-events: none; }
.fc-nav > * { pointer-events: auto; }
.fc-navfill { position: absolute; left: calc(var(--m) * 64); width: calc(var(--m) * 1312); top: 100%; height: var(--sab, 0px); background: #71c5ff; }
.fc-tab .fc-tabon { display: none; }
.fc-tab.on .fc-tabon { display: block; }
/* 5 Nov (Basil): the active art is 5 mock px wider than its slot on each side; above its neighbours (as in the
   mock) so the next tab no longer covers its right outline */
.fc-nav .fc-tab.on { z-index: 1; }
.fc-pill .cp-ico { margin: 0; filter: none; animation: none; }   /* (style.css's old .cp-ico sizing; the class stays as the fly-to target) */

/* ---- mock-frame layers (src/figscreen.js) ---- */
.fs-layer { position: absolute; left: var(--colx); width: var(--colw); height: calc(var(--m) * 2560); pointer-events: none; }
.fs-layer > * { pointer-events: auto; }
.fs-top { top: var(--sat, 0px); }
.fs-bottom { bottom: var(--sab, 0px); }
.fs-backdrop { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.fs-blur { display: none; position: absolute; inset: -24px; background: center / cover no-repeat; filter: blur(14px) brightness(.85); }
body[data-wide="1"] .fs-blur { display: block; }
/* 4 Nov: the exported backdrops overhang the mock frame (home_bg: 111 mock px a side, opaque sea in its lower
   half); Figma clips them to the frame, so on a column narrower than the window the sides show the blur only */
body[data-wide="1"] .fs-backdrop > .fs-layer { clip-path: inset(-100vh 0); }
.fs-bgimg { position: absolute; background: 0 0 / 100% 100% no-repeat; }
.fs-layer button { background-color: transparent; padding: 0; margin: 0; cursor: pointer; font: inherit; touch-action: manipulation; }
/* (5 Nov: the border reset skips kit buttons: `border: 0` here outranked .btn's 9-slice (its slice fell back to 100 %), so a .btn on a
   Figma screen, the Base bar's TRAVEL / CLAIM, drew only the art's four corners) */
.fs-layer button:not(.btn) { border: 0; }
.fs-layer [hidden] { display: none !important; }

/* ---- Home (src/home.js; mock 265:156) ---- */
#s-home { overflow: hidden; }
.fh-tile { cursor: pointer; }
.fh-tile:active { transform: scale(.96); }
.fh-ico-img { display: block; width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.fh-tile canvas { position: absolute; inset: 8%; width: 84% !important; height: auto !important; image-rendering: pixelated; }
.fh-tname { white-space: pre-line; line-height: 1.05; }
.fh-badge { left: calc(var(--m) * 120); top: calc(var(--m) * -8); width: calc(var(--m) * 46); height: calc(var(--m) * 46); }
.fh-bird { pointer-events: none !important; }
.fh-bird .hb-bob, .fh-bird .hb-wing { position: absolute; inset: 0; }
.fh-bird canvas { image-rendering: pixelated; }
.fh-hero { z-index: 1; }
.fh-play .fh-dots { position: absolute; inset: 0; pointer-events: none; }
.fh-sub { letter-spacing: 0; }
.fh-slot { cursor: pointer; }
.fh-slot.incoming .fh-sart { visibility: hidden; }
.fh-slot.landed .fh-sart { animation: fhLand .35s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes fhLand { from { transform: scale(1.15, .85); } }
.fh-slot.opening .fh-sart, .fh-slot.ready .fh-sart { animation: none; }
.fh-slot.ready .fh-sart { animation: fhBob 1.2s ease-in-out infinite; }
@keyframes fhBob { 50% { transform: translateY(calc(var(--m) * -10)); } }
.fh-plus, .fh-lock { color: #7ed4ff; }
/* 5 Nov (mock Rectangle 102): a waiting chest's unlock-time tab, hanging from the slot's top edge */
.fh-tab { background: #0061a9; border-radius: 0 0 calc(var(--m) * 15) calc(var(--m) * 15); }
.fh-tabtime { justify-content: flex-start; text-align: left; }
.fh-lock { white-space: normal; line-height: 1.15; }
.fh-notice { --fs: 26; --sw: 3; display: flex; align-items: center; justify-content: center; border-radius: 999px; background: #000c; padding: 0 calc(var(--m) * 20); font-size: calc(var(--m) * 26); }
.fh-dot { pointer-events: none; }
/* roby-island (8 Nov): CLASSIC, a blue button to the right of PLAY (PLAY keeps the true centre); the mock's
   button shape (.fy-btn) in blue, the best score on a dark tab like PLAY's subtitle */
.fg-btn { border-radius: calc(var(--m) * 22); background: #1f7fe8 linear-gradient(#56b8ff, #1d6fe0);
  box-shadow: 0 0 0 calc(var(--m) * 6) #000, inset 0 calc(var(--m) * -14) 0 #1a62b0, inset 0 calc(var(--m) * 6) 0 #9fd8ff; }
button.fh-classic { cursor: pointer; }
button.fh-classic:active { filter: brightness(.93); transform: translateY(calc(var(--m) * 3)); }
.fh-classic.off { filter: grayscale(.8) brightness(.9); }
.fh-classic:focus-visible { outline: calc(var(--m) * 8) solid #fff; outline-offset: calc(var(--m) * 6); }
.fh-csubbg { background: #134a8c; border-radius: calc(var(--m) * 12); }
.fh-csub { letter-spacing: 0; }
@media (prefers-reduced-motion: reduce) { .fh-slot.ready .fh-sart { animation: none; } }

/* ---- Build / Base (src/base.js; mock 269:445): the stage is the bottom-anchored mock frame in island px (--u) ---- */
#s-base { overflow: hidden; background: linear-gradient(#5fbaf5, #8fd0f7 40%, #c5dffb); }
#s-base .base-stage { position: absolute; left: var(--colx); width: var(--colw); bottom: var(--sab, 0px); top: auto; height: calc(var(--m) * 2560);
  -webkit-mask-image: none; mask-image: none;
  background: url("assets/ui/fig/base_fade.5ac39a68.webp") 0 calc(var(--m) * 2095) / 100% calc(var(--m) * 655) no-repeat, url("assets/ui/fig/base_bg.be380b5b.webp") 0 calc(var(--m) * -201) / 100% auto no-repeat, transparent; }
#s-base .base-stage[data-world="2"] { background: url("assets/base/w2/bg.e71d43d9.webp") 0 calc(var(--u) * 70) / 100% auto no-repeat, transparent; }
#s-base .base-stage[data-world="3"] { background: url("assets/base/w3/bg.587bddbe.webp") 0 calc(var(--u) * 70) / 100% auto no-repeat, transparent; }
#s-base .base-bottom { --u: calc(var(--m) * 1440 / 853); z-index: 2; }
.fb-card { cursor: pointer; transition: transform .15s; }
.fb-card.sel { transform: translateY(calc(var(--m) * -14)); }
.fb-card.sel > .fimg:first-child { filter: drop-shadow(0 0 calc(var(--m) * 10) #ffd23a) drop-shadow(0 0 calc(var(--m) * 4) #ffd23a); }
.fb-card.shake { animation: shake .4s; }
/* 5 Nov (mock Build, ARENA): a damaged landmark shows at 30 % under the wrench, DAMAGED! in red where its stage dots were */
.fb-card.damaged .fb-thumb { opacity: .3; }
.fb-dmg { color: #ff7272; }
.fb-wrench, .fb-logtile { pointer-events: none; }
/* 5 Nov (mock Build, Group 17 / Rectangle 24): ACTIVITY LOG on the rail's navy tile (#223052 at 20 %) */
.fb-logtile { border-radius: calc(var(--m) * 20); background: rgba(34, 48, 82, .2); }
.fb-log { cursor: pointer; }
.fb-log:active { transform: scale(.96); }
.fb-log:focus-visible { outline: calc(var(--m) * 8) solid #fff; outline-offset: calc(var(--m) * 2); border-radius: calc(var(--m) * 20); }
.fb-thumb { width: calc(var(--m) * 200); height: calc(var(--m) * 190); object-fit: contain; }
.fb-maxed { color: #4ac3ff; }
.fb-price.poor { filter: saturate(.35) brightness(.95); }
.fb-price .ico-svg { display: block; }
.fb-price .ico-svg svg { width: 100%; height: 100%; }
#s-base .bp-head { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--m) * 20); padding: 0 calc(var(--m) * 16) 0 calc(var(--m) * 34); border-radius: 999px; background: #0b2350e6; border: calc(var(--m) * 5) solid #000; }
#s-base .bp-head .wb-foot { display: flex; align-items: center; justify-content: space-between; gap: calc(var(--m) * 20); width: 100%; }
#s-base .bp-head .wb-goal { font: 700 calc(var(--m) * 30)/1.1 var(--font-ui); color: #fff; white-space: normal; }
#s-base .bp-head .btn { font-family: var(--font-ui); font-weight: 700; font-size: calc(var(--m) * 34); padding: calc(var(--m) * 10) calc(var(--m) * 30); }
/* 5 Nov (Basil): the bar's TRAVEL / CLAIM is the cards' green price button (src/base.js), a flex item at the bar's right end */
#s-base .bp-head .wb-travel { position: relative; flex: none; }

/* ---- Pinball (src/pinball.js, render.js; mock 270:683): the machine is canvas, these sit on it ---- */
#hits .pin-rail { position: absolute; pointer-events: none; --bw: calc(var(--m) * 24); }
#hits .pin-tile { position: absolute; pointer-events: auto; background: transparent; border: 0; padding: 0; cursor: pointer; color: #fff; font-size: inherit; }
#hits .pin-tile .pt-ico { position: absolute; left: 0; top: 0; width: 100%; height: 87%; }
#hits .pin-tile b { position: absolute; left: -12%; right: -12%; top: 75%; text-align: center; line-height: 1.05; font-size: 1em; -webkit-text-stroke: .32em #000; paint-order: stroke fill; }
#hits .pin-tile:active { transform: scale(.96); }
#hits .fig-x2 { border: 0; border-radius: 0; box-shadow: none; padding: 0; background: var(--img) 0 0 / 100% 100% no-repeat !important; color: #fff; }
#hits .fig-x2::before, #hits .fig-x2::after { content: none; }
#hits .fig-x2 b { position: absolute; inset: 0; opacity: 0; pointer-events: none; }   /* 5 Nov: the label is in the dial's art */
#hits .fig-x2 .x-prev { position: absolute; inset: 0; background: var(--img) 0 0 / 100% 100% no-repeat; animation: xPrevOut .22s ease-out forwards; pointer-events: none; }
@keyframes xPrevOut { from { opacity: 1; } to { opacity: 0; } }
#hits .fig-x2:active { transform: translateY(2px); filter: brightness(.95); }
#hits .fig-x2.bump { animation: hudPump .25s; }

/* ---- Birds: one page (src/birdspage.js; mock 281:409) ---- */
#s-birds { overflow: hidden; }
.fbr-scroll { position: absolute; left: var(--colx); width: var(--colw); top: calc(var(--sat, 0px) + var(--m) * 153); bottom: calc(var(--sab, 0px) + var(--m) * 222);
  overflow-x: hidden; overflow-y: auto; -webkit-overflow-scrolling: touch; touch-action: pan-y; overscroll-behavior: contain; scrollbar-width: none; }
.fbr-scroll::-webkit-scrollbar { display: none; }
.fbr-page { position: relative; width: 100%; }
.fbr-page button { background-color: transparent; border: 0; padding: 0; margin: 0; font: inherit; cursor: pointer; touch-action: pan-y; }
.fbr-page .fbtn { background: var(--img) 0 0 / 100% 100% no-repeat; }
.fbr-page .fbtn:disabled { filter: grayscale(.75) brightness(.92); }
.fbr-equip.done:disabled { filter: none; opacity: .85; }
.fbr-arc { position: absolute; inset: 0; }
.fbr-arc svg { width: 100%; height: 100%; display: block; transform: rotate(-90deg); }
.fbr-arc circle { fill: none; stroke: #3ec41e; stroke-width: 9; stroke-linecap: round; stroke-dasharray: 0 100; transition: stroke-dasharray .4s; }
.fbr-hero canvas { image-rendering: pixelated; }
.fbr-bird { cursor: pointer; transition: transform .12s; }
.fbr-bird:active { transform: scale(.97); }
.fbr-bird.sel > .fimg:first-child { filter: drop-shadow(0 0 calc(var(--m) * 8) #ffd23a) drop-shadow(0 0 calc(var(--m) * 4) #ffd23a); }
.fbr-bird canvas { image-rendering: pixelated; }
.fbr-bird.locked canvas { opacity: .9; }
.fbr-pill.r2 { filter: hue-rotate(-75deg) saturate(1.2); }   /* Rare: the Epic pill turned blue (the mock shows Common and Epic) */
.fbr-rar[data-r="2"] .fimg { filter: hue-rotate(-75deg) saturate(1.2); }
.fbr-task { cursor: pointer; }
.fbr-task:disabled { cursor: default; }
.fbr-task .fbr-tick[hidden] { display: none; }
.fbr-ttxt { white-space: pre-line; line-height: 1.1; }
.fbr-chest.locked .fbr-task { filter: saturate(.4); }
/* roby-island (8 Nov): the care chest says what to do. GO tags on unfinished steps, the next one pulsing;
   locked: a solid navy band with the trophy bar and RACE (no fades) */
.fbr-go { display: flex; align-items: center; justify-content: center; border-radius: 999px; background: #3fbf2e; color: #fff;
  box-shadow: 0 0 0 calc(var(--m) * 5) #14161f; font: 400 calc(var(--m) * 30) var(--font); letter-spacing: .04em; pointer-events: none; }
.fbr-go[hidden] { display: none; }
.fbr-task.next { animation: fbrNudge 1.4s ease-in-out infinite; }
@keyframes fbrNudge { 0%, 100% { transform: none; } 50% { transform: translateY(calc(var(--m) * -8)); } }
.fbr-chest.ready .fbr-done { color: #ffe14a; }
.fbr-lock { background: #10265c; border-radius: calc(var(--m) * 24); box-shadow: 0 0 0 calc(var(--m) * 6) #14161f; z-index: 2; }
.fbr-lock[hidden] { display: none; }
.fbr-lico { background: no-repeat center / contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 50'%3E%3Cpath d='M10 22 V14 a10 10 0 0 1 20 0 V22' fill='none' stroke='%2314161f' stroke-width='9'/%3E%3Cpath d='M10 22 V14 a10 10 0 0 1 20 0 V22' fill='none' stroke='%23c9d3e6' stroke-width='4'/%3E%3Crect x='3' y='21' width='34' height='26' rx='5' fill='%23ffc21a' stroke='%2314161f' stroke-width='4'/%3E%3Ccircle cx='20' cy='33' r='4' fill='%2314161f'/%3E%3C/svg%3E"); }
.fbr-ltitle, .fbr-ltext { justify-content: flex-start; text-align: left; }
.fbr-lbar { background: #061433; border-radius: 999px; box-shadow: 0 0 0 calc(var(--m) * 5) #14161f; overflow: hidden; }
.fbr-lbar > i { position: absolute; left: 0; top: 0; bottom: 0; background: #ffc21a; }
.fbr-lbar > b { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #fff; font: 400 calc(var(--m) * 28) var(--font); text-shadow: 0 0 calc(var(--m) * 4) #000, 0 calc(var(--m) * 2) 0 #000; }
@media (prefers-reduced-motion: reduce) { .fbr-task.next { animation: none; } }
.fbr-mbadge[hidden] { display: none; }

/* ---- Race HUD (src/race/race.js; mock 289:436): in the race stage's design px (--u = mock px × 1125/1440) ---- */
/* 5 Nov: the race world is clipped to the portrait column (race.js fitRace); black bars outside it on wide windows */
#s-race { background: #000; }
/* 5 Nov (Basil: the top UI not aligned): on tall phones the HUD rises with the stage's lift to the screen's top (30 Oct), under the notch */
.race-stage .race-top { left: 0; right: 0; top: calc(env(safe-area-inset-top, 0px) - var(--race-lift, 0px)); height: 0; }
.race-stage .race-pause { position: absolute; left: calc(var(--u) * 33.6); top: calc(var(--u) * 33.6); width: calc(var(--u) * 87.5); height: calc(var(--u) * 87.5);
  border: 0; padding: 0; border-radius: 50%; box-shadow: none; font-size: 0; color: transparent; pointer-events: auto; cursor: pointer;
  background: url("assets/ui/fig/tb_round.eea037d6.webp") 0 0 / 100% 100% no-repeat; }
.race-stage .race-pause::before, .race-stage .race-pause::after { content: ""; position: absolute; top: calc(var(--u) * 21); width: calc(var(--u) * 10.8); height: calc(var(--u) * 41); border-radius: calc(var(--u) * 3); background: #fff; box-shadow: 0 0 0 calc(var(--u) * 1.6) #000; }
.race-stage .race-pause::before { left: calc(var(--u) * 28); }
.race-stage .race-pause::after { left: calc(var(--u) * 43.6); }
.race-stage .race-score { position: absolute; left: 0; right: 0; top: calc(var(--u) * 39); text-align: center; font: 700 calc(var(--u) * 100)/1 var(--font-ui); color: #fff;   /* (mock '12': 29, 170 tall line, centre 114) */
  -webkit-text-stroke: calc(var(--u) * 15.6) #000; paint-order: stroke fill; text-shadow: none; }
/* 5 Nov (Basil: the count overlapping the racer strip): the placement HUD's viewport size (arcade.css v0.20, #s-race.placehud, up
   to 66 px) outranked the mock's 100 on every real race, so on a wide window (a small --u) the count ran into the strip */
#s-race.placehud .race-stage .race-score { font-size: calc(var(--u) * 100); }
.race-stage .race-left { position: absolute; left: 0; right: 0; top: calc(var(--u) * 292); text-align: center;   /* 5 Nov (Basil): clear of the strip, which ends at 273 (was 268, its top inside the strip) */ font: 700 calc(var(--u) * 31.25)/1 var(--font-ui); color: #fff;
  -webkit-text-stroke: calc(var(--u) * 6.25) #000; paint-order: stroke fill; background: none; border: 0; padding: 0;
  z-index: 1; pointer-events: none; }   /* 5 Nov: over the racer strip, as in the mock (the strip comes later in the HUD and covered the count's top) */
.race-stage .race-roster { transform: none; right: auto; margin: 0; left: calc(var(--u) * 152.3); top: calc(var(--u) * 195.3 + env(safe-area-inset-top, 0px) - var(--race-lift, 0px)); width: calc(var(--u) * 820.3); height: calc(var(--u) * 78.1); padding: 0 calc(var(--u) * 20);
  display: flex; align-items: center; justify-content: space-between; gap: 0; border-radius: calc(var(--u) * 15.6); background: url("assets/ui/fig/race_strip.9c327601.webp") 0 0 / 100% 100% no-repeat; border: 0; box-shadow: none; }
.race-stage .race-roster .rr { width: calc(var(--u) * 71); height: calc(var(--u) * 48.4); position: relative; overflow: visible; }
/* 5 Nov: the slot is the mock's bird body (92 x 63); the sprite cell (28 x 26, body 22 x 15 at 2, 10) is placed so the body fills it, as birdInBox does */
.race-stage .race-roster .rr canvas { position: absolute; left: 50%; top: 50%; width: calc(100% * 28 / 22) !important; height: auto !important; max-width: none; transform: translate(-46.43%, -67.31%); }
.race-stage .race-roster .rr.you { outline: none; }
.race-stage .race-feed { left: 0; right: 0; top: calc(var(--u) * 1821); bottom: auto; gap: calc(var(--u) * 10); }
.race-stage .race-feed .fe { min-width: calc(var(--u) * 463.3); height: calc(var(--u) * 78.1); padding: 0 calc(var(--u) * 26); border-radius: calc(var(--u) * 15.6); justify-content: center;
  background: url("assets/ui/fig/race_pill.8fdd9d36.webp") 0 0 / 100% 100% no-repeat; font: 700 calc(var(--u) * 28.1)/1 var(--font-ui); color: #fff; -webkit-text-stroke: calc(var(--u) * 6.25) #000; paint-order: stroke fill; gap: calc(var(--u) * 12); }
.race-stage .race-feed .fe b { color: #fff; }
.race-stage .race-feed .fe canvas { width: calc(var(--u) * 50) !important; }

/* ---- Race results (src/race/resultview.js; mock 289:634 / 289:1229): mock px on the race stage ---- */
@font-face { font-family: "Changa One"; font-style: italic; font-weight: 400; font-display: swap; src: url(/fonts/changa-one-latin-400-italic.woff2) format("woff2"); }
.race-stage .race-result { position: absolute; inset: 0; z-index: 5; background: none; display: block; padding: 0; }
.race-stage .race-result[hidden] { display: none; }
.fres { position: absolute; left: 0; top: 0; width: calc(var(--u) * 1125); height: calc(var(--u) * 2000); --m: calc(var(--u) * 1125 / 1440); color: #fff; overflow: visible;
  animation: fresIn .35s cubic-bezier(.2, 1.3, .4, 1); }
@keyframes fresIn { from { opacity: 0; transform: scale(1.04); } }
/* 5 Nov: the parts build up one by one (resultview.js enter(): --d is each part's delay): the balances, the place stamping
   down from large (the 'stamp' sound lands with it), the sub line, the nest and the winnings, the reward cards left to
   right, the note, the mastery card, the Bond / Shine pill, then the buttons rising from below; ~1.4 s in all */
.fres .fres-in { animation: fresPop .45s cubic-bezier(.2, 1.4, .4, 1) both; animation-delay: var(--d, 0ms); }
@keyframes fresPop { from { opacity: 0; transform: scale(.6); } }
.fres .fres-in.fres-drop { animation-name: fresDrop; animation-duration: .4s; animation-timing-function: cubic-bezier(.3, 0, .2, 1); }
@keyframes fresDrop { from { opacity: 0; transform: scale(2.2); } 70% { opacity: 1; transform: scale(.94); } }
.fres .fres-in.fres-rise { animation-name: fresRise; }
@keyframes fresRise { from { opacity: 0; transform: translateY(calc(var(--m) * 160)); } }
@media (prefers-reduced-motion: reduce) { .fres .fres-in { animation: none; } }
.fres-bg { box-shadow: 0 0 0 100vmax #ffbe46; }
.fres button { background-color: transparent; border: 0; padding: 0; margin: 0; font: inherit; cursor: pointer; }
.fres .fbtn { background: var(--img) 0 0 / 100% 100% no-repeat; }
.fres-place .fp { position: absolute; inset: 0; display: flex; justify-content: center; align-items: flex-start; font: italic 400 calc(var(--m) * 318)/1 "Changa One", var(--font-ui); letter-spacing: 0; }
.fres-place .fp b { font-weight: 400; }
.fres-place .fp i { font-style: italic; font-size: calc(var(--m) * 136.4); margin: calc(var(--m) * 25) 0 0 calc(var(--m) * -4); }
.fres-place .fp.edge { color: #0d47c8; -webkit-text-stroke: calc(var(--m) * 16) #062d6e; paint-order: stroke fill; transform: translate(calc(var(--m) * 5), calc(var(--m) * 9)); }
.fres-place .fp.face b, .fres-place .fp.face i { background: linear-gradient(0deg, #ffffff 29%, #8fb3f5 50%, #ffffff 70%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.fres-subrow { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; gap: calc(var(--m) * 12); --fs: 32; --sw: 4; font-size: calc(var(--m) * 32); }
.fres-pipe { display: inline-block; width: calc(var(--m) * 34); height: calc(var(--m) * 44); background: var(--img) 0 0 / 100% 100% no-repeat; -webkit-text-stroke: 0; }
.fres-note { color: #fff; }
.fres-bird canvas { image-rendering: pixelated; }
.fres-rv .btn { width: 100%; height: 100%; font-family: var(--font-ui); font-weight: 700; font-size: calc(var(--m) * 34); }
.fres .rs-actions .rs-decide { position: absolute; left: calc(var(--m) * 120); right: calc(var(--m) * 120); bottom: 0; display: flex; flex-direction: column; gap: calc(var(--m) * 14); align-items: center;
  padding: calc(var(--m) * 24); border-radius: calc(var(--m) * 30); background: #0b2350f0; border: calc(var(--m) * 5) solid #000; font-family: var(--font-ui); }
/* (the old results card's .rs / .rs-actions rules in style.css and arcade.css don't apply to the rebuilt view) */
.race-stage .race-result .rs.fres { width: calc(var(--u) * 1125); height: calc(var(--u) * 2000); max-height: none; padding: 0; margin: 0; background: none; border: 0; border-radius: 0; box-shadow: none;
  display: block; overflow: visible; text-align: left; gap: 0; }
.race-stage .race-result .fres .rs-actions { position: absolute; display: block; margin: 0; padding: 0; background: none; border: 0; border-radius: 0; width: calc(var(--m) * 1440); bottom: auto; flex: none; gap: 0; }
.race-stage .race-result .fres .rs-actions .fbtn { position: absolute; width: auto; }

/* ---- Chest opening (src/chestfx.js; mock 289:1328) ---- */
.chestfx.fchest { position: fixed; inset: 0; z-index: 60; background: #6a2fd0; overflow: hidden; display: block; padding: 0; animation: fcxIn .25s ease-out; }
@keyframes fcxIn { from { opacity: 0; } }
.chestfx.fchest.out { opacity: 0; transition: opacity .2s; }
.fcx-bg { position: absolute; inset: 0; background: var(--img) center / cover no-repeat; }
.fcx-frame { position: absolute; left: var(--colx); width: var(--colw); bottom: var(--sab, 0px); height: calc(var(--m) * 2560); }
.fcx-frame button { background-color: transparent; border: 0; padding: 0; margin: 0; font: inherit; cursor: pointer; color: #fff; }
.fcx-frame .fbtn { background: var(--img) 0 0 / 100% 100% no-repeat; }
.fcx-open { opacity: 0; transform: scale(.7); transition: opacity .25s, transform .35s cubic-bezier(.2, 1.6, .4, 1); }
.fchest.opened .fcx-open { opacity: 1; transform: none; }
.fchest.opened .fcx-closed { opacity: 0; transform: scale(1.2); transition: opacity .2s, transform .25s; }
.fchest.shake .fcx-closed { animation: fcxShake .56s; }
@keyframes fcxShake { 15% { transform: rotate(-6deg) scale(1.03); } 35% { transform: rotate(6deg) scale(1.06); } 55% { transform: rotate(-5deg) scale(1.08); } 75% { transform: rotate(4deg) scale(1.1); } }
/* 10 Nov: each tier has its own open chest (assets/ui/hd/chest_open_*.webp); the light pouring out of it is drawn here */
.fcx-glow { pointer-events: none; opacity: 0; mix-blend-mode: screen; border-radius: 50%;
  background: radial-gradient(ellipse 50% 50% at 50% 62%, #fff8dce6 0%, #ffe48cb3 22%, #ffc84a4d 45%, #ffb02000 70%); }
.fchest.opened .fcx-glow { opacity: 1; transition: opacity .3s .05s; animation: fcxGlow 1.6s ease-in-out .35s infinite alternate; }
@keyframes fcxGlow { to { opacity: .7; transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .fchest.opened .fcx-glow { animation: none; } }
.fcx-card { animation: fcxCard .35s cubic-bezier(.2, 1.6, .4, 1); }
.fcx-card.still { animation: none; }
@keyframes fcxCard { from { transform: translateY(calc(var(--m) * 380)) scale(.4); opacity: 0; } }
.fcx-skip { --fs: 30; --sw: 4; display: flex; align-items: center; justify-content: center; font-size: calc(var(--m) * 30); opacity: .85; }
.fcx-continue[hidden], .fcx-skip[hidden] { display: none; }

/* ---- the kit on every other screen (Figma UI rebuild): Store, sheets, modals, tutorial, arcade ---- */
:root { --font: var(--font-ui); }   /* one face everywhere (was Lilita One) */
/* buttons: the four kit buttons of the Figma Components page (Buttons 3:32), 9-sliced */
.btn { font-family: var(--font-ui); font-weight: 700; color: #fff; background: none !important; box-shadow: none !important; border-radius: 0 !important;
  border-style: solid !important; border-color: transparent !important; border-width: 4px !important; border-image: url("assets/ui/fig/btn_k_green.1b399746.webp") 64 64 70 64 fill / 15px 16px 17px 16px stretch;
  -webkit-text-stroke: 4px #000; paint-order: stroke fill; text-shadow: none; }
.btn.gold { border-image-source: url("assets/ui/fig/btn_k_yellow.52de94f7.webp"); }
.btn.blue, .btn.navy { border-image-source: url("assets/ui/fig/btn_k_blue.45e1bc88.webp"); }
.btn.grey { border-image-source: url("assets/ui/fig/btn_k_gray.8fe66287.webp"); }
/* 5 Nov: .red too (Settings RESET, the raid's ATTACK!): the kit has no red button, so .red fell back to green */
.btn.danger, .btn.red { border-image-source: url("assets/ui/fig/btn_k_yellow.52de94f7.webp"); filter: hue-rotate(-38deg) saturate(1.4); }
.btn.sm { border-image-width: 11px 12px 13px 12px; -webkit-text-stroke-width: 3px; }
.btn:active:not(:disabled) { transform: translateY(2px); filter: brightness(.93); box-shadow: none; }
.btn:disabled { filter: grayscale(.65) brightness(.92); }
/* modals: the mock's popup (Frame 14: the blue panel 289:1543 around a light panel 289:1545), the title white on top */
.card { background: none !important; box-shadow: none; border-radius: 0; border-style: solid !important; border-color: transparent !important; border-width: 18px !important;
  border-image: url("assets/ui/fig/pop_panel.ea159202.webp") 40 40 60 40 fill / 14px 14px 20px 14px stretch; }
.card header { background: none !important; border: 0 !important; border-radius: 0; padding: 2px 8px 8px; }
.card h2 { font-family: var(--font-ui); font-weight: 700; color: #fff; -webkit-text-stroke: 6px #000; paint-order: stroke fill; text-shadow: none; letter-spacing: 0; font-size: clamp(22px, 6vmin, 34px); }
.card:not(.navy) .body { border-style: solid; border-color: transparent; border-width: 10px; border-image: url("assets/ui/fig/pop_inner.075f0080.webp") 30 fill / 12px stretch; margin: 0 2px 2px; }
.card.navy .body { background: #0b2350eb; border-radius: 14px; margin: 0 2px 2px; }
/* 5 Nov: the chest card, Frames 14 / 15 (289:1538 / 324:463), in mock px (--m): the blue card 850 wide (#01a7f9, a 6 px
   outline, the darker foot), the title, the light panel with the chest, then 750 x 130 rows 30 apart (src/chestui.js).
   How the mock draws its kit (measured on the Figma render, 5 Nov): an inner shadow is cast from the outline's outer edge,
   so the outline hides that much of it (the panel's 30 px foot under a 6 px outline shows 24; a Base Button's 10 px light
   top and 15 px dark foot under its 5 px outline show 5 and 10), and every Base Button layer is turned 180°, so its
   gradient reads bottom to top (the yellow button is yellow on top, orange at the foot). */
.card.chest-card { width: calc(var(--m) * 850); max-width: none; max-height: none; overflow: visible; position: relative; box-sizing: border-box;
  padding: calc(var(--m) * 28) calc(var(--m) * 50) calc(var(--m) * 68); background: #01a7f9 !important; border: 0 !important; border-image: none !important;
  border-radius: calc(var(--m) * 20) !important; box-shadow: 0 0 0 calc(var(--m) * 6) #000, inset 0 calc(var(--m) * -24) 0 #0158bc !important; }
.card.chest-card header { position: static !important; padding: 0 !important; margin: 0 0 calc(var(--m) * 27); }
.card.chest-card h2 { padding: 0; font-size: calc(var(--m) * 48); line-height: calc(var(--m) * 45); -webkit-text-stroke-width: calc(var(--m) * 12); }
.card.chest-card .xbtn, .card.attack-card .xbtn { right: calc(var(--m) * -25); top: calc(var(--m) * -50); transform: none; width: calc(var(--m) * 100); height: calc(var(--m) * 100); border: 0; border-radius: calc(var(--m) * 15);
  color: transparent; font-size: 0; filter: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 56.69 56.69'%3E%3Cpath d='M7.55 7.55 41.14 41.14M41.14 7.55 7.55 41.14' stroke='%23000' stroke-width='23.1' stroke-linecap='round'/%3E%3Cpath d='M7.55 7.55 41.14 41.14M41.14 7.55 7.55 41.14' stroke='%23fff' stroke-width='15.1' stroke-linecap='round'/%3E%3C/svg%3E") center / 56.69% no-repeat, linear-gradient(#ff5f5f, #c40000) !important;
  box-shadow: 0 0 0 calc(var(--m) * 5) #000, inset 0 calc(var(--m) * -10) 0 #780000, inset 0 calc(var(--m) * 5) 0 #fff !important; }
/* (the X: the mock's Union, two 15 px bars with round ends corner to corner of a 48.69 px square, a 4 px outline) */
.card.chest-card .body, .card.attack-card .body { display: block; padding: 0; margin: 0 !important; border: 0 !important; border-image: none !important; background: none !important; }
/* 5 Nov: the return summary, "Your base was attacked!" (Frame 16, 328:990), in mock px (--m) from the card's top-left: the
   blue card 940 wide (#01a7f9, a 6 px outline, the darker foot) over the swords (405 x 394 at (268, -319)), the X at
   (860, -20), the yellow title in its 539 x 127 box at (201, 25), the SHIELDS USED pill 537 x 100 at (207, 170), then
   838 x 167 rows 20 apart from (51, 310): five show, more scroll. The backdrop is the mock's 60 % black. */
.modal:has(> .card.attack-card), .modal:has(> .card.flappy-card) { background: rgba(0, 0, 0, .6); }
.card.attack-card, .card.flappy-card { width: calc(var(--m) * 940); max-width: none; max-height: none; overflow: visible; position: relative; box-sizing: border-box; isolation: isolate;
  padding: calc(var(--m) * 25) calc(var(--m) * 51) calc(var(--m) * 79); margin-bottom: calc(var(--m) * 90);
  background: none !important; border: 0 !important; border-image: none !important; border-radius: calc(var(--m) * 20) !important; box-shadow: none !important; }
.card.attack-card::before, .card.flappy-card::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: #01a7f9; box-shadow: 0 0 0 calc(var(--m) * 6) #000, inset 0 calc(var(--m) * -24) 0 #0259bc; }
.card.attack-card .xbtn { right: calc(var(--m) * -20); top: calc(var(--m) * -20); }
/* 5 Nov: the new Flappy card, "New Flappy unlocked!" (Frame 17, 328:1115): the same blue card, 940 x 930, its parts placed
   in mock px by src/pinball.js showFlappies (title, COLLECTED, the light panel with the name, the Flappy, the rarity pill, CONTINUE) */
.card.flappy-card { height: calc(var(--m) * 930); padding: 0; }
.fl-title { color: #fffb0c; }
.fl-panel { border-radius: calc(var(--m) * 20); background: linear-gradient(#fff, #9de4fd); }
.fl-bird, .fl-coin, .flappy-card .fbr-pill { pointer-events: none; }
.fl-bird canvas { image-rendering: pixelated; }
.fl-coin { object-fit: contain; }
.fl-go { padding: 0; border: 0; font: inherit; cursor: pointer; }
.card.attack-card:focus { outline: none; }
.card.attack-card header { position: static !important; padding: 0 !important; margin: 0; }
.card.attack-card h2 { box-sizing: border-box; display: flex; align-items: center; justify-content: center; width: calc(var(--m) * 539); height: calc(var(--m) * 127); margin: 0 auto; padding: 0;
  color: #fffb0c; font-size: calc(var(--m) * 48); line-height: calc(var(--m) * 64); -webkit-text-stroke-width: calc(var(--m) * 12); }
.ac-swords { position: absolute; z-index: -2; left: calc(var(--m) * 268); top: calc(var(--m) * -319); width: calc(var(--m) * 405); height: calc(var(--m) * 394); pointer-events: none; user-select: none; }
.ac-pill { position: relative; width: calc(var(--m) * 537); height: calc(var(--m) * 100); margin: calc(var(--m) * 18) 0 0 calc(var(--m) * 156); border-radius: calc(var(--m) * 20); background: #006dba; }
.ac-shield { position: absolute; left: calc(var(--m) * 50); top: calc(var(--m) * 10); width: calc(var(--m) * 71); height: calc(var(--m) * 80); }
.ac-used { position: absolute; left: calc(var(--m) * 133); top: calc(var(--m) * 35); width: calc(var(--m) * 342); height: calc(var(--m) * 30); display: flex; align-items: center; justify-content: center; --fs: 40; --sw: 4; }
/* the list: 32 px wider than the rows, so a scrollbar sits in the card's right margin, not on the rows */
.ac-list { display: flex; flex-direction: column; gap: calc(var(--m) * 20); width: calc(var(--m) * 870); max-height: calc(var(--m) * 915); margin-top: calc(var(--m) * 40);
  overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #006dba transparent; }
.ac-row { position: relative; flex: none; width: calc(var(--m) * 838); height: calc(var(--m) * 167); border-radius: calc(var(--m) * 20); background: linear-gradient(#fff, #9de4fd); text-align: left; }
.ac-av { position: absolute; left: calc(var(--m) * 34); top: calc(var(--m) * 34); width: calc(var(--m) * 100); height: calc(var(--m) * 100); border-radius: 50%; overflow: hidden;
  background: #000; box-shadow: 0 0 0 calc(var(--m) * 6) #5ac2e6; }
.ac-av canvas { display: block; width: 100%; height: 100%; }
.ac-t { position: absolute; left: calc(var(--m) * 166); display: flex; align-items: center; }
.ac-name { top: calc(var(--m) * 32); height: calc(var(--m) * 30); --fs: 40; --sw: 4; }
.ac-what { top: calc(var(--m) * 82); height: calc(var(--m) * 18); --fs: 24; --sw: 4; color: #ff7272; }
.ac-row.blocked .ac-what { color: #01a7f9; }
.ac-when { top: calc(var(--m) * 117); height: calc(var(--m) * 18); --fs: 24; color: #006dba; }
.ac-rv { position: absolute; left: calc(var(--m) * 553); top: calc(var(--m) * 36); width: calc(var(--m) * 266); height: calc(var(--m) * 96); padding: 0; border: 0; font: inherit; }
.ac-rvt { position: absolute; left: calc(var(--m) * 19); top: 0; width: calc(var(--m) * 231); height: calc(var(--m) * 88); display: flex; align-items: center; justify-content: center; --fs: 32; --sw: 4; }
.cc-art { height: calc(var(--m) * 460); box-sizing: border-box; padding-top: calc(var(--m) * 60); border-radius: calc(var(--m) * 20); background: linear-gradient(#fff, #9de4fd); }
.cc-art img { display: block; margin: 0 auto; width: calc(var(--m) * 375); height: calc(var(--m) * 341); object-fit: contain; }
.cc-list { display: flex; flex-direction: column; gap: calc(var(--m) * 30); margin-top: calc(var(--m) * 42); }
.cc-row { position: relative; display: block; width: 100%; height: calc(var(--m) * 130); padding: 0; border: 0; border-radius: calc(var(--m) * 15); cursor: pointer;
  font: 700 calc(var(--m) * 40) / 1 var(--font-ui); color: #fff; -webkit-text-stroke: calc(var(--m) * 10) #000; paint-order: stroke fill; }
.cc-row.green { background: linear-gradient(#50de06, #0ec12a); box-shadow: 0 0 0 calc(var(--m) * 5) #000, inset 0 calc(var(--m) * -10) 0 #038623, inset 0 calc(var(--m) * 5) 0 #fff; }
.cc-row.yellow { background: linear-gradient(#f9e51a, #fc9407); box-shadow: 0 0 0 calc(var(--m) * 5) #000, inset 0 calc(var(--m) * -10) 0 #af3f01, inset 0 calc(var(--m) * 5) 0 #fff; }
.cc-row:active:not(:disabled) { transform: translateY(calc(var(--m) * 4)); filter: brightness(.93); }
.cc-row:disabled, .cc-row.poor { filter: grayscale(.75) brightness(.92); }
.cc-row:disabled { cursor: default; }
.cc-pill { position: absolute; left: calc(var(--m) * 20); top: calc(var(--m) * 22); width: calc(var(--m) * 280); height: calc(var(--m) * 80); border-radius: calc(var(--m) * 45); background: #12a435; }
.cc-row.yellow .cc-pill { background: #db8325; }
.cc-ico { position: absolute; left: calc(var(--m) * 25); top: calc(var(--m) * 6); width: calc(var(--m) * 66); height: calc(var(--m) * 66); }
.cc-ico.coin { left: calc(var(--m) * 24); top: calc(var(--m) * 5); width: calc(var(--m) * 68); height: calc(var(--m) * 69); }
.cc-ico.ad { top: calc(var(--m) * 13); width: calc(var(--m) * 68); height: calc(var(--m) * 55); }
.cc-val { position: absolute; left: calc(var(--m) * 93); top: calc(var(--m) * 19); width: calc(var(--m) * 152); height: calc(var(--m) * 43); display: grid; place-items: center; font: inherit; }
.cc-lbl { position: absolute; left: calc(var(--m) * 278); top: calc(var(--m) * 21); width: calc(var(--m) * 407); height: calc(var(--m) * 88); display: grid; place-items: center; }
.cc-row.cc-timer { display: flex; align-items: center; justify-content: center; gap: calc(var(--m) * 12); background: #0072bf; cursor: default; }
.cc-timer .cc-ico { position: static; }
.cc-timer b { font: inherit; }
/* sheet titles (Store, Trophy Road, World Map, Daily, Events …): the mock's white outlined titles */
.sheet-head h1 { font-family: var(--font-ui); font-weight: 700; color: #fff; text-shadow: none; -webkit-text-stroke-color: #000; }
/* the tutorial bubble: the kit's light panel with an outline */
.guide-bubble { background: #fff; border: 4px solid #000; border-radius: 18px; box-shadow: 0 6px 0 #0006; }
.gb-step { font-family: var(--font-ui); font-weight: 700; }

/* ---- 5 Nov: the mock's yellow button (Base Button): yellow → orange, a dark foot, a light top edge, a 5 px outline ---- */
.fy-btn { border-radius: calc(var(--m) * 15); background-image: linear-gradient(#f9e51a, #fc9407);
  box-shadow: 0 0 0 calc(var(--m) * 5) #000, inset 0 calc(var(--m) * -10) 0 #af3f01, inset 0 calc(var(--m) * 5) 0 #fff; }
.fy-btn:focus-visible { outline: calc(var(--m) * 8) solid #fff; outline-offset: calc(var(--m) * 6); }
button.fy-btn { cursor: pointer; }
button.fy-btn:active:not(:disabled) { filter: brightness(.93); transform: translateY(calc(var(--m) * 3)); }
button.fy-btn:disabled { filter: grayscale(.7) brightness(.92); cursor: default; }

/* ---- 5 Nov: the Store (mock frame 'Store' 324:608) ---- */
.fst-starter, .fst-sec, .fst-card { pointer-events: none; }
.fst-starter > button, .fst-card > button { pointer-events: auto; }
.fst-panel { border-radius: calc(var(--m) * 35);
  background: linear-gradient(rgba(0, 0, 0, .37), rgba(0, 0, 0, 0) 25.6%), linear-gradient(rgba(0, 0, 0, .2), rgba(0, 0, 0, .2)), var(--img) center / cover no-repeat; }
.fst-once { background: rgba(0, 0, 0, .3); border-radius: calc(var(--m) * 10); }
.fst-item { background: rgba(0, 0, 0, .4); border-radius: calc(var(--m) * 13.57); box-shadow: 0 0 0 calc(var(--m) * 4.8) #000; }
.fst-epic { background: #c248fa; border-radius: calc(var(--m) * 19); box-shadow: 0 0 0 calc(var(--m) * 4) #8108ba; }
.fst-bird { image-rendering: pixelated; }
.fst-art, .fst-frame, .fst-bird { object-fit: contain; }
/* STARTER PACK: Changa One italic, two layers as in the mock (Group 607): the blue one's outside stroke and
   shadow under the light one */
.fst-title { font: italic 400 calc(var(--m) * 111.74)/calc(var(--m) * 118.67) "Changa One", var(--font-ui); letter-spacing: calc(var(--m) * -7.82);
  text-align: center; white-space: nowrap; }
.fst-title > span { position: absolute; inset: 0; color: transparent; -webkit-background-clip: text; background-clip: text; }
.fst-title .a { background-image: linear-gradient(to top, #003dbe 28.8%, #4f8cff 60%, #007bff 69.5%); -webkit-text-stroke: calc(var(--m) * 7.24) #0425ca;
  filter: drop-shadow(0 calc(var(--m) * 3.1) calc(var(--m) * 2.25) rgba(0, 0, 0, .5)); }
.fst-title .b { background-image: linear-gradient(to top, #fff 28.8%, #8eb2f5 60%, #fff 69.5%); filter: drop-shadow(0 0 calc(var(--m) * 3.58) rgba(0, 0, 0, .8)); }
.fst-sec { background: #01a7f9; border-radius: calc(var(--m) * 20); box-shadow: 0 0 0 calc(var(--m) * 6) #000, inset 0 calc(var(--m) * -24) 0 #0158bc; }
.fst-card { border-radius: calc(var(--m) * 20); background: linear-gradient(#fff, #9de4fd); }
.fst-head { background: #a3d9ff; border-radius: calc(var(--m) * 10); }
.fst-hrow { display: flex; align-items: center; justify-content: center; gap: calc(var(--m) * 12); pointer-events: none; }
.fst-hrow img { width: calc(var(--m) * 60); height: calc(var(--m) * 61); object-fit: contain; }
.fst-note { opacity: .9; }
.fst-starter.focus, .fst-sec.focus { animation: fstFocus .5s ease-out 2; }
@keyframes fstFocus { 40% { transform: scale(1.025); filter: brightness(1.12); } }
@media (prefers-reduced-motion: reduce) { .fst-starter.focus, .fst-sec.focus { animation: none; } }

/* ---- RAID (11 Nov; mock Frames 18–25, 367:473 … 368:1080; src/raid.js) ----
   The stage is the play column, the full height of the screen. Three origins, all in mock px (--m):
   .rd-top hangs from the top, .rd-bot is a frame standing on the bottom, and --iy is the top of the island's
   frame midway between them (the island, the intro, the result card). --u = one island design px. */
.raid-stage { position: absolute; top: 0; overflow: hidden; background: linear-gradient(#2aa9fb 0 50%, #c6e0fc 50% 100%); animation: rdIn .35s cubic-bezier(.2, 1.4, .4, 1); }
.raid-stage[data-world="2"], .raid-stage[data-world="3"] { background: linear-gradient(#72c7f9 0 50%, #c5dffb 50% 100%); }
@keyframes rdIn { from { transform: scale(.9); opacity: 0 } }
@keyframes rdPop { from { scale: .3; opacity: 0 } }
@keyframes rdFade { from { opacity: 0 } }
@keyframes rdSpin { to { rotate: 360deg } }
.raid-stage [hidden] { display: none !important; }
.raid-stage button { font: inherit; touch-action: manipulation; }
.rd-bg { position: absolute; left: 0; width: 100%; top: calc(var(--iy) + var(--m) * -201); height: calc(var(--m) * 2561); background: url("assets/ui/fig/base_bg.be380b5b.webp") 0 0 / 100% 100% no-repeat; }
.raid-stage[data-world="2"] .rd-bg, .raid-stage[data-world="3"] .rd-bg { top: calc(var(--iy) + var(--u) * 70); height: calc(var(--m) * 2560); }
.raid-stage[data-world="2"] .rd-bg { background-image: url("assets/base/w2/bg.e71d43d9.webp"); }
.raid-stage[data-world="3"] .rd-bg { background-image: url("assets/base/w3/bg.587bddbe.webp"); }
.rd-fade { position: absolute; left: 0; width: 100%; top: calc(var(--iy) + var(--m) * 2095); height: calc(var(--m) * 655); background: linear-gradient(#fdf4ee00, #c6e0fc 41.6%); }
.raid-stage[data-world="2"] .rd-fade, .raid-stage[data-world="3"] .rd-fade { display: none; }
.rd-sky { position: absolute; inset: 0; background: #8fd6fb url("assets/ui/raid/sky.64fd6a94.webp") center / cover no-repeat; transition: opacity .3s; pointer-events: none; }
.raid-stage:not([data-phase="intro"]):not([data-phase="reel"]) .rd-sky { opacity: 0; }

/* top bar: the victim's tile, the world chip, the prompt (the RAID! logo while the cards spin) */
.rd-top { position: absolute; left: 0; top: var(--sat, 0px); width: 100%; height: 0; pointer-events: none; }
.rd-top > * { position: absolute; }
.raid-stage[data-phase="intro"] .rd-top > *, .raid-stage[data-phase="reel"] .rd-top > :not(.rd-logo), .raid-stage:not([data-phase="reel"]) .rd-logo { display: none; }
.rd-logo { left: calc(var(--m) * 392); top: calc(var(--m) * 84); width: calc(var(--m) * 656); height: calc(var(--m) * 218); animation: rdPop .4s cubic-bezier(.2, 1.6, .4, 1) backwards; }
.rd-who { left: calc(var(--m) * 57); top: calc(var(--m) * 52); width: calc(var(--m) * 230); height: calc(var(--m) * 240); border-radius: calc(var(--m) * 20); background: #22305266; }
.rd-who i { position: absolute; left: calc(var(--m) * 25); top: calc(var(--m) * 19); width: calc(var(--m) * 180); height: calc(var(--m) * 180); border-radius: 50%; background: #fff; box-shadow: 0 0 0 calc(var(--m) * 5) #000; }
.rd-who i canvas { display: block; width: 100%; height: 100%; border-radius: 50%; }
.rd-who b { position: absolute; left: calc(var(--m) * -20); right: calc(var(--m) * -20); top: calc(var(--m) * 186); height: calc(var(--m) * 37); display: flex; align-items: center; justify-content: center; --fs: 48; --sw: 5; }
.rd-tag { left: calc(var(--m) * 57); top: calc(var(--m) * 310); width: calc(var(--m) * 230); height: calc(var(--m) * 54); border-radius: calc(var(--m) * 14); background: #e73838; box-shadow: 0 0 0 calc(var(--m) * 5) #000;
  display: grid; place-items: center; --fs: 30; --sw: 4; }
.rd-tag.friend { background: #2f8be6; }
.rd-world { left: calc(var(--m) * 495); top: calc(var(--m) * 64); width: calc(var(--m) * 449); height: calc(var(--m) * 72); box-sizing: border-box; padding-bottom: calc(var(--m) * 6); border-radius: calc(var(--m) * 10);
  background: linear-gradient(#5dc3fd, #2182e1); box-shadow: 0 0 0 calc(var(--m) * 5) #000, inset 0 calc(var(--m) * -10) 0 #0159a4; display: grid; place-items: center; --fs: 32; --sw: 4; }
.rd-prompt { left: calc(var(--m) * 343); top: calc(var(--m) * 189); width: calc(var(--m) * 737); height: calc(var(--m) * 173); display: flex; align-items: center; justify-content: center; text-align: center;
  color: #fffb0c; white-space: normal; line-height: calc(var(--m) * 63.8); --fs: 48; --sw: 6; }
.raid-stage[data-phase="attack"] .rd-prompt { animation: rdPop .3s cubic-bezier(.2, 1.8, .4, 1); }
.raid-stage[data-phase="result"] .rd-prompt { display: none; }
/* the coin pill stays lit over the result's dim layer, as in the mock */
.rd-coins { position: absolute; z-index: 9; left: calc(var(--m) * 1026); top: calc(var(--sat, 0px) + var(--m) * 52); width: calc(var(--m) * 370); height: calc(var(--m) * 90); border-radius: calc(var(--m) * 45); background: #22305280; pointer-events: none; }
.raid-stage[data-phase="intro"] .rd-coins, .raid-stage[data-phase="reel"] .rd-coins { display: none; }
.rd-coins > * { position: absolute; }
.rd-coins .coin { left: calc(var(--m) * 4); top: calc(var(--m) * 4); width: calc(var(--m) * 79); height: calc(var(--m) * 80); }
.rd-coins span { left: calc(var(--m) * 84); top: 0; width: calc(var(--m) * 200); height: 100%; display: flex; align-items: center; justify-content: center; --fs: 40; --sw: 4; font-variant-numeric: tabular-nums; }
.rd-coins .plus { left: calc(var(--m) * 302); top: calc(var(--m) * 22); width: calc(var(--m) * 44); height: calc(var(--m) * 44); }
.rd-coins.pump { animation: hudPump .25s; }

/* bottom frame: ATTACK <BUILDING>!, the reward bar, the hidden Flappy */
.rd-bot { position: absolute; left: 0; bottom: var(--sab, 0px); width: 100%; height: calc(var(--m) * 2560); pointer-events: none; }
.rd-bot > * { position: absolute; pointer-events: auto; }
.raid-stage:not([data-phase="aim"]) .rd-bot { display: none; }
.rd-btn { border: 0; padding: 0; margin: 0; cursor: pointer; border-radius: calc(var(--m) * 15); background: linear-gradient(#f9e51a, #fc9407);
  box-shadow: 0 0 0 calc(var(--m) * 5) #000, inset 0 calc(var(--m) * -10) 0 #af3f01, inset 0 calc(var(--m) * 5) 0 #fff; transition: transform .06s, filter .06s; }
.rd-btn:active:not(:disabled) { transform: translateY(calc(var(--m) * 4)); filter: brightness(.92); }
.rd-btn:focus-visible { outline: calc(var(--m) * 8) solid #fff; outline-offset: calc(var(--m) * 6); }
.rd-btn b { display: flex; align-items: center; justify-content: center; --fs: 40; --sw: 5; }
.rd-attack { left: calc(var(--m) * 329); top: calc(var(--m) * 1894); width: calc(var(--m) * 780); height: calc(var(--m) * 150); }
.rd-attack img { position: absolute; left: calc(var(--m) * 17); top: calc(var(--m) * -22); width: calc(var(--m) * 155); height: calc(var(--m) * 145); filter: drop-shadow(0 calc(var(--m) * 5) calc(var(--m) * 3) #0006); pointer-events: none; }
.rd-attack b { position: absolute; left: calc(var(--m) * 142); top: calc(var(--m) * 29); width: calc(var(--m) * 595); height: calc(var(--m) * 88); }
.rd-attack.pop { animation: pop .3s cubic-bezier(.2, 1.6, .4, 1); }
.rd-reward { left: calc(var(--m) * 329); top: calc(var(--m) * 2088); width: calc(var(--m) * 780); height: calc(var(--m) * 124); border-radius: calc(var(--m) * 20); background: #22305266; display: flex; align-items: center; justify-content: center; }
.rd-reward b { --fs: 32; --sw: 4; }
.rd-reward b.amt { --fs: 40; font-variant-numeric: tabular-nums; }
.rd-reward img { width: calc(var(--m) * 79); height: calc(var(--m) * 80); margin: 0 calc(var(--m) * 8) 0 calc(var(--m) * 41); }
.rd-reward em { font-style: normal; box-sizing: border-box; min-width: calc(var(--m) * 90); height: calc(var(--m) * 61); padding: 0 calc(var(--m) * 14); margin-left: calc(var(--m) * 20); border-radius: calc(var(--m) * 20);
  background: #ba3cfd; box-shadow: 0 0 0 calc(var(--m) * 4) #000; display: grid; place-items: center; --fs: 40; --sw: 4; }
.rd-pet { left: calc(var(--m) * 221); top: calc(var(--m) * 2218); width: calc(var(--m) * 980); height: calc(var(--m) * 210); border-radius: calc(var(--m) * 20); background: linear-gradient(#fff, #9de4fd); box-shadow: 0 0 0 calc(var(--m) * 6) #000;
  animation: rdPop .35s cubic-bezier(.2, 1.5, .4, 1) .15s backwards; }
.rd-bird { position: absolute; left: calc(var(--m) * 60); top: calc(var(--m) * 20); width: calc(var(--m) * 165); height: calc(var(--m) * 113); }
.rd-bird canvas { image-rendering: pixelated; }
.rd-rar { position: absolute; left: calc(var(--m) * 58); top: calc(var(--m) * 149); width: calc(var(--m) * 170); height: calc(var(--m) * 38); border-radius: calc(var(--m) * 19); font-style: normal; text-transform: uppercase;
  background: #c249fb; box-shadow: 0 0 0 calc(var(--m) * 4) #8109ba; display: grid; place-items: center; --fs: 24; --sw: 3; }
.rd-rar[data-r="1"] { background: #d2d2d2; box-shadow: 0 0 0 calc(var(--m) * 4) #7f7f7f; }
.rd-rar[data-r="2"] { background: #49a6fb; box-shadow: 0 0 0 calc(var(--m) * 4) #0962ba; }
.rd-pet p { position: absolute; margin: 0; left: calc(var(--m) * 301); top: calc(var(--m) * 56); width: calc(var(--m) * 625); height: calc(var(--m) * 101); display: flex; align-items: center; text-align: left;
  white-space: normal; text-transform: uppercase; line-height: calc(var(--m) * 48); --fs: 32; --sw: 5; }

.raid-skip { position: absolute; inset: 0; z-index: 6; background: transparent; border: 0; cursor: pointer; display: flex; align-items: flex-end; justify-content: center;
  padding: 0 0 calc(var(--sab, 0px) + var(--m) * 260); color: #fff; opacity: .85; --fs: 32; --sw: 4; }
.raid-stage[data-phase="intro"] .raid-skip { color: transparent; -webkit-text-stroke-color: transparent; }

/* the result card (Frames 23–25): 850 x 1120 at (295, 633) of the island's frame */
.rd-dim { position: absolute; inset: 0; z-index: 7; background: #000000b3; animation: rdFade .25s backwards; }
.rd-rrays { position: absolute; z-index: 7; left: calc(var(--m) * 295); top: calc(var(--iy) + var(--m) * 237); width: calc(var(--m) * 850); height: calc(var(--m) * 850); max-width: none; opacity: .4; animation: rdSpin 16s linear infinite, rdFade .4s backwards; pointer-events: none; }
.raid-result { position: absolute; z-index: 8; left: calc(var(--m) * 295); top: calc(var(--iy) + var(--m) * 633); width: calc(var(--m) * 850); box-sizing: border-box; padding: calc(var(--m) * 83) calc(var(--m) * 50) calc(var(--m) * 68);
  border-radius: calc(var(--m) * 20); background: #01a7f9; box-shadow: 0 0 0 calc(var(--m) * 6) #000, inset 0 calc(var(--m) * -24) 0 #0259bc; display: flex; flex-direction: column; align-items: center;
  animation: rdPop .35s cubic-bezier(.2, 1.5, .4, 1) backwards; }
.rd-ico { position: absolute; left: calc(var(--m) * 279); top: calc(var(--m) * -204); width: calc(var(--m) * 307); height: calc(var(--m) * 287); max-width: none; filter: drop-shadow(0 calc(var(--m) * 10) calc(var(--m) * 5) #0006);
  animation: rdPop .45s cubic-bezier(.2, 1.8, .4, 1) .15s backwards; pointer-events: none; }
.raid-result.blocked .rd-ico { left: calc(var(--m) * 314); top: calc(var(--m) * -165); width: calc(var(--m) * 222); height: calc(var(--m) * 250); filter: none; }
.raid-result h3 { margin: 0; height: calc(var(--m) * 117); display: flex; align-items: center; color: #fffb0c; --fs: 64; --sw: 6; }
.rd-sub { margin: calc(var(--m) * 11) 0 0; height: calc(var(--m) * 86); box-sizing: border-box; padding-top: calc(var(--m) * 15); display: flex; align-items: center; --fs: 32; --sw: 5; }
.rd-amt { width: calc(var(--m) * 750); height: calc(var(--m) * 147); border-radius: calc(var(--m) * 20); background: #006dba; display: flex; align-items: center; justify-content: center; gap: calc(var(--m) * 13);
  --fs: 74.67; --sw: 7.47; font-variant-numeric: tabular-nums; }
.rd-amt img { width: calc(var(--m) * 91); height: calc(var(--m) * 92); }
.rd-loot { position: relative; width: calc(var(--m) * 750); height: calc(var(--m) * 360); margin-top: calc(var(--m) * 61); border-radius: calc(var(--m) * 20); background: linear-gradient(#fff, #9de4fd); }
.rd-loot .rd-bird { left: calc(var(--m) * 293); top: calc(var(--m) * 36); }
.rd-loot .rd-rar { left: calc(var(--m) * 291); top: calc(var(--m) * 165); }
.rd-loot.miss .rd-bird, .rd-loot.miss .rd-rar { opacity: .18; }
.rd-loot p { position: absolute; margin: 0; left: calc(var(--m) * 63); top: calc(var(--m) * 205); width: calc(var(--m) * 625); height: calc(var(--m) * 143); display: flex; align-items: center; justify-content: center; text-align: center;
  white-space: normal; text-transform: uppercase; line-height: calc(var(--m) * 48); --fs: 32; --sw: 5; }
.rd-ok { width: calc(var(--m) * 750); height: calc(var(--m) * 130); margin-top: calc(var(--m) * 57); display: grid; place-items: center; }

/* ---- DAILY LOGIN REWARDS + DAILY MISSIONS (12 Nov; mock "Daily Login" 371:1531 / "Daily Mission"; src/dailypop.js) ----
   Popups over a 70 % black layer. --u = CSS px per mock px: the column's --m, smaller if the panel (plus the close
   button's overhang) wouldn't fit the screen. Every box is in the panel's mock px (--x --y --w --h). */
.dp-layer { position: fixed; inset: 0; z-index: 85; background: #000000b3; display: flex; overflow-y: auto; overscroll-behavior: contain;
  padding: max(8px, env(safe-area-inset-top)) 8px max(8px, env(safe-area-inset-bottom)); box-sizing: border-box; }
.dp-panel { --u: min(var(--m, calc(100vw / 1440)), calc((var(--vvh, 100vh) - 24px) / (var(--ph) + 60)), calc((100vw - 16px) / (var(--pw) + 60)));
  position: relative; flex: none; margin: auto; width: calc(var(--u) * var(--pw)); height: calc(var(--u) * var(--ph)); border-radius: calc(var(--u) * 20);
  background: #01a7f9; box-shadow: 0 0 0 calc(var(--u) * 6) #000, inset 0 calc(var(--u) * -30) 0 #0259bc;
  animation: dpIn .3s cubic-bezier(.2, 1.3, .4, 1) both; }
.dp-panel.still { animation: none; }
@keyframes dpIn { from { transform: scale(.86); opacity: 0 } }
.dp-ab { position: absolute; box-sizing: border-box; margin: 0; left: calc(var(--u) * var(--x)); top: calc(var(--u) * var(--y)); width: calc(var(--u) * var(--w)); height: calc(var(--u) * var(--h)); }
.dp-t { display: flex; align-items: center; justify-content: center; margin: 0; font: 700 calc(var(--u) * var(--fs, 40))/1 var(--font-ui); color: #fff; letter-spacing: 0; white-space: nowrap;
  -webkit-text-stroke: calc(var(--u) * var(--sw, 4) * 2) #000; paint-order: stroke fill; font-variant-numeric: tabular-nums; }
.dp-title { color: #fffb0c; }
.dp-dn, .dp-rw { color: #0098e2; }
.dp-mt.long { --fs: 30 !important; }
/* the cards: white → sky, a 4 px outline; claimed ones fade to 40 % with the blue check */
.dp-day, .dp-mis { border-radius: calc(var(--u) * 20); background: linear-gradient(#fff, #9de4fd); box-shadow: 0 0 0 calc(var(--u) * 4) #000; }
.dp-day.got, .dp-mis.got, .dp-strip.got { opacity: .4; }
.dp-day.today { cursor: pointer; }
.dp-head { border-radius: calc(var(--u) * 10); background: #a3daff; }
.dp-mis > .dp-inner { border-radius: calc(var(--u) * 10); background: #9ee4fd; }
.dp-line { transform: translateX(-50%); display: flex; align-items: center; gap: calc(var(--u) * 11); }
.dp-line img { width: calc(var(--u) * 80); height: calc(var(--u) * 80); object-fit: contain; }
.dp-line.balls img { width: calc(var(--u) * 79); }
.dp-check svg { display: block; width: 100%; height: 100%; overflow: visible; }
.dp-check path { fill: none; stroke: #0098e2; stroke-width: 13.18; stroke-linecap: round; stroke-linejoin: round; }
/* the mission's progress: a black track (5 px outline), the blue fill, the count over it */
.dp-bar { border-radius: calc(var(--u) * 28); background: #000; box-shadow: 0 0 0 calc(var(--u) * 5) #000; overflow: hidden; }
.dp-bar i { display: block; height: 100%; border-radius: calc(var(--u) * 28); background: linear-gradient(#5abffb, #2788e4); }
/* the mock's buttons: a black outline, a light top edge, a dark foot */
.dp-btn { display: flex; align-items: center; justify-content: center; padding: 0; border: 0; cursor: pointer; touch-action: manipulation; font: inherit;
  border-radius: calc(var(--u) * 15); box-shadow: 0 0 0 calc(var(--u) * 5) #000, inset 0 calc(var(--u) * -15) 0 var(--dk), inset 0 calc(var(--u) * 10) 0 #fff;
  transition: transform .06s, filter .06s; }
.dp-btn:active { transform: translateY(calc(var(--u) * 4)); filter: brightness(.92); }
.dp-btn:focus-visible { outline: calc(var(--u) * 8) solid #fff; outline-offset: calc(var(--u) * 4); }
.dp-btn.green { background: linear-gradient(#50de06, #0ec12a); --dk: #038623; }
.dp-btn.red { background: linear-gradient(#ff6060, #c40000); --dk: #780000; }
.dp-btn > b.dp-t { margin-top: calc(var(--u) * -4); }
.dp-x svg { width: 100%; height: 100%; }
.dp-x rect { fill: #fff; } .dp-x rect.o { fill: none; stroke: #000; stroke-width: 8; }
.dp-go { border-radius: 50%; background: linear-gradient(#e8f4ff, #9ad2ff); box-shadow: 0 0 0 calc(var(--u) * 6) #000, inset 0 calc(var(--u) * 14) 0 #fff; }
/* DAY 7 / the missions bonus: a purple strip, the darker band with rays (white, 15 %) from the prize */
.dp-strip { border-radius: calc(var(--u) * 20); background: #d677ff; box-shadow: 0 0 0 calc(var(--u) * 6) #000, inset 0 calc(var(--u) * -30) 0 #561097; }
.dp-strip > .dp-inner { border-radius: calc(var(--u) * 20); background: #a545ff; }
.dp-rays { border-radius: calc(var(--u) * 20); opacity: .15; pointer-events: none;
  background: repeating-conic-gradient(from 3deg at 50% 36%, #fff 0deg 8deg, transparent 8deg 20deg);
  -webkit-mask-image: linear-gradient(90deg, transparent 6%, #000 22%, #000 78%, transparent 94%); mask-image: linear-gradient(90deg, transparent 6%, #000 22%, #000 78%, transparent 94%); }
.dp-strip img { object-fit: contain; }
body:has(.dp-layer) .perch { display: none; }   /* (the Home alert pill waits under a daily popup, src/perch.js) */
@media (prefers-reduced-motion: reduce) { .dp-panel { animation: none; } }

/* ---- 12 Nov (QA): the Slots Full choice on the results view. It ran off the right edge (a width: 100% from the
   old card on top of the left/right insets), let the reward cards' text show through, and its buttons had no
   face. A solid panel inside the frame, one button a row, text sized to the view. ---- */
.race-stage .race-result .fres .rs-actions .rs-decide { left: calc(var(--m) * 70); right: calc(var(--m) * 70); width: auto; box-sizing: border-box; z-index: 3;
  gap: calc(var(--m) * 16); padding: calc(var(--m) * 30) calc(var(--m) * 34); background: #0b2350; box-shadow: 0 calc(var(--m) * 10) calc(var(--m) * 40) #0009; text-align: center; }
.race-stage .race-result .fres .rs-decide > b { font-size: calc(var(--m) * 60); line-height: 1; color: #ffd23a; }
.race-stage .race-result .fres .rs-decide > small { font-size: calc(var(--m) * 32); line-height: 1.25; color: #cfe0ff; max-width: 100%; white-space: normal; -webkit-text-stroke: 0; text-shadow: none; }
.race-stage .race-result .fres .rs-decide .rs-swap { display: flex; flex-direction: column; flex-wrap: nowrap; gap: calc(var(--m) * 16); width: 100%; }
.race-stage .race-result .fres .rs-decide .btn { position: static; flex: none; width: 100%; box-sizing: border-box; margin: 0; display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: calc(var(--m) * 6) calc(var(--m) * 14); min-height: calc(var(--m) * 120); padding: calc(var(--m) * 14) calc(var(--m) * 30) calc(var(--m) * 24); font-size: calc(var(--m) * 42); line-height: 1.05; white-space: normal;
  border: calc(var(--m) * 5) solid #000 !important; border-image: none !important; border-radius: calc(var(--m) * 28) !important; color: #fff;
  background: linear-gradient(#4db4ff, #1a73e0) !important; box-shadow: inset 0 calc(var(--m) * -10) 0 #0003, 0 calc(var(--m) * 6) 0 #000 !important; }   /* (a drawn face: the kit's 9-slice does not stretch to a full-width row here) */
.race-stage .race-result .fres .rs-decide .btn.gold { background: linear-gradient(#ffe066, #ffb300) !important; }
.race-stage .race-result .fres .rs-decide .btn.grey { background: linear-gradient(#e2e6ee, #9aa4b8) !important; }
.race-stage .race-result .fres .rs-decide .btn > img { width: calc(var(--m) * 64); height: auto; margin: 0; flex: none; }
.race-stage .race-result .fres .rs-decide .btn .g-chip { font-size: calc(var(--m) * 30); padding: calc(var(--m) * 4) calc(var(--m) * 14); white-space: nowrap; }
.race-stage .race-result .fres .rs-decide .btn .g-chip img { width: calc(var(--m) * 30) !important; }
.race-stage .race-result .fres .rs-decide .btn .rs-need { flex-basis: 100%; font-size: calc(var(--m) * 24); }

/* ---- 12 Nov (QA): popup cards ---- */
/* a scrolling card's title stays on top (arcade.css): it had no face, so the text under it showed through
   (REWARDS & ODDS). The title bar carries the card's blue. */
.card:not(.navy) > header { background: #01a7f9 !important; margin: -2px -2px 0; }
/* two buttons side by side (EDIT PROFILE's CHANGE BIRD, the checkout's REOPEN CHECKOUT): long labels ran out of
   their button. Less side padding, a size that fits two lines, text centred in the face. */
.card .g-row > .btn.grow { padding: 10px 8px 14px; font-size: clamp(15px, 4.6vw, 20px); line-height: 1.08; white-space: normal; text-align: center;
  display: inline-flex; align-items: center; justify-content: center; min-height: 58px; -webkit-text-stroke-width: 3.5px; }
.card .g-row { align-items: stretch; }
/* Rewards & Odds: a long pocket name sat under its % pill, and the coin in the note had no size */
.odds-card .br-row { grid-template-columns: 34px minmax(64px, 1fr) auto minmax(0, auto); gap: 6px; }
.odds-card .br-row b { line-height: 1.05; }
.odds-card .br-row span { white-space: normal; flex-wrap: wrap; justify-content: flex-end; font-size: 15px; }
/* the bird card's three buttons (EQUIPPED · ★ MASTERY · CUSTOMISE): each label on one line inside its face
   (the star stuck out above MASTERY and CUSTOMISE touched the edge) */
.card.navy .bd-acts { gap: 6px; }
.card.navy .bd-acts .btn.slim.grow { padding: 8px 4px 12px; font-size: clamp(10.5px, 3.3vw, 15px); white-space: nowrap; min-height: 46px; -webkit-text-stroke-width: 3px; gap: 3px; letter-spacing: 0; }
.odds-card p.note img, .card p.note img { width: 16px; height: 16px; vertical-align: -3px; }