:root{--cream:#fff6dc;--navy:#1b3a72;--orange:#ff9a2e;--orange2:#ff7a1a;--blue:#3d9cf5;--pill:rgba(20,40,80,.62);--sat:env(safe-area-inset-top,0px);--sab:env(safe-area-inset-bottom,0px);--sal:env(safe-area-inset-left,0px);--sar:env(safe-area-inset-right,0px)}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;touch-action:none}
html,body{margin:0;height:100%;overflow:hidden;background:#8fd0f0;font-family:'Jua','Fredoka',system-ui,sans-serif;color:#fff}
#c{position:fixed;inset:0;width:100%;height:100%;display:block}
button{font:inherit;color:inherit;border:0;cursor:pointer}
[hidden]{display:none!important}
.ic{width:42px;height:42px;border-radius:50%;background:#fff;color:var(--navy);font-size:19px;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 0 rgba(0,0,0,.22),0 6px 14px rgba(0,0,0,.2);line-height:1}
.ic:active{transform:translateY(2px)}
#loadbar{position:absolute;left:30%;right:30%;bottom:calc(var(--sab) + 6px);height:5px;border-radius:3px;background:rgba(255,255,255,.3);overflow:hidden}
#loadbar i{display:block;height:100%;width:0;background:#fff;transition:width .2s}
body.ready #loadbar{display:none}
/* HUD */
#hud{position:fixed;inset:0;z-index:10;pointer-events:none}
#hud button,#hud .stick{pointer-events:auto}
.tl{position:absolute;left:calc(var(--sal) + 10px);top:calc(var(--sat) + 10px);display:flex;gap:6px;flex-wrap:wrap;max-width:60%}
.pill{display:flex;align-items:center;gap:5px;height:32px;padding:0 12px 0 8px;border-radius:16px;background:var(--pill);font-size:17px;box-shadow:0 2px 6px rgba(0,0,0,.2)}
.pill i{font-style:normal;font-size:15px}
#pGas.warn{background:rgba(160,40,200,.78)}
.tr{position:absolute;right:calc(var(--sar) + 10px);top:calc(var(--sat) + 10px);display:flex;gap:6px}
.tr .ic{width:36px;height:36px;font-size:16px;opacity:.92}
#mini{position:absolute;right:calc(var(--sar) + 10px);top:calc(var(--sat) + 52px);width:108px;height:108px;border-radius:50%;border:3px solid #fff;box-shadow:0 3px 10px rgba(0,0,0,.35);background:#4aa8d8}
#feed{position:absolute;left:calc(var(--sal) + 10px);top:calc(var(--sat) + 48px);display:flex;flex-direction:column;gap:3px;font-size:13px}
#feed div{background:var(--pill);padding:2px 9px;border-radius:10px;animation:fin .25s;white-space:nowrap}
#feed b{color:#ffd166}
@keyframes fin{from{opacity:0;transform:translateX(-12px)}}
#banner{position:absolute;left:0;right:0;top:22%;text-align:center;font-size:30px;color:var(--cream);-webkit-text-stroke:6px var(--navy);paint-order:stroke fill;text-shadow:0 4px 0 var(--navy);opacity:0;transition:opacity .3s;transform:rotate(-2deg)}
#banner.on{opacity:1}
#stat{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--sab) + 70px);width:min(240px,56vw);display:flex;flex-direction:column;gap:4px}
#hpBar,#armorBar{position:relative;height:16px;border-radius:8px;background:rgba(0,0,0,.4);overflow:hidden;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
#armorBar{height:10px}
#hpFill{position:absolute;inset:0;width:100%;background:linear-gradient(180deg,#8dff7a,#2fcf4f);transition:width .15s}
#armorFill{position:absolute;inset:0;width:0;background:linear-gradient(180deg,#8fd0ff,#3d8cf5)}
#hpBar b,#armorBar b{position:absolute;left:0;right:0;text-align:center;font-size:12px;line-height:16px;text-shadow:0 1px 2px rgba(0,0,0,.7)}
#armorBar b{line-height:10px;font-size:9px}
#healProg{height:6px;border-radius:3px;background:rgba(0,0,0,.35);overflow:hidden;opacity:0}
#healProg.on{opacity:1}#healFill{display:block;height:100%;width:0;background:#ffd166}
#slots{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--sab) + 12px);display:flex;gap:7px;max-width:min(92vw,560px);overflow-x:auto;padding:6px 4px 0;scrollbar-width:none;pointer-events:auto;touch-action:pan-x}
#slots::-webkit-scrollbar{display:none}
.slot{flex:0 0 auto}
.slot{position:relative;width:62px;height:52px;border-radius:14px;background:var(--pill);border:3px solid rgba(255,255,255,.35);display:flex;flex-direction:column;align-items:center;justify-content:center;pointer-events:auto;font-size:11px;overflow:hidden}
.slot.sel{border-color:#fff;background:rgba(40,80,160,.8);transform:translateY(-4px)}
.slot canvas{width:48px;height:24px}
.slot b{font-size:12px;line-height:1}
.slot .rar{position:absolute;left:0;right:0;bottom:0;height:4px}
.slot em{position:absolute;right:4px;top:2px;font-style:normal;font-size:10px;opacity:.7}
.slot.empty{opacity:.45}
.slot.rel::after{content:'';position:absolute;left:0;bottom:0;height:4px;width:var(--p,0%);background:#fff}
#chips{position:absolute;left:calc(var(--sal) + 8px);top:50%;transform:translateY(-62%);display:flex;flex-direction:column;gap:6px}
.chip{position:relative;width:44px;height:44px;border-radius:14px;background:var(--pill);display:flex;align-items:center;justify-content:center;font-size:23px;border:2px solid rgba(255,255,255,.3);pointer-events:auto}
.chip b{position:absolute;right:-2px;bottom:-4px;min-width:19px;height:19px;border-radius:10px;background:#ff6b6b;font-size:12px;line-height:19px;text-align:center;padding:0 4px}
.chip.zero{opacity:.35}
#acts{position:absolute;right:calc(var(--sar) + 12px);bottom:calc(var(--sab) + 82px);display:flex;flex-direction:column;align-items:flex-end;gap:10px}
.act{width:50px;height:50px;border-radius:50%;background:var(--pill);border:3px solid rgba(255,255,255,.7);font-size:23px;display:flex;align-items:center;justify-content:center;box-shadow:0 3px 8px rgba(0,0,0,.3)}
.act.big{width:62px;height:62px;font-size:28px;background:rgba(255,154,46,.85)}
.act:active{transform:scale(.92)}
.pickb{width:auto!important;border-radius:26px!important;padding:0 16px;font-size:15px!important;background:#2fcf4f!important;height:44px!important}
#dropHint{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--sab) + 130px);font-size:15px;background:var(--pill);padding:6px 14px;border-radius:14px}
#bJump{position:absolute;left:50%;bottom:calc(var(--sab) + 120px);transform:translateX(-50%);width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#ffd166,#ff8a1a);border:6px solid #fff;font-size:30px;color:#fff;text-shadow:0 2px 0 rgba(0,0,0,.3);box-shadow:0 8px 24px rgba(0,0,0,.35);animation:pulse .9s infinite alternate}
#bJump span::before{content:attr(data-t)}
@keyframes pulse{to{transform:translateX(-50%) scale(1.07)}}
.stick{position:absolute;width:110px;height:110px;margin:-55px 0 0 -55px;border-radius:50%;border:3px solid rgba(255,255,255,.55);background:rgba(255,255,255,.12);opacity:0;transition:opacity .15s}
.stick i{position:absolute;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;background:rgba(255,255,255,.7);box-shadow:0 2px 6px rgba(0,0,0,.3)}
.stick.on{opacity:1}.aimst i{background:rgba(255,120,80,.85)}
.aimst{border-color:rgba(255,160,120,.7)}
#tags{position:fixed;inset:0;pointer-events:none;z-index:5}
.tag{position:absolute;transform:translate(-50%,-100%);text-align:center;font-size:12px;text-shadow:0 1px 2px rgba(0,0,0,.8),0 0 4px rgba(0,0,0,.6);white-space:nowrap}
.tag .hp{width:44px;height:6px;border-radius:3px;background:rgba(0,0,0,.5);margin:2px auto 0;overflow:hidden;box-shadow:0 0 0 1px rgba(255,255,255,.5)}
.tag .hp i{display:block;height:100%;background:#4cd964}
.tag.ally{color:#9be7ff}
#pops{position:fixed;inset:0;pointer-events:none;z-index:6;overflow:hidden}
.pop{position:absolute;transform:translate(-50%,-50%);font-size:20px;color:#fff;-webkit-text-stroke:5px #ff6b3d;paint-order:stroke fill;animation:pop .8s ease-out forwards;white-space:nowrap}
.pop.dmg{font-size:16px;-webkit-text-stroke:4px #1b3a72}
@keyframes pop{0%{transform:translate(-50%,-30%) scale(.3);opacity:0}15%{transform:translate(-50%,-70%) scale(1.25);opacity:1}100%{transform:translate(-50%,-190%) scale(1);opacity:0}}
#hurt{position:fixed;inset:0;pointer-events:none;box-shadow:inset 0 0 90px 20px rgba(255,40,60,.0);z-index:7;transition:box-shadow .25s}
#hurt.on{box-shadow:inset 0 0 90px 20px rgba(255,40,60,.55)}
#gasfx{position:fixed;inset:0;pointer-events:none;z-index:7;box-shadow:inset 0 0 120px 30px rgba(170,60,230,0);transition:box-shadow .3s}
#gasfx.on{box-shadow:inset 0 0 120px 30px rgba(170,60,230,.6)}
#bigmap{position:fixed;inset:0;z-index:30;background:rgba(10,30,70,.82);display:flex;align-items:center;justify-content:center}
#bm{width:min(94vw,94vh);height:min(94vw,94vh);border-radius:18px;border:4px solid #fff;background:#4aa8d8}
#bigmap .ic{position:absolute;right:16px;top:calc(var(--sat) + 14px)}

/* 캐릭터 고르기 */
#picker{position:fixed;inset:0;z-index:40;background:rgba(10,30,70,.72);display:flex;align-items:center;justify-content:center;padding:calc(var(--sat) + 12px) 12px calc(var(--sab) + 12px)}
.pk-panel{width:min(520px,100%);max-height:100%;background:rgba(255,255,255,.95);border-radius:28px;padding:16px 14px 18px;display:flex;flex-direction:column;align-items:center;gap:12px;overflow:auto;box-shadow:0 12px 40px rgba(0,0,0,.4)}
.pk-name input{width:200px;height:44px;border-radius:22px;border:3px solid #1b3a72;background:#fff;color:#1b3a72;text-align:center;font:inherit;font-size:20px;outline:none;-webkit-user-select:text;user-select:text}
.pk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%}
.pk-tile{display:flex;flex-direction:column;align-items:center;gap:2px;border-radius:18px;background:#e9f6e2;border:3px solid transparent;padding:6px 2px 4px;color:#1b3a72;font-size:13px}
.pk-tile img{width:100%;max-width:84px;aspect-ratio:1;object-fit:contain}
.pk-tile.on{border-color:#ff9a2e;background:#fff3d8;transform:translateY(-2px)}
.pk-ok{margin:4px auto 0!important}

.pill i svg{width:17px;height:17px;fill:currentColor;display:block}
.ic svg,.act svg{width:58%;height:58%;fill:currentColor;display:block}
.act.big svg{width:56%;height:56%}
.chip img{width:34px;height:34px;object-fit:contain;filter:drop-shadow(0 2px 2px rgba(0,0,0,.35))}
.ride{width:auto!important;border-radius:26px!important;padding:0 16px;font-size:15px!important;background:#ffb13b!important;color:#1b3a72;height:44px!important;font-family:inherit}

#region{position:absolute;left:50%;top:calc(var(--sat) + 56px);transform:translateX(-50%) translateY(-6px);padding:4px 14px;border-radius:14px;background:var(--pill);font-size:15px;opacity:0;transition:opacity .3s,transform .3s;white-space:nowrap;pointer-events:none}
#region.on{opacity:1;transform:translateX(-50%)}

/* 아레나 */
#chips,#armorBar,#bPick,#bRide,#bJump,#dropHint,#region,#healProg{display:none!important}
#board{position:absolute;right:calc(var(--sar,0px) + 8px);top:calc(var(--sat,0px) + 168px);width:116px;display:flex;flex-direction:column;gap:2px;font-size:12px;pointer-events:none}
#board div{display:flex;align-items:center;gap:5px;background:var(--pill);border-radius:9px;padding:2px 7px;opacity:.9}
#board div.me{background:rgba(255,160,40,.85);opacity:1}
#board em{font-style:normal;width:12px;opacity:.7}
#board span{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#btnSpec{display:none!important}

/* 미션 HUD */
#obj{position:absolute;left:calc(var(--sal,0px) + 10px);top:calc(var(--sat,0px) + 58px);max-width:calc(100vw - 150px);font-size:13px;line-height:1.25;background:var(--pill);border-radius:12px;padding:4px 10px;pointer-events:none}
#bossbar{position:absolute;left:calc(var(--sal,0px) + 10px);right:136px;top:calc(var(--sat,0px) + 92px);pointer-events:none;text-align:center}
#bossbar b{display:block;font-size:13px;text-shadow:0 2px 3px rgba(0,0,0,.6);margin-bottom:2px}
#bossbar .bb-bar{height:14px;border-radius:8px;background:rgba(0,0,0,.55);border:2px solid #fff;overflow:hidden}
#bossbar .bb-bar i{display:block;height:100%;background:linear-gradient(180deg,#ff8a7a,#e8392b);transition:width .15s}
#bossbar.weak .bb-bar{border-color:#ffe066;box-shadow:0 0 10px #ffe066}
#bossbar em{display:block;font-style:normal;font-size:12px;color:#ffe066;min-height:14px;text-shadow:0 2px 3px rgba(0,0,0,.7)}
@media (min-width:700px){#obj{max-width:50vw}#bossbar{left:50%;right:auto;transform:translateX(-50%);width:420px}}
/* 스테이지 선택 */
#stages{position:fixed;inset:0;z-index:30;background:linear-gradient(180deg,#5fb6f5,#9be07a);display:flex;flex-direction:column;color:#fff;font-family:Jua,'Fredoka',sans-serif}
#stages[hidden]{display:none}
.st-top{display:flex;align-items:center;gap:10px;padding:calc(var(--sat,0px) + 10px) 14px 8px}
.st-back{width:42px;height:42px;border-radius:14px;border:3px solid #fff;background:rgba(27,43,99,.75);color:#fff;font-size:26px;line-height:1}
.st-title{font-size:24px;text-shadow:0 3px 0 #1b2b63;flex:1}
.st-stat{display:flex;gap:10px;font-size:14px;background:rgba(27,43,99,.7);border-radius:14px;padding:6px 12px;flex-wrap:wrap;justify-content:flex-end}
.st-list{flex:1;overflow-y:auto;padding:6px 14px calc(var(--sab,0px) + 20px)}
.st-act{margin-bottom:16px;background:rgba(255,255,255,.22);border-radius:20px;padding:10px 10px 12px;border:3px solid rgba(255,255,255,.55)}
.st-act h3{margin:0 0 8px;font-size:18px;text-shadow:0 2px 0 #1b2b63;font-weight:400}.st-act h3 b{display:inline-block;width:26px;height:26px;line-height:26px;text-align:center;border-radius:50%;background:#ff7a1a;border:2px solid #fff;margin-right:6px;font-weight:400}
.st-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.st-node{position:relative;display:flex;flex-direction:column;align-items:center;gap:1px;padding:8px 4px 6px;border-radius:16px;border:3px solid #fff;background:#3f8cf0;color:#fff;font-family:inherit;font-size:13px}
.st-node i{font-style:normal;font-size:20px;line-height:1}.st-node b{font-size:12px;opacity:.85;font-weight:400}.st-node span{font-size:13px}.st-node em{font-style:normal;color:#ffe066;letter-spacing:1px;font-size:14px;text-shadow:0 1px 0 #1b2b63}
.st-node.cur{background:#ff7a1a;animation:stpulse 1.4s infinite}.st-node.done{background:#34b36b}.st-node.boss{background:#c0392b}.st-node.boss.done{background:#8e44ad}.st-node.lock{background:#6b7a99;opacity:.7}
@keyframes stpulse{50%{transform:scale(1.05)}}
/* 컷신 */
#cut{position:fixed;inset:0;z-index:60;background:#0d1330;transition:opacity .2s}
#cut.out{opacity:0}
.cut-img{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0}.cut-img.in{opacity:1;transition:opacity .5s}
.cut-bubble{position:absolute;left:12px;right:12px;bottom:calc(var(--sab,0px) + 18px);display:flex;gap:10px;align-items:flex-end}
.cut-av{width:72px;height:72px;flex:0 0 72px;border-radius:50%;background:#fff;border:4px solid #1b2b63;overflow:hidden}
.cut-av canvas{width:100%;height:100%}
.cut-box{flex:1;background:#fff;color:#1b2b63;border:4px solid #1b2b63;border-radius:22px;padding:8px 14px 10px;box-shadow:0 5px 0 rgba(0,0,0,.25);min-height:72px}
.cut-who{display:block;font-size:14px;color:#ff7a1a;font-weight:400}.cut-txt{margin:2px 0 0;font-size:19px;line-height:1.3;min-height:25px}
.cut-skip{position:absolute;right:12px;top:calc(var(--sat,0px) + 12px);border:3px solid #fff;background:rgba(27,43,99,.7);color:#fff;font-family:inherit;border-radius:14px;padding:6px 12px;font-size:14px}
.cut-tap{position:absolute;left:0;right:0;bottom:calc(var(--sab,0px) + 4px);text-align:center;font-size:11px;color:rgba(255,255,255,.7)}
.pk-coin{margin-left:10px;color:#ffe066}.pk-tile.lock{opacity:.55}

.st-card{position:absolute;inset:0;background:rgba(10,20,50,.6);display:flex;align-items:center;justify-content:center;padding:20px}.st-card[hidden]{display:none}
.sc-box{width:min(340px,100%);background:#fff;color:#1b2b63;border:4px solid #1b2b63;border-radius:24px;padding:16px 18px;text-align:center;box-shadow:0 8px 0 rgba(0,0,0,.25)}
.sc-no{font-size:13px;color:#ff7a1a}.sc-box h2{margin:4px 0 0;font-size:26px;font-weight:400}.sc-sub{font-size:14px;color:#c0392b;margin-top:2px}.sc-box p{margin:10px 0;font-size:16px}
.sc-box ul{list-style:none;padding:0;margin:0 0 14px;text-align:left}.sc-box li{padding:5px 10px;border-radius:10px;background:#eef2ff;margin-bottom:5px;font-size:14px;opacity:.75}.sc-box li.ok{background:#fff3b0;opacity:1}
.sc-btns{display:flex;gap:10px}.sc-btns button{flex:1;padding:11px;border-radius:16px;border:3px solid #1b2b63;font-family:inherit;font-size:17px;background:#e6ebff;color:#1b2b63}.sc-btns .sc-go{background:#ff7a1a;color:#fff;border-color:#fff;box-shadow:0 0 0 3px #1b2b63}

.cut-img.in{animation:kb 16s ease-out forwards}@keyframes kb{from{transform:scale(1.0)}to{transform:scale(1.09) translate(-1%,-1%)}}
.cut-box{animation:bub .25s ease-out}@keyframes bub{from{transform:translateY(8px);opacity:.4}}

.sc-chal{display:block;margin:0 0 12px;font-size:13px;text-align:left;background:#ffe9e5;border-radius:10px;padding:6px 10px}.sc-chal input{margin-right:6px}
.pk-ally{display:flex;gap:8px;margin:8px 0;justify-content:center;font-size:14px}.pk-ally button{padding:6px 12px;border-radius:12px;border:3px solid #fff;background:rgba(27,43,99,.7);color:#fff;font-family:inherit}.pk-ally button.on{background:#ff7a1a}
#mods{position:fixed;inset:0;z-index:35;background:linear-gradient(180deg,#5fb6f5,#9be07a);display:flex;flex-direction:column;color:#fff;font-family:Jua,'Fredoka',sans-serif}#mods[hidden]{display:none}
.md-list{flex:1;overflow-y:auto;padding:6px 14px 20px;display:grid;grid-template-columns:repeat(2,1fr);gap:8px;align-content:start}
.md-row{background:rgba(255,255,255,.25);border:3px solid #fff;border-radius:16px;padding:6px 8px;display:flex;gap:8px;align-items:center;font-size:13px}.md-row img{width:52px;height:30px;object-fit:contain;background:rgba(27,43,99,.35);border-radius:8px}
.md-row b{display:block;font-weight:400}.md-row i{font-style:normal;color:#ffe066;letter-spacing:1px}.md-row button{margin-left:auto;padding:6px 8px;border-radius:12px;border:2px solid #fff;background:#ff7a1a;color:#fff;font-family:inherit;font-size:13px}.md-row button[disabled]{background:#6b7a99;opacity:.7}

.st-act h3{background-size:cover;background-position:center;border-radius:14px;padding:12px 12px;margin-bottom:10px;border:2px solid #fff}
.pk-tile canvas{width:100%;max-width:84px;aspect-ratio:1}.pk-tile.lock canvas{filter:grayscale(1) brightness(.85)}
@media (max-width:520px){.md-list{grid-template-columns:1fr}.md-row{padding:8px 10px}.md-row img{width:64px;height:36px}.md-row button{white-space:nowrap;min-width:72px;font-size:15px}}
.st-title{white-space:nowrap;flex:0 0 auto}.st-stat{font-size:12px;gap:8px;flex:1;min-width:0}
.pk-hats{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:8px 0 2px}.pk-hats button{padding:5px 10px;border-radius:12px;border:2px solid #1b2b63;background:#e6ebff;color:#1b2b63;font-family:inherit;font-size:13px}.pk-hats button.on{background:#ff7a1a;color:#fff;border-color:#1b2b63}.pk-hats button.lock{opacity:.8;background:#d8dde8}
.pk-panel{max-height:94vh;overflow-y:auto}.pk-grid{gap:6px}.pk-tile{padding:3px 2px 3px;font-size:12px}.pk-tile canvas{max-width:64px}
.pk-ok{position:sticky;bottom:0;flex:0 0 auto}.pk-tile canvas{max-width:56px}

/* ===== 가로 화면 (폰) ===== */
#rot{position:fixed;inset:0;z-index:200;background:#17306b;display:none;align-items:center;justify-content:center}
#rot svg{width:96px;height:96px;animation:rotp 2.2s ease-in-out infinite}
@keyframes rotp{0%,25%{transform:rotate(0)}60%,100%{transform:rotate(-90deg)}}
body.need-landscape #rot{display:flex}
@media (orientation:landscape) and (max-height:520px){
  .tl{left:50%;transform:translateX(-50%);top:calc(var(--sat) + 6px);max-width:56vw;flex-wrap:nowrap;justify-content:center}
  .pill{height:28px;font-size:15px;padding:0 10px 0 7px}
  #obj{left:50%;right:auto;transform:translateX(-50%);top:calc(var(--sat) + 38px);max-width:52vw;text-align:center;font-size:12px;padding:3px 10px}
  #bossbar{left:50%;right:auto;transform:translateX(-50%);width:min(420px,50vw);top:calc(var(--sat) + 62px)}
  #stat{left:calc(var(--sal) + 10px);top:calc(var(--sat) + 8px);bottom:auto;transform:none;width:150px}
  #hpBar{height:18px}
  #mini{width:84px;height:84px;top:calc(var(--sat) + 8px);right:calc(var(--sar) + 10px)}
  .tr{top:calc(var(--sat) + 8px);right:calc(var(--sar) + 104px)}
  #slots{max-width:min(44vw,420px);bottom:calc(var(--sab) + 8px)}
  .slot{width:54px;height:46px}
  #acts{flex-direction:row;align-items:flex-end;right:calc(var(--sar) + 14px);bottom:calc(var(--sab) + 12px);gap:10px}
  .act{width:46px;height:46px}.act.big{width:56px;height:56px}
  #banner{top:30%;font-size:26px}
  .stick{width:96px;height:96px;margin:-48px 0 0 -48px}
  /* 메뉴: 캐릭터 왼쪽, 로고·버튼 오른쪽 */
  #menu .logo-wrap{position:absolute!important;left:auto!important;right:calc(var(--sar) + 7vw)!important;top:10px!important;transform:scale(.78);transform-origin:top right}
  #menu .best-m{position:absolute!important;left:auto!important;right:calc(var(--sar) + 7vw)!important;top:132px!important;transform:none!important}
  #menu .menu-bottom{position:absolute!important;left:auto!important;right:calc(var(--sar) + 4vw)!important;bottom:calc(var(--sab) + 8px)!important;width:300px!important;padding:0!important}
  #menu .studio{display:none!important}
  /* 스테이지 선택 */
  .st-top{padding:calc(var(--sat) + 4px) calc(var(--sar) + 12px) 4px calc(var(--sal) + 12px)}
  .st-back{width:36px;height:36px}.st-title{font-size:20px}
  .st-list{padding:4px calc(var(--sar) + 12px) 12px calc(var(--sal) + 12px)}
  .st-grid{grid-template-columns:repeat(6,1fr);gap:6px}
  .st-node{padding:5px 2px 4px;font-size:12px}.st-node i{font-size:16px}.st-node span{font-size:11px}.st-node em{font-size:12px}
  .st-act h3{padding:8px 10px;font-size:15px;margin-bottom:6px}
  .sc-box{padding:10px 14px;width:min(480px,92vw)}.sc-box h2{font-size:22px}.sc-box p{margin:6px 0}.sc-box ul{display:flex;gap:6px;margin-bottom:8px}.sc-box li{flex:1;font-size:11px;margin:0}
  .sc-chal{margin-bottom:8px;font-size:12px}.sc-btns button{padding:8px;font-size:15px}
  /* 컷신 */
  .cut-img{background-position:center 35%}
  .cut-bubble{left:calc(var(--sal) + 14px);right:calc(var(--sar) + 14px);bottom:calc(var(--sab) + 8px)}
  .cut-av{width:54px;height:54px;flex-basis:54px}.cut-box{min-height:58px;padding:6px 12px 8px}.cut-txt{font-size:16px;min-height:20px}.cut-tap{display:none}
  /* 캐릭터 선택·개조 */
  .pk-panel{width:min(760px,96vw)!important;padding:10px 12px!important}.pk-grid{grid-template-columns:repeat(9,1fr)!important}.pk-tile canvas{max-width:44px}.pk-tile{font-size:10px}
  #over .kk-panel{display:grid!important;grid-template-columns:1fr 1fr;grid-auto-flow:row dense;column-gap:18px;row-gap:4px;align-items:center;width:min(640px,94vw)!important;max-height:94vh!important;overflow:auto!important;padding:10px 16px!important}
  #over .kk-panel>.kk-lbl,#over .kk-panel>.kk-score,#over .kk-panel>#rankO,#over .kk-panel>.kk-stars,#over .kk-panel>#newBest,#over .kk-panel>.kk-stats,#over .kk-panel>.kk-extra,#over .kk-panel>#hofForm,#over .kk-panel>.kk-card{grid-column:1}
  #over .kk-panel>#btnPrimary,#over .kk-panel>.kk-share,#over .kk-panel>.kk-btns,#over .kk-panel>.studio,#over .kk-panel>.kk-more{grid-column:2}
  .md-list{grid-template-columns:repeat(3,1fr)}
}

/* 판 중 강화 카드 · 일일 도전 · 업적 */
#perks{position:absolute;left:calc(var(--sal,0px) + 10px);top:62px;font-size:16px;color:#ffe066;letter-spacing:3px;text-shadow:0 2px 0 #1b2b63;pointer-events:none}
#perk{position:fixed;inset:0;z-index:30;background:rgba(10,30,70,.55);display:flex;align-items:center;justify-content:center;font-family:Jua,'Fredoka',sans-serif}#perk[hidden]{display:none}
.pf-row{display:flex;gap:12px;padding:12px}
.pf-row button{width:132px;min-height:120px;border-radius:20px;border:4px solid #fff;background:linear-gradient(180deg,#ffb23d,#ff7a1a);color:#fff;font-family:inherit;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:10px 6px;box-shadow:0 6px 0 #1b2b63}
.pf-row button i{font-style:normal;font-size:38px;line-height:1;text-shadow:0 3px 0 #1b2b63}.pf-row button b{font-weight:400;font-size:17px;line-height:1.2;text-shadow:0 2px 0 #1b2b63}
.pf-row button:active{transform:translateY(3px);box-shadow:0 3px 0 #1b2b63}
#daily,#ach{position:fixed;inset:0;z-index:35;background:linear-gradient(180deg,#5fb6f5,#9be07a);display:flex;flex-direction:column;color:#fff;font-family:Jua,'Fredoka',sans-serif}#daily[hidden],#ach[hidden]{display:none}
.dl-body{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:10px 16px 20px}
.dl-card{display:flex;gap:14px;align-items:center;background:rgba(255,255,255,.28);border:4px solid #fff;border-radius:22px;padding:12px 18px;min-width:min(86vw,360px)}
.dl-ic{width:64px;height:64px;border-radius:18px;background:#1b2b63;display:flex;align-items:center;justify-content:center;font-size:34px;color:#ffe066}
.dl-t b{display:block;font-weight:400;font-size:20px}.dl-t i{display:block;font-style:normal;font-size:14px;opacity:.9}.dl-t em{display:block;font-style:normal;font-size:15px;color:#ffe066;margin-top:4px}
.dl-dots{display:flex;gap:8px}.dl-dots u{width:22px;height:22px;border-radius:50%;background:rgba(27,43,99,.35);border:3px solid #fff}.dl-dots u.on{background:#ffe066}
.dl-go{min-width:200px;padding:14px 22px;border-radius:20px;border:4px solid #fff;background:#ff7a1a;color:#fff;font-family:inherit;font-size:22px;box-shadow:0 6px 0 #1b2b63}.dl-go:disabled{opacity:.55;background:#6b7a99}
.ac-list{flex:1;overflow-y:auto;padding:6px 14px 20px;display:grid;grid-template-columns:repeat(2,1fr);gap:8px;align-content:start}
.ac-row{background:rgba(255,255,255,.25);border:3px solid #fff;border-radius:16px;padding:8px 10px;display:flex;gap:10px;align-items:center;font-size:14px}
.ac-row>i{font-style:normal;width:38px;height:38px;border-radius:12px;background:#1b2b63;color:#ffe066;display:flex;align-items:center;justify-content:center;font-size:22px;flex:0 0 auto}
.ac-row>div{flex:1;min-width:0}.ac-row b{font-weight:400;margin-right:6px}.ac-row span{color:#ffe066;letter-spacing:1px;font-size:12px}
.ac-row u{display:block;height:8px;border-radius:5px;background:rgba(27,43,99,.4);margin:4px 0 2px;overflow:hidden}.ac-row u s{display:block;height:100%;background:#ffe066}.ac-row em{font-style:normal;font-size:11px;opacity:.9}
.ac-row button{padding:8px 10px;min-width:64px;border-radius:12px;border:2px solid #fff;background:#ff7a1a;color:#fff;font-family:inherit;font-size:14px}.ac-row button:disabled{opacity:.5;background:#6b7a99}
.ac-row.rdy{border-color:#ffe066;box-shadow:0 0 0 3px rgba(255,224,102,.6)}.ac-row.max{opacity:.8}
@media (max-width:520px){.ac-list{grid-template-columns:1fr}}
@media (orientation:landscape) and (max-height:520px){.ac-list{grid-template-columns:repeat(3,1fr)}.pf-row button{width:150px;min-height:104px}}
#chapter{position:fixed;inset:0;z-index:50;background:#0d1740;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;font-family:Jua,'Fredoka',sans-serif;color:#fff;animation:chIn .35s ease-out}#chapter.out{opacity:0;transition:opacity .25s}
@keyframes chIn{from{opacity:0}to{opacity:1}}
.ch-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.35}
.ch-no{position:relative;font-size:96px;line-height:1;color:#ffe066;-webkit-text-stroke:8px #1b2b63;paint-order:stroke fill;text-shadow:0 6px 0 #1b2b63;animation:chNo .5s cubic-bezier(.2,1.6,.4,1)}
.ch-name{position:relative;font-size:34px;-webkit-text-stroke:6px #1b2b63;paint-order:stroke fill;text-shadow:0 4px 0 #1b2b63}
@keyframes chNo{from{transform:scale(.3) rotate(-12deg);opacity:0}to{transform:none;opacity:1}}
@media (orientation:landscape) and (max-height:520px){.ch-no{font-size:72px}.ch-name{font-size:28px}}
@media (orientation:portrait){.pf-row{flex-direction:column;gap:10px;width:100%;align-items:center}.pf-row button{width:min(86vw,340px);min-height:76px;flex-direction:row;justify-content:flex-start;gap:16px;padding:10px 20px}.pf-row button i{font-size:34px;width:44px}.pf-row button b{font-size:19px;text-align:left}.dl-card{min-width:0;width:min(88vw,360px)}.ch-no{font-size:110px}}
.ch-foe{position:relative;font-size:20px;color:#ffb3a8;margin-top:6px;-webkit-text-stroke:4px #1b2b63;paint-order:stroke fill}