/* Touch / phone interface. Everything is scoped to html.touch (set by an inline script in index.html when the
   main pointer is a finger, and by touch.js), so the desktop look and feel is untouched. */

html.touch, html.touch body {
  touch-action: manipulation; overscroll-behavior: none;
  -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; -webkit-text-size-adjust: 100%;
}
html.touch #game { cursor: default; touch-action: none; }
html.touch .choice:hover, html.touch #play:hover:not(:disabled), html.touch .linkbtn:hover, html.touch #set-done:hover { transform: none; filter: none; }

/* ---------------- controls layer (lives inside #hud) ---------------- */
#touchui { display: none; }
html.touch #touchui {
  display: block; position: absolute; inset: 0; z-index: 3; pointer-events: none; touch-action: none; --tc-r: 56px;
  -webkit-user-select: none; user-select: none;
}
.tc-zone { position: absolute; top: 0; bottom: 0; pointer-events: auto; touch-action: none; }
#tc-move { left: 0; width: 46%; }
#tc-look { right: 0; width: 54%; }

/* where to put your thumb (faint, disappears while the stick is in use) */
#tc-rest, #tc-lookhint { position: absolute; pointer-events: none; display: flex; align-items: center; justify-content: center; transition: opacity 0.15s; }
#tc-rest {
  left: 7%; bottom: 13%; width: calc(var(--tc-r) * 2.2); height: calc(var(--tc-r) * 2.2); border-radius: 50%;
  border: 4px dashed rgba(255, 255, 255, 0.4); background: rgba(255, 255, 255, 0.07);
}
#tc-rest.off { opacity: 0; }
#tc-rest span, #tc-lookhint span { font: 800 15px var(--font); letter-spacing: 2px; color: rgba(255, 255, 255, 0.55); text-shadow: 0 2px 0 rgba(0, 0, 0, 0.35); }
#tc-lookhint { left: 66%; top: 44%; }

#tc-stick {
  position: absolute; left: 0; top: 0; width: calc(var(--tc-r) * 2); height: calc(var(--tc-r) * 2);
  margin: calc(var(--tc-r) * -1) 0 0 calc(var(--tc-r) * -1); border-radius: 50%; display: none;
  border: 5px solid rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.16);
  box-shadow: 0 0 0 3px rgba(20, 30, 50, 0.25), inset 0 0 12px rgba(0, 0, 0, 0.2); will-change: transform; pointer-events: none;
}
#tc-stick.on { display: block; }
#tc-knob {
  position: absolute; left: 50%; top: 50%; width: calc(var(--tc-r) * 0.9); height: calc(var(--tc-r) * 0.9);
  margin: calc(var(--tc-r) * -0.45) 0 0 calc(var(--tc-r) * -0.45); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #fff, #c6f7a4 70%, #8bde5b); border: 4px solid #fff;
  box-shadow: 0 4px 0 rgba(0, 0, 0, 0.3); will-change: transform;
}

.tc-btn {
  position: absolute; pointer-events: auto; touch-action: none; display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: var(--bs); height: var(--bs); border-radius: 50%; line-height: 1; text-align: center;
  color: #fff; font-family: var(--font); font-weight: 800; letter-spacing: 1px;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
  background: rgba(43, 36, 56, 0.4); border: 5px solid rgba(255, 255, 255, 0.78);
  box-shadow: 0 5px 0 rgba(0, 0, 0, 0.25), 0 6px 14px rgba(0, 0, 0, 0.25);
  transition: transform 0.06s, background 0.1s;
}
.tc-btn b { font-weight: 400; font-size: calc(var(--bs) * 0.4); line-height: 1.05; }
.tc-btn span { font-size: calc(var(--bs) * 0.19); }
.tc-btn.down { transform: translateY(4px) scale(0.93); background: rgba(255, 255, 255, 0.45); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.25); }

