/* The in-chute play screen. A dark barn behind a camera viewfinder; HUD hugs the screen edges.
   Everything is sized in em off one font-size on #screen-play, so it scales 1280x720 -> 1920x1080.
   Owned by UI agent B. style.css rules that fight us are beaten by the #screen-play prefix. */

#screen-play.screen {
  --c-amber: var(--warn, #f2c14e); --c-pink: var(--wrap, #e95b93); --c-teal: var(--glue, #3cbcb3);
  --glass: linear-gradient(180deg, rgba(34, 28, 23, .82), rgba(15, 12, 10, .86));
  --edge: rgba(255, 232, 196, .12);
  position: relative; display: block; height: 100%; padding: 0; overflow: hidden; isolation: isolate;
  font-size: clamp(11px, min(2.1vh, 1.28vw), 22px); line-height: 1.35; background: #0b0907; color: var(--ink, #ece6da);
  user-select: none; -webkit-user-select: none;
}
#screen-play .muted { color: #a8a094 } #screen-play .small { font-size: .86em }

/* ---- the barn behind everything ---- */
#screen-play #pbg { position: absolute; inset: -3%; z-index: 0; background: url(img/barn-chute.jpg) center / cover no-repeat; filter: blur(6px) brightness(.62) saturate(1.05); }
#screen-play::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse 36% 50% at 50% 46%, rgba(255, 176, 90, .13), transparent 70%); }
#screen-play::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 46%, transparent 38%, rgba(4, 3, 2, .6) 100%), linear-gradient(rgba(0, 0, 0, .3), transparent 18%, transparent 66%, rgba(0, 0, 0, .55)); }

/* ---- stage + viewfinder ---- */
#screen-play #stage { position: absolute; left: 0; right: 0; top: 1.5em; bottom: 7.9em; z-index: 1; display: grid; place-items: center; min-width: 0; min-height: 0; }
#screen-play #canvases { position: relative; box-shadow: 0 1.6em 4.5em rgba(0, 0, 0, .65), 0 0 0 1px rgba(255, 255, 255, .06); border-radius: .35em; }
#screen-play #canvases canvas { border-radius: .35em }
#screen-play #canvases.pulse { animation: punch .3s ease-out }
#screen-play #canvases.pulse.big { animation: punch-big .38s ease-out }
@keyframes punch { 0% { scale: 1 } 28% { scale: 1.035 } 100% { scale: 1 } }
@keyframes punch-big { 0% { scale: 1 } 24% { scale: 1.07 } 100% { scale: 1 } }

#screen-play #vf { position: absolute; inset: 0; z-index: 3; pointer-events: none; font-family: var(--mono, ui-monospace, monospace); color: #fff; border-radius: .35em; overflow: visible }
#vf .vf-grid { position: absolute; inset: 0; border-radius: .35em; opacity: .9;
  background:
    linear-gradient(90deg, transparent 33.2%, rgba(255, 255, 255, .075) 33.3%, transparent 33.5%, transparent 66.5%, rgba(255, 255, 255, .075) 66.6%, transparent 66.8%),
    linear-gradient(0deg, transparent 33.2%, rgba(255, 255, 255, .075) 33.3%, transparent 33.5%, transparent 66.5%, rgba(255, 255, 255, .075) 66.6%, transparent 66.8%); }
