/* The touch layer. Nothing in here exists until src/mobile builds it, and the
   whole of it goes away with the round: #pad only stands while you are playing. */

#pad { position: absolute; inset: 0; pointer-events: none; }
body:not([data-mode="playing"]) #pad { display: none; }

/* Safari reads a double tap as zoom and a held label as something to offer a
   loupe over, and the pad is made of double taps and held buttons: a dash zooms
   the arena, and a thumb resting on FIRE picks the word up. Selection is already
   off everywhere (index.css); what is left is to take both gestures off the
   browser. `manipulation` rather than `none` — the module screen still has to
   scroll — and the pad's own `none` still wins where it is set, since what a
   touch may do is what the element and its ancestors agree on. */
body.touch {
  touch-action: manipulation;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

body.touch canvas { touch-action: none; }
body.touch .hint { display: none; }
body.touch .gun-slot .k { display: none; }

.rack-touch { display: none; }
body.touch .rack-desk { display: none; }
body.touch .rack-touch { display: block; }

/* Auto aim means the crosshair is no longer a cursor: it marks the bug the gun
   has picked, and there is nothing to mark when the arena is empty. */
#crosshair.off { display: none; }

#pad-stick {
  position: absolute; left: 0; bottom: 0; width: 46%; height: 58%;
  pointer-events: auto; touch-action: none;
}

/* Where to put the thumb before there is a stick to put it on. */
#pad-stick::before {
  content: ''; position: absolute; width: 132px; height: 132px;
  left: max(24px, env(safe-area-inset-left)); bottom: 64px;
  border: 1px dashed rgba(255,255,255,.22); border-radius: 50%;
  transition: opacity .15s linear;
}
#pad-stick.live::before { opacity: 0; }

.stick-base {
  position: fixed; left: 0; top: 0; width: 132px; height: 132px;
  margin: -66px 0 0 -66px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,.24); background: rgba(4,8,12,.32);
  opacity: 0; transition: opacity .12s linear; will-change: transform;
}
#pad-stick.live .stick-base { opacity: 1; }

.stick-knob {
  position: absolute; left: 50%; top: 50%; width: 60px; height: 60px;
  margin: -30px 0 0 -30px; border-radius: 50%;
  border: 1px solid var(--accent); background: rgba(125,211,252,.22);
  box-shadow: 0 0 18px rgba(125,211,252,.25); will-change: transform;
}

#pad-actions {
  position: absolute; display: flex; align-items: flex-end; gap: 16px;
  right: max(22px, env(safe-area-inset-right)); bottom: max(26px, env(safe-area-inset-bottom));
}

.pad-btn {
  position: relative; flex: none; pointer-events: auto; touch-action: none;
  -webkit-tap-highlight-color: transparent;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border-radius: 50%; border: 1px solid rgba(255,255,255,.28);
  background: rgba(6,10,14,.5); color: var(--ink);
  font-family: inherit; letter-spacing: 2px;
}

.pad-tag { font-size: 10px; opacity: .7; }

#pad-fire {
  width: 112px; height: 112px;
  border-color: rgba(255,255,255,.4); background: rgba(125,211,252,.12);
}
#pad-fire.down { background: rgba(125,211,252,.3); }
#pad-fire.dry { border-color: rgba(255,90,74,.6); }

#pad-swap { width: 78px; height: 78px; margin-bottom: 22px; }
#pad-swap.down { background: rgba(125,211,252,.24); }
.pad-btn .gico {
  width: 32px; height: 32px; fill: none; stroke: currentColor;
  stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round;
}

/* Stood over FIRE, clear of the gauge ring around it, so the thumb that lives
   there rolls straight up to the dash. */
#pad-dash { position: absolute; right: 25px; bottom: 138px; width: 62px; height: 62px; }
#pad-dash.hidden { display: none; }
#pad-dash.down { background: rgba(125,211,252,.24); }
#pad-dash .gico { width: 26px; height: 26px; }
#pad-dash.spent { opacity: .38; }

/* Sitting outside the rim rather than on it, so a thumb on the button never
   covers the one thing the button has to tell you. */