#tc-fire {
  --bs: clamp(88px, 29vh, 140px); right: 14px; bottom: 12px;
  background: rgba(229, 57, 80, 0.5); border-color: rgba(255, 255, 255, 0.9);
}
#tc-jump { --bs: clamp(66px, 21vh, 100px); right: calc(14px + clamp(88px, 29vh, 140px) + 12px); bottom: 14px; background: rgba(66, 165, 245, 0.45); }
#tc-use { --bs: clamp(60px, 18vh, 88px); right: 20px; bottom: calc(12px + clamp(88px, 29vh, 140px) + 10px); background: rgba(255, 179, 0, 0.5); }
#tc-drop { --bs: clamp(56px, 16vh, 80px); right: calc(20px + clamp(60px, 18vh, 88px) + 10px); bottom: calc(12px + clamp(88px, 29vh, 140px) + 14px); background: rgba(156, 39, 176, 0.5); }
#tc-use.attn { animation: tc-attn 0.7s ease-in-out infinite alternate; border-color: #ffe14a; }
@keyframes tc-attn { to { transform: scale(1.12); box-shadow: 0 0 0 8px rgba(255, 225, 74, 0.45), 0 5px 0 rgba(0, 0, 0, 0.25); } }

/* ---------------- HUD, rearranged for small screens ---------------- */
html.touch #hud { inset: 0 env(safe-area-inset-right) 0 env(safe-area-inset-left); }
html.touch #help, html.touch #pausehint { display: none !important; }
html.touch #crosshair { transform: scale(0.8); }
html.touch #topbar { top: 5px; width: min(320px, 36vw); padding: 2px 10px 3px; border-width: 3px; border-radius: 16px; }
html.touch #wavetext { font-size: 16px; }
html.touch #timetrack { height: 12px; margin: 2px 2px; border-width: 2px; }
html.touch #timesun { width: 22px; height: 22px; margin: -11px 0 0 -11px; }
html.touch #timelabel { font-size: 12px; }
html.touch #sunbox, html.touch #gardenbox, html.touch #hpbox, html.touch #mowerbox, html.touch #weaponbox { border-width: 3px; border-radius: 16px; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.22), 0 4px 10px rgba(0, 0, 0, 0.2); }
html.touch #sunbox { top: 5px; left: 8px; padding: 0 12px 2px; font-size: 22px; }
html.touch #sunbox b { font-size: 26px; }
html.touch #gardenbox { top: 5px; right: 8px; padding: 1px 10px 2px; font-size: 15px; }
html.touch #gardenbox b { font-size: 20px; }
html.touch #hpbox { left: 8px; top: 52px; bottom: auto; padding: 2px 10px 2px 6px; gap: 6px; }
html.touch #hpico { font-size: 24px; }
html.touch .hp-track { width: 112px; height: 22px; border-width: 2px; }
html.touch #hptext { font-size: 15px; line-height: 18px; }
html.touch #mowerbox { left: 8px; top: 92px; bottom: auto; padding: 2px 10px 2px 6px; gap: 6px; }
html.touch #mowerico { font-size: 22px; }
html.touch #mowertext { font-size: 15px; line-height: 18px; }
html.touch #weaponbox { right: 8px; top: 96px; bottom: auto; width: 150px; padding: 3px 10px 4px; }
html.touch #weaponname { font-size: 16px; }
html.touch #pips, html.touch #upgtext { display: none; }
html.touch #upgtrack { height: 11px; border-width: 2px; margin-top: 2px; }
html.touch #itemhp { height: 16px; margin: 2px 0; border-width: 2px; }
html.touch #streak { font-size: 13px; margin-top: 1px; }
html.touch #toast { bottom: 30%; left: 16%; right: 16%; font-size: 20px; }
html.touch #banner { top: 12%; }
html.touch #headshot { top: calc(50% - 90px); }

/* the seed cards are the plant buttons */
html.touch #seedcards { bottom: 8px; gap: 10px; pointer-events: auto; z-index: 4; }
html.touch .seed { width: clamp(70px, 12vw, 96px); padding: 2px 4px 3px; border-width: 3px; border-radius: 16px; touch-action: none; }
html.touch .seed .key, html.touch .seed .nm { display: none; }
html.touch .seed .ico { font-size: 30px; }
html.touch .seed .cost { font-size: 15px; }

/* mute + settings, always reachable above the controls */
html.touch #mutebtn, html.touch #optbtn {
  z-index: 5; top: 44px; width: 40px; height: 40px; line-height: 34px; font-size: 20px; touch-action: manipulation;
}
html.touch #mutebtn { right: 8px; }
html.touch #optbtn { right: 56px; }
html.touch #endscreen { z-index: 6; }
html.touch #endchange { font-size: 26px; padding: 8px 26px 11px; }
html.touch #downoverlay { z-index: 2; }

