/* Party games (Rise & Slide): setup, lobby, the tilted 3D board, pieces, dice and the side panel. */
.rs-page { max-width: 1180px; }
.rs-card { border-radius: var(--radius); padding: 22px; margin-top: 14px; }
.rs-card h2 { font-size: 22px; font-weight: 800; }
.rs-go { width: 100%; margin-top: 18px; }
.small { font-size: 13px; }

/* Theme toggle */
.rs-themes { display: inline-flex; gap: 4px; padding: 4px; border-radius: 999px; background: var(--glass); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow); margin: 4px 0 6px; }
.rs-theme-btn { border: 0; background: none; color: var(--text); font: 700 14px var(--body); padding: 8px 14px; border-radius: 999px; cursor: pointer; transition: background .2s, box-shadow .2s; }
.rs-theme-btn[aria-pressed="true"] { background: var(--glass-strong); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), 0 3px 10px rgba(40, 62, 120, .15); }
:root[data-theme="dark"] .rs-theme-btn[aria-pressed="true"] { background: rgba(120, 150, 230, .22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12); }

/* Setup */
.rs-setup .tabs { margin-top: 10px; }
.rs-seats { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 8px; }
.rs-seat { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 16px; background: var(--chip); border: 1px solid var(--glass-edge); }
.rs-seat-pawn { flex: none; width: 30px; height: 38px; }
.rs-seat-pawn svg { width: 100%; height: 100%; }
.rs-seat-name { flex: 1; min-width: 0; min-height: 40px; padding: 6px 10px; }
.rs-seat-name:disabled { opacity: .75; }
.rs-seat-label { font-weight: 700; }
.rs-seg { display: inline-flex; padding: 3px; border-radius: 12px; background: var(--track); }
.rs-seg button { border: 0; background: none; color: var(--muted); font: 700 13px var(--body); padding: 7px 10px; border-radius: 9px; cursor: pointer; }
.rs-seg button[aria-pressed="true"] { background: var(--glass-strong); color: var(--text); box-shadow: 0 2px 6px rgba(20, 33, 58, .12); }
.rs-seat-x { width: 34px; height: 34px; font-size: 20px; line-height: 1; }
.rs-seat-x:disabled { opacity: .35; }
.rs-opts { display: flex; flex-wrap: wrap; gap: 14px 28px; margin-top: 16px; }
.rs-opts fieldset { border: 0; padding: 0; margin: 0; }
.rs-opts legend { font-weight: 700; margin-bottom: 8px; }
.rs-stepper { display: inline-flex; align-items: center; gap: 12px; }
.rs-stepper .btn { min-height: 40px; width: 44px; padding: 0; font-size: 20px; }
.rs-stepper strong { min-width: 1.4em; text-align: center; font-size: 20px; }
.rs-lobby-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.rs-invite { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0; }
.rs-invite .input { flex: 1; min-width: 200px; }
#rs-conn-dot { width: 9px; height: 9px; border-radius: 50%; background: #E5A50A; display: inline-block; }
#rs-conn-dot.on { background: var(--ok); }
.rs-daily-facts { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 12px 0 0; }
.rs-daily-facts li { padding: 6px 12px; border-radius: 999px; background: var(--chip); border: 1px solid var(--glass-edge); font-weight: 600; font-size: 14px; }
.rs-daily-done { text-align: center; }
.rs-place-big { font-family: var(--display); font-size: clamp(44px, 12vw, 68px); font-weight: 800; line-height: 1.1; margin: 6px 0; }
.rs-dd-stats { font-weight: 700; margin-bottom: 14px; }

/* Game layout */
.rs-game { display: grid; grid-template-columns: minmax(0, 1fr) 330px; gap: 18px; margin-top: 14px; align-items: start; }
.rs-stagewrap { position: relative; }
.rs-side { display: grid; gap: 12px; }
.rs-panel { border-radius: 20px; padding: 16px; }
.rs-panel h2 { font-size: 20px; font-weight: 800; }
@media (max-width: 900px) { .rs-game { grid-template-columns: 1fr; } }

