/* PIANO ARMY · the sound lab (web/army-sfx-lab.html, js/army-sfx-lab.js): the tab on the right edge and the panel it
   opens beside the game. Dashed and teal like piano-attack's eleven lab bar, so it is never taken for the game. */
html { background: #121620; }   /* no white page while the game's markup is read in */
:root { --lab: #6fd3c8; --lab2: #9ff2e8; --labbg: #10201f; --labw: min(420px, 42vw); }

.sfxlab-tab { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 10px 6px; border: 1px dashed var(--lab); border-right: 0; border-radius: 10px 0 0 10px; background: rgba(16, 32, 31, .94); color: var(--lab2); font-size: 18px; }
.sfxlab-tab span { writing-mode: vertical-rl; font: 700 12px/1 "Barlow Condensed", Barlow, sans-serif; letter-spacing: 1.4px; text-transform: uppercase; }
.sfxlab-tab:hover, .sfxlab-tab.on { border-color: var(--lab2); background: #173532; }
.sfxlab-open .sfxlab-tab { right: var(--labw); }

.sfxlab { position: fixed; top: 0; right: 0; bottom: 0; width: var(--labw); z-index: 39; overflow-y: auto; padding: 12px 14px 40px;
  background: rgba(14, 20, 26, .97); border-left: 1px dashed var(--lab); color: var(--ink); font-size: 13px; }
/* a wide screen gives the panel its own room; the stage lays the field out again (a resize) */
@media (min-width: 900px) { .sfxlab-open #stage, .sfxlab-open #menu { right: var(--labw); } }
.sfxlab header { position: relative; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; margin-bottom: 4px; padding-right: 40px; }
.sfxlab header h2 { margin: 0; color: var(--lab2); font-size: 20px; }
.sfxlab header .x { position: absolute; top: -2px; right: 0; padding: 3px 9px; }
.sfxlab h3 { display: flex; align-items: center; gap: 8px; margin: 16px 0 2px; font-size: 16px; color: var(--gold2); text-transform: uppercase; }
.sfxlab h3 .all { padding: 2px 8px; font: 600 12px/1.2 Barlow, sans-serif; text-transform: none; color: var(--lab2); }
.sfxlab .sub { margin: 2px 0 6px; }
.sfxlab .lv { display: flex; align-items: center; gap: 8px; margin: 8px 0; font-weight: 700; }
.sfxlab .lv input { flex: 1; max-width: 220px; accent-color: var(--lab); }
.sfxlab .lv output { min-width: 3.2em; font-variant-numeric: tabular-nums; color: var(--dim); }
.sfxlab .picks { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; margin: 6px 0; color: var(--dim); }
.sfxlab .picks button { padding: 4px 10px; font-size: 13px; }
.sfxlab .picks button:disabled { opacity: .45; cursor: default; }
.sfxlab .picks textarea { flex-basis: 100%; font: 12px/1.3 ui-monospace, monospace; background: var(--bg2); color: var(--ink); border: 1px solid var(--line); border-radius: 8px; }
.sfxlab .warn { margin: 8px 0; padding: 8px 10px; border-radius: 8px; background: rgba(224, 72, 59, .14); border: 1px solid rgba(224, 72, 59, .5); color: #ffb3aa; }
.sfxlab .recent { margin-top: 6px; padding: 2px 10px 6px; border: 1px dashed rgba(111, 211, 200, .45); border-radius: 10px; background: #12221f; }
.sfxlab .recent h3 { margin-top: 6px; color: var(--lab2); }
/* the top stays while the list scrolls under it (on a screen tall enough), "Just heard" a line a sound */
@media (min-height: 700px) { .sfxlab .top { position: sticky; top: -12px; z-index: 1; margin: -12px -14px 0; padding: 12px 14px 8px; background: rgb(14, 20, 26); border-bottom: 1px solid var(--line); } }
.sfxlab .recent .row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; padding: 4px 0; }
.sfxlab .recent .row .nm span { display: none; }
.sfxlab .recent .take { min-width: 40px; height: 28px; }
.sfxlab .recent .take i { display: none; }

.sfxlab .row { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 7px 0; border-top: 1px solid rgba(52, 61, 85, .6); }
.sfxlab .row .nm b { display: block; font-size: 14px; }
.sfxlab .row .nm span { color: var(--dim); font-size: 12px; }
.sfxlab .takes { display: flex; gap: 5px; flex-wrap: wrap; }
.sfxlab .take { position: relative; display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 54px; height: 34px; padding: 0 8px; overflow: hidden;
  border-radius: 8px; background: var(--bg2); }
.sfxlab .take svg { position: absolute; inset: 3px 4px; width: calc(100% - 8px); height: calc(100% - 6px); }
.sfxlab .take svg polyline { fill: none; stroke: rgba(111, 211, 200, .32); stroke-width: 2.4; vector-effect: non-scaling-stroke; }
.sfxlab .take b, .sfxlab .take i { position: relative; font-style: normal; }
.sfxlab .take i { font-size: 11px; color: var(--dim); }
.sfxlab .take.on { background: #173532; border-color: var(--lab); box-shadow: 0 0 0 1px var(--lab) inset; color: var(--lab2); }
.sfxlab .take.on svg polyline { stroke: rgba(159, 242, 232, .55); }
.sfxlab .take.off { min-width: 40px; color: var(--dim); }
.sfxlab .take.off.on { background: rgba(224, 72, 59, .16); border-color: var(--red); box-shadow: 0 0 0 1px var(--red) inset; color: #ffb3aa; }

/* the music: five tracks and Off, the one chosen lit, the one sounding marked */
.sfxlab .music { margin: 6px 0; padding: 6px 10px 8px; border: 1px dashed rgba(240, 207, 133, .45); border-radius: 10px; background: rgba(240, 207, 133, .04); }
.sfxlab .music .mh { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; margin-bottom: 4px; }
.sfxlab .music .mh > b { color: var(--gold2); font: 700 15px/1 "Barlow Condensed", Barlow, sans-serif; letter-spacing: .6px; text-transform: uppercase; }
.sfxlab .music .mh .st { margin: 0; }
.sfxlab .music .mh .lv { margin: 0 0 0 auto; font-weight: 500; }
.sfxlab .music .mh .lv input { width: 110px; accent-color: var(--gold); }
.sfxlab .mstop { padding: 1px 8px; font-size: 12px; }
.sfxlab .trk { position: relative; display: flex; align-items: center; justify-content: center; gap: 4px; min-width: 52px; height: 34px; padding: 0 7px; overflow: hidden; border-radius: 8px; background: var(--bg2); }
.sfxlab .trk svg { position: absolute; inset: 3px 4px; width: calc(100% - 8px); height: calc(100% - 6px); }
.sfxlab .trk svg polyline { fill: none; stroke: rgba(240, 207, 133, .3); stroke-width: 2.4; vector-effect: non-scaling-stroke; }
.sfxlab .trk b, .sfxlab .trk i { position: relative; font-style: normal; }
.sfxlab .trk i { font-size: 11px; color: var(--dim); max-width: 64px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sfxlab .trk.wide { min-width: 110px; }
.sfxlab .trk.on { background: #2e2715; border-color: var(--gold); box-shadow: 0 0 0 1px var(--gold) inset; color: var(--gold2); }
.sfxlab .trk.on svg polyline { stroke: rgba(240, 207, 133, .6); }
.sfxlab .trk.playing::after { content: ""; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: var(--lab2); box-shadow: 0 0 6px var(--lab2); }
.sfxlab .trk.off { min-width: 40px; color: var(--dim); }
.sfxlab .trk.off.on { background: rgba(224, 72, 59, .16); border-color: var(--red); box-shadow: 0 0 0 1px var(--red) inset; color: #ffb3aa; }
/* (the top's buttons are the tracks' names, three of them: their numbers are the Music list's) */
.sfxlab .music .trk b { display: none; }
.sfxlab .music .trk i { max-width: 130px; color: inherit; font-size: 12px; font-weight: 600; }
.sfxlab .music .trk svg { opacity: .4; }

@media (max-width: 899px) { :root { --labw: min(380px, 100vw); } }
@media (max-width: 480px) { .sfxlab { padding: 10px 12px 40px; } .sfxlab .take { min-width: 48px; } }