/* Studio styles (ST2b; studio DESIGN §2.0, §2.1, §2.8, §8.1): the layout tokens, the live HUD over the set, its felt-sticker
 * controls, the UI glyphs, the two-player layout and the rotate card, and touch hygiene. js/hud.js places every control
 * (absolute px rects from its pure layout, the same token numbers as below); this file gives them their look. Every class
 * root carries the st- prefix. Light theme only, all colours from the core tokens. */

/* ── Layout tokens (§2.0), derived from the core ones; js/hud.js keeps the same numbers for its layout */
#app { --st-g: 12px; --st-top: 72px; --st-movie-w: 168px; --st-movie-h: 72px; --st-beat: 72px; --st-por: 64px; --st-side: 60px; --st-sec: 64px; }
#app.st-landscape { --st-top: 64px; --st-movie-w: 160px; --st-movie-h: 64px; --st-beat: 60px; }
#app.st-tablet { --st-g: 20px; --st-top: 72px; --st-movie-w: 200px; --st-movie-h: 72px; --st-beat: 72px; --st-por: 72px; --st-side: 64px; --st-sec: 72px; --pad-gap: 16px; }

/* ── Touch hygiene on the set (§2.0): no selection, callout or loupe; text fields keep theirs */
#app.st-onset { -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
#app.st-onset :is(input, textarea, [contenteditable="true"]) { -webkit-user-select: text; user-select: text; -webkit-touch-callout: default; }
.st-set .st-surface { touch-action: none; }

/* ── The HUD: a fixed layer over the set; only its controls take pointers */
.st-hud { position: fixed; inset: 0; z-index: var(--z-view); pointer-events: none; color: var(--ink); }
.st-hud [hidden] { display: none !important; }
.st-hud :is(.st-btn, .st-movie, .st-pad, .st-por) { position: absolute; left: 0; top: 0; margin: 0; padding: 0; box-sizing: border-box; pointer-events: auto;
  touch-action: none; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; cursor: pointer; }
.st-hud :is(.st-thingbar, .st-picker, .st-rotate) :is(.st-btn, .st-por) { position: relative; }
html.stage-on main.view .st-hud :is(.st-pads, .st-cast, .st-half) { pointer-events: none; }

/* A felt-sticker disc (§2.0): an opaque felt face, a 3 px ink outline, one highlight arc, --shadow and --press */
.st-btn { appearance: none; font: inherit; color: var(--ink); display: grid; place-items: center; border-radius: 50%; border: 3px solid var(--ink);
  background: var(--card); box-shadow: var(--shadow), var(--press); transition: transform var(--t-micro) var(--spring), opacity var(--t-micro); }
.st-btn::before { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 2px solid transparent; border-top-color: rgba(255, 255, 255, .78);
  transform: rotate(-38deg); pointer-events: none; }
.st-btn:active, .st-btn.is-down { transform: scale(.92); transition-duration: 80ms; }
.st-pic { display: block; width: 34px; height: 34px; pointer-events: none; transition: transform var(--t-micro) var(--spring); }
img.st-pic { object-fit: contain; -webkit-user-drag: none; }
.st-hud .ico { stroke-width: 2.2; }

