@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Space+Grotesk:wght@400;500;600;700&display=swap');
:root{--ink:#213d35;--green:#225b45;--lime:#dcf08c;--paper:#f5f5ed}*{box-sizing:border-box}body{margin:0;background:var(--paper);color:var(--ink);font-family:'DM Sans',sans-serif}button,input{font:inherit}button{cursor:pointer;color:inherit;border:1px solid #d2d8c9;background:transparent;border-radius:9px;padding:12px 18px}button:hover{filter:brightness(.94)}button:disabled{opacity:.5;cursor:wait}button:focus-visible,input:focus-visible{outline:3px solid #edaa50;outline-offset:3px}header{max-width:1400px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:28px 5%;border-bottom:1px solid #dbe0d2}.brand{font-family:'Space Grotesk';font-weight:700;letter-spacing:-1px;text-decoration:none;color:inherit;font-size:21px;display:flex;align-items:center;gap:10px}.mark{display:grid;place-items:center;width:34px;height:34px;background:var(--green);color:var(--lime);border-radius:50%;font-size:30px}.pill{font-size:10px;letter-spacing:1.4px;border:1px solid #d3d9ca;border-radius:30px;padding:9px 14px}#sound{font-size:12px;border:0}main{max-width:1280px;margin:66px auto 70px;padding:0 5%;display:grid;grid-template-columns:1fr 1.08fr;gap:68px;align-items:center}.eyebrow{font-size:10px;letter-spacing:2px;font-weight:700}.intro h1{font-family:'Space Grotesk';font-size:clamp(60px,6.8vw,94px);line-height:1.02;letter-spacing:-6px;margin:25px 0}.intro em{font-style:normal;color:#4b835b;position:relative}.intro em:after{content:'';position:absolute;bottom:-5px;left:0;right:0;border-bottom:4px solid #b9cf79;transform:rotate(-3deg)}.intro p{color:#738176;line-height:1.7;font-size:16px}.tags{display:flex;gap:12px;margin-top:30px}.tags span{background:#e8eddf;border-radius:6px;padding:10px 14px;font-size:12px;font-weight:600}.panel{background:#fffef8;border:1px solid #d8dfce;border-radius:18px;padding:30px;box-shadow:0 8px 0 #e9eddf}.panel-top{display:flex;justify-content:space-between;gap:8px}.live{font-size:8px;letter-spacing:.8px;color:#63805e}.panel h2{font-family:'Space Grotesk';font-size:26px;letter-spacing:-1px;margin:24px 0 6px}.muted{font-size:12px;color:#81907e;line-height:1.6;margin-top:6px}#characters{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:22px 0} .character{padding:12px 3px 8px;background:#f4f5ec;border:2px solid transparent;text-align:center}.character.selected{border-color:var(--green);background:#edf2dc}.character span{font-size:35px;display:block;margin-bottom:4px}.character b{font-size:11px}label{font-size:9px;font-weight:700;letter-spacing:1.5px;display:block;margin-bottom:8px}input{width:100%;padding:12px;border:1px solid #d9dfce;border-radius:7px;background:#fffef8;min-width:0;color:var(--ink)}.session-actions{margin-top:14px;display:grid;gap:12px}.primary{background:var(--green);color:#fff;border:0;font-weight:600;display:flex;justify-content:space-between;width:100%;padding:15px 18px}.primary span{color:var(--lime)}.join{display:flex;gap:8px}.join input{text-transform:uppercase;letter-spacing:3px;font-size:12px}.join button{white-space:nowrap;background:#e9efdc;border:0}.textbutton{font-size:11px;border:0;padding:14px 0 0}#notice{font-size:12px;color:#a24c32;line-height:1.5;margin:8px 0 0}.hidden{display:none!important}footer{max-width:1280px;margin:auto;padding:23px 5%;border-top:1px solid #dbe0d2;display:flex;justify-content:space-between;font-size:9px;letter-spacing:1px;color:#84907c}footer b{color:#4b835b;margin-left:10px}#roomcode{font-family:'Space Grotesk';font-size:36px;letter-spacing:9px;background:#edf2dc;width:100%;margin:15px 0}#roster>div{padding:14px 0;border-bottom:1px solid #e5e9dc;display:flex;gap:12px;align-items:center}#roster{margin-bottom:22px}#roster small{margin-left:auto;color:#81907e}body.playing main{display:block;max-width:1400px;margin-top:28px}body.playing .intro{display:none}.racebar{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.racebar h2{margin:5px 0;font-family:'Space Grotesk';font-size:28px}#clock{font-family:'Space Grotesk';font-size:30px}canvas{width:100%;height:440px;display:block;border-radius:16px;background:#daead8;border:1px solid #c5d5ba}.racehelp{text-align:center;font-size:10px;letter-spacing:1px;margin:20px 0;line-height:2.4}.racehelp span{margin:0 14px;color:#a5b49a}kbd{background:#fff;border:1px solid #ccd6c0;border-bottom-width:3px;padding:5px 9px;border-radius:5px}#race-status{text-align:center;font-weight:700;margin:12px;font-size:22px}#results{background:#fffef8;padding:25px;border-radius:15px}#results div{padding:12px;border-bottom:1px solid #e1e5d8}#results button{margin-top:18px}.touch{display:flex;justify-content:center;gap:15px}.touch button{touch-action:none;background:#e4ebd8;font-size:22px;width:60px}@media(min-width:900px){.touch{display:none}}@media(max-width:760px){header{padding:20px 5%}.pill{display:none}.brand{font-size:17px}main{grid-template-columns:1fr;gap:30px;margin-top:32px}.intro h1{font-size:62px;letter-spacing:-4px;margin:16px 0}.intro p{font-size:14px}.intro br{display:none}.intro .tags{margin-top:15px}.panel{padding:22px}footer{gap:20px;line-height:1.6}.racehelp span{margin:0 3px}.racebar h2{font-size:20px}#clock{font-size:22px}canvas{height:400px}}

/* Portrait course with parallel vertical lanes. */
body.playing main{max-width:1100px}body.playing canvas{height:clamp(460px,65vh,720px);max-width:900px;margin:auto}body.playing .racebar{max-width:900px;margin-left:auto;margin-right:auto}@media(max-width:760px){body.playing main{padding:0 3%;margin-top:18px}body.playing canvas{height:62vh;min-height:420px}.racehelp{font-size:9px;letter-spacing:0}.racebar button{padding:9px}}

.tags{flex-wrap:wrap;gap:8px}.tags span{padding:9px 11px}

.power-panel{max-width:900px;margin:0 auto 16px;padding:13px 17px;background:#e7efd5;border:1px solid #c6d5a8;border-radius:12px;display:flex;align-items:center;gap:20px}.power-panel>div{flex:1}.power-panel strong{font-size:11px;letter-spacing:1px;display:flex;justify-content:space-between}.power-panel progress{display:block;width:100%;height:12px;margin:9px 0;accent-color:#66af35}.power-panel progress::-webkit-progress-bar{background:#cfddb9;border-radius:8px}.power-panel progress::-webkit-progress-value{background:#70b834;border-radius:8px}.power-panel p{font-size:10px;margin:0;color:#5d7750}.power-panel button{font-weight:700;font-size:12px;background:#d0ed91}.power-panel button:enabled{background:#92d747;box-shadow:0 0 0 3px #92d74730}.race-actions{display:flex;gap:8px}.race-actions button{font-size:11px;padding:10px}@media(max-width:600px){.racebar{flex-wrap:wrap;gap:12px}.race-actions{width:100%;justify-content:flex-end}.power-panel{padding:12px;gap:10px}.power-panel button{padding:10px;font-size:10px}.power-panel p{line-height:1.5}}

select{width:100%;padding:12px;border:1px solid #cbd7bc;border-radius:8px;background:#f7f9ef;font:inherit;color:var(--ink);font-size:12px}.course-label{margin-top:20px}.celebration{position:relative;max-width:900px;margin:0 auto 16px;display:flex;gap:15px;align-items:center;padding:20px 25px;background:linear-gradient(120deg,#f8e7a0,#e5f3b9);border:2px solid #d6b84c;border-radius:16px;overflow:hidden;isolation:isolate}.celebration h2{font-family:'Space Grotesk';margin:5px 0;font-size:27px}.celebration p{margin:0;font-size:12px}.trophy{font-size:48px;animation:trophy-bounce 1s ease-in-out 3}#winner-character{font-size:40px}.celebration>div:last-child{position:relative}#confetti{position:absolute;inset:0;pointer-events:none;z-index:-1}#confetti i{position:absolute;top:-20px;width:8px;height:13px;animation:confetti-fall 3s ease-in 2 both}.winner-row{background:#edf4d4;border-radius:8px;font-weight:700}#results{max-width:900px;margin:20px auto}@keyframes confetti-fall{to{transform:translate(var(--drift),200px) rotate(560deg);opacity:0}}@keyframes trophy-bounce{50%{transform:translateY(-8px) rotate(8deg)}}@media(prefers-reduced-motion:reduce){#confetti i,.trophy{animation:none}}@media(max-width:600px){.celebration{padding:14px;gap:10px}.celebration h2{font-size:20px}.trophy{font-size:32px}#winner-character{font-size:30px}}

.hazard-guide{max-width:900px;margin:16px auto;font-size:11px;background:#eaf0de;border:1px solid #d2ddc4;border-radius:9px;padding:13px}.hazard-guide summary{cursor:pointer;font-weight:700}.hazard-guide>div{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:16px;line-height:1.5}@media(max-width:600px){.hazard-guide>div{grid-template-columns:1fr}}

/* A richer arcade presentation, from the starting line to the podium. */
body{background:radial-gradient(ellipse at 12% 30%,#e2edce 0,transparent 42%),radial-gradient(ellipse at 95% 75%,#efe2c6 0,transparent 40%),#f5f5ed}header{border-bottom-color:#cbd6c0}.mark{box-shadow:0 3px 0 #a3be73}.intro h1{font-weight:700}.intro .eyebrow{color:#5c8053}.hero-stats{display:flex;gap:23px;margin:30px 0}.hero-stats span{font-size:8px;letter-spacing:1px;display:flex;flex-direction:column;gap:5px;color:#6b7f62}.hero-stats b{font-family:'Space Grotesk';font-size:28px;color:#2e593f;letter-spacing:-1px}.panel{background:#fffef8eb;border-radius:22px;border-color:#c8d5bb;box-shadow:0 8px 0 #dfe7d2,0 22px 50px #354b2910}.panel-top{align-items:center}.live{border:1px solid #c9d7ba;background:#edf4e2;padding:6px 8px;border-radius:30px}.character{background:linear-gradient(145deg,#f0f3e8,#e6ecd9);border-radius:13px;transition:transform .15s,background .15s}.character:hover{transform:translateY(-3px)}.character.selected{background:#e4efcc;box-shadow:0 3px 0 #ccdcae}.runner-portrait{height:70px;margin:0!important}.runner-portrait canvas{width:80px;height:80px;border:0;background:transparent;border-radius:0;margin:-7px auto 0;box-shadow:none}.character b{font-size:12px}.primary{background:linear-gradient(120deg,#225b45,#36774e);box-shadow:0 4px 0 #174332;border-radius:11px}.primary:hover{transform:translateY(-1px)}.course-label{margin-top:24px}#course-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:12px}.course-card{text-align:left;padding:0 0 9px;overflow:hidden;border:2px solid transparent;background:#f1f3e9;border-radius:10px}.course-card.selected{border-color:#2b6646;background:#e9f1da}.course-card strong{display:block;font-size:10px;padding:7px 7px 3px}.course-card>span:last-child{display:block;font-size:8px;color:#6b7b61;padding:0 7px}.course-scenery{position:relative;display:block;height:45px;overflow:hidden;background:linear-gradient(180deg,#ffffff44,transparent),var(--course-color)}.course-scenery i{position:absolute;width:30%;height:75px;top:-7px;left:35%;background:#ffffff55;transform:perspective(40px) rotateX(15deg);border-left:2px dashed #ffffff99;border-right:2px dashed #ffffff99}.course-scenery b{position:absolute;right:7px;top:6px;color:#fff8d7;font-size:20px}.racebar{padding:15px 18px;background:#fffef8d9;border:1px solid #d3ddc7;border-radius:14px}.racebar h2{font-size:25px}.racebar .eyebrow{color:#6c865e}#clock{font-variant-numeric:tabular-nums;color:#34714e}.power-panel{background:linear-gradient(110deg,#e5efcf,#f3f5e7);box-shadow:0 3px 0 #dce6cc}body.playing canvas#track{border:4px solid #fdfbef;box-shadow:0 0 0 1px #bdcdb0,0 12px 30px #314e2520;border-radius:20px}.racehelp{background:#fffef899;border-radius:10px;padding:8px;margin:20px auto;max-width:900px}.celebration{box-shadow:0 8px 30px #bca34422}footer{color:#687f5b}#race-status{font-family:'Space Grotesk';font-size:20px}main{align-items:start}.intro{position:sticky;top:70px;padding-top:70px}@media(max-width:760px){.intro{position:static;padding-top:0}.hero-stats{margin:20px 0;gap:30px}.hero-stats b{font-size:23px}.runner-portrait{height:60px}.runner-portrait canvas{width:70px;height:70px}.panel{padding:20px}body.playing .racebar{padding:12px}body.playing .racebar h2{font-size:20px}.course-card strong{font-size:9px}}

.race-progress{max-width:900px;margin:0 auto 15px;display:flex;align-items:center;gap:14px;font-size:11px;font-weight:700;color:#547447}.race-progress>span:first-child{min-width:76px}.race-progress progress{flex:1;height:9px;accent-color:#4e975e}.race-progress progress::-webkit-progress-bar{background:#d5e0c7;border-radius:9px}.race-progress progress::-webkit-progress-value{background:linear-gradient(90deg,#648e4e,#b7d976);border-radius:9px}.course-card{transition:transform .18s,box-shadow .18s}.course-card:hover{transform:translateY(-3px);box-shadow:0 6px 15px #244b3a18}.panel{backdrop-filter:blur(12px)}#power-button:enabled{animation:power-ready 1.4s ease-in-out infinite}@keyframes power-ready{50%{box-shadow:0 0 0 6px #92d74725}}@media(prefers-reduced-motion:reduce){#power-button:enabled{animation:none}.course-card{transition:none}}

.combat-controls{max-width:900px;margin:0 auto 16px;display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.combat-controls button{font-size:12px;font-weight:700;background:#e6f0d3}.combat-controls button:enabled{background:#cfdf9a;border-color:#719657}.combat-controls p{grid-column:1/-1;margin:0;font-size:10px;color:#687d59;line-height:1.5}.racebar #mode-badge{font-size:8px;letter-spacing:.5px}@media(max-width:600px){.combat-controls button{padding:10px 5px;font-size:10px}.racebar #mode-badge{font-size:7px;padding:6px}}

.crowd-callout{max-width:900px;margin:8px auto 16px;text-align:center;padding:12px 18px;background:#f5edbc;border:1px solid #d9ca79;border-radius:12px;color:#50613a;font-weight:700;font-size:13px;box-shadow:0 3px 0 #e7deb1}

.cpu-panel{margin:20px 0;padding:17px;background:linear-gradient(120deg,#e7efdc,#f3efd6);border:1px solid #c5d3b6;border-radius:14px}.cpu-settings{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:14px 0}.cpu-settings label{margin:0;font-size:8px}.cpu-settings select{margin-top:6px}.cpu-panel .primary{margin-top:12px}.cpu-panel>p{font-size:10px;color:#70825e;line-height:1.5;margin:12px 0 0}.contact-mode-help{max-width:900px;margin:0 auto 15px;font-size:11px;color:#6f795f;padding:10px 14px;background:#efefdc;border-radius:8px}#combat-hint{font-weight:600;color:#526d45}

.gear-controls{max-width:900px;margin:0 auto 12px;display:flex;flex-wrap:wrap;gap:8px;padding:12px;background:#e3eef0;border:1px solid #b7cdd0;border-radius:12px}.gear-controls button{flex:1;min-width:130px;background:#f5fbf7;color:#244b3a;border:1px solid #a8c5bd;font-size:11px}.gear-controls p{width:100%;margin:3px 0 0;font-size:11px;color:#426675}.gear-controls button:disabled{opacity:.5}

.gear-heading{width:100%;font-size:11px;letter-spacing:1.3px;color:#31566c;font-weight:800;margin-bottom:3px;display:flex;justify-content:space-between;gap:10px}.gear-heading small{font-size:8px;letter-spacing:.6px;color:#718f9b}.gear-controls{background:linear-gradient(125deg,#dcebf0,#eef4e5);box-shadow:inset 0 1px 0 #fff}.gear-controls button{box-shadow:0 2px 0 #97b5b42b}.gear-controls button:enabled:hover{background:#fff;box-shadow:0 0 0 2px #6acfdc55}.gear-ammo{display:flex;gap:12px;width:100%;flex-wrap:wrap}.ammo-pack{display:flex;align-items:center;gap:4px;border:1px solid transparent;border-radius:6px;padding:5px 7px;color:#6f858c}.ammo-pack.selected{background:#fff9;border-color:#8dcbd4}.ammo-pack b{font-size:8px;letter-spacing:.6px;margin-right:5px}.ammo-pack i{display:block;width:10px;height:16px;border-radius:4px 4px 2px 2px;background:#b4c6c9;border:1px solid #94aeb4}.ammo-pack i.loaded{background:linear-gradient(90deg,#2e9fac,#9ffff3,#39b4c8);box-shadow:0 0 5px #55d8df77}.ammo-pack:nth-child(2) i.loaded{background:linear-gradient(90deg,#cb8e36,#fff0a5,#e9aa43);box-shadow:0 0 5px #edbe5c88}

/* Avoid a full-track compositor blur while the canvas animates. */
body.playing .panel{backdrop-filter:none}