/* Domino has its own geometry: players outside a central rectangular field. */
.table-page.domino{--domino-side:20%;padding-left:8px;padding-right:8px}
.table-page.domino .arena{overflow:visible;margin:5px 0;isolation:isolate}
.table-page.domino .felt{inset:0 var(--domino-side);border-radius:18px;border:6px solid #234a4d;background:radial-gradient(ellipse at 50% 40%,#25766a,#10493f);box-shadow:0 0 0 2px #65afa4,inset 0 0 25px #00251f99,0 7px 15px #0003}
.table-page.domino .watermark{width:70%;max-height:70%;object-fit:contain;opacity:.07}
.table-page.domino .domino-board{left:50%;right:auto;top:7%;bottom:7%;width:min(56%,calc(var(--cols)*104px + (var(--cols) - 1)*7px));transform:translateX(-50%);gap:7px;grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-template-rows:repeat(var(--rows),minmax(0,1fr))}
.table-page.domino .domino-placement{height:100%;min-height:0;container-type:size}
.table-page.domino .domino-placement .domino-tile{width:min(100cqw,200cqh,104px);height:auto;aspect-ratio:2/1;max-width:100%;max-height:100%;border-radius:5px;border-color:#93aaa0;background:linear-gradient(145deg,#fffff1,#e1ebe0);box-shadow:0 3px 0 #739488,0 4px 6px #00281e80}
.table-page.domino .domino-links path{stroke:#a9c9b6;stroke-width:3;opacity:.4}
.table-page.domino .domino-seat,.table-page.domino .domino-seat.self{top:var(--seat-y)!important;width:clamp(120px,16vw,204px);display:flex;flex-direction:column;gap:6px;align-items:center;padding:0;transform:translate(-50%,-50%)}
.table-page.domino .domino-seat .avatar-ring{width:clamp(48px,10dvh,80px);height:clamp(48px,10dvh,80px);border:2px solid #619a9a;box-shadow:0 4px 10px #0004}
.table-page.domino .domino-seat .nameplate{width:100%;padding:7px 9px;text-align:center;border:1px solid #477b7f;border-radius:11px;background:linear-gradient(135deg,#15373e,#0e2933)}
.table-page.domino .domino-seat .nameplate b{font-size:clamp(11px,2dvh,17px);line-height:1.2;color:#f3fcfa}
.table-page.domino .domino-seat .nameplate small{font-size:clamp(9px,1.6dvh,13px);line-height:1.25;white-space:nowrap;color:#bad6d0}
.table-page.domino .domino-seat .domino-backs{position:static;inset:auto;display:flex;gap:3px;justify-content:center;height:17px;min-height:17px}
.table-page.domino .domino-backs i{width:8px;height:17px;background:linear-gradient(130deg,#77b5a9,#295464);border:1px solid #a0c8bc;border-radius:3px}
.table-page.domino .domino-seat.turn .nameplate{border-color:#f2cf80;background:linear-gradient(135deg,#365148,#173c41)}
.table-page.domino .domino-seat.turn .avatar-ring{border-color:#ffe09a;box-shadow:0 0 0 3px #e3bd6433,0 0 16px #e3bd6444}
.table-page.domino .domino-bottom{grid-template-columns:1fr 3fr 1fr;min-height:88px;height:20dvh;gap:10px;padding:5px 12px}
.table-page.domino .domino-hand{padding:12px 4px;gap:7px}
.table-page.domino .controls{max-width:none;display:flex;flex-direction:column;align-items:stretch;gap:6px}
.table-page.domino .domino-dropzones{position:static;inset:auto;display:flex;justify-content:center;gap:8px;min-height:0;pointer-events:none}
.table-page.domino .domino-dropzone{position:static;left:auto!important;top:auto!important;transform:none;width:52px;height:32px;border-radius:9px;flex-shrink:0;font-size:12px;box-shadow:none}
.table-page.domino .domino-dropzone:disabled{opacity:.28}
.table-page.domino .domino-dropzone.drop-hover{background:#49d5af;border-style:solid;color:#052e28;box-shadow:0 0 0 2px #49d5af44}
.table-page.domino .domino-announcement{color:#b8d5d1;line-height:16px;min-height:16px;height:16px}
@media(max-height:520px){
 .table-page.domino .domino-seat,.table-page.domino .domino-seat.self{width:clamp(116px,17vw,160px);display:grid;grid-template-columns:44px minmax(0,1fr);gap:4px;align-items:center}
 .table-page.domino .domino-seat .avatar-ring{width:44px;height:44px;grid-column:1;grid-row:1}
 .table-page.domino .domino-seat .nameplate{grid-column:2;grid-row:1;padding:5px 4px;text-align:left;min-width:0}
 .table-page.domino .domino-seat .nameplate b{font-size:11px}.table-page.domino .domino-seat .nameplate small{font-size:9px;white-space:normal}
 .table-page.domino .domino-seat .domino-backs{grid-column:1/-1;grid-row:2;height:12px;min-height:12px;gap:2px}
 .table-page.domino .domino-backs i{width:6px;height:12px}
 .table-page.domino .felt{border-width:4px;border-radius:13px}
 .table-page.domino .domino-board{top:6%;bottom:6%;width:min(56%,calc(var(--cols)*70px + (var(--cols) - 1)*4px));gap:4px}
 .table-page.domino .domino-bottom{height:22dvh;min-height:78px;padding:3px 5px;gap:5px;grid-template-columns:1.15fr 3fr 1fr}
 .table-page.domino .domino-dropzone{width:38px;height:26px;font-size:10px}
 .table-page.domino .domino-dropzones{gap:5px}.table-page.domino .domino-hand{gap:5px;padding:10px 2px}
 .table-page.domino .domino-hand .domino-tile{width:clamp(32px,8dvh,42px)}
 .table-page.domino .domino-announcement{height:12px;min-height:12px;line-height:12px}
}

.table-page.domino .domino-hand .domino-tile.selected{translate:0 -10px;border-color:#79ffe0;background:linear-gradient(135deg,#ffffed,#d7fff0);box-shadow:0 0 0 2px #77f4d4,0 0 18px #38dfb780,0 5px 0 #598f80;z-index:3}
.table-page.domino .domino-end-match .domino-tile{outline:2px solid #71f4ce;outline-offset:2px;box-shadow:0 0 16px #40e6bd88,0 3px 0 #638d78}
.table-page.domino .domino-half[data-domino-end]{cursor:pointer;background:#58ddb344;border-radius:4px;outline:1px solid #71edcc;outline-offset:1px;touch-action:manipulation;pointer-events:auto}
.table-page.domino .domino-half[data-domino-end]:focus-visible{outline:3px solid #ffe39a}
.table-page.domino .domino-hand{overflow-y:hidden;overflow-x:auto;padding-top:17px}

.table-page.domino .domino-opening-target{grid-column:1/-1;grid-row:1/-1;align-self:center;justify-self:center;border:2px dashed #70ebc8;border-radius:12px;background:#19574c;color:#d9fff0;padding:12px 18px;box-shadow:0 0 20px #38dfb744;font-size:clamp(11px,2dvh,16px)}

.table-page.domino .domino-bottom{position:relative}
.table-page.domino .domino-bottom.showing-result>.turn-info,.table-page.domino .domino-bottom.showing-result>.domino-hand,.table-page.domino .domino-bottom.showing-result>.controls{visibility:hidden;pointer-events:none}
.table-page.domino .domino-round-summary{position:absolute;inset:3px 12px;z-index:8;display:flex;align-items:center;justify-content:center;gap:clamp(12px,3vw,42px);padding:8px 16px;border:1px solid #77d7ba;border-radius:15px;background:linear-gradient(120deg,#123f3d,#102b3b);box-shadow:0 4px 16px #0004;color:#effff9;pointer-events:none}
.table-page.domino .domino-round-summary strong{display:block;font-size:clamp(13px,2.9dvh,24px);color:#8dffe0;letter-spacing:.4px}.table-page.domino .domino-round-summary small{display:block;font-size:clamp(9px,1.7dvh,13px);color:#c0dbd5;margin-top:3px}
.table-page.domino .domino-round-summary.lost{border-color:#d8a6a9;background:linear-gradient(120deg,#39303f,#102b3b)}.table-page.domino .domino-round-summary.lost strong{color:#ffb8c9}.table-page.domino .domino-round-summary.tied strong{color:#ffe09a}
.table-page.domino .domino-final-score{display:flex;align-items:center;justify-content:center;gap:15px}.table-page.domino .domino-final-score>span{text-align:center;min-width:90px}.table-page.domino .domino-final-score b{font-size:clamp(23px,5dvh,38px);line-height:1.1}.table-page.domino .domino-final-score .winner b{color:#ffe299}.table-page.domino .domino-final-score i{font-style:normal;color:#77a39f}
@media(max-height:520px){.table-page.domino .domino-round-summary{inset:2px 4px;gap:14px;padding:6px 8px}.table-page.domino .domino-round-summary>small{display:none}.table-page.domino .domino-final-score>span{min-width:70px}.table-page.domino .domino-final-score{gap:10px}.table-page.domino .domino-final-score small{font-size:9px}}

.table-page.domino .domino-seat.round-winner .avatar-ring{border-color:#ffe59e;box-shadow:0 0 0 2px #efc65d44,0 0 18px #efc65d55}
.table-page.domino .domino-seat.round-winner .nameplate{border-color:#d9ba6f}

.table-page.domino .domino-board.revealing-results{width:56%;display:flex;align-items:center;justify-content:center}
.table-page.domino .domino-revealed-hands{width:100%;height:100%;display:flex;flex-direction:column;justify-content:space-evenly;gap:8px;overflow:auto;padding:4px}
.table-page.domino .domino-revealed-player{display:grid;grid-template-columns:minmax(85px,25%) 1fr;gap:10px;align-items:center;padding:8px;border:1px solid #6aada077;border-radius:10px;background:#0c3e38e6}
.table-page.domino .domino-revealed-player header b{display:block;font-size:clamp(10px,1.9dvh,15px);color:#f2fcf6}.table-page.domino .domino-revealed-player header small{display:block;font-size:clamp(8px,1.5dvh,12px);color:#bce3d6;margin-top:3px}
.table-page.domino .domino-revealed-tiles{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.table-page.domino .domino-revealed-tiles .domino-tile{width:clamp(28px,4vw,58px);height:auto;aspect-ratio:2/1;flex:none;box-sizing:border-box;overflow:hidden;animation:domino-result-flip .3s ease-out both}
@keyframes domino-result-flip{from{transform:perspective(350px) rotateY(90deg);opacity:.3}to{transform:perspective(350px) rotateY(0);opacity:1}}
@media(max-height:520px){.table-page.domino .domino-revealed-hands{gap:4px;padding:2px}.table-page.domino .domino-revealed-player{padding:5px;gap:6px;grid-template-columns:minmax(75px,25%) 1fr}.table-page.domino .domino-revealed-tiles{gap:3px}}
@media(prefers-reduced-motion:reduce){.table-page.domino .domino-revealed-tiles .domino-tile{animation:none}}

.table-page.domino .domino-revealed-player>header{display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:3px;min-width:0;height:auto;margin:0;padding:0}
.table-page.domino .domino-revealed-player>header b{white-space:normal;overflow-wrap:anywhere}.table-page.domino .domino-revealed-player>header small{margin:0}
.table-page.domino .domino-revealed-tiles .domino-tile{width:clamp(28px,calc((100% - 24px)/var(--reveal-cols)),70px)}

/* Upright tiles, matching partners and an explicit draw pile. */
.table-page.domino .domino-board{width:min(56%,calc(var(--cols)*46px + (var(--cols) - 1)*5px));gap:5px}
.table-page.domino .domino-placement .domino-tile{width:min(100cqw,50cqh,46px);aspect-ratio:1/2;flex-direction:column;height:auto}
.table-page.domino .domino-placement .domino-divider{width:auto;height:1px}
.table-page.domino .domino-placement .domino-half{flex:1;aspect-ratio:1}
.table-page.domino .domino-links{display:none}
.table-page.domino .domino-seat .avatar-ring{border-color:var(--domino-team-color)}
.table-page.domino .domino-seat .nameplate{border-left:4px solid var(--domino-team-color)}
.table-page.domino .domino-seat .nameplate small{color:var(--domino-team-color)}
.table-page.domino .domino-pile{display:flex;align-items:center;justify-content:center;gap:8px;padding:4px;color:#d8eee9}
.table-page.domino .domino-pile>i{width:24px;height:36px;border:1px solid #93bcb1;border-radius:4px;background:#295e60;box-shadow:3px -2px #194244,6px -4px #5d8980;display:grid;place-items:center;font-style:normal;font-size:13px;font-weight:700}
.table-page.domino .domino-pile b{font-size:11px;white-space:nowrap}.table-page.domino .domino-pile small{display:block;font-size:9px}
@media(max-height:520px){.table-page.domino .domino-board{width:min(56%,calc(var(--cols)*30px + (var(--cols) - 1)*3px));gap:3px}.table-page.domino .domino-pile{gap:5px;padding:2px}.table-page.domino .domino-pile>i{width:18px;height:26px;font-size:10px}.table-page.domino .domino-pile b{font-size:9px}}

.table-page.domino .domino-revealed-tiles .domino-tile{width:clamp(18px,calc((100% - 24px)/var(--reveal-cols)),34px);aspect-ratio:1/2;flex-direction:column}.table-page.domino .domino-revealed-tiles .domino-divider{height:1px;width:auto}

/* Regular tiles lie horizontally; doubles stand upright. */
.table-page.domino .domino-board{width:min(56%,calc(var(--cols)*104px + (var(--cols) - 1)*6px));gap:6px}
.table-page.domino .domino-placement .domino-tile{width:min(100cqw,200cqh,104px);aspect-ratio:2/1;flex-direction:row}
.table-page.domino .domino-placement .domino-divider{width:1px;height:auto}
.table-page.domino .domino-placement .domino-tile.is-double{width:min(50cqw,50cqh,48px);aspect-ratio:1/2;flex-direction:column}
.table-page.domino .domino-placement .is-double .domino-divider{height:1px;width:auto}
.table-page.domino .domino-links{display:block}
.table-page.domino .domino-revealed-tiles .domino-tile{width:clamp(28px,calc((100% - 24px)/var(--reveal-cols)),64px);aspect-ratio:2/1;flex-direction:row}
.table-page.domino .domino-revealed-tiles .domino-divider{height:auto;width:1px}
.table-page.domino .domino-revealed-tiles .domino-tile.is-double{width:clamp(18px,calc((100% - 24px)/var(--reveal-cols)/2),32px);aspect-ratio:1/2;flex-direction:column}
.table-page.domino .domino-revealed-tiles .is-double .domino-divider{height:1px;width:auto}
.domino-starter{position:fixed;inset:0;z-index:180;display:grid;place-items:center;background:#061521ed;backdrop-filter:blur(5px);pointer-events:auto}
.domino-starter-panel{display:flex;align-items:center;justify-content:center;gap:36px;max-width:92vw;padding:26px 34px;border:1px solid #78b7ac;border-radius:24px;background:radial-gradient(ellipse at top,#254c4c,#102635);box-shadow:0 12px 60px #0008;color:#f1fff8}
.domino-wheel-wrap{position:relative;width:min(250px,58dvh);height:min(250px,58dvh);flex-shrink:0}
.domino-starter-wheel{width:100%;height:100%;position:relative;border:5px solid #ffe5a4;border-radius:50%;box-shadow:0 0 0 4px #7b5938;animation:domino-wheel-spin 3s cubic-bezier(.12,.6,.12,1) forwards}
.domino-starter-wheel:after{content:'✦';position:absolute;inset:37%;border-radius:50%;display:grid;place-items:center;background:#112c36;color:#ffe5a4;font-size:27px;border:3px solid #ffe5a4}
.domino-starter-wheel>span{position:absolute;left:42%;top:42%;width:16%;height:16%;transform:rotate(var(--angle)) translateY(calc(-1 * min(82px,19dvh))) rotate(calc(-1 * var(--angle)));border-radius:50%;overflow:hidden;border:2px solid white;background:#17323e}.domino-starter-wheel img{width:100%;height:100%;object-fit:cover}
.domino-wheel-pointer{position:absolute;top:-19px;left:calc(50% - 13px);z-index:2;font-size:28px;color:#fff0ba}
.domino-starter h2{font-size:clamp(18px,4dvh,29px);margin:0 0 12px}.domino-starter p{color:#ffe49e;font-size:clamp(13px,2.6dvh,19px)}.domino-starter small{font-size:12px;color:#b8d8d4}
@keyframes domino-wheel-spin{from{transform:rotate(0)}to{transform:rotate(var(--rotation))}}
@media(max-height:520px){.table-page.domino .domino-board{width:min(56%,calc(var(--cols)*70px + (var(--cols) - 1)*4px));gap:4px}.domino-starter-panel{gap:24px;padding:18px 24px}.domino-starter small{font-size:10px}}
@media(prefers-reduced-motion:reduce){.domino-starter-wheel{animation:none;transform:rotate(var(--rotation))}}

/* Tight, equal spacing is measured from tile edges, including vertical doubles. */
.table-page.domino .domino-board:not(.revealing-results){display:block}
.table-page.domino .domino-placement{position:absolute;container-type:normal;min-height:0}
.table-page.domino .domino-placement .domino-tile,
.table-page.domino .domino-placement .domino-tile.is-double{width:100%;height:100%;max-width:none;max-height:none;box-sizing:border-box;box-shadow:0 1px 0 #739488,0 2px 3px #00281e50}
.table-page.domino .domino-end-match .domino-tile{outline:0;box-shadow:inset 0 0 0 2px #71f4ce,0 0 9px #40e6bd77}
.table-page.domino .domino-half[data-domino-end]{cursor:pointer;background:#52e8bc40;border-radius:3px;box-shadow:inset 0 0 0 1px #8bffdb}
.table-page.domino .domino-half[data-domino-end].drop-hover{background:#86ffcf88}

/* Keep player labels within the side lanes, away from the playing field and cutouts. */
.table-page.domino{padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right));padding-top:max(4px,env(safe-area-inset-top))}
.table-page.domino .domino-seat,.table-page.domino .domino-seat.self{width:min(18%,204px);min-width:0}
.table-page.domino .domino-seat .nameplate{min-width:0;max-width:100%;box-sizing:border-box}
.table-page.domino .domino-seat .nameplate b{display:block;white-space:normal;overflow-wrap:anywhere;overflow:visible;text-overflow:clip}
.table-page.domino .domino-seat .nameplate small{white-space:normal;overflow-wrap:anywhere}
/* Domino already has a reserved result/footer area: no empty notice header. */
body:has(.table-page.domino) .table-page.domino{top:0!important;height:100dvh!important}
body:has(.table-page.domino) #game-notices{inset:auto 0 0;height:18px;padding:1px 8px;border:0;background:transparent}
body:has(.table-page.domino) #game-notices .domino-round-result{display:none}
body:has(.table-page.domino) .domino-announcement{visibility:hidden}

@media(max-height:520px){
 .table-page.domino .game-header .domino-score:has(>span:nth-of-type(3)){gap:1px}
 .table-page.domino .game-header .domino-score:has(>span:nth-of-type(3))>span{font-size:8px;line-height:1;padding:1px 5px}
 .table-page.domino .game-header .domino-score:has(>span:nth-of-type(3)) b{font-size:10px;line-height:1}
 .table-page.domino .game-header .domino-score:has(>span:nth-of-type(3))>small{font-size:6px;line-height:1}
}

/* More felt, compact labels, and a green clock around the player's name. */
.table-page.domino{--domino-side:18%}
.table-page.domino .domino-board{width:62%;top:4%;bottom:4%}
.table-page.domino .domino-seat,.table-page.domino .domino-seat.self{width:min(14%,180px)}
.table-page.domino .domino-seat .nameplate{position:relative;padding:5px 6px;border-color:#47967c}
.table-page.domino .domino-seat .nameplate b{font-size:clamp(10px,1.8dvh,14px);line-height:1.15}
.table-page.domino .domino-seat .nameplate small{font-size:clamp(8px,1.4dvh,11px);line-height:1.15}
.table-page.domino .domino-seat .avatar-ring{background:#173f38!important;border-color:#46b88c!important;box-shadow:0 2px 8px #001f2570!important}
.table-page.domino .domino-seat.turn .nameplate{border-color:#55d6a0;background:#17483c}
.domino-turn-clock{position:absolute;inset:-2px;pointer-events:none;border-radius:11px}
.domino-turn-clock svg{width:100%;height:100%;overflow:visible}
.domino-turn-clock rect{fill:none;stroke:#66f2aa;stroke-width:2.5;vector-effect:non-scaling-stroke;stroke-dasharray:100;stroke-dashoffset:calc(100 - var(--domino-time));transition:stroke-dashoffset .25s linear;filter:drop-shadow(0 0 2px #42d89188)}
@media(max-height:520px){.table-page.domino .domino-seat,.table-page.domino .domino-seat.self{grid-template-columns:36px minmax(0,1fr);gap:3px}.table-page.domino .domino-seat .avatar-ring{width:36px;height:36px}.table-page.domino .domino-seat .nameplate{padding:4px 3px}.table-page.domino .domino-seat .nameplate b{font-size:10px}.table-page.domino .domino-seat .nameplate small{font-size:8px}}

/* Keep every purchased tile reachable; horizontal browsing never submits a move. */
.table-page.domino .domino-hand{justify-content:flex-start;min-width:0;max-width:100%;touch-action:none;overscroll-behavior-x:contain;scrollbar-width:thin;scrollbar-color:#64d8ba #123b3d;user-select:none}
.table-page.domino .domino-hand .domino-tile{flex:0 0 auto}
.table-page.domino .domino-hand .domino-tile:first-child{margin-left:auto}
.table-page.domino .domino-hand .domino-tile:last-child{margin-right:auto}
.table-page.domino .domino-hand .domino-tile:disabled{pointer-events:none}
.table-page.domino .domino-hand:focus-visible{outline:2px solid #64d8ba;outline-offset:2px;border-radius:8px}