:root{color-scheme:dark;font-family:Inter,"Noto Sans TC",system-ui,sans-serif;background:#050815;color:#f8fbff;--accent:#6fffe0;--accent2:#ffe36e;--panel:#091a31;--line:#3a7895}*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#050815}button,select{font:inherit}button{cursor:pointer}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
.main-group{min-height:100vh;background:linear-gradient(#020916b8,#020916e8),var(--cover) center/cover fixed}.main-canvas{width:min(100%,920px);min-height:min(844px,100vh);margin:auto;padding:12px;display:grid;grid-template-rows:62px minmax(0,1fr);gap:12px}.main-header{display:grid;grid-template-columns:72px minmax(0,1fr) 156px;align-items:center;gap:8px;padding:6px;border:1px solid var(--line);border-radius:18px;background:#071529ed}.lobby-return{width:60px;height:48px;border-radius:12px;background:#fff;color:#154d6d;text-decoration:none;display:flex;align-items:center;justify-content:center;gap:2px;font-size:25px;font-weight:1000}.lobby-return img{width:25px;height:25px;object-fit:contain}.main-header>strong{text-align:center;font-size:clamp(16px,3vw,25px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.locale-control select{width:100%;min-height:44px;border:1px solid var(--line);border-radius:11px;background:#0c2944;color:#fff;padding:0 8px}.hero{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(280px,.88fr);gap:18px;align-items:center;overflow:hidden;padding:18px;border:1px solid var(--line);border-radius:25px;background:#071529e8}.poster{width:100%;height:min(69vh,640px);object-fit:cover;border:2px solid var(--accent);border-radius:20px;box-shadow:0 18px 54px #000c}.hero-copy{display:grid;gap:12px;align-content:center}.hero-copy small,.guide>small{color:var(--accent2);font-weight:1000;letter-spacing:.08em}.hero-copy h1{font-size:clamp(30px,5vw,54px);line-height:1;margin:0}.hero-copy p{margin:0;color:#e5f4ff;line-height:1.55;font-size:18px}.hero-copy strong{color:var(--accent)}.primary{border:0!important;background:linear-gradient(135deg,var(--accent2),#ffad28)!important;color:#1b1402!important;font-weight:1000;box-shadow:0 4px 0 #85530c}.hero-copy button{min-height:58px;border-radius:14px;font-size:21px}.guide{width:min(100%,920px);margin:auto;padding:30px 20px 54px;background:#edf8fa;color:#152f3b}.guide h2{font-size:31px;margin:8px 0}.guide p,.guide li{line-height:1.7}.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:17px}.guide article{background:#fff;border:1px solid #bdd9de;border-radius:17px;padding:17px}
.active-screen{position:fixed;inset:0;display:grid;grid-template-rows:minmax(0,1fr) 56px;background:linear-gradient(#020916a8,#020916e8),var(--cover) center/cover}.stage-canvas,.battle-canvas{position:relative;width:min(100%,920px);height:100%;min-height:0;margin:auto;overflow:hidden;border-inline:1px solid var(--line);background:#061225}.ad-reserve{width:min(100%,920px);height:56px;margin:auto;background:#040917;border-top:1px solid #203b55;pointer-events:none}.stage-canvas{display:grid;grid-template-rows:68px minmax(0,1fr) 32px;gap:7px;padding:8px;background:linear-gradient(#06162bc9,#051020ed),var(--cover) center/cover}.stage-header,.battle-header{display:grid;align-items:center;gap:8px;border:1px solid var(--line);border-radius:15px;background:#07172ded;padding:6px}.stage-header{grid-template-columns:54px minmax(0,1fr) 68px}.stage-header button,.battle-header button{width:48px;height:48px;border:0;border-radius:11px;background:#fff;color:#155374;font-size:27px;font-weight:1000}.stage-header div{display:grid;min-width:0}.stage-header strong{font-size:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.stage-header span{color:var(--accent)}.stage-badge{text-align:center;color:var(--accent2);font-weight:900}.stage-rail{display:flex;align-items:center;gap:16px;overflow-x:auto;overflow-y:hidden;padding-inline:calc(50% - 132px);scroll-snap-type:x mandatory;scrollbar-width:none;touch-action:pan-y}.stage-rail::-webkit-scrollbar{display:none}.stage-card{width:264px;flex:0 0 264px;height:196px;scroll-snap-align:center;border:2px solid #4b708d;border-radius:21px;padding:16px;color:#fff;text-align:left;display:grid;align-content:end;gap:6px;background:linear-gradient(#04132a22,#061329e8),var(--cover) center/cover;box-shadow:0 12px 28px #0008}.stage-card strong{font-size:28px}.stage-card span{color:#dff6ff}.stage-card small{color:var(--accent)}.stage-card.locked{filter:saturate(.25) brightness(.55)}.stage-card.centered{filter:none;border-color:#fff7aa;box-shadow:0 0 0 3px var(--accent),0 0 30px var(--accent)}.stage-hint{text-align:center;margin:0;color:#dcefff}
.battle-canvas{display:grid}.battle-live{min-height:0;display:grid;grid-template-rows:68px 36px minmax(0,1fr) auto;gap:6px;padding:7px}.battle-header{grid-template-columns:52px minmax(0,1fr) minmax(170px,40%) 52px}.battle-title{display:grid;text-align:center;min-width:0}.battle-title small{color:var(--accent);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.battle-title strong{font-size:20px}.battle-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.battle-stats span{display:grid;text-align:center;background:#0d2c49;border-radius:9px;padding:3px}.battle-stats b{font-size:10px;color:#a9cddd}.objective,.feedback{margin:0;border:1px solid var(--line);border-radius:10px;background:#071a31e8;text-align:center}.objective{display:flex;align-items:center;justify-content:center;padding:3px 8px;font-size:14px}.feedback{min-height:27px;padding:4px;color:var(--accent);font-size:13px}.arena-wrap{position:relative;min-height:0;overflow:hidden;border:1px solid var(--line);border-radius:19px;background:#061226}.arena{display:block;width:100%;height:100%;touch-action:none}.battle-controls{display:flex;justify-content:center;gap:7px;min-height:46px}.battle-controls button{min-width:66px;min-height:46px;border:1px solid var(--line);border-radius:11px;background:#0d3353;color:#fff;font-weight:900}.battle-controls .mode-active{border-color:var(--accent2);box-shadow:inset 0 0 0 2px var(--accent);background:#194668}.dpad{display:grid;grid-template-columns:repeat(3,52px);grid-template-rows:repeat(2,44px);gap:4px}.dpad button{min-width:52px;min-height:44px}.dpad [data-dir=up]{grid-column:2}.dpad [data-dir=left]{grid-column:1}.dpad [data-dir=down]{grid-column:2}.dpad [data-dir=right]{grid-column:3}.modal{position:absolute;inset:0;z-index:20;display:grid;place-items:center;padding:16px;background:#020711e8}.dialog{width:min(100%,580px);max-height:100%;overflow:auto;border:2px solid var(--accent);border-radius:24px;background:#081c35;padding:20px;text-align:center}.dialog h2{font-size:32px;margin:5px}.dialog p{line-height:1.5}.result-art{width:128px;height:128px;border-radius:18px;object-fit:cover}.result-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.result-stats span{display:grid;background:#0d304f;border-radius:12px;padding:9px}.modal-actions{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px}.modal-actions button{min-height:52px;border:1px solid var(--line);border-radius:12px;background:#103b5f;color:#fff;font-weight:900}.loading{position:fixed;inset:0;z-index:99;display:grid;place-items:center;align-content:center;gap:12px;background:#050815}.loading img{width:150px;height:150px;border-radius:24px;object-fit:cover}.loading strong{font-size:20px}
@media(max-width:640px){.main-canvas{padding:7px;grid-template-rows:56px auto;min-height:auto}.main-header{grid-template-columns:60px minmax(0,1fr) 116px}.hero{grid-template-columns:1fr;grid-template-rows:auto auto;align-content:start;padding:8px;gap:8px}.poster{height:min(47vh,400px)}.hero-copy{gap:5px}.hero-copy h1{font-size:25px}.hero-copy p{font-size:14px;line-height:1.35}.hero-copy button{min-height:50px}.guide{padding:24px 12px}.guide-grid{grid-template-columns:1fr}.battle-live{grid-template-rows:64px 34px minmax(0,1fr) auto;padding:5px;gap:4px;min-width:0}.battle-header{width:100%;min-width:0;grid-template-columns:44px minmax(0,1fr) minmax(126px,146px) 44px;gap:2px;padding:3px}.battle-header>button{width:44px;height:44px}.battle-stats{gap:2px;min-width:0}.battle-controls{max-width:100%;min-width:0;gap:4px;flex-wrap:wrap}.battle-controls>button{min-width:58px;padding-inline:6px}.modal-actions{grid-template-columns:1fr}.dialog{padding:14px}.result-art{width:92px;height:92px}}
@media(max-height:500px) and (min-aspect-ratio:3/2){.main-canvas{min-height:720px}.stage-canvas{grid-template-rows:58px minmax(0,1fr)}.stage-hint{display:none}.stage-card{height:160px}.battle-live{grid-template-columns:minmax(0,1fr) 200px;grid-template-rows:54px 30px minmax(0,1fr);gap:4px}.battle-header{grid-column:1/-1;grid-row:1}.objective{grid-column:2;grid-row:2}.arena-wrap{grid-column:1;grid-row:2/4}.battle-controls{grid-column:2;grid-row:3;align-content:center;align-items:center;flex-wrap:wrap}.feedback{display:none}.dialog{width:min(760px,100%);padding:10px}.dialog h2{font-size:25px}.result-layout{display:grid;grid-template-columns:120px 1fr;align-items:center}.result-art{width:110px;height:110px}.modal-actions{margin-top:7px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;animation-duration:.001ms!important;transition-duration:.001ms!important}}
.battle-title strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media(max-width:640px){.battle-title strong{font-size:16px}}