/* the grown-ups key: press and hold 1 s, a --signal ring fills round it; 48 px at a 60 % face below reveal 1 */
.st-key .st-pic { width: 28px; height: 28px; }
.st-key.is-small { opacity: .6; }
.st-key.is-small .st-pic { width: 24px; height: 24px; }
:is(.st-ring, .st-cool) { position: absolute; inset: -7px; width: calc(100% + 14px); height: calc(100% + 14px); transform: rotate(-90deg); pointer-events: none; overflow: visible; }
:is(.st-ring, .st-cool) circle { fill: none; stroke: var(--signal); stroke-width: 4; stroke-linecap: round; stroke-dasharray: 100; stroke-dashoffset: 100; }
.st-ring { opacity: 0; }   /* at rest nothing: a round cap of an empty dash still draws a dot in Chromium */
.st-key.is-holding .st-ring, .st-key.is-done .st-ring, .st-key.is-drain .st-ring { opacity: 1; }
.st-key.is-holding .st-ring circle { stroke-dashoffset: 0; transition: stroke-dashoffset 1000ms linear; }
.st-key.is-done .st-ring circle { stroke-dashoffset: 0; }
.st-key.is-drain .st-ring circle { stroke-dashoffset: 100; transition: stroke-dashoffset 200ms ease-out; }
.st-key.is-wobble .st-pic { animation: st-hud-wobble 200ms ease-in-out; }
@keyframes st-hud-wobble { 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }
.st-dot { position: absolute; right: 2px; top: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--coral); box-shadow: 0 0 0 2px var(--card); display: none; }
.st-key.has-dot .st-dot { display: block; }

/* Movie!: a coral pill with the clay clapper (large text: 24 px, weight 850) */
.st-movie { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 0 18px 0 8px; border-radius: 999px;
  border: 3px solid var(--ink); background: var(--coral); color: var(--card); font: 850 24px/1 var(--font); letter-spacing: .01em; white-space: nowrap;
  box-shadow: var(--shadow-lift), var(--press); transition: transform var(--t-micro) var(--spring), opacity var(--t-micro); }
.st-movie img { width: 44px; height: 44px; object-fit: contain; pointer-events: none; -webkit-user-drag: none; }
.st-movie span { pointer-events: none; }
.st-movie:active, .st-movie.is-down { transform: scale(.92); transition-duration: 80ms; }
.st-movie::after { content: ""; position: absolute; inset: -9px; border-radius: 999px; border: 4px solid var(--signal); opacity: 0; pointer-events: none; }
.st-movie[data-glow="pulse"]::after { animation: st-hud-glow 1.6s ease-in-out infinite; }
.st-movie[data-glow="soft"]::after { animation: st-hud-glow-soft 1.6s ease-in-out infinite; }
.st-movie[data-glow="on"]::after { opacity: 1; }
@keyframes st-hud-glow { 0%, 100% { opacity: .15; transform: scale(.98); } 50% { opacity: 1; transform: scale(1.03); } }
@keyframes st-hud-glow-soft { 0%, 100% { opacity: .3; } 50% { opacity: .8; } }

/* Show (the little TV) and the beats row: felt discs with their pictures */
.st-hud [data-st="show"] .st-pic { width: 30px; height: 30px; }
.st-beat .st-pic { width: 40px; height: 40px; }
#app.st-phone.st-landscape .st-beat .st-pic { width: 36px; height: 36px; }
.st-cool { opacity: 0; transition: opacity 120ms ease-out; }
.st-cool circle { stroke-dashoffset: calc(100 * (1 - var(--cool, 1))); }
.st-beat.is-cooling .st-cool { opacity: 1; }
.st-beat.is-fired .st-pic { animation: st-hud-drop 180ms var(--spring); }
.st-beat.is-nope .st-cool { animation: st-hud-wiggle 200ms ease-in-out; }
.st-beat.is-nope .st-pic { animation: st-hud-wobble 200ms ease-in-out; }
@keyframes st-hud-drop { 40% { transform: translateY(6px); } }
@keyframes st-hud-wiggle { 25% { transform: rotate(-94deg); } 75% { transform: rotate(-86deg); } }

/* The cast strip: portraits (the starters' 3D stills, own members' baked portraits), the hero ring, the ready glow */
.st-por { appearance: none; font: inherit; border-radius: 50%; border: 2px solid var(--hair); background: var(--card); box-shadow: var(--shadow); overflow: visible;
  transition: transform var(--t-micro) var(--spring), box-shadow var(--t-micro); }
