/* ---- Drain the Frog : 1930s rubber-hose lab short ---------------- */

:root{
  --ink:#17120f;
  --ink-soft:#2a211b;
  --paper:#e9dcc0;
  --paper-2:#d8c49f;
  --paper-3:#bfa578;
  --cream:#f6efdc;
  --frog:#7d9b4e;
  --amber:#d98c2b;
  --amber-lt:#eeb257;
  --crimson:#b83c2b;
  --mustard:#e3b13c;
  --teal:#2d6265;
  --frost:#8fc9dc;
  --display:'Ultra', 'Cooper Black', Georgia, serif;
  --lab:'Special Elite', 'Courier New', ui-monospace, monospace;
}

*{ box-sizing:border-box; }

body{
  margin:0;
  background:
    radial-gradient(ellipse 120% 80% at 50% -10%, #33271f 0%, #1b1613 45%, #100d0b 100%)
    fixed;
  color:var(--cream);
  font-family:var(--lab);
  -webkit-font-smoothing:antialiased;
}

#cabinet{
  max-width:1020px;
  margin:0 auto;
  padding-left:16px;
  padding-right:16px;
  padding-block:20px 26px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

/* ---- marquee ---------------------------------------------------- */

.marquee{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
  padding:9px 16px;
  background:linear-gradient(180deg,var(--paper) 0%, var(--paper-2) 62%, var(--paper-3) 100%);
  border:5px solid var(--ink);
  border-radius:9px;
  box-shadow:0 6px 0 rgba(0,0,0,.45), inset 0 3px 0 rgba(255,255,255,.35);
  color:var(--ink);
}

.reel{
  font-family:var(--display);
  font-size:15px;
  letter-spacing:.06em;
  text-transform:uppercase;
  white-space:nowrap;
}
.reel b{ color:var(--crimson); }

.statline{
  font-family:var(--lab);
  font-size:13.5px;
  line-height:1.4;
  text-align:center;
  flex:1 1 200px;
  min-width:150px;
  margin:0;
  color:var(--ink-soft);
}
.statline b{
  font-weight:normal;
  color:var(--crimson);
  border-bottom:2px solid rgba(184,60,43,.4);
}

.rack{ display:flex; align-items:flex-end; gap:5px; flex-wrap:wrap;
       justify-content:flex-end; max-width:220px; }
.rack .lbl{
  font-size:11px; letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink-soft); opacity:.75; margin-right:2px; padding-bottom:4px;
}
.vial{
  width:15px; height:34px;
  border:3px solid var(--ink);
  border-radius:3px 3px 7px 7px;
  background:rgba(255,255,255,.4);
  position:relative;
  overflow:hidden;
}
.vial::after{
  content:''; position:absolute; left:0; right:0; bottom:0;
  height:0; background:var(--fill,var(--frost));
  transition:height .5s ease;
}
.vial.filled::after{ height:72%; }

/* ---- stage ------------------------------------------------------- */

.stage-wrap{
  position:relative;
  width:100%;
  aspect-ratio:8/5;
  border:8px solid var(--ink);
  border-radius:7px;
  background:#0d0b09;
  overflow:hidden;
  box-shadow:0 12px 0 rgba(0,0,0,.42), 0 0 0 3px var(--paper-3), 0 0 44px rgba(0,0,0,.6);
  touch-action:none;
}

#stage{ display:block; width:100%; height:100%; cursor:crosshair; }

.grain,.vig{ position:absolute; inset:0; pointer-events:none; }

.vig{
  background:radial-gradient(ellipse at 50% 46%, rgba(0,0,0,0) 42%, rgba(18,12,8,.34) 76%, rgba(12,8,5,.7) 100%);
}

.grain{
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity:.14;
  mix-blend-mode:multiply;
  animation:flick .45s steps(3) infinite;
}
@keyframes flick{
  0%{ background-position:0 0; }
  33%{ background-position:37px -19px; }
  66%{ background-position:-23px 31px; }
  100%{ background-position:11px 14px; }
}

/* ---- overlay cards ---------------------------------------------- */

.overlay{
  position:absolute; inset:0;
  display:grid; place-items:center;
  padding:18px;
  background:rgba(17,12,9,.74);
  pointer-events:none;
  opacity:0;
  transition:opacity .22s ease;
  overflow-y:auto;
}
.overlay.on{ opacity:1; pointer-events:auto; }

