/* Touch-first board input and the phone game-focus layout. */
.board,.board .sq{touch-action:none;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;-webkit-touch-callout:none}

/* Premove queue: numbered layers so move 2 visibly starts where move 1 lands. */
.sq.premove-target:before{content:none}
.premove-badge{position:absolute;z-index:9;top:4%;left:5%;min-width:17px;height:17px;padding:0 4px;border-radius:9px;display:grid;place-items:center;font:800 11px/1 'Segoe UI',Arial,sans-serif;color:#fff;background:#6f3cc9;border:1.5px solid #fff6d5;box-shadow:0 1px 3px #22114488;pointer-events:none}
.sq.premove-target>.piece{filter:drop-shadow(0 0 5px #f0ad32cc)}
.sq.premove-source{background-image:linear-gradient(#6f3cc926,#6f3cc926)}
.premove-clear{height:30px;min-width:40px;padding:0 9px;border-radius:15px;border:1px solid #fff6d5;background:#6f3cc9;color:#fff;font:800 13px/1 'Segoe UI',Arial,sans-serif;cursor:pointer;box-shadow:0 3px 0 #3d1f7a55}
.premove-clear.hidden{display:none}
.premove-clear:focus-visible{outline:3px solid #f0ad32;outline-offset:2px}
.focus-exit{display:none}

/* Phone home: choose how to play before the board consumes the viewport. */
@media (max-width:800px), (max-height:500px) and (pointer:coarse){
 body.phone-setup .play-area,body.phone-setup .status-panel,body.phone-setup .gold-card,body.phone-setup .history-panel,body.phone-setup footer{display:none!important}
 body.phone-setup main{display:block;max-width:520px;padding-top:18px;padding-bottom:18px}
 body.phone-setup .sidebar{display:block}
 body.phone-setup .topbar{height:60px}
 body.phone-setup .setup-panel{display:grid!important;margin:0 auto;padding:14px;gap:9px}
 body.phone-setup .setup-panel:before{content:'Game setup';display:block;color:#f3f7ff;font-size:20px;font-weight:800;line-height:1.2;text-align:left}
 body.phone-setup #new-game{font-size:16px;min-height:48px}
}

/* Game focus: set by app.js only on screens up to 800px wide while a game is live. */
html.game-focus-root{overflow:hidden;height:100%;overscroll-behavior:none}
body.game-focus{position:fixed;inset:0;width:100%;height:100dvh;overflow:hidden;overscroll-behavior:none;min-height:0}
body.game-focus .topbar,body.game-focus .section-heading,body.game-focus .setup-panel,body.game-focus .gold-card,body.game-focus .history-panel,body.game-focus footer,body.game-focus .status-panel .panel-heading,body.game-focus #status-detail{display:none!important}
body.game-focus main{padding-top:max(8px,env(safe-area-inset-top));padding-bottom:0;gap:8px}
body.game-focus .play-area{width:min(100%,calc(100dvh - 236px));margin:0 auto;padding-top:0}
body.game-focus .player-row{height:40px;margin-bottom:4px}
body.game-focus .board-toolbar{margin-top:6px;min-height:0;padding:5px 8px}
body.game-focus .board-toolbar>span{max-width:none;flex:1 1 150px}
body.game-focus .focus-exit{display:grid}
body.game-focus .status-panel{padding:8px 14px;border-radius:16px}
body.game-focus .status-panel .turn-status{margin-top:0}
body.game-focus .status-panel .turn-status h2{font-size:17px;line-height:1.2;margin:0}
body.game-focus .status-panel>button:not(.hidden){margin-top:8px}

@media (min-width:801px) and (max-height:500px) and (pointer:coarse){
 body.game-focus main{display:block;max-width:none;padding:4px 8px}
 body.game-focus .play-area{width:min(100%,calc(100dvh - 164px))}
 body.game-focus .bottom-player{margin-top:28px}
 body.game-focus #board-hint{display:none}
 body.game-focus .player-row{height:29px;margin-bottom:1px}
 body.game-focus .bottom-player{margin-top:28px}
 body.game-focus .avatar,body.game-focus .player-row>div>span,body.game-focus .player-side{display:none}
 body.game-focus .board-wrap{padding:5px}
 body.game-focus .board-toolbar{margin-top:2px;padding:2px 6px}
 body.game-focus .status-panel{display:none!important}
}

/* Finished-game review keeps the existing move history reachable. */
body.phone-review .focus-exit{display:grid}

/* Instant taps on phones: without this, a tap within ~0.4s of moving a piece was read as a double-tap and dropped (Claude, 27 Sep, probe evidence in #594). */
button,a,[role=button],#focus-exit{touch-action:manipulation}

/* Give phone squares the screen space previously used by outer gutters and frame. */
body.game-focus .app-shell{padding-left:max(4px,env(safe-area-inset-left));padding-right:max(4px,env(safe-area-inset-right))}
body.game-focus main{max-width:none;display:flex;flex-direction:column;align-items:center;padding-top:max(4px,env(safe-area-inset-top));padding-bottom:env(safe-area-inset-bottom)}
body.game-focus .play-area{width:min(100%,calc(100dvh - 272px - env(safe-area-inset-top) - env(safe-area-inset-bottom)))}
body.game-focus .board-wrap{padding:4px;border-radius:10px}
body.game-focus .board-wrap:before{inset:2px;border-radius:8px}
body.game-focus .sidebar{width:100%;max-width:630px}
body.game-focus .board-toolbar{gap:5px}
body.game-focus .board-toolbar>span{flex:1 1 100px}

/* In a sideways phone, place clocks and controls beside the square board. */
@media (orientation:landscape) and (max-height:500px) and (pointer:coarse){
 body.game-focus main{height:100%;padding:max(4px,env(safe-area-inset-top)) 0 max(4px,env(safe-area-inset-bottom));justify-content:center}
 body.game-focus .play-area{display:grid;grid-template-columns:minmax(100px,1fr) min(calc(100dvh - 40px - env(safe-area-inset-top) - env(safe-area-inset-bottom)),calc(100% - 220px)) minmax(100px,1fr);grid-template-rows:1fr 1fr;gap:12px 8px;width:100%;align-items:center}
 body.game-focus .board-wrap{grid-column:2;grid-row:1 / 3}
 body.game-focus .player-row{grid-column:1;grid-row:1;height:auto;min-height:64px;flex-wrap:wrap;margin:0;padding:8px;gap:5px}
 body.game-focus .bottom-player{grid-row:2;margin:0}
 body.game-focus .player-row>div:not(.captured){min-width:0}
 body.game-focus .player-row strong{overflow:hidden;text-overflow:ellipsis;max-width:120px}
 body.game-focus .avatar,body.game-focus .player-row>div>span,body.game-focus .player-side{display:none}
 body.game-focus .chess-clock{margin-left:auto}
 body.game-focus .board-toolbar{grid-column:3;grid-row:1 / 3;display:flex;flex-direction:column;margin:0;padding:6px;gap:8px}
 body.game-focus .board-toolbar>div{justify-content:center;flex-wrap:wrap}
 body.game-focus #board-hint{display:block;flex:0 1 auto;max-width:100%;font-size:12px}
 body.game-focus .sidebar{position:absolute;left:max(4px,env(safe-area-inset-left));bottom:max(4px,env(safe-area-inset-bottom));width:calc((100% - min(100dvh - 40px,100% - 220px) - 24px)/2)}
 body.game-focus .status-panel{display:block!important;padding:4px}
 body.game-focus .status-panel:not(:has(>button:not(.hidden))){display:none!important}
 body.game-focus .status-panel .turn-status{display:none}
 body.game-focus .status-panel>button:not(.hidden){font-size:12px;padding:6px;margin-top:0}
}

/* Phone board (#622), chess.com style: edge-to-edge squares, larger pieces, and a big lifted piece while dragging. */
@media (orientation:portrait){
 body.game-focus .app-shell{padding-left:env(safe-area-inset-left);padding-right:env(safe-area-inset-right)}
 body.game-focus .play-area{width:min(100vw,calc(100dvh - 272px - env(safe-area-inset-top) - env(safe-area-inset-bottom)))}
 body.game-focus .board-wrap{padding:0!important;border-radius:0!important;border:0!important;box-shadow:none!important;background:none!important}
 body.game-focus .board-wrap:before,body.game-focus .board-wrap:after{display:none!important}
 body.game-focus .board{border-radius:0!important;border:0!important}
 body.game-focus main{min-height:100dvh;justify-content:center}
}
@media (pointer:coarse), (orientation:portrait){
 body.game-focus .sq>.piece svg{transform:scale(1.12)}
 body.game-focus .sq>.piece{overflow:visible}
 body.game-focus .drag-ghost{transform:scale(1.7)!important;z-index:1000}
}

/* #668: browser bars shorten portrait phones. Keep controls compact so the
   old 272px allowance does not unnecessarily shrink the playing squares. */
@media (orientation:portrait){
 body.game-focus main{min-height:0;gap:4px;justify-content:flex-start}
 body.game-focus .play-area{width:min(100%,calc(100dvh - 200px - env(safe-area-inset-top) - env(safe-area-inset-bottom)))}
 body.game-focus .player-row{height:36px;margin-bottom:2px;gap:6px}
 body.game-focus .bottom-player{margin-top:6px;margin-bottom:0}
 body.game-focus .board-toolbar{margin-top:4px;padding:2px 4px;min-height:44px}
 body.game-focus .sidebar{max-width:none}
 body.game-focus .status-panel{display:flex;align-items:center;justify-content:space-between;gap:6px;padding:4px 10px}
 body.game-focus .status-panel .turn-status{min-width:0;gap:6px}
 body.game-focus .status-panel .turn-status h2{font-size:16px;letter-spacing:0}
 body.game-focus .status-panel>button:not(.hidden){margin:0;min-height:40px;width:auto;padding:6px 10px;flex-shrink:0}
}
@media (orientation:portrait) and (max-height:740px){
 body.game-focus .board-toolbar{flex-wrap:nowrap;justify-content:flex-end}
 body.game-focus #board-hint,body.game-focus #music-indicator{display:none}
 body.game-focus .board-toolbar>div{width:100%;justify-content:flex-end}
}

/* Toolbar artwork uses one centered coordinate system instead of font glyph boxes. */
.icon-button{padding:0;line-height:0;place-content:center}
.icon-button>svg{display:block;width:20px;height:20px;overflow:visible;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;pointer-events:none}
@media(max-width:480px){.icon-button>svg{width:18px;height:18px}}