/* The game name belongs to the opening screen. Gameplay uses a compact utility row. */
.in-game .topbar{height:56px;padding:4px max(16px,4vw);gap:8px;width:100%;display:grid;grid-template-columns:48px minmax(0,1fr) auto}
.in-game .brand{width:48px;justify-content:center}
.in-game .topbar button:focus-visible{outline-offset:-4px}
.game-context{min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.context-label{font:800 .86rem/1.15 var(--display);color:var(--paper);text-align:center}
.game-context .phase-track{margin:0;gap:4px}
.game-context .phase-track span{width:12px;height:3px;border-radius:2px}
.in-game #game{min-height:calc(100svh - 56px);padding-top:12px}
.in-game .settings{top:56px;max-height:calc(100svh - 64px);max-height:calc(100dvh - 64px);overflow-y:auto}

/* Reserve the actions first; the secret uses the remaining viewport, never the page. */
body.private-phase{height:100svh;height:100dvh;min-height:0;display:grid;grid-template-rows:56px minmax(0,1fr);overflow:hidden}
.private-phase #game{height:100%;min-height:0;padding:8px max(16px,4vw) 12px;align-items:stretch;overflow:hidden}
.private-screen{height:100%;min-height:0;display:grid;grid-template-rows:minmax(0,1fr) auto;align-items:stretch;gap:12px;max-width:490px}
.private-screen .dossier-wrap{height:100%;min-height:0;max-width:none;display:grid;align-items:center}
.private-screen .dossier{height:100%;max-height:420px;min-height:0;padding:16px;gap:12px}
.private-screen .dossier>.turn-holder{gap:12px;padding-bottom:8px}
.private-screen .dossier .portrait{width:44px;height:50px}
.private-screen .holder-name{font-size:1.8rem;line-height:1}
.private-screen .holder-role{font-size:.76rem;line-height:1.2;margin-top:4px}
.private-screen .sealed-content{gap:12px}
.private-screen .sealed-mark{width:56px;height:56px;flex-shrink:0}
.private-screen .sealed-mark svg{width:28px;height:28px}
.private-screen .sealed-title{font-size:1.35rem;line-height:1.1}
.private-screen .private-content{gap:12px}
.private-screen .identity h2{font-size:1.4rem;line-height:1.05}
.private-screen .secret-block{padding-top:10px}
.private-screen .secret-text{font-size:1rem;line-height:1.35}
.private-screen .impulse{font-size:.94rem;line-height:1.35}
.private-actions{width:100%;display:flex;flex-direction:column;align-items:stretch;gap:8px;min-height:0}
.peek-controls{display:block}
.private-screen .peek-button{margin:0;min-height:56px;font-size:1.05rem;line-height:1.1;padding:8px 12px;gap:8px}
.private-screen #peek-label{min-height:2.2em;display:flex;align-items:center;justify-content:center}
.private-screen .peek-button>svg{width:20px;height:20px}
.private-screen [data-action=next-player]{width:100%;min-height:58px;margin:0;font-size:1.2rem;line-height:1.15;padding:12px 16px}
.private-screen .action:hover,.private-screen .action:active{transform:none}
.private-screen .action:active{filter:brightness(1.1)}

/* Count, clock and act share one row; guidance keeps its own stable two-line slot. */
.private-screen.relay-playing{max-width:560px;grid-template-rows:auto minmax(0,1fr) auto;gap:8px}
.relay-status{display:flex;align-items:center;justify-content:space-between;gap:16px;min-width:0;width:100%}
.relay-status .relay-heading{text-align:left;min-width:0}
.relay-status .relay-heading h1{font-size:clamp(1.6rem,4vw,2rem);line-height:1}
.relay-status .player-counter{display:block;font-size:.8rem;line-height:1.2;margin-top:6px;min-height:0}
.relay-clock{width:88px;flex-shrink:0;display:grid;grid-template-rows:auto 4px 1em;gap:4px;align-items:center;text-align:center;font-size:.72rem}
.relay-clock .timer-digits{font-size:2.7rem;line-height:1}
.relay-clock .timer-track{height:4px;width:100%}
.relay-clock .paused-tag{font-size:1em;line-height:1;white-space:nowrap}
.private-screen.relay-playing .dossier{padding:12px;gap:8px}
.private-screen.relay-playing .sealed-mark{width:40px;height:40px}
.private-screen.relay-playing .sealed-title{font-size:1.2rem}
.private-screen .relay-private{min-height:0}
.private-screen .relay-private h2{font-size:2.1rem;line-height:1.05}
.private-screen .relay-card-actions{max-width:none;gap:8px}
.private-screen .relay-card-actions .action{min-height:48px;padding:8px 12px;font-size:1.2rem;line-height:1.15;gap:8px}
.private-screen .card-instruction{height:2.5em;min-height:2.5em;width:100%;max-width:none;font-size:.82rem;line-height:1.25}
.private-screen .action-row{width:100%;gap:8px;flex-wrap:nowrap;justify-content:space-between}
.private-screen .action-row .text-button{display:flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:8px;font-size:.95rem;line-height:1.2}
.private-screen .card-feedback{padding:16px;gap:10px}
.private-screen.relay-playing .card-feedback>.portrait{width:44px;height:50px}
.private-screen .card-feedback strong{font-size:2rem;line-height:1}
.private-screen .card-feedback span{font-size:.9rem;line-height:1.2}
@media(max-height:650px){.private-screen.relay-playing .sealed-mark{width:32px;height:32px}.private-screen.relay-playing .sealed-content{gap:8px}}

/* Short screens dock controls beside the card instead of shrinking the touch targets. */
@media(max-height:480px) and (min-width:600px){
 .private-screen.deal-screen,.private-screen.relay-playing{max-width:900px;grid-template-columns:minmax(0,1fr) 250px;grid-template-rows:minmax(0,1fr);gap:16px}
 .private-screen.relay-playing{grid-template-rows:auto minmax(0,1fr);gap:8px 16px}
 .relay-status{grid-column:1/-1}
 .private-screen .dossier{max-height:none}
 .private-screen .private-actions{height:100%}
 .private-screen.deal-screen [data-action=next-player]{margin-top:auto}
 .private-screen.relay-playing .private-actions{justify-content:flex-end}
}