/* Navkakari (Nine Men's Morris) */

:root {
  --bg: #0b0b16;
  --panel: #15152a;
  --panel-2: #1c1c36;
  --line: #2a2a4a;
  --text: #eceaf6;
  --muted: #9a9ac0;
  --accent: #5858FD;
  --amber: #ffb703;
  --gold: #f2c14e;
  --danger: #ff5a5f;
  --ivory: #f6efe0;
  --ivory-edge: #bfae8a;
  --ebony: #2a1d18;
  --ebony-edge: #0e0907;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(800px 400px at 15% -10%, rgba(88, 88, 253, 0.16), transparent 60%),
    radial-gradient(700px 400px at 90% 0%, rgba(255, 183, 3, 0.08), transparent 60%),
    var(--bg);
  color: var(--text);
  font-family: "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

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

/* Topbar */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 26px;
  border-bottom: 1px solid var(--line);
  background: rgba(11, 11, 22, 0.7);
  backdrop-filter: blur(8px);
  position: sticky;
  top: 0;
  z-index: 10;
}
.topbar h1 { margin: 0; font-size: 19px; letter-spacing: 1.5px; text-transform: uppercase; }
.topbar-actions { display: flex; gap: 12px; align-items: center; }
.ghost-btn {
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
}
.ghost-btn:hover { color: var(--text); border-color: var(--accent); }
.icon-only { min-width: 44px; padding-left: 12px; padding-right: 12px; }
.ghost-btn .sound-off { display: none; }
.ghost-btn .sound-on svg, .ghost-btn .sound-off svg { width: 16px; height: 16px; vertical-align: -3px; fill: currentColor; }
.ghost-btn[aria-pressed="true"] .sound-on { display: none; }
.ghost-btn[aria-pressed="true"] .sound-off { display: inline; }
.ghost-btn[aria-pressed="true"] { color: #ff8c8c; border-color: rgba(255, 140, 140, 0.35); }

/* Layout */
.layout {
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 24px 60px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 36px;
  align-items: start;
}

.board-side { display: flex; flex-direction: column; align-items: center; gap: 18px; min-width: 0; }

.status-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; }
.status {
  margin: 0;
  min-height: 26px;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.2px;
}
.chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.turn-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0;
  padding: 6px 15px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--panel);
  font-size: 13px;
  color: var(--muted);
}
.turn-dot {
  width: 13px; height: 13px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.35);
}
.turn-dot.side1 { background: var(--ivory); }
.turn-dot.side2 { background: var(--ebony); border-color: #7a6a60; }
@keyframes pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.7); opacity: 0.55; } }

/* The board */
/* The board is as large as the width allows and the height can hold. */
.board-wrap {
  --chrome: 250px;               /* height of everything above and below the board */
  width: min(100%, 720px, calc(100vh - var(--chrome)));
  width: min(100%, 720px, calc(100dvh - var(--chrome)));
  min-width: 260px;
}
.board { display: block; width: 100%; height: auto; touch-action: manipulation; }
.board.is-busy .hit { cursor: progress; }

