:root {
  color-scheme: dark;
  --ink: #edf8ff;
  --muted: #a9c3d2;
  --panel: rgba(8, 25, 39, .88);
  --line: rgba(164, 226, 255, .2);
  --ice: #75dcff;
  --gold: #ffd56a;
  --shadow: 0 24px 70px rgba(0, 0, 0, .35);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }
html { min-height: 100%; background: #06121d; }
body { margin: 0; min-height: 100vh; color: var(--ink); background: radial-gradient(circle at 30% -10%, #194968 0, transparent 42%), #06121d; }
button, a { font: inherit; }
button { color: inherit; }
.aurora { position: fixed; inset: 0; pointer-events: none; background: linear-gradient(120deg, transparent 18%, rgba(84, 219, 255, .07), transparent 45%, rgba(194, 122, 255, .06), transparent 75%); }
.topbar { position: sticky; z-index: 20; top: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px clamp(16px, 4vw, 52px); background: rgba(4, 14, 23, .88); border-bottom: 1px solid var(--line); backdrop-filter: blur(18px); }
.brand { display: flex; align-items: center; gap: 12px; color: inherit; text-decoration: none; }
.brand-gem { display: grid; place-items: center; width: 46px; aspect-ratio: 1; border: 1px solid #9debff; border-radius: 14px 2px 14px 2px; color: #07131f; background: linear-gradient(135deg, #d9f9ff, #59d5ff); font-weight: 1000; box-shadow: 0 0 24px rgba(76, 208, 255, .4); }
.brand strong, .brand small { display: block; }
.brand small { margin-top: 2px; color: var(--muted); font-size: .62rem; letter-spacing: .14em; }
.scoreboard { display: flex; align-items: center; gap: 10px; }
.scoreboard > span { min-width: 70px; padding: 6px 10px; text-align: center; border-left: 1px solid var(--line); }
.scoreboard small, .scoreboard strong { display: block; }
.scoreboard small { color: var(--muted); font-size: .66rem; text-transform: uppercase; letter-spacing: .12em; }
.round-button, .small-button, .area-tab, .close-button { border: 1px solid var(--line); background: rgba(255,255,255,.06); cursor: pointer; }
.round-button { width: 42px; height: 42px; border-radius: 50%; font-size: 1.1rem; }
.round-button:hover, .round-button.active { border-color: var(--ice); background: rgba(117, 220, 255, .18); }
main { width: min(1500px, 100%); margin: auto; padding: 0 clamp(14px, 3vw, 44px) 56px; }
.intro { display: flex; align-items: end; justify-content: space-between; gap: 28px; padding: clamp(38px, 7vw, 86px) 0 32px; }
.intro h1, .badge-deck h2, .modal h2 { margin: 8px 0; font-size: clamp(2.2rem, 5vw, 5rem); line-height: .95; letter-spacing: -.055em; }
.intro p { max-width: 760px; color: #c4d8e4; font-size: clamp(1rem, 1.5vw, 1.22rem); }
.eyebrow { color: var(--ice); font-size: .72rem; font-weight: 900; letter-spacing: .18em; }
.enter-button, .start-ride, .primary-button { border: 0; border-radius: 14px; color: #07131f; background: linear-gradient(135deg, #e5fbff, #63d9ff); box-shadow: 0 12px 30px rgba(57, 194, 240, .26); cursor: pointer; font-weight: 900; }
.enter-button { min-width: 220px; padding: 16px 22px; }
.enter-button span, .enter-button small { display: block; }
.enter-button small { margin-top: 3px; opacity: .66; font-size: .7rem; }
.park-layout { display: grid; grid-template-columns: minmax(0, 2.25fr) minmax(280px, .75fr); gap: 20px; align-items: start; }
.map-card, .mission-panel, .badge-deck { border: 1px solid var(--line); border-radius: 22px; background: var(--panel); box-shadow: var(--shadow); overflow: hidden; }
.map-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px; overflow-x: auto; }
.area-tabs { display: flex; gap: 7px; }
.area-tab, .small-button { white-space: nowrap; padding: 8px 12px; border-radius: 999px; color: var(--muted); font-size: .73rem; font-weight: 800; }
.area-tab.active, .small-button.active { color: #07131f; background: var(--tab, var(--ice)); border-color: transparent; }
.map-scroll { overflow: auto; scrollbar-color: #5bcde9 transparent; }
.map-stage { position: relative; width: 100%; min-width: 720px; aspect-ratio: 52 / 25; }
.map-stage > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.ride-pins { position: absolute; inset: 0; }
.ride-pin { position: absolute; transform: translate(-50%, -50%); display: grid; place-items: center; width: clamp(24px, 2.5vw, 38px); aspect-ratio: 1; border: 2px solid rgba(255,255,255,.88); border-radius: 50%; color: #06121d; background: var(--pin); box-shadow: 0 4px 12px rgba(0,0,0,.45); cursor: pointer; font-weight: 1000; font-size: clamp(.65rem, 1vw, .85rem); transition: .18s ease; }
.ride-pin:hover, .ride-pin.selected { z-index: 3; transform: translate(-50%, -50%) scale(1.22); outline: 3px solid rgba(255,255,255,.55); }
.ride-pin.playable { animation: pulse 1.8s infinite; box-shadow: 0 0 0 5px rgba(117,220,255,.28), 0 0 30px rgba(117,220,255,.95); }
.ride-pin.filtered { opacity: .14; pointer-events: none; filter: grayscale(1); }
@keyframes pulse { 50% { box-shadow: 0 0 0 9px rgba(117,220,255,.05), 0 0 36px rgba(117,220,255,1); } }
.map-tip { margin: 0; padding: 9px 14px; color: var(--muted); font-size: .72rem; border-top: 1px solid var(--line); }
.mission-panel { min-height: 450px; }
.welcome-panel, .ride-panel { padding: 28px; }
.welcome-panel h2 { margin: 8px 0 14px; font-size: 2rem; }
.welcome-panel p, .ride-panel p { color: #bdd0dc; line-height: 1.55; }
.mini-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 24px; }
.mini-stats span { padding: 18px; border: 1px solid var(--line); border-radius: 14px; text-align: center; background: rgba(255,255,255,.04); }
.mini-stats strong, .mini-stats small { display: block; }
.mini-stats strong { font-size: 1.6rem; }
.mini-stats small { color: var(--muted); }
.ride-panel-head { display: flex; align-items: center; gap: 14px; }
.ride-number { display: grid; place-items: center; width: 58px; aspect-ratio: 1; flex: 0 0 auto; border-radius: 50%; color: #07131f; background: var(--area, var(--ice)); font-size: 1.25rem; font-weight: 1000; }
.ride-panel-head small, .ride-panel-head strong { display: block; }
.ride-panel-head small { color: var(--area, var(--ice)); letter-spacing: .1em; }
.ride-panel-head strong { margin-top: 2px; font-size: 1.25rem; }
.ride-type { padding-bottom: 14px; border-bottom: 1px solid var(--line); font-style: italic; }
.ride-panel h3 { margin: 20px 0 4px; font-size: .72rem; color: var(--area, var(--ice)); letter-spacing: .12em; text-transform: uppercase; }
.ride-progress { margin: 20px 0 0; color: var(--muted); font-size: .82rem; }
.construction { margin-top: 20px; padding: 15px; border: 1px dashed var(--area, var(--gold)); border-radius: 12px; }
.construction strong, .construction span { display: block; }
.construction strong { color: var(--area, var(--gold)); letter-spacing: .1em; }
.construction span { margin-top: 4px; color: var(--muted); font-size: .78rem; }
.start-ride { width: 100%; margin-top: 20px; padding: 14px; }
.start-ride:disabled { color: #9bb0bc; background: #1d3341; box-shadow: none; cursor: not-allowed; }
.badge-deck { margin-top: 20px; padding: 26px; }
.badge-deck h2 { font-size: clamp(2rem, 3.5vw, 3.4rem); }
.badge-list { display: flex; flex-wrap: wrap; gap: 10px; }
.badge-list > p { color: var(--muted); }
.badge-chip { display: flex; align-items: center; gap: 9px; padding: 10px 13px; border: 1px solid rgba(255,213,106,.35); border-radius: 999px; background: rgba(255,213,106,.09); }
.badge-chip i { display: grid; place-items: center; width: 28px; aspect-ratio: 1; border-radius: 50%; color: #07131f; background: var(--gold); font-style: normal; font-weight: 1000; }
footer { display: flex; justify-content: space-between; gap: 16px; padding: 24px clamp(16px, 4vw, 52px); color: #7892a1; border-top: 1px solid var(--line); font-size: .75rem; }
.modal, .game-dialog, .result-dialog { padding: 0; border: 0; color: var(--ink); background: transparent; }
.modal::backdrop, .game-dialog::backdrop, .result-dialog::backdrop { background: rgba(0,7,12,.84); backdrop-filter: blur(7px); }
.modal-card, .result-card { width: min(880px, calc(100vw - 24px)); max-height: 88vh; overflow: auto; padding: 26px; border: 1px solid var(--line); border-radius: 22px; background: #0a1b29; box-shadow: var(--shadow); }
.modal-card header { display: flex; align-items: start; justify-content: space-between; gap: 20px; }
.modal-card h2 { font-size: 2.2rem; }
.close-button { width: 40px; aspect-ratio: 1; border-radius: 50%; font-size: 1.5rem; }
.help-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.help-grid section { padding: 14px; border: 1px solid var(--line); border-radius: 12px; }
.help-grid h3 { margin: 0 0 5px; }
.help-grid p { margin: 0; color: var(--muted); line-height: 1.5; }
.legend-grid { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0; }
.legend-grid span { padding: 7px 9px; border-radius: 8px; background: rgba(255,255,255,.07); font-size: .75rem; }
.legend-grid .nom { color: #79c6ff; }.legend-grid .gen { color: #cf96ff; }.legend-grid .dat { color: #ffe160; }.legend-grid .akk { color: #ff777f; }.legend-grid .abl { color: #7be39a; }
.modal-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.modal-actions a { color: var(--ice); }
.primary-button { padding: 12px 18px; }
.game-dialog { width: 100vw; max-width: none; height: 100vh; max-height: none; }
.game-frame-shell { position: relative; width: 100%; height: 100%; background: #061522; }
.game-frame-shell iframe { width: 100%; height: 100%; border: 0; }
.close-ride { position: fixed; z-index: 50; top: 9px; left: 12px; padding: 9px 13px; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; color: white; background: rgba(3,16,25,.92); cursor: pointer; box-shadow: 0 4px 18px rgba(0,0,0,.4); }
.result-card { text-align: center; }
.result-badge { display: grid; place-items: center; width: 100px; aspect-ratio: 1; margin: 18px auto; border: 5px solid #ffe58b; border-radius: 50%; color: #07131f; background: var(--gold); font-size: 3rem; font-weight: 1000; box-shadow: 0 0 35px rgba(255,213,106,.3); }
.result-card h2 { margin: 0 0 8px; }
.result-card p { color: var(--muted); }

@media (max-width: 980px) {
  .park-layout { grid-template-columns: 1fr; }
  .mission-panel { min-height: 0; }
}
@media (max-width: 680px) {
  .topbar { padding: 10px 12px; }
  .brand small { display: none; }
  .scoreboard > span { min-width: 52px; padding: 4px 6px; }
  .intro { display: block; padding-top: 34px; }
  .enter-button { width: 100%; margin-top: 16px; }
  .map-stage { min-width: 640px; }
  .help-grid { grid-template-columns: 1fr; }
  footer { display: block; }
  footer span { display: block; margin: 4px 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; animation-duration: .001ms !important; animation-iteration-count: 1 !important; }
}