/* ============================================================
   TOUCH LAYER
   The on-screen stick and the two buttons. The markup is the #touch block in
   index.html and the behaviour is src/ui/touch.js.

   The layer is a sibling of #hud, not part of it: the HUD stays click-through
   and keeps its one panel, and the touch controls need to catch fingers.
   ============================================================ */

/* ---------- Page, on a handheld ---------- */

/* A tap must not flash grey, and nothing in touch mode is selected or
   called out by a long press. Range sliders still work: user-select does
   not stop a thumb from dragging a track. */
html{ -webkit-tap-highlight-color:transparent; }
[data-input=touch]{ -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }

/* ---------- The layer ---------- */

/* Off by default. It takes pointers only in touch mode, so on a desktop it can
   never sit between the mouse and the game. The level (4) is above the stage
   and below the HUD (5) and every screen (5, later in the page), so a screen
   always covers the controls. */
#touch{
  position:absolute;
  inset:0;
  z-index:4;
  pointer-events:none;
  touch-action:none;           /* no scroll or pinch-zoom starts on the controls */
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none;  /* no long-press menu on iOS */
  -webkit-tap-highlight-color:transparent;
}
[data-input=touch] #touch{ pointer-events:auto; }

/* An author display rule would beat the hidden attribute, so say it again here. */
#touch [hidden]{ display:none !important; }

/* ---------- Page, in touch mode only ---------- */

/* A swipe at the edge must not pull the page or reload it. */
html[data-input=touch], html[data-input=touch] body{ overscroll-behavior:none; }

/* The frame-time overlay (?perf=1): fixed inside the safe area, above the HUD,
   no pointer so it never steals a tap or a stick drag. Hidden until ?perf=1. */
#perf{
  position:fixed;
  left:var(--safe-l); bottom:var(--safe-b);
  z-index:6;            /* above the HUD (z-index 5) */
  pointer-events:none;
  font:11px/1.2 var(--mono);
  color:var(--yellow);
  background:rgba(0,0,0,.6);
  padding:4px 6px;
  border-radius:4px;
  white-space:nowrap;
}

/* 100% is the tall layout height on a phone, with the address bar covering the
   bottom of it. dvh follows what is actually visible. */
html[data-input=touch] body,
html[data-input=touch] #crt{ height:100dvh; }

/* ---------- The stick ---------- */

/* The ring is placed where the thumb landed, and its size is set from the
   stick radius in script. */
#touch-ring{
  position:absolute;
  border:1.5px solid var(--yellow);
  border-radius:50%;
  background:rgba(10,9,5,.18);     /* the same glass as the HUD panel */
  opacity:.55;
  transform:translate(-50%,-50%);
  pointer-events:none;
  transition:border-color .12s, opacity .12s;
}
/* The latch is on: this is the loud pace. Same red as the loud mark. */
#touch-ring.sprint{ border-color:var(--danger); opacity:.8; }

#touch-knob{
  position:absolute;
  left:50%; top:50%;
  width:44px; height:44px;
  margin:-22px 0 0 -22px;
  border-radius:50%;
  background:var(--yellow);
  opacity:.5;
  pointer-events:none;
}
#touch-ring.sprint #touch-knob{ background:var(--danger); }

/* The sprint line: a dashed circle inside the ring, as far out as the thumb has
   to go before the plumber runs. --sprint-at is the SPRINT PUSH preset's
   threshold (0 to 1), set by src/ui/touch.js. It is drawn from the ring's own
   box, so it scales with the stick radius. It goes solid while the latch is on. */
#touch-ring::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:calc(var(--sprint-at, 0.88) * 100%);
  height:calc(var(--sprint-at, 0.88) * 100%);
  transform:translate(-50%,-50%);
  border:1.5px dashed var(--yellow-dim);
  border-radius:50%;
  box-sizing:border-box;
  pointer-events:none;
}
#touch-ring.sprinting::after{ border-style:solid; border-color:var(--danger); }

/* ---------- The buttons ---------- */

/* The default button look (yellow slab, wide padding) is for the menus, so this
   resets it. Dim at rest so the map stays the picture, bright while pressed. */
#touch button{
  position:absolute;
  display:flex; align-items:center; justify-content:center;
  min-width:48px; min-height:48px;
  padding:0;
  border:1.5px solid var(--yellow);
  border-radius:50%;
  background:rgba(10,9,5,.18);
  color:var(--yellow);
  font-size:10px;
  letter-spacing:.1em;
  font-weight:900;
  opacity:.35;
  cursor:default;
  box-shadow:none;
  transition:opacity .08s;
}
@media (hover:hover){
  #touch button:hover{ background:rgba(10,9,5,.18); box-shadow:none; }
}
#touch button:active{ transform:none; }
#touch button.down{ opacity:1; background:rgba(228,230,168,.22); }

/* Opposite the stick. If the stick moves to the right half, this has to move
   too. */
#touch [data-touch=radar]{
  width:68px; height:68px;
  right:calc(18px + var(--safe-r));
  bottom:calc(18px + var(--safe-b));
}
/* Top right, so it is clear of the HUD panel in the top left. */
#touch [data-touch=pause]{
  width:48px; height:48px;
  right:calc(12px + var(--safe-r));
  top:calc(12px + var(--safe-t));
  gap:5px;
}
#touch [data-touch=pause] i{
  display:block; width:4px; height:18px;
  background:var(--yellow);
}

/* The fullscreen glyph: four corner brackets, to the left of the pause glyph.
   Hidden once the page is fullscreen, and where it cannot be. */
