/* ============================================================
   RIVIERA BACKGAMMON — Riviera '72 look
   Warm linen, walnut, terracotta, brass.
   ============================================================ */

:root {
  --linen: #ece1cc;
  --linen-deep: #e0d2b6;
  --parchment: #f7f0e0;
  --walnut-1: #5b3d26;
  --walnut-2: #33200f;
  --espresso: #2e2013;
  --espresso-soft: #4a3a28;
  --terra: #b65c3b;
  --terra-deep: #96482c;
  --sand: #dcc9a3;
  --cork: #d8c49e;
  --brass: #c19a3f;
  --brass-deep: #8f6f26;
  --ivory: #f5ead2;
  --ebony: #241a12;
  --shadow: 0 18px 50px rgba(46, 32, 19, 0.35);
}

* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

/* taps must act immediately — no double-tap-to-zoom stealing moves */
#board, .btn { touch-action: manipulation; }

html, body { height: 100%; }

body {
  font-family: 'Sono', ui-monospace, monospace;
  color: var(--espresso);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(255, 250, 236, 0.9), rgba(255, 250, 236, 0) 60%),
    radial-gradient(140% 120% at 50% 110%, rgba(88, 60, 34, 0.28), rgba(88, 60, 34, 0) 55%),
    var(--linen);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 24px 40px;
  overflow-x: hidden;
}

.grain {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 40;
  opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix values='0 0 0 0 0.18 0 0 0 0 0.12 0 0 0 0 0.06 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------- masthead ---------------- */

.masthead {
  width: min(1240px, 100%);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 6px 6px 16px;
}

.title-block h1 {
  font-family: 'Young Serif', serif;
  font-size: clamp(38px, 5vw, 56px);
  line-height: 0.95;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--walnut-2);
}

.subtitle {
  margin-top: 6px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--terra-deep);
}

.scoreboard {
  display: flex;
  align-items: stretch;
  gap: 12px;
}

.player-card {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--parchment);
  border: 1px solid rgba(91, 61, 38, 0.35);
  border-radius: 14px;
  padding: 10px 16px;
  box-shadow: 0 4px 14px rgba(46, 32, 19, 0.12);
  min-width: 190px;
  transition: box-shadow 0.3s, border-color 0.3s;
}

.player-card.on-roll {
  border-color: var(--brass);
  box-shadow: 0 0 0 2px rgba(193, 154, 63, 0.45), 0 6px 18px rgba(46, 32, 19, 0.18);
}

