/* SVG previews inherit the dark surface palette. Every animation is opt-in. */
.game-preview {
 --preview-bg:var(--bg,#0f0f13);
 --preview-paper:var(--paper,#18181d);
 --preview-ink:var(--ink,#f5f5fa);
 --preview-muted:var(--muted,#92929f);
 --preview-line:var(--line,#33333f);
 --preview-accent:var(--accent,#26bbff);
 display:block;
 width:100%;
 height:100%;
 overflow:visible;
 pointer-events:none;
}
.game-preview .preview-animated {
 animation-duration:5s;
 animation-timing-function:ease-in-out;
 animation-iteration-count:infinite;
 animation-play-state:paused;
 transform-box:fill-box;
 transform-origin:center;
}
.game-preview[data-preview-running] .preview-animated {animation-play-state:running}
.game-preview .preview-panel {fill:var(--preview-paper);stroke:var(--preview-line);stroke-width:1.5}
.game-preview .preview-grid {fill:none;stroke:var(--preview-line);stroke-width:1.5;stroke-dasharray:3 5}
.game-preview .preview-glyphs {fill:none;stroke:var(--preview-ink);stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.game-preview .preview-control-track {fill:none;stroke:var(--preview-line);stroke-width:3;stroke-linecap:round}
.game-preview .preview-caption-line {fill:none;stroke:var(--preview-muted);stroke-width:2.5;stroke-linecap:round;opacity:.65}

.preview-arena {--preview-accent:#26bbff}
.game-preview .preview-arena-floor {fill:#4338ca;opacity:.17}
.game-preview .preview-arena-lane {fill:none;stroke:var(--preview-line);stroke-width:1;stroke-dasharray:3 5;opacity:.65}
.game-preview .preview-arena-squad {animation-duration:4.2s}
.game-preview .preview-arena-left {color:#52d6ff;animation-name:preview-arena-left}
.game-preview .preview-arena-right {color:#ae91ff;animation-name:preview-arena-right}
.game-preview .preview-arena-card {fill:var(--preview-paper);stroke:currentColor;stroke-width:1.5}
.game-preview .preview-arena-emblem {fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.game-preview .preview-arena-health-track {fill:none;stroke:var(--preview-line);stroke-width:3;stroke-linecap:round}
.game-preview .preview-arena-health {fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;opacity:.8}
.game-preview .preview-arena-impact {animation-name:preview-arena-impact;animation-duration:4.2s}
.game-preview .preview-arena-flare {fill:#26bbff;opacity:.18}
.game-preview .preview-arena-blade {fill:none;stroke:#f5f5fa;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.game-preview .preview-arena-sparks {fill:none;stroke:#ae91ff;stroke-width:2;stroke-linecap:round;opacity:.6;animation-name:preview-arena-sparks;animation-duration:4.2s}

.preview-scale {--preview-accent:#f4ad73}
.game-preview .preview-scale-person {fill:var(--preview-muted)}
.game-preview .preview-scale-target {fill:var(--preview-accent);animation-name:preview-scale;transform-origin:center bottom}
.game-preview .preview-scale-spots {fill:none;stroke:var(--preview-bg);stroke-width:3;stroke-linecap:round;opacity:.6}
.game-preview .preview-ruler {fill:none;stroke:var(--preview-muted);stroke-width:2;stroke-linecap:round}
.game-preview .preview-scale-knob {fill:var(--preview-accent);animation-name:preview-scale-slider}

.preview-perfect-circle {--preview-accent:#c3b5f5}
.game-preview .preview-circle-guide {fill:none;stroke:var(--preview-line);stroke-width:2;stroke-dasharray:3 5}
.game-preview .preview-circle-stroke {fill:none;stroke:var(--preview-accent);stroke-width:4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0;animation-name:preview-circle-draw}
.game-preview .preview-circle-center {fill:var(--preview-muted)}
.game-preview .preview-circle-pen {fill:var(--preview-paper);stroke:var(--preview-accent);stroke-width:2;stroke-linecap:round;stroke-linejoin:round;animation-name:preview-circle-pen}

.game-preview .preview-color-reference {fill:#ed83a6}
.game-preview .preview-color-match {fill:#cf78ad;animation-name:preview-color-match}
.game-preview .preview-color-arrow {fill:none;stroke:var(--preview-muted);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.game-preview .preview-color-knob {fill:#f2a7c3;animation-name:preview-color-slider}
.game-preview .preview-color-knob-static {fill:var(--preview-muted)}

.preview-higher-lower {--preview-accent:#b9d8ae}
.game-preview .preview-higher-card {animation-name:preview-higher-card}
.game-preview .preview-higher-panel {stroke:var(--preview-accent);stroke-opacity:.6}
.game-preview .preview-higher-arrow {fill:none;stroke:var(--preview-accent);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;animation-name:preview-higher-arrow}
.game-preview .preview-lower-arrow {fill:none;stroke:var(--preview-muted);stroke-width:3;stroke-linecap:round;stroke-linejoin:round;opacity:.45}

.preview-time-lens {--preview-accent:#ebc788}
.game-preview .preview-photo-frame {fill:var(--preview-paper);stroke:var(--preview-accent);stroke-width:1.5}
.game-preview .preview-photo-sky {fill:#796855}
.game-preview .preview-photo-sun {fill:#e8ca96;opacity:.9}
.game-preview .preview-photo-mountains {fill:#ae946f}
.game-preview .preview-photo-building {fill:#625440;stroke:#e8ca96;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.game-preview .preview-photo-shimmer {fill:none;stroke:#e8ca96;stroke-width:2;opacity:.35;animation-name:preview-photo-glimmer}
.game-preview .preview-timeline {fill:none;stroke:var(--preview-muted);stroke-width:2;stroke-linecap:round}
.game-preview .preview-time-marker {fill:var(--preview-accent);animation-name:preview-timeline}

.preview-where-in-world {--preview-accent:#26bbff}
.game-preview .preview-map-grid {fill:none;stroke:var(--preview-line);stroke-width:1;opacity:.5}
.game-preview .preview-map-land {fill:#9ecbc8;opacity:.45}
.game-preview .preview-route-guide {fill:none;stroke:var(--preview-accent);stroke-width:2;opacity:.25}
.game-preview .preview-route {fill:none;stroke:var(--preview-accent);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:.045 .055;animation-name:preview-route}
.game-preview .preview-route-start {fill:var(--preview-accent);stroke:var(--preview-paper);stroke-width:2}
.game-preview .preview-map-pin {fill:var(--preview-accent);stroke:var(--preview-paper);stroke-width:2;animation-name:preview-pin;transform-origin:center bottom}
.game-preview .preview-map-pin circle {fill:var(--preview-paper);stroke:none}

.preview-country-shape {--preview-accent:#a8c7ee}
.game-preview .preview-country-outline {fill:var(--preview-accent);stroke:var(--preview-accent);stroke-width:2;stroke-linejoin:round;animation-name:preview-country;transform-origin:center}
.game-preview .preview-country-question {stroke:var(--preview-muted)}
.game-preview .preview-country-answer {fill:none;stroke:var(--preview-line);stroke-width:3;stroke-linecap:round}
.game-preview .preview-country-guesses {fill:var(--preview-line)}
.game-preview .preview-country-guesses circle:first-child {fill:var(--preview-accent)}

.game-preview .preview-globe-ocean {fill:var(--preview-paper);stroke:#78a7bd;stroke-width:2}
.game-preview .preview-globe-grid {fill:none;stroke:#78a7bd;stroke-width:1;opacity:.35}
.game-preview .preview-globe-land {fill:#8fa5a5;opacity:.55}
.game-preview .preview-globe-cold {fill:#78b8df}
.game-preview .preview-globe-warm {fill:#ef954c}
.game-preview .preview-globe-hot {fill:#e1573a;animation-name:preview-warming}
.game-preview .preview-warm-ring {fill:none;stroke:#e1573a;stroke-width:2;opacity:.5;animation-name:preview-warm-ring}
.game-preview .preview-temperature-track {fill:var(--preview-paper);stroke:var(--preview-line);stroke-width:2}
.game-preview .preview-temperature-fill {fill:none;stroke:#e1573a;stroke-width:5;stroke-linecap:round;animation-name:preview-thermometer;transform-origin:center bottom}
.game-preview .preview-temperature-bulb {fill:#e1573a}
.game-preview .preview-temperature-ticks {fill:none;stroke:var(--preview-muted);stroke-width:2;stroke-linecap:round}

.game-preview .preview-letter-tile {animation-name:preview-tile-reveal}
.game-preview .preview-letter-face {fill:#538d4e;stroke:#538d4e;stroke-width:1.5}
.game-preview .preview-word-state-2 {fill:#b59f3b;stroke:#b59f3b}
.game-preview .preview-word-state-4 {fill:#3a3a3c;stroke:#565758}
.game-preview .preview-empty-tiles {fill:none;stroke:var(--preview-line);stroke-width:1.5}
.game-preview .preview-step-1 {animation-delay:-.2s}
.game-preview .preview-step-2 {animation-delay:-.4s}
.game-preview .preview-step-3 {animation-delay:-.6s}
.game-preview .preview-step-4 {animation-delay:-.8s}
.game-preview .preview-step-5 {animation-delay:-1s}
.game-preview .preview-step-6 {animation-delay:-1.2s}
.game-preview .preview-step-7 {animation-delay:-1.4s}

.game-preview .preview-group-tile {fill:var(--preview-paper);stroke:var(--preview-line);stroke-width:1}
.game-preview .preview-group-row-0 {fill:#deb8d9;stroke:#deb8d9}
.game-preview .preview-group-label {fill:none;stroke:var(--preview-muted);stroke-width:2;stroke-linecap:round;opacity:.65}
.game-preview .preview-found-group {animation-name:preview-group}
.game-preview .preview-found-group .preview-group-label {stroke:#352638;opacity:.8}

.game-preview .preview-equation-tile {animation-name:preview-equation-reveal}
.game-preview .preview-equation-face {fill:#398874;stroke:#398874;stroke-width:1}
.game-preview .preview-equation-state-1 {fill:#161803;stroke:#454635}
.game-preview .preview-equation-state-2,
.game-preview .preview-equation-state-4,
.game-preview .preview-equation-state-6 {fill:#820458;stroke:#a5247b}
.game-preview .preview-equation-dots {fill:var(--preview-line)}

@keyframes preview-arena-left {0%,15%,100%{transform:translateX(0)}40%,58%{transform:translateX(7px)}72%{transform:translateX(-2px)}}
@keyframes preview-arena-right {0%,15%,100%{transform:translateX(0)}40%,58%{transform:translateX(-7px)}72%{transform:translateX(2px)}}
@keyframes preview-arena-impact {0%,20%,100%{transform:scale(.92);opacity:.75}44%,58%{transform:scale(1.14);opacity:1}72%{transform:scale(1);opacity:.85}}
@keyframes preview-arena-sparks {0%,20%,100%{transform:scale(.75);opacity:.25}44%,58%{transform:scale(1.2);opacity:.9}74%{transform:scale(1.3);opacity:.1}}
@keyframes preview-scale {0%,100%{transform:scale(.9)}45%,65%{transform:scale(1.05)}}
@keyframes preview-scale-slider {0%,100%{transform:translateX(-8px)}45%,65%{transform:translateX(11px)}}
@keyframes preview-circle-draw {0%,100%{stroke-dashoffset:0}22%{stroke-dashoffset:.7}70%,88%{stroke-dashoffset:0}}
@keyframes preview-circle-pen {0%,100%{transform:translate(0,0)}22%{transform:translate(3px,-3px)}70%,88%{transform:translate(0,0)}}
@keyframes preview-color-match {0%,100%{fill:#cf78ad}45%,70%{fill:#ed83a6}}
@keyframes preview-color-slider {0%,100%{transform:translateX(0)}45%,70%{transform:translateX(-25px)}}
@keyframes preview-higher-card {0%,100%{transform:translateY(0)}40%,70%{transform:translateY(-3px)}}
@keyframes preview-higher-arrow {0%,100%{transform:translateY(0);opacity:.75}40%,70%{transform:translateY(-3px);opacity:1}}
@keyframes preview-photo-glimmer {0%,100%{opacity:.35}50%{opacity:.65}}
@keyframes preview-timeline {0%,100%{transform:translateX(-36px)}45%,65%{transform:translateX(44px)}}
@keyframes preview-route {from{stroke-dashoffset:0}to{stroke-dashoffset:-.4}}
@keyframes preview-pin {0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes preview-country {0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
@keyframes preview-warming {0%,100%{fill:#ef954c}45%,70%{fill:#ae2437}}
@keyframes preview-warm-ring {0%,100%{transform:scale(.9);opacity:.35}50%{transform:scale(1.1);opacity:.6}}
@keyframes preview-thermometer {0%,100%{transform:scaleY(.72)}45%,70%{transform:scaleY(1)}}
@keyframes preview-tile-reveal {0%,100%{transform:scaleY(1)}25%{transform:scaleY(.84)}42%,85%{transform:scaleY(1)}}
@keyframes preview-group {0%,100%{transform:translateY(0)}40%,70%{transform:translateY(-3px)}}
@keyframes preview-equation-reveal {0%,100%{transform:scaleY(1)}28%{transform:scaleY(.88)}45%,85%{transform:scaleY(1)}}

@media (prefers-reduced-motion:reduce) {
 .game-preview .preview-animated {animation:none!important}
}