/* One viewport owns the arena and thumb dock. Replaces accumulated v8-v11 rules. */
:root{font-family:system-ui,'Noto Sans KR',sans-serif;color:#f5ead2;background:#101c25;font-synthesis:none;color-scheme:dark}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none}body{height:100dvh;display:grid;grid-template-rows:48px minmax(0,1fr);padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);background:#101c25}[hidden]{display:none!important}button,a{touch-action:manipulation;color:inherit;font:inherit}button{cursor:pointer}a{text-decoration:none}button:focus-visible,a:focus-visible,select:focus-visible{outline:3px solid #efc276;outline-offset:-3px}button:disabled{opacity:.4}
header{display:flex;align-items:center;justify-content:space-between;padding:0 12px;border-bottom:1px solid #a3bcb225;background:#12242e;gap:8px}header>a{font-size:12px;white-space:nowrap}header>span{display:none}header>div{display:flex;gap:6px}header button{border:1px solid #829c9a45;background:#23404a;border-radius:12px;width:44px;height:44px;font-size:0;padding:0}header button:before{font-size:19px}#sound:before{content:'♪'}#sound[aria-pressed=true]:before{content:'♩';opacity:.45}#fullscreen:before{content:'⛶'}#pause:before{content:'Ⅱ'}
main{width:100%;max-width:1280px;min-height:0;margin:0 auto;display:grid;grid-template-rows:minmax(0,1fr) 142px;padding:0}.heading,.foot,.badge{display:none}.cabinet{min-height:0;display:grid;grid-template-rows:54px minmax(0,1fr) 30px;background:#192c30;overflow:hidden;position:relative}.hud{display:grid;grid-template-columns:minmax(94px,1fr) minmax(0,1.3fr) minmax(64px,1fr);align-items:center;gap:8px;padding:5px 14px;background:#183038;border-bottom:1px solid #d0c39822}.hud>div{min-width:0}.hud small{display:block;font-size:9px;color:#9bb7b6;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.5}.hud strong{display:block;font-size:17px;line-height:1.5;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.hud>div:last-child{text-align:right}.stage-label{text-align:center}#hp{color:#f49888;font-size:15px;letter-spacing:1px}#best{display:none}.screen{min-height:0;position:relative;overflow:hidden;background:#17292f}.screen canvas{display:block;width:100%;height:100%;touch-action:none;outline:0}.power{display:flex;align-items:center;gap:12px;padding:4px 14px;background:#173039;font-size:10px;min-width:0;border-top:1px solid #b5cab21c}.power>div{display:flex;align-items:center;gap:8px;flex:1;min-width:0}.power>div>span{white-space:nowrap}.power i{height:5px;flex:1;background:#071c24;border-radius:4px;overflow:hidden}#energy{display:block;height:100%;background:#9de8d7}#objective{max-width:52%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#e8d7a8}
.controls{display:flex;justify-content:space-between;align-items:center;padding:8px 26px 12px;gap:18px;background:linear-gradient(#173039,#10232e);border-top:1px solid #d1dcbe22;position:relative;user-select:none;-webkit-user-select:none;touch-action:none}.move{display:none}#stick{width:108px;height:108px;flex:none;position:relative;border-radius:50%;touch-action:none;background:radial-gradient(circle,#244c56 0 35%,#0e2933 36% 65%,#6a93904d 66% 68%,#173039 69%);border:1px solid #789d9877;box-shadow:inset 0 0 20px #00151a99}#stick:after{content:'‹       ›';position:absolute;inset:0;display:grid;place-items:center;white-space:pre;font-size:27px;color:#b9dbd680;pointer-events:none}#stick span{position:absolute;bottom:5px;left:0;right:0;text-align:center;font-size:8px;color:#9fbdb8;pointer-events:none}#stick-knob{position:absolute;left:50%;top:50%;margin:-24px 0 0 -24px;width:48px;height:48px;border-radius:50%;background:radial-gradient(circle at 35% 25%,#b4d3c2,#608f8d 60%,#355e69);border:1px solid #d7e6cf99;box-shadow:0 5px 12px #00101899;pointer-events:none;z-index:1;will-change:transform}
.actions{display:grid;grid-template-columns:62px 80px 62px;grid-template-rows:58px 58px;gap:8px;align-items:center;justify-items:center;flex:none}.actions button{padding:0;border:1px solid #81aaa37a;min-width:0;width:58px;height:58px;border-radius:50%;color:#d4ece4;background:radial-gradient(circle at 35% 20%,#3b6470,#203e4c);box-shadow:0 3px 0 #061925,inset 0 0 0 3px #bfdcd111;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1px;touch-action:none;transition:filter .08s,transform .08s}.actions button b{font-size:11px;font-weight:650;line-height:1.2}.actions button .glyph{font-size:23px;font-weight:600;line-height:1}.actions small{display:none}.actions [data-key=attack]{grid-column:2;grid-row:1/3;width:80px;height:80px;background:radial-gradient(circle at 35% 25%,#f1d19c,#b77c45 68%,#86552d);color:#202e35;border-color:#f3ce8a}.actions [data-key=attack] .glyph{font-size:31px}.actions [data-key=attack] b{font-size:13px}.actions [data-key=jump]{grid-column:3;grid-row:1}.actions [data-key=roll]{grid-column:3;grid-row:2}.actions [data-key=blast]{grid-column:1;grid-row:1/3;color:#c9fcf0;background:radial-gradient(circle at 30% 20%,#366f75,#204151);border-color:#759d9b}.actions [data-key=blast].charged{border-color:#b8f9d8;box-shadow:0 0 14px #64d8aa55,inset 0 0 0 3px #a4f5ca22}.actions button.held,.actions button:active{transform:scale(.93);filter:brightness(1.35)}.actions button.unavailable{filter:saturate(.3);opacity:.55}
#overlay{position:fixed;inset:48px 0 0;z-index:20;display:grid;place-items:center;padding:12px;background:#061720c9;backdrop-filter:blur(7px)}#overlay section{width:min(100%,470px);max-height:100%;overflow:auto;overscroll-behavior:contain;text-align:center;padding:24px;border-radius:22px;background:linear-gradient(145deg,#243e47,#122a35);border:1px solid #cbbb8580;box-shadow:0 20px 65px #0006}#overlay section>small{font-size:10px;letter-spacing:1px;color:#dac395}h2{font-size:clamp(24px,5vw,36px);line-height:1.22;letter-spacing:-1px;margin:14px 0}section p{font-size:12px;line-height:1.7;color:#bcd0cc;white-space:pre-line}#guide{display:flex;justify-content:center;gap:15px;font-size:10px}#guide b{display:block}.note{font-size:10px;color:#9ab7b2}#start{display:block;width:100%;min-height:50px;padding:10px 14px;margin-top:14px;border:1px solid #ffe0a2;background:#e5b976;color:#17323c;border-radius:12px;font-size:14px;font-weight:800}#campaign-settings{display:grid;grid-template-columns:1fr 1.2fr;gap:10px;margin:18px 0;text-align:left}#campaign-settings label{min-width:0;font-size:11px;color:#a8c2bd;display:grid;gap:6px}select{max-width:100%;width:100%;min-height:42px;font:inherit;font-size:12px;background:#1b3440;border:1px solid #81968b66;border-radius:8px;padding:8px;color:#f5ecd3}#reward{display:grid;text-align:left;gap:9px;border:1px solid #748d8377;border-radius:12px;padding:12px;font-size:12px}#reward legend{padding:0 8px}body:not([data-phase=playing]) .controls{pointer-events:none;opacity:.45}
@media(max-width:650px){main{grid-template-rows:minmax(0,1fr) 158px}.controls{padding:6px 26px 24px;gap:10px}.actions{grid-template-columns:56px 76px 56px;gap:6px}.actions [data-key=attack]{width:76px;height:76px}.actions button{width:55px;height:55px}#stick{width:104px;height:104px}#guide{display:none}.hud{padding:5px 10px;gap:6px}.hud strong{font-size:14px}#hp{font-size:14px;letter-spacing:0}#overlay section{padding:20px}.power{padding:4px 10px}#objective{font-size:10px}}
@media(min-width:351px) and (max-width:380px) and (orientation:portrait){.controls{padding-left:20px;padding-right:20px}}
@media(max-width:350px){main{grid-template-rows:minmax(0,1fr) 142px}.controls{padding:5px 18px 19px;gap:8px}.actions{grid-template-columns:48px 66px 48px;gap:4px}.actions button{width:48px;height:48px}.actions [data-key=attack]{width:66px;height:66px}#stick{width:88px;height:88px}.hud{grid-template-columns:92px minmax(0,1fr) 58px}.hud strong{font-size:12px}#hp{font-size:13px}.actions button b{font-size:10px}}
@media(orientation:landscape) and (max-height:600px){body{grid-template-rows:minmax(0,1fr)}header{position:absolute;top:5px;right:8px;padding:0;z-index:10;background:none;border:none}header>a,header #sound,header #fullscreen{display:none}header button{width:44px;height:44px;background:#193743e8}main{display:block;height:100%}.cabinet{height:100%;grid-template-rows:48px minmax(0,1fr)}.hud{padding-right:60px;grid-template-columns:1fr 1fr 1fr}.power{display:none}.controls{position:absolute;bottom:calc(16px + env(safe-area-inset-bottom));left:calc(clamp(28px,6vw,58px) + env(safe-area-inset-left));right:calc(clamp(28px,6vw,58px) + env(safe-area-inset-right));height:126px;padding:0;border:0;background:none;pointer-events:none}.controls>*{pointer-events:auto}#stick{width:92px;height:92px;opacity:.8;align-self:end}.actions{grid-template-columns:50px 68px 50px;grid-template-rows:52px 52px;gap:6px;opacity:.92}.actions button{width:50px;height:50px}.actions [data-key=attack]{width:68px;height:68px}#overlay{inset:0;padding:8px 55px}#overlay section{max-width:550px;padding:12px 20px}#overlay h2{font-size:24px;margin:6px}#overlay section p{margin:7px;font-size:11px;line-height:1.5}#campaign-settings{margin:8px 0}#start{margin-top:8px;min-height:44px}.note{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}