/* ==========================================================================
   STICK ARENA RESKIN — DIALOGS / MODALS / TOASTS / LOADING / SETTINGS FAB
   Owner: dialogs worker. Loads after styles.css/prestige.css/sa-core.css:
   equal-specificity rules here win by cascade order. Uses sa-core tokens.
   Scope: the four <dialog> windows (settings, account, controls, player
   profile), #toast-stack, #loading-overlay, #settings-fab.
   ========================================================================== */

/* --- Backdrop: dark blue haze, light blur -------------------------------- */
dialog::backdrop {
  background: rgba(10, 16, 24, 0.6);
  backdrop-filter: blur(2px);
}

/* --- Dialog window: beveled SA steel plate -------------------------------- */
dialog {
  color: #e8eef5;
  border: var(--sa-frame);
  border-radius: var(--sa-radius);
  background: linear-gradient(180deg, var(--sa-steel-600) 0%, var(--sa-steel-700) 55%, var(--sa-steel-800) 100%);
  box-shadow:
    var(--sa-bevel-panel),
    0 30px 80px rgba(0, 0, 0, 0.65),
    0 4px 0 rgba(0, 0, 0, 0.35);
  color-scheme: dark;
}
dialog[open] { animation: sa-dialog-in 150ms ease-out; }
@keyframes sa-dialog-in {
  from { transform: translateY(10px) scale(0.97); opacity: 0; }
  to { transform: translateY(0) scale(1); opacity: 1; }
}

/* Player profile popup: same steel, one notch darker (SA profile window). */
.profile-dialog {
  border: var(--sa-frame);
  border-radius: var(--sa-radius);
  background: linear-gradient(180deg, var(--sa-steel-700) 0%, var(--sa-steel-800) 55%, var(--sa-steel-900) 100%);
  box-shadow:
    var(--sa-bevel-panel),
    0 30px 80px rgba(0, 0, 0, 0.7);
  color: #e8eef5;
}

/* Titles: chunky Baloo, bright on steel. Kickers stay gold pixel (global). */
dialog h2 {
  margin: 4px 0 10px;
  color: #f3f8fd;
  font-family: var(--sa-chunky);
  font-weight: 800;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
}
dialog .panel-kicker { display: inline-block; }
dialog .field-label {
  color: var(--sa-gold);
  font-family: var(--sa-pixel);
  font-size: 9px;
  letter-spacing: 0.14em;
}
dialog .settings-note, dialog .account-help { color: var(--sa-steel-300); }
dialog p { color: #c6d4e2; }
dialog .button-full { margin-top: 8px; }

/* --- Close button: square steel 3D "window close", red on hover ----------- */
.dialog-close {
  width: 30px;
  height: 30px;
  border: 2px solid var(--sa-btn-border);
  border-radius: 6px;
  background: linear-gradient(180deg, var(--sa-btn-hi) 0%, var(--sa-btn-mid) 55%, var(--sa-btn-lo) 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.8),
    inset 0 -2px 0 rgba(70, 88, 110, 0.5),
    0 2px 0 rgba(0, 0, 0, 0.4);
  color: var(--sa-btn-ink);
  font-family: var(--sa-chunky);
  font-size: 17px;
  font-weight: 800;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: filter 80ms ease, transform 60ms ease;
}
.profile-dialog .dialog-close { color: var(--sa-btn-ink); }
.dialog-close:hover {
  background: linear-gradient(180deg, #f6b8ae 0%, #d96a58 55%, #a83f30 100%);
  border-color: #3d1109;
  color: #2c0c05;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
}
.dialog-close:active {
  transform: translateY(2px);
  box-shadow: inset 0 2px 4px rgba(30, 45, 62, 0.45);
}

/* --- Field rows ----------------------------------------------------------- */
.range-field, .toggle-field { color: #c6d4e2; }
.range-field span, .toggle-field span {
  font-family: var(--sa-chunky);
  font-weight: 700;
  font-size: 13px;
}

/* Range sliders: dark inset well track + square steel 3D thumb. */
.range-field input[type="range"] {
  -webkit-appearance: none;
  appearance: none;
  width: 190px;
  height: 18px;
  background: transparent;
  cursor: pointer;
}
.range-field input[type="range"]::-webkit-slider-runnable-track {
  height: 10px;
  border: 2px solid var(--sa-well-line);
  border-radius: 5px;
  background: var(--sa-well);
  box-shadow: var(--sa-bevel-well);
}
.range-field input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -6px;
  border: 2px solid var(--sa-btn-border);
  border-radius: 4px;
  background: linear-gradient(180deg, var(--sa-btn-hi) 0%, var(--sa-btn-mid) 55%, var(--sa-btn-lo) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -2px 0 rgba(70, 88, 110, 0.5),
    0 1px 0 rgba(0, 0, 0, 0.4);
}
.range-field input[type="range"]::-moz-range-track {
  height: 10px;
  border: 2px solid var(--sa-well-line);
  border-radius: 5px;
  background: var(--sa-well);
  box-shadow: var(--sa-bevel-well);
}
.range-field input[type="range"]::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border: 2px solid var(--sa-btn-border);
  border-radius: 4px;
  background: linear-gradient(180deg, var(--sa-btn-hi) 0%, var(--sa-btn-mid) 55%, var(--sa-btn-lo) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.8),
    inset 0 -2px 0 rgba(70, 88, 110, 0.5);
}
.range-field input[type="range"]:focus-visible {
  outline: 2px solid var(--sa-bar-hi);
  outline-offset: 3px;
}

/* Toggles: custom SA checkbox — light steel 3D box, thick gold check. */
.toggle-field input[type="checkbox"] {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  margin: 0;
  border: 2px solid var(--sa-btn-border);
  border-radius: 5px;
  background: linear-gradient(180deg, var(--sa-btn-hi) 0%, var(--sa-btn-mid) 55%, var(--sa-btn-lo) 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.75),
    inset 0 -2px 0 rgba(70, 88, 110, 0.5),
    0 1px 0 rgba(0, 0, 0, 0.4);
  cursor: pointer;
}
.toggle-field input[type="checkbox"]::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 10px;
  border: solid var(--sa-gold-dark);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg) scale(0.6);
  opacity: 0;
  transition: opacity 80ms ease, transform 80ms ease;
}
.toggle-field input[type="checkbox"]:checked {
  background: linear-gradient(180deg, #fff6cf 0%, #f3d65a 55%, #d8ab22 100%);
  border-color: #4d3a05;
}
.toggle-field input[type="checkbox"]:checked::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
  border-color: #5c4304;
}
.toggle-field input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--sa-bar-hi);
  outline-offset: 2px;
}

