/* NACHHALL – Touch-Steuerung (virtueller Joystick + Knöpfe), passt sich an Bildschirmgröße und Ausrichtung an */
#touch { position: absolute; inset: 0; z-index: 35; pointer-events: none; --tb: clamp(52px, 11vmin, 76px); --tbig: clamp(70px, 16vmin, 104px); --tsm: clamp(40px, 8.5vmin, 56px); }
body.cinematic #touch #touch-buttons, body.cinematic #touch #touch-top, body.cinematic #stick-zone { opacity: 0; pointer-events: none !important; }
body.in-dialogue #touch { display: none; }
#stick-zone { position: absolute; left: 0; bottom: 0; width: 45%; height: 72%; pointer-events: auto; touch-action: none; }
#stick-base {
  position: absolute; width: clamp(110px, 24vmin, 160px); height: clamp(110px, 24vmin, 160px); border-radius: 50%;
  left: calc(26px + var(--safe-l)); bottom: calc(26px + var(--safe-b));
  background: radial-gradient(circle, rgba(255,255,255,0.05), rgba(255,255,255,0.02) 60%, rgba(255,255,255,0.08) 61%, rgba(255,255,255,0.02) 70%);
  border: 1px solid rgba(255,255,255,0.14); opacity: 0.55; transition: opacity 0.2s;
}
#stick-base.active { opacity: 1; transition: none; }
#stick-knob { position: absolute; left: 50%; top: 50%; width: 44%; height: 44%; margin: -22% 0 0 -22%; border-radius: 50%; background: radial-gradient(circle at 40% 35%, rgba(255,255,255,0.4), rgba(200,220,230,0.18)); border: 1px solid rgba(255,255,255,0.35); box-shadow: 0 4px 16px rgba(0,0,0,0.4); }

#touch-buttons { position: absolute; right: calc(18px + var(--safe-r)); bottom: calc(18px + var(--safe-b)); width: calc(var(--tbig) * 2.9); height: calc(var(--tbig) * 2.6); pointer-events: none; }
.tb {
  position: absolute; width: var(--tb); height: var(--tb); border-radius: 50%; pointer-events: auto; touch-action: none;
  background: rgba(14, 16, 22, 0.38); border: 1px solid rgba(255,255,255,0.22); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  display: flex; align-items: center; justify-content: center; transition: transform 0.08s, background 0.15s, border-color 0.15s, opacity 0.2s;
}
.tb svg { width: 44%; height: 44%; color: rgba(255,255,255,0.85); pointer-events: none; }
.tb.pressed { transform: scale(0.9); background: rgba(127,216,230,0.3); border-color: rgba(127,216,230,0.8); }
.tb.big { width: var(--tbig); height: var(--tbig); right: 0; bottom: 0; background: rgba(40, 18, 16, 0.42); border-color: rgba(255,170,150,0.35); }
.tb[data-act=dodge] { right: calc(var(--tbig) + 12px); bottom: 0; }
.tb[data-act=interact] { right: calc(var(--tbig) * 0.1); bottom: calc(var(--tbig) + 12px); }
.tb[data-act=interact].ready { background: rgba(240,179,100,0.28); border-color: rgba(240,179,100,0.9); box-shadow: 0 0 18px rgba(240,179,100,0.45); animation: ready 1.2s ease-in-out infinite; }
@keyframes ready { 50% { box-shadow: 0 0 4px rgba(240,179,100,0.2); } }
.tb[data-act=interact]:not(.ready) { opacity: 0.45; }
.tb[data-act=block] { right: calc(var(--tbig) + 14px); bottom: calc(var(--tbig) * 0.78 + 8px); width: calc(var(--tb) * 0.9); height: calc(var(--tb) * 0.9); }
.tb[data-act=sprint] { right: calc(var(--tbig) * 2 + 18px); bottom: calc(var(--tb) * 0.1); width: calc(var(--tb) * 0.85); height: calc(var(--tb) * 0.85); }
.tb.toggle.on { background: rgba(127,216,230,0.28); border-color: rgba(127,216,230,0.85); }
.tb.small { width: var(--tsm); height: var(--tsm); }
.tb[data-act=flare] { right: calc(var(--tbig) * 1.1 + var(--tb) * 0.9 + 22px); bottom: calc(var(--tbig) * 0.95 + 14px); }
.tb[data-act=pulse] { right: calc(var(--tbig) * 0.95 + 8px); bottom: calc(var(--tbig) * 1.62 + 16px); }
.tb[data-act=heal] { right: calc(var(--tbig) * 0.05); bottom: calc(var(--tbig) * 1.9 + 22px); }
.tb.small.off { display: none; }
.tb .cd { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(rgba(0,0,0,0.55) var(--cd, 0%), transparent 0); pointer-events: none; }
.tb .count { position: absolute; right: -2px; top: -2px; min-width: 18px; height: 18px; border-radius: 9px; background: rgba(0,0,0,0.75); font-size: 10px; display: flex; align-items: center; justify-content: center; color: #fff; padding: 0 4px; border: 1px solid rgba(255,255,255,0.3); }

#touch-top { position: absolute; left: 50%; transform: translateX(-50%); top: calc(8px + var(--safe-t)); display: flex; gap: 10px; pointer-events: none; }
.tt { width: 40px; height: 40px; border-radius: 50%; background: rgba(10,12,18,0.45); border: 1px solid rgba(255,255,255,0.15); pointer-events: auto; display: flex; align-items: center; justify-content: center; touch-action: none; }
.tt svg { width: 18px; height: 18px; color: #ddd; }
.tt.on { border-color: rgba(240,179,100,0.8); }

body.lefty #stick-zone { left: auto; right: 0; }
body.lefty #stick-base { left: auto; right: calc(26px + var(--safe-r)); }
body.lefty #touch-buttons { right: auto; left: calc(18px + var(--safe-l)); transform: scaleX(-1); }
body.lefty .tb svg, body.lefty .tb .count { transform: scaleX(-1); }

@media (orientation: portrait) {
  #touch { --tb: clamp(50px, 13vw, 70px); --tbig: clamp(66px, 18vw, 92px); --tsm: clamp(40px, 10vw, 52px); }
  #stick-zone { height: 45%; width: 50%; }
}