/* Touch HUD overlay (PWA P4). Sits above the game canvas; only its buttons take pointers (hud.js reads
   world touches from the window and draws the stick under the finger). Sizes come from the Suits vs.
   Toons tokens (design/svt.css); the look is the game's own GUI (look/toon.css): glossy round buttons
   with a dark rim that sink when pressed, yellow outlined lettering. Every button keeps its size, so
   the hit areas are unchanged. */
:root {
  --hud-u: clamp(var(--tap), 9vmin, var(--space-20));
  --hud-pad: clamp(var(--space-2), 2.5vmin, var(--space-6));
  --hud-fg: var(--tt-label);
}
#ttro-hud {
  position: fixed; inset: 0; pointer-events: none; z-index: 10;
  font: var(--tt-weight) clamp(var(--text-xs), 2.2vmin, var(--text-base))/var(--leading-tight) var(--tt-font);
  font-synthesis: none;
  color: var(--hud-fg);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  padding: max(var(--hud-pad), env(safe-area-inset-top)) max(var(--hud-pad), env(safe-area-inset-right))
           max(var(--hud-pad), env(safe-area-inset-bottom)) max(var(--hud-pad), env(safe-area-inset-left));
  box-sizing: border-box;
}
#ttro-hud:not([data-mode="walk"]) .hud-walk, #ttro-hud:not([data-mode="action"]) .hud-action,
#ttro-hud:not([data-mode="game"]) .hud-game, #ttro-hud[data-entry="1"] .hud-walk,
#ttro-hud[data-entry="1"] .hud-action, #ttro-hud[data-entry="1"] .hud-game { display: none; }
#ttro-hud button {
  pointer-events: auto; touch-action: none; -webkit-tap-highlight-color: transparent;
}
/* A blue ball (Map, arrows) with yellow outlined lettering; .on (held) sinks it into its lip. */
#ttro-hud button:not(.btn) {
  border: var(--tt-edge) solid var(--tt-blue-edge); border-radius: 50%; background: var(--tt-ball-blue);
  box-shadow: var(--tt-lift-blue); text-shadow: var(--tt-outline);
  color: inherit; font: inherit; width: var(--hud-u); height: var(--hud-u); padding: 0;
  font-size: max(var(--text-sm), min(1em, calc(var(--hud-u) * 0.26)));
  transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out), filter var(--dur-fast);
}
#ttro-hud button.on { transform: translateY(calc(var(--tt-lip) - 1px)); box-shadow: var(--tt-sunk-blue); filter: brightness(0.88); }
/* Action and labelled game buttons: the yellow of the game's pill buttons, dark lettering. */
#ttro-hud :is(.hud-act, .hud-gamebtn:not([data-glyph])) {
  border-color: var(--tt-olive); background: var(--tt-ball-yellow); box-shadow: var(--tt-lift-yellow);
  color: var(--tt-on-yellow); text-shadow: var(--tt-emboss);
}
#ttro-hud :is(.hud-act, .hud-gamebtn:not([data-glyph])).on { box-shadow: var(--tt-sunk-yellow); }
/* The stick is drawn where the finger lands (hud.js sets left/top to its centre) and only while held. */
.hud-stick {
  position: absolute; display: none; pointer-events: none;
  width: calc(var(--hud-u) * 2.6); height: calc(var(--hud-u) * 2.6); transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--tt-pad); border: var(--tt-edge) solid var(--tt-blue-edge);
  box-shadow: var(--tt-pad-ring);
}
.hud-stick[data-on] { display: block; }
.hud-knob {
  position: absolute; left: 50%; top: 50%; width: 40%; height: 40%; margin: -20% 0 0 -20%;
  border-radius: 50%; pointer-events: none; box-sizing: border-box;
  background: var(--tt-ball-yellow); border: var(--tt-edge) solid var(--tt-olive); box-shadow: var(--tt-lift-yellow);
}
.hud-act {
  position: absolute; right: max(var(--hud-pad), env(safe-area-inset-right));
  bottom: max(var(--hud-pad), env(safe-area-inset-bottom));
}
#ttro-hud .hud-act { width: calc(var(--hud-u) * 1.6); height: calc(var(--hud-u) * 1.6); }
/* A minigame touch profile's buttons (toontown/svt/touch_games): data-layout column (first at the
   bottom), row (left to right) or dpad (ids up/down/left/right on a cross), in the data-place corner. */
