: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; }
}

/* Choice discovery and a calmer, more tactile game surface. */
:root {
  --ease-out: cubic-bezier(.2, .75, .25, 1);
}
.status-strip {
  border-width: 2px;
  background: linear-gradient(180deg, #ffffff, #fffaf0);
}
.goal-card {
  background: radial-gradient(ellipse at 100% 0%, #e3f3d8 0, transparent 58%), #fffaf0;
}
.world-frame {
  border-color: #87a897;
  box-shadow: 0 5px 0 #071d2b, 0 18px 45px #061d2b45, 0 0 0 1px #cbe4b21a;
}
.world-frame::before {
  box-shadow: inset 0 0 0 2px #fff4d338, inset 0 -24px 28px -24px #102b3d80;
}
.world-frame__label { padding: 6px 9px; backdrop-filter: blur(6px); }
.world-event-card { border-width: 2px; padding: 11px 13px; }
.world-event-card strong { line-height: 1.4; }
.world-event-card small { font-weight: 600; line-height: 1.55; }
.dialogue-card > p { line-height: 1.7; }
.action-dock { background: linear-gradient(180deg, #fffdf8, #f4f6ed); }
.action-dock__heading { flex-wrap: wrap; row-gap: 3px; }
.action-dock__heading small { font-size: 11px; }
.action-button {
  padding: 11px 12px;
  border-width: 2px;
  transition: transform 140ms var(--ease-out), box-shadow 140ms var(--ease-out), background-color 140ms;
}
.action-button--primary { background: linear-gradient(145deg, #b0eac0, #8ed9aa); }
.action-button--secondary { background: linear-gradient(145deg, #fffdf5, #fff3d9); }
.action-button__copy strong { line-height: 1.5; }
.action-button__copy small { font-size: 11px; line-height: 1.55; }
.action-button__icon { box-shadow: inset 0 1px 0 #ffffff33; }
.action-button__cost { font-size: 10px; padding: 5px 7px; background: #a94b46; }
.action-button:disabled {
  opacity: 1;
  color: #62716c;
  background: #e9eeea;
  border-color: #92a49a;
  box-shadow: 0 2px 0 #92a49a;
  filter: none;
}
.action-button:disabled .action-button__copy small { color: #62716c; }
.action-button:disabled .action-button__icon { background: #6b7f77; border-color: #62766e; }
.action-button:disabled .action-button__cost { background: #6b7f77; }
.action-button.is-guided::after { animation-iteration-count: 3; }
.action-button__category {
  display: block;
  margin-bottom: 2px;
  color: #35664f;
  font-size: 10px;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: .035em;
  text-transform: uppercase;
}
.choice-guide {
  margin-bottom: 15px;
  padding: 15px;
  color: var(--navy-900);
  background: linear-gradient(145deg, #eef9ef, #fff9e6);
  border: 1px solid #b0d4b5;
  border-left: 4px solid #408c63;
  border-radius: 9px;
}
.choice-guide h3, .choice-guide strong { color: #205a42; }
.choice-guide h3 { margin: 0; font-size: 16px; line-height: 1.55; }
.choice-guide p { margin: 6px 0 0; font-size: 13px; line-height: 1.75; }
.choice-guide__steps {
  display: grid;
  gap: 9px;
  margin: 12px 0;
  padding-left: 20px;
  font-size: 12px;
  line-height: 1.7;
}
.choice-guide__steps li::marker { color: #347856; font-weight: 800; }
.choice-guide__actions, .choice-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.choice-guide__actions { margin-top: 13px; }
.choice-guide__actions button, .choice-toolbar button {
  min-height: 44px;
  min-width: 44px;
  padding: 10px 12px;
  font: 700 12px/1.55 var(--font-thai);
  color: #285e48;
  white-space: normal;
  background: #fffefa;
  border: 1px solid #9ebfae;
  border-radius: 7px;
  cursor: pointer;
  transition: background-color 140ms, transform 140ms var(--ease-out);
}
.choice-guide__actions button:hover, .choice-toolbar button:hover { background: #e5f2e8; }
.choice-guide__actions button:active, .choice-toolbar button:active { transform: translateY(1px); }
.choice-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  margin-top: 15px;
  padding-top: 12px;
  border-top: 1px solid #ccdcd0;
}
.choice-toolbar .choice-toolbar__more {
  color: #20563d;
  font-size: 13px;
  background: #f0f8ed;
  border: 2px solid #4d8867;
}
.choice-toolbar .choice-toolbar__more:hover { background: #dff0dd; }
.choice-toolbar p { grid-column: 1 / -1; margin: 0; color: var(--muted); font-size: 11px; line-height: 1.65; }
.month-review-note {
  padding: 14px 16px;
  color: #625020;
  font-size: 14px;
  line-height: 1.75;
  background: #fff6da;
  border: 1px solid #e1c577;
  border-radius: 9px;
}
.month-review-opportunities { margin: 14px 0; padding-left: 24px; font-size: 14px; line-height: 1.8; }
.month-review-opportunities li + li { margin-top: 7px; }
.month-review-opportunities li::marker { color: #4b8e65; }
@keyframes scene-enter {
  from { opacity: .55; transform: translateY(3px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes world-card-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}
.world-frame.is-changing canvas { animation-timing-function: var(--ease-out); }
.world-event-card { animation-duration: 280ms; animation-timing-function: var(--ease-out); }
@media (hover: none) {
  .action-button:hover:not(:disabled) { transform: none; filter: none; }
  .action-button:active:not(:disabled) { transform: translateY(2px); }
}
@media (max-width: 590px) {
  .choice-guide { padding: 12px; }
  .choice-guide__actions button { flex: 1 1 120px; }
  .action-button { padding: 10px; }
  .action-button__cost { padding-inline: 5px; }
  .world-event-card { padding: 8px 10px; }
  .world-event-card small { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .action-button, .choice-guide__actions button, .choice-toolbar button { transition: none; }
  .world-frame.is-changing canvas, .world-event-card, .action-button.is-guided::after { animation: none; }
}
.dialogue-card > p { font-weight: 400; }
.goal-card p { font-weight: 400; line-height: 1.7; }
.action-button__copy strong { font-weight: 700; }
.action-button__copy small { font-weight: 400; }
.choice-guide > strong { display: block; font-size: 15px; line-height: 1.6; }
.choice-guide__steps { padding: 0; }
.choice-guide__steps p { margin: 0; font-size: 12px; font-weight: 400; }
.choice-guide__steps b { display: block; margin-bottom: 1px; font-weight: 700; }
.choice-guide__actions .dialog-button { flex: 1 1 160px; width: auto; margin: 0; box-shadow: none; }
.choice-guide__actions [data-choice-work] { color: #fffdf5; background: #286146; border-color: #286146; }
.choice-guide__actions [data-choice-work]:hover { background: #1f5039; }
.choice-toolbar__more span { margin-left: 6px; }

/* Mobile audit: keep helper text readable and bring choices nearer the fold. */
.action-button__copy small { color: #2d5660; }
.action-button__category { color: #285542; }
.action-button:disabled, .action-button:disabled .action-button__copy small { color: #586760; }
.skip-link:not(:focus-visible) { visibility: hidden; }
.skip-link:focus-visible { visibility: visible; transform: translateY(0); }
.choice-feedback {
  margin: 0 0 12px;
  padding: 10px 12px;
  color: #285542;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.65;
  background: #eaf5eb;
  border-left: 3px solid #6caa80;
  border-radius: 5px;
}
@media (max-width: 590px) {
  #gameApp[data-management="true"] .status-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #gameApp[data-management="true"] .status-item { min-height: 50px; padding: 6px 9px; }
  #gameApp[data-management="true"] .status-item--energy { grid-column: span 2; }
  #gameApp[data-management="true"] .status-item--customers { border-top: 0; }
  #gameApp[data-management="true"] #hudXVButton { border-top: 0; }
  #gameApp[data-management="true"] .status-item--income { border-top: 0; }
  #gameApp[data-management="true"] .status-item strong { font-size: 13px; line-height: 1.5; }
  #gameApp[data-management="true"] .status-item span { font-size: 10px; line-height: 1.45; }
  #gameApp[data-management="true"] #hudIncome { font-size: 12px; }
  #gameApp[data-management="true"] .goal-card { padding: 10px 12px 13px; margin-bottom: 10px; }
  #gameApp[data-management="true"] .goal-card h2 { font-size: 20px; }
  #gameApp[data-management="true"] .goal-card p { font-size: 12px; line-height: 1.6; margin-top: 3px; }
}

/* 1.1 · Growth Edition: illustrated world, readable progress, all 24 months. */
:root {
  --navy-950: #102c35;
  --navy-900: #1c4148;
  --navy-800: #2b5960;
  --green-600: #267356;
  --muted: #526b6f;
  --panel: #fffef9;
  --radius: 18px;
  --shadow: 0 2px 3px #0b272022, 0 12px 36px #08282017;
}
body {
  background:
    radial-gradient(ellipse at 12% 0, #36746f 0, transparent 42%),
    radial-gradient(ellipse at 95% 48%, #234f55 0, transparent 55%), #122f37;
}
.game-shell { width: min(1440px, calc(100% - 40px)); }
.game-header { margin-bottom: 16px; padding-bottom: 16px; }
.header-tools { flex-wrap: wrap; gap: 8px; }
.tool-button { border-width: 1px; border-color: #c8e6de66; border-radius: 10px; min-height: 42px; }
.tool-button--history { color: #183f39; background: #e1f5de; border-color: #c2e9bc; }
.brand-lockup h1 { letter-spacing: .08em; }
.status-strip { border: 1px solid #bfd5c5; border-radius: 16px; box-shadow: var(--shadow); }
.status-item { padding: 12px 15px; }
.status-item strong { font-family: var(--font-thai); font-weight: 750; }
.rank-row { flex-wrap: wrap; margin-block: 12px; gap: 8px; }
.rank-chip { border: 1px solid #203e4566; border-radius: 8px; box-shadow: none; }
.goal-card { background: linear-gradient(125deg, #fffef8, #f1f6e7); border: 1px solid #b6ccbd; }
.goal-card h2 { line-height: 1.4; letter-spacing: -.025em; }
.goal-progress { height: 5px; }
.goal-progress i { background: linear-gradient(90deg, #63c993, #bedc8d); transition: width 320ms ease-out; }
.world-frame { border: 1px solid #bdcfc288; border-radius: 20px; box-shadow: 0 8px 32px #071e2938; }
.world-frame::before { box-shadow: inset 0 0 0 1px #fff8df55; border-radius: inherit; }
.world-frame__label { border: 1px solid #e4eed15c; border-radius: 8px; background: #183d42e8; font-size: 9px; letter-spacing: .035em; }
#worldCanvas { image-rendering: auto; }
.world-frame.is-changing canvas { animation: scene-enter 240ms ease-out; }
.world-event-card { border-width: 1px; border-radius: 12px; box-shadow: 0 5px 22px #102f3433; }
.dialogue-card, .action-dock { border: 1px solid #bacfc1; border-radius: 18px; padding: 18px; }
.dialogue-card__speaker { border-radius: 7px; font-size: 11px; padding: 5px 10px; letter-spacing: .025em; }
.action-dock__heading { gap: 10px; align-items: baseline; }
.action-dock__heading small { text-align: right; line-height: 1.5; }
.action-button { border-width: 1px; border-radius: 12px; box-shadow: 0 3px 0 #204c433d; padding: 13px; }
.action-button--primary { background: linear-gradient(120deg, #d3efce, #e8f4d9); }
.action-button--primary:hover:not(:disabled) { background: #d2ebc9; }
.action-button__icon { border-width: 1px; border-radius: 9px; background: #295d53; color: #fffaf0; }
.action-button__copy strong { font-size: 14px; line-height: 1.6; }
.action-button__copy small { font-size: 11px; line-height: 1.65; }
.action-button__cost { color: #37624d; background: #ffffffa6; border: 1px solid #7dab8d55; border-radius: 6px; font-size: 11px; }
.action-button__category { color: #376c51; font-size: 10px; letter-spacing: .035em; }
.work-button, .people-card, .skill-card, .management-board > div, .summary-grid .result-card { border-width: 1px; border-radius: 12px; box-shadow: none; }
.game-dialog { border: 1px solid #d3e1d0; border-radius: 20px; box-shadow: 0 24px 90px #001a2370; }
.game-dialog__content { padding: 26px; }
.dialog-button { border-width: 1px; border-radius: 10px; box-shadow: 0 2px 0 #122f3530; }
.waiting-state { position: relative; overflow: hidden; border: 1px solid #b8d8c4; border-radius: 12px; background: #edf5e5; padding: 16px; font-size: 13px; }
.waiting-state::after { content: ""; position: absolute; bottom: 0; left: 0; height: 3px; width: 100%; transform-origin: left; background: #6aa77c; animation: event-progress 1100ms linear both; }
@keyframes event-progress { from { transform: scaleX(.03); } to { transform: scaleX(1); } }

/* Year 2 grids must shrink with the panel, including large income amounts. */
.game-layout, .game-layout__world, .game-layout__controls, .dialogue-card, #sceneDetails,
.v1-org-report, .v1-flow-section, .v1-auto-plan, .v1-report-headline > div,
.v1-income-mini > *, .v1-xircle-bonus > *, .game-dialog__content { min-width: 0; max-width: 100%; }
.v1-auto-plan { grid-template-columns: minmax(0, 1fr); border-width: 1px; gap: 4px; }
.v1-auto-plan strong, .v1-org-rhythm span, .v1-report-headline strong,
.v1-finale-grid strong, .v1-income-mini b, .v1-flow-grid b { overflow-wrap: anywhere; }
.v1-org-rhythm { gap: 5px; }
.v1-org-rhythm span { font-size: 11px; }
.v1-flow-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); overflow: visible; gap: 7px; }
.v1-flow-grid > div { min-width: 0; padding: 10px 6px; border-radius: 10px; }
.v1-flow-grid span { min-height: 0; margin-bottom: 5px; font-size: 11px; line-height: 1.45; }
.v1-flow-grid b { font-size: 17px; }
.v1-flow-grid .is-net { grid-column: span 2; }
.v1-report-headline > div { border-width: 1px; border-radius: 12px; box-shadow: none; }
.v1-rhythm-details { margin-block: 14px; border: 1px solid #bfd6c8; border-radius: 12px; padding: 12px; }
.v1-rhythm-details summary { cursor: pointer; font-size: 13px; font-weight: 700; line-height: 1.6; }
body[data-organization="true"] #gameApp .dialogue-card { max-height: none; overflow: visible; }
body[data-organization="true"] .status-strip { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.growth-summary { margin: 16px 0; padding: 18px; background: linear-gradient(135deg, #edf6e8, #fff9e8); border: 1px solid #b6d0b9; border-radius: 16px; }
.growth-summary h3 { margin: 0 0 7px; color: #244e40; font-size: 17px; line-height: 1.55; }
.growth-summary p { font-size: 13px; line-height: 1.75; color: #426358; }
.growth-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; margin: 12px 0; }
.growth-metric { min-width: 0; background: #ffffffba; border: 1px solid #d5e3d2; border-radius: 12px; padding: 12px; }
.growth-metric span, .growth-metric strong, .growth-metric small { display: block; overflow-wrap: anywhere; }
.growth-metric span { color: #587060; font-size: 12px; }
.growth-metric strong { color: #204941; margin: 4px 0; font-size: clamp(18px, 2.5vw, 24px); line-height: 1.4; }
.growth-metric small { color: #537363; font-size: 11px; line-height: 1.5; }
.growth-metric[data-trend="up"] small { color: #247252; }
.growth-metric[data-trend="down"] small { color: #9c5745; }
.history-controls { display: flex; flex-wrap: wrap; gap: 12px; margin: 18px 0; }
.history-controls label { flex: 1 1 160px; min-width: 0; font-size: 12px; font-weight: 650; color: #36594d; }
.history-controls select { display: block; width: 100%; min-height: 44px; margin-top: 7px; border: 1px solid #b6d0bf; border-radius: 9px; padding: 8px; background: #fffef9; color: var(--ink); font: inherit; }
.history-chart { margin: 16px 0; width: 100%; min-width: 0; border: 1px solid #d5e0d2; border-radius: 14px; padding: 12px; background: #fbfdf8; }
.history-chart svg { display: block; width: 100%; height: auto; overflow: visible; }
.history-timeline { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 5px; margin: 14px 0; }
.history-month { min-width: 0; min-height: 40px; padding: 7px 2px; border: 1px solid #b9d1c1; border-radius: 7px; background: #edf5e9; color: #305740; font: 650 12px var(--font-thai); cursor: pointer; }
.history-month[aria-current="true"], .history-month[aria-pressed="true"] { background: #2c6950; color: #fffdf7; border-color: #2c6950; }
.history-month:disabled { background: #f1f0e9; color: #89948c; border-color: #e1e4dc; cursor: default; }
.income-contribution { min-width: 0; margin: 10px 0; padding: 13px; border: 1px solid #c5d7c7; border-radius: 11px; background: #fffef9; }
.income-contribution strong, .income-contribution b { overflow-wrap: anywhere; }
.income-contribution p { margin: 6px 0 0; font-size: 12px; line-height: 1.7; color: #526b60; }
.growth-summary__heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.growth-summary__heading > div { min-width: 0; }
.growth-summary__heading > div > span { color: #48775b; font-size: 10px; letter-spacing: .07em; font-weight: 750; }
.growth-summary__heading .dialog-button { width: auto; margin: 0; min-height: 40px; padding: 8px 10px; font-size: 11px; }
.growth-summary__note { margin-bottom: 0; font-size: 11px !important; }
.income-contribution { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.income-contribution__channel { min-width: 0; --channel-color: #44895c; }
.income-contribution__channel[data-channel="channel2"] { --channel-color: #468394; }
.income-contribution__channel[data-channel="channel3"] { --channel-color: #ac8538; }
.income-contribution__channel > span { display: block; color: #4d6d5b; font-size: 11px; }
.income-contribution__channel strong { display: block; font-size: 17px; margin: 4px 0 8px; color: #23473d; }
.income-contribution__channel i { display: block; position: relative; height: 6px; background: #e5eddf; border-radius: 9px; overflow: hidden; }
.income-contribution__channel i::after { content: ""; display: block; width: var(--channel-share); height: 100%; background: var(--channel-color); border-radius: inherit; }
.income-contribution__channel small { display: block; margin-top: 5px; font-size: 10px; line-height: 1.5; color: #5b7366; }
.history-timeline { padding: 14px 10px; border: 1px solid #d3e1ce; border-radius: 14px; background: #f7faf0; }
.history-month { height: 116px; display: flex; flex-direction: column; justify-content: end; align-items: center; gap: 7px; border: 0; background: transparent; border-radius: 5px; padding: 7px 3px; }
.history-month > i { display: block; width: 74%; min-height: 3px; height: calc(var(--income-height) * .75); background: #91c798; border-radius: 4px 4px 1px 1px; flex-shrink: 0; }
.history-month:disabled > i { background: #d5dfcc; }
.history-month[aria-pressed="true"] > i { background: #cae4af; }
.history-month > span { font-size: 11px; }
.income-history-cards { display: grid; gap: 8px; }
.income-history-card { border: 1px solid #c9dccc; border-radius: 12px; min-width: 0; padding: 0; }
.income-history-card summary { padding: 13px; font-size: 12px; gap: 10px; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; }
.income-history-card summary span, .income-history-card summary b { min-width: 0; overflow-wrap: anywhere; }
.income-history-card > .income-history-card__detail { display: block; padding: 0 13px 13px; }
.income-history-card__detail > p { font-size: 12px; line-height: 1.7; }
.income-history-card__detail > .dialog-button { width: auto; padding: 9px 12px; font-size: 12px; }
.month-summary-more, .organization-detail { border: 1px solid #cedfc9; border-radius: 12px; margin: 12px 0; padding: 13px; background: #fffef7; }
.month-summary-more > summary, .organization-detail > summary { cursor: pointer; font-weight: 700; font-size: 13px; line-height: 1.7; }
.month-summary-more > section { margin-top: 14px; }

@media (min-width: 901px) {
  body[data-organization="true"] .game-layout { grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); }
}
@media (max-width: 640px) {
  .game-shell { width: calc(100% - 18px); }
  .game-header { margin-bottom: 11px; padding-bottom: 11px; }
  .header-tools { display: flex; width: 100%; flex-wrap: wrap; gap: 6px; }
  .header-tools > .tool-button, .header-tools > .audio-control { flex: 1 1 65px; width: auto; min-width: 0; }
  .header-tools > .tool-button--history { flex-basis: 100%; min-height: 38px; }
  .game-layout { gap: 14px; }
  .dialogue-card, .action-dock { padding: 14px; }
  .action-button { padding: 11px; }
  .world-frame { border-radius: 16px; }
  body[data-organization="true"] #gameApp .status-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body[data-organization="true"] .v1-flow-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .v1-report-headline { grid-template-columns: minmax(0, 1fr); }
  .growth-summary { padding: 13px; }
  .growth-metric { padding: 10px; }
  .history-timeline { grid-template-columns: repeat(6, minmax(0, 1fr)); }
  .history-controls { gap: 9px; }
  .history-controls label { flex-basis: 130px; }
  .income-contribution { grid-template-columns: minmax(0, 1fr); gap: 13px; }
  .income-contribution__channel { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; align-items: baseline; }
  .income-contribution__channel strong { margin: 0; font-size: 17px; text-align: right; }
  .income-contribution__channel i, .income-contribution__channel small { grid-column: 1 / -1; }
  .history-month { height: 84px; }
  .history-month > i { height: calc(var(--income-height) * .52); }
  .income-history-card summary { grid-template-columns: minmax(0, 1fr) auto; }
  .income-history-card summary span:nth-of-type(2) { display: none; }
  .game-dialog, .game-dialog[data-kind="wide"] { max-width: calc(100vw - 16px); max-height: calc(100svh - 12px); }
}
@media (max-width: 360px) {
  .growth-grid { grid-template-columns: minmax(0, 1fr); }
  .action-button__copy strong { font-size: 13px; }
  .v1-flow-grid b { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  .waiting-state::after { animation: none; transform: scaleX(1); }
  .goal-progress i { transition: none; }
  .world-frame.is-changing canvas { animation: none; }
}

/* Keep comparison controls stable and the exit within reach in long histories. */
.game-dialog[open] { animation-timing-function: ease-out; }
.history-dialog-nav { position: sticky; top: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 0; margin-bottom: 14px; background: var(--panel); border-bottom: 1px solid #d7e3d3; }
.history-dialog-nav > span { font-size: 12px; font-weight: 750; color: #486a57; }
.history-close { flex: 0 0 auto; min-height: 40px; padding: 8px 12px; border: 1px solid #b3cdb5; border-radius: 9px; background: #e7f2dc; color: #28543e; font: 700 12px var(--font-thai); cursor: pointer; }
.history-close:hover { background: #d8ecca; }
.income-comparison > summary { cursor: pointer; padding: 10px 0; font-weight: 700; }
.income-comparison .growth-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 640px) {
  .income-comparison .growth-grid { grid-template-columns: minmax(0, 1fr); }
}

.world-event-card[data-tone="travel"] { width: min(220px, 44%); }

.game-load-status { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 16px; margin-bottom: 16px; border: 1px solid #b6ccbd; border-radius: 12px; background: #fffef9; color: #1c4148; line-height: 1.6; }
.game-load-status[hidden] { display: none; }
.game-load-status button { font: inherit; padding: 9px 12px; color: #28543e; background: #e7f2dc; border: 1px solid #b3cdb5; border-radius: 8px; cursor: pointer; }

/* Income 1.1: all three channels are visible before opening monthly details. */
.income-comparison { margin: 18px 0 12px; }
.income-comparison__heading { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; }
.income-comparison__heading h3 { margin: 0; color: #285341; font-size: 16px; }
.income-comparison__heading > span { font-size: 11px; color: #597165; }
.income-comparison .growth-grid { margin-top: 10px; }
.income-channel-card { --income-color: #44895c; border-top: 3px solid var(--income-color); padding: 14px; }
.income-channel-card[data-channel-summary="channel2"] { --income-color: #468394; }
.income-channel-card[data-channel-summary="channel3"] { --income-color: #ac8538; }
.income-channel-card .income-channel-card__number { color: var(--income-color); font-size: 11px; font-weight: 800; }
.income-channel-card h4 { margin: 7px 0 5px; color: #244b40; font-size: 14px; line-height: 1.5; }
.income-channel-card > strong { margin: 8px 0; font-size: clamp(20px, 2.5vw, 27px); }
.income-channel-card .income-channel-card__rule { font-size: 10px; line-height: 1.5; }
.income-channel-card__comparison { border-top: 1px solid #dde7d8; margin-top: 10px; padding-top: 9px; }
.income-channel-card p { margin: 9px 0 0; color: #597164; font-size: 10px; line-height: 1.6; }
.income-role-insight { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 5px 12px; padding: 13px 15px; border: 1px solid #c9dbc4; border-radius: 12px; background: #edf5e7; }
.income-role-insight > span { font-size: 12px; color: #41674f; align-self: center; }
.income-role-insight > strong { font-size: 19px; color: #244e40; }
.income-role-insight > p { grid-column: 1 / -1; font-size: 11px; line-height: 1.6; margin: 0; color: #5e7266; }
.income-channel-milestones { font-size: 11px; color: #557258; line-height: 1.6; }
.income-history-columns, .income-history-card .income-history-row { display: grid; grid-template-columns: minmax(120px, 1.35fr) repeat(4, minmax(0, 1fr)); gap: 8px; align-items: center; }
.income-history-columns { padding: 10px 12px; background: #e8f2e4; border-radius: 9px; font-size: 10px; font-weight: 750; color: #466950; margin: 10px 0 6px; }
.income-history-columns > span:not(:first-child) { text-align: right; }
.income-history-card .income-history-row { padding: 13px 12px; font-size: 12px; }
.income-history-card[data-selected="true"] { border-color: #6b9c77; box-shadow: inset 3px 0 #6b9c77; }
.income-history-card .income-history-row > * { min-width: 0; }
.income-history-card .income-history-row__month { font-weight: 750; }
.income-history-card .income-history-row small { display: block; font-size: 10px; font-weight: 500; line-height: 1.5; margin-top: 3px; color: #5e786a; }
.income-history-card .income-history-row .income-history-row__channel { display: block; text-align: right; }
.income-history-card .income-history-row__channel > small, .income-history-card .income-history-row__total > small { display: none; }
.income-history-card .income-history-row__total { text-align: right; color: #24513e; }
.income-history-card .income-history-row b { display: block; font-size: 12px; overflow-wrap: anywhere; }
.income-trend, .income-growth-more { margin: 14px 0; border: 1px solid #d1dfcb; border-radius: 11px; padding: 12px; }
.income-trend > summary, .income-growth-more > summary { cursor: pointer; font-weight: 700; color: #365d49; font-size: 12px; }
.income-trend .history-timeline { grid-template-columns: repeat(12, minmax(0, 1fr)); }
.income-trend .history-month { height: 76px; }
.income-trend .history-month > i { height: calc(var(--income-height) * .5); }
@media (max-width: 640px) {
  .income-history-columns { display: none; }
  .income-history-card .income-history-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 11px 7px; }
  .income-history-card .income-history-row__month { grid-column: 1 / 3; grid-row: 1; }
  .income-history-card .income-history-row__total { grid-column: 3; grid-row: 1; }
  .income-history-card .income-history-row .income-history-row__channel { text-align: left; grid-row: 2; border-top: 1px solid #dfE8da; padding-top: 7px; }
  .income-history-card .income-history-row__channel > small, .income-history-card .income-history-row__total > small { display: block; }
  .income-history-card .income-history-row__channel > small { color: #3c7652; font-weight: 750; margin: 0 0 3px; }
  .income-role-insight { grid-template-columns: minmax(0, 1fr); }
  .income-trend .history-timeline { grid-template-columns: repeat(6, minmax(0, 1fr)); }
}

.income-history-columns { position: sticky; top: 56px; z-index: 2; }
.income-history-card .income-history-row__month::before { content: "▸"; color: #72987a; margin-right: 6px; }
.income-history-card[open] .income-history-row__month::before { content: "▾"; }

/* Short character-led dialogue stays beside the action, in both game years. */
.story-card {
  display: grid;
  grid-template-columns: 68px minmax(0, 1fr);
  align-items: start;
  gap: 13px;
  padding: 18px;
  border: 1px solid #c6d6bd;
  border-radius: 18px;
  background: linear-gradient(120deg, #fff8e6, #fffffa);
  color: #224940;
  box-shadow: var(--shadow);
  min-width: 0;
}
.story-card[hidden], #scenePanel[hidden] { display: none; }
#storyPortrait { width: 68px; height: 68px; display: block; border-radius: 21px; box-shadow: 0 3px 0 #d5c9a850; }
.story-card__body { min-width: 0; }
.story-card .dialogue-card__speaker { padding: 0; min-height: 0; margin: 0 0 6px; color: #80632b; background: none; font-size: 12px; }
.story-card[data-speaker="customer"] { background: linear-gradient(120deg, #eaf3e8, #fffffa); }
.story-card[data-speaker="customer"] .dialogue-card__speaker { color: #327357; }
#dialogueText { margin: 0; font-size: 16px; font-weight: 600; line-height: 1.75; text-wrap: pretty; overflow-wrap: anywhere; }
#storyTip { margin: 9px 0 0; color: #627367; font-size: 12px; line-height: 1.7; }
.story-card.is-speaking .story-card__body { animation: story-enter 180ms ease-out both; }
@keyframes story-enter { from { opacity: .45; transform: translateY(3px); } to { opacity: 1; transform: none; } }
#scenePanel { min-height: 0; }
.scene-more > summary, .routine-product-help > summary { cursor: pointer; font-size: 13px; font-weight: 700; color: #365e4c; line-height: 1.6; padding-block: 4px; }
.scene-more > div { margin-top: 14px; }
.routine-choices { gap: 10px; margin-top: 0; }
.routine-choices button { border: 1px solid #b4ccbb; border-radius: 13px; padding: 15px; background: #f8fbf0; text-align: left; min-width: 0; box-shadow: 0 2px 0 #244c3617; }
.routine-choices button:hover:not(:disabled) { background: #e7f3de; border-color: #71a581; }
.routine-choices button:disabled { opacity: 1; color: #64716b; background: #f0f1eb; border-color: #d0d7cc; cursor: not-allowed; box-shadow: none; }
.routine-choice__top { display: flex!important; align-items: center; gap: 9px; margin-bottom: 6px; }
.routine-choice__top > strong { flex: 1; margin: 0!important; }
.routine-choice__top > b { font-size: 20px; }
.routine-choice__top > small { font-size: 10px; white-space: nowrap; }
.routine-choices button > span:not(.routine-choice__top), .routine-choice__next { display: block; font-size: 12px; line-height: 1.65; }
.routine-choice__next { margin-top: 7px; color: #347453; }
.routine-choice__reason { margin-top: 8px; color: #806438!important; border-top: 1px solid #cdd3c6; padding-top: 8px; }
.routine-product-help { margin-top: 13px; border-top: 1px solid #d8e2d4; padding-top: 10px; }
.routine-product-help p { font-size: 12px; line-height: 1.7; color: #647264; }
.world-event-card[data-tone="action"], .world-event-card[data-tone="action-paused"] { top: 46px; bottom: auto; left: 50%; right: auto; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px); padding: 9px 14px; background: #fffff3ed; border-color: #b8cfa6; }
.world-event-card[data-tone="action"] strong, .world-event-card[data-tone="action-paused"] strong { font-size: clamp(13px, 1.8vw, 18px); color: #275746; }
.world-event-card[data-tone="action"] small, .world-event-card[data-tone="action-paused"] small { color: #526e5d; font-size: 11px; line-height: 1.5; }
.world-event-card[data-tone="action"] > span, .world-event-card[data-tone="action-paused"] > span { display: none; }
@media (min-width: 901px) { #gameApp[data-management="true"] #scenePanel { max-height: none; overflow: visible; } }
@media (max-width: 590px) {
  .story-card { grid-template-columns: 52px minmax(0, 1fr); gap: 10px; padding: 14px; }
  #storyPortrait { width: 52px; height: 52px; border-radius: 17px; }
  #dialogueText { font-size: 14px; line-height: 1.7; }
  #storyTip { font-size: 11px; }
  .routine-choices button { padding: 12px; }
  .routine-choice__top { flex-wrap: wrap; gap: 6px; }
  .routine-choice__top > strong { font-size: 14px; }
  .world-event-card[data-tone="action"], .world-event-card[data-tone="action-paused"] { top: 37px; padding: 6px 10px; }
}
@media (prefers-reduced-motion: reduce) { .story-card.is-speaking .story-card__body { animation: none; } }

/* 2.0: short scenes stay visible beside an offscreen mobile action. */
.action-peek{position:fixed;z-index:80;top:max(10px,env(safe-area-inset-top));right:max(12px,env(safe-area-inset-right));width:min(320px,calc(100vw - 24px));overflow:hidden;border:2px solid #b48a52;border-radius:16px;background:#fff3d5;box-shadow:0 8px 30px #152e3559;pointer-events:none}
.action-peek[hidden]{display:none}.action-peek canvas{display:block;width:100%;height:auto;aspect-ratio:16/9}.action-peek>span{display:block;padding:6px 12px;color:#254942;font-size:12px;font-weight:800}.action-result{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 14px;background:#e4f2e1;border:1px solid #94b9a4;border-radius:12px;font-size:13px}.action-result button{font:inherit;font-weight:800;background:#fffbef;border:1px solid #94b9a4;border-radius:9px;padding:8px 12px;color:#24574a;cursor:pointer}.story-card[data-speaker="ako"]{background:linear-gradient(115deg,#fff3dc,#fae9dd);border-color:#d9b48e}.story-card[data-speaker="teem"]{background:linear-gradient(115deg,#fff0d3,#fff9eb);border-color:#ccac77}.story-card canvas{image-rendering:pixelated}
@media(max-width:600px){.action-peek{width:min(268px,calc(100vw - 24px))}.action-result{font-size:12px}}

.story-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}.story-choices[hidden]{display:none}.story-choice{border:1px solid #bda574;background:#fffdf5;color:#21443e;border-radius:10px;padding:10px;text-align:left;font:inherit;cursor:pointer;min-width:0}.story-choice strong{display:block;font-size:14px}.story-choice small{display:block;margin-top:3px;font-size:11px;color:#52635e}.story-choice:hover{background:#f7e8c7}.story-choice:focus-visible{outline:3px solid #439d77;outline-offset:2px}.story-choice--skip{grid-column:1/-1;justify-self:end;border:0;padding:3px 0;background:transparent}.story-choice--skip strong{font-size:11px;font-weight:500;color:#60736b}@media(max-width:420px){.story-choices{grid-template-columns:1fr}.story-choice{padding:9px 10px}}

.live-result{padding:16px;border:1px solid #9bc3a9;border-radius:16px;background:linear-gradient(120deg,#f5fbec,#e4f2e4);color:#244e42}.live-result__heading{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:space-between}.live-result__heading strong{font-size:17px}.live-result__heading span{font-size:12px}.live-result>p{font-weight:800;margin:8px 0 12px}.live-result summary{cursor:pointer;font-size:13px}.live-result__person{display:flex;gap:8px;align-items:center;justify-content:space-between;padding-top:10px;font-size:13px}.live-result__person button{font:inherit;font-size:12px;padding:7px;background:#fffdf2;border:1px solid #9bc3a9;border-radius:8px;color:#285444;cursor:pointer}.live-result__person small{font-size:11px;color:#63745f}

/* Brief results keep the reward and the next person within reach. */
.brief-results { display: grid; gap: 10px; min-width: 0; }
.brief-results[hidden] { display: none; }
.routine-sale-result {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px 10px;
  min-width: 0;
  padding: 13px 14px 10px;
  border: 1px solid #91bda2;
  border-radius: 15px;
  background: linear-gradient(115deg, #eff9e7, #e0f0e3 75%, #fbf3d4);
  box-shadow: 0 3px 12px #295d4510;
  color: #214e3a;
}
.routine-sale-result__portrait { display: block; width: 42px; height: 42px; border-radius: 13px; }
.routine-sale-result__copy { min-width: 0; }
.routine-sale-result__copy > span { display: block; color: #496b55; font-size: 10px; line-height: 1.6; }
.routine-sale-result__copy > span b { color: #27784e; }
.routine-sale-result__copy > strong { display: block; font-size: 14px; line-height: 1.55; overflow-wrap: anywhere; }
.routine-sale-result__income { min-width: 0; text-align: right; }
.routine-sale-result__income small { display: block; color: #4c6956; font-size: 10px; }
.routine-sale-result__income strong { display: block; font-size: 20px; font-weight: 800; line-height: 1.5; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.brief-results button {
  min-height: 40px;
  padding: 8px 10px;
  border: 1px solid #a7c2ac;
  border-radius: 9px;
  background: #fffdf3;
  color: #2d6045;
  font: 650 12px/1.5 var(--font-thai);
  overflow-wrap: anywhere;
  cursor: pointer;
}
.routine-sale-result > button { grid-column: 2 / -1; justify-self: end; min-height: 36px; padding: 6px 9px; background: #ffffff6b; }
.brief-results button:hover { background: #f3f7e5; border-color: #6c9c7c; }
.brief-results button:focus-visible, .month-opening-card > summary:focus-visible { outline: 3px solid #287b54; outline-offset: 3px; }
.month-opening-card { min-width: 0; border: 1px solid #c5d6bd; border-radius: 13px; background: #fafbf0; color: #315640; }
.month-opening-card > summary { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 56px; padding: 11px 13px; border-radius: 13px; cursor: pointer; list-style: none; }
.month-opening-card > summary::-webkit-details-marker { display: none; }
.month-opening-card > summary > span:first-child { min-width: 0; }
.month-opening-card > summary strong { display: block; font-size: 12px; line-height: 1.5; }
.month-opening-card > summary small { display: block; margin-top: 2px; font-size: 11px; line-height: 1.7; overflow-wrap: anywhere; }
.month-opening-card__chevron { flex: 0 0 20px; text-align: center; font-size: 20px; line-height: 1; transition: transform 140ms ease; }
.month-opening-card[open] .month-opening-card__chevron { transform: rotate(180deg); }
.month-opening-card__body { padding: 0 13px 13px; border-top: 1px solid #dde5d4; }
.month-opening-card__body p { margin: 10px 0; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.month-opening-card__counts { display: flex; flex-wrap: wrap; gap: 5px 12px; font-size: 11px; }
.month-opening-card__counts b { margin-left: 3px; font-size: 13px; }
.month-opening-card__body .month-opening-card__context { font-size: 10px; color: #596e58; }
.month-opening-card__next { color: #3c6147; }
.month-opening-card__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.month-opening-card__actions button { flex: 1 1 110px; min-width: 0; }
.month-opening-card__actions [data-month-follow-up] { color: #fffdf3; background: #35674a; border-color: #35674a; }
.month-opening-card__actions [data-month-follow-up]:hover { background: #28553b; }
.customer-base-metrics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 12px; }
.customer-base-metrics > div { min-width: 0; padding: 8px; border-radius: 10px; background: #eaf2df; }
.customer-base-metrics span { display: block; font-size: 10px; line-height: 1.6; overflow-wrap: anywhere; }
.customer-base-metrics strong { display: block; color: #2b6949; font-size: 24px; line-height: 1.4; font-variant-numeric: tabular-nums; }
.month-opening-card__opening { padding-bottom: 10px; border-bottom: 1px solid #dde5d4; }
.month-opening-card__sales small { display: block; margin-top: 4px; color: #596e58; font-size: 10px; line-height: 1.7; }
@media (max-width: 390px) {
  .routine-sale-result { grid-template-columns: 36px minmax(0, 1fr); gap: 6px 9px; padding: 11px; }
  .routine-sale-result__portrait { width: 36px; height: 36px; border-radius: 11px; }
  .routine-sale-result__copy > strong { font-size: 13px; }
  .routine-sale-result__income { grid-column: 1 / -1; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-top: 5px; }
  .routine-sale-result__income strong { font-size: 21px; }
  .routine-sale-result > button { grid-column: 1 / -1; min-height: 40px; }
  .month-opening-card > summary { padding: 10px 11px; }
  .month-opening-card__body { padding-inline: 11px; }
}
@media (prefers-reduced-motion: reduce) {
  .month-opening-card__chevron { transition: none; }
}

.income-tier-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-block: 10px; }
.income-tier-step { min-width: 0; padding: 10px; border: 1px solid #cad8bc; border-radius: 10px; background: #f3f7e8; color: #315640; font-size: 12px; line-height: 1.7; overflow-wrap: anywhere; }
.income-tier-step strong { display: block; font-size: 20px; color: #2b6949; }
.income-tier-note { grid-column: 1 / -1; margin: 0; font-size: 12px; line-height: 1.8; color: #596e58; overflow-wrap: anywhere; }
@media (max-width: 390px) {
  .income-tier-steps { gap: 5px; }
  .income-tier-step { padding: 7px; font-size: 10px; }
}