body{
background:#16181f;
color:white;
font-family:sans-serif;
margin:0;
}
html.battle-game-page,
body.battle-game-page{
overscroll-behavior:none;
}
canvas{
border:2px solid white;
image-rendering:pixelated;
}
#rail{
margin-bottom:10px;
}
.battle-shell{
padding:10px;
min-height:100vh;
background:radial-gradient(circle at 240px 190px,#26372d 0,#171b20 520px);
}
.battle-header{
min-height:28px;
display:flex;
align-items:center;
gap:8px;
}
.map-preview-selector{
display:inline-flex;
align-items:center;
gap:5px;
margin:0;
}
.map-preview-selector select{
box-sizing:border-box;
width:auto;
max-width:260px;
min-height:28px;
padding:3px 7px;
}
#mapPreviewPanel{
margin-top:8px;
}
#mapPreviewTitle{
display:block;
margin-bottom:6px;
}
.map-preview-scroll{
max-width:calc(100vw - 20px);
max-height:calc(100vh - 110px);
overflow:auto;
}
.sample96-controls{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:6px;
margin:0 0 6px;
}
.sample96-controls[hidden]{
display:none;
}
.sample96-controls button{
min-width:40px;
min-height:30px;
font-weight:700;
}
#sample96ZoomValue{
min-width:42px;
text-align:right;
font-variant-numeric:tabular-nums;
}
.sample96-controls label{
display:flex;
align-items:center;
gap:4px;
}
.sample96-controls select{
max-width:170px;
min-height:30px;
}
.sample96-help{
margin-left:8px;
color:#d1d5db;
font-size:13px;
}
.map-preview-scroll.sample96-camera{
box-sizing:border-box;
width:min(960px,calc(100vw - 20px));
height:clamp(360px,calc(100vh - 150px),700px);
max-width:none;
max-height:none;
overflow:hidden;
border:1px solid #6b7280;
background:#090c10;
touch-action:none;
cursor:grab;
}
.map-preview-scroll.sample96-camera.is-dragging{
cursor:grabbing;
}
.map-preview-scroll.sample96-camera #mapPreviewCanvas{
display:block;
max-width:none;
transform-origin:0 0;
will-change:transform;
}
.battle-log-panel{
box-sizing:border-box;
width:484px;
margin-top:10px;
padding:10px 12px;
border:1px solid #666;
background:#101216;
}
.battle-log-panel h2{
margin:0 0 8px;
font-size:16px;
}
.battle-log-panel ol{
margin:0;
padding-left:22px;
font-family:monospace;
font-size:13px;
line-height:1.5;
}
.auth-page{
min-height:100vh;
display:grid;
grid-template-columns:minmax(240px,360px) minmax(240px,420px);
gap:18px;
align-content:start;
justify-content:center;
padding:42px 18px;
background:#241b7a;
}
.auth-page h1{
grid-column:1/-1;
margin:0 0 12px;
font-size:42px;
font-weight:700;
text-align:center;
}
.auth-panel,
.terms-panel,
.login-menu{
border:1px solid rgba(255,255,255,.35);
background:rgba(0,0,0,.18);
padding:18px;
border-radius:6px;
}
.login-menu{
grid-column:1/-1;
width:min(680px,100%);
justify-self:center;
}
.auth-panel h2,
.terms-panel h2{
margin:0 0 14px;
font-size:20px;
}
label{
display:grid;
gap:6px;
margin-bottom:12px;
}
input[type="text"],
input[type="password"],
input[type="email"]{
box-sizing:border-box;
width:100%;
padding:9px 10px;
border:1px solid rgba(255,255,255,.45);
background:#101225;
color:white;
border-radius:4px;
}
fieldset{
border:1px solid rgba(255,255,255,.28);
margin:0 0 12px;
padding:10px;
}
.radio-line{
display:inline-flex;
grid-template-columns:none;
gap:5px;
margin:0 12px 0 0;
align-items:center;
}
button,
.button-link{
display:inline-flex;
align-items:center;
justify-content:center;
box-sizing:border-box;
min-height:36px;
padding:8px 14px;
border:1px solid rgba(255,255,255,.55);
background:#ffffff;
color:#1c1d2b;
border-radius:4px;
font:inherit;
text-decoration:none;
cursor:pointer;
}
button:disabled{
opacity:.5;
cursor:default;
}
.text-link{
color:white;
}
.result-list{
display:grid;
grid-template-columns:max-content 1fr;
gap:8px 14px;
margin:14px 0;
}
.result-list dt{
opacity:.75;
}
.result-list dd{
margin:0;
}
.menu-grid{
display:grid;
grid-template-columns:repeat(3,minmax(120px,1fr));
gap:10px;
margin:18px 0;
}
.training-shell{
padding:18px;
}
.training-toolbar,
.training-controls,
.training-battle-header{
display:flex;
align-items:center;
gap:12px;
}
.training-toolbar h1{
margin:0;
font-size:28px;
}
.training-controls{
margin:16px 0;
}
.training-controls label{
display:flex;
align-items:center;
gap:8px;
margin:0;
}
.training-controls .toggle-line{
padding:7px 10px;
border:1px solid rgba(255,255,255,.45);
border-radius:4px;
background:#101216;
}
.training-controls select{
min-width:92px;
padding:8px;
}
#areaSelect{
min-width:360px;
max-width:100%;
}
.training-layout{
display:flex;
align-items:flex-start;
gap:16px;
}
.training-map-column{
width:min(964px,calc(100vw - 36px));
}
.training-lobby-map-viewport{
box-sizing:border-box;
width:min(647px,calc(100vw - 36px));
max-height:calc(100vh - 190px);
overflow:auto;
background:#090c10;
}
.training-lobby-map-viewport canvas{
display:block;
max-width:none;
width:643.2px;
height:514.56px;
}
.training-lobby-map-viewport.pvp-lobby-map-viewport canvas{
width:480px;
height:480px;
}
.training-lobby-map-viewport.base-patrol-lobby-map-viewport canvas{
width:480px;
height:480px;
}
.training-camera-controls{
display:flex;
align-items:center;
flex-wrap:wrap;
gap:6px;
margin:6px 0;
}
.training-camera-controls button{
min-width:42px;
min-height:30px;
padding:4px 9px;
font-weight:700;
}
#trainingZoomValue{
min-width:42px;
font-variant-numeric:tabular-nums;
text-align:right;
}
.training-camera-help{
margin-left:6px;
color:#d1d5db;
font-size:13px;
}
.training-map-viewport{
box-sizing:border-box;
width:min(960px,calc(100vw - 20px));
height:clamp(360px,calc(100vh - 150px),720px);
overflow:hidden;
border:1px solid #6b7280;
background:#090c10;
touch-action:none;
cursor:grab;
}
.training-map-viewport.is-dragging{cursor:grabbing;}
.training-map-viewport #trainingGame{
display:block;
max-width:none;
transform-origin:0 0;
will-change:transform;
}
.training-party-panel{
box-sizing:border-box;
width:484px;
margin-top:10px;
padding:12px;
border:1px solid #666;
background:#101216;
}
.training-party-panel h2{
margin:0 0 8px;
font-size:17px;
}
.training-party-slots{
display:flex;
gap:8px;
overflow-x:auto;
}
.training-party-slots label{
display:flex;
align-items:center;
gap:5px;
min-width:0;
margin:0;
}
.training-party-slots span{
font-weight:700;
}
.training-party-slots select{
max-width:138px;
padding:7px 5px;
}
.training-enemy-panel{
width:300px;
padding:12px;
border:1px solid #666;
background:#101216;
}
.training-enemy-panel h2{
margin:0 0 8px;
font-size:17px;
}
.training-enemy-panel ol{
margin:0;
padding-left:24px;
line-height:1.7;
}
.pvp-lobby-panel{
box-sizing:border-box;
max-width:820px;
margin:0 0 16px;
padding:12px;
border:1px solid #666;
background:#101216;
}
.pvp-action-row{
display:flex;
align-items:flex-end;
gap:10px;
margin-bottom:12px;
}
.pvp-action-row label{
display:grid;
gap:5px;
min-width:280px;
margin:0;
}
.pvp-action-row select{
padding:8px;
}
.pvp-lobby-layout{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}
.pvp-lobby-list,
.pvp-current-lobby{
min-height:130px;
padding:10px;
border:1px solid rgba(255,255,255,.18);
background:#16181f;
}
.pvp-lobby-list h2,
.pvp-current-lobby h2{
margin:0 0 8px;
font-size:17px;
}
.pvp-lobby-row{
display:flex;
align-items:center;
justify-content:space-between;
gap:8px;
padding:7px 0;
border-bottom:1px solid rgba(255,255,255,.12);
}
.pvp-lobby-row button{
min-height:30px;
padding:5px 10px;
}
.pvp-slot-grid{
display:grid;
grid-template-columns:1fr;
gap:6px;
}
.pvp-slot{
padding:7px 8px;
border:1px solid rgba(255,255,255,.16);
background:#20232d;
font-size:14px;
}
.pvp-slot.is-ready{
border-color:#22c55e;
}
.pvp-slot.is-own{
background:#17324c;
}
.training-battle-header{
height:auto;
margin-bottom:8px;
}
.shop-shell{
padding:18px;
}
.shop-layout{
display:grid;
grid-template-columns:1fr 1fr;
gap:16px;
align-items:start;
}
.equipment-layout{
display:grid;
grid-template-columns:210px 260px 320px;
gap:10px;
align-items:start;
min-width:810px;
}
.equipment-actions{
margin-top:16px;
}
.shop-panel{
margin-top:14px;
padding:12px;
border:1px solid #666;
background:#101216;
}
.shop-panel h2{
margin:0 0 10px;
font-size:18px;
}
.bulk-action-bar{
display:flex;
align-items:center;
gap:10px;
margin:0 0 10px;
}
.bulk-action-bar span{
color:#facc15;
font-size:13px;
}
.shop-panel table{
width:100%;
border-collapse:collapse;
font-size:14px;
}
.shop-panel th,
.shop-panel td{
padding:7px 8px;
border-bottom:1px solid rgba(255,255,255,.18);
text-align:left;
}
.shop-panel button{
min-height:30px;
padding:5px 9px;
}
.notice-line{
min-height:1.5em;
color:#facc15;
}
.icon-button{
min-width:92px;
padding:5px 9px;
}
.icon-button.is-paused{
background:#facc15;
}
@media (max-width:720px){
.auth-page{
grid-template-columns:1fr;
padding:28px 12px;
}
.auth-page h1{
font-size:32px;
}
.menu-grid{
grid-template-columns:1fr 1fr;
}
.training-layout{
display:block;
overflow:auto;
}
.training-enemy-panel{
box-sizing:border-box;
width:480px;
margin-top:10px;
}
.pvp-lobby-panel{
max-width:480px;
}
.pvp-action-row,
.pvp-lobby-layout{
display:block;
}
.pvp-action-row button,
.pvp-lobby-list,
.pvp-current-lobby{
margin-top:10px;
}
.shop-layout{
grid-template-columns:1fr;
}
.equipment-layout{
grid-template-columns:210px 260px 320px;
}
}

