/* ==========================================================================
   Mak-hos (หมากฮอส) — Thai Checkers · styles
   Look: warm lacquer-brown interface, gold accents, a framed board and
   round pieces seen slightly from above (marble, gold, classic or bottle caps).

   Themes are set on <html data-board="teak|green|brown|marble|onyx|emerald" data-pieces="classic|caps|marble|gold">.
   Layout: 3 columns on wide screens (players | board | panel), the board
   with player bars above/below on medium screens, one column on phones,
   and two columns on phones held sideways.
   ========================================================================== */

:root {
  /* Interface colours */
  --panel: #211b16;
  --panel-2: #2c241d;
  --panel-3: #3a2f26;
  --line: rgba(255, 224, 170, .09);
  --line-strong: rgba(255, 224, 170, .18);
  --text: #f6eee3;
  --muted: #a99b8a;
  --gold: #e3b04b;
  --gold-deep: #b98626;
  --gold-soft: rgba(227, 176, 75, .15);
  --jade: #5cc28f;
  --danger: #e2593f;
  --focus: #6db3ff;

  /* Board highlights (same for every board theme) */
  --hl-last: rgba(255, 214, 90, .36);
  --hl-select: rgba(255, 214, 90, .62);
  --hl-hover: rgba(255, 255, 255, .10);
  --must-glow: #ffa31a;

  /* Board size is set per layout below. One square, and the thickness of a piece: */
  --board: min(calc(100vh - 330px), calc(100vw - 500px), 760px);
  --sq: calc(var(--board) / 8);
  --lift: calc(var(--sq) * .055);
  --frame: clamp(8px, calc(var(--board) * .02), 16px);

  --radius: 14px;
  --font: "IBM Plex Sans Thai", "Inter", system-ui, sans-serif;
  --font-display: "Kanit", "IBM Plex Sans Thai", sans-serif;
}

