html,
body {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    margin: 8px;
    background-color: black;
}

/* =========================
   GAME ARENA
   ========================= */

#gameArena {
    position: relative;
    height: 80vh;
    border: 2px solid #00eaff;

    background-color: #050505;

    background-image: linear-gradient(
            rgba(0, 234, 255, 0.25) 1px,
            transparent 1px
    ),
    linear-gradient(
            90deg,
            rgba(0, 234, 255, 0.25) 1px,
            transparent 1px
    );

    background-size: 40px 40px;

    box-shadow: 0 0 20px rgba(0, 234, 255, 0.35);
}


/* =========================
   PLAYER
   ========================= */

#player {
    position: absolute;

    width: 135px;
    height: 55px;

    left: 40px;
    top: 40px;
}

.cycle {
    position: relative;

    width: 135px;
    height: 55px;

    transform-origin: center center;
}

.arena-rider {
    display: block;

    width: 135px;
    height: 55px;

    user-select: none;
    pointer-events: none;
}


/* =========================
   CHECKPOINTS
   ========================= */

.checkpoint {
    position: absolute;

    width: 40px;
    height: 40px;

    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;

    color: #00eaff;

    border: 2px solid #00eaff;
    border-radius: 50%;

    background-color: rgba(0, 234, 255, 0.08);

    font-family: monospace;
    font-size: 18px;
    font-weight: bold;

    box-shadow: 0 0 8px rgba(0, 234, 255, 0.8),
    inset 0 0 8px rgba(0, 234, 255, 0.3);
}


/* Responsive checkpoint positions */

#checkpoint1 {
    left: 15%;
    top: 9%;
}

#checkpoint2 {
    left: 27%;
    top: 35%;
}

#checkpoint3 {
    left: 43%;
    top: 12%;
}

#checkpoint4 {
    left: 60%;
    top: 82%;
}

#checkpoint5 {
    left: 73%;
    top: 45%;
}

#checkpoint6 {
    left: 91%;
    top: 20%;
}

#checkpoint7 {
    left: 81%;
    top: 75%;
}

#checkpoint8 {
    left: 67%;
    top: 22%;
}



#checkpoint9 {
    left: 52%;
    top: 50%;
}

#checkpoint10 {
    left: 37%;
    top: 80%;
}

#checkpoint11 {
    left: 22%;
    top: 56%;
}

#checkpoint12 {
    left: 15%;
    top: 80%;
}

#checkpoint13 {
    left: 4%;
    top: 44%;
}


.checkpoint.completed {
    background: #00eaff !important;
    color: #000000 !important;

    border-color: #ffffff !important;

    box-shadow: 0 0 15px #00eaff,
    0 0 30px #00eaff,
    inset 0 0 10px #ffffff !important;
}


/* =========================
   COURSE COMPLETE SCREEN
   ========================= */

#courseComplete {
    display: none;

    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    padding: 30px 50px;

    text-align: center;

    background: rgba(0, 10, 14, 0.95);

    border: 2px solid #00eaff;

    box-shadow: 0 0 20px #00eaff,
    inset 0 0 20px rgba(0, 234, 255, 0.2);

    z-index: 100;
}

.complete-title {
    color: #00eaff;

    font-family: monospace;
    font-size: 32px;
    font-weight: bold;

    text-shadow: 0 0 8px #00eaff,
    0 0 16px #00eaff;
}

.complete-subtitle {
    margin-top: 10px;

    color: #ffffff;

    font-family: monospace;
    font-size: 14px;

    letter-spacing: 3px;
}

#finalScoreDisplay {
    margin-top: 12px;

    color: #ff6600;

    font-family: monospace;
    font-size: 24px;
    font-weight: bold;

    letter-spacing: 2px;

    text-shadow:
        0 0 8px #ff6600,
        0 0 14px rgba(255, 102, 0, 0.6);
}

#restartButton {
    margin-top: 25px;

    padding: 10px 20px;

    color: #00eaff;
    background: transparent;

    border: 1px solid #00eaff;

    font-family: monospace;
    font-size: 16px;

    cursor: pointer;
}

#restartButton:hover {
    color: #000000;
    background: #00eaff;

    box-shadow: 0 0 15px #00eaff;
}


