/* Keep the complete head inside a deliberately framed player/record composition. */
#record{background:radial-gradient(ellipse at 72% 58%,#d8edff,transparent 55%),#f7fbff;grid-template-columns:minmax(0,44fr) minmax(0,56fr);padding-top:40px;padding-bottom:35px;min-height:0}
#record .record-art{height:clamp(430px,70svh,650px);perspective:1200px;margin-top:12px}
#record .record-player{top:0;bottom:auto;left:0;width:min(60%,360px);height:auto;max-height:100%;max-width:none;aspect-ratio:505/896;transform:translate3d(calc(var(--depth-x,0)*-5px),calc(var(--depth-y,0)*-5px),0);mask-image:linear-gradient(90deg,transparent,#000 3%,#000 97%,transparent);z-index:1}
#record .phone{top:7%;right:2%;width:42%;max-width:260px;transform:translate3d(calc(var(--depth-x,0)*9px),calc(var(--depth-y,0)*7px),22px) rotate(4deg) rotateY(calc(var(--depth-x,0)*-3deg));box-shadow:20px 30px 40px #072f5f2b;z-index:2}
#record .record-art:before{content:"";position:absolute;inset:10% 3% 5%;border:1px solid #60b9ec55;border-radius:48% 48% 15% 15%;transform:rotate(-6deg);pointer-events:none}
#record .record-art:after{content:"";position:absolute;left:8%;right:5%;height:20px;bottom:0;border-radius:50%;background:#0056af1c;filter:blur(12px);pointer-events:none}
#record .art-caption{bottom:0;right:3%;max-width:240px;font-size:14px}
.depth-surface{translate:calc(var(--depth-x,0)*4px) calc(var(--depth-y,0)*3px);transition:translate .18s ease-out;will-change:translate}
#cricket-overlay{z-index:40}
.click-wicket{position:fixed;width:32px;height:36px;left:0;top:0;pointer-events:none;z-index:100;color:#42c9ff;filter:drop-shadow(0 0 4px #0062ff);animation:hit-feedback .48s ease-out forwards}
.click-wicket i{position:absolute;bottom:4px;width:3px;height:23px;background:currentColor;transform-origin:bottom;border-radius:2px;animation:click-stump .48s ease-out forwards}.click-wicket i:nth-child(1){left:7px;--fall:-48deg}.click-wicket i:nth-child(2){left:15px;--fall:19deg}.click-wicket i:nth-child(3){left:23px;--fall:56deg}.click-wicket b{position:absolute;left:7px;top:8px;width:19px;height:2px;background:currentColor;animation:click-bail .48s ease-out forwards}@keyframes click-stump{from{rotate:0deg}to{rotate:var(--fall)}}@keyframes click-bail{to{translate:12px -20px;rotate:110deg}}@keyframes hit-feedback{0%{opacity:1;scale:.85}60%{opacity:1}100%{opacity:0;scale:1.15}}
@media(min-width:901px) and (max-height:780px){#record .record-art{height:500px;max-height:75svh}#record .record-player{width:min(58%,calc(75svh * .5636))}#record h2{font-size:var(--ds-title);}#record .phone{max-width:225px}#record{padding-block:28px}}
@media(max-width:900px){#record{grid-template-columns:1fr}#record .section-copy{padding-right:0}#record .record-art{height:520px;width:min(650px,100%);margin:25px auto 0}#record .record-player{width:min(56%,293px)}#record .phone{width:42%;max-width:230px}#record .art-caption{display:none}}
@media(max-width:500px){#record .record-art{height:390px}#record .record-player{width:57%;max-width:220px}#record .phone{right:0;top:4%;width:46%;max-width:195px}#record h2{font-size:var(--ds-title);}}
@media(prefers-reduced-motion:reduce){.depth-surface{translate:none!important;transition:none}#record .record-player{transform:none}#record .phone{transform:rotate(4deg)}.click-wicket{display:none}}
.motion-paused .depth-surface{translate:none!important}.motion-paused .record-player{transform:none!important}.motion-paused .phone{transform:rotate(4deg)!important}.motion-paused .click-wicket{display:none}

/* A cursor must remain above navigation and dropdown stacking contexts. */
@media(pointer:fine){body.ball-pointer #cricket-overlay{z-index:20}}

/* A cursor must remain above navigation and dropdown stacking contexts. */
@media(pointer:fine){body.ball-pointer #cricket-overlay{z-index:2147483647}}
