/* ═══════════════════════════════════════════════════════════════════════════
   Onitama — stylesheet
   Matches the Game Room visual language: black surfaces, green accents,
   Bebas Neue for display type, DM Sans for body, DM Mono for numbers/labels.
   The board keeps the game's traditional red vs blue so the pieces and the
   card miniatures read the same way they do on a physical table.
   ═══════════════════════════════════════════════════════════════════════════ */

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

:root {
  --bg: #000000; --surface: #121212; --surface2: #181818; --surface3: #282828;
  --border: #282828; --border2: #404040; --text: #ffffff; --muted: #a7a7a7;
  --green: #1db954; --green-dim: rgba(29,185,84,0.12); --green-glow: rgba(29,185,84,0.28);
  --red: #e91429; --blue: #3b82f6; --yellow: #e3a900;

  --font-display: 'Bebas Neue', sans-serif;
  --font-body: 'DM Sans', system-ui, sans-serif;
  --font-mono: 'DM Mono', monospace;

  /* One place to change the board look */
  --cell: #15171a;
  --cell-alt: #191c20;
  --temple: rgba(29,185,84,0.16);
}

/* ── Piece colours ────────────────────────────────────────────────────── */
/* Every colour choice resolves to ONE custom property, so a single rule can
   paint a piece, a card border or a card miniature for any of the eight options.
   The ids match COLOURS in engine.js. Black and white also need an outline (see
   .piece below) or they vanish against the matching theme. */
