/* ══════════════════════════════════════════════════════════
   CROJAK — Nine to Five · spelpagina
   Erft alle tokens van style.css; hier staat alleen het spel.
   ══════════════════════════════════════════════════════════ */

.gamewrap{ max-width:980px; margin:0 auto; padding:0 20px; }

/* ── kop ──────────────────────────────────────────────── */
.ghero{ padding:calc(var(--nav-h) + 54px) 0 34px; text-align:center; }
.ghero__eyebrow{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.22em;
  text-transform:uppercase; color:var(--ink-faint); margin:0 0 14px;
}
.ghero__title{
  font-family:var(--font-display); font-size:clamp(2.6rem,9vw,5.2rem);
  line-height:.92; letter-spacing:.012em; margin:0 0 16px; text-transform:uppercase;
}
.ghero__title em{ font-style:normal; color:var(--accent); }
.ghero__sub{
  max-width:56ch; margin:0 auto; color:var(--ink-dim);
  font-size:1.02rem; line-height:1.6;
}

/* ── ronde-statistieken ───────────────────────────────── */
.g-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin:0 0 26px;
}
.g-stat{
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r);
  padding:16px 18px; display:flex; flex-direction:column; gap:4px; min-width:0;
}
.g-stat--pot{
  border-color:color-mix(in srgb, var(--accent) 45%, var(--line));
  background:linear-gradient(160deg, color-mix(in srgb, var(--accent) 9%, var(--bg-2)), var(--bg-2));
}
.g-stat__k{
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-faint);
}
.g-stat__v{
  font-family:var(--font-display); font-size:1.4rem; line-height:1.1;
  letter-spacing:.01em; overflow-wrap:anywhere;
}
.g-stat__v--mono{ font-family:var(--font-mono); font-size:1.25rem; font-weight:700; }
.g-stat__sub{ font-size:.78rem; color:var(--ink-dim); }
a.g-stat__sub{ color:var(--ink-dim); text-decoration:none; border-bottom:1px solid var(--line); align-self:flex-start; }
a.g-stat__sub:hover{ color:var(--accent); }

/* ── speelvlak ────────────────────────────────────────── */
.g-board{
  background:var(--bg-2); border:1px solid var(--line);
  border-radius:var(--r-lg); padding:clamp(20px,4vw,38px); min-height:380px;
  display:flex; flex-direction:column; justify-content:center;
}

.g-idle{ text-align:center; }
.g-idle__art{
  width:118px; height:118px; margin:0 auto 20px; border-radius:50%;
  object-fit:cover; filter:var(--img-filter); border:2px solid var(--line);
}
.g-idle__h{
  font-family:var(--font-display); font-size:clamp(1.5rem,4.4vw,2.2rem);
  text-transform:uppercase; margin:0 0 10px; line-height:1;
}
.g-idle__p{ color:var(--ink-dim); max-width:48ch; margin:0 auto 22px; line-height:1.6; }

.g-rules{
  list-style:none; margin:26px 0 0; padding:22px 0 0; border-top:1px solid var(--line);
  display:grid; grid-template-columns:repeat(2,1fr); gap:10px 26px; text-align:left;
}
.g-rules li{
  font-size:.86rem; color:var(--ink-dim); line-height:1.5;
  padding-left:18px; position:relative;
}
.g-rules li::before{
  content:"·"; position:absolute; left:4px; top:-2px;
  color:var(--accent); font-size:1.4rem; line-height:1;
}
.g-rules b{ color:var(--ink); font-weight:600; }

/* ── wachten ──────────────────────────────────────────── */
.g-wait{ text-align:center; }
.g-wait__spin{
  width:42px; height:42px; margin:0 auto 18px; border-radius:50%;
  border:3px solid var(--line); border-top-color:var(--accent);
  animation:gspin .9s linear infinite;
}
@keyframes gspin{ to{ transform:rotate(360deg); } }
.g-wait__h{ font-family:var(--font-display); font-size:1.3rem; text-transform:uppercase; margin:0 0 8px; }
.g-wait__p{ color:var(--ink-dim); font-size:.9rem; max-width:40ch; margin:0 auto; line-height:1.6; }

/* ── een stap ─────────────────────────────────────────── */
.g-step__head{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.12em;
  text-transform:uppercase; color:var(--ink-faint); margin:0 0 14px;
}
.g-step__clock{
  color:var(--ink); background:var(--bg-3); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:4px 9px; font-weight:700; letter-spacing:.06em;
}
.g-step__n{ margin-right:auto; }
.g-step__odds{ color:var(--ink-dim); }

