/* Elemental Path Caster — presentation shell.
   The film itself is WebGL; this file owns the letterbox, the CAST HUD and the boot veil. */

:root {
  --hud-fire: #ff7a34;
  --hud-water: #37d6d0;
  --hud-earth: #c08a53;
  --hud-air: #a9d6ff;
  --hud-idle: rgba(214, 226, 240, 0.30);
  --bar-h: 5.2vh;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  background: #000;
  overflow: hidden;
  font-family: ui-sans-serif, -apple-system, "SF Pro Display", "Segoe UI", Inter, system-ui, sans-serif;
  color: #e8eef6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overscroll-behavior: none;
  touch-action: none;
}

#stage {
  position: fixed;
  inset: 0;
  background: #000;
}

#view {
  display: block;
  width: 100%;
  height: 100%;
  outline: none;
}

/* ---------------------------------------------------------------- letterbox */
.bar {
  position: fixed;
  left: 0;
  right: 0;
  height: var(--bar-h);
  background: #000;
  z-index: 20;
  pointer-events: none;
  transform: scaleY(1.6);
  transition: transform 0.9s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.bar-top { top: 0; transform-origin: top; }
.bar-bottom { bottom: 0; transform-origin: bottom; }
body.rolling .bar { transform: scaleY(1); }

/* --------------------------------------------------------------------- HUD */
.hud {
  position: fixed;
  left: 50%;
  bottom: calc(var(--bar-h) + 3.0vh);
  transform: translate(-50%, 14px);
  z-index: 30;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.28s cubic-bezier(0, 0, 0.2, 1), transform 0.34s cubic-bezier(0, 0, 0.2, 1);
  will-change: opacity, transform;
}
.hud.on {
  opacity: 1;
  transform: translate(-50%, 0);
}

.hud-inner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 9px 16px 9px 13px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(16, 21, 29, 0.62), rgba(7, 10, 14, 0.72));
  border: 1px solid rgba(168, 196, 226, 0.14);
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.055) inset,
    0 10px 34px rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(14px) saturate(115%);
  -webkit-backdrop-filter: blur(14px) saturate(115%);
}

.hud-mode {
  display: flex;
  align-items: center;
  gap: 8px;
  padding-right: 16px;
  border-right: 1px solid rgba(168, 196, 226, 0.15);
}
.hud-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #7ff0d8;
  box-shadow: 0 0 9px 1px rgba(127, 240, 216, 0.85);
  animation: hud-pulse 2.6s ease-in-out infinite;
}
@keyframes hud-pulse {
  0%, 100% { opacity: 0.45; transform: scale(0.85); }
  50% { opacity: 1; transform: scale(1); }
}
.hud-mode-label {
  font-size: 11px;
  font-weight: 620;
  letter-spacing: 0.28em;
  text-indent: 0.28em;
  color: rgba(226, 238, 250, 0.86);
}

.hud-rail {
  display: flex;
  align-items: center;
  gap: 10px;
}

.hud-slot {
  position: relative;
  width: 34px;
  height: 34px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  background: rgba(255, 255, 255, 0.028);
  border: 1px solid rgba(168, 196, 226, 0.12);
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.24s cubic-bezier(0, 0, 0.2, 1);
}
.hud-glyph {
  width: 19px;
  height: 19px;
  fill: var(--hud-idle);
  stroke: var(--hud-idle);
  transition: fill 0.18s ease, stroke 0.18s ease, filter 0.18s ease;
}
.hud-glyph-core { opacity: 0.55; }
.hud-slot[data-element="air"] .hud-glyph { fill: none; }

.hud-ring {
  position: absolute;
  inset: -3px;
  border-radius: 14px;
  border: 1.5px solid transparent;
  opacity: 0;
  transform: scale(0.82);
  transition: opacity 0.16s ease, transform 0.26s cubic-bezier(0, 0, 0.2, 1);
}

/* charging + active states, driven from the timeline */
.hud-slot.charge { transform: translateY(-1px); }
.hud-slot.charge .hud-glyph { filter: brightness(1.2); }

.hud-slot.live {
  transform: translateY(-3px) scale(1.06);
  background: rgba(255, 255, 255, 0.07);
}
.hud-slot.live .hud-ring { opacity: 1; transform: scale(1); }
.hud-slot.spent .hud-glyph { opacity: 0.72; }

