/* The compact turn HUD keeps the dancers visible, including on small phones. */
.freestyle{position:absolute;z-index:12;left:50%;top:76px;transform:translateX(-50%);width:min(550px,calc(100vw - 24px));padding:12px 14px;background:#101722e8;border:1px solid #b9ff7a88;border-radius:16px;color:#fff;box-shadow:0 12px 36px #0008}
.freestyle.hidden{display:none}.freestyle-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.freestyle-head h2{font-size:18px;margin:2px 0}.freestyle-head small{font-size:11px;color:#b9ff7a}.freestyle-stats{display:flex;gap:12px;font-size:12px}.freestyle-stats b{font-size:19px;color:#d4ff89}.freestyle-prompt{margin:7px 0;font-size:13px;min-height:18px}.freestyle-meter{height:5px;background:#35404a;border-radius:9px;overflow:hidden}.freestyle-meter i{display:block;height:100%;width:0;background:linear-gradient(90deg,#b9ff7a,#d6a2ff)}.freestyle-wheel{position:absolute;z-index:12;left:50%;bottom:calc(12px + env(safe-area-inset-bottom));transform:translateX(-50%);width:min(670px,calc(100vw - 18px));padding:10px;background:#101722ed;border:1px solid #b9ff7a88;border-radius:18px;color:#fff}.freestyle-wheel.hidden{display:none}.freestyle-categories{display:flex;gap:5px;overflow-x:auto;scrollbar-width:none}.freestyle-categories button{flex:none;border-radius:16px;padding:7px 9px;background:#263442;color:#fff;font-size:10px;border:1px solid #4b5960}.freestyle-categories button.selected{background:#b9ff7a;color:#18222a}.freestyle-choices{display:flex;gap:7px;overflow-x:auto;scrollbar-width:thin;margin-top:8px}.freestyle-choices button{flex:1 0 auto;min-width:95px;min-height:52px;border-radius:12px;background:#334154;color:#fff;border:1px solid #8ba4a2;font-size:12px}.freestyle-choices button:disabled{opacity:.4}.freestyle-choices button:active{transform:scale(.96)}.freestyle-hint{font-size:10px;color:#b6c9c3;margin-top:6px}.freestyle-feedback{font-weight:bold;color:#d4ff89;min-height:17px;font-size:12px}
@media(max-width:700px){.freestyle{top:calc(65px + env(safe-area-inset-top));padding:8px 10px}.freestyle-head h2{font-size:14px}.freestyle-prompt{font-size:11px;margin:4px 0}.freestyle-wheel{padding:7px}.freestyle-categories button{min-height:44px}.freestyle-choices button{min-height:48px}.freestyle-hint{display:none}}
@media(max-height:550px) and (orientation:landscape){.freestyle{left:9px;top:62px;transform:none;width:min(34vw,290px)}.freestyle-wheel{left:auto;right:9px;bottom:8px;transform:none;width:min(47vw,420px)}}

#freestyleBeat{display:inline-block;min-width:24px;text-align:center;color:#c0c6ce}#freestyleBeat.on-beat{color:#18222a;background:#b9ff7a;border-radius:5px}.freestyle-stats{gap:8px}.freestyle-categories button{min-height:44px}
@media(max-width:430px){.freestyle-head{gap:6px}.freestyle-stats{font-size:9px;gap:6px}.freestyle-head h2{font-size:12px}.freestyle-stats b{font-size:16px}}

@media(max-height:550px) and (orientation:landscape){.freestyle-head{display:block}.freestyle-head h2{font-size:13px;margin:3px 0}.freestyle-stats{justify-content:space-between;margin-top:5px;font-size:9px}.freestyle-stats b{font-size:16px}.freestyle-prompt{font-size:11px}.freestyle-hint{display:none}}

.mirror-cast{position:absolute;inset:0;pointer-events:none;z-index:11}.mirror-cast span{position:absolute;transform:translate(-50%,-100%);padding:5px 8px;border-radius:8px;background:#142536e8;color:#c7ced8;font-size:10px;line-height:1.4;text-align:center;white-space:pre-line;min-width:82px;border:1px solid #536a77}.mirror-cast .performing{border-color:#c2f582;color:#d5ff9f}#mirrorOpponentLabel.performing{border-color:#d9b0f5;color:#e7cbff}

.mirror-tools{display:flex;gap:8px;margin:4px 0}.mirror-tools button{flex:1;min-height:44px;border:1px solid #79918c;border-radius:9px;font-size:11px;background:#20313f;color:#e5eeda}.mirror-tools button:disabled{opacity:.4}

.mirror-steps{display:flex;gap:4px;margin:7px 0;font-size:10px}.mirror-steps span{flex:1;text-align:center;border-radius:5px;padding:4px;background:#273442;color:#aebbc2}.mirror-steps .active{background:#c8ef89;color:#19292b;font-weight:bold}.mirror-guide{font-size:11px;line-height:1.4;color:#d2dbdf;margin:5px 0}
.freestyle-wheel{display:flex;flex-direction:column;max-height:48dvh}.freestyle-choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow-y:auto;overflow-x:hidden;min-height:0;max-height:170px}.freestyle-choices button{white-space:pre-line;text-align:left;padding:8px;min-width:0;min-height:76px;font-size:11px;line-height:1.35}.mirror-plan{display:flex;gap:4px;font-size:10px;margin-bottom:5px}.mirror-plan span{flex:1;min-width:0;padding:7px 4px;background:#2b3d4d;border-radius:7px;color:#fff;overflow:hidden}.mirror-plan .correct{background:#385d37}.mirror-plan .wrong{background:#793f4c}.mirror-actions{display:flex;gap:5px;margin:4px 0}.mirror-actions button{flex:1;min-height:44px;font-size:10px;border:1px solid #8eaa92;background:#293d4c;color:white;border-radius:8px}.mirror-actions #mirrorPerform{background:#c8ef89;color:#1a292b;font-weight:bold}.mirror-actions button:disabled{opacity:.35}
.freestyle-wheel.performing .freestyle-choices,.freestyle-wheel.performing .freestyle-categories,.freestyle-wheel.performing .mirror-actions,.freestyle-wheel.performing .mirror-tools{display:none}.freestyle-wheel.previewing .freestyle-choices,.freestyle-wheel.previewing .freestyle-categories,.freestyle-wheel.previewing .mirror-plan,.freestyle-wheel.previewing .mirror-tools,.freestyle-wheel.previewing #mirrorReplay,.freestyle-wheel.previewing #mirrorPerform{display:none}
@media(max-height:550px) and (orientation:landscape){.freestyle-wheel{max-height:72dvh;width:min(47vw,440px)}.freestyle-choices{max-height:100px}.freestyle-choices button{min-height:60px}.mirror-guide{font-size:10px}}

.freestyle.previewing .freestyle-feedback{display:none}

.freestyle-wheel>.freestyle-categories,.freestyle-wheel>.mirror-plan,.freestyle-wheel>.mirror-actions,.freestyle-wheel>.mirror-tools,.freestyle-wheel>.freestyle-hint{flex-shrink:0}
.freestyle-choices{flex-shrink:1}

.freestyle-wheel.watching-ready .freestyle-choices,.freestyle-wheel.watching-ready .freestyle-categories,.freestyle-wheel.watching-ready .mirror-plan,.freestyle-wheel.watching-ready .mirror-tools,.freestyle-wheel.watching-ready #mirrorPractice,.freestyle-wheel.watching-ready #mirrorReplay,.freestyle-wheel.watching-ready #mirrorPerform{display:none}#mirrorWatch{background:#c8ef89;color:#162b29;font-weight:bold}.mirror-actions button.hidden{display:none}

/* Longer battle sequences keep readable names and wrap on narrow screens. */
.mirror-plan{display:grid;grid-template-columns:repeat(auto-fit,minmax(100px,1fr))}.mirror-plan .hidden{display:none}

@media(max-height:550px) and (orientation:landscape){.freestyle-wheel{max-height:calc(100dvh - 68px)}.freestyle-hint{display:none}}