/* During play the game is the stage. The game canvas keeps its native
   900:420 proportions so its drawings and collision positions stay aligned. */
.show-mode .live:has(.phase-playing){padding:0;gap:0;background:#102b39}
.show-mode .live:has(.phase-playing):before,.show-mode .live:has(.phase-playing):after{display:none}
.show-mode .live:has(.phase-playing) .game-progress,.show-mode .live:has(.phase-playing)>.hint{display:none}
.show-mode .live:has(.phase-playing) .arena{display:block;flex:1 1 0;width:100%;max-width:none;min-height:0;overflow:hidden}
.show-mode .live .phase-playing .play-scene{display:grid;grid-template-columns:minmax(100px,1fr) minmax(0,2.2fr) minmax(100px,1fr);grid-template-rows:clamp(48px,7vh,70px) minmax(0,1fr);gap:0;width:100%;height:100%;max-width:none;margin:0;padding:0;background:#102b39}
.show-mode .live .phase-playing .play-scene>.eyebrow{grid-area:1/1;align-self:center;justify-self:start;max-width:100%;padding:0 clamp(10px,1.4vw,22px);color:#f9d884;font-size:clamp(10px,1vw,16px);line-height:1.2;letter-spacing:.06em;text-align:left;overflow-wrap:anywhere}
.show-mode .live .phase-playing .play-scene>h2{grid-area:1/2;align-self:start;justify-self:center;max-width:100%;margin:clamp(4px,.7vh,8px) 0 0;color:#fffaf0;font-size:clamp(16px,2vw,30px);line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.show-mode .live .phase-playing .play-scene>p{grid-area:1/2;align-self:end;justify-self:center;max-width:100%;margin:0 0 clamp(4px,.7vh,8px);color:#d5e7e7;font-size:clamp(10px,1vw,16px);line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.show-mode .live .phase-playing .play-players{grid-area:1/3;align-self:center;justify-self:end;display:flex;justify-content:flex-end;gap:clamp(4px,.5vw,9px);width:auto;max-width:100%;padding:0 clamp(8px,1vw,16px)}
.show-mode .live .phase-playing .play-player{min-width:0;max-width:50%;padding:5px 8px;font-size:clamp(10px,1.05vw,16px);border-radius:6px}
.show-mode .live .phase-playing .play-player small{display:none}
.show-mode .live .phase-playing .scene-prop,.show-mode .live .phase-playing .meter-wrap,.show-mode .live .phase-playing #game-extra:empty{display:none}
.show-mode .live .phase-playing #game-canvas{grid-area:2/1/3/4;align-self:center;justify-self:center;display:block;width:min(100%,calc((100svh - clamp(48px,7vh,70px) - 52px) * 15 / 7));max-width:100%;height:auto;max-height:100%;aspect-ratio:900/420;object-fit:contain;margin:0;border:0;border-radius:0;box-shadow:none;background:#102b39}
.show-mode .live .phase-playing #game-extra:not(:empty){position:absolute;z-index:2;bottom:2%;left:50%;transform:translateX(-50%)}
.show-mode .live:has(.phase-playing)>.control-bar{display:flex;align-items:center;justify-content:center;flex:none;min-height:52px;width:100%;margin:0;padding:4px 8px;gap:8px;background:#102b39}
.show-mode .live:has(.phase-playing)>.control-bar .btn{min-height:40px;padding:7px 16px;font-size:clamp(11px,1vw,15px);box-shadow:none}
@media(max-width:700px){
 .show-mode .live .phase-playing .play-scene{grid-template-columns:minmax(70px,1fr) minmax(0,2fr) minmax(70px,1fr)}
 .show-mode .live .phase-playing .play-scene>.eyebrow{padding:0 5px;font-size:9px}
 .show-mode .live .phase-playing .play-scene>h2{font-size:14px}
 .show-mode .live .phase-playing .play-scene>p{font-size:9px}
 .show-mode .live .phase-playing .play-players{padding:0 4px;gap:3px}
 .show-mode .live .phase-playing .play-player{font-size:9px;padding:4px}
 .show-mode .live:has(.phase-playing)>.control-bar .btn{padding:7px 9px;font-size:10px}
}
.show-mode .live .phase-playing .play-player:only-child{max-width:100%}