/* Approved September 29 lobby concept. Shared by browser and native shell. */
body:has(#game:not(.hidden)) { background: #080c13; }
#game {
  --game-ink: #080c13;
  --game-panel: #10151f;
  --game-line: #303e57;
  --game-cyan: #24e8ed;
  --game-pink: #f54cce;
  --game-muted: #b5bdc8;
  width: min(100%, 680px);
  height: 100dvh;
  min-height: 0;
  margin: 0 auto;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  gap: 8px;
  overflow: hidden;
  background: var(--game-ink);
  color: #f5f4f0;
  font-family: "QBall Sans", sans-serif;
  font-size: 16px;
}
#game :is(button, input) { letter-spacing: 0; }
#game :is(button, [role="slider"]):focus-visible { outline: 3px solid var(--game-pink); outline-offset: 3px; }
#game .game-header {
  grid-row: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  width: 100%;
  min-height: 0;
  margin: 0;
}
.game-wordmark { display: block; width: min(46vw, 220px); height: auto; max-height: 68px; object-fit: contain; }
#game .room-tag { border: 0; background: none; padding: 0; color: var(--game-muted); font-size: 11px; font-weight: 700; letter-spacing: .12em; }
#game #modeBadge { color: inherit; }
#game #roomCode { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
#game .scoreboard { grid-row: auto; width: 100%; margin: 0; grid-template-columns: minmax(0,1fr) 20px minmax(0,1fr); background: var(--game-panel); border: 1px solid var(--game-line); border-radius: 14px; box-shadow: none; }
#game .player-panel { min-height: 54px; padding: 8px; gap: 6px; grid-template-columns: 34px minmax(0,1fr) auto; transition: none; background: none; box-shadow: none; }
#game .player-panel::after { display: none; }
#game .player-right { grid-template-columns: auto minmax(0,1fr) 34px; }
#game .player-avatar { width: 34px; height: 34px; border-color: var(--game-cyan); background: #151f2a; box-shadow: none; }
#game .player-right .player-avatar { border-color: var(--game-pink); }
#game .player-initials { font-size: 12px; font-weight: 800; }
#game .player-name { font-size: 13px; font-weight: 800; letter-spacing: 0; }
#game .player-state { max-width: 100%; font-size: 11px; font-weight: 700; letter-spacing: 0; color: var(--game-cyan); }
#game .player-right .player-state { color: var(--game-pink); }
#game .player-score { align-items: center; gap: 2px; }
#game .score { color: var(--game-cyan); font-size: 27px; font-weight: 800; line-height: 1; text-shadow: none; font-variant-numeric: tabular-nums; }
#game .player-right .score { color: var(--game-pink); }
#game .balls-label { font-size: 11px; color: var(--game-muted); letter-spacing: 0; }
#game .versus { color: var(--game-muted); font-size: 11px; background: none; }
#game .versus::before, #game .versus::after, #game #roomCodeMini { display: none; }
#game .connection-dot { width: 8px; height: 8px; border-color: var(--game-ink); box-shadow: none; }
#game .status { grid-row: auto; width: 100%; min-height: 22px; margin: 0; font-size: 15px; line-height: 1.35; font-weight: 700; color: var(--game-cyan); text-align: center; }
.play-stage { display: grid; place-items: center; min-height: 0; min-width: 0; overflow: visible; }
.play-board { display: grid; grid-template-columns: var(--table-width, 260px) var(--rail-width, 60px); gap: var(--board-gap, 10px); height: var(--board-height, 416px); align-items: stretch; }
#game[data-shooting-hand="left"] .play-board { grid-template-columns: var(--rail-width, 60px) var(--table-width, 260px); }
#game[data-shooting-hand="left"] .table-shell { grid-column: 2; grid-row: 1; }
#game[data-shooting-hand="left"] .power-wrap { grid-column: 1; grid-row: 1; }
#game .table-shell { grid-row: auto; width: var(--table-width, 260px); height: 100%; max-width: none; max-height: none; min-height: 0; margin: 0; align-self: stretch; justify-self: stretch; border: 0; border-radius: 0; aspect-ratio: 1 / 1.6; box-shadow: none; background: var(--game-ink); }
#game .power-wrap { grid-column: auto; display: grid; grid-template-columns: minmax(0,1fr); grid-template-rows: auto minmax(44px,1fr) auto auto auto; gap: 7px; min-width: 0; min-height: 0; padding: 10px 6px; background: var(--game-panel); border: 1px solid var(--game-line); border-radius: 14px; color: var(--game-cyan); font-weight: 700; letter-spacing: 0; }
#game .power-label { font-size: 11px; text-align: center; white-space: nowrap; text-shadow: none; }
#game .power-track { width: 100%; height: 100%; min-height: 44px; border: 1px solid var(--game-line); border-radius: 12px; cursor: grab; box-shadow: none; background: #060a10; }
#game .power-track[aria-disabled="true"] { opacity: .65; }
#game .power-track::after { content: ""; position: absolute; right: 3px; top: 22px; bottom: 22px; width: 4px; background: repeating-linear-gradient(to bottom, #b5bdc8 0 1px, transparent 1px 20%); pointer-events: none; }
#game .power-track i { inset: 22px 3px 22px auto; width: 3px; height: auto; background: var(--game-cyan); box-shadow: none; transform: scaleY(var(--power)); transform-origin: center top; transition: none; }
#game .power-cue-meter { top: calc(50% + var(--power-shift)); left: 50%; right: auto; width: var(--cue-length, 280px); height: calc(var(--cue-length, 280px) * .496); background-size: 100% 100%; transform: translate(-50%, -50%) rotate(90deg); filter: none; transition: none; }
#game .power-value { color: var(--game-cyan); font-size: 16px; text-align: center; text-shadow: none; font-variant-numeric: tabular-nums; }
#game .power-value::after { font-size: 12px; }
#game .power-pull-hint { position: static; display: grid; justify-items: center; gap: 2px; color: var(--game-muted); font-size: 11px; line-height: 1.3; font-weight: 600; letter-spacing: 0; white-space: nowrap; opacity: 1; }
#game .power-pull-hint svg { width: 23px; height: 23px; color: var(--game-cyan); }
#game .power-wrap.charging .power-track { cursor: grabbing; border-color: var(--game-cyan); box-shadow: none; }
#game .power-wrap.charging .power-cue-meter { filter: none; }
#game .power-wrap.firing .power-cue-meter { animation: game-cue-strike 180ms ease-out; }
@keyframes game-cue-strike { from { top: 54%; } to { top: 50%; } }
#game .controls { grid-row: auto; display: grid; grid-template-columns: minmax(0,1fr); gap: 8px; width: 100%; margin: 0; }
.game-hints { display: grid; gap: 2px; text-align: center; min-height: 32px; align-content: center; }
#game #instruction { display: block; margin: 0; color: var(--game-muted); font-size: 12px; line-height: 1.3; font-weight: 500; }
#game #callStatus { min-width: 0; overflow-wrap: anywhere; color: var(--game-muted); font-size: 11px; font-weight: 600; line-height: 1.2; text-shadow: none; }
.game-actions { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
#game .game-actions > button { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; min-height: 68px; min-width: 0; padding: 7px; border: 1px solid var(--game-line); border-radius: 14px; background: var(--game-panel); color: #f5f4f0; font-size: 15px; font-weight: 700; line-height: 1.25; box-shadow: none; }
#game .game-actions > button:disabled { opacity: .55; filter: none; cursor: not-allowed; }
#game .game-actions > button:not(:disabled):hover { border-color: var(--game-cyan); }
#game .game-actions > button:active:not(:disabled) { background: #19252c; }
#game .game-actions svg { display: block; width: 29px; height: 29px; }
#game .spin-trigger strong { font-size: 15px; letter-spacing: 0; }
#game .spin-preview { width: 29px; height: 29px; background: none; border: 2px solid #f5f4f0; box-shadow: none; }
#game .spin-preview::before, #game .spin-preview::after { display: none; }
#game .spin-preview i { width: 7px; height: 7px; border: 0; box-shadow: none; }
.game-voice-icon { position: relative; }
.game-voice-dot { position: absolute; width: 7px; height: 7px; right: -4px; top: 1px; border-radius: 50%; background: #777f8b; }
.game-voice-button[data-voice="connected"] .game-voice-dot { background: #20e4a5; }
.game-voice-button[data-voice="muted"] .game-voice-dot { background: #f54cce; }
.game-voice-button[data-voice="reconnecting"] .game-voice-dot { background: #24e8ed; }
#game #friendsLoungeDockUnread { position: absolute; top: 3px; right: 6px; min-width: 20px; padding: 2px 4px; border-radius: 10px; background: var(--game-cyan); color: var(--game-ink); font-size: 11px; }
.game-rule-controls { display: grid; gap: 6px; }
.game-rule-controls:not(:has(> :not(.hidden))) { display: none; }
#game .game-rule-controls :is(button,.choice-actions) { grid-column: auto; }
#game .game-rule-controls button { min-height: 44px; margin: 0; border: 1px solid var(--game-cyan); background: var(--game-panel); color: #f5f4f0; font-size: 13px; }
#game .pwa-touch-status { position: fixed; z-index: 20; left: 4px; bottom: 0; background: #080c13; color: var(--game-cyan); font-size: 9px; }
#game .spin-panel { position: fixed; z-index: 8; left: 50%; top: 50%; bottom: auto; transform: translate(-50%,-50%); width: min(320px,calc(100vw - 32px)); height: min(410px,calc(100dvh - 40px)); overflow-y: auto; border: 1px solid var(--game-cyan); background: #10151f; border-radius: 14px; box-shadow: 0 14px 40px #0009; backdrop-filter: none; }
#game .spin-panel :is(strong,span,p,output,label) { font-size: 13px; letter-spacing: 0; }
#game .spin-panel button { font-size: 14px; letter-spacing: 0; min-height: 44px; }
#game .spin-panel label { min-height: 38px; }
#game .spin-pad { max-height: 160px; }
#friendsLoungeDock:not([data-open="true"]) { display: none; }
#friendsLoungeDock { top: auto; bottom: max(96px,calc(env(safe-area-inset-bottom) + 80px)); right: max(12px,env(safe-area-inset-right)); width: min(420px,calc(100vw - 24px)); }
#friendsLoungeDock .friends-lounge-dock-drawer { width: 100%; background: #10151f; max-height: calc(100dvh - 150px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); border-color: #303e57; }
@media (max-height: 720px) {
  #game { gap: 5px; padding-top: max(8px,env(safe-area-inset-top)); padding-bottom: max(8px,env(safe-area-inset-bottom)); }
  .game-wordmark { max-height: 46px; }
  #game .player-panel { min-height: 46px; padding: 5px; gap: 4px; }
  #game .status { min-height: 18px; font-size: 13px; }
  #game .game-actions > button { min-height: 55px; padding: 5px; gap: 3px; font-size: 13px; }
  #game .spin-trigger strong { font-size: 13px; }
  #game .game-actions svg, #game .spin-preview { width: 24px; height: 24px; }
  #game .game-hints { min-height: 28px; }
  #game .controls { gap: 5px; }
  #game .power-wrap { padding: 7px 4px; gap: 4px; }
  #game .power-pull-hint svg { width: 18px; height: 18px; }
}
@media (max-width: 350px) {
  #game .player-panel { grid-template-columns: minmax(0,1fr) auto; }
  #game .player-right { grid-template-columns: auto minmax(0,1fr); }
  #game .player-avatar { display: none; }
  #game .player-name { font-size: 11px; }
  #game .score { font-size: 23px; }
}
@media (max-height: 500px) and (orientation: landscape) {
  #game { max-width: none; grid-template-columns: minmax(140px,190px) minmax(0,1fr) 130px; grid-template-rows: auto auto minmax(0,1fr); gap: 8px 12px; }
  #game .game-header { grid-column: 1; grid-row: 1; }
  #game .scoreboard { grid-column: 1; grid-row: 2; }
  #game .player-panel { grid-template-columns: minmax(0,1fr); align-content: start; gap: 8px; }
  #game .player-right { grid-template-columns: minmax(0,1fr); }
  #game .player-avatar { display: none; }
  #game .player-copy, #game .player-right .player-copy { grid-column: 1; grid-row: 1; align-items: center; text-align: center; }
  #game .player-state { white-space: normal; line-height: 1.3; }
  #game .player-score, #game .player-right .player-score { grid-column: 1; grid-row: 2; align-items: center; }
  #game .status { grid-column: 1; grid-row: 3; align-self: start; }
  #game .play-stage { grid-column: 2; grid-row: 1 / -1; }
  #game .controls { grid-column: 3; grid-row: 1 / -1; align-self: center; }
  #game .game-actions { grid-template-columns: 1fr; }
  #game .game-actions > button { min-height: 52px; }
}
@media (prefers-reduced-motion: reduce) { #game .power-wrap.firing .power-cue-meter { animation: none; } }

/* Spin belongs to the shooting controls and stays inside the table height. */
#game .power-wrap .spin-trigger { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; width:100%; min-width:0; min-height:48px; padding:5px 2px; border:1px solid var(--game-line); border-radius:10px; background:#060a10; color:#f5f4f0; box-shadow:none; }
#game .power-wrap .spin-trigger strong { min-width:0; text-align:center; color:#f5f4f0; text-shadow:none; font-size:11px; }
#game .power-wrap .spin-preview { width:21px; height:21px; flex:none; }
#game .power-wrap .spin-trigger:disabled { opacity:.55; }
#lobby #cabinetMenu #leaveGameButton { width:100%; min-height:44px; margin:0 0 12px; border:1px solid #303e57; border-radius:12px; background:#10151f; color:#f5f4f0; font-size:15px; }

#tableSkinsDialog { width:min(340px,calc(100vw - 32px)); padding:22px; border:1px solid #303e57; border-radius:14px; color:#f5f4f0; background:#10151f; }
#tableSkinsDialog::backdrop { background:#0009; }
#tableSkinsDialog h2 { margin:0 0 8px; font-size:22px; }
#tableSkinsDialog p { margin:0 0 18px; color:#b5bdc8; font-size:14px; }
#tableSkinsDialog button { width:100%; min-height:48px; padding:12px; border:1px solid #303e57; border-radius:12px; background:#080c13; color:#f5f4f0; font-size:15px; box-shadow:none; }
#tableSkinsDialog .table-skin-choices { display:grid; gap:10px; margin-bottom:18px; }
#tableSkinsDialog .table-skin-choices button { display:grid; gap:5px; text-align:left; }
#tableSkinsDialog .table-skin-choices span { color:#b5bdc8; font-size:13px; }
#tableSkinsDialog button[aria-pressed="true"] { border-color:#24e8ed; background:#10292e; }

/* Clear turn ownership and action instructions without adding another panel. */
#game .player-panel.active { background:#103138; border-radius:12px; box-shadow:inset 0 0 0 2px var(--game-cyan); }
#game .player-right.active { background:#32132e; box-shadow:inset 0 0 0 2px var(--game-pink); }
#game .player-panel.active .player-name { color:var(--game-cyan); }
#game .player-right.active .player-name { color:var(--game-pink); }
#game .turn-status-row { display:flex; align-items:center; justify-content:center; gap:10px; min-width:0; }
#game .turn-status-row .status { width:auto; min-width:0; }
#game .shot-clock { flex:none; min-width:64px; padding:7px 10px; border:1px solid var(--game-cyan); color:var(--game-cyan); background:#10151f; font:800 22px/1 'QBall Sans',sans-serif; box-shadow:none; border-radius:10px; }
#game .shot-clock:not(.paused)::after { content:'s'; margin-left:2px; font-size:14px; }
#game .shot-clock.warning { color:#ffe175; border-color:#ffe175; }
#game .shot-clock.urgent { color:#ff91d7; border-color:#ff91d7; }
#game .shot-clock.paused { font-size:12px; color:var(--game-muted); }
#game.needs-placement .game-hints { padding:10px; border:2px solid var(--game-cyan); border-radius:12px; background:#103138; }
#game.needs-placement #instruction { color:#fff; font-size:16px; font-weight:800; line-height:1.3; }
#game.needs-placement #callStatus { color:var(--game-cyan); font-size:12px; }
@media (max-height: 720px) {
  #game.needs-placement .power-wrap { grid-template-rows:auto minmax(44px,1fr) auto auto; gap:4px; padding:6px 4px; }
  #game.needs-placement .power-pull-hint { display:none; }
  #game.needs-placement .power-wrap .spin-trigger { min-height:44px; padding:3px 2px; }
}

/* Music is a reachable table control, using the equipped collectible. */
#game .game-actions #jukeboxDockArt { width:32px; height:34px; object-fit:contain; }
#game .game-actions [hidden] { display:none; }
#jukeboxDialog { width:min(420px,calc(100% - 32px)); max-height:calc(100dvh - 48px); overflow:auto; padding:24px; border:2px solid #22f3ff; border-radius:16px; background:#101321; box-shadow:0 0 24px #22f3ff40,0 0 48px #ff38d52e; color:#f5f4f0; font-family:"QBall Sans",sans-serif; }
#jukeboxDialog::backdrop { background:#080c13cc; }
#jukeboxDialog header { display:flex; align-items:center; justify-content:space-between; gap:16px; }
#jukeboxDialog h2 { margin:0; font-size:28px; color:#22f3ff; text-shadow:0 0 18px #22f3ff66; }
#jukeboxDialog button { position:static; min-height:48px; padding:12px 16px; border:1px solid #303e57; border-radius:12px; background:#151f2a; color:#f5f4f0; box-shadow:none; font:700 15px "QBall Sans",sans-serif; white-space:normal; }
#jukeboxDialog #musicButton { display:block; width:100%; background:#22f3ff; color:#051114; box-shadow:0 0 20px #22f3ff55; margin:20px 0 12px; }
#jukeboxDialog #nextTrackButton { display:block; width:100%; line-height:1.5; border-color:#ff38d5; background:#34102e; color:#fff1fc; box-shadow:0 0 16px #ff38d538; }
#jukeboxDialog small { display:block; color:#b5bdc8; font-size:13px; line-height:1.5; margin-top:20px; }
#jukeboxDialog #equippedJukeboxArt { height:180px; margin:20px auto; }
#game .winner-overlay { z-index:50; padding:24px; background:#080c13dc; backdrop-filter:none; overflow:auto; }
#game #winnerDialog { width:min(100%,390px); padding:28px 24px; border:2px solid #22f3ff; border-radius:16px; background:linear-gradient(145deg,#17142a,#101321); box-shadow:0 0 24px #22f3ff40,0 0 55px #ff38d54d; font-family:"QBall Sans",sans-serif; }
#game .result-wordmark { width:140px; height:auto; margin-bottom:24px; }
#game .winner-overlay h2 { color:#22f3ff; text-shadow:0 0 22px #22f3ff66; font-size:clamp(32px,9vw,42px); line-height:1.12; margin:0 0 16px; letter-spacing:-.02em; }
#game .winner-overlay small { font-size:15px; line-height:1.5; color:#b5bdc8; min-height:0; }
#game .winner-actions { grid-template-columns:1fr; gap:12px; margin-top:28px; }
#game .winner-actions button { min-height:50px; font:700 16px "QBall Sans",sans-serif; border:1px solid #22f3ff; background:#22f3ff; color:#051114; box-shadow:0 0 22px #22f3ff55; transform:none; }
#game .winner-actions button:last-child { background:#ff38d5; color:#190718; border-color:#ff38d5; box-shadow:0 0 22px #ff38d55c; }
#game .winner-actions button:disabled { opacity:.5; }

#game .game-actions > #gameJukeboxButton { border-color:#22f3ff; color:#22f3ff; background:#10242e; box-shadow:inset 0 0 14px #22f3ff12; }
#game .game-actions > #lobbyButton { border-color:#ff38d5; color:#ff76e4; background:#271224; }
#game .game-actions > #friendsLoungeDockToggle:not(:disabled) { border-color:#22f3ff; color:#22f3ff; }
#jukeboxDialog button:focus-visible { outline:3px solid #ff76e4; outline-offset:3px; }