/*
 * Cordova Nines — the shop's look, from day one.
 *
 * The palette is installed as CSS CUSTOM PROPERTIES (tokens) taken straight
 * from `Cordova Nines/brand/README.md` — components reference the tokens, never
 * a raw hex. Type is a web-safe flared serif (Baskerville / Palatino lineage)
 * for the wordmark and a humanist sans for the UI — no external font fetch of
 * any kind (nothing external is allowed).
 */

:root {
  /* Brand palette tokens — brand/README.md. Order 10 (the Owner, 2026-10-11:
     "deepen the green and darken it down in the background"): the two greens
     are deeper and darker (─ #14332b → #0e2620, #1d4636 → #17392c). Gold and
     ivory are UNCHANGED — this deepens the ground, it does not replace the
     palette. Contrast re-measured in `../tools/order10_check.py`: ivory 13.23 ·
     gold 7.58 · antique 4.56 on the deep ground (all ≥ WCAG AA). */
  --green-deep: #0e2620; /* backgrounds */
  --green-panel: #17392c; /* surfaces / cards */
  --gold: #d4af37; /* marks, accents, the logo */
  --gold-antique: #a8842c; /* deep accents, strokes */
  --ivory: #f2e9d8; /* text on dark */

  /* Derived tokens (kept as tokens so components stay hex-free) */
  --ivory-dim: color-mix(in srgb, var(--ivory) 72%, transparent);
  --ivory-faint: color-mix(in srgb, var(--ivory) 34%, transparent);
  --felt-line: color-mix(in srgb, var(--gold) 28%, transparent);
  --tile-face: var(--ivory);
  --tile-pip: var(--green-deep);
  --tile-edge: color-mix(in srgb, var(--gold-antique) 55%, var(--green-deep));

  --serif: Baskerville, "Baskerville Old Face", "Palatino Linotype", Palatino,
    "Times New Roman", Georgia, serif;
  --sans: "Optima", "Segoe UI", "Helvetica Neue", system-ui, -apple-system, sans-serif;

  --radius: 12px;
  --tile-radius: 7px;
  /* One HALF-CELL of the board's lattice — the board's grid is measured in
     halves, and a tile always spans exactly two of them (2 columns lying
     along a run, 2 rows at a fold). That is what lets a fold tile sit
     crosswise with one half against the run it came from and the other against
     the run that continues — the numbers match at every joint (order 06).
     Sized for the FULL-SIZE tile: nothing may ever shrink it. */
  --cell: 38px;

  /* Pip colours — the Owner's map (order 05), one hex per pip value.
     Kept here as tokens for reference; app.js paints each dot so a single
     source of truth drives hand, board and log. */
  --pip-1: #4a4a4a; /* dark grey */
  --pip-2: #1e3a8a; /* dark blue */
  --pip-3: #c62828; /* red */
  --pip-4: #8b7355; /* taupe */
  --pip-5: #38bdf8; /* light blue */
  --pip-6: #e6b800; /* yellow */
  --pip-7: #7b2fbe; /* purple */
  --pip-8: #2e7d32; /* green */
  --pip-9: #111111; /* black */
}

* {
  box-sizing: border-box;
}

/* `hidden` must always win: the landing, the create view, the home and the room
   are all in the document, and each is shown by a class rule with more
   specificity than the UA's `[hidden] { display: none }`. Without this the
   landing and the home would both be on screen at once (order 11). */
[hidden] {
  display: none !important;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--green-deep);
  color: var(--ivory);
  font-family: var(--sans);
  line-height: 1.4;
}

