:root{--n:#071a33;--y:#ffc928;--m:#b7c7d8;--g:#1aa873;--r:#df4b4b;--c:#17a7dc}
*{box-sizing:border-box}body{margin:0;font-family:Inter,system-ui,Arial,sans-serif;background:radial-gradient(circle at 80% 0,#164b80,#081d39 45%,#041225);color:#fff}
.app{max-width:980px;margin:auto;padding:18px}.topbar{display:flex;justify-content:space-between;border-bottom:1px solid #ffffff22;padding:14px 0}.brand{font-weight:950;font-size:24px}.brand span,.hero span,.kicker{color:var(--y)}.tag,.date{color:var(--m);font-size:12px}
.hero{display:flex;justify-content:space-between;align-items:end;padding:28px 0}.hero h1{font-size:58px;margin:6px 0}.hero p{max-width:720px;color:#dbe5ef;line-height:1.5}.kicker{font-size:12px;font-weight:900;letter-spacing:1.3px}
.card{background:linear-gradient(145deg,#0e2f54,#081b32);border:1px solid #ffffff22;border-radius:22px;padding:20px;box-shadow:0 20px 55px #0005}.hidden{display:none!important}
button,a,input{font:inherit}.primary,button{border:1px solid #ffffff22;background:#ffffff10;color:#fff;border-radius:12px;padding:12px 16px;font-weight:800;cursor:pointer;text-decoration:none}.primary{background:var(--y)!important;color:#10213a!important;border:0!important}.big{font-size:18px;padding:16px 22px}
.setup-grid{display:grid;grid-template-columns:1fr auto;gap:20px;align-items:center}.characters{display:flex;gap:8px;flex-wrap:wrap}.character{display:flex;align-items:center;gap:8px}.character span{font-size:28px}.character.active{outline:3px solid var(--y)}.player-row{display:flex;gap:8px;margin-top:14px}.player-row input{flex:1;max-width:260px;background:#ffffff0d;border:1px solid #ffffff22;color:#fff;border-radius:11px;padding:10px 12px}
.mini-rules{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.mini-rules span{background:#ffffff0d;border:1px solid #ffffff15;padding:8px 10px;border-radius:999px;font-size:12px}
.stats{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;margin-bottom:12px}.stats div{background:#ffffff0d;border:1px solid #ffffff15;border-radius:12px;padding:10px;text-align:center}.stats small{display:block;color:var(--m);font-size:10px}.stats b{font-size:19px}
.bossbar{margin-bottom:10px;background:#4b1730;border:1px solid #ffffff25;border-radius:12px;padding:10px}.bossbar span{font-weight:900;color:#ffd9e6}.boss-progress{height:8px;background:#ffffff15;border-radius:99px;overflow:hidden;margin-top:7px}.boss-progress i{display:block;height:100%;width:0;background:var(--y);transition:.2s}
.runway{position:relative;height:520px;border-radius:18px;overflow:hidden;background:linear-gradient(#86c4e7 0 42%,#dce3e7 42% 48%,#303947 48% 100%)}
.city{position:absolute;left:0;right:0;bottom:52%;height:28%;opacity:.25;background:repeating-linear-gradient(90deg,#536c80 0 45px,transparent 45px 60px);animation:city 12s linear infinite}.city.mid{opacity:.35;animation-duration:8s;transform:scaleY(.8);transform-origin:bottom}.city.front{opacity:.45;animation-duration:5s;transform:scaleY(.6);transform-origin:bottom}
@keyframes city{from{background-position-x:0}to{background-position-x:-600px}}
.road{position:absolute;left:0;right:0;bottom:0;height:52%;background:repeating-linear-gradient(90deg,transparent 0 120px,#ffffff55 120px 165px,transparent 165px 300px);animation:road 1.2s linear infinite}@keyframes road{to{background-position-x:-300px}}
.runner{position:absolute;left:50%;bottom:48px;transform:translateX(-50%);transition:left .2s;z-index:3}.avatar{font-size:74px;filter:drop-shadow(0 6px 4px #0005);animation:bob .45s infinite alternate}@keyframes bob{to{transform:translateY(-7px) rotate(2deg)}}
.decision-title{position:absolute;top:24px;left:50%;transform:translateX(-50%);background:#071a33dd;border-radius:999px;padding:10px 15px;font-weight:900;z-index:4}
.gate{position:absolute;top:110px;width:38%;min-height:155px;background:#fff;color:#0b2442;border:4px solid transparent;border-radius:18px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:15px;cursor:pointer;box-shadow:0 16px 35px #0003;z-index:2}.gate.left{left:7%}.gate.right{right:7%}.gate strong{font-size:21px;text-align:center}.gate small{color:#67798a}.gate-icon{font-size:38px}.good{border-color:var(--g)!important}.bad{border-color:var(--r)!important}
.feedback{position:absolute;bottom:170px;left:50%;transform:translateX(-50%);font-size:24px;font-weight:900;opacity:0;z-index:5}.feedback.show{opacity:1}.feedback.ok{color:#08734b}.feedback.fail{color:#b52222}
.tip{margin-top:12px;background:#ffffff0b;border-radius:12px;padding:12px;color:#d7e3ed;font-size:13px}.tip b{color:var(--y)}
.leaderboard{margin-top:14px}.section-head{display:flex;justify-content:space-between;align-items:center}.section-head h2{margin:3px 0 12px}.leader-row{display:grid;grid-template-columns:40px 1fr 90px 90px;background:#ffffff0d;border:1px solid #ffffff12;border-radius:11px;padding:10px 12px;margin-bottom:7px}.leader-row .rank{color:var(--y);font-weight:900}.leader-row small{color:var(--m)}.empty{color:var(--m)}
.result{text-align:center;margin-top:14px}.result-icon{font-size:58px}.result h2{font-size:36px;margin:4px}.result-score{margin:18px auto;max-width:300px;background:#ffffff0d;border:1px solid #ffffff15;border-radius:15px;padding:14px}.result-score small{display:block;color:var(--m)}.result-score strong{font-size:58px;color:var(--y)}
.result-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}.result-grid div{background:#ffffff0d;border:1px solid #ffffff15;border-radius:12px;padding:12px}.result-grid small{display:block;color:var(--m);font-size:10px}
blockquote{border-left:4px solid var(--y);background:#ffffff0a;padding:15px;margin:20px auto;max-width:700px;font-size:20px}.finish-actions,.card-actions{display:flex;justify-content:center;gap:8px;flex-wrap:wrap}.cta-box{margin-top:18px;background:#eaf6fb;color:#0b2442;border-radius:15px;padding:16px}.cta-box p{color:#53677b}.cta-box a{display:inline-block}
#shareCanvas{display:none;max-width:100%;margin:18px auto;border-radius:15px}
footer{text-align:center;color:#8198af;font-size:11px;padding:22px 0}
@media(max-width:720px){.app{padding:10px}.hero{display:block}.hero h1{font-size:44px}.tag{display:none}.setup-grid{grid-template-columns:1fr}.stats{grid-template-columns:repeat(3,1fr)}.runway{height:500px}.gate{width:41%;padding:10px}.gate.left{left:5%}.gate.right{right:5%}.gate strong{font-size:17px}.result-grid{grid-template-columns:repeat(2,1fr)}.leader-row{grid-template-columns:34px 1fr 70px 74px;font-size:13px}}


.boss-overlay,.boss-clear{
  position:fixed;inset:0;z-index:9999;display:grid;place-items:center;
  background:rgba(2,8,18,.88);backdrop-filter:blur(6px);
}
.boss-overlay:before{
  content:"";position:absolute;inset:0;
  background:repeating-linear-gradient(135deg,rgba(223,75,75,.10) 0 18px,transparent 18px 36px);
  animation:hazardMove 1.2s linear infinite
}
@keyframes hazardMove{to{background-position:60px 0}}
.boss-card,.clear-card{
  position:relative;z-index:2;text-align:center;max-width:620px;width:calc(100% - 34px);
  padding:34px 26px;border-radius:24px;border:2px solid #ffffff30;
  box-shadow:0 28px 90px #000b;
}
.boss-card{background:linear-gradient(160deg,#4a1026,#1d0b19 70%);animation:bossPulse .8s infinite alternate}
.clear-card{background:linear-gradient(160deg,#0d5d49,#082e27 75%);animation:clearPop .45s ease-out}
@keyframes bossPulse{to{transform:scale(1.015);box-shadow:0 28px 100px #df4b4b66}}
@keyframes clearPop{0%{transform:scale(.75);opacity:0}100%{transform:scale(1);opacity:1}}
.warning-triangle,.shield{font-size:70px;filter:drop-shadow(0 8px 16px #0007)}
.boss-kicker{font-size:13px;font-weight:950;letter-spacing:2px;color:#ffc928;margin-top:10px}
.boss-card h2,.clear-card h2{font-size:clamp(34px,6vw,62px);margin:8px 0 10px;line-height:1}
.boss-card p,.clear-card p{font-size:18px;color:#ffe8ef}
.clear-card p{color:#d9fff4;font-weight:900}
.boss-countdown{font-size:78px;font-weight:950;color:#ffc928;margin-top:18px;text-shadow:0 5px 20px #0008}
.siren{
  position:absolute;top:34px;width:70px;height:70px;border-radius:50%;
  background:radial-gradient(circle,#fff 0 10%,#ff3655 11% 34%,#76152c 35% 100%);
  box-shadow:0 0 20px #ff3655,0 0 55px #ff3655aa;
  animation:sirenFlash .55s infinite alternate
}
.siren-left{left:7%}.siren-right{right:7%}
@keyframes sirenFlash{from{opacity:.35;transform:rotate(-15deg) scale(.9)}to{opacity:1;transform:rotate(15deg) scale(1.1)}}
.boss-clear{background:rgba(3,22,18,.88)}
.clear-burst{
  position:absolute;width:180px;height:180px;border-radius:50%;
  border:6px solid #ffc928;box-shadow:0 0 0 18px #ffc92822,0 0 0 42px #18a87322;
  animation:burst 1.1s ease-out infinite
}
@keyframes burst{0%{transform:scale(.3);opacity:1}100%{transform:scale(4);opacity:0}}
body.boss-lock{overflow:hidden}
@media(max-width:700px){
 .siren{width:52px;height:52px;top:18px}.siren-left{left:4%}.siren-right{right:4%}
 .boss-card,.clear-card{padding:28px 18px}.boss-countdown{font-size:62px}
}