#touch [data-touch=fullscreen]{
  width:48px; height:48px;
  right:calc(70px + var(--safe-r));
  top:calc(12px + var(--safe-t));
}
#touch [data-touch=fullscreen] i{
  display:block; width:20px; height:20px;
  --c:linear-gradient(var(--yellow),var(--yellow));
  background:
    var(--c) 0 0/8px 3px,       var(--c) 0 0/3px 8px,
    var(--c) 100% 0/8px 3px,    var(--c) 100% 0/3px 8px,
    var(--c) 0 100%/8px 3px,    var(--c) 0 100%/3px 8px,
    var(--c) 100% 100%/8px 3px, var(--c) 100% 100%/3px 8px;
  background-repeat:no-repeat;
}

/* ---------- Fullscreen controls and the home-screen tip ---------- */

[data-fs=unsupported] #btn-fullscreen,
[data-fs=unsupported] .fs-ui,
[data-fs=unsupported] [data-touch=fullscreen],
[data-fs=on] [data-touch=fullscreen]{ display:none; }

/* One dim line that wraps on a narrow screen. The OK button is small on
   purpose: it is not part of the game. */
.fs-hint{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:6px 10px;
  margin:10px 0 0;
  font-size:11px; letter-spacing:.08em; line-height:1.5;
  color:var(--yellow-dim); opacity:.8;
}
.fs-hint[hidden]{ display:none !important; }
.fs-hint button{ font-size:10px; font-weight:900; padding:2px 10px; min-height:0; }
[data-input=touch] .fs-hint button{ min-height:32px; }

/* ---------- The HUD panel in touch mode ---------- */

/* src/ui/touch-hud-rules.js adds .hud-quiet when nothing needs reading. Opacity
   only: the panel keeps its place and size, so nothing shifts when it comes
   back. The prompt line is not touched, because "stand still" and "do not move"
   are the lines a player with a released stick needs. The transition on the
   quiet rule is the one used when the class arrives (a slow fade out); the one
   on the plain rule is used when it leaves (a quick return). */
[data-input=touch] .crt-tl{ transition:opacity .15s ease; }
[data-input=touch] .crt-tl.hud-quiet{ opacity:0; transition:opacity .6s ease; }

@media (prefers-reduced-motion:reduce){
  [data-input=touch] .crt-tl,
  [data-input=touch] .crt-tl.hud-quiet{ transition:none; }
}

/* ---------- Touch-only settings ---------- */

/* The touch rows on the pause page mean nothing with a keyboard. They carry
   .touch-only and are hidden until touch mode is on. */
[data-input=kbm] .touch-only{ display:none; }

/* ---------- The stick on the right ---------- */

/* touchSide moves the stick, and the radar button goes to the other corner. The
   pause glyph stays top right either way. */
#touch[data-side=right] [data-touch=radar]{
  right:auto;
  left:calc(18px + var(--safe-l));
}

/* ---------- Copy that depends on the input ---------- */

/* A line that names a key has a twin for touch. Which one shows follows the
   input mode, not the screen size, so a tablet with a keyboard reads keys. No
   data-input yet (the first instant of a load) counts as keyboard. */
[data-input=touch] .kbd-only{ display:none !important; }
html:not([data-input=touch]) .touch-only{ display:none !important; }

/* ---------- The rotate card ---------- */

/* Held upright on a touch device, the floor does not fit: cover everything and
   ask. The level is above the screens (5), the footer (10) and the error card,
   so nothing shows through. The run is paused by src/ui/touch.js. */
#rotate{
  display:none;
  position:absolute; inset:0;
  z-index:30;
  flex-direction:column; align-items:center; justify-content:center;
  gap:14px;
  padding:24px;
  text-align:center;
  background:#000;
  color:var(--yellow);
}
#rotate h1{ font-size:22px; letter-spacing:.18em; line-height:1.4; }
#rotate .rot-icon{ font-size:56px; line-height:1; color:var(--yellow-dim); }
#rotate .rot-sub{ font-size:12px; letter-spacing:.16em; line-height:1.8; color:var(--yellow-dim); }
@media (orientation:portrait) and (pointer:coarse){
  #rotate{ display:flex; }
}

/* ---------- Screens, in touch mode ---------- */

/* A thumb needs a bigger target than a mouse. The menu buttons are 28 px tall by
   default; this brings them up without changing how they look. */
[data-input=touch] .seg button,
[data-input=touch] .setrow.buttons button,
[data-input=touch] .binder-tabs button,
[data-input=touch] .title-menu button,
[data-input=touch] button.ghost,
[data-input=touch] button.danger{ min-height:40px; }

/* The primary button on every screen is the one a thumb has to find. */
[data-input=touch] #btn-start,
[data-input=touch] #btn-descend,
[data-input=touch] #btn-retry,
[data-input=touch] #btn-again,
[data-input=touch] #btn-resume{ min-height:44px; }

/* Sliders: a track and a thumb a finger can land on. The track stays thin;
   the thumb is taller than it, so the row gets room above and below. */
[data-input=touch] input[type=range]{ height:14px; margin:7px 0; }
[data-input=touch] input[type=range]::-webkit-slider-thumb{ width:28px; height:28px; }
[data-input=touch] input[type=range]::-moz-range-thumb{ width:28px; height:28px; }

/* A short touch screen has no room for the legend on the stub, and the stub
   then ends after LIVES / DIFFICULTY. */
@media (max-height:520px){
  [data-input=touch] .order-side .stub-note,
  [data-input=touch] .controls-big{ display:none; }
}

/* The screens' own padding keeps them clear of the notch (css/screens.css), and
   the HUD panel anchors with max() (css/hud.css), so only the prompt needs a
   touch rule: the home bar sits under it. */
[data-input=touch] #prompt{ padding-bottom:calc(20px + var(--safe-b)); }