/* Mancala: warm wood, two strong colours, and big round shapes that a thumb
   can hit. The board is a CSS grid and nothing else knows where a pit sits, so
   the same elements make the tall phone board and the wide desktop board.

   Two layouts, one DOM:
     narrow  two columns of six pits, Red's store at the top, Blue's at the
             bottom, so the sowing order runs down the left, across the bottom,
             up the right and back across the top.
     wide    the classic board: Blue's row along the bottom, Red's along the
             top, the two stores at the ends.
*/

:root {
  color-scheme: light dark;

  --bg: #f2ede3;
  --bg-glow: #e6dcc8;
  --surface: #fffdf8;
  --surface-2: #f6f1e6;
  --border: rgba(46, 36, 28, 0.12);
  --ink: #2f2a33;
  --muted: #6d6470;

  --wood: #e7a95f;
  --wood-2: #dc9a4d;
  --frame: #241a14;
  --socket: rgba(80, 51, 24, 0.22);

  --blue: #2f90d2;
  --blue-deep: #1b6ea6;
  --red: #ea5b50;
  --red-deep: #c23f37;
  --gold: #ffcc4d;

  --seed: #fffdf5;
  --seed-edge: rgba(40, 30, 20, 0.35);

  --shadow-sm: 0 1px 2px rgba(38, 28, 20, 0.12);
  --shadow-md: 0 6px 18px rgba(38, 28, 20, 0.14);
  --shadow-lg: 0 18px 40px rgba(38, 28, 20, 0.22);

  --radius-sm: 10px;
  --radius-md: 16px;
  --radius-lg: 26px;
  --radius-full: 999px;

  --ease: cubic-bezier(0.25, 1, 0.5, 1);
  --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --fast: 140ms;
  --normal: 260ms;

  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Segoe UI Variable", -apple-system,
    BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171320;
    --bg-glow: #221b2e;
    --surface: #241d2f;
    --surface-2: #2c2439;
    --border: rgba(255, 255, 255, 0.12);
    --ink: #f2edf7;
    --muted: #a99fb4;

    --wood: #c98a45;
    --wood-2: #b97b39;
    --frame: #150f0b;
    --socket: rgba(0, 0, 0, 0.3);

    --blue: #3d9ada;
    --blue-deep: #2277b0;
    --red: #ef6459;
    --red-deep: #c8443b;

    --seed: #fffdf5;
    --shadow-md: 0 6px 18px rgba(0, 0, 0, 0.4);
    --shadow-lg: 0 18px 40px rgba(0, 0, 0, 0.5);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--ink);
  background: radial-gradient(120% 80% at 50% 0%, var(--bg-glow), var(--bg) 60%);
  min-height: 100vh;
  -webkit-text-size-adjust: 100%;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.page {
  max-width: 44rem;
  margin: 0 auto;
  padding: 1rem 1rem 0;
}

.skip-link {
  position: absolute;
  left: -9999px;
}
.skip-link:focus {
  left: 1rem;
  top: 1rem;
  z-index: 40;
  padding: 0.6rem 1rem;
  background: var(--surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-md);
}

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------- buttons */

.btn {
  font: inherit;
  font-weight: 800;
  color: var(--ink);
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-full);
  padding: 0.7rem 1.4rem;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform var(--fast) var(--ease), box-shadow var(--fast) var(--ease),
    background var(--fast) var(--ease);
}
.btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn:active:not(:disabled) {
  transform: translateY(1px) scale(0.98);
}
.btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.btn--primary {
  color: #fff;
  background: linear-gradient(180deg, var(--blue) 0%, var(--blue-deep) 100%);
  border-color: transparent;
  padding: 0.9rem 2.6rem;
  font-size: 1.1rem;
  letter-spacing: 0.01em;
}
.btn--ghost {
  background: transparent;
  box-shadow: none;
}
.btn--small {
  padding: 0.45rem 0.8rem;
  font-size: 0.85rem;
}

