/* ══════════════════════════════════════════════════════════════════
   NEON NOODLE CLUB
   late-night ramen counter / listening bar

   Design system, deliberately not shared with any other world:
   · dark-only. two states: club (default) and after-hours.
   · palette per spec — midnight / electric pink / neon cyan /
     chili red / warm cream / ultraviolet. nothing else.
   · three type roles: fat cut display, narrow label caps,
     handwritten annotation layer.
   · shape language: hard 45° cuts (clip-path), dotted LED rules,
     a diagonal ticker. zero rounded corners on anything but dots.
   · motion vocabulary: things rise, glow and wobble. never slide.
   ══════════════════════════════════════════════════════════════════ */

:root{
  /* spec palette — nothing outside this list */
  --midnight:#101126;
  --pink:#FF4FA3;
  --cyan:#58E6FF;
  --chili:#FF5D48;
  --cream:#FFF0D0;
  --uv:#7D5CFF;

  /* after-hours */
  --night-bg:#05050E;
  --night-ink:#B9BCD8;

  /* live state, written by world.js */
  --heat:0;

  /* derived */
  --ink:var(--cream);
  --bg:var(--midnight);
  --glow:calc(.34 + var(--heat) * .66);
  --grid-op:1;
  --neon-phase:1;
  --neon-op:var(--neon-phase);
  --rule:rgba(125,92,255,.42);

  --cut:14px;
  --cut-sm:9px;

  /* type roles */
  /* type roles. Monoton is the sign: its letterforms are already multi-line
     tube drawings, so the -webkit-text-stroke below turns them into lit neon
     instead of an outline around a solid. Saira Condensed carries the
     utilitarian narrow labels. Both are loaded from the head; the local
     names after them are fallbacks, not the lead. */
  --font-display:"Monoton","Bungee","Arial Black","Archivo Black",Impact,sans-serif;
  --font-label:"Saira Condensed","Arial Narrow","Liberation Sans Narrow","Segoe UI",Tahoma,system-ui,sans-serif;
  --font-note:"Segoe Script","Bradley Hand","Comic Sans MS","Lucida Handwriting",cursive;
}

html[data-night="on"]{
  --bg:var(--night-bg);
  --ink:var(--night-ink);
  --grid-op:.28;
  --neon-op:calc(var(--neon-phase) * .5);
}

/* the room's temperature answers the visitor's real local clock.
   world.js writes data-phase; these are the service windows. */
html[data-phase="closed"]{--neon-phase:.42; --grid-op:.22}
html[data-phase="warm"] {--neon-phase:.9}
html[data-phase="club"] {--neon-phase:1.12}
html[data-phase="quiet"]{--neon-phase:.58; --grid-op:.4}

*,*::before,*::after{box-sizing:border-box}

html{
  background:var(--bg);
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
}

body{
  margin:0;
  min-height:100%;
  font-family:var(--font-label);
  color:var(--ink);
  background-color:var(--bg);
  background-image:
    radial-gradient(circle at 1px 1px, rgba(125,92,255, calc(.26 * var(--grid-op))) 1px, transparent 0);
  background-size:24px 24px;
  transition:background-color .5s ease, color .5s ease;

}

body::before{
  content:"";
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(58vw 46vh at 78% 4%, rgba(255,79,163, calc(.20 * var(--neon-op))), transparent 68%),
    radial-gradient(50vw 44vh at 4% 32%, rgba(88,230,255, calc(.11 * var(--neon-op))), transparent 70%),
    radial-gradient(64vw 50vh at 50% 102%, rgba(125,92,255, calc(.20 * var(--neon-op))), transparent 72%);
}

.fx{position:absolute; width:0; height:0; overflow:hidden; pointer-events:none}

/* the grain is real fractal noise, not a scanline. this world is near-black,
   so multiply has nothing to darken and soft-light has nothing to bite into —
   both measured as no-ops here. normal blend at a low opacity actually
   deposits the tooth over a dark ground. */
/* opacity .42 measured as a wash, not a tooth: dSd +14.5 with meanDelta +35.9,
   which is the layer LIGHTENING the room rather than texturing it. The noise
   is now clumped (baseFrequency .24, 5 octaves) so the same field carries
   structure rather than an even veil, and the opacity comes down to where
   it deposits tooth without lifting the ground. */
.grain{
  position:fixed; inset:0; z-index:60; pointer-events:none;
  width:100%; height:100%;
  mix-blend-mode:normal;
  /* .42 measured as a wash (meanDelta +35.9); .16 still carried tooth 6.71
     against the bar's 1.25, which is over-texturing in the other direction.
     .09 lands the tooth near the bar's while still depositing. */
  opacity:.09;
}

.shell{max-width:1280px; margin:0 auto; padding-inline:clamp(16px,4vw,44px)}

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--cream); color:var(--midnight); padding:.7em 1.2em;
  font:700 .8rem/1 var(--font-label); letter-spacing:.16em; text-transform:uppercase;
}
.skip:focus{left:8px; top:8px}

:focus-visible{outline:2px dashed var(--cyan); outline-offset:3px}

/* ── type roles ─────────────────────────────────────────────────── */

.display{
  font-family:var(--font-display);
  font-weight:900;
  /* Monoton is a TALL face: its ink extends well past its line box, so the
     original .82 had adjacent lines physically overlapping. Measured ink
     overlap per line-height at this size: 1.02 -> 65px, 1.28 -> 33px,
     1.40 -> 19px, 1.50 -> 7px, 1.62 -> 0. 1.62 is the first value that
     clears it, so that is what ships; the display size drops below to pay
     for the extra leading rather than letting the hero grow three-fold. */
  line-height:1.62;
  letter-spacing:-.055em;
  text-transform:uppercase;
  margin:0;
  color:transparent;
  -webkit-text-stroke:2px var(--pink);
  text-shadow:0 0 26px rgba(255,79,163,calc(.55*var(--neon-op)));
}
.display__line{display:block}
.display__line--solid{
  /* the middle line used to be the only solid one, and a solid line has
     different side bearings from a stroked one — it overran the column and
     landed on the outline lines. all three lines now share the stroked
     metric, and the middle one is lit in cyan the way the sign actually
     reads: two pink outlines with a cyan word between them. */
  -webkit-text-stroke:2px var(--cyan);
  text-shadow:0 0 30px rgba(88,230,255,calc(.6*var(--neon-op)));
}
/* Monoton's glyphs are themselves tube drawings, so un-stroking the mark
   left the "!" reading as a stack of bars. it now matches its neighbours. */
