/* Touch controls (js/client/ui/touch.js). The layer is created by Input when touch is detected.
   Layout: move stick bottom-left, aim stick bottom-right, Használ/Ütés to the left of the aim stick, the small
   buttons in a row above them, Térkép/Menü left of the minimap. The top band stays free for the HUD. */

.efb-tc {
  --sl: env(safe-area-inset-left, 0px);
  --sr: env(safe-area-inset-right, 0px);
  --st: env(safe-area-inset-top, 0px);
  --sb: env(safe-area-inset-bottom, 0px);
  --R: clamp(40px, 12vmin, 62px);         /* stick base radius */
  --big: clamp(58px, 15vmin, 74px);
  --small: clamp(44px, 11vmin, 52px);
  --pad: 14px;
  --band: calc(var(--st) + var(--efb-mm, 96px) + 18px);   /* the free top band (HUD: minimap, vitals, timer) */
  --tc-yellow: #ffd200;
  --tc-ink: #15171a;
  position: fixed;
  inset: 0;
  z-index: 20;
  display: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
  font-family: 'Barlow Condensed', 'Arial Narrow', system-ui, sans-serif;
}
#ui > .efb-tc, .efb-tc { pointer-events: none; }   /* style.css gives #ui > * pointer events */
.efb-tc.on { display: block; }
.efb-tc.ui { display: none; }          /* a panel or the inventory is open */

/* ---------- zones */
.tc-zone {
  position: absolute;
  top: var(--band);
  bottom: 0;
  pointer-events: auto;
  touch-action: none;
}
.tc-left { left: 0; width: 45%; }
.tc-right { right: 0; width: 55%; }

/* ---------- sticks */
.tc-stick {
  position: absolute;
  width: calc(var(--R) * 2);
  height: calc(var(--R) * 2);
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity 0.18s;
}
.tc-stick.rest { transform: none; opacity: 0.42; transition: opacity 0.25s; }
.tc-stick-left.rest { left: calc(var(--sl) + var(--pad) + 6px); bottom: calc(var(--sb) + var(--pad) + 6px); }
.tc-stick-right.rest { right: calc(var(--sr) + var(--pad)); bottom: calc(var(--sb) + var(--pad)); }

.tc-base {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.55);
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.05) 0 38%, rgba(20, 22, 26, 0.35) 39% 100%);
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35), inset 0 0 18px rgba(0, 0, 0, 0.35);
}
.tc-base::before {                       /* the 90 % / 55 % thresholds */
  content: '';
  position: absolute;
  inset: 10%;
  border-radius: 50%;
  border: 1px dashed rgba(255, 255, 255, 0.28);
}
.tc-stick-right .tc-base::before { inset: 26%; border-color: rgba(255, 90, 60, 0.45); }

