/* A continuous felt table; all primary playing controls stay inside the viewport. */
html.on-thirteen-table, html.on-thirteen-table body { overflow:hidden; overscroll-behavior:none; background:#061e1b; }
.tw-scene {
  --felt:#246b58; --felt-edge:#123e35; --gold:#e7c478; --tw-card-width:42px; --tw-hand-card:48px;
  width:100%; max-width:600px; height:100dvh; min-height:0; margin:0 auto; padding:env(safe-area-inset-top) 0 env(safe-area-inset-bottom);
  display:flex; flex-direction:column; position:relative; isolation:isolate; overflow:hidden;
  color:#e5f0e7; font-family:system-ui,-apple-system,"PingFang SC",sans-serif;
  background:radial-gradient(ellipse at 50% 38%,var(--felt),var(--felt-edge) 100%);
  box-shadow:0 0 80px #0006;
}
.tw-scene::before { content:""; position:absolute; inset:0; z-index:-1; pointer-events:none; opacity:.12; background:repeating-linear-gradient(33deg,#dce9cc15 0 1px,transparent 1px 3px),repeating-linear-gradient(125deg,#0002 0 1px,transparent 1px 4px); }
[data-table-felt="blue"] .tw-scene { --felt:#276881; --felt-edge:#123847; }
[data-table-felt="charcoal"] .tw-scene { --felt:#515d5c; --felt-edge:#252f30; }
[data-table-felt="plum"] .tw-scene { --felt:#70476c; --felt-edge:#392836; }
.tw-scene button { cursor:pointer; font-family:inherit; }
.tw-scene button:disabled { cursor:default; opacity:.42; }
.tw-scene .tw-header { position:relative; top:auto; z-index:4; display:flex; flex:none; align-items:center; height:50px; min-height:50px; margin:0; padding:0 8px; gap:5px; background:#071e20ba; border-bottom:1px solid #b5d6be1a; }
.tw-scene .tw-tool { display:grid; place-items:center; flex:none; width:34px; height:38px; padding:6px; border:0; border-radius:6px; color:var(--gold); background:transparent; }
.tw-scene .tw-tool svg { width:21px; height:21px; stroke-width:1.6; }
.tw-scene .tw-title { display:grid; flex:1; min-width:0; gap:3px; }
.tw-scene .tw-title b { font-size:14px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tw-scene .tw-title span { font-size:10px; color:#a5beb1; }
.tw-scene .tw-rule-bar { height:30px; min-height:30px; flex:none; display:flex; align-items:center; gap:5px; padding:0 12px; margin:0; border:0; font-size:10px; }
.tw-scene .tw-rule-bar > button { display:flex; align-items:center; gap:2px; padding:0; min-width:0; border:0; background:none; color:#c3d3bc; font-size:10px; }
.tw-scene .tw-rule-bar > button svg { width:12px; height:12px; }
.tw-scene .tw-connection { display:block; margin-left:auto; color:#bdc8ac; font-size:9px; white-space:nowrap; }
.tw-scene .tw-connection.connected { color:#91c6a8; }
.tw-scene .spectators-button { margin:0 0 0 3px; padding:4px 5px; min-height:24px; background:#0c342c66; font-size:10px; }
.tw-scene .spectators-button svg { width:13px; height:13px; }
.tw-felt-stage { position:relative; min-height:132px; flex:1; margin:0 8px; }
.tw-felt-boundary { position:absolute; inset:7% 5% 5%; border:1px solid #b9cfaa18; border-radius:40% / 18%; pointer-events:none; }
.tw-scene .tw-opponents { position:absolute; inset:0; display:block; padding:0; }
.tw-scene .tw-table-seat { position:absolute; left:var(--seat-x); top:clamp(44px,var(--seat-y),calc(100% - 44px)); transform:translate(-50%,-50%); display:flex; flex-direction:column; align-items:center; width:68px; padding:0; margin:0; border:0; border-radius:0; background:none; font-size:11px; }
.tw-seat-name { font-size:10px; max-width:100%; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; color:#deebe0; margin-bottom:3px; }
.tw-seat-portrait { position:relative; width:38px; height:38px; border:1px solid #cece9277; border-radius:6px; background:#154037; display:grid; place-items:center; box-shadow:0 3px 10px #08271f55; }
.tw-seat-portrait img,.tw-seat-portrait .avatar-fallback { width:100%; height:100%; object-fit:cover; border-radius:5px; display:grid; place-items:center; color:#d9e4c9; }
.tw-scene .tw-table-seat > strong { font-size:12px; font-weight:600; color:#f0d48f; margin-top:2px; line-height:16px; font-variant-numeric:tabular-nums; }
.tw-seat-state { font-size:9px; line-height:14px; color:#a9c9b8; white-space:nowrap; }
.tw-scene .tw-online { width:6px; height:6px; bottom:2px; right:2px; }
.tw-owner { position:absolute; top:-3px; right:-13px; padding:1px 3px; font-size:8px; background:#d3b26e; color:#213e31; border-radius:2px; }
.tw-locked-badge { position:absolute; top:18px; right:4px; border-radius:50%; background:#a8d5a7; color:#184631; width:16px; height:16px; display:grid; place-items:center; border:2px solid var(--felt-edge); font-size:10px; }
.tw-scene .tw-table-seat.is-submitted .tw-seat-portrait { border-color:#99d4aa; }
.tw-scene .tw-empty-seat { width:49px; height:58px; justify-content:center; gap:4px; border:1px solid #c4d6bf66; border-radius:6px; color:#c7e0d4; background:#0c3a2e25; }
.tw-empty-seat span { font-size:14px; }.tw-empty-seat small { font-size:8px; opacity:.65; }
.tw-scene .tw-empty-seat:disabled { opacity:.58; }
.tw-table-center { position:absolute; left:50%; top:55%; width:54%; transform:translate(-50%,-50%); text-align:center; pointer-events:none; }
.tw-table-center button { pointer-events:auto; }
.tw-table-brand { position:relative; display:grid; justify-content:center; gap:0; color:#0b392d; opacity:.8; text-shadow:0 1px #95c4a321; }
.tw-table-brand > span { font:44px/1 Georgia,serif; color:inherit; }
.tw-table-brand > b { font-size:28px; line-height:1.2; letter-spacing:4px; font-weight:750; }
.tw-table-brand > small { font-size:8px; letter-spacing:2px; margin-top:5px; }
.tw-table-round { font-size:10px; color:#aad1b887; margin:10px 0 0; }
.tw-scene .tw-waiting { min-height:0; gap:12px; margin-top:16px; }
.tw-scene .tw-waiting > span { font-size:11px; }
.tw-gold-button,.tw-scene .tw-actions .tw-submit { color:#503c19; background:linear-gradient(#f5d991,#dfb45e); border:1px solid #f8e1a7; box-shadow:inset 0 0 0 2px #d7b36a,0 2px 4px #062c2766; font-weight:650; }
.tw-gold-button { min-height:36px; padding:7px 23px; border-radius:5px; font-size:12px; }
.tw-stage-status { margin-top:9px; color:#bcd7c7; font-size:10px; }
.tw-scene[data-phase="arranging"] .tw-table-center,.tw-scene[data-phase="submitted"] .tw-table-center,.tw-scene[data-phase="settled"] .tw-table-center { top:62%; }
.tw-scene[data-phase="arranging"] .tw-table-brand > span,.tw-scene[data-phase="submitted"] .tw-table-brand > span,.tw-scene[data-phase="settled"] .tw-table-brand > span { display:none; }
.tw-scene[data-phase="arranging"] .tw-table-brand > b,.tw-scene[data-phase="submitted"] .tw-table-brand > b,.tw-scene[data-phase="settled"] .tw-table-brand > b { font-size:23px; }
.tw-scene[data-phase="arranging"] .tw-table-brand > small,.tw-scene[data-phase="submitted"] .tw-table-brand > small,.tw-scene[data-phase="settled"] .tw-table-brand > small { display:none; }
.tw-scene .tw-watching-progress { display:grid; gap:7px; min-height:0; margin-top:18px; color:#d7e8d9; }
.tw-scene .tw-watching-progress b { font-size:13px; color:#ead397; }.tw-scene .tw-watching-progress span { font-size:12px; }.tw-scene .tw-watching-progress small { font-size:9px; }.tw-scene .tw-watching-progress i { font-style:normal; font-size:12px; }
.tw-workspace { position:relative; flex:none; padding:0 12px 9px; border-top:1px solid #bfcb9a35; background:linear-gradient(#0c352d4d,#071f1b99); min-height:0; }
.tw-scene .tw-self-banner { height:44px; padding:4px 0; background:transparent; gap:8px; font-size:11px; }
.tw-scene .tw-self-avatar { width:30px; height:30px; border:1px solid #cab578; border-radius:5px; background:#1c5141; }
.tw-scene .tw-self-avatar img { border-radius:4px; }
.tw-scene .tw-self-banner b { font-size:11px; }.tw-scene .tw-self-banner small { font-size:9px; }.tw-scene .tw-self-banner strong { font-size:15px; }
.tw-scene .tw-self-banner > span:only-child { display:flex; align-items:center; gap:6px; color:#bad0bf; }
.tw-scene .tw-self-banner > span:only-child svg { width:15px; height:15px; }
.tw-scene .tw-table-area { border:0; padding:0; margin:0; }
.tw-scene .tw-arrange-status { align-items:center; padding:0 0 7px; font-size:11px; min-height:23px; }
.tw-scene .tw-arrange-status b { font-weight:500; color:#d4dfc8; }
.tw-scene .tw-arrange-status > span { display:flex; align-items:center; gap:4px; color:#ebd195; font-size:12px; }
.tw-scene .tw-arrange-status svg { width:13px; height:13px; }.tw-scene #tw-clock { font-style:normal; }
.tw-scene .tw-lanes { gap:5px; }
.tw-scene .tw-lane { grid-template-columns:36px minmax(0,1fr) 39px; gap:6px; min-height:0; padding:4px 6px; border:1px solid #b2c7a328; border-radius:6px; background:#0a33273d; }
.tw-scene .tw-lane.selected { border-color:#d2b77599; background:#c1ad6130; box-shadow:inset 3px 0 #e6c77f; }
.tw-scene .tw-lane-label { height:calc(var(--tw-card-width) * 1.42); width:100%; justify-items:center; gap:3px; color:#d9dabb; }
.tw-scene .tw-lane-label b { font-size:12px; }.tw-scene .tw-lane-label small { font-size:9px; }
.tw-scene .tw-lane-cards { gap:4px; }
.tw-scene .tw-lane-end { display:grid; justify-items:center; align-content:center; gap:4px; }
.tw-scene .tw-hand-name { text-align:center; font-size:9px; color:#c9c99e; }
.tw-scene .tw-lane-end button { display:grid; place-items:center; width:30px; height:26px; background:none; border:0; border-radius:4px; color:#bfcfb8; padding:4px; }
.tw-scene .tw-lane-end svg { width:13px; height:13px; }
.tw-scene .tw-card-slot { background:#072d292d; border:1px dashed #cad8b738; }
.tw-scene .tw-card-button { margin:0; touch-action:manipulation; }
.tw-scene .tw-card-button:disabled { opacity:1; }
.tw-scene .playing-card { --tw-card-width:inherit; box-shadow:0 2px 3px #001b2266; }
.tw-scene .card-face { background:linear-gradient(120deg,#fffef6,#eaece0); padding:4px; }
.tw-scene .card-rank { font:bold 19px/1 Georgia,serif; }
.tw-scene .card-face > small { display:block; font-size:13px; margin-top:2px; }
.tw-scene .card-pip { left:auto; right:3px; bottom:3px; transform:none; font-size:20px; }
.tw-scene .tw-validity { padding:5px 0 3px; min-height:22px; font-size:10px; line-height:14px; color:#aecaba; }
.tw-scene .tw-validity.invalid { color:#ffd0b9; }
.tw-scene .tw-hand-dock { padding:0; margin:0; background:none; }
.tw-scene .tw-hand-toolbar { min-height:27px; height:27px; padding:0 0 3px; font-size:10px; }
.tw-scene .tw-hand-toolbar > div { gap:6px; }.tw-scene .tw-hand-toolbar button { padding:0 5px; height:26px; min-height:26px; min-width:27px; font-size:10px; color:#d2ddc8; }
.tw-scene .tw-hand-toolbar svg { width:14px; height:14px; }
.tw-scene .tw-hand { --tw-card-width:var(--tw-hand-card); display:grid; gap:0; height:calc(var(--tw-hand-card) * 1.42 + 2px); min-height:0; padding:0; align-content:start; }
.tw-scene .tw-hand .tw-card-button { width:var(--tw-hand-card); max-width:none; justify-self:start; transition:transform .15s; }
.tw-scene .tw-hand .tw-card-button:hover:not(:disabled),.tw-scene .tw-hand .tw-card-button:focus-visible { transform:translateY(-6px); z-index:2; }
.tw-scene .tw-hand.is-empty { display:grid; grid-template-columns:1fr!important; place-items:center; border:1px dashed #b9c8ab22; border-radius:5px; }
.tw-hand-empty { color:#90b19e; font-size:11px; }
.tw-scene .tw-actions { padding:8px 0 0; gap:7px; }
.tw-scene .tw-actions > button { min-height:40px; padding:7px 5px; border-radius:5px; font-size:12px; font-weight:500; background:#183e32; border:1px solid #9bac805a; color:#e4d8ac; }
.tw-scene .tw-actions > button svg { width:16px; height:16px; }
.tw-scene .tw-special-submit { display:flex; align-items:center; justify-content:center; gap:5px; min-height:29px; margin-top:6px; padding:4px; color:#f1dd9e; background:#84732c52; border-color:#dbc88455; font-size:11px!important; }
.tw-scene .tw-special-submit svg { width:14px; height:14px; }
.tw-scene .tw-hand-toolbar .tw-special-submit { margin:0; min-height:25px; width:auto; padding:2px 6px; font-size:10px!important; flex:1; }
.tw-scene .tw-hand-toolbar:has(.tw-special-submit) > b { display:none; }
.tw-scene .tw-between { border:0; padding:0; }
.tw-scene .tw-between > span { min-height:15px; font-size:10px; line-height:15px; color:#adcbba; }
.tw-scene .tw-review { padding:4px 0; gap:3px 8px; align-items:center; font-size:10px; }
.tw-scene .tw-review small { display:none; }
.tw-scene.tw-spectating .tw-review { display:none; }
.tw-scene .tw-review button { padding:4px 10px; min-height:28px; font-size:11px; color:#ead6a4; border-color:#b6b27866; background:#204b3b; }
.tw-scene .tw-result-title { padding:2px 0 7px; }
.tw-scene .tw-result-title h2 { font-size:13px; color:#ead6a4; }
.tw-scene .tw-result-title > div { display:flex; gap:10px; }.tw-scene .tw-result-title button { padding:0; font-size:10px; color:#bfd0ba; min-height:26px; }.tw-scene .tw-result-title svg { width:15px; height:15px; }
.tw-result-tabs { display:flex; gap:4px; padding-bottom:8px; }
.tw-result-tab { flex:1; min-width:0; display:grid; gap:3px; border:1px solid #a1b79933; background:#0b302b; border-radius:5px; padding:5px 2px; color:#c6d6c6; text-align:center; }
.tw-result-tab span { max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:9px; }.tw-result-tab b { font-size:12px; }
.tw-result-tab.selected { border-color:#d1b878; background:#bdab6330; }
.tw-scene .tw-result-lanes { --tw-card-width:38px; gap:5px; }
.tw-scene .tw-result-lanes > div { gap:7px; }.tw-scene .tw-result-lanes > div > b { width:29px; font-size:11px; color:#d0d8bd; }.tw-scene .tw-result-lanes small { font-size:10px; color:#c7c998; }
.tw-scene .tw-result-cards { gap:4px; }.tw-scene .tw-result-cards .card-rank { font-size:16px; }.tw-scene .tw-result-cards .card-pip { font-size:17px; }
.tw-scene .tw-result-note { padding:4px 0; font-size:10px; color:#aeccbb; }
.tw-scene .tw-special-name { margin:0 0 5px; font-size:11px; }
.tw-scene .spectator-controls { border:0; background:transparent; margin:0; padding:7px 0 0; gap:7px; }
.tw-scene .spectator-controls b { font-size:11px; }.tw-scene .spectator-controls span { font-size:10px; }.tw-scene .spectator-actions button { min-height:36px; font-size:11px; border-radius:5px; }
.tw-scene .spectator-actions button:first-child { color:#4d3c1f; border-color:#e7c688; background:linear-gradient(#edcf8b,#cfa75e); }
.tw-scene .tw-social { flex:none; display:flex; align-items:center; gap:3px; height:46px; padding:4px 8px; margin:0; border-top:1px solid #d5b87b33; background:linear-gradient(#0a2b26dd,#09221eed); }
.tw-scene .tw-social .tw-tool { height:35px; width:35px; }
.tw-scene .tw-social .last-message { flex:1; min-width:0; background:transparent; border:0; color:#a5c3b0; font-size:10px; }
.hide-table-chat .tw-scene .last-message { visibility:hidden; }
.hide-hand-name .tw-scene .tw-hand-name { visibility:hidden; }
.four-color-cards .tw-scene .playing-card[data-suit="d"] { color:#216bc2; }.four-color-cards .tw-scene .playing-card[data-suit="c"] { color:#188146; }

/* Short phones keep the table, thirteen cards and submit button together. */
@media (max-height:740px) and (orientation:portrait) {
  .tw-scene { --tw-card-width:34px; --tw-hand-card:42px; }
  .tw-scene .tw-header { height:43px; min-height:43px; }
  .tw-scene .tw-rule-bar { height:25px; min-height:25px; }
  .tw-scene .tw-self-banner { height:35px; }
  .tw-scene .tw-self-avatar { width:27px; height:27px; }
  .tw-scene .tw-lane { padding:3px 5px; }.tw-scene .tw-lanes { gap:3px; }
  .tw-scene .tw-arrange-status { min-height:20px; padding-bottom:4px; }
  .tw-scene .tw-hand-toolbar { height:24px; min-height:24px; }
  .tw-scene .tw-actions { padding-top:6px; }.tw-scene .tw-actions > button { min-height:35px; padding:5px; font-size:11px; }
  .tw-scene .tw-social { height:39px; }
  .tw-scene .tw-workspace { padding:0 9px 7px; }
  .tw-scene .card-rank { font-size:17px; }.tw-scene .card-face > small { font-size:11px; }.tw-scene .card-pip { font-size:17px; }
  .tw-scene .tw-result-lanes { --tw-card-width:30px; gap:4px; }
  .tw-scene .tw-seat-portrait { width:29px; height:29px; }.tw-scene .tw-seat-name { font-size:9px; margin-bottom:1px; }.tw-scene .tw-seat-state { line-height:11px; font-size:8px; }.tw-scene .tw-table-seat > strong { font-size:10px; line-height:12px; margin-top:1px; }
  .tw-scene .tw-felt-stage { min-height:112px; }
  .tw-scene .tw-table-seat { top:clamp(33px,var(--seat-y),calc(100% - 33px)); }
  .tw-scene .tw-table-round { margin-top:4px; font-size:9px; }.tw-scene .tw-stage-status { margin-top:3px; font-size:9px; }
  .tw-scene[data-phase="arranging"] .tw-table-brand > b,.tw-scene[data-phase="submitted"] .tw-table-brand > b,.tw-scene[data-phase="settled"] .tw-table-brand > b { font-size:18px; }
}
@media (max-height:620px) and (orientation:portrait) {
  .tw-scene { --tw-card-width:28px; --tw-hand-card:36px; }
  .tw-scene .tw-felt-stage { min-height:128px; }
  .tw-scene .tw-self-banner { height:30px; }.tw-scene .tw-self-avatar { width:24px; height:24px; }
  .tw-scene .tw-arrange-status { min-height:18px; padding-bottom:2px; font-size:10px; }
  .tw-scene .tw-lane { padding:2px 5px; }.tw-scene .tw-validity { min-height:18px; padding:2px 0; font-size:9px; }
  .tw-scene .tw-hand-toolbar { height:22px; min-height:22px; }.tw-scene .tw-hand-toolbar button { height:22px; min-height:22px; }
  .tw-scene .tw-actions { padding-top:4px; }.tw-scene .tw-actions > button { min-height:32px; padding:4px; }
  .tw-scene .tw-workspace { padding-bottom:6px; }
  .tw-scene .tw-lane-end { gap:1px; }.tw-scene .tw-lane-end button { height:22px; }
  .tw-scene .tw-seat-portrait { width:26px; height:26px; }.tw-scene .tw-seat-name { margin-bottom:0; line-height:10px; }.tw-scene .tw-seat-state { line-height:10px; }.tw-scene .tw-table-seat > strong { margin-top:0; }
  .tw-scene.tw-spectating[data-phase="settled"] .tw-table-center { display:none; }
  .tw-scene[data-phase="arranging"] .tw-table-brand,.tw-scene[data-phase="submitted"] .tw-table-brand { display:none; }
  .tw-scene[data-phase="arranging"] .tw-table-round,.tw-scene[data-phase="submitted"] .tw-table-round { margin-top:0; }
}
@media (max-width:359px) {
  .tw-scene .tw-header { gap:1px; padding:0 5px; }.tw-scene .tw-title b { font-size:12px; }.tw-scene .tw-header .tw-tool { width:29px; }
  .tw-scene .tw-rule-bar { padding:0 7px; gap:3px; }.tw-scene .tw-connection { font-size:8px; }
  .tw-scene .tw-lane { grid-template-columns:30px minmax(0,1fr) 32px; gap:4px; }
  .tw-scene .tw-result-lanes { --tw-card-width:30px; }
}
@media (max-width:359px) and (min-height:621px) { .tw-scene { --tw-card-width:32px; --tw-hand-card:39px; } }
@media (max-height:620px) and (orientation:portrait) {
  .tw-scene .tw-result-lanes { --tw-card-width:24px; gap:3px; }
  .tw-scene .tw-result-title { padding:0 0 2px; }
  .tw-scene .tw-result-tabs { padding-bottom:4px; }
  .tw-scene .tw-result-tab { padding:3px 2px; gap:0; }
  .tw-scene .tw-result-note { padding:2px 0; line-height:13px; }
  .tw-scene .tw-result-cards .card-rank { font-size:13px; }.tw-scene .tw-result-cards .card-pip { font-size:14px; }
}
/* Wide screens retain a real table, with a dedicated hand area on the right. */
@media (min-width:760px) and (orientation:landscape) {
  .tw-scene { --tw-card-width:40px; --tw-hand-card:46px; max-width:1400px; display:grid; grid-template-columns:minmax(0,1fr) 420px; grid-template-rows:50px 30px minmax(0,1fr) 46px; }
  .tw-scene .tw-header { grid-column:1/-1; grid-row:1; }.tw-scene .tw-rule-bar { grid-column:1/-1; grid-row:2; }
  .tw-scene .tw-felt-stage { grid-column:1; grid-row:3; margin:0 15px 10px; min-height:0; }
  .tw-scene .tw-workspace { grid-column:2; grid-row:3; align-self:end; max-height:100%; overflow-y:auto; border-left:1px solid #c6c08733; border-top:1px solid #c6c08733; padding:0 12px 10px; }
  .tw-scene .tw-social { grid-column:1/-1; grid-row:4; }
  .tw-scene .tw-table-brand > b { font-size:40px!important; }.tw-scene .tw-table-brand > span { display:block!important; font-size:60px; }.tw-scene .tw-table-brand > small { display:block!important; font-size:11px; }
  .tw-scene .tw-seat-portrait { width:52px; height:52px; }.tw-scene .tw-table-seat { width:90px; }.tw-scene .tw-seat-name { font-size:12px; }.tw-scene .tw-table-seat > strong { font-size:15px; line-height:20px; }
}
@media (min-width:600px) and (orientation:landscape) and (max-height:600px) {
  .tw-scene { --tw-card-width:27px; --tw-hand-card:32px; max-width:none; display:grid; grid-template-columns:minmax(0,1fr) 370px; grid-template-rows:37px minmax(0,1fr) 34px; }
  .tw-scene .tw-header { grid-column:1/-1; grid-row:1; min-height:37px; height:37px; }
  .tw-scene .tw-rule-bar { grid-column:auto; grid-row:auto; position:absolute; left:0; top:37px; width:calc(100% - 370px); height:25px; z-index:4; }
  .tw-scene .tw-felt-stage { grid-column:1; grid-row:2; margin:28px 8px 0; min-height:0; }
  .tw-scene .tw-workspace { grid-column:2; grid-row:2; align-self:stretch; overflow-y:auto; padding:0 9px 5px; border-left:1px solid #c6c08733; border-top:0; }
  .tw-scene .tw-social { grid-column:1/-1; grid-row:3; height:34px; }
  .tw-scene .tw-self-banner { height:29px; }.tw-scene .tw-self-avatar { width:23px; height:23px; }.tw-scene .tw-self-banner strong { font-size:12px; }.tw-scene .tw-self-banner strong small { display:none; }
  .tw-scene .tw-arrange-status { min-height:18px; padding-bottom:3px; font-size:10px; }
  .tw-scene .tw-lanes { gap:3px; }.tw-scene .tw-lane { padding:2px 5px; grid-template-columns:32px minmax(0,1fr) 42px; }.tw-scene .tw-lane-label { height:38px; }
  .tw-scene .tw-lane-end { display:flex; flex-direction:column; gap:0; }.tw-scene .tw-lane-end button { height:21px; }
  .tw-scene .tw-validity { padding:2px 0; min-height:17px; font-size:9px; line-height:13px; }
  .tw-scene .tw-hand-toolbar { height:23px; min-height:23px; }.tw-scene .tw-hand-toolbar button { height:23px; min-height:23px; }
  .tw-scene .tw-actions { padding-top:5px; gap:5px; }.tw-scene .tw-actions > button { min-height:30px; padding:4px; font-size:10px; }
  .tw-scene .card-rank { font-size:14px; }.tw-scene .card-face { padding:2px; }.tw-scene .card-face > small { font-size:10px; margin-top:1px; }.tw-scene .card-pip { font-size:14px; right:2px; bottom:1px; }
  .tw-scene .tw-special-submit { min-height:24px; padding:2px; margin-top:4px; font-size:10px!important; }
  .tw-scene .tw-result-lanes { --tw-card-width:27px; gap:3px; }.tw-scene .tw-result-tabs { padding-bottom:4px; }.tw-scene .tw-result-tab { padding:3px; gap:1px; }
  .tw-scene .tw-result-title { padding:1px 0 3px; }.tw-scene .tw-result-note { padding:2px 0; }
  .tw-scene .tw-seat-portrait { width:36px; height:36px; }.tw-scene .tw-seat-name { font-size:10px; }.tw-scene .tw-table-seat { width:68px; }.tw-scene .tw-table-seat > strong { font-size:12px; line-height:15px; }
  .tw-scene .tw-table-brand > b { font-size:27px!important; }.tw-scene .tw-table-brand > span { font-size:36px!important; }
  .tw-scene .tw-table-brand > small { font-size:8px!important; }.tw-scene .tw-table-round { margin-top:6px; }
}
@media (max-height:550px) and (orientation:portrait) { .tw-scene .tw-workspace { overflow-y:auto; max-height:calc(100dvh - 210px); } }

/* The reveal uses the same felt and a compact card grid for three to six players. */
.tw-showdown { background:radial-gradient(ellipse at 50% 30%,#28684feF,#092d27fc); padding:14px; }
.tw-showdown-inner { max-width:820px; }
.tw-showdown .tw-reveal-players { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.tw-showdown .tw-reveal-player { min-width:0; padding:10px 7px; min-height:104px; border:1px solid #92b68c44; border-radius:7px; background:#092e2477; }
.tw-showdown .tw-reveal-identity { flex-direction:column; gap:4px; min-height:34px; font-size:11px; }
.tw-showdown .tw-reveal-identity b { max-width:100%; }
.tw-showdown .tw-reveal-cards { --tw-card-width:clamp(23px,6.5vw,48px); gap:3px; min-height:0; }
.tw-showdown .tw-reveal-cards .card-face { padding:3px; }.tw-showdown .tw-reveal-cards .card-rank { font-size:14px; }.tw-showdown .tw-reveal-cards .card-pip { font-size:16px; }
.tw-showdown .tw-special-reveal { font-size:16px; }
.tw-showdown .tw-showdown-title { font-size:22px; }
.tw-showdown .tw-event-banner { font-size:13px; min-height:37px; }
.tw-showdown .tw-reveal-player.speaking { border-color:#ebc875; box-shadow:0 0 0 1px #dfbe6c66; background:#53794b88; }
.tw-showdown .tw-reveal-player.shot-source { background:#8f753780; }.tw-showdown .tw-reveal-player.shot-target { background:#833b4890; }
@media(max-width:359px) { .tw-showdown { padding:10px; }.tw-showdown .tw-reveal-players { gap:6px; }.tw-showdown .tw-reveal-player { padding:7px 5px; min-height:98px; }.tw-showdown .tw-reveal-cards { --tw-card-width:23px; gap:2px; } }
@media(orientation:landscape) and (max-height:600px) { .tw-showdown-inner { max-width:900px; }.tw-showdown .tw-reveal-players { grid-template-columns:repeat(3,minmax(0,1fr)); }.tw-showdown .tw-reveal-player { padding:5px 7px; min-height:84px; }.tw-showdown .tw-reveal-cards { --tw-card-width:27px; }.tw-showdown .tw-event-banner { min-height:28px; padding:4px; }.tw-showdown .tw-continue { margin:5px 0; min-height:30px; padding:5px; } }

/* Keep the middle/tail swap beside the clear action without adding row height. */
.tw-scene .tw-lane:has([data-action="tw-swap"]) { grid-template-columns:36px minmax(0,1fr) 52px; }
.tw-scene .tw-lane-end:has([data-action="tw-swap"]) { display:grid; grid-template-columns:repeat(2,26px); gap:2px 0; }
.tw-scene .tw-lane-end:has([data-action="tw-swap"]) .tw-hand-name { grid-area:1 / 1 / 2 / 3; }
.tw-scene .tw-lane-end [data-action="tw-swap"] { grid-area:2 / 1; width:26px; }
.tw-scene .tw-lane-end:has([data-action="tw-swap"]) [data-action="tw-clear-lane"] { grid-area:2 / 2; width:26px; }

/* Selection occupies the existing hint row so small screens keep all controls. */
.tw-scene .tw-card-button { touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; }
.tw-scene .tw-card-button.is-selected .playing-card { outline:2px solid #f7d57f; outline-offset:-2px; filter:brightness(1.08); }
.tw-scene .tw-hand .tw-card-button.is-selected { transform:translateY(-6px); }
.tw-scene .tw-lane .tw-card-button.is-selected { transform:translateY(-2px); }
.tw-scene .tw-validity { display:flex; align-items:center; gap:5px; }
.tw-scene .tw-validity > span { flex:1; min-width:0; }
.tw-scene .tw-validity > button { flex:none; padding:0 4px; min-height:18px; border:0; border-radius:3px; font-size:10px; color:#f1d998; background:#294e3e; }
.tw-scene .tw-validity > button:disabled { opacity:.35; }
.tw-scene .tw-drop-target { outline:2px solid #f7d57f; outline-offset:-2px; background:#bcad6140; }
.tw-drag-ghost { position:fixed; z-index:10000; pointer-events:none; margin:0; padding:0; border:0; background:none; transform:rotate(6deg); opacity:.92; }
.tw-drag-ghost .playing-card { width:100%; height:100%; }
@media (max-width:359px) {
  .tw-scene .tw-validity { gap:3px; }
  .tw-scene .tw-validity > button { font-size:9px; padding:0 3px; }
}

/* Keep adjacent overlapped hand cards reachable after mouse hover or selection. */
.tw-scene .tw-hand .tw-card-button:hover:not(:disabled),.tw-scene .tw-hand .tw-card-button:focus-visible { z-index:auto; }