/* Where game panels open. Computer: top left, over the left-hand buttons, so the chat on the right stays in view.
   Phone: the games list is a sheet from the middle of the screen down, like the chat; a board is a centred canvas,
   and watching a game takes the chat's place. */
:root #watch-panel {
  margin: 0; padding: 18px 20px 20px; overflow: auto; overscroll-behavior: contain;
  background: var(--glass); color: var(--glass-ink); border: 1px solid var(--glass-line); border-radius: 22px;
  backdrop-filter: blur(24px) saturate(110%); -webkit-backdrop-filter: blur(24px) saturate(110%); box-shadow: var(--glass-shadow);
}
:root #watch-panel #watch-board { margin: 0; }
:root #watch-panel .watch-stop { display: block; margin: 0 0 12px auto; }

:root #watch-panel, :root #games-panel, :root #chess-table {
  position: fixed; inset: 12px auto auto 12px; transform: none; margin: 0;
  width: min(380px, calc(100vw - 24px)); height: auto; max-height: calc(100dvh - 24px);
}

@media (max-width: 600px) {
  :root #watch-panel, :root #games-panel, :root #chess-table {
    inset: auto 0 0 0; width: 100%; border-radius: 24px 24px 0 0; border-bottom: 0;
    padding-bottom: max(20px, env(safe-area-inset-bottom));
    animation: game-sheet-up .32s cubic-bezier(.2, .8, .2, 1);
  }
  /* The games list opens at half height. A board (watching, or playing chess) is a canvas in the middle of the screen,
     with the scene around it, clear of the top buttons and the home indicator. */
  :root #games-panel { height: min(56dvh, 620px); }
  :root #watch-panel, :root #chess-table {
    inset: 0; margin: auto; width: calc(100% - 24px); height: fit-content;
    max-height: calc(100dvh - 2 * max(64px, env(safe-area-inset-top) + 52px));
    border-radius: 22px; border-bottom: 1px solid var(--glass-line); padding-bottom: 20px;
    animation: game-canvas-in .24s cubic-bezier(.2, .8, .2, 1);
  }
  :root #chat-panel:has(#watch-panel:popover-open) { visibility: hidden; }
  :root #chat-panel #watch-panel { visibility: visible; }
}
@keyframes game-sheet-up { from { transform: translateY(100%); } to { transform: none; } }
@keyframes game-canvas-in { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { :root #watch-panel, :root #games-panel, :root #chess-table { animation: none; } }

/* Computer: hold the empty area of the chess table or a watched game to move it (drag-panels.js). */
@media (min-width: 601px) and (pointer: fine) {
  :root .movable { cursor: grab; touch-action: none; }
  :root .movable.moving { cursor: grabbing; user-select: none; box-shadow: 0 30px 60px -20px #172e3e88; }
  :root .movable :is(button, a, input, select, textarea, label, [data-square], #chess-board) { cursor: pointer; }
}

#games-toggle.has-pickle-invite{outline:2px solid #d6b76c;outline-offset:3px}