/* City utility panels. Presentation only: retain IDs, focus owners and live-world behavior. */
#backpack-panel,#actions-panel,#music-panel,#pause .pause-card{
 --panel-ink:#eef6ff;--panel-muted:#b6c7df;--panel-line:#526586;--panel-accent:#79e9ff;
 color:var(--panel-ink);background:linear-gradient(145deg,#142139,#11192d);
 border:1px solid var(--panel-line);border-top-color:#829abf;border-radius:16px;
 box-shadow:inset 0 1px 0 #d8eeff14,0 20px 56px #03081780;
 color-scheme:dark;scrollbar-color:#526586 #11192d;overscroll-behavior:contain;
}
#backpack-panel,#actions-panel,#music-panel{
 right:24px;top:84px;padding:22px;max-height:calc(100vh - 108px);max-height:calc(100dvh - 108px);
 overflow-y:auto;scroll-padding-block:96px 20px;
}
#backpack-panel{width:min(360px,calc(100vw - 32px));backdrop-filter:none}
#actions-panel{width:min(460px,calc(100vw - 32px))}
#music-panel{width:min(380px,calc(100vw - 32px))}
#backpack-panel .backpack-heading,#actions-panel .actions-heading,#music-panel .music-heading{
 position:sticky;top:-22px;z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
 margin:-22px -22px 18px;padding:22px 22px 16px;background:#142139;border-bottom:1px solid #354561;
}
#backpack-panel .backpack-heading small,#actions-panel .eyebrow{
 color:#79e9ff;font-size:9px;line-height:1.6;font-weight:650;letter-spacing:.16em;
}
#backpack-panel h2,#actions-panel h2,#music-panel h2{
 margin:6px 0 0;color:#eef6ff;font-size:23px;line-height:1.35;font-weight:650;letter-spacing:-.02em;overflow-wrap:anywhere;
}
#music-panel h2{margin:6px 0}
#backpack-close,#actions-close,#music-close{
 display:grid;place-items:center;flex:0 0 44px;width:44px;height:44px;min-height:44px;padding:0;
 border:1px solid #526586;border-radius:10px;background:#1b2c46;color:#dbeaff;font-size:25px;line-height:1;
 box-shadow:inset 0 1px 0 #d4eaff12;
}
#backpack-panel .backpack-item{
 gap:14px;padding:18px 16px;margin:0 0 18px;border:1px solid #4b5878;border-radius:12px;
 background:linear-gradient(130deg,#1a2c45,#25203b);
}
#backpack-panel .backpack-reactor{
 flex:0 0 48px;width:48px;height:48px;border-radius:12px;background:#132c43;border:1px solid #73bdd5;
 color:#a4f1ff;font-size:28px;box-shadow:inset 0 0 0 5px #79e9ff08;
}
#backpack-state{font-size:14px;font-weight:600;line-height:1.65;overflow-wrap:anywhere}
#backpack-primary,#pause #resume{min-height:50px;padding:13px 16px;font-size:13px;line-height:1.55}
#backpack-panel .backpack-note{margin:16px 0;color:#b6c7df;font-size:12px;line-height:1.8;overflow-wrap:anywhere}
#backpack-panel .backpack-hint{
 padding-top:14px;border-top:1px solid #354561;margin-top:18px;color:#b6c7df;font-size:10px;line-height:1.7;
}
#actions-panel .actions-list{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
#actions-panel .actions-list button{
 min-height:76px;gap:7px;padding:13px 14px;background:#1b2a43;border-color:#4a5d7d;border-radius:11px;
 box-shadow:inset 0 1px 0 #d4eaff0a;text-align:left;
}
#actions-panel .actions-list button span{color:#eef6ff;font-size:13px;font-weight:650;line-height:1.45}
#actions-panel .actions-list button small{color:#b6c7df;font-size:10px;line-height:1.6}
#actions-panel .actions-list button:is([data-social-action="dance"],[data-social-action="punk"],[data-social-action="skank"],[data-social-action="robot"],[data-social-action="twist"]){
 background:linear-gradient(125deg,#202b46,#2c2342);border-color:#81709f;
}
#actions-panel .actions-list button[aria-pressed="true"]{
 background:linear-gradient(125deg,#163b4a,#2c2848);border-color:#79e9ff;box-shadow:inset 3px 0 0 #79e9ff;
}
#actions-panel #actions-status{margin:18px 0 14px;min-height:0;color:#b6c7df;font-size:12px;line-height:1.75}
#actions-panel #actions-stop{min-height:46px;background:#16243c;border:1px solid #526586;border-radius:10px;color:#dbeaff;font-size:12px}
#actions-panel>small{margin-top:15px;padding-top:14px;border-top:1px solid #354561;color:#b6c7df;font-size:10px;line-height:1.75;text-align:left}
#pause{background:#050c1bbf;backdrop-filter:none;padding:24px}
#pause .pause-card{width:min(100%,560px);padding:30px;max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);overflow:auto}
#pause .eyebrow{color:#79e9ff;font-size:10px;letter-spacing:.17em;line-height:1.6}
#pause h2{margin:12px 0 10px;font-size:29px;line-height:1.4;font-weight:600;letter-spacing:-.02em}
#pause .pause-card>p{font-size:12px;line-height:1.8;color:#b6c7df;margin:0 0 22px}
#pause #resume{margin:0 0 18px}
#pause .menu-grid{gap:10px}
#pause .menu-grid button{min-height:50px;padding:12px 14px;border-color:#526586;background:#1b2a43;border-radius:10px;text-align:left;font-size:12px;line-height:1.55}
#pause #performance-toggle{grid-column:auto}
#pause details{margin-top:22px;border:1px solid #435672;border-radius:11px;background:#101c31;overflow:hidden}
#pause summary{padding:14px 16px;min-height:48px;color:#d9eaff;font-size:12px;font-weight:600;line-height:1.6}
/* Keep the keyboard ring inside the disclosure clipping boundary. */
#pause summary:focus-visible{outline:2px solid #a5f0ff!important;outline-offset:-4px!important;border-radius:9px}
#pause details[open] summary{border-bottom:1px solid #354561}
#pause details p{padding:0 16px;margin:14px 0;font-size:11px;line-height:1.85;color:#b6c7df;overflow-wrap:anywhere}
#pause details a{color:#bcefff;text-underline-offset:3px}
#pause #reset-progress{margin-top:15px;color:#edb8b9;font-size:11px;text-decoration-color:#956c79}
#music-enabled{width:100%;text-align:left;min-height:46px}
#music-panel .music-volume{display:grid;grid-template-columns:1fr auto;gap:6px 12px;padding:16px;margin-top:16px;border:1px solid #435672;border-radius:11px;background:#101c31;font-size:12px;line-height:1.6}
#music-panel .music-volume input{grid-column:1;grid-row:2;width:100%;min-width:0;margin:0;min-height:36px;accent-color:#79e9ff}
#music-panel .music-volume output{grid-column:2;grid-row:2;align-self:center;color:#dbeaff;font-size:12px;font-variant-numeric:tabular-nums}
#music-panel p{font-size:11px;line-height:1.8;color:#b6c7df}
#pause details a:focus-visible{outline:2px solid #a5f0ff;outline-offset:3px;border-radius:2px}
@media(max-width:760px),(max-height:500px){
 #backpack-panel,#actions-panel,#music-panel{right:16px;top:72px;padding:18px;max-height:calc(100vh - 88px);max-height:calc(100dvh - 88px)}
 #backpack-panel .backpack-heading,#actions-panel .actions-heading,#music-panel .music-heading{top:-18px;margin:-18px -18px 16px;padding:18px 18px 14px}
 #pause{padding:16px}#pause .pause-card{padding:22px;max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px)}
}
@media(max-width:420px){
 #actions-panel .actions-list{gap:8px}#actions-panel .actions-list button{padding:12px 10px}
 #backpack-panel h2,#actions-panel h2,#music-panel h2{font-size:21px}
 #pause .pause-card{padding:20px}#pause h2{font-size:25px}#pause .menu-grid{gap:8px}#pause .menu-grid button{padding:11px 12px}
}