/* Backgammon: a games-room board of dark walnut round a green baize field, points in bone and oxblood, checkers of
   ivory and ebony (each with a thin ring in its seat colour), a brass-and-ivory doubling cube. The theme block swaps
   the shared tokens while the game is on screen (html.theme-backgammon); the rest is this game's own pieces, scoped
   under .bg-* so nothing leaks into the other games' pages. The board's palette is the --bg-* tokens below. On a phone
   held upright the board stands on its end and is sized to the height left by the bars around it (--bg-room). */
html.theme-backgammon {
    --bg: #1a120c;
    --panel: #2a1c13;
    --panel-2: #36261a;
    --panel-3: #443022;
    --line: #5c4431;
    --text: #f6ecdc;
    --muted: #c8b294;
    --accent: #d6a548;
    --accent-2: #f2c86c;
    --accent-dark: #9a7128;
    --accent-text: #24170a;
    --danger: #e2553f;
    --ok: #8fd49a;
    --display: "Playfair Display", "Iowan Old Style", Georgia, serif;
    --body: "Lora", "Iowan Old Style", Georgia, serif;
    /* the board */
    --bg-wood-a: #5b381f;
    --bg-wood-b: #74482a;
    --bg-wood-c: #3b2213;
    --bg-wood-edge: #24140a;
    --bg-felt-hi: #2c5c45;
    --bg-felt-lo: #163626;
    --bg-point-light: #e8d9b9;
    --bg-point-dark: #8e2d27;
    --bg-point-edge: rgba(0, 0, 0, .25);
    --bg-num: rgba(246, 236, 220, .6);
    --bg-tray: #120b06;
    /* the checkers */
    --bg-light-hi: #fffaf0;
    --bg-light: #ede0c4;
    --bg-light-lo: #c4b08a;
    --bg-light-edge: #8f7a55;
    --bg-dark-hi: #6e4b3c;
    --bg-dark: #3a241c;
    --bg-dark-lo: #160c08;
    --bg-dark-edge: #070403;
    --bg-dark-ico: #4b2f25;
    /* lights */
    --bg-glow: #ffd36e;
    --bg-hit: #ff7a5c;
}
html.theme-backgammon body { background: radial-gradient(ellipse 120% 60% at 50% 0%, #2b1d12 0%, var(--bg) 70%) fixed var(--bg); }
html.theme-backgammon h1, html.theme-backgammon h2 { letter-spacing: .01em; }

/* ---- the page: top bar, their row, the board, your row, one bar of actions */
.page.game-page.bg-page { padding-left: .5rem; padding-right: .5rem; padding-top: .45rem; max-width: 1100px; }
.page.game-page.bg-page.with-fabs { padding-bottom: 4.6rem; }
.bg-topbar { margin-bottom: .35rem !important; }
.bg-topbar .row { gap: .35rem; flex-wrap: nowrap; }
/* A narrow phone with the cube on: the match score pill, the cube, the chat bubble and the menu fill the bar, so the
   "· to N" after the game number goes (the lobby and the menu still say the match length). */
@media (max-width: 379px) { .bg-topbar:has(.bg-cube-pill) .round .of { display: none; } }
.bg-page .topbar .round { font-size: 1.2rem; }
.bg-crawford { color: var(--accent-2) !important; font-weight: 700 !important; }
.pill.bg-crawford { background: var(--panel-2); border-color: var(--accent); }
.bg-score { display: inline-flex; align-items: center; gap: .2rem; background: var(--panel); border: 1px solid var(--line); border-radius: 999px; padding: .12rem .45rem .12rem .3rem; }
.bg-score .who { display: inline-flex; align-items: center; gap: .15rem; font-variant-numeric: tabular-nums; }
.bg-score .who + .who::before { content: "–"; color: var(--muted); margin: 0 .15rem 0 .05rem; }
.bg-score .who b { font-family: var(--display); font-size: 1.05rem; }
.bg-score .ico { width: 1.05rem; height: 1.05rem; }
.bg-score .who.light .ico, .bg-seat-ico.light { color: var(--bg-light); }
.bg-score .who.dark .ico, .bg-seat-ico.dark { color: var(--bg-dark-ico); filter: drop-shadow(0 0 1px rgba(246, 236, 220, .75)); }
.bg-cube-pill { display: inline-flex; align-items: center; gap: .2rem; padding: .12rem .45rem; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); font-weight: 700; font-size: .85rem; white-space: nowrap; }
.bg-cube-pill .ico { width: 1.05rem; height: 1.05rem; color: #f3ead6; }
.bg-cube-pill.mine { border-color: var(--accent); color: var(--accent-2); }

.bg-player { display: flex; align-items: center; gap: .4rem; min-height: 2.55rem; padding: .2rem .5rem; background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
    transition: border-color .3s, box-shadow .3s; margin: .3rem 0; }
.bg-player.turn { border-color: var(--accent); box-shadow: 0 0 0 1px rgba(214, 165, 72, .3), 0 0 14px rgba(214, 165, 72, .15); }
.bg-player .bg-seat-ico { width: 1.35rem; height: 1.35rem; flex: none; }
.bg-player .name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 7.5rem; }
.bg-pips { color: var(--muted); font-size: .82rem; white-space: nowrap; }
.bg-pips b { color: var(--text); font-family: var(--display); font-size: 1rem; font-variant-numeric: tabular-nums; }
.bg-player .status { color: var(--muted); font-style: italic; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bg-dice { display: inline-flex; align-items: center; gap: .4rem; margin-left: auto; min-height: 2.1rem; flex: none; }
button.bg-dice { background: none; border: 0; padding: .1rem .2rem; border-radius: 10px; font: inherit; color: inherit; cursor: default; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
button.bg-dice.can-roll { cursor: pointer; background: rgba(214, 165, 72, .14); box-shadow: inset 0 0 0 1px var(--accent); animation: bg-breathe 1.4s ease-in-out infinite alternate; }
.bg-roll-hint { font-weight: 700; color: var(--accent-2); font-size: .85rem; }
.bg-blocked { font-size: .75rem; font-weight: 700; color: var(--bg-hit); text-transform: uppercase; letter-spacing: .06em; }
.bg-error { text-align: center; font-size: .85rem; margin: .1rem 0 0; }
@keyframes bg-breathe { from { box-shadow: inset 0 0 0 1px var(--accent), 0 0 0 rgba(255, 211, 110, 0); } to { box-shadow: inset 0 0 0 1px var(--accent-2), 0 0 12px rgba(255, 211, 110, .45); } }

/* ---- the board (SVG) */
.bg-board-wrap { touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; position: relative; }
.bg-board { display: block; max-width: none; margin: 0 auto; border-radius: 14px; box-shadow: 0 12px 30px rgba(0, 0, 0, .6); }
.bg-board.tall { --bg-room: 13.7rem; width: min(100%, calc((100dvh - var(--bg-room)) * 360 / 600)); aspect-ratio: 360 / 600; height: auto; }
.bg-board.wide { --bg-room: 15rem; width: min(100%, calc((100dvh - var(--bg-room)) * 600 / 400)); aspect-ratio: 600 / 400; height: auto; }
.bg-board text { font-family: var(--body); pointer-events: none; }
.bg-stop-light-hi { stop-color: var(--bg-light-hi); } .bg-stop-light { stop-color: var(--bg-light); } .bg-stop-light-lo { stop-color: var(--bg-light-lo); }
.bg-stop-dark-hi { stop-color: var(--bg-dark-hi); } .bg-stop-dark { stop-color: var(--bg-dark); } .bg-stop-dark-lo { stop-color: var(--bg-dark-lo); }
.bg-stop-wood-a { stop-color: var(--bg-wood-a); } .bg-stop-wood-b { stop-color: var(--bg-wood-b); } .bg-stop-wood-c { stop-color: var(--bg-wood-c); }
.bg-stop-felt-hi { stop-color: var(--bg-felt-hi); } .bg-stop-felt-lo { stop-color: var(--bg-felt-lo); }
.bg-frame { stroke: var(--bg-wood-edge); stroke-width: 2; }
.bg-field { stroke: rgba(0, 0, 0, .55); stroke-width: 1.5; }
.bg-bar { stroke: var(--bg-wood-edge); stroke-width: 1.2; }
.bg-tray { fill: var(--bg-tray); stroke: var(--bg-wood-edge); stroke-width: 1.2; }
.bg-tray-half { fill: transparent; stroke: none; transition: fill .2s; }
.bg-tray-half.target { fill: rgba(255, 211, 110, .22); stroke: var(--bg-glow); stroke-width: 1.6; stroke-dasharray: 4 3; animation: bg-pulse 1s ease-in-out infinite alternate; }
.bg-tray-half.hint { stroke: var(--bg-glow); stroke-width: 1.2; }

.bg-pt { stroke: var(--bg-point-edge); stroke-width: .8; transition: opacity .2s, fill .2s; }
.bg-pt.light { fill: var(--bg-point-light); }
.bg-pt.dark { fill: var(--bg-point-dark); }
.bg-pt.movable { filter: brightness(1.12); }
.bg-pt.target { fill: #f6cf6e; stroke: var(--bg-glow); stroke-width: 1.4; animation: bg-pulse 1s ease-in-out infinite alternate; }
.bg-pt.dim { opacity: .55; }
.bg-pt.hint { stroke: var(--bg-glow); stroke-width: 1.4; }
.bg-num { font-size: 9px; font-weight: 700; fill: var(--bg-num); }
.bg-board.wide .bg-num { font-size: 9px; fill: rgba(246, 236, 220, .7); }
@keyframes bg-pulse { from { filter: drop-shadow(0 0 0 rgba(255, 211, 110, 0)); } to { filter: drop-shadow(0 0 5px rgba(255, 211, 110, .9)); } }

.bg-ck { transform-box: fill-box; transform-origin: center; }
.bg-ck .bg-body { stroke: var(--bg-light-edge); stroke-width: 1; }
.bg-ck.dark .bg-body { stroke: var(--bg-dark-edge); }
.bg-ck .bg-ring { fill: none; stroke: var(--cauldron); stroke-width: 1.7; opacity: .9; }
.bg-ck .bg-inner { fill: none; stroke: rgba(0, 0, 0, .16); stroke-width: 1; }
.bg-ck.dark .bg-inner { stroke: rgba(255, 255, 255, .13); }
.bg-count { font-size: 13px; font-weight: 800; fill: #2a1a0c; }
.bg-ck.dark .bg-count { fill: #f6ecdc; }
.bg-ck.movable .bg-body { stroke: var(--bg-glow); stroke-width: 1.6; animation: bg-glow 1.1s ease-in-out infinite alternate; }
.bg-ck.hint .bg-body { stroke: var(--bg-glow); stroke-width: 2; }
@keyframes bg-glow { from { filter: drop-shadow(0 0 2px rgba(255, 211, 110, .55)); } to { filter: drop-shadow(0 0 7px rgba(255, 211, 110, 1)); } }
.bg-ck.lifted { transform: translateY(-2px) scale(1.16); filter: drop-shadow(0 6px 5px rgba(0, 0, 0, .6)); transition: transform .14s ease-out; }
.bg-ck.lifted .bg-body { stroke: var(--bg-glow); stroke-width: 2; }
.bg-slab { stroke-width: .8; }
.bg-slab.light { fill: var(--bg-light); stroke: var(--bg-light-edge); }
.bg-slab.dark { fill: var(--bg-dark); stroke: #000; }

.bg-ghost { pointer-events: none; transform-box: fill-box; transform-origin: center; animation: bg-ghost-in .18s ease-out; }
.bg-ghost circle { fill: rgba(255, 250, 240, .26); stroke: var(--bg-glow); stroke-width: 2; stroke-dasharray: 4 3; }
.bg-ghost.hit circle { stroke: var(--bg-hit); fill: rgba(255, 122, 92, .25); }
.bg-ghost.near circle { fill: rgba(255, 211, 110, .55); stroke-dasharray: none; }
.bg-ghost.near { transform: scale(1.12); }
.bg-ghost-t { font-size: 12.5px; font-weight: 800; fill: #fff; paint-order: stroke; stroke: rgba(30, 16, 6, .85); stroke-width: 3px; }
.bg-ghost-t.long { font-size: 10px; }
@keyframes bg-ghost-in { from { opacity: 0; transform: scale(.7); } }

.bg-cube { transition: transform .8s cubic-bezier(.3, 1.25, .5, 1); }
.bg-cube rect { fill: #f7f0e0; stroke: #3b2416; stroke-width: 1.5; filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .5)); }
.bg-cube-t { font-family: var(--display); font-size: 15px; font-weight: 900; fill: #3b2416; }
.bg-cube-t.small { font-size: 11px; opacity: .8; }
.bg-cube.offered rect { stroke: var(--accent); stroke-width: 2.5; animation: bg-pulse .8s ease-in-out infinite alternate; }

.bg-hit { fill: transparent; stroke: none; }
.bg-board.interactive .bg-hit { cursor: pointer; -webkit-tap-highlight-color: transparent; }

/* A checker being dragged: drawn over everything, above the finger. */
.bg-float { position: fixed; left: 0; top: 0; z-index: 70; border-radius: 50%; pointer-events: none; will-change: transform;
    background: radial-gradient(circle at 38% 32%, var(--bg-light-hi), var(--bg-light) 55%, var(--bg-light-lo));
    box-shadow: 0 12px 20px rgba(0, 0, 0, .55), inset 0 0 0 1px var(--bg-light-edge), inset 0 0 0 4px transparent, inset 0 0 0 5.5px var(--cauldron); }
.bg-float.dark { background: radial-gradient(circle at 38% 32%, var(--bg-dark-hi), var(--bg-dark) 55%, var(--bg-dark-lo));
    box-shadow: 0 12px 20px rgba(0, 0, 0, .55), inset 0 0 0 1px var(--bg-dark-edge), inset 0 0 0 4px transparent, inset 0 0 0 5.5px var(--cauldron); }
.bg-float.landed { box-shadow: 0 2px 4px rgba(0, 0, 0, .4), inset 0 0 0 5.5px var(--cauldron); }

/* ---- the dice (a 3D cube each, turned to show the value; backgammon.js tumbles a new roll) */
.bg-die { --d: 30px; width: var(--d); height: var(--d); position: relative; display: inline-block; perspective: 360px; flex: none; transition: opacity .25s, filter .25s; }
.bg-die.small { --d: 24px; }
.bg-cubie { position: absolute; inset: 0; transform-style: preserve-3d; --fx: 0deg; --fy: 0deg;
    transform: translateY(0) scale(1) rotateX(-12deg) rotateY(14deg) rotateX(var(--fx)) rotateY(var(--fy)) rotateZ(0deg); }
.bg-cubie[data-v="2"] { --fy: -90deg; }
.bg-cubie[data-v="3"] { --fx: -90deg; }
.bg-cubie[data-v="4"] { --fx: 90deg; }
.bg-cubie[data-v="5"] { --fy: 90deg; }
.bg-cubie[data-v="6"] { --fy: 180deg; }
.bg-face { position: absolute; inset: 0; border-radius: 22%; background: linear-gradient(155deg, #fffdf6, #e6d7b6); border: 1.5px solid var(--bg-light-edge); box-shadow: inset 0 -2px 5px rgba(0, 0, 0, .14); }
.bg-die.dark .bg-face { background: linear-gradient(155deg, #5a3a2d, #24150f); border-color: #0b0604; }
.bg-face i { position: absolute; width: 18%; height: 18%; border-radius: 50%; transform: translate(-50%, -50%); background: #2b1a0e; box-shadow: inset 0 1px 1px rgba(0, 0, 0, .4); }
.bg-die.dark .bg-face i { background: #f3e7cf; box-shadow: none; }
.bg-face.f1 { transform: rotateY(0deg) translateZ(calc(var(--d) / 2)); }
.bg-face.f2 { transform: rotateY(90deg) translateZ(calc(var(--d) / 2)); }
.bg-face.f3 { transform: rotateX(90deg) translateZ(calc(var(--d) / 2)); }
.bg-face.f4 { transform: rotateX(-90deg) translateZ(calc(var(--d) / 2)); }
.bg-face.f5 { transform: rotateY(-90deg) translateZ(calc(var(--d) / 2)); }
.bg-face.f6 { transform: rotateY(180deg) translateZ(calc(var(--d) / 2)); }
.bg-die.used { opacity: .28; filter: grayscale(.8); }
.bg-die.blank .bg-face { background: rgba(255, 255, 255, .05); border-style: dashed; border-color: var(--accent); }
.bg-die.blank .bg-face i { display: none; }

/* ---- the action bar */
.bg-actions { gap: .5rem; align-items: stretch; padding-bottom: calc(.6rem + env(safe-area-inset-bottom, 0px)); padding-top: .5rem; max-width: 1100px; }
.bg-actions .btn.big { border-radius: 999px; box-shadow: var(--shadow); display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .75rem 1.1rem; line-height: 1.1; }
.bg-actions .btn.big .ico { width: 1.3rem; height: 1.3rem; }
.bg-actions .btn small { display: block; font-size: .7rem; font-weight: 400; opacity: .85; }
.bg-undo { flex: none; }
.bg-confirm, .bg-roll { flex: 1; font-size: 1.15rem; }
.bg-confirm { animation: bg-ready .35s ease-out; }
@keyframes bg-ready { from { transform: scale(.94); } }
.bg-double { flex: none; border-color: var(--accent); color: var(--accent-2); background: var(--panel-2); }
.bg-actions .fab-status { font-size: .95rem; padding: .7rem 1rem; }
.bg-actions .fab-status.turn { border-color: var(--accent); color: var(--accent-2); background: linear-gradient(180deg, rgba(214, 165, 72, .18), rgba(214, 165, 72, .06)), var(--panel); font-weight: 700; }
/* The beat's caption takes the bar's place while it plays (nothing to press on someone else's turn). */
.bg-actions .show-strip.inline { flex: 1; margin: 0; max-width: none; width: auto; box-shadow: var(--shadow); align-self: center; }
.bg-actions .show-strip.inline .show-strip-cap { font-size: .95rem; }

/* ---- sheets */
.sheet.bg-sheet > header { background: linear-gradient(180deg, #3a2618, var(--panel)); }
.sheet.bg-sheet.seat-tint > header { background: linear-gradient(90deg, color-mix(in srgb, var(--cauldron) 40%, var(--panel)), var(--panel) 85%); }
.bg-sheet-cube { display: inline-flex; align-items: center; gap: .2rem; }
.bg-sheet-cube .ico { width: 2rem !important; height: 2rem !important; color: #f7f0e0 !important; }
.bg-sheet-cube b { font-family: var(--display); font-size: 1.6rem; }
.bg-stakes { list-style: none; margin: 0 0 .4rem; padding: 0; display: flex; flex-direction: column; gap: .4rem; }
.bg-stakes li { display: flex; gap: .55rem; align-items: flex-start; background: var(--panel-2); border-radius: 10px; padding: .45rem .6rem; font-size: .92rem; line-height: 1.3; }
.bg-stakes li .ico { width: 1.2rem; height: 1.2rem; flex: none; margin-top: .1rem; }
.bg-stakes .ok { color: var(--ok); } .bg-stakes .no { color: var(--danger); }
.bg-race { margin: .2rem 0 0; }
.bg-take { flex: 1.4 !important; }
.bg-sheet-points b { font-family: var(--display); font-size: 1.8rem; color: var(--accent-2); }
.bg-how { margin: 0 0 .5rem; }
.bg-matchline { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.bg-matchline .who { display: inline-flex; align-items: center; gap: .35rem; background: var(--panel-2); border: 1px solid var(--line); border-radius: 999px; padding: .2rem .65rem .2rem .35rem; }
.bg-matchline .who.won { border-color: var(--cauldron); }
.bg-matchline .who b { font-family: var(--display); font-size: 1.3rem; }
.bg-matchline .ico { width: 1.3rem; height: 1.3rem; }
.bg-other-ready { display: flex; align-items: center; gap: .35rem; margin: .5rem 0 0; color: var(--seat-text); font-weight: 600; }
.bg-other-ready .ico { width: 1.1rem; height: 1.1rem; }
.bg-waitready { flex: 1; text-align: center; color: var(--muted); font-style: italic; padding: .6rem; }
.bg-gameend.won .bg-sheet-points b { color: var(--ok); }
.bg-rules h3 { color: var(--accent-2); margin-top: .9rem; }
.bg-rules-list { margin: 0 0 .5rem; padding-left: 1.2rem; display: flex; flex-direction: column; gap: .25rem; }
.bg-results { width: 100%; border-collapse: collapse; margin-top: .6rem; }
.bg-results th, .bg-results td { text-align: left; padding: .25rem .3rem; border-bottom: 1px solid var(--line); white-space: nowrap; }
.bg-results th { color: var(--muted); font-weight: 600; }
.bg-results .ico { width: 1rem; height: 1rem; }
.bg-final { position: relative; }

/* ---- the lobby */
.bg-lobby h2 { display: flex; align-items: center; gap: .45rem; }
.bg-lobby h2 .ico { width: 1.5rem; height: 1.5rem; }
.bg-length { display: flex; align-items: center; gap: .4rem; flex-wrap: wrap; margin: .3rem 0 .7rem; }
.bg-length .label { color: var(--muted); margin-right: .2rem; }
.bg-length-btn { flex-direction: column; gap: 0; min-width: 3.4rem; padding: .35rem .5rem; line-height: 1.1; }
.bg-length-btn b { font-family: var(--display); font-size: 1.3rem; }
.bg-length-btn small { font-size: .7rem; opacity: .8; }
.bg-length-btn.on { background: var(--accent); border-color: var(--accent); color: var(--accent-text); }
.bg-sides { display: flex; flex-direction: column; gap: .35rem; margin: .7rem 0 .4rem; }
.bg-side { display: flex; align-items: center; gap: .5rem; padding: .4rem .6rem; background: var(--panel-2); border-radius: 8px; border-left: 4px solid var(--cauldron); }
.bg-side .ico { width: 1.4rem; height: 1.4rem; }
.bg-side .name { flex: 1; color: var(--muted); }

/* ---- the table */
.bg-tablepage { max-width: 1400px; }
.bg-tablepage .topbar .row { gap: .6rem; }
.bg-table-grid { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(260px, 1fr); gap: 1rem; align-items: start; }
.bg-table-board .bg-board-wrap.big { position: relative; }
.bg-table-board .bg-board.wide { --bg-room: 15rem; width: min(100%, calc((100vh - var(--bg-room)) * 600 / 400)); }
.bg-table-side { display: flex; flex-direction: column; gap: .75rem; }
.bg-ticker-card h3 { margin-top: 0; }
.bg-ticker-card .ticker div.marker { color: var(--accent-2); }
.bg-tablepage .bg-die { --d: 38px; }
.bg-tablepage .bg-die.small { --d: 30px; }
@media (max-width: 860px) { .bg-table-grid { grid-template-columns: 1fr; } }

/* ---- a wide screen (a tablet held sideways): the classic board; the rows sit above and below it, a little larger */
.bg-page.wide .bg-die { --d: 34px; }
.bg-page.wide .bg-player { max-width: calc((100dvh - 15rem) * 1.5); margin-left: auto; margin-right: auto; }

/* ---- a phone held sideways (landscape and short): the classic board fills the height on the left; the top bar, the
   two player rows and the actions stack in a column on the right, so nothing scrolls and nothing is covered. The board
   is as tall as the screen allows but leaves the column 20rem; the match's final standings (.done) keep the normal flow. */
@media (orientation: landscape) and (max-height: 520px) {
    .page.game-page.bg-page.wide:not(.done) {
        display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto auto auto minmax(0, 1fr);
        grid-template-areas: "board top" "board them" "board me" "board err" "board act";
        column-gap: .7rem; align-items: start; height: 100dvh; overflow: hidden;
        padding: .4rem .6rem calc(.4rem + env(safe-area-inset-bottom, 0px));
    }
    .bg-page.wide:not(.done) .bg-topbar { grid-area: top; margin-bottom: 0 !important; }
    .bg-page.wide:not(.done) .bg-topbar .round { font-size: 1.05rem; }
    .bg-page.wide:not(.done) .bg-player.them { grid-area: them; }
    .bg-page.wide:not(.done) .bg-board-wrap { grid-area: board; align-self: center; }
    .bg-page.wide:not(.done) .bg-player.me { grid-area: me; }
    .bg-page.wide:not(.done) .bg-error { grid-area: err; }
    .bg-page.wide:not(.done) .bg-actions { grid-area: act; position: static; align-self: end; margin: 0; padding: .3rem 0 0; max-width: none; }
    .bg-page.wide:not(.done) .bg-board.wide { width: min(calc((100dvh - .8rem - env(safe-area-inset-bottom, 0px)) * 600 / 400), calc(100vw - 20rem)); }
    .bg-page.wide:not(.done) .bg-player { max-width: none; margin: .25rem 0; min-height: 2.3rem; }
    .bg-page.wide .bg-die { --d: 28px; }
    .bg-page.wide .bg-die.small { --d: 22px; }
    .bg-page.wide .bg-actions .btn.big { padding: .6rem .9rem; }
}

/* ---- short phones */
@media (max-height: 760px) {
    .bg-board.tall { --bg-room: 13.2rem; }
    .bg-player { min-height: 2.3rem; padding: .12rem .45rem; margin: .22rem 0; }
    .bg-die { --d: 26px; }
    .bg-die.small { --d: 21px; }
    .bg-actions .btn.big { padding: .6rem 1rem; }
    .page.game-page.bg-page.with-fabs { padding-bottom: 4.1rem; }
}

@media (prefers-reduced-motion: reduce) {
    .bg-cube, .bg-ck { transition: none !important; }
    .bg-pt.target, .bg-tray-half.target, .bg-ck.movable .bg-body, .bg-cube.offered rect, button.bg-dice.can-roll, .bg-ghost, .bg-confirm { animation: none !important; }
}

/* ---- the way round: big see-through arrows in the viewer's colour, drawn on at the start of a game, then fading.
   A glow, the line with its arrowhead, and dashes flowing the way the checkers go. Taps pass straight through. */
.bg-route { pointer-events: none; animation: bg-route-life 4.6s ease-in-out both; }
.bg-route path { fill: none; stroke-linecap: round; stroke-linejoin: round; }
.bg-route-glow { stroke: var(--cauldron); stroke-width: 26; opacity: .22; stroke-dasharray: 100; animation: bg-route-draw 1.3s cubic-bezier(.5, 0, .3, 1) both; }
.bg-board.wide .bg-route-glow { stroke-width: 30; }
.bg-route-line { stroke: var(--cauldron); stroke-width: 10; opacity: .78; stroke-dasharray: 100; animation: bg-route-draw 1.3s cubic-bezier(.5, 0, .3, 1) both; }
.bg-route-flow { stroke: #fff; stroke-width: 3.5; opacity: 0; stroke-dasharray: 1.2 4.8; animation: bg-route-flow 1.1s linear 1.3s infinite, bg-route-flow-in .4s 1.3s both; }
.bg-route-head path { fill: var(--cauldron); animation: bg-route-head .35s 1.15s both; }
@keyframes bg-route-draw { from { stroke-dashoffset: 100; } to { stroke-dashoffset: 0; } }
@keyframes bg-route-flow { from { stroke-dashoffset: 6; } to { stroke-dashoffset: 0; } }
@keyframes bg-route-flow-in { to { opacity: .55; } }
@keyframes bg-route-head { from { opacity: 0; } to { opacity: .9; } }
@keyframes bg-route-life { 0%, 82% { opacity: 1; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .bg-route-glow, .bg-route-line { animation: none; stroke-dasharray: none; }
  .bg-route-flow { animation: bg-route-flow-in .1s both; }
}
.bg-route-pill { fill: rgba(20, 12, 6, .82); stroke: var(--cauldron); stroke-width: 2; animation: bg-route-head .35s .5s both; }
.bg-route-t { fill: #fff6e2; font-size: 12px; font-weight: 700; animation: bg-route-head .35s .5s both; }
.bg-board.wide .bg-route-t { font-size: 13.5px; }