/* =====================================================================================
   INKWAVE — touch controls (src/ui/touch.js) + phone / PWA tweaks. Active under html.is-touch.
   ===================================================================================== */
html.is-touch, html.is-touch body { touch-action: none; overscroll-behavior: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
/* keep the HUD clear of the notch / rounded corners in landscape */
html.is-touch .iw-hud { left: env(safe-area-inset-left, 0px); right: env(safe-area-inset-right, 0px); }

.iw-tc {
  --tb: clamp(50px, 15.5vh, 78px);
  --F: calc(var(--tb) * 1.42);
  --R: calc(20px + env(safe-area-inset-right, 0px));
  --B: calc(18px + env(safe-area-inset-bottom, 0px));
  --L: calc(14px + env(safe-area-inset-left, 0px));
  --T: calc(10px + env(safe-area-inset-top, 0px));
  --k: #15121c;
  --c: #ff8a14;
  position: fixed; inset: 0; z-index: 5; display: none;
  touch-action: none; user-select: none; -webkit-user-select: none;
  font: 800 11px/1 'Rubik', system-ui, sans-serif; color: #fff;
}
.iw-tc.is-on { display: block; }

/* ---- floating move stick */
.iw-tc__stick { position: absolute; left: 0; top: 0; width: 0; height: 0; opacity: 0; transition: opacity .12s; pointer-events: none; }
.iw-tc__stick.is-on { opacity: 1; }
.iw-tc__stick::before { content: ''; position: absolute; left: -56px; top: -56px; width: 112px; height: 112px; border-radius: 50%;
  background: radial-gradient(circle, rgba(21, 18, 28, .12), rgba(21, 18, 28, .38)); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, .55); }
.iw-tc__knob { position: absolute; left: 0; top: 0; width: 0; height: 0; }
.iw-tc__knob::before { content: ''; position: absolute; left: -26px; top: -26px; width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255, 255, 255, .88); box-shadow: 0 0 0 3px var(--k), 0 3px 0 3px rgba(0, 0, 0, .25); }

/* ---- buttons */
.iw-tc__btn { position: absolute; display: grid; place-items: center; width: var(--tb); height: var(--tb); border-radius: 50%;
  background: rgba(21, 18, 28, .52); box-shadow: inset 0 0 0 2.5px rgba(255, 255, 255, .7), 0 2px 0 rgba(0, 0, 0, .25);
  transition: transform .08s, background .12s; }