/* ---------------- lobby + settings on a phone ---------------- */
html.touch #lobby {
  padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  justify-content: center; touch-action: pan-y; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
html.touch #settings { touch-action: pan-y; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 8px max(8px, env(safe-area-inset-left)); }
html.touch .field input { font-size: 22px; padding: 10px 14px; }
html.touch .choice { min-height: 44px; }
html.touch #lobbyopt kbd { display: none; }
html.touch #lobbyopt { padding: 8px 18px 9px; font-size: 16px; }
html.touch #play { min-height: 56px; }
html.touch .switch { width: 76px; height: 42px; }
html.touch .switch[aria-checked="true"] i { transform: translateX(34px); }
html.touch .setrow input[type=range] { height: 36px; }
html.touch #set-done, html.touch .setbtns .choice { min-height: 52px; }

/* short landscape screens (phones): two columns so the whole card fits without scrolling */
@media (orientation: landscape) and (max-height: 560px) {
  html.touch #lobby { align-items: flex-start; }
  html.touch .card { width: min(820px, 100%); margin: auto; padding: 8px 18px 10px; border-width: 5px; border-radius: 26px; column-count: 2; column-gap: 22px; animation: none; }
  html.touch .card > * { break-inside: avoid; }
  html.touch .card > .label { break-after: avoid; }
  html.touch h1 { font-size: 28px; }
  html.touch .tag { font-size: 15px; margin: 0 0 4px; }
  html.touch .label { margin: 6px 0 3px; font-size: 13px; }
  html.touch .field { font-size: 13px; }
  html.touch .field input { font-size: 20px; padding: 6px 12px; margin-top: 3px; }
  html.touch .choice { padding: 5px 8px 6px; border-radius: 16px; }
  html.touch .choice .big { font-size: 26px; }
  html.touch .choice .nm { font-size: 18px; }
  html.touch .choice .ds { display: none; }
  html.touch #play { margin-top: 10px; font-size: 32px; padding: 4px 0 9px; }
  html.touch #status { margin-top: 4px; min-height: 20px; font-size: 14px; }
  html.touch .fine { font-size: 11px; }
  html.touch .settings-card { width: min(520px, 100%); column-count: 1; padding: 8px 16px 8px; }
  html.touch .settings-card h2 { font-size: 24px; margin-bottom: 2px; }
  html.touch .setrow { margin: 5px 0; padding: 5px 12px 6px; border-radius: 16px; border-width: 3px; border-bottom-width: 5px; }
  html.touch .setname { font-size: 17px; }
  html.touch .setds { font-size: 12px; margin-top: 1px; }
  html.touch .setbtns { margin-top: 6px; }
  html.touch #set-done { font-size: 26px; min-height: 46px; padding: 2px 0 8px; }
  html.touch .settings-card .fine { display: none; }
}

/* ---------------- portrait: ask to turn the device ---------------- */
#rotate-hint { display: none; }
@media (orientation: portrait) {
  html.touch #rotate-hint:not(.dismissed) {
    position: fixed; inset: 0; z-index: 200; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
    padding: 24px; text-align: center; color: #fff; background: rgba(29, 42, 94, 0.97); touch-action: none;
  }
  .rh-phone { font-size: 96px; line-height: 1; animation: rh-turn 2.6s ease-in-out infinite; }
  .rh-title { font-size: 32px; font-weight: 800; line-height: 1.1; text-shadow: 0 3px 0 rgba(0, 0, 0, 0.35); }
  .rh-sub { font-size: 18px; font-weight: 700; opacity: 0.8; }
  .rh-skip {
    margin-top: 14px; padding: 8px 22px 10px; font: 800 18px var(--font); color: #fff; cursor: pointer;
    background: rgba(255, 255, 255, 0.16); border: 3px solid rgba(255, 255, 255, 0.6); border-radius: 18px;
  }
}
@keyframes rh-turn { 0%, 18% { transform: rotate(0deg); } 55%, 100% { transform: rotate(-90deg); } }