:root {
  color-scheme: light;
  --navy-950: #102b3d;
  --navy-900: #17384f;
  --navy-800: #244b64;
  --navy-700: #35647c;
  --cream-50: #fffdf5;
  --cream-100: #fff8e7;
  --cream-200: #f4e8cd;
  --green-300: #8ed9aa;
  --green-500: #4fbd83;
  --green-600: #319768;
  --blue-300: #8ed2ef;
  --blue-500: #52add9;
  --gold-300: #ffe08a;
  --gold-500: #f1be47;
  --coral-400: #f18c7e;
  --coral-600: #c95f59;
  --ink: #17384f;
  --muted: #516b77;
  --line: #244b64;
  --panel: #fffdf8;
  --shadow: 0 3px 0 #102b3d, 0 12px 32px #061d2b26;
  --shadow-soft: 0 4px 0 rgba(16, 43, 61, 0.18);
  --radius: 12px;
  --font-thai: "Leelawadee UI", "Noto Sans Thai", Tahoma, system-ui, sans-serif;
  --font-pixel: "Cascadia Mono", "SFMono-Regular", Consolas, monospace;
}

* {
  box-sizing: border-box;
}

html {
  min-width: 320px;
  min-height: 100%;
  background: var(--navy-950);
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  min-height: 100vh;
  min-height: 100svh;
  margin: 0;
  overflow-x: hidden;
  color: var(--ink);
  font-family: var(--font-thai);
  font-size: 16px;
  line-height: 1.45;
  font-variant-numeric: tabular-nums;
  text-rendering: optimizeLegibility;
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 24px 24px,
    linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px) 0 0 / 24px 24px,
    radial-gradient(circle at 15% 5%, #2b6981 0, transparent 34%),
    var(--navy-950);
}

button,
dialog {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible {
  outline: 4px solid #ffe176;
  outline-offset: 3px;
}

[hidden] {
  display: none !important;
}

.skip-link {
  position: fixed;
  z-index: 100;
  top: 8px;
  left: 8px;
  padding: 10px 14px;
  color: var(--navy-950);
  background: #fff;
  border: 3px solid var(--navy-950);
  transform: translateY(-160%);
}

.skip-link:focus {
  transform: translateY(0);
}

.game-shell {
  width: min(1180px, calc(100% - 24px));
  margin: 0 auto;
  padding: max(14px, env(safe-area-inset-top)) 0 max(24px, env(safe-area-inset-bottom));
}

.game-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 58px;
  margin-bottom: 10px;
  color: white;
}

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

.brand-lockup p,
.brand-lockup h1 {
  margin: 0;
  font-family: var(--font-pixel);
  letter-spacing: 0.08em;
  line-height: 1;
}

.brand-lockup p {
  margin-bottom: 4px;
  color: var(--green-300);
  font-size: 11px;
  font-weight: 700;
}

.brand-lockup h1 {
  font-size: clamp(22px, 5vw, 30px);
}

.brand-mark {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, 13px);
  grid-template-rows: repeat(2, 13px);
  gap: 3px;
  width: 34px;
  height: 34px;
  padding: 2px;
  transform: rotate(45deg);
}

.brand-mark::after {
  content: "";
  position: absolute;
  right: -4px;
  bottom: -8px;
  width: 5px;
  height: 16px;
  background: var(--green-300);
}

.brand-mark i {
  display: block;
  background: var(--green-500);
  border: 2px solid #d8ffe7;
}

.header-tools {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.tool-button {
  min-height: 44px;
  padding: 8px 11px;
  color: white;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  background: rgba(255, 255, 255, 0.1);
  border: 2px solid rgba(255, 255, 255, 0.45);
  border-radius: 8px;
  cursor: pointer;
}

.tool-button:hover {
  background: rgba(255, 255, 255, 0.18);
}

.tool-button:active {
  transform: translateY(2px);
}

.tool-button--icon {
  min-width: 44px;
  padding-inline: 8px;
  font-size: 20px;
}

.status-strip {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  overflow: hidden;
  margin-bottom: 8px;
  background: var(--panel);
  border: 3px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.status-item {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  min-height: 62px;
  padding: 9px 13px;
  background: transparent;
  border: 0;
  border-right: 2px solid var(--cream-200);
  text-align: left;
}

.status-item:last-child {
  border-right: 0;
}

.status-item span {
  overflow: hidden;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-item span b {
  display: inline-grid;
  place-items: center;
  width: 16px;
  height: 16px;
  margin-left: 2px;
  color: white;
  font-family: var(--font-pixel);
  font-size: 10px;
  background: var(--blue-500);
  border-radius: 50%;
}

.status-item strong {
  overflow: hidden;
  margin-top: 1px;
  color: var(--navy-900);
  font-family: var(--font-pixel);
  font-size: clamp(13px, 3vw, 18px);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.status-item--button {
  width: 100%;
  cursor: help;
}

.status-item--button:hover {
  background: #eef9f3;
}

.status-item--income strong {
  color: var(--green-600);
}

.time-meter {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 2px;
  max-width: 78px;
  margin-top: 3px;
}

.time-meter i {
  display: block;
  height: 3px;
  background: #d9e4e3;
}

.time-meter i.is-on {
  background: var(--coral-400);
}

.rank-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 4px 8px;
}

.rank-chip {
  display: inline-flex;
  align-items: center;
  min-height: 25px;
  padding: 4px 9px;
  color: #14384a;
  font-family: var(--font-pixel);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.04em;
  background: var(--gold-300);
  border: 2px solid var(--navy-950);
  border-radius: 6px;
  box-shadow: 0 2px 0 var(--navy-950);
}

.rank-chip--team {
  color: white;
  background: var(--green-600);
}

.game-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(350px, 1fr);
  gap: 14px;
  align-items: start;
}

.game-layout__world,
.game-layout__controls {
  min-width: 0;
}

.goal-card {
  position: relative;
  overflow: hidden;
  min-height: 116px;
  margin-bottom: 12px;
  padding: 16px 18px 19px;
  background: linear-gradient(135deg, #ffffff 0 70%, #effaf3 70%);
  border: 3px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.goal-card::after {
  content: "";
  position: absolute;
  top: 13px;
  right: 15px;
  width: 23px;
  height: 23px;
  border: 5px solid var(--green-500);
  border-left-color: transparent;
  transform: rotate(-25deg);
}

.goal-card[data-complete="true"]::after {
  width: 28px;
  height: 14px;
  border: 0;
  border-left: 6px solid var(--green-500);
  border-bottom: 6px solid var(--green-500);
  transform: rotate(-45deg);
}

.goal-card__copy {
  max-width: calc(100% - 35px);
}

.goal-card__copy > span {
  display: block;
  margin-bottom: 3px;
  color: var(--green-600);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.03em;
}

.goal-card h2 {
  margin: 0;
  color: var(--navy-900);
  font-size: clamp(20px, 3.2vw, 29px);
  line-height: 1.25;
}

.goal-card p {
  max-width: 700px;
  margin: 5px 0 0;
  color: var(--muted);
  font-size: 14px;
}

.goal-progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 7px;
  background: #dce8e6;
}

.goal-progress i {
  display: block;
  width: 0;
  height: 100%;
  background: repeating-linear-gradient(90deg, var(--green-500) 0 12px, var(--green-300) 12px 15px);
  transition: width 360ms steps(8, end);
}

.world-frame {
  position: relative;
  overflow: hidden;
  margin: 0;
  background: #c9a578;
  border: 3px solid #617e74;
  border-radius: var(--radius);
  box-shadow: 0 5px 0 #071d2b, 0 18px 45px #061d2b45;
  isolation: isolate;
}

.world-frame::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.3);
}

.world-frame__label {
  position: absolute;
  z-index: 3;
  top: 9px;
  left: 9px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  color: white;
  font-family: var(--font-pixel);
  font-size: 9px;
  background: rgba(16, 43, 61, 0.86);
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 5px;
}

.world-frame__label b {
  color: var(--green-300);
  font-size: 8px;
}

#worldCanvas {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9;
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

.world-frame.is-changing canvas {
  animation: scene-enter 260ms steps(3, end);
}

.milestone-badge {
  position: absolute;
  z-index: 4;
  right: 12px;
  bottom: 12px;
  padding: 8px 11px;
  color: var(--navy-950);
  font-family: var(--font-pixel);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.06em;
  background: var(--gold-300);
  border: 3px solid var(--navy-950);
  border-radius: 6px;
  box-shadow: 0 4px 0 var(--navy-950);
  transform: rotate(-2deg);
  animation: badge-pop 480ms steps(5, end);
}

.game-layout__controls {
  position: sticky;
  top: 12px;
  display: grid;
  gap: 12px;
}

.dialogue-card,
.action-dock {
  background: var(--panel);
  border: 3px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.dialogue-card {
  min-height: 176px;
  padding: 17px;
}

.dialogue-card__speaker {
  display: inline-flex;
  min-height: 26px;
  align-items: center;
  margin-bottom: 8px;
  padding: 3px 8px;
  color: white;
  font-size: 12px;
  font-weight: 800;
  background: var(--navy-800);
  border-radius: 5px;
}

.dialogue-card > p {
  margin: 0;
  color: var(--navy-900);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.55;
}

.result-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin-top: 13px;
}

.result-card {
  min-width: 0;
  padding: 8px 7px;
  background: #f1f5f2;
  border: 2px solid #cbdad7;
  border-radius: 7px;
}

.result-card span,
.result-card strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.result-card span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 700;
}

