:root {
  --gd-paper: var(--street-bg);
  --gd-card: var(--street-panel);
  --gd-ink: var(--street-text);
  --gd-muted: var(--street-muted);
  --gd-line: var(--street-line);
  --gd-accent: var(--street-ice);
  --gd-soft: var(--street-raised);
  color: var(--gd-ink);
  background: var(--gd-paper);
}
* {box-sizing:border-box}
body {margin:0; line-height:1.55}
a {color:inherit}
button, input {font:inherit}
:focus-visible {outline:3px solid var(--street-ice); outline-offset:3px}
.gd-shell {width:min(100% - 48px, 1060px); margin-inline:auto}
.gd-mast {background:var(--gd-card); border-bottom:1px solid var(--gd-line)}
.gd-bar {display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:68px}
.gd-brand {display:inline-flex; align-items:center; gap:10px; font-weight:750; text-decoration:none; white-space:nowrap}
.gd-brand {min-height:44px}
.gd-tabs {display:flex; align-items:center; gap:5px}
.gd-tabs a {padding:10px 13px; color:var(--gd-muted); border-radius:2px; text-decoration:none; font-size:.9rem}
.gd-tabs a[aria-current="page"] {background:var(--gd-soft); color:var(--street-lime); box-shadow:inset 0 -2px var(--street-lime); font-weight:700}
.gd-tabs a:hover, .gd-footer a:hover {text-decoration:underline; text-underline-offset:4px}
.gd-skip {position:fixed; z-index:4; top:0; left:8px; translate:0 -160%; background:var(--gd-card); padding:10px 16px}
.gd-skip:focus {translate:0 0}
#guide-main {padding-top:clamp(20px, 3vw, 42px); min-height:65vh}
#guide-main:focus {outline:none}
.gd-hero {
  position:relative; isolation:isolate; overflow:hidden;
  min-height:190px; display:flex; align-items:center;
  padding:clamp(23px,4vw,42px);
  background:linear-gradient(110deg,var(--gd-card) 48%,var(--gd-soft));
  border:1px solid var(--gd-line); border-left:4px solid var(--gd-accent);
}
.gd-intro {max-width:min(73%,670px)}
.gd-hero h1, .gd-result-title h1 {font-size:clamp(1.75rem,4vw,3.15rem); letter-spacing:.005em; line-height:1.2; margin:0; font-weight:830; overflow-wrap:anywhere}
.gd-hero p, .gd-result-title p {color:var(--gd-muted); margin:.65rem 0 0; max-width:60ch; line-height:1.65}
.gd-stage {display:block; width:fit-content; margin:0 0 10px; padding-left:9px; border-left:4px solid var(--street-ice); color:var(--street-ice); font:650 .76rem/1.2 var(--street-mono)}
.gd-illustration {
  position:absolute; inset:0 0 0 auto; width:28%; display:grid; place-items:center;
  z-index:-1; overflow:hidden; color:var(--gd-accent);
  background:linear-gradient(to right,var(--gd-card),transparent 26%),
    linear-gradient(var(--gd-line) 1px,transparent 1px) 50% 50%/20px 20px,
    linear-gradient(90deg,var(--gd-line) 1px,transparent 1px) 50% 50%/20px 20px;
}
.gd-figure {display:block; position:relative; width:104px; height:80px; color:#79d9ff; background:currentColor}
.gd-figure::before,.gd-figure::after {content:""; position:absolute}
.gd-compass {width:96px; height:96px; clip-path:polygon(17% 0,83% 0,83% 8%,92% 8%,92% 17%,100% 17%,100% 83%,92% 83%,92% 92%,83% 92%,83% 100%,17% 100%,17% 92%,8% 92%,8% 83%,0 83%,0 17%,8% 17%,8% 8%,17% 8%)}
.gd-compass::before {inset:6px; background:#193955; clip-path:inherit}
.gd-compass::after {inset:15%; background:linear-gradient(135deg,#3e88bf 0 49%,#d1fd71 49%); clip-path:polygon(86% 7%,57% 62%,13% 92%,43% 39%)}
.gd-gamepad {width:112px; height:73px; clip-path:polygon(12% 0,36% 0,36% 8%,64% 8%,64% 0,88% 0,88% 9%,94% 9%,94% 30%,100% 30%,100% 89%,93% 89%,93% 100%,73% 100%,73% 91%,65% 91%,65% 77%,35% 77%,35% 91%,27% 91%,27% 100%,7% 100%,7% 89%,0 89%,0 30%,6% 30%,6% 9%,12% 9%)}
.gd-gamepad::before {width:24%; height:37%; left:13%; top:28%; background:#163048; clip-path:polygon(34% 0,66% 0,66% 34%,100% 34%,100% 66%,66% 66%,66% 100%,34% 100%,34% 66%,0 66%,0 34%,34% 34%)}
.gd-gamepad::after {width:11%; height:17%; right:12%; top:26%; background:#d1fd71; box-shadow:-14px 15px 0 #163048}
.gd-chat {clip-path:polygon(8% 0,92% 0,92% 8%,100% 8%,100% 72%,92% 72%,92% 80%,46% 80%,46% 88%,35% 88%,35% 96%,18% 96%,18% 80%,8% 80%,8% 72%,0 72%,0 8%,8% 8%)}
.gd-chat::before {inset:7px; clip-path:inherit; background:#193955}
.gd-chat::after {width:9px; height:9px; top:36%; left:25%; background:#d1fd71; box-shadow:21px 0 #d1fd71,42px 0 #d1fd71}
.gd-body {margin:clamp(20px,3vw,30px) 0}
.gd-goals, .gd-levels {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 14px}
.gd-choice {display:grid; grid-template-columns:1fr auto; align-items:center; gap:0 14px; min-height:72px; padding:14px 20px; border:1px solid var(--gd-line); border-radius:2px; background:var(--gd-card); text-decoration:none}
.gd-choice:hover {border-color:var(--gd-accent); background:color-mix(in srgb,var(--gd-card) 80%,var(--gd-soft)); box-shadow:inset 3px 0 var(--gd-accent)}
.gd-choice strong, .gd-choice small {grid-column:1; overflow-wrap:anywhere}
.gd-choice strong {font-size:1.07rem; line-height:1.45}
.gd-choice small {color:var(--gd-muted); font-size:.82rem; margin-top:2px}
.gd-choice .gd-arrow {grid-column:2; grid-row:1 / 3; color:var(--gd-accent); font-size:1.25rem}
.gd-unsure {margin-top:12px; display:inline-flex; align-items:center; gap:.6em; color:var(--gd-accent); text-decoration:underline; text-underline-offset:.2em; min-height:44px; font-weight:650}
.gd-levels .gd-choice {min-height:100px; align-content:center}
.gd-actions {display:flex; flex-wrap:wrap; align-items:center; gap:4px 24px; margin:14px 0}
.gd-actions a, .gd-footer a {color:var(--gd-accent); text-underline-offset:4px; min-height:44px; display:inline-flex; align-items:center}
.gd-breadcrumb {display:inline-flex; margin-bottom:7px; text-decoration:none; font-size:.9rem; font-weight:650; color:var(--gd-accent); min-height:38px; align-items:center}
.gd-result-title {margin:0 0 18px}
.gd-result-title h1 {font-size:clamp(1.6rem,3vw,2.15rem)}
.gd-alt {margin-top:15px; border-radius:2px; border:1px solid var(--gd-line); background:var(--gd-card)}
.gd-alt summary {cursor:pointer; padding:13px 18px; font-weight:650; color:var(--gd-accent)}
.gd-alt-body {padding:0 12px 12px}
.gd-filters {padding:clamp(14px,2vw,22px); background:var(--gd-card); border:1px solid var(--gd-line); border-radius:2px; display:grid; gap:14px}
.gd-filters fieldset {border:0; margin:0; padding:0; min-width:0}
.gd-filters legend {font-weight:700; margin-bottom:6px; padding:0}
.gd-options {display:flex; flex-wrap:wrap; gap:7px}
.gd-option {position:relative; cursor:pointer}
.gd-option input {position:absolute; width:1px; height:1px; clip-path:inset(50%); overflow:hidden}
.gd-option span {display:flex; align-items:center; gap:6px; padding:7px 12px; min-height:40px; border:1px solid var(--gd-line); border-radius:2px; color:var(--gd-muted); font-size:.91rem}
.gd-option span::before {content:""; height:8px; width:8px; border:1px solid currentColor; border-radius:0; flex:none}
.gd-option input:checked + span {color:var(--street-active-ink); background:var(--street-active); border-color:var(--street-active); font-weight:650}
.gd-option input:checked + span::before {background:currentColor}
.gd-option input:focus-visible + span {outline:3px solid var(--street-ice); outline-offset:2px}
.gd-count {margin:17px 0 10px; font-size:.9rem; color:var(--gd-muted)}
.gd-cards {display:grid; gap:16px; min-width:0}
.gd-empty {padding:20px; background:var(--gd-card); border:1px solid var(--gd-line); border-radius:2px}
.gd-empty p {margin:0}
.gd-footer {border-top:1px solid var(--gd-line); margin-top:clamp(30px,5vw,64px); padding:10px 0 18px; display:flex; flex-wrap:wrap; justify-content:space-between; gap:0 20px; font-size:.84rem}
@media(max-width:700px) {
  .gd-shell {width:calc(100% - 30px)}
  .gd-bar {justify-content:start; align-items:start; flex-direction:column; gap:5px; padding-block:10px 6px}
  .gd-brand {font-size:.93rem}.street-brand-mark {width:26px; height:26px}
  .gd-tabs {width:100%; justify-content:space-between; gap:1px}
  .gd-tabs a {font-size:.84rem; padding:10px 5px; flex-grow:1; text-align:center; white-space:nowrap}
  .gd-hero {min-height:150px; padding:21px 18px}
  .gd-intro {max-width:75%}
  .gd-hero h1 {font-size:clamp(1.45rem,5.5vw,1.85rem)}
  .gd-hero p {font-size:.88rem}
  .gd-illustration {width:24%}
  .gd-figure {scale:.71}
  .gd-goals,.gd-levels {grid-template-columns:1fr; gap:8px}
  .gd-choice {padding:12px 15px; min-height:65px}
  .gd-option span {min-height:44px}
}
@media(max-width:360px) {
  .gd-shell {width:calc(100% - 22px)}
  .gd-hero {padding:16px 13px}
  .gd-hero h1 {font-size:1.32rem}
  .gd-figure {scale:.56}
}
.gd-game-kind {font-size:.83rem; color:var(--gd-accent); font-weight:650; margin:0 0 5px 2px}
.gd-reason {margin:0 0 12px; color:var(--gd-accent); line-height:1.65}
.gd-reason strong {margin-inline-end:.7em}
.gd-hero .gd-unsure {margin-top:6px; font-size:.9rem; min-height:38px}
#gd-game-list {grid-template-columns:repeat(2,minmax(0,1fr))}
#gd-game-list .gd-empty {grid-column:1 / -1}
.gd-game-entry {display:flex; flex-direction:column; min-width:0}
.gd-game-entry > article {flex-grow:1}
@media(max-width:760px) {
  #gd-game-list {grid-template-columns:1fr}
  .gd-hero .gd-unsure {min-height:44px; font-size:.83rem}
}
#gd-game-list > .gd-game-entry:only-child {grid-column:1 / -1}
@media(max-width:700px) {
  .gd-illustration {right:4px; width:24%; grid-template-columns:minmax(0,1fr)}
  .gd-figure {scale:.65}
}
@media(max-width:360px) {
  .gd-figure {scale:.52}
}