:root{
  --bg:#090d16;
  --panel:rgba(19,24,39,.92);
  --panel2:rgba(12,16,28,.96);
  --gold:#e7c873;
  --text:#edf3ff;
  --muted:#9fb0cf;
  --danger:#d44f5f;
  --ok:#60d394;
}
*{box-sizing:border-box}
body{
  margin:0;
  background:
    radial-gradient(circle at 20% 10%, rgba(76,124,255,.20), transparent 30%),
    radial-gradient(circle at 90% 70%, rgba(183,37,53,.22), transparent 30%),
    linear-gradient(135deg,#080b12,#11172a 55%,#0b0e18);
  color:var(--text);
  font-family: "Segoe UI", "Yu Gothic UI", "Meiryo", sans-serif;
  overflow:hidden;
}
button{
  font-family:inherit;
  cursor:pointer;
  color:var(--text);
  border:1px solid rgba(255,255,255,.18);
  background:linear-gradient(180deg,rgba(69,82,126,.95),rgba(31,39,66,.95));
  border-radius:12px;
  padding:10px 14px;
  box-shadow:0 8px 18px rgba(0,0,0,.25);
}
button:hover{filter:brightness(1.18)}
button:disabled{opacity:.45;cursor:not-allowed}
#app{width:100vw;height:100vh;position:relative}
.screen{position:absolute;inset:0;padding:26px}
.title-screen{
  display:flex;align-items:center;justify-content:center;text-align:center;
}
.main-title-screen{
  position:relative;
  overflow:hidden;
}
.title-cine-bg{
  position:absolute;
  inset:-8%;
  background-image:url('assets/ui/world_map_full.webp');
  background-size:cover;
  background-position:center;
  filter:saturate(.55) brightness(.5) contrast(1.05);
  animation:titleMapDrift 46s ease-in-out infinite alternate;
  z-index:0;
}
.title-cine-vignette{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 42%, transparent 28%, rgba(6,8,14,.72) 78%),
    linear-gradient(180deg, rgba(6,8,14,.55) 0%, rgba(6,8,14,.35) 40%, rgba(6,8,14,.82) 100%);
  z-index:0;
}
@keyframes titleMapDrift{
  0%{transform:scale(1.05) translate(0,0)}
  50%{transform:scale(1.14) translate(-1.6%,-1.2%)}
  100%{transform:scale(1.05) translate(1.6%,1.2%)}
}
.title-card{
  position:relative;
  z-index:1;
  width:min(760px,92vw);
  padding:46px;
  background:linear-gradient(180deg,rgba(20,26,44,.92),rgba(9,12,22,.96));
  border:1px solid rgba(231,200,115,.35);
  border-radius:28px;
  box-shadow:0 30px 90px rgba(0,0,0,.48);
}
.title-crest-glow{
  position:absolute;
  left:50%;
  top:-58px;
  width:130px;
  height:130px;
  transform:translateX(-50%);
  background-image:url('assets/ui/icon_dragon.png');
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  opacity:.5;
  filter:drop-shadow(0 0 20px rgba(255,180,90,.5)) drop-shadow(0 0 40px rgba(255,70,60,.3));
  animation:titleCrestBreathe 6s ease-in-out infinite;
  pointer-events:none;
}
@keyframes titleCrestBreathe{
  0%,100%{opacity:.38; transform:translateX(-50%) scale(1)}
  50%{opacity:.62; transform:translateX(-50%) scale(1.06)}
}
.logo-title{
  font-size:58px;font-weight:800;letter-spacing:1px;color:#fff;
  text-shadow:0 0 30px rgba(231,200,115,.45);
}
.logo-sub{margin-top:8px;color:var(--gold);font-size:24px}
.title-menu{display:grid;gap:14px;margin:36px auto 0;max-width:280px}
.big-btn{font-size:20px;font-weight:700;padding:16px 18px}
.small-note{color:var(--muted);font-size:14px;margin-top:24px;line-height:1.7}
.header{
  height:74px;border-radius:20px;background:var(--panel);
  border:1px solid rgba(255,255,255,.10);
  display:flex;align-items:center;justify-content:space-between;padding:0 22px;
  box-shadow:0 16px 44px rgba(0,0,0,.28);
}
.header h1{font-size:26px;margin:0}
.stat-row{display:flex;gap:12px;flex-wrap:wrap;align-items:center}
.stat{padding:8px 10px;border-radius:10px;background:rgba(255,255,255,.08);color:#dbe7ff;font-size:14px}
.main-grid{
  height:calc(100vh - 126px);
  margin-top:18px;
  display:grid;
  grid-template-columns: 1.42fr .78fr;
  gap:18px;
}
.panel{
  background:var(--panel);
  border:1px solid rgba(255,255,255,.10);
  border-radius:20px;
  box-shadow:0 16px 44px rgba(0,0,0,.28);
  overflow:hidden;
}
.map-panel{position:relative;padding:18px}
.map{
  position:relative;
  height:calc(100% - 88px);
  min-height:430px;
  border-radius:18px;
  background:
    radial-gradient(circle at 38% 28%,rgba(98,133,201,.16),transparent 21%),
    radial-gradient(circle at 82% 63%,rgba(155,91,214,.18),transparent 20%),
    linear-gradient(135deg,rgba(21,33,58,.94),rgba(9,13,22,.96));
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
}
.map svg{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;opacity:.66}
.territory{
  position:absolute;transform:translate(-50%,-50%);
  min-width:94px;
  border-radius:14px;
  padding:8px 10px;
  border:2px solid rgba(255,255,255,.42);
  color:#fff;font-size:13px;font-weight:800;
  text-shadow:0 1px 3px rgba(0,0,0,.55);
  box-shadow:0 10px 24px rgba(0,0,0,.38);
}
.territory.selected{outline:3px solid var(--gold);box-shadow:0 0 0 6px rgba(231,200,115,.18),0 12px 28px rgba(0,0,0,.42)}
.commands{
  display:grid;
  grid-template-columns:repeat(10,1fr);
  gap:10px;
  margin-top:16px;
}
.commands button{padding:10px 6px;font-size:14px}
.side{
  display:grid;
  grid-template-rows:auto 1fr auto;
}
.leader-box{
  display:grid;
  grid-template-columns:116px 1fr;
  gap:14px;
  padding:18px;
  border-bottom:1px solid rgba(255,255,255,.10);
}
.face{
  width:116px;height:116px;object-fit:cover;border-radius:18px;
  border:1px solid rgba(255,255,255,.20);
  box-shadow:0 12px 28px rgba(0,0,0,.35);
}
.leader-name{font-size:24px;font-weight:800}
.faction-name{color:var(--gold);font-weight:700;margin-top:4px}
.desc{color:var(--muted);font-size:14px;line-height:1.6;margin-top:8px}
.info-box{padding:18px;overflow:auto}
.info-title{font-size:20px;font-weight:800;margin-bottom:10px}
.info-list{display:grid;gap:8px;font-size:14px}
.info-list div{display:flex;justify-content:space-between;background:rgba(255,255,255,.06);border-radius:10px;padding:8px 10px}
.log{
  padding:14px 18px;
  border-top:1px solid rgba(255,255,255,.10);
  color:#d8e2f7;
  min-height:78px;
  line-height:1.5;
  background:rgba(0,0,0,.16);
}
.faction-select{
  height:calc(100vh - 52px);
  display:grid;
  grid-template-columns: 450px 1fr;
  gap:24px;
}
.standing-wrap{
  position:relative;
  border-radius:28px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(0,0,0,.24));
}
.standing{width:100%;height:100%;object-fit:contain;object-position:bottom center;filter:drop-shadow(0 24px 30px rgba(0,0,0,.42))}
.select-info{padding:34px}
.select-info h2{font-size:48px;margin:0}
.select-info h3{font-size:28px;margin:8px 0;color:var(--gold)}
.select-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:18px}
.select-stat{background:rgba(255,255,255,.07);padding:12px;border-radius:14px}
.select-buttons{display:flex;gap:12px;margin-top:26px;flex-wrap:wrap}
.modal-back{
  position:absolute;inset:0;background:rgba(0,0,0,.64);
  display:flex;align-items:center;justify-content:center;z-index:20;
}
.modal{
  width:min(720px,92vw);
  background:var(--panel2);
  border:1px solid rgba(231,200,115,.25);
  border-radius:22px;
  padding:24px;
  box-shadow:0 26px 80px rgba(0,0,0,.55);
}
.modal h2{margin:0 0 14px}
.choice-list{display:grid;gap:10px;margin-top:14px}
.choice{
  display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;
  padding:12px;border-radius:14px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.10);
}
.choice-title{font-weight:800}
.choice-sub{font-size:13px;color:var(--muted);margin-top:3px}
.result-win{color:var(--ok)}
.result-lose{color:var(--danger)}
.footer-buttons{display:flex;gap:10px;margin-top:18px;justify-content:flex-end}
@media(max-width:980px){
  body{overflow:auto}
  .screen{position:relative;min-height:100vh}
  .main-grid{grid-template-columns:1fr;height:auto}
  .commands{grid-template-columns:repeat(3,1fr)}
  .faction-select{grid-template-columns:1fr;height:auto}
  .standing-wrap{height:540px}
}

.diplomacy-modal{width:min(980px,94vw);max-height:88vh;overflow:auto}
.diplomacy-choice{grid-template-columns:1fr auto}
.diplo-buttons{display:grid;grid-template-columns:repeat(4,105px);gap:8px}
.diplo-buttons button{font-size:13px;padding:8px 6px}
.diplo-buttons small{color:var(--muted)}
@media(max-width:980px){
  .diplo-buttons{grid-template-columns:repeat(2,1fr)}
  .diplomacy-choice{grid-template-columns:1fr}
}

.formation-choice{grid-template-columns:1fr auto}
.formation-buttons{display:grid;grid-template-columns:repeat(3,92px);gap:8px}
.formation-buttons button{font-size:13px;padding:9px 6px}
@media(max-width:980px){
  .formation-choice{grid-template-columns:1fr}
  .formation-buttons{grid-template-columns:repeat(3,1fr)}
}

.defense-modal{width:min(860px,94vw)}
.defense-battle-head{
  display:grid;
  grid-template-columns:1fr 90px 1fr;
  gap:14px;
  align-items:center;
  text-align:center;
  margin:12px 0 18px;
}
.defense-battle-head .face{
  width:96px;height:96px;
  margin:0 auto 8px;
}
.vs{
  font-size:34px;
  font-weight:900;
  color:var(--gold);
  text-shadow:0 0 24px rgba(231,200,115,.42);
}
@media(max-width:700px){
  .defense-battle-head{grid-template-columns:1fr}
  .vs{font-size:24px}
}