.result-card strong {
  margin-top: 2px;
  font-size: 12px;
}

.result-card--warn {
  background: #fff4dc;
  border-color: #edc56a;
}

.comparison-grid {
  display: grid;
  gap: 5px;
  margin-top: 12px;
}

.comparison-row {
  display: grid;
  grid-template-columns: 1fr 0.9fr auto 1.2fr;
  gap: 6px;
  align-items: center;
  padding: 7px 8px;
  background: #f0f6f3;
  border-left: 4px solid var(--green-500);
}

.comparison-row span,
.comparison-row small {
  color: var(--muted);
  font-size: 11px;
}

.comparison-row strong {
  color: var(--green-600);
  font-size: 11px;
}

.meeting-results {
  display: grid;
  gap: 6px;
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
}

.meeting-results li {
  position: relative;
  padding: 7px 8px 7px 28px;
  color: var(--navy-800);
  font-size: 12px;
  font-weight: 700;
  background: #edf8f1;
  border: 2px solid #c6e7d1;
  border-radius: 6px;
}

.meeting-results li::before {
  content: "✓";
  position: absolute;
  left: 9px;
  color: var(--green-600);
  font-weight: 900;
}

.future-card {
  margin-top: 13px;
  padding: 10px 11px;
  background: #edf7fb;
  border: 2px dashed var(--blue-500);
  border-radius: 7px;
}

.future-card span {
  color: var(--blue-500);
  font-size: 11px;
  font-weight: 800;
}

.future-card p {
  margin: 3px 0 0;
  font-size: 12px;
}

.action-dock {
  padding: 12px;
}

.action-dock__heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin: 0 2px 9px;
}

.action-dock__heading span {
  color: var(--navy-900);
  font-size: 14px;
  font-weight: 800;
}

.action-dock__heading small {
  color: var(--muted);
  font-size: 10px;
}

.action-bar {
  display: grid;
  gap: 8px;
}

.action-button {
  position: relative;
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  gap: 9px;
  align-items: center;
  width: 100%;
  min-height: 58px;
  padding: 8px 10px;
  color: var(--navy-950);
  text-align: left;
  border: 3px solid var(--navy-950);
  border-radius: 8px;
  cursor: pointer;
  transition: transform 120ms ease, box-shadow 120ms ease, filter 120ms ease;
}

.action-button--primary {
  background: var(--green-300);
  box-shadow: 0 4px 0 var(--navy-950);
}

.action-button--secondary {
  background: var(--cream-100);
  box-shadow: 0 3px 0 var(--navy-950);
}

.action-button:hover:not(:disabled) {
  filter: brightness(1.04);
  transform: translateY(-1px);
}

.action-button:active:not(:disabled) {
  box-shadow: 0 1px 0 var(--navy-950);
  transform: translateY(3px);
}

.action-button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
  filter: grayscale(0.7);
}

.action-button.is-guided::after {
  content: "";
  position: absolute;
  inset: -7px;
  pointer-events: none;
  border: 3px solid var(--gold-300);
  border-radius: 11px;
  animation: guide-pulse 1.4s steps(4, end) infinite;
}

.action-button__icon {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  color: white;
  font-family: var(--font-pixel);
  font-size: 18px;
  font-weight: 900;
  background: var(--navy-800);
  border: 2px solid var(--navy-950);
  border-radius: 6px;
}

.action-button__copy {
  min-width: 0;
}

.action-button__copy strong,
.action-button__copy small {
  display: block;
}

.action-button__copy strong {
  font-size: 14px;
  line-height: 1.25;
}

.action-button__copy small {
  margin-top: 2px;
  color: var(--navy-700);
  font-size: 10px;
}

.action-button__cost {
  padding: 4px 6px;
  color: white;
  font-family: var(--font-pixel);
  font-size: 9px;
  white-space: nowrap;
  background: var(--coral-600);
  border-radius: 4px;
}

.waiting-state {
  display: grid;
  place-items: center;
  min-height: 76px;
  color: var(--navy-700);
  font-weight: 800;
  background: repeating-linear-gradient(-45deg, #edf5f1 0 10px, #f7fbf8 10px 20px);
  border: 2px dashed #9cbab2;
  border-radius: 7px;
}

.waiting-state::after {
  content: "";
  width: 56px;
  height: 5px;
  margin-top: 8px;
  background: linear-gradient(90deg, var(--green-500) 0 50%, #d8e5e1 50%);
  background-size: 16px 100%;
  animation: loading-steps 0.8s steps(4, end) infinite;
}

.game-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 17px;
  padding: 0 4px;
  color: rgba(255, 255, 255, 0.7);
  font-size: 11px;
}

.game-footer p {
  margin: 0;
}

.game-footer span {
  white-space: nowrap;
}

.game-dialog {
  width: min(540px, calc(100% - 24px));
  max-height: min(760px, calc(100svh - 32px));
  padding: 0;
  overflow: auto;
  color: var(--ink);
  background: var(--panel);
  border: 4px solid var(--navy-950);
  border-radius: 12px;
  box-shadow: 0 10px 0 rgba(5, 20, 31, 0.8);
}

.game-dialog::backdrop {
  background: rgba(6, 23, 34, 0.78);
  backdrop-filter: blur(3px);
}

.game-dialog[open] {
  animation: dialog-enter 220ms steps(4, end);
}

.game-dialog__content {
  padding: 22px;
}

.dialog-kicker {
  display: inline-flex;
  padding: 5px 8px;
  color: white;
  font-family: var(--font-pixel);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  background: var(--green-600);
  border: 2px solid var(--navy-950);
  border-radius: 5px;
}

.game-dialog h2 {
  margin: 12px 0 16px;
  color: var(--navy-900);
  font-size: clamp(24px, 6vw, 34px);
  line-height: 1.2;
}

.receipt {
  padding: 13px;
  background: #fffaf0;
  border: 3px solid var(--navy-950);
  border-radius: 7px;
  box-shadow: var(--shadow-soft);
}

.receipt > div {
  display: flex;
  justify-content: space-between;
  gap: 15px;
  padding: 9px 4px;
  border-bottom: 2px dashed #c7bda9;
}

.receipt > div:last-child {
  border-bottom: 0;
}

.receipt span {
  color: var(--muted);
  font-size: 13px;
}

.receipt strong {
  color: var(--navy-900);
  font-family: var(--font-pixel);
  font-size: 13px;
  text-align: right;
}

.receipt .receipt__total {
  margin-top: 5px;
  padding-top: 13px;
  background: #eef9f2;
}

.receipt__total strong {
  color: var(--green-600);
  font-size: 16px;
}

.dialog-note,
.term-definition {
  margin: 15px 0;
  color: var(--muted);
  font-size: 13px;
}

.term-definition {
  padding: 14px;
  color: var(--navy-900);
  font-size: 16px;
  font-weight: 700;
  background: #edf7fb;
  border-left: 5px solid var(--blue-500);
}

.dialog-button {
  width: 100%;
  min-height: 50px;
  padding: 10px 14px;
  color: var(--navy-950);
  font-weight: 800;
  background: var(--green-300);
  border: 3px solid var(--navy-950);
  border-radius: 7px;
  box-shadow: 0 4px 0 var(--navy-950);
  cursor: pointer;
}

.dialog-button:active {
  box-shadow: 0 1px 0 var(--navy-950);
  transform: translateY(3px);
}

.dialog-button--secondary {
  background: var(--cream-100);
}

.dialog-button--danger {
  color: white;
  background: var(--coral-600);
}

.dialog-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 9px;
}