.unit-action-menu{
position:fixed;
z-index:20;
display:grid;
gap:6px;
max-width:220px;
padding:8px;
border:1px solid rgba(255,255,255,.55);
background:#101216;
box-shadow:0 8px 22px rgba(0,0,0,.45);
border-radius:6px;
}
.unit-action-menu-side{
grid-template-columns:minmax(74px,1fr);
}
.unit-action-menu-top{
grid-auto-flow:column;
grid-auto-columns:minmax(74px,auto);
max-width:calc(100vw - 12px);
overflow-x:auto;
}
.unit-action-menu[hidden]{
display:none;
}
.unit-action-menu button{
min-height:34px;
padding:6px 8px;
font-size:13px;
line-height:1.1;
white-space:nowrap;
}
.unit-action-menu button:disabled{
opacity:.45;
}
.arena-choice-grid{
display:grid;
grid-template-columns:repeat(3,minmax(180px,1fr));
gap:12px;
}
.arena-choice{
border:1px solid #666;
background:#101216;
padding:12px;
border-radius:6px;
}
.arena-choice h3{
margin:0 0 8px;
font-size:18px;
}
.arena-choice p{
min-height:42px;
margin:0 0 12px;
}
.arena-result-panel{
width:auto;
max-width:920px;
}
.disabled-note {
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    padding: 0 8px;
    color: #9aa3b8;
    border: 1px solid #4a5065;
    border-radius: 4px;
    background: #242836;
}
.table-wrap {
 overflow-x: auto;
}
.temple-map-viewport {
 max-width: 100%;
 max-height: 760px;
 overflow: auto;
 border: 1px solid #4a5065;
 background: #09090b;
}
.temple-map-viewport canvas {
 display: block;
 max-width: none;
}