/* Stage shell: nav pill, track widget, filter menu, ask pill, detail panel. Only active under html.stage-on; the plain grid is the fallback. */
:root{--hud:'Chakra Petch','Bitcount Grid Single',monospace;--lav:#8d87f2;--teal:#7fd9c6;--warm:#f2d9a8}
#stage{display:none}
html.stage-on #stage{display:block}
html.stage-on,html.stage-on body{overflow:hidden;height:100svh}
html.stage-on main,html.stage-on footer,html.stage-on .skip,html.stage-on .pnav{display:none}
html.stage-on body::before{z-index:70}
#stage{position:fixed;inset:0;height:100svh;z-index:10;background:#02060a;overflow:hidden;font-family:var(--hud);font-weight:400;font-size:14px;text-transform:uppercase;letter-spacing:.06em;color:#fff}
#stage-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;outline:0}
#stage-loader{position:fixed;inset:0;z-index:90;background:#02060a}
#stage-loader:empty{display:none}
:where(#stage) :where(button,a,input){font-family:inherit;font-size:inherit;text-transform:inherit;letter-spacing:inherit;color:inherit}
:where(#stage) :where(button){background:none;border:0;cursor:pointer;text-align:left}
#stage :focus,#stage :focus-visible{outline:0}
html.kbd #stage :focus-visible{outline:2px solid var(--lav);outline-offset:4px;border-radius:2px}

/* top bar */
.st-mark,.st-nav,.st-track,#stage-hud,#stage-ask-btn{opacity:0;transition:opacity .6s}
#stage.ready .st-mark,#stage.ready .st-nav,#stage.ready .st-track,#stage.ready #stage-hud,#stage.ready #stage-ask-btn{opacity:1}
.st-mark{position:absolute;z-index:61;left:40px;top:40px;display:block;mix-blend-mode:screen}
.st-mark img{width:45px;height:35px;object-fit:contain}
.st-nav{position:absolute;z-index:61;top:42px;right:40px;width:240px;height:46px;display:flex;align-items:center;justify-content:space-between;padding:0 30px;border-radius:23px;background:rgba(8,20,22,.72);border:1px solid rgba(120,220,200,.4);box-shadow:0 14px 34px -14px rgba(90,230,200,.55),inset 0 0 18px rgba(120,220,200,.08);backdrop-filter:blur(8px)}
.st-nav a{display:flex;align-items:center;min-height:44px;text-decoration:none;color:#fff;transition:color .2s}
.st-nav a:hover{color:var(--teal)}
#stage-sound{display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 6px}
#stage-sound canvas{width:50px;height:14px;display:block}
.st-track{position:absolute;z-index:61;top:113px;right:75px;width:168px;height:40px;display:flex;align-items:center;justify-content:space-between;padding:0 4px;border:1px solid rgba(255,255,255,.13);font-size:9px;color:rgba(255,255,255,.7)}
.st-track button{width:36px;height:28px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.22);font-size:12px;color:rgba(255,255,255,.7);transition:color .2s,border-color .2s}
.st-track button:hover{color:#fff;border-color:#fff}
.trk-name{flex:1;min-width:0;padding:0 6px;overflow:hidden;white-space:nowrap;text-overflow:clip;text-align:center}
.trk-name:not(:empty)::before{content:"- "}

/* filter menu + ask pill */
#stage-hud{position:absolute;inset:0;z-index:60;pointer-events:none}
#stage-hud button,#stage-hud a{pointer-events:auto}
.hud-filters{position:absolute;left:58px;bottom:123px;transition:opacity .35s}
.hud-q{margin-bottom:12px;color:#fff}
.hud-cats{list-style:none}
.hud-cats button{display:flex;align-items:center;min-height:33px;padding:0;color:var(--lav);transition:color .25s,transform .25s,text-shadow .25s}
.hud-cats button:hover,.hud-cats button[aria-pressed="true"]{color:#fff;transform:translateX(10px);text-shadow:0 0 12px rgba(160,150,255,.7)}
.hud-cats button[aria-disabled="true"]{opacity:.3;cursor:default;transform:none}
.hud-list{position:absolute;right:40px;bottom:36px;display:flex;align-items:center;min-height:44px;font-size:11px;color:rgba(255,255,255,.4);text-decoration:none}
.hud-list:hover{color:#fff}
#stage-ask-btn{position:absolute;z-index:63;left:48px;bottom:60px;width:200px;height:46px;display:flex;align-items:center;justify-content:center;border:1px solid rgba(141,135,242,.5);border-radius:23px;color:rgba(141,135,242,.6);transition:opacity .6s,color .2s,border-color .2s,background .2s}
#stage-ask-btn:hover,#stage-ask-btn[aria-expanded="true"]{color:#fff;border-color:rgba(141,135,242,.95);background:rgba(141,135,242,.1)}
#stage-ask{position:absolute;z-index:63;left:58px;bottom:124px;width:300px;padding:14px;border:1px solid rgba(141,135,242,.5);border-radius:10px;background:rgba(6,8,22,.88);backdrop-filter:blur(8px)}
#stage-ask[hidden]{display:none}
#stage-ask input{width:100%;height:40px;padding:0 12px;border:1px solid rgba(141,135,242,.45);border-radius:20px;background:transparent;color:#fff;outline:0}
#stage-ask input::placeholder{color:rgba(141,135,242,.6)}
#stage-ask input:focus{border-color:var(--lav)}
.ask-msg{margin-top:10px;font-size:12px;color:var(--lav)}
#stage.asking .hud-filters,#stage.asking #stage-detail{opacity:0;pointer-events:none}

/* detail (reference 09 layout: same slot as the menu) */
#stage-detail{position:absolute;z-index:62;left:58px;bottom:123px;width:360px;display:flex;flex-direction:column;align-items:flex-start;gap:11px;line-height:1.5;outline:0;text-shadow:0 1px 12px rgba(0,0,0,.8)}
#stage-detail[hidden]{display:none}
#stage-detail .d-name{margin:0;font:inherit;font-weight:500;letter-spacing:inherit;text-transform:uppercase;color:#fff}
#stage-detail .d-meta{color:var(--teal)}
#stage-detail .d-tag{color:var(--warm);margin-bottom:4px}
#stage-detail .d-label{color:rgba(255,255,255,.65);font-size:12px}
#stage-detail .d-label:empty{display:none}
#stage-detail .d-links a{display:inline-flex;align-items:center;min-height:33px;color:#fff;text-decoration:underline;text-underline-offset:4px}
#stage-detail .d-links a:hover{color:var(--teal)}
#stage-detail .d-close{min-height:33px;padding:0;color:#fff}
#stage-detail .d-close:hover{color:var(--teal)}
#stage-detail .ln{display:inline-block;will-change:transform,opacity}
#stage-close-hint{position:absolute;z-index:62;top:134px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.85);pointer-events:none;white-space:nowrap;text-shadow:0 1px 10px #000}
#stage-close-hint[hidden]{display:none}
#stage.detail .hud-filters{opacity:0;pointer-events:none}
#stage.detail .hud-filters *{pointer-events:none}

@media (max-width:760px){
  .st-mark{left:16px;top:30px}
  .st-nav{top:42px;right:40px}
  .st-track{top:92px;right:62px}
  .hud-filters{left:32px;bottom:116px}
  .hud-cats button{min-height:27px}
  #stage-ask-btn{left:32px;bottom:44px}
  #stage-ask{left:32px;right:32px;width:auto;bottom:108px}
  .hud-list{right:16px;bottom:44px;min-height:44px}
  #stage-detail{left:32px;right:38px;width:auto;bottom:116px;top:58svh;justify-content:flex-end;gap:7px;font-size:13px;overflow:hidden auto;padding:4px 0}
  #stage-close-hint{top:140px;font-size:12px}
}