/* ── Upside-down theme adjustments ── */

body.upside-down .achievement-toast-container {
  bottom: auto;
  top: 1.5rem;
  transform: scaleY(-1);
}

/* ── Light appearance ── */

/* Cloudlog panel keeps its dark palette in both appearances — the
   panel is dense with tab labels, hint toggles, theme icons, and
   progress bars that were designed against a dark background.
   Inverting to light produced low-contrast greys across several
   elements, so we stay dark for consistency.  The nav button and its
   badge still adopt light-appearance styling; those sit on the site
   chrome, not inside the panel. */
body.light-appearance .achievement-view::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.1);
}

/* Light appearance toasts */
body.light-appearance .achievement-toast {
  background: rgba(240, 247, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.08);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}
body.light-appearance .achievement-toast-title {
  color: var(--ink);
}
body.light-appearance .achievement-toast-desc {
  color: rgba(var(--ink-rgb), 0.5);
}
body.light-appearance .achievement-activation-toast {
  background: rgba(240, 247, 255, 0.95);
  border-color: rgba(0, 0, 0, 0.08);
}
body.light-appearance .achievement-activation-toast span {
  color: var(--ink);
}

/* Light appearance badge */
body.light-appearance .achievement-badge {
  background: var(--sky-5, #1a5fa8);
}

/* ── Mobile ── */

@media (max-width: 700px) {
  .achievement-panel {
    width: 100vw;
  }
  .achievement-toast-container {
    right: 0.75rem;
    left: 0.75rem;
    bottom: 0.75rem;
  }
  .achievement-toast {
    max-width: none;
  }
}

/* ── Print ── */
/* Strip every decorative / interactive surface so a printed page is
   just the readable content.  The canvas, overlays, custom cursor, and
   Cloudlog chrome carry zero print value and would either waste ink or
   render as empty boxes. */
@media print {
  #bg-canvas,
  #cursor,
  #cursor-ring,
  .skip-link,
  .achievement-btn,
  .achievement-panel,
  .achievement-toast-container,
  .achievement-tooltip,
  .achievement-pulse-ring,
  .konami-confirm-prompt,
  .first-paint-mote,
  footer::after {
    display: none !important;
  }
  body {
    background: #fff !important;
    color: #000 !important;
  }
  .page {
    color: #000 !important;
  }
}

/* ── Reduced transparency ── */
/* Honors the OS "reduce transparency" preference: drop every blur and
   make the glassy chrome opaque so text never sits over a see-through
   busy canvas.  backdrop-filter is killed globally (it's the whole
   point of the preference); the key floating surfaces get a solid fill
   to replace the alpha they were leaning on. */
@media (prefers-reduced-transparency: reduce) {
  * {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .achievement-panel,
  .achievement-toast,
  .achievement-tooltip,
  .achievement-menu-list,
  .achievement-toast-queue-counter,
  .achievement-activation-toast,
  .konami-confirm-prompt,
  .skip-link {
    background: rgb(var(--ink-rgb)) !important;
  }
  body.light-appearance .achievement-panel,
  body.light-appearance .achievement-toast,
  body.light-appearance .achievement-tooltip,
  body.light-appearance .achievement-menu-list,
  body.light-appearance .achievement-toast-queue-counter,
  body.light-appearance .achievement-activation-toast,
  body.light-appearance .konami-confirm-prompt,
  body.light-appearance .skip-link {
    background: rgb(240, 247, 255) !important;
  }
}

/* ── Forced colors (Windows high-contrast) ── */
/* Under forced-colors the UA replaces our palette with system colors,
   and backdrop-filters render as solid blocks.  Drop the decorative
   blur, keep semantic distinctions (unlocked vs locked) via system
   color keywords, and make sure focus stays visible. */
@media (forced-colors: active) {
  .achievement-panel,
  .achievement-toast,
  .achievement-tooltip {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
  /* Give the drop-up a solid system surface and a visible edge — without
     a border it would be indistinguishable from the panel behind it. */
  .achievement-menu-list {
    background: Canvas;
    border-color: CanvasText;
  }
  .achievement-card.unlocked .achievement-card-title {
    color: CanvasText;
  }
  .achievement-card.locked .achievement-card-title,
  .achievement-card.hidden-ach .achievement-card-title {
    color: GrayText;
  }
  :focus-visible {
    outline: 2px solid Highlight;
  }
}

/* ── Reduced motion: also calm static glow ── */
/* prefers-reduced-motion frequently doubles as "I want less visual
   noise."  Dropping the text-shadow halo under the same preference
   removes the glow these headings carry by default. */
@media (prefers-reduced-motion: reduce) {
  .hero-title,
  .logo-text,
  .nav-logo {
    text-shadow: none !important;
  }
}

/* ── Higher contrast on request ── */
/* The workhorse mono copy sits at 0.45–0.6 alpha by design; when the OS asks
   for more contrast, lift it toward opaque. Dark first, then the light-
   appearance surfaces that already ink these selectors. */
@media (prefers-contrast: more) {
  .hero-sub,
  .service-desc,
  .about-body,
  .contact-sub,
  .stat-label,
  .footer-text,
  .footer-link,
  .footer-copy {
    color: rgba(255, 255, 255, 0.92);
  }
  body.light-appearance:where(:not(.theme-dark-only))
    :is(
      .service-desc,
      .about-body,
      .contact-sub,
      .stat-label,
      .footer-text,
      .footer-link,
      .footer-copy
    ) {
    color: rgba(var(--ink-rgb), 0.92);
  }
}