/* Spacious arcade table: normal document flow keeps every exposed tile visible. */
main{max-width:1580px;padding:28px 3vw 0}.layout{grid-template-columns:minmax(0,1fr) 220px;gap:24px}.table{height:auto;min-height:600px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-areas:'east north west' 'center center center' 'rivers rivers rivers' 'self self self';gap:24px;padding:24px;border:4px solid #676086;background:linear-gradient(145deg,#191c37,#101529);overflow:visible}.table:before{inset:7px}.opponent{position:static;transform:none;max-width:none;min-width:0;padding:12px;background:#17172d;border:1px solid #4a426a;text-align:center}.east{grid-area:east}.north{grid-area:north}.west{grid-area:west}.north .opponent-face{float:none;margin:0}.opponent-face .portrait,.north .opponent-face .portrait{width:44px}.opponent .player-title,.north .player-title{height:auto;justify-content:center;font-size:14px;margin:8px 0 12px;white-space:normal}.backs,.west .backs,.east .backs{max-width:none;flex-wrap:wrap;gap:3px;justify-content:center}.back{flex:0 0 9px;width:9px;height:15px;background:repeating-linear-gradient(45deg,#404c96 0 3px,#6878ba 3px 5px);border:1px solid #98a1e2;box-shadow:0 2px #111127}.opponent .melds{flex-wrap:wrap;gap:9px;margin:16px 0 0}.opponent .meld-group{gap:2px;flex-wrap:nowrap}.opponent .flower-tiles{gap:3px}.center{grid-area:center;position:static;transform:none;display:flex;align-items:center;justify-content:space-between;gap:18px;min-width:0;padding:14px 18px;border-top:1px solid #504577;border-bottom:1px solid #504577;text-align:left}.wind-rose{display:flex;gap:7px}.wind-rose span{display:none}.wind-rose b{font-size:23px;padding:4px 12px}.table-line{display:none}#wall-count{margin:0;font-size:14px}#last-discard{display:flex;align-items:center;gap:12px;min-height:0}.last-label{margin:0;max-width:110px;font-size:12px}.discards{grid-area:rivers;position:static;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;max-height:none;overflow:visible}.river{width:auto;max-width:none;display:flex;gap:4px;align-content:flex-start;min-height:160px;background:#0b102280;border:1px solid #373554;padding:10px}.river-label{font-size:12px;color:#d1c9e6;margin:0 0 9px;letter-spacing:1px}.self-label{grid-area:self;position:static;transform:none;text-align:center;font-size:13px;color:var(--cyan)}
.tile,.tile.small-tile,.opponent .meld-group .tile,.opponent .flower-tiles .tile,.river .tile,.hand .tile{width:48px;height:auto;aspect-ratio:32/44;min-height:0;flex:0 0 auto;padding:0;border:0;border-radius:0;background:#eee8d2;box-shadow:0 3px 0 #aaa1c3,0 5px 0 #4d426e;overflow:visible}.arcade-tile-art{display:block;width:100%;height:100%;aspect-ratio:32/44;pointer-events:none;shape-rendering:crispEdges}.tile.small-tile,.opponent .meld-group .tile,.opponent .flower-tiles .tile,.river .tile{width:30px}.opponent .meld-group .tile{width:27px}.tile:hover{background:#fff9de}.hand{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;align-items:flex-start;padding:16px 8px 12px;min-height:0}.hand .tile{width:54px;max-width:none}.hand .drawn{margin-left:12px}.hand .tile.selected{transform:translateY(-8px);outline:3px solid var(--gold);outline-offset:2px}.hand .tile.recommended{outline:3px solid var(--cyan)}.hand button:disabled{opacity:1}.rack{padding:20px;margin-top:26px;border:2px solid #54486f;border-top:3px solid var(--pink)}#melds{flex-wrap:wrap;gap:16px}#melds .tile{width:36px}.result-hand .tile{width:40px}.banter:empty{display:none}.banter+.rack{margin-top:24px}.compact-scores{gap:12px}.rack-heading{margin-bottom:12px}aside{position:sticky;top:15px}.score-row strong{font-size:13px}
@media(max-width:1100px){.layout{grid-template-columns:1fr}aside{display:none}.compact-scores{display:flex;flex-wrap:wrap}.table{min-height:0}.hand .tile{width:48px}}
@media(max-width:650px){main{padding:22px 12px 0}.table{padding:12px;gap:16px;border-width:3px;grid-template-columns:repeat(3,minmax(0,1fr))}.opponent{padding:8px 4px}.opponent-face .portrait,.north .opponent-face .portrait{width:36px}.opponent .player-title,.north .player-title{font-size:11px;gap:3px;margin:7px 0}.opponent .wind-badge{width:18px;height:18px;flex-shrink:0}.backs,.west .backs,.east .backs{gap:2px}.back{width:6px;flex-basis:6px;height:11px}.opponent .melds{gap:8px;margin-top:10px}.opponent .meld-group .tile,.opponent .flower-tiles .tile{width:18px}.center{padding:10px 0;gap:10px;flex-wrap:wrap}.wind-rose b{font-size:20px;padding:3px 8px}#wall-count{font-size:12px}#last-discard{gap:8px;margin-left:auto}.last-label{max-width:78px;font-size:11px}.discards{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.river{padding:8px;min-height:112px;gap:4px}.river .tile{width:27px}.river-label{font-size:11px}.rack{padding:14px 10px}.hand{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px 5px;padding:14px 2px}.hand .tile{width:100%;height:auto;aspect-ratio:32/44;max-width:48px;justify-self:center}.hand .drawn{margin-left:0;outline:2px solid #ff68b8;outline-offset:1px}.rack-heading{align-items:start}.rack-heading>div{flex-direction:column;align-items:start;gap:4px}.tile.small-tile{width:28px}.self-label{font-size:12px}#melds .tile{width:30px}.result-hand .tile{width:34px}.header-right{margin-left:0;width:100%;justify-content:flex-start;flex-wrap:wrap}.header-right #new-game{display:inline-block}.game-heading{gap:10px}.speed{gap:5px}.table .meld-group small{font-size:8px}}

/* Compact controls and table dialogue above the rival portraits. */
.top-menu{margin-left:auto;max-width:100%;text-align:right}
.top-menu summary{cursor:pointer;display:inline-block;padding:10px 16px;border:2px solid #665a87;background:#211c38;color:var(--gold);font:700 14px monospace;list-style:none}
.top-menu summary::-webkit-details-marker{display:none}
.top-menu summary:after{content:' +'}
.top-menu[open] summary:after{content:' −'}
.top-menu summary:focus-visible{outline:2px solid var(--cyan);outline-offset:4px}
.top-menu .header-right{margin:12px 0 0;justify-content:flex-end;flex-wrap:wrap}
header:has(.top-menu){height:auto;min-height:100px;align-items:flex-start;padding-top:20px;padding-bottom:20px}
#banter{margin:0 0 18px;min-height:0}
.initials-card #arcade-initials{margin-top:20px}
.initials-card .initials-status:empty{display:none}
@media(max-width:650px){header:has(.top-menu){min-height:0;gap:12px}.top-menu{flex:1}.top-menu[open]{flex-basis:100%}.top-menu .header-right{width:auto;gap:8px}.top-menu .header-right button{flex:1 1 auto}}

.rack-controls{display:flex;align-items:center;gap:8px;flex-shrink:0}.rack-controls button{font-size:14px;padding:8px 12px}.rack-heading{flex-wrap:wrap;gap:12px}@media(max-width:650px){.rack-controls{margin-left:auto;gap:6px}.rack-controls button{font-size:12px;padding:6px}}