/* ==========================================================================
   COMPONENTS: buttons, reactor HUD, the living core, progression modules,
   the category shop, bottom blocks, notifications, dialogs, settings,
   save slots, and the (fixed) volume slider.
   ========================================================================== */

/* Buttons ------------------------------------------------------------------- */
.ghost-btn,
.seg-btn,
.action-btn,
.primary-btn,
.danger-btn,
.surge-btn,
.prestige-btn,
.buy-btn {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, background 0.18s ease,
    color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.ghost-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.6rem;
  padding: 0 0.85rem;
  color: var(--text-dim);
}

.ghost-btn:hover {
  border-color: var(--border-strong);
  color: var(--text);
  transform: translateY(-1px);
}

.ghost-btn-label {
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.action-btn,
.primary-btn,
.danger-btn {
  min-height: 2.7rem;
  padding: 0 1rem;
  font-family: var(--font-display);
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.action-btn:hover {
  border-color: var(--border-strong);
  transform: translateY(-1px);
}

.primary-btn {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--accent-contrast);
}

.primary-btn:hover {
  box-shadow: var(--glow);
  transform: translateY(-1px);
}

.danger-btn {
  color: var(--danger);
  border-color: color-mix(in srgb, var(--danger) 45%, transparent);
}

.danger-btn:hover {
  background: var(--danger);
  color: #fff;
  transform: translateY(-1px);
}

.btn-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

/* Segmented buy-mode control. */
.seg {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  padding: 0.2rem;
  gap: 0.2rem;
}

.seg-btn {
  border: 0;
  background: transparent;
  color: var(--text-dim);
  min-height: 2.1rem;
  padding: 0 0.85rem;
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.seg-btn.is-active {
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: var(--glow);
}

/* Save chip (subtle autosave feedback) -------------------------------------- */
.save-chip {
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  background: var(--surface-hi);
  color: var(--accent);
  font-family: var(--font-display);
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  opacity: 0;
  padding: 0.35rem 0.7rem;
  pointer-events: none;
  text-transform: uppercase;
  transform: translateY(4px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.save-chip.show {
  opacity: 1;
  transform: translateY(0);
}

/* Reactor HUD ----------------------------------------------------------------- */
.hud {
  text-align: center;
  padding: 0.4rem 0 0;
}

.energy-label {
  color: var(--text-faded);
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.46em;
  text-transform: uppercase;
}

.energy-value {
  color: var(--accent);
  font-family: var(--font-display);
  font-size: clamp(2.6rem, 5.4vw, 4.6rem);
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.03em;
  line-height: 1.04;
  margin: 0.2rem 0 0.75rem;
  text-shadow: var(--glow);
}

.hud-tiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.55rem;
}

.hud-tile {
  display: grid;
  gap: 0.14rem;
  min-width: 96px;
  border: 0;
  border-top: 2px solid color-mix(in srgb, var(--accent) 35%, transparent);
  border-radius: 0 0 var(--radius-sm) var(--radius-sm);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 7%, transparent), transparent 85%);
  padding: 0.5rem 0.8rem 0.4rem;
  transition: border-color 0.25s ease, background 0.25s ease;
}

.hud-tile-label {
  color: var(--text-faded);
  font-family: var(--font-display);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

.hud-tile strong {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.02rem;
  font-variant-numeric: tabular-nums;
}

.hud-tile-surge.is-ready {
  border-top-color: var(--accent-2);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 85%);
}

.hud-tile-surge.is-ready strong,
.hud-tile-surge.is-active strong {
  color: var(--accent-2);
}

.hud-tile-surge.is-active {
  border-top-color: var(--accent-2);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent-2) 18%, transparent), transparent 85%);
  box-shadow: 0 -6px 18px -10px var(--accent-2);
}

.hud-progress {
  max-width: 560px;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding-bottom: 0.4rem;
}

/* Progress / charge bars -------------------------------------------------------- */
.progress-shell,
.charge-shell {
  height: 0.55rem;
  background: color-mix(in srgb, var(--text) 9%, transparent);
  border: 1px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
}

.progress-bar,
.charge-bar {
  height: 100%;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-2), var(--accent-3));
  box-shadow: var(--glow);
  transition: width 0.22s ease;
}

