/* ============================================================
   ASTRIKE — css/mobile.css (Agent H)
   Touch controls styling, safe-area handling, rotate-lock overlay,
   coarse-pointer HUD adjustments and landscape compact mode.

   MUST be loaded AFTER style.css (it intentionally overrides the
   legacy #touch-ui / .tbtn rules found there).
   Pair with: build/touch.fragment.html + js/touch.js
   ============================================================ */

/* ---- mobile hygiene: no tap flash, no callout, no pull-to-refresh ---- */
html, body {
  overscroll-behavior: none;               /* disable pull-to-refresh / rubber band */
  -webkit-tap-highlight-color: transparent;
}
body {
  -webkit-touch-callout: none;             /* no long-press context menu on iOS */
}

/* ============================================================
   #touch-ui — full-screen input layer
   ============================================================ */
#touch-ui {
  /* safe-area insets (notches, gesture bars, rounded corners).
     max() keeps a comfortable minimum margin even on devices
     that report 0 insets. */
  --safe-l: max(10px, env(safe-area-inset-left, 0px));
  --safe-r: max(10px, env(safe-area-inset-right, 0px));
  --safe-t: max(8px, env(safe-area-inset-top, 0px));
  --safe-b: max(10px, env(safe-area-inset-bottom, 0px));

  /* control sizing — vmin scales between phones and tablets,
     the px floor guarantees ergonomic touch targets */
  --stick:   max(128px, 30vmin);
  --knob:    max(54px, 13vmin);
  --btn:     max(56px, 13vmin);        /* arc buttons */
  --fire:    max(84px, 19vmin);        /* fire button */
  --btn-side:max(48px, 10.5vmin);      /* right edge column */
  --btn-top: max(42px, 9vmin);         /* top-right utilities */

  position: absolute;
  inset: 0;
  z-index: 10;                /* same layer as style.css (#menu 20, pause 15 sit above) */
  pointer-events: auto;       /* OVERRIDE style.css:none — the layer must catch
                                 stick/look touches on the whole game view */
  touch-action: none;         /* no scrolling/zoom gestures start here */
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}
/* when TouchControls hides the layer (setPaused/disable) it adds .tc-hidden;
   !important wins over the inline display:block set by main.js */
#touch-ui.tc-hidden { display: none !important; }

/* layout-only containers (transparent to touches) */
#t-buttons, #t-arc { pointer-events: none; }
#t-buttons { position: absolute; inset: 0; }
#t-arc .tbtn, #t-buttons .tbtn { pointer-events: auto; }

/* ============================================================
   Joystick — dynamic base, hint ring at rest
   ============================================================ */
#t-stick {
  position: absolute;
  left: 21%;                 /* rest/hint position (center, via transform) */
  top: 60%;
  bottom: auto;              /* override style.css rest position */
  width: var(--stick);
  height: var(--stick);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, 0.20);
  background: radial-gradient(circle at 50% 50%, rgba(8, 12, 16, 0.22) 0%, rgba(8, 12, 16, 0.45) 100%);
  opacity: 0.5;
  transition: opacity 0.12s ease, border-color 0.12s ease;
  pointer-events: none;      /* never blocks the look/stick zones itself */
}
#t-stick.live {
  opacity: 1;
  border-color: rgba(88, 240, 138, 0.55);
  box-shadow: 0 0 18px rgba(88, 240, 138, 0.15), inset 0 0 18px rgba(0, 0, 0, 0.35);
}
#t-knob {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--knob);
  height: var(--knob);
  margin: calc(var(--knob) / -2) 0 0 calc(var(--knob) / -2); /* centered; JS drives transform */
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.30);
  border: 2px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35);
  will-change: transform;
}
#t-stick.live #t-knob {
  background: rgba(88, 240, 138, 0.42);
  border-color: rgba(214, 255, 227, 0.85);
}

/* ============================================================
   Buttons — shared
   ============================================================ */
.tbtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: var(--btn);
  height: var(--btn);
  padding: 0;
  border-radius: 50%;
  background: rgba(8, 12, 16, 0.48);
  border: 1.5px solid rgba(255, 255, 255, 0.30);
  color: rgba(255, 255, 255, 0.92);
  font-family: inherit;
  font-weight: 800;
  font-size: max(8px, 1.9vmin);
  letter-spacing: 1px;
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.06s ease, background 0.06s ease, border-color 0.06s ease;
}
.tbtn svg {
  width: 42%;
  height: 42%;
  pointer-events: none;
}
.tbtn span {
  pointer-events: none;
  opacity: 0.85;
  line-height: 1;
}
/* pressed: scale down + brighter (class toggled by js/touch.js, :active as backup) */
.tbtn.press, .tbtn:active {
  transform: scale(0.92);
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.65);
}
/* toggled-on state (AIM / CROUCH / active weapon slot) — accent green */
.tbtn.on {
  background: rgba(88, 240, 138, 0.26);
  border-color: #58f08a;
  color: #d6ffe3;
}
.tbtn.on.press, .tbtn.on:active {
  background: rgba(88, 240, 138, 0.45);
  border-color: #7dffb0;
}
.tbtn:focus, .tbtn:focus-visible { outline: none; }

/* ============================================================
   FIRE — large, bottom-right (left of the right-edge column)
   ============================================================ */
#t-fire {
  position: absolute;
  right: calc(var(--safe-r) + var(--btn-side) + 12px);
  bottom: calc(var(--safe-b) + 12px);   /* raised above gesture-bar phones */
  width: var(--fire);
  height: var(--fire);
  font-size: max(10px, 2.4vmin);
  background: rgba(190, 44, 34, 0.40);
  border: 2px solid rgba(255, 120, 100, 0.65);
  color: #ffe9e4;
  gap: 3px;
}
#t-fire svg { width: 46%; height: 46%; }
#t-fire.press, #t-fire:active {
  transform: scale(0.92);
  background: rgba(230, 62, 48, 0.55);
  border-color: #ff8d76;
}

