@font-face{font-family:'Bangers';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/bangers.woff2) format('woff2');unicode-range:U+0000-00FF}
@font-face{font-family:'Bangers';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/bangers-ext.woff2) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C4,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Luckiest Guy';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/luckiest.woff2) format('woff2');unicode-range:U+0000-00FF}
@font-face{font-family:'Comic Neue';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/comic.woff2) format('woff2')}
@font-face{font-family:'Comic Neue';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/comic-bold.woff2) format('woff2')}

:root{
  --ink:#080b1c;
  --ink2:#0d1330;
  --navy:#111a3d;
  --navy-2:#0a1027;
  --orange:#ff8a1e;
  --orange-hot:#ffb347;
  --orange-deep:#a34205;
  --slime:#5ae236;
  --slime-dark:#2c7d18;
  --cream:#fff3d6;
  --blue:#3d8bff;
  --red:#ff4133;
  --purple:#a45cff;
  --rat-orange:#ff9826;
  --face:rgba(8,12,30,.92);
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;overflow:hidden;background:#050814}
body{
  font-family:'Comic Neue',system-ui,sans-serif;
  color:#fff;
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
}
[hidden]{display:none!important}
#app{position:fixed;inset:0;overflow:hidden;background:#050814}
#stage{position:absolute;inset:0;z-index:1}
#stage canvas{position:absolute;inset:0;display:block;width:100%!important;height:100%!important}
.vignette{position:absolute;inset:0;z-index:2;pointer-events:none;background:radial-gradient(ellipse at 50% 52%,rgba(0,0,0,0) 48%,rgba(2,4,14,.55) 100%)}
.grain{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:.05;background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.5) 0 1px,transparent 1px 3px)}

h1,h2,h3,p{margin:0}
button{font-family:inherit}