.income-sections {
  display: grid;
  gap: 8px;
}

.income-sections section {
  padding: 11px;
  background: #f0f8f3;
  border: 2px solid #c8ddd0;
  border-radius: 7px;
}

.income-sections section.income-locked {
  background: #f2f3f2;
  border-color: #d6dcda;
}

.income-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-weight: 800;
}

.income-heading b {
  color: var(--green-600);
  font-family: var(--font-pixel);
  font-size: 12px;
}

.income-locked .income-heading b {
  color: var(--muted);
}

.income-sections dl {
  display: grid;
  gap: 4px;
  margin: 9px 0 0;
}

.income-sections dl div {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 12px;
}

.income-sections dt,
.income-sections dd {
  margin: 0;
}

.income-sections dd {
  color: var(--navy-900);
  font-weight: 800;
  text-align: right;
}

.income-sections p {
  margin: 7px 0 0;
  color: var(--muted);
  font-size: 11px;
}

.income-breakdown {
  display: grid;
  gap: 4px;
  margin: 9px 0 0;
  padding: 0;
  list-style: none;
}

.income-breakdown li {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  padding: 5px 7px;
  font-size: 11px;
  background: #fff;
  border: 1px solid #c8ddd0;
}

.income-history {
  margin-top: 14px;
}

.income-history h3 {
  margin: 0 0 7px;
  font-family: var(--font-pixel);
  font-size: 12px;
}

.table-scroll {
  overflow-x: auto;
  border: 2px solid var(--navy-900);
  border-radius: 7px;
}

.income-history table {
  width: 100%;
  min-width: 590px;
  border-collapse: collapse;
  background: white;
  font-size: 11px;
}

.income-history th,
.income-history td {
  padding: 7px;
  border-bottom: 1px solid #d8e4df;
  text-align: right;
  white-space: nowrap;
}

.income-history th:first-child {
  text-align: left;
}

.term-link {
  padding: 0;
  color: var(--blue-500);
  font-weight: 800;
  text-decoration: underline;
  background: transparent;
  border: 0;
  cursor: help;
}

.income-total {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 11px;
  padding: 12px;
  color: white;
  background: var(--navy-900);
  border-radius: 7px;
}

.income-total strong {
  font-family: var(--font-pixel);
}

.toast-region {
  position: fixed;
  z-index: 80;
  top: max(12px, env(safe-area-inset-top));
  left: 50%;
  display: grid;
  gap: 7px;
  width: min(430px, calc(100% - 24px));
  pointer-events: none;
  transform: translateX(-50%);
}

.toast {
  padding: 10px 12px;
  color: white;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  background: var(--navy-900);
  border: 3px solid white;
  border-radius: 7px;
  box-shadow: 0 4px 0 rgba(4, 19, 29, 0.75);
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 180ms ease, transform 180ms ease;
}

.toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.toast--success {
  background: var(--green-600);
}

.toast--hint {
  color: var(--navy-950);
  background: var(--gold-300);
  border-color: var(--navy-950);
}

