:root {
  color-scheme: dark;
  --gold: #d6a84e;
  --gold-light: #f2d384;
  --ink: #f6eedb;
  --panel: rgba(24, 21, 15, .91);
  --line: rgba(222, 181, 94, .38);
  font-family: Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: #17150f; }

button, a { font: inherit; }
button { color: inherit; }

.game-shell { position: relative; width: 100%; height: 100%; isolation: isolate; }
.game-stage, .game-stage canvas { width: 100%; height: 100%; display: block; touch-action: none; }
.game-stage { position: absolute; inset: 0; background: #3f4a25; }

.top-bar {
  position: absolute;
  z-index: 5;
  top: max(.65rem, env(safe-area-inset-top));
  left: max(.65rem, env(safe-area-inset-left));
  right: max(.65rem, env(safe-area-inset-right));
  min-height: 4.4rem;
  display: grid;
  grid-template-columns: minmax(12rem, 1fr) auto minmax(12rem, 1fr);
  align-items: center;
  gap: 1rem;
  padding: .55rem .7rem;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(38, 32, 22, .96), rgba(17, 15, 11, .91));
  box-shadow: 0 .7rem 2rem rgba(0, 0, 0, .38), inset 0 1px rgba(255,255,255,.06);
  pointer-events: auto;
}

.brand { display: flex; align-items: center; gap: .7rem; min-width: 0; }
.brand-mark {
  width: 3rem; height: 3rem; display: grid; place-items: center; flex: 0 0 auto;
  border: 1px solid #d5aa50; border-radius: 50%; color: var(--gold-light);
  background: radial-gradient(circle, #78321f 0 53%, #3c1711 54% 100%);
  font-size: .67rem; font-weight: 800; letter-spacing: .05em;
  box-shadow: inset 0 0 0 .2rem rgba(24,16,9,.55);
}
.brand strong, .brand small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.brand strong { color: var(--gold-light); font-size: 1.05rem; letter-spacing: .04em; text-transform: uppercase; }
.brand small { color: #b8ad98; font: .72rem system-ui, sans-serif; }

.battle-stats { display: flex; gap: clamp(1rem, 4vw, 3rem); text-align: center; }
.battle-stats span, .battle-stats small, .battle-stats strong { display: block; }
.battle-stats small { color: #a99c84; font: .65rem system-ui, sans-serif; text-transform: uppercase; letter-spacing: .11em; }
.battle-stats strong { margin-top: .12rem; color: var(--ink); font-size: 1.05rem; }

.top-actions { display: flex; justify-content: flex-end; gap: .5rem; }
.top-actions a, .top-actions button, .unit-panel button, .primary {
  min-height: 2.6rem; border: 1px solid #9a7532; border-radius: .15rem; padding: 0 .9rem;
  color: var(--gold-light); background: linear-gradient(#44351f, #292016); text-decoration: none;
  font-weight: 700; cursor: pointer;
}
.icon-button { width: 2.6rem; padding: 0 !important; }

.mission-panel {
  position: absolute; z-index: 4; left: max(.8rem, env(safe-area-inset-left)); top: 6.1rem;
  width: min(20rem, calc(100vw - 1.6rem)); padding: .75rem 1rem;
  border-left: .18rem solid var(--gold); background: rgba(20, 18, 13, .75);
  box-shadow: .5rem .6rem 1.4rem rgba(0,0,0,.25); pointer-events: none;
}
.mission-panel strong, .mission-panel small { display: block; }
.mission-panel strong { margin: .15rem 0 .2rem; color: var(--ink); }
.mission-panel small { color: #c1b8a7; font: .72rem/1.35 system-ui, sans-serif; }
.kicker { color: var(--gold); font: 700 .62rem system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; }

.unit-panel {
  position: absolute; z-index: 5; left: 50%; bottom: max(.75rem, env(safe-area-inset-bottom));
  width: min(44rem, calc(100vw - 1.5rem)); min-height: 5.2rem; transform: translateX(-50%);
  display: grid; grid-template-columns: 3.7rem minmax(8rem, 1fr) auto minmax(5rem, 10rem) auto auto;
  align-items: center; gap: .85rem; padding: .65rem .75rem;
  border: 1px solid var(--line); background: var(--panel); box-shadow: 0 -.5rem 2rem rgba(0,0,0,.35);
}
.unit-emblem { width: 3.5rem; height: 3.5rem; display: grid; place-items: center; border-radius: 50%; border: 2px solid var(--gold); background: #6c291c; color: var(--gold-light); font-size: 1.7rem; }
.unit-copy small, .unit-copy strong, .strength small, .strength strong { display: block; }
.unit-copy small, .strength small { color: #a99c84; font: .62rem system-ui, sans-serif; letter-spacing: .08em; text-transform: uppercase; }
.unit-copy strong { margin-top: .2rem; color: var(--ink); font-size: 1.05rem; }
.strength { min-width: 4rem; text-align: right; }
.strength strong { color: var(--gold-light); }
.health-track { height: .42rem; overflow: hidden; border: 1px solid #65563f; background: #17130f; }
.health-track span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, #7d2017, #d8a343); transition: width .2s; }
.unit-panel button:disabled { opacity: .45; cursor: default; }

.toast { position: absolute; z-index: 6; left: 50%; top: 7rem; transform: translate(-50%, -1rem); padding: .65rem 1rem; border: 1px solid var(--line); background: rgba(20,16,11,.92); color: var(--ink); font: .78rem system-ui,sans-serif; opacity: 0; pointer-events: none; transition: .2s; }
.toast.visible { opacity: 1; transform: translate(-50%, 0); }

dialog { width: min(38rem, calc(100vw - 2rem)); border: 1px solid var(--gold); padding: clamp(1.2rem, 5vw, 2.4rem); color: var(--ink); background: linear-gradient(145deg, #2b251a, #15120d); box-shadow: 0 2rem 5rem #000; }
dialog::backdrop { background: rgba(8,8,5,.72); backdrop-filter: blur(3px); }
dialog h1 { margin: .35rem 0 1.4rem; color: var(--gold-light); font-size: clamp(1.6rem,5vw,2.5rem); }
.dialog-close { position: absolute; top: .5rem; right: .6rem; border: 0; background: none; color: #cfc2a9; font-size: 1.8rem; cursor: pointer; }
.help-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .7rem; }
.help-grid p { margin: 0; padding: .8rem; border: 1px solid rgba(214,168,78,.18); background: rgba(255,255,255,.025); }
.help-grid strong, .help-grid span { display: block; }
.help-grid span { margin-top: .35rem; color: #bdb3a0; font: .78rem/1.45 system-ui,sans-serif; }
.primary { display: block; margin: 1.4rem auto 0; min-width: 9rem; }

@media (max-width: 700px) {
  .top-bar { min-height: 3.7rem; grid-template-columns: minmax(0,1fr) auto; gap: .5rem; }
  .brand-mark { width: 2.6rem; height: 2.6rem; }
  .brand small, .battle-stats { display: none; }
  .editor-link { padding: 0 .65rem !important; }
  .mission-panel { top: 5.2rem; padding: .55rem .75rem; }
  .mission-panel small { display: none; }
  .unit-panel { grid-template-columns: 3rem minmax(0,1fr) auto auto; min-height: 4.3rem; gap: .55rem; }
  .unit-emblem { width: 2.8rem; height: 2.8rem; font-size: 1.25rem; }
  .strength, .health-track { display: none; }
  .unit-panel button { padding: 0 .65rem; }
  #attack-button { display: none; }
  .help-grid { grid-template-columns: 1fr; }
  .toast { top: 5.5rem; max-width: calc(100vw - 2rem); text-align: center; }
}

@media (max-height: 500px) {
  .top-bar { top: .35rem; min-height: 3.2rem; }
  .brand-mark { width: 2.3rem; height: 2.3rem; }
  .mission-panel { display: none; }
  .unit-panel { left: .45rem; right: .45rem; bottom: .35rem; width: auto; min-height: 3.6rem; transform: none; }
}