.progress-text {
  color: var(--text-dim);
  font-size: 0.9rem;
  margin-top: 0.4rem;
}

/* Reactor stage: the core floats on the scene, not inside a card. ------------- */
.reactor-stage {
  display: grid;
  min-height: clamp(320px, 44vh, 480px);
  place-items: center;
  position: relative;
}

.core-btn {
  width: min(40vw, 300px);
  aspect-ratio: 1;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
  position: relative;
}

.core-halo,
.core-inner,
.core-orbit,
.core-ring,
.core-spark,
.core-flicker,
.core-pulse {
  position: absolute;
  border-radius: 50%;
  inset: 0;
  margin: auto;
}

.core-halo {
  width: 104%;
  height: 104%;
  background: radial-gradient(circle, var(--core-dim), transparent 65%);
  filter: blur(9px);
  opacity: calc(0.75 + var(--charge, 0) * 0.25);
}

.core-inner {
  width: 70%;
  height: 70%;
  background:
    radial-gradient(circle at 34% 30%, var(--core-hot) 0%, var(--core-color) 30%, var(--core-dim) 58%, transparent 72%),
    radial-gradient(circle at center, var(--core-color) 0%, var(--core-shell) 82%);
  box-shadow:
    inset 0 0 40px var(--core-glow-inner),
    0 0 26px var(--core-color),
    0 0 64px color-mix(in srgb, var(--core-color) 45%, transparent),
    0 0 110px color-mix(in srgb, var(--accent-2) 18%, transparent);
  transition: transform 0.12s ease;
}

/* Internal energy movement: a soft highlight that drifts around the plasma. */
.core-flicker {
  width: 70%;
  height: 70%;
  background: radial-gradient(circle at 64% 62%, rgba(255, 255, 255, 0.22), transparent 38%);
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Surge charge brightens the main ring as it builds (set via --charge). */
.core-ring {
  border: 2px solid var(--core-color);
  opacity: calc(0.3 + var(--charge, 0) * 0.5);
}

.core-ring::before,
.core-ring::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  border: 1px dashed var(--core-color);
  inset: 14%;
}

.core-ring::after {
  inset: 25%;
  border-style: solid;
  opacity: 0.45;
}

.core-spark {
  width: 86%;
  height: 86%;
  border: 1px solid color-mix(in srgb, var(--accent-2) 70%, transparent);
  transform: rotate(45deg);
  opacity: 0.48;
}

/* Outer orbit: appears as the reactor grows in power (tier 2+), and signals
   prestige readiness with gold / violet. */
.core-orbit {
  width: 99%;
  height: 99%;
  border: 1px dashed color-mix(in srgb, var(--core-color) 60%, transparent);
  opacity: 0;
  transition: opacity 0.6s ease, border-color 0.6s ease;
}

body[data-core-tier="2"] .core-orbit,
body[data-core-tier="3"] .core-orbit,
body[data-core-tier="4"] .core-orbit {
  opacity: 0.5;
}

body[data-core-tier="0"] .core-halo { opacity: 0.65; }
body[data-core-tier="3"] .core-inner,
body[data-core-tier="4"] .core-inner {
  box-shadow:
    inset 0 0 46px var(--core-glow-inner),
    0 0 34px var(--core-color),
    0 0 84px color-mix(in srgb, var(--core-color) 55%, transparent),
    0 0 150px color-mix(in srgb, var(--accent-2) 26%, transparent);
}

body.singularity-ready .core-orbit {
  opacity: 0.85;
  border-color: var(--accent-3);
  border-style: solid;
}

body.horizon-ready .core-orbit {
  opacity: 0.9;
  border-color: var(--horizon);
  border-style: double;
  border-width: 3px;
}

.core-pulse {
  width: 70%;
  height: 70%;
  border: 2px solid var(--core-color);
  opacity: 0;
  pointer-events: none;
}

.core-btn:hover .core-inner {
  transform: scale(1.045);
}

.core-btn:active .core-inner {
  transform: scale(0.92);
}

/* Floating numbers + particles ---------------------------------------------------- */
.float-container {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
}

.float-num {
  position: absolute;
  color: var(--accent);
  font-family: var(--font-display);
  font-size: clamp(1rem, 3.2vw, 1.5rem);
  font-weight: 900;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55), var(--glow);
  white-space: nowrap;
}