.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@keyframes scene-enter {
  0% { opacity: 0.3; transform: translateY(4px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes badge-pop {
  0% { opacity: 0; transform: scale(0.6) rotate(-6deg); }
  65% { opacity: 1; transform: scale(1.08) rotate(1deg); }
  100% { transform: scale(1) rotate(-2deg); }
}

@keyframes guide-pulse {
  0%, 100% { opacity: 0.35; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.015); }
}

@keyframes loading-steps {
  to { background-position: 16px 0; }
}

@keyframes dialog-enter {
  0% { opacity: 0; transform: translateY(12px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 820px) {
  .game-layout {
    grid-template-columns: 1fr;
  }

  .game-layout__controls {
    position: static;
  }

  .dialogue-card {
    min-height: 0;
  }

  .action-dock {
    position: sticky;
    z-index: 8;
    bottom: max(8px, env(safe-area-inset-bottom));
  }
}

@media (max-width: 590px) {
  .game-shell {
    width: min(100% - 14px, 560px);
    padding-top: max(8px, env(safe-area-inset-top));
  }

  .game-header {
    min-height: 50px;
    margin-inline: 3px;
  }

  .brand-mark {
    display: none;
  }

  .brand-lockup p {
    font-size: 9px;
  }

  .brand-lockup h1 {
    font-size: 20px;
  }

  .tool-button {
    min-height: 42px;
    padding-inline: 8px;
    font-size: 11px;
  }

  .status-strip {
    grid-template-columns: 1fr 1fr;
  }

  .status-item {
    min-height: 55px;
    padding: 7px 10px;
  }

  .status-item:nth-child(2) {
    border-right: 0;
  }

  .status-item:nth-child(-n + 2) {
    border-bottom: 2px solid var(--cream-200);
  }

  .status-item strong {
    font-size: 14px;
  }

  .goal-card {
    min-height: 108px;
    padding: 13px 14px 17px;
  }

  .goal-card h2 {
    font-size: 20px;
  }

  .goal-card p {
    font-size: 12px;
    line-height: 1.4;
  }

  .world-frame {
    border-width: 3px;
    box-shadow: 0 5px 0 #071d2b;
  }

  .world-frame__label {
    top: 6px;
    left: 6px;
    padding: 4px 6px;
    font-size: 7px;
    border-width: 1px;
  }

  .milestone-badge {
    right: 7px;
    bottom: 7px;
    padding: 6px 8px;
    font-size: 8px;
  }

  .game-layout {
    gap: 10px;
  }

  .game-layout__controls {
    gap: 9px;
  }

  .dialogue-card {
    padding: 13px;
  }

  .dialogue-card > p {
    font-size: 15px;
  }

  .action-dock {
    padding: 9px;
  }

  .action-button {
    grid-template-columns: 36px minmax(0, 1fr) auto;
    min-height: 54px;
    padding: 7px 8px;
    border-width: 2px;
  }

  .action-button__icon {
    width: 32px;
    height: 32px;
    font-size: 15px;
  }

  .action-button__copy strong {
    font-size: 13px;
  }

  .result-grid {
    grid-template-columns: 1fr;
  }

  .result-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .comparison-row {
    grid-template-columns: 1fr 0.8fr auto 1.2fr;
  }

  .game-footer {
    display: block;
    text-align: center;
  }

  .game-footer span {
    display: block;
    margin-top: 3px;
  }

  .game-dialog__content {
    padding: 17px;
  }
}

@media (max-width: 370px) {
  .header-tools {
    gap: 4px;
  }

  .tool-button {
    padding-inline: 6px;
    font-size: 10px;
  }

  .tool-button--icon {
    min-width: 40px;
    font-size: 17px;
  }

  .status-item span {
    font-size: 10px;
  }

  .action-button__cost {
    font-size: 8px;
  }
}

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

/* X-VISOR QUEST 1.0b release surfaces */
.routine-choices button.routine-choice--locked,
.routine-choices button[aria-disabled="true"]{opacity:.5;filter:grayscale(.35);cursor:not-allowed}
.receipt-1b{display:grid;gap:0;border:3px solid var(--navy-900,#17384f);background:#fffaf0;padding:10px;border-radius:8px}
.receipt-1b__row,.receipt-1b__total,.receipt-1b__tier,.receipt-1b__grand{display:flex;justify-content:space-between;gap:12px;padding:8px 4px;border-bottom:1px dashed #b9aa8e}
.receipt-1b__row strong,.receipt-1b__total strong,.receipt-1b__tier strong,.receipt-1b__grand strong{text-align:right}
.receipt-1b__total{background:#edf7ef;font-weight:800}
.receipt-1b__tier{font-size:12px;color:#526a76}
.receipt-1b__income strong{color:#268d61}
.receipt-1b__grand{font-size:16px;font-weight:900;background:#e8f6ed;border-bottom:0}
.receipt-1b small{padding:8px 4px 2px;color:#647985;line-height:1.45}

.v1-score-required{margin-top:16px;padding:18px;border:3px solid var(--navy-900,#17384f);border-radius:12px;background:#fff6d8;box-shadow:0 5px 0 #d9a82f}
.v1-score-required>strong{display:block;font-size:18px;margin-bottom:4px}
.v1-score-required p{margin:4px 0 12px}
.v1-score-required .v9-score-name{display:grid;gap:7px;font-weight:800}
.v1-score-required .v9-score-name input{width:100%;min-height:50px;padding:10px 12px;border:2px solid var(--navy-900,#17384f);border-radius:8px;background:#fff;font:inherit;font-size:18px}
.v1-score-required>.dialog-button{width:100%;margin-top:10px;min-height:54px}
.v1-score-lock-success{display:flex;justify-content:space-between;gap:12px;align-items:center;margin:16px 0;padding:14px 16px;border:2px solid #3b9b6d;border-radius:10px;background:#eaf8ef}
.v1-score-lock-success strong{color:#217653}

.game-dialog[data-kind="wide"]{max-width:min(920px,calc(100vw - 16px))}
@media(max-width:640px){
  .game-dialog,.game-dialog[data-kind="wide"]{width:calc(100vw - 12px);max-width:calc(100vw - 12px);max-height:calc(100svh - 12px);margin:auto;overflow:auto}
  .game-dialog__content,.game-dialog[data-kind="wide"] .game-dialog__content{padding:14px 12px calc(18px + env(safe-area-inset-bottom))}
  .v1-finale-grid,.v1-org-grid{grid-template-columns:1fr!important}
  .v1-finale-compare{grid-template-columns:1fr!important}
  .v1-trip-row{display:flex;flex-wrap:wrap;gap:6px}
  .v1-score-lock-success{align-items:flex-start;flex-direction:column}
  .receipt-1b__row,.receipt-1b__total,.receipt-1b__tier,.receipt-1b__grand{align-items:flex-start}
  .receipt-1b__row span,.receipt-1b__total span,.receipt-1b__tier span,.receipt-1b__grand span{max-width:46%}
}
@media(max-width:390px){.game-dialog h2{font-size:24px}.v1-finale-grid strong{font-size:17px}}

@media (prefers-contrast: more) {
  :root {
    --muted: #3f5966;
    --line: #102b3d;
  }

  .status-strip,
  .goal-card,
  .dialogue-card,
  .action-dock {
    border-width: 4px;
  }
}

/* Preparation, certification, and management components */
.status-strip {
  grid-template-columns: 1.05fr 1.25fr 0.8fr 0.9fr 1fr;
}

.status-strip[data-compact="true"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.status-item--energy {
  cursor: pointer;
}

.status-item--energy .time-meter {
  position: relative;
  display: block;
  width: 100%;
  height: 5px;
  margin-top: 5px;
  overflow: hidden;
  background: #d8e3df;
  border-radius: 0;
}

.status-item--energy .time-meter::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: var(--energy, 0%);
  background: linear-gradient(90deg, var(--gold-500), var(--green-500));
  transition: width 160ms steps(3, end);
}

.fact-grid,
.recap-grid,
.summary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  margin-top: 12px;
}

.fact-grid .result-card,
.recap-grid .result-card,
.summary-grid .result-card {
  min-height: 66px;
}

.recap-grid {
  grid-template-columns: 1fr;
}

.quiz-grid {
  display: grid;
  gap: 8px;
  margin-top: 14px;
}

.quiz-choice {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 9px;
  min-height: 52px;
  padding: 7px 10px;
  color: var(--ink);
  text-align: left;
  background: #fffdf8;
  border: 3px solid #9bb0b7;
  border-radius: 8px;
  box-shadow: 0 3px 0 rgba(16, 43, 61, 0.12);
  cursor: pointer;
}

.quiz-choice > span {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  color: white;
  font-family: var(--font-pixel);
  background: var(--navy-700);
  border: 2px solid var(--navy-950);
}

.quiz-choice strong {
  font-size: 14px;
  line-height: 1.35;
}

.quiz-choice:hover:not(:disabled),
.quiz-choice.is-selected {
  border-color: var(--blue-500);
  background: #eaf8ff;
  transform: translateY(-1px);
}

.quiz-choice.is-correct {
  border-color: var(--green-600);
  background: #e8f9ee;
}

.quiz-choice.is-wrong {
  border-color: var(--coral-600);
  background: #fff0ed;
  animation: answer-shake 240ms steps(3, end);
}

.quiz-choice:disabled {
  color: inherit;
  cursor: default;
  opacity: 1;
}

@keyframes answer-shake {
  0%, 100% { transform: translateX(0); }
  33% { transform: translateX(-5px); }
  66% { transform: translateX(5px); }
}

.answer-feedback {
  margin-top: 9px;
  padding: 10px 12px;
  border: 2px solid var(--line);
  border-left-width: 6px;
  border-radius: 7px;
}

.answer-feedback strong {
  display: block;
  margin-bottom: 3px;
  font-family: var(--font-pixel);
  font-size: 12px;
}

.answer-feedback p {
  margin: 0;
  font-size: 13px;
}

.answer-feedback--correct {
  background: #e8f8ed;
  border-left-color: var(--green-600);
}

.answer-feedback--wrong {
  background: #fff1ed;
  border-left-color: var(--coral-600);
}

.abcd-mini {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 6px;
  margin-top: 13px;
}

.abcd-mini__item {
  min-height: 70px;
  padding: 7px;
  background: #f4f8f4;
  border: 2px solid var(--line);
}

.abcd-mini__item b {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  margin-bottom: 5px;
  color: white;
  font-family: var(--font-pixel);
  background: var(--green-600);
}

.abcd-mini__item--c {
  background: #fff6cf;
  border-color: #bd8d1c;
}

.abcd-mini__item--c b {
  background: #bd8d1c;
}

.abcd-mini__item span {
  display: block;
  font-size: 10px;
  line-height: 1.25;
}

.routine-choices {
  display: grid;
  gap: 7px;
  margin-top: 10px;
}

.routine-choices button {
  display: grid;
  gap: 3px;
  min-height: 56px;
  padding: 9px 11px;
  color: var(--ink);
  text-align: left;
  background: white;
  border: 3px solid var(--line);
  border-radius: 8px;
  box-shadow: 0 3px 0 var(--navy-950);
  cursor: pointer;
}

.routine-choices button:first-child {
  border-color: #bd8d1c;
  background: #fff8d8;
}

.routine-choices button:hover {
  transform: translateY(-2px);
}

.routine-choices button span {
  color: var(--muted);
  font-size: 12px;
}

.selected-products {
  display: grid;
  gap: 3px;
  margin-top: 12px;
  padding: 9px 11px;
  background: #edf8f1;
  border: 2px solid var(--green-600);
}

.selected-products span {
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
}

.selected-products strong {
  font-size: 13px;
}

.knowledge-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.knowledge-links a,
.game-footer a {
  color: var(--navy-800);
  font-size: 12px;
  font-weight: 800;
  text-underline-offset: 3px;
}

.xos-panel {
  margin-top: 12px;
  padding: 10px 11px;
  background: #eaf7f0;
  border: 3px solid var(--green-600);
  border-radius: 8px;
}

.panel-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.panel-heading strong {
  font-family: var(--font-pixel);
  font-size: 11px;
}

.xos-panel ol {
  margin: 8px 0 0;
  padding-left: 22px;
}

.xos-panel li {
  margin-top: 4px;
  font-size: 12px;
}

.management-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  margin-top: 8px;
}

.management-board > div {
  display: grid;
  min-height: 52px;
  padding: 7px;
  background: #f7fbf7;
  border: 2px solid #9eb2aa;
}

.management-board span {
  color: var(--muted);
  font-family: var(--font-pixel);
  font-size: 8px;
}

.management-board strong {
  align-self: end;
  font-size: 17px;
}

.receipt--inline {
  margin-top: 12px;
}

.receipt--inline small {
  display: block;
  grid-column: 1 / -1;
  padding-top: 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.work-section {
  margin-top: 17px;
}

.work-section h3 {
  margin: 0 0 7px;
  font-family: var(--font-pixel);
  font-size: 12px;
}

.work-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
}

.work-button {
  position: relative;
  display: grid;
  gap: 3px;
  min-height: 75px;
  padding: 10px 48px 10px 10px;
  color: var(--ink);
  text-align: left;
  background: #f7fbf7;
  border: 3px solid var(--line);
  border-radius: 8px;
  cursor: pointer;
}

.work-button:hover:not(:disabled) {
  background: #eaf8ef;
  transform: translateY(-2px);
}

.work-button span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

.work-button b {
  position: absolute;
  top: 9px;
  right: 9px;
  color: var(--navy-800);
  font-family: var(--font-pixel);
  font-size: 10px;
}

.work-button:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

.work-empty {
  margin: 0;
  padding: 10px;
  color: var(--muted);
  font-size: 12px;
  border: 2px dashed #aabbb7;
}

.game-footer nav {
  display: inline-flex;
  gap: 12px;
  margin-left: auto;
  margin-right: 14px;
}

body[data-stage^="exam_"] .goal-card,
body[data-stage="certification_ceremony"] .goal-card {
  border-color: #52758c;
  background: #eef6fa;
}

@media (max-width: 900px) {
  .status-strip {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .status-item--income,
  #hudXVButton {
    border-top: 2px solid var(--cream-200);
  }
}

@media (max-width: 640px) {
  .status-strip {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .status-item--customers {
    border-top: 2px solid var(--cream-200);
  }

  .abcd-mini,
  .management-board {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .work-grid,
  .fact-grid,
  .summary-grid {
    grid-template-columns: 1fr;
  }

  .game-footer nav {
    display: flex;
    justify-content: center;
    margin: 7px 0 0;
  }
}

/* People, skills, and income panels */
.rank-chip--button {
  appearance: none;
  cursor: pointer;
}

.rank-chip--button:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 3px 0 var(--navy-950);
}

.rank-chip--button:disabled {
  cursor: default;
}

.rank-chip--people {
  margin-left: auto;
  color: white;
  background: var(--navy-800);
}

.rank-chip--people b {
  margin-left: 6px;
  color: var(--gold-300);
}

.xos-panel ol {
  list-style-position: outside;
}

.xos-panel li button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  min-height: 30px;
  padding: 3px 5px;
  color: var(--ink);
  text-align: left;
  background: transparent;
  border: 0;
  cursor: pointer;
}

.xos-panel li button:hover {
  background: rgba(79, 189, 131, 0.13);
}

.xos-panel li button b {
  flex: 0 0 auto;
  color: var(--green-700);
  font-size: 10px;
}

.xos-all-button {
  width: 100%;
  margin-top: 8px;
  padding: 7px 8px;
  color: var(--navy-900);
  font-weight: 900;
  text-align: left;
  background: #fffdf4;
  border: 2px solid var(--navy-900);
  border-radius: 5px;
  cursor: pointer;
}

.management-tools,
.income-source-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
  margin-top: 8px;
}

.management-tools button {
  min-height: 38px;
  padding: 7px;
  color: var(--navy-900);
  font-weight: 900;
  background: #fff9e7;
  border: 2px solid var(--navy-900);
  border-radius: 6px;
  cursor: pointer;
}

.team-output,
.energy-empty-summary {
  margin-top: 9px;
  padding: 10px;
  background: #eef8f2;
  border: 3px solid var(--navy-900);
  border-radius: 8px;
}

.team-output > div:not(.panel-heading) {
  display: grid;
  grid-template-columns: minmax(80px, 0.35fr) minmax(0, 1fr);
  gap: 8px;
  padding: 6px 0;
  font-size: 11px;
  border-bottom: 1px dashed #9eb2aa;
}

.team-output > div:last-child {
  border-bottom: 0;
}

.energy-empty-summary {
  background: #fff5d8;
  border-color: #c98922;
}

.energy-empty-summary p {
  margin: 6px 0 0;
  font-size: 11px;
}

.income-source-grid > div {
  display: grid;
  gap: 3px;
  min-height: 58px;
  padding: 8px;
  background: #f7fbf7;
  border: 2px solid #a7b9b2;
}

.income-source-grid span {
  color: var(--muted);
  font-size: 11px;
}

.game-dialog[data-kind="wide"] {
  width: min(920px, calc(100% - 24px));
}

.people-tabs {
  display: flex;
  gap: 5px;
  padding-bottom: 7px;
  overflow-x: auto;
}

.people-tabs button,
.people-back {
  flex: 0 0 auto;
  min-height: 35px;
  padding: 7px 10px;
  color: var(--navy-900);
  font-weight: 850;
  background: #fff;
  border: 2px solid var(--navy-900);
  border-radius: 999px;
  cursor: pointer;
}

.people-tabs button[aria-selected="true"] {
  color: white;
  background: var(--navy-800);
}

.people-search {
  display: grid;
  gap: 5px;
  margin-top: 7px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.people-search input {
  min-height: 43px;
  padding: 8px 11px;
  color: var(--ink);
  font: inherit;
  background: white;
  border: 3px solid var(--navy-900);
  border-radius: 7px;
}

.people-grid,
.skill-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-top: 12px;
}

.people-card,
.skill-card {
  padding: 12px;
  background: #fffdf7;
  border: 3px solid var(--navy-900);
  border-radius: 9px;
  box-shadow: 0 3px 0 #a9b8b2;
}

.people-card--team {
  background: #eef8f2;
  border-color: var(--green-700);
}

.people-card__top {
  display: flex;
  align-items: start;
  justify-content: space-between;
  gap: 8px;
}

.people-card h3,
.skill-card h3 {
  margin: 0;
  font-size: 18px;
}

.people-card__top span,
.people-card__top > b {
  color: var(--muted);
  font-size: 10px;
}

.people-card__top > b {
  max-width: 46%;
  color: var(--green-700);
  text-align: right;
}

.people-card dl {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 5px;
  margin: 10px 0;
}

.people-card dl > div {
  padding: 6px;
  background: rgba(222, 235, 230, 0.65);
}

.people-card dt {
  color: var(--muted);
  font-size: 9px;
}

.people-card dd {
  margin: 2px 0 0;
  font-size: 11px;
  font-weight: 850;
}

.people-card p {
  min-height: 36px;
  margin: 7px 0;
  font-size: 11px;
}

.people-card .work-button,
.skill-card .work-button {
  min-height: 62px;
}

.skill-card > div:first-child {
  display: flex;
  align-items: center;
  gap: 7px;
}

.skill-card > div:first-child > span {
  font-size: 24px;
}

.skill-card p {
  min-height: 38px;
  margin: 9px 0;
  color: var(--muted);
  font-size: 11px;
}

.skill-card small {
  display: block;
  min-height: 48px;
  margin: 7px 0;
  font-size: 10px;
  line-height: 1.45;
}

.skill-meter {
  height: 9px;
  overflow: hidden;
  background: #dbe6e1;
  border: 2px solid var(--navy-900);
}

.skill-meter i {
  display: block;
  width: var(--skill-progress);
  height: 100%;
  background: linear-gradient(90deg, var(--green-500), var(--gold-300));
}

.xlead-progress {
  margin-top: 14px;
  padding: 12px;
  background: #eef4f8;
  border: 3px solid var(--navy-900);
  border-radius: 8px;
}

.xlead-progress h3,
.month-summary-sections h3 {
  margin: 0 0 8px;
  font-family: var(--font-pixel);
  font-size: 11px;
}

.xlead-progress ul {
  display: grid;
  gap: 4px;
  margin: 0 0 8px;
  padding: 0;
  list-style: none;
}

.xlead-progress li {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 5px 7px;
  background: white;
  border: 1px solid #a7b9c2;
}

.xlead-progress li.is-done {
  color: #176540;
  background: #ddf4e6;
}

.month-summary-sections {
  display: grid;
  gap: 10px;
  margin-top: 12px;
}

.month-summary-sections section {
  padding: 10px;
  background: #f7fbf7;
  border: 2px solid #a7b9b2;
  border-radius: 7px;
}

.month-summary-sections .summary-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: 0;
}

@media (max-width: 640px) {
  .people-grid,
  .skill-grid,
  .month-summary-sections .summary-grid,
  .management-tools,
  .income-source-grid {
    grid-template-columns: 1fr;
  }

  .game-dialog[data-kind="wide"] .game-dialog__content {
    padding: 15px;
  }

  .rank-row {
    flex-wrap: wrap;
  }

  .rank-chip--people {
    margin-left: 0;
  }
}

/* Organization reports and campaign milestones */
.audio-control {
  position: relative;
  display: flex;
  min-width: 0;
}

.audio-control__main {
  border-radius: 8px 0 0 8px;
}

.audio-control__settings {
  min-width: 34px;
  padding-inline: 7px;
  border-left: 0;
  border-radius: 0 8px 8px 0;
}

.audio-menu {
  position: absolute;
  z-index: 40;
  top: calc(100% + 7px);
  right: 0;
  display: grid;
  gap: 6px;
  width: 178px;
  padding: 9px;
  color: var(--ink);
  background: var(--panel);
  border: 3px solid var(--navy-950);
  border-radius: 9px;
  box-shadow: 0 5px 0 rgba(5, 20, 31, 0.55);
}

.audio-menu > span {
  color: var(--muted);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.audio-menu button {
  min-height: 42px;
  padding: 8px 10px;
  color: var(--ink);
  font-weight: 850;
  text-align: left;
  background: #eef8f2;
  border: 2px solid var(--navy-800);
  border-radius: 6px;
  cursor: pointer;
}

.audio-menu button[aria-pressed="false"] {
  color: var(--muted);
  background: #f1f2f1;
}

.status-item--income strong {
  font-size: clamp(11px, 1.8vw, 15px);
}

body[data-release-moment="month12"] .world-frame,
body[data-release-moment="month24"] .world-frame,
body[data-release-moment="new-game-plus"] .world-frame {
  border-color: var(--gold-300);
  box-shadow: 0 8px 0 #071d2b, 0 0 0 4px rgba(241, 190, 71, 0.25);
}

body[data-release-moment="month12"] .goal-card {
  background: linear-gradient(135deg, #fffdf7 0 54%, #fff0b9 54% 72%, #e9f8ef 72%);
}

body[data-release-moment="month24"] .goal-card {
  color: white;
  background: linear-gradient(135deg, #17384f, #2f7359 72%, #f1be47 72%);
}

body[data-release-moment="month24"] .goal-card h2,
body[data-release-moment="month24"] .goal-card p,
body[data-release-moment="month24"] .goal-card__copy > span {
  color: white;
}

body[data-release-moment="new-game-plus"] .goal-card {
  background: linear-gradient(135deg, #fff8d8, #e9f8ef 65%, #d9eff8);
}

body.is-month-passing #worldCanvas {
  animation: release-month-pass 680ms steps(6, end);
}

body.is-ng-transition::before {
  content: "⚡ NEW GAME+";
  position: fixed;
  z-index: 200;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff8d8;
  font: 900 clamp(30px, 8vw, 70px) var(--font-pixel);
  letter-spacing: 0.04em;
  pointer-events: none;
  background: rgba(16, 43, 61, 0.94);
  animation: release-ng-transition 520ms steps(6, end) both;
}

.v1-world-version {
  color: var(--green-300);
  font-size: 8px;
  font-weight: 800;
}

.v1-report-headline,
.revenue-hero {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.v1-report-headline > div,
.revenue-hero > div {
  padding: 12px;
  color: white;
  background: var(--navy-900);
  border: 3px solid var(--navy-950);
  border-radius: 9px;
  box-shadow: 0 3px 0 #0a2231;
}

.v1-report-headline span,
.revenue-hero span {
  display: block;
  color: #bfe8cf;
  font-size: 11px;
  font-weight: 800;
}

.v1-report-headline strong,
.revenue-hero strong {
  display: block;
  margin-top: 4px;
  font-size: clamp(17px, 3vw, 24px);
}

.v1-org-rhythm {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 10px 0 0;
}

.v1-org-rhythm span {
  padding: 6px 9px;
  font-weight: 800;
  background: #f1f7f2;
  border: 1px solid #bdd0c8;
  border-radius: 999px;
}

.v1-org-grid,
.v1-finale-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 12px 0;
}

.v1-org-grid > div,
.v1-finale-grid > div {
  padding: 10px;
  background: #fff;
  border: 2px solid #c9d7d1;
  border-radius: 10px;
}

.v1-org-grid span,
.v1-finale-grid span {
  display: block;
  color: #60777f;
  font-size: 12px;
}

.v1-org-grid strong,
.v1-finale-grid strong {
  font-size: 18px;
}

.v1-story-note,
.v1-ending-quote {
  margin: 11px 0;
  padding: 11px 13px;
  color: var(--navy-900);
  font-weight: 800;
  background: #fff5cf;
  border-left: 5px solid var(--gold-500);
}

.v1-rhythm-details,
.income-history-card {
  background: #f7fbf8;
  border: 2px solid #c8d8d2;
  border-radius: 8px;
}

.v1-rhythm-details summary,
.income-history-card summary {
  min-height: 44px;
  padding: 10px 12px;
  font-weight: 850;
  cursor: pointer;
}

.v1-rhythm-details > div {
  padding: 0 10px 10px;
}

.v1-leader {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 0;
  border-bottom: 1px solid #dfe7e3;
}

.v1-leader > span,
.v1-leader small {
  display: block;
}

.v1-leader small {
  margin-top: 2px;
  color: var(--muted);
  font-size: 10px;
}

.v1-revelation-story {
  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr auto 1.25fr;
  gap: 7px;
  align-items: center;
  margin: 16px 0;
}

.v1-revelation-story span {
  min-height: 66px;
  padding: 9px;
  font-weight: 850;
  text-align: center;
  background: #fff9e7;
  border: 2px solid var(--navy-900);
  border-radius: 8px;
}

.v1-revelation-story b {
  display: block;
  color: var(--green-600);
  font: 900 11px var(--font-pixel);
}

.v1-revelation-story i {
  color: var(--green-600);
  font-style: normal;
  font-weight: 900;
}

.v1-two-year-journey {
  display: grid;
  grid-template-columns: 1fr auto 1.45fr;
  gap: 10px;
  align-items: center;
  margin: 12px 0;
}

.v1-two-year-journey > div {
  min-height: 72px;
  padding: 11px;
  background: #fff9e8;
  border: 3px solid var(--navy-900);
  border-radius: 9px;
}

.v1-two-year-journey span,
.v1-two-year-journey strong {
  display: block;
}

.v1-two-year-journey span {
  color: var(--muted);
  font-size: 11px;
}

.v1-two-year-journey i {
  color: var(--green-600);
  font-size: 24px;
  font-style: normal;
  font-weight: 900;
}

.v1-ng-score {
  display: grid;
  gap: 4px;
  margin-top: 10px;
  padding: 12px;
  background: #fff5c9;
  border: 3px solid var(--navy-900);
  border-radius: 9px;
}

.v1-ng-score span,
.v1-ng-score small {
  color: var(--muted);
  font-size: 11px;
}

.v1-ng-score strong {
  font-size: 18px;
}

.v1-ng-promises {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.v1-ng-promises span {
  padding: 5px 8px;
  font-size: 11px;
  font-weight: 850;
  background: #e8f7ed;
  border: 1px solid #9bc7a9;
  border-radius: 999px;
}

.income-history-cards {
  display: none;
  gap: 7px;
}

.income-history-card summary {
  display: grid;
  grid-template-columns: 0.8fr 1fr 1fr;
  gap: 6px;
  align-items: center;
  list-style-position: inside;
}

.income-history-card summary span:nth-of-type(2),
.income-history-card summary b {
  text-align: right;
}

.income-history-card > div {
  display: grid;
  gap: 5px;
  padding: 0 10px 10px;
}

.income-history-card > div span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 6px 8px;
  background: white;
  border: 1px solid #d6e2dd;
}

.v9-score-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 18px 0;
}

.v9-score-grid > div {
  padding: 14px;
  background: #fffdf8;
  border: 2px solid #244b64;
  border-radius: 12px;
}

.v9-score-grid span,
.v9-score-grid strong {
  display: block;
}

.v9-score-grid span {
  color: #667e8b;
  font-size: 13px;
}

.v9-score-grid strong {
  margin-top: 4px;
  font-size: 22px;
}

.v9-score-name {
  display: grid;
  gap: 7px;
  margin: 16px 0;
  font-weight: 800;
}

.v9-score-name input {
  min-height: 50px;
  padding: 10px 12px;
  font: inherit;
  border: 2px solid #244b64;
  border-radius: 9px;
}

.v9-revelation {
  font-weight: 700;
  line-height: 1.7;
}

.v9-quote {
  margin: 16px 0;
  padding: 14px 16px;
  font-weight: 850;
  background: #effaf3;
  border-left: 5px solid #4fbd83;
}

.world-event-card {
  position: absolute;
  z-index: 5;
  top: 45px;
  right: 10px;
  display: grid;
  gap: 2px;
  width: min(258px, 62%);
  padding: 9px 11px 10px;
  color: white;
  pointer-events: none;
  background: rgba(16, 43, 61, 0.94);
  border: 3px solid #fffdf5;
  border-right-color: var(--green-300);
  border-bottom-color: var(--green-300);
  border-radius: 7px;
  box-shadow: 4px 4px 0 rgba(7, 29, 43, 0.76);
  animation: world-card-in 220ms steps(3, end) both;
}

.world-event-card span,
.world-event-card strong,
.world-event-card small {
  overflow-wrap: anywhere;
  text-shadow: none;
}

.world-event-card span {
  color: var(--green-300);
  font: 900 8px/1.25 var(--font-pixel);
  letter-spacing: 0.07em;
}

.world-event-card strong {
  font: 950 clamp(13px, 2.2vw, 20px)/1.2 var(--font-pixel);
  letter-spacing: 0.02em;
}

.world-event-card small {
  color: #e4f4eb;
  font-size: clamp(9px, 1.35vw, 12px);
  font-weight: 800;
  line-height: 1.35;
}

.world-event-card[data-tone="xircle"] {
  color: #fff8d8;
  background: rgba(31, 49, 76, 0.96);
  border-color: #f1be47 #68aee1 #65bd86 #ef8f75;
}

.world-event-card[data-tone="xircle"] span {
  color: #f1be47;
}

.world-event-card[data-tone="travel"] {
  color: var(--navy-950);
  background: rgba(255, 248, 223, 0.97);
  border-color: var(--navy-950) var(--blue-500) var(--blue-500) var(--navy-950);
}

.world-event-card[data-tone="travel"] span,
.world-event-card[data-tone="travel"] small {
  color: var(--navy-700);
}

.world-event-card[data-tone="finale"] {
  color: #fff9dc;
  background: rgba(23, 56, 79, 0.97);
  border-color: var(--gold-300);
}

.v1-auto-plan {
  display: grid;
  grid-template-columns: minmax(180px, 1fr) auto;
  gap: 12px;
  align-items: center;
  margin: 12px 0;
  padding: 11px 12px;
  background: #edf8f1;
  border: 2px solid #a9ceb7;
  border-radius: 10px;
}

.v1-auto-plan > div:first-child span,
.v1-auto-plan > div:first-child strong {
  display: block;
}

.v1-auto-plan > div:first-child span {
  color: var(--green-600);
  font-size: 12px;
  font-weight: 900;
}

.v1-auto-plan > div:first-child strong {
  margin-top: 2px;
  font-size: 12px;
}

.v1-org-rhythm .is-xircle {
  color: #fff7d5;
  background: #273f58;
  border-color: #f1be47;
}

.v1-report-headline small {
  display: block;
  margin-top: 3px;
  color: #d8ede1;
  font-size: 10px;
  font-weight: 800;
}

.v1-flow-section {
  margin: 11px 0;
  padding: 10px;
  background: #f8fbf8;
  border: 2px solid #d0ddd7;
  border-radius: 10px;
}

.v1-flow-section h3 {
  margin: 0 0 7px;
  color: var(--navy-900);
  font-size: 13px;
}

.v1-flow-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(72px, 1fr));
  gap: 5px;
  overflow-x: auto;
  scrollbar-width: thin;
}

.v1-flow-grid > div {
  min-width: 72px;
  padding: 8px 6px;
  text-align: center;
  background: white;
  border: 1px solid #c9d9d2;
  border-radius: 7px;
}

.v1-flow-grid span,
.v1-flow-grid b {
  display: block;
}

.v1-flow-grid span {
  min-height: 30px;
  color: var(--muted);
  font-size: 10px;
  line-height: 1.25;
}

.v1-flow-grid b {
  margin-top: 3px;
  color: var(--green-600);
  font-size: 16px;
}

.v1-flow-grid .is-warning b { color: #ad7719; }
.v1-flow-grid .is-loss b { color: var(--coral-600); }
.v1-flow-grid .is-comeback b { color: #337ca1; }
.v1-flow-grid .is-net { background: var(--navy-900); border-color: var(--navy-950); }
.v1-flow-grid .is-net span { color: #bde7cd; }
.v1-flow-grid .is-net b { color: white; }

.v1-xircle-bonus {
  position: relative;
  display: grid;
  grid-template-columns: minmax(150px, 0.7fr) 1.3fr;
  gap: 12px;
  margin: 13px 0;
  padding: 14px;
  overflow: hidden;
  color: #fff8d8;
  background: linear-gradient(135deg, #20364e, #315b72 60%, #2f7359);
  border: 3px solid #f1be47;
  border-radius: 11px;
  box-shadow: 0 4px 0 #142b3d;
}

.v1-xircle-bonus::after {
  content: "";
  position: absolute;
  right: 12px;
  bottom: 10px;
  width: 24px;
  height: 24px;
  opacity: 0.45;
  background: conic-gradient(from 45deg, #f1be47 0 25%, #68aee1 0 50%, #ef8f75 0 75%, #65bd86 0);
  transform: rotate(45deg);
}

.v1-xircle-bonus span,
.v1-xircle-bonus strong {
  display: block;
  font-family: var(--font-pixel);
}

.v1-xircle-bonus span {
  color: #f1be47;
  font-size: 10px;
}

.v1-xircle-bonus strong {
  margin-top: 5px;
  font-size: 15px;
}

.v1-xircle-bonus ul {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0 34px 0 0;
  list-style: none;
  font-size: 11px;
  font-weight: 750;
}

.v1-travel-reward {
  display: grid;
  gap: 2px;
  margin: 13px 0;
  padding: 13px 15px;
  color: var(--navy-950);
  background: linear-gradient(120deg, #fff8df 0 65%, #bfe9f1 65%);
  border: 3px solid var(--navy-900);
  border-radius: 10px;
  box-shadow: 0 4px 0 var(--blue-500);
}

.v1-travel-reward span { color: var(--blue-500); font: 900 10px var(--font-pixel); }
.v1-travel-reward strong { font: 950 24px var(--font-pixel); }
.v1-travel-reward small { color: var(--muted); font-weight: 750; }

.v1-income-mini {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.v1-income-mini span {
  display: flex;
  justify-content: space-between;
  gap: 7px;
  padding: 8px;
  background: white;
  border: 1px solid #d4dfda;
  border-radius: 6px;
  font-size: 11px;
}

.v1-trip-stamps {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 12px 0;
}

.v1-trip-stamps > span {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  font: 900 11px var(--font-pixel);
  background: #e7f5f7;
  border: 2px solid var(--navy-900);
  border-radius: 7px;
}

.v1-trip-stamps small {
  color: var(--muted);
  font: 800 9px var(--font-pixel);
}

.v1-trip-stamps .is-empty {
  color: var(--muted);
  font-family: var(--font-thai);
  font-weight: 700;
  background: #f5f5f1;
  border-color: #cbd5d1;
}

.dialog-button--ghost {
  width: 100%;
  margin-top: 9px;
  color: var(--muted);
  background: transparent;
  border-color: #c9d5d0;
  box-shadow: none;
}

.v1-finale-actions {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

@keyframes world-card-in {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes scene-enter {
  0% { opacity: 0.35; }
  100% { opacity: 1; }
}

@keyframes release-month-pass {
  0% { filter: brightness(1); transform: translateX(0); }
  45% { filter: brightness(1.15); transform: translateX(-3px); }
  100% { filter: brightness(1); transform: translateX(0); }
}

@keyframes release-ng-transition {
  0% { opacity: 0; transform: scale(0.92); }
  35%, 75% { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.04); }
}

@media (max-width: 640px) {
  .game-header {
    flex-wrap: wrap;
    gap: 7px;
  }

  .header-tools {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    width: 100%;
  }

  .tool-button,
  .audio-control {
    width: 100%;
  }

  .audio-control__main {
    min-width: 0;
  }

  .audio-menu {
    right: 0;
  }

  .action-dock {
    position: static;
  }

  .game-dialog {
    max-height: calc(100svh - 14px);
  }

  .game-dialog__content,
  .game-dialog[data-kind="wide"] .game-dialog__content {
    padding: 15px 15px calc(18px + env(safe-area-inset-bottom));
  }

  .revenue-hero,
  .v1-report-headline {
    grid-template-columns: 1fr 1fr;
  }

  .revenue-hero > div,
  .v1-report-headline > div {
    padding: 9px;
  }

  .income-history-cards {
    display: grid;
  }

  .income-history-table {
    display: none;
  }

  .v1-revelation-story {
    grid-template-columns: 1fr 1fr;
  }

  .v1-revelation-story i {
    display: none;
  }

  .v1-two-year-journey {
    grid-template-columns: 1fr;
  }

  .v1-two-year-journey i {
    transform: rotate(90deg);
    text-align: center;
  }

  .v9-score-grid {
    grid-template-columns: 1fr;
  }

  .v9-score-grid strong {
    font-size: 19px;
  }

  .world-event-card {
    top: 36px;
    right: 6px;
    width: min(220px, 68%);
    padding: 7px 8px;
    border-width: 2px;
    box-shadow: 3px 3px 0 rgba(7, 29, 43, 0.72);
  }

  .world-event-card span { font-size: 7px; }
  .world-event-card strong { font-size: 12px; }
  .world-event-card small { font-size: 9px; }

  .v1-auto-plan,
  .v1-xircle-bonus {
    grid-template-columns: 1fr;
  }

  .v1-auto-plan .v1-org-rhythm {
    margin-top: 0;
  }

  .v1-flow-grid {
    grid-template-columns: repeat(7, 82px);
    scroll-snap-type: x proximity;
  }

  .v1-flow-grid > div {
    scroll-snap-align: start;
  }

  .v1-income-mini,
  .v1-finale-actions {
    grid-template-columns: 1fr;
  }

  .v1-travel-reward strong {
    font-size: 20px;
  }
}

@media (max-width: 370px) {
  .status-item--income strong {
    font-size: 10px;
  }

  .v1-org-grid,
  .v1-finale-grid {
    grid-template-columns: 1fr;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.is-ng-transition::before {
    animation: none;
    opacity: 1;
  }

  .world-event-card {
    animation: none;
  }
}

/* Layout and input comfort shared by both years. */
.game-header { padding: 4px 0 10px; border-bottom: 1px solid #b7d9d42b; }
.game-shell { width: min(1280px, calc(100% - 32px)); }
.goal-card { background: #fffaf0; border-width: 2px; }
.goal-card h2 { text-wrap: pretty; }
.dialogue-card, .action-dock { border-width: 2px; }
.action-button { min-height: 62px; transition: background-color 140ms, transform 140ms; }
.action-button:hover:not(:disabled) { filter: brightness(1.04); }
.action-button:active:not(:disabled) { transform: translateY(2px); }
.action-button__copy { min-width: 0; }
.action-button__copy strong { text-wrap: pretty; }
.world-frame__label { max-width: calc(100% - 18px); font-size: 9px; border: 1px solid #d1e0c88c; background: #213f42eb; }
.world-frame__label span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.status-item { min-width: 0; }
.status-item strong, #hudIncome { overflow: visible; white-space: normal; text-overflow: clip; overflow-wrap: anywhere; }
#hudIncome { font-size: clamp(12px, 1.15vw, 16px); line-height: 1.5; }
.game-footer { color: #c1d3d5; }
.game-footer p { color: #c1d3d5; }
.game-footer a { color: #b7e9d2; }
.game-footer a:hover { color: #fff4c5; }
.game-dialog h2[tabindex="-1"]:focus { outline: none; }
.team-output summary { cursor: pointer; padding: 12px 0; }
.team-output:not([open]) { padding-block: 0; }
.people-tabs button { min-height: 44px; }
.people-search input { min-height: 44px; font: inherit; }
.game-dialog { overscroll-behavior: contain; }
.game-dialog::backdrop { background: #071d2bd1; backdrop-filter: blur(5px); }
.game-dialog input:focus-visible { outline: 3px solid #247758; outline-offset: 2px; }
@media (min-width: 901px) {
  .game-layout__world { position: sticky; top: 16px; }
  .game-layout__controls { position: static; }
  #gameApp[data-management="true"] .dialogue-card { max-height: min(520px, 55svh); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
}
@media (max-width: 900px) {
  .game-layout { grid-template-columns: minmax(0, 1fr); }
  .game-layout__controls { position: static; }
  .game-shell { width: calc(100% - 20px); }
  #hudIncome { font-size: 13px; }
}
@media (max-width: 590px) {
  .game-shell { width: calc(100% - 16px); }
  .game-header { gap: 8px; }
  .header-tools { gap: 5px; }
  .goal-card { min-height: 0; padding: 13px 14px 16px; }
  .goal-card h2 { font-size: 21px; line-height: 1.45; }
  .goal-card p { font-size: 13px; }
  .world-frame { border-width: 2px; }
  .action-button { min-height: 60px; }
  .action-dock { padding: 12px; }
  .dialogue-card { padding: 14px; }
  .game-footer { line-height: 1.65; }
}
@media (prefers-reduced-motion: reduce) {
  .action-button { transition: none; }
}