:root{--ink:#17152c;--paper:#fffdf6;--red:#ef476f;--yellow:#ffd166;--violet:#6257e8;--mint:#2dc68f;--muted:#787383;--safe-top:env(safe-area-inset-top,0px);--safe-right:env(safe-area-inset-right,0px);--safe-bottom:env(safe-area-inset-bottom,0px);--safe-left:env(safe-area-inset-left,0px)}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;background:var(--ink);font-family:Arial,Helvetica,sans-serif;touch-action:none;user-select:none}button,input{font:inherit}button{color:inherit}#app{position:fixed;inset:0;overflow:hidden;background:#9be7ff}canvas{display:block;width:100%;height:100%;cursor:grab}canvas:active{cursor:grabbing}.screen{position:absolute;z-index:20;inset:0;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s ease,visibility .28s}.screen.visible{opacity:1;visibility:visible;pointer-events:auto}#loading{display:flex;flex-direction:column;align-items:center;justify-content:center;background:#ffe9b4;color:var(--ink)}.small-logo{transform:scale(.75);margin-bottom:20px}.rail-loader{width:260px;height:17px;padding:3px;border:3px solid var(--ink);border-radius:20px;background:#fff;overflow:hidden}.rail-loader i{display:block;width:35%;height:100%;border-radius:10px;background:var(--red);animation:load 1.1s ease-in-out infinite}@keyframes load{50%{transform:translate(170%)}}#loading p{font-size:10px;font-weight:900;letter-spacing:2px}.menu-screen{background:radial-gradient(circle at 75% 20%,#fff4c6 0,#ffd67c 28%,#ff9b7b 58%,#7657d9);overflow:hidden}.menu-screen:after{content:"";position:absolute;z-index:-1;left:-5%;right:-5%;bottom:-6%;height:26%;background:repeating-linear-gradient(0deg,var(--ink) 0 8px,#514b66 9px 31px);transform:skewY(-2deg);border-top:6px solid var(--ink)}.menu-copy{position:absolute;z-index:2;left:clamp(24px,7vw,110px);top:50%;transform:translateY(-50%);width:min(430px,42vw)}.route-badge{display:inline-block;padding:8px 12px;border:3px solid var(--ink);border-radius:99px;background:var(--yellow);box-shadow:3px 4px 0 var(--ink);font-size:10px;font-weight:900;letter-spacing:1.6px}.logo{margin:18px 0 8px;font-family:Impact,Arial Black,sans-serif;font-size:clamp(47px,6vw,82px);line-height:.74;letter-spacing:-1px;color:var(--ink);filter:drop-shadow(3px 3px 0 rgba(255,255,255,.5))}.logo span,.logo b{display:block}.logo b{color:var(--red);-webkit-text-stroke:2px var(--ink);transform:skew(-5deg)}.menu-copy>p{margin:22px 0;color:#3d3850;font-weight:800;line-height:1.45}.menu-heroes{position:absolute;right:-2%;bottom:9%;width:min(64vw,920px);max-height:83vh;object-fit:contain;object-position:right bottom;filter:drop-shadow(10px 14px 0 rgba(23,21,44,.15));animation:heroes 4s ease-in-out infinite}@keyframes heroes{50%{transform:translateY(-7px) rotate(.3deg)}}button{border:3px solid var(--ink);border-radius:13px;padding:12px 15px;background:var(--paper);font-weight:900;cursor:pointer;box-shadow:3px 4px 0 var(--ink);transition:transform .1s,box-shadow .1s,filter .15s}button:hover{filter:brightness(1.05);transform:translateY(-2px);box-shadow:3px 6px 0 var(--ink)}button:active{transform:translateY(3px);box-shadow:1px 1px 0 var(--ink)}button:disabled{filter:grayscale(1);opacity:.5;cursor:not-allowed}.primary{background:var(--violet);color:#fff}.huge{width:100%;padding:16px 18px;font-size:15px;text-align:left}.huge b,.primary>b{float:right;font-size:20px}.menu-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:15px}.menu-grid button{display:flex;align-items:center;gap:10px;text-align:left;padding:9px 11px}.menu-grid button i{display:grid;place-items:center;width:33px;height:33px;border-radius:9px;background:#eeeafa;font-style:normal;font-size:18px}.menu-grid button span{font-size:11px}.menu-grid small{display:block;margin-top:2px;color:var(--muted);font-size:8px;letter-spacing:.5px}.icon-button{display:grid;place-items:center;width:45px;height:45px;padding:0;border-radius:13px}.corner{position:absolute;z-index:5;right:22px;top:20px}.menu-wallet,.wallet{display:flex;align-items:center;gap:7px;padding:9px 13px;border:3px solid var(--ink);border-radius:13px;background:var(--paper);box-shadow:3px 4px 0 var(--ink);font-weight:900}.menu-wallet{position:absolute;z-index:5;right:80px;top:20px}.panel-screen{background:linear-gradient(160deg,#fff2cb,#ffc98d);overflow:auto;padding:0 0 45px}.panel-screen header{position:sticky;z-index:2;top:0;display:flex;align-items:center;gap:16px;padding:16px clamp(18px,4vw,65px);background:#fffdf6e6;border-bottom:4px solid var(--ink);backdrop-filter:blur(10px)}.panel-screen header .back{width:48px;height:48px;padding:0;font-size:23px}.panel-screen header>div:nth-child(2){flex:1}.panel-screen header small{font-size:9px;font-weight:900;letter-spacing:1.5px;color:var(--red)}h2{margin:2px 0;font-family:Impact,Arial Black,sans-serif;font-size:35px;letter-spacing:.5px}.route-map{display:grid;grid-template-columns:repeat(4,minmax(190px,1fr));gap:19px;max-width:1180px;margin:30px auto;padding:0 24px}.station-card{position:relative;min-height:178px;padding:18px;border:4px solid var(--ink);border-radius:20px;background:var(--paper);box-shadow:7px 8px 0 var(--ink);overflow:hidden}.station-card:before{content:"";position:absolute;right:-25px;top:-30px;width:100px;height:100px;border-radius:50%;background:var(--station-color,#ffd166);opacity:.5}.station-card.locked{filter:grayscale(.8);opacity:.64}.station-card .num{font-size:10px;font-weight:900;letter-spacing:1px;color:var(--muted)}.station-card h3{margin:12px 0 4px;font-family:Impact,Arial Black;font-size:24px}.station-card p{min-height:30px;margin:0;color:var(--muted);font-size:11px;font-weight:700}.station-card .stars{margin:14px 0 10px;color:#f2b600;font-size:21px;letter-spacing:2px}.station-card button{width:100%;padding:9px}.character-grid,.upgrade-grid{display:grid;grid-template-columns:repeat(4,minmax(210px,1fr));gap:22px;max-width:1180px;margin:34px auto;padding:0 24px}.character-card,.upgrade-card{padding:20px;border:4px solid var(--ink);border-radius:22px;background:var(--paper);box-shadow:7px 8px 0 var(--ink)}.character-card.selected{outline:7px solid var(--yellow);transform:rotate(-1deg)}.portrait{position:relative;height:170px;border:3px solid var(--ink);border-radius:16px;overflow:hidden;background:var(--char-accent)}.portrait .mini-rag{position:absolute;left:50%;bottom:16px;transform:translate(-50%) scale(2)}.character-card h3,.upgrade-card h3{margin:14px 0 2px;font-family:Impact,Arial Black;font-size:24px}.character-card p,.upgrade-card p{height:32px;margin:4px 0 13px;color:var(--muted);font-size:11px;font-weight:700}.character-card button,.upgrade-card button{width:100%}.stat-row{display:flex;gap:4px;margin:10px 0}.stat-row i{height:6px;flex:1;border-radius:6px;background:#ded9e3}.stat-row i.on{background:var(--red)}.upgrade-card .upgrade-icon{display:grid;place-items:center;width:70px;height:70px;border:3px solid var(--ink);border-radius:18px;background:#eeeafa;font-size:36px}.level-pips{display:flex;gap:5px;margin:13px 0}.level-pips i{width:24px;height:9px;border:2px solid var(--ink);border-radius:8px;background:#fff}.level-pips i.on{background:var(--mint)}.goal-columns{display:grid;grid-template-columns:minmax(280px,.8fr) minmax(520px,1.5fr);gap:28px;max-width:1180px;margin:30px auto;padding:0 24px}.goal-columns h3{font-size:11px;letter-spacing:1.5px}.daily-card{padding:23px;border:4px solid var(--ink);border-radius:20px;background:#6257e8;color:#fff;box-shadow:7px 8px 0 var(--ink)}.daily-card h3{margin:0 0 7px;font-family:Impact,Arial Black;font-size:28px;letter-spacing:.3px}.daily-card p{font-size:12px;line-height:1.4}.daily-card button{width:100%;margin-top:15px}.achievement-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.achievement{display:flex;gap:12px;align-items:center;padding:13px;border:3px solid var(--ink);border-radius:15px;background:var(--paper);box-shadow:3px 4px 0 var(--ink)}.achievement.locked{opacity:.5;filter:grayscale(1)}.achievement>i{font-style:normal;font-size:28px}.achievement b{display:block;font-size:11px}.achievement small{display:block;margin-top:3px;color:var(--muted);font-size:9px}#hud{position:absolute;z-index:8;left:18px;right:18px;top:15px;display:flex;align-items:flex-start;justify-content:space-between;gap:14px;opacity:0;pointer-events:none;transition:opacity .25s}#hud.visible{opacity:1}.hud-box,.station-hud{border:3px solid var(--ink);border-radius:14px;background:var(--paper);box-shadow:4px 5px 0 var(--ink)}.hud-box{min-width:126px;padding:8px 13px}.hud-box small,.station-hud small{display:block;color:var(--muted);font-size:8px;font-weight:900;letter-spacing:1.2px}.hud-box b{display:inline-block;font-family:Impact,Arial Black;font-size:23px}.hud-box em{margin-left:4px;color:var(--muted);font-size:9px;font-style:normal;font-weight:800}.hud-box.right{text-align:right}.station-hud{width:min(330px,30vw);padding:7px 12px;text-align:center;background:var(--ink);color:#fff}.station-hud small{color:#c7c1d2}.station-hud strong{display:block;font-size:11px;letter-spacing:.8px}.station-hud .progress{height:6px;margin:5px 0;border-radius:9px;background:#3e3958;overflow:hidden}.station-hud .progress i{display:block;width:0;height:100%;background:var(--yellow);transition:width .25s}.station-hud span{display:block;color:#d9d5e1;font-size:8px;font-weight:800}#pause-button{pointer-events:auto;width:39px;height:39px;background:var(--yellow)}#lives{position:absolute;left:2px;top:66px;font-size:20px;filter:drop-shadow(2px 2px 0 var(--ink))}#combo-badge{position:absolute;right:0;top:65px;display:none;align-items:center;gap:6px;padding:6px 10px;border:3px solid var(--ink);border-radius:12px;background:var(--yellow);box-shadow:3px 4px 0 var(--ink);transform:rotate(2deg)}#combo-badge.visible{display:flex;animation:combo .25s ease-out}@keyframes combo{0%{transform:scale(.5) rotate(-8deg)}}#combo-badge b{font-family:Impact;font-size:20px}#combo-badge span{font-size:8px;font-weight:900}.modal{position:absolute;z-index:30;inset:0;display:flex;align-items:center;justify-content:center;padding:20px;background:#17152cb8;backdrop-filter:blur(6px);opacity:0;visibility:hidden;pointer-events:none;transition:.22s}.modal.visible{opacity:1;visibility:visible;pointer-events:auto}.dialog{position:relative;width:min(420px,100%);padding:28px;border:4px solid var(--ink);border-radius:24px;background:var(--paper);box-shadow:9px 10px 0 var(--ink);text-align:center}.dialog>small{color:var(--red);font-size:9px;font-weight:900;letter-spacing:1.7px}.dialog h2{margin:5px 0 21px;font-size:40px}.dialog>button:not(.dialog-close){width:100%;margin-top:10px}.dialog-close{position:absolute;right:13px;top:13px;width:38px;height:38px;padding:0;font-size:20px}.toggle{display:flex;align-items:center;justify-content:space-between;padding:12px 3px;border-top:2px dashed #d9d4df;text-align:left}.toggle span b,.toggle span small{display:block}.toggle span b{font-size:11px}.toggle span small{margin-top:3px;color:var(--muted);font-size:9px}.toggle input{display:none}.toggle>i{position:relative;width:46px;height:25px;border:3px solid var(--ink);border-radius:20px;background:#cbc6d2}.toggle>i:after{content:"";position:absolute;left:3px;top:3px;width:13px;height:13px;border-radius:50%;background:var(--ink);transition:.2s}.toggle input:checked+i{background:var(--mint)}.toggle input:checked+i:after{transform:translate(21px)}.result-dialog{width:min(520px,100%)}#result-stamp{display:inline-block;margin-top:-53px;padding:8px 16px;border:3px solid var(--ink);border-radius:10px;background:var(--mint);color:#fff;font-size:11px;font-weight:900;letter-spacing:1px;transform:rotate(-2deg);box-shadow:3px 4px 0 var(--ink)}.result-dialog h2{margin-bottom:4px}.result-stars{color:#f2b600;font-size:42px;letter-spacing:5px;text-shadow:2px 2px 0 var(--ink)}.result-score{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:18px 0}.result-score span{padding:10px 4px;border:2px solid var(--ink);border-radius:10px;color:var(--muted);font-size:8px;font-weight:900}.result-score b{display:block;margin-top:4px;color:var(--ink);font-size:18px}.result-dialog p{color:var(--muted);font-size:11px;font-weight:800}#station-intro{position:absolute;z-index:15;left:50%;top:42%;min-width:390px;padding:18px 24px;border:4px solid var(--ink);border-radius:17px;background:var(--paper);box-shadow:8px 9px 0 var(--ink);text-align:center;opacity:0;pointer-events:none;transform:translate(-50%,-50%) scale(.7) rotate(-2deg)}#station-intro.show{animation:intro 2s ease both}@keyframes intro{0%{opacity:0;transform:translate(-50%,-50%) scale(.5) rotate(-5deg)}15%,70%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(1deg)}to{opacity:0;transform:translate(-50%,-70%) scale(.9)}}#station-intro small,#station-intro b,#station-intro span{display:block}#station-intro small{color:var(--red);font-size:9px;font-weight:900;letter-spacing:1.5px}#station-intro b{font-family:Impact;font-size:33px}#station-intro span{color:var(--muted);font-size:11px;font-weight:700}#tutorial{position:absolute;z-index:10;left:13%;bottom:26%;padding:9px 12px;border:3px solid var(--ink);border-radius:12px;background:var(--paper);box-shadow:3px 4px 0 var(--ink);opacity:0;pointer-events:none;transform:translate(-50%)}#tutorial.visible{opacity:1;animation:tutorial 1.2s infinite ease-in-out}@keyframes tutorial{50%{transform:translate(-50%,-8px)}}#tutorial b,#tutorial span{display:block}#tutorial b{font-size:10px}#tutorial span{color:var(--muted);font-size:8px}#tutorial i{position:absolute;left:50%;top:100%;font-style:normal;font-size:25px}#toast{position:absolute;z-index:12;left:50%;top:31%;text-align:center;opacity:0;pointer-events:none;transform:translate(-50%,-50%)}#toast b,#toast span{display:block;font-family:Impact,Arial Black;color:var(--yellow);-webkit-text-stroke:2px var(--ink);text-shadow:5px 5px 0 var(--red)}#toast b{font-size:42px}#toast span{font-size:24px}#toast.pop{animation:toast .9s ease-out}@keyframes toast{0%{opacity:0;transform:translate(-50%,-20%) scale(.4) rotate(-8deg)}22%,65%{opacity:1;transform:translate(-50%,-50%) scale(1.1) rotate(2deg)}to{opacity:0;transform:translate(-50%,-85%) scale(.85)}}#achievement-toast{position:absolute;z-index:40;right:18px;bottom:18px;display:flex;align-items:center;gap:12px;padding:11px 15px;border:3px solid var(--ink);border-radius:14px;background:var(--paper);box-shadow:4px 5px 0 var(--ink);transform:translate(130%);transition:.35s}#achievement-toast.show{transform:translate(0)}#achievement-toast>i{font-style:normal;font-size:27px}#achievement-toast small,#achievement-toast b{display:block}#achievement-toast small{color:var(--red);font-size:8px;font-weight:900}#achievement-toast b{font-size:11px}#orientation{display:none}@media(max-width:850px){.menu-copy{left:24px;width:48vw}.menu-heroes{right:-17%;width:76vw}.route-map,.character-grid,.upgrade-grid{grid-template-columns:repeat(2,1fr)}.goal-columns{grid-template-columns:1fr}.station-hud{width:230px}.hud-box{min-width:95px;padding:7px 9px}.hud-box b{font-size:19px}}@media(max-width:620px){.menu-screen{overflow:auto}.menu-copy{inset:auto 18px 18px;width:auto;transform:none}.menu-heroes{right:-18%;top:5%;bottom:auto;width:113vw;height:48vh;object-position:center top}.route-badge{display:none}.logo{font-size:49px}.menu-copy>p{display:none}.huge{padding:13px}.menu-grid{margin-top:10px}.menu-grid button{padding:7px}.corner{right:12px;top:12px}.menu-wallet{right:66px;top:12px}.panel-screen header{padding:10px 12px}.panel-screen header h2{font-size:25px}.route-map,.character-grid,.upgrade-grid{grid-template-columns:1fr;margin-top:18px;padding:0 15px}.station-card{min-height:155px}.goal-columns{padding:0 15px}.achievement-grid{grid-template-columns:1fr}#hud{left:8px;right:8px;top:8px;gap:5px}.station-hud{position:absolute;left:50%;top:58px;width:210px;transform:translate(-50%)}.hud-box{min-width:88px}.hud-box em{display:block;margin:0}#pause-button{position:absolute;right:0;top:59px}#lives{top:62px}#combo-badge{top:107px}.dialog{padding:23px 18px}.result-score b{font-size:14px}#station-intro{min-width:0;width:calc(100% - 30px)}#tutorial{left:22%;bottom:22%}}@media(orientation:portrait)and (min-width:621px){#orientation{position:absolute;z-index:60;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;background:#ffe7b1;color:var(--ink);font-size:14px}#orientation span{font-size:60px;animation:spin 1.5s infinite}@keyframes spin{50%{transform:rotate(90deg)}}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}.daily-card button{color:var(--ink)}#hud{top:calc(15px + var(--safe-top));left:calc(18px + var(--safe-left));right:calc(18px + var(--safe-right))}.corner{top:calc(20px + var(--safe-top));right:calc(22px + var(--safe-right))}.menu-wallet{top:calc(20px + var(--safe-top));right:calc(80px + var(--safe-right))}.panel-screen{padding-bottom:calc(45px + var(--safe-bottom))}.portrait img{position:absolute;top:0;height:100%;width:auto;max-width:none;filter:drop-shadow(3px 5px 0 rgba(23,21,44,.18))}.portrait img[data-character=milo]{left:calc(50% - 40px);clip-path:inset(0 75% 0 0)}.portrait img[data-character=nova]{left:calc(50% - 123px);clip-path:inset(0 51% 0 28%)}.portrait img[data-character=nana]{left:calc(50% - 203px);clip-path:inset(0 25% 0 52%)}.portrait img[data-character=chief]{left:calc(50% - 279px);clip-path:inset(0 0 0 75%)}.contract-heading{margin-top:24px}.contract-list{display:grid;gap:9px}.contract-card{padding:12px 14px;border:3px solid var(--ink);border-radius:14px;background:var(--paper);box-shadow:3px 4px 0 var(--ink)}.contract-card.complete{background:#d8f7e8}.contract-card header{display:flex;align-items:center;justify-content:space-between}.contract-card b{font-size:11px}.contract-card em{color:var(--red);font-size:10px;font-style:normal;font-weight:900}.contract-card small{display:block;margin:4px 0 7px;color:var(--muted);font-size:9px;font-weight:700}.contract-progress{height:7px;border:2px solid var(--ink);border-radius:9px;background:#fff;overflow:hidden}.contract-progress i{display:block;height:100%;background:var(--mint)}#replay-banner{position:absolute;z-index:31;left:20px;bottom:20px;display:none;padding:10px 15px;border:3px solid var(--ink);border-radius:13px;background:var(--yellow);box-shadow:4px 5px 0 var(--ink);transform:rotate(-2deg);pointer-events:none}#replay-banner.visible{display:block;animation:combo .25s ease-out}#replay-banner small,#replay-banner b,#replay-banner span{display:block}#replay-banner small{font-size:8px;font-weight:900;letter-spacing:1px}#replay-banner b{font-family:Impact;font-size:23px}#replay-banner span{font-size:8px;font-weight:700}