/* =========================
   ENTER THE ARENA
   ========================= */

#arenaStart {
    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    padding: 35px 55px;

    text-align: center;

    background: rgba(0, 10, 14, 0.95);

    border: 2px solid #00eaff;

    box-shadow: 0 0 20px #00eaff,
    inset 0 0 20px rgba(0, 234, 255, 0.2);

    z-index: 100;
}

.start-title {
    color: #00eaff;

    font-family: monospace;
    font-size: 32px;
    font-weight: bold;

    letter-spacing: 3px;

    text-shadow: 0 0 8px #00eaff,
    0 0 16px #00eaff;
}

.cycle-selection {
    display: flex;

    gap: 20px;

    justify-content: center;

    margin-top: 25px;
}

.cycle-choice {
    width: 120px;

    padding: 10px;

    color: #00eaff;
    background: transparent;

    border: 1px solid #00eaff;

    font-family: monospace;
    font-size: 16px;
    font-weight: bold;

    cursor: pointer;
}

.cycle-choice:hover {
    color: #000000;
    background: #00eaff;

    box-shadow: 0 0 15px #00eaff;
}

.cycle-choice.orange {
    color: #ff7a00;

    border-color: #ff7a00;
}

.cycle-choice.orange:hover {
    color: #000000;
    background: #ff7a00;

    box-shadow: 0 0 15px #ff7a00;
}


/* Hide game objects until cycle selection */

#gameArena.waiting #player,
#gameArena.waiting .checkpoint {
    visibility: hidden;
}


/* =========================
   GAME COUNTDOWN
   ========================= */

#gameCountdown {
    display: none;

    position: absolute;

    left: 50%;
    top: 50%;

    transform: translate(-50%, -50%);

    color: #00eaff;

    font-family: monospace;
    font-size: 90px;
    font-weight: bold;

    text-align: center;

    text-shadow: 0 0 10px #00eaff,
    0 0 20px #00eaff,
    0 0 40px #00eaff;

    z-index: 200;

    pointer-events: none;
}


/* =========================
   RACE TIMER
   ========================= */

#raceTimer {
    position: absolute;

    top: 15px;
    right: 20px;

    padding: 8px 14px;

    color: #00eaff;

    background: rgba(0, 10, 14, 0.85);

    border: 1px solid #00eaff;

    font-family: monospace;
    font-size: 20px;
    font-weight: bold;

    letter-spacing: 2px;

    text-shadow: 0 0 6px #00eaff,
    0 0 12px #00eaff;

    box-shadow: 0 0 10px rgba(0, 234, 255, 0.6),
    inset 0 0 8px rgba(0, 234, 255, 0.15);

    z-index: 50;
}


/* =========================
   FINAL TIME
   ========================= */

#finalTimeDisplay {
    margin-top: 20px;

    color: #00eaff;

    font-family: monospace;
    font-size: 24px;
    font-weight: bold;

    letter-spacing: 2px;

    text-shadow: 0 0 6px #00eaff,
    0 0 12px #00eaff;
}


/* =====================================================
MOBILE ARENA
Landscape
===================================================== */

@media (max-width: 1000px) and (orientation: landscape) {

    html,
    body {
        margin: 0;
        padding: 0;

        width: 100%;
        height: 100%;

        overflow: hidden;
        overflow-x: hidden;

        overscroll-behavior-x: none;

        background: #000000;
    }

    body > h1 {
        display: none;
    }

    /* =========================
       MOBILE GAME ARENA
       ========================= */
    #gameArena {
        position: fixed;

        top: 0;
        left: 0;
        right: 0;

        width: 100%;

        margin: 0;

        box-sizing: border-box;

        background-size: 40px 40px;

        overflow: hidden;

        border: 3px solid #00eaff;
    }


    /* =========================
       MOBILE PLAYER
       ========================= */
    #player {
        width: 90px;
        height: 37px;

        left: 40px;
        top: 40px;
    }

    .cycle {
        width: 90px;
        height: 37px;
    }

    .arena-rider {
        width: 90px;
        height: 37px;
    }


    /* =========================
       MOBILE CHECKPOINTS
       ========================= */
   #checkpoint1 {
    left: 30%;
    top: 15%;
}

