:root {
  --bg: #15171c;
  --panel: #1f2229;
  --text: #d8dbe2;
  --muted: #8a90a0;
  --accent: #ffcc00;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
}

main {
  min-height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 16px;
  flex-wrap: wrap;
}

.column {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

#stage {
  position: relative;
  line-height: 0;
}

#screen {
  /* Integer-ish scaling of the original 240x320 phone screen. */
  height: min(calc(100vh - 72px), 960px);
  aspect-ratio: 240 / 320;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
  background: #000;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
}

.help {
  background: var(--panel);
  padding: 16px 20px;
  border-radius: 8px;
  max-width: 320px;
}

.help h1 {
  margin: 0 0 12px;
  font-size: 15px;
  color: var(--accent);
}

.help dl {
  margin: 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 14px;
}

.help dt {
  font-family: ui-monospace, monospace;
  color: var(--accent);
  white-space: nowrap;
}

.help dd { margin: 0; color: var(--muted); }

#screen.landscape {
  height: auto;
  aspect-ratio: 320 / 240;
  width: min(calc(100vw - 32px), calc((100vh - 72px) * 4 / 3), 1280px);
}

@media (max-width: 700px) {
  #screen { height: auto; width: 100%; max-width: 480px; }
  .help { display: none; }
}

.help p { margin: 0; color: var(--muted); }
.help h1 + dl, .help dl + h1 { margin-top: 0; }
.help dl + h1 { margin-top: 16px; }

/* ---------------------------------------------------------------- online */
#lobby {
  position: absolute;
  inset: 0;
  overflow: auto;
  padding: 14px;
  line-height: 1.35;
  font-size: 13px;
  background: rgba(20, 20, 24, 0.94);
  border: 2px solid #f00;
  color: var(--text);
}

#lobby h2 {
  margin: 0 0 10px;
  font-size: 16px;
  color: var(--accent);
}

#lobby .row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 8px;
}

#lobby input, #lobby select {
  flex: 1;
  min-width: 0;
  max-width: 60%;
  padding: 4px 6px;
  border: 1px solid #555;
  border-radius: 4px;
  background: #2a2d35;
  color: var(--text);
  font: inherit;
}

#lobby button {
  padding: 5px 12px;
  border: 1px solid #a00;
  border-radius: 4px;
  background: #600;
  color: #fff;
  font: inherit;
  cursor: pointer;
}

#lobby button:hover:not(:disabled) { background: #800; }
#lobby button:disabled { opacity: 0.4; cursor: default; }

#lobby .buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

#lobby .rooms {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}

#lobby .rooms th {
  text-align: left;
  color: var(--muted);
  font-weight: normal;
  border-bottom: 1px solid #444;
  padding: 4px 3px;
}

#lobby .rooms td {
  padding: 6px 3px;
  border-bottom: 1px solid #333;
  vertical-align: top;
}

#lobby .rooms td small {
  display: block;
  color: var(--muted);
}

#lobby .rooms .actions { white-space: nowrap; text-align: right; }
#lobby .rooms .actions button { padding: 3px 8px; margin-left: 3px; }
#lobby .empty, #lobby .hint, #lobby .watchers { color: var(--muted); }
#lobby .notice { color: #ff8a8a; margin: 6px 0; }

#lobby .prompt {
  margin-top: 12px;
  padding: 10px;
  border: 1px solid #a00;
  border-radius: 6px;
  background: #222;
}

#lobby .prompt p { margin: 0 0 8px; }
#lobby .prompt input { max-width: 100%; width: 100%; }

#lobby .seats {
  list-style: none;
  margin: 10px 0;
  padding: 0;
}

#lobby .seats li {
  padding: 8px 10px;
  margin-bottom: 6px;
  border-radius: 4px;
  background: #2a2d35;
}

#lobby .seats li span {
  display: inline-block;
  min-width: 90px;
  font-weight: 600;
}