/* Board themes */
[data-board="teak"]  { --sq-light: #efd8ab; --sq-dark: #84502b; --wood: #4a2c15; --wood-2: #2c1a0b; }
[data-board="green"] { --sq-light: #ebecd0; --sq-dark: #739552; --wood: #33302b; --wood-2: #211f1c; }
[data-board="brown"] { --sq-light: #f0d9b5; --sq-dark: #b58863; --wood: #3a2a1d; --wood-2: #231911; }
[data-board="marble"] { --sq-light: #efe7d9; --sq-dark: #5b3a2a; --wood: #3a2b24; --wood-2: #1f1713; }   /* cream and brown marble */
[data-board="onyx"]   { --sq-light: #f1f0ee; --sq-dark: #1f1f22; --wood: #2e2d30; --wood-2: #161517; }   /* black and white marble */
[data-board="emerald"] { --sq-light: #f1ecdc; --sq-dark: #1b5a44; --wood: #20362c; --wood-2: #101e17; }  /* green and ivory marble */

/* The look of the small pieces (player cards, captured rows, status dot, guide icons) follows the piece set */
[data-pieces="classic"] {
  --skin-w: radial-gradient(circle at 35% 30%, #fffdf6, #e2d0a8);
  --skin-w-shadow: 0 1.5px 0 #a8935f, 0 2px 3px rgba(0, 0, 0, .5);
  --skin-b: radial-gradient(circle at 35% 30%, #6a5e54, #14100d);
  --skin-b-shadow: 0 0 0 1px rgba(227, 176, 75, .5), 0 1.5px 0 #050403, 0 2px 3px rgba(0, 0, 0, .5);
  --skin-radius: 50%;
  --skin-filter: none;
}
[data-pieces="marble"] {
  --disc-w: url("img/piece-white.png");
  --disc-b: url("img/piece-black.png");
  --skin-w: center / cover no-repeat var(--disc-w);
  --skin-w-shadow: 0 1.5px 3px rgba(0, 0, 0, .55);
  --skin-b: center / cover no-repeat var(--disc-b);
  --skin-b-shadow: 0 0 0 1px rgba(227, 176, 75, .4), 0 1.5px 3px rgba(0, 0, 0, .55);
  --skin-radius: 50%;
  --skin-filter: none;
}
[data-pieces="gold"] {                  /* a gold disc (White's side) and a black lacquer disc with gold inlay (Black's side) */
  --disc-w: url("img/piece-gold.png");
  --disc-b: url("img/piece-lacquer.png");
  --skin-w: center / cover no-repeat var(--disc-w);
  --skin-w-shadow: 0 1.5px 3px rgba(0, 0, 0, .55);
  --skin-b: center / cover no-repeat var(--disc-b);
  --skin-b-shadow: 0 0 0 1px rgba(227, 176, 75, .5), 0 1.5px 3px rgba(0, 0, 0, .55);
  --skin-radius: 50%;
  --skin-filter: none;
}
[data-pieces="caps"] {
  --skin-w: repeating-conic-gradient(#eef0f2 0 6deg, #a9b0b7 6deg 12deg);
  --skin-w-shadow: 0 1.5px 0 #7d848b, 0 2px 3px rgba(0, 0, 0, .5);
  --skin-b: repeating-conic-gradient(#c62f2f 0 6deg, #7d1717 6deg 12deg);
  --skin-b-shadow: 0 1.5px 0 #4d0d0d, 0 2px 3px rgba(0, 0, 0, .5);
  --skin-radius: 50%;
  --skin-filter: none;
}

/* Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
body {
  min-height: 100vh;
  color: var(--text);
  font: 15px/1.45 var(--font);
  -webkit-font-smoothing: antialiased;
  /* A dark wooden table with a lamp shining on the board */
  background:
    radial-gradient(ellipse 60% 55% at 50% 50%, rgba(255, 196, 120, .20), transparent 72%),
    radial-gradient(ellipse 120% 100% at 50% 50%, transparent 45%, rgba(0, 0, 0, .7) 100%),
    repeating-linear-gradient(90deg, transparent 0 318px, rgba(0, 0, 0, .5) 318px 320px),
    repeating-linear-gradient(90deg, rgba(0, 0, 0, .16) 0 2px, transparent 2px 6px, rgba(255, 210, 150, .035) 6px 7px, transparent 7px 17px),
    linear-gradient(#3b2514, #26160b);
  background-attachment: fixed;
}
/* Fine grain over the table */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: .5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5  0 0 0 0 .4  0 0 0 0 .3  0 0 0 .9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
[lang="th"] { font-family: var(--font); }
button { font: inherit; color: inherit; cursor: pointer; }
button:disabled { cursor: default; }
svg { width: 1em; height: 1em; }
[hidden] { display: none !important; }
.sr-only {                                 /* there for screen readers, not shown */
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
body.is-dragging { cursor: grabbing; user-select: none; -webkit-user-select: none; }

/* Top bar --------------------------------------------------------------- */
.topbar {
  position: relative;
  display: flex; align-items: center; gap: 28px;
  height: 64px; padding: 0 28px;
  background: linear-gradient(rgba(30, 21, 14, .94), rgba(20, 14, 9, .94));
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(6px);
}
.topbar::after {            /* thin gold line under the bar */
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold) 50%, transparent);
  opacity: .5;
}
.brand { display: flex; align-items: center; gap: 12px; }
.brand__mark { position: relative; width: 38px; height: 38px; }
.brand__mark i { position: absolute; width: 25px; height: 25px; border-radius: 50%; }
.brand__mark i:first-child {
  left: 0; top: 0;
  background: radial-gradient(circle at 35% 30%, #fffdf6, #e2d0a8);
  box-shadow: 0 2px 0 #a8935f, 0 4px 6px rgba(0, 0, 0, .5);
}
.brand__mark i:last-child {
  right: 0; bottom: 0;
  background: radial-gradient(circle at 35% 30%, #6a5e54, #14100d);
  box-shadow: 0 0 0 1.5px rgba(227, 176, 75, .6), 0 2px 0 #050403, 0 4px 6px rgba(0, 0, 0, .6);
}
.brand__text { display: flex; flex-direction: column; line-height: 1.05; }
.brand__text strong { font: 600 22px/1.1 var(--font-display); letter-spacing: .3px; color: var(--gold); }
.brand__text small { margin-top: 2px; color: var(--muted); font-size: 11.5px; letter-spacing: .06em; text-transform: uppercase; }

.topnav { display: flex; gap: 4px; flex: 1; margin-left: 12px; }
.topnav a {
  padding: 8px 14px; border-radius: 8px;
  color: var(--muted); text-decoration: none; font-weight: 600; font-size: 14px;
  transition: color .15s, background .15s;
}
.topnav a:hover { color: var(--text); background: var(--line); }
.topnav a.is-active { color: var(--text); box-shadow: inset 0 -2px 0 var(--gold); border-radius: 8px 8px 0 0; }

.topbar__tools { display: flex; gap: 4px; }
.icon-btn {
  position: relative;
  display: grid; place-items: center;
  width: 40px; height: 40px; border: 0; border-radius: 10px;
  background: transparent; font-size: 21px; color: var(--muted);
  transition: background .15s, color .15s;
}
.icon-btn:hover { background: var(--line); color: var(--gold); }
/* The music button is gold when the music plays, and crossed out when it is off */
#music-btn[aria-pressed="true"] { color: var(--gold); }
#music-btn[aria-pressed="false"]::after {
  content: ""; position: absolute; left: 9px; right: 9px; top: 50%; height: 2px;
  background: currentColor; border-radius: 2px; rotate: -45deg;
}

/* Layout ---------------------------------------------------------------- */
/* Medium screens (default): board with the player bars above and below, panel on the right */
.game {
  display: grid;
  grid-template-columns: var(--board) 350px;
  gap: 34px;
  justify-content: center;
  align-items: start;
  padding: 30px 24px 44px;
}
.board-col { display: flex; flex-direction: column; gap: 30px; }

/* Wide screens: players on the left, board in the middle, panel on the right */
@media (min-width: 1280px) {
  :root { --board: min(calc(100vh - 156px), calc(100vw - 780px), 1000px); }
  .game {
    grid-template-columns: 290px var(--board) 350px;
    grid-template-rows: auto 1fr auto;
    gap: 0 38px;
    padding-top: 36px;
    height: calc(var(--board) + 80px);          /* board + top and bottom padding, so the rows add up exactly */
  }
  .board-col { display: contents; }               /* let the children join the .game grid */
  #player-top    { grid-column: 1; grid-row: 1; align-self: start; }
  #player-bottom { grid-column: 1; grid-row: 3; align-self: end; }
  .legend        { grid-column: 1; grid-row: 2; align-self: center; }
  .board-wrap    { grid-column: 2; grid-row: 1 / 4; }
  .panel         { grid-column: 3; grid-row: 1 / 4; }

  /* In the narrow left column the clock gets its own row */
  .player .clock { grid-column: 1 / -1; width: 100%; height: 52px; justify-content: center; font-size: 33px; }
}

/* Player cards ---------------------------------------------------------- */
.player {
  position: relative;
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 14px;
  min-height: 66px; padding: 10px 14px;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .28);
  transition: border-color .2s, box-shadow .2s;
}
.player.is-turn {
  border-color: rgba(227, 176, 75, .6);
  box-shadow: 0 0 0 1px rgba(227, 176, 75, .25), 0 8px 26px rgba(227, 176, 75, .14);
}
.player.is-thinking { animation: card-pulse 1.6s ease-in-out infinite; }
@keyframes card-pulse { 50% { box-shadow: 0 0 0 1px rgba(227, 176, 75, .5), 0 8px 30px rgba(227, 176, 75, .3); } }

.player__avatar {
  display: grid; place-items: center;
  width: 46px; height: 46px; border-radius: 12px;
  background: radial-gradient(circle at 50% 35%, var(--panel-3), #1c1612);
  box-shadow: inset 0 0 0 1px var(--line);
}
.player__avatar .mini-piece { width: 28px; height: 28px; }
.player__info { display: flex; flex-direction: column; min-width: 0; }
.player__name { display: flex; align-items: center; gap: 8px; min-width: 0; font-weight: 700; font-size: 15.5px; white-space: nowrap; }
.player__who { overflow: hidden; text-overflow: ellipsis; }
.player__line { display: flex; align-items: center; gap: 8px; margin-top: 1px; }
.player__side { color: var(--muted); font-weight: 500; font-size: 12.5px; }
.player.is-turn .player__side { color: var(--gold); }
.player__count {                      /* "8 left": pieces left */
  flex: none; padding: 0 8px; border-radius: 99px;
  background: var(--gold-soft); color: var(--gold);
  font: 700 11.5px/20px var(--font-display);
}
.player__captured { display: flex; flex-wrap: wrap; align-items: center; min-height: 14px; margin-top: 5px; padding-left: 4px; }
.player__captured .mini-piece { width: 14px; height: 14px; margin-left: -4px; }
.player__lead { margin-left: 8px; color: var(--jade); font: 700 12px/1 var(--font-display); }

/* Three dots that bounce while the computer thinks */
.thinking-dots { display: inline-flex; align-items: center; gap: 4px; }
.thinking-dots i { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); animation: dot 1s ease-in-out infinite; }
.thinking-dots i:nth-child(2) { animation-delay: .16s; }
.thinking-dots i:nth-child(3) { animation-delay: .32s; }
@keyframes dot { 0%, 70%, 100% { transform: translateY(0); opacity: .45; } 35% { transform: translateY(-4px); opacity: 1; } }

.clock {
  display: flex; align-items: center; justify-content: flex-end; gap: 8px;
  min-width: 112px; height: 46px; padding: 0 14px;
  border-radius: 10px;
  background: #130f0c; color: #8c7f70;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, .5), inset 0 0 0 1px var(--line);
  font: 500 25px/1 var(--font-display); font-variant-numeric: tabular-nums; letter-spacing: .5px;
  transition: background .2s, color .2s;
}
.clock svg { font-size: 16px; opacity: 0; }
.player.is-turn .clock {
  background: linear-gradient(180deg, #f6d27a, var(--gold));
  color: #2a1b06;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18), 0 4px 12px rgba(227, 176, 75, .28);
}
.player.is-turn .clock svg { opacity: .6; }
.clock.is-low { color: var(--danger); }
.player.is-turn .clock.is-low { background: linear-gradient(180deg, #f07a62, var(--danger)); color: #fff; }

/* Small pieces: player cards, captured rows, move-list header, game-over window */
.mini-piece { display: inline-block; width: 22px; height: 22px; border-radius: var(--skin-radius); filter: var(--skin-filter); }
.mini-piece--w { background: var(--skin-w); box-shadow: var(--skin-w-shadow); }
.mini-piece--b { background: var(--skin-b); box-shadow: var(--skin-b-shadow); }

/* Board ----------------------------------------------------------------- */
.board-wrap {
  position: relative; isolation: isolate;
  width: var(--board); height: var(--board);
  border-radius: 4px;
}
/* The wooden frame, drawn behind the board */
.board-wrap::before {
  content: ""; position: absolute; z-index: -1;
  inset: calc(var(--frame) * -1);
  border-radius: 12px;
  background:
    repeating-linear-gradient(92deg, rgba(0, 0, 0, .07) 0 2px, transparent 2px 9px),
    linear-gradient(145deg, var(--wood), var(--wood-2));
  box-shadow:
    inset 0 1px 0 rgba(255, 224, 170, .25),
    inset 0 0 0 2px rgba(0, 0, 0, .25),
    0 1px 0 #1d1107, 0 2px 0 #1a0f06, 0 3px 0 #170d05, 0 4px 0 #140b04, 0 5px 0 #110903, 0 6px 0 #0e0702,   /* the thickness of the board */
    0 18px 28px rgba(0, 0, 0, .55),
    0 38px 70px rgba(0, 0, 0, .45);
}
/* A thin gold line between the frame and the squares (blue while you look back through the game) */
.board-wrap::after {
  content: ""; position: absolute; z-index: 1; pointer-events: none;
  inset: -3px; border: 2px solid rgba(227, 176, 75, .7); border-radius: 6px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), inset 0 0 14px rgba(0, 0, 0, .35);
  transition: border-color .2s;
}
.board-wrap.is-reviewing::after { border-color: var(--focus); }
.board {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: 100%; height: 100%;
  border-radius: 3px; overflow: hidden;
  position: relative; isolation: isolate;
  user-select: none; -webkit-user-select: none;
}
/* Sheen from the lamp (top left) and a shadow where the surface meets the frame */
.board::after {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(118deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, 0) 34%, rgba(0, 0, 0, 0) 62%, rgba(0, 0, 0, .18) 100%);
  box-shadow: inset 0 0 14px 2px rgba(0, 0, 0, .45);
}
.board-row { display: contents; }

.sq {
  position: relative;
  border: 0; padding: 0; margin: 0;
  background: var(--sq-light);
  overflow: visible;                 /* let a sliding piece leave its square */
  cursor: default;
}
.sq--dark { background: var(--sq-dark); }
.sq.is-target, .sq.is-capture-target, .piece--movable { cursor: pointer; }

/* Wood grain and a soft glow on the teak squares */
[data-board="teak"] .sq--light {
  background:
    repeating-linear-gradient(98deg, rgba(150, 100, 40, .07) 0 2px, transparent 2px 10px),
    radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .12), transparent 70%),
    var(--sq-light);
}
[data-board="teak"] .sq--dark {
  background:
    repeating-linear-gradient(98deg, rgba(0, 0, 0, .08) 0 2px, transparent 2px 9px),
    radial-gradient(circle at 50% 40%, rgba(255, 255, 255, .07), transparent 70%),
    linear-gradient(135deg, #8d5731, #744425);
}

/* The marble boards: each square is cut from one big slab of marble (img/marble-*.jpg), so the
   veins sit where they would on a real inlaid board. --c and --r say where the square is. */
[data-board="marble"] .sq, [data-board="onyx"] .sq, [data-board="emerald"] .sq {
  background-size: var(--board) var(--board);
  background-position: calc(var(--c) * var(--sq) * -1) calc(var(--r) * var(--sq) * -1);
}
[data-board="marble"] .sq--light  { background-image: url("img/marble-cream.jpg"); }
[data-board="marble"] .sq--dark   { background-image: url("img/marble-brown.jpg"); }
[data-board="onyx"] .sq--light    { background-image: url("img/marble-white.jpg"); }
[data-board="onyx"] .sq--dark     { background-image: url("img/marble-black.jpg"); }
[data-board="emerald"] .sq--light { background-image: url("img/marble-ivory.jpg"); }
[data-board="emerald"] .sq--dark  { background-image: url("img/marble-green.jpg"); }

/* Small bevel on every tile, and the grain is shifted a little from tile to tile */
.sq { box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .13), inset -1px -1px 0 rgba(0, 0, 0, .16); }
[data-board="teak"] .sq:nth-child(3n + 1) { background-position: 0 0, 0 0, 0 0; }
[data-board="teak"] .sq:nth-child(3n + 2) { background-position: 4px 0, 0 0, 0 0; }
[data-board="teak"] .sq:nth-child(3n)     { background-position: 7px 0, 0 0, 0 0; }

/* Highlight layer (::before). The ::after layer marks a piece that would be taken (see .is-victim). */
.sq::before, .sq::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.sq--dark:hover::before { background: var(--hl-hover); }
.sq.is-last::before { background: var(--hl-last); }
.sq.is-selected::before { background: var(--hl-select); }
.sq.is-target:hover::before, .sq.is-capture-target:hover::before { background: rgba(247, 214, 128, .3); }
.sq:focus-visible { outline: 3px solid var(--focus); outline-offset: -3px; z-index: 2; }

/* The signs on the board. All are drawn from the centre of their square. */

/* A quiet move: a small gold bead with a soft glow that breathes. */
.hint-dot {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  width: 26%; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 36% 30%, #fff8dc 0%, #f7db8f 26%, #dcaa40 66%, #a4731c 100%);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 0 0 1px rgba(70, 38, 6, .45), 0 0 12px rgba(247, 212, 120, .55);
  animation: bead 1.9s ease-in-out infinite;
  transition: scale .15s;
}
@keyframes bead {
  50% { scale: 1.1; box-shadow: 0 1px 2px rgba(0, 0, 0, .55), 0 0 0 1px rgba(70, 38, 6, .45), 0 0 18px 2px rgba(247, 212, 120, .85); }
}
.sq.is-target:hover .hint-dot { animation: none; scale: 1.35; }

/* Where a piece lands after a capture: a glowing ruby ring around a small ruby bead. */
.hint-ring {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  width: 66%; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; pointer-events: none;
  border: max(2.5px, calc(var(--sq) * .042)) solid #f0624a;
  background: radial-gradient(circle, rgba(240, 98, 74, .34) 0%, rgba(240, 98, 74, .1) 62%, transparent 100%);
  box-shadow: 0 0 12px rgba(240, 98, 74, .6), inset 0 0 12px rgba(240, 98, 74, .4);
  animation: ring 1.5s ease-in-out infinite;
  transition: scale .15s;
}
.hint-ring::after {
  content: ""; position: absolute; inset: 33%; border-radius: 50%;
  background: radial-gradient(circle at 36% 30%, #ffc9bb, #f0624a 55%, #a82c19);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .45);
}
@keyframes ring {
  50% { scale: 1.07; box-shadow: 0 0 18px 2px rgba(240, 98, 74, .85), inset 0 0 14px rgba(240, 98, 74, .55); }
}
.sq.is-capture-target:hover .hint-ring { animation: none; scale: 1.14; }

/* A piece that would be taken by the selected move: a ruby target ring with a cross. */
.sq.is-victim::after {
  inset: 27%; z-index: 4; border-radius: 50%;
  border: max(2.5px, calc(var(--sq) * .04)) solid #f0624a;
  background:
    linear-gradient(45deg, transparent 43%, #f0624a 43% 57%, transparent 57%),
    linear-gradient(-45deg, transparent 43%, #f0624a 43% 57%, transparent 57%);
  box-shadow: 0 0 10px rgba(240, 98, 74, .75), inset 0 0 8px rgba(240, 98, 74, .45);
}

/* Where a piece was taken in the last move: a dashed outline, like the ghost of the piece, with a thin cross. */
.x-mark {
  position: absolute; left: 50%; top: 50%; z-index: 2;
  width: 62%; aspect-ratio: 1; translate: -50% -50%;
  border-radius: 50%; pointer-events: none;
  border: max(2px, calc(var(--sq) * .03)) dashed rgba(255, 232, 190, .85);
  background: radial-gradient(circle, rgba(0, 0, 0, .3) 0%, rgba(0, 0, 0, .08) 70%, transparent 71%);   /* a shallow hollow where it stood */
  filter: drop-shadow(0 1px 1.5px rgba(0, 0, 0, .55));
}
.x-mark::before, .x-mark::after {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 38%; height: max(2px, 6%); border-radius: 2px;
  background: rgba(255, 232, 190, .9);
}
.x-mark::before { translate: -50% -50%; rotate: 45deg; }
.x-mark::after  { translate: -50% -50%; rotate: -45deg; }
.sq.is-target .x-mark, .sq.is-capture-target .x-mark { display: none; }   /* a move sign on the same square wins */

/* The number of the square, in its corner */
.sq-num {
  position: absolute; top: 3%; left: 5%; z-index: 1;
  font: 600 max(8.5px, calc(var(--sq) * .165))/1 var(--font-display);
  color: var(--sq-light); opacity: .7;
  pointer-events: none; user-select: none;
}
.hide-numbers .sq-num { display: none; }

/* Pieces ---------------------------------------------------------------- */
.piece {
  position: absolute; inset: 9%;
  z-index: 3;
  border-radius: 50%;
  transition: translate .15s ease, scale .15s ease, opacity .2s ease;
}
.piece::before {                      /* the inner ring on top of the disc */
  content: ""; position: absolute; inset: 17%; border-radius: 50%;
}
.piece .crown {
  position: absolute; inset: 27%; width: 46%; height: 46%; z-index: 1;
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .4));
}
.piece--movable { touch-action: none; }          /* so a finger can drag it instead of scrolling the page */
.sq--dark:hover .piece--movable { translate: 0 -3px; }
.sq.is-selected .piece {              /* the piece you are holding is lifted off the board */
  translate: 0 calc(var(--lift) * -1.6);
  scale: 1.06;
  filter: drop-shadow(calc(var(--lift) * 1.5) calc(var(--lift) * 3) calc(var(--lift) * 2) rgba(0, 0, 0, .45));
}
.piece.is-dragged { transition: none; z-index: 6; scale: 1.12; pointer-events: none; }

/* --- Classic: ivory and ebony --- */
[data-pieces="classic"] .piece--w {
  background: radial-gradient(circle at 36% 28%, #fffdf6 0%, #f3e8d0 38%, #dac7a1 78%, #c4ae82 100%);
  box-shadow:
    inset 0 calc(var(--lift) * -.6) 0 rgba(140, 105, 50, .28),
    inset 0 2px 2px rgba(255, 255, 255, .95),
    0 var(--lift) 0 #a8935f,
    calc(var(--lift) * .9) calc(var(--lift) + 3px) calc(var(--lift) * 1.8) rgba(0, 0, 0, .5);
}
[data-pieces="classic"] .piece--w::before {
  background:
    radial-gradient(circle at 40% 30%, rgba(255, 255, 255, .6), transparent 62%),
    repeating-radial-gradient(circle, transparent 0 3px, rgba(150, 115, 60, .13) 3px 4px);
  border: 2px solid rgba(150, 115, 60, .34);
  box-shadow: inset 0 1px 2px rgba(120, 90, 40, .35), 0 1px 0 rgba(255, 255, 255, .8);
}
[data-pieces="classic"] .piece--b {
  background: radial-gradient(circle at 36% 28%, #6a5e54 0%, #342d27 40%, #181310 80%, #0d0a08 100%);
  box-shadow:
    inset 0 calc(var(--lift) * -.6) 0 rgba(0, 0, 0, .5),
    inset 0 2px 2px rgba(255, 235, 200, .22),
    0 var(--lift) 0 #050403,
    calc(var(--lift) * .9) calc(var(--lift) + 3px) calc(var(--lift) * 1.8) rgba(0, 0, 0, .65);
}
[data-pieces="classic"] .piece--b::before {
  background:
    radial-gradient(circle at 40% 30%, rgba(255, 235, 200, .16), transparent 62%),
    repeating-radial-gradient(circle, transparent 0 3px, rgba(255, 235, 200, .07) 3px 4px);
  border: 2px solid rgba(227, 176, 75, .42);
  box-shadow: inset 0 2px 3px rgba(0, 0, 0, .6);
}
/* A king (ฮอส) looks like a taller stack of discs */
[data-pieces="classic"] .piece--king { transform: translateY(calc(var(--lift) * -2)); }
[data-pieces="classic"] .piece--king.piece--w {
  box-shadow:
    inset 0 calc(var(--lift) * -.6) 0 rgba(140, 105, 50, .28), inset 0 2px 2px #fff,
    0 var(--lift) 0 #a8935f, 0 calc(var(--lift) * 2) 0 #f0e4c8, 0 calc(var(--lift) * 3) 0 #a8935f,
    calc(var(--lift) * 1.6) calc(var(--lift) * 3 + 4px) calc(var(--lift) * 2) rgba(0, 0, 0, .5);
}
[data-pieces="classic"] .piece--king.piece--b {
  box-shadow:
    inset 0 calc(var(--lift) * -.6) 0 rgba(0, 0, 0, .5), inset 0 2px 2px rgba(255, 235, 200, .22),
    0 var(--lift) 0 #050403, 0 calc(var(--lift) * 2) 0 #3a332d, 0 calc(var(--lift) * 3) 0 #050403,
    calc(var(--lift) * 1.6) calc(var(--lift) * 3 + 4px) calc(var(--lift) * 2) rgba(0, 0, 0, .65);
}
.piece--w .crown { color: #b97a12; }
.piece--b .crown { color: var(--gold); }

/* --- Bottle caps (ฝาขวด): the traditional street set --- */
[data-pieces="caps"] .piece { inset: 8%; }
[data-pieces="caps"] .piece--w {
  background: repeating-conic-gradient(#eef0f2 0 6deg, #a9b0b7 6deg 12deg);
  box-shadow: 0 var(--lift) 0 #7d848b, calc(var(--lift) * .9) calc(var(--lift) + 3px) calc(var(--lift) * 1.8) rgba(0, 0, 0, .5);
}
[data-pieces="caps"] .piece--w::before {
  inset: 11%;
  background:
    radial-gradient(circle, transparent 0 48%, #d23b2f 49% 58%, transparent 59%),
    radial-gradient(circle at 38% 32%, #ffffff, #d5dade 70%, #b9c0c6);
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .2);
}
[data-pieces="caps"] .piece--b {
  background: repeating-conic-gradient(#c62f2f 0 6deg, #7d1717 6deg 12deg);
  box-shadow: 0 var(--lift) 0 #4d0d0d, calc(var(--lift) * .9) calc(var(--lift) + 3px) calc(var(--lift) * 1.8) rgba(0, 0, 0, .55);
}
[data-pieces="caps"] .piece--b::before {
  inset: 11%;
  background:
    radial-gradient(circle, transparent 0 48%, #f5d36a 49% 56%, transparent 57%),
    radial-gradient(circle at 38% 32%, #e85a4f, #b3221f 70%, #8a1515);
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .3);
}
/* A Hos is traditionally two caps stacked */
[data-pieces="caps"] .piece--king { transform: translateY(calc(var(--lift) * -1.6)); }
[data-pieces="caps"] .piece--king.piece--w { box-shadow: 0 var(--lift) 0 #8f969c, 0 calc(var(--lift) * 2) 0 #eef0f2, 0 calc(var(--lift) * 3) 0 #7d848b, calc(var(--lift) * 1.6) calc(var(--lift) * 3 + 4px) 8px rgba(0, 0, 0, .5); }
[data-pieces="caps"] .piece--king.piece--b { box-shadow: 0 var(--lift) 0 #5e1010, 0 calc(var(--lift) * 2) 0 #c62f2f, 0 calc(var(--lift) * 3) 0 #4d0d0d, calc(var(--lift) * 1.6) calc(var(--lift) * 3 + 4px) 8px rgba(0, 0, 0, .55); }

/* --- Photo discs: the marble set (photographs) and the gold set (pictures made by a script) ---
   Both are round pictures seen from above (img/piece-*.png, set by --disc-w / --disc-b).
   A man is just the picture (it already shows its own rounded edge) with a soft
   shadow. A king is two discs: the lower one, a little darker, peeks out below.
   The cast shadow and the orange "must capture" glow are drop-shadow filters that
   follow the whole round shape. --glow is how strong the orange is (0–1), and the
   pulse animates it. */
@property --glow { syntax: "<number>"; inherits: false; initial-value: 0; }
:is([data-pieces="marble"], [data-pieces="gold"]) {
  .piece {
    --shadow: drop-shadow(calc(var(--lift) * .6) calc(var(--lift) * 1.1) calc(var(--lift) * 1.3) rgba(0, 0, 0, .55));
    --glow-filter:
      drop-shadow(0 0 calc(var(--glow) * 2px) rgba(255, 163, 26, var(--glow)))
      drop-shadow(0 0 calc(var(--glow) * 6px) rgba(255, 163, 26, var(--glow)))
      drop-shadow(0 0 calc(var(--glow) * 12px) rgba(255, 163, 26, calc(var(--glow) * .75)));
    inset: 8%;
    border-radius: 50%;
    filter: var(--shadow) var(--glow-filter);
  }
  .piece::after,             /* the top disc */
  .piece--king::before {     /* a king's lower disc */
    content: ""; position: absolute; inset: 0; border-radius: 50%;
    background: center / cover no-repeat;
  }
  .piece::after { z-index: 1; }
  .piece--w::after, .piece--w.piece--king::before { background-image: var(--disc-w); }
  .piece--b::after, .piece--b.piece--king::before { background-image: var(--disc-b); }
  .piece--king::before { translate: 0 12%; filter: brightness(.74); }
  .piece .crown { z-index: 2; inset: 25%; width: 50%; height: 50%; }
  .piece--w .crown { filter: drop-shadow(0 0 2px rgba(0, 0, 0, .6)) drop-shadow(0 1px 0 rgba(0, 0, 0, .45)); }
  .piece--b .crown { filter: drop-shadow(0 0 2px rgba(0, 0, 0, .95)) drop-shadow(0 1px 0 rgba(0, 0, 0, .6)); }
  /* A king stands higher and casts a bigger shadow */
  .piece--king {
    transform: translateY(calc(var(--lift) * -1.4));
    --shadow: drop-shadow(calc(var(--lift) * 1.1) calc(var(--lift) * 2) calc(var(--lift) * 1.6) rgba(0, 0, 0, .6));
  }
  /* On the black and white board, a black piece sits on a black square: a faint light rim keeps it visible */
  &[data-board="onyx"] .piece--b { box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .34); }
  .sq.is-selected .piece,
  .piece.is-dragged {
    --shadow: drop-shadow(calc(var(--lift) * 1.5) calc(var(--lift) * 3) calc(var(--lift) * 2) rgba(0, 0, 0, .5));
    filter: var(--shadow) var(--glow-filter);
  }
}
/* On the gold disc the crown is dark, like a stamp pressed into the metal */
[data-pieces="gold"] .piece--w .crown { color: #4a2e07; filter: drop-shadow(0 1px 0 rgba(255, 233, 170, .65)); }

/* Piece states ---------------------------------------------------------- */
.piece.is-ghost { opacity: .45; filter: saturate(.4); }           /* a piece that is about to be taken (its sign is .is-victim) */
/* A piece that must capture: an orange ring (a glow for marble) that pulses.
   Without animation it just stays lit, so nobody misses it. */
.piece.is-must { outline: 3px solid rgba(255, 163, 26, .85); outline-offset: 3px; animation: must-pulse 1.4s ease-in-out infinite; }
@keyframes must-pulse {
  0%, 100% { outline-color: rgba(255, 163, 26, .95); outline-offset: 2px; }
  50%      { outline-color: rgba(255, 163, 26, .25); outline-offset: 5px; }
}
:is([data-pieces="marble"], [data-pieces="gold"]) .piece.is-must { outline: 0; --glow: .85; animation: must-glow 1.4s ease-in-out infinite; }
@keyframes must-glow { 0%, 100% { --glow: 1; } 50% { --glow: .25; } }
.hide-must .piece.is-must { outline: 0; animation: none; --glow: 0; }
.piece.is-promoted { animation: promote .7s ease-out; }
@keyframes promote { from { scale: 1.25; filter: brightness(1.4); } }
.piece.is-captured { z-index: 2; pointer-events: none; animation: captured .34s ease-in forwards; }
@keyframes captured { to { opacity: 0; scale: .5; } }
.piece.is-shake { animation: shake .45s ease; }
@keyframes shake { 20% { translate: -5px 0; } 40% { translate: 5px 0; } 60% { translate: -4px 0; } 80% { translate: 3px 0; } }
.piece.is-flash { animation: flash .7s ease; }
@keyframes flash { 30% { scale: 1.16; } 60% { scale: 1; } 80% { scale: 1.1; } }

.hide-hints .hint-dot, .hide-hints .hint-ring, .hide-hints .sq.is-victim::after { display: none; }

/* Side panel ------------------------------------------------------------ */
.panel {
  display: flex; flex-direction: column;
  height: calc(var(--board) + 156px);
  background: linear-gradient(180deg, var(--panel-2), var(--panel) 160px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .35);
}
.panel__head { display: flex; align-items: center; padding: 16px 18px 6px; }
.mode-chip {                          /* the kind of game; click it to start a new one */
  padding: 5px 12px; border: 1px solid transparent; border-radius: 99px;
  background: var(--gold-soft); color: var(--gold);
  font-weight: 700; font-size: 12.5px; white-space: nowrap;
  transition: border-color .15s, background .15s;
}
.mode-chip::after { content: " ▾"; font-size: 10px; }
.mode-chip:hover { border-color: rgba(227, 176, 75, .5); background: rgba(227, 176, 75, .22); }

.status, .statusbar {
  display: flex; gap: 14px; align-items: flex-start;
  border-radius: 12px; background: rgba(0, 0, 0, .22);
  border: 1px solid var(--line);
  border-left: 4px solid var(--jade);
}
.status { margin: 10px 16px 8px; padding: 14px 16px; }
.status.is-warn, .statusbar.is-warn { border-left-color: var(--must-glow); background: rgba(255, 163, 26, .09); }
.status.is-done, .statusbar.is-done { border-left-color: var(--gold); background: var(--gold-soft); }
.status.is-calm, .statusbar.is-calm { border-left-color: #8c7f70; }
.status__dot { flex: none; width: 24px; height: 24px; margin-top: 1px; border-radius: 50%; }
.status__dot[data-color="w"] { background: var(--skin-w); box-shadow: var(--skin-w-shadow); filter: var(--skin-filter); border-radius: var(--skin-radius); }
.status__dot[data-color="b"] { background: var(--skin-b); box-shadow: var(--skin-b-shadow); filter: var(--skin-filter); border-radius: var(--skin-radius); }
.status__title { display: block; font: 600 17px/1.25 var(--font-display); }
.status__text { margin: 3px 0 0; color: var(--muted); font-size: 13px; }

/* On phones the status is a strip right under the board (see the phone layout below) */
.statusbar { display: none; align-items: center; gap: 12px; min-height: 48px; padding: 8px 12px; }
.statusbar .status__dot { margin-top: 0; width: 22px; height: 22px; }
.statusbar > div { min-width: 0; }
.statusbar .status__title { font-size: 15px; }
.statusbar .status__text { display: block; margin: 0; font-size: 12.5px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.tabs { display: flex; gap: 4px; padding: 6px 16px 0; border-bottom: 1px solid var(--line); }
.tab {
  padding: 10px 14px; border: 0; background: none;
  color: var(--muted); font-weight: 700; font-size: 13.5px;
  border-bottom: 2px solid transparent;
  transition: color .15s;
}
.tab:hover { color: var(--text); }
.tab.is-active { color: var(--gold); border-bottom-color: var(--gold); }

.tabpanel { flex: 1; min-height: 0; overflow-y: auto; }
.tabpanel--moves { display: flex; flex-direction: column; overflow: hidden; }

/* Looking back through the game */
.review-bar { display: flex; align-items: center; gap: 6px; padding: 8px 12px; border-bottom: 1px solid var(--line); }
.rv {
  display: grid; place-items: center; min-width: 38px; height: 32px; padding: 0 10px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--panel-2); color: #dccfbf; font-size: 16px;
  transition: background .15s, color .15s, border-color .15s;
}
.rv:hover:not(:disabled) { background: var(--panel-3); color: var(--gold); border-color: rgba(227, 176, 75, .35); }
.rv:disabled { opacity: .35; }
.rv--live {
  width: auto; margin-left: auto; font-size: 12.5px; font-weight: 700;
  border-color: transparent; color: #2a1b06;
  background: linear-gradient(180deg, #f6d27a, var(--gold));
}
.rv--live:hover:not(:disabled) { background: linear-gradient(180deg, #ffe093, #ecb955); color: #2a1b06; }

.mv-head {
  display: grid; grid-template-columns: 46px 1fr 1fr; align-items: center;
  padding: 7px 12px 5px; border-bottom: 1px solid var(--line);
  color: var(--muted); font-size: 11.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
}
.mv-head span { display: flex; align-items: center; gap: 7px; padding-left: 9px; }
.mv-head span:first-child { padding: 0; }
.mv-head .mini-piece { width: 12px; height: 12px; }
.mv-scroll { flex: 1; min-height: 0; overflow-y: auto; }

.movelist { list-style: none; margin: 0; padding: 6px 0; font-variant-numeric: tabular-nums; }
.movelist li {
  display: grid; grid-template-columns: 46px 1fr 1fr;
  align-items: center; padding: 0 12px;
  font-size: 14px; font-weight: 600;
}
.movelist li:nth-child(even) { background: rgba(255, 224, 170, .035); }
.movelist .num { color: var(--muted); font-weight: 500; padding: 7px 0 7px 6px; }
.movelist .mv {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 4px 9px; margin: 2px 0; border: 0; border-radius: 6px;
  background: none; color: inherit; font: inherit; justify-self: start; min-width: 64px; text-align: left;
}
.movelist .mv:hover { background: var(--line); }
.movelist .mv.is-current { background: var(--gold-soft); color: var(--gold); }
.movelist .mv:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.movelist .mv .x { color: #f08a78; padding: 0 1px; }
.movelist .mv .k { width: 12px; height: 12px; color: var(--gold); flex: none; }
.movelist .empty { grid-column: 1 / -1; padding: 22px 8px; color: var(--muted); font-size: 13.5px; font-weight: 500; }

.rules { margin: 0; padding: 14px 18px 12px 36px; display: grid; gap: 11px; font-size: 13.5px; color: #dccfbf; }
.rules b { display: block; color: var(--text); font-size: 13px; }
.rules li::marker { color: var(--gold); }
.diagram { margin: 0; padding: 4px 18px 8px; }
.diagram svg { display: block; width: 100%; max-width: 190px; height: auto; aspect-ratio: 1; margin: 0 auto; border-radius: 6px; }
.diagram figcaption { margin-top: 9px; color: var(--muted); font-size: 12.5px; }
.diagram b { color: var(--jade); }
.rules__more { margin: 0; padding: 4px 18px 18px; }

.controls {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 7px;
  padding: 12px 14px 14px; border-top: 1px solid var(--line); background: rgba(0, 0, 0, .2);
}
.ctrl {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 4px 9px; border: 1px solid var(--line); border-radius: 10px;
  background: var(--panel-2); color: #dccfbf;
  font-size: 11.5px; font-weight: 700;
  transition: background .15s, color .15s, border-color .15s, transform .1s, opacity .15s;
}
.ctrl svg { font-size: 20px; }
.ctrl:hover:not(:disabled) { background: var(--panel-3); color: var(--gold); border-color: rgba(227, 176, 75, .35); }
.ctrl:active:not(:disabled) { transform: translateY(1px); }
.ctrl:disabled { opacity: .38; }
.ctrl--danger:hover:not(:disabled) { background: rgba(226, 89, 63, .2); color: #ffb3a3; border-color: rgba(226, 89, 63, .4); }
.ctrl:focus-visible, .btn:focus-visible, .swatch:focus-visible, .tab:focus-visible, .icon-btn:focus-visible, .rv:focus-visible, .mode-chip:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 2px;
}

/* Board guide (left column, wide screens only) -------------------------- */
.legend {
  display: none;
  padding: 16px 16px 14px;
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
  background: rgba(0, 0, 0, .14);
}
.legend h3 { margin: 0 0 12px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.legend ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.legend li { display: flex; align-items: center; gap: 12px; font-size: 13px; color: #dccfbf; line-height: 1.35; }
.legend b { color: var(--must-glow); }
.lg {                                  /* a tiny square showing the marker */
  position: relative; flex: none; display: grid; place-items: center;
  width: 30px; height: 30px; border-radius: 7px; background: var(--sq-dark);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25);
}
.lg .hint-dot { width: 40%; animation: none; }       /* the real signs, shown small */
.lg .hint-ring { width: 66%; animation: none; }
.lg .x-mark { width: 66%; }
.lg--must::after { content: ""; width: 18px; height: 18px; border-radius: var(--skin-radius); background: var(--skin-w); filter: var(--skin-filter); outline: 2.5px solid var(--must-glow); outline-offset: 1.5px; }
.lg--king svg    { position: relative; width: 17px; height: 17px; color: var(--gold); }
.lg--king        { background: var(--skin-b); border-radius: var(--skin-radius); box-shadow: 0 0 0 1.5px rgba(227, 176, 75, .55); }

/* Wide screens, rules that must come after the base styles above */
@media (min-width: 1280px) {
  .panel { height: var(--board); }
  .legend { display: block; }
  .player { grid-template-columns: auto 1fr; row-gap: 10px; padding: 12px 14px 14px; }
}

/* ...and the board guide is only shown when there is room for it */
@media (min-width: 1280px) and (max-width: 1339px), (min-width: 1280px) and (max-height: 700px) {
  .legend { display: none; }
}

/* Buttons --------------------------------------------------------------- */
.btn {
  padding: 13px 18px; border: 1px solid var(--line-strong); border-radius: 10px;
  background: var(--panel-2); font-weight: 700; font-size: 15px;
  transition: background .15s;
}
.btn:hover { background: var(--panel-3); }
.btn--wide { width: 100%; }
.btn--primary {
  border-color: transparent; color: #2a1b06;
  background: linear-gradient(180deg, #f6d27a, var(--gold));
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .18), 0 6px 16px rgba(227, 176, 75, .25);
}
.btn--primary:hover { background: linear-gradient(180deg, #ffe093, #ecb955); }
.btn--primary.btn--danger {
  color: #fff; background: linear-gradient(180deg, #f07a62, var(--danger));
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .2), 0 6px 16px rgba(226, 89, 63, .25);
}
.btn--primary.btn--danger:hover { background: linear-gradient(180deg, #f58c76, #e86a50); }

/* Settings drawer ------------------------------------------------------- */
.drawer { position: fixed; inset: 0; z-index: 50; }
.drawer__backdrop { position: absolute; inset: 0; background: rgba(8, 5, 3, .6); backdrop-filter: blur(2px); }
.drawer__sheet {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(390px, 100%); padding: 20px 22px; overflow-y: auto;
  background: var(--panel); border-left: 1px solid var(--line-strong);
  box-shadow: -14px 0 40px rgba(0, 0, 0, .5);
}
.drawer__head { display: flex; justify-content: space-between; align-items: center; }
.drawer h2 { margin: 0; font: 600 21px var(--font-display); color: var(--gold); }
.drawer h3, .modal h3 { margin: 24px 0 10px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.drawer__more { margin: 26px 0 8px; }
.swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.swatches--4 { grid-template-columns: repeat(4, 1fr); }
.swatch {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  padding: 11px 6px 12px; border: 2px solid transparent; border-radius: 12px;
  background: var(--panel-2); font-size: 13px; font-weight: 700;
  transition: border-color .15s, background .15s;
}
.swatch:hover { background: var(--panel-3); }
.swatch small { color: var(--muted); font-weight: 500; font-size: 11.5px; }
.swatch.is-active { border-color: var(--gold); background: var(--gold-soft); }
.swatch__tiles {
  width: 58px; height: 58px; margin-bottom: 3px; border-radius: 8px;
  background: conic-gradient(var(--d) 0 25%, var(--l) 0 50%, var(--d) 0 75%, var(--l) 0);
  background-size: 50% 50%;
  box-shadow: 0 0 0 2px rgba(0, 0, 0, .35);
}
.swatch__tiles--photo { background: center / cover no-repeat; }      /* a board picture instead of plain colours */
.swatch__piece { width: 40px; height: 40px; margin: 9px; border-radius: 50%; }
.swatch__piece--classic { background: radial-gradient(circle at 34% 28%, #fffdf6, #f3e8d0 42%, #c4ae82); box-shadow: 0 3px 0 #a8935f, 0 5px 6px rgba(0, 0, 0, .45); }
.swatch__piece--marble { background: center / cover no-repeat url("img/piece-white.png"); box-shadow: 0 3px 7px rgba(0, 0, 0, .5); }
/* two overlapping discs: the gold one in front of the black one */
.swatch__piece--gold {
  border-radius: 0; filter: drop-shadow(0 0 1px rgba(255, 255, 255, .4)) drop-shadow(0 3px 4px rgba(0, 0, 0, .5));
  background: url("img/piece-gold.png") right bottom / 32px 32px no-repeat, url("img/piece-lacquer.png") left top / 32px 32px no-repeat;
}
.swatch__piece--caps { background: radial-gradient(circle, #e85a4f 0 52%, transparent 53%), repeating-conic-gradient(#c62f2f 0 6deg, #7d1717 6deg 12deg); box-shadow: 0 3px 0 #4d0d0d, 0 5px 6px rgba(0, 0, 0, .45); }

.toggle { display: flex; align-items: center; gap: 12px; padding: 10px 0; font-size: 14px; cursor: pointer; }
.toggle input { position: absolute; opacity: 0; }
.toggle span { position: relative; width: 42px; height: 24px; border-radius: 99px; background: #4d4339; transition: background .15s; flex: none; }
.toggle span::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .15s; }
.toggle input:checked + span { background: var(--gold-deep); }
.toggle input:checked + span::after { transform: translateX(18px); }
.toggle input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.slider { display: flex; align-items: center; gap: 14px; padding: 0 0 10px 54px; color: var(--muted); font-size: 12.5px; }
.slider input { flex: 1; min-width: 0; accent-color: var(--gold); }

/* Windows: New game, game over, questions, How to play ------------------ */
.modal {
  position: fixed; inset: 0; z-index: 40;
  display: grid; overflow-y: auto;                 /* the card centres itself with margin: auto, and scrolls when it is too tall */
  background: rgba(8, 5, 3, .62); backdrop-filter: blur(3px);
  animation: fade .25s ease;
}
#confirm { z-index: 45; }
.modal__card {
  position: relative;
  width: min(380px, calc(100% - 32px)); margin: auto;
  padding: 30px 26px 24px; text-align: center;
  background: linear-gradient(180deg, var(--panel-2), var(--panel));
  border: 1px solid var(--line-strong); border-radius: 18px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, .65);
  animation: pop .3s cubic-bezier(.2, 1.4, .4, 1);
}
.modal__card--small { width: min(340px, calc(100% - 32px)); padding: 26px 24px 22px; }
.modal__card--form { width: min(440px, calc(100% - 32px)); padding: 24px 24px 22px; text-align: left; }
.modal__card--form h2 { text-align: center; }
.modal__card--tour { width: min(520px, calc(100% - 32px)); padding: 26px 26px 22px; text-align: left; }
.modal__card--tour h2 { text-align: center; }
.modal__x { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; font-size: 18px; }
.modal__trophy {
  display: grid; place-items: center; width: 68px; height: 68px; margin: -66px auto 12px;
  border-radius: 50%; background: linear-gradient(#f6d27a, #c99522); color: #4a3307;
  font-size: 36px; box-shadow: 0 0 0 6px var(--panel-2), 0 10px 24px rgba(0, 0, 0, .5);
}
.modal h2 { margin: 0; font: 600 30px var(--font-display); color: var(--gold); }
.modal__card--small h2, .modal__card--form h2, .modal__card--tour h2 { font-size: 24px; }
.modal__reason { margin: 5px 0 20px; color: var(--muted); font-size: 14px; }
.modal__score {
  display: flex; align-items: center; justify-content: space-around;
  padding: 14px; margin-bottom: 20px; border-radius: 12px; background: rgba(0, 0, 0, .25);
  border: 1px solid var(--line);
}
.modal__score div { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 13px; }
.modal__score small { color: var(--muted); }
.modal__vs { font: 600 24px var(--font-display); }
.modal__actions { display: grid; gap: 9px; margin-top: 22px; }
.modal__actions--row { grid-auto-flow: column; grid-auto-columns: 1fr; margin-top: 4px; }
.modal__reason + .modal__actions { margin-top: 0; }
.hint { margin: 10px 2px 0; color: var(--muted); font-size: 13px; }
.hint--warn { color: #f0b27a; }

/* The Play online window */
.on-intro { margin: 4px 2px 6px; line-height: 1.5; }
.room-code {
  margin: 16px 0 12px; padding: 16px 10px; border-radius: 12px; text-align: center;
  background: rgba(0, 0, 0, .28); border: 1px dashed var(--line-strong);
  color: var(--gold); font: 600 40px/1 var(--font-display); letter-spacing: .14em; user-select: all;
}
.room-link {
  width: 100%; padding: 11px 12px; border: 1px solid var(--line-strong); border-radius: 10px;
  background: rgba(0, 0, 0, .25); color: var(--muted); font: 13px var(--font);
}
.field { display: grid; gap: 7px; margin-top: 6px; color: var(--muted); font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.field input {
  width: 100%; padding: 13px 14px; border: 2px solid var(--line-strong); border-radius: 12px;
  background: rgba(0, 0, 0, .25); color: var(--text);
  font: 600 26px/1 var(--font-display); letter-spacing: .2em; text-align: center; text-transform: uppercase;
}
.field input::placeholder { color: #5c5045; }
.field input:focus, .room-link:focus { border-color: var(--gold); outline: 0; }
.room-status { min-height: 1.4em; margin: 14px 0 0; text-align: center; color: var(--muted); font-size: 13.5px; }
.room-status.is-error { color: #f0b27a; }
.tour { margin: 18px 0 0; padding-left: 22px; display: grid; gap: 12px; font-size: 14px; color: #dccfbf; }
.tour b { display: block; color: var(--text); }
.tour li::marker { color: var(--gold); font-weight: 700; }
.tour__diagram { display: block; width: 140px; height: 140px; margin-top: 10px; border-radius: 6px; }
@keyframes fade { from { opacity: 0; } }
@keyframes pop { from { transform: scale(.9); opacity: 0; } }

/* A short message at the bottom */
.toast {
  position: fixed; left: 50%; bottom: 28px; z-index: 60;
  max-width: min(92vw, 460px); padding: 11px 18px; border-radius: 12px;
  background: var(--panel-2); border: 1px solid var(--line-strong);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .5);
  font-size: 14px; font-weight: 600; text-align: center;
  opacity: 0; transform: translate(-50%, 16px); pointer-events: none;
  transition: opacity .25s, transform .25s;
}
.toast.is-shown { opacity: 1; transform: translate(-50%, 0); }

/* Phones and small tablets: one column, controls pinned to the bottom ---- */
@media (max-width: 980px) {
  :root { --board: min(calc(100vw - 40px), calc(100svh - 300px), 640px); }
  .game { grid-template-columns: var(--board); padding: 14px 12px 120px; gap: 22px; }
  .board-col { gap: 14px; }
  .panel { height: auto; }
  .panel .status { display: none; }                    /* the strip under the board shows it instead */
  .statusbar { display: flex; }
  .tabpanel { max-height: 260px; }
  .topnav { display: none; }
  .topbar { justify-content: space-between; padding: 0 14px; height: 56px; }
  .controls {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
    padding: 8px 10px calc(8px + env(safe-area-inset-bottom));
    background: #120e0b; border-top: 1px solid var(--line-strong);
  }
  .player { min-height: 56px; padding: 7px 10px; gap: 10px; }
  .player__avatar { width: 40px; height: 40px; }
  .player__avatar .mini-piece { width: 24px; height: 24px; }
  .player__name { font-size: 14.5px; gap: 6px; }
  .clock { min-width: 92px; height: 40px; font-size: 21px; padding: 0 10px; }
  .toast { bottom: calc(86px + env(safe-area-inset-bottom)); }
  .drawer__sheet { width: 100%; }
}
@media (max-width: 420px) {
  .brand__text small { display: none; }               /* the subtitle would wrap onto two lines */
}

/* A phone held sideways: the board fills the height, everything else is on the right */
@media (max-width: 980px) and (orientation: landscape) and (max-height: 560px) {
  :root { --board: calc(100svh - 76px); }
  .topbar { height: 48px; }
  .game {
    grid-template-columns: var(--board) minmax(0, 420px); grid-template-rows: auto auto auto 1fr;
    gap: 8px 16px; padding: 10px 12px; justify-content: center; align-items: start;
  }
  .board-col { display: contents; }
  .board-wrap { grid-column: 1; grid-row: 1 / 6; }
  #player-top { grid-column: 2; grid-row: 1; }
  .statusbar { grid-column: 2; grid-row: 2; }
  #player-bottom { grid-column: 2; grid-row: 3; }
  .panel { grid-column: 2; grid-row: 4; background: none; border: 0; box-shadow: none; overflow: visible; }
  .panel__head, .tabs, .tabpanel { display: none; }
  .controls { position: static; padding: 0; background: none; border: 0; }
  .toast { bottom: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}