#checkpoint2 {
    left: 70%;
    top: 78%;
}

#checkpoint3 {
    left: 86%;
    top: 16%;
}

#checkpoint4 {
    left: 12%;
    top: 78%;
}

#checkpoint5 {
    left: 48%;
    top: 50%;
}

#checkpoint6 {
    left: 91%;
    top: 48%;
}

#checkpoint7 {
    left: 25%;
    top: 35%;
}

#checkpoint8 {
    left: 30%;
    top: 60%;
}

#checkpoint9 {
    left: 72%;
    top: 45%;
}

#checkpoint10 {
    left: 68%;
    top: 12%;
}

#checkpoint11 {
    left: 8%;
    top: 48%;
}

#checkpoint12 {
    left: 50%;
    top: 18%;
}

#checkpoint13 {
    left: 50%;
    top: 82%;
}


    /* =========================
       MOBILE START SCREEN
       ========================= */
    #arenaStart {
        width: min(70%, 500px);

        padding: 20px 25px;

        box-sizing: border-box;
    }

    .start-title {
        font-size: 26px;
    }

    .cycle-selection {
        margin-top: 16px;
    }


    /* =========================
       MOBILE COMPLETE SCREEN
       ========================= */
    #courseComplete {
        width: min(70%, 500px);

        padding: 20px 25px;

        box-sizing: border-box;
    }

    .complete-title {
        font-size: 26px;
    }


    /* =========================
       MOBILE COUNTDOWN
       ========================= */
    #gameCountdown {
        font-size: 70px;
    }


    /* =========================
       MOBILE TIMER
       ========================= */
    #raceTimer {
        top: 10px;
        right: 10px;

        padding: 6px 10px;

        font-size: 16px;
    }
}

/* =====================================================
   ROTATE DEVICE SCREEN
   ===================================================== */

#rotateDevice {
    display: none;
}

@media (max-width: 1000px) and (orientation: portrait) {

    #rotateDevice {
        position: fixed;
        inset: 0;

        display: flex;
        align-items: center;
        justify-content: center;

        background: #000000;

        z-index: 99999;
    }

    .rotate-message {
        text-align: center;
        font-family: monospace;
        color: #00eaff;
    }

    .rotate-title {
        font-size: 28px;
        font-weight: bold;
        letter-spacing: 3px;

        text-shadow: 0 0 8px #00eaff,
        0 0 18px #00eaff;
    }

    .rotate-subtitle {
        margin-top: 15px;

        font-size: 16px;
        letter-spacing: 2px;

        color: #ffffff;
    }
}

/* Light trail layer */
#lightTrailCanvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

/* Keep checkpoints above the trail */
.checkpoint {
    position: absolute;
    z-index: 20 !important;
}

/* Keep the bike above the trail */
#player {
    position: absolute;
    z-index: 30 !important;
}

/* =========================
   EXIT ARENA
   ========================= */

#exitArena {
    position: fixed;
    right: 18px;
    bottom: 14px;

    padding: 8px 14px;

    color: #00eaff;
    background: rgba(0, 0, 0, 0.75);

    border: 1px solid #00eaff;
    border-radius: 4px;

    font-family: monospace;
    font-size: 14px;
    font-weight: bold;
    letter-spacing: 2px;

    text-decoration: none;

    z-index: 100;
}

#exitArena:hover {
    color: #000;
    background: #00eaff;
}



/* =====================================================
   TERMINUS ARENA PRESENTATION
   ===================================================== */
:root {
    --arena-cyan:#67f7ff;
    --arena-orange:#ff7800;
    --arena-ink:#010508;
    --arena-panel:rgba(1,8,12,.94);
}

body {
    margin:0;
    min-height:100vh;
    color:#dffeff;
    background:
        radial-gradient(circle at 15% 15%,rgba(0,234,255,.12),transparent 28%),
        radial-gradient(circle at 86% 72%,rgba(255,120,0,.1),transparent 31%),
        #000306;
    font-family:"Courier New",monospace;
}

