/* Phone game screen redesign (#713): dark premium chrome around the board, roomy player cards,
   thumb-zone controls, content centred so no dead band. Applies only while a phone game is live. */
@media (orientation:portrait){
 body.game-focus{
  --pd-bg:#0a1322; --pd-card:rgba(255,255,255,.055); --pd-line:rgba(255,255,255,.09);
  --pd-ink:#f1f5f9; --pd-muted:#a0b4c8; --pd-gold:#e7bd55; --pd-gold-ink:#1b1305;
  background:radial-gradient(ellipse 90% 50% at 50% 38%,#1a2e4a 0%,#0d1c30 50%,#060e1a 100%) fixed!important;
 }
 body.game-focus .world,body.game-focus .ambient-drops,body.game-focus .knight-stickers{opacity:0!important;pointer-events:none}
 body.game-focus .app-shell{background:transparent!important}

 /* vertical rhythm: centred stack, controls kept in the thumb zone */
 body.game-focus main{min-height:100dvh!important;justify-content:center!important;gap:0!important;
  padding:max(10px,env(safe-area-inset-top)) 0 max(12px,env(safe-area-inset-bottom))!important;box-sizing:border-box}
 body.game-focus{--pd-reserve:286px}
 body.game-focus .play-area{display:flex!important;flex-direction:column;align-items:stretch;gap:10px;width:100vw!important;margin:0 auto!important}
 /* only the square board gives way on short screens; cards and controls keep the full width */
 body.game-focus .board-wrap{width:min(100vw,calc(100dvh - var(--pd-reserve) - env(safe-area-inset-top) - env(safe-area-inset-bottom)))!important;align-self:center;box-sizing:border-box}

 /* player cards */
 body.game-focus .player-row{display:grid!important;grid-template-columns:40px minmax(0,1fr) auto auto;align-items:center;
  column-gap:10px;margin:0 10px!important;padding:9px 10px 9px 10px!important;min-height:58px;box-sizing:border-box;
  background:linear-gradient(135deg,rgba(231,189,85,.09) 0%,transparent 55%),#172232!important;border:1px solid #26323f!important;border-top-color:rgba(231,189,85,.22)!important;border-radius:14px!important;box-shadow:none!important;transition:box-shadow .25s ease}
 body.game-focus .player-row:has(.chess-clock.running){box-shadow:0 0 0 1.5px rgba(231,189,85,.5),0 0 22px rgba(231,189,85,.1)!important}
 body.game-focus .player-row .avatar{width:40px!important;height:40px!important;border-radius:12px!important;display:grid;place-items:center;
  font-size:24px!important;line-height:1;margin:0!important;box-shadow:none!important}
 body.game-focus .player-row .avatar{font-size:0!important;color:transparent!important;background-repeat:no-repeat!important;background-position:center!important;background-size:24px 24px!important}
 body.game-focus .player-row .avatar.black{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%237d8da6' d='M12 2.5a1.2 1.2 0 0 1 1.2 1.2v.9h.9a1 1 0 1 1 0 2h-.9v1.1l2.1-1.3 2.9 1.7 2.6-1.5-2 8.9H5.2l-2-8.9 2.6 1.5 2.9-1.7 2.1 1.3V6.6h-.9a1 1 0 1 1 0-2h.9v-.9A1.2 1.2 0 0 1 12 2.5ZM5.6 17.2h12.8v1.6a1.7 1.7 0 0 1-1.7 1.7H7.3a1.7 1.7 0 0 1-1.7-1.7v-1.6Z'/%3E%3C/svg%3E")!important;background-color:#1e2f4a!important;color:#cfd9ea!important;border:1px solid rgba(255,255,255,.12)}
 body.game-focus .player-row .avatar.white{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23e8e0cc' d='M12 2.5a1.2 1.2 0 0 1 1.2 1.2v.9h.9a1 1 0 1 1 0 2h-.9v1.1l2.1-1.3 2.9 1.7 2.6-1.5-2 8.9H5.2l-2-8.9 2.6 1.5 2.9-1.7 2.1 1.3V6.6h-.9a1 1 0 1 1 0-2h.9v-.9A1.2 1.2 0 0 1 12 2.5ZM5.6 17.2h12.8v1.6a1.7 1.7 0 0 1-1.7 1.7H7.3a1.7 1.7 0 0 1-1.7-1.7v-1.6Z'/%3E%3C/svg%3E")!important;background-color:#1e2f4a!important;color:#e8e0cc!important;border:1px solid rgba(255,255,255,.12)}
 body.game-focus .player-row>div:nth-child(2){min-width:0;display:flex;flex-direction:column;justify-content:center;gap:2px}
 body.game-focus .player-row strong{color:var(--pd-ink)!important;font-size:17px!important;font-weight:700;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
 body.game-focus .player-row strong+span{color:var(--pd-muted)!important;font-size:13px!important;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
 body.game-focus .player-row .player-side{display:none!important}
 body.game-focus .player-row .captured{min-width:0;max-width:96px;overflow:hidden;white-space:nowrap;font-size:18px;line-height:1;color:#c9d4e3;opacity:1}
 body.game-focus .chess-clock{min-width:88px;box-sizing:border-box;text-align:center;padding:7px 12px!important;border-radius:11px!important;
  font-size:23px!important;font-weight:750!important;font-variant-numeric:tabular-nums;letter-spacing:-.02em;line-height:1.1;
  background:#1e3460!important;color:#e6edf6!important;border:1px solid #2e4a80!important;box-shadow:none!important}
 body.game-focus .chess-clock.running{background:var(--pd-gold)!important;color:var(--pd-gold-ink)!important;border-color:transparent!important;
  box-shadow:0 0 0 3px rgba(231,189,85,.18)!important}
 body.game-focus .chess-clock.low{background:#c2413a!important;color:#fff!important}

 /* board: edge to edge, hairline gold rails instead of a heavy frame */
 body.game-focus .board-wrap{margin:3px 0!important;box-shadow:0 -2px 0 rgba(231,189,85,.65),0 2px 0 rgba(231,189,85,.65),0 6px 32px rgba(0,0,0,.55)!important}
 body.game-focus .sq>.piece svg{transform:scale(1.05)!important}

 /* controls: five evenly spread round buttons across the width */
 body.game-focus .board-toolbar{margin:4px 10px 0!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;
  display:flex!important;flex-direction:column;gap:8px}
 body.game-focus .board-toolbar>#board-hint{display:none!important}
 /* queued premoves: the clear button is the visible state, in gold */
 body.game-focus .board-toolbar .premove-clear:not(.hidden){background:rgba(231,189,85,.18)!important;color:var(--pd-gold)!important;border-color:rgba(231,189,85,.5)!important;font-size:20px!important}
 body.game-focus .board-toolbar>div{display:flex!important;justify-content:space-between;align-items:center;width:100%;gap:6px}
 body.game-focus .board-toolbar>div{order:1}
 body.game-focus .board-toolbar>div>button{flex:1 1 0;max-width:64px;min-width:44px}
 body.game-focus .board-toolbar .icon-button,body.game-focus .board-toolbar .premove-clear{width:auto!important;height:52px!important;border-radius:16px!important;
  background:rgba(255,255,255,.11)!important;color:#e6edf6!important;border:1px solid rgba(255,255,255,.14)!important;box-shadow:none!important}
 body.game-focus .board-toolbar .icon-button:disabled{opacity:.38}
 body.game-focus .board-toolbar .icon-button.on{background:rgba(231,189,85,.16)!important;color:var(--pd-gold)!important;border-color:rgba(231,189,85,.4)!important}
 body.game-focus .board-toolbar .icon-button svg{width:26px!important;height:26px!important}
 body.game-focus .board-toolbar .music-indicator{color:var(--pd-gold)}

 /* status pill */
 body.game-focus .sidebar{margin-top:14px!important}
 body.game-focus .status-panel{margin:0 10px!important;background:rgba(231,189,85,.16)!important;border:1.5px solid rgba(231,189,85,.55)!important;
  border-radius:14px!important;box-shadow:none!important}
 body.game-focus .status-panel #status{color:#eef4fb!important}
 /* short phones: compact chrome so the board stays full width */
}
@media (orientation:portrait) and (max-height:680px){
 body.game-focus{--pd-reserve:222px}
 body.game-focus .play-area{gap:6px}
 body.game-focus .player-row{min-height:48px;padding:6px 10px!important;border-radius:12px!important}
 body.game-focus .player-row .avatar{width:34px!important;height:34px!important;background-size:20px 20px!important;border-radius:10px!important}
 body.game-focus .player-row{grid-template-columns:34px minmax(0,1fr) auto auto}
 body.game-focus .player-row strong{font-size:15px!important}
 body.game-focus .player-row strong+span{font-size:12px!important}
 body.game-focus .chess-clock{font-size:20px!important;padding:5px 10px!important;min-width:76px}
 body.game-focus .board-toolbar .icon-button,body.game-focus .board-toolbar .premove-clear{height:44px!important;border-radius:13px!important}
 body.game-focus .board-toolbar>#board-hint{display:none!important}
 body.game-focus .sidebar{margin-top:6px!important}
}
@media (orientation:portrait) and (max-width:340px){
 body.game-focus .player-row{grid-template-columns:32px minmax(0,1fr) auto auto;column-gap:8px;margin:0 6px!important;padding:6px 8px!important}
 body.game-focus .player-row .avatar{width:32px!important;height:32px!important;background-size:19px 19px!important}
 body.game-focus .chess-clock{min-width:62px;font-size:18px!important;padding:5px 8px!important}
 body.game-focus .board-toolbar{margin:4px 6px 0!important}
 body.game-focus .status-panel{margin:0 6px!important}
}
@media (orientation:portrait) and (max-height:600px){
 body.game-focus{--pd-reserve:196px}
 body.game-focus main{padding-top:max(6px,env(safe-area-inset-top))!important;padding-bottom:max(6px,env(safe-area-inset-bottom))!important}
 body.game-focus .play-area{gap:5px}
 body.game-focus .player-row{min-height:42px;padding:4px 8px!important}
 body.game-focus .player-row .avatar{width:30px!important;height:30px!important;background-size:18px 18px!important}
 body.game-focus .player-row{grid-template-columns:30px minmax(0,1fr) auto auto}
 body.game-focus .player-row strong{font-size:14px!important}
 body.game-focus .chess-clock{font-size:18px!important;padding:4px 9px!important;min-width:66px}
 body.game-focus .board-toolbar{margin-top:2px!important}
 body.game-focus .sidebar{margin-top:5px!important}
 body.game-focus .status-panel{padding-top:4px!important;padding-bottom:4px!important}
 body.game-focus .status-panel #status{font-size:15px!important}
}