@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800&display=swap');
*{box-sizing:border-box}body{margin:0;background:#120e24 url('world-nebula.svg') center/cover fixed;color:#fff1eb;font-family:Outfit,system-ui,sans-serif}main{max-width:1100px;margin:auto;padding:24px}button,a{font:inherit}button{cursor:pointer;border:1px solid #ffffff25;border-radius:12px;background:#352644;color:#fff1eb;padding:11px 16px}button:disabled{opacity:.45;cursor:default}button:focus-visible,a:focus-visible,canvas:focus-visible{outline:3px solid #ffe2a1;outline-offset:4px}header{display:flex;justify-content:space-between;align-items:center;gap:12px}header a{color:#e7d5f7;text-decoration:none;font-size:13px}header>span,.eyebrow{font-size:9px;letter-spacing:2px;color:#eac1e6;font-weight:700}header button{font-size:11px}.intro{display:flex;justify-content:space-between;align-items:center;max-width:900px;margin:26px auto 15px}.intro h1{font-size:clamp(40px,6vw,66px);line-height:1.03;letter-spacing:-2px;margin:14px 0}.intro em{font-style:normal;color:#ffd092}.intro p{color:#d1b8dc;font-size:13px}.intro img{width:150px;height:170px;object-fit:contain;filter:drop-shadow(0 10px 20px #ce8df333)}.arena{background:#241a33ed;border:1px solid #dbb1ed55;border-radius:22px;padding:15px;box-shadow:0 25px 60px #0005}.hud{display:flex;align-items:center;justify-content:space-between;padding:6px 9px 18px;gap:10px}.hud small,.records small{font-size:9px;letter-spacing:1.5px;color:#bfa7d3}.hud strong{display:block;margin-top:5px;font-size:22px;color:#ffe1a4}#lives{color:#ffa5bc}.hud button{font-size:11px}.stage{position:relative;overflow:hidden;border-radius:14px;background:#231c39}canvas{width:100%;display:block;aspect-ratio:9/4;touch-action:manipulation}#runner-overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;flex-direction:column;text-align:center;padding:16px;background:#140b28c9;backdrop-filter:blur(4px)}#runner-overlay[hidden]{display:none}#overlay-kicker{font-size:9px;letter-spacing:2px;color:#f5c3dd}#overlay-title{font-size:35px;margin:12px 0}#overlay-text{font-size:13px;color:#e0cee9;line-height:1.6;margin:0 0 16px}#runner-start,#jump{background:linear-gradient(135deg,#ffe3a0,#ffa876);color:#38202a;border:0;font-weight:800;box-shadow:0 4px 0 #8d493c}#runner-start{min-width:170px}.controls{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 5px 4px}.controls b{display:block;font-size:11px;color:#ffda9c;letter-spacing:1px}.controls span{display:block;font-size:10px;color:#bca2cb;margin-top:7px}#jump{min-width:160px;font-size:19px;touch-action:manipulation}#jump small{display:block;font-size:9px;font-weight:500;margin-top:3px}#runner-status{text-align:center;font-size:11px;color:#d1b8dc;min-height:16px;margin:15px 0 3px}.records{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:20px 0}.records article,.collection{background:#241a33ed;border:1px solid #ffffff18;border-radius:16px;padding:20px}.records strong{display:block;font-size:27px;color:#ffda9c;margin-top:8px}.collection h2{font-size:28px;margin:12px 0}.collection p,.how p{font-size:12px;color:#c7afda;line-height:1.7}#runner-characters{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:20px 0}.runner-character{text-align:center;padding:12px 6px;background:#160f25}.runner-character img{display:block;width:100%;height:110px;object-fit:contain}.runner-character b{display:block;font-size:13px;margin:8px 0}.runner-character small{font-size:10px;color:#c7afd6}.runner-character[aria-pressed="true"]{border-color:#ffd994;background:#49313e}.runner-character:disabled img{filter:grayscale(.8);opacity:.5}.how{display:grid;grid-template-columns:repeat(3,1fr);gap:25px;margin:25px 0}.how b{display:block;color:#ffe2ab}footer{text-align:center;font-size:9px;letter-spacing:2px;color:#c2a4d4;padding:15px}footer p{font-size:10px;letter-spacing:0;max-width:630px;margin:12px auto;line-height:1.6;color:#a88fba}@media(max-width:600px){main{padding:16px 10px}header>span{display:none}.intro{margin-top:20px}.intro img{width:100px;height:130px}.intro p{font-size:11px;max-width:220px}.intro .eyebrow{font-size:7px;letter-spacing:1px}.arena{padding:8px;border-radius:16px}.hud{padding:8px 5px 12px}.hud strong{font-size:17px}.hud small{font-size:7px}.hud button{padding:8px}#overlay-title{font-size:23px;margin:7px 0}#overlay-text{font-size:10px;margin-bottom:10px}#overlay-kicker{font-size:7px}#runner-start{padding:8px;font-size:12px}.controls span{font-size:8px;max-width:170px}#jump{min-width:125px;padding:10px}#jump small{font-size:8px}.records{gap:7px}.records article{padding:12px}.records small{font-size:7px}.records strong{font-size:21px}.collection{padding:15px}.collection h2{font-size:24px}#runner-characters{gap:7px;grid-template-columns:repeat(2,1fr)}.runner-character img{height:90px}.how{gap:12px}.how p{font-size:10px}}
.hud-tools{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}#runner-speed{display:block;font-size:10px;color:#ffe3aa;margin:5px 0}.arena:fullscreen,body.runner-expanded .arena{width:100vw;height:100dvh;max-width:none;display:flex;flex-direction:column;border:0;border-radius:0;background:#171025;padding:12px max(12px,env(safe-area-inset-right)) 8px max(12px,env(safe-area-inset-left));margin:0}.arena:fullscreen .stage,body.runner-expanded .arena .stage{flex:1;min-height:0;border-radius:12px}.arena:fullscreen canvas,body.runner-expanded .arena canvas{height:100%;width:100%;object-fit:contain;background:#171025}.arena:fullscreen .hud,body.runner-expanded .arena .hud{flex-shrink:0;padding-bottom:10px}.arena:fullscreen .controls,body.runner-expanded .arena .controls{flex-shrink:0;padding-top:10px}.arena:fullscreen #runner-status,body.runner-expanded .arena #runner-status{margin:8px 0 0;flex-shrink:0}body.runner-expanded{overflow:hidden}body.runner-expanded .arena{position:fixed;inset:0;z-index:1000}.arena:fullscreen #jump,body.runner-expanded .arena #jump{min-width:180px;min-height:54px}@media(max-width:600px){.hud-tools button{font-size:9px;padding:8px 6px}.hud-tools{gap:4px}.hud strong{font-size:15px}#runner-speed{font-size:8px}.arena:fullscreen #jump,body.runner-expanded .arena #jump{min-width:135px}.arena:fullscreen .hud,body.runner-expanded .arena .hud{padding:5px}.arena:fullscreen .controls,body.runner-expanded .arena .controls{padding:8px 4px}.arena:fullscreen .controls span,body.runner-expanded .arena .controls span{max-width:200px}}@media(orientation:landscape) and (max-height:500px){.arena:fullscreen .hud strong,body.runner-expanded .arena .hud strong{font-size:16px;margin-top:2px}.arena:fullscreen .controls,body.runner-expanded .arena .controls{padding:5px 4px}.arena:fullscreen #runner-status,body.runner-expanded .arena #runner-status{display:none}.arena:fullscreen #jump,body.runner-expanded .arena #jump{min-height:38px;padding:6px 18px}.arena:fullscreen .controls span,body.runner-expanded .arena .controls span{display:none}}
#runner-characters{grid-template-columns:repeat(auto-fit,minmax(135px,1fr))}@media(max-width:600px){#runner-characters{grid-template-columns:repeat(3,minmax(0,1fr))}.runner-character img{height:76px}.runner-character b{font-size:11px}.runner-character small{font-size:9px}}
.runner-skill{display:block;color:#ffe2a3;font-size:11px;font-weight:700;margin:7px 0}.runner-skill-description{display:block;min-height:48px;color:#ceb8df;font-size:10px;line-height:1.5;margin:0 3px 12px}.runner-character small{display:block;background:#fff1;border-radius:8px;padding:8px 4px;color:#ffe5b3}.runner-character:disabled{opacity:.7}.runner-character:disabled img{filter:saturate(.65);opacity:.8}.runner-ability{text-align:center;font-size:11px;color:#ffe1b0;padding:8px;background:#100b234d;border-radius:10px;margin:12px 0 0}.arena:fullscreen .runner-ability,body.runner-expanded .runner-ability{font-size:10px;margin:5px 0 0;padding:4px}@media(orientation:landscape) and (max-height:500px){.arena:fullscreen .runner-ability,body.runner-expanded .runner-ability{display:none}}
.dragon-gallery{padding:22px 0 8px}.dragon-gallery h2{font-size:28px;margin:12px 0}.dragon-gallery>p{font-size:12px;line-height:1.6;color:#d5bfdf;max-width:600px}.dragon-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:20px}.dragon-cards article{background:radial-gradient(ellipse at 50% 20%,#40527966,#1c142ce8);border:1px solid #c4a4f833;border-radius:16px;overflow:hidden;padding-bottom:14px}.dragon-cards img{width:100%;height:140px;object-fit:contain;display:block}.dragon-cards b,.dragon-cards small{display:block;padding:0 12px}.dragon-cards b{font-size:13px;color:#ffe4b2;margin:10px 0 6px}.dragon-cards small{font-size:10px;color:#bda6d0}@media(max-width:650px){.dragon-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.dragon-cards img{height:125px}.dragon-gallery h2{font-size:24px}}
/* Cinematic perspective stage. */
canvas{aspect-ratio:5/3}.arena{border:1px solid #ffd69d66;box-shadow:0 25px 80px #0008,inset 0 1px 0 #fff2;background:linear-gradient(140deg,#3c2940f2,#1b142af5)}.stage{border:1px solid #d6ae7355;box-shadow:inset 0 0 30px #0005}.hud{background:linear-gradient(90deg,#1b122acc,#49304388,#1b122acc);border-radius:12px;margin-bottom:10px;padding:12px 15px}.hud strong{color:#ffe2a3}#runner-overlay{background:linear-gradient(#150b2788,#160e29d9)}.intro h1 em{background:linear-gradient(90deg,#ffe1a0,#ffc4e5);background-clip:text;color:transparent}.controls{padding:15px 8px 5px}.arena:fullscreen .hud,body.runner-expanded .arena .hud{margin-bottom:6px}.arena:fullscreen .stage,body.runner-expanded .arena .stage{border:0}@media(max-width:600px){.hud{padding:10px 7px}.intro{margin-bottom:20px}#runner-overlay{padding:12px}.stage{border-radius:12px}}
.runner-direction-pad{display:flex;gap:8px;align-items:stretch;flex-shrink:0}.runner-direction-pad>button:not(#jump){width:56px;min-height:54px;padding:8px;background:linear-gradient(#635075,#382b4a);border:1px solid #ddc1ec66;box-shadow:0 4px 0 #160e25;font-size:26px;font-weight:800;touch-action:manipulation}.runner-direction-pad>button:active{transform:translateY(2px)}canvas{touch-action:none}.controls>div:first-child{min-width:0}@media(max-width:650px){.controls{flex-wrap:wrap;justify-content:center}.controls>div:first-child{text-align:center;width:100%}.controls span{max-width:none}.runner-direction-pad{width:100%;justify-content:center;gap:10px}.runner-direction-pad>button:not(#jump){width:58px;min-height:54px}#jump{flex:1;max-width:220px;min-width:100px}.arena:fullscreen .controls,body.runner-expanded .arena .controls{flex-wrap:nowrap}.arena:fullscreen .controls>div:first-child,body.runner-expanded .arena .controls>div:first-child{width:auto;text-align:left}.arena:fullscreen .runner-direction-pad,body.runner-expanded .arena .runner-direction-pad{width:auto}.arena:fullscreen .runner-direction-pad>button:not(#jump),body.runner-expanded .arena .runner-direction-pad>button:not(#jump){width:48px;min-height:44px}.arena:fullscreen #jump,body.runner-expanded .arena #jump{min-width:115px}}@media(orientation:landscape) and (max-height:500px){.arena:fullscreen .runner-direction-pad>button:not(#jump),body.runner-expanded .arena .runner-direction-pad>button:not(#jump){min-height:38px;font-size:22px;padding:4px}.arena:fullscreen .controls>div:first-child,body.runner-expanded .arena .controls>div:first-child{max-width:250px}}