.swatch {
  width: 26px; height: 26px;
  border-radius: 50%;
  flex: none;
}
.swatch.ivory {
  background: radial-gradient(circle at 35% 30%, #fffaf0, #e8d9b8 70%, #cdb98e);
  border: 2px solid #b39c6d;
}
.swatch.ebony {
  background: radial-gradient(circle at 35% 30%, #5a4632, #241a12 65%);
  border: 2px solid #120c07;
}

.pc-text { display: flex; flex-direction: column; gap: 1px; }
.pc-text.right { align-items: flex-end; }
.pc-name { font-weight: 700; font-size: 14px; letter-spacing: 0.04em; }
.pc-pips { font-size: 11px; color: var(--espresso-soft); }
.pc-pips b { font-weight: 700; color: var(--terra-deep); }

.pc-score {
  font-family: 'Young Serif', serif;
  font-size: 30px;
  margin-left: auto;
  color: var(--walnut-2);
  min-width: 30px;
  text-align: center;
}
.player-card.house .pc-score { margin-left: 0; margin-right: auto; }

.game-badge {
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 16px;
  min-width: 118px;
  background: linear-gradient(145deg, #e6c877, #b98f33);
  border: 1px solid var(--brass-deep);
  border-radius: 12px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5), 0 3px 8px rgba(46, 32, 19, 0.3);
}
.game-name {
  font-family: 'Young Serif', serif;
  font-size: 19px;
  color: var(--walnut-2);
  line-height: 1;
}
.game-format {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(51, 32, 15, 0.75);
  text-align: center;
}

/* ---------------- board ---------------- */

.table-zone {
  width: min(1240px, 100%);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.board-wrap {
  position: relative;
  width: 100%;
  filter: drop-shadow(0 24px 40px rgba(46, 32, 19, 0.35));
  border-radius: 26px;
}

#board { width: 100%; height: auto; display: block; }

/* ---------------- the roll disc ----------------
   A brass counter laid on the middle of the table, where the hand already is.
   Its centre is the bar's centre line — 592 across a 1320-unit board, at half
   height — and it shows up only when the throw is actually yours, so the
   table is never carrying a dead button. */

.roll-disc {
  position: absolute;
  left: 44.85%;
  top: 50%;
  /* 11.4% of the board keeps it inside the clear channel at any size; the
     floor holds a comfortable thumb target on a cramped portrait phone, where
     the board is small enough that the proportion alone would go too fine */
  width: clamp(64px, 11.4%, 152px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  display: grid;
  place-content: center;
  gap: 2px;
  border-radius: 50%;
  border: 2px solid var(--brass-deep);
  background: radial-gradient(circle at 50% 30%, #f2dc9c, #e6c877 40%, #b98f33 100%);
  color: var(--walnut-2);
  font-family: 'Sono', ui-monospace, monospace;
  cursor: pointer;
  touch-action: manipulation;
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.6),
    inset 0 -4px 9px rgba(101, 76, 18, 0.38),
    0 10px 26px rgba(46, 32, 19, 0.45);
  transition: opacity 0.22s, transform 0.16s, box-shadow 0.2s;
}

.roll-word {
  font-size: clamp(16px, 2.05vw, 27px);
  font-weight: 700;
  letter-spacing: 0.04em;
  line-height: 1;
}
.roll-hint {
  font-size: clamp(7px, 0.8vw, 10px);
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(51, 32, 15, 0.5);
}

.roll-disc:hover {
  transform: translate(-50%, -50%) scale(1.05);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.65),
    inset 0 -4px 9px rgba(101, 76, 18, 0.38),
    0 14px 32px rgba(46, 32, 19, 0.5);
}
.roll-disc:active { transform: translate(-50%, -50%) scale(0.96); }
.roll-disc:focus-visible { outline: 3px solid var(--brass); outline-offset: 5px; }

/* not your throw — gone, not greyed out and in the way */
.roll-disc:disabled {
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(0.82);
}

/* one slow ring, enough to catch the eye without the table getting noisy */
.roll-disc::after {
  content: '';
  position: absolute;
  inset: -7px;
  border-radius: 50%;
  border: 2px solid rgba(193, 154, 63, 0.8);
  animation: rollpulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes rollpulse {
  0%   { transform: scale(1);    opacity: 0.7; }
  70%  { transform: scale(1.24); opacity: 0; }
  100% { transform: scale(1.24); opacity: 0; }
}
/* once it is under the cursor it has been found */
.roll-disc:hover::after,
.roll-disc:disabled::after { animation: none; opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .roll-disc::after { animation: none; opacity: 0; }
  .roll-disc { transition: opacity 0.22s; }
  .roll-disc:hover { transform: translate(-50%, -50%); }
}

/* a touch device has no spacebar to offer, and no hover to grow into */
@media (hover: none) {
  .roll-hint { display: none; }
  .roll-disc:hover { transform: translate(-50%, -50%); }
}

/* Stack shuffles ease gently; travelling checkers fly via the Web Animations
   API in ui.js (flyChecker), so no overshoot here. */
#board .checker { transition: transform 0.45s cubic-bezier(0.25, 0.8, 0.3, 1); }
#board.noanim .checker { transition: none; }

/* Plakoto: a checker trapped under an enemy pile (keep the shared drop
   shadow — the CSS filter property overrides the SVG filter attribute) */
#board .checker.trapped { filter: url(#softShadow) brightness(0.72) saturate(0.7); }

#board .hit-target { cursor: default; }
#board .hit-target.clickable { cursor: pointer; }

/* --- highlights: movable stones, selection, legal destinations ---
   Every marker is drawn twice: a dark under-stroke for contrast on the
   pale cork, then a bright gold over-stroke that reads on the dark
   points. Nothing ever pulses below ~60% opacity. */

.hl-from { pointer-events: none; }
.hl-from.dimmed { opacity: 0.35; }

.ring-under {
  fill: none;
  stroke: rgba(30, 17, 5, 0.6);
  stroke-width: 8;
}
.ring-main {
  fill: none;
  stroke: #ffd977;
  stroke-width: 4.5;
  stroke-dasharray: 10 7;
  animation: ringspin 5s linear infinite;
}
.ring-main.solid {
  stroke: #ffedb8;
  stroke-width: 5.5;
  stroke-dasharray: none;
  animation: selpulse 0.9s ease-in-out infinite;
}
.sel-halo {
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
  animation: halobreathe 1.5s ease-in-out infinite;
}

.dest-under {
  fill: rgba(30, 17, 5, 0.35);
  stroke: rgba(30, 17, 5, 0.55);
  stroke-width: 6;
  pointer-events: none;
}
.dest-glow {
  fill: rgba(255, 217, 119, 0.5);
  stroke: #ffedb8;
  stroke-width: 3.5;
  pointer-events: none;
  transform-box: fill-box;
  transform-origin: center;
  animation: destbreathe 1.1s ease-in-out infinite;
}
.dest-tri {
  fill: rgba(255, 217, 119, 0.15);
  stroke: #ffd977;
  stroke-width: 3;
  stroke-linejoin: round;
  pointer-events: none;
  animation: softpulse 1.1s ease-in-out infinite;
}

.tray-under {
  fill: none;
  stroke: rgba(30, 17, 5, 0.55);
  stroke-width: 7;
  pointer-events: none;
}
.tray-glow {
  fill: rgba(255, 217, 119, 0.22);
  stroke: #ffd977;
  stroke-width: 4;
  pointer-events: none;
  animation: softpulse 1.1s ease-in-out infinite;
}

@keyframes ringspin { to { stroke-dashoffset: -68; } }
@keyframes selpulse {
  0%, 100% { stroke-opacity: 1; }
  50% { stroke-opacity: 0.6; }
}
@keyframes halobreathe {
  0%, 100% { transform: scale(1); opacity: 0.95; }
  50% { transform: scale(1.16); opacity: 0.7; }
}
@keyframes destbreathe {
  0%, 100% { transform: scale(1); opacity: 1; }
  50% { transform: scale(1.1); opacity: 0.8; }
}
@keyframes softpulse {
  0%, 100% { opacity: 0.95; }
  50% { opacity: 0.6; }
}

#board .die-group { transition: opacity 0.4s; }
#board .die-group.spent { opacity: 0.32; }
#board .die-body { transform-box: fill-box; transform-origin: center; }
#board .die-group.rolling .die-body { animation: dieshake 0.1s linear infinite; }
@keyframes dieshake {
  0% { transform: translate(0, 0) rotate(0deg); }
  25% { transform: translate(2px, -1.5px) rotate(2.4deg); }
  50% { transform: translate(-1.5px, 2px) rotate(-2deg); }
  75% { transform: translate(1.5px, 1.5px) rotate(1.2deg); }
  100% { transform: translate(0, 0) rotate(0deg); }
}

.board-wrap.denied { animation: deny 0.28s ease; }
@keyframes deny {
  0%, 100% { transform: translateX(0); }
  30% { transform: translateX(-7px); }
  60% { transform: translateX(6px); }
}

/* ---------------- console ---------------- */

.console {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-wrap: wrap;
  background: var(--parchment);
  border: 1px solid rgba(91, 61, 38, 0.3);
  border-radius: 16px;
  padding: 12px 18px;
  box-shadow: 0 6px 20px rgba(46, 32, 19, 0.12);
}

.message {
  font-size: 14px;
  font-weight: 500;
  flex: 1 1 260px;
  min-height: 22px;
}

.controls {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.controls .spacer { width: 10px; }

.btn {
  font-family: 'Sono', ui-monospace, monospace;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  border-radius: 999px;
  padding: 10px 20px;
  cursor: pointer;
  border: 2px solid transparent;
  transition: transform 0.12s, box-shadow 0.2s, opacity 0.2s, background 0.2s;
}
.btn:active:not(:disabled) { transform: translateY(1px) scale(0.98); }
.btn:disabled { opacity: 0.35; cursor: default; }

.btn.primary {
  background: linear-gradient(160deg, #e6c877, #b98f33);
  border-color: var(--brass-deep);
  color: var(--walnut-2);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 4px 12px rgba(143, 111, 38, 0.4);
  padding: 10px 30px;
}
.btn.primary:hover:not(:disabled) { box-shadow: inset 0 1px 0 rgba(255,255,255,0.55), 0 6px 18px rgba(143, 111, 38, 0.55); }

.btn.outline {
  background: transparent;
  border-color: var(--espresso-soft);
  color: var(--espresso);
}
.btn.outline:hover:not(:disabled) { background: rgba(46, 32, 19, 0.07); }

/* conceding is the one button on the table you cannot take back */
.btn.outline.danger {
  border-color: rgba(150, 72, 44, 0.55);
  color: var(--terra-deep);
}
.btn.outline.danger:hover:not(:disabled) { background: rgba(182, 92, 59, 0.12); }

.btn.ghost {
  background: transparent;
  color: var(--espresso-soft);
  border-color: transparent;
  padding: 10px 12px;
  font-weight: 600;
}
.btn.ghost:hover { color: var(--terra-deep); }

/* --- online rooms --- */

.room-chip.hidden,
.room-number.hidden,
.ov-input.hidden,
.card-body.hidden { display: none; }

/* small and out of the way, but always there to read out */
.room-chip {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(74, 58, 40, 0.6);
  border: 1px solid rgba(91, 61, 38, 0.25);
  border-radius: 999px;
  padding: 5px 11px;
  margin-right: 4px;
  user-select: all;
  white-space: nowrap;
}
.room-chip b {
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--terra-deep);
}

.room-number {
  font-family: 'Young Serif', serif;
  font-size: clamp(40px, 9vw, 58px);
  letter-spacing: 0.1em;
  color: var(--walnut-2);
  margin: 6px 0 14px;
  user-select: all;
}

.ov-input { margin: 14px 0 4px; }
.ov-input input {
  font-family: 'Young Serif', serif;
  font-size: 34px;
  letter-spacing: 0.24em;
  text-align: center;
  width: 100%;
  max-width: 300px;
  padding: 10px 8px;
  color: var(--walnut-2);
  background: rgba(255, 255, 255, 0.55);
  border: 2px solid rgba(91, 61, 38, 0.35);
  border-radius: 14px;
  outline: none;
}
.ov-input input:focus { border-color: var(--brass); box-shadow: 0 0 0 3px rgba(193, 154, 63, 0.25); }
.ov-input input::placeholder { color: rgba(74, 58, 40, 0.25); }

/* ---------------- overlays ---------------- */

.overlay {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  background: rgba(38, 26, 14, 0.55);
  backdrop-filter: blur(3px);
  opacity: 1;
  transition: opacity 0.3s;
}
.overlay.hidden { opacity: 0; pointer-events: none; }

.card {
  width: min(520px, calc(100vw - 48px));
  background: var(--parchment);
  border: 1px solid rgba(91, 61, 38, 0.4);
  border-radius: 22px;
  box-shadow: var(--shadow);
  padding: 34px 38px 30px;
  text-align: center;
  transform: translateY(0);
  animation: cardin 0.35s cubic-bezier(0.2, 0.9, 0.3, 1.15);
}
@keyframes cardin {
  from { transform: translateY(18px) scale(0.97); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

.card-kicker {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--terra-deep);
  margin-bottom: 10px;
}
.card-title {
  font-family: 'Young Serif', serif;
  font-size: 38px;
  color: var(--walnut-2);
  margin-bottom: 12px;
}
.card-body { font-size: 14px; line-height: 1.55; color: var(--espresso-soft); }

.card-actions {
  margin-top: 24px;
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.help-card { text-align: left; }
.help-card .card-kicker, .help-card .card-title { text-align: center; }
.help-body { font-size: 13.5px; line-height: 1.6; color: var(--espresso-soft); display: grid; gap: 10px; max-height: 52vh; overflow-y: auto; padding-right: 6px; }
.help-body b { color: var(--espresso); }

@media (max-width: 780px) {
  body { padding: 14px 10px 30px; }
  .masthead { justify-content: center; text-align: center; }
  .title-block { width: 100%; }
  .scoreboard { width: 100%; justify-content: center; gap: 8px; }
  .player-card { min-width: 0; flex: 1; padding: 8px 10px; gap: 7px; }
  .pc-name { font-size: 12px; }
  .pc-pips { font-size: 10px; }
  .pc-score { font-size: 22px; min-width: 20px; }
  .swatch { width: 20px; height: 20px; }
  .game-badge { min-width: 0; padding: 6px 10px; flex: none; }
  .game-name { font-size: 15px; }
  .game-format { font-size: 8px; letter-spacing: 0.1em; }
  .card { padding: 26px 22px; }
}