/* Mexican Train. Phone first: the board keeps the screen.
   Secondary controls sit in the menu or the planner sheet.
   INTENTIONAL — DESIGN.md §9 and §10. */

:root {
  --felt: #1b4a38;
  --felt-deep: #10241c;
  --ivory: #f4efe4;
  --ink: #1c1915;
  --gold: #e4b75a;
  --mark: #e23d3d;
  --hot: #f0a202;
  --line: rgba(244, 239, 228, 0.16);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bot: env(safe-area-inset-bottom, 0px);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--felt-deep);
  color: var(--ivory);
  font-family: "Avenir Next", "Segoe UI", sans-serif;
  font-size: 16px;
  -webkit-tap-highlight-color: transparent;
  overflow: auto;
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
#app { min-height: 100%; min-height: 100dvh; }
#toast {
  position: fixed;
  left: 12px; right: 12px; top: calc(8px + var(--safe-top));
  z-index: 80;
  background: #3a1414;
  color: white;
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  text-align: center;
}
#toast[hidden] { display: none; }

.home, .lobby {
  min-height: 100%;
  padding: calc(28px + var(--safe-top)) 20px calc(24px + var(--safe-bot));
  display: flex;
  flex-direction: column;
  gap: 14px;
  max-width: 460px;
}
h1 {
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
  font-weight: 600;
  font-size: 42px;
  line-height: 0.95;
  margin: 0;
  letter-spacing: -0.03em;
}
.lede { margin: 0; color: #c9d7cf; font-size: 15px; }
label.field { display: flex; flex-direction: column; gap: 6px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: #b7c6bd; }
input[type="text"] {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 12px 14px;
  font-size: 18px;
  text-transform: none;
  letter-spacing: 0;
}
.deal {
  background: var(--gold);
  color: #1c1408;
  border: 0;
  border-radius: 14px;
  padding: 14px 16px;
  font-weight: 700;
  font-size: 18px;
}
.quiet {
  background: transparent;
  border: 0;
  color: var(--gold);
  padding: 8px 0;
  text-align: left;
  font-size: 15px;
}
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip {
  border: 1px solid var(--line);
  background: transparent;
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 13px;
}
.chip.is-on { background: var(--ivory); color: var(--felt-deep); border-color: var(--ivory); }
.group-label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #8ea399; margin: 0; }

.code {
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
  font-size: 40px;
  letter-spacing: 0.18em;
  margin: 0;
}
.seat {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
}
.seat button, .text-btn {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 13px;
}

.table {
  height: 100dvh;
  display: flex;
  flex-direction: column;
  background:
    radial-gradient(120% 80% at 50% 30%, #24664c 0%, var(--felt) 46%, #0e2a20 100%);
}
.topbar {
  flex: none;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: calc(6px + var(--safe-top)) 10px 6px;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: #e7f2eb;
}
.topbar .stat { opacity: 0.9; white-space: nowrap; }
.topbar .grow { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-btn {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(0,0,0,0.2);
  padding: 0;
  font-size: 16px;
  line-height: 1;
}
.board {
  position: relative;
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.board-scroll {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 4px 10px 8px;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-x pan-y; /* two-finger pinch reaches the page as zoom */
}
.hub {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin: 2px 0 10px;
}
.hub-caption {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.status-line {
  margin: 0 0 8px;
  text-align: center;
  font-size: 13px;
  color: #f3efe2;
}
.status-line.is-hot { color: var(--hot); font-weight: 700; }

.train { margin: 0 0 8px; }
.train-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: #d7e6dc;
  margin-bottom: 3px;
}
.train-marker {
  display: inline-flex; align-items: center; gap: 4px;
  height: 22px; padding: 0 8px 0 6px;
  border-radius: 999px;
  background: var(--mark);
  color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  box-shadow: 0 0 0 2px rgba(226, 61, 61, 0.3), 0 1px 3px rgba(0,0,0,0.4);
}
.train-marker svg { width: 26px; height: 18px; display: block; }
.dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--mark);
  box-shadow: 0 0 0 2px rgba(226, 61, 61, 0.25);
}
.train-tiles { display: flex; flex-wrap: wrap; gap: 3px; align-items: center; }
.my-train {
  flex: none;
  padding: 6px 10px 20px;
  background: rgba(0,0,0,0.22);
  border-top: 1px solid rgba(255,255,255,0.06);
}

.end {
  min-width: 34px;
  height: 28px;
  border-radius: 8px;
  border: 1px dashed rgba(255,255,255,0.28);
  background: transparent;
  color: #efe7d4;
  font-size: 11px;
  padding: 0 6px;
}
.end.is-legal {
  border-style: solid;
  border-color: var(--gold);
  background: rgba(228, 183, 90, 0.22);
  box-shadow: 0 0 0 2px rgba(228, 183, 90, 0.35);
  color: white;
}

.domino {
  width: 36px;
  height: 64px;
  flex: none;
  display: flex;
  flex-direction: column;
  padding: 0;
  border-radius: 4px;
  border: 1px solid #2c261c;
  background: var(--ivory);
  color: var(--ink);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 1px 2px rgba(0,0,0,0.35);
  touch-action: none;
  user-select: none;
  position: relative;
}
.domino .half {
  flex: 1;
  min-width: 0;
  min-height: 0;
  padding: 2px;
  display: block;
}
.domino .half svg { display: block; width: 100%; height: 100%; }
.domino .half + .half { border-top: 1px solid #c9ba9e; }
.domino.is-double .half + .half { border-top: 2px solid #a67c2d; }
.domino.is-flat { width: 52px; height: 26px; flex-direction: row; }
/* Board trains follow the zoom; your own train stays a fixed size. */
.board-scroll .domino.is-flat { width: calc(52px * var(--z, 1)); height: calc(26px * var(--z, 1)); touch-action: pan-x pan-y; }
.domino.is-flat .half + .half { border-top: 0; border-left: 1px solid #c9ba9e; }
.domino.is-flat.is-double .half + .half { border-left: 2px solid #a67c2d; }
.domino.is-selected { outline: 2px solid var(--gold); transform: translateY(-6px); z-index: 2; }
.domino.is-hot { outline: 2px solid var(--hot); box-shadow: 0 0 0 3px rgba(240, 162, 2, 0.35); }
.hub .domino { width: 48px; height: 84px; }
.hub .domino .half { padding: 4px; }
.gap { width: 8px; flex: none; }

.banner {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 10px;
  background: #2a2116;
  color: var(--ivory);
  font-size: 13px;
}
.banner button {
  background: var(--gold);
  color: #1c1408;
  border: 0;
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 700;
  font-size: 14px;
}

.hand-dock {
  flex: none;
  position: relative;
  background: #0c1c16;
  padding-bottom: var(--safe-bot);
}
/* The handle overlays the board. It does not take a row away from the trains. DESIGN.md §10. */
.handle {
  position: absolute;
  top: -16px;
  left: 50%;
  transform: translateX(-50%);
  height: 26px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: var(--ivory);
  color: var(--ink);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  z-index: 6;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
.coach-line {
  margin: 0;
  padding: 4px 12px 0;
  font-size: 12px;
  color: var(--gold);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.hand-row {
  display: flex;
  gap: 4px;
  overflow-x: auto;
  padding: 16px 8px 8px;
  min-height: 64px;
}
.hand-actions { display: flex; justify-content: center; padding: 0 8px 8px; }
.hand-actions button {
  background: var(--ivory);
  color: var(--ink);
  border: 0;
  border-radius: 999px;
  padding: 8px 16px;
  font-weight: 700;
}

.planner {
  position: fixed;
  left: 0; right: 0;
  bottom: var(--hand-offset, 88px);
  height: min(72vh, 560px);
  background: #f6f1e6;
  color: var(--ink);
  border-radius: 18px 18px 0 0;
  /* Closed: below the screen edge, not just below its own bottom. The sheet sits
     above the hand dock, so it must also drop past the dock or its top shows over
     the hand and the Draw button. */
  transform: translateY(calc(100% + var(--hand-offset, 88px) + 24px));
  visibility: hidden;
  transition: transform 0.22s ease, visibility 0s linear 0.22s;
  z-index: 25;
  display: flex;
  flex-direction: column;
  box-shadow: 0 -12px 40px rgba(0,0,0,0.35);
}
.planner.is-open { transform: none; visibility: visible; transition: transform 0.22s ease, visibility 0s; }
.planner header, .planner .tools {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px 14px 4px;
}
.planner h2 {
  font-family: "Iowan Old Style", Palatino, Georgia, serif;
  font-size: 22px;
  margin: 0;
}
.planner .hint { margin: 0 14px 6px; font-size: 13px; color: #5e584e; }
.planner .body { overflow: auto; padding-bottom: 12px; flex: 1; }
.chain, .loose {
  margin: 6px 12px;
  background: white;
  border-radius: 12px;
  padding: 8px;
  border: 1px dashed transparent;
}
.chain.is-target, .loose.is-target { border-color: #1b4a38; }
.chain-meta { font-size: 12px; color: #5e584e; margin-bottom: 6px; }
.planner .domino { width: 36px; height: 62px; }
.planner-row { display: flex; flex-wrap: wrap; gap: 4px; min-height: 58px; }
.tools button, .planner header button {
  background: var(--felt-deep);
  color: var(--ivory);
  border: 0;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 14px;
}
.scrim {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 20;
}

.sheet {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 40;
  display: flex;
  align-items: flex-end;
}
.sheet-card {
  width: 100%;
  max-height: 86%;
  overflow: auto;
  background: #12261f;
  color: var(--ivory);
  border-radius: 18px 18px 0 0;
  padding: 8px 8px calc(12px + var(--safe-bot));
}
.sheet-card button, .sheet-card .score-row {
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  padding: 14px 12px;
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.rules-blurb { padding: 8px 12px 16px; color: #c9d7cf; font-size: 14px; line-height: 1.4; }
.ghost {
  position: fixed;
  z-index: 70;
  pointer-events: none;
  opacity: 0.92;
  transform: translate(-50%, -50%) scale(1.05);
}

@media (min-width: 840px) {
  body { background: #0b1914; }
  #app { max-width: 920px; margin: 0 auto; }
  .table { box-shadow: 0 0 0 1px rgba(255,255,255,0.05); }
  .domino { width: 36px; height: 64px; }
  .domino .half { font-size: 16px; }
  .domino.is-flat { width: 58px; height: 34px; }
  .hub .domino { width: 58px; height: 100px; }
  .hub .domino .half { font-size: 26px; }
  .home, .lobby { padding-top: 48px; }
}

/* End badge: the number a train needs next, large at every zoom. */
.train-label { flex-wrap: wrap; }
.end-badge { display: inline-flex; align-items: center; gap: 4px; margin-left: auto; }
.end-face {
  width: 30px; height: 30px; padding: 2px;
  border-radius: 6px;
  background: var(--ivory);
  border: 2px solid #9a8f7a;
  box-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
.end-face svg { display: block; width: 100%; height: 100%; }
.end-num { min-width: 1.6em; font-size: 13px; font-weight: 700; color: #f3efe2; }
.end-badge.is-hot .end-face { outline: 2px solid var(--hot); outline-offset: 1px; }

/* A folded train shows its last tiles; the chip opens the rest. */
.fold {
  height: 26px; min-width: 34px; padding: 0 8px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.28);
  background: rgba(0,0,0,0.25);
  color: #efe7d4; font-size: 12px;
}

.zoom { display: flex; gap: 6px; margin-right: 6px; }
.zoom button {
  width: 32px; height: 32px; padding: 0;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(0,0,0,0.35);
  color: #f3efe2; font-size: 20px; line-height: 1;
}

/* Press-and-hold view of one tile. */
.loupe {
  position: fixed; inset: 0; z-index: 60;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px;
  background: rgba(6, 18, 13, 0.72);
  pointer-events: none;
}
.loupe .domino { width: 110px; height: 200px; border-radius: 10px; }
.loupe .domino .half { padding: 8px; }
.loupe-label { font-size: 22px; font-weight: 700; color: #f6f1e6; letter-spacing: 0.04em; }
/* All open ends of a train sit together at the right of its label. */
.end-badges { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; margin-left: auto; }
.end-badges .end-badge { margin-left: 0; }
.end-badge.is-branch .end-face { border-style: dashed; }
.end-fork { color: #d7e6dc; display: inline-flex; }
.end-fork svg, .branch-from svg.fork { width: 14px; height: 14px; display: block; }

/* A branch from a covered double, drawn under its train. */
.branch-row { margin: 4px 0 0 14px; padding-left: 8px; border-left: 2px dashed rgba(255,255,255,0.22); }
.branch-from { display: inline-flex; align-items: center; gap: 3px; color: #d7e6dc; margin-right: 2px; }
.branch-pip {
  width: 22px; height: 22px; padding: 1px;
  border-radius: 5px; border: 2px dashed #9a8f7a;
  background: var(--ivory);
}
.branch-pip svg { width: 100%; height: 100%; display: block; }
/* Engine on its side, about board-tile size. */
.hub { flex-direction: row; justify-content: center; gap: 8px; margin: 2px 0 8px; }
.hub .domino.is-flat { width: 60px; height: 30px; }
.hub .domino.is-flat .half { padding: 2px; }

/* Train color: a stripe down the left of each player's train, and their
   locomotive; an open train's marker takes the owner's color. */
.train.has-color { border-left: 4px solid var(--train); padding-left: 8px; }
.my-train.has-color { border-left-width: 5px; }
.train-icon { display: inline-flex; color: var(--train); }
.train-icon svg { width: 24px; height: 17px; display: block; }
.train-marker { background: var(--train, var(--mark)); }
.train-marker.is-light { color: #1d1a14; }

/* Home screen: pick your train. */
.train-colors { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.train-swatch {
  width: 46px; height: 36px; padding: 0;
  display: grid; place-items: center;
  border-radius: 10px;
  border: 2px solid transparent;
  background: rgba(255,255,255,0.06);
  color: var(--train);
}
.train-swatch svg { width: 30px; height: 21px; }
.train-swatch.is-on { border-color: var(--train); background: rgba(255,255,255,0.14); box-shadow: 0 0 0 2px rgba(0,0,0,0.3) inset; }

/* Coach card above the hand. */
.coach-card {
  display: flex; align-items: center; gap: 8px;
  margin: 18px 8px 0; padding: 8px 10px;
  border-radius: 12px;
  background: rgba(228, 183, 90, 0.14);
  border: 1px solid rgba(228, 183, 90, 0.55);
  color: #f6eedb; font-size: 13px; line-height: 1.3;
}
.coach-card.has-play { cursor: pointer; }
.coach-tag {
  flex: none; padding: 2px 7px; border-radius: 999px;
  background: var(--gold); color: #1c1408;
  font-size: 10px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase;
}
.coach-text { flex: 1; min-width: 0; }
.coach-go { flex: none; font-weight: 700; color: var(--gold); white-space: nowrap; }
.coach-card + .hand-row { padding-top: 10px; }
.domino.is-coach { box-shadow: 0 0 0 3px var(--gold), 0 0 12px rgba(228, 183, 90, 0.8); }
.end.is-legal.is-coach { background: var(--gold); color: #1c1408; font-weight: 800; }
/* Branch badges are a little smaller so a train's ends fit on one line. */
.end-badge.is-branch .end-face { width: 24px; height: 24px; }
.end-badge.is-branch .end-num { font-size: 12px; min-width: 0; }
.train-label .train-name { white-space: nowrap; }

/* Flip sits beside Draw; it only changes how your tile looks. */
.hand-actions { gap: 8px; }
.hand-actions .flip-btn { background: transparent; color: #f3efe2; border: 1px solid rgba(255,255,255,0.35); }