/* Frequency: speckled night-sky table, blue plastic tray as the board,
   score track | dial + card | score track. */
:root {
  --sky: #111b35;
  --tray: #1f6fc4;
  --tray-hi: #3a8ce0;
  --tray-lo: #15539a;
  --navy: #1b2a4e;
  --face: #ece8dc;
  --shade: #d9d3c3;
  --shade-edge: #bfb7a3;
  --tick: #b9b09c;
  --scallop: #efe6da;
  --red: #c8262f;
  --red-lo: #a41d25;
  --mint: #7fd6c2;
  --team0: #e07a5f;
  --team1: #d9a531;
  --gem: #d11b55;
  --ink: #16203a;
  --paper: #fbfaf6;
  --display: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --body: "Karla", system-ui, -apple-system, sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding-inline: 16px;
  padding-block: 16px 32px;
  font-family: var(--body);
  color: var(--paper);
  background-color: var(--sky);
  background-image: var(--speckle, none);
  background-size: 220px;
  min-height: 100vh;
  overflow-x: hidden; /* never let a thrown card widen the page */
  overflow-x: clip;
}

.wrap { max-width: 1080px; margin: 0 auto; display: grid; gap: 16px; }

a { color: var(--paper); font-weight: 700; text-decoration: none; }
a:hover { color: var(--mint); }

button { font-family: inherit; }
button:focus-visible, input:focus-visible, a:focus-visible, .dial:focus-visible {
  outline: 3px solid var(--mint);
  outline-offset: 2px;
}

/* ---------- header ---------- */
#header { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; }
#header h1 { font: 600 1.6rem var(--display); margin: 0 auto 0 0; letter-spacing: .02em; }
.menu { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; }
.menu [aria-expanded="true"] { color: var(--mint); }
.pop-wrap { position: relative; }
.popup {
  position: absolute; top: calc(100% + 10px); right: 0; z-index: 40; width: min(300px, calc(100vw - 32px));
  display: grid; gap: 10px; padding: 14px; border-radius: 12px;
  background: var(--navy); box-shadow: 0 12px 28px rgba(0, 0, 0, .45); border: 1px solid rgba(255, 255, 255, .12);
}
.popup[hidden] { display: none; }
.pop-hint { margin: 0; font-size: .9rem; line-height: 1.35; opacity: .85; }
.pop-row { display: grid; grid-template-columns: 4.5em 1fr auto; align-items: center; gap: 8px; }
.pop-row #seed { grid-column: 2 / -1; }
.popup.applied { animation: seed-applied .7s ease-out; }
@keyframes seed-applied { from { box-shadow: 0 0 0 4px var(--mint); } to { box-shadow: 0 0 0 4px transparent; } }
.label { font-weight: 700; font-size: .95rem; }
#seed, #cardNo {
  font: 700 1rem var(--body); padding: 8px 10px; border-radius: 8px;
  border: 2px solid var(--tray-lo); background: var(--paper); color: var(--ink);
}
#seed, #cardNo { width: 100%; min-width: 0; }
#cardNo { -moz-appearance: textfield; appearance: textfield; text-align: center; }
#cardNo::-webkit-inner-spin-button, #cardNo::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.icon-btn {
  display: grid; place-items: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 8px;
  background: rgba(255, 255, 255, .14); color: var(--paper); cursor: pointer;
}
.icon-btn:hover { background: rgba(255, 255, 255, .26); }
.icon-btn.copied { background: var(--mint); color: var(--ink); }

/* percentage switch */
.readout-row { display: flex; align-items: center; gap: 10px; }
.readout.off { visibility: hidden; }
.switch { position: relative; display: flex; align-items: center; cursor: pointer; }
.switch input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch-track {
  position: relative; width: 46px; height: 26px; border-radius: 13px; flex: none;
  background: rgba(255, 255, 255, .2); transition: background .2s;
}
.switch-knob {
  position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  display: grid; place-items: center; font: 700 .7rem/1 var(--body); color: var(--ink);
  background: var(--paper); box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s;
}
.switch input:checked + .switch-track { background: var(--mint); }
.switch input:checked + .switch-track .switch-knob { transform: translateX(20px); }
.switch input:focus-visible + .switch-track { outline: 3px solid var(--mint); outline-offset: 2px; }

.link-btn {
  display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; padding: 0;
  color: var(--paper); font: 700 1rem var(--body); cursor: pointer;
}
.link-btn:hover { color: var(--mint); }