/* --- kbd chips: dark well, white pixel, steel edge ------------------------- */
kbd {
  min-width: 76px;
  padding: 6px 8px;
  border: 1px solid var(--sa-steel-500);
  border-bottom: 3px solid var(--sa-well-line);
  border-radius: 5px;
  background: linear-gradient(180deg, var(--sa-well) 0%, var(--sa-well-deep) 100%);
  box-shadow: var(--sa-bevel-well);
  color: #ffffff;
  font-family: var(--sa-pixel);
  font-size: 9px;
  font-weight: 700;
  text-align: center;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
}
.controls-grid > div {
  border: var(--sa-frame);
  border-radius: var(--sa-radius);
  background: linear-gradient(180deg, var(--sa-steel-700) 0%, var(--sa-steel-800) 100%);
  box-shadow: var(--sa-bevel-panel);
}
.controls-grid span { color: var(--sa-steel-200); }

/* --- Account dialog bits --------------------------------------------------- */
/* Google button keeps the gold SA-primary look; the G mark stays a bright
   chip so the provider stays recognizable inside the SA frame. */
#google-login-button { margin-top: 10px; }
.google-mark {
  border: 2px solid rgba(0, 0, 0, 0.35);
  background: #ffffff;
  color: #1a1a1a;
  font-family: var(--sa-chunky);
  font-weight: 800;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
#account-dialog-avatar {
  border: 2px solid var(--sa-gold-outline);
  background: linear-gradient(180deg, var(--sa-gold-hi) 0%, var(--sa-gold) 55%, var(--sa-gold-dark) 100%);
  color: #3a2c04;
  font-family: var(--sa-chunky);
  font-weight: 800;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.6), 0 2px 0 rgba(0, 0, 0, 0.4);
}
.account-identity strong { color: #f3f8fd; font-family: var(--sa-chunky); }
.account-identity small { color: var(--sa-steel-300); }
.account-status-grid {
  border: var(--sa-frame);
  border-radius: var(--sa-radius);
  background: var(--sa-well-line);
}
.account-status-grid > div {
  background: linear-gradient(180deg, var(--sa-well) 0%, var(--sa-well-deep) 100%);
  box-shadow: var(--sa-bevel-well);
}
.account-status-grid span {
  color: var(--sa-gold);
  font-family: var(--sa-pixel);
  font-size: 8px;
  letter-spacing: 0.12em;
}
.account-status-grid b { color: #e8eef5; font-family: var(--sa-chunky); }

/* Danger zone: red pixel summary on steel, danger button comes from sa-core. */
.danger-zone { border-top: 1px solid rgba(0, 0, 0, 0.45); }
.danger-zone summary {
  color: #ff8d7e;
  font-family: var(--sa-pixel);
  font-size: 9px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
}
.danger-zone summary:hover { color: #ffb0a4; }
.danger-zone summary::marker { color: var(--sa-gold-dark); }
.danger-zone p { color: var(--sa-steel-300); }

/* --- Toasts: dark steel chips, gold left edge, pixel text -------------------
   Markup (js/app.js): div.toast.info|success|error; entrance via .show,
   exit via .leaving (transform/opacity transitions live in styles.css). */
.toast {
  padding: 10px 12px 10px 10px;
  border: var(--sa-frame);
  border-left: 4px solid var(--sa-gold);
  border-radius: 6px;
  background: linear-gradient(180deg, var(--sa-steel-700) 0%, var(--sa-steel-800) 100%);
  box-shadow:
    var(--sa-bevel-panel),
    0 10px 26px rgba(0, 0, 0, 0.55);
  color: #e8eef5;
  font-family: var(--sa-pixel);
  font-size: 10px;
  font-weight: 400;
  line-height: 1.5;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}
.toast.success { border-left-color: var(--sa-chat-green); }
.toast.error { border-left-color: var(--sa-chat-red); }

/* --- Loading overlay: steel card + gold spinner ------------------------------
   Choice: keep the border-top spinner (markup already ships
   .loading-spinner) recolored SA gold on steel — reads instantly at small
   size and matches the round SA lobby spinners; the pixel #loading-text
   carries the "LOADING" flavor next to it. */
.loading-overlay {
  background: rgba(10, 16, 24, 0.6);
  backdrop-filter: blur(2px);
}
.loading-card {
  padding: 20px 24px;
  border: var(--sa-frame);
  border-radius: var(--sa-radius);
  background: linear-gradient(180deg, var(--sa-steel-600) 0%, var(--sa-steel-700) 55%, var(--sa-steel-800) 100%);
  box-shadow:
    var(--sa-bevel-panel),
    0 24px 60px rgba(0, 0, 0, 0.6);
  color: var(--sa-gold);
  font-family: var(--sa-pixel);
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.7);
}
#loading-text {
  font-family: var(--sa-pixel);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--sa-gold);
  text-transform: uppercase;
}
.loading-spinner {
  width: 22px;
  height: 22px;
  border: 3px solid var(--sa-steel-500);
  border-top-color: var(--sa-gold);
  border-radius: 50%;
}

