/* shell.css - the page chrome around the game canvas: the bottom dock (one icon button that
   shows/hides the two mirrored panels, Debug left and Controls right), the developer-gated
   tool group, the sign-in provider buttons, and the z-order fixes that keep the chrome above
   the canvas in fullscreen. Loaded after style.css and auth.css; overrides on purpose. */

/* ========== BOTTOM DOCK: one icon button, no label; it shows/hides BOTH panels ========== */
.dock {
  position: fixed; bottom: 8px; left: 50%; transform: translateX(-50%);
  display: flex; z-index: 10006;
}
.dock-pill {
  width: 30px; height: 22px; box-sizing: border-box;
  background: rgba(0,0,0,0.78); color: #ddd; border: 1px solid #444; border-radius: 4px;
  cursor: pointer; font-size: 12px; line-height: 20px; padding: 0; text-align: center;
  text-shadow: 1px 1px 0 #000;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.dock-pill:hover { background: rgba(40,40,40,0.9); color: #fff; }
.dock-pill.open { color: #fa0; border-color: #a60; }
.dock-pill::before { content: '\25B4'; }          /* small up-caret: panels are closed */
.dock-pill.open::before { content: '\25BE'; }     /* down-caret: panels are open */

/* ========== THE PANEL: one box, Debug on the left, Controls on the right, one X ========== */
.dock-panel {
  position: fixed; bottom: 38px; left: 50%; transform: translateX(-50%);
  display: flex; align-items: stretch; gap: 0;
  background: rgba(0,0,0,0.85); border: 1px solid #333; border-radius: 4px;
  font-family: 'PixelFont', monospace; font-size: 10px; color: #ddd;
  z-index: 10005;
  transform-origin: bottom center;
  transition: transform 0.18s ease-in, opacity 0.18s ease-in;
}
.dock-panel.collapsed { transform: translateX(-50%) scale(0.15); opacity: 0; pointer-events: none; }
.dock-panel-close {
  position: absolute; top: 2px; right: 3px;
  background: none; border: none; color: #888; cursor: pointer; font-size: 12px;
  line-height: 14px; width: 16px; height: 16px; padding: 0; font-family: inherit;
}
.dock-panel-close:hover { color: #fff; }
.dock-col { padding: 8px 10px; min-width: 200px; box-sizing: border-box; }
.dock-col-debug { border-right: 1px solid #2a2a2a; }
.dock-col-controls { padding-right: 22px; }   /* room for the X */

/* The existing #debug and .controls blocks live INSIDE the panel now: strip their old
   free-floating boxes (fixed position, own background) and let the panel frame them. */
.dock-panel .debug {
  position: static !important; background: none !important; padding: 0 !important;
  transform: none !important; white-space: nowrap; display: block !important;
}
.dock-panel .controls {
  margin: 0 !important; background: none !important; padding: 0 !important; width: auto !important;
  display: block !important;
}
.dock-panel .section { display: block; margin: 0 0 4px 0; padding: 0; background: none; }
.dock-panel .section:last-child { margin-bottom: 0; }
.dock-panel .controls p { margin: 1px 0; }

/* ========== TOP-RIGHT TOOLBAR: developer tools behind one button ========== */
.dev-only { display: none !important; }
body.is-dev .dev-only { display: flex !important; }
.dev-group { display: contents; }
.dev-btn {
  background: rgba(138, 43, 226, 0.9); color: white; border: none; border-radius: 4px;
  padding: 4px 8px; cursor: pointer; font-size: 10px; height: 22px; box-sizing: border-box;
  font-family: 'PixelFont', monospace; text-shadow: 1px 1px 0 #430a70;
  display: flex; align-items: center; justify-content: center;
}
.dev-btn:hover { background: rgba(158, 63, 246, 0.95); }
.dev-btn.active { background: rgba(255, 170, 0, 0.9); }
/* The tool buttons only appear once the Dev button is toggled on (and only for developers). */
body.is-dev .dev-tool { display: none !important; }
body.is-dev .bottom-buttons.dev-open .dev-tool { display: flex !important; }

/* ========== SIGN-IN PROVIDERS ========== */
.auth-providers { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 10px 0; }
.auth-provider {
  display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box;
  padding: 9px 12px; border-radius: 4px; border: 1px solid #444; cursor: pointer;
  font-family: 'PixelFont', monospace; font-size: 10px; color: #eee; text-align: left;
  background: rgba(255,255,255,0.06); transition: background 0.15s, border-color 0.15s;
}
.auth-provider:hover:not(:disabled) { background: rgba(255,255,255,0.12); border-color: #777; }
.auth-provider:disabled { opacity: 0.5; cursor: wait; }
.auth-provider .auth-provider-icon {
  width: 16px; height: 16px; flex: 0 0 16px; display: inline-flex; align-items: center; justify-content: center;
}
.auth-provider .auth-provider-icon svg { width: 16px; height: 16px; display: block; }
.auth-privacy {
  font-family: 'PixelFont', monospace; font-size: 8px; color: #9a9; line-height: 1.5;
  text-align: center; margin: 0 0 8px 0;
}
.account-provider-line { font-size: 9px; color: #9a9; margin: 2px 0 8px 0; }
.account-panel .auth-providers { margin-top: 8px; }

/* ========== FULLSCREEN: keep the chrome above the canvas ========== */
/* In fullscreen the game canvas is lifted to z-index 9999, which put it ABOVE the battle
   layers (dim 59, Showdown sprites 60, HUD 61) and the spectate side panel (200): the map and
   the player were painted over the battlers, the dim showed through them, and the panel was
   gone. The battle stack must sit above the canvas in that mode, in its own order. */
body.fullscreen-mode #battleDim    { z-index: 10000 !important; }
body.fullscreen-mode #psBattleWrap { z-index: 10004 !important; }
body.fullscreen-mode #battleHud    { z-index: 10006 !important; }
body.fullscreen-mode #spectateSide { z-index: 10009 !important; }
body.fullscreen-mode #spectateMatchup { z-index: 10010 !important; }
body.fullscreen-mode .bottom-buttons { z-index: 10020; }
body.fullscreen-mode .settings-panel,
body.fullscreen-mode .account-panel,
body.fullscreen-mode .asset-panel,
body.fullscreen-mode .edit-panel,
body.fullscreen-mode .admin-panel,
body.fullscreen-mode .user-admin-panel { z-index: 10021; }
body.fullscreen-mode .dock-panel { z-index: 10021; }
body.fullscreen-mode .dock { z-index: 10022; }
body.fullscreen-mode .dock-panel .controls,
body.fullscreen-mode .dock-panel .debug { display: block !important; }
/* The page's own title is redundant once the canvas fills the viewport. */
body.fullscreen-mode .game-container > h1 { display: none; }

/* Touch devices get the on-screen pad; the dock would sit under it. */
@media (pointer: coarse) {
  .dock, .dock-panel { display: none !important; }
}