/*
 * File Purpose: Sphere settings stack + upper-center stats hub.
 * Author: Luke Steuber <luke@lukesteuber.com>
 */

/*
 * Shipped size/theme/nest/flag stubs must stay in the DOM for sphere.js, but
 * must NEVER paint. A soft 1×1 clip was still leaking “S” / “1” / theme SVG
 * over the BR gear — fully remove from the visual tree.
 */
.legacy-hud,
.legacy-hud * {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
  position: fixed !important;
  left: -10000px !important;
  top: -10000px !important;
  width: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

.dev-cluster {
  position: relative;
}

.customize-panel {
  --cz-font: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
  --cz-ink: inherit;
  position: static;
  width: max-content;
  max-width: min(260px, calc(100vw - 28px));
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
  padding-bottom: 4px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: inherit;
  box-shadow: none;
  pointer-events: auto;
  text-align: right;
  opacity: 1;
  visibility: visible;
  transform: none;
}
.customize-panel[hidden] { display: none; }

.customize-scrim {
  display: none !important;
  pointer-events: none !important;
}

/* ---- Upper-center mines + seconds (numbers only) ---- */
.settings-hub {
  --hub-ink: #000000;
  --hub-halo: #ffffff;
  position: fixed;
  top: max(14px, env(safe-area-inset-top));
  left: 50%;
  transform: translateX(-50%) translateY(-4px);
  z-index: 48;
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: center;
  gap: 1.35rem;
  pointer-events: none;
  color: var(--hub-ink);
  font: 600 22px/1 "IBM Plex Sans", system-ui, sans-serif;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.12s ease, transform 0.12s ease, visibility 0.12s;
  text-shadow:
    0 0 12px var(--hub-halo),
    0 0 5px var(--hub-halo),
    0 1px 0 var(--hub-halo),
    0 -1px 0 var(--hub-halo),
    1px 0 0 var(--hub-halo),
    -1px 0 0 var(--hub-halo);
}
body[data-sphere-chrome="dark"] .settings-hub {
  --hub-ink: #ffffff;
  --hub-halo: #000000;
}
.settings-hub[data-open="true"] {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
.settings-hub[hidden] { display: none; }
.settings-hub-mines,
.settings-hub-time {
  min-width: 1.5ch;
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .settings-hub { transition: none; }
}

/* Kill any leftover persistent Dig/Flag dock from earlier builds. */
#mode-dock,
.mode-dock {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* ---- Dig / Flag word pair (inside settings flyout only) ---- */
.cz-toggle {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0;
  margin: 0;
  padding: 0;
}
.cz-toggle-opts {
  display: flex;
  flex-direction: row;
  align-items: baseline;
  justify-content: flex-end;
  gap: 0.65rem;
}
.cz-toggle-opt {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font: 600 16px/1.2 "IBM Plex Sans", system-ui, sans-serif;
  letter-spacing: -0.015em;
  color: inherit;
  cursor: pointer;
  opacity: 0.28;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.cz-toggle-opt[data-on="true"],
.cz-toggle-opt[aria-pressed="true"] {
  opacity: 1;
}
.cz-toggle-opt:focus,
.cz-toggle-opt:focus-visible {
  outline: none;
  box-shadow: none;
}
@media (hover: hover) {
  .cz-toggle-opt:hover { opacity: 0.7; }
  .cz-toggle-opt[data-on="true"]:hover { opacity: 1; }
}

/* ---- Invert X / Invert Y — single word, grey off · bright on ---- */
.cz-switch {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 2px 0;
  margin: 0;
  font: 600 16px/1.2 "IBM Plex Sans", system-ui, sans-serif;
  letter-spacing: -0.015em;
  color: inherit;
  cursor: pointer;
  opacity: 0.28;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  text-align: right;
}
.cz-switch[data-on="true"],
.cz-switch[aria-pressed="true"] {
  opacity: 1;
}
.cz-switch:focus,
.cz-switch:focus-visible {
  outline: none;
  box-shadow: none;
}
@media (hover: hover) {
  .cz-switch:hover { opacity: 0.7; }
  .cz-switch[data-on="true"]:hover { opacity: 1; }
}

/* ---- Size · Warning · Theme — label only, tap to cycle ---- */
.cz-cycle {
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  padding: 2px 0;
  margin: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  text-align: right;
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.cz-cycle:focus,
.cz-cycle:focus-visible,
.cz-cycle:active {
  outline: none;
  box-shadow: none;
}
.cz-cycle-label {
  font: 600 16px/1.2 "IBM Plex Sans", system-ui, sans-serif;
  letter-spacing: -0.015em;
  color: inherit;
  pointer-events: none;
}
@media (hover: hover) {
  .cz-cycle:hover .cz-cycle-label {
    text-decoration: underline;
    text-underline-offset: 0.14em;
  }
}

.cz-dots {
  display: flex;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-items: center;
  gap: 2px;
  padding: 0;
  margin: 0;
  pointer-events: none;
}
.cz-dot {
  width: 5px;
  height: 5px;
  padding: 0;
  margin: 0;
  border: 1px solid currentColor;
  border-radius: 0;
  background: transparent;
  box-sizing: border-box;
  flex: 0 0 auto;
  filter:
    drop-shadow(0 0 2px var(--cz-halo, #fff))
    drop-shadow(0 0 1px var(--cz-halo, #fff));
}
body[data-sphere-chrome="dark"] .cz-dot {
  filter:
    drop-shadow(0 0 2px #000)
    drop-shadow(0 0 1px #000);
}
.cz-dot[data-on="true"] {
  background: currentColor;
}

/* Live status text must never paint near the gear. */
.cz-live,
.cz-live.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  border: 0 !important;
  left: -10000px !important;
  top: auto !important;
}