/* Chug Games design system. One dark theme on purpose (the games are played in dim rooms).
   Hierarchy comes from size, weight and space, not colour. One accent, used for the one main action per view.
   Type: Unbounded (display, used with restraint) + Geist (everything else) + Geist Mono (numbers, codes). */
:root{
  --bg:#0F0E12;            /* page */
  --surface:#17161B;       /* cards, inputs */
  --raise:#1F1D24;         /* hover, selected */
  --line:rgba(244,242,245,.10);
  --line-strong:rgba(244,242,245,.22);
  --text:#F4F2F5;
  --muted:rgba(244,242,245,.62);
  --faint:rgba(244,242,245,.38);
  --accent:#D93448;        /* the one colour */
  --accent-hover:#C92F42;
  --on-accent:#FFFFFF;
  --ok:#3DBE7A;
  --display:"Unbounded","Avenir Next","Helvetica Neue",Arial,sans-serif;
  --body:"Geist","Avenir Next","Helvetica Neue",Arial,sans-serif;
  --mono:"Geist Mono",ui-monospace,"SF Mono",Menlo,monospace;
  --r:14px;                /* radius */
  --gap:clamp(56px,9vw,104px);
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%}
html,body{min-height:100%}
body{margin:0;background:var(--bg);color:var(--text);font:400 17px/1.6 var(--body);-webkit-font-smoothing:antialiased;
  padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
img{max-width:100%}
a{color:var(--text);text-decoration-color:var(--line-strong);text-underline-offset:3px}
a:hover{text-decoration-color:var(--text)}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px}
::selection{background:var(--accent);color:var(--on-accent)}

/* layout */
.wrap{max-width:1040px;margin:0 auto;padding-inline:20px}
.narrow{max-width:680px}
.stack{display:grid;gap:16px}

/* nav */
.nav{display:flex;align-items:center;gap:22px;padding-block:22px}
.wordmark{font:600 .82rem/1 var(--display);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--text);margin-right:auto}
.nav a:not(.wordmark){color:var(--muted);text-decoration:none;font-size:.94rem;font-weight:500}
.nav a:not(.wordmark):hover,.nav a[aria-current]{color:var(--text)}
@media (max-width:640px){.nav .wide{display:none}}

/* type */
.eyebrow{margin:0;font:500 .78rem/1.3 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
h1,.h1{margin:0;font:600 clamp(2.3rem,7.5vw,4.4rem)/1.04 var(--display);letter-spacing:-.025em;text-wrap:balance}
h2,.h2{margin:0;font:600 clamp(1.45rem,4vw,2.1rem)/1.15 var(--display);letter-spacing:-.02em;text-wrap:balance}
h3,.h3{margin:0;font:600 1.08rem/1.3 var(--body)}
p{margin:0}
.lead{font-size:clamp(1.05rem,2.4vw,1.22rem);color:var(--muted);max-width:52ch}
.muted{color:var(--muted)}
.small{font-size:.88rem;color:var(--muted)}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}

/* buttons: one .primary per view */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 24px;border-radius:999px;
  border:1px solid var(--line-strong);background:transparent;color:var(--text);font:600 1rem var(--body);text-decoration:none;cursor:pointer;
  transition:background .15s,border-color .15s,color .15s}
.btn:hover{border-color:var(--text)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn.primary:hover{background:var(--accent-hover);border-color:var(--accent-hover)}
.btn.quiet{border-color:transparent;color:var(--muted)}
.btn.quiet:hover{color:var(--text)}
.btn.block{width:100%}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.danger{color:var(--accent);border-color:rgba(217,52,72,.45)}

/* surfaces */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px}
.rule{height:1px;background:var(--line);border:0;margin:0}

/* game list rows */
.rows{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)}
.rows a{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:18px;padding:24px 4px;border-bottom:1px solid var(--line);text-decoration:none}
.rows a:hover{background:linear-gradient(90deg,var(--surface),transparent)}
.rows .t{font:600 clamp(1.2rem,3.4vw,1.6rem)/1.15 var(--display);letter-spacing:-.015em}
.rows .d{display:block;margin-top:6px;color:var(--muted);font-size:.95rem;max-width:56ch}
.rows .go{font:500 .82rem var(--mono);color:var(--muted);white-space:nowrap}
.rows a:hover .go{color:var(--accent)}

/* forms */
input[type=text],input[type=email],input[type=password]{width:100%;min-height:52px;padding:0 16px;border-radius:12px;border:1px solid var(--line-strong);
  background:var(--surface);color:var(--text);font:400 1.02rem var(--body)}
input::placeholder{color:var(--faint)}
input[type=text]:focus,input[type=email]:focus,input[type=password]:focus{outline:none;border-color:var(--text)}
label.field{display:grid;gap:8px;font-size:.9rem;font-weight:500;color:var(--muted)}
.check{display:flex;gap:12px;align-items:flex-start;font-size:.92rem;color:var(--muted)}
.check input{margin-top:3px;width:20px;height:20px;accent-color:var(--accent);flex:none}

/* segmented choices (radio/checkbox wrapped in label > input + span) */
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg label{position:relative}
.seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.seg span{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line-strong);font-weight:500;color:var(--muted)}
.seg input:checked + span{background:var(--text);border-color:var(--text);color:var(--bg)}
.seg input:focus-visible + span{outline:2px solid var(--accent);outline-offset:2px}

/* faq */
details{border-bottom:1px solid var(--line)}
summary{cursor:pointer;list-style:none;padding:20px 0;font-weight:600;display:flex;justify-content:space-between;gap:16px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";font:400 1.3rem/1 var(--mono);color:var(--muted)}
details[open] summary::after{content:"−"}
details p{padding:0 0 20px;color:var(--muted);max-width:62ch}

/* tables */
.tablewrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:.96rem}
th,td{text-align:left;padding:14px 12px 14px 0;border-bottom:1px solid var(--line);vertical-align:top}
th{font:500 .74rem var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}

/* footer */
.foot{display:flex;flex-wrap:wrap;gap:10px 22px;padding-block:36px 48px;margin-top:var(--gap);border-top:1px solid var(--line);font-size:.86rem;color:var(--muted)}
.foot a{color:var(--muted)}
.foot a:hover{color:var(--text)}

/* toast */
.toast{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translate(-50%,180%);max-width:min(92vw,440px);
  padding:14px 20px;border-radius:999px;background:var(--text);color:var(--bg);font-weight:600;z-index:60;text-align:center;transition:transform .25s}
.toast.on{transform:translate(-50%,0)}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}