/* The stage HUD (WP11; core DESIGN §4.4, §2.6, §7.3, D-13, D-33): pads, the talk pad and its pitch rail, the Movie! pill,
 * the two-player split, and the puppet's glyphs over the set (the touch ping, the talk bubble, the hat ring). New code.
 * Pads are felt-sticker discs: an opaque felt face, a 3 px ink outline, one highlight arc, --shadow and --press; 96 px
 * (--pad, 72 pt) and --pad-gap apart. They answer at touch-down: input/puppet.js sets .is-down in the pointerdown itself
 * (press .9 in 60 ms, the picture nudges; release on --spring), .is-nope on a refused press, .is-talking with --talk-k and
 * --talk-y on the talk pad, and hides the Face pad while the actor has no overlay eyes. Labels show in 9-10 only (6-8
 * plays from the pictures). Nothing active sits in the bottom 24 px (--edge). Builds may use these classes for their own
 * HUD, or style their own under their prefix. Light theme only. */

/* The dock: pad clusters in the bottom corners, over the set, taking pointers only on the controls. */
.hud-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-view); display: flex; align-items: flex-end; justify-content: space-between;
  gap: var(--pad-gap); padding: 0 calc(12px + env(safe-area-inset-right)) var(--edge) calc(12px + env(safe-area-inset-left)); pointer-events: none; }
.hud-pads { display: grid; grid-template-columns: repeat(2, var(--pad)); gap: var(--pad-gap); pointer-events: none; }
.hud-col { display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; gap: var(--pad-gap); pointer-events: none; }
/* A [data-player] cluster names its half for the puppet; only its pads take pointers (its gaps stay the set's). */
html.stage-on main.view .hud-pads[data-player], html.stage-on main.view .hud-col[data-player] { pointer-events: none; }
html.older .hud-dock { --pad-gap: 26px; padding-bottom: calc(var(--edge) + 22px); }

/* A pad */
.hud-pad { appearance: none; margin: 0; padding: 0; font: inherit; color: var(--ink); cursor: pointer; position: relative; flex: none;
  width: var(--pad); height: var(--pad); border-radius: 50%; border: 3px solid var(--ink); background: var(--card);
  box-shadow: var(--shadow), var(--press); display: grid; place-items: center; pointer-events: auto;
  touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: transform var(--t-micro) var(--spring), opacity var(--t-micro); }
.hud-pad::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; border: 2px solid transparent;
  border-top-color: rgba(255, 255, 255, .78); transform: rotate(-38deg); pointer-events: none; }
.hud-pad[data-pad="jump"] { background: var(--butter); }
.hud-pad[data-pad="spin"] { background: color-mix(in srgb, var(--cobalt) 26%, var(--card)); }
.hud-pad[data-pad="boing"] { background: var(--coral-field); }
.hud-pad[data-pad="bow"] { background: color-mix(in srgb, var(--green) 22%, var(--card)); }
.hud-pic { display: block; pointer-events: none; transition: transform var(--t-micro) var(--spring); }
img.hud-pic { width: 58px; height: 58px; object-fit: contain; -webkit-user-drag: none; }
svg.hud-pic { width: 48px; height: 48px; }
.hud-pad.is-down { transform: scale(.9); transition: transform 60ms ease-out; }
.hud-pad.is-down .hud-pic { transition: transform 60ms ease-out; }
.hud-pad[data-pad="jump"].is-down .hud-pic { transform: translateY(-6px); }
.hud-pad[data-pad="spin"].is-down .hud-pic { transform: rotate(30deg); }
.hud-pad[data-pad="boing"].is-down .hud-pic { transform: scaleY(.8); }
.hud-pad[data-pad="bow"].is-down .hud-pic { transform: rotate(20deg); }
.hud-pad[data-pad="face"].is-down .hud-pic { transform: scale(1.15); }
.hud-pad.is-nope { animation: hud-nope 200ms ease-in-out 2; }
@keyframes hud-nope { 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }
[data-puppet="off"] .hud-pad { opacity: .6; }
/* 9-10: the pad's name under it */
.hud-label { display: none; }
html.older .hud-label { display: block; position: absolute; top: calc(100% + 3px); left: 50%; transform: translateX(-50%); white-space: nowrap;
  padding: 1px 8px; border-radius: 999px; background: var(--overlay-bg); color: var(--overlay-ink); font-size: 15px; font-weight: 750; line-height: 1.25; pointer-events: none; }

