/* Phase 3: scoped to live tables, local practice and their own menu. */
body.in-play:not(.info-reading){background:#f3f5f1}
.play-surface{box-shadow:none;min-width:0}
.play-surface .game-head.play-header{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;max-width:700px;width:100%;margin:0 auto 16px;align-items:start}
.play-surface :is(.ddz-header-actions,.tt-head,.game-head,.play-header) button{font-family:inherit;font-size:13px;line-height:1.4;background:#edf2e8;color:#285442;border:1px solid #9fb39f;border-radius:5px;min-height:44px;padding:8px 12px;box-shadow:none;touch-action:manipulation}.play-surface :is(.ddz-header-actions,.tt-head,.game-head,.play-header) button:hover:not(:disabled){background:#dfeadb}.play-surface :is(.ddz-header-actions,.tt-head,.game-head,.play-header) button:active:not(:disabled){background:#cbdcc6}.play-surface button:focus-visible{outline:3px solid #ba9a38;outline-offset:2px}.play-surface :is(.ddz-header-actions,.tt-head,.game-head,.play-header) button:disabled{opacity:.5;cursor:not-allowed}:root[data-theme="dark"] .play-surface :is(.ddz-header-actions,.tt-head,.game-head,.play-header) button{background:#284034;color:#dbe9d6;border-color:#718d74}:root[data-theme="dark"] .play-surface :is(.ddz-header-actions,.tt-head,.game-head,.play-header) button:hover:not(:disabled){background:#3b5542}
.play-header h2{line-height:1.35;overflow-wrap:anywhere}
.play-players{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));align-items:baseline;gap:4px 18px;min-width:0}
.play-players>p,.play-players>.opponent-badge{margin:0;padding:0;background:none;border:0;box-shadow:none;min-width:0;max-width:100%;font-size:13px;line-height:1.6;color:#526959;white-space:normal;overflow-wrap:anywhere}
.play-players>p{text-align:left}
.play-players>.opponent-badge{text-align:right;justify-self:stretch}
.play-surface .turn-status{justify-content:flex-start;min-height:24px;gap:8px 18px}
.play-surface .badge{padding:0;background:none;border:0;box-shadow:none;font-size:14px;color:#486151}
.play-surface .badge.active{background:none;color:#255b48;font-weight:400}
.play-surface .turn-clock{display:inline-block;min-width:10ch;color:#526959;font-weight:400;font-variant-numeric:tabular-nums}
.play-surface .turn-clock.urgent{color:#a1192c;font-weight:400}
.play-turn{margin:0!important;font-size:14px!important;color:#255b48!important}
.play-surface .board{width:min(100%,700px);max-height:none}
#aiPlay.play-surface .board{width:min(100%,650px)}
#game.play-surface .board.ttt,#aiPlay.play-surface .board.ttt{width:min(100%,430px)}
#game.play-surface[data-board-type="xiangqi"] .board,#aiPlay.play-surface[data-board-type="xiangqi"] .board{width:min(100%,580px)}
.play-actions,.play-end-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px;margin:18px auto 0;max-width:700px}
.play-actions button,.play-end-actions button,.play-menu button,.ddz-controls button,.ddz-result-actions button,#liveResultSlot button,#aiResultSlot button,.swap2-controls button{min-height:44px;padding:10px 16px!important;font-size:14px;line-height:1.4}
.play-actions button.primary{min-width:124px}
.play-surface button.primary,.play-surface button.secondary{box-shadow:none}
.play-light.secondary{background:transparent;border-color:transparent;box-shadow:none;text-decoration:underline;text-underline-offset:4px}
.action-status{font-size:12px;line-height:1.65;color:#63786b;margin:10px auto 0;max-width:700px;overflow-wrap:anywhere;text-align:center}
.action-status:empty,.play-surface .message:empty,.play-surface .ddz-message:empty{display:none}
.play-surface .message,.play-surface .ddz-message{font-size:13px;line-height:1.65;margin:8px auto 0;max-width:700px;text-align:center;min-height:0}
.play-surface .swap2-controls{max-width:700px;background:transparent;border:0;border-left:3px solid #698b71;border-radius:0;padding:4px 0 4px 12px;margin:16px auto 4px;font-size:14px}
.play-surface.play-warning .turn-status{color:#a1192c;background:#fff0de;padding:6px 8px;border-left:3px solid #b4763d}
.play-surface .rematch-panel{margin:0;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.play-menu{width:min(430px,calc(100vw - 28px))}
.play-menu-head{display:flex;justify-content:space-between;align-items:center;gap:12px}
.play-menu-head h2{margin:0;font-size:22px}
.play-menu-group{border-top:1px solid #c6d3c5;padding:14px 0 0;margin-top:14px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.play-menu-group h3{font-size:13px;font-weight:400;color:#63786b;flex-basis:100%;margin:0}
.play-menu-group .action-status{flex-basis:100%;text-align:left;margin:0}
.play-menu .sound-control{width:100%;margin:0;justify-content:flex-start;min-height:44px}
.play-menu .sound-control input{width:20px;height:20px}
.play-danger-group button{color:#984035}
#resultDialog .dialog-actions{display:block}
#liveResultSlot .play-end-actions,#aiResultSlot .play-end-actions{margin:16px 0;justify-content:flex-start}
#resultDialog #closeResult,#aiResultDialog #aiResultClose,#ddzOutcomeDialog #ddzOutcomeClose{min-height:44px;margin-top:14px}
:root[data-theme="dark"] body.in-play:not(.info-reading){background:#121d1a}
:root[data-theme="dark"] .play-surface{box-shadow:none}
:root[data-theme="dark"] .play-surface :is(.play-players>p,.opponent-badge,.badge,.turn-clock,.action-status,.ddz-message,.play-mode){background:none;border:0;box-shadow:none;color:#b5c6b8}
:root[data-theme="dark"] .play-surface .badge.active,:root[data-theme="dark"] .play-turn{color:#b2e7c4!important}
:root[data-theme="dark"] .play-surface .turn-clock.urgent{color:#ffb4b9}
:root[data-theme="dark"] .play-menu-group{border-color:#4c6658}
:root[data-theme="dark"] :is(.play-menu-group h3,.play-menu .action-status){color:#b5c6b8}
:root[data-theme="dark"] .play-danger-group button{color:#ffb4b9}
:root[data-theme="dark"] .play-light.secondary{background:transparent;border-color:transparent;box-shadow:none}
:root[data-theme="dark"] .play-surface.play-warning .turn-status{background:#482e28;color:#ffcbad}
@media(max-width:640px){
 .play-surface{padding:16px}
 .play-header h2,.ddz-header h2{font-size:22px}
 .play-players{gap:4px 12px}
 .play-actions{gap:8px;margin-top:16px}
 .play-actions button{padding:10px 12px!important}
 .play-actions button.primary{min-width:112px}
 .play-surface .swap2-controls button{padding:10px!important}
}