/* ---- masthead ---- */
.masthead {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--felt-line);
  background: linear-gradient(var(--green-panel), var(--green-deep));
}
.masthead .logo {
  width: 62px;
  height: auto;
}
.wordmark h1 {
  margin: 0;
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: 0.14em;
  font-size: clamp(1.4rem, 3vw, 2.1rem);
  color: var(--gold);
}
.tagline {
  margin: 0.15rem 0 0;
  color: var(--ivory-dim);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
}
.scoreboard {
  margin-left: auto;
  display: flex;
  gap: 1.25rem;
  text-align: right;
}
.scoreboard .team {
  font-size: 0.78rem;
  color: var(--ivory-dim);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.scoreboard .team b {
  display: block;
  font-family: var(--serif);
  font-size: 1.7rem;
  color: var(--gold);
  letter-spacing: 0.05em;
}
.scoreboard .team.lead b {
  color: var(--ivory);
}

/* ---- layout ---- */
.layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 1rem;
  padding: 1rem 1.25rem;
  align-items: start;
}
@media (max-width: 860px) {
  .layout {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* ---- the felt table ---- */
.felt {
  background: radial-gradient(
      ellipse at 50% 40%,
      color-mix(in srgb, var(--green-panel) 92%, var(--gold) 8%),
      var(--green-panel)
    );
  border: 1px solid var(--felt-line);
  border-radius: var(--radius);
  padding: 1rem;
}
.table {
  display: grid;
  /* the board keeps the room it needs for full-size tiles (order 06); the
     seats give way, never the tiles */
  grid-template-columns: minmax(0, 0.55fr) minmax(320px, 3.4fr) minmax(0, 0.55fr);
  grid-template-areas:
    ".    n     ."
    "w    board e"
    ".    s     .";
  gap: 0.6rem;
  min-height: 340px;
}
.seat-n { grid-area: n; }
.seat-s { grid-area: s; }
.seat-w { grid-area: w; }
.seat-e { grid-area: e; }
.board-wrap {
  grid-area: board;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem;
  background: color-mix(in srgb, var(--green-deep) 60%, transparent);
  border: 1px dashed var(--felt-line);
  border-radius: var(--radius);
}

/* seats */
.seat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  padding: 0.5rem;
  border-radius: 10px;
  border: 1px solid transparent;
  min-height: 70px;
}
.seat .name {
  font-family: var(--serif);
  letter-spacing: 0.08em;
  font-size: 0.95rem;
  color: var(--ivory-dim);
}
.seat.you .name::after {
  content: " · you";
  color: var(--gold);
}
.seat.partner .name::after {
  content: " · partner";
  color: var(--ivory-faint);
}
.seat .count {
  display: flex;
  gap: 3px;
}
.seat .count .back {
  width: 12px;
  height: 20px;
  border-radius: 3px;
  background: repeating-linear-gradient(
    45deg,
    var(--gold-antique),
    var(--gold-antique) 3px,
    var(--green-panel) 3px,
    var(--green-panel) 6px
  );
  border: 1px solid var(--tile-edge);
}
.seat.turn {
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 10%, transparent);
}
.seat.you .name::after {
  content: " · you";
  color: var(--gold);
}
/* ---- order 10: East & West sit VERTICALLY at the sides of the play surface --
   The Owner, 2026-10-11, verbatim: "East and West need to have their hands
   display vertically down the side of the play surface." The two side seats are
   VERTICAL STRIPS hugging the left and right edges of the felt: the hand runs
   DOWN the strip — the backs stack in a column, count and label beside them —
   instead of running across. North stays along the top and South is your own
   hand under the table. Backs and counts ONLY: not one face is added, so the
   hidden-hands rule is untouched (the wire e2e stays at 0 leaks and this view's
   UI check at 0 faces exposed). */
