/* Size the workspace from the usable viewport; lists and open tools scroll locally. */
:root { --qgo-nav-height: 3.5rem; }
.qgo-app { height:100dvh; min-height:0; display:flex; flex-direction:column; overflow:hidden; }
.qgo-app > .salon-nav { flex:0 0 var(--qgo-nav-height); min-height:var(--qgo-nav-height); z-index:30; }
.qgo-app .salon-nav-links > .navbar-item { margin:.35rem .1rem; }
.qgo-app .salon-account-link { margin:.3rem 0 .3rem .5rem; }
.qgo-app > :not(.salon-nav) { min-height:0; }
.modal-card { display:flex; flex-direction:column; max-height:calc(100dvh - 2rem); overflow:hidden; }
.modal-card-head, .modal-card-foot { flex:none; }
.modal-card-body { flex:1 1 auto; min-height:0; overflow:auto; overscroll-behavior:contain; }
.qgo-game-route { flex:1; min-height:0; }
.qgo-play-salon { height:100%; width:100%; min-height:0; padding:12px max(16px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(16px,env(safe-area-inset-left)); display:flex; flex-direction:column; gap:8px; overflow:hidden; }
.qgo-play-salon .qgo-game-heading { flex:none; margin:0; min-height:32px; }
.qgo-play-salon .qgo-game-heading h1 { font-size:24px; }
.qgo-play-salon .qgo-eyebrow { display:none; }
.qgo-play-salon .qgo-game-layout { flex:1; min-height:0; grid-template-columns:minmax(0,1fr) minmax(280px,340px); grid-template-rows:minmax(0,1fr) auto; gap:10px 24px; }
.qgo-play-salon .qgo-board-column { min-height:0; height:100%; display:flex; flex-direction:column; gap:4px; }
.qgo-play-salon .qgo-board-viewport { flex:1; width:100%; min-height:0; container-type:size; display:grid; place-items:center; }
.qgo-play-salon .qgo-board { width:min(100cqw,100cqh); height:min(100cqw,100cqh); max-width:none; margin:0; flex:none; }
.qgo-play-salon .qgo-board-zoomed { display:block; max-height:none; }
.qgo-play-salon .qgo-board-zoomed .qgo-board { width:max(100cqw,100cqh); height:auto; }
.qgo-play-salon .qgo-board-tools { flex:none; display:flex; flex-wrap:wrap; justify-content:center; gap:6px; }
.qgo-play-salon .qgo-board-tools button { margin:0; min-height:44px; padding:.35rem .7rem; font-size:.82rem; flex:0 1 auto; }
.qgo-play-salon .qgo-board-help { flex:none; margin:0; font-size:11px; }
.qgo-play-salon .qgo-game-sidebar { min-height:0; max-height:100%; overflow:auto; padding:0 4px; }
.qgo-play-salon .qgo-players { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.qgo-play-salon .qgo-player { grid-template-columns:16px minmax(0,1fr); gap:3px 6px; padding:8px 0; font-size:.86rem; }
.qgo-play-salon .qgo-stone-dot { width:14px; height:14px; }
.qgo-play-salon .qgo-clock { font-size:17px; }
.qgo-play-salon .qgo-turn { padding:8px 0; font-size:.84rem; }
.qgo-play-salon .qgo-selection { margin:10px 0; }
.qgo-play-salon .qgo-game-extras { position:relative; min-height:44px; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.qgo-play-salon .qgo-game-extras > .qgo-disclosure { padding:0; border:0; min-width:0; }
.qgo-play-salon .qgo-game-extras summary { display:flex; align-items:center; justify-content:center; min-height:44px; margin:0; padding:.4rem .65rem; text-align:center; border:1px solid var(--qgo-line); border-radius:10px; font-size:.85rem; background:var(--qgo-panel); }
.qgo-play-salon .qgo-game-extras details[open] summary { color:var(--qgo-sage); border-color:var(--qgo-sage); }
.qgo-play-salon .qgo-tool-content { position:absolute; z-index:20; left:0; right:0; bottom:calc(100% + 8px); max-height:min(65dvh,500px); overflow:auto; overscroll-behavior:contain; padding:16px; border:1px solid var(--qgo-line); border-radius:14px; background:var(--qgo-panel); box-shadow:0 -12px 38px #0006; }
.qgo-play-salon .qgo-action-drawer { display:flex; flex-wrap:wrap; gap:12px; }
.qgo-play-salon .qgo-tool-content .qgo-history { max-height:none; }
.qgo-play-salon #qgo-move-problem:empty { display:none; }
@media(max-width:1023px) {
  .qgo-app .salon-nav .navbar-menu.is-active { position:absolute; left:0; right:0; top:100%; max-height:calc(100dvh - var(--qgo-nav-height)); overflow:auto; z-index:35; }
}
@media(max-width:760px) and (orientation:portrait) {
  .qgo-play-salon { padding:6px max(8px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); gap:4px; }
  .qgo-play-salon .qgo-game-heading { min-height:24px; }
  .qgo-play-salon .qgo-game-heading h1 { font-size:20px; }
  .qgo-play-salon .qgo-game-layout { grid-template-columns:minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto auto; grid-template-areas:'players' 'board' 'controls' 'tools'; gap:4px; }
  .qgo-play-salon .qgo-board-column { grid-area:board; }
  .qgo-play-salon .qgo-game-sidebar { display:contents; }
  .qgo-play-salon .qgo-players { grid-area:players; gap:12px; }
  .qgo-play-salon .qgo-player { padding:2px 0 4px; }
  .qgo-play-salon .qgo-player-name { white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .qgo-play-salon .qgo-clock { font-size:15px; }
  .qgo-play-salon .qgo-play-controls { grid-area:controls; min-height:0; max-height:36dvh; overflow:auto; }
  .qgo-play-salon .qgo-turn { padding:2px 0; font-size:.78rem; }
  .qgo-play-salon .qgo-controls-body { display:grid; grid-template-columns:minmax(0,1fr) minmax(120px,.8fr); gap:4px 8px; align-items:center; }
  .qgo-play-salon .qgo-controls-body > p { grid-column:1/-1; }
  .qgo-play-salon .qgo-move-controls > .qgo-section-title,
  .qgo-play-salon .qgo-move-controls > .qgo-help:not(#qgo-move-problem),
  .qgo-play-salon .qgo-move-controls > .qgo-move-hint { display:none; }
  .qgo-play-salon .qgo-selection { margin:0; gap:3px; min-height:44px; }
  .qgo-play-salon .qgo-point { padding:.35rem; gap:3px; font-size:12px; min-height:44px; }
  .qgo-play-salon .qgo-point-number { display:none; }
  .qgo-play-salon .qgo-primary { margin:0; padding:.5rem; font-size:.86rem; }
  .qgo-play-salon #qgo-move-problem { font-size:.75rem; line-height:1.3; }
  .qgo-play-salon .qgo-board-help { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
  .qgo-play-salon .qgo-board-tools { flex-wrap:nowrap; gap:4px; }
  .qgo-play-salon .qgo-board-tools button { flex:1; font-size:.73rem; padding:.25rem; line-height:1.2; }
  .qgo-play-salon .qgo-game-extras { grid-area:tools; gap:4px; }
  .qgo-play-salon .qgo-game-extras summary { font-size:.74rem; padding:.3rem; }
}
@media(max-height:520px) and (orientation:landscape) {
  :root { --qgo-nav-height: 3rem; }
  .qgo-play-salon { padding:4px 10px; gap:4px; }
  .qgo-play-salon .qgo-game-heading { display:none; }
  .qgo-play-salon .qgo-game-layout { grid-template-columns:minmax(0,1fr) minmax(240px,.85fr); gap:4px 12px; }
  .qgo-play-salon .qgo-board-help { display:none; }
  .qgo-play-salon .qgo-game-sidebar { border:0; padding:0 4px; }
  .qgo-play-salon .qgo-player { padding:2px 0; }
  .qgo-play-salon .qgo-turn { padding:2px 0; }
  .qgo-play-salon .qgo-section-title, .qgo-play-salon .qgo-move-controls > .qgo-help:not(#qgo-move-problem), .qgo-play-salon .qgo-move-hint { display:none; }
  .qgo-play-salon .qgo-selection { min-height:44px; margin:0; }
  .qgo-play-salon .qgo-primary { margin:4px 0; padding:.5rem; }
}
.qgo-play-salon .qgo-game-heading h1, .qgo-play-salon .qgo-turn { margin:0; }
.qgo-play-salon .qgo-section-title { margin:0 0 6px; }
.qgo-play-salon .qgo-play-controls .qgo-help { margin:4px 0; }
.qgo-play-salon .qgo-move-hint { margin:0; }
@media(max-height:520px) and (orientation:landscape) {
  .qgo-play-salon .qgo-selection:empty { display:none; }
}
.qgo-play-salon .qgo-board-zoomed { place-items:start; }
.qgo-play-salon .qgo-board-zoomed .qgo-board { justify-self:start; align-self:start; }
.qgo-app > .salon-directory { flex:1; width:100%; min-height:0; overflow:auto; }

/* Move choice is one compact action row; point order is shown on the board. */
.qgo-play-salon .qgo-move-controls { display:block; }
.qgo-play-salon .qgo-move-buttons { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
.qgo-play-salon .qgo-move-buttons .qgo-primary { margin:0; padding:.65rem .5rem; font-size:.9rem; }
.qgo-play-salon .qgo-draft-hint { margin:6px 0 0; color:var(--qgo-muted); font-size:.78rem; }
.qgo-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0; }