.bl { fill: none; stroke: #3b2310; stroke-width: 5; stroke-linejoin: round; stroke-linecap: round; }
.bdot { fill: #3b2310; }

.hit { cursor: pointer; outline: none; }
.hit circle { fill: transparent; }
.hit:focus-visible circle { stroke: var(--gold); stroke-width: 4; fill: rgba(242, 193, 78, 0.18); }

/* Highlights */
.hl-open { fill: rgba(255, 255, 255, 0.28); stroke: none; }
.hl-sel { fill: rgba(242, 193, 78, 0.22); stroke: var(--gold); stroke-width: 4; }
.hl-dest { fill: rgba(70, 200, 140, 0.55); stroke: #1c7a50; stroke-width: 3; animation: ping 1.1s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
.hl-rem { fill: rgba(255, 90, 95, 0.18); stroke: var(--danger); stroke-width: 4; stroke-dasharray: 7 6; animation: spin 6s linear infinite; transform-box: fill-box; transform-origin: center; }
.hl-last { fill: none; stroke: rgba(255, 255, 255, 0.5); stroke-width: 3; }
.hl-hint { fill: none; stroke: #46c8ff; stroke-width: 5; stroke-dasharray: 3 7; stroke-linecap: round; animation: spin 5s linear infinite; transform-box: fill-box; transform-origin: center; }
.mill-line { stroke: rgba(242, 193, 78, 0.55); stroke-width: 12; stroke-linecap: round; }
.mill-line.fresh { stroke: #ffd966; stroke-width: 14; stroke-dasharray: 520; animation: draw 0.7s ease-out both; filter: drop-shadow(0 0 7px rgba(255, 217, 102, 0.95)); }
@keyframes ping { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.22); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes draw { from { stroke-dashoffset: 520; } to { stroke-dashoffset: 0; } }

/* Pieces. The group is moved with a CSS transform, which is what lets a
   slide animate; the scale effects live on the inner group, whose origin is
   the piece centre. */
.pc { transition: transform 0.32s cubic-bezier(.3, .8, .3, 1); pointer-events: none; }
.pc-in { transform-origin: 0 0; transition: transform 0.28s ease, opacity 0.28s ease; }
.pc-body { stroke-width: 3; }
.pc.side1 .pc-body { fill: var(--ivory); stroke: var(--ivory-edge); }
.pc.side1 .pc-shine { fill: rgba(255, 255, 255, 0.55); }
.pc.side1 .pc-mark { fill: #8b7a55; }
.pc.side2 .pc-body { fill: var(--ebony); stroke: var(--ebony-edge); }
.pc.side2 .pc-shine { fill: rgba(255, 255, 255, 0.12); }
.pc.side2 .pc-mark { fill: #8f7a6c; }
.pc .pc-in { filter: drop-shadow(0 3px 3px rgba(0, 0, 0, 0.45)); }
.pc.in-mill .pc-body { stroke: var(--gold); stroke-width: 5; }
.pc.drop .pc-in { animation: drop 0.3s ease-out both; }
.pc.gone .pc-in { transform: scale(0); opacity: 0; }
@keyframes drop { from { transform: scale(1.8); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Side panel */
.panel-side { display: flex; flex-direction: column; gap: 18px; min-width: 0; }
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 18px 20px 20px;
}
.card h2 {
  margin: 0 0 14px;
  font-size: 11px;
  letter-spacing: 1.8px;
  text-transform: uppercase;
  color: var(--muted);
  font-weight: 700;
}

.pcard {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-2);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.pcard + .pcard { margin-top: 10px; }
.pcard.is-turn { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(242, 193, 78, 0.18); }
.pcard.is-fly::after {
  content: "Flying";
  font-size: 10.5px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: #46c8ff;
  border: 1px solid #46c8ff;
  border-radius: 999px;
  padding: 1px 7px;
}
.swatch { width: 26px; height: 26px; border-radius: 50%; flex: 0 0 auto; border: 2px solid; }
.swatch.side1 { background: var(--ivory); border-color: var(--ivory-edge); }
.swatch.side2 { background: var(--ebony); border-color: #7a6a60; }
.pinfo { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
.pn { font-weight: 700; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pw { font-size: 12px; color: var(--muted); }
.pcount { display: flex; gap: 12px; margin: 0; }
.pcount div { text-align: center; }
.pcount dt { font-size: 10px; letter-spacing: 0.6px; text-transform: uppercase; color: var(--muted); }
.pcount dd { margin: 2px 0 0; font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }

.coach-text { margin: 0 0 14px; font-size: 14px; line-height: 1.65; color: var(--text); }
.history {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 220px;
  overflow-y: auto;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}
.history li { padding: 5px 8px 5px 12px; border-left: 4px solid var(--line); color: var(--muted); }
.history li.side1 { border-left-color: var(--ivory-edge); }
.history li.side2 { border-left-color: #6b5a50; }
.history li.is-cap { color: var(--danger); padding-left: 24px; }
.history li.empty { border-left-color: transparent; font-style: italic; }

.card-keys ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.card-keys li { display: flex; align-items: baseline; gap: 10px; font-size: 13px; color: var(--muted); }
.card-keys kbd, .modal-body kbd {
  display: inline-block;
  min-width: 24px;
  padding: 1px 7px;
  border: 1px solid var(--line);
  border-bottom-width: 2px;
  border-radius: 6px;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  font-size: 12px;
  text-align: center;
}

/* Controls */
.segmented {
  display: flex;
  padding: 4px;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--panel-2);
}
.segmented button {
  flex: 1;
  padding: 9px 10px;
  border: none;
  border-radius: 7px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 13.5px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.segmented button:hover { color: var(--text); }
.segmented button.is-on { background: var(--accent); color: #fff; font-weight: 600; }
.hint { margin: 10px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--muted); }

.board-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.btn {
  padding: 11px 22px;
  border-radius: 10px;
  border: 1px solid transparent;
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .12s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:disabled { opacity: 0.45; cursor: default; transform: none; }
.btn-small { padding: 8px 16px; font-size: 13.5px; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover { background: #4646e0; }
.btn-ghost { background: transparent; border-color: var(--line); color: var(--text); }
.btn-ghost:hover:not(:disabled) { border-color: var(--accent); }

.names { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.names label { display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--muted); }
.names input[type="text"] {
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: var(--panel-2);
  color: var(--text);
  font: inherit;
  font-size: 14px;
  min-width: 0;
}
.names input[type="text"]:disabled { opacity: 0.55; }
.check { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--muted); line-height: 1.5; cursor: pointer; }
.check input { margin-top: 3px; width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--accent); }

/* Modals: head / scrolling body / foot, so the close button and the primary
   action never scroll out of reach. */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(4, 4, 12, 0.8);
  backdrop-filter: blur(6px);
}
.modal {
  width: min(560px, 100%);
  max-height: 86vh;
  max-height: 86dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 16px;
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6);
}
.modal-head {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 18px 24px 14px;
  border-bottom: 1px solid var(--line);
}
.modal-head h2 { margin: 0; font-size: 20px; }
.has-back { display: flex; align-items: center; justify-content: flex-start; }
.head-text { min-width: 0; }
.kicker { margin: 0 0 2px; font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--muted); }
.brand-title {
  font-size: 30px !important;
  letter-spacing: 6px;
  background: linear-gradient(90deg, var(--gold), #ff9f43);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.icon-btn {
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
}
.icon-btn:hover { color: var(--text); border-color: var(--accent); }
.modal-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  padding: 6px 24px 22px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.7;
}
.modal-body h3 { margin: 20px 0 8px; font-size: 13px; letter-spacing: 0.4px; color: var(--text); }
.modal-body p { margin: 0 0 12px; }
.modal-body strong { color: var(--text); }
.modal-foot {
  flex-shrink: 0;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 14px 24px;
  border-top: 1px solid var(--line);
  background: var(--panel-2);
}
.modal-start .modal-foot .btn-play { min-width: 180px; }

/* The way back, as an icon button identical to the other games */
.icon-back {
  display: inline-grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  margin: 0;
  flex: 0 0 auto;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 11px;
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  opacity: 0.82;
  text-decoration: none;
}
.icon-back:hover { opacity: 1; background: rgba(255, 255, 255, 0.10); }
.icon-back svg { display: block; }


@media (max-width: 520px) {
  .topbar { padding: 12px 14px; gap: 8px; }
  .topbar h1 { font-size: 16px; letter-spacing: 1px; }
  .topbar-actions { gap: 8px; }
  .ghost-btn { padding: 8px 12px; }
  .layout { padding: 16px 12px 40px; }
  .names { grid-template-columns: 1fr; }
  .modal-body { padding-left: 18px; padding-right: 18px; }
  .modal-foot { padding: 12px 14px; flex-wrap: wrap; }
  .brand-title { font-size: 24px !important; letter-spacing: 4px; }
  .pcount { gap: 8px; }
}

/* Touch screens: bigger targets, and a panel measured in dvh so the Start
   button is never behind the browser's own toolbar. */
@media (pointer: coarse) {
  .segmented button { min-height: 44px; }
  .ghost-btn, .icon-btn, .btn { min-height: 44px; }
  .icon-back { width: 44px; height: 44px; }
  .overlay { height: 100vh; height: 100dvh; padding: 10px; align-items: end; }
  .modal { max-height: calc(100vh - 20px); max-height: calc(100dvh - 20px - env(safe-area-inset-bottom)); }
  .modal-foot { padding: 10px 14px 12px; }
  .modal-start .modal-foot .btn-primary { flex: 1 1 100%; min-height: 50px; font-size: 16px; }
  .card-keys { display: none; }
}

/* ======================================================================
   Layout for every device and every browser zoom level.

   Zooming makes the viewport smaller in CSS pixels, so a 1280 x 720
   laptop at 150% is an 853 x 480 viewport: the breakpoints below are
   written in CSS pixels and cover both. Three arrangements:

   1. Narrow (under 900px wide): one column, status above the board, the
      cards below. On a tablet the cards sit two to a row.
   2. Wide (900px and up), or a short landscape screen (a phone on its
      side, or a laptop zoomed in): the board takes the whole height and
      the status, controls and cards stack in a column beside it, so the
      board is never squeezed by the things around it.
   3. Very large screens: the board and the column grow, up to a cap.
   ====================================================================== */

/* Prompts and messages never push the board about. */
.chat-note {
  position: fixed;
  top: 68px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 70;
  max-width: calc(100vw - 24px);
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);
}
.banner {
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  width: auto;
  margin: 0 auto;
  max-width: 560px;
  z-index: 60;
  background: var(--panel);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
}

/* Notches and rounded corners on a phone held on its side. */
.topbar, .layout {
  padding-left: max(14px, env(safe-area-inset-left));
  padding-right: max(14px, env(safe-area-inset-right));
}

/* A visible keyboard focus on everything that can be pressed. */
.btn:focus-visible, .ghost-btn:focus-visible, .icon-btn:focus-visible, .icon-back:focus-visible,
.segmented button:focus-visible, .check input:focus-visible, .names input:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 2px;
}

/* Narrow: tablets and phones in portrait. */
@media (max-width: 899px) {
  .layout { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-top: 14px; }
  .board-side { gap: 14px; }
  .panel-side {
    width: min(100%, 760px);
    max-width: none;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 14px;
    align-items: start;
  }
  .panel-side > .card { margin: 0; }
}
@media (max-width: 520px) {
  .layout { padding-top: 10px; gap: 12px; }
  .status { min-height: 2.7em; font-size: 16px; }
  .turn-chip { font-size: 12px; padding: 4px 11px; }
  .board-actions .btn { padding: 9px 14px; font-size: 13.5px; }
  .card { padding: 14px 14px 16px; }
}

/* Wide, or short and landscape: the board beside a column of controls. */
@media (min-width: 900px), (max-height: 560px) and (min-width: 560px) {
  .layout {
    max-width: 1480px;
    grid-template-columns: minmax(0, 1fr) clamp(320px, 30vw, 440px);
    column-gap: clamp(20px, 3vw, 48px);
    row-gap: 14px;
    padding-top: 16px;
    padding-bottom: 28px;
  }
  .board-side, .panel-side { display: contents; }
  .board-wrap {
    --chrome: 112px;
    grid-column: 1;
    grid-row: 1 / span 10;
    order: -1;
    width: min(100%, 880px, calc(100vh - var(--chrome)));
    width: min(100%, 880px, calc(100dvh - var(--chrome)));
    min-width: 0;
    justify-self: center;
    align-self: start;
    position: sticky;
    top: 82px;
  }
  .status-wrap, .banner, .board-actions, .reviewbar, .panel-side > .card { grid-column: 2; min-width: 0; }
  .status-wrap { order: 1; align-items: flex-start; text-align: left; }
  .board-actions { order: 2; justify-content: flex-start; }
  .banner { order: 3; position: static; width: auto; max-width: none; margin: 0; box-shadow: none; }
  .reviewbar { order: 3; width: auto; align-items: flex-start; }
  .panel-side > .players { order: 4; }
  .reviewbar .rv-text { text-align: left; }
  .rv-controls { justify-content: flex-start; }
  .panel-side > #coachCard { order: 6; }
  .panel-side > #quickCard { order: 7; }
  .panel-side > .history-card { order: 8; }
  .panel-side > .card-keys { order: 9; }
  .chips { justify-content: flex-start; }
  .history { max-height: 240px; }
}

/* Short landscape (a phone on its side, a laptop at 150% zoom or more):
   reclaim the height the top bar was taking. */
@media (max-height: 560px) and (min-width: 560px) {
  .topbar { position: static; padding-top: 8px; padding-bottom: 8px; }
  .topbar h1 { font-size: 15px; }
  .topbar .ghost-btn, .topbar .icon-btn { min-height: 38px; }
  .topbar .icon-back { width: 38px; height: 38px; }
  .layout { grid-template-columns: minmax(0, 1fr) minmax(280px, 40vw); padding-top: 10px; row-gap: 10px; column-gap: 16px; }
  .board-wrap { --chrome: 76px; top: 8px; }
  .status { font-size: 15px; min-height: 0; }
  .card { padding: 12px 14px 14px; }
  .pcount { gap: 8px; }
  .modal-head { padding: 10px 18px; }
  .brand-title { font-size: 22px !important; letter-spacing: 4px; }
  .modal-body { padding: 0 18px 14px; }
  .modal-foot { padding: 10px 18px; }
}

/* Large screens: let the board and the column breathe. */
@media (min-width: 1600px) and (min-height: 900px) {
  .board-wrap { width: min(100%, 1000px, calc(100dvh - var(--chrome))); }
  .layout { max-width: 1700px; }
  .status { font-size: 19px; }
  .card h2 { font-size: 12px; }
  .history li, .card-keys li { font-size: 14px; }
}

/* On a large screen the start dialog is a little wider and taller, so its
   options are seen without scrolling. */
@media (min-width: 1000px) and (min-height: 820px) {
  .modal-start { width: min(640px, 100%); max-height: 92dvh; }
}

/* A bottom sheet suits a phone; a tablet or a big touch screen gets a
   centred dialog. */
@media (pointer: coarse) and (min-width: 700px) {
  .overlay { align-items: center; padding: 24px; }
  .modal { max-height: calc(100dvh - 48px); }
}

/* Online play */
#modePicker, .seg-board { flex-wrap: wrap; }
#modePicker button { flex: 1 1 22%; }
.seg-board button { flex: 1 1 28%; }
.names.one { grid-template-columns: 1fr; margin-top: 12px; }
.code-input { font-size: 22px !important; letter-spacing: 8px; text-transform: uppercase; text-align: center; font-weight: 700; }
.hint.is-error { color: var(--danger); }
.hint.center { text-align: center; }
.net-chip.is-up::before, .net-chip.is-down::before {
  content: "";
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  margin-right: 8px;
  background: #3bd68a;
}
.net-chip.is-down::before { background: var(--danger); }

.banner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  width: min(100%, 560px);
  padding: 12px 16px;
  border: 1px solid var(--gold);
  border-radius: 12px;
  background: rgba(242, 193, 78, 0.12);
  font-size: 14px;
}
.banner[hidden] { display: none; }
.banner-actions { display: flex; gap: 10px; }

.lobby-code {
  margin: 14px 0 4px;
  text-align: center;
  font-size: 54px;
  font-weight: 800;
  letter-spacing: 14px;
  padding-left: 14px;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
  -webkit-user-select: text;
  user-select: text;
}
.lobby-link {
  margin: 8px 0 4px;
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: 10px;
  font-size: 12.5px;
  word-break: break-all;
  text-align: center;
  color: var(--muted);
  -webkit-user-select: text;
  user-select: text;
}
.lobby-status { margin: 16px 0 0; text-align: center; font-size: 15px; color: var(--text); }
.modal-lobby .modal-foot { flex-wrap: wrap; }
@media (max-width: 520px) {
  .lobby-code { font-size: 42px; letter-spacing: 10px; padding-left: 10px; }
}

/* The options chosen on the start screen, as one quiet line */
.rules-note {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  letter-spacing: 0.1px;
  color: var(--muted);
  opacity: 0.8;
  text-align: inherit;
}

/* ---- The last move: where from, where to, what was taken ---- */
.last-from { fill: rgba(255, 255, 255, 0.12); stroke: rgba(255, 255, 255, 0.9); stroke-width: 3; stroke-dasharray: 5 6; }
.last-to { fill: none; stroke: rgba(255, 255, 255, 0.95); stroke-width: 4; }
.last-mark.side2 .last-from, .last-mark.side2 .last-to { stroke: #aab0ff; }
.last-mark.side2 .last-from { fill: rgba(170, 176, 255, 0.14); }
.last-line-shadow { stroke: rgba(0, 0, 0, 0.35); stroke-width: 11; stroke-linecap: round; }
.last-line { stroke: #fff6d0; stroke-width: 6; stroke-linecap: round; }
.last-head { fill: #fff6d0; stroke: rgba(0, 0, 0, 0.35); stroke-width: 2; stroke-linejoin: round; }
.last-mark.side2 .last-line { stroke: #aab0ff; }
.last-mark.side2 .last-head { fill: #aab0ff; }
.last-gone-ring { fill: rgba(255, 90, 95, 0.14); stroke: #ff5a5f; stroke-width: 3; stroke-dasharray: 4 5; }
.last-gone-x { stroke: #ff5a5f; stroke-width: 6; stroke-linecap: round; }
.last-mark { animation: last-in .5s ease-out both; }
@keyframes last-in { from { opacity: 0; } to { opacity: 1; } }
.last-note {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--muted);
  text-align: inherit;
}
.last-note[hidden] { display: none; }

/* ---- Which kukris can move ---- */
.hl-can {
  fill: rgba(242, 193, 78, 0.16);
  stroke: var(--gold);
  stroke-width: 4;
  transform-box: fill-box;
  transform-origin: center;
  animation: can-breathe 2s ease-in-out infinite;
}
.hl-can.is-dim { opacity: 0.4; animation: none; }
@keyframes can-breathe {
  0%, 100% { opacity: 0.55; transform: scale(0.95); }
  50% { opacity: 1; transform: scale(1.07); }
}
.hl-prev { fill: rgba(70, 200, 140, 0.4); stroke: #1c7a50; stroke-width: 3; stroke-dasharray: 4 5; pointer-events: none; }
/* a kukri that can move sits up off the board; the others stay as they are */
.pc.can-move .pc-in { transform: translateY(-4px) scale(1.08); filter: drop-shadow(0 8px 5px rgba(0, 0, 0, 0.42)); }

/* the row of nine dots on each player card */
.tray { display: flex; gap: 5px; flex: 1 0 100%; padding-top: 2px; }
.kk { width: 14px; height: 14px; border-radius: 50%; border: 2px solid; position: relative; box-sizing: border-box; }
.kk.side1 { border-color: var(--ivory-edge); }
.kk.side2 { border-color: #7a6a60; }
.kk.on.side1 { background: var(--ivory); }
.kk.on.side2 { background: var(--ebony); }
.kk.hand { background: transparent; }
.kk.lost { opacity: 0.35; border-style: dashed; }
.kk.lost::after { content: ""; position: absolute; left: 1px; right: 1px; top: 50%; height: 2px; background: var(--danger); transform: rotate(-35deg); }

/* ---- Moves that arrive, public rooms ---- */

/* The board's edge says whose turn it is. Gold and steady for you; a slow
   blue breath while the other side is choosing. No spinner, no dots. */
.turn-ring { stroke-width: 7; opacity: 0; transition: opacity .4s ease, stroke .4s ease; pointer-events: none; }
.turn-ring.mine { stroke: var(--gold); opacity: 0.85; }
.turn-ring.waiting { stroke: #7f87ff; animation: breathe 2.6s ease-in-out infinite; }
.turn-ring.off { opacity: 0; }
@keyframes breathe { 0%, 100% { opacity: 0.18; } 50% { opacity: 0.8; } }
.pcard.is-turn { animation: card-breathe 2.8s ease-in-out infinite; }
@keyframes card-breathe {
  0%, 100% { box-shadow: 0 0 0 3px rgba(242, 193, 78, 0.12); }
  50% { box-shadow: 0 0 0 6px rgba(242, 193, 78, 0.26); }
}

/* A piece is picked up, glides, and settles. */
.pc { transition-timing-function: cubic-bezier(.22, 1, .36, 1); }
.pc.lift .pc-in { transform: scale(1.2); filter: drop-shadow(0 11px 9px rgba(0, 0, 0, 0.42)); }
.pc.settle .pc-in { animation: settle .32s ease-out; }
@keyframes settle { 0% { transform: scale(1.16); } 55% { transform: scale(0.94); } 100% { transform: scale(1); } }
.pc.drop .pc-in { animation: drop .42s cubic-bezier(.3, 1.4, .5, 1) both; }
@keyframes drop { 0% { transform: scale(1.9); opacity: 0; } 55% { transform: scale(0.92); opacity: 1; } 100% { transform: scale(1); opacity: 1; } }
.pc.gone .pc-in { transform: scale(0.2); opacity: 0; transition: transform .36s ease-in, opacity .36s ease-in; }

/* Marks that fade by themselves (layer gFx). */
.fx-ripple { fill: none; stroke: rgba(255, 255, 255, 0.85); stroke-width: 4; transform-box: fill-box; transform-origin: center; animation: ripple .75s ease-out forwards; pointer-events: none; }
@keyframes ripple { from { transform: scale(0.5); opacity: 0.9; } to { transform: scale(2.1); opacity: 0; } }
.fx-pick { fill: rgba(127, 135, 255, 0.18); stroke: #7f87ff; stroke-width: 4; transform-box: fill-box; transform-origin: center; animation: pick .66s ease-out forwards; pointer-events: none; }
@keyframes pick { 0% { transform: scale(1.5); opacity: 0; } 35% { transform: scale(1); opacity: 1; } 100% { transform: scale(1); opacity: 0.1; } }
.fx-trail { stroke: rgba(255, 255, 255, 0.55); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 2 12; animation: trail 1s ease-out forwards; pointer-events: none; }
@keyframes trail { from { opacity: 0.9; } to { opacity: 0; } }
.fx-bit { fill: #ffd966; animation: bit .72s ease-out forwards; pointer-events: none; }
.fx-burst.side2 .fx-bit { fill: #c9b8ff; }
@keyframes bit { from { transform: translate(0, 0) scale(1); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(0.2); opacity: 0; } }
.fx-ring { fill: none; stroke: #ff7a7f; stroke-width: 5; transform-box: fill-box; transform-origin: center; animation: ripple .6s ease-out forwards; pointer-events: none; }

/* The list of public rooms */
.room-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; max-height: 260px; overflow-y: auto; }
.room-list li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel-2);
  animation: room-in .3s ease-out both;
}
@keyframes room-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.room-list li b { display: block; color: var(--text); font-size: 15px; }
.room-meta { display: block; font-size: 12.5px; line-height: 1.5; color: var(--muted); }
.room-empty { justify-content: center !important; text-align: center; color: var(--muted); font-size: 13.5px; line-height: 1.6; }
.btn-join { background: var(--accent); color: #fff; padding: 9px 18px; flex: 0 0 auto; }
.btn-join:hover { background: #4646e0; }

/* Clocks, review, quick messages, stats */
.pclock {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  font-size: 18px;
  padding: 4px 10px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: var(--panel);
  color: var(--muted);
  min-width: 62px;
  text-align: center;
}
.pclock.is-run { color: var(--text); border-color: var(--gold); }
.pclock.is-low { color: var(--danger); border-color: var(--danger); }
.pclock.is-low.is-run { animation: pulse 1s ease-in-out infinite; }
.pclock[hidden] { display: none; }
.pcard { flex-wrap: wrap; }

.chat-note {
  margin: 0;
  padding: 7px 16px;
  border-radius: 999px;
  background: rgba(88, 88, 253, 0.18);
  border: 1px solid var(--accent);
  font-size: 14px;
}
.chat-note[hidden] { display: none; }

.quick-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.quick-grid .btn { padding: 8px 10px; font-size: 13px; }

.reviewbar {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  width: min(100%, 560px);
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--panel);
}
.reviewbar[hidden] { display: none; }
.rv-text { margin: 0; font-size: 14.5px; font-weight: 600; text-align: center; min-height: 22px; }
.rv-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.board-actions[hidden] { display: none; }

.stats-line { color: var(--text); opacity: 0.85; }

/* A game control is not text: no selection and no callout on a long press. */
button, kbd, summary, label,
.board, .hit, .chips, .topbar, .topbar-actions, .board-actions,
.segmented, .pcard,
a.icon-back, a.btn,
[role="button"], [role="radio"], [role="gridcell"], [role="checkbox"], [role="switch"] {
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
input[type="text"] { -webkit-user-select: text; user-select: text; }

@media (prefers-reduced-motion: reduce) {
  .hl-dest, .hl-rem, .hl-hint, .hl-can, .last-mark, .pclock.is-low.is-run, .turn-ring.waiting, .pcard.is-turn, .room-list li { animation: none; }
  .turn-ring.waiting { opacity: 0.6; }
  .pc, .pc-in { transition: none; }
  .pc.drop .pc-in, .pc.settle .pc-in, .mill-line.fresh { animation: none; }
  #gFx { display: none; }
}

/* THEME START - generated by tools/gen-theme.js, do not edit here */
/* Light theme. Every game was drawn dark first, and every one of them names
   its colours through the same handful of variables, so the light theme is
   mostly those variables redefined. What follows the variables are the few
   surfaces that carry a colour of their own. A game's own light fixes sit
   below the END marker, in that game's stylesheet. */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #f4f4f8;
  --panel: #ffffff;
  --panel-2: #eceef6;
  --line: #d6d8e6;
  --text: #1c1c2b;
  --muted: #585a74;
  --accent: #4a4ae8;
  --amber: #b86a00;
  --teal: #0b8a80;
  --saffron: #c25f00;
  --green: #17864a;
  --red: #c42b2b;
  --rose: #c9365a;
}
:root[data-theme="light"] body { background: var(--bg); color: var(--text); }
:root[data-theme="light"] .topbar,
:root[data-theme="light"] .hud { background: rgba(255, 255, 255, 0.94); }
:root[data-theme="light"] .hud-btn[aria-pressed="true"] { color: #b3261e; border-color: rgba(179, 38, 30, 0.35); }
:root[data-theme="light"] .overlay { background: rgba(28, 28, 43, 0.45); }
:root[data-theme="light"] .modal,
:root[data-theme="light"] .panel,
:root[data-theme="light"] .intro-card,
:root[data-theme="light"] .done-card { background: var(--panel); box-shadow: 0 18px 50px rgba(28, 28, 60, 0.14); }
:root[data-theme="light"] .btn-primary { color: #fff; }
:root[data-theme="light"] kbd { background: var(--panel-2); color: var(--text); border-color: var(--line); }
:root[data-theme="light"] .beta { background: #fff4e5; border-color: #f0c48a; color: #5c3a0b; }
:root[data-theme="light"] .beta a { color: #8a4b00; }
:root[data-theme="light"] .feedback.is-right { color: #146b3a; }
:root[data-theme="light"] .feedback.is-wrong { color: #a4231f; }
:root[data-theme="light"] .foot-bar a,
:root[data-theme="light"] .cross a { color: #0b7a71; }
:root[data-theme="light"] .foot-steps a.is-here .step-n { color: #fff; }

/* The toggle itself: a sun in the dark, a moon in the light, so it always
   shows what pressing it will do - the icon alone says that, so the label
   is announced to a screen reader (title/aria-label, set in the script
   below) rather than spelled out next to it on every single page. */
.theme-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.theme-toggle svg { width: 16px; height: 16px; flex: 0 0 auto; }
.theme-toggle .ico-moon { display: none; }
:root[data-theme="light"] .theme-toggle .ico-sun { display: none; }
:root[data-theme="light"] .theme-toggle .ico-moon { display: inline; }
.theme-toggle .theme-label {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* The Play button. Every game's way into play is the same button: the widest,
   tallest thing on its start screen, with a play triangle, so nobody has to
   work out which of the options starts the game. It lives in this block
   because this block already goes into every game. */
.btn-play:not([hidden]) {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex: 1 1 auto;
  min-height: 54px !important;
  font-size: 17px !important;
  font-weight: 700;
  letter-spacing: 0.2px;
  box-shadow: 0 8px 22px rgba(74, 74, 232, 0.35);
}
/* On a Sanskrit start screen it is the whole width of the card. */
.intro-card .btn-play:not([hidden]) { display: flex !important; width: 100%; margin-top: 6px; }
.btn-play::before {
  content: "";
  width: 14px;
  height: 16px;
  flex: 0 0 auto;
  background: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}
.btn-play:focus-visible { outline: 3px solid #ffd166; outline-offset: 3px; }
@media (prefers-reduced-motion: no-preference) {
  .btn-play { animation: btn-play-glow 2.4s ease-in-out infinite; }
  .btn-play:hover, .btn-play:focus-visible { animation: none; }
}
@keyframes btn-play-glow {
  0%, 100% { box-shadow: 0 8px 22px rgba(74, 74, 232, 0.35); }
  50% { box-shadow: 0 8px 30px rgba(74, 74, 232, 0.6); }
}
/* THEME END */

/* COMPACT PANELS (13/10/2026): start, pause and result panels use less room. Paddings and
   type only; buttons and their 12px spacing are left to the rules above. */
.overlay .modal-head, .overlay .panel-head, .overlay .m-head { padding-top: 10px; padding-bottom: 6px; }
.overlay .modal-head h1, .overlay .panel-head h1 { font-size: 20px; line-height: 1.15; }
.overlay .modal-head h2, .overlay .panel-head h2, .overlay .m-head h2 { font-size: 16px; }
.overlay .modal-body, .overlay .panel-body, .overlay .m-body { padding-top: 4px; padding-bottom: 10px; }
.overlay .modal-body p, .overlay .panel-body p, .overlay .m-body p { margin-bottom: 8px; font-size: 13.5px; line-height: 1.45; }
.overlay .modal-body h2, .overlay .panel-body h2, .overlay .modal-body h3, .overlay .panel-body h3 { margin-top: 10px; margin-bottom: 6px; }
.overlay .modal-foot, .overlay .panel-foot, .overlay .m-foot { padding-top: 8px; padding-bottom: 8px; }

/* A double tap must never zoom the page: manipulation allows scrolling and
   pinching but not the double tap zoom. On html it covers every element. */
html { touch-action: manipulation; }