.g-progress{ display:flex; gap:3px; margin:0 0 22px; }
.g-progress__seg{
  flex:1; height:4px; border-radius:2px; background:var(--line);
  transition:background .3s var(--fx);
}
.g-progress__seg.is-past{ background:var(--accent); }
.g-progress__seg.is-now{ background:var(--ink-dim); }

.g-step__scene{
  font-size:clamp(1.08rem,2.6vw,1.35rem); line-height:1.5; margin:0 0 24px;
  color:var(--ink); max-width:46ch;
}

.g-choices{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
.g-choice{
  appearance:none; cursor:pointer; text-align:left;
  background:var(--bg-3); border:1px solid var(--line); border-radius:var(--r);
  padding:14px 16px; display:flex; flex-direction:column; gap:4px;
  color:var(--ink); font:inherit;
  transition:border-color .18s var(--fx), transform .18s var(--fx), background .18s var(--fx);
}
.g-choice:hover:not(:disabled){
  border-color:var(--accent); background:color-mix(in srgb, var(--accent) 8%, var(--bg-3));
  transform:translateY(-2px);
}
.g-choice:disabled{ opacity:.34; cursor:default; }
.g-choice__way{
  font-family:var(--font-mono); font-size:.62rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--accent);
}
.g-choice__label{
  font-family:var(--font-display); font-size:1.02rem; letter-spacing:.015em;
  text-transform:uppercase; line-height:1.1;
}

/* ── uitkomst van een stap ────────────────────────────── */
.g-outcome{
  margin:20px 0 0; padding:16px 18px; border-radius:var(--r);
  border:1px solid var(--line); background:var(--bg-3);
  opacity:0; transform:translateY(8px); transition:opacity .3s var(--fx), transform .3s var(--fx);
}
.g-outcome.is-in{ opacity:1; transform:none; }
.g-outcome.is-pass{ border-color:color-mix(in srgb, var(--green) 48%, var(--line)); }
.g-outcome.is-fail{ border-color:#7c2f2f; background:#1a0f0f; }
.g-outcome__way{
  display:block; font-family:var(--font-mono); font-size:.62rem;
  letter-spacing:.18em; text-transform:uppercase; color:var(--ink-faint); margin:0 0 6px;
}
.g-outcome__text{ margin:0; line-height:1.55; font-size:1rem; }
.g-outcome.is-fail .g-outcome__text{ color:#e8b4b4; }

/* ── einde ────────────────────────────────────────────── */
.g-end{ text-align:center; }
.g-end__step{
  display:inline-block; font-family:var(--font-mono); font-size:.76rem;
  letter-spacing:.18em; color:var(--ink-faint); border:1px solid var(--line);
  border-radius:999px; padding:5px 14px; margin:0 0 16px;
}
.g-end__title{
  font-family:var(--font-display); font-size:clamp(2.1rem,7vw,3.4rem);
  text-transform:uppercase; line-height:.96; margin:0 0 12px; letter-spacing:.012em;
}
.g-end.is-freed .g-end__title{ color:var(--accent); }
.g-end.is-freed .g-end__step{ border-color:var(--accent); color:var(--accent); }
.g-end__line{ font-size:1.06rem; line-height:1.55; margin:0 auto 8px; max-width:44ch; }
.g-end__sub{ color:var(--accent); font-weight:600; margin:0 auto 8px; }
.g-end__style{
  font-family:var(--font-mono); font-size:.8rem; color:var(--ink-faint);
  margin:14px auto 0; letter-spacing:.04em;
}
.g-end__actions{
  display:flex; gap:10px; justify-content:center; flex-wrap:wrap; margin:26px 0 0;
}
.g-end__note{
  font-size:.8rem; color:var(--ink-faint); line-height:1.55;
  max-width:52ch; margin:18px auto 0;
}
.g-end__tx{
  display:inline-block; margin:10px 0 0; font-family:var(--font-mono);
  font-size:.74rem; color:var(--ink-faint);
}
.g-end__tx:hover{ color:var(--accent); }

/* ── status + eigen runs ──────────────────────────────── */
.g-status{
  margin:16px 0 0; padding:12px 16px; border-radius:var(--r);
  font-size:.88rem; line-height:1.5; border:1px solid var(--line); background:var(--bg-2);
}
.g-status--wait{ color:var(--ink-dim); }
.g-status--ok{ border-color:color-mix(in srgb, var(--green) 48%, var(--line)); color:var(--green); }
.g-status--bad{ border-color:#7c2f2f; background:#1a0f0f; color:#e8b4b4; }

.g-note{ color:var(--ink-dim); text-align:center; margin:0; }

.g-myruns{ margin:30px 0 0; }
.g-myruns__h{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.18em;
  text-transform:uppercase; color:var(--ink-faint); margin:0 0 10px;
}
.g-myruns__list{ list-style:none; margin:0; padding:0; display:grid; gap:4px; }
.g-myruns__item{
  display:flex; gap:14px; align-items:center; padding:9px 14px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-sm);
  font-family:var(--font-mono); font-size:.78rem; color:var(--ink-dim);
}
.g-myruns__id{ color:var(--ink-faint); min-width:48px; }
.g-myruns__step{ color:var(--ink); margin-right:auto; }

/* ── eerlijkheid ──────────────────────────────────────── */
.gfair{ padding:52px 0 72px; }
.gfair__h{
  font-family:var(--font-display); font-size:clamp(1.6rem,5vw,2.4rem);
  text-transform:uppercase; margin:0 0 18px; line-height:1;
}
.gfair__grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:14px; }
.gfair__card{
  background:var(--bg-2); border:1px solid var(--line);
  border-radius:var(--r); padding:20px 22px;
}
.gfair__card h3{
  font-family:var(--font-mono); font-size:.72rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--accent); margin:0 0 10px;
}
.gfair__card p{ margin:0; color:var(--ink-dim); font-size:.9rem; line-height:1.6; }
.gfair__card code{
  font-family:var(--font-mono); font-size:.82rem; color:var(--ink);
  background:var(--bg-3); padding:1px 5px; border-radius:4px;
}