[data-theme="light"] .float-num {
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
}

.float-num.critical {
  color: var(--accent-3);
  font-size: clamp(1.15rem, 4vw, 1.8rem);
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.55), var(--glow-gold);
}

.particle {
  position: absolute;
  z-index: 5;
  width: 0.42rem;
  height: 0.42rem;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: var(--glow);
  pointer-events: none;
}

.particle-crit {
  background: var(--accent-3);
  box-shadow: var(--glow-gold);
}

/* Progression modules (left rail) --------------------------------------------------
   Each system gets a distinct identity: Surge = magenta energy cell,
   Singularity = gold gravity panel, Event Horizon = deep violet void. */
.module {
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  background: linear-gradient(150deg, var(--surface), color-mix(in srgb, var(--surface) 55%, transparent));
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 1rem;
}

.surge-module {
  border-left-color: var(--accent-2);
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--accent-2) 6%, transparent), transparent 55%),
    linear-gradient(150deg, var(--surface), color-mix(in srgb, var(--surface) 55%, transparent));
}

.singularity-module {
  border-left-color: var(--accent-3);
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(150deg, color-mix(in srgb, var(--accent-3) 6%, transparent), transparent 55%),
    linear-gradient(150deg, var(--surface), color-mix(in srgb, var(--surface) 55%, transparent));
}

.singularity-module::after {
  content: '';
  position: absolute;
  inset: -70%;
  z-index: -1;
  background: conic-gradient(from 0deg, transparent, color-mix(in srgb, var(--accent-3) 12%, transparent), transparent, color-mix(in srgb, var(--accent-2) 8%, transparent), transparent);
}

.horizon-module {
  border-left-color: var(--horizon);
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 80% 0%, color-mix(in srgb, var(--horizon) 14%, transparent), transparent 60%),
    linear-gradient(150deg, var(--surface), color-mix(in srgb, var(--surface) 55%, transparent));
}

.horizon-module::after {
  content: '';
  position: absolute;
  inset: -70%;
  z-index: -1;
  background: conic-gradient(from 0deg, transparent, color-mix(in srgb, var(--horizon) 14%, transparent), transparent, color-mix(in srgb, var(--accent-2) 7%, transparent), transparent);
}

.module-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}

.module-title {
  font-size: 0.84rem;
  font-weight: 800;
  letter-spacing: 0.16em;
}

.surge-title { color: var(--accent-2); }
.singularity-title { color: var(--accent-3); }
.horizon-title { color: var(--horizon); }

.module-desc {
  color: var(--text-dim);
  font-size: 0.94rem;
  line-height: 1.45;
  margin-bottom: 0.75rem;
}

.state-badge {
  border: 1px solid var(--border);
  border-radius: 999px;
  background: var(--surface-soft);
  color: var(--text-faded);
  font-family: var(--font-display);
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  padding: 0.3rem 0.65rem;
  white-space: nowrap;
}

.state-badge.is-ready {
  border-color: color-mix(in srgb, var(--good) 55%, transparent);
  color: var(--good);
}

.state-badge.is-active {
  border-color: var(--accent-2);
  color: var(--accent-2);
  box-shadow: var(--glow-pink);
}

.surge-btn,
.prestige-btn,
.horizon-btn {
  width: 100%;
  min-height: 2.9rem;
  margin-top: 0.7rem;
  font-family: var(--font-display);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.surge-btn {
  color: var(--accent-2);
  border-color: color-mix(in srgb, var(--accent-2) 45%, transparent);
}

.surge-btn:not(:disabled):hover {
  background: var(--accent-2);
  color: #fff;
  box-shadow: var(--glow-pink);
  transform: translateY(-1px);
}

.surge-module .charge-bar {
  background: linear-gradient(90deg, var(--accent-2), var(--accent-3));
  box-shadow: var(--glow-pink);
}

.prestige-info {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
}

.info-tile {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--text-dim);
  font-size: 0.85rem;
  padding: 0.6rem 0.7rem;
}

.info-tile strong {
  display: block;
  color: var(--accent-3);
  font-family: var(--font-display);
  font-size: 1.12rem;
  margin-top: 0.12rem;
}

