/* ===========================================================================
   DOLLY DREAD - cabinet skin.
   Everything here is a physical object with a material history: painted wood,
   chipped enamel over tin, polished steel, velvet worn bald at the folds,
   paper gone foxed. Nothing is flat vector, nothing is glassmorphic.

   The paint shop only had two tins. The cabinet, its fittings and its shadows
   are the blue; the lamplight, the velvet and everything that asks to be
   touched are the pink. The old names are kept so every rule below still
   reads: --amber is the lamp, --brass is the metal, --oxblood the dark paint,
   --verdigris the enamel plate.
   =========================================================================== */

:root{
  --blue:#1E3C74;              /* the cabinet body */
  --blue-lt:#3C68AE;
  --blue-dk:#0E1B38;
  --steel:#7FA3CC;             /* the fittings, once brass */
  --steel-lt:#CFE3F7;
  --steel-dk:#3E5C82;
  --pink:#FF4FA3;              /* the lamp, once amber */
  --pink-hot:#FFB3D8;
  --pink-lt:#E24A93;
  --pink-dk:#8E1B52;
  --signal:#FF2E88;

  --oxblood:var(--blue);
  --oxblood-lt:var(--blue-lt);
  --verdigris:#1B3A6B;
  --verdigris-dk:#122A50;
  --cream:#F2E7F4;
  --amber:var(--pink);
  --amber-hot:var(--pink-hot);
  --night:#0B1226;
  --night-2:#1B2A4E;
  --brass:var(--steel);
  --brass-dk:var(--steel-dk);

  --woodtype:'Rye',Georgia,serif;
  --stamp:'Barlow Condensed','Arial Narrow',sans-serif;
  --typewriter:'Special Elite','Courier New',monospace;

  --grain:.07;
  --u:1px;                     /* scaled by JS to the cabinet width */
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;background:var(--night);color:var(--cream);
  font-family:var(--stamp);overflow:hidden;
  -webkit-tap-highlight-color:transparent;
  -webkit-text-size-adjust:100%;
}
/* the room the cabinet stands in: a blue dark with a pink lamp in the corner */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(120% 80% at 18% 6%, rgba(255,79,163,.16), rgba(255,79,163,0) 55%),
    radial-gradient(90% 70% at 82% 96%, rgba(27,58,107,.18), rgba(27,58,107,0) 60%),
    linear-gradient(180deg,#080E1E 0%, #0B1226 45%, #060A16 100%);
}
/* 4 to 8 percent grain over the whole page */
body::after{
  content:'';position:fixed;inset:0;z-index:60;pointer-events:none;
  opacity:var(--grain);mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------------- machine */
#machine{
  position:relative;z-index:1;
  height:100dvh;width:100%;
  display:flex;flex-direction:column;
  padding:calc(6*var(--u)) calc(6*var(--u)) calc(8*var(--u));
  gap:calc(5*var(--u));
  max-width:1180px;margin:0 auto;
}

#ledstrip{
  height:calc(3*var(--u));border-radius:99px;flex:none;
  background:linear-gradient(90deg,transparent,var(--amber) 22%,var(--amber-hot) 50%,var(--amber) 78%,transparent);
  box-shadow:0 0 calc(14*var(--u)) rgba(255,79,163,.55), 0 0 calc(3*var(--u)) rgba(255,179,216,.9);
  opacity:.85;
}
@media (prefers-reduced-motion:no-preference){
  #ledstrip{animation:breathe 6.5s ease-in-out infinite}
  @keyframes breathe{0%,100%{opacity:.55}50%{opacity:.95}}
}

/* ---------------------------------------------------------------- marquee */
#marquee{position:relative;flex:none;text-align:center;padding:calc(2*var(--u)) 0 0}
#logo{
  margin:0;font-family:var(--woodtype);font-weight:400;
  font-size:clamp(26px,calc(9.4*var(--u)),62px);
  line-height:.98;letter-spacing:.01em;
  display:flex;justify-content:center;align-items:flex-end;gap:.06em;
  color:var(--cream);
  filter:drop-shadow(0 calc(2*var(--u)) 0 #3C68AE) drop-shadow(0 calc(3*var(--u)) calc(3*var(--u)) rgba(0,0,0,.65));
}
#logo .l{display:inline-block;transform:rotate(var(--rot,0deg)) translateY(var(--dy,0))}
#logo .sp{width:.28em}
#subtitle{
  font-family:var(--typewriter);font-size:clamp(8px,calc(2.5*var(--u)),13px);
  letter-spacing:.22em;color:rgba(242,231,244,.52);margin-top:calc(3*var(--u));
}