.card{
  width:min(100%,600px);
  background:linear-gradient(175deg,var(--cream) 0%, var(--paper) 60%, var(--paper-2) 100%);
  color:var(--ink);
  border:6px solid var(--ink);
  border-radius:5px;
  padding:20px 24px 22px;
  box-shadow:10px 10px 0 rgba(0,0,0,.5);
  text-align:center;
  transform:rotate(-.4deg);
}

.eyebrow{
  font-family:var(--display);
  font-size:12px; letter-spacing:.24em; text-transform:uppercase;
  color:var(--crimson);
}

.card h1{
  font-family:var(--display);
  margin:.18em 0 .1em;
  font-size:clamp(28px,6.4vw,50px);
  line-height:.98;
  letter-spacing:.01em;
  text-wrap:balance;
  color:var(--ink);
  text-shadow:3px 3px 0 var(--mustard), 6px 6px 0 rgba(0,0,0,.25);
}
.card h2{
  font-family:var(--display);
  margin:.1em 0 .25em;
  font-size:clamp(22px,5vw,34px);
  line-height:1.02;
  text-wrap:balance;
  color:var(--ink);
}
.card p{ margin:.42em 0; line-height:1.55; font-size:15px; }
.sub{ font-style:italic; opacity:.82; }

.rule{
  height:0; border:0; border-top:3px solid var(--ink);
  opacity:.45; margin:15px 0;
}

.keys{
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center;
  margin:11px 0 3px; text-align:left;
}
.keycap{
  display:flex; align-items:center; gap:8px;
  background:rgba(23,18,15,.07);
  border:3px solid var(--ink);
  border-radius:4px;
  padding:7px 11px;
  font-size:13px;
  line-height:1.3;
}
.keycap b{
  font-family:var(--display); font-size:12px; letter-spacing:.06em;
  background:var(--ink); color:var(--cream);
  padding:4px 8px; border-radius:3px; white-space:nowrap;
}

.scores{
  display:grid; gap:8px; margin:14px 0 6px; text-align:left;
}
.score-row{
  display:grid; grid-template-columns:auto 1fr auto; align-items:baseline; gap:10px;
  border-bottom:2px dotted rgba(23,18,15,.35);
  padding-bottom:6px;
}
.score-row .n{
  font-family:var(--display); font-size:12px; color:var(--crimson);
  letter-spacing:.1em;
}
.score-row .v{
  font-family:var(--display); font-size:17px;
  font-variant-numeric:tabular-nums;
}

.grade{
  display:inline-block;
  font-family:var(--display);
  font-size:clamp(40px,10vw,68px);
  line-height:1;
  padding:8px 20px 12px;
  border:6px solid var(--ink);
  border-radius:6px;
  background:var(--mustard);
  box-shadow:6px 6px 0 rgba(0,0,0,.35);
  transform:rotate(-3deg);
  margin:6px 0 2px;
}
.stamp{
  font-family:var(--display);
  font-size:clamp(16px,4vw,24px);
  letter-spacing:.1em;
  color:var(--crimson);
  border:4px solid var(--crimson);
  border-radius:5px;
  padding:5px 14px;
  display:inline-block;
  transform:rotate(-5deg);
  opacity:.9;
  margin-top:8px;
}

.note + .note{ margin-top:9px; }
.note{
  text-align:left;
  background:rgba(23,18,15,.06);
  border-left:5px solid var(--teal);
  padding:11px 14px;
  margin-top:14px;
  font-size:13.5px;
  line-height:1.6;
}
.note .h{
  display:block;
  font-family:var(--display);
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:var(--teal); margin-bottom:4px;
}

/* ---- buttons ------------------------------------------------------ */

