/* Premium raster playing table. Scoped to Play; the shared club pages stay intact. */
.game-back-gammon.club-play {
  --club-bg:#142735; --club-panel:#203c4c; --club-soft:#345362; --club-ink:#f6eddc;
  --club-accent:#dfbe86; --club-muted:#b1c5cc; --club-line:#d7c4962b;
  --orange:#d99a43; --blue:#72a7d4; --gold:#f1ce8b; --line:#d7c49629;
  margin:0; min-width:320px; color:#f6eddc; font-family:Club,Arial,sans-serif;
  background:radial-gradient(ellipse at 43% 28%,#365366,#1a3445 48%,#0d1b29 95%);
}
.game-back-gammon.club-play::before,.game-back-gammon.club-play .ambient { display:none; }
.game-back-gammon.club-play .arcade-app { width:min(1460px,calc(100% - 48px)); padding:18px 0 16px; }
.game-back-gammon.club-play .club-site-header {
  margin:0; background:#0e2332b3; border:1px solid #bdd7df24; border-radius:14px; box-shadow:inset 0 1px #ffffff06;
}
.game-back-gammon.club-play .club-header-inner { min-height:72px; padding:10px 14px; flex-wrap:nowrap; gap:16px; }
.game-back-gammon.club-play .club-brand { width:auto; }
.game-back-gammon.club-play .club-brand b { font-size:23px; }
.game-back-gammon.club-play .club-brand small { color:#b1c1c5; font-size:7px; }
.game-back-gammon.club-play .club-brand .club-mark { background:none; border:0; box-shadow:none; width:38px; height:38px; }
.game-back-gammon.club-play .club-console { width:auto; gap:20px; }
body.game-back-gammon.club-play:has(#disconnect) .club-brand { width:auto; }
body.game-back-gammon.club-play:has(#disconnect) .club-console { width:auto; margin-left:auto; justify-content:flex-end; }
.game-back-gammon.club-play .club-game-actions :is(button,a),
.game-back-gammon.club-play .club-menu-toggle { min-height:44px; color:#e5e8de; background:#274452; border-color:#c4dfe123; font-size:10px; }
.game-back-gammon.club-play .club-game-actions :is(button,a):hover { background:#385866; }
.game-back-gammon.club-play .club-site-nav { background:#10232d; border-color:#d7c49620; }
.game-back-gammon.club-play .club-site-nav a { color:#bed1d4; }
.game-back-gammon.club-play .club-site-nav a[aria-current=page] { background:#b8975b2e; color:#ffdfaa; }
.game-back-gammon.club-play .marquee {
  display:none; width:min(1280px,100%); min-height:39px; margin:12px auto 0; padding:0 4px; gap:18px;
  border:0; border-radius:0; background:none; box-shadow:none; font:600 9px Club,sans-serif; letter-spacing:.08em;
}
.game-back-gammon.club-play .marquee-label { color:#d9c190; }
.game-back-gammon.club-play #marquee-message { color:#b9cbd0; text-align:center; }
.game-back-gammon.club-play .marquee-score { color:#9fb8c1; }
.game-back-gammon.club-play .marquee-score b { color:#e1c895; }
.game-back-gammon.club-play .game-layout {
  width:min(1340px,calc((100svh - 415px) * 1.5724 + 310px)); max-width:100%; margin:0 auto;
  display:grid; grid-template-columns:minmax(0,1fr) 278px; gap:28px; padding:16px 0 24px; align-items:center;
  border:0; border-radius:0; background:none; box-shadow:none;
}
.game-back-gammon.club-play .playfield { min-width:0; }
.game-back-gammon.club-play .board-heading { margin:0 2px 16px; align-items:center; }
.game-back-gammon.club-play .eyebrow { color:#c0b292; font:600 9px/1.6 Club,sans-serif; letter-spacing:.13em; }
.game-back-gammon.club-play .board-heading h1 { font:400 clamp(30px,3vw,40px)/1.1 Georgia,serif; letter-spacing:-.045em; margin:4px 0 0; }
.game-back-gammon.club-play .board-heading h1>span { color:#e4b970; }
.game-back-gammon.club-play .invite-button { min-height:44px; padding:8px 13px; font:600 10px Club,sans-serif; border:1px solid #d7c49644; color:#e6d4ae; background:#173546; border-radius:8px; }
.game-back-gammon.club-play .player-banner {
  position:relative; min-height:55px; margin:0 0 10px; padding:6px 12px;
  border:1px solid #b7d3db29; border-radius:11px; background:#102b3de6; gap:10px;
  color:#c4d9e2; box-shadow:none;
}
.game-back-gammon.club-play .player-orange { margin:10px 0 0; }
.game-back-gammon.club-play .player-banner.is-turn { background:#264755; box-shadow:inset 3px 0 #dcbd84; border-color:#d9bd7c77; }
.game-back-gammon.club-play .player-blue.is-turn { box-shadow:inset 3px 0 #83b7dc; border-color:#80adcf77; }
.game-back-gammon.club-play .resin-swatch,
.game-back-gammon.club-play .player-orb {
  flex:none; display:block; width:34px; height:34px; border:0; border-radius:50%;
  box-shadow:none; background-image:url("resin-checkers-v1.webp"); background-repeat:no-repeat; background-size:200% 100%;
}
.game-back-gammon.club-play .resin-swatch.orange,.game-back-gammon.club-play .player-orange .player-orb { background-position:0 0; }
.game-back-gammon.club-play .resin-swatch.blue,.game-back-gammon.club-play .player-blue .player-orb { background-position:100% 0; }
.game-back-gammon.club-play .player-tag { font:600 11px/1.3 Club,sans-serif; letter-spacing:.04em; color:#e0e7de; }
.game-back-gammon.club-play .player-banner strong { font:400 10px/1.3 Club,sans-serif; color:#b0c7d1; }
.game-back-gammon.club-play .off-count {
  flex:none; display:flex; align-items:center; gap:7px; min-height:44px; padding:5px 10px;
  color:#daceb3; background:#091d2b7d; border:1px solid #ddc69d29; border-radius:8px; font-family:Club,sans-serif; cursor:default;
}
.game-back-gammon.club-play .off-count i { font:600 8px Club,sans-serif; letter-spacing:.06em; }
.game-back-gammon.club-play .off-count b { font:400 23px Georgia,serif; color:#ecdbb7; }
.game-back-gammon.club-play .off-count small { font-size:9px; color:#a7bac2; }
.game-back-gammon.club-play .off-count.is-target { cursor:pointer; border-color:#ffe0a0; box-shadow:0 0 0 2px #ffe0a066; background:#6f532f; text-shadow:none; }
/* A single raster board image sits behind native hit targets. No SVG or CSS triangles.
   8 px of studio margin is clipped; the measured playing field remains exact. */
.game-back-gammon.club-play .board-frame {
  position:relative; aspect-ratio:1552/987; padding:0; border:0; border-radius:8px; overflow:hidden;
  background:#634323 url("walnut-board-v1.webp") center / 101.03093% 101.62107% no-repeat;
  box-shadow:0 5px 0 #0a1520,0 16px 32px #07131c66;
}
.game-back-gammon.club-play .board-frame::before,
.game-back-gammon.club-play .board::before { display:none; }
.game-back-gammon.club-play .board {
  position:absolute; left:4.639175%; top:7.294833%; width:90.657216%; height:85.308004%;
  display:block; border:0; border-radius:0; overflow:visible; background:none; box-shadow:none;
  user-select:none; -webkit-user-select:none;
}
.game-back-gammon.club-play .point {
  position:absolute; width:7.5%; height:46%; top:0; padding:0; border:0; background:none;
  transform:translateX(-50%); border-radius:5px; touch-action:manipulation;
}
.game-back-gammon.club-play .point.bottom { top:auto; bottom:0; }
.game-back-gammon.club-play .point::before { display:none; }
.game-back-gammon.club-play .point-number {
  position:absolute; z-index:6; width:100%; left:0; right:auto; top:-17px; text-align:center;
  color:#f5e1b9; font:600 clamp(7px,.9vw,11px)/1 Club,sans-serif; text-shadow:0 1px 2px #362516;
}
.game-back-gammon.club-play .point.bottom .point-number { top:auto; bottom:-17px; }
/* The checkers are not here any more. They are painted by the brain into the
   canvas laid over this board (src/backgammon-wasm-bridge.js,
   engine/backgammon_paint.rs), because a stylesheet that can place a checker
   is a page that knows where the checkers are: a class and a stack of spans
   were all a reader had to count. The artwork is still this sprite — the page
   cuts two circular tiles out of it and hands them to the brain, which is the
   only thing that knows where they go. A canvas is a replaced element, so it
   is given a width and a height as well as inset:0 — without those it draws at
   its own pixel size and runs off the board on a screen with two device pixels
   to the CSS pixel. See docs/board-stays-in-the-brain.md. */
.game-back-gammon.club-play .board-art {
  position:absolute; z-index:4; inset:0; width:100%; height:100%; pointer-events:none;
}
.game-back-gammon.club-play .point.is-target::after {
  content:""; position:absolute; z-index:7; width:47%; aspect-ratio:1; border:2px solid #fff3ce; border-radius:50%;
  left:26.5%; bottom:5%; background:#b68d3ba8; box-shadow:0 0 0 2px #5b442c70; pointer-events:none;
}
.game-back-gammon.club-play .point.bottom.is-target::after { top:5%; bottom:auto; }
.game-back-gammon.club-play .point:focus-visible { outline:2px solid #163955; outline-offset:-1px; background:#eacf9422; }
.game-back-gammon.club-play .bar {
  position:absolute; top:0; left:47.121535%; width:5.828003%; height:100%; padding:3% .25%;
  display:flex; flex-direction:column; justify-content:space-between; align-items:center;
  border:0; background:none; box-shadow:none; color:#e6c99d;
}
/* The bar's two seats stay as buttons a player can press; what stands on them
   is painted with everything else. */
.game-back-gammon.club-play .bar-checker {
  position:relative; flex:none; width:98%; max-width:none; height:auto; aspect-ratio:1;
  border:0; padding:0; border-radius:50%; background:none; box-shadow:none;
}
.game-back-gammon.club-play .bar-checker.is-selectable { cursor:pointer; }
.game-back-gammon.club-play .bar-center { width:auto; writing-mode:vertical-rl; font:600 9px Club,sans-serif; letter-spacing:.25em; color:#edcfa1; }
.game-back-gammon.club-play .device-board-viewport { border-radius:9px; scrollbar-color:#b39463 #173040; }
.game-back-gammon.club-play .command-deck { display:grid; grid-template-columns:1fr; gap:14px; align-self:center; min-width:0; }
.game-back-gammon.club-play .turn-console,
.game-back-gammon.club-play .dice-console,
.game-back-gammon.club-play .match-console {
  position:relative; inset:auto; min-width:0; padding:20px; border:1px solid #d9c2912c;
  border-radius:15px; background:linear-gradient(145deg,#254251eb,#112d3de8); box-shadow:inset 0 1px #ffffff07,0 10px 20px #04172522;
}
.game-back-gammon.club-play .console-topline #room-badge,
.game-back-gammon.club-play #dice-caption { color:#d7bf8c; font:600 8px Club,sans-serif; letter-spacing:.05em; }
.game-back-gammon.club-play .game-message { min-height:49px; margin:14px 0; color:#f0e5ce; font:400 20px/1.25 Georgia,serif; }
.game-back-gammon.club-play .roll-button {
  min-height:50px; color:#423622; border:1px solid #f9dfad; border-radius:10px;
  background:linear-gradient(115deg,#f3dcb3,#dab478); box-shadow:0 3px 0 #997b4b; font:600 12px Club,sans-serif; letter-spacing:.1em;
}
.game-back-gammon.club-play .roll-button:not(:disabled):hover { transform:translateY(-1px); box-shadow:0 4px 0 #997b4b; }
.game-back-gammon.club-play .turn-hint { color:#bbccd0; font:400 11px/1.6 Club,sans-serif; min-height:0; margin:13px 0 0; }
.game-back-gammon.club-play .dice-rack { gap:10px; min-height:58px; margin-top:16px; justify-content:center; align-items:center; }
.game-back-gammon.club-play .die,
.game-back-gammon.club-play .die-preview {
  display:grid; place-items:center; width:51px; height:51px; padding:9px; border:1px solid #fff5d7;
  border-radius:11px; color:#203749; background:linear-gradient(140deg,#fff7df,#d9c69e);
  box-shadow:inset 2px 2px 3px #fffdf0,0 3px 0 #a38d66,0 6px 8px #091b2a77; transform:none;
}
.game-back-gammon.club-play .dice-face { display:grid; width:100%; height:100%; grid-template:repeat(3,1fr)/repeat(3,1fr); pointer-events:none; }
.game-back-gammon.club-play .dice-face i { width:7px; height:7px; border-radius:50%; background:#243e4d; box-shadow:inset 0 1px 2px #061521; justify-self:center; align-self:center; }
.game-back-gammon.club-play .die.is-playable { border-color:#fff0c4; box-shadow:inset 1px 1px #fff,0 3px 0 #a38d66; }
.game-back-gammon.club-play .die.is-selected { background:linear-gradient(145deg,#ffe6a3,#e3b559); transform:translateY(-3px); box-shadow:0 0 0 2px #fff0c3,0 5px 0 #9b7940; color:#402b15; }
.game-back-gammon.club-play .die:disabled { opacity:.6; }
.game-back-gammon.club-play .dice-empty { display:flex; flex-wrap:wrap; gap:12px; width:100%; justify-content:center; }
.game-back-gammon.club-play .dice-empty small { width:100%; text-align:center; color:#a7bfc5; font:400 9px Club,sans-serif; letter-spacing:.02em; }
.game-back-gammon.club-play .die-preview:first-child { transform:rotate(-8deg); }
.game-back-gammon.club-play .die-preview:nth-child(2) { transform:rotate(7deg); }
.game-back-gammon.club-play .match-console { padding:0; overflow:hidden; }
.game-back-gammon.club-play .match-console>summary { min-height:48px; padding:14px 18px; cursor:pointer; list-style:none; }
.game-back-gammon.club-play .match-console>summary::-webkit-details-marker { display:none; }
.game-back-gammon.club-play .feed-live { color:#9dbac2; font:400 8px Club,sans-serif; }
.game-back-gammon.club-play .feed-live i { background:#a3c5c0; box-shadow:none; animation:none; }
.game-back-gammon.club-play .history { max-height:142px; padding:0 18px 16px; margin:0; font:400 10px/1.55 Club,sans-serif; color:#bacbd1; scrollbar-color:#658b9c transparent; }
.game-back-gammon.club-play .history li { border-color:#afcad315; padding:8px 0; }
.game-back-gammon.club-play footer { gap:12px; margin:4px auto 0; padding:14px 0 0; border-top:1px solid #b9d0d51c; color:#9fb9c2; font:400 8px Club,sans-serif; letter-spacing:.07em; }
.game-back-gammon.club-play :is(button,a,summary):focus-visible { outline:2px solid #ffdb96; outline-offset:3px; }
@media(max-width:1100px) {
  .game-back-gammon.club-play .club-site-nav { background:#193646; }
  .game-back-gammon.club-play .game-layout { width:min(100%,calc((100svh - 410px) * 1.5724 + 270px)); grid-template-columns:minmax(0,1fr) 250px; gap:20px; }
  .game-back-gammon.club-play .turn-console,.game-back-gammon.club-play .dice-console { padding:17px; }
  .game-back-gammon.club-play .command-deck { grid-template-columns:1fr; }
}
@media(max-width:900px) and (orientation:portrait), (max-width:700px) {
  .game-back-gammon.club-play .arcade-app { width:calc(100% - 24px); padding:12px 0; }
  .game-back-gammon.club-play .club-header-inner { padding:7px 9px; min-height:60px; gap:8px; flex-wrap:nowrap; }
  .game-back-gammon.club-play .club-brand { width:auto; flex:none; gap:5px; }
  .game-back-gammon.club-play .club-brand small { display:none; }
  .game-back-gammon.club-play .club-brand b { font-size:18px; }
  .game-back-gammon.club-play .club-console { width:auto; gap:9px; flex:1; justify-content:flex-end; }
  .game-back-gammon.club-play .club-game-actions { gap:5px; }
  .game-back-gammon.club-play .club-game-actions :is(button,a) { padding-inline:8px; font-size:9px; }
  .game-back-gammon.club-play .marquee { min-height:34px; margin-top:8px; font-size:8px; gap:8px; }
  .game-back-gammon.club-play .marquee-score { display:none; }
  .game-back-gammon.club-play .game-layout { grid-template-columns:minmax(0,1fr); gap:16px; padding:8px 0 16px; width:100%; max-width:760px; }
  .game-back-gammon.club-play .board-heading { margin-bottom:12px; }
  .game-back-gammon.club-play .board-heading h1 { font-size:32px; }
  .game-back-gammon.club-play .board-heading .eyebrow { font-size:7px; }
  .game-back-gammon.club-play .player-banner { min-height:50px; gap:7px; padding:5px 8px; }
  .game-back-gammon.club-play .player-orb { width:30px; height:30px; }
  .game-back-gammon.club-play .player-tag { font-size:10px; }
  .game-back-gammon.club-play .player-banner strong { font-size:9px; max-width:none; }
  .game-back-gammon.club-play .off-count { min-height:44px; padding:5px 8px; gap:5px; }
  .game-back-gammon.club-play .off-count b { font-size:20px; }
  .game-back-gammon.club-play .point-number { top:-12px; font-size:8px; }
  .game-back-gammon.club-play .point.bottom .point-number { bottom:-12px; }
  .game-back-gammon.club-play .command-deck { grid-template-columns:minmax(0,1.1fr) minmax(0,1fr); gap:10px; }
  .game-back-gammon.club-play .match-console { grid-column:1/-1; }
  .game-back-gammon.club-play .game-message { min-height:42px; font-size:17px; margin:10px 0; }
  .game-back-gammon.club-play .turn-console,.game-back-gammon.club-play .dice-console { padding:14px; }
  .game-back-gammon.club-play .roll-button { min-height:48px; font-size:10px; letter-spacing:.03em; gap:6px; }
  .game-back-gammon.club-play .turn-hint { font-size:10px; line-height:1.5; }
  .game-back-gammon.club-play .section-title,.game-back-gammon.club-play .console-topline { flex-wrap:wrap; gap:4px; }
  .game-back-gammon.club-play .eyebrow { font-size:8px; letter-spacing:.08em; }
  .game-back-gammon.club-play .dice-rack { gap:8px; }
  .game-back-gammon.club-play .die,.game-back-gammon.club-play .die-preview { width:44px; height:44px; padding:7px; border-radius:9px; }
  .game-back-gammon.club-play .dice-face i { width:6px; height:6px; }
  .game-back-gammon.club-play .dice-empty { gap:8px; }
}
@media(max-width:600px) {
  .game-back-gammon.club-play .club-brand b { display:none; }
  .game-back-gammon.club-play .club-brand .club-mark { width:28px; height:28px; }
  .game-back-gammon.club-play .resin-swatch { width:28px; height:28px; }
  .game-back-gammon.club-play .club-menu-toggle { min-width:44px; width:44px; font-size:0; padding:8px; }
  .game-back-gammon.club-play .club-menu-toggle:before { content:"☰"; font-size:18px; }
  .game-back-gammon.club-play .player-banner { flex-wrap:wrap; gap:3px 8px; }
  .game-back-gammon.club-play .player-orb { width:26px; height:26px; }
  .game-back-gammon.club-play .player-banner strong { font-size:8px; flex:1; }
  .game-back-gammon.club-play .off-count { gap:4px; }
  .game-back-gammon.club-play .off-count i { font-size:7px; }
  .game-back-gammon.club-play .off-count small { font-size:8px; }
  .game-back-gammon.club-play .point-number { top:-10px; font-size:7px; }
  .game-back-gammon.club-play .point.bottom .point-number { bottom:-10px; }
  .game-back-gammon.club-play .bar-center { font-size:7px; }
}
@media(max-width:360px) {
  .game-back-gammon.club-play .arcade-app { width:calc(100% - 18px); }
  .game-back-gammon.club-play .club-header-inner { padding-inline:6px; }
  .game-back-gammon.club-play .club-console { gap:6px; }
  .game-back-gammon.club-play .club-game-actions :is(button,a) { padding-inline:6px; }
  .game-back-gammon.club-play .off-count small { display:none; }
  .game-back-gammon.club-play .player-tag { font-size:9px; }
  .game-back-gammon.club-play .turn-console,.game-back-gammon.club-play .dice-console { padding:11px; }
}
@media(max-height:600px) and (orientation:landscape) {
  .game-back-gammon.club-play .arcade-app { width:calc(100% - 28px); padding-top:8px; }
  .game-back-gammon.club-play .club-header-inner { min-height:54px; padding:5px 9px; }
  .game-back-gammon.club-play .club-brand b { font-size:18px; }
  .game-back-gammon.club-play .club-brand small { display:none; }
  .game-back-gammon.club-play .marquee { margin-top:4px; min-height:27px; font-size:8px; }
  .game-back-gammon.club-play .game-layout { width:100%; grid-template-columns:minmax(0,1fr) 220px; gap:16px; padding:6px 0 14px; align-items:start; }
  .game-back-gammon.club-play .board-heading { display:none; }
  .game-back-gammon.club-play .playfield { width:min(100%,calc((100svh - 165px) * 1.5724)); justify-self:center; }
  .game-back-gammon.club-play .player-banner { min-height:38px; padding:3px 7px; gap:6px; }
  .game-back-gammon.club-play .player-orb { width:24px; height:24px; }
  .game-back-gammon.club-play .player-tag { font-size:9px; }
  .game-back-gammon.club-play .player-banner strong { font-size:8px; }
  .game-back-gammon.club-play .off-count { min-height:44px; padding:3px 7px; }
  .game-back-gammon.club-play .off-count b { font-size:18px; }
  .game-back-gammon.club-play .device-board-viewport { max-height:min(var(--device-board-fit-height),calc(100svh - 155px)); }
  .game-back-gammon.club-play .command-deck { grid-template-columns:1fr; gap:10px; }
  .game-back-gammon.club-play .turn-console,.game-back-gammon.club-play .dice-console { padding:13px; }
  .game-back-gammon.club-play .game-message { font-size:17px; min-height:0; }
  .game-back-gammon.club-play .match-console { max-height:none; }
}
@media(prefers-reduced-motion:reduce) {
  .game-back-gammon.club-play * { animation:none!important; transition:none!important; scroll-behavior:auto!important; }
}