.display__mark{
  -webkit-text-stroke:2px var(--chili);
  color:transparent;
  text-shadow:0 0 30px rgba(255,93,72,calc(.7*var(--neon-op)));
}
.display--mid{
  font-size:clamp(3rem,9vw,6rem);
  color:var(--cyan);
  -webkit-text-stroke:0;
  text-shadow:0 0 30px rgba(88,230,255,.45);
}

.kicker{
  display:inline-flex; align-items:center; gap:.7em; margin:0 0 1.4rem;
  padding:.5em .9em;
  font:700 .74rem/1 var(--font-label); letter-spacing:.2em; text-transform:uppercase;
  color:var(--cyan);
  border:1px dashed var(--cyan);
  clip-path:polygon(var(--cut-sm) 0,100% 0,calc(100% - var(--cut-sm)) 100%,0 100%);
}
.kicker__pip{
  width:8px;height:8px;background:var(--chili);border-radius:50%;
  box-shadow:0 0 12px var(--chili);
  animation:pip 1.9s steps(1,end) infinite;
}
@keyframes pip{0%,55%{opacity:1}56%,100%{opacity:.15}}

.note{
  font-family:var(--font-note);
  color:var(--cyan);
  font-size:clamp(.95rem,2vw,1.2rem);
  line-height:1.25;
  margin:0;
  text-shadow:0 0 16px rgba(88,230,255,calc(.5*var(--neon-op)));
}
.note--a{transform:rotate(-3.5deg) translateY(-.2rem)}
.note--b{transform:rotate(2deg)}
.note--c{transform:rotate(-2deg)}
.note--d{transform:rotate(1.5deg) translateY(.2rem)}

/* ── section openers ──────────────────────────────────────────────
   There is no section number. Every section opens on the house
   clock: a live <time> and what phase of the night you are in.
   The clock is the biggest object on the line, not the title. */

.service{
  margin:clamp(3rem,7vw,6rem) 0 clamp(1.4rem,3vw,2.4rem);
  position:relative;
}
.service__label{
  display:block; margin:0 0 .45em;
  font:700 .7rem/1 var(--font-label);
  letter-spacing:.22em; text-transform:uppercase;
  color:var(--cyan);
}
.service__time{
  display:block;
  font:900 clamp(2.6rem,9vw,5.4rem)/.8 var(--font-display);
  letter-spacing:-.04em;
  font-variant-numeric:tabular-nums;
  color:var(--cream);
  text-shadow:0 0 30px rgba(88,230,255,calc(.5*var(--neon-op)));
}
.service__phase{
  display:inline-block; margin:.7rem 0 0;
  padding:.45em .8em;
  font:700 .72rem/1 var(--font-label);
  letter-spacing:.18em; text-transform:uppercase;
  color:var(--midnight); background:var(--chili);
  clip-path:polygon(var(--cut-sm) 0,100% 0,calc(100% - var(--cut-sm)) 100%,0 100%);
}
.service__title{
  font:900 clamp(1.9rem,5.4vw,3.2rem)/1 var(--font-display);
  letter-spacing:-.02em; text-transform:uppercase; margin:0;
  color:var(--cream);
  text-shadow:0 0 24px rgba(255,79,163,calc(.28*var(--neon-op)));
}
.service__lede{
  margin:.8rem 0 0; max-width:46ch;
  font:400 clamp(.95rem,1.6vw,1.05rem)/1.55 var(--font-label);
  color:var(--ink);
}
.service__live{margin:0}
.service .note{margin:.9rem 0 0}

/* opener A — the board: clock in a left rail, text beside it */
.service--rail{
  display:grid; gap:clamp(1.2rem,3vw,2.4rem);
  grid-template-columns:auto minmax(0,1fr);
  align-items:end;
  padding-left:clamp(12px,2vw,20px);
  border-left:2px dotted var(--rule);
}

/* opener B — the deck: one full-bleed strip, clock leads, title trails */
.service--banner{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:clamp(.9rem,2.4vw,2rem);
  padding:.9rem clamp(12px,2vw,20px);
  background:linear-gradient(90deg, rgba(125,92,255,.20), rgba(125,92,255,0) 70%);
  border-top:2px solid var(--uv);
  border-bottom:2px solid var(--uv);
}
.service--banner .service__time{font-size:clamp(2.4rem,8vw,4.6rem)}
.service--banner .service__phase{margin:0}
.service--banner .service__title{margin-right:auto}
.service--banner .note{margin:0; flex:0 1 auto; max-width:100%}

/* opener C — tonight: title on its own row, clock as the live band under it */
.service--split .service__live{
  display:flex; align-items:center; flex-wrap:wrap;
  gap:.2rem 1.1rem;
  margin-top:clamp(.8rem,2vw,1.2rem);
  padding-top:.9rem;
  border-top:1px dotted var(--rule);
}
.service--split .service__time{font-size:clamp(2.2rem,7vw,4rem)}
.service--split .service__phase{margin:0}

/* opener D — find us: clock is a small stamp beside the title, not a banner */
.service--stamp{
  display:flex; align-items:baseline; flex-wrap:wrap;
  gap:.4rem clamp(1rem,2.4vw,1.8rem);
}
.service--stamp .service__live{
  display:flex; align-items:baseline; flex-wrap:wrap;
  gap:.2rem .8rem;
}
.service--stamp .service__label{
  display:block; margin:0;
  flex:1 1 100%;
}
.service--stamp .service__time{font-size:clamp(1.5rem,4vw,2.3rem)}
.service--stamp .service__phase{
  margin:0; padding:.35em .7em;
  font-size:.66rem;
  background:transparent; color:var(--chili);
  border:1px solid var(--chili);
  clip-path:none;
}
.service--stamp .service__phase[data-open="yes"]{color:var(--cyan); border-color:var(--cyan)}

/* the hours table answers the same clock */
.hours div[data-span].is-live{
  background:rgba(255,93,72,.14);
  box-shadow:inset 3px 0 0 var(--chili);
}

/* ── buttons: skewed chips with a hard drop shadow ──────────────── */