.horizon-info .info-tile strong {
  color: var(--horizon);
}

.prestige-btn {
  color: var(--accent-3);
  border-color: color-mix(in srgb, var(--accent-3) 48%, transparent);
}

.prestige-btn:not(:disabled):hover,
.prestige-btn.is-ready:not(:disabled) {
  background: var(--accent-3);
  color: #1d1500;
  box-shadow: var(--glow-gold);
}

.prestige-btn.is-ready:not(:disabled):hover {
  transform: translateY(-1px);
}

.horizon-btn {
  border: 1px solid color-mix(in srgb, var(--horizon) 48%, transparent);
  border-radius: var(--radius-sm);
  background: var(--surface);
  color: var(--horizon);
  cursor: pointer;
  transition: transform 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, opacity 0.18s ease;
}

.horizon-btn.is-ready:not(:disabled),
.horizon-btn:not(:disabled):hover {
  background: var(--horizon);
  color: #fff;
  box-shadow: var(--glow-violet);
}

.surge-btn:disabled,
.prestige-btn:disabled,
.horizon-btn:disabled,
.buy-btn:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

/* Upgrade shop --------------------------------------------------------------------- */
.zone-shop {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(165deg, var(--surface), color-mix(in srgb, var(--surface) 55%, transparent));
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 1rem;
}

.shop-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.7rem;
  margin-bottom: 0.8rem;
}

.shop-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--text-dim);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  min-height: 2.2rem;
  padding: 0 0.8rem;
  text-transform: uppercase;
  transition: color 0.18s ease, background 0.18s ease, border-color 0.18s ease;
}

.shop-tab:hover {
  color: var(--text);
  border-color: var(--border);
}

.shop-tab.is-active {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
  border-color: color-mix(in srgb, var(--accent) 45%, transparent);
  color: var(--accent);
}

.shop-tab.is-locked {
  color: var(--text-faded);
}

.tab-badge {
  display: inline-grid;
  place-items: center;
  min-width: 1.2rem;
  height: 1.2rem;
  border-radius: 999px;
  background: var(--accent);
  color: var(--accent-contrast);
  font-size: 0.6rem;
  padding: 0 0.25rem;
}

.tab-dot {
  position: absolute;
  top: 0.1rem;
  right: 0.2rem;
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  background: var(--accent-3);
  box-shadow: var(--glow-gold);
}

.shop-summary {
  color: var(--text-faded);
  font-size: 0.85rem;
  margin-bottom: 0.7rem;
}

.upgrade-grid {
  display: grid;
  gap: 0.7rem;
}

.upgrade-teaser {
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  color: var(--text-dim);
  font-size: 0.92rem;
  padding: 0.9rem;
}

.upgrade {
  display: grid;
  gap: 0.65rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
  padding: 0.85rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}

.upgrade::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  opacity: 0.3;
  transition: opacity 0.2s ease;
}

.upgrade.can-buy {
  border-color: var(--border-strong);
}

.upgrade.can-buy::before {
  opacity: 0.8;
}

.upgrade:hover {
  transform: translateY(-2px);
  background: color-mix(in srgb, var(--surface-hi) 70%, transparent);
}

.upgrade-locked {
  opacity: 0.62;
  border-style: dashed;
}

.new-badge {
  display: inline-block;
  border: 1px solid color-mix(in srgb, var(--accent-3) 65%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent-3) 14%, transparent);
  color: var(--accent-3);
  font-family: var(--font-display);
  font-size: 0.56rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  margin-left: 0.4rem;
  padding: 0.1rem 0.45rem;
  vertical-align: middle;
}

.upg-top {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
}

.upg-icon {
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  font-size: 1.05rem;
}

.upg-name {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.88rem;
  letter-spacing: 0.04em;
}

.upg-desc {
  color: var(--text-dim);
  font-size: 0.9rem;
  line-height: 1.35;
  margin-top: 0.2rem;
}

.upg-meta {
  display: flex;
  justify-content: space-between;
  gap: 0.8rem;
  color: var(--text-dim);
  font-size: 0.88rem;
}

.upg-level {
  color: var(--accent-2);
  font-family: var(--font-display);
  font-weight: 800;
}