/* the little enamel manufacturer's plate, tied on with string */
#plate{
  position:absolute;left:0;top:calc(4*var(--u));
  font-family:var(--typewriter);font-size:clamp(6px,calc(2.05*var(--u)),10px);
  letter-spacing:.09em;line-height:1.35;color:#16233F;
  padding:calc(4*var(--u)) calc(6*var(--u));
  background:
    radial-gradient(circle at 18% 30%, rgba(110,86,170,.35) 0 1.5px, transparent 2px),
    radial-gradient(circle at 72% 68%, rgba(110,86,170,.4) 0 2px, transparent 2.5px),
    radial-gradient(circle at 44% 84%, rgba(110,86,170,.3) 0 1.5px, transparent 2px),
    linear-gradient(168deg,#F2E7F4,#DED1E8);
  border:calc(1.4*var(--u)) solid rgba(30,52,96,.55);
  border-radius:calc(2*var(--u));
  box-shadow:inset 0 calc(1*var(--u)) 0 rgba(255,255,255,.6),
             0 calc(2*var(--u)) calc(3*var(--u)) rgba(0,0,0,.6);
  transform:rotate(-1.6deg);
  max-width:34%;
}
#plate span{display:block;opacity:.62}
#plate::before{ /* the string it hangs from */
  content:'';position:absolute;left:50%;top:calc(-7*var(--u));width:calc(1.2*var(--u));
  height:calc(7*var(--u));background:linear-gradient(#6E86B0,#9FB2D4);
}

/* ---------------------------------------------------------------- body ---- */
#body{flex:1 1 auto;min-height:0;display:flex;gap:calc(6*var(--u))}
#stagewrap{
  position:relative;flex:1 1 auto;min-height:0;min-width:0;
  border-radius:calc(9*var(--u));
  overflow:hidden;
  /* the cabinet body: painted wood, contact shadow, no floating drop shadow */
  background:linear-gradient(180deg,#1A3055,#0E1B36);
  box-shadow:
    inset 0 0 0 calc(1.5*var(--u)) rgba(0,0,0,.75),
    inset 0 0 0 calc(4*var(--u)) rgba(127,163,204,.30),
    inset 0 calc(2*var(--u)) calc(18*var(--u)) rgba(0,0,0,.85),
    0 calc(3*var(--u)) calc(9*var(--u)) rgba(0,0,0,.75);
}
#stage{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:manipulation}
#stagehint{
  position:absolute;left:0;right:0;bottom:calc(10*var(--u));
  text-align:center;font-family:var(--typewriter);
  font-size:clamp(9px,calc(2.4*var(--u)),13px);letter-spacing:.16em;
  color:rgba(242,231,244,.62);pointer-events:none;
  transition:opacity .5s ease;
}
#stagehint.gone{opacity:0}

