/* ============================================================================
   App screens, rebuilt for the web from mobile/src/**.

   The app lays everything out on a 1080-wide canvas and multiplies by px(). Here
   the canvas is literally 1080px and the whole thing is transform-scaled down, so
   every number in this file is the SAME number as in the React Native source and
   can be diffed against it line for line. Do not "tidy" these into round web
   values — that is what breaks fidelity.

   --pw is unitless on purpose: it has to serve both a length (calc(var(--pw)*1px))
   and a bare scale factor (calc(var(--pw)/1080)), and a px value cannot do the second.
   ========================================================================= */

/* Frame width drives everything, because the canvas inside is a fixed 1080 and is simply
   scaled to fit. So the ONLY way to make the app's text bigger without breaking the 1:1
   correspondence with the React Native source is to make the frame bigger.

   The default is deliberately large: in the split rows the phone has unlimited vertical
   room, and that is where a reader actually studies the screen. The hero is the exception —
   it is bound by the viewport height, so a 480px frame (1040px tall) would not fit above
   the fold. Hence .phone.hero, which is SMALLER than the default on purpose. */
.phone{--pw:480;--bez:15;position:relative;flex:none;width:calc(var(--pw)*1px)}
/* The hero frame is the same size as the rest; it earns the height by running off the
   bottom of the section instead of shrinking to fit (see .hero-phone in site.css). */
.phone.hero{--pw:480;--bez:15}
.phone.sm{--pw:300;--bez:10}
/* The split goes single-column at 900, which hands the phone the full width back. */
@media (max-width:1100px){.phone{--pw:400}.phone.hero{--pw:400}.phone.sm{--pw:280}}
@media (max-width:900px){.phone{--pw:440}}
/* On a handset the frame can only ever be as wide as the column allows, so these are
   sized to fill it rather than to a round number: --pad is 20px a side down here, so 330
   clears a 390 viewport and 290 clears a 360 one. Below that the canvas is simply small,
   which is the honest cost of reproducing a 1080-wide screen at 1:1. */
@media (max-width:560px){.phone,.phone.hero{--pw:330;--bez:11}.phone.sm{--pw:280}}
@media (max-width:380px){.phone,.phone.hero{--pw:290;--bez:10}.phone.sm{--pw:250}}