.seat-w,
.seat-e {
  align-self: stretch; /* the strip runs the full height of the play surface */
  justify-content: flex-start;
  min-height: 0;
  padding: 0.35rem 0.2rem;
}
.seat-w { align-items: flex-end; } /* hug the play surface's LEFT edge */
.seat-e { align-items: flex-start; } /* hug the play surface's RIGHT edge */
.seat-w .name,
.seat-e .name {
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.seat-w .count,
.seat-e .count {
  flex-direction: column; /* the hand runs down the side, not across it */
  align-items: center;
}
/* the chain — folded: a serpentine grid that turns and doubles back so the
   whole line stays inside one rectangle (the Owner's table flow, order 05) */
.board {
  /* The board is one rectangle of felt that is exactly as big as the chain
     needs; every tile is placed in it by app.js, in pixels, at full size. */
  position: relative;
  margin: 0 auto;
  max-width: 100%;
  overflow: auto;
}
.board .tile.on-board,
.board .drop-target {
  position: absolute;
}
.board .tile.on-board {
  cursor: default;
}

/* a highlighted open end — where the next tile would go */
.drop-target {
  position: relative;
  border: 1.5px dashed var(--gold-antique);
  border-radius: var(--tile-radius);
  opacity: 0.5;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.12s ease, background 0.12s ease, box-shadow 0.12s ease;
}
.drop-target::after {
  content: "+";
  font-family: var(--serif);
  font-size: 1.05rem;
  color: var(--gold);
  line-height: 1;
}
/* the selected tile can be played here — make it obvious and inviting */
.drop-target.armed {
  opacity: 1;
  border-style: solid;
  border-color: var(--gold);
  background: color-mix(in srgb, var(--gold) 16%, transparent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 45%, transparent);
  animation: end-pulse 1.4s ease-in-out infinite;
}
.drop-target.armed::after {
  color: var(--gold);
}
.drop-target.hover,
.drop-target:focus-visible {
  opacity: 1;
  background: color-mix(in srgb, var(--gold) 28%, transparent);
  outline: none;
}
@keyframes end-pulse {
  0%, 100% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--gold) 35%, transparent); }
  50% { box-shadow: 0 0 0 5px color-mix(in srgb, var(--gold) 55%, transparent); }
}

/* THERE IS NO SMALL TILE (order 06). The old `.tile.small` (14x22 px halves,
   4 px pips, "so the folded board fits its rectangle") is deleted: a 9-pip face
   was not countable at that size. Every tile — in hand and on the board — is
   the one size above, and NOTHING may shrink it: not chain length, not the
   fold, not the window. A board tile IS its slot — 76x38 lying along a run,
   38x76 when it is played ACROSS the run (the fold that turns the chain, and
   every double, per the Owner's style note / order 07), so it can never be
   squeezed; if the board runs out of room the window scrolls and the felt
   around it grows (app.js `layoutBoard`). */
.board .tile {
  flex: none;
}

/* A tile's halves follow the chain, not the page: the half that matches the
   neighbouring tile must physically face it. `horizontal.mirror` flips the
   halves left↔right for the rows of the serpentine that run right-to-left, so
   the matching number still sits against its joint (order 06). */
.tile.horizontal.mirror {
  flex-direction: row-reverse;
}

/* pip digits inside a log line, colored per the map */
.log-tile {
  font-family: var(--serif);
  font-style: normal;
}
.log-tile b {
  font-weight: 700;
  font-style: normal;
}
.log-tile i {
  font-style: normal;
  color: var(--ivory-faint);
}
.board-ends {
  display: flex;
  gap: 1.5rem;
  font-size: 0.74rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ivory-faint);
}
.board-ends b {
  color: var(--gold);
  font-family: var(--serif);
  font-size: 1rem;
}

/* ---- domino tiles ---- */
/* ONE size, in hand and on the board (order 06). The halves are square, so a
   tile is exactly two half-cells whichever way it lies, and its face is a
   proper 2:1 domino. The board only rotates it. */
.tile {
  display: inline-flex;
  background: var(--tile-face);
  border: 1px solid var(--tile-edge);
  border-radius: var(--tile-radius);
  padding: 0;
  gap: 2px;
  box-shadow: 0 1px 0 color-mix(in srgb, var(--green-deep) 70%, transparent),
    inset 0 0 0 1px color-mix(in srgb, var(--ivory) 40%, transparent);
}
.tile.horizontal {
  flex-direction: row;
}
.tile.vertical {
  flex-direction: column;
}
.tile .half {
  position: relative;
  width: 36px;
  height: 36px;
  border-radius: 4px;
  background: var(--tile-face);
}
/* a blank half (pip 0) needs no dots; a divider marks a double */
.tile.double .half:first-child {
  border-right: 1px solid var(--tile-edge);
}
/* mirrored rows: the DOM's first half is drawn on the right, so the divider
   moves to its left edge (the tile must look the same — only rotated) */
