:root {
  color-scheme: dark;
  --ink: #13120f;
  --ink-soft: #262118;
  --parchment: #f4dfad;
  --sand: #c99a58;
  --gold: #e6bd6a;
  --copper: #b85e3e;
  --lapis: #246d78;
  --lapis-bright: #55c7b6;
  --crimson: #9d382f;
  --crimson-bright: #e06d55;
  --glass: rgba(18, 17, 13, 0.84);
  --line: rgba(240, 208, 142, 0.23);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  overflow: hidden;
  background: #0f0e0c;
  color: var(--parchment);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

button { font: inherit; color: inherit; }
button:focus-visible { outline: 2px solid #fff1bd; outline-offset: 3px; }

#game-shell { position: relative; width: 100%; height: 100%; isolation: isolate; overflow: hidden; background: #211d15; }
#battlefield { position: absolute; inset: 0; width: 100%; height: 100%; cursor: crosshair; }

.vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(8, 8, 6, 0.54), transparent 23%, transparent 69%, rgba(8, 7, 5, 0.62)),
    radial-gradient(ellipse at center, transparent 45%, rgba(5, 5, 4, 0.55) 110%);
  mix-blend-mode: multiply;
  z-index: 2;
}

#impact-flash { position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0; background: #ffe4a4; mix-blend-mode: screen; }
#impact-flash.flash { animation: impact-flash .19s ease-out; }
@keyframes impact-flash { 0% { opacity: .26; } 100% { opacity: 0; } }

.hidden { display: none !important; }
.hud { position: absolute; z-index: 10; }
.eyebrow { display: block; color: rgba(244, 223, 173, .58); font-size: 9px; line-height: 1.2; font-weight: 800; letter-spacing: .19em; text-transform: uppercase; }

#battle-hud {
  top: calc(10px + var(--safe-top));
  left: 18px;
  right: 18px;
  height: 72px;
  display: grid;
  grid-template-columns: minmax(190px, 1fr) minmax(300px, 38vw) minmax(190px, 1fr);
  align-items: start;
  pointer-events: none;
}