#vf .vf-scan { position: absolute; inset: 0; border-radius: .35em; overflow: hidden; opacity: .55; mix-blend-mode: multiply;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .14) 0 1px, transparent 1px 3px); }
#vf .vf-scan::after { content: ""; position: absolute; left: 0; right: 0; height: 22%; top: -25%; background: linear-gradient(transparent, rgba(255, 255, 255, .06), transparent); animation: roll 7s linear infinite; mix-blend-mode: screen }
@keyframes roll { to { top: 110% } }
#vf .vf-vig { position: absolute; inset: 0; border-radius: .35em; background: radial-gradient(ellipse at center, transparent 54%, rgba(0, 0, 0, .46) 100%); }
#vf .br { position: absolute; width: 2.3em; height: 2.3em; border: 0 solid rgba(255, 255, 255, .9); filter: drop-shadow(0 0 .25em rgba(0, 0, 0, .7)); }
#vf .br.tl { left: -.75em; top: -.75em; border-left-width: .17em; border-top-width: .17em; border-top-left-radius: .45em }
#vf .br.tr { right: -.75em; top: -.75em; border-right-width: .17em; border-top-width: .17em; border-top-right-radius: .45em }
#vf .br.bl { left: -.75em; bottom: -.75em; border-left-width: .17em; border-bottom-width: .17em; border-bottom-left-radius: .45em }
#vf .br.br2 { right: -.75em; bottom: -.75em; border-right-width: .17em; border-bottom-width: .17em; border-bottom-right-radius: .45em }
#vf .vf-focus { position: absolute; left: 50%; top: 50%; width: 1.5em; height: 1.5em; margin: -.75em 0 0 -.75em; opacity: .28;
  background: linear-gradient(#fff, #fff) center / 100% 1px no-repeat, linear-gradient(#fff, #fff) center / 1px 100% no-repeat; }
#vf.snap .br { animation: brsnap .35s ease-out }
@keyframes brsnap { 0% { transform: scale(1.18); opacity: .4 } 100% { transform: none; opacity: 1 } }
#vf .vf-top, #vf .vf-bot { position: absolute; display: flex; align-items: center; gap: .55em; font-size: .78em; font-weight: 600; letter-spacing: .02em; text-shadow: 0 1px 3px rgba(0, 0, 0, .8) }
#vf .vf-top { top: 1em } #vf .vf-bot { bottom: 1em }
#vf .l { left: 1.2em } #vf .r { right: 1.2em }
#vf .vf-top > span, #vf .vf-bot > span { background: rgba(0, 0, 0, .46); padding: .22em .65em; border-radius: .35em; display: inline-flex; align-items: center; gap: .45em }
#screen-play #vf #rec { position: static; inset: auto; top: auto; left: auto; font: inherit; padding: .22em .65em .22em .55em; border-radius: .35em; background: rgba(0, 0, 0, .46); display: inline-flex; align-items: center; gap: .45em }
#vf #rec i { width: .8em; height: .8em; border-radius: 50%; background: var(--rec, #ff3b3b); box-shadow: 0 0 .7em var(--rec, #ff3b3b); animation: blink 1.2s steps(2) infinite }
#vf #rec b { font-weight: 700; letter-spacing: .1em }
#vf #rec.off i { background: #777; box-shadow: none; animation: none }
#vf #rec.off b { color: #aaa }
#vf .tc { font-variant-numeric: tabular-nums; min-width: 6.6em; justify-content: center }
#vf .fmt { font-size: .85em; opacity: .75; border: 1px solid rgba(255, 255, 255, .45); background: none !important; padding: 0 .4em !important; border-radius: .25em !important }
#vf .bat { width: 2.3em; height: 1.05em; border: .13em solid #fff; border-radius: .25em; padding: .1em !important; position: relative; background: none !important; display: block !important; box-sizing: content-box }
#vf .bat::after { content: ""; position: absolute; right: -.38em; top: .22em; width: .2em; height: .4em; background: #fff; border-radius: 0 .12em .12em 0 }
#vf .bat i { display: block; height: 100%; width: var(--p, 100%); background: #fff; border-radius: .08em }
#vf .bat.low { border-color: var(--rec, #ff3b3b); animation: blink 1s steps(2) infinite }
#vf .bat.low i { background: var(--rec, #ff3b3b) }
#vf .film { width: 1.5em; height: 1.05em; fill: none; stroke: #fff; stroke-width: 1.3 }
#vf #rec-n { font-variant-numeric: tabular-nums }
@keyframes blink { 50% { opacity: .2 } }

#vf #mic { position: absolute; left: 50%; top: .9em; transform: translate(-50%, -.6em); display: flex; align-items: center; gap: .6em; padding: .3em .9em .3em .7em; border-radius: 2em;
  background: rgba(20, 8, 8, .78); border: 1px solid rgba(255, 90, 90, .55); font-size: .78em; font-weight: 700; opacity: 0; transition: opacity .2s, transform .2s }
#vf #mic.on { opacity: 1; transform: translate(-50%, 0) }
#vf #mic svg { width: .9em; height: 1.3em; fill: none; stroke: #ff7a7a; stroke-width: 1.7; stroke-linecap: round }
#vf #mic .wave { display: flex; align-items: center; gap: .16em; height: 1.4em }
#vf #mic .wave i { width: .17em; height: 100%; border-radius: 2px; background: #ff7a7a; transform: scaleY(.25); animation: wv .42s ease-in-out infinite alternate }
#vf #mic .wave i:nth-child(2n) { animation-duration: .31s } #vf #mic .wave i:nth-child(3n) { animation-duration: .53s; animation-delay: -.2s }
#vf #mic .wave i:nth-child(odd) { animation-delay: -.11s }
@keyframes wv { to { transform: scaleY(1) } }