.icon-btn {
  font: inherit;
  font-size: 1.5rem;
  line-height: 1;
  width: 2.2rem;
  height: 2.2rem;
  border: none;
  border-radius: var(--radius-full);
  background: var(--surface-2);
  color: var(--muted);
  cursor: pointer;
}
.icon-btn:hover {
  color: var(--ink);
}

.linkish {
  font: inherit;
  font-size: 0.85rem;
  color: var(--muted);
  background: none;
  border: none;
  text-decoration: underline;
  cursor: pointer;
  padding: 0.4rem;
}

/* ------------------------------------------------------------ setup screen */

.hero {
  text-align: center;
  padding: 1.6rem 0 1.2rem;
}
.hero__title {
  font-size: clamp(2.4rem, 12vw, 3.4rem);
  font-weight: 900;
  background: linear-gradient(180deg, var(--red) 0%, var(--blue-deep) 130%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.hero__sub {
  margin: 0.5rem auto 0;
  max-width: 26rem;
  color: var(--muted);
  font-size: 0.98rem;
}

.panel {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 1rem;
  margin-bottom: 1rem;
  box-shadow: var(--shadow-sm);
}
.panel__title {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
  margin-bottom: 0.7rem;
}

.mode-grid {
  display: grid;
  gap: 0.6rem;
  grid-template-columns: 1fr;
}
@media (min-width: 34rem) {
  .mode-grid {
    grid-template-columns: 1fr 1fr;
  }
}

.mode-card {
  font: inherit;
  text-align: left;
  display: grid;
  gap: 0.15rem;
  padding: 0.85rem 1rem;
  border: 2px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
  transition: transform var(--fast) var(--ease), border-color var(--fast) var(--ease),
    background var(--fast) var(--ease);
}
.mode-card:hover {
  transform: translateY(-2px);
}
.mode-card--on {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 12%, var(--surface));
  box-shadow: inset 0 0 0 1px var(--blue);
}
.mode-card__name {
  font-weight: 900;
  font-size: 1.15rem;
}
.mode-card__tag {
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--blue-deep);
}
.mode-card__origin {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.35;
}

.rounds-row {
  margin-top: 0.7rem;
}
.toggle {
  font: inherit;
  font-size: 0.85rem;
  font-weight: 700;
  width: 100%;
  text-align: left;
  padding: 0.6rem 0.85rem;
  border-radius: var(--radius-md);
  border: 2px dashed var(--border);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.toggle[aria-pressed="true"] {
  border-style: solid;
  color: var(--ink);
  background: var(--surface-2);
}

.seats {
  display: grid;
  gap: 0.8rem;
}
@media (min-width: 34rem) {
  .seats {
    grid-template-columns: 1fr 1fr;
  }
}

.seat__title {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 1.05rem;
  font-weight: 900;
  margin-bottom: 0.5rem;
}
.seat__note {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: 0;
}
.dotmark {
  width: 0.85rem;
  height: 0.85rem;
  border-radius: var(--radius-full);
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, 0.25);
}
.dotmark--blue {
  background: var(--blue);
}
.dotmark--red {
  background: var(--red);
}

.seat__kind {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.25rem;
  padding: 0.2rem;
  border-radius: var(--radius-full);
  background: var(--surface-2);
  margin-bottom: 0.45rem;
}
.seg {
  font: inherit;
  font-weight: 800;
  font-size: 0.88rem;
  padding: 0.42rem 0.5rem;
  border: none;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.seg--on {
  background: var(--surface);
  color: var(--ink);
  box-shadow: var(--shadow-sm);
}
.seat--blue .seg--on {
  color: var(--blue-deep);
}
.seat--red .seg--on {
  color: var(--red-deep);
}

.seat__levels {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.3rem;
}
.level {
  font: inherit;
  display: grid;
  gap: 0.05rem;
  justify-items: center;
  padding: 0.35rem 0.2rem;
  border: 2px solid transparent;
  border-radius: var(--radius-sm);
  background: var(--surface-2);
  color: var(--ink);
  cursor: pointer;
  transition: border-color var(--fast) var(--ease), transform var(--fast) var(--ease);
}
.level:hover {
  transform: translateY(-1px);
}
.level__tier {
  font-size: 0.65rem;
  font-weight: 900;
  color: var(--muted);
}
.level__name {
  font-size: 0.85rem;
  font-weight: 800;
  line-height: 1.1;
}
.seat--blue .level--on {
  border-color: var(--blue);
  background: color-mix(in srgb, var(--blue) 16%, var(--surface));
}
.seat--red .level--on {
  border-color: var(--red);
  background: color-mix(in srgb, var(--red) 16%, var(--surface));
}
.level--on .level__tier {
  color: var(--ink);
}
.seat__blurb {
  margin: 0.4rem 0 0;
  min-height: 2.4em;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--muted);
}