/* ============================================================
   Arc cluster above FIRE: RELOAD / CROUCH / JUMP / AIM
   (container's right edge sits at the fire button's center)
   ============================================================ */
#t-arc {
  position: absolute;
  right: calc(var(--safe-r) + var(--btn-side) + 12px + var(--fire) * 0.5);
  bottom: calc(var(--safe-b) + 12px + var(--fire) * 0.62);
  width: max(242px, 62vmin);
  height: max(104px, 24vmin);
}
#t-arc .tbtn { position: absolute; }
#t-aim    { right: 0;    bottom: 16%; }
#t-jump   { right: 26%;  top: 0; }
#t-crouch { right: 52%;  top: 4%; }
#t-reload { right: 76%;  bottom: 0; }

/* reload spinner hook — js/touch.js adds .spin while ent.reloadEnd > now */
#t-reload.spin svg { animation: t-spin 0.8s linear infinite; }
@keyframes t-spin { to { transform: rotate(360deg); } }

/* ============================================================
   RIGHT EDGE column: weapon slots / map / view (chamfered squares)
   ============================================================ */
#t-side {
  position: absolute;
  right: calc(var(--safe-r) + 4px);
  top: calc(var(--safe-t) + 52px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: max(5px, 1.2vmin);
}
#t-side .tbtn {
  width: var(--btn-side);
  height: var(--btn-side);
  border-radius: 12px;
  font-size: max(8px, 1.7vmin);
  gap: 1px;
}
#t-side .tbtn svg { width: 40%; height: 40%; }

/* ============================================================
   TOP-RIGHT utilities: scoreboard (hold) + pause
   ============================================================ */
#t-top {
  position: absolute;
  right: calc(var(--safe-r) + 4px);
  top: calc(var(--safe-t) + 6px);
  display: flex;
  gap: 8px;
}
#t-top .tbtn {
  flex-direction: row;
  gap: 5px;
  width: auto;
  height: var(--btn-top);
  min-width: var(--btn-top);
  padding: 0 10px;
  border-radius: 10px;
  font-size: max(7.5px, 1.6vmin);
}
#t-top .tbtn svg { width: 16px; height: 16px; }

/* ============================================================
   ROTATE LOCK — portrait blocker (touch devices only)
   ============================================================ */
#rotate-lock {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: radial-gradient(120% 120% at 50% 0%, #10161d 0%, #0b0e12 70%);
  color: #dfe5ea;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
#rotate-lock::after {   /* scanline texture, matches the menu design language */
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.02) 0 1px, transparent 1px 3px);
}
#rotate-lock .rl-inner {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}
#rotate-lock .rl-phone {
  width: 64px;
  height: 64px;
  color: #58f08a;
  animation: rl-swing 2.4s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(88, 240, 138, 0.35));
}
#rotate-lock .rl-title {
  font-size: 21px;
  font-weight: 900;
  letter-spacing: 6px;
  text-align: center;
}
#rotate-lock .rl-sub {
  font-size: 12px;
  letter-spacing: 2px;
  color: #88929b;
}
#rotate-lock .rl-studio {
  font-size: 9px;
  letter-spacing: 5px;
  color: rgba(136, 146, 155, 0.6);
  margin-top: 10px;
}
@keyframes rl-swing {
  0%, 18%   { transform: rotate(0deg); }
  48%, 66%  { transform: rotate(90deg); }
  96%, 100% { transform: rotate(0deg); }
}
/* the ONLY show rule — pure CSS, no JS involvement */
@media (orientation: portrait) and (pointer: coarse) {
  #rotate-lock { display: flex; }
}

/* ============================================================
   Coarse-pointer HUD adjustments (touch devices)
   ============================================================ */
@media (pointer: coarse) {
  /* radar: smaller, tucked below the notch */
  #radar {
    top: calc(env(safe-area-inset-top, 0px) + 10px);
    left: calc(env(safe-area-inset-left, 0px) + 10px);
    width: 118px;
    height: 118px;
    opacity: 0.92;
  }
  /* killfeed: compact, moved below the touch pause/score buttons */
  #killfeed {
    top: calc(env(safe-area-inset-top, 0px) + 52px);
    right: calc(env(safe-area-inset-right, 0px) + 8px);
    gap: 3px;
  }
  #killfeed > * { font-size: 11px; }
  /* loot feed: below the radar */
  #loot-feed {
    top: calc(env(safe-area-inset-top, 0px) + 136px);
    left: calc(env(safe-area-inset-left, 0px) + 10px);
    max-width: 40vw;
  }
  #loot-feed > * { font-size: 10px; }
  /* fps counter is noise on a phone */
  #fps-counter { display: none; }
}

/* ============================================================
   Compact mode — landscape on phones (short viewport)
   ============================================================ */
@media (orientation: landscape) and (max-height: 420px) {
  #touch-ui {
    --btn: max(52px, 12.5vmin);
    --fire: max(76px, 17.5vmin);
    --btn-side: max(46px, 10vmin);
    --btn-top: max(38px, 8.5vmin);
  }
  #t-side { gap: 4px; }
  #t-top { gap: 6px; }
  #t-arc {
    width: max(220px, 56vmin);
    height: max(96px, 22vmin);
  }
  .tbtn { letter-spacing: 0.5px; }
  .tbtn span { font-size: 8px; }
  #t-fire { bottom: calc(var(--safe-b) + 8px); }
  #t-arc  { bottom: calc(var(--safe-b) + 8px + var(--fire) * 0.62); }
}