:root {
  color-scheme: dark;
  --ink: #efe5c5;
  --muted: #a99e80;
  --gold: #dab75d;
  --gold-bright: #f4d983;
  --green: #395b43;
  --deep: #101b17;
  --panel: rgba(23, 32, 27, 0.96);
  --line: rgba(225, 199, 125, 0.25);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  font-family: Georgia, "Times New Roman", serif;
  font-synthesis: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

* { box-sizing: border-box; }

html, body {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--deep);
  color: var(--ink);
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

button { font: inherit; color: inherit; }
button, canvas { touch-action: none; }
button:focus-visible { outline: 3px solid var(--gold-bright); outline-offset: 2px; }
.touch-target { min-width: 48px; min-height: 48px; cursor: pointer; }

.gate { position: fixed; z-index: 200; inset: 0; display: grid; place-items: center; padding: 20px; background: radial-gradient(circle at 50% 30%, #365443, #101b17 70%); overflow: auto; }
.gate[hidden] { display: none; }
.gate-card { width: min(420px, 100%); padding: 30px; border: 1px solid #b99a5088; border-radius: 22px; background: linear-gradient(145deg, #263b31, #14221c); box-shadow: 0 30px 90px #0009, inset 0 1px #fff1; text-align: center; }
.gate-card.wide { width: min(560px, 100%); }
.gate-sigil { width: 70px; height: 70px; display: grid; place-items: center; margin: 0 auto 20px; border-radius: 20px 20px 28px 28px; border: 2px solid #d0af5a; background: radial-gradient(circle at 40% 30%, #496a4c, #172a22 70%); color: var(--gold-bright); font-size: 36px; box-shadow: inset 0 0 0 4px #13231c, 0 8px 25px #0008; }
.gate h1 { margin: 7px 0; font-size: 34px; }
.gate p { color: #bcb39d; font: 14px/1.5 system-ui,sans-serif; }
.gate form:not(.inline-form) { display: grid; gap: 13px; margin-top: 22px; text-align: left; }
.gate label { display: grid; gap: 6px; color: #cdbd8a; font: 700 10px system-ui,sans-serif; text-transform: uppercase; letter-spacing: .12em; }
.gate input { width: 100%; min-height: 48px; border: 1px solid #776c4d; border-radius: 10px; padding: 0 13px; background: #0d1814; color: #f2e8ca; font: 16px system-ui,sans-serif; user-select: text; -webkit-user-select: text; }
.form-error { min-height: 20px; margin: 0 !important; color: #e9a08f !important; }
.profile-list, .save-list { display: grid; gap: 10px; margin: 24px 0 14px; }
.profile-button, .save-button { width: 100%; min-height: 64px; border: 1px solid #716847; border-radius: 12px; padding: 12px 16px; background: linear-gradient(#30473a,#1c2b23); text-align: left; display: flex; align-items: center; justify-content: space-between; }
.profile-button b, .save-button b { font-size: 18px; }
.profile-button span, .save-button span { color: #b6ad96; font: 12px system-ui,sans-serif; }
.profile-avatar { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: #b28d40; color: #16251d !important; font: 700 17px Georgia !important; }
.inline-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; margin-top: 12px; }
.pin-unlock { display: grid; grid-template-columns: 1fr auto; gap: 8px; width: 100%; }
@media (max-width: 520px) { .inline-form { grid-template-columns: 1fr auto; } .inline-form #profilePin { grid-column: 1; } .inline-form button { grid-column: 2; grid-row: 1 / span 2; align-self: stretch; } }
.text-button { border: 0; background: transparent; color: #cabb8e; text-decoration: underline; }
.gate-card.hero-choice-card{width:min(920px,100%)}.hero-choice-list{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:22px 0}.hero-choice{min-height:250px;padding:18px;border:1px solid #806f43;border-radius:14px;background:linear-gradient(#30483b,#17261f);color:#f2e8ca;text-align:left}.hero-choice:hover,.hero-choice:focus-visible{border-color:#e0c36f;box-shadow:0 0 0 2px #e0c36f55}.hero-choice .hero-choice-mark{width:58px;height:58px;display:grid;place-items:center;margin-bottom:12px;border:2px solid #d1b45c;border-radius:50%;background:#14241c;font:32px Georgia}.hero-choice b,.hero-choice small,.hero-choice span{display:block}.hero-choice b{font:700 22px Georgia}.hero-choice small{margin:4px 0 12px;color:#d4bd78;font:700 10px system-ui,sans-serif;text-transform:uppercase;letter-spacing:.1em}.hero-choice span{color:#bcb39d;font:12px/1.5 system-ui,sans-serif}@media(max-width:700px){.hero-choice-list{grid-template-columns:1fr}.hero-choice{min-height:0}}

.app-shell {
  width: 100%;
  height: 100dvh;
  min-height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  background: #132019;
  isolation: isolate;
}

.app-shell::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: .12;
  z-index: 50;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90' viewBox='0 0 90 90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.6' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.3'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
}

.topbar {
  z-index: 10;
  min-height: calc(68px + var(--safe-top));
  padding: calc(8px + var(--safe-top)) 14px 8px;
  display: grid;
  grid-template-columns: auto auto 1fr auto;
  align-items: center;
  gap: 14px;
  background: linear-gradient(180deg, #20342b, #14231d);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 6px 25px #07100bcc;
}

.crest-button, .round-button, .compass {
  border: 1px solid #b9964e99;
  background: radial-gradient(circle at 40% 30%, #496a4c, #1c3329 70%);
  box-shadow: inset 0 0 0 3px #15231d, 0 3px 12px #0008;
}
.crest-button { width: 50px; height: 50px; border-radius: 14px 14px 20px 20px; }
.crest-mark { font-weight: 700; font-size: 25px; color: var(--gold-bright); }
.round-button { width: 48px; height: 48px; border-radius: 50%; font-size: 20px; }
.round-button[aria-pressed="false"] { opacity: .5; }

.day-card { display: flex; flex-direction: column; min-width: 120px; }
.eyebrow { color: #cbb778; font: 700 10px/1.2 system-ui, sans-serif; letter-spacing: .16em; text-transform: uppercase; }
.day-card strong { font-size: 16px; white-space: nowrap; }

.resources { justify-self: center; display: flex; gap: 18px; font: 700 14px system-ui, sans-serif; }
.resources div { display: flex; align-items: center; gap: 7px; }
.resources small { margin-left: -3px; color: #9f967d; font: 700 8px system-ui,sans-serif; letter-spacing: .06em; text-transform: uppercase; }
.resource-icon { width: 15px; height: 15px; display: inline-block; transform: rotate(45deg); border-radius: 3px; box-shadow: inset 0 0 0 2px #ffffff33; }
.resource-icon.gold { background: #e2b940; border-radius: 50%; }
.resource-icon.wood { background: #94643f; }
.resource-icon.stone { background: #80908a; }
.resource-icon.aether { background: #8da8df; }

.game-stage { min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) 320px; }
.map-frame { position: relative; min-width: 0; min-height: 0; overflow: hidden; background: #263b2d; touch-action: none; cursor: grab; }
#mapCanvas { display: block; width: 100%; height: 100%; cursor: grab; }
#mapCanvas.dragging { cursor: grabbing; }
.map-vignette { pointer-events: none; position: absolute; inset: 0; box-shadow: inset 0 0 100px 25px #0a120b99; }
.minimap-frame { pointer-events: none; position: absolute; z-index: 3; top: 14px; right: 14px; width: 150px; padding: 6px; border: 2px solid #a88643; border-radius: 8px; background: linear-gradient(#2d2417,#100e0a); box-shadow: inset 0 0 0 2px #514020,0 5px 20px #0009; }
.minimap-frame span { display: block; padding: 0 2px 4px; color: #dcc47e; font: 700 8px system-ui,sans-serif; letter-spacing: .15em; }
#minimapCanvas { display: block; width: 100%; height: auto; border: 1px solid #55462b; image-rendering: pixelated; }
.map-frame.edge-hit::after { content:""; pointer-events:none; position:absolute; z-index:4; inset:0; box-shadow:inset 0 0 0 4px #e3c56c,inset 0 0 45px #d5ae4a88; animation:edgePulse .18s ease-out; }
@keyframes edgePulse { from { opacity:.9; } to { opacity:0; } }
.compass { position: absolute; right: 18px; bottom: 18px; width: 54px; height: 54px; border-radius: 50%; color: var(--gold-bright); font-size: 23px; }
.touch-hint { pointer-events: none; position: absolute; left: 50%; bottom: 18px; transform: translateX(-50%); padding: 9px 16px; border-radius: 30px; background: #102018d9; border: 1px solid var(--line); font: 600 12px system-ui, sans-serif; color: #ded4b6; opacity: 1; transition: opacity .3s; white-space: nowrap; }
.touch-hint.hidden { opacity: 0; }

.hero-panel { min-height: 0; overflow-y: auto; padding: 18px; background: linear-gradient(160deg, #21332b, #111d18); border-left: 1px solid var(--line); box-shadow: -10px 0 35px #06100b77; }
.hero-card { display: flex; gap: 14px; align-items: center; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.portrait-wrap { position: relative; flex: 0 0 auto; }
.portrait { width: 82px; aspect-ratio: .82; position: relative; overflow: hidden; border-radius: 42px 42px 14px 14px; border: 2px solid #b99c58; background: radial-gradient(circle at 58% 29%, #d2dfba 0 8%, transparent 9%), linear-gradient(#718a70, #253b31 58%, #182820); box-shadow: inset 0 0 25px #0b1814, 0 5px 15px #0007; }
.portrait-moon { position: absolute; width: 42px; height: 42px; right: 6px; top: 10px; border-radius: 50%; background: #e5e2c0; box-shadow: 0 0 18px #e8f0bcaa; }
.portrait-figure { position: absolute; font-size: 68px; line-height: 1; left: 8px; bottom: 0; color: #1b3026; text-shadow: 1px 1px #899a73; }
.level-medallion { position: absolute; right: -5px; bottom: -5px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #ad8b3d; border: 3px solid #24372c; font: 800 13px system-ui, sans-serif; }
.hero-copy { min-width: 0; flex: 1; }
.hero-copy h1 { font-size: 21px; margin: 4px 0 12px; line-height: 1; }
.hero-copy small { font: 12px system-ui, sans-serif; color: var(--muted); }
.movement { height: 7px; border-radius: 6px; background: #0c1612; overflow: hidden; margin-bottom: 6px; }
.movement span { display: block; width: var(--fill); height: 100%; background: linear-gradient(90deg, #bd903d, #f0d575); border-radius: inherit; }

.army-strip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; padding: 18px 0; }
.unit-slot { position: relative; aspect-ratio: .82; border: 1px solid #796b4788; border-radius: 9px; background: linear-gradient(#31483a, #1b2a22); box-shadow: inset 0 0 12px #0006; }
.unit-slot.selected { border-color: var(--gold-bright); box-shadow: inset 0 0 12px #0006, 0 0 0 2px #d6b95444; }
.unit-slot b { position: absolute; right: 4px; bottom: 3px; min-width: 20px; padding: 2px 4px; border-radius: 8px; background: #0b1410e8; font: 700 11px system-ui, sans-serif; }
.unit-art { font-size: 28px; color: #cad59e; filter: drop-shadow(0 2px 2px #000); }
.unit-slot.empty { border-style: dashed; color: #7b806e; font: 300 24px system-ui, sans-serif; }
.army-manage-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-bottom:9px}.army-manage-actions[hidden]{display:none}.army-manage-actions .large-button{margin:0}

.action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.action-button { border: 1px solid #6f684d88; border-radius: 10px; background: linear-gradient(#2e4137, #1b2a23); display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px; font: 600 12px system-ui, sans-serif; box-shadow: inset 0 1px #ffffff0d; }
.action-button span { color: #d8c47e; font-size: 19px; }
.action-button.primary, .large-button { background: linear-gradient(#a48038, #775c27); color: #fff7dc; border-color: #e0c26b; }
.action-button:active, .round-button:active, .compass:active, .large-button:active { transform: translateY(1px); filter: brightness(1.15); }
.mobile-dock { display: none; }

.sheet-backdrop { position: fixed; z-index: 70; inset: 0; background: #08100b9c; backdrop-filter: blur(3px); }
.bottom-sheet { position: fixed; z-index: 71; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(520px, calc(100% - 32px)); padding: 28px; border-radius: 20px; background: linear-gradient(145deg, #263b31, #14221c); border: 1px solid #b3944d88; box-shadow: 0 25px 80px #000b, inset 0 1px #fff1; }
.bottom-sheet[hidden], .sheet-backdrop[hidden], .combat-overlay[hidden] { display: none; }
.sheet-handle { display: none; }
.sheet-close { position: absolute; right: 12px; top: 12px; border: 0; background: transparent; font: 300 32px/1 system-ui, sans-serif; color: #d5c9aa; }
.bottom-sheet h2 { margin: 6px 40px 9px 0; font-size: 30px; }
.bottom-sheet p { font: 15px/1.55 system-ui, sans-serif; color: #c9c0a8; }
.stat-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 20px 0; }
.stat { padding: 10px 5px; border: 1px solid var(--line); border-radius: 9px; text-align: center; background: #0d1914aa; }
.stat b { display: block; font-size: 19px; color: var(--gold-bright); }
.stat small { font: 700 9px system-ui, sans-serif; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.large-button { width: 100%; border-radius: 10px; padding: 12px; font: 700 14px system-ui, sans-serif; }
.large-button + .large-button { margin-top: 9px; }
.large-button.secondary { background: linear-gradient(#3f5f4d,#263e32); border-color: #9b8b5c; }
.large-button.danger { background: linear-gradient(#87453d,#5b2925); border-color: #d58a75; }
.menu-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-bottom: 10px; }
.menu-actions[hidden] { display: none; }
.menu-actions .large-button + .large-button { margin-top: 0; }
.menu-actions .text-button { grid-column: 1 / -1; }
.save-row { display: grid; grid-template-columns: 1fr auto; gap: 8px; }
.save-clear { width: 58px; border: 1px solid #8d5a50; border-radius: 12px; background: #4d2926; color: #f1c0af; font: 700 10px system-ui,sans-serif; text-transform: uppercase; }

.combat-overlay { position: fixed; z-index: 60; inset: 0; padding: calc(16px + var(--safe-top)) 18px calc(16px + var(--safe-bottom)); background: radial-gradient(circle at 50% 40%, #405b3e, #142119 72%); display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }
.combat-header, .combat-footer { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.combat-header { border-bottom: 1px solid var(--line); padding-bottom: 10px; }
.combat-header h2 { margin: 2px 0 0; font-size: 24px; }
.combat-header .sheet-close { position: static; }
.battlefield { min-height: 0; display: grid; grid-template-columns: repeat(9, minmax(38px, 62px)); grid-auto-rows: minmax(34px, 54px); align-content: center; justify-content: center; gap: 3px; overflow: hidden; perspective: 800px; }
.hex { position: relative; width: 100%; height: 100%; border: 0; clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%); background: #78906455; color: #fff; font: 700 12px system-ui, sans-serif; }
.hex:nth-child(18n + 10), .hex:nth-child(18n + 11), .hex:nth-child(18n + 12), .hex:nth-child(18n + 13), .hex:nth-child(18n + 14), .hex:nth-child(18n + 15), .hex:nth-child(18n + 16), .hex:nth-child(18n + 17), .hex:nth-child(18n + 18) { transform: translateX(50%); }
.hex.reachable { background: #cbb15a66; box-shadow: inset 0 0 0 2px #e9d78388; }
.hex.ally { background: #426d57; color: #f5dd88; font-size: 25px; }
.hex.enemy { background: #7f3d36; color: #f2c59b; font-size: 25px; }
.hex.active { box-shadow: inset 0 0 0 3px #ffe691, 0 0 16px #f7cf5eaa; }
.hex.inspected { box-shadow: inset 0 0 0 3px #fff,0 0 18px #9cdcff; }
.hex.obstacle { background: #26362e99; }
.creature-sprite { position: absolute; inset: -12% -18% 4%; display: block; background-image: url('/assets/realmward-creatures.png'); background-size: 300% 200%; background-repeat: no-repeat; filter: drop-shadow(0 4px 3px #000b); }
.creature-sprite.guard { background-position: 0% 0%; }
.creature-sprite.archer { background-position: 50% 0%; }
.creature-sprite.wisp { background-position: 100% 0%; }
.creature-sprite.raider { background-position: 0% 100%; }
.creature-sprite.crossbow { background-position: 50% 100%; }
.creature-sprite.ogre { background-position: 100% 100%; }
.battle-rock { position: absolute; inset: 26% 20% 12%; border-radius: 45% 55% 35% 50%; background: linear-gradient(135deg,#788078,#353d38); box-shadow: inset 4px 5px #a7aa9644,0 4px 5px #0008; }
.hex small { position: absolute; right: 20%; bottom: 14%; min-width: 16px; border-radius: 8px; padding: 1px 3px; background: #0a120ee8; color: white; font: 700 9px system-ui,sans-serif; }
.hex.hit { animation: hit .35s; }
@keyframes hit { 50% { transform: scale(.82); background: #e7bf66; } }
.combat-footer { border-top: 1px solid var(--line); padding-top: 10px; }
.turn-unit { display: flex; align-items: center; gap: 11px; }
.turn-unit small { display: block; font: 700 9px system-ui, sans-serif; letter-spacing: .14em; color: var(--muted); }
.turn-unit b { font-size: 15px; }
.combat-actions { display: flex; gap: 8px; }
.combat-actions .action-button { min-width: 88px; }

.toast { position: fixed; z-index: 100; left: 50%; top: calc(82px + var(--safe-top)); transform: translate(-50%, -20px); opacity: 0; pointer-events: none; padding: 10px 16px; border: 1px solid #c4a95d77; border-radius: 24px; background: #0e1b16ef; box-shadow: 0 8px 30px #0008; font: 600 13px system-ui, sans-serif; transition: .25s ease; }
.toast.show { transform: translate(-50%, 0); opacity: 1; }

@media (max-width: 800px) {
  .topbar { min-height: calc(60px + var(--safe-top)); padding-inline: 10px; gap: 9px; grid-template-columns: auto auto 1fr; }
  .crest-button { width: 46px; height: 46px; }
  .round-button { display: none; }
  .day-card strong { font-size: 14px; }
  .resources { justify-self: end; gap: 10px; }
  .wide-resource { display: none !important; }
  .game-stage { grid-template-columns: 1fr; }
  .hero-panel { display: none; }
  .app-shell { grid-template-rows: auto minmax(0, 1fr) calc(68px + var(--safe-bottom)); }
  .mobile-dock { z-index: 15; display: grid; grid-template-columns: repeat(4, 1fr); padding: 7px 7px calc(7px + var(--safe-bottom)); gap: 6px; background: linear-gradient(#1f3028, #101b17); border-top: 1px solid var(--line); }
  .mobile-dock .action-button { flex-direction: column; gap: 1px; padding: 3px; min-width: 0; min-height: 52px; }
  .mobile-dock .action-button span { font-size: 17px; }
  .mobile-dock .action-button b { font-size: 10px; }
  .compass { right: 12px; bottom: 12px; }
  .touch-hint { bottom: 14px; }
  .bottom-sheet { left: 0; right: 0; bottom: 0; top: auto; transform: none; width: 100%; border-radius: 22px 22px 0 0; padding: 30px 20px calc(20px + var(--safe-bottom)); }
  .sheet-handle { display: block; position: absolute; left: 50%; top: 9px; width: 44px; height: 4px; border-radius: 4px; background: #8d8979; transform: translateX(-50%); }
  .combat-overlay { padding-inline: 9px; }
  .battlefield { grid-template-columns: repeat(9, minmax(28px, 1fr)); grid-auto-rows: minmax(27px, 8vw); gap: 2px; }
  .combat-footer { align-items: stretch; }
  .combat-actions { flex: 1; justify-content: flex-end; }
  .combat-actions .action-button { min-width: 58px; padding: 5px; flex-direction: column; gap: 0; }
  .turn-unit .unit-art { display: none; }
}

@media (max-width: 430px) {
  .resources small { display: none; }
  .minimap-frame { width: 112px; top: 9px; right: 9px; padding: 4px; }
  .minimap-frame span { display: none; }
  .resources { gap: 6px; }
  .resources div { gap: 4px; }
  .resource-icon { width: 12px; height: 12px; }
  .day-card .eyebrow { display: none; }
  .day-card { min-width: 0; }
  .day-card strong { font-size: 12px; }
  .combat-header h2 { font-size: 18px; }
  .combat-actions .action-button span { font-size: 14px; }
  .combat-actions .action-button b { font-size: 9px; }
}

@media (orientation: portrait) and (min-width: 801px) {
  .game-stage { grid-template-columns: 1fr; grid-template-rows: minmax(0, 1fr) auto; }
  .hero-panel { max-height: 205px; display: grid; grid-template-columns: 1.2fr .8fr .8fr; gap: 18px; border-left: 0; border-top: 1px solid var(--line); }
  .hero-card { padding: 0; border-bottom: 0; }
  .army-strip { padding: 0; align-self: center; }
  .action-grid { align-self: center; }
}

@media (max-height: 520px) and (orientation: landscape) {
  .topbar { min-height: calc(52px + var(--safe-top)); padding-block: calc(4px + var(--safe-top)) 4px; }
  .crest-button, .round-button { width: 42px; height: 42px; min-height: 42px; min-width: 42px; }
  .hero-panel { padding: 10px; }
  .portrait { width: 62px; }
  .hero-copy h1 { font-size: 17px; margin-bottom: 7px; }
  .army-strip { padding: 9px 0; }
  .action-button { min-height: 42px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* Tactical combat rebuild */
.combat-overlay{padding:calc(8px + var(--safe-top)) 10px calc(8px + var(--safe-bottom));background:#080d0a;grid-template-rows:auto minmax(0,1fr) auto}
.combat-header{min-height:58px;padding:6px 10px;border:1px solid #765d2f;border-radius:10px 10px 0 0;background:linear-gradient(#283b31,#111d18)}
.initiative{flex:1;display:flex;justify-content:center;gap:4px;min-width:0;overflow:hidden}
.initiative-token{width:34px;height:34px;border:1px solid #877244;border-radius:7px;background:#18251e;display:grid;place-items:center;font:700 9px system-ui,sans-serif;color:#e8d69e}
.initiative-token.enemy{border-color:#8d4b43;color:#efaaa0}.initiative-token.current{box-shadow:0 0 0 2px #f4dc82}
.round-seal{text-align:center;color:#bcae82;font:700 8px system-ui,sans-serif;letter-spacing:.12em}.round-seal b{display:block;color:#ffe08a;font:22px Georgia}
.battle-stage{position:relative;min-height:0;overflow:hidden;border-inline:1px solid #765d2f;background:url('/assets/realmward-battlefield.png') center/cover no-repeat}
.battle-stage::after{content:"";pointer-events:none;position:absolute;z-index:1;inset:0;box-shadow:inset 0 0 80px #05080599}
.battlefield{position:absolute;z-index:2;inset:5% 8% 9%;display:grid;grid-template-columns:repeat(15,minmax(0,1fr));grid-template-rows:repeat(11,minmax(0,1fr));gap:0;overflow:visible}
.hex{width:108%;height:112%;margin:-6% -4%;clip-path:none;background:transparent!important;font-size:12px;overflow:visible}
.hex::before{content:"";position:absolute;z-index:0;inset:1px;clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%);background:transparent;box-shadow:none}
.hex:nth-child(18n + 10),.hex:nth-child(18n + 11),.hex:nth-child(18n + 12),.hex:nth-child(18n + 13),.hex:nth-child(18n + 14),.hex:nth-child(18n + 15),.hex:nth-child(18n + 16),.hex:nth-child(18n + 17),.hex:nth-child(18n + 18){transform:none}
.hex:nth-child(30n + 16),.hex:nth-child(30n + 17),.hex:nth-child(30n + 18),.hex:nth-child(30n + 19),.hex:nth-child(30n + 20),.hex:nth-child(30n + 21),.hex:nth-child(30n + 22),.hex:nth-child(30n + 23),.hex:nth-child(30n + 24),.hex:nth-child(30n + 25),.hex:nth-child(30n + 26),.hex:nth-child(30n + 27),.hex:nth-child(30n + 28),.hex:nth-child(30n + 29),.hex:nth-child(30n + 30){transform:translateX(50%)}
.hex.reachable::before{background:#e8cf5a35;box-shadow:inset 0 0 0 1px #f6e596bb}.hex.ally::before{background:#426d5733}.hex.enemy::before{background:#7f3d3633}
.hex.active::before{box-shadow:inset 0 0 0 3px #ffe691,0 0 16px #f7cf5eaa}.hex.inspected::before{box-shadow:inset 0 0 0 3px #fff,0 0 18px #9cdcff}
.creature-sprite{inset:-30% -28% 0;z-index:2;pointer-events:none}.hex small{z-index:4;right:5%;bottom:0;border:1px solid #d1b55c;padding:2px 4px;font-size:10px}
.hex.active .creature-sprite{filter:drop-shadow(0 0 4px #fff) drop-shadow(0 0 13px #ffe36f) drop-shadow(0 5px 4px #000c)}
.hex.active::after{content:"ACTIVE";position:absolute;z-index:6;left:50%;top:-24px;transform:translateX(-50%);padding:3px 7px;border:1px solid #fff0a0;border-radius:10px;background:#14251eee;color:#fff5b5;font:800 8px system-ui,sans-serif;letter-spacing:.12em;white-space:nowrap}
.hex.inspected:not(.active) .creature-sprite{filter:drop-shadow(0 0 5px #a9e8ff) drop-shadow(0 4px 3px #000b)}
.hex.enemy .creature-sprite{transform:scaleX(-1)}
.hex.ally .creature-sprite.wisp,.hex.ally .creature-sprite.ogre{transform:scaleX(-1)}
.hex.enemy .creature-sprite.wisp,.hex.enemy .creature-sprite.ogre{transform:none}
.commander{position:absolute;z-index:3;top:12px;width:96px;padding:7px;border:1px solid #a48849;border-radius:8px;background:#101812e8;text-align:center;box-shadow:0 5px 20px #0009}.ally-commander{left:10px}.enemy-commander{right:10px;border-color:#8d4b43}
.commander-portrait{width:42px;height:42px;margin:auto;display:grid;place-items:center;border-radius:50%;background:#315a43;border:2px solid #d1b45c;font:700 22px Georgia}.enemy-commander .commander-portrait{background:#66352f}.commander b,.commander small{display:block}.commander small{color:#aaa089;font:9px system-ui,sans-serif}
.battle-message{position:absolute;z-index:4;left:50%;bottom:5px;transform:translateX(-50%);padding:5px 14px;border:1px solid #846e3e;border-radius:14px;background:#0d160fe8;color:#e9dfbf;font:600 11px system-ui,sans-serif;white-space:nowrap}
.combat-footer{min-height:68px;padding:7px 10px;border:1px solid #765d2f;border-radius:0 0 10px 10px;background:linear-gradient(#1d2c24,#101914)}
.turn-unit span{display:block;color:#b8ae92;font:10px system-ui,sans-serif}.turn-crest{width:38px;height:38px;display:grid!important;place-items:center;border:1px solid #a48849;border-radius:8px;color:#f1d375!important;font-size:18px!important}
.formation-panel{position:absolute;z-index:8;left:50%;top:50%;transform:translate(-50%,-50%);width:min(380px,calc(100% - 30px));padding:22px;border:1px solid #b49551;border-radius:14px;background:linear-gradient(145deg,#263b31,#111c17);box-shadow:0 25px 80px #000d;text-align:center}.formation-panel[hidden]{display:none}.formation-panel h3{font-size:26px;margin:5px}.formation-panel p{color:#bbb099;font:13px/1.45 system-ui,sans-serif}.formation-panel>div{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:15px 0}.formation-panel button.selected{box-shadow:0 0 0 3px #f0d172;background:linear-gradient(#5f7044,#34462e)}
.combat-spell-menu{position:absolute;z-index:7;left:50%;bottom:38px;transform:translateX(-50%);display:grid;grid-template-columns:repeat(4,1fr);width:min(560px,90%);padding:8px;gap:6px;border:1px solid #ae914e;border-radius:10px;background:#101914f5;box-shadow:0 12px 35px #000c}.combat-spell-menu[hidden]{display:none}.combat-spell-menu button{min-height:54px;border:1px solid #725f38;border-radius:8px;background:#26392f;color:#f4e7bc;font:700 12px Georgia}.combat-spell-menu small{display:block;color:#aca181;font:8px system-ui,sans-serif;text-transform:uppercase}
.siege-wall{position:absolute;z-index:1;right:17%;top:7%;bottom:10%;width:8%;display:grid;grid-template-rows:1fr 1.1fr 1fr;filter:drop-shadow(-8px 6px 8px #0008)}.siege-wall[hidden]{display:none}.siege-wall span{background:repeating-linear-gradient(0deg,#58594f 0 8px,#77776b 9px 16px);border:2px solid #34372f}.siege-wall .siege-gate{background:repeating-linear-gradient(90deg,#3f2b1c 0 8px,#68472b 9px 15px);border-color:#242019}
@media(max-width:800px){.battlefield{inset:8% 8% 12%;grid-template-columns:repeat(15,minmax(0,1fr));grid-template-rows:repeat(11,minmax(0,1fr))}.hex:nth-child(30n + 16),.hex:nth-child(30n + 17),.hex:nth-child(30n + 18),.hex:nth-child(30n + 19),.hex:nth-child(30n + 20),.hex:nth-child(30n + 21),.hex:nth-child(30n + 22),.hex:nth-child(30n + 23),.hex:nth-child(30n + 24),.hex:nth-child(30n + 25),.hex:nth-child(30n + 26),.hex:nth-child(30n + 27),.hex:nth-child(30n + 28),.hex:nth-child(30n + 29),.hex:nth-child(30n + 30){transform:translateX(15%)}.commander{width:64px;padding:3px}.ally-commander{left:3px}.enemy-commander{right:3px}.commander-portrait{width:28px;height:28px}.commander small{display:none}.battle-message{font-size:9px;bottom:3px;max-width:82%;overflow:hidden;text-overflow:ellipsis}.initiative-token{width:25px;height:27px}.combat-header h2{font-size:16px}.combat-footer{display:grid;grid-template-columns:1fr;gap:4px;min-height:104px}.combat-actions{width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:5px}.combat-actions .action-button{min-width:0;min-height:40px;flex-direction:row}.turn-unit #stackDetails{display:block;font-size:8px;max-width:300px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}}
.battle-result{position:absolute;z-index:12;left:50%;top:50%;transform:translate(-50%,-50%);width:min(620px,calc(100% - 28px));max-height:calc(100% - 24px);overflow:auto;padding:24px;border:1px solid #c5a758;border-radius:14px;background:linear-gradient(150deg,#243a30 0%,#101914 72%);box-shadow:0 28px 100px #000f;color:#f3e8c5}.battle-result[hidden]{display:none}.battle-result h3{margin:4px 0 18px;font-size:28px}.result-columns{display:grid;grid-template-columns:1fr 1fr;gap:12px}.result-columns>div{padding:12px;border:1px solid #665735;border-radius:9px;background:#0c1511aa}.result-columns h4{margin:0 0 8px;color:#d7bd70;font:700 12px system-ui,sans-serif;text-transform:uppercase;letter-spacing:.1em}.result-row{display:flex;justify-content:space-between;gap:10px;padding:5px 0;border-bottom:1px solid #ffffff12;font:13px system-ui,sans-serif}.result-row b.loss{color:#ee9b87}.result-row b.survive{color:#9ed49d}.result-loot{margin:12px 0;padding:12px;border:1px solid #9b7c37;border-radius:9px;background:#8f6c262b;color:#f2d782;font:700 14px system-ui,sans-serif}.battle-result.defeat{border-color:#9b4e45;background:linear-gradient(150deg,#3a2827,#130f0e 72%)}
.town-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px}.town-actions[hidden]{display:none}.combat-spell-menu{grid-template-columns:repeat(auto-fit,minmax(110px,1fr))}
@media(max-width:600px){.battle-result{padding:16px}.battle-result h3{font-size:22px}.result-columns{grid-template-columns:1fr}.result-columns>div{padding:8px}}