:root{
  --bg:#12100d; --panel:#1c1813; --panel2:#272117; --line:#4d412f;
  --text:#f0e5cf; --muted:#aa9c84; --gold:#d7b66f;
  --mine:#4d7657; --enemy:#88483e; --other:#59677c; --neutral:#8a806b; --water:#334d63;
}
*{box-sizing:border-box}
html,body{margin:0;width:100%;height:100%;background:var(--bg);color:var(--text);font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif}
button{font:inherit}
#app{height:100%;display:flex;flex-direction:column;overflow:hidden}
header{
  height:58px;display:flex;align-items:center;gap:12px;padding:0 16px;
  border-bottom:1px solid var(--line);background:#17130f;flex:0 0 auto
}
.brand{font-weight:900;letter-spacing:.08em;color:var(--gold)}
.season{font-size:12px;border:1px solid var(--line);padding:4px 8px;border-radius:999px;color:var(--muted)}
.spacer{flex:1}
.user{font-size:13px;color:var(--muted)}
.navbtn{
  background:transparent;color:var(--text);border:1px solid var(--line);padding:8px 11px;border-radius:8px;cursor:pointer
}
.navbtn.active{background:var(--gold);color:#1b160f;border-color:var(--gold);font-weight:800}
main{flex:1;min-height:0;position:relative}
.screen{position:absolute;inset:0;display:none}
.screen.active{display:block}

/* MAP */
#map{position:absolute;inset:0;background:#23211c}
#map .leaflet-tile-pane{
  filter:grayscale(.45) sepia(.18) brightness(.58) blur(1.2px);
}
#map .leaflet-control-attribution{font-size:9px;opacity:.55}
.mapShade{position:absolute;inset:0;pointer-events:none;z-index:400;background:rgba(17,14,10,.14)}
.mapPanel{
  position:absolute;z-index:500;left:14px;top:14px;width:min(350px,calc(100vw - 28px));
  background:rgba(24,20,15,.94);border:1px solid var(--line);border-radius:12px;padding:13px;
  box-shadow:0 10px 30px rgba(0,0,0,.3)
}
.mapPanel h2{font-size:15px;margin:0 0 7px}
.small{font-size:12px;color:var(--muted);line-height:1.45}
.legend{display:flex;gap:8px;flex-wrap:wrap;margin-top:9px}
.legend span{font-size:11px;color:var(--muted);display:flex;align-items:center;gap:5px}
.dot{width:10px;height:10px;border-radius:2px;display:inline-block}
.gpsBtn{
  width:100%;margin-top:10px;border:0;border-radius:8px;background:var(--gold);color:#1e180f;
  font-weight:900;padding:10px;cursor:pointer
}
#hexInfo{
  position:absolute;z-index:500;right:14px;bottom:14px;width:min(330px,calc(100vw - 28px));
  background:rgba(24,20,15,.95);border:1px solid var(--line);border-radius:12px;padding:13px;display:none
}
.infoRow{display:flex;justify-content:space-between;gap:12px;margin:5px 0;font-size:12px}
.infoRow b{color:var(--text)}
.infoRow span{color:var(--muted)}
.attackBtn{
  width:100%;margin-top:9px;border:0;border-radius:8px;background:#9a4f43;color:white;
  padding:10px;font-weight:900;cursor:pointer
}
.attackBtn:disabled{opacity:.35;cursor:not-allowed}