.shell{
  position:relative;padding:calc(var(--bez)*1px);border-radius:calc(var(--pw)*0.115px);
  background:linear-gradient(155deg,#39415C 0%,#1B2032 42%,#2A3149 100%);
  box-shadow:
    0 2px 0 rgba(255,255,255,.10) inset,
    0 40px 90px -30px rgba(0,0,0,.85),
    0 0 0 1px rgba(255,255,255,.06);
}
.screen{
  position:relative;overflow:hidden;
  width:calc((var(--pw) - var(--bez)*2)*1px);
  height:calc((var(--pw) - var(--bez)*2) * 2340 / 1080 * 1px);
  border-radius:calc(var(--pw)*0.093px);
  background:#0B1020;
}
/* the canvas the app draws on, 1:1 with mobile/src/theme.ts */
.canvas{
  position:absolute;top:0;left:0;width:1080px;height:2340px;
  transform:scale(calc((var(--pw) - var(--bez)*2)/1080));
  transform-origin:top left;
  font-family:var(--body);color:var(--ink);line-height:1.2;
}
/* the notch/pill — cosmetic frame furniture, not part of the app canvas */
.shell::after{
  content:"";position:absolute;top:calc(var(--bez)*1px + 9px);left:50%;transform:translateX(-50%);
  width:calc(var(--pw)*0.09px);height:calc(var(--pw)*0.026px);border-radius:99px;
  background:rgba(0,0,0,.72);z-index:3;
}

/* ---------- ground: TONES from ui.tsx ------------------------------------- */
.canvas::before{content:"";position:absolute;inset:0;background:var(--tone)}
.t-home    {--tone:radial-gradient(120% 70% at 50%  8%,#1E2A47 0%,#131B30 42%,#0B1020 100%)}
.t-quiz    {--tone:radial-gradient(110% 55% at 50%  4%,#23304F 0%,#141C33 46%,#0B1020 100%)}
.t-results {--tone:radial-gradient( 90% 50% at 50% 26%,#3A2A46 0%,#1A1E38 44%,#0B1020 100%)}
.t-duel    {--tone:radial-gradient( 90% 46% at 50% 22%,#3B2E6E 0%,#1B1B3A 46%,#0B1020 100%)}
.t-list    {--tone:radial-gradient(100% 46% at 50%  0%,#222A45 0%,#131A2E 46%,#0B1020 100%)}
.t-levels  {--tone:radial-gradient(110% 46% at 50%  0%,#24304F 0%,#141C33 46%,#0B1020 100%)}

/* LatitudeRings — three circles bleeding off the top, decorative only */
.lat{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.lat i{position:absolute;left:50%;border:1px solid rgba(255,255,255,.05);border-radius:50%}
.lat i:nth-child(1){width:1400px;height:1400px;margin-left:-700px;top:-420px}
.lat i:nth-child(2){width:1100px;height:1100px;margin-left:-550px;top:-270px}
.lat i:nth-child(3){width:800px;height:800px;margin-left:-400px;top:-120px}

/* Glow — the painted bloom. --g is the colour, --o the peak opacity, --e the fade edge. */
.g{position:absolute;left:50%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;
   background:radial-gradient(circle,rgb(var(--g)/var(--o)) 0%,rgb(var(--g)/0) calc(var(--e)*100%))}
.g-primary{--g:240 130 79}
.g-star{--g:245 196 81}
.g-duel{--g:139 107 255}
.g-correct{--g:63 208 138}

/* The app's safe-area top inset, so the canvas starts where it does on a phone. A flex
   column, because every screen below ends on a CTA the app pushes to the bottom with a
   flexGrow spacer — height:100% on the child would overflow by the inset instead. */
.pad{position:absolute;inset:0;padding-top:96px;display:flex;flex-direction:column}
.pad > *{flex:1;display:flex;flex-direction:column;min-height:0}
/* the app's own flexGrow:1 spacers */
.sp{flex:1;min-height:24px}

/* ---------- shared atoms -------------------------------------------------- */
.row{display:flex;align-items:center}
.col{display:flex;flex-direction:column}
.grow{flex:1}
.qb{font-family:var(--display);font-weight:700}
.qs{font-family:var(--display);font-weight:600}
.ns{font-family:var(--body);font-weight:400}
.nsb{font-family:var(--body);font-weight:600}
.nb{font-family:var(--body);font-weight:700}
.nxb{font-family:var(--body);font-weight:800}

.glass{background:var(--surface);border:1px solid var(--hairline)}
.glass-s{background:var(--surface-strong);border:1px solid var(--hairline-strong)}
.glass-r{background:var(--surface-raised);border:1px solid var(--hairline-raised)}
.sunk{background:var(--surface-sunk);border:1px solid var(--hairline)}

/* eyebrow chip (index.tsx) */
.chip{display:inline-flex;align-items:center;gap:12px;background:var(--surface-raised);
  border:1px solid var(--hairline-raised);border-radius:999px;padding:14px 32px;
  font-family:var(--display);font-weight:700;font-size:34px;letter-spacing:5px;color:var(--primary-lift);line-height:1}

/* Ring — conic fill under a radial mask, same geometry as ui.tsx <Ring> */
.ring{position:relative;display:grid;place-items:center;border-radius:50%}
.ring::before{
  content:"";position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(var(--rc) calc(var(--frac)*360deg),var(--rt) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - var(--rw)),#000 calc(100% - var(--rw)));
          mask:radial-gradient(farthest-side,transparent calc(100% - var(--rw)),#000 calc(100% - var(--rw)));
}

/* Star — the real STAR_PATH from ui.tsx, stroked exactly as the app strokes it */
.st{display:block;overflow:visible}
.st .se{fill:rgba(255,255,255,.14);stroke:rgba(255,255,255,.14);stroke-width:3.5;stroke-linejoin:round}
.st .sf{fill:var(--star);stroke:var(--star);stroke-width:3.5;stroke-linejoin:round}
.st.empty .sf{display:none}
.st.half .sf{clip-path:url(#halfstar)}
.stars{display:flex;gap:22px}

/* GlobeDisc — the crop from index.tsx: image 480*k, left -50*k, top -68*k on a k=size/380 */
.globe{position:relative;overflow:hidden;border-radius:50%;background:#0E1526;flex:none}
.globe img{position:absolute;max-width:none}

/* Btn (ui.tsx) */
.b{display:flex;align-items:center;justify-content:center;border-radius:999px;
  font-family:var(--display);font-weight:700;font-size:46px;height:126px;color:#fff}
.b-primary{background:linear-gradient(135deg,#F0824F,#D4602C)}
.b-secondary{background:transparent;border:2px solid var(--hairline-raised);color:var(--ink)}
.b-ghost{background:transparent;color:var(--ink3)}
.b-duel{background:linear-gradient(135deg,#8B6BFF,#5B3FB8)}

/* ============================================================================
   HOME — mobile/src/app/index.tsx (returning-player branch)
   ========================================================================= */
.s-home{padding:24px 64px 72px}
.s-home .top{display:flex;align-items:center;gap:16px;flex:none}
.s-home .pill{display:flex;align-items:center;gap:10px;border-radius:999px;padding:16px 30px;
  font-family:var(--display);font-weight:700;font-size:38px;line-height:1}
.s-home .pill.medal{background:var(--surface-raised);border:1px solid var(--hairline-strong);color:var(--ink)}
.s-home .pill.flame{background:rgba(240,130,79,.16);border:1px solid rgba(240,130,79,.45);color:var(--primary-lift)}
.s-home .hero{margin-top:40px;display:flex;flex-direction:column;align-items:center;position:relative;flex:none}
.s-home h2{margin-top:28px;font-family:var(--display);font-weight:700;font-size:76px;color:var(--ink);line-height:1}
.s-home .sub{margin-top:10px;font-family:var(--display);font-weight:700;font-size:40px;color:var(--star)}
.s-home .chips{margin-top:22px;display:flex;gap:16px}
.s-home .statchip{display:flex;align-items:center;gap:12px;background:var(--surface-strong);
  border:1px solid var(--hairline-strong);border-radius:999px;padding:14px 26px;
  font-size:38px;font-family:var(--body);font-weight:600;color:var(--ink2);white-space:nowrap}
.s-home .statchip b{font-family:var(--display);font-weight:700;font-size:42px;color:var(--ink)}
.s-home .cards{margin-top:44px;display:flex;flex-direction:column;gap:24px;flex:none}

.c-daily{border-radius:44px;padding:40px;display:flex;align-items:center;
  background:linear-gradient(135deg,#F0824F,#D4602C)}
.c-daily .em{font-size:56px;margin-right:26px;line-height:1}
.c-daily h3{font-family:var(--display);font-weight:700;font-size:48px;color:#fff;line-height:1.1}
.c-daily .l2{margin-top:6px;font-family:var(--body);font-weight:600;font-size:42px;color:#FFE3D2}
.c-daily .car{font-family:var(--display);font-weight:700;font-size:56px;color:#fff}

.c-duel{position:relative;overflow:hidden;border-radius:44px;padding:40px;display:flex;align-items:center;
  background:linear-gradient(135deg,rgba(139,107,255,.28),rgba(91,63,184,.28));
  border:1px solid rgba(139,107,255,.50)}
.c-duel .em{font-size:56px;margin-right:26px;line-height:1}
.c-duel h3{font-family:var(--display);font-weight:700;font-size:48px;color:#fff;line-height:1.1}
.c-duel .l2{margin-top:6px;font-family:var(--body);font-weight:600;font-size:42px;color:var(--duel-ink)}
.c-duel .car{font-family:var(--display);font-weight:700;font-size:56px;color:var(--duel-ink)}
/* the light sweep from ChallengeCard */
.c-duel .sweep{position:absolute;top:-60px;bottom:-60px;width:240px;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);
  animation:sweep 4s linear infinite}
@keyframes sweep{
  0%{transform:translateX(-240px) rotate(-12deg)}
  37%{transform:translateX(950px) rotate(-12deg)}
  100%{transform:translateX(950px) rotate(-12deg)}
}
@media (prefers-reduced-motion:reduce){.c-duel .sweep{animation:none;opacity:0}}

.c-cont{border-radius:44px;padding:32px 40px;display:flex;align-items:center}
.c-cont .flag{width:108px;height:72px;border-radius:14px;object-fit:cover;flex:none}
.c-cont .k{font-family:var(--body);font-weight:600;font-size:32px;color:var(--primary);letter-spacing:3px}
.c-cont .n{margin-top:6px;font-family:var(--display);font-weight:700;font-size:44px;color:var(--ink)}
.c-cont .car{font-family:var(--display);font-weight:700;font-size:52px;color:var(--ink2)}

.c-cotd{border-radius:36px;padding:24px 32px;display:flex;align-items:center;gap:22px}
.c-cotd img{width:72px;height:48px;border-radius:8px;object-fit:cover;flex:none}
.c-cotd span{flex:1;font-family:var(--body);font-weight:600;font-size:42px;color:var(--ink2)}
.c-cotd span b{font-family:var(--display);font-weight:700;color:var(--ink)}
.c-cotd .car{font-family:var(--display);font-weight:700;font-size:40px;color:var(--primary)}

/* ============================================================================
   QUIZ — mobile/src/app/quiz/[code]/[level].tsx
   ========================================================================= */
.s-quiz{padding:24px 64px 80px}
.s-quiz .top{display:flex;align-items:center;gap:24px}
.s-quiz .x{width:96px;height:96px;border-radius:48px;background:var(--surface-raised);
  border:1px solid var(--hairline-raised);display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:52px;color:var(--ink);flex:none}
.s-quiz .segs{flex:1;display:flex;gap:8px}
.s-quiz .segs i{flex:1;height:12px;border-radius:6px;background:var(--hairline-strong)}
.s-quiz .segs i.ok{background:var(--correct)}
.s-quiz .segs i.no{background:var(--wrong)}
.s-quiz .segs i.now{background:var(--primary)}
.s-quiz .run{background:rgba(240,130,79,.18);border:1px solid rgba(240,130,79,.50);border-radius:999px;
  padding:16px 32px;font-family:var(--display);font-weight:700;font-size:34px;color:var(--primary-lift);flex:none}
.s-quiz .mid{margin-top:52px;display:flex;flex-direction:column;align-items:center;position:relative}
.s-quiz .timer{--rw:18px;--rc:#F0824F;--rt:rgba(255,255,255,.14);width:172px;height:172px}
.s-quiz .timer .face{width:136px;height:136px;border-radius:68px;background:var(--well);
  display:flex;flex-direction:column;align-items:center;justify-content:center}
.s-quiz .timer .num{font-family:var(--display);font-weight:700;font-size:56px;line-height:60px;color:var(--ink)}
.s-quiz .timer .num i{font-style:normal;font-size:30px;color:var(--ink2)}
.s-quiz .timer .lbl{margin-top:4px;font-family:var(--display);font-weight:700;font-size:20px;
  color:var(--ink3);letter-spacing:3px}
.s-quiz .cat{margin-top:40px;display:inline-flex;align-items:center;gap:16px;background:var(--surface-raised);
  border:1px solid var(--hairline-raised);border-radius:999px;padding:14px 34px;
  font-family:var(--display);font-weight:700;font-size:30px;letter-spacing:3px;color:var(--primary-lift)}
.s-quiz .q{margin-top:44px;font-family:var(--display);font-weight:600;font-size:62px;line-height:80px;
  color:var(--ink);text-align:center}
.s-quiz .answers{flex:1;margin-top:40px;display:flex;flex-direction:column;justify-content:flex-end;gap:26px}
.s-quiz .a{position:relative;background:var(--surface-strong);border:1px solid var(--hairline-strong);
  border-radius:32px;padding:42px 48px;display:flex;align-items:center;
  font-family:var(--body);font-weight:700;font-size:42px;line-height:55px;color:#E6EBF7}
.s-quiz .a.ok{background:var(--correct-bg);border:2px solid var(--correct);color:var(--correct-ink);font-weight:800}
.s-quiz .a.no{background:var(--wrong-bg);border:2px solid var(--wrong-line);color:var(--wrong-ink);font-weight:800}
.s-quiz .a svg{margin-left:auto;flex:none}

/* ============================================================================
   RESULTS
   ========================================================================= */
.s-res{padding:24px 80px 80px;align-items:center;position:relative}
.s-res .band{background:var(--correct-bg);border:1px solid var(--correct-line);border-radius:999px;
  padding:22px 56px;font-family:var(--display);font-weight:700;font-size:44px;color:var(--correct-ink)}
.s-res .where{margin-top:28px;font-family:var(--body);font-weight:600;font-size:40px;color:var(--ink2);text-align:center}
.s-res .stars{margin-top:60px}
.s-res .score{margin-top:56px;font-family:var(--display);font-weight:700;font-size:220px;line-height:230px;color:var(--ink)}
.s-res .score i{font-style:normal;font-size:96px;color:var(--ink-ghost)}
.s-res .table{margin-top:44px;align-self:stretch;background:var(--surface);border:1px solid var(--hairline);
  border-radius:40px;padding:8px 40px}
.s-res .table div{display:flex;justify-content:space-between;align-items:center;padding:28px 0;
  border-bottom:1px solid rgba(255,255,255,.08)}
.s-res .table div:last-child{border-bottom:0}
.s-res .table span{font-family:var(--body);font-weight:600;font-size:34px;color:var(--ink2)}
.s-res .table b{font-family:var(--display);font-weight:700;font-size:44px}
.s-res .pills{margin-top:28px;display:flex;flex-wrap:wrap;justify-content:center;gap:14px}
.s-res .pills i{font-style:normal;background:var(--star-bg);border:1px solid var(--star-line);border-radius:999px;
  padding:14px 30px;font-family:var(--display);font-weight:700;font-size:32px;color:var(--star)}
.s-res .near{margin-top:36px;background:rgba(240,130,79,.12);border:1px solid rgba(240,130,79,.40);
  border-radius:999px;padding:20px 40px;font-family:var(--display);font-weight:700;font-size:40px;color:var(--primary-lift)}

/* ============================================================================
   PASSPORT — stamps are the shipped flags inside a tier-coloured ring
   ========================================================================= */
.s-pass{padding:24px 0 0;overflow:hidden}
.s-pass .hd{padding:0 64px;display:flex;align-items:center;gap:28px}
.s-pass h2{font-family:var(--display);font-weight:700;font-size:64px;color:var(--ink);line-height:1.05}
.s-pass .hd p{font-family:var(--body);font-weight:600;font-size:32px;color:var(--ink2)}
.s-pass .legend{margin:44px 64px 0;background:var(--surface);border:1px solid var(--hairline);
  border-radius:36px;padding:32px 40px;display:flex;justify-content:space-between}
.s-pass .legend span{display:flex;align-items:center;gap:12px;font-family:var(--body);font-weight:600;
  font-size:28px;color:var(--ink2)}
.s-pass .legend i{width:22px;height:22px;border-radius:11px;display:block}
.s-pass .grp{margin-top:44px;padding:0 56px}
.s-pass .grp .hh{display:flex;align-items:center;gap:20px;margin-bottom:26px}
.s-pass .grp .hh b{border-radius:999px;padding:12px 30px;font-family:var(--display);font-weight:700;
  font-size:30px;letter-spacing:2px}
.s-pass .grp .hh span{font-family:var(--body);font-weight:600;font-size:30px;color:var(--ink3)}
.s-pass .wall{display:flex;flex-wrap:wrap;gap:24px}
.s-pass .stamp{width:152px;display:flex;flex-direction:column;align-items:center;position:relative}
.s-pass .disc{width:140px;height:140px;border-radius:70px;overflow:hidden;background:#0E1526;
  display:grid;place-items:center}
.s-pass .disc img{width:140px;height:140px;object-fit:cover}
.s-pass .stamp .nm{width:152px;text-align:center;margin-top:12px;font-family:var(--body);font-weight:600;
  font-size:26px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* tiers, from passport.tsx RING */
.tier-ghost  .disc{border:4px dashed rgba(255,255,255,.16)}
.tier-ghost  .disc img{opacity:.18}
.tier-faint  .disc{border:7px solid #CFC3AC}
.tier-faint  .disc img{opacity:.6}
.tier-inked  .disc{border:7px solid #F0824F}
.tier-bronze .disc{border:7px solid #C88A3E}
.tier-silver .disc{border:7px solid #A9AEB8}
.tier-gold   .disc{border:7px solid #E8B23A}

/* ============================================================================
   COUNTRIES list
   ========================================================================= */
.s-list{padding:24px 64px 0;overflow:hidden}
.s-list .hd{display:flex;align-items:center}
.s-list h2{margin-left:36px;font-family:var(--display);font-weight:700;font-size:64px;color:var(--ink)}
.s-list .search{margin-top:36px;background:var(--surface-strong);border:1px solid var(--hairline-strong);
  border-radius:999px;padding:30px 44px;display:flex;align-items:center;gap:24px;
  font-family:var(--body);font-weight:600;font-size:40px;color:var(--ink-ghost)}
.s-list .ch{align-self:flex-start;display:inline-block;margin:36px 0 20px;border-radius:999px;
  padding:12px 30px;font-family:var(--display);font-weight:700;font-size:30px;letter-spacing:2px}
.s-list .r{border-radius:32px;padding:22px 40px;margin-bottom:18px;display:flex;align-items:center}
.s-list .r img{width:120px;height:80px;border-radius:12px;object-fit:cover;flex:none}
.s-list .r .n{flex:1;margin:0 16px 0 36px;font-family:var(--body);font-weight:700;font-size:42px;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.s-list .r .sc{display:flex;align-items:center;gap:12px;font-family:var(--display);font-weight:700;
  font-size:38px;color:var(--star)}
.s-list .r .tag{border-radius:999px;padding:12px 36px;font-family:var(--display);font-weight:700;font-size:32px;
  letter-spacing:1px;background:rgba(240,130,79,.18);border:1px solid rgba(240,130,79,.55);color:var(--primary-lift)}

/* ============================================================================
   DUEL room — mobile/src/app/duel/[room].tsx (waiting state)
   ========================================================================= */
.s-duel{padding:24px 64px 80px;align-items:center;position:relative}
.s-duel .code{align-self:stretch;background:var(--surface-strong);border:1px solid var(--hairline-raised);
  border-radius:36px;padding:30px 40px 34px;display:flex;flex-direction:column;align-items:center}
.s-duel .code .k{font-family:var(--display);font-weight:700;font-size:28px;color:var(--duel-ink);letter-spacing:5px}
.s-duel .code .v{margin-top:12px;display:flex;align-items:center;justify-content:center;gap:28px}
.s-duel .code .v b{font-family:var(--display);font-weight:700;font-size:112px;line-height:124px;color:var(--ink);
  letter-spacing:14px;margin-left:14px}
.s-duel .code .h{margin-top:10px;font-family:var(--body);font-weight:600;font-size:28px;color:var(--ink3)}
.s-duel .vs{margin-top:56px;align-self:stretch;display:flex;align-items:center;gap:24px}
.s-duel .seat{flex:1;background:var(--surface);border:1px solid var(--hairline);border-radius:36px;
  padding:34px 20px;display:flex;flex-direction:column;align-items:center;gap:14px}
.s-duel .av{width:120px;height:120px;border-radius:60px;display:grid;place-items:center;
  font-family:var(--display);font-weight:700;font-size:52px;color:#fff}
.s-duel .av.me{background:linear-gradient(135deg,#F0824F,#D4602C)}
.s-duel .av.op{background:linear-gradient(135deg,#8B6BFF,#5B3FB8)}
.s-duel .av.wait{background:var(--surface-raised);border:2px dashed var(--hairline-raised);color:var(--ink3)}
.s-duel .seat .who{font-family:var(--display);font-weight:700;font-size:34px;color:var(--ink)}
.s-duel .seat .st{font-family:var(--body);font-weight:600;font-size:26px;color:var(--ink3)}
.s-duel .x{font-family:var(--display);font-weight:700;font-size:44px;color:var(--ink3);flex:none}
.s-duel .stake{margin-top:44px;display:flex;align-items:center;gap:14px;background:var(--star-bg);
  border:1px solid var(--star-line);border-radius:999px;padding:18px 40px;
  font-family:var(--display);font-weight:700;font-size:34px;color:var(--star)}
.s-duel .rules{margin-top:36px;font-family:var(--body);font-size:32px;line-height:48px;color:var(--ink2);
  text-align:center;max-width:820px}

/* results CTA stack — the app's own gap:22 column */
.s-res .ctas{align-self:stretch;display:flex;flex-direction:column;gap:22px;flex:none}

/* BackButton (ui.tsx) — a real class, rather than borrowing the quiz screen's × disc */
.bk{width:96px;height:96px;border-radius:48px;background:var(--surface-raised);
  border:1px solid var(--hairline-raised);display:grid;place-items:center;line-height:1;
  font-family:var(--display);font-weight:700;font-size:48px;color:var(--ink);flex:none}
/* an answer card and the bloom it casts — the app keeps the Glow OUTSIDE the card, because
   a card that paints a background would otherwise cover its own glow completely */
.awrap{position:relative;display:flex;flex-direction:column}
.awrap > .g{z-index:0}
.awrap > .a{position:relative;z-index:1}
.s-duel .dhd{align-self:stretch;display:flex;align-items:center;gap:36px;flex:none}
.s-duel .dhd h2{font-family:var(--display);font-weight:700;font-size:64px;color:var(--ink)}
.s-home .hero-note{display:none}

/* Rows the app clamps with numberOfLines={1}. Without this a longer country or theme
   name wraps here and nowhere else, which is the sort of drift that only shows up on
   the one screenshot nobody re-checked. */
.c-daily .l2,.c-duel .l2,.c-cont .n,.c-cotd span,.s-list .r .n,.s-pass .stamp .nm{
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}