.buy-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 2.7rem;
  color: var(--accent);
  padding: 0 0.85rem;
  font-family: var(--font-display);
  font-weight: 800;
  letter-spacing: 0.12em;
  font-size: 0.76rem;
  text-transform: uppercase;
}

.buy-btn:hover:not(:disabled) {
  background: var(--accent);
  color: var(--accent-contrast);
  box-shadow: var(--glow);
  transform: translateY(-1px);
}

.buy-cost::before {
  content: '◆ ';
  opacity: 0.8;
}

.afford-track {
  height: 3px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 8%, transparent);
  overflow: hidden;
}

.afford-bar {
  height: 100%;
  width: 0;
  background: var(--accent);
  opacity: 0.7;
  transition: width 0.25s ease;
}

.upgrade.can-buy .afford-bar {
  opacity: 1;
  box-shadow: var(--glow);
}

/* Event Horizon shard shop ------------------------------------------------------- */
.horizon-shop {
  margin-top: 1rem;
}

.horizon-shop-title {
  color: var(--text-dim);
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}

.horizon-shop-grid {
  display: grid;
  gap: 0.7rem;
}

.horizon-upgrade {
  display: grid;
  gap: 0.6rem;
  border: 1px solid color-mix(in srgb, var(--horizon) 30%, transparent);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
  padding: 0.8rem;
}

.horizon-upgrade.maxed {
  border-style: dashed;
  opacity: 0.75;
}

.horizon-upgrade .upg-name {
  font-size: 0.84rem;
}

.horizon-upgrade-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.rank-pips {
  display: inline-flex;
  gap: 0.3rem;
}

.rank-pip {
  width: 0.6rem;
  height: 0.6rem;
  border: 1px solid color-mix(in srgb, var(--horizon) 55%, transparent);
  border-radius: 50%;
}

.rank-pip.filled {
  background: var(--horizon);
  box-shadow: var(--glow-violet);
}

.horizon-buy {
  min-height: 2.3rem;
  min-width: 4.2rem;
  justify-content: center;
  color: var(--horizon);
}

.horizon-buy:hover:not(:disabled) {
  background: var(--horizon);
  color: #fff;
  box-shadow: var(--glow-violet);
}

/* Bottom blocks: activity, achievements, stats ------------------------------------- */
.bottom-block {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: linear-gradient(165deg, var(--surface), color-mix(in srgb, var(--surface) 55%, transparent));
  box-shadow: var(--shadow-soft);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  padding: 1rem;
}

.collapse-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
  color: var(--text-dim);
  cursor: pointer;
  padding: 0.7rem 0.9rem;
  text-align: left;
  transition: border-color 0.18s ease, color 0.18s ease;
}

.collapse-toggle:hover {
  border-color: var(--border-strong);
  color: var(--text);
}

.collapse-preview {
  font-size: 0.92rem;
}

.collapse-arrow {
  font-size: 0.9rem;
  transition: transform 0.2s ease;
}

.collapse-toggle.is-open .collapse-arrow {
  transform: rotate(180deg);
}

.collapse-body {
  margin-top: 0.9rem;
}

/* Achievements ----------------------------------------------------------------------- */
.achievement-groups {
  display: grid;
  gap: 1.1rem;
}

.achievement-group-title {
  color: var(--text-dim);
  font-family: var(--font-display);
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  margin-bottom: 0.55rem;
}

.achievement-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 0.7rem;
}

.achievement {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  align-items: start;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
  padding: 0.8rem;
  transition: opacity 0.25s ease, transform 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.achievement.locked {
  opacity: 0.5;
  filter: grayscale(0.8);
}

.achievement.unlocked {
  border-color: color-mix(in srgb, var(--good) 45%, transparent);
  box-shadow: 0 0 24px color-mix(in srgb, var(--good) 9%, transparent);
}

.achievement-icon {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--accent-3);
  font-family: var(--font-display);
}

.achievement.unlocked .achievement-icon {
  border-color: color-mix(in srgb, var(--accent-3) 55%, transparent);
  box-shadow: var(--glow-gold);
}

.achievement h3 {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.85rem;
}

.achievement p {
  color: var(--text-dim);
  font-size: 0.9rem;
  line-height: 1.35;
  margin-top: 0.2rem;
}