.st-por:active { transform: scale(.92); transition-duration: 80ms; }
.st-por-pic { position: absolute; inset: 2px; width: calc(100% - 4px); height: calc(100% - 4px); border-radius: 50%; object-fit: cover; background: var(--sand); pointer-events: none; -webkit-user-drag: none; }
.st-por-blank { display: block; }
/* a newcomer before its first baked portrait: its own cut-out, whole, inside the circle */
.st-por-cut { box-sizing: border-box; padding: 6px; object-fit: contain; }
.st-por.is-hero, .st-half-por[data-player="0"] { border-color: var(--card); box-shadow: 0 0 0 4px var(--coral), var(--shadow); }
.st-por.is-p2, .st-half-por[data-player="1"] { border-color: var(--card); box-shadow: 0 0 0 4px var(--cobalt), var(--shadow); }
.st-por.is-ready { animation: st-hud-ready 2s ease-in-out infinite; }
@keyframes st-hud-ready { 0%, 100% { box-shadow: var(--shadow); } 50% { box-shadow: var(--glow-ready), var(--shadow); } }
.st-por.is-hero.is-ready { animation: none; box-shadow: 0 0 0 4px var(--coral), var(--glow-ready), var(--shadow); }
.st-trait { position: absolute; right: -4px; bottom: -4px; width: 22px; height: 22px; border-radius: 50%; background: var(--card); border: 2px solid var(--ink);
  display: grid; place-items: center; pointer-events: none; }
.st-trait .ico { width: 15px; height: 15px; stroke-width: 2.6; }
.st-por-name { display: none; position: absolute; top: calc(100% + 2px); left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 0 7px; border-radius: 999px;
  background: var(--overlay-bg); font-size: 15px; font-weight: 750; line-height: 18px; pointer-events: none; }
html.older .st-hud .st-cast .st-por-name { display: block; }

/* "+": a dashed circle with the clay plus; a --signal glow and a bob after the casting call */
.st-add { border: 3px dashed var(--line); background: color-mix(in srgb, var(--card) 88%, transparent); box-shadow: var(--shadow); }
.st-add .st-pic { width: 40px; height: 40px; }
.st-add.is-glow { box-shadow: 0 0 0 4px color-mix(in srgb, var(--signal) 70%, transparent), var(--shadow); animation: st-hud-bob 1.4s ease-in-out infinite; }
@keyframes st-hud-bob { 0%, 100% { translate: 0 -3px; } 50% { translate: 0 3px; } }

/* Props (the toy box): the put-away target while a thing is carried; Wish; Plan */
.st-hud [data-st="props"] .st-pic-open { display: none; }
.st-hud [data-st="props"].is-target { transform: scale(1.2); box-shadow: 0 0 0 4px var(--signal), var(--shadow-lift); }
.st-hud [data-st="props"].is-target .st-pic-open { display: block; }
.st-hud [data-st="props"].is-target .st-pic-shut { display: none; }
.st-hud [data-st="wish"] { background: var(--butter); }

/* Pads (the core's felt pads, placed by the HUD), talk, the secondary pads */
.st-hud .st-pad { width: auto; height: auto; }
.st-hud .st-sec .hud-pic { width: 36px; height: 36px; }
.st-hud .st-talk { background: var(--card); }
.st-hud .hud-talk .hud-rail { height: 220px; }
.st-hud .st-sec[data-st="move"] { background: color-mix(in srgb, var(--butter) 45%, var(--card)); }
/* 9-10 labels (the core shows .hud-label in html.older): an 18 px pill 2 px under its pad's outer edge (the pad's 3 px
 * border plus 2), as js/hud.js lays them out; --lx shifts one sideways to stay on screen; Face and Move go without theirs
 * where they sit tight (data-bare) */
