@font-face{
font-family:Inter;
src:local('Inter');
font-display:swap}

:root{
color-scheme:dark;
--bg:#050608;
--panel:#0b0d11;
--line:#292c35;
--muted:#9298a6;
--text:#f7f7fa;
--accent:#f11742;
--gold:#e4b968;
--red:#ee7d7d;
--s:#edce65;
--a:#c58aed;
--b:#65bfe2;
--c:#75cd9e}

*{
box-sizing:border-box}
body{
margin:0;
background:var(--bg);
color:var(--text);
font-family:'Segoe UI',Arial,sans-serif;
font-size:14px;
line-height:1.55}
button,input,select,textarea{
font:inherit}
button,a,input,select,textarea{
-webkit-tap-highlight-color:transparent}
button,a{
touch-action:manipulation}
a{
color:inherit;
text-decoration:none}
button{
cursor:pointer}
button:disabled{
cursor:not-allowed;
opacity:.5}
button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{
outline:2px solid var(--gold);
outline-offset:4px}
h1,h2,h3,p{
margin:0}
h1{
font-size:clamp(26px,2.8vw,40px);
font-weight:650;
line-height:1.1;
letter-spacing:-1.4px}
h2{
font-size:19px;
line-height:1.3;
font-weight:600}
h3{
font-size:16px;
font-weight:600}
.muted{
color:var(--muted)}
.eyebrow{
font-size:10px;
letter-spacing:2.2px;
color:var(--accent);
font-weight:600}
.site-header{
height:90px;
display:flex;
align-items:center;
border-bottom:1px solid var(--line);
padding:0 32px;
gap:27px;
background:#090a0d}
.brand{
display:flex;
gap:12px;
align-items:center}
.brand>img{
width:47px;
height:56px;
object-fit:contain}
.brand>span{
font-size:19px;
line-height:1.1;
letter-spacing:2px;
font-weight:750}
.brand b{
color:var(--accent);
font-weight:750}
.brand small{
display:block;
font-size:8px;
letter-spacing:1.6px;
color:var(--muted);
margin-top:8px}
.header-divider{
width:1px;
height:31px;
background:var(--line)}
.header-label{
font-size:10px;
letter-spacing:1.6px;
color:var(--muted)}
.header-label span{
color:var(--accent);
margin-left:14px}
.header-actions{
margin-left:auto;
display:flex;
gap:30px;
align-items:center}
.ecosystem{
font-size:12px;
color:var(--muted)}
.button{
min-height:43px;
padding:10px 17px;
display:inline-flex;
justify-content:center;
align-items:center;
gap:8px;
background:#11131a;
color:var(--text);
border:1px solid #373a46;
border-radius:5px;
font-size:12px;
font-weight:600;
transition:background .15s,border-color .15s}
.button:hover{
border-color:var(--accent);
background:#25111a}
.button.primary{
background:var(--accent);
border-color:var(--accent);
color:#ffffff}
.button.primary:hover{
background:#ff3155}
.button.danger{
color:var(--red);
border-color:#663b3b;
background:#271b1d}
.button.small{
min-height:36px;
font-size:11px;
padding:8px 13px}
.button.full{
width:100%}
.app-shell{
display:grid;
grid-template-columns:208px minmax(0,1fr);
min-height:calc(100vh - 90px)}
.sidebar{
padding:29px 16px 20px;
border-right:1px solid var(--line);
display:flex;
flex-direction:column;
min-width:0}
.sidebar-caption{
font-size:9px;
letter-spacing:1.7px;
color:#777d8b;
padding:0 13px 20px;
display:flex;
justify-content:space-between}
.sidebar-caption span{
font-size:8px;
color:#464b59}
nav{
display:grid;
gap:5px}
nav a{
min-height:45px;
display:flex;
align-items:center;
gap:12px;
padding:10px 13px;
color:#a0a5b1;
border:1px solid transparent;
border-radius:5px;
font-size:12px}
nav a .nav-icon{
font-size:18px;
width:20px;
text-align:center;
color:#777d8b}
nav a .nav-index{
margin-left:auto;
font-size:9px;
color:#555b69}
nav a:hover{
background:#151019}
nav a.active{
background:#26101a;
color:var(--accent);
border-color:#722033}
nav a.active .nav-icon{
color:var(--accent)}
.sidebar-bottom{
margin-top:auto;
padding:60px 13px 0}
.sidebar-bottom img{
width:35px;
height:35px;
opacity:.55;
margin-bottom:13px}
.sidebar-bottom p{
font-size:13px;
font-weight:600;
line-height:1.6}
.sidebar-bottom a{
display:block;
font-size:10px;
color:var(--accent);
margin-top:15px}
.sidebar-bottom>span{
display:block;
color:#656b79;
font-size:8px;
letter-spacing:1.3px;
margin-top:40px}
main{
padding:34px 34px 40px;
min-width:0;
outline:0}
.page-top{
display:flex;
justify-content:space-between;
gap:20px;
align-items:flex-end;
margin-bottom:28px}
.page-top .eyebrow{
display:block;
margin-bottom:13px}
.page-description{
margin-top:13px;
color:var(--muted);
font-size:12px;
max-width:700px}
.season-picker{
display:grid;
gap:7px;
min-width:170px}
.season-picker>span{
font-size:9px;
letter-spacing:1.5px;
color:var(--muted)}
input,textarea,select{
color:var(--text);
border:1px solid #333641;
border-radius:4px;
background:#0b0d11;
padding:11px 12px;
min-width:0}
input::placeholder,textarea::placeholder{
color:#747b89}
select{
cursor:pointer}
.season-picker select{
font-size:12px;
padding:10px}
.stats{
display:grid;
grid-template-columns:repeat(4,minmax(0,1fr));
border:1px solid var(--line);
border-radius:6px;
margin-bottom:25px;
background:linear-gradient(110deg,#131017,#090a0e);
overflow:hidden}
.stat{
padding:18px 22px;
border-right:1px solid var(--line);
display:flex;
align-items:center;
gap:16px}
.stat:last-child{
border-right:0}
.stat-icon{
width:35px;
height:35px;
display:grid;
place-items:center;
border:1px solid #5c2130;
border-radius:7px;
color:var(--accent);
font-size:19px;
background:#221119}
.stat:nth-child(3) .stat-icon{
color:var(--gold);
border-color:#49402c;
background:#28251c}
.stat small{
display:block;
color:var(--muted);
font-size:10px;
margin-bottom:3px}
.stat strong{
font-size:24px;
font-weight:600;
line-height:1.1}
.stat em{
color:#8d7780;
font-style:normal;
font-size:9px;
margin-left:6px}
.workspace{
display:grid;
grid-template-columns:minmax(0,1fr) 282px;
gap:20px;
align-items:start}
.panel{
border:1px solid var(--line);
border-radius:6px;
background:#0b0d11;
min-width:0;
overflow:hidden}
.panel-head{
display:flex;
align-items:center;
justify-content:space-between;
gap:12px;
padding:17px 19px;
border-bottom:1px solid var(--line)}
.panel-head h2{
font-size:14px}
.panel-head small{
font-size:9px;
color:var(--muted);
letter-spacing:1px}
.live-dot{
width:6px;
height:6px;
border-radius:50%;
background:var(--accent);
display:inline-block;
margin-right:6px}
.map-toolbar{
padding:13px 16px;
display:flex;
align-items:center;
justify-content:space-between;
gap:10px;
background:#0c0d12}
.filters{
display:flex;
gap:5px;
align-items:center}
.filter-button{
border:1px solid transparent;
border-radius:4px;
background:transparent;
color:var(--muted);
padding:6px 10px;
min-width:31px;
font-size:10px}
.filter-button.active{
border-color:#6f2337;
background:#30121e;
color:var(--accent)}
.filter-button[data-filter=S]{
color:var(--s)}
.filter-button[data-filter=A]{
color:var(--a)}
.filter-button[data-filter=B]{
color:var(--b)}
.filter-button[data-filter=C]{
color:var(--c)}
.map-toolbar select{
font-size:10px;
padding:7px 9px;
max-width:146px}
.map-viewport{
position:relative;
overflow:auto;
background:#07080c;
max-height:65vh}
.map-canvas{
position:relative;
width:100%;
min-width:100%}
.map-canvas svg{
width:100%;
display:block;
aspect-ratio:16/9}
.territory{
fill:var(--class-color);
fill-opacity:.06;
stroke:var(--class-color);
stroke-width:2;
stroke-opacity:.65;
cursor:pointer;
vector-effect:non-scaling-stroke;
transition:fill-opacity .15s,stroke .15s}
.territory.owned{
fill-opacity:.3}
.territory:hover,.territory:focus-visible{
fill-opacity:.38;
stroke:#fff;
stroke-width:2.5;
outline:0}
.territory.selected{
fill:#f11742;
fill-opacity:.38;
stroke:#ff5577;
stroke-width:2.8}
.territory.dim{
opacity:.15;
pointer-events:none}
.map-number{
font-size:14px;
fill:#f7f7fa;
paint-order:stroke;
stroke:#101015;
stroke-width:4;
pointer-events:none;
font-weight:700;
text-anchor:middle;
dominant-baseline:central}
.map-number.dim{
opacity:.15}
.map-tooltip{
position:absolute;
pointer-events:none;
left:12px;
bottom:12px;
background:#0c0d13f2;
border:1px solid #694252;
border-radius:4px;
padding:8px 12px;
font-size:11px;
max-width:90%;
color:#f7f7fa}
.map-bottom{
padding:11px 16px;
display:flex;
justify-content:space-between;
align-items:center;
gap:12px;
border-top:1px solid var(--line);
color:#777d8b;
font-size:9px}
.map-zoom{
display:flex;
gap:5px;
align-items:center}
.icon-button{
display:inline-grid;
place-items:center;
border:1px solid var(--line);
background:#132125;
color:#a8b8bb;
border-radius:4px;
min-width:29px;
height:28px;
font-size:16px}
.icon-button:hover{
border-color:var(--accent);
color:var(--accent)}
.map-legend{
display:flex;
flex-wrap:wrap;
gap:15px;
padding:14px 17px;
border-top:1px solid var(--line);
font-size:9px;
color:var(--muted)}
.map-legend span{
display:flex;
align-items:center;
gap:6px}
.class-dot{
width:6px;
height:6px;
border-radius:2px;
background:var(--class-color)}
.map-help{
margin-top:12px;
color:#777d8b;
font-size:10px;
display:flex;
gap:7px;
align-items:center}
.selected-panel .territory-cover{
height:102px;
position:relative;
overflow:hidden;
background:linear-gradient(120deg,#29101b,#0b0d11);
border-bottom:1px solid var(--line);
display:flex;
align-items:center;
justify-content:space-between;
padding:22px}
.territory-cover:after{
content:'';
position:absolute;
inset:0;
background:repeating-linear-gradient(0deg,transparent,transparent 19px,#f1174212 20px),repeating-linear-gradient(90deg,transparent,transparent 19px,#f1174212 20px)}
.territory-cover>.class-badge{
width:51px;
height:51px;
font-size:30px;
z-index:1}
.territory-cover .coordinate{
font-size:9px;
letter-spacing:1.5px;
color:#8d7780;
writing-mode:vertical-rl;
z-index:1}
.class-badge{
display:inline-grid;
place-items:center;
width:30px;
height:30px;
border:1px solid var(--class-color);
color:var(--class-color);
background:color-mix(in srgb,var(--class-color) 8%,transparent);
border-radius:6px;
font-family:Consolas,monospace;
font-size:15px;
font-weight:700;
flex-shrink:0}
.selected-content{
padding:20px}
.selected-content>.eyebrow{
color:var(--muted);
font-size:8px;
letter-spacing:1.7px}
.selected-content h2{
font-size:21px;
margin:7px 0 14px;
letter-spacing:-.4px}
.status-chip{
border:1px solid #3a3d49;
border-radius:4px;
color:#a0a5b1;
background:#171922;
padding:4px 8px;
font-size:9px;
display:inline-flex;
align-items:center;
gap:5px}
.status-chip.active{
border-color:#5e7c65;
color:var(--accent);
background:#17231b}
.status-chip.attack{
border-color:#76503b;
color:var(--gold);
background:#30251a}
.details{
margin:22px 0 18px}
.details>div{
display:flex;
justify-content:space-between;
gap:12px;
font-size:11px;
padding:11px 0;
border-bottom:1px solid #292c35}
.details dt{
color:var(--muted)}
.details dd{
margin:0;
font-weight:500;
text-align:right;
max-width:65%}
.selected-content .helper{
font-size:10px;
line-height:1.6;
color:var(--muted);
margin:11px 0 0}
.selected-content>.button{
margin-top:4px}
.below-map{
display:grid;
grid-template-columns:1fr 1fr;
gap:20px;
margin-top:21px}
.empty{
padding:30px 22px;
text-align:center;
display:grid;
justify-items:center;
gap:10px;
color:var(--muted);
font-size:11px;
line-height:1.7}
.empty>.empty-icon{
font-size:24px;
line-height:1.2;
color:#807680;
margin-bottom:1px}
.empty h3{
font-size:13px;
color:#d9dce5}
.empty p{
max-width:380px}
.panel-body{
padding:22px}
.notice{
padding:14px 17px;
background:#302719;
border:1px solid #54452b;
border-radius:5px;
color:#d4bb8e;
font-size:12px;
line-height:1.7;
margin:18px 0}
.notice.info{
color:#b3b5c3;
background:#1c1119;
border-color:#59303f}
.grid{
display:grid;
grid-template-columns:repeat(3,minmax(0,1fr));
gap:18px}
.card{
border:1px solid var(--line);
border-radius:6px;
padding:22px;
background:#0b0d11;
min-width:0}
.card h2{
margin:13px 0 8px;
font-size:21px;
overflow-wrap:anywhere}
.card p{
color:var(--muted);
font-size:12px;
line-height:1.8;
white-space:pre-wrap;
overflow-wrap:anywhere}
.card .button{
margin-top:18px}
.team-emblem{
width:48px;
height:48px;
display:grid;
place-items:center;
border:1px solid var(--team-color,var(--accent));
color:var(--team-color,var(--accent));
border-radius:8px;
background:#171019;
font-weight:700;
font-size:14px}
.card-stats{
display:flex;
gap:25px;
margin-top:22px;
border-top:1px solid var(--line);
padding-top:15px}
.card-stats span{
font-size:18px;
font-weight:600}
.card-stats small{
font-size:9px;
display:block;
color:var(--muted);
font-weight:400;
margin-top:4px}
.toolbar{
display:flex;
justify-content:space-between;
align-items:center;
gap:15px;
margin-bottom:23px}
.toolbar input{
width:min(100%,340px)}
.table-scroll{
overflow:auto}
table{
width:100%;
border-collapse:collapse;
text-align:left;
font-size:12px}
th{
color:var(--muted);
font-size:9px;
font-weight:500;
letter-spacing:1px;
padding:14px 18px;
background:#11131a}
td{
padding:17px 18px;
border-top:1px solid var(--line)}
td strong{
font-weight:500}
td .class-badge{
margin-right:9px;
width:25px;
height:25px;
font-size:12px}
.table-action{
border:0;
background:none;
color:var(--accent);
padding:3px 0;
text-align:left;
font:inherit;
cursor:pointer}
.table-action:hover{
text-decoration:underline}
.battle-row{
display:flex;
align-items:center;
gap:16px;
padding:17px 19px;
border-top:1px solid var(--line)}
.battle-row:first-child{
border-top:0}
.battle-row .battle-info{
flex:1;
min-width:0}
.battle-row h3{
font-size:13px}
.battle-row p{
font-size:11px;
color:var(--muted);
margin-top:4px}
.battle-time{
font-size:10px;
color:var(--muted);
text-align:right}
.battle-row .versus{
color:var(--gold);
margin:0 6px}
.battle-row .result{
color:var(--accent)}
.avatar{
display:grid;
place-items:center;
width:47px;
height:47px;
border:1px solid #5c3443;
border-radius:50%;
background:#24101a;
color:var(--accent);
font-weight:600;
overflow:hidden}
.avatar img{
width:100%;
height:100%;
object-fit:cover}
.player-header{
display:flex;
gap:15px;
align-items:center;
margin-bottom:20px}
.player-header h2{
margin:0;
font-size:18px}
.player-header p{
font-size:10px}
.roster{
display:grid;
gap:10px;
margin-top:20px}
.roster-row{
display:flex;
align-items:center;
gap:13px;
padding:12px;
background:#090a0f;
border:1px solid var(--line);
border-radius:5px}
.roster-row .avatar{
width:35px;
height:35px;
font-size:12px}
.roster-row>div:nth-child(2){
flex:1}
.roster-row small{
font-size:9px;
color:var(--muted);
display:block}
.roster-row .button{
margin:0;
font-size:10px;
min-height:31px}
.rule-summary{
line-height:1.9;
font-size:12px;
color:var(--muted);
margin-top:16px}
.rule-summary strong{
color:var(--text);
font-weight:500}
.rules-table input{
width:100%;
min-width:64px;
padding:8px}
.rules-table th,.rules-table td{
padding:10px}
.form-grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:15px}
form{
display:grid;
gap:17px}
form label{
display:grid;
gap:7px;
color:#c3c6d1;
font-size:11px}
form input,form textarea,form select{
width:100%;
font-size:13px}
form textarea{
min-height:95px;
resize:vertical}
.checkbox{
display:flex!important;
align-items:center;
gap:10px!important;
line-height:1.5}
.checkbox input{
width:auto}
.form-actions{
display:flex;
gap:10px;
justify-content:flex-end;
flex-wrap:wrap}
.form-error{
padding:12px;
border:1px solid #6a3c3c;
border-radius:4px;
background:#2d1b1e;
color:#ffafaf;
font-size:12px}
.form-error:empty{
display:none}
.form-note{
font-size:11px;
color:var(--muted);
line-height:1.7}
.admin-actions{
display:flex;
gap:10px;
flex-wrap:wrap;
margin-top:20px}
.admin-grid{
display:grid;
grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);
gap:22px}
.prewrap{
white-space:pre-wrap;
overflow-wrap:anywhere}
.loading{
padding:80px 20px;
text-align:center;
color:var(--accent)}
.skip-link{
position:fixed;
top:0;
left:10px;
transform:translateY(-150%);
z-index:100;
background:var(--accent);
color:#ffffff;
padding:12px}
.skip-link:focus{
transform:translateY(0)}
dialog{
width:min(620px,calc(100vw - 32px));
max-height:90vh;
padding:26px;
border:1px solid #62404f;
border-radius:9px;
background:#111219;
color:var(--text);
box-shadow:0 25px 100px #0009}
dialog::backdrop{
background:#020708bc;
backdrop-filter:blur(5px)}
.dialog-head{
display:flex;
justify-content:space-between;
align-items:center;
margin-bottom:20px}
#dialog-title{
font-size:25px;
margin:0 0 23px}
#dialog-body>p{
margin-bottom:20px;
color:var(--muted);
font-size:13px}
#toast{
position:fixed;
bottom:24px;
right:24px;
max-width:calc(100vw - 48px);
padding:15px 22px;
background:#1b2a21;
color:#b3e7c7;
border:1px solid #557e64;
border-radius:6px;
z-index:20;
box-shadow:0 10px 40px #0005;
font-size:12px}
#toast.error{
background:#3c2025;
color:#ffb6b6;
border-color:#8c4e4e}
.list-toggle{
padding:0;
border:0;
background:none;
color:var(--accent);
font-size:10px}
.territory-list{
margin-top:18px}
.small-link{
font-size:10px;
color:var(--accent)}
.text-right{
text-align:right}
.mt{
margin-top:20px}
.end-marker{
margin-top:25px;
display:flex;
justify-content:space-between;
color:#626877;
font-family:Consolas,monospace;
font-size:9px;
letter-spacing:1px}

@media(min-width:1600px){
main{
max-width:1650px;
padding:42px 45px}
.workspace{
grid-template-columns:minmax(0,1fr) 310px}
.map-viewport{
max-height:70vh}
.sidebar{
padding-top:38px}
}

@media(max-width:1250px){
.workspace{
grid-template-columns:minmax(0,1fr) 250px}
main{
padding:28px 24px}
.app-shell{
grid-template-columns:180px minmax(0,1fr)}
.stat{
padding:16px 14px;
gap:11px}
.stat strong{
font-size:22px}
.stat-icon{
width:29px;
height:29px}
.selected-content{
padding:17px}
.selected-content h2{
font-size:19px}
.grid{
grid-template-columns:repeat(2,minmax(0,1fr))}
.header-label{
display:none}
.header-divider{
display:none}
.brand{
min-width:210px}
}

@media(max-width:1050px){
.app-shell{
grid-template-columns:152px minmax(0,1fr)}
.sidebar{
padding:24px 9px}
.sidebar-caption{
font-size:8px;
padding-left:10px}
.sidebar-caption span{
display:none}
nav a{
padding:10px 9px;
font-size:11px;
gap:9px}
nav a .nav-index{
display:none}
.workspace{
grid-template-columns:minmax(0,1fr)}
.selected-panel{
display:grid;
grid-template-columns:110px minmax(0,1fr)}
.selected-panel .territory-cover{
height:100%;
border-right:1px solid var(--line);
border-bottom:0;
padding:15px;
justify-content:center}
.territory-cover .coordinate{
display:none}
.selected-content{
display:grid;
grid-template-columns:1fr 1fr;
column-gap:22px}
.selected-content>.eyebrow,.selected-content>h2,.selected-content>.status-chip{
grid-column:1}
.selected-content>.status-chip{
width:max-content}
.selected-content>.details{
grid-column:2;
grid-row:1/5;
margin:0}
.selected-content>.button{
grid-column:1}
.selected-content>.helper{
grid-column:1/-1}
.below-map{
margin-top:18px}
.stats{
gap:0}
.stat-icon{
display:none}
.stat{
padding:15px}
.map-viewport{
max-height:none}
.admin-grid{
grid-template-columns:1fr}
.page-top{
align-items:flex-start}
.header-actions{
gap:20px}
.site-header{
padding:0 23px;
height:80px}
.app-shell{
min-height:calc(100vh - 80px)}
}

@media(max-width:720px){
.site-header{
height:72px;
padding:0 16px}
.brand{
min-width:0;
gap:8px}
.brand>img{
width:33px;
height:42px}
.brand>span{
font-size:14px;
letter-spacing:1px}
.brand small{
font-size:6px;
letter-spacing:.9px;
margin-top:6px}
.ecosystem{
display:none}
.header-actions{
gap:0}
.header-actions .button{
font-size:10px;
padding:8px 10px}
.app-shell{
display:block}
.sidebar{
border-right:0;
border-bottom:1px solid var(--line);
padding:7px 10px;
display:block;
overflow:auto}
.sidebar-caption,.sidebar-bottom{
display:none}
nav{
display:flex;
width:max-content;
gap:3px}
nav a{
padding:8px 12px;
white-space:nowrap;
min-height:37px;
font-size:10px}
nav a .nav-icon{
font-size:15px;
width:15px}
main{
padding:25px 16px}
.page-top{
margin-bottom:22px;
gap:15px}
.page-top .eyebrow{
font-size:8px;
letter-spacing:1.5px;
margin-bottom:11px}
h1{
font-size:27px;
letter-spacing:-.9px}
.page-description{
font-size:11px;
line-height:1.6}
.season-picker{
min-width:112px;
max-width:135px}
.season-picker select{
font-size:10px;
padding:8px}
.season-picker>span{
font-size:7px}
.stats{
margin-bottom:18px}
.stat{
padding:13px 10px}
.stat strong{
font-size:22px}
.stat small{
font-size:8px}
.stat em{
display:none}
.panel-head{
padding:14px}
.panel-head h2{
font-size:12px}
.panel-head small{
font-size:8px}
.map-toolbar{
padding:11px;
gap:5px}
.filter-button{
padding:6px 8px;
min-width:27px;
font-size:9px}
.map-toolbar select{
max-width:118px;
font-size:9px;
padding:6px}
.map-viewport{
min-height:220px;
display:flex;
align-items:center}
.map-canvas{
min-width:540px}
.map-bottom{
padding:11px;
font-size:8px}
.map-legend{
gap:12px;
padding:12px 13px;
font-size:8px}
.below-map{
grid-template-columns:1fr;
gap:16px}
.selected-panel{
grid-template-columns:75px 1fr}
.selected-panel .territory-cover{
padding:10px}
.territory-cover>.class-badge{
width:40px;
height:40px;
font-size:25px}
.selected-content{
padding:15px;
column-gap:15px}
.selected-content h2{
font-size:18px}
.details>div{
font-size:9px;
padding:9px 0;
gap:6px}
.selected-content>.button{
font-size:10px;
min-height:35px}
.selected-content>.helper{
font-size:9px}
.grid{
grid-template-columns:1fr}
.toolbar{
align-items:stretch}
.toolbar input{
max-width:60%;
font-size:12px}
.toolbar .button{
font-size:10px;
padding:9px 12px}
.card{
padding:20px}
.battle-row{
gap:11px;
padding:14px;
flex-wrap:wrap}
.battle-time{
font-size:9px}
.form-grid{
grid-template-columns:1fr}
.end-marker{
font-size:7px}
.table-scroll th,.table-scroll td{
padding:12px;
white-space:nowrap}
.rules-table th,.rules-table td{
white-space:normal}
.roster-row{
flex-wrap:wrap}
.roster-row .button{
min-height:29px;
padding:5px 9px}
.page-top .button{
font-size:10px;
padding:8px 10px}
.notice{
font-size:11px}
.dialog-head{
margin-bottom:15px}
dialog{
padding:20px}
#dialog-title{
font-size:23px}
.rule-summary{
font-size:11px}
}

@media(max-width:720px){
.workspace{
display:flex;
flex-direction:column;
gap:16px}
.workspace>div{
display:contents}
.workspace>div>.panel{
order:0;
width:100%}
.workspace>div>.map-help{
order:1;
margin:0}
.workspace>#selected-territory{
order:2;
width:100%}
.workspace>div>.below-map{
order:3;
width:100%;
margin:0}
.workspace>div>.mt{
order:4}
.workspace>div>.territory-list{
order:5;
width:100%}
.selected-panel{
grid-template-columns:65px minmax(0,1fr)}
.selected-content{
display:block}
.selected-content h2{
font-size:21px;
margin:8px 0 13px}
.selected-content>.details{
margin:16px 0}
.details>div{
font-size:11px;
padding:11px 0}
.selected-content>.button{
min-height:42px;
font-size:11px}
.selected-content>.helper{
font-size:10px}
}

@media(prefers-reduced-motion:reduce){
*,*:before,*:after{
transition:none!important;
scroll-behavior:auto!important}
}