.iw-tc__btn.is-down { transform: scale(.9); background: rgba(21, 18, 28, .72); box-shadow: inset 0 0 0 3px #fff; }
.iw-tc__ico { display: block; width: 58%; height: 58%; color: var(--c); pointer-events: none; }
.iw-tc__ico .iw-ico, .iw-tc__ico svg { display: block; width: 100%; height: 100%; }
.iw-tc__lbl { position: absolute; left: 50%; bottom: -3px; translate: -50% 0; padding: 2px 5px; border-radius: 999px; background: var(--k); white-space: nowrap; font-size: 10px; letter-spacing: .04em; pointer-events: none; }

/* the action buttons sit on an arc around FIRE (offsets in --tb units, left / up from FIRE's centre) */
.iw-tc { --cx: calc(var(--R) + var(--F) / 2); --cy: calc(var(--B) + var(--tb) * .2 + var(--F) / 2); }
.iw-tc__btn--fire, .iw-tc__btn--squid, .iw-tc__btn--jump, .iw-tc__btn--sub, .iw-tc__btn--special {
  --ox: 0; --oy: 0; width: var(--s); height: var(--s);
  right: calc(var(--cx) + var(--tb) * var(--ox) - var(--s) / 2); bottom: calc(var(--cy) + var(--tb) * var(--oy) - var(--s) / 2); }
.iw-tc__btn--fire { --s: var(--F); background: rgba(21, 18, 28, .45); }
.iw-tc__btn--fire .iw-tc__ico { width: 62%; height: 62%; }
.iw-tc__btn--fire.is-down { background: color-mix(in srgb, var(--c) 45%, rgba(21, 18, 28, .6)); }
.iw-tc__btn--squid { --s: calc(var(--tb) * 1.05); --ox: 1.45; --oy: -.08; }
.iw-tc__btn--squid.is-latched { background: color-mix(in srgb, var(--c) 70%, rgba(21, 18, 28, .4)); box-shadow: inset 0 0 0 3px #fff, 0 0 14px var(--c); }
.iw-tc__btn--squid.is-latched .iw-tc__ico { color: #fff; }
.iw-tc__btn--jump { --s: calc(var(--tb) * .9); --ox: .98; --oy: .98; }
.iw-tc__btn--jump .iw-tc__ico { color: #fff; width: 48%; height: 48%; }
.iw-tc__btn--sub { --s: calc(var(--tb) * .84); --ox: 0; --oy: 1.36; }
.iw-tc__btn--special { --s: var(--tb); --ox: 2.25; --oy: 1.3; opacity: .55;
  background: conic-gradient(color-mix(in srgb, var(--c) 55%, transparent) var(--f, 0%), rgba(21, 18, 28, .52) 0); }
.iw-tc__btn--special.is-ready { opacity: 1; background: var(--c); box-shadow: inset 0 0 0 3px #fff, 0 0 18px var(--c); animation: iw-tc-ready 1s ease-in-out infinite; }
.iw-tc__btn--special.is-ready .iw-tc__ico { color: #fff; }
@keyframes iw-tc-ready { 50% { transform: scale(1.08); } }
.iw-tc__btn--pause, .iw-tc__btn--map { width: calc(var(--tb) * .66); height: calc(var(--tb) * .66); top: var(--T); }
.iw-tc__btn--pause { left: var(--L); }
.iw-tc__btn--pause .iw-tc__ico { color: #fff; width: 44%; height: 44%; }
.iw-tc__btn--map { left: calc(var(--L) + var(--tb) * .66 + 10px); }
.iw-tc__btn--map .iw-tc__ico { color: #fff; width: 56%; height: 56%; }
.iw-tc.is-map .iw-tc__btn--map { background: var(--c); }
/* the map is a targeting view: only the stick, pause and the map toggle stay */
.iw-tc.is-map .iw-tc__btn:not(.iw-tc__btn--map):not(.iw-tc__btn--pause) { opacity: 0; visibility: hidden; }

/* ---- first-round hints */
.iw-tc__hint { position: absolute; bottom: calc(var(--B) + 6px); padding: 5px 10px; border-radius: 999px; background: rgba(21, 18, 28, .6); font-size: 12px; opacity: .9; pointer-events: none; transition: opacity .6s; }
.iw-tc__hint--l { left: calc(var(--L) + 24vw); translate: -50% 0; bottom: calc(var(--B) + 36vh); }
.iw-tc__hint--r { left: 58vw; translate: -50% 0; bottom: calc(var(--B) + 36vh); }
.iw-tc.is-seasoned .iw-tc__hint, .iw-tc.is-map .iw-tc__hint { opacity: 0; }

/* ---- keyboard-only chrome is noise on a phone */
html.is-touch .iw-prompts, html.is-touch .iw-backbtn .iw-key, html.is-touch .iw-map__label .iw-key, html.is-touch .iw-pin__key, html.is-touch .iw-lg__foot { display: none !important; }

/* ---- portrait: ask for landscape (the game is laid out for a wide screen) */
.iw-rotate { display: none; }
@media (orientation: portrait) {
  html.is-touch .iw-rotate { position: fixed; inset: 0; z-index: 70; display: grid; place-content: center; gap: 14px; justify-items: center; padding: 24px;
    background: #0d1020; color: #fff; font: 800 18px/1.5 'Rubik', system-ui, sans-serif; text-align: center; }
  html.is-touch .iw-rotate svg { width: 84px; height: 84px; animation: iw-rot 1.8s ease-in-out infinite; }
}
@keyframes iw-rot { 0%, 20% { transform: rotate(0); } 55%, 100% { transform: rotate(-90deg); } }
.iw-ctl__touch { display: inline-block; padding: .25em .6em; border-radius: 999px; background: rgba(255, 255, 255, .14); font-weight: 700; white-space: nowrap; }