/* ---------- the stage and board ---------- */
.rs-stage { perspective: 1200px; perspective-origin: 50% 0%; padding: 6px 3% 26px 11%; border-radius: 28px; position: relative; overflow: hidden;
  background: var(--rs-sky); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), var(--glass-shadow); }
.rs-stage::before, .rs-stage::after { content: ''; position: absolute; pointer-events: none; border-radius: 50%; filter: blur(2px); }
.rs-board { --tilt: 26deg; position: relative; aspect-ratio: 1; width: 100%; transform: rotateX(var(--tilt)) translateY(-2%); transform-origin: 50% 70%; transform-style: preserve-3d; border-radius: 18px; }
.rs-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--w), 1fr); grid-template-rows: repeat(var(--w), 1fr); gap: 3px; padding: 0; border-radius: 18px;
  box-shadow: 0 2px 0 var(--rs-edge), 0 6px 0 var(--rs-edge2), 0 26px 40px rgba(10, 20, 50, .35); background: var(--rs-edge); }
.rs-cell { position: relative; border-radius: 6px; background: var(--rs-a); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), inset 0 -2px 0 rgba(0, 0, 0, .08); }
.rs-cell.b { background: var(--rs-b); }
.rs-cell.star { background: var(--rs-star); }
.rs-cell.finish { background: var(--rs-finish); }
.rs-cell.start { background: var(--rs-startc); }
.rs-num { position: absolute; left: 6%; top: 3%; font: 700 clamp(7px, 1.25vw, 12px) var(--body); color: var(--rs-num); opacity: .8; }
.rs-cell:first-child { border-top-left-radius: 15px; }
.rs-art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.rs-pieces { position: absolute; inset: 0; transform-style: preserve-3d; }