.pad-arc { position: absolute; inset: -14px; overflow: visible; pointer-events: none; }
.pad-arc path { fill: none; stroke-linecap: butt; }
.pad-arc .track { stroke: rgba(255,255,255,.16); stroke-width: 5; }
.pad-arc .fill { stroke: #ffffff; stroke-width: 5; transition: stroke .2s linear; }
.pad-arc.wind .track { stroke: rgba(154,92,255,.24); }
.pad-arc.wind .fill { stroke: #b98cff; }
.pad-arc.dry .track { stroke: rgba(255,90,74,.5); }
.pad-arc.dry .fill { stroke: #ff6b5e; }
.pad-arc.wind.dry .track { stroke: rgba(190,140,20,.4); }
.pad-arc.wind.dry .fill { stroke: #ffc21e; }

#pad-pause {
  position: absolute; width: 46px; height: 46px; font-size: 12px; opacity: .65;
  top: max(16px, env(safe-area-inset-top)); right: max(16px, env(safe-area-inset-right));
}

body.touch #hud-right { top: calc(34px + env(safe-area-inset-top)); right: 74px; }
/* Bottom right belongs to the fire button, so the map rides under the wave
   line instead, and shrinks to leave the fight room. */
body.touch #minimap {
  top: calc(96px + env(safe-area-inset-top)); bottom: auto;
  right: max(16px, env(safe-area-inset-right));
}
body.touch #mm-canvas { width: 108px; height: 108px; }
body.touch #hud-left { top: calc(34px + env(safe-area-inset-top));
                       left: max(16px, env(safe-area-inset-left)); }

/* The top strip is given over to this line, and the HUD starts below it. A
   notice read as chrome is a notice that failed, so it is a lit chip in the
   colour nothing else in the HUD uses, and not a grey line. */
#pad-demo {
  position: absolute; top: max(6px, env(safe-area-inset-top));
  /* Centred in the strip it actually has, which is the width less the pause
     button sitting in the right corner. */
  left: calc(50% - 34px); translate: -50% 0;
  max-width: min(calc(100vw - 82px), 320px);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  padding: 3px 11px; border-radius: 999px;
  border: 1px solid rgba(255,178,74,.5);
  background: rgba(28,17,4,.72);
  box-shadow: 0 0 16px rgba(255,178,74,.22), inset 0 0 12px rgba(255,178,74,.1);
  font-size: 10px; font-weight: 700; letter-spacing: 1.4px; color: #ffb24a;
  text-shadow: 0 1px 6px rgba(0,0,0,.9); pointer-events: none;
}
#pad-demo b { color: #ffe0ad; }

/* The narrowest phones cannot have the spacing and the whole line at once, and
   the line is the part that matters. */
@media (max-width: 340px) {
  #pad-demo { padding: 3px 8px; letter-spacing: .6px; }
}

/* Half a phone screen of buttons leaves little room for the rest, so the parts
   that are only there to be read shrink out of the way. */
@media (max-height: 460px) {
  #pad-fire { width: 96px; height: 96px; }
  #pad-swap { width: 68px; height: 68px; margin-bottom: 16px; }
  #pad-dash { right: 20px; bottom: 120px; width: 56px; height: 56px; }
  #pad-stick::before { width: 112px; height: 112px; bottom: 40px; }
  .stick-base { width: 112px; height: 112px; margin: -56px 0 0 -56px; }
}

/* Keeping the HUD out of the pad's way. The health bar grows with the module
   that raises it, and unchecked it runs under the wave count. */
body.touch #hpbar { width: min(calc(var(--bar-w) * var(--hp-scale, 1)), calc(100vw - 200px)); }
body.touch #gunlist { --slot: 34px; }
body.touch #extract { bottom: 158px; }
/* Under the buttons rather than across them: the pad's lowest edge is 26px up. */
body.touch #nowplaying { bottom: 6px; font-size: 10px; letter-spacing: 2px; }

/* Landscape has no height to spare at the top and a wide empty strip along the
   bottom, so the notice goes under the pad — below the buttons rather than
   beside them, which is the one band no thumb ever covers. The top strip goes
   back to the HUD. */
@media (orientation: landscape) {
  #pad-demo { top: auto; bottom: 4px; left: 50%; max-width: min(72vw, 320px); }
  body.touch #nowplaying { bottom: 30px; }
  body.touch #hud-right, body.touch #hud-left { top: calc(24px + env(safe-area-inset-top)); }
}

/* The welcome screen */
body.touch .menu-panel {
  padding-left: max(22px, env(safe-area-inset-left));
  padding-right: max(22px, env(safe-area-inset-right));
}
body.touch .menu-panel .btn { padding: 14px 18px; }
body.touch .menu-foot button { padding: 6px 0; }