.arena-backdrop {
    position:fixed;
    inset:0;
    z-index:-1;
    pointer-events:none;
    opacity:.52;
    background-image:
        linear-gradient(rgba(103,247,255,.035) 1px,transparent 1px),
        linear-gradient(90deg,rgba(103,247,255,.035) 1px,transparent 1px),
        repeating-linear-gradient(115deg,transparent 0 80px,rgba(255,120,0,.025) 81px,transparent 82px);
    background-size:64px 64px,64px 64px,100% 100%;
    -webkit-mask-image:linear-gradient(to bottom,#000,transparent 88%);
    mask-image:linear-gradient(to bottom,#000,transparent 88%);
}

.arena-shell {
    width:min(1680px,calc(100% - 40px));
    margin:28px auto 84px;
}

.arena-header {
    position:relative;
    padding:27px 34px 24px;
    overflow:hidden;
    border:1px solid rgba(103,247,255,.55);
    border-bottom-color:rgba(255,120,0,.62);
    background:linear-gradient(105deg,rgba(0,234,255,.075),transparent 48%,rgba(255,120,0,.065)),rgba(0,5,8,.94);
    box-shadow:0 0 32px rgba(0,234,255,.14),inset 0 0 34px rgba(0,234,255,.025);
}

.arena-header::after {
    content:"";
    position:absolute;
    right:-9%;
    top:-90%;
    width:38%;
    height:260%;
    border-left:1px solid rgba(255,120,0,.35);
    background:linear-gradient(90deg,transparent,rgba(255,120,0,.045));
    transform:skewX(-20deg);
}

.arena-eyebrow {
    margin:0 0 10px;
    color:var(--arena-orange);
    font-size:10px;
    font-weight:bold;
    letter-spacing:.28em;
}

.arena-title-row {
    position:relative;
    z-index:1;
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:25px;
}

.arena-title-row h1 {
    margin:0;
    color:#02070a;
    font-family: "Orbitron", "Arial Black", sans-serif;
    font-size:clamp(42px,6vw,82px);
    line-height:.9;
    letter-spacing:-.045em;
    -webkit-text-stroke:2px var(--arena-cyan);
    text-shadow:0 0 18px rgba(103,247,255,.55);
}

.arena-title-row h1 span {
    color:#090502;
    -webkit-text-stroke-color:var(--arena-orange);
    text-shadow:0 0 18px rgba(255,120,0,.62);
}

.arena-sector {
    min-width:210px;
    padding:12px 15px;
    border:1px solid rgba(103,247,255,.35);
    background:rgba(0,7,10,.82);
}

.arena-sector span,.arena-sector strong { display:block; }
.arena-sector span { color:#60858a;font-size:8px;letter-spacing:.22em; }
.arena-sector strong { margin-top:6px;color:var(--arena-cyan);font-size:12px;letter-spacing:.17em; }
.arena-intro { position:relative;z-index:1;margin:17px 0 0;color:#8cafb4;font-size:12px;letter-spacing:.13em; }

.arena-frame {
    position:relative;
    margin-top:14px;
    padding:10px;
    border:6px solid #000;
    outline:1px solid rgba(103,247,255,.42);
    background:#000;
    box-shadow:0 0 35px rgba(0,234,255,.13),inset 0 0 45px rgba(0,234,255,.025);
}

.arena-frame-bar {
    position:relative;
    display:grid;
    grid-template-columns:1fr auto auto auto auto;
    align-items:center;
    gap:20px;
    min-height:42px;
    padding:0 13px;
    color:rgba(172,238,244,.58);
    font-size:9px;
    letter-spacing:.18em;
}
.arena-frame-bar strong { color:var(--arena-orange);font-size:11px;letter-spacing:.24em; }
.arena-frame-bar span:nth-child(3) { text-align:right; }

#gameArena {
    height:clamp(690px,72vh,900px);
    overflow:hidden;
    isolation:isolate;
    border-color:rgba(103,247,255,.82);
    background-color:#01070a;
    background-image:
        linear-gradient(rgba(103,247,255,.11) 1px,transparent 1px),
        linear-gradient(90deg,rgba(103,247,255,.11) 1px,transparent 1px),
        linear-gradient(rgba(103,247,255,.18) 1px,transparent 1px),
        linear-gradient(90deg,rgba(103,247,255,.18) 1px,transparent 1px),
        radial-gradient(circle at 50% 50%,rgba(0,234,255,.055),transparent 50%);
    background-size:40px 40px,40px 40px,200px 200px,200px 200px,100% 100%;
    box-shadow:inset 0 0 90px rgba(0,234,255,.09),0 0 22px rgba(0,234,255,.22);
}

#gameArena::before {
    content:"";
    position:absolute;
    inset:12px;
    z-index:1;
    pointer-events:none;
    border:1px solid rgba(103,247,255,.14);
    box-shadow:inset 0 0 42px rgba(0,0,0,.72);
}

.arena-atmosphere {
    position:absolute;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:
        linear-gradient(90deg,rgba(0,234,255,.12),transparent 14%,transparent 86%,rgba(255,120,0,.12)),
        repeating-linear-gradient(0deg,transparent 0 5px,rgba(103,247,255,.018) 6px);
}

.arena-scanline {
    position:absolute;
    top:-12%;
    left:0;
    z-index:2;
    width:100%;
    height:12%;
    pointer-events:none;
    border-bottom:1px solid rgba(103,247,255,.62);
    background:linear-gradient(180deg,transparent,rgba(103,247,255,.12));
    box-shadow:0 8px 20px rgba(103,247,255,.16);
    animation:arena-scan 9s linear infinite;
}

.arena-corner {
    position:absolute;
    z-index:40;
    width:34px;
    height:34px;
    pointer-events:none;
    filter:drop-shadow(0 0 7px rgba(103,247,255,.65));
}
.corner-nw{top:17px;left:17px;border-top:3px solid var(--arena-cyan);border-left:3px solid var(--arena-cyan)}
.corner-ne{top:17px;right:17px;border-top:3px solid var(--arena-orange);border-right:3px solid var(--arena-orange)}
.corner-sw{bottom:17px;left:17px;border-bottom:3px solid var(--arena-orange);border-left:3px solid var(--arena-orange)}
.corner-se{right:17px;bottom:17px;border-right:3px solid var(--arena-cyan);border-bottom:3px solid var(--arena-cyan)}

.arena-readout {
    position:absolute;
    z-index:40;
    top:24px;
    color:rgba(167,237,243,.56);
    font-size:8px;
    font-weight:bold;
    letter-spacing:.18em;
    pointer-events:none;
}
.readout-left{left:68px}.readout-right{right:68px;color:rgba(255,159,88,.68)}

#arenaStart,#courseComplete {
    width:min(590px,calc(100% - 50px));
    padding:40px 48px;
    overflow:hidden;
    border:1px solid rgba(103,247,255,.88);
    background:linear-gradient(135deg,rgba(0,234,255,.08),transparent 48%,rgba(255,120,0,.075)),rgba(0,7,11,.97);
    box-shadow:0 0 35px rgba(0,234,255,.34),inset 0 0 35px rgba(0,234,255,.055);
}

#arenaStart::before,#courseComplete::before {
    content:"";
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:3px;
    background:linear-gradient(90deg,var(--arena-cyan),transparent 45%,var(--arena-orange));
    box-shadow:0 0 12px rgba(103,247,255,.55);
}

