/* ============================================================
   hawkins.css: /hawkins/, the Stranger Things interface.

   One page where there used to be two. /starcourt/ was the mall
   and the Palace Arcade; /upside-down/ was the Byers house and
   the walkie-talkie; both drew the same town and both carried
   the same alphabet wall, so they were one page that had been
   typed twice. This is the merge, and both old addresses
   redirect here.

   WHAT THE SCROLL DOES, which is the point of the merge: the top
   of the page is Hawkins in the summer of 1985, the mall open and
   lit. Scrolling IS the descent. hawkins.js writes one number,
   --dp (0 at the top, 1 at the foot), onto the body on every
   frame of scroll, and everything cold on this page is keyed to
   it: the sky warms down, the vines come in, the carpet dims, the
   neon goes out. Past the halfway mark the body also takes
   .is-down, which is the old binary state the switch always set,
   so the readouts, the fireworks and the spores keep working
   exactly as they did and the light switch on the wall still
   throws the whole town over at once for anyone who would rather
   not walk down.

   Drawn in CSS and SVG; the fireworks, the spores, the lightning
   and the descent itself are hawkins.js.
   ============================================================ */

/* these pages load no shared stylesheet, so they carry their own reset */
* { margin: 0; padding: 0; box-sizing: border-box; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }
html.smooth { scroll-behavior: smooth; }   /* added after load, so back/forward restoration is not animated */
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.ud {
  --type:   "Courier Prime", "Courier New", ui-monospace, monospace;   /* the typewriter: everything read */
  --paint:  "Permanent Marker", "Marker Felt", cursive;                 /* Joyce's brush: everything painted */
  --lcd:    "VT323", ui-monospace, monospace;                           /* anything with a screen */
  --tube:   "Monoton", "Bungee", Impact, sans-serif;                    /* bent glass: the big neon signs */
  --block:  "Bungee", Impact, "Arial Black", sans-serif;               /* backlit plastic: marquees and shop names */
  --script: "Yellowtail", "Brush Script MT", cursive;                  /* the hand-lettered signs, Scoops Ahoy's */
  --ease:   cubic-bezier(.16, 1, .3, 1);
  --swap:   1.2s;                                                       /* how long the town takes to turn over */

  /* Starcourt at night, 1985: a deep violet dark under pastel neon */
  --night:   #120c1f;
  --panel:   rgba(30, 20, 46, .88);
  --panel-2: rgba(42, 28, 62, .94);
  --ink:     #fff3f8;
  --dim:     #e3d6ec;
  --mute:    #b9a9ca;
  --line:    rgba(255, 170, 230, .2);
  --pink:    #ff5fb4;
  --teal:    #3ee6d6;
  --sun:     #ffd23f;
  --violet:  #b48cff;
  --red:     #e8261d;
  --red-ink: #ff6a5c;          /* the show's red, lifted until it reads as small text on the dark */
  --red-deep:#c41a12;          /* and deepened until white reads on it, for the filled buttons */
  --warm:    #ffb347;
  --paintc:  #1a120c;          /* the black paint on the wall */
  --cab-1:   #221a30;          /* a cabinet's sides */
  --cab-2:   #120d1a;
  --carpet:  .62;              /* how much of the arcade carpet's pattern shows */
  --aw-1:    #d7263d;          /* the Scoops Ahoy awning: red and white */
  --aw-2:    #fff6ea;
  --navy:    #1f3a68;
  --paper:   #fffaf0;

  background: var(--night);
  color: var(--ink);
  font-family: var(--type);
  min-height: 100vh;
  overflow-x: hidden;
  transition: background-color var(--swap), color var(--swap);
}

/* the same town, turned over: the pastels go out and everything goes cold,
   except the red, which is the only light left on that side */
.ud.is-down {
  --night:   #0a0e13;
  --panel:   rgba(15, 21, 28, .88);
  --panel-2: rgba(22, 31, 40, .94);
  --ink:     #dde6ed;
  --dim:     #b3c0cb;
  --mute:    #8f9daa;
  --line:    rgba(170, 196, 220, .2);
  --pink:    #ff5446;
  --teal:    #9bb8cc;
  --sun:     #e0614f;
  --violet:  #8a9bad;
  --paintc:  #0b1015;
  --cab-1:   #1a222a;
  --cab-2:   #0d1216;
  --carpet:  .2;
  --aw-1:    #5d2a2a;
  --aw-2:    #9aa6b0;
  --navy:    #1d2a36;
  --paper:   #dbe2e7;
}

:focus-visible { outline: 2px solid var(--sun); outline-offset: 3px; }

