.rt-app { width: min(100%,1000px); margin: 0 auto; padding: 22px 20px; display: grid; gap: 18px; }
.rt-head { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; }
.rt-head h1 { margin: 0; color: var(--ink); font-size: clamp(26px,4vw,32px); font-weight: 700; letter-spacing: -.03em; }
.rt-head p { color: var(--ink-2); font-size: 14.5px; margin: 4px 0 0; }
.rt-back { justify-self: center; padding: 12px; color: var(--ink-3); font-size: 13px; }
.rt-lobby[hidden],.rt-play[hidden] { display: none; }
.rt-play { display: grid; gap: 12px; --card-w: clamp(44px,calc((100vw - 48px)/7.6),74px); --card-h: calc(var(--card-w)*1.445); --cw: var(--card-w); --ch: var(--card-h); }
.rt-scores { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.rt-scores .ppt-plate { min-width: 0; padding: 6px 10px; }
.rt-scores .ppt-face { --size: 32px; }
.rt-scores .ppt-plate__text b { font-size: 13px; }
.rt-scores .ppt-plate__text small { font-size: 11px; }
.rt-felt { min-height: 220px; padding: 18px; background: radial-gradient(120% 95% at 50% 38%,#398263,#22604b); color: #f3f7f0; border-radius: var(--r-xl); box-shadow: inset 0 0 0 1px #0003,inset 0 2px 16px #0003,var(--shadow-2); display: grid; gap: 18px; align-content: center; justify-items: center; }
.rt-center { display: grid; justify-items: center; gap: 12px; width: 100%; }
.rt-center-note { margin: 40px 0; text-align: center; color: #f3f7f0; }
.rt-public-cards { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.rt-play .card { width: var(--card-w); height: var(--card-h); flex: none; position: relative; }
.rt-hand { display: flex; justify-content: center; align-items: end; padding: 18px 0 4px; min-height: calc(var(--card-h) + 22px); }
.rt-hand .card + .card { margin-left: calc(var(--card-w)*-.45); }
.rt-hand .card.is-dim { filter: grayscale(.65) brightness(.83); }
.rt-hand .card.is-live { transform: translateY(-5px); }
.rt-hand .card.is-selected { transform: translateY(-18px); box-shadow: 0 0 0 3px var(--accent),0 10px 18px #0003; z-index: 2; }
.rt-trick { width: calc(var(--card-w)*3 + 28px); height: calc(var(--card-h)*2.25 + 26px); position: relative; }
.rt-trick-card { position: absolute; display: grid; justify-items: center; gap: 3px; }
.rt-trick-card small { color: #f3f7f0; max-width: var(--card-w); font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-position-0 { bottom: 0; left: 50%; transform: translateX(-50%); }
.rt-position-1 { left: 0; top: 50%; transform: translateY(-50%); }
.rt-position-2 { top: 0; left: 50%; transform: translateX(-50%); }
.rt-position-3 { right: 0; top: 50%; transform: translateY(-50%); }
.rt-groups { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.rt-group { display: grid; gap: 5px; text-align: center; }
.rt-group .rt-public-cards { --card-w: 36px; --card-h: 52px; }
.rt-status { margin: 0; font-size: 15px; font-weight: 600; color: var(--ink); text-align: center; }
.rt-info { margin: 0; font-size: 13px; color: var(--ink-2); text-align: center; }
.rt-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.rt-foot { display: flex; justify-content: end; }
.rt-board-wrap { width: min(100%,480px); overflow-x: auto; }
.rt-board { display: grid; grid-template-columns: repeat(var(--cols,8),minmax(0,1fr)); border: 4px solid #8b6649; background: #ead8b7; }
.rt-cell { aspect-ratio: 1; border: 0; background: #ead8b7; color: #17150f; display: grid; place-items: center; font-size: clamp(15px,5vw,38px); padding: 0; cursor: pointer; }
.rt-cell-dark { background: #a6815e; }
.rt-piece-white { color: #fff; text-shadow: 0 1px 1px #33291d,1px 0 1px #33291d; }
.rt-piece-hit { color: #af3021; }
.rt-cell.is-live { box-shadow: inset 0 0 0 4px #4b9a72; }
.rt-cell.is-selected { box-shadow: inset 0 0 0 4px #f1c75b; }
.rt-board.rt-points { position: relative; display: block; aspect-ratio: 1; background: #e9e3d5; border: 0; }
.rt-points svg { width: 100%; height: 100%; }
.rt-point { position: absolute; transform: translate(-50%,-50%); height: 40px; width: 40px; border: 0; border-radius: 50%; background: transparent; }
.rt-point::before { content: ''; display: block; width: 10px; height: 10px; background: #254438; border-radius: 50%; margin: auto; }
.rt-dice { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.rt-die { background: #fff; color: #17150f; border: 1px solid #d5d0c4; border-radius: 10px; font-size: 44px; width: 56px; height: 56px; line-height: 1; }
.rt-die[aria-pressed=true] { outline: 3px solid var(--accent); transform: translateY(-5px); }
body[data-room-table] .ba-sub,body[data-room-table] #open-options { display: none; }
body[data-room-table].is-playing { height: auto; min-height: 100svh; overflow: auto; }
body[data-room-table].is-playing #view { display: grid; flex: none; min-height: 0; height: auto; margin: 0 auto; }
body[data-room-table] .hx-head { display: none; }
@media(max-width:640px) { .rt-app { padding: 16px 14px; } .rt-felt { padding: 12px 8px; } .rt-scores { gap: 5px; } .rt-scores .ppt-plate { padding: 5px 7px; } .rt-scores .ppt-face { --size: 26px; } .rt-scores .ppt-plate__text b { font-size: 12px; } .rt-status { font-size: 14px; } .rt-head p { font-size: 14px; } }
@media(prefers-reduced-motion:reduce) { .rt-hand .card,.rt-die { transition: none; } }

body[data-room-table].is-playing #view.rt-app { width: min(100%,1000px); padding: 22px 20px; }
.rt-hand { display: block; max-width: 100%; overflow-x: auto; padding: 0; }
.rt-hand-cards { display: flex; align-items: end; width: max-content; max-width: none; padding: 20px 4px 8px; margin: auto; }
.rt-hand-cards.is-loose { gap: 6px; }
.rt-hand-cards.is-loose .card + .card { margin-left: 0; }
.rt-groups,.rt-group { max-width: 100%; min-width: 0; }
@media(max-width:640px) { body[data-room-table].is-playing #view.rt-app { padding: 16px 14px; } }

/* Every game view owns exactly the space left below the site header. */
body[data-room-table],body[data-room-table].is-playing { height: 100vh; height: 100dvh; min-height: 0; overflow: hidden; display: flex; flex-direction: column; padding-bottom: env(safe-area-inset-bottom); }
body[data-room-table] > .pp-header { flex: 0 0 48px; height: 48px; }
body[data-room-table] > .pp-header .pp-header__inner { height: 47px; }
body[data-room-table] .pp-footer,body[data-room-table] #foot,body[data-room-table] .hx-about { display: none; }
body[data-room-table] .hx-main { display: flex; flex: 1; min-height: 0; padding: 0; }
body[data-room-table] #view.rt-app,body[data-room-table] .rt-app,body[data-room-table].is-playing #view.rt-app {
  width: min(100%,1100px); min-width: 0; min-height: 0; height: auto; flex: 1; padding: 8px 14px; margin: 0 auto;
  display: grid; grid-template-rows: auto minmax(0,1fr); align-content: stretch; gap: 6px; overflow: hidden;
}
.rt-head { min-height: 36px; align-items: center; gap: 8px; }
.rt-head h1 { font-size: 22px; line-height: 1.2; }
.rt-head-actions { display: flex; align-items: center; gap: 5px; flex: none; }
.rt-head .pp-btn { min-height: 40px; height: 40px; padding: 0 12px; }
body[data-room-table][data-entry=lobby] .rt-app { grid-template-rows: auto minmax(0,1fr) auto; }
.rt-lobby.ppt-lobby { align-self: center; padding: 28px 24px 20px; }
.rt-back { padding: 4px; }
.rt-play { min-height: 0; min-width: 0; display: grid; grid-template-rows: auto minmax(0,1fr) auto; gap: 6px;
 --card-w: clamp(34px,7.5dvh,74px); --card-h: calc(var(--card-w)*1.445); }
.rt-scores { display: grid; grid-template-columns: repeat(var(--seats,4),minmax(0,1fr)); gap: 6px; width: min(100%,680px); margin: 0 auto; }
.rt-scores .ppt-plate { min-width: 0; max-width: 100%; gap: 4px; padding: 4px 7px; border-radius: 12px; }
.rt-scores .ppt-face { --size: 24px; }
.rt-scores .ppt-plate__text { min-width: 0; }
.rt-scores .ppt-plate__text b { font-size: 12px; max-width: 100%; }
.rt-scores .ppt-plate__text small { font-size: 10px; line-height: 1.1; }
.rt-scores .ppt-tag { font-size: 9px; padding: 1px 3px; }
.rt-scores .ppt-plate__end { font-size: 11px; margin-left: auto; }
.rt-felt { min-height: 0; min-width: 0; position: relative; padding: 8px; display: block; overflow: hidden; border-radius: 18px; }
.rt-scene { position: absolute; display: grid; justify-items: center; align-content: start; gap: 10px; transform-origin: 0 0; }
.rt-center-note { margin: 16px 0; }
.rt-console { min-width: 0; display: grid; gap: 4px; justify-items: stretch; align-content: end; }
.rt-hand { min-height: 0; overflow: visible; }
.rt-hand-cards,.rt-hand-cards.is-loose { display: grid; grid-template-columns: repeat(var(--hand-cols,1),var(--hand-step,40px)); grid-auto-rows: var(--card-h); width: max-content; gap: 8px 0; padding: 18px 0 3px; padding-right: calc(var(--card-w) - var(--hand-step,40px)); margin: 0 auto; }
.rt-hand .card + .card,.rt-hand-cards.is-loose .card + .card { margin-left: 0; }
.rt-hand .card.is-live { transform: translateY(-3px); }
.rt-hand .card.is-selected { transform: translateY(-12px); }
.rt-status { font-size: 14px; line-height: 1.3; min-height: 18px; }
.rt-info { font-size: 11px; line-height: 1.2; }
.rt-actions { gap: 6px; }
.rt-actions .pp-btn { min-height: 40px; height: auto; padding: 8px 12px; font-size: 13px; }
.rt-dice { gap: 6px; }
.rt-die { width: 46px; height: 46px; font-size: 36px; }
.rt-board-wrap { overflow: visible; }
.rt-groups { gap: 10px; }
.rt-group .rt-public-cards { --card-w: 34px; --card-h: 49px; }
.rt-choice-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(140px,1fr)); gap: 6px; }
.rt-choice-grid.is-short { grid-template-columns: repeat(5,minmax(0,1fr)); }
.rt-choice-grid .rt-choice { padding: 6px; min-height: 40px; height: auto; font-size: 12px; line-height: 1.15; }
body[data-room-table] .ppt-sheet { width: min(740px,calc(100vw - 24px)); max-height: calc(100dvh - 24px); }
body[data-room-table] .ppt-sheet .pp-dialog__body { padding: 16px; }
body[data-room-table] .ppt-sheet__head { margin-bottom: 10px; }
body[data-room-table] .ppt-sheet__head h2 { font-size: 20px; }
body[data-room-table] .ppt-form { gap: 10px; }
@media(max-width:640px) {
 .rt-head h1 { font-size: 20px; }
 .rt-scores { gap: 4px; }
 .rt-scores .ppt-plate { padding: 4px; gap: 3px; }
 .rt-scores .ppt-face { --size: 20px; }
 .rt-scores .ppt-plate__text b { font-size: 11px; }
 .rt-scores .ppt-plate__end { font-size: 10px; }
 .rt-scores .ppt-tag { padding: 0 2px; font-size: 8px; }
 .rt-status { font-size: 13px; }
}
@media(max-height:520px) and (min-width:600px) {
 .rt-play { grid-template-columns: minmax(0,1fr) minmax(300px,40%); grid-template-rows: auto minmax(0,1fr); column-gap: 10px; }
 .rt-scores { grid-column: 1/-1; }
 .rt-felt { grid-column: 1; grid-row: 2; }
 .rt-console { grid-column: 2; grid-row: 2; align-content: center; }
 .rt-head h1 { font-size: 18px; }
 .rt-head { min-height: 32px; }
 .rt-choice-grid.is-short { grid-template-columns: repeat(8,minmax(0,1fr)); }
 .rt-lobby.ppt-lobby { padding: 12px 24px; }
 .rt-lobby .ppt-face { --size: 42px; }
 .rt-lobby .ppt-lobby__seats { margin-bottom: 12px; }
 .rt-lobby .ppt-hint { margin: 8px 0; }
 .rt-lobby .ppt-start { height: 40px; min-height: 40px; }
 .rt-lobby .ppt-sub { margin: 4px 0 0; }
}

.rt-scores .ppt-plate__text b { display: flex; align-items: center; gap: 2px; }
.rt-scores .rt-player-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rt-scores .ppt-tag { flex: none; margin-left: 0; }
@media(max-width:640px) { .rt-scores .ppt-face { --size: 18px; } .rt-scores .ppt-plate { padding: 3px; gap: 2px; } }

.rt-choice-panel { display: grid; gap: 8px; }
.rt-choice-pager { display: flex; align-items: center; justify-content: center; gap: 12px; }
.rt-choice-pager:empty { display: none; }
.rt-choice-pager .pp-btn { height: 40px; min-height: 40px; }
.rt-choice-grid .rt-choice { overflow: hidden; text-overflow: ellipsis; }
.rt-choice-grid:not(.is-short) .rt-choice { white-space: normal; }