/* pieces stand upright on the tilted board */
.rs-pc { position: absolute; width: calc(100% / var(--w) * .78); aspect-ratio: 40 / 52; transform: translate(-50%, -82%) rotateX(calc(-1 * var(--tilt))); transform-origin: 50% 100%; pointer-events: none; }
.rs-pc-in { display: block; width: 100%; height: 100%; transform-origin: 50% 100%; }
.rs-pc svg { width: 100%; height: 100%; filter: drop-shadow(0 3px 2px rgba(10, 20, 50, .25)); }
.rs-pc-tag { position: absolute; left: 50%; top: 28%; transform: translate(-50%, -50%); font: 800 clamp(8px, 1.3vw, 12px) var(--body); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .35); }
.rs-pc.turn .rs-pc-in { animation: rs-bob 1.1s ease-in-out infinite; }
.rs-pc.turn::after { content: ''; position: absolute; left: 50%; bottom: -6%; width: 90%; height: 22%; transform: translateX(-50%); border-radius: 50%; background: radial-gradient(rgba(255, 230, 120, .9), rgba(255, 230, 120, 0) 70%); z-index: -1; animation: rs-glow 1.1s ease-in-out infinite; }
.rs-pc.done { opacity: .9; }
.rs-pc.shielded .rs-pc-in::after { content: ''; position: absolute; inset: -12% -18% 0; border-radius: 50% 50% 40% 40%; border: 2px solid rgba(120, 220, 255, .9); box-shadow: 0 0 12px rgba(120, 220, 255, .8), inset 0 0 10px rgba(120, 220, 255, .5); }
.rs-pc.frozen svg { filter: saturate(.3) brightness(1.15) drop-shadow(0 0 4px #9fe3ff); }
.rs-pc.zap .rs-pc-in { animation: rs-zap .5s; }
.rs-pc.riding .rs-pc-in { animation: rs-ride .9s ease-in-out; }
@keyframes rs-bob { 50% { transform: translateY(-10%); } }
@keyframes rs-glow { 50% { opacity: .45; } }
@keyframes rs-zap { 20% { transform: rotate(-14deg); } 50% { transform: rotate(10deg) scale(.92); } 80% { transform: rotate(-4deg); } }
@keyframes rs-ride { 50% { transform: scale(1.15) rotate(-6deg); } }
.rs-bubble { position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%); white-space: nowrap; padding: 3px 9px; border-radius: 999px; font: 800 clamp(10px, 1.4vw, 13px) var(--body);
  background: rgba(255, 255, 255, .95); color: #14213A; box-shadow: 0 4px 12px rgba(10, 20, 50, .25); animation: rs-bubble 1.4s ease-out forwards; z-index: 5; }
.rs-bubble.good { background: #E6FBF1; color: #0E6B45; }
.rs-bubble.bad { background: #FFE9E9; color: #B42228; }
.rs-bubble.card { background: #FFF6D6; color: #7A5508; }
.rs-bubble.cold { background: #E3F6FF; color: #0B5F86; }
.rs-bubble.react { font-size: clamp(14px, 2.2vw, 20px); background: rgba(255, 255, 255, .98); }
@keyframes rs-bubble { 0% { transform: translate(-50%, 6px) scale(.7); opacity: 0; } 15% { transform: translate(-50%, 0) scale(1.05); opacity: 1; } 75% { opacity: 1; } 100% { transform: translate(-50%, -14px); opacity: 0; } }

.rs-banner { position: absolute; left: 50%; top: 10px; z-index: 20; transform: translate(-50%, -10px); max-width: 90%; padding: 8px 16px; border-radius: 999px; font-weight: 800; text-align: center;
  background: var(--glass-strong); border: 1px solid var(--glass-edge); box-shadow: var(--glass-shadow-hi); opacity: 0; pointer-events: none; transition: opacity .25s, transform .25s; }
.rs-banner.show { opacity: 1; transform: translate(-50%, 0); }
.rs-banner.win { background: linear-gradient(180deg, #FFE38F, #F5C542); color: #14213A; }
.rs-banner.bump, .rs-banner.bad { color: #B42228; }
.rs-banner.good { color: #0E6B45; }
:root[data-theme="dark"] .rs-banner.bump, :root[data-theme="dark"] .rs-banner.bad { color: #FF9A9D; }
:root[data-theme="dark"] .rs-banner.good { color: #6BE3B5; }

/* ---------- art on the board ---------- */
.up-shadow { fill: none; stroke: rgba(10, 20, 50, .14); stroke-width: 2.8; stroke-linecap: round; transform: translate(.6px, 1px); }
.down-shadow { fill: none; stroke: rgba(10, 20, 50, .16); stroke-width: 4.4; stroke-linecap: round; transform: translate(.6px, 1.2px); }
.down-mouth { fill: rgba(10, 20, 50, .18); }
.ic-jungle, .ic-sky { display: none; }
body[data-rstheme="sky"] .ic-sky, body[data-rstheme="jungle"] .ic-jungle { display: inline; }
.gem { fill: #7FD8FF; stroke: #2B8BC9; stroke-width: .35; stroke-linejoin: round; }
.gem-line { fill: none; stroke: #2B8BC9; stroke-width: .3; opacity: .7; }
.idol { fill: #F2B731; stroke: #94680A; stroke-width: .35; }
.idol-in { fill: #FFD964; }
.idol-face { fill: none; stroke: #7A5508; stroke-width: .45; stroke-linecap: round; }
.rainbow { fill: none; stroke-width: .9; stroke-linecap: round; }
.r1 { stroke: #E5484D; } .r2 { stroke: #F5C542; } .r3 { stroke: #2D5BD0; }
.temple { fill: #C9A25C; stroke: #6E5320; stroke-width: .3; }
.temple-flag { stroke: #E5484D; stroke-width: .5; }

/* Sky Islands */
body[data-rstheme="sky"] {
  --rs-sky: radial-gradient(ellipse 30% 14% at 18% 12%, rgba(255, 255, 255, .9), rgba(255, 255, 255, 0) 70%), radial-gradient(ellipse 26% 12% at 82% 22%, rgba(255, 255, 255, .8), rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, #8ED0FF 0%, #BFE6FF 55%, #E9F7FF 100%);
  --rs-a: linear-gradient(160deg, #FFFFFF, #EAF4FF); --rs-b: linear-gradient(160deg, #DFF0FF, #C8E3FB); --rs-edge: #8FB6DD; --rs-edge2: #6E95C2;
  --rs-star: linear-gradient(160deg, #E7FBFF, #B8ECFF); --rs-finish: linear-gradient(160deg, #FFF6C8, #FFE38F); --rs-startc: linear-gradient(160deg, #E7FFF3, #BDF2D7); --rs-num: #4A6A8C;
}
body[data-rstheme="sky"] .up-line { fill: none; stroke: rgba(255, 255, 255, .95); stroke-width: 2.2; stroke-linecap: round; }
body[data-rstheme="sky"] .up-dash { fill: none; stroke: #F08AB0; stroke-width: 1.1; stroke-dasharray: 2 2.4; stroke-linecap: round; animation: rs-rise 1.6s linear infinite; }
body[data-rstheme="sky"] .balloon { stroke: rgba(0, 0, 0, .15); stroke-width: .3; }
.balloon.b0 { fill: #FF6B8A; } .balloon.b1 { fill: #FFB547; } .balloon.b2 { fill: #8A7BFF; } .balloon.b3 { fill: #3FC7A0; }
.rope { fill: none; stroke: #8A6A3D; stroke-width: .35; }
.basket { fill: #B07A3B; }
.shine { fill: rgba(255, 255, 255, .55); }
body[data-rstheme="sky"] .down-line { fill: none; stroke: #4FA9F0; stroke-width: 3.4; stroke-linecap: round; opacity: .9; }
body[data-rstheme="sky"] .down-flow { fill: none; stroke: rgba(255, 255, 255, .85); stroke-width: 1; stroke-dasharray: 3 3.5; stroke-linecap: round; animation: rs-flow 1s linear infinite; }

/* Jungle Temple */
body[data-rstheme="jungle"] {
  --rs-sky: radial-gradient(ellipse 40% 22% at 10% 8%, rgba(120, 200, 110, .55), rgba(120, 200, 110, 0) 70%), radial-gradient(ellipse 36% 20% at 92% 14%, rgba(70, 160, 90, .5), rgba(70, 160, 90, 0) 70%), linear-gradient(180deg, #2F7A4C 0%, #4E9A5E 45%, #9BC77E 100%);
  --rs-a: linear-gradient(160deg, #F4E8C8, #E3D2A6); --rs-b: linear-gradient(160deg, #DCC892, #C9B27A); --rs-edge: #7C6534; --rs-edge2: #5A4823;
  --rs-star: linear-gradient(160deg, #FFF2C2, #F2D67A); --rs-finish: linear-gradient(160deg, #FFE38F, #E0A010); --rs-startc: linear-gradient(160deg, #DDF2C8, #B7DE98); --rs-num: #6E5320;
}
body[data-rstheme="jungle"] .up-line { fill: none; stroke: #2E8B3E; stroke-width: 1.8; stroke-linecap: round; }
body[data-rstheme="jungle"] .up-dash { fill: none; stroke: #7FD36A; stroke-width: 2.4; stroke-dasharray: .1 3.2; stroke-linecap: round; }
.leaf { fill: #4BB55A; stroke: #2E7A3A; stroke-width: .25; }
body[data-rstheme="jungle"] .down-line { fill: none; stroke: #8F8A80; stroke-width: 3.6; stroke-linecap: round; }
body[data-rstheme="jungle"] .down-flow { fill: none; stroke: #C9C3B6; stroke-width: 1.6; stroke-linecap: round; opacity: .9; }
body[data-rstheme="jungle"] .down-mouth { fill: rgba(30, 20, 5, .55); }
@keyframes rs-flow { to { stroke-dashoffset: -13; } }
@keyframes rs-rise { to { stroke-dashoffset: 8.8; } }

:root[data-theme="dark"] body[data-rstheme="sky"] { --rs-sky: radial-gradient(ellipse 30% 14% at 18% 12%, rgba(255, 255, 255, .18), rgba(255, 255, 255, 0) 70%), linear-gradient(180deg, #1B2D5A 0%, #2B4680 60%, #3A5B99 100%); --rs-edge: #33528A; --rs-edge2: #233C68; }
:root[data-theme="dark"] body[data-rstheme="jungle"] { --rs-sky: linear-gradient(180deg, #10301F 0%, #1D4A30 55%, #2F6A42 100%); }

/* ---------- side panel ---------- */
.rs-turn { border-top: 4px solid var(--pc, var(--select)); }
.rs-turn h2 { margin: 2px 0 4px; }
.rs-hint { min-height: 1.4em; margin-bottom: 10px; }
.rs-hand { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }
.rs-nocards { grid-column: 1 / -1; font-size: 14px; margin: 0; }
.rs-cardbtn { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 10px; border-radius: 14px; cursor: pointer; color: var(--text);
  background: linear-gradient(160deg, rgba(255, 255, 255, .95), rgba(255, 244, 214, .85)); border: 1px solid var(--glass-edge); box-shadow: var(--lift); transition: transform .15s; }
:root[data-theme="dark"] .rs-cardbtn { background: linear-gradient(160deg, rgba(60, 80, 130, .9), rgba(80, 64, 40, .8)); }
.rs-cardbtn:not(:disabled):hover { transform: translateY(-3px) rotate(-1deg); }
.rs-cardbtn:disabled { opacity: .55; cursor: default; }
.rs-cic { display: inline-flex; width: 30px; height: 30px; border-radius: 9px; align-items: center; justify-content: center; color: #fff; background: linear-gradient(160deg, #8EC4FF, #2D5BD0); flex: none; }
.rs-cic svg { width: 19px; height: 19px; }
.c-shield .rs-cic, .rs-cic.c-shield { background: linear-gradient(160deg, #8BEBB8, #16935F); }
.c-swap .rs-cic, .rs-cic.c-swap { background: linear-gradient(160deg, #D5B8FF, #7B4BD6); }
.c-push .rs-cic, .rs-cic.c-push { background: linear-gradient(160deg, #A6D8FF, #3A86C8); }
.c-six .rs-cic, .rs-cic.c-six { background: linear-gradient(160deg, #FFC28F, #E5701A); }
.c-freeze .rs-cic, .rs-cic.c-freeze { background: linear-gradient(160deg, #A8EEFF, #2AA6D4); }
.c-pull .rs-cic, .rs-cic.c-pull { background: linear-gradient(160deg, #FFE38A, #E0A010); }
.c-reverse .rs-cic, .rs-cic.c-reverse { background: linear-gradient(160deg, #FF9AA0, #D9363E); }
.rs-cname { font-weight: 800; font-size: 15px; }
.rs-chow { font-size: 12px; color: var(--muted); line-height: 1.3; }
.rs-target { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px; margin-bottom: 10px; border-radius: 12px; background: #FFF6D6; color: #5E4106; font-weight: 700; font-size: 14px; }
.rs-dice { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.rs-pick { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px 8px; border-radius: 16px; border: 1px solid var(--glass-edge); background: var(--chip); color: var(--text); cursor: default; font: 700 14px var(--body); transition: transform .15s, box-shadow .2s; min-height: 108px; }
.rs-pick.pickable { cursor: pointer; background: var(--glass-strong); box-shadow: 0 0 0 2px var(--select), var(--lift); animation: rs-pulse 1.4s ease-in-out infinite; }
.rs-pick.pickable:hover { transform: translateY(-3px); }
.rs-pick-label { min-height: 1.3em; }
@keyframes rs-pulse { 50% { box-shadow: 0 0 0 4px color-mix(in srgb, var(--select) 40%, transparent), var(--lift); } }
.rs-roll { width: 100%; }
.rs-roll[hidden] { display: none; }

/* 3D dice */
.rs-die { width: 54px; height: 54px; perspective: 400px; display: inline-block; }
.rs-cube { position: relative; display: block; width: 100%; height: 100%; transform-style: preserve-3d; transform: rotateX(-16deg) rotateY(22deg); }
.rs-face { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); padding: 15%; border-radius: 12px;
  background: radial-gradient(circle at 30% 25%, #FFFFFF, #EEF1F7 70%); box-shadow: inset 0 0 0 1px rgba(20, 33, 58, .12), inset 0 -3px 6px rgba(20, 33, 58, .12); backface-visibility: hidden; }
.rs-face i { display: block; margin: 16%; border-radius: 50%; }
.rs-face i.on { background: radial-gradient(circle at 35% 30%, #4A5A78, #14213A); }
.rs-face.front { transform: translateZ(27px); }
.rs-face.back { transform: rotateY(180deg) translateZ(27px); }
.rs-face.right { transform: rotateY(90deg) translateZ(27px); }
.rs-face.left { transform: rotateY(-90deg) translateZ(27px); }
.rs-face.top { transform: rotateX(90deg) translateZ(27px); }
.rs-face.bottom { transform: rotateX(-90deg) translateZ(27px); }

/* players list */
.rs-players { list-style: none; padding: 0; margin: 0; display: grid; gap: 6px; }
.rs-prow { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-areas: "dot name meta" "dot cards stat"; align-items: center; gap: 0 10px; padding: 8px 10px; border-radius: 14px; border: 1px solid transparent; transition: background .2s, transform .2s; }
.rs-prow.now { background: var(--glass-strong); border-color: var(--glass-edge); box-shadow: 0 3px 10px rgba(40, 62, 120, .12); }
:root[data-theme="dark"] .rs-prow.now { background: rgba(120, 150, 230, .16); }
.rs-pdot { grid-area: dot; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff 0 12%, var(--pa) 30%, var(--pb)); box-shadow: 0 2px 4px rgba(0, 0, 0, .2); }
.rs-pname { grid-area: name; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-pmeta { grid-area: meta; font-weight: 700; font-size: 14px; color: var(--muted); }
.rs-pcards { grid-area: cards; font-size: 12px; min-height: 1em; }
.rs-pstat { grid-area: stat; font-size: 14px; text-align: right; }
.rs-preact { position: absolute; right: 8px; top: -10px; font-size: 20px; opacity: 0; pointer-events: none; }
.rs-preact.show { animation: rs-bubble 1.6s ease-out forwards; left: auto; }
.rs-prow.target { cursor: pointer; border-color: var(--select); background: var(--glass-strong); animation: rs-pulse 1.4s ease-in-out infinite; }
.rs-prow.target:hover { transform: translateX(3px); }
.rs-prow.dim { opacity: .45; }
.rs-prow.placed .rs-pmeta { color: var(--text); }
.rs-react-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rs-react-row .btn { min-height: 40px; padding: 0 12px; font-size: 18px; }
.rs-standings { list-style: none; padding: 0; margin: 10px 0 12px; display: grid; gap: 6px; }
.rs-standings li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rs-standings .rs-pdot { width: 14px; height: 14px; background: var(--pb); }
.rs-standings .muted { font-size: 13px; }
.rs-after .btn-row { gap: 8px; }
.rs-card-help { list-style: none; padding: 0; display: grid; gap: 8px; }
.rs-card-help li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rs-card-help .rs-cic { width: 26px; height: 26px; }

@media (max-width: 640px) {
  .rs-stage { padding: 4px 2% 18px 10%; border-radius: 20px; }
  .rs-board { --tilt: 18deg; }
  .rs-grid { gap: 2px; }
  .rs-cell { border-radius: 4px; }
  .rs-die { width: 46px; height: 46px; }
  .rs-face.front { transform: translateZ(23px); } .rs-face.back { transform: rotateY(180deg) translateZ(23px); }
  .rs-face.right { transform: rotateY(90deg) translateZ(23px); } .rs-face.left { transform: rotateY(-90deg) translateZ(23px); }
  .rs-face.top { transform: rotateX(90deg) translateZ(23px); } .rs-face.bottom { transform: rotateX(-90deg) translateZ(23px); }
  .rs-seat { flex-wrap: wrap; }
  .rs-seat-name { flex-basis: 120px; }
  .rs-themes { display: flex; }
  .rs-theme-btn { flex: 1; padding: 8px 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .rs-pc.turn .rs-pc-in, .rs-pc.turn::after, .up-dash, .down-flow, .rs-pick.pickable, .rs-prow.target { animation: none !important; }
}

.rs-setup .tabs { display: flex; }
.rs-setup .tab { flex: 1; white-space: nowrap; }
@media (max-width: 400px) { .rs-setup .tab { font-size: 14px; padding-left: 8px; padding-right: 8px; } }