/* Storm Rider test skin (2026-10-14). Everything is scoped to body.storm-skin, so the live Arena is not affected. */
body.storm-skin {
    --arena-cyan:#d6ebff;
    --arena-orange:#ffb347;
    background:
        radial-gradient(circle at 18% 12%, rgba(90,70,160,.20), transparent 34%),
        radial-gradient(circle at 84% 78%, rgba(184,121,74,.12), transparent 36%),
        #070c0b;
}
.storm-skin .arena-backdrop {
    background-image:
        radial-gradient(ellipse at 30% 20%, rgba(190,200,230,.10), transparent 40%),
        radial-gradient(ellipse at 70% 60%, rgba(140,120,190,.12), transparent 45%);
    background-size:100% 100%;
    -webkit-mask-image:none;
    mask-image:none;
}
.storm-test-banner {
    position:fixed; top:8px; left:50%; transform:translateX(-50%); z-index:200;
    padding:4px 14px; font:700 11px/1.2 "Courier New",monospace; letter-spacing:.2em;
    color:#ffb347; background:rgba(11,13,20,.9); border:1px solid rgba(255,179,71,.5);
}
.storm-skin #gameArena {
    border-color:var(--storm-accent,#3f8a76);
    background-color:#06050c;
    background-image:
        radial-gradient(ellipse at 20% 30%, rgba(180,190,225,.09), transparent 45%),
        radial-gradient(ellipse at 75% 70%, rgba(130,110,185,.12), transparent 50%),
        repeating-linear-gradient(105deg, transparent 0 140px, rgba(255,255,255,.018) 141px, transparent 143px);
    background-size:100% 100%;
    box-shadow:0 0 26px var(--storm-accent,#3f8a76);
}
.storm-skin .checkpoint {
    color:var(--storm-accent2,#ffcf8a); border:2px solid var(--storm-accent2,#ffcf8a); background:rgba(8,6,14,.88);
    box-shadow:0 0 10px var(--storm-accent2,#ffcf8a), inset 0 0 8px var(--storm-accent2,#ffcf8a);
}
.storm-skin .checkpoint::before { border-color:var(--storm-accent2,#ffcf8a); opacity:.45; }
.storm-skin .checkpoint::after { color:var(--storm-accent2,#ffcf8a); }
.storm-skin .checkpoint.completed {
    background:var(--storm-accent2,#ffcf8a) !important; color:#0a0810 !important; border-color:#fff !important;
    box-shadow:0 0 15px var(--storm-accent2,#ffcf8a), 0 0 32px var(--storm-accent2,#ffcf8a), inset 0 0 10px #fff !important;
}
.storm-skin #exitArena { color:var(--storm-accent,#d6ebff); border-color:var(--storm-accent,#8c93ad); }
.storm-palette {
    position:fixed; left:10px; bottom:12px; z-index:200; display:flex; gap:6px; flex-wrap:wrap; max-width:60vw;
}
.storm-palette button {
    font:700 10px/1 "Courier New",monospace; letter-spacing:.14em; padding:6px 9px; cursor:pointer;
    color:var(--storm-accent,#d6ebff); background:rgba(6,5,12,.88); border:1px solid var(--storm-accent,#8c93ad);
}
 .storm-palette button.on { background:var(--storm-accent,#d6ebff); color:#06050c; }
.storm-palette.storm-dimbar { bottom:48px; }
/* RELAY RINGS: the gates. Same hit area as before (the old diamond's box), a new look that reads against a busy board. */
.storm-skin .checkpoint {
    width:56px; height:56px; margin:-8px 0 0 -8px; transform:none !important; border-radius:50% !important; box-sizing:border-box;
    background:radial-gradient(circle, #0a0714 58%, rgba(10,7,20,.55) 100%) !important;
    border:3px solid rgba(255,255,255,.85) !important; animation:none !important; text-indent:-9999px;
    box-shadow:0 0 0 3px rgba(3,2,9,.85), 0 0 10px rgba(255,255,255,.35) !important;
}
.storm-skin .checkpoint::before {
    content:""; position:absolute; inset:-11px; border-radius:50%; border:2px dashed rgba(255,138,31,.75); opacity:.9;
    animation:gate-spin 9s linear infinite;
}
.storm-skin .checkpoint::after {
    transform:none !important; font-size:22px !important; font-weight:800 !important; color:#fff !important; text-shadow:0 0 6px rgba(0,0,0,.9);
}
.storm-skin .checkpoint.gate-later { border-color:rgba(155,107,255,.7) !important; box-shadow:0 0 0 3px rgba(3,2,9,.85) !important; opacity:.75; }
.storm-skin .checkpoint.gate-later::before { border-color:rgba(155,107,255,.45); animation-duration:18s; }
.storm-skin .checkpoint.gate-later::after { color:rgba(235,225,255,.85) !important; font-size:18px !important; }
.storm-skin .checkpoint.gate-next {
    opacity:1; border-color:#fff !important;
    box-shadow:0 0 0 3px rgba(3,2,9,.9), 0 0 16px #ff8a1f, 0 0 34px rgba(255,138,31,.55) !important;
    animation:gate-pulse 1.1s ease-in-out infinite !important;
}
.storm-skin .checkpoint.gate-next::before { border:3px solid #ff8a1f; border-style:dashed; inset:-14px; animation-duration:3.2s; opacity:1; }
.storm-skin .checkpoint.completed {
    background:#fff !important; border-color:#fff !important; opacity:.5; animation:none !important;
    box-shadow:0 0 0 3px rgba(3,2,9,.8) !important;
}
.storm-skin .checkpoint.completed::before { display:none; }
.storm-skin .checkpoint.completed::after { color:#0a0714 !important; text-shadow:none; }
@keyframes gate-spin { to { transform:rotate(360deg); } }
@keyframes gate-pulse { 0%,100% { filter:brightness(1); } 50% { filter:brightness(1.35); } }
@media (prefers-reduced-motion: reduce) { .storm-skin .checkpoint::before, .storm-skin .checkpoint.gate-next { animation:none !important; } }
/* THE STORY COURSE: fourteen gates along the map's paths, one letter of the message each */
.storm-skin #checkpoint1 { left:calc(20% - 20px); top:calc(14% - 20px); }
.storm-skin #checkpoint2 { left:calc(36% - 20px); top:calc(20% - 20px); }
.storm-skin #checkpoint3 { left:calc(50% - 20px); top:calc(34% - 20px); }
.storm-skin #checkpoint4 { left:calc(41% - 20px); top:calc(45% - 20px); }
.storm-skin #checkpoint5 { left:calc(28% - 20px); top:calc(33% - 20px); }
.storm-skin #checkpoint6 { left:calc(13% - 20px); top:calc(52% - 20px); }
.storm-skin #checkpoint7 { left:calc(26% - 20px); top:calc(74% - 20px); }
.storm-skin #checkpoint8 { left:calc(40% - 20px); top:calc(84% - 20px); }
.storm-skin #checkpoint9 { left:calc(62% - 20px); top:calc(83% - 20px); }
.storm-skin #checkpoint10 { left:calc(74% - 20px); top:calc(72% - 20px); }
.storm-skin #checkpoint11 { left:calc(87% - 20px); top:calc(56% - 20px); }
.storm-skin #checkpoint12 { left:calc(82% - 20px); top:calc(30% - 20px); }
.storm-skin #checkpoint13 { left:calc(66% - 20px); top:calc(27% - 20px); }
.storm-skin #checkpoint14 { left:calc(50% - 20px); top:calc(52% - 20px); }
.storm-skin #checkpoint14::after { content:"14"; }
#stormMessage {
    position:absolute; top:0.6%; left:50%; transform:translateX(-50%); z-index:8; pointer-events:none; white-space:pre;
    font:800 12px/1 "Courier New",monospace; letter-spacing:.26em; color:rgba(255,255,255,.85); padding:3px 10px;
    background:rgba(5,3,12,.7); border:1px solid rgba(167,123,255,.55); text-shadow:0 0 8px rgba(167,123,255,.9);
}
#stormMessage.whole { color:#fff; border-color:#ff8a1f; text-shadow:0 0 12px #ff8a1f; }
#stormBoost { position:absolute; left:2.5%; bottom:13%; z-index:8; pointer-events:none; font:700 10px/1 "Courier New",monospace; letter-spacing:.18em; color:rgba(255,255,255,.8); }
#stormBoost .lab { display:block; margin-bottom:5px; }
#stormShards { position:absolute; left:2.5%; bottom:19%; z-index:8; pointer-events:none; font:700 10px/1 "Courier New",monospace; letter-spacing:.18em; color:#c6a0ff; text-shadow:0 0 6px rgba(167,123,255,.8); }
#stormBoost .bar { display:block; width:150px; height:8px; background:rgba(5,3,12,.8); border:1px solid rgba(255,255,255,.55); }
#stormBoost i { display:block; height:100%; width:100%; background:linear-gradient(90deg,#ff8a1f,#fff); }
#stormBoost.low i { background:#ff3b42; }
#stormFxCanvas { position:absolute; inset:0; width:100%; height:100%; z-index:25; pointer-events:none; }
.storm-skin .storm-label { transition:opacity .5s; }
body.storm-racing .storm-label { opacity:.28; }
.storm-skin .cycle { transition:transform .14s ease-out; }
.storm-skin .cycle.boosting .vector-cycle { filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 9px var(--cycle-color)) drop-shadow(0 0 22px var(--cycle-color)); }
.storm-skin .cycle.shocked .vector-cycle { filter:brightness(2.6) drop-shadow(0 0 14px #fff); }
#stormBoostButton { display:none; position:absolute; right:3%; bottom:12%; z-index:30; width:78px; height:78px; border-radius:50%;
    font:800 13px "Courier New",monospace; letter-spacing:.1em; color:#fff; background:rgba(255,138,31,.22); border:3px solid #ff8a1f;
    box-shadow:0 0 14px rgba(255,138,31,.6); touch-action:none; user-select:none; }
@media (pointer:coarse) { #stormBoostButton { display:block; } #stormBoost .lab { display:none; } }
/* small screens (a phone on its side): smaller gates, and the test controls step out of the way */
@media (max-height:520px) {
    .storm-skin .checkpoint { width:42px; height:42px; margin:-6px 0 0 -6px; border-width:2px !important; }
    .storm-skin .checkpoint::before { inset:-7px; }
    .storm-skin .checkpoint.gate-next::before { inset:-9px; }
    .storm-skin .checkpoint::after { font-size:15px !important; }
    .storm-skin .checkpoint.gate-later::after { font-size:13px !important; }
    .storm-palette { display:none; }
    .storm-test-banner { font-size:8px; padding:2px 8px; top:2px; }
    #stormMessage { font-size:9px; letter-spacing:.18em; }
    #stormBoost { bottom:6%; }
    .storm-skin .storm-label { font-size:7px; }
}
.storm-ending { margin-bottom:16px; text-align:center; }
.storm-ending .line { font:800 28px/1.2 "Courier New",monospace; letter-spacing:.3em; color:#fff; text-shadow:0 0 14px #ff8a1f; }
.storm-ending .reply { margin-top:8px; font:700 15px "Courier New",monospace; letter-spacing:.2em; color:#c6a0ff; }
/* the header and the clock leave the old look behind: white and orange letters, purple frame */
.storm-skin .arena-title-row h1 { color:#fff; -webkit-text-stroke:0; text-shadow:0 0 16px rgba(167,123,255,.85), 0 0 2px #fff; }
.storm-skin .arena-title-row h1 span { color:#ff8a1f; -webkit-text-stroke:0; text-shadow:0 0 16px rgba(255,138,31,.7); }
.storm-skin .arena-header, .storm-skin .arena-frame { border-color:rgba(167,123,255,.55); }
.storm-skin #raceTimer { color:#fff; border-color:rgba(167,123,255,.7); text-shadow:0 0 10px rgba(167,123,255,.9); }
.storm-skin .arena-eyebrow { color:#ff8a1f; }
.storm-skin .start-title { color:#fff !important; -webkit-text-stroke:0 !important; text-shadow:0 0 18px rgba(167,123,255,.9), 0 0 2px #fff !important; }
.storm-skin .start-kicker { color:#ff8a1f !important; }
.storm-skin .complete-title { color:#fff !important; -webkit-text-stroke:0 !important; text-shadow:0 0 18px rgba(167,123,255,.9), 0 0 2px #fff !important; }
.storm-skin .complete-subtitle { color:#ff8a1f !important; }
.storm-skin #finalTimeDisplay { color:#fff !important; text-shadow:0 0 12px rgba(167,123,255,.9) !important; }
.storm-skin #restartButton { color:#fff; border-color:rgba(255,255,255,.75); }
.storm-skin #restartButton:hover { background:#fff; color:#0a0714; }
.storm-skin .cycle-choice:not(.orange) { color:#fff; border-color:rgba(255,255,255,.75); background:rgba(167,123,255,.10); }
.storm-skin .cycle-choice:not(.orange):hover { background:#fff; color:#0a0714; }
/* the craft sits on a soft dark pool, so it never disappears into the busy board */
.storm-skin #player::after {
    content:""; position:absolute; left:-24px; top:-20px; right:-24px; bottom:-20px; z-index:-1; pointer-events:none;
    background:radial-gradient(ellipse at center, rgba(3,2,9,.82) 0%, rgba(3,2,9,.5) 45%, rgba(3,2,9,0) 72%);
}
.storm-skin .vector-cycle {
    filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 4px var(--cycle-color)) drop-shadow(0 0 12px var(--cycle-soft));
}

.storm-skin .storm-label {
    position:absolute; z-index:2; transform:translateX(-50%); pointer-events:none;
    font:700 10px/1.4 "Courier New",monospace; letter-spacing:.22em; text-align:center; white-space:nowrap;
}
.storm-skin .storm-label .nm { display:block; color:#fff; text-shadow:0 0 8px var(--storm-accent,#ff8a1f); }
.storm-skin .storm-label .pr { display:block; font-size:.82em; letter-spacing:.16em; opacity:.85; }
.storm-skin .storm-label.frontier-label { transform:translate(-50%,-50%); opacity:.9; }
.storm-skin .storm-label.frontier-label .nm { color:#ff8a1f; text-shadow:0 0 8px #ff8a1f; }
@media (max-width:1000px) { .storm-skin .storm-label { font-size:8px; letter-spacing:.14em; } }
/* ---- the storm rider: a layered, wing-shaped craft drawn with CSS only (hull, armour plate, spine, cockpit core, engine glow, nose light) ---- */
.storm-skin #stormBackdropCanvas {
    position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none;
}
.storm-skin #lightTrailCanvas { z-index:5; }
.storm-skin .vector-cycle {
    --cycle-color:#d6ebff;
    --cycle-soft:rgba(190,215,255,.45);
    --cycle-hot:#fff;
    filter:drop-shadow(0 0 3px var(--cycle-color)) drop-shadow(0 0 11px var(--cycle-soft));
}
.storm-skin .vector-cycle.orange {
    --cycle-color:#ffb347;
    --cycle-soft:rgba(255,179,71,.45);
}
/* the old bike parts are reused as new parts, so every old look is reset first */
.storm-skin .vector-cycle > * {
    position:absolute !important; display:block !important; border:0 !important; border-radius:0 !important;
    transform:none !important; box-shadow:none !important; background:none !important; animation:none; clip-path:none;
    left:auto; right:auto; top:auto; bottom:auto; width:auto; height:auto; opacity:1;
}
.storm-skin .vector-cycle > .cycle-rider { display:none !important; }
/* VALOR flies SHARD DARK (2026-10-17, chosen by Johno): a stealth flying wing with lit blue leading edges, a sawtooth back edge, engine slots and floating shards.
   His face is the real portrait, cropped small inside the bubble. The craft is an inline vector drawing made by cyberjet.py. */
.storm-skin .vector-cycle { --cycle-color:#65faff; --cycle-soft:rgba(101,250,255,.45); --cycle-hot:#fff; }
.storm-skin .vector-cycle::before, .storm-skin .vector-cycle::after { content:none; }
.storm-skin .vector-cycle > .cycle-wheel, .storm-skin .vector-cycle > .cycle-chassis, .storm-skin .vector-cycle > .cycle-canopy,
.storm-skin .vector-cycle > .cycle-rider, .storm-skin .vector-cycle > .cycle-energy { display:none !important; }
.storm-skin .vector-cycle > .valor-fig { left:0; top:0; width:100%; height:100%; z-index:6; transform:none !important; }
.valor-svg { position:absolute; left:14px; top:7.5px; overflow:visible; }
.valor-svg .stc { stop-color:var(--cycle-color); }
.valor-svg .v-flame, .valor-svg .v-flame-core { opacity:.95; animation:storm-engine .14s steps(2) infinite; }
.valor-svg .v-rim { stroke:#c4cbe0; }
.valor-svg .v-trim { stroke:var(--cycle-color); stroke-width:.9; }
.valor-svg .v-flame { transform-box:fill-box; transform-origin:right center; }
.cycle.boosting .valor-svg .v-flame { transform:scaleX(2.1) scaleY(1.2); }
.cycle.boosting .valor-svg { filter:brightness(1.18) drop-shadow(0 0 4px #3da5ff); }
/* the craft turns and mirrors with the direction of travel, so VALOR's face is turned back to stay upright */
.valor-svg .v-head { transform-box:fill-box; transform-origin:center; }
.cycle[data-dir="left"] .valor-svg .v-head { transform:scaleX(-1); }
.cycle[data-dir="up"] .valor-svg .v-head { transform:rotate(90deg); }
.cycle[data-dir="down"] .valor-svg .v-head { transform:rotate(-90deg); }
.valor-svg .v-jet { animation:jet-bob 2.4s ease-in-out infinite alternate; }
@keyframes jet-bob { from { transform:translateY(-.7px); } to { transform:translateY(.9px); } }
.cycle.boosting .valor-svg .v-jet { animation:none; transform:rotate(-2.5deg); transform-origin:80px 33px; }
@keyframes storm-hull {
    0%,100% { clip-path:polygon(100% 50%, 74% 30%, 52% 10%, 30% 0%, 16% 2%, 28% 28%, 6% 46%, 0% 50%, 6% 54%, 28% 72%, 16% 98%, 30% 100%, 52% 90%, 74% 70%); }
    50%     { clip-path:polygon(100% 50%, 75% 28%, 50% 14%, 26% 6%, 12% 10%, 26% 30%, 4% 46%, 0% 50%, 4% 54%, 26% 70%, 12% 90%, 26% 94%, 50% 86%, 75% 72%); }
}
@keyframes storm-core { from { opacity:.65; transform:scale(.85) !important; } to { opacity:1; transform:scale(1.15) !important; } }
@keyframes storm-spine { 0%,100% { opacity:.5; } 50% { opacity:1; } }
@keyframes storm-engine { from { opacity:.55; } to { opacity:1; } }
@media (prefers-reduced-motion: reduce) {
    .valor-svg *, .storm-skin .vector-cycle::before, .storm-skin .vector-cycle > * { animation:none !important; }
}