/* #149: product tokens and components, isolated from legacy Bulma views. */
.qgo-app {
  --qgo-bg: #202725; --qgo-panel: #29332e; --qgo-text: #f0eee5;
  --qgo-muted: #bec7be; --qgo-line: #46534b; --qgo-accent: #a3c2a5;
  --qgo-copper: #edb985; --qgo-danger: #ffb1a6;
  background: var(--qgo-bg); color: var(--qgo-text); min-height: 100vh;
  color-scheme: dark; font-family: system-ui, sans-serif;
}
.qgo-app .navbar, .qgo-app .navbar-menu, .qgo-app .navbar-dropdown { background: var(--qgo-bg); color: var(--qgo-text); }
.qgo-app .navbar { border-bottom: 1px solid var(--qgo-line); box-shadow: none; }
.qgo-app .navbar-item, .qgo-app .navbar-link, .qgo-app .navbar-item strong { color: var(--qgo-text); }
.qgo-app a.navbar-item:hover, .qgo-app .navbar-link:hover, .qgo-app .navbar-item.has-dropdown:hover .navbar-link,
.qgo-app a.navbar-item:focus { background: var(--qgo-panel); color: var(--qgo-text); }
.qgo-app .navbar-burger { color: var(--qgo-text); }
.qgo-app .navbar-brand img { max-height: 32px; }
.qgo-salon { max-width: 1520px; margin: auto; padding: 24px max(20px, env(safe-area-inset-right)) 32px max(20px, env(safe-area-inset-left)); }
.qgo-salon button, .qgo-salon input, .qgo-salon textarea { font: inherit; }
.qgo-salon button { cursor: pointer; }
.qgo-salon button:disabled { opacity: .5; cursor: default; }
.qgo-salon :is(button, summary, input, textarea):focus-visible { outline: 2px solid var(--qgo-copper); outline-offset: 3px; }
.qgo-game-heading { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 22px; }
.qgo-game-heading h1 { font: 32px/1.2 Georgia, serif; color: var(--qgo-text); }
.qgo-eyebrow { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--qgo-muted); margin-bottom: 4px; }
.qgo-board-size { color: var(--qgo-muted); font-variant-numeric: tabular-nums; }
.qgo-game-layout { display: grid; grid-template-columns: minmax(0,1fr) minmax(260px,320px); gap: 26px 34px; align-items: start; }
.qgo-board-column { min-width: 0; }
.qgo-board { display: block; width: 100%; max-width: max(440px,calc(100vh - 160px)); margin: auto; aspect-ratio: 1; border-radius: 9px; box-shadow: 0 8px 24px #0003; }
.qgo-board-hit { cursor: crosshair; }
.qgo-board-hit:focus { outline: none; stroke: #815026; stroke-width: .65; rx: 1; }
.qgo-board-help { text-align: center; color: var(--qgo-muted); font-size: 12px; margin: 13px 0 19px; }
.qgo-player { display: grid; grid-template-columns: 22px minmax(0,1fr); gap: 6px 11px; padding: 16px 0; border-bottom: 1px solid var(--qgo-line); }
.qgo-player:first-child { padding-top: 0; }
.qgo-player-name { overflow-wrap: anywhere; }
.qgo-clock { grid-column: 2; font-size: clamp(17px,1.8vw,24px); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.qgo-clock-urgent { color: var(--qgo-danger); font-weight: 600; }
.qgo-player-active .qgo-player-name::after { content: ' •'; color: var(--qgo-accent); }
.qgo-stone-dot { width: 19px; height: 19px; margin-top: 3px; border-radius: 50%; background: radial-gradient(circle at 30% 25%,#fff,#cecec5); box-shadow: 0 2px 4px #0005; }
.qgo-stone-dot-black { background: radial-gradient(circle at 30% 25%,#68747a,#101719 80%); border: 1px solid #64736c; }
.qgo-turn { min-height: 1.5em; padding: 15px 0 22px; font-size: 14px; color: var(--qgo-muted); }
.qgo-own-turn { color: var(--qgo-accent); }
.qgo-section-title { font: 24px/1.3 Georgia, serif; color: var(--qgo-text); margin-bottom: 7px; }
.qgo-help { font-size: 13px; color: var(--qgo-muted); line-height: 1.55; }
.qgo-selection { display: flex; flex-wrap: wrap; gap: 8px; min-height: 48px; margin: 15px 0 10px; }
.qgo-point { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 9px; border-radius: 5px; border: 1px solid #977c5f; background: transparent; color: var(--qgo-copper); min-height: 44px; }
.qgo-point:hover { background: #423a2f; }
.qgo-point-number { display: grid; place-items: center; border: 1px solid #977c5f; border-radius: 50%; width: 23px; height: 23px; font-size: 12px; }
.qgo-move-hint { color: var(--qgo-muted); font-size: 13px; min-height: 1.55em; }
.qgo-primary { display: block; width: 100%; padding: 13px 14px; border: 0; border-radius: 5px; background: var(--qgo-accent); color: #17221c; margin: 13px 0 10px; font-weight: 600!important; min-height: 46px; }
.qgo-primary:hover:not(:disabled) { background: #b2d1b3; }
.qgo-secondary { min-height: 44px; padding: 10px 13px; border: 1px solid var(--qgo-line); border-radius: 5px; background: transparent; color: var(--qgo-text); }
.qgo-secondary:hover:not(:disabled) { background: var(--qgo-panel); }
.qgo-text-button { border: 0; background: transparent; color: var(--qgo-muted); padding: 12px 4px; min-height: 44px; }
.qgo-text-button:hover:not(:disabled) { color: var(--qgo-text); }
.qgo-secondary-actions { display: flex; flex-wrap: wrap; gap: 10px; margin: 9px 0 20px; }
.qgo-danger { color: var(--qgo-danger); }
.qgo-disclosure { border-top: 1px solid var(--qgo-line); padding: 13px 0; }
.qgo-disclosure summary { color: var(--qgo-text); cursor: pointer; padding: 7px 0; min-height: 38px; }
.qgo-disclosure[open] summary { margin-bottom: 10px; }
.qgo-check { display: flex; align-items: center; gap: 9px; min-height: 44px; color: var(--qgo-muted); }
.qgo-check input { accent-color: var(--qgo-accent); }
.qgo-stats { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; margin-top: 10px; font-size: 13px; }
.qgo-stats dt { color: var(--qgo-muted); }
.qgo-stats dd { font-variant-numeric: tabular-nums; }
.qgo-game-extras { grid-column: 1 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 34px; align-items: start; min-width: 0; }
.qgo-history { list-style: decimal inside; max-height: 260px; overflow: auto; font-size: 13px; font-variant-numeric: tabular-nums; }
.qgo-history li { border-bottom: 1px solid #39453e; padding: 7px 0; overflow-wrap: anywhere; }
.qgo-field { display: grid; gap: 6px; font-size: 13px; color: var(--qgo-muted); min-width: 0; }
.qgo-field input, .qgo-field textarea { width: 100%; border: 1px solid var(--qgo-line); border-radius: 5px; background: #19221d; color: var(--qgo-text); padding: 10px 12px; }
.qgo-field input { font-size: 16px; }
.qgo-chat-log { height: 180px; resize: vertical; margin: 5px 0 12px; }
.qgo-chat-compose { display: flex; gap: 10px; align-items: end; }
.qgo-chat-compose .qgo-field { flex: 1; }
.qgo-result { padding: 20px; color: var(--qgo-accent); background: var(--qgo-panel); text-align: center; border-radius: 6px; }
@media(max-width:760px) {
  .qgo-salon { padding: 18px max(12px,env(safe-area-inset-right)) 24px max(12px,env(safe-area-inset-left)); }
  .qgo-game-layout, .qgo-game-extras { grid-template-columns: minmax(0,1fr); gap: 20px; }
  .qgo-game-sidebar { border-top: 1px solid var(--qgo-line); padding-top: 18px; }
  .qgo-board { max-width: 100%; }
  .qgo-game-heading { margin-bottom: 15px; }
  .qgo-game-heading h1 { font-size: 27px; }
  .qgo-clock { font-size: 22px; }
  .qgo-selection { min-height: 44px; }
}

.qgo-board-viewport { max-width:100%; overflow:auto; border-radius:9px; }
.qgo-board-zoomed { max-height:72vh; overscroll-behavior:contain; }
.qgo-board-zoomed .qgo-board { max-width:none; }
.qgo-board-zoom-toggle { display:block; margin:.4rem auto; }