:root {
  --bg: #0b0f19;
  --panel: #111827;
  --accent: #3b82f6;
  --accent2: #8b5cf6;
  --text: #e5e7eb;
  --muted: #9ca3af;
  --border: #1f2937;
  --danger: #ef4444;
  --success: #22c55e;
  --warning: #f59e0b;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: linear-gradient(180deg, #010208 0%, #020a1c 45%, #000005 100%);
  background-attachment: fixed;
  color: var(--text);
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 125%;
  min-height: 100vh;
}

#app { max-width: 1400px; margin: 0 auto; padding: 20px 15px; position: relative; z-index: 1; }

.game-header {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 8px 16px;
  background: #000;
  border: 1px solid transparent;
  border-image: linear-gradient(135deg, #fff 0%, #aaa 5%, #666 15%, #333 40%, #111 50%, #333 60%, #666 75%, #f00 85%, #ff0 92%, #fff 100%) 1;
  border-radius: 0;
  font-family: 'Courier New', Courier, 'Lucida Console', monospace;
  margin-bottom: 12px;
  color: #0ff;
  gap: 12px;
  white-space: nowrap;
  width: 100%;
  box-sizing: border-box;
  min-width: 0;
  overflow: visible;
}
.game-header h1 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: bold;
  white-space: nowrap;
  flex-shrink: 0;
  background: linear-gradient(90deg, #0ff, #0080ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.header-right {
  display: flex;
  gap: 6px;
  align-items: center;
  flex-wrap: nowrap;
  margin-left: auto;
  min-width: 0;
}
.header-info {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-wrap: nowrap;
  min-width: 0;
  overflow: hidden;
}
.header-info span {
  background: #000;
  padding: 2px 5px;
  border: 1px solid #224;
  border-radius: 0;
  font-size: 0.75rem;
  font-weight: 500;
  color: #0ff;
  font-family: 'Courier New', Courier, 'Lucida Console', monospace;
  white-space: nowrap;
  flex-shrink: 0;
}
.game-header .dos-btn {
  font-size: 0.75rem;
  padding: 3px 8px;
  flex-shrink: 0;
}
.game-header h1 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: bold;
  white-space: nowrap;
  flex-shrink: 0;
  background: linear-gradient(90deg, #0ff, #0080ff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}


.screen { animation: screenIn 0.28s cubic-bezier(0.22, 1, 0.36, 1); }
@keyframes screenIn {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
}
.panel:has(.dos-screen),
.report:has(.dos-screen),
.step-panel:has(.dos-screen) {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 0;
  text-align: center;
}
.panel h2 { margin-top: 0; }

/* --- Turn Wizard Styling --- */
.turn-header {
  background: #000;
  border: 1px solid #224;
  box-shadow: 0 5px 14px rgba(0,0,0,0.75), 0 2px 0 rgba(40,90,220,0.25), inset 0 1px 0 rgba(100,180,255,0.14);
  border-radius: 0;
  padding: 10px 14px;
  margin-bottom: 16px;
  box-shadow: 0 0 20px rgba(0,0,255,0.2);
  font-family: 'Courier New', Courier, 'Lucida Console', monospace;
  color: #0ff;
  line-height: 1.3;
  font-size: 1.19rem;
  width: 100%;
  min-width: 320px;
  box-sizing: border-box;
}
.turn-header.rusted {
  border-color: #cd853f;
  box-shadow: 0 0 20px rgba(205,133,63,0.3);
  animation: rustPulse 2s infinite;
}
@keyframes rustPulse {
  0%, 100% { border-color: #cd853f; box-shadow: 0 0 0 0 rgba(205,133,63,0.4); }
  50% { border-color: #8b4513; box-shadow: 0 0 12px 2px rgba(139,69,19,0.3); }
}
.turn-step-badges {
  display: flex;
  gap: 3px;
  flex-wrap: nowrap;
  justify-content: center;
  font-size: 0.72rem;
  padding-top: 4px;
}
.step-badge {
  padding: 1px 3px;
  font-family: 'Courier New', Courier, 'Lucida Console', monospace;
  color: #444;
  white-space: nowrap;
}
.step-badge.active {
  color: #ffd54a;
  font-weight: bold;
  background: #003;
  border: 1px solid transparent;
  border-image: linear-gradient(135deg, #001a4d 0%, #00f 35%, #0ff 50%, #00f 65%, #001a4d 100%) 1;
}
.step-badge.done {
  color: #0f0;
}

.advisor-box {
  background: linear-gradient(180deg, #000a04 0%, #000308 60%, #000501 100%);
  border: 2px solid;
  border-image: linear-gradient(180deg, #0c2e1a 0%, #1a5c33 50%, #010a05 100%) 1;
  box-shadow:
    inset 0 3px 8px rgba(0,0,0,0.95),
    inset 0 0 30px rgba(0,60,25,0.35),
    inset 0 -1px 0 rgba(60,220,120,0.18),
    0 1px 0 rgba(60,220,120,0.12);
  border-radius: 0;
  padding: 10px 14px;
  margin-bottom: 16px;
  font-family: 'Courier New', Courier, 'Lucida Console', monospace;
  color: #0ff;
  line-height: 1.4;
  font-size: 1.05rem;
  box-shadow: 0 0 15px rgba(0,0,255,0.15);
}
/* Layout of the advisor column beside the turn header. Kept in CSS (not an
   inline style) so the dismissed state below can collapse it. */
.advisor-slot {
  flex: 0 0 300px;
  min-width: 260px;
  margin-bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
/* ── Government Spending ─────────────────────────────────────────────── */
.spend-tabs .dos-btn.active {
  color: #ffd54a;
  border-image: linear-gradient(180deg, #ffb300 0%, #a35c00 45%, #3a1f00 100%) 1;
  text-shadow: 0 0 8px rgba(255,213,74,0.5);
}
.sre-spend-table th.num, .sre-spend-table td.num { text-align: right; font-variant-numeric: tabular-nums; }
.sre-spend-table .spend-name { line-height: 1.25; }
.sre-spend-table .spend-name small {
  display: block; color: #667; font-size: 0.72em; font-weight: normal;
}
.sre-spend-table .spend-buy { white-space: nowrap; }
.sre-spend-table .spend-cost { color: #888; }
.sre-spend-table .spend-cost.over { color: #f55; }
.sre-spend-table .spend-dash { color: #556; }
.sre-spend-table tr.queued td { background: rgba(0, 80, 40, 0.16); }
.sre-spend-table tr.queued .spend-cost { color: #6cffb0; }
.sre-spend-table .dos-btn:disabled { opacity: 0.35; cursor: not-allowed; }
/* Max flips to None once the row is at its affordable maximum */
.sre-spend-table .dos-btn.is-none {
  color: #ffd54a;
  border-image: linear-gradient(180deg, #ffb300 0%, #a35c00 45%, #3a1f00 100%) 1;
}

/* Running order summary: what this purchase costs and what it leaves behind */
.spend-order {
  border-top: 1px solid #0a2a1a;
  margin-top: 10px;
  padding-top: 8px;
}
.spend-order-row {
  display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap;
  justify-content: space-between;
}
.spend-order-items { color: #6cffb0; }
.spend-order-empty { color: #667; }
.spend-order-credits { color: #aaa; white-space: nowrap; }
.spend-order-credits b { color: #0ff; }
.spend-order-credits b.over { color: #f55; }
.spend-warn { color: #ffd54a; font-size: 0.85em; margin-top: 4px; }
.spend-warn.bad { color: #f55; }

@media (max-width: 640px) {
  .sre-spend-table .spend-name small { display: none; }
  .sre-spend-table .spend-buy .dos-btn { padding: 3px 6px; }
}

/* Pick-5 quick pick: dimmed while it is only a suggestion */
.pick5-suggested { color: #667 !important; font-style: italic; }

/* Forfeit control. Inside the advisor card it sits on its own row; with the
   advisor dismissed it joins the step's action row, pushed to the far right. */
.forfeit-wrap { margin-top: 10px; display: flex; justify-content: flex-end; }
/* Needs to outrank `.dos-screen .sre-actions button`, which sets the cyan. */
.dos-screen .sre-actions button.forfeit-inline,
.sre-actions .dos-btn.forfeit-inline {
  margin-left: auto;
  color: #f55;
  border-image: linear-gradient(180deg, #f55 0%, #a01414 45%, #3a0000 100%) 1;
}
.dos-screen .sre-actions button.forfeit-inline:hover,
.sre-actions .dos-btn.forfeit-inline:hover { color: #ffb3b3; }
.advisor-box.happy { border-color: #0f0; box-shadow: 0 0 15px rgba(0,255,0,0.15); }
.advisor-box.danger { border-color: #f00; box-shadow: 0 0 15px rgba(255,0,0,0.15); }
.advisor-box.warning { border-color: #fa0; box-shadow: 0 0 15px rgba(255,170,0,0.15); }
.advisor-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
  font-weight: bold;
  color: #ffd54a;
  text-shadow: 0 0 10px rgba(255,200,60,0.5);
}
.advisor-header::before {
  content: '>';
  color: #0f0;
}
.advisor-msg {
  color: #888;
  margin: 2px 0;
  padding-left: 16px;
  border-left: 1px solid #003;
}
.advisor-msg.happy-msg { color: #0f0; }
.advisor-msg.danger-msg { color: #f00; }
.advisor-msg.warning-msg { color: #fa0; }

.step-panel {
  background: #000;
  border: 2px solid; border-image: linear-gradient(180deg, #16337a 0%, #000814 100%) 1;
  border-radius: 0;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-family: 'Courier New', Courier, 'Lucida Console', monospace;
  color: #0ff;
  line-height: 1.3;
  font-size: 1.19rem;
  box-shadow: 0 0 20px rgba(0,0,255,0.2);
}
.step-panel.sre-flat {
  background: #000;
  border: 2px solid; border-image: linear-gradient(180deg, #16337a 0%, #000814 100%) 1;
  border-radius: 0;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-family: 'Courier New', Courier, 'Lucida Console', monospace;
  color: #0ff;
  line-height: 1.3;
  font-size: 1.19rem;
  box-shadow: 0 0 20px rgba(0,0,255,0.2);
}
.step-panel h3 { margin-top: 0; color: #ffd54a; font-weight: bold; text-shadow: 0 0 10px rgba(255,200,60,0.45); font-family: 'Courier New', Courier, 'Lucida Console', monospace; }
.step-panel .suggested {
  background: #003;
  border: 1px dashed #00f;
  border-radius: 0;
  padding: 8px 12px;
  margin: 8px 0;
  font-size: 0.9rem;
  color: #0ff;
}
.notice {
  background: #003;
  border: 1px solid #fa0;
  border-radius: 0;
  padding: 10px 14px;
  margin: 8px 0;
  font-family: 'Courier New', Courier, 'Lucida Console', monospace;
  color: #fa0;
  font-size: 1.05rem;
}

.tabs, .menu-grid, .spend-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.menu-grid button {
  flex: 1 1 45%;
  padding: 18px;
  font-size: 1rem;
}

button {
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 14px;
  cursor: pointer;
  font-weight: 600;
  margin: 2px;
}
button:hover { filter: brightness(1.1); }
button.secondary { background: var(--border); color: var(--text); }
button.success { background: var(--success); }
button.danger { background: var(--danger); }

input, select, textarea {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 1rem;
}
textarea { min-height: 80px; width: 100%; resize: vertical; }
.input-row {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 10px 0;
  flex-wrap: wrap;
}
.input-row label { display: flex; align-items: center; gap: 6px; }
.input-row input[type="number"] { width: 80px; }

.report { background: linear-gradient(180deg, #020409 0%, #000 100%); border: 2px solid; border-image: linear-gradient(180deg, #16337a 0%, #0a1f52 45%, #000814 100%) 1; border-radius: 0; padding: 10px 14px; margin: 10px 0; font-family: 'Courier New', Courier, 'Lucida Console', monospace; color: #0ff; line-height: 1.3; font-size: 1.19rem; box-shadow: 0 6px 16px rgba(0,0,0,0.8), 0 2px 0 rgba(50,110,255,0.22), 0 -2px 0 rgba(0,0,20,0.9), inset 0 1px 0 rgba(90,160,255,0.12), inset 0 0 24px rgba(0,20,60,0.3); }
.report .event { padding: 4px 0; border-bottom: 1px solid #003; color: #888; }

.spend-table { width: 100%; border-collapse: collapse; }
.spend-table th, .spend-table td { padding: 8px; border-bottom: 1px solid var(--border); text-align: left; }
.spend-table input { width: 70px; padding: 4px; }

.score-table { width: 100%; border-collapse: collapse; }
.score-table th, .score-table td { padding: 10px; border-bottom: 1px solid var(--border); }

/* --- Classic SRE DOS Status --- */
.dos-screen {
  transition: box-shadow 0.25s ease;
  background: linear-gradient(180deg, #010203 0%, #000 30%, #000814 100%);
  border-radius: 0;
  padding: 6px 10px;
  box-shadow: inset 0 0 40px rgba(0,20,60,0.45), inset 0 2px 8px rgba(0,0,0,0.9), 0 1px 0 rgba(60,120,255,0.12);
  font-family: 'Courier New', Courier, 'Lucida Console', monospace;
  color: #0ff;
  line-height: 1.3;
  box-shadow: 0 0 20px rgba(0,0,255,0.2);
  font-size: 1.19rem;
  width: 100%;
  min-width: 320px;
  box-sizing: border-box;
}
.report:has(.dos-screen),
.panel:has(.dos-screen),
.step-panel:has(.dos-screen),
.step-panel.sre-flat:has(.dos-screen) {
  display: block;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
}
.dos-screen .sre-title {
  color: #ffd54a; font-weight: bold;
  font-size: 1.25em; /* +25% card title size */
  text-shadow: 0 0 14px rgba(255,200,60,0.55), 0 2px 4px rgba(0,0,0,0.9);
  letter-spacing: 0.06em;
  animation: titleIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes titleIn {
  from { opacity: 0; transform: translateX(-12px); }
  to   { opacity: 1; transform: translateX(0); }
}
  font-weight: bold;
  margin: 2px 0 4px 0;
  text-align: left;
}
.dos-screen .sre-name {
  color: #0ff;
  font-weight: bold;
  margin-bottom: 2px;
  text-align: left;
}
.dos-screen .sre-hr {
  border: none;
  height: 1px;
  background: linear-gradient(90deg, #001a4d 0%, #00f 35%, #0ff 50%, #00f 65%, #001a4d 100%);
  margin: 3px 0 4px 0;
}
.dos-screen .sre-line {
  display: flex;
  align-items: baseline;
  padding: 1px 0;
  font-size: inherit;
  margin: 0;
  transition: background 0.15s ease;
}
.dos-screen .sre-line:hover {
  background: rgba(0, 40, 120, 0.12);
}
.dos-screen .sre-lab {
  color: #aaa;
  flex-shrink: 0;
  text-align: left;
  white-space: nowrap;
  padding-right: 1ch;
}
.dos-screen .sre-val {
  color: #0ff;
  flex-shrink: 1;
  transition: color 0.25s ease, text-shadow 0.25s ease;
  padding-left: 2px;
  min-width: 0;
  word-break: break-word;
}
.dos-screen .sre-extra {
  color: #aaa;
  padding-left: 12px;
  flex-shrink: 0;
  white-space: nowrap;
}
.dos-screen .sre-line.narrative {
  display: block;
  text-align: left;
  line-height: 1.55;
  letter-spacing: 0.01em;
  margin: 4px 0 6px;
  /* No opacity fade — the chroma settle already carries the text in. */
}
/* Step panels center by default (H2-era rule); SRE screens read better left-aligned */
.step-panel:has(.dos-screen) .dos-screen { text-align: left; }
.dos-screen .sre-dim { color: #888; }
.dos-screen .sre-unit { color: #888; }
.dos-screen .sre-planet-tag {
  color: #0ff;
  white-space: nowrap;
}
.dos-screen .sre-planet-tag .p-name { color: #888; }
.dos-screen .sre-planet-tag .p-val  { color: #fff; }
.dos-screen .sre-planet-tag .p-bracket { color: #444; }
.dos-screen .sre-mil-tag { white-space: nowrap; }
.dos-screen .sre-mil-tag .m-name { color: #888; }
.dos-screen .sre-mil-tag .m-val  { color: #0ff; }
.dos-screen .sre-mil-tag .m-bracket { color: #444; }
.dos-screen .m-bracket { color: #444; }
.dos-screen .sre-footer {
  color: #0ff;
  margin-top: 4px;
  font-size: inherit;
  text-align: left;
}
.dos-screen .sre-prompt {
  color: #ffd54a;
  font-weight: bold;
  text-shadow: 0 0 8px rgba(255,200,60,0.45), 0 1px 3px rgba(0,0,0,0.9);
  margin-top: 4px;
  font-size: inherit;
  text-align: left;
}
.dos-screen .sre-actions {
  margin-top: 8px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.dos-screen .sre-actions button, .dos-btn {
  font-family: 'Courier New', Courier, 'Lucida Console', monospace;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.92em;
  background: linear-gradient(180deg, #014 0%, #002 100%);
  border: 1px solid transparent;
  border-image: linear-gradient(180deg, #0af 0%, #00509e 45%, #001a4d 100%) 1;
  color: #0ff;
  padding: 4px 10px;
  cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(120,220,255,0.35), inset 0 -2px 4px rgba(0,0,20,0.6), 0 2px 4px rgba(0,0,0,0.6), 0 1px 0 rgba(80,160,255,0.15);
  font-size: inherit;
  border-radius: 0;
}
.dos-screen .sre-actions button:hover, .dos-btn:hover {
  background: linear-gradient(180deg, #026 0%, #013 100%);
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(140,230,255,0.5), inset 0 -2px 4px rgba(0,0,20,0.6), 0 3px 8px rgba(0,80,255,0.35), 0 1px 0 rgba(120,220,255,0.2);
  transform: translateY(-1px);
}
.dos-screen .sre-actions button:active, .dos-btn:active {
  transform: translateY(1px);
  box-shadow: inset 0 2px 6px rgba(0,0,10,0.8), 0 0 2px rgba(0,0,0,0.5);
}
.dos-btn.buy-all-over-budget,
.dos-btn.buy-all-over-budget:hover,
.dos-btn.buy-all-over-budget:disabled {
  background: var(--danger);
  border-color: #f55;
  color: #fff;
  cursor: not-allowed;
  opacity: 0.85;
}

.dos-screen .planets-row {
  display: block;
}
.dos-screen .planets-row .sre-lab {
  float: left;
  width: 100px;
}
.dos-screen .planets-wrap {
  display: block;
  margin-left: 100px;
  white-space: normal;
}

.dos-screen .name-deco-low { color: #080; }
.dos-screen .name-deco-hi { color: #0f0; }
.dos-screen .name-text { color: #fff; }

.dos-screen .sre-spend-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Courier New', Courier, 'Lucida Console', monospace;
  font-size: inherit;
  margin-top: 8px;
}
.dos-screen .sre-spend-table th, .dos-screen .sre-spend-table td {
  padding: 2px 8px;
  border-bottom: 1px solid #003;
  text-align: left;
  color: #0ff;
}
.dos-screen .sre-spend-table th {
  color: #aaa;
  border-bottom: 1px solid transparent;
  border-image: linear-gradient(90deg, #001a4d 0%, #00f 35%, #0ff 50%, #00f 65%, #001a4d 100%) 1;
}
.dos-screen .sre-spend-table td .dos-btn {
  padding: 2px 6px;
  font-size: 0.85rem;
}
.dos-screen .sre-spend-table input[type="number"] {
  width: 60px;
  background: #000;
  border: 1px solid #335;
  color: #0ff;
  font-family: inherit;
  font-size: inherit;
  padding: 2px 4px;
}
.no-spinner::-webkit-outer-spin-button,
.no-spinner::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.no-spinner {
  -moz-appearance: textfield;
}

.dos-screen .sre-bank-menu {
  color: #0ff;
  line-height: 1.5;
}
.dos-screen .bank-key {
  color: #0f0;
  font-weight: bold;
}
.dos-screen .sre-bank-input {
  background: linear-gradient(180deg, #000c1a 0%, #000 100%);
  border: 1px solid #335;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.9), inset 0 0 8px rgba(0,40,120,0.25), 0 1px 0 rgba(90,160,255,0.08);
  color: #0ff;
  font-family: 'Courier New', Courier, 'Lucida Console', monospace;
  font-size: inherit;
  padding: 2px 6px;
  width: 120px;
}
.dos-screen .sre-bank-actions {
  margin-top: 8px;
}
.dos-screen .sre-bank-actions .dos-btn {
  padding: 3px 8px;
}

/* --- Auth Terminal --- */
.auth-terminal-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 70vh;
  padding: 20px;
}
.auth-dos {
  min-width: 480px;
  max-width: 600px;
  width: auto;
  padding: 16px 20px;
  box-shadow: 0 0 30px rgba(0,0,255,0.25), inset 0 0 60px rgba(0,0,40,0.3);
  border: 1px solid #224;
}
.auth-tabs {
  display: flex;
  gap: 8px;
  margin: 10px 0;
  flex-wrap: wrap;
}
.auth-tab-btn {
  flex: 1 1 auto;
  text-align: center;
  padding: 6px 12px;
  font-size: 0.95rem;
}
.auth-tab-btn.active {
  background: #00f;
  color: #fff;
  border-color: #44f;
}
.auth-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0;
  flex-wrap: nowrap;
}
.auth-prompt {
  font-family: 'Courier New', Courier, 'Lucida Console', monospace;
  color: #0f0;
  font-size: inherit;
  white-space: nowrap;
  flex-shrink: 0;
}
.auth-input-box {
  display: flex;
  align-items: center;
  gap: 4px;
  background: #000;
  border: 1px solid #335;
  padding: 4px 8px;
  flex: 1 1 auto;
  min-width: 200px;
  max-width: 100%;
}
.auth-input-box:focus-within {
  border-color: #0ff;
  box-shadow: 0 0 6px rgba(0,255,255,0.3);
}
.auth-input-field {
  background: transparent;
  border: none;
  color: #0ff;
  font-family: 'Courier New', Courier, 'Lucida Console', monospace;
  font-size: inherit;
  outline: none;
  flex: 1 1 auto;
  width: 100%;
  padding: 0;
  margin: 0;
  caret-color: #0f0;
}
.auth-input-field::placeholder {
  color: #005;
}

/* ── Help modal sizing ───────────────────────────────────────────────────
   Sizing lives here rather than in a style attribute so it can respond to
   the viewport at all. It was pinned at 900px, which wasted most of a 1080p
   screen and nearly two thirds of a 1440p one. Steps up with width; the
   percentage caps keep it from touching the edges on ultrawides. */
/* Three classes deliberately: `.ops-overlay .dos-screen` caps every overlay at
   1100px and `.ops-menu-box` at 640px, both defined later in this file, so a
   two-class selector loses to them on source order. */
.ops-overlay .dos-screen.help-modal-box {
  width: min(94vw, 1120px);
  max-width: min(94vw, 1120px);
  max-height: 88vh;
  overflow-y: auto;
  padding: 0;
}
@media (min-width: 1500px) {
  .ops-overlay .dos-screen.help-modal-box {
    width: min(92vw, 1400px); max-width: min(92vw, 1400px); max-height: 90vh;
  }
}
@media (min-width: 2000px) {
  .ops-overlay .dos-screen.help-modal-box { width: min(88vw, 1660px); max-width: min(88vw, 1660px); }
}
@media (min-width: 2400px) {
  .ops-overlay .dos-screen.help-modal-box { width: min(84vw, 1880px); max-width: min(84vw, 1880px); }
}

/* Wider box means longer lines, so give the prose a comfortable measure while
   leaving tables and layout rows the full width. */
.help-modal-box .help-content > p,
.help-modal-box .help-content > ul,
.help-modal-box .help-content > ol { max-width: 95ch; }

/* CRT scanline effect for auth screen */
#auth-screen::before {
  content: '';
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: repeating-linear-gradient(
    0deg,
    rgba(0,0,0,0) 0px,
    rgba(0,0,0,0) 1px,
    rgba(0,0,0,0.08) 1px,
    rgba(0,0,0,0.08) 2px
  );
  pointer-events: none;
  z-index: 1000;
}

/* Chrome header matching game-header metallic border */
.auth-chrome-header {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  margin-bottom: 4px;
  padding: 6px 0;
  border: 1px solid transparent;
  border-image: linear-gradient(135deg, #fff 0%, #aaa 5%, #666 15%, #333 40%, #111 50%, #333 60%, #666 75%, #f00 85%, #ff0 92%, #fff 100%) 1;
  background: #000;
  white-space: nowrap;
}
.auth-chrome-header .auth-chrome-bracket { font-size: 1.9rem; }
.auth-chrome-header .auth-chrome-title { font-size: 1.75rem; letter-spacing: 1px; } /* large but fits */
.auth-chrome-title {
  color: #fff;
  font-weight: bold;
  font-size: 2.275rem; /* 1.3rem x 1.75 = 75% larger */
  letter-spacing: 0px;
  text-transform: uppercase;
  font-family: 'Courier New', Courier, 'Lucida Console', monospace;
}
.auth-chrome-bracket {
  font-weight: bold;
  font-size: 2.275rem; /* 1.3rem x 1.75 */
  font-family: 'Courier New', Courier, 'Lucida Console', monospace;
}

.maint-buttons {
  margin-left: 100px;
  margin-top: 8px;
}

.messages-list { max-height: 400px; overflow-y: auto; }
.message-item { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px; margin-bottom: 8px; }
.message-item .meta { color: var(--muted); font-size: 0.85rem; margin-bottom: 4px; }

.help-text p { line-height: 1.6; }

.trade-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.trade-cols h4 { margin-bottom: 6px; }
.trade-cols label { display: block; margin: 4px 0; }

@keyframes pulseLimeGreen {
  0% { box-shadow: 0 0 0 0 rgba(50, 205, 50, 0.7); }
  70% { box-shadow: 0 0 0 8px rgba(50, 205, 50, 0); }
  100% { box-shadow: 0 0 0 0 rgba(50, 205, 50, 0); }
}
.dos-btn.default-action {
  animation: pulseLimeGreen 1.5s infinite;
  border-color: #32CD32;
}

/* Operations Menu Overlay */
.ops-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(11, 15, 25, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}
.ops-menu-box {
  background: #000;
  border: 2px solid transparent;
  border-image: linear-gradient(135deg, #001a4d 0%, #00f 35%, #0ff 50%, #00f 65%, #001a4d 100%) 1;
  box-shadow: 0 10px 40px rgba(0,0,0,0.9), 0 0 60px rgba(0,60,200,0.25), inset 0 1px 0 rgba(100,180,255,0.15);
  padding: 16px;
  min-width: 320px;
  max-width: 640px;
}
.ops-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.ops-actions .dos-btn {
  flex: 1 1 40%;
  padding: 8px;
}

@keyframes fadeIn { from { opacity: 0; transform: translateY(40px) scale(0.96); filter: blur(2px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }

/* Main Menu flex layout */
#main-menu-wrapper > div {
  align-items: flex-start;
  gap: 16px;
}
#main-menu {
  flex: 1.3 1 0;
  min-width: 320px;
}
#main-menu .dos-screen {
  width: 100%;
  min-width: auto;
}
#main-menu .sre-actions {
  flex-wrap: nowrap;
}
@media (max-width: 860px) {
  #main-menu {
    flex: 1 1 100%;
  }
  #main-menu .sre-actions {
    flex-wrap: wrap;
  }
}

#main-menu .sre-actions .dos-btn {
  font-size: 0.89rem;
}

/* Scoreboard styling */
.dos-screen.scoreboard {
  width: 100%;
  max-width: none;
  min-width: 0;
}
.dos-screen.scoreboard .sre-line {
  justify-content: space-between;
  padding: 2px 0;
  border-bottom: 1px solid #003;
}
.dos-screen.scoreboard .sre-line:last-child {
  border-bottom: none;
}
.dos-screen.scoreboard .sre-extra {
  margin-left: auto;
  padding-left: 24px;
}

/* The SRE status card owns the Begin Turn action; suppress the duplicate nav button */
#btn-begin-turn {
  display: none !important;
}

/* Forfeit lives inside the advisor card now */
#btn-forfeit-turn {
  display: none !important;
}

/* --- Modal dialog system (replaces browser popups) --- */
.ui-modal {
  max-width: 460px;
  width: min(90vw, 460px);
}
.ui-modal-body {
  white-space: pre-wrap;
  color: #ccc;
  font-size: 0.95rem;
  line-height: 1.45;
  max-height: 50vh;
  overflow-y: auto;
}
#ui-modal-input.sre-bank-input {
  font-size: 1rem;
}

/* Animate pre-filled default inputs when a wizard step renders (J1) */
@keyframes ui-default-glow {
  0%   { box-shadow: 0 0 0 rgba(0,255,255,0); border-color: #335; background: #111; color: #0f0; }
  40%  { box-shadow: 0 0 30px rgba(0,255,255,1), 0 0 8px rgba(0,255,255,1) inset; border-color: #0ff; background: #003344; color: #fff; font-weight: bold; }
  100% { box-shadow: 0 0 0 rgba(0,255,255,0); border-color: #335; background: #111; color: #0f0; }
}
.ui-default-glow {
  animation: ui-default-glow 0.7s ease-in-out 3;
}

/* --- Live number delta animations (L1) --- */
/* Animates back to the element's own inherited color (no hardcoded end color) */
@keyframes num-flash-up {
  0%   { color: #0f0; text-shadow: 0 0 8px rgba(0,255,0,0.8); transform: translateY(2px); }
  100% { color: inherit; text-shadow: none; transform: none; }
}
@keyframes num-flash-down {
  0%   { color: #f33; text-shadow: 0 0 8px rgba(255,60,60,0.8); transform: translateY(-2px); }
  100% { color: inherit; text-shadow: none; transform: none; }
}
.num-delta-up   { animation: num-flash-up 1.5s ease-out; }
.num-delta-down { animation: num-flash-down 1.5s ease-out; }
.num-delta-badge {
  position: absolute;
  margin-left: 6px;
  font-size: 0.8rem;
  font-weight: bold;
  animation: num-badge-float 1.6s ease-out forwards;
  pointer-events: none;
}
.num-delta-badge.num-delta-up   { color: #0f0; }
.num-delta-badge.num-delta-down { color: #f33; }
@keyframes num-badge-float {
  0%   { opacity: 0; transform: translateY(4px); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-14px); }
}

/* Out of turns: Begin Turn goes red and stops pulsing */
.btn-no-turns {
  border-image: none;
  border: 1px solid #f33;
  color: #f55;
  background: #200;
  animation: none;
  cursor: not-allowed;
}
.btn-no-turns:hover {
  background: #300;
}


/* --- Modal containment: nothing breaks out of overlays (1080p-optimized) --- */
.ops-overlay {
  padding: 20px;
  box-sizing: border-box;
  overflow-y: auto;
}
.ops-overlay .dos-screen {
  max-width: min(92vw, 1100px);
  overflow-x: hidden;
  box-sizing: border-box;
  width: auto;
}
.ops-overlay .dos-screen .help-table,
.ops-overlay .dos-screen table {
  max-width: 100%;
  display: block;
  overflow-x: auto;
}
.ui-modal {
  max-width: min(92vw, 560px);
  width: auto;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
}
.help-content {
  padding-right: 8px;
}


/* --- Tablet & Mobile responsiveness --- */

/* Tablets (≤1024px): stack the advisor beside-header row, widen app padding */
@media (max-width: 1024px) {
  #app { padding: 12px 10px; }
  #play-screen > div > div[style*="display:flex"] {
    flex-direction: column;
  }
  #play-screen > div > div[style*="display:flex"] > #advisor-warnings {
    flex: 1 1 auto !important;
    width: 100%;
  }
  .dos-screen { font-size: 1.05rem; }
}

/* Phones (≤640px): single column everything, touch-friendly targets */
@media (max-width: 640px) {
  #app { padding: 8px 6px; max-width: 100%; }
  .game-header { flex-wrap: wrap; }
  .header-info { flex-wrap: wrap; width: 100%; }

  .dos-screen { font-size: 0.95rem; padding: 8px; }

  /* Advisor/header row: stack */
  #play-screen > div > div[style*="display:flex"] {
    flex-direction: column;
    gap: 10px;
  }

  /* Step panels + report cards: full width, no min-widths */
  .step-panel, .report {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Buttons: bigger touch targets, wrap */
  .sre-actions {
    flex-wrap: wrap;
    gap: 6px !important;
  }
  .dos-btn {
    padding: 10px 14px;
    font-size: 0.9rem;
    min-height: 44px;
  }

  /* Inputs: full width, 16px font (prevents iOS zoom) */
  .dos-screen input[type="number"],
  .dos-screen input[type="text"],
  .dos-screen input[type="password"],
  .dos-screen select,
  .dos-screen textarea {
    font-size: 16px !important;
    max-width: 100%;
    width: auto;
    min-height: 44px;
  }
  .dos-screen input[type="number"] { width: 110px; }

  /* Military/planet tags wrap instead of overflowing */
  .sre-mil-tag, .sre-planet-tag { display: inline-block; margin: 2px 0; }
  .planets-row .sre-val, .sre-line .sre-val { word-break: break-word; }

  /* Overlays: near-fullscreen on phones */
  .ops-overlay { padding: 8px; }
  .ops-overlay .dos-screen {
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
  }
  .ui-modal { max-width: calc(100vw - 16px); }
  .ops-menu-box { min-width: 0; max-width: calc(100vw - 16px); width: 100%; }

  /* Tables scroll horizontally instead of breaking layout */
  .help-table { display: block; overflow-x: auto; }
  .sre-spend-table { display: block; overflow-x: auto; }

  /* Auth screen fits */
  .auth-dos { min-width: 0; max-width: 100%; width: 100%; }

  /* Turn badges: allow wrap on tiny screens, smaller */
  .turn-step-badges { flex-wrap: wrap; font-size: 0.65rem; gap: 2px; }
}


/* --- iPad Pro & large tablets (1025-1366px) --- */
@media (min-width: 1025px) and (max-width: 1366px) {
  #app { max-width: 1200px; }
  .dos-screen { font-size: 1.1rem; }
}

/* --- iPad / Android tablets portrait (600-1024px) --- */
@media (max-width: 1024px) {
  /* Use dvh so Android Chrome's collapsing address bar doesn't crop overlays */
  .ops-overlay {
    min-height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .ops-overlay .dos-screen {
    max-height: none;
  }
}

/* --- Touch device tuning (tablets + phones) --- */
@media (hover: none) and (pointer: coarse) {
  .dos-btn { min-height: 44px; padding: 10px 14px; }
  .sre-actions { gap: 8px !important; }
  /* Kill hover-lift on touch (no hover); keep active press state */
  .dos-screen .sre-actions button:hover, .dos-btn:hover {
    transform: none;
    box-shadow: inset 0 1px 0 rgba(120,220,255,0.35), inset 0 -2px 4px rgba(0,0,20,0.6), 0 2px 4px rgba(0,0,0,0.6);
  }
  .dos-screen .sre-actions button:active, .dos-btn:active {
    transform: translateY(1px);
    background: linear-gradient(180deg, #026 0%, #013 100%);
  }
  /* Prevent double-tap zoom on game buttons */
  .dos-btn { touch-action: manipulation; }
  .sre-actions { touch-action: manipulation; }
}

/* Horizontal safety on every device */
html, body { overflow-x: hidden; max-width: 100vw; }
body {
  background: linear-gradient(180deg, #010208 0%, #020a1c 50%, #000005 100%);
  background-attachment: fixed;
}
@keyframes twinkle {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}
#app::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(1px 1px at 15% 25%, #9df 50%, transparent 51%),
    radial-gradient(1px 1px at 55% 85%, #bdf 50%, transparent 51%),
    radial-gradient(1px 1px at 85% 55%, #8cf 50%, transparent 51%);
  animation: twinkle 4s ease-in-out infinite;
  z-index: 0;
}


/* --- Smooth FX layer (P-batch) --- */
@keyframes modalPop {
  0%   { opacity: 0; transform: scale(0.92) translateY(10px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.ops-overlay .dos-screen,
.ui-modal {
  animation: modalPop 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Button feedback: smooth hover/press transitions */
.dos-btn {
  transition: transform 0.12s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.12s ease;
  position: relative;
  overflow: hidden;
}
.dos-btn:active { transition-duration: 0.05s; }

/* Click ripple */
@keyframes btnRipple {
  from { transform: scale(0); opacity: 0.45; }
  to   { transform: scale(2.6); opacity: 0; }
}
.btn-ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(120,220,255,0.55);
  width: 22px; height: 22px;
  pointer-events: none;
  animation: btnRipple 0.5s ease-out forwards;
}

/* News rows: staggered fade-in */
@keyframes newsRowIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}
#news-ticker > div { animation: newsRowIn 0.35s ease-out both; }
#news-ticker > div:nth-child(2) { animation-delay: 0.05s; }
#news-ticker > div:nth-child(3) { animation-delay: 0.1s; }
#news-ticker > div:nth-child(n+4) { animation-delay: 0.15s; }

/* Status rows no longer fade in — the chroma settle carries them. The rowIn
   keyframe stays for the help tables, which still use it. */
@keyframes rowIn {
  from { opacity: 0; transform: translateX(-8px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Notification toast: slide from top + settle */
@keyframes toastIn {
  0%   { opacity: 0; transform: translateY(-16px); }
  12%  { opacity: 1; transform: translateY(2px); }
  18%  { transform: translateY(0); }
  88%  { opacity: 1; }
  100% { opacity: 0; transform: translateY(-8px); }
}
#notification-bar {
  animation: toastIn 8s ease forwards;
}

/* Inputs: focus ring glow transition */
.dos-screen input, .dos-screen select, .dos-screen textarea {
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.dos-screen input:focus, .dos-screen select:focus, .dos-screen textarea:focus {
  border-color: #0ff !important;
  box-shadow: 0 0 10px rgba(0,255,255,0.35), inset 0 2px 5px rgba(0,0,0,0.9) !important;
  outline: none;
}

/* Smooth scrolling for help back-to-top */
.help-content, .ops-overlay .dos-screen {
  scroll-behavior: smooth;
}

/* Reduced motion: honor user preference */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}


/* Table readability: zebra + hover */
.help-table tbody tr:nth-child(odd) { background: rgba(10, 25, 60, 0.25); }
.help-table tbody tr { transition: background 0.15s ease; }
.help-table tbody tr:hover { background: rgba(0, 60, 160, 0.3); }
.help-table td, .help-table th { padding: 6px 10px; line-height: 1.45; }
.help-table strong { color: #fff; }

/* Help section headings: accent bar */
.help-content h3, .dos-screen h3 {
  border-left: 3px solid #0ff;
  padding-left: 10px;
  margin-left: -13px;
  text-shadow: 0 0 10px rgba(0,255,255,0.25);
}


/* --- POP: glowing hover on panels --- */
.report, .step-panel, .advisor-box {
  transition: box-shadow 0.25s ease, transform 0.2s ease;
}
.report:hover, .step-panel:hover {
  box-shadow: 0 8px 22px rgba(0,0,0,0.85), 0 3px 0 rgba(60,130,255,0.35), 0 0 34px rgba(0,120,255,0.28), inset 0 1px 0 rgba(120,200,255,0.2), inset 0 0 24px rgba(0,20,60,0.3);
}
.advisor-box:hover {
  box-shadow: inset 0 3px 8px rgba(0,0,0,0.95), inset 0 0 34px rgba(0,80,35,0.45), 0 0 18px rgba(0,220,120,0.2);
}

/* Scanline sweep on screens */
.dos-screen { position: relative; overflow: hidden; }
.ops-overlay .dos-screen::after { display: none; }

/* Title color-shift shimmer for the game title */
.game-header h1 {
  animation: titleShift 6s ease-in-out infinite;
  background: linear-gradient(90deg, #0ff 0%, #08f 25%, #0ff 50%, #08f 75%, #0ff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@keyframes titleShift {
  0%, 100% { background-position: 0% center; }
  50% { background-position: 100% center; }
}

/* Neon selection color */
::selection { background: rgba(0,180,255,0.5); color: #fff; }

/* Glowing scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #010414; }
::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #0069cc, #003a80);
  border: 1px solid #0af;
}
::-webkit-scrollbar-thumb:hover { background: linear-gradient(180deg, #0af, #0060c0); }


/* --- POP layer 2: corner brackets, animated accents --- */

/* Corner brackets on the Year card + status card (targeting reticle) */
.corner-frame { position: relative; }
.corner-frame::before,
.corner-frame::after {
  content: '';
  position: absolute;
  width: 18px; height: 18px;
  border: 2px solid #0ff;
  opacity: 0.75;
  pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(0,255,255,0.6));
}
.corner-frame::before { top: -2px; left: -2px; border-right: none; border-bottom: none; }
.corner-frame::after  { bottom: -2px; right: -2px; border-left: none; border-top: none; }

/* 2. Title underline sweep on section titles */
.dos-screen .sre-title { position: relative; padding-bottom: 3px; }
.dos-screen .sre-title::after {
  content: '';
  position: absolute;
  left: 0; bottom: 0;
  height: 2px; width: 100%;
  background: linear-gradient(90deg, #0ff, transparent 70%);
  transform-origin: left;
  animation: titleUnderline 0.7s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes titleUnderline {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}

/* 3. Planet tags: colored by type + hover glow */
.sre-planet-tag { transition: text-shadow 0.2s ease, color 0.2s ease; cursor: default; }
.sre-planet-tag:hover .p-name { color: #0ff; }
.sre-planet-tag:hover { text-shadow: 0 0 8px rgba(0,255,255,0.5); }
.planets-row { line-height: 1.9; }

/* 4. Year card: animated gradient border sweep */
#turn-phase-header .dos-screen, #turn-phase-header > div {
  position: relative;
  overflow: hidden;
}
#turn-phase-header > div::before {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(80,180,255,0.08), transparent);
  animation: cardSheen 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes cardSheen {
  0%, 60% { left: -100%; }
  85%, 100% { left: 160%; }
}

/* 5. Value pulse when number increases (paired with num-delta-up) */
@keyframes valuePop {
  0% { transform: scale(1); }
  40% { transform: scale(1.18); }
  100% { transform: scale(1); }
}
.num-delta-up { animation: num-flash-up 1.5s ease-out, valuePop 0.5s ease-out; }

/* 7. Advisor: breathing green glow */
@keyframes advisorBreath {
  0%, 100% { box-shadow: inset 0 3px 8px rgba(0,0,0,0.95), inset 0 0 30px rgba(0,60,25,0.35), inset 0 -1px 0 rgba(60,220,120,0.18); }
  50%      { box-shadow: inset 0 3px 8px rgba(0,0,0,0.95), inset 0 0 38px rgba(0,90,35,0.5), inset 0 -1px 0 rgba(60,220,120,0.28); }
}
.advisor-box { animation: advisorBreath 5s ease-in-out infinite; }

/* 8. Score/military tag pulse on the row hover */
.sre-line:hover .sre-mil-tag .m-val { text-shadow: 0 0 6px rgba(0,255,255,0.6); }
.sre-mil-tag { transition: text-shadow 0.2s ease; }


/* --- POP layer 3: clean fades, slides, glows (no gimmicks) --- */

/* Slide-in from left for panels */
@keyframes slideInLeft {
  from { opacity: 0; transform: translateX(-24px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Advisor slides from the right */

/* Year card: glow pulse on the border (subtle, 4s cycle) */
@keyframes borderGlow {
  0%, 100% { border-image: linear-gradient(180deg, #16337a 0%, #0a1f52 45%, #000814 100%) 1; }
  50%      { border-image: linear-gradient(180deg, #2a5cc0 0%, #14337a 45%, #001030 100%) 1; }
}
#turn-phase-header .report,
#turn-phase-header > div {
  animation: borderGlow 4s ease-in-out infinite;
}

/* Key values: breathing glow */
@keyframes neonBreath {
  0%, 100% { text-shadow: 0 0 8px rgba(255,255,0,0.45); }
  50%      { text-shadow: 0 0 14px rgba(255,255,0,0.75), 0 0 22px rgba(255,255,0,0.3); }
}
#header-credits { animation: neonBreath 3.2s ease-in-out infinite; }
@keyframes neonBreathCyan {
  0%, 100% { text-shadow: 0 0 8px rgba(0,255,255,0.45); }
  50%      { text-shadow: 0 0 14px rgba(0,255,255,0.75), 0 0 22px rgba(0,255,255,0.3); }
}
#header-networth { animation: neonBreathCyan 3.2s ease-in-out 0.4s infinite; }
@keyframes neonBreathGreen {
  0%, 100% { text-shadow: 0 0 8px rgba(0,255,120,0.45); }
  50%      { text-shadow: 0 0 14px rgba(0,255,120,0.75), 0 0 22px rgba(0,255,120,0.3); }
}
#header-pop { animation: neonBreathGreen 3.2s ease-in-out 0.8s infinite; }

/* Planets row tags: staggered pop-in on render */
@keyframes tagPop {
  0% { opacity: 0; transform: scale(0.7); }
  70% { transform: scale(1.08); }
  100% { opacity: 1; transform: scale(1); }
}
.planets-row .sre-planet-tag {
  animation: tagPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.planets-row .sre-planet-tag:nth-child(1) { animation-delay: 0.05s; }
.planets-row .sre-planet-tag:nth-child(2) { animation-delay: 0.1s; }
.planets-row .sre-planet-tag:nth-child(3) { animation-delay: 0.15s; }
.planets-row .sre-planet-tag:nth-child(4) { animation-delay: 0.2s; }
.planets-row .sre-planet-tag:nth-child(5) { animation-delay: 0.25s; }
.planets-row .sre-planet-tag:nth-child(6) { animation-delay: 0.3s; }
.planets-row .sre-planet-tag:nth-child(7) { animation-delay: 0.35s; }
.planets-row .sre-planet-tag:nth-child(8) { animation-delay: 0.4s; }
.planets-row .sre-planet-tag:nth-child(9) { animation-delay: 0.45s; }
.planets-row .sre-planet-tag:nth-child(10) { animation-delay: 0.5s; }
.planets-row .sre-planet-tag:nth-child(11) { animation-delay: 0.55s; }

/* Military tags: same pop */
.sre-line .sre-mil-tag {
  animation: tagPop 0.35s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* Buttons: shimmer sweep on the default-action */
@keyframes btnShimmer {
  0% { left: -80%; }
  55%, 100% { left: 130%; }
}
.dos-btn.default-action::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -80%;
  width: 55%;
  background: linear-gradient(105deg, transparent, rgba(140,220,255,0.25), transparent);
  animation: btnShimmer 3.2s ease-in-out infinite;
  pointer-events: none;
}

/* Help table rows: slide-fade in */
.help-table tbody tr { animation: rowIn 0.3s ease-out both; }


/* --- TextFX layer (P4): text-specific animations --- */

/* Typewriter effect for narrative lines (applied via .typewriter) */
@keyframes typewriter {
  from { width: 0; }
  to   { width: 100%; }
}
@keyframes caretBlink {
  0%, 45%  { opacity: 1; }
  50%, 95% { opacity: 0; }
}
.typewriter {
  display: inline-block;
  overflow: hidden;
  white-space: nowrap;
  animation: typewriter 1.1s steps(28, end) both, caretBlink 0.8s step-end 3;
  vertical-align: bottom;
}
.typewriter.done { animation: none; width: auto; }

/* Letter-by-letter title reveal (used for sre-title via JS split) */
.title-letter {
  display: inline-block;
  opacity: 0;
  animation: letterIn 0.3s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  text-shadow: 0 0 8px rgba(255,255,0,0.3);
}
@keyframes letterIn {
  0%   { opacity: 0; transform: translateY(6px) scale(0.8); filter: brightness(2); }
  100% { opacity: 1; transform: translateY(0) scale(1); filter: brightness(1); }
}

/* Value count-up flash: brief bright flash as numbers land */
@keyframes valueFlash {
  0%   { color: #fff; text-shadow: 0 0 16px rgba(120,220,255,0.9); }
  100% { color: inherit; text-shadow: none; }
}
.value-landed { animation: valueFlash 0.7s ease-out; }

/* Alert-style text: urgent pulsing red glow */
@keyframes urgentPulse {
  0%, 100% { color: #f55; text-shadow: 0 0 6px rgba(255,60,60,0.4); }
  50%      { color: #f88; text-shadow: 0 0 16px rgba(255,60,60,0.85); }
}
.text-urgent { animation: urgentPulse 1.4s ease-in-out infinite; }

/* Success text: one-time green flash + settle */
@keyframes successFlash {
  0%   { color: #fff; text-shadow: 0 0 18px rgba(0,255,120,0.95); }
  100% { color: #0f0; text-shadow: 0 0 6px rgba(0,255,120,0.3); }
}
.text-success-flash { animation: successFlash 1.2s ease-out both; }

/* Notification bar: glowing gradient text sweep */
#notification-bar {
  text-shadow: 0 0 10px rgba(255,255,255,0.4);
  letter-spacing: 0.03em;
}

/* SRE name decoration shimmer (empire name on status) */
.sre-name .name-text {
  background: linear-gradient(90deg, #0ff 0%, #fff 25%, #0ff 50%, #fff 75%, #0ff 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: nameShift 5s linear infinite;
}
@keyframes nameShift {
  0%, 100% { background-position: 0% center; }
  50%      { background-position: 100% center; }
}

/* Help table: key terms get terminal-green */
.help-table td:first-child strong { text-shadow: 0 0 6px rgba(0,255,120,0.35); }

/* Narrative paragraphs: justified-ish flow with hanging indent feel */
.dos-screen .narrative { text-indent: 0; }
.dos-screen .narrative .sre-val { color: #0ff; }

/* Step badge transition when active changes */
.step-badge {
  transition: color 0.25s ease, background 0.25s ease, border-color 0.25s ease, text-shadow 0.25s ease;
}
.step-badge.active {
  text-shadow: 0 0 8px rgba(255,255,0,0.55);
}


/* Advisor messages: staggered slide-in */
@keyframes advMsgIn {
  from { opacity: 0; transform: translateX(14px); }
  to   { opacity: 1; transform: translateX(0); }
}
.textfx-slidein {
  animation: advMsgIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.advisor-msg.danger-msg {
  animation: advMsgIn 0.4s cubic-bezier(0.22, 1, 0.36, 1) both, urgentPulse 1.4s ease-in-out 0.5s infinite;
}


/* --- TextFX + POP layer 5 (P5) --- */

/* Step panels slide from travel direction (app.js adds .slide-fwd / .slide-back) */
/* Cards peel in on a hinge at the edge they arrive from — a real rotateY
   under perspective, not a skew faking depth. */
@keyframes slideFwd {
  from { opacity: 0; transform: perspective(1100px) translateX(120px) rotateY(-22deg) scale(0.96); }
  55%  { opacity: 1; transform: perspective(1100px) translateX(-8px) rotateY(5deg)  scale(1.005); }
  80%  { opacity: 1; transform: perspective(1100px) translateX(2px)  rotateY(-1.5deg) scale(1); }
  to   { opacity: 1; transform: perspective(1100px) translateX(0)    rotateY(0)     scale(1); }
}
@keyframes slideBack {
  from { opacity: 0; transform: perspective(1100px) translateX(-120px) rotateY(22deg)  scale(0.96); }
  55%  { opacity: 1; transform: perspective(1100px) translateX(8px)   rotateY(-5deg)  scale(1.005); }
  80%  { opacity: 1; transform: perspective(1100px) translateX(-2px)  rotateY(1.5deg) scale(1); }
  to   { opacity: 1; transform: perspective(1100px) translateX(0)     rotateY(0)      scale(1); }
}
.step-panel.slide-fwd {
  transform-origin: right center;
  animation: slideFwd 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.step-panel.slide-back {
  transform-origin: left center;
  animation: slideBack 0.5s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* Keep text crisp through the rotation */
.step-panel.slide-fwd, .step-panel.slide-back { backface-visibility: hidden; }

/* ── Step entry: CRT retune ──────────────────────────────────────────────
   The colour guns misalign for an instant and then converge. Driven with
   text-shadow rather than a filter so it stays cheap on a long card. */
@keyframes chromaSettle {
  0%   { text-shadow: -6px 0 rgba(255,0,72,1),     6px 0 rgba(0,232,255,1); }
  20%  { text-shadow:  4px 0 rgba(255,0,72,0.85), -4px 0 rgba(0,232,255,0.85); }
  42%  { text-shadow: -3px 0 rgba(255,0,72,0.7),   3px 0 rgba(0,232,255,0.7); }
  64%  { text-shadow:  1.5px 0 rgba(255,0,72,0.5), -1.5px 0 rgba(0,232,255,0.5); }
  84%  { text-shadow: -0.8px 0 rgba(255,0,72,0.45), 0.8px 0 rgba(0,232,255,0.45); }
  100% { text-shadow: -0.6px 0 rgba(255,0,72,0.42), 0.6px 0 rgba(0,232,255,0.42); }
}
.step-panel.fx-enter .dos-screen .sre-line,
.step-panel.fx-enter .dos-screen .sre-title,
.fx-enter .sre-line, .fx-enter .sre-title,
.fx-enter .sre-val, .fx-enter .sre-extra, .fx-enter .sre-name,
.fx-enter .sre-lab, .fx-enter .sre-title-inline, .fx-enter .sre-footer,
.fx-enter .sre-prompt {
  animation: chromaSettleHard 0.55s ease-out both;
}
/* Static screens get the same wide split the peeling cards do */
@keyframes chromaSettleHard {
  0%   { text-shadow: -11px 0 rgba(255,0,72,1),     9px 0 rgba(0,232,255,1); }
  14%  { text-shadow:  8px 0 rgba(255,0,72,0.9),   -6px 0 rgba(0,232,255,0.9); }
  30%  { text-shadow: -7px 0 rgba(255,0,72,0.85),   5px 0 rgba(0,232,255,0.8); }
  46%  { text-shadow:  5px 0 rgba(255,0,72,0.7),   -4px 0 rgba(0,232,255,0.65); }
  62%  { text-shadow: -3px 0 rgba(255,0,72,0.6),    2px 0 rgba(0,232,255,0.55); }
  78%  { text-shadow:  1.5px 0 rgba(255,0,72,0.5), -1.2px 0 rgba(0,232,255,0.45); }
  100% { text-shadow: -0.6px 0 rgba(255,0,72,0.42), 0.6px 0 rgba(0,232,255,0.42); }
}
/* Whole card tunes in on any screen, not just the step cards */
.dos-screen.fx-enter { animation: crtTuneIn 0.55s ease-out both; }

/* Values carry a permanent hair of misconvergence, the way a real CRT never
   quite lands red and blue on the same phosphor. Sub-pixel on purpose. */
.dos-screen .sre-val,
.dos-screen .sre-name .name-text {
  text-shadow: -0.6px 0 rgba(255,0,72,0.42), 0.6px 0 rgba(0,232,255,0.42);
}
.dos-screen .sre-extra {
  text-shadow: -0.4px 0 rgba(255,0,72,0.3), 0.4px 0 rgba(0,232,255,0.3);
}
/* Numerals drift a touch further out of convergence as they update */
.dos-screen .sre-val.num-flash-up,
.dos-screen .sre-val.num-flash-down {
  text-shadow: -1.4px 0 rgba(255,0,72,0.7), 1.4px 0 rgba(0,232,255,0.7);
}

/* Travelling right-to-left: red lags behind on the right, cyan leads left.
   Mirrored going the other way, so the two directions are distinguishable. */
/* Guns thrown wide, jittering as the card swings through the peel, then
   converging onto the residual fringe — never to `none`, or the card would
   end up flatter than everything around it. */
@keyframes chromaSettleFwd {
  0%   { text-shadow: 11px 0 rgba(255,0,72,1),    -8px 0 rgba(0,232,255,1); }
  14%  { text-shadow: -7px 0 rgba(255,0,72,0.9),   5px 0 rgba(0,232,255,0.9); }
  30%  { text-shadow:  8px 0 rgba(255,0,72,0.85), -6px 0 rgba(0,232,255,0.8); }
  46%  { text-shadow: -4px 0 rgba(255,0,72,0.7),   3px 0 rgba(0,232,255,0.65); }
  62%  { text-shadow:  5px 0 rgba(255,0,72,0.6),  -3px 0 rgba(0,232,255,0.55); }
  78%  { text-shadow:  2.5px 0 rgba(255,0,72,0.5), -1.5px 0 rgba(0,232,255,0.45); }
  90%  { text-shadow:  1.2px 0 rgba(255,0,72,0.45), -0.8px 0 rgba(0,232,255,0.42); }
  100% { text-shadow: -0.6px 0 rgba(255,0,72,0.42), 0.6px 0 rgba(0,232,255,0.42); }
}
@keyframes chromaSettleBack {
  0%   { text-shadow: -11px 0 rgba(255,0,72,1),     8px 0 rgba(0,232,255,1); }
  14%  { text-shadow:  7px 0 rgba(255,0,72,0.9),   -5px 0 rgba(0,232,255,0.9); }
  30%  { text-shadow: -8px 0 rgba(255,0,72,0.85),   6px 0 rgba(0,232,255,0.8); }
  46%  { text-shadow:  4px 0 rgba(255,0,72,0.7),   -3px 0 rgba(0,232,255,0.65); }
  62%  { text-shadow: -5px 0 rgba(255,0,72,0.6),    3px 0 rgba(0,232,255,0.55); }
  78%  { text-shadow: -2.5px 0 rgba(255,0,72,0.5),  1.5px 0 rgba(0,232,255,0.45); }
  90%  { text-shadow: -1.2px 0 rgba(255,0,72,0.45), 0.8px 0 rgba(0,232,255,0.42); }
  100% { text-shadow: -0.6px 0 rgba(255,0,72,0.42), 0.6px 0 rgba(0,232,255,0.42); }
}
/* Runs the full length of the peel, and reaches values and extras too —
   previously only lines and titles leaned, so the numbers stayed flat. */
.step-panel.slide-fwd.fx-enter .dos-screen .sre-line,
.step-panel.slide-fwd.fx-enter .dos-screen .sre-title,
.step-panel.slide-fwd.fx-enter .dos-screen .sre-val,
.step-panel.slide-fwd.fx-enter .dos-screen .sre-extra,
.step-panel.slide-fwd.fx-enter .dos-screen .sre-name {
  animation: chromaSettleFwd 0.5s ease-out both;
}
.step-panel.slide-back.fx-enter .dos-screen .sre-line,
.step-panel.slide-back.fx-enter .dos-screen .sre-title,
.step-panel.slide-back.fx-enter .dos-screen .sre-val,
.step-panel.slide-back.fx-enter .dos-screen .sre-extra,
.step-panel.slide-back.fx-enter .dos-screen .sre-name {
  animation: chromaSettleBack 0.5s ease-out both;
}

/* The whole card arrives out of tune and resolves — this rode along with the
   strong aberration you liked. Delete this block alone to drop just it. */
@keyframes crtTuneIn {
  0%   { filter: blur(2.2px) saturate(2.1) contrast(1.3) brightness(1.2); }
  25%  { filter: blur(1px)   saturate(1.6) contrast(1.15) brightness(1.08); }
  60%  { filter: blur(0.3px) saturate(1.2) contrast(1.04) brightness(1.02); }
  100% { filter: none; }
}
.step-panel.fx-enter .dos-screen { animation: crtTuneIn 0.5s ease-out both; }

/* ── Turn card: vertical tune-in ─────────────────────────────────────────
   The step cards swing left and right, so this one drops in on a hinge at
   its top edge and splits its guns vertically instead. */
@keyframes vertPeelIn {
  from { opacity: 0; transform: perspective(1200px) translateY(-46px) rotateX(26deg) scale(0.97); }
  55%  { opacity: 1; transform: perspective(1200px) translateY(5px)  rotateX(-5deg) scale(1.004); }
  80%  { opacity: 1; transform: perspective(1200px) translateY(-2px) rotateX(1.5deg) scale(1); }
  to   { opacity: 1; transform: perspective(1200px) translateY(0)    rotateX(0)     scale(1); }
}
@keyframes chromaSettleVert {
  0%   { text-shadow: 0 -9px rgba(255,0,72,1),     0 8px rgba(0,232,255,1); }
  14%  { text-shadow: 0  6px rgba(255,0,72,0.9),   0 -5px rgba(0,232,255,0.9); }
  30%  { text-shadow: 0 -6px rgba(255,0,72,0.85),  0 5px rgba(0,232,255,0.8); }
  46%  { text-shadow: 0  4px rgba(255,0,72,0.7),   0 -3px rgba(0,232,255,0.65); }
  62%  { text-shadow: 0 -3px rgba(255,0,72,0.6),   0 2px rgba(0,232,255,0.55); }
  78%  { text-shadow: 0  1.5px rgba(255,0,72,0.5), 0 -1.2px rgba(0,232,255,0.45); }
  100% { text-shadow: -0.6px 0 rgba(255,0,72,0.42), 0.6px 0 rgba(0,232,255,0.42); }
}
/* Horizontal tear bands raking down the card as it locks on */
@keyframes vertTear {
  0%   { opacity: 0; transform: translateY(-10%) scaleY(1); }
  10%  { opacity: 0.85; }
  45%  { opacity: 0.5; transform: translateY(45%) scaleY(1.6); }
  100% { opacity: 0; transform: translateY(110%) scaleY(0.8); }
}
/* The turn card brings its own entrance below, so suppress the generic cardIn
   fade it would otherwise inherit — running both read as a double fade-in.
   Needs a class to outrank `#turn-phase-header > div`. */
#turn-phase-header > .turn-header { animation: none; }

/* Must outrank `#turn-phase-header > div`, which sets cardIn from an ID
   selector and otherwise wins on specificity. */
#turn-phase-header > .turn-header.fx-enter-vert,
.turn-header.fx-enter-vert {
  transform-origin: center top;
  backface-visibility: hidden;
  animation: vertPeelIn 0.55s cubic-bezier(0.22, 1, 0.36, 1) both,
             crtTuneIn 0.55s ease-out both;
  position: relative;
  overflow: hidden;
}
.turn-header.fx-enter-vert .sre-line,
.turn-header.fx-enter-vert .sre-val,
.turn-header.fx-enter-vert .year-title,
.turn-header.fx-enter-vert .step-badge,
.turn-header.fx-enter-vert .v-dim,
.turn-header.fx-enter-vert .v-cyan,
.turn-header.fx-enter-vert .v-gold,
.turn-header.fx-enter-vert .v-green {
  animation: chromaSettleVert 0.55s ease-out both;
}
.turn-header.fx-enter-vert::after {
  content: '';
  position: absolute; left: -5%; right: -5%; top: 0; height: 18%;
  pointer-events: none;
  background: linear-gradient(180deg,
    rgba(0,255,255,0) 0%, rgba(255,0,72,0.10) 35%,
    rgba(140,235,255,0.22) 55%, rgba(0,255,255,0) 100%);
  animation: vertTear 0.6s ease-out both;
}

@media (prefers-reduced-motion: reduce) {
  .turn-header.fx-enter-vert,
  .turn-header.fx-enter-vert .sre-line,
  .turn-header.fx-enter-vert .sre-val,
  .turn-header.fx-enter-vert .year-title,
  .turn-header.fx-enter-vert .step-badge { animation: none; }
  .turn-header.fx-enter-vert::after { display: none; }
}

/* A single scanline sweeping down the card as it tunes in */
@keyframes crtSweep {
  0%   { transform: translateY(-8%); opacity: 0; }
  12%  { opacity: 0.55; }
  100% { transform: translateY(108%); opacity: 0; }
}
.step-panel.fx-enter .dos-screen { position: relative; overflow: hidden; }
.step-panel.fx-enter .dos-screen::after {
  content: '';
  position: absolute; left: 0; right: 0; top: 0; height: 14%;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,255,255,0) 0%, rgba(120,230,255,0.16) 50%, rgba(0,255,255,0) 100%);
  animation: crtSweep 0.55s ease-out both;
}

/* Gradient-clipped brackets: the glyphs are transparent with the colour coming
   from a background, so any text-shadow renders straight through them as solid
   fill. That made them blaze bright for the whole animation and then snap back
   to the gradient at the end. They opt out of chroma entirely. */
.bracket-deco { text-shadow: none !important; }
/* Mid-scramble the unresolved glyphs read as noise rather than as chrome */
.bracket-deco.glitching { opacity: 0.75; }

/* Title mid-decode: unresolved glyphs read as noise, not as content */
.dos-screen .sre-title.glitching {
  color: #7ef7ff;
  text-shadow: 0 0 10px rgba(0,220,255,0.55), -1px 0 rgba(255,0,72,0.5), 1px 0 rgba(0,232,255,0.5);
}

@media (prefers-reduced-motion: reduce) {
  .step-panel.fx-enter .dos-screen .sre-line,
  .step-panel.fx-enter .dos-screen .sre-title,
  .fx-enter .sre-line, .fx-enter .sre-title,
  .fx-enter .sre-val, .fx-enter .sre-extra, .fx-enter .sre-name,
  .step-panel.fx-enter .dos-screen,
  .step-panel.slide-fwd.fx-enter .dos-screen .sre-val,
  .step-panel.slide-fwd.fx-enter .dos-screen .sre-extra,
  .step-panel.slide-back.fx-enter .dos-screen .sre-val,
  .step-panel.slide-back.fx-enter .dos-screen .sre-extra,
  .step-panel.slide-fwd.fx-enter .dos-screen .sre-line,
  .step-panel.slide-fwd.fx-enter .dos-screen .sre-title,
  .step-panel.slide-back.fx-enter .dos-screen .sre-line,
  .step-panel.slide-back.fx-enter .dos-screen .sre-title,
  .step-panel.slide-fwd, .step-panel.slide-back,
  .step-panel.fx-enter .dos-screen::after { animation: none; }
  .step-panel.fx-enter .dos-screen::after { display: none; }
}

/* Wizard buttons: staggered pop */
@keyframes btnPop {
  0% { opacity: 0; transform: scale(0.8) translateY(8px); }
  70% { transform: scale(1.04); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}
.sre-actions .dos-btn {
  animation: btnPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.sre-actions .dos-btn:nth-child(1) { animation-delay: 0.15s; }
.sre-actions .dos-btn:nth-child(2) { animation-delay: 0.22s; }
.sre-actions .dos-btn:nth-child(3) { animation-delay: 0.29s; }
.sre-actions .dos-btn:nth-child(4) { animation-delay: 0.36s; }
.sre-actions .dos-btn:nth-child(n+5) { animation-delay: 0.43s; }

/* Section title shimmer: moving highlight */
@keyframes shimmerSweep {
  0% { background-position: -200% center; }
  100% { background-position: 200% center; }
}
.dos-screen .sre-title:not(.static) {
  background: linear-gradient(90deg, #ffd54a 0%, #ffd54a 40%, #fff3c0 50%, #ffd54a 60%, #ffd54a 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: shimmerSweep 5s linear infinite;
}
@keyframes shimmerSweep {
  0% { background-position: 200% center; }
  100% { background-position: -200% center; }
}

/* Odometer-style rolling numbers (value spans with .odo get digit roll) */
.odo-digit {
  display: inline-block;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease;
}

/* Panel header chips (Empire Status etc.): gradient sweep */
.dos-screen .sre-title {
  overflow: hidden;
}

/* Card hover: corner brackets brighten */
.report::before, .report::after,
.corner-frame::before, .corner-frame::after {
  transition: opacity 0.25s ease, filter 0.25s ease;
}
.report:hover::before, .report:hover::after {
  opacity: 1;
  filter: drop-shadow(0 0 6px rgba(0,255,255,0.8));
}

/* Messages/news items: hover slide + glow */
#news-ticker > div:hover, .advisor-msg:hover {
  transform: translateX(4px);
  transition: transform 0.15s ease;
}

/* Toast (notification-bar) restyle: glowing border + gradient */
#notification-bar {
  border: 1px solid rgba(0,255,200,0.4);
  box-shadow: 0 4px 18px rgba(0,255,200,0.15), inset 0 0 20px rgba(0,255,200,0.06);
  background: linear-gradient(90deg, rgba(0,60,45,0.9), rgba(0,35,30,0.92), rgba(0,60,45,0.9)) !important;
}


/* --- Unified text glow utilities (uniformity pass) --- */
.glow-gold  { color: #ffd54a; text-shadow: 0 0 6px rgba(255,200,60,0.4); }
.glow-cyan  { color: #0ff;   text-shadow: 0 0 8px rgba(0,255,255,0.45); }
.glow-green { color: #0f0;   text-shadow: 0 0 8px rgba(0,255,120,0.45); }
.glow-red   { color: #f55;   text-shadow: 0 0 8px rgba(255,80,80,0.45); }
.glow-white { color: #fff;   text-shadow: 0 0 6px rgba(255,255,255,0.35); }

/* Uniform section title treatment inside cards */
.dos-screen .sre-title,
.dos-screen .section-title {
  font-weight: bold;
  letter-spacing: 0.05em;
}

/* Standardize the year-title (uses letterize — no static text-shadow needed) */
.year-title { text-shadow: none; }


/* Year card live values: unified glow treatment */
#header-credits, #header-networth, #header-pop {
  font-weight: 500;
}
#header-credits { text-shadow: 0 0 8px rgba(255,215,80,0.5); }
#header-networth { text-shadow: 0 0 8px rgba(0,255,255,0.45); }
#header-pop { text-shadow: 0 0 8px rgba(0,255,120,0.45); }

/* News event tags: unified glow */
#news-ticker strong { font-weight: bold; }


/* --- Unified value/text color system (uniformity pass 2) --- */
/* Semantic: cyan = neutral value, green = food/positive, gold = highlight/currency,
   magenta/orange = planet-specific, red = negative, dim gray = meta */
.v-cyan  { color: #0ff; text-shadow: 0 0 4px rgba(0,255,255,0.25); }
.v-green { color: #0f0; text-shadow: 0 0 4px rgba(0,255,120,0.35); }
.v-gold  { color: #ffd54a; text-shadow: 0 0 4px rgba(255,200,60,0.35); }
.v-magenta { color: #f0f; text-shadow: 0 0 4px rgba(255,0,255,0.3); }
.v-orange { color: #fa0; text-shadow: 0 0 4px rgba(255,160,0,0.3); }
.v-red   { color: #f55; }
.v-dim   { color: #888; }
.v-meta  { color: #789; }

/* Uniform card row treatment everywhere */
.dos-screen .sre-lab { color: #aaa; }
.dos-screen .sre-lab .sre-unit { color: #678; }

/* Market info chips (menu right side): match planet chips */
#menu-market-info .sre-val { color: #0ff; }


/* Uniform compact buttons (inline-table Buy/Sell) */
.dos-btn.compact {
  padding: 3px 8px;
  font-size: 0.85em;
}


/* Uniform input sizing across all cards */
.dos-screen input[type="number"].sre-bank-input,
.dos-screen input[type="number"].maint-line-input {
  width: 120px;
  text-align: right;
  font-size: 1rem;
}


/* Uniform input sizes */
.input-sm {
  width: 90px;
  text-align: right;
}


/* --- POP layer 6: micro-interactions + text FX everywhere --- */

/* 1. Value text: subtle glow on hover for scannability */
.dos-screen .sre-line:hover .sre-val {
  text-shadow: 0 0 6px rgba(0,255,255,0.35);
}

/* 2. Labels brighten on row hover */
.dos-screen .sre-line:hover .sre-lab {
  color: #ccd;
}

/* 3. Titles: letter-spaced gradient with animated sheen (already) + drop shadow depth */
.dos-screen .sre-title {
  text-shadow:
    0 0 14px rgba(255,200,60,0.55),
    0 2px 4px rgba(0,0,0,0.9),
    0 0 2px rgba(255,230,120,0.8);
}

/* 4. Badges (step tracker): animated glow when active */
/* 5. Done badges: checkmark green sheen */
.step-badge.done { color: #0a8; }

/* 6. Advisor messages: left accent border per severity */
.advisor-msg {
  border-left: 2px solid transparent;
  padding-left: 8px;
  margin: 5px 0;
}
.advisor-msg.danger-msg  { border-left-color: #f55; }
.advisor-msg.warning-msg { border-left-color: #fa0; }
.advisor-msg.happy-msg   { border-left-color: #0f0; }

/* 7. Buttons in cards: gradient sheen moves on hover (not just default) */
.dos-btn { position: relative; overflow: hidden; }
.dos-btn::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: -80%;
  width: 50%;
  background: linear-gradient(105deg, transparent, rgba(140,220,255,0.18), transparent);
  transition: left 0.35s ease;
  pointer-events: none;
}
.dos-btn:hover::before { left: 130%; }

/* 8. Scoreboard: rank rows slide-glow on hover */
.scoreboard .sre-line { transition: background 0.15s ease, padding-left 0.15s ease; }
.scoreboard .sre-line:hover { background: rgba(0,60,160,0.25); padding-left: 6px; }

/* 9. Section headers (h3/h4 in help + cards): colored keylines */
.help-content h3 {
  border-left: 3px solid #0af;
  padding-left: 10px;
}
.help-content h4 {
  border-left: 2px solid #06a;
  padding-left: 8px;
  color: #9df;
}

/* 10. Panel entrance: subtle scale-settle for ALL cards (uniform) */
@keyframes cardIn {
  from { opacity: 0; transform: translateY(10px) scale(0.985); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.report, .step-panel, #turn-phase-header > div {
  animation: cardIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}
/* advisor: entrance then infinite breathing (comma-chained) */
.advisor-box {
  animation: cardIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both, advisorBreath 5s ease-in-out 0.4s infinite;
}


/* --- POP layer 7: final polish --- */

/* Panel titles: glow intensifies on card hover */
.report:hover .sre-title,
.step-panel:hover .sre-title {
  text-shadow: 0 0 18px rgba(255,210,80,0.8), 0 2px 4px rgba(0,0,0,0.9), 0 0 3px rgba(255,235,150,0.9);
  transition: text-shadow 0.2s ease;
}

/* Step badge: shine sweep when it becomes active */

/* News ticker items: glow on hover */
#news-ticker > div { transition: background 0.15s ease, transform 0.15s ease; border-radius: 2px; }
#news-ticker > div:hover {
  background: rgba(0, 80, 180, 0.18);
  transform: translateX(4px);
}

/* Year card values: hover bloom */
#header-credits:hover, #header-networth:hover, #header-pop:hover {
  transform: scale(1.06);
  transition: transform 0.15s ease;
}
#header-credits, #header-networth, #header-pop {
  display: inline-block;
  transition: transform 0.15s ease;
}

/* Panels: glow on hover, no motion */
.dos-screen:hover {
  transition: transform 0.2s ease, box-shadow 0.25s ease;
}
.dos-screen:hover {
  box-shadow: 0 8px 22px rgba(0,0,0,0.85), 0 3px 0 rgba(60,130,255,0.35), 0 0 34px rgba(0,120,255,0.28), inset 0 0 40px rgba(0,20,60,0.45), inset 0 2px 10px rgba(0,0,0,0.9), inset 0 1px 0 rgba(120,200,255,0.2);
}


/* Scoreboard upgrade: wider, aligned columns, zebra */
.dos-screen.scoreboard .sre-line {
  padding: 4px 0;
  font-size: 1.02rem;
}
.dos-screen.scoreboard .sre-line .sre-extra {
  display: inline-flex;
  gap: 0;
  min-width: 340px;
  justify-content: flex-end;
}
.dos-screen.scoreboard .sre-line .sre-extra > span {
  display: inline-block;
  width: 110px;
  text-align: right;
}
.dos-screen.scoreboard .sre-line:nth-child(odd) { background: rgba(10, 25, 60, 0.22); }
.dos-screen.scoreboard { min-width: 0 !important; }

/* Bracket-style titles (---[ Galactic Command ]---): 75% larger */
.bracket-title {
  font-size: 1.75em;
  letter-spacing: 0.04em;
}
/* The ---[ ]--- titles are sized for a desktop terminal; at phone widths they
   dominate the card and the brackets wrap. Scale them back on mobile only. */
@media (max-width: 640px) {
  .bracket-title { font-size: 1.15em; letter-spacing: 0.02em; }
  /* The Imperial Year title carries more characters than the other bracketed
     headings, so it needs a touch less again on a phone. */
  #turn-phase-header .bracket-title {
    font-size: 0.9775em;
    /* Keep ---[ … ]--- on one line; the closing bracket was wrapping alone */
    white-space: nowrap;
  }
  .auth-chrome-header .auth-chrome-bracket,
  .auth-chrome-bracket { font-size: 1.15rem; }
  .auth-chrome-header .auth-chrome-title,
  .auth-chrome-title { font-size: 1.05rem; letter-spacing: 0.5px; }
  .adm-login-chrome .b { font-size: 1.05rem; }
  .adm-login-chrome .t { font-size: 0.95rem; }
  /* Gold card titles ("Empire Status", "Government Spending"…) scale back too */
  .dos-screen .sre-title { font-size: 1.02em; letter-spacing: 0.03em; }
  .dos-screen .sre-name { font-size: 1em; }
  .sre-subhead { font-size: 1em; }
}

/* Step 10 subtopic headings: cyan colorway (gold = main title only) */
.sre-subhead {
  color: #00c8ff;
  font-weight: bold;
  font-size: 1.1em;
  letter-spacing: 0.06em;
  text-shadow: 0 0 10px rgba(0, 200, 255, 0.45);
  margin: 6px 0 4px;
  border-left: 3px solid #0088cc;
  padding-left: 8px;
}

/* Step 10 (End of Year Summary): fit 1080p, optimized for 1440p desktop */
#turn-report .dos-screen {
  max-width: 980px;
  margin: 0 auto;
}
#turn-report .sre-line { padding: 1px 0; }
#turn-report hr.sre-hr { margin: 6px 0; }
@media (min-width: 1400px) {
  #turn-report .dos-screen { max-width: 1100px; }
}