.commander { display: flex; align-items: center; gap: 11px; }
.commander-enemy { justify-content: flex-end; text-align: right; }
.commander strong { display: block; margin-top: 3px; font-family: Georgia, "Times New Roman", serif; font-size: 13px; letter-spacing: .13em; }
.avatar {
  width: 52px; height: 52px; border-radius: 14px 4px 14px 4px; display: grid; place-items: center;
  background: linear-gradient(145deg, rgba(255,255,255,.16), rgba(0,0,0,.24)), var(--lapis);
  border: 1px solid rgba(246, 221, 159, .56); box-shadow: 0 10px 22px #0008, inset 0 0 18px #fff1;
  font-family: Georgia, serif; font-size: 26px; font-weight: 700; color: #ffe6a4;
}
.rival-avatar { background-color: var(--crimson); }
.health-track { position: relative; margin-top: 7px; width: clamp(100px, 15vw, 210px); height: 5px; background: #0008; overflow: hidden; clip-path: polygon(0 0, 100% 0, 97% 100%, 3% 100%); }
.health-track i { display: block; width: 100%; height: 100%; background: linear-gradient(90deg, #317f83, #6ee1c3); box-shadow: 0 0 10px #4fc9ae; transform-origin: left; }
.commander-enemy .health-track i { background: linear-gradient(90deg, #ed7c5c, #a62f2c); transform-origin: right; }

.tug-panel {
  justify-self: center; width: min(100%, 520px); padding: 7px 18px 8px;
  background: linear-gradient(180deg, rgba(16,14,10,.92), rgba(27,22,15,.74));
  border: 1px solid var(--line); clip-path: polygon(4% 0, 96% 0, 100% 23%, 96% 100%, 4% 100%, 0 23%);
  box-shadow: 0 14px 28px #0009;
}
.wave-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: baseline; gap: 12px; font-size: 8px; letter-spacing: .15em; color: #b8a77e; }
.wave-row span:last-child { text-align: right; }
.wave-row strong { color: #f7dfa3; font-size: 17px; letter-spacing: .06em; font-variant-numeric: tabular-nums; }
.tug-track { position: relative; display: flex; height: 8px; margin: 6px 0 5px; overflow: visible; background: #060605; border: 1px solid #e3bf6c66; }
.tug-blue, .tug-red { width: 50%; height: 100%; }
.tug-blue { background: linear-gradient(90deg, #245766, #4ab6a8); }
.tug-red { background: linear-gradient(90deg, #d3634e, #7e2a29); }
#tug-marker { position: absolute; left: 50%; top: -7px; width: 5px; height: 20px; transform: translateX(-50%); background: #ffdfa0; box-shadow: 0 0 12px #ffd97b; transition: left .35s cubic-bezier(.2,.8,.2,1); }
#tug-marker span { position: absolute; left: 50%; top: -4px; width: 9px; height: 9px; transform: translateX(-50%) rotate(45deg); background: #f2cc77; }
.tug-panel > small { display: block; text-align: center; font-size: 7px; letter-spacing: .17em; color: #ccbc95; }

#resource-rail { top: calc(94px + var(--safe-top)); left: 18px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.resource { display: grid; grid-template-columns: 30px auto; grid-template-rows: auto auto; align-items: center; min-width: 112px; padding: 7px 12px 7px 7px; background: var(--glass); border: 1px solid var(--line); box-shadow: 0 8px 24px #0008; }
.resource > span { grid-row: 1/3; display: grid; place-items: center; width: 27px; height: 27px; color: #2c2414; background: linear-gradient(145deg,#ffe49a,#bd742f); border-radius: 50%; box-shadow: 0 0 13px #e7b75477; }
.resource strong { font-size: 18px; line-height: 1; color: #ffe3a1; font-variant-numeric: tabular-nums; }
.resource small { font-size: 7px; color: #ad9a70; letter-spacing: .18em; }
.tier-button { display: flex; align-items: center; gap: 9px; padding: 7px 10px 7px 7px; border: 1px solid #ddb9644f; background: linear-gradient(135deg,#312718e8,#17140ee8); box-shadow: 0 8px 24px #0008; cursor: pointer; }
.tier-button.affordable { border-color: #e7c165; box-shadow: 0 0 18px #dc9d393b, 0 8px 24px #0008; }
.tier-button:disabled { opacity: .48; cursor: not-allowed; }
.tier-glyph { display: grid; place-items: center; width: 30px; height: 30px; border: 1px solid #debd73; color: #f8d988; font-family: Georgia,serif; font-weight: 700; background: #a9563629; clip-path: polygon(50% 0, 100% 26%, 90% 84%, 50% 100%, 10% 84%, 0 26%); }
.tier-button strong { display:block; font-size: 9px; letter-spacing: .12em; }
.tier-button small { display:block; margin-top: 3px; color:#9c8d6d; font-size: 7px; letter-spacing:.08em; }
.tier-button small b { color:#e5be69; }
.round-button { width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--line); background: var(--glass); color: #d7bd84; font-family: Georgia,serif; font-weight: 700; cursor: pointer; box-shadow: 0 8px 20px #0007; }

.battle-callout { position: absolute; z-index: 12; top: 25%; left: 50%; transform: translateX(-50%); width: min(440px, 46vw); padding: 13px 22px; text-align: center; pointer-events: none; background: linear-gradient(90deg,transparent,#17130ee8 14%,#17130ee8 86%,transparent); animation: callout 4.8s both; }
.battle-callout span { display:block; color:#c19449; font-size:8px; font-weight:800; letter-spacing:.23em; }
.battle-callout strong { display:block; margin:3px; color:#ffe1a0; font-family:Georgia,serif; font-size:19px; letter-spacing:.12em; }
.battle-callout p { margin:0; color:#cbb98f; font-size:10px; letter-spacing:.03em; }
@keyframes callout { 0%{opacity:0;transform:translate(-50%,8px)} 9%,75%{opacity:1;transform:translate(-50%,0)} 100%{opacity:0} }

.wave-banner { position:absolute; z-index:14; top:38%; left:50%; transform:translate(-50%,-50%) scale(.9); width:min(600px,70vw); text-align:center; pointer-events:none; opacity:0; }
.wave-banner::before,.wave-banner::after { content:""; position:absolute; top:50%; width:36%; height:1px; background:linear-gradient(90deg,transparent,#f1c56e); }
.wave-banner::before { right:68%; } .wave-banner::after { left:68%; transform:scaleX(-1); }
.wave-banner small,.wave-banner span { display:block; font-size:8px; font-weight:800; letter-spacing:.28em; color:#e2b85f; }
.wave-banner strong { display:block; margin:3px 0; font-family:Georgia,serif; font-size:clamp(25px,4vw,46px); letter-spacing:.14em; color:#ffe3a1; text-shadow:0 4px 20px #000,0 0 30px #e39b4655; }
.wave-banner.show { animation: wave-banner 2.8s ease both; }
@keyframes wave-banner { 0%{opacity:0;transform:translate(-50%,-50%) scale(.74)} 17%,70%{opacity:1;transform:translate(-50%,-50%) scale(1)} 100%{opacity:0;transform:translate(-50%,-54%) scale(1.04)} }

.command-deck {
  left: 0; right: 0; bottom: 0; min-height: calc(150px + var(--safe-bottom)); padding: 12px 18px calc(12px + var(--safe-bottom));
  display: grid; grid-template-columns: minmax(140px, .8fr) minmax(480px, 3fr) 68px minmax(150px, .8fr); gap: 10px; align-items: stretch;
  background: linear-gradient(180deg,rgba(13,12,9,.62),rgba(13,12,9,.97) 20%); border-top: 1px solid rgba(234,198,119,.28); box-shadow: 0 -16px 38px #0008;
}
.deck-heading { align-self:center; }
.deck-heading strong { display:block; max-width:180px; margin:5px 0 10px; font-family:Georgia,serif; font-size:12px; line-height:1.2; color:#eed8a5; }
.deck-heading > span:last-child { font-size:8px; letter-spacing:.12em; color:#7fc6b5; }
.unit-deck { display:grid; grid-template-columns:repeat(4,minmax(82px,1fr)); gap:7px; }
.unit-card { position:relative; display:grid; grid-template-columns:35px 1fr; grid-template-rows:auto auto auto; align-items:center; min-width:0; padding:7px; overflow:hidden; text-align:left; border:1px solid #e6c57629; background:linear-gradient(145deg,#2d281fe6,#171510ed); cursor:pointer; transition:transform .12s,border-color .12s,filter .12s; }
.unit-card::after { content:""; position:absolute; right:-18px; bottom:-24px; width:58px; height:58px; border:1px solid #ffffff12; transform:rotate(45deg); }
.unit-card:hover { transform:translateY(-2px); border-color:#e8c77977; }
.unit-card.selected { border-color:#ffdf8d; background:linear-gradient(145deg,#544224f2,#21190ef2); box-shadow:0 0 22px #d79a3f4d,inset 0 0 15px #e5bb5217; }
.unit-card.locked { filter:grayscale(.7) brightness(.52); cursor:not-allowed; }
.unit-card.unaffordable:not(.locked) { opacity:.54; }
.unit-sigil { grid-row:1/4; display:grid; place-items:center; width:30px;height:38px; font-family:Georgia,serif; font-size:23px; color:var(--unit-color); text-shadow:0 0 12px color-mix(in srgb,var(--unit-color),transparent 55%); }
.unit-name { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-family:Georgia,serif; font-size:10px; font-weight:700; color:#f3da9e; }
.unit-role { margin-top:2px; font-size:6px; font-weight:800; letter-spacing:.13em; color:#968561; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.unit-cost { align-self:end; margin-top:5px; font-size:9px; color:#e4bb63; font-weight:800; }
.unit-cost::before { content:"✦ "; font-size:7px; }
.unit-lock { position:absolute; inset:0; display:grid; place-items:center; background:#1715108f; color:#edcf88; font-size:8px; font-weight:800; letter-spacing:.14em; }
.recall-button { border:1px solid #c7916144; background:#261b18df; color:#b88776; cursor:pointer; }
.recall-button span { display:block; font-size:27px; line-height:1; }
.recall-button small { display:block; margin-top:8px; font-size:7px; letter-spacing:.15em; }
.recall-button.active { color:#ffe0b7; border-color:#ee977c; background:#743b32; box-shadow:0 0 18px #d9664f55; }
.hero-power { position:relative; display:flex; align-items:center; justify-content:center; gap:9px; overflow:hidden; border:1px solid #d5ac5f55; background:linear-gradient(135deg,#402516,#17130c); cursor:pointer; }
.hero-power:disabled { filter:grayscale(.8); opacity:.55; cursor:not-allowed; }
.power-ring { position:relative; width:50px;height:50px; display:grid;place-items:center; border:2px solid #e6bd6b; border-radius:50%; box-shadow:0 0 15px #d8903e44; overflow:hidden; }
.power-ring b { position:relative; z-index:1; font-family:Georgia,serif; font-size:24px; color:#ffe3a2; }
.power-ring i { position:absolute; inset:0; top:auto; height:0%; background:#0c0b09d9; transition:height .2s; }
.hero-power strong { display:block; font-family:Georgia,serif; font-size:11px; letter-spacing:.06em; }
.hero-power small { display:block; margin-top:4px; font-size:7px; color:#b59b68; letter-spacing:.1em; }
.hero-power.ready { animation:power-ready 1.4s ease-in-out infinite alternate; }
@keyframes power-ready { to { box-shadow:0 0 22px #e7ac4c66,inset 0 0 12px #e8ad3a22; } }

.start-screen,.end-screen { position:absolute; z-index:30; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:24px; background:
  radial-gradient(circle at 50% 34%,rgba(197,117,50,.2),transparent 36%),
  linear-gradient(90deg,rgba(12,11,9,.92),rgba(14,13,10,.64) 50%,rgba(12,11,9,.92));
  backdrop-filter:blur(3px);
}
.start-screen::before { content:""; position:absolute; inset:18px; border:1px solid #d8af5a40; clip-path:polygon(0 0,28% 0,30% 1px,70% 1px,72% 0,100% 0,100% 100%,72% 100%,70% calc(100% - 1px),30% calc(100% - 1px),28% 100%,0 100%); pointer-events:none; }
.start-ornament { display:flex;align-items:center;gap:13px;margin-bottom:14px;color:#d8af5a; }
.start-ornament i { width:58px;height:1px;background:linear-gradient(90deg,transparent,#d8af5a); }
.start-ornament i:last-child { transform:scaleX(-1); }
.start-ornament b { display:grid;place-items:center;width:42px;height:42px;border:1px solid #dfb762;transform:rotate(45deg);font-family:Georgia,serif;font-size:21px; }
.start-ornament b::first-letter { transform:rotate(-45deg); }
.supertitle { margin:0;color:#bd9955;font-size:9px;font-weight:800;letter-spacing:.32em; }
.start-screen h1 { margin:9px 0 3px; line-height:.75; font-family:Georgia,"Times New Roman",serif; font-weight:500; text-shadow:0 8px 30px #000; }
.start-screen h1 span { display:block; font-size:clamp(58px,8.5vw,126px); letter-spacing:.12em; color:#f1d89d; background:linear-gradient(#fff0c1,#bf843f); background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent; }
.start-screen h1 small { display:block; margin-top:20px; font-size:clamp(12px,1.7vw,22px); letter-spacing:.55em; color:#c9a45b; }
.ink-divider { display:flex;align-items:center;gap:11px;margin:21px 0 15px;color:#d9b663; }
.ink-divider span { width:120px;height:1px;background:linear-gradient(90deg,transparent,#c59e55); }.ink-divider span:last-child{transform:scaleX(-1)}
.game-pitch { max-width:640px;margin:0;color:#d7c49b;font-family:Georgia,serif;font-size:clamp(12px,1.25vw,17px);line-height:1.55; }
.tenets { display:flex;gap:26px;margin:18px 0;color:#998666;font-size:8px;font-weight:800;letter-spacing:.18em; }.tenets b{margin-right:6px;color:#d3a958}
.primary-button { min-width:280px;padding:13px 28px 11px;border:1px solid #eccb80;background:linear-gradient(135deg,#a74b34,#6f2e28);box-shadow:0 10px 28px #000b,0 0 24px #c6673544;cursor:pointer;clip-path:polygon(5% 0,95% 0,100% 25%,96% 100%,4% 100%,0 25%); }
.primary-button:hover { filter:brightness(1.15); }
.primary-button span,.primary-button small { display:block; }.primary-button span{font-family:Georgia,serif;font-size:14px;font-weight:700;letter-spacing:.17em}.primary-button small{margin-top:5px;color:#e7bd91;font-size:7px;letter-spacing:.17em}
.text-button { margin-top:13px;border:0;background:none;color:#bfa874;font-size:8px;font-weight:800;letter-spacing:.18em;text-decoration:underline;text-underline-offset:4px;cursor:pointer; }
.historical-note { position:absolute;bottom:17px;margin:0;color:#756b55;font-size:8px;letter-spacing:.06em; }

.manual-dialog { width:min(940px,92vw);max-height:88vh;padding:0;overflow:auto;color:#2a2116;background:#e1c48c;border:1px solid #ffe4ad;box-shadow:0 30px 80px #000; }
.manual-dialog::backdrop { background:#090806d9;backdrop-filter:blur(5px); }
.manual-dialog header { padding:25px 31px 18px;background:linear-gradient(135deg,#2b2318,#18140f);color:#f0d79e; }
.manual-dialog header h2 { margin:5px 0 7px;font-family:Georgia,serif;font-size:24px;font-weight:500; }.manual-dialog header p{max-width:760px;margin:0;color:#bfae8a;font-size:11px;line-height:1.5}.manual-dialog .eyebrow{color:#c8984d}
.modal-close { position:absolute;top:12px;right:14px;z-index:1;width:34px;height:34px;border:1px solid #e8cb8966;border-radius:50%;background:#14110dd9;font-size:23px;cursor:pointer; }
.lesson-grid { display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:#725c3a33; }
.lesson-grid article { position:relative;min-height:145px;padding:22px 19px 18px 58px;background:#e7cd9b; }.lesson-grid i{position:absolute;left:18px;top:18px;font-family:Georgia,serif;font-size:28px;font-style:normal;color:#9b4933}.lesson-grid strong{display:block;font-family:Georgia,serif;font-size:15px;color:#3b2b1b}.lesson-grid p{margin:7px 0 0;font-size:10px;line-height:1.55;color:#6b5637}.manual-dialog footer{padding:13px 22px;background:#c9a971;color:#5c4428;font-size:9px;line-height:1.5;letter-spacing:.03em}.manual-dialog footer b{margin-right:8px;color:#8b3e2d;letter-spacing:.15em}

.end-screen { background:radial-gradient(circle at center,#49301fcf,#0c0b09f2 66%); }.end-screen h2{margin:7px 0;font-family:Georgia,serif;font-size:clamp(54px,9vw,120px);font-weight:500;letter-spacing:.14em;color:#f5d991;text-shadow:0 0 40px #cb7f36}.end-screen>p{margin:0 0 20px;color:#c0ac81;font-family:Georgia,serif}.battle-record{display:flex;gap:1px;margin:0 0 24px;background:#e3bd6c32}.battle-record span{min-width:120px;padding:11px 18px;background:#17130edf;color:#988460;font-size:7px;letter-spacing:.14em}.battle-record b{display:block;color:#f0d18c;font-family:Georgia,serif;font-size:22px;letter-spacing:0}

.rotate-note { display:none;position:absolute;z-index:50;inset:0;align-items:center;justify-content:center;flex-direction:column;background:#15120e;text-align:center}.rotate-note span{font-size:44px;color:#d5aa58}.rotate-note strong{margin-top:10px;font-family:Georgia,serif;font-size:22px}.rotate-note small{margin-top:7px;color:#9f8b63}

@media (max-width: 1050px) {
  #battle-hud { grid-template-columns: 1fr minmax(280px,40vw) 1fr; }
  .avatar { width:42px;height:42px }.commander strong{font-size:10px}.health-track{width:120px}
  .command-deck { min-height:128px;grid-template-columns:115px minmax(440px,3fr) 54px 135px;padding:9px 12px calc(8px + var(--safe-bottom));gap:6px }
  .unit-card { grid-template-columns:29px 1fr;padding:5px }.unit-sigil{width:25px;font-size:19px}.unit-name{font-size:9px}.unit-deck{gap:5px}.hero-power{gap:4px}.power-ring{width:43px;height:43px}.hero-power strong{font-size:9px}.deck-heading strong{font-size:10px}
}

@media (max-height: 650px) {
  #battle-hud{top:6px;height:58px}.tug-panel{padding-top:4px}.avatar{width:38px;height:38px}.health-track{margin-top:4px}
  #resource-rail{top:70px}.command-deck{min-height:112px}.deck-heading strong{margin:3px 0 5px}.unit-role{display:none}.unit-card{grid-template-rows:auto auto}.unit-sigil{grid-row:1/3}.unit-cost{margin-top:2px}.power-ring{width:38px;height:38px}.start-screen h1 span{font-size:58px}.start-screen h1 small{margin-top:14px}.ink-divider{margin:14px 0 10px}.tenets{margin:10px 0}.game-pitch{font-size:11px}.start-ornament{margin-bottom:8px}.primary-button{padding:9px 24px}.historical-note{bottom:7px}
}

@media (orientation: portrait) and (max-width: 700px) { .rotate-note { display:flex; } }
@media (prefers-reduced-motion: reduce) { *,*::before,*::after { animation-duration:.001ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important; } }