.hud-game {
  --hud-edge-x: max(var(--hud-pad), env(safe-area-inset-right));
  --hud-edge-y: max(var(--hud-pad), env(safe-area-inset-bottom));
  position: absolute; right: var(--hud-edge-x); bottom: var(--hud-edge-y);
  display: flex; flex-direction: column-reverse; gap: calc(var(--hud-pad) * 0.6);
}
.hud-game[data-place="bl"], .hud-game[data-place="tl"] {
  right: auto; left: max(var(--hud-pad), env(safe-area-inset-left));
}
.hud-game[data-place="tr"], .hud-game[data-place="tl"] {
  bottom: auto; top: max(var(--hud-pad), env(safe-area-inset-top));
}
.hud-game[data-layout="row"] { flex-direction: row; gap: calc(var(--hud-pad) * 1.5); }
.hud-game[data-layout="dpad"] {
  display: grid; grid-template-columns: repeat(3, auto); grid-template-rows: repeat(3, auto); gap: 0;
}
.hud-game[data-layout="dpad"] > [data-id="up"] { grid-area: 1 / 2; }
.hud-game[data-layout="dpad"] > [data-id="left"] { grid-area: 2 / 1; }
.hud-game[data-layout="dpad"] > [data-id="right"] { grid-area: 2 / 3; }
.hud-game[data-layout="dpad"] > [data-id="down"] { grid-area: 3 / 2; }
/* Labels readable at phone size; one-symbol labels (arrows) larger, white on the blue ball. */
#ttro-hud button.hud-gamebtn {
  width: calc(var(--hud-u) * 1.4); height: calc(var(--hud-u) * 1.4);
  font-size: max(var(--text-sm), calc(var(--hud-u) * 0.32)); line-height: 1;
}
#ttro-hud button.hud-gamebtn[data-glyph] { font-size: calc(var(--hud-u) * 0.6); color: var(--tt-text); }
#ttro-hud .hud-game[data-layout="dpad"] button.hud-gamebtn { width: calc(var(--hud-u) * 1.25); height: calc(var(--hud-u) * 1.25); }
/* Map: right edge, under the game's friends button (top right) and clear of its book (bottom right). */
.hud-map {
  position: absolute; right: max(var(--hud-pad), env(safe-area-inset-right)); top: 32%;
}
/* The soft-keyboard proxy (hud.js): a real input the game's DirectEntry text mirrors. Invisible and
   1px at the top-left so focusing it neither scrolls nor pans; >= 16px text so iOS does not zoom. */
.hud-proxy { position: fixed; left: 0; top: 0; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.hud-proxy__input {
  position: absolute; left: 0; top: 0; width: 1px; height: 1px; padding: 0; border: 0; margin: 0;
  font-size: max(16px, var(--text-base)); color: transparent; caret-color: transparent; background: transparent;
}

/* Portrait on a phone (hud.js): the game is landscape, so a card over everything asks to rotate and
   swallows touches. Same sky and panel as the first-load screen (shell/shell.css #ttro-load), with a
   phone drawn in CSS turning on its side. */
#ttro-rotate {
  position: fixed; inset: 0; z-index: 2147482000; display: flex; align-items: center; justify-content: center;
  background: var(--tt-sky); color: var(--tt-text);
  font: var(--tt-weight) var(--text-lg)/var(--leading-snug) var(--tt-font); font-synthesis: none;
  padding: max(var(--space-6), env(safe-area-inset-top)) max(var(--space-6), env(safe-area-inset-right))
           max(var(--space-6), env(safe-area-inset-bottom)) max(var(--space-6), env(safe-area-inset-left));
  box-sizing: border-box; touch-action: none;
}
#ttro-rotate[hidden] { display: none; }
.ttro-rotate__card {
  width: min(100% - 2 * var(--rim-width), 24rem); text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3);
}
.ttro-rotate__card p { margin: 0; }
.ttro-rotate__card .plaque__title { margin: 0; font-size: var(--text-xl); }
/* the phone: a dark-rimmed handset with a screen, tipping onto its side and back */
.ttro-rotate__card::before {
  content: ""; order: -1; width: 3.4rem; height: 5.6rem; margin-block: var(--space-2) var(--space-4); box-sizing: border-box;
  border: 0.45rem solid var(--tt-ink); border-block-width: 0.8rem; border-radius: 0.8rem;
  background: var(--tt-ball-yellow); box-shadow: var(--tt-lift-blue);
  animation: ttro-rotate-tip 2.4s var(--ease-in-out) infinite;
}
@keyframes ttro-rotate-tip { 0%, 25% { transform: rotate(0); } 50%, 85% { transform: rotate(-90deg); } 100% { transform: rotate(0); } }
@media (prefers-reduced-motion: reduce) { .ttro-rotate__card::before { animation: none; transform: rotate(-90deg); } }