.setup-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  margin: 0.4rem 0 0.6rem;
}
.record {
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0.2rem 0 0;
}
#share {
  display: block;
  margin: 0 auto 1rem;
}

/* ------------------------------------------------------------- game screen */

.scoreboard {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0.5rem;
  margin: 0.4rem 0 0.6rem;
}
.scoreboard__vs {
  align-self: center;
  font-weight: 900;
  font-size: 0.8rem;
  text-transform: uppercase;
  color: var(--muted);
}

.chip {
  position: relative;
  flex: 1 1 0;
  max-width: 12rem;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name score" "who score";
  align-items: center;
  gap: 0 0.6rem;
  padding: 0.5rem 0.8rem;
  border-radius: var(--radius-md);
  background: var(--surface);
  border: 2px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: transform var(--normal) var(--bounce), box-shadow var(--normal) var(--ease),
    border-color var(--normal) var(--ease);
}
.chip__name {
  grid-area: name;
  font-weight: 900;
  font-size: 0.95rem;
  letter-spacing: 0.02em;
}
.chip__who {
  grid-area: who;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--muted);
}
.chip__score {
  grid-area: score;
  font-size: 1.8rem;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.chip--blue .chip__name,
.chip--blue .chip__score {
  color: var(--blue-deep);
}
.chip--red .chip__name,
.chip--red .chip__score {
  color: var(--red-deep);
}
.chip--turn {
  transform: translateY(-2px) scale(1.03);
  box-shadow: var(--shadow-md);
}
.chip--blue.chip--turn {
  border-color: var(--blue);
}
.chip--red.chip--turn {
  border-color: var(--red);
}
.chip--hit {
  animation: chip-bump 380ms var(--bounce);
}
@keyframes chip-bump {
  40% {
    transform: translateY(-6px) scale(1.08);
  }
}

.status {
  text-align: center;
  font-weight: 800;
  font-size: 0.98rem;
  min-height: 1.5em;
  margin: 0 0 0.6rem;
  color: var(--ink);
}
.status--think {
  color: var(--muted);
}
.status--good {
  color: var(--blue-deep);
}
.status--bad {
  color: var(--red-deep);
}

.board-wrap {
  position: relative;
}
.fly-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

/* ------------------------------------------------------------------ board */

.board {
  /* One number sets the whole board: a pit is `--pit` across, and every track
     is a whole number of pits. It is capped against the width AND the height
     of the screen, so the tall board never runs off the bottom of a phone and
     never needs a scroll to see the row you are about to play. */
  --pit: min(19vw, 9.6vh, 4.8rem);
  /* A badge can be dropped on the board itself, so it needs a positioned
     ancestor of its own (see `flashBadge` in render.js). */
  position: relative;
  display: grid;
  gap: 0.4rem;
  padding: 0.5rem;
  border-radius: var(--radius-lg);
  background: linear-gradient(160deg, var(--wood) 0%, var(--wood-2) 100%);
  border: 5px solid var(--frame);
  box-shadow: var(--shadow-lg), inset 0 0 0 2px rgba(255, 255, 255, 0.18);
  /* narrow: two columns of six pits with a store bar top and bottom */
  grid-template-columns: repeat(2, var(--pit));
  grid-template-rows: auto repeat(6, var(--pit)) auto;
  width: max-content;
  margin: 0 auto;
}

.store {
  position: relative;
  border-radius: var(--radius-full);
  border: 3px solid rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(var(--pit) * 0.6);
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.28);
  transition: transform var(--fast) var(--bounce), box-shadow var(--fast) var(--ease);
}
.store--blue {
  background: linear-gradient(180deg, var(--blue) 0%, var(--blue-deep) 100%);
  grid-column: 1 / -1;
  grid-row: 8;
}
.store--red {
  background: linear-gradient(180deg, var(--red) 0%, var(--red-deep) 100%);
  grid-column: 1 / -1;
  grid-row: 1;
}
.store--turn {
  box-shadow: inset 0 3px 10px rgba(0, 0, 0, 0.28), 0 0 0 3px var(--gold);
}
.store--hit {
  transform: scale(1.03);
}
.store__count {
  font-weight: 900;
  font-size: 1.15rem;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.45);
  font-variant-numeric: tabular-nums;
}
.store__seeds {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.pit {
  position: relative;
  appearance: none;
  padding: 0;
  aspect-ratio: 1;
  border-radius: var(--radius-full);
  border: 3px solid rgba(0, 0, 0, 0.42);
  background: var(--socket);
  cursor: default;
  transition: transform var(--fast) var(--bounce), box-shadow var(--fast) var(--ease),
    filter var(--fast) var(--ease);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.3);
}
.pit--blue {
  background: radial-gradient(120% 120% at 30% 25%, color-mix(in srgb, var(--blue) 88%, #fff), var(--blue-deep));
}
.pit--red {
  background: radial-gradient(120% 120% at 30% 25%, color-mix(in srgb, var(--red) 88%, #fff), var(--red-deep));
}
.pit--empty {
  filter: saturate(0.75) brightness(0.9);
}
.pit--playable {
  cursor: pointer;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.3), 0 0 0 3px var(--gold);
  animation: breathe 2.2s var(--ease) infinite;
}
.pit--playable:hover {
  transform: scale(1.07);
}
@keyframes breathe {
  50% {
    box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.3), 0 0 0 6px rgba(255, 204, 77, 0.45);
  }
}
.pit--hit {
  transform: scale(1.1);
}
.pit--lifting {
  transform: scale(0.9);
  filter: brightness(0.8);
}
.pit--taken {
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.3), 0 0 0 5px #fff;
  filter: brightness(1.3);
}
/* A pit won from the opponent in an earlier round. It carries its new owner's
   colour, and this dashed ring in the other colour says whose row it sits in,
   so a Ba-awa board after a conquest still reads. */
.pit--conquered::after {
  content: "";
  position: absolute;
  inset: -3px;
  border-radius: inherit;
  border: 2px dashed var(--red);
  pointer-events: none;
}
.pit--conquered.pit--red::after {
  border-color: var(--blue);
}

.pit--marked {
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.3), 0 0 0 4px var(--gold);
}
.pit--refused {
  animation: shake 320ms var(--ease);
}
@keyframes shake {
  25% {
    transform: translateX(-4px);
  }
  75% {
    transform: translateX(4px);
  }
}