/* v1.4 result screen */
.result-screen{
  overflow:hidden;
  padding:0;
  background:#07101d;
}
.result-map-bg{
  position:absolute;
  inset:-4%;
  background:
    linear-gradient(90deg, rgba(4,8,15,.72), rgba(4,8,15,.12) 42%, rgba(4,8,15,.84)),
    url("assets/ui/world_map.svg") center/cover no-repeat;
  filter:saturate(1.12) contrast(1.08);
  transform:scale(1.03);
}
.result-vignette{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 30% 50%, rgba(231,200,115,.18), transparent 26%),
    radial-gradient(circle at 72% 50%, rgba(76,124,255,.15), transparent 34%),
    linear-gradient(180deg, rgba(3,6,12,.25), rgba(3,6,12,.70));
  pointer-events:none;
}
.result-layout{
  position:relative;
  z-index:2;
  height:100vh;
  display:grid;
  grid-template-columns:minmax(360px, 48vw) minmax(420px, 560px);
  align-items:center;
  justify-content:center;
  gap:22px;
  padding:26px 46px;
}
.result-character-wrap{
  height:calc(100vh - 52px);
  min-height:620px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  position:relative;
}
.result-character-wrap::after{
  content:"";
  position:absolute;
  left:18%;
  right:18%;
  bottom:4%;
  height:42px;
  background:radial-gradient(ellipse, rgba(0,0,0,.55), transparent 72%);
  filter:blur(6px);
}
.result-standing{
  position:relative;
  z-index:2;
  max-height:96%;
  max-width:100%;
  object-fit:contain;
  object-position:bottom center;
  filter:drop-shadow(0 30px 34px rgba(0,0,0,.58)) drop-shadow(0 0 24px rgba(231,200,115,.15));
}
.result-card{
  width:100%;
  padding:34px 38px;
  background:linear-gradient(180deg, rgba(13,18,32,.92), rgba(6,9,18,.96));
  border:1px solid rgba(231,200,115,.38);
  border-radius:28px;
  box-shadow:0 32px 90px rgba(0,0,0,.58);
  backdrop-filter:blur(4px);
}
.result-card .logo-title{
  font-size:52px;
  text-align:left;
}
.result-card .logo-sub{
  text-align:left;
  font-size:22px;
}
.result-badge{
  display:inline-block;
  color:#101522;
  background:linear-gradient(90deg,#e7c873,#fff1b9);
  font-weight:900;
  letter-spacing:2px;
  padding:6px 12px;
  border-radius:999px;
  margin-bottom:14px;
  box-shadow:0 8px 24px rgba(231,200,115,.28);
}
.result-leader{
  margin:24px 0 18px;
  padding:14px;
  display:grid;
  grid-template-columns:76px 1fr;
  gap:14px;
  align-items:center;
  border-radius:18px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.10);
}
.result-face{
  width:76px;
  height:76px;
  object-fit:cover;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.18);
}
.result-stats{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-top:14px;
}
.result-stats div{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.09);
  border-radius:14px;
  padding:12px;
  display:flex;
  justify-content:space-between;
  gap:12px;
}
.result-stats span{color:var(--muted)}
.result-stats b{color:#fff}
.result-menu{
  margin-top:24px;
  max-width:100%;
  grid-template-columns:repeat(2,1fr);
}
@media(max-width:980px){
  .result-layout{
    grid-template-columns:1fr;
    height:auto;
    min-height:100vh;
    padding:22px;
  }
  .result-character-wrap{
    height:56vh;
    min-height:420px;
    order:2;
  }
  .result-card{
    order:1;
  }
  .result-card .logo-title{
    font-size:40px;
  }
}

/* v1.5 world map implementation */
.map-panel{
  padding:14px;
}
.map{
  height:calc(100% - 88px);
  min-height:520px;
  background:
    linear-gradient(180deg, rgba(4,8,14,.10), rgba(4,8,14,.22)),
    url("assets/ui/world_map_full.webp") center/cover no-repeat !important;
  border:1px solid rgba(231,200,115,.28);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), inset 0 -80px 130px rgba(0,0,0,.18);
}
.map svg{
  opacity:.36;
  mix-blend-mode:screen;
}
.map svg line{
  stroke:rgba(255,245,190,.58);
  stroke-width:2.2;
  stroke-dasharray:7 6;
  filter:drop-shadow(0 1px 3px rgba(0,0,0,.65));
}
.map-node{
  min-width:0 !important;
  width:82px;
  height:82px;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  overflow:visible;
  transform:translate(-50%,-58%);
}
.node-icon{
  width:76px;
  height:58px;
  object-fit:contain;
  display:block;
  margin:0 auto;
  filter:
    drop-shadow(0 7px 8px rgba(0,0,0,.62))
    drop-shadow(0 0 8px color-mix(in srgb, var(--faction), transparent 25%));
  transition:.12s transform ease,.12s filter ease;
}
.node-label{
  display:block;
  min-width:86px;
  transform:translateX(-2px);
  margin-top:-4px;
  padding:4px 7px;
  border-radius:999px;
  color:#fff;
  font-size:11px;
  font-weight:900;
  line-height:1.1;
  background:linear-gradient(180deg, color-mix(in srgb, var(--faction), #000 15%), rgba(0,0,0,.74));
  border:1px solid rgba(255,255,255,.32);
  text-shadow:0 1px 2px rgba(0,0,0,.8);
  box-shadow:0 8px 16px rgba(0,0,0,.32);
  white-space:nowrap;
}
.map-node:hover .node-icon{
  transform:translateY(-4px) scale(1.10);
  filter:
    drop-shadow(0 10px 10px rgba(0,0,0,.68))
    drop-shadow(0 0 12px color-mix(in srgb, var(--faction), white 20%));
}
.map-node.selected .node-icon{
  transform:scale(1.16);
  filter:
    drop-shadow(0 10px 10px rgba(0,0,0,.7))
    drop-shadow(0 0 18px #ffe38a)
    drop-shadow(0 0 10px var(--faction));
}
.map-node.selected .node-label{
  outline:2px solid var(--gold);
  box-shadow:0 0 0 5px rgba(231,200,115,.18),0 8px 16px rgba(0,0,0,.35);
}
.map-note{
  color:#f1dda0;
  font-size:13px;
  font-weight:800;
  background:rgba(0,0,0,.24);
  border:1px solid rgba(231,200,115,.22);
  border-radius:999px;
  padding:7px 10px;
}
.info-list div img.terrain-preview{
  width:62px;
  height:46px;
  object-fit:contain;
}
@media(max-width:980px){
  .map{min-height:480px}
  .map-node{width:70px;height:70px}
  .node-icon{width:64px;height:50px}
  .node-label{font-size:10px;min-width:76px}
}

/* v1.6 dynamic faction flags */
.map-node{
  position:absolute;
}
.node-owner-glow{
  position:absolute;
  left:50%;
  top:50%;
  width:74px;
  height:52px;
  transform:translate(-50%,-45%);
  border-radius:50%;
  background:radial-gradient(ellipse, color-mix(in srgb, var(--faction), transparent 52%), transparent 68%);
  filter:blur(8px);
  opacity:.72;
  pointer-events:none;
  z-index:0;
}
.node-icon{
  position:relative;
  z-index:2;
}
.node-label{
  position:relative;
  z-index:5;
}
.node-flag-pole{
  position:absolute;
  left:56%;
  top:-18px;
  width:3px;
  height:36px;
  background:linear-gradient(180deg,#f8e6a8,#866b32);
  border-radius:999px;
  box-shadow:0 2px 6px rgba(0,0,0,.55);
  z-index:7;
  transform:rotate(3deg);
  pointer-events:none;
}
.node-flag{
  position:absolute;
  left:58%;
  top:-19px;
  width:28px;
  height:18px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.28), transparent 45%),
    linear-gradient(180deg, color-mix(in srgb, var(--faction), white 12%), color-mix(in srgb, var(--faction), black 18%));
  clip-path:polygon(0 0, 100% 0, 82% 50%, 100% 100%, 0 100%);
  border:1px solid rgba(255,255,255,.62);
  box-shadow:
    0 3px 8px rgba(0,0,0,.50),
    0 0 10px color-mix(in srgb, var(--faction), transparent 25%);
  z-index:8;
  pointer-events:none;
}
.node-flag::after{
  content:"";
  position:absolute;
  inset:4px 7px 4px 5px;
  border-top:1px solid rgba(255,255,255,.50);
  border-bottom:1px solid rgba(0,0,0,.18);
  opacity:.65;
}
.map-node:hover .node-flag{
  transform:translateY(-3px) scale(1.08);
  box-shadow:
    0 5px 12px rgba(0,0,0,.55),
    0 0 14px color-mix(in srgb, var(--faction), white 12%);
}
.map-node.selected .node-flag{
  transform:scale(1.16);
  box-shadow:
    0 5px 12px rgba(0,0,0,.55),
    0 0 18px #ffe38a,
    0 0 14px var(--faction);
}
.map-node.selected .node-flag-pole{
  box-shadow:0 0 10px #ffe38a,0 2px 6px rgba(0,0,0,.55);
}

/* v1.7 transparent icon tuning */
.map-node{
  width:90px;
  height:90px;
  transform:translate(-50%,-56%);
}
.node-owner-glow{
  width:84px;
  height:58px;
  transform:translate(-50%,-44%);
  opacity:.62;
}
.node-icon{
  width:84px;
  height:64px;
  margin-top:6px;
  filter:
    drop-shadow(0 8px 10px rgba(0,0,0,.62))
    drop-shadow(0 0 10px color-mix(in srgb, var(--faction), transparent 28%));
}
.node-label{
  margin-top:-1px;
  min-width:82px;
  max-width:110px;
  padding:4px 8px;
  font-size:10.5px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--faction), #fff 6%), color-mix(in srgb, var(--faction), #000 22%));
}
.map-node:hover .node-icon{
  transform:translateY(-4px) scale(1.08);
}
.map-node.selected .node-icon{
  transform:scale(1.15);
}
@media(max-width:980px){
  .map-node{width:76px;height:76px}
  .node-icon{width:72px;height:56px}
}

/* v1.8 war map target selection */
.war-mode-bar{
  margin-top:12px;
  margin-bottom:-2px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 12px;
  border-radius:14px;
  background:linear-gradient(90deg, rgba(175,44,60,.92), rgba(33,39,66,.88));
  border:1px solid rgba(255,210,130,.32);
  box-shadow:0 10px 24px rgba(0,0,0,.28);
}
.war-mode-bar b{
  color:#ffe38a;
}
.war-mode-bar span{
  font-size:13px;
  color:#fff;
}
.war-mode-bar button{
  padding:7px 10px;
  font-size:13px;
}
.map-node.war-disabled{
  opacity:.42;
  filter:grayscale(.45);
}
.map-node.war-source .node-icon{
  filter:
    drop-shadow(0 8px 10px rgba(0,0,0,.62))
    drop-shadow(0 0 14px #66d9ff)
    drop-shadow(0 0 10px var(--faction));
}
.map-node.war-target{
  animation:warTargetPulse 1.05s infinite ease-in-out;
  z-index:20;
}
.map-node.war-target .node-icon{
  transform:scale(1.12);
  filter:
    drop-shadow(0 9px 12px rgba(0,0,0,.72))
    drop-shadow(0 0 18px #ff4d5d)
    drop-shadow(0 0 10px #ffe38a);
}
.map-node.war-target .node-label{
  background:linear-gradient(180deg,#e74d59,#7f1723);
  outline:2px solid #ffe38a;
}
.attack-badge,
.source-badge{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  z-index:15;
  white-space:nowrap;
  font-size:10px;
  font-weight:900;
  color:#fff;
  padding:3px 7px;
  border-radius:999px;
  box-shadow:0 5px 12px rgba(0,0,0,.45);
  pointer-events:none;
}
.attack-badge{
  top:-39px;
  background:linear-gradient(180deg,#ff5b69,#9e1d2d);
  border:1px solid rgba(255,230,150,.65);
}
.source-badge{
  top:-39px;
  background:linear-gradient(180deg,#4ac7ff,#185c9b);
  border:1px solid rgba(200,240,255,.75);
}
@keyframes warTargetPulse{
  0%,100%{ transform:translate(-50%,-56%) scale(1); }
  50%{ transform:translate(-50%,-56%) scale(1.08); }
}
@media(max-width:980px){
  .war-mode-bar{flex-wrap:wrap}
}


/* v2.0 map tuning */
.map{
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.05), inset 0 -60px 100px rgba(0,0,0,.12);
}
.map::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,.02), transparent 45%),
    linear-gradient(180deg, rgba(255,255,255,.01), rgba(0,0,0,.10));
}
.map svg{
  opacity:.44 !important;
  mix-blend-mode:screen;
}
.map svg .territory-link{
  fill:none;
  stroke:rgba(255,245,190,.34);
  stroke-width:1.8;
  stroke-dasharray:5 5;
  stroke-linecap:round;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.45));
}
.map-note{
  background:rgba(7,10,18,.30);
  border-color:rgba(231,200,115,.18);
  color:#efd98f;
}
.map-node{
  width:88px;
  height:88px;
  transform:translate(-50%,-57%);
}
.node-owner-glow{
  width:86px;
  height:62px;
  opacity:.48;
  filter:blur(10px);
}
.node-icon{
  width:84px;
  height:64px;
  filter:
    drop-shadow(0 7px 10px rgba(0,0,0,.55))
    drop-shadow(0 0 8px color-mix(in srgb, var(--faction), transparent 40%));
}
.node-label{
  min-width:80px;
  max-width:104px;
  transform:translateX(-1px);
  margin-top:1px;
  padding:4px 8px;
  font-size:10.5px;
  background:linear-gradient(180deg, color-mix(in srgb, var(--faction), #111 8%), rgba(0,0,0,.66));
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 6px 14px rgba(0,0,0,.24);
}
.node-flag-pole{ top:-16px; }
.node-flag{ top:-17px; }
.map-node.selected .node-icon{
  transform:scale(1.14);
}
.map-node.war-target .node-icon{
  transform:scale(1.09);
}
@media(max-width:980px){
  .map-node{width:74px;height:74px}
  .node-icon{width:70px;height:54px}
  .node-label{font-size:9.5px;min-width:70px;max-width:90px}
}


/* v2.1 fallback for browsers with partial CSS support */
.node-label{ background:rgba(20,24,40,.82); }
.node-flag{ background:var(--faction); }
.node-owner-glow{ background:radial-gradient(ellipse, rgba(255,255,255,.22), transparent 68%); }

/* v2.2 precise node placement and visibility tuning */
.map svg{
  opacity:.34 !important;
}
.map svg .territory-link{
  stroke:rgba(255,238,178,.26) !important;
  stroke-width:1.55 !important;
  stroke-dasharray:4 7 !important;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.32)) !important;
}
.map-node{
  width:80px !important;
  height:80px !important;
  transform:translate(-50%,-58%) !important;
}
.node-icon{
  width:76px !important;
  height:58px !important;
}
.node-label{
  min-width:74px !important;
  max-width:102px !important;
  font-size:10px !important;
  margin-top:0 !important;
  padding:4px 7px !important;
  background:linear-gradient(180deg, color-mix(in srgb, var(--faction), #111 10%), rgba(0,0,0,.70)) !important;
}
.node-owner-glow{
  width:76px !important;
  height:54px !important;
  opacity:.40 !important;
}
.node-flag-pole{
  top:-14px !important;
  height:30px !important;
}
.node-flag{
  top:-15px !important;
  width:25px !important;
  height:16px !important;
}
.map-node.war-target .node-icon{
  transform:scale(1.08) !important;
}
.map-node.war-disabled{
  opacity:.34 !important;
}
.attack-badge,
.source-badge{
  top:-34px !important;
  font-size:9.5px !important;
  padding:3px 6px !important;
}
.map-note{
  font-size:12px !important;
  padding:6px 9px !important;
}
@media(max-width:980px){
  .map-node{width:68px !important;height:68px !important}
  .node-icon{width:64px !important;height:50px !important}
  .node-label{font-size:9px !important;min-width:64px !important}
}

/* v2.3 schematic placement tuning */
.map-node{ width:78px !important; height:78px !important; transform:translate(-50%,-57%) !important; }
.node-icon{ width:74px !important; height:56px !important; }
.node-label{ min-width:70px !important; max-width:96px !important; font-size:9.8px !important; padding:4px 6px !important; }
.attack-badge,.source-badge{ top:-33px !important; }

/* v2.4 schematic line tuning */
.map svg{
  opacity:.46 !important;
  mix-blend-mode:normal !important;
}
.map svg .territory-link{
  fill:none;
  stroke:rgba(168,176,198,.46) !important;
  stroke-width:2.1 !important;
  stroke-dasharray:none !important;
  stroke-linecap:round !important;
  filter:none !important;
}
.map::after{
  background:linear-gradient(180deg, rgba(255,255,255,.01), rgba(0,0,0,.06)) !important;
}
.map-node{ z-index:3; }
.map-note{ font-size:12px !important; }

/* v2.5 micro adjustment */
.map-node{ width:76px !important; height:76px !important; transform:translate(-50%,-57%) !important; }
.node-icon{ width:72px !important; height:54px !important; }
.node-label{ min-width:68px !important; max-width:94px !important; font-size:9.6px !important; padding:4px 6px !important; }
.map svg .territory-link{ stroke-width:2.0 !important; }

/* v2.6 user transparent icons */
.node-icon{
  width:78px !important;
  height:60px !important;
  object-fit:contain !important;
  filter:
    drop-shadow(0 6px 10px rgba(0,0,0,.52))
    drop-shadow(0 0 8px color-mix(in srgb, var(--faction), transparent 42%)) !important;
}
.map-node.selected .node-icon{
  transform:scale(1.12) !important;
}
.map-node.war-target .node-icon{
  transform:scale(1.08) !important;
}
.node-owner-glow{
  opacity:.34 !important;
}

/* v2.7 result character transparency and real map background */
.result-map-bg{
  background:
    linear-gradient(90deg, rgba(4,8,15,.78), rgba(4,8,15,.24) 42%, rgba(4,8,15,.84)),
    url("assets/ui/world_map_full.webp") center/cover no-repeat !important;
}
.result-character-wrap{
  overflow:visible;
}
.result-standing{
  background:transparent !important;
  max-height:98% !important;
  filter:
    drop-shadow(0 30px 34px rgba(0,0,0,.62))
    drop-shadow(0 0 24px rgba(231,200,115,.16)) !important;
}
.result-card{
  backdrop-filter:blur(5px);
}

/* v2.9 difficulty selection */
.difficulty-title-card{
  width:min(1120px,94vw);
  padding:34px;
}
.difficulty-grid{
  margin-top:26px;
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.difficulty-card{
  text-align:left;
  min-height:260px;
  padding:18px;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.16));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 14px 34px rgba(0,0,0,.24);
}
.difficulty-card.selected{
  border-color:rgba(231,200,115,.85);
  box-shadow:0 0 0 4px rgba(231,200,115,.16),0 16px 38px rgba(0,0,0,.30);
}
.difficulty-name{
  font-size:24px;
  font-weight:900;
  color:#fff;
}
.difficulty-jp{
  margin-top:4px;
  color:var(--gold);
  font-weight:800;
}
.difficulty-desc{
  margin-top:10px;
  min-height:58px;
  color:var(--muted);
  font-size:13px;
  line-height:1.55;
}
.difficulty-stats{
  margin-top:12px;
  display:grid;
  gap:7px;
}
.difficulty-stats div{
  display:flex;
  justify-content:space-between;
  gap:8px;
  padding:7px 8px;
  border-radius:10px;
  background:rgba(255,255,255,.07);
  font-size:12px;
}
.difficulty-stats span{color:var(--muted)}
.difficulty-stats b{color:#fff}
.difficulty-select-btn{
  width:100%;
  margin-top:14px;
  padding:12px 10px;
  font-weight:900;
  background:linear-gradient(180deg,rgba(231,200,115,.95),rgba(143,105,36,.95));
  color:#111827;
  border-color:rgba(255,245,190,.8);
}
.difficulty-menu{
  max-width:560px;
  grid-template-columns:2fr 1fr;
}
@media(max-width:980px){
  .difficulty-grid{grid-template-columns:1fr}
  .difficulty-title-card{padding:24px}
  .difficulty-menu{grid-template-columns:1fr}
}

/* v3.3 officer and 3-slot save complete */
.officer-modal{width:min(1120px,96vw);max-height:90vh;overflow:auto}
.officer-tabs{display:grid;grid-template-columns:1fr;gap:16px}
.officer-section{border:1px solid rgba(255,255,255,.10);border-radius:16px;padding:14px;background:rgba(255,255,255,.04)}
.officer-section h3{margin:0 0 10px;color:var(--gold)}
.officer-list{display:grid;gap:8px}
.officer-row{display:grid;grid-template-columns:56px 1fr auto;gap:10px;align-items:center;padding:10px;border-radius:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09)}
.officer-row.captive{background:rgba(150,43,57,.16)}
.officer-face{width:56px;height:56px;object-fit:cover;border-radius:12px;border:1px solid rgba(255,255,255,.20)}
.officer-actions{display:flex;gap:6px;align-items:center;justify-content:flex-end;flex-wrap:wrap}
.officer-actions button{padding:7px 9px;font-size:12px}
.danger-btn{background:linear-gradient(180deg,rgba(150,43,57,.96),rgba(75,22,33,.96)) !important}
.king-badge{display:inline-block;margin-left:6px;padding:2px 6px;border-radius:999px;font-size:11px;color:#111827;background:var(--gold)}
.officer-select{width:100%;max-width:380px;padding:8px 10px;border-radius:10px;border:1px solid rgba(255,255,255,.22);background:#141a2a;color:#fff}
.save-slot-screen{overflow:auto}.save-load-title-card{width:min(1060px,94vw);padding:34px}
.current-save-info{margin:18px auto 0;display:flex;gap:10px;flex-wrap:wrap;justify-content:center;align-items:center;padding:12px;border-radius:16px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.10)}
.current-save-info b{color:var(--gold)}.current-save-info span{padding:6px 9px;border-radius:999px;background:rgba(0,0,0,.18);color:#dfe8ff;font-size:13px}
.save-slot-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:18px}.title-save-grid{margin-top:28px}
.save-slot-card{position:relative;z-index:5;text-align:left;padding:16px;border-radius:18px;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.18));border:1px solid rgba(255,255,255,.12);box-shadow:0 14px 34px rgba(0,0,0,.24);min-height:285px}.save-slot-card.empty{opacity:.9}
.slot-title{font-size:22px;font-weight:900;color:var(--gold);letter-spacing:.5px;margin-bottom:10px}.slot-empty{height:156px;display:flex;align-items:center;justify-content:center;color:var(--muted);border:1px dashed rgba(255,255,255,.18);border-radius:14px;background:rgba(0,0,0,.12)}
.slot-info{display:grid;gap:7px}.slot-info div{display:flex;justify-content:space-between;gap:8px;padding:7px 8px;border-radius:10px;background:rgba(255,255,255,.07);font-size:12px}.slot-info span{color:var(--muted)}.slot-info b{color:#fff}.slot-date{margin-top:10px;color:var(--muted);font-size:12px}
.slot-buttons{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:14px;position:relative;z-index:20;pointer-events:auto !important}.slot-action-btn{min-height:48px;font-size:15px;font-weight:900;background:linear-gradient(180deg,rgba(231,200,115,.95),rgba(143,105,36,.95));color:#111827;border-color:rgba(255,245,190,.8);pointer-events:auto !important}.slot-action-btn:disabled{color:#d9deea;background:rgba(255,255,255,.08)}.slot-delete-btn{min-height:48px;background:linear-gradient(180deg,rgba(150,43,57,.92),rgba(75,22,33,.92));pointer-events:auto !important}
.legacy-notice{margin:18px auto 0;padding:12px;border-radius:14px;color:#fff;background:rgba(231,200,115,.14);border:1px solid rgba(231,200,115,.28);font-size:14px}.legacy-notice button{margin-left:12px;padding:8px 10px}.save-slot-screen .title-card{margin-top:28px;margin-bottom:28px}
@media(max-width:980px){.save-slot-grid{grid-template-columns:1fr}.save-load-title-card{padding:24px}}
@media(max-width:760px){.officer-row{grid-template-columns:48px 1fr}.officer-actions{grid-column:1 / -1;justify-content:flex-start}}

/* v3.4 war button fix */
.command-row,
.commands,
.action-buttons,
.bottom-command-row{
  display:flex !important;
  flex-wrap:wrap !important;
  gap:10px !important;
}
.command-row button,
.commands button,
.action-buttons button,
.bottom-command-row button{
  flex:1 1 90px !important;
  min-width:86px !important;
}
.war-command-btn,
.war-side-btn{
  background:linear-gradient(180deg,rgba(180,55,70,.95),rgba(90,24,38,.95)) !important;
  border-color:rgba(255,150,160,.55) !important;
  color:#fff !important;
  font-weight:900 !important;
}
.war-side-btn{
  min-width:70px;
}

/* v3.8 grouped menus and complete personnel system */
.menu-groups{
  display:grid !important;
  grid-template-columns:repeat(4,1fr) !important;
  gap:10px !important;
}
.menu-groups button{
  min-height:44px;
  font-weight:900;
}
.ready-text{color:#60d394 !important}
.busy-text{color:#ffb86b !important}
.personnel-summary{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
  margin:12px 0 14px;
}
.personnel-summary div{
  padding:9px 10px;
  border-radius:12px;
  background:rgba(255,255,255,.07);
  display:flex;
  justify-content:space-between;
  gap:8px;
}
.personnel-summary span{color:var(--muted);font-size:12px}
.personnel-summary b{color:#fff}
.search-section{
  margin-bottom:14px;
  border-color:rgba(231,200,115,.25) !important;
}
.officer-actions button:disabled,
.footer-buttons button:disabled{
  opacity:.45;
  cursor:not-allowed;
}
@media(max-width:980px){
  .menu-groups{grid-template-columns:repeat(2,1fr) !important}
}
@media(max-width:760px){
  .personnel-summary{grid-template-columns:1fr}
}

/* v3.9 menu visibility fix */
.menu-groups{
  display:grid !important;
  grid-template-columns:repeat(8, minmax(0, 1fr)) !important;
  gap:8px !important;
  margin-top:12px !important;
}
.menu-groups button{
  min-width:0 !important;
  padding:10px 4px !important;
  font-size:13px !important;
  white-space:nowrap !important;
}
.map-panel{
  padding-bottom:12px !important;
}
.map{
  height:calc(100% - 82px) !important;
}
.personnel-side-btn{
  background:linear-gradient(180deg,rgba(80,152,104,.95),rgba(31,85,55,.95)) !important;
  border-color:rgba(140,230,170,.55) !important;
  color:#fff !important;
  font-weight:900 !important;
}
.footer-buttons{
  flex-wrap:wrap !important;
}
.footer-buttons button{
  min-width:64px;
}
@media(max-width:1100px){
  .menu-groups{
    grid-template-columns:repeat(4, minmax(0, 1fr)) !important;
  }
  .map{
    height:calc(100% - 128px) !important;
  }
}
@media(max-width:760px){
  .menu-groups{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
  }
  .map{
    height:calc(100% - 220px) !important;
  }
}

/* v4.0 new north-east faction */
.faction-grid{
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr)) !important;
}

/* v4.5 loyalty system */
.loyalty-high{color:#60d394 !important;font-weight:800}
.loyalty-mid{color:#e7c873 !important;font-weight:800}
.loyalty-low{color:#ffb86b !important;font-weight:800}
.loyalty-danger{color:#ff6b7a !important;font-weight:900;text-shadow:0 0 8px rgba(255,80,110,.35)}
.strategy-modal .officer-section{margin-bottom:14px}
.officer-actions button small{font-size:10px;line-height:1.1}

/* v4.8 troop and dragon system */
.troop-stat{font-size:12px;max-width:420px;white-space:normal;line-height:1.35}
.officer-select option:disabled{color:#999}
.map-node .node-icon[src$="icon_dragon.png"]{width:78px;height:78px;filter:drop-shadow(0 0 10px rgba(255,210,90,.7));}
.info-list b .officer-select{max-width:100%;}


/* v4.9 troop visuals */
.section-title{font-weight:700;margin:0 0 10px;color:#f1d79a;letter-spacing:.04em}
.troop-visual-box,.troop-modal-box{margin-top:14px;padding:12px;border:1px solid rgba(255,255,255,.08);border-radius:14px;background:rgba(255,255,255,.03)}
.troop-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.troop-card{border:1px solid rgba(255,255,255,.10);border-radius:14px;background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.02));padding:8px;display:flex;flex-direction:column;gap:8px;min-height:240px;transition:.15s ease box-shadow,.15s ease transform,.15s ease border-color;cursor:default}
.troop-card[data-value]{cursor:pointer}
.troop-card.active{border-color:#f1d79a;box-shadow:0 0 0 2px rgba(241,215,154,.22),0 12px 24px rgba(0,0,0,.22);transform:translateY(-2px)}
.troop-card.locked{opacity:.55;filter:grayscale(.2)}
.troop-top{display:grid;grid-template-columns:40px 1fr auto;gap:8px;align-items:center}
.troop-icon{width:40px;height:40px;border-radius:10px;object-fit:cover;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06)}
.troop-name{font-weight:700;color:#fff;line-height:1.2}
.troop-meta,.troop-desc small{font-size:12px;color:#aeb6d7}
.troop-count{font-size:12px;color:#f1d79a;white-space:nowrap}
.troop-body{border-radius:12px;overflow:hidden;background:rgba(9,12,28,.65);border:1px solid rgba(255,255,255,.06)}
.troop-portrait{width:100%;aspect-ratio:3/4;object-fit:cover;object-position:center top;display:block}
.troop-desc{font-size:12px;line-height:1.45;color:#d6dcf6}
.troop-compare-row{grid-column:1/-1}
.troop-compare-wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;width:100%}
.troop-compare-card{border:1px solid rgba(255,255,255,.08);border-radius:14px;padding:10px;background:rgba(255,255,255,.03);text-align:center}
.troop-compare-label{font-size:12px;color:#f1d79a;margin-bottom:6px}
.troop-compare-portrait{width:100%;max-height:180px;object-fit:cover;object-position:center top;border-radius:12px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.05);margin:6px 0}
.command-modal,.defense-modal,.strategy-modal{max-width:min(1000px,92vw)}
@media (max-width: 900px){.troop-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}.troop-compare-wrap{grid-template-columns:1fr}.troop-card{min-height:unset}}



/* v5.0 animation layer */
:root{
  --anim-fast:.16s;
  --anim-mid:.32s;
  --anim-slow:.9s;
}
.screen{
  animation: screenFadeIn .42s ease both;
}
@keyframes screenFadeIn{
  from{opacity:0;transform:translateY(8px);filter:blur(2px)}
  to{opacity:1;transform:none;filter:none}
}
.panel,.modal,.leader-box,.info-box,.log,.troop-visual-box{
  animation: panelRise .38s ease both;
}
@keyframes panelRise{
  from{opacity:0;transform:translateY(10px)}
  to{opacity:1;transform:none}
}
button,.choice,.troop-card,.territory-node,.map-node,.node,.territory-btn{
  transition:transform var(--anim-fast) ease, box-shadow var(--anim-fast) ease, filter var(--anim-fast) ease, border-color var(--anim-fast) ease;
}
button:hover,.choice:hover,.troop-card:hover{
  transform:translateY(-2px);
  filter:brightness(1.08);
}
button:active{
  transform:translateY(1px) scale(.99);
}
.modal-back{
  animation: modalBackdropFade .2s ease both;
}
.modal{
  animation: modalZoomIn .24s cubic-bezier(.2,.9,.2,1.08) both;
}
@keyframes modalBackdropFade{
  from{opacity:0}
  to{opacity:1}
}
@keyframes modalZoomIn{
  from{opacity:0;transform:translateY(18px) scale(.96)}
  to{opacity:1;transform:none}
}
.map{
  animation: mapGlowIn .7s ease both;
  position:relative;
  overflow:hidden;
}
.map::after{
  content:"";
  pointer-events:none;
  position:absolute;
  inset:-20%;
  background:radial-gradient(circle at 18% 20%,rgba(255,230,150,.10),transparent 28%),
             radial-gradient(circle at 82% 80%,rgba(100,170,255,.08),transparent 30%);
  animation: mapLightDrift 8s ease-in-out infinite alternate;
}
@keyframes mapGlowIn{
  from{filter:saturate(.75) brightness(.82)}
  to{filter:none}
}
@keyframes mapLightDrift{
  from{transform:translate(-1.5%,-1%) scale(1)}
  to{transform:translate(1.5%,1%) scale(1.04)}
}
.map-flash-win{
  animation: mapWinFlash .85s ease both;
}
.map-flash-lose{
  animation: mapLoseFlash .85s ease both;
}
.map-flash-event{
  animation: mapEventFlash .85s ease both;
}
@keyframes mapWinFlash{
  0%{box-shadow:inset 0 0 0 rgba(110,255,170,0)}
  28%{box-shadow:inset 0 0 80px rgba(110,255,170,.50),0 0 30px rgba(110,255,170,.25);filter:brightness(1.18)}
  100%{box-shadow:inset 0 0 0 rgba(110,255,170,0);filter:none}
}
@keyframes mapLoseFlash{
  0%{box-shadow:inset 0 0 0 rgba(255,80,80,0)}
  28%{box-shadow:inset 0 0 90px rgba(255,80,80,.45),0 0 30px rgba(255,80,80,.18);filter:brightness(.92) saturate(1.15)}
  100%{box-shadow:inset 0 0 0 rgba(255,80,80,0);filter:none}
}
@keyframes mapEventFlash{
  0%{box-shadow:inset 0 0 0 rgba(255,220,120,0)}
  28%{box-shadow:inset 0 0 85px rgba(255,220,120,.42),0 0 30px rgba(255,220,120,.18);filter:brightness(1.12)}
  100%{box-shadow:inset 0 0 0 rgba(255,220,120,0);filter:none}
}
.territory,.territory-btn,.territory-node,.map-node,.node{
  animation: nodePop .42s ease both;
}
@keyframes nodePop{
  from{opacity:0;transform:translateY(6px) scale(.92)}
  to{opacity:1;transform:none}
}
.territory:hover,.territory-btn:hover,.territory-node:hover,.map-node:hover,.node:hover{
  transform:translateY(-2px) scale(1.04);
  filter:brightness(1.15) drop-shadow(0 0 8px rgba(255,224,135,.55));
  z-index:10;
}
.war-target,.attackable,.targetable{
  animation: targetPulse 1s ease-in-out infinite;
}
@keyframes targetPulse{
  0%,100%{filter:drop-shadow(0 0 8px rgba(255,80,90,.65))}
  50%{filter:drop-shadow(0 0 18px rgba(255,80,90,1));transform:scale(1.05)}
}
.troop-card.active .troop-portrait,
.troop-card:hover .troop-portrait{
  animation: troopPortraitBreathe 1.8s ease-in-out infinite alternate;
}
@keyframes troopPortraitBreathe{
  from{transform:scale(1)}
  to{transform:scale(1.035)}
}
.troop-icon{
  animation: iconShine 2.8s ease-in-out infinite;
}
@keyframes iconShine{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.18)}
}
.result-win{
  animation: resultWinGlow 1.2s ease-in-out infinite alternate;
}
.result-lose{
  animation: resultLoseGlow 1.2s ease-in-out infinite alternate;
}
@keyframes resultWinGlow{
  from{text-shadow:0 0 0 rgba(112,255,170,0)}
  to{text-shadow:0 0 18px rgba(112,255,170,.65)}
}
@keyframes resultLoseGlow{
  from{text-shadow:0 0 0 rgba(255,100,100,0)}
  to{text-shadow:0 0 18px rgba(255,100,100,.65)}
}

/* battle cut-in */
.battle-cutin{
  position:fixed;
  inset:0;
  z-index:9999;
  pointer-events:none;
  display:grid;
  grid-template-columns:1fr 220px 1fr;
  align-items:center;
  gap:18px;
  padding:4vw;
  background:radial-gradient(circle at center,rgba(8,13,35,.82),rgba(3,4,12,.94));
  animation: cutinWrap .9s ease both;
}
@keyframes cutinWrap{
  0%{opacity:0}
  12%{opacity:1}
  82%{opacity:1}
  100%{opacity:0}
}
.cutin-bg-sparks{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 20% 35%,rgba(255,220,120,.45) 0 2px,transparent 3px),
    radial-gradient(circle at 72% 62%,rgba(128,190,255,.45) 0 2px,transparent 3px),
    radial-gradient(circle at 48% 25%,rgba(255,120,120,.35) 0 1px,transparent 3px);
  background-size:140px 120px,180px 160px,120px 100px;
  animation:sparksMove .9s linear both;
  opacity:.7;
}
@keyframes sparksMove{
  from{transform:translateX(-30px)}
  to{transform:translateX(30px)}
}
.cutin-panel{
  position:relative;
  min-height:420px;
  border-radius:24px;
  overflow:hidden;
  background:linear-gradient(180deg,rgba(255,255,255,.12),rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 24px 80px rgba(0,0,0,.45);
}
.cutin-panel.attacker{
  animation: cutinLeft .9s cubic-bezier(.2,.9,.2,1) both;
}
.cutin-panel.defender{
  animation: cutinRight .9s cubic-bezier(.2,.9,.2,1) both;
}
@keyframes cutinLeft{
  0%{opacity:0;transform:translateX(-18vw) skewX(-8deg)}
  22%{opacity:1;transform:translateX(0) skewX(0)}
  75%{opacity:1;transform:translateX(0)}
  100%{opacity:0;transform:translateX(-4vw)}
}
@keyframes cutinRight{
  0%{opacity:0;transform:translateX(18vw) skewX(8deg)}
  22%{opacity:1;transform:translateX(0) skewX(0)}
  75%{opacity:1;transform:translateX(0)}
  100%{opacity:0;transform:translateX(4vw)}
}
.cutin-troop-img{
  width:100%;
  height:420px;
  object-fit:cover;
  object-position:center top;
  filter:saturate(1.05) contrast(1.05);
}
.cutin-label{
  position:absolute;
  left:16px;
  right:16px;
  bottom:42px;
  font-size:22px;
  font-weight:900;
  color:#fff;
  text-shadow:0 2px 10px rgba(0,0,0,.8);
}
.cutin-sub{
  position:absolute;
  left:16px;
  bottom:18px;
  color:#f7d987;
  font-weight:700;
  text-shadow:0 2px 8px rgba(0,0,0,.8);
}
.cutin-vs{
  text-align:center;
  color:#f7d987;
  z-index:2;
  animation: vsBurst .9s ease both;
}
.cutin-vs div{
  font-weight:900;
  letter-spacing:.18em;
  font-size:14px;
}
.cutin-vs strong{
  display:block;
  font-size:76px;
  line-height:1;
  color:#fff;
  text-shadow:0 0 24px rgba(255,95,95,.75),0 0 50px rgba(255,215,110,.45);
}
@keyframes vsBurst{
  0%{opacity:0;transform:scale(.5) rotate(-8deg)}
  18%{opacity:1;transform:scale(1.16) rotate(0)}
  38%{transform:scale(1)}
  80%{opacity:1}
  100%{opacity:0;transform:scale(1.08)}
}
@media(max-width:900px){
  .battle-cutin{grid-template-columns:1fr;gap:10px}
  .cutin-panel{min-height:220px}
  .cutin-troop-img{height:220px}
  .cutin-vs strong{font-size:48px}
}


/* v5.1 compact troop panel */
.troop-compact-box{
  padding:10px !important;
  margin-top:10px !important;
  max-height:none !important;
}
.troop-compact-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}
.troop-compact-head .section-title{
  margin:0 0 2px !important;
}
.troop-compact-sub{
  font-size:11px;
  color:#aeb6d7;
  line-height:1.25;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  max-width:360px;
}
.mini-btn{
  min-width:54px !important;
  padding:7px 10px !important;
  font-size:12px !important;
  border-radius:10px !important;
}
.troop-compact-list{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:6px;
}
.troop-chip{
  display:grid;
  grid-template-columns:26px 1fr;
  grid-template-rows:auto auto;
  align-items:center;
  gap:2px 5px;
  padding:6px;
  min-width:0;
  border-radius:10px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.08);
}
.troop-chip img{
  grid-row:1/3;
  width:26px;
  height:26px;
  border-radius:7px;
  object-fit:cover;
}
.troop-chip span{
  font-size:11px;
  color:#dfe6ff;
  line-height:1;
  font-weight:700;
}
.troop-chip b{
  font-size:11px;
  color:#f1d79a;
  line-height:1;
}
.troop-chip.locked{
  opacity:.42;
  filter:grayscale(.35);
}
.troop-detail-modal{
  width:min(1120px,94vw) !important;
  max-width:min(1120px,94vw) !important;
}
.troop-detail-modal .troop-gallery{
  grid-template-columns:repeat(3,minmax(0,1fr));
}
.troop-detail-modal .troop-card{
  min-height:300px;
}
.troop-detail-modal .troop-portrait{
  aspect-ratio:4/5;
}
.troop-detail-summary{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:10px;
  margin:10px 0 14px;
}
.troop-detail-summary div{
  padding:10px 12px;
  border-radius:12px;
  background:rgba(255,255,255,.06);
  display:flex;
  justify-content:space-between;
  gap:10px;
}
.troop-detail-summary span{
  color:#aeb6d7;
}
.troop-detail-summary b{
  color:#fff;
}
.panel.side{
  overflow:auto;
}
.leader-box{
  flex-shrink:0;
}
.info-box{
  flex-shrink:0;
}
.log{
  flex-shrink:0;
}
@media(max-width:1200px){
  .troop-compact-list{grid-template-columns:repeat(3,minmax(0,1fr))}
  .troop-detail-modal .troop-gallery{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .troop-compact-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .troop-detail-modal .troop-gallery{grid-template-columns:1fr}
  .troop-detail-summary{grid-template-columns:1fr}
}


/* v5.2 recruit UI fix */
.command-modal{
  width:min(900px,94vw) !important;
  max-width:min(900px,94vw) !important;
  max-height:88vh !important;
  overflow-y:auto !important;
  padding-bottom:14px !important;
}
.command-modal .info-list{
  margin-bottom:10px !important;
}
.command-execute-buttons{
  position:sticky !important;
  bottom:0 !important;
  z-index:5 !important;
  margin:10px -2px 12px !important;
  padding:10px !important;
  border-radius:14px !important;
  background:linear-gradient(180deg,rgba(21,27,48,.96),rgba(12,16,31,.98)) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:0 -8px 24px rgba(0,0,0,.28) !important;
}
.primary-action-btn{
  background:linear-gradient(180deg,rgba(205,55,79,.98),rgba(136,38,58,.98)) !important;
  border-color:rgba(255,160,170,.46) !important;
  color:#fff !important;
  font-weight:900 !important;
  min-width:180px !important;
}
.command-modal .troop-modal-box{
  margin-top:8px !important;
  padding:10px !important;
}
.command-modal .troop-gallery{
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:8px !important;
}
.command-modal .troop-card{
  min-height:0 !important;
  padding:7px !important;
  gap:6px !important;
}
.command-modal .troop-top{
  grid-template-columns:30px 1fr !important;
}
.command-modal .troop-count{
  grid-column:1 / -1 !important;
}
.command-modal .troop-icon{
  width:30px !important;
  height:30px !important;
}
.command-modal .troop-name{
  font-size:13px !important;
}
.command-modal .troop-meta,
.command-modal .troop-desc{
  font-size:10px !important;
  line-height:1.35 !important;
}
.command-modal .troop-portrait{
  aspect-ratio:1 / 1.15 !important;
  max-height:130px !important;
  object-fit:cover !important;
  object-position:center top !important;
}
@media(max-width:1050px){
  .command-modal .troop-gallery{
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  }
}
@media(max-width:680px){
  .command-modal .troop-gallery{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
  .primary-action-btn{
    min-width:0 !important;
    width:100% !important;
  }
}


/* v5.3 modal close and compact detail fix */
.modal{
  max-height:86vh !important;
  overflow-y:auto !important;
  position:relative !important;
  overscroll-behavior:contain !important;
}
.modal-head-v53{
  position:sticky;
  top:0;
  z-index:20;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:16px;
  margin:-4px -4px 12px;
  padding:10px 8px 12px;
  background:linear-gradient(180deg,rgba(18,24,43,.98),rgba(18,24,43,.88));
  border-bottom:1px solid rgba(255,255,255,.08);
  backdrop-filter:blur(8px);
}
.modal-head-v53 h2{
  margin:0 0 4px !important;
}
.modal-head-v53 .desc{
  margin:0 !important;
  line-height:1.55;
}
.modal-close-v53{
  flex:0 0 auto;
  width:42px !important;
  height:42px !important;
  min-width:42px !important;
  padding:0 !important;
  border-radius:999px !important;
  font-size:26px !important;
  line-height:38px !important;
  font-weight:900 !important;
  background:linear-gradient(180deg,rgba(205,55,79,.98),rgba(120,34,50,.98)) !important;
  border-color:rgba(255,170,180,.55) !important;
  color:#fff !important;
  box-shadow:0 8px 20px rgba(0,0,0,.35);
}
.troop-detail-modal{
  width:min(980px,92vw) !important;
  max-width:min(980px,92vw) !important;
  padding:16px !important;
}
.troop-detail-modal .troop-detail-summary{
  grid-template-columns:repeat(3,minmax(0,1fr)) !important;
  gap:8px !important;
  margin:8px 0 10px !important;
}
.troop-detail-modal .troop-detail-summary div{
  padding:8px 10px !important;
  font-size:13px !important;
}
.troop-detail-modal .troop-gallery{
  grid-template-columns:repeat(6,minmax(0,1fr)) !important;
  gap:8px !important;
}
.troop-detail-modal .troop-card{
  min-height:0 !important;
  padding:7px !important;
  gap:6px !important;
}
.troop-detail-modal .troop-top{
  grid-template-columns:30px 1fr !important;
}
.troop-detail-modal .troop-count{
  grid-column:1/-1 !important;
}
.troop-detail-modal .troop-icon{
  width:30px !important;
  height:30px !important;
}
.troop-detail-modal .troop-name{
  font-size:13px !important;
}
.troop-detail-modal .troop-meta,
.troop-detail-modal .troop-desc{
  font-size:10px !important;
  line-height:1.35 !important;
}
.troop-detail-modal .troop-portrait{
  aspect-ratio:1 / 1.05 !important;
  max-height:120px !important;
  object-fit:cover !important;
  object-position:center top !important;
}
.troop-detail-modal .footer-buttons{
  position:sticky !important;
  bottom:0 !important;
  z-index:10 !important;
  padding:10px !important;
  margin:10px -4px -4px !important;
  border-radius:14px !important;
  background:linear-gradient(180deg,rgba(21,27,48,.88),rgba(12,16,31,.98)) !important;
  border:1px solid rgba(255,255,255,.08) !important;
}
@media(max-width:1200px){
  .troop-detail-modal .troop-gallery{grid-template-columns:repeat(3,minmax(0,1fr)) !important;}
}
@media(max-width:760px){
  .troop-detail-modal .troop-gallery{grid-template-columns:repeat(2,minmax(0,1fr)) !important;}
  .troop-detail-modal .troop-detail-summary{grid-template-columns:1fr !important;}
}


/* v5.4 multi troop sortie */
.multi-troop-selector{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:8px;
  width:100%;
}
.multi-troop-option{
  display:grid;
  grid-template-columns:34px 1fr auto;
  align-items:center;
  gap:8px;
  padding:8px;
  border-radius:12px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.10);
  cursor:pointer;
  transition:.15s ease transform,.15s ease box-shadow,.15s ease border-color,.15s ease filter;
}
.multi-troop-option:hover{
  transform:translateY(-1px);
  filter:brightness(1.08);
}
.multi-troop-option.active{
  border-color:#f1d79a;
  box-shadow:0 0 0 2px rgba(241,215,154,.20),0 8px 18px rgba(0,0,0,.20);
}
.multi-troop-option.locked{
  opacity:.48;
  cursor:not-allowed;
  filter:grayscale(.3);
}
.multi-troop-option input{
  display:none;
}
.multi-troop-option img{
  width:34px;
  height:34px;
  border-radius:9px;
  object-fit:cover;
  border:1px solid rgba(255,255,255,.14);
}
.multi-troop-option span{
  font-weight:800;
  font-size:13px;
  color:#fff;
}
.multi-troop-option b{
  font-size:12px;
  color:#f1d79a;
}
.info-list .multi-troop-selector{
  margin-top:4px;
}
.troop-compare-card .troop-name{
  font-size:12px;
  line-height:1.25;
}
@media(max-width:760px){
  .multi-troop-selector{grid-template-columns:repeat(2,minmax(0,1fr));}
}


/* v5.12 skill cut-in and battle breakdown */
.skill-cutin{
  position:fixed;
  left:50%;
  top:18%;
  transform:translateX(-50%);
  width:min(720px,92vw);
  z-index:10050;
  pointer-events:none;
  display:flex;
  align-items:center;
  gap:16px;
  padding:16px 20px;
  border-radius:18px;
  background:linear-gradient(90deg,rgba(16,20,38,.96),rgba(54,38,78,.92),rgba(16,20,38,.96));
  border:1px solid rgba(255,230,150,.35);
  box-shadow:0 24px 80px rgba(0,0,0,.55),0 0 38px rgba(255,220,120,.22);
  animation:skillCutinSlide 1.35s ease both;
  overflow:hidden;
}
.skill-cutin.defense{
  background:linear-gradient(90deg,rgba(16,20,38,.96),rgba(34,68,96,.92),rgba(16,20,38,.96));
}
.skill-cutin-line{
  position:absolute;
  inset:0;
  background:linear-gradient(105deg,transparent 0%,rgba(255,255,255,.22) 48%,transparent 62%);
  transform:translateX(-120%);
  animation:skillCutinShine 1.15s ease both;
}
.skill-cutin-face{
  width:86px;
  height:86px;
  object-fit:cover;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.28);
  box-shadow:0 0 18px rgba(255,220,120,.25);
  z-index:1;
}
.skill-cutin-text{
  z-index:1;
  min-width:0;
}
.skill-cutin-role{
  font-size:12px;
  color:#f8d77a;
  letter-spacing:.16em;
  font-weight:900;
}
.skill-cutin-name{
  font-size:34px;
  line-height:1.05;
  font-weight:1000;
  color:#fff;
  text-shadow:0 0 20px rgba(255,225,120,.55);
}
.skill-cutin-officer{
  margin-top:4px;
  font-weight:800;
  color:#dfe7ff;
}
.skill-cutin-flavor{
  margin-top:4px;
  color:#aeb9df;
  font-size:13px;
}
@keyframes skillCutinSlide{
  0%{opacity:0; transform:translateX(-50%) translateY(-24px) scale(.96)}
  14%{opacity:1; transform:translateX(-50%) translateY(0) scale(1)}
  82%{opacity:1; transform:translateX(-50%) translateY(0) scale(1)}
  100%{opacity:0; transform:translateX(-50%) translateY(-12px) scale(.98)}
}
@keyframes skillCutinShine{
  0%{transform:translateX(-120%)}
  55%{transform:translateX(120%)}
  100%{transform:translateX(120%)}
}
.affinity-badge{
  display:inline-block;
  margin-left:6px;
  padding:2px 7px;
  border-radius:999px;
  background:rgba(95,158,255,.16);
  border:1px solid rgba(125,178,255,.35);
  color:#bcd7ff;
  font-size:11px;
  vertical-align:middle;
}
.battle-reason-box{
  margin:8px 0 12px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(255,216,110,.20);
  background:rgba(255,216,110,.07);
  color:#f5d782;
  font-weight:800;
}
.battle-breakdown-wrap{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:10px;
  margin:10px 0 14px;
}
.battle-breakdown-card{
  border:1px solid rgba(255,255,255,.09);
  border-radius:14px;
  background:rgba(255,255,255,.04);
  padding:10px;
}
.battle-breakdown-title{
  color:#f1d79a;
  font-weight:900;
  margin-bottom:8px;
}
.battle-breakdown-grid{
  display:grid;
  grid-template-columns:1fr auto;
  gap:5px 12px;
  font-size:12px;
}
.battle-breakdown-grid span{color:#aeb6d7}
.battle-breakdown-grid b{color:#fff}
.battle-breakdown-notes{
  margin-top:8px;
  color:#91a0c8;
  font-size:11px;
  line-height:1.45;
}
@media(max-width:900px){
  .battle-breakdown-wrap{grid-template-columns:1fr}
  .skill-cutin-name{font-size:24px}
  .skill-cutin-face{width:68px;height:68px}
}


/* v5.14 officer intel */
.officer-info-modal{
  width:min(1120px,94vw) !important;
  max-width:min(1120px,94vw) !important;
}
.officer-info-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
  margin-top:12px;
}
.officer-info-card{
  display:flex;
  gap:12px;
  padding:12px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.045);
}
.officer-info-face{
  width:86px;
  height:86px;
  object-fit:cover;
  border-radius:14px;
  background:#11182a;
  border:1px solid rgba(255,255,255,.12);
  flex:0 0 auto;
}
.officer-info-body{
  min-width:0;
  flex:1;
}
.officer-info-name{
  font-size:18px;
  font-weight:900;
  color:#fff;
}
.officer-info-title{
  margin-top:3px;
  font-size:12px;
  color:#d4b96f;
}
.officer-info-stats{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin:8px 0;
}
.officer-info-stats span{
  padding:4px 7px;
  border-radius:8px;
  background:rgba(255,255,255,.07);
  color:#dfe7ff;
  font-size:12px;
  font-weight:800;
}
@media(max-width:900px){
  .officer-info-grid{grid-template-columns:1fr}
}


/* v5.15 faction defeat notice */
.defeat-telop{
  position:fixed;
  inset:0;
  z-index:12000;
  pointer-events:none;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:8vh;
  animation:defeatTelopFade 2.6s ease both;
}
.defeat-telop-inner{
  min-width:min(720px,92vw);
  padding:16px 26px;
  border-radius:16px;
  background:linear-gradient(90deg,rgba(42,10,18,.96),rgba(100,18,28,.94),rgba(42,10,18,.96));
  border:1px solid rgba(255,210,125,.42);
  box-shadow:0 24px 90px rgba(0,0,0,.62),0 0 46px rgba(255,70,70,.22);
  text-align:center;
}
.defeat-telop-inner span{
  display:block;
  color:#ff7070;
  font-weight:1000;
  font-size:18px;
  letter-spacing:.25em;
}
.defeat-telop-inner b{
  display:block;
  margin-top:6px;
  color:#fff;
  font-size:34px;
  line-height:1.1;
  text-shadow:0 0 18px rgba(255,80,80,.45);
}
.defeat-telop-inner small{
  display:block;
  margin-top:6px;
  color:#f4d48b;
  font-weight:800;
}
@keyframes defeatTelopFade{
  0%{opacity:0; transform:translateY(-18px) scale(.96)}
  12%{opacity:1; transform:translateY(0) scale(1)}
  78%{opacity:1; transform:translateY(0) scale(1)}
  100%{opacity:0; transform:translateY(-10px) scale(.98)}
}
.defeat-notice-modal{
  width:min(820px,92vw) !important;
  border-color:rgba(255,210,125,.30) !important;
  box-shadow:0 30px 120px rgba(0,0,0,.66),0 0 50px rgba(255,70,70,.12) !important;
}
.defeat-notice-title{
  display:inline-block;
  padding:6px 14px;
  border-radius:999px;
  background:rgba(255,80,80,.15);
  border:1px solid rgba(255,120,120,.35);
  color:#ff8585;
  font-size:13px;
  font-weight:1000;
  letter-spacing:.18em;
}
.defeat-notice-body{
  display:grid;
  grid-template-columns:170px 1fr;
  gap:20px;
  align-items:center;
  margin-top:14px;
}
.defeat-emblem{
  width:160px;
  height:160px;
  border-radius:28px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle, color-mix(in srgb, var(--defeat-color) 28%, transparent), rgba(255,255,255,.04));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 0 30px rgba(255,255,255,.05);
}
.defeat-leader-face{
  width:128px;
  height:128px;
  object-fit:cover;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.16);
  filter:grayscale(.2) brightness(.9);
}
@media(max-width:720px){
  .defeat-notice-body{grid-template-columns:1fr}
  .defeat-emblem{margin:auto}
  .defeat-telop-inner b{font-size:24px}
}


/* v5.16 story mode */
.story-screen .title-card,
.story-title-card{
  width:min(1120px,94vw) !important;
  max-width:min(1120px,94vw) !important;
}
.title-catch,
.story-catch{
  margin:10px auto 18px;
  color:#f5d982;
  font-weight:900;
  letter-spacing:.12em;
  text-shadow:0 0 18px rgba(245,217,130,.25);
}
.story-scroll{
  max-height:58vh;
  overflow:auto;
  padding:16px;
  border-radius:18px;
  background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.08);
  text-align:left;
}
.story-section{
  margin-bottom:22px;
}
.story-section h2{
  color:#f1d486;
  border-bottom:1px solid rgba(241,212,134,.25);
  padding-bottom:6px;
  margin:0 0 10px;
}
.story-section p{
  color:#d8def6;
  line-height:1.75;
  margin:8px 0;
}
.story-faction-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}
.story-faction-card{
  display:flex;
  gap:12px;
  padding:12px;
  border-radius:16px;
  background:linear-gradient(135deg,rgba(255,255,255,.06),rgba(255,255,255,.025));
  border:1px solid color-mix(in srgb, var(--story-color) 45%, rgba(255,255,255,.12));
}
.story-faction-card img{
  width:64px;
  height:64px;
  object-fit:cover;
  border-radius:12px;
  background:#11182b;
  border:1px solid rgba(255,255,255,.12);
}
.story-faction-card h3{
  margin:0;
  color:#fff;
}
.story-faction-card p{
  margin:5px 0 0;
  color:#bfc8e9;
  font-size:13px;
  line-height:1.55;
}
.story-crown{
  display:inline-block;
  margin-top:4px;
  padding:2px 8px;
  border-radius:999px;
  color:#f6dd9c;
  background:rgba(246,221,156,.10);
  border:1px solid rgba(246,221,156,.20);
  font-size:12px;
  font-weight:800;
}
.faction-story-box{
  margin:10px 0 12px;
  padding:12px;
  border-radius:16px;
  background:linear-gradient(135deg,color-mix(in srgb, var(--story-color) 18%, transparent),rgba(255,255,255,.035));
  border:1px solid color-mix(in srgb, var(--story-color) 42%, rgba(255,255,255,.12));
}
.faction-story-box h4{
  margin:4px 0 6px;
  color:#fff;
  font-size:18px;
}
.faction-story-box p{
  margin:5px 0;
  color:#d7def6;
  line-height:1.55;
}
.story-prologue-modal{
  width:min(860px,94vw) !important;
}
.story-prologue-head{
  display:flex;
  gap:16px;
  align-items:center;
  padding:14px;
  border-radius:18px;
  background:linear-gradient(135deg,color-mix(in srgb, var(--story-color) 22%, transparent),rgba(255,255,255,.035));
  border:1px solid color-mix(in srgb, var(--story-color) 45%, rgba(255,255,255,.12));
}
.story-prologue-head img{
  width:90px;
  height:90px;
  object-fit:cover;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.14);
  background:#10172a;
}
.story-prologue-label{
  display:inline-block;
  padding:3px 9px;
  border-radius:999px;
  color:#f5d982;
  background:rgba(245,217,130,.10);
  border:1px solid rgba(245,217,130,.22);
  font-size:12px;
  font-weight:900;
}
.story-prologue-head h2{
  margin:7px 0 2px;
  color:#fff;
}
.story-prologue-head p{
  margin:0;
  color:#cbd4ee;
}
.story-prologue-text{
  margin-top:14px;
}
.story-prologue-text p{
  line-height:1.75;
  color:#d8def6;
  margin:8px 0;
}
@media(max-width:820px){
  .story-faction-grid{grid-template-columns:1fr}
  .story-prologue-head{align-items:flex-start}
}


/* v5.17 Ancient Dragon final boss */
.final-boss-btn{
  background:linear-gradient(135deg,#6f1724,#be2939) !important;
  border-color:rgba(255,168,110,.45) !important;
  color:#fff !important;
  box-shadow:0 0 18px rgba(255,70,70,.18);
}
.dragon-boss-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:10px 0;
  padding:10px 12px;
  border-radius:14px;
  background:linear-gradient(90deg,rgba(75,10,18,.82),rgba(24,16,32,.70));
  border:1px solid rgba(255,105,105,.32);
  color:#ffd7a0;
  box-shadow:0 0 24px rgba(255,50,50,.12);
}
.dragon-boss-bar b{
  color:#ff8585;
  letter-spacing:.08em;
}
.dragon-boss-bar button{
  padding:7px 12px;
  border-radius:10px;
}
.dragon-awaken-telop{
  position:fixed;
  inset:0;
  z-index:13000;
  pointer-events:none;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:7vh;
  animation:dragonAwakenTelop 3.2s ease both;
}
.dragon-awaken-inner{
  width:min(820px,94vw);
  padding:18px 24px;
  border-radius:18px;
  background:linear-gradient(90deg,rgba(21,10,24,.96),rgba(100,18,35,.94),rgba(21,10,24,.96));
  border:1px solid rgba(255,190,120,.45);
  text-align:center;
  box-shadow:0 28px 110px rgba(0,0,0,.72),0 0 60px rgba(255,45,65,.28);
}
.dragon-awaken-inner span{
  display:block;
  color:#ff7474;
  font-weight:1000;
  letter-spacing:.24em;
}
.dragon-awaken-inner b{
  display:block;
  margin-top:6px;
  color:#fff;
  font-size:32px;
  text-shadow:0 0 24px rgba(255,60,80,.55);
}
.dragon-awaken-inner small{
  display:block;
  margin-top:6px;
  color:#f6d384;
  font-weight:900;
}
@keyframes dragonAwakenTelop{
  0%{opacity:0; transform:translateY(-24px) scale(.96)}
  12%{opacity:1; transform:translateY(0) scale(1)}
  82%{opacity:1; transform:translateY(0) scale(1)}
  100%{opacity:0; transform:translateY(-10px) scale(.98)}
}
.dragon-awaken-modal,
.ancient-dragon-modal{
  width:min(1040px,94vw) !important;
  max-width:min(1040px,94vw) !important;
  border-color:rgba(255,130,100,.30) !important;
}
.dragon-awaken-visual{
  position:relative;
  height:280px;
  border-radius:20px;
  overflow:hidden;
  margin-bottom:14px;
  border:1px solid rgba(255,255,255,.12);
}
.ancient-dragon-img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 34%;
  filter:brightness(.86) contrast(1.08);
}
.dragon-awaken-overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 10%,rgba(7,10,18,.86) 100%);
}
.dragon-awaken-content{
  margin-top:-86px;
  position:relative;
  z-index:2;
  padding:0 16px 6px;
}
.dragon-awaken-content h2{
  color:#fff;
  font-size:34px;
  margin:8px 0;
  text-shadow:0 0 20px rgba(255,60,80,.45);
}
.ancient-dragon-battle-head{
  display:grid;
  grid-template-columns:260px 1fr;
  gap:16px;
  align-items:center;
  margin-bottom:14px;
}
.ancient-dragon-boss-img{
  width:260px;
  height:170px;
  object-fit:cover;
  object-position:center 35%;
  border-radius:18px;
  border:1px solid rgba(255,160,120,.25);
  box-shadow:0 0 30px rgba(255,60,80,.15);
}
.dragon-final-note{
  margin:12px 0;
  padding:12px;
  border-radius:14px;
  background:rgba(255,90,90,.07);
  border:1px solid rgba(255,120,120,.18);
  color:#d9e1fa;
  line-height:1.65;
}
.true-ending-screen .true-ending-dragon-bg{
  position:absolute;
  inset:0;
  opacity:.28;
  filter:brightness(.65) blur(1px);
  overflow:hidden;
}
.true-ending-dragon-bg img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.true-ending-card{
  border-color:rgba(255,220,130,.35) !important;
  box-shadow:0 28px 100px rgba(0,0,0,.55),0 0 44px rgba(255,220,130,.13) !important;
}
.story-dragon-card{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:16px;
  align-items:center;
  padding:12px;
  border-radius:18px;
  background:rgba(255,80,80,.06);
  border:1px solid rgba(255,130,120,.18);
}
.story-dragon-card img{
  width:220px;
  height:150px;
  object-fit:cover;
  object-position:center 35%;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.12);
}
@media(max-width:820px){
  .ancient-dragon-battle-head,
  .story-dragon-card{grid-template-columns:1fr}
  .ancient-dragon-boss-img,
  .story-dragon-card img{width:100%}
  .dragon-awaken-content{margin-top:-70px}
  .dragon-awaken-inner b{font-size:24px}
}