.start-kicker {
    margin-bottom:12px;
    color:var(--arena-orange);
    font-size:9px;
    font-weight:bold;
    letter-spacing:.26em;
}
.start-title,.complete-title { font-family: "Orbitron", "Arial Black", sans-serif;font-size:clamp(30px,4vw,48px);letter-spacing:.04em; }
.start-subtitle { margin-top:10px;color:#86aeb3;font-size:10px;letter-spacing:.24em; }
.cycle-selection { gap:14px;margin-top:30px; }
.cycle-choice {
    position:relative;
    width:150px;
    padding:13px 12px;
    border-width:1px;
    letter-spacing:.15em;
    background:rgba(0,234,255,.025);
    box-shadow:inset 0 0 14px rgba(0,234,255,.04);
}
.cycle-choice.orange { background:rgba(255,120,0,.025);box-shadow:inset 0 0 14px rgba(255,120,0,.04); }

.checkpoint {
    border-radius:3px;
    transform:rotate(45deg);
    background:rgba(0,12,16,.9);
    animation:checkpoint-pulse 3s ease-in-out infinite;
}
.checkpoint::before {
    content:"";
    position:absolute;
    inset:5px;
    border:1px solid rgba(103,247,255,.32);
}
.checkpoint { text-indent:-9999px; }
.checkpoint::after {
    content:attr(id);
    display:flex;
    position:absolute;
    inset:0;
    align-items:center;
    justify-content:center;
    color:var(--arena-cyan);
    font-size:0;
    text-indent:0;
    transform:rotate(-45deg);
}
#checkpoint1::after{content:"1"}#checkpoint2::after{content:"2"}#checkpoint3::after{content:"3"}#checkpoint4::after{content:"4"}#checkpoint5::after{content:"5"}#checkpoint6::after{content:"6"}#checkpoint7::after{content:"7"}#checkpoint8::after{content:"8"}#checkpoint9::after{content:"9"}#checkpoint10::after{content:"10"}#checkpoint11::after{content:"11"}#checkpoint12::after{content:"12"}#checkpoint13::after{content:"13"}
.checkpoint::after { font-size:15px;font-weight:bold; }
.checkpoint.completed { transform:rotate(45deg) scale(.82); }

#raceTimer {
    position:absolute;
    top:50%;
    left:50%;
    right:auto;
    transform:translate(-50%,-50%);
    z-index:2;
    min-width:104px;
    box-sizing:border-box;
    padding:17px 10px 5px;
    text-align:center;
    border-color:rgba(103,247,255,.75);
    background:rgba(0,7,11,.92);
}
#raceTimer::before {
    content:"RACE TIME";
    position:absolute;
    top:4px;
    left:0;
    width:100%;
    color:#63858a;
    font-size:7px;
    letter-spacing:.22em;
    text-shadow:none;
}

