/* The sign-in card and the header's Sign in control (account.js draws both). Moved from the parked stage's site.css
   (git tag parked/magic-stage) on 2026-10-10; the card was restyled to the modern look on 2026-10-11. The pages'
   own styles live in night.css (play) and account/page.css (account, checkout). */
@font-face{font-family:"Archivo";src:url("/fonts/Archivo.woff2") format("woff2");font-weight:100 900;font-stretch:62% 125%;font-display:swap}
@font-face{font-family:"Inter";src:url("/fonts/Inter.woff2") format("woff2");font-weight:100 900;font-display:swap}
:root{
  /* the one look (redesign plan 2026-10-14; docs/SCREEN-CONTRACT.md "One look on every page"): night-blue from CRUZ and
     Dogfight's own tints, the wordmark's cream, each game's own colours for accents. Semantic names only. */
  --night:#0d2031;--night-2:#161d36;--paper:#f4ece1;--ink:#16110d;
  --sky:#4fa6d8;--coral:#f2876a;--flag:#f2c230;--gold:#e9b04a;
  /* warnings and Delete only (checkout plan 2026-10-15, Kyle): 4.76:1 as text on night, colour distance 0.13 from coral,
     so an error never reads as Join's coral accent */
  --danger:#ff3b5c;
  /* the page's accent, one colour from the header stripe per page (Kyle 2026-10-15): home follows the featured game
     (night.js sets --g1 on <html>), the rest are set below by data-screen. Mirrored in Paddle's dashboard for /pay/
     (docs/paddle-checkout-settings.md). */
  --accent:var(--g1,var(--sky));
  --muted:color-mix(in srgb,var(--paper) 72%,var(--night));--hair:color-mix(in srgb,var(--paper) 17%,transparent);
  /* the six games' colours in lineup order: the main button's stripe, the strip under the header */
  --all:linear-gradient(90deg,#e9b04a 0 16.67%,#cc0000 0 33.33%,#f2876a 0 50%,#2d6a39 0 66.67%,#4fa6d8 0 83.33%,#ffd23f 0);
  --display:"Archivo",system-ui,sans-serif;--body:"Inter",system-ui,sans-serif;--spring:cubic-bezier(.3,1.42,.55,1);--glide:cubic-bezier(.2,.85,.25,1);
  --vb:58px;--hem:20px;
  --sl:env(safe-area-inset-left,0px);--sr:env(safe-area-inset-right,0px);--st:env(safe-area-inset-top,0px);--sb:env(safe-area-inset-bottom,0px);
  --pw:14px;--dw:clamp(16px,4vw,72px);
}
html[data-screen="join"]{--accent:var(--coral)}
html[data-screen="account"]{--accent:var(--sky)}
html[data-screen="pay"]{--accent:var(--gold)}
html[data-screen="pass"]{--accent:var(--gold)} /* the pass and its checkout read as one money journey (plan 2026-10-15-pass-page) */
/* the page's colour as a bar under the header, drawn over the header's own bottom edge so it takes no space */
html:not([data-screen="play"]) header.top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--accent);pointer-events:none}
html:not([data-screen="play"]) header.top{position:relative}
@media (max-width:619px){:root{--vb:54px;--hem:12px;--pw:6px;--dw:12px}}
@media (max-height:419px){:root{--vb:44px;--hem:8px;--pw:8px;--dw:20px}}

/* ---------- the one button set (every page; the TV page sets --btn-* in --u) ----------
   main: paper with the six-game stripe, a page's one main action. primary: the game or room colour. outline: paper
   outline on night. danger: coral outline. All square-shouldered and flat with one border width (page-check `match`). */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.625rem;min-height:var(--btn-h,3rem);padding:0 var(--btn-px,1.375rem);
  border:var(--btn-b,2px) solid transparent;border-radius:var(--btn-r,.25rem);background:none;cursor:pointer;text-decoration:none;white-space:nowrap;
  font:700 var(--btn-f,1rem)/1 var(--display);font-stretch:108%;color:var(--paper);transition:background .2s,border-color .2s,color .2s,transform .2s var(--glide)}