.team0 { color: #66ccff; }
.team1 { color: #ff6666; }

#netbar {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  justify-content: center;
  font-size: 13px;
  color: var(--muted);
}

#netbar[hidden] { display: none; }
#netbar b { color: var(--accent); }
#netbar .sep { opacity: 0.5; }
#netbar .warn { color: #ff8a8a; font-weight: 600; }

#netbar button {
  margin-left: 8px;
  padding: 3px 10px;
  border: 1px solid #a00;
  border-radius: 4px;
  background: #600;
  color: #fff;
  cursor: pointer;
}

/* ---------------------------------------------------------------- PWA */
#update, #offline {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 6px;
  background: #3a2a00;
  color: var(--accent);
  font-size: 13px;
}

#update[hidden], #offline[hidden], #offline button[hidden] { display: none; }

#update button, #offline button {
  padding: 4px 12px;
  border: 1px solid var(--accent);
  border-radius: 4px;
  background: transparent;
  color: var(--accent);
  font: inherit;
  cursor: pointer;
}

#update button[data-act=update] { background: var(--accent); color: #000; }

#offline {
  position: fixed;
  z-index: 10;
  top: calc(env(safe-area-inset-top) + 8px);
  left: calc(env(safe-area-inset-left) + 8px);
  right: calc(env(safe-area-inset-right) + 8px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}
#offline[data-state=ready] { background: #173b27; color: #bdeacb; }
#offline[data-state=error] { background: #4a2222; color: #ffc4c4; }

/* ---------------------------------------------------------------- touch */
.pad { display: none; }

body.touch {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #000;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

body.touch main {
  display: grid;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  align-items: stretch;
  gap: 0;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
}

body.touch .help { display: none; }

/* On phones the update offer floats over the top of the game. */
body.touch #update {
  position: fixed;
  z-index: 10;
  top: calc(env(safe-area-inset-top) + 8px);
  left: 8px;
  right: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.6);
}
body.touch .column {
  grid-area: screen;
  position: relative;
  z-index: 0;
  min-width: 0;
  min-height: 0;
  gap: 4px;
  justify-content: center;
}
body.touch #stage, body.touch #netbar { flex: none; }
body.touch #screen { display: block; max-width: none; }
body.touch #pad-left { grid-area: left; }
body.touch #pad-right { grid-area: right; }

body.touch .pad {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
  min-width: 0;
  min-height: 0;
  gap: 4px;
  touch-action: none;
}

body.touch .pad > *, body.touch .pad button { flex-shrink: 0; }

.pad button, #dpad {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.pad button {
  border: 2px solid #555;
  background: #23262d;
  color: #ddd;
  font: 600 15px/1 system-ui, sans-serif;
  border-radius: 12px;
}

.pad button.pressed, #dpad span.pressed { background: #a00; border-color: #f33; color: #fff; }

.pad .soft { width: 72px; height: 40px; }
.pad .small { display: flex; gap: 12px; }
.pad .small button { width: 56px; height: 40px; }

#fire {
  width: 104px;
  height: 104px;
  border-radius: 50%;
  border-color: #a00;
  background: #600;
  color: #fff;
  font-size: 18px;
}

#dpad {
  --dpad-size: 150px;
  position: relative;
  width: var(--dpad-size);
  height: var(--dpad-size);
  border-radius: 50%;
  background: #1a1c21;
  border: 2px solid #444;
}

#dpad span {
  position: absolute;
  width: calc((var(--dpad-size) - 4px) / 3);
  height: calc((var(--dpad-size) - 4px) / 3);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #2c3038;
  color: #ccc;
  font-size: 20px;
  pointer-events: none;
}

#dpad .up { left: calc((var(--dpad-size) - 4px) / 3); top: 2px; }
#dpad .down { left: calc((var(--dpad-size) - 4px) / 3); bottom: 2px; }
#dpad .left { left: 2px; top: calc((var(--dpad-size) - 4px) / 3); }
#dpad .right { right: 2px; top: calc((var(--dpad-size) - 4px) / 3); }