/* BATTLE */
#battleScreen{background:radial-gradient(circle at 50% 38%,#302919 0,#17130e 63%,#0e0c09 100%);overflow:auto}
.battleWrap{max-width:1180px;margin:0 auto;padding:16px;display:grid;grid-template-columns:360px 1fr;gap:14px;min-height:100%}
.panel{background:rgba(28,24,18,.94);border:1px solid var(--line);border-radius:12px;padding:14px}
.panel h2,.panel h3{margin:0 0 10px}
#battleCanvas{width:100%;height:auto;aspect-ratio:16/10;border:1px solid var(--line);border-radius:12px;background:#5a6040;display:block}
.wave{
  border:1px solid var(--line);border-radius:10px;padding:10px;margin:8px 0;background:#211c15
}
.waveHead{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.waveHead strong{color:var(--gold)}
.unitGrid{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.unitBtn{
  border:1px solid var(--line);background:#2b241b;color:var(--text);padding:8px;border-radius:7px;text-align:left;cursor:pointer
}
.unitBtn.selected{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
.unitBtn small{display:block;color:var(--muted)}
.direction{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-top:8px}
.dirBtn{background:#29231b;color:var(--muted);border:1px solid var(--line);padding:7px;border-radius:6px;cursor:pointer}
.dirBtn.selected{background:var(--gold);color:#1b160e;border-color:var(--gold);font-weight:900}
.resourceBar{display:flex;justify-content:space-between;align-items:center;padding:8px 0;border-bottom:1px solid var(--line);margin-bottom:8px}
#startBtn{
  width:100%;border:0;background:var(--gold);color:#19140e;font-weight:950;padding:12px;border-radius:8px;cursor:pointer;margin-top:10px
}
#startBtn:disabled{opacity:.35}
#timeline{height:12px;background:#282218;border-radius:20px;overflow:hidden;margin:10px 0}
#timelineFill{height:100%;width:0;background:var(--gold)}
.statusLine{display:flex;justify-content:space-between;font-size:12px;color:var(--muted)}
.defenseCard{padding:10px;border:1px dashed var(--line);border-radius:8px;color:var(--muted);font-size:12px;line-height:1.45}
.result{
  margin-top:10px;padding:12px;border:1px solid var(--line);border-radius:9px;display:none
}
.result.win{border-color:#617f5f;background:#213224}
.result.loss{border-color:#8f5047;background:#38201e}
.rules{font-size:12px;color:var(--muted);line-height:1.55;margin-top:8px}
.badge{display:inline-block;padding:3px 7px;border-radius:999px;border:1px solid var(--line);font-size:10px;color:var(--muted)}
@media (max-width:850px){
  .battleWrap{grid-template-columns:1fr}
  header{padding:0 8px;gap:6px}.season{display:none}.brand{font-size:13px}
  .navbtn{padding:7px 8px;font-size:12px}
}

/* Mobile layout: safe areas, thumb-sized controls and a visible battlefield. */
[hidden]{display:none!important}
body{overscroll-behavior:none}
#app{height:100vh;height:100dvh}
header{height:auto;min-height:60px;padding:8px max(10px,env(safe-area-inset-right)) 8px max(10px,env(safe-area-inset-left));padding-top:max(8px,env(safe-area-inset-top))}
button{min-height:44px;touch-action:manipulation}
button:focus-visible{outline:3px solid #f6d98f;outline-offset:3px}
button:disabled{cursor:not-allowed;opacity:.45}
.user{display:none}
#locationGate{position:fixed;inset:0;z-index:2000;display:grid;place-items:center;padding:24px;background:radial-gradient(ellipse at 20% 0%,#443726,#12100d 75%);overflow:auto}
.gateCard{width:100%;max-width:420px;border:1px solid var(--line);border-radius:20px;padding:28px 24px;background:#1c1813;box-shadow:0 24px 80px #0005}
h1{font-size:clamp(25px,6vw,34px);line-height:1.35;color:var(--gold);letter-spacing:-.04em}
.gateCard p{font-size:14px;line-height:1.65;color:var(--muted)}
.gateCard #gateStatus{color:var(--text);min-height:46px}
.gateCard .small{font-size:11px}
.gpsBtn{min-height:48px}
.mapPanel{top:10px;left:10px;width:calc(100% - 20px);padding:10px 12px;max-width:350px}
.mapPanel h2{font-size:13px;margin-bottom:4px}
.mapPanel .small{font-size:11px}
.mapPanel .gpsBtn{margin-top:6px}
.legend{gap:8px;margin-top:6px}
#hexInfo{left:10px;right:10px;bottom:calc(24px + env(safe-area-inset-bottom));width:auto;padding:12px;max-width:350px}
.closeBtn{position:absolute;right:2px;top:0;background:none;border:0;color:var(--text);min-width:44px;font-size:24px}
#hexInfo .infoRow:first-of-type{padding-right:32px}
#infoId{overflow-wrap:anywhere}
#map .leaflet-control-attribution{opacity:1;color:#222;font-size:10px;background:#ffffffdf}
#map .leaflet-control-zoom{margin-bottom:260px}
#map .leaflet-control-zoom a{width:44px;height:44px;line-height:44px}
.battleWrap{display:flex;flex-direction:column;padding:10px 10px calc(16px + env(safe-area-inset-bottom));gap:10px}
.arena{order:0;position:sticky;top:0;z-index:2;background:#17130e;padding-top:2px}
.planner{order:1;padding:12px}
#battleCanvas{max-height:29dvh;width:100%;object-fit:contain}
.arena>.panel{margin-top:6px!important;padding:10px}
.wave{padding:10px}
.unitBtn{min-height:48px;font-size:13px}
.dirBtn{min-height:44px}
#battleScreen.running .arena{position:static}
#battleScreen.running .planner{opacity:.7}
.statusLine{gap:8px;align-items:center}
#clock{white-space:nowrap;color:var(--gold)}
@media(min-width:851px){
.user{display:block}.mapPanel{left:14px;top:14px}#hexInfo{left:auto;right:14px;width:330px}
.battleWrap{display:grid;grid-template-columns:360px 1fr;padding:16px}.planner{order:0}.arena{order:1;position:static}#battleCanvas{max-height:none}
}
@media(max-height:600px){.mapPanel> .small{display:none}.mapPanel .legend{display:none}#hexInfo{bottom:20px}.arena{position:static}}