.pit__seeds {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
/* The count sits INSIDE the bowl, along the bottom, and the seed dots are
   packed into the upper part of the bowl to leave room for it. Outside the
   bowl it collided with the pit below on a narrow screen. */
.pit__count {
  position: absolute;
  left: 50%;
  bottom: 3%;
  transform: translateX(-50%);
  min-width: 44%;
  padding: 0 0.28em;
  border-radius: var(--radius-full);
  background: rgba(0, 0, 0, 0.42);
  color: #fff;
  font-size: calc(var(--pit) * 0.24);
  line-height: 1.4;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  text-align: center;
  pointer-events: none;
}

.seed {
  position: absolute;
  width: calc(var(--pit) * 0.14);
  height: calc(var(--pit) * 0.14);
  margin: calc(var(--pit) * -0.07) 0 0 calc(var(--pit) * -0.07);
  border-radius: var(--radius-full);
  background: radial-gradient(circle at 35% 30%, #ffffff, #e9dfc6);
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.32);
}
.seed--fly {
  top: 0;
  left: 0;
  margin: 0;
  width: 0.55rem;
  height: 0.55rem;
  transform-origin: center;
  translate: -50% -50%;
  z-index: 6;
}
.seed--taken {
  background: var(--gold);
  width: 0.65rem;
  height: 0.65rem;
}

.pop-badge {
  position: absolute;
  left: 50%;
  top: -0.5rem;
  transform: translate(-50%, 0);
  padding: 0.2rem 0.6rem;
  border-radius: var(--radius-full);
  background: var(--frame);
  color: var(--gold);
  font-size: 0.72rem;
  font-weight: 900;
  white-space: nowrap;
  pointer-events: none;
  animation: rise 1.1s var(--ease) forwards;
  z-index: 8;
}
@keyframes rise {
  0% {
    opacity: 0;
    transform: translate(-50%, 0.4rem) scale(0.8);
  }
  25% {
    opacity: 1;
    transform: translate(-50%, -0.5rem) scale(1);
  }
  75% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -1.6rem);
  }
}