.tc-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: calc(var(--R) * 0.86);
  height: calc(var(--R) * 0.86);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle at 35% 30%, #fff 0 8%, #e9e6dc 9% 55%, #b9b5aa 100%);
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.5), inset 0 -3px 0 rgba(0, 0, 0, 0.18);
}
.tc-stick-right .tc-knob { background: radial-gradient(circle at 35% 30%, #fff 0 8%, #ffe45c 9% 55%, #d9a900 100%); }
.tc-stick.active { opacity: 0.95; }
.tc-stick-left.hot .tc-base { border-color: var(--tc-yellow); box-shadow: 0 0 0 2px rgba(255, 210, 0, 0.35), inset 0 0 18px rgba(0, 0, 0, 0.35); }
.tc-stick-right.hot .tc-base { border-color: #ff5a3c; box-shadow: 0 0 0 3px rgba(255, 90, 60, 0.35), inset 0 0 18px rgba(0, 0, 0, 0.35); }
.tc-stick-right.hot .tc-knob { background: radial-gradient(circle at 35% 30%, #fff 0 8%, #ff8a5c 9% 55%, #d63a1a 100%); }

.tc-hint {
  position: absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  text-shadow: 0 1px 2px #000;
  white-space: nowrap;
}
.tc-stick.active .tc-hint { display: none; }

/* ---------- buttons */
.tc-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1px;
  margin: 0;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, 0.5);
  border-radius: 50%;
  background: rgba(20, 22, 26, 0.62);
  color: #fff;
  font: inherit;
  pointer-events: auto;
  touch-action: none;
  cursor: pointer;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.45);
  transition: transform 0.08s, background-color 0.12s, border-color 0.12s;
  -webkit-tap-highlight-color: transparent;
}
.tc-btn:focus { outline: none; }
.tc-btn.down, .tc-btn.tap { transform: scale(0.92); background: rgba(255, 210, 0, 0.9); color: var(--tc-ink); border-color: #fff; }
.tc-glyph { font-size: 1.3em; line-height: 1; }
.tc-label {
  font-weight: 700;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.6);
}
.tc-btn.down .tc-label, .tc-btn.tap .tc-label { text-shadow: none; }

.tc-bigcol {
  position: absolute;
  right: calc(var(--sr) + var(--pad) + var(--R) * 2 + 12px);
  bottom: calc(var(--sb) + var(--pad));
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.tc-big { width: var(--big); height: var(--big); font-size: calc(var(--big) * 0.36); }
.tc-big .tc-label { font-size: 12px; }
.tc-btn.use {
  --p: 0;
  background: rgba(255, 210, 0, 0.2);
  border-color: var(--tc-yellow);
}
.tc-btn.melee { border-color: rgba(255, 120, 90, 0.8); }
.tc-ring {
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  pointer-events: none;
  background: conic-gradient(var(--tc-yellow) calc(var(--p) * 360deg), transparent 0);
  -webkit-mask: radial-gradient(circle, transparent 0 calc(50% - 4px), #000 calc(50% - 3px));
  mask: radial-gradient(circle, transparent 0 calc(50% - 4px), #000 calc(50% - 3px));
}
.tc-btn.use.done { animation: tc-done 0.26s ease-out; }
@keyframes tc-done { 0% { box-shadow: 0 0 0 0 rgba(255, 210, 0, 0.9); } 100% { box-shadow: 0 0 0 16px rgba(255, 210, 0, 0); } }
/* something to use nearby: the HUD shows a prompt → Használ pulses */
body:has(.hud-prompt.on) .tc-btn.use { animation: tc-pulse 1.1s ease-in-out infinite; background: rgba(255, 210, 0, 0.42); }
@keyframes tc-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 210, 0, 0.55), 0 3px 10px rgba(0, 0, 0, 0.45); } 50% { box-shadow: 0 0 0 10px rgba(255, 210, 0, 0), 0 3px 10px rgba(0, 0, 0, 0.45); } }

.tc-row {
  position: absolute;
  right: calc(var(--sr) + var(--pad));
  bottom: calc(var(--sb) + var(--pad) + var(--big) * 2 + 10px + 14px);
  display: flex;
  gap: 8px;
  pointer-events: none;
}
.tc-small {
  width: var(--small);
  height: var(--small);
  border-radius: 14px;
  font-size: calc(var(--small) * 0.36);
}
.tc-small .tc-label { font-size: 10px; }

.tc-top {
  position: absolute;
  top: calc(var(--st) + 10px);
  right: calc(var(--sr) + 10px + var(--efb-mm, 96px) + 8px);
  display: flex;
  flex-direction: column;
  gap: 6px;
  pointer-events: none;
}
.tc-mini {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  font-size: 18px;
  background: rgba(20, 22, 26, 0.55);
  border-width: 1px;
}
.tc-mini.menu .tc-glyph { font-size: 13px; letter-spacing: -2px; font-weight: 700; }

/* short landscape phones: pull the small row beside the big column instead of above it */
@media (orientation: landscape) and (max-height: 420px) {
  .efb-tc { --big: clamp(54px, 15vmin, 64px); --R: clamp(40px, 12vmin, 52px); }
  .tc-row {
    right: calc(var(--sr) + var(--pad) + var(--R) * 2 + 12px + var(--big) + 12px);
    bottom: calc(var(--sb) + var(--pad));
    flex-direction: column-reverse;
    flex-wrap: wrap-reverse;
    height: calc(var(--small) * 2 + 8px);
    align-content: flex-end;
  }
  .tc-hint { display: none; }
}

/* tablets: a little more room */
@media (min-width: 900px) and (min-height: 600px) {
  .efb-tc { --pad: 24px; }
}