/* --- Settings FAB: round steel 3D button, slight gear turn on hover -------- */
.settings-fab {
  width: 46px;
  height: 46px;
  border: 2px solid var(--sa-btn-border);
  border-radius: 50%;
  background: linear-gradient(180deg, var(--sa-steel-300) 0%, var(--sa-steel-400) 55%, var(--sa-steel-500) 100%);
  box-shadow:
    inset 0 2px 0 rgba(255, 255, 255, 0.45),
    inset 0 -3px 0 rgba(0, 0, 0, 0.3),
    0 3px 0 rgba(0, 0, 0, 0.45),
    0 8px 18px rgba(0, 0, 0, 0.45);
  color: #101c29;
  font-size: 21px;
  line-height: 1;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.35);
  cursor: pointer;
  transition: transform 140ms ease, filter 80ms ease;
}
.settings-fab:hover {
  transform: rotate(35deg);
  filter: brightness(1.08);
}
.settings-fab:active {
  transform: rotate(35deg) translateY(2px);
  box-shadow:
    inset 0 2px 4px rgba(0, 0, 0, 0.4),
    0 1px 0 rgba(0, 0, 0, 0.4);
}

/* Reduced motion: no pop-in, no gear spin. */
@media (prefers-reduced-motion: reduce) {
  dialog[open] { animation: none; }
  .settings-fab, .settings-fab:hover, .settings-fab:active { transition: none; transform: none; }
  .toggle-field input[type="checkbox"]::after { transition: none; }
}