.demo-note { display: none; }
body.touch .demo-note {
  display: block; margin-bottom: 12px;
  padding: 9px 12px; border-radius: 4px;
  border: 1px solid rgba(255,178,74,.4);
  border-left: 3px solid #ffb24a;
  background: linear-gradient(90deg, rgba(255,178,74,.16), rgba(255,178,74,.03) 80%);
  font-size: 11px; font-weight: 700; letter-spacing: 2px; color: #ffcf95;
  text-transform: uppercase;
}
body.touch .demo-note b { color: #ffe6bd; }

/* The module screen. A phone has room for the tree or the stats, not both, so
   the stats become a sheet over it and the tab is the way back and forth. */
#mod-stats-tab { display: none; }

body.touch .overlay { backdrop-filter: none; }

/* A thumb needs a target, not a line of text: the pause buttons keep a 44px
   box however small the type gets, and the rack slots stay tappable. */
body.touch #pause-actions .btn { min-height: 44px; }
body.touch #pause .rack-panel { gap: 10px; }
body.touch #gunrack { --slot: 52px; gap: 10px; }
body.touch .mod-panel {
  width: 100vw; height: 100%; max-height: none;
  border: 0; border-radius: 0;
  display: flex; flex-direction: column;
  padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
           max(10px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}
body.touch .mod-head { gap: 10px; }
/* A thumb picks the ground, so the cards share the row they are in rather than
   clustering at its left — capped so a wide screen does not hand four billboards
   to a choice between four letters. */
body.touch .mod-sector { flex: 1 1 0; width: auto; max-width: 132px; height: 52px; }
body.touch .mod-head .title { font-size: 15px; letter-spacing: 3px; }
body.touch #mod-saved { font-size: 9px; letter-spacing: 2px; }
body.touch .mod-take { gap: 10px; }
body.touch .mod-purse { font-size: 17px; gap: 6px; }

body.touch .mod-body { position: relative; flex: 1; min-height: 0; margin: 8px 0; }
body.touch #tree-view { height: auto; min-height: 0; margin: 0; }
body.touch #mod-stats {
  position: absolute; inset: 0; z-index: 4; flex: none;
  height: auto; min-height: 0; margin: 0; padding: 6px 4px 4px;
  border: 1px solid #1c2a33; border-radius: 8px; background: rgba(8,12,16,.98);
}
body.touch #modules:not(.stats-open) #mod-stats { display: none; }

body.touch #mod-stats-tab {
  display: block; padding: 8px 13px;
  border: 1px solid #2b3f4b; border-radius: 999px; background: rgba(255,255,255,.04);
  color: #8fa3ae; font-family: inherit; font-size: 10px; letter-spacing: 2px;
}
body.touch #modules.stats-open #mod-stats-tab { border-color: var(--accent); color: var(--accent); }

body.touch .mod-actions .btn { margin: 0; padding: 11px 18px; font-size: 12px; letter-spacing: 2px; }

/* Four of these across a phone held upright leaves each of them too narrow to
   read: two rows instead, with the pair that carries the run on underneath,
   nearest the thumb. Landscape keeps the single row — there the screen is short
   of height, not width. */
@media (orientation: portrait) {
  body.touch .mod-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  body.touch #btn-mod-quit { margin-right: 0; }
}

/* A landscape phone is short, not narrow, so the tabs sit beside the title
   rather than above it and the tree keeps the height that would have cost. The
   refusal takes a line of its own — it is a sentence, not a chip. */
@media (orientation: landscape) and (max-height: 460px) {
  body.touch .mod-titles { flex-flow: row wrap; align-items: center; column-gap: 12px; }
  body.touch #mod-sectors { align-self: center; margin-bottom: 0; }
  body.touch .mod-sector { height: 42px; }
  body.touch #mod-sector-note { order: 1; flex-basis: 100%; }
}

/* 22px of node is a hard thing to hit with a thumb. The ring stays the size it
   was drawn; what grows is the part that answers a tap. */
body.touch .tnode::after { content: ''; position: absolute; inset: -9px; border-radius: 50%; }
body.touch .tnode.hub::after { inset: -4px; }
body.touch .tnode.picked { transform: scale(1.2); }

body.touch .mod-tip { max-width: calc(100vw - 20px); }