#exitArena {
    position:relative;
    right:auto;
    bottom:auto;
    display:inline-flex;
    align-items:center;
    min-height:32px;
    box-sizing:border-box;
    padding:6px 12px;
    border-radius:0;
    background:rgba(0,5,8,.9);
}

@keyframes arena-scan { to{transform:translateY(940%)} }
@keyframes checkpoint-pulse {
    0%,100%{box-shadow:0 0 7px rgba(0,234,255,.55),inset 0 0 7px rgba(0,234,255,.18)}
    50%{box-shadow:0 0 16px rgba(0,234,255,.9),0 0 30px rgba(0,234,255,.22),inset 0 0 10px rgba(0,234,255,.3)}
}

@media(max-width:1000px) and (orientation:landscape){
    html,body{width:100%;height:100%;margin:0;padding:0;overflow:hidden}
    .arena-shell{display:flex;flex-direction:column;width:100%;height:100vh;height:100dvh;margin:0}
    .arena-header{display:none}
    .arena-frame{display:flex;flex:1 1 auto;flex-direction:column;min-height:0;margin:0;padding:6px;border:6px solid #000;outline:0;box-sizing:border-box}
    .arena-frame-bar{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:8px;flex:0 0 auto;min-height:38px;padding:0 6px;font-size:8px}
    .arena-frame-bar span:nth-child(3){display:none}
    .arena-frame-bar strong{font-size:9px}
    #exitArena{min-height:30px;padding:5px 8px;font-size:9px;letter-spacing:1px}
    #gameArena{
        position:relative;
        inset:auto;
        flex:1 1 auto;
        width:100%;
        height:auto;
        min-height:0;
        box-sizing:border-box;
    }
    .arena-readout{display:none}
    #raceTimer{min-width:88px;padding:15px 8px 4px;font-size:14px;letter-spacing:1px}
    #raceTimer::before{top:3px;font-size:6px}
}

@media(max-width:720px){
    .arena-shell{width:calc(100% - 20px)}
    .arena-header{padding:24px 20px}
    .arena-title-row{display:block}
    .arena-sector{margin-top:22px;min-width:0}
    .arena-frame-bar{grid-template-columns:1fr auto auto}
    .arena-frame-bar span:nth-child(3){display:none}
}