/* ---------------------------------------------------------------- pots ---- */
#pots{display:flex;gap:calc(4*var(--u));flex:none}
.pot{
  position:relative;flex:1 1 0;min-height:0;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:calc(2*var(--u));padding:calc(5*var(--u)) calc(3*var(--u));
  /* enamel plate over tin */
  background:linear-gradient(180deg,#1E3C74,#122A50);
  border:calc(1.5*var(--u)) solid rgba(127,163,204,.5);
  border-radius:calc(5*var(--u));
  box-shadow:inset 0 calc(1.5*var(--u)) 0 rgba(255,255,255,.10),
             inset 0 calc(-2*var(--u)) calc(4*var(--u)) rgba(0,0,0,.6),
             0 calc(2*var(--u)) calc(4*var(--u)) rgba(0,0,0,.55);
  text-align:center;overflow:hidden;
  transition:transform .18s ease, box-shadow .25s ease;
}
.pot b{
  font-family:var(--typewriter);font-weight:400;
  font-size:clamp(7px,calc(2.1*var(--u)),11px);letter-spacing:.1em;
  color:rgba(242,231,244,.72);white-space:nowrap;
}
.pot i{
  font-style:normal;font-family:var(--stamp);font-weight:700;
  font-variant-numeric:tabular-nums;
  font-size:clamp(13px,calc(4.6*var(--u)),28px);line-height:1;
  color:var(--amber);text-shadow:0 0 calc(7*var(--u)) rgba(255,79,163,.55);
}
.pot.won{transform:translateY(calc(-3*var(--u)));box-shadow:0 0 calc(16*var(--u)) rgba(255,79,163,.6),inset 0 0 0 calc(1.5*var(--u)) var(--amber)}
.pot.won i{color:var(--signal)}

/* ---------------------------------------------------------------- deck ---- */
#deck{flex:none;display:flex;flex-direction:column;gap:calc(5*var(--u))}

#meters{display:flex;gap:calc(4*var(--u))}
.meter{
  flex:1 1 0;position:relative;
  background:linear-gradient(180deg,#0C1428,#070B18);
  border:calc(2*var(--u)) solid rgba(127,163,204,.42);
  border-radius:calc(4*var(--u));
  padding:calc(3*var(--u)) calc(5*var(--u));
  box-shadow:inset 0 calc(2*var(--u)) calc(6*var(--u)) rgba(0,0,0,.9),
             0 calc(1*var(--u)) 0 rgba(255,255,255,.05);
  overflow:hidden;
}
.meter b{
  display:block;font-family:var(--typewriter);font-weight:400;
  font-size:clamp(6.5px,calc(1.95*var(--u)),10px);letter-spacing:.15em;
  color:rgba(242,231,244,.5);
}
.meter i{
  display:block;font-style:normal;font-family:var(--stamp);font-weight:700;
  font-variant-numeric:tabular-nums;
  font-size:clamp(17px,calc(6.2*var(--u)),40px);line-height:1.05;
  color:var(--amber-hot);letter-spacing:.01em;
  /* the cheap 1px colour register of stamped tin */
  text-shadow:calc(1*var(--u)) 0 rgba(255,46,136,.45), 0 0 calc(9*var(--u)) rgba(255,79,163,.35);
}
#m-win i{color:var(--cream);text-shadow:calc(1*var(--u)) 0 rgba(27,58,107,.6)}
#m-win.hit i{color:var(--amber-hot);text-shadow:0 0 calc(16*var(--u)) rgba(255,79,163,.85),calc(1*var(--u)) 0 rgba(255,46,136,.5)}

/* the sound bar: a speaker key, the volume fader, and the track it is playing.
   It lives on the cabinet face rather than behind MENU, so mute and volume are
   one tap away at every width. */
#soundbar{
  display:flex;align-items:center;gap:calc(5*var(--u));
  padding:calc(3*var(--u)) calc(6*var(--u));
  background:linear-gradient(180deg,#101E3A,#080E1E);
  border:calc(2*var(--u)) solid rgba(127,163,204,.34);
  border-radius:calc(4*var(--u));
  box-shadow:inset 0 calc(2*var(--u)) calc(7*var(--u)) rgba(0,0,0,.85);
}
#soundbar .sndlab{
  font-family:var(--typewriter);font-size:clamp(6.5px,calc(1.95*var(--u)),10px);
  letter-spacing:.15em;color:rgba(242,231,244,.5);flex:none;
}
.sndico{
  flex:none;width:calc(16*var(--u));height:calc(16*var(--u));
  padding:0;border:0;background:none;cursor:pointer;display:block;
  -webkit-tap-highlight-color:transparent;
}
.sndico svg{width:100%;height:100%;display:block;overflow:visible}
.sndico .spk{fill:var(--amber)}
.sndico .wave,.sndico .wave2{fill:none;stroke:var(--amber);stroke-width:2.1;stroke-linecap:round}
.sndico .slash{fill:none;stroke:var(--signal);stroke-width:2.6;stroke-linecap:round;display:none}
#soundbar.muted .spk{fill:#5A6E8C}
#soundbar.muted .wave,#soundbar.muted .wave2{display:none}
#soundbar.muted .slash{display:block}
/* the unfilled part of the groove must be clearly darker than the brass,
   or a half-turn fader looks like a full one against the dark cabinet */
#soundbar.muted .vol{background-color:#26385C}
#soundbar.muted .vol{background-image:linear-gradient(90deg,#5A6E8C,#5A6E8C)}
#soundbar.muted #trackname{color:rgba(242,231,244,.45)}

/* the fader: a thin brass track inside a fat thumb-sized hit area */
#soundbar .vol{
  -webkit-appearance:none;appearance:none;
  flex:1 1 auto;min-width:0;width:100%;
  height:calc(26*var(--u));margin:0;padding:calc(10.5*var(--u)) 0;
  border:0;outline:none;cursor:pointer;
  border-radius:calc(3*var(--u));
  background-color:#3A5580;
  background-image:linear-gradient(90deg,var(--amber),var(--amber));
  background-repeat:no-repeat;background-size:70% 100%;
  background-clip:content-box;
}
.volpct{
  flex:none;font-family:var(--stamp);font-weight:700;font-variant-numeric:tabular-nums;
  font-size:clamp(9px,calc(3.1*var(--u)),15px);color:var(--amber);
  min-width:2.1em;text-align:right;
}
#soundbar.muted .volpct{color:rgba(242,231,244,.4)}
#soundbar .vol::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:calc(13*var(--u));height:calc(13*var(--u));border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#FFE3F2,#E24A93 55%,#3E5C82);
  box-shadow:inset 0 0 0 calc(1.3*var(--u)) rgba(28,46,88,.55),
             0 calc(1*var(--u)) calc(3*var(--u)) rgba(0,0,0,.65);
  cursor:pointer;
}
#soundbar .vol::-moz-range-thumb{
  width:calc(13*var(--u));height:calc(13*var(--u));border-radius:50%;border:0;
  background:radial-gradient(circle at 34% 30%,#FFE3F2,#E24A93 55%,#3E5C82);
  cursor:pointer;
}
#soundbar .vol::-moz-range-track{height:calc(5*var(--u));background:#3A5580;border-radius:calc(3*var(--u))}