/* ── de staffel ───────────────────────────────────────── */
.gcurve{ list-style:none; margin:22px 0 0; padding:0; display:grid; gap:3px; }
.gcurve li{
  display:grid; grid-template-columns:62px 1fr 48px; align-items:center;
  gap:12px; font-family:var(--font-mono); font-size:.76rem; color:var(--ink-dim);
}
.gcurve__n{ color:var(--ink-faint); }
.gcurve__bar{ height:7px; background:var(--bg-3); border-radius:4px; overflow:hidden; }
.gcurve__bar i{ display:block; height:100%; background:var(--accent); border-radius:4px; }
.gcurve__v{ text-align:right; color:var(--ink); }

/* ── mobiel ───────────────────────────────────────────── */
@media (max-width:880px){
  .g-stats{ grid-template-columns:repeat(2,1fr); }
  .gfair__grid{ grid-template-columns:1fr; }
  .g-rules{ grid-template-columns:1fr; }
}
@media (max-width:560px){
  /* Vier knoppen onder elkaar duwen de scène van het scherm; een 2×2 grid
     houdt tekst en keuzes samen zichtbaar op 390px. */
  .g-choices{ grid-template-columns:repeat(2,1fr); gap:8px; }
  .g-choice{ padding:12px 12px; }
  .g-choice__label{ font-size:.9rem; }
  .g-step__scene{ font-size:1.02rem; margin-bottom:18px; }
  .g-board{ padding:20px 16px; min-height:0; }
  .g-stat{ padding:13px 14px; }
  .g-stat__v{ font-size:1.18rem; }
  .g-end__actions .btn{ flex:1 1 100%; }
}

/* ── reveal-stand op de eindkaart ─────────────────────── */
.g-reveal{
  display:flex; align-items:center; justify-content:center; gap:9px;
  flex-wrap:wrap; margin:18px auto 0; max-width:46ch;
  font-family:var(--font-mono); font-size:.78rem; line-height:1.5;
  color:var(--ink-faint); letter-spacing:.02em;
}
.g-reveal.is-done{ color:var(--green); }
.g-reveal.is-failed{
  color:#e8b4b4; background:#1a0f0f; border:1px solid #7c2f2f;
  border-radius:var(--r); padding:13px 16px; flex-direction:column;
}
.g-reveal__dot{
  width:8px; height:8px; border-radius:50%; background:var(--accent);
  animation:gpulse 1.1s ease-in-out infinite;
}
@keyframes gpulse{ 0%,100%{ opacity:.25; } 50%{ opacity:1; } }