.tile.double.horizontal.mirror .half:first-child {
  border-right: 0;
  border-left: 1px solid var(--tile-edge);
}
.tile.double.vertical .half:first-child {
  border-right: 0;
  border-bottom: 1px solid var(--tile-edge);
}

.pips {
  position: absolute;
  /* 3px (was 4px): the widest face is 9 pips in a 3x3 grid — this keeps every
     pip at its 6px with a hair of separation so a nine is countable at a glance */
  inset: 3px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
}
.pips .pip {
  display: block;
  /* 7px on a 36px face (3x3 lattice of 10px cells): a nine reads as nine. */
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tile-pip);
  align-self: center;
  justify-self: center;
}

/* ---- the hand ---- */
.hand-area {
  padding: 0.85rem 1.25rem 1.5rem;
}
.hand-title {
  font-family: var(--serif);
  font-weight: 400;
  letter-spacing: 0.08em;
  color: var(--ivory-dim);
  font-size: 0.95rem;
  margin: 0 0 0.5rem;
}
.hand {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.hand .tile {
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.hand .tile.playable:hover {
  transform: translateY(-3px);
}
.hand .tile.playable {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}
.hand .tile.dead {
  cursor: not-allowed;
  opacity: 0.4;
}
.hand .tile.selected {
  transform: translateY(-6px);
  box-shadow: 0 3px 8px color-mix(in srgb, var(--gold) 60%, transparent);
}

/* ---- sidebar ---- */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.controls,
.log {
  background: var(--green-panel);
  border: 1px solid var(--felt-line);
  border-radius: var(--radius);
  padding: 0.85rem;
}
.turn {
  font-family: var(--serif);
  letter-spacing: 0.05em;
  font-size: 1.02rem;
  color: var(--gold);
  margin-bottom: 0.6rem;
}
.buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.btn {
  font-family: var(--sans);
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  padding: 0.5rem 0.8rem;
  border-radius: 8px;
  border: 1px solid var(--gold-antique);
  background: var(--green-deep);
  color: var(--ivory);
  cursor: pointer;
}
.btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.btn-gold {
  background: var(--gold);
  color: var(--green-deep);
  border-color: var(--gold);
  font-weight: 600;
}
.btn-ghost {
  background: transparent;
  border-color: var(--felt-line);
}
.btn[aria-pressed="true"] {
  background: var(--gold);
  color: var(--green-deep);
}
.hint {
  margin: 0.7rem 0 0;
  font-size: 0.78rem;
  color: var(--ivory-dim);
  min-height: 1.1rem;
}
.log {
  max-height: 320px;
  overflow-y: auto;
  font-size: 0.78rem;
  color: var(--ivory-dim);
}
.log .entry {
  padding: 0.2rem 0;
  border-bottom: 1px solid var(--felt-line);
}
.log .entry:last-child {
  border-bottom: 0;
  color: var(--ivory);
}

/* ---- Order 11: the landing, the home, and the guest marker ---- *
   The front door is a CARD, not a play surface: the landing carries log in /
   create an account / continue as a guest and nothing else — no board, no hand,
   no seat, no room-code field (order 11 §1). The home carries the record and
   the two room buttons (order 11 §2). The room's markup is not in the document
   at all until you are seated. */
.landing,
.home {
  display: flex;
  justify-content: center;
  padding: 1.6rem 1.25rem 2.4rem;
}
.card {
  width: min(560px, 100%);
  background: var(--green-panel);
  border: 1px solid var(--felt-line);
  border-radius: var(--radius);
  padding: 1.25rem;
}
.card h2 { font-family: var(--serif); color: var(--gold); margin: 0 0 0.4rem; font-weight: 400; }
.card h3 { font-family: var(--serif); color: var(--gold); margin: 0 0 0.35rem; font-weight: 400; font-size: 0.98rem; }
.card .muted { color: var(--ivory-dim); font-size: 0.86rem; margin: 0 0 1rem; }
.card .muted.small,
.hint.small { font-size: 0.76rem; margin-top: 0.45rem; }
.auth-form { margin: 0 0 0.6rem; }
.form-title { font-size: 0.92rem; }
.field { display: block; margin: 0 0 0.85rem; }
.field span { display: block; font-size: 0.78rem; color: var(--ivory-dim); margin-bottom: 0.3rem; letter-spacing: 0.03em; }
.field span em { color: var(--ivory-faint); font-style: normal; }
.field input {
  width: 100%; padding: 0.7rem 0.8rem; font-size: 1rem; border-radius: 8px;
  border: 1px solid var(--gold-antique); background: var(--green-deep);
  color: var(--ivory); font-family: var(--sans);
}
.field input:focus { outline: 2px solid var(--gold); outline-offset: 1px; }
.switch { margin: 0.9rem 0 0; font-size: 0.82rem; }
.switch a { color: var(--gold); text-decoration: none; border-bottom: 1px solid var(--gold-antique); }
.switch a:hover { border-bottom-color: var(--gold); }
.sep {
  display: flex; align-items: center; gap: 0.7rem;
  margin: 1.1rem 0; color: var(--ivory-faint); font-size: 0.74rem; letter-spacing: 0.14em;
  text-transform: uppercase;
}
.sep::before, .sep::after { content: ""; flex: 1; height: 1px; background: var(--felt-line); }

/* Your record — the durable facts (wins/losses + recent matches), never tiles. */
.record { margin: 1rem 0; padding: 0.7rem 0.8rem; border: 1px solid var(--felt-line); border-radius: var(--radius); }
.record h3 { font-family: var(--serif); color: var(--gold); margin: 0 0 0.3rem; font-weight: 400; font-size: 0.95rem; }
.record .muted { color: var(--ivory-dim); font-size: 0.82rem; margin: 0 0 0.4rem; }
.record-matches { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.record-matches li { font-size: 0.78rem; color: var(--ivory-faint); }

/* The guest marker (order 11 §3): a guest is marked everywhere they appear —
   the seat strip, the title, the log line read out by name. Gold outline, no
   fill, so it reads as a label and never as a seat's own colour. */
.guest-badge {
  font-family: var(--sans);
  font-size: 0.6rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--gold);
  border: 1px solid var(--gold-antique);
  border-radius: 999px;
  padding: 0 0.36rem;
  line-height: 1.5;
  white-space: nowrap;
}
.seat.guest-seat { border-style: dashed; border-color: color-mix(in srgb, var(--gold-antique) 45%, transparent); }

/* Phone-first: the hand sits right under the thumb, the board above. */
@media (max-width: 860px) {
  .landing, .home { padding: 0.8rem 0.7rem 1.6rem; }
  .card { padding: 1rem; }
  .layout { grid-template-columns: minmax(0, 1fr); padding: 0.5rem; }
  .masthead { padding: 0.6rem 0.8rem; }
  .table { min-height: 260px; }
  /* Order 10 on a phone: the East/West strips KEEP their column of backs down
     the sides — the board column gives way and the board scrolls, so no tile is
     ever shrunk. The strips get their own fixed lane; the label and count shrink
     to fit it. */
  .table { grid-template-columns: 46px minmax(0, 1fr) 46px; gap: 0.35rem; }
  .seat-w,
  .seat-e { padding: 0.25rem 0.1rem; }
  .seat-w .name,
  .seat-e .name { font-size: 0.72rem; letter-spacing: 0.02em; }
  .seat-w .count,
  .seat-e .count { font-size: 0.62rem; }
  .hand-area { padding: 0.6rem 0.8rem 2rem; }
  .hand { gap: 6px; justify-content: center; }
  .hand .tile .half { width: 34px; height: 34px; }
  .btn { padding: 0.62rem 0.9rem; } /* >= 44px thumb targets */
}