/* v11: game-jam details. Track tag with speaker, paint-drip move labels, cardboard floor, sunset skyline header. */
:root{ --neon:#8DFF5A; --sunset:linear-gradient(180deg,#F08A2C 0%,#E2552A 55%,#C3271E 100%); --cardboard:#B98A58 }

/* now playing tag */
.np{position:fixed;left:max(14px,env(safe-area-inset-left,0px));bottom:calc(var(--deck-h) + var(--tab-h) + var(--safe-b) + 12px);z-index:59;display:flex;align-items:center;gap:10px;
  background:var(--black);background-image:var(--grain);color:#fff;padding:9px 14px 9px 10px;border-radius:6px;box-shadow:3px 3px 0 var(--red);max-width:min(78vw,420px);animation:npin .35s cubic-bezier(.2,.8,.2,1) both}
.np svg{width:22px;height:22px;flex:none;color:var(--neon)}
.np span{font:700 12px/1.25 var(--f-m);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.np.out{animation:npout .3s ease both}
@keyframes npin{from{transform:translateX(-24px)}to{transform:none}}
@keyframes npout{to{transform:translateX(-24px);opacity:0}}

/* paint-drip move label */
.drip{position:relative;display:inline-block;background:#0E0D0B;color:var(--neon);font:800 30px/1 var(--f-d);text-transform:lowercase;letter-spacing:.02em;
  padding:8px 16px 10px;border-radius:10px 14px 8px 16px;margin:6px 0 18px;transform:rotate(-1.5deg)}
.drip::before,.drip::after{content:"";position:absolute;background:#0E0D0B;border-radius:0 0 6px 6px;top:100%}
.drip::before{left:18%;width:7px;height:16px}
.drip::after{left:63%;width:5px;height:24px}
.drill h3.drip{color:var(--neon);font-size:30px;display:block;width:fit-content;margin:12px 0 22px}

/* cardboard floor for the training panel */
.cardboard{background:var(--cardboard)!important;background-image:var(--grain-d),repeating-linear-gradient(90deg,rgba(0,0,0,.06) 0 2px,transparent 2px 9px)!important;border-color:#5B3E1F!important;box-shadow:5px 5px 0 #5B3E1F!important;color:#2B1C0D}
.cardboard .muted,.cardboard .field{color:#4A3219}
.cardboard .field select{background:#E9D7BD;border-color:#7B5a36}
.cardboard h3{color:#1E140A}

/* sunset skyline header for "laptop" panels */
.sunset{padding-top:0!important;overflow:hidden}
.sunset>h3{margin:0 -18px 12px!important;padding:16px 18px 34px;color:#fff;background:var(--sunset);position:relative;font-size:24px}
.sunset>h3::after{content:"";position:absolute;left:0;right:0;bottom:0;height:24px;background:#16130F;
  clip-path:polygon(0 100%,0 60%,4% 60%,4% 30%,8% 30%,8% 55%,12% 55%,12% 10%,15% 10%,15% 45%,20% 45%,20% 25%,24% 25%,24% 65%,29% 65%,29% 35%,33% 35%,33% 0,36% 0,36% 40%,41% 40%,41% 20%,46% 20%,46% 60%,51% 60%,51% 30%,55% 30%,55% 50%,60% 50%,60% 15%,63% 15%,63% 45%,68% 45%,68% 30%,73% 30%,73% 60%,77% 60%,77% 5%,80% 5%,80% 40%,85% 40%,85% 25%,90% 25%,90% 55%,95% 55%,95% 35%,100% 35%,100% 100%)}
@media (prefers-reduced-motion:reduce){ .np,.np.out{animation:none} }