/* ─────────────────────────────────────────────────────────────────────────────
   THE CAST — Pivot (the walking A), Sprocket (the gear pup) and Sprocket's bolt.
   Owned by the cast agent. Everything is SVG built in js/cast/*; this file holds colours, hit areas,
   the speech bubble and the modes (gold, pixel, night, calm).
   ───────────────────────────────────────────────────────────────────────────── */

/* ── Pivot ───────────────────────────────────────────────────────────────── */
.stage > .pivot {
  position: absolute; left: 0; top: 0; width: 80px; height: 104px;
  transform-origin: 0 0; pointer-events: none; touch-action: none;
  outline: none; border-radius: 40px;
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
  --pv-steel: #D7E0EF; --pv-steel-2: #99A7C4; --pv-needle: #5A6684; --pv-bevel: rgba(13, 17, 32, .22);
  --pv-brass: #E6BC62; --pv-brass-2: #B58638; --pv-glint: #FFF1C9;
  --pv-plate: #252C47; --pv-plate-2: #39425F; --pv-dial: #C8A15A;
  --pv-eye: #FFC23D; --pv-eye-2: #FFF3DF; --pv-mouth: #FFD98A; --pv-mouth-in: #FF6B1A;
  --pv-hand: #E6BC62; --pv-outline: #0D1120;
}
.stage > .pivot:focus-visible { outline: 3px solid var(--steam); outline-offset: 6px; }
.stage > .pivot[hidden] { display: none; }
.pv-svg { position: absolute; left: -70px; top: -76px; width: 220px; height: 220px; max-width: none; max-height: none; overflow: visible; pointer-events: none; touch-action: none; }
.pv-hit { pointer-events: all; fill: transparent; stroke: transparent; stroke-width: 12; stroke-linejoin: round; cursor: grab; touch-action: none; }
.pivot.is-drag .pv-hit { cursor: grabbing; }
.pivot.is-fadein { animation: pv-fade .45s var(--ease-out, ease-out) both; }
@keyframes pv-fade { from { opacity: 0; } to { opacity: 1; } }

.pivot .o, .pivot .o1 { stroke: var(--pv-outline); stroke-linejoin: round; stroke-linecap: round; paint-order: stroke; }
.pivot .o { stroke-width: 5.6px; }
.pivot .o1 { stroke-width: 2.8px; }
.pivot .ob > *, .pivot .ob1 > * { fill: var(--pv-outline); stroke: var(--pv-outline); stroke-linejoin: round; stroke-linecap: round; }
.pivot .ob > * { stroke-width: 5.6px; }
.pivot .ob1 > * { stroke-width: 3.4px; }
.pivot .ob-px { fill: var(--pv-outline); stroke: var(--pv-outline); stroke-width: 4.4px; stroke-linejoin: miter; }

.pv-shadow { fill: rgba(8, 10, 22, .28); }
.pv-steel { fill: var(--pv-steel); }
.pv-steel-2 { fill: var(--pv-steel-2); }
.pv-needle { fill: var(--pv-needle); }
.pv-bevel { stroke: var(--pv-bevel); stroke-width: .9px; fill: none; stroke-linecap: round; }
.pv-brass { fill: var(--pv-brass); }
.pv-brass-2 { fill: var(--pv-brass-2); }
.pv-glint { fill: none; stroke: var(--pv-glint); stroke-width: 2.2px; stroke-linecap: round; opacity: .85; }
.pv-plate { fill: var(--pv-plate); stroke: var(--pv-outline); stroke-width: 2.4px; }
.pv-plate-back { fill: var(--pv-plate-2); stroke: var(--pv-outline); stroke-width: 2.4px; }
.pv-back-x { stroke: var(--pv-dial); stroke-width: 1.6px; stroke-linecap: round; opacity: .7; }
.pv-dial { fill: none; stroke: var(--pv-dial); stroke-width: .8px; opacity: .35; }
.pv-ticks { stroke: var(--pv-dial); stroke-width: 1.1px; stroke-linecap: round; opacity: .55; }
.pv-knob-o { fill: none; stroke: var(--pv-outline); stroke-width: 5.4px; stroke-linecap: round; }
.pv-knob-f { fill: none; stroke: var(--pv-brass); stroke-width: 2.4px; stroke-linecap: round; }
.pivot.has-hat .pv-knob { display: none; }
.pv-arm-o { stroke: var(--pv-outline); stroke-width: 7.4px; stroke-linecap: round; fill: none; }
.pv-arm-f { stroke: var(--pv-steel); stroke-width: 3.6px; stroke-linecap: round; fill: none; }
.pv-hand { fill: var(--pv-hand); }