/* ───────────── the sky: a card with a face on each side ───────────── */
.ud-field { position: fixed; inset: 0; z-index: 0; pointer-events: none; perspective: 1600px; overflow: hidden; }
.ud-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.ud-card {
  position: absolute; inset: 0; transform-style: preserve-3d;
  transition: transform 1.3s cubic-bezier(.65, 0, .35, 1);
}
.ud.is-down .ud-card { transform: rotateX(180deg); }
.ud-face { position: absolute; inset: 0; overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ud-face > span { position: absolute; }
/* WebKit does not always honor backface-visibility on a face this large,
   and the back would show through the front; so the face turned away is
   also hidden outright, swapped at the halfway point of the turn, where
   both faces are edge-on and neither can be seen anyway */
.ud-face { transition: visibility 0s linear .65s; }
.ud-face--down, .ud.is-down .ud-face--up { visibility: hidden; }
.ud.is-down .ud-face--down { visibility: visible; }

/* front: a July night over the mall, the sky warmed pink where its lights are */
.ud-face--up { background: linear-gradient(180deg, #07061a 0%, #140c2c 40%, #331542 74%, #4a1c4e 100%); }
.ud-stars {
  inset: 0 0 30% 0; opacity: .8;
  background-image:
    radial-gradient(1.2px 1.2px at 12% 18%, #fff 50%, transparent),
    radial-gradient(1px 1px at 28% 42%, #f6eadb 50%, transparent),
    radial-gradient(1.4px 1.4px at 46% 12%, #fff 50%, transparent),
    radial-gradient(1px 1px at 63% 33%, #e9e2ff 50%, transparent),
    radial-gradient(1.2px 1.2px at 81% 22%, #fff 50%, transparent),
    radial-gradient(1px 1px at 92% 48%, #f6eadb 50%, transparent),
    radial-gradient(1px 1px at 6% 58%, #fff 50%, transparent),
    radial-gradient(1.3px 1.3px at 37% 64%, #fff 50%, transparent);
  background-size: 420px 300px;
}
.ud-glow {
  inset: 0;
  background:
    radial-gradient(40% 24% at 50% 100%, rgba(255, 95, 180, .26), transparent 70%),
    radial-gradient(28% 16% at 50% 100%, rgba(62, 230, 214, .16), transparent 70%),
    radial-gradient(120% 80% at 50% 50%, transparent 55%, rgba(0, 0, 0, .5));
}
.ud-fire { position: absolute; inset: 0; width: 100%; height: 100%; }
.ud-trees { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: clamp(150px, 26vh, 260px); }
.ud-trees use { fill: currentColor; }
.ud-face--up .ud-trees { color: #07050d; }
.ud-face--up .ud-glass { fill: url(#udGlass); opacity: .82; }
.ud-ribs { fill: none; stroke: #07050d; stroke-width: 2.4; }
.ud-shops { fill: #ffc98a; opacity: .7; }
.ud-doors { fill: #fff0dc; opacity: .85; }
.ud-tube { fill: none; stroke: #ff7ac0; stroke-width: 3; stroke-linecap: round; }
.ud-mallname { font-family: var(--tube); font-size: 15px; letter-spacing: 1px; fill: #bdfff7; }
.ud-lamp { fill: #ffe9b0; }
.ud-face--up .ud-trees { filter: drop-shadow(0 0 3px rgba(255, 120, 200, .35)); }

/* back: the Upside Down, cold and stormy, already turned so it lands upright */
.ud-face--down {
  transform: rotateX(180deg);
  background: linear-gradient(180deg, #1c2530 0%, #131a22 46%, #0b0f14 100%);
}
.ud-clouds {
  inset: -12% -25% 28% -25%;
  background:
    radial-gradient(60% 34% at 50% 6%, rgba(150, 32, 26, .26), transparent 70%),
    radial-gradient(30% 22% at 18% 28%, rgba(84, 100, 116, .55), transparent 70%),
    radial-gradient(34% 26% at 58% 16%, rgba(72, 86, 100, .6), transparent 70%),
    radial-gradient(28% 20% at 86% 36%, rgba(92, 106, 120, .45), transparent 70%),
    radial-gradient(40% 24% at 36% 50%, rgba(60, 72, 84, .4), transparent 70%);
  animation: ud-cloud 70s ease-in-out infinite alternate;
}
@keyframes ud-cloud { to { transform: translateX(8%); } }
.ud-face--down .ud-trees { color: #05080b; filter: drop-shadow(0 -1px 6px rgba(255, 60, 40, .22)); }
.ud-face--down .ud-glass { fill: #111820; }
.ud-roots { fill: none; stroke: #05080b; stroke-width: 4; stroke-linecap: round; }

/* the lightning: one soft red pulse at a time, several seconds apart,
   never a strobe (starcourt.js picks where and when) */
.ud-flash {
  left: var(--x, 50%); top: -30vh; width: 130vmin; height: 95vmin; translate: -50% 0;
  border-radius: 50%; opacity: 0;
  background: radial-gradient(closest-side, rgba(255, 64, 44, .5), rgba(170, 26, 20, .22) 45%, transparent);
}
.ud-bolt {
  position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; overflow: visible;
  filter: drop-shadow(0 0 4px #ff2a1a) drop-shadow(0 0 14px rgba(255, 42, 26, .7));
}
.ud-bolt path { fill: none; stroke: #ff7a66; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; vector-effect: non-scaling-stroke; }
.ud-face--down.is-strike .ud-flash,
.ud-face--down.is-strike .ud-bolt { animation: ud-strike 1.9s ease-out both; }
@keyframes ud-strike { 0% { opacity: 0; } 7% { opacity: 1; } 24% { opacity: .5; } 100% { opacity: 0; } }

.ud-spores {
  position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity var(--swap);
}
.ud.is-down .ud-spores { opacity: 1; }

/* ───────────── header ───────────── */
.ud-top {
  position: relative; z-index: 3;
  display: flex; align-items: center; justify-content: space-between; gap: 0.3rem 1rem; flex-wrap: wrap;
  padding: calc(0.6rem + env(safe-area-inset-top, 0px)) max(clamp(1rem, 4vw, 2.6rem), env(safe-area-inset-right, 0px)) 0.6rem max(clamp(1rem, 4vw, 2.6rem), env(safe-area-inset-left, 0px));
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(0, 0, 0, .55), rgba(0, 0, 0, .15));
  font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--dim);
  transition: opacity 1.1s ease;
}
.ud-exit { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; color: var(--pink); font-weight: 700; transition: color var(--swap); }
.ud-exit:hover { color: #ffd2e8; }
.ud-exit svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; }
.ud-clock {
  font-family: var(--lcd); font-size: 1.2rem; letter-spacing: 0.08em; color: var(--teal);
  text-shadow: 0 0 8px color-mix(in srgb, var(--teal) 50%, transparent); white-space: nowrap;
  transition: color var(--swap);
}

.ud-main {
  position: relative; z-index: 1; max-width: 1280px; margin: 0 auto;
  padding: 0 max(clamp(1rem, 4vw, 2.6rem), env(safe-area-inset-right, 0px)) calc(5rem + env(safe-area-inset-bottom, 0px)) max(clamp(1rem, 4vw, 2.6rem), env(safe-area-inset-left, 0px));
  transition: opacity 1.1s ease;
}

/* ───────────── the stage ─────────────
   One column on a phone, with the left column dissolved so the wall's
   sticky box belongs to the whole stage and can ride over the mall and
   the arcade. Two columns from 1000px, where the left column stretches
   to the height of the right one and the wall sticks inside it. */
.ud-stage { display: flex; flex-direction: column; gap: 1.6rem; padding-top: clamp(1.4rem, 4vw, 2.6rem); }
.ud-left { display: contents; }
.ud-right { display: flex; flex-direction: column; gap: clamp(2.4rem, 5vw, 3.4rem); min-width: 0; }
.ud-wallbox {
  position: sticky; top: calc(8px + env(safe-area-inset-top, 0px)); z-index: 4;
  container-type: inline-size;
  /* riding over the rooms, it should stay about a quarter of the screen:
     on a tablet held upright a full-width wall would be over a third */
  width: 100%; max-width: 540px; margin: 0 auto;
  /* the machine's bezel: black plastic round the glass */
  padding: clamp(5px, 1.8cqi, 14px);
  border-radius: clamp(8px, 2.4cqi, 16px);
  background: linear-gradient(180deg, #241c30, #0d0a13);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), inset 0 2px 0 rgba(255, 255, 255, .06), 0 26px 44px -20px rgba(0, 0, 0, .9), 0 0 0 2px #05040a;
  transition: background var(--swap);
}
/* the glass: a faint glare and scanlines over the wallpaper, so the wall
   reads as the picture on a screen without losing the paint */
.ud-wallbox::after {
  content: ""; position: absolute; inset: clamp(5px, 1.8cqi, 14px); z-index: 5; pointer-events: none;
  border-radius: clamp(5px, 1.6cqi, 12px);
  background:
    radial-gradient(70% 40% at 24% 8%, rgba(255, 255, 255, .13), transparent 70%),
    repeating-linear-gradient(180deg, rgba(0, 0, 0, .07) 0 1px, transparent 1px 3px);
  box-shadow: inset 0 0 30px rgba(0, 0, 0, .45);
}
@media (min-width: 1000px) {
  .ud-stage { display: grid; grid-template-columns: minmax(0, 1.04fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 3.6rem); }
  .ud-left { display: flex; flex-direction: column; }
  .ud-wallbox { top: 1.2rem; max-width: none; border-radius: 0 0 16px 16px; }
  .ud-right { padding-top: 0.4rem; }
}
/* a phone held sideways has no room for a wall that follows you */
@media (max-height: 560px) { .ud-wallbox { position: relative; top: auto; } }

/* ───────────── the headline: the machine's marquee ───────────── */
.ud-headline {
  position: relative; overflow: hidden; text-align: center;
  padding: clamp(1rem, 3vw, 1.6rem) 1rem clamp(0.8rem, 2vw, 1.1rem);
  border-radius: 16px 16px 4px 4px;
  background:
    radial-gradient(80% 120% at 50% 0%, rgba(255, 95, 180, .22), transparent 70%),
    linear-gradient(180deg, #2a1838, #160e22);
  box-shadow: inset 0 0 0 1px rgba(255, 170, 230, .22), inset 0 -3px 0 rgba(0, 0, 0, .5), 0 0 0 2px #05040a;
  transition: background var(--swap);
}
.ud.is-down .ud-headline { background: radial-gradient(80% 120% at 50% 0%, rgba(255, 84, 70, .14), transparent 70%), linear-gradient(180deg, #18202a, #0d1218); }
.ud-kicker { font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: var(--teal); font-weight: 700; transition: color var(--swap); }
.ud-title {
  margin-top: 0.5rem; display: flex; flex-direction: column; align-items: center;
  font-weight: 400; line-height: 1;
  transform: perspective(700px) rotateX(0deg); transform-origin: 50% 52%;
  transition: transform var(--swap) var(--ease);
}
.ud-title-a {
  --n: var(--pink);
  font-family: var(--script); font-size: clamp(2rem, 5vw, 3rem); color: #ffe6f3; margin-bottom: -0.1em;
  transform: rotate(-6deg); text-shadow: 0 0 2px #fff, 0 0 6px var(--n), 0 0 16px var(--n), 0 0 34px var(--n);
}
.ud-title-b {
  --n: var(--teal);
  font-family: var(--tube); font-size: clamp(1.9rem, 4.6vw, 3.5rem); letter-spacing: 0.02em; text-transform: uppercase;
  color: #eafffd; text-shadow: 0 0 2px #fff, 0 0 6px var(--n), 0 0 18px var(--n), 0 0 40px var(--n);
  animation: ud-buzz 9s steps(1) infinite;
}
/* the tube that will not quite stay lit */
@keyframes ud-buzz { 0%, 91%, 93.5%, 100% { opacity: 1; } 92% { opacity: .55; } 93% { opacity: .85; } }
/* on the other side the title hangs the other way up, like its reflection */
.ud.is-down .ud-title { transform: perspective(700px) rotateX(180deg); }
.ud.is-down .ud-title-a { color: #ffd9d4; }
.ud.is-down .ud-title-b { color: #e6eef4; }
.ud-credit {
  display: flex; justify-content: center; flex-wrap: wrap; gap: 0.2rem 1.2rem; margin-top: 0.8rem;
  font-family: var(--lcd); font-size: 1.1rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--sun);
  transition: color var(--swap);
}

/* ───────────── Joyce's wall ───────────── */
.ud-wall {
  position: relative; isolation: isolate; overflow: hidden;
  padding: clamp(0.5rem, 3cqi, 1.5rem) clamp(0.45rem, 2.4cqi, 1.4rem) clamp(0.5rem, 2cqi, 1rem);
  border-radius: 3px;
  /* 1983 wallpaper: an ochre ground, a pinstripe and a small sprig,
     darkened at the edges where the lamplight does not reach */
  background:
    radial-gradient(circle at 25% 30%, rgba(122, 74, 32, .2) 0 1.6px, transparent 2.2px) 0 0 / 30px 30px,
    radial-gradient(circle at 75% 80%, rgba(255, 238, 200, .16) 0 1.6px, transparent 2.2px) 0 0 / 30px 30px,
    repeating-linear-gradient(90deg, rgba(96, 58, 22, .11) 0 2px, transparent 2px 15px),
    linear-gradient(180deg, #c6a56c, #ad8d57);
  box-shadow: 0 26px 44px -20px rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(255, 240, 210, .14);
}
/* the other side's wallpaper, faded in over this one: the same pattern,
   gone blue-gray, with the plaster showing through where it has peeled */
.ud-wall::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0;
  transition: opacity var(--swap);
  background:
    radial-gradient(18% 14% at 82% 22%, rgba(180, 194, 204, .5), transparent 70%),
    radial-gradient(14% 20% at 12% 70%, rgba(176, 190, 200, .4), transparent 70%),
    radial-gradient(22% 16% at 40% 6%, rgba(20, 26, 32, .4), transparent 70%),
    radial-gradient(circle at 25% 30%, rgba(20, 30, 40, .22) 0 1.6px, transparent 2.2px) 0 0 / 30px 30px,
    repeating-linear-gradient(90deg, rgba(20, 30, 40, .12) 0 2px, transparent 2px 15px),
    linear-gradient(180deg, #8f9ca7, #7b8894);   /* light enough that the black paint still reads */
}
.ud.is-down .ud-wall::before { opacity: 1; }
/* damp on the plaster and the dark at the corners, both sides */
.ud-wall::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(26% 30% at 10% 18%, rgba(60, 34, 12, .2), transparent 70%),
    radial-gradient(22% 26% at 90% 74%, rgba(60, 34, 12, .18), transparent 70%),
    radial-gradient(130% 110% at 50% 45%, transparent 55%, rgba(30, 16, 4, .5));
}

.ud-vines { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; pointer-events: none; opacity: 0; transition: opacity var(--swap); }
.ud-vines path {
  fill: none; stroke: #121820; stroke-width: 5; stroke-linecap: round; vector-effect: non-scaling-stroke;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 2.6s var(--ease) .4s;
}
.ud-vines path.ud-vines-thin { stroke-width: 2.5; transition-delay: 1.2s; }
.ud.is-down .ud-vines { opacity: .9; }
.ud.is-down .ud-vines path { stroke-dashoffset: 0; }

/* nine columns at every width: A to H and the switch, I to Q, R to Z */
.ud-letters {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: repeat(9, minmax(0, 1fr));
  row-gap: clamp(0.2rem, 1.8cqi, 1rem);
}
.ud-cell {
  --bw: clamp(9px, 2.6cqi, 17px);            /* a bulb's width; everything on it scales from this */
  position: relative; display: flex; flex-direction: column; align-items: center;
  padding-top: 3px;
}
/* the wire, sagging from this bulb to the next one along */
.ud-cell::before {
  content: ""; position: absolute; z-index: 1; left: 50%; top: 2px; width: 100%; height: calc(var(--bw) * .9);
  border-bottom: 2px solid #2a3524; border-radius: 0 0 50% 50% / 0 0 100% 100%;
}
.ud-cell[data-c="H"]::before, .ud-cell[data-c="Q"]::before, .ud-cell[data-c="Z"]::before, .ud-cell--switch::before { display: none; }
/* the light a lit bulb throws on the wallpaper round it */
.ud-cell::after {
  content: ""; position: absolute; z-index: 0; left: 50%; top: calc(var(--bw) * 1.4);
  width: calc(var(--bw) * 7.5); aspect-ratio: 1; translate: -50% -40%; border-radius: 50%;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--b) 62%, transparent), color-mix(in srgb, var(--b) 18%, transparent) 55%, transparent);
  opacity: 0; transition: opacity .14s; pointer-events: none;
}

/* a C9 bulb: a socket on the wire, and a glass drop hung from it at
   whatever angle it settled when the string went up */
.ud-bulb {
  position: relative; z-index: 2; display: block;
  width: var(--bw); height: calc(var(--bw) * 1.5); margin-top: calc(var(--bw) * .55);
  border-radius: 46% 46% 50% 50% / 32% 32% 68% 68%;
  background:
    radial-gradient(circle at 36% 28%, rgba(255, 255, 255, .38), transparent 32%),
    color-mix(in srgb, var(--b) 40%, #2a1d16);
  box-shadow: inset 0 -2px 3px rgba(0, 0, 0, .45), 0 1px 2px rgba(0, 0, 0, .35);
  transform: rotate(var(--r)); transform-origin: 50% calc(var(--bw) * -.55);
  transition: filter .4s, box-shadow .4s;
}
.ud-bulb::before {                     /* the socket */
  content: ""; position: absolute; left: 14%; right: 14%; bottom: 94%; height: calc(var(--bw) * .6);
  border-radius: 2px 2px 1px 1px;
  background: linear-gradient(90deg, #121c12, #34502f 45%, #121c12);
}
.ud-cell b {
  position: relative; z-index: 1; display: block; margin-top: calc(var(--bw) * .3);
  font-family: var(--paint); font-weight: 400; line-height: 1;
  font-size: clamp(1.15rem, 6.6cqi, 2.6rem); color: var(--paintc);
  transform: rotate(var(--t));
  transition: color var(--swap), text-shadow .14s;
}
/* where the brush was too wet: a thin run off the bottom of the stroke,
   ending in a bead */
.ud-drip::after {
  content: ""; position: absolute; left: 52%; top: 82%; width: 6px; height: 0.3em; translate: -50% 0;
  background:
    linear-gradient(currentColor, currentColor) 50% 0 / 2px 78% no-repeat,
    radial-gradient(circle at 50% calc(100% - 2.5px), currentColor 0 2.2px, transparent 2.7px);
}
.ud-cell:nth-child(4n) .ud-drip::after { left: 24%; height: 0.22em; }

/* lit: the glass goes white-hot in the middle, the wall glows, the paint catches it */
.ud-cell.is-on .ud-bulb {
  background: radial-gradient(circle at 40% 32%, #fffdf0 0 14%, var(--b) 52%, color-mix(in srgb, var(--b) 72%, #000));
  box-shadow: 0 0 calc(var(--bw) * .8) calc(var(--bw) * .22) var(--b), 0 0 calc(var(--bw) * 2.4) calc(var(--bw) * .5) color-mix(in srgb, var(--b) 55%, transparent);
  animation: ud-flick .26s ease-out;
}
.ud-cell.is-on::after { opacity: 1; }
.ud-cell.is-on b { text-shadow: 0 0 calc(var(--bw) * .9) color-mix(in srgb, var(--b) 75%, transparent); }
@keyframes ud-flick { 0% { filter: brightness(.45); } 40% { filter: brightness(1.2); } 65% { filter: brightness(.8); } 100% { filter: none; } }

/* idle: now and then a bulb warms a little on its own */
.ud-cell.is-faint .ud-bulb { filter: brightness(1.8) saturate(1.2); box-shadow: 0 0 calc(var(--bw) * .6) 1px color-mix(in srgb, var(--b) 55%, transparent); }

/* the surge before the house turns over: every bulb once, out of order */
.ud.is-surge .ud-cell .ud-bulb { animation: ud-surge .5s ease-out var(--sd, 0s) both; }
@keyframes ud-surge {
  0%, 100% { filter: none; }
  30% { filter: brightness(2.4) saturate(1.3); box-shadow: 0 0 calc(var(--bw) * .8) calc(var(--bw) * .2) var(--b); }
}

/* the light switch, screwed to the wall in the ninth place of the top row */
.ud-cell--switch { justify-content: center; }
.ud-switch {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 4px;
  width: 100%; min-height: 44px; padding: 2px 0; border: 0; background: none; cursor: pointer; color: var(--paintc);
}
/* the whole ninth place answers, and a little past it: 44px even on a phone */
.ud-switch::before { content: ""; position: absolute; inset: -6px -4px; }
.ud-plate {
  position: relative; display: block; width: clamp(22px, 5.6cqi, 36px); aspect-ratio: 2.2 / 3.5; border-radius: 3px;
  background:
    radial-gradient(circle at 50% 11%, #7d7360 0 1.4px, transparent 2px),
    radial-gradient(circle at 50% 89%, #7d7360 0 1.4px, transparent 2px),
    linear-gradient(160deg, #f8f1df, #d8ccaf);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .55), inset 0 -2px 3px rgba(0, 0, 0, .14);
}
.ud-plate i {                          /* the slot */
  position: absolute; left: 50%; top: 50%; width: 30%; height: 34%; translate: -50% -50%;
  border-radius: 2px; background: #2a241c;
}
.ud-plate i::after {                   /* the toggle: up in Hawkins, down on the other side */
  content: ""; position: absolute; left: 50%; bottom: 50%; width: 76%; height: 95%; translate: -50% 0;
  border-radius: 3px 3px 2px 2px;
  background: linear-gradient(90deg, #e9ddbf, #fffaf0 50%, #cbbfa0);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .5);
  transform-origin: 50% 100%; transition: transform .28s var(--ease);
}
.ud.is-down .ud-plate i::after { transform: scaleY(-1); }
.ud-switch-t { font-weight: 700; font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; line-height: 1; }
.ud-switch:hover .ud-plate { box-shadow: 0 2px 5px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(255, 255, 255, .55), 0 0 0 3px rgba(232, 38, 29, .55); }
.ud-switch:focus-visible { outline: 2px solid var(--paintc); outline-offset: 5px; }
/* a nudge once the wall has said its first words, so the switch is found */
.ud-switch.is-nudge .ud-plate { animation: ud-nudge .9s var(--ease) 2; }
@keyframes ud-nudge { 0%, 100% { translate: 0 0; } 30% { translate: 0 -3px; } 60% { translate: 0 1px; } }

/* what the wall is saying, read out underneath it */
.ud-wall-cap {
  position: relative; z-index: 2;
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 0.1rem 0.8rem;
  margin-top: clamp(0.4rem, 2cqi, 1rem); padding-top: clamp(0.3rem, 1.4cqi, 0.6rem);
  border-top: 1px dashed color-mix(in srgb, var(--paintc) 40%, transparent);
  color: var(--paintc); transition: color var(--swap);
}
.ud-cap-k { font-weight: 700; font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase; }
.ud-spelled { font-family: var(--paint); font-weight: 400; font-size: clamp(0.9rem, 3.8cqi, 1.35rem); letter-spacing: 0.06em; white-space: pre; }


/* behind the machine's glass, the wall takes the screen's rounded corners */
.ud-wall { border-radius: clamp(5px, 1.6cqi, 12px); }

/* ───────────── the intro and the second switch ───────────── */
.ud-sub { font-size: 1.06rem; line-height: 1.62; color: var(--dim); max-width: 60ch; transition: color var(--swap); }
.ud-cross {
  display: inline-flex; align-items: center; gap: 0.65rem; margin-top: 1.1rem;
  min-height: 44px; padding: 0.6rem 1.1rem; cursor: pointer;
  border: 1px solid color-mix(in srgb, var(--red) 65%, transparent); border-radius: 3px;
  background: rgba(232, 38, 29, .1); color: var(--red-ink);
  font-weight: 700; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase;
  transition: background .3s, color .3s;
}
.ud-cross:hover, .ud-cross:focus-visible { background: var(--red-deep); border-color: var(--red-deep); color: #fff4f2; }
.ud-cross:focus-visible { outline-color: var(--ink); }
.ud-cross-i {                          /* a toggle, drawn small */
  position: relative; width: 11px; height: 17px; border: 1.5px solid currentColor; border-radius: 2px;
}
.ud-cross-i::after {
  content: ""; position: absolute; left: 2px; right: 2px; top: 2px; height: 6px; border-radius: 1px; background: currentColor;
  transition: top .28s var(--ease);
}
.ud.is-down .ud-cross-i::after { top: 7px; }

/* ───────────── the mall directory ─────────────
   A standing board by the fountain: dark glass in a pastel frame, the
   name in neon, a floor plan, and the stores listed by level. */
.ud-board {
  container-type: inline-size;
  padding: clamp(1rem, 4cqi, 1.6rem) clamp(0.8rem, 3.4cqi, 1.4rem) clamp(1rem, 3.4cqi, 1.4rem);
  border: 3px solid transparent; border-radius: 22px;
  background:
    linear-gradient(180deg, var(--panel-2), var(--panel)) padding-box,
    linear-gradient(125deg, var(--pink), var(--violet) 45%, var(--teal)) border-box;
  box-shadow: 0 0 40px -12px color-mix(in srgb, var(--pink) 55%, transparent), 0 30px 50px -30px #000;
  transition: box-shadow var(--swap);
}
.ud-board-top { text-align: center; }
.ud-board-k { font-family: var(--lcd); font-size: 1.05rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); transition: color var(--swap); }
.ud-board-h { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; margin-top: 0.3rem; font-weight: 400; }
.ud-neon {
  --n: var(--pink);
  font-family: var(--tube); font-size: clamp(1.7rem, 9.4cqi, 3.1rem); line-height: 1.05; letter-spacing: 0.03em; text-transform: uppercase;
  color: #ffe9f5; text-shadow: 0 0 2px #fff, 0 0 6px var(--n), 0 0 18px var(--n), 0 0 38px var(--n);
}
.ud-board-d { font-family: var(--block); font-size: clamp(0.82rem, 3.4cqi, 1.05rem); letter-spacing: 0.24em; color: var(--teal); transition: color var(--swap); }
.ud-board-s { margin-top: 0.35rem; font-style: italic; font-size: 0.95rem; color: var(--mute); transition: color var(--swap); }

/* the floor plan; a shop lights in its own color when its listing is chosen */
.ud-plan { width: 100%; height: auto; margin-top: 1.1rem; overflow: visible; }
.ud-plan-wall { fill: rgba(255, 255, 255, .025); stroke: color-mix(in srgb, var(--teal) 55%, transparent); stroke-width: 2; }
.ud-plan-floor path { fill: color-mix(in srgb, var(--violet) 10%, transparent); }
.ud-plan-esc path { fill: color-mix(in srgb, var(--violet) 45%, transparent); }
.ud-plan-fountain circle { fill: none; stroke: color-mix(in srgb, var(--teal) 75%, transparent); stroke-width: 2; }
.ud-plan-fountain circle:last-child { fill: var(--teal); }
.ud-plan [data-u] rect { fill: rgba(255, 255, 255, .05); stroke: rgba(255, 255, 255, .26); stroke-width: 1.5; transition: fill .25s, stroke .25s; }
.ud-plan [data-u] text { font-family: var(--lcd); font-size: 20px; text-anchor: middle; fill: var(--dim); transition: fill .25s; }
.ud-plan [data-u].is-lit rect { fill: color-mix(in srgb, var(--u) 42%, transparent); stroke: var(--u); }
.ud-plan [data-u].is-lit text { fill: #fff; }
.ud-plan-here path { fill: var(--sun); }
.ud-plan-cut { fill: none; stroke: var(--red-ink); stroke-width: 1.5; stroke-dasharray: 6 5; }
.ud-plan-below [data-u] rect { stroke-dasharray: 3 3; }
.ud-plan-key {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.3rem 0.6rem; margin-top: 0.5rem;
  font-family: var(--lcd); font-size: 1.05rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--mute);
}
.ud-plan-key i { font-style: normal; }
.ud-plan-star {
  width: 14px; height: 14px; background: var(--sun);
  clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
}

/* a level's heading: lettering on the glass between two rules */
.ud-lvl {
  display: flex; align-items: center; gap: 0.7rem; margin: 1.5rem 0 0.7rem;
  font-family: var(--lcd); font-weight: 400; font-size: 1.35rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sun);
  transition: color var(--swap);
}
.ud-lvl::before, .ud-lvl::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.ud-lvl::before { flex: 0 0 14px; }
.ud-lvl span { flex: 0 1 auto; }
.ud-lvl i { font-style: normal; color: var(--red-ink); letter-spacing: 0.06em; }
.ud-lvl--below { color: var(--red-ink); }

/* each store: its unit number, its sign, and what is really in it */
.ud-rooms { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); }
.ud-room {
  --a: var(--b);
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 0.8rem; row-gap: 0.25rem; align-content: center;
  min-height: 44px; padding: 0.8rem 0.9rem;
  border: 1px solid var(--line); border-radius: 10px;
  background: rgba(0, 0, 0, .28);
  transition: border-color .3s, background-color .3s, box-shadow .3s;
}
/* on the far side every shop's color is drained most of the way to red */
.ud.is-down .ud-room { --a: color-mix(in srgb, var(--b) 30%, #ff5446); }
.ud-unit {
  grid-row: span 2; align-self: center; min-width: 2.6ch; text-align: center;
  font-family: var(--lcd); font-size: 1.7rem; line-height: 1; color: var(--a);
  text-shadow: 0 0 8px color-mix(in srgb, var(--a) 50%, transparent);
}
.ud-room b { font-family: var(--block); font-weight: 400; font-size: 0.95rem; line-height: 1.2; letter-spacing: 0.02em; color: var(--ink); transition: color var(--swap), text-shadow .3s; }
.ud-room > span:last-child { font-size: 0.92rem; line-height: 1.4; color: var(--dim); transition: color var(--swap); }
.ud-room--below { border-style: dashed; }
.ud-room:hover, .ud-room:focus-visible, .ud-room.is-picked {
  border-color: color-mix(in srgb, var(--a) 75%, transparent);
  background: color-mix(in srgb, var(--a) 10%, var(--panel-2));
  box-shadow: 0 0 26px -8px color-mix(in srgb, var(--a) 70%, transparent);
}
/* the sign lights up as if somebody hit the switch inside the shop */
.ud-room:hover b, .ud-room:focus-visible b, .ud-room.is-picked b {
  color: #fff; text-shadow: 0 0 2px #fff, 0 0 8px var(--a), 0 0 20px var(--a);
}
.ud-room:focus-visible { outline-color: var(--a); }

/* ───────────── the Palace Arcade ───────────── */
.ud-arcade {
  position: relative; isolation: isolate; container-type: inline-size;
  padding: clamp(0.9rem, 3.4cqi, 1.4rem) clamp(0.6rem, 2.6cqi, 1.2rem) clamp(1rem, 3.4cqi, 1.4rem);
  border-radius: 18px; overflow: hidden;
  background: #0b0812;
  box-shadow: inset 0 0 0 2px #05040a, 0 30px 50px -30px #000;
}
/* the carpet: black, with the bright squiggles every arcade had, so
   nobody could see what had been spilled on it */
.ud-arcade::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: var(--carpet);
  transition: opacity var(--swap);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='132' height='132'%3E%3Cg fill='none' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M10 22q8-11 16 0t16 0' stroke='%23ff5fb4'/%3E%3Ccircle cx='92' cy='26' r='7' stroke='%233ee6d6'/%3E%3Cpath d='M58 76l13-22 13 22z' stroke='%23ffd23f'/%3E%3Cpath d='M16 94l14 14M30 94l-14 14' stroke='%23b48cff'/%3E%3Cpath d='M86 116q6-9 12 0t12 0' stroke='%234fe07a'/%3E%3Cpath d='M108 64l10 10' stroke='%23ff8a2a'/%3E%3C/g%3E%3Ccircle cx='104' cy='96' r='3' fill='%234aa8ff'/%3E%3Ccircle cx='42' cy='58' r='2.6' fill='%23ff8a2a'/%3E%3Ccircle cx='62' cy='114' r='2.2' fill='%23ff5fb4'/%3E%3Ccircle cx='60' cy='12' r='2.2' fill='%233ee6d6'/%3E%3C/svg%3E") 0 0 / 132px 132px;
}
.ud-arcade::after {                    /* the dark between the machines */
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(120% 70% at 50% 0%, rgba(11, 8, 18, .2), rgba(11, 8, 18, .78));
}
.ud.is-down .ud-arcade::before { filter: grayscale(1); }

/* the sign over the door: PALACE in tubes, ARCADE under it, inside a
   frame of chaser bulbs */
.ud-palace {
  position: relative; padding: 1rem 0.8rem 0.9rem; text-align: center;
  border-radius: 12px; background: rgba(11, 8, 18, .72);   /* the carpet stops at the sign, so its words stay clear */
}
.ud-chase {
  position: absolute; inset: 0; border-radius: 12px; padding: 7px;
  background:
    radial-gradient(circle, var(--sun) 0 3px, transparent 3.6px) 0 0 / 18px 18px,
    radial-gradient(circle, color-mix(in srgb, var(--sun) 35%, #000) 0 3px, transparent 3.6px) 9px 9px / 18px 18px;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation: ud-chase .9s steps(2) infinite;
}
@keyframes ud-chase { to { background-position: 18px 0, 27px 9px; } }
.ud-palace-h { display: flex; flex-direction: column; align-items: center; gap: 0.2rem; font-weight: 400; }
.ud-palace-a {
  --n: var(--pink);
  font-family: var(--tube); font-size: clamp(2.1rem, 13cqi, 4.2rem); line-height: 1; text-transform: uppercase; letter-spacing: 0.04em;
  color: #ffe9f5; text-shadow: 0 0 2px #fff, 0 0 7px var(--n), 0 0 20px var(--n), 0 0 44px var(--n);
}
.ud-palace-b {
  --n: var(--sun);
  font-family: var(--block); font-size: clamp(0.95rem, 4.8cqi, 1.45rem); letter-spacing: 0.5em; padding-left: 0.5em; text-transform: uppercase;
  color: #fff6d6; text-shadow: 0 0 2px #fff, 0 0 7px var(--n), 0 0 18px var(--n);
  animation: ud-buzz 7s steps(1) infinite 2s;
}
.ud-palace-s { margin-top: 0.4rem; font-style: italic; font-size: 0.95rem; color: var(--dim); transition: color var(--swap); }

/* the attract screen over the row: cycles the machines until one is chosen */
.ud-attract {
  display: flex; align-items: center; gap: 0.8rem; margin: 1rem 0 1.1rem; min-height: 64px; padding: 0.45rem 0.9rem;
  border-radius: 10px / 14px; background: radial-gradient(120% 140% at 50% 40%, #0d1b1f, #030507);
  box-shadow: inset 0 0 0 2px #000, inset 0 0 26px rgba(62, 230, 214, .12), 0 0 0 4px #1c1626;
  position: relative; overflow: hidden;
}
.ud-attract::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 3px); }
.ud-lcd-orb { flex: none; width: 44px; height: auto; aspect-ratio: 1; }
.ud-lcd-t { flex: 1; display: flex; flex-direction: column; min-width: 0; font-family: var(--lcd); color: var(--teal); text-shadow: 0 0 6px color-mix(in srgb, var(--teal) 60%, transparent); line-height: 1; transition: color var(--swap); }
.ud-lcd-t b { font-weight: 400; font-size: 1.15rem; letter-spacing: 0.12em; color: var(--sun); }
.ud-lcd-t i { font-style: normal; font-size: 1.6rem; letter-spacing: 0.05em; text-transform: uppercase; overflow-wrap: anywhere; }
.ud-attract-1up { font-family: var(--lcd); font-size: 1.3rem; color: var(--pink); animation: ud-blink 1.6s steps(1) infinite; }

/* the row of machines: two abreast on a phone, three or more as it widens */
.ud-cabs { list-style: none; display: grid; gap: 1.1rem 0.7rem; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); }
.ud-cabs li { display: flex; }
.ud-cab {
  --k: var(--c);
  position: relative; flex: 1; display: flex; flex-direction: column; min-height: 44px;
  padding: 7px 9px 9px;
  border-radius: 10px 10px 4px 4px;
  /* the sides, with a stripe of the game's color painted down each */
  background: linear-gradient(180deg, var(--cab-1), var(--cab-2));
  box-shadow:
    inset 4px 0 0 color-mix(in srgb, var(--k) 70%, #000), inset -4px 0 0 color-mix(in srgb, var(--k) 70%, #000),
    inset 0 0 0 1px rgba(255, 255, 255, .06), 0 18px 26px -16px #000;
  transition: translate .3s var(--ease), box-shadow .3s;
}
.ud.is-down .ud-cab { --k: color-mix(in srgb, var(--c) 30%, #ff5446); }
/* the marquee: the game's name on backlit plastic */
.ud-cab-m {
  display: grid; place-items: center; min-height: 3.3em; padding: 0.35rem 0.4rem;
  border-radius: 4px; text-align: center;
  background: linear-gradient(180deg, color-mix(in srgb, var(--k) 88%, #fff), var(--k));
  box-shadow: 0 0 14px -2px color-mix(in srgb, var(--k) 55%, transparent), inset 0 -2px 0 rgba(0, 0, 0, .25);
  transition: box-shadow .3s, filter .3s;
}
.ud-cab-m b { font-family: var(--block); font-weight: 400; font-size: 0.74rem; line-height: 1.2; letter-spacing: 0.03em; color: #140c1c; overflow-wrap: anywhere; }
/* the screen, sunk in its bezel, curved and scanned */
.ud-cab-s {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.3rem;
  min-height: 5.6em; margin-top: 7px; padding: 0.55rem 0.4rem; text-align: center;
  border-radius: 10px / 14px;
  background: radial-gradient(120% 110% at 50% 40%, color-mix(in srgb, var(--k) 12%, #0b0d14), #020305);
  box-shadow: inset 0 0 0 3px #050408, inset 0 0 18px rgba(0, 0, 0, .9);
}
.ud-cab-s::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .05) 0 1px, transparent 1px 3px); }
.ud-cab-s i { font-family: var(--lcd); font-style: normal; font-size: 1.18rem; line-height: 1.05; color: color-mix(in srgb, var(--k) 45%, #fff); text-shadow: 0 0 6px color-mix(in srgb, var(--k) 55%, transparent); }
.ud-cab-s em { font-family: var(--lcd); font-style: normal; font-size: 0.95rem; letter-spacing: 0.12em; text-transform: uppercase; color: #8d8a99; }
/* the control panel, angled toward you: a ball-top stick and two buttons */
.ud-cab-c {
  height: 26px; margin: 7px -4px 0;
  clip-path: polygon(6% 0, 94% 0, 100% 100%, 0 100%);
  background:
    radial-gradient(circle at 26% 34%, #ff5446 0 5px, transparent 5.6px),
    linear-gradient(#0b0910, #0b0910) calc(26% + 0px) 34% / 2px 9px no-repeat,
    radial-gradient(circle at 58% 56%, var(--k) 0 4px, transparent 4.6px),
    radial-gradient(circle at 74% 56%, var(--k) 0 4px, transparent 4.6px),
    linear-gradient(180deg, #2c2338, #17111f);
}
/* the coin door, with the machine's number on it */
.ud-cab-n {
  align-self: center; margin-top: 7px; padding: 0.1rem 0.6rem;
  border-radius: 3px; background: #07060b; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
  font-family: var(--lcd); font-size: 1rem; line-height: 1.2; letter-spacing: 0.1em; color: var(--warm);
}
.ud-cab-n::after { content: " · 25¢"; color: #a39fb0; }
.ud-cab:hover, .ud-cab:focus-visible, .ud-cab.is-picked {
  translate: 0 -3px;
  box-shadow:
    inset 4px 0 0 var(--k), inset -4px 0 0 var(--k),
    inset 0 0 0 1px rgba(255, 255, 255, .1), 0 0 30px -6px color-mix(in srgb, var(--k) 70%, transparent), 0 22px 30px -16px #000;
}
.ud-cab:hover .ud-cab-m, .ud-cab:focus-visible .ud-cab-m, .ud-cab.is-picked .ud-cab-m { filter: brightness(1.12); box-shadow: 0 0 26px 0 color-mix(in srgb, var(--k) 75%, transparent), inset 0 -2px 0 rgba(0, 0, 0, .25); }
.ud-cab:hover em, .ud-cab:focus-visible em, .ud-cab.is-picked em { color: var(--sun); animation: ud-blink 1.1s steps(1) infinite; }
.ud-cab:focus-visible { outline-color: var(--k); outline-offset: 4px; }

/* ───────────── two storefronts: the high scores and Scoops Ahoy ───────────── */
.ud-cols { display: grid; gap: clamp(2.4rem, 4vw, 3rem); grid-template-columns: minmax(0, 1fr); margin-top: clamp(3rem, 7vw, 4.6rem); }
@media (min-width: 960px) { .ud-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr); align-items: start; } }

/* the high-score machine: a marquee, a screen, a control panel */
.ud-cabinet {
  padding: 12px 14px 14px; border-radius: 14px 14px 6px 6px;
  background: linear-gradient(180deg, var(--cab-1), var(--cab-2));
  box-shadow: inset 6px 0 0 color-mix(in srgb, var(--violet) 55%, #000), inset -6px 0 0 color-mix(in srgb, var(--violet) 55%, #000), inset 0 0 0 1px rgba(255, 255, 255, .06), 0 26px 44px -26px #000;
  transition: background var(--swap);
}
.ud-cabinet-m {
  --n: var(--pink);
  padding: 0.7rem 0.5rem 0.6rem; margin-bottom: 12px; border-radius: 6px; text-align: center;
  background: radial-gradient(90% 140% at 50% 0%, rgba(255, 95, 180, .25), transparent 70%), #160e22;
  box-shadow: inset 0 0 0 1px rgba(255, 170, 230, .2);
  font-family: var(--tube); font-size: clamp(1.4rem, 4vw, 2.1rem); line-height: 1.05; text-transform: uppercase;
  color: #ffe9f5; text-shadow: 0 0 2px #fff, 0 0 6px var(--n), 0 0 16px var(--n), 0 0 32px var(--n);
}
.ud-crt {
  position: relative; overflow: hidden;
  padding: 1rem 1.15rem 0.9rem; border-radius: 16px / 20px;
  background: radial-gradient(120% 100% at 50% 40%, #0f151a, #04060a);
  box-shadow: inset 0 0 44px rgba(0, 0, 0, .9), inset 0 0 0 2px #000, 0 0 0 5px #07060b;
  font-family: var(--lcd);
}
.ud-crt::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(255, 255, 255, .045) 0 1px, transparent 1px 3px);
}
.ud-crt-h { text-align: center; font-weight: 400; font-size: 2rem; letter-spacing: 0.14em; text-transform: uppercase; color: #ff5a4f; text-shadow: 0 0 10px rgba(255, 90, 79, .6); }
.ud-crt-sub { margin-top: 0.3rem; text-align: center; font-size: 1.1rem; letter-spacing: 0.2em; text-transform: uppercase; color: #6fe3ff; }
.ud-scores { list-style: none; margin-top: 0.5rem; }
.ud-scores li {
  display: grid; grid-template-columns: 3ch 3.4ch 4.4ch minmax(0, 1fr); gap: 0.8rem; align-items: baseline;
  padding: 0.32rem 0; font-size: 1.35rem; line-height: 1.05; color: #eef3ff;
}
.ud-rank { color: #ffd23f; text-transform: uppercase; }
.ud-ini { color: #ff8fd0; letter-spacing: 0.08em; }
.ud-scores b { font-weight: 400; color: #4fe07a; text-align: right; text-shadow: 0 0 8px rgba(79, 224, 122, .45); }
.ud-what { text-transform: uppercase; letter-spacing: 0.03em; }
.ud-what i { display: block; margin-top: 0.1rem; font-style: normal; text-transform: none; font-size: 1.12rem; color: #a9b8cb; }
.ud-crt-foot { margin-top: 0.7rem; text-align: center; font-size: 1.25rem; letter-spacing: 0.24em; text-transform: uppercase; color: #ffd23f; animation: ud-blink 2.4s steps(1) infinite; }
@keyframes ud-blink { 50% { opacity: .2; } }
.ud-cabinet-c {
  display: block; height: 34px; margin: 12px -6px 0;
  clip-path: polygon(4% 0, 96% 0, 100% 100%, 0 100%);
  background:
    radial-gradient(circle at 22% 38%, #ff5446 0 7px, transparent 7.6px),
    radial-gradient(circle at 56% 56%, var(--teal) 0 6px, transparent 6.6px),
    radial-gradient(circle at 68% 56%, var(--pink) 0 6px, transparent 6.6px),
    radial-gradient(circle at 80% 56%, var(--sun) 0 6px, transparent 6.6px),
    linear-gradient(180deg, #2c2338, #17111f);
}

/* Scoops Ahoy: the striped awning, scalloped along its edge, over a menu
   board framed in navy */
.ud-awning {
  position: relative; height: 48px; margin: 0 -6px;
  border-radius: 8px 8px 0 0;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, .18), transparent 40%),
    repeating-linear-gradient(90deg, var(--aw-1) 0 28px, var(--aw-2) 28px 56px);
  -webkit-mask: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 14px) no-repeat, radial-gradient(circle at 50% 0, #000 13.5px, transparent 14px) 0 100% / 28px 14px repeat-x;
  mask: linear-gradient(#000 0 0) 0 0 / 100% calc(100% - 14px) no-repeat, radial-gradient(circle at 50% 0, #000 13.5px, transparent 14px) 0 100% / 28px 14px repeat-x;
  filter: drop-shadow(0 6px 6px rgba(0, 0, 0, .4));
  transition: background var(--swap);
}
.ud-menu {
  position: relative; margin-top: -8px; padding: 0 0 1rem;
  border: 6px solid var(--navy); border-top-width: 0; border-radius: 0 0 10px 10px;
  background: var(--paper); color: #1d2333;
  box-shadow: 0 26px 44px -26px #000;
  transition: background var(--swap), border-color var(--swap);
}
.ud-menu-h {
  display: flex; flex-direction: column; align-items: center; gap: 0.15rem;
  padding: 1.3rem 1rem 0.9rem; margin-bottom: 0.5rem; font-weight: 400; text-align: center;
  background: var(--navy); transition: background var(--swap);
}
.ud-script {
  font-family: var(--script); font-size: clamp(2.4rem, 7vw, 3.2rem); line-height: 1; color: #fff;
  text-shadow: 2px 2px 0 var(--red-deep), 0 0 18px rgba(255, 255, 255, .25);
  transform: rotate(-4deg);
}
.ud-menu-s { margin-top: 0.4rem; font-family: var(--type); font-size: 0.78rem; letter-spacing: 0.16em; text-transform: uppercase; color: #dfe7f5; }
.ud-stamp {
  position: absolute; right: 0.9rem; bottom: 1rem;
  padding: 0.18rem 0.5rem; border: 2px solid #b3161a; border-radius: 3px;
  font-weight: 700; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: #b3161a;
  transform: rotate(-7deg); opacity: .85;
}
.ud-record { padding: 0 1.15rem; }
.ud-record div {
  display: grid; grid-template-columns: 9.6rem minmax(0, 1fr); gap: 0.15rem 1rem;
  padding: 0.5rem 0; border-bottom: 1px dotted rgba(31, 58, 104, .35);
}
.ud-record div:last-child { border-bottom: 0; padding-right: 8.4rem; }      /* clear of the stamp */
.ud-record dt { padding-top: 0.12rem; font-weight: 700; font-size: 0.76rem; letter-spacing: 0.1em; text-transform: uppercase; color: #a3151b; }
.ud-record dd { font-size: 0.98rem; line-height: 1.45; color: #1a2030; }
.ud-record a {
  /* a full 44px to tap, without pushing the line apart */
  display: inline-block; padding: 11px 0; margin: -11px 0;
  color: #1f3a8a; text-decoration: underline; text-underline-offset: 3px; overflow-wrap: anywhere;
}
.ud-nb { white-space: nowrap; }
.ud-record a:hover { color: #0e1c48; }
.ud-record a:focus-visible { outline-color: #1f3a8a; }
.ud.is-down .ud-record dt { color: #6a2a2a; }
.ud.is-down .ud-script { text-shadow: 2px 2px 0 #4a1a1a; }

/* ───────────── the way out ───────────── */
.ud-out { margin-top: clamp(3.4rem, 8vw, 5.4rem); text-align: center; }
.ud-out-k { margin-bottom: 0.9rem; font-size: 0.78rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--mute); transition: color var(--swap); }
/* a cassette: the label written on in marker, the two reels showing
   through the window, turning when you point at it */
.ud-tape {
  position: relative; display: inline-flex; flex-direction: column; align-items: center; gap: 10px;
  width: min(460px, 100%); padding: 14px 16px 16px; cursor: pointer;
  border: 0; border-radius: 10px;
  background: linear-gradient(180deg, #2c2c30, #18181b);
  box-shadow: inset 0 0 0 2px #0b0b0c, inset 0 1px 0 rgba(255, 255, 255, .12), 0 26px 44px -22px #000;
  transition: translate .35s var(--ease), box-shadow .35s;
}
.ud-tape::before, .ud-tape::after {    /* the screws in the corners */
  content: ""; position: absolute; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: #55555b;
}
.ud-tape::before { left: 7px; }
.ud-tape::after { right: 7px; }
.ud-tape-label {
  display: block; width: 100%; padding: 0.65rem 0.8rem 0.85rem; border-radius: 4px;
  border-top: 7px solid #e8261d;
  background: repeating-linear-gradient(180deg, transparent 0 25px, rgba(60, 90, 160, .25) 25px 26px) 0 6px, #f4edda;
  font-family: var(--paint); font-size: clamp(1.15rem, 4.6vw, 1.5rem); line-height: 1.3; color: #1c1a26;
}
.ud-reels {
  display: flex; justify-content: center; gap: clamp(48px, 18vw, 86px);
  width: 74%; padding: 8px 0; border-radius: 18px; background: #0c0c0d;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.ud-reels i {
  width: 34px; height: 34px; border-radius: 50%;
  background: radial-gradient(circle, #0c0c0d 0 6px, transparent 6.5px), repeating-conic-gradient(#ece6d6 0 12deg, #a9a291 12deg 30deg);
  box-shadow: 0 0 0 3px #3a3a3e;
  animation: ud-reel 2.6s linear infinite paused;
}
.ud-tape:hover, .ud-tape:focus-visible { translate: 0 -4px; box-shadow: inset 0 0 0 2px #0b0b0c, inset 0 1px 0 rgba(255, 255, 255, .12), 0 30px 50px -22px #000, 0 0 0 2px rgba(232, 38, 29, .7); }
.ud-tape:focus-visible { outline: 2px solid var(--ink); outline-offset: 5px; }
.ud-tape:hover .ud-reels i, .ud-tape:focus-visible .ud-reels i { animation-play-state: running; }
@keyframes ud-reel { to { transform: rotate(360deg); } }

/* ───────────── the Void ───────────── */
.ud.is-gone .ud-main, .ud.is-gone .ud-top { opacity: 0; }
.ud-void {
  position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; overflow: hidden;
  /* the bottom padding keeps the words above the water line */
  padding: max(2rem, env(safe-area-inset-top, 0px)) max(1.4rem, env(safe-area-inset-right, 0px)) max(24vh, calc(2rem + env(safe-area-inset-bottom, 0px))) max(1.4rem, env(safe-area-inset-left, 0px));
  background: #000; text-align: center;
  opacity: 0; visibility: hidden; transition: opacity 1.1s ease, visibility 0s linear 1.1s;
}
.ud.is-gone .ud-void { opacity: 1; visibility: visible; transition: opacity 1.1s ease; }
/* a skin of black water underfoot, catching what little light there is */
.ud-void::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 20vh;
  background:
    linear-gradient(180deg, rgba(200, 214, 230, .09), transparent 30%),
    repeating-linear-gradient(180deg, rgba(255, 255, 255, .03) 0 1px, transparent 1px 10px);
}
.ud-ripples i {
  position: absolute; left: 50%; bottom: 9vh; width: 60px; height: 14px; translate: -50% 50%;
  border: 1px solid rgba(233, 220, 196, .4); border-radius: 50%; opacity: 0;
  animation: ud-ripple 7s ease-out infinite paused;
}
.ud-ripples i:nth-child(2) { animation-delay: 2.3s; }
.ud-ripples i:nth-child(3) { animation-delay: 4.6s; }
.ud.is-gone .ud-ripples i { animation-play-state: running; }
@keyframes ud-ripple { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(12, 9); opacity: 0; } }
.ud-void-in { position: relative; max-width: 34rem; }
.ud-void-orb { display: block; width: 96px; height: 96px; margin: 0 auto 1.4rem; opacity: .9; }
.ud:not(.is-gone) .ud-void-orb { display: none; }
.ud-void-k { font-size: 0.74rem; letter-spacing: 0.28em; text-transform: uppercase; color: #92969d; }
.ud-void-t { margin-top: 0.6rem; font-family: var(--paint); font-size: clamp(2.2rem, 8vw, 4rem); line-height: 1.1; color: #f3e7d3; }
.ud-void-s { margin-top: 0.7rem; font-style: italic; font-size: 1.05rem; line-height: 1.5; color: #bdb5a8; }
.ud-void-go { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.8rem; margin-top: 1.8rem; }
.ud-void-go a, .ud-void-go button {
  display: inline-flex; align-items: center; min-height: 44px; padding: 0.6rem 1.3rem; border-radius: 3px; cursor: pointer;
  font-weight: 700; font-size: 0.8rem; letter-spacing: 0.16em; text-transform: uppercase;
  transition: background .3s, color .3s, border-color .3s;
}
.ud-void-home { background: var(--red-deep); color: #fff4f2; border: 1px solid var(--red-deep); }
.ud-void-home:hover, .ud-void-home:focus-visible { background: #a8140e; border-color: #a8140e; }
.ud-void-stay { background: transparent; color: #cfc6b8; border: 1px solid rgba(233, 220, 196, .35); }
.ud-void-stay:hover, .ud-void-stay:focus-visible { border-color: #f3e7d3; color: #f3e7d3; }
.ud-void-go :focus-visible { outline-color: #f3e7d3; }

/* ───────────── phones ─────────────
   The mall on the skyline stands right behind the words on a narrow
   screen, so it is drawn lower and dimmer there, and the two runs of
   plain text that sit straight on the sky get a pane of dark glass. */
@media (max-width: 640px) {
  .ud-trees { height: clamp(110px, 17vh, 170px); }
  .ud-face--up .ud-trees { opacity: .7; }
  .ud-intro, .ud-out-k {
    padding: 0.9rem 1rem; border-radius: 12px;
    background: color-mix(in srgb, var(--night) 78%, transparent);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  }
  .ud-out-k { display: inline-block; padding: 0.5rem 0.9rem; }
  .ud-kicker { letter-spacing: 0.18em; }
  .ud-top-mid { order: 3; width: 100%; font-size: 0.68rem; }
  .ud-clock { font-size: 1.1rem; letter-spacing: 0.04em; }
  .ud-sub { font-size: 1rem; }
  .ud-record div { grid-template-columns: minmax(0, 1fr); }
  .ud-record div:last-child { padding-right: 0; padding-bottom: 2.6rem; }
  .ud-crt { padding: 0.9rem 0.8rem 0.8rem; }
  /* the score table stacks: rank, initials and score on a line, what it
     was a score for underneath */
  .ud-scores li { grid-template-columns: 3ch 3.4ch minmax(0, 1fr); gap: 0.2rem 0.6rem; font-size: 1.25rem; padding: 0.4rem 0; }
  .ud-scores b { text-align: left; }
  .ud-what { grid-column: 2 / -1; }
  .ud-what i { font-size: 1.05rem; }
}

/* ───────────── stillness ─────────────
   Everything here that moves stops: the sky no longer turns over (it
   simply changes), there are no fireworks, the lightning never strikes,
   the neon never buzzes and the chaser bulbs hold still, the bulbs light
   without a flicker and a spelled word lights all at once
   (starcourt.js). */
@media (prefers-reduced-motion: reduce) {
  .ud *, .ud *::before, .ud *::after { animation: none !important; transition: none !important; }
  .ud { transition: none; }
  .ud-flash, .ud-bolt { display: none; }
}

/* ════════════════════════════════════════════════════════════
   THE DESCENT
   Everything below is what the merge added: the scroll turning
   the town over, rather than only the switch doing it.
   ════════════════════════════════════════════════════════════ */

/* --dp is written by hawkins.js: 0 at the top of the page, 1 at the foot.
   It is declared here too so the page is correct before the script runs
   and if the script never runs at all. */
.ud { --dp: 0; }

/* ── the sky goes over gradually ──
   The card still turns on .is-down (that is a 3D flip and cannot be done
   halfway without looking broken), but the color over it is continuous, so
   the descent is felt long before the flip happens. A single overlay, its
   opacity the depth, in the cold of the far side. */
.ud-field::after {
  content: ""; position: absolute; inset: 0; z-index: 3;
  pointer-events: none;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 84, 70, .20), transparent 60%),
    linear-gradient(180deg, rgba(10, 14, 19, .55), rgba(6, 9, 12, .85));
  opacity: calc(var(--dp) * .92);
}

/* ── the town dims as you go down ──
   The whole main column loses its warmth on the way. Kept off the sky (which
   has its own overlay above) and off the header, which must stay readable. */
.ud-main {
  filter:
    saturate(calc(1 - var(--dp) * .55))
    brightness(calc(1 - var(--dp) * .14))
    hue-rotate(calc(var(--dp) * -14deg));
}

/* the vines, which on the old page only existed on the far side, now grow in
   as you descend: this is the clearest single signal that the page is turning */
.ud-vines { opacity: calc(var(--dp) * .9); }
.ud-vines path { stroke-dashoffset: calc(1 - var(--dp)); }

/* the arcade's carpet and the mall's neon go out on the way down */
.ud-arcade::before { filter: grayscale(var(--dp)); }
.ud-neon, .ud-mallname, .ud-palace-h {
  filter: saturate(calc(1 - var(--dp) * .7)) brightness(calc(1 - var(--dp) * .25));
}

/* ── the two-faced headings ──
   A sign that reads one way in the mall and another in the Upside Down. Both
   faces are in the markup; only one is ever shown, so the links beneath are
   never duplicated. The far-side face is aria-hidden, because the near-side
   one is the accessible name and it does not change meaning.

   WHY grid AND NOT display:none: the sign must not change height when it
   swaps, or the page would jump under the reader at the halfway mark. Both
   faces are stacked in one grid cell and cross-faded. */
.ud-palace-h, .ud-board-h, .ud-board-k, .ud-palace-s, .ud-board-s { display: grid; }
.ud-palace-up, .ud-palace-dn {
  grid-area: 1 / 1;
  transition: opacity .5s var(--ease);
}
.ud-palace-dn { opacity: 0; }
.ud.is-down .ud-palace-up { opacity: 0; }
.ud.is-down .ud-palace-dn { opacity: 1; }

/* the far-side face of the arcade sign is the AV Club's label tape, not neon */
.ud-palace-dn {
  font-family: var(--lcd); letter-spacing: .04em; text-transform: uppercase;
  color: var(--sun);
}
.ud-palace-dn span { color: var(--mute); }
.ud-palace-s .ud-palace-dn, .ud-board-s .ud-palace-dn, .ud-board-k .ud-palace-dn {
  font-family: var(--type); text-transform: none; letter-spacing: 0;
  color: var(--mute); font-size: inherit;
}

/* ── the line that tells you to keep going ── */
.ud-sub--go {
  margin-top: .7rem; padding-top: .7rem;
  border-top: 1px solid var(--line);
}
.ud-sub--go b { color: var(--sun); font-weight: 700; }

/* ── the depth gauge in the header ──
   How far under the town you are. It is the only readout that says the
   descent is a thing the reader is doing, so it is always visible, and it
   doubles as the proof that scrolling is what moves it. */
.ud-depth { display: inline-flex; align-items: center; gap: .5rem; min-width: 0; }
.ud-depth-bar {
  position: relative; display: block;
  width: clamp(44px, 9vw, 86px); height: 5px; border-radius: 999px;
  background: rgba(170, 196, 220, .22);
  overflow: hidden; flex: 0 0 auto;
}
.ud-depth-bar b {
  position: absolute; inset: 0 auto 0 0; display: block;
  width: calc(var(--dp) * 100%);
  border-radius: 999px;
  background: linear-gradient(90deg, var(--teal), var(--sun));
}
.ud-depth em {
  font-style: normal; font-family: var(--lcd);
  font-size: .8rem; letter-spacing: .06em; color: var(--dim);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* the header is a tight row; on a phone the gauge keeps the bar and drops
   its word, because the bar is the part that carries the information */
@media (max-width: 720px) {
  .ud-depth em { display: none; }
}

/* ── reduced motion ──
   The descent is a color change and a width, not movement, so it is kept:
   it is the page's only way of saying where you are. What goes is the
   cross-fade on the signs, which becomes instant. */
@media (prefers-reduced-motion: reduce) {
  .ud-palace-up, .ud-palace-dn { transition: none; }
}