.btn{
  --b:var(--cream);
  position:relative;
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:.8em 1.5em;
  border:0; cursor:pointer;
  background:var(--b); color:var(--midnight);
  font:700 .78rem/1 var(--font-label);
  letter-spacing:.18em; text-transform:uppercase;
  text-decoration:none;
  clip-path:polygon(var(--cut) 0,100% 0,calc(100% - var(--cut)) 100%,0 100%);
  filter:drop-shadow(5px 5px 0 var(--uv));
  transition:transform .16s ease, filter .16s ease;
}
.btn:hover{transform:translate(-2px,-3px); filter:drop-shadow(8px 8px 0 var(--chili))}
.btn:active{transform:translate(3px,4px); filter:drop-shadow(1px 1px 0 var(--uv))}
.btn--hot{--b:var(--pink); filter:drop-shadow(5px 5px 0 var(--cyan))}
.btn--hot:hover{filter:drop-shadow(8px 8px 0 var(--cream))}
.btn--sm{padding:.62em 1.05em; font-size:.72rem; --cut:var(--cut-sm)}
.btn[aria-pressed="true"]{--b:var(--cyan)}

/* ── ticker ─────────────────────────────────────────────────────── */

/* the wrapper clips the rotated strip; the strip itself only scrolls */
.ticker-clip{overflow:hidden}
.ticker{
  background:var(--pink); color:var(--midnight);
  border-bottom:2px solid var(--chili);
  transform:rotate(-.55deg) scaleX(1.03);
  transform-origin:left center;
  width:100%; overflow:hidden;
}
.ticker__track{
  display:flex; align-items:center; gap:1.4em;
  width:max-content; padding:.42em 0;
  font:900 .78rem/1 var(--font-label); letter-spacing:.24em; text-transform:uppercase;
  animation:slide 34s linear infinite;
}
.ticker__track i{font-style:normal; color:var(--cream)}
@keyframes slide{to{transform:translateX(-50%)}}
html[data-night="on"] .ticker{background:#2A1030; color:var(--chili); border-bottom-color:var(--pink)}

/* ── masthead ───────────────────────────────────────────────────── */

.masthead{
  border-bottom:1px solid var(--rule);
  background:linear-gradient(180deg, rgba(16,17,38,.94), rgba(16,17,38,.62));
  backdrop-filter:blur(8px);
}
html[data-night="on"] .masthead{background:linear-gradient(180deg, rgba(5,5,14,.96), rgba(5,5,14,.7))}
.masthead__inner{
  max-width:1280px; margin:0 auto; padding:14px clamp(16px,4vw,44px);
  display:flex; align-items:center; gap:clamp(12px,3vw,32px); flex-wrap:wrap;
}
.wordmark{
  display:flex; align-items:center; gap:10px; text-decoration:none;
  clip-path:polygon(var(--cut) 0,100% 0,calc(100% - var(--cut)) 100%,0 100%);
  padding:8px 16px 8px 10px; background:rgba(255,79,163,.10);
}
.wordmark__bowl svg{width:38px; height:24px; display:block; fill:none; stroke:var(--pink); stroke-width:2.2; stroke-linecap:round}
.wordmark__text{
  font:900 .92rem/1.02 var(--font-display); letter-spacing:-.01em;
  text-transform:uppercase; color:var(--cream);
}
.wordmark__text em{
  display:block; font:400 .78rem/1.1 var(--font-note);
  color:var(--cyan); text-transform:none; letter-spacing:0;
}
.masthead__nav{display:flex; gap:clamp(10px,2.2vw,26px); margin-left:auto; flex-wrap:wrap}
.masthead__nav a{
  font:700 .76rem/1 var(--font-label); letter-spacing:.18em; text-transform:uppercase;
  color:var(--ink); text-decoration:none; padding:.4em 0;
  border-bottom:2px dotted transparent;
  transition:border-color .16s, color .16s;
}
.masthead__nav a:hover{color:var(--chili); border-bottom-color:var(--chili)}

.nightbtn{
  display:inline-flex; align-items:center; gap:.55em; cursor:pointer;
  padding:.6em 1.05em;
  background:transparent; color:var(--ink);
  border:1px dashed var(--uv);
  font:700 .68rem/1 var(--font-label); letter-spacing:.16em; text-transform:uppercase;
  clip-path:polygon(var(--cut-sm) 0,100% 0,calc(100% - var(--cut-sm)) 100%,0 100%);
  transition:border-color .2s, color .2s;
}
.nightbtn:hover{border-color:var(--pink); color:var(--pink)}
.nightbtn__dot{
  width:9px;height:9px;border-radius:50%;
  background:var(--uv); box-shadow:0 0 10px var(--uv);
  transition:background .3s, box-shadow .3s;
}
html[data-night="on"] .nightbtn{border-color:var(--pink); color:var(--pink)}
html[data-night="on"] .nightbtn__dot{background:var(--chili); box-shadow:0 0 12px var(--chili)}

/* ── HERO ───────────────────────────────────────────────────────── */

.hero{padding:clamp(2rem,5vw,4rem) 0 clamp(2.5rem,6vw,5rem)}
.hero__grid{
  display:grid; gap:clamp(1.6rem,4vw,3.4rem);
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  align-items:center;
}

/* ── the painted room ───────────────────────────────────────────────
   The hero scene is a real illustration sitting behind the type, and it
   is also the light source for the whole page: the neon glow washes the
   wall through it instead of stopping at a card border. */
.hero{position:relative; isolation:isolate; overflow:hidden}

.hero__scene{
  position:absolute; inset:0; z-index:-1;
  width:100%; height:100%;
  pointer-events:none;
  /* near-full: the scene is the painting, and dimming it just to make the
     lift layer visible defeats the point of having painted one. */
  opacity:calc(.88 + var(--heat) * .12);
}

/* THE GROUND LIFT, measured rather than guessed. Against the bar at
   1440x900: ours mean luminance 59.9 with p5 at 27; the bar mean 176.5 with
   p5 at 149.7. Our value SPAN is already wider than the bar's (113 vs 77) —
   we are not short of variation, we are short of light. So this lifts the
   painted scene's midtones with a warm bounce across the whole room, at
   normal blend, because normal is what actually deposits on near-black. */
.hero__lift{
  position:absolute; inset:0; z-index:-1;
  pointer-events:none;
  mix-blend-mode:normal;
  background:
    linear-gradient(178deg,
      rgba(255,214,168, calc(.17 * var(--neon-op))) 0%,
      rgba(255,150,120, calc(.13 * var(--neon-op))) 34%,
      rgba(190,120,220, calc(.11 * var(--neon-op))) 68%,
      rgba(120,90,200, calc(.14 * var(--neon-op))) 100%),
    radial-gradient(120vw 90vh at 50% 40%, rgba(255,200,150, calc(.12 * var(--neon-op))), transparent 78%);
}
/* after-hours: the room goes colder and the sign carries what light is left */
html[data-night="on"] .hero__lift{
  background:
    linear-gradient(178deg,
      rgba(255,170,140, calc(.16 * var(--neon-op))) 0%,
      rgba(190,110,190, calc(.14 * var(--neon-op))) 46%,
      rgba(90,80,190, calc(.18 * var(--neon-op))) 100%);
}

/* the neon in the room spills onto the plaster, the counter and the type.
   z-index 0 puts it ABOVE the painted scene (which is at -1) and BELOW the
   content, so the sign's light crosses the illustration instead of being
   hidden behind it. normal blend, not screen: screen is base-preserving and
   this ground is near-black, so screen measured as a no-op here. */
.hero__wash{
  position:absolute; inset:-10%; z-index:0;
  pointer-events:none;
  mix-blend-mode:normal;
  background:
    radial-gradient(58vw 52vh at 72% 26%, rgba(255,79,163, calc(.30 * var(--neon-op))), transparent 72%),
    radial-gradient(46vw 44vh at 22% 44%, rgba(88,230,255, calc(.16 * var(--neon-op))), transparent 74%),
    radial-gradient(70vw 44vh at 50% 96%, rgba(255,93,72, calc(.22 * var(--neon-op))), transparent 76%),
    radial-gradient(30vw 30vh at 88% 20%, rgba(255,220,180, calc(.20 * var(--neon-op))), transparent 70%);
  animation:room-breathe 13s ease-in-out infinite;
}
.hero__type, .bowlpanel{position:relative; z-index:1}
@keyframes room-breathe{
  0%,100%{opacity:calc(.72 + var(--heat) * .28)}
  44%    {opacity:calc(.94 + var(--heat) * .06)}
  61%    {opacity:calc(.66 + var(--heat) * .34)}
}

/* every lit thing in the painting breathes on its own clock, out of phase */
.scene__lantern{
  transform-box:fill-box; transform-origin:50% 0%;
  animation:lantern-sway 7.4s ease-in-out infinite alternate;
  animation-delay:var(--d,0s);
}
.scene__lantern--b{animation-duration:9.1s; animation-delay:var(--d)}
.scene__lantern--c{animation-duration:6.2s; animation-delay:var(--d)}
@keyframes lantern-sway{
  from{transform:rotate(-1.6deg)}
  to  {transform:rotate(1.9deg)}
}
.scene__lantern-glow{
  transform-box:fill-box; transform-origin:50% 50%;
  animation:lantern-lit 5.8s ease-in-out infinite;
  animation-delay:var(--d,0s);
  mix-blend-mode:screen;
}
@keyframes lantern-lit{
  0%,100%{opacity:.22; transform:scale(.97)}
  50%    {opacity:.42; transform:scale(1.05)}
}

/* the sign is on a bad transformer. it dips, recovers, and mostly holds. */
.scene__win rect{animation:win-flicker 11s steps(1,end) infinite}
.scene__win rect:nth-child(3n+1){animation-duration:9.3s}
.scene__win rect:nth-child(4n+2){animation-duration:14.7s}
@keyframes win-flicker{
  0%,8%,11%,54%,57%,100%{opacity:1}
  9%,10%{opacity:.22}
  55%,56%{opacity:.35}
}

/* rain on the near glass, at the speed rain actually falls */
.scene__rain path{
  stroke-dasharray:26 320;
  animation:rain-run 2.6s linear infinite;
  animation-delay:var(--d,0s);
  opacity:.5;
}
.scene__rain path:nth-child(even){animation-duration:3.4s; opacity:.34}
@keyframes rain-run{
  from{stroke-dashoffset:0}
  to  {stroke-dashoffset:-346}
}

/* the extractor is broken, so the plume goes up the wrong way and keeps going */
.scene__plume{
  transform-box:fill-box; transform-origin:50% 100%;
  animation:plume-climb 17s linear infinite;
}
@keyframes plume-climb{
  0%  {transform:translate(0,26px) scale(.72); opacity:0}
  18% {opacity:1}
  100%{transform:translate(-34px,-190px) scale(1.7); opacity:0}
}
.scene__puff{animation:plume-drift 21s ease-in-out infinite alternate}
.scene__puff--2{animation-duration:26s; animation-delay:-7s}
.scene__puff--3{animation-duration:18s; animation-delay:-13s}
@keyframes plume-drift{
  from{transform:translateX(-14px)}
  to  {transform:translateX(22px)}
}

/* the counter catches the sign and gives it back */
.scene__counter{
  animation:counter-sheen 19s ease-in-out infinite;
  mix-blend-mode:screen;
}
@keyframes counter-sheen{
  0%,100%{opacity:.9}
  50%    {opacity:1}
}

/* sized down from 7.6rem to pay for the 1.62 leading Monoton needs: three
   lines at full size would stand 590px tall. REPEAT! is the longest line and
   it carried 25px past the column at 7.6rem, so this also clears that. */
.hero__type .display{font-size:clamp(2.6rem,8.2vw,5.4rem)}
.hero__lede{
  max-width:44ch; margin:1.6rem 0 0;
  font:400 1.02rem/1.65 var(--font-label);
  letter-spacing:.02em; color:var(--ink);
}
.hero__type .note{margin-top:1rem; margin-left:.4rem}
.hero__actions{display:flex; gap:14px; flex-wrap:wrap; margin-top:1.6rem}
.hero__facts{
  list-style:none; margin:2rem 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:clamp(10px,2vw,22px);
  border-top:1px dashed var(--rule); padding-top:1.1rem;
}
.hero__facts li{
  font:700 .72rem/1.4 var(--font-label); letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink); max-width:15ch;
}
.hero__facts b{display:block; font:900 1.9rem/1 var(--font-display); color:var(--chili)}

