.room-page {
  --room-bg: #f3eee8;
  --room-surface: #fcf8f2;
  --room-soft: #f1e8df;
  --room-border: #dfcfc3;
  --room-ink: #2b1c1e;
  --room-muted: #6b5051;
  --room-accent: #8f2e38;
  --room-focus: #a43946;
  background: var(--room-bg);
  color: var(--room-ink);
}
.room-page .muted, .room-page .footer { color: var(--room-muted); }
.room-page .footer { border-color: var(--room-border); }
.room-page .panel { background: var(--room-surface); border-color: var(--room-border); }
.room-page .result-link { color: var(--room-accent); }
.room-page .secondary { background: var(--room-surface); color: var(--room-ink); border-color: var(--room-border); }
.room-page .secondary:hover { background: var(--room-soft); }
.room-page :is(a, button, input, summary):focus-visible { outline-color: var(--room-focus); }
.room-page .primary { background: #922e38; color: #fff8f0; }
.room-page .primary:hover { background: #79232e; }
.room-page .button { white-space: nowrap; }
.room-page .button:active { transform: translateY(1px); }
.room-page .button:disabled { cursor: not-allowed; }
.room-navline { display: flex; align-items: center; gap: 16px; font-size: 13px; color: var(--room-muted); }
.room-navline > span { padding-left: 16px; border-left: 1px solid var(--room-border); }
.room-header { display: flex; align-items: end; justify-content: space-between; gap: 20px; margin: 13px 0 22px; }
.room-header h1 { font-size: clamp(31px, 4vw, 48px); font-weight: 830; line-height: 1.18; letter-spacing: -.045em; }
.room-header p { margin-top: 7px; color: var(--room-muted); font-size: 14px; }
.room-facts { display: flex; gap: 0; margin: 0; }
.room-facts div { border-left: 1px solid var(--room-border); padding: 0 clamp(12px, 2vw, 24px); }
.room-facts div:last-child { padding-right: 0; }
.room-facts dt { color: var(--room-muted); font-size: 12px; white-space: nowrap; }
.room-facts dd { margin: 5px 0 0; font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.room-facts small { color: var(--room-muted); font-size: 13px; font-weight: 650; }
.room-workspace { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(280px, 1fr); gap: clamp(16px, 2.4vw, 27px); align-items: start; }
.room-main, .room-side { min-width: 0; }
.room-side { display: grid; gap: 15px; }

.draw-stage {
  --felt: #3a2024;
  --felt-line: #f2c38c33;
  --felt-gold: #f5ce9b;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #fff1df;
  border: 1px solid #6d4244;
  border-radius: 16px;
  background: radial-gradient(ellipse at 51% 34%, #75434a 0%, #4a282d 48%, var(--felt) 77%, #322025 100%);
}
.draw-stage::before {
  position: absolute;
  inset: 10px;
  z-index: -1;
  border: 1px solid var(--felt-line);
  border-radius: 12px;
  content: "";
  pointer-events: none;
}
.draw-stage::after {
  position: absolute;
  inset: 0;
  z-index: -2;
  opacity: .55;
  background: repeating-radial-gradient(ellipse at 49% 71%, transparent 0 40px, #f4c49317 41px 42px, transparent 43px 56px);
  mask-image: linear-gradient(transparent 4%, #222 86%);
  content: "";
  pointer-events: none;
}
.stage-rim { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 24px 26px 0; color: #f0cfb3; font-size: 13px; font-weight: 650; }
.stage-rim b { color: #fff5e8; font-size: 17px; font-variant-numeric: tabular-nums; }
.stage-body { position: relative; display: grid; align-items: center; min-height: 257px; padding: 16px 26px 28px; }
.stage-waiting, .stage-countdown, .stage-drawing { text-align: center; justify-items: center; gap: 9px; }
.stage-waiting { display: grid; }
.stage-waiting h2, .stage-drawing h2 { margin-top: 4px; font-size: clamp(22px, 3.2vw, 30px); letter-spacing: -.035em; }
.stage-waiting p, .stage-drawing p, .stage-countdown small, .winner-stage p { color: #f0cfb3; font-size: 14px; line-height: 1.6; }
.stage-waiting h2 + p { margin-top: 4px; }
.stage-seal {
  display: grid;
  place-items: center;
  width: 65px;
  height: 65px;
  border: 1px solid #f9ce9b;
  border-radius: 12px;
  color: #52292a;
  background: linear-gradient(145deg, #ffe4b9, #da9c61);
  box-shadow: inset 0 0 0 5px #9c5d452b, 0 7px 0 #6a3835;
  transform: rotate(-8deg);
  font-size: 31px;
  font-weight: 800;
}
.stage-countdown, .stage-drawing { display: none; }
.draw-stage[data-phase="countdown"] .stage-countdown,
.draw-stage[data-phase="drawing"] .stage-drawing { display: grid; }
.stage-countdown p { color: var(--felt-gold); font-weight: 750; letter-spacing: .12em; }
.stage-countdown strong {
  display: grid;
  place-items: center;
  width: 118px;
  height: 118px;
  margin-block: 2px;
  border: 1px solid #f5ce9b66;
  border-radius: 50%;
  box-shadow: inset 0 0 0 7px #f5ce9b13, 0 0 0 8px #f5ce9b0b;
  color: #fff1d8;
  font-size: 75px;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stage-countdown strong span { display: block; }
.packet-deck { position: relative; width: 200px; height: 111px; }
.draw-packet {
  position: absolute;
  display: grid;
  justify-items: center;
  top: 2px;
  left: calc(50% - 32px);
  width: 64px;
  height: 92px;
  border: 1px solid #f4ba8c;
  border-radius: 11px;
  background: linear-gradient(155deg, #c05d63, #983542 57%, #6d2633);
  box-shadow: 0 5px 12px #30191d70, inset 0 0 0 3px #f6bc8d25;
  transform: translateX(var(--packet-x)) rotate(var(--packet-turn));
  font-style: normal;
}
.draw-packet::before {
  width: 100%;
  height: 36px;
  border-bottom: 1px solid #f8c18ca1;
  border-radius: 0 0 48% 48%;
  background: #e2947f2b;
  content: "";
}
.draw-packet span {
  position: absolute;
  top: 27px;
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  color: #5a2e32;
  background: #ffd29a;
  font-size: 14px;
  font-weight: 800;
}
.draw-packet:nth-child(1) { --packet-x: -46px; --packet-turn: -15deg; --swap-x: 48px; --swap-turn: 17deg; }
.draw-packet:nth-child(2) { --packet-x: 46px; --packet-turn: 15deg; --swap-x: -52px; --swap-turn: -17deg; }
.draw-packet:nth-child(3) { --packet-x: 0px; --packet-turn: 0deg; --swap-x: 8px; --swap-turn: 6deg; }

.winner-stage { position: relative; z-index: 1; display: grid; gap: 13px; }
.winner-title { display: flex; align-items: end; justify-content: space-between; gap: 10px; }
.winner-title h2 { font-size: clamp(25px, 3vw, 34px); letter-spacing: -.04em; }
.winner-title > span { color: var(--felt-gold); font-size: 13px; font-weight: 750; padding-bottom: 4px; white-space: nowrap; }
.winner-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(106px, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
.winner-grid > :only-child { grid-column: 1 / -1; width: min(100%, 22rem); justify-self: center; }
.winner-card { display: grid; gap: 5px; justify-items: start; min-width: 0; padding: 10px 11px; border: 1px solid #f8c18c69; border-radius: 10px; background: #321b1f9e; }
.winner-card.winner-self { border-color: #ffcf8a; background: #643641; }
.winner-seal { display: grid; place-items: center; width: 27px; height: 27px; border-radius: 7px; color: #57282e; background: var(--felt-gold); font-size: 14px; font-weight: 850; }
.winner-card strong { max-width: 100%; overflow-wrap: anywhere; font-size: 13px; }
.winner-card b { color: #ffdaab; font-size: clamp(17px, 2vw, 22px); font-variant-numeric: tabular-nums; }
.winner-card small { font-size: 12px; }
.stage-links { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 16px; }
.stage-link { color: #fce0ba; font-size: 13px; text-underline-offset: 4px; }
.stage-link:hover { text-decoration: underline; }
.stage-replay { min-height: 36px; padding: 5px 12px; border: 1px solid #f8c18c85; border-radius: 7px; background: #321b1f6b; }
.stage-replay:hover { background: #321b1f; text-decoration: none; }
.draw-stage .stage-link:focus-visible { outline-color: var(--felt-gold); }
.result-replay { margin-bottom: 16px; }
.packet-delivery, .packet-outcome {
  display: grid;
  min-height: 234px;
  align-content: center;
  justify-items: center;
  gap: 12px;
  text-align: center;
}
.packet-delivery h2, .packet-outcome h2 { font-size: clamp(22px, 3.5vw, 31px); }
.packet-delivery p, .packet-outcome p { color: #f0cfb3; font-size: 14px; }
.packet-outcome { gap: 20px; }
.packet-outcome strong { color: #ffdaab; font-size: clamp(30px, 6vw, 48px); font-variant-numeric: tabular-nums; }
.packet-outcome .stage-link { display: inline-flex; min-height: 44px; align-items: center; gap: 4px; }
.player-envelope {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  width: 128px;
  height: 150px;
  border: 1px solid #f8bc81;
  border-radius: 12px;
  background: linear-gradient(150deg, #c1433d, #a5252e 65%, #832332);
  box-shadow: 0 12px 26px #201017a6;
  perspective: 400px;
}
.player-envelope::before {
  position: absolute;
  z-index: -1;
  inset: 0 0 42%;
  border-radius: 11px 11px 50% 50%;
  border-bottom: 1px solid #f8bc81;
  background: linear-gradient(155deg, #ed7860, #bf3d37 82%);
  transform-origin: top;
  content: "";
}
.packet-seal {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  margin-top: 22px;
  padding: 0;
  border: 2px solid #ffe4ae;
  border-radius: 50%;
  background: linear-gradient(155deg, #ffe4a4, #e6a24e);
  box-shadow: inset 0 0 0 2px #8c411c45, 0 4px 12px #61242c80;
  color: #662a20;
  font-size: 28px;
  font-weight: 850;
}
button.packet-seal:hover { background: #ffe5ae; }
button.packet-seal:focus-visible { outline: 3px solid #fff1cf; outline-offset: 4px; }
.packet-opening { display: none; position: absolute; z-index: 2; inset: 0; place-items: center; pointer-events: none; }
.reveal-ticket { display: none; position: absolute; z-index: 2; inset: 0 0 40px; place-items: center; pointer-events: none; }
.reveal-ticket::before { position: absolute; inset: 0; background: radial-gradient(ellipse at center, #df996464, transparent 63%); content: ""; }
.reveal-packet {
  position: relative;
  width: 144px;
  height: 104px;
  border: 1px solid #ffd19a;
  border-radius: 10px;
  background: #a63441;
  box-shadow: 0 12px 28px #281215a6;
  perspective: 300px;
}
.reveal-packet::before, .reveal-packet::after { position: absolute; inset: 0; border-radius: inherit; content: ""; }
.reveal-packet::before { z-index: 2; background: linear-gradient(135deg, #bb3d48, #7d2030); clip-path: polygon(0 26%, 50% 67%, 100% 26%, 100% 100%, 0 100%); }
.reveal-packet::after { z-index: 3; height: 68%; transform-origin: top; background: linear-gradient(150deg, #f78577, #b42d3d 80%); clip-path: polygon(0 0, 100% 0, 100% 46%, 50% 100%, 0 46%); }
.reveal-slip { position: absolute; z-index: 1; inset: 13px 12px; display: grid; place-items: center; border: 1px solid #f5ce9b; border-radius: 6px; background: #ffdfad; color: #6b2733; font-size: 25px; font-weight: 800; letter-spacing: .14em; }
.reveal-stamp { position: absolute; z-index: 4; top: 48%; left: calc(50% - 15px); display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #ffd59b; color: #732f39; font-size: 16px; font-weight: 800; }
.draw-confetti { position: absolute; z-index: 3; inset: 0; pointer-events: none; }
.draw-confetti i { position: absolute; left: 50%; top: 46%; width: 11px; height: 6px; border-radius: 2px; background: #f9c983; opacity: 0; }
.draw-confetti i:nth-child(1) { --x: -238px; --y: -102px; --turn: -135deg; }
.draw-confetti i:nth-child(2) { --x: -152px; --y: -130px; --turn: -50deg; }
.draw-confetti i:nth-child(3) { --x: -69px; --y: -111px; --turn: 124deg; }
.draw-confetti i:nth-child(4) { --x: 65px; --y: -135px; --turn: 62deg; }
.draw-confetti i:nth-child(5) { --x: 142px; --y: -111px; --turn: -78deg; }
.draw-confetti i:nth-child(6) { --x: 233px; --y: -98px; --turn: 113deg; }
.draw-confetti i:nth-child(7) { --x: -190px; --y: 70px; --turn: -42deg; }
.draw-confetti i:nth-child(8) { --x: 190px; --y: 66px; --turn: 67deg; }

.table-roster { margin-top: 15px; }
.table-roster h2 { font-size: 15px; margin-bottom: 8px; }
.table-roster ol { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px 8px; margin: 0; padding: 0; list-style: none; }
.table-seat { display: flex; align-items: center; gap: 7px; min-width: 0; padding: 8px 7px; border: 1px solid transparent; border-radius: 9px; }
.table-seat.your-seat { background: var(--room-surface); border-color: var(--room-border); }
.table-seat.vacant { color: var(--room-muted); }
.table-seat > div { min-width: 0; }
.table-seat strong, .table-seat small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.table-seat strong { font-size: 13px; }
.table-seat small { margin-top: 3px; color: var(--room-muted); font-size: 11px; }
.table-avatar { display: grid; place-items: center; flex: 0 0 29px; height: 29px; border: 1px solid var(--room-border); border-radius: 8px; background: var(--room-soft); color: var(--room-accent); font-size: 13px; font-weight: 800; }
.table-seat.vacant .table-avatar { background: transparent; color: var(--room-muted); border-style: dashed; }
.table-actions { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; margin-top: 8px; padding: 12px 0; border-top: 1px solid var(--room-border); }
.table-actions b { font-size: 19px; font-variant-numeric: tabular-nums; }
.table-actions p, .table-actions small { color: var(--room-muted); font-size: 12px; }
.table-actions p { margin-top: 4px; }
.table-actions .page-actions:not(:empty) { margin: 0; }
.table-switch, .room-reveal-badge { display: none; }
.table-status { align-self: center; color: var(--room-muted); font-size: 14px; font-weight: 700; }
.table-actions .packet-table-status { display: none; }
.room-view:has(.draw-stage[data-phase="packet"]) :is(.table-actions [data-action="ready"], .room-history) { display: none; }
.room-view:has(.draw-stage[data-phase="packet"]) .table-balance b { visibility: hidden; }
.room-view:has(.draw-stage[data-phase="packet"]) .packet-table-status { display: block; }
.room-history, .room-rules, .room-invite { padding: 12px 0; border-top: 1px solid var(--room-border); }
.room-view summary { cursor: pointer; color: var(--room-ink); font-size: 14px; font-weight: 750; }
.room-history[open] > .result-link { display: inline-block; margin-top: 8px; }
.room-view .record-list li { border-color: var(--room-border); }
.room-view .record-list small { color: var(--room-muted); }
.room-rules p { margin-top: 9px; color: var(--room-muted); font-size: 14px; line-height: 1.6; }
.room-invite { margin-bottom: 10px; }
.room-invite .invite-share { padding: 12px 0 0; margin: 0; }
.room-empty { display: grid; justify-items: start; gap: 12px; max-width: 580px; }

.room-chat { padding: 17px; }
.room-chat .result-heading { align-items: center; margin-bottom: 12px; }
.room-chat .result-heading h2 { margin: 0; }
.room-chat .tag { color: var(--room-accent); background: var(--room-soft); }
.chat-log { height: clamp(310px, 44vh, 480px); overflow-y: auto; overflow-wrap: anywhere; padding: 9px; border: 1px solid var(--room-border); border-radius: 10px; background: var(--room-bg); }
.chat-log .empty { padding: 10px 5px; color: var(--room-muted); }
.chat-message { margin-bottom: 8px; padding: 9px 10px; border-radius: 9px; background: var(--room-surface); }
.chat-message:last-child { margin-bottom: 0; }
.chat-message.own-message { background: var(--room-soft); }
.chat-message p { margin-top: 4px; font-size: 16px; line-height: 1.5; }
.chat-meta { display: flex; justify-content: space-between; gap: 8px; color: var(--room-muted); font-size: 13px; }
.chat-input-label { margin: 10px 0 5px; color: var(--room-muted); font-size: 13px; }
.chat-compose { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
.room-view input { background: var(--room-surface); border-color: var(--room-border); color: var(--room-ink); }
.room-view input::placeholder { color: var(--room-muted); }
.room-view .form-feedback { color: var(--room-accent); }
.chat-compose input, .chat-compose button { min-height: 47px; }
.chat-limit { margin-top: 8px; font-size: 12px; }

@media (prefers-reduced-motion: no-preference) {
  .stage-countdown strong span { animation: count-in .38s cubic-bezier(.18, .78, .3, 1) both; }
  .draw-stage[data-phase="drawing"] .draw-packet { animation: deal-packet 1s cubic-bezier(.52, .12, .34, .96) 3 both; }
  .draw-stage[data-phase="drawing"] .draw-packet:nth-child(2) { animation-delay: 55ms; }
  .draw-stage[data-phase="drawing"] .draw-packet:nth-child(3) { animation-delay: 120ms; }
  .packet-delivery .player-envelope { animation: winner-in .28s ease-out both; }
  .packet-opening { display: grid; animation: packet-dismiss .6s ease-in both; }
  .packet-opening .player-envelope::before { animation: open-flap .42s ease-in-out both; }
  .packet-opening .packet-seal { animation: break-stamp .28s ease-out both; }
  .packet-opening ~ .packet-outcome { animation: winner-in .35s .34s ease-out both; }
  .packet-confetti i { animation: scatter-seal .86s .31s ease-out both; }
  .is-revealing .reveal-ticket { display: grid; animation: reveal-ticket 1.7s ease-out both; }
  .is-revealing .reveal-packet::after { animation: open-flap .58s .42s ease-in-out both; }
  .is-revealing .reveal-slip { animation: lift-slip .62s .59s cubic-bezier(.2, .8, .3, 1) both; }
  .is-revealing .reveal-stamp { animation: break-stamp .29s .42s ease-out both; }
  .is-revealing .winner-title { animation: winner-in .47s 1.04s ease-out both; }
  .is-revealing .winner-card { animation: winner-in .72s 1.24s cubic-bezier(.2, .82, .24, 1) both; }
  .is-revealing .winner-card:nth-child(2) { animation-delay: 1.58s; }
  .is-revealing .winner-card:nth-child(3) { animation-delay: 1.92s; }
  .is-revealing .winner-card:nth-child(4) { animation-delay: 2.26s; }
  .is-revealing .draw-confetti i { animation: scatter-seal 1.12s .73s ease-out both; }
  @keyframes count-in {
    from { transform: scale(.72); opacity: .3; }
    to { transform: scale(1); opacity: 1; }
  }
  @keyframes deal-packet {
    0%, 100% { transform: translateX(var(--packet-x)) rotate(var(--packet-turn)); }
    41% { transform: translate(var(--swap-x), -12px) rotate(var(--swap-turn)); }
    70% { transform: translateY(8px) scale(.94) rotate(0); }
  }
  @keyframes packet-dismiss {
    0% { transform: scale(1); opacity: 1; }
    44% { transform: scale(1.05); opacity: 1; }
    100% { transform: translateY(-18px) scale(.92); opacity: 0; visibility: hidden; }
  }
  @keyframes reveal-ticket {
    0% { transform: translateY(16px) scale(.85); opacity: 0; }
    18%, 72% { transform: translateY(0) scale(1); opacity: 1; }
    100% { transform: translateY(-12px) scale(1.08); opacity: 0; }
  }
  @keyframes open-flap {
    from { transform: rotateX(0); z-index: 3; }
    to { transform: rotateX(176deg); z-index: 0; }
  }
  @keyframes lift-slip {
    from { transform: translateY(0); }
    to { transform: translateY(-53px); }
  }
  @keyframes break-stamp {
    from { transform: scale(1); opacity: 1; }
    to { transform: scale(1.6); opacity: 0; }
  }
  @keyframes winner-in {
    from { transform: translateY(23px) scale(.92); opacity: 0; }
    to { transform: translateY(0) scale(1); opacity: 1; }
  }
  @keyframes scatter-seal {
    0% { transform: translate(0, 0) rotate(0); opacity: 0; }
    20% { opacity: .92; }
    100% { transform: translate(calc(var(--x) * var(--scatter-scale, 1)), var(--y)) rotate(var(--turn)); opacity: 0; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .draw-stage .stage-links .stage-replay { display: none; }
}

@media (prefers-color-scheme: dark) {
  .room-page {
    color-scheme: dark;
    --room-bg: #261d21;
    --room-surface: #31252a;
    --room-soft: #422e37;
    --room-border: #644c55;
    --room-ink: #f8e8df;
    --room-muted: #dcc1bd;
    --room-accent: #f7b4b8;
    --room-focus: #ffadac;
  }
  .room-page .primary { background: #ed9da4; color: #351b20; }
  .room-page .primary:hover { background: #f6b6bc; }
}
@media (max-width: 760px), (max-width: 960px) and (max-height: 500px) {
  .room-active { --dock-space: 116px; }
  .room-active.keyboard-open { --dock-space: 0px; }
  .room-active .player-nav, .keyboard-open .table-actions { display: none; }
  .room-active #app { padding-top: 6px; }
  .room-view { scroll-margin-top: 6px; }
  .room-navline .result-link { display: inline-flex; align-items: center; min-height: 44px; }
  .room-workspace { grid-template-columns: minmax(0, 1fr); gap: 5px; }
  .room-header { align-items: start; flex-direction: column; gap: 8px; margin: 1px 0 12px; }
  .room-header h1 { font-size: 29px; }
  .room-header p { margin-top: 3px; font-size: 13px; }
  .room-facts div { display: flex; align-items: baseline; gap: 5px; padding-inline: 9px; }
  .room-facts div:first-child { padding-left: 0; border-left: 0; }
  .room-facts dd { margin: 0; font-size: 15px; }
  .room-facts small { font-size: 11px; }
  .draw-stage { --scatter-scale: .55; }
  .stage-rim { padding: 15px 16px 0; }
  .stage-body { min-height: 182px; padding: 12px 16px 16px; }
  .stage-seal { width: 48px; height: 48px; font-size: 25px; }
  .stage-countdown strong { width: 90px; height: 90px; font-size: 62px; }
  .stage-links .stage-link { display: inline-flex; align-items: center; min-height: 44px; }
  .table-roster { margin-top: 12px; }
  .table-roster ol { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3px 5px; }
  .table-seat { min-height: 42px; padding: 5px 6px; }
  .table-seat strong { white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
  .table-seat small { margin-top: 2px; }
  .room-view summary { min-height: 44px; padding-block: 11px; line-height: 22px; }
  .room-history, .room-rules, .room-invite { padding-block: 0; }
  .room-history[open], .room-rules[open] { padding-bottom: 10px; }
  .room-invite .invite-share { padding: 0 0 10px; }
  .room-invite .invite-share .button { width: 100%; }
  .table-actions {
    position: fixed;
    z-index: 8;
    inset: auto 0 0;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 5px 10px;
    margin: 0;
    padding: 6px var(--gutter-right) calc(8px + env(safe-area-inset-bottom)) var(--gutter-left);
    background: var(--room-surface);
    box-shadow: 0 -7px 18px #28171b12;
  }
  .table-actions b { display: block; font-size: 16px; overflow-wrap: anywhere; }
  .table-actions small { font-weight: 600; }
  .table-balance p { margin-top: 2px; font-size: 11px; }
  .table-switch { position: relative; isolation: isolate; display: grid; grid-template-columns: repeat(2, minmax(46px, 1fr)); align-items: center; gap: 3px; padding: 2px; border-radius: 10px; background: var(--room-soft); }
  .table-switch::before { position: absolute; inset: 2px auto 2px 2px; width: calc((100% - 7px) / 2); border: 1px solid var(--room-border); border-radius: 8px; background: var(--room-surface); content: ""; pointer-events: none; }
  .room-view[data-mobile-panel="chat"] .table-switch::before { transform: translateX(calc(100% + 3px)); }
  .table-switch button { position: relative; min-width: 46px; min-height: 44px; padding: 5px 8px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--room-ink); font-size: 14px; font-weight: 650; }
  .table-switch button[aria-pressed="true"] { color: var(--room-accent); }
  .room-view[data-mobile-panel="chat"]:has(.draw-stage[data-phase="packet"], [data-packet-unseen]) .room-reveal-badge { display: inline; color: var(--room-accent); font-size: 11px; }
  .table-actions .page-actions { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px; }
  .table-actions .button { padding-inline: 11px; }
  .table-status { padding: 6px 10px; border-radius: 8px; background: var(--room-soft); text-align: center; }
  .room-view[data-mobile-panel="table"] .room-chat,
  .room-view[data-mobile-panel="chat"] :is(.draw-stage, .table-roster, .room-history, .room-rules, .room-invite) { display: none; }
  .room-chat { padding: 13px; }
  .chat-log { height: clamp(120px, 38vh, 450px); height: clamp(120px, calc(100svh - 360px), 450px); overscroll-behavior-y: contain; }
  .keyboard-open .chat-log { height: clamp(100px, 23svh, 180px); }
  .chat-compose button { min-width: 64px; }
}

@media (prefers-reduced-motion: no-preference) {
  .table-switch::before { transition: transform 230ms cubic-bezier(.25, .75, .25, 1); }
  .table-switch button { transition: color 160ms ease; }
  .room-view details[open] > :not(summary) { animation: ui-appear 180ms ease-out; }
}

@media (prefers-reduced-motion: no-preference) and (max-width: 760px), (prefers-reduced-motion: no-preference) and (max-width: 960px) and (max-height: 500px) {
  .room-view[data-mobile-panel="table"] .draw-stage,
  .room-view[data-mobile-panel="chat"] .room-chat { animation: ui-appear 180ms ease-out; }
}

@media (max-width: 475px) {
  .winner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .winner-card { grid-template-columns: auto minmax(0, 1fr); gap: 3px 6px; padding: 7px; }
  .winner-seal { grid-row: span 2; width: 24px; height: 24px; align-self: center; }
  .winner-card strong, .winner-card b { grid-column: 2; }
  .winner-card b { font-size: 17px; }
}

@media (min-width: 560px) and (max-width: 960px) and (max-height: 500px) {
  .room-active { --dock-space: 64px; }
  .table-actions { grid-template-columns: minmax(90px, auto) auto minmax(0, 1fr); }
  .table-actions .page-actions { grid-column: 3; }
  .stage-body { min-height: 168px; }
}

.room-connection { margin: 8px 0; color: var(--room-muted); }
.round-commitment { margin: 8px 0; color: var(--room-muted); }
.round-commitment code { display: block; margin-top: 4px; overflow-wrap: anywhere; }
.chat-report { display: inline-flex; align-items: center; min-height: 32px; padding: 0 4px; color: var(--room-muted); font-size: 13px; }
button.chat-report { background: none; border: 0; text-decoration: underline; cursor: pointer; }