/* ---------- HUD ---------- */
#hud{position:absolute;top:0;left:0;right:0;z-index:40;display:flex;align-items:flex-start;gap:8px;padding:max(8px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) 0 max(10px,env(safe-area-inset-left));pointer-events:none}
.hud-cards{display:flex;gap:6px;flex:1 1 auto;min-width:0}
.hud-card{position:relative;display:flex;align-items:center;gap:7px;flex:1 1 0;min-width:0;padding:4px 7px 4px 4px;background:var(--face);border:3px solid var(--orange);border-radius:10px;box-shadow:0 4px 0 rgba(0,0,0,.45);pointer-events:auto;cursor:pointer;transition:transform .1s,border-color .1s,box-shadow .1s}
.hud-card .face{width:46px;height:46px;flex:none;border-radius:7px;border:2px solid rgba(255,255,255,.16);background:#080d22;overflow:hidden}
.hud-card .face img{width:100%;height:100%;object-fit:cover;object-position:50% 18%;display:block}
.hud-info{flex:1;min-width:0}
.hud-name{display:flex;justify-content:space-between;align-items:center;gap:4px;background:var(--mask);border-radius:4px;padding:1px 4px 0;font-family:'Bangers';font-size:13px;letter-spacing:.7px;line-height:1.05;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.35)}
.hud-name .pip{font-size:9px;letter-spacing:1px;opacity:.85}
.hp-track{position:relative;height:9px;margin-top:3px;background:#061324;border:1.5px solid #050a17;border-radius:3px;overflow:hidden}
.hp-fill{height:100%;width:100%;background:var(--slime);box-shadow:inset 0 2px 0 rgba(255,255,255,.22);transition:width .15s steps(6)}
.hp-fill.low{background:#ffcf3a}
.hp-fill.crit{background:#ff4a3d}
.hud-card.active{border-color:#fff6d8;box-shadow:0 0 0 2px var(--orange),0 4px 0 rgba(0,0,0,.45),0 0 20px rgba(255,150,40,.5);transform:translateY(-1px)}
.hud-card.down{filter:grayscale(1) brightness(.62)}
.hud-card.down::after{content:'DOWN';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) rotate(-5deg);font-family:'Bangers';font-size:13px;letter-spacing:1px;color:#fff;background:#b3221b;border:2px solid #0b0e1c;border-radius:4px;padding:0 5px}
.score-card{display:flex;align-items:center;gap:8px;min-width:174px;padding:3px 8px 4px 12px;background:var(--face);border:3px solid var(--orange);border-radius:10px;box-shadow:0 4px 0 rgba(0,0,0,.45)}
.score-text{display:flex;flex-direction:column;align-items:flex-end;gap:1px;flex:1;min-width:0}
.score-label{font-family:'Bangers';font-size:10px;letter-spacing:2px;color:#ffd9a0;line-height:1}
.score-value{font-family:'Bangers';font-size:28px;line-height:1;letter-spacing:1.5px;color:#fff;-webkit-text-stroke:1.5px #0d1a46;paint-order:stroke fill;text-shadow:0 3px 0 #0d1a46;white-space:nowrap}
.pause-btn{flex:none;width:26px;height:26px;border-radius:50%;border:2px solid #0b0e1c;background:var(--orange-hot);color:#241303;font-family:'Bangers';font-size:12px;line-height:1;display:grid;place-items:center;cursor:pointer;box-shadow:0 2px 0 rgba(0,0,0,.5)}
.pause-btn:active{transform:translateY(2px);box-shadow:none}

#bossBar{position:absolute;top:78px;left:50%;transform:translateX(-50%);width:min(540px,74vw);z-index:39;pointer-events:none}
.boss-name{font-family:'Bangers';font-size:clamp(13px,1.6vw,19px);letter-spacing:2.5px;color:#ffd9a0;text-align:center;text-shadow:0 2px 0 #000;margin-bottom:2px}
.boss-track{height:14px;background:#0a1027;border:3px solid var(--orange);border-radius:7px;box-shadow:0 3px 0 rgba(0,0,0,.45);overflow:hidden}
.boss-fill{height:100%;width:100%;background:#ff5a3c;box-shadow:inset 0 3px 0 rgba(255,255,255,.22);transition:width .18s steps(6)}

#comboTag{position:absolute;right:16px;top:86px;z-index:39;display:flex;align-items:baseline;gap:6px;transform:rotate(-4deg);font-family:'Bangers';color:var(--orange-hot);-webkit-text-stroke:2px #0d1a46;paint-order:stroke fill;text-shadow:0 4px 0 #0d1a46;pointer-events:none}
#comboTag #comboNum{font-size:clamp(26px,4vw,44px);line-height:1}
#comboTag small{font-size:clamp(10px,1.4vw,15px);letter-spacing:2px;color:#fff}
#comboTag.pop{animation:comboPop .28s cubic-bezier(.2,1.6,.4,1)}
@keyframes comboPop{0%{transform:rotate(-5deg) scale(1.5)}100%{transform:scale(1) rotate(-4deg)}}

/* ---------- screens ---------- */
.screen{position:absolute;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;overflow:hidden}
.screen-inner{position:relative;z-index:3;display:flex;flex-direction:column;align-items:center;gap:clamp(10px,2vh,22px);padding:5vh 16px;max-width:1100px;text-align:center}
.screen-inner.narrow{max-width:520px}
.kicker{font-family:'Bangers';font-size:clamp(11px,1.6vw,16px);letter-spacing:5px;color:#ffd9a0;text-shadow:0 2px 0 #000}
.kicker{font-size:clamp(13px,2vw,18px)}
.screen-title{font-family:'Luckiest Guy';font-size:clamp(34px,6vw,72px);letter-spacing:2px;color:#fff;-webkit-text-stroke:clamp(2px,.5vw,5px) var(--orange);paint-order:stroke fill;text-shadow:0 6px 0 #10163a,0 10px 24px rgba(0,0,0,.5);line-height:1}
.screen-sub{font-size:clamp(13px,1.7vw,18px);color:#e7e5ff;text-shadow:0 2px 4px #000;max-width:640px;line-height:1.4}

.btn{position:relative;border:3px solid #0b0e1c;border-radius:11px;background:linear-gradient(#ffa13e,#ff7a10);color:#221203;font-family:'Luckiest Guy';letter-spacing:1px;padding:10px 26px;cursor:pointer;box-shadow:0 6px 0 var(--orange-deep),0 10px 18px rgba(0,0,0,.35);transition:transform .08s,box-shadow .08s;text-shadow:0 1px 0 rgba(255,255,255,.35)}
.btn:hover{filter:brightness(1.06)}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 var(--orange-deep)}
.btn:disabled{filter:grayscale(.85);opacity:.65;cursor:default}
.btn-big{font-size:clamp(20px,3vw,32px)}
.btn-small{font-size:clamp(12px,1.5vw,16px);padding:8px 16px;box-shadow:0 4px 0 var(--orange-deep)}

/* title */
#title{justify-content:flex-start;align-items:stretch}
.title-bg{position:absolute;inset:-2%;background:url(assets/bg_alley.webp) center 57%/cover no-repeat;transform:scale(1.02)}
.title-shade{position:absolute;inset:0;background:linear-gradient(to bottom,rgba(4,8,26,.62) 0%,rgba(4,8,24,.06) 26%,rgba(4,8,22,0) 55%,rgba(3,6,18,.72) 88%,rgba(3,6,18,.9) 100%)}
.title-inner{position:relative;z-index:3;height:100%;display:flex;flex-direction:column;align-items:center;padding:2.2vh 14px 0}
.logo-wrap{width:min(62vw,560px);max-width:86vw;margin-top:1.5vh}
.logo{display:block;width:100%;height:auto;filter:drop-shadow(0 12px 0 rgba(6,9,24,.55)) drop-shadow(0 0 26px rgba(255,150,40,.35));animation:logoDrop .85s cubic-bezier(.18,1.1,.3,1.08) both}
@keyframes logoDrop{0%{transform:translateY(-150%) rotate(-5deg);opacity:0}60%{transform:translateY(0) rotate(1.5deg);opacity:1}78%{transform:translateY(-2.5%) rotate(-.6deg)}100%{transform:translateY(0) rotate(0)}}
.tagline{margin-top:1.1vh;font-family:'Bangers';font-size:clamp(10px,1.5vw,16px);letter-spacing:4px;color:#ffd9a0;text-align:center;text-shadow:0 2px 0 #0a0f26}
.title-rats{position:absolute;left:0;right:0;bottom:8.5vh;display:grid;grid-template-columns:repeat(4,auto);justify-content:center;align-items:end;gap:clamp(2px,1.3vw,18px);pointer-events:none;z-index:2}
.tr{width:clamp(120px,21vw,290px);height:auto;filter:drop-shadow(0 10px 0 rgba(0,0,0,.35));transform:translateY(-130vh);opacity:0}
.tr.in{animation:ratLeap .72s cubic-bezier(.2,.85,.3,1.35) forwards}
@keyframes ratLeap{0%{transform:translateY(-130vh) rotate(-10deg);opacity:0}55%{transform:translateY(5%) rotate(3deg);opacity:1}76%{transform:translateY(-3%) rotate(-2deg)}100%{transform:translateY(0) rotate(0);opacity:1}}
.title-actions{position:absolute;left:0;right:0;top:50%;display:flex;flex-direction:column;align-items:center;gap:10px;z-index:5}
.title-actions .btn-big{animation:blink 1.15s steps(2,end) infinite}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:.4}}
.title-meta{display:flex;align-items:center;gap:8px;font-family:'Bangers';font-size:clamp(10px,1.3vw,14px);letter-spacing:1.5px;color:#ffe8bf;text-shadow:0 2px 0 #05081a;flex-wrap:wrap;justify-content:center}
.title-meta .dot{opacity:.5}
.title-controls{position:absolute;left:0;right:0;bottom:max(6px,env(safe-area-inset-bottom));text-align:center;font-size:10px;letter-spacing:1.4px;color:rgba(255,240,210,.62);padding:0 10px}
.sound-btn{position:absolute;top:max(10px,env(safe-area-inset-top));right:max(10px,env(safe-area-inset-right));z-index:70;font-family:'Bangers';font-size:12px;letter-spacing:1.5px;letter-spacing:1.5px;padding:7px 10px;border:2px solid var(--orange);border-radius:8px;background:rgba(8,12,30,.8);color:#ffd9a0;cursor:pointer}
.loading-note{position:absolute;left:50%;bottom:2.6vh;transform:translateX(-50%);font-family:'Bangers';letter-spacing:2px;font-size:11px;color:#ffd9a0;opacity:.85;z-index:5}

/* select */
.select-bg{position:absolute;inset:-4%;background:url(assets/bg_sewer.webp) center 45%/cover no-repeat;filter:blur(2px) brightness(.42) saturate(1.1);transform:scale(1.04)}
#select::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,rgba(20,28,66,.3),rgba(4,7,20,.88));z-index:1}
#select .screen-inner{z-index:3;max-height:100%;padding:3vh 12px}
.kicker{margin-bottom:-4px}
.pick-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(8px,1.4vw,16px);width:min(1040px,94vw)}
.pick{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 8px 12px;background:linear-gradient(180deg,rgba(16,23,55,.96),rgba(8,12,30,.96));border:3px solid var(--mask);border-radius:12px;cursor:pointer;transition:transform .12s,box-shadow .12s;overflow:hidden}
.pick:hover,.pick:focus-visible{transform:translateY(-4px);box-shadow:0 0 0 3px var(--orange),0 12px 22px rgba(0,0,0,.45);outline:none}
.pick .pic{width:100%;height:clamp(120px,24vh,250px);display:flex;align-items:flex-end;justify-content:center;overflow:hidden}
.pick .pic img{width:100%;height:100%;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 8px 0 rgba(0,0,0,.25))}
.pick .nm{font-family:'Luckiest Guy';font-size:clamp(18px,2.3vw,28px);letter-spacing:1px;color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.5);line-height:1}
.pick .wp{font-family:'Bangers';font-size:clamp(10px,1.15vw,13px);letter-spacing:2px;color:var(--mask);text-shadow:0 1px 0 #000}
.pick .tag{font-size:clamp(11px,1.2vw,13px);color:#d9dcf2;text-align:center;line-height:1.25;min-height:2.4em}
.pick .who{position:absolute;left:8px;top:8px;font-family:'Bangers';font-size:11px;letter-spacing:1.5px;background:var(--mask);color:#fff;padding:1px 6px;border-radius:4px;border:2px solid #0a0f26}
.pick:hover .who{background:var(--orange);color:#1b1003}
#selectBack{margin-top:2px;background:linear-gradient(#26305c,#151c3d);color:#ffe8bf;box-shadow:0 4px 0 #070b1e}

/* chapter card */
#chapterCard{position:absolute;inset:0;z-index:65;display:flex;align-items:center;justify-content:center;overflow:hidden}
.chapter-bg{position:absolute;inset:-4%;background:url(assets/bg_skyline.webp) center 58%/cover no-repeat;filter:saturate(1.1)}
.chapter-shade{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 55%,rgba(5,8,24,.1),rgba(4,6,20,.82) 78%),linear-gradient(to bottom,rgba(4,6,20,.7),rgba(4,6,20,.25) 40%,rgba(4,6,20,.85))}
.chapter-inner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:0;padding:0 14px;text-align:center}
.chapter-kicker{font-family:'Bangers';font-size:clamp(20px,3.6vw,40px);letter-spacing:6px;color:#fff;-webkit-text-stroke:2px #10163a;paint-order:stroke fill;text-shadow:0 5px 0 #10163a;animation:slamIn .45s cubic-bezier(.2,1.5,.4,1) both}
.chapter-title{font-family:'Luckiest Guy';font-size:clamp(34px,7.2vw,96px);line-height:.98;letter-spacing:1px;color:#83ff3f;-webkit-text-stroke:clamp(3px,.55vw,7px) var(--orange);paint-order:stroke fill;text-shadow:0 10px 0 #17300f,0 0 30px rgba(110,255,60,.22),0 0 4px rgba(0,0,0,.6);animation:slamTitle .5s .08s cubic-bezier(.2,1.4,.4,1) both;max-width:96vw}
.chapter-drip{width:min(82vw,820px);height:clamp(28px,6vw,66px);margin-top:-.2em;background:url(assets/slime_drip.webp) center top/contain no-repeat;filter:drop-shadow(0 6px 0 rgba(0,0,0,.35));animation:fadeDrip .35s .3s both}
@keyframes slamIn{0%{transform:scale(2.4) translateY(-30px);opacity:0}70%{transform:scale(.96);opacity:1}100%{transform:scale(1)}}
@keyframes slamTitle{0%{transform:scale(2.1) rotate(-3deg);opacity:0}65%{transform:scale(.97) rotate(.4deg);opacity:1}100%{transform:scale(1) rotate(0)}}
@keyframes fadeDrip{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:none}}

/* dialogue */
#dialogue{position:absolute;left:0;right:0;bottom:0;z-index:52;padding:0 max(10px,2vw) max(8px,env(safe-area-inset-bottom));transform:translateY(112%);transition:transform .3s cubic-bezier(.2,.9,.25,1);pointer-events:none}
#dialogue.show{transform:none;pointer-events:auto}
.panel{max-width:1180px;margin:0 auto;display:flex;gap:8px;padding:8px;background:#0d1430;border:4px solid var(--orange);border-radius:14px;box-shadow:0 12px 0 rgba(0,0,0,.4),0 20px 40px rgba(0,0,0,.45)}
.portrait-frame{position:relative;flex:none;height:clamp(112px,23vh,224px);aspect-ratio:1;background:var(--mask,#2a5da8);border:3px solid var(--mask,#2a5da8);border-radius:10px;overflow:hidden}
.portrait-frame img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;display:block;mix-blend-mode:normal}
.portrait-frame::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(6,10,26,.5),rgba(6,10,26,0) 38%);pointer-events:none}
.portrait-tag{position:absolute;left:6px;top:6px;z-index:2;font-family:'Bangers';font-size:11px;letter-spacing:1.5px;padding:1px 5px;background:var(--orange);color:#1c1002;border:2px solid #0a0f26;border-radius:4px}
.dialogue-main{flex:1;display:flex;flex-direction:column;gap:6px;min-width:0}
.nameplate{align-self:flex-start;font-family:'Bangers';font-size:clamp(15px,1.9vw,24px);letter-spacing:2px;line-height:1.2;padding:2px 12px 0;background:var(--mask,#2a5da8);color:#fff;border:2px solid #0a0f26;border-radius:6px;text-shadow:0 2px 0 rgba(0,0,0,.35)}
.speech{position:relative;flex:1;background:var(--cream);color:#191b28;border:3px solid #0a0f26;border-radius:8px;padding:clamp(8px,1.3vw,15px) clamp(12px,1.7vw,22px);display:flex;align-items:center;min-height:clamp(84px,12vh,116px)}
#dialogueText{font-family:'Comic Neue';font-weight:700;font-size:clamp(14px,1.75vw,22px);line-height:1.35;margin:0;width:100%}
.speech-next{position:absolute;right:10px;bottom:5px;color:#df5a13;font-size:clamp(13px,1.5vw,18px);animation:arrowBob .8s infinite alternate}
@keyframes arrowBob{from{transform:translateY(-2px);opacity:.55}to{transform:translateY(2px);opacity:1}}
.tap-hint{position:absolute;right:16px;top:-24px;font-size:11px;letter-spacing:1.4px;color:#ffd9a0;text-shadow:0 2px 4px #000;text-transform:uppercase}
.tap-note{text-align:center;margin-top:6px;font-size:10px;letter-spacing:1.6px;color:#d8d4ee;opacity:.8;text-transform:uppercase}

/* touch */
#touch{position:absolute;left:0;right:0;bottom:0;z-index:50;display:none;justify-content:space-between;align-items:flex-end;padding:0 clamp(10px,3vw,22px) max(12px,env(safe-area-inset-bottom));pointer-events:none}
body.touch #touch{display:flex}
.pad{position:relative;width:clamp(106px,24vw,148px);aspect-ratio:1;border-radius:50%;background:rgba(10,16,38,.58);border:2px solid rgba(255,138,0,.75);box-shadow:0 6px 16px rgba(0,0,0,.35),inset 0 0 20px rgba(0,0,0,.4);pointer-events:auto;touch-action:none}
.pad::before{content:'';position:absolute;inset:12%;border-radius:50%;border:2px dashed rgba(255,255,255,.16)}
.pad .knob{position:absolute;left:50%;top:50%;width:42%;height:42%;border-radius:50%;background:radial-gradient(circle at 40% 35%,#ffd59a,#e07a10);border:2px solid #20150a;transform:translate(-50%,-50%);box-shadow:0 4px 8px rgba(0,0,0,.4);pointer-events:none}
.pad span{position:absolute;color:rgba(255,238,200,.85);font-size:13px;line-height:1;pointer-events:none}
.pad .up{top:8%;left:50%;transform:translateX(-50%)}
.pad .down{bottom:8%;left:50%;transform:translateX(-50%)}
.pad .left{left:8%;top:50%;transform:translateY(-50%)}
.pad .right{right:8%;top:50%;transform:translateY(-50%)}
.buttons{display:flex;align-items:flex-end;gap:12px;pointer-events:none}
.ctrl{pointer-events:auto;border:2px solid #170e02;border-radius:50%;font-family:'Bangers';letter-spacing:1px;color:#231203;background:#ffb547;box-shadow:0 5px 0 rgba(0,0,0,.4);user-select:none;touch-action:none}
.ctrl:active{transform:translateY(3px);box-shadow:none}
#btnAtk{width:clamp(70px,17vw,94px);height:clamp(70px,17vw,94px);font-size:clamp(16px,3.6vw,22px);background:radial-gradient(circle at 35% 30%,#ffd27a,#f27a12)}
#btnJump{width:clamp(52px,13vw,72px);height:clamp(52px,13vw,72px);font-size:clamp(12px,2.8vw,16px);background:radial-gradient(circle at 35% 30%,#c4ff98,#69c93e)}

#desktopHint{position:fixed;left:50%;bottom:12px;transform:translateX(-50%);z-index:45;font-family:'Bangers';font-size:11px;letter-spacing:2px;color:#ffe4b8;background:rgba(8,12,30,.62);border:2px solid rgba(255,138,30,.5);border-radius:20px;padding:4px 14px;pointer-events:none}

/* toast */
#toastLayer{position:absolute;left:50%;top:18%;transform:translateX(-50%);z-index:75;display:flex;flex-direction:column;gap:8px;align-items:center;pointer-events:none}
.toast{background:rgba(10,15,35,.92);border:3px solid var(--orange);border-radius:8px;padding:6px 16px;font-family:'Bangers';font-size:clamp(14px,2vw,20px);letter-spacing:2px;color:#fff;text-shadow:0 2px 0 #000;box-shadow:0 6px 0 rgba(0,0,0,.35);animation:toastIn .25s ease both}
.toast.out{opacity:0;transform:translateY(-8px);transition:all .3s}
@keyframes toastIn{from{opacity:0;transform:translateY(10px) scale(.92)}to{opacity:1}}

/* end */
#endScreen{}
.end-bg{position:absolute;inset:0;background:radial-gradient(circle at 50% 40%,#26356b,#080c1e 70%)}
#endScreen .end-inner{z-index:2}
.end-kicker{}
.end-title{color:#83ff3f}
.end-score{display:flex;flex-direction:column;align-items:center;gap:2px;font-family:'Bangers';letter-spacing:2px;color:#ffd9a0;font-size:clamp(11px,1.5vw,15px)}
.end-score strong{font-family:'Luckiest Guy';font-size:clamp(34px,5.5vw,64px);color:#fff;-webkit-text-stroke:2px #0d1a46;paint-order:stroke fill;letter-spacing:2px;line-height:1}
.end-score strong{text-shadow:0 6px 0 #0d1a46}

/* responsive */
@media (max-width:760px){
  #hud{flex-wrap:wrap;gap:5px;padding:max(5px,env(safe-area-inset-top)) 5px 0}
  .hud-cards{gap:4px;flex:1 0 100%}
  .hud-card{gap:4px;padding:3px;border-width:2px;border-radius:8px}
  .hud-card .face{width:32px;height:32px;border-width:1.5px}
  .hud-name{font-size:10px;letter-spacing:.3px;padding:0 3px}
  .hud-name .pip{font-size:7px}
  .hp-track{height:7px;margin-top:2px}
  .score-card{flex:1 0 100%;flex-direction:row;align-items:center;justify-content:space-between;min-width:0;padding:2px 6px 2px 10px;border-width:2px;border-radius:8px;gap:6px}
  .score-label{font-size:8px;letter-spacing:2px}
  .score-value{font-size:19px;-webkit-text-stroke:1px #0d1a46}
  .pause-btn{width:24px;height:24px;font-size:10px}
  #bossBar{top:92px;width:min(500px,86vw)}
  #comboTag{top:98px;right:8px}
  .sound-btn{font-size:10px;padding:5px 8px}
  .title-actions{top:47%}
  .title-rats{bottom:7vh;grid-template-columns:repeat(2,auto);gap:4px}
  .tr{height:clamp(90px,17.5vh,160px);max-width:34vw}
  .title-controls{font-size:9px}
  .tap-note{display:none}
  .portrait-frame{height:clamp(88px,16vh,132px);width:clamp(88px,22vw,132px)}
  .panel{padding:5px;gap:5px;border-width:3px}
  .speech{border-width:2px;padding:7px 9px}
  #dialogueText{font-size:clamp(13px,3.3vw,17px)}
  .nameplate{font-size:13px;padding:1px 8px}
}
@media (max-width:560px){
  .screen-inner{padding:3vh 10px;gap:8px}
  .screen-title{font-size:clamp(28px,8vw,46px)}
  .pick-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%}
  .pick .pic{height:clamp(86px,15vh,150px)}
  .pick .tag{font-size:10px;min-height:2.2em}
  .pick{padding:5px 5px 8px}
  .logo-wrap{width:min(88vw,560px)}
  .title-rats{bottom:6vh}
  .title-actions{top:44%}
  .title-controls{display:none}
  .title-meta{font-size:9px;gap:5px}
}
@media (max-height:500px) and (orientation:landscape){
  .logo-wrap{width:min(36vw,420px);margin-top:0}
  .tagline{display:none}
  .title-actions{top:52%}
  .title-rats{bottom:4vh}
  .tr{height:clamp(80px,32vh,180px)}
  #hud{padding-top:4px}
  #bossBar{top:64px}
  .portrait-frame{height:clamp(80px,26vh,120px)}
  .screen-inner{padding:2vh 10px;gap:8px}
  .pick .pic{height:clamp(70px,24vh,140px)}
  .btn-big{padding:7px 20px}
  .chapter-title{font-size:clamp(30px,8vh,72px)}
  .title-controls{display:none}
}
@media (pointer:coarse){
  #desktopHint{display:none!important}
}

/* wave banner */
#waveBanner{position:absolute;left:50%;top:38%;transform:translate(-50%,-50%);z-index:55;display:flex;flex-direction:column;align-items:center;gap:2px;pointer-events:none;text-align:center}
.wave-kicker{font-family:'Luckiest Guy';font-size:clamp(24px,5vw,64px);letter-spacing:2px;color:#fff;-webkit-text-stroke:clamp(2px,.45vw,5px) var(--orange);paint-order:stroke fill;text-shadow:0 7px 0 #10163a,0 0 26px rgba(0,0,0,.6);animation:slamIn .38s cubic-bezier(.2,1.5,.4,1) both}
.wave-go{font-family:'Luckiest Guy';font-size:clamp(16px,2.6vw,34px);letter-spacing:3px;color:#8bff53;-webkit-text-stroke:2px #17300f;paint-order:stroke fill;text-shadow:0 4px 0 #17300f;animation:fadeUp .4s .14s both}
#waveBanner.run-in .wave-kicker{animation:slamIn .38s cubic-bezier(.2,1.5,.4,1) both}
@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* end screen */
#endCard{background:#080c1e}
.end-bg{position:absolute;inset:0;background:
  radial-gradient(ellipse at 50% 38%,rgba(74,42,120,.55),rgba(6,9,24,.94) 68%),
  url(assets/bg_skyline.webp) center 65%/cover no-repeat;filter:saturate(1.05)}
#endCard::after{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 50% 48%,transparent 25%,rgba(3,5,16,.72) 100%);z-index:1}
.end-inner{z-index:3}
#endCard .screen-title{color:#8bff53;-webkit-text-stroke:clamp(2px,.5vw,5px) var(--orange)}
#endCard.lose .screen-title{color:#ff5a4a;-webkit-text-stroke:clamp(2px,.5vw,5px) #64110b}
.end-score strong{color:#fff}
#endCard #againBtn{margin-top:4px}

@media (max-width:760px){
  .tr{width:clamp(104px,38vw,180px);height:auto}
  .title-inner{padding-top:1.4vh}
  .title-actions{top:44%}
  .wave-kicker{font-size:clamp(22px,7vw,44px)}
  #endCard .screen-inner{padding:3vh 14px}
}
@media (max-width:520px){
  .title-meta{line-height:1.4}
  .pick .nm{font-size:clamp(15px,4.5vw,22px)}
}