html.older .st-hud .hud-label { top: calc(100% + 5px); line-height: 18px; padding: 0 8px; transform: translateX(calc(-50% + var(--lx, 0px))); }
html.older .st-hud [data-bare] .hud-label { display: none; }
html.older .st-hud .st-measure { left: 0; top: 0; transform: none; visibility: hidden; }
.st-chip { position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) scale(.6); white-space: nowrap; padding: 4px 12px; border-radius: 999px;
  background: var(--card); border: 3px solid var(--ink); font-size: 15px; font-weight: 800; opacity: 0; pointer-events: none;
  transition: opacity 150ms ease-out, transform var(--t-pop) var(--spring); }
.st-chip.is-on { opacity: 1; transform: translateX(-50%) scale(1); }

/* The thing toolbar: a pill of three 60 px buttons over the selected thing */
.st-thingbar { position: absolute; left: 0; top: 0; width: 204px; height: 72px; box-sizing: border-box; display: flex; align-items: center; justify-content: space-between;
  padding: 0 3px; border-radius: 999px; background: var(--overlay-bg); border: 3px solid var(--ink); box-shadow: var(--shadow-lift); pointer-events: auto; }
.st-thingbar .st-btn { width: 60px; height: 60px; box-shadow: var(--press); }
.st-thingbar .st-pic { width: 34px; height: 34px; }

/* Two players (§2.8): the dashed divider, Back to one under Movie!, each half's portrait and its picker */
.st-divider { position: absolute; top: calc(var(--st-top) + 16px); 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; }
.st-back .st-pic { width: 40px; height: 40px; }
.st-badge { position: absolute; right: -4px; top: -4px; width: 24px; height: 24px; border-radius: 50%; background: var(--card); border: 2px solid var(--ink);
  display: grid; place-items: center; pointer-events: none; }
.st-badge .ico { width: 14px; height: 14px; stroke-width: 3; }
.st-half-por { overflow: visible; background: var(--card); }
.st-half-por .st-trait { right: -6px; bottom: -6px; }
.st-picker { position: absolute; display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: var(--overlay-bg); border: 3px solid var(--ink);
  box-shadow: var(--shadow-lift); pointer-events: auto; animation: st-hud-pop var(--t-pop) var(--spring) both; }
.st-picker .st-por { width: 64px; height: 64px; }

/* The rotate card (a portrait phone asked for two players): a turning phone, Back to one, the rotation-lock picture */
.st-rotate { position: fixed; left: 50%; top: 50%; width: 220px; height: 200px; margin: -100px 0 0 -110px; box-sizing: border-box; z-index: 2;
  display: grid; grid-template-columns: 96px 96px; justify-content: center; align-items: center; column-gap: 12px; padding: 12px;
  border-radius: var(--radius); background: var(--card); border: 3px solid var(--ink); box-shadow: var(--shadow-lift); pointer-events: auto;
  animation: st-hud-pop var(--t-pop) var(--spring) both; }
.st-rotate-phone { position: relative; width: 96px; height: 150px; display: grid; justify-items: center; align-content: center; gap: 4px; }
.st-rotate-pic { width: 96px; height: 96px; animation: st-hud-turn 1.6s ease-in-out infinite; }
@keyframes st-hud-turn { 0%, 20% { transform: rotate(0); } 50%, 80% { transform: rotate(90deg); } 100% { transform: rotate(0); } }
.st-rotlock { display: block; width: 40px; height: 40px; color: var(--muted); }
.st-rotlock .ico { width: 40px; height: 40px; }
.st-back-big { width: 96px; height: 96px; }
.st-back-big .st-pic { width: 56px; height: 56px; }
.st-back-big .st-badge { width: 32px; height: 32px; }
.st-back-big .st-badge .ico { width: 18px; height: 18px; }
/* the close sits on the card's top edge, centred: clear of the cast strip on the left and the right column (Plan) */
.st-rotate-close { position: absolute; left: 50%; top: -30px; margin-left: -30px; width: 60px; height: 60px; border-radius: 50%; border: 3px solid var(--ink); background: var(--card);
  box-shadow: var(--shadow); display: grid; place-items: center; color: var(--ink); cursor: pointer; }
.st-rotate-close .ico { width: 26px; height: 26px; }