/* ---------- instructions dialog ---------- */
.help {
  width: min(560px, calc(100vw - 24px)); max-height: min(86vh, 720px); padding: 0; border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 16px; background: var(--navy); color: var(--paper); box-shadow: 0 18px 40px rgba(0, 0, 0, .55);
}
.help[open] { display: flex; flex-direction: column; }
.help::backdrop { background: rgba(8, 12, 26, .72); }
/* Both stop 150px short of the ad beside the game, if there is one (scripts/board.js sets the inset). */
.help { inset: 0 var(--play-ad-right, 0px) 0 0; }
.help::backdrop { right: var(--play-ad-right, 0px); }
.help-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid rgba(255, 255, 255, .12); }
.help-head h2 { margin: 0; font: 600 1.4rem var(--display); letter-spacing: .02em; }
.help-body { overflow-y: auto; padding: 4px 20px 20px; line-height: 1.45; }
.help-body h3 { margin: 22px 0 8px; font: 600 1.15rem var(--display); letter-spacing: .02em; color: var(--mint); }
.help-body p { margin: 0; }
.help-body ol, .help-body dl { margin: 0; padding: 0; list-style: none; }
.help-body b { color: var(--paper); }
.help-intro { display: grid; gap: 12px; justify-items: center; text-align: center; margin-top: 14px; }
.mini-card { display: grid; grid-template-columns: 1fr 1fr; width: 220px; border-radius: 10px; overflow: hidden; color: var(--ink); font: 700 1.05rem var(--body); text-align: center; box-shadow: 3px 3px 0 -1px #ece4d4, 6px 6px 0 -2px #d9cfbc; }
.mini-card span { padding: 14px 6px; }
.chip {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 10px; border-radius: 8px; vertical-align: baseline;
  font: 600 .95rem var(--display); letter-spacing: .02em; white-space: nowrap; background: var(--paper); color: var(--ink); box-shadow: 0 2px 0 rgba(0, 0, 0, .3);
}
.chip.peek { background: var(--mint); }
.chip.primary { background: var(--red); color: var(--paper); }
.chip.pct { min-width: 2.6em; justify-content: center; background: var(--mint); border-radius: 999px; }
.steps { display: grid; gap: 10px; }
.steps li { display: grid; grid-template-columns: 30px 1fr; gap: 12px; align-items: start; }
.steps .n { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--mint); color: var(--ink); font: 700 1rem var(--display); }
.steps p { padding-top: 3px; }
.score-demo { display: grid; grid-template-columns: minmax(0, 220px) 1fr; gap: 14px; align-items: center; }
.score-demo svg { width: 100%; height: auto; }
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.tile { display: grid; gap: 6px; justify-items: start; align-content: start; padding: 10px; border-radius: 12px; background: rgba(255, 255, 255, .08); font-size: .9rem; }
.tile .gem { height: 34px; }
.tile .big { font: 700 1.9rem/34px var(--display); color: var(--mint); }
.keys { display: grid; grid-template-columns: auto 1fr; gap: 10px 12px; align-items: center; }
.keys dd { margin: 0; }
.help-body .hint { margin-top: 14px; font-size: .9rem; opacity: .8; }
.two { line-height: 1.8; }
.help-body .help-foot { margin-top: 22px; }
@media (max-width: 520px) {
  .score-demo { grid-template-columns: 1fr; justify-items: center; text-align: center; }
  .score-demo svg { max-width: 240px; }
  .tiles { grid-template-columns: 1fr; }
  .tile { grid-template-columns: 40px 1fr; align-items: center; }
}

/* ---------- board ---------- */
.board {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 76px;
  gap: 14px;
  align-items: start;
  padding: 18px;
  border-radius: 22px;
  background: var(--tray);
  box-shadow: inset 0 3px 0 var(--tray-hi), inset 0 -6px 0 var(--tray-lo), 0 18px 40px rgba(0, 0, 0, .45);
}
.center { display: grid; gap: 14px; justify-items: center; min-width: 0; }

/* turn indicator */
.turn {
  display: inline-flex; align-items: center; gap: 10px; padding: 8px 18px 8px 12px;
  border: 0; border-radius: 999px; cursor: pointer;
  font: 600 1.1rem var(--display); color: var(--ink); background: var(--team0);
  box-shadow: 0 4px 0 rgba(0, 0, 0, .25);
  transition: background-color .3s;
}
.turn[data-team="1"] { background: var(--team1); }
.turn-dot { position: relative; width: 12px; height: 12px; }
.turn-dot::before, .turn-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; }
.turn-dot::after { background: var(--paper); }
/* The pulsing ring is a disc behind the dot that scales and fades, so it animates on the compositor
   instead of repainting a box-shadow every frame. */