/* v5.19 True Dragon Lilia Ragna */
.true-dragon-btn{
  background:linear-gradient(135deg,#8c1830,#e23b60) !important;
  border-color:rgba(255,190,210,.48) !important;
  color:#fff !important;
  box-shadow:0 0 20px rgba(255,60,110,.22);
}
.true-dragon-bar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:10px 0;
  padding:10px 12px;
  border-radius:14px;
  background:linear-gradient(90deg,rgba(92,14,38,.82),rgba(40,18,42,.72));
  border:1px solid rgba(255,130,170,.34);
  color:#ffd7e6;
  box-shadow:0 0 26px rgba(255,50,110,.14);
}
.true-dragon-bar b{color:#ff9fbd}
.true-dragon-modal{
  width:min(1120px,94vw) !important;
  max-width:min(1120px,94vw) !important;
}
.true-dragon-head{
  display:grid;
  grid-template-columns:360px 1fr;
  gap:20px;
  align-items:center;
}
.true-dragon-standing{
  width:100%;
  max-height:620px;
  object-fit:contain;
  border-radius:20px;
  background:radial-gradient(circle,rgba(255,180,210,.14),rgba(255,255,255,.03));
  border:1px solid rgba(255,160,190,.22);
}
.true-dragon-telop{
  position:fixed;
  inset:0;
  z-index:13500;
  pointer-events:none;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:7vh;
  animation:trueDragonTelop 3s ease both;
}
.true-dragon-telop-inner{
  width:min(820px,94vw);
  padding:18px 24px;
  border-radius:18px;
  background:linear-gradient(90deg,rgba(45,8,32,.96),rgba(145,20,58,.94),rgba(45,8,32,.96));
  border:1px solid rgba(255,196,215,.5);
  text-align:center;
  box-shadow:0 28px 110px rgba(0,0,0,.72),0 0 62px rgba(255,58,125,.30);
}
.true-dragon-telop-inner span{
  display:block;
  color:#ff9fbd;
  font-weight:1000;
  letter-spacing:.24em;
}
.true-dragon-telop-inner b{
  display:block;
  margin-top:6px;
  color:#fff;
  font-size:34px;
  text-shadow:0 0 24px rgba(255,70,135,.55);
}
.true-dragon-telop-inner small{
  display:block;
  margin-top:6px;
  color:#f9d5df;
  font-weight:900;
}
@keyframes trueDragonTelop{
  0%{opacity:0; transform:translateY(-24px) scale(.96)}
  12%{opacity:1; transform:translateY(0) scale(1)}
  82%{opacity:1; transform:translateY(0) scale(1)}
  100%{opacity:0; transform:translateY(-10px) scale(.98)}
}
.true-dragon-awaken-modal{
  width:min(1050px,94vw) !important;
}
.true-dragon-awaken-visual{
  height:520px;
  border-radius:22px;
  overflow:hidden;
  background:radial-gradient(circle,rgba(255,200,220,.18),rgba(255,255,255,.03));
  border:1px solid rgba(255,160,190,.22);
  display:flex;
  align-items:center;
  justify-content:center;
}
.true-dragon-awaken-img{
  height:100%;
  width:100%;
  object-fit:contain;
}
.true-dragon-awaken-content h2{
  color:#fff;
  text-shadow:0 0 22px rgba(255,70,135,.5);
}
.true-dragon-strike{
  position:fixed;
  inset:0;
  z-index:14000;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle,rgba(255,45,110,.28),rgba(0,0,0,.12),transparent 68%);
  animation:trueDragonStrike 1.8s ease both;
}
.true-dragon-strike img{
  height:min(86vh,900px);
  max-width:60vw;
  object-fit:contain;
  filter:drop-shadow(0 0 34px rgba(255,80,135,.55));
}
.true-dragon-strike-text{
  margin-left:-60px;
  padding:18px 26px;
  border-radius:18px;
  background:rgba(34,10,28,.88);
  border:1px solid rgba(255,190,210,.46);
  box-shadow:0 0 52px rgba(255,70,135,.25);
}
.true-dragon-strike-text span{
  display:block;
  color:#ff9fbd;
  font-weight:1000;
  letter-spacing:.24em;
}
.true-dragon-strike-text b{
  display:block;
  color:#fff;
  font-size:36px;
  text-shadow:0 0 24px rgba(255,70,135,.55);
}
.true-dragon-strike-text small{
  color:#ffdbe6;
  font-weight:900;
}
@keyframes trueDragonStrike{
  0%{opacity:0; transform:scale(.94)}
  18%{opacity:1; transform:scale(1)}
  75%{opacity:1; transform:scale(1.02)}
  100%{opacity:0; transform:scale(1.05)}
}
@media(max-width:900px){
  .true-dragon-head{grid-template-columns:1fr}
  .true-dragon-awaken-visual{height:420px}
  .true-dragon-strike{flex-direction:column}
  .true-dragon-strike img{max-width:95vw; height:58vh}
  .true-dragon-strike-text{margin-left:0}
  .true-dragon-strike-text b{font-size:26px}
}


/* v5.20 Enemy True Dragon Lilia */
.enemy-true-dragon-panel{
  display:grid;
  grid-template-columns:210px 1fr;
  gap:16px;
  align-items:center;
  margin:12px 0;
  padding:12px;
  border-radius:18px;
  background:linear-gradient(135deg,rgba(120,14,42,.18),rgba(255,255,255,.035));
  border:1px solid rgba(255,105,155,.28);
  box-shadow:0 0 28px rgba(255,55,120,.10);
}
.enemy-true-dragon-panel img{
  width:210px;
  height:190px;
  object-fit:contain;
  border-radius:16px;
  background:radial-gradient(circle,rgba(255,80,140,.14),rgba(255,255,255,.02));
  border:1px solid rgba(255,160,190,.20);
}
.enemy-true-dragon-panel h3{
  margin:6px 0;
  color:#fff;
  font-size:24px;
  text-shadow:0 0 18px rgba(255,70,135,.42);
}
.enemy-true-dragon-panel p{
  color:#d9e1fa;
  line-height:1.65;
}
.enemy-true-dragon-cutin{
  position:fixed;
  inset:0;
  z-index:13900;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
  background:radial-gradient(circle,rgba(120,10,40,.34),rgba(0,0,0,.16),transparent 70%);
  animation:enemyTrueDragonCutin 1.9s ease both;
}
.enemy-true-dragon-cutin img{
  height:min(84vh,880px);
  max-width:58vw;
  object-fit:contain;
  filter:drop-shadow(0 0 36px rgba(255,50,120,.58));
}
.enemy-true-dragon-text{
  margin-left:-80px;
  padding:18px 26px;
  border-radius:18px;
  background:rgba(36,8,28,.90);
  border:1px solid rgba(255,130,180,.48);
  box-shadow:0 0 60px rgba(255,65,135,.26);
}
.enemy-true-dragon-text span{
  display:block;
  color:#ff6f9f;
  font-weight:1000;
  letter-spacing:.24em;
}
.enemy-true-dragon-text b{
  display:block;
  color:#fff;
  font-size:34px;
  text-shadow:0 0 24px rgba(255,70,135,.55);
}
.enemy-true-dragon-text small{
  display:block;
  margin-top:6px;
  color:#ffdbe8;
  font-weight:900;
}
@keyframes enemyTrueDragonCutin{
  0%{opacity:0; transform:scale(.94)}
  18%{opacity:1; transform:scale(1)}
  76%{opacity:1; transform:scale(1.02)}
  100%{opacity:0; transform:scale(1.05)}
}
@media(max-width:900px){
  .enemy-true-dragon-panel{grid-template-columns:1fr}
  .enemy-true-dragon-panel img{width:100%}
  .enemy-true-dragon-cutin{flex-direction:column}
  .enemy-true-dragon-cutin img{max-width:95vw; height:56vh}
  .enemy-true-dragon-text{margin-left:0}
  .enemy-true-dragon-text b{font-size:25px}
}


