@import url('./fonts.css');

:root {
  --paper: #f5f3eb;
  --ink: #183d38;
  --muted: #57716a;
  --line: #cad4c8;
  --green: #1d5949;
  --lime: #dfed9c;
  --white: #fffef9;
  --focus: #a4501b;
  --brand-dot: #77952f;
  --game-border: #afbeb3;
  --game-surface: #edf0e7;
  --toolbar-border: #75998d;
  --toolbar-hover: #326055;
  --status-surface: #dce4d8;
  --pool-frame: #d3dacc;
  --pool-border: #b3bfb0;
  --card-border: #bbcabc;
  --message-surface: #e2ead5;
  --secondary: #49625a;
  --card-hover: #f7fbe8;
  --card-active: #e8efcd;
  --warning: #78482c;
  --disabled-surface: #e8ebe4;
  --disabled-border: #c9d0c6;
  --disabled-text: #62726a;
  --backdrop: rgb(10 35 28 / 65%);
  --toolbar-surface: #183d38;
  --toolbar-text: #fffef9;
  --selected-text: #183d38;
  --running-surface: #1d5949;
  --running-text: #fffef9;
  color-scheme: light;
  font-family: 'Atkinson', 'Trebuchet MS', sans-serif;
  color: var(--ink);
  background: var(--paper);
  font-synthesis: none;
}
:root[data-theme="dark"] {
  --paper: #14231f;
  --ink: #edf2e6;
  --muted: #b3c8b9;
  --line: #637e6d;
  --green: #c4dfa3;
  --lime: #dfed9c;
  --white: #20362c;
  --focus: #f6bb7c;
  --brand-dot: #bfd885;
  --game-border: #718879;
  --game-surface: #192c24;
  --toolbar-surface: #10251c;
  --toolbar-text: #edf2e6;
  --toolbar-border: #789584;
  --toolbar-hover: #30533f;
  --selected-text: #183d38;
  --status-surface: #36543f;
  --running-surface: #c4dfa3;
  --running-text: #183d38;
  --pool-frame: #324a3a;
  --pool-border: #718879;
  --card-border: #718879;
  --message-surface: #304932;
  --secondary: #c4d5c4;
  --card-hover: #2e4736;
  --card-active: #3a543b;
  --warning: #f5c398;
  --disabled-surface: #28392e;
  --disabled-border: #637e6d;
  --disabled-text: #a9b9a8;
  --backdrop: rgb(3 12 8 / 78%);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-theme="dark"]) {
  --paper: #14231f;
  --ink: #edf2e6;
  --muted: #b3c8b9;
  --line: #637e6d;
  --green: #c4dfa3;
  --lime: #dfed9c;
  --white: #20362c;
  --focus: #f6bb7c;
  --brand-dot: #bfd885;
  --game-border: #718879;
  --game-surface: #192c24;
  --toolbar-surface: #10251c;
  --toolbar-text: #edf2e6;
  --toolbar-border: #789584;
  --toolbar-hover: #30533f;
  --selected-text: #183d38;
  --status-surface: #36543f;
  --running-surface: #c4dfa3;
  --running-text: #183d38;
  --pool-frame: #324a3a;
  --pool-border: #718879;
  --card-border: #718879;
  --message-surface: #304932;
  --secondary: #c4d5c4;
  --card-hover: #2e4736;
  --card-active: #3a543b;
  --warning: #f5c398;
  --disabled-surface: #28392e;
  --disabled-border: #637e6d;
  --disabled-text: #a9b9a8;
  --backdrop: rgb(3 12 8 / 78%);
  color-scheme: dark;
  }
}
* { box-sizing: border-box; }
body { margin: 0; }
button { font: inherit; cursor: pointer; color: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
button:disabled { cursor: not-allowed; }
button, p, h1, h2, dd, dl { margin: 0; }
.game-shell { max-width: 1160px; padding: 0 28px 22px; margin: auto; }
.masthead { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 22px 0 18px; }
.eyebrow { font-size: 11px; text-transform: uppercase; letter-spacing: .13em; font-weight: 700; color: var(--muted); margin-bottom: 5px; }
h1 { font: 500 clamp(36px, 4.5vw, 53px)/1.05 'Newsreader', Georgia, serif; letter-spacing: -.04em; }
h1 > span { color: var(--brand-dot); }
.masthead-meta { display: flex; align-items: end; flex-direction: column; gap: 7px; text-align: right; }
.masthead-meta p { font-size: 15px; line-height: 1.35; color: var(--muted); }
.brief-link { color: var(--green); font-size: 12px; font-weight: 700; text-underline-offset: 3px; }
.game { border: 1px solid var(--game-border); border-radius: 9px; overflow: clip; background: var(--game-surface); }
.toolbar { display: flex; gap: 16px; align-items: center; padding: 10px 16px; background: var(--toolbar-surface); color: var(--toolbar-text); }
.time-controls, .utility-controls { display: flex; gap: 4px; }
.toolbar button { min-width: 44px; min-height: 44px; padding: 8px 12px; border-radius: 4px; border: 1px solid var(--toolbar-border); background: transparent; color: inherit; font-size: 14px; }
.toolbar button:hover:not(:disabled) { background: var(--toolbar-hover); }
.toolbar button[aria-pressed="true"], .toolbar button[aria-pressed="true"]:hover:not(:disabled) { background: var(--lime); color: var(--selected-text); border-color: var(--lime); }
.toolbar button:focus-visible { outline-color: var(--lime); }
.toolbar button:disabled { opacity: .55; }
.clock { font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.utility-controls { margin-left: auto; gap: 8px; }
.utility-controls button { border-color: transparent; }
.stats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); background: var(--white); border-bottom: 1px solid var(--line); padding: 14px 0; }
.stats > div { padding: 0 18px; border-right: 1px solid var(--line); }
.stats > div:last-child { border: 0; }
dt { color: var(--muted); font-size: 12px; margin-bottom: 3px; }
dd { font-size: 24px; line-height: 1; font-weight: 700; font-variant-numeric: tabular-nums; }
.play-layout { display: grid; grid-template-columns: minmax(0, .62fr) minmax(0, 1.38fr); gap: 22px; padding: 18px; align-items: start; }
.pool-panel, .intervention-panel { min-width: 0; }
.pool-heading, .section-heading { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; min-height: 24px; }
h2 { font-size: 17px; line-height: 1.2; }
.pool-heading > span { background: var(--status-surface); font-size: 11px; padding: 4px 9px; border-radius: 3px; }
.pool-heading > span[data-active="true"] { background: var(--running-surface); color: var(--running-text); }
.section-heading > span { font-size: 12px; color: var(--muted); }
.pool-frame { background: var(--pool-frame); padding: 10px; border: 1px solid var(--pool-border); border-radius: 6px; }
canvas { display: block; width: 100%; height: clamp(330px, 43vh, 460px); border-radius: 3px; }
.pool-dimensions { font-size: 11px; margin-top: 8px; color: var(--muted); line-height: 1.5; }
.pool-dimensions > span { display: block; }
.pool-message { display: flex; flex-direction: column; gap: 8px; padding: 13px; border: 1px solid var(--card-border); border-radius: 5px; background: var(--message-surface); min-width: 0; }
.pool-message b { font-size: 16px; line-height: 1.15; }
.pool-message p { font-size: 13px; color: var(--secondary); line-height: 1.32; }
.pool-message > .category { color: var(--secondary); }
.interventions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px; }
.intervention { display: flex; flex-direction: column; align-items: stretch; gap: 8px; text-align: left; padding: 13px; border: 1px solid var(--card-border); border-radius: 5px; background: var(--white); min-width: 0; transition: border-color .12s, background .12s; }
.intervention:hover:not(:disabled) { background: var(--card-hover); border-color: var(--green); }
.intervention:active:not(:disabled) { background: var(--card-active); }
.action-top { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 4px 6px; font-size: 10px; }
.category { text-transform: uppercase; letter-spacing: .05em; color: var(--muted); }
.cost { font-weight: 700; white-space: nowrap; }
.intervention strong { font-size: 16px; line-height: 1.15; }
.effect { font-size: 13px; line-height: 1.32; color: var(--secondary); }
.availability:empty { display: none; }
.availability { font-size: 11px; color: var(--warning); font-weight: 700; }
.intervention:disabled { background: var(--disabled-surface); border-color: var(--disabled-border); color: var(--disabled-text); }
.intervention-note { font-size: 12px; line-height: 1.4; margin-top: 13px; color: var(--muted); }
dialog { color: var(--ink); background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding: 28px; width: min(580px, calc(100% - 28px)); max-height: calc(100dvh - 40px); }
dialog::backdrop { background: var(--backdrop); }
dialog h2 { font: 500 34px/1.15 'Newsreader', Georgia, serif; margin: 10px 0 16px; }
dialog p, dialog li { line-height: 1.5; font-size: 15px; }
dialog li + li { margin-top: 8px; }
dialog ol { padding-left: 23px; }
.close-dialog { display: block; margin: 0 0 12px auto; min-height: 44px; padding: 8px 14px; border-radius: 4px; border: 1px solid var(--line); background: var(--paper); }
.directions-note { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); color: var(--muted); }
@media (max-width: 899px) {
  .game-shell { padding: 0 18px 18px; }
  .play-layout { grid-template-columns: minmax(0, .65fr) minmax(0, 1.35fr); gap: 15px; padding: 15px; }
  .intervention, .pool-message { padding: 11px; }
  .action-top { flex-direction: column; }
  .stats > div { padding: 0 12px; }
  .toolbar { gap: 10px; padding: 8px 12px; }
  .toolbar button { padding: 8px 10px; }
  .pool-dimensions { font-size: 10px; }
}
@media (max-width: 699px) {
  .game-shell { padding: 0 12px 16px; }
  .masthead { padding: 18px 0 16px; }
  .masthead-meta p { display: none; }
  .eyebrow { font-size: 10px; }
  .toolbar { flex-wrap: wrap; gap: 4px 10px; padding: 8px; }
  .time-controls { flex: 1; }
  .time-controls button { flex: 1; }
  .clock { font-size: 11px; }
  .utility-controls { width: 100%; margin: 0; justify-content: flex-end; }
  .utility-controls button { min-height: 44px; }
  .stats { grid-template-columns: repeat(3, minmax(0, 1fr)); padding: 0; }
  .stats > div { padding: 10px 13px; border-bottom: 1px solid var(--line); }
  .stats > div:nth-child(3n) { border-right: 0; }
  .stats > div:nth-child(n+4) { border-bottom: 0; }
  dt { font-size: 11px; }
  dd { font-size: 22px; }
  .play-layout { grid-template-columns: minmax(0, 1fr); padding: 12px; gap: 18px; }
  canvas { height: clamp(140px, 42vw, 240px); }
  .pool-frame { padding: 7px; }
  .pool-dimensions { display: flex; justify-content: space-between; gap: 6px; font-size: 10px; }
  .interventions { gap: 8px; }
  .intervention, .pool-message { padding: 10px; gap: 7px; }
  .intervention strong, .pool-message b { font-size: 15px; }
  .effect, .pool-message p { font-size: 12px; line-height: 1.35; }
  .category, .cost { font-size: 10px; }
}
@media (max-width: 359px) {
  .game-shell { padding: 0 8px 14px; }
  .clock { width: 100%; padding: 7px 3px 3px; }
  .utility-controls { justify-content: flex-start; }
  .intervention strong, .pool-message b { font-size: 14px; }
  .intervention, .pool-message { padding: 8px; }
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; } }

