* {box-sizing:border-box;margin:0;padding:0}
  :root {}
  body {min-width:320px;font-family:var(--sans);background:var(--bg);color:var(--ink);line-height:var(--lh-dense)}
  button {color:inherit}
  :focus-visible {outline:3px solid var(--ochre);outline-offset:3px}

  .topbar {max-width:1200px;margin:0 auto;padding:var(--s-4) var(--s-6);display:flex;justify-content:space-between;align-items:center}
  .brand {display:flex;align-items:baseline;gap:var(--s-2)}
  .brand-name {font-family:var(--serif);font-size:var(--t-sub);font-weight:700;color:var(--sage-deep);letter-spacing:var(--track-display)}
  .brand-name em {font-style:italic;font-weight:400;color:var(--ochre-deep)}
  .topbar-nav {display:flex;gap:var(--s-5)}
  .topbar-nav a {font-size:var(--t-dense);color:var(--ink);text-decoration:none;cursor:pointer;padding-bottom:var(--s-1);border-bottom:1px solid var(--clear)}
  .topbar-nav a:hover {border-color:var(--sage)}
  .topbar-nav a.active {border-color:var(--rust);color:var(--rust)}

  .crumb {max-width:1200px;margin:0 auto;padding:0 var(--s-6) var(--s-4);font-size:var(--t-dense);color:var(--muted);border-bottom:1px solid var(--border)}
  .crumb a {color:var(--muted);text-decoration:none;cursor:pointer}
  .crumb a:hover {color:var(--rust)}
  .crumb .sep {margin:0 var(--s-2);color:var(--faint)}

  .hero {max-width:1000px;margin:var(--s-6) auto 0;padding:0 var(--s-6);text-align:center}
  .hero-eyebrow {font-size:var(--t-dense);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--rust);font-weight:700;margin-bottom:var(--s-4)}
  .hero-h1 {font-family:var(--display);font-size:var(--t-display);font-weight:800;line-height:var(--lh-head);letter-spacing:var(--track-display);color:var(--ink);margin-bottom:var(--s-4)}
  .hero-h1 em {font-style:italic;font-weight:400;color:var(--sage-deep)}
  .hero-sub {font-size:var(--t-dense);line-height:var(--lh-dense);color:var(--muted);max-width:640px;margin:0 auto}


  .game {max-width:1440px;margin:var(--s-6) auto 0;padding:0 var(--s-6)}
  .game-shell {background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}


  .game-status {background:var(--ink);color:var(--ink-inverse);padding:var(--s-4) var(--s-5);display:grid;grid-template-columns:minmax(0,6fr) minmax(0,4fr) auto;gap:var(--s-6);align-items:center}
  .status-settings {display:flex;align-items:center;gap:var(--s-4)}
  .status-control {display:flex;align-items:center;gap:var(--s-2);font-size:var(--t-dense)}
  .status-control-label {color:var(--ink-inverse);font-size:var(--t-dense);letter-spacing:var(--track-label);text-transform:uppercase}
  .mode-pill, .round-pill {padding:var(--s-1) var(--s-2);border:0;background:var(--lime-raised);color:var(--ink-inverse);border-radius:var(--radius);font-family:var(--sans);font-size:var(--t-dense);letter-spacing:var(--track-label);cursor:pointer}
  .mode-pill.active, .round-pill.active {background:var(--ochre);color:var(--ink);font-weight:600}
  .status-progress {display:flex;align-items:center;gap:var(--s-3)}
  .progress-bar {flex:1;height:4px;background:var(--lime-raised);border-radius:var(--radius);overflow:hidden;max-width:320px}
  .progress-fill {height:100%;background:var(--ochre);transition:none}
  .progress-text {font-family:var(--sans);font-size:var(--t-dense);color:var(--ink-inverse);white-space:nowrap}
  .status-score {display:flex;gap:var(--s-4);font-size:var(--t-dense)}
  .score-item {display:flex;flex-direction:column;align-items:flex-end}
  .score-num {font-family:var(--serif);font-size:var(--t-sub);font-weight:700;color:var(--ink-inverse);line-height:var(--lh-dense)}
  .score-label {color:var(--ink-inverse);font-size:var(--t-dense);letter-spacing:var(--track-label);text-transform:uppercase;margin-top:var(--s-1)}


  .play-area {display:grid;grid-template-columns:minmax(0,8fr) minmax(0,4fr);min-height:620px}
  .map-wrap {position:relative;overflow:hidden;background:var(--sage-pale)}
  #game-map {width:100%;height:100%;min-height:620px;position:relative;overflow:hidden;background:var(--lime-sunken)}
  #game-map .maplibregl-canvas {outline:none}
  .map-wrap.is-selecting #game-map .maplibregl-canvas {cursor:crosshair}
  .map-status {position:absolute;inset:0;z-index:600;display:grid;place-items:center;padding:var(--s-6);background:var(--lime-sunken);color:var(--sage-deep);text-align:center;transition:opacity var(--dur) var(--ease)}
  .map-status[hidden] {opacity:0;visibility:hidden;pointer-events:none;display:grid}
  .map-status-inner {max-width:320px}
  .map-status-kicker {display:block;margin-bottom:var(--s-3);font-family:var(--sans);font-size:var(--t-dense);font-weight:600;letter-spacing:var(--track-label);text-transform:uppercase;color:var(--rust)}
  .map-status strong {display:block;font-family:var(--serif);font-size:var(--t-head);line-height:var(--lh-dense)}
  .map-status p {margin-top:var(--s-3);font-size:var(--t-dense);line-height:var(--lh-dense);color:var(--muted)}
  .map-status.is-error {background:var(--rust-pale);color:var(--teja)}
  .map-overlay {position:absolute;top:12px;left:12px;background:var(--lime-raised);padding:var(--s-2) var(--s-3);border-radius:var(--radius);font-size:var(--t-dense);color:var(--muted);z-index:500;pointer-events:none}
  .map-overlay strong {color:var(--ink);font-weight:500}


  .question-panel {padding:var(--s-5) var(--s-5);display:flex;flex-direction:column;border-left:1px solid var(--border)}
  .q-prompt {font-size:var(--t-dense);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--rust);font-weight:700;margin-bottom:var(--s-3)}
  .q-text {font-family:var(--serif);font-size:var(--t-sub);font-weight:700;line-height:var(--lh-dense);color:var(--ink);margin-bottom:var(--s-2)}
  .q-text em {font-style:italic;color:var(--sage-deep)}
  .q-hint {font-size:var(--t-dense);color:var(--muted);margin-bottom:var(--s-5)}
  .q-options {display:flex;flex-direction:column;gap:var(--s-2);flex:1}
  .q-option {padding:var(--s-3) var(--s-4);background:var(--bg);border:1px solid var(--border);border-radius:var(--radius);cursor:pointer;font-size:var(--t-dense);color:var(--ink);text-align:left;font-family:var(--sans);transition:none;display:flex;justify-content:space-between;align-items:center;gap:var(--s-3)}
  .q-option:hover:not(:disabled) {border-color:var(--ink);background:var(--card)}
  .q-option:disabled {cursor:default}
  .q-option.correct {background:var(--sage-pale);border-color:var(--green-go);color:var(--sage-deep);font-weight:500}
  .q-option.correct .marker {color:var(--green-go)}
  .q-option.wrong {background:var(--rust-pale);border-color:var(--red-no);color:var(--red-no)}
  .q-option.wrong .marker {color:var(--red-no)}
  .q-option.dimmed {opacity:0.4}
  .marker {font-family:var(--sans);font-size:var(--t-dense);letter-spacing:var(--track-label)}
  .find-instruction {padding:var(--s-4) 0;color:var(--muted);font-size:var(--t-dense);line-height:var(--lh-dense)}
  .find-instruction strong {color:var(--ink)}
  .find-list-toggle {align-self:flex-start;margin-top:var(--s-4);padding:var(--s-2) var(--s-3);border:1px solid var(--border);border-radius:var(--radius-ctl);background:var(--clear);color:var(--ink);font-family:var(--sans);font-size:var(--t-dense);font-weight:500;cursor:pointer}
  .find-list-toggle:hover {border-color:var(--ink)}

  .q-feedback {padding:var(--s-4) var(--s-4);border-radius:var(--radius);margin-top:var(--s-4);font-size:var(--t-dense);line-height:var(--lh-dense)}
  .q-feedback.right {background:var(--sage-pale);color:var(--sage-deep)}
  .q-feedback.wrong {background:var(--rust-pale);color:var(--teja)}
  .q-feedback strong {font-family:var(--serif);font-weight:700}
  .q-feedback .fact {font-style:italic;opacity:0.9;margin-top:var(--s-1);display:block}

  .q-next {margin-top:var(--s-4);padding:var(--s-3) var(--s-5);background:var(--sage-deep);color:var(--ink-inverse);border:none;border-radius:var(--radius);font-size:var(--t-dense);font-weight:500;cursor:pointer;font-family:var(--sans);display:none;align-items:center;justify-content:center;gap:var(--s-2)}
  .q-next.show {display:flex}
  .q-next:hover {background:var(--sage)}


  .end-screen {display:none;padding:var(--s-7) var(--s-6);text-align:center;flex-direction:column;align-items:center}
  .end-screen.show {display:flex}
  .end-grade {font-family:var(--display);font-size:var(--t-title);font-weight:800;line-height:var(--lh-dense);color:var(--rust);margin-bottom:var(--s-2)}
  .end-grade em {font-style:italic;font-weight:400}
  .end-h {font-family:var(--serif);font-size:var(--t-head);font-weight:700;color:var(--ink);margin-bottom:var(--s-2)}
  .end-p {font-size:var(--t-dense);color:var(--muted);max-width:360px;line-height:var(--lh-dense);margin-bottom:var(--s-5)}
  .end-stats {display:flex;gap:var(--s-6);margin-bottom:var(--s-5)}
  .end-stat-num {font-family:var(--serif);font-size:var(--t-head);font-weight:700;color:var(--ink)}
  .end-stat-label {font-size:var(--t-dense);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--muted);margin-top:var(--s-1)}
  .end-actions {display:flex;gap:var(--s-2);flex-wrap:wrap;justify-content:center}
  .end-btn {padding:var(--s-3) var(--s-5);font-size:var(--t-dense);font-weight:500;border-radius:var(--radius);cursor:pointer;border:none;font-family:var(--sans)}
  .end-btn-primary {background:var(--sage-deep);color:var(--ink-inverse)}
  .end-btn-primary:hover {background:var(--sage)}
  .end-btn-ghost {background:var(--clear);color:var(--ink);border:1px solid var(--border)}
  .end-btn-ghost:hover {border-color:var(--ink)}


  .info-strip {background:var(--surface);padding:var(--s-4) var(--s-5);display:flex;gap:var(--s-6);justify-content:space-between;align-items:center;font-size:var(--t-dense);color:var(--muted);border-top:1px solid var(--border)}
  .info-strip-left {display:flex;gap:var(--s-5)}
  .info-item {display:flex;align-items:center;gap:var(--s-1)}
  .info-link {color:var(--rust);cursor:pointer;text-decoration:none}


  .why {max-width:900px;margin:var(--s-8) auto 0;padding:0 var(--s-6)}
  .why h2 {font-family:var(--serif);font-size:var(--t-head);font-weight:700;color:var(--ink);margin-bottom:var(--s-4);line-height:var(--lh-head)}
  .why h2 em {font-style:italic;font-weight:400;color:var(--sage-deep)}
  .why p {font-size:var(--t-dense);line-height:var(--lh-dense);color:var(--ink);margin-bottom:var(--s-4)}
  .why-grid {display:grid;grid-template-columns:repeat(3, 1fr);gap:var(--s-4);margin-top:var(--s-6)}
  .why-card {background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:var(--s-4)}
  .why-card-tag {font-size:var(--t-dense);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--rust);font-weight:700;margin-bottom:var(--s-2)}
  .why-card h3 {font-family:var(--serif);font-size:var(--t-dense);font-weight:700;color:var(--ink);margin-bottom:var(--s-2);line-height:var(--lh-head)}
  .why-card p {font-size:var(--t-dense);color:var(--muted);line-height:var(--lh-dense);margin:0}


  .category-select {max-width:1280px;margin:var(--s-6) auto 0;padding:0 var(--s-6)}
  .category-heading {display:flex;align-items:baseline;justify-content:space-between;gap:var(--s-4);margin-bottom:var(--s-3)}
  .category-heading h2 {font-family:var(--serif);font-size:var(--t-sub);line-height:var(--lh-head)}
  .category-heading p {font-size:var(--t-dense);color:var(--muted)}
  .category-grid {display:grid;grid-template-columns:repeat(5, 1fr);gap:var(--s-3)}
  .category-card {width:100%;min-height:106px;background:var(--card);color:var(--ink);border:1px solid var(--border);border-radius:var(--radius);padding:var(--s-4) var(--s-4);cursor:pointer;transition:transform var(--dur) var(--ease);text-align:left;font-family:var(--sans)}
  .category-card:hover {border-color:var(--sage)}
  .category-card:hover:not(:disabled) {transform:translateY(-2px)}
  .category-card.active {border-color:var(--rust);background:var(--lime-raised);box-shadow:none}
  .category-card:disabled {cursor:wait;opacity:0.58}
  .category-card-h {display:block;font-family:var(--serif);font-size:var(--t-dense);font-weight:700;line-height:var(--lh-dense);color:var(--ink);margin-bottom:var(--s-2)}
  .category-card-meta {display:block;font-size:var(--t-dense);line-height:var(--lh-dense);color:var(--muted)}


  .footer {margin-top:var(--s-8);background:var(--sage-deep);color:var(--ink-inverse);padding:var(--s-7) 0 var(--s-5)}
  .footer-inner {max-width:1200px;margin:0 auto;padding:0 var(--s-6);display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:var(--s-6)}
  .footer-name {font-family:var(--serif);font-size:var(--t-sub);font-weight:700;color:var(--ochre-pale);margin-bottom:var(--s-2)}
  .footer-name em {font-style:italic;font-weight:400}
  .footer p {font-size:var(--t-dense);line-height:var(--lh-dense);color:var(--ink-inverse)}
  .footer h5 {font-family:var(--serif);font-size:var(--t-dense);color:var(--ochre-pale);margin-bottom:var(--s-3);font-weight:700}
  .footer a {display:block;font-size:var(--t-dense);color:var(--ink-inverse);padding:var(--s-1) 0;cursor:pointer;text-decoration:none}
  .footer-bottom {max-width:1200px;margin:var(--s-6) auto 0;padding:var(--s-5) var(--s-6) 0;border-top:1px solid var(--rule);display:flex;justify-content:space-between;font-size:var(--t-dense);color:var(--ink-inverse)}

  @media (max-width: 900px) {
    .hero-h1 {font-size:var(--t-display)}
    .play-area {grid-template-columns:1fr}
    .question-panel {border-left:none;border-top:1px solid var(--border)}
    .why-grid {grid-template-columns:1fr}
    .category-grid {grid-template-columns:repeat(3, 1fr)}
    .footer-inner {grid-template-columns:1fr 1fr}
    .game-status {grid-template-columns:1fr auto;gap:var(--s-4)}
    .status-settings {flex-wrap:wrap}
    .status-progress {grid-column:1 / -1;grid-row:2}
    .progress-bar {max-width:none}
  }

  @media (max-width: 620px) {
    .topbar {padding:var(--s-4) var(--s-4)}
    .topbar-nav {display:none}
    .crumb {padding-inline:var(--s-4)}
    .hero {margin-top:var(--s-4);padding-inline:var(--s-4);text-align:left}
    .hero-eyebrow {margin-bottom:var(--s-2);font-size:var(--t-dense)}
    .hero-h1 {font-size:var(--t-display);margin-bottom:var(--s-3)}
    .hero-sub {font-size:var(--t-dense);line-height:var(--lh-dense)}
    .category-select {margin-top:var(--s-5);padding-inline:var(--s-4)}
    .category-heading {align-items:flex-start;flex-direction:column;gap:var(--s-1)}
    .category-grid {display:flex;gap:var(--s-3);overflow-x:auto;scroll-snap-type:x mandatory;padding:var(--s-1) 0 var(--s-2)}
    .category-card {min-width:195px;min-height:96px;scroll-snap-align:start}
    .game {margin-top:var(--s-5);padding:0}
    .game-shell {border-inline:0;border-radius:var(--radius)}
    .game-status {padding:var(--s-4) var(--s-4)}
    .status-settings {gap:var(--s-3)}
    .status-control {gap:var(--s-1)}
    .status-control-label {display:none}
    .status-score {gap:var(--s-4)}
    #game-map {min-height:58svh}
    .question-panel {padding:var(--s-5) var(--s-4);min-height:450px}
    .info-strip, .info-strip-left {align-items:flex-start;flex-direction:column;gap:var(--s-2)}
    .why {padding-inline:var(--s-4)}
    .footer-inner {grid-template-columns:1fr;padding-inline:var(--s-4)}
    .footer-bottom {padding-inline:var(--s-4);flex-direction:column;gap:var(--s-2)}
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {scroll-behavior:auto!important;transition-duration:0.01ms!important;animation-duration:var(--dur)!important}
  }