/* Stats ------------------------------------------------------------------------------ */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.65rem;
}

.stat {
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  padding: 0.7rem 0.8rem;
}

.stat-label {
  display: block;
  color: var(--text-faded);
  font-family: var(--font-display);
  font-size: 0.6rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-bottom: 0.22rem;
}

.stat-val {
  color: var(--text);
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

/* Activity log ------------------------------------------------------------------------ */
.event-log {
  display: grid;
  gap: 0.45rem;
  list-style: none;
  max-height: 280px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.event-log li {
  display: flex;
  gap: 0.6rem;
  align-items: baseline;
  border-left: 2px solid var(--accent);
  background: var(--surface-soft);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 0.92rem;
  line-height: 1.35;
  padding: 0.5rem 0.7rem;
}

.event-log li.log-achievement,
.event-log li.log-milestone { border-left-color: var(--accent-3); }
.event-log li.log-singularity,
.event-log li.log-surge { border-left-color: var(--accent-2); }
.event-log li.log-horizon { border-left-color: var(--horizon); }
.event-log li.log-unlock { border-left-color: var(--accent); }
.event-log li.log-error,
.event-log li.log-warning { border-left-color: var(--danger); }
.event-log li.log-success { border-left-color: var(--good); }

.log-time {
  color: var(--text-faded);
  font-family: var(--font-display);
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
}

/* Notifications ------------------------------------------------------------------------ */
.notification-stack {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: var(--z-toast);
  display: grid;
  gap: 0.5rem;
  width: min(360px, calc(100vw - 2rem));
  pointer-events: none;
}

.toast {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: start;
  gap: 0.6rem;
  border: 1px solid var(--border-strong);
  border-left-width: 3px;
  border-radius: var(--radius-md);
  background: var(--surface-hi);
  box-shadow: var(--shadow-soft);
  color: var(--text);
  padding: 0.7rem 0.8rem;
  pointer-events: auto;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

.toast-icon {
  display: grid;
  place-items: center;
  width: 1.7rem;
  height: 1.7rem;
  border: 1px solid var(--border);
  border-radius: 50%;
  color: var(--accent);
  font-size: 0.85rem;
}

.toast-body {
  display: grid;
  gap: 0.1rem;
  font-size: 0.95rem;
  line-height: 1.35;
}

.toast-title {
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.toast-message {
  color: var(--text-dim);
}

.toast-close {
  border: 0;
  background: transparent;
  color: var(--text-faded);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0.2rem 0.35rem;
  border-radius: var(--radius-sm);
}

.toast-close:hover {
  color: var(--text);
}

.toast-success { border-color: color-mix(in srgb, var(--good) 55%, transparent); }
.toast-success .toast-icon { color: var(--good); }
.toast-warning,
.toast-error { border-color: color-mix(in srgb, var(--danger) 60%, transparent); }
.toast-warning .toast-icon,
.toast-error .toast-icon { color: var(--danger); }

/* Achievements + milestones get a celebratory treatment. */
.toast-achievement,
.toast-milestone {
  border-color: color-mix(in srgb, var(--accent-3) 65%, transparent);
  background:
    linear-gradient(110deg, color-mix(in srgb, var(--accent-3) 12%, transparent), transparent 45%),
    var(--surface-hi);
  box-shadow: var(--glow-gold);
}
.toast-achievement .toast-icon,
.toast-milestone .toast-icon {
  color: var(--accent-3);
  border-color: color-mix(in srgb, var(--accent-3) 55%, transparent);
  box-shadow: var(--glow-gold);
}
.toast-achievement .toast-title,
.toast-milestone .toast-title { color: var(--accent-3); }

/* Surge / Singularity: magenta energy. */
.toast-singularity,
.toast-surge {
  border-color: var(--accent-2);
  background:
    linear-gradient(110deg, color-mix(in srgb, var(--accent-2) 12%, transparent), transparent 45%),
    var(--surface-hi);
  box-shadow: var(--glow-pink);
}
.toast-singularity .toast-icon,
.toast-surge .toast-icon { color: var(--accent-2); }
.toast-singularity .toast-title,
.toast-surge .toast-title { color: var(--accent-2); }

/* Event Horizon: violet void. */
.toast-horizon {
  border-color: var(--horizon);
  background:
    linear-gradient(110deg, color-mix(in srgb, var(--horizon) 14%, transparent), transparent 45%),
    var(--surface-hi);
  box-shadow: var(--glow-violet);
}
.toast-horizon .toast-icon { color: var(--horizon); }
.toast-horizon .toast-title { color: var(--horizon); }

.toast-unlock { border-color: color-mix(in srgb, var(--accent) 60%, transparent); }
.toast-unlock .toast-icon { color: var(--accent); }

/* Dialogs -------------------------------------------------------------------------------- */
dialog {
  border: 1px solid var(--border-strong);
  background: var(--surface-hi);
  color: var(--text);
  box-shadow: var(--shadow);
}

dialog::backdrop {
  background: rgba(3, 6, 14, 0.55);
  backdrop-filter: blur(3px);
}

[data-theme="light"] dialog::backdrop {
  background: rgba(56, 48, 30, 0.35);
}

.modal {
  width: min(440px, calc(100vw - 2rem));
  border-radius: var(--radius-lg);
  margin: auto;
  padding: 1.5rem;
  text-align: center;
}

.modal-eyebrow {
  color: var(--text-faded);
  font-family: var(--font-display);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 0.4rem;
}

.modal-title {
  font-size: 1.15rem;
  letter-spacing: 0.06em;
  margin-bottom: 0.7rem;
}

.modal-text {
  color: var(--text-dim);
  line-height: 1.55;
}

.modal-note {
  color: var(--text-faded);
  font-size: 0.85rem;
  margin-top: 0.5rem;
}

.modal-actions {
  justify-content: center;
  margin-top: 1.2rem;
}

/* Settings sheet --------------------------------------------------------------------------- */
.sheet {
  width: min(440px, 100vw);
  max-width: none;
  height: 100dvh;
  max-height: none;
  margin: 0 0 0 auto;
  border: 0;
  border-left: 1px solid var(--border-strong);
  border-radius: 0;
  padding: 0;
  display: none;
  flex-direction: column;
}

.sheet[open] {
  display: flex;
}

.sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 1px solid var(--border);
  background: linear-gradient(180deg, color-mix(in srgb, var(--accent) 6%, transparent), transparent);
  padding: 1rem 1.3rem;
}

.sheet-title {
  font-size: 0.95rem;
  letter-spacing: 0.2em;
}

.sheet-body {
  display: grid;
  gap: 1rem;
  overflow-y: auto;
  padding: 1.2rem 1.3rem 1.4rem;
}

.settings-group {
  display: grid;
  gap: 0.75rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface-soft);
  padding: 0.95rem;
}

.settings-heading {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  color: var(--text-dim);
  font-family: var(--font-display);
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.24em;
  text-transform: uppercase;
}

.settings-heading-icon {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--accent) 8%, transparent);
  color: var(--accent);
  font-size: 0.78rem;
  letter-spacing: 0;
}