#screen-play #shutter { position: absolute; inset: 0; z-index: 4; background: #fff; opacity: 0; pointer-events: none; border-radius: .35em }
#screen-play #shutter.go { animation: shut .3s ease-out }
@keyframes shut { 0% { opacity: .9 } 100% { opacity: 0 } }
#screen-play #impact { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; --ic: 255, 220, 120;
  background: radial-gradient(ellipse at 50% 46%, transparent 26%, rgba(var(--ic), .8) 105%) }
#screen-play #impact.hit { animation: imp .38s ease-out }
#screen-play #impact.stone { --ic: 255, 255, 255 } #screen-play #impact.kick { --ic: 255, 70, 60 } #screen-play #impact.pus { --ic: 255, 214, 90 }
@keyframes imp { 0% { opacity: 1 } 100% { opacity: 0 } }

/* ---- floating text in the stage ---- */
#screen-play #sub { position: absolute; bottom: 3.3em; left: 50%; transform: translateX(-50%); max-width: min(38em, 78%); padding: .45em 1em; border-radius: .6em; text-align: center; z-index: 5;
  font-size: 1em; font-weight: 600; line-height: 1.3; background: rgba(8, 6, 5, .74); backdrop-filter: blur(4px); box-shadow: 0 .3em 1em rgba(0, 0, 0, .4); }