.btn:active{transform:translateY(1px)}
.btn svg,.btn .i{flex:none;width:1.1em;height:1.1em}
.btn.sm{--btn-h:2.75rem;--btn-px:1rem;--btn-f:.92rem}
.btn.main{overflow:hidden;padding-bottom:.25rem;background:var(--paper);border-color:var(--paper);color:var(--ink)}
.btn.main::after{content:"";position:absolute;left:0;right:0;bottom:0;height:.3125rem;background:var(--all);transition:height .3s var(--glide)}
.btn.main:hover{background:#fff}
.btn.main:hover::after{height:.5rem}
.btn.primary{background:var(--g1,var(--accent));border-color:var(--g2,var(--g1,var(--accent)));color:var(--on,var(--ink))}
.btn.primary:hover{background:color-mix(in srgb,var(--g1,var(--accent)) 86%,#fff)}
.btn.outline{border-color:color-mix(in srgb,var(--paper) 52%,transparent);color:var(--paper)}
.btn.outline:hover{border-color:var(--paper);background:color-mix(in srgb,var(--paper) 9%,transparent)}
.btn.danger{border-color:var(--danger);color:var(--danger)}
.btn.danger:hover{background:var(--danger);color:var(--ink)}
.btn[disabled],.btn[aria-disabled="true"]{opacity:.5;cursor:default;transform:none}
/* the one focus ring: a paper band outside a night gap (the TV page's 10-foot ring, in px here) */
.btn:focus-visible{outline:none;box-shadow:0 0 0 3px var(--night),0 0 0 .375rem var(--paper)}

/* the price coin: the one other shape, used only for Buy (the account page) */
.coin{position:relative;display:grid;place-items:center;align-content:center;gap:1px;width:4.75rem;height:4.75rem;padding:0;border:0;border-radius:50%;cursor:pointer;
  background:var(--coin,var(--g1));color:var(--coin-ink,#fff);font:800 1.1875rem/1 var(--display);font-stretch:86%;rotate:-8deg;
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.92),inset 0 0 0 .25rem rgba(0,0,0,.12),0 2px 2px rgba(0,0,0,.3),0 .625rem 1rem -.5rem rgba(0,0,0,.7);
  transition:rotate .45s var(--spring),scale .45s var(--spring)}
.coin::after{content:"";position:absolute;inset:.25rem;border-radius:50%;background:radial-gradient(circle at 30% 12%,rgba(255,255,255,.08),rgba(255,255,255,0) 26%);pointer-events:none}
.coin b{display:flex;font-weight:800}
.coin .cur{font-size:.62em;align-self:start;margin-top:.2em;margin-right:1px}
.coin .buy{font:700 .8125rem/1 var(--body)}
.coin:hover{rotate:0deg;scale:1.08}
.coin:focus-visible{outline:none;box-shadow:inset 0 0 0 3px rgba(255,255,255,.92),0 0 0 3px var(--night),0 0 0 .375rem var(--paper)}
.coin[disabled]{opacity:.5;cursor:default}

/* the one field */
.fld{width:100%;min-width:0;height:var(--fld-h,3.25rem);padding:0 1rem;border:2px solid color-mix(in srgb,var(--paper) 34%,transparent);border-radius:.25rem;
  background:var(--night-2);color:var(--paper);font:500 1rem/1 var(--body)}
.fld::placeholder{color:color-mix(in srgb,var(--paper) 52%,var(--night-2));opacity:1}
.fld:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 35%,transparent)}

/* Sign in / the codename in the header (account.js draws it as a .btn.outline): only its own layout here */
.who{flex:0 1 auto;min-width:2.75rem;max-width:13.75rem}
.who svg{flex:none;width:1.25rem;height:.9375rem}
.who .wt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
/* signed in: the codename alone (the glyph goes; the name is the pass). A phone: Sign in is the icon alone, and the
   codename keeps at least five letters before the ellipsis. */
html.signed .who svg{display:none}
@media (max-width:429px){
  .who{--btn-px:.625rem}
  html:not(.signed) .who{width:2.75rem;--btn-px:0}
  html:not(.signed) .who .wt{display:none}
  html.signed .who{min-width:3.75rem;max-width:6.875rem}
}

/* ---------- the sign-in flow's panel (account.js draws it in the Join page's #flow; plan 2026-10-12-join-page: the pop-up
   that held it is gone). A dark panel, the page's own accent for the one main action, plain words. */
.card{--cbg:var(--night-2);--cline:var(--hair);--csoft:var(--muted);--cfld:var(--night);
  position:relative;border-radius:.375rem;
  padding:1.25rem clamp(1.125rem,5vw,1.625rem) 1.375rem;background:var(--cbg);border:1px solid var(--cline);box-shadow:0 1.875rem 3.75rem -1.25rem rgba(0,0,0,.9);font-family:var(--body)}
.card .st{display:grid;gap:.875rem}
.card .st[aria-busy="true"]{min-height:7.5rem}
.card .eb{display:flex;justify-content:flex-end;height:0}
.card .close{position:relative;z-index:1;display:grid;place-items:center;width:2.75rem;height:2.75rem;margin:-.625rem -.75rem 0 0;padding:0;border:0;border-radius:50%;background:none;cursor:pointer;color:var(--csoft)}
.card .close svg{width:1rem;height:1rem}
.card .close:hover{color:var(--paper);background:rgba(244,236,225,.08)}
.card .close:focus-visible{outline:none;box-shadow:0 0 0 3px var(--night),0 0 0 .375rem var(--paper)}
.card h2{padding-right:2.25rem;font:800 clamp(1.7rem,6.5vw,2.1rem)/1.02 var(--display);font-stretch:80%;letter-spacing:.005em;color:var(--paper);text-wrap:balance}
.card h2:focus{outline:none}
.card p{font-size:.95rem;line-height:1.45;color:var(--csoft)}
.card p b{color:var(--paper);font-weight:600}
.card .fine{font-size:.82rem;line-height:1.4;color:rgba(244,236,225,.55)}
.card .fl{display:block;margin-bottom:.375rem;font:600 .82rem/1.2 var(--body);color:var(--csoft)}
.card .fld.cn{text-transform:uppercase;font:800 1.05rem/1 var(--display);font-stretch:112%}
.card .fld[aria-invalid="true"],.card .code.bad .cb i{border-color:var(--danger)}
/* the code: ONE input (one tab stop, paste and Mail autofill work), drawn as six boxes */
.card .code{position:relative;width:min(100%,20.625rem)}
.card .code .ci{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:transparent;color:transparent;caret-color:transparent;font-size:1rem;opacity:.01}
.card .cb{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:.4375rem;pointer-events:none}
.card .cb i{display:grid;place-items:center;height:3.375rem;border:2px solid rgba(244,236,225,.22);border-radius:.25rem;background:var(--cfld);font:800 1.5rem/1 var(--display);font-style:normal;color:var(--paper)}
.card .code:focus-within .cb i.at{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 35%,transparent)}
.card .err{font:600 .9rem/1.38 var(--body);color:var(--danger)}
.card .go{display:flex;flex-wrap:wrap;align-items:center;gap:.625rem 1rem}
.card .tl{display:inline-flex;align-items:center;min-height:2.75rem;padding:0;border:0;background:none;cursor:pointer;font:600 .9rem/1.2 var(--body);color:var(--paper);text-decoration:underline;text-decoration-color:color-mix(in srgb,var(--paper) 55%,transparent);text-underline-offset:3px}
.card .tl[aria-disabled="true"]{color:rgba(244,236,225,.5);text-decoration:none;cursor:default}
.card .tl.red{color:var(--danger);text-decoration-color:color-mix(in srgb,var(--danger) 60%,transparent)}
/* the service's answer when it cannot do what you asked, always with the next step */
.card .notice{display:grid;gap:.25rem;padding:.75rem .875rem;border-radius:.625rem;background:color-mix(in srgb,var(--accent) 10%,transparent);border:1px solid color-mix(in srgb,var(--accent) 40%,transparent)}
.card .notice b{font:700 1rem/1.3 var(--body);color:var(--paper)}
.card .notice p{font-size:.9rem}
.card .sugg{display:flex;flex-wrap:wrap;gap:.5rem}
/* Continue with Google: Google's dark button (their G unmodified, #131314 fill, #8E918F edge), as tall as ours */
.card .gbtn{display:flex;align-items:center;justify-content:center;gap:.75rem;min-height:3rem;padding:0 1rem;border:1px solid #8e918f;border-radius:.625rem;
  background:#131314;color:#e3e3e3;text-decoration:none;font:600 1rem/1 var(--body);transition:background .2s}
.card .gbtn:hover{background:#1f1f21}
.card .gbtn:focus-visible{outline:3px solid var(--paper);outline-offset:3px}
.card .gbtn .g{flex:none;width:1.25rem;height:1.25rem}
.card .or{display:flex;align-items:center;gap:.75rem;font-size:.82rem;color:rgba(244,236,225,.5)}
.card .or::before,.card .or::after{content:"";flex:1;height:1px;background:var(--cline)}
/* signed in: the codename, big */
.card .pass h2{font-size:clamp(1.9rem,9vw,2.6rem);overflow-wrap:anywhere}
.card .pass .fine{margin-top:.25rem}
.card .sw{display:flex;align-items:flex-start;gap:.75rem;padding:.875rem 0;border-block:1px solid var(--cline);cursor:pointer}
.card .sw input{position:absolute;opacity:0;width:1px;height:1px}
.card .lever{flex:none;position:relative;width:2.875rem;height:1.625rem;margin-top:1px;border-radius:.8125rem;background:rgba(244,236,225,.18);border:2px solid rgba(244,236,225,.4);transition:background .2s,border-color .2s}
.card .lever i{position:absolute;top:2px;left:2px;width:1.125rem;height:1.125rem;border-radius:50%;background:var(--paper);transition:translate .25s cubic-bezier(.2,.9,.25,1.08)}
.card .sw input:checked+.lever{background:var(--accent);border-color:var(--accent)}
.card .sw input:checked+.lever i{translate:1.25rem 0;background:var(--ink)}
.card .sw input:focus-visible+.lever{outline:3px solid var(--paper);outline-offset:3px}
.card .sw input:disabled+.lever{opacity:.6}
.card .swt b{display:block;font:700 .95rem/1.2 var(--body);color:var(--paper)}
.card .swt span{display:block;margin-top:2px;font-size:.84rem;color:rgba(244,236,225,.55)}
.card .foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.25rem .875rem}
.card .going{display:grid;gap:.25rem;padding-left:1.125rem;font-size:.9rem;line-height:1.4;color:var(--csoft)}
.card .st form{display:grid;gap:.875rem}
/* the keyboard is up (a short visual viewport): the card tightens so a field, its message and its button fit together */
@media (max-height:480px){.card .st,.card .st form{gap:.5rem}.card{padding-top:.875rem;padding-bottom:.875rem}.card h2{font-size:1.35rem}.card .fld{height:2.75rem}.card .cb i{height:3rem}.card p{font-size:.9rem}}
@media (prefers-reduced-motion:reduce){.btn,.coin,.card .lever,.card .lever i{transition:none}}