.theme-picker {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  border: 0;
}

.radio-card {
  position: relative;
  display: block;
  cursor: pointer;
}

.radio-card input {
  position: absolute;
  opacity: 0;
  inset: 0;
}

.radio-card-body {
  display: grid;
  gap: 0.15rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 0.8rem;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.radio-card-body strong {
  font-family: var(--font-display);
  font-size: 0.82rem;
  letter-spacing: 0.06em;
}

.radio-card-body small {
  color: var(--text-faded);
  font-size: 0.8rem;
}

.radio-card input:checked + .radio-card-body {
  border-color: var(--accent);
  box-shadow: var(--glow);
}

.radio-card input:focus-visible + .radio-card-body {
  outline: 3px solid color-mix(in srgb, var(--accent) 70%, transparent);
  outline-offset: 2px;
}

/* Switch rows: the toggle styling applies ONLY to checkboxes, so the range
   input can never inherit the switch thumb (the v0.3 grey-thumb defect). */
.switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
}

.switch-row > span,
.volume-row > label {
  display: grid;
  gap: 0.1rem;
  color: var(--text);
}

.switch-row small,
.volume-row small {
  color: var(--text-faded);
  font-size: 0.8rem;
}

.switch-row input[type="checkbox"] {
  appearance: none;
  width: 2.7rem;
  height: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 12%, transparent);
  position: relative;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease;
  flex-shrink: 0;
}