/* ── bowl panel / the signature interaction ─────────────────────── */
.bowlpanel{
  position:relative;
  display:grid; gap:10px;
  padding:clamp(14px,2.5vw,24px);
  /* the light layer falls off toward the edges. it used to be a flat wash
     that stopped dead at the clip-path, which read as a border rather than
     as glow leaving a light source. */
  background:
    radial-gradient(120% 78% at 50% 42%, rgba(255,79,163, calc(.14 * var(--neon-op))), transparent 74%),
    radial-gradient(90% 60% at 50% 96%, rgba(88,230,255, calc(.10 * var(--neon-op))), transparent 76%),
    linear-gradient(180deg, rgba(125,92,255,.10), rgba(16,17,38,.30));
}
/* the panel's own bloom. it CANNOT live on a pseudo-element inside .bowlpanel:
   the panel is clip-path'd, so any glow painted there is cut on the same edge
   it is meant to escape from — which is exactly the hard falloff the room
   had. it is a real child element instead, and the clip-path is removed from
   the panel so the light has somewhere to go. the dashed border and the 45°
   cut are kept as a painted inner rule rather than a clip. */
.bowlpanel{
  border:0;
  clip-path:none;
}
.bowlpanel__glow{
  position:absolute; inset:-16% -12%; z-index:0;
  pointer-events:none;
  mix-blend-mode:normal;
  background:radial-gradient(56% 44% at 50% 46%, rgba(255,79,163, calc(.26 * var(--neon-op))), transparent 72%);
  animation:panel-glow 9.5s ease-in-out infinite;
}
/* content lifts above the bloom; without this the glow covers the panel */
.bowlpanel > :not(.bowlpanel__glow):not(.bowlpanel__rule){position:relative; z-index:1}
/* the cut corner, drawn as an inner painted rule instead of a hard clip */
.bowlpanel__rule{
  position:absolute; inset:0; z-index:1;
  pointer-events:none;
  border:1px dashed var(--rule);
  clip-path:polygon(0 0, calc(100% - 26px) 0, 100% 26px, 100% 100%, 26px 100%, 0 calc(100% - 26px));
}
@keyframes panel-glow{
  0%,100%{opacity:calc(.7 + var(--heat) * .3)}
  48%    {opacity:calc(1 + var(--heat) * 0)}
}
.steam{
  position:relative;
  height:clamp(200px,34vh,300px);
  overflow:hidden;
  touch-action:none;
  cursor:grab;
  border-bottom:1px dotted rgba(88,230,255,.3);
}
.steam:active{cursor:grabbing}
.steam::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--cyan), transparent);
  opacity:calc(.2 + var(--heat)*.8);
}

