/* Scoped changes: calibration, discoverable motion control, and the race finale. */
#motion-panel{max-width:640px;margin-inline:auto}
#motion-demo{perspective:500px}
#motion-demo svg{width:180px;height:95px;overflow:visible}
#motion-phone{transform-origin:90px 48px;transition:transform .1s}
#motion-panel[data-step="learn-right"] #motion-phone{animation:teach-right 1.8s ease-in-out infinite}
#motion-panel[data-step="learn-up"] #motion-phone{animation:teach-pull 1.8s ease-in-out infinite}
#motion-panel[data-step="learn-up"] #motion-demo svg{transform:perspective(300px) rotateX(25deg)}
#motion-panel #motion-state{font-size:clamp(17px,3vw,23px);line-height:1.4;font-weight:800;color:#482365;min-height:3em}
#motion-panel #motion-calibrate{background:#7040ab!important;color:#fff!important;border:0;border-radius:16px;min-height:54px;width:100%;padding:12px 20px;line-height:1.3}
#motion-diagnostic{color:#582778;font-size:15px;min-height:1.5em}
#motion-panel .control-choice{display:flex;gap:8px;flex-wrap:wrap}
#motion-panel .control-choice button{flex:1;min-height:48px;min-width:135px;white-space:normal}
.motion-promo{display:flex;align-items:center;gap:10px;text-align:left!important;background:#f0e6fb!important;color:#4a276c!important;padding:10px 14px!important;border:1px solid #dac5eb!important;border-radius:16px;max-width:100%;min-height:48px}
.motion-promo svg{width:32px;height:38px;flex:none;fill:none;stroke:currentColor;stroke-width:2}
.motion-promo span{font-size:13px;line-height:1.3}.motion-promo b{display:block;font-size:15px}
#garage-motion.motion-promo{display:flex}
#garage-top #garage-motion{width:230px!important;flex:0 0 230px;padding:10px 14px!important}
#garage-top #garage-motion span{font-size:12px!important;line-height:1.3!important;white-space:normal}
#garage-top #garage-motion b{font-size:14px!important;line-height:1.3}
#garage-top #garage-motion svg{flex:0 0 30px}
#result-dialog{width:min(900px,calc(100vw - 24px))!important;max-width:900px!important;max-height:calc(100dvh - 24px)!important;overflow:auto!important;background:radial-gradient(ellipse at 50% 25%,#fff8db 0,#fffdf9 42%,#f2ebfc 100%)!important;color:#43215f!important;border:1px solid #e2d4ec!important;border-radius:28px!important;padding:clamp(18px,3vw,32px)!important;text-align:center}
#result-dialog h2{font-size:clamp(26px,5vw,38px);margin:5px 0}
#result-dialog .eyebrow{margin:0 0 5px}
#result-dialog .result-duo,#result-friend{display:none!important}
#result-text{margin:8px 0!important;color:#654977!important;font-size:15px!important}
.podium-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-items:end;gap:12px;list-style:none;padding:0;margin:15px 0 8px}
.podium-place{display:flex;flex-direction:column;align-items:center;min-width:0;position:relative;grid-row:1}
.podium-place img{display:block;width:115%;max-width:none;height:clamp(84px,17vh,110px);object-fit:contain;margin-bottom:-5px;filter:drop-shadow(0 12px 10px #43215f22)}
.podium-place h3{font-size:clamp(17px,3.3vw,26px);margin:3px 0 0!important;color:#43215f!important;overflow-wrap:anywhere}
.podium-identity{font-size:10px;font-weight:800;letter-spacing:1px;color:#775d84}
.podium-place.is-player .podium-identity{background:#7040ab;color:#fff;border-radius:20px;padding:4px 10px}
.podium-car-name{font-size:12px;color:#775d84;line-height:1.4;min-height:1.4em}
.podium-number{margin-top:10px;display:grid;place-items:center;width:100%;height:58px;border-radius:14px 14px 0 0;background:linear-gradient(120deg,#fff7,var(--medal));border:1px solid #43215f15;border-bottom:6px solid #43215f33;font-size:38px;color:#482365;box-shadow:0 10px 18px #43215f0d}
.place-1{grid-column:2}.place-1 .podium-number{height:80px}
.place-2{grid-column:1}.place-3{grid-column:3}.place-3 .podium-number{height:40px}
.podium-own{background:#eee3fc;padding:12px;border-radius:12px;font-weight:800}
.podium-rule{font-size:11px;color:#775d84;margin:10px 0}
#result-dialog .result-stats{margin:14px 0;gap:24px}
#result-dialog .result-stats b{color:#43215f!important;font-size:24px!important}
#result-dialog .result-stats span{color:#715780!important}
#result-dialog #next{width:100%;min-height:52px!important}
#result-dialog #next{position:sticky;bottom:0;z-index:2}
#result-dialog #retry,#result-dialog #result-menu{margin:10px 4px 0;min-height:44px!important}
#result-dialog #retry{background:#e9def7!important;color:#43215f!important;border:1px solid #cdb5e3!important}
#result-dialog #result-menu{color:#583071!important;background:transparent!important}
@keyframes teach-right{0%,25%,100%{transform:rotate(0)}60%,80%{transform:rotate(22deg)}}
@keyframes teach-pull{0%,25%,100%{transform:scaleY(1)}60%,80%{transform:scaleY(.65) translateY(10px)}}
@media(max-width:430px){.podium-grid{gap:6px}.podium-car-name{font-size:10px}.podium-number{font-size:34px;height:65px}.place-1 .podium-number{height:95px}.place-3 .podium-number{height:48px}.podium-place img{width:115%}#result-dialog .result-stats{gap:15px}.motion-promo span{font-size:12px}}
@media(max-width:600px){#garage-top #garage-motion{width:185px!important;flex-basis:185px}#garage-top #garage-motion b{font-size:12px!important}#garage-top #garage-motion svg{flex-basis:24px}#garage-top .menu-tools{max-width:210px}}
@media(max-height:540px) and (min-width:600px){.podium-place img{width:70%;margin-bottom:-20px}.podium-number{height:40px!important;font-size:30px}.place-1 .podium-number{height:58px!important}.place-3 .podium-number{height:30px!important}}
@media(prefers-reduced-motion:reduce){#motion-phone{animation:none!important;transition:none}.podium-place img{filter:none}}
@media(max-height:540px) and (min-width:600px){
 #result-dialog[open]{display:grid;grid-template-columns:1.3fr 1fr;column-gap:20px;row-gap:4px;padding:12px 20px!important}
 #result-dialog .eyebrow{grid-column:1 / -1;grid-row:1;font-size:10px;margin:0}
 #result-dialog h2{grid-column:1 / -1;grid-row:2;font-size:24px;margin:0}
 #result-dialog #result-text{grid-column:1 / -1;grid-row:3;font-size:12px!important;margin:0!important}
 #result-dialog #podium-stage{grid-column:1;grid-row:4 / 8;align-self:center}
 #result-dialog .podium-grid{margin:0;gap:6px}
 #result-dialog .podium-place img{height:56px;width:100%;margin:0}
 #result-dialog .podium-place h3{font-size:16px}
 #result-dialog .podium-identity{font-size:8px}
 #result-dialog .podium-car-name{font-size:10px}
 #result-dialog .podium-number{margin-top:5px}
 #result-dialog .podium-rule{font-size:9px;margin:4px 0}
 #result-dialog .podium-own{font-size:11px;padding:5px;margin:5px 0}
 #result-dialog .result-stats{grid-column:2;grid-row:4;margin:2px 0;gap:12px}
 #result-dialog #next{position:static;grid-column:2;grid-row:5;margin:0}
 #result-dialog #retry{grid-column:2;grid-row:6;margin:0}
 #result-dialog #result-menu{grid-column:2;grid-row:7;margin:0}
}

/* WD175: the settings header and exit stay visible while the controls scroll. */
#settings-dialog { padding:20px!important; scroll-padding-top:80px; }
#settings-dialog .dialog-top { position:sticky; top:-20px; z-index:3; align-items:center; min-height:64px; margin:-20px -20px 16px; padding:10px 20px; background:#fffdf7; border-bottom:1px solid #e2d4ec; }
#settings-dialog #settings-title { font-size:clamp(1.2rem,4vw,1.6rem); line-height:1.15; margin:0; }
#settings-dialog #settings-close { flex:0 0 44px; width:44px; height:44px; min-width:44px; min-height:44px; }