@media(prefers-reduced-motion:reduce){
    .arena-scanline,.checkpoint{animation:none}
}

/* Code-built rider: scalable HTML/CSS geometry, no raster artwork */
.vector-cycle {
    --cycle-color:var(--arena-cyan);
    --cycle-soft:rgba(103,247,255,.36);
    position:relative;
    display:block;
    width:135px;
    height:55px;
    overflow:visible;
    filter:drop-shadow(0 0 5px var(--cycle-color)) drop-shadow(0 0 13px var(--cycle-soft));
}

.vector-cycle.orange {
    --cycle-color:var(--arena-orange);
    --cycle-soft:rgba(255,120,0,.38);
}

.cycle-wheel {
    position:absolute;
    bottom:1px;
    z-index:2;
    width:43px;
    height:43px;
    border:4px solid var(--cycle-color);
    border-radius:50%;
    background:
        radial-gradient(circle,transparent 0 28%,var(--cycle-color) 30% 35%,rgba(0,8,12,.96) 38% 59%,var(--cycle-color) 62% 67%,#010407 70%);
    box-shadow:0 0 8px var(--cycle-color),inset 0 0 8px var(--cycle-soft);
}

.wheel-rear { left:2px; }
.wheel-front { right:1px; }

.cycle-chassis {
    position:absolute;
    left:27px;
    bottom:8px;
    z-index:4;
    width:84px;
    height:25px;
    border-bottom:3px solid var(--cycle-color);
    background:linear-gradient(115deg,rgba(1,6,9,.98) 0 19%,var(--cycle-soft) 20% 25%,rgba(2,12,16,.98) 27% 73%,var(--cycle-color) 75% 79%,rgba(1,6,9,.98) 81%);
    clip-path:polygon(0 58%,20% 12%,70% 0,100% 47%,83% 100%,15% 94%);
    box-shadow:inset 0 -5px 10px rgba(0,0,0,.85);
}

.cycle-canopy {
    position:absolute;
    left:56px;
    top:4px;
    z-index:3;
    width:48px;
    height:29px;
    border:2px solid var(--cycle-color);
    border-bottom:0;
    border-radius:70% 90% 10% 12%;
    background:linear-gradient(135deg,var(--cycle-soft),rgba(0,10,15,.94) 58%);
    clip-path:polygon(8% 100%,20% 28%,48% 0,82% 16%,100% 100%);
}

.cycle-rider {
    position:absolute;
    left:69px;
    top:1px;
    z-index:5;
    width:14px;
    height:14px;
    border:2px solid var(--cycle-color);
    border-radius:50%;
    background:#02080b;
    box-shadow:0 0 6px var(--cycle-color);
}

.cycle-rider::after {
    content:"";
    position:absolute;
    left:5px;
    top:12px;
    width:19px;
    height:19px;
    border-left:3px solid var(--cycle-color);
    border-bottom:3px solid var(--cycle-color);
    transform:skewX(-24deg) rotate(-23deg);
}

.cycle-energy {
    position:absolute;
    left:34px;
    top:18px;
    z-index:6;
    width:62px;
    height:3px;
    background:linear-gradient(90deg,transparent,var(--cycle-color) 18% 84%,transparent);
    box-shadow:0 0 7px var(--cycle-color),0 0 14px var(--cycle-soft);
}

@media(max-width:1000px) and (orientation:landscape){
    .vector-cycle{width:90px;height:37px;transform-origin:top left;transform:scale(.667)}
}

/* Refine cycle scale and make the rider's forward direction unmistakable */
#player,
.cycle {
    width:112px;
    height:46px;
}

.vector-cycle {
    width:135px;
    height:55px;
    transform:scale(.83);
    transform-origin:top left;
}

.cycle-rider {
    left:70px;
    top:1px;
}

.cycle-rider::before {
    content:"";
    position:absolute;
    left:9px;
    top:3px;
    width:11px;
    height:4px;
    background:var(--cycle-color);
    clip-path:polygon(0 0,100% 50%,0 100%);
    box-shadow:0 0 5px var(--cycle-color);
}

.cycle-rider::after {
    left:-24px;
    top:11px;
    width:32px;
    height:16px;
    border:0;
    background:linear-gradient(75deg,rgba(1,7,10,.98) 0 42%,var(--cycle-soft) 44% 66%,var(--cycle-color) 68%);
    clip-path:polygon(100% 0,78% 18%,60% 100%,0 90%,12% 58%,62% 43%);
    transform:rotate(-4deg);
    transform-origin:right top;
}

.cycle-chassis::after {
    content:"";
    position:absolute;
    right:7px;
    top:3px;
    width:23px;
    height:3px;
    background:var(--cycle-color);
    box-shadow:0 0 5px var(--cycle-color);
    transform:rotate(17deg);
    transform-origin:right center;
}

.start-title,
.complete-title {
    color:#01070a;
    -webkit-text-stroke:1.5px var(--arena-cyan);
    text-shadow:0 0 9px rgba(103,247,255,.42);
}

@media(max-width:1000px) and (orientation:landscape){
    #player,.cycle{width:76px;height:31px}
    .vector-cycle{width:135px;height:55px;transform:scale(.56)}
}

/* Articulated forward-facing rider, centered between both wheels */
.cycle-rider {
    position:absolute;
    inset:0;
    z-index:8;
    width:135px;
    height:55px;
    border:0;
    border-radius:0;
    background:none;
    box-shadow:none;
}

.cycle-rider::before,
.cycle-rider::after {
    content:none;
}

.rider-head,
.rider-back,
.rider-torso,
.rider-arm,
.rider-leg {
    position:absolute;
    display:block;
    background:var(--cycle-color);
    box-shadow:0 0 5px var(--cycle-color);
}

.rider-head {
    left:77px;
    top:2px;
    width:15px;
    height:13px;
    border:2px solid var(--cycle-color);
    border-radius:7px 3px 3px 7px;
    background:#02080b;
}

.rider-head::after {
    content:"";
    position:absolute;
    left:9px;
    top:2px;
    width:12px;
    height:6px;
    background:var(--cycle-color);
    clip-path:polygon(0 0,100% 50%,0 100%,18% 50%);
    box-shadow:0 0 5px var(--cycle-color);
}

.rider-torso {
    left:55px;
    top:16px;
    width:30px;
    height:17px;
    border:2px solid var(--cycle-color);
    border-radius:9px 3px 5px 8px;
    background:#02080b;
    clip-path:polygon(0 33%,68% 0,100% 18%,78% 100%,18% 84%);
    transform:rotate(-7deg);
    transform-origin:center;
}

.rider-back {
    position:absolute;
    left:47px;
    top:16px;
    width:19px;
    height:21px;
    box-sizing:border-box;
    border:2px solid var(--cycle-color);
    border-radius:12px 3px 7px 12px;
    background:#02080b;
    box-shadow:0 0 5px var(--cycle-color);
    transform:rotate(-8deg);
}

.rider-arm {
    left:76px;
    top:18px;
    width:29px;
    height:3px;
    transform:rotate(17deg);
    transform-origin:left center;
}

.rider-arm::after {
    content:"";
    position:absolute;
    right:-2px;
    top:-2px;
    width:7px;
    height:7px;
    border:2px solid var(--cycle-color);
    border-radius:50%;
    background:#02080b;
}

.rider-leg {
    left:58px;
    top:29px;
    width:26px;
    height:9px;
    box-sizing:border-box;
    border:2px solid var(--cycle-color);
    border-radius:5px;
    background:#02080b;
    box-shadow:0 0 3px var(--cycle-color);
    transform:rotate(17deg);
    transform-origin:left center;
}

.rider-leg::after {
    content:"";
    position:absolute;
    right:-15px;
    top:-1px;
    width:20px;
    height:9px;
    box-sizing:border-box;
    border:2px solid var(--cycle-color);
    border-radius:5px;
    background:#02080b;
    box-shadow:0 0 3px var(--cycle-color);
    transform:rotate(-24deg);
    transform-origin:left center;
}

.cycle-canopy::before {
    content:"";
    position:absolute;
    left:-15px;
    bottom:-2px;
    width:31px;
    height:5px;
    border-radius:5px;
    background:var(--cycle-color);
    box-shadow:0 0 6px var(--cycle-color);
}