/* ── leaderboard ──────────────────────────────────────── */
.g-lb{ margin:30px 0 0; }
.g-lb__head{
  display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin:0 0 12px;
}
.g-lb__h{
  font-family:var(--font-display); font-size:1.15rem; letter-spacing:.02em;
  text-transform:uppercase; margin:0;
}
.g-lb__meta{
  font-family:var(--font-mono); font-size:.68rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--ink-faint); margin-left:auto;
}
.g-lb__list{ list-style:none; margin:0; padding:0; display:grid; gap:4px; counter-reset:lb; }
.g-lb__row{
  display:grid; grid-template-columns:34px 92px 1fr 62px 58px;
  align-items:center; gap:12px; padding:10px 14px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:var(--r-sm);
  font-family:var(--font-mono); font-size:.78rem; color:var(--ink-dim);
}
.g-lb__row.is-lead{ border-color:color-mix(in srgb, var(--accent) 45%, var(--line)); }
.g-lb__row.is-me{
  background:color-mix(in srgb, var(--accent) 9%, var(--bg-2));
  border-color:color-mix(in srgb, var(--accent) 55%, var(--line));
}
.g-lb__row.is-freed{ border-color:var(--green); }
.g-lb__pos{ color:var(--ink-faint); }
.g-lb__who{ color:var(--ink); text-decoration:none; }
.g-lb__who:hover{ color:var(--accent); }
.g-lb__bar{ height:6px; background:var(--bg-3); border-radius:3px; overflow:hidden; min-width:40px; }
.g-lb__bar i{ display:block; height:100%; background:var(--accent); border-radius:3px; }
.g-lb__row.is-freed .g-lb__bar i{ background:var(--green); }
.g-lb__step{ text-align:right; color:var(--ink); font-weight:700; }
.g-lb__row.is-freed .g-lb__step{ color:var(--green); }
.g-lb__runs{ text-align:right; color:var(--ink-faint); font-size:.72rem; }
.g-lb__empty, .g-lb__pending{
  margin:0; padding:14px 16px; background:var(--bg-2);
  border:1px solid var(--line); border-radius:var(--r-sm);
  font-size:.84rem; color:var(--ink-dim); line-height:1.5;
}
.g-lb__pending{ margin-top:6px; font-size:.78rem; color:var(--ink-faint); }

@media (max-width:560px){
  .g-lb__row{ grid-template-columns:28px 1fr 52px; gap:9px; }
  .g-lb__bar{ display:none; }
  .g-lb__runs{ display:none; }
}

/* ── spelers zonder uitslag ───────────────────────────── */
.g-lb__unres{
  margin:10px 0 0; padding:14px 16px; background:var(--bg-2);
  border:1px solid var(--line); border-radius:var(--r-sm);
}
.g-lb__unres-h{
  font-family:var(--font-mono); font-size:.64rem; letter-spacing:.16em;
  text-transform:uppercase; color:var(--ink-faint); margin:0 0 9px;
}
.g-lb__unres-list{ list-style:none; margin:0; padding:0; display:grid; gap:6px; }
.g-lb__unres-list li{
  display:flex; gap:12px; align-items:baseline; flex-wrap:wrap;
  font-family:var(--font-mono); font-size:.76rem;
}
.g-lb__unres-why{ color:var(--ink-faint); font-size:.72rem; }
.g-lb__unres-step{ color:var(--ink); font-weight:700; }
.g-lb__unres-note{
  margin:10px 0 0; padding:10px 0 0; border-top:1px solid var(--line);
  font-size:.74rem; line-height:1.55; color:var(--ink-faint);
}
a.g-lb__unres-why{ text-decoration:none; border-bottom:1px solid var(--line); }
a.g-lb__unres-why:hover{ color:var(--accent); }
.g-lb__unres-list li.is-freed .g-lb__unres-step{ color:var(--green); }
.g-lb__unres-note--loud{
  border-top:none; margin-top:8px; padding:11px 13px;
  background:color-mix(in srgb, var(--green) 10%, var(--bg-3));
  border:1px solid color-mix(in srgb, var(--green) 45%, var(--line));
  border-radius:var(--r-sm); color:var(--ink);
}
.g-lb__unres-note--loud a{ color:var(--green); }

/* ── lege stand is een uitnodiging, geen mededeling ───── */
.g-lb__empty--open{ display:flex; flex-direction:column; gap:5px; }
.g-lb__empty--open strong{
  font-family:var(--font-display); font-size:1.02rem; letter-spacing:.015em;
  text-transform:uppercase; color:var(--accent);
}
.g-lb__empty--open span{ color:var(--ink-dim); }

/* ── oude runs duidelijk buiten de wedstrijd ──────────── */
.g-lb__unres{ opacity:.82; }
.g-lb__unres-intro{
  margin:0 0 11px; font-size:.78rem; line-height:1.55; color:var(--ink-faint);
}
.g-lb__unres-tag{
  font-size:.62rem; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-faint); border:1px solid var(--line);
  border-radius:999px; padding:2px 8px;
}
.g-lb__unres-list li.is-freed .g-lb__unres-step{ color:var(--ink-dim); }