/* 레이아웃: 브랜드 바 → 사원 선택(명부 7열 + 상세) → 대전 무대. 무대가 주인공, 주변은 조용한 야근 사무실 톤 */
:root{
  --bg:#110f13; --panel:#19161c; --panel-2:#221e26; --line:#302a33; --fg:#f2ede7; --mute:#9d929a; --dim:#675e66;
  --acc:#FC5E20; --acc-deep:#a63a0e; --acc-soft:rgba(252,94,32,.16);
  --p2:#3db7ff; --p2-soft:rgba(61,183,255,.16); --gold:#ffd24a;
  --f-px:'Press Start 2P','IBM Plex Sans KR',ui-monospace,monospace;
  --f-kr:'Pretendard','IBM Plex Sans KR',system-ui,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,monospace;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{background:var(--bg);color:var(--fg)}
body{font-family:var(--f-kr);font-size:15px;line-height:1.55;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:20px 48px}
h1,h2,h3,h4,p,ol{margin:0}
button{font:inherit;color:inherit;cursor:pointer}
button:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
canvas{image-rendering:pixelated;image-rendering:crisp-edges}
.app{max-width:1180px;margin:0 auto;display:flex;flex-direction:column;gap:18px}
.top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid var(--line)}
.brand h1{font-size:clamp(24px,3.4vw,32px);font-weight:700;letter-spacing:-.02em;line-height:1.1}
.eyebrow{font-family:var(--f-px);font-size:9px;color:var(--acc);letter-spacing:.06em;margin-bottom:8px}
.ghost{background:transparent;border:1px solid var(--line);padding:8px 12px;font-size:13px;color:var(--mute)}
.ghost:hover{color:var(--fg);border-color:var(--dim)}
.screen{display:flex;flex-direction:column;gap:16px}
.sec-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.sec-head h2{font-size:18px;font-weight:700}
.hint{font-size:13px;color:var(--mute)}
.hint b{color:var(--acc);font-weight:600}
.hint b.two{color:var(--p2)}