.turn-dot::before {
  background: rgba(255, 255, 255, .35);
  transform: scale(1.5);
  animation: pulse 1.6s ease-in-out infinite;
}
@keyframes pulse { 50% { transform: scale(2.1667); opacity: 0; } }

/* dial */
svg.dial { width: 100%; max-width: 720px; height: auto; display: block; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; border-radius: 12px; }
svg.dial.locked { cursor: default; }
.navy { fill: var(--navy); }
.face { fill: var(--face); }
.shade { fill: var(--shade); stroke: var(--shade-edge); stroke-width: 2; }
.mint { fill: var(--mint); }
.needle-line { stroke: var(--red); stroke-width: 12; stroke-linecap: round; }
.hub { fill: var(--red); }
.hub-ring { fill: var(--red-lo); }
#handle { cursor: grab; }

/* card */
.cardrow { display: grid; grid-template-columns: 56px auto 56px; align-items: center; gap: 10px; }
.card {
  display: grid; grid-template-columns: 1fr 1fr; width: min(380px, 62vw); aspect-ratio: 7 / 4;
  border-radius: 12px; overflow: hidden; box-shadow: 4px 4px 0 -1px #ece4d4, 8px 8px 0 -2px #d9cfbc, 0 10px 20px rgba(0, 0, 0, .3); color: var(--ink);
}
.card .side { display: grid; grid-template-rows: auto 1fr; gap: 6px; padding: 12px 14px; text-align: center; min-width: 0; }
.card .arrow { font-size: 1.4rem; line-height: 1; }
.card .word { font: 700 clamp(.95rem, 2.6vw, 1.4rem)/1.2 var(--body); align-self: center; overflow-wrap: anywhere; hyphens: auto; text-wrap: balance; }
.gemslot {
  height: 72px; padding: 0; border-radius: 10px; border: 2px dashed rgba(255, 255, 255, .35); background: transparent;
  display: grid; place-items: center; cursor: pointer;
}
.gemslot:hover { border-color: rgba(255, 255, 255, .7); }
.gemslot svg { width: 30px; height: 52px; opacity: 0; transform: translateY(8px); transition: opacity .2s, transform .25s; }
.gemslot[aria-pressed="true"] { border-color: transparent; }
.gemslot[aria-pressed="true"] svg { opacity: 1; transform: none; }

