:root {
  color-scheme: dark;
  --bg: #050b0a;
  --panel: rgba(9, 24, 21, 0.86);
  --panel-strong: #0b1b18;
  --line: rgba(137, 240, 202, 0.16);
  --line-strong: rgba(137, 240, 202, 0.35);
  --text: #e8f5ef;
  --muted: #87a89d;
  --green: #26e6a0;
  --green-soft: #9dfcd9;
  --lime: #d9ff74;
  --amber: #ffb65b;
  --danger: #ff6d5a;
  --blue: #71c8ff;
  --radius: 18px;
}

* { box-sizing: border-box; }

html {
  min-height: 100%;
  background: var(--bg);
}

body {
  min-width: 320px;
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans SC", sans-serif;
  background:
    radial-gradient(circle at 50% 45%, rgba(13, 134, 97, 0.18), transparent 34rem),
    linear-gradient(155deg, #071310 0%, #030807 50%, #07100f 100%);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(112, 210, 176, 0.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(112, 210, 176, 0.025) 1px, transparent 1px);
  background-size: 42px 42px;
  mask-image: linear-gradient(to bottom, black, transparent 85%);
}

button { font: inherit; }
button:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }

.noise {
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.055;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.45'/%3E%3C/svg%3E");
}

.shell {
  position: relative;
  z-index: 1;
  width: min(1480px, calc(100% - 40px));
  margin: 0 auto;
  padding: 22px 0 28px;
}

.topbar, .metrics-dock, .status-ribbon, .game-grid, .event-strip { width: 100%; }

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 4px 18px;
  border-bottom: 1px solid var(--line);
}

.brand { display: flex; align-items: center; gap: 14px; }

.brand-mark {
  width: 36px;
  height: 36px;
  border: 1px solid var(--green);
  border-radius: 50%;
  box-shadow: 0 0 28px rgba(38, 230, 160, 0.25), inset 0 0 14px rgba(38, 230, 160, 0.15);
  position: relative;
}

.brand-mark::before, .brand-mark::after {
  content: "";
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(217, 255, 116, 0.55);
  border-radius: 50% 30% 50% 35%;
  transform: rotate(28deg);
}

.brand-mark::after { inset: 13px 3px; border-radius: 50%; transform: rotate(-35deg); }

.eyebrow {
  margin: 0 0 4px;
  color: var(--green);
  font-size: 0.73rem;
  font-weight: 760;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1, h2, p { margin-top: 0; }
h1 { margin-bottom: 0; font-size: clamp(1.35rem, 2.2vw, 2rem); line-height: 1; letter-spacing: 0.06em; }
h2 { margin-bottom: 0; font-size: 1.22rem; letter-spacing: 0.04em; }

.mission-clock { text-align: right; }
.mode-link { display: inline-block; margin-right: 8px; color: var(--green-soft); font-size: .875rem; }
.mission-clock span { display: block; color: var(--muted); font-size: 0.76rem; letter-spacing: 0.12em; }
.mission-clock strong { display: block; margin-top: 3px; font-size: 1rem; font-weight: 550; }
.mission-clock b { color: var(--lime); font-size: 1.35rem; }

.metrics-dock {
  position: relative;
  z-index: auto;
  top: auto;
  display: grid;
  grid-template-columns: minmax(560px, 1.35fr) minmax(420px, 1fr);
  gap: 10px;
  margin-top: 14px;
  padding: 6px;
  border: 1px solid rgba(137,240,202,.1);
  border-radius: 18px;
  background: rgba(3, 11, 9, .88);
  box-shadow: 0 14px 42px rgba(0,0,0,.35);
  backdrop-filter: blur(16px) saturate(1.2);
}

.status-ribbon {
  display: grid;
  grid-template-columns: repeat(3, minmax(130px, 1fr)) minmax(160px, 0.85fr);
  gap: 1px;
  margin-top: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--line);
}