.hud-slot[data-element="fire"].charge .hud-glyph,
.hud-slot[data-element="fire"].live .hud-glyph,
.hud-slot[data-element="fire"].spent .hud-glyph { fill: var(--hud-fire); stroke: var(--hud-fire); }
.hud-slot[data-element="water"].charge .hud-glyph,
.hud-slot[data-element="water"].live .hud-glyph,
.hud-slot[data-element="water"].spent .hud-glyph { fill: var(--hud-water); stroke: var(--hud-water); }
.hud-slot[data-element="earth"].charge .hud-glyph,
.hud-slot[data-element="earth"].live .hud-glyph,
.hud-slot[data-element="earth"].spent .hud-glyph { fill: var(--hud-earth); stroke: var(--hud-earth); }
.hud-slot[data-element="air"].charge .hud-glyph,
.hud-slot[data-element="air"].live .hud-glyph,
.hud-slot[data-element="air"].spent .hud-glyph { stroke: var(--hud-air); }

.hud-slot[data-element="fire"].live { border-color: rgba(255, 122, 52, 0.5); box-shadow: 0 0 22px -4px var(--hud-fire); }
.hud-slot[data-element="water"].live { border-color: rgba(55, 214, 208, 0.5); box-shadow: 0 0 22px -4px var(--hud-water); }
.hud-slot[data-element="earth"].live { border-color: rgba(192, 138, 83, 0.5); box-shadow: 0 0 22px -4px var(--hud-earth); }
.hud-slot[data-element="air"].live { border-color: rgba(169, 214, 255, 0.5); box-shadow: 0 0 22px -4px var(--hud-air); }

.hud-slot[data-element="fire"].live .hud-ring { border-color: rgba(255, 122, 52, 0.75); }
.hud-slot[data-element="water"].live .hud-ring { border-color: rgba(55, 214, 208, 0.75); }
.hud-slot[data-element="earth"].live .hud-ring { border-color: rgba(192, 138, 83, 0.75); }
.hud-slot[data-element="air"].live .hud-ring { border-color: rgba(169, 214, 255, 0.75); }

.hud-progress {
  margin: 9px auto 0;
  width: 68%;
  height: 1.5px;
  border-radius: 2px;
  background: rgba(168, 196, 226, 0.12);
  overflow: hidden;
}
.hud-progress i {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(226, 238, 250, 0.15), rgba(226, 238, 250, 0.72));
  transform-origin: left;
}

/* -------------------------------------------------------------------- veil */
.veil {
  position: fixed;
  inset: 0;
  z-index: 60;
  background: #000;
  display: grid;
  place-items: center;
  transition: opacity 0.9s ease;
}
.veil.gone { opacity: 0; pointer-events: none; }

.veil-ring {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid rgba(226, 238, 250, 0.14);
  display: grid;
  place-items: center;
}
.veil-ring i {
  display: block;
  width: 34px;
  height: 34px;
  margin: -1.5px;
  border-radius: 50%;
  border: 1.5px solid transparent;
  border-top-color: rgba(226, 238, 250, 0.8);
  animation: veil-spin 0.95s linear infinite;
}
@keyframes veil-spin { to { transform: rotate(360deg); } }

/* ------------------------------------------------------------------ replay */
.replay {
  position: fixed;
  right: 22px;
  bottom: calc(var(--bar-h) + 3.2vh);
  z-index: 40;
  width: 42px;
  height: 42px;
  padding: 0;
  border-radius: 50%;
  display: grid;
  place-items: center;
  cursor: pointer;
  background: rgba(12, 16, 22, 0.6);
  border: 1px solid rgba(168, 196, 226, 0.16);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  opacity: 0;
  transform: scale(0.9);
  pointer-events: none;
  transition: opacity 0.32s ease, transform 0.34s cubic-bezier(0, 0, 0.2, 1), background 0.2s ease;
}
.replay.on { opacity: 1; transform: scale(1); pointer-events: auto; }
.replay:hover { background: rgba(26, 34, 45, 0.75); }
.replay svg { width: 17px; height: 17px; fill: rgba(226, 238, 250, 0.9); stroke: rgba(226, 238, 250, 0.9); }

/* Capture / still-frame mode strips every chrome element so a rendered frame is pure film. */
body.capture .veil,
body.capture .replay { display: none; }

@media (max-width: 720px) {
  :root { --bar-h: 4.2vh; }
  .hud-inner { gap: 12px; padding: 7px 12px 7px 10px; }
  .hud-mode { padding-right: 11px; }
  .hud-mode-label { font-size: 9.5px; letter-spacing: 0.22em; }
  .hud-slot { width: 29px; height: 29px; border-radius: 9px; }
  .hud-glyph { width: 16px; height: 16px; }
  .replay { right: 14px; width: 38px; height: 38px; }
}

@media (prefers-reduced-motion: reduce) {
  .hud-dot { animation: none; opacity: 0.8; }
}