.btn{
  font-family:var(--display);
  font-size:17px;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--cream);
  background:var(--crimson);
  border:5px solid var(--ink);
  border-radius:40px;
  padding:11px 26px 13px;
  cursor:pointer;
  box-shadow:0 6px 0 rgba(0,0,0,.45);
  transition:transform .08s ease, box-shadow .08s ease;
  margin-top:14px;
}
.btn:hover{ background:#c9492f; }
.btn:active{ transform:translateY(5px); box-shadow:0 1px 0 rgba(0,0,0,.45); }
.btn.alt{ background:var(--teal); }
.btn.alt:hover{ background:#367679; }

.btn:focus-visible,
.mini:focus-visible,
#stage:focus-visible{ outline:4px solid var(--frost); outline-offset:3px; }

/* ---- pedal row ---------------------------------------------------- */

.pedal{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
}
.mini{
  font-family:var(--display);
  font-size:13px; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink); background:var(--paper-2);
  border:4px solid var(--ink); border-radius:30px;
  padding:8px 15px 9px; cursor:pointer;
  box-shadow:0 4px 0 rgba(0,0,0,.45);
}
.mini:active{ transform:translateY(3px); box-shadow:0 1px 0 rgba(0,0,0,.45); }
.mini.big{ background:var(--mustard); font-size:15px; padding:10px 22px 11px; }
.mini.big:disabled{ opacity:.45; cursor:not-allowed; }
.hint{
  flex:1 1 220px;
  font-size:13px; line-height:1.45;
  color:var(--paper-3);
  min-width:180px;
}
.hint b{ color:var(--mustard); font-weight:normal; }

.credit{
  font-size:12px; color:#6f6053; line-height:1.6; text-align:center;
  margin-top:2px;
}

@media (max-width:620px){
  .card{ padding:16px 15px 18px; }
  .marquee{ padding:7px 11px; gap:7px; }
  .statline{ font-size:12.5px; order:3; flex-basis:100%; }
  .reel{ font-size:13px; }
  .vial{ width:12px; height:27px; }
  .btn{ font-size:15px; padding:10px 20px 12px; }
  .note{ font-size:12.5px; }
}

@media (prefers-reduced-motion: reduce){
  .grain{ animation:none; }
  .overlay{ transition:none; }
  .btn,.mini{ transition:none; }
}

/* ---- touch and small screens --------------------------------------
   The stage is a fixed 8:5 picture. On a phone the binding constraint is
   height, not width, so cap the width by the height actually available
   and let aspect-ratio derive the rest. Without this the stage overflows
   in landscape and the player scrolls to find the bench. */

html{ overscroll-behavior:none; }
#stage{ touch-action:none; }

body.touch{ -webkit-text-size-adjust:100%; }
body.touch .stage-wrap{ cursor:default; }
body.touch #stage{ cursor:default; }

/* Declared before the media queries that switch it on: a bare rule after
   them has equal specificity and would silently win. */
.rotate-nudge{
  display:none;
  margin:0;
  padding:10px 14px;
  border:4px solid var(--ink);
  border-radius:8px;
  background:var(--mustard);
  color:var(--ink);
  font-family:var(--display);
  font-size:14px;
  line-height:1.4;
  letter-spacing:.03em;
  text-align:center;
  box-shadow:0 5px 0 rgba(0,0,0,.45);
}

/* Landscape phone: make the cabinet exactly one screen tall and let the
   stage take whatever is left after the chrome, rather than guessing the
   chrome's height — aspect-ratio then derives the width. Guessing it got
   this wrong by 50px and left the page scrolling. */
@media (orientation:landscape) and (max-height:600px){
  #cabinet{
    height:100dvh;
    padding-block:6px;
    padding-left:10px;
    padding-right:10px;
    gap:6px;
  }
  .stage-wrap{
    flex:1 1 auto;
    min-height:0;
    width:auto;
    margin-inline:auto;
    border-width:5px;
  }
  .marquee{ padding:4px 10px; gap:6px; flex:0 0 auto; }
  .reel{ font-size:12px; }
  .statline{ font-size:11.5px; }
  .rack .lbl{ display:none; }
  .vial{ width:10px; height:20px; border-width:2px; }
  .pedal{ gap:8px; flex:0 0 auto; }
  .mini{ padding:6px 14px 7px; font-size:12px; box-shadow:0 3px 0 rgba(0,0,0,.45); }
  .mini.big{ padding:7px 18px 8px; font-size:13px; }
  .hint, .credit{ display:none; }
}

/* Portrait phone: the stage lands around 343x215, which is too small to
   read the bench. Still playable, but lead with the fix. */
@media (orientation:portrait) and (max-width:620px){
  .rotate-nudge{ display:block; order:-1; }
  .credit{ font-size:11px; }
  #cabinet{ padding-left:10px; padding-right:10px; }
  .card{ padding:12px 12px 14px; }
  .card h1{ font-size:clamp(22px,8vw,34px); }
  .card h2{ font-size:clamp(18px,6.5vw,26px); }
  .card p{ font-size:13px; }
  .keys{ gap:6px; margin:8px 0 2px; }
  .keycap{ font-size:11.5px; padding:5px 8px; }
  .note{ font-size:12px; padding:8px 10px; }
  .pedal{ gap:8px; }
  .hint{ font-size:12px; }
}

/* a fingertip is not a mouse pointer */
@media (pointer:coarse){
  .mini{ padding:11px 18px 12px; font-size:14px; }
  .mini.big{ padding:13px 26px 14px; font-size:16px; }
  .btn{ padding:13px 28px 15px; }
  .keycap{ font-size:12.5px; padding:6px 9px; }
}