/* Compact clubhouse controls, designed at the embedded 907 × 510 size. */
.play-hud{--hud-bg:#123c32f2;--hud-line:#6d97856b;--hud-ink:#f5f1d9;--hud-muted:#c0d4bd;--hud-gold:#f0ce68}
.play-hud .ph-card{color:var(--hud-ink);background:var(--hud-bg);border:1px solid var(--hud-line);border-radius:10px;box-shadow:0 5px 0 #0a241c50,0 14px 35px #071b1826;backdrop-filter:none}
.play-hud .ph-left{left:16px;bottom:24px;max-height:calc(100dvh - 80px);overflow:visible;width:218px}
.play-hud .ph-shot{width:100%;padding:12px}.play-hud .ph-shot.is-collapsed{width:max-content;padding:7px}
.play-hud .ph-collapse{float:none;width:100%;margin:0 0 12px;min-height:30px;justify-content:space-between}
.play-hud .ph-chip{color:var(--hud-ink);background:#315c48;border:1px solid var(--hud-line);border-radius:5px;box-shadow:none;font-size:12px;padding:7px 10px}
.play-hud #shot-options{gap:12px}.play-hud [hidden]{display:none!important}
.play-hud .ph-field,.ph-label{color:var(--hud-muted);font-size:10px;letter-spacing:.1em;font-weight:700;text-transform:uppercase}
.play-hud input[type=range]{appearance:none;width:100%;height:6px;margin:12px 0 7px;border:0;background:linear-gradient(90deg,#56795e,#a9c794);border-radius:2px;accent-color:var(--hud-gold)}
.play-hud input[type=range]::-webkit-slider-thumb{appearance:none;width:12px;height:18px;border:2px solid #f8e8a3;border-radius:3px;background:#eac65f;box-shadow:0 2px 4px #0006}
.play-hud .ph-center{bottom:18px;width:390px;min-width:0}.play-hud .ph-power{padding:12px 15px}
.play-hud .ph-stats{padding:0 0 9px;border-color:var(--hud-line);gap:4px}.play-hud .ph-stat{border-color:var(--hud-line)}
.play-hud .ph-stat span{color:var(--hud-muted);font-size:9px;letter-spacing:.12em}.play-hud .ph-stat strong{color:var(--hud-ink);font-size:24px;line-height:1.1}.play-hud .ph-stat small{font-size:11px}
.play-hud .power-header{color:var(--hud-ink);font-size:10px;letter-spacing:.06em;margin:9px 0 7px}.play-hud #power-text{color:var(--hud-gold);font-variant-numeric:tabular-nums}
.play-hud .power-track{height:13px;border-radius:3px;background:#071e18}.play-hud .power-fill{background:linear-gradient(90deg,#6eb787,#e4ce70);border-radius:2px}
.play-hud .accuracy-label{color:var(--hud-muted);font-size:9px;margin-top:10px}.play-hud .accuracy-track{height:12px;border-radius:2px;box-shadow:inset 0 0 0 1px #ffffff30}
.play-hud .ph-meta{color:var(--hud-muted);font-size:10px;margin-top:8px;gap:10px}.play-hud #surface-label{background:#46795555;color:#c8e7ab;border-radius:3px}
.play-hud .ph-hint{font-size:10px;line-height:1.4;color:white;text-shadow:0 1px 4px #102c1c;margin:7px 0 0}
.play-hud .ph-right{right:16px;bottom:24px;max-width:210px}.play-hud .ph-tools{gap:6px}.play-hud .ph-tools .icon-button{width:38px;height:38px;min-width:38px;border-radius:8px;background:var(--hud-bg);color:var(--hud-ink);border:1px solid var(--hud-line)}
.play-hud .ph-tools svg{width:20px;height:20px}.play-hud .ph-live{font-size:11px;padding:8px;max-height:180px;overflow:auto}
.club-selector{position:relative}.club-selector>div:first-of-type{display:flex;align-items:center;gap:4px;margin-top:5px}
.club-arrow,.club-current{border:1px solid var(--hud-line);background:#254d3e;color:var(--hud-ink);border-radius:5px;padding:7px;min-height:43px}
.club-arrow{font-size:24px;line-height:1;width:27px}.club-current{flex:1;min-width:0;text-align:left}.club-current strong{display:block;font-size:15px}.club-current small{display:flex;justify-content:space-between;font-size:11px;color:var(--hud-gold)}
.club-options{position:absolute;bottom:65px;left:0;z-index:5;display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:8px;border:1px solid #7b9c7d;background:#123c32;border-radius:8px;width:260px;max-height:260px;overflow:auto;box-shadow:0 8px 25px #001c1990}
.club-option{font-size:12px;padding:9px 6px;border:1px solid #74977877;background:#284e3e;color:#f5f1d9;border-radius:4px}.club-option[aria-pressed=true]{background:#eed073;color:#173c30}
.ready-toggle.is-ready{background:#c3de91!important;color:#173a2e!important;border-color:#d7edb4!important;box-shadow:0 4px 0 #668753!important}.ready-toggle[aria-pressed=false]{border:2px solid #d5b866!important}
.competitive-page{background:radial-gradient(ellipse at 22% 0,#325948 0,transparent 55%),#102c28;color:#f3f0da}
.competitive-content{max-width:1200px;margin:auto;padding:24px}.competitive-header{padding:14px 24px;background:#102c28cf;border-bottom:1px solid #73937a55}
.ranked-stage{gap:24px}.ranked-identity h1{font-size:clamp(30px,4vw,58px);line-height:1.02;letter-spacing:-.04em;margin:14px 0 18px}
.ranked-identity>.eyebrow{color:#e7c86b}.ranked-rules{gap:10px}.ranked-rules span{font-size:12px}.ranked-course-strip{margin:20px 0 10px;gap:10px}.ranked-course-strip img{height:110px}.ranked-course-strip>div{border:1px solid #6b997655;border-radius:6px;overflow:hidden}
.ranked-queue-card{background:linear-gradient(145deg,#284b3c,#13352f);border:1px solid color-mix(in srgb,var(--rank-color),#cbd9a6 35%);border-radius:12px;box-shadow:0 8px 0 #071d1980;padding:24px;position:relative}
.rank-emblem{width:74px;height:74px;clip-path:polygon(50% 0,94% 22%,86% 78%,50% 100%,14% 78%,6% 22%);border-radius:0;background:var(--rank-color);color:#12372d;margin:0 auto 12px}.ranked-queue-card h2{font-size:30px;margin:6px}.ranked-elo{font-size:42px}
.competitive-ladder{margin-top:26px}.competitive-ladder>div{gap:6px}.competitive-ladder article{border-radius:6px;padding:12px 7px;background:#224739;border-color:#65816b66}.competitive-ladder article.is-current{background:#3f603f;border-color:#ead17b}.competitive-ladder h2{font-size:19px}
.modal.scrolling-locker{padding:0!important;height:min(800px,calc(100dvh - 24px));max-height:calc(100dvh - 24px);overflow:hidden!important}
.scrolling-locker .crate-detail{height:100%;min-height:0;display:flex;flex-direction:column;overflow:hidden}
.scrolling-locker .crate-content{min-height:0;flex:1;overflow:auto;padding:28px 26px 24px;scroll-padding-bottom:24px;scrollbar-width:thin}
.scrolling-locker .crate-detail-head{padding-right:20px}.scrolling-locker .crate-detail-head h2{font-size:clamp(25px,3.5vw,44px);margin:8px 0 14px}
.scrolling-locker .crate-detail-head .small-note{font-size:13px;line-height:1.5}.scrolling-locker .crate-detail-head>img{border-radius:9px;max-height:210px;object-fit:contain}
.scrolling-locker .crate-detail-actions{position:static!important;flex-shrink:0;margin:0!important;padding:14px 26px!important;background:var(--ui-surface)!important;border-top:1px solid var(--ui-border);min-height:74px;z-index:1;gap:18px}
.scrolling-locker .crate-detail-actions .button{flex:1;min-width:130px}.scrolling-locker .modal-close{top:9px;right:10px;width:32px;height:32px;font-size:22px;z-index:4}
.scrolling-locker .locker-quantity{padding:12px;margin:18px 0;gap:12px}.scrolling-locker .locker-quantity .chip{width:33px;height:33px;min-height:33px;padding:5px}.scrolling-locker .locker-quantity strong{font-size:15px}.scrolling-locker .locker-quantity span{font-size:12px}
.first-swing{position:absolute;top:16px;left:16px;width:300px;padding:15px;border:1px solid #dec97c;border-radius:9px;background:#123c32f5;color:#f5f1df;box-shadow:0 6px 0 #122a2060;pointer-events:auto;z-index:8}
.tutorial-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}.tutorial-heading span{font-size:9px;letter-spacing:.1em;color:#ecd27d}.tutorial-heading button,.tutorial-signin{border:0;background:none;color:#d7e4c9;text-decoration:underline;font-size:11px;padding:5px 0}
.tutorial-steps{display:flex;gap:5px;margin:12px 0}.tutorial-steps i{font-style:normal;font-size:11px;flex:1;background:#294f3f;padding:6px;border-radius:3px;color:#bdd0b6}.tutorial-steps i.active{background:#efd17a;color:#163d30;font-weight:700}
.first-swing strong{font-size:17px;display:block}.first-swing p{font-size:12px;line-height:1.5;margin:7px 0 10px;color:#d4dfc8}.first-swing .button{font-size:12px;min-height:35px;padding:8px 12px}.tutorial-signin{display:block;margin:6px 0 0}
.tutorial-visual{height:26px;margin:8px 0 12px;display:flex;align-items:center;gap:10px;color:#f3ce72}.tutorial-ball{font-size:20px;color:white}.tutorial-line{height:1px;flex:1;border-top:2px dashed #acd08e}
.tutorial-demo-power,.tutorial-demo-direction{display:block;width:100%;height:10px;background:#2a503f;position:relative;border-radius:2px;overflow:hidden}.tutorial-demo-power i{display:block;height:100%;width:70%;background:#aad386;transform-origin:left;animation:tutorial-fill 2.4s ease-in-out infinite}.tutorial-demo-power b{position:absolute;left:65%;width:8%;height:100%;top:0;background:#e9d176aa}.tutorial-demo-direction{background:linear-gradient(90deg,#b38153 40%,#8cc683 40%,#8cc683 60%,#b38153 60%)}.tutorial-demo-direction i{position:absolute;top:0;width:4px;height:100%;background:white;animation:tutorial-needle 2.4s ease-in-out infinite}
@keyframes tutorial-fill{0%,100%{transform:scaleX(.15)}50%{transform:scaleX(1)}}@keyframes tutorial-needle{0%,100%{left:0}50%{left:98%}}
.tutorial-round .ph-left,.tutorial-round .round-version{display:none}.tutorial-round .ph-right{top:16px;bottom:auto}.tutorial-round .ph-center{left:50%;transform:translateX(-50%)}.tutorial-finish{text-align:center}.tutorial-trophy{font-size:64px;color:#e4c773}
.play-hud.is-setting-shot .ph-left,.play-hud.is-setting-shot .ph-tools{display:none!important}
.first-swing.is-compact{width:240px;padding:10px 12px}.first-swing.is-compact .tutorial-steps,.first-swing.is-compact .tutorial-visual,.first-swing.is-compact p,.first-swing.is-compact .tutorial-signin{display:none}.first-swing.is-compact strong{font-size:13px;margin-top:7px}.first-swing.is-compact .tutorial-heading span{font-size:8px}
.earned-locker-overlay{position:fixed;inset:0;z-index:12000;background:#071f1bd9;display:grid;place-items:center;padding:18px;backdrop-filter:blur(6px)}
.earned-locker-popup{width:min(540px,100%);max-height:calc(100dvh - 36px);overflow:auto;text-align:center;padding:28px;border:1px solid #edcd75;border-radius:12px;background:radial-gradient(ellipse at 50% 40%,#476644,#153c30 68%);color:#fff5d8;box-shadow:0 0 70px #d5b65c20;animation:locker-earned-in .45s ease-out}
.earned-locker-popup h2{font-size:32px;margin:12px 0}.earned-locker-popup h3{font-size:21px;margin:4px}.earned-locker-popup p{font-size:14px;color:#d4e1bd}.earned-locker-popup img{width:220px;height:160px;object-fit:contain;border-radius:9px}.earned-locker-popup>div{display:flex;justify-content:center;gap:10px}.earned-locker-popup .button{font-size:14px;min-height:44px}.earned-locker-popup .eyebrow{font-size:10px;color:#f2d27f}
.earned-locker-popup,.earned-locker-popup h2,.earned-locker-popup h3{font-family:Outfit,"DM Sans",sans-serif}.earned-locker-popup .button.yellow,.first-swing .button.yellow{background:#efd178;color:#163e31;border:1px solid #e8c65e;box-shadow:0 3px 0 #a98c46}.earned-locker-popup .button.secondary{background:#315945;color:#f8efce;border:1px solid #87a17b;box-shadow:0 3px 0 #163a2c}
@keyframes locker-earned-in{from{opacity:0;transform:scale(.8) translateY(20px)}to{opacity:1;transform:none}}
@media(max-width:1000px),(max-height:600px){
 .play-hud #shot-options .club-selector{grid-column:1/-1}
 .play-hud .ph-left{width:185px;left:12px;bottom:15px}.play-hud .ph-shot{padding:10px}.play-hud #shot-options{gap:8px}.play-hud .ph-collapse{margin-bottom:8px}.play-hud .ph-center{width:345px;left:50%;right:auto;transform:translateX(-50%);bottom:12px}.play-hud .ph-power{padding:10px 12px}.play-hud .ph-hint{max-width:345px}.play-hud .ph-right{right:12px;bottom:15px;max-width:180px}.play-hud .ph-tools .icon-button{width:32px;min-width:32px;height:32px}.play-hud .ph-tools{gap:5px}.play-hud .ph-stat strong{font-size:22px}.play-hud .ph-chip{padding:6px 8px}.play-hud .flow-gauge{height:64px}
 .competitive-content{padding:16px 22px}.competitive-header{padding:9px 20px}.competitive-header .button{min-height:34px;padding:7px 12px;font-size:12px}.ranked-stage{grid-template-columns:minmax(0,1.45fr) minmax(245px,1fr);gap:18px}.ranked-identity h1{font-size:36px;margin:9px 0 12px}.ranked-identity>p{font-size:14px}.ranked-rules{gap:6px;flex-wrap:wrap}.ranked-rules span{font-size:10px}.ranked-course-strip img{height:85px}.ranked-course-strip span{font-size:11px}.ranked-course-strip{margin:15px 0 10px}.ranked-fairplay{font-size:11px!important}.ranked-queue-card{padding:16px}.rank-emblem{width:50px;height:50px;margin-bottom:8px}.rank-emblem svg{width:25px}.ranked-queue-card h2{font-size:24px}.ranked-elo{font-size:32px}.ranked-record{margin:12px 0}.ranked-queue-card .button{min-height:38px;font-size:14px;padding:9px}.ranked-queue-card>small{font-size:10px}.rank-next{font-size:11px;margin:8px 0}.ranked-record strong{font-size:20px}.competitive-ladder{margin-top:20px}
 .modal-overlay{padding:12px}.modal{max-height:calc(100dvh - 24px);padding:24px}.modal h2{font-size:30px}.modal .result-score strong{font-size:36px}.modal .result-score{margin:20px 0}.modal .result>h2{margin:12px 0 20px}.modal .scorecard td,.modal .scorecard th{padding:9px 12px}.modal .modal-actions .button{min-height:42px;font-size:14px}.modal .result>p{font-size:14px;margin:14px 0}.lobby-panel{padding:20px}.lobby-members{gap:8px}.lobby-members>div{min-height:66px;padding:10px}.lobby-panel .modal-actions{gap:8px}.lobby-panel .button{font-size:12px;padding:9px 12px;min-height:38px}
 .first-swing{top:12px;left:12px;width:285px;padding:12px}.first-swing p{font-size:12px}.earned-locker-popup{padding:20px}.earned-locker-popup h2{font-size:28px;margin:8px 0}.earned-locker-popup img{height:130px;width:190px}
}
@media(max-width:650px){.play-hud .ph-left{bottom:200px}.play-hud .ph-center{width:calc(100vw - 24px)}.play-hud .ph-right{top:12px;bottom:auto}.competitive-content{padding:16px}.ranked-stage{grid-template-columns:1fr}.competitive-ladder>div{grid-template-columns:repeat(4,1fr)}.first-swing{width:min(280px,calc(100vw - 90px))}.tutorial-round .ph-tools{display:grid;grid-template-columns:1fr}.scrolling-locker .crate-content{padding:38px 16px 18px}.scrolling-locker .crate-detail-actions{padding:12px 16px!important}.scrolling-locker .crate-detail-head{grid-template-columns:1fr;padding:0}.scrolling-locker .crate-detail-head>img{max-height:130px;width:100%}.locker-quantity{flex-wrap:wrap}.earned-locker-popup>div{flex-direction:column}}
@media(max-height:600px){
 .crate-stage.revealed:not(.crate-batch){padding:12px;overflow:auto}.crate-stage.revealed:not(.crate-batch) .crate-shell{gap:8px;max-height:calc(100dvh - 24px)}
 .crate-stage:not(.crate-batch) .crate-reveal{gap:9px}.crate-stage:not(.crate-batch) .reveal-art{width:min(270px,65vw);border-radius:12px}
 .crate-stage:not(.crate-batch) .crate-reveal h2{font-size:28px;margin:0}.crate-stage:not(.crate-batch) .crate-reveal p{font-size:12px;margin:0}
 .crate-stage:not(.crate-batch) .crate-reveal .modal-actions{margin:8px 0 0;gap:8px}.crate-stage:not(.crate-batch) .crate-reveal .modal-actions .button{min-height:40px;padding:9px 15px;font-size:13px}
}
@media(prefers-reduced-motion:reduce){.tutorial-demo-power i,.tutorial-demo-direction i,.earned-locker-popup{animation:none}.tutorial-demo-direction i{left:50%}}