:root{font-family:system-ui,sans-serif;color:#153e3b;background:#f3f1e9;font-size:16px}*{box-sizing:border-box}body{margin:0}header{background:#123d36;color:#fff;padding:26px max(20px,calc((100% - 1120px)/2));}header span{font-size:12px;letter-spacing:.16em;color:#c0d8ca}h1{margin:8px 0;font-size:34px}main{max-width:1160px;margin:auto;padding:18px}section,details{background:#fff;border:1px solid #d2dbd2;border-radius:14px;padding:18px;margin:14px 0}h2{font-size:21px;margin:0 0 12px}h3{font-size:17px}p{line-height:1.5}button,input{font:inherit;border-radius:8px;padding:11px 15px;margin:4px;border:1px solid #8ca89e}button{background:#205d50;color:white;cursor:pointer}button:disabled{opacity:.45;cursor:default}button.secondary{background:#fff;color:#205d50}button.danger{background:#963e36}input{max-width:100%;background:white;color:#153e3b}#error{color:#a02b25}#connection{font-size:13px;margin:0}.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.seat{background:#e5eee7;margin:0;min-width:0}.seat.active{border:2px solid #b78219;background:#fff1c2}.tag{font-size:13px}.rack{display:flex;flex-wrap:wrap;gap:5px;padding-top:16px;align-items:flex-end}.tile{background:#fffdf0;color:#135a51;border:1px solid #d5cfae;border-bottom:4px solid #b8bea9;border-radius:5px;min-width:40px;height:58px;padding:5px;margin:0;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;font-weight:700;font-size:20px}.tile small{font-size:10px;font-weight:400}.tile.new{transform:translateY(-20%)}.tile.selected{outline:3px solid #b58216}.tile:disabled{opacity:.7}.backs{letter-spacing:2px;color:#47786b;overflow-wrap:anywhere}.meld{display:inline-flex;gap:2px;margin:8px 10px 0 0;padding-top:6px}.claimed{transform:translateY(-10%)}.river .tile{min-width:30px;height:42px;font-size:15px}.muted{color:#61736d}.actions{background:#fff4ce}table{width:100%;border-collapse:collapse}td,th{padding:8px;text-align:left;border-bottom:1px solid #d8dfd8}.invite{width:min(100%,700px)}footer{font-size:13px;padding:20px 0}a{color:#246d59}@media(max-width:650px){.grid{grid-template-columns:1fr}main{padding:10px}header{padding:20px}.tile{min-width:35px;height:51px;font-size:18px}section{padding:12px}.rack{gap:4px}button{padding:10px}}

.tile.face{background-image:url('./assets/mahjong-tiles-flat.png');background-size:900% 500%;background-repeat:no-repeat;width:44px;min-width:44px;height:60px;padding:0;border:0;border-radius:5px;box-shadow:0 2px 1px #63756b;flex-shrink:0;vertical-align:middle}.tile.face:disabled{opacity:1}.tile.back{width:44px;min-width:44px;height:60px;border:2px solid #327e65;border-bottom:4px solid #225b49;background:linear-gradient(135deg,#83bfa4,#3e8b70);box-shadow:inset 0 0 0 3px #8fc5aa;flex-shrink:0}.exposed-line{display:flex;flex-wrap:nowrap;gap:12px;align-items:center;overflow-x:auto;padding:14px 0 8px;min-height:82px}.exposed-line .meld{flex-shrink:0;margin:0;padding:0}.flowers{display:flex;gap:3px;flex-shrink:0}.river{display:flex;flex-wrap:wrap;gap:3px;margin-top:12px}.river .tile.face{width:30px;min-width:30px;height:41px}.claim-toast{position:fixed;z-index:1000;left:50%;top:18%;transform:translateX(-50%);background:#123d36;color:white;border:2px solid #e2bc61;border-radius:14px;padding:20px;box-shadow:0 8px 35px #0006;max-width:94vw;text-align:center;pointer-events:none}.notice-tiles{display:flex;justify-content:center;gap:4px;margin-top:14px}dialog{max-width:min(800px,94vw);max-height:90vh;overflow:auto;border:2px solid #b78219;border-radius:16px;background:#fffaf0;color:#153e3b;padding:22px}dialog::backdrop{background:#10382d88}.tile.winning{outline:3px solid #c59327;margin-left:8px}.seat:has([aria-label="Winning hand"]){border:2px solid #b78219}button.tile:focus-visible{outline:3px solid #b58216}@media(max-width:650px){.tile.face,.tile.back{width:36px;min-width:36px;height:49px}.exposed-line{gap:8px}dialog{padding:12px}}
.face-1p{background-position:0% 0%}
.face-2p{background-position:12.5% 0%}
.face-3p{background-position:25% 0%}
.face-4p{background-position:37.5% 0%}
.face-5p{background-position:50% 0%}
.face-6p{background-position:62.5% 0%}
.face-7p{background-position:75% 0%}
.face-8p{background-position:87.5% 0%}
.face-9p{background-position:100% 0%}
.face-1s{background-position:0% 25%}
.face-2s{background-position:12.5% 25%}
.face-3s{background-position:25% 25%}
.face-4s{background-position:37.5% 25%}
.face-5s{background-position:50% 25%}
.face-6s{background-position:62.5% 25%}
.face-7s{background-position:75% 25%}
.face-8s{background-position:87.5% 25%}
.face-9s{background-position:100% 25%}
.face-1m{background-position:0% 50%}
.face-2m{background-position:12.5% 50%}
.face-3m{background-position:25% 50%}
.face-4m{background-position:37.5% 50%}
.face-5m{background-position:50% 50%}
.face-6m{background-position:62.5% 50%}
.face-7m{background-position:75% 50%}
.face-8m{background-position:87.5% 50%}
.face-9m{background-position:100% 50%}
.face-E{background-position:0% 75%}
.face-S{background-position:12.5% 75%}
.face-W{background-position:25% 75%}
.face-N{background-position:37.5% 75%}
.face-R{background-position:50% 75%}
.face-G{background-position:62.5% 75%}
.face-H{background-position:75% 75%}
.face-Q1{background-position:0% 100%}
.face-Q2{background-position:12.5% 100%}
.face-Q3{background-position:25% 100%}
.face-Q4{background-position:37.5% 100%}
.face-F1{background-position:50% 100%}
.face-F2{background-position:62.5% 100%}
.face-F3{background-position:75% 100%}
.face-F4{background-position:87.5% 100%}
#win-dialog{width:min(1100px,96vw);max-width:96vw}.winning-row{display:flex;flex-wrap:nowrap;gap:12px;align-items:flex-end;overflow-x:auto;padding:16px 4px 8px}.winning-group{display:flex;gap:3px;flex-shrink:0}.winning-row .tile.winning,.winner-flowers .tile.winning{transform:translateY(-10%);outline:2px solid #bd8d28;margin:0}.winner-flowers{display:flex;flex-wrap:nowrap;gap:3px;overflow-x:auto;padding:14px 4px 5px;min-height:22px}.tile.face{box-shadow:none;border:1px solid #ccc5af;background-color:#fffaf0}.tile.back{background:#5d9d82;box-shadow:inset 0 0 0 3px #8fc5aa}

/* Fit every physical tile, including eight flowers and four kongs, without scrolling or clipping. */
.seat{container-type:inline-size}.exposed-line{--face-width:min(44px,calc((100cqw - var(--gap-space))/var(--tile-count)));gap:6px;overflow:visible;min-height:0;align-items:flex-end}.exposed-line .flowers:empty{display:none}.exposed-line .flowers,.exposed-line .meld{gap:2px}.exposed-line .tile.face{width:var(--face-width);min-width:var(--face-width);height:auto;aspect-ratio:44/60}.exposed-line .flowers{order:-1}

/* CSP allows stylesheet classes, not inline style attributes. */
.exposed-line{--gap-space:calc((var(--group-count) - 1)*6px + (var(--tile-count) - var(--group-count))*2px)}
.exposed-count-1{--tile-count:1}
.exposed-count-2{--tile-count:2}
.exposed-count-3{--tile-count:3}
.exposed-count-4{--tile-count:4}
.exposed-count-5{--tile-count:5}
.exposed-count-6{--tile-count:6}
.exposed-count-7{--tile-count:7}
.exposed-count-8{--tile-count:8}
.exposed-count-9{--tile-count:9}
.exposed-count-10{--tile-count:10}
.exposed-count-11{--tile-count:11}
.exposed-count-12{--tile-count:12}
.exposed-count-13{--tile-count:13}
.exposed-count-14{--tile-count:14}
.exposed-count-15{--tile-count:15}
.exposed-count-16{--tile-count:16}
.exposed-count-17{--tile-count:17}
.exposed-count-18{--tile-count:18}
.exposed-count-19{--tile-count:19}
.exposed-count-20{--tile-count:20}
.exposed-count-21{--tile-count:21}
.exposed-count-22{--tile-count:22}
.exposed-count-23{--tile-count:23}
.exposed-count-24{--tile-count:24}
.exposed-groups-1{--group-count:1}
.exposed-groups-2{--group-count:2}
.exposed-groups-3{--group-count:3}
.exposed-groups-4{--group-count:4}
.exposed-groups-5{--group-count:5}
/* One player-local coordinate system, rotated around a square table. */
body{background:#ecece3}header{padding:12px 28px}header h1{font-size:24px;margin:3px 0}header p{margin:0;font-size:14px}main{max-width:1920px;padding:14px 22px}.table-controls{margin:8px 0}.table-controls summary{cursor:pointer;font-weight:650}.table-controls li{padding:5px}.level-label{margin-left:10px;font-size:13px}select{font:inherit;padding:6px;border:1px solid #91a99c;border-radius:6px;background:#fff;color:#153e3b}
.social-stage{display:grid;grid-template-columns:minmax(180px,390px) minmax(480px,1fr) minmax(180px,390px);grid-template-rows:234px auto;gap:12px;align-items:center}.face-space{position:relative;width:100%;max-width:390px;height:234px;min-width:0;margin:0;padding:0;overflow:hidden;border:1px solid #b5c7bb;background:linear-gradient(145deg,#ccdacf,#a8c0b0);display:flex;align-items:center;justify-content:center;justify-self:center}.face-top{grid-column:2;grid-row:1}.face-left{grid-column:1;grid-row:2}.face-right{grid-column:3;grid-row:2}.face-identity{text-align:center;color:#365c4c;padding-bottom:38px}.face-identity p{font-size:13px}.avatar{display:flex;align-items:center;justify-content:center;border:1px solid #8ba998;background:#e4ece5aa;width:90px;height:90px;border-radius:50%;font-size:44px;font-weight:300;margin:auto}.face-caption{position:absolute;bottom:0;left:0;right:0;padding:12px;background:#173f34e6;color:#f3f6ed;display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:13px}.face-caption strong{font-size:17px}.dealer-token{border:1px solid #e9c56b;color:#ffdf86;border-radius:5px;padding:3px 6px}
.mahjong-board{grid-column:2;grid-row:2;position:relative;width:100%;aspect-ratio:1;min-width:0;container-type:inline-size;isolation:isolate;background:radial-gradient(ellipse at 50% 40%,#397b65,#1b5746);border:9px solid #795036;box-shadow:inset 0 0 40px #123c32;--river-rows:1;--table-tile:5.2cqw;--river-tile:min(5.2cqw,calc((68cqw - (11 + var(--river-rows))*.2cqw)/(13 + var(--river-rows)*1.364)));--river-depth:calc(var(--river-rows)*var(--river-tile)*1.364 + (var(--river-rows) - 1)*.2cqw);--table-height:calc(var(--table-tile)*1.364);--tile-gap:.2cqw}
.table-seat{--seat-count:14;--table-tile:min(5.2cqw,calc(76cqw / var(--seat-count)));--table-height:calc(var(--table-tile)*1.364);position:absolute;inset:0;pointer-events:none;transform-origin:center}.position-bottom{transform:rotate(0deg)}.position-left{transform:rotate(90deg)}.position-top{transform:rotate(180deg)}.position-right{transform:rotate(-90deg)}.my-seat{z-index:10}.my-seat button{pointer-events:auto}.seat-strip{display:contents}
.mahjong-board .rack{position:absolute;bottom:2%;right:10%;width:auto;display:flex;flex-wrap:nowrap;justify-content:center;align-items:flex-end;gap:var(--tile-gap);padding:0;min-height:0}.hand-tile{position:relative;display:inline-flex;flex:none}.mahjong-board .tile.face,.mahjong-board .tile.back{width:var(--table-tile);min-width:var(--table-tile);height:var(--table-height);flex:none;border-radius:2px}.mahjong-board .tile.back{background:#80b39a;box-shadow:inset 0 -3px #28694f;border-width:1px}.mahjong-board .tile.new{transform:translateY(-50%)}.mahjong-board .tile.selected{outline:2px solid #f9cc60}.kong-eligible>.tile{outline:2px solid #e5bd55;box-shadow:0 0 10px #ffdd8899}
.mahjong-board .exposed-line{position:absolute;bottom:1%;left:10%;width:auto;display:flex;flex-wrap:nowrap;overflow:visible;gap:.5cqw;min-height:0;padding:0;justify-content:flex-start;align-items:flex-end}.mahjong-board .exposed-line .meld,.mahjong-board .flowers{display:flex;flex-wrap:nowrap;gap:var(--tile-gap);margin:0;padding:0}.mahjong-board .exposed-line .tile{border-bottom:2px solid #76bb9c}.mahjong-board .flowers{order:-1}
.mahjong-board .river{position:absolute;bottom:15%;left:calc(16cqw + var(--river-depth));width:auto;max-width:none;margin:0;display:flex;flex-direction:column-reverse;flex-wrap:nowrap;align-items:flex-start;gap:var(--tile-gap)}.mahjong-board .river .tile.face{width:var(--river-tile);min-width:var(--river-tile);height:calc(var(--river-tile)*1.364)}.river-row{display:flex;flex-wrap:nowrap;gap:var(--tile-gap)}
.table-center{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;flex-direction:column;align-items:center;color:#d5e9da;background:#164d40e8;padding:6px;border:1px solid #92b8a477;border-radius:8px;pointer-events:none}.table-center strong{font-size:22px}.table-center span,.table-center small{font-size:10px}.own-caption{position:absolute;bottom:-32px;left:0;right:0;display:flex;gap:10px;justify-content:center;align-items:center;color:#174d3e;font-size:13px}.own-caption .dealer-token{background:#174d3e}.social-stage{margin-bottom:40px}.board-controls{position:absolute;top:38%;left:32%;right:32%;display:flex;justify-content:center;flex-wrap:wrap;z-index:15}.board-controls button{font-size:12px;padding:7px}.moving-tile{position:fixed;left:0;top:0;width:24px!important;min-width:24px!important;height:33px!important;z-index:1200;pointer-events:none}
.speech-bubble{background:#fff9e8;color:#173e34;border:2px solid #d9b459;border-radius:13px;box-shadow:0 5px 22px #082b2766}.speech-bubble:after{content:'';position:absolute;width:15px;height:15px;background:#fff9e8;border-right:2px solid #d9b459;border-bottom:2px solid #d9b459;bottom:-9px;left:50%;transform:translateX(-50%) rotate(45deg)}.tile-bubble{position:absolute;bottom:calc(100% + 28px);left:50%;transform:translateX(-50%);z-index:12;min-width:110px;display:flex;flex-direction:column;padding:5px}.tile-bubble button{font-size:12px;white-space:nowrap;padding:8px;margin:2px}.hand-tile:has(.tile-bubble){z-index:12}.claim-prompt,.win-prompt{position:absolute;z-index:20;padding:18px;width:min(350px,65%);text-align:center}.claim-prompt strong,.win-prompt strong{font-size:19px}.prompt-top{top:11%;left:50%;transform:translateX(-50%)}.prompt-left{left:12%;top:34%}.prompt-right{right:12%;top:34%}.prompt-bottom{bottom:17%;left:50%;transform:translateX(-50%)}.prompt-top:after{top:-9px;bottom:auto;transform:translateX(-50%) rotate(225deg)}.prompt-left:after{left:-9px;top:50%;transform:rotate(135deg)}.prompt-right:after{left:auto;right:-9px;top:50%;transform:rotate(-45deg)}.offered-tile{padding:12px}.mahjong-board .offered-tile .tile{width:56px;min-width:56px;height:76px}.claim-buttons{display:flex;flex-wrap:wrap;justify-content:center}.claim-buttons button{font-size:14px;padding:9px;display:flex;align-items:center;gap:5px}.chow-choice{display:flex;gap:2px}.mahjong-board .chow-choice .tile{width:24px;min-width:24px;height:33px}.win-prompt{left:50%;bottom:20%;transform:translateX(-50%)}.win-prompt ul{text-align:left;padding-left:22px;font-size:14px}.win-prompt p{font-size:14px}.claim-toast{position:absolute;top:auto;left:auto;transform:none;max-width:60%;padding:12px;z-index:25}.notice-top{top:10%;left:50%;transform:translateX(-50%)}.notice-left{top:35%;left:10%}.notice-right{top:35%;right:10%}.notice-bottom{bottom:18%;left:50%;transform:translateX(-50%)}.notice-top:after{top:-9px;bottom:auto;transform:rotate(225deg)}.notice-left:after{left:-9px;top:50%;transform:rotate(135deg)}.notice-right:after{left:auto;right:-9px;top:50%;transform:rotate(-45deg)}

.mahjong-board .claim-choice-tile{transform:translateY(-30%);outline:1px solid #d9b459}.chow-choice{padding-top:10px}.discard-hint{position:absolute;bottom:30%;left:50%;transform:translateX(-50%);padding:9px 14px;font-size:14px;z-index:15;pointer-events:none;white-space:nowrap}.draw-prompt{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:65%;padding:20px;text-align:center;z-index:20}.draw-prompt:after{display:none}.notice-tiles{gap:2px}.mahjong-board .notice-tiles .tile{width:28px;min-width:28px;height:38px}
@media(max-width:1200px){.social-stage{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:234px auto}.face-left{grid-column:1;grid-row:1}.face-right{grid-column:3;grid-row:1}.mahjong-board{grid-column:1/4;width:min(100%,800px);justify-self:center}}
@media(max-width:650px){main{padding:6px}.social-stage{gap:5px;grid-template-rows:208px auto}.face-space{height:208px}.face-caption{padding:6px;font-size:10px;gap:4px}.face-caption strong{font-size:12px}.face-identity .avatar{width:45px;height:45px;font-size:28px}.face-identity p{font-size:10px}.mahjong-board{border-width:5px}.table-center strong{font-size:15px}.table-center span,.table-center small{font-size:8px}.own-caption{font-size:11px}.tile-bubble{min-width:75px;bottom:calc(100% + 14px);padding:2px}.tile-bubble button{font-size:10px;padding:6px}.claim-prompt,.win-prompt{padding:9px;width:76%;max-height:76%;overflow-y:auto}.claim-prompt strong,.win-prompt strong{font-size:15px}.prompt-left,.prompt-right{top:15%}.claim-buttons button{font-size:12px;padding:7px}.win-prompt ul{font-size:11px}.discard-hint{font-size:11px;padding:6px}.board-controls button{font-size:10px}.draw-prompt{font-size:13px}.claim-toast{font-size:12px}.mahjong-board .notice-tiles .tile{width:20px;min-width:20px;height:27px}}
@media(prefers-reduced-motion:reduce){.moving-tile{display:none}}

.mahjong-board{width:min(100%,780px);justify-self:center}@media(max-width:1200px){.mahjong-board{width:min(100%,780px)}}

.seat-count-14{--seat-count:14}
.seat-count-15{--seat-count:15}
.seat-count-16{--seat-count:16}
.seat-count-17{--seat-count:17}
.seat-count-18{--seat-count:18}
.seat-count-19{--seat-count:19}
.seat-count-20{--seat-count:20}
.seat-count-21{--seat-count:21}
.seat-count-22{--seat-count:22}
.seat-count-23{--seat-count:23}
.seat-count-24{--seat-count:24}
.seat-count-25{--seat-count:25}
.seat-count-26{--seat-count:26}
.seat-count-27{--seat-count:27}
.seat-count-28{--seat-count:28}
.river-rows-1{--river-rows:1}
.river-rows-2{--river-rows:2}
.river-rows-3{--river-rows:3}
.river-rows-4{--river-rows:4}
.river-rows-5{--river-rows:5}
.river-rows-6{--river-rows:6}
.river-rows-7{--river-rows:7}
.river-rows-8{--river-rows:8}
.river-rows-9{--river-rows:9}
.river-rows-10{--river-rows:10}
.river-rows-11{--river-rows:11}
.river-rows-12{--river-rows:12}

.draw-arrival{visibility:hidden;transform:translateY(-50%)}
.zoom-test-canvas{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.zoom-test-canvas[hidden]{display:none}.zoom-test-face{height:280px;position:relative;background:#dbe6df;margin:0}.zoom-test-face strong{position:absolute;bottom:5px;left:12px}

.seat-assignment{display:inline-flex;gap:8px;margin:8px;align-items:center}.seat-assignment select{max-width:180px;padding:8px}.draw-prompt{max-height:80%;overflow:auto}@media(max-width:650px){.table-seat{--table-tile:min(5.5cqw,calc(76cqw / var(--seat-count)))}}

/* Extra participants occupy the outer corners, with no overlap over play controls. */
.face-bottom{grid-column:2;grid-row:3;margin-top:28px}
.spectator-faces{display:contents}
.spectator-face{height:170px;align-self:start}
.spectator-face:nth-child(odd){grid-column:1}
.spectator-face:nth-child(even){grid-column:3}
.spectator-face:nth-child(1),.spectator-face:nth-child(2){grid-row:1}
.spectator-face:nth-child(n+3){grid-row:auto}
.room-roster{margin:18px 0;table-layout:fixed}.room-roster caption{text-align:left;font-weight:700;font-size:18px;padding-bottom:10px}
.room-roster td{overflow-wrap:anywhere;vertical-align:middle}.room-roster select{max-width:100%}.room-roster button{font-size:13px;padding:8px;margin:3px}
#profile-dialog label{display:block;margin:12px 0}#profile-dialog select{font:inherit;padding:8px}.profile-error{color:#a02b25}
@media(max-width:1200px){
 .spectator-view{grid-template-columns:repeat(4,minmax(0,1fr))}
 .spectator-view>.face-left{grid-column:1;grid-row:1}.spectator-view>.face-top{grid-column:2;grid-row:1}
 .spectator-view>.face-right{grid-column:3;grid-row:1}.spectator-view>.face-bottom{grid-column:4;grid-row:1;margin-top:0}
 .spectator-view>.mahjong-board{grid-column:1/5}
 .spectator-faces{grid-column:1/-1;grid-row:3;display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px;margin-top:30px}
 .spectator-face:nth-child(n){grid-column:auto;grid-row:auto;height:170px}
}