/* Touch controls (client/js/ui/touch.js). Only shown on html.is-touch while playing (#touch-layer.on).
   Reserved zones the HUD keeps free on touch screens: bottom-left (joystick) and bottom-right (button cluster), each about 34 % of the
   width x 40 % of the height on phones. --tsz = touchSize setting (0.8 .. 1.3). Same glass language as the HUD: dark, blurred, hairline
   edges, SVG line icons; the Use button is the one filled (brand green) control. */

/* the 3D canvas follows the real visible viewport on mobile browsers (100vh lies on iOS) */
html.is-touch canvas#game, html.is-touch canvas#overlay { width: var(--app-w, 100vw); height: var(--app-h, 100vh); }
/* no page scroll, rubber-band or double-tap zoom while playing */
html.nsr-touch-play, html.nsr-touch-play body { overscroll-behavior: none; overflow: hidden; }

#touch-layer {
  position: fixed; left: 0; top: 0; width: var(--app-w, 100vw); height: var(--app-h, 100vh);
  display: none; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent; --tsz: 1; --pad: 16px; font-family: var(--font-ui);
}
#touch-layer.on { display: block; }

/* ---- joystick ---- */
#touch-layer .tl-joy {
  position: absolute; width: calc(128px * var(--tsz)); height: calc(128px * var(--tsz)); margin: calc(-64px * var(--tsz)) 0 0 calc(-64px * var(--tsz));
  border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 50%, rgba(10, 13, 12, .18) 0 50%, rgba(10, 13, 12, .42) 100%);
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .26), 0 10px 30px rgba(0, 0, 0, .28);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
#touch-layer .tl-joy::before { content: ''; position: absolute; inset: 22%; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1); }
#touch-layer .tl-joy.live { display: none; }
#touch-layer .tl-joy.live.on { display: block; }
#touch-layer .tl-joy.rest {
  left: calc(var(--sal, 0px) + 40px + 64px * var(--tsz)); top: calc(var(--app-h, 100vh) - var(--sab, 0px) - 44px - 64px * var(--tsz));
  opacity: .5; transition: opacity .2s;
}
#touch-layer .tl-joy.rest.hide { opacity: 0; }
#touch-layer .tl-knob {
  position: absolute; left: 50%; top: 50%; width: calc(54px * var(--tsz)); height: calc(54px * var(--tsz)); margin: calc(-27px * var(--tsz)) 0 0 calc(-27px * var(--tsz));
  border-radius: 50%; background: radial-gradient(circle at 50% 35%, #ffffff, #d9e0dc); box-shadow: 0 6px 16px rgba(0, 0, 0, .4), inset 0 -2px 0 rgba(0, 0, 0, .08); opacity: .94;
}

/* ---- button cluster (bottom-right; mirrored for left-handed players) ---- */
#touch-layer .tl-cluster {
  position: absolute; right: calc(var(--sar, 0px) + var(--pad)); bottom: calc(var(--sab, 0px) + var(--pad));
  width: calc(206px * var(--tsz)); height: calc(232px * var(--tsz)); pointer-events: none;
}
#touch-layer.lefty .tl-cluster { right: auto; left: calc(var(--sal, 0px) + var(--pad)); }
#touch-layer.lefty .tl-joy.rest { left: calc(var(--app-w, 100vw) - var(--sar, 0px) - 40px - 64px * var(--tsz)); }

#touch-layer .tl-btn {
  position: absolute; pointer-events: auto; touch-action: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  color: #fff; font-family: var(--font-ui); font-weight: 600; line-height: 1;
  background: rgba(12, 15, 14, .6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), inset 0 1px 0 rgba(255, 255, 255, .08), 0 8px 22px rgba(0, 0, 0, .32);
  -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur);
  transition: transform .08s ease, background-color .15s, opacity .15s;
}
#touch-layer .tl-btn[hidden] { display: none; }
#touch-layer .tl-btn.down { transform: scale(.92); background: rgba(40, 48, 44, .75); }
#touch-layer .tl-btn .tl-ico { display: inline-flex; line-height: 1; }
#touch-layer .tl-btn .tl-ico .ico-svg { width: calc(21px * var(--tsz)); height: calc(21px * var(--tsz)); stroke-width: 2; }
#touch-layer .tl-btn .tl-lbl { font-size: calc(10.5px * var(--tsz)); font-weight: 600; letter-spacing: .01em; max-width: 90%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: rgba(255, 255, 255, .86); }

