body.games-focus .scenario-picker { display:none; }
body.games-focus .tabs { margin-bottom:28px; }
.tabs { flex-wrap:wrap; }
#games-workspace { padding-bottom:48px; }
.sg-heading,.sg-level-heading,.sg-level-top,.sg-level-bottom,.sg-resume { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.sg-heading { margin:12px 0 24px; }
.sg-badge,.sg-rule-chips span { border:1px solid #3b5948; border-radius:20px; padding:6px 12px; color:var(--green); font-size:.8rem; white-space:nowrap; }
.sg-hero { display:grid; grid-template-columns:1.2fr 1fr; gap:28px; align-items:center; padding:34px; border:1px solid #375643; border-radius:20px; background:radial-gradient(ellipse at 90% 100%,#28513b 0,transparent 65%),#142a20; }
.sg-hero h3 { font-size:clamp(2rem,4vw,3rem); line-height:1.1; letter-spacing:-.04em; }
.sg-hero p:not(.eyebrow) { color:#bfcec5; max-width:37rem; }
.sg-demo { display:flex; justify-content:center; gap:8px; transform:rotate(-5deg); }
.sg-card { display:inline-flex; flex-direction:column; align-items:center; justify-content:center; flex-shrink:0; width:62px; height:88px; color:#1a2a24; background:#f6f3e9; border:1px solid #dcd8cb; border-radius:8px; line-height:1.1; box-shadow:0 4px 8px #0002; }
.sg-card b { font-size:1.65rem; font-weight:800; }
.sg-card>span { font-size:1.6rem; }
.sg-card.sg-red { color:#b63543; }
.sg-rule-chips { display:flex; flex-wrap:wrap; gap:8px; }
.sg-rules { margin:22px 0 30px; padding:18px 22px; background:var(--surface); border-left:3px solid var(--green); border-radius:0 10px 10px 0; color:var(--muted); }
.sg-rules strong,.sg-rules b { color:var(--text); }
.sg-rules details { margin-top:12px; }
.sg-rules summary,.sg-review summary { cursor:pointer; color:var(--green); }
.sg-rules details p { margin:12px 0 0; }
.sg-level-heading { margin:24px 0 16px; }
.sg-level-heading>span { font-size:.85rem; color:var(--muted); }
.sg-levels { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px; }
.sg-level { display:flex; flex-direction:column; min-width:0; padding:20px; background:var(--surface); border:1px solid var(--line); border-radius:14px; }
.sg-level-top { margin-bottom:22px; color:var(--green); font-size:.75rem; }
.sg-number { font-size:1.4rem; font-variant-numeric:tabular-nums; font-weight:750; }
.sg-level h4 { font-size:1.07rem; margin:0 0 8px; }
.sg-level p:not(.eyebrow) { color:var(--muted); font-size:.85rem; flex:1; }
.sg-level .eyebrow { font-size:.63rem; margin-bottom:6px; }
.sg-locked { background:#101a15; }
.sg-locked .sg-level-top { color:var(--muted); }
.sg-passed { border-color:#4a8761; }
.sg-target { display:flex; justify-content:space-between; gap:8px; font-size:.78rem; padding:12px 0; border-top:1px solid var(--line); }
.sg-target b { color:var(--green); }
.sg-target span,.sg-level-bottom small { color:var(--muted); }
.sg-level-bottom small { font-size:.72rem; }
#games-workspace button:disabled { opacity:.5; cursor:default; }
#games-workspace button:focus-visible, #games-workspace summary:focus-visible { outline:3px solid var(--amber); outline-offset:4px; }
.sg-resume { padding:18px; border:1px solid var(--green); border-radius:12px; }
.sg-history { margin-top:32px; }
.sg-history-row { width:100%; border:0; border-bottom:1px solid var(--line); padding:14px 0; background:none; display:flex; justify-content:space-between; gap:16px; text-align:left; cursor:pointer; color:var(--muted); }
.sg-stats { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:14px; margin:24px 0 14px; }
.sg-stats>div { display:flex; flex-direction:column; gap:4px; padding:18px 22px; background:var(--surface); border:1px solid var(--line); border-radius:12px; }
.sg-stats span,.sg-stats small { color:var(--muted); font-size:.78rem; }
.sg-stats strong { font-size:2rem; line-height:1.1; font-variant-numeric:tabular-nums; }
.sg-stats .sg-accuracy { border-color:#699578; }
.sg-good { color:var(--green); }
.sg-low { color:var(--red); }
.sg-clock-track { height:4px; background:var(--surface-3); border-radius:2px; overflow:hidden; margin-bottom:22px; }
#sg-clock-fill { height:100%; background:var(--green); transition:width .2s linear; }
.sg-table { background:radial-gradient(ellipse at top,#1c3829,#12231b 70%); border:1px solid #355741; border-radius:18px; padding:26px; text-align:center; }
.sg-table h3 { font-size:1.55rem; }
.sg-instruction { color:#bfd0c4; max-width:50rem; margin:8px auto 24px; font-size:.92rem; }
.sg-known { margin:14px auto; }
.sg-known>span { display:block; color:var(--muted); font-size:.72rem; text-transform:uppercase; letter-spacing:.07em; margin-bottom:8px; }
.sg-known>div { display:flex; gap:8px; justify-content:center; }
.sg-options { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:12px; margin:26px auto; max-width:920px; }
.sg-option { position:relative; display:flex; gap:6px; justify-content:center; align-items:center; background:#0d1c14; border:2px solid #48614f; padding:9px; border-radius:12px; cursor:pointer; min-width:52px; min-height:58px; transition:background .1s,border-color .1s; }
.sg-option:hover { border-color:#a1c7ae; }
.sg-option[aria-pressed=true],.sg-none[aria-pressed=true] { border-color:var(--amber); background:#514329; box-shadow:0 0 0 2px var(--amber); }
.sg-option.sg-answer { border-color:var(--green); background:#245238; }
.sg-option.sg-wrong { border-color:var(--red); }
#games-workspace .sg-option:disabled { opacity:1; }
.sg-mark { position:absolute; right:-6px; top:-10px; width:23px; height:23px; background:var(--green); color:#102519; border-radius:50%; font-weight:800; }
.sg-rank { font-size:1.5rem; font-weight:750; color:var(--text); }
.sg-controls { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:12px; margin:20px 0 4px; }
#sg-selection { font-size:.82rem; color:var(--muted); min-width:90px; }
.sg-feedback { text-align:left; padding:18px; background:#09140faa; border-radius:12px; margin-top:22px; }
.sg-feedback p { margin:4px 0 10px; color:var(--text); }
.sg-example { display:inline-block; margin:3px 10px 3px 0; color:var(--muted); font-size:.85rem; }
.sg-footnote { color:var(--muted); font-size:.8rem; margin-top:16px; text-align:center; }
.sg-result-checks { display:flex; flex-wrap:wrap; gap:20px; margin:24px 0; font-weight:700; }
.sg-review { margin-top:32px; padding:20px; border:1px solid var(--line); border-radius:12px; }
.sg-review article { padding:16px 0; border-bottom:1px solid var(--line); }
.sg-review article h4 { margin:0 0 10px; }
.sg-review article p { color:var(--muted); }
.sg-review-cards { display:flex; flex-wrap:wrap; gap:6px; margin:12px 0; }
@media(max-width:850px) { .sg-hero { grid-template-columns:1fr; } .sg-demo { padding:12px 0; } .sg-levels { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:560px) {
  .sg-heading,.sg-level-heading { align-items:flex-start; flex-direction:column; }
  .sg-hero { padding:22px; } .sg-demo { gap:5px; }
  .sg-levels { grid-template-columns:1fr; }
  .sg-stats { gap:6px; grid-template-columns:1.2fr 1fr 1fr; }
  .sg-stats>div { padding:12px 8px; } .sg-stats strong { font-size:1.55rem; } .sg-stats span,.sg-stats small { font-size:.65rem; }
  .sg-table { padding:20px 12px; } .sg-card { width:47px; height:68px; } .sg-card b { font-size:1.35rem; } .sg-card>span { font-size:1.3rem; }
  .sg-option { padding:6px; gap:4px; } .sg-options { gap:10px; }
  .sg-controls { gap:10px; } .sg-controls .primary { flex:1; }
  .sg-history-row { flex-direction:column; gap:4px; }
}
@media(prefers-reduced-motion:reduce) { .sg-option,#sg-clock-fill { transition:none; } }

.gs-stars{color:var(--amber);letter-spacing:2px;white-space:nowrap}.gs-targets{display:flex;flex-wrap:wrap;gap:5px 16px;margin:12px 0;font-size:.76rem;color:var(--muted)}.gs-targets>span{white-space:nowrap}.gs-note{font-size:.75rem;color:var(--muted);margin:0 0 14px}.gs-result{display:flex;align-items:center;gap:15px;padding:16px 0;flex-wrap:wrap}.gs-result>.gs-stars{font-size:2rem}.sg-level .gs-targets{flex-direction:column;gap:4px}.sg-history-row .gs-stars{font-size:1rem}@media(max-width:600px){.gs-targets{gap:5px 10px}.sg-heading .sg-badge{white-space:normal}}

/* Straight Sprint shortcuts stay beside their exact answer, including wrapped rows. */
#straight-workspace .sg-option {padding-bottom:29px;}
#straight-workspace .sg-key {position:absolute;bottom:5px;left:50%;transform:translateX(-50%);font:600 11px ui-monospace,monospace;color:#cad8ce;background:#233b2c;border:1px solid #59735f;border-radius:4px;padding:1px 6px;}
#straight-workspace kbd {font-family:ui-monospace,monospace;}
#straight-workspace .sg-controls kbd,#straight-workspace .sg-sound kbd {font-size:11px;border:1px solid currentColor;border-radius:4px;padding:1px 4px;margin-left:5px;opacity:.8;}
.sg-toolbar {display:flex;gap:12px;align-items:center;flex-wrap:wrap;}
#straight-workspace .sg-key-help {font-size:.8rem;color:#c3d6c9;margin:12px auto;max-width:44rem;}
#straight-workspace button:focus-visible {outline:3px solid var(--amber);outline-offset:4px;}