/* ==========================================================================
   ui-touch.css — Akofena-style touch controls
   Translucent dark-glass rings with thin gold borders. Loaded AFTER the
   inline <style> in index.html so same-specificity rules here win.
   ========================================================================== */

/* --- Control deck ------------------------------------------------------- */
.controls-bar {
  align-items: flex-end;
  gap: 12px;
  padding: 0 6px max(6px, env(safe-area-inset-bottom)) 6px;
}

/* --- Left joystick ------------------------------------------------------ */
#joy-zone {
  width: clamp(84px, 20vh, 120px);
  height: clamp(84px, 20vh, 120px);
  flex-shrink: 0;
  background: radial-gradient(circle at 50% 42%,
    rgba(44, 24, 10, 0.30) 0%,
    rgba(24, 12, 6, 0.52) 78%);
  border: 1.5px solid rgba(246, 180, 60, 0.55);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45),
    inset 0 0 20px rgba(0, 0, 0, 0.35);
}

#joy-knob {
  width: 36%;
  height: 36%;
  top: 32%;
  left: 32%;
  background: radial-gradient(circle at 40% 34%,
    rgba(246, 212, 146, 0.38) 0%,
    rgba(150, 88, 22, 0.30) 62%,
    rgba(24, 12, 6, 0.45) 100%);
  border: 1.5px solid rgba(246, 212, 146, 0.65);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45),
    0 0 10px rgba(246, 180, 60, 0.22);
}

/* --- Action cluster: 4-over-3 glass rings ------------------------------- */
.btn-cluster {
  grid-template-columns: repeat(4, clamp(46px, 11vh, 62px));
  grid-template-rows: repeat(2, clamp(46px, 11vh, 62px));
  gap: clamp(8px, 2.2vh, 10px);
}

.act-btn {
  background: rgba(24, 12, 6, 0.5);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  border: 1.5px solid rgba(246, 180, 60, 0.55);
  color: #f6d492;
  font-family: 'Bebas Neue', 'Arial Narrow', sans-serif;
  font-weight: 400;
  font-size: clamp(17px, 4.8vh, 27px);
  letter-spacing: 1px;
  line-height: 1;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.45),
    inset 0 0 14px rgba(0, 0, 0, 0.30);
  touch-action: none;
  -webkit-tap-highlight-color: transparent;
  transition: border-color 0.12s ease, background 0.12s ease,
    box-shadow 0.12s ease, transform 0.08s ease;
}

/* Small sub-label under the letter (Oswald, ~8px) */
.act-btn span {
  font-family: 'Oswald', ui-sans-serif, sans-serif;
  font-size: clamp(7px, 2vh, 8px);
  font-weight: 500;
  letter-spacing: 0.4px;
  line-height: 1;
  color: rgba(246, 212, 146, 0.72);
  opacity: 1;
  margin-top: 2px;
  white-space: nowrap;
}

/* Longer glyphs / labels get a smaller cut so they stay inside the ring */
#btn-u, #btn-i { font-size: clamp(13px, 3.9vh, 21px); }
#btn-o { font-size: clamp(10px, 3vh, 16px); letter-spacing: 0.5px; }
#btn-u span, #btn-i span { font-size: clamp(6px, 1.7vh, 7px); letter-spacing: 0.2px; }

/* Kill the opaque per-button gradient fills — one glass language */
#btn-l, #btn-h, #btn-u, #btn-i, #btn-b { background: rgba(24, 12, 6, 0.5); }

/* Spirit / summon: only semantic tint — a cooler teal ring, still glass */
#btn-s, #btn-o {
  background: rgba(8, 22, 26, 0.5);
  border-color: rgba(103, 232, 249, 0.45);
}

/* Pressed: ring brightens to pale gold, background warms */
.act-btn:active, .act-btn.pressed {
  transform: scale(0.94);
  filter: none;
  background: rgba(120, 60, 14, 0.5);
  border-color: #ffe9ad;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5),
    0 0 14px rgba(246, 180, 60, 0.45),
    inset 0 0 12px rgba(246, 180, 60, 0.18);
}
#btn-s:active, #btn-s.pressed,
#btn-o:active, #btn-o.pressed {
  border-color: #d8f6ff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5),
    0 0 14px rgba(103, 232, 249, 0.4),
    inset 0 0 12px rgba(103, 232, 249, 0.15);
}

.act-btn:focus-visible {
  outline: 1.5px solid #ffe9ad;
  outline-offset: 2px;
}

/* Meter-gated states stay readable on glass */
.act-btn.low-meter { opacity: 0.55; filter: saturate(0.55); }
.act-btn.unavailable { opacity: 0.34; filter: grayscale(0.85); cursor: not-allowed; }

/* --- FINISH! — fatality window button, stays dramatic ------------------- */
#finish-btn {
  font-family: 'Bebas Neue', 'Arial Narrow', sans-serif;
  font-weight: 400;
  color: #ffe9ad;
  letter-spacing: 4px;
  border: 1.5px solid rgba(246, 180, 60, 0.9);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  background: radial-gradient(circle at 50% 42%,
    rgba(148, 22, 8, 0.72) 0%,
    rgba(48, 10, 5, 0.85) 82%);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
  box-shadow: 0 0 22px rgba(255, 70, 20, 0.5),
    inset 0 0 18px rgba(255, 60, 0, 0.32),
    0 4px 12px rgba(0, 0, 0, 0.8);
}

#finish-btn.visible {
  animation: kc-finish-pulse 1s ease-in-out infinite;
}

@keyframes kc-finish-pulse {
  0%, 100% {
    box-shadow: 0 0 18px rgba(255, 70, 20, 0.45),
      inset 0 0 14px rgba(255, 60, 0, 0.30),
      0 4px 12px rgba(0, 0, 0, 0.8);
  }
  50% {
    box-shadow: 0 0 32px rgba(255, 96, 32, 0.8),
      inset 0 0 24px rgba(255, 80, 10, 0.5),
      0 4px 12px rgba(0, 0, 0, 0.8);
  }
}

/* --- Reduced motion: static states only --------------------------------- */
@media (prefers-reduced-motion: reduce) {
  #finish-btn.visible { animation: none; }
  .act-btn { transition: none; }
}