:root {
  color-scheme: dark;
  --game-font-increase: 2px;
  font-family: "Heroes III smalfont", serif;
  color: #f5ecd7;
  background: #161b22;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  --surface: #211a15;
  --surface-raised: #302519;
  --border: #e7ce8c;
  --muted: #d0c5aa;
  --accent: #f1d992;
  --error: #f59e9e;
  --success: #70d6aa;
  --ui-blue: url("/assets/ui/textures/blue.webp");
  --ui-gray: url("/assets/ui/textures/gray.webp");
  --gold-edge: #e7ce8c;
  --gold-shadow: #bd9439;
}
* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; }
body { margin: 0; min-width: 320px; min-height: 100vh; }
body.in-match { min-height: 100dvh; overflow: clip; }
body.in-match .topbar, body.in-match > footer { display: none; }
h1, h2, h3, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: calc(clamp(1.35rem, 3vw, 2rem) + var(--game-font-increase)); letter-spacing: -0.035em; }
h2 { margin-bottom: 0; font-size: calc(1.12rem + var(--game-font-increase)); letter-spacing: -0.02em; }
h3 { margin: 0; font-size: calc(1rem + var(--game-font-increase)); }
main { width: min(1500px, calc(100% - 36px)); margin: 16px auto 12px; }
.topbar { min-height: 82px; display: flex; align-items: center; padding: 14px clamp(18px, 4vw, 56px); border-bottom: 1px solid var(--border); background: #1b222c; }
.eyebrow { margin-bottom: 5px; color: var(--accent); font-size: calc(0.68rem + var(--game-font-increase)); font-weight: 750; letter-spacing: 0.11em; text-transform: uppercase; }
.connection { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: calc(0.78rem + var(--game-font-increase)); }
.indicator { width: 9px; height: 9px; flex: none; border-radius: 50%; background: #758191; box-shadow: 0 0 0 4px #75819120; }
.indicator.online { background: var(--success); box-shadow: 0 0 0 4px #70d6aa22; }
.indicator.offline { background: #f0aa67; box-shadow: 0 0 0 4px #f0aa6722; }
.indicator.failed { background: var(--error); box-shadow: 0 0 0 4px #f59e9e22; }
.panel { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.muted { margin: 8px 0 0; color: var(--muted); font-size: calc(0.84rem + var(--game-font-increase)); line-height: 1.45; }
.lobby-layout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(230px, 0.8fr); align-items: start; gap: 18px; }
.lobby-panel, .connection-card { padding: clamp(18px, 3vw, 28px); }
.lobby-panel > .muted { max-width: 680px; margin-bottom: 20px; }
.auth-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.form-card { display: grid; gap: 12px; padding: 16px; border: 1px solid var(--border); border-radius: 10px; background: #1c242e; }
.form-card h3 { margin-bottom: 2px; }
label { display: grid; gap: 5px; color: #dce4ee; font-size: calc(0.83rem + var(--game-font-increase)); }
input, select, button { min-height: 39px; border: 1px solid #526176; border-radius: 7px; background: #151b23; color: #edf2f8; font: inherit; }
input, select { width: 100%; padding: 8px 10px; }
.form-card input[type="color"] { min-height: 42px; padding: 3px; cursor: pointer; }
button { padding: 8px 13px; border-color: #6486b1; background: #385779; font-weight: 700; cursor: pointer; }
button:not(.battle-icon-button):not(.research-node.is-complete):hover:not(:disabled) { background: #476e9b; }
button.secondary { border-color: #566679; background: #303b48; }
button:disabled { cursor: not-allowed; opacity: 0.48; }
button:focus-visible, input:focus-visible, select:focus-visible, canvas:focus-visible { outline: 2px solid #b9d8ff; outline-offset: 2px; }
.singleplayer-form { max-width: 440px; margin-top: 14px; }
.creature-duel-note { margin: 0; color: var(--muted); line-height: 1.4; }
#creature-duel-status:empty { display: none; }
#creature-duel-status { margin: 0; color: var(--error); }
.saved-game-prompt { display: grid; gap: 10px; margin-top: 14px; padding: 14px; border: 1px solid var(--border); border-radius: 9px; background: #1c242e; }
.saved-game-prompt .muted { margin: 0; }
.saved-game-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.clear-saves-button { margin-top: 14px; }
footer { padding: 0 18px 12px; color: var(--muted); font-size: calc(0.76rem + var(--game-font-increase)); text-align: center; }
[hidden] { display: none !important; }

.match-screen { --match-topbar-height: 34px; --world-panel-edge-inset: 14px; --world-roster-width: 210px; --world-hud-left: calc(var(--world-roster-width) + 30px); --inspector-width: min(350px, calc(100vw - var(--world-panel-edge-inset) - var(--world-panel-edge-inset))); position: fixed; z-index: 10; inset: 0; width: auto; height: auto; margin: 0; overflow: clip; background: #151b20; }
.map-viewport { position: absolute; inset: 0; overflow: hidden; background: #666666; }
#world-map { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; cursor: grab; touch-action: none; }
#match-screen.is-placement-active #world-map { cursor: crosshair; }
.world-fog-canvas { position: absolute; z-index: 1; transform-origin: 0 0; pointer-events: none; }
.world-overlay-canvas { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; pointer-events: none; }
#world-map.is-dragging { cursor: grabbing; }
.tile-tooltip { position: absolute; z-index: 3; max-width: min(280px, calc(100% - 16px)); padding: 6px 8px; border: 1px solid #718096; border-radius: 5px; background: #101820ed; color: #edf2f8; font-size: calc(0.72rem + var(--game-font-increase)); line-height: 1.35; white-space: pre-line; pointer-events: none; }
.map-minimap { position: absolute; z-index: 4; left: 14px; bottom: 18px; width: min(260px, 34vw); height: min(164px, 22vw); min-height: 104px; border: 2px solid #9b7d4b; border-radius: 7px; background: #111820ed; box-shadow: 0 5px 22px #0009; cursor: grab; touch-action: none; }
.map-minimap.dragging { cursor: grabbing; }
.world-roster { position: absolute; z-index: 4; inset: 58px auto auto var(--world-panel-edge-inset); display: flex; width: var(--world-roster-width); max-height: calc(100dvh - max(104px, min(22vw, 164px)) - 90px); flex-direction: column; gap: 12px; overflow-y: auto; padding: 14px; border: 1px solid #a6b2bf55; border-radius: 10px; background: #111a24e8; box-shadow: 0 8px 30px #0006; backdrop-filter: blur(12px); }
.roster-header { display: grid; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid #ffffff20; }
.roster-header > div:first-child, .turn-summary { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.roster-header .eyebrow { margin: 0; }
.roster-header > div:first-child strong { max-width: 140px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(0.85rem + var(--game-font-increase)); }
.turn-summary { justify-content: flex-start; color: var(--muted); font-size: calc(0.76rem + var(--game-font-increase)); }
.turn-summary strong { color: #edf2f8; font-size: calc(0.9rem + var(--game-font-increase)); }
.status-chip { margin-left: auto; padding: 4px 8px; border: 1px solid #65758a; border-radius: 999px; color: #cbd5e1; font-size: calc(0.68rem + var(--game-font-increase)); white-space: nowrap; }
.match-result-banner { padding: 9px 10px; border: 1px solid var(--gold-edge); border-radius: 6px; background: linear-gradient(135deg, #604b25, #282016); color: #f5e8cc; font-size: calc(0.82rem + var(--game-font-increase)); font-weight: 750; line-height: 1.35; text-align: center; }
.roster-header .connection { overflow: hidden; }
.roster-header .connection span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#end-turn, #return-lobby { min-height: 36px; }
.turn-actions { position: relative; min-height: 42px; padding-right: 5px; }
.turn-actions #end-turn { width: 100%; min-height: 36px; }
.next-todo-button { position: absolute; z-index: 1; right: -7px; bottom: -5px; display: grid; width: 31px; height: 31px; min-height: 31px; place-items: center; padding: 0; border: 1px solid #fff0b1; border-radius: 50%; background: var(--ui-blue); box-shadow: 0 0 0 2px #151b20, 0 2px 6px #000b; color: #fff0b1; font-size: calc(1.2rem + var(--game-font-increase)); line-height: 1; }
.next-todo-button:hover:not(:disabled) { background-image: var(--ui-blue); }
.entity-roster { display: grid; gap: 7px; }
.entity-roster h2, .lobby-seat-panel h2 { color: #d5bd8a; font-size: calc(0.76rem + var(--game-font-increase)); letter-spacing: 0.1em; text-transform: uppercase; }
.entity-list { display: grid; gap: 5px; }
.entity-entry { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: 8px; min-height: 42px; padding: 5px 8px; border: 1px solid #66738450; border-radius: 6px; background: #1e2934ce; color: #e9edf2; text-align: left; }
.entity-entry:hover:not(:disabled) { border-color: #d5bd8a; background: #293745; }
.entity-entry[aria-pressed="true"] { border-color: #e6c77e; background: #35404a; box-shadow: inset 3px 0 #e6c77e; }
.entity-icon { display: grid; width: 26px; height: 26px; place-items: center; border: 1px solid #d2b46f; border-radius: 50%; color: #f3d793; font-size: calc(0.72rem + var(--game-font-increase)); }
.entity-icon-portrait { object-fit: cover; image-rendering: pixelated; }
.entity-icon-town { object-fit: cover; object-position: center; }
.entity-copy { display: grid; min-width: 0; gap: 2px; }
.entity-copy strong, .entity-copy span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.entity-copy strong { font-size: calc(0.78rem + var(--game-font-increase)); }
.entity-copy span { color: var(--muted); font-size: calc(0.68rem + var(--game-font-increase)); }
.entity-entry { position: relative; }
.entity-todo { position: absolute; top: 4px; right: 5px; padding: 2px 4px; border: 1px solid #e7ce8c; background: #2a1d0e; color: #ffe29a; font-size: calc(.55rem + var(--game-font-increase)); font-weight: 800; letter-spacing: .04em; line-height: 1; text-transform: uppercase; }
.entity-queue-icon.town-queue-icon-circle { position: absolute; top: 50%; right: 12px; width: 30px; height: 30px; transform: translateY(-50%); border: 1px solid #e7ce8c99; background: transparent; box-shadow: inset 0 0 0 1px #0008; }
.entity-entry:has(.entity-queue-icon) .entity-copy, .entity-entry:has(.entity-production-turns) .entity-copy { padding-right: 36px; }
.entity-production-turns { position: absolute; top: 2px; right: 2px; display: grid; min-width: 17px; height: 17px; padding: 0 2px; place-items: center; border: 1px solid var(--gold-edge); border-radius: 50%; background: #20180e var(--ui-blue) center / cover; box-shadow: 0 0 0 1px var(--gold-shadow); color: #fff2cb; font-size: .6rem; line-height: 1; font-variant-numeric: tabular-nums; }
.roster-empty { margin: 0; padding: 4px 2px; color: var(--muted); font-size: calc(0.74rem + var(--game-font-increase)); }
.lobby-seat-panel { display: grid; gap: 9px; padding-top: 12px; border-top: 1px solid #ffffff20; }
.player-list { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; }
.player-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 4px 7px; padding: 7px 8px; border: 1px solid #3a4655; border-radius: 6px; background: #1b232d; }
.player-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(0.78rem + var(--game-font-increase)); font-weight: 650; }
.player-state { color: var(--muted); font-size: calc(0.66rem + var(--game-font-increase)); text-align: right; }
.player-faction { grid-column: 1 / -1; color: var(--muted); font-size: calc(0.68rem + var(--game-font-increase)); }
.player-row.active { border-color: #80a9d9; }
.lobby-controls { display: grid; gap: 8px; padding-top: 10px; border-top: 1px solid var(--border); }
.lobby-controls label { font-size: calc(0.76rem + var(--game-font-increase)); }
.lobby-controls select, .lobby-controls button { min-height: 35px; }

.match-resource-topbar { position: absolute; z-index: 9; inset: 0 0 auto; display: flex; height: var(--match-topbar-height); align-items: center; justify-content: space-between; gap: 12px; padding: 2px 12px; border-bottom: 1px solid var(--gold-edge); background: #0b1b32 var(--ui-blue) center / 300px repeat; box-shadow: 0 0 0 1px var(--gold-shadow), 0 3px 12px #0009; color: #f5ecd7; }
.match-resource-topbar-values { display: flex; min-width: 0; align-items: center; gap: 8px; overflow-x: auto; scrollbar-width: thin; }
.match-resource-topbar-meta { display: flex; flex: none; align-items: center; gap: 12px; white-space: nowrap; font-size: calc(.8rem + var(--game-font-increase)); }
.match-turn-label strong { font-size: calc(.9rem + var(--game-font-increase)); }
.match-system-time { min-width: 5.3em; text-align: right; }
.match-settings-button { display: grid; width: 28px; min-height: 28px; place-items: center; padding: 0; border: 1px solid var(--gold-edge); border-radius: 2px; background: #111e31; box-shadow: 0 0 0 1px var(--gold-shadow); color: #f5ecd7; }
.match-settings-menu-icon { display: block; width: 16px; height: 16px; }
.shared-resource-bar { display: flex; flex: none; align-items: center; gap: 4px; }
.shared-resource-item { display: flex; flex: none; align-items: center; gap: 3px; padding: 0 7px 0 3px; border: 1px solid var(--resource-edge); border-radius: 10px; background: var(--resource-fill); box-shadow: inset 0 0 4px #ffffff16, 0 1px 2px #0008; white-space: nowrap; }
.shared-resource-item.resource-research { --resource-edge: #d89443; --resource-fill: #6b3817; }
.shared-resource-item.resource-magic { --resource-edge: #44a9dd; --resource-fill: #124666; }
.shared-resource-item.resource-wood { --resource-edge: #a87a4f; --resource-fill: #4c3021; }
.shared-resource-item.resource-stone { --resource-edge: #a2a7b0; --resource-fill: #3e444e; }
.shared-resource-item.resource-gems { --resource-edge: #db777c; --resource-fill: #652a3c; }
.shared-resource-item.resource-crystal { --resource-edge: #b79dde; --resource-fill: #4d376b; }
.shared-resource-item.resource-sulfur { --resource-edge: #d0b350; --resource-fill: #5b4c19; }
.shared-resource-item.resource-mercury { --resource-edge: #73b4ad; --resource-fill: #274d4d; }
.shared-resource-income { align-self: flex-start; margin-top: 1px; font-size: .62rem; line-height: 1; color: #f5ecd7; font-variant-numeric: tabular-nums; white-space: nowrap; }
.shared-resource-icon { width: 22px; height: 22px; object-fit: contain; }
.shared-resource-amount { color: #f5ecd7; font-size: calc(.82rem + var(--game-font-increase)); font-weight: 750; font-variant-numeric: tabular-nums; }
.icon-button { display: grid; width: 36px; min-height: 36px; place-items: center; padding: 0; font-size: calc(1.1rem + var(--game-font-increase)); }
.info-window { position: absolute; z-index: 6; right: 18px; bottom: 18px; display: grid; width: min(360px, calc(100vw - var(--world-hud-left) - 36px)); gap: 11px; padding: 13px 15px; border: 1px solid #c4ad78; border-radius: 9px; background: linear-gradient(145deg, #172535f2, #101820f5); box-shadow: 0 7px 24px #0008; color: #edf2f8; backdrop-filter: blur(12px); transition: right 180ms ease-out, width 180ms ease-out, opacity 160ms ease, visibility 160ms; pointer-events: none; }
.info-window[data-interactive="true"] { pointer-events: auto; }
.match-screen.has-inspector-open .info-window { right: calc(var(--inspector-width) + var(--world-panel-edge-inset) + 18px); width: min(360px, calc(100vw - var(--world-hud-left) - var(--inspector-width) - var(--world-panel-edge-inset) - 54px)); }
.info-window-header { display: grid; gap: 2px; min-width: 0; }
.info-window-header-with-icon { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.info-window-header-icon { width: 112px; height: 53px; max-width: 100%; object-fit: contain; image-rendering: pixelated; }
.info-window[aria-label="Town information"]:has(.info-window-header-icon) { isolation: isolate; }
.info-window[aria-label="Town information"] .info-window-header-with-icon { grid-template-columns: minmax(0, 1fr); }
.info-window[aria-label="Town information"] .info-window-header-icon { position: absolute; z-index: -1; top: 0; left: 0; width: 100%; height: auto; object-position: center top; border-radius: inherit; pointer-events: none; }
.info-window-header-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; min-width: 0; }
.info-window-heading-copy { display: grid; gap: 2px; min-width: 0; }
.info-window-header-with-portrait { grid-template-columns: 64px minmax(0, 1fr); align-items: center; gap: 9px; }
.info-window-portrait { width: 64px; height: 72px; border: 1px solid #c4ad78; background: #130f0b; object-fit: contain; }
.info-window-kind { color: #d5bd8a; font-size: calc(0.65rem + var(--game-font-increase)); font-weight: 750; letter-spacing: 0.11em; text-transform: uppercase; }
.info-window-title { overflow: hidden; color: #f5e8cc; font-family: "Heroes III smalfont", serif; font-size: calc(1.16rem + var(--game-font-increase)); font-weight: 650; text-overflow: ellipsis; white-space: nowrap; }
.info-window-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); gap: 5px; padding: 9px 0; border-block: 1px solid #ffffff20; }
.info-window-metrics-compact { grid-template-columns: repeat(auto-fit, minmax(64px, 1fr)); }
.info-window-metric { display: flex; min-width: 0; align-items: center; gap: 6px; padding: 4px 5px; border: 1px solid #ffffff12; border-radius: 6px; background: #ffffff08; }
.info-window-metric.has-tooltip { cursor: help; pointer-events: auto; }
.info-window-metric-icon-slot { display: grid; width: 25px; height: 25px; flex: none; place-items: center; }
.info-window-metric-icon { width: 25px; height: 25px; object-fit: contain; }
.info-window-metric-copy { display: grid; min-width: 0; gap: 2px; }
.info-window-metric-value { color: #f5e8cc; font-size: calc(0.88rem + var(--game-font-increase)); line-height: 1; }
.info-window-metric-label { overflow: hidden; color: var(--muted); font-size: calc(0.63rem + var(--game-font-increase)); text-overflow: ellipsis; white-space: nowrap; }
.hero-preview-header-row .info-window-metrics-compact { grid-template-columns: repeat(2, max-content); gap: 3px 7px; margin: 0; padding: 5px 7px; border: 1px solid #b39051; border-radius: 1px; background-color: #806232; background-image: var(--ui-blue); background-size: cover; box-shadow: inset 0 0 0 1px #fff2; }
.hero-preview-header-row .info-window-metric { gap: 4px; padding: 0; border: 0; border-radius: 0; background: transparent; }
.hero-preview-header-row .info-window-metric-icon { box-shadow: 0 0 0 1px #000; }
.town-preview-research-control { display: flex; flex-direction: column; min-height: 20px; align-items: center; justify-content: flex-end; gap: 5px; }
.town-preview-conversion-row { display: flex; align-items: center; gap: 4px; }
.town-preview-research-icon { width: 15px; height: 15px; object-fit: contain; }
.town-preview-research-slider-shell { position: relative; display: flex; width: 76px; height: 16px; flex: none; align-items: center; }
.town-preview-research-slider { position: relative; z-index: 1; width: 100%; height: 16px; margin: 0; padding: 0; appearance: none; background: transparent; cursor: pointer; }
.town-preview-research-slider:disabled { cursor: not-allowed; opacity: .55; }
.town-preview-research-slider:focus-visible { outline: 1px solid var(--gold-edge); outline-offset: 2px; }
.town-preview-research-slider::-webkit-slider-runnable-track { height: 2px; border-radius: 999px; background: #d3bd83; }
.town-preview-research-slider::-moz-range-track { height: 2px; border: 0; border-radius: 999px; background: #d3bd83; }
.town-preview-research-slider::-webkit-slider-thumb { width: 8px; height: 8px; margin-top: -3px; appearance: none; border: 1px solid #f6e4ac; border-radius: 50%; background: #a98137; box-shadow: 0 1px 2px #000b; }
.town-preview-research-slider::-moz-range-thumb { width: 7px; height: 7px; border: 1px solid #f6e4ac; border-radius: 50%; background: #a98137; box-shadow: 0 1px 2px #000b; }
.town-preview-research-notches { position: absolute; z-index: 0; inset: 0 4px; display: flex; align-items: center; justify-content: space-between; pointer-events: none; }
.town-preview-research-notch { width: 1px; height: 7px; background: #f0ddb0; box-shadow: 0 0 1px #000; }
.info-window-progress { display: grid; gap: 5px; }
.info-window-progress-inline { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.info-window-progress-row { display: grid; grid-template-columns: 25px minmax(0, 1fr) auto; align-items: center; gap: 7px; min-height: 26px; font-size: calc(0.72rem + var(--game-font-increase)); }
.info-window-progress-inline .info-window-progress-row { grid-template-columns: minmax(0, 1fr) auto; gap: 5px; }
.info-window-progress-inline .info-window-progress-icon-slot { display: none; }
.info-window-progress-inline .info-window-progress-row-with-action { grid-template-columns: auto auto minmax(0, 1fr); gap: 8px; }
.info-window-progress-row-with-action .info-window-progress-value { text-align: left; }
.info-window-progress-action { justify-self: end; display: grid; place-items: center; width: 32px; height: 28px; min-height: 28px; padding: 2px; border: 1px solid var(--gold-edge); border-radius: 1px; box-shadow: 0 0 0 1px var(--gold-shadow); }
.info-window-progress-action img { width: 24px; height: 22px; object-fit: contain; }
.info-window-progress-icon-slot { display: grid; width: 25px; height: 25px; place-items: center; }
.info-window-progress-icon { width: 21px; height: 21px; object-fit: contain; }
.info-window-progress-label { overflow: hidden; color: #c9d2dd; text-overflow: ellipsis; white-space: nowrap; }
.info-window-progress-value { max-width: 180px; color: #f3e5c5; font-size: calc(0.72rem + var(--game-font-increase)); font-weight: 650; text-align: right; }
.hero-preview-army { display: grid; gap: 6px; }
.hero-unit-slots { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 4px; }
.hero-unit-slot-group { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; }
.hero-army-divider { color: var(--gold-edge); font-size: calc(0.75rem + var(--game-font-increase)); }
.hero-unit-slot { display: grid; min-width: 0; aspect-ratio: 1; place-items: center; padding: 2px; border: 2px solid #050608; border-radius: 5px; background: #0b0d10; color: #f5e8cc; box-shadow: inset 0 0 0 1px #705333, 0 2px 4px #0008; }
.hero-unit-slot.is-editable { cursor: grab; }
.hero-unit-slot.is-editable:active { cursor: grabbing; }
.hero-unit-slot.is-empty { border-style: solid; background: #11171e; box-shadow: inset 0 0 0 1px #333b43; }
.hero-unit-slot.is-drop-target { border-color: #f0d28f; outline: 2px solid #f0d28f; outline-offset: 1px; transform: translateY(-2px); box-shadow: 0 0 10px #f0d28f99, inset 0 0 0 1px #fff0c4; }
.hero-unit-portrait { position: relative; display: grid; width: 100%; height: 100%; place-items: center; overflow: hidden; }
.hero-portrait-background, .hero-unit-icon { position: absolute; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.hero-portrait-background { inset: 0; }
.hero-unit-icon { z-index: 1; }
.hero-unit-count { position: absolute; z-index: 2; right: 0; bottom: 0; min-width: 15px; padding: 1px 3px; border: 1px solid #c1a36d; border-radius: 8px; background: #07090cf2; color: #fff0ca; font-size: calc(0.58rem + var(--game-font-increase)); font-weight: 800; line-height: 1.1; text-align: center; }
.hero-army-help { margin: 0; color: var(--muted); font-size: calc(0.63rem + var(--game-font-increase)); text-align: center; }
.hero-settle-town { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 38px; padding: 5px 9px; border: 1px solid #c4ad78; border-radius: 6px; background: #273c4d; color: #f5e8cc; font-size: calc(0.76rem + var(--game-font-increase)); font-weight: 700; }
.hero-settle-town img { width: 22px; height: 22px; object-fit: contain; image-rendering: pixelated; }
.hero-settle-town:disabled { cursor: not-allowed; opacity: 0.58; }
.hero-cancel-movement { min-height: 34px; padding: 5px 9px; border: 1px solid #c4ad78; border-radius: 6px; background: #382b23; color: #f5e8cc; font-size: calc(0.72rem + var(--game-font-increase)); font-weight: 700; }
.hero-cancel-movement:disabled { cursor: not-allowed; opacity: 0.58; }
.split-stack-modal { width: min(340px, calc(100% - 24px)); padding: 18px; border: 1px solid #c4ad78; border-radius: 10px; background: #17212beF; color: #edf2f8; box-shadow: 0 18px 60px #000b; }
.split-stack-modal::backdrop { background: #05090dcc; }
.split-stack-modal[open] { display: grid; gap: 12px; }
.split-stack-modal h2, .split-stack-modal p { margin: 0; }
.split-stack-modal h2 { color: #f5e8cc; font-size: calc(1rem + var(--game-font-increase)); }
.split-stack-modal label { display: grid; gap: 6px; }
.split-stack-actions { display: flex; justify-content: flex-end; gap: 8px; }
.settings-modal { width: min(420px, calc(100% - 24px)); max-height: calc(100dvh - 24px); overflow: auto; padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: #e8edf4; box-shadow: 0 18px 60px #000b; }
.settings-modal::backdrop { background: #05090dcc; }
.settings-modal[open] { display: grid; gap: 16px; }
.settings-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.settings-modal-header h2 { color: #f5e8cc; }
.settings-modal label { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 8px; }
.settings-modal label input { grid-column: 1 / -1; }
.settings-modal output { color: #f5e8cc; font-variant-numeric: tabular-nums; }
.settings-modal .muted { margin: 0; }

.inspector-panel { position: absolute; z-index: 8; inset: 0 var(--world-panel-edge-inset) 0 auto; display: grid; width: var(--inspector-width); align-content: start; gap: 14px; overflow-y: auto; padding: 78px 20px 20px; border-left: 1px solid #a6b2bf77; background: #111a24f2; box-shadow: -10px 0 34px #0006; backdrop-filter: blur(14px); visibility: hidden; transform: translateX(calc(100% + var(--world-panel-edge-inset) + 40px)); transition: transform 180ms ease-out, visibility 0s linear 180ms; pointer-events: none; }
.inspector-panel.is-open { visibility: visible; transform: translateX(0); transition-delay: 0s; pointer-events: auto; }

#inspector-panel.has-town-controls { display: flex; flex-direction: column; top: calc(var(--match-topbar-height) + 4px); right: 4px; overflow: hidden; padding: 8px 8px 20px; border-right: 1px solid var(--gold-edge); border-radius: 2px; box-shadow: -1px 0 0 var(--gold-shadow), -8px 0 24px #0009; }
#inspector-panel.has-town-controls .inspector-header,
#inspector-panel.has-town-controls .unavailable-note { display: none; }
#inspector-panel.has-town-controls #economy-controls { flex: 1; min-height: 0; grid-template-rows: minmax(0, 1fr); padding-top: 0; border-top: 0; }
#town-economy-controls { min-height: 0; grid-template-rows: auto auto minmax(0, 1fr); }
.town-options-scroll { min-height: 0; overflow-x: hidden; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: none; }
.town-options-scroll::-webkit-scrollbar { display: none; }
.production-option-tabs { display: flex; gap: 4px; padding: 0 0 6px; }
.production-option-tabs button { flex: 1; min-height: 30px; border: 1px solid var(--gold-edge); border-radius: 2px; background: var(--ui-blue) center / 258px 258px; color: #f2dfae; }
.production-option-tabs button[aria-selected="true"] { background-color: #536f94; box-shadow: inset 0 -2px #f2dfae; }
.production-option-section[hidden] { display: none; }
.inspector-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid #ffffff20; }
#selection-details { margin: 0; color: #d4dce5; font-size: calc(0.85rem + var(--game-font-increase)); line-height: 1.55; white-space: pre-line; }
.economy-controls { display: grid; gap: 8px; padding-top: 12px; border-top: 1px solid #ffffff20; }
.economy-controls[hidden] { display: none; }
.economy-controls > div { display: grid; gap: 8px; }
.economy-controls > div[hidden] { display: none; }
.economy-controls h3 { margin: 5px 0 0; color: #e8d7ad; font-size: calc(0.88rem + var(--game-font-increase)); }
.economy-controls .muted { margin: 0; font-size: calc(0.75rem + var(--game-font-increase)); line-height: 1.4; }
.town-queue-heading { display: flex; align-items: center; gap: 7px; }
.town-queue-heading .icon-button { margin-left: auto; }
.town-queue { display: grid; gap: 6px; min-width: 0; }
.town-queue-current, .town-queue-following { min-width: 0; margin: 0; padding: 0; list-style: none; }
.town-queue-current { display: grid; }
.town-queue-secondary-row { display: flex; width: 100%; min-width: 0; align-items: center; gap: 4px; }
.town-queue-following { display: grid; flex: 1 1 auto; grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 4px; }
.town-queue-row { display: grid; width: 100%; min-width: 0; grid-template-columns: 66px minmax(0, 1fr); align-items: center; align-content: start; gap: 8px; padding: 7px; border: 1px solid #ffffff20; border-radius: 7px; background: linear-gradient(145deg, #253746, #19232c); font-size: calc(0.69rem + var(--game-font-increase)); }
.town-queue-row.is-current-order { border-color: #d9bd75; box-shadow: inset 0 0 0 1px #d9bd7540; }
.town-queue-icon-circle { display: grid; width: 62px; height: 62px; place-items: center; overflow: hidden; border: 2px solid var(--gold-edge); border-radius: 50%; background: #20180e var(--ui-blue) center / cover; box-shadow: 0 0 0 2px var(--gold-shadow), inset 0 0 0 2px #0008; }
.town-queue-order-head { display: flex; min-width: 0; align-items: center; justify-content: space-between; gap: 6px; }
.town-queue-order-head strong { min-width: 0; overflow: hidden; color: #f4e8ca; font-size: calc(0.9rem + var(--game-font-increase)); text-overflow: ellipsis; white-space: nowrap; }
.town-queue-summary { display: grid; min-width: 0; gap: 7px; }
.town-queue-art { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; }
.town-queue-art.economy-art-atlas { display: grid !important; overflow: hidden; place-items: center; }
.town-queue-art.economy-art-fallback { display: grid; place-items: center; line-height: 1; }
.town-queue-turns-pill { position: relative; display: flex; min-width: max-content; flex: none; align-items: center; justify-content: center; gap: 4px; overflow: hidden; padding: 4px 7px; border: 1px solid var(--gold-edge); border-radius: 999px; background: #18130b; box-shadow: 0 0 0 1px var(--gold-shadow); color: #fff2cb; font-size: calc(0.62rem + var(--game-font-increase)); font-weight: 750; line-height: 1; white-space: nowrap; }
.town-queue-turns-fill { position: absolute; inset: 0 auto 0 0; border-radius: inherit; background: linear-gradient(90deg, #a97828aa, #f1d477cc); }
.town-queue-turns-clock, .town-queue-turns-text { position: relative; z-index: 1; }
.town-queue-turns-clock { position: relative; display: inline-block; width: 11px; height: 11px; flex: none; border: 1.4px solid currentColor; border-radius: 50%; }
.town-queue-turns-clock::before, .town-queue-turns-clock::after { position: absolute; background: currentColor; content: ""; }
.town-queue-turns-clock::before { top: 1px; left: 4px; width: 1px; height: 4px; }
.town-queue-turns-clock::after { top: 5px; left: 5px; width: 3px; height: 1px; }
.town-queue-gold-line { display: flex; align-items: center; gap: 4px; color: #f0d88d; font-size: calc(0.73rem + var(--game-font-increase)); font-variant-numeric: tabular-nums; font-weight: 750; }
.town-queue-gold-icon { width: 18px; height: 18px; object-fit: contain; }
.town-queue-slot { display: grid; width: 100%; min-width: 0; aspect-ratio: 1; place-items: center; overflow: hidden; padding: 0; border: 1px solid #718294; border-radius: 3px; background: linear-gradient(145deg, #253746, #19232c); cursor: grab; }
.town-queue-slot.is-empty { border-color: #5d80ac; background: linear-gradient(145deg, #365b87, #223c61); cursor: default; }
.town-queue-slot-art { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.town-queue-slot-art.economy-art-atlas { overflow: hidden; }
.town-queue-slot-art.economy-art-fallback { display: grid; place-items: center; }
.town-queue-row.is-dragging, .town-queue-slot.is-dragging { opacity: 0.45; }
.town-queue-row.is-drop-target, .town-queue-slot.is-drop-target { border-color: #f2dc9b; outline: 2px solid #f2dc9b; outline-offset: 1px; }
.town-queue-secondary-row .town-queue-trash { margin-left: auto; }
.town-queue-trash { display: grid; width: 30px; height: 30px; flex: none; place-items: center; border: 1px solid #9d6a59; border-radius: 3px; background: linear-gradient(145deg, #5b322d, #311d1a); color: #f5d5c8; }
.town-queue-trash svg { width: 18px; height: 18px; }
.town-queue-trash.is-unavailable { opacity: 0.5; }
.town-queue-trash.is-drop-target { border-color: #ffd2bd; outline: 2px solid #ffd2bd; outline-offset: 1px; background: linear-gradient(145deg, #8d4035, #5c2520); }
.town-queue-starting-units, .production-option-starting-units { color: #d4dce5; font-size: calc(0.62rem + var(--game-font-increase)); line-height: 1.35; }
.town-queue-starting-units, .town-queue-row > .creature-abilities, .town-queue-row > .muted { grid-column: 1 / -1; }
.town-queue-empty { display: grid; min-height: 58px; place-items: center; margin: 0; padding: 6px; border: 1px dashed #5d80ac; border-radius: 7px; background: linear-gradient(145deg, #365b87, #223c61); color: #d5e2f2; font-size: calc(0.72rem + var(--game-font-increase)); }
.production-option-section { display: grid; gap: 6px; padding-top: 10px; border-top: 1px solid #ffffff20; }
.production-option-section-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.production-option-section-heading h3 { margin: 0; }
.show-built-buildings-toggle { display: flex; flex: none; align-items: center; gap: 6px; color: #e2c77c; font-size: calc(0.64rem + var(--game-font-increase)); white-space: nowrap; cursor: pointer; }
.show-built-buildings-toggle input { position: relative; width: 28px; height: 15px; min-height: 15px; flex: none; margin: 0; padding: 0; appearance: none; border: 1px solid #897648; border-radius: 999px; background: #292319; cursor: pointer; }
.show-built-buildings-toggle input::before { position: absolute; top: 2px; left: 2px; width: 9px; height: 9px; border-radius: 50%; background: #aa9663; content: ""; transition: transform 120ms ease-out; }
.show-built-buildings-toggle input:checked { border-color: #e3c778; background: #70603b; }
.show-built-buildings-toggle input:checked::before { background: #f4e6b3; transform: translateX(12px); }
.show-built-buildings-toggle input:focus-visible { outline-color: var(--gold-edge); }
.production-option-list { display: grid; gap: 5px; }
.production-option-button { display: flex; width: 100%; min-height: 62px; align-items: center; gap: 10px; padding: 6px 9px; border-color: #718294; background: linear-gradient(115deg, #38516a, #22394c); text-align: left; }
.production-option-button:hover:not(:disabled) { border-color: #e3c778; background: linear-gradient(115deg, #4a6985, #2b4559); }
.production-option-art { display: grid; width: 48px; height: 48px; flex: none; place-items: center; object-fit: contain; line-height: 1; filter: drop-shadow(0 2px 2px #0009); }
.economy-art-atlas { background-repeat: no-repeat; image-rendering: pixelated; }
.economy-art-fallback { color: #f0d795; font-size: calc(1.7rem + var(--game-font-increase)); }
.production-option-copy { display: grid; min-width: 0; gap: 2px; }
.production-option-copy strong { overflow: hidden; color: #f4e8ca; font-size: calc(0.78rem + var(--game-font-increase)); text-overflow: ellipsis; white-space: nowrap; }
.production-option-cost, .production-option-reason { overflow: hidden; color: #e2c77c; font-size: calc(0.64rem + var(--game-font-increase)); line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.production-option-starting-units { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.production-option-reason { color: #d1bca2; }
.unavailable-note { margin: 0; color: var(--muted); font-size: calc(0.75rem + var(--game-font-increase)); }
.match-screen.is-battle .map-viewport,
.match-screen.is-battle #world-roster,
.match-screen.is-battle #selection-info-window,
.match-screen.is-battle #inspector-panel { display: none !important; }
.battle-screen { position: absolute; z-index: 8; inset: 0; display: block; overflow: hidden; background: radial-gradient(ellipse at 50% 45%, #3b4a42, #202b31 70%, #11171c); animation: battle-zoom-in 380ms cubic-bezier(.18,.72,.22,1) both; }
@keyframes battle-zoom-in { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: scale(1); } }
#battle-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; min-width: 0; min-height: 0; cursor: crosshair; touch-action: none; }
.battle-footer { position: absolute; z-index: 3; inset: auto 0 0; display: grid; grid-template-columns: minmax(292px, 350px) minmax(0, 1fr); align-items: center; gap: 10px; min-height: 108px; padding: 10px 14px max(10px, env(safe-area-inset-bottom)); border-top: 1px solid #ceb77d95; background: linear-gradient(180deg, #111820c9, #111820f5 28%); box-shadow: 0 -8px 26px #0007; backdrop-filter: blur(7px); }
.battle-actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: center; gap: 5px; min-width: 0; }
.battle-actions button { min-width: 0; min-height: 31px; padding: 4px 5px; border-color: #897648; border-radius: 4px; background: linear-gradient(#514735, #302a20); color: #f1e4c5; font: 700 calc(.69rem + var(--game-font-increase)) "Heroes III smalfont", serif; box-shadow: inset 0 1px #ffffff12, 0 1px 3px #0006; }
.battle-actions button:hover:not(:disabled) { border-color: #e5cf8e; background: linear-gradient(#75613b, #413622); }
.battle-actions label { display: grid; min-width: 0; gap: 2px; color: #c9bb99; font: 700 calc(.56rem + var(--game-font-increase))/1 "Heroes III smalfont", serif; text-transform: uppercase; }
.battle-actions input, .battle-actions select { width: 100%; min-width: 0; min-height: 31px; padding: 3px 5px; border-color: #796946; border-radius: 4px; background: #1a1c1a; color: #f2e8cf; font-size: calc(.68rem + var(--game-font-increase)); }
.battle-queue { --battle-queue-art-width: clamp(42px, 4.1vw, 58px); --battle-queue-art-height: clamp(46.35px, 4.524vw, 64px); display: flex; flex-flow: row nowrap; align-items: center; justify-content: flex-start; gap: 3px; min-width: 0; min-height: 82px; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; padding: 3px 2px 6px; scrollbar-width: thin; }
.battle-queue-item { position: relative; display: grid; box-sizing: border-box; flex: 0 0 var(--battle-queue-art-width); width: var(--battle-queue-art-width); min-width: var(--battle-queue-art-width); height: calc(var(--battle-queue-art-height) + 19px); grid-template-rows: minmax(0, 1fr) 18px; gap: 1px; overflow: hidden; padding: 0; border: 0; border-radius: 2px; background: linear-gradient(#403a2e, #211f1b); box-shadow: 0 2px 4px #0006; }
.battle-queue-item::before { position: absolute; z-index: 2; inset: 0; border: 1px solid #9b8552; border-radius: inherit; content: ""; pointer-events: none; }
.battle-queue-portrait { display: block; width: 100%; height: 100%; max-width: none; min-width: 0; max-height: none; aspect-ratio: 58 / 64; border: 0; background: #4c4130; image-rendering: pixelated; object-fit: cover; object-position: left center; box-shadow: 0 2px 4px #0008; }
.battle-queue-portrait.is-hero { background: #130f0b; image-rendering: auto; object-fit: contain; object-position: center; }
.battle-queue-hero { display: grid; width: var(--battle-queue-art-width); height: var(--battle-queue-art-width); min-width: 0; place-self: center; aspect-ratio: 1; place-items: center; border: 1px solid #d7bb72; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #907245, #382d20); color: #fff0c4; font: 700 calc(1rem + var(--game-font-increase)) "Heroes III smalfont", serif; box-shadow: 0 2px 4px #0008; }
.battle-queue-count { display: grid; width: 100%; min-width: 0; height: 18px; place-items: center; padding: 0 2px; border: 0; border-radius: 0; background: var(--battle-side-color, #858585); color: #fff; font: 700 calc(.68rem + var(--game-font-increase)) "Heroes III smalfont", serif; text-shadow: 0 1px 2px #000a; }
.battle-queue-round { display: grid; flex: 0 0 52px; width: 52px; height: calc(var(--battle-queue-art-height) + 19px); grid-template-rows: minmax(0, 1fr) 18px; align-items: center; justify-items: center; padding: 2px; border: 1px solid #b99e60; background: linear-gradient(#3f3523, #18140f); color: #f4dda0; box-shadow: 0 0 0 1px #1119, 0 2px 4px #0008; }
.battle-queue-round-number { align-self: end; font: 700 calc(1.25rem + var(--game-font-increase))/1 "Heroes III smalfont", serif; text-shadow: 0 1px 2px #000; }
.battle-queue-round-label { align-self: center; color: #dfca91; font: 700 calc(.65rem + var(--game-font-increase))/1 "Heroes III smalfont", serif; }
.battle-queue-item.is-active { background: linear-gradient(#75603a, #30281d); box-shadow: 0 0 0 2px #f3d88970, 0 0 14px #f3d88955; transform: translateY(-3px); }
.battle-queue-item.is-active::before { border-color: #ffe38a; }
.battle-queue-item.is-map-hovered:not(.is-active) { outline: 2px solid #34e1ef; outline-offset: 1px; box-shadow: 0 0 9px #34e1ef99; }
.battle-queue-item.is-waiting::before { border-style: dashed; }
.battle-unit-tooltip { position: absolute; z-index: 4; width: min(330px, calc(100% - 20px)); padding: 10px; border: 1px solid #d7bd7a; border-radius: 7px; background: linear-gradient(145deg, #2b2922f5, #111820f7); color: #f1e6ca; box-shadow: 0 10px 30px #000b, inset 0 1px #ffffff1a; pointer-events: none; }
.battle-unit-tooltip-main { display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 10px; align-items: start; }
.battle-unit-tooltip-portrait { display: grid; width: 88px; height: 82px; place-items: center; overflow: hidden; border: 1px solid #a89055; background: radial-gradient(circle at 50% 38%, #514633, #191a17); }
.battle-unit-tooltip-portrait img, .battle-unit-tooltip-portrait canvas { display: block; width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.battle-unit-tooltip-portrait img.battle-unit-tooltip-creature-portrait { width: auto; aspect-ratio: 58 / 64; object-fit: cover; object-position: left center; }
.battle-unit-tooltip-placeholder { color: #f1e6ca; font: 700 calc(2rem + var(--game-font-increase)) "Heroes III smalfont", serif; text-shadow: 0 2px 4px #000; }
.battle-unit-tooltip-details { min-width: 0; }
.battle-unit-tooltip-details h2 { overflow: hidden; margin: 0 0 6px; color: #ffe6a3; font: 700 calc(.93rem + var(--game-font-increase))/1.15 "Heroes III smalfont", serif; text-overflow: ellipsis; white-space: nowrap; }
.battle-unit-tooltip-stats { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 3px 8px; margin: 0; font-size: calc(.72rem + var(--game-font-increase)); line-height: 1.15; }
.battle-unit-tooltip-stats dt { color: #c9bb99; }
.battle-unit-tooltip-stats dd { margin: 0; color: #fff5dd; font-weight: 700; text-align: right; white-space: nowrap; }
.battle-unit-tooltip-stats dd.is-reduced { color: #ff7777; }
.battle-unit-tooltip-notes { min-height: 25px; margin-top: 8px; padding-top: 6px; border-top: 1px solid #ad935555; color: #e0c88f; font: 700 calc(.72rem + var(--game-font-increase))/1.25 "Heroes III smalfont", serif; }
.creature-hover-tooltip { position: fixed; z-index: 40; display: grid; width: min(420px, calc(100vw - 16px)); max-height: min(390px, calc(100vh - 16px)); gap: 7px; overflow: auto; padding: 8px; border: 1px solid var(--gold-edge); border-radius: 2px; background: linear-gradient(145deg, #302619f7, #15120df7); box-shadow: 0 0 0 2px var(--gold-shadow), 0 8px 24px #000b, inset 0 1px #ffffff1a; color: #f2e6c9; pointer-events: none; }
.creature-hover-tooltip-main { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px; align-items: stretch; }
.creature-hover-tooltip-portrait { display: grid; min-height: 132px; place-items: center; overflow: hidden; border: 1px solid #937849; background: radial-gradient(circle at 50% 38%, #514633, #191a17); }
.creature-hover-tooltip-portrait img { display: block; width: 100%; height: 100%; max-height: 158px; object-fit: contain; image-rendering: pixelated; }
.creature-hover-tooltip-placeholder { color: #f1e6ca; font: 700 calc(2rem + var(--game-font-increase)) "Heroes III smalfont", serif; text-shadow: 0 2px 4px #000; }
.creature-hover-tooltip-details { display: grid; min-width: 0; align-content: start; gap: 4px; }
.creature-hover-tooltip-details h2 { overflow: hidden; margin: 0; color: #ffe6a3; font: 700 calc(.9rem + var(--game-font-increase))/1.15 "Heroes III smalfont", serif; text-overflow: ellipsis; white-space: nowrap; }
.creature-hover-tooltip-stats { display: grid; gap: 2px; }
.creature-hover-tooltip-stat { display: grid; min-height: 23px; grid-template-columns: 24px minmax(0, 1fr) auto; gap: 5px; align-items: center; padding: 1px 5px; border: 1px solid #765e3e; background: linear-gradient(110deg, #392c1b, #221b13); font: 700 calc(.74rem + var(--game-font-increase))/1 "Heroes III smalfont", serif; }
.creature-hover-tooltip-stat > img { display: block; width: 22px; height: 22px; object-fit: contain; image-rendering: pixelated; }
.creature-hover-tooltip-icon { display: grid; width: 22px; height: 22px; place-items: center; color: #f2d995; font: 700 calc(1.1rem + var(--game-font-increase))/1 "Heroes III smalfont", serif; text-shadow: 0 1px 3px #000; }
.creature-hover-tooltip-icon.is-health { color: #f3cf46; font-size: calc(1.35rem + var(--game-font-increase)); }
.creature-hover-tooltip-icon.is-text { color: #e6cb83; }
.creature-hover-tooltip-stat-label { color: #eadbb8; }
.creature-hover-tooltip-stat-value { color: #fff5dd; font-size: calc(.82rem + var(--game-font-increase)); text-align: right; white-space: nowrap; }
.creature-hover-tooltip-abilities { padding-top: 5px; border-top: 1px solid #ad935577; color: #e8d29e; font: 400 calc(.68rem + var(--game-font-increase))/1.25 "Heroes III smalfont", serif; }
.creature-hover-tooltip-abilities > strong { display: block; margin-bottom: 3px; color: #ffe6a3; font-size: calc(.71rem + var(--game-font-increase)); }
.creature-hover-tooltip-abilities ul { display: grid; gap: 3px; margin: 0; padding: 0; list-style: none; }
.creature-hover-tooltip-abilities li { display: flex; flex-wrap: wrap; gap: 0 4px; }
.creature-hover-tooltip-abilities li > strong { color: #f5e7c2; }
.singleplayer-actions { display: grid; gap: 7px; }
#battle-canvas[data-cursor-mode="idle"] { cursor: crosshair; }
#battle-canvas[data-cursor-mode="pan"] { cursor: grab; }
#battle-canvas[data-cursor-mode="grabbing"] { cursor: grabbing; }
#battle-canvas[data-cursor-mode="move"] { cursor: move; }
#battle-canvas[data-cursor-mode="target"] { cursor: pointer; }
#battle-canvas[data-cursor-mode="split"] { cursor: copy; }
#battle-canvas[data-cursor-mode="invalid"] { cursor: not-allowed; }
.battle-result, .battle-waiting { position: absolute; z-index: 5; inset: 0; display: grid; place-items: center; padding: 20px; background: #081017b8; backdrop-filter: blur(5px); }
.battle-waiting { width: min(440px, 100%); padding: 24px; border: 1px solid #c7ac6e; border-radius: 12px; background: linear-gradient(145deg, #293642, #151e26); box-shadow: 0 18px 50px #000b; text-align: center; }
.battle-waiting { position: absolute; inset: 0; width: auto; gap: 6px; align-content: center; color: #eef3f8; }
.battle-waiting span { color: #bdc8d4; font-size: calc(.84rem + var(--game-font-increase)); }
.reconnect-overlay { position: absolute; z-index: 10; inset: 0; display: grid; align-content: center; justify-items: center; gap: 8px; padding: 24px; background: #101720bd; color: #edf2f8; text-align: center; backdrop-filter: blur(4px); }
.reconnect-overlay strong { font-size: calc(1.15rem + var(--game-font-increase)); }
.reconnect-overlay span { color: var(--muted); font-size: calc(0.86rem + var(--game-font-increase)); }
.toast-region { position: fixed; z-index: 20; left: 50%; bottom: 24px; width: max-content; max-width: min(620px, calc(100vw - 36px)); padding: 10px 15px; border: 1px solid #ac8d59; border-radius: 8px; background: #1b232eF2; color: #f3ead5; box-shadow: 0 6px 26px #0008; font-size: calc(0.86rem + var(--game-font-increase)); line-height: 1.35; text-align: center; opacity: 0; transform: translate(-50%, 10px); transition: opacity 140ms ease, transform 140ms ease; pointer-events: none; }
.toast-region.is-visible { opacity: 1; transform: translate(-50%, 0); }

.army-modal { width: min(640px, calc(100% - 24px)); max-height: min(85vh, 760px); overflow: auto; padding: 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); color: #e8edf4; box-shadow: 0 18px 60px #000b; }
.army-modal::backdrop { background: #05090dcc; }
.army-modal[open] { display: grid; gap: 13px; }
.army-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.army-modal-header .eyebrow { margin-bottom: 3px; }
.transfer-selectors, .transfer-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: end; }
.transfer-controls { grid-template-columns: 1fr 1fr auto; }
.army-stack-list { display: grid; gap: 6px; max-height: 30vh; overflow: auto; }
.army-stack-choice { display: flex; justify-content: space-between; gap: 12px; min-height: 36px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 6px; background: #1b232d; color: #e8edf4; text-align: left; }
.army-stack-choice[aria-pressed="true"] { border-color: var(--accent); background: #2d4158; }
#transfer-status { min-height: 1.3em; margin: 0; }
.neutral-loot-modal { width: min(470px, calc(100% - 32px)); max-height: calc(100dvh - 32px); overflow: auto; padding: 22px; border: 1px solid var(--gold-edge); border-radius: 2px; background: #302519 var(--ui-blue) center / 576px 355px repeat; color: #f5ecd7; box-shadow: 0 0 0 2px var(--gold-shadow), 0 18px 50px #000b; }
.neutral-loot-modal::backdrop { background: #05090dbb; }
.neutral-loot-modal h2 { margin: 0 0 20px; text-align: center; color: #f2dfae; }
.unit-upgrade-list { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.unit-upgrade-pair { display: grid; width: min(100%, 290px); grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 10px; text-align: center; }
.unit-upgrade-unit { display: grid; min-width: 0; justify-items: center; gap: 6px; margin: 0; }
.unit-upgrade-portrait { width: min(100%, 116px); aspect-ratio: 58 / 64; border: 1px solid var(--gold-edge); border-radius: 1px; box-shadow: 0 0 0 1px var(--gold-shadow); overflow: hidden; }
.unit-upgrade-portrait img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: left center; image-rendering: pixelated; }
.unit-upgrade-unit figcaption { overflow-wrap: anywhere; }
.unit-upgrade-arrow { align-self: center; font-size: 1.4em; }
.unit-upgrade-upkeep { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px; }
.unit-upgrade-upkeep img { width: 24px; height: 24px; object-fit: contain; }
.unit-upgrade-actions { display: flex; justify-content: center; gap: 12px; margin-top: 20px; }
.neutral-loot-choices { display: grid; grid-template-columns: 1fr 2fr; gap: 14px; padding: 2px; }
.neutral-loot-choice { display: grid; min-width: 0; align-content: center; justify-items: center; gap: 14px 8px; padding: 18px 10px; border: 1px solid var(--gold-edge); border-radius: 1px; background: #302d27 var(--ui-blue) center / 300px repeat; color: #f5ecd7; box-shadow: 0 0 0 1px var(--gold-shadow); cursor: pointer; }
.neutral-loot-resources { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.neutral-loot-resource { display: grid; width: 48px; justify-items: center; gap: 6px; }
.neutral-loot-resource img { width: 40px; height: 40px; object-fit: contain; }
.neutral-loot-resource strong { font-size: calc(1.05rem + var(--game-font-increase)); line-height: 1; }
.neutral-loot-choice:not(:disabled):hover, .neutral-loot-choice:focus-visible { outline: 2px solid #fff0a6; outline-offset: 2px; }
.neutral-loot-choice:disabled { opacity: .45; cursor: default; }
@media (max-width: 400px) { .neutral-loot-modal { padding: 16px; } .neutral-loot-choices { grid-template-columns: 1fr 2fr; gap: 10px; } .neutral-loot-choice { padding: 14px 6px; gap: 12px 2px; } .neutral-loot-resource { width: 36px; } .neutral-loot-resource img { width: 32px; height: 32px; } }

.necromancy-reward-modal { width: min(820px, calc(100% - 24px)); max-height: min(90vh, 780px); overflow: auto; margin: auto; padding: 18px; border: 1px solid var(--gold-edge); border-radius: 2px; background: var(--ui-gray) center / 258px 258px repeat; color: #edf2f8; box-shadow: 0 0 0 2px var(--gold-shadow), 0 18px 60px #000b; }
.necromancy-reward-modal::backdrop { background: #05090dcc; }
.necromancy-reward-modal[open] { display: grid; gap: 15px; }
.necromancy-reward-header { justify-items: center; display: grid; gap: 5px; text-align: center; }
.necromancy-reward-header > * { margin: 0; }
.necromancy-reward-title { width: 80px; height: 80px; object-fit: contain; image-rendering: pixelated; color: #f2dfae; font-size: calc(clamp(1.3rem, 3vw, 1.8rem) + var(--game-font-increase)); }
.necromancy-reward-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(125px, 1fr)); gap: 8px; padding: 0; }
.necromancy-reward-option { display: grid; min-width: 0; justify-items: center; gap: 6px; padding: 10px 7px; border: 1px solid #8d7445; border-radius: 2px; background: var(--ui-gray) center / 258px 258px repeat; box-shadow: 0 0 0 1px var(--gold-shadow); color: #f2e2bf; text-align: center; }
.necromancy-reward-option[disabled] { cursor: not-allowed; opacity: .42; }
.necromancy-reward-option:not([disabled]) { cursor: grab; }
.necromancy-reward-option:not([disabled]):active { cursor: grabbing; }
.necromancy-reward-portrait { width: 100px; height: 120px; object-fit: contain; image-rendering: pixelated; }
.necromancy-reward-name { font-size: calc(.86rem + var(--game-font-increase)); }
.necromancy-reward-count { color: #f1d990; font-size: calc(.78rem + var(--game-font-increase)); font-variant-numeric: tabular-nums; }
.necromancy-reward-army { display: grid; gap: 7px; }
.necromancy-reward-army .hero-unit-slots { width: 100%; max-width: 560px; margin: auto; }
.necromancy-reward-actions { display: flex; justify-content: space-between; gap: 10px; }
.necromancy-reward-actions > * { min-height: 40px; padding: 8px 14px; }
.necromancy-reward-accept { border-color: #d5b66d; background: #3a4c34; color: #fff0ca; font-weight: 700; }
.necromancy-reward-accept:disabled, .necromancy-reward-actions button:disabled { cursor: not-allowed; opacity: .55; }
@media (max-width: 700px) {
  .match-screen { --world-panel-edge-inset: 10px; --world-roster-width: min(180px, calc(100vw - 20px)); --world-hud-left: calc(var(--world-roster-width) + 20px); }
  main { width: min(100% - 24px, 600px); margin-top: 12px; }
  .lobby-layout, .auth-columns { grid-template-columns: minmax(0, 1fr); }
  .world-roster { inset: 54px auto auto var(--world-panel-edge-inset); max-height: calc(100dvh - max(82px, min(25vw, 120px)) - 84px); padding: 10px; }
  .roster-header { gap: 7px; }
  .map-minimap { left: 10px; bottom: 10px; width: min(184px, 38vw); height: min(120px, 25vw); min-height: 82px; }
  .match-resource-topbar { gap: 6px; padding: 3px 6px; }
  .match-resource-topbar-meta { gap: 6px; font-size: calc(.7rem + var(--game-font-increase)); }
  .match-system-time { min-width: 4.8em; }
  .shared-resource-bar { gap: 6px; }
  .shared-resource-icon { width: 22px; height: 22px; }
  .info-window { right: 10px; bottom: calc(max(82px, min(25vw, 120px)) + 20px); width: min(360px, calc(100vw - 20px)); padding: 11px 12px; }
  .inspector-panel { padding: 68px 16px 16px; }
  .transfer-controls { grid-template-columns: 1fr 1fr; }
  .transfer-controls button { grid-column: 1 / -1; }
  .battle-footer { grid-template-columns: minmax(175px, 43vw) minmax(0, 1fr); gap: 5px; min-height: 112px; padding: 7px 7px max(7px, env(safe-area-inset-bottom)); }
  .battle-actions { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
  .battle-actions button { min-height: 29px; font-size: calc(.62rem + var(--game-font-increase)); }
  .battle-actions label { font-size: calc(.52rem + var(--game-font-increase)); }
  .battle-actions input, .battle-actions select { min-height: 29px; padding-inline: 3px; font-size: calc(.61rem + var(--game-font-increase)); }
  .battle-queue { --battle-queue-art-size: 42px; min-height: 74px; gap: 2px; }
  .battle-unit-tooltip { padding: 8px; }
}

@media (max-width: 310px) {
  .town-queue-secondary-row, .town-queue-following { gap: 2px; }
  .town-queue-trash { width: 22px; height: 22px; }
  .town-queue-trash svg { width: 15px; height: 15px; }
}

@media (max-height: 700px) {
  .battle-footer { min-height: 94px; gap: 6px; padding-top: 6px; padding-bottom: max(6px, env(safe-area-inset-bottom)); }
  .battle-queue { --battle-queue-art-size: 44px; min-height: 70px; padding-bottom: 2px; }
  .battle-actions { gap: 3px; }
  .battle-actions button, .battle-actions input, .battle-actions select { min-height: 27px; }
}
@media (max-width: 830px) {
  .match-screen.has-inspector-open .info-window { opacity: 0; visibility: hidden; }
}
@media (prefers-reduced-motion: reduce) {
  .inspector-panel, .info-window, .toast-region { transition: none; }
}

body {
  background: #0a1020 var(--ui-blue) center / 258px 258px repeat;
  color: #f5ecd7;
  font-family: "Heroes III smalfont", serif;
}
body.in-match { background: #1b120b var(--ui-blue) center / 576px 355px repeat; }
h1, h2, h3 { color: #f2dfae; font-family: "Heroes III smalfont", serif; text-shadow: 0 2px 2px #000b; }
h1 { letter-spacing: .02em; }
h2 { letter-spacing: .01em; }
.eyebrow { color: #e7ce8c; text-shadow: 0 1px 2px #000; }
.muted, .privacy-note { color: #d0c5aa; }
main { width: min(1160px, calc(100% - 40px)); margin: 26px auto 20px; }
.topbar {
  min-height: 78px;
  padding: 12px clamp(18px, 5vw, 68px);
  border-bottom: 2px solid var(--gold-shadow);
  background-image: var(--ui-blue);
  background-size: cover;
  background-position: center;
  box-shadow: 0 2px 0 var(--gold-edge), 0 8px 24px #0008;
}
.panel, .form-card, .saved-game-prompt, .connection-card,
  .world-roster, .info-window, .inspector-panel,
.army-modal, .split-stack-modal, .battle-result-card, .battle-waiting,
.reconnect-overlay, .town-queue-row, .army-stack-choice, .tile-tooltip {
  border: 1px solid var(--gold-edge);
  border-radius: 2px;
  background-color: #1b1a18;
  background-image: var(--ui-blue);
  background-size: cover;
  box-shadow: 0 0 0 2px var(--gold-shadow), 0 8px 22px #0009, inset 0 0 0 1px #fff2;
}
body:not(.in-match) .panel, body:not(.in-match) .form-card,
body:not(.in-match) .saved-game-prompt, body:not(.in-match) .connection-card {
  background-image: var(--ui-blue);
}
.lobby-layout { grid-template-columns: minmax(0, 1.55fr) minmax(250px, .72fr); align-items: center; gap: 30px; min-height: calc(100dvh - 138px); }
.lobby-panel { padding: clamp(22px, 4vw, 40px); }
.lobby-panel > .muted { max-width: 600px; margin-bottom: 24px; }
.lobby-menu, .lobby-setup-panel { display: grid; gap: 14px; }
.lobby-menu h2 { margin-bottom: 2px; font-size: calc(clamp(1.45rem, 3vw, 2rem) + var(--game-font-increase)); }
.lobby-menu .muted { max-width: 580px; margin: 0 0 8px; }
.lobby-menu-actions { display: grid; max-width: 410px; gap: 13px; margin: 6px 0 10px 3px; }
.lobby-menu-button { min-height: 52px; padding: 11px 18px; font-size: calc(1.04rem + var(--game-font-increase)); letter-spacing: .04em; text-align: left; }
.lobby-setup-header { display: flex; align-items: center; gap: 18px; margin-bottom: 4px; }
.lobby-setup-header > div { display: grid; gap: 2px; }
.lobby-setup-header .eyebrow { margin: 0; }
.lobby-setup-header h2 { font-size: calc(1.45rem + var(--game-font-increase)); }
.lobby-setup-header button { min-width: 76px; }
.form-card { gap: 14px; padding: 18px; }
.form-card h3 { margin-bottom: 3px; }
.form-card .muted { margin: -6px 0 2px; }
.singleplayer-form { max-width: 520px; margin: 0; }
.privacy-note { margin: 0; max-width: 660px; font-size: calc(.74rem + var(--game-font-increase)); line-height: 1.45; }
.connection-card { padding: 24px; }
.connection-card h2 { margin-bottom: 8px; }
.connection-card .privacy-note { margin-top: 16px; }
.saved-game-prompt { margin: 12px 0 0; padding: 14px; }
.saved-game-prompt .muted { margin: 0; }
.clear-saves-button { margin-top: 8px; }

button, button.secondary, input, select {
  min-height: 39px;
  padding: 8px 13px;
  border: 1px solid var(--gold-edge);
  border-radius: 1px;
  background-color: #1b2637;
  background-image: var(--control-texture, var(--ui-blue));
  background-size: 258px 258px;
  background-position: center, var(--texture-position, 50% 50%);
  color: #fff5dc;
  font: 700 calc(.88rem + var(--game-font-increase)) "Heroes III smalfont", serif;
  text-shadow: 0 1px 2px #000;
  box-shadow: 0 0 0 1px var(--gold-shadow), 0 2px 0 var(--gold-shadow), inset 0 0 0 1px #2e210e;
}
body.in-match button, body.in-match button.secondary, body.in-match input, body.in-match select { --control-texture: var(--ui-blue); }
button:not(.research-node.is-complete):hover:not(:disabled), button.secondary:hover:not(:disabled) { filter: brightness(1.16); transform: translateY(-1px); }
button:active:not(:disabled), button[aria-pressed="true"] { filter: brightness(1.2); transform: translateY(1px); box-shadow: 0 0 0 1px var(--gold-shadow), inset 0 0 0 2px #f4dfa5aa; }
button:disabled { cursor: not-allowed; opacity: .72; filter: saturate(.55); }
input, select { font-family: "Heroes III smalfont", serif; }
input:focus-visible, select:focus-visible, button:focus-visible, canvas:focus-visible { outline: 2px solid #fff0b1; outline-offset: 3px; }
input[type="range"] { accent-color: #e7ce8c; }
label { color: #f2e2bf; }
footer:not(.battle-footer) { color: #cbbf9f; }

.settings-modal {
  border: 1px solid var(--gold-edge);
  border-radius: 2px;
  background-color: #101a31;
  background-image: var(--ui-blue);
  background-size: cover;
  box-shadow: 0 0 0 2px var(--gold-shadow), 0 18px 60px #000c;
  color: #f5ecd7;
}
.settings-modal-header h2, .settings-modal output { color: #f2dfae; }
.settings-modal::backdrop, .army-modal::backdrop, .split-stack-modal::backdrop { background: #060910d9; }
.settings-modal .muted { color: #d0c5aa; }
.army-modal, .split-stack-modal { color: #f5ecd7; }
.inspector-panel, .info-window,
.world-roster, .reconnect-overlay, .toast-region {
  border-color: var(--gold-edge);
  border-radius: 2px;
  background-color: #1a1712;
  background-image: var(--ui-blue);
  background-size: cover;
  box-shadow: 0 0 0 1px var(--gold-shadow), 0 6px 24px #0009;
}
.inspector-panel { border-left: 1px solid var(--gold-edge); }
.inspector-header, .economy-controls, .production-option-section { border-color: #e7ce8c55; }
.town-queue-row { background-image: var(--ui-blue); }
.town-queue-row.is-current-order { border-color: var(--gold-edge); box-shadow: 0 0 0 1px var(--gold-shadow), inset 0 0 0 1px #f6e4ac66; }
.town-queue-slot { border-color: var(--gold-edge); background-image: var(--ui-blue); box-shadow: 0 0 0 1px var(--gold-shadow); }
.town-queue-slot.is-empty { border-color: var(--gold-edge); background-image: var(--ui-blue); }
.town-queue-trash { border-color: var(--gold-edge); background-image: var(--ui-blue); color: #fff0c4; }
.town-queue-trash.is-drop-target { background-image: var(--ui-blue); }
.production-option-button { border: 1px solid var(--gold-edge); background-image: var(--ui-blue); background-size: 258px 258px; }
.production-option-button { border-radius: 2px; }
.production-option-button:hover:not(:disabled) { border-color: #fff0b1; background-image: var(--ui-blue); }
.production-option-copy strong, .economy-controls h3 { color: #f2dfae; }
.map-viewport { background: #26180d var(--ui-blue) center / 576px 355px repeat; }
.map-minimap { border: 1px solid var(--gold-edge); box-shadow: 0 0 0 2px var(--gold-shadow), 0 6px 20px #0009; }
.info-window { color: #f5ecd7; }
.army-stack-choice { color: #f5ecd7; text-align: left; }
.army-stack-choice[aria-pressed="true"] { border-color: var(--gold-edge); background-image: var(--ui-blue); }
.transfer-selectors, .transfer-controls { color: #f2e2bf; }
.toast-region { color: #fff5dc; }

.battle-screen { --battle-footer-height: clamp(104px, 10.25vw, 148px); background: #5b5944; }
.battle-siege-support { position: absolute; z-index: 3; top: 12px; left: 50%; padding: 6px 10px; border: 1px solid #ceb77d95; background: #111820d9; color: #f2dfae; font: 700 calc(.72rem + var(--game-font-increase)) "Heroes III smalfont", serif; text-shadow: 0 1px 2px #000; transform: translateX(-50%); }
.match-screen { background: #21140c var(--ui-blue) center / 576px 355px repeat; }
#battle-canvas { inset: 0 0 var(--battle-footer-height) 0; height: calc(100% - var(--battle-footer-height)); }
.battle-actions {
  position: absolute;
  z-index: 4;
  right: 12px;
  bottom: calc(var(--battle-footer-height) + 10px);
  display: flex;
  width: auto;
  min-width: 0;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex-wrap: wrap;
  max-width: calc(100% - 24px);
  padding: 0;
}
.battle-actions button { min-height: 34px; padding: 5px 9px; border-radius: 1px; font-size: calc(.7rem + var(--game-font-increase)); }
.battle-actions label { display: grid; min-width: 75px; gap: 2px; color: #f0dfb7; font: 700 calc(.57rem + var(--game-font-increase))/1 "Heroes III smalfont", serif; text-transform: uppercase; }
.battle-actions input, .battle-actions select { min-height: 34px; padding: 4px 6px; font-size: calc(.68rem + var(--game-font-increase)); }
.battle-footer {
  inset: auto 0 0;
  display: grid;
  width: 100%;
  height: var(--battle-footer-height);
  min-height: 0;
  grid-template-columns: 12.5% minmax(0, 1fr) 12.5%;
  grid-template-rows: minmax(0, 2.1fr) minmax(0, 1fr);
  align-items: stretch;
  gap: 0;
  padding: 0;
  border: 0;
  background: url("/assets/ui/battle/queue-frame.webp") center / 100% 100% no-repeat;
  box-shadow: none;
  backdrop-filter: none;
}
.battle-quick-actions, .battle-end-actions {
  display: grid;
  min-width: 0;
  min-height: 0;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: repeat(2, minmax(0, 1fr));
  align-items: center;
  justify-items: center;
  gap: 0;
  padding: 2px;
}
.battle-quick-actions { grid-column: 1; grid-row: 1 / span 2; }
.battle-queue { grid-column: 2; grid-row: 1; min-height: 0; justify-content: flex-start; gap: 3px; padding: 4px 8px; scrollbar-color: #e7ce8c #2a1b0d; }
.battle-end-actions { grid-column: 3; grid-row: 1 / span 2; }
.battle-icon-button {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  transform: none;
}
.battle-icon-button::before {
  position: absolute;
  inset: 7.5%;
  background-image: var(--battle-icon-image);
  background-repeat: no-repeat;
  background-size: 300% 100%;
  content: "";
  pointer-events: none;
}
.battle-icon-button:hover:not(:disabled) { filter: none; transform: none; }
.battle-icon-button:active:not(:disabled), .battle-icon-button[aria-pressed="true"] { filter: none; transform: none; box-shadow: none; }
.battle-icon-button:active:not(:disabled)::before, .battle-icon-button[aria-pressed="true"]::before { background-position: 50% 0; }
.battle-icon-button:disabled { opacity: 1; filter: none; }
.battle-icon-button:disabled::before { background-position: 100% 0; }
.battle-wait-button { --battle-icon-image: url("/assets/ui/battle/wait.webp"); }
.battle-defend-button { --battle-icon-image: url("/assets/ui/battle/defend.webp"); }
.battle-surrender-button { --battle-icon-image: url("/assets/ui/battle/surrender.webp"); }
.battle-retreat-button { --battle-icon-image: url("/assets/ui/battle/retreat.webp"); }
.battle-icon-button:focus-visible { outline: 2px solid #fff0b1; outline-offset: 1px; }
.battle-empty-slot { width: 100%; height: 100%; }
.battle-event {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  min-width: 0;
  align-items: center;
  overflow: hidden;
  min-height: 0;
  padding: 2px 12px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #f5ecd7;
  font: 700 calc(.74rem + var(--game-font-increase)) "Heroes III smalfont", serif;
  text-overflow: ellipsis;
  text-shadow: 0 1px 2px #000;
  text-align: left;
  white-space: nowrap;
}
button.battle-event:hover:not(:disabled) { background: #fff0b111; }
.battle-event:focus-visible { outline: 2px solid #fff0b1; outline-offset: -3px; }
.battle-queue-item { border: 0; border-radius: 1px; background: var(--ui-blue) center / cover; box-shadow: 0 0 0 1px var(--gold-shadow), 0 2px 5px #0009; }
.battle-queue-item::before { border-color: var(--gold-edge); }
.battle-queue-portrait { border-color: var(--gold-edge); }
.battle-queue-item.is-active { background: var(--ui-blue) center / cover; box-shadow: 0 0 0 2px var(--gold-shadow), 0 0 14px #f3d88966; }
.battle-queue-item.is-active::before { border-color: #fff0b1; }
.battle-result { background-image: var(--ui-blue); background-size: 258px 258px; backdrop-filter: none; }
.battle-log-modal { width: min(780px, calc(100vw - 28px)); height: min(74dvh, 760px); max-height: calc(100dvh - 28px); margin: auto; overflow: hidden; padding: 18px; border: 1px solid var(--gold-edge); border-radius: 2px; background: var(--ui-blue) center / 576px 355px; color: #f5ecd7; box-shadow: 0 0 0 2px var(--gold-shadow), 0 18px 60px #000c; }
.battle-log-modal[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 14px; }
.battle-log-modal::backdrop { background: #060910dc; }
.battle-log-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.battle-log-modal-header h2 { margin: 0; color: #f2dfae; }
.battle-log-help { margin: 4px 0 0; color: #e2d4b7; font-size: calc(.72rem + var(--game-font-increase)); }
.battle-log-content { min-width: 0; min-height: 0; overflow: hidden; }
.battle-log-empty { margin: 0; padding: 18px 12px; color: #d0c5aa; text-align: center; }
.battle-log-scroll { width: 100%; height: 100%; min-height: 0; overflow: auto; padding: 2px 6px 2px 2px; overscroll-behavior: contain; scrollbar-color: #b8944c #1a130e; }
.battle-log-entries { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.battle-log-entry { padding: 9px 11px; border: 1px solid #e7ce8c66; background: #1a0e0780; }
.battle-log-entry-header { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.battle-log-entry-header h3 { color: #f2dfae; font-size: calc(.9rem + var(--game-font-increase)); }
.battle-log-sequence { flex: none; color: #d0c5aa; font-size: calc(.68rem + var(--game-font-increase)); font-variant-numeric: tabular-nums; }
.battle-log-details { display: grid; gap: 3px; margin: 6px 0 0; padding-left: 18px; color: #f5ecd7; font-size: calc(.76rem + var(--game-font-increase)); line-height: 1.4; }
.battle-log-entry.is-gap { border-color: #c48752; background: #3a2117b3; }
.battle-log-entry.is-gap .battle-log-entry-header h3 { color: #ffc38b; }
.battle-result-card { width: min(960px, 100%); max-height: calc(100dvh - 40px); overflow-y: auto; padding: 24px; border-color: var(--gold-edge); border-radius: 2px; background-image: var(--ui-blue); background-size: 258px 258px; box-shadow: 0 0 0 2px var(--gold-shadow), 0 18px 50px #000b; text-align: center; }
.battle-result-card > h2 { margin: 2px 0 22px; color: #f2dfae; font-size: calc(clamp(1.8rem, 4vw, 2.6rem) + var(--game-font-increase)); text-align: center; }
.battle-result-section-title { margin: 0 0 14px; color: #f2dfae; font-size: calc(clamp(1.25rem, 3vw, 1.8rem) + var(--game-font-increase)); text-align: center; }
.battle-result-sides { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; margin-bottom: 18px; }
.battle-result-side { min-width: 0; padding: 8px; border: 1px solid var(--gold-edge); border-radius: 2px; box-shadow: 0 0 0 1px var(--gold-shadow); background: #1a0e0780; }
.battle-result-side-header { display: flex; min-height: 56px; align-items: center; justify-content: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid #e7ce8c55; }
.battle-result-avatar { width: 56px; height: 56px; flex: none; object-fit: contain; image-rendering: pixelated; }
.battle-result-side-header h3 { margin: 0; color: #f2dfae; font-size: calc(1.35rem + var(--game-font-increase)); }
.battle-result-side-header p { margin: 3px 0 0; color: #d0c5aa; font-size: calc(.85rem + var(--game-font-increase)); }
.battle-casualties { display: flex; min-height: 94px; flex-wrap: wrap; justify-content: center; gap: 8px 12px; padding: 8px 4px 2px; }
.battle-casualty { display: grid; width: 72px; justify-items: center; gap: 3px; color: #f2e2bf; text-align: center; }
.battle-casualty img { width: 58px; height: 64px; aspect-ratio: 58 / 64; object-fit: cover; object-position: left center; image-rendering: pixelated; }
.battle-casualty strong { font: 700 calc(1.05rem + var(--game-font-increase)) "Heroes III smalfont", serif; }
.battle-no-casualties { align-self: center; margin: 0; color: #d0c5aa; font-size: calc(.88rem + var(--game-font-increase)); }
.battle-result-decisions { display: flex; justify-content: space-between; align-items: stretch; gap: 16px; }
.battle-result-decision { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 130px; border: 1px solid var(--gold-edge); border-radius: 2px; box-shadow: 0 0 0 2px var(--gold-shadow); background-image: var(--ui-blue); background-size: 576px 355px; color: #f2dfae; }
.battle-result-decision:last-child { margin-left: auto; }
.battle-result-decision img { width: 48px; height: 48px; object-fit: contain; }
.battle-result-check { height: 48px; font: bold calc(48px + var(--game-font-increase))/1 "Heroes III smalfont", serif; color: #f4dc87; }
.battle-waiting { border-color: var(--gold-edge); border-radius: 2px; background-image: var(--ui-blue); background-size: cover; box-shadow: 0 0 0 2px var(--gold-shadow), 0 18px 50px #000b; }
.battle-waiting span { color: #d0c5aa; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; clip-path: inset(50%); }
input[type="range"] { min-height: 22px; padding: 0; border: 0; background: transparent; background-image: none; box-shadow: none; accent-color: #e7ce8c; }

.lobby-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: center;
  align-items: center;
  min-height: 100dvh;
  padding: 24px;
}
.lobby-panel {
  display: grid;
  gap: 24px;
  width: min(410px, 100%);
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.lobby-menu { gap: 0; }
.lobby-menu-actions {
  display: grid;
  width: 100%;
  max-width: none;
  gap: 14px;
  margin: 0;
}
.lobby-menu-button { min-height: 56px; text-align: center; }
#lobby-menu .lobby-menu-button,
#lobby-recovery button {
  --control-texture: var(--ui-blue);
  --texture-position: 43% 57%;
}
.lobby-recovery {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding-top: 15px;
  border-top: 1px solid #e7ce8c66;
}
.saved-game-prompt { margin: 0; padding: 0; border: 0; background: none; box-shadow: none; }
.saved-game-actions { justify-content: center; }
.clear-saves-button { margin: 0; }
.lobby-setup-panel { gap: 18px; }
.lobby-setup-header > div { display: block; }
.lobby-setup-header h2 { margin: 0; }
.form-card { width: min(100%, 440px); }
.form-card .muted { display: none; }

@media (max-width: 950px) {
  .battle-actions { right: 8px; }
}
@media (max-width: 700px) {
  main { width: min(100% - 24px, 600px); margin-top: 12px; }
  .lobby-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-block: 12px; }
  .lobby-panel, .connection-card { padding: 18px; }
  .lobby-menu-actions { max-width: none; gap: 10px; }
  .lobby-menu-button { min-height: 46px; }
  .battle-actions { right: 8px; gap: 4px; }
  .battle-actions button { min-height: 27px; padding: 3px 5px; font-size: calc(.59rem + var(--game-font-increase)); }
  .battle-actions label { min-width: 54px; font-size: calc(.49rem + var(--game-font-increase)); }
  .battle-actions input, .battle-actions select { min-height: 27px; padding: 3px; font-size: calc(.58rem + var(--game-font-increase)); }
  .battle-screen { --battle-footer-height: 84px; }
  .battle-footer { grid-template-columns: 12.5% minmax(0, 1fr) 12.5%; }
  .battle-quick-actions, .battle-end-actions { padding: 1px; }
  .battle-event { padding-inline: 7px; font-size: calc(.62rem + var(--game-font-increase)); }
  .battle-log-modal { width: calc(100vw - 16px); height: min(78dvh, 720px); padding: 12px; }
  .battle-log-modal[open] { gap: 9px; }
  .battle-log-entry { padding: 8px; }
  .battle-log-details { font-size: calc(.7rem + var(--game-font-increase)); }
  .battle-queue { --battle-queue-art-size: 38px; justify-content: flex-start; min-height: 0; padding: 3px; gap: 2px; }
  .battle-result-sides { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .battle-result-card { padding: 16px; }
}
@media (max-height: 700px) {
  .battle-screen { --battle-footer-height: 84px; }
  .battle-queue { --battle-queue-art-size: 46px; }
  .battle-actions { gap: 4px; }
}
@media (prefers-reduced-motion: reduce) {
  button { transition: none; }
}

.entity-entry, .player-row {
  border: 1px solid var(--gold-edge);
  border-radius: 1px;
  background-image: var(--ui-blue);
  background-size: cover;
  color: #f5ecd7;
}
.entity-entry[aria-pressed="true"], .player-row.active {
  border-color: #fff0b1;
  background-image: var(--ui-blue);
  box-shadow: 0 0 0 1px var(--gold-shadow), inset 0 0 0 1px #f6e4ac66;
}
.entity-icon { border-color: var(--gold-edge); border-radius: 1px; background: #2c2114 var(--ui-blue) center / 100px; }
.info-window-metric { border-color: #e7ce8c55; border-radius: 1px; background: #22180e99 var(--ui-blue) center / 180px; }
.hero-settle-town {
  border: 1px solid var(--gold-edge);
  border-radius: 1px;
  background-image: var(--ui-blue);
  background-size: 258px 258px;
  box-shadow: 0 0 0 1px var(--gold-shadow), 0 2px 0 var(--gold-shadow);
  color: #fff5dc;
}
.hero-cancel-movement { border-color: var(--gold-edge); border-radius: 1px; background-image: var(--ui-blue); background-size: 258px 258px; box-shadow: 0 0 0 1px var(--gold-shadow); color: #fff5dc; }
.battle-actions button:hover:not(:disabled) {
  border-color: #fff0b1;
  background-image: var(--ui-blue);
  background-size: 258px 258px;
}

body:not(.in-match) main { width: 100%; margin: 0; }
.lobby-panel { padding: 0; }
.lobby-menu-actions { gap: 14px; }
.lobby-menu-button { min-height: 56px; }

.research-strip { display: grid; flex: none; gap: 7px; padding-bottom: 10px; border-bottom: 1px solid #ffffff20; }
.research-progress-button { display: grid; width: 100%; min-height: 67px; grid-template-columns: 42px minmax(0, 1fr); align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--gold-edge); border-radius: 2px; background: var(--ui-blue) center / 258px 258px repeat; box-shadow: 0 0 0 1px var(--gold-shadow); color: #f2ead8; text-align: left; }
.research-progress-button:hover:not(:disabled) { border-color: #fff0b1; background-image: var(--ui-blue); }
#magic-progress { background-image: var(--ui-blue); }
#magic-progress:hover:not(:disabled) { background-image: var(--ui-blue); }
.research-progress-left { display: grid; justify-items: center; gap: 3px; }
.research-progress-icon-slot { position: relative; display: grid; width: 40px; height: 40px; padding: 4px; place-items: center; border: 1px solid var(--gold-edge); border-radius: 50%; background: #161b1cbb; }
.research-progress-icon-slot > img { width: 30px; height: 30px; object-fit: contain; }
.research-progress-icon-slot > .research-progress-stat-bonus { position: absolute; top: -4px; right: -4px; width: 19px; height: 19px; padding: 2px; border: 1px solid var(--gold-edge); border-radius: 50%; background: var(--ui-blue) center / 340px 212px repeat; }
.research-progress-copy { display: grid; min-width: 0; align-content: center; gap: 2px; }
.research-progress-name { display: block; overflow: hidden; color: #fff4d6; font-size: calc(.76rem + var(--game-font-increase)); font-weight: 750; line-height: 1.15; text-overflow: ellipsis; white-space: nowrap; }
.research-progress-detail { display: block; overflow: hidden; color: #e1d4ba; font-size: calc(.57rem + var(--game-font-increase)); font-variant-numeric: tabular-nums; text-overflow: ellipsis; white-space: nowrap; }
.research-progress-button:focus-visible { outline: 2px solid #fff0b1; outline-offset: 2px; }
.research-modal { width: min(1080px, calc(100vw - 28px)); height: 70dvh; max-height: 70dvh; margin: auto; overflow: hidden; padding: 18px; border: 1px solid var(--gold-edge); border-radius: 2px; background: linear-gradient(#ffffff24, #ffffff24), var(--ui-gray) center / 258px 258px repeat; color: #f5ecd7; box-shadow: 0 0 0 2px var(--gold-shadow), 0 18px 60px #000c; }
.research-modal[open] { display: grid; grid-template-rows: auto minmax(0, 1fr); gap: 14px; }
.research-modal::backdrop { background: #060910dc; }
.research-modal-header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.research-modal-header h2 { margin: 0; }
.research-queue-help { margin: 4px 0 0; color: #e2d4b7; font-size: calc(.72rem + var(--game-font-increase)); }
.research-nodes { min-width: 0; min-height: 0; overflow: auto; padding: 6px; }
.research-tree-stage { position: relative; display: grid; grid-template-columns: repeat(var(--research-columns), 340px); grid-template-rows: repeat(var(--research-rows), 82px); column-gap: 64px; row-gap: 10px; padding: 0; background: linear-gradient(#ffffff24, #ffffff24), var(--ui-gray) center / 258px 258px repeat; }
.research-tree-lines { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.research-tree-lines path { fill: none; stroke: #c9d5d6; stroke-width: 2.5; opacity: .8; }
.research-node { position: relative; z-index: 1; display: block; min-width: 0; min-height: 0; padding: 0; border: 1px solid var(--gold-edge); border-radius: 14px 2px 2px 14px; background: linear-gradient(#ffffff24, #ffffff24), var(--ui-gray) center / 340px 212px repeat; color: #f5ecd7; text-align: left; white-space: normal; box-shadow: 0 0 0 1px var(--gold-shadow), 0 4px 14px #0007; }
.research-node:hover { z-index: 3; }
.research-node:not(.is-complete):hover { border-color: #fff0b1; }
.research-node[aria-disabled="true"] { cursor: default; }
.research-node-project-badge { position: absolute; z-index: 4; top: 50%; left: 0; width: 66px; height: 66px; transform: translateY(-50%); }
.research-node-project-icon { display: block; width: 66px; height: 66px; padding: 6px; border: 1px solid var(--gold-edge); border-radius: 50%; background: #161b1cbb; object-fit: contain; }
.research-node-stat-bonus { position: absolute; z-index: 5; top: -4px; right: -4px; display: block; width: 32px; height: 32px; padding: 3px; border: 1px solid var(--gold-edge); border-radius: 50%; background: var(--ui-gray) center / 340px 212px repeat; object-fit: contain; box-shadow: 0 0 0 1px var(--gold-shadow); }
.research-node-icon-hover { position: relative; display: inline-grid; flex: none; place-items: center; }
.research-node-icon-hover > img, .research-node-icon-hover > .research-node-unlock-icon { pointer-events: none; }
.research-node-icon-hover.is-hovered { z-index: 20; }
.research-node-icon-tooltip { position: absolute; z-index: 21; top: 50%; left: calc(100% + 8px); display: none; width: max-content; min-width: 120px; max-width: 210px; gap: 2px; transform: translateY(-50%); padding: 6px 8px; border: 1px solid var(--gold-edge); background: #15191df5; box-shadow: 0 3px 10px #000b; color: #f5ecd7; font-size: calc(.62rem + var(--game-font-increase)); line-height: 1.3; white-space: normal; pointer-events: none; }
.research-node-icon-hover .research-node-icon-tooltip strong { position: static; top: auto; right: auto; left: auto; overflow: visible; padding: 0; color: #f4e6bd; font-size: calc(.68rem + var(--game-font-increase)); line-height: 1.25; white-space: normal; }
.research-node-icon-hover.is-hovered > .research-node-icon-tooltip { display: grid; }
.research-node-icon-hover.is-hovered > .research-node-unlock-icon { position: relative; z-index: 1; transform: scale(2); }
.research-node strong { position: absolute; top: 7px; right: 82px; left: 76px; overflow: hidden; color: #f4f3df; font-size: calc(.86rem + var(--game-font-increase)); line-height: 1.25; text-overflow: ellipsis; white-space: nowrap; }
.research-node-turns { position: absolute; top: 10px; right: 12px; color: #f8edcf; font-size: calc(.67rem + var(--game-font-increase)); white-space: nowrap; }
.research-node-queue-badge { position: absolute; top: 8px; right: 12px; padding: 2px 6px; border: 1px solid #9cc5d2; border-radius: 999px; background: #183d4d; color: #e6f5f4; font-size: calc(.62rem + var(--game-font-increase)); line-height: 1.2; white-space: nowrap; }
.research-node-unlocks { position: absolute; right: 10px; bottom: 6px; left: 76px; display: flex; min-width: 0; align-items: center; gap: 6px; }
.research-node-unlock-icon { display: inline-grid; width: 40px; height: 40px; flex: 0 0 40px; place-items: center; overflow: hidden; border: 1px solid var(--gold-edge); border-radius: 2px; background-color: #1b2428; background-position: center; background-repeat: no-repeat; color: #f2dfae; image-rendering: pixelated; transition: transform 140ms ease; }
.research-node.is-complete { border-color: #c6a95f; background-image: var(--ui-blue); }
.research-node.is-current { outline: 2px solid #fff0b1; outline-offset: 2px; box-shadow: 0 0 0 1px var(--gold-shadow), 0 0 16px #f1d99288; }
.research-node.is-focused:not(.is-current) { outline: 2px solid #f1d992; outline-offset: 2px; box-shadow: 0 0 0 1px var(--gold-shadow), 0 0 14px #f1d99266; }
.research-node.is-queued { border-color: #9cc5d2; }
.research-node.is-locked { filter: saturate(.55); }
@media (max-width: 700px) {
  .research-strip { gap: 6px; padding-bottom: 8px; }
  .research-progress-button { min-height: 62px; grid-template-columns: 42px minmax(0, 1fr); gap: 6px; padding: 5px 6px; }
  .research-progress-name { font-size: calc(.72rem + var(--game-font-increase)); }
  .research-progress-detail { font-size: calc(.54rem + var(--game-font-increase)); }
  .research-modal { width: calc(100vw - 16px); padding: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .research-node, .research-progress-button { transition: none; }
}

.hero-war-machines { display: flex; gap: 8px; padding: 6px 0; flex-wrap: wrap; }
.hero-war-machines img { width: 32px; height: 34px; object-fit: contain; }
.war-machine-prompt {
  position: fixed; z-index: 100; top: 20%; left: 50%; transform: translateX(-50%);
  width: min(460px, calc(100vw - 32px)); padding: 14px;
  background: var(--ui-blue); border: 1px solid var(--gold-edge);
  box-shadow: 0 0 0 2px var(--gold-shadow); border-radius: 2px; color: #f5ecd7;
}
.war-machine-prompt h3 { margin: 0 0 10px; }
.war-machine-prompt button { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 8px; text-align: left; }
.war-machine-prompt button img { width: 32px; height: 34px; object-fit: contain; flex-shrink: 0; }

.tile-tooltip.is-army-preview { z-index: 8; width: 290px; max-width: min(290px, calc(100% - 16px)); padding: 8px; white-space: normal; }
.army-hover-hero { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.army-hover-hero img { width: 40px; height: 44px; object-fit: contain; }
.army-hover-stacks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px 8px; }
.army-hover-stack { display: flex; align-items: center; gap: 5px; min-width: 0; }
.army-hover-stack > img { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; }
.army-hover-stack > span { display: flex; flex-direction: column; min-width: 0; }
.army-hover-stack small { color: var(--muted); font-size: inherit; }

.research-node-stars { position: absolute; bottom: -8px; left: 4px; width: 36px; height: 20px; object-fit: contain; }
.research-node-tier-status { min-width: 0; color: #c9ddb9; font-size: calc(.61rem + var(--game-font-increase)); line-height: 1.2; white-space: normal; }
.research-node.is-upgradeable { border-color: #a9c58b; }

@media (prefers-reduced-motion: reduce) {
  .research-node-unlock-icon { transition: none; }
}

.creature-abilities { display: flex; flex-wrap: wrap; gap: 3px 6px; }
.creature-ability { display: inline-block; padding: 1px 3px; border: 1px solid var(--gold-edge); border-radius: 2px; color: #f2dfae; font-size: calc(0.62rem + var(--game-font-increase)); cursor: help; }
.creature-ability:focus, .creature-ability:hover { outline: 1px solid #fff0b1; }

.battle-actions .battle-spell-control { min-width: 190px; max-width: min(340px, 60vw); }
.battle-mana { align-self: end; padding: 9px 6px; color: #f0dfb7; font-size: calc(.72rem + var(--game-font-increase)); }

.battle-actions .battle-spell-control { display: none; }
.battle-end-actions .battle-cast-button {
  width: 48px; height: 36px; padding: 0; border: 0; border-radius: 0;
  background: url("/assets/ui/battle/cast.png") 0 0 / 192px 36px no-repeat;
}
.battle-end-actions .battle-cast-button:hover { background-position-x: -144px; }
.battle-end-actions .battle-cast-button:active { background-position-x: -48px; }
.battle-end-actions .battle-cast-button:disabled { background-position-x: -96px; }
.battle-spellbook {
  width: min(800px, 96vw); aspect-ratio: 4 / 3; max-height: 94vh; padding: 0;
  color: #35200f; border: 1px solid var(--gold-edge); border-radius: 1px;
  box-shadow: 0 0 0 2px var(--gold-shadow);
  background: url("/assets/ui/battle/Spelbk2.png") center / 100% 100% no-repeat;
}
.battle-spellbook::backdrop { background: #0009; }
.overworld-spellbook .spellbook-entries { grid-template-rows: repeat(4, minmax(0, 1fr)); }
.spellbook-empty { grid-column: 1 / -1; text-align: center; align-self: center; color: #35200f; }
.learned-spells-modal { width: min(640px, 94vw); max-height: 92vh; overflow-y: auto; padding: 24px; text-align: center; color: #f5ecd7; background: #211a15 var(--ui-blue) center / 576px 355px; border: 1px solid var(--gold-edge); border-radius: 2px; box-shadow: 0 0 0 2px var(--gold-shadow); }
.learned-spells-modal::backdrop { background: #0009; }
.trading-post-notice { width: min(400px, 94vw); max-height: 92vh; padding: 24px; text-align: center; color: #f5ecd7; background: #211a15 var(--ui-blue) center / 576px 355px; border: 1px solid var(--gold-edge); border-radius: 2px; box-shadow: 0 0 0 2px var(--gold-shadow); }
.trading-post-notice::backdrop { background: #0009; }
.trading-post-notice h2 { margin: 0 0 20px; font-size: calc(20px + var(--game-font-increase)); }
.trading-post-notice img { display: block; width: 300px; max-width: 100%; height: auto; margin: 0 auto 20px; image-rendering: pixelated; }
.hero-exchange-modal { width: min(760px, 94vw); max-height: 92vh; overflow: auto; padding: 24px; color: #f5ecd7; background: #211a15 var(--ui-blue) center / 576px 355px; border: 1px solid var(--gold-edge); border-radius: 2px; box-shadow: 0 0 0 2px var(--gold-shadow); }
.hero-exchange-modal::backdrop { background: #0009; }
.hero-exchange-modal .selected-armies { display: grid; gap: 24px; margin: 20px 0; }
.hero-exchange-modal > p { font-size: calc(.85rem + var(--game-font-increase)); }
.hero-exchange-modal > button { display: block; margin: 16px auto 0; }
.learned-spells-modal h2 { margin: 0 0 20px; font-size: calc(20px + var(--game-font-increase)); }
.learned-spells-entries { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 16px; margin-bottom: 24px; }
.learned-spells-entries > div { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.learned-spells-entries img { width: 128px; height: 92px; max-width: 100%; object-fit: contain; }
.learned-spells-entries strong { font-size: calc(14px + var(--game-font-increase)); }
.spellbook-close { position: absolute; right: 2%; top: 1%; padding: 0 7px; min-height: 25px; }
.spellbook-entries {
  position: absolute; inset: 8% 10% 25%; display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) 8% repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(4, minmax(94px, 1fr));
  overflow-y: auto; gap: 2px;
}
.spellbook-spell {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; padding: 2px; min-height: 0; min-width: 0; color: #fff2d5; background: transparent;
  border: 1px solid transparent; border-radius: 1px; box-shadow: none; text-align: center;
}
.spellbook-spell:hover:enabled { border-color: #67451e; background: #fff2; }
.spellbook-spell:disabled { opacity: .6; }
.spellbook-spell img { width: 64px; height: 46px; max-width: 100%; object-fit: contain; flex-shrink: 0; }
.spellbook-spell strong { color: #ffe479; font: 400 calc(clamp(9px, 1.2vw, 11px) + var(--game-font-increase))/1.05 "Heroes III smalfont", serif; }
.spellbook-spell span { font: 400 calc(clamp(8px, 1.1vw, 10px) + var(--game-font-increase))/1.05 "Heroes III smalfont", serif; }
.spellbook-spell small { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.spellbook-pagination { position: absolute; bottom: 7%; left: 14%; right: 14%; display: flex; align-items: center; justify-content: space-between; }
.spellbook-pagination span { color: #f0dfb7; font-weight: bold; }
.battle-spellbook button, .battle-spellbook strong, .battle-spellbook span, .battle-spellbook small { text-shadow: none; }
.spellbook-spell strong, .spellbook-spell span { text-shadow: 0 1px 1px #54320b; }

@media (max-width: 550px) {
  .spellbook-spell img { width: 44px; height: 36px; }
  .spellbook-spell strong { overflow-wrap: anywhere; }
}

.battle-end-actions .battle-cast-button { width: min(48px, 100%); height: min(36px, 100%); }
.battle-end-actions .battle-mana { align-self: center; padding: 0 2px; text-align: center; font-size: calc(.58rem + var(--game-font-increase)); }
.battle-caster-control { position: absolute; left: 10%; top: 1%; color: #f0dfb7; font-size: calc(.7rem + var(--game-font-increase)); }
.battle-caster-control select { padding: 1px 4px; min-height: 22px; font-size: calc(.7rem + var(--game-font-increase)); }

.trader-preview-actions, .trader-destinations { display: grid; gap: 8px; padding: 8px; }
.trader-preview-actions button, .trader-destinations button {
  border: 1px solid var(--gold-edge); border-radius: 2px;
  box-shadow: 0 0 0 1px var(--gold-shadow); padding: 10px;
  background: var(--ui-blue); color: inherit; white-space: normal; text-align: left;
}
.trader-destinations { max-height: 60vh; overflow-y: auto; }
.trader-preview-actions button:disabled, .trader-destinations button:disabled { opacity: 0.5; }

.selected-armies { display: grid; gap: 10px; }
.army-preview-title { color: #d5bd8a; font-size: calc(.72rem + var(--game-font-increase)); }

.trade-exchange-modal { width: min(640px, 90vw); max-height: 85vh; overflow: auto; box-sizing: border-box; padding: 18px; background: var(--ui-blue); border: 1px solid var(--gold-edge); box-shadow: 0 0 0 2px var(--gold-shadow); border-radius: 2px; }
.trade-exchange-modal::backdrop { background: #0009; }
.trade-exchange-modal header { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.trade-exchange-modal h2 { margin: 0; }
.trade-exchange-towns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.trade-exchange-town { display: flex; min-width: 0; flex-direction: column; gap: 12px; text-align: center; }
.trade-exchange-town h3 { margin: 0; min-height: 2.5em; display: grid; place-items: center; overflow-wrap: anywhere; }
.trade-resource-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.trade-resource-grid .trade-resource-choice { display: flex; min-width: 0; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 7px 3px; border: 1px solid var(--gold-edge); border-radius: 1px; box-shadow: 0 0 0 1px var(--gold-shadow); }
.trade-resource-choice img { width: 34px; height: 34px; object-fit: contain; }
.trade-resource-choice span { font-size: calc(.68rem + var(--game-font-increase)); text-transform: capitalize; }
.trade-resource-choice[aria-pressed="true"] { outline: 2px solid #fff0a6; outline-offset: 1px; background: var(--ui-blue); }
.trade-resource-choice:disabled { opacity: .35; }
.trade-origin-controls { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: auto; }
.trade-origin-controls button { flex: 0 0 32px; min-height: 32px; padding: 2px; }
.trade-origin-controls output, .trade-destination-amount { font-size: calc(.9rem + var(--game-font-increase)); font-weight: bold; }
.trade-destination-amount { display: grid; place-items: center; min-height: 32px; margin-top: auto; }
.trade-exchange-result { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--gold-edge); text-align: center; }
.trade-exchange-rate { margin: 0; font-size: calc(1.15rem + var(--game-font-increase)); font-weight: bold; }
.trade-exchange-result p { margin-bottom: 10px; }
@media (max-width: 480px) {
  .trade-exchange-towns { gap: 10px; }
  .trade-resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trade-resource-choice img { width: 28px; height: 28px; }
}


.battle-deployment {
  grid-column: 2;
  grid-row: 1;
  align-self: center;
  justify-self: center;
  display: grid;
  justify-items: center;
  gap: 5px;
  max-width: 100%;
  padding: 4px 8px;
  text-align: center;
}
.battle-deployment p { margin: 0; color: #ead9b5; font-size: calc(clamp(.65rem, 1.1vw, .9rem) + var(--game-font-increase)); }
#battle-begin {
  min-width: min(260px, 100%);
  min-height: 40px;
  padding: 8px 28px;
  border: 1px solid var(--gold-edge);
  border-radius: 2px;
  background: var(--ui-blue) center / cover;
  color: #fff1ce;
  box-shadow: 0 0 0 2px var(--gold-shadow);
  font-size: calc(clamp(1rem, 1.5vw, 1.3rem) + var(--game-font-increase));
  font-weight: bold;
}


h1, h2, h3 { font-family: "Heroes III bigfont", serif; }
.info-window-title,
.entity-copy strong,
.town-queue-order-head strong,
.production-option-copy strong,
.research-progress-name,
.research-node strong,
.spellbook-spell strong,
.learned-spells-entries strong,
.necromancy-reward-name,
.army-preview-title,
.battle-unit-tooltip-details h2,
.creature-hover-tooltip-details h2 {
  font-family: "Heroes III MedFont", serif;
}
.match-system-time { font-family: "Heroes III TIMES08R", serif; }
.toast-region,
.battle-event,
.battle-log-entries {
  font-family: "Heroes III CALLI10R", serif;
}

.faction-summary { position: absolute; top: 58px; right: 12px; z-index: 15; max-width: min(65vw, 760px); }
.faction-summary[hidden] { display: none; }
.faction-summary-columns { display: flex; align-items: stretch; gap: 5px; overflow-x: auto; padding: 2px; }
.faction-summary-column { flex: none; width: max-content; min-width: 52px; display: flex; flex-direction: column; border: 1px solid var(--gold-edge); border-radius: 2px; box-shadow: 0 0 0 1px var(--gold-shadow); background: #30343a var(--ui-gray) center / 300px repeat; color: #f5ecd7; }
.faction-summary-portrait-frame, .faction-summary-unit-frame { position: relative; width: 100%; aspect-ratio: 1; }
.faction-summary-unit-frame { aspect-ratio: 58 / 64; }
.faction-summary-portrait { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border: 1px solid var(--gold-edge); border-radius: 50%; }
.faction-summary-name { display: block; width: 0; min-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: center; font-size: calc(.6rem + var(--game-font-increase)); line-height: 14px; }
.faction-summary-stat { min-height: 22px; display: flex; align-items: center; justify-content: flex-start; gap: 3px; padding: 0 2px; font-size: calc(.8rem + var(--game-font-increase)); font-variant-numeric: tabular-nums; }
.faction-summary-value { text-align: left; }
.faction-summary-icons { width: 18px; height: 18px; display: grid; flex: none; place-items: center; font-size: calc(21px + var(--game-font-increase)); line-height: 1; }
.faction-summary-icons img { width: 18px; height: 18px; object-fit: contain; }
.faction-summary-icons.icons-2, .faction-summary-icons.icons-4 { grid-template-columns: 1fr 1fr; }
.faction-summary-icons.icons-2 img { width: 10px; height: 18px; }
.faction-summary-icons.icons-4 img { width: 10px; height: 10px; }
.faction-summary-stat.heroes { min-height: 24px; padding-bottom: 2px; }
.faction-summary-stat.heroes .faction-summary-icons { display: flex; align-items: center; justify-content: center; overflow: hidden; font-family: serif; font-size: calc(18px + var(--game-font-increase)); line-height: 18px; }
.faction-summary-stat.strongest_unit { margin-top: auto; padding: 0; }
.faction-summary-unit { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: left center; image-rendering: pixelated; }
.match-screen.has-inspector-open .faction-summary { right: calc(var(--inspector-width) + var(--world-panel-edge-inset) + 18px); max-width: max(90px, calc(100vw - var(--inspector-width) - var(--world-hud-left) - 48px)); }

body { font-size: calc(1rem + var(--game-font-increase)); }

.shared-resource-item.resource-food { --resource-edge: #9bba4e; --resource-fill: #365321; }
.shared-resource-item.resource-gold { --resource-edge: #d5b74b; --resource-fill: #66501a; }
.town-preview-yield-pills { display: grid; grid-template-rows: repeat(2, auto); grid-template-columns: repeat(5, minmax(0, 1fr)); grid-auto-flow: column; gap: 3px 4px; pointer-events: auto; }
.town-preview-yield-pills .shared-resource-item { min-width: 0; padding-right: 4px; gap: 2px; background: color-mix(in srgb, var(--resource-fill) 70%, transparent); }
.town-preview-yield-pills .shared-resource-amount { font-size: calc(.75rem + var(--game-font-increase) + 1px); }

.town-preview-status { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.town-preview-status .info-window-progress-row,
.town-preview-status .town-preview-conversion-row { padding: 2px 5px; border-radius: 999px; background: #ffffff30; }
.town-preview-status .info-window-progress { flex: 1; min-width: 0; justify-items: start; }
.town-preview-status .info-window-progress-row { grid-template-columns: 21px minmax(0, 1fr); gap: 4px; }
.town-preview-status .info-window-progress-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.town-preview-status .info-window-progress-value { text-align: left; }
.town-preview-status .town-preview-research-control { flex: none; }

.research-progress-unlocks { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.research-progress-unlocks .research-node-unlock-icon { flex: none; width: 24px; height: 24px; }
.research-progress-name { white-space: normal; overflow-wrap: anywhere; }
.research-progress-detail { font-size: calc(.5rem + var(--game-font-increase)); }
.settings-match-info { display: grid; gap: 8px; padding: 10px 0; border-block: 1px solid var(--gold-edge); }
.settings-match-info > div:first-child { display: flex; align-items: center; gap: 10px; }
.settings-match-info .eyebrow { margin: 0; }

.faction-summary-flag { position: absolute; top: 0; right: -1px; width: 50%; height: 60%; background-size: 300% 100%; background-position: right top; background-repeat: no-repeat; image-rendering: pixelated; filter: drop-shadow(0 1px 1px #000b); }

.research-building-costs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 5px; }

.production-option-supply img { flex: none; width: 15px; height: 15px; object-fit: contain; }
.production-option-supply { display: flex; align-items: flex-start; gap: 4px; color: #ded6ba; font-size: calc(.61rem + var(--game-font-increase)); line-height: 1.3; white-space: normal; }
.creature-hover-tooltip-supply { margin: 6px 0 0; color: #e2c77c; font-size: calc(.65rem + var(--game-font-increase)); line-height: 1.4; }

/* Shared pre-match setup uses the game frame and existing faction artwork. */
.match-screen.setting-up { display: grid; place-items: center; min-height: 100dvh; padding: clamp(12px, 3vw, 40px); background: var(--ui-blue); overflow: auto; }
.match-screen.setting-up > :not(#lobby-seat-panel):not(dialog):not(#reconnect-overlay) { display: none; }
.setting-up #lobby-seat-panel { width: min(1240px, 100%); display: grid; gap: 24px; padding: 24px; border: 1px solid var(--gold-edge); border-radius: 2px; box-shadow: 0 0 0 3px var(--gold-shadow); background: var(--ui-blue); background-size: cover; }
.setup-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 1px solid var(--gold-edge); padding-bottom: 18px; }
.setup-heading h1 { margin: 0; color: #ead591; }
#lobby-code { margin-left: 8px; color: #ead591; letter-spacing: .14em; user-select: all; }
.setup-columns { display: grid; grid-template-columns: minmax(0, 1fr) 230px; gap: 24px; }
.setup-players { min-width: 0; }
.setup-players h2, .setup-map h2 { margin: 0 0 14px; }
.setting-up .player-list { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; }
.setup-seat { position: relative; display: grid; grid-template-columns: 34px minmax(90px, 1fr) 90px 106px 112px; align-items: center; gap: 12px; padding: 12px; border: 1px solid var(--gold-edge); box-shadow: inset 5px 0 var(--seat-color, #6e6658); background: var(--ui-blue); background-size: cover; }
.setup-flag { display: block; width: 34px; height: 44px; background-size: 300% 100%; background-position: right top; background-repeat: no-repeat; image-rendering: pixelated; }
.setup-identity { display: grid; gap: 8px; overflow-wrap: anywhere; }
.setup-status { font-size: .8rem; color: #e2ce9c; }
.setup-field { display: grid; gap: 4px; min-width: 0; font-size: .8rem; }
.setup-field select { width: 100%; min-height: 32px; padding: 4px; }
.setup-faction { position: relative; align-self: center; grid-column: 4; grid-row: 1 / span 2; }
.setup-faction summary { display: grid; justify-items: center; gap: 5px; cursor: pointer; list-style: none; font-size: .85rem; }
.setup-faction summary::-webkit-details-marker { display: none; }
.faction-icon { width: 62px; height: 58px; object-fit: contain; image-rendering: pixelated; }
.faction-picker { position: absolute; top: 100%; right: -100px; z-index: 20; width: 320px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 10px; border: 1px solid var(--gold-edge); box-shadow: 0 0 0 3px var(--gold-shadow), 0 12px 24px #000a; background: var(--ui-blue); }
.faction-picker button { display: grid; justify-items: center; padding: 4px; font-size: .8rem; }
.faction-picker button.selected { outline: 2px solid #ead591; }
.setup-human { font-size: .85rem; color: #e2ce9c; }
.setup-seat > :nth-child(6) { grid-column: 2 / span 2; }
.setup-seat > :nth-child(7) { grid-column: 5; }
.open-seat { min-height: 100px; grid-template-columns: 34px 1fr auto; opacity: .9; }
.open-seat-number { color: #cdbb8b; text-align: center; }
.setup-map { display: grid; align-content: start; gap: 14px; padding-left: 24px; border-left: 1px solid var(--gold-edge); }
.setup-map label { display: grid; gap: 6px; }
.setting-up .lobby-controls { display: flex; justify-content: flex-end; gap: 14px; margin: 0; padding-top: 18px; border-color: var(--gold-edge); }
.setting-up .lobby-controls button { min-width: 150px; min-height: 46px; }
@media (max-width: 950px) {
  .setup-columns { grid-template-columns: minmax(0, 1fr); }
  .setup-map { padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--gold-edge); grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .setup-map h2 { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .setting-up #lobby-seat-panel { padding: 14px; }
  .setup-heading { align-items: start; flex-direction: column; }
  .setup-seat { grid-template-columns: 28px minmax(80px, 1fr) 100px; gap: 10px; }
  .setup-faction { grid-column: 3; grid-row: 1 / span 2; }
  .setup-seat > :nth-child(3) { grid-column: 2; }
  .setup-seat > :nth-child(5), .setup-seat > :nth-child(7) { grid-column: 3; }
  .setup-seat > :nth-child(6) { grid-column: 1 / span 2; }
  .faction-picker { right: 0; width: 280px; }
  .setup-map { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .open-seat { grid-template-columns: 28px 1fr; }
  .open-seat button { grid-column: 2; }
}
@media (min-width: 1101px) {
  .setup-seat { grid-template-columns: 34px minmax(85px, 1fr) 85px 80px 108px 115px 100px; gap: 10px; min-height: 110px; }
  .setup-faction { grid-column: 4; grid-row: 1; }
  .setup-seat > :nth-child(6) { grid-column: 6; }
  .setup-seat > :nth-child(7) { grid-column: 7; }
  .open-seat { grid-template-columns: 34px 1fr auto; }
}
@media (min-width: 951px) and (max-width: 1100px) {
  .setup-columns { grid-template-columns: minmax(0, 1fr); }
  .setup-map { padding: 18px 0 0; border-left: 0; border-top: 1px solid var(--gold-edge); grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .setup-map h2 { grid-column: 1 / -1; }
}

.setup-faction span.faction-icon, .faction-picker span.faction-icon { display: grid; place-items: center; font-size: 2.5rem; color: #ead591; }

.battle-unit-tooltip-effect { display: inline-flex; align-items: center; gap: 5px; margin: 3px 8px 0 0; vertical-align: middle; }
.battle-unit-tooltip-effect img { width: 28px; height: 28px; object-fit: cover; border: 1px solid var(--gold-edge); border-radius: 1px; image-rendering: pixelated; }

.next-event { position: absolute; z-index: 16; right: 3px; bottom: 3px; width: max-content; max-width: 190px; display: grid; justify-items: end; gap: 4px; pointer-events: none; }
.next-event-label { white-space: pre-line; position: relative; justify-self: end; margin-right: 62px; transform: translateX(50%); max-width: 100%; padding: 7px 12px; border: 1px solid var(--gold-edge); border-radius: 18px; background: var(--ui-blue) center / 300px; box-shadow: 0 0 0 1px var(--gold-shadow); color: #f5e8cc; text-align: center; pointer-events: auto; }
.next-event-dial { position: relative; width: var(--event-dial-width, 124px); height: var(--event-dial-height, 124px); }
.next-event-primary { position: absolute; right: 8px; bottom: 8px; display: grid; place-items: center; width: 108px; height: 108px; padding: 16px; border: 2px solid var(--gold-edge); border-radius: 50%; background: var(--ui-blue) center / 300px; box-shadow: 0 0 0 2px var(--gold-shadow), 0 0 0 5px #8c7040, 0 3px 8px #0009; pointer-events: auto; }
.next-event-primary img, .next-event-queued img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.next-event-primary:hover:not(:disabled), .next-event-queued:hover:not(:disabled) { filter: brightness(1.2); background-image: var(--ui-blue); }
.next-event-queued { position: absolute; left: calc(100% - 62px + var(--event-x)); top: calc(100% - 62px + var(--event-y)); transform: translate(-50%, -50%); display: grid; place-items: center; width: 32px; height: 32px; min-height: 32px; padding: 3px; border: 1px solid var(--gold-edge); border-radius: 50%; background: var(--ui-blue) center / 300px; box-shadow: 0 0 0 1px var(--gold-shadow); pointer-events: auto; }
.next-event .next-event-primary:hover:not(:disabled) { transform: none !important; }
.match-screen.is-battle .next-event { display: none; }
.next-event .next-event-queued:hover:not(:disabled) { transform: translate(-50%, -50%) !important; }
.match-screen:has(.next-event:not([hidden])) .info-window { right: 172px; bottom: 3px; width: min(360px, calc(100vw - 182px)); }
.match-screen.has-inspector-open:has(.next-event:not([hidden])) .info-window { right: calc(var(--inspector-width) + var(--world-panel-edge-inset) + 187px); width: min(360px, calc(100vw - var(--world-hud-left) - var(--inspector-width) - var(--world-panel-edge-inset) - 226px)); }
.match-screen.has-inspector-open .next-event { right: calc(var(--inspector-width) + var(--world-panel-edge-inset) + 18px); }
@media (max-width: 760px) {
  .match-screen.has-inspector-open .next-event { visibility: hidden; }
}

.match-screen.has-town-production-open .next-event { display: none; }
.match-screen.has-town-production-open:has(.next-event:not([hidden])) .info-window { right: calc(var(--inspector-width) + var(--world-panel-edge-inset) + 18px); width: min(360px, calc(100vw - var(--world-hud-left) - var(--inspector-width) - var(--world-panel-edge-inset) - 54px)); }

.preview-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding: 4px; }
#selection-info-window .preview-actions { position: absolute; left: 10px; right: 10px; bottom: calc(100% - 1px); justify-content: flex-end; flex-wrap: nowrap; padding: 0; pointer-events: auto; }
.preview-action { display: grid; place-items: center; width: 63px; height: 63px; min-height: 63px; padding: 7px; border: 1px solid var(--gold-edge); border-radius: 50%; background: var(--ui-blue) center / 300px; box-shadow: 0 0 0 2px var(--gold-shadow); }
.preview-action img { width: 100%; height: 100%; object-fit: contain; pointer-events: none; }
.preview-action[data-action="workers"] img { border-radius: 50%; }
.preview-action[aria-pressed="true"] { border-color: #fff2b0; box-shadow: 0 0 0 2px #b38e40, inset 0 0 8px #f5db7380; }

.match-screen.has-town-production-open .faction-summary { display: none; }

.production-option-tabs { gap: 0; padding: 0; }
.production-option-tabs button { border-bottom: 0; border-radius: 6px 6px 0 0; background: #152c43; box-shadow: none; }
.production-option-tabs button + button { border-left: 0; }
.production-option-tabs button[aria-selected="true"] { background: #365271; box-shadow: none; }
.production-option-section { border-top: 0; padding-top: 0; }
.production-option-button { border-radius: 7px; background-image: var(--ui-blue); box-shadow: none; }
.production-option-button:hover:not(:disabled) { background-image: var(--ui-blue); }
.production-option-copy { flex: 1; }
.production-option-copy strong { font-size: calc(.95rem + var(--game-font-increase)); }
.production-option-requirements { display: grid; align-self: flex-start; justify-items: end; gap: 6px; margin-left: auto; flex: none; color: #f2dfae; }
.production-option-turns, .production-option-materials, .production-option-materials > span { display: flex; align-items: center; gap: 4px; }
.production-option-materials img { width: 20px; height: 20px; object-fit: contain; }

#close-town-inspector { width: 28px; height: 28px; min-height: 28px; flex: none; }
.production-option-section-heading { justify-content: flex-end; }

#selection-info-window .preview-actions { left: auto; width: max-content; max-width: calc(100% - 20px); isolation: isolate; }
#selection-info-window .preview-actions::before {
  position: absolute;
  z-index: -1;
  inset: 50% -10px 3px;
  border: 0;
  border-inline: 1px solid var(--gold-edge);
  box-shadow: -1px 0 0 var(--gold-shadow), 1px 0 0 var(--gold-shadow);
  background: linear-gradient(#071a3080, #071a3080), var(--ui-blue) center / 300px;
  -webkit-mask-image: linear-gradient(to top, #000, transparent);
  mask-image: linear-gradient(to top, #000, transparent);
  content: "";
  pointer-events: none;
}

/* Sidebar research progress. */
.research-progress-button { --research-color: #ed9a35; }
#magic-progress { --research-color: #42c4ef; }
.research-progress-icon-slot::before { position: absolute; inset: 1px; border-radius: 50%; background: conic-gradient(var(--research-color) var(--research-progress, 0%), #071a30aa 0); mask: radial-gradient(farthest-side, transparent calc(100% - 4px), #000 0); content: ""; }
.research-progress-copy { align-self: stretch; align-content: start; padding-top: 1px; gap: 4px; }
.research-progress-name { font-size: calc(.86rem + var(--game-font-increase)); }
.research-progress-detail { display: flex; align-items: center; justify-content: center; gap: 4px; }
.research-time:not(:empty)::after { content: "◷"; font-size: 1.2em; }
.research-progress-unlocks { width: 100%; min-height: 30px; box-sizing: border-box; padding: 3px 6px; border-radius: 18px; background: #041c3c80; }

.preview-action[data-action="purchase"] { position: relative; }
.preview-action img.preview-action-gold { position: absolute; right: 8px; bottom: 8px; width: 26px; height: 26px; }

.town-capture-choices { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding: 2px; }

.town-capture-icon { width: 150px; height: 70px; max-width: 100%; object-fit: contain; image-rendering: pixelated; }

.world-events { position: absolute; z-index: 16; right: 8px; bottom: 190px; display: flex; flex-direction: column; gap: 8px; max-height: calc(100% - 260px); overflow-y: auto; padding: 4px; }
.world-events .preview-action { position: relative; flex-shrink: 0; }
.world-events .preview-action > img { min-width: 0; min-height: 0; aspect-ratio: 1; border-radius: 50%; object-fit: cover; }
.world-event-count { position: absolute; right: -2px; bottom: -2px; min-width: 22px; padding: 1px 4px; border: 1px solid var(--gold-edge); border-radius: 50%; background: var(--ui-blue) center / 300px; box-shadow: 0 0 0 1px var(--gold-shadow); color: #f5e8cc; font-size: 14px; text-align: center; }
.match-screen.has-inspector-open .world-events { right: calc(var(--inspector-width) + var(--world-panel-edge-inset) + 18px); }
.match-screen.is-battle .world-events, .match-screen.has-town-production-open .world-events { display: none; }


.creature-option-tooltip-target { position: relative; }
.creature-option-tooltip-target:has(> .production-stack-button:not([hidden])) > .production-option-button { padding-bottom: 42px; }
.production-stack-button { position: absolute; z-index: 1; right: 6px; bottom: 6px; width: 34px; height: 34px; padding: 2px; border: 1px solid var(--gold-edge); border-radius: 2px; background: var(--ui-blue) center / 258px 258px; box-shadow: 0 0 0 1px var(--gold-shadow); }
.production-stack-button[hidden] { display: none; }
.production-stack-button img { display: block; width: 28px; height: 28px; object-fit: contain; }