/* controls */
.controls { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.ctl {
  font: 600 1.05rem var(--display); letter-spacing: .02em; border: 0; border-radius: 12px; padding: 12px 18px;
  cursor: pointer; background: var(--paper); color: var(--ink); box-shadow: 0 4px 0 rgba(0, 0, 0, .25);
  transition: transform .08s, box-shadow .08s;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.ctl:active { transform: translateY(3px); box-shadow: 0 1px 0 rgba(0, 0, 0, .25); }
.ctl.primary { background: var(--red); color: var(--paper); }
.ctl.peek { background: var(--mint); }
.ctl:disabled { opacity: .5; cursor: default; }
.status:empty { display: none; }
.status { font: 600 1.2rem var(--display); text-align: center; text-wrap: balance; }
.readout { font: 700 .95rem var(--body); opacity: .85; font-variant-numeric: tabular-nums; }

/* score tracks: 11 slots of 30px + 4px gap inside 8px padding */
.track { display: grid; gap: 6px; justify-items: center; padding: 6px 4px; border-radius: 16px; transition: background-color .3s, box-shadow .3s; }
.track.active { background: rgba(255, 255, 255, .12); box-shadow: 0 0 0 2px var(--team-color); }
.team-name {
  width: 100%; padding: 2px; border: 0; border-radius: 6px; background: none; color: var(--paper);
  font: 600 .85rem var(--display); text-align: center; text-overflow: ellipsis;
}
.rail {
  position: relative; width: 56px; padding: 8px 0; display: grid; gap: 4px; border-radius: 14px;
  background: var(--tray-lo); box-shadow: inset 0 3px 6px rgba(0, 0, 0, .35);
}
.slot {
  height: 30px; padding: 0; border: 0; background: none; cursor: pointer;
  display: grid; grid-template-columns: 18px 1fr; align-items: center;
  color: rgba(255, 255, 255, .6); font: 700 .72rem var(--body); font-variant-numeric: tabular-nums;
}
.slot::after {
  content: ""; justify-self: center; width: 22px; height: 7px; border-radius: 4px;
  background: rgba(0, 0, 0, .45); box-shadow: 0 1px 0 rgba(255, 255, 255, .18);
}
.head {
  position: absolute; left: 50%; width: 34px; height: 42px; margin-left: -8px; pointer-events: none;
  top: calc(8px + (10 - var(--n, 0)) * 34px - 8px);
  filter: drop-shadow(0 3px 2px rgba(0, 0, 0, .4));
  transition: top .35s cubic-bezier(.3, 1.4, .5, 1);
}
.bump { display: flex; gap: 4px; }
.bump button {
  width: 26px; height: 26px; padding: 0; border: 0; border-radius: 6px; cursor: pointer;
  background: rgba(255, 255, 255, .85); color: var(--ink); font: 700 1rem var(--body);
}

.stripes {
  height: 14px; border-radius: 4px;
  background: linear-gradient(90deg, #8cc26b 0 7%, #e9866a 7% 14%, #1d1d1d 14% 17%, #f2d0d6 17% 25%, #5bb9a4 25% 31%, #f2a33a 31% 36%, #b8d7ef 36% 44%, #d85a36 44% 50%, #f1e7c8 50% 58%, #2d2d2d 58% 61%, #9fd08a 61% 69%, #e9866a 69% 76%, #f2d0d6 76% 83%, #5bb9a4 83% 90%, #f2a33a 90%);
}

@media (max-width: 640px) {
  .menu { gap: 6px; }
  .menu .link-btn { padding: 8px; border-radius: 8px; background: rgba(255, 255, 255, .14); }
  .menu .link-btn svg { width: 22px; height: 22px; }
  .menu-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .board { grid-template-columns: 1fr 1fr; padding: 12px; }
  .center { grid-column: 1 / -1; order: -1; }
  .cardrow { grid-template-columns: 36px auto 36px; gap: 6px; }
  .card { width: calc(100vw - 150px); }
  .gemslot svg { width: 22px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
  .head, .gemslot svg, .turn, .track, .switch-track, .switch-knob { transition: none; }
  .popup.applied { animation: none; }
  .turn-dot::before { animation: none; }
}

/* ---------- results screen and its ad ---------- */
/* After a win the board gives way to the result, the buttons and the ad, so all three are in view at once. */
.wrap.is-won > .board, .wrap.is-won > .stripes { display: none; }
.win-screen { display: grid; justify-items: center; gap: 16px; text-align: center; }
.win-screen[hidden] { display: none; }
.win-text { margin: 0; font: 600 1.6rem var(--display); text-wrap: balance; }
.win-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
/* 150px clear of the buttons (16px of grid gap plus the margin) on a wide window, 50px on a phone. The box keeps
   its size whether or not an ad fills it; the link row sits 50px below the box. Ad-free browsers get neither. */
.win-ad { display: grid; justify-items: center; gap: 6px; margin-top: 134px; }
.win-ad[hidden], :root.ad-free .win-ad { display: none; }
.win-ad-label { margin: 0; font-size: .85rem; opacity: .75; }
.win-ad-box { width: 300px; height: 250px; margin-bottom: 44px; }
.win-ad-box[data-ad-size="320x100"] { width: 320px; height: 100px; }
.win-ad-box[data-ad-size="320x50"] { width: 320px; height: 50px; }
@media (max-width: 640px) {
  .win-ad { margin-top: 34px; }
}

/* ---------- ad beside the game ---------- */
/* Only where the window fits the game at its full 1080px, 150px of space and the ad, with 15px spare for a
   scrollbar. The game moves left to make room but keeps its size. The ad sits in the page and scrolls with
   it, and stays above the card thrown off the table (z-index 50). Ad-free browsers get none. */
.play-ad { display: none; }
@media (min-width: 1440px) and (min-height: 700px) {
  :root:not(.ad-free) .play-frame { display: grid; grid-template-columns: minmax(0, 1080px) auto; justify-content: center; align-items: start; }
  :root:not(.ad-free) .play-frame > .wrap { margin: 0; }
  :root:not(.ad-free) .play-ad { display: grid; justify-items: start; gap: 6px; margin-left: 150px; position: relative; z-index: 51; }
  .play-ad, .play-ad-box { width: 160px; }
  .play-ad-box { height: 600px; min-height: 600px; }
}
@media (min-width: 1580px) and (min-height: 700px) {
  .play-ad, .play-ad-box { width: 300px; }
}

/* ---------- update banner (service worker) ---------- */
.update {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px 10px 16px; border-radius: 12px;
  background: var(--navy); color: var(--paper);
  border: 1px solid rgba(255, 255, 255, .2); box-shadow: 0 6px 24px rgba(0, 0, 0, .45);
  font-family: var(--body); z-index: 50;
}
.update[hidden] { display: none; }