.chip{
  flex:none;cursor:pointer;
  font-family:var(--typewriter);font-size:clamp(7.5px,calc(2.25*var(--u)),12px);
  letter-spacing:.1em;color:var(--amber);white-space:nowrap;
  background:linear-gradient(180deg,#1E3C74,#122A50);
  border:calc(1.4*var(--u)) solid rgba(127,163,204,.5);
  border-radius:calc(9*var(--u));
  padding:calc(3*var(--u)) calc(6*var(--u));
  box-shadow:inset 0 calc(1*var(--u)) 0 rgba(255,255,255,.10);
}
.chip:active{transform:translateY(calc(1*var(--u)))}

#controls{display:flex;gap:calc(4*var(--u));align-items:stretch}

/* chunky painted tin buttons: they travel 3px down and the highlight moves */
.key{
  font-family:var(--stamp);font-weight:700;letter-spacing:.08em;
  color:#F4EAF6;border:0;cursor:pointer;position:relative;
  border-radius:calc(5*var(--u));
  padding:calc(6*var(--u)) calc(6*var(--u));
  font-size:clamp(11px,calc(3.4*var(--u)),20px);
  background:linear-gradient(180deg,#22407C,#14274C);
  box-shadow:
    inset 0 calc(2*var(--u)) 0 rgba(255,255,255,.16),
    inset 0 calc(-3*var(--u)) calc(5*var(--u)) rgba(0,0,0,.55),
    0 calc(4*var(--u)) 0 #0A142C,
    0 calc(6*var(--u)) calc(7*var(--u)) rgba(0,0,0,.55);
  transform:translateY(0);
  transition:transform .06s ease, box-shadow .06s ease, filter .2s ease;
}
.key:active,.key.down{
  transform:translateY(calc(3*var(--u)));
  box-shadow:inset 0 calc(1*var(--u)) 0 rgba(255,255,255,.08),
             inset 0 calc(2*var(--u)) calc(7*var(--u)) rgba(0,0,0,.8),
             0 calc(1*var(--u)) 0 #0A142C,
             0 calc(2*var(--u)) calc(3*var(--u)) rgba(0,0,0,.5);
}
.key:disabled{filter:grayscale(.7) brightness(.6);cursor:default}
.key.small{flex:0 0 auto;min-width:calc(34*var(--u))}

/* the spin key: a brass door handle set into the right of the deck */
.key.spin{
  flex:1 1 auto;display:flex;align-items:center;justify-content:center;gap:calc(4*var(--u));
  background:linear-gradient(180deg,#E24A93,#B02E72 55%,#3E5C82);
  color:#2A0A1E;text-shadow:0 calc(1*var(--u)) 0 rgba(255,225,244,.45);
  box-shadow:
    inset 0 calc(2*var(--u)) 0 rgba(255,220,240,.55),
    inset 0 calc(-4*var(--u)) calc(6*var(--u)) rgba(0,0,0,.45),
    0 calc(4*var(--u)) 0 #5A1440,
    0 calc(6*var(--u)) calc(8*var(--u)) rgba(0,0,0,.6);
  font-size:clamp(14px,calc(4.6*var(--u)),26px);
  letter-spacing:.14em;
}
.key.spin:active,.key.spin.down{
  box-shadow:inset 0 calc(1*var(--u)) 0 rgba(255,220,240,.3),
             inset 0 calc(3*var(--u)) calc(9*var(--u)) rgba(0,0,0,.7),
             0 calc(1*var(--u)) 0 #5A1440,
             0 calc(2*var(--u)) calc(3*var(--u)) rgba(0,0,0,.55);
}
.key.spin:disabled{filter:grayscale(.45) brightness(.75)}
.spin-ico{
  width:calc(13*var(--u));height:calc(13*var(--u));border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#FFE3F2,#E24A93 55%,#3E5C82);
  box-shadow:inset 0 0 0 calc(1.6*var(--u)) rgba(28,46,88,.5);
  flex:none;
}
.key.spin.busy .spin-ico{animation:turns 1s linear infinite}
@keyframes turns{to{transform:rotate(360deg)}}

/* ---------------------------------------------------------------- drawer -- */
#drawer{position:fixed;inset:0;z-index:70;display:flex;align-items:center;justify-content:center;padding:calc(28*var(--u)) calc(14*var(--u)) calc(14*var(--u))}
#drawer[hidden]{display:none}
#drawer-scrim{position:absolute;inset:0;background:rgba(4,7,16,.82);backdrop-filter:blur(2px)}
#drawer-card{
  position:relative;width:min(560px,100%);max-height:100%;overflow:auto;
  color:#16233F;border-radius:calc(4*var(--u));
  padding:calc(16*var(--u)) calc(14*var(--u)) calc(12*var(--u));
  box-shadow:0 calc(8*var(--u)) calc(24*var(--u)) rgba(0,0,0,.75),
             inset 0 0 0 calc(2*var(--u)) rgba(30,52,96,.35);
  font-family:var(--typewriter);font-size:clamp(11px,2.9vw,14px);line-height:1.5;
  /* foxing dots over the paper, in one stack: the base sheet must be the
     LAST layer or the transparent dots replace it and the card goes dark */
  background-image:
    radial-gradient(circle at 12% 18%, rgba(120,90,180,.22) 0 2px, transparent 2.6px),
    radial-gradient(circle at 66% 72%, rgba(120,90,180,.20) 0 2.6px, transparent 3.2px),
    radial-gradient(circle at 84% 26%, rgba(120,90,180,.16) 0 1.6px, transparent 2.2px),
    linear-gradient(178deg,#F2E7F4,#E2D6EC);
}
#drawer-tab{
  position:absolute;top:calc(-13*var(--u));left:calc(14*var(--u));
  background:#E2D6EC;border:calc(2*var(--u)) solid rgba(30,52,96,.4);border-bottom:0;
  border-radius:calc(3*var(--u)) calc(3*var(--u)) 0 0;
  padding:calc(4*var(--u)) calc(9*var(--u));
  font-size:clamp(9px,2.4vw,12px);letter-spacing:.14em;
  transform:rotate(-1.2deg);
}
#drawer-body h2{font-family:var(--typewriter);font-weight:400;font-size:1.15em;margin:1.1em 0 .4em;letter-spacing:.06em}
#drawer-body h2:first-child{margin-top:0}
#drawer-body p{margin:.45em 0}
#drawer-body table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
#drawer-body td{padding:.18em .3em;border-bottom:1px dashed rgba(30,52,96,.28)}
#drawer-body td:last-child{text-align:right}
#drawer-body .hint{opacity:.72;font-size:.92em}
#drawer-close{margin-top:calc(14*var(--u));width:100%;background:linear-gradient(180deg,#22407C,#14274C)}
.setrow{display:flex;align-items:center;justify-content:space-between;gap:.7em;padding:.4em 0;border-bottom:1px dashed rgba(30,52,96,.28)}
.setrow .sw{display:flex;gap:.35em}
.setrow button{font-family:var(--stamp);font-weight:700;font-size:1em;border:1px solid rgba(30,52,96,.5);background:rgba(255,255,255,.35);border-radius:3px;padding:.15em .6em;cursor:pointer;color:#16233F}
.setrow button[aria-pressed="true"]{background:#1E3C74;color:#F2E7F4;border-color:#1E3C74}

/* ---------------------------------------------------------------- cine ---- */
#cine{position:fixed;inset:0;z-index:80;background:#04060E;display:flex;align-items:center;justify-content:center}
#cine[hidden]{display:none}
#cine video{width:100%;height:100%;object-fit:cover;display:block}
#cine-grain{
  position:absolute;inset:0;pointer-events:none;opacity:.13;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='m'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23m)'/%3E%3C/svg%3E");
}
#cine-caption{
  position:absolute;left:0;right:0;bottom:12%;text-align:center;
  font-family:var(--woodtype);font-size:clamp(20px,7vw,54px);
  color:var(--cream);letter-spacing:.06em;pointer-events:none;
  text-shadow:0 2px 18px rgba(0,0,0,.95);
  opacity:0;transition:opacity .7s ease;
}
#cine-caption.on{opacity:1}
#cine-skip{
  position:absolute;right:0;bottom:0;padding:1.1em 1.4em;
  font-family:var(--typewriter);font-size:clamp(9px,2.6vw,12px);
  letter-spacing:.16em;color:rgba(242,231,244,.5);
}