.steam__wisp{
  /* the rising type is brushed, not typeset: a turbulence displacement runs
     over it so no wisp has a straight edge. */
  filter:url(#f-steam);
  text-shadow:0 0 18px rgba(88,230,255,calc(.35*var(--neon-op)));
  position:absolute; bottom:-6%;
  font:400 clamp(.85rem,2.1vw,1.15rem)/1 var(--font-note);
  color:var(--cream);
  white-space:nowrap;
  animation-name:wisp;
  animation-duration:clamp(1.6s, calc(7.4s - var(--heat) * 5.2s), 8s);
  animation-timing-function:linear;
  animation-iteration-count:infinite;
  will-change:transform, opacity;
}
.steam__wisp i{font-style:normal; display:block; transform:rotate(-4deg)}
.steam__wisp--1{left:6%;   animation-delay:-.2s}
.steam__wisp--2{right:4%;  animation-delay:-1.4s; color:var(--cyan)}
.steam__wisp--3{left:16%;  animation-delay:-2.6s; color:var(--pink)}
.steam__wisp--4{right:12%; animation-delay:-3.6s; color:var(--cream)}
.steam__wisp--5{left:2%;   animation-delay:-4.4s; color:var(--chili)}
.steam__wisp--6{right:20%; animation-delay:-5.2s; color:var(--cream)}
.steam__wisp--7{left:26%;  animation-delay:-6.1s; color:var(--cyan)}

@keyframes wisp{
  0%   {transform:translateY(0) scale(.72); opacity:0}
  12%  {opacity:calc(.12 + var(--heat) * .88)}
  80%  {opacity:calc(.12 + var(--heat) * .55)}
  100% {transform:translateY(calc(-190px - var(--heat) * 300px)) scale(1.5); opacity:0}
}

.steam__cursor{
  position:absolute; left:50%; bottom:-2px; margin-left:-15px;
  width:30px; filter:drop-shadow(0 0 8px var(--cyan));
  animation:bob 2.4s ease-in-out infinite;
  opacity:calc(.35 + var(--heat)*.65);
}
.steam__cursor svg{width:100%; height:auto; display:block; fill:none; stroke:var(--cyan); stroke-width:2.4; stroke-linecap:round}
@keyframes bob{50%{transform:translateY(-9px)}}

.steam__hint{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin:0; padding:.55em .1em;
  font:700 .7rem/1.3 var(--font-label); letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink);
}
.steam__hint b{color:var(--chili)}
.steam__btns{display:inline-flex; align-items:center; gap:.6em}
.steam__readout{color:var(--cyan); min-width:6.5ch; text-align:center}
.heatbtn{
  width:30px;height:30px; cursor:pointer;
  background:transparent; color:var(--cyan);
  border:1px solid var(--cyan);
  font:700 1rem/1 var(--font-label);
  clip-path:polygon(6px 0,100% 0,calc(100% - 6px) 100%,0 100%);
}
.heatbtn:hover{background:var(--cyan); color:var(--midnight)}

/* the neon bowl, drawn as a sign */
.bowl{width:100%; height:auto; display:block}

/* the sign is bent glass, not vector art. every tube run is pushed through a
   turbulence displacement so the "geometry" wanders the way hand-bent tube
   actually does, and the whole sign sits on a bad transformer that mostly
   holds and occasionally drops a frame. */