.select{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:18px;align-items:start}
@media(max-width:900px){.select{grid-template-columns:1fr}}
.roster{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
@media(max-width:560px){.roster{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{position:relative;display:flex;flex-direction:column;gap:4px;padding:5px 5px 7px;background:var(--panel);border:2px solid var(--line);text-align:center;min-width:0}
.card:hover,.card.focus{border-color:var(--dim);background:var(--panel-2)}
.card.s1{border-color:var(--acc)}
.card.s2{border-color:var(--p2)}
.card.s1.s2{border-color:var(--acc) var(--p2) var(--p2) var(--acc)}
.card canvas{width:100%;aspect-ratio:1;background:#0d0b10}
.tags{position:absolute;top:3px;left:3px;display:flex;gap:2px}
.tag{font-family:var(--f-px);font-size:7px;padding:3px 3px 2px;background:var(--acc);color:#1a0d06}
.tag.t2{background:var(--p2);color:#04121c}
.cname{font-weight:700;font-size:12.5px;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.detail{background:var(--panel);border:2px solid var(--line);padding:16px;display:flex;flex-direction:column;gap:14px;min-width:0}
.show{position:relative;border:2px solid var(--line);background:#0b0a0d}
.show canvas{display:block;width:100%;aspect-ratio:120/76}
.show-label{position:absolute;right:8px;top:8px;font-family:var(--f-px);font-size:8px;color:var(--acc)}
.d-name{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.d-name h3{font-size:26px;font-weight:700;letter-spacing:-.02em}
.d-name span{font-size:13px;color:var(--mute)}
.quote{font-size:14px;opacity:.85}
.stats{display:flex;flex-direction:column;gap:8px}
.stat{display:grid;grid-template-columns:48px 1fr 18px;align-items:center;gap:10px;font-size:13px;color:var(--mute)}
.stat em{font-style:normal;font-family:var(--f-mono);text-align:right;color:var(--fg)}
.pipsbar{display:grid;grid-template-columns:repeat(5,1fr);gap:3px}
.pipsbar i{height:10px;background:var(--panel-2);border:1px solid var(--line)}
.pipsbar i.on{background:var(--acc);border-color:var(--acc)}
.block{border-top:1px dashed var(--line);padding-top:12px;display:flex;flex-direction:column;gap:7px}
.b-head{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.b-tag{font-family:var(--f-px);font-size:8px;padding:4px 5px 3px;border:1px solid var(--acc);color:var(--acc)}
.b-head b{font-size:16px}
.b-head small{font-size:12px;color:var(--mute)}
.block p{font-size:13px;color:var(--mute)}
.combo-list{list-style:none;padding:0;display:flex;flex-direction:column;gap:6px}
.combo-list li{display:grid;grid-template-columns:auto 1fr;gap:12px;align-items:center;font-size:13px;color:var(--mute)}
.seq{display:flex;align-items:center;gap:4px}
.seq i{font-style:normal;color:var(--dim);font-size:11px}
kbd{font-family:var(--f-mono);font-size:12px;padding:1px 6px;border:1px solid var(--line);border-bottom-width:2px;background:var(--panel-2);color:var(--fg)}

.vsbar{display:flex;flex-wrap:wrap;align-items:center;gap:12px;padding:12px;background:var(--panel);border:2px solid var(--line)}
.slot{display:flex;align-items:center;gap:10px;padding:6px 14px 6px 6px;background:var(--panel-2);border:2px solid var(--line);min-width:0;flex:0 1 210px;text-align:left}
.slot canvas{width:48px;height:48px;background:#0b0a0d;flex:none}
.who{display:flex;flex-direction:column;gap:4px;line-height:1.2;min-width:0}
.who small{font-family:var(--f-px);font-size:8px}
.who b{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot.p1 small{color:var(--acc)} .slot.p2 small{color:var(--p2)}
.slot.p1.picking{border-color:var(--acc);box-shadow:0 0 0 3px var(--acc-soft)}
.slot.p2.picking{border-color:var(--p2);box-shadow:0 0 0 3px var(--p2-soft)}
.vs{font-family:var(--f-px);font-size:13px;color:var(--dim)}
.mode{display:flex;border:2px solid var(--line);margin-left:auto}
.mode button{background:none;border:0;padding:9px 12px;color:var(--mute);font-size:13px;font-weight:600}
.mode button{white-space:nowrap}
.mode button.on{background:var(--panel-2);color:var(--fg)}
.cta{background:var(--acc);color:#170a04;border:0;padding:12px 22px;font-weight:700;font-size:15px;box-shadow:0 4px 0 var(--acc-deep)}
.cta:active{transform:translateY(2px);box-shadow:0 2px 0 var(--acc-deep)}
@media(max-width:640px){.mode{margin-left:0}.cta{flex:1}}

.keys{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
@media(max-width:700px){.keys{grid-template-columns:1fr}}
.kgroup{padding:10px 12px;background:var(--panel);border:1px solid var(--line);font-size:13px;color:var(--mute);display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;min-width:0}
.kgroup > b{font-family:var(--f-px);font-size:9px;color:var(--acc);margin-right:2px}
.kgroup.k2 > b{color:var(--p2)}
.kgroup span{white-space:nowrap}

.stage{position:relative;width:100%;max-width:1152px;margin:0 auto;aspect-ratio:16/9;background:#000;border:2px solid var(--line);overflow:hidden;container-type:inline-size}
#game{display:block;width:100%;height:100%}
.hud{position:absolute;inset:0;pointer-events:none}
.hud-top{position:absolute;left:2.4cqw;right:2.4cqw;top:2cqw;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:2cqw;align-items:start}
.side{display:flex;flex-direction:column;gap:.7cqw;min-width:0}
.s2{align-items:flex-end}
.nm{display:flex;align-items:center;gap:1cqw}
.s2 .nm{flex-direction:row-reverse}
.pt{width:4.6cqw;height:4.6cqw;background:#0b0a0d;border:.3cqw solid #000}
.nm b{display:block;font-size:2cqw;font-weight:700;line-height:1.1;text-shadow:0 .25cqw 0 #000}
.s2 .nm b{text-align:right}
.ptag{display:inline-block;font-family:var(--f-px);font-size:max(8px,1.25cqw);line-height:1;padding:.35cqw .6cqw;margin-bottom:.45cqw;background:#3a343f;color:#cfc6cc;border:.2cqw solid #000;letter-spacing:.05em}
.ptag.me{background:var(--acc);color:#fff;box-shadow:0 0 1.2cqw rgba(252,94,32,.7);animation:ptagb 1.6s ease-in-out infinite}
@keyframes ptagb{50%{box-shadow:0 0 .4cqw rgba(252,94,32,.4)}}
.s2 .nm > div{display:flex;flex-direction:column;align-items:flex-end}.s1 .nm > div{display:flex;flex-direction:column;align-items:flex-start}
.pt.me{border-color:var(--acc);box-shadow:0 0 0 .2cqw #000,0 0 1.2cqw rgba(252,94,32,.6)}
.pips{display:flex;gap:.7cqw;margin-top:.6cqw}
.s2 .pips{justify-content:flex-end}
.pips i{width:1.1cqw;height:1.1cqw;background:#000a;border:.2cqw solid #000;transform:rotate(45deg)}
.pips i.on{background:var(--gold)}
.bar{position:relative;width:100%;height:2.3cqw;background:#160c0e;border:.35cqw solid #000;box-shadow:inset 0 0 0 .2cqw #3b2f36}
.hp,.trail{position:absolute;top:0;bottom:0;left:0;width:100%}
.s2 .hp,.s2 .trail{left:auto;right:0}
.trail{background:#fff2e4}
.hp{background:linear-gradient(#ffb47a,var(--acc) 55%,#c4400c)}
.s2 .hp{background:linear-gradient(#a8e3ff,var(--p2) 55%,#1676b0)}
.hp.low{animation:low .4s steps(2) infinite}
@keyframes low{50%{filter:brightness(1.6)}}
.combo{font-family:var(--f-px);color:var(--gold);text-shadow:.25cqw .25cqw 0 #000;min-height:4cqw;line-height:1.3}
.combo b{display:block;font-size:2.6cqw;font-weight:400}
.combo small{display:block;font-size:1.1cqw;color:#fff}
.s2 .combo{text-align:right}
.combo.bump{animation:bump .25s steps(3)}
@keyframes bump{0%{transform:scale(1.5)}100%{transform:none}}
.s1 .combo{transform-origin:left top}.s2 .combo{transform-origin:right top}
.timer{font-family:var(--f-px);font-size:3.8cqw;color:#fff;text-shadow:.35cqw .35cqw 0 #000;min-width:7cqw;text-align:center;padding-top:.3cqw}
.timer.hurry{color:#ff6a5a}
.msg{position:absolute;left:0;right:0;top:36%;text-align:center;font-family:var(--f-px);font-size:5.6cqw;color:#fff;text-shadow:.45cqw .45cqw 0 var(--acc),.9cqw .9cqw 0 #000;padding-inline:4cqw}
.msg.pop{animation:pop .35s steps(5)}
@keyframes pop{0%{transform:scale(2.2);opacity:0}100%{transform:none;opacity:1}}
.banner{position:absolute;top:26%;font-weight:700;font-size:2.8cqw;padding:.8cqw 2.2cqw;background:#000d;opacity:0;white-space:nowrap}
.banner small{display:block;font-family:var(--f-px);font-size:1.1cqw;color:var(--mute);font-weight:400;margin-bottom:.5cqw}
.b1{left:0;border-left:.7cqw solid var(--acc)}
.b2{right:0;border-right:.7cqw solid var(--p2);text-align:right}
.b1.show{animation:bn1 1.3s steps(13) forwards}
.b2.show{animation:bn2 1.3s steps(13) forwards}
@keyframes bn1{0%{opacity:0;transform:translateX(-8cqw)}12%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0}}
@keyframes bn2{0%{opacity:0;transform:translateX(8cqw)}12%{opacity:1;transform:none}80%{opacity:1}100%{opacity:0}}
.hud-bot{position:absolute;left:2.4cqw;right:2.4cqw;bottom:1.8cqw;display:flex;justify-content:space-between;gap:4cqw}
.meter{display:flex;align-items:center;gap:1cqw;width:32%}
.m2{flex-direction:row-reverse}
.meter span{font-size:1.5cqw;font-weight:700;text-shadow:0 .2cqw 0 #000;white-space:nowrap}
.mbar{position:relative;flex:1;height:1.5cqw;background:#0d0b10;border:.3cqw solid #000}
.mfill{position:absolute;left:0;top:0;bottom:0;width:0;background:var(--gold)}
.m2 .mfill{left:auto;right:0}
.mid{position:absolute;left:50%;top:0;bottom:0;width:.3cqw;background:#000}
.meter.ready .mfill{animation:rdy .35s steps(2) infinite}
.meter.deny .mbar{animation:deny .3s steps(3)}
@keyframes rdy{50%{background:#fff}}
@keyframes deny{33%{transform:translateX(-.5cqw)}66%{transform:translateX(.5cqw)}}
.overlay{position:absolute;inset:0;display:grid;place-items:center;background:rgba(8,6,10,.74);pointer-events:auto;padding:3cqw}
.ov-card{background:var(--panel);border:2px solid var(--line);padding:clamp(14px,3cqw,28px);display:flex;flex-direction:column;align-items:center;gap:clamp(8px,1.4cqw,14px);text-align:center;max-width:100%}
.ov-card h3{font-family:var(--f-px);font-size:clamp(12px,2.2cqw,20px);color:var(--acc);line-height:1.4}
.ov-card .win-name{font-size:clamp(18px,3cqw,28px);font-weight:700}
.ov-card p{font-size:clamp(12px,1.6cqw,15px);color:var(--mute)}
.ov-card canvas{width:clamp(64px,12cqw,128px);height:clamp(64px,12cqw,128px);background:#0b0a0d;border:2px solid var(--line)}
.ov-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.ov-actions .cta{padding:10px 18px;font-size:14px}
.fight-bar{display:flex;flex-direction:column;gap:10px}
.fb-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.arena{display:flex;flex-direction:column;gap:12px}
.hud-pause{display:none;position:absolute;left:50%;top:9cqw;transform:translateX(-50%);pointer-events:auto;font-family:var(--f-px);font-size:max(9px,1.3cqw);padding:1cqw 1.6cqw;background:#000a;border:2px solid #000;color:#fff}
.orient{display:none;font-size:13px;color:var(--mute);text-align:center}
.uimode{display:flex;border:1px solid var(--line)}
.uimode button{background:none;border:0;padding:7px 10px;font-size:12.5px;color:var(--mute);white-space:nowrap}
.uimode button.on{background:var(--panel-2);color:var(--fg)}
.top-actions{display:flex;gap:8px;flex-wrap:wrap}

.site-foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 20px;padding-top:18px;border-top:1px solid var(--line);font-size:13px;color:var(--mute)}
.site-foot nav{display:flex;flex-wrap:wrap;gap:6px 18px}.site-foot a{color:var(--fg);text-decoration:none}.site-foot a:hover{color:var(--acc)}
html.fighting:not(.attract) .site-foot{display:none}
/* 타이틀 · 코인 */
html.attract .hud,html.attract .pad,html.attract .fight-bar,html.attract .orient,html.attract .cutin{display:none!important}
.title-ov{position:absolute;inset:0;display:none;place-items:center;text-align:center;pointer-events:auto;cursor:pointer;
  background:radial-gradient(ellipse at 50% 46%,rgba(12,9,15,.25),rgba(12,9,15,.88) 70%)}
html.attract .title-ov{display:grid}
.t-wrap{display:flex;flex-direction:column;align-items:center;gap:max(6px,1.4cqw);padding-inline:4cqw}
.t-en{font-family:var(--f-px);font-size:max(8px,1.5cqw);color:var(--acc);letter-spacing:.3em}
.t-logo{font-weight:700;font-size:max(34px,10.5cqw);line-height:1;letter-spacing:-.05em;color:#fff;text-shadow:.6cqw .6cqw 0 var(--acc),1.2cqw 1.2cqw 0 #000;animation:logoIn .6s steps(6) both}
@keyframes logoIn{0%{transform:scale(1.8);opacity:0}100%{transform:none;opacity:1}}
.t-sub{font-size:max(12px,1.8cqw);color:#e6e0da;text-shadow:0 .2cqw 0 #000}
.t-blink{font-family:var(--f-px);font-size:max(11px,2.6cqw);color:var(--gold);text-shadow:.3cqw .3cqw 0 #000;margin-top:max(8px,2cqw);animation:blink 1s steps(2) infinite}
.t-blink.go{color:#fff;animation-duration:.5s}
.t-actions{display:flex;gap:max(8px,1.6cqw);flex-wrap:wrap;justify-content:center;margin-top:max(4px,.6cqw)}
.t-btn{position:relative;font-family:var(--f-px);font-size:max(9px,1.4cqw);padding:max(10px,1.4cqw) max(14px,2.4cqw);background:#0b0a0d;border:max(2px,.35cqw) solid currentColor;color:var(--gold);letter-spacing:.06em}
.t-btn small{display:block;font-family:var(--f-kr);font-size:max(10px,1.2cqw);margin-top:max(4px,.6cqw);letter-spacing:0;opacity:.8}
.t-btn.start{color:var(--acc)}
.t-btn .tp{display:none} html.mobile .t-btn .kb{display:none} html.mobile .t-btn .tp{display:inline}
.t-btn:disabled{opacity:.3;cursor:default}
.t-btn .slot{display:block;width:.5em;height:1.6em;margin:0 auto max(6px,.8cqw);background:#000;box-shadow:0 0 0 max(2px,.3cqw) currentColor}
.t-foot{position:absolute;left:3cqw;right:3cqw;bottom:2.4cqw;display:flex;justify-content:space-between;font-family:var(--f-px);font-size:max(8px,1.3cqw);color:#bdb4ad;text-shadow:.2cqw .2cqw 0 #000}
.t-foot b{color:var(--gold);font-weight:400}
.t-install{position:absolute;top:max(10px,2.4cqw);right:max(10px,2.4cqw);z-index:3;background:rgba(252,94,32,.92);color:#fff;border:2px solid #fff;font-weight:700;font-size:max(12px,1.6cqw);padding:.6em 1em;border-radius:999px;box-shadow:0 4px 0 rgba(0,0,0,.4);animation:tinst 2.4s ease-in-out infinite}
@keyframes tinst{50%{transform:translateY(-2px)}}
.gate-card ol.steps{text-align:left;margin:0;padding-left:1.3em;font-size:14px;line-height:1.7;color:var(--fg)}.gate-card ol.steps b{font-size:inherit;color:var(--acc)}
.coin-fx{position:absolute;left:50%;top:-2em;width:.9em;height:.9em;margin-left:-.45em;border-radius:50%;background:radial-gradient(circle at 35% 35%,#fff3b0,#ffd24a 45%,#a8780e);animation:coinDrop .45s steps(6) forwards;pointer-events:none}
@keyframes coinDrop{0%{transform:translateY(-1.5em)}80%{transform:translateY(1.4em);opacity:1}100%{transform:translateY(1.8em) scaleY(.2);opacity:0}}
.credit-chip{display:flex;align-items:center;gap:8px}
.credit-chip span{font-family:var(--f-px);font-size:9px;color:var(--gold);white-space:nowrap}
.brand{cursor:pointer}
.sel-back{display:none;align-self:center;white-space:nowrap}html.sel .sel-back{display:inline-flex;align-items:center}
html.mobile.sel .sel-back{min-height:36px;padding:5px 10px;font-size:12px}
.gate.exit{z-index:70;background:rgba(8,6,10,.86)}.gate.exit .gate-card{background:var(--panel);border:2px solid var(--line);padding:20px 22px;max-width:340px}
.gate.exit #exitGo{color:var(--fg)}
.ov-card .count{font-family:var(--f-px);font-size:clamp(28px,7cqw,64px);color:var(--gold);line-height:1}

/* 컷인 */
.cutin{position:absolute;inset:0;pointer-events:none;overflow:hidden;--cc:var(--acc)}
.ci-band{position:absolute;left:0;right:0;display:flex;align-items:center;gap:2.4cqw;padding:1.2cqw 5cqw;border-block:.5cqw solid var(--cc);
  background:repeating-linear-gradient(-62deg,transparent 0 2.2cqw,color-mix(in srgb,var(--cc) 28%,transparent) 2.2cqw 3cqw),linear-gradient(90deg,#000e,#000b);
  background-size:6cqw 100%,100% 100%;animation:ciIn .42s steps(6) both,ciLines .3s linear infinite}
.cutin.small .ci-band{top:22%;right:34%;clip-path:polygon(0 0,100% 0,94% 100%,0 100%)}
.cutin.small.r .ci-band{left:34%;right:0;flex-direction:row-reverse;text-align:right;clip-path:polygon(6% 0,100% 0,100% 100%,0 100%);animation-name:ciInR,ciLines}
.cutin.big .ci-band{top:50%;margin-top:-13cqw;height:26cqw;padding-inline:8cqw}
.cutin.big.r .ci-band{flex-direction:row-reverse;text-align:right;animation-name:ciInR,ciLines}
.cutin.big::before{content:"";position:absolute;inset:0;background:#fff;animation:ciFlash .5s steps(5) forwards}
.ci-band canvas{flex:none;width:10cqw;height:10cqw;border:.4cqw solid var(--cc);background:#0b0a0d}
.cutin.big .ci-band canvas{width:20cqw;height:20cqw}
.ci-txt{display:flex;flex-direction:column;gap:.6cqw;min-width:0}
.ci-txt small{font-family:var(--f-px);font-size:1.3cqw;color:var(--cc)}
.ci-txt b{font-size:3.2cqw;font-weight:700;line-height:1.1;color:#fff;text-shadow:.35cqw .35cqw 0 #000,0 0 2cqw var(--cc);white-space:nowrap}
.cutin.big .ci-txt b{font-size:5.6cqw}
.ci-txt span{font-size:1.5cqw;color:#ddd}
@keyframes ciIn{0%{transform:translateX(-105%) skewX(-14deg)}100%{transform:none}}
@keyframes ciInR{0%{transform:translateX(105%) skewX(14deg)}100%{transform:none}}
@keyframes ciLines{to{background-position:6cqw 0,0 0}}
@keyframes ciFlash{0%{opacity:.9}100%{opacity:0}}
.meter.max .mfill{background:linear-gradient(90deg,#ff5c8a,#ffd24a,#6fe08a,#3db7ff,#ff5c8a);background-size:200% 100%;animation:maxg .6s steps(6) infinite}
.meter.max span{color:var(--gold)}
@keyframes maxg{to{background-position:200% 0}}
.b-tag.sup{border-color:#ff5c8a;color:#ff9ab6}
.combo-list li i{font-style:normal;color:var(--mute)}




.sec-head .diff{margin-left:auto;padding:4px 10px;font-size:12px;border-width:1px}
.sec-head .diff[data-d="0"]{color:#6fe08a;border-color:#2d5a3a}.sec-head .diff[data-d="2"]{color:#ff6a5a;border-color:#6a2a26}
html.mobile.sel .sec-head{display:flex;align-items:center;gap:8px;flex-wrap:nowrap}
html.mobile.sel .sec-head .diff{min-height:36px;padding:4px 10px;font-size:12px;white-space:nowrap}

/* ---------- 랭킹전 순위표 ---------- */
.gate.board{z-index:58;padding:max(12px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(12px,env(safe-area-inset-left,0px))}
.board-card{display:flex;gap:18px;width:min(760px,100%);max-height:100%;background:var(--panel);border:2px solid var(--line);padding:18px;text-align:left}
.board-res{flex:0 0 230px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;border-right:1px solid var(--line);padding-right:18px}
.board-res[hidden]{display:none}
.board-res canvas{width:64px;height:64px;background:#0b0a0d;border:2px solid var(--line)}
.board-res #resWins{font-size:26px;color:var(--gold)}
.board-res #resScore{font-family:var(--f-mono);font-size:15px;color:var(--fg)}
#scoreForm{display:flex;flex-direction:column;gap:8px;width:100%;margin-top:6px}
#nick{font:inherit;font-size:16px;padding:10px 12px;background:#0b0a0d;color:var(--fg);border:2px solid var(--line);min-height:44px;width:100%}
#nick:focus{outline:none;border-color:var(--acc)}
#scoreForm .cta{min-height:44px;padding:8px 12px;font-size:15px}
.form-msg{font-size:12px;color:var(--mute);min-height:1.4em}
.form-msg.err{color:#ff6a5a}.form-msg.ok{color:#6fe08a}
#scoreForm .cta.login{background:var(--fg);color:#170a04}
.auth-line{font-size:11.5px;color:var(--mute);margin:0}.auth-line button{background:none;border:0;color:inherit;text-decoration:underline;padding:0 2px;font:inherit;cursor:pointer}
.board-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:10px}
.board-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.board-top b{font-size:18px}
.board-tabs{display:flex;border:1px solid var(--line)}
.board-tabs button{background:none;border:0;padding:6px 12px;font-size:13px;color:var(--mute);min-height:36px}
.board-tabs button.on{background:var(--panel-2);color:var(--fg)}
.board-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:minmax(0,auto);gap:4px 10px;align-content:start;min-height:0;overflow:hidden}
.board-list li{display:grid;grid-template-columns:22px 22px minmax(0,1fr) auto;align-items:center;gap:6px;padding:4px 6px;background:#141118;border:1px solid transparent;font-size:13px;min-width:0}
.board-list li.me{border-color:var(--acc);background:rgba(252,94,32,.12)}
.board-list li .rk{font-family:var(--f-px);font-size:8px;color:var(--mute);text-align:right}
.board-list li:nth-child(1) .rk{color:var(--gold)}.board-list li:nth-child(2) .rk{color:#d8dce4}.board-list li:nth-child(3) .rk{color:#e0965a}
.board-list li canvas{width:22px;height:22px;background:#0b0a0d}
.board-list li .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.board-list li .nm small{color:var(--mute);margin-left:4px;font-size:11px}
.board-list li .sc{font-family:var(--f-mono);font-size:12px;color:var(--gold)}
.board-list .empty{grid-column:1/-1;display:block;background:none;color:var(--mute);text-align:center;padding:24px 0}
.board-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:auto}
.board-actions button{min-height:44px;padding:8px 18px;font-size:14px}
@media (max-width:640px) and (orientation:portrait){.board-card{flex-direction:column}.board-res{flex:none;border-right:0;border-bottom:1px solid var(--line);padding:0 0 12px}.board-list{grid-template-columns:1fr}}
@media (max-height:430px){.board-card{padding:12px;gap:12px}.board-res{gap:5px}.board-res canvas{width:44px;height:44px}.board-res #resWins{font-size:20px}.board-list li{padding:2px 6px;font-size:12px}.board-list li canvas{width:18px;height:18px}.board-list{gap:3px 8px}}
.slot.rankslot canvas:not(.big){filter:brightness(.2)}
/* ---------- 모바일: 게임 화면은 페이지 스크롤·당겨서 새로고침·바운스 차단 ---------- */
html.mobile.fighting,html.mobile.fighting body,html.mobile.sel,html.mobile.story{overflow:hidden;overscroll-behavior:none}
html.mobile.fighting body,html.mobile.sel body,html.mobile.story body{overflow:hidden;overscroll-behavior:none;touch-action:manipulation}
html.mobile.fighting body{margin:0}
@media (orientation:landscape){html.mobile.fighting .site-foot{display:none}}
/* ---------- 모바일: 스토리 (전체화면 비주얼노벨) ---------- */
html.mobile.story,html.mobile.story body{height:100%;overflow:hidden;overscroll-behavior:none}
html.mobile.story body{margin:0;padding:0}
html.mobile.story .top,html.mobile.story .site-foot{display:none}
html.mobile.story .app{max-width:none;padding:0;gap:0}
html.mobile.story #scr-story{position:fixed;inset:0;z-index:5;display:block;background:#000}
html.mobile.story .vn{position:absolute;inset:0;border:0;background:#25222b}
html.mobile.story .vn canvas{position:absolute;inset:0 0 22% 0;width:100%;height:78%;aspect-ratio:auto;object-fit:cover;object-position:50% 100%}
/* 상단 바: 스테이지·제목 | 진행 트랙 | 나가기 */
html.mobile.story .st-head{position:absolute;z-index:2;left:0;right:0;top:0;align-items:center;flex-wrap:nowrap;gap:10px;
  padding:max(8px,env(safe-area-inset-top,0px)) max(12px,env(safe-area-inset-right,0px)) 18px max(12px,env(safe-area-inset-left,0px));
  background:linear-gradient(180deg,rgba(8,6,10,.85),rgba(8,6,10,.5) 70%,transparent);pointer-events:none}
html.mobile.story .st-head>div{min-width:0;flex:1}
html.mobile.story .st-head .eyebrow{font-size:8px;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.mobile.story .st-head h2{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;text-shadow:0 1px 0 #000}
html.mobile.story #stQuit{pointer-events:auto;min-height:40px;padding:6px 12px;font-size:13px;background:rgba(17,15,19,.7);flex:none}
html.mobile.story .track{position:absolute;z-index:3;top:max(8px,env(safe-area-inset-top,0px));right:calc(max(12px,env(safe-area-inset-right,0px)) + 112px);
  display:flex;gap:4px;margin:0}
html.mobile.story .node{padding:3px 6px 3px 3px;gap:5px;background:rgba(17,15,19,.75);border-width:1px}
html.mobile.story .node canvas{width:28px;height:28px}
html.mobile.story .node b,html.mobile.story .node span{display:none}
html.mobile.story .node small{font-size:6.5px;white-space:nowrap}
/* 대사창: 화면 하단에 겹침, 어디를 눌러도 다음 대사 */
html.mobile.story .vn-box{position:absolute;z-index:2;left:max(12px,env(safe-area-inset-left,0px));right:max(12px,env(safe-area-inset-right,0px));
  bottom:max(10px,env(safe-area-inset-bottom,0px));min-height:0;padding:12px 16px 14px;border:2px solid var(--line);
  background:rgba(17,15,19,.9);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}
html.mobile.story .vn-box b{font-size:13px;margin-bottom:6px}
html.mobile.story .vn-box p{font-size:16px;line-height:1.55;min-height:3.1em;max-width:none}
html.mobile.story .vn-actions{position:absolute;z-index:3;right:calc(max(12px,env(safe-area-inset-right,0px)) + 12px);
  bottom:calc(max(10px,env(safe-area-inset-bottom,0px)) + 12px);min-height:0;gap:8px}
html.mobile.story .vn-actions .cta,html.mobile.story .vn-actions .ghost{min-height:44px;padding:10px 18px;font-size:14px}
html.mobile.story .vn-actions .ghost{background:rgba(17,15,19,.9)}
@media (max-height:400px){html.mobile.story .vn-box p{font-size:15px}}
html.mobile.story .vn:has(~ .vn-actions:not(:empty)) .vn-box p{padding-right:min(240px,40%)}
/* 세로로 계속한 경우: 장면 위, 대사 아래 */
@media (orientation:portrait){
  html.mobile.story .st-head{flex-wrap:wrap}
  html.mobile.story .track{top:auto;right:auto;left:max(12px,env(safe-area-inset-left,0px));top:calc(max(8px,env(safe-area-inset-top,0px)) + 56px)}
  html.mobile.story .vn canvas{inset:calc(max(8px,env(safe-area-inset-top,0px)) + 100px) 0 auto;height:min(52dvh,calc(100dvh - 330px));object-position:50% 100%}
  html.mobile.story .vn-box p{min-height:4.6em}
  html.mobile.story .vn:has(~ .vn-actions:not(:empty)) .vn-box p{padding-right:0;padding-bottom:64px}
}
/* ---------- 모바일 접근성: 회전 · 인앱 브라우저 안내, 터치 크기 ---------- */
.gate{position:fixed;inset:0;z-index:60;display:grid;place-items:center;background:rgba(8,6,10,.94);padding:24px;text-align:center}
.gate[hidden]{display:none!important}
.gate-card{display:flex;flex-direction:column;align-items:center;gap:12px;max-width:320px}
.gate-card b{font-size:20px}
.gate-card p{font-size:14px;color:var(--mute);line-height:1.6;word-break:keep-all}
.gate-card .cta,.gate-card .ghost{width:100%;min-height:48px;font-size:15px}
.rot-icon{width:46px;height:76px;border:3px solid var(--fg);border-radius:8px;position:relative;animation:rot 2.2s ease-in-out infinite;margin-bottom:8px}
.rot-icon i{position:absolute;left:50%;bottom:5px;width:10px;height:3px;margin-left:-5px;background:var(--fg);border-radius:2px}
@keyframes rot{0%,25%{transform:rotate(0)}55%,85%{transform:rotate(-90deg)}100%{transform:rotate(0)}}
@media (prefers-reduced-motion:reduce){.rot-icon{animation:none;transform:rotate(-90deg)}}
html.mobile .top-actions .ghost,html.mobile .uimode button{min-height:44px;min-width:44px;font-size:13px}
html.mobile.sel .top{padding:4px 0}
html.mobile .t-btn.start{display:none}
/* ---------- 모바일: 캐릭터 선택 (스크롤 없는 전체화면) ---------- */
.m-only{display:none}
.slot canvas.big{display:none}
.sheet-bg{display:none}
html.mobile .m-only{display:revert}
html.mobile.sel,html.mobile.sel body{height:100%;overflow:hidden;overscroll-behavior:none}
html.mobile.sel body{padding:0;margin:0}
html.mobile.sel .app{position:fixed;inset:0;height:auto;max-width:none;gap:0;display:flex;flex-direction:column;
  padding:env(safe-area-inset-top,0px) max(10px,env(safe-area-inset-right,0px)) env(safe-area-inset-bottom,0px) max(10px,env(safe-area-inset-left,0px))}
html.mobile.sel .site-foot{display:none}
html.mobile.sel .top{flex-wrap:nowrap;align-items:center;padding:6px 0;gap:8px}
html.mobile.sel .brand .eyebrow,html.mobile.sel #coinTop{display:none}
html.mobile.sel .brand h1{font-size:17px;white-space:nowrap}
html.mobile.sel .top-actions{flex-wrap:nowrap;gap:6px;align-items:center}
html.mobile.sel .top-actions .ghost,html.mobile.sel .uimode button{padding:5px 8px;font-size:12px;white-space:nowrap}
html.mobile.sel #scr-select{flex:1;min-height:0;display:grid;gap:8px;padding:8px 0}
html.mobile.sel .select,html.mobile.sel .vsbar{display:contents}
html.mobile.sel .keys,html.mobile.sel .vsbar .vs,html.mobile.sel .sec-head h2{display:none}
html.mobile.sel .select>div:first-child{grid-area:roster;min-height:0;min-width:0;overflow:hidden;display:flex;flex-direction:column}
html.mobile.sel .roster{flex:1;min-height:0;grid-auto-rows:minmax(0,1fr)}
html.mobile.sel .card{min-height:0;justify-content:flex-end}
html.mobile.sel .card canvas{flex:1;min-height:0;width:100%;height:auto;aspect-ratio:auto;object-fit:contain;object-position:50% 100%}
html.mobile.sel .sec-head{margin-bottom:6px}
html.mobile.sel .hint{font-size:12px}
html.mobile.sel .card{padding:3px 3px 4px;border-width:2px}
html.mobile.sel .cname{font-size:clamp(9.5px,1.45vw,12px);letter-spacing:-.04em;text-overflow:clip}
html.mobile.sel #slot1{grid-area:p1}html.mobile.sel #slot2{grid-area:p2}
html.mobile.sel .mode{grid-area:mode;margin:0}html.mobile.sel #startBtn{grid-area:start}html.mobile.sel #sheetBtn{grid-area:info}
html.mobile.sel .mode button{padding:8px 6px;font-size:13px}
html.mobile.sel #startBtn{padding:10px 8px;font-size:15px}
html.mobile.sel #sheetBtn{padding:8px 6px;font-size:13px;border-width:2px}
/* 1P/CPU 패널: 큰 도트 스프라이트 */
html.mobile.sel .slot{position:relative;display:flex;flex-direction:column;align-items:stretch;justify-content:flex-end;gap:2px;padding:6px 8px 8px;min-width:0;min-height:0;overflow:hidden;
  background:linear-gradient(180deg,#14111a 0,#1a1520 70%,#221a1f)}
html.mobile.sel .slot.p1{background:radial-gradient(ellipse at 50% 92%,rgba(252,94,32,.28),transparent 62%),linear-gradient(180deg,#14111a,#1d1519)}
html.mobile.sel .slot.p2{background:radial-gradient(ellipse at 50% 92%,rgba(61,183,255,.24),transparent 62%),linear-gradient(180deg,#14111a,#151a22)}
html.mobile.sel .slot canvas:not(.big){display:none}
html.mobile.sel .slot canvas.big{display:block;flex:1;min-height:0;width:100%;height:auto;object-fit:contain;object-position:50% 100%;background:none}
html.mobile.sel .slot .who{gap:1px;text-align:left}
html.mobile.sel .slot.p2 .who{text-align:right}
html.mobile.sel .slot .who b{font-size:15px}
html.mobile.sel .slot:disabled{opacity:1}
/* 가로: 1P | 명부 | CPU */
@media (orientation:landscape){
  html.mobile.sel #scr-select{grid-template-columns:minmax(0,1fr) minmax(0,3.2fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;
    grid-template-areas:"p1 roster p2" "info mode start"}
  html.mobile.sel .roster{grid-template-columns:repeat(7,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:5px}
  html.mobile.sel .mode{justify-self:stretch}
}
/* 세로: 1P vs CPU 위, 명부 아래 */
@media (orientation:portrait){
  html.mobile.sel #scr-select{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:min(30dvh,260px) minmax(0,1fr) auto;
    grid-template-areas:"p1 p1 p1 p2 p2 p2" "roster roster roster roster roster roster" "info mode mode mode start start"}
  html.mobile.sel .roster{grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(5,minmax(0,1fr));gap:5px}
}
/* 기술표 시트 */
html.mobile .detail{position:fixed;left:0;right:0;bottom:0;z-index:41;max-height:84dvh;overflow-y:auto;overscroll-behavior:contain;border-width:2px 0 0;
  padding:12px max(16px,env(safe-area-inset-right,0px)) calc(16px + env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px));
  transform:translateY(105%);transition:transform .22s ease;visibility:hidden}
html.mobile.sheet .detail{transform:none;visibility:visible}
html.mobile .sheet-bg{position:fixed;inset:0;z-index:40;background:rgba(5,3,8,.6)}
html.mobile.sheet .sheet-bg{display:block}
.sheet-head{align-items:center;justify-content:space-between}
html.mobile .sheet-head{display:flex}
.sheet-head b{font-size:16px}
@media (orientation:landscape){
  html.mobile .detail{top:0;left:auto;width:min(440px,62vw);max-height:none;border-width:0 0 0 2px;transform:translateX(105%);
    padding-top:max(12px,env(safe-area-inset-top,0px))}
}
@media (prefers-reduced-motion:reduce){html.mobile .detail{transition:none}}
/* ---------- 모바일 인터페이스 ---------- */
.pad{display:none}
html.mobile body{touch-action:manipulation}
html.mobile .pad{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding-block:6px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none}
html.mobile .keys,html.mobile .fight-bar{display:none}
html.mobile .mode button[data-mode="2p"]{display:none}
html.mobile .hud-pause{display:block}
html.mobile .orient{display:block}
html.mobile .vsbar{position:sticky;bottom:0;z-index:5;padding-bottom:max(12px,env(safe-area-inset-bottom,0px));box-shadow:0 -10px 24px #110f13}
html.mobile .card{padding:4px 4px 6px}
html.mobile .vsbar{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px;padding:10px}
html.mobile .mode button{flex:1}
html.mobile .vsbar .vs{display:none}
html.mobile .slot{flex:1 1 0;padding:4px 8px 4px 4px;gap:8px}
html.mobile .slot canvas{width:36px;height:36px}
html.mobile .who b{font-size:13.5px}
html.mobile .mode{margin-left:0}
html.mobile .cta{flex:1}
@media (max-width:520px){html.mobile .dpad{width:128px;height:128px}html.mobile .btns{zoom:.86}html.mobile .pad-mid{display:none}html.mobile .pad{grid-template-columns:auto auto;justify-content:space-between}}
html.mobile.fighting .top{display:none}
html.mobile.fighting body{padding-block:8px}
.dpad{position:relative;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,var(--panel-2) 0 34%,var(--panel) 35%);border:2px solid var(--line);touch-action:none}
.dpad i{position:absolute;font-style:normal;font-size:12px;font-weight:700;color:var(--dim);transform:translate(-50%,-50%);line-height:1;text-align:center}
.dpad i small{display:block;font-size:10px;font-weight:600;margin-top:2px}
.dpad i.on{color:var(--acc)}
.dpad .up{left:50%;top:17%}.dpad .dn{left:50%;top:83%}.dpad .lf{left:15%;top:50%}.dpad .rt{left:85%;top:50%}
.knob{position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;background:var(--panel-2);border:2px solid var(--dim);pointer-events:none}
.pad-mid{display:flex;flex-direction:column;align-items:center;gap:6px;font-size:11px;color:var(--dim);text-align:center;min-width:0}
/* 액션 버튼 (펀치 중심 부채꼴) — 크기는 --u 하나로 조절 */
.btns{--u:.52px;position:relative;width:calc(365*var(--u));height:calc(414*var(--u));flex:none;touch-action:none}
.abtn{position:absolute;padding:0;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;box-sizing:border-box;
  touch-action:none;cursor:pointer;transition:transform .06s,filter .06s;-webkit-tap-highlight-color:transparent;font:inherit}
.abtn::after{content:'';position:absolute;inset:calc(-7*var(--u));border-radius:50%} /* 손가락 터치 여유 (버튼 사이 간격의 절반) */
.abtn.on{transform:scale(.9);filter:brightness(1.25)}
.abtn svg{display:block;shape-rendering:crispEdges;pointer-events:none}
.abtn .lbl{font-family:Pretendard,system-ui,sans-serif;font-weight:900;color:#fff;letter-spacing:-.02em;line-height:1;pointer-events:none;
  text-shadow:0 2px 0 rgba(0,0,0,.55),0 0 3px rgba(0,0,0,.6)}
.abtn.p{left:calc(158*var(--u));top:calc(233*var(--u));width:calc(155*var(--u));height:calc(155*var(--u));
  background:radial-gradient(circle at 50% 38%,#ff6a3a 0,#e2421d 55%,#b8300f 100%);border:calc(7*var(--u)) solid #c93716;
  box-shadow:0 0 0 calc(3*var(--u)) #6e1906,inset 0 calc(5*var(--u)) calc(6*var(--u)) rgba(255,200,170,.45),inset 0 calc(-8*var(--u)) calc(12*var(--u)) rgba(80,10,0,.45),0 calc(6*var(--u)) calc(12*var(--u)) rgba(0,0,0,.55)}
.abtn.p svg{width:calc(70*var(--u));margin-bottom:calc(6*var(--u))}.abtn.p .lbl{font-size:calc(30*var(--u))}
.abtn.k{left:calc(8*var(--u));top:calc(263*var(--u));width:calc(134*var(--u));height:calc(134*var(--u));
  background:radial-gradient(circle at 50% 40%,#1f3c78,#14275a 70%);border:calc(5*var(--u)) solid #3d8be6;
  box-shadow:0 0 0 calc(2*var(--u)) #0d1e45,inset 0 0 0 calc(2*var(--u)) #9cc8ff55,0 calc(4*var(--u)) calc(8*var(--u)) rgba(0,0,0,.5)}
.abtn.k svg{width:calc(64*var(--u));margin-bottom:calc(5*var(--u))}.abtn.k .lbl{font-size:calc(27*var(--u));color:#dbe9ff}
.abtn.r{left:calc(74*var(--u));top:calc(137*var(--u));width:calc(107*var(--u));height:calc(107*var(--u));
  background:radial-gradient(circle at 50% 40%,#2c5a36,#1a3a22 70%);border:calc(5*var(--u)) solid #39b65a;
  box-shadow:0 0 0 calc(2*var(--u)) #0c2412,inset 0 0 0 calc(2*var(--u)) #a8ffbf44,0 calc(4*var(--u)) calc(8*var(--u)) rgba(0,0,0,.5)}
.abtn.r svg{width:calc(60*var(--u));margin-bottom:calc(4*var(--u));shape-rendering:auto}.abtn.r .lbl{font-size:calc(21*var(--u));color:#e6ffe9}
.abtn.s{left:calc(232*var(--u));top:calc(91*var(--u));width:calc(128*var(--u));height:calc(128*var(--u));background:none;border:0}
.abtn.s .ring{position:absolute;inset:0;border-radius:50%;background:conic-gradient(#ff3b3b,#ffb02e,#fff35c,#4dff7c,#3fd6ff,#7a5cff,#ff4fd8,#ff3b3b);
  animation:abspin 3s linear infinite;box-shadow:0 0 calc(14*var(--u)) calc(3*var(--u)) rgba(255,190,60,.6);pointer-events:none}
.abtn.s .core{position:absolute;inset:calc(7*var(--u));border-radius:50%;background:radial-gradient(circle at 50% 40%,#5a4a5e,#3a3040 70%);box-shadow:inset 0 0 calc(10*var(--u)) rgba(0,0,0,.6);pointer-events:none}
.abtn.s .flame{position:absolute;left:calc(-14*var(--u));top:calc(-26*var(--u));width:calc(160*var(--u));pointer-events:none;opacity:.55;
  animation:abflick .18s steps(2) infinite alternate;transform-origin:50% 100%}
.abtn.s .lbl{position:relative;z-index:1;font-size:calc(27*var(--u));background:linear-gradient(#fff6c8,#ffc53a);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:none;filter:drop-shadow(0 2px 0 #6b2a00)}
.abtn.s .spark{position:absolute;width:calc(22*var(--u));height:calc(22*var(--u));background:#e9e6f5;pointer-events:none;
  clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%);animation:abtw 1.2s ease-in-out infinite;opacity:0}
.abtn.s.ready .flame,.abtn.s.max .flame{opacity:1}.abtn.s.ready .ring{animation-duration:1.6s}
.abtn.s.max .ring{animation-duration:.8s;box-shadow:0 0 calc(24*var(--u)) calc(7*var(--u)) rgba(255,120,200,.75)}.abtn.s.max .spark{opacity:1}
.abtn.s.max .lbl{background-image:linear-gradient(#ffd0f0,#ff5fa8);filter:drop-shadow(0 2px 0 #5a0a35)}
.abtn.s.on .ring{animation-duration:.35s;box-shadow:0 0 calc(30*var(--u)) calc(10*var(--u)) rgba(255,200,80,.9)}
/* 버튼 이펙트 */
.bfx{position:absolute;pointer-events:none;border-radius:50%;z-index:5}
.bfx.wave{border:calc(4*var(--u)) solid var(--c);animation:bwave .38s ease-out forwards}
.bfx.flash{background:radial-gradient(circle,#fff 0,var(--c) 40%,transparent 70%);animation:bflash .22s ease-out forwards;mix-blend-mode:screen}
.bfx.pt{width:calc(8*var(--u));height:calc(8*var(--u));border-radius:0;background:var(--c);box-shadow:0 0 calc(6*var(--u)) var(--c);animation:bpt .45s cubic-bezier(.2,.7,.3,1) forwards}
.bfx.hit{font:900 calc(28*var(--u)) Pretendard,sans-serif;color:#fff;border-radius:0;white-space:nowrap;-webkit-text-stroke:calc(1.5*var(--u)) var(--c);
  text-shadow:0 0 calc(8*var(--u)) var(--c);animation:bhit .5s ease-out forwards}
.abtn.on .lbl,.abtn.on svg:not(.flame){animation:bjolt .12s steps(2) 2}
.bshake{animation:bshake .25s linear}
@keyframes abspin{to{transform:rotate(360deg)}}@keyframes abflick{to{transform:scale(1.03,1.07)}}@keyframes abtw{50%{transform:scale(.55);opacity:.6}}
@keyframes bwave{from{transform:scale(.7);opacity:1}to{transform:scale(1.6);opacity:0}}
@keyframes bflash{from{transform:scale(.5);opacity:1}to{transform:scale(1.3);opacity:0}}
@keyframes bpt{to{transform:translate(var(--dx),var(--dy)) rotate(180deg) scale(.2);opacity:0}}
@keyframes bhit{0%{transform:translate(-50%,-50%) scale(.4) rotate(-8deg);opacity:0}25%{transform:translate(-50%,-50%) scale(1.25) rotate(-8deg);opacity:1}100%{transform:translate(-50%,-120%) scale(1) rotate(-8deg);opacity:0}}
@keyframes bjolt{50%{transform:translate(calc(2*var(--u)),calc(-2*var(--u)))}}
@keyframes bshake{25%{transform:translate(-3px,2px)}50%{transform:translate(3px,-2px)}75%{transform:translate(-2px,-1px)}}
@media (prefers-reduced-motion:reduce){.abtn.s .ring,.abtn.s .flame,.abtn.s .spark{animation:none}}
@media (orientation:landscape){
  html.mobile.fighting body{padding:0}
  html.mobile.fighting .app{max-width:none}
  html.mobile.fighting .arena{position:fixed;inset:0;z-index:20;background:#000;display:block}
  html.mobile.fighting .stage{position:absolute;left:50%;top:0;transform:translateX(-50%);height:100%;width:auto;max-width:100%;border:0}
  html.mobile.fighting .pad{position:absolute;left:0;right:0;bottom:0;padding:0 max(14px,env(safe-area-inset-right,0px)) max(12px,env(safe-area-inset-bottom,0px)) max(14px,env(safe-area-inset-left,0px));pointer-events:none;opacity:.85}
  html.mobile.fighting .pad > *{pointer-events:auto}
  html.mobile.fighting .pad-mid{visibility:hidden}
  html.mobile.fighting .dpad{width:130px;height:130px;background:radial-gradient(circle,rgba(34,30,38,.7) 0 34%,rgba(25,22,28,.55) 35%)}
  /* 가로 대전: 화면 높이에 맞춰 버튼 크기 결정 (390px 높이 기준 펀치 약 90px) */
  html.mobile.fighting .btns{zoom:1;--u:clamp(.46px,calc(100dvh*.58/390),.7px);margin-bottom:8px}
  /* 결과·일시정지 창이 떠 있으면 터치 패드는 쓸 일이 없으니 숨겨 창을 가리지 않게 */
  html.mobile.fighting .arena:has(.overlay:not([hidden])) .pad,html.mobile.fighting .arena:has(.taunt:not([hidden])) .pad{visibility:hidden}
  html.mobile.fighting .ov-card{max-width:min(560px,100%);padding:clamp(12px,2.2cqw,22px) clamp(16px,3cqw,28px)}
  html.mobile.fighting .ov-card canvas{width:clamp(56px,9cqw,96px);height:clamp(56px,9cqw,96px)}
      html.mobile.fighting .orient{display:none}
}
@media (hover:hover) and (pointer:fine){html.mobile .pad{display:none!important}} /* 마우스·키보드 기기는 터치 패드 숨김 */
/* 스토리 */
.st-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;flex-wrap:wrap}
.st-head h2{font-size:clamp(20px,2.6vw,26px);font-weight:700;letter-spacing:-.02em}
.track{list-style:none;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}
@media(max-width:560px){.track{grid-template-columns:repeat(2,minmax(0,1fr))}}
.node{display:flex;align-items:center;gap:10px;padding:8px;background:var(--panel);border:2px solid var(--line);min-width:0;opacity:.55}
.node canvas{width:40px;height:40px;background:#0b0a0d;flex:none}
.node div{display:flex;flex-direction:column;line-height:1.25;min-width:0}
.node small{font-family:var(--f-px);font-size:7px;color:var(--mute)}
.node b{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.node span{font-family:var(--f-mono);font-size:11px;color:var(--mute)}
.node.cur{opacity:1;border-color:var(--acc)}
.node.done{opacity:1}
.node.done small{color:var(--gold)}
.node.boss small{color:#ff6a5a}
.vn{position:relative;border:2px solid var(--line);background:#000;overflow:hidden;container-type:inline-size}
.vn canvas{display:block;width:100%;aspect-ratio:240/112}
.vn-box{position:relative;background:var(--panel);border-top:2px solid var(--line);padding:clamp(10px,2cqw,18px) clamp(12px,2.4cqw,22px);min-height:clamp(84px,15cqw,140px);cursor:pointer}
.vn-box:focus-visible{outline:2px solid var(--acc)}
.vn-box b{display:inline-block;font-size:clamp(12px,1.7cqw,15px);padding:2px 8px;margin-bottom:8px;background:var(--acc);color:#170a04}
.vn-box b.opp{background:var(--p2);color:#04121c}
.vn-box b.nar{background:var(--panel-2);color:var(--mute)}
.vn-box p{font-size:clamp(15px,2.2cqw,20px);line-height:1.55;max-width:60ch;word-break:keep-all;text-wrap:pretty}
.vn-next{position:absolute;right:14px;bottom:10px;font-family:var(--f-px);font-size:8px;color:var(--mute);animation:blink 1s steps(2) infinite}
@keyframes blink{50%{opacity:0}}
.vn-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;min-height:48px}
.card .star{position:absolute;top:3px;right:4px;font-family:var(--f-px);font-size:8px;color:var(--gold)}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;animation-iteration-count:1!important}}
/* ---------- 직장 빌런 · 직장생활 ---------- */
.sh{position:absolute;top:0;bottom:0;left:0;width:0;background:repeating-linear-gradient(-45deg,rgba(255,210,74,.95) 0 .5cqw,rgba(255,240,180,.95) .5cqw 1cqw);box-shadow:0 0 .8cqw rgba(255,210,74,.7)}
.s2 .sh{left:auto;right:0}
.meter.out span{color:#ff6a5a}
.vtoast{position:absolute;left:50%;top:17cqw;transform:translateX(-50%);font-weight:800;font-size:max(12px,2cqw);color:#fff;white-space:nowrap;padding:.5cqw 1.6cqw;background:#000c;border:max(2px,.25cqw) solid var(--vc,#ffd24a);
  box-shadow:0 0 1.4cqw color-mix(in srgb,var(--vc,#ffd24a) 60%,transparent);opacity:0;pointer-events:none;text-shadow:0 .2cqw 0 #000}
.vtoast.on{animation:vt 1.2s steps(12) forwards}
@keyframes vt{0%{opacity:0;transform:translate(-50%,-.8cqw) scale(1.3)}12%{opacity:1;transform:translate(-50%,0)}80%{opacity:1}100%{opacity:0}}
.taunt{position:absolute;inset:0;z-index:4;display:flex;flex-direction:column;justify-content:center;gap:1.4cqw;padding:3cqw 6cqw;background:linear-gradient(90deg,rgba(8,6,10,.92),rgba(8,6,10,.7) 50%,rgba(8,6,10,.92));pointer-events:auto;cursor:pointer}
.tq-head{font-family:var(--f-px);font-size:max(8px,1.25cqw);color:var(--acc);text-align:center;letter-spacing:.04em;line-height:1.6}
.tq{display:flex;align-items:center;gap:1.6cqw;max-width:78%;align-self:flex-start;animation:tqIn .3s steps(4) both}
.tq canvas{flex:none;width:max(44px,9cqw);height:max(44px,9cqw);background:#0b0a0d;border:max(2px,.3cqw) solid #ff5c8a}
.tq div{display:flex;flex-direction:column;gap:.4cqw;padding:1.2cqw 1.8cqw;background:#f4f1e6;color:#150f17;border:max(2px,.3cqw) solid #150f17;box-shadow:.5cqw .5cqw 0 #000;position:relative}
.tq small{font-size:max(10px,1.3cqw);font-weight:700;color:#8a1f24}
.tq b{font-size:max(14px,2.6cqw);font-weight:800;line-height:1.3;letter-spacing:-.02em;word-break:keep-all}
.tq.me{align-self:flex-end;opacity:0;animation:none}.tq.me canvas{border-color:var(--acc)}.tq.me div{background:#1a1418;color:#fff;border-color:var(--acc)}.tq.me small{color:var(--acc)}
.taunt.s1 .tq.me{opacity:1;animation:tqInR .3s steps(4) both}
@keyframes tqIn{0%{transform:translateX(-6cqw);opacity:0}100%{transform:none;opacity:1}}
@keyframes tqInR{0%{transform:translateX(6cqw);opacity:0}100%{transform:none;opacity:1}}
.anger{display:flex;align-items:center;gap:1.2cqw;align-self:center;width:min(60%,520px);opacity:0;font-family:var(--f-px);font-size:max(8px,1.2cqw);color:#ff6a5a}
.taunt.s2 .anger{opacity:1}
.anger i{flex:1;height:max(8px,1.6cqw);background:#160c0e;border:max(2px,.3cqw) solid #000;position:relative;overflow:hidden}
.anger em{position:absolute;inset:0;width:0;background:linear-gradient(90deg,#ffb02e,#ff3b3b);transition:width .6s steps(8)}
.taunt.s2 .anger em{width:var(--ang,80%)}
.anger b{color:#fff;font-weight:400;min-width:4ch}
.tq-skip{position:absolute;left:50%;transform:translateX(-50%);bottom:7cqw;font-size:max(10px,1.2cqw);color:var(--mute);animation:blink 1s steps(2) infinite}
.end-career{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;max-width:520px}
.gc{font-size:clamp(11px,1.5cqw,13px);padding:3px 8px;border:1px solid var(--line);background:var(--panel-2);color:var(--mute);white-space:nowrap}
.gc b{color:var(--fg);font-weight:700}.gc.xp b{color:#6fe08a}.gc.gold b,.gc.gold{color:var(--gold)}.gc.bad{color:#ff8a7a;border-color:#6a2a26}.gc.bad b{color:#ff6a5a}.gc.dim{opacity:.75}
.board-res .end-career{margin-top:2px}.board-res .gc{font-size:11px;padding:2px 6px}
.board-res{overflow-y:auto;overscroll-behavior:contain}
@media (max-height:430px){.board-res .end-career{gap:3px}.board-res .gc{font-size:10px;padding:1px 5px}#scoreForm{gap:5px;margin-top:2px}#nick,#scoreForm .cta{min-height:38px;padding:6px 10px}}
.gate.promo{z-index:66;background:rgba(8,6,10,.8)}
.memo{background:#f4f1e6!important;color:#1a1418;border:3px solid #150f17!important;box-shadow:8px 8px 0 #000;max-width:340px!important;gap:8px!important;position:relative;font-family:var(--f-kr)}
.memo-k{font-size:22px;font-weight:800;letter-spacing:.4em;color:#150f17;border-bottom:2px solid #150f17;padding-bottom:6px;width:100%}
.memo-no{font-family:var(--f-mono);font-size:11px;color:#5d5966}
.memo canvas{width:64px!important;height:64px!important;background:#e3ddcf!important;border:2px solid #150f17!important}
.memo-body{font-size:16px;line-height:1.6;color:#1a1418!important}.memo-body .r0{color:#5d5966}.memo-body .r1{color:#c4400c;font-size:20px}
.memo-gift{font-size:13px;color:#8a1f24!important;font-weight:600}
.memo-sign{font-size:12px;color:#5d5966!important;display:flex;align-items:center;gap:6px}
.seal{display:inline-grid;place-items:center;width:28px;height:28px;border:2px solid #c0392b;color:#c0392b;font-weight:800;transform:rotate(-8deg)}
.memo .cta{width:100%}.promo-login{width:100%;min-height:36px;font-size:12.5px}.promo-login[hidden]{display:none}
@media (max-height:500px){.gate.promo{padding:8px}.memo{gap:3px!important;padding:10px 18px!important}.memo-k{font-size:15px;padding-bottom:3px}.memo canvas{width:40px!important;height:40px!important}.memo-body{font-size:13px;line-height:1.4}.memo-body .r1{font-size:16px}.memo-gift{font-size:12px}.memo .cta{min-height:38px;padding:6px}}
.acct-btn{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}.acct-btn.on{color:var(--fg)}
.pv{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--mute);flex:none}.pv.kakao{background:#FEE500}.pv.google{background:#4f8cf7;box-shadow:inset -3px 0 0 #34a853}
.gate.acct{z-index:64}
.acct-card{display:flex;flex-direction:column;gap:10px;width:min(380px,100%);max-height:100%;overflow:auto;background:var(--panel);border:2px solid var(--line);padding:18px;text-align:left}
.acct-card>b{font-size:19px}.ac-lead{font-size:13px;color:var(--mute);line-height:1.55;word-break:keep-all}
#acIn{display:flex;flex-direction:column;gap:8px}#acIn[hidden],#acMe[hidden]{display:none}
.prov{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:40px;min-height:40px;border:0;font-weight:600;font-size:14px;border-radius:4px;font-family:inherit}
.prov svg{position:absolute;left:12px;top:50%;transform:translateY(-50%);width:18px;height:18px}
.prov small{position:absolute;right:10px}
.gsi{display:flex;justify-content:center;height:40px;overflow:hidden;border-radius:4px}.gsi[hidden],.prov[hidden]{display:none}
.prov.kakao{background:#FEE500;color:rgba(0,0,0,.85)}.prov.google{background:#fff;color:#1f1f1f;border:1px solid #dadce0}
.prov small{font-size:11px;font-weight:600;opacity:.7}.prov:disabled{opacity:.45;cursor:default}
.ac-note{font-size:11.5px;color:var(--mute);line-height:1.5}
#acMe{display:flex;flex-direction:column;gap:8px}
#acNickF{display:grid;grid-template-columns:auto 1fr auto;gap:8px;align-items:center;font-size:13px;color:var(--mute)}
#acNick{font:inherit;font-size:16px;padding:8px 10px;background:#0b0a0d;color:var(--fg);border:2px solid var(--line);min-height:42px;min-width:0}#acNick:focus{outline:none;border-color:var(--acc)}
#acNickF .ghost{min-height:42px}
.ac-prov{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.ac-prov li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 0;border-bottom:1px solid #2a2530;font-size:14px}
.ac-prov li span{display:flex;align-items:center;gap:8px}.ac-prov em{font-style:normal;font-size:12px;color:#6fe08a}.ac-prov button{min-height:34px;padding:4px 12px;font-size:12.5px}
.ac-row{display:flex;gap:8px}.ac-row button{flex:1;min-height:40px;font-size:13px}
.ac-msg{font-size:12.5px;color:var(--gold);min-height:1.2em;word-break:keep-all}.ac-msg:empty{display:none}
#acClose{min-height:40px}#acClose[hidden],#acGuest[hidden],.ac-note[hidden]{display:none}#acGuest{min-height:40px;margin-top:2px}
.acct-card.nick #acProv,.acct-card.nick #acStore,.acct-card.nick .ac-row,.acct-card.nick #acConf{display:none}
.acct-card.nick #acNickF{grid-template-columns:1fr auto}.acct-card.nick #acNickF label{display:none}
.acct-card.nick #acNickF button{background:var(--acc);color:#170a04;border-color:var(--acc);font-weight:700}
.ac-row[hidden]{display:none}
.ac-confirm{display:flex;flex-direction:column;gap:8px;padding:10px 12px;border:1px solid var(--acc);background:var(--acc-soft)}.ac-confirm[hidden]{display:none}
.ac-confirm b{font-size:14px}.ac-confirm p{margin:0;font-size:12px;color:var(--mute);line-height:1.5;word-break:keep-all}
.ac-confirm .cta{flex:1;min-height:40px;font-size:13px}
.snack{position:fixed;left:50%;top:max(14px,env(safe-area-inset-top));transform:translate(-50%,-8px);z-index:90;max-width:calc(100% - 32px);padding:10px 16px;background:var(--panel);color:var(--fg);border:2px solid var(--acc);font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s}
.snack.on{opacity:1;transform:translate(-50%,0)}
@media (max-height:430px){.acct-card{padding:12px 14px;gap:7px}.prov{min-height:42px}}
.career-btn{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.career-btn .rb,.badge{font-style:normal;font-family:var(--f-kr);font-weight:800;font-size:11px;padding:1px 6px;background:var(--acc);color:#170a04}
.career-btn .otw{font-style:normal;color:#ff6a5a;font-size:11px}
@media (max-width:560px){.career-btn .otw{display:none}html.mobile.sel #credTop,html.mobile.sel #muteBtn{display:none}html.mobile.sel .brand h1{font-size:15px}}
.gate.career{z-index:59;padding:max(10px,env(safe-area-inset-top,0px)) max(10px,env(safe-area-inset-right,0px)) max(10px,env(safe-area-inset-bottom,0px)) max(10px,env(safe-area-inset-left,0px))}
.career-card{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:min(720px,100%);max-height:100%;overflow:auto;background:var(--panel);border:2px solid var(--line);padding:16px;text-align:left}
@media (orientation:portrait) and (max-width:640px){.career-card{grid-template-columns:1fr}}
.cr-col{display:flex;flex-direction:column;gap:9px;min-width:0}
.cr-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.cr-head b{font-size:18px}.cr-head span{font-family:var(--f-mono);font-size:12px;color:var(--gold)}
.cr-rank{display:flex;align-items:center;gap:10px}.cr-rank .badge{font-size:14px;padding:4px 8px}.cr-rank div{display:flex;flex-direction:column;line-height:1.3}.cr-rank b{font-size:17px}.cr-rank small{font-size:12px;color:var(--mute)}
.cr-bar{position:relative;height:10px;background:#0d0b10;border:1px solid var(--line)}.cr-bar i{position:absolute;left:0;top:0;bottom:0;background:#6fe08a}
.cr-bar.kpi{height:12px;margin-bottom:12px}.cr-bar.kpi i{background:linear-gradient(90deg,#3db7ff,#ffd24a)}.cr-bar.ot i{background:linear-gradient(90deg,#ffb02e,#ff3b3b)}
.cr-bar .mk{position:absolute;top:100%;transform:translateX(-50%);font-family:var(--f-px);font-size:7px;color:var(--mute);padding-top:2px}.cr-bar .mk::before{content:"";position:absolute;left:50%;top:-14px;width:1px;height:12px;background:#ffffff55}
.cr-bar .mk.s{color:var(--gold)}
.cr-row{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13px;color:var(--mute)}.cr-row b{color:var(--fg);font-size:15px;white-space:nowrap}.cr-row b.gold{color:var(--gold)}.cr-row small{font-size:11px;opacity:.8}
.cr-shop{display:flex;flex-direction:column;gap:6px;padding:10px;border:1px dashed var(--line)}
.cr-tix{display:flex;gap:6px;flex-wrap:wrap;align-items:center}.cr-tix .ghost{min-height:36px;padding:4px 10px;font-size:12.5px}
.cr-use{display:flex;align-items:center;gap:4px;margin-left:auto;font-size:12px;color:var(--mute)}.cr-use button{min-width:40px}.cr-use button.on{border-color:var(--acc);color:var(--fg);background:var(--acc-soft)}
.cr-sub{font-size:12px;color:var(--mute)}
.cr-rewards ul{list-style:none;margin:4px 0 0;padding:0;display:flex;flex-direction:column;gap:4px}
.cr-rewards li{display:flex;align-items:center;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--dim);padding:3px 0;border-bottom:1px solid #2a2530}
.cr-rewards li.on{color:var(--fg)}.cr-rewards li b{color:var(--acc);margin-right:4px}.cr-rewards li button{min-height:30px;padding:2px 10px;font-size:12px}
.cr-acct{font-size:11.5px;color:var(--mute);line-height:1.5}.cr-acct button{background:none;border:0;color:var(--acc);text-decoration:underline;padding:0 2px;font:inherit}
.cr-actions{display:flex;gap:8px;justify-content:flex-end;margin-top:auto}.cr-actions button{min-height:44px;padding:8px 16px;font-size:14px}
@media (max-height:430px){.career-card{padding:10px 12px;gap:12px}.cr-col{gap:6px}.cr-rewards li{padding:1px 0}.cr-actions button{min-height:38px}}
.card .vst{position:absolute;top:3px;right:4px;font-family:var(--f-px);font-size:7px;color:#ff5c8a}
.card.vcard canvas{background:#120a10}
.card.locked{opacity:.55}.card.locked .cname{color:var(--dim)}
.sec-head .diff.on{color:#ff9ab6;border-color:#6a2a46}
.gm-line{font-size:12.5px;color:#ff9ab6}
.board-top .season{font-family:var(--f-mono);font-size:12px;color:var(--gold);margin-right:auto;margin-left:8px}.board-top .season.hot{color:#ff6a5a}
.board-list li .rb{font-style:normal;font-size:9.5px;font-weight:800;padding:0 4px;margin-left:4px;background:var(--acc);color:#170a04;vertical-align:1px}
.board-list .hof-h{grid-column:1/-1;display:block;background:none;border:0;color:var(--gold);font-family:var(--f-px);font-size:8px;padding:8px 2px 2px}
/* ---------- 모드 선택 (타이틀 → 모드 → 사원 → 대전) ---------- */
#scr-mode{flex:1;min-height:0;gap:12px;padding:8px 0}
.m-head{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}.m-head .eyebrow{margin:0}.m-head h2{font-size:18px;margin:0}
.m-steps{margin-left:auto;display:flex;gap:6px;align-items:center;font-size:12px;color:var(--dim)}.m-steps b{color:var(--acc)}.m-steps i{font-style:normal}
.m-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.m-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;gap:4px;min-height:0;min-width:0;overflow:hidden;text-align:left;
  padding:14px;background:linear-gradient(180deg,#14111a,#1d1820);border:2px solid var(--line);color:var(--fg);transition:border-color .12s,transform .12s}
.m-card canvas{position:absolute;right:4%;top:6%;height:min(62%,220px);width:auto;aspect-ratio:1;image-rendering:pixelated;pointer-events:none;filter:drop-shadow(0 0 18px rgba(252,94,32,.18))}
.m-card::before{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 45% 30% at 74% 60%,rgba(252,94,32,.14),transparent 70%);pointer-events:none}
.m-card.rank::before{background:radial-gradient(ellipse 45% 30% at 74% 50%,rgba(255,92,138,.16),transparent 70%)}
.m-card>small{font-family:var(--f-px);font-size:8px;color:var(--acc);letter-spacing:.06em}
.m-card>b{font-size:22px;font-weight:800}
.m-card>p{margin:0;font-size:12.5px;color:var(--mute);line-height:1.4}
.m-tag{font-style:normal;font-size:11px;color:var(--gold,#e8c35a);min-height:1em}
button.m-card:hover,button.m-card:focus-visible,.m-card.rank:hover,.m-card.rank:focus-within{border-color:var(--acc);outline:none}
button.m-card:active{transform:translateY(2px)}
.m-card.cur{box-shadow:inset 0 0 0 1px var(--acc-deep)}
.m-sub{display:grid;grid-template-columns:1fr 1fr;gap:6px;width:100%;margin-top:4px}
.m-sub button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;padding:8px 10px;background:var(--panel-2);border:2px solid var(--line);color:var(--fg);text-align:left}
.m-sub button b{font-size:14px}.m-sub button small{font-size:11px;color:var(--mute)}
.m-sub button:hover,.m-sub button:focus-visible{border-color:var(--acc);outline:none}.m-sub button.cur{border-color:var(--acc-deep)}
.m-foot{display:flex;align-items:center;gap:10px}.m-keys{font-size:12px;color:var(--dim);margin-right:auto}
html.mobile .m-keys{display:none}html.mobile .m-foot{justify-content:flex-end}
.mode .mode-chip{display:flex;align-items:center;gap:8px;width:100%;padding:8px 12px;background:none;border:0;color:var(--fg);white-space:nowrap}
.mode .mode-chip small{font-family:var(--f-px);font-size:7px;color:var(--acc)}.mode-chip b{font-size:14px}.mode-chip i{font-style:normal;margin-left:auto;font-size:12px;color:var(--mute)}
html.mobile.sel .mode .mode-chip{padding:6px 10px;justify-content:center}html.mobile.sel .mode-chip i{margin-left:6px}
html.mobile.msel .m-grid{gap:8px}html.mobile.msel #scr-mode{gap:8px;padding:6px 0 max(8px,env(safe-area-inset-bottom,0px))}
html.mobile.msel .m-card{padding:10px}html.mobile.msel .m-card>b{font-size:19px}html.mobile.msel .m-card>p{font-size:11.5px}
@media (max-height:420px){.m-head h2{font-size:15px}.m-steps{display:none}.m-card>p{display:none}.m-card canvas{height:58%;top:4%}}
@media (orientation:portrait){html.mobile .m-grid{grid-template-columns:1fr;grid-auto-rows:minmax(0,1fr)}html.mobile .m-card canvas{height:80%;top:10%}}
/* ---------- 앱인토스(토스 미니앱) ----------
   계정·설치·외부 링크 없음, 랭킹전 잠금. 오른쪽 위는 토스 내비게이션(더보기·닫기) 자리 */
html.toss{--toss-r:96px;--toss-t:0px}
html.toss #acctBtn,html.toss #tInstall,html.toss #installBtn,html.toss .site-foot,html.toss #mBoard,html.toss #inappGate,html.toss .uimode{display:none!important}
html.toss .credit-note a{pointer-events:none;text-decoration:none}
html.toss .top-actions{margin-right:var(--toss-r)}
html.toss.mobile.story .st-head{padding-right:calc(max(12px,env(safe-area-inset-right,0px)) + var(--toss-r))}
html.toss.mobile.story .track{right:calc(max(12px,env(safe-area-inset-right,0px)) + 112px + var(--toss-r))}
html.toss .hud-top{top:calc(2cqw + var(--toss-t));right:calc(2.4cqw + 6cqw)}
html.toss .m-card.rank.locked{opacity:.55;filter:grayscale(.7)}
html.toss .m-card.rank.locked .m-sub button{cursor:not-allowed}