/* Game controls stay on one screen. Secondary content opens separately. */
body.play{height:100dvh;min-height:0;overflow:hidden}
body.play #app{height:100%;width:100%;max-width:2200px;margin:auto;display:flex;flex-direction:column}
.play .table-header,.play .play-main{width:100%;margin:0}
.play .table-header{flex:none;min-height:70px;height:70px;padding:5px 24px;gap:12px;flex-wrap:nowrap}
.play .brand>img.wordmark{height:58px}
.play .header-meta{order:0;flex-basis:auto;border:0;padding:0}
.play .phase-label{max-width:none}
.play .play-main{flex:1;min-height:0;padding:14px 24px 8px;display:flex;flex-direction:column;gap:10px}
.play .play-table{flex:1;min-height:0;height:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(230px,29%);grid-template-rows:58px minmax(0,1fr) 160px;grid-template-areas:"opponents local" "question local" "decision decision";gap:12px}
.play .opponents{min-height:0;padding:0;gap:12px}
.play .opponent{min-width:0;padding:5px 10px;gap:8px;align-items:center}
.play .opponent h2{font-size:20px;margin:0;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.play .opponent-chips{margin-left:auto;flex-shrink:0}
.play .opponent-chips b{font-size:20px}
.play .opponent-chips small{font-size:11px}
.play .play-question{min-height:0;display:flex}
.play .question-panel{min-height:0;height:100%;width:100%;padding:24px 34px;display:flex;flex-direction:column;justify-content:center;overflow:auto}
.play .question-panel h1{font-size:clamp(25px,3.2vw,48px);line-height:1.12;margin:10px 0 12px;overflow-wrap:anywhere}
.play .question-panel p{font-size:15px;line-height:1.35;margin:0}
.play .question-panel .eyebrow{font-size:12px}
.play .question-panel .guesses{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px 12px;margin:4px 0}
.play .question-panel .guesses>div{font-size:14px;padding:4px 0}
.play .question-panel .guesses>div>span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.play .question-panel .guesses strong{flex-shrink:0}
.play .question-panel .guesses strong{font-size:26px}
.play .question-panel .answer{padding-top:6px;margin-top:6px;gap:6px 12px}
.play .question-panel .answer>strong{font-size:40px}
.play .question-panel .answer p{font-size:13px;line-height:1.3}
.play .result-numbers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.play .result-numbers>div{min-width:0}
.play .result-numbers>div>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.play .match-result{overflow-wrap:anywhere}
.play .decision-row{grid-template-columns:160px 185px minmax(0,1fr) 240px;grid-template-rows:1fr;gap:12px;min-height:0}
.play .answer-pad,.play .estimate{min-height:0;padding:15px 20px;display:flex;flex-direction:column;justify-content:center}
.play .guess-form{gap:5px;min-height:0}
.play .guess-label{font-size:14px;gap:4px;line-height:1.2}
.play .guess-label input{height:53px;min-height:0;font-size:36px;line-height:1;padding:0 5px}
.play .save-guess{height:34px;min-height:34px;font-size:14px;border-width:8px;border-image-width:8px}
.play .save-state{font-size:11px;line-height:1.2;text-align:center}
.play .estimate>span{font-size:15px}
.play .estimate strong,.play .revealed-total{font-size:44px;line-height:1.1;margin:6px 0}
.play .estimate strong small,.play .revealed-total small{font-size:22px}
.play .estimate p{font-size:11px;line-height:1.3;margin:0}
.play .personal-hand{min-height:0;overflow:hidden;padding:4px;display:flex;flex-direction:column;justify-content:center}
.play .personal-hand .hand{width:100%;min-height:0;display:flex;gap:3px;justify-content:center}
.play .personal-hand .answer-card{width:clamp(35px,4vw,65px);max-width:none;max-height:110px;height:auto;object-fit:contain;flex-shrink:1;min-width:0;transform:none}
.play .personal-hand>small{font-size:11px;margin-top:4px;text-align:center}
.play .player-actions{min-height:0;grid-column:auto}
.play .draw-actions{height:100%;flex-direction:column;gap:8px;justify-content:center}
.play .draw-actions>button{width:100%;max-width:none;min-height:52px;font-size:24px}
.play .turn-message{font-size:21px;line-height:1.3;padding:8px}
.player-utility{display:flex;justify-content:flex-end;gap:10px;flex:none;height:38px}
.player-utility>button{font-size:14px;min-height:34px;padding:1px 12px;border-width:8px;border-image-width:8px}
.play .camera-sheet:not([open]){display:block;position:static;grid-area:local;inset:auto;width:100%;max-width:none;height:100%;max-height:none;margin:0;padding:0;border:0;background:none;overflow:visible;color:inherit}
.play .camera-sheet:not([open])>[data-action=closeSheet]{display:none}
.play .camera-sheet .local-seat{height:100%;min-height:0;padding:0 0 30px}
.play .camera-sheet .local-preview{flex:1;min-height:0;height:0;aspect-ratio:auto}
.play .camera-sheet .wallet{min-height:48px;height:48px;padding:0 12px}
.play .camera-sheet .wallet b{font-size:26px}
.play .camera-sheet .camera-settings{bottom:0}
.play .camera-sheet .local-name{font-size:21px;padding:5px 16px;display:block;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.camera-off>span{display:block;max-width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.player-sheet{width:min(1000px,94vw);max-width:1000px;max-height:90dvh;overflow:auto;margin:auto}
.player-sheet>button,.camera-sheet[open]>button{float:right;margin-bottom:12px}
.player-sheet h2{margin:8px 0 16px;clear:both;font-size:26px}
.player-sheet>button,.camera-sheet[open]>button{font-size:16px;min-height:38px;padding:6px 14px}
.player-sheet .my-questions{clear:both;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.my-question .compact-guess{display:grid;grid-template-columns:1fr;gap:12px}
.my-question .compact-guess label{display:flex;flex-direction:column;gap:6px;min-width:0;font-size:14px;line-height:1.3;text-align:left;text-transform:none;letter-spacing:0;color:#e8d6aa}
.my-question .compact-guess input{width:100%;max-width:100%;min-height:46px;font-size:18px}
.my-question .compact-guess input[name=value]{max-width:110px;text-align:center}
.my-question .compact-guess button,.my-question .compact-guess .save-state{grid-column:1/-1}
.play .decision-row.is-lobby{display:flex;align-items:center;justify-content:center}
.play .profile{display:flex;align-items:flex-end;gap:20px;margin:0;width:100%;justify-content:center;flex-wrap:wrap}
.play .profile label{font-size:16px;flex-basis:auto}
.play .profile input:not([type=checkbox]){max-width:260px}
.play .camera-sheet[open]{width:min(620px,94vw);height:min(620px,85dvh);padding:16px;max-height:90dvh}
.play .camera-sheet[open] .local-seat{height:calc(100% - 65px)}
.play .camera-sheet[open]>button{float:none;display:flex;margin:0 0 10px auto}
.play .camera-sheet[open] .local-seat{clear:both;display:flex;flex-direction:column;width:100%;padding:0;gap:14px;height:calc(100% - 55px)}
.play .camera-sheet[open] .local-preview{flex:1;min-height:100px;width:100%;max-height:240px}
.play .camera-sheet[open] .local-name,.play .camera-sheet[open] .wallet{display:none}
.play .camera-sheet[open] .camera-settings{position:static;width:100%;flex:none}
.play .camera-sheet[open] .device-controls{position:static;width:100%;min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0;border:0;background:none;box-shadow:none}
.play .camera-sheet[open] .device-controls label:has([type=checkbox]),.play .camera-sheet[open] .device-controls .actions{grid-column:1/-1}
.play .camera-sheet[open] .device-controls button{font-size:14px;min-height:40px;padding:4px 8px}
.play .camera-sheet[open] .camera-settings>summary{display:none}
.play .camera-sheet[open] #camera-status{font-size:12px;margin:8px 0 0}
.service-menu .tools{display:flex;flex-direction:column;align-items:stretch;padding-top:12px}
.service-menu .tools>*{width:100%;font-size:14px}
input[type=number]{appearance:textfield;-moz-appearance:textfield}
input[type=number]::-webkit-inner-spin-button,input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
@media(max-width:1100px){
 .play .play-table{grid-template-columns:minmax(0,1fr) 28%;grid-template-rows:52px minmax(0,1fr) 155px}
 .play .decision-row{grid-template-columns:145px 160px minmax(0,1fr) 205px}
 .play .question-panel h1{font-size:30px}
 .play .opponent h2{font-size:17px}
 .play .draw-actions>button{font-size:21px}
}
@media(max-width:760px){
 .play .table-header{height:60px;min-height:60px;padding:4px 12px}
 .play .brand{flex:0 0 auto}.play .brand>img.wordmark{height:48px}
 .play .header-meta{margin-left:auto;font-size:11px;gap:5px}.play .header-meta>span{padding:4px 10px}.play .header-meta b{font-size:17px}
 .play .header-tools .status{font-size:10px;padding:4px 7px}.play .role-label{display:none}
 .play .play-main{padding:8px 10px;gap:8px}
 .play .play-table{grid-template-columns:minmax(0,1fr);grid-template-rows:45px minmax(0,1fr) 216px;grid-template-areas:"opponents" "question" "decision";gap:8px}
 .play .camera-sheet:not([open]){display:none}
 .play .opponents{gap:5px}.play .opponent{padding:4px 7px;gap:4px}.play .opponent h2{font-size:14px;max-width:86px}.play .opponent>div>span{font-size:9px}.play .opponent-chips b{font-size:14px}.play .opponent-chips small{display:none}
 .play .question-panel{padding:20px 24px}.play .question-panel h1{font-size:clamp(21px,5.8vw,30px);margin:8px 0}.play .question-panel p{font-size:12px}.play .question-panel .eyebrow{font-size:10px}
 .play .decision-row{grid-template-columns:1fr 1fr;grid-template-rows:146px 62px;grid-template-areas:"answer estimate" "actions actions";gap:8px}
 .play .answer-pad,.play .estimate{padding:10px 18px}.play .personal-hand{display:none}
 .play .player-actions{grid-area:actions;grid-column:1/-1}.play .draw-actions{flex-direction:row;align-items:stretch}.play .draw-actions>button{font-size:20px;min-height:52px;flex:1}
 .play .turn-message{font-size:17px;padding:4px}.play .guess-label{font-size:12px}.play .guess-label input{height:48px;font-size:32px}
 .play .estimate strong{font-size:40px}.play .estimate>span{font-size:13px}
 .player-utility{height:36px;gap:5px;justify-content:stretch}.player-utility>button{font-size:11px;padding:0 6px;flex:1;line-height:1.2;min-width:0}
 .play .profile{gap:10px;align-items:center}.play .profile label:first-child{flex-basis:100%}.play .profile input:not([type=checkbox]){max-width:100%;width:100%}.play .profile button{min-height:42px}
 .player-sheet .my-questions{grid-template-columns:1fr}.player-sheet{padding:12px;width:96vw}
 .player-sheet .my-question{padding:14px}.player-sheet h2{font-size:24px}
 .play .question-panel .guesses{grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 10px}.play .question-panel .guesses>div{font-size:12px;padding:3px}.play .question-panel .guesses strong{font-size:20px;line-height:1}
 .play .question-panel .answer>strong{font-size:30px}.play .question-panel .answer{padding-top:5px;margin-top:4px}.play .question-panel .answer p{font-size:11px}
 .play .question-panel.revealing{padding-block:10px}
 .play .question-panel.revealing h1{line-height:1.05;margin:6px 0}
 .play .play-table:is([data-phase=reveal],[data-phase=result]){grid-template-rows:45px minmax(0,1fr) 120px}
 .play .play-table:is([data-phase=reveal],[data-phase=result]) .decision-row{grid-template-rows:84px 28px}
 .play .play-table:is([data-phase=reveal],[data-phase=result]) .guess-label input[type=number]{height:32px;min-height:0;font-size:26px;padding:0;border-width:3px;border-image-width:3px}
 .play .play-table:is([data-phase=reveal],[data-phase=result]) .guess-form{gap:2px}
 .play .play-table:is([data-phase=reveal],[data-phase=result]) .save-state{font-size:10px;line-height:1.1}
 .play .play-table:is([data-phase=reveal],[data-phase=result]) .estimate strong{font-size:30px;margin:2px 0}
 .play .play-table:is([data-phase=reveal],[data-phase=result]) .turn-message{font-size:13px;line-height:1.15;margin:0}
 .play .play-table:is([data-phase=reveal],[data-phase=result]) .answer-pad,.play .play-table:is([data-phase=reveal],[data-phase=result]) .estimate{padding:8px 16px}
}
@media(max-height:700px) and (min-width:761px){
 .play .table-header{height:56px;min-height:56px}.play .brand>img.wordmark{height:46px}
 .play .play-main{padding:8px 18px}.play .play-table{grid-template-rows:45px minmax(0,1fr) 140px;gap:8px}
 .play .question-panel{padding:16px 28px}.play .question-panel h1{font-size:30px}.play .decision-row{grid-template-rows:1fr}
 .play .answer-pad,.play .estimate{padding:10px 18px}.play .guess-label input{height:45px;font-size:30px}.play .save-guess{min-height:30px;height:30px}
}