/* narrow layout: pit places. Left column runs 1 to 6 down, right column runs
   12 to 7 down, so the sowing order is one loop round the board. */
.pit[data-pit="0"] { grid-column: 1; grid-row: 2; }
.pit[data-pit="1"] { grid-column: 1; grid-row: 3; }
.pit[data-pit="2"] { grid-column: 1; grid-row: 4; }
.pit[data-pit="3"] { grid-column: 1; grid-row: 5; }
.pit[data-pit="4"] { grid-column: 1; grid-row: 6; }
.pit[data-pit="5"] { grid-column: 1; grid-row: 7; }
.pit[data-pit="6"] { grid-column: 2; grid-row: 7; }
.pit[data-pit="7"] { grid-column: 2; grid-row: 6; }
.pit[data-pit="8"] { grid-column: 2; grid-row: 5; }
.pit[data-pit="9"] { grid-column: 2; grid-row: 4; }
.pit[data-pit="10"] { grid-column: 2; grid-row: 3; }
.pit[data-pit="11"] { grid-column: 2; grid-row: 2; }

/* wide layout: the classic board, Blue along the bottom, Red along the top */
@media (min-width: 46rem) {
  .board {
    --pit: min(9vw, 15vh, 5.4rem);
    grid-template-columns: auto repeat(6, var(--pit)) auto;
    grid-template-rows: repeat(2, var(--pit));
    gap: 0.55rem;
    padding: 0.65rem;
  }
  .store {
    min-width: calc(var(--pit) * 0.7);
  }
  .store--red {
    grid-column: 1;
    grid-row: 1 / -1;
  }
  .store--blue {
    grid-column: 8;
    grid-row: 1 / -1;
  }
  .pit[data-pit="11"] { grid-column: 2; grid-row: 1; }
  .pit[data-pit="10"] { grid-column: 3; grid-row: 1; }
  .pit[data-pit="9"] { grid-column: 4; grid-row: 1; }
  .pit[data-pit="8"] { grid-column: 5; grid-row: 1; }
  .pit[data-pit="7"] { grid-column: 6; grid-row: 1; }
  .pit[data-pit="6"] { grid-column: 7; grid-row: 1; }
  .pit[data-pit="0"] { grid-column: 2; grid-row: 2; }
  .pit[data-pit="1"] { grid-column: 3; grid-row: 2; }
  .pit[data-pit="2"] { grid-column: 4; grid-row: 2; }
  .pit[data-pit="3"] { grid-column: 5; grid-row: 2; }
  .pit[data-pit="4"] { grid-column: 6; grid-row: 2; }
  .pit[data-pit="5"] { grid-column: 7; grid-row: 2; }
}