/* ---------------------------------------------------------------- toast --- */
#toast{
  position:fixed;left:50%;bottom:calc(30*var(--u));transform:translateX(-50%);
  z-index:90;background:rgba(8,14,32,.95);border:1px solid rgba(127,163,204,.5);
  color:var(--cream);font-family:var(--typewriter);font-size:clamp(10px,2.8vw,13px);
  padding:.6em 1em;border-radius:4px;max-width:88vw;text-align:center;
}
#toast[hidden]{display:none}

/* ================================================== shape adaptation =====
   Wide: the pot thermometer stands to the right of the stage, as a real
   cabinet has it. Narrow: it lies along the bottom of the screen instead.
   The page is never unusable in either, and never asks anyone to rotate.   */
@media (max-aspect-ratio:1/1){
  #body{flex-direction:column-reverse;gap:calc(4*var(--u))}
  #pots{flex-direction:row;height:auto}
  .pot{padding:calc(4*var(--u)) calc(2*var(--u))}
  #pots .pot:first-child{order:4}
  #machine{max-width:640px}
}
@media (min-aspect-ratio:1/1){
  #body{flex-direction:row}
  #pots{flex-direction:column;width:calc(84*var(--u))}
  .pot b{font-size:clamp(6px,calc(1.9*var(--u)),10px)}
  /* on a desktop the deck is wide; a full-width fader reads as a bar graph,
     so the sound bar keeps a fader's proportions and sits centred */
  #soundbar{width:min(calc(330*var(--u)),100%);margin:0 auto}
}

/* very wide and short: give the stage the room, thinner deck */
@media (min-aspect-ratio:16/9) and (max-height:520px){
  #deck{flex-direction:row;align-items:center}
  #meters{flex:1 1 auto}
  #controls{flex:0 0 auto}
  /* no room for the word MUSIC here, so the speaker and the fader carry it */
  #soundbar{flex:0 0 auto;width:calc(178*var(--u));margin:0}
  #soundbar .sndlab{display:none}
}
/* very small phones: the plate stops being a pin-on badge and becomes a line
   under the masthead, so it can never sit on top of the title */
@media (max-width:420px){
  #marquee{display:flex;flex-direction:column;align-items:center}
  #logo{order:1}
  #subtitle{order:2}
  #plate{
    order:3;position:static;transform:none;
    max-width:100%;margin-top:calc(2*var(--u));
    font-size:6px;letter-spacing:.06em;text-align:center;
    padding:calc(2*var(--u)) calc(5*var(--u));
  }
  #plate::before{display:none}
}
@media (max-width:300px){
  #logo{font-size:clamp(20px,8.4vw,26px)}
}