/* Phone-first simplified chess. The board takes every available horizontal pixel. */
body{background:radial-gradient(ellipse 100% 55% at 50% 0%,#0b2a17,#030a06 74%)}
.app{width:100%;max-width:1200px}
.site-header{border-color:#267d3b}
.board-shell{width:100%;max-width:min(96vw,850px);margin:0 auto}
.board-outer{aspect-ratio:1;position:relative;width:100%}
.board-watermark{opacity:.10}
.piece{width:100%;height:100%}
.piece svg{width:118%;height:112%;margin-left:-9%;margin-top:-6%}
.sq.selected{box-shadow:inset 0 0 0 3px #eeffb2,0 0 18px #b9ff6b}
.sq.legal:after{width:30%;height:30%;background:#d0ff9f;box-shadow:0 0 13px #80ff53}
.action-grid{max-width:850px;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.action-btn{border-color:#39974a;font-family:var(--body);font-weight:800}
.action-btn.invite-action{border-color:#9bff79;background:linear-gradient(145deg,#163c1d,#031707);box-shadow:inset 0 0 16px #237737,0 0 10px #31d34755}
.action-icon{font-weight:800}
.bottom-line{max-width:850px;margin-left:auto;margin-right:auto;justify-content:center;gap:10px}
.bottom-line button{min-width:0;flex:1;max-width:260px;min-height:39px;font-weight:800}
.level-control{max-width:550px}
.online-banner[hidden]{display:none}
.online-banner{display:flex;align-items:center;gap:7px;margin:5px auto 7px;padding:8px 10px;border:1px solid #64f76b;border-radius:11px;max-width:850px;background:#0d2b15;box-shadow:0 0 13px #278a3c44}
.online-dot{color:#97ff78;text-shadow:0 0 11px #6aff4b}
.online-message{min-width:0;flex:1;font:800 .86rem var(--body);line-height:1.15;overflow-wrap:anywhere}
.online-copy,.online-share{color:#0a1b0d;background:#98ff73;border:0;border-radius:7px;min-height:35px;padding:6px 9px;font:900 .76rem var(--body);white-space:nowrap}
.online-share{font-size:1.15rem;width:34px;padding:0}
.app.online-game .player-stat{display:none}
.app.online-game .clock-center small{font-size:.66rem}
.app.online-game .time-display{font-size:clamp(.85rem,2.6vw,1.25rem)}
.app.online-game #undoBtn{display:none}
.app.online-game .bottom-line #friendBtn{display:none}
.app.online-game .bottom-line{display:none}
.app.online-game .level-control{display:none}
@media(min-width:720px){
 .board-shell,.matchup,.match-info,.action-grid{max-width:min(94vw,850px)}
 .board-shell{max-width:min(88vw,830px)}
 .board-layout{grid-template-columns:16px minmax(0,1fr)}
 .files{margin-left:16px}
 .action-btn{min-height:70px}
}
@media(max-width:719px){
 .app{padding:env(safe-area-inset-top) 0 max(8px,env(safe-area-inset-bottom))}
 .site-header{min-height:47px;padding:3px 5px}
 .brand-icon{width:33px;height:35px}
 .brand-name{font-size:clamp(1rem,4.8vw,1.35rem)}
 .brand-game{margin-top:1px;font-size:.55rem}
 .square-icon{width:34px;height:34px}
 .matchup{grid-template-columns:minmax(0,1fr) 82px minmax(0,1fr);gap:5px;padding:4px 5px 5px}
 .player{min-height:37px;padding:3px 6px}
 .player-title{font-size:.84rem}
 .player-subtitle{font-size:.63rem}
 .player-stat{font-size:.7rem}
 .clock-center small{font-size:.53rem}
 .time-display{font-size:1.01rem}
 .board-shell{width:100vw;max-width:100vw;padding:2px 0 0;border-left:0;border-right:0;border-radius:0}
 .board-topbar{min-height:17px;padding:0 3px 4px}
 #turnText{font-size:.74rem}
 .board-layout{grid-template-columns:minmax(0,1fr)}
 .ranks{display:none}
 .files{display:none}
 .board-outer{border-width:1px;border-left:0;border-right:0;box-shadow:0 0 10px #4cdb57a3}
 .sq{border-color:#60ff7270}
 .sq.light{background:linear-gradient(150deg,#1b713eea,#0b512ae3)}
 .sq.dark{background:linear-gradient(155deg,#071a0ed9,#010905ed)}
 .piece svg{width:121%;height:118%;margin-left:-10%;margin-top:-8%}
 .match-info{min-height:30px;padding:6px 11px 0}
 .status-line{font-size:.85rem;min-height:20px}
 .move-count{font-size:.56rem}
 .history{display:none}
 .action-grid{grid-template-columns:repeat(3,1fr);margin:6px 5px;gap:6px}
 .action-btn{min-height:62px;padding:6px 2px;font-size:clamp(.72rem,2.9vw,.97rem);border-radius:9px}
 .action-icon{font-size:1.64rem;line-height:1.0}
 .level-control{margin:4px auto 8px;width:calc(100% - 14px)}
 .level-control button{min-height:39px}
 .bottom-line{padding:5px 7px;gap:6px}
 .bottom-line button{min-height:37px;font-size:.83rem}
 .online-banner{margin:4px 4px 6px;padding:7px;gap:5px}
 .online-message{font-size:.78rem}
 .online-copy{font-size:.71rem;padding:5px 7px}
 footer{font-size:.63rem;padding:9px 3px}
}
@media(max-width:370px){
 .header-actions #statsBtn,.header-actions #trophyBtn{display:none}
 .action-btn{font-size:.71rem}
 .brand-name{font-size:1rem}
}