.status-card, .action-pips { min-height: 96px; padding: 12px 16px; background: rgba(7, 20, 17, 0.94); }
.status-card { display: grid; grid-template-columns: 1fr auto; gap: 8px 12px; align-items: end; }
.status-card span, .action-pips span { color: var(--muted); font-size: 0.82rem; }
.status-card strong { font-size: 1.07rem; }
.status-card .impact-copy { grid-column: 1 / -1; color: #b8cec6; font-size: .76rem; line-height: 1.25; }
.meter { grid-column: 1 / -1; height: 4px; overflow: hidden; border-radius: 99px; background: rgba(255,255,255,0.08); }
.meter i { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--green); box-shadow: 0 0 10px var(--green); transition: width .45s ease, background .3s ease; }
.anger-card .meter i { width: 18%; background: var(--amber); box-shadow: 0 0 10px rgba(255, 182, 91, 0.5); }
.action-pips { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.action-pips > div:first-child { display: grid; gap: 3px; }
.action-pips strong { color: var(--lime); font-size: 1rem; }
.action-pips small { color: var(--muted); font-size: .72rem; }
#actionPips { display: flex; gap: 6px; }
#actionPips i { width: 17px; height: 17px; display: block; transform: rotate(45deg); border: 1px solid var(--green); background: rgba(38, 230, 160, 0.55); box-shadow: 0 0 10px rgba(38, 230, 160, .25); transition: .3s ease; }
#actionPips i.empty { background: transparent; border-color: rgba(135,168,157,.35); box-shadow: none; }

.forecast-strip {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  grid-template-rows: auto auto;
  align-items: center;
  gap: 7px 10px;
  min-height: 96px;
  margin-top: 0;
  padding: 10px 12px;
  border: 1px solid rgba(255,182,91,.24);
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(255,182,91,.075), rgba(7,20,17,.92) 34%, rgba(38,230,160,.035));
}
.forecast-intro span { display: block; color: var(--muted); font-size: .76rem; }
.forecast-intro strong { display: block; margin-top: 5px; color: #ffd39c; font-size: 1rem; }
.forecast-equation { grid-column: 2; grid-row: 1 / 3; display: grid; grid-template-columns: 1fr auto 1fr auto 1fr auto; align-items: center; gap: 7px; }
.forecast-equation > b { color: var(--muted); font-size: 1.15rem; font-weight: 500; }
.forecast-value { min-width: 0; padding: 7px 8px; border: 1px solid var(--line); border-radius: 10px; background: rgba(255,255,255,.022); }
.forecast-value small { display: block; overflow: hidden; color: var(--muted); font-size: .64rem; white-space: nowrap; text-overflow: ellipsis; }
.forecast-value strong { display: block; margin-top: 3px; font-size: .98rem; }
.attack-value strong { color: var(--amber); }
.shield-value strong { color: var(--blue); }
.damage-value strong { color: var(--green-soft); }
.forecast-casualties { min-width: 66px; padding-left: 7px; border-left: 1px solid var(--line); }
.forecast-casualties span { display: block; color: var(--muted); font-size: .7rem; }
.forecast-casualties strong { display: block; margin-top: 3px; color: var(--text); font-size: .9rem; }
.forecast-strip > p { grid-column: 1; grid-row: 2; margin: 0; color: var(--muted); font-size: .66rem; line-height: 1.35; }
.forecast-strip.danger { border-color: rgba(255,109,90,.4); background: linear-gradient(90deg, rgba(255,109,90,.1), rgba(7,20,17,.94) 38%); }
.forecast-strip.danger .forecast-intro strong, .forecast-strip.danger .damage-value strong { color: var(--danger); }

.coach-bar {
  display: grid;
  grid-template-columns: auto 62px 1fr auto;
  align-items: center;
  gap: 16px;
  min-height: 76px;
  margin-top: 14px;
  padding: 12px 16px;
  border: 1px solid rgba(217,255,116,.38);
  border-radius: 14px;
  background: linear-gradient(90deg, rgba(217,255,116,.12), rgba(38,230,160,.045));
  box-shadow: 0 14px 40px rgba(0,0,0,.14), inset 0 1px rgba(255,255,255,.03);
}
.coach-step { min-width: 72px; padding: 8px 11px; border-radius: 9px; color: #07110d; background: var(--lime); font-size: .82rem; font-weight: 850; text-align: center; }
.coach-avatar { width: 62px; height: 58px; display: grid; place-items: end center; overflow: hidden; border: 1px solid rgba(217,255,116,.22); border-radius: 12px; background: radial-gradient(circle at 50% 70%, rgba(217,255,116,.14), transparent 68%); }
.coach-avatar img { display: block; width: 54px; height: 58px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 6px 8px rgba(0,0,0,.34)); animation: coachCheer 2.1s ease-in-out infinite; }
.coach-copy strong { display: block; margin-bottom: 4px; color: var(--text); font-size: 1rem; }
.coach-copy p { margin: 0; color: #b8cec6; font-size: .88rem; line-height: 1.45; }
.coach-bar > button { padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--muted); background: rgba(4,13,11,.32); font-size: .78rem; cursor: pointer; }
.coach-bar.complete { border-color: var(--line); background: rgba(7,20,17,.78); }
.coach-bar.complete .coach-step { color: var(--green-soft); background: rgba(38,230,160,.12); }

.game-grid {
  display: grid;
  grid-template-columns: minmax(220px, 0.78fr) minmax(480px, 1.85fr) minmax(250px, 0.9fr);
  gap: 14px;
  margin-top: 14px;
}

.panel {
  min-height: 550px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: linear-gradient(170deg, rgba(12, 31, 26, 0.93), rgba(5, 14, 12, 0.88));
  box-shadow: inset 0 1px rgba(255,255,255,.025), 0 24px 60px rgba(0,0,0,.2);
}

.panel-heading { padding-bottom: 17px; border-bottom: 1px solid var(--line); }
.resource-list { display: grid; gap: 10px; margin-top: 18px; }
.resource {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  align-items: center;
  gap: 11px;
  min-height: 62px;
  padding: 9px 11px;
  border: 1px solid rgba(137, 240, 202, 0.1);
  border-radius: 12px;
  background: rgba(255,255,255,.018);
}
.resource-icon { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 9px; font-size: .75rem; font-weight: 850; }
.resource-icon.energy { color: var(--lime); background: rgba(217,255,116,.12); }
.resource-icon.mineral { color: var(--blue); background: rgba(113,200,255,.12); }
.resource-icon.research { color: #c7a4ff; background: rgba(199,164,255,.12); }
.resource small { display: block; margin-bottom: 2px; color: var(--muted); font-size: .8rem; }
.resource strong { font-size: 1.2rem; }
.resource-use { display: block; margin-top: 3px; color: #91aca3; font-size: .67rem; line-height: 1.25; }
.resource em { min-width: 28px; color: var(--green); font-size: .75rem; font-style: normal; text-align: right; }

.adaptation-card { margin-top: 20px; padding: 15px; border: 1px solid rgba(255,182,91,.18); border-radius: 14px; background: linear-gradient(135deg, rgba(255,182,91,.07), transparent); }
.adaptation-head { display: flex; align-items: center; justify-content: space-between; color: var(--muted); font-size: .78rem; }
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 12px var(--amber); animation: pulse 1.8s infinite; }
.adaptation-card strong { display: block; margin-top: 9px; color: #ffd39c; font-size: .95rem; }
.adaptation-card p { margin: 7px 0 0; color: var(--muted); font-size: .82rem; line-height: 1.55; }
.shield-row { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 20px; color: var(--muted); font-size: .8rem; }
.shield-row div { display: grid; gap: 4px; }
.shield-row small { color: #91aca3; font-size: .68rem; }
.shield-row strong { color: var(--green-soft); }
.resources-panel { display: flex; flex-direction: column; }

.planet-stage {
  position: relative;
  min-height: 550px;
  overflow: hidden;
  border: 1px solid rgba(94, 214, 170, .17);
  border-radius: var(--radius);
  background:
    radial-gradient(circle at center, rgba(24, 148, 102, .25) 0, rgba(6, 44, 31, .24) 50%, transparent 74%),
    linear-gradient(160deg, rgba(7, 21, 18, .8), rgba(2, 8, 7, .94));
}

.planet-stage::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .17;
  background: radial-gradient(circle, rgba(180,255,223,.9) 1px, transparent 1.5px);
  background-size: 43px 43px;
  mask-image: radial-gradient(circle, transparent 8%, black 65%, transparent 85%);
}

.planet-glow { position: absolute; width: 540px; height: 540px; left: 50%; top: 50%; transform: translate(-50%, -49%); border-radius: 50%; background: rgba(28, 199, 135, .055); box-shadow: 0 0 110px rgba(38,230,160,.11), inset 0 0 110px rgba(38,230,160,.11); transition: background .5s, box-shadow .5s, filter .5s; }
.planet-fractures { position: absolute; z-index: 1; width: 540px; height: 540px; left: 50%; top: 50%; transform: translate(-50%, -49%) scale(.94); border-radius: 50%; opacity: 0; pointer-events: none; background: linear-gradient(116deg, transparent 45%, rgba(255,157,79,.75) 46% 46.6%, transparent 47.2%), linear-gradient(42deg, transparent 50%, rgba(255,91,61,.68) 51% 51.6%, transparent 52.2%), linear-gradient(156deg, transparent 56%, rgba(255,202,104,.62) 57% 57.5%, transparent 58%); mask-image: radial-gradient(circle, black 0 66%, transparent 69%); filter: drop-shadow(0 0 7px rgba(255,102,54,.42)); transition: opacity .5s, transform .5s; }
.planet-stage.doom-fractured .planet-fractures { opacity: .28; }
.planet-stage.doom-critical .planet-fractures { opacity: .62; transform: translate(-50%, -49%) scale(1); }
.planet-stage.doom-collapse .planet-fractures, .planet-stage.doom-destroyed .planet-fractures { opacity: .95; transform: translate(-50%, -49%) scale(1.04); animation: corePulse .9s ease-in-out infinite; }
.planet-stage.doom-fractured .planet-glow { background: rgba(193,147,40,.08); box-shadow: 0 0 90px rgba(255,182,91,.15), inset 0 0 90px rgba(255,182,91,.12); }
.planet-stage.doom-critical .planet-glow { background: rgba(201,67,38,.12); box-shadow: 0 0 105px rgba(255,109,64,.24), inset 0 0 90px rgba(255,86,54,.17); }
.planet-stage.doom-collapse .planet-glow, .planet-stage.doom-destroyed .planet-glow { background: rgba(255,48,22,.18); box-shadow: 0 0 125px rgba(255,79,38,.34), inset 0 0 110px rgba(255,46,22,.25); filter: saturate(1.45); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.effects-layer { position: absolute; z-index: 8; inset: 0; overflow: hidden; pointer-events: none; }
.planet-breakup-layer { position: absolute; z-index: 9; inset: 0; overflow: hidden; pointer-events: none; }
.planet-shell-piece, .planet-terrain-piece { position: absolute; opacity: 0; will-change: transform, opacity; }
.planet-shell-piece { background: radial-gradient(circle at 38% 30%, #27694e, #103d2f 48%, #04150f 73%); }
.planet-terrain-piece .hex { width: 100%; height: 100%; margin: 0; opacity: 1; transform: none; }
.planet-stage.breakup-charging .hex-map { animation: breakupCharge 1.2s ease-in both; pointer-events: none; }
.planet-stage.breakup-charging .planet-fractures { opacity: 1; filter: drop-shadow(0 0 12px #ffb35e); }
.breakup-star-core { position: absolute; width: 100px; height: 100px; margin: -50px; border-radius: 50%; background: radial-gradient(circle, #fffbd3, #ffd06b 20%, #ff733b 38%, transparent 70%); animation: breakupCoreCharge 1.2s ease-in both; }
.breakup-caption { position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%); width: max-content; max-width: 95%; padding: 10px 16px; border-radius: 12px; background: #05100fed; color: #ffe8af; font-size: 1rem; text-align: center; }
.planet-stage.breakup-burst { background: radial-gradient(circle at center, #0b1918, #020707 70%); }
.planet-stage.breakup-burst .hex-map, .planet-stage.breakup-burst .planet-glow, .planet-stage.breakup-burst .planet-fractures, .planet-stage.breakup-burst .orbit { visibility: hidden; }
.planet-stage.breakup-charging .selected-instruction, .planet-stage.breakup-charging .action-rule-card, .planet-stage.breakup-charging .bottom-label, .planet-stage.breakup-charging .floating-notice, .planet-stage.breakup-charging .core-status { visibility: hidden; }
.breakup-burst .planet-shell-piece { animation: shellBreakup 2.4s cubic-bezier(.13,.7,.2,1) both; }
.breakup-burst .planet-terrain-piece { animation: terrainBreakup 2.4s cubic-bezier(.13,.7,.2,1) both; }
.breakup-burst .breakup-star-core { animation: breakupCoreBurst 2.4s ease-out both; }
.breakup-remains .planet-terrain-piece { animation: debrisDrift 6s ease-in-out infinite alternate; opacity: .65; transform: translate(var(--flight-x), var(--flight-y)) rotate(var(--flight-rotation)) scale(.46); }
.breakup-remains .planet-shell-piece { opacity: .15; }
.breakup-preview { display: block; margin: 16px auto 0; padding: 10px 16px; border: 1px solid var(--line-strong); border-radius: 10px; background: #15342b; color: var(--green-soft); cursor: pointer; font-size: .9rem; }
@keyframes breakupCharge { 0% { transform: scale(1); } 35% { transform: translate(2px,-1px) scale(.99); } 60% { transform: translate(-2px,2px) scale(.97); } 85% { transform: translate(3px,0) scale(.95); } 100% { transform: scale(.94); } }
@keyframes breakupCoreCharge { from { opacity: .2; transform: scale(.4); } to { opacity: 1; transform: scale(1.8); } }
@keyframes terrainBreakup { 0% { opacity: 1; transform: scale(.94); } 65% { opacity: 1; } 100% { opacity: .65; transform: translate(var(--flight-x), var(--flight-y)) rotate(var(--flight-rotation)) scale(.46); } }
@keyframes shellBreakup { 0% { opacity: 1; transform: scale(.94); } 100% { opacity: .15; transform: translate(var(--flight-x), var(--flight-y)) rotate(var(--flight-rotation)) scale(.65); } }
@keyframes breakupCoreBurst { 0% { opacity: 1; transform: scale(1.8); } 12% { opacity: 1; transform: scale(4.5); } 35% { opacity: .65; transform: scale(1.5); } 100% { opacity: .25; transform: scale(.4); } }
@keyframes debrisDrift { from { transform: translate(var(--flight-x), var(--flight-y)) rotate(var(--flight-rotation)) scale(.46); } to { transform: translate(calc(var(--flight-x) + 8px), calc(var(--flight-y) - 12px)) rotate(calc(var(--flight-rotation) + 8deg)) scale(.46); } }
.fx-origin { position: absolute; width: 1px; height: 1px; pointer-events: none; }
.fx-core, .fx-ring, .fx-particle { position: absolute; left: 0; top: 0; pointer-events: none; }
.fx-explosion .fx-core { width: 82px; height: 82px; border-radius: 50%; background: radial-gradient(circle, #fff 0 8%, #fff4b5 9% 20%, #ff9f43 34%, rgba(255,69,38,.7) 52%, transparent 72%); box-shadow: 0 0 24px #fff7b0, 0 0 64px rgba(255,91,45,.85); animation: fxExplosionCore .62s cubic-bezier(.12,.72,.2,1) forwards; }
.fx-explosion .fx-ring { width: 46px; height: 46px; border: 4px solid rgba(255,208,105,.95); border-radius: 50%; box-shadow: 0 0 12px rgba(255,122,55,.85); animation: fxExplosionRing .82s ease-out forwards; }
.fx-explosion .fx-particle { width: 7px; height: 14px; border-radius: 2px; background: linear-gradient(#fff3a0, #ff672f); box-shadow: 0 0 8px #ff983b; animation: fxDebris .82s cubic-bezier(.12,.62,.26,1) var(--delay) forwards; }
.fx-explosion.severe .fx-core { width: 112px; height: 112px; box-shadow: 0 0 38px #fff7b0, 0 0 100px rgba(255,62,31,.96); }
.fx-explosion.severe .fx-ring { width: 70px; height: 70px; border-width: 6px; }
.fx-shard { position: absolute; left: 0; top: 0; width: var(--size); height: calc(var(--size) * .8); background: linear-gradient(135deg, #fff4c6, var(--shard-color) 38%, #263930); border: 1px solid rgba(255,255,255,.6); box-shadow: 0 0 7px var(--shard-color); animation: shardFlight 1.5s ease-out var(--delay) both; pointer-events: none; }
.fx-shard.shape-1 { clip-path: polygon(0 0, 100% 25%, 60% 100%); }
.fx-shard.shape-2 { clip-path: polygon(20% 0, 100% 10%, 80% 85%, 0 100%); }
.fx-impact-label { position: absolute; left: 0; top: -35px; width: 150px; text-align: center; color: #fff2b1; font-size: 1rem; text-shadow: 0 2px 3px #000, 0 0 12px #ff6d30; animation: impactLabel 1.4s ease-out both; }
#soundButton { padding: 6px 9px; border: 1px solid var(--line-strong); border-radius: 8px; color: var(--green-soft); background: #0b211a; cursor: pointer; font-size: .75rem; }
@keyframes shardFlight { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(0deg) scale(.4); } 15% { opacity: 1; } 60% { opacity: 1; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)) scale(1); } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--fall))) rotate(calc(var(--rot) * 1.4)) scale(.65); } }
@keyframes impactLabel { 0% { opacity: 0; transform: translate(-50%, 0) scale(.7); } 15% { opacity: 1; transform: translate(-50%, -10px) scale(1.1); } 75% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -42px) scale(1); } }
.fx-rebirth .fx-core { width: 74px; height: 74px; border-radius: 50%; background: radial-gradient(circle, rgba(244,255,195,.95) 0 7%, rgba(124,255,174,.72) 22%, rgba(38,230,160,.22) 54%, transparent 72%); box-shadow: 0 0 42px rgba(102,255,176,.76); animation: fxRebirthCore 1.05s ease-out forwards; }
.fx-rebirth .fx-ring { width: 54px; height: 54px; border: 2px solid rgba(184,255,142,.92); border-radius: 50%; box-shadow: 0 0 18px rgba(94,255,167,.5); animation: fxRebirthRing 1.08s ease-out var(--delay, 0s) forwards; }
.fx-rebirth .fx-particle { width: 8px; height: 13px; border-radius: 9px 2px 9px 2px; background: linear-gradient(135deg, #ecff9d, #2de69f); box-shadow: 0 0 8px rgba(130,255,180,.75); animation: fxSprout 1.1s cubic-bezier(.14,.66,.22,1) var(--delay) forwards; }
.planet-stage.explosion-flash::after, .planet-stage.rebirth-glow::after { content: ""; position: absolute; z-index: 7; inset: 0; pointer-events: none; }
.planet-stage.explosion-flash::after { background: radial-gradient(circle at center, rgba(255,231,150,.2), rgba(255,75,38,.12) 34%, transparent 66%); animation: fxFlash .55s ease-out forwards; }
.planet-stage.rebirth-glow::after { background: radial-gradient(circle at center, rgba(184,255,142,.18), rgba(38,230,160,.08) 40%, transparent 70%); animation: fxGreenFlash .9s ease-out forwards; }
.hex.fx-reborn { animation: fxTileRebirth 1s ease-out; }
.orbit { position: absolute; left: 50%; top: 50%; border: 1px solid rgba(137,240,202,.09); border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; }
.orbit-one { width: 610px; height: 610px; }
.orbit-two { width: 700px; height: 700px; border-style: dashed; animation: spin 40s linear infinite; }
.orbit-two::after { content: ""; position: absolute; width: 7px; height: 7px; top: 46px; right: 74px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 15px var(--lime); }

.map-wrap { position: relative; z-index: 2; min-height: 550px; display: grid; place-items: center; padding: 52px 12px 92px; }
.hex-map { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.hex-row { display: flex; gap: 5px; margin-top: -11px; }
.hex-row:first-child { margin-top: 0; }
.hex {
  position: relative;
  width: 72px;
  height: 80px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  color: var(--text);
  background: rgba(19, 70, 54, .66);
  clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%);
  cursor: pointer;
  transition: transform .16s ease, filter .16s ease, background .25s ease;
}
.hex::before { content: ""; position: absolute; inset: 3px; clip-path: inherit; background: linear-gradient(145deg, rgba(255,255,255,.08), transparent 55%); }
.hex:hover, .hex:focus-visible { z-index: 3; transform: scale(1.09); filter: brightness(1.28); }
.hex.selected { z-index: 2; background: var(--lime); color: #09120d; filter: drop-shadow(0 0 10px rgba(217,255,116,.45)); }
.hex.recommended { z-index: 4; color: #07120e; background: var(--lime); filter: drop-shadow(0 0 13px rgba(217,255,116,.78)); animation: guidePulse 1.25s ease-in-out infinite; }
.hex.depleted { filter: saturate(.35) brightness(.65); }
.hex.shielded::after { content: ""; position: absolute; inset: 8px; clip-path: inherit; border: 1px solid var(--blue); background: rgba(113,200,255,.08); }
.hex.base { background: linear-gradient(145deg, #e8ff9e, #68ecb8); color: #07120e; filter: drop-shadow(0 0 14px rgba(38,230,160,.6)); }
.hex.base::after { content: ""; width: 22px; height: 22px; position: absolute; border: 2px solid currentColor; transform: rotate(45deg); }
.hex[data-biome="forest"] { background: radial-gradient(circle at 27% 27%, rgba(219,255,161,.48) 0 3px, transparent 4px), radial-gradient(circle at 72% 62%, rgba(90,255,173,.28) 0 4px, transparent 5px), linear-gradient(145deg, #218b5d, #0a3b2b); }
.hex[data-biome="crystal"] { background: linear-gradient(60deg, transparent 42%, rgba(180,229,255,.28) 43% 48%, transparent 49%), linear-gradient(145deg, #3b7896, #162f40); }
.hex[data-biome="water"] { background: repeating-radial-gradient(ellipse at 50% 105%, transparent 0 8px, rgba(154,237,255,.2) 9px 11px), linear-gradient(145deg, #17788c, #103c54); }
.hex[data-biome="plain"] { background: repeating-linear-gradient(118deg, rgba(226,244,130,.12) 0 2px, transparent 2px 11px), linear-gradient(145deg, #77813d, #3c4925); }
.hex[data-biome="hive"] { background: repeating-radial-gradient(circle at 35% 35%, rgba(255,190,132,.16) 0 3px, transparent 4px 10px), linear-gradient(145deg, #a64b35, #55251f); }
.hex.ruined { color: #ffc0ad; background: repeating-linear-gradient(132deg, rgba(255,102,67,.18) 0 2px, transparent 2px 12px), linear-gradient(145deg, #432621, #100c0b); filter: saturate(.28) brightness(.7) drop-shadow(0 0 9px rgba(255,80,42,.35)); cursor: not-allowed; }
.hex.ruined::before { background: linear-gradient(35deg, transparent 46%, rgba(255,113,70,.58) 47% 49%, transparent 50%), linear-gradient(145deg, transparent 43%, rgba(255,170,92,.42) 44% 45%, transparent 46%); }
.hex.ruined:hover { transform: none; filter: saturate(.32) brightness(.78) drop-shadow(0 0 12px rgba(255,80,42,.45)); }
.hex.recommended { color: #07120e; background: linear-gradient(145deg, #efffb4, var(--lime)); }
.hex-icon { position: relative; z-index: 2; display: flex; align-items: baseline; justify-content: center; gap: 3px; line-height: 1; white-space: nowrap; }
.hex-icon b { font-size: 1.15rem; font-weight: 850; }
.hex-icon em { font-size: .55rem; font-style: normal; font-weight: 720; opacity: .82; }
.hex small { position: absolute; z-index: 2; bottom: 13px; font-size: .56rem; opacity: .66; }
.map-label { position: absolute; left: 50%; transform: translateX(-50%); color: var(--muted); font-size: .78rem; letter-spacing: .06em; white-space: nowrap; }
.top-label { top: 18px; }
.top-label span { display: inline-block; width: 6px; height: 6px; margin-right: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 9px var(--green); }
.bottom-label { bottom: 64px; }
.bottom-label kbd { margin-left: 7px; color: var(--green-soft); font: inherit; }
.core-status { position: absolute; z-index: 6; left: 50%; bottom: 11px; width: min(420px, calc(100% - 24px)); min-height: 43px; display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 3px 12px; transform: translateX(-50%); padding: 6px 10px 7px; border: 1px solid rgba(38,230,160,.28); border-radius: 11px; background: rgba(3,13,11,.9); box-shadow: 0 10px 30px rgba(0,0,0,.28); backdrop-filter: blur(12px); }
.core-status > div:first-child { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.core-status span { color: var(--green-soft); font-size: .7rem; font-weight: 800; letter-spacing: .06em; }
.core-status em { overflow: hidden; color: var(--muted); font-size: .64rem; font-style: normal; white-space: nowrap; text-overflow: ellipsis; }
.core-status strong { color: var(--green-soft); font-size: .9rem; }
.core-meter { grid-column: 1 / -1; height: 4px; overflow: hidden; border-radius: 999px; background: rgba(255,255,255,.08); }
.core-meter i { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--green); transition: width .45s, background .45s; }
.core-status[data-stage="fractured"] { border-color: rgba(231,220,90,.42); }
.core-status[data-stage="critical"], .core-status[data-stage="collapse"], .core-status[data-stage="destroyed"] { border-color: rgba(255,109,90,.58); box-shadow: 0 0 30px rgba(255,74,40,.12); }
.core-status[data-stage="critical"] span, .core-status[data-stage="collapse"] span, .core-status[data-stage="destroyed"] span,
.core-status[data-stage="critical"] strong, .core-status[data-stage="collapse"] strong, .core-status[data-stage="destroyed"] strong { color: #ff927f; }
.selected-instruction { position: absolute; top: 17px; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; align-items: center; gap: 9px; padding: 7px 12px; border: 1px solid var(--line-strong); border-radius: 999px; color: #b8cec6; background: rgba(4,13,11,.86); font-size: .8rem; white-space: nowrap; }
.selected-instruction span { padding: 3px 8px; border-radius: 999px; color: #07110d; background: var(--lime); font-weight: 800; }
.action-rule-card { position: absolute; z-index: 5; top: 62px; left: 50%; width: min(690px, calc(100% - 24px)); transform: translateX(-50%); padding: 7px; border: 1px solid rgba(113,200,255,.22); border-radius: 12px; background: rgba(4,15,13,.9); box-shadow: 0 12px 32px rgba(0,0,0,.24); backdrop-filter: blur(12px); }
.rule-heading { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.rule-heading strong { color: var(--text); font-size: .82rem; }
.rule-heading span { color: var(--muted); font-size: .7rem; }
.rule-heading.compact { align-items: center; justify-content: flex-start; }
.rule-heading.compact strong { color: var(--green-soft); white-space: nowrap; }
.terrain-yields { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; }
.terrain-yields > span { --terrain: var(--green); min-width: 0; display: grid; place-items: center; gap: 2px; padding: 6px 4px; border: 1px solid color-mix(in srgb, var(--terrain) 36%, transparent); border-radius: 9px; background: color-mix(in srgb, var(--terrain) 10%, rgba(2,10,8,.88)); }
.terrain-yields > span[data-biome="forest"] { --terrain: #55e39c; }
.terrain-yields > span[data-biome="crystal"] { --terrain: #7fd4ff; }
.terrain-yields > span[data-biome="water"] { --terrain: #48dce8; }
.terrain-yields > span[data-biome="plain"] { --terrain: #d9df73; }
.terrain-yields > span[data-biome="hive"] { --terrain: #ff8a63; }
.terrain-yields b { display: flex; align-items: center; gap: 4px; color: #d8e8e2; font-size: .68rem; white-space: nowrap; }
.terrain-yields b i { color: var(--terrain); font-size: .92rem; font-style: normal; }
.terrain-yields u { color: color-mix(in srgb, var(--terrain) 82%, white); font-size: .56rem; line-height: 1; text-decoration: none; white-space: nowrap; }
.terrain-yields em { color: var(--blue); font-size: .65rem; font-style: normal; white-space: nowrap; }
.terrain-yields small { color: var(--amber); font-size: .58rem; white-space: nowrap; }
.rule-compact { min-height: 46px; display: grid; grid-template-columns: auto auto 1fr; align-items: center; gap: 10px; padding: 0 8px; }
.rule-compact strong { color: var(--lime); font-size: .92rem; }
.rule-compact span { padding: 4px 7px; border-radius: 999px; color: var(--green-soft); background: rgba(38,230,160,.1); font-size: .72rem; white-space: nowrap; }
.rule-compact em { color: #c3d6cf; font-size: .78rem; font-style: normal; text-align: right; }
.floating-notice { position: absolute; z-index: 10; left: 50%; top: 50%; transform: translate(-50%, -20%); padding: 8px 13px; border: 1px solid var(--line-strong); border-radius: 999px; background: rgba(4,13,11,.92); color: var(--green-soft); font-size: .78rem; opacity: 0; pointer-events: none; transition: opacity .2s, transform .3s; }
.floating-notice.show { opacity: 1; transform: translate(-50%, -50%); }

.command-heading { display: flex; justify-content: space-between; align-items: flex-start; }
.icon-button { width: 32px; height: 32px; border: 1px solid var(--line-strong); border-radius: 50%; color: var(--muted); background: transparent; cursor: pointer; }
.command-list { display: grid; gap: 9px; margin-top: 18px; }
.command {
  width: 100%;
  min-height: 72px;
  display: grid;
  grid-template-columns: 25px 1fr auto;
  align-items: center;
  gap: 9px;
  padding: 10px 11px;
  border: 1px solid rgba(137,240,202,.12);
  border-radius: 12px;
  color: var(--text);
  text-align: left;
  background: rgba(255,255,255,.018);
  cursor: pointer;
  transition: border-color .2s, background .2s, transform .2s;
}
.command:hover { border-color: var(--line-strong); transform: translateX(-2px); }
.command.active { border-color: rgba(217,255,116,.55); background: linear-gradient(90deg, rgba(217,255,116,.11), rgba(38,230,160,.025)); box-shadow: inset 3px 0 var(--lime); }
.command.tutorial-focus, .end-day.tutorial-focus { border-color: var(--lime); box-shadow: 0 0 0 2px rgba(217,255,116,.16), 0 0 24px rgba(217,255,116,.16); animation: guidePulse 1.25s ease-in-out infinite; }
.command kbd { width: 21px; height: 21px; display: grid; place-items: center; border: 1px solid var(--line-strong); border-radius: 5px; color: var(--muted); font: 650 .68rem inherit; }
.command.active kbd { color: var(--lime); border-color: rgba(217,255,116,.4); }
.command strong, .command small { display: block; }
.command strong { font-size: .98rem; }
.command small { margin-top: 3px; color: var(--muted); font-size: .78rem; }
.command em { color: var(--muted); font-size: .74rem; font-style: normal; text-align: right; }
.end-day { width: 100%; margin-top: 18px; padding: 13px 16px; border: 1px solid rgba(217,255,116,.5); border-radius: 12px; color: #07110d; background: linear-gradient(135deg, var(--lime), #72eaaa); cursor: pointer; box-shadow: 0 9px 30px rgba(38,230,160,.12); transition: transform .2s, filter .2s; }
.end-day:hover { transform: translateY(-2px); filter: brightness(1.05); }
.end-day span, .end-day small { display: block; }
.end-day span { font-weight: 820; }
.end-day small { margin-top: 2px; font-size: .68rem; opacity: .67; }

.event-strip { min-height: 58px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; margin-top: 14px; padding: 11px 16px; border: 1px solid var(--line); border-radius: 14px; background: rgba(7,20,17,.9); }
.signal { display: flex; align-items: center; gap: 8px; color: var(--green); font-size: .7rem; font-weight: 720; letter-spacing: .08em; }
.signal i { width: 8px; height: 8px; border-radius: 50%; background: var(--green); box-shadow: 0 0 11px var(--green); }
.event-strip p { margin: 0; color: #b8cec6; font-size: .88rem; line-height: 1.5; }
.event-strip button { border: 0; color: var(--muted); background: transparent; font-size: .73rem; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }

.modal-backdrop { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: 20px; background: rgba(1,7,5,.76); backdrop-filter: blur(10px); }
.modal-backdrop[hidden] { display: none; }
.modal { position: relative; width: min(520px, 100%); max-height: min(720px, calc(100vh - 40px)); overflow: auto; padding: 28px; border: 1px solid var(--line-strong); border-radius: 20px; background: linear-gradient(150deg, #102a23, #06120f); box-shadow: 0 40px 100px rgba(0,0,0,.56); }
.modal:focus { outline: none; }
.modal.briefing-mode { width: min(680px, 100%); }
.modal.victory-mode { width: min(720px, 100%); border-color: rgba(217,255,116,.48); background: radial-gradient(circle at 20% 58%, rgba(217,255,116,.12), transparent 34%), linear-gradient(145deg, #123329, #06120f 70%); box-shadow: 0 40px 110px rgba(0,0,0,.62), 0 0 45px rgba(38,230,160,.12); }
.modal.victory-mode::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .2; background-image: radial-gradient(circle, var(--lime) 0 1px, transparent 1.5px); background-size: 27px 27px; mask-image: linear-gradient(90deg, black, transparent 58%); }
.modal.defeat-mode { width: min(720px, 100%); border-color: rgba(255,111,84,.48); background: radial-gradient(circle at 20% 58%, rgba(255,111,84,.12), transparent 34%), linear-gradient(145deg, #2d1c19, #0e0c0b 70%); box-shadow: 0 40px 110px rgba(0,0,0,.66), 0 0 42px rgba(255,111,84,.1); }
.modal.defeat-mode::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .15; background-image: radial-gradient(circle, #ff8b6d 0 1px, transparent 1.5px); background-size: 31px 31px; mask-image: linear-gradient(90deg, black, transparent 58%); }
.modal.hope-mode { width: min(720px, 100%); border-color: rgba(113,200,255,.48); background: radial-gradient(circle at 20% 58%, rgba(113,200,255,.14), transparent 35%), linear-gradient(145deg, #102c30, #06120f 70%); box-shadow: 0 40px 110px rgba(0,0,0,.62), 0 0 46px rgba(113,200,255,.12); }
.modal.hope-mode::before { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .2; background-image: radial-gradient(circle, #71c8ff 0 1px, transparent 1.5px); background-size: 29px 29px; mask-image: linear-gradient(90deg, black, transparent 58%); }
.modal h2 { margin-top: 7px; font-size: 1.65rem; }
.modal-close { position: absolute; top: 15px; right: 16px; width: 32px; height: 32px; border: 0; color: var(--muted); background: transparent; font-size: 1.4rem; cursor: pointer; }
.modal-content { margin: 20px 0; color: #b8cec6; font-size: .9rem; line-height: 1.7; }
.modal-content ol { margin: 0; padding-left: 1.25rem; }
.modal-content li + li { margin-top: 8px; }
.modal-content strong { color: var(--green-soft); }
.victory-result { position: relative; display: grid; grid-template-columns: 230px minmax(0, 1fr); align-items: center; gap: 24px; min-height: 310px; }
.victory-character { position: relative; min-height: 310px; display: grid; place-items: end center; overflow: hidden; border: 1px solid rgba(217,255,116,.2); border-radius: 16px; background: radial-gradient(circle at 50% 62%, rgba(38,230,160,.16), transparent 58%), linear-gradient(180deg, rgba(4,17,14,.1), rgba(4,17,14,.72)); }
.victory-character::after { content: ""; position: absolute; left: 14%; right: 14%; bottom: 11px; height: 18px; border-radius: 50%; background: rgba(38,230,160,.2); filter: blur(8px); }
.victory-character span { position: absolute; z-index: 0; top: 17px; left: 50%; transform: translateX(-50%); color: rgba(217,255,116,.34); font-size: .72rem; font-weight: 900; letter-spacing: .24em; }
.victory-character img { position: relative; z-index: 1; display: block; max-width: 100%; height: 290px; object-fit: contain; image-rendering: pixelated; filter: drop-shadow(0 12px 18px rgba(0,0,0,.48)); animation: victoryBounce 1.8s ease-in-out infinite; }
.defeat-character { border-color: rgba(255,111,84,.22); background: radial-gradient(circle at 50% 66%, rgba(255,111,84,.15), transparent 58%), linear-gradient(180deg, rgba(25,10,8,.08), rgba(18,8,7,.76)); }
.defeat-character::after { background: rgba(255,111,84,.16); }
.defeat-character span { color: rgba(255,139,109,.42); }
.defeat-character img { height: 278px; animation: defeatSigh 3s ease-in-out infinite; }
.hope-character { border-color: rgba(113,200,255,.25); background: radial-gradient(circle at 50% 62%, rgba(113,200,255,.18), transparent 58%), linear-gradient(180deg, rgba(4,18,22,.08), rgba(4,14,16,.76)); }
.hope-character::after { background: rgba(113,200,255,.2); }
.hope-character span { color: rgba(157,252,217,.46); letter-spacing: .14em; }
.hope-character img { height: 282px; animation: hopeCheer 1.65s ease-in-out infinite; }
.ending-copy { position: relative; z-index: 1; }
.ending-copy p { margin: 0; }
.ending-copy p + p { margin-top: 16px; }
.ending-stats { padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; color: var(--green-soft); background: rgba(3,12,10,.46); font-size: .8rem; }
.onboarding-goal { display: grid; gap: 5px; padding: 14px 16px; border: 1px solid rgba(217,255,116,.32); border-radius: 14px; background: linear-gradient(100deg, rgba(217,255,116,.12), rgba(38,230,160,.04)); }
.onboarding-goal span { color: var(--lime); font-size: .78rem; font-weight: 800; letter-spacing: .08em; }
.onboarding-goal strong { color: var(--text); font-size: 1.08rem; }
.onboarding-goal small { color: #b8cec6; font-size: .82rem; }
.turn-loop { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.turn-step { min-height: 102px; display: grid; grid-template-columns: 34px 1fr; align-items: center; gap: 9px; padding: 12px; border: 1px solid var(--line); border-radius: 13px; background: rgba(255,255,255,.025); }
.turn-step > b { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; color: #07110d; background: var(--lime); font-size: .88rem; }
.turn-step span { display: grid; gap: 3px; }
.turn-step strong { color: var(--text); font-size: .94rem; }
.turn-step small { color: var(--muted); font-size: .76rem; line-height: 1.35; }
.action-cheatsheet { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; margin-top: 10px; }
.action-cheatsheet span { padding: 9px 11px; border-radius: 9px; color: #b8cec6; background: rgba(3,12,10,.42); font-size: .82rem; }
.action-cheatsheet b { margin-right: 7px; color: var(--green-soft); }
.destruction-warning { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 11px; margin-top: 10px; padding: 10px 12px; border: 1px solid rgba(255,109,90,.34); border-radius: 11px; background: rgba(255,79,52,.07); }
.destruction-warning b { color: #ff927f; font-size: .78rem; white-space: nowrap; }
.destruction-warning span { color: #d8c4bd; font-size: .78rem; line-height: 1.45; }
.first-move { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; margin-top: 12px; padding: 12px 14px; border: 1px solid rgba(113,200,255,.3); border-radius: 12px; background: rgba(113,200,255,.07); }
.first-move > b { padding: 6px 9px; border-radius: 7px; color: #07110d; background: var(--blue); font-size: .78rem; white-space: nowrap; }
.first-move span { color: #d8e8e2; font-size: .9rem; line-height: 1.45; }
.first-move span strong { color: var(--lime); }
.how-cards { display: grid; gap: 10px; }
.how-card { display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 12px; background: rgba(255,255,255,.025); }
.how-card b { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 50%; color: #07110d; background: var(--lime); }
.how-card span { display: grid; }
.how-card strong { font-size: .92rem; }
.how-card small { margin-top: 2px; color: var(--muted); font-size: .8rem; }
.modal-action { width: 100%; padding: 12px 16px; border: 0; border-radius: 10px; color: #07110d; background: var(--lime); font-weight: 800; cursor: pointer; }
.log-list { display: grid; gap: 9px; max-height: 320px; overflow: auto; }
.log-entry { padding: 10px 12px; border-left: 2px solid var(--line-strong); background: rgba(255,255,255,.025); }
.log-entry small { display: block; color: var(--green); margin-bottom: 3px; }

@keyframes pulse { 50% { opacity: .35; transform: scale(.75); } }
@keyframes corePulse { 50% { opacity: .62; filter: drop-shadow(0 0 18px rgba(255,67,30,.85)); } }
@keyframes victoryBounce { 50% { transform: translateY(-5px); } }
@keyframes defeatSigh { 50% { transform: translateY(3px) rotate(-1deg); } }
@keyframes hopeCheer { 50% { transform: translateY(-4px) scale(1.02); } }
@keyframes coachCheer { 50% { transform: translateY(-2px) rotate(1deg); } }
@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes shudder { 25% { transform: translateX(-5px); } 75% { transform: translateX(5px); } }
@keyframes guidePulse { 50% { filter: brightness(1.18) drop-shadow(0 0 14px rgba(217,255,116,.55)); } }
@keyframes fxExplosionCore { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.08); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.15); } }
@keyframes fxExplosionRing { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.25); } 100% { opacity: 0; transform: translate(-50%, -50%) scale(3.7); } }
@keyframes fxDebris { 0% { opacity: 1; transform: translate(-50%, -50%) rotate(0deg) scale(1); } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) rotate(var(--rot)) scale(.2); } }
@keyframes fxRebirthCore { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.1); } 30% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.2); } }
@keyframes fxRebirthRing { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.18); } 24% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -50%) scale(3.4); } }
@keyframes fxSprout { 0% { opacity: 0; transform: translate(-50%, -20%) rotate(0deg) scale(.25); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(calc(-50% + var(--dx)), calc(-20% + var(--dy))) rotate(var(--rot)) scale(.85); } }
@keyframes fxFlash { 0% { opacity: .95; } 100% { opacity: 0; } }
@keyframes fxGreenFlash { 0% { opacity: 0; } 25% { opacity: 1; } 100% { opacity: 0; } }
@keyframes fxTileRebirth { 0%, 100% { filter: brightness(1); } 35% { filter: brightness(1.75) saturate(1.35) drop-shadow(0 0 22px rgba(162,255,139,.92)); } }
.planet-stage.shudder { animation: shudder .35s ease; }

@media (min-width: 1200px) {
  .game-grid {
    grid-template-columns: minmax(220px, .7fr) minmax(600px, 2.15fr) minmax(250px, .84fr);
    grid-template-areas: "resources planet commands";
    align-items: stretch;
  }
  .resources-panel {
    grid-area: resources;
    position: relative;
    z-index: auto;
    top: auto;
    min-height: 650px;
    display: flex;
    flex-direction: column;
    padding: 18px;
  }
  .resources-panel .panel-heading {
    display: block;
    padding: 0 0 14px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .resources-panel .resource-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 9px;
    margin: 14px 0 0;
  }
  .resources-panel .resource {
    min-height: 76px;
    grid-template-columns: 32px minmax(0, 1fr);
    gap: 9px;
    padding: 10px;
  }
  .resources-panel .resource-icon { width: 32px; height: 32px; }
  .resources-panel .resource em { display: none; }
  .resources-panel .adaptation-card { display: block; margin-top: 14px; padding: 12px; }
  .resources-panel .shield-row {
    margin-top: auto;
    padding-top: 16px;
    text-align: left;
  }
  .command-panel {
    grid-area: commands;
    position: relative;
    z-index: auto;
    top: auto;
    min-height: 650px;
    display: flex;
    flex-direction: column;
    padding: 18px;
  }
  .command-panel .panel-heading {
    padding: 0 0 14px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .command-panel .panel-heading .eyebrow { display: block; }
  .command-panel .panel-heading h2 { font-size: 1rem; line-height: 1.35; }
  .command-panel .command-list {
    grid-template-columns: 1fr;
    gap: 9px;
    margin: 14px 0 0;
  }
  .command-panel .command {
    min-height: 76px;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 3px 8px;
    padding: 9px;
  }
  .command-panel .command span { min-width: 0; }
  .command-panel .command strong,
  .command-panel .command small,
  .command-panel .command em { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .command-panel .command em { grid-column: 2; text-align: left; }
  .command-panel .end-day { align-self: stretch; margin-top: auto; }
  .planet-stage { grid-area: planet; min-height: 650px; }
  .map-wrap { min-height: 650px; }
}

@media (min-width: 761px) and (max-width: 1199px) {
  .metrics-dock { grid-template-columns: minmax(520px, 1.2fr) minmax(380px, .9fr); }
  .forecast-strip { grid-template-columns: 82px minmax(0, 1fr); }
  .forecast-intro span, .forecast-strip > p { font-size: .6rem; }
  .game-grid {
    grid-template-columns: minmax(138px, .66fr) minmax(340px, 1.8fr) minmax(164px, .82fr);
    grid-template-areas: "resources planet commands";
    gap: 8px;
    align-items: stretch;
  }
  .command-panel {
    grid-area: commands;
    position: relative;
    z-index: auto;
    top: auto;
    min-height: 550px;
    display: flex;
    flex-direction: column;
    padding: 10px;
  }
  .command-panel .panel-heading {
    display: flex;
    min-height: 54px;
    padding: 0 0 10px;
    border-right: 0;
    border-bottom: 1px solid var(--line);
  }
  .command-panel .panel-heading .eyebrow { display: none; }
  .command-panel .panel-heading h2 { font-size: .86rem; line-height: 1.3; }
  .command-panel .icon-button { width: 28px; height: 28px; flex: 0 0 auto; }
  .command-panel .command-list { grid-template-columns: 1fr; gap: 7px; margin: 10px 0 0; }
  .command-panel .command {
    min-height: 70px;
    grid-template-columns: 22px minmax(0, 1fr);
    gap: 2px 6px;
    padding: 7px;
  }
  .command-panel .command span { min-width: 0; }
  .command-panel .command strong,
  .command-panel .command small,
  .command-panel .command em { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
  .command-panel .command em { grid-column: 2; text-align: left; }
  .command-panel .end-day { min-height: 66px; align-self: stretch; margin-top: auto; padding: 8px; }
  .resources-panel {
    grid-area: resources;
    position: relative;
    z-index: auto;
    top: auto;
    min-height: 550px;
    display: flex;
    flex-direction: column;
    padding: 10px;
  }
  .resources-panel .panel-heading { padding: 0 0 10px; border-right: 0; border-bottom: 1px solid var(--line); }
  .resources-panel .panel-heading .eyebrow { display: none; }
  .resources-panel .panel-heading h2 { font-size: .9rem; line-height: 1.3; }
  .resources-panel .resource-list { grid-template-columns: 1fr; gap: 7px; margin: 10px 0 0; }
  .resources-panel .resource { min-height: 68px; grid-template-columns: 28px minmax(0, 1fr); gap: 7px; padding: 7px; }
  .resources-panel .resource-icon { width: 28px; height: 28px; }
  .resources-panel .resource-use { font-size: .6rem; }
  .resources-panel .resource em, .resources-panel .adaptation-card { display: none; }
  .resources-panel .shield-row { display: grid; gap: 7px; margin-top: auto; padding-top: 12px; align-items: center; }
  .resources-panel .shield-row strong { font-size: .9rem; }
  .planet-stage { grid-area: planet; min-height: 550px; }
  .map-wrap { padding-top: 150px; }
  .hex { width: 64px; height: 72px; }
  .hex-icon b { font-size: 1rem; }
  .hex-icon em { font-size: .48rem; }
}

@media (max-width: 980px) {
  .metrics-dock { grid-template-columns: 1fr; }
  .forecast-strip { grid-template-columns: 130px minmax(0, 1fr); }
  .forecast-intro span, .forecast-strip > p { font-size: .68rem; }
}

@media (max-width: 760px) {
  .shell { width: min(100% - 22px, 620px); padding-top: 14px; }
  .topbar { align-items: flex-start; }
  .brand-mark { width: 30px; height: 30px; }
  h1 { font-size: 1.2rem; }
  .metrics-dock { grid-template-columns: 1fr; gap: 4px; padding: 4px; }
  .status-ribbon { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .status-card, .action-pips { min-height: 62px; padding: 7px 8px; gap: 4px; }
  .status-card span, .action-pips span { font-size: .65rem; }
  .status-card strong, .action-pips strong { font-size: .9rem; }
  .status-card .impact-copy, .action-pips small, #actionPips { display: none; }
  .forecast-strip { grid-template-columns: 1fr; grid-template-rows: auto; min-height: 58px; padding: 6px 8px; }
  .forecast-intro, .forecast-strip > p { display: none; }
  .forecast-equation { grid-column: 1; grid-row: auto; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; }
  .forecast-equation > b { display: none; }
  .forecast-value, .forecast-casualties { min-width: 0; padding: 5px 6px; border: 1px solid var(--line); border-radius: 8px; background: rgba(255,255,255,.022); }
  .forecast-value small, .forecast-casualties span { overflow: hidden; font-size: .56rem; white-space: nowrap; text-overflow: ellipsis; }
  .forecast-value strong, .forecast-casualties strong { margin-top: 2px; font-size: .8rem; }
  .game-grid { display: flex; flex-direction: column; }
  .command-panel {
    position: relative;
    z-index: auto;
    top: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 88px;
    gap: 6px;
    padding: 7px;
    min-height: 84px;
    background: rgba(5, 16, 13, .96);
    backdrop-filter: blur(14px);
  }
  .command-panel .panel-heading { display: none; }
  .command-panel .command-list { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; margin: 0; }
  .command-panel .command { min-height: 68px; display: grid; grid-template-columns: 1fr; gap: 3px; padding: 6px 3px; text-align: center; }
  .command-panel .command kbd { margin: 0 auto; }
  .command-panel .command small, .command-panel .command em { display: none; }
  .command-panel .end-day { min-height: 68px; margin: 0; padding: 7px; }
  .command-panel .end-day small { font-size: .58rem; }
  .resources-panel {
    position: relative;
    z-index: auto;
    top: auto;
    display: grid;
    grid-template-columns: minmax(0, 1fr) 72px;
    gap: 6px;
    padding: 7px;
    min-height: 72px;
    background: rgba(5, 16, 13, .96);
    backdrop-filter: blur(14px);
  }
  .resources-panel .panel-heading { display: none; }
  .resources-panel .resource-list { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin: 0; }
  .resources-panel .resource { min-height: 56px; grid-template-columns: 24px minmax(0, 1fr); gap: 5px; padding: 5px; text-align: left; }
  .resources-panel .resource-icon { width: 24px; height: 24px; margin: 0; }
  .resources-panel .resource-use, .resources-panel .resource em { display: none; }
  .resources-panel .adaptation-card { display: none; }
  .resources-panel .shield-row { display: grid; align-content: center; margin: 0; padding: 0; text-align: center; }
  .resources-panel .shield-row span, .resources-panel .shield-row small { display: none; }
  .coach-bar { grid-template-columns: auto 1fr; }
  .coach-avatar { display: none; }
  .coach-bar > button { grid-column: 1 / -1; justify-self: end; }
  .command-panel { order: 1; }
  .resources-panel { order: 2; min-height: auto; }
  .planet-stage { order: 3; min-height: 560px; }
  .map-wrap { padding-top: 150px; }
  .selected-instruction { display: none; }
  .action-rule-card { top: 88px; padding: 8px; }
  .rule-heading { align-items: flex-start; }
  .rule-heading.compact { display: grid; gap: 3px; }
  .terrain-yields { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .rule-compact { grid-template-columns: auto auto; gap: 5px 8px; }
  .rule-compact em { grid-column: 1 / -1; text-align: left; }
  .resource-list { grid-template-columns: repeat(3, 1fr); }
  .resource { grid-template-columns: 1fr; text-align: center; }
  .resource-icon { margin: 0 auto; }
  .resource em { display: none; }
  .command-list { grid-template-columns: 1fr 1fr; }
  .event-strip { grid-template-columns: 1fr auto; }
  .signal { grid-column: 1 / -1; }
  .hex { width: 61px; height: 68px; }
  .planet-glow, .planet-fractures { width: 500px; height: 500px; }
  .orbit-one { width: 560px; height: 560px; }
  .orbit-two { width: 640px; height: 640px; }
}

@media (max-width: 450px) {
  .mission-clock span { display: none; }
  .coach-bar { grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; min-height: 0; padding: 9px 10px; }
  .coach-step { width: auto; min-width: 58px; padding: 7px 8px; font-size: .72rem; }
  .coach-copy { min-width: 0; }
  .coach-copy strong { margin-bottom: 2px; font-size: .88rem; }
  .coach-copy p { display: -webkit-box; overflow: hidden; font-size: .72rem; line-height: 1.35; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
  .coach-bar > button { grid-column: auto; justify-self: auto; max-width: 66px; padding: 7px 6px; font-size: .68rem; }
  .planet-stage, .map-wrap { min-height: 540px; }
  .hex { width: 53px; height: 60px; }
  .hex-icon { gap: 2px; }
  .hex-icon b { font-size: 1rem; }
  .hex-icon em { font-size: .44rem; }
  .hex small { display: block; bottom: 8px; font-size: .48rem; }
  .action-rule-card { width: calc(100% - 18px); }
  .rule-heading { display: grid; gap: 2px; }
  .terrain-yields { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 3px; }
  .terrain-yields > span { padding: 4px 5px; }
  .terrain-yields b { display: grid; place-items: center; gap: 0; font-size: .56rem; }
  .terrain-yields b i { font-size: .8rem; }
  .terrain-yields em { font-size: .56rem; }
  .terrain-yields small { font-size: .52rem; }
  .resources-panel .resource-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .resources-panel .resource { grid-template-columns: 22px minmax(0, 1fr); }
  .resources-panel .resource-icon { width: 22px; height: 22px; margin: 0; }
}

@media (max-width: 560px) {
  .modal.briefing-mode { max-height: calc(100vh - 20px); padding: 18px; }
  .modal.victory-mode { max-height: calc(100vh - 20px); padding: 18px; }
  .modal.defeat-mode { max-height: calc(100vh - 20px); padding: 18px; }
  .modal.hope-mode { max-height: calc(100vh - 20px); padding: 18px; }
  .modal.briefing-mode .modal-content { margin: 14px 0; }
  .modal.victory-mode .modal-content { margin: 12px 0; }
  .modal.defeat-mode .modal-content { margin: 12px 0; }
  .modal.hope-mode .modal-content { margin: 12px 0; }
  .modal.briefing-mode h2 { padding-right: 24px; font-size: 1.42rem; }
  .modal.victory-mode h2 { padding-right: 24px; font-size: 1.35rem; }
  .modal.defeat-mode h2 { padding-right: 24px; font-size: 1.35rem; }
  .modal.hope-mode h2 { padding-right: 24px; font-size: 1.35rem; }
  .victory-result { grid-template-columns: 1fr; gap: 12px; min-height: 0; }
  .victory-character { min-height: 190px; }
  .victory-character img { height: 190px; }
  .turn-loop { grid-template-columns: 1fr; gap: 6px; }
  .turn-step { min-height: 62px; padding: 9px 11px; }
  .action-cheatsheet { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 5px; }
  .action-cheatsheet span { padding: 7px 8px; font-size: .75rem; }
  .first-move { grid-template-columns: 1fr; gap: 8px; }
  .first-move > b { width: max-content; }
}

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

/* Living systems stay beside or below the board, never as a scrolling overlay. */
.weapon-picker { display: flex; gap: 6px; margin-top: 10px; }
.weapon-picker button, .living-console button { border: 1px solid var(--line-strong); border-radius: 9px; padding: 8px 10px; background: #0c211b; color: var(--text); cursor: pointer; font-size: .875rem; }
.weapon-picker button { flex: 1; }
.weapon-picker button[aria-pressed="true"], .infection-controls button[aria-pressed="true"] { color: var(--lime); border-color: var(--lime); background: #25331c; }
.weapon-hint { display: block; margin: 7px 0 12px; color: var(--muted); font-size: .875rem; line-height: 1.4; }
.planet-stage .map-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 16px 12px 68px; }
.planet-stage .selected-instruction { position: relative; top: auto; left: auto; transform: none; }
.planet-stage .action-rule-card { position: relative; top: auto; left: auto; transform: none; flex-shrink: 0; }
.planet-stage .hex-map { margin: 6px 0 16px; flex-shrink: 0; }
.planet-stage .bottom-label { position: relative; left: auto; bottom: auto; transform: none; font-size: .75rem; }
.living-console { margin-top: 18px; padding: 16px; border: 1px solid var(--line); border-radius: var(--radius); background: #061510; }
.living-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 14px; align-items: center; }
.living-summary small { display: block; color: var(--muted); font-size: .875rem; margin-bottom: 5px; }
.living-summary strong { display: block; color: var(--green-soft); font-size: .95rem; line-height: 1.4; }
.living-console details { margin-top: 14px; }
.living-console summary { color: var(--muted); font-size: .875rem; cursor: pointer; }
.living-details-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 16px; }
.living-details-grid h3 { font-size: 1rem; margin: 0 0 10px; }
.living-details-grid p, .living-help, .council-intro { color: var(--muted); font-size: .875rem; line-height: 1.65; }
.faction-row { display: grid; grid-template-columns: 4.5em 1fr 2em; align-items: center; gap: 6px; margin-bottom: 7px; font-size: .875rem; }
.faction-row meter { width: 100%; }
.faction-row b { text-align: right; }
.infection-controls { display: flex; flex-wrap: wrap; gap: 6px; }
.council-options { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.council-options button { display: grid; gap: 6px; text-align: left; padding: 14px; border: 1px solid var(--line-strong); border-radius: 12px; background: #0d251d; color: var(--text); cursor: pointer; min-width: 0; }
.council-options button:enabled:hover { border-color: var(--lime); }
.council-options button strong { color: var(--green-soft); font-size: 1rem; }
.council-options button span, .council-options button small { font-size: .875rem; line-height: 1.5; }
.council-options button small { color: var(--muted); }
.global-boss { margin: 18px 0; border: 1px solid #faad5c88; border-radius: var(--radius); padding: 14px; background: #251712; }
.global-boss > div:first-child { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.global-boss strong { color: #ffd28a; font-size: 1rem; }
.global-boss span { font-size: .875rem; }
.boss-waves { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.boss-wave { display: grid; gap: 5px; padding: 10px; border-radius: 10px; border: 1px solid #6b4830; background: #111c18; }
.boss-wave.current { border-color: #ffd28a; box-shadow: inset 0 0 16px #ffd28a22; }
.boss-wave b { font-size: .95rem; color: #ffd28a; }
.boss-wave small { font-size: .875rem; color: var(--muted); }
.hex.terrain-changed { outline: 2px solid var(--blue); outline-offset: -6px; filter: drop-shadow(0 0 7px #87d7ff); }
.root-lifted .hex.base { transform: translateY(-12px); }
.root-lifted .hex.base::before { background: repeating-linear-gradient(65deg, transparent 0 9px, #22553d 10px 13px, transparent 14px 23px); inset: 60% 0 0; }
.resistance-badge { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); z-index: 3; font-size: .75rem; color: #ffe2ba; }
.hex.fire-shell { box-shadow: inset 0 0 18px #eed5bb; }
.planet-stage.boss-weather::after { content: ""; position: absolute; z-index: 7; inset: 0; pointer-events: none; background: repeating-linear-gradient(108deg, transparent 0 25px, #b6dcff44 26px 28px, transparent 29px 65px); animation: stormSweep .8s linear infinite; }
.planet-stage.boss-geology { animation: shudder .6s ease-in-out infinite; border-color: #ffac64; }
.planet-stage.boss-biology .hex[data-biome="forest"], .planet-stage.boss-biology .hex[data-biome="hive"] { filter: brightness(1.5) drop-shadow(0 0 12px #63ffb3); }
@keyframes stormSweep { from { background-position: 0 -70px; } to { background-position: 30px 70px; } }
@media (max-width: 760px) {
  .command-panel { grid-template-areas: "actions end" "weapons end" "hint hint"; }
  .command-panel .command-list { grid-area: actions; }
  .command-panel .weapon-picker { grid-area: weapons; margin: 0; }
  .command-panel .weapon-hint { grid-area: hint; }
  .command-panel .end-day { grid-area: end; }
  .command-panel .command-list { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .weapon-picker { margin-top: 8px; }
  .weapon-picker button { padding: 5px 10px; }
  .weapon-hint { margin: 5px 0 0; }
  .living-summary { grid-template-columns: 1fr 1fr; gap: 12px; }
  .living-details-grid { grid-template-columns: 1fr; gap: 14px; }
  .boss-waves { grid-template-columns: 1fr; }
  .global-boss { padding: 10px; }
  .boss-wave { grid-template-columns: 5em 1fr; }
  .boss-wave small { grid-column: 2; }
  .council-options { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) { .planet-stage.boss-geology { animation: none; } .planet-stage.boss-weather::after { animation: none; } }