/* Needle In A Haystack, phones and tablets. Thumbs, small screens, safe areas. */

html, body { overscroll-behavior: none; }
body { touch-action: manipulation; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
canvas { touch-action: none; }

/* ---------- touch controls ---------- */
#touch { position: fixed; inset: 0; z-index: 8; touch-action: none; display: none; }
body.touch #touch.show { display: block; }

/* the stick plants itself wherever the left thumb lands */
#stick {
  position: absolute; width: 124px; height: 124px; margin: -62px 0 0 -62px;
  border-radius: 50%; border: 1.5px solid rgba(240,232,214,.28);
  background: rgba(11,13,18,.16);
  opacity: 0; transition: opacity .15s ease; pointer-events: none;
}
#stick.show { opacity: 1; }
#stick-knob {
  position: absolute; left: 50%; top: 50%; width: 54px; height: 54px; margin: -27px 0 0 -27px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(255,215,94,.85), rgba(217,161,37,.55) 70%);
  box-shadow: 0 2px 14px rgba(0,0,0,.45);
}

.tbtn {
  position: absolute; width: 68px; height: 68px; border-radius: 50%;
  border: 1.5px solid rgba(217,161,37,.55); background: rgba(11,13,18,.35);
  color: var(--paper); font-family: Georgia, serif; font-style: italic;
  font-size: 14px; letter-spacing: .08em; text-shadow: 0 1px 8px rgba(0,0,0,.8);
  backdrop-filter: blur(3px); touch-action: none; user-select: none; -webkit-user-select: none;
  transition: transform .08s ease, background .08s ease;
}
.tbtn.down { background: rgba(217,161,37,.38); border-color: var(--gold-hot); transform: scale(.93); }
#tb-jump { right: calc(24px + env(safe-area-inset-right)); bottom: calc(28px + env(safe-area-inset-bottom)); }
#tb-blow {
  display: none; width: 80px; height: 80px;
  right: calc(70px + env(safe-area-inset-right)); bottom: calc(112px + env(safe-area-inset-bottom));
}
#tb-blow.owned { display: block; }

/* HUD bits that would collide with thumbs move out of the way */
body.touch #hint { bottom: 30%; width: 90vw; text-align: center; }
body.touch #npc-shop { bottom: 20%; }
body.touch #mode .m-opt { padding: 14px 8px 13px; }

/* ---------- small screens ---------- */
@media (max-width: 600px) {
  #attract h1 { font-size: 12.5vw; }
  #timer { top: calc(16px + env(safe-area-inset-top)); font-size: 18px; }
  #coins { top: calc(14px + env(safe-area-inset-top)); right: calc(18px + env(safe-area-inset-right)); font-size: 26px; }
  #coins::before { width: 16px; height: 16px; }
  #crosshair { width: 120px; }
  #heat { width: 190px; }
  #mode .m-name { font-size: 14px; }
  #hint { font-size: 17px; }
  #npc-shop { min-width: 0; width: min(320px, 90vw); padding: 14px 18px; }
  #win-card, .win-card { padding: 26px 22px 22px; }
  #win-time { font-size: 54px; }
}

/* short viewports (landscape phones): the win card scrolls instead of clipping */
@media (max-height: 720px) {
  #win { align-items: flex-start; overflow-y: auto; padding: 16px 0 calc(16px + env(safe-area-inset-bottom)); }
}
@media (max-height: 480px) {
  #win-card, .win-card { padding: 18px 22px 16px; }
  #win-time { font-size: 44px; margin: 4px 0; }
  #win-quip { margin-bottom: 12px; }
  .title-block { margin-top: 5vh; }
  .begin { margin-bottom: 8px; }
  #mode { margin-bottom: 4vh; }
  #npc-shop, body.touch #npc-shop { bottom: 6%; padding: 10px 16px; gap: 6px; }
  #npc-shop .ns-item { padding: 8px 14px; font-size: 15px; }
}