/* Freeze Dance: a dancing figure is the tap target; it freezes mid-move and the screen frosts over when the music stops. */
:root {
  --accent: var(--disco);
  --ice-soft: #d8f1fb;
  --ice-ink: #167aa8;
  --figure: var(--fg);
  --pill-line: var(--disco);
  --pill-on: #d12b6e;
  --pill-on-fg: #fff;
  --pill-focus: var(--ice);
}
@media (prefers-color-scheme: dark) {
  :root { --ice-soft: #10304a; --ice-ink: var(--ice); --pill-on: var(--disco); --pill-on-fg: #121a2c; }
}
body.frozen { background: var(--ice-soft); }
.frozen h1 { color: var(--ice); }
.frozen .status { color: var(--ice); font-size: 2.3rem; letter-spacing: 1px; }

.dancer-btn {
  position: relative; border: 0; background: none; padding: 0; cursor: pointer;
  width: min(56vw, 230px); aspect-ratio: 1; max-width: 100%; border-radius: 24px;
}
.dancer-btn:focus-visible { outline: 4px solid var(--disco); outline-offset: 6px; }
.dancer-btn svg { width: 100%; height: 100%; display: block; overflow: visible; }
.limb { stroke: var(--figure); stroke-width: 12; stroke-linecap: round; fill: none; }
.head { fill: var(--figure); }
.floor { fill: var(--disco); opacity: .18; transition: fill .3s, opacity .3s; }
.frozen .floor { fill: var(--ice); opacity: .3; }
.part { transform-box: view-box; }
.body-g { transform-origin: 100px 190px; }
.arm-l  { transform-origin: 100px 82px; }
.arm-r  { transform-origin: 100px 82px; }
.leg-l  { transform-origin: 100px 128px; }
.leg-r  { transform-origin: 100px 128px; }
.dancing .body-g { animation: bounce .5s ease-in-out infinite alternate; }
.dancing .arm-l  { animation: armL .5s ease-in-out infinite alternate; }
.dancing .arm-r  { animation: armR .75s ease-in-out infinite alternate; }
.dancing .leg-l  { animation: legL 1s ease-in-out infinite alternate; }
.dancing .leg-r  { animation: legR .5s ease-in-out infinite alternate; }
.frozen .part, .frozen .body-g { animation-play-state: paused; }
@keyframes bounce { from { transform: translateY(0) rotate(-6deg); } to { transform: translateY(-10px) rotate(6deg); } }
@keyframes armL { from { transform: rotate(-70deg); } to { transform: rotate(50deg); } }
@keyframes armR { from { transform: rotate(60deg); } to { transform: rotate(-80deg); } }
@keyframes legL { from { transform: rotate(-18deg); } to { transform: rotate(14deg); } }
@keyframes legR { from { transform: rotate(16deg); } to { transform: rotate(-20deg); } }
.frost { opacity: 0; transition: opacity .25s; }
.frozen .frost { opacity: 1; }

.pose {
  width: 100%; background: var(--card); border: 3px dashed var(--ice); border-radius: 18px;
  padding: 16px; display: flex; flex-direction: column; gap: 6px; align-items: center;
}
.pose .label { font-size: .75rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--ice-ink); }
.pose p { margin: 0; font-family: var(--display); font-size: 1.6rem; line-height: 1.15; text-wrap: balance; }

.count { font-family: var(--display); font-size: 1.1rem; color: var(--muted); min-height: 1.4em; margin: -6px 0 0; font-variant-numeric: tabular-nums; }
.dancing .main-btn, .frozen .main-btn { background: var(--muted); }
@media (prefers-reduced-motion: reduce) {
  .dancing .part, .dancing .body-g { animation: none; }
}