:root{font-family:Arial,Helvetica,sans-serif;color:#30392c;background:#e8e9e2;font-synthesis:none}*{box-sizing:border-box}html,body{margin:0;width:100%;height:100%;overflow:hidden}button,a{-webkit-tap-highlight-color:transparent}button{font:inherit;color:inherit;cursor:pointer}button:focus-visible,a:focus-visible,#world:focus-visible{outline:2px solid #596e45;outline-offset:5px}#world{position:fixed;inset:0;outline:none}#world canvas{display:block;width:100%;height:100%;touch-action:none}.bottom-bar{position:absolute;bottom:0;left:0;right:0;display:flex;align-items:center;justify-content:flex-end;padding:25px 44px 30px;pointer-events:none}.tools{display:flex;gap:8px;pointer-events:auto}.tools button{border:1px solid #aeb8a566;background:#f5f6ee7d;backdrop-filter:blur(12px);height:40px;padding:0 14px;border-radius:30px;font-size:20px;transition:background .2s,transform .2s}.tools button:hover{background:#fafbf4;transform:translateY(-2px)}.tools button span{font-size:10px;margin-left:5px;vertical-align:middle}.loading{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#e8e9e2;z-index:3;transition:opacity .7s;pointer-events:none}.load-orbit{width:32px;height:32px;border:1px solid #c9cfbf;border-top-color:#596e45;border-radius:50%;animation:spin 1.3s linear infinite;margin-bottom:12px}.load-track{width:120px;height:2px;background:#d2d8c8;margin-top:8px}.load-track span{display:block;width:0;height:100%;background:#60764d;transition:width .2s}.loading.done{opacity:0}.hidden{display:none!important}.error{position:absolute;z-index:4;inset:0;background:#e8e9e2;display:flex;align-items:center;justify-content:center;flex-direction:column;padding:30px;text-align:center}.error button{padding:12px 22px;background:#34452e;color:#fff;border:0;border-radius:22px}.touch-controls{display:none;position:absolute;bottom:26px;left:25px;text-align:center;touch-action:none}.touch-controls div{display:flex;gap:5px;margin-top:5px}.touch-controls button{width:42px;height:42px;border-radius:12px;background:#f7f9efb0;border:1px solid #aeb8a580;backdrop-filter:blur(10px);font-size:22px;user-select:none}.touch-controls button:active{background:#b7c6a7}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:850px){.bottom-bar{padding:22px 24px}}@media(max-width:600px){.bottom-bar{justify-content:flex-end;padding:25px}.tools button{width:40px;padding:0}.tools button span{display:none}.touch-controls{display:block}}@media(prefers-reduced-motion:reduce){.load-orbit{animation:none}.loading,.tools button{transition:none}}

#sound-toggle[aria-pressed=true]{background:#526347;color:#fff;border-color:#526347}.sound-panel{display:grid;grid-template-columns:24px 1fr;gap:14px 12px;align-items:center;position:absolute;right:44px;bottom:92px;width:260px;padding:22px;border:1px solid #aeb8a580;border-radius:18px;background:#f5f6eeed;backdrop-filter:blur(16px);box-shadow:0 12px 36px #30392c16;z-index:2}.sound-panel[hidden]{display:none}.sound-panel label{display:flex;align-items:center;justify-content:center}.sound-panel label svg{width:20px;height:20px}.sound-panel input{display:block;width:100%;margin:0;accent-color:#526347;min-height:24px;cursor:pointer}#sound-settings{font-size:19px}@media(max-width:850px){.sound-panel{right:24px}}@media(max-width:600px){.tools{gap:5px}.tools button{width:36px;height:40px}.bottom-bar{padding-right:20px}.sound-panel{right:20px;bottom:80px;width:min(260px,calc(100vw - 40px))}}

/* A deliberate action: no autoplay, flashing lights or camera effects. */
#dance-toggle{display:inline-flex;align-items:center;justify-content:center;min-width:102px;background:#526347;color:#fff;border-color:#526347;gap:6px}
#dance-toggle span{margin:0}#dance-toggle:hover{background:#405437}#dance-toggle[aria-pressed=true]{background:#36472e;border-color:#36472e}
#dance-toggle:disabled{opacity:.45;cursor:wait;transform:none}.dance-icon{width:20px;height:20px;flex:none}

@media(max-width:600px){#dance-toggle{position:absolute;right:20px;bottom:78px;width:auto;padding:0 15px}#dance-toggle span{display:inline}.sound-panel{bottom:128px}}
@media(max-width:359px){.touch-controls{left:15px}.bottom-bar{padding-right:12px}.tools{gap:3px}.tools button:not(#dance-toggle){width:32px}#dance-toggle{right:12px}}

body.is-dancing{color:#f2eaff}.is-dancing #dance-toggle{background:#a03983;border-color:#ee86cf}.is-dancing .sound-panel{color:#30392c}

/* Keep instructions and status announcements available to screen readers. */
.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}
/* Keep held movement controls from triggering native text selection or callouts. */
.touch-controls,
.touch-controls * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

/* World-anchored labels stay crisp and support pointer, touch and keyboard. */
#zone-labels{position:fixed;inset:0;pointer-events:none;z-index:1}
.zone-label{position:absolute;transform:translate(-50%,-100%);pointer-events:auto;border:0;background:transparent;padding:10px 12px 20px;color:#43513d;font-size:clamp(13px,1.5vw,20px);font-weight:500;letter-spacing:.015em;line-height:1.25;white-space:nowrap;text-shadow:0 1px 12px #faffef,0 0 24px #faffef;transition:color .2s;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.zone-label::after{content:'';position:absolute;bottom:5px;left:calc(50% - 2px);width:4px;height:4px;border-radius:50%;background:currentColor;opacity:.4;transition:opacity .2s,box-shadow .2s}
.zone-label.is-highlighted{color:#263c21}
.zone-label.is-highlighted::after{opacity:1;box-shadow:0 0 12px 4px #fff4c4}
.zone-label[hidden]{display:none}
#world.over-zone canvas{cursor:pointer}
.is-dancing .zone-label{color:#f4e6c6;text-shadow:0 1px 10px #24142a}
@media(max-width:600px){.zone-label{font-size:12px;white-space:normal;width:108px;padding:10px 6px 19px;line-height:1.35}}
@media(prefers-reduced-motion:reduce){.zone-label,.zone-label::after{transition:none}}