/* ── Modes: the HUD shows in the play modes; in a film, the replay or the opener it fades (pads 24 px down) */
.st-hud[data-shown="0"] :is(.st-btn, .st-movie, .st-pad, .st-por, .st-thingbar, .st-divider, .st-picker):not(.st-key) { opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--t-micro) ease-out, transform var(--t-micro) ease-out, visibility 0s linear var(--t-micro); }
.st-hud[data-shown="0"] .st-pad { transform: translateY(24px); }
.st-hud[data-key="0"] .st-key { opacity: 0; visibility: hidden; pointer-events: none; }
/* dim to 50 % and inert in a planned take's count and take (§2.9.1); the second selector outranks the core's
   html.stage-on main.view :is(button, …) { pointer-events: auto } (issue ST8-2) */
.st-hud:is([data-mode="count"], [data-mode="take"]) :is(.st-movie, .st-beat),
html.stage-on main.view .st-hud:is([data-mode="count"], [data-mode="take"]) :is(.st-movie, .st-beat) { opacity: .5; pointer-events: none; }

/* A raised reveal level pops its controls in (scale .6 → 1, 450 ms spring, 80 ms stagger) */
.st-hud .is-pop { animation: st-hud-pop var(--t-pop) var(--spring) both; animation-delay: var(--pop-delay, 0ms); }
@keyframes st-hud-pop { from { transform: scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* ── UI glyphs over the set (§2.1; never recorded): placed every frame by the HUD from projected 3D points */
.st-glyphs { position: fixed; inset: 0; z-index: 5; overflow: hidden; pointer-events: none; }
.st-glyph { position: absolute; left: 0; top: 0; width: 0; height: 0; color: var(--card); }
.st-glyph > b { position: absolute; left: calc(var(--g) / -2); top: calc(var(--g) * -1); width: var(--g); height: var(--g); display: grid; place-items: center;
  filter: drop-shadow(0 2px 3px rgba(24, 22, 18, .45)); }
.st-glyph > b > img { width: 100%; height: 100%; object-fit: contain; }
.st-glyph > b > svg { width: 100%; height: 100%; }
.st-glyph.is-bob > b { animation: st-hud-bob 1.4s ease-in-out infinite; }
.st-glyph.is-rise > b { animation: st-hud-rise 2s ease-out infinite; }
.st-glyph.is-pulse > b { animation: st-hud-pulse .6s ease-in-out infinite alternate; }
.st-glyph.is-tap > b { animation: st-hud-tap .8s ease-in-out infinite; }
.st-glyph.is-slide > b { opacity: .7; }
@keyframes st-hud-rise { from { translate: 0 0; opacity: 1; } to { translate: 0 -12px; opacity: 0; } }
@keyframes st-hud-pulse { from { transform: scale(.92); } to { transform: scale(1.08); } }
@keyframes st-hud-tap { 0%, 100% { transform: scale(1); } 50% { transform: scale(.9); } }

/* ── Reduced motion (§2.0): no pulses, bobs or turns; springs become 150 ms fades */
@media (prefers-reduced-motion: reduce) {
  .st-hud :is(.st-btn, .st-movie, .st-pad, .st-por, .st-pic), .st-chip { transition: opacity var(--t-calm); }
  .st-movie[data-glow="pulse"]::after, .st-movie[data-glow="soft"]::after { animation: none; opacity: 1; }
  .st-add.is-glow, .st-por.is-ready, .st-rotate-pic, .st-glyph > b, .st-picker, .st-rotate { animation: none; }
  .st-hud .is-pop { animation: st-hud-fade var(--t-calm) ease-out both; }
  .st-key.is-wobble .st-pic, .st-beat.is-fired .st-pic, .st-beat.is-nope .st-cool, .st-beat.is-nope .st-pic { animation: none; }
}
@keyframes st-hud-fade { from { opacity: 0; } to { opacity: 1; } }