/* Rocket Reversi: felt board in a wooden frame, 3D discs, glowing accents. Two themes on .rv[data-theme]. */
.rv {
  --rv-text: #dfe9ff; --rv-muted: #8aa3c4; --rv-strong: #fff; --rv-panel: #0b1328; --rv-line: #1c2b4a; --rv-btn: #0b1328; --rv-btn-text: #dfe9ff;
  --rv-accent: #55d6ff; --rv-warm: #ffd166; --rv-hot: #ffd166;
  --rv-felt-1: #17765a; --rv-felt-2: #0d4f3c; --rv-felt-3: #08362a; --rv-grid: rgba(0, 0, 0, .36); --rv-grid-hi: rgba(255, 255, 255, .05);
  --rv-wood-1: #6b4426; --rv-wood-2: #3e2513; --rv-wood-3: #23140a; --rv-wood-label: rgba(255, 228, 190, .62); --rv-glow-edge: rgba(85, 214, 255, .38);
  --rv-dot: rgba(120, 228, 255, .95); --rv-dot-glow: rgba(85, 214, 255, .6); --rv-last: #ff8a5c;
  max-width: 940px; margin: 0 auto; padding: 10px 8px 16px; user-select: none; -webkit-user-select: none; color: var(--rv-text); border-radius: 12px;
  font-variant-numeric: tabular-nums;
}
.rv[data-theme="light"] {
  --rv-text: #2b2a26; --rv-muted: #6b6457; --rv-strong: #17150f; --rv-panel: #fffdf8; --rv-line: #e0d6c3; --rv-btn: #fffdf8; --rv-btn-text: #2b2a26;
  --rv-accent: #0a86ad; --rv-warm: #b8730a; --rv-hot: #a35f00;
  --rv-felt-1: #4fb688; --rv-felt-2: #379a6f; --rv-felt-3: #287c57; --rv-grid: rgba(16, 60, 40, .34); --rv-grid-hi: rgba(255, 255, 255, .12);
  --rv-wood-1: #e6bd84; --rv-wood-2: #c48d55; --rv-wood-3: #9a6634; --rv-wood-label: rgba(70, 40, 14, .7); --rv-glow-edge: rgba(10, 134, 173, .28);
  --rv-dot: rgba(255, 255, 255, .95); --rv-dot-glow: rgba(200, 255, 240, .75); --rv-last: #e2482b;
  background: linear-gradient(180deg, #f6f1e7, #ece3d2); box-shadow: inset 0 0 0 1px #e0d6c3;
}
.rv [hidden] { display: none !important; }
.rv-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.rv-opts { display: flex; gap: 8px 10px; flex-wrap: wrap; align-items: center; font-size: 13px; color: var(--rv-muted); flex: 1 1 340px; min-width: 0; }
.rv-opts label { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.rv-sel { display: inline-flex; gap: 8px 10px; flex-wrap: wrap; align-items: center; }
.rv-opts select { background: var(--rv-btn); color: var(--rv-btn-text); border: 1px solid var(--rv-line); border-radius: 8px; padding: 0 8px; min-height: 36px; font-size: 13.5px; }
.rv-tools { display: flex; gap: 6px; flex-wrap: wrap; }
.rv-btn { background: var(--rv-btn); color: var(--rv-btn-text); border: 1px solid var(--rv-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; }
@media (hover: hover) { .rv-btn:hover:not(:disabled) { border-color: var(--rv-accent); } }
.rv-btn:disabled { opacity: .42; cursor: default; }
.rv-btn:active:not(:disabled) { transform: translateY(1px); }
.rv-btn-primary { background: #ffd166; color: #1a1200; border-color: #ffd166; }
@media (hover: hover) { .rv-btn-primary:hover:not(:disabled) { background: #ffe08a; border-color: #ffe08a; } }
.rv-btn-sm { min-height: 32px; padding: 0 10px; font-size: 12.5px; }
.rv-icon { width: 38px; padding: 0; }
.rv-icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
#rv-sound[aria-pressed="false"] .on, #rv-sound[aria-pressed="true"] .off { display: none; }
.rv[data-theme="dark"] #rv-theme .moon, .rv[data-theme="light"] #rv-theme .sun { display: none; }
.rv-btn:focus-visible, .rv-rp:focus-visible, .rv-mv:focus-visible, .rv select:focus-visible { outline: 2px solid var(--rv-accent); outline-offset: 2px; }

.rv-main { display: grid; grid-template-columns: minmax(0, 1fr) 252px; gap: 16px; align-items: start; }
.rv-boardwrap { width: 100%; max-width: max(300px, min(600px, calc(100svh - 190px))); margin: 0 auto; container-type: inline-size; display: flex; flex-direction: column; gap: 8px; }

/* score chips: whose turn glows */
.rv-score { display: grid; grid-template-columns: 1fr minmax(40px, 120px) 1fr; align-items: center; gap: 10px; }
.rv-who { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 6px 10px; border-radius: 12px; background: var(--rv-panel); border: 1px solid var(--rv-line); transition: border-color .25s, box-shadow .25s, background-color .25s; }
.rv-who-w { justify-content: flex-end; }
.rv-who.turn { border-color: var(--rv-accent); box-shadow: 0 0 0 1px var(--rv-accent), 0 0 18px var(--rv-glow-edge); }
.rv-who.won { border-color: #ffd166; box-shadow: 0 0 0 1px #ffd166, 0 0 20px rgba(255, 209, 102, .45); }
.rv-name { font-weight: 700; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; color: var(--rv-strong); }
.rv-count { font-size: 22px; font-weight: 800; color: var(--rv-strong); min-width: 1.4em; text-align: center; }
.rv-chip { width: 20px; height: 20px; border-radius: 50%; flex: none; box-shadow: 0 2px 4px rgba(0, 0, 0, .35); }
.rv-chip-b { background: radial-gradient(circle at 38% 34%, #5a606c, #15181e 60%, #050608); }
.rv-chip-w { background: radial-gradient(circle at 38% 34%, #fff, #eceae3 55%, #c3c2bb); }
.rv-bar { height: 8px; border-radius: 99px; overflow: hidden; background: linear-gradient(90deg, #e9e7df, #fff); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .25); }
.rv-bar i { display: block; height: 100%; background: linear-gradient(90deg, #0d0f13, #3b414c); transition: width .5s cubic-bezier(.3, .7, .3, 1); }
.rv-status { text-align: center; font-weight: 700; font-size: 15px; min-height: 1.45em; color: var(--rv-strong); }
.rv-status.hot { color: var(--rv-hot); }
.rv-dots { display: inline-flex; gap: 3px; margin-left: 6px; vertical-align: middle; }
.rv-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--rv-accent); animation: rv-blink 1s infinite ease-in-out; }
.rv-dots i:nth-child(2) { animation-delay: .15s; } .rv-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes rv-blink { 0%, 100% { opacity: .2; } 50% { opacity: 1; } }

/* the wooden frame, coordinates in its margin, a soft glowing rim */
.rv-frame { --pad: clamp(14px, 4.4cqw, 26px); position: relative; padding: var(--pad); border-radius: 16px;
  background: radial-gradient(120% 90% at 30% 10%, rgba(255, 255, 255, .14), transparent 55%), repeating-linear-gradient(97deg, rgba(0, 0, 0, .0) 0 7px, rgba(0, 0, 0, .07) 7px 9px, rgba(255, 255, 255, .03) 9px 13px), linear-gradient(160deg, var(--rv-wood-1), var(--rv-wood-2) 55%, var(--rv-wood-3));
  box-shadow: 0 18px 40px rgba(0, 0, 0, .45), 0 2px 0 rgba(255, 255, 255, .12) inset, 0 -3px 6px rgba(0, 0, 0, .35) inset, 0 0 0 1px var(--rv-glow-edge), 0 0 26px var(--rv-glow-edge); }
.rv-files, .rv-ranks { position: absolute; display: flex; color: var(--rv-wood-label); font-weight: 700; font-size: clamp(9px, 2.2cqw, 12.5px); pointer-events: none; }
.rv-files { left: var(--pad); right: var(--pad); top: 0; height: var(--pad); }
.rv-files span { flex: 1; display: flex; align-items: center; justify-content: center; }
.rv-ranks { top: var(--pad); bottom: var(--pad); left: 0; width: var(--pad); flex-direction: column; }
.rv-ranks span { flex: 1; display: flex; align-items: center; justify-content: center; }
.rv-board { position: relative; aspect-ratio: 1; border-radius: 5px; overflow: hidden; touch-action: manipulation; outline: none;
  background: radial-gradient(110% 80% at 50% 28%, var(--rv-felt-1), var(--rv-felt-2) 58%, var(--rv-felt-3));
  box-shadow: inset 0 0 0 2px rgba(0, 0, 0, .45), inset 0 8px 22px rgba(0, 0, 0, .35); }
.rv-board::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: .35; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); }
.rv-cells { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(8, 1fr); grid-template-rows: repeat(8, 1fr); }
.rv-row { display: contents; }
.rv-cell { position: relative; min-width: 0; min-height: 0; perspective: 420px; cursor: default; box-shadow: inset -1px -1px 0 var(--rv-grid), inset 1px 1px 0 var(--rv-grid-hi); outline: none; -webkit-tap-highlight-color: transparent; }
.rv-cell:nth-child(8n) { box-shadow: inset 0 -1px 0 var(--rv-grid), inset 1px 1px 0 var(--rv-grid-hi); }
.rv-row:last-child .rv-cell { box-shadow: inset -1px 0 0 var(--rv-grid), inset 1px 1px 0 var(--rv-grid-hi); }
.rv-row:last-child .rv-cell:nth-child(8n) { box-shadow: inset 0 -1px 0 var(--rv-grid), inset 1px 1px 0 var(--rv-grid-hi); }
/* the four marker points */
.rv-row:nth-child(3) .rv-cell:nth-child(2)::before, .rv-row:nth-child(3) .rv-cell:nth-child(6)::before, .rv-row:nth-child(7) .rv-cell:nth-child(2)::before, .rv-row:nth-child(7) .rv-cell:nth-child(6)::before {
  content: ''; position: absolute; right: -4px; bottom: -4px; width: 8px; height: 8px; border-radius: 50%; background: rgba(0, 0, 0, .45); z-index: 1; pointer-events: none; }
.rv-cell:focus-visible { box-shadow: inset 0 0 0 3px var(--rv-accent), inset 0 0 14px var(--rv-glow-edge); z-index: 2; }
@media (pointer: coarse) { .rv-cell:focus-visible { box-shadow: none; } }   /* (touch screens: the focus moves to the board after dialogs, but there is no keyboard to show it for) */
.rv-board.mine .rv-cell.rv-can { cursor: pointer; }

/* legal-move dots, the hover preview and the hint */
.rv-dot { position: absolute; left: 50%; top: 50%; width: 0; height: 0; border-radius: 50%; transform: translate(-50%, -50%); pointer-events: none; z-index: 2; transition: width .18s, height .18s, opacity .18s; }
.rv-cell.rv-can .rv-dot { width: 24%; height: 24%; background: radial-gradient(circle, var(--rv-dot) 0 42%, rgba(255, 255, 255, 0) 72%); box-shadow: 0 0 12px 2px var(--rv-dot-glow); animation: rv-pulse 1.8s ease-in-out infinite; }
@keyframes rv-pulse { 0%, 100% { opacity: .62; transform: translate(-50%, -50%) scale(.9); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } }
.rv-cell.preview .rv-dot { width: 76%; height: 76%; animation: none; opacity: .55; box-shadow: 0 0 14px var(--rv-dot-glow); }
.rv.turn-b .rv-cell.preview .rv-dot { background: radial-gradient(circle at 40% 36%, #616774, #15181e 62%, #050608); }
.rv.turn-w .rv-cell.preview .rv-dot { background: radial-gradient(circle at 40% 36%, #fff, #ecebe5 58%, #bdbcb5); }
.rv-cell.willflip .rv-spec { box-shadow: 0 0 0 2px var(--rv-dot), 0 0 14px 2px var(--rv-dot-glow); }
.rv-cell.hint { background: radial-gradient(circle, rgba(255, 209, 102, .42), rgba(255, 209, 102, 0) 70%); }
.rv-cell.hint .rv-dot { width: 38%; height: 38%; background: radial-gradient(circle, #fff3c4 0 30%, #ffd166 46%, rgba(255, 209, 102, 0) 72%); box-shadow: 0 0 18px 5px rgba(255, 209, 102, .75); }

/* discs: two faces in 3D; the specular highlight and the shadow don't turn with them */
.rv-shadow { position: absolute; left: 12%; top: 15%; width: 78%; height: 78%; border-radius: 50%; background: rgba(0, 0, 0, .5); filter: blur(2.5px); pointer-events: none; z-index: 1; }
.rv-disc { position: absolute; left: 10%; top: 10%; width: 80%; height: 80%; border-radius: 50%; transform-style: preserve-3d; transform: rotateY(0deg); z-index: 2; pointer-events: none; }
.rv-cell.has-w .rv-disc { transform: rotateY(180deg); }
.rv-face { position: absolute; inset: 0; border-radius: 50%; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.rv-fb { background: radial-gradient(circle, #31353e 0 34%, #1b1e24 35% 58%, #24272e 59% 66%, #0a0b0e 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); }
.rv-fw { transform: rotateY(180deg); background: radial-gradient(circle, #ffffff 0 34%, #f2f1ec 35% 58%, #fbfaf6 59% 66%, #c9c8c1 100%); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.rv-spec { position: absolute; left: 10%; top: 10%; width: 80%; height: 80%; border-radius: 50%; pointer-events: none; z-index: 3;
  background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .5), rgba(255, 255, 255, .1) 24%, rgba(255, 255, 255, 0) 46%), radial-gradient(circle at 70% 82%, rgba(0, 0, 0, .18), rgba(0, 0, 0, 0) 45%); transition: box-shadow .15s; }
.rv-cell.has-w .rv-spec { background: radial-gradient(circle at 34% 28%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 30%), radial-gradient(circle at 70% 82%, rgba(0, 0, 0, .14), rgba(0, 0, 0, 0) 48%); }
.rv-cell.last::after { content: ''; position: absolute; left: 50%; top: 50%; width: 13%; height: 13%; border-radius: 50%; transform: translate(-50%, -50%); background: var(--rv-last); box-shadow: 0 0 8px var(--rv-last); z-index: 4; pointer-events: none; }
.rv-board.viewing .rv-cell.last::after { background: #ffd166; box-shadow: 0 0 8px #ffd166; }

/* the ripple of light */
.rv-fx { position: absolute; inset: 0; pointer-events: none; z-index: 5; overflow: hidden; }
.rv-ring { position: absolute; width: 12.5%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); border: 2px solid rgba(150, 236, 255, .95); box-shadow: 0 0 16px rgba(85, 214, 255, .75), inset 0 0 14px rgba(85, 214, 255, .55); opacity: 0; }
.rv-ring.from-w { border-color: rgba(255, 246, 214, .95); box-shadow: 0 0 16px rgba(255, 228, 150, .75), inset 0 0 14px rgba(255, 228, 150, .5); }
.rv-glow { position: absolute; width: 12.5%; aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(185, 243, 255, .8), rgba(85, 214, 255, .25) 45%, rgba(85, 214, 255, 0) 70%); opacity: 0; mix-blend-mode: screen; }
.rv-glow.from-w { background: radial-gradient(circle, rgba(255, 249, 225, .85), rgba(255, 220, 140, .25) 45%, rgba(255, 220, 140, 0) 70%); }

.rv-view { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; font-size: 13.5px; font-weight: 700; color: var(--rv-hot); }

/* side panel: moves with replay, record */
.rv-side { background: var(--rv-panel); border: 1px solid var(--rv-line); border-radius: 12px; padding: 12px; min-width: 0; }
.rv-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(--rv-muted); margin: 0 0 8px; }
.rv-mh > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rv-replay { flex: none; }
.rv-replay { display: flex; gap: 2px; }
.rv-rp { width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--rv-line); background: transparent; color: var(--rv-text); display: grid; place-items: center; cursor: pointer; padding: 0; }
.rv-rp svg { width: 16px; height: 16px; fill: currentColor; stroke: currentColor; stroke-width: 1.4; stroke-linejoin: round; }
.rv-rp:disabled { opacity: .35; cursor: default; }
@media (hover: hover) { .rv-rp:hover:not(:disabled) { border-color: var(--rv-accent); } }
#rv-play .pa, #rv-play.playing .pl { display: none; } #rv-play.playing .pa { display: inline; }
.rv-moves { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 3px; max-height: 330px; overflow: auto; overscroll-behavior: contain; }
.rv-moves li { min-width: 0; }
.rv-mv { width: 100%; display: flex; align-items: center; gap: 6px; padding: 3px 6px; border: 0; border-radius: 6px; background: transparent; color: var(--rv-text); font: 600 13px/1.3 inherit; font-family: inherit; cursor: pointer; text-align: left; font-variant-numeric: tabular-nums; }
.rv-mv .n { color: var(--rv-muted); min-width: 1.6em; font-size: 11.5px; }
.rv-mv.pass { color: var(--rv-muted); font-style: italic; }
.rv-mv.cur { background: var(--rv-line); color: var(--rv-strong); }
@media (hover: hover) { .rv-mv:hover { background: rgba(85, 214, 255, .1); } }
.rv-mc { width: 10px; height: 10px; border-radius: 50%; flex: none; }
.rv-mc.b { background: #15181e; box-shadow: 0 0 0 1.5px #8d96a6; } .rv-mc.w { background: #f4f3ee; box-shadow: 0 0 0 1px #9c9a92; }
.rv-empty { grid-column: 1 / -1; color: var(--rv-muted); font-size: 13px; padding: 4px; }
.rv-record { margin-top: 12px; font-size: 12.5px; color: var(--rv-muted); line-height: 1.5; }
.rv-record b { color: var(--rv-text); }

/* dialog and toast */
.rv-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); }
.rv-overlay:not([hidden]) .rv-dialog { animation: rv-pop .22s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes rv-pop { from { transform: scale(.92); opacity: 0; } }
.rv-dialog { background: #0b1328; color: #dfe9ff; border: 1px solid #244b6b; border-radius: 16px; padding: 22px; width: min(100%, 390px); text-align: center; box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }
.rv[data-theme="light"] .rv-dialog { background: #fffdf8; color: #2b2a26; border-color: #e0d6c3; }
.rv-dialog h3 { margin: 0 0 10px; color: inherit; font-size: 24px; letter-spacing: -.01em; }
.rv-dialog p { margin: 0 0 16px; color: inherit; opacity: .8; }
.rv-final { display: flex; justify-content: center; gap: 22px; margin: 4px 0 12px; }
.rv-fc { display: inline-flex; align-items: center; gap: 8px; } .rv-fc b { font-size: 30px; font-weight: 800; }
.rv-fc i { width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 3px 8px rgba(0, 0, 0, .4); }
.rv-fc.b i { background: radial-gradient(circle at 38% 34%, #5a606c, #15181e 60%, #050608); } .rv-fc.w i { background: radial-gradient(circle at 38% 34%, #fff, #eceae3 55%, #c3c2bb); }
.rv-actions { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.rv-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: rv-toast .2s ease-out; }
@keyframes rv-toast { from { opacity: 0; transform: translate(-50%, 10px); } }

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

@media (prefers-reduced-motion: reduce) { .rv-cell.rv-can .rv-dot, .rv-dots i { animation: none; } .rv-bar i, .rv-who { transition: none; } }

/* phones: score and status above the board, moves as a strip below */
@media (max-width: 700px) {
  .rv { padding: 6px 4px 12px; }
  .rv-top { margin-bottom: 8px; gap: 8px; }
  .rv-opts { flex-basis: 100%; justify-content: center; }
  .rv-tools { width: 100%; justify-content: center; }
  .rv-tools .rv-btn:not(.rv-icon) { flex: 1 1 0; padding: 0 8px; }
  .rv-main { grid-template-columns: 1fr; gap: 8px; }
  .rv-side { padding: 8px 10px; }
  .rv-moves { display: flex; overflow-x: auto; max-height: none; scrollbar-width: none; gap: 2px; }
  .rv-moves::-webkit-scrollbar { display: none; }
  .rv-moves li { flex: none; }
  .rv-mv { padding: 4px 7px; }
  .rv-record { margin-top: 6px; text-align: center; }
  .rv-who { padding: 5px 8px; }
  .rv-name { font-size: 13px; }
  .rv-count { font-size: 20px; }
  .rv-score { gap: 6px; grid-template-columns: 1fr 34px 1fr; }
}

/* full screen (.rv-fit, set by game.js inside the site's immersive stage): no page scroll, board sized to fit */
.rv.rv-fit { max-width: none; height: 100%; margin: 0; padding: 6px 6px 8px; display: flex; flex-direction: column; overflow: hidden; border-radius: 0; }
.rv-fit .rv-top { flex: none; margin: 0 0 8px; justify-content: center; }
.rv-fit .rv-main { flex: 1 1 auto; min-height: 0; }
.rv-fit .rv-boardwrap { width: var(--rv-bs); max-width: none; }
.rv-fit .rv-frame { width: 100%; }
/* landscape: the board fills the height on the left; controls, score, status and moves share the column beside it */
.rv.rv-land { display: grid; grid-template-columns: var(--rv-bs) minmax(0, 420px); grid-template-rows: auto auto auto auto minmax(0, 1fr); column-gap: 14px; row-gap: 6px; justify-content: center; align-content: stretch; }
.rv-land .rv-main, .rv-land .rv-boardwrap { display: contents; }
.rv-land .rv-frame { grid-column: 1; grid-row: 1 / -1; align-self: center; --pad: clamp(12px, calc(var(--rv-bs) * .042), 22px); }
.rv-land .rv-files, .rv-land .rv-ranks { font-size: clamp(9px, calc(var(--rv-bs) * .022), 12px); }
.rv-land .rv-top { grid-column: 2; grid-row: 1; margin: 0; gap: 6px; justify-content: flex-start; }
.rv-land .rv-opts, .rv-land .rv-tools { flex-basis: 100%; justify-content: flex-start; }
.rv-land .rv-tools .rv-btn:not(.rv-icon) { flex: 1 1 0; }
.rv-land .rv-score { grid-column: 2; grid-row: 2; }
.rv-land .rv-status { grid-column: 2; grid-row: 3; }
.rv-land .rv-view { grid-column: 2; grid-row: 4; }
.rv-land .rv-side { grid-column: 2; grid-row: 5; min-height: 0; overflow: auto; padding: 8px 10px; }
.rv-land .rv-moves { max-height: none; }
.rv-land .rg-modes { width: 100%; }
.rv-port .rv-main { grid-template-columns: 1fr; justify-items: center; align-content: start; }
.rv-port .rv-side { width: var(--rv-bs); }
.rv-port .rv-moves { display: flex; overflow-x: auto; max-height: none; scrollbar-width: none; }
.rv-port .rv-moves li { flex: none; }
.rv-land .rg-mode { flex-direction: row; min-height: 38px; gap: 5px; padding: 4px 6px; font-size: 13px; }
.rv-land .rg-mode svg { width: 16px; height: 16px; }
.rv-land .rv-btn { min-height: 34px; }
.rv-land .rv-opts select { min-height: 32px; }
.rv-land .rv-score { grid-template-columns: 1fr 44px 1fr; gap: 6px; }
.rv-land .rv-who { padding: 5px 8px; }