/* the face: one glowing compass-star eye, a little furnace-glow mouth */
.pv-star { stroke: #9A4E08; stroke-width: .8px; stroke-linejoin: round; }
.pv-pupil { fill: var(--pv-eye-2); }
.pv-eye-glow { transition: opacity .12s; }
.pv-eye > * { display: none; }
.pv-eye-ring { fill: none; stroke: var(--pv-eye-2); stroke-width: 1.3px; opacity: .8; }
.pv-eye-happy, .pv-eye-closed { fill: none; stroke: var(--pv-eye); stroke-width: 2.8px; stroke-linecap: round; }
.pv-eye-spiral { fill: none; stroke: var(--pv-eye); stroke-width: 1.6px; stroke-linecap: round; }
.pv-eye-heart { fill: #FF5ACD; stroke: var(--pv-outline); stroke-width: 1.1px; stroke-linejoin: round; }
.pv-eye-sad { stroke: #9A4E08; stroke-width: .8px; opacity: .75; }
.pivot[data-eye="star"] .pv-eye-star,
.pivot[data-eye="ring"] .pv-eye-star, .pivot[data-eye="ring"] .pv-eye-ring,
.pivot[data-eye="happy"] .pv-eye-happy,
.pivot[data-eye="closed"] .pv-eye-closed,
.pivot[data-eye="spiral"] .pv-eye-spiral,
.pivot[data-eye="heart"] .pv-eye-heart,
.pivot[data-eye="sad"] .pv-eye-sad { display: inline; }
.pivot:not([data-eye="star"]):not([data-eye="ring"]) .pv-eye-glow { opacity: .45; }
.pivot[data-eye="closed"] .pv-eye-glow, .pivot[data-eye="spiral"] .pv-eye-glow { opacity: .2 !important; }
.pv-tear { fill: var(--steam); stroke: var(--pv-outline); stroke-width: .8px; display: none; }
.pivot[data-eye="sad"] .pv-tear { display: inline; }
.pv-mouth { fill: none; stroke: var(--pv-mouth); stroke-width: 1.7px; stroke-linecap: round; stroke-linejoin: round; }
.pv-mouth.is-open { fill: var(--pv-mouth-in); stroke-width: 1.3px; }
.pv-cheeks { fill: #FF6FA8; transition: opacity .25s; }
.pv-back { display: none; }
.pivot.is-back .pv-back { display: inline; }
.pivot.is-back .pv-face { display: none; }
.pv-stars { display: none; }
.pivot.is-dizzy .pv-stars { display: inline; }
.pv-dstar { fill: var(--molten); stroke: var(--pv-outline); stroke-width: 1px; stroke-linejoin: round; }

/* night: a candle and its warm glow */
.pv-candle, .pv-candle-glow { display: none; }
.pivot.has-candle .pv-candle, .pivot.has-candle .pv-candle-glow { display: inline; }
.pv-candle-glow { mix-blend-mode: screen; }

/* the Full Jar reward: solid gold */
.pivot.is-gold {
  --pv-steel: #FFE184; --pv-steel-2: #E0A43A; --pv-needle: #A86A14; --pv-bevel: rgba(120, 60, 0, .3);
  --pv-brass: #FFF0B8; --pv-brass-2: #E9B64E; --pv-hand: #FFF0B8; --pv-plate: #3A2A10; --pv-plate-2: #5A3C00;
}

/* 8-bit mode (the pixel filter itself is set in JS) */
html.pixel .pv-svg, html.pixel .sp-svg, html.pixel .sp-bolt svg { image-rendering: pixelated; }

/* ── the speech bubble ───────────────────────────────────────────────────── */
.stage > .pv-bubble { position: absolute; left: 0; top: 0; pointer-events: none; z-index: 2; --tail: 50%; }
.pv-bubble[hidden] { display: none; }
.pv-bubble-in {
  position: relative; width: max-content; max-width: min(240px, 70vw);
  padding: .42em .8em .46em; border-radius: 16px;
  background: var(--cream); color: var(--outline); border: 3px solid var(--outline);
  font: 700 .98rem/1.2 var(--font-display); letter-spacing: .01em; text-align: center;
  box-shadow: 0 4px 0 rgba(13, 17, 32, .35);
  transform-origin: var(--tail) 110%; animation: pv-pop .38s var(--spring) both;
}
.pv-bubble-in::after, .pv-bubble-in::before {
  content: ''; position: absolute; left: var(--tail); top: 100%; width: 0; height: 0;
  border: 9px solid transparent; border-top-color: var(--outline); transform: translateX(-50%);
}
.pv-bubble-in::after { border-width: 6px; border-top-color: var(--cream); margin-top: -1px; }
.pv-bubble.is-below .pv-bubble-in { transform-origin: var(--tail) -10%; }
.pv-bubble.is-below .pv-bubble-in::after, .pv-bubble.is-below .pv-bubble-in::before { top: auto; bottom: 100%; border-top-color: transparent; border-bottom-color: var(--outline); }
.pv-bubble.is-below .pv-bubble-in::after { border-bottom-color: var(--cream); margin: 0 0 -1px; }
.pv-bubble.is-alert .pv-bubble-in { background: var(--molten); font-size: 1.6rem; line-height: 1; padding: .12em .5em .16em; }
.pv-bubble.is-alert .pv-bubble-in::after { border-top-color: var(--molten); }
.pv-bubble.is-alert.is-below .pv-bubble-in::after { border-top-color: transparent; border-bottom-color: var(--molten); }
.pv-bubble.is-out .pv-bubble-in { animation: pv-unpop .22s var(--ease-out) both; }
@keyframes pv-pop { 0% { transform: scale(.3) rotate(-6deg); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes pv-unpop { to { transform: scale(.6) translateY(6px); opacity: 0; } }
html.calm .pv-bubble-in { animation-duration: .15s; animation-name: pv-fade; }
html.calm .pv-bubble.is-out .pv-bubble-in { animation: pv-unpop .15s linear both; }

/* ── Sprocket ────────────────────────────────────────────────────────────── */
.stage > .sprocket {
  position: absolute; left: 0; top: 0; width: 44px; height: 44px; transform-origin: 0 0;
  pointer-events: none; touch-action: none; outline: none; border-radius: 22px;
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
  --sp-copper: #E08A55; --sp-copper-2: #B4602F; --sp-copper-3: #F3B083; --sp-steel: #56627F; --sp-steel-2: #3A4460;
}
.stage > .sprocket[hidden] { display: none; }
.sp-svg { position: absolute; left: -38px; top: -41px; width: 120px; height: 120px; max-width: none; max-height: none; overflow: visible; pointer-events: none; }
.sp-hit { pointer-events: all; fill: transparent; cursor: pointer; touch-action: none; }
.sprocket .o, .sprocket .o1 { stroke: var(--outline); stroke-linejoin: round; stroke-linecap: round; paint-order: stroke; }
.sprocket .o { stroke-width: 5px; }
.sprocket .o1 { stroke-width: 2.8px; }
.sp-shadow { fill: rgba(8, 10, 22, .26); }
.sp-copper { fill: var(--sp-copper); }
.sp-copper-2 { fill: var(--sp-copper-2); }
.sp-copper-3 { fill: var(--sp-copper-3); }
.sp-leg { fill: var(--sp-steel); }
.sp-leg-far { fill: var(--sp-steel-2); }
.sp-eye { fill: var(--outline); }
.sp-glint { fill: #fff; }
.sp-nose { fill: var(--outline); }
.sp-tongue { fill: #FF6F9F; stroke: var(--outline); stroke-width: 1px; }
.sp-mouth { fill: none; stroke: var(--outline); stroke-width: 1.3px; stroke-linecap: round; }
.sp-tail-o { fill: none; stroke: var(--outline); stroke-width: 4.6px; stroke-linecap: round; stroke-linejoin: round; }
.sp-tail-f { fill: none; stroke: #9DAAC6; stroke-width: 2px; stroke-linecap: round; stroke-linejoin: round; }
.sp-eyes-shut, .sp-eyes-spiral, .sp-eyes-happy { display: none; }
.sprocket[data-eyes="shut"] .sp-eyes-open, .sprocket[data-eyes="spiral"] .sp-eyes-open, .sprocket[data-eyes="happy"] .sp-eyes-open { display: none; }
.sprocket[data-eyes="shut"] .sp-eyes-shut, .sprocket[data-eyes="spiral"] .sp-eyes-spiral, .sprocket[data-eyes="happy"] .sp-eyes-happy { display: inline; }
.sp-eyes-shut path, .sp-eyes-happy path { fill: none; stroke: var(--outline); stroke-width: 1.5px; stroke-linecap: round; }
.sp-eyes-spiral path { fill: none; stroke: var(--outline); stroke-width: 1.1px; }
.sp-tongue { display: none; }
.sprocket.is-panting .sp-tongue { display: inline; }
.sp-stars { display: none; }
.sprocket.is-dizzy .sp-stars { display: inline; }
.sprocket .pv-dstar { fill: var(--molten); stroke: var(--outline); stroke-width: 1px; }
.sprocket.is-gold { --sp-copper: #FFD76A; --sp-copper-2: #D9A035; --sp-copper-3: #FFF0B8; }

/* the bolt */
.stage > .sp-bolt {
  position: absolute; left: 0; top: 0; width: 38px; height: 26px; margin: 0; padding: 0; border: 0; background: none;
  transform-origin: 50% 50%; cursor: grab; touch-action: none; border-radius: 10px; outline: none;
  -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
}
.stage > .sp-bolt:focus-visible { outline: 3px solid var(--steam); outline-offset: 2px; }
.stage > .sp-bolt.is-drag { cursor: grabbing; }
.stage > .sp-bolt.is-carried { pointer-events: none; }
.stage > .sp-bolt[hidden] { display: none; }
.sp-bolt svg { position: absolute; left: 0; top: 0; width: 38px; height: 26px; max-width: none; overflow: visible; pointer-events: none; }

/* print: the cast stays out of the coloring page */
@media print { .pivot, .sprocket, .sp-bolt, .pv-bubble { display: none !important; } }