[data-colour="red"]    { --pc: #e91429; --pc-ink: #ffffff; --pc-soft: rgba(233,20,41,.55); }
[data-colour="orange"] { --pc: #ff8a00; --pc-ink: #1b1204; --pc-soft: rgba(255,138,0,.55); }
[data-colour="yellow"] { --pc: #f5c400; --pc-ink: #1b1700; --pc-soft: rgba(245,196,0,.55); }
[data-colour="green"]  { --pc: #1db954; --pc-ink: #04180b; --pc-soft: rgba(29,185,84,.55); }
[data-colour="blue"]   { --pc: #3b82f6; --pc-ink: #ffffff; --pc-soft: rgba(59,130,246,.55); }
[data-colour="purple"] { --pc: #a855f7; --pc-ink: #ffffff; --pc-soft: rgba(168,85,247,.55); }
[data-colour="black"]  { --pc: #121212; --pc-ink: #ffffff; --pc-soft: rgba(255,255,255,.45); }
[data-colour="white"]  { --pc: #f2f2f2; --pc-ink: #101010; --pc-soft: rgba(16,16,16,.45); }

html, body {
  min-height: 100%; background: var(--bg); color: var(--text);
  font-family: var(--font-body); font-size: 15px;
}
body::before {
  content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse 70% 50% at 10% 0%, rgba(29,185,84,0.08) 0%, transparent 60%);
}

/* Light theme */
[data-theme="light"] {
  --bg: #ffffff; --surface: #f6f6f6; --surface2: #ececec; --surface3: #e0e0e0;
  --border: #d5d5d5; --border2: #b8b8b8; --text: #121212; --muted: #556055;
  --cell: #e9ecef; --cell-alt: #e2e6ea; --temple: rgba(29,185,84,0.22);
}

.shell {
  position: relative; z-index: 1; max-width: 1150px; margin: 0 auto;
  padding: 20px 20px 48px;
}

/* ── Header ───────────────────────────────────────────────────────────── */
.header { display: flex; align-items: center; gap: 12px; margin-bottom: 22px; }
.home-btn {
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  color: var(--muted); font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  padding: 6px 14px; border: 1px solid var(--border2); border-radius: 999px;
  background: var(--surface2); transition: border-color .2s, color .2s, background .2s;
}
.home-btn:hover { border-color: var(--green); color: var(--green); background: var(--green-dim); }
.home-btn svg { width: 12px; height: 12px; }

.brand { display: flex; align-items: center; gap: 8px; margin-left: 4px; }
.brand-mark { color: var(--green); font-size: 20px; line-height: 1; }
.brand-text { font-family: var(--font-display); font-size: 20px; letter-spacing: 3px; }

.header-right { margin-left: auto; display: flex; align-items: center; gap: 10px; }
.user-badge {
  font-family: var(--font-mono); font-size: 11px; color: var(--green);
  background: var(--green-dim); border: 1px solid rgba(29,185,84,.3);
  border-radius: 999px; padding: 4px 12px;
}
.user-badge:empty { display: none; }
.icon-btn {
  width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--border2);
  background: var(--surface2); color: var(--muted); cursor: pointer; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  transition: border-color .2s, color .2s, background .2s, transform .2s;
}
.icon-btn:hover { border-color: var(--green); color: var(--green); background: var(--green-dim); transform: rotate(30deg); }
.icon-btn svg { width: 18px; height: 18px; }

/* ── Screens ──────────────────────────────────────────────────────────── */
.screen { display: none; }
.screen.active { display: block; }

.screen-title { font-family: var(--font-display); font-size: 34px; letter-spacing: 2px; margin-bottom: 6px; }
.screen-sub { color: var(--muted); font-size: 14px; max-width: 620px; line-height: 1.6; margin-bottom: 26px; }

/* ── Menu ─────────────────────────────────────────────────────────────── */
.menu-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 880px) { .menu-grid { grid-template-columns: 1fr; } }

.mode-card {
  display: flex; flex-direction: column; gap: 6px; text-align: left;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 18px; color: var(--text); font-family: inherit;
  cursor: default; transition: border-color .2s, background .2s, transform .15s;
}
button.mode-card { cursor: pointer; }
button.mode-card:hover { border-color: var(--green); background: var(--surface2); transform: translateY(-2px); }
.mode-icon { font-size: 26px; }
.mode-name { font-family: var(--font-display); font-size: 22px; letter-spacing: 1.5px; color: var(--green); }
.mode-desc { font-size: 13px; color: var(--muted); line-height: 1.5; }
.mode-form { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.field { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
/* Small note under a menu field (e.g. "your colour lives in Settings"). */
.field-hint { font-size: 12px; color: var(--muted); }
.field select, .code-input {
  background: var(--surface2); border: 1px solid var(--border2); border-radius: 8px;
  color: var(--text); padding: 9px 10px; font-family: var(--font-body); font-size: 14px; outline: none;
}
.field select:focus, .code-input:focus { border-color: var(--green); }
.join-row { display: flex; gap: 8px; }
.code-input { flex: 1; font-family: var(--font-mono); letter-spacing: 3px; text-transform: uppercase; }

.btn {
  font-family: var(--font-display); font-size: 15px; letter-spacing: 1.5px;
  background: var(--surface2); color: var(--text); border: 1px solid var(--border2);
  border-radius: 9px; padding: 10px 16px; cursor: pointer;
  transition: border-color .2s, color .2s, background .2s;
}
.btn:hover { border-color: var(--green); color: var(--green); background: var(--green-dim); }
.btn-primary { background: var(--green); color: #000; border-color: var(--green); }
.btn-primary:hover { background: #1ed760; color: #000; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:disabled:hover { border-color: var(--border2); color: var(--text); background: var(--surface2); }
.btn-primary:disabled:hover { background: var(--green); color: #000; }
/* Compact variant, because four buttons share the in-game top bar. */
.btn-sm { font-size: 13px; padding: 7px 12px; letter-spacing: 1px; }

.record { margin-top: 24px; font-family: var(--font-mono); font-size: 12px; color: var(--muted); }

/* ── Status bar ───────────────────────────────────────────────────────── */
/* Also carries the move counter and every game action, so the area around the
   board stays clear. On a phone the controls simply wrap onto another line. */
.status-bar {
  display: flex; align-items: center; gap: 8px 12px; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 16px; margin-bottom: 14px;
}
.status-turn { font-family: var(--font-display); font-size: 22px; letter-spacing: 1.5px; }
.status-turn[data-colour] { color: var(--pc); }
/* "Move 3" — the counter used to sit under the board. */
.move-counter {
  font-family: var(--font-mono); font-size: 12px; color: var(--muted);
  background: var(--surface2); border: 1px solid var(--border);
  border-radius: 999px; padding: 4px 12px; white-space: nowrap;
}
.move-counter:empty { display: none; }
/* The note shares the move counter's line; the buttons (margin-left: auto)
   are pushed to the far right of whatever line is left. */
.status-note { font-size: 12px; color: var(--muted); flex: 0 1 auto; }
.status-note:empty { display: none; }
.status-controls { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }

/* ── Table layout ─────────────────────────────────────────────────────── */
/* Laid out like a real table: the opponent's hand along the top, the board in
   the middle, your hand along the bottom.
   The board sits in the CENTRE column of a grid whose two outer columns are
   equal (minmax(0, 1fr)), so it is always centred on the same line as the
   hands. The side card gets the right-hand column to itself — that is what
   stops it from shoving the board off-centre, which it used to do when it
   shared a flex row with the board. */
.table-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  grid-template-areas:
    "opponent opponent opponent"
    ".        board    side"
    "mine     mine     mine";
  align-items: center;
  justify-items: center;
  gap: 10px 14px;
}
.hand-panel.opponent-panel { grid-area: opponent; }
.board-area { grid-area: board; }
.hand-panel.my-panel { grid-area: mine; }
.side-card-wrap { grid-area: side; }

.hand-panel {
  /* No box around a hand — the cards get the space instead. The width matches
     the board frame exactly, so both rows line up with the board edges. */
  width: 100%; max-width: calc(min(76vw, 420px) + 22px);
}
.panel-head { display: flex; align-items: baseline; justify-content: center; margin-bottom: 4px; gap: 8px; }
.panel-label {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--muted);
}
/* No .panel-side rule: the colour badges above the hands were removed, so the
   hands are now purely their cards. The piece colours say which side is which. */

/* A hand is always a horizontal row: it sits above or below the board rather
   than beside it, so no breakpoint needs to reshuffle it. */
.hand { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px; }

/* ── Movement cards ───────────────────────────────────────────────────── */
.card {
  background: var(--surface2); border: 2px solid var(--border2); border-radius: 10px;
  padding: 9px; display: flex; flex-direction: column; align-items: center; gap: 6px;
  /* Never let a card be squeezed: the hand is a row, so a shrinkable card would
     collapse towards its text width and take the board-sized grid with it. */
  flex: 0 0 auto;
  transition: border-color .2s, transform .15s, box-shadow .2s;
}
.card-name { font-family: var(--font-display); font-size: 16px; letter-spacing: 1.2px; color: var(--text); }
/* The card border takes the colour of whoever is holding it. */
.card[data-colour] { border-color: var(--pc-soft); }
/* Only what you can actually play this turn is highlighted. Nothing is dimmed:
   the opponent's hand has to stay fully legible so you can plan around their
   options, and a greyed-out pattern is genuinely hard to read. */
.card.playable { cursor: pointer; border-color: rgba(29,185,84,.55); }
.card.playable:hover { transform: translateY(-2px); box-shadow: 0 0 16px rgba(29,185,84,.25); }
.card.selected { border-color: var(--green); box-shadow: 0 0 18px var(--green-glow); }

.card-mini { display: grid; grid-template-columns: repeat(5, 1fr); gap: 3px; width: 100%; }
/* Definite widths rather than max-widths. The cells only have an aspect-ratio
   and no intrinsic width, so a card in a row would shrink-to-fit its name and
   the miniature would collapse to a few pixels. Both hands are the same size
   now — the opponent's options need to be just as readable as your own. */
.card-mini.large { width: 168px; }
/* On a phone your two cards plus the side card all share one row, so the size
   comes from the viewport rather than a fixed value. 29vw keeps the hand inside
   its column even on a 320px screen while still being larger than the old
   108px cards on a typical phone. */
@media (max-width: 980px) { .card-mini.large { width: min(124px, 29vw); } }
/* The top player reads their cards from the far side of the board, so their
   pattern is turned 180 degrees to match their point of view. It is applied to
   the 5x5 pattern only — the card name stays upright and readable. */
.card-mini.flipped { transform: rotate(180deg); }
.mini-cell {
  aspect-ratio: 1 / 1; border-radius: 3px; background: rgba(255,255,255,0.05);
}
.mini-origin { background: #000; border: 1px solid var(--border2); }
/* Inherits --pc from the .card-mini's data-colour, so every palette colour works. */
.mini-dest { background: var(--pc); box-shadow: 0 0 6px var(--pc-soft); }

/* ── Board ────────────────────────────────────────────────────────────── */
/* The board is the grid's centre column, so it needs no centring of its own
   beyond the container's justify-items. */
.board-area { display: flex; justify-content: center; }

.board-wrap { padding: 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; }
.board {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px;
  width: min(76vw, 420px); aspect-ratio: 1 / 1;
}
@media (max-width: 980px) { .board { width: min(88vw, 400px); } }

.cell {
  position: relative; border-radius: 6px; background: var(--cell);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid transparent; transition: background .15s, border-color .15s;
}
.cell.alt { background: var(--cell-alt); }
.cell.temple::after {
  content: '⛩'; position: absolute; font-size: 1.5rem; color: var(--green);
  opacity: .3; pointer-events: none;
}
.cell.hint { background: rgba(29,185,84,0.12); border-color: rgba(29,185,84,.4); }
.cell.target { cursor: pointer; background: rgba(29,185,84,0.22); border-color: var(--green); }
.cell.target::before {
  content: ''; position: absolute; width: 26%; height: 26%; border-radius: 50%;
  background: var(--green); opacity: .8;
}
.cell.last-move { box-shadow: inset 0 0 0 2px rgba(227,169,0,.65); }
.cell.selectable { cursor: pointer; }
.cell.selectable:hover { border-color: var(--green); }

.piece {
  width: 74%; height: 74%; border-radius: 50%; position: relative; z-index: 1;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-size: 15px; line-height: 1;
  transition: transform .15s;
  /* Colour from the seat's palette entry (data-colour). One flat colour plus a
     sheen gives every option depth without a gradient per colour. */
  background-color: var(--pc);
  background-image: linear-gradient(160deg, rgba(255,255,255,.22), rgba(0,0,0,.22));
  color: var(--pc-ink);
  box-shadow: 0 2px 8px rgba(0,0,0,.45);
}
.piece.student { width: 58%; height: 58%; }
/* Black and white would disappear against a matching theme. An OUTLINE is used
   rather than a box-shadow because .piece.master and .piece.selected both set
   box-shadow, and this way the two never fight over the same property. */
.piece[data-colour="black"] { outline: 2px solid rgba(255,255,255,.7); outline-offset: -2px; }
.piece[data-colour="white"] { outline: 2px solid rgba(16,16,16,.55); outline-offset: -2px; }
.piece.master { font-size: 18px; box-shadow: 0 0 0 2px rgba(255,255,255,.65), 0 3px 12px rgba(0,0,0,.5); }
.piece.selected { transform: scale(1.08); box-shadow: 0 0 0 3px var(--green), 0 3px 14px rgba(0,0,0,.6); }
.cell.target:hover .piece { transform: scale(1.05); }

/* ── Side card ────────────────────────────────────────────────────────── */
/* The spare card that passes to whoever plays next. It owns a grid column, so
   it can never shift the board off-centre, and here it hugs the right edge of
   the board. On phones it relocates next to your hand (see the media query
   further down). */
.side-card-wrap {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  justify-self: start;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 12px 14px; min-width: 140px;
}
/* The "Side Card" heading was removed — the card is recognisable on its own,
   and the first-mover caption below is hidden once the first move is made. */
.side-card-caption { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.side-card-hint { font-size: 10px; color: var(--muted); text-align: center; }
.side-first { font-family: var(--font-display); font-size: 16px; letter-spacing: 1px; }
.side-first[data-colour] { color: var(--pc); }

/* ── Phones ───────────────────────────────────────────────────────────── */
/* The side card moves alongside YOUR hand rather than under the board, so the
   bottom row is hand + side card and the board spans the full width above it.
   NOTE: the two-column row means the hand is no longer on exactly the same
   centre line as the board on a phone. That is a deliberate trade-off — the
   alternative (reserving a matching spacer on the left, as desktop does) costs
   as much width as the side card itself and would shrink your cards to roughly
   90px, which is smaller than they were before. */
@media (max-width: 980px) {
  .table-layout {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "opponent opponent"
      "board    board"
      "mine     side";
    gap: 8px 10px;
  }
  .hand-panel { max-width: none; }
  .hand-panel.my-panel { width: auto; }
  .side-card-wrap {
    /* The dashed divider makes it obvious this card is not part of your hand. */
    justify-self: start;
    margin-left: 0; padding: 0 0 0 8px;
    border: 0; border-left: 1px dashed var(--border2);
    border-radius: 0; background: none; min-width: 0;
  }
  /* The side card is a reference card rather than something you play, so it
     gives up the space to your actual hand. */
  .side-card-wrap .card { padding: 6px; }
  .side-card-wrap .card-mini.large { width: min(84px, 14vw); }

  /* Trim the chrome so the cards have as much room as possible. */
  .shell { padding: 12px 8px 40px; }
  .card { padding: 6px; }
  .hand { gap: 8px; }
}

/* ── Move history ─────────────────────────────────────────────────────── */

.log-panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px;
  /* A clear break so the history does not crowd the bottom hand above it. */
  margin-top: 22px;
}
/* The move history can be folded down to a single header line so it barely
   occupies screen space. Collapsed by default on phones, expanded on desktop;
   the player's choice is remembered in localStorage. */
.log-toggle {
  background: none; border: 0; padding: 0 2px; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted);
}
.log-toggle:hover { color: var(--green); }
.log-panel.collapsed .log { display: none; }
.log-panel.collapsed .panel-head { margin-bottom: 0; }
.log { list-style: none; max-height: 150px; overflow-y: auto; font-family: var(--font-mono); font-size: 12px; line-height: 1.7; }
.log li { color: var(--muted); border-bottom: 1px solid var(--border); padding: 2px 0; }
.log li:last-child { border-bottom: none; }
.log .move-side[data-colour] { color: var(--pc); }
.log .empty { color: var(--muted); font-style: italic; }

/* ── Overlay ──────────────────────────────────────────────────────────── */
.overlay {
  position: fixed; inset: 0; z-index: 200; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(0,0,0,.78); backdrop-filter: blur(3px);
}
.overlay.show { display: flex; }
.overlay-card {
  background: var(--surface); border: 1px solid var(--border2); border-radius: 14px;
  padding: 30px 34px; text-align: center; max-width: 420px; width: 100%;
}
.overlay-icon { font-size: 46px; margin-bottom: 8px; }
.overlay-card h2 { font-family: var(--font-display); font-size: 34px; letter-spacing: 2px; margin-bottom: 6px; }
.overlay-card h2.win { color: var(--green); }
.overlay-card h2.lose { color: var(--red); }
.overlay-card h2.draw { color: var(--yellow); }
#overlay-reason { color: var(--muted); font-size: 14px; margin-bottom: 20px; line-height: 1.5; }
.overlay-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ── Settings + toast ─────────────────────────────────────────────────── */
.settings-dropdown {
  position: absolute; top: 62px; right: 20px; z-index: 150; display: none;
  background: var(--surface2); border: 1px solid var(--border2); border-radius: 10px;
  min-width: 210px; box-shadow: 0 12px 40px rgba(0,0,0,.8);
  /* The colour palette makes this menu tall, so let it scroll rather than run
     off the bottom of a short screen. */
  max-height: calc(100vh - 78px); overflow-y: auto;
}
.settings-dropdown.open { display: block; }
.dropdown-item {
  padding: 12px 16px; font-size: 13px; color: var(--muted); cursor: pointer;
  border-bottom: 1px solid var(--border); transition: color .2s, background .2s;
}
.dropdown-item:last-child { border-bottom: none; }
.dropdown-item:hover { color: var(--green); background: var(--green-dim); }

/* Colour preference block inside the settings menu. */
.dropdown-sep { height: 1px; background: var(--border); margin: 4px 0; }
.dropdown-label {
  padding: 8px 16px 4px; font-family: var(--font-mono); font-size: 10px;
  letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
/* Two rows of four swatches, plus a full-width "surprise me" option. */
.colour-choice { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; padding: 4px 16px 14px; }
.colour-btn {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  cursor: pointer; padding: 7px 4px; border-radius: 8px;
  background: var(--surface3); border: 2px solid transparent; color: var(--muted);
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .03em;
  transition: border-color .2s, color .2s, opacity .2s;
}
/* The dot takes its colour from the [data-colour] rule at the top of the file,
   so the swatch always matches the pieces on the board. */
.colour-btn::before {
  content: ''; width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0;
  background: var(--pc, var(--border2));
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.35);
}
.colour-btn.wide { grid-column: 1 / -1; }
.colour-btn:hover:not(:disabled) { color: var(--text); }
.colour-btn.active { border-color: var(--pc, var(--green)); color: var(--text); }
/* The colour the opponent is already playing. */
.colour-btn:disabled { opacity: .3; cursor: not-allowed; text-decoration: line-through; }

.toast {
  position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%);
  background: var(--surface2); border: 1px solid var(--green); color: var(--green);
  font-family: var(--font-mono); font-size: 12px; padding: 10px 20px; border-radius: 999px;
  opacity: 0; pointer-events: none; transition: opacity .25s; z-index: 300;
}
.toast.show { opacity: 1; }
.toast.error { border-color: var(--red); color: var(--red); }