/* The dance check always uses Party Room typography, independently of the
   saved room preference. Camera and coloured limbs share their existing canvas. */
#body-camera-dock.calibrating {
  inset:0; width:auto; height:100dvh; max-height:none; z-index:180; border:0; border-radius:0;
  padding:clamp(20px,3vh,44px) max(4vw,calc((100vw - 2200px)/2));
  display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,1fr); grid-template-rows:auto minmax(0,1fr) auto auto;
  column-gap:clamp(28px,5vw,120px); row-gap:16px; overflow:auto; box-sizing:border-box;
  background:radial-gradient(ellipse at 75% 42%,#16323b 0,transparent 57%),#070f19; color:#eef6f4;
}
#body-camera-dock.calibrating .body-dock-heading { grid-column:1/-1; grid-row:1; padding:0; font-size:clamp(15px,1.8vh,26px); letter-spacing:.18em; }
#body-camera-dock.calibrating button { font:inherit; font-size:clamp(18px,2.2vh,32px); padding:12px 24px; min-height:52px; border:1px solid #b3d6d36e; border-radius:6px; background:#12242d; color:#eef6f4; cursor:pointer; }
#body-camera-dock.calibrating button:focus-visible { outline:3px solid #8de9e2; outline-offset:5px; }
#body-camera-dock.calibrating #body-calibrate-dock { display:none; }
#body-camera-dock.calibrating #gesture-preview { grid-column:2; grid-row:2; align-self:center; width:100%; border:1px solid #779aab55; border-radius:12px; overflow:hidden; }
#body-camera-dock.calibrating #gesture-camera { width:100%; height:clamp(240px,52vh,780px); max-height:none; object-fit:contain; display:block; }
#body-camera-dock.calibrating .gesture-preview-caption { font-size:clamp(14px,1.8vh,24px); padding:8px 12px; }
#body-camera-dock.calibrating #body-camera-status { grid-column:2; grid-row:3; font-size:clamp(20px,2.5vh,36px); line-height:1.35; padding:0; min-height:2.7em; }
#body-camera-dock.calibrating #body-retry { grid-column:2; grid-row:4; justify-self:start; margin:0; }
#body-calibration { grid-column:1; grid-row:2/5; min-width:0; align-self:center; padding:0; }
#body-calibration .dance-kicker { display:flex; justify-content:space-between; gap:20px; margin:0 0 16px; color:#9ee2d8; font-size:clamp(16px,2vh,28px); letter-spacing:.12em; text-transform:uppercase; }
#body-calibration-title { font-family:"Arial Narrow","Helvetica Neue",Arial,sans-serif; font-size:clamp(38px,6.3vh,108px); letter-spacing:-.045em; line-height:1; font-weight:900; margin:0 0 16px; text-wrap:balance; }
#body-calibration-detail { font-size:clamp(22px,3vh,42px); line-height:1.25; color:#cedee2; margin:0; min-height:2.5em; text-wrap:balance; }
.dance-demonstration { display:flex; align-items:center; gap:clamp(12px,2vw,42px); margin:clamp(12px,2vh,30px) 0; }
#body-calibration-demo { flex:0 0 34%; max-width:230px; }
#body-calibration-demo svg { display:block; width:100%; max-height:26vh; overflow:visible; }
.dance-head,.dance-torso { fill:#d5e9e6; }
.dance-legs { fill:none; stroke:#d5e9e6; stroke-width:20; stroke-linecap:round; stroke-linejoin:round; }
.dance-left,.dance-right { fill:none; stroke-width:15; stroke-linecap:round; stroke-linejoin:round; }
.dance-left { stroke:#f3b65d; } .dance-right { stroke:#68dded; }
.dance-start { animation:dance-start 2.8s ease-in-out infinite; }
.dance-finish { animation:dance-finish 2.8s ease-in-out infinite; }
@keyframes dance-start { 0%,30%,100% { opacity:1; } 55%,80% { opacity:.13; } }
@keyframes dance-finish { 0%,30%,100% { opacity:.12; } 55%,80% { opacity:1; } }
.dance-response { flex:1; min-width:0; }
#body-calibration-effect { font-size:clamp(22px,3vh,40px); font-weight:650; line-height:1.15; text-wrap:balance; margin:16px 0 10px; }
.dance-sandbox { display:block; color:#9ebbc5; font-size:clamp(14px,1.8vh,24px); line-height:1.3; }
#body-calibration-carousel { display:flex; justify-content:center; gap:8px; width:min(85%,260px); }
#body-calibration-carousel i { display:block; flex:1; aspect-ratio:1; border:1px solid #7facac70; border-radius:7px; background:linear-gradient(140deg,#24434b,#15202f); }
#body-calibration-carousel i:nth-child(2) { border-color:#b4e8dc; background:linear-gradient(140deg,#769f96,#204657); transform:scale(1.14); box-shadow:0 0 30px #85d6c520; }
#body-calibration-carousel[data-action=activate] i:nth-child(2) { background:linear-gradient(140deg,#b7dbc9,#3c7777); }
#body-calibration-hint { font-size:clamp(21px,2.6vh,36px); line-height:1.25; min-height:2.5em; margin:14px 0 12px; color:#eef6f4; }
#body-calibration[data-success=true] #body-calibration-hint { color:#a9eecf; }
#body-calibration-progress { display:block; width:100%; height:8px; border:0; accent-color:#a9eecf; }
#body-calibration-practice { display:flex; gap:14px; list-style:none; padding:0; margin:12px 0; }
#body-calibration-practice li { flex:1; text-align:center; font-size:clamp(18px,2.2vh,30px); color:#7898a8; border-bottom:2px solid #64849066; padding-bottom:5px; }
#body-calibration-practice li[data-done=true] { color:#b1efd6; border-color:#b1efd6; }
.dance-actions { display:flex; flex-wrap:wrap; gap:14px; margin-top:18px; }
#body-camera-dock.calibrating #body-calibration-use { background:#d3ece3; color:#0b2025; border-color:#d3ece3; }
#body-calibration .dance-note { font-size:clamp(12px,1.5vh,20px); line-height:1.35; color:#96b0bd; margin:14px 0 0; }
#body-calibration[hidden],#body-calibration-practice[hidden],#body-camera-dock.calibrating [hidden] { display:none!important; }
@media(max-width:900px) {
  #body-camera-dock.calibrating { padding:20px; grid-template-columns:1fr; grid-template-rows:auto auto auto auto auto; gap:16px; }
  #body-calibration { grid-column:1; grid-row:3; }
  #body-camera-dock.calibrating #gesture-preview { grid-column:1; grid-row:2; justify-self:center; max-width:420px; }
  #body-camera-dock.calibrating #gesture-camera { height:24vh; min-height:160px; }
  #body-camera-dock.calibrating #body-camera-status { grid-column:1; grid-row:4; }
  #body-camera-dock.calibrating #body-retry { grid-column:1; grid-row:5; }
  #body-calibration-title { font-size:clamp(38px,7vw,70px); }
}
@media(max-height:720px) and (min-width:901px) {
  #body-camera-dock.calibrating { padding-block:16px; row-gap:10px; }
  #body-calibration-title { font-size:40px; margin-bottom:10px; }
  #body-calibration-detail,#body-calibration-effect,#body-calibration-hint { font-size:22px; }
  #body-calibration-demo svg { max-height:140px; }
  .dance-demonstration { margin-block:10px; }
  #body-calibration .dance-kicker { margin-bottom:10px; }
}
@media(prefers-reduced-motion:reduce) { .dance-start,.dance-finish { animation:none; } .dance-finish { opacity:.3; } }