/* v5.21 Opening crawl */
.opening-crawl-back{
  position:fixed;
  inset:0;
  z-index:15000;
  background:#02040b;
  color:#fff;
  overflow:hidden;
  animation:openingFadeIn .55s ease both;
}
.opening-crawl-back.opening-close{
  animation:openingFadeOut .45s ease both;
}
.opening-cine-layers{
  position:absolute;
  inset:0;
  overflow:hidden;
}
.cine-map{
  position:absolute;
  inset:-6%;
  background-image:url('assets/ui/world_map_full.webp');
  background-size:cover;
  background-position:center;
  opacity:0;
  filter:saturate(.55) brightness(.5) contrast(1.05);
  animation:cineMapReveal 24s ease-in-out 1.15s both;
}
.cine-dragon{
  position:absolute;
  inset:0;
  background-image:url('assets/bosses/ancient_dragon.png');
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center 58%;
  opacity:0;
  filter:drop-shadow(0 0 40px rgba(255,60,40,.5));
  animation:cineDragonReveal 24s ease 1.15s both;
}
.cine-flash{
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 55%, rgba(255,80,50,.6), transparent 60%);
  opacity:0;
  mix-blend-mode:screen;
  animation:cineFlashPulse 24s ease 1.15s both;
}
@keyframes cineMapReveal{
  0%{opacity:0; transform:scale(1.12)}
  18%{opacity:0}
  30%{opacity:.42; transform:scale(1.16)}
  80%{opacity:.32}
  94%{opacity:.08}
  100%{opacity:0; transform:scale(1.2)}
}
@keyframes cineDragonReveal{
  0%{opacity:0; transform:scale(.9)}
  8%{opacity:0}
  14%{opacity:.6; transform:scale(1)}
  26%{opacity:.42}
  36%{opacity:0; transform:scale(1.05)}
  100%{opacity:0}
}
@keyframes cineFlashPulse{
  0%,6%{opacity:0}
  10%{opacity:.85}
  16%{opacity:.22}
  20%{opacity:.6}
  26%{opacity:0}
  100%{opacity:0}
}
.opening-crest-icon{
  position:absolute;
  left:50%;
  top:-46px;
  width:110px;
  height:110px;
  transform:translateX(-50%);
  background-image:url('assets/ui/icon_dragon.png');
  background-size:contain;
  background-repeat:no-repeat;
  background-position:center;
  opacity:0;
  filter:drop-shadow(0 0 16px rgba(255,180,90,.6)) drop-shadow(0 0 34px rgba(255,70,60,.4));
  animation:cineCrestPulse 6s ease .3s both;
}
@keyframes cineCrestPulse{
  0%{opacity:0; transform:translateX(-50%) scale(.7)}
  20%{opacity:1; transform:translateX(-50%) scale(1.05)}
  40%{opacity:.85; transform:translateX(-50%) scale(1)}
  100%{opacity:.55; transform:translateX(-50%) scale(1.02)}
}
.opening-crowns-row{
  display:flex;
  justify-content:center;
  gap:14px;
  margin-top:12px;
  opacity:0;
  animation:cineCrownsRow 24s ease 1.15s both;
}
.opening-crowns-row span{
  width:13px;
  height:13px;
  border-radius:50%;
  background:currentColor;
  box-shadow:0 0 10px 3px currentColor;
  display:inline-block;
}
@keyframes cineCrownsRow{
  0%{opacity:0; transform:translateY(6px)}
  10%{opacity:1; transform:translateY(0)}
  22%{opacity:1}
  30%{opacity:0}
  100%{opacity:0}
}
.opening-crawl-bg{
  position:absolute;
  inset:0;
  background:
    radial-gradient(circle at 50% 16%, rgba(255,212,120,.18), transparent 22%),
    radial-gradient(circle at 42% 62%, rgba(120,50,255,.13), transparent 32%),
    radial-gradient(circle at 70% 72%, rgba(255,40,70,.14), transparent 34%),
    linear-gradient(180deg,#040816,#090512 58%,#05050b);
}
.opening-crawl-bg::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:
    radial-gradient(circle, rgba(255,255,255,.55) 0 1px, transparent 1.4px),
    radial-gradient(circle, rgba(255,220,160,.38) 0 1px, transparent 1.4px);
  background-size:120px 120px, 190px 190px;
  background-position:20px 30px, 80px 90px;
  opacity:.24;
  animation:openingStars 18s linear infinite;
}
.opening-crawl-vignette{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.90) 0%,transparent 24%,transparent 62%,rgba(0,0,0,.96) 100%),
             radial-gradient(circle at center,transparent 35%,rgba(0,0,0,.70) 100%);
  pointer-events:none;
}
.opening-skip-row{
  position:absolute;
  top:18px;
  right:18px;
  z-index:5;
}
.opening-skip-row button{
  padding:8px 14px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18);
  color:#dbe3ff;
  font-weight:900;
}
.opening-crawl-logo{
  position:absolute;
  top:7vh;
  left:50%;
  transform:translateX(-50%);
  z-index:3;
  text-align:center;
  width:min(900px,92vw);
  animation:openingLogo 4.2s ease both;
}
.opening-crawl-logo h1{
  margin:8px 0 2px;
  font-size:clamp(38px,6vw,76px);
  line-height:1;
  color:#fff;
  text-shadow:0 0 28px rgba(255,220,130,.38);
}
.opening-crawl-logo h2{
  margin:0;
  color:#f3d686;
  font-size:clamp(16px,2.5vw,28px);
  letter-spacing:.08em;
}
.opening-hero-silhouette{
  position:absolute;
  right:0;
  bottom:0;
  width:min(50vw,600px);
  height:94vh;
  background-repeat:no-repeat;
  background-position:bottom center;
  background-size:contain;
  opacity:0;
  filter:brightness(0) drop-shadow(0 0 50px var(--story-color,#e7c873)) drop-shadow(0 0 90px var(--story-color,#e7c873));
  animation:cineHeroReveal 24s ease 1.15s both;
  z-index:2;
  pointer-events:none;
}
@keyframes cineHeroReveal{
  0%,58%{opacity:0; transform:translateX(46px) scale(.96)}
  70%{opacity:.5; transform:translateX(0) scale(1)}
  85%{opacity:.62}
  96%{opacity:.12}
  100%{opacity:0}
}
.opening-crawl-stage{
  position:absolute;
  inset:18vh 8vw 14vh;
  z-index:3;
  perspective:480px;
  transform-style:preserve-3d;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}
.opening-crawl-text{
  width:min(920px,92vw);
  text-align:center;
  transform-origin:50% 100%;
  transform:rotateX(24deg) translateY(78vh);
  animation:openingCrawlMove 24s linear 1.15s forwards;
}
.opening-crawl-text p{
  margin:0 0 18px;
  color:#f6df9d;
  font-size:clamp(22px,3.2vw,42px);
  font-weight:900;
  line-height:1.48;
  letter-spacing:.08em;
  text-shadow:0 0 18px rgba(255,210,120,.28);
}
.opening-crawl-text .opening-blank{
  height:18px;
  margin-bottom:14px;
}
.opening-faction-card{
  position:absolute;
  left:24px;
  bottom:24px;
  z-index:4;
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 14px;
  border-radius:16px;
  background:linear-gradient(135deg,color-mix(in srgb, var(--story-color) 20%, rgba(0,0,0,.60)),rgba(255,255,255,.06));
  border:1px solid color-mix(in srgb, var(--story-color) 48%, rgba(255,255,255,.12));
  box-shadow:0 20px 60px rgba(0,0,0,.35);
  animation:openingFaction .9s ease 1.2s both;
}
.opening-faction-card img{
  width:58px;
  height:58px;
  object-fit:cover;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.16);
  background:#10172a;
}
.opening-faction-card b{
  display:block;
  color:#fff;
  font-size:16px;
}
.opening-faction-card span{
  display:block;
  color:#d6def8;
  font-size:12px;
  margin-top:3px;
}
.opening-start-row{
  position:absolute;
  left:50%;
  bottom:34px;
  transform:translateX(-50%);
  z-index:6;
  opacity:0;
  pointer-events:none;
  transition:.55s ease;
}
.opening-start-row.show{
  opacity:1;
  pointer-events:auto;
}
@keyframes openingFadeIn{
  from{opacity:0}
  to{opacity:1}
}
@keyframes openingFadeOut{
  from{opacity:1}
  to{opacity:0}
}
@keyframes openingStars{
  from{transform:translateY(0)}
  to{transform:translateY(120px)}
}
@keyframes openingLogo{
  0%{opacity:0; transform:translateX(-50%) translateY(-18px) scale(.96)}
  18%{opacity:1; transform:translateX(-50%) translateY(0) scale(1)}
  78%{opacity:1}
  100%{opacity:.28; transform:translateX(-50%) translateY(-10px) scale(.98)}
}
@keyframes openingCrawlMove{
  0%{transform:rotateX(24deg) translateY(78vh); opacity:0}
  7%{opacity:1}
  92%{opacity:1}
  100%{transform:rotateX(24deg) translateY(-145vh); opacity:0}
}
@keyframes openingFaction{
  from{opacity:0; transform:translateX(-16px)}
  to{opacity:1; transform:translateX(0)}
}
@keyframes cineHeroRevealMobile{
  0%,58%{opacity:0; transform:translateX(30px) scale(.96)}
  70%{opacity:.3; transform:translateX(0) scale(1)}
  85%{opacity:.36}
  96%{opacity:.08}
  100%{opacity:0}
}
@media(max-width:760px){
  .opening-crawl-stage{inset:20vh 3vw 13vh}
  .opening-crawl-text p{font-size:22px; line-height:1.55}
  .opening-faction-card{left:12px; bottom:12px; transform:scale(.9); transform-origin:left bottom}
  .opening-start-row{bottom:96px}
  .opening-hero-silhouette{width:70vw; right:-6vw; animation:cineHeroRevealMobile 24s ease 1.15s both}
  .title-crest-glow{width:92px; height:92px; top:-42px}
}


/* v5.22 command access fix */
.side-command-buttons{
  gap:8px !important;
  flex-wrap:wrap !important;
  align-items:center;
}
.side-command-buttons button{
  min-width:76px;
}
.quick-military-btn{
  background:linear-gradient(135deg,#7d1f2a,#b82e3a) !important;
  border-color:rgba(255,120,120,.45) !important;
  color:#fff !important;
}
.quick-domestic-btn{
  background:linear-gradient(135deg,#166b3a,#23804b) !important;
  border-color:rgba(120,255,170,.38) !important;
  color:#fff !important;
}
.commands.menu-groups{
  position:sticky;
  bottom:0;
  z-index:30;
  padding-top:10px;
  padding-bottom:8px;
  background:linear-gradient(180deg,rgba(10,14,26,.60),rgba(10,14,26,.96));
  backdrop-filter:blur(8px);
  border-top:1px solid rgba(255,255,255,.08);
}
.map-panel{
  overflow:visible !important;
}
@media(max-width:980px){
  .side-command-buttons button{min-width:68px; padding-left:10px; padding-right:10px}
}


/* v5.28 PWA support */
html, body {
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
button, .multi-troop-option, .territory {
  -webkit-user-select: none;
  user-select: none;
}
@media (max-width: 820px) and (orientation: portrait) {
  body::before {
    content: "横画面でのプレイを推奨します";
    position: fixed;
    z-index: 20000;
    left: 50%;
    top: 10px;
    transform: translateX(-50%);
    padding: 8px 12px;
    border-radius: 999px;
    background: rgba(8, 10, 22, .88);
    border: 1px solid rgba(255,255,255,.16);
    color: #f5d982;
    font-weight: 900;
    font-size: 12px;
    pointer-events: none;
  }
}


/* v5.29 mobile map full-view / pinch zoom support */
.map-head{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:10px;}
.mobile-map-toolbar{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:0 0 10px;color:#d8e2ff;font-size:12px;}
.mobile-map-toolbar span{margin-right:auto;color:#f1dda0;font-weight:800;line-height:1.3;}
.mobile-map-toolbar button{min-width:46px;padding:7px 10px;border-radius:10px;font-size:13px;font-weight:900;}
.map-viewport{position:relative;overflow:hidden;height:calc(100% - 126px);min-height:520px;border-radius:18px;border:1px solid rgba(231,200,115,.28);background:#050812;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), inset 0 -80px 130px rgba(0,0,0,.18);touch-action:none;user-select:none;}
.map-viewport > .map-stage{position:absolute !important;inset:0 !important;width:100% !important;height:100% !important;min-height:0 !important;border:0 !important;border-radius:0 !important;transform-origin:0 0 !important;will-change:transform;cursor:grab;background-size:100% 100% !important;}
.map-viewport > .map-stage.map-is-zoomed{cursor:grabbing;}
.map-viewport > .map-stage::after{pointer-events:none;}
@media(max-width:980px){
  .screen{padding:10px 8px 14px !important;}
  .header{height:auto !important;min-height:0 !important;display:block !important;padding:10px 12px !important;border-radius:16px !important;}
  .header h1{font-size:20px !important;line-height:1.2 !important;margin-bottom:8px !important;word-break:keep-all;}
  .stat-row{gap:6px !important;}
  .stat{font-size:11px !important;padding:6px 7px !important;border-radius:8px !important;}
  .main-grid{gap:10px !important;margin-top:10px !important;}
  .map-panel{padding:10px !important;overflow:visible !important;}
  .map-head{align-items:flex-start;gap:6px;margin-bottom:8px;}
  .map-head b{font-size:15px;white-space:nowrap;}
  .map-note{font-size:10px !important;padding:5px 7px !important;line-height:1.2;}
  .mobile-map-toolbar{display:grid;grid-template-columns:1fr 42px 54px 42px;gap:6px;margin-bottom:8px;}
  .mobile-map-toolbar span{font-size:10px;}
  .mobile-map-toolbar button{min-width:0;padding:7px 4px;font-size:12px;}
  .map-viewport{width:100% !important;aspect-ratio:16/9 !important;height:auto !important;min-height:0 !important;max-height:none !important;border-radius:12px !important;}
  .map-viewport > .map-stage{height:100% !important;min-height:0 !important;background-size:100% 100% !important;}
  .map-node{width:54px !important;height:54px !important;transform:translate(-50%,-58%) !important;}
  .node-icon{width:48px !important;height:36px !important;}
  .node-label{min-width:54px !important;max-width:70px !important;font-size:8.5px !important;padding:2px 4px !important;overflow:hidden;text-overflow:ellipsis;}
  .node-flag{width:21px !important;height:10px !important;}
  .node-flag-pole{height:23px !important;}
  .attack-badge,.source-badge{font-size:8px !important;padding:2px 4px !important;}
  .commands.menu-groups{grid-template-columns:repeat(2,minmax(0,1fr)) !important;gap:8px !important;margin-top:10px !important;position:sticky !important;bottom:0 !important;z-index:60 !important;}
  .commands.menu-groups button{font-size:13px !important;padding:11px 6px !important;}
  .side{display:block !important;}
  .leader-box{grid-template-columns:72px 1fr !important;padding:12px !important;}
  .face{width:72px !important;height:72px !important;border-radius:13px !important;}
  .leader-name{font-size:19px !important;}
  .desc{font-size:12px !important;}
  .info-box{padding:12px !important;overflow:visible !important;}
  .info-list div{display:grid !important;grid-template-columns:80px 1fr;gap:6px;font-size:12px !important;}
}
@media(max-width:760px){.map-viewport > .map-stage{height:100% !important;}}
@media(max-width:820px) and (orientation:portrait){body::before{content:"横画面推奨。マップはピンチで拡大できます" !important;}}


/* v5.30 desktop map bottom visibility fix */
@media (min-width:981px){
  .map-panel{
    display:flex !important;
    flex-direction:column !important;
    min-height:0 !important;
    overflow:hidden !important;
  }
  .map-head,
  .mobile-map-toolbar{
    flex:0 0 auto !important;
  }
  .map-viewport{
    flex:1 1 auto !important;
    height:auto !important;
    min-height:500px !important;
    margin-bottom:16px !important;
    overflow:hidden !important;
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.06),
      inset 0 -92px 120px rgba(0,0,0,.30) !important;
  }
  .map-viewport > .map-stage{
    top:0 !important;
    bottom:auto !important;
    height:94% !important;
    min-height:0 !important;
    background-size:100% 100% !important;
  }
  .map-viewport::after{
    content:"";
    position:absolute;
    left:0;
    right:0;
    bottom:0;
    height:7.5%;
    pointer-events:none;
    background:linear-gradient(180deg,rgba(5,8,18,0),rgba(5,8,18,.42));
  }
  .commands.menu-groups{
    position:relative !important;
    bottom:auto !important;
    z-index:2 !important;
    flex:0 0 auto !important;
    margin-top:0 !important;
    padding-top:0 !important;
    background:transparent !important;
    backdrop-filter:none !important;
    border-top:0 !important;
  }
}

/* v5.32 tactical defense controls */
.defense-action-buttons{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.defense-action-buttons button{min-width:104px}
.tactical-defense-btn{background:linear-gradient(180deg,#315f96,#18375f)!important;border-color:rgba(116,179,255,.7)!important;color:#eef7ff!important;font-weight:900!important}
@media(max-width:700px){
  .defense-choice{grid-template-columns:1fr}
  .defense-action-buttons{display:grid;grid-template-columns:1fr 1fr;width:100%}
  .defense-action-buttons button{min-width:0;padding:10px 6px}
}

/* =========================================================
   v5.34 Officer equipment / item shop
   ========================================================= */
.equipment-summary-line{color:#8ed8ff!important}
.equipment-manage-btn{background:linear-gradient(135deg,#2467a8,#153b78)!important;border-color:#70c9ff!important}
.equipment-modal,.equipment-shop-modal{width:min(1180px,94vw);max-height:92vh;overflow:auto}
.equipment-officer-head{display:flex;align-items:center;gap:14px;padding:14px;border:1px solid rgba(116,205,255,.25);background:linear-gradient(135deg,rgba(24,50,91,.9),rgba(13,22,45,.92));border-radius:16px;margin-bottom:12px}
.equipment-officer-head img{width:86px;height:86px;object-fit:cover;border-radius:14px;border:2px solid rgba(222,190,96,.75)}
.equipment-officer-head div{display:flex;flex-direction:column;gap:5px;min-width:0}
.equipment-officer-head b{font-size:22px;color:#fff}
.equipment-officer-head span{color:#e0c978}
.equipment-officer-head small{color:#a9c8e8;line-height:1.5}
.equipment-total-stats{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 14px}
.equipment-total-stats span{padding:6px 9px;border-radius:999px;background:rgba(70,142,207,.16);border:1px solid rgba(98,186,255,.28);font-size:12px;color:#d9efff}
.equipment-slots-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.equipment-slot-card{border:1px solid rgba(255,255,255,.12);background:rgba(5,12,27,.6);border-radius:15px;padding:12px;min-width:0}
.equipment-slot-head{display:grid;grid-template-columns:1fr auto;gap:5px 8px;align-items:center;margin-bottom:9px;padding-bottom:9px;border-bottom:1px solid rgba(255,255,255,.1)}
.equipment-slot-head h3{margin:0;color:#e0c46c;font-size:15px}
.equipment-slot-head b{font-size:12px;color:#fff;text-align:right}
.equipment-slot-head button{grid-column:2;font-size:11px;padding:5px 8px}
.equipment-item-row{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:9px 0;border-bottom:1px solid rgba(255,255,255,.07)}
.equipment-item-row:last-child{border-bottom:0}
.equipment-item-row>div{display:flex;flex-direction:column;gap:3px;min-width:0}
.equipment-item-row b{font-size:13px;color:#fff}
.equipment-item-row span{font-size:11px;color:#aebbd3;line-height:1.4}
.equipment-item-row small{font-size:10px;color:#74c7f4}
.equipment-item-row button{font-size:11px;padding:6px 9px}
.equipment-item-row.equipped{background:rgba(79,188,126,.1)}
.equipment-item-row.incompatible{opacity:.55}
.consumable-stock{margin-top:14px;padding:12px;border-radius:14px;background:rgba(25,67,55,.25);border:1px solid rgba(89,218,159,.23)}
.consumable-stock h3{margin:0 0 10px;color:#85e8b2;font-size:15px}
.consumable-stock>div{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.consumable-stock>div>div{display:grid;grid-template-columns:1fr auto;gap:4px;padding:8px;border-radius:10px;background:rgba(0,0,0,.22)}
.consumable-stock span{font-size:12px}.consumable-stock b{color:#fff}.consumable-stock small{grid-column:1/-1;color:#9fd8bd;font-size:10px}
.equipment-shop-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.shop-item-card{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:12px;border-radius:14px;background:rgba(8,17,36,.75);border:1px solid rgba(255,255,255,.1)}
.shop-item-card>div{display:flex;flex-direction:column;gap:4px;min-width:0}.shop-item-card span{font-size:10px;color:#d4b85b}.shop-item-card b{font-size:14px}.shop-item-card p{font-size:11px;color:#aeb8d0;margin:0;line-height:1.4}.shop-item-card small{font-size:10px;color:#78caf2}.shop-item-card button{white-space:nowrap}
@media(max-width:900px){.equipment-slots-grid,.equipment-shop-grid{grid-template-columns:1fr}.consumable-stock>div{grid-template-columns:1fr}.equipment-modal,.equipment-shop-modal{width:96vw}.equipment-officer-head img{width:70px;height:70px}}


/* =========================================================
   v5.35 Royal Crown equipment
   ========================================================= */
.crown-equipment-card{margin:14px 0;padding:15px;border-radius:17px;border:1px solid rgba(236,196,83,.38);background:radial-gradient(circle at 10% 0,rgba(188,128,32,.18),transparent 34%),linear-gradient(145deg,rgba(32,24,22,.94),rgba(12,17,31,.96));box-shadow:inset 0 0 28px rgba(226,169,54,.06)}
.crown-section-head{display:flex;justify-content:space-between;gap:12px;align-items:center;padding-bottom:10px;border-bottom:1px solid rgba(240,198,82,.2)}
.crown-section-head span{font-size:9px;letter-spacing:.24em;color:#d9b85f}.crown-section-head h3{margin:3px 0 0;font-size:18px;color:#fff2c1}.crown-section-head>b{display:grid;place-items:center;min-width:58px;height:42px;border-radius:999px;border:1px solid #d7b45c;background:rgba(93,62,13,.45);color:#ffe69a;font-size:18px}
.crown-equipment-card>h4{margin:14px 0 7px;color:#dfc473;font-size:13px}.crown-items-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.crown-item-card{display:grid;grid-template-columns:42px 1fr auto;gap:9px;align-items:center;padding:10px;border-radius:13px;border:1px solid rgba(255,255,255,.11);background:rgba(255,255,255,.035)}
.crown-item-card.equipped{border-color:rgba(245,198,75,.44);background:linear-gradient(135deg,rgba(125,83,16,.2),rgba(255,255,255,.035))}.crown-glyph{display:grid;place-items:center;width:39px;height:39px;border-radius:50%;border:1px solid rgba(238,196,79,.48);background:rgba(98,65,11,.42);color:#ffe38a;font-size:23px;text-shadow:0 0 12px #ffb52e}
.crown-item-card>div:nth-child(2){display:flex;flex-direction:column;gap:3px;min-width:0}.crown-item-card b{color:#fff3c8;font-size:13px}.crown-item-card span{color:#b9bfd0;font-size:10px;line-height:1.4}.crown-item-card small{color:#e2bd61;font-size:10px}.crown-item-card button{font-size:11px;padding:6px 9px}
.crown-empty{grid-column:1/-1;margin:0;padding:13px;border-radius:11px;background:rgba(255,255,255,.025);color:#8994aa;font-size:11px;line-height:1.5}.crown-lock-card{margin:14px 0;padding:12px 14px;border-radius:13px;border:1px dashed rgba(210,181,97,.28);display:flex;flex-direction:column;gap:4px;background:rgba(84,65,23,.08)}.crown-lock-card b{color:#d9bf74}.crown-lock-card span{font-size:11px;color:#929db3}
@media(max-width:760px){.crown-items-grid{grid-template-columns:1fr}.crown-item-card{grid-template-columns:36px 1fr auto}.crown-glyph{width:34px;height:34px;font-size:19px}.crown-section-head h3{font-size:15px}}
.war-action-stat{border-color:rgba(255,121,88,.4)!important;background:rgba(130,42,25,.25)!important;color:#ffd1c5!important}

/* =========================================================
   v5.39 smartphone landscape: fit the whole world map onscreen
   ========================================================= */
@media (max-width:980px) and (orientation:landscape){
  html,body,#app{width:100%;height:100%;min-height:100%;}
  body{overflow:auto!important;overscroll-behavior-y:none;}
  .screen{
    position:relative!important;
    inset:auto!important;
    min-height:100dvh!important;
    padding:4px 6px 8px!important;
  }
  .header{
    min-height:38px!important;
    padding:4px 8px!important;
    border-radius:10px!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:8px!important;
    overflow:hidden!important;
  }
  .header h1{
    flex:0 0 auto!important;
    font-size:14px!important;
    line-height:1.1!important;
    margin:0!important;
    white-space:nowrap!important;
  }
  .stat-row{
    flex:1 1 auto!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:4px!important;
    overflow-x:auto!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch;
  }
  .stat-row::-webkit-scrollbar{display:none}
  .stat{flex:0 0 auto!important;font-size:9px!important;padding:4px 6px!important;border-radius:7px!important;}

  .main-grid{
    display:block!important;
    height:auto!important;
    min-height:0!important;
    margin-top:4px!important;
  }
  .map-panel{
    display:flex!important;
    flex-direction:column!important;
    width:100%!important;
    height:calc(100dvh - 50px)!important;
    min-height:300px!important;
    padding:5px!important;
    border-radius:12px!important;
    overflow:hidden!important;
  }
  .map-head{
    flex:0 0 auto!important;
    min-height:22px!important;
    margin:0 2px 3px!important;
    align-items:center!important;
  }
  .map-head b{font-size:11px!important;}
  .map-note{font-size:8px!important;padding:2px 5px!important;line-height:1.1!important;max-width:55vw!important;}
  .mobile-map-toolbar{
    flex:0 0 auto!important;
    display:flex!important;
    align-items:center!important;
    gap:4px!important;
    min-height:25px!important;
    margin:0 1px 3px!important;
  }
  .mobile-map-toolbar span{font-size:8px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;}
  .mobile-map-toolbar button{min-width:31px!important;height:24px!important;padding:2px 5px!important;border-radius:7px!important;font-size:9px!important;box-shadow:none!important;}

  .map-viewport{
    flex:1 1 auto!important;
    width:auto!important;
    height:auto!important;
    min-height:0!important;
    max-height:none!important;
    aspect-ratio:auto!important;
    margin:0 auto!important;
    border-radius:9px!important;
    /* Keep the complete 16:9 map visible, with harmless side letterboxing. */
    inline-size:min(100%, calc((100dvh - 126px) * 16 / 9))!important;
    block-size:min(calc(100dvh - 126px), calc((100vw - 12px) * 9 / 16))!important;
  }
  .map-viewport > .map-stage{
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    background-size:100% 100%!important;
    background-position:center!important;
  }
  .map-node{width:43px!important;height:43px!important;transform:translate(-50%,-58%)!important;}
  .node-icon{width:39px!important;height:29px!important;}
  .node-label{min-width:43px!important;max-width:58px!important;font-size:6.8px!important;padding:1px 3px!important;line-height:1.15!important;}
  .node-flag{width:17px!important;height:8px!important;}
  .node-flag-pole{height:18px!important;}
  .attack-badge,.source-badge{font-size:6px!important;padding:1px 3px!important;}

  .commands.menu-groups{
    flex:0 0 auto!important;
    position:relative!important;
    bottom:auto!important;
    display:flex!important;
    grid-template-columns:none!important;
    gap:4px!important;
    width:100%!important;
    margin:4px 0 0!important;
    padding:0 0 1px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    background:transparent!important;
    scrollbar-width:none!important;
    -webkit-overflow-scrolling:touch;
  }
  .commands.menu-groups::-webkit-scrollbar{display:none}
  .commands.menu-groups button{
    flex:1 0 74px!important;
    min-width:74px!important;
    min-height:30px!important;
    padding:4px 7px!important;
    border-radius:8px!important;
    font-size:10px!important;
    line-height:1.1!important;
    box-shadow:none!important;
  }
  .side{margin-top:8px!important;}
}

/* =========================================================
   v5.40 robust smartphone landscape world-map layout
   Applies by short viewport height as well as CSS width so that
   Safari/Chrome browser chrome cannot prevent the landscape UI.
   ========================================================= */
@media (orientation:landscape) and (max-height:620px),
       (orientation:landscape) and (max-width:1180px){
  html,body,#app{
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  body{
    padding-left:env(safe-area-inset-left)!important;
    padding-right:env(safe-area-inset-right)!important;
    padding-top:env(safe-area-inset-top)!important;
    padding-bottom:env(safe-area-inset-bottom)!important;
  }
  .screen{
    box-sizing:border-box!important;
    width:100%!important;
    height:100svh!important;
    min-height:0!important;
    padding:3px 5px 5px!important;
    overflow:hidden!important;
  }
  .header{
    box-sizing:border-box!important;
    height:34px!important;
    min-height:34px!important;
    padding:3px 7px!important;
    margin:0!important;
    border-radius:8px!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    align-items:center!important;
    gap:6px!important;
    overflow:hidden!important;
  }
  .header h1{
    flex:0 0 auto!important;
    max-width:31vw!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:12px!important;
    line-height:1!important;
  }
  .stat-row{
    flex:1 1 0!important;
    min-width:0!important;
    display:flex!important;
    flex-wrap:nowrap!important;
    gap:3px!important;
    overflow-x:auto!important;
    overflow-y:hidden!important;
    scrollbar-width:none!important;
  }
  .stat-row::-webkit-scrollbar{display:none!important;}
  .stat{
    flex:0 0 auto!important;
    padding:3px 5px!important;
    border-radius:6px!important;
    font-size:8px!important;
    line-height:1.15!important;
  }

  .main-grid{
    display:grid!important;
    grid-template-columns:minmax(0,1fr)!important;
    width:100%!important;
    height:calc(100svh - 41px)!important;
    min-height:0!important;
    margin:4px 0 0!important;
    gap:0!important;
    overflow:hidden!important;
  }
  .main-grid > .side{display:none!important;}

  .map-panel{
    position:relative!important;
    box-sizing:border-box!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 104px!important;
    grid-template-rows:20px 25px minmax(0,1fr)!important;
    column-gap:5px!important;
    row-gap:2px!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    padding:4px!important;
    border-radius:10px!important;
    overflow:hidden!important;
  }
  .map-head{
    grid-column:1!important;
    grid-row:1!important;
    min-width:0!important;
    min-height:0!important;
    margin:0!important;
    display:flex!important;
    align-items:center!important;
    gap:5px!important;
    overflow:hidden!important;
  }
  .map-head b{flex:0 0 auto!important;font-size:10px!important;line-height:1!important;}
  .map-note{
    min-width:0!important;
    max-width:none!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    padding:1px 4px!important;
    font-size:7px!important;
    line-height:1.1!important;
  }
  .mobile-map-toolbar{
    grid-column:1!important;
    grid-row:2!important;
    min-width:0!important;
    min-height:0!important;
    height:25px!important;
    margin:0!important;
    display:grid!important;
    grid-template-columns:minmax(0,1fr) 29px 38px 29px!important;
    align-items:center!important;
    gap:3px!important;
  }
  .mobile-map-toolbar span{
    min-width:0!important;
    margin:0!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    white-space:nowrap!important;
    font-size:7px!important;
  }
  .mobile-map-toolbar button{
    min-width:0!important;
    width:100%!important;
    height:22px!important;
    padding:1px 3px!important;
    border-radius:6px!important;
    font-size:8px!important;
    line-height:1!important;
    box-shadow:none!important;
  }
  .map-viewport{
    grid-column:1!important;
    grid-row:3!important;
    align-self:center!important;
    justify-self:center!important;
    box-sizing:border-box!important;
    width:min(100%, calc((100svh - 94px) * 16 / 9))!important;
    height:auto!important;
    max-width:100%!important;
    max-height:100%!important;
    min-height:0!important;
    aspect-ratio:16 / 9!important;
    margin:0!important;
    border-radius:8px!important;
    overflow:hidden!important;
  }
  .map-viewport > .map-stage{
    position:absolute!important;
    inset:0!important;
    width:100%!important;
    height:100%!important;
    min-height:0!important;
    background-size:100% 100%!important;
    background-position:center!important;
  }
  .map-node{width:39px!important;height:39px!important;transform:translate(-50%,-58%)!important;}
  .node-icon{width:35px!important;height:26px!important;}
  .node-label{min-width:39px!important;max-width:54px!important;padding:1px 2px!important;font-size:6.2px!important;line-height:1.05!important;}
  .node-flag{width:15px!important;height:7px!important;}
  .node-flag-pole{height:16px!important;}
  .attack-badge,.source-badge{font-size:5.5px!important;padding:1px 2px!important;}

  .commands.menu-groups{
    grid-column:2!important;
    grid-row:1 / 4!important;
    position:relative!important;
    inset:auto!important;
    box-sizing:border-box!important;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-auto-rows:minmax(25px,1fr)!important;
    align-content:stretch!important;
    width:104px!important;
    height:100%!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    gap:3px!important;
    overflow-y:auto!important;
    overflow-x:hidden!important;
    background:transparent!important;
    border:0!important;
    backdrop-filter:none!important;
    scrollbar-width:none!important;
  }
  .commands.menu-groups::-webkit-scrollbar{display:none!important;}
  .commands.menu-groups button{
    box-sizing:border-box!important;
    width:100%!important;
    min-width:0!important;
    min-height:25px!important;
    height:auto!important;
    padding:3px 4px!important;
    border-radius:7px!important;
    font-size:9px!important;
    line-height:1!important;
    white-space:nowrap!important;
    box-shadow:none!important;
  }

  .war-mode-bar,.dragon-boss-bar,.true-dragon-bar{
    position:absolute!important;
    z-index:75!important;
    left:8px!important;
    right:113px!important;
    bottom:7px!important;
    min-height:28px!important;
    padding:3px 6px!important;
    border-radius:7px!important;
    font-size:8px!important;
  }
  .war-mode-bar button,.dragon-boss-bar button,.true-dragon-bar button{
    min-height:22px!important;
    padding:2px 5px!important;
    font-size:8px!important;
  }
}

/* Extra-tight phones, including landscape with the browser toolbar visible. */
@media (orientation:landscape) and (max-height:430px){
  .header{height:30px!important;min-height:30px!important;}
  .main-grid{height:calc(100svh - 37px)!important;}
  .map-panel{grid-template-columns:minmax(0,1fr) 90px!important;grid-template-rows:17px 21px minmax(0,1fr)!important;}
  .commands.menu-groups{width:90px!important;gap:2px!important;}
  .commands.menu-groups button{min-height:21px!important;padding:2px 3px!important;font-size:8px!important;}
  .mobile-map-toolbar{height:21px!important;grid-template-columns:minmax(0,1fr) 26px 34px 26px!important;}
  .mobile-map-toolbar button{height:19px!important;}
  .map-viewport{width:min(100%, calc((100svh - 79px) * 16 / 9))!important;}
  .map-node{width:35px!important;height:35px!important;}
  .node-icon{width:31px!important;height:23px!important;}
  .node-label{font-size:5.7px!important;min-width:35px!important;max-width:49px!important;}
}


/* =========================================================
   v5.41 forced touch-landscape side command UI
   Uses a JS-added html.mobile-landscape-ui class because some
   mobile browsers report desktop-like media-query dimensions.
   ========================================================= */
html.mobile-landscape-ui,
html.mobile-landscape-ui body,
html.mobile-landscape-ui #app{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  overflow:hidden!important;
}
html.mobile-landscape-ui body{
  padding-left:env(safe-area-inset-left)!important;
  padding-right:env(safe-area-inset-right)!important;
  padding-top:env(safe-area-inset-top)!important;
  padding-bottom:env(safe-area-inset-bottom)!important;
}
html.mobile-landscape-ui .screen{
  box-sizing:border-box!important;
  width:100%!important;
  height:100dvh!important;
  height:100svh!important;
  min-height:0!important;
  padding:3px 5px 5px!important;
  overflow:hidden!important;
}
html.mobile-landscape-ui .header{
  box-sizing:border-box!important;
  height:34px!important;
  min-height:34px!important;
  margin:0!important;
  padding:3px 7px!important;
  display:flex!important;
  flex-wrap:nowrap!important;
  align-items:center!important;
  gap:6px!important;
  border-radius:8px!important;
  overflow:hidden!important;
}
html.mobile-landscape-ui .header h1{
  flex:0 0 auto!important;
  max-width:30vw!important;
  margin:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:12px!important;
  line-height:1!important;
}
html.mobile-landscape-ui .stat-row{
  flex:1 1 0!important;
  min-width:0!important;
  display:flex!important;
  flex-wrap:nowrap!important;
  gap:3px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  scrollbar-width:none!important;
}
html.mobile-landscape-ui .stat-row::-webkit-scrollbar{display:none!important;}
html.mobile-landscape-ui .stat{
  flex:0 0 auto!important;
  padding:3px 5px!important;
  border-radius:6px!important;
  font-size:8px!important;
  line-height:1.1!important;
}
html.mobile-landscape-ui .main-grid{
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr)!important;
  width:100%!important;
  height:calc(100svh - 41px)!important;
  min-height:0!important;
  margin:4px 0 0!important;
  gap:0!important;
  overflow:hidden!important;
}
html.mobile-landscape-ui .main-grid > .side{display:none!important;}
html.mobile-landscape-ui .map-panel{
  position:relative!important;
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) clamp(92px,12vw,124px)!important;
  grid-template-rows:19px 24px minmax(0,1fr)!important;
  column-gap:5px!important;
  row-gap:2px!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  padding:4px!important;
  border-radius:10px!important;
  overflow:hidden!important;
}
html.mobile-landscape-ui .map-head{
  grid-column:1!important;
  grid-row:1!important;
  min-width:0!important;
  margin:0!important;
  display:flex!important;
  align-items:center!important;
  gap:5px!important;
  overflow:hidden!important;
}
html.mobile-landscape-ui .map-head b{
  flex:0 0 auto!important;
  font-size:10px!important;
  line-height:1!important;
}
html.mobile-landscape-ui .map-note{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  padding:1px 4px!important;
  font-size:7px!important;
  line-height:1.1!important;
}
html.mobile-landscape-ui .mobile-map-toolbar{
  grid-column:1!important;
  grid-row:2!important;
  min-width:0!important;
  height:24px!important;
  margin:0!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 29px 38px 29px!important;
  align-items:center!important;
  gap:3px!important;
}
html.mobile-landscape-ui .mobile-map-toolbar span{
  min-width:0!important;
  margin:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:7px!important;
}
html.mobile-landscape-ui .mobile-map-toolbar button{
  box-sizing:border-box!important;
  min-width:0!important;
  width:100%!important;
  height:21px!important;
  padding:1px 3px!important;
  border-radius:6px!important;
  font-size:8px!important;
  line-height:1!important;
  box-shadow:none!important;
}
html.mobile-landscape-ui .map-viewport{
  grid-column:1!important;
  grid-row:3!important;
  align-self:center!important;
  justify-self:center!important;
  box-sizing:border-box!important;
  width:min(100%, calc((100svh - 91px) * 16 / 9))!important;
  height:auto!important;
  max-width:100%!important;
  max-height:100%!important;
  min-height:0!important;
  aspect-ratio:16 / 9!important;
  margin:0!important;
  border-radius:8px!important;
  overflow:hidden!important;
}
html.mobile-landscape-ui .map-viewport > .map-stage{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  background-size:100% 100%!important;
  background-position:center!important;
}
html.mobile-landscape-ui .commands.menu-groups{
  grid-column:2!important;
  grid-row:1 / 4!important;
  position:relative!important;
  inset:auto!important;
  box-sizing:border-box!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-auto-rows:minmax(24px,1fr)!important;
  align-content:stretch!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  gap:3px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  background:linear-gradient(180deg,rgba(18,25,48,.82),rgba(7,11,24,.92))!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:8px!important;
  backdrop-filter:blur(7px)!important;
  scrollbar-width:none!important;
}
html.mobile-landscape-ui .commands.menu-groups::-webkit-scrollbar{display:none!important;}
html.mobile-landscape-ui .commands.menu-groups button{
  box-sizing:border-box!important;
  width:100%!important;
  min-width:0!important;
  min-height:24px!important;
  height:auto!important;
  padding:3px 4px!important;
  border-radius:6px!important;
  font-size:9px!important;
  line-height:1!important;
  white-space:nowrap!important;
  box-shadow:none!important;
}
html.mobile-landscape-ui .map-node{width:39px!important;height:39px!important;transform:translate(-50%,-58%)!important;}
html.mobile-landscape-ui .node-icon{width:35px!important;height:26px!important;}
html.mobile-landscape-ui .node-label{min-width:39px!important;max-width:54px!important;padding:1px 2px!important;font-size:6.2px!important;line-height:1.05!important;}
html.mobile-landscape-ui .node-flag{width:15px!important;height:7px!important;}
html.mobile-landscape-ui .node-flag-pole{height:16px!important;}
html.mobile-landscape-ui .attack-badge,
html.mobile-landscape-ui .source-badge{font-size:5.5px!important;padding:1px 2px!important;}
html.mobile-landscape-ui .war-mode-bar,
html.mobile-landscape-ui .dragon-boss-bar,
html.mobile-landscape-ui .true-dragon-bar{
  position:absolute!important;
  z-index:75!important;
  left:8px!important;
  right:calc(clamp(92px,12vw,124px) + 9px)!important;
  bottom:7px!important;
  min-height:27px!important;
  padding:3px 6px!important;
  border-radius:7px!important;
  font-size:8px!important;
}
@media (max-height:430px){
  html.mobile-landscape-ui .header{height:30px!important;min-height:30px!important;}
  html.mobile-landscape-ui .main-grid{height:calc(100svh - 37px)!important;}
  html.mobile-landscape-ui .map-panel{grid-template-columns:minmax(0,1fr) 90px!important;grid-template-rows:17px 21px minmax(0,1fr)!important;}
  html.mobile-landscape-ui .commands.menu-groups{gap:2px!important;}
  html.mobile-landscape-ui .commands.menu-groups button{min-height:21px!important;padding:2px 3px!important;font-size:8px!important;}
  html.mobile-landscape-ui .mobile-map-toolbar{height:21px!important;grid-template-columns:minmax(0,1fr) 26px 34px 26px!important;}
  html.mobile-landscape-ui .mobile-map-toolbar button{height:19px!important;}
  html.mobile-landscape-ui .map-viewport{width:min(100%, calc((100svh - 78px) * 16 / 9))!important;}
}


/* v5.42 拠点工作の即時結果表示 */
.sabotage-result-card{
  display:grid;
  gap:5px;
  margin:10px 0 12px;
  padding:12px 14px;
  border:1px solid rgba(255,196,94,.48);
  border-radius:12px;
  background:linear-gradient(135deg,rgba(90,54,18,.42),rgba(25,28,42,.86));
}
.sabotage-result-card.success{border-color:rgba(103,220,154,.58);}
.sabotage-result-card.failed{border-color:rgba(255,104,118,.55);}
.sabotage-result-card b{color:#ffe39b;}
.sabotage-result-card.success b{color:#8ef0b7;}
.sabotage-result-card.failed b{color:#ff9aa6;}
.sabotage-result-card span{font-size:13px;color:#e7ebf7;}
.sabotage-result-card em{font-style:normal;font-weight:800;color:#ffca68;}


/* =========================================================
   v5.43 guaranteed compact landscape command rail
   Keep map and commands in one viewport even in desktop-site mode.
   ========================================================= */
html.mobile-landscape-ui .map-panel > .commands.menu-groups{
  display:grid!important;
  position:relative!important;
  grid-column:2!important;
  grid-row:1 / -1!important;
  left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;
  transform:none!important;
  max-width:none!important;
}
html.mobile-landscape-ui .map-panel > .commands.menu-groups button{
  margin:0!important;
}
html.mobile-landscape-ui .map-panel{
  grid-template-columns:minmax(0,1fr) clamp(96px,13vw,132px)!important;
}
html.mobile-landscape-ui .map-viewport{
  width:100%!important;
  max-width:calc((100svh - 92px) * 16 / 9)!important;
}
html.mobile-landscape-ui .main-grid{
  grid-template-columns:minmax(0,1fr)!important;
}
@media (orientation:landscape) and (max-height:950px) and (max-width:1900px){
  html.mobile-landscape-ui .commands.menu-groups{
    position:relative!important;
    bottom:auto!important;
  }
}


/* =========================================================
   v5.44 mobile landscape performance mode
   ========================================================= */
html.mobile-landscape-ui body{
  background:#080d19!important;
}
html.mobile-landscape-ui .main-screen{
  padding:4px 6px 6px!important;
}
html.mobile-landscape-ui .main-screen .header,
html.mobile-landscape-ui .main-screen .panel,
html.mobile-landscape-ui .main-screen button,
html.mobile-landscape-ui .main-screen .stat{
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
html.mobile-landscape-ui .main-screen .header,
html.mobile-landscape-ui .main-screen .map-panel{
  background:#111729!important;
}
html.mobile-landscape-ui .main-screen .map-panel{
  grid-template-columns:minmax(0,1fr) clamp(106px,12vw,132px)!important;
  contain:layout paint style;
}
html.mobile-landscape-ui .main-screen .commands.menu-groups{
  background:#0c1222!important;
  border:1px solid rgba(255,255,255,.11)!important;
  padding:3px!important;
  gap:3px!important;
  overscroll-behavior:contain;
}
html.mobile-landscape-ui .main-screen .commands.menu-groups button{
  min-height:30px!important;
  font-size:10px!important;
  background:#263252!important;
  border-color:rgba(255,255,255,.16)!important;
  touch-action:manipulation;
}
html.mobile-landscape-ui .main-screen .commands.menu-groups button:active{
  background:#34446d!important;
  transform:none!important;
}
html.mobile-landscape-ui .main-screen .commands.menu-groups .war-command-btn{
  background:#8d2438!important;
}
html.mobile-landscape-ui .main-screen .map-viewport{
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  aspect-ratio:16/9!important;
  contain:layout paint;
  background:#050914!important;
  touch-action:none!important;
  overscroll-behavior:contain;
}
html.mobile-landscape-ui .main-screen .map-stage{
  transform-origin:0 0!important;
  will-change:transform;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  contain:layout paint style;
}
html.mobile-landscape-ui .main-screen .map-stage:not(.map-is-zoomed){
  will-change:auto;
}
html.mobile-landscape-ui .main-screen .map-node{
  contain:layout paint style;
}
html.mobile-landscape-ui .main-screen *,
html.mobile-landscape-ui .main-screen *::before,
html.mobile-landscape-ui .main-screen *::after{
  animation-duration:.001ms!important;
  animation-iteration-count:1!important;
  transition-duration:0s!important;
  scroll-behavior:auto!important;
}
html.mobile-landscape-ui .main-screen .node-icon,
html.mobile-landscape-ui .main-screen .face{
  image-rendering:auto;
}
@media (orientation:landscape) and (min-height:600px){
  html.mobile-landscape-ui .main-screen .header{
    height:42px!important;
    min-height:42px!important;
    padding:5px 9px!important;
  }
  html.mobile-landscape-ui .main-screen .header h1{font-size:15px!important;}
  html.mobile-landscape-ui .main-screen .stat{font-size:9px!important;padding:4px 6px!important;}
  html.mobile-landscape-ui .main-screen .main-grid{height:calc(100svh - 50px)!important;}
  html.mobile-landscape-ui .main-screen .map-panel{grid-template-rows:21px 27px minmax(0,1fr)!important;}
  html.mobile-landscape-ui .main-screen .map-head b{font-size:11px!important;}
  html.mobile-landscape-ui .main-screen .map-note,
  html.mobile-landscape-ui .main-screen .mobile-map-toolbar span{font-size:8px!important;}
  html.mobile-landscape-ui .main-screen .commands.menu-groups button{font-size:11px!important;min-height:34px!important;}
}


/* =========================================================
   v5.45 mobile landscape recruit modal
   Keep recruit controls and troop selection usable without
   relying on a long vertical scroll inside short phone screens.
   ========================================================= */
html.mobile-landscape-ui .modal-back{
  position:fixed!important;
  inset:0!important;
  box-sizing:border-box!important;
  padding:max(5px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left))!important;
  align-items:center!important;
  justify-content:center!important;
  overflow:hidden!important;
  z-index:10000!important;
  touch-action:pan-y pinch-zoom!important;
}

html.mobile-landscape-ui .modal.command-modal:not(.recruit-command-modal){
  box-sizing:border-box!important;
  width:min(680px,100%)!important;
  max-width:100%!important;
  max-height:100%!important;
  margin:0!important;
  padding:9px!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior:contain!important;
  touch-action:pan-y!important;
  border-radius:12px!important;
}
html.mobile-landscape-ui .modal.command-modal:not(.recruit-command-modal) .modal-head-v53{
  position:sticky!important;
  top:0!important;
  margin:0 0 6px!important;
  padding:5px 40px 6px 5px!important;
  min-height:35px!important;
  border-radius:8px!important;
  background:#161e34!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
html.mobile-landscape-ui .modal.command-modal:not(.recruit-command-modal) .modal-head-v53 h2{
  margin:0!important;
  font-size:18px!important;
  line-height:1.15!important;
}
html.mobile-landscape-ui .modal.command-modal:not(.recruit-command-modal) .modal-head-v53 .desc{
  margin-top:2px!important;
  font-size:9px!important;
  line-height:1.25!important;
}
html.mobile-landscape-ui .modal.command-modal:not(.recruit-command-modal) .modal-close-v53{
  position:absolute!important;
  top:3px!important;
  right:3px!important;
  width:32px!important;
  height:32px!important;
  min-width:32px!important;
  font-size:21px!important;
  line-height:28px!important;
  box-shadow:none!important;
}
html.mobile-landscape-ui .modal.command-modal:not(.recruit-command-modal) .command-execute-buttons{
  position:sticky!important;
  bottom:0!important;
  margin:6px 0 0!important;
  padding:5px!important;
}
html.mobile-landscape-ui .modal.command-modal.recruit-command-modal{
  box-sizing:border-box!important;
  width:100%!important;
  height:100%!important;
  max-width:1100px!important;
  max-height:none!important;
  min-height:0!important;
  margin:0!important;
  padding:7px!important;
  border-radius:12px!important;
  overflow:hidden!important;
  display:grid!important;
  grid-template-columns:minmax(218px,.78fr) minmax(0,1.55fr)!important;
  grid-template-rows:auto minmax(0,1fr) auto!important;
  grid-template-areas:
    "recruit-head recruit-gallery"
    "recruit-info recruit-gallery"
    "recruit-actions recruit-gallery"!important;
  gap:5px 8px!important;
  background:#11182b!important;
  overscroll-behavior:none!important;
  touch-action:manipulation!important;
}
html.mobile-landscape-ui .recruit-command-modal .modal-head-v53{
  grid-area:recruit-head!important;
  position:relative!important;
  inset:auto!important;
  min-width:0!important;
  margin:0!important;
  padding:4px 40px 5px 5px!important;
  border-radius:8px!important;
  background:#161e34!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}
html.mobile-landscape-ui .recruit-command-modal .modal-head-v53 h2{
  margin:0!important;
  font-size:clamp(16px,2.4vw,22px)!important;
  line-height:1.15!important;
  white-space:nowrap!important;
}
html.mobile-landscape-ui .recruit-command-modal .modal-head-v53 .desc{
  display:none!important;
}
html.mobile-landscape-ui .recruit-command-modal .modal-close-v53{
  position:absolute!important;
  top:3px!important;
  right:3px!important;
  width:33px!important;
  height:33px!important;
  min-width:33px!important;
  font-size:22px!important;
  line-height:29px!important;
  box-shadow:none!important;
}
html.mobile-landscape-ui .recruit-command-modal > .info-list{
  grid-area:recruit-info!important;
  min-width:0!important;
  min-height:0!important;
  margin:0!important;
  padding:0 2px 0 0!important;
  gap:4px!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior:contain!important;
  touch-action:pan-y!important;
  scrollbar-width:thin!important;
}
html.mobile-landscape-ui .recruit-command-modal > .info-list > div{
  display:grid!important;
  grid-template-columns:76px minmax(0,1fr)!important;
  align-items:center!important;
  gap:5px!important;
  min-height:31px!important;
  padding:4px 6px!important;
  border-radius:7px!important;
  font-size:10px!important;
  line-height:1.2!important;
}
html.mobile-landscape-ui .recruit-command-modal > .info-list > div > span{
  color:#aeb9d5!important;
  white-space:nowrap!important;
}
html.mobile-landscape-ui .recruit-command-modal > .info-list > div > b{
  min-width:0!important;
  overflow-wrap:anywhere!important;
}
html.mobile-landscape-ui .recruit-command-modal .officer-select{
  box-sizing:border-box!important;
  width:100%!important;
  max-width:none!important;
  min-height:32px!important;
  padding:4px 24px 4px 6px!important;
  border-radius:7px!important;
  font-size:11px!important;
  touch-action:manipulation!important;
}
html.mobile-landscape-ui .recruit-command-modal .command-execute-buttons{
  grid-area:recruit-actions!important;
  position:relative!important;
  inset:auto!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) auto!important;
  gap:5px!important;
  min-width:0!important;
  margin:0!important;
  padding:5px!important;
  border-radius:8px!important;
  background:#0d1425!important;
  box-shadow:none!important;
}
html.mobile-landscape-ui .recruit-command-modal .command-execute-buttons button{
  box-sizing:border-box!important;
  min-width:0!important;
  min-height:35px!important;
  height:35px!important;
  padding:5px 8px!important;
  border-radius:7px!important;
  font-size:11px!important;
  line-height:1!important;
  touch-action:manipulation!important;
}
html.mobile-landscape-ui .recruit-command-modal .primary-action-btn{
  width:100%!important;
  min-width:0!important;
}
html.mobile-landscape-ui .recruit-command-modal > .troop-modal-box{
  grid-area:recruit-gallery!important;
  box-sizing:border-box!important;
  min-width:0!important;
  min-height:0!important;
  height:100%!important;
  margin:0!important;
  padding:6px!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
  overscroll-behavior:contain!important;
  touch-action:pan-y!important;
  border-radius:9px!important;
  background:#0b1222!important;
}
html.mobile-landscape-ui .recruit-command-modal > .troop-modal-box .section-title{
  position:sticky!important;
  top:0!important;
  z-index:3!important;
  margin:-2px -2px 5px!important;
  padding:4px 5px!important;
  border-radius:6px!important;
  background:#131c31!important;
  font-size:11px!important;
  line-height:1.1!important;
}
html.mobile-landscape-ui .recruit-command-modal .troop-gallery{
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:5px!important;
}
html.mobile-landscape-ui .recruit-command-modal .troop-card{
  min-width:0!important;
  min-height:0!important;
  padding:5px!important;
  gap:3px!important;
  border-radius:8px!important;
  touch-action:manipulation!important;
}
html.mobile-landscape-ui .recruit-command-modal .troop-top{
  grid-template-columns:25px minmax(0,1fr)!important;
  gap:4px!important;
}
html.mobile-landscape-ui .recruit-command-modal .troop-icon{
  width:25px!important;
  height:25px!important;
}
html.mobile-landscape-ui .recruit-command-modal .troop-name{
  font-size:10px!important;
  line-height:1.1!important;
}
html.mobile-landscape-ui .recruit-command-modal .troop-meta,
html.mobile-landscape-ui .recruit-command-modal .troop-count{
  font-size:8px!important;
  line-height:1.15!important;
}
html.mobile-landscape-ui .recruit-command-modal .troop-body{
  display:none!important;
}
html.mobile-landscape-ui .recruit-command-modal .troop-desc{
  display:block!important;
  max-height:2.45em!important;
  overflow:hidden!important;
  font-size:7.5px!important;
  line-height:1.2!important;
}
html.mobile-landscape-ui .recruit-command-modal .troop-card.active{
  outline:2px solid #ffd976!important;
  outline-offset:-2px!important;
}
@media (orientation:landscape) and (max-height:430px){
  html.mobile-landscape-ui .modal.command-modal.recruit-command-modal{
    grid-template-columns:minmax(205px,.72fr) minmax(0,1.6fr)!important;
    gap:4px 6px!important;
    padding:5px!important;
  }
  html.mobile-landscape-ui .recruit-command-modal .modal-head-v53 h2{font-size:15px!important;}
  html.mobile-landscape-ui .recruit-command-modal > .info-list > div{
    grid-template-columns:69px minmax(0,1fr)!important;
    min-height:28px!important;
    padding:3px 5px!important;
    font-size:9px!important;
  }
  html.mobile-landscape-ui .recruit-command-modal .officer-select{
    min-height:29px!important;
    font-size:10px!important;
  }
  html.mobile-landscape-ui .recruit-command-modal .command-execute-buttons button{
    min-height:31px!important;
    height:31px!important;
    font-size:10px!important;
  }
  html.mobile-landscape-ui .recruit-command-modal .troop-gallery{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;
  }
}
@media (orientation:landscape) and (max-width:700px){
  html.mobile-landscape-ui .modal.command-modal.recruit-command-modal{
    grid-template-columns:minmax(190px,.75fr) minmax(0,1.45fr)!important;
  }
  html.mobile-landscape-ui .recruit-command-modal .troop-desc{display:none!important;}
}

/* =========================================================
   v5.46 permanent turn-end command
   Replace the manual defense-formation shortcut with a clear,
   confirmation-based end-turn command on every layout.
   ========================================================= */
.end-turn-command-btn,
.end-turn-side-btn,
.end-turn-confirm-btn{
  background:linear-gradient(180deg,#d6ad4a 0%,#8c5d16 100%)!important;
  border-color:rgba(255,225,145,.78)!important;
  color:#fffaf0!important;
  font-weight:900!important;
  text-shadow:0 1px 2px rgba(0,0,0,.55)!important;
}
.end-turn-command-btn:active,
.end-turn-side-btn:active,
.end-turn-confirm-btn:active{
  transform:translateY(1px)!important;
}
.end-turn-confirm-modal{
  width:min(520px,calc(100vw - 24px));
}
.end-turn-summary{
  margin-top:10px;
}
.end-turn-warning{
  color:#ffd36a!important;
}
.end-turn-alert,
.end-turn-ready{
  margin:12px 0 4px;
  padding:10px 12px;
  border-radius:10px;
  line-height:1.55;
}
.end-turn-alert{
  color:#ffe4a8;
  background:rgba(190,122,25,.15);
  border:1px solid rgba(255,205,101,.34);
}
.end-turn-ready{
  color:#bff1ca;
  background:rgba(42,142,72,.14);
  border:1px solid rgba(105,218,133,.28);
}
.end-turn-confirm-actions{
  display:grid!important;
  grid-template-columns:1fr 1.35fr!important;
  gap:8px!important;
}
html.mobile-landscape-ui .end-turn-confirm-modal{
  width:min(520px,100%)!important;
}
html.mobile-landscape-ui .end-turn-confirm-modal .end-turn-summary{
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:5px!important;
}
html.mobile-landscape-ui .end-turn-confirm-modal .end-turn-summary > div{
  min-height:34px!important;
  padding:6px 8px!important;
}
html.mobile-landscape-ui .end-turn-confirm-modal .end-turn-alert,
html.mobile-landscape-ui .end-turn-confirm-modal .end-turn-ready{
  margin:6px 0 2px!important;
  padding:6px 8px!important;
  font-size:10px!important;
  line-height:1.35!important;
}
html.mobile-landscape-ui .end-turn-confirm-modal .end-turn-confirm-actions{
  position:sticky!important;
  bottom:0!important;
  background:#11182b!important;
}


/* =========================================================
   v5.52 strategy map UI redesign
   - map-first layout
   - ornate dark navy / gold command rail
   - selected territory overlay and bottom quick dock
   - visualViewport based smartphone landscape height
   ========================================================= */
:root{
  --strategy-navy:#07111f;
  --strategy-navy-2:#0b1830;
  --strategy-card:rgba(7,15,29,.94);
  --strategy-card-soft:rgba(13,25,45,.90);
  --strategy-gold:#d9b765;
  --strategy-gold-bright:#f4da8b;
  --strategy-line:rgba(221,186,94,.48);
  --strategy-blue:#314a78;
  --strategy-red:#a52b3d;
  --strategy-green:#67d99b;
  --strategy-app-height:100dvh;
}
html,body,#app{
  height:var(--strategy-app-height,100dvh);
  min-height:0;
}
body{
  background:#030812;
}
.strategy-shell{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:var(--strategy-app-height,100dvh)!important;
  min-height:0!important;
  padding:8px!important;
  display:grid!important;
  grid-template-rows:66px minmax(0,1fr)!important;
  gap:8px!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 35% -15%,rgba(50,93,154,.24),transparent 44%),
    linear-gradient(180deg,#07101e,#030812)!important;
}
.strategy-hud{
  height:auto!important;
  min-height:0!important;
  display:grid!important;
  grid-template-columns:220px 190px minmax(0,1fr) auto!important;
  align-items:center!important;
  gap:10px!important;
  padding:7px 10px!important;
  margin:0!important;
  border-radius:15px!important;
  border:1px solid var(--strategy-line)!important;
  background:
    linear-gradient(180deg,rgba(14,29,52,.97),rgba(5,13,26,.97))!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.035),
    0 10px 30px rgba(0,0,0,.32)!important;
  overflow:hidden!important;
}
.strategy-brand{
  min-width:0;
  display:flex;
  align-items:center;
  gap:10px;
  padding-right:12px;
  border-right:1px solid rgba(217,183,101,.26);
}
.strategy-brand-mark{
  flex:0 0 auto;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:50%;
  border:1px solid rgba(244,218,139,.52);
  color:var(--strategy-gold-bright);
  font-size:24px;
  background:radial-gradient(circle,rgba(217,183,101,.2),rgba(5,13,26,.1) 68%);
  text-shadow:0 0 13px rgba(244,218,139,.45);
}
.strategy-brand-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  color:var(--strategy-gold-bright);
  font-family:Georgia,"Times New Roman","Yu Mincho",serif;
  line-height:1.02;
}
.strategy-brand-copy b{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:20px;
  letter-spacing:.4px;
}
.strategy-brand-copy small{
  color:#c7a85d;
  font-size:13px;
  letter-spacing:3.2px;
}
.strategy-turn-card{
  height:48px;
  display:grid;
  grid-template-columns:36px auto minmax(0,1fr);
  align-items:center;
  gap:7px;
  padding:4px 10px;
  border:1px solid rgba(217,183,101,.36);
  border-radius:11px;
  background:linear-gradient(180deg,rgba(22,39,68,.74),rgba(8,18,34,.75));
}
.strategy-turn-icon{
  color:var(--strategy-gold-bright);
  font-size:25px;
  text-shadow:0 0 12px rgba(244,218,139,.4);
}
.strategy-turn-card span:nth-child(2){
  display:flex;
  align-items:baseline;
  gap:5px;
}
.strategy-turn-card small{
  color:#9eacc5;
  font-size:9px;
  letter-spacing:1.4px;
}
.strategy-turn-card b{
  color:#fff1bd;
  font-family:Georgia,serif;
  font-size:24px;
}
.strategy-turn-card em{
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#d9e4f8;
  font-style:normal;
  font-weight:800;
  font-size:12px;
  text-align:right;
}
.strategy-stat-row{
  min-width:0;
  display:grid!important;
  grid-template-columns:repeat(6,minmax(92px,1fr))!important;
  gap:6px!important;
  overflow:hidden!important;
}
.strategy-hud-stat{
  min-width:0;
  height:48px;
  margin:0!important;
  padding:5px 8px!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  border:1px solid rgba(217,183,101,.23)!important;
  border-radius:10px!important;
  background:linear-gradient(180deg,rgba(26,41,70,.72),rgba(11,21,39,.82))!important;
  color:#eef4ff!important;
}
.strategy-hud-stat>i{
  flex:0 0 auto;
  color:#c8d6ef;
  font-style:normal;
  font-size:17px;
}
.strategy-hud-stat>span{
  min-width:0;
  display:flex;
  flex-direction:column;
  line-height:1.05;
}
.strategy-hud-stat small{
  color:#9daac0;
  font-size:8px;
  letter-spacing:.8px;
}
.strategy-hud-stat b{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#f8fbff;
  font-size:14px;
}
.strategy-hud-stat.gold-stat>i,
.strategy-hud-stat.gold-stat b{
  color:#f2cf6f;
}
.strategy-hud-tools{
  display:flex;
  gap:6px;
}
.strategy-hud-tools button{
  height:44px;
  min-width:52px;
  padding:5px 9px;
  border-radius:10px;
  color:#e7eefb;
  font-size:11px;
  font-weight:800;
  background:linear-gradient(180deg,#273a60,#111d35);
  border-color:rgba(217,183,101,.3);
  box-shadow:none;
}
.strategy-main-grid{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  display:block!important;
  overflow:hidden!important;
}
.strategy-map-panel{
  position:relative!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  padding:7px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 190px!important;
  grid-template-rows:minmax(0,1fr)!important;
  gap:7px!important;
  overflow:hidden!important;
  border-radius:15px!important;
  border:1px solid rgba(217,183,101,.38)!important;
  background:linear-gradient(180deg,#071120,#040a14)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)!important;
}
.strategy-map-viewport{
  position:relative!important;
  grid-column:1!important;
  grid-row:1!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  margin:0!important;
  overflow:hidden!important;
  border-radius:11px!important;
  border:1px solid rgba(217,183,101,.38)!important;
  background:#050b15!important;
  box-shadow:inset 0 0 42px rgba(0,0,0,.25)!important;
}
.strategy-map-viewport::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:7;
  background:
    linear-gradient(90deg,rgba(3,8,17,.35),transparent 13%,transparent 83%,rgba(3,8,17,.12)),
    linear-gradient(180deg,rgba(4,10,20,.18),transparent 18%,transparent 78%,rgba(4,10,20,.36));
}
.strategy-map-viewport>.map-stage{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  border:0!important;
  border-radius:0!important;
  background-size:100% 100%!important;
  background-position:center!important;
}
.strategy-map-toolbar{
  position:absolute;
  z-index:35;
  left:10px;
  top:10px;
  display:grid;
  grid-template-columns:minmax(130px,1fr) 34px 43px 34px;
  align-items:center;
  gap:4px;
  max-width:min(460px,62%);
  padding:5px;
  border:1px solid rgba(217,183,101,.34);
  border-radius:10px;
  background:rgba(5,14,27,.88);
  box-shadow:0 8px 22px rgba(0,0,0,.25);
  backdrop-filter:blur(7px);
}
.strategy-map-toolbar>span{
  min-width:0;
  display:flex;
  flex-direction:column;
  padding:0 5px;
  line-height:1.05;
}
.strategy-map-toolbar b{
  color:#f1dda0;
  font-size:12px;
}
.strategy-map-toolbar small{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#b5c1d6;
  font-size:8px;
}
.strategy-map-toolbar button{
  min-width:0;
  height:28px;
  padding:2px 4px;
  border-radius:7px;
  font-size:10px;
  font-weight:900;
  box-shadow:none;
}
.strategy-territory-card{
  position:absolute;
  z-index:34;
  left:11px;
  bottom:12px;
  width:clamp(230px,23vw,320px);
  padding:11px;
  border:1px solid rgba(217,183,101,.52);
  border-radius:12px;
  background:
    linear-gradient(145deg,rgba(8,20,37,.96),rgba(5,12,24,.94));
  box-shadow:0 14px 30px rgba(0,0,0,.38);
  backdrop-filter:blur(8px);
}
.strategy-territory-head{
  display:flex;
  align-items:center;
  gap:9px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(217,183,101,.23);
}
.territory-card-crown{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:8px;
  color:#f1d47c;
  font-size:21px;
  background:rgba(217,183,101,.12);
}
.strategy-territory-head div{
  min-width:0;
  display:flex;
  flex-direction:column;
}
.strategy-territory-head small{
  color:#8998b2;
  font-size:7px;
  letter-spacing:1.15px;
}
.strategy-territory-head b{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#f8e8b4;
  font-size:16px;
}
.strategy-territory-owner{
  display:flex;
  justify-content:space-between;
  gap:8px;
  margin-top:8px;
  color:#aebbd0;
  font-size:11px;
}
.strategy-territory-owner b{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.strategy-durability{
  margin-top:7px;
}
.strategy-durability>span{
  display:flex;
  justify-content:space-between;
  color:#c8d3e5;
  font-size:10px;
}
.strategy-durability>i{
  display:block;
  height:7px;
  margin-top:4px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.12);
}
.strategy-durability em{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#4dcf8c,#d3c65d);
  box-shadow:0 0 10px rgba(77,207,140,.35);
}
.strategy-territory-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:5px;
  margin-top:8px;
}
.strategy-territory-grid>span{
  min-width:0;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:4px;
  padding:5px 6px;
  border-radius:7px;
  background:rgba(255,255,255,.055);
}
.strategy-territory-grid small{
  color:#8f9cb2;
  font-size:8px;
}
.strategy-territory-grid b{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#edf3ff;
  font-size:9px;
}
.strategy-territory-actions{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:5px;
  margin-top:8px;
}
.strategy-territory-actions button{
  min-width:0;
  padding:6px 4px;
  border-radius:7px;
  font-size:9px;
  font-weight:900;
  box-shadow:none;
}
.strategy-command-rail{
  position:relative!important;
  grid-column:2!important;
  grid-row:1!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:7px!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-template-rows:auto repeat(8,minmax(38px,1fr))!important;
  grid-auto-rows:minmax(38px,1fr)!important;
  align-content:stretch!important;
  gap:5px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  border:1px solid rgba(217,183,101,.38)!important;
  border-radius:11px!important;
  background:
    linear-gradient(180deg,rgba(10,25,46,.98),rgba(4,12,24,.98))!important;
  box-shadow:none!important;
  scrollbar-width:none;
}
.strategy-command-rail::-webkit-scrollbar{display:none}
.strategy-command-title{
  min-height:43px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  padding:5px 9px;
  border-bottom:1px solid rgba(217,183,101,.26);
}
.strategy-command-title small{
  color:#8e9bb0;
  font-size:8px;
  letter-spacing:1.5px;
}
.strategy-command-title b{
  color:#f0d68d;
  font-size:13px;
}
.strategy-command-rail button{
  position:relative;
  width:100%!important;
  min-width:0!important;
  min-height:38px!important;
  height:auto!important;
  margin:0!important;
  padding:6px 9px!important;
  display:grid!important;
  grid-template-columns:29px 1fr!important;
  align-items:center!important;
  gap:7px!important;
  border-radius:8px!important;
  border:1px solid rgba(217,183,101,.34)!important;
  background:linear-gradient(180deg,#20395f,#10223f)!important;
  color:#f5f0df!important;
  font-size:13px!important;
  font-weight:900!important;
  text-align:left!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.025)!important;
}
.strategy-command-rail button i{
  display:grid;
  place-items:center;
  color:#ecd184;
  font-style:normal;
  font-size:19px;
}
.strategy-command-rail button:hover{
  filter:brightness(1.13);
}
.strategy-command-rail .war-command-btn{
  border-color:rgba(255,94,104,.62)!important;
  background:linear-gradient(180deg,#a83245,#6f1829)!important;
  box-shadow:inset 0 0 16px rgba(255,65,79,.14)!important;
}
.strategy-command-rail .war-command-btn i{color:#fff0e5}
.strategy-command-rail .end-turn-command-btn{
  border-color:rgba(244,211,112,.68)!important;
  background:linear-gradient(180deg,#9b7020,#5b3c0c)!important;
  color:#fff5cf!important;
}
.strategy-command-rail .true-dragon-btn{
  background:linear-gradient(180deg,#7f2337,#401021)!important;
}
.strategy-command-rail .final-boss-btn{
  background:linear-gradient(180deg,#60347e,#29173d)!important;
}
.strategy-bottom-dock{
  position:absolute;
  z-index:36;
  left:50%;
  bottom:11px;
  transform:translateX(-50%);
  display:flex;
  align-items:stretch;
  gap:5px;
  padding:6px;
  border:1px solid rgba(217,183,101,.46);
  border-radius:12px;
  background:rgba(5,14,27,.92);
  box-shadow:0 13px 30px rgba(0,0,0,.36);
  backdrop-filter:blur(8px);
}
.strategy-bottom-dock button{
  width:70px;
  height:50px;
  padding:4px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:2px;
  border-radius:8px;
  border-color:rgba(217,183,101,.28);
  background:linear-gradient(180deg,#20395f,#101f39);
  box-shadow:none;
}
.strategy-bottom-dock button i{
  color:#f0d37d;
  font-size:18px;
  line-height:1;
  font-style:normal;
}
.strategy-bottom-dock button span{
  color:#eef3fb;
  font-size:9px;
  font-weight:900;
}
.strategy-status-tray{
  position:absolute;
  z-index:65;
  right:12px;
  bottom:12px;
  width:min(360px,42%);
  max-height:calc(100% - 76px);
  padding:12px;
  overflow:auto;
  border:1px solid rgba(217,183,101,.48);
  border-radius:12px;
  background:rgba(5,14,27,.97);
  box-shadow:0 18px 45px rgba(0,0,0,.42);
  opacity:0;
  visibility:hidden;
  transform:translateY(12px);
  transition:.18s ease;
}
.strategy-status-tray.open{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.strategy-tray-close{
  position:absolute;
  top:7px;
  right:7px;
  width:27px;
  height:27px;
  min-width:0;
  padding:0;
  border-radius:50%;
  box-shadow:none;
}
.strategy-tray-leader{
  display:grid;
  grid-template-columns:56px 1fr;
  gap:9px;
  padding-right:26px;
}
.strategy-tray-leader img{
  width:56px;
  height:56px;
  object-fit:cover;
  border-radius:9px;
  border:1px solid rgba(217,183,101,.4);
}
.strategy-tray-leader div{
  min-width:0;
  display:flex;
  flex-direction:column;
}
.strategy-tray-leader small{color:#d6b85f;font-size:9px}
.strategy-tray-leader b{font-size:14px}
.strategy-tray-leader span{
  margin-top:3px;
  color:#9daac0;
  font-size:9px;
  line-height:1.35;
}
.strategy-tray-section{
  margin-top:9px;
  padding-top:8px;
  border-top:1px solid rgba(217,183,101,.19);
}
.strategy-tray-section>b{
  color:#e6cb7e;
  font-size:10px;
}
.strategy-tray-section>span,
.strategy-tray-section>p{
  display:block;
  margin:4px 0 0;
  color:#cbd5e7;
  font-size:9px;
  line-height:1.5;
}
.strategy-map-panel>.war-mode-bar,
.strategy-map-panel>.dragon-boss-bar,
.strategy-map-panel>.true-dragon-bar{
  position:absolute!important;
  z-index:70!important;
  left:50%!important;
  right:auto!important;
  top:73px!important;
  bottom:auto!important;
  transform:translateX(-50%)!important;
  max-width:55%!important;
  min-height:34px!important;
  padding:5px 8px!important;
  border-radius:9px!important;
  font-size:10px!important;
}

/* map readability */
.strategy-map-panel .territory-link{
  stroke:rgba(247,226,162,.72)!important;
  stroke-width:.22!important;
  stroke-dasharray:.7 .55!important;
  filter:drop-shadow(0 0 1px rgba(0,0,0,.8));
}
.strategy-map-panel .node-label{
  border-color:rgba(255,255,255,.34)!important;
  background:rgba(4,10,19,.86)!important;
  text-shadow:0 1px 2px #000!important;
}
.strategy-map-panel .map-node.selected .node-label{
  border-color:#f6dc87!important;
  box-shadow:0 0 0 2px rgba(246,220,135,.18),0 0 13px rgba(246,220,135,.4)!important;
}

/* smartphone landscape: fill the visible Safari/Chrome viewport */
html.mobile-landscape-ui,
html.mobile-landscape-ui body,
html.mobile-landscape-ui #app{
  height:var(--strategy-app-height,100dvh)!important;
  min-height:0!important;
  background:#030812!important;
}
html.mobile-landscape-ui .strategy-shell{
  height:var(--strategy-app-height,100dvh)!important;
  padding:3px!important;
  grid-template-rows:45px minmax(0,1fr)!important;
  gap:3px!important;
}
html.mobile-landscape-ui .strategy-hud{
  height:45px!important;
  min-height:45px!important;
  grid-template-columns:124px 122px minmax(0,1fr)!important;
  gap:4px!important;
  padding:3px 5px!important;
  border-radius:8px!important;
}
html.mobile-landscape-ui .strategy-brand{
  gap:5px;
  padding-right:5px;
}
html.mobile-landscape-ui .strategy-brand-mark{
  width:29px;
  height:29px;
  font-size:17px;
}
html.mobile-landscape-ui .strategy-brand-copy b{font-size:11px}
html.mobile-landscape-ui .strategy-brand-copy small{
  font-size:7px;
  letter-spacing:1.8px;
}
html.mobile-landscape-ui .strategy-turn-card{
  height:35px;
  grid-template-columns:22px auto minmax(0,1fr);
  gap:3px;
  padding:2px 5px;
  border-radius:7px;
}
html.mobile-landscape-ui .strategy-turn-icon{font-size:16px}
html.mobile-landscape-ui .strategy-turn-card b{font-size:15px}
html.mobile-landscape-ui .strategy-turn-card small{font-size:6px}
html.mobile-landscape-ui .strategy-turn-card em{font-size:8px}
html.mobile-landscape-ui .strategy-stat-row{
  display:grid!important;
  grid-template-columns:repeat(4,minmax(65px,1fr))!important;
  gap:3px!important;
  overflow:hidden!important;
}
html.mobile-landscape-ui .strategy-hud-stat{
  height:35px!important;
  min-height:0!important;
  padding:2px 4px!important;
  gap:4px!important;
  border-radius:6px!important;
}
html.mobile-landscape-ui .strategy-hud-stat>i{font-size:11px}
html.mobile-landscape-ui .strategy-hud-stat small{font-size:5.5px}
html.mobile-landscape-ui .strategy-hud-stat b{font-size:8px}
html.mobile-landscape-ui .strategy-hud-stat.hud-stat-extra{display:none!important}
html.mobile-landscape-ui .strategy-hud-tools{display:none!important}
html.mobile-landscape-ui .strategy-main-grid{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
}
html.mobile-landscape-ui .strategy-map-panel{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  padding:3px!important;
  grid-template-columns:minmax(0,1fr) clamp(102px,13vw,122px)!important;
  grid-template-rows:minmax(0,1fr)!important;
  gap:3px!important;
  border-radius:8px!important;
}
html.mobile-landscape-ui .strategy-map-viewport{
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  aspect-ratio:auto!important;
  align-self:stretch!important;
  justify-self:stretch!important;
  border-radius:6px!important;
}
html.mobile-landscape-ui .strategy-map-viewport>.map-stage{
  width:100%!important;
  height:100%!important;
  background-size:100% 100%!important;
}
html.mobile-landscape-ui .strategy-map-toolbar{
  left:5px;
  top:5px;
  grid-template-columns:minmax(90px,1fr) 25px 31px 25px;
  gap:2px;
  max-width:47%;
  padding:3px;
  border-radius:6px;
  box-shadow:none;
  backdrop-filter:none;
}
html.mobile-landscape-ui .strategy-map-toolbar>span{padding:0 3px}
html.mobile-landscape-ui .strategy-map-toolbar b{font-size:8px}
html.mobile-landscape-ui .strategy-map-toolbar small{font-size:5.5px}
html.mobile-landscape-ui .strategy-map-toolbar button{
  height:21px;
  padding:1px 2px;
  border-radius:4px;
  font-size:7px;
}
html.mobile-landscape-ui .strategy-command-rail{
  position:relative!important;
  grid-column:2!important;
  grid-row:1!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  padding:3px!important;
  gap:2px!important;
  grid-template-rows:auto repeat(8,minmax(28px,1fr))!important;
  grid-auto-rows:minmax(28px,1fr)!important;
  border-radius:6px!important;
  overflow-y:auto!important;
}
html.mobile-landscape-ui .strategy-command-title{
  min-height:27px;
  padding:2px 5px;
}
html.mobile-landscape-ui .strategy-command-title small{font-size:5px}
html.mobile-landscape-ui .strategy-command-title b{font-size:8px}
html.mobile-landscape-ui .strategy-command-rail button{
  min-height:28px!important;
  padding:2px 5px!important;
  grid-template-columns:20px 1fr!important;
  gap:3px!important;
  border-radius:5px!important;
  font-size:9px!important;
  box-shadow:none!important;
}
html.mobile-landscape-ui .strategy-command-rail button i{font-size:12px}
html.mobile-landscape-ui .strategy-territory-card{
  left:5px;
  bottom:45px;
  width:clamp(172px,27vw,220px);
  padding:6px;
  border-radius:7px;
  box-shadow:none;
  backdrop-filter:none;
}
html.mobile-landscape-ui .strategy-territory-head{
  gap:5px;
  padding-bottom:4px;
}
html.mobile-landscape-ui .territory-card-crown{
  width:23px;
  height:23px;
  border-radius:5px;
  font-size:14px;
}
html.mobile-landscape-ui .strategy-territory-head small{font-size:4.8px}
html.mobile-landscape-ui .strategy-territory-head b{font-size:9px}
html.mobile-landscape-ui .strategy-territory-owner{
  margin-top:4px;
  font-size:7px;
}
html.mobile-landscape-ui .strategy-durability{margin-top:3px}
html.mobile-landscape-ui .strategy-durability>span{font-size:6.5px}
html.mobile-landscape-ui .strategy-durability>i{height:4px;margin-top:2px}
html.mobile-landscape-ui .strategy-territory-grid{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:2px;
  margin-top:4px;
}
html.mobile-landscape-ui .strategy-territory-grid>span{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  padding:2px 3px;
  border-radius:4px;
}
html.mobile-landscape-ui .strategy-territory-grid small{font-size:4.8px}
html.mobile-landscape-ui .strategy-territory-grid b{font-size:6px}
html.mobile-landscape-ui .strategy-territory-actions{
  gap:2px;
  margin-top:4px;
}
html.mobile-landscape-ui .strategy-territory-actions button{
  min-height:18px!important;
  padding:2px!important;
  border-radius:4px;
  font-size:6.5px!important;
}
html.mobile-landscape-ui .strategy-bottom-dock{
  bottom:5px;
  gap:2px;
  padding:3px;
  border-radius:7px;
  box-shadow:none;
  backdrop-filter:none;
}
html.mobile-landscape-ui .strategy-bottom-dock button{
  width:43px;
  height:34px;
  min-height:0!important;
  padding:2px!important;
  gap:1px;
  border-radius:5px;
}
html.mobile-landscape-ui .strategy-bottom-dock button i{font-size:12px}
html.mobile-landscape-ui .strategy-bottom-dock button span{font-size:5.8px}
html.mobile-landscape-ui .strategy-status-tray{
  right:5px;
  bottom:5px;
  width:min(250px,47%);
  max-height:calc(100% - 42px);
  padding:7px;
  border-radius:7px;
  box-shadow:none;
}
html.mobile-landscape-ui .strategy-tray-close{
  top:4px;
  right:4px;
  width:22px;
  height:22px;
  min-height:0!important;
}
html.mobile-landscape-ui .strategy-tray-leader{
  grid-template-columns:39px 1fr;
  gap:6px;
  padding-right:20px;
}
html.mobile-landscape-ui .strategy-tray-leader img{
  width:39px;
  height:39px;
  border-radius:5px;
}
html.mobile-landscape-ui .strategy-tray-leader small{font-size:6px}
html.mobile-landscape-ui .strategy-tray-leader b{font-size:9px}
html.mobile-landscape-ui .strategy-tray-leader span{font-size:6px}
html.mobile-landscape-ui .strategy-tray-section{margin-top:5px;padding-top:4px}
html.mobile-landscape-ui .strategy-tray-section>b{font-size:7px}
html.mobile-landscape-ui .strategy-tray-section>span,
html.mobile-landscape-ui .strategy-tray-section>p{font-size:6px;line-height:1.35}
html.mobile-landscape-ui .strategy-map-panel>.war-mode-bar,
html.mobile-landscape-ui .strategy-map-panel>.dragon-boss-bar,
html.mobile-landscape-ui .strategy-map-panel>.true-dragon-bar{
  top:39px!important;
  max-width:55%!important;
  min-height:24px!important;
  padding:3px 5px!important;
  border-radius:5px!important;
  font-size:6.5px!important;
}
html.mobile-landscape-ui .strategy-map-panel .map-node{
  width:42px!important;
  height:42px!important;
  transform:translate(-50%,-58%)!important;
}
html.mobile-landscape-ui .strategy-map-panel .node-icon{
  width:38px!important;
  height:28px!important;
}
html.mobile-landscape-ui .strategy-map-panel .node-label{
  min-width:42px!important;
  max-width:60px!important;
  padding:1px 3px!important;
  font-size:6.5px!important;
  line-height:1.08!important;
}
html.mobile-landscape-ui .strategy-map-panel .node-flag{width:16px!important;height:8px!important}
html.mobile-landscape-ui .strategy-map-panel .node-flag-pole{height:17px!important}

/* very short landscape viewports */
@media (orientation:landscape) and (max-height:430px){
  html.mobile-landscape-ui .strategy-shell{
    grid-template-rows:39px minmax(0,1fr)!important;
  }
  html.mobile-landscape-ui .strategy-hud{
    height:39px!important;
    min-height:39px!important;
    grid-template-columns:110px 108px minmax(0,1fr)!important;
  }
  html.mobile-landscape-ui .strategy-turn-card,
  html.mobile-landscape-ui .strategy-hud-stat{height:30px!important}
  html.mobile-landscape-ui .strategy-command-rail{
    grid-template-rows:auto repeat(8,minmax(24px,1fr))!important;
    grid-auto-rows:minmax(24px,1fr)!important;
  }
  html.mobile-landscape-ui .strategy-command-rail button{
    min-height:24px!important;
    font-size:8px!important;
  }
  html.mobile-landscape-ui .strategy-territory-card{
    width:168px;
    bottom:40px;
  }
  html.mobile-landscape-ui .strategy-territory-grid{display:none}
  html.mobile-landscape-ui .strategy-bottom-dock button{
    width:38px;
    height:30px;
  }
}

/* desktop scaling */
@media (min-width:981px) and (max-width:1380px){
  .strategy-hud{
    grid-template-columns:188px 165px minmax(0,1fr) auto!important;
  }
  .strategy-brand-copy b{font-size:17px}
  .strategy-stat-row{
    grid-template-columns:repeat(4,minmax(86px,1fr))!important;
  }
  .strategy-hud-stat.hud-stat-extra{display:none!important}
  .strategy-map-panel{
    grid-template-columns:minmax(0,1fr) 168px!important;
  }
  .strategy-command-rail button{font-size:12px!important}
}

/* =========================================================
   v5.53 bottom menu interaction + battle announcement fix
   ========================================================= */
.strategy-map-toolbar,
.strategy-territory-card,
.strategy-bottom-dock,
.strategy-status-tray,
.strategy-announcement{
  pointer-events:auto!important;
  touch-action:manipulation!important;
}
.strategy-bottom-dock button,
.strategy-territory-card button,
.strategy-map-toolbar button,
.strategy-status-tray button{
  pointer-events:auto!important;
  touch-action:manipulation!important;
  cursor:pointer;
}
.strategy-announcement{
  position:absolute;
  z-index:35;
  left:50%;
  bottom:72px;
  width:min(54%,760px);
  min-height:34px;
  transform:translateX(-50%);
  display:grid;
  grid-template-columns:auto minmax(0,1fr);
  align-items:center;
  overflow:hidden;
  border:1px solid rgba(217,183,101,.46);
  border-radius:10px;
  background:rgba(5,14,27,.93);
  box-shadow:0 10px 26px rgba(0,0,0,.34);
  backdrop-filter:blur(7px);
  color:#eaf1ff;
}
.strategy-announcement-label{
  align-self:stretch;
  display:grid;
  place-items:center;
  padding:0 12px;
  border-right:1px solid rgba(217,183,101,.34);
  background:linear-gradient(180deg,#9b7020,#5b3c0c);
  color:#fff2be;
  font-size:10px;
  font-weight:900;
  letter-spacing:.12em;
}
.strategy-announcement-window{
  min-width:0;
  overflow:hidden;
  white-space:nowrap;
  mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);
}
.strategy-announcement-track{
  width:max-content;
  min-width:200%;
  display:flex;
  align-items:center;
  animation:strategyAnnouncementFlow 34s linear infinite;
  will-change:transform;
}
.strategy-announcement-track>span{
  flex:0 0 auto;
  min-width:50%;
  padding:0 28px;
  color:#dce6f7;
  font-size:10px;
  font-weight:700;
  line-height:32px;
}
.strategy-announcement-separator{
  display:inline-block;
  margin:0 18px;
  color:#e8c869;
  font-size:8px;
}
@keyframes strategyAnnouncementFlow{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}
@media (prefers-reduced-motion:reduce){
  .strategy-announcement-track{animation:none;transform:none}
}

html.mobile-landscape-ui .strategy-announcement{
  bottom:43px;
  width:min(48%,390px);
  min-height:24px;
  border-radius:6px;
  box-shadow:none;
  backdrop-filter:none;
}
html.mobile-landscape-ui .strategy-announcement-label{
  padding:0 7px;
  font-size:6px;
}
html.mobile-landscape-ui .strategy-announcement-track>span{
  padding:0 15px;
  font-size:6px;
  line-height:22px;
}
html.mobile-landscape-ui .strategy-announcement-separator{
  margin:0 10px;
  font-size:5px;
}
@media (orientation:landscape) and (max-height:430px){
  html.mobile-landscape-ui .strategy-announcement{
    bottom:38px;
    min-height:21px;
  }
  html.mobile-landscape-ui .strategy-announcement-track>span{line-height:19px}
}

/* =========================================================
   v5.54 military command dashboard
   ========================================================= */
.military-dashboard-modal{
  width:min(1180px,96vw)!important;
  max-width:min(1180px,96vw)!important;
  max-height:92vh!important;
  overflow:auto!important;
  padding:18px!important;
  background:
    radial-gradient(circle at 18% 0%,rgba(61,96,157,.18),transparent 36%),
    linear-gradient(180deg,#0b172a,#07101e)!important;
  border-color:rgba(220,187,101,.42)!important;
}
.military-overview-strip{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
  margin:12px 0;
}
.military-overview-strip>div{
  min-width:0;
  padding:11px 12px;
  border:1px solid rgba(216,184,102,.22);
  border-radius:12px;
  background:linear-gradient(180deg,rgba(34,53,86,.72),rgba(14,28,50,.82));
}
.military-overview-strip>div.ready{
  border-color:rgba(91,218,148,.44);
  box-shadow:inset 0 0 20px rgba(91,218,148,.06);
}
.military-overview-strip small{
  display:block;
  color:#9aa9c1;
  font-size:10px;
  letter-spacing:.8px;
}
.military-overview-strip b{
  display:block;
  margin-top:3px;
  color:#fff2bb;
  font-size:20px;
  line-height:1.1;
}
.military-overview-strip b span{
  color:#9ca9be;
  font-size:12px;
}
.military-overview-strip p{
  min-height:30px;
  margin:5px 0 0;
  color:#aebbd0;
  font-size:9px;
  line-height:1.45;
}
.military-overview-strip i{
  display:block;
  height:7px;
  margin-top:8px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.10);
}
.military-overview-strip i em{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#4fcf8e,#d6bc5d);
}
.military-stat-grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:9px;
}
.military-stat-card{
  --military-stat-color:#7ba8ff;
  min-width:0;
  padding:11px;
  border:1px solid rgba(122,168,255,.32);
  border-radius:13px;
  background:linear-gradient(180deg,rgba(31,50,83,.82),rgba(11,24,44,.92));
}
.military-stat-card.low{--military-stat-color:#e66c72}
.military-stat-card.normal{--military-stat-color:#78b8ff}
.military-stat-card.high{--military-stat-color:#61d29b}
.military-stat-card.elite{--military-stat-color:#d9b95f}
.military-stat-card.legend{--military-stat-color:#d98cff}
.military-stat-card{
  border-color:color-mix(in srgb,var(--military-stat-color) 42%,transparent);
}
.military-stat-head{
  display:grid;
  grid-template-columns:36px minmax(0,1fr) auto;
  align-items:center;
  gap:8px;
}
.military-stat-icon{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:9px;
  color:var(--military-stat-color);
  font-size:20px;
  background:color-mix(in srgb,var(--military-stat-color) 11%,transparent);
  border:1px solid color-mix(in srgb,var(--military-stat-color) 28%,transparent);
}
.military-stat-head div{
  min-width:0;
  display:flex;
  flex-direction:column;
}
.military-stat-head small{
  color:#8795ad;
  font-size:8px;
  letter-spacing:1px;
}
.military-stat-head b{
  color:#eff5ff;
  font-size:14px;
}
.military-stat-head strong{
  color:var(--military-stat-color);
  font-family:Georgia,"Times New Roman",serif;
  font-size:26px;
}
.military-stat-rank{
  display:flex;
  justify-content:space-between;
  margin-top:8px;
  font-size:8px;
}
.military-stat-rank span{
  color:var(--military-stat-color);
  font-weight:900;
}
.military-stat-rank em{
  color:#75839b;
  font-style:normal;
}
.military-stat-meter{
  height:8px;
  margin-top:4px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.09);
}
.military-stat-meter i{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,color-mix(in srgb,var(--military-stat-color) 62%,#182642),var(--military-stat-color));
  box-shadow:0 0 11px color-mix(in srgb,var(--military-stat-color) 28%,transparent);
}
.military-stat-card p{
  min-height:54px;
  margin:8px 0;
  color:#aebad0;
  font-size:9px;
  line-height:1.5;
}
.military-stat-card p b{color:#fff0b4}
.military-stat-card>button{
  width:100%;
  min-height:32px;
  padding:6px;
  border-radius:8px;
  font-size:9px;
  font-weight:900;
  box-shadow:none;
}
.military-dashboard-columns{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
  gap:10px;
  margin-top:10px;
}
.military-troop-panel,
.military-effect-panel{
  min-width:0;
  padding:11px;
  border:1px solid rgba(216,184,102,.20);
  border-radius:13px;
  background:rgba(255,255,255,.035);
}
.military-section-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:8px;
  padding-bottom:8px;
  border-bottom:1px solid rgba(216,184,102,.16);
}
.military-section-head div{
  min-width:0;
  display:flex;
  flex-direction:column;
}
.military-section-head small{
  color:#7f8da4;
  font-size:7px;
  letter-spacing:1.2px;
}
.military-section-head b{
  color:#ead18d;
  font-size:13px;
}
.military-section-head button{
  min-height:28px;
  padding:4px 9px;
  border-radius:7px;
  font-size:8px;
  box-shadow:none;
}
.military-troop-list{
  display:grid;
  gap:5px;
  margin-top:8px;
}
.military-troop-row{
  min-width:0;
  display:grid;
  grid-template-columns:32px minmax(120px,1fr) minmax(90px,.9fr) 54px;
  align-items:center;
  gap:8px;
  padding:6px 8px;
  border-radius:9px;
  background:rgba(255,255,255,.045);
}
.military-troop-row.locked{
  opacity:.46;
  filter:grayscale(.35);
}
.military-troop-row>img{
  width:32px;
  height:32px;
  object-fit:cover;
  border-radius:8px;
  border:1px solid rgba(255,255,255,.13);
}
.military-troop-name{
  min-width:0;
  display:flex;
  flex-direction:column;
}
.military-troop-name b{
  color:#edf3ff;
  font-size:10px;
}
.military-troop-name small{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#8492a9;
  font-size:7px;
}
.military-troop-share{
  min-width:0;
  display:grid;
  grid-template-columns:minmax(0,1fr) 28px;
  align-items:center;
  gap:5px;
}
.military-troop-share i{
  height:6px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.08);
}
.military-troop-share em{
  display:block;
  height:100%;
  border-radius:inherit;
  background:linear-gradient(90deg,#4c7fbd,#6bc99a);
}
.military-troop-share span{
  color:#8694aa;
  font-size:7px;
  text-align:right;
}
.military-troop-row>strong{
  color:#f3d681;
  font-size:13px;
  text-align:right;
}
.military-effect-list{
  display:grid;
  gap:6px;
  margin-top:8px;
}
.military-effect-list>div{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:2px 8px;
  padding:7px 8px;
  border-radius:8px;
  background:rgba(255,255,255,.045);
}
.military-effect-list span{
  color:#a7b4c9;
  font-size:8px;
}
.military-effect-list b{
  color:#fff0b7;
  font-size:10px;
}
.military-effect-list small{
  grid-column:1/-1;
  color:#748198;
  font-size:7px;
  line-height:1.4;
}
.military-action-grid{
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  gap:7px;
  margin-top:10px;
}
.military-action-grid button{
  min-width:0;
  min-height:54px;
  padding:7px;
  display:grid;
  grid-template-columns:27px minmax(0,1fr);
  align-items:center;
  gap:6px;
  border-radius:10px;
  text-align:left;
  box-shadow:none;
}
.military-action-grid i{
  color:#ebcf79;
  font-size:19px;
  font-style:normal;
  text-align:center;
}
.military-action-grid span{
  min-width:0;
  display:flex;
  flex-direction:column;
}
.military-action-grid b{
  color:#f3f6fc;
  font-size:9px;
}
.military-action-grid small{
  color:#8492a8;
  font-size:6.5px;
}
@media(max-width:980px){
  .military-overview-strip{grid-template-columns:repeat(2,minmax(0,1fr))}
  .military-stat-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .military-dashboard-columns{grid-template-columns:1fr}
  .military-action-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media(max-width:620px){
  .military-dashboard-modal{
    width:97vw!important;
    max-width:97vw!important;
    padding:10px!important;
  }
  .military-overview-strip{grid-template-columns:1fr 1fr;gap:5px}
  .military-overview-strip>div{padding:8px}
  .military-overview-strip b{font-size:15px}
  .military-stat-grid{grid-template-columns:1fr;gap:6px}
  .military-stat-card p{min-height:0}
  .military-troop-row{grid-template-columns:28px minmax(80px,1fr) 72px 42px;gap:5px;padding:5px}
  .military-troop-row>img{width:28px;height:28px}
  .military-action-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
html.mobile-landscape-ui .military-dashboard-modal{
  width:96vw!important;
  max-width:96vw!important;
  max-height:94vh!important;
  padding:8px!important;
}
html.mobile-landscape-ui .military-overview-strip{
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:4px;
  margin:5px 0;
}
html.mobile-landscape-ui .military-overview-strip>div{padding:5px 6px;border-radius:6px}
html.mobile-landscape-ui .military-overview-strip small{font-size:5.5px}
html.mobile-landscape-ui .military-overview-strip b{font-size:11px}
html.mobile-landscape-ui .military-overview-strip b span{font-size:7px}
html.mobile-landscape-ui .military-overview-strip p{min-height:0;margin-top:2px;font-size:5.5px}
html.mobile-landscape-ui .military-overview-strip i{height:4px;margin-top:3px}
html.mobile-landscape-ui .military-stat-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
html.mobile-landscape-ui .military-stat-card{padding:5px;border-radius:6px}
html.mobile-landscape-ui .military-stat-head{grid-template-columns:22px minmax(0,1fr) auto;gap:3px}
html.mobile-landscape-ui .military-stat-icon{width:22px;height:22px;border-radius:5px;font-size:12px}
html.mobile-landscape-ui .military-stat-head small{font-size:4.5px}
html.mobile-landscape-ui .military-stat-head b{font-size:7px}
html.mobile-landscape-ui .military-stat-head strong{font-size:14px}
html.mobile-landscape-ui .military-stat-rank{margin-top:3px;font-size:4.5px}
html.mobile-landscape-ui .military-stat-meter{height:4px;margin-top:2px}
html.mobile-landscape-ui .military-stat-card p{min-height:24px;margin:3px 0;font-size:5px;line-height:1.35}
html.mobile-landscape-ui .military-stat-card>button{min-height:20px;padding:2px;font-size:5.5px;border-radius:4px}
html.mobile-landscape-ui .military-dashboard-columns{grid-template-columns:minmax(0,1.35fr) minmax(175px,.65fr);gap:4px;margin-top:4px}
html.mobile-landscape-ui .military-troop-panel,
html.mobile-landscape-ui .military-effect-panel{padding:5px;border-radius:6px}
html.mobile-landscape-ui .military-section-head{padding-bottom:3px}
html.mobile-landscape-ui .military-section-head small{font-size:4px}
html.mobile-landscape-ui .military-section-head b{font-size:6.5px}
html.mobile-landscape-ui .military-section-head button{min-height:18px;padding:2px 5px;font-size:5px;border-radius:4px}
html.mobile-landscape-ui .military-troop-list{gap:2px;margin-top:3px}
html.mobile-landscape-ui .military-troop-row{grid-template-columns:20px minmax(60px,1fr) 68px 30px;gap:3px;padding:2px 3px;border-radius:4px}
html.mobile-landscape-ui .military-troop-row>img{width:20px;height:20px;border-radius:4px}
html.mobile-landscape-ui .military-troop-name b{font-size:5.5px}
html.mobile-landscape-ui .military-troop-name small{font-size:4px}
html.mobile-landscape-ui .military-troop-share{grid-template-columns:minmax(0,1fr) 20px;gap:2px}
html.mobile-landscape-ui .military-troop-share i{height:3px}
html.mobile-landscape-ui .military-troop-share span{font-size:4px}
html.mobile-landscape-ui .military-troop-row>strong{font-size:6px}
html.mobile-landscape-ui .military-effect-list{gap:2px;margin-top:3px}
html.mobile-landscape-ui .military-effect-list>div{padding:3px 4px;border-radius:4px}
html.mobile-landscape-ui .military-effect-list span{font-size:4.5px}
html.mobile-landscape-ui .military-effect-list b{font-size:5.5px}
html.mobile-landscape-ui .military-effect-list small{font-size:4px}
html.mobile-landscape-ui .military-action-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:3px;margin-top:4px}
html.mobile-landscape-ui .military-action-grid button{min-height:31px;padding:3px;grid-template-columns:16px minmax(0,1fr);gap:2px;border-radius:5px}
html.mobile-landscape-ui .military-action-grid i{font-size:10px}
html.mobile-landscape-ui .military-action-grid b{font-size:5.5px}
html.mobile-landscape-ui .military-action-grid small{font-size:4px}


/* =========================================================
   v5.56 smartphone landscape visibility / overlap fix
   - prevent the iOS Safari command rail from painting blank
   - move the battle ticker away from the bottom controls
   - keep selected-territory card and quick dock side by side
   ========================================================= */
html.mobile-landscape-ui .strategy-map-panel{
  contain:none!important;
  overflow:hidden!important;
  isolation:isolate!important;
  grid-template-columns:minmax(0,1fr) clamp(104px,14vw,124px)!important;
}
html.mobile-landscape-ui .strategy-map-viewport{
  contain:none!important;
  isolation:isolate!important;
}
html.mobile-landscape-ui .strategy-command-rail{
  position:relative!important;
  z-index:80!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:stretch!important;
  justify-content:flex-start!important;
  grid-template-columns:none!important;
  grid-template-rows:none!important;
  grid-auto-rows:auto!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  padding:4px!important;
  gap:3px!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  visibility:visible!important;
  opacity:1!important;
  transform:translateZ(0)!important;
  contain:none!important;
  -webkit-overflow-scrolling:touch!important;
  background:linear-gradient(180deg,#101d35,#07101f)!important;
  border:1px solid rgba(217,183,101,.42)!important;
}
html.mobile-landscape-ui .strategy-command-title{
  flex:0 0 27px!important;
  min-height:27px!important;
  height:27px!important;
  display:flex!important;
  visibility:visible!important;
  opacity:1!important;
  padding:3px 5px!important;
  overflow:hidden!important;
}
html.mobile-landscape-ui .strategy-command-title small{
  display:block!important;
  color:#8998b1!important;
  font-size:5px!important;
}
html.mobile-landscape-ui .strategy-command-title b{
  display:block!important;
  color:#f0d68d!important;
  font-size:8px!important;
}
html.mobile-landscape-ui .strategy-command-rail>button{
  position:relative!important;
  z-index:1!important;
  flex:1 0 28px!important;
  display:grid!important;
  grid-template-columns:20px minmax(0,1fr)!important;
  align-items:center!important;
  width:100%!important;
  min-width:0!important;
  min-height:28px!important;
  height:auto!important;
  margin:0!important;
  padding:3px 5px!important;
  visibility:visible!important;
  opacity:1!important;
  transform:none!important;
  overflow:visible!important;
  color:#f6f0df!important;
  background:linear-gradient(180deg,#263f68,#132746)!important;
  border:1px solid rgba(217,183,101,.34)!important;
  border-radius:5px!important;
  font-size:9px!important;
  line-height:1!important;
  -webkit-appearance:none!important;
  appearance:none!important;
  touch-action:manipulation!important;
  pointer-events:auto!important;
}
html.mobile-landscape-ui .strategy-command-rail>button i,
html.mobile-landscape-ui .strategy-command-rail>button span{
  display:block!important;
  visibility:visible!important;
  opacity:1!important;
}
html.mobile-landscape-ui .strategy-command-rail>button i{
  color:#ecd184!important;
  font-size:12px!important;
  text-align:center!important;
}
html.mobile-landscape-ui .strategy-command-rail>button span{
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#f6f0df!important;
  font-size:9px!important;
  font-weight:900!important;
}
html.mobile-landscape-ui .strategy-command-rail>.war-command-btn{
  background:linear-gradient(180deg,#a52f43,#701a2b)!important;
  border-color:rgba(255,105,117,.66)!important;
}
html.mobile-landscape-ui .strategy-command-rail>.end-turn-command-btn{
  background:linear-gradient(180deg,#9d7423,#5d3e0d)!important;
  border-color:rgba(244,211,112,.68)!important;
}

/* The ticker now occupies the map's upper-right area instead of covering the card/dock. */
html.mobile-landscape-ui .strategy-announcement{
  top:5px!important;
  right:5px!important;
  bottom:auto!important;
  left:auto!important;
  width:min(46%,330px)!important;
  min-height:23px!important;
  transform:none!important;
  z-index:43!important;
}
html.mobile-landscape-ui .strategy-announcement-label{
  padding:0 7px!important;
  font-size:6px!important;
}
html.mobile-landscape-ui .strategy-announcement-track>span{
  padding:0 14px!important;
  font-size:6px!important;
  line-height:21px!important;
}

/* Keep lower overlays in separate horizontal zones. */
html.mobile-landscape-ui .strategy-territory-card{
  left:5px!important;
  bottom:5px!important;
  width:clamp(158px,25vw,205px)!important;
  max-height:48%!important;
  overflow:hidden!important;
  z-index:45!important;
}
html.mobile-landscape-ui .strategy-bottom-dock{
  left:clamp(171px,27vw,218px)!important;
  right:auto!important;
  bottom:5px!important;
  transform:none!important;
  z-index:46!important;
  max-width:calc(100% - clamp(181px,29vw,228px) - 6px)!important;
  overflow:hidden!important;
}
html.mobile-landscape-ui .strategy-bottom-dock button{
  flex:0 1 43px!important;
  width:43px!important;
  min-width:34px!important;
}

/* Avoid mobile performance containment hiding descendants in WebKit. */
html.mobile-landscape-ui .main-screen .map-panel,
html.mobile-landscape-ui .main-screen .commands.menu-groups,
html.mobile-landscape-ui .main-screen .map-viewport{
  contain:none!important;
}

@media (orientation:landscape) and (max-width:760px){
  html.mobile-landscape-ui .strategy-map-panel{
    grid-template-columns:minmax(0,1fr) 102px!important;
  }
  html.mobile-landscape-ui .strategy-territory-card{
    width:150px!important;
  }
  html.mobile-landscape-ui .strategy-bottom-dock{
    left:160px!important;
    max-width:calc(100% - 166px)!important;
    gap:1px!important;
    padding:2px!important;
  }
  html.mobile-landscape-ui .strategy-bottom-dock button{
    width:36px!important;
    min-width:31px!important;
    height:30px!important;
  }
  html.mobile-landscape-ui .strategy-bottom-dock button span{font-size:5px!important}
  html.mobile-landscape-ui .strategy-announcement{width:44%!important}
}

@media (orientation:landscape) and (max-height:430px){
  html.mobile-landscape-ui .strategy-command-title{
    flex-basis:23px!important;
    min-height:23px!important;
    height:23px!important;
  }
  html.mobile-landscape-ui .strategy-command-rail>button{
    flex-basis:24px!important;
    min-height:24px!important;
    padding:2px 4px!important;
    font-size:8px!important;
  }
  html.mobile-landscape-ui .strategy-command-rail>button span{font-size:8px!important}
  html.mobile-landscape-ui .strategy-territory-card{
    width:148px!important;
    max-height:51%!important;
  }
  html.mobile-landscape-ui .strategy-bottom-dock{
    left:157px!important;
    max-width:calc(100% - 163px)!important;
  }
  html.mobile-landscape-ui .strategy-announcement{
    top:4px!important;
    min-height:20px!important;
  }
  html.mobile-landscape-ui .strategy-announcement-track>span{line-height:18px!important}
}

/* =========================================================
   v5.57 iPhone 12 mini / compact iPhone responsive UI
   - dedicated portrait layout instead of shrinking desktop UI
   - reliable duplicate mobile command grid for iOS WebKit
   - no overlapping orientation banner, territory card or dock
   ========================================================= */
.strategy-mobile-command-grid{display:none}

/* iPhone/compact touch landscape: use the robust mobile command grid. */
html.mobile-landscape-ui .strategy-command-rail{display:none!important}
html.mobile-landscape-ui .strategy-mobile-command-grid{
  position:relative!important;
  z-index:82!important;
  grid-column:2!important;
  grid-row:1!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:4px!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-template-rows:auto repeat(8,minmax(24px,1fr))!important;
  grid-auto-rows:minmax(24px,1fr)!important;
  align-content:stretch!important;
  gap:3px!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  -webkit-overflow-scrolling:touch!important;
  border:1px solid rgba(217,183,101,.42)!important;
  border-radius:6px!important;
  background:linear-gradient(180deg,#101d35,#07101f)!important;
  visibility:visible!important;
  opacity:1!important;
  contain:none!important;
}
html.mobile-landscape-ui .strategy-mobile-command-grid .strategy-command-title{
  min-height:25px!important;
  height:auto!important;
  padding:3px 5px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  border-bottom:1px solid rgba(217,183,101,.25)!important;
}
html.mobile-landscape-ui .strategy-mobile-command-grid .strategy-command-title small{
  color:#8998b1!important;
  font-size:5px!important;
  letter-spacing:1px!important;
}
html.mobile-landscape-ui .strategy-mobile-command-grid .strategy-command-title b{
  color:#f0d68d!important;
  font-size:8px!important;
}
html.mobile-landscape-ui .strategy-mobile-command-grid>button{
  position:relative!important;
  width:100%!important;
  min-width:0!important;
  min-height:24px!important;
  height:auto!important;
  margin:0!important;
  padding:3px 5px!important;
  display:grid!important;
  grid-template-columns:19px minmax(0,1fr)!important;
  align-items:center!important;
  gap:3px!important;
  overflow:visible!important;
  border:1px solid rgba(217,183,101,.34)!important;
  border-radius:5px!important;
  background:linear-gradient(180deg,#263f68,#132746)!important;
  color:#f6f0df!important;
  font-size:8px!important;
  font-weight:900!important;
  line-height:1!important;
  text-align:left!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
  -webkit-appearance:none!important;
  appearance:none!important;
}
html.mobile-landscape-ui .strategy-mobile-command-grid>button i{
  display:block!important;
  color:#ecd184!important;
  font-size:11px!important;
  font-style:normal!important;
  text-align:center!important;
}
html.mobile-landscape-ui .strategy-mobile-command-grid>button span{
  display:block!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  color:#f6f0df!important;
  font-size:8px!important;
}
html.mobile-landscape-ui .strategy-mobile-command-grid>.war-command-btn{
  background:linear-gradient(180deg,#a52f43,#701a2b)!important;
  border-color:rgba(255,105,117,.66)!important;
}
html.mobile-landscape-ui .strategy-mobile-command-grid>.end-turn-command-btn{
  background:linear-gradient(180deg,#9d7423,#5d3e0d)!important;
  border-color:rgba(244,211,112,.68)!important;
}
html.mobile-landscape-ui .strategy-mobile-command-grid>.true-dragon-btn{
  background:linear-gradient(180deg,#7f2337,#401021)!important;
}
html.mobile-landscape-ui .strategy-mobile-command-grid>.final-boss-btn{
  background:linear-gradient(180deg,#60347e,#29173d)!important;
}

/* Compact portrait mode: a real one-column mobile screen. */
html.mobile-portrait-ui,
html.mobile-portrait-ui body,
html.mobile-portrait-ui #app{
  width:100%!important;
  min-width:0!important;
  height:auto!important;
  min-height:100%!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  background:#030812!important;
}
html.mobile-portrait-ui body::before{
  display:none!important;
  content:none!important;
}
html.mobile-portrait-ui .strategy-shell{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  height:auto!important;
  min-height:var(--strategy-app-height,100dvh)!important;
  padding:8px 7px max(12px,env(safe-area-inset-bottom))!important;
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
  overflow:visible!important;
}
html.mobile-portrait-ui .strategy-hud{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:7px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1.15fr) minmax(116px,.85fr)!important;
  grid-template-rows:auto auto!important;
  align-items:stretch!important;
  gap:6px!important;
  border-radius:12px!important;
}
html.mobile-portrait-ui .strategy-brand{
  min-width:0!important;
  height:54px!important;
  padding:0 7px 0 2px!important;
  gap:7px!important;
  border-right:1px solid rgba(217,183,101,.25)!important;
}
html.mobile-portrait-ui .strategy-brand-mark{
  width:38px!important;
  height:38px!important;
  font-size:21px!important;
}
html.mobile-portrait-ui .strategy-brand-copy b{
  font-size:16px!important;
  line-height:1!important;
}
html.mobile-portrait-ui .strategy-brand-copy small{
  margin-top:3px!important;
  font-size:9px!important;
  letter-spacing:2.2px!important;
}
html.mobile-portrait-ui .strategy-turn-card{
  width:100%!important;
  height:54px!important;
  min-width:0!important;
  grid-template-columns:27px auto minmax(0,1fr)!important;
  gap:4px!important;
  padding:4px 7px!important;
  border-radius:9px!important;
}
html.mobile-portrait-ui .strategy-turn-icon{font-size:19px!important}
html.mobile-portrait-ui .strategy-turn-card small{font-size:6px!important}
html.mobile-portrait-ui .strategy-turn-card b{font-size:20px!important}
html.mobile-portrait-ui .strategy-turn-card em{
  font-size:9px!important;
  text-align:right!important;
}
html.mobile-portrait-ui .strategy-stat-row{
  grid-column:1/-1!important;
  width:100%!important;
  min-width:0!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:5px!important;
  overflow:visible!important;
}
html.mobile-portrait-ui .strategy-hud-stat{
  width:100%!important;
  height:42px!important;
  min-width:0!important;
  padding:5px 8px!important;
  gap:7px!important;
  border-radius:8px!important;
}
html.mobile-portrait-ui .strategy-hud-stat>i{font-size:14px!important}
html.mobile-portrait-ui .strategy-hud-stat small{font-size:6.5px!important}
html.mobile-portrait-ui .strategy-hud-stat b{font-size:12px!important}
html.mobile-portrait-ui .strategy-hud-stat.hud-stat-extra{display:none!important}
html.mobile-portrait-ui .strategy-hud-tools{display:none!important}
html.mobile-portrait-ui .strategy-main-grid{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  display:block!important;
  overflow:visible!important;
}
html.mobile-portrait-ui .strategy-map-panel{
  position:relative!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:7px!important;
  display:flex!important;
  flex-direction:column!important;
  gap:8px!important;
  overflow:visible!important;
  border-radius:12px!important;
}
html.mobile-portrait-ui .strategy-map-viewport{
  position:relative!important;
  width:100%!important;
  height:510px!important;
  min-height:510px!important;
  max-height:none!important;
  margin:0!important;
  overflow:hidden!important;
  border-radius:9px!important;
  touch-action:none!important;
}
html.mobile-portrait-ui .strategy-map-viewport>.map-stage{
  position:absolute!important;
  inset:0 auto auto 0!important;
  width:100%!important;
  height:215px!important;
  min-height:215px!important;
  max-height:215px!important;
  border-radius:0!important;
  background-size:100% 100%!important;
  background-position:center!important;
  transform-origin:0 0!important;
}
html.mobile-portrait-ui .strategy-map-toolbar{
  left:6px!important;
  right:6px!important;
  top:6px!important;
  width:auto!important;
  max-width:none!important;
  min-height:34px!important;
  grid-template-columns:minmax(0,1fr) 31px 39px 31px!important;
  gap:3px!important;
  padding:4px!important;
  border-radius:8px!important;
  backdrop-filter:none!important;
}
html.mobile-portrait-ui .strategy-map-toolbar b{font-size:10px!important}
html.mobile-portrait-ui .strategy-map-toolbar small{font-size:6.5px!important}
html.mobile-portrait-ui .strategy-map-toolbar button{
  height:27px!important;
  min-height:27px!important;
  padding:2px!important;
  font-size:9px!important;
}
html.mobile-portrait-ui .strategy-announcement{
  position:absolute!important;
  left:6px!important;
  right:6px!important;
  top:181px!important;
  bottom:auto!important;
  width:auto!important;
  height:28px!important;
  min-height:28px!important;
  transform:none!important;
  z-index:47!important;
  border-radius:7px!important;
}
html.mobile-portrait-ui .strategy-announcement-label{
  width:47px!important;
  min-width:47px!important;
  padding:0 7px!important;
  font-size:7px!important;
}
html.mobile-portrait-ui .strategy-announcement-window{min-width:0!important}
html.mobile-portrait-ui .strategy-announcement-track>span{
  padding:0 12px!important;
  font-size:7.5px!important;
  line-height:26px!important;
}
html.mobile-portrait-ui .strategy-territory-card{
  position:absolute!important;
  left:7px!important;
  right:7px!important;
  top:216px!important;
  bottom:auto!important;
  width:auto!important;
  max-width:none!important;
  height:auto!important;
  max-height:none!important;
  padding:9px!important;
  overflow:hidden!important;
  border-radius:9px!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  z-index:46!important;
}
html.mobile-portrait-ui .strategy-territory-head{gap:7px!important;padding-bottom:6px!important}
html.mobile-portrait-ui .territory-card-crown{
  width:31px!important;
  height:31px!important;
  font-size:18px!important;
}
html.mobile-portrait-ui .strategy-territory-head small{font-size:6px!important}
html.mobile-portrait-ui .strategy-territory-head b{font-size:14px!important}
html.mobile-portrait-ui .strategy-territory-owner{margin-top:6px!important;font-size:9px!important}
html.mobile-portrait-ui .strategy-durability{margin-top:5px!important}
html.mobile-portrait-ui .strategy-durability>span{font-size:8px!important}
html.mobile-portrait-ui .strategy-durability>i{height:6px!important;margin-top:3px!important}
html.mobile-portrait-ui .strategy-territory-grid{
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:4px!important;
  margin-top:6px!important;
}
html.mobile-portrait-ui .strategy-territory-grid>span{
  padding:4px 6px!important;
  border-radius:6px!important;
}
html.mobile-portrait-ui .strategy-territory-grid small{font-size:6px!important}
html.mobile-portrait-ui .strategy-territory-grid b{font-size:7px!important}
html.mobile-portrait-ui .strategy-territory-actions{
  gap:4px!important;
  margin-top:6px!important;
}
html.mobile-portrait-ui .strategy-territory-actions button{
  min-height:31px!important;
  padding:4px!important;
  border-radius:6px!important;
  font-size:8px!important;
}
html.mobile-portrait-ui .strategy-bottom-dock{
  position:absolute!important;
  left:7px!important;
  right:7px!important;
  top:400px!important;
  bottom:auto!important;
  width:auto!important;
  max-width:none!important;
  height:auto!important;
  margin:0!important;
  padding:4px!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:4px!important;
  transform:none!important;
  overflow:visible!important;
  border-radius:9px!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  z-index:48!important;
}
html.mobile-portrait-ui .strategy-bottom-dock button{
  width:100%!important;
  min-width:0!important;
  height:45px!important;
  min-height:45px!important;
  padding:4px!important;
  gap:2px!important;
  border-radius:7px!important;
}
html.mobile-portrait-ui .strategy-bottom-dock button i{font-size:16px!important}
html.mobile-portrait-ui .strategy-bottom-dock button span{font-size:7.5px!important}
html.mobile-portrait-ui .strategy-status-tray{
  position:absolute!important;
  left:7px!important;
  right:7px!important;
  top:216px!important;
  bottom:7px!important;
  width:auto!important;
  max-height:none!important;
  padding:10px!important;
  border-radius:9px!important;
  z-index:90!important;
}
html.mobile-portrait-ui .strategy-command-rail{display:none!important}
html.mobile-portrait-ui .strategy-mobile-command-grid{
  position:relative!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:7px!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-auto-rows:minmax(54px,auto)!important;
  gap:7px!important;
  overflow:visible!important;
  border:1px solid rgba(217,183,101,.42)!important;
  border-radius:10px!important;
  background:linear-gradient(180deg,#101d35,#07101f)!important;
}
html.mobile-portrait-ui .strategy-mobile-command-grid .strategy-command-title{
  grid-column:1/-1!important;
  min-height:47px!important;
  padding:7px 10px!important;
  display:flex!important;
  flex-direction:column!important;
  justify-content:center!important;
  border-bottom:1px solid rgba(217,183,101,.25)!important;
}
html.mobile-portrait-ui .strategy-mobile-command-grid .strategy-command-title small{
  color:#8998b1!important;
  font-size:7px!important;
  letter-spacing:1.4px!important;
}
html.mobile-portrait-ui .strategy-mobile-command-grid .strategy-command-title b{
  color:#f0d68d!important;
  font-size:15px!important;
}
html.mobile-portrait-ui .strategy-mobile-command-grid>button{
  width:100%!important;
  min-width:0!important;
  min-height:54px!important;
  height:auto!important;
  margin:0!important;
  padding:8px!important;
  display:grid!important;
  grid-template-columns:31px minmax(0,1fr)!important;
  align-items:center!important;
  gap:7px!important;
  border:1px solid rgba(217,183,101,.34)!important;
  border-radius:9px!important;
  background:linear-gradient(180deg,#263f68,#132746)!important;
  color:#f6f0df!important;
  font-size:14px!important;
  font-weight:900!important;
  text-align:left!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
  -webkit-appearance:none!important;
  appearance:none!important;
}
html.mobile-portrait-ui .strategy-mobile-command-grid>button i{
  color:#ecd184!important;
  font-size:20px!important;
  font-style:normal!important;
  text-align:center!important;
}
html.mobile-portrait-ui .strategy-mobile-command-grid>button span{
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
  font-size:14px!important;
}
html.mobile-portrait-ui .strategy-mobile-command-grid>.war-command-btn{
  background:linear-gradient(180deg,#a52f43,#701a2b)!important;
  border-color:rgba(255,105,117,.66)!important;
}
html.mobile-portrait-ui .strategy-mobile-command-grid>.end-turn-command-btn{
  background:linear-gradient(180deg,#9d7423,#5d3e0d)!important;
  border-color:rgba(244,211,112,.68)!important;
}
html.mobile-portrait-ui .strategy-mobile-command-grid>.true-dragon-btn{
  background:linear-gradient(180deg,#7f2337,#401021)!important;
}
html.mobile-portrait-ui .strategy-mobile-command-grid>.final-boss-btn{
  background:linear-gradient(180deg,#60347e,#29173d)!important;
}
html.mobile-portrait-ui .strategy-map-panel>.war-mode-bar,
html.mobile-portrait-ui .strategy-map-panel>.dragon-boss-bar,
html.mobile-portrait-ui .strategy-map-panel>.true-dragon-bar{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  transform:none!important;
  width:100%!important;
  max-width:none!important;
  min-height:38px!important;
  margin:0!important;
  font-size:9px!important;
}
html.mobile-portrait-ui .strategy-map-panel .map-node{
  width:36px!important;
  height:36px!important;
  transform:translate(-50%,-58%)!important;
}
html.mobile-portrait-ui .strategy-map-panel .node-icon{
  width:32px!important;
  height:24px!important;
}
html.mobile-portrait-ui .strategy-map-panel .node-label{
  min-width:36px!important;
  max-width:52px!important;
  padding:1px 2px!important;
  font-size:5.8px!important;
  line-height:1.05!important;
}
html.mobile-portrait-ui .strategy-map-panel .node-flag{width:14px!important;height:7px!important}
html.mobile-portrait-ui .strategy-map-panel .node-flag-pole{height:15px!important}

/* iPhone 12 mini / 13 mini width tuning. */
@media (orientation:portrait) and (max-width:390px){
  html.mobile-portrait-ui .strategy-shell{padding-left:5px!important;padding-right:5px!important}
  html.mobile-portrait-ui .strategy-hud{
    grid-template-columns:minmax(0,1fr) 116px!important;
    padding:6px!important;
    gap:5px!important;
  }
  html.mobile-portrait-ui .strategy-brand{height:50px!important}
  html.mobile-portrait-ui .strategy-brand-mark{width:35px!important;height:35px!important;font-size:19px!important}
  html.mobile-portrait-ui .strategy-brand-copy b{font-size:14px!important}
  html.mobile-portrait-ui .strategy-brand-copy small{font-size:8px!important}
  html.mobile-portrait-ui .strategy-turn-card{height:50px!important;padding:3px 6px!important}
  html.mobile-portrait-ui .strategy-turn-card b{font-size:18px!important}
  html.mobile-portrait-ui .strategy-hud-stat{height:39px!important;padding:4px 7px!important}
  html.mobile-portrait-ui .strategy-map-panel{padding:5px!important}
  html.mobile-portrait-ui .strategy-map-viewport{height:494px!important;min-height:494px!important}
  html.mobile-portrait-ui .strategy-map-viewport>.map-stage{height:205px!important;min-height:205px!important;max-height:205px!important}
  html.mobile-portrait-ui .strategy-announcement{top:171px!important}
  html.mobile-portrait-ui .strategy-territory-card{top:206px!important;left:6px!important;right:6px!important;padding:8px!important}
  html.mobile-portrait-ui .strategy-bottom-dock{top:386px!important;left:6px!important;right:6px!important}
  html.mobile-portrait-ui .strategy-bottom-dock button{height:43px!important;min-height:43px!important}
  html.mobile-portrait-ui .strategy-mobile-command-grid{padding:6px!important;gap:6px!important}
  html.mobile-portrait-ui .strategy-mobile-command-grid>button{min-height:51px!important;font-size:13px!important}
  html.mobile-portrait-ui .strategy-mobile-command-grid>button span{font-size:13px!important}
}

/* =========================================================
   v5.58 compact iPhone layout stabilizer
   - mobile landscape uses a full-width map and slide-in command drawer
   - mobile portrait uses a true single-column document flow
   - removes the large empty band seen on iPhone 12 mini Safari
   ========================================================= */
.strategy-command-toggle,
.strategy-command-backdrop{display:none}

/* --- iPhone / compact touch landscape --- */
html.mobile-landscape-ui,
html.mobile-landscape-ui body,
html.mobile-landscape-ui #app{
  width:100%!important;
  height:var(--strategy-app-height,100svh)!important;
  min-height:0!important;
  overflow:hidden!important;
  background:#030812!important;
}
html.mobile-landscape-ui body{
  padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0)!important;
}
html.mobile-landscape-ui .strategy-shell{
  position:fixed!important;
  inset:0!important;
  width:100%!important;
  height:var(--strategy-app-height,100svh)!important;
  min-height:0!important;
  padding:4px!important;
  display:grid!important;
  grid-template-rows:47px minmax(0,1fr)!important;
  gap:4px!important;
  overflow:hidden!important;
}
html.mobile-landscape-ui .strategy-hud{
  position:relative!important;
  width:100%!important;
  height:47px!important;
  min-height:47px!important;
  margin:0!important;
  padding:4px 6px!important;
  display:grid!important;
  grid-template-columns:150px 146px minmax(0,1fr)!important;
  gap:5px!important;
  border-radius:8px!important;
  overflow:hidden!important;
}
html.mobile-landscape-ui .strategy-brand{height:37px!important;gap:6px!important;padding-right:6px!important}
html.mobile-landscape-ui .strategy-brand-mark{width:31px!important;height:31px!important;font-size:17px!important}
html.mobile-landscape-ui .strategy-brand-copy b{font-size:12px!important}
html.mobile-landscape-ui .strategy-brand-copy small{font-size:6.5px!important;letter-spacing:1.5px!important}
html.mobile-landscape-ui .strategy-turn-card{height:37px!important;padding:2px 6px!important;grid-template-columns:23px auto minmax(0,1fr)!important}
html.mobile-landscape-ui .strategy-turn-icon{font-size:16px!important}
html.mobile-landscape-ui .strategy-turn-card b{font-size:15px!important}
html.mobile-landscape-ui .strategy-turn-card small{font-size:5.5px!important}
html.mobile-landscape-ui .strategy-turn-card em{font-size:7px!important}
html.mobile-landscape-ui .strategy-stat-row{
  min-width:0!important;
  height:37px!important;
  display:grid!important;
  grid-template-columns:repeat(4,minmax(68px,1fr))!important;
  gap:4px!important;
  overflow:hidden!important;
}
html.mobile-landscape-ui .strategy-hud-stat{
  height:37px!important;
  min-height:37px!important;
  padding:2px 5px!important;
  gap:4px!important;
  border-radius:6px!important;
}
html.mobile-landscape-ui .strategy-hud-stat>i{font-size:11px!important}
html.mobile-landscape-ui .strategy-hud-stat small{font-size:5px!important}
html.mobile-landscape-ui .strategy-hud-stat b{font-size:8px!important}
html.mobile-landscape-ui .strategy-hud-stat.hud-stat-extra,
html.mobile-landscape-ui .strategy-hud-tools{display:none!important}
html.mobile-landscape-ui .strategy-main-grid{
  position:relative!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  display:block!important;
  overflow:hidden!important;
}
html.mobile-landscape-ui .strategy-map-panel{
  position:relative!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:4px!important;
  display:block!important;
  overflow:hidden!important;
  border-radius:8px!important;
}
html.mobile-landscape-ui .strategy-map-viewport{
  position:absolute!important;
  inset:4px!important;
  width:auto!important;
  max-width:none!important;
  height:auto!important;
  max-height:none!important;
  min-height:0!important;
  margin:0!important;
  aspect-ratio:auto!important;
  overflow:hidden!important;
  border-radius:6px!important;
}
html.mobile-landscape-ui .strategy-map-viewport>.map-stage{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  background-size:100% 100%!important;
  background-position:center!important;
}
html.mobile-landscape-ui .strategy-map-viewport::after{display:none!important}
html.mobile-landscape-ui .strategy-mobile-command-grid{display:none!important}
html.mobile-landscape-ui .strategy-command-toggle{
  position:absolute!important;
  z-index:105!important;
  top:10px!important;
  right:10px!important;
  width:82px!important;
  height:32px!important;
  min-width:0!important;
  margin:0!important;
  padding:4px 7px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  border:1px solid rgba(244,211,112,.7)!important;
  border-radius:7px!important;
  background:linear-gradient(180deg,#8b681f,#4c330c)!important;
  color:#fff3c8!important;
  font-size:8px!important;
  font-weight:900!important;
  box-shadow:0 7px 18px rgba(0,0,0,.34)!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
}
html.mobile-landscape-ui .strategy-command-toggle i{font-size:13px!important;font-style:normal!important}
html.mobile-landscape-ui .strategy-command-backdrop{
  position:absolute!important;
  inset:0!important;
  z-index:109!important;
  width:100%!important;
  height:100%!important;
  margin:0!important;
  padding:0!important;
  display:block!important;
  border:0!important;
  border-radius:0!important;
  background:rgba(1,5,12,.42)!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:opacity .18s ease,visibility .18s ease!important;
}
html.mobile-landscape-ui .strategy-command-backdrop.open{
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
html.mobile-landscape-ui .strategy-command-rail{
  position:absolute!important;
  z-index:112!important;
  top:8px!important;
  right:8px!important;
  bottom:8px!important;
  left:auto!important;
  width:min(250px,39vw)!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:7px!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-template-rows:auto repeat(8,minmax(30px,1fr))!important;
  grid-auto-rows:minmax(30px,1fr)!important;
  gap:4px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  border-radius:9px!important;
  transform:translate3d(calc(100% + 18px),0,0)!important;
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
  transition:transform .2s ease,opacity .18s ease,visibility .18s ease!important;
  box-shadow:-14px 0 34px rgba(0,0,0,.42)!important;
  -webkit-overflow-scrolling:touch!important;
}
html.mobile-landscape-ui .strategy-command-rail.open{
  transform:translate3d(0,0,0)!important;
  opacity:1!important;
  visibility:visible!important;
  pointer-events:auto!important;
}
html.mobile-landscape-ui .strategy-command-title{min-height:30px!important;padding:3px 6px!important}
html.mobile-landscape-ui .strategy-command-title small{font-size:5px!important}
html.mobile-landscape-ui .strategy-command-title b{font-size:9px!important}
html.mobile-landscape-ui .strategy-command-rail>button{
  width:100%!important;
  min-width:0!important;
  min-height:30px!important;
  height:auto!important;
  margin:0!important;
  padding:4px 7px!important;
  display:grid!important;
  grid-template-columns:23px minmax(0,1fr)!important;
  gap:5px!important;
  border-radius:6px!important;
  font-size:9px!important;
  line-height:1!important;
  pointer-events:auto!important;
  touch-action:manipulation!important;
}
html.mobile-landscape-ui .strategy-command-rail>button i{font-size:13px!important}
html.mobile-landscape-ui .strategy-command-rail>button span{font-size:9px!important}
html.mobile-landscape-ui .strategy-map-toolbar{
  position:absolute!important;
  z-index:43!important;
  left:7px!important;
  top:7px!important;
  right:auto!important;
  width:min(355px,46%)!important;
  max-width:none!important;
  height:31px!important;
  padding:3px!important;
  grid-template-columns:minmax(92px,1fr) 27px 36px 27px!important;
  gap:2px!important;
  border-radius:6px!important;
}
html.mobile-landscape-ui .strategy-map-toolbar b{font-size:8px!important}
html.mobile-landscape-ui .strategy-map-toolbar small{font-size:5px!important}
html.mobile-landscape-ui .strategy-map-toolbar button{height:23px!important;font-size:7px!important}
html.mobile-landscape-ui .strategy-announcement{
  position:absolute!important;
  z-index:44!important;
  top:7px!important;
  right:99px!important;
  left:auto!important;
  bottom:auto!important;
  width:min(510px,48%)!important;
  height:31px!important;
  min-height:31px!important;
  transform:none!important;
  border-radius:6px!important;
}
html.mobile-landscape-ui .strategy-announcement-label{width:43px!important;min-width:43px!important;font-size:6px!important}
html.mobile-landscape-ui .strategy-announcement-track>span{font-size:7px!important;line-height:29px!important;padding:0 10px!important}
html.mobile-landscape-ui .strategy-territory-card{
  position:absolute!important;
  z-index:46!important;
  left:8px!important;
  bottom:8px!important;
  top:auto!important;
  right:auto!important;
  width:224px!important;
  max-width:28%!important;
  height:auto!important;
  padding:7px!important;
  border-radius:7px!important;
  box-shadow:0 8px 20px rgba(0,0,0,.28)!important;
}
html.mobile-landscape-ui .strategy-territory-head{gap:5px!important;padding-bottom:4px!important}
html.mobile-landscape-ui .territory-card-crown{width:25px!important;height:25px!important;font-size:14px!important}
html.mobile-landscape-ui .strategy-territory-head small{font-size:4.5px!important}
html.mobile-landscape-ui .strategy-territory-head b{font-size:9px!important}
html.mobile-landscape-ui .strategy-territory-owner{margin-top:4px!important;font-size:6.5px!important}
html.mobile-landscape-ui .strategy-durability{margin-top:3px!important}
html.mobile-landscape-ui .strategy-durability>span{font-size:6px!important}
html.mobile-landscape-ui .strategy-durability>i{height:4px!important;margin-top:2px!important}
html.mobile-landscape-ui .strategy-territory-grid{display:none!important}
html.mobile-landscape-ui .strategy-territory-actions{margin-top:4px!important;gap:3px!important}
html.mobile-landscape-ui .strategy-territory-actions button{min-height:22px!important;padding:2px!important;font-size:6px!important}
html.mobile-landscape-ui .strategy-bottom-dock{
  position:absolute!important;
  z-index:47!important;
  left:240px!important;
  right:auto!important;
  bottom:8px!important;
  top:auto!important;
  width:auto!important;
  max-width:calc(100% - 250px)!important;
  height:auto!important;
  margin:0!important;
  padding:4px!important;
  display:flex!important;
  gap:3px!important;
  transform:none!important;
  overflow:visible!important;
  border-radius:7px!important;
  box-shadow:0 8px 20px rgba(0,0,0,.28)!important;
}
html.mobile-landscape-ui .strategy-bottom-dock button{
  width:48px!important;
  min-width:0!important;
  height:39px!important;
  min-height:39px!important;
  padding:2px!important;
  border-radius:5px!important;
}
html.mobile-landscape-ui .strategy-bottom-dock button i{font-size:13px!important}
html.mobile-landscape-ui .strategy-bottom-dock button span{font-size:6px!important}
html.mobile-landscape-ui .strategy-status-tray{
  position:absolute!important;
  z-index:100!important;
  right:8px!important;
  bottom:8px!important;
  width:min(310px,45%)!important;
  max-height:calc(100% - 53px)!important;
}
html.mobile-landscape-ui .strategy-map-panel>.war-mode-bar,
html.mobile-landscape-ui .strategy-map-panel>.dragon-boss-bar,
html.mobile-landscape-ui .strategy-map-panel>.true-dragon-bar{
  top:44px!important;
  max-width:58%!important;
}

/* Short landscape heights: keep the map usable rather than reserving blank space. */
@media (orientation:landscape) and (max-height:390px){
  html.mobile-landscape-ui .strategy-shell{grid-template-rows:41px minmax(0,1fr)!important}
  html.mobile-landscape-ui .strategy-hud{height:41px!important;min-height:41px!important;grid-template-columns:132px 128px minmax(0,1fr)!important;padding:3px 5px!important}
  html.mobile-landscape-ui .strategy-brand,
  html.mobile-landscape-ui .strategy-turn-card,
  html.mobile-landscape-ui .strategy-stat-row,
  html.mobile-landscape-ui .strategy-hud-stat{height:31px!important;min-height:31px!important}
  html.mobile-landscape-ui .strategy-command-toggle{top:7px!important;right:7px!important;height:28px!important;width:74px!important}
  html.mobile-landscape-ui .strategy-map-toolbar,
  html.mobile-landscape-ui .strategy-announcement{top:5px!important;height:27px!important;min-height:27px!important}
  html.mobile-landscape-ui .strategy-announcement{right:88px!important}
  html.mobile-landscape-ui .strategy-announcement-track>span{line-height:25px!important}
  html.mobile-landscape-ui .strategy-territory-card{width:198px!important;max-width:27%!important;padding:5px!important}
  html.mobile-landscape-ui .strategy-bottom-dock{left:211px!important;max-width:calc(100% - 220px)!important}
  html.mobile-landscape-ui .strategy-bottom-dock button{width:43px!important;height:34px!important;min-height:34px!important}
  html.mobile-landscape-ui .strategy-command-rail{width:min(230px,40vw)!important}
}

/* --- Compact portrait: normal document flow, no overlay pile-up --- */
html.mobile-portrait-ui,
html.mobile-portrait-ui body,
html.mobile-portrait-ui #app{
  width:100%!important;
  height:auto!important;
  min-height:100svh!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  background:#030812!important;
}
html.mobile-portrait-ui body{
  padding:env(safe-area-inset-top,0) env(safe-area-inset-right,0) env(safe-area-inset-bottom,0) env(safe-area-inset-left,0)!important;
}
html.mobile-portrait-ui .strategy-shell{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  height:auto!important;
  min-height:100svh!important;
  padding:6px!important;
  display:flex!important;
  flex-direction:column!important;
  gap:7px!important;
  overflow:visible!important;
}
html.mobile-portrait-ui .strategy-hud{
  position:relative!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:6px!important;
  display:grid!important;
  grid-template-columns:minmax(0,1fr) 112px!important;
  grid-template-rows:50px auto!important;
  gap:6px!important;
  overflow:hidden!important;
}
html.mobile-portrait-ui .strategy-brand{height:50px!important}
html.mobile-portrait-ui .strategy-turn-card{height:50px!important}
html.mobile-portrait-ui .strategy-stat-row{
  grid-column:1/-1!important;
  width:100%!important;
  height:auto!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  gap:5px!important;
  overflow:visible!important;
}
html.mobile-portrait-ui .strategy-hud-stat{height:40px!important;min-height:40px!important}
html.mobile-portrait-ui .strategy-hud-stat.hud-stat-extra,
html.mobile-portrait-ui .strategy-hud-tools{display:none!important}
html.mobile-portrait-ui .strategy-main-grid{
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  display:block!important;
  overflow:visible!important;
}
html.mobile-portrait-ui .strategy-map-panel{
  position:relative!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:6px!important;
  display:flex!important;
  flex-direction:column!important;
  gap:7px!important;
  overflow:visible!important;
}
html.mobile-portrait-ui .strategy-command-toggle,
html.mobile-portrait-ui .strategy-command-backdrop,
html.mobile-portrait-ui .strategy-command-rail{display:none!important}
html.mobile-portrait-ui .strategy-map-viewport{
  position:relative!important;
  inset:auto!important;
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:7px!important;
  overflow:visible!important;
  aspect-ratio:auto!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
}
html.mobile-portrait-ui .strategy-map-viewport::after{display:none!important}
html.mobile-portrait-ui .strategy-map-viewport>.map-stage{
  position:relative!important;
  inset:auto!important;
  order:1!important;
  width:100%!important;
  height:220px!important;
  min-height:220px!important;
  max-height:220px!important;
  flex:0 0 220px!important;
  overflow:hidden!important;
  border:1px solid rgba(217,183,101,.42)!important;
  border-radius:8px!important;
  background-size:100% 100%!important;
  background-position:center!important;
}
html.mobile-portrait-ui .strategy-map-toolbar{
  position:absolute!important;
  z-index:43!important;
  left:7px!important;
  right:7px!important;
  top:7px!important;
  width:auto!important;
  max-width:none!important;
  height:37px!important;
  padding:4px!important;
  grid-template-columns:minmax(0,1fr) 34px 44px 34px!important;
  border-radius:7px!important;
}
html.mobile-portrait-ui .strategy-announcement{
  position:relative!important;
  order:2!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  width:100%!important;
  height:33px!important;
  min-height:33px!important;
  margin:0!important;
  transform:none!important;
  border-radius:7px!important;
}
html.mobile-portrait-ui .strategy-announcement-label{width:52px!important;min-width:52px!important;font-size:7px!important}
html.mobile-portrait-ui .strategy-announcement-track>span{font-size:8px!important;line-height:31px!important;padding:0 12px!important}
html.mobile-portrait-ui .strategy-territory-card{
  position:relative!important;
  order:3!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  margin:0!important;
  padding:10px!important;
  overflow:hidden!important;
  border-radius:9px!important;
  box-shadow:none!important;
}
html.mobile-portrait-ui .strategy-territory-grid{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important}
html.mobile-portrait-ui .strategy-bottom-dock{
  position:relative!important;
  order:4!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  width:100%!important;
  max-width:none!important;
  height:auto!important;
  margin:0!important;
  padding:5px!important;
  display:grid!important;
  grid-template-columns:repeat(3,minmax(0,1fr))!important;
  gap:5px!important;
  transform:none!important;
  overflow:visible!important;
  border-radius:9px!important;
  box-shadow:none!important;
}
html.mobile-portrait-ui .strategy-bottom-dock button{width:100%!important;height:51px!important;min-height:51px!important}
html.mobile-portrait-ui .strategy-status-tray{
  position:fixed!important;
  z-index:160!important;
  left:10px!important;
  right:10px!important;
  top:max(10px,env(safe-area-inset-top,0px))!important;
  bottom:max(10px,env(safe-area-inset-bottom,0px))!important;
  width:auto!important;
  max-height:none!important;
}
html.mobile-portrait-ui .strategy-mobile-command-grid{
  position:relative!important;
  order:10!important;
  width:100%!important;
  height:auto!important;
  min-height:0!important;
  margin:0!important;
  padding:8px!important;
  display:grid!important;
  grid-template-columns:repeat(2,minmax(0,1fr))!important;
  grid-auto-rows:minmax(56px,auto)!important;
  gap:7px!important;
  overflow:visible!important;
  border-radius:10px!important;
}
html.mobile-portrait-ui .strategy-mobile-command-grid>button{min-height:56px!important}
html.mobile-portrait-ui .strategy-map-panel>.war-mode-bar,
html.mobile-portrait-ui .strategy-map-panel>.dragon-boss-bar,
html.mobile-portrait-ui .strategy-map-panel>.true-dragon-bar{
  position:relative!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  bottom:auto!important;
  width:100%!important;
  max-width:none!important;
  margin:0!important;
  transform:none!important;
}
@media (orientation:portrait) and (max-width:390px){
  html.mobile-portrait-ui .strategy-shell{padding:5px!important;gap:6px!important}
  html.mobile-portrait-ui .strategy-map-panel{padding:5px!important;gap:6px!important}
  html.mobile-portrait-ui .strategy-map-viewport>.map-stage{height:202px!important;min-height:202px!important;max-height:202px!important;flex-basis:202px!important}
  html.mobile-portrait-ui .strategy-territory-card{padding:8px!important}
  html.mobile-portrait-ui .strategy-bottom-dock{padding:4px!important;gap:4px!important}
  html.mobile-portrait-ui .strategy-bottom-dock button{height:47px!important;min-height:47px!important}
  html.mobile-portrait-ui .strategy-mobile-command-grid{padding:6px!important;gap:6px!important}
  html.mobile-portrait-ui .strategy-mobile-command-grid>button{min-height:52px!important}
}

/* v5.58 final spacing refinements for iPhone notch/safe-area and toolbar separation. */
html.mobile-landscape-ui .strategy-shell{
  padding:
    max(4px,env(safe-area-inset-top,0px))
    max(4px,env(safe-area-inset-right,0px))
    max(4px,env(safe-area-inset-bottom,0px))
    max(4px,env(safe-area-inset-left,0px))!important;
}
html.mobile-landscape-ui .strategy-map-toolbar{width:min(355px,40%)!important}
html.mobile-landscape-ui .strategy-announcement{width:min(510px,45%)!important}


/* =========================================================
   v5.59 world-map stronghold visibility
   - faction-coloured marker plates
   - larger high-contrast icons and full labels
   - always-visible durability gauges
   - stronger selected / attackable feedback
   ========================================================= */
.strategy-map-panel .map-stage{
  isolation:isolate!important;
}
.strategy-map-panel .map-stage>svg{
  opacity:.72!important;
}
.strategy-map-panel .territory-link{
  stroke:rgba(255,235,170,.72)!important;
  stroke-width:.28!important;
  stroke-dasharray:.9 .55!important;
  stroke-linecap:round!important;
  filter:drop-shadow(0 1px 2px rgba(0,0,0,.9))!important;
}
.strategy-map-panel .map-node{
  width:90px!important;
  height:90px!important;
  z-index:14!important;
  overflow:visible!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  transform:translate(-50%,-55%)!important;
  filter:none!important;
}
.strategy-map-panel .map-node:hover,
.strategy-map-panel .map-node:focus-visible,
.strategy-map-panel .map-node.selected,
.strategy-map-panel .map-node.war-target{
  z-index:40!important;
}
.strategy-map-panel .node-owner-glow{
  position:absolute!important;
  left:50%!important;
  top:7px!important;
  width:72px!important;
  height:54px!important;
  transform:translateX(-50%)!important;
  opacity:1!important;
  filter:none!important;
  border:2.5px solid color-mix(in srgb,var(--faction),white 26%)!important;
  border-radius:46% 46% 38% 38%!important;
  background:
    radial-gradient(circle at 50% 28%,color-mix(in srgb,var(--faction),white 22%) 0 12%,transparent 42%),
    linear-gradient(180deg,color-mix(in srgb,var(--faction),#15243e 58%),rgba(2,7,14,.92))!important;
  box-shadow:
    0 5px 10px rgba(0,0,0,.72),
    0 0 0 2px rgba(2,7,14,.72),
    0 0 14px color-mix(in srgb,var(--faction),transparent 32%)!important;
  pointer-events:none!important;
  z-index:1!important;
}
.strategy-map-panel .node-owner-glow::after{
  content:"";
  position:absolute;
  inset:5px;
  border:1px solid rgba(255,255,255,.22);
  border-radius:inherit;
}
.strategy-map-panel .node-icon{
  position:absolute!important;
  left:50%!important;
  top:3px!important;
  width:78px!important;
  height:61px!important;
  margin:0!important;
  object-fit:contain!important;
  transform:translateX(-50%)!important;
  filter:
    brightness(1.14)
    contrast(1.18)
    saturate(1.08)
    drop-shadow(0 5px 4px rgba(0,0,0,.86))
    drop-shadow(0 0 4px rgba(255,255,255,.34))!important;
  z-index:3!important;
  pointer-events:none!important;
}
.strategy-map-panel .node-label{
  position:absolute!important;
  left:50%!important;
  bottom:5px!important;
  min-width:78px!important;
  max-width:126px!important;
  margin:0!important;
  padding:4px 8px!important;
  overflow:visible!important;
  border:2px solid color-mix(in srgb,var(--faction),white 28%)!important;
  border-radius:999px!important;
  background:rgba(2,7,14,.95)!important;
  box-shadow:
    0 3px 7px rgba(0,0,0,.9),
    0 0 8px color-mix(in srgb,var(--faction),transparent 45%)!important;
  color:#fff!important;
  font-size:11px!important;
  font-weight:900!important;
  line-height:1.08!important;
  letter-spacing:.02em!important;
  text-align:center!important;
  text-shadow:0 1px 2px #000,0 0 3px #000!important;
  white-space:nowrap!important;
  text-overflow:clip!important;
  transform:translateX(-50%)!important;
  z-index:8!important;
  pointer-events:none!important;
}
.strategy-map-panel .node-durability{
  position:absolute!important;
  left:50%!important;
  bottom:-4px!important;
  display:block!important;
  width:68px!important;
  height:6px!important;
  overflow:hidden!important;
  border:1px solid rgba(255,255,255,.76)!important;
  border-radius:999px!important;
  background:rgba(1,5,12,.92)!important;
  box-shadow:0 2px 5px rgba(0,0,0,.85)!important;
  transform:translateX(-50%)!important;
  z-index:9!important;
  pointer-events:none!important;
}
.strategy-map-panel .node-durability>i{
  display:block!important;
  height:100%!important;
  min-width:2px!important;
  border-radius:inherit!important;
  background:linear-gradient(90deg,#38d989,#b9e96b)!important;
  box-shadow:0 0 5px rgba(93,231,151,.65)!important;
}
.strategy-map-panel .map-node.durability-worn .node-durability>i{
  background:linear-gradient(90deg,#dfb43e,#f2d76f)!important;
}
.strategy-map-panel .map-node.durability-damaged .node-durability>i{
  background:linear-gradient(90deg,#ef7d32,#f2b34b)!important;
}
.strategy-map-panel .map-node.durability-critical .node-durability>i,
.strategy-map-panel .map-node.durability-broken .node-durability>i{
  background:linear-gradient(90deg,#e9354f,#ff705c)!important;
  box-shadow:0 0 6px rgba(255,70,88,.8)!important;
}
.strategy-map-panel .node-flag-pole{
  left:61%!important;
  top:-8px!important;
  width:3px!important;
  height:29px!important;
  z-index:10!important;
}
.strategy-map-panel .node-flag{
  left:62%!important;
  top:-10px!important;
  width:29px!important;
  height:16px!important;
  border:1.5px solid rgba(255,255,255,.88)!important;
  box-shadow:0 3px 7px rgba(0,0,0,.82),0 0 9px var(--faction)!important;
  z-index:11!important;
}
.strategy-map-panel .map-node:hover .node-icon,
.strategy-map-panel .map-node:focus-visible .node-icon{
  transform:translateX(-50%) translateY(-2px) scale(1.08)!important;
}
.strategy-map-panel .map-node.selected .node-owner-glow{
  border-color:#ffe58f!important;
  box-shadow:
    0 6px 12px rgba(0,0,0,.8),
    0 0 0 4px rgba(255,226,128,.28),
    0 0 22px #ffe186,
    0 0 18px var(--faction)!important;
  animation:strongholdSelectedPulse 1.45s ease-in-out infinite!important;
}
.strategy-map-panel .map-node.selected .node-icon{
  transform:translateX(-50%) scale(1.12)!important;
}
.strategy-map-panel .map-node.selected .node-label{
  border-color:#ffe58f!important;
  color:#fff3b8!important;
  box-shadow:0 3px 8px rgba(0,0,0,.92),0 0 14px rgba(255,226,128,.88)!important;
}
.strategy-map-panel .map-node.war-target .node-owner-glow{
  border-color:#ff6070!important;
  box-shadow:0 0 0 4px rgba(255,64,82,.3),0 0 22px rgba(255,53,72,.92)!important;
  animation:strongholdTargetPulse .8s ease-in-out infinite!important;
}
.strategy-map-panel .map-node.war-target .node-label{
  border-color:#ff6878!important;
  color:#fff!important;
  background:rgba(73,7,18,.96)!important;
}
.strategy-map-panel .map-node.war-disabled{
  opacity:.4!important;
  filter:grayscale(.35)!important;
}
@keyframes strongholdSelectedPulse{
  0%,100%{transform:translateX(-50%) scale(1)}
  50%{transform:translateX(-50%) scale(1.08)}
}
@keyframes strongholdTargetPulse{
  0%,100%{transform:translateX(-50%) scale(1)}
  50%{transform:translateX(-50%) scale(1.12)}
}

/* iPhone / compact landscape: substantially larger than v5.58 markers. */
html.mobile-landscape-ui .strategy-map-panel .map-node{
  width:60px!important;
  height:60px!important;
  transform:translate(-50%,-55%)!important;
}
html.mobile-landscape-ui .strategy-map-panel .node-owner-glow{
  top:5px!important;
  width:49px!important;
  height:36px!important;
  border-width:2px!important;
  box-shadow:0 3px 7px rgba(0,0,0,.78),0 0 9px color-mix(in srgb,var(--faction),transparent 30%)!important;
}
html.mobile-landscape-ui .strategy-map-panel .node-icon{
  top:3px!important;
  width:52px!important;
  height:39px!important;
}
html.mobile-landscape-ui .strategy-map-panel .node-label{
  bottom:4px!important;
  min-width:55px!important;
  max-width:86px!important;
  padding:2px 5px!important;
  border-width:1.5px!important;
  font-size:8.2px!important;
  line-height:1.05!important;
}
html.mobile-landscape-ui .strategy-map-panel .node-durability{
  bottom:-3px!important;
  width:48px!important;
  height:4px!important;
  border-width:1px!important;
}
html.mobile-landscape-ui .strategy-map-panel .node-flag-pole{
  top:-5px!important;
  height:20px!important;
  width:2px!important;
}
html.mobile-landscape-ui .strategy-map-panel .node-flag{
  top:-7px!important;
  width:21px!important;
  height:11px!important;
}
html.mobile-landscape-ui .strategy-map-panel .attack-badge,
html.mobile-landscape-ui .strategy-map-panel .source-badge{
  top:-19px!important;
  font-size:6px!important;
  padding:1px 3px!important;
}

/* Portrait map: clearer labels without covering neighbouring sites. */
html.mobile-portrait-ui .strategy-map-panel .map-node{
  width:46px!important;
  height:46px!important;
  transform:translate(-50%,-55%)!important;
}
html.mobile-portrait-ui .strategy-map-panel .node-owner-glow{
  top:4px!important;
  width:38px!important;
  height:28px!important;
  border-width:1.5px!important;
}
html.mobile-portrait-ui .strategy-map-panel .node-icon{
  top:2px!important;
  width:40px!important;
  height:30px!important;
}
html.mobile-portrait-ui .strategy-map-panel .node-label{
  bottom:3px!important;
  min-width:43px!important;
  max-width:68px!important;
  padding:1.5px 3px!important;
  border-width:1px!important;
  font-size:6.5px!important;
}
html.mobile-portrait-ui .strategy-map-panel .node-durability{
  bottom:-2px!important;
  width:36px!important;
  height:3px!important;
}
html.mobile-portrait-ui .strategy-map-panel .node-flag-pole{
  top:-4px!important;
  height:16px!important;
  width:2px!important;
}
html.mobile-portrait-ui .strategy-map-panel .node-flag{
  top:-5px!important;
  width:17px!important;
  height:9px!important;
}

@media (prefers-reduced-motion:reduce){
  .strategy-map-panel .map-node.selected .node-owner-glow,
  .strategy-map-panel .map-node.war-target .node-owner-glow{
    animation:none!important;
  }
}


/* =========================================================
   v5.60 compact-landscape full-map navigation
   - overview scale includes southern strongholds
   - drag works even at overview / 1x scale
   - dedicated lower-map jump button
   ========================================================= */
.strategy-map-viewport{
  background:
    linear-gradient(180deg,rgba(2,8,17,.38),rgba(2,8,17,.62)),
    url("assets/ui/world_map_full.webp") center/cover no-repeat!important;
}
.strategy-map-viewport>.map-stage{
  cursor:grab!important;
}
.strategy-map-viewport>.map-stage.map-is-zoomed{
  cursor:grabbing!important;
}
.strategy-map-toolbar{
  grid-template-columns:minmax(130px,1fr) 34px 43px 34px 46px!important;
}
.strategy-map-toolbar button:last-child{
  color:#fff1bd!important;
  border-color:rgba(244,211,112,.58)!important;
  background:linear-gradient(180deg,#6f5622,#3d2d0c)!important;
}
html.mobile-landscape-ui .strategy-map-toolbar{
  grid-template-columns:minmax(88px,1fr) 25px 31px 25px 34px!important;
  width:min(390px,48%)!important;
  max-width:48%!important;
}
html.mobile-landscape-ui .strategy-map-toolbar button:last-child{
  font-size:6px!important;
}
html.mobile-landscape-ui .strategy-map-viewport{
  overscroll-behavior:none!important;
  touch-action:none!important;
}
html.mobile-landscape-ui .strategy-map-viewport>.map-stage{
  transform-origin:0 0!important;
  will-change:transform!important;
}


/* =========================================================
   v5.61 map click / inactive command-layer guard
   ========================================================= */
.strategy-command-rail[hidden],
.strategy-mobile-command-grid[hidden],
.strategy-command-backdrop[hidden]{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
.strategy-command-rail[inert],
.strategy-mobile-command-grid[inert],
.strategy-command-backdrop[inert]{
  pointer-events:none!important;
  user-select:none!important;
}
html.mobile-landscape-ui .strategy-mobile-command-grid{
  display:none!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
html.mobile-landscape-ui .strategy-command-rail:not(.open){
  opacity:0!important;
  visibility:hidden!important;
  pointer-events:none!important;
}
html.mobile-portrait-ui .strategy-command-rail,
html.mobile-portrait-ui .strategy-command-backdrop,
html.mobile-portrait-ui .strategy-command-toggle{
  pointer-events:none!important;
}
.strategy-map-viewport,
.strategy-map-viewport>.map-stage{
  isolation:isolate!important;
}


/* =========================================================
   v5.62 compact battle status + tap-only territory information
   ========================================================= */
.strategy-announcement.strategy-announcement-compact{
  top:10px!important;
  right:150px!important;
  bottom:auto!important;
  left:auto!important;
  width:clamp(270px,33vw,470px)!important;
  height:34px!important;
  min-height:34px!important;
  grid-template-columns:49px minmax(0,1fr) 31px!important;
  transform:none!important;
  border-radius:9px!important;
}
.strategy-announcement-compact .strategy-announcement-label{
  width:auto!important;
  min-width:0!important;
  padding:0 8px!important;
  font-size:8px!important;
  letter-spacing:.08em!important;
}
.strategy-announcement-compact .strategy-announcement-window{
  min-width:0!important;
  padding:0 8px!important;
  display:flex!important;
  align-items:center!important;
  overflow:hidden!important;
  mask-image:none!important;
  -webkit-mask-image:none!important;
}
.strategy-announcement-single{
  display:block;
  min-width:0;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#dce6f7;
  font-size:9px;
  font-weight:750;
  line-height:32px;
}
.strategy-announcement-more{
  width:31px!important;
  min-width:31px!important;
  height:100%!important;
  min-height:0!important;
  margin:0!important;
  padding:0!important;
  border:0!important;
  border-left:1px solid rgba(217,183,101,.28)!important;
  border-radius:0!important;
  background:rgba(217,183,101,.08)!important;
  color:#f0d68d!important;
  box-shadow:none!important;
  font-size:14px!important;
  cursor:pointer!important;
}
.strategy-announcement-more:hover{
  background:rgba(217,183,101,.18)!important;
}

.strategy-territory-card{
  padding-top:13px!important;
  animation:strategyTerritoryCardIn .18s ease-out both;
}
.strategy-territory-head{
  padding-right:29px;
}
.strategy-territory-close{
  position:absolute!important;
  z-index:3!important;
  top:7px!important;
  right:7px!important;
  width:26px!important;
  min-width:26px!important;
  height:26px!important;
  min-height:26px!important;
  padding:0!important;
  display:grid!important;
  place-items:center!important;
  border:1px solid rgba(255,255,255,.18)!important;
  border-radius:50%!important;
  background:rgba(3,9,18,.88)!important;
  color:#f7e8bd!important;
  box-shadow:none!important;
  font-size:17px!important;
  font-weight:500!important;
  line-height:1!important;
}
.strategy-territory-close:hover{
  background:#6e2030!important;
  border-color:rgba(255,120,135,.62)!important;
}
@keyframes strategyTerritoryCardIn{
  from{opacity:0;transform:translateY(7px) scale(.985)}
  to{opacity:1;transform:translateY(0) scale(1)}
}

/* When the territory card is closed, reclaim the lower map space. */
html.mobile-landscape-ui .strategy-map-viewport:not(.territory-info-open) .strategy-bottom-dock{
  left:8px!important;
  right:auto!important;
  max-width:calc(100% - 16px)!important;
}
html.mobile-portrait-ui .strategy-map-viewport:not(.territory-info-open){
  height:330px!important;
  min-height:330px!important;
}
html.mobile-portrait-ui .strategy-map-viewport:not(.territory-info-open) .strategy-bottom-dock{
  top:216px!important;
}
html.mobile-portrait-ui .strategy-territory-close{
  top:6px!important;
  right:6px!important;
  width:28px!important;
  min-width:28px!important;
  height:28px!important;
  min-height:28px!important;
}
html.mobile-portrait-ui .strategy-territory-head{
  padding-right:31px!important;
}

/* Compact touch landscape. */
html.mobile-landscape-ui .strategy-announcement.strategy-announcement-compact{
  top:7px!important;
  right:98px!important;
  width:clamp(190px,35%,340px)!important;
  height:28px!important;
  min-height:28px!important;
  grid-template-columns:39px minmax(0,1fr) 26px!important;
}
html.mobile-landscape-ui .strategy-announcement-compact .strategy-announcement-label{
  padding:0 5px!important;
  font-size:6px!important;
}
html.mobile-landscape-ui .strategy-announcement-single{
  font-size:6.5px!important;
  line-height:26px!important;
}
html.mobile-landscape-ui .strategy-announcement-more{
  width:26px!important;
  min-width:26px!important;
  font-size:11px!important;
}
html.mobile-landscape-ui .strategy-territory-close{
  top:4px!important;
  right:4px!important;
  width:20px!important;
  min-width:20px!important;
  height:20px!important;
  min-height:20px!important;
  font-size:13px!important;
}
html.mobile-landscape-ui .strategy-territory-head{
  padding-right:22px!important;
}

/* Portrait remains a thin one-line status bar beneath the map toolbar. */
html.mobile-portrait-ui .strategy-announcement.strategy-announcement-compact{
  left:6px!important;
  right:6px!important;
  top:181px!important;
  width:auto!important;
  height:28px!important;
  min-height:28px!important;
  grid-template-columns:43px minmax(0,1fr) 29px!important;
}
html.mobile-portrait-ui .strategy-announcement-compact .strategy-announcement-label{
  padding:0 5px!important;
  font-size:7px!important;
}
html.mobile-portrait-ui .strategy-announcement-single{
  font-size:7.5px!important;
  line-height:26px!important;
}
html.mobile-portrait-ui .strategy-announcement-more{
  width:29px!important;
  min-width:29px!important;
  font-size:12px!important;
}

@media (orientation:portrait) and (max-width:390px){
  html.mobile-portrait-ui .strategy-map-viewport:not(.territory-info-open){
    height:320px!important;
    min-height:320px!important;
  }
  html.mobile-portrait-ui .strategy-map-viewport:not(.territory-info-open) .strategy-bottom-dock{
    top:206px!important;
  }
  html.mobile-portrait-ui .strategy-announcement.strategy-announcement-compact{
    top:171px!important;
  }
}

@media (min-width:981px) and (max-width:1220px){
  .strategy-announcement.strategy-announcement-compact{
    right:126px!important;
    width:clamp(250px,31vw,380px)!important;
  }
}


/* =========================================================
   v5.63 language switch
   ========================================================= */
.game-language-switch{
  min-width:46px!important;
  height:30px!important;
  padding:0 10px!important;
  border:1px solid rgba(218,185,103,.55)!important;
  border-radius:8px!important;
  background:linear-gradient(180deg,rgba(25,39,68,.96),rgba(9,18,35,.98))!important;
  color:#f5df9c!important;
  box-shadow:0 6px 18px rgba(0,0,0,.24),inset 0 0 12px rgba(229,193,101,.08)!important;
  font-family:inherit!important;
  font-size:10px!important;
  font-weight:900!important;
  letter-spacing:.08em!important;
  cursor:pointer!important;
}
.game-language-switch:hover{
  border-color:#f0cc71!important;
  background:linear-gradient(180deg,rgba(52,67,99,.98),rgba(14,27,49,.98))!important;
  transform:translateY(-1px);
}
.title-language-switch{
  position:fixed!important;
  z-index:120!important;
  top:max(14px,env(safe-area-inset-top))!important;
  right:max(14px,env(safe-area-inset-right))!important;
  width:auto!important;
  min-width:68px!important;
  height:34px!important;
  font-size:11px!important;
}
.strategy-hud-tools .hud-language-switch{
  min-width:42px!important;
  padding:0 7px!important;
}
html[lang="en"] .strategy-command-title b,
html[lang="en"] .strategy-command-toggle span{
  letter-spacing:.01em!important;
}
html[lang="en"] .strategy-territory-actions button,
html[lang="en"] .strategy-mobile-command-grid button span,
html[lang="en"] .strategy-command-rail button span{
  font-size:clamp(8px,.7vw,11px)!important;
}
html[lang="en"] .strategy-map-toolbar span small{
  letter-spacing:0!important;
}
html[lang="en"] .difficulty-desc,
html[lang="en"] .small-note{
  line-height:1.65!important;
}
@media(max-width:980px){
  .title-language-switch{
    top:max(8px,env(safe-area-inset-top))!important;
    right:max(8px,env(safe-area-inset-right))!important;
    min-width:58px!important;
    height:29px!important;
    padding:0 8px!important;
    font-size:9px!important;
  }
  .strategy-hud-tools .hud-language-switch{
    min-width:36px!important;
    height:26px!important;
    padding:0 5px!important;
    font-size:8px!important;
  }
}


/* v5.65 immediate boot paint / Lighthouse FCP fallback */
.boot-fallback{
  position:fixed;
  inset:0;
  z-index:999999;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:
    radial-gradient(circle at 50% 42%,rgba(122,88,29,.18),transparent 24%),
    #030812;
  color:#ead391;
  font-family:Georgia,"Times New Roman",serif;
  opacity:1;
  transition:opacity .28s ease;
}
.boot-fallback.is-hidden{
  opacity:0;
  pointer-events:none;
}
.boot-fallback-mark{
  width:64px;
  height:64px;
  display:grid;
  place-items:center;
  border:1px solid rgba(232,202,119,.55);
  border-radius:50%;
  box-shadow:0 0 35px rgba(210,170,69,.14);
  font-size:28px;
}
.boot-fallback strong{
  font-size:23px;
  letter-spacing:.08em;
}
.boot-fallback span{
  color:#9ca8bc;
  font-family:system-ui,sans-serif;
  font-size:12px;
  letter-spacing:.15em;
}