@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700;800&family=Unbounded:wght@500;600;700&display=swap');

:root {
  color-scheme: dark;
  --ink: #eef0e7;
  --muted: #aeb5aa;
  --night: #0b0f0d;
  --panel: rgba(14, 19, 17, .92);
  --line: rgba(235, 229, 199, .18);
  --gold: #d4b46a;
  --green: #66b77b;
  --red: #ba475a;
  --font-display: 'Unbounded', Georgia, serif;
  --font-body: 'Manrope', system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; background: var(--night); color: var(--ink); font-family: var(--font-body); }
button { font: inherit; }
button:focus-visible { outline: 2px solid #f8dc92; outline-offset: 4px; }
.screen { position: fixed; inset: 0; display: none; }
.screen.active { display: flex; }
.eyebrow { margin: 0 0 .9rem; color: var(--gold); font-size: .7rem; font-weight: 800; letter-spacing: .24em; text-transform: uppercase; }

.title-screen { align-items: flex-end; padding: clamp(2rem, 6vw, 6rem); background: #0f1511 url('./assets/four-realms.png') center/cover no-repeat; }
.title-screen::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(5,8,6,.93) 0%, rgba(5,8,6,.56) 42%, rgba(5,8,6,.05) 72%), linear-gradient(0deg, rgba(5,8,6,.72), transparent 55%); }
.title-vignette { position: absolute; inset: 0; z-index: 1; box-shadow: inset 0 0 11rem rgba(0,0,0,.72); pointer-events: none; }
.title-copy { position: relative; z-index: 2; width: min(690px, 100%); }
.title-copy h1 { margin: 0; font-family: var(--font-display); font-size: clamp(3.2rem, 8vw, 7.4rem); line-height: .84; letter-spacing: -.07em; text-transform: uppercase; text-shadow: 0 4px 34px #000; }
.title-copy h1 span { display: block; }
.title-copy h1 small { display: block; margin-top: 1.1rem; color: #e2c981; font-size: .22em; letter-spacing: .2em; }
.title-lead { max-width: 650px; margin: 2rem 0; color: #d5d8cf; font-size: clamp(.95rem, 1.4vw, 1.15rem); line-height: 1.7; }
.title-actions { display: flex; gap: .8rem; flex-wrap: wrap; }
.button { min-height: 52px; padding: 0 1.4rem; border: 1px solid transparent; border-radius: 3px; color: var(--ink); cursor: pointer; font-weight: 800; letter-spacing: .02em; transition: transform .18s ease, background .18s ease, border-color .18s ease; }
.button:hover:not(:disabled) { transform: translateY(-2px); }
.button:disabled { opacity: .36; cursor: not-allowed; }
.button.primary { background: var(--gold); color: #17140d; }
.button.ghost { border-color: var(--line); background: rgba(12,17,14,.58); backdrop-filter: blur(8px); }
.button.ghost:hover { border-color: rgba(242,219,155,.5); }
.button.quiet { background: transparent; color: var(--muted); }
.title-note { margin: 1rem 0 0; color: rgba(232,237,225,.52); font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.world-key { position: absolute; right: clamp(1.5rem, 4vw, 4rem); bottom: clamp(1.5rem, 4vw, 4rem); z-index: 2; display: grid; gap: .65rem; padding: 1.1rem 1.25rem; border: 1px solid var(--line); background: rgba(8,12,10,.48); backdrop-filter: blur(12px); color: #ced3c9; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; }
.world-key span { display: flex; align-items: center; gap: .7rem; }
.world-key i { width: 8px; height: 8px; border-radius: 50%; box-shadow: 0 0 12px currentColor; }
.world-key .forest { background: #4ea663; color: #4ea663; }.world-key .neutral { background: #b49b61; color: #b49b61; }.world-key .palace { background: #b4c0cf; color: #b4c0cf; }.world-key .fort { background: #9c5363; color: #9c5363; }

.faction-screen { overflow: auto; flex-direction: column; align-items: center; justify-content: center; padding: clamp(2rem, 5vw, 5rem); background: radial-gradient(circle at 50% 0%, #26362e, transparent 47%), #0b100e; }
.faction-screen::before { content: ''; position: absolute; inset: 0; opacity: .07; background-image: linear-gradient(30deg, transparent 48%, #fff 49%, transparent 51%); background-size: 62px 62px; pointer-events: none; }
.faction-heading { position: relative; width: min(1180px, 100%); margin-bottom: 2.1rem; }
.faction-heading h2, .panel h2 { margin: 0; font-family: var(--font-display); font-size: clamp(2rem, 4vw, 4.2rem); line-height: 1.05; }
.faction-heading > p:last-child { max-width: 700px; color: var(--muted); line-height: 1.65; }
.faction-grid { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; width: min(1180px, 100%); }
.faction-card { position: relative; min-height: 390px; overflow: hidden; padding: 1.6rem; border: 1px solid var(--line); background: linear-gradient(145deg, rgba(33,42,37,.98), rgba(13,17,15,.98)); color: var(--ink); cursor: pointer; text-align: left; transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; }
.faction-card::after { content: ''; position: absolute; inset: auto -20% -55% 0; height: 75%; border-radius: 50%; background: var(--card-color); opacity: .16; filter: blur(35px); }
.faction-card:hover { z-index: 2; transform: translateY(-8px); border-color: var(--card-color); box-shadow: 0 24px 60px rgba(0,0,0,.45); }
.faction-card.elf { --card-color: #6bc47f; }.faction-card.guard { --card-color: #d9b75f; }.faction-card.villain { --card-color: #c84d65; }
.faction-number { color: var(--card-color); font-family: var(--font-display); font-size: .68rem; letter-spacing: .16em; }
.faction-icon { display: block; margin: 2.8rem 0 1.2rem; color: var(--card-color); font-family: Georgia, serif; font-size: 4rem; line-height: 1; text-shadow: 0 0 34px var(--card-color); }
.faction-card strong, .faction-card em, .faction-card > span:nth-of-type(3), .faction-card b { position: relative; z-index: 1; display: block; }
.faction-card strong { font-family: var(--font-display); font-size: 1.35rem; }
.faction-card em { margin: .7rem 0 1.3rem; color: var(--card-color); font-size: .72rem; font-style: normal; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; }
.faction-card > span:nth-of-type(3) { color: var(--muted); font-size: .9rem; line-height: 1.65; }
.faction-card b { position: absolute; right: 1.6rem; bottom: 1.5rem; left: 1.6rem; color: var(--card-color); font-size: .8rem; text-transform: uppercase; }
.text-button { position: relative; align-self: flex-start; width: min(1180px, 100%); margin: 1.4rem auto 0; padding: .7rem 0; border: 0; background: none; color: var(--muted); cursor: pointer; text-align: left; }

.loading-screen { z-index: 30; flex-direction: column; align-items: center; justify-content: center; gap: 1.5rem; background: #0b100e; }
.loader-mark { display: grid; width: 78px; height: 78px; place-items: center; border: 1px solid #d2b66e; border-radius: 50%; color: #d2b66e; font-family: var(--font-display); font-size: 2rem; animation: breathe 1.4s ease-in-out infinite; }
.loading-screen p { color: var(--muted); }
@keyframes breathe { 50% { transform: scale(1.08); box-shadow: 0 0 40px rgba(210,182,110,.22); } }

.game-screen { background: #111; }
#game-canvas-container, #game-canvas-container canvas { width: 100%; height: 100%; display: block; }
.cinematic-bars::before, .cinematic-bars::after { content: ''; position: absolute; right: 0; left: 0; z-index: 2; height: env(safe-area-inset-top, 0); background: #000; }
.cinematic-bars::before { top: 0; }.cinematic-bars::after { bottom: 0; }
.hud { position: absolute; z-index: 4; pointer-events: none; }
.hud-status { top: 1.25rem; left: 1.25rem; width: min(330px, calc(100vw - 2.5rem)); padding: .85rem; border-left: 2px solid var(--gold); background: linear-gradient(90deg, rgba(7,10,9,.78), rgba(7,10,9,.15)); text-shadow: 0 1px 3px #000; }
.hud-caption { display: flex; justify-content: space-between; margin-bottom: .55rem; font-size: .73rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.meter { height: 5px; margin: .25rem 0; overflow: hidden; background: rgba(255,255,255,.13); }
.meter i { display: block; width: 100%; height: 100%; transition: width .2s ease; }
.meter.health i { background: #c84a52; }.meter.stamina i { background: #d9b557; }.meter.bleed i { background: #7c1f32; }
.body-status { display: flex; gap: .35rem; flex-wrap: wrap; margin-top: .55rem; }
.body-part { padding: .2rem .35rem; border: 1px solid rgba(255,255,255,.16); color: #bdc4ba; font-size: .57rem; text-transform: uppercase; }
.body-part.wounded { color: #f0bb61; }.body-part.severed { color: #ff6276; border-color: rgba(255,98,118,.5); }.body-part.prosthetic { color: #b9dce1; }
.hud-objective { top: 1.25rem; left: 50%; width: min(460px, 46vw); padding: .8rem 1.2rem; transform: translateX(-50%); border-top: 1px solid rgba(230,219,180,.45); background: linear-gradient(180deg, rgba(7,10,9,.72), transparent); text-align: center; text-shadow: 0 2px 4px #000; }
.hud-objective span { display: block; margin-bottom: .35rem; color: var(--gold); font-size: .58rem; font-weight: 800; letter-spacing: .18em; text-transform: uppercase; }
.hud-objective strong { font-size: .82rem; line-height: 1.4; }
.hud-resources { top: 1.25rem; right: 1.25rem; display: flex; gap: .6rem; }
.hud-resources div { min-width: 76px; padding: .55rem .75rem; border: 1px solid rgba(255,255,255,.13); background: rgba(7,10,9,.64); }
.hud-resources span { display: block; color: #abb3aa; font-size: .55rem; letter-spacing: .1em; text-transform: uppercase; }
.hud-resources strong { color: #f0d589; }
.minimap { position: absolute; right: 1.25rem; bottom: 3.5rem; z-index: 4; width: 144px; height: 144px; border-radius: 50%; box-shadow: 0 8px 30px rgba(0,0,0,.5); opacity: .9; }
.crosshair { position: absolute; top: 50%; left: 50%; z-index: 4; width: 22px; height: 22px; transform: translate(-50%,-50%); pointer-events: none; }
.crosshair i { position: absolute; top: 50%; left: 50%; background: rgba(255,246,218,.85); box-shadow: 0 0 3px #000; }
.crosshair i:first-child { width: 18px; height: 1px; transform: translate(-50%,-50%); }.crosshair i:last-child { width: 1px; height: 18px; transform: translate(-50%,-50%); }
.interaction-prompt { position: absolute; bottom: 18%; left: 50%; z-index: 5; padding: .55rem .9rem; transform: translate(-50%, 12px); border: 1px solid rgba(242,218,150,.35); background: rgba(7,10,9,.82); color: #f4dc96; font-size: .75rem; font-weight: 800; opacity: 0; transition: .2s ease; pointer-events: none; }
.interaction-prompt.visible { transform: translate(-50%,0); opacity: 1; }
.ability-label, .order-menu { position: absolute; bottom: 1.4rem; z-index: 4; padding: .45rem .65rem; border: 1px solid rgba(255,255,255,.15); background: rgba(7,10,9,.68); font-size: .68rem; font-weight: 700; }
.ability-label { left: 1.25rem; color: #87d598; }.order-menu { left: 10.5rem; color: #e1c475; }
.controls-hint { position: absolute; bottom: 1rem; left: 50%; z-index: 3; display: flex; gap: .8rem; transform: translateX(-50%); color: rgba(255,255,255,.48); font-size: .56rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.toast-container { position: absolute; top: 7rem; left: 50%; z-index: 12; display: grid; gap: .45rem; width: min(540px, calc(100vw - 2rem)); transform: translateX(-50%); pointer-events: none; }
.toast { padding: .8rem 1rem; transform: translateY(-10px); border-left: 2px solid var(--gold); background: rgba(10,14,12,.9); box-shadow: 0 8px 28px rgba(0,0,0,.3); color: #e9ece3; font-size: .76rem; opacity: 0; transition: .25s ease; }
.toast.visible { transform: none; opacity: 1; }.toast.danger { border-color: #df5269; color: #ffd7dc; }
.damage-flash { position: absolute; inset: 0; z-index: 8; pointer-events: none; }
.damage-flash.hit { animation: damage .38s ease-out; }
@keyframes damage { from { box-shadow: inset 0 0 12rem 3rem rgba(155,15,34,.85); } to { box-shadow: inset 0 0 3rem transparent; } }
.eye-mask { position: absolute; top: 0; bottom: 0; z-index: 7; width: 52%; background: radial-gradient(ellipse at center, rgba(0,0,0,.82), #000 75%); opacity: 0; transition: opacity .5s ease; pointer-events: none; }
.eye-mask.left { left: 0; }.eye-mask.right { right: 0; }.eye-mask.visible { opacity: .94; }

.overlay { z-index: 20; align-items: center; justify-content: center; overflow: auto; padding: 1.5rem; background: rgba(4,7,5,.78); backdrop-filter: blur(13px); }
.panel { width: min(620px, 100%); max-height: calc(100vh - 3rem); overflow: auto; padding: clamp(1.5rem, 4vw, 3rem); border: 1px solid var(--line); background: linear-gradient(145deg, rgba(27,34,30,.98), rgba(10,14,12,.99)); box-shadow: 0 32px 90px rgba(0,0,0,.65); }
.pause-panel { width: min(500px, 100%); text-align: center; }
.pause-actions { display: grid; gap: .65rem; margin: 2rem 0; }
.controls-sheet { display: grid; grid-template-columns: repeat(3, 1fr); gap: .55rem; border-top: 1px solid var(--line); padding-top: 1.4rem; color: var(--muted); font-size: .65rem; text-align: left; }
kbd { display: inline-block; min-width: 32px; padding: .2rem .3rem; border: 1px solid rgba(255,255,255,.18); border-radius: 3px; background: rgba(255,255,255,.06); color: #f1deaa; font: 700 .62rem var(--font-body); text-align: center; }
.shop-panel { width: min(820px, 100%); }
.shop-panel header { display: flex; justify-content: space-between; gap: 1rem; }
.shop-panel h2 { font-size: clamp(1.6rem, 4vw, 2.7rem); }
.close-button { align-self: flex-start; width: 40px; height: 40px; border: 1px solid var(--line); background: transparent; color: #fff; cursor: pointer; font-size: 1.6rem; }
.shop-intro { color: var(--muted); line-height: 1.6; }
.shop-items { display: grid; grid-template-columns: 1fr 1fr; gap: .65rem; margin-top: 1.4rem; }
.shop-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 112px; padding: 1rem; border: 1px solid var(--line); background: rgba(255,255,255,.025); }
.shop-item h3 { margin: 0 0 .35rem; color: #ecd38d; font-size: .88rem; }.shop-item p { margin: 0; color: var(--muted); font-size: .68rem; line-height: 1.45; }
.shop-item button { flex: 0 0 auto; min-width: 84px; padding: .6rem; border: 1px solid #987b43; background: #cfaf65; color: #18130b; cursor: pointer; font-weight: 800; }
.shop-item button:disabled { border-color: var(--line); background: rgba(255,255,255,.06); color: #777; cursor: not-allowed; }
.result-panel { text-align: center; }.result-summary > p { color: #d8ddcf; font-size: 1rem; line-height: 1.65; }
.result-summary dl { display: grid; grid-template-columns: repeat(4, 1fr); margin: 2rem 0; border-block: 1px solid var(--line); }
.result-summary dl div { padding: 1rem .4rem; }.result-summary dt { color: var(--muted); font-size: .58rem; text-transform: uppercase; }.result-summary dd { margin: .4rem 0 0; color: #edd38b; font-weight: 800; }
.result-actions { display: flex; justify-content: center; gap: .7rem; flex-wrap: wrap; }

@media (max-width: 820px) {
  .world-key { display: none; }
  .faction-screen { justify-content: flex-start; }
  .faction-grid { grid-template-columns: 1fr; }
  .faction-card { min-height: 300px; }
  .faction-icon { margin: 1.5rem 0 .8rem; }
  .hud-objective { top: 7.2rem; width: calc(100vw - 2.5rem); }
  .hud-resources { top: 7.2rem; right: 1.25rem; transform: scale(.82); transform-origin: right top; }
  .minimap { width: 100px; height: 100px; }
  .controls-hint { display: none; }
  .shop-items { grid-template-columns: 1fr; }
}

@media (max-width: 520px) {
  .title-screen { align-items: center; padding: 1.5rem; }
  .title-copy { width: calc(100vw - 4.5rem); max-width: calc(100vw - 4.5rem); margin-right: 1.5rem; }
  .title-copy h1 { font-size: clamp(2rem, 9.2vw, 3rem); }
  .title-lead, .title-actions, .title-note { width: min(280px, 100%); max-width: 280px; }
  .title-actions .button { width: 100%; }
  .title-note { max-width: 100%; font-size: .62rem; line-height: 1.5; }
  .faction-screen { padding: 1.5rem 1rem; }
  .hud-status { top: .7rem; left: .7rem; width: 240px; }
  .hud-objective { top: 7rem; width: calc(100vw - 1.4rem); }
  .hud-resources { top: .7rem; right: .7rem; }
  .hud-resources div:last-child { display: none; }
  .minimap { right: .7rem; bottom: 3.3rem; width: 88px; height: 88px; }
  .ability-label { left: .7rem; bottom: .7rem; }.order-menu { left: auto; right: .7rem; bottom: .7rem; }
  .controls-sheet { grid-template-columns: repeat(2, 1fr); }
  .result-summary dl { grid-template-columns: repeat(2, 1fr); }
}

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