#screen-play #sub.cam { background: #fbf6ec; color: #1b1410; font-weight: 650; border-radius: 1em; box-shadow: 0 .4em 1.2em rgba(0, 0, 0, .5) }
#screen-play #sub.cam::before { content: "\201C"; font-size: 1.6em; line-height: 0; vertical-align: -.25em; color: #e95b93; margin-right: .1em }
#screen-play #heat-legend { position: absolute; top: 2.6em; left: 50%; transform: translateX(-50%); z-index: 5; display: flex; flex-wrap: nowrap; white-space: nowrap; justify-content: center; align-items: center; gap: .3em .8em; max-width: 98%; font-size: .72em; padding: .35em .9em; border-radius: .6em; line-height: 1.3; background: rgba(8, 6, 5, .82); box-shadow: 0 .3em 1em rgba(0, 0, 0, .4); pointer-events: none }
#screen-play #heat-legend[hidden] { display: none }
#screen-play #heat-legend b { color: #f2c14e }
#screen-play #heat-legend span { display: inline-flex; align-items: center; gap: .35em; white-space: nowrap }
#screen-play #heat-legend i { width: .9em; height: .9em; border-radius: .2em; display: inline-block }
#screen-play #heat-legend u { text-decoration: none; color: #b3a99a }
#screen-play #hud-keys.first-cow { display: none }
#screen-play #sub.cam::after { content: ""; position: absolute; left: 50%; bottom: -.5em; margin-left: -.5em; border: .5em solid transparent; border-top-color: #fbf6ec; border-bottom: 0 }
#screen-play #readout { position: absolute; z-index: 6; background: rgba(10, 8, 6, .92); border: 1px solid var(--edge); border-left: .22em solid var(--c-amber); padding: .5em .8em; border-radius: .5em; font-size: .88em; max-width: 16em; pointer-events: none; box-shadow: 0 .5em 1.2em rgba(0, 0, 0, .5) }
#screen-play #readout b { font-size: 1.35em; font-stretch: 75% }
#screen-play #toasts { position: absolute; top: 3.2em; left: 50%; transform: translateX(-50%); display: grid; gap: .45em; justify-items: center; z-index: 6; pointer-events: none }
#screen-play .toast { background: rgba(10, 8, 6, .9); border: 1px solid var(--edge); padding: .4em .95em; border-radius: 2em; font-size: .9em; backdrop-filter: blur(4px); animation: pop .32s cubic-bezier(.3, 1.5, .5, 1); transition: opacity .5s, transform .5s }
#screen-play .toast.gone { opacity: 0; transform: translateY(-.4em) }
#screen-play .toast.warn { border-color: var(--c-amber) }
#screen-play .toast.clip { border-color: rgba(255, 70, 70, .6); display: flex; align-items: center; gap: .55em }
#screen-play .toast.clip i { width: .6em; height: .6em; border-radius: 50%; background: var(--rec, #ff3b3b); box-shadow: 0 0 .6em var(--rec, #ff3b3b) }
@keyframes pop { 0% { transform: scale(.7) translateY(.6em); opacity: 0 } 100% { transform: none; opacity: 1 } }
#screen-play #found { position: absolute; z-index: 7; left: 50%; top: 30%; transform: translate(-50%, -50%); padding: .9em .9em .7em; border-radius: 1em; text-align: center; pointer-events: none;
  background: linear-gradient(180deg, #2a231c, #14100d); border: 1px solid rgba(242, 193, 78, .5); box-shadow: 0 0 0 .25em rgba(242, 193, 78, .12), 0 1.4em 3em rgba(0, 0, 0, .7); animation: found-in .45s cubic-bezier(.3, 1.4, .5, 1); transition: opacity .5s, transform .5s }
#screen-play #found.out { opacity: 0; transform: translate(-50%, -62%) }
#screen-play #found canvas { width: 17em; height: 11.3em; display: block; border-radius: .6em; background: radial-gradient(circle at 50% 45%, #5a5148, #231e19) }
#screen-play #found-text { margin-top: .5em; font-size: 1.4em; font-weight: 800; font-stretch: 75%; color: var(--c-amber) }
/* a find is named at the top of the frame, never on top of it; a drained lesion gets no drawing, the foot itself shows it */
#screen-play #found canvas { width: 12em; height: 8em; margin: 0 auto }
#screen-play #found.lean { top: 21%; padding: .55em 1.1em .6em }
#screen-play #found.lean canvas { display: none }
#screen-play #found.lean #found-text { margin-top: 0 }
@keyframes found-in { 0% { transform: translate(-50%, -50%) scale(.6) rotate(-4deg); opacity: 0 } 100% { transform: translate(-50%, -50%); opacity: 1 } }

/* ---- HUD: left (cow, job, keys) ---- */
#screen-play #hud-left, #screen-play #hud-right { position: absolute; top: 1.5em; bottom: 8.2em; z-index: 3; display: flex; flex-direction: column; gap: 1em; pointer-events: none; min-height: 0 }
#screen-play #hud-left { left: 1.5em; width: clamp(11em, calc((100vw - 100vh + 10.7em) / 2 - 3em), 17.5em) }
#screen-play #hud-right { right: 1.5em; width: clamp(11em, calc((100vw - 100vh + 10.7em) / 2 - 3em), 16.5em); align-items: stretch }
#screen-play #hud-left > *, #screen-play #hud-right > * { pointer-events: auto }
#screen-play .hd { display: flex; justify-content: space-between; align-items: baseline; font-size: .8em; font-weight: 700; color: #c9bfae; margin-bottom: .45em; letter-spacing: .03em }
#screen-play .hd b { font-family: var(--mono, monospace); color: var(--c-amber); font-weight: 600 }

#screen-play #hud-cow { display: grid; grid-template-columns: 5.6em 1fr; gap: .2em 1em; align-items: center; padding: .8em .9em .8em .8em; border-radius: 3.6em 1em 1em 3.6em; background: var(--glass); border: 1px solid var(--edge); box-shadow: 0 .6em 1.6em rgba(0, 0, 0, .5); }
#hud-cow .portrait { position: relative; width: 5.6em; height: 5.6em; margin: -.1em 0 }
#hud-cow .portrait img { position: absolute; inset: .45em; width: calc(100% - .9em); height: calc(100% - .9em); object-fit: cover; border-radius: 50%; display: block; background: #2a2420 }
#hud-cow .ring { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); overflow: visible }
#hud-cow .ring circle { fill: none; stroke-width: 6; stroke-linecap: round }
#hud-cow .ring .trk { stroke: rgba(255, 255, 255, .24) }
#hud-cow .ring .val { stroke: #5fb07a; stroke-dasharray: 282.74; stroke-dashoffset: 282.74; transition: stroke-dashoffset .4s, stroke .3s; filter: drop-shadow(0 0 .35em currentColor) }
#hud-cow .name { font-size: 1.45em; font-weight: 850; font-stretch: 68%; line-height: 1; letter-spacing: .005em }
#hud-cow .foot { font-size: .82em; color: #b9b0a2; margin-top: .15em }
#hud-cow .tellrow { margin-top: .35em; font-size: .8em; line-height: 1.25; display: grid }
#hud-cow .tellrow b { font-size: 1.1em; font-weight: 800; text-transform: capitalize }
#hud-cow .tellrow span { color: #b9b0a2 }
#hud-cow .quote { grid-column: 1 / -1; font-size: .8em; font-style: italic; color: #d9d0c0; border-top: 1px solid var(--edge); padding-top: .55em; margin-top: .3em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden }
#hud-cow .energy { grid-column: 1 / -1; display: grid; grid-template-columns: auto auto 1fr auto; align-items: center; gap: .5em; font-size: .78em; color: #b9b0a2; margin-top: .1em }
#hud-cow .energy b { color: var(--ink, #ece6da) }
#hud-cow .energy .meter { height: .5em; border-radius: .3em; background: rgba(255, 255, 255, .12); overflow: hidden; display: block }
#hud-cow .energy u { display: block; height: 100%; width: 100%; text-decoration: none; background: #7fd39a; transition: width .4s, background .3s }
#hud-cow .energy span:last-child { font-family: var(--mono, monospace) }

#screen-play #hud-obj { padding: .15em .2em .2em .5em; border-left: .22em solid rgba(242, 193, 78, .7); background: linear-gradient(90deg, rgba(10, 8, 6, .62), transparent); text-shadow: 0 1px 4px rgba(0, 0, 0, .9) }
#screen-play #checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .5em; font-size: .92em }
#screen-play #checklist li { position: relative; padding-left: 1.7em; line-height: 1.25; transition: color .3s }
#screen-play #checklist li::before { content: ""; position: absolute; left: 0; top: .08em; width: 1.05em; height: 1.05em; border: .13em solid rgba(255, 255, 255, .55); border-radius: .3em; background: rgba(0, 0, 0, .3); transition: background .25s, border-color .25s }
#screen-play #checklist li.ok { color: #9a9285; text-decoration: none }
#screen-play #checklist li.ok::before { background: var(--ok, #7fd39a); border-color: var(--ok, #7fd39a) }
#screen-play #checklist li.ok::after { content: ""; position: absolute; left: .34em; top: .2em; width: .35em; height: .6em; border: solid #0f1a13; border-width: 0 .14em .14em 0; transform: rotate(40deg) }
#screen-play #c-block { margin-top: .5em; color: var(--c-teal); font-family: var(--mono, monospace); font-size: .8em }
#screen-play #c-block:empty { display: none }
#screen-play #hint { position: relative; left: auto; top: auto; right: auto; bottom: auto; width: auto; transform: none; max-width: none; margin-top: .75em; padding: .45em .7em .5em 2em; border-radius: .5em; text-align: left; pointer-events: none; font-size: .82em; font-weight: 500; line-height: 1.3;
  background: rgba(242, 193, 78, .14); color: #f6e4b4; box-shadow: none }
#screen-play #hint::before { content: "?"; position: absolute; left: .55em; top: .45em; width: 1.1em; height: 1.1em; border-radius: 50%; background: var(--c-amber); color: #1b150b; font-weight: 800; font-size: .9em; display: grid; place-items: center; line-height: 1 }
#screen-play #hint:empty { display: none }

/* key glyphs (bottom of the left column) */
#screen-play #hud-keys { display: grid; grid-template-columns: 1fr 1fr; gap: .45em .6em; font-size: .72em; color: #b3a99a; text-shadow: 0 1px 3px #000; padding-left: .2em }
#hud-keys .kr { display: flex; align-items: center; gap: .3em; white-space: nowrap }
#hud-keys .kbd, #screen-play .kbd { font-family: var(--mono, monospace); font-size: .88em; line-height: 1.5; padding: 0 .5em; color: #efe6d6; background: linear-gradient(#3a332c, #26211c); border: 0; border-bottom: .17em solid #0b0907; border-radius: .32em; opacity: 1; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12) }
#hud-keys .mouse svg { width: .85em; height: 1.2em; display: block; fill: none; stroke: #d9cfbd; stroke-width: 1.4 }
#hud-keys .mouse .hl { fill: var(--c-amber); stroke: none }
#hud-keys .mouse.r .hl { fill: var(--c-pink) }
#hud-keys .cam-key { color: #ffb4b4 }
#hud-keys .cam-key[hidden] { display: none }

/* ---- HUD: right (clip reel, actions) ---- */
#screen-play #clips-panel { padding: .15em .5em .3em .2em; border-right: .22em solid rgba(255, 90, 90, .7); background: linear-gradient(270deg, rgba(10, 8, 6, .62), transparent); min-height: 0; overflow: hidden }
#clips-panel .hd { flex-direction: row-reverse; justify-content: flex-end; gap: .6em }
#screen-play .clips { display: grid; grid-template-columns: repeat(3, 1fr); gap: .5em .45em; margin: 0; padding: .1em .1em 0 }
#screen-play .clips .empty { grid-column: 1 / -1; color: #a8a094; font-size: .8em }
#screen-play .clipchip { position: relative; background: #f4efe4; padding: .2em .2em .15em; border-radius: .15em; border: 0; color: #2a211a; box-shadow: 0 .2em .5em rgba(0, 0, 0, .55); display: grid; gap: .15em; transform: rotate(var(--r, 0deg)); min-width: 0 }
#screen-play .clipchip:nth-child(3n+1) { --r: -2.2deg } #screen-play .clipchip:nth-child(3n+2) { --r: 1.4deg } #screen-play .clipchip:nth-child(3n) { --r: -.8deg }
#screen-play .clipchip canvas { width: 100%; height: auto; aspect-ratio: 16 / 9; display: block; background: #1d1a17 }
#screen-play .clipchip span { font-size: .6em; font-weight: 700; line-height: 1.1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-align: center; font-family: var(--mono, monospace) }
#screen-play .clipchip.said::after { content: ""; position: absolute; right: -.3em; top: -.3em; width: .85em; height: .85em; border-radius: 50%; background: var(--c-teal) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 22'%3E%3Crect x='5' y='1' width='6' height='12' rx='3' fill='%23062622'/%3E%3C/svg%3E") center / 40% no-repeat; box-shadow: 0 0 .5em var(--c-teal) }
#screen-play .clipchip.bad { box-shadow: 0 0 0 .14em var(--bad, #ff7a5a), 0 .2em .5em rgba(0, 0, 0, .55) }
#screen-play .clipchip.land { animation: land .4s ease-out }
@keyframes land { 0% { transform: rotate(var(--r, 0deg)) scale(1.35) } 100% { transform: rotate(var(--r, 0deg)) } }
.polaroid { position: fixed; z-index: 30; pointer-events: none; background: #f4efe4; padding: .5em .5em 1.4em; box-shadow: 0 .8em 2em rgba(0, 0, 0, .6); border-radius: .2em; width: 12em; transform-origin: center; will-change: transform, opacity }
.polaroid canvas { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #111 }

#screen-play #hud-btns { display: grid; gap: .45em; margin-top: auto }
#screen-play #hud-btns button, #screen-play #btn-release { font-family: inherit; cursor: pointer; border-radius: .7em; font-size: .9em; padding: .6em .9em; display: flex; justify-content: space-between; align-items: center; gap: .6em; text-align: left;
  background: var(--glass); border: 1px solid var(--edge); border-bottom-width: .22em; color: #ece6da; transition: transform .08s, filter .15s, border-color .15s, box-shadow .15s }
#screen-play #hud-btns button:hover { border-color: rgba(255, 232, 196, .35); transform: translateY(-1px) }
#screen-play #hud-btns button:active { transform: translateY(1px); border-bottom-width: .1em }
#screen-play #btn-heat.on { border-color: var(--c-teal); background: linear-gradient(180deg, rgba(60, 188, 179, .35), rgba(20, 70, 66, .6)); box-shadow: 0 0 1.2em rgba(60, 188, 179, .4) }
#screen-play #btn-release { font-size: 1.05em; font-weight: 800; justify-content: center; padding: .75em 1em; background: linear-gradient(180deg, #f27aa8, #e95b93); border-color: transparent; border-bottom: .28em solid #9d2b5c; color: #200d16; box-shadow: 0 .6em 1.4em rgba(233, 91, 147, .25) }
#screen-play #btn-release:hover { filter: brightness(1.08); transform: translateY(-1px) }
#screen-play #btn-release:active { transform: translateY(.14em); border-bottom-width: .12em }
#screen-play #btn-release .kbd { background: rgba(0, 0, 0, .18); color: #2d1020; border-bottom-color: rgba(0, 0, 0, .25); box-shadow: none }

/* ---- the tool belt ---- */
#screen-play #toolhelp { position: absolute; z-index: 4; left: 1.5em; bottom: .6em; --tc: #f2c14e; width: clamp(11em, calc((100vw - 51.5em) / 2 - 2.4em), 17em); padding: .6em .8em .7em; border-radius: .8em; font-size: .8em; line-height: 1.35; color: #d6cdbd;
  background: linear-gradient(180deg, rgba(34, 28, 23, .9), rgba(14, 11, 9, .92)); border: 1px solid var(--edge); border-left: .3em solid var(--tc); box-shadow: 0 .5em 1.4em rgba(0, 0, 0, .5); pointer-events: none }
#screen-play #toolhelp b { display: flex; justify-content: space-between; align-items: center; color: var(--tc); font-size: 1.35em; font-weight: 850; font-stretch: 72%; margin-bottom: .2em }
#screen-play #toolhelp b .kbd { font-stretch: 100%; font-weight: 600; font-size: .6em }
#screen-play #toolbar { position: absolute; z-index: 4; left: 50%; bottom: .5em; transform: translateX(-50%); display: flex; flex-wrap: nowrap; gap: .45em; justify-content: center; padding: .5em .7em .55em; max-width: 98vw;
  border-radius: 1.1em; background: linear-gradient(180deg, #33281f, #1d1611 60%, #15100c); border: 1px solid rgba(255, 220, 160, .14); box-shadow: 0 .8em 2em rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 230, 190, .1) }
#screen-play #toolbar::before { content: ""; position: absolute; inset: .28em; border: 1px dashed rgba(242, 193, 78, .2); border-radius: .85em; pointer-events: none }
#screen-play .tool { --c: #d6cdbd; position: relative; width: 4.6em; height: 4.6em; padding: 0; display: grid; place-items: center; border-radius: .8em; cursor: pointer; color: var(--c);
  background: linear-gradient(180deg, #17120e, #0f0c09); border: 1px solid rgba(255, 255, 255, .08); border-bottom: .2em solid #070504; box-shadow: inset 0 .15em .5em rgba(0, 0, 0, .55);
  transition: transform .14s cubic-bezier(.3, 1.6, .5, 1), box-shadow .14s, border-color .14s, background .14s }
#screen-play .tool[data-tool="grind"] { --c: #f2c14e } #screen-play .tool[data-tool="knife"] { --c: #bfd3de } #screen-play .tool[data-tool="tester"] { --c: #ff9a5c } #screen-play .tool[data-tool="thumb"] { --c: #f0c3a0 }
#screen-play .tool[data-tool="spray"] { --c: #7cc8f0 } #screen-play .tool[data-tool="nip"] { --c: #ff6f61 } #screen-play .tool[data-tool="pliers"] { --c: #c9c2e8 } #screen-play .tool[data-tool="block"] { --c: #3cbcb3 }
#screen-play .tool[data-tool="powder"] { --c: #ffffff } #screen-play .tool[data-tool="wrap"] { --c: #f06aa2 }
#screen-play .tool svg { width: 2.45em; height: 2.45em; margin-top: -.45em; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; opacity: .72; transition: opacity .14s, filter .14s }
#screen-play .tool svg .f { fill: currentColor; fill-opacity: .2; stroke: none }
#screen-play .tool svg .fs { fill: currentColor; fill-opacity: .2 }
#screen-play .tool em { position: absolute; top: .3em; left: .35em; font-style: normal; font-family: var(--mono, monospace); font-size: .72em; font-weight: 600; line-height: 1.4; min-width: 1.5em; text-align: center; border-radius: .3em; color: #d9d0c0; background: rgba(255, 255, 255, .09); opacity: .85 }
#screen-play .tool span { position: absolute; bottom: .38em; font-size: .7em; font-weight: 650; letter-spacing: .01em; opacity: .7; color: #e8dfcf }
#screen-play .tool:hover { transform: translateY(-.2em); border-color: color-mix(in srgb, var(--c) 55%, transparent); background: linear-gradient(180deg, #211a14, #130f0b) }
#screen-play .tool:hover svg { opacity: 1 }
#screen-play .tool.on { transform: translateY(-.6em) scale(1.07); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 24%, #1b140e), #130f0b); border-color: var(--c); border-bottom-color: color-mix(in srgb, var(--c) 55%, #000);
  box-shadow: 0 0 0 .13em color-mix(in srgb, var(--c) 40%, transparent), 0 .5em 1.8em color-mix(in srgb, var(--c) 45%, transparent), inset 0 0 1em color-mix(in srgb, var(--c) 18%, transparent) }
#screen-play .tool.on svg { opacity: 1; filter: drop-shadow(0 0 .35em var(--c)) }
#screen-play .tool.on span { opacity: 1; color: #fff }
#screen-play .tool.on em { background: var(--c); color: #16100a }
#screen-play .tool:active { transform: translateY(-.35em) scale(1.02) }
#screen-play .tool:focus-visible { outline: 2px solid var(--c-amber); outline-offset: 2px }

/* ---- pause + release dialogs ---- */
#screen-play .modal { position: absolute; inset: 0; z-index: 40; display: grid; place-items: center; padding: 1.5em; background: radial-gradient(ellipse at center, rgba(10, 7, 5, .55), rgba(4, 3, 2, .86)); backdrop-filter: blur(6px) saturate(.8); animation: fadein .2s ease-out }
@keyframes fadein { from { opacity: 0 } }
#screen-play .modal .card { position: relative; width: min(26em, 100%); padding: 1.5em 1.6em 1.3em; gap: .9em; border-radius: 1.2em; font-size: 1em; display: grid;
  background: linear-gradient(180deg, #2d241c, #18120d); border: 1px solid rgba(255, 220, 160, .16); box-shadow: 0 2em 5em rgba(0, 0, 0, .7), inset 0 1px 0 rgba(255, 230, 190, .12); animation: card-in .28s cubic-bezier(.3, 1.4, .5, 1) }
#screen-play .modal .card::before { content: ""; position: absolute; inset: .4em; border: 1px dashed rgba(242, 193, 78, .22); border-radius: .9em; pointer-events: none }
@keyframes card-in { from { transform: translateY(1em) scale(.94); opacity: 0 } }
#screen-play .modal .k { font-family: var(--mono, monospace); font-size: .72em; color: var(--c-amber); letter-spacing: .08em; text-transform: none }
#screen-play .modal h3 { margin: -.4em 0 0; font-size: 2.5em; font-weight: 850; font-stretch: 68%; line-height: 1 }
#screen-play .modal ul { margin: 0; padding: 0; list-style: none; display: grid; gap: .45em; font-size: .95em }
#screen-play .modal li { position: relative; padding-left: 1.5em; color: #e5dccb }
#screen-play .modal li::before { content: ""; position: absolute; left: .1em; top: .35em; width: .7em; height: .7em; border-radius: 50%; background: var(--c-amber) }
#screen-play .modal li.ok { color: var(--ok, #7fd39a); margin-left: 0 } #screen-play .modal li.ok::before { background: var(--ok, #7fd39a) }
#screen-play .modal .row-btns { display: flex; gap: .7em; justify-content: flex-end; flex-wrap: wrap; margin-top: .3em }
#screen-play .modal button { font-family: inherit; font-size: .95em; padding: .6em 1.1em; border-radius: .7em; cursor: pointer; color: #ece6da; background: linear-gradient(180deg, #3a3027, #261f19); border: 1px solid rgba(255, 255, 255, .12); border-bottom: .22em solid #0b0907; transition: transform .08s, filter .15s }
#screen-play .modal button:hover { filter: brightness(1.15) }
#screen-play .modal button:active { transform: translateY(.12em); border-bottom-width: .1em }
#screen-play .modal button.primary { background: linear-gradient(180deg, #f27aa8, #e95b93); color: #200d16; border-color: transparent; border-bottom: .22em solid #9d2b5c; font-weight: 800 }
#screen-play .modal .kbd { background: rgba(0, 0, 0, .2); color: inherit; border-bottom-color: rgba(0, 0, 0, .3); box-shadow: none; margin-left: .3em }

/* ---- narrower windows: the HUD slims down, then the keys go ---- */
@media (max-width: 1180px) {
  #screen-play #stage { bottom: 9.9em }
  #screen-play #hud-left, #screen-play #hud-right { bottom: 10.2em }
  #screen-play #toolhelp { left: 50%; transform: translateX(-50%); bottom: 7.2em; width: max-content; max-width: 94vw; text-align: center }
  #screen-play #toolhelp b { display: inline; margin-right: .4em; font-size: 1.1em }

  #screen-play #hud-cow { grid-template-columns: 4.6em 1fr; border-radius: 3em .8em .8em 3em }
  #hud-cow .portrait { width: 4.6em; height: 4.6em }
  #hud-cow .quote { display: none }
  #screen-play #hud-keys { grid-template-columns: 1fr }
  #screen-play #hud-keys .kr:nth-child(n+4) { display: none }
}
@media (max-width: 1000px) {
  body { overflow: hidden }
  #screen-play.screen { height: 100% }
  #screen-play #hud-keys, #screen-play #hud-btns { display: none }
  #screen-play .tool { width: 4em; height: 4.2em } #screen-play .tool svg { width: 2em; height: 2em } #screen-play .tool span { font-size: .62em }
  #screen-play #toolbar { gap: .3em; overflow-x: auto }
  #screen-play #stage { bottom: 9.4em }
  #screen-play #hud-left, #screen-play #hud-right { top: auto; bottom: 10em; width: 11em }
  #screen-play #hud-left { left: .6em } #screen-play #hud-right { right: .6em }
  #screen-play #hud-obj, #screen-play #clips-panel { display: none }
  #screen-play #toolhelp { bottom: 6.9em }
}
@media (prefers-reduced-motion: reduce) {
  #screen-play #vf .vf-scan::after { display: none }
  #screen-play #canvases.pulse, #screen-play #impact.hit, #screen-play #shutter.go { animation: none !important }
}