*{box-sizing:border-box}
body{margin:0;background:#002082;color:#fff;font-family:Arial,Helvetica,sans-serif;overflow:hidden}
#scene{position:fixed;inset:0}canvas{display:block;touch-action:none}
#labels{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.name{position:absolute;left:0;top:0;font-size:8px;letter-spacing:.5px;font-weight:bold;background:rgba(255,255,255,.10);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);border:0;border-radius:0;color:#fff;padding:3px 5px;pointer-events:none;white-space:nowrap}
.scene-ui{position:fixed;z-index:2;top:max(26px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:max-content;max-width:calc(100% - 32px);display:flex;flex-direction:column;align-items:center;gap:16px;pointer-events:none}
.mouse-help{display:flex;align-items:center;justify-content:center;gap:28px;color:rgba(255,255,255,.7);font-size:11px;letter-spacing:.15px}
.mouse-help span{display:flex;align-items:center;gap:8px;white-space:nowrap}
.mouse-help svg{width:20px;height:20px;opacity:.8;stroke-width:1.5}
.people,#roster{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:6px}
.people{pointer-events:auto}
button{appearance:none;border:1px solid rgba(255,255,255,.12);border-radius:7px;padding:10px 13px;background:rgba(255,255,255,.09);color:#fff;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font:500 11px Arial,Helvetica,sans-serif;line-height:16px;cursor:pointer;transition:background .16s,border-color .16s}
button:hover{background:rgba(255,255,255,.19)}button[aria-pressed="true"]{background:rgba(255,255,255,.27);border-color:rgba(255,255,255,.38)}button:focus-visible{outline:2px solid #fff;outline-offset:3px}button:disabled{opacity:.4;cursor:wait}.chip.error{background:rgba(130,35,50,.5)}
#reset{margin-left:6px;text-transform:none}
.activity-bubble{position:relative;margin:0;max-width:min(420px,100%);padding:12px 20px;border-radius:10px;background:rgba(9,24,78,.52);border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);color:rgba(255,255,255,.94);font-size:12px;line-height:1.5;text-align:center}
[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@media(max-width:760px),(pointer:coarse){.mouse-help{display:none}.scene-ui{top:max(14px,env(safe-area-inset-top));gap:12px;width:calc(100% - 24px);max-width:600px}.people{gap:6px}#roster{display:contents}button{padding:10px 12px;min-height:42px}#reset{margin-left:0}.activity-bubble{font-size:12px;padding:10px 15px}}
@media(prefers-reduced-motion:reduce){button{transition:none}}/* Keep navigation hints at the top; selection controls sit above the bottom safe area. */
.scene-ui{top:auto;bottom:max(26px,env(safe-area-inset-bottom))}
.mouse-help{position:fixed;z-index:2;top:max(26px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);width:max-content;pointer-events:none}
@media(max-width:760px),(pointer:coarse){.scene-ui{top:auto;bottom:max(14px,env(safe-area-inset-bottom))}}@font-face{font-family:"Croma Titles";src:url("assets/fonts/PPNeueMontreal-Regular.woff2") format("woff2");font-style:normal;font-weight:400;font-display:swap}
#loading{position:fixed;inset:0;z-index:100;background:#002082;color:#e8e8e8;transform:translateY(0);transition:transform 1s cubic-bezier(.76,0,.24,1);touch-action:none}
#loading-number{position:absolute;left:clamp(24px,4.5vw,80px);bottom:clamp(24px,4.5vw,64px);font-family:"Croma Titles",Arial,sans-serif;font-weight:400;font-size:clamp(110px,20vw,340px);line-height:.8;letter-spacing:-.055em;font-variant-numeric:lining-nums;white-space:nowrap}
#loading.is-ready{transform:translateY(-100%)}.is-loading .scene-ui,.is-loading .mouse-help,.is-loading #labels,.is-loading .back-link{visibility:hidden}
#loading-error{position:absolute;top:32px;left:clamp(24px,4.5vw,80px);right:24px;font-size:14px;line-height:1.5}#loading-error p{margin:0 0 16px}.no-script{position:fixed;z-index:101;padding:30px}
@media(prefers-reduced-motion:reduce){#loading{transition:none}}
.back-link{--medium-space:4em;position:fixed;z-index:2;top:max(18px,env(safe-area-inset-top));left:max(var(--medium-space),env(safe-area-inset-left));display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:10px 25px;border:0;border-radius:30px;background:rgba(255,255,255,.09);color:#fff;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-family:"Croma Titles",Arial,sans-serif;font-weight:400;font-size:20px;line-height:1.4;text-decoration:none;transition:background .3s}
.back-link:hover{background:rgba(255,255,255,.19)}
.back-link:focus-visible{outline:2px solid #fff;outline-offset:3px}
@media(min-width:761px) and (max-width:1100px){.mouse-help{top:78px}}
@media(max-width:760px){.back-link{top:max(12px,env(safe-area-inset-top));left:max(var(--medium-space),env(safe-area-inset-left))}}
@media(prefers-reduced-motion:reduce){.back-link{transition:none}}
/* Match the main site's rounded button typography without resizing the scene UI. */
.back-link svg{display:none}
@media(max-width:1920px){.back-link{font-size:18px}}
@media(max-width:1450px){.back-link{--medium-space:3em;font-size:16px}}
@media(max-width:760px){.back-link{width:44px;height:44px;padding:10px;justify-content:center}.back-link span{display:none}.back-link svg{display:block;width:20px;height:20px}}
/* Same section inset as the main site; em follows this button's matching font scale. */
@media(max-width:991px){.back-link{--medium-space:2.5em}}
@media(max-width:767px){.back-link{--medium-space:2.25em}}