.masthead > div:first-child { min-width: 0; }
.masthead-meta { flex-shrink: 0; }
.theme-toggle { min-height: 44px; padding: 6px 10px; border: 1px solid var(--card-border); border-radius: 4px; background: var(--white); color: var(--ink); font-size: 12px; white-space: nowrap; }
.theme-toggle:hover { background: var(--card-hover); }

/* REN-1056: keep the approved pool-beside / eighth-card result layout reachable. */
.masthead { position: sticky; top: 0; z-index: 3; background: var(--paper); padding-block: 10px; min-height: 72px; }
.masthead-meta { flex-direction: row; align-items: center; gap: 8px; }
.masthead-meta > p, .masthead .eyebrow { display: none; }
.masthead h1 { font-size: clamp(28px, 3vw, 38px); }
.brief-link { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; padding: 0 8px; white-space: nowrap; }
.game { overflow: clip; }
.toolbar { position: sticky; top: 72px; z-index: 2; background: var(--toolbar-surface); }
@media (min-width: 960px) and (max-height: 850px) {
  .game-shell { max-width: 1280px; padding-inline: 16px; }
  .toolbar { padding: 6px 12px; }
  .stats { padding: 10px 12px; }
  .stats dd { font-size: 22px; }
  .play-layout { padding: 12px; gap: 16px; }
  .intervention { padding: 9px; gap: 4px; }
  .intervention strong { font-size: 15px; }
  .intervention .effect { font-size: 12px; }
  .pool-message { padding: 9px; gap: 4px; }
  .pool-message p { font-size: 12px; }
  .pool-frame canvas { height: 320px; }
}
@media (max-width: 699px) {
  .masthead { flex-wrap: wrap; gap: 4px; min-height: 104px; padding-block: 6px; }
  .masthead-meta { width: 100%; justify-content: flex-end; }
  .toolbar { top: 104px; }
  .utility-controls button { min-width: 44px; min-height: 44px; }
}