.bowl{position:relative}
.tube, .crisp{
  filter:url(#f-brush);
  transform-box:fill-box; transform-origin:50% 50%;
  animation:tube-hum 8.6s ease-in-out infinite;
}
.tube--uv   {animation-duration:11.2s}
.tube--chili{animation-duration:9.4s; animation-delay:-3.7s}
@keyframes tube-hum{
  0%,100%{opacity:1}
  37%    {opacity:.86}
  39%    {opacity:1}
  72%    {opacity:.62}
  73%    {opacity:1}
  74%    {opacity:.7}
  76%    {opacity:1}
}

/* the halo is the light source. it reaches past the panel and dims into the
   room rather than terminating on the card edge. */
.bowl__halo{
  opacity:calc(.35 + var(--heat)*.65);
  mix-blend-mode:screen;
  transform-box:fill-box; transform-origin:50% 50%;
  animation:halo-breathe 6.8s ease-in-out infinite;
  filter:blur(2px);
}
@keyframes halo-breathe{
  0%,100%{transform:scale(.97); opacity:calc(.30 + var(--heat)*.62)}
  50%    {transform:scale(1.06); opacity:calc(.44 + var(--heat)*.56)}
}

/* the broth is a painted surface, not an ellipse */
.broth{
  filter:url(#f-broth);
  mix-blend-mode:screen;
  animation:broth-slick 7.2s ease-in-out infinite alternate;
}
@keyframes broth-slick{
  from{transform:translateX(-3px)}
  to  {transform:translateX(4px)}
}

/* eggs and noodles get the tooth too, so nothing in the bowl is a clean shape */
.eggs ellipse{filter:url(#f-brush)}
.tube use{fill:none; stroke-linecap:round; stroke-linejoin:round}
.tube--uv   use{stroke:var(--uv)}
.tube--pink use{stroke:var(--pink)}
.tube--chili use{stroke:var(--chili)}
.crisp{fill:none; stroke-linecap:round}
.crisp--pink{stroke:var(--pink); stroke-width:7}
.crisp--uv{stroke:var(--uv); stroke-width:5}
.crisp--chili{stroke:var(--chili); stroke-width:5}
.crisp--cyan{stroke:var(--cyan); stroke-width:6}
.crisp--cream{stroke:var(--cream)}
.bowl__halo{opacity:calc(.35 + var(--heat)*.65); mix-blend-mode:screen}
.bowl__type{
  font:900 13px/1 var(--font-label); letter-spacing:.42em;
  fill:var(--pink); opacity:.85;
}

/* the music-night visualiser */
.viz{
  display:flex; align-items:flex-end; gap:4px; height:clamp(56px,9vh,84px);
  transform:scaleY(calc(.24 + var(--heat) * .76));
  transform-origin:bottom center;
  transition:transform .18s ease-out;
}
.viz__bar{
  flex:1; height:100%;
  background:linear-gradient(180deg, var(--cream), var(--pink) 45%, var(--chili));
  box-shadow:0 0 10px rgba(255,79,163,calc(.5*var(--neon-op)));
  transform-origin:bottom center;
  animation:vbar var(--d, .6s) ease-in-out infinite alternate;
  animation-delay:calc(var(--n, 1) * -.14s);
  opacity:calc(.4 + var(--heat)*.6);
}
@keyframes vbar{
  from{transform:scaleY(calc(var(--b, .5) * .34))}
  to  {transform:scaleY(var(--b, .5))}
}
html[data-night="on"] .viz__bar{box-shadow:0 0 6px rgba(255,79,163,.25)}

.viz__caption{
  margin:.7rem 0 0;
  font:700 .68rem/1.45 var(--font-label); letter-spacing:.13em; text-transform:uppercase;
  color:var(--ink);
}
.viz__caption-key{color:var(--chili)}

/* ── THE BOARD ──────────────────────────────────────────────────── */

.menu-wrap{position:relative}
.strands{
  position:absolute; inset:0; width:100%; height:100%;
  pointer-events:none; z-index:0; overflow:visible;
}
.strand{
  fill:none; stroke:var(--uv); stroke-width:3;
  stroke-linecap:round;
  stroke-dasharray:9 13;
  opacity:calc(.4 * var(--neon-op));
  animation:nood 1.1s linear infinite;
}
.strand--lit{stroke:var(--pink); stroke-width:5; opacity:calc(.75 + var(--heat)*.25)}
@keyframes nood{to{stroke-dashoffset:-22}}

.menu-cols{
  position:relative; z-index:1;
  display:grid; gap:clamp(18px,3vw,34px);
  grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
}

.cat__head{display:flex; align-items:baseline; gap:10px; margin-bottom:1rem; flex-wrap:wrap}
.cat__name{
  font:900 1.15rem/1 var(--font-display); letter-spacing:.01em;
  text-transform:uppercase; margin:0; color:var(--cream);
}
.cat__gate{
  font:700 .66rem/1 var(--font-label); letter-spacing:.14em; text-transform:uppercase;
  color:var(--night-ink); border:1px dashed var(--uv);
  padding:.35em .6em;
}
.cat.is-open .cat__gate{color:var(--cyan); border-color:var(--cyan)}
.cat__rule{
  height:1px; flex:1 1 100%;
  background:repeating-linear-gradient(90deg,var(--rule) 0 6px, transparent 6px 12px);
}
.cat__list{list-style:none; margin:0; padding:0; display:grid; gap:10px}

.cat__lockmsg{
  display:none;
  margin:0 0 .9rem; padding:.6em .8em;
  font:400 .88rem/1.4 var(--font-note); color:var(--chili);
  border:1px dashed rgba(255,93,72,.5);
}
.cat.is-locked .cat__lockmsg{display:block}

.item{
  width:100%; cursor:pointer; text-align:left;
  display:grid; grid-template-columns:1fr auto; align-items:baseline; gap:4px 10px;
  padding:.85em 1em;
  background:rgba(9,10,24,.84);
  color:var(--ink);
  border:1px solid rgba(125,92,255,.28);
  font:400 .95rem/1.35 var(--font-label); letter-spacing:.03em;
  transition:border-color .18s, background .18s;
}
.item:hover:not(:disabled){border-color:var(--pink); background:rgba(255,79,163,.12)}
.item__price{font:900 .95rem/1 var(--font-display); color:var(--chili); letter-spacing:.02em}
.item__note{
  grid-column:1/-1;
  font:400 .84rem/1.3 var(--font-note);
  color:var(--cyan); opacity:.85;
}
.item:disabled{
  cursor:not-allowed; color:var(--night-ink);
  border-style:dashed; border-color:rgba(125,92,255,.22);
  filter:blur(3.5px); opacity:.42; user-select:none;
}
.item.is-picked{animation:wobble .62s cubic-bezier(.36,.07,.19,.97)}
@keyframes wobble{
  10%,90%{transform:translateX(-2px)}
  20%,80%{transform:translateX(4px)}
  30%,50%,70%{transform:translateX(-7px)}
  40%,60%{transform:translateX(7px)}
}
.item.is-picked{border-color:var(--cyan); background:rgba(88,230,255,.16)}

/* ── THE DECK ───────────────────────────────────────────────────── */

.deck{
  display:grid; gap:clamp(18px,3vw,34px);
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  align-items:start;
}
.deck__unit{
  padding:clamp(16px,3vw,26px);
  background:linear-gradient(150deg, rgba(88,230,255,.10), rgba(16,17,38,.7));
  border:1px solid rgba(88,230,255,.3);
  clip-path:polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
}

.tape{
  background:#0A0B1B; border:1px solid rgba(255,240,208,.25);
  padding:12px;
  clip-path:polygon(10px 0, calc(100% - 10px) 0, 100% 10px, 100% calc(100% - 10px), calc(100% - 10px) 100%, 10px 100%, 0 calc(100% - 10px), 0 10px);
}
.tape__window{
  position:relative;
  height:clamp(104px,15vw,140px);
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:0 8px;
  background:linear-gradient(180deg,#1B1730,#100E22);
  border:1px solid rgba(255,240,208,.18);
  cursor:ew-resize; touch-action:none;
}
.reel{width:clamp(78px,12vw,104px); flex:none}
.reel svg{width:100%; height:auto; display:block; fill:none; stroke-linecap:round}
.reel__ring{stroke:rgba(255,240,208,.4); stroke-width:1.4; fill:none}
.reel__spokes{
  stroke:rgba(255,240,208,.55); stroke-width:2.2;
  transform-box:fill-box; transform-origin:50% 50%;
}
.reel__hub{fill:rgba(125,92,255,.35); stroke:rgba(255,240,208,.7); stroke-width:2}
.tape__band{
  flex:1 1 auto; height:14px;
  background:repeating-linear-gradient(90deg, #3A2A1E 0 6px, #2A1E16 6px 12px);
  border-top:1px solid rgba(255,240,208,.25);
  border-bottom:1px solid rgba(255,240,208,.25);
}

.counter{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  margin-top:12px; padding:.5em .7em;
  background:rgba(255,93,72,.08); border:1px solid rgba(255,93,72,.35);
  font:900 1.35rem/1 var(--font-label); letter-spacing:.14em;
  color:var(--chili);
}
.counter__side{
  font-size:.78rem; color:var(--cyan);
  border-left:2px solid rgba(255,93,72,.4); padding-left:10px;
}

.deck__controls{display:flex; gap:10px; flex-wrap:wrap; margin-top:14px}

.scrub{margin-top:16px}
.scrub__label{
  display:block; margin-bottom:.5em;
  font:700 .68rem/1 var(--font-label); letter-spacing:.18em; text-transform:uppercase;
  color:var(--cyan);
}
.scrub__input{
  -webkit-appearance:none; appearance:none;
  width:100%; height:26px; background:transparent; cursor:pointer;
}
.scrub__input::-webkit-slider-runnable-track{
  height:8px;
  background:repeating-linear-gradient(90deg, var(--uv) 0 4px, rgba(125,92,255,.18) 4px 8px);
  border:1px solid rgba(125,92,255,.5);
}
.scrub__input::-moz-range-track{
  height:8px;
  background:repeating-linear-gradient(90deg, var(--uv) 0 4px, rgba(125,92,255,.18) 4px 8px);
  border:1px solid rgba(125,92,255,.5);
}
.scrub__input::-webkit-slider-thumb{
  -webkit-appearance:none; appearance:none;
  width:16px; height:26px; margin-top:-10px;
  background:var(--pink); border:0;
  box-shadow:0 0 12px var(--pink);
  clip-path:polygon(50% 0,100% 26%,100% 100%,0 100%,0 26%);
}
.scrub__input::-moz-range-thumb{
  width:16px; height:26px; border-radius:0;
  background:var(--pink); border:0;
  box-shadow:0 0 12px var(--pink);
}

.deck__now{
  margin:14px 0 0;
  font:700 .74rem/1.4 var(--font-label); letter-spacing:.14em; text-transform:uppercase;
  color:var(--ink);
}
.deck__now b{color:var(--pink)}
.deck__legal{
  margin:1.4rem 0 0;
  font:400 .8rem/1.5 var(--font-label); letter-spacing:.04em;
  color:var(--night-ink); opacity:.9;
}

.tracklist{list-style:none; margin:0; padding:0; display:grid; gap:10px; counter-reset:trk}
.track{
  width:100%; cursor:pointer; text-align:left;
  display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:4px 12px;
  padding:.85em 1em;
  background:rgba(9,10,24,.82);
  border:1px solid rgba(88,230,255,.24);
  color:var(--ink);
  font:400 .95rem/1.3 var(--font-label); letter-spacing:.03em;
  transition:border-color .18s, background .18s;
}
.track::before{
  content:counter(trk,decimal-leading-zero);
  counter-increment:trk;
  font:900 .8rem/1 var(--font-display); color:var(--chili);
}
.track:hover{border-color:var(--cyan); background:rgba(88,230,255,.12)}
.track__time{font:700 .74rem/1 var(--font-label); letter-spacing:.12em; color:var(--cyan)}
.track__desc{grid-column:2/-1; font:400 .84rem/1.35 var(--font-note); color:var(--ink); opacity:.8}
.track.is-current{border-color:var(--pink); background:rgba(255,79,163,.16)}
.track.is-current::before{color:var(--pink)}

/* ── TONIGHT ────────────────────────────────────────────────────── */

.sets{
  list-style:none; margin:0; padding:0; display:grid;
  gap:clamp(14px,2.4vw,24px);
  grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
}
.set{
  position:relative;
  padding:clamp(16px,2.6vw,24px);
  background:rgba(9,10,24,.76);
  border:1px solid rgba(125,92,255,.3);
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  transition:border-color .2s, transform .2s;
}
.set:hover{border-color:var(--pink); transform:translateY(-3px)}
.set--hot{border-color:var(--pink); box-shadow:0 0 40px rgba(255,79,163,calc(.16*var(--neon-op)))}
.set__time{font:900 .78rem/1 var(--font-label); letter-spacing:.22em; color:var(--chili)}
.set__name{
  font:900 clamp(1.6rem,4vw,2.4rem)/1 var(--font-display);
  text-transform:uppercase; margin:.35em 0 .4em; color:var(--cream);
  text-shadow:0 0 22px rgba(255,79,163,calc(.3*var(--neon-op)));
}
.set__desc{margin:0; font:400 .96rem/1.55 var(--font-label); color:var(--ink)}
.set__tag{
  display:inline-block; margin-top:1rem;
  font:700 .64rem/1 var(--font-label); letter-spacing:.2em; text-transform:uppercase;
  color:var(--cyan); border:1px dashed var(--cyan); padding:.4em .6em;
}

/* ── FIND / FOOTER ──────────────────────────────────────────────── */

.find{padding-bottom:clamp(2.5rem,6vw,4.5rem)}
.find__grid{
  display:grid; gap:clamp(20px,4vw,48px);
  grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  align-items:start;
}
.find__addr{
  font-style:normal;
  font:400 clamp(1.05rem,2.4vw,1.3rem)/1.6 var(--font-label); letter-spacing:.04em;
  color:var(--ink);
}
.find__addr-note{font-family:var(--font-note); color:var(--cyan); font-size:.95rem}

.hours{margin:0; display:grid; border-top:1px dashed var(--rule)}
.hours > div{
  display:flex; justify-content:space-between; gap:16px; align-items:baseline;
  padding:.85rem 0; border-bottom:1px dashed var(--rule);
}
.hours dt{
  font:700 .74rem/1.3 var(--font-label); letter-spacing:.16em;
  text-transform:uppercase; color:var(--cyan);
}
.hours dd{margin:0; text-align:right; font:400 .96rem/1.4 var(--font-label); color:var(--ink)}

.footer{
  border-top:2px solid var(--chili);
  background:rgba(9,10,24,.8);
  padding:2rem 0 3rem;
}
.footer__inner{
  display:flex; flex-wrap:wrap; gap:10px 30px;
  justify-content:space-between; align-items:baseline;
}
.footer__mark{
  margin:0; font:900 .8rem/1.4 var(--font-display); letter-spacing:.02em;
  text-transform:uppercase; color:var(--cream);
}
.footer__tiny{
  margin:0; font:400 .78rem/1.4 var(--font-label); letter-spacing:.06em;
  color:var(--night-ink);
}

/* ── chopstick cursor ───────────────────────────────────────────── */

.sticks{
  position:fixed; left:0; top:0; z-index:50;
  pointer-events:none;
  opacity:0;
  transition:opacity .3s;
  will-change:transform;
}
.sticks.is-on{opacity:1}
.sticks i{
  position:absolute; left:0; top:0;
  display:block; width:clamp(110px,15vw,190px); height:5px;
  transform-origin:0 50%;
  transition:transform .14s cubic-bezier(.2,.9,.3,1);
}
.sticks__one{
  background:linear-gradient(90deg, rgba(88,230,255,0), var(--cyan) 42%, var(--cream));
  box-shadow:0 0 12px rgba(88,230,255,.6);
}
.sticks__two{
  background:linear-gradient(90deg, rgba(255,79,163,0), var(--pink) 42%, var(--cream));
  box-shadow:0 0 12px rgba(255,79,163,.5);
}

/* ── responsive ─────────────────────────────────────────────────── */

@media (max-width:1000px){
  .hero__grid{grid-template-columns:1fr}
  .deck{grid-template-columns:1fr}
  .bowlpanel{order:-1}
  .hero__type .display{font-size:clamp(2.3rem,10.5vw,4.4rem)}
}

@media (max-width:720px){
  .masthead__nav{order:3; width:100%; margin-left:0; justify-content:space-between}
  .nightbtn{margin-left:auto}
  .ticker__track{font-size:.68rem; letter-spacing:.18em}
  .viz{gap:3px}
  .steam{height:180px}
  .footer__inner{flex-direction:column}

  /* openers collapse to one column, and the rotated annotations
     un-rotate — a rotated box overhangs its column and would widen
     the page. this is the fix for the old 43px overflow. */
  .service--rail{grid-template-columns:minmax(0,1fr); align-items:start}
  .service--banner{gap:.7rem 1rem}
  .service--banner .service__title{margin-right:0; flex:1 1 100%}
  .service--stamp{gap:.3rem .9rem}
  .service--stamp .service__live{flex:1 1 100%}
}

@media (max-width:420px){
  .hero__facts li{max-width:none; flex:1 1 100%}
  .menu-cols{grid-template-columns:1fr}
  .deck__controls .btn{flex:1 1 auto}
  /* a rotated annotation overhangs its column; un-rotate it so it cannot widen the page */
  .service .note{flex:1 1 100%; transform:none; max-width:100%}
  .service__lede{max-width:100%}
  .service--banner{padding-inline:clamp(10px,3vw,16px)}
}

/* ── reduced motion ─────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }

  .ticker__track{animation:none; transform:none}

  /* the steam stops rising and stands still as stacked words */
  .steam__wisp{animation:none; opacity:calc(.12 + var(--heat) * .55)}
  .steam__wisp:nth-of-type(1){transform:translateY(0)}
  .steam__wisp:nth-of-type(2){transform:translateY(-24px)}
  .steam__wisp:nth-of-type(3){transform:translateY(-46px)}
  .steam__wisp:nth-of-type(4){transform:translateY(-68px)}
  .steam__wisp:nth-of-type(5){transform:translateY(-90px)}
  .steam__wisp:nth-of-type(6){transform:translateY(-112px)}
  .steam__wisp:nth-of-type(7){transform:translateY(-134px)}

  .viz{transform:scaleY(calc(.5 + var(--heat) * .5))}
  .viz__bar{animation:none; transform:scaleY(var(--b, .5))}

  .strand{animation:none}
  .steam__cursor{animation:none}
  .kicker__pip{animation:none}
  .item.is-picked{animation:none; border-color:var(--cyan); background:rgba(88,230,255,.16)}
  .btn:hover{transform:none}
  .set:hover{transform:none}

  /* the painted room must survive reduced motion intact — a still frame of a
     ramen shop at 2am, not an empty box with the lights off. every layer
     keeps its resting state; only the movement stops. */
  .hero__wash{opacity:1}
  .hero__scene{opacity:calc(.7 + var(--heat) * .3)}
  .scene__lantern{transform:none}
  .scene__lantern-glow{opacity:.34; transform:none}
  .scene__win rect{opacity:1}
  .scene__rain path{opacity:.34}
  .scene__plume{transform:none; opacity:1}
  .scene__puff{transform:none}
  .scene__counter{opacity:1}
  .bowlpanel::after{opacity:calc(.86 + var(--heat) * .14)}
  .bowl__halo{opacity:calc(.42 + var(--heat) * .5); transform:none}
  .broth{transform:none}
  .tube, .crisp{opacity:1; transform:none}
}

/* coarse pointers never get the custom chopstick cursor */
@media (hover:none),(pointer:coarse){
  .sticks{display:none}
}