/* Talk: the rail above the pad shows from the first press until 200 ms after the line ends; the dot rides the finger. */
.hud-talk .hud-rail { position: absolute; left: 50%; bottom: calc(100% + 10px); width: 44px; height: 200px; margin-left: -22px; border-radius: 999px;
  background: var(--overlay-bg); border: 3px solid var(--ink); box-shadow: var(--shadow); opacity: 0; transform: scaleY(.5); transform-origin: 50% 100%;
  transition: opacity 120ms ease-out, transform 120ms var(--spring); pointer-events: none; }
.hud-talk.is-talking .hud-rail { opacity: 1; transform: none; }
.hud-rail-dot { position: absolute; left: 50%; width: 26px; height: 26px; margin-left: -13px; border-radius: 50%; background: var(--coral); border: 3px solid var(--ink);
  bottom: calc(var(--talk-k, 0.2) * (100% - 32px) + 3px); transition: bottom 60ms linear; }
.hud-talk.is-talking .hud-pic { animation: hud-say 240ms ease-in-out infinite alternate; }
@keyframes hud-say { from { transform: rotate(-5deg); } to { transform: rotate(5deg) scale(1.06); } }

/* Movie! */
.hud-movie { appearance: none; margin: 0; font: 850 24px/1 var(--font); letter-spacing: .01em; cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
  height: 64px; min-width: 160px; padding: 0 24px 0 10px; border-radius: 999px; border: 3px solid var(--ink); background: var(--coral); color: var(--card);
  box-shadow: var(--shadow-lift), var(--press); pointer-events: auto; touch-action: manipulation; user-select: none; -webkit-user-select: none;
  transition: transform var(--t-micro) var(--spring), opacity var(--t-micro); }
.hud-movie img { width: 46px; height: 46px; object-fit: contain; pointer-events: none; }
.hud-movie:active:not(:disabled) { transform: scale(.92); transition-duration: 80ms; }
.hud-movie:disabled { opacity: .55; cursor: default; }

/* Two players: a quiet dashed line down the middle; each half's cluster sits in its own bottom corner. */
.hud-divider { position: fixed; top: calc(var(--head) + env(safe-area-inset-top)); bottom: var(--edge); left: 50%; width: 0; margin-left: -1px;
  border-left: 2px dashed color-mix(in srgb, var(--line) 40%, transparent); pointer-events: none; }

/* Glyphs over the set (inside the puppet's surface; never recorded) */
.hud-glyphs { position: absolute; inset: 0; z-index: 3; overflow: hidden; pointer-events: none; }
.hud-ping { position: absolute; width: 46px; height: 46px; margin: -23px 0 0 -23px; border-radius: 50%; border: 3px solid var(--card);
  box-shadow: 0 0 0 2px rgba(24, 22, 18, .28), inset 0 0 0 2px rgba(24, 22, 18, .12); animation: hud-ping 460ms ease-out forwards; }
@keyframes hud-ping { from { transform: scale(.35); opacity: 1; } to { transform: scale(1.25); opacity: 0; } }
.hud-bubble { position: absolute; width: 66px; height: 58px; margin: -60px 0 0 -8px; color: var(--ink); transform-origin: 10% 100%;
  animation: hud-pop 220ms var(--spring); transition: opacity 200ms ease-out; }
.hud-bubble .ico { width: 100%; height: 100%; filter: drop-shadow(0 3px 4px rgba(93, 63, 26, .22)); }
.hud-bubble .ico path:first-child { fill: var(--card); }
.hud-bubble.is-saying .ico { animation: hud-say 260ms ease-in-out infinite alternate; }
.hud-bubble.is-off { opacity: 0; }
@keyframes hud-pop { from { transform: scale(.4); opacity: 0; } to { transform: none; opacity: 1; } }
.hud-hat { position: absolute; width: 70px; height: 24px; margin: -12px 0 0 -35px; border-radius: 50%; border: 4px solid var(--signal);
  box-shadow: 0 0 0 2px rgba(24, 22, 18, .25); animation: hud-hat 600ms ease-in-out infinite alternate; }
@keyframes hud-hat { from { transform: scale(.92); } to { transform: scale(1.08); } }

/* Reduced motion: the press still shows (no spring, no nudge); glyphs fade instead of moving. */
@media (prefers-reduced-motion: reduce) {
  .hud-pad, .hud-pic, .hud-movie, .hud-rail, .hud-rail-dot { transition: none; }
  .hud-pad.is-down .hud-pic, .hud-pad[data-pad].is-down .hud-pic { transform: none; }
  .hud-pad.is-nope { animation: none; outline: 3px solid var(--coral); outline-offset: 2px; }
  .hud-talk.is-talking .hud-pic, .hud-bubble, .hud-bubble.is-saying .ico, .hud-hat { animation: none; }
  .hud-ping { animation: hud-fade 400ms ease-out forwards; }
}
@keyframes hud-fade { from { opacity: 1; } to { opacity: 0; } }