/* Wattsworth: one night-field look, so a single dark theme.
   Layout: the shared bar, edge and header on top; the pixel board in the middle;
   today's cards below it. Pixel sprites scale by whole numbers only. */
:root {
  --paper: #1d2a47;      /* the navy field */
  --surface: #24345a;    /* dialogs and panels */
  --ink: #f6f1e3;
  --ink-soft: #aab4cc;
  --rule: #3b4f7c;
  --grid: #2c3d66;       /* lines between board cells */
  --accent: #ffd23f;     /* sun yellow */
  --on-accent: #1d2a47;
  --good: #5be37d;
  --same: #ffd23f;
  --worse: #ff9f1c;
  --tile: #efe3c8;       /* a placed job */
  --tile-edge: #b79e72;
  --kiln: #f08a3c;
  --kiln-edge: #b5521f;
  --cool-tile: #9fd3f0;
  --cool-edge: #4f8fb8;
  --ember: #7a3a28;
  --ember-edge: #5a2a1d;
  --face: 'Schoolbell', 'Comic Sans MS', 'Chalkboard SE', cursive;
  --ui: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --cell: 39px;
  color-scheme: dark;
}
@media (min-width: 560px) {
  :root { --cell: 52px; }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  background-color: var(--paper);
  background-size: 96px 96px;
  image-rendering: pixelated;
  color: var(--ink);
  font: 16px/1.45 var(--ui);
  -webkit-text-size-adjust: 100%;
}
img { image-rendering: pixelated; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.edge {
  display: block;
  height: 8px;
  background-color: #c9d2df;
  background-image: repeating-linear-gradient(90deg, #1e4fa8 0 11px, transparent 11px 13px);
  background-size: 100% 6px;
  background-position: 0 1px;
  background-repeat: no-repeat;
}

.topbar { display: flex; align-items: center; gap: 10px; padding: 12px clamp(16px, 3vw, 28px); height: 64px; max-width: 760px; margin: 0 auto; }
.wordmark { margin: 0; font-family: var(--ui); font-size: 27px; font-weight: 850; font-stretch: 125%; font-variation-settings: 'wdth' 125; letter-spacing: -0.015em; line-height: 1; }
.wordmark span { color: var(--accent); }
.edition { margin: 0 0 0 6px; flex: 1; min-width: 0; color: var(--ink-soft); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.icon-btn { position: relative; width: 38px; height: 38px; flex: none; display: grid; place-items: center; border: 1.5px solid var(--rule); border-radius: 50%; background: transparent; color: var(--ink); font: 750 17px var(--ui); cursor: pointer; padding: 0; }
.icon-btn:hover { border-color: var(--ink); }
.unread-dot { position: absolute; top: 3px; right: 3px; width: 8px; height: 8px; border-radius: 50%; background: #e84a3c; }
@media (max-width: 860px) { .topbar { height: 56px; } .wordmark { font-size: 23px; } }
@media (max-width: 380px) { .edition { display: none; } }

main.play { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 6px 16px 8px; font-family: var(--face); }
.dayline { margin: 0; display: flex; align-items: center; gap: 8px; font-size: 22px; line-height: 1.2; color: var(--accent); text-align: center; }
.dayline .tag { font-size: 15px; color: var(--ink-soft); }

.board { display: grid; gap: 1px; background: var(--grid); padding: 1px; width: max-content; max-width: 100%; }
.row { display: grid; grid-template-columns: repeat(9, var(--cell)); gap: 1px; }
.cell { position: relative; display: flex; align-items: center; justify-content: center; background: var(--paper); min-width: 0; }
.row.sky .cell { height: calc(var(--cell) * 15 / 13); overflow: hidden; }
.row.sky .cell img { width: 100%; height: 100%; display: block; }
.sun-n { position: absolute; right: 3px; bottom: 0; font-size: calc(var(--cell) * 0.38); line-height: 1.1; color: #fff; text-shadow: 1px 1px 0 #10172b, -1px 0 0 #10172b; }
.row.time .cell { height: 22px; font-size: 14px; color: var(--ink-soft); }
.row.heat .cell { height: calc(var(--cell) * 0.82); font-size: calc(var(--cell) * 0.44); color: #fff; }
.row.job .cell { height: calc(var(--cell) * 1.03); }
.row.battery .cell { height: calc(var(--cell) * 1.08); flex-direction: column; gap: 3px; font-size: 14px; line-height: 1; }
.cell.label { background: var(--paper); }
.cell.now { box-shadow: inset 0 0 0 2px var(--accent); }

button.cell { border: 0; padding: 0; margin: 0; font: inherit; color: inherit; cursor: pointer; }
button.cell.empty:hover { background: #26375e; }
button.cell.blocked { background: repeating-linear-gradient(135deg, var(--paper) 0 5px, #22304f 5px 10px); cursor: not-allowed; }
.row.outlet .cell { height: calc(var(--cell) * 0.82); }
.row.outlet .cell.in-use { background: #5e4a1e; box-shadow: inset 0 0 0 2px #d4a033; }
button.cell.busy { background: repeating-linear-gradient(135deg, #2a2a40 0 5px, #3b3324 5px 10px); cursor: not-allowed; }
.row.battery .cell.spill { box-shadow: inset 0 -3px 0 rgba(255, 210, 63, 0.55); }
.tile { background: var(--tile); box-shadow: inset 0 0 0 2px var(--tile-edge); gap: 3px; }
.tile.hot { background: var(--kiln); box-shadow: inset 0 0 0 2px var(--kiln-edge); }
.tile.cool { background: var(--cool-tile); box-shadow: inset 0 0 0 2px var(--cool-edge); }
.tile.ember { background: var(--ember); box-shadow: inset 0 0 0 2px var(--ember-edge); }
.board.locked button.cell { cursor: default; }

.legend { margin: -4px 0 0; font-size: 14px; color: var(--ink-soft); text-align: center; }
.legend b { font-weight: 400; }
.legend .inline-plug { width: 12px; height: 12px; vertical-align: -1px; }
.legend .free { color: #8fe0a7; }
.legend .ac { color: #ff8a7a; }
.legend .heater { color: #8fc0ff; }

.note { min-height: 1.4em; margin: 0; font-size: 17px; color: var(--accent); text-align: center; }
.hint { margin: 0; font-size: 16px; color: var(--ink-soft); text-align: center; max-width: 36ch; }
.hint.bad { color: #ff8a7a; }

.status { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; width: 100%; max-width: calc(var(--cell) * 9 + 10px); font-size: 18px; }
.status .mid { font-size: 15px; color: var(--ink-soft); }
.status .money { display: inline-flex; align-items: center; gap: 5px; }

.actions { display: flex; justify-content: center; gap: 12px; }
.btn { border: 0; border-radius: 0; height: 46px; padding: 0 22px; font: 21px var(--face); cursor: pointer; }
.btn.light { background: var(--ink); color: var(--on-accent); }
.btn.sun { background: var(--accent); color: var(--on-accent); }
.btn:disabled { background: #3a4a6e; color: #8592ad; cursor: not-allowed; }

.end { width: 100%; max-width: 460px; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px; background: var(--surface); border: 1px solid var(--rule); border-radius: 16px; font-family: var(--ui); text-align: center; }
.end h2 { margin: 0; font-size: 22px; font-weight: 800; font-stretch: 112%; font-variation-settings: 'wdth' 112; line-height: 1.25; text-wrap: balance; }
.end .figures { margin: 0; color: var(--ink-soft); font-size: 15px; }
.end .emoji { margin: 0; font-size: 26px; letter-spacing: 2px; }
.primary { border: 0; border-radius: 10px; background: var(--accent); color: var(--on-accent); font: 750 17px var(--ui); font-stretch: 112%; font-variation-settings: 'wdth' 112; padding: 12px 22px; cursor: pointer; }
.share-text { margin: 0; padding: 10px 12px; background: var(--paper); border-radius: 10px; font: 14px/1.4 ui-monospace, Menlo, monospace; text-align: left; user-select: all; white-space: pre-wrap; }
.views { display: flex; gap: 8px; }
.views button { border: 1.5px solid var(--rule); border-radius: 999px; background: var(--surface); color: var(--ink); font: 600 14px var(--ui); padding: 7px 14px; cursor: pointer; }
.views button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); }
.countdown { margin: 0; color: var(--ink-soft); font-size: 14px; }
.xpromo { display: flex; flex-direction: column; gap: 2px; width: 100%; padding: 12px 14px; border: 1.5px solid var(--rule); border-radius: 10px; color: var(--ink); text-decoration: none; text-align: left; }
.xpromo .kicker { font-size: 12px; color: var(--ink-soft); text-transform: none; }
.xpromo strong { font-size: 17px; font-weight: 800; }
.xpromo span { font-size: 14px; color: var(--ink-soft); }
.xpromo .go { color: var(--accent); font-weight: 700; }
.earlier { margin: 0; font-size: 14px; color: var(--ink-soft); }
.earlier a { color: var(--accent); text-underline-offset: 3px; margin: 0 2px; }

.hand { width: 100%; max-width: calc(var(--cell) * 9 + 10px); display: flex; flex-direction: column; gap: 8px; }
.hand h2 { margin: 0; font-weight: 400; font-size: 20px; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 168px), 1fr)); gap: 10px; }
.card { display: flex; gap: 8px; align-items: flex-start; padding: 8px; border: 0; margin: 0; text-align: left; font: inherit; background: var(--ink); color: var(--on-accent); box-shadow: inset 0 0 0 2px #c9b98f; cursor: pointer; }
.card:hover { background: #fffaf0; }
.card .pic { flex: none; width: 36px; height: 36px; display: grid; place-items: center; background: #e6d6b2; }
.card .body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.card .name { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 18px; line-height: 1.1; }
.card .stats { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; font-size: 15px; line-height: 1; }
.card .stats span { display: inline-flex; align-items: center; gap: 3px; }
.card .rule { display: block; font-size: 13px; line-height: 1.15; color: #5f584a; }
.card .marks { display: inline-flex; align-items: center; gap: 4px; }
.card .more { display: block; font-size: 12px; color: #7a6f5a; margin-top: 2px; }
.card .state { display: block; font-size: 13px; line-height: 1.1; color: #9a4b16; }
.card.done { box-shadow: inset 0 0 0 2px #5fa86f; }

.colophon { max-width: 760px; margin: 18px auto 0; padding: 0 16px 28px; font-size: 13px; color: var(--ink-soft); text-align: center; }
.colophon p { margin: 0 0 4px; }
.colophon a { color: var(--accent); text-underline-offset: 3px; }

dialog { width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 48px); padding: 26px 26px 22px; border: 1px solid var(--rule); border-radius: 16px; background: var(--surface); color: var(--ink); font: 16px/1.45 var(--ui); }
dialog::backdrop { background: rgba(14, 20, 32, 0.6); }
dialog h2 { margin: 0 0 12px; font-size: 24px; font-weight: 800; font-stretch: 112%; font-variation-settings: 'wdth' 112; }
dialog h3 { margin: 22px 0 10px; font-size: 15px; font-weight: 700; }
dialog p { margin: 0 0 10px; }
dialog ul { margin: 0 0 10px; padding-left: 0; list-style: none; display: flex; flex-direction: column; gap: 8px; }
dialog li { display: flex; gap: 10px; align-items: flex-start; }
dialog li img { flex: none; margin-top: 2px; }
.close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: transparent; color: var(--ink); font-size: 24px; line-height: 1; cursor: pointer; }
.close:hover { background: var(--paper); }
.tip { padding: 10px 12px; background: var(--paper); border-radius: 10px; font-size: 15px; }
.small { font-size: 13px; color: var(--ink-soft); }
.big-btn { display: block; width: 100%; margin: 6px 0 12px; }
.figs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; margin-bottom: 12px; }
.figs b { display: block; font-size: 28px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.figs span { font-size: 12px; color: var(--ink-soft); }
.chart { display: flex; align-items: flex-end; gap: 6px; height: 110px; padding: 6px 0 0; border-bottom: 1px solid var(--rule); }
.chart .bar { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; height: 100%; font-size: 11px; color: var(--ink-soft); }
.chart .bar i { display: block; width: 100%; max-width: 26px; background: #4d6396; }
.chart .bar.latest i { background: var(--accent); }
.chart-labels { display: flex; gap: 6px; font-size: 11px; color: var(--ink-soft); }
.chart-labels span { flex: 1; text-align: center; }
.changes h3 { margin: 4px 0 6px; }
.changes .date { margin: 14px 0 0; font-size: 12px; color: var(--ink-soft); }
.changes ul { list-style: disc; padding-left: 20px; display: block; }
.changes li { display: list-item; }

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

.ghost { border: 1.5px solid var(--accent); border-radius: 10px; background: transparent; color: var(--accent); font: 700 15px var(--ui); padding: 10px 18px; cursor: pointer; }
.text-btn { border: 0; background: none; color: var(--ink-soft); font: 14px var(--ui); text-decoration: underline; text-decoration-color: var(--rule); text-underline-offset: 3px; cursor: pointer; padding: 6px 0; }
.text-btn:hover { color: var(--ink); }
.card-title { display: flex; align-items: center; gap: 12px; padding-right: 30px; }
dl.details { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 4px 0 14px; font-size: 15px; }
dl.details dt { color: var(--ink-soft); }
dl.details dd { margin: 0; }

/* The tutorial: a dimmed page, glowing targets, and a panel at the bottom. */
#coach-dim { position: fixed; inset: 0; background: rgba(6, 10, 22, 0.66); z-index: 60; pointer-events: none; }
.spot { position: relative; z-index: 61; outline: 3px solid var(--accent); outline-offset: 1px; box-shadow: 0 0 18px 6px rgba(255, 210, 63, 0.5) !important; animation: glow 1.3s ease-in-out infinite; }
@keyframes glow { 50% { outline-color: #fff6c9; } }
#coach { position: fixed; left: 50%; bottom: 12px; transform: translateX(-50%); width: min(520px, calc(100vw - 24px)); z-index: 70; padding: 14px 16px 12px; background: var(--surface); border: 1.5px solid var(--accent); border-radius: 16px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); font: 16px/1.45 var(--ui); }
#coach.compact { padding: 10px 14px 8px; font-size: 15px; }
.coach-step { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; color: var(--accent); }
.coach-text { margin: 0 0 10px; }
.coach-actions { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
#coach .primary { padding: 9px 18px; font-size: 16px; }
body.coaching .colophon { padding-bottom: 240px; }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Wattsworth's garage: a 176 by 58 pixel scene, scaled by whole numbers. */
.garage { width: 100%; display: flex; justify-content: center; }
.garage canvas { display: block; width: 352px; height: auto; aspect-ratio: 176 / 58; max-width: 100%; image-rendering: pixelated; image-rendering: crisp-edges; border: 3px solid #121b31; border-radius: 4px; background: #121b31; cursor: pointer; }
@media (min-width: 560px) { .garage canvas { width: 528px; } }

/* How everyone did, after City2City's: three figures, a sentence, then the spread. */
.everyone { width: 100%; display: flex; flex-direction: column; gap: 10px; margin-top: 6px; padding-top: 14px; border-top: 1px solid var(--rule); text-align: left; }
.everyone h3 { margin: 0; font-size: 17px; font-weight: 800; }
.everyone h4 { margin: 4px 0 0; font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.everyone .quiet { margin: 0; font-size: 14px; line-height: 1.45; color: var(--ink-soft); }
.tally { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0; }
.tally div { padding: 8px 10px; border: 1px solid var(--rule); border-radius: 8px; background: rgba(0, 0, 0, 0.12); }
.tally dt { font-size: 12px; color: var(--ink-soft); }
.tally dd { margin: 2px 0 0; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.spread { position: relative; margin: 0; }
.spread .plot-frame { position: relative; padding-top: 22px; }
.spread .plot { display: grid; align-items: end; gap: 2px; height: 120px; border-bottom: 2px solid var(--ink-soft); }
.spread .slot { position: relative; height: 100%; display: flex; align-items: flex-end; cursor: pointer; outline: none; }
.spread .slot:focus-visible { box-shadow: 0 0 0 2px var(--accent); border-radius: 2px; }
.spread .column { display: block; width: 100%; background: #5d74a8; border-radius: 2px 2px 0 0; }
.spread .slot.mine .column { background: var(--accent); }
.spread .slot .you { position: absolute; left: 50%; transform: translateX(-50%); font-size: 12px; font-weight: 800; color: var(--accent); white-space: nowrap; }
.spread .slot .you.start { left: 0; transform: none; }
.spread .slot .you.end { left: auto; right: 0; transform: none; }
.spread .middle { position: absolute; top: 0; bottom: 0; border-left: 2px dashed var(--ink-soft); pointer-events: none; }
.spread .middle span { position: absolute; top: 0; left: 4px; font-size: 11px; color: var(--ink-soft); white-space: nowrap; }
.spread .middle.flip span { left: auto; right: 4px; }
.spread .axis { position: relative; height: 22px; }
.spread .axis .tick { position: absolute; top: 0; width: 1px; height: 5px; background: var(--ink-soft); }
.spread .axis .label { position: absolute; top: 6px; transform: translateX(-50%); font-size: 11px; color: var(--ink-soft); font-variant-numeric: tabular-nums; }
.spread .axis .label.first { transform: none; }
.spread .axis .label.last { right: 0; transform: none; color: var(--accent); }
.spread figcaption { font-size: 12px; color: var(--ink-soft); line-height: 1.4; }
.spread .tip { position: absolute; transform: translate(-50%, -100%); padding: 6px 9px; background: var(--ink); color: var(--paper); border-radius: 6px; font-size: 12px; line-height: 1.3; white-space: nowrap; pointer-events: none; display: flex; flex-direction: column; z-index: 2; }
.spread .tip b { font-weight: 800; }

/* The narrowest phones: slightly smaller cells so the board fits without sideways scrolling. */
@media (max-width: 379px) {
  :root { --cell: 36px; }
  main.play { padding-inline: 8px; }
}

.board.failed { display: block; max-width: 340px; padding: 24px 8px; text-align: center; font-family: var(--ui); color: var(--ink-soft); }


/* --- Goldfish Water Cooler bar ----------------------------------------------
   Copied unchanged from goldfishwatercooler.com's brand/gwc-bar.css. */

/* Goldfish Water Cooler: the bar every game wears at the very top.
   Copy this file into a game unchanged and paste gwc-bar.html as the first
   thing in <body>. It brings its own colors, so it looks the same in every game
   whatever the game's palette. It uses Gabarito and Archivo (see README.md) and
   falls back to system fonts without them. */

.gwc-bar {
  --gwc-water: #072b3d;
  --gwc-ink: #cfe6ef;
  --gwc-fish: #f26a1b;
  --gwc-fish-light: #ff9a4d;
  position: relative;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  height: 36px;
  padding: 0 clamp(14px, 3vw, 28px);
  background: var(--gwc-water);
  color: var(--gwc-ink);
  font: 600 13px/1 "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif;
  letter-spacing: 0.01em;
}

.gwc-bar a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
}

.gwc-bar .gwc-fish {
  width: 26px;
  height: 16px;
  margin-right: 2px;
  flex: none;
}

/* The hub's own wordmark: lowercase Gabarito. */
.gwc-bar .gwc-name {
  font: 800 15px/1 "Gabarito", "Archivo", system-ui, sans-serif;
  letter-spacing: -0.01em;
  color: #fff;
}

.gwc-bar .gwc-more {
  color: var(--gwc-fish-light);
  font-weight: 750;
}

.gwc-bar .gwc-short {
  display: none;
}

.gwc-bar a:hover .gwc-name,
.gwc-bar .gwc-more:hover {
  text-decoration: underline;
  text-decoration-color: var(--gwc-fish);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

.gwc-bar a:focus-visible {
  outline: 2px solid var(--gwc-fish-light);
  outline-offset: 3px;
  border-radius: 4px;
}

/* On a phone: the fish, the name, and "More games". */
@media (max-width: 480px) {
  .gwc-bar .gwc-long {
    display: none;
  }

  .gwc-bar .gwc-short {
    display: inline;
  }
}

@media print {
  .gwc-bar {
    display: none;
  }
}