/* Rocket Backgammon: an SVG board in a wooden frame with felt, glowing accents, two themes on .bg[data-theme]. */
.bg {
  --bg-text: #dfe9ff; --bg-muted: #8aa3c4; --bg-strong: #fff; --bg-panel: #0b1328; --bg-line: #1c2b4a; --bg-btn: #0b1328; --bg-btn-text: #dfe9ff;
  --bg-accent: #55d6ff; --bg-hot: #ffd166; --bg-glow-edge: rgba(85, 214, 255, .38);
  --wood-1: #6e4626; --wood-2: #432814; --wood-3: #26160a; --felt-1: #1a5c4b; --felt-2: #0c3a2f; --tray: #0a2a23; --bar-1: #5a381d;
  --pt-a: #a8452f; --pt-b: #d1bb8c; --pt-line: rgba(0, 0, 0, .28); --num: rgba(255, 230, 196, .62);
  --dest: #55d6ff; --dest-fill: rgba(85, 214, 255, .2); --hint: #ffd166;
  max-width: 1000px; margin: 0 auto; padding: 10px 8px 16px; user-select: none; -webkit-user-select: none; color: var(--bg-text); border-radius: 12px; font-variant-numeric: tabular-nums;
}
.bg[data-theme="light"] {
  --bg-text: #2b2a26; --bg-muted: #6b6457; --bg-strong: #17150f; --bg-panel: #fffdf8; --bg-line: #e0d6c3; --bg-btn: #fffdf8; --bg-btn-text: #2b2a26;
  --bg-accent: #0a86ad; --bg-hot: #a35f00; --bg-glow-edge: rgba(10, 134, 173, .26);
  --wood-1: #e8c08a; --wood-2: #c99459; --wood-3: #9c6a38; --felt-1: #f1e8d4; --felt-2: #dfd1b2; --tray: #e6d9bd; --bar-1: #b98450;
  --pt-a: #b4442c; --pt-b: #4f6476; --pt-line: rgba(60, 40, 20, .3); --num: rgba(70, 40, 14, .72);
  --dest: #0a86ad; --dest-fill: rgba(10, 134, 173, .2); --hint: #d98a00;
  background: linear-gradient(180deg, #f6f1e7, #ece3d2); box-shadow: inset 0 0 0 1px #e0d6c3;
}
.bg [hidden] { display: none !important; }
.bg-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; }
.bg-opts { display: flex; gap: 8px 10px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--bg-muted); flex: 1 1 340px; min-width: 0; }
.bg-opts label { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.bg-sel { display: inline-flex; gap: 8px 10px; flex-wrap: wrap; align-items: center; }
.bg-opts select { background: var(--bg-btn); color: var(--bg-btn-text); border: 1px solid var(--bg-line); border-radius: 8px; padding: 0 8px; min-height: 36px; font-size: 13.5px; }
.bg-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.bg-btn { background: var(--bg-btn); color: var(--bg-btn-text); border: 1px solid var(--bg-line); border-radius: 9px; padding: 0 13px; min-height: 38px; font-weight: 700; font-size: 13.5px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 6px; white-space: nowrap; -webkit-tap-highlight-color: transparent; font-family: inherit; }
@media (hover: hover) { .bg-btn:hover:not(:disabled) { border-color: var(--bg-accent); } }
.bg-btn:disabled { opacity: .42; cursor: default; }
.bg-btn:active:not(:disabled) { transform: translateY(1px); }
.bg-btn-primary, .bg-btn-go { background: #ffd166; color: #1a1200; border-color: #ffd166; }
@media (hover: hover) { .bg-btn-primary:hover:not(:disabled), .bg-btn-go:hover:not(:disabled) { background: #ffe08a; border-color: #ffe08a; } }
.bg-btn-sm { min-height: 32px; padding: 0 10px; font-size: 12.5px; }
.bg-icon { width: 38px; padding: 0; }
.bg-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
#bg-sound[aria-pressed="false"] .on, #bg-sound[aria-pressed="true"] .off { display: none; }
.bg[data-theme="dark"] #bg-theme .moon, .bg[data-theme="light"] #bg-theme .sun { display: none; }
.bg-btn:focus-visible, .bg-rp:focus-visible, .bg-moves button:focus-visible, .bg select:focus-visible { outline: 2px solid var(--bg-accent); outline-offset: 2px; }

.bg-main { display: grid; grid-template-columns: minmax(0, 1fr) 252px; gap: 14px; align-items: start; }
.bg-boardwrap { width: 100%; min-width: 0; display: flex; flex-direction: column; gap: 7px; }

/* the players: colour, name, pip count, match score; whose turn glows */
.bg-plates { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.bg-plate { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 10px; border-radius: 12px; background: var(--bg-panel); border: 1px solid var(--bg-line); transition: border-color .25s, box-shadow .25s; }
.bg-plate-me { justify-content: flex-end; }
.bg-plate.turn { border-color: var(--bg-accent); box-shadow: 0 0 0 1px var(--bg-accent), 0 0 18px var(--bg-glow-edge); }
.bg-pchip { width: 20px; height: 20px; border-radius: 50%; flex: none; box-shadow: 0 2px 4px rgba(0, 0, 0, .35); }
.bg-pchip.w { background: radial-gradient(circle at 38% 34%, #fff, #efe8d8 55%, #c9bea5); } .bg-pchip.b { background: radial-gradient(circle at 38% 34%, #6a7383, #1f2430 60%, #090b10); box-shadow: 0 0 0 1px #6f7a8f, 0 2px 4px rgba(0, 0, 0, .35); }
.bg-pname { font-weight: 700; font-size: 14px; color: var(--bg-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.bg-pip { font-size: 12px; color: var(--bg-muted); white-space: nowrap; }
.bg-pname .pn-s { display: none; }
@media (max-width: 560px) { .bg-pname .pn-l { display: none; } .bg-pname .pn-s { display: inline; } }
.bg-land .bg-pname .pn-l { display: none; } .bg-land .bg-pname .pn-s { display: inline; }
.bg-pscore { font-size: 22px; font-weight: 800; color: var(--bg-strong); min-width: 1.1em; text-align: center; }
.bg-matchinfo { display: flex; flex-direction: column; align-items: center; font-size: 12px; color: var(--bg-muted); white-space: nowrap; line-height: 1.3; }
.bg-matchinfo b { font-size: 13px; color: var(--bg-text); }
.bg-status { text-align: center; font-weight: 700; font-size: 15px; min-height: 1.45em; color: var(--bg-strong); }
.bg-status.hot { color: var(--bg-hot); }
.bg-dots { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
.bg-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--bg-accent); animation: bg-blink 1s infinite ease-in-out; }
.bg-dots i:nth-child(2) { animation-delay: .15s; } .bg-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes bg-blink { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }

.bg-boardbox { position: relative; width: 100%; }
.bg-board { display: block; width: 100%; height: auto; aspect-ratio: 948 / 704; touch-action: none; border-radius: 14px; filter: drop-shadow(0 16px 30px rgba(0, 0, 0, .45)); overflow: visible; outline: none; }
.bg-board .wood1 { stop-color: var(--wood-1); } .bg-board .wood2 { stop-color: var(--wood-2); } .bg-board .wood3 { stop-color: var(--wood-3); }
.bg-board .felt1 { stop-color: var(--felt-1); } .bg-board .felt2 { stop-color: var(--felt-2); }
.b-frame { fill: url(#bg-wood); }
.b-frame-hi { fill: none; stroke: var(--bg-glow-edge); stroke-width: 3; }
.b-felt { fill: url(#bg-feltg); }
.b-edge { fill: none; stroke: rgba(0, 0, 0, .45); stroke-width: 2; }
.b-bar { fill: var(--bar-1); stroke: rgba(0, 0, 0, .35); stroke-width: 2; }
.b-bar-line { stroke: rgba(0, 0, 0, .25); stroke-width: 2; }
.b-tray { fill: var(--tray); stroke: rgba(0, 0, 0, .45); stroke-width: 2; transition: stroke .2s; }
.b-tray-line { stroke: rgba(0, 0, 0, .3); stroke-width: 2; }
.tray-on .b-tray { stroke: var(--dest); stroke-width: 4; }
.b-pt { stroke: var(--pt-line); stroke-width: 1.2; }
.b-pt.pa { fill: var(--pt-a); } .b-pt.pb { fill: var(--pt-b); }
.b-num { fill: var(--num); font: 700 16px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
/* checkers */
.ck { will-change: transform; }
.ck-sh { fill: rgba(0, 0, 0, .42); }
.ck-w .ck-body { fill: url(#bg-gw); stroke: #8c7f63; stroke-width: 1.6; } .ck-b .ck-body { fill: url(#bg-gb); stroke: #7d889c; stroke-width: 1.6; }
.ck-rim { fill: none; stroke-width: 2.2; } .ck-w .ck-rim { stroke: rgba(140, 125, 95, .55); } .ck-b .ck-rim { stroke: rgba(150, 165, 190, .35); }
.ck-in { stroke: none; } .ck-w .ck-in { fill: rgba(255, 255, 255, .35); } .ck-b .ck-in { fill: rgba(255, 255, 255, .05); }
.ck-hl { fill: #fff; opacity: .35; } .ck-b .ck-hl { opacity: .18; }
.ck-slab { display: none; }
.ck.slab > :not(.ck-slab) { display: none; }
.ck.slab .ck-slab { display: inline; stroke-width: 1.5; }
.ck-w.slab .ck-slab { fill: #efe8d8; stroke: #9a8c6e; } .ck-b.slab .ck-slab { fill: #262b36; stroke: #7d889c; }
.ck.can .ck-body { stroke: var(--dest); stroke-width: 3.5; }
.ck.sel .ck-body { stroke: var(--hint); stroke-width: 4.5; }
.ck.sel .ck-sh { transform: translate(3px, 6px); }
.ck.last .ck-rim { stroke: var(--hint); stroke-width: 3; }
.ck.dragging { filter: drop-shadow(0 10px 10px rgba(0, 0, 0, .45)); }
.ck-count { font: 800 22px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; pointer-events: none; }
.ck-count.on-w { fill: #3b3020; } .ck-count.on-b { fill: #f2efe6; }
/* destinations and the hint */
.dest { pointer-events: none; }
.dest-glow { fill: var(--dest); opacity: .35; }
.dest-ring { fill: var(--dest-fill); stroke: var(--dest); stroke-width: 3; stroke-dasharray: 7 5; animation: bg-spin 6s linear infinite; transform-box: fill-box; transform-origin: center; }
.dest.hit .dest-ring { stroke: #ff7b6b; fill: rgba(255, 123, 107, .22); }
.dest-n { fill: #fff; font: 800 17px system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; paint-order: stroke; stroke: rgba(0, 0, 0, .6); stroke-width: 3px; }
@keyframes bg-spin { to { transform: rotate(360deg); } }
.hint-arrow { fill: none; stroke: var(--hint); stroke-width: 6; stroke-linecap: round; stroke-dasharray: 2 12; opacity: .95; pointer-events: none; }
.hint-dot { fill: var(--hint); opacity: .9; pointer-events: none; }
.hint-n { fill: #1a1200; font: 900 16px system-ui, sans-serif; pointer-events: none; paint-order: stroke; stroke: var(--hint); stroke-width: 6px; }
/* dice and cube */
.die-body { stroke-width: 1.8; } .die-hi { opacity: .22; fill: #fff; }
.die-w .die-body { fill: #f7f3ea; stroke: #a99d82; } .die-w .die-pip { fill: #1d2230; }
.die-b .die-body { fill: #232833; stroke: #7d889c; } .die-b .die-pip { fill: #f4f1e8; } .die-b .die-hi { opacity: .1; }
.die { filter: drop-shadow(0 5px 6px rgba(0, 0, 0, .45)); pointer-events: none; }
.die.used { opacity: .32; }
.die.shaking { animation: bg-shake .14s infinite alternate; }
@keyframes bg-shake { from { translate: -3px -2px; rotate: -6deg; } to { translate: 3px 2px; rotate: 6deg; } }
.cube { filter: drop-shadow(0 4px 5px rgba(0, 0, 0, .45)); pointer-events: none; }
.cube-body { fill: #f3ede0; stroke: #8f7f5c; stroke-width: 2; } .cube-hi { fill: #fff; opacity: .4; }
.cube-v { fill: #2a2116; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; font-weight: 900; }
.cube.dead { opacity: .45; }
.hit { fill: transparent; outline: none; }
.hit:focus-visible { fill: rgba(85, 214, 255, .12); stroke: var(--bg-accent); stroke-width: 4; }
@media (pointer: coarse) { .hit:focus-visible { fill: transparent; stroke: none; } }

/* the end-of-game banner over the board */
.bg-banner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; pointer-events: none; z-index: 3; }
.bg-bn { pointer-events: auto; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 16px 22px; border-radius: 16px; background: rgba(8, 14, 32, .9); border: 1px solid #2c4478; color: #fff; box-shadow: 0 20px 50px rgba(0, 0, 0, .55); text-align: center; animation: bg-pop .25s cubic-bezier(.2, .9, .3, 1.2); max-width: 92%; }
.bg-bn b { font-size: 21px; } .bg-bn span { font-size: 14px; color: #b9c9e4; } .bg-bn .bg-cr { color: #ffd166; font-weight: 700; }
.bg-bn .bg-btn { margin-top: 6px; min-height: 42px; padding: 0 22px; font-size: 15px; }
@keyframes bg-pop { from { transform: scale(.9); opacity: 0; } }

/* the action bar: roll / double, or undo / done */
.bg-actions { display: flex; justify-content: center; gap: 10px; min-height: 46px; flex-wrap: wrap; }
.bg-act { min-height: 46px; min-width: 112px; font-size: 15.5px; border-radius: 12px; }
.bg-act.bg-btn-go { box-shadow: 0 0 0 0 rgba(255, 209, 102, .6); }
.bg-act.bg-btn-go:not(:disabled) { animation: bg-ready 2s ease-in-out infinite; }
@keyframes bg-ready { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 209, 102, .0); } 50% { box-shadow: 0 0 0 5px rgba(255, 209, 102, .22); } }
.bg-view { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; font-weight: 700; color: var(--bg-hot); }

/* side panel */
.bg-side { background: var(--bg-panel); border: 1px solid var(--bg-line); border-radius: 12px; padding: 12px; min-width: 0; }
.bg-mh { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--bg-muted); margin: 0 0 8px; }
.bg-mh > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.bg-replay { display: flex; gap: 2px; flex: none; }
.bg-rp { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--bg-line); background: transparent; color: var(--bg-text); display: grid; place-items: center; cursor: pointer; padding: 0; }
.bg-rp svg { width: 16px; height: 16px; fill: currentColor; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.bg-rp:disabled { opacity: .35; cursor: default; }
#bg-play .pa, #bg-play.playing .pl { display: none; } #bg-play.playing .pa { display: inline; }
.bg-moves { list-style: none; margin: 0; padding: 0; max-height: 360px; overflow: auto; overscroll-behavior: contain; font-size: 13px; }
.bg-moves li { min-width: 0; }
.bg-moves button { width: 100%; display: flex; align-items: center; gap: 6px; padding: 3px 6px; border: 0; border-radius: 6px; background: transparent; color: var(--bg-text); font: 600 13px/1.35 inherit; font-family: inherit; cursor: pointer; text-align: left; }
.bg-moves .d { color: var(--bg-muted); min-width: 2.2em; font-size: 12px; }
.bg-moves li.cur button { background: var(--bg-line); color: var(--bg-strong); }
@media (hover: hover) { .bg-moves button:hover { background: rgba(85, 214, 255, .1); } }
.bg-mg { font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--bg-muted); padding: 8px 6px 3px; }
.bg-mr { font-size: 12.5px; font-weight: 700; color: var(--bg-hot); padding: 3px 6px 6px; }
.bg-mc { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.bg-mc.w { background: #f4efe2; box-shadow: 0 0 0 1px #9c9278; } .bg-mc.b { background: #1f2430; box-shadow: 0 0 0 1px #7d889c; }
.bg-empty { color: var(--bg-muted); padding: 4px; }
.bg-check { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--bg-muted); margin-top: 10px; cursor: pointer; }
.bg-record { margin-top: 10px; font-size: 12.5px; color: var(--bg-muted); line-height: 1.5; }
.bg-record b { color: var(--bg-text); }
.bg-fair code { font-size: 11.5px; } .bg-fair.ok { color: #2fbf71; font-weight: 700; } .bg[data-theme="light"] .bg-fair.ok { color: #157a44; } .bg-fair.bad { color: #ff8fa0; }

/* dialogs and toast */
.bg-overlay { position: fixed; inset: 0; background: rgba(2, 5, 14, .72); display: flex; align-items: center; justify-content: center; z-index: 2000; padding: 16px; -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.bg-overlay:not([hidden]) .bg-dialog { animation: bg-pop .22s cubic-bezier(.2, .9, .3, 1.2); }
.bg-dialog { background: #0b1328; color: #dfe9ff; border: 1px solid #244b6b; border-radius: 16px; padding: 22px; width: min(100%, 400px); text-align: center; box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }
.bg[data-theme="light"] .bg-dialog { background: #fffdf8; color: #2b2a26; border-color: #e0d6c3; }
.bg-dialog h3 { margin: 0 0 8px; color: inherit; font-size: 23px; letter-spacing: -.01em; }
.bg-dialog p { margin: 0 0 16px; color: inherit; opacity: .82; }
.bg-actions2 { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.bg-actions2 .bg-btn { min-height: 44px; min-width: 96px; }
.bg-advice { min-height: 1.3em; margin: 12px 0 0 !important; font-weight: 700; }
.bg-toast { position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 2100; max-width: min(440px, calc(100% - 24px)); padding: 10px 16px; border-radius: 12px;
  background: #13224a; border: 1px solid #2c4478; color: #fff; font-weight: 600; font-size: 14px; line-height: 1.35; box-shadow: 0 10px 30px rgba(0, 0, 0, .45); pointer-events: none; text-align: center; animation: bg-toast .2s ease-out; }
@keyframes bg-toast { from { opacity: 0; transform: translate(-50%, 10px); } }

/* light theme: the shared online bar and mode switch follow the board */
.bg[data-theme="light"] .rg-modes-in { background: #e8dfcf; border-color: #d4c8b2; }
.bg[data-theme="light"] .rg-mode { color: #5d564a; }
.bg[data-theme="light"] .rg-mode[aria-pressed="true"] { background: #fffdf8; color: #17150f; box-shadow: inset 0 0 0 1.5px #0a86ad, 0 2px 10px rgba(10, 134, 173, .18); }
.bg[data-theme="light"] .rg-mode[aria-pressed="true"] svg { color: #0a86ad; }
@media (hover: hover) { .bg[data-theme="light"] .rg-mode:hover { color: #17150f; background: rgba(10, 134, 173, .08); } }
.bg[data-theme="light"] .ol-bar { background: #fffdf8; border-color: #e0d6c3; color: #2b2a26; }
.bg[data-theme="light"] .ol-name, .bg[data-theme="light"] .ol-msg b { color: #17150f; }
.bg[data-theme="light"] .ol-msg { color: #3b372f; } .bg[data-theme="light"] .ol-msg.ol-hot { color: #a35f00; }
.bg[data-theme="light"] .ol-side, .bg[data-theme="light"] .ol-vs { color: #6b6457; }
.bg[data-theme="light"] .ol-p { background: rgba(0, 0, 0, .04); } .bg[data-theme="light"] .ol-p.ol-turn { border-color: #0a86ad; background: rgba(10, 134, 173, .08); }
.bg[data-theme="light"] .ol-btn { background: #fffdf8; color: #2b2a26; border-color: #d4c8b2; }
.bg[data-theme="light"] .ol-btn.ol-go { background: #ffd166; border-color: #e7b844; color: #1a1200; }

@media (prefers-reduced-motion: reduce) { .dest-ring, .bg-dots i, .die.shaking, .bg-act.bg-btn-go:not(:disabled) { animation: none; } }

/* phones: one column, the move list becomes a strip */
@media (max-width: 760px) {
  .bg { padding: 6px 3px 12px; }
  .bg-top { margin-bottom: 6px; gap: 8px; }
  .bg-opts { flex-basis: 100%; justify-content: center; }
  .bg-tools { width: 100%; justify-content: center; }
  .bg-tools .bg-btn:not(.bg-icon) { flex: 1 1 0; }
  .bg-main { grid-template-columns: 1fr; gap: 8px; }
  .bg-side { padding: 8px 10px; }
  .bg-moves { display: flex; overflow-x: auto; max-height: none; scrollbar-width: none; gap: 4px; align-items: center; }
  .bg-moves::-webkit-scrollbar { display: none; }
  .bg-moves li { flex: none; }
  .bg-mg, .bg-mr { padding: 3px 6px; white-space: nowrap; }
  .bg-moves button { white-space: nowrap; }
  .bg-plates { gap: 5px; }
  .bg-plate { padding: 4px 7px; gap: 6px; }
  .bg-pname { font-size: 13px; }
  .bg-pscore { font-size: 19px; }
  .bg-pip { font-size: 11px; }
  .bg-matchinfo { font-size: 11px; } .bg-matchinfo b { font-size: 12px; }
  .bg-status { font-size: 14px; }
  .bg-act { min-width: 96px; }
  .bg-check, .bg-record { text-align: center; justify-content: center; }
}
@media (max-width: 420px) { .bg-pip { display: none; } .bg-plate { padding: 4px 6px; } }

/* full screen: the board gets the room the controls leave */
.bg.bg-fit { max-width: none; height: 100%; margin: 0; padding: 6px 6px 8px; display: flex; flex-direction: column; overflow: hidden; border-radius: 0; }
.bg-fit .bg-top { flex: none; margin: 0 0 6px; justify-content: center; }
.bg-fit .bg-main { flex: 1 1 auto; min-height: 0; }
.bg-fit .bg-boardwrap { width: var(--bg-bw); max-width: 100%; justify-self: center; }
/* landscape: players and board on the left at full height; controls, status, roll/done and moves in a column beside */
.bg.bg-land { display: grid; grid-template-columns: var(--bg-bw) minmax(0, 400px); grid-template-rows: auto auto auto auto auto minmax(0, 1fr); column-gap: 14px; row-gap: 6px; justify-content: center; align-content: stretch; }
.bg-land .bg-main, .bg-land .bg-boardwrap { display: contents; }
.bg-land .bg-plates { grid-column: 1; grid-row: 1; align-self: start; }
.bg-land .bg-boardbox { grid-column: 1; grid-row: 2 / -1; align-self: start; }
.bg-land .bg-top { grid-column: 2; grid-row: 1 / span 2; margin: 0; gap: 6px; justify-content: flex-start; }
.bg-land .bg-opts, .bg-land .bg-tools { flex-basis: 100%; justify-content: flex-start; }
.bg-land .bg-tools .bg-btn:not(.bg-icon) { flex: 1 1 0; }
.bg-land .bg-status { grid-column: 2; grid-row: 3; font-size: 14px; }
.bg-land .bg-actions { grid-column: 2; grid-row: 4; min-height: 0; }
.bg-land .bg-act { min-height: 40px; min-width: 0; flex: 1 1 0; }
.bg-land .bg-view { grid-column: 2; grid-row: 5; }
.bg-land .bg-side { grid-column: 2; grid-row: 6; min-height: 0; overflow: auto; padding: 8px 10px; }
.bg-land .rg-modes { width: 100%; }
.bg-land .rg-mode { flex-direction: row; min-height: 38px; gap: 5px; padding: 4px 6px; font-size: 13px; }
.bg-land .rg-mode svg { width: 16px; height: 16px; }
.bg-land .bg-btn { min-height: 34px; }
.bg-land .bg-opts select { min-height: 32px; }

.bg-port .bg-main { grid-template-columns: 1fr; justify-items: center; align-content: start; }
.bg-port .bg-side { width: var(--bg-bw); }
.bg-port .bg-moves { display: flex; overflow-x: auto; max-height: none; scrollbar-width: none; }
.bg-port .bg-moves li { flex: none; }