/* Reign FFL — app-preview shared foundation. Real DESIGN tokens (dark).
   Loaded by every screen page. Phone frame + bottom tab bar + primitives. */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:wght@600;700&family=Inter:wght@400;600;700&family=JetBrains+Mono:wght@400;700&family=Archivo+Black&display=swap');

:root{
  /* real DESIGN_DARK tokens */
  --cream:#0D1120; --paper:#151B2E; --field:#1A2035; --ink:#F0EDE6; --mute:#A4AFC6;
  --hair:rgba(240,237,230,.10); --hair2:rgba(240,237,230,.06); --hairDark:rgba(240,237,230,.14);
  --live:#1E5631; --liveDot:#22C55E; --liveBg:rgba(30,86,49,.10);
  --warn:#E6B43A; --warnBright:#F5C242; --warnBg:rgba(230,180,58,.12); --warnBorder:rgba(230,180,58,.45);
  --bad:#C62828; --badBg:rgba(198,40,40,.10);
  --goldInk:#F5C242; --link:#3B82F6;
  --cardLift:#243060; --cardLiftBorder:rgba(255,255,255,.11); --well:#1A2540;
  --greenInk:#5BE0A8; --winInk:#5FCB7A; --lossInk:#E26B6B;
  --boardCell:#1C2340; --rowNeutral:#16181F;
  /* gradients */
  --g-gold:linear-gradient(180deg,#FFDE7A,#E0A92E);
  --g-wordmark:linear-gradient(180deg,#FFE39A,#F5C242,#E0A92E);
  --g-blueBtn:linear-gradient(180deg,#2E6FBF,#1B3FA6);
  --g-warmSteel:linear-gradient(180deg,#C9BCA6,#9C8E78);
  --g-greenBid:linear-gradient(180deg,#2E8B57,#1E5631);
  --g-silver:linear-gradient(180deg,#E8E8E8,#C0C0C0 40%,#A8A8A8);
  --g-bronze:linear-gradient(180deg,#D4956A,#A0622A 45%,#8B4A18);
  --g-goldRow:linear-gradient(180deg,#F7D873,#E0A92E);
  --g-timerNavy:linear-gradient(180deg,#1C2236,#141A2B);
  --g-navy:linear-gradient(180deg,#1A2540,#10182C);
  /* radii + spacing (real) */
  --r-btn:10px; --r-surface:12px; --r-card:14px; --r-pill:17px; --r-pillSm:10px;
  /* type */
  --f-display:'Barlow Condensed',system-ui,sans-serif;
  --f-body:'Inter',system-ui,sans-serif;
  --f-mono:'JetBrains Mono',ui-monospace,monospace;
  --f-heavy:'Archivo Black',system-ui,sans-serif;
}
:root[data-theme="light"]{
  --cream:#F4F6FB; --paper:#FFFFFF; --field:#EEF1F7; --ink:#141C2B; --mute:#556788;
  --hair:rgba(13,27,75,.10); --hair2:rgba(13,27,75,.05); --hairDark:rgba(13,27,75,.14);
  --goldInk:#8A6410; --link:#2C55C0; --cardLift:#FFFFFF; --cardLiftBorder:#E3E9F5; --well:#EEF1F7;
  --greenInk:#12805a; --winInk:#1a9459; --lossInk:#c0392b; --boardCell:#FFFFFF; --rowNeutral:#FFFFFF;
  --warnBg:rgba(230,180,58,.16);
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;height:100%;}
body{background:#05070d;color:var(--ink);font-family:var(--f-body);-webkit-font-smoothing:antialiased;
  display:flex;align-items:center;justify-content:center;min-height:100vh;overflow:hidden;}

/* ── phone frame ── */
.phone{position:relative;width:390px;max-width:100vw;height:844px;max-height:100vh;
  background:var(--cream);overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 40px 120px -30px rgba(0,0,0,.9);}
@media(min-width:430px){.phone{border-radius:44px;border:10px solid #0b0d14;height:min(844px,96vh);}}
.notch{position:absolute;top:0;left:50%;transform:translateX(-50%);width:150px;height:26px;background:#0b0d14;
  border-radius:0 0 18px 18px;z-index:60;}
@media(max-width:429px){.notch{display:none;}}
.screen{flex:1;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding-bottom:76px;}
.screen::-webkit-scrollbar{display:none;}

/* ── app header ── */
.appbar{position:sticky;top:0;z-index:40;background:var(--cream);padding:14px 18px 10px;
  border-bottom:1px solid var(--hair);display:flex;align-items:center;gap:10px;}
.appbar.pad{padding-top:34px;}
.appbar h1{font-family:var(--f-display);font-weight:700;font-size:26px;letter-spacing:.02em;margin:0;
  text-transform:uppercase;line-height:1;}
.appbar .sub{font-family:var(--f-mono);font-size:11px;color:var(--mute);letter-spacing:.06em;}
.wordmark{font-family:var(--f-display);font-weight:700;text-transform:uppercase;letter-spacing:.03em;
  background:var(--g-wordmark);-webkit-background-clip:text;background-clip:text;color:transparent;}

/* ── bottom tab bar ── */
.tabbar{position:absolute;bottom:0;left:0;right:0;height:66px;background:var(--paper);
  border-top:1px solid var(--hair);display:flex;z-index:50;padding-bottom:env(safe-area-inset-bottom);}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  text-decoration:none;color:var(--mute);font-size:10px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;}
.tabbar a .ic{font-size:19px;line-height:1;}
.tabbar a.on{color:var(--goldInk);}
.tabbar a.on .ic{filter:drop-shadow(0 0 8px rgba(245,194,66,.45));}

/* ── primitives ── */
.pad{padding:14px 16px;}
.card{background:var(--cardLift);border:1px solid var(--cardLiftBorder);border-radius:var(--r-card);padding:14px;}
.chip{display:inline-flex;align-items:center;gap:5px;font-family:var(--f-mono);font-size:11px;font-weight:700;
  letter-spacing:.05em;padding:4px 10px;border-radius:var(--r-pillSm);text-transform:uppercase;}
.chip.gold{background:var(--g-gold);color:#20160a;} .chip.ghost{background:transparent;border:1px solid var(--hairDark);color:var(--mute);}
.chip.live{background:var(--liveBg);color:var(--liveDot);border:1px solid rgba(34,197,94,.3);}
.btn{appearance:none;border:none;font-family:var(--f-display);font-weight:700;font-size:16px;letter-spacing:.04em;
  text-transform:uppercase;padding:14px;border-radius:var(--r-btn);cursor:pointer;width:100%;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 6px 16px -8px rgba(0,0,0,.7);}
.btn.blue{background:var(--g-blueBtn);color:#fff;} .btn.gold{background:var(--g-gold);color:#20160a;}
.btn.champ{background:var(--g-warmSteel);color:#241d10;} .btn.green{background:var(--g-greenBid);color:#eafff2;}
.btn:active{transform:translateY(1px);}
.mono{font-family:var(--f-mono);} .tnum{font-variant-numeric:tabular-nums;}
.label{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute);}
.h2{font-family:var(--f-display);font-weight:700;font-size:20px;text-transform:uppercase;letter-spacing:.02em;margin:0;}
.divider{height:1px;background:var(--hair);margin:12px 0;}
.sectionhead{display:flex;align-items:center;justify-content:space-between;padding:16px 16px 8px;}
.sectionhead .t{font-family:var(--f-display);font-weight:700;font-size:15px;letter-spacing:.06em;text-transform:uppercase;color:var(--mute);}

/* generic entrance helpers (rx.js toggles .rx-in) */
.rx-stagger>*{opacity:0;transform:translateY(14px);}
.rx-stagger.rx-in>*{animation:rxrise .45s ease-out forwards;}
@keyframes rxrise{to{opacity:1;transform:translateY(0);}}
.reduce .rx-stagger>*{opacity:1!important;transform:none!important;animation:none!important;}

/* toast */
.toast{position:absolute;left:50%;bottom:84px;transform:translateX(-50%) translateY(20px);opacity:0;
  background:var(--paper);border:1px solid var(--hairDark);color:var(--ink);font-size:13px;font-weight:600;
  padding:11px 18px;border-radius:var(--r-pill);z-index:70;box-shadow:0 10px 30px -10px rgba(0,0,0,.7);pointer-events:none;}
.toast.show{animation:toastin 2.4s ease forwards;}
@keyframes toastin{0%{opacity:0;transform:translateX(-50%) translateY(20px);}12%,80%{opacity:1;transform:translateX(-50%) translateY(0);}100%{opacity:0;transform:translateX(-50%) translateY(8px);}}

/* floating controls (theme + sound), top-right of frame */
.fctl{position:absolute;top:8px;right:10px;z-index:65;display:flex;gap:6px;}
@media(max-width:429px){.fctl{top:auto;bottom:78px;}}
.fctl button{width:34px;height:34px;border-radius:50%;border:1px solid var(--hairDark);background:var(--paper);
  color:var(--ink);font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center;}