/* Phone upright: game on top, controls underneath. */
@media (orientation: portrait) {
  body.touch main { grid-template: "screen screen" minmax(0, 1fr) "left right" 250px / minmax(0, 1fr) minmax(0, 1fr); }
}

/* Phone sideways: controls either side of the game. */
@media (orientation: landscape) {
  body.touch main { grid-template: "left screen right" minmax(0, 1fr) / 150px minmax(0, 1fr) 150px; }
  body.touch #dpad {
    --dpad-size: clamp(64px, calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 88px), 130px);
  }
  body.touch #fire { width: 88px; height: 88px; }
}

/* Modern presentation ---------------------------------------------------- */
:root { --bg:#0c1420; --panel:#142333; --text:#f0f2ed; --muted:#9eafb9; --accent:#f5c968; --line:#ffffff17; color-scheme:dark; }
html, body { background:radial-gradient(ellipse at 60% 20%,#203344 0, #101b28 45%,#0b131d 100%); }
button { font:inherit; cursor:pointer; }
button:focus-visible, a:focus-visible { outline:3px solid #f5c968; outline-offset:3px; }
button { -webkit-tap-highlight-color:transparent; }
[hidden] { display:none !important; }
main { display:flex; flex-direction:column; flex-wrap:nowrap; gap:18px; padding:20px 32px 16px; min-height:100dvh; }
.app-header { width:min(1120px,100%); display:flex; align-items:center; gap:24px; min-height:40px; }
.wordmark { display:flex; align-items:center; gap:7px; font-size:17px; letter-spacing:2px; color:#f0f2ed; text-decoration:none; font-weight:900; }
.wordmark b { color:var(--accent); }
.brand-icon { display:grid; place-items:center; width:32px; height:32px; border-radius:9px; background:#f5c968; color:#142333; font-size:25px; }
.edition { color:var(--muted); font-size:10px; letter-spacing:2.5px; border-left:1px solid #ffffff24; padding-left:24px; }
.app-header nav { display:flex; gap:7px; margin-left:auto; }
.app-header button { border:1px solid var(--line); background:#ffffff05; color:#c7d2d8; border-radius:8px; height:34px; padding:0 12px; font-size:11px; }
.app-header button:hover { background:#ffffff12; color:white; }
.app-header #quality-toggle { color:var(--accent); font-weight:700; }
#fullscreen-toggle { font-size:21px; }
.column { min-width:0; gap:8px; }
#stage { isolation:isolate; container-type:inline-size; width:fit-content; overflow:hidden; border:1px solid #728c9c44; border-radius:16px; box-shadow:0 30px 80px #0008, 0 0 0 5px #ffffff03; background:#142333; }
#screen { display:block; image-rendering:auto; height:min(calc(100dvh - 170px),960px); width:auto; max-width:calc(100vw - 64px); box-shadow:none; }
#screen.landscape { width:min(calc(100vw - 64px),calc((100dvh - 170px)*4/3),1120px); height:auto; }
.help { display:none; }
.app-footer { width:min(1120px,100%); display:flex; justify-content:space-between; gap:12px; color:#798c99; font-size:10px; letter-spacing:1.4px; }
.app-footer i { font-style:normal; padding:0 10px; color:#536878; }
#game-ui { position:absolute; z-index:4; inset:0; line-height:1.45; font-size:clamp(11px,1.7cqw,17px); color:var(--text); overflow:hidden; }
.menu-overlay { background:radial-gradient(ellipse at 80% 20%,#2a4857 0,transparent 62%),linear-gradient(125deg,#101d2c,#172e3b); }
.menu-overlay::before { content:''; position:absolute; inset:0; pointer-events:none; opacity:.3; background-image:radial-gradient(#d2e1df38 .6px,transparent .6px); background-size:18px 18px; mask-image:linear-gradient(0deg,transparent,#000); }
.menu-content { position:relative; z-index:1; height:100%; padding:clamp(14px,5cqw,50px); display:flex; flex-direction:column; }
.ui-heading { position:relative; flex:none; margin-bottom:clamp(10px,2.7cqw,28px); }
.eyebrow { display:block; color:var(--accent); font-size:clamp(8px,1.2cqw,12px); font-weight:750; letter-spacing:2.7px; margin-bottom:12px; }
.ui-heading h1 { font-size:clamp(22px,4.7cqw,47px); line-height:1.04; letter-spacing:-1.2px; margin:0; font-weight:850; max-width:20ch; text-wrap:balance; }
.ui-heading p { color:#b3c4ce; font-size:clamp(11px,1.65cqw,17px); line-height:1.6; max-width:36ch; margin:16px 0 0; }
.home-menu .menu-content { width:56%; padding-right:0; }
.home-menu h1 { font-size:clamp(30px,6.9cqw,72px); max-width:10ch; letter-spacing:-2px; }
.home-menu .ui-heading { margin-bottom:0; }
.feature-tags { display:flex; gap:16px; margin:clamp(12px,2.6cqw,27px) 0; color:#acbdc7; font-size:clamp(7px,1cqw,10px); letter-spacing:1.1px; }
.feature-tags span::before { content:'•'; margin-right:6px; color:var(--accent); }
.menu-list { overflow-y:auto; min-height:0; display:flex; flex-direction:column; gap:7px; scrollbar-width:thin; scrollbar-color:#63747a44 transparent; }
.menu-choice { flex-shrink:0; display:flex; flex-wrap:wrap; align-items:center; gap:14px; position:relative; width:100%; padding:clamp(10px,1.9cqw,19px); min-height:44px; text-align:left; border:1px solid #c6dde220; background:#07131e55; border-radius:10px; color:#d6e1e5; transition:background .15s,border-color .15s,transform .15s; font-size:clamp(12px,1.85cqw,19px); font-weight:650; }
.menu-choice:hover { border-color:#d1e2e966; background:#ffffff0d; }
.menu-choice.selected { border-color:#f5c96899; background:linear-gradient(100deg,#f5c96820,#f5c96808); color:#ffdfa0; }
.home-menu .menu-choice:first-child { background:var(--accent); border-color:var(--accent); color:#1b2733; }
.choice-index { opacity:.5; font-size:.68em; font-weight:500; }
.choice-arrow { margin-left:auto; font-size:1.1em; opacity:.6; }
.choice-tip { flex-basis:100%; font-size:clamp(9px,1.35cqw,13px); font-weight:400; color:#9fb0bb; padding-left:29px; line-height:1.5; }
.menu-footer { display:flex; align-items:center; gap:20px; justify-content:space-between; padding-top:clamp(10px,2.7cqw,25px); margin-top:auto; }
.ui-back { background:none; border:0; color:#b9cad3; padding:8px 0; font-size:inherit; }
.ui-back:hover { color:var(--accent); }
.keyboard-hint { margin-left:auto; color:#8095a3; font-size:clamp(8px,1cqw,11px); letter-spacing:1.5px; }
.hero-art { position:absolute; z-index:0; inset:0 0 0 41%; background:url('../assets/images/siege.svg') center/contain no-repeat; pointer-events:none; }
.art-caption { position:absolute; bottom:7%; right:8%; font-size:clamp(7px,.9cqw,10px); letter-spacing:2px; color:#849fac; writing-mode:vertical-rl; }
.level-menu .menu-content { padding:clamp(14px,3.5cqw,35px); }
.level-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; overflow:auto; min-height:0; padding:3px; scrollbar-width:thin; }
.level-grid .menu-choice { display:block; padding:0; overflow:hidden; min-height:100px; }
.level-grid canvas { display:block; width:100%; height:auto; opacity:.85; }
.level-info { display:flex; align-items:center; gap:10px; padding:10px; }
.level-info small { font:500 .7em ui-monospace,monospace; opacity:.6; }
.level-info strong { font-size:clamp(10px,1.5cqw,15px); }
.equipment-overlay, .dialog-overlay { background:#091522c9; backdrop-filter:blur(8px); display:flex; align-items:center; justify-content:center; padding:clamp(10px,3cqw,30px); }
.equipment-content { width:100%; max-height:100%; overflow:auto; padding:clamp(14px,2.7cqw,28px); background:linear-gradient(145deg,#1b3042,#112232); border:1px solid #a9c4ce33; border-radius:14px; box-shadow:0 12px 60px #0005; scrollbar-width:thin; }
.equipment-content .ui-heading { margin-bottom:12px; }
.equipment-content .eyebrow { margin-bottom:5px; }
.equipment-content h1 { font-size:clamp(20px,3.5cqw,34px); }
.close-panel { position:absolute; right:0; top:0; width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:#ffffff06; color:#aebfc9; font-size:24px; }
.equipment-tabs { display:flex; gap:6px; margin-bottom:12px; }
.equipment-tabs button { flex:1; background:#ffffff05; color:#a4b6c1; border:1px solid var(--line); padding:8px; border-radius:7px; font-size:inherit; }
.equipment-tabs button.active { background:#f5c96819; color:#f5c968; border-color:#f5c96866; }
.equipment-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.equipment-card { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; min-width:0; min-height:clamp(64px,10cqw,100px); padding:10px 4px; background:#07162166; border:1px solid #9cbdcd26; border-radius:8px; color:#e7edf0; }
.equipment-card img { width:30px; height:30px; object-fit:contain; image-rendering:pixelated; }
.equipment-card strong { max-width:100%; text-align:center; font-size:clamp(9px,1.35cqw,14px); line-height:1.2; font-weight:550; overflow-wrap:anywhere; }
.equipment-card small { position:absolute; top:5px; right:7px; font-size:clamp(8px,1.2cqw,12px); color:#f5c968; }
.equipment-card.selected, .equipment-card:hover { border-color:#f5c968b0; background:#f5c96812; }
.equipment-card.locked { color:#859ba9; background:#0a182349; }
.equipment-card.locked img { opacity:.4; filter:grayscale(.6); }
.equipment-card.locked::after { content:'−'; position:absolute; left:7px; top:3px; color:#8fa3ae; font-size:14px; }
.equipment-detail { color:#c4d1d8; font-size:clamp(10px,1.5cqw,14px); line-height:1.5; min-height:1.5em; margin:14px 0 0; }
#match-hud { position:absolute; z-index:2; inset:0 0 auto; padding:clamp(7px,2cqw,20px); display:grid; grid-template-columns:1fr 1.15fr 1fr; gap:10px; background:linear-gradient(#07111de8,#07111d80,transparent); line-height:1.5; pointer-events:none; }
.team-status { min-width:0; padding:8px 10px; border:1px solid #8ec5df25; border-radius:9px; background:#122739a6; color:#8bd3f8; }
.team-status.team-1 { color:#ffa48e; grid-column:3; grid-row:1; }
.team-status.active { border-color:currentColor; box-shadow:0 0 16px #74caf41a; }
.team-title { display:flex; justify-content:space-between; gap:6px; font-size:clamp(8px,1.3cqw,13px); }
.team-title strong { white-space:nowrap; font-variant-numeric:tabular-nums; }
.health-track { height:4px; margin:7px 0 3px; border-radius:9px; background:#ffffff14; overflow:hidden; }
.health-track i { display:block; height:100%; background:currentColor; transition:width .4s; border-radius:inherit; }
.team-units { display:block; font-size:8px; letter-spacing:3px; }
.battle-info { grid-column:2; grid-row:1; text-align:center; display:flex; flex-direction:column; justify-content:center; }
.battle-level { text-transform:uppercase; letter-spacing:1.7px; color:#c6d4dc; font-size:clamp(7px,1cqw,10px); }
.battle-phase { color:#fff2d0; font-size:clamp(10px,1.65cqw,17px); margin:3px 0; font-weight:650; }
.battle-wind { color:#9fb5c4; font-size:clamp(8px,1.15cqw,12px); }
#match-actions { position:absolute; z-index:3; bottom:clamp(20px,6.25cqw,60px); left:clamp(8px,2cqw,20px); right:clamp(8px,2cqw,20px); display:flex; align-items:end; gap:8px; line-height:1.5; pointer-events:none; }
.context-bar { flex:1; min-width:0; color:#d3e0e8; text-shadow:0 1px 4px #000; }
.context-hint { display:inline-block; background:#0d1d2bc9; border:1px solid #ffffff12; padding:6px 9px; border-radius:7px; font-size:clamp(8px,1.25cqw,13px); }
.charge-display { width:min(250px,100%); display:flex; flex-wrap:wrap; justify-content:space-between; gap:4px; font-size:clamp(9px,1.3cqw,13px); padding:8px 10px; margin-top:6px; border-radius:7px; background:#0d1d2bd9; }
.charge-track { flex-basis:100%; height:5px; background:#ffffff1a; border-radius:9px; overflow:hidden; }
.charge-track i { display:block; height:100%; background:linear-gradient(90deg,#8adaba,#f5c968,#ff7968); transition:width .05s linear; }
.action-arsenal,.action-pause { pointer-events:auto; border:1px solid #d8dfe14d; background:#132a3ee6; color:#f5dfb0; border-radius:8px; min-height:40px; padding:9px 14px; font-size:clamp(10px,1.5cqw,15px); }
.action-pause { min-width:40px; color:#b4c6d0; }
.action-arsenal:disabled { opacity:.4; cursor:default; }
.dialog-content { max-width:600px; background:#142a3eed; border:1px solid #f5c96850; border-radius:14px; padding:clamp(18px,4cqw,40px); }
.dialog-copy { font-size:clamp(12px,2cqw,19px); line-height:1.75; color:#c8d7df; }
.dialog-buttons { display:flex; justify-content:space-between; gap:12px; margin-top:24px; }
.primary-button { background:#f5c968; color:#152332; border:0; border-radius:8px; padding:12px 20px; font-size:inherit; font-weight:750; }
#offline { top:auto; bottom:calc(env(safe-area-inset-bottom) + 12px); left:50%; right:auto; transform:translateX(-50%); width:max-content; max-width:calc(100vw - 24px); border:1px solid #6ba98744; padding:10px 14px; background:#142d27f5; border-radius:10px; font-size:12px; z-index:10; }
#offline[data-state=ready] { background:#142d27f5; }
#update { border:1px solid #f5c96840; background:#2d291fee; border-radius:10px; }
#lobby { border:1px solid #a8c6d749; border-radius:14px; background:#102234f5; font-size:clamp(12px,1.7cqw,17px); padding:clamp(14px,4cqw,36px); line-height:1.5; z-index:6; }
#lobby button, #netbar button { background:#eac16b; border:1px solid #eac16b; color:#172735; border-radius:7px; padding:8px 12px; font-weight:650; }
#lobby button:hover:not(:disabled) { background:#ffe0a2; }
#lobby input,#lobby select { padding:8px; background:#071827; border:1px solid #799eaf55; border-radius:6px; }
#lobby .seats li { background:#ffffff08; }
.pad button { border:1px solid #7495aa66; background:linear-gradient(#24394a,#152736); color:#c4d3dd; box-shadow:0 4px 0 #07131e; border-radius:11px; }
.pad button.pressed,#dpad span.pressed { background:#e4ba60; color:#152332; border-color:#ffe1a2; box-shadow:0 1px 0 #07131e; }
#fire { background:radial-gradient(circle at 35% 25%,#ffe0a1,#e5b653); border:2px solid #ffe3aa; box-shadow:0 5px 0 #765522,0 8px 22px #0005; color:#2a2e30; font-weight:850; letter-spacing:1px; }
#fire.pressed { background:#fbe2ad; box-shadow:0 1px 0 #765522; }
#dpad { background:#10202e; border:1px solid #54748a55; box-shadow:inset 0 2px 12px #0005; }
#dpad span { background:linear-gradient(#2a4052,#1a2e3e); color:#bbcfdb; border:1px solid #7395aa25; }
.pad .soft { font-size:12px; width:80px; height:38px; }
.pad .small button { font-size:12px; min-width:44px; width:auto; padding:0 10px; }
body.touch { background:radial-gradient(ellipse at center,#233c4b,#0a1520); }
body.touch .app-header,body.touch .app-footer { display:none; }
body.touch #stage { border-radius:10px; border-color:#8db1c333; max-width:100%; }
body.touch #screen { max-width:none; }
body.touch .keyboard-hint { display:none; }
body.touch .pad { gap:6px; padding:4px; }
body.touch .context-hint { max-width:100%; }
@media (max-width:700px) {
  main { padding:12px; gap:12px; }
  .edition,.app-footer { display:none; }
  .wordmark { font-size:12px; letter-spacing:1px; }
  .app-header button { padding:0 8px; }
  #screen { max-width:calc(100vw - 24px); }
  #screen.landscape { width:min(calc(100vw - 24px),calc((100dvh - 130px)*4/3)); }
}
@container (max-width:450px) {
  .home-menu .menu-content { width:100%; padding:24px; }
  .hero-art { inset:0 -18% 0 12%; opacity:.18; background-size:cover; }
  .home-menu h1 { font-size:clamp(30px,10cqw,44px); max-width:10ch; }
  .home-menu .ui-heading p { max-width:24ch; }
  .home-menu .menu-list { max-width:100%; }
  .menu-choice { padding:11px; }
  .menu-content { padding:18px; }
  .choice-tip { display:none; }
  .feature-tags { margin:16px 0; }
  .level-grid { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .level-info { padding:8px; gap:7px; }
  .team-status { padding:5px 6px; }
  #match-hud { gap:5px; }
  .team-title { flex-direction:column; gap:0; }
  .team-units { font-size:6px; }
  .battle-phase { line-height:1.15; }
  .action-arsenal { padding:7px 9px; min-height:34px; }
  .action-pause { min-width:34px; min-height:34px; padding:6px; }
  .equipment-grid { gap:5px; }
  .equipment-content { padding:10px; }
}
@media (orientation:portrait) {
  body.touch main { grid-template:"screen screen" minmax(0,1fr) "left right" 220px / minmax(0,1fr) minmax(0,1fr); }
}
@media (orientation:landscape) {
  body.touch main { grid-template:"left screen right" minmax(0,1fr) / 120px minmax(0,1fr) 120px; }
  body.touch #fire { width:78px; height:78px; font-size:15px; }
  body.touch #dpad { --dpad-size:clamp(70px,calc(100dvh - 100px),112px); }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto !important; transition:none !important; animation:none !important; } }
/* The query container needs an explicit width (intrinsic sizing is contained). */
#stage { width:min(calc((100dvh - 170px)*.75),calc(100vw - 64px),720px); }
#stage:has(#screen.landscape) { width:min(calc(100vw - 64px),calc((100dvh - 170px)*4/3),1120px); }
#screen,#screen.landscape { width:100%; max-width:none; height:auto; }
@media (max-width:700px) {
  #stage { width:min(calc((100dvh - 130px)*.75),calc(100vw - 24px)); }
  #stage:has(#screen.landscape) { width:min(calc(100vw - 24px),calc((100dvh - 130px)*4/3)); }
}
body.touch .column { z-index:auto; }
.dialog-content { max-height:100%; overflow:auto; scrollbar-width:thin; }
body.touch #offline { top:calc(env(safe-area-inset-top) + 8px); bottom:auto; }
#match-actions { bottom:17cqw; }
#stage:has(#screen.landscape) #match-actions { bottom:13cqw; }
/* Size the portrait pad from the space its three control rows actually need. */
body.touch .pad .soft,body.touch .pad .small button { height:44px; }
@media (orientation:portrait) {
  body.touch main { grid-template:"screen screen" minmax(0,1fr) "left right" clamp(220px,30dvh,260px) / minmax(0,1fr) minmax(0,1fr); }
  body.touch #dpad { --dpad-size:clamp(110px,calc(30dvh - 112px),148px); }
}
@container (max-width:450px) {
  .home-menu .menu-content { padding:20px; }
  .home-menu h1 { font-size:clamp(30px,9cqw,40px); }
  .home-menu .feature-tags { margin:12px 0; }
}
#match-hud.new-turn .team-status.active { box-shadow:0 0 24px #8ecce738; }

/* Persian text flows RTL; the battlefield and physical controls stay fixed. */
:root[lang="fa"] { font-family:Tahoma,Arial,sans-serif; }
html[lang="fa"] body { font-family:Tahoma,Arial,sans-serif; }
html[dir="rtl"] main { direction:ltr; }
html[dir="rtl"] :is(.app-header,.app-footer,#game-ui,#lobby,#netbar,#offline,#update,.context-bar,.team-status,.battle-info) { direction:rtl; }
html[dir="rtl"] .wordmark { direction:ltr; }
html[dir="rtl"] :is(.eyebrow,.feature-tags,.battle-level,.app-footer,.edition,.keyboard-hint) { letter-spacing:0; }
html[dir="rtl"] .app-header nav { margin-left:0; margin-right:auto; }
html[dir="rtl"] .edition { border-left:0; border-right:1px solid #ffffff24; padding-left:0; padding-right:24px; }
html[dir="rtl"] .ui-heading h1 { letter-spacing:0; line-height:1.5; font-weight:700; }
html[dir="rtl"] .ui-heading p { line-height:1.9; }
html[dir="rtl"] .home-menu .menu-content { margin-left:auto; padding-right:clamp(14px,5cqw,50px); padding-left:0; }
html[dir="rtl"] .home-menu h1 { font-size:clamp(27px,4.8cqw,50px); max-width:13ch; }
html[dir="rtl"] .hero-art { inset:0 41% 0 0; }
html[dir="rtl"] .menu-choice { text-align:right; }
html[dir="rtl"] .choice-arrow { margin-left:0; margin-right:auto; transform:scaleX(-1); }
html[dir="rtl"] .choice-tip { padding-left:0; padding-right:29px; line-height:1.9; }
html[dir="rtl"] .keyboard-hint { margin-left:0; margin-right:auto; }
html[dir="rtl"] .close-panel { right:auto; left:0; }
html[dir="rtl"] .equipment-card strong { line-height:1.7; }
html[dir="rtl"] .equipment-card small { right:auto; left:7px; }
html[dir="rtl"] .equipment-card.locked::after { left:auto; right:7px; }
html[dir="rtl"] .equipment-detail { line-height:1.9; }
html[dir="rtl"] .dialog-copy { line-height:2; }
html[dir="rtl"] #lobby .rooms th { text-align:right; }
html[dir="rtl"] #lobby .rooms .actions { text-align:left; }
html[dir="rtl"] #lobby :is(input[type=password],#lb-name,#lb-room) { unicode-bidi:plaintext; }
html[dir="rtl"] .team-status { text-align:right; }
html[dir="rtl"] .context-bar { text-align:right; }
html[dir="rtl"] .context-hint { text-shadow:none; line-height:1.8; }
html[dir="rtl"] .charge-track { direction:ltr; }
@container (max-width:450px) {
  html[dir="rtl"] .home-menu .menu-content { width:100%; padding:20px; }
  html[dir="rtl"] .home-menu h1 { font-size:clamp(26px,7.5cqw,34px); max-width:13ch; }
  html[dir="rtl"] .hero-art { inset:0 12% 0 -18%; }
}

/* Leave the original 20px map unobstructed when using the classic artwork. */
body[data-theme="original"] #match-actions { bottom:9.5cqw; }
body[data-theme="original"] #stage:has(#screen.landscape) #match-actions { bottom:7.5cqw; }
.menu-footer { flex-wrap:wrap; column-gap:14px; row-gap:4px; }
#theme-toggle[aria-pressed="true"], .ui-theme[aria-pressed="true"] { color:var(--accent); }