/* Ambient CSS lighting, tuned for the site's painted miniature scene.
   Geometry, entry animation, user colours and hit areas stay in styles.css. */
.character-compare {
  position: fixed;
  top: max(16px, env(safe-area-inset-top));
  left: max(16px, env(safe-area-inset-left));
  z-index: 80;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px;
  border-radius: 17px;
  background: var(--surface-panel);
  color: var(--player-fg);
  box-shadow: 0 3px 12px rgb(0 0 0 / 9%);
  font: 12px system-ui, sans-serif;
}
.character-compare[hidden] { display: none; }
.character-compare > span:first-child { padding: 0 8px; }
.character-compare button {
  min-height: 40px;
  min-width: 52px;
  border: 0;
  border-radius: 12px;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
}
.character-compare button[aria-pressed="true"] { background: color-mix(in srgb, var(--player-fg) 12%, transparent); }
.character-compare button:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.character-compare button:disabled { opacity: .5; cursor: wait; }

:root {
  --amb-light-x: -0.65;
  --amb-light-y: -0.85;
  --amb-key-light-intensity: 0.86;
  --amb-fill-light-intensity: 0.72;
  --amb-light-hue: 38;
  --amb-light-saturation: 8%;
  --surface-panel: color-mix(in srgb, var(--hero-sky) 10%, #eeeade);
  --surface-sheen: rgba(255, 255, 255, 0.055);
  --surface-grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='128' height='128'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.86' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23808080' opacity='.045' filter='url(%23n)' d='M0 0h128v128H0z'/%3E%3C/svg%3E");
}

:root[data-theme="dark"] {
  --surface-panel: color-mix(in srgb, var(--hero-sky) 24%, #252923);
  --surface-sheen: rgba(255, 255, 255, 0.025);
}

:root:root:root :is(.site-nav__about-visual, .site-nav__item:not([data-site-section="about"])) {
  --_amb-sh-gain: 0.6;
  --amb-thickness: 0.35;
  --amb-elevation: 0.12;
  --amb-fillet: 0;
  --amb-fillet-width: 0.95;
  --amb-chamfer: 0;
  --amb-chamfer-width: 0.18;
  background-image:
    var(--surface-grain),
    linear-gradient(160deg, rgba(255,255,255,0.045), transparent 55%, rgba(0,0,0,0.035));
  background-size: 128px 128px, 100% 100%;
  border-color: color-mix(in srgb, var(--site-nav-current-fg) 20%, transparent);
}

/* The About label has a separate visual layer; the link itself remains clear. */
:root:root:root[data-site-nav-docked="true"] .site-nav__item {
  box-shadow: none;
  background-image: none;
  border-color: transparent;
}

:root:root:root :is(.sky__panel, .bgm, .scene-preview-controls) {
  --_amb-sh-gain: 0.45;
  --amb-thickness: 0.15;
  --amb-elevation: 0.7;
  --amb-fillet: 0;
  --amb-fillet-width: 0.3;
  --amb-chamfer: 0;
  --amb-chamfer-width: 0.12;
  background-color: var(--surface-panel);
  background-image: var(--surface-grain),
    radial-gradient(ellipse at 0% 0%, var(--surface-sheen), transparent 72%),
    linear-gradient(165deg, rgba(255,255,255,0.025), transparent 55%, rgba(0,0,0,0.025));
  background-size: 128px 128px, 100% 100%, 100% 100%;
  border-color: transparent;
  color: var(--player-fg);
}

:root:root:root :is(.sky__swatch, .sky__reset, .sky__freeze, .bgm__play) {
  --_amb-sh-gain: 0.45;
  --amb-thickness: 0.18;
  --amb-elevation: 0.15;
  --amb-fillet: 0;
  --amb-fillet-width: 0.6;
  --amb-chamfer: 0;
  --amb-chamfer-width: 0.2;
  background-image:
    linear-gradient(160deg, rgba(255,255,255,0.035), transparent 60%, rgba(0,0,0,0.035));
  transition-property: transform, background-color, color, box-shadow;
  transition-duration: 180ms;
}

.sky__custom {
  box-shadow: inset 0 1px 2px rgba(0,0,0,0.06), 0 1px 0 var(--surface-sheen);
}

.sky__swatch {
  outline: 1px solid color-mix(in srgb, var(--player-fg) 28%, transparent);
}

:root:root:root:not([data-site-nav-docked="true"])[data-site-section="about"] :is(
  .site-nav__about-visual,
  .site-nav__item:not([data-site-section="about"])
) {
  --_amb-sh-gain: 0;
  /* The body throws the cast shadow now, so the engine's own drop shadow is
     off (above) -- and its edge lighting is off too, because this nav sets
     fillet and chamfer to 0, which leaves every inset layer fully transparent.
     So the light on the face is painted here: a catch along the lit top-left
     edge and the matching shade opposite, both widening and strengthening as
     the card rises towards the light. --amb-light-* points AT the light, hence
     the -1 on the lit side. The band's WIDTH is fixed: widening it as well made
     the card's outline look like it was getting thicker on approach, which is
     a different statement from the light getting stronger. Only the strength
     moves. */
  --site-nav-face-light: 1px;
  box-shadow:
    inset calc(var(--amb-light-x) * var(--site-nav-face-light) * -1)
      calc(var(--amb-light-y) * var(--site-nav-face-light) * -1) 0
      rgb(255 255 255 / calc((0.10 + 0.28 * var(--site-nav-near, 0)) * 100%)),
    inset calc(var(--amb-light-x) * var(--site-nav-face-light))
      calc(var(--amb-light-y) * var(--site-nav-face-light)) 0
      color-mix(
        in srgb,
        var(--site-nav-current-inset) calc((70 + 30 * var(--site-nav-near, 0)) * 1%),
        transparent
      );
  /* The light out of the door. site-nav-colors.js reads it straight off the
     glare canvas under the card, so this is the same light the stones beside
     it are getting -- and it is laid on the same way the glare pass lays it on
     them, plain source-over, not screen. Screen barely touches a card that is
     already bright, which is exactly why the wall looked lit and the cards did
     not. The label is content, not background, so it stays legible. */
  background-image:
    linear-gradient(var(--site-nav-door-spill, transparent), var(--site-nav-door-spill, transparent)),
    var(--surface-grain),
    linear-gradient(160deg, rgba(255,255,255,0.045), transparent 55%, rgba(0,0,0,0.035));
  background-size: 100% 100%, 128px 128px, 100% 100%;
}

@media (hover: hover) and (pointer: fine) {
  :root:root:root :is(.sky__reset:hover, .sky__freeze:hover, .bgm__play:hover) {
    --amb-elevation: 0.28;
  }

  :root:root:root:not([data-site-nav-near-live="true"]) .site-nav__item:not([data-site-section="about"]):hover,
  :root:root:root:not([data-site-nav-near-live="true"]):has(#site-tab-about:hover) .site-nav__about-visual {
    --amb-elevation: 0.28;
  }
}

:root:root:root :is(.site-nav__item:not([data-site-section="about"]):active, .sky__reset:active, .sky__freeze:active, .bgm__play:active),
:root:root:root:has(#site-tab-about:active) .site-nav__about-visual,
:root:root:root:has(.sky__toggle:active) .sky__swatch {
  --amb-elevation: 0;
  --amb-thickness: 0.08;
  --amb-fillet: 0;
}

:root:root:root :is(.sky__reset, .sky__freeze):active { transform: scale(0.96); }

:root:root:root :is(.sky__reset, .sky__freeze, .bgm__play):focus-visible,
:root:root:root:has(.sky__toggle:focus-visible) .sky__swatch {
  outline: 2px solid var(--player-fg);
  outline-offset: 4px;
}

@media (prefers-reduced-motion: reduce) {
  :root:root:root :is(.sky__swatch, .sky__reset, .sky__freeze, .bgm__play) {
    transition-duration: 0ms;
  }
}