/* Widescreen tabletop: cards on felt, with controls below the hand. */
:root{--felt:#62765f;--felt-ink:#fff8e8;--felt-muted:#e2e5d6}
.app{background:var(--felt);background-image:url("felt-grain.svg");color:var(--felt-ink)}
.top{background:#30463d;border-bottom:1px solid #20382e;color:#fff8e8;box-shadow:0 2px 5px #1e302529}
.brand h1{color:#fff8e8;font-size:25px;font-weight:600}
.brand p{color:#d0dbc9;font-size:10px}
.brandmark{width:30px;height:34px;border:0;border-radius:0;background:transparent;color:#f3dfaa;box-shadow:none;font-size:29px}
.nav-link,.nav-round{color:#f4efdf}
.table-nav{gap:24px}.nav-link:hover{color:#f3d99c}
.turn-banner{border:1px solid #ddd5bd;background:#f8f3e5;box-shadow:0 2px 4px #243c2821}
.turn-banner h2{font-size:21px;line-height:26px}
.turn-steps li.active{background:#354f3b;border-color:#354f3b}
.turn-steps li.active .step-marker{background:#ebc985;border-color:#ebc985;color:#30432f}
.player-avatar{display:block;width:38px;height:38px;flex:none;overflow:hidden;border-radius:50%;background:#ced6be}
.player-avatar svg{width:100%;height:100%;display:block}
.playing .opponent-header{justify-content:flex-start;gap:10px;align-items:center}
.playing .opponent-identity{flex:1;min-width:0;padding:0}
.playing .opponent-name{font-weight:700;font-size:15px;line-height:22px}
.playing .other-panel[data-panel]{background:#ecebdc;border:1px solid #c4ccba;border-radius:9px;box-shadow:0 2px 4px #2033271c}
.playing .book-summary{border-radius:0 8px 0 6px}
.playing .books-label{background:#d8dfc9}
.playing>.player-panel[data-panel=you]{background:transparent;border:0;box-shadow:none;padding:0}
.playing>.player-panel[data-panel=you] .sectiontitle{color:var(--felt-ink)}
.your-name{font:600 20px/25px 'DM Sans',system-ui,sans-serif}
#yourBoardDetail{color:var(--felt-muted)}
.playing>.player-panel[data-panel=you] .sectiontitle .open-board{color:var(--felt-muted)}
.playing>.player-panel[data-panel=you] .sectiontitle .open-board:hover{background:#ffffff12;color:#fff8e8}
.playing>.player-panel[data-panel=you] .book-summary{position:static;margin-left:auto;align-self:center;border-radius:4px;order:4}
.playing>.player-panel[data-panel=you] .books-label{background:#d8dfc9}
.playing>.player-panel[data-panel=you] .readiness-tag{color:#fff0c8}
.playing>.pilearea{background:#415e49;border:1px solid #87957c;box-shadow:none}
.playing>.pilearea.pickup-ready{background:#354f3b}
.playing>.pilearea .piles-title{font-size:15px;font-weight:600;line-height:20px}
.playing>.pilearea .pilelabel{font-weight:600}
.handzone{background:transparent;border:0;border-radius:0;box-shadow:none;padding:0;max-height:none}
.handhead h2,.hand-heading>span,.hand-tools button,.selection-copy{color:var(--felt-ink)}
.handhead h2{font-size:16px;font-weight:600}
.handhead h2 small{font-size:12px;font-weight:400;color:var(--felt-muted)}
.hand-tools button{color:var(--felt-muted)}
.hand-tools button:hover{color:#fff8e8;text-decoration:underline;text-underline-offset:3px}
.hand-tools button[aria-pressed=true]{color:#f4d394}
.hand-pagination .range-pager{color:var(--felt-muted)}
.hand-pagination .range-pager button{color:#fff0c7}
.handzone #hand .card{box-shadow:-1px 3px 6px #1f362638,1px 2px 0 #d1c6aa;transform-origin:50% 100%}
.handzone #hand .card.selected{outline-color:#e6c276;box-shadow:0 3px 6px #23352b40}
.handzone #hand .card.selected:after{background:#e6c276;color:#30432f}
.handzone #hand .card.newly-drawn{outline-color:#e6c276}
.handzone #hand .card.newly-drawn.selected{outline-color:#304c37}
.action-dock{background:#f0ebdc;color:#304c37;border-top:1px solid #c1c8b0;box-shadow:none;padding:10px 16px;min-height:64px;border-radius:8px 8px 0 0;z-index:5}
.action-dock .selection-copy{color:#304c37}
.action-dock .selection-copy strong{font-size:14px;font-weight:600}
.action-dock .selection-copy p{color:#50634b;font-size:12px}
.dock-actions button{background:#fcf7e9;border:1px solid #a3ad91;color:#304c37;box-shadow:none;font-weight:600;border-radius:6px}
.dock-actions #play{background:#ae593e;color:#fff8ed;border-color:#93482f}
.dock-actions #play:hover:not(:disabled){background:#984b34}
.dock-actions button:disabled,.dock-actions #play:disabled{background:#e0e3d7;color:#606b59;border:1px solid #bcc4af;box-shadow:none}
.table-footer{background:#344c3e;border:0;color:var(--felt-muted);font-size:11px}
.table-footer .symbols-link{color:#f1ebd8}
.table-footer .symbols-link:hover{color:#fff8e8}
.wild-label{position:absolute;z-index:21;left:50%;top:50%;transform:translate(-50%,-50%);padding:2px 5px;border:1px solid #b5b18c;border-radius:2px;background:#f3efd9;color:#4b5738;font:800 clamp(8px,1.05em,18px)/1.15 'DM Sans',system-ui,sans-serif;letter-spacing:.025em;pointer-events:none}

@media(min-width:768px){
 :root{--nav-h:60px;--footer-h:28px;--inset:20px;--space:18px;--turn-h:64px;--opp-h:190px;--own-h:260px;--own-card-width:140px;--board-face-h:196px}
 .table{padding:18px 24px 0;grid-template-rows:var(--turn-h) max-content minmax(248px,1fr);gap:18px}
 .playing{grid-template-columns:minmax(0,1fr) 170px;grid-template-rows:var(--opp-h) var(--own-h);gap:18px}
 .playing>.other-players{gap:16px}
 .playing .other-panel[data-panel]{grid-template-rows:52px minmax(0,1fr) auto;padding:12px;gap:8px}
 .playing .other-panel .opponent-header{padding-top:10px}
 .playing .other-panel .player-stats{font-size:12px}
 .playing .other-panel .meld-tile.face-meld{max-width:78px}
 .playing .other-panel[data-panel] .public-sets{gap:10px}
 .playing>.player-panel[data-panel=you]{height:var(--own-h);grid-template-rows:44px minmax(0,1fr) auto;gap:10px}
 .playing>.player-panel[data-panel=you] .melds{grid-template-columns:repeat(6,minmax(0,var(--own-card-width)));justify-content:space-between;column-gap:18px;padding:2px 8px 8px}
 .playing>.pilearea{height:var(--own-h);padding:14px;gap:16px;grid-template-rows:20px minmax(0,1fr) 18px}
 .playing>.pilearea #discard{max-height:176px}
 .handzone{height:100%;align-self:end;grid-template-rows:20px minmax(0,1fr) 64px;gap:8px;min-height:248px}
 .handzone #hand.hand{padding:26px 18px 20px;align-items:center;justify-content:center;overflow:visible!important}
 .handzone #hand .card,.handzone #hand.overlapping .card{transform:translateY(var(--fan-drop,0px)) rotate(var(--fan-angle,0deg))!important}
 .handzone #hand .card.selected{transform:translateY(-22px) rotate(0deg)!important;z-index:var(--hand-order,1)}
 .handzone #hand .card:hover,.handzone #hand .card:focus-visible{transform:translateY(-28px) rotate(0deg)!important;z-index:var(--hand-order,1)}
 .handzone .action-dock{margin:0 -24px;padding-left:24px;padding-right:24px;border-radius:0}
 .hand-pagination{top:0;left:30%;right:32%}
 .handzone .toast.show{top:10px}
 .playing>.player-panel[data-panel=you] .summary-meld.dense{height:100%;max-height:90px;background:#f6f1e4}
 .playing #melds.multi-row{grid-template-rows:repeat(2,minmax(0,1fr));row-gap:10px}
}
@media(min-width:768px) and (max-width:1599px){
 :root{--nav-h:56px;--footer-h:24px;--turn-h:60px;--opp-h:166px;--own-h:214px;--own-card-width:108px;--board-face-h:154px}
 .table{padding:16px 18px 0;gap:14px}
 .playing{gap:14px;grid-template-columns:minmax(0,1fr) 150px}
 .playing>.other-players{gap:14px}
 .playing .other-panel[data-panel]{padding:8px 10px;grid-template-rows:50px minmax(0,1fr) auto;gap:6px}
 .playing .other-panel[data-panel] .public-sets{gap:6px}
 .playing .other-panel .opponent-header{padding-top:12px;gap:8px}
 .player-avatar{width:32px;height:32px}
 .playing .opponent-name{font-size:14px}
 .playing .other-panel .meld-tile.face-meld{max-width:65px}
 .playing>.player-panel[data-panel=you] .melds{column-gap:12px}
 .playing>.pilearea{padding:12px;gap:14px}
 .playing>.pilearea #discard{max-height:134px}
 .handzone .action-dock{margin-inline:-18px;padding-inline:18px}
 .handzone #hand.hand{padding-top:24px;padding-bottom:18px}
}
@media(min-width:768px) and (max-width:1199px){
 :root{--opp-h:210px;--own-h:210px;--own-card-width:92px;--board-face-h:132px}
 .table{padding-inline:12px}
 .playing{grid-template-columns:minmax(0,1fr) 132px}
 .playing .other-panel[data-panel]{grid-template-rows:48px minmax(0,1fr) auto}
 .playing .other-panel[data-panel] .opponent-header{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:26px 20px;align-content:start;align-items:start;gap:0;padding:0;height:46px}
 .playing .other-panel .opponent-player-card{grid-column:1;grid-row:1;justify-self:start;align-items:center;gap:6px}
 .playing .other-panel .player-stats{grid-column:1;grid-row:2;justify-self:start;margin:0;padding-left:32px}
 .playing .other-panel[data-panel] .public-sets{gap:4px}
 .playing .other-panel .summary-meld.dense{height:100%;max-height:52px}
 .playing .opponent-name{font-size:12px;flex-wrap:wrap}
 .playing .opponent-identity{gap:0}
 .playing .other-panel .player-stats{font-size:11px}
 .playing .other-panel .book-summary{position:absolute;top:0;right:0}
 .playing>.player-panel[data-panel=you] .melds{column-gap:8px}
 .playing>.player-panel[data-panel=you] .sectiontitle{gap:6px}
 .your-name{font-size:17px}
 .playing>.player-panel[data-panel=you] .books-label{display:none}
 .playing>.player-panel[data-panel=you] .readiness-tag{font-size:10px}
 .handzone .action-dock{margin-inline:-12px;padding-inline:12px}
 .dock-actions button{padding-inline:10px;font-size:12px}
 .selection-copy p{max-width:270px;font-size:11px}
 .table-nav{gap:16px}
}
@media(min-width:768px) and (max-height:860px){
 :root{--nav-h:48px;--footer-h:0px;--turn-h:54px;--opp-h:144px;--own-h:184px;--own-card-width:84px;--board-face-h:120px}
 .table{padding-top:10px;gap:10px;grid-template-rows:var(--turn-h) max-content minmax(224px,1fr)}
 .playing{gap:10px}
 .playing .other-panel[data-panel]{grid-template-rows:46px minmax(0,1fr) auto;gap:4px;padding-block:6px}
 .playing .other-panel .opponent-header{padding-top:12px}
 .playing .other-panel .meld-tile.face-meld{max-width:51px}
 .playing>.player-panel[data-panel=you]{grid-template-rows:38px minmax(0,1fr) auto;gap:6px}
 .playing>.pilearea{gap:12px;padding:10px}
 .playing>.pilearea #discard{max-height:106px}
 .table-footer{display:none}
 .handzone{min-height:224px}
 .handzone #hand.hand{padding-top:20px;padding-bottom:16px}
}
@media(min-width:768px) and (max-height:699px){
 body{overflow:auto}.app{height:auto;min-height:100dvh;overflow:visible}.table{height:auto;overflow:visible;grid-template-rows:var(--turn-h) max-content 248px}.playing{min-height:0}
}
@media(max-width:767px){
 .top{height:52px}.brand h1{font-size:22px}.brandmark{font-size:25px;width:26px}
 .nav-link{font-size:12px}
 .player-avatar{display:none}
 .turn-banner{box-shadow:none}
 .turn-banner h2{font-size:18px;line-height:22px}
 .playing>.player-panel[data-panel=you]{background:#f0f0e2;border-radius:8px;padding:8px}
 .playing>.player-panel[data-panel=you] .sectiontitle{color:#304c37}
 .your-name{font-size:14px;line-height:20px}
 #yourBoardDetail{color:#506a55}
 .playing>.player-panel[data-panel=you] .book-summary{position:absolute;margin:0;align-self:auto}
 .playing>.player-panel[data-panel=you] .readiness-tag{color:#315e42}
 .playing>.pilearea{background:#415e49;border-color:#87957c}
 .handzone{min-height:0;padding:8px 12px;background:transparent}
 .hand-heading .mobile-hand-meta{color:var(--felt-muted)}
 .handzone .action-dock{padding:7px 12px 8px;border-radius:0}
 .action-dock .selection-copy strong{font-size:11px}
 .action-dock .selection-copy p{font-size:10px}
 .handzone .dock-actions #play{background:#ae593e;color:#fff8ed}
 .handzone .dock-actions #play:disabled{background:#e0e3d7;color:#606b59}
 .player-tabs .player-tab{background:#e3e7d6;color:#304c37}
 .handzone #hand .card.selected{outline-color:#e6c276}
 .wild-label{font-size:10px}
}
@media(prefers-reduced-motion:reduce){.handzone #hand .card{transition:none!important}}
/* Keep hand labels legible against the felt, overriding the prior sage panel text. */
.handzone .handhead h2,.handzone .hand-tools button,.handzone .hand-heading>span{color:#fff8e8}
.handzone .handhead h2 small,.handzone .hand-heading .mobile-hand-meta{color:#e2e5d6}
/* Two-tone boundaries remain visible on both pale cards and the darker felt. */
:root{--felt:#5d715b;--felt-muted:#f0efdf}
#yourBoardDetail,.handzone .handhead h2 small,.handzone .hand-heading .mobile-hand-meta{color:var(--felt-muted)}
.playing .meld-tile.valid-target,.playing .meld-tile.chosen-target{outline-color:#ead18d}
.playing .meld-tile.chosen-target{box-shadow:0 0 0 1px #304c37}
.handzone #hand .card:focus-visible,.playing .meld-tile:focus-visible{outline:3px solid #a9e4f1!important;outline-offset:4px!important;box-shadow:0 0 0 2px #304c37}
.hand-tools button:focus-visible,.top button:focus-visible,.playing .sectiontitle .open-board:focus-visible{outline-color:#a9e4f1!important}
@media(max-width:767px){#yourBoardDetail{color:#506a55}.playing .meld-tile.valid-target,.playing .meld-tile.chosen-target{outline-color:#315e42}}

/* Short widescreens need the same bounded rows as compact desktop. */
@media(min-width:1600px) and (min-height:861px) and (max-height:1005px){
 :root{--opp-h:166px;--own-h:214px;--board-face-h:154px;--own-card-width:108px}
 .playing .other-panel[data-panel]{grid-template-rows:46px minmax(0,1fr) auto;padding:8px 10px;gap:6px}
 .playing .other-panel .meld-tile.face-meld{max-width:65px}
 .playing>.pilearea #discard{max-height:134px}
}
@media(min-width:768px) and (max-width:1199px) and (max-height:860px){
 :root{--opp-h:190px;--own-h:178px;--board-face-h:112px}
 .playing .other-panel[data-panel]{grid-template-rows:64px minmax(0,1fr) auto;padding:8px;gap:4px}
 .playing .other-panel .opponent-header{padding-top:22px}
 .playing .other-panel .summary-meld.dense{height:100%;max-height:48px;padding:3px 5px;gap:2px}
 .playing .other-panel .summary-meld .meld-rank{font-size:16px;line-height:18px}
 .playing .other-panel .summary-meld .meld-caption{font-size:9px!important;line-height:11px;white-space:nowrap}
 .playing .other-panel .summary-meld .progress-pip-bar,.playing .other-panel .summary-meld .pip-segments-row{height:5px;min-height:5px}
}
/* Tall windows keep the fan beside the dock rather than floating mid-table. */
@media(min-width:768px){.handzone #hand.hand{align-items:flex-end;padding-bottom:28px}}

/* Printed book seals: a tilted wordmark across two ink rings. */
.playing .face-meld .book-ink-stamp{left:50%;right:auto;top:51%;width:94%;height:auto;aspect-ratio:120/110;max-height:none;padding:0;border:0;box-shadow:none;border-radius:0;background:transparent url('book-stamp-clean.svg') center/contain no-repeat;transform:translate(-50%,-50%) rotate(-12deg);font-size:0!important;line-height:0;letter-spacing:0;text-indent:-999px;overflow:hidden}
.playing .face-meld .book-ink-stamp.dirty{background-image:url('book-stamp-dirty.svg')}
.playing .face-meld.completed .seal-badge{display:none}
/* One clear phase, with the number of cards still in that phase. */
.player-phase.phase-line,#yourPhase{display:inline-flex!important;align-items:center;gap:5px;margin:0;padding:0;border:0;background:none;border-radius:0;min-height:20px!important;color:#5b6044;font:500 12px/18px 'DM Sans',system-ui,sans-serif;white-space:nowrap}
.phase-icon{display:block;width:17px;height:19px;flex:none;fill:currentColor}
.phase-label{font:inherit}
.playing .other-panel .player-stats{margin:2px 0 0}
.playing #yourPhase{margin-left:12px;color:#f0efdf}
/* Requirement completion belongs at the upper right, separate from phase. */
.playing .other-panel .opponent-header{padding-top:0;align-items:center}
.playing .other-panel .opponent-identity{padding:0}
/* Layered paper edges give the discard depth without changing the top card. */
.playing>.pilearea #discard{position:relative;isolation:isolate;outline:0;border-radius:7px;background:#d5d8c9;box-shadow:0 0 0 7px #aebba24d}
.playing>.pilearea #discard .card{position:relative;z-index:2;border:1px solid #e5e2d5;border-radius:6px;box-shadow:0 calc(var(--discard-depth,0)*.45px) 0 #fcfaf0,0 calc(var(--discard-depth,0)*.45px + 1px) 0 #aaa99a,0 calc(var(--discard-depth,0)*.9px) 0 #fcfaf0,0 calc(var(--discard-depth,0)*.9px + 1px) 0 #b3b1a3,0 calc(var(--discard-depth,0)*1.4px) 0 #faf8ee,0 calc(var(--discard-depth,0)*1.4px + 1px) 0 #aaa99a,0 calc(var(--discard-depth,0)*1.85px) 0 #ebe8da,0 calc(var(--discard-depth,0)*1.85px + 2px) 3px #2036295c}
.playing>.pilearea #discard.empty-discard{box-shadow:none;background:transparent;border:1px dashed #b8c3a8}
/* Bold WILD is printed directly on the card, as in the reference. */
.wild-label{padding:0;border:0;border-radius:0;background:transparent;color:#48563b;font-size:clamp(10px,1.55em,30px);font-weight:900;letter-spacing:.01em;line-height:1}
/* Slight offsets and a shallow angle put the cards on the tabletop plane. */
.face-meld .tile-art>.card:not(.meld-card-layer){position:relative;z-index:3}
.face-meld .tile-art>.card.meld-card-layer{position:absolute;inset:0;z-index:calc(3 - var(--layer));transform:translate(calc(var(--layer)*-7px),calc(var(--layer)*1.5px)) rotate(calc(var(--layer)*-.35deg))!important;box-shadow:0 1px 2px #263c2b36;border-color:#cfcebf}
.meld-card-layer .points-badge{display:none!important}
@media(min-width:768px){
 .playing>.player-panel[data-panel=you] .face-meld{transform:perspective(1000px) rotateX(5deg) rotateZ(var(--meld-angle,0deg));transform-origin:50% 100%}
 .playing>.player-panel[data-panel=you] .face-meld.completed{--meld-angle:-1.3deg}
 .playing>.player-panel[data-panel=you] .face-meld.completed:nth-child(even){--meld-angle:1.3deg}
 .playing .other-panel .meld-card-layer{display:none}
 .handzone #hand .card,.handzone #hand.overlapping .card{transform:perspective(1100px) translateY(var(--fan-drop,0px)) rotateX(7deg) rotateZ(var(--fan-angle,0deg))!important}
 .handzone #hand .card.selected{transform:perspective(1100px) translateY(calc(var(--fan-drop,0px) - 22px)) rotateX(5deg) rotateZ(var(--fan-angle,0deg))!important}
 .handzone #hand .card:hover,.handzone #hand .card:focus-visible{transform:perspective(1100px) translateY(calc(var(--fan-drop,0px) - 28px)) rotateX(5deg) rotateZ(var(--fan-angle,0deg))!important}
 .handzone #hand.hand{padding-bottom:32px}
 .playing>.player-panel[data-panel=you] .melds{padding-left:16px}
}
@media(min-width:768px) and (max-width:1199px){
 .playing .other-panel .opponent-header{gap:6px}
 .playing .other-panel .opponent-name{font-size:12px}
 .playing .other-panel .player-avatar{width:26px;height:26px}
 .playing #yourPhase{margin-left:8px;font-size:11px}
}
@media(min-width:768px) and (max-width:999px){
 .playing .other-panel .player-book-status .books-label,.playing .other-panel .player-book-status .book-kind{display:none}
}
@media(max-width:767px){
 .playing #yourPhase{margin-left:6px;color:#506a55;font-size:11px;gap:3px}
 .playing #yourPhase .phase-icon{width:14px;height:16px}
 .player-tabs .player-phase.phase-line{margin:0;gap:2px;font-size:9px;line-height:13px;min-height:13px!important;color:#50634c}
 .player-tabs .phase-icon{width:11px;height:12px}
 .player-tabs .phase-label{display:inline}
 .player-tab>small{white-space:nowrap}
 .wild-label{font-size:15px}
}
.phase-line .phase-icon,#yourPhase .phase-icon{fill:currentColor;stroke:none}
.phase-line .phase-label,#yourPhase .phase-label{font:inherit!important}
@media(max-width:767px){
 #yourPanel{grid-template-rows:38px minmax(0,1fr) auto}
 .playing{flex-basis:300px}
 .handzone,.handzone:has(.hand-pagination>.range-pager[hidden]){flex-grow:1}
}

/* Book totals form one field attached to the upper-right panel corner. */
.playing .player-book-status,.playing #yourBooks{position:absolute;top:0;right:0;display:flex;flex-direction:row;align-items:stretch;justify-content:flex-end;gap:0;margin:0;order:initial;flex:none;border:0;border-radius:0 8px 0 7px;overflow:hidden;background:#d8dfc9}
.playing .player-book-status .book-summary,.playing #yourBooks .book-summary{position:static!important;inset:auto;display:inline-flex;align-items:stretch;align-self:stretch;order:initial;gap:0;margin:0;min-height:25px;border:0;border-radius:0;white-space:nowrap}
.playing .player-book-status .books-label{display:inline-flex;padding:4px 6px;background:#d8dfc9;font-size:10px;line-height:17px}
.playing .player-book-status .book-icon-pill{min-height:25px;padding:4px 6px;line-height:17px}
.playing .player-book-status .book-kind,.playing .player-book-status .book-badge-num{font-size:10px;line-height:17px}
.playing .player-book-status .readiness-tag,.playing #yourBooks .readiness-tag{display:inline-flex;align-items:center;justify-content:center;align-self:stretch;min-height:25px;min-width:27px;padding:3px 5px;margin:0;border:0;border-radius:0;background:#ead38e;color:#63501c;box-shadow:none;font:700 17px/19px 'DM Sans',system-ui,sans-serif;text-decoration:none}
.playing .player-book-status .readiness-tag>span{font:inherit}
.playing .other-panel .opponent-header{padding-top:8px}
@media(max-width:767px){
 .playing .player-book-status .book-summary,.playing #yourBooks .book-summary{min-height:22px}
 .playing .player-book-status .books-label{padding:3px 4px;font-size:9px;line-height:16px}
 .playing .player-book-status .book-icon-pill{padding:3px 4px;min-height:22px;line-height:16px}
 .playing .player-book-status .book-kind,.playing .player-book-status .book-badge-num{font-size:9px;line-height:16px}
 .playing .player-book-status .readiness-tag,.playing #yourBooks .readiness-tag{min-height:22px;min-width:24px;font-size:15px;padding:2px 4px}
}
@media(max-width:359px){.playing #yourPhase{display:none!important}}

/* Short paths from the current turn and the selected card. */
.turn-banner .turn-copy{min-width:0}
.handzone .nearby-discard{position:fixed;z-index:140;min-height:44px;width:max-content;max-width:calc(100vw - 16px);padding:10px 14px;border:1px solid #8d472f;border-radius:6px;background:#ae593e;color:#fff8ed;box-shadow:0 2px 5px #1f362633;font:600 14px/20px 'DM Sans',system-ui,sans-serif;cursor:pointer;white-space:nowrap;transform:none}
.handzone .nearby-discard:hover{background:#964b34}
.handzone .nearby-discard:focus-visible{outline:3px solid #a9e4f1;outline-offset:3px}
.handzone .nearby-discard[hidden]{display:none!important}
@media(min-width:768px){
 .handzone .action-dock{display:grid;grid-template-columns:minmax(0,1fr) max-content minmax(0,1fr);column-gap:16px;align-items:center}
 .handzone .action-dock .selection-copy{grid-column:1;grid-row:1;min-width:0;align-self:center}
 .handzone .action-dock .selection-copy p{max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 .handzone .action-dock .dock-actions{grid-column:2;grid-row:1;justify-self:center;justify-content:center}
}


/* Engraved Court shares original portrait art across all four suits. */
.engraved-face,.engraved-face-four,.engraved-portrait{display:none}
html[data-deck="heirloom"] .card{background:#fffaf0}
html[data-deck="heirloom"] .card>.corner,html[data-deck="heirloom"] .card>.center,html[data-deck="heirloom"] .card>.premium-frame,html[data-deck="heirloom"] .card>.premium-face,html[data-deck="heirloom"] .card>.premium-face-four,html[data-deck="heirloom"] .card>.vector-face,html[data-deck="heirloom"] .card>.vector-face-four,html[data-deck="heirloom"] .card>.premium-ace{display:none!important}
html[data-deck="heirloom"] .card:before,html[data-deck="heirloom"] .card:after{display:none}
html[data-deck="heirloom"] .card>.engraved-face{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:fill;border-radius:7px;pointer-events:none;z-index:4}
html[data-deck="heirloom"][data-four-color="true"] .card:is(.suit-club,.suit-diamond)>.engraved-face{display:none}
html[data-deck="heirloom"][data-four-color="true"] .card>.engraved-face-four{display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:fill;border-radius:7px;pointer-events:none;z-index:4}
html[data-deck="heirloom"] .card>.engraved-portrait{display:block;position:absolute;left:16%;top:7%;width:68%;height:86%;object-fit:contain;pointer-events:none;z-index:5}
html[data-deck="heirloom"] .card.selected:after{display:block}
html[data-deck="heirloom"] .back{background:#8f2828 url('cards-engraved/back.svg') center/100% 100%;border-color:#c4a56c}
html[data-deck="heirloom"] .back:after{display:none}

/* Original phase artwork follows the ink color of each player header. */
.phase-icon{background:currentColor;-webkit-mask:center/contain no-repeat;mask:center/contain no-repeat;width:20px;height:22px}
.phase-hand{-webkit-mask-image:url('phase-hand.svg');mask-image:url('phase-hand.svg')}
.phase-foot{-webkit-mask-image:url('phase-foot.svg?v=side-foot-2');mask-image:url('phase-foot.svg?v=side-foot-2')}
.phase-guide-pair{display:inline-flex;align-items:center;gap:8px}
.phase-guide-pair .phase-icon{width:28px;height:28px}
@media(max-width:767px){.player-tabs .phase-icon{width:15px;height:16px}.playing #yourPhase .phase-icon{width:18px;height:19px}}

/* Spend opponent-panel space on the player and cards, rather than header padding. */
@media(min-width:1200px){
 .playing .other-panel[data-panel]{--opponent-head:44px;padding:6px;grid-template-rows:var(--opponent-head) minmax(0,1fr) auto;gap:4px}
 .playing .other-panel .opponent-header{padding:0 200px 0 0;gap:8px;align-items:flex-start}
 .playing .other-panel .player-avatar{width:44px;height:44px}
 .playing .other-panel .opponent-identity{padding:0;gap:0;align-self:flex-start}
 .playing .other-panel .opponent-name{line-height:20px}
 .playing .other-panel .player-stats{margin:0;line-height:20px}
 .playing .other-panel .player-phase.phase-line{min-height:20px!important}
 .playing .other-panel[data-panel] .public-sets{gap:6px}
 .playing .other-panel .meld-tile.face-meld{width:min(100%,90px,calc((var(--opp-h) - var(--opponent-head) - 22px)*5/7));max-width:none;height:auto;aspect-ratio:5/7;justify-self:center}
}
@media(min-width:1200px) and (max-width:1599px){
 .playing .other-panel[data-panel]{--opponent-head:40px}
 .playing .other-panel .player-avatar{width:40px;height:40px}
 .playing .other-panel .meld-tile.face-meld{width:min(100%,75px,calc((var(--opp-h) - var(--opponent-head) - 22px)*5/7))}
}
@media(min-width:1200px) and (max-height:860px){
 .playing .other-panel .meld-tile.face-meld{width:min(100%,60px,calc((var(--opp-h) - var(--opponent-head) - 22px)*5/7))}
}

/* Player areas have defined edges; hand preferences belong beside the action dock. */
@media(min-width:768px){
 .playing>.player-panel[data-panel=you]{background:#ecebdc;border:1px solid #c4ccba;border-radius:10px;padding:8px;grid-template-rows:38px minmax(0,1fr) auto;gap:4px;box-shadow:0 2px 4px #2033271c}
 .playing>.player-panel[data-panel=you] .sectiontitle{color:#304c37;gap:8px}
 .playing #yourPhase{color:#5b6044}
 .playing #yourBoardDetail{color:#50634b}
 .playing>.player-panel[data-panel=you] .sectiontitle .open-board{color:#34513a;border-color:#a3ad91;border-radius:5px;padding:4px 8px;text-decoration:none}
 .playing>.player-panel[data-panel=you] .sectiontitle .open-board:hover{background:#dce3cf;color:#304c37}
 .playing>.player-panel[data-panel=you] .melds{padding:2px 6px 6px}
 .playing>.player-panel[data-panel=you] .meld-tile.face-meld{width:min(100%,var(--own-card-width),calc((var(--own-h) - 70px)*5/7));height:auto;aspect-ratio:5/7;justify-self:center}
 .handzone{position:relative;background:#526b55;border:1px solid #8b9c80;border-radius:10px;padding:12px 12px 0;overflow:visible}
 .handzone .handhead{padding:0 2px}
 .handzone .action-dock{margin:0 -12px;padding:10px 12px;border-radius:0 0 9px 9px;column-gap:12px}
 .handzone .action-dock .hand-tools{grid-column:3;grid-row:1;justify-self:end;display:flex;align-items:center;gap:2px;padding-left:10px;border-left:1px solid #c1c8b0;white-space:nowrap}
 .handzone .action-dock .hand-tools button{min-height:32px;padding:5px 7px;border:0;border-radius:4px;color:#34513a;font-size:12px;line-height:20px;background:transparent;text-decoration:none;box-shadow:none}
 .handzone .action-dock .hand-tools button:hover{background:#e0e5d5;color:#243f2b}
 .handzone .action-dock .hand-tools button[aria-pressed=true]{background:#d4dec7;color:#304c37;text-decoration:none}
}
@media(min-width:768px) and (max-width:1199px){
 .handzone .action-dock{grid-template-columns:minmax(0,1fr) max-content max-content;column-gap:8px}
 .handzone .action-dock .hand-tools{padding-left:6px;gap:0}
 .handzone .action-dock .hand-tools button{font-size:10px;padding-inline:4px}
}

/* Tall desktops use the height for readable cards rather than one stretched hand row. */
@media(min-width:1200px) and (min-height:1500px){
 html[data-tall-table] .table{padding-top:18px;grid-template-rows:var(--turn-h) max-content minmax(var(--tall-hand-height),1fr)}
 html[data-tall-table] .playing{grid-template-columns:minmax(0,1fr) var(--tall-discard-width)}
 html[data-tall-table] .playing .other-panel[data-panel]{padding:12px;grid-template-rows:52px minmax(0,1fr) auto;gap:8px}
 html[data-tall-table] .playing .other-panel[data-panel] .public-sets{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:12px;align-items:center}
 html[data-tall-table] .playing .other-panel .meld-tile.face-meld{width:var(--tall-opp-card-width);height:calc(var(--tall-opp-card-width)*1.4);max-width:100%;max-height:none;justify-self:center}
 html[data-tall-table] .playing>.player-panel[data-panel=you]{grid-template-rows:44px minmax(0,1fr) auto;gap:10px}
 html[data-tall-table] .playing>.player-panel[data-panel=you] .melds{grid-template-columns:repeat(var(--tall-own-columns),minmax(0,var(--own-card-width)));grid-template-rows:repeat(var(--tall-own-rows),minmax(0,1fr));column-gap:18px;row-gap:12px;align-items:center}
 html[data-tall-table] .playing>.player-panel[data-panel=you] .melds.multi-row{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr))}
 html[data-tall-table] .playing>.player-panel[data-panel=you] .meld-tile.face-meld{width:var(--own-card-width);height:var(--board-face-h);max-height:none}
 html[data-tall-table] .playing>.pilearea .pile.discard{width:100%;max-width:100%;min-width:0}
 html[data-tall-table] .playing>.pilearea #discard{width:calc(100% - 14px);max-width:100%;height:auto;max-height:none;aspect-ratio:250/350}
 html[data-tall-table] .playing>.pilearea #discard .card{width:100%;height:auto;aspect-ratio:250/350}
 html[data-tall-table] .handzone{min-height:var(--tall-hand-height)}
 html[data-tall-table] .handzone #hand.hand{padding-top:80px;padding-bottom:56px}
}

/* Player areas have defined edges; hand preferences belong beside the action dock. */
@media(min-width:768px){
 .playing>.player-panel[data-panel=you]{background:#ecebdc;border:1px solid #c4ccba;border-radius:10px;padding:8px;grid-template-rows:38px minmax(0,1fr) auto;gap:4px;box-shadow:0 2px 4px #2033271c}
 .playing>.player-panel[data-panel=you] .sectiontitle{color:#304c37;gap:8px}
 .playing #yourPhase{color:#5b6044}
 .playing #yourBoardDetail{color:#50634b}
 .playing>.player-panel[data-panel=you] .sectiontitle .open-board{color:#34513a;border-color:#a3ad91;border-radius:5px;padding:4px 8px;text-decoration:none}
 .playing>.player-panel[data-panel=you] .sectiontitle .open-board:hover{background:#dce3cf;color:#304c37}
 .playing>.player-panel[data-panel=you] .melds{padding:2px 6px 6px}
 .playing>.player-panel[data-panel=you] .meld-tile.face-meld{width:min(100%,var(--own-card-width),calc((var(--own-h) - 70px)*5/7));height:auto;aspect-ratio:5/7;justify-self:center}
 .handzone{position:relative;background:#526b55;border:1px solid #8b9c80;border-radius:10px;padding:12px 12px 0;overflow:visible}
 .handzone .handhead{padding:0 2px}
 .handzone .action-dock{margin:0 -12px;padding:10px 12px;border-radius:0 0 9px 9px;column-gap:12px}
 .handzone .action-dock .hand-tools{grid-column:3;grid-row:1;justify-self:end;display:flex;align-items:center;gap:2px;padding-left:10px;border-left:1px solid #c1c8b0;white-space:nowrap}
 .handzone .action-dock .hand-tools button{min-height:32px;padding:5px 7px;border:0;border-radius:4px;color:#34513a;font-size:12px;line-height:20px;background:transparent;text-decoration:none;box-shadow:none}
 .handzone .action-dock .hand-tools button:hover{background:#e0e5d5;color:#243f2b}
 .handzone .action-dock .hand-tools button[aria-pressed=true]{background:#d4dec7;color:#304c37;text-decoration:none}
}
@media(min-width:768px) and (max-width:1199px){
 .handzone .action-dock{grid-template-columns:minmax(0,1fr) max-content max-content;column-gap:8px}
 .handzone .action-dock .hand-tools{padding-left:6px;gap:0}
 .handzone .action-dock .hand-tools button{font-size:10px;padding-inline:4px}
}

/* Meld tooltips show the same seven-card visual grammar as the table. */
.symbol-tip.meld-tip{width:246px;padding:12px;overflow-wrap:normal}
.meld-tip-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}
.meld-tip-rank{font:700 16px/20px 'DM Sans',system-ui,sans-serif}
.meld-tip-status{padding:2px 6px;border-radius:3px;font:600 11px/16px 'DM Sans',system-ui,sans-serif;white-space:nowrap}
.meld-tip-status.is-clean{background:#e5ebd9;color:#315e42}
.meld-tip-status.is-dirty{background:#f0ddd0;color:#82462f}
.meld-tip-progress{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;height:8px;margin-bottom:10px}
.meld-tip-progress>span{border:1px solid #b5bea6;background:#ebeadd;border-radius:1px}
.meld-tip-progress.is-clean>.filled{background:#315e42;border-color:#315e42}
.meld-tip-progress.is-dirty>.filled{background:#9a543e;border-color:#9a543e}
.meld-tip-stats{display:grid;grid-template-columns:repeat(3,1fr)}
.meld-tip-stat{display:flex;flex-direction:column;align-items:center;gap:1px}
.meld-tip-stat+ .meld-tip-stat{border-left:1px solid #d5dac7}
.meld-tip-stat strong{font:700 18px/22px 'DM Sans',system-ui,sans-serif}
.meld-tip-stat>span{font:500 11px/16px 'DM Sans',system-ui,sans-serif;color:#52634b}

/* Opponent headers read across: portrait, name, books, then current phase. */
@media(min-width:1200px){
 .playing .other-panel[data-panel]{--opponent-head:52px}
 .playing .other-panel .opponent-header{display:grid;grid-template-columns:48px max-content minmax(0,1fr) max-content;grid-template-rows:1fr;align-items:start;column-gap:8px;padding:0}
 .playing .other-panel .player-avatar{grid-column:1;grid-row:1;width:48px;height:48px}
 .playing .other-panel .opponent-identity{display:contents}
 .playing .other-panel .opponent-name{grid-column:2;grid-row:1;max-width:130px;padding-top:1px}
 .playing .other-panel .player-stats{grid-column:4;grid-row:1;justify-self:end;margin:0;padding-top:1px}
 .playing .other-panel .opponent-header>.player-book-status{grid-column:3;grid-row:1;position:static;justify-self:center;align-self:start;border-radius:0 0 5px 5px;max-width:100%}
}
@media(min-width:1200px) and (max-width:1599px){
 .playing .other-panel[data-panel]{--opponent-head:44px}
 .playing .other-panel .opponent-header{grid-template-columns:40px max-content minmax(0,1fr) max-content;column-gap:6px}
 .playing .other-panel .player-avatar{width:40px;height:40px}
 .playing .other-panel .opponent-name{max-width:85px}
}
@media(min-width:1200px) and (max-width:1359px){
 .playing .other-panel .player-book-status .books-label{display:none}
 .playing .other-panel .opponent-name{max-width:65px}
}
/* Round requirements stay beside the round; opening controls use the existing menu. */
.nav-round{display:flex;align-items:center;gap:8px;white-space:nowrap}
.nav-round .round-minimum{font-size:12px;font-weight:600;color:#f2d79b}
.round-short{display:none}
.opening-empty{grid-column:1/-1;align-self:center;justify-self:center;max-width:440px;padding:12px;text-align:center;color:#34513a}
.opening-empty strong{font-size:18px;font-weight:600}
.opening-empty p{font-size:13px;line-height:1.5;margin:8px 0}
.opening-settings{margin-top:20px}
.opening-settings h4{font-size:14px;margin:0 0 6px}
.opening-settings>p{margin:6px 0 12px}
.opening-minimum-fields{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.opening-minimum-fields input,.round-preview-control select,.opening-review select{box-sizing:border-box;width:100%;min-width:0;height:42px;border:1px solid #8a9d82;border-radius:5px;background:#fffaf0;color:#304c37;padding:8px;font:inherit}
.opening-settings-actions{display:flex;gap:8px;margin-top:12px}
.opening-settings-status:empty{display:none}
.round-preview-control{display:flex;align-items:flex-end;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.round-preview-control .settings-field{width:130px}
.round-preview-control p{width:100%;margin:0}
.opening-review{width:540px;max-width:calc(100vw - 32px);max-height:90dvh;overflow:auto;padding:24px;border:1px solid #768e77;border-radius:10px;background:#f8f3e5;color:#304c37}
.opening-review::backdrop{background:#08261cd9}
.opening-review-heading{display:flex;align-items:center;justify-content:space-between;gap:16px}
.opening-review h2{font-size:21px;margin:0}
.opening-review p{font-size:14px;line-height:1.5}
.opening-review button,.round-advance-actions button{min-height:44px;padding:9px 14px;border:1px solid #8a9d82;border-radius:6px;background:#fff9ed;color:#304c37;font:600 13px 'DM Sans',system-ui,sans-serif}
.opening-review .primary{background:#ae593e;border-color:#93482f;color:#fff8ed}
.opening-review .primary:disabled{background:#e0e3d7;color:#606b59;border-color:#bcc4af}
.opening-wild-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-block:16px}
.opening-wild-choices .settings-field{display:grid;gap:6px;font-size:13px}
.opening-review-groups{padding-block:8px;border-block:1px solid #c1c9b4}
.opening-review-groups p{margin:6px 0}
.opening-review-error{color:#963f2b}
.opening-review-error:empty{display:none}
.opening-review-actions,.round-advance-actions{display:flex;justify-content:flex-end;margin-top:20px}
@media(max-width:767px){
 .table-nav{gap:8px}.table-nav .nav-round{display:flex;flex-direction:column;align-items:flex-start;gap:0;line-height:14px;font-size:10px}
 .nav-round .round-name{display:none}.nav-round .round-short{display:inline}.nav-round .round-minimum{font-size:10px}
 .table-nav .nav-link{min-width:34px}.table-nav #openUtilities{width:34px}.brand{gap:5px}.brand h1{font-size:20px}
 .opening-minimum-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
 .opening-empty{padding:6px}.opening-empty strong{font-size:16px}.opening-empty p{font-size:12px;margin:4px 0}
 .opening-review{padding:18px}.opening-review h2{font-size:18px}
}

/* Identity and book tabs are attached to the panel edge, not floating in its padding. */
.opponent-player-card{display:flex;align-items:flex-start;gap:8px;min-width:0}
@media(min-width:1200px){
 .playing .other-panel[data-panel]{--opponent-inset:6px;--opponent-block-inset:6px}
 .playing .other-panel .opponent-player-card{grid-column:1/3;grid-row:1;justify-self:start;width:max-content;max-width:100%;background:#d8dfc9;border:0;border-radius:9px 0 9px 0;overflow:hidden;gap:8px;transform:translate(calc(-1*var(--opponent-inset)),calc(-1*var(--opponent-block-inset)))}
 .playing .other-panel .opponent-player-card .player-avatar{border-radius:0}
 .playing .other-panel .opponent-player-card .opponent-name{padding:7px 8px 7px 0}
 .playing .other-panel .opponent-header>.player-book-status{transform:translateY(calc(-1*var(--opponent-block-inset)));border-radius:9px 0 9px 0}
}
@media(min-width:1200px) and (max-width:1599px){
 .playing .other-panel .opponent-player-card{gap:6px}
 .playing .other-panel .opponent-player-card .opponent-name{padding-right:6px}
 .playing .other-panel .player-book-status .book-icon-pill{padding-inline:4px}
}
@media(min-width:1200px) and (min-height:1500px){html[data-tall-table] .playing .other-panel[data-panel]{--opponent-inset:12px}}

/* The shared discard divides opponents from the player's board and hand. */
.table-center{display:none}
@media(min-width:768px){
 html[data-center-table] .table{display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:var(--opp-h) var(--center-height) var(--own-h) var(--center-hand-height);padding:16px 24px 12px;gap:16px;align-content:start;overflow:visible}
 html[data-center-table] .playing{display:contents}
 html[data-center-table] .playing>.other-players{grid-column:1;grid-row:1;height:var(--opp-h);gap:16px;min-height:0}
 html[data-center-table] .playing .other-panel[data-panel]{padding:8px 12px;grid-template-rows:44px minmax(0,1fr);gap:8px;overflow:visible}
 html[data-center-table] .playing .other-panel .opponent-header{height:44px;min-height:0}
 html[data-center-table] .playing .other-panel .player-avatar{width:40px;height:40px}
 html[data-center-table] .playing .other-panel .opponent-header{grid-template-columns:40px max-content minmax(0,1fr) max-content}
 html[data-center-table] .playing .other-panel[data-panel] .public-sets{height:100%;grid-template-columns:repeat(var(--center-opp-columns),minmax(0,1fr));grid-template-rows:repeat(var(--center-opp-rows),minmax(0,1fr));gap:var(--center-row-gap) 12px;padding:5px 6px 8px;align-items:center;overflow:visible}
 html[data-center-table] .playing .other-panel .meld-tile.face-meld{width:var(--center-opp-card-width);height:calc(var(--center-opp-card-width)*1.4);max-width:100%;max-height:none;justify-self:center}
 html[data-center-table] .playing .other-panel .public-sets.multi-row{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:12px}
 html[data-center-table] .playing .other-panel .summary-meld.dense{max-height:54px;height:100%;min-height:0}
 html[data-center-table] .playing>.player-panel[data-panel=you]{grid-column:1;grid-row:3;height:var(--own-h);padding:8px 12px;grid-template-rows:36px minmax(0,1fr);gap:4px;min-height:0;overflow:visible}
 html[data-center-table] .playing>.player-panel[data-panel=you] .melds{grid-template-columns:repeat(6,minmax(0,var(--own-card-width)));grid-template-rows:minmax(0,1fr);justify-content:space-between;column-gap:24px;row-gap:24px;padding:10px 22px 12px;align-items:center;overflow:visible}
 html[data-center-table] .playing>.player-panel[data-panel=you] .meld-tile.face-meld{width:var(--own-card-width);height:var(--board-face-h);max-width:100%;max-height:none}
 html[data-center-table] .playing #melds.multi-row{grid-template-columns:repeat(6,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));gap:12px 24px;padding-block:4px}
 html[data-center-table] .playing #melds.multi-row .summary-meld.dense{height:100%;max-height:72px;min-height:0}
 html[data-center-table] .playing>.player-panel[data-panel=you] .sectiontitle{position:static}
 html[data-center-table] .playing>.player-panel[data-panel=you] .sectiontitle .open-board{margin-left:12px}
 html[data-center-table] .playing .own-board-pager:empty{display:none}
 html[data-center-table] .table-center{display:grid;grid-column:1;grid-row:2;grid-template-columns:minmax(0,1fr) calc(var(--center-discard-width) + 72px) minmax(0,1fr);align-items:center;column-gap:32px;min-height:0;height:var(--center-height);padding:12px 24px;background:#3f5a46;border:1px solid #8c9c81;border-radius:10px;color:#fff8e8}
 .table-center .center-turn{display:flex;flex-direction:column;gap:12px;min-width:0;width:min(100%,370px);justify-self:end;align-items:flex-start}
 .table-center .nav-round{font-size:14px;color:#fff8e8;flex-wrap:wrap;white-space:normal}
 .table-center .turn-banner{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;gap:16px;height:auto;min-height:0;padding:0;background:transparent;border:0;border-radius:0;box-shadow:none;color:#fff8e8}
 .table-center .turn-banner .turn-copy{margin:0}
 .table-center .turn-owner{color:#e3e5d5;font-size:11px;line-height:16px}
 .table-center .turn-banner h2{color:#fff8e8;font-size:22px;line-height:28px;margin:4px 0 0}
 .table-center .turn-steps{gap:8px;margin:0;flex-wrap:wrap}
 .table-center .turn-steps li{color:#e2e5d6;font-size:12px;padding:5px 7px;border-color:transparent}
 .table-center .turn-steps .step-marker{color:#f7f2e1;border-color:#a9b69a;background:transparent}
 .table-center .turn-steps li.active{background:#f4e6bd;border-color:#f4e6bd;color:#304c37}
 .table-center .turn-steps li.active .step-marker{background:#e6c276;color:#304c37;border-color:#e6c276}
 .table-center .turn-steps li.done{color:#eff0df}
 .table-center .pilearea{grid-column:2;grid-row:1;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:center;justify-content:center;gap:12px;width:100%;height:100%;min-height:0;padding:0 8px;background:none;border:0;border-radius:0;box-shadow:none}
 .table-center .pilearea .piles-title{display:block;color:#fff8e8;text-transform:none;font:600 16px/20px 'DM Sans',system-ui,sans-serif;margin:0}
 .table-center .pilearea>.pile:not(.discard),.table-center .pilearea .draw-note,.table-center .pilearea .draw-action,.table-center .pilearea .pickup-action{display:none!important}
 .table-center .pilearea .pile.discard{display:flex;flex-direction:column;align-items:center;gap:24px;width:100%;height:auto;max-width:none;min-width:0;flex:none;align-self:center}
 .table-center .pilearea #discard{position:relative;isolation:isolate;flex:none;width:var(--center-discard-width);height:calc(var(--center-discard-width)*1.4);aspect-ratio:5/7;min-height:0;max-height:none;max-width:100%;margin:0;outline:0;background:#d5d8c9;border:0;border-radius:7px;box-shadow:0 0 0 7px #aebba24d}
 .table-center .pilearea #discard .card{position:relative;z-index:2;width:100%!important;height:100%!important;max-width:none;margin:0;border:1px solid #e5e2d5;border-radius:6px;box-shadow:0 calc(var(--discard-depth,0)*.45px) 0 #fcfaf0,0 calc(var(--discard-depth,0)*.45px + 1px) 0 #aaa99a,0 calc(var(--discard-depth,0)*.9px) 0 #fcfaf0,0 calc(var(--discard-depth,0)*.9px + 1px) 0 #b3b1a3,0 calc(var(--discard-depth,0)*1.4px) 0 #faf8ee,0 calc(var(--discard-depth,0)*1.4px + 1px) 0 #aaa99a,0 calc(var(--discard-depth,0)*1.85px) 0 #ebe8da,0 calc(var(--discard-depth,0)*1.85px + 2px) 3px #2036295c}
 .table-center .pilearea #discard.empty-discard{background:none;box-shadow:none;border:1px dashed #b8c3a8}
 .table-center .pilearea .pilelabel{display:flex;align-items:center;justify-content:center;gap:8px;margin:0;padding:0;color:#fff8e8;font-size:13px;line-height:18px;font-weight:600}
 .table-center .pilearea.pickup-ready #discard{outline:3px solid #e6c276;outline-offset:6px}
 .table-center .action-dock{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;align-self:center;justify-self:start;width:min(100%,392px);min-height:0;height:auto;margin:0;padding:0;background:none;border:0;border-radius:0;box-shadow:none}
 .table-center .selection-copy,.table-center .action-dock .selection-copy{color:#fff8e8}
 .table-center .selection-copy strong{font-size:14px;line-height:20px}
 .table-center .selection-copy p{font-size:12px;line-height:18px;color:#eef0df;max-width:none;margin:2px 0 0;white-space:normal}
 .table-center .dock-actions{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;min-width:0}
 .table-center .dock-actions button{width:100%;padding:0 12px;font-size:13px}
 .table-center .action-dock .hand-tools{display:flex;flex-wrap:wrap;gap:4px;align-items:center;justify-content:flex-start;padding:0;border:0}
 .table-center .hand-tools button{padding:4px 6px;min-height:28px;color:#f0efdf;font-size:11px;line-height:18px;background:none;border:0;box-shadow:none}
 .table-center .hand-tools button:hover{background:#526c54;color:#fff8e8;text-decoration:none}
 .table-center .hand-tools button[aria-pressed=true]{background:#526c54;color:#f4d394}
 .table-center .toast{position:static!important;transform:none!important;max-width:100%;width:auto;white-space:normal;margin-top:6px}
 .table-center .toast:not(.show){display:none}
 html[data-center-table] .handzone{grid-column:1;grid-row:4;height:var(--center-hand-height);min-height:0;max-height:none;align-self:start;grid-template-rows:20px minmax(0,1fr);padding:8px 16px 6px;gap:4px;overflow:visible}
 html[data-center-table] .handzone #hand.hand{padding:64px 16px 40px;height:100%;min-height:0;align-items:flex-end;justify-content:center;overflow:visible!important}
 html[data-center-table] .hand-pagination{top:2px;left:28%;right:28%}
 html[data-center-table] .handzone #hand .card{flex:0 0 auto}
}
@media(min-width:768px) and (max-width:1599px){
 html[data-center-table] .table{padding-inline:18px;gap:12px}
 html[data-center-table] .playing>.other-players{gap:12px}
 html[data-center-table] .table-center{column-gap:20px;padding-inline:18px}
 .table-center .turn-banner h2{font-size:20px;line-height:25px}
 .table-center .center-turn{gap:8px}
 .table-center .turn-banner{gap:12px}
}
@media(min-width:768px) and (max-width:1199px){
 html[data-center-table] .table{padding-inline:12px}
 html[data-center-table] .playing .other-panel[data-panel]{grid-template-rows:48px minmax(0,1fr);gap:4px}
 html[data-center-table] .playing .other-panel .opponent-header{grid-template-columns:minmax(0,1fr);padding-top:0;height:46px}
 html[data-center-table] .playing .other-panel .player-book-status{position:absolute}
 html[data-center-table] .playing .other-panel .summary-meld.dense{padding:3px;height:50px;max-height:50px}
 html[data-center-table] .table-center{grid-template-columns:minmax(0,1fr) calc(var(--center-discard-width) + 48px) minmax(0,1fr);column-gap:16px;padding-inline:16px}
 .table-center .turn-banner h2{font-size:18px;line-height:22px}
 .table-center .turn-steps{gap:0}
 .table-center .turn-steps li{padding:3px 4px;font-size:10px}
 .table-center .turn-steps .step-marker{width:16px;height:16px;font-size:10px}
 .table-center .dock-actions button{font-size:11px;padding-inline:6px}
 .table-center .selection-copy p{font-size:11px;line-height:15px}
}
@media(min-width:768px) and (max-height:860px){
 html[data-center-table] .table{padding-top:10px;gap:10px}
}
@media(min-width:1200px) and (min-height:1500px){
 html[data-center-table] .playing .other-panel[data-panel]{grid-template-rows:44px minmax(0,1fr);padding:8px 12px;gap:8px}
 html[data-center-table] .playing .other-panel[data-panel] .public-sets{row-gap:24px;padding-top:8px;padding-bottom:12px}
}
@media(max-width:767px){.table-center{display:none!important}}

@media(min-width:1200px) and (max-height:1499px){
 html[data-center-table] .playing .other-panel[data-panel]{grid-template-rows:32px minmax(0,1fr);gap:4px}
 html[data-center-table] .playing .other-panel .opponent-header{height:32px;grid-template-columns:32px max-content minmax(0,1fr) max-content}
 html[data-center-table] .playing .other-panel .player-avatar{width:32px;height:32px}
 html[data-center-table] .playing .other-panel[data-panel] .public-sets{padding-top:4px;padding-bottom:8px}
}

@media(min-width:768px){
 .table-center .turn-steps li.done .step-marker{background:#dce5cd;border-color:#dce5cd;color:#315342}
}

/* Keep the full table reachable when a short window cannot fit four rows. */
html[data-table-scroll] body{overflow:auto}
html[data-table-scroll] .app{height:auto;min-height:100dvh;overflow:visible}
html[data-table-scroll] .table{height:auto;overflow:visible}
@media(min-width:768px) and (max-width:1199px){
 .playing>.player-panel[data-panel=you] .melds{padding-inline:22px}
}

/* Available actions remain legible on the shared table's dark felt. */
.table-center .dock-actions button:disabled,.table-center .dock-actions #play:disabled{background:#506552;color:#d9dfd0;border:1px solid #7c8e76;box-shadow:none}
.table-center .dock-actions button:not(#play):not(:disabled):hover{background:#f3e4bc;color:#243f2b;border-color:#c8ad70}
.table-center .dock-actions button:not(#play):not(:disabled):active{background:#e4d0a3;color:#243f2b;border-color:#b19864;box-shadow:none}

/* Wide boards retain physical cards; overflow uses the player header's pager. */
@media(min-width:1200px){
 html[data-center-table] #yourPanel:has(.own-board-pager .range-pager:not([hidden])){grid-template-rows:36px minmax(0,1fr);gap:4px}
 html[data-center-table] #yourPanel .own-board-pager{position:absolute;top:7px;left:50%;transform:translateX(-50%);width:260px;max-width:28%;z-index:4}
 html[data-center-table] #yourPanel .own-board-pager .range-pager{height:32px;gap:8px;color:#50634b}
 html[data-center-table] #yourPanel .own-board-pager .range-pager button{height:32px;min-height:32px;padding:4px 6px;font-size:12px;color:#34513a}
 html[data-center-table] #yourPanel .own-board-pager .page-range{font-size:11px}
}

/* Fit the wide public board into one compact row before resorting to pages. */
@media(min-width:1200px){
 .playing #melds.meld-grid{grid-template-columns:repeat(var(--board-columns,6),minmax(0,var(--own-card-width)));grid-template-rows:minmax(0,1fr);justify-content:space-between;column-gap:24px;row-gap:0;padding:8px 16px 12px;align-items:center}
 .playing #melds.meld-grid .meld-tile.face-meld{width:min(100%,var(--own-card-width),calc((var(--own-h) - 70px)*5/7));height:auto;aspect-ratio:5/7;max-height:none;justify-self:start}
}

/* Place desktop play actions beside the selection, above the hand. */
@media(min-width:1200px){
 html[data-center-table] .handzone{grid-template-rows:20px 44px minmax(0,1fr);row-gap:6px}
 html[data-center-table] .handzone .handhead{grid-row:1;grid-column:1}
 html[data-center-table] .handzone>.hand-actions{grid-row:2;justify-self:center;display:flex;align-items:center;justify-content:center;gap:8px;width:max-content;max-width:100%;min-height:44px;margin:0;padding:0;z-index:6}
 html[data-center-table] .handzone>.hand-actions button{min-height:44px;min-width:96px;padding:0 18px;white-space:nowrap;font-size:13px}
 html[data-center-table] .handzone #hand.hand{grid-row:3;padding-top:20px}
 html[data-center-table] .handzone .nearby-discard{display:none}
}

@media(min-width:1200px){
 .table-center .turn-banner{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:'copy' 'steps';align-items:center;gap:10px 12px}
 .table-center .turn-banner .turn-copy{grid-area:copy}
 .table-center .turn-banner .turn-steps{grid-area:steps}
}

/* Keep hand preferences in the upper-right corner beside the hand heading. */
@media(min-width:1200px){
 html[data-center-table] .handzone>.hand-actions{grid-column:1}
 html[data-center-table] .handzone>.hand-tools{grid-area:1 / 1;justify-self:end;align-self:center;position:static;display:flex;align-items:center;gap:8px;margin:0;padding:0;border:0;z-index:6}
 html[data-center-table] .handzone>.hand-tools button{min-height:36px;padding:6px 4px;color:#f0efdf;background:transparent;border:0;box-shadow:none;font-size:11px;line-height:18px}
 html[data-center-table] .handzone>.hand-tools button:hover{color:#fff8e8;background:#3f5a46}
 html[data-center-table] .handzone>.hand-tools button[aria-pressed=true]{color:#f4d394;background:#3f5a46}
}

/* Expand the public board from its lower-right corner. */
@media(min-width:768px){
 .playing #yourPanel>.board-expand{position:absolute;right:8px;bottom:8px;display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:44px;margin:0;padding:10px;z-index:5;background:#e3e8d7;color:#34513a;border:0;border-radius:6px;box-shadow:none;text-decoration:none}
 .playing #yourPanel>.board-expand:hover{background:#d3dec6;color:#243f2b}
 .playing #yourPanel>.board-expand svg{display:block;flex:none}
 .playing #yourPanel #melds.meld-grid{padding-right:62px}
}

/* Track the first play in the center of an unopened board. */
.playing #yourPanel #melds.meld-grid:has(>.opening-empty){grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr);justify-content:stretch;padding-block:2px}
.playing #yourPanel .opening-empty{grid-column:1/-1;align-self:center;justify-self:center;display:grid;gap:10px;width:min(420px,100%);max-width:100%;min-width:0;margin:0;padding:18px 20px;border:1px solid #afbd9d;border-radius:8px;background:#faf5e7;text-align:left;color:#34513a;box-shadow:none}
.opening-empty .opening-title{font:600 22px/28px 'DM Sans',system-ui,sans-serif;color:#34513a}
.opening-metrics{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:16px;line-height:22px}
.opening-current{font-weight:700}.opening-remaining{font-size:14px;color:#5c6d52;white-space:nowrap}
.opening-meter{height:7px;background:#dce3d0;border-radius:3px;overflow:hidden}
.opening-fill{display:block;height:100%;background:#b49a59;transition:width .15s ease}
.playing #yourPanel .opening-empty[data-state=ready]{background:#e0ead5;border-color:#749266}
.opening-empty[data-state=ready] .opening-title,.opening-empty[data-state=ready] .opening-remaining{color:#2e603b}
.opening-empty[data-state=ready] .opening-fill{background:#3e754b}
.opening-empty[data-state=invalid] .opening-title,.opening-empty[data-state=draw-required] .opening-title{color:#816238}
@media(min-width:768px) and (max-height:1100px){
 .playing #yourPanel .opening-empty{gap:6px;padding:8px 12px;width:min(360px,100%)}
 .opening-empty .opening-title{font-size:16px;line-height:20px}.opening-metrics{font-size:13px;line-height:18px}.opening-remaining{font-size:12px}.opening-meter{height:5px}
}
@media(min-width:768px) and (max-height:860px){
 .playing #yourPanel .opening-empty{gap:4px;padding:6px 10px}
 .opening-empty .opening-title{font-size:14px;line-height:18px}.opening-metrics{font-size:12px;line-height:14px}.opening-remaining{font-size:11px}.opening-meter{height:4px}
}
@media(max-width:767px){
 .playing #yourPanel .opening-empty{gap:6px;padding:12px;width:100%}.opening-empty .opening-title{font-size:18px;line-height:22px}.opening-metrics{font-size:14px;line-height:18px}.opening-remaining{font-size:12px}
}
@media(prefers-reduced-motion:reduce){.opening-fill{transition:none}}

/* Current-turn feedback uses the table's existing ink and gold. */
#otherPlayers .player-panel.current-turn{outline:2px solid #d3ae59;outline-offset:-2px}
.player-tab.current-turn:before{content:"";display:inline-block;width:6px;height:6px;background:#a95439;border-radius:50%;margin-right:4px}

/* Contextual moves stay next to the selected card without covering its face. */
.handzone .card-quick-actions{position:fixed;z-index:140;display:flex;flex-direction:column;gap:6px;width:max-content;max-width:calc(100vw - 16px);padding:6px;border:1px solid #87977d;border-radius:6px;background:#fbf6e7;color:#304c37;box-shadow:0 2px 6px #20362933}
.handzone .card-quick-actions .quick-action-row{display:flex;gap:6px;min-width:0}
.handzone .card-quick-actions button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:9px 12px;border:1px solid #819575;border-radius:4px;background:#fffaf0;color:#304c37;font:600 13px/20px 'DM Sans',system-ui,sans-serif;white-space:nowrap;cursor:pointer;box-shadow:none;transform:none}
.handzone .card-quick-actions button:hover{background:#eee8d6}
.handzone .card-quick-actions .quick-primary{background:#ae593e;border-color:#8d472f;color:#fff8ed}
.handzone .card-quick-actions .quick-primary:hover{background:#964b34}
.handzone .card-quick-actions button:focus-visible{outline:3px solid #a9e4f1;outline-offset:2px}
.handzone .card-quick-actions .quick-meld-targets{display:grid;gap:4px;max-height:min(240px,36vh);overflow-y:auto;padding-top:6px;border-top:1px solid #c9cfbb}
.handzone .card-quick-actions .quick-target{justify-content:space-between;border:0;background:transparent;text-align:left}
.handzone .card-quick-actions .quick-target:hover{background:#e7ecda}
.handzone .card-quick-actions .quick-target small{font-size:11px;color:#52664e}
.handzone .card-quick-actions[hidden],.handzone .card-quick-actions [hidden]{display:none!important}

/* The last open slot earns a quiet gold cue; book stamps still wait for seven. */
.playing .meld-tile.is-one-away .status-corner{display:flex;flex-direction:column;gap:0;padding:0;border-color:#b28b3c;overflow:hidden}
.playing .meld-tile.is-one-away .status-kind{padding:2px 5px}
.playing .meld-tile .one-away-label{display:block;align-self:stretch;padding:3px 5px;background:#ead18f;color:#584019;font:700 10px/12px 'DM Sans',system-ui,sans-serif;text-align:center;text-transform:none;letter-spacing:normal;white-space:nowrap}
.playing .meld-tile.is-one-away .pip-segment:last-child{background:#f7e7b6;border:1px solid #a77b25}
.playing .other-panel .meld-tile .one-away-label{padding:2px 3px;font-size:8px;line-height:10px}
.playing .other-panel .meld-tile.is-one-away .status-kind{padding:1px 3px}
.playing .summary-meld.is-one-away .status-kind{display:none}
.playing .summary-meld.is-one-away .status-corner{border:0;border-radius:0 7px 0 6px}
.playing .summary-meld .one-away-label{padding:3px 5px;font-size:9px;line-height:11px}

/* Card motion follows the committed table state. */
.motion-flying{pointer-events:none!important;contain:layout style;will-change:transform,opacity;overflow:hidden;filter:none!important;box-shadow:0 4px 8px #172b2240!important}
.motion-card-back{display:grid;place-items:center;border:3px solid #f8f0dd;border-radius:7px;color:#ead390;background:repeating-linear-gradient(45deg,#416d51 0 5px,#659477 5px 10px);box-shadow:0 3px 5px #172b2240;font:bold 30px Georgia,serif}
.motion-settings{display:flex;flex-wrap:wrap;gap:12px;margin-top:14px}.motion-settings .settings-field{min-width:155px;max-width:220px;flex:1}
.turn-indicator{display:inline-flex;align-items:center;margin-left:7px;padding:2px 5px;border-radius:3px;background:#ead18d;color:#304c37;font:700 9px/14px 'DM Sans',system-ui,sans-serif;white-space:nowrap;vertical-align:middle}.turn-indicator[hidden]{display:none}
@media(max-width:767px){.player-tab.current-turn{position:relative;box-shadow:inset 0 0 0 2px #d3ae59}.player-tab.current-turn:after{content:'TURN';position:absolute;right:3px;top:3px;padding:1px 3px;background:#ead18d;color:#304c37;font:700 8px/11px 'DM Sans',system-ui,sans-serif;border-radius:2px}.your-name .turn-indicator{font-size:8px;margin-left:4px}}

/* Give the middle of the table one clear purpose in each turn state. */
.center-activity[hidden]{display:none!important}
@media(min-width:768px){
 html[data-center-table] .table-center{column-gap:clamp(20px,3vw,48px)}
 .table-center .center-turn{width:min(100%,390px);gap:14px}
 .table-center .nav-round{font-size:15px;line-height:22px}
 .table-center .turn-owner{font-size:13px;line-height:19px;letter-spacing:.025em}
 .table-center .turn-banner h2{font-size:clamp(21px,1.7vw,26px);line-height:1.2}
 .table-center .turn-steps{gap:8px}
 .table-center .turn-steps li{font-size:14px;line-height:20px;padding:6px 8px}
 .table-center .turn-steps .step-marker{width:22px;height:22px;font-size:12px}
 .table-center .pilearea .piles-title{font-size:18px;line-height:24px;white-space:nowrap}
 .table-center .pilearea .pilelabel{font-size:15px;line-height:22px}
 .table-center .action-dock{width:min(100%,390px);align-content:center}
 .table-center .selection-copy strong{font-size:18px;line-height:24px}
 .table-center .selection-copy p{font-size:15px;line-height:22px;max-width:32ch}
 .table-center .center-activity{display:grid;grid-template-columns:1fr;gap:4px;max-width:32ch;border-left:3px solid #e5c67f;padding:2px 0 2px 16px;color:#fff8e8}
 .table-center .activity-label{font-size:13px;line-height:18px;color:#d9e1d0}
 .table-center .activity-player{font-size:18px;line-height:24px}
 .table-center .activity-detail{font-size:16px;line-height:24px;color:#f3f2e7}
}
@media(min-width:768px) and (max-width:999px){
 .table-center .turn-steps{gap:2px}
 .table-center .turn-steps li{font-size:12px;padding:5px}
 .table-center .activity-detail{font-size:14px;line-height:20px}
}

/* Public boards keep the actual playing-card faces at every density. */
.playing #otherPlayers .other-panel[data-panel] .public-sets.physical-card-grid{box-sizing:border-box;grid-template-columns:repeat(var(--public-columns,3),var(--public-card-width,60px));grid-template-rows:repeat(var(--public-rows,1),var(--public-card-height,84px));gap:12px;padding:6px 8px 10px;height:100%;min-height:0;justify-content:space-between;align-content:start;align-items:start;justify-items:start}
.playing #otherPlayers .other-panel[data-panel] .public-sets.physical-card-grid>.meld-tile.face-meld{width:var(--public-card-width,60px);height:var(--public-card-height,84px);max-width:none;max-height:none;min-height:0;aspect-ratio:5/7;justify-self:start}
.playing .other-panel>.range-pager{height:32px;min-height:32px;gap:4px;align-self:end}
.playing .other-panel>.range-pager button{min-height:32px;height:32px;padding:4px 6px;font-size:11px}
.playing .other-panel>.range-pager .page-range{font-size:10px}
@media(min-width:1200px){
 html[data-center-table] .playing .other-panel:has(>.range-pager:not([hidden])){grid-template-rows:32px minmax(0,1fr) 32px;row-gap:4px}
}
@media(min-width:1200px) and (min-height:1500px){
 html[data-center-table] .playing .other-panel:has(>.range-pager:not([hidden])){grid-template-rows:44px minmax(0,1fr) 32px}
}
@media(max-width:1199px){
 .playing #yourPanel #melds.physical-card-grid{box-sizing:border-box;grid-template-columns:repeat(var(--public-columns,3),var(--public-card-width,60px));grid-template-rows:repeat(var(--public-rows,1),var(--public-card-height,84px));gap:12px;padding:6px 18px 10px;height:100%;min-height:0;justify-content:space-between;align-content:start;align-items:start;justify-items:start}
 .playing #yourPanel #melds.physical-card-grid>.meld-tile.face-meld{width:var(--public-card-width,60px);height:var(--public-card-height,84px);max-width:none;max-height:none;min-height:0;aspect-ratio:5/7;justify-self:start}
}
@media(min-width:768px) and (max-width:1199px){
 .playing .other-panel[data-panel]{grid-template-rows:48px minmax(0,1fr) auto}
 .playing #yourPanel #melds.physical-card-grid{padding-right:62px}
}
@media(max-width:767px){
 .playing.inspecting .other-panel.mobile-current{grid-template-rows:38px minmax(0,1fr) 44px}
 .playing .other-panel>.range-pager,.playing #ownBoardPager .range-pager{height:44px;min-height:44px;gap:4px}
 .playing .other-panel>.range-pager button,.playing #ownBoardPager .range-pager button{height:44px;min-height:44px;padding:4px 6px;font-size:11px}
 .playing .other-panel .status-corner{font-size:7px;line-height:9px}
}

/* Completed-round totals stay with each player's identity. */
.cumulative-score{display:inline-flex;align-items:baseline;align-self:center;gap:3px;white-space:nowrap;color:#304c37;font:600 13px/18px 'DM Sans',system-ui,sans-serif;font-variant-numeric:tabular-nums}
.cumulative-score[hidden]{display:none!important}
.cumulative-score .score-unit{font-size:10px;font-weight:500}
.cumulative-score.negative-score{color:#82462f}
.opponent-player-card>.cumulative-score{margin-right:8px}
.opponent-player-card:has(>.cumulative-score:not([hidden])) .opponent-name{padding-right:0}
.your-name>.cumulative-score{margin-left:10px;font-size:14px;vertical-align:middle}
.score-cumulative{margin:0 0 12px;color:#3f5e43;font-size:14px;line-height:20px;font-weight:600}
.player-tabs .player-tab .player-tab-identity{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;column-gap:2px;row-gap:0;width:100%;overflow:visible}
.player-tab-identity .tab-player-name{flex:none;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player-tabs .cumulative-score{margin:0;font-size:9px;line-height:12px;gap:0}
.player-tabs .cumulative-score .score-unit{display:none}
@media(min-width:768px) and (max-width:1599px){
 .opponent-player-card>.cumulative-score{font-size:11px;line-height:16px;margin-right:6px}
}
@media(min-width:768px) and (max-width:1199px){
 .playing .other-panel:has(.cumulative-score:not([hidden])) .player-book-status .books-label{display:none}
}
@media(max-width:767px){
 .player-tabs:has(.cumulative-score:not([hidden])){height:auto;min-height:80px;flex-basis:auto}
 .player-tabs:has(.cumulative-score:not([hidden])) .player-tab{height:auto;max-height:none;min-height:64px}
 .player-tabs:has(.cumulative-score:not([hidden])) .tab-player-name{font-size:10px;line-height:14px}
}

/* Event previews sit with the existing audio and volume controls. */
.utility-dialog .sound-preview{margin-top:8px}
.utility-dialog .sound-preview summary{cursor:pointer;min-height:36px;padding:8px 0;color:#315e42;font-size:13px;font-weight:600}
.utility-dialog .sound-preview-controls{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.utility-dialog .sound-preview-controls label{font-size:13px;color:#506a55}
.utility-dialog .sound-preview-controls select{flex:1 1 150px;min-height:44px;padding:8px;border:1px solid #8a9d82;border-radius:5px;background:#fff9ed;color:#304c37}
.utility-dialog .sound-preview-status{min-height:18px;margin:6px 0 0;font-size:12px;color:#506a55}
.player-avatar img{display:block;width:100%;height:100%;object-fit:cover}
.utility-dialog .avatar-picker{margin:8px 0 0;border-top:1px solid #c7cfb9}
.utility-dialog .avatar-picker summary{min-height:44px;padding:12px 0;cursor:pointer;font-size:13px;font-weight:600;color:#315e42}
.utility-dialog .avatar-picker-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px 18px;padding-bottom:12px}
.utility-dialog .avatar-picker-group h4{margin:0 0 6px;font-size:12px;line-height:18px;color:#506a55}
.utility-dialog .avatar-picker-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px}
.utility-dialog .avatar-choice{display:grid;place-items:center;min-width:0;min-height:44px;padding:3px;border:1px solid #adbaa4;border-radius:5px;background:#f8f4e6}
.utility-dialog .avatar-choice img{display:block;width:100%;max-width:44px;aspect-ratio:1}
.utility-dialog .avatar-choice[aria-pressed=true]{border:2px solid #a94f38;background:#ead5b8}
@media(max-width:420px){.utility-dialog .avatar-picker-groups{grid-template-columns:1fr}.utility-dialog .avatar-picker-grid{grid-template-columns:repeat(4,48px)}}
@media(max-width:767px){.utility-dialog .menu-section:nth-child(3){display:block}.utility-dialog .menu-section:nth-child(3) h3{margin-bottom:8px}.utility-dialog .motion-settings{max-width:100%}}

.dock-actions #play.draw-callout:not(:disabled){box-shadow:0 0 0 2px #f8e7bb,0 0 0 3px #8d472f}

/* Keep card edges above the artwork in every hand presentation. */
.handzone #hand .card{isolation:isolate}
.handzone #hand.hand-layout-changing>.card{transition:none!important}
.handzone #hand .card:before{display:block;content:'';position:absolute;inset:0;border:1px solid #65715c;border-radius:inherit;opacity:1;background:none;box-shadow:none;transform:none;z-index:40;pointer-events:none}
.handzone #hand .card.selected:before{border-width:3px;border-color:#e6c276}

/* Enlarge indices when hand or discard cards need to be small. */
:is(.handzone #hand,.pilearea #discard) .card{container-type:inline-size;container-name:table-card}
@container table-card (max-width:130px){
 :is(.handzone #hand,.pilearea #discard) .card>.corner:not(.bottom){display:flex!important;visibility:visible!important;position:absolute;z-index:30;top:3px;left:3px;flex-direction:column;align-items:center;min-width:25px;padding:2px 2px 1px;border-radius:3px;background:#fffaf0;color:#202925;text-shadow:none;font:800 clamp(18px,22cqi,26px)/.9 'DM Sans',system-ui,sans-serif;letter-spacing:-.04em;pointer-events:none}
 :is(.handzone #hand,.pilearea #discard) .card>.corner:not(.bottom) span{display:block;margin:2px 0 0;font:700 clamp(13px,16cqi,18px)/1 Georgia,serif}
 :is(.handzone #hand,.pilearea #discard) .card.red>.corner:not(.bottom){color:#a32b2e}
 html[data-four-color="true"] :is(.handzone #hand,.pilearea #discard) .card.suit-club>.corner:not(.bottom){color:#08723c!important}
 html[data-four-color="true"] :is(.handzone #hand,.pilearea #discard) .card.suit-diamond>.corner:not(.bottom){color:#174eb6!important}
 :is(.handzone #hand,.pilearea #discard) .card>.corner.joker-index:not(.bottom){font-size:clamp(11px,13cqi,14px)!important;line-height:1!important;letter-spacing:-.05em}
}

/* On a wide three-player table, give each opponent a full row beside the discard. */
@media (min-width:1600px) and (min-height:900px) and (max-height:1499px){
 html[data-center-table][data-multiplayer-seats="3"] .table{
  grid-template-columns:minmax(0,1fr) minmax(300px,25%);
  grid-template-rows:calc(var(--opp-h) + var(--center-height) + 16px) var(--own-h) var(--center-hand-height);
 }
 html[data-center-table][data-multiplayer-seats="3"] .playing>.other-players{
  grid-column:1;grid-row:1;grid-template-columns:minmax(0,1fr);grid-auto-rows:minmax(0,1fr);height:100%;gap:10px;
 }
 html[data-center-table][data-multiplayer-seats="3"] .table-center{
  grid-column:2;grid-row:1;height:100%;grid-template-columns:minmax(0,1fr);
  grid-template-rows:auto minmax(0,1fr) auto;gap:8px;padding:16px;align-content:center;
 }
 html[data-center-table][data-multiplayer-seats="3"] .table-center .center-turn{grid-column:1;grid-row:1;justify-self:center;align-items:center;text-align:center;gap:6px}
 html[data-center-table][data-multiplayer-seats="3"] .table-center .turn-banner{align-items:center;gap:6px}
 html[data-center-table][data-multiplayer-seats="3"] .table-center .turn-banner h2{font-size:21px}
 html[data-center-table][data-multiplayer-seats="3"] .table-center .pilearea{grid-column:1;grid-row:2;gap:6px}
 html[data-center-table][data-multiplayer-seats="3"] .table-center .action-dock{grid-column:1;grid-row:3;justify-self:center}
 html[data-center-table][data-multiplayer-seats="3"] .playing>.player-panel[data-panel=you]{grid-column:1/-1;grid-row:2}
 html[data-center-table][data-multiplayer-seats="3"] .handzone{grid-column:1/-1;grid-row:3}
}