:root {
  --world-map-image: url("/map.png");
  --ink: #eef3ff;
  --muted: #9ca9c3;
  --panel: rgba(16, 24, 44, 0.9);
  --panel-2: rgba(23, 34, 61, 0.82);
  --line: rgba(191, 210, 246, 0.18);
  --gold: #e4c36f;
  --gold-bright: #ffe29a;
  --fire: #d85b3c;
  --water: #328dcc;
  --earth: #69a45c;
  --wind: #69c7dc;
  --light: #d9ba55;
  --dark: #7650b8;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: #070b16; color: var(--ink); }
body { font-family: Arial, Helvetica, sans-serif; font-size: 17px; }
button, select, input { font: inherit; }
button { color: inherit; }

.setup-screen {
  min-height: 100vh;
  display: grid;
  place-items: center;
  padding: 32px 20px;
  background:
    radial-gradient(circle at 18% 18%, rgba(216, 91, 60, .2), transparent 28%),
    radial-gradient(circle at 82% 18%, rgba(105, 199, 220, .18), transparent 28%),
    linear-gradient(150deg, rgba(5,9,19,.92), rgba(10,16,30,.76) 50%, rgba(5,9,19,.92)),
    var(--world-map-image) center / cover no-repeat;
}
.setup-panel { width: min(1280px, 100%); padding: clamp(22px, 4vw, 42px); border: 1px solid rgba(228,195,111,.38); border-radius: 22px; background: rgba(6,11,22,.82); box-shadow: 0 25px 90px rgba(0,0,0,.6); backdrop-filter: blur(10px); text-align: center; }
.eyebrow { display: block; color: var(--gold); letter-spacing: .22em; font-size: .72rem; font-weight: 700; margin-bottom: 8px; }
h1, h2 { font-family: Georgia, "Times New Roman", serif; color: var(--gold-bright); }
h1 { margin: 0; font-size: clamp(2.3rem, 7vw, 5rem); letter-spacing: .05em; }
.lead { color: var(--muted); margin: 10px auto 28px; max-width: 660px; }

.realm-picker { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.realm-card {
  min-height: 92px;
  display: flex;
  align-items: center;
  gap: 13px;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--panel);
  cursor: pointer;
  text-align: left;
  transition: transform .18s ease, border-color .18s ease, background .18s ease;
}
.realm-card:hover { transform: translateY(-2px); border-color: rgba(255, 226, 154, .55); }
.realm-card.selected { border-color: var(--gold-bright); box-shadow: 0 0 0 2px rgba(255, 226, 154, .15) inset, 0 15px 40px rgba(0,0,0,.25); }
.realm-card span:last-child { display: grid; gap: 5px; }
.realm-card small { color: var(--muted); }
.realm-icon { font-size: 2rem; }
.realm-pyrath { --realm-color: var(--fire); }
.realm-aquaris { --realm-color: var(--water); }
.realm-terranor { --realm-color: var(--earth); }
.realm-zephyria { --realm-color: var(--wind); }
.realm-solaria { --realm-color: var(--light); }
.realm-nocthar { --realm-color: var(--dark); }
.realm-semleges { --realm-color: #858ea1; }
.realm-card { background: linear-gradient(135deg, color-mix(in srgb, var(--realm-color) 18%, transparent), var(--panel)); }

.setup-options { margin: 18px 0; display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; text-align: left; }
.setup-options label { display: grid; gap: 7px; color: var(--muted); font-size: .86rem; }
select { min-height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; color: var(--ink); background: var(--panel); }
.switch-line { min-height: 44px; display: flex !important; flex-direction: row; align-items: center; padding: 0 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel); white-space: nowrap; }
.switch-line input { accent-color: var(--gold); }
.chosen-summary { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 13px; padding: 14px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); text-align: left; }
.chosen-summary div { display: grid; gap: 4px; }
.chosen-summary small { color: var(--muted); }
.chosen-sigil { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 50%; font-size: 1.7rem; background: var(--panel-2); }
.setup-info-grid { margin-top: 16px; display: grid; grid-template-columns: .9fr 1.1fr; gap: 14px; text-align: left; }
.realm-guide, .rules-guide { padding: 19px; border: 1px solid var(--line); border-radius: 14px; background: linear-gradient(145deg, color-mix(in srgb, var(--realm-color, var(--gold)) 14%, transparent), rgba(12,19,35,.94)); }
.guide-kicker { color: var(--gold); font-size: .72rem; font-weight: 800; letter-spacing: .15em; }
.realm-guide h2, .rules-guide h2 { margin: 7px 0 9px; font-size: 1.5rem; }
.realm-guide > p, .rules-guide > p { margin: 0; color: #c5cee1; line-height: 1.52; }
.power-guide { margin-top: 14px; display: grid; gap: 5px; padding: 13px; border-left: 4px solid var(--realm-color); border-radius: 7px; background: color-mix(in srgb, var(--realm-color) 13%, rgba(255,255,255,.025)); }
.power-guide span { color: var(--gold); font-size: .7rem; font-weight: 800; letter-spacing: .11em; }
.power-guide strong { color: var(--gold-bright); font-size: 1.08rem; }
.power-guide p { margin: 0; color: #c5cee1; font-size: .9rem; line-height: 1.45; }
.hero-preview { margin-top: 15px; display: grid; gap: 8px; }
.hero-preview > div { display: grid; grid-template-columns: 38px 1fr; gap: 9px; align-items: center; padding: 9px; border: 1px solid var(--line); border-radius: 9px; background: rgba(3,7,15,.34); }
.hero-preview > div > b { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; font-size: 1.3rem; background: color-mix(in srgb, var(--realm-color) 28%, #11192c); }
.hero-preview > div > span { display: grid; gap: 2px; }.hero-preview small { color: var(--gold); font-size: .75rem; }.hero-preview em { color: var(--muted); font-size: .78rem; font-style: normal; line-height: 1.35; }
.rule-steps { margin-top: 14px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rule-steps > div { display: grid; grid-template-columns: auto 1fr; gap: 9px; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: rgba(255,255,255,.035); }
.rule-steps b { width: 27px; height: 27px; display: grid; place-items: center; border-radius: 50%; color: #161005; background: var(--gold); }
.rule-steps span { display: grid; gap: 3px; }.rule-steps small { color: var(--muted); line-height: 1.35; }
.full-rules { margin-top: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: rgba(0,0,0,.2); }
.full-rules summary { color: var(--gold-bright); cursor: pointer; font-weight: 700; }.full-rules ul { margin: 10px 0 2px; padding-left: 20px; color: #c5cee1; line-height: 1.5; }

button { min-height: 46px; padding: 10px 14px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); cursor: pointer; }
button:hover { border-color: rgba(255, 226, 154, .55); }
button:disabled { opacity: .42; cursor: not-allowed; border-color: var(--line); }
.primary-button { border-color: #947c3e; background: linear-gradient(180deg, #dec06f, #a98739); color: #151004; font-weight: 800; }
.quiet-button { margin-top: auto; color: var(--muted); background: transparent; }

.game-screen { min-height: 100vh; display: grid; grid-template-rows: auto auto 1fr auto; gap: 12px; padding: 12px; overflow-x: auto; background: radial-gradient(circle at center, #172542, #080d19 72%); }
.game-header, .turn-footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 18px; border: 1px solid rgba(228,195,111,.35); border-radius: 12px; background: linear-gradient(180deg, rgba(22,32,56,.97), rgba(10,17,33,.96)); box-shadow: 0 8px 24px rgba(0,0,0,.28); }
.game-header > div:first-child { display: grid; }
.game-header strong { font-size: 1.35rem; font-family: Georgia, serif; color: var(--gold-bright); }
.game-header.ai-turn { border-color: color-mix(in srgb, var(--realm-color, var(--gold)) 70%, var(--gold)); }
.resource-bar, .turn-order { display: flex; gap: 7px; flex-wrap: wrap; }
.resource-bar span, .turn-order span { padding: 8px 12px; border: 1px solid var(--line); border-radius: 999px; background: rgba(255,255,255,.045); font-size: .91rem; white-space: nowrap; }
.turn-order span.active { color: var(--gold-bright); border-color: var(--gold); }
.realm-overview { min-width: 1480px; display: grid; grid-template-columns: repeat(6, 1fr); gap: 7px; }
.realm-stat { min-width: 0; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; padding: 9px 12px; border: 1px solid color-mix(in srgb, var(--realm-color) 42%, var(--line)); border-radius: 10px; background: linear-gradient(135deg, color-mix(in srgb, var(--realm-color) 18%, rgba(13,21,38,.96)), rgba(9,15,29,.96)); box-shadow: 0 7px 18px rgba(0,0,0,.24); }
.realm-stat.player-realm { border-color: var(--gold-bright); box-shadow: 0 0 0 1px rgba(255,226,154,.16) inset, 0 8px 20px rgba(0,0,0,.32); }
.realm-stat > span { font-size: 1.45rem; }.realm-stat > div { min-width: 0; display: grid; gap: 2px; }.realm-stat > div strong { overflow: hidden; text-overflow: ellipsis; }.realm-stat small { color: var(--muted); font-size: .7rem; white-space: nowrap; }.realm-stat > b { color: var(--gold-bright); font-size: 1.25rem; white-space: nowrap; }.realm-stat > b small { color: var(--gold); font-size: .58rem; }
.game-layout { min-height: 0; display: grid; grid-template-columns: 250px minmax(900px, 1fr) 350px; align-items: start; gap: 12px; min-width: 1480px; }
.ruler-panel, .territory-panel { display: flex; flex-direction: column; gap: 11px; padding: 14px; border: 1px solid rgba(228,195,111,.3); border-radius: 12px; background: linear-gradient(180deg, rgba(15,24,43,.96), rgba(8,14,28,.96)); box-shadow: 0 12px 30px rgba(0,0,0,.3); }
.ruler-portrait { min-height: 220px; display: grid; place-items: center; align-content: center; gap: 12px; padding: 16px; text-align: center; border: 1px solid color-mix(in srgb, var(--realm-color) 50%, transparent); border-radius: 10px; background: radial-gradient(circle, color-mix(in srgb, var(--realm-color) 42%, transparent), transparent 67%), var(--panel-2); }
.ruler-portrait span { font-size: 4.6rem; filter: drop-shadow(0 6px 16px color-mix(in srgb, var(--realm-color) 60%, transparent)); }
.ruler-portrait strong { font-family: Georgia, serif; color: var(--gold-bright); font-size: 1.15rem; line-height: 1.3; }
.realm-status { display: grid; gap: 4px; padding: 10px 2px; }
.realm-status small, .hint { color: var(--muted); }
.quick-rules { padding: 11px; border: 1px solid var(--line); border-radius: 9px; color: var(--muted); font-size: .86rem; line-height: 1.5; }
.quick-rules summary { color: var(--ink); cursor: pointer; font-weight: 700; }
.quick-rules p { margin: 8px 0 0; }
.hero-roster { display: grid; gap: 6px; padding: 10px; border: 1px solid rgba(228,195,111,.24); border-radius: 9px; background: rgba(228,195,111,.045); }
.hero-roster summary { margin-bottom: 7px; color: var(--gold-bright); cursor: pointer; font-weight: 800; }.hero-roster button { min-height: 49px; display: grid; grid-template-columns: 30px 1fr; align-items: center; gap: 7px; padding: 6px 7px; text-align: left; }.hero-roster button > span:first-child { font-size: 1.25rem; }.hero-roster button > span:last-child { display: grid; gap: 2px; min-width: 0; }.hero-roster button strong { overflow: hidden; text-overflow: ellipsis; font-size: .78rem; white-space: nowrap; }.hero-roster button small { overflow: hidden; color: var(--muted); font-size: .67rem; text-overflow: ellipsis; white-space: nowrap; }

.world-map { position: relative; width: 100%; min-height: 0; aspect-ratio: 16 / 10; overflow: hidden; isolation: isolate; border: 2px solid #a98d4b; border-radius: 14px; background: #0c1423 var(--world-map-image) center / cover no-repeat; box-shadow: 0 0 0 1px rgba(255,226,154,.2) inset, 0 20px 55px rgba(0,0,0,.55); }
.world-map::after { content: ""; position: absolute; z-index: 7; inset: 7px; pointer-events: none; border: 1px solid rgba(255,226,154,.42); border-radius: 9px; box-shadow: 0 0 22px rgba(0,0,0,.55) inset; }
.map-vignette { position: absolute; z-index: 1; inset: 0; pointer-events: none; background: radial-gradient(circle at center, transparent 43%, rgba(2,5,11,.42) 100%), linear-gradient(180deg, rgba(3,7,14,.08), rgba(3,7,14,.18)); }
.realm-name { position: absolute; z-index: 2; pointer-events: none; font: 800 clamp(.75rem, 1.1vw, 1.1rem) Georgia, serif; letter-spacing: .16em; color: rgba(255,244,211,.82); text-shadow: 0 2px 4px #000, 0 0 10px #000, 0 0 18px rgba(0,0,0,.8); }
.map-nocthar { left: 7%; top: 5%; color: #d8baff; }.map-zephyria { right: 7%; top: 5%; color: #e2f8ff; }.map-terranor { left: 36%; top: 38%; color: #e0f6c8; }.map-pyrath { left: 7%; bottom: 4%; color: #ffd0ab; }.map-solaria { right: 8%; top: 40%; color: #fff1a7; }.map-aquaris { right: 20%; bottom: 4%; color: #bdeeff; }
.map-links { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.map-links line { stroke: rgba(255,230,165,.28); stroke-width: 1.5; stroke-dasharray: 3 4; filter: drop-shadow(0 1px 2px #000); }
.map-links line.active { stroke: #fff2a8; stroke-width: 4; stroke-dasharray: none; filter: drop-shadow(0 0 6px #ffd86a); }
.map-links line.neighbor-line { stroke: #8de7ff; stroke-width: 3; stroke-dasharray: none; filter: drop-shadow(0 0 6px #64d7ff); }
.map-status-banner { position: absolute; z-index: 8; left: 50%; top: 18px; transform: translateX(-50%); width: min(720px, 76%); min-height: 58px; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 18px; border: 1px solid color-mix(in srgb, var(--realm-color) 75%, var(--gold)); border-radius: 12px; background: linear-gradient(135deg, color-mix(in srgb, var(--realm-color) 40%, rgba(7,12,23,.96)), rgba(7,12,23,.96)); box-shadow: 0 12px 30px rgba(0,0,0,.55), 0 0 24px color-mix(in srgb, var(--realm-color) 30%, transparent); text-align: center; animation: banner-in .28s ease-out; }
.map-status-banner span { font-size: 1.8rem; }.map-status-banner strong { font-size: 1.02rem; }
@keyframes banner-in { from { opacity: 0; transform: translate(-50%,-12px); } }
.realm-zone { position: absolute; display: flex; justify-content: center; padding: 12px; border: 1px solid var(--line); border-radius: 50px; color: rgba(238,243,255,.54); font-family: Georgia, serif; letter-spacing: .08em; }
.zone-nocthar { left: 2%; top: 3%; width: 47%; height: 32%; background: rgba(118,80,184,.13); }
.zone-zephyria { left: 52%; top: 3%; width: 46%; height: 34%; background: rgba(105,199,220,.12); }
.zone-terranor { left: 21%; top: 32%; width: 43%; height: 35%; background: rgba(105,164,92,.12); }
.zone-pyrath { left: 2%; top: 58%; width: 34%; height: 39%; background: rgba(216,91,60,.12); }
.zone-solaria { left: 70%; top: 32%; width: 28%; height: 45%; background: rgba(217,186,85,.12); }
.zone-aquaris { left: 35%; top: 61%; width: 44%; height: 36%; background: rgba(50,141,204,.13); }
.territory-node { position: absolute; z-index: 4; transform: translate(-50%,-50%); width: 58px; height: 58px; min-height: 58px; display: grid; place-items: center; align-content: center; padding: 0; border: 2px solid color-mix(in srgb, var(--realm-color) 82%, white); border-radius: 50%; background: radial-gradient(circle at 35% 28%, color-mix(in srgb, var(--realm-color) 95%, white), color-mix(in srgb, var(--realm-color) 68%, #07101d) 68%); box-shadow: 0 7px 16px rgba(0,0,0,.72), 0 0 14px color-mix(in srgb, var(--realm-color) 34%, transparent); text-shadow: 0 1px 3px #000; }
.territory-node:disabled { opacity: 1; cursor: default; }
.territory-node span { font-size: .68rem; line-height: .72rem; font-weight: 800; letter-spacing: .06em; }
.territory-node b { font-size: 1.25rem; line-height: 1.12rem; }
.territory-node small { position: absolute; left: 50%; top: 63px; width: 140px; transform: translateX(-50%); padding: 4px 6px; border-radius: 5px; background: rgba(4,8,15,.88); color: #fff4d4; font-size: .72rem; line-height: 1.15; opacity: 0; pointer-events: none; transition: opacity .15s ease; }
.territory-node:hover small, .territory-node.selected small, .territory-node.neighbor small, .territory-node.ai-source small, .territory-node.ai-target small { opacity: 1; }
.territory-node.capital { z-index: 5; width: 76px; height: 76px; min-height: 76px; border: 4px double #fff0a8; background: radial-gradient(circle at 35% 28%, #fff5c9, color-mix(in srgb, var(--realm-color) 78%, #211707) 66%); box-shadow: 0 0 0 5px rgba(228,195,111,.22), 0 0 32px rgba(255,215,105,.9), 0 9px 20px rgba(0,0,0,.82); }
.territory-node.capital::before { content: "FŐVÁROS"; position: absolute; left: 50%; top: -24px; transform: translateX(-50%); padding: 3px 7px; border: 1px solid #c9a84e; border-radius: 999px; color: #fff0a8; background: rgba(5,8,15,.94); font-size: .57rem; font-weight: 900; letter-spacing: .08em; white-space: nowrap; }
.territory-node.capital::after { content: "♛"; position: absolute; right: -9px; top: -14px; color: var(--gold-bright); font-size: 1.55rem; filter: drop-shadow(0 2px 4px #000); }
.territory-node.capital small { top: 80px; font-weight: 800; }
.territory-node.commanded { border-color: #fff; }
.territory-node .hero-marker { position: absolute; right: -11px; bottom: -12px; width: 30px; height: 30px; display: grid; place-items: center; border: 2px solid #fff4c8; border-radius: 50%; background: #11182a; box-shadow: 0 4px 10px #000, 0 0 14px var(--realm-color); font-size: 1rem; line-height: 1; letter-spacing: 0; }
.territory-node .hero-marker sup { position: absolute; right: -5px; top: -7px; width: 16px; height: 16px; display: grid; place-items: center; border-radius: 50%; color: #191205; background: var(--gold-bright); font-size: .58rem; }
.territory-node.selected { outline: 3px solid white; outline-offset: 4px; }
.territory-node.neighbor { box-shadow: 0 0 0 5px rgba(119,220,255,.28), 0 0 27px rgba(100,215,255,.92), 0 7px 16px rgba(0,0,0,.72); }
.territory-node.valid-target { animation: target-pulse 1.2s ease-in-out infinite; border-color: var(--gold-bright); }
.territory-node.frozen { filter: saturate(.45) brightness(1.35); box-shadow: 0 0 0 3px rgba(155, 225, 255, .72), 0 0 24px rgba(96, 193, 255, .8); }
.territory-node i, .territory-node em { position: absolute; width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; background: #10172a; font-size: .66rem; font-style: normal; }
.territory-node i { left: -7px; bottom: -5px; color: #d5e0ef; }
.territory-node em { right: -7px; bottom: -5px; color: var(--gold-bright); }
.territory-node.ai-source { animation: ai-source-pulse .7s ease-in-out infinite alternate; }
.territory-node.ai-target { animation: ai-target-pulse .55s ease-in-out infinite alternate; }
@keyframes ai-source-pulse { to { box-shadow: 0 0 0 7px rgba(255,255,255,.22), 0 0 28px #fff; } }
@keyframes ai-target-pulse { to { box-shadow: 0 0 0 8px rgba(255,70,70,.25), 0 0 34px #ff4c4c; } }
@keyframes target-pulse { 50% { box-shadow: 0 0 0 5px rgba(255, 226, 154, .34), 0 0 22px rgba(255, 226, 154, .85); } }
.panel-kicker { color: var(--gold); font-size: .76rem; letter-spacing: .14em; }
.territory-panel h2 { margin: 0; font-size: 1.85rem; line-height: 1.08; }
.territory-panel dl { display: grid; gap: 8px; margin: 4px 0; }
.territory-panel dl div { display: flex; justify-content: space-between; gap: 8px; padding-bottom: 9px; border-bottom: 1px solid var(--line); font-size: .95rem; }
.territory-panel dt { color: var(--muted); }
.territory-panel dd { margin: 0; text-align: right; }
.territory-command { display: grid; gap: 7px; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.035); }
.territory-command > strong { color: var(--gold); font-size: .71rem; letter-spacing: .1em; }.territory-command.has-hero { border-color: rgba(255,226,154,.34); background: rgba(228,195,111,.07); }.territory-command.garrison-only { border-color: rgba(145,169,203,.24); }
.territory-command > button { min-height: 62px; display: grid; grid-template-columns: 38px 1fr; align-items: center; gap: 8px; padding: 7px 8px; text-align: left; }.territory-command > button.selected { border-color: var(--gold-bright); background: rgba(228,195,111,.12); }.territory-command > button > b { font-size: 1.45rem; }.territory-command > button > span { display: grid; gap: 2px; }.territory-command > button small { color: var(--gold); font-size: .69rem; }.territory-command > button em { color: var(--muted); font-size: .69rem; font-style: normal; line-height: 1.25; }.territory-command > p { margin: 0; color: var(--muted); font-size: .78rem; line-height: 1.4; }
.neighbor-list { display: grid; gap: 8px; padding: 10px; border: 1px solid rgba(141,231,255,.28); border-radius: 10px; background: rgba(64,177,214,.07); }
.neighbor-list > strong { color: #a8ecff; font-size: .72rem; letter-spacing: .11em; }.neighbor-list > div { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.neighbor-chip { min-height: 52px; display: grid; justify-items: start; gap: 3px; padding: 7px 8px; text-align: left; border-color: color-mix(in srgb, var(--realm-color) 48%, var(--line)); background: color-mix(in srgb, var(--realm-color) 11%, var(--panel-2)); }
.neighbor-chip span { font-size: .76rem; font-weight: 800; line-height: 1.18; }.neighbor-chip small { color: var(--muted); font-size: .68rem; }
.action-buttons { display: grid; gap: 7px; }
.action-box { display: grid; gap: 8px; padding: 10px; border: 1px solid rgba(228,195,111,.35); border-radius: 10px; background: rgba(228,195,111,.06); }
.action-box span, .action-box small, .action-box label { color: var(--muted); font-size: .9rem; line-height: 1.45; }
.action-box label { display: grid; gap: 6px; }
.action-box input[type="range"] { width: 100%; accent-color: var(--gold); }
.message-box { min-height: 92px; margin: 0; padding: 12px; border-left: 4px solid var(--gold); background: rgba(228,195,111,.07); color: #e1e7f5; font-size: .91rem; line-height: 1.5; }
.ai-panel { display: grid; justify-items: center; gap: 8px; padding: 16px 10px; border: 1px solid color-mix(in srgb, var(--realm-color) 70%, var(--gold)); border-radius: 10px; text-align: center; background: color-mix(in srgb, var(--realm-color) 14%, transparent); }
.ai-panel small { color: var(--muted); font-size: .82rem; line-height: 1.4; }
.ai-spinner { font-size: 2rem; color: var(--gold-bright); animation: spin 1.6s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.war-log { max-height: 210px; display: grid; gap: 7px; padding: 11px; overflow-y: auto; border: 1px solid var(--line); border-radius: 10px; background: rgba(2,6,13,.35); }
.war-log > strong { color: var(--gold); font-size: .76rem; letter-spacing: .12em; }
.war-log p { margin: 0; padding-top: 7px; border-top: 1px solid rgba(255,255,255,.08); color: #cbd4e7; font-size: .77rem; line-height: 1.35; }
.war-log small { color: var(--muted); font-size: .8rem; }
.battle-overlay { position: absolute; z-index: 12; inset: 0; display: grid; place-items: center; pointer-events: none; background: radial-gradient(circle, rgba(3,6,13,.24), rgba(3,6,13,.62)); }
.battle-card { width: min(650px, 76%); display: grid; justify-items: center; gap: 14px; padding: 24px; pointer-events: auto; border: 2px solid var(--gold); border-radius: 18px; background: linear-gradient(150deg, rgba(20,28,49,.98), rgba(7,11,22,.98)); box-shadow: 0 22px 70px rgba(0,0,0,.8), 0 0 42px rgba(228,195,111,.2); animation: battle-in .34s ease-out; }
@keyframes battle-in { from { opacity: 0; transform: scale(.82); } }
.battle-kicker { color: var(--gold); letter-spacing: .18em; font-size: .76rem; font-weight: 800; }
.battle-card h2 { margin: 0; font-size: 2rem; text-align: center; }
.battle-route { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; text-align: center; font-size: .95rem; }
.battle-route span { color: #f16a4d; font-size: 1.5rem; }
.dice-board { width: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 18px; }
.dice-board > div { display: grid; justify-items: center; gap: 9px; }.dice-board b { font-size: .82rem; letter-spacing: .12em; }.dice-board small { color: var(--muted); }
.battle-versus { color: var(--gold); font: 800 1.2rem Georgia, serif; }
.dice-row { display: flex; justify-content: center; gap: 10px; min-height: 66px; }
.die { width: 62px; height: 62px; display: grid; grid-template-columns: repeat(3,1fr); grid-template-rows: repeat(3,1fr); gap: 3px; padding: 9px; border-radius: 11px; box-shadow: 0 8px 16px rgba(0,0,0,.55), 0 0 18px color-mix(in srgb, var(--die-color) 45%, transparent); animation: dice-land .45s cubic-bezier(.2,.8,.2,1); }
.die-attack { --die-color: #d9553c; background: linear-gradient(145deg, #ff8a69, #9b251d); border: 2px solid #ffc1ab; }.die-defense { --die-color: #3b8fd3; background: linear-gradient(145deg, #80c9ff, #19538f); border: 2px solid #c2e7ff; }
.die i { width: 8px; height: 8px; place-self: center; border-radius: 50%; background: transparent; }.die i.pip-on { background: white; box-shadow: 0 1px 2px rgba(0,0,0,.6); }
@keyframes dice-land { from { opacity: 0; transform: rotate(160deg) scale(.55); } }
.captured-text { padding: 8px 14px; border-radius: 999px; color: #201600; background: var(--gold-bright); }
.battle-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 9px; }
.winner-overlay { position: absolute; z-index: 20; inset: 0; display: grid; place-content: center; justify-items: center; gap: 10px; text-align: center; background: rgba(4,7,15,.88); backdrop-filter: blur(8px); }
.winner-overlay span { font-size: 4rem; }
.winner-overlay h2 { margin: 0; font-size: clamp(2rem, 5vw, 4rem); }
.hint { font-size: .78rem; line-height: 1.45; }

@media (max-width: 1500px) {
  .realm-overview { min-width: 1324px; }
  .game-layout { grid-template-columns: 210px minmax(820px, 1fr) 270px; min-width: 1324px; }
  .ruler-portrait { min-height: 185px; }
  .territory-node { width: 52px; height: 52px; min-height: 52px; }
  .territory-node small { top: 57px; }
  .territory-node.capital { width: 66px; height: 66px; min-height: 66px; }
  .territory-node.capital small { top: 70px; }
  .realm-stat { padding: 8px; gap: 6px; }.realm-stat > span { font-size: 1.2rem; }.realm-stat > b { font-size: 1rem; }
}
@media (max-width: 980px) {
  .setup-info-grid { grid-template-columns: 1fr; }
  .game-header, .turn-footer, .realm-overview { min-width: 1324px; }
}
@media (max-width: 700px) {
  .realm-picker { grid-template-columns: repeat(2, 1fr); }
  .setup-options { grid-template-columns: 1fr; }
  .rule-steps { grid-template-columns: 1fr; }
  .chosen-summary { grid-template-columns: auto 1fr; }
  .chosen-summary .primary-button { grid-column: 1 / -1; }
}
@media (max-width: 430px) {
  .realm-picker { grid-template-columns: 1fr; }
}