.switch-row input[type="checkbox"]::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0.18rem;
  width: 1.05rem;
  height: 1.05rem;
  border-radius: 50%;
  background: var(--text-dim);
  transform: translateY(-50%);
  transition: left 0.2s ease, background 0.2s ease;
}

.switch-row input[type="checkbox"]:checked {
  background: color-mix(in srgb, var(--accent) 45%, transparent);
  border-color: var(--accent);
}

.switch-row input[type="checkbox"]:checked::after {
  left: calc(100% - 1.25rem);
  background: var(--accent-contrast);
}

/* Volume slider: one native range input, one native thumb, cyan fill. */
.volume-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.volume-row input[type="range"] {
  --fill: 70%;
  appearance: none;
  -webkit-appearance: none;
  width: 9.5rem;
  height: 0.5rem;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    var(--accent) 0%,
    var(--accent) var(--fill),
    color-mix(in srgb, var(--text) 16%, transparent) var(--fill),
    color-mix(in srgb, var(--text) 16%, transparent) 100%
  );
  cursor: pointer;
  flex-shrink: 0;
}

.volume-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 1.15rem;
  height: 1.15rem;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--surface-hi);
  box-shadow: var(--glow);
  cursor: pointer;
}

.volume-row input[type="range"]::-moz-range-thumb {
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--accent);
  border-radius: 50%;
  background: var(--surface-hi);
  box-shadow: var(--glow);
  cursor: pointer;
}

.volume-row input[type="range"]::-moz-range-track {
  height: 0.5rem;
  border-radius: 999px;
  background: color-mix(in srgb, var(--text) 16%, transparent);
}

.volume-row input[type="range"]::-moz-range-progress {
  height: 0.5rem;
  border-radius: 999px;
  background: var(--accent);
}

.save-status {
  color: var(--text-dim);
  font-size: 0.92rem;
}

.save-status span {
  color: var(--text);
  font-weight: 600;
}

.settings-note {
  color: var(--text-faded);
  font-size: 0.84rem;
  line-height: 1.45;
}

.shortcut-list {
  display: grid;
  gap: 0.45rem;
  list-style: none;
}

.shortcut-list li {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--text-dim);
  font-size: 0.95rem;
}

.version-line {
  color: var(--text-faded);
  font-size: 0.85rem;
  text-align: center;
  padding-top: 0.4rem;
}

/* Save slots ---------------------------------------------------------------------------------- */
.slot-list {
  display: grid;
  gap: 0.7rem;
}

.slot-card {
  display: grid;
  gap: 0.55rem;
  border: 1px solid var(--border);
  border-left: 3px solid color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: var(--radius-md);
  background: var(--surface);
  padding: 0.8rem;
}

.slot-empty {
  border-style: dashed;
  border-left-style: dashed;
  border-left-color: var(--border);
}

.slot-name {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--surface-soft);
  color: var(--text);
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.45rem 0.6rem;
}

.slot-name-empty {
  color: var(--text-faded);
  font-family: var(--font-display);
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.slot-summary {
  color: var(--text-dim);
  font-size: 0.92rem;
}

.slot-meta {
  color: var(--text-faded);
  font-size: 0.78rem;
}

.slot-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.slot-actions .action-btn,
.slot-actions .danger-btn {
  min-height: 2.2rem;
  padding: 0 0.7rem;
  font-size: 0.62rem;
}

/* Singularity / Event Horizon overlay ----------------------------------------------------------- */
.singularity-overlay {
  position: fixed;
  inset: 0;
  z-index: var(--z-overlay);
  display: grid;
  place-items: center;
  background: transparent;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.singularity-overlay.active {
  opacity: 1;
  visibility: visible;
}

.singularity-flare {
  position: absolute;
  width: 38vmin;
  height: 38vmin;
  border-radius: 50%;
  background: radial-gradient(circle, #fff 0%, var(--accent-2) 35%, transparent 70%);
}

.singularity-text {
  position: relative;
  color: #fff;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 6vw, 3rem);
  font-weight: 900;
  letter-spacing: 0.3em;
  text-shadow: 0 0 24px var(--accent-2), 0 0 60px var(--accent-2);
  opacity: 0;
}