/* The court is the entire viewport in both browser and native fullscreen mode. */
.coin-counter{position:absolute;left:max(32px,env(safe-area-inset-left));bottom:58px;display:none;align-items:center;gap:8px;font-size:10px;letter-spacing:1px;color:#533c21;pointer-events:none;background:#fff3d6b0;padding:10px 14px;border-radius:20px}.playing .coin-counter{display:flex}.coin-symbol,.menu-wallet{color:#a06a10}.coin-counter strong{font-size:20px}.coin-bank{border-left:1px solid #a06a1040;margin-left:8px;padding-left:12px}.menu-wallet{font-size:10px;letter-spacing:1px;margin-top:20px}.menu-wallet+.personal-best{margin-top:14px}.result-coins{display:none}.results:not([hidden])+.result-coins{display:block;margin:15px 0 0}.picked .coin-symbol{animation:coin-pop .3s ease-out}@keyframes coin-pop{50%{transform:scale(1.8);color:#f89416}}@media(max-width:580px){.coin-counter{left:20px;bottom:46px;font-size:8px;padding:7px 11px}.coin-counter strong{font-size:16px}.playing .shot-tip{bottom:95px}}@media(max-height:450px){.menu-wallet{position:absolute;left:220px;top:90px;white-space:nowrap}.coin-counter{bottom:42px}}
html,body{width:100%;height:100%;margin:0;padding:0;overflow:hidden;overscroll-behavior:none;background:#e3b295}
body{display:block;min-height:0}
#arena{position:fixed;inset:0;width:100%;height:100%;height:100dvh;min-height:0;max-height:none;border-radius:0}
.topbar{position:absolute;top:max(24px,env(safe-area-inset-top));left:max(32px,env(safe-area-inset-left));right:max(32px,env(safe-area-inset-right));height:40px;z-index:4;pointer-events:none}
.topbar a,.topbar button{pointer-events:auto}
.header-actions{margin-left:auto}
.header-actions .icon-button{background:#f4efe52b;backdrop-filter:blur(6px)}
.court-top{top:max(86px,calc(env(safe-area-inset-top) + 60px))}
.welcome{top:23%}
.playing .brand,.playing .court-top{display:none}
.hud{top:max(28px,env(safe-area-inset-top));left:max(32px,env(safe-area-inset-left));right:max(32px,env(safe-area-inset-right))}
.clock-block{position:absolute;left:50%;transform:translateX(-50%);width:min(340px,36vw);margin:6px 0 0}
.court-bottom{bottom:max(21px,env(safe-area-inset-bottom));left:max(32px,env(safe-area-inset-left));right:max(32px,env(safe-area-inset-right))}
.overlay{padding:max(20px,env(safe-area-inset-top)) max(20px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(20px,env(safe-area-inset-left))}
.fullscreen-message{position:absolute;left:50%;bottom:60px;transform:translateX(-50%);max-width:90%;padding:12px 18px;border-radius:6px;background:#243c32;color:#fff5e6;font-size:12px;text-align:center;z-index:25;pointer-events:none}
@media(max-width:850px){
 .topbar{left:max(22px,env(safe-area-inset-left));right:max(22px,env(safe-area-inset-right))}
 .hud{top:max(82px,calc(env(safe-area-inset-top) + 58px));left:24px;right:24px}
 .clock-block{width:48%;left:60%}
 .welcome{top:24%}
}
@media(max-width:580px){
 .topbar{top:max(20px,env(safe-area-inset-top));left:max(20px,env(safe-area-inset-left));right:max(20px,env(safe-area-inset-right));height:34px}
 .brand{font-size:15px}.brand-ball{font-size:28px;margin-right:2px}.brand-dot{font-size:8px}
 .court-top{top:76px;left:22px;right:22px}
 .welcome{top:16%;left:8%}
 .hud{top:max(82px,calc(env(safe-area-inset-top) + 58px));left:22px;right:22px}
 .clock-block{width:48%;left:61%}
 .court-bottom{left:22px;right:22px;bottom:max(18px,env(safe-area-inset-bottom))}
}
@media(max-height:650px) and (min-width:581px){
 .welcome{top:22%}.topbar{top:max(18px,env(safe-area-inset-top))}
 .court-top{display:none}.hud{top:24px}.clock-block{width:32%;left:48%}
}
@media(max-width:360px){
 .brand{font-size:13px;gap:3px;white-space:nowrap}.brand-ball{font-size:24px}.brand-dot{font-size:7px}
 .header-actions{gap:5px}.header-actions .icon-button{width:32px;height:32px}
}
@media(max-height:450px) and (min-width:581px){
 .topbar{top:max(14px,env(safe-area-inset-top));left:22px;right:22px}
 .welcome{top:23%;left:6%}.hud{top:20px;left:22px;right:22px}
 .court-bottom{bottom:max(14px,env(safe-area-inset-bottom))}
}

/* Keep controls readable under the floodlights. */
#arena .hud,#arena .court-bottom,#arena .shot-tip,#arena .header-actions,#arena .callout{transition:color 1s ease}
#arena.night-court .hud,#arena.night-court .court-bottom,#arena.night-court .shot-tip,#arena.night-court .header-actions,#arena.night-court .callout{color:#e5f5ee}
.night-court .icon-button{border-color:#c4e5e860;background:#273a5250}
.night-court .modal{color:#243c32}

.court-picker{display:flex;flex-direction:column;gap:6px;max-width:230px;margin:0 0 15px;font-size:9px;font-weight:700;letter-spacing:1.5px;pointer-events:auto}
.court-picker select{width:100%;padding:10px 12px;border:1px solid #35534650;border-radius:8px;background:#fff4df;color:#243c32;font:600 13px Arial;cursor:pointer}
.next-court-picker{margin:18px auto 0;text-align:left}
#arena.night-court .welcome,#arena.night-court .brand,#arena.night-court .court-top{color:#e5f5ee}
.night-court .welcome p,.night-court .personal-best,.night-court .menu-wallet{color:#e5f5ee}
@media(max-height:700px) and (min-width:581px){.welcome .court-picker{position:absolute;left:280px;top:100px;width:210px}.welcome .personal-best{bottom:-35px}}
@media(max-height:450px){.welcome .court-picker{left:440px;top:50px;width:180px}.modal{max-height:94dvh;overflow:auto}}
@media(max-width:580px){.welcome .court-picker{margin-bottom:12px;max-width:205px}.welcome .court-picker select{padding:8px 10px}.welcome{top:12%}.welcome h1{font-size:54px;margin:16px 0}.welcome .personal-best{margin-top:12px}.welcome .menu-wallet{margin-top:12px}}

@media(max-width:580px){.welcome p{max-width:82vw}}

.night-court .welcome p,.night-court .welcome .eyebrow,.night-court .welcome .start-hint{text-shadow:0 1px 3px #202d50,0 0 6px #202d50}
@media(max-width:580px){.welcome p{max-width:58vw}}

/* Visible court gallery, with the active destination marked in both pickers. */
.court-gallery{position:absolute;left:5%;right:5%;bottom:58px;z-index:3;color:#243c32}
.playing .court-gallery{display:none}
.gallery-heading{font-size:10px;font-weight:800;letter-spacing:1.6px;margin-bottom:12px;display:flex;justify-content:space-between}
.gallery-heading>span{font-size:10px;font-weight:400;letter-spacing:0}
.court-cards{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:12px}
.court-card{padding:4px;border:2px solid transparent;border-radius:12px;background:#fff5e9d9;color:#243c32;text-align:left;box-shadow:0 3px 12px #182c2b16;transition:transform .18s,border-color .18s,box-shadow .18s;min-width:0}
.court-card:hover{transform:translateY(-4px)}
.court-card[aria-pressed="true"]{border-color:#f37537;box-shadow:0 0 0 3px #fff3d6,0 5px 20px #57371a30;background:#fff5e9}
.court-thumbnail{height:75px;display:block;position:relative;overflow:hidden;border-radius:7px;background:linear-gradient(var(--court-sky) 70%,var(--court-floor) 70%)}
.court-thumbnail img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.9}
.mini-court{position:absolute;bottom:-12px;left:26%;width:48%;height:36px;border:1px solid #ffffff90;border-radius:50%;transform:rotateX(35deg)}
.court-check{position:absolute;right:5px;top:5px;border-radius:50%;background:#ef7037;color:white;width:21px;height:21px;display:none;text-align:center;line-height:21px;font-size:13px}
[aria-pressed="true"] .court-check{display:block}
.court-card-name{display:block;padding:9px 5px 6px;font-size:11px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;letter-spacing:0}
.next-court-picker{max-width:none;margin:16px 0}.next-court-picker .court-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:7px}.next-court-picker .court-thumbnail{height:40px}.next-court-picker .court-card-name{font-size:9px;padding:6px 1px}
.modal{max-height:92dvh;overflow:auto}
#arena.night-court .court-gallery{color:#e5f5ee}
.welcome{top:19%}.welcome h1{font-size:clamp(48px,6vw,90px);margin:20px 0}.welcome .menu-wallet{margin-top:12px}.welcome .personal-best{margin-top:12px}
@media(max-width:850px){.court-cards{gap:7px}.court-card-name{font-size:9px}.court-thumbnail{height:60px}}
@media(max-width:580px){.court-gallery{left:6%;right:6%;bottom:48px}.court-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}.court-thumbnail{height:45px}.court-card-name{font-size:8px;padding:7px 1px}.gallery-heading>span{display:none}.welcome{top:16%;left:8%}.welcome h1{font-size:48px;margin:14px 0}.welcome p{max-width:65vw}.welcome .personal-best{margin-top:10px}.welcome .menu-wallet{margin-top:10px}}
@media(max-height:700px) and (min-width:581px){.welcome{top:20%}.welcome h1{font-size:48px;margin:10px 0}.welcome .personal-best{position:absolute;left:260px;bottom:0}.court-thumbnail{height:50px}.court-gallery{bottom:42px}}
@media(max-height:450px){.court-gallery{left:57%;right:3%;bottom:45px;top:90px}.court-gallery .court-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.court-gallery .court-thumbnail{height:34px}.court-gallery .court-card-name{font-size:8px;padding:4px 1px}.gallery-heading>span{display:none}.gallery-heading{font-size:8px}.welcome{top:23%;left:5%}.welcome h1{font-size:40px}.welcome .personal-best,.welcome .menu-wallet,.welcome .start-hint{display:none}.welcome p{max-width:290px}}

@media(max-width:580px) and (max-height:740px){.welcome{top:15%}.welcome h1{font-size:38px;margin:8px 0}.welcome p{font-size:10px;line-height:1.45;margin-bottom:12px}.welcome .menu-wallet,.welcome .personal-best{display:none}.welcome .start-hint{margin-top:8px}.court-gallery{bottom:40px}.court-thumbnail{height:37px}.gallery-heading{margin-bottom:8px}}

.shop-link{display:inline-flex;align-items:center;gap:12px;padding:12px 16px;border:1px solid currentColor;border-radius:5px;background:#fff2;color:inherit;font-size:10px;font-weight:800;letter-spacing:1px;pointer-events:auto;margin-left:10px}
.modal .shop-link{display:flex;margin:15px auto 0}
#ball-shop{width:min(880px,94vw);max-height:90dvh;overflow:auto;border:0;border-radius:20px;background:#f6efdf;color:#243c32;padding:28px;box-shadow:0 24px 100px #0006}
#ball-shop::backdrop{background:#152b37b3;backdrop-filter:blur(7px)}
.shop-top{display:flex;align-items:center;justify-content:space-between}.shop-top h2{font-size:40px;letter-spacing:-2px;margin:6px 0}.shop-intro{font-size:13px;margin:8px 0 18px}.shop-balance{display:flex;gap:15px;align-items:center;font-size:10px;letter-spacing:2px;margin-bottom:20px}.shop-balance strong{font-size:25px;color:#946523}
.ball-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}.ball-card{padding:18px;border:2px solid #e4dbc9;border-radius:14px;background:#fffaf0;text-align:center}.ball-card.equipped{border-color:#ed783a}.ball-card h3{margin:12px 0 6px;font-size:16px}.ball-card p{font-size:11px;line-height:1.45;min-height:32px;margin:0 0 10px}.ball-status{display:block;font-size:10px;color:#78694e;margin-bottom:10px}.ball-card button{width:100%;border:0;background:#294b3d;color:#fff6e5;padding:12px 5px;border-radius:6px;font-size:10px;font-weight:bold}.ball-card button:disabled{background:#e8e2d6;color:#7d786d;cursor:default}
.ball-preview{position:relative;width:78px;height:78px;margin:auto;border-radius:50%;background-image:radial-gradient(circle at 30% 22%,#fff5,transparent 40%,#0008),var(--skin);background-size:cover;box-shadow:inset -5px -8px 12px #0004,0 8px 13px #2c302524;overflow:hidden}.ball-preview:before,.ball-preview:after,.ball-preview i{content:'';position:absolute;border:2px solid var(--seam);border-radius:50%;inset:36% -15%}.ball-preview:after{inset:-15% 36%}.ball-preview i{inset:-10% 5%;transform:rotate(-35deg)}
#shop-message{font-size:12px;min-height:18px;margin:20px 0 0}
@media(max-width:580px){#ball-shop{padding:18px}.ball-cards{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.ball-card{padding:12px 8px}.ball-card h3{font-size:13px}.ball-card p{min-height:48px}.ball-preview{width:64px;height:64px}.welcome .shop-link{margin:8px 0 0;display:flex;width:max-content;padding:9px 13px}.welcome .start-hint{display:none}}
@media(max-height:450px){.welcome .shop-link{margin:8px 0 0;padding:8px 12px;display:flex;width:max-content}}

/* The collection is part of the menu, not hidden behind the locker button. */
.ball-gallery{position:absolute;top:16%;left:53%;right:5%;z-index:3;color:#243c32}
.playing .ball-gallery{display:none}
.ball-gallery .ball-cards{gap:10px}
.ball-gallery .ball-card{padding:12px 8px;background:#fff8eee8}
.ball-gallery .ball-card p{display:none}
.ball-gallery .ball-preview{width:62px;height:62px}
.ball-gallery .ball-card h3{font-size:12px;margin:9px 0 6px}
.ball-gallery .ball-status{font-size:9px;margin-bottom:8px}
.ball-gallery .ball-card button{font-size:9px;padding:10px 4px}
.ball-gallery .ball-card.equipped{box-shadow:0 0 0 2px #fff3d6,0 4px 18px #3c301d30;border-color:#f37537}
#menu-ball-message{font-size:11px;min-height:16px;margin:8px 0}
#arena.night-court .ball-gallery{color:#e5f5ee}
.ball-gallery .ball-card{color:#243c32}
.welcome #open-shop{display:none}
@media(max-width:900px),(max-height:650px){
 #arena:not(.playing){overflow-y:auto;overscroll-behavior:contain;touch-action:pan-y}
 #arena:not(.playing) #scene{position:fixed;inset:0}
 #arena:not(.playing) .welcome{position:relative;top:auto;left:auto;margin:110px 6% 30px;width:auto}
 #arena:not(.playing) .welcome h1{font-size:48px;margin:12px 0}
 #arena:not(.playing) .welcome p{max-width:300px}
 #arena:not(.playing) .welcome .personal-best,#arena:not(.playing) .welcome .menu-wallet{position:static;display:none}
 #arena:not(.playing) .ball-gallery,#arena:not(.playing) .court-gallery{position:relative;top:auto;left:auto;right:auto;bottom:auto;margin:24px 6%;width:auto}
 #arena:not(.playing) .court-gallery{padding-bottom:30px}
 #arena:not(.playing) .court-bottom{display:none}
 .ball-gallery .ball-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
 #arena:not(.playing) .court-gallery .court-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
 .ball-gallery .gallery-heading>span{display:none}
}
@media(max-width:450px){.ball-gallery .ball-preview{width:52px;height:52px}.ball-gallery .ball-card{padding:10px 5px}.ball-gallery .ball-card h3{font-size:10px}.ball-gallery .ball-card button{font-size:8px}.ball-gallery .ball-status{font-size:8px}}

.ball-gallery .ball-card{background:#fff8ee}

/* Compact collection rails leave the center of the selected court unobstructed. */
#arena:not(.playing){overflow:hidden;touch-action:auto}
#arena:not(.playing) .ball-gallery{position:absolute;top:auto;left:5%;right:5%;bottom:192px;margin:0;width:auto}
#arena:not(.playing) .ball-gallery .ball-cards{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}
.ball-gallery .ball-card{padding:8px;display:grid;grid-template-columns:45px 1fr;column-gap:8px;align-items:center;text-align:left}
.ball-gallery .ball-preview{width:42px;height:42px;grid-row:1/3}
.ball-gallery .ball-card h3{font-size:11px;margin:0;white-space:nowrap}
.ball-gallery .ball-status{font-size:8px;margin:3px 0}
.ball-gallery .ball-card button{grid-column:1/-1;margin-top:6px;padding:7px 2px;font-size:8px}
#menu-ball-message{position:absolute;right:0;top:-28px;margin:0;min-height:0;font-size:10px}
.ball-gallery .gallery-heading>span{display:none}
#arena:not(.playing) .court-gallery{position:absolute;top:auto;left:5%;right:5%;bottom:45px;margin:0;padding:0;width:auto}
#arena:not(.playing) .court-gallery .court-cards{grid-template-columns:repeat(7,minmax(0,1fr))}
#arena:not(.playing) .welcome{position:absolute;left:7%;top:16%;margin:0;width:auto}
@media(max-width:1100px){
 #arena:not(.playing) .ball-gallery .ball-cards,#arena:not(.playing) .court-gallery .court-cards{display:flex;overflow-x:auto;padding:5px 4px 9px;scroll-snap-type:x proximity;touch-action:pan-x}
 .ball-gallery .ball-card{flex:0 0 145px;scroll-snap-align:start}
 .court-gallery .court-card{flex:0 0 122px;scroll-snap-align:start}
 #arena:not(.playing) .ball-gallery{bottom:165px}
 #arena:not(.playing) .court-gallery{bottom:28px}
}
@media(max-width:580px){
 #arena:not(.playing) .welcome{top:110px;left:6%}
 #arena:not(.playing) .welcome h1{font-size:40px;line-height:1;margin:12px 0}
 #arena:not(.playing) .welcome p{max-width:53vw;font-size:10px;line-height:1.5;margin-bottom:14px}
 #arena:not(.playing) .welcome .primary{min-width:0;padding:14px 18px}
 #arena:not(.playing) .ball-gallery{left:5%;right:0;bottom:148px}
 #arena:not(.playing) .court-gallery{left:5%;right:0;bottom:20px}
 .court-gallery .court-thumbnail{height:46px}.court-gallery .court-card-name{font-size:10px}
 .ball-gallery .gallery-heading:after,.court-gallery .gallery-heading:after{content:'SWIPE →';font-size:8px;margin-right:20px;opacity:.65}
 .gallery-heading{margin-bottom:5px}
 #menu-ball-message{top:auto;bottom:-10px;right:20px;font-size:8px}
}
@media(max-height:650px) and (min-width:581px){
 #arena:not(.playing) .welcome{top:85px;left:5%}
 #arena:not(.playing) .welcome h1{font-size:34px;margin:6px 0}
 #arena:not(.playing) .welcome p,#arena:not(.playing) .welcome .start-hint{display:none}
 #arena:not(.playing) .welcome .primary{padding:12px 18px;margin-top:8px}
 #arena:not(.playing) .ball-gallery{bottom:130px}
 #arena:not(.playing) .court-gallery{bottom:15px}
 .court-gallery .court-thumbnail{height:32px}.court-gallery .court-card-name{padding:5px;font-size:9px}
 .ball-gallery .ball-card{padding:5px}.ball-gallery .ball-preview{width:30px;height:30px}.ball-gallery .ball-card button{padding:5px 2px;margin-top:3px}
 .gallery-heading{margin-bottom:4px}
}