.round-strip {
  text-align: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--muted);
  margin: 0.7rem 0 0;
}

.game-actions {
  display: flex;
  gap: 0.35rem;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0.9rem 0 0.4rem;
}

/* --------------------------------------------------------------- overlays */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 1rem;
  background: rgba(20, 14, 24, 0.55);
  backdrop-filter: blur(3px);
  animation: fade var(--normal) var(--ease);
}
@keyframes fade {
  from {
    opacity: 0;
  }
}

.sheet {
  width: 100%;
  max-width: 24rem;
  max-height: 92vh;
  overflow-y: auto;
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: 1rem;
  box-shadow: var(--shadow-lg);
  animation: slide-up var(--normal) var(--bounce);
}
@keyframes slide-up {
  from {
    transform: translateY(14px) scale(0.97);
    opacity: 0;
  }
}
.sheet__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}
.sheet__heading {
  font-size: 1.35rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}
.sheet__actions {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.5rem;
  align-items: center;
  margin-top: 0.8rem;
}
.sheet__actions--result {
  grid-template-columns: 1fr;
  justify-items: stretch;
}

.tabs {
  display: flex;
  gap: 0.35rem;
  margin-bottom: 0.7rem;
}
.tab {
  font: inherit;
  font-weight: 800;
  font-size: 0.85rem;
  flex: 1;
  padding: 0.45rem;
  border-radius: var(--radius-full);
  border: 2px solid var(--border);
  background: var(--surface-2);
  color: var(--muted);
  cursor: pointer;
}
.tab--on {
  background: var(--ink);
  color: var(--surface);
  border-color: transparent;
}

.card__figure {
  background: linear-gradient(180deg, color-mix(in srgb, var(--wood) 45%, var(--surface)), var(--surface-2));
  border-radius: var(--radius-md);
  padding: 0.8rem;
  margin-bottom: 0.8rem;
}
.board--mini {
  --pit: min(11vw, 4.6vh, 2.4rem);
  gap: 0.22rem;
  padding: 0.3rem;
  border-width: 3px;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
}
.board--mini .pit {
  border-width: 2px;
}
.board--mini .store {
  border-width: 2px;
}
.board--mini .store__count {
  font-size: calc(var(--pit) * 0.42);
}
.board--mini .pit--playable {
  animation: none;
}

.card__title {
  font-size: 1.15rem;
  font-weight: 900;
  margin-bottom: 0.35rem;
}
.card__text {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.45;
  color: var(--ink);
}
.card__step {
  margin: 0.5rem 0 0;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--muted);
}

.dots {
  display: flex;
  gap: 0.4rem;
  justify-content: center;
  margin-top: 0.8rem;
}
.dot {
  width: 0.6rem;
  height: 0.6rem;
  padding: 0;
  border: none;
  border-radius: var(--radius-full);
  background: var(--border);
  cursor: pointer;
}
.dot--on {
  background: var(--blue);
  transform: scale(1.25);
}

.sheet--result {
  text-align: center;
}
.result__title {
  font-size: 1.8rem;
  font-weight: 900;
}
#result[data-tone="blue"] .result__title {
  color: var(--blue-deep);
}
#result[data-tone="red"] .result__title {
  color: var(--red-deep);
}
.result__line {
  font-size: 1.1rem;
  font-weight: 800;
  margin: 0.4rem 0 0.6rem;
}
.result__detail {
  margin: 0;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--muted);
}

/* ----------------------------------------------------------------- footer */

.footer {
  max-width: 44rem;
  margin: 1.5rem auto 0;
  padding: 1rem 1rem 2rem;
  text-align: center;
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.5;
}
.footer a {
  color: var(--blue-deep);
}
.privacy {
  max-width: 32rem;
  margin: 0 auto 0.6rem;
}

/* The two halves of the reduced-motion rule must agree: app.js also drops the
   seed animation to nothing when this media query matches. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
  .pit--playable {
    animation: none;
  }
}