/* One identity, score and status layout across all four public boards. */
.playing .player-panel{container-type:inline-size}
html .playing .player-panel[data-panel]>.player-board-header{
 --identity-bleed:12px;display:grid;grid-template-columns:max-content max-content minmax(0,1fr);grid-template-rows:auto;
 align-items:center;align-content:start;gap:8px 16px;height:36px;min-height:0;padding:0;margin:0;color:#304c37;
}
html .playing .player-panel[data-panel] .player-board-header>.player-identity-card{
 display:flex;align-items:center;gap:10px;grid-column:1;grid-row:1;justify-self:start;align-self:start;
 width:max-content;max-width:none;margin:-8px 0 0 -12px;padding:0 12px 0 0;min-height:44px;
 background:#d8dfc9;border:0;border-radius:8px 0 8px 0;overflow:hidden;transform:none;
}
html .playing .player-panel[data-panel] .player-identity-card .player-avatar{width:44px;height:44px;border-radius:0;grid-area:auto}
.player-identity-copy{display:flex;align-items:center;gap:12px;min-width:0;flex:none}
html .playing .player-panel[data-panel] .player-identity-card .player-name{
 display:block;flex:none;max-width:24ch;margin:0;padding:0;color:#304c37;font:700 15px/20px 'DM Sans',system-ui,sans-serif;
 white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
html .playing .player-panel[data-panel] .player-board-header>:is(.player-book-status,#yourBooks){
 position:static;inset:auto;display:flex;grid-column:2;grid-row:1;justify-self:start;align-self:center;
 margin:0;border-radius:4px;background:#d8dfc9;overflow:hidden;transform:none;
}
html .playing .player-panel[data-panel] .player-board-header .book-summary{margin:0;order:initial;align-self:stretch;border-radius:0}
html .playing .player-panel[data-panel] .player-board-header>.player-board-status{
 display:flex;align-items:center;justify-content:flex-end;flex-wrap:wrap;gap:4px 10px;
 grid-column:3;grid-row:1;justify-self:end;min-width:0;margin:0;padding:0;
 color:#52634b;font:500 12px/18px 'DM Sans',system-ui,sans-serif;
}
.player-board-status .phase-line{margin:0;white-space:nowrap}
.player-board-status .turn-indicator{margin:0}
html .playing #yourBoardDetail{color:#52634b;font-size:11px;line-height:16px}
.player-board-header .cumulative-score{
 display:inline-flex;align-items:center;align-self:center;gap:0;margin:0;
 color:#304c37;background:#f7f3e7;border-radius:4px;overflow:hidden;
 font:600 13px/20px 'DM Sans',system-ui,sans-serif;
}
.player-board-header .cumulative-score[hidden]{display:none!important}
.cumulative-score .score-points{display:inline-flex;align-items:baseline;gap:3px}
.player-board-header .cumulative-score .score-points{padding:2px 7px}
.player-board-header .cumulative-score .score-value{font-weight:700;font-size:14px;font-variant-numeric:tabular-nums}
.player-board-header .cumulative-score .score-unit{color:#52634b;font-size:10px;line-height:14px}
.player-board-header .cumulative-score.negative-score .score-value{color:#82462f}
.player-board-header .cumulative-score .compact-standing{
 display:inline-flex;align-items:center;gap:4px;align-self:stretch;margin:0;padding:2px 7px;
 border:0;border-left:1px solid #c7b270;border-radius:0;background:#e8cf8b;font-size:11px;line-height:20px;
}
.player-board-header .cumulative-score .compact-standing svg{width:15px;height:15px}
.player-board-header .cumulative-score .compact-standing.place-2{border-left-color:#b3c1b8;background:#d7dfdc;color:#344b45}
.player-board-header .cumulative-score .compact-standing.place-3{border-left-color:#c8a37e;background:#e2c7ad;color:#634328}
/* Narrow opponent boards keep the same groups, with score directly under name. */
@container (max-width:620px){
 .player-board-header .player-identity-copy{flex-direction:column;align-items:flex-start;gap:0;padding-block:3px}
 html .playing .player-panel[data-panel] .player-identity-card .player-name{font-size:13px;line-height:17px;max-width:12ch}
 .player-board-header .cumulative-score{align-self:flex-start;font-size:11px;line-height:16px;background:transparent;border-radius:0}
 .player-board-header .cumulative-score .score-points{padding:0 5px 0 0}
 .player-board-header .cumulative-score .score-value{font-size:12px}
 .player-board-header .cumulative-score .compact-standing{padding:0 5px;gap:3px;font-size:10px;line-height:16px;border-radius:3px;border-left:0}
 .player-board-header .cumulative-score .compact-standing svg{width:12px;height:12px}
 html .playing .player-panel[data-panel]>.player-board-header{column-gap:10px}
 html .playing .player-panel[data-panel] .player-board-header>.player-identity-card{gap:7px;padding-right:8px}
 html .playing .player-panel[data-panel] .player-board-header>.player-board-status{font-size:11px;column-gap:6px}
 html .playing .player-panel[data-panel] .player-board-header :is(.player-book-status,#yourBooks) .books-label{display:none}
}
@container (max-width:400px){
 html .playing .player-panel[data-panel]>.player-board-header{grid-template-columns:minmax(0,1fr) max-content;grid-template-rows:26px 22px;gap:0 6px;height:48px}
 html .playing .player-panel[data-panel] .player-board-header>.player-identity-card{grid-column:1;grid-row:1/3;max-width:calc(100% + var(--identity-bleed));margin-top:-8px}
 html .playing .player-panel[data-panel] .player-board-header>:is(.player-book-status,#yourBooks){grid-column:2;grid-row:1;justify-self:end}
 html .playing .player-panel[data-panel] .player-board-header>.player-board-status{grid-column:2;grid-row:2;gap:3px;font-size:10px;line-height:16px}
 .player-board-header .turn-indicator{font-size:8px;line-height:12px;padding:1px 3px}
 .player-board-header :is(.player-book-status,#yourBooks) .book-icon-pill{font-size:9px;line-height:16px;min-height:20px;padding:2px 4px}
 .player-board-header :is(.player-book-status,#yourBooks) :is(.book-kind,.book-badge-num){font-size:9px;line-height:16px}
 html .playing .player-panel[data-panel] .player-board-header :is(.player-book-status,#yourBooks) .book-summary{min-height:20px}
 html .playing .player-panel[data-panel] .player-board-header :is(.player-book-status,#yourBooks) .readiness-tag{min-height:20px;min-width:21px;font-size:13px;padding:1px 3px}
}
@media(min-width:768px){
 html .playing .other-panel[data-panel]{grid-template-rows:minmax(40px,max-content) minmax(0,1fr) auto}
 html[data-center-table] .playing .other-panel[data-panel]{grid-template-rows:minmax(40px,max-content) minmax(0,1fr)}
 html[data-center-table] .playing>.player-panel[data-panel=you]{grid-template-rows:minmax(36px,max-content) minmax(0,1fr)}
 html[data-center-table] .playing .other-panel[data-panel]:has(>.range-pager:not([hidden])){grid-template-rows:minmax(40px,max-content) minmax(0,1fr) 32px}
}
@media(max-width:1199px) and (min-width:768px){
 html .playing .player-panel[data-panel]>.player-board-header{--identity-bleed:6px}
 html .playing .player-panel[data-panel] .player-board-header>.player-identity-card{margin-left:-6px;margin-top:-6px}
 html .playing .player-panel[data-panel] .player-identity-card .player-avatar{width:38px;height:44px}
 html .playing .other-panel[data-panel]{grid-template-rows:minmax(40px,max-content) minmax(0,1fr) auto}
}
@media(max-width:767px){
 html .playing #yourPanel,html .playing.inspecting .other-panel.mobile-current{grid-template-rows:minmax(48px,max-content) minmax(0,1fr) auto}
 html .playing .player-panel[data-panel]>.player-board-header{--identity-bleed:6px}
 html .playing .player-panel[data-panel] .player-board-header>.player-identity-card{margin:-6px 0 0 -6px;padding-right:8px;min-height:44px}
 html .playing .player-panel[data-panel] .player-identity-card .player-avatar{width:38px;height:44px}
 html .playing>.player-panel[data-panel=you] .sectiontitle.player-board-header{display:grid;height:auto;min-height:44px}
 .player-board-status .board-detail{display:none}
}

/* A clear turn marker that follows ownership without moving the cards. */
html .playing #yourPanel.current-turn,html .playing #otherPlayers .player-panel.current-turn{
 outline:5px solid #f2ca61;outline-offset:0;background:#fff2cf;
 box-shadow:inset 0 0 0 1px #b88c2d;
}
html .playing .player-panel[data-panel].current-turn .player-board-header>.player-identity-card{background:#f0d58e}
html .playing .player-panel.current-turn .turn-indicator{background:#34533d;color:#fff8e8}
.player-tabs .player-tab.current-turn{
 outline:4px solid #f2ca61;outline-offset:-1px;border-color:#b88c2d;background:#fff2cf;color:#304c37;
 box-shadow:inset 0 0 0 1px #b88c2d;
}

/* The actual Hand → Foot change briefly marks that player's phase indicator. */
html :is(.player-phase.phase-line,#yourPhase).phase-changed{
 background:#f2ca61;color:#304c37;padding:2px 5px;border-radius:4px;font-weight:700;
 box-shadow:inset 0 0 0 1px #b88c2d;
}
.phase-change-from{display:inline-flex;align-items:center;gap:3px;flex:none}
.phase-change-arrow{font-size:13px;font-weight:700;line-height:1;color:#304c37}
.phase-changed>.phase-icon.phase-foot{animation:foot-icon-arrive 760ms ease-out both;animation-delay:var(--phase-cue-elapsed,0ms)}
.phase-change-from>.phase-hand{animation:hand-icon-complete 760ms ease-out both;animation-delay:var(--phase-cue-elapsed,0ms)}
@keyframes foot-icon-arrive{0%{opacity:.2;transform:translateY(-5px) rotate(-12deg)}45%{opacity:1;transform:translateY(1px) rotate(4deg)}100%{opacity:1;transform:none}}
@keyframes hand-icon-complete{0%{opacity:1}100%{opacity:.4}}
.phase-cue-still>.phase-icon.phase-foot,.phase-cue-still .phase-change-from>.phase-hand{animation:none}
@media(prefers-reduced-motion:reduce){.phase-changed>.phase-icon.phase-foot,.phase-change-from>.phase-hand{animation:none}}
@media(max-width:767px){
 html .player-tabs .player-phase.phase-changed{gap:2px;padding:2px 3px;font-size:8px}
 .player-tabs .phase-change-from{display:none}
 .player-tabs .phase-changed .phase-left-word{display:none}
}

/* Keep player information beside the board so melds can use its full height. */
@media(min-width:1200px) and (max-height:1499px){
 html[data-center-table] .playing .player-panel[data-panel]{grid-template-columns:var(--player-rail-width) minmax(0,1fr);grid-template-rows:minmax(0,1fr) auto;column-gap:12px;row-gap:4px}
 html[data-center-table] .playing .player-panel[data-panel]>.player-board-header{grid-column:1;grid-row:1/-1;display:flex;flex-direction:column;align-items:flex-start;align-self:stretch;justify-content:flex-start;gap:8px;width:100%;height:auto;min-width:0;overflow:hidden}
 html[data-center-table] .playing .player-panel[data-panel] .player-board-header>.player-identity-card{position:static;display:flex;grid-area:auto;align-self:flex-start;justify-self:start;gap:7px;width:100%;max-width:100%;min-height:36px;margin:0;padding:0 4px 0 0;border-radius:6px;transform:none}
 html[data-center-table] .playing .player-panel[data-panel] .player-identity-card .player-avatar{width:36px;height:36px;flex:none}
 html[data-center-table] .playing .player-panel[data-panel] .player-identity-copy{display:flex;flex:1;min-width:0;flex-direction:column;align-items:flex-start;gap:1px;padding:2px 0}
 html[data-center-table] .playing .player-panel[data-panel] .player-identity-card .player-name{max-width:100%;font-size:13px;line-height:16px;white-space:normal;overflow-wrap:anywhere}
 html[data-center-table] .playing .player-panel[data-panel] .player-board-header>:is(.player-book-status,#yourBooks){position:static;grid-area:auto;align-self:flex-start;justify-self:start;max-width:100%;margin:0;transform:none}
 html[data-center-table] .playing .player-panel[data-panel] .player-board-header>:is(.player-book-status,#yourBooks){justify-content:flex-start;overflow:visible}
 html[data-center-table] .playing .player-panel[data-panel] .player-board-header :is(.player-book-status,#yourBooks) .books-label{display:none}
 html[data-center-table] .playing .player-panel[data-panel] .player-board-header>.player-board-status{grid-area:auto;align-self:flex-start;justify-self:start;justify-content:flex-start;gap:4px 8px;font-size:12px;line-height:18px}
 html[data-center-table] .playing .player-panel[data-panel] .cumulative-score{align-self:flex-start;font-size:11px;line-height:16px}
 html[data-center-table] .playing .player-panel[data-panel] .cumulative-score .score-value{font-size:12px}
 html[data-center-table] .playing .other-panel[data-panel]>.public-sets{grid-column:2;grid-row:1;min-width:0;min-height:0}
 html[data-center-table] .playing .other-panel[data-panel]>.range-pager{position:absolute;left:12px;bottom:8px;width:calc(var(--player-rail-width) - 12px);height:32px;justify-content:flex-start}
 html[data-center-table] .playing .other-panel[data-panel]>.range-pager button{min-width:32px}
 html[data-center-table] .playing .other-panel[data-panel]:has(>.range-pager:not([hidden])){grid-template-rows:minmax(0,1fr)}
 html[data-center-table] .playing .other-panel[data-panel]:has(>.range-pager:not([hidden]))>.player-board-header{padding-bottom:36px}
 html[data-center-table] .playing>.player-panel[data-panel=you]>.melds{grid-column:2;grid-row:1;min-width:0;min-height:0;padding:6px 20px 8px 6px}
 html[data-center-table] .playing #melds.meld-grid .meld-tile.face-meld{width:min(100%,var(--own-card-width),calc((var(--own-h) - 32px)*5/7));height:auto;aspect-ratio:5/7}
 html[data-center-table] #yourPanel:has(.own-board-pager .range-pager:not([hidden])){grid-template-rows:minmax(0,1fr) auto}
 html[data-center-table] #yourPanel .own-board-pager{top:auto;bottom:6px;left:8px;transform:none;width:var(--player-rail-width);max-width:none}
 html[data-center-table] .playing .other-panel .status-corner{font-size:10px;line-height:13px}
 html[data-center-table] .playing .other-panel .book-ink-stamp{font-size:12px;line-height:14px}
}
@media(min-width:1200px) and (max-width:1599px) and (max-height:1499px){
 html[data-center-table] .playing .player-panel[data-panel]>.player-board-header{gap:4px}
 html[data-center-table] .playing .player-panel[data-panel] .player-identity-card .player-name{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;overflow-wrap:normal}
 html[data-center-table] .playing .player-panel[data-panel] .player-board-header>.player-identity-card{flex:none}
 html[data-center-table] .playing .player-panel[data-panel] .cumulative-score .score-unit,html[data-center-table] .playing .player-panel[data-panel] .compact-standing svg{display:none}
 html[data-center-table] .playing .player-panel[data-panel] .cumulative-score .score-points{padding:0 4px 0 0}
 html[data-center-table] .playing .player-panel[data-panel] .cumulative-score .compact-standing{padding:0 4px}
}

/* Use the full player rail when desktop boards have room for larger details. */
@media (min-width:1600px) and (min-height:1000px) and (max-height:1499px){
 html[data-center-table] .playing .player-panel[data-panel]>.player-board-header{justify-content:space-between;gap:6px}
 html[data-center-table] .playing .player-panel[data-panel] .player-board-header>.player-identity-card{min-height:52px;align-items:center;gap:8px}
 html[data-center-table] .playing .player-panel[data-panel] .player-identity-card .player-avatar{width:48px;height:52px}
 html[data-center-table] .playing .player-panel[data-panel] .player-identity-card .player-name{font-size:15px;line-height:18px;white-space:normal;overflow-wrap:anywhere;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}
 html[data-center-table] .playing .player-panel[data-panel] .cumulative-score .score-value{font-size:14px;line-height:19px}
 html[data-center-table] .playing .player-panel[data-panel] .cumulative-score .compact-standing{font-size:11px;line-height:19px}
 html[data-center-table] .playing .player-panel[data-panel] .player-board-header>:is(.player-book-status,#yourBooks){max-width:100%;flex-wrap:wrap}
 html[data-center-table] .playing .player-panel[data-panel] .player-board-header :is(.player-book-status,#yourBooks) .book-summary{flex-wrap:wrap;white-space:normal}
 html[data-center-table] .playing .player-panel[data-panel] .player-board-header :is(.player-book-status,#yourBooks) .book-summary:has(.no-books) .books-label{display:inline-flex;font-size:12px;line-height:18px}
 html[data-center-table] .playing .player-panel[data-panel] .player-board-header :is(.player-book-status,#yourBooks) :is(.book-kind,.book-badge-num){font-size:12px;line-height:18px}
 html[data-center-table] .playing .player-panel[data-panel] .player-board-header>.player-board-status{font-size:14px;line-height:20px}
 html[data-center-table] .playing .player-panel[data-panel] .player-board-status .turn-indicator{font-size:10px;line-height:16px}
 html[data-center-table] .playing #yourBoardDetail{font-size:12px;line-height:18px}
}
@media (min-width:1600px) and (max-width:1799px) and (min-height:1000px) and (max-height:1499px){
 html[data-center-table] .playing .player-panel[data-panel] .player-identity-card .player-avatar{width:40px;height:48px}
 html[data-center-table] .playing .player-panel[data-panel] .cumulative-score .score-unit,
 html[data-center-table] .playing .player-panel[data-panel] .compact-standing svg{display:none}
 html[data-center-table] .playing .player-panel[data-panel] .player-board-header :is(.player-book-status,#yourBooks) .book-kind{display:none}
}