#touch-layer .tl-btn.use {
  right: 0; bottom: 0; width: calc(96px * var(--tsz)); height: calc(96px * var(--tsz)); gap: 4px;
  background: linear-gradient(180deg, #0aa465, var(--accent-600)); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), inset 0 1px 0 rgba(255, 255, 255, .25), 0 10px 26px rgba(0, 80, 48, .5);
}
#touch-layer .tl-btn.use.down { background: var(--accent-700); }
#touch-layer .tl-btn.use .tl-ico .ico-svg { width: calc(28px * var(--tsz)); height: calc(28px * var(--tsz)); }
#touch-layer .tl-btn.use .tl-lbl { font-size: calc(12px * var(--tsz)); color: #fff; }
#touch-layer .tl-btn.use.dim { background: rgba(12, 15, 14, .6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .2), 0 8px 22px rgba(0, 0, 0, .32); }
#touch-layer .tl-btn.use.dim .tl-lbl, #touch-layer .tl-btn.use.dim .tl-ico { opacity: .6; }
#touch-layer .tl-btn.scan { right: calc(108px * var(--tsz)); bottom: calc(4px * var(--tsz)); width: calc(70px * var(--tsz)); height: calc(70px * var(--tsz)); }
#touch-layer .tl-btn.drop { right: calc(10px * var(--tsz)); bottom: calc(108px * var(--tsz)); width: calc(64px * var(--tsz)); height: calc(64px * var(--tsz)); }
#touch-layer .tl-btn.drop .tl-ico { color: var(--gold-300); }
#touch-layer .tl-btn.sign { right: calc(96px * var(--tsz)); bottom: calc(90px * var(--tsz)); width: calc(54px * var(--tsz)); height: calc(54px * var(--tsz)); }
#touch-layer .tl-btn.sign .tl-ico .ico-svg { width: calc(18px * var(--tsz)); height: calc(18px * var(--tsz)); }
#touch-layer .tl-btn.sign .tl-ico { color: var(--amber-300); }
#touch-layer .tl-btn.view, #touch-layer .tl-btn.done { right: calc(20px * var(--tsz)); bottom: calc(184px * var(--tsz)); width: calc(44px * var(--tsz)); height: calc(44px * var(--tsz)); }
#touch-layer .tl-btn.view .tl-lbl { display: none; }
#touch-layer .tl-btn.view .tl-ico .ico-svg { width: calc(19px * var(--tsz)); height: calc(19px * var(--tsz)); }
#touch-layer .tl-btn.done { width: calc(86px * var(--tsz)); right: 0; border-radius: 22px; background: var(--accent-600); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .22), 0 8px 22px rgba(0, 80, 48, .45); }
#touch-layer .tl-btn.done { flex-direction: row; gap: 6px; }
#touch-layer .tl-btn.done .tl-lbl { font-size: calc(12px * var(--tsz)); color: #fff; }

/* left-handed: mirror the cluster */
#touch-layer.lefty .tl-btn.use { right: auto; left: 0; }
#touch-layer.lefty .tl-btn.scan { right: auto; left: calc(108px * var(--tsz)); }
#touch-layer.lefty .tl-btn.drop { right: auto; left: calc(10px * var(--tsz)); }
#touch-layer.lefty .tl-btn.sign { right: auto; left: calc(96px * var(--tsz)); }
#touch-layer.lefty .tl-btn.view { right: auto; left: calc(20px * var(--tsz)); }
#touch-layer.lefty .tl-btn.done { right: auto; left: 0; }

/* what Use will do, in full (the HUD hides its own prompt while html.has-touch-label is set) */
#touch-layer .tl-caption {
  position: absolute; right: calc(var(--sar, 0px) + var(--pad)); bottom: calc(var(--sab, 0px) + var(--pad) + 240px * var(--tsz));
  max-width: min(62vw, 340px); padding: 7px 12px; border-radius: var(--r-pill); pointer-events: none;
  background: var(--glass-strong); -webkit-backdrop-filter: var(--blur); backdrop-filter: var(--blur); color: #fff; font: 550 .8125rem/1.25 var(--font-ui); box-shadow: inset 0 0 0 1px var(--glass-line), 0 6px 18px rgba(0, 0, 0, .3);
  opacity: 0; transform: translateY(4px); transition: opacity .15s, transform .15s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#touch-layer .tl-caption.show { opacity: 1; transform: none; }
#touch-layer .tl-caption.info { color: var(--gold-300); }
#touch-layer.lefty .tl-caption { right: auto; left: calc(var(--sal, 0px) + var(--pad)); }

/* small landscape phones: tighter */
html.is-phone.is-landscape #touch-layer { --pad: 10px; }
html.is-phone.is-landscape #touch-layer .tl-caption { bottom: calc(var(--sab, 0px) + 10px); right: calc(var(--sar, 0px) + 10px + 222px * var(--tsz)); max-width: 34vw; }
html.is-phone.is-landscape #touch-layer.lefty .tl-caption { right: auto; left: calc(var(--sal, 0px) + 10px + 222px * var(--tsz)); }