/* TRASH CULT — THE LOOK (11 Oct 2026, his second brief the same day: "get rid of the square slides … grungier text … a slight
   rotation as if it's just been slapped on a wall, like graffiti … same with dials … the logo bottom left larger, let it breathe,
   a glow … the ticker tape … the green slide is too plain … get rid of the glitch and any visual effects to make it look like
   film"). So: NO boxes, bars, paper or panels anywhere — every control is a word written on the picture in a graffiti hand,
   each at its own slight angle, edges roughed by the spray filter (index.html #spray), a hard black spray shadow to read
   over anything. No grain, scanlines, tracking, flicker, iris or tears: the picture is the picture. */
:root {
  --green: #30f008;
  --pink: #ff2fa0;
  --yellow: #e8c23a;
  --paper: #ece6d2;
  --ink: #0c0c0c;
  --red: #ff2a22;
  --tag: 'Sedgwick Ave Display', 'Permanent Marker', 'Comic Sans MS', cursive;        /* the big words: a graffiti hand */
  --marker: 'Permanent Marker', 'Comic Sans MS', cursive;                               /* the small words: a fat marker */
  --spray: 'Rubik Spray Paint', 'Permanent Marker', cursive;                            /* the stamp: spray through a stencil */
  --dark: 3px 3px 0 #000, 0 0 2px #000, 0 0 10px rgba(0,0,0,0.85), 0 0 24px rgba(0,0,0,0.5);
  --gut: max(16px, env(safe-area-inset-left));
  --bot: max(14px, env(safe-area-inset-bottom));
  --tick: 0px;                                    /* the ticker tape is gone (15 Oct): nothing along the bottom stands over it */
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #000; color: var(--paper); }
body { font-family: var(--marker); -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; user-select: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; }
button:focus { outline: none; }
img { -webkit-user-drag: none; }

#stage { position: fixed; inset: 0; }
#gl { display: block; width: 100%; height: 100%; touch-action: none; }
#catch { position: fixed; inset: 0; touch-action: none; }
body.rigged #catch { pointer-events: none; }
/* the gate: plain black, fading — nothing else */
#gate { position: fixed; inset: 0; background: #000; pointer-events: none; z-index: 2; opacity: 1; }

/* ── the loading screen ── */
#loader { position: fixed; inset: 0; z-index: 8; background: #000; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 30px;
  transition: opacity 0.9s ease; }
#loader.gone { opacity: 0; pointer-events: none; }
#loader .face { width: min(46vw, 260px); aspect-ratio: 208 / 226; margin-bottom: 28px; }   /* (an empty place: the head over it is #landFace) */
@keyframes breathe {
  0%, 100% { transform: scale(1) rotate(-2deg); filter: drop-shadow(0 0 8px rgba(48,240,8,0.5)) drop-shadow(0 0 22px rgba(48,240,8,0.35)); }
  50% { transform: scale(1.05) rotate(1.5deg); filter: drop-shadow(0 0 14px rgba(48,240,8,0.95)) drop-shadow(0 0 40px rgba(48,240,8,0.7)); }
}
#loader .words { font-family: var(--tag); font-size: clamp(24px, 3.4vw, 42px); color: var(--green); text-shadow: var(--dark); transform: rotate(-2deg); filter: url(#spray); }
#loader .line { width: min(280px, 60vw); height: 5px; background: rgba(236,230,210,0.15); transform: rotate(-1deg); }
#loader .line i { display: block; height: 100%; width: 0; background: var(--green); box-shadow: 0 0 10px rgba(48,240,8,0.8); transition: width 0.3s linear; }

/* ── THE WORDS YOU PRESS: no box, a graffiti hand at a slight angle, a hard spray shadow ── */
.sticker { position: relative; display: inline-flex; flex-direction: column; align-items: center; justify-content: center; min-height: 48px; padding: 8px 16px;
  color: var(--green); font-family: var(--tag); font-size: clamp(28px, 3.6vw, 50px); line-height: 1; letter-spacing: 0.02em;
  text-shadow: var(--dark), 0 0 26px rgba(48,240,8,0.35); transform: rotate(var(--tilt, -3deg)); filter: url(#spray);
  transition: transform 0.15s ease, color 0.15s ease; }
.sticker small { display: block; margin-top: 6px; font-family: var(--marker); font-size: clamp(12px, 1.25vw, 16px); letter-spacing: 0.04em; color: var(--paper); text-shadow: var(--dark); }
.sticker.big { font-size: clamp(36px, 4.8vw, 68px); padding: 10px 22px; }
.sticker.small { font-size: clamp(20px, 2.2vw, 28px); min-height: 38px; padding: 6px 10px; }
.sticker.hot { color: var(--pink); text-shadow: var(--dark), 0 0 26px rgba(255,47,160,0.4); --tilt: 2.5deg; }
.sticker:hover, .sticker:focus-visible { color: var(--paper); transform: rotate(0deg) scale(1.08); }
.sticker:active { transform: rotate(0deg) scale(0.96); }
.sticker.in { animation: rise 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
@keyframes rise { 0% { opacity: 0; transform: rotate(var(--tilt, -3deg)) translateY(14px) scale(1.06); } 100% { opacity: 1; transform: rotate(var(--tilt, -3deg)) scale(1); } }
.quiet { position: fixed; right: var(--gut); bottom: calc(var(--bot) + var(--tick)); z-index: 4; opacity: 0; pointer-events: none; transition: opacity 0.6s ease; font-size: clamp(20px, 2.2vw, 28px); --tilt: 4deg; color: var(--paper); }
.quiet.on { opacity: 0.9; pointer-events: auto; }
/* the way in, while you are still out the front in orbit or walking */
.corner { position: fixed; right: var(--gut); top: max(14px, env(safe-area-inset-top)); z-index: 4; opacity: 0; pointer-events: none; transition: opacity 0.5s ease; --tilt: 3deg; }
.corner.on { opacity: 1; pointer-events: auto; }

/* ── THE LANDING, out the front ── */
#land { position: fixed; inset: 0; z-index: 3; pointer-events: none; display: flex; flex-direction: column; align-items: center; justify-content: flex-start;
  padding: clamp(6px, 1.6vh, 20px) var(--gut) 0; text-align: center; gap: clamp(8px, 2.2vh, 24px); }
/* the picture dimmed a little behind the words while the home page is up; it lightens the moment a button or the shop is pressed */
#land::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.6); opacity: 0; transition: opacity 0.9s ease; }
#land.on.dim::before { opacity: 1; }
#land.on .ways .sticker { pointer-events: auto; }
/* THE NAME LIT ON THE WINDOW (15 Oct): over the sticker on the glass, put by trash.js placeFace (F.sign) like the head; the word TRASH, then
   CULT, light up green after the camera has landed. --sh is the height of both words, set by placeFace */
#landSign { position: fixed; z-index: 9; left: 50%; top: 62%; display: flex; align-items: flex-end; justify-content: center; gap: 0.12em; font-size: 20px;
  transform: translate(-50%, -50%); pointer-events: none; transition: opacity 0.5s ease; }
#landSign.off { opacity: 0; }
#landSign img { height: var(--sh, 70px); width: auto; opacity: 0; }
body.touring #landSign { display: none; }
#landSign img.in { animation: wordOn 1.1s ease-out both; }
@keyframes wordOn { 0% { opacity: 0; filter: drop-shadow(0 0 0 rgba(48,240,8,0)); } 100% { opacity: 0.95; filter: drop-shadow(0 0 8px rgba(48,240,8,0.7)) drop-shadow(0 0 22px rgba(48,240,8,0.5)); } }
/* THE HEAD ON THE WINDOW'S HEAD (15 Oct, his: "the zombie head superimposed over the one on the window"): out of the flow, put by trash.js
   (placeFace) on the spot where the ghoul is in the glass, as the camera sees it, every frame the home page is up */
#landFace { position: fixed; z-index: 9; left: 50%; top: 40%; width: min(46vw, 260px); opacity: 1; pointer-events: none; transform: translate(-50%, -50%) rotate(-2deg);
  animation: breatheOn 2.8s ease-in-out infinite; transition: opacity 0.5s ease; }
/* THE HEAD AS THE HOME BUTTON (15 Oct): off the home page it travels to the top left corner (trash.js placeFace, faceMode 'icon') and is the
   way home while you are navigating the scan; back on the home page it travels to the window's head */
#landFace.asHome { animation: none; opacity: 0.92; filter: drop-shadow(0 0 5px rgba(48,240,8,0.75)); cursor: pointer; pointer-events: auto; }
#landFace.asHome:hover { opacity: 1; filter: drop-shadow(0 0 10px rgba(48,240,8,1)) drop-shadow(0 0 22px rgba(48,240,8,0.6)); }
@keyframes breatheOn {
  0%, 100% { opacity: 0.9; filter: drop-shadow(0 0 8px rgba(48,240,8,0.5)) drop-shadow(0 0 22px rgba(48,240,8,0.35)); }
  50% { opacity: 1; filter: drop-shadow(0 0 14px rgba(48,240,8,0.95)) drop-shadow(0 0 40px rgba(48,240,8,0.7)); }
}
/* 15 Oct: the two lines of words sit ABOVE the head, under TRASH CULT (they flow straight down from it); the way in and the gigs sit
   side by side low, over the street, with the head in the middle between the two */
/* the top: the name, and under it the line, with a good gap before the head (15 Oct: "a little close to the zombie head") */
/* the top: the town and the list of what is sold (his, 15 Oct: "up to the top") */
.top { position: fixed; left: 0; right: 0; top: calc(max(14px, env(safe-area-inset-top)) + clamp(4px, 1.6vh, 20px)); display: flex; flex-direction: column; align-items: center;
  gap: clamp(8px, 1.8vh, 18px); padding: 0 var(--gut); }
/* the bottom third: the way in and the gigs, the list, the town — spaced out down the lower part of the picture */
/* THE BOTTOM, FROM HIS MOCK-UP (15 Oct): the two buttons in the corners, two lines each, and PURVEYORS OF UNPOPULAR CULTURE along the very bottom */
.bottom { position: fixed; left: 0; right: 0; bottom: calc(var(--bot) + clamp(6px, 1.4vh, 16px)); display: flex; flex-direction: column; align-items: stretch;
  gap: clamp(6px, 1.4vh, 16px); padding: 0 calc(var(--gut) - 4px); }
.ways { display: flex; justify-content: space-between; align-items: flex-end; }
.ways .sticker.big { font-size: clamp(30px, min(8.6vw, 7.4vh), 76px); line-height: 0.95; text-align: center; padding: 4px 10px; }
.bottom .tag { align-self: center; text-align: center; }
#land.on .ways .sticker { pointer-events: auto; }
.tag { font-family: var(--tag); font-size: clamp(22px, 3vw, 44px); color: var(--paper); text-shadow: var(--dark); opacity: 0; white-space: nowrap;
  transform: rotate(-1.5deg); filter: url(#spray); }
.tag.in { animation: fadeUp 0.7s ease-out both; }
@keyframes fadeUp { 0% { opacity: 0; transform: rotate(-1.5deg) translateY(10px); } 100% { opacity: 1; transform: rotate(-1.5deg); } }
.tag, .sub, .where { line-height: 1.05; }
.sub { font-family: var(--marker); font-size: clamp(16px, 2.4vw, 34px); letter-spacing: 0.08em; color: var(--yellow); opacity: 0; white-space: nowrap;
  text-shadow: var(--dark); transform: rotate(1deg); }
.sub.in { animation: fadeUp 0.7s ease-out both; }
.ways .sticker { opacity: 0; }
.ways .sticker.big { padding: 2px 22px; min-height: 0; }
/* THE STAMP: sprayed through a stencil, red, crooked */
.stamp { position: absolute; right: clamp(10px, 6vw, 120px); top: clamp(80px, 22vh, 240px); font-family: var(--spray); font-size: clamp(22px, 3vw, 44px); letter-spacing: 0.04em;
  color: var(--red); transform: rotate(-11deg); opacity: 0; text-shadow: 2px 2px 0 #000, 0 0 12px rgba(0,0,0,0.7), 0 0 18px rgba(255,42,34,0.35); filter: url(#spray); }
.stamp.in { animation: stamp 0.6s ease-out both; }
@keyframes stamp { 0% { opacity: 0; transform: rotate(-11deg) scale(1.15); } 100% { opacity: 1; transform: rotate(-11deg) scale(1); } }
.where { font-family: var(--marker); font-size: clamp(16px, 1.9vw, 28px); letter-spacing: 0.2em; white-space: nowrap;
  color: rgba(236,230,210,0.85); text-shadow: var(--dark); opacity: 0; transition: opacity 1s ease 1.2s; transform: rotate(-1deg); filter: url(#spray); }
#land.on .where { opacity: 1; }
#land:not(.on) .where { transition: opacity 0.25s ease 0s; }

/* ── THE GIGS: the window poster by poster; the words written straight on the picture ── */
#gigs { position: fixed; inset: 0; z-index: 3; pointer-events: none; opacity: 0; transition: opacity 0.5s ease; }
#gigs.on { opacity: 1; }
#gigs.on .arrow, #gigs.on .gigButtons .sticker { pointer-events: auto; }
.arrow { position: absolute; top: 50%; width: 86px; height: 110px; margin-top: -55px; display: flex; align-items: center; justify-content: center; opacity: 0.95; transition: transform 0.15s ease, opacity 0.3s ease; filter: url(#spray); }
.arrow.prev { left: calc(var(--gut) - 10px); transform: rotate(-6deg); } .arrow.next { right: calc(var(--gut) - 10px); transform: rotate(5deg); }
.arrow svg { width: 64px; height: 64px; fill: none; stroke: var(--green); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(3px 3px 0 #000) drop-shadow(0 0 10px rgba(0,0,0,0.7)); }
.arrow:hover svg, .arrow:focus-visible svg { stroke: var(--pink); }
.arrow:active { transform: scale(0.9); }
.arrow.dim { opacity: 0.25; pointer-events: none; }
.card { position: absolute; left: 50%; bottom: max(150px, 24vh); transform: translateX(-50%) rotate(-1.5deg); width: min(640px, calc(100% - 2 * var(--gut) - 170px)); text-align: left;
  filter: url(#spray); }
.card .num { font-family: var(--marker); font-size: clamp(14px, 1.5vw, 19px); color: var(--green); letter-spacing: 0.1em; text-shadow: var(--dark); }
.card .title { font-family: var(--tag); font-size: clamp(26px, 3.4vw, 48px); line-height: 1.02; margin-top: 2px; color: var(--pink); text-shadow: var(--dark), 0 0 22px rgba(255,47,160,0.3); }
.card .text { font-family: var(--marker); font-size: clamp(13px, 1.3vw, 17px); line-height: 1.38; margin-top: 8px; color: var(--paper); text-shadow: var(--dark); white-space: pre-line; }
.card.swap { animation: swap 0.3s ease-out 1; }
@keyframes swap { 0% { transform: translateX(-50%) rotate(-1.5deg) translateY(10px); opacity: 0; } 100% { transform: translateX(-50%) rotate(-1.5deg); opacity: 1; } }
.gigButtons { position: absolute; left: 0; right: 0; bottom: calc(var(--bot) + var(--tick) + 6px); display: flex; justify-content: center; gap: clamp(30px, 7vw, 100px); }
.gigButtons .sticker { font-size: clamp(22px, 2.6vw, 36px); }

/* ── THE MODES: ORBIT · HEADLESS · WALK — words, the one that is on underlined with a scribble ── */
#modes { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--bot) + var(--tick) + 66px); z-index: 4; display: flex; gap: 14px; opacity: 0; pointer-events: none; transition: opacity 0.5s ease;
  filter: url(#spray); }
#modes.on { opacity: 1; pointer-events: auto; }
/* on the rail the pad sits under the modes: the modes move up to make room; on a narrow screen the open dials take the pad's place */
body.headless #modes { bottom: calc(var(--bot) + var(--tick) + 130px); }
@media (max-width: 820px) { body.dialsOpen #pad { opacity: 0 !important; pointer-events: none !important; } }
#modes button { position: relative; min-height: 44px; padding: 6px 12px; font-family: var(--tag); font-size: clamp(22px, 2.6vw, 34px); color: rgba(236,230,210,0.82);
  text-shadow: var(--dark); transform: rotate(var(--tilt, 0deg)); transition: color 0.2s, transform 0.15s; }
#modes button:nth-child(1) { --tilt: -3deg; } #modes button:nth-child(2) { --tilt: 2deg; } #modes button:nth-child(3) { --tilt: -2deg; }
#modes button:hover, #modes button:focus-visible { color: var(--green); transform: rotate(0deg) scale(1.06); }
#modes button.now { color: var(--green); text-decoration: underline wavy var(--green) 3px; text-underline-offset: 7px; text-shadow: var(--dark), 0 0 22px rgba(48,240,8,0.4); }
#modes button[hidden] { display: none; }
#modes button.pop { animation: fadeUp 0.5s ease-out both; }

/* ── HEADLESS's PAD: a cross — left / right is the speed along the rail (the middle = stopped), up / down is in and out. One axis
   at a time: a drag locks to the way it starts; the knob stays where it is left, so the other axis works from wherever it is ── */
#pad { position: fixed; left: 50%; transform: translateX(-50%) rotate(-1.2deg); bottom: calc(var(--bot) + var(--tick) + 2px); width: 236px; height: 112px; z-index: 4;
  opacity: 0; pointer-events: none; transition: opacity 0.5s ease; touch-action: none; outline: none; cursor: grab; filter: url(#spray); }
#pad.on { opacity: 1; pointer-events: auto; }
#pad.on.idle { opacity: 0.6; }
#pad:hover { opacity: 1 !important; }
#pad.held { cursor: grabbing; }
#pad .bar { position: absolute; background: rgba(236,230,210,0.85); box-shadow: 2px 2px 0 #000; }
#pad .bar.h { left: 6%; right: 6%; top: 50%; height: 5px; margin-top: -2px; }
#pad .bar.v { top: 4%; bottom: 4%; left: 50%; width: 5px; margin-left: -2px; }
#pad .knob { position: absolute; width: 24px; height: 24px; margin: -12px 0 0 -12px; border-radius: 50%; background: var(--green); left: 50%; top: 50%;
  box-shadow: 2px 2px 0 #000, 0 0 14px rgba(48,240,8,0.85); }
#pad .lab { position: absolute; font-family: var(--marker); font-size: 12px; color: var(--paper); text-shadow: var(--dark); letter-spacing: 0.06em; pointer-events: none; }
#pad .lab.top { left: 50%; top: -4px; margin-left: 11px; }
#pad .lab.bot { left: 50%; bottom: -4px; margin-left: 11px; }
#pad .lab.left { left: 5%; top: 50%; margin-top: 7px; }
#pad .lab.right { right: 5%; top: 50%; margin-top: 7px; }

/* ── THE DIALS: the word, and under it the sliders written on the picture ── */
#dials { position: fixed; right: var(--gut); bottom: calc(var(--bot) + var(--tick) + 8px); z-index: 4; display: flex; flex-direction: column-reverse; align-items: flex-end; gap: 6px; opacity: 0; pointer-events: none; transition: opacity 0.5s ease; }
#dials.on { opacity: 1; pointer-events: auto; }
#dials .panel { display: none; flex-direction: column; gap: 10px; padding: 6px 4px 10px; transform: rotate(-1.5deg); filter: url(#spray); }
#dials.open .panel { display: flex; }
#dials label { display: grid; grid-template-columns: 86px 150px 52px; align-items: center; gap: 10px; font-family: var(--tag); font-size: 18px; color: var(--paper); text-shadow: var(--dark); }
#dials label b { font-family: var(--marker); font-size: 17px; color: var(--green); font-weight: 400; text-align: right; text-shadow: var(--dark); }
#dials input[type=range] { -webkit-appearance: none; appearance: none; width: 100%; height: 5px; background: rgba(236,230,210,0.85); box-shadow: 2px 2px 0 #000; outline: none; }
#dials input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 16px; height: 16px; border-radius: 50%; background: var(--green); border: 0; box-shadow: 2px 2px 0 #000, 0 0 10px rgba(48,240,8,0.8); cursor: ew-resize; }
#dials input[type=range]::-moz-range-thumb { width: 16px; height: 16px; border-radius: 50%; background: var(--green); border: 0; }
#dials .tip { display: grid; grid-template-columns: 86px 36px 1fr; align-items: center; gap: 10px; margin-top: 2px; font-family: var(--tag); font-size: 18px; color: var(--paper);
  text-shadow: var(--dark); touch-action: none; outline: none; cursor: ns-resize; }
#dials .tip svg { width: 30px; height: 30px; fill: none; stroke: var(--green); stroke-width: 2.6; stroke-linecap: round; filter: drop-shadow(2px 2px 0 #000); }
#dials .tip svg .dot { fill: var(--pink); stroke: none; }
#dials .tip.held svg { animation: spin 1.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
#dials .tip b { font-family: var(--marker); font-size: 15px; color: var(--green); font-weight: 400; text-shadow: var(--dark); }
#dialsToggle { --tilt: 3deg; }

/* ── home: the face, bottom left, big, breathing ── */
.icon { position: fixed; z-index: 4; width: 150px; height: 150px; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.5s ease; }
.icon.on { opacity: 1; pointer-events: auto; }
.icon img { width: 130px; animation: breathe 2.8s ease-in-out infinite; transition: transform 0.15s ease; }
.icon.on:hover img, .icon.on:focus-visible img { animation-play-state: paused; transform: scale(1.12) rotate(-6deg); filter: drop-shadow(0 0 16px rgba(48,240,8,1)) drop-shadow(0 0 44px rgba(48,240,8,0.8)); }
/* Home (15 Oct): the WORD, in the shop's green — the head that stood here is gone */
#home { right: var(--gut); top: max(14px, env(safe-area-inset-top)); width: auto; height: auto; padding: 9px 18px; font-family: var(--tag); font-size: 22px; line-height: 1;
  letter-spacing: 0.04em; color: var(--green); background: radial-gradient(120% 140% at 30% 0%, #17300c 0%, #0a1407 55%, #050903 100%); border: 2px solid var(--green);
  border-radius: 15px 19px 13px 17px; text-shadow: 0 0 9px rgba(48,240,8,0.7); box-shadow: 0 0 10px rgba(48,240,8,0.35), inset 0 0 12px rgba(48,240,8,0.25); }
#home[hidden] { display: none !important; }      /* (the head at the top left is the home button now; this one is retired) */
#home:hover, #home:focus-visible { color: #d7ffc9; box-shadow: 0 0 18px rgba(48,240,8,0.7), inset 0 0 14px rgba(48,240,8,0.4); }

/* ── the one-time hint: marker, over the picture ── */
#hint { position: fixed; left: 0; right: 0; top: 16%; margin: 0 auto; width: max-content; max-width: calc(100% - 32px); z-index: 4; pointer-events: none; text-align: center;
  font-family: var(--marker); font-size: clamp(15px, 1.7vw, 22px); letter-spacing: 0.04em; color: var(--paper); text-shadow: var(--dark); opacity: 0; transition: opacity 0.6s ease;
  transform: rotate(-1deg); filter: url(#spray); }
#hint.on { opacity: 1; }
#hint em { font-style: normal; color: var(--green); }
/* out the front (the home page or the gigs up) the hint sits low, above the ticker, clear of the face and the posters' words */
#land.on ~ #hint { top: auto; bottom: calc(var(--bot) + var(--tick)); }
#gigs.on ~ #hint { top: auto; bottom: calc(var(--bot) + var(--tick) + 86px); }

/* ── the ticker along the bottom: graffiti running past, no bar ── */
#ticker { position: fixed; left: -2%; right: -2%; bottom: 0; height: var(--tick); z-index: 3; overflow: hidden; font-family: var(--tag); font-size: clamp(20px, 2.4vw, 30px);
  color: var(--green); text-shadow: var(--dark); opacity: 0; transition: opacity 0.6s ease; pointer-events: none; white-space: nowrap; transform: rotate(-0.7deg); transform-origin: 0 100%; line-height: var(--tick); }
#ticker.on { opacity: 1; }
#ticker .run { display: inline-block; padding-left: 100%; animation: run 40s linear infinite; }
@keyframes run { to { transform: translateX(-100%); } }
#ticker .run b { font-weight: 400; color: var(--pink); margin: 0 0.6em; }
#ticker .run i { font-style: normal; margin: 0 1.2em; }
#ticker .run i:nth-child(4n+3) { color: var(--paper); }
#ticker .run i:nth-child(4n+5) { color: var(--yellow); }

#note { position: fixed; left: 0; right: 0; top: 40%; margin: 0 auto; width: max-content; max-width: calc(100% - 32px); z-index: 9; text-align: center; font-family: var(--marker); font-size: 16px;
  letter-spacing: 0.04em; line-height: 1.7; color: var(--paper); text-shadow: var(--dark); }

/* a phone held upright */
@media (orientation: portrait) {
  #landFace { width: min(50vw, 220px); }
  .ways .sticker.big { font-size: clamp(30px, 8vw, 46px); }
  #pad { width: 210px; height: 100px; }
  #dials label { grid-template-columns: 70px 110px 44px; font-size: 15px; }
  .card { width: calc(100% - 2 * var(--gut)); bottom: 136px; }
  .arrow { top: auto; bottom: 250px; margin-top: 0; }

}
@media (prefers-reduced-motion: reduce) {
  #loader .face, .icon img, .sticker.in, #landSign img.in, #landFace.in, .tag.in, .sub.in, .stamp.in, #ticker .run, #dials .tip.held svg, .card.swap, #modes button.pop { animation: none !important; opacity: 1; }
}

/* ── INSIDE THE SHOP (15 Oct): TURD FX's own bar — ⌂ Home · Orbit · Walk — in the shop's green: graveyard black, acid green, a slime drip
   hanging off each button (his: "reskin them and make them look green and zombie-like"). The same three buttons, the same places ── */
#tbar { position: fixed; left: 50%; transform: translateX(-50%); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 6; display: none; gap: 12px; align-items: center;
  width: max-content; max-width: calc(100vw - 16px); font-family: var(--tag); color: var(--green); filter: none; }
/* Home · WALK · Orbit with Walk at the middle of the screen (15 Oct, his: "we start on walk by default and it's going to be glowing") */
#tbar.on { display: flex; justify-content: center; }
#tModes { display: flex; gap: 12px; }
#tbar button { position: relative; font: inherit; font-size: 22px; letter-spacing: 0.04em; line-height: 1; color: var(--green); cursor: pointer; min-height: 0;
  background: radial-gradient(120% 140% at 30% 0%, #17300c 0%, #0a1407 55%, #050903 100%); border: 2px solid var(--green); border-radius: 15px 19px 13px 17px;
  text-shadow: 0 0 9px rgba(48,240,8,0.7); transform: none; text-decoration: none;
  box-shadow: 0 0 10px rgba(48,240,8,0.35), inset 0 0 12px rgba(48,240,8,0.25);
  transition: transform 0.12s ease, color 0.12s ease, box-shadow 0.12s ease; }
#tbar button:hover, #tbar button:focus-visible { color: #d7ffc9; transform: translateY(-1px) rotate(-0.8deg);
  box-shadow: 0 0 18px rgba(48,240,8,0.7), inset 0 0 14px rgba(48,240,8,0.4); }
#tbar button:active { transform: translateY(1px) scale(0.97); }
/* (15 Oct, his: "put the date and the gig up the top … slide it in next to the X. Centred … move the poster down a bit"): the caption is a row at the
   top, level with the X and centred between its two margins; the picture sits under it, the buttons and the dots under that */

/* HOW TO MOVE, IN PICTURES: four animated tiles in a green-edged slab, centre of the picture */
#guide { position: fixed; z-index: 7; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(92vw, 400px); display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px;
  padding: 18px 16px 14px; background: rgba(5,9,3,0.82); border: 2px solid var(--green); border-radius: 18px 22px 16px 20px; box-shadow: 0 0 18px rgba(48,240,8,0.4), inset 0 0 16px rgba(48,240,8,0.15);
  opacity: 0; pointer-events: none; transition: opacity 0.5s ease; text-align: center; }
#guide.on { opacity: 1; }
#guide .tile { display: flex; flex-direction: column; align-items: center; gap: 2px; }
#guide svg { width: 100%; max-width: 150px; height: auto; overflow: visible; filter: drop-shadow(0 0 5px rgba(48,240,8,0.65)); }
#guide .trail { fill: none; stroke: var(--green); stroke-width: 2.6; stroke-linecap: round; stroke-opacity: 0.55; stroke-dasharray: 2 6; }
#guide .head { fill: none; stroke: var(--green); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
#guide .ring { fill: none; stroke: var(--pink); stroke-width: 2.6; }
#guide .finger { fill: var(--green); stroke: #061104; stroke-width: 2; }
#guide .keys rect { fill: var(--green); fill-opacity: 0.1; stroke: var(--green); stroke-width: 2.6; }
#guide .keys text { fill: var(--paper); font-family: var(--tag); font-size: 20px; text-anchor: middle; }
#guide b { font-family: var(--tag); font-size: 26px; font-weight: 400; letter-spacing: 0.06em; color: var(--green); text-shadow: 0 0 10px rgba(48,240,8,0.7), 2px 2px 0 #000; line-height: 1; }
#guide span { font-family: var(--marker); font-size: 13.5px; line-height: 1.25; color: var(--paper); }
#guide p { grid-column: 1 / -1; margin: 4px 0 0; font-family: var(--marker); font-size: 13px; color: rgba(236,230,210,0.75); letter-spacing: 0.04em; }
@media (prefers-reduced-motion: reduce) { #guide svg animate, #guide svg animateMotion { display: none; } }
/* THE SPEAKER, bottom left, while you are in the shop (15 Oct, his: "a mute and unmute speaker in the funky green trash cult style") */
#sound { position: fixed; z-index: 6; right: max(14px, env(safe-area-inset-right)); top: max(10px, env(safe-area-inset-top)); display: none;   /* (top right again, 15 Oct night — his) */ width: 64px; height: 58px; padding: 6px;
  align-items: center; justify-content: center; cursor: pointer; color: var(--green);
  /* (15 Oct night, his: "the black slide underneath it is very virtual tourish … keep the speaker itself with the little wave lines coming out of it"): no slab, no frame —
     the speaker is drawn like the zombie head: acid green, a glow, a slap of tilt */
  background: none; border: 0; box-shadow: none; transform: rotate(-4deg); transition: transform 0.15s ease, filter 0.15s ease; -webkit-tap-highlight-color: transparent; }
body.touring #sound { display: flex; }
#sound svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px rgba(48,240,8,0.8)); }
#sound .cone { fill: currentColor; fill-opacity: 0.22; }
#sound .cross { display: none; stroke: #ff2fa0; filter: drop-shadow(0 0 5px rgba(255,47,160,0.8)); }
#sound:hover, #sound:focus-visible { transform: rotate(0deg) scale(1.1); outline: none; }
#sound:active { transform: rotate(0deg) scale(0.94); }
#sound svg { stroke-width: 5.2; filter: drop-shadow(0 0 4px rgba(48,240,8,0.85)) drop-shadow(0 0 12px rgba(48,240,8,0.45)) drop-shadow(2px 2px 0 #000); }
#sound .cone { fill-opacity: 0.35; }
#sound[aria-pressed="false"] { color: rgba(236,230,210,0.62); }
#sound[aria-pressed="false"] svg { filter: none; }
#sound[aria-pressed="false"] .wave { display: none; }
#sound[aria-pressed="false"] .cross { display: block; }
/* THE GIG GUIDE WITHOUT WORDS (15 Oct, his: "you can't read it and it looks horrible"): the window, then the stage — no card */
#gigCard { display: none; }
/* the way you are moving glows, filled solid like fresh paint */
#tModes button { padding: 9px 22px; }
#tModes button.on { background: var(--green); color: #061104; text-shadow: none; box-shadow: 0 0 20px rgba(48,240,8,0.9), 0 0 6px rgba(48,240,8,0.9); }
#tModes button[hidden] { display: none; }

body.touring #hint { top: 50%; bottom: auto; left: 50%; right: auto; margin: 0; width: max-content; max-width: min(18em, calc(100% - 40px)); font-family: var(--marker); font-size: clamp(17px, 2vw, 24px);
  letter-spacing: 0.03em; line-height: 1.55; text-align: center; text-transform: none; color: var(--paper); text-shadow: none; transform: translate(-50%, -50%); filter: none;
  background: rgba(5,9,3,0.78); border: 2px solid var(--green); padding: 22px 34px; border-radius: 14px 18px 13px 17px; box-shadow: 0 0 14px rgba(48,240,8,0.35); }
body.touring #hint em { color: var(--green); font-style: normal; }


/* THE EAR, THE SWIPE, THE BIG BUTTONS (15 Oct, his: "ditch the X … a funny looking ear … get rid of the next and previous arrows … swipe … those buttons bigger and fill up more of the screen") */
/* NO CAPTION (15 Oct, his: "a bit too hard to read now. Maybe we just ditch it"): the posters say what they are; the picture takes the room it had */


/* (last word on the home page, his mock-up 15 Oct) */
.top[hidden] { display: none !important; }
.ways .sticker.big { font-size: clamp(30px, min(8.6vw, 7.4vh), 76px); }

/* BACK TO GREEN (15 Oct, his: "I really don't like all this white outline stuff. Can we get it back to the green one we had originally"): the look of the
   mock-up commit — green head and green name with a glow, PURVEYORS along the bottom. What is kept from the outline round: the pieces are laid out once and
   only moved by transform (smooth), and the head breathes by opacity only. */
#landFace, #landSign { left: 0; top: 0; transform-origin: 50% 50%; will-change: transform; }
#landFace { filter: drop-shadow(0 0 8px rgba(48,240,8,0.5)) drop-shadow(0 0 22px rgba(48,240,8,0.35)); }
#landFace.asHome { filter: drop-shadow(0 0 5px rgba(48,240,8,0.75)); }
@keyframes faceOn { 0% { opacity: 0; } 100% { opacity: 0.94; } }
@keyframes breatheOn { 0%, 100% { opacity: 0.9; } 50% { opacity: 1; } }

/* THE TWO CORNER BLOCKS: every line as wide as its block (trash.js fitCorners sets the sizes) */
.ways .sticker.big { padding: 0 6px; min-height: 0; }
.ways .sticker.big span { display: flex; flex-direction: column; align-items: center; }
.ways .sticker.big i { display: block; font-style: normal; white-space: nowrap; line-height: 0.95; }
.bottom { bottom: calc(var(--bot) + clamp(4px, 1vh, 12px)); }

/* THE INSTRUCTIONS, SPRAYED ON (15 Oct night): three lines on the picture itself, each a slapped-on sticker — a paint doodle and a word in the
   poster hand, pink and green, the spray wobble the home page has. They rise on one after another and PEEL away toward the head top left at the
   first touch (or after twelve seconds). The tiles (#guide) stay in the file: show.js guide: 'tiles' brings them back */
#sprayGuide { position: fixed; z-index: 7; left: 50%; top: 50%; transform: translate(-50%, -50%); width: min(88vw, 340px); display: flex; flex-direction: column; gap: clamp(10px, 2.2vh, 22px);
  pointer-events: none; opacity: 0; transition: opacity 0.4s ease; transform-origin: 0 0; }
#sprayGuide.on { opacity: 1; }
#sprayGuide.peel { opacity: 0; transform: translate(calc(-50% - 38vw), calc(-50% - 40vh)) scale(0.08) rotate(-28deg); transition: transform 0.55s cubic-bezier(0.6, 0, 0.9, 0.4), opacity 0.45s ease 0.1s; }
#sprayGuide .line { display: flex; align-items: center; gap: 14px; opacity: 0; transform: rotate(var(--tilt)); }
#sprayGuide.on .line { animation: rise 0.55s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
#sprayGuide.on .line:nth-child(2) { animation-delay: 0.18s; } #sprayGuide.on .line:nth-child(3) { animation-delay: 0.36s; }
#sprayGuide svg { flex: 0 0 auto; width: clamp(100px, 28vw, 132px); height: auto; overflow: visible; filter: url(#spray) drop-shadow(0 0 7px rgba(48,240,8,0.55)); }
#sprayGuide .smear { fill: none; stroke: var(--green); stroke-width: 11; stroke-linecap: round; opacity: 0.92; }   /* (the dash and its offset are ATTRIBUTES on the path: a CSS rule would override the SMIL animation of them) */
#sprayGuide .smear.thin { stroke-width: 7; }
#sprayGuide .tip { fill: none; stroke: var(--green); stroke-width: 8; stroke-linecap: round; stroke-linejoin: round; }
#sprayGuide .blob { fill: var(--pink); } #sprayGuide .blob.p { fill: var(--pink); } #sprayGuide .drip { fill: var(--green); }
#sprayGuide .splat { fill: var(--green); }   /* (scaled about its own middle by a translate() wrapper: SMIL ignores transform-origin) */
#sprayGuide .w { display: flex; flex-direction: column; gap: 2px; filter: url(#spray); }
#sprayGuide b { font-family: var(--tag); font-weight: 400; font-size: clamp(30px, 8.5vw, 42px); line-height: 1; letter-spacing: 0.04em; text-shadow: var(--dark); }
#sprayGuide b.g { color: var(--green); text-shadow: var(--dark), 0 0 22px rgba(48,240,8,0.45); } #sprayGuide b.p { color: var(--pink); text-shadow: var(--dark), 0 0 22px rgba(255,47,160,0.45); }
#sprayGuide i { font-family: var(--marker); font-style: normal; font-size: clamp(13px, 3.6vw, 16px); line-height: 1.2; color: var(--paper); text-shadow: 2px 2px 0 #000, 0 0 8px rgba(0,0,0,0.8); }
@media (prefers-reduced-motion: reduce) { #sprayGuide svg animate, #sprayGuide svg animateMotion, #sprayGuide svg animateTransform { display: none; } #sprayGuide.peel { transform: translate(-50%, -50%); } }

/* THE MINIMAL LINES (15 Oct night): DRAG = LOOK · TAP = FOCUS · PINCH = ZOOM, green and pink turn about, the = in paper. The doodle rules above
   are kept for the preset (presets/guides/sprayed-doodles/) and do nothing here */
#sprayGuide { width: min(90vw, 360px); gap: clamp(16px, 3vh, 30px); }   /* (a little more air between the lines, 15 Oct late) */
#sprayGuide .line { justify-content: center; align-items: baseline; gap: 0.3em; filter: url(#spray); }
#sprayGuide .line b { font-size: clamp(34px, 9.4vw, 46px); }
#sprayGuide .eq { font-family: var(--tag); font-style: normal; font-size: clamp(26px, 7vw, 36px); line-height: 1; color: var(--paper); text-shadow: var(--dark); }

/* THE CORNER BLOCKS SET LIKE TYPE (15 Oct late): flush to the outside, off the edges — a margin of 4.5 % of the width each side and a little
   more under them — the pair's baselines level (trash.js fitCorners sets the two type sizes) */
.ways { padding: 0 clamp(18px, 4.5vw, 44px); align-items: flex-end; }
.bottom { bottom: calc(var(--bot) + clamp(14px, 2.6vh, 30px)); }
.ways .sticker.big { padding: 0; }
#bEnter span { align-items: flex-start; } #bEnter i { text-align: left; }
#bGigs span { align-items: flex-end; } #bGigs i { text-align: right; }

/* THE INSTRUCTIONS LEAVE SLOWLY (15 Oct night, his: "a bit too quick and whizzy"): 1.3 s on a long ease, fading over 1.1 s */
#sprayGuide.peel { transition: transform 1.3s cubic-bezier(0.5, 0, 0.25, 1), opacity 1.15s ease 0.15s; }

/* THE MODE BAR, AS THE SHOP'S OWN WORDS (15 Oct night, his: "take a look at the walk and orbit buttons and tell me if they need an overhaul"): the
   black slab with a green frame was the same virtual-tour tab as the speaker had. Now: the two words in the poster hand, WALK in green and
   ORBIT in pink (ENTER and GIG's pairing), the one you are in lit and underlined with a slap of paint, the other quieter — no box */
#tbar button { background: none; border: 0; box-shadow: none; border-radius: 0; font-family: var(--tag); font-size: clamp(28px, 7.6vw, 36px); letter-spacing: 0.03em;
  padding: 6px 14px 10px; text-transform: uppercase; text-shadow: var(--dark); filter: url(#spray); opacity: 0.62; transform: rotate(-1.5deg);
  transition: opacity 0.2s ease, transform 0.15s ease, text-shadow 0.2s ease; }
#tbar button[data-m="walk"] { color: var(--green); }
#tbar button[data-m="orbit"] { color: var(--pink); transform: rotate(1.8deg); }
#tbar button.on, #tbar button[aria-pressed="true"], #tbar button.cur { opacity: 1; }
#tbar button[data-m="walk"].on, #tbar button[data-m="walk"].cur, #tbar button[data-m="walk"][aria-pressed="true"] { text-shadow: var(--dark), 0 0 22px rgba(48,240,8,0.65); }
#tbar button[data-m="orbit"].on, #tbar button[data-m="orbit"].cur, #tbar button[data-m="orbit"][aria-pressed="true"] { text-shadow: var(--dark), 0 0 22px rgba(255,47,160,0.6); }
#tbar button.on::after, #tbar button.cur::after, #tbar button[aria-pressed="true"]::after { content: ''; position: absolute; left: 10px; right: 10px; bottom: 3px; height: 5px; border-radius: 3px;
  background: currentColor; transform: rotate(-1.2deg); box-shadow: 0 0 10px currentColor; }
#tbar button:hover, #tbar button:focus-visible { opacity: 1; transform: rotate(0deg) scale(1.06); box-shadow: none; color: inherit; outline: none; }
#tbar button[data-m="walk"]:hover { color: var(--green); } #tbar button[data-m="orbit"]:hover { color: var(--pink); }
#tbar button:active { transform: scale(0.96); }
/* the old filled-paint rule (#tModes button.on) is over-ridden: the lit word is the word itself, glowing, with its underline (15 Oct night) */
#tbar #tModes button { padding: 6px 14px 12px; }
#tbar #tModes button.on { background: none; box-shadow: none; }
#tbar #tModes button[data-m="walk"].on { color: var(--green); text-shadow: var(--dark), 0 0 22px rgba(48,240,8,0.7); }
#tbar #tModes button[data-m="orbit"].on { color: var(--pink); text-shadow: var(--dark), 0 0 22px rgba(255,47,160,0.65); }

/* THE HEAD IS HIDDEN UNTIL THE SCRIPT HAS PLACED IT (15 Oct night, his: "as soon as you hit refresh, the logo appears top left corner for one frame"):
   left / top 0 with the translate(-50%, -50%) above put its middle on the page's corner on the first paint, before park() ran */
#landFace:not(.placed) { visibility: hidden; }

/* ── THE GALLERY, STRIPPED BACK (15 Oct night): a scrim, the poster on a strip, an X, the dashes ── */
#flyerBox { position: fixed; inset: 0; z-index: 30; visibility: hidden; pointer-events: none; touch-action: none; --galSide: clamp(18px, 4.5vw, 44px); --galTop: 64px; --galBot: 54px; }
#flyerBox.on { visibility: visible; pointer-events: auto; }
#galScrim { position: absolute; inset: 0; background: rgba(3, 7, 3, 0.93); opacity: 0; transition: opacity 0.32s ease; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
#flyerBox.on #galScrim { opacity: 1; }
#galTrack { position: absolute; inset: 0; display: flex; flex-wrap: nowrap; will-change: transform; transform: translate3d(-100%, 0, 0); }
.galSlide { flex: 0 0 100%; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; box-sizing: border-box;
  padding: max(var(--galTop), env(safe-area-inset-top)) var(--galSide) max(var(--galBot), env(safe-area-inset-bottom)); }
.galSlide img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; border-radius: 3px;
  box-shadow: 9px 9px 0 #000, 0 0 60px rgba(0, 0, 0, 0.7); user-select: none; -webkit-user-drag: none; -webkit-touch-callout: none; }
.galSlide img[src=""], .galSlide img:not([src]) { visibility: hidden; }
/* close: an X in the poster hand, no box */
#galX { position: absolute; top: max(6px, env(safe-area-inset-top)); right: max(10px, env(safe-area-inset-right)); padding: 4px 16px 8px; background: none; border: 0; cursor: pointer;
  font-family: var(--tag); font-size: 42px; line-height: 1; color: var(--green); text-shadow: var(--dark); transform: rotate(7deg); filter: url(#spray);
  transition: transform 0.15s ease, color 0.15s ease; -webkit-tap-highlight-color: transparent; }
#galX:hover, #galX:focus-visible { color: var(--pink); transform: rotate(0deg) scale(1.12); outline: none; }
/* navigate: a swipe; chevrons for a mouse only */
.galNav { position: absolute; top: 50%; transform: translateY(-50%); display: none; padding: 18px 10px; background: none; border: 0; cursor: pointer; opacity: 0.55;
  transition: opacity 0.15s ease, transform 0.15s ease; -webkit-tap-highlight-color: transparent; }
.galNav.prev { left: max(2px, env(safe-area-inset-left)); } .galNav.next { right: max(2px, env(safe-area-inset-right)); }
.galNav svg { width: 30px; height: 46px; fill: none; stroke: var(--green); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(2px 2px 0 #000); }
.galNav:hover, .galNav:focus-visible { opacity: 1; outline: none; } .galNav:hover svg { stroke: var(--pink); }
@media (hover: hover) and (pointer: fine) { #flyerBox.on .galNav { display: block; } }
/* where you are: the dashes, the one you are on pink */
#flyerDots { position: absolute; left: 0; right: 0; bottom: max(16px, env(safe-area-inset-bottom)); display: flex; gap: 8px; justify-content: center; align-items: center; pointer-events: none; }
#flyerDots i { display: block; width: 16px; height: 4px; border-radius: 2px; background: rgba(48, 240, 8, 0.45); transform: rotate(-3deg); transition: width 0.25s ease, background 0.25s ease; }
#flyerDots i.on { width: 28px; background: var(--pink); box-shadow: 0 0 8px rgba(255, 47, 160, 0.75); }

/* THE GIG GUIDE'S CONTROLS (15 Oct night): the arrows in the bottom corners, FLYERS between them in the poster hand — no box, like Walk / Orbit;
   no BACK (the head top left is the way home). The camera is TURD FX's Orbit there now, so the arrows and the word are the only things over it */
#gigs.on .arrow, #gigs.on .gigButtons button { pointer-events: auto; }
#gigs .arrow { top: auto; bottom: calc(var(--bot) + 4px); margin-top: 0; width: 66px; height: 66px; opacity: 0.9; }
#gigs .arrow.prev { left: var(--gut); transform: rotate(-5deg); } #gigs .arrow.next { right: var(--gut); transform: rotate(4deg); }
#gigs .arrow svg { width: 44px; height: 44px; stroke-width: 6.5; }
#gigs .arrow:active { transform: scale(0.9); }
#gigs .gigButtons { bottom: calc(var(--bot) + 10px); }
#gigs .word { background: none; border: 0; cursor: pointer; font-family: var(--tag); font-size: clamp(28px, 7.6vw, 36px); line-height: 1; letter-spacing: 0.03em; padding: 6px 14px 12px;
  color: var(--green); text-shadow: var(--dark), 0 0 22px rgba(48,240,8,0.5); transform: rotate(-1.5deg); filter: url(#spray); -webkit-tap-highlight-color: transparent;
  transition: transform 0.15s ease, color 0.15s ease; }
#gigs .word:hover, #gigs .word:focus-visible { color: var(--pink); transform: rotate(0deg) scale(1.06); outline: none; }
#gigs .word:active { transform: scale(0.96); }

/* ═══ TRASH CULT X-RAY TOUR (16 Oct) ═══ */
/* THE ZOMBIE HAND over the gig guide's flyer (his: "an icon change when hovering over the gig guide at back of venue (green zombie hand?!)") */
body.overFlyer #gl, body.overFlyer canvas { cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><path d='M11 2.5c1.6 0 2.6 1.1 2.6 2.8v8.1l1.2-.3c1.4-.3 2.5.4 2.8 1.6l.2.6.6-.2c1.4-.4 2.6.3 3 1.5l.2.6.6-.1c1.5-.2 2.6.8 2.7 2.2l.2 4.3c.2 3.6-2 6.6-5.6 7.3l-3.4.6c-2.6.4-5-.7-6.4-2.9l-4.7-7.3c-.8-1.2-.4-2.6.8-3.2 1-.5 2.2-.2 2.9.7l1.4 1.8V5.3c0-1.7 1-2.8 2.6-2.8z' fill='%2330f008' stroke='%23061104' stroke-width='1.6' stroke-linejoin='round'/><path d='M12 9.5h2.2M12 12.5h2.2M15.6 22.5l4 1.2M14.2 26l3.4.4' stroke='%23ff2fa0' stroke-width='1.3' stroke-linecap='round'/><circle cx='20.5' cy='18.6' r='1' fill='%23061104'/></svg>") 11 2, pointer; }
/* THE TOUR'S PILL (his: "one of those play/pause/track in/out … scrubbing pills … make the zombie head the pill"): over the bar, in the tour only */
#ridePill { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(max(18px, env(safe-area-inset-bottom)) + 62px); z-index: 6; display: none;
  align-items: center; gap: 10px; padding: 8px 14px; border-radius: 40px; background: rgba(6, 17, 4, 0.72); border: 2px solid rgba(48, 240, 8, 0.55);
  box-shadow: 0 0 18px rgba(48, 240, 8, 0.25); width: min(560px, calc(100vw - 32px)); box-sizing: border-box; touch-action: none; user-select: none; }
body.riding #ridePill { display: flex; }
#ridePill button { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%; border: 0; background: none; color: var(--green); font: inherit;
  font-family: var(--tag); font-size: 28px; line-height: 1; cursor: pointer; text-shadow: 0 0 10px rgba(48, 240, 8, 0.6); }
#ridePill button#rpPlay { font-size: 20px; color: var(--pink); text-shadow: 0 0 10px rgba(255, 47, 160, 0.6); }
#ridePill button:hover { transform: scale(1.1); } #ridePill button:active { transform: scale(0.94); }
#rpTrack { position: relative; flex: 1 1 auto; height: 44px; cursor: grab; }
#rpTrack:active { cursor: grabbing; }
#rpLine { position: absolute; left: 0; right: 0; top: 50%; height: 4px; margin-top: -2px; border-radius: 2px; background: linear-gradient(90deg, var(--green), var(--pink)); opacity: 0.7; }
#rpHead { position: absolute; top: 50%; left: 0; width: 46px; height: 46px; margin: -23px 0 0 -23px; object-fit: contain; pointer-events: none;
  filter: drop-shadow(0 0 8px rgba(48, 240, 8, 0.85)); will-change: transform; }
#tbar button[data-m="tour"] { color: var(--green); transform: rotate(-1.4deg); }
#tbar button[data-m="tour"].on { text-shadow: var(--dark), 0 0 22px rgba(48,240,8,0.65); }
#tbar button[data-m="tour"]:hover { color: var(--green); }

/* THE PILL 15 % BIGGER (16 Oct, his) — over the rules above */
#ridePill { bottom: calc(max(18px, env(safe-area-inset-bottom)) + 70px); gap: 12px; padding: 9px 16px; width: min(644px, calc(100vw - 32px)); border-radius: 46px; }
#ridePill button { width: 48px; height: 48px; font-size: 32px; } #ridePill button#rpPlay { font-size: 23px; }
#rpTrack { height: 51px; } #rpLine { height: 5px; margin-top: -2.5px; }
#rpHead { width: 53px; height: 53px; margin: -26.5px 0 0 -26.5px; }

/* the tour's instructions have a fourth line (16 Oct) */
#sprayGuide.on .line:nth-child(4) { animation-delay: 0.54s; }

/* THE FIRST INSTRUCTIONS, SPACED (16 Oct, his: "those three lines are a little too close together") */
#sprayGuide { gap: clamp(20px, 4.4vh, 44px); }
/* THE BARREL ROLL (16 Oct): bottom left, in the tour; the gauge rises from it while it is pressed */
#rollCtl { position: fixed; left: max(16px, env(safe-area-inset-left)); bottom: max(18px, env(safe-area-inset-bottom)); z-index: 6; display: none;
  flex-direction: column; align-items: center; gap: 8px; touch-action: none; user-select: none; }
body.riding #rollCtl { display: flex; }
#rollBtn { width: 58px; height: 58px; border-radius: 50%; border: 2px solid rgba(48, 240, 8, 0.55); background: rgba(6, 17, 4, 0.72); color: var(--green);
  display: grid; place-items: center; cursor: ns-resize; padding: 0; box-shadow: 0 0 16px rgba(48, 240, 8, 0.3); touch-action: none; }
#rollBtn svg { width: 40px; height: 40px; filter: drop-shadow(0 0 5px rgba(48, 240, 8, 0.7)); pointer-events: none; }
#rollGauge { position: relative; width: 6px; height: 150px; border-radius: 3px; background: rgba(48, 240, 8, 0.18); opacity: 0; transform: scaleY(0.2);
  transform-origin: bottom; transition: opacity 0.18s ease, transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); }
#rollCtl.open #rollGauge { opacity: 1; transform: scaleY(1); }
#rollFill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; border-radius: 3px; background: linear-gradient(0deg, var(--green), var(--pink));
  box-shadow: 0 0 10px rgba(255, 47, 160, 0.6); }

/* NINTH ROUND (16 Oct, his test) */
/* the zombie-hand cursor 20 % bigger (32 → 38 px) and over the gig gallery too */
body.overFlyer #gl, body.overFlyer canvas, #flyerBox.on, #flyerBox.on * { cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 32 32'><path d='M11 2.5c1.6 0 2.6 1.1 2.6 2.8v8.1l1.2-.3c1.4-.3 2.5.4 2.8 1.6l.2.6.6-.2c1.4-.4 2.6.3 3 1.5l.2.6.6-.1c1.5-.2 2.6.8 2.7 2.2l.2 4.3c.2 3.6-2 6.6-5.6 7.3l-3.4.6c-2.6.4-5-.7-6.4-2.9l-4.7-7.3c-.8-1.2-.4-2.6.8-3.2 1-.5 2.2-.2 2.9.7l1.4 1.8V5.3c0-1.7 1-2.8 2.6-2.8z' fill='%2330f008' stroke='%23061104' stroke-width='1.6' stroke-linejoin='round'/><path d='M12 9.5h2.2M12 12.5h2.2M15.6 22.5l4 1.2M14.2 26l3.4.4' stroke='%23ff2fa0' stroke-width='1.3' stroke-linecap='round'/><circle cx='20.5' cy='18.6' r='1' fill='%23061104'/></svg>") 13 2, pointer; }
/* the corner icons the head's size (--iconW, set from the head's own rule) */
#sound { width: var(--iconW, 64px); height: var(--iconW, 64px); padding: calc(var(--iconW, 64px) * 0.1); }
/* the roll: grunge, no slab — sprayed green like the speaker, the arrow pink */
#rollBtn { width: var(--iconW, 64px); height: var(--iconW, 64px); border: 0; border-radius: 0; background: none; box-shadow: none; padding: 0; color: var(--green); }
#rollBtn svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 4px rgba(48,240,8,0.85)) drop-shadow(0 0 12px rgba(48,240,8,0.4)) drop-shadow(2px 2px 0 #000); }
#rollBtn .arrow { stroke: #ff2fa0; }
#rollBtn:active svg { transform: scale(0.94); }
#rollCtl.open #rollBtn svg { transform: rotate(-12deg); transition: transform 0.2s ease; }
#rollGauge { width: 7px; border-radius: 4px; }

/* THE CHEEKY TIP beside the roll (16 Oct): sprayed straight on the picture, tilted, pink and green, a squiggle arrow back at the icon */
#rollTip { position: absolute; left: calc(100% + 6px); bottom: calc(var(--iconW, 64px) * 0.35); display: grid; grid-template-columns: auto auto; align-items: baseline;
  column-gap: 0.28em; white-space: nowrap; pointer-events: none; opacity: 0; transform: rotate(-7deg) translate(-10px, 8px) scale(0.6); transform-origin: 0 100%;
  transition: opacity 0.25s ease, transform 0.45s cubic-bezier(0.3, 1.6, 0.4, 1); filter: url(#spray); }
#rollTip.on { opacity: 1; transform: rotate(-7deg) translate(0, 0) scale(1); animation: rollTipWobble 1.6s ease-in-out 0.5s infinite; }
#rollTip.on.out { opacity: 0; }
#rollTip .squig { grid-row: 1 / 3; width: clamp(34px, 4vw, 48px); height: auto; color: var(--pink, #ff2fa0); align-self: end; margin-bottom: -0.2em;
  filter: drop-shadow(2px 2px 0 #000); }
#rollTip b { font-family: var(--tag); font-weight: normal; font-size: clamp(22px, 2.6vw, 34px); color: var(--pink, #ff2fa0); line-height: 0.95;
  text-shadow: 2px 2px 0 #000, 0 0 10px rgba(255,47,160,0.55); }
#rollTip i { grid-column: 2; font-style: normal; font-family: var(--tag); font-size: clamp(20px, 2.3vw, 30px); color: var(--green); line-height: 1;
  text-shadow: 2px 2px 0 #000, 0 0 10px rgba(48,240,8,0.55); margin-left: 0.6em; }
#rollTip em { grid-column: 2; font-style: normal; font-family: var(--marker); font-size: clamp(12px, 1.2vw, 15px); color: var(--paper, #ece6d2); letter-spacing: 0.04em;
  text-shadow: 1px 1px 0 #000; margin-left: 1.4em; transform: rotate(3deg); }
@keyframes rollTipWobble { 0%, 100% { rotate: 0deg; } 50% { rotate: 2.5deg; } }
@media (prefers-reduced-motion: reduce) { #rollTip.on { animation: none; } }
#rollTip { left: calc(var(--iconW, 64px) * 0.55); bottom: calc(var(--iconW, 64px) * 1.08); }   /* above the icon, clear of the tour pill */

/* THE TOUR'S CORNERS (16 Oct): the roll a clean green rotation arrow (the speaker's look, no grain, no pink); an X bottom right; no Walk / Orbit / Tour in
   the tour; the pill down at the bottom, its middle level with the corner icons' */
#rollBtn svg { filter: drop-shadow(0 0 4px rgba(48,240,8,0.85)) drop-shadow(0 0 12px rgba(48,240,8,0.45)) drop-shadow(2px 2px 0 #000); }
#rollBtn svg path { fill: none; stroke: currentColor; stroke-width: 4.6; stroke-linecap: round; stroke-linejoin: round; }
#rollBtn { padding: calc(var(--iconW, 64px) * 0.1); }
#tourX { position: fixed; z-index: 6; right: max(16px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom)); display: none;
  width: var(--iconW, 64px); height: var(--iconW, 64px); padding: calc(var(--iconW, 64px) * 0.1); border: 0; background: none; color: var(--green); cursor: pointer; }
body.riding #tourX { display: block; }
#tourX svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 4px rgba(48,240,8,0.85)) drop-shadow(0 0 12px rgba(48,240,8,0.45)) drop-shadow(2px 2px 0 #000); }
#tourX svg path { fill: none; stroke: currentColor; stroke-width: 5.2; stroke-linecap: round; }
#tourX:hover { transform: scale(1.1); } #tourX:active { transform: scale(0.94); }
body.riding #tbar { display: none !important; }
body.riding #ridePill { bottom: calc(max(18px, env(safe-area-inset-bottom)) + (var(--iconW, 64px) - 69px) / 2);
  width: min(644px, calc(100vw - 2 * (max(16px, env(safe-area-inset-left)) + var(--iconW, 64px) + 14px))); }

/* THE ROLL IS A POT OF GREEN BEER TIPPED OVER (16 Oct) — all green, the speaker's strokes and glow */
#rollBtn svg .beer { fill: currentColor; fill-opacity: 0.35; stroke: none; }
#rollBtn svg .drop { fill: currentColor; stroke: none; }
#rollBtn svg .froth { stroke-width: 4; }

/* THE DRAG UP TIP (16 Oct): the DOUBLE TAP tip's look, the same place (they never show together) */
#dragTip { position: absolute; left: calc(100% + 6px); bottom: calc(var(--iconW, 64px) * 0.35); display: grid; grid-template-columns: auto auto; align-items: baseline;
  column-gap: 0.28em; white-space: nowrap; pointer-events: none; opacity: 0; transform: rotate(-7deg) translate(-10px, 8px) scale(0.6); transform-origin: 0 100%;
  transition: opacity 0.25s ease, transform 0.45s cubic-bezier(0.3, 1.6, 0.4, 1); filter: url(#spray); }
#dragTip.on { opacity: 1; transform: rotate(-7deg) translate(0, 0) scale(1); animation: rollTipWobble 1.6s ease-in-out 0.5s infinite; }
#dragTip.on.out { opacity: 0; }
#dragTip .squig { grid-row: 1 / 3; width: clamp(34px, 4vw, 48px); height: auto; color: var(--pink, #ff2fa0); align-self: end; margin-bottom: -0.2em;
  filter: drop-shadow(2px 2px 0 #000); }
#dragTip b { font-family: var(--tag); font-weight: normal; font-size: clamp(22px, 2.6vw, 34px); color: var(--pink, #ff2fa0); line-height: 0.95;
  text-shadow: 2px 2px 0 #000, 0 0 10px rgba(255,47,160,0.55); }
#dragTip i { grid-column: 2; font-style: normal; font-family: var(--tag); font-size: clamp(20px, 2.3vw, 30px); color: var(--green); line-height: 1;
  text-shadow: 2px 2px 0 #000, 0 0 10px rgba(48,240,8,0.55); margin-left: 0.6em; }
#dragTip em { grid-column: 2; font-style: normal; font-family: var(--marker); font-size: clamp(12px, 1.2vw, 15px); color: var(--paper, #ece6d2); letter-spacing: 0.04em;
  text-shadow: 1px 1px 0 #000; margin-left: 1.4em; transform: rotate(3deg); }
#dragTip { left: calc(var(--iconW, 64px) * 0.55); bottom: calc(var(--iconW, 64px) * 1.08); }   /* above the icon, clear of the tour pill */
@media (prefers-reduced-motion: reduce) { #dragTip.on { animation: none; } }

/* THE SCRUBBER, STRIPPED (16 Oct, his yes: "drop the pill's slab and border, make the line a sprayed green-to-pink line, a bare pink pause sign, and the
   head about 80% of the corner icons' size"): no box behind it — the corner icons' look; the pill is exactly an icon tall, so it sits level with them */
body.riding.bareScrub #ridePill { background: none; border: 0; box-shadow: none; padding: 0; gap: calc(var(--iconW, 64px) * 0.12); border-radius: 0;
  bottom: max(18px, env(safe-area-inset-bottom)); height: var(--iconW, 64px); }
body.riding.bareScrub #rpTrack { height: var(--iconW, 64px); margin: 0 calc(var(--iconW, 64px) * 0.42); }
body.riding.bareScrub #rpLine { height: 7px; margin-top: -3.5px; border-radius: 4px; opacity: 1; background: linear-gradient(90deg, var(--green), var(--pink));
  filter: url(#spray) drop-shadow(0 0 6px rgba(48,240,8,0.55)) drop-shadow(2px 2px 0 #000); }
body.riding.bareScrub #rpHead { width: calc(var(--iconW, 64px) * 0.8); height: calc(var(--iconW, 64px) * 0.8); margin: calc(var(--iconW, 64px) * -0.4) 0 0 calc(var(--iconW, 64px) * -0.4);
  filter: drop-shadow(0 0 8px rgba(48,240,8,0.85)) drop-shadow(2px 2px 0 #000); }
body.riding.bareScrub #ridePill button#rpPlay { width: calc(var(--iconW, 64px) * 0.5); height: var(--iconW, 64px); font-size: calc(var(--iconW, 64px) * 0.4); color: var(--pink);
  text-shadow: 2px 2px 0 #000, 0 0 12px rgba(255,47,160,0.7); }

/* THE HERO SHOT (667): the bar and the tour's pill stay away; only the X is there — it cuts the shot short and lands you at the door */
body.hero #tbar { display: none !important; }
body.hero #tourX { display: block; }

/* ══ 668 (20 Oct 2026) ══ */
/* LOITER OUT THE FRONT: a small sprayed word in the bottom left corner, under ENTER THE SHOP */
#bLoiter { position: fixed; left: var(--gut); bottom: calc(var(--bot) - 2px); z-index: 4; align-self: flex-start; color: var(--paper); --tilt: -2deg; min-height: 0; padding: 4px 6px;
  font-family: var(--tag); font-size: clamp(15px, 2.6vh, 24px); text-shadow: var(--dark), 0 0 18px rgba(236,230,210,0.25); opacity: 0; pointer-events: none; }
#land.on #bLoiter { pointer-events: auto; }
#bLoiter.in { opacity: 1; }
#bLoiter:hover { color: var(--green); }
#land .bottom { bottom: calc(var(--bot) + clamp(30px, 5vh, 46px)); }
/* THE HOUSE round the head (the home button) */
#homeHouse { position: fixed; z-index: 8; pointer-events: none; opacity: 0; transition: opacity 0.5s ease; overflow: visible; filter: url(#spray) drop-shadow(0 0 5px rgba(48,240,8,0.8)) drop-shadow(2px 2px 0 #000); }
#homeHouse.on { opacity: 1; }
#homeHouse path { fill: none; stroke: var(--green); stroke-width: 6; stroke-linecap: round; stroke-linejoin: round; }
#homeHouse .roof { stroke-width: 7; }
#homeHouse .drip { stroke-width: 4; }
body.hub #landFace, body.hub #homeHouse { opacity: 0 !important; pointer-events: none; }
/* ORBIT ⇄ TOUR: one pill, the knob slides; the stops under it in TOUR */
#mpill { position: fixed; left: 50%; bottom: max(18px, env(safe-area-inset-bottom)); transform: translateX(-50%); z-index: 6; display: none; flex-direction: column; align-items: center; gap: 8px; }
#mpill.on { display: flex; }
#mpill .seg { position: relative; display: grid; grid-template-columns: 1fr 1fr; border: 3px solid var(--green); border-radius: 40px; padding: 4px; background: rgba(0,0,0,0.55);
  box-shadow: 0 0 16px rgba(48,240,8,0.45), 3px 3px 0 #000; transform: rotate(-1.2deg); filter: url(#spray); }
#mpill .knob { position: absolute; top: 4px; bottom: 4px; left: 4px; width: calc(50% - 4px); border-radius: 30px; background: var(--green); box-shadow: 0 0 14px rgba(48,240,8,0.8);
  transition: transform 0.38s cubic-bezier(0.5, 0, 0.2, 1.3), background 0.3s ease, box-shadow 0.3s ease; }
#mpill[data-m="tour"] .knob { transform: translateX(100%); background: var(--pink); box-shadow: 0 0 14px rgba(255,47,160,0.85); }
#mpill .seg button { position: relative; z-index: 1; font-family: var(--tag); font-size: clamp(22px, 5.4vw, 30px); padding: 6px 20px 8px; min-width: 6.2em; color: var(--paper); letter-spacing: 0.04em;
  text-shadow: 2px 2px 0 #000; transition: color 0.3s ease; }
#mpill[data-m="orbit"] .seg button[data-m="orbit"], #mpill[data-m="tour"] .seg button[data-m="tour"] { color: #050505; text-shadow: none; }
#mpill .stops { display: none; align-items: center; gap: 14px; transform: rotate(1deg); }
#mpill[data-m="tour"] .stops { display: flex; animation: rise 0.45s cubic-bezier(0.2, 0.7, 0.2, 1) both; }
#mpill .stops b { font-family: var(--tag); font-weight: normal; font-size: clamp(22px, 5vw, 32px); color: var(--pink); text-shadow: var(--dark), 0 0 20px rgba(255,47,160,0.5); min-width: 6.4em; text-align: center; filter: url(#spray); }
#mpill .stops button { font-family: var(--tag); font-size: clamp(34px, 8vw, 48px); line-height: 0.8; color: var(--green); text-shadow: var(--dark), 0 0 18px rgba(48,240,8,0.6); padding: 0 8px 6px; }
#mpill .stops button.dim { opacity: 0.25; pointer-events: none; }
#mpill .stops button:hover { transform: scale(1.15); }
body.hero #mpill { display: none !important; }
/* THE HOME PAGE INSIDE: the logo in the middle, the two ways in, the links — sprayed on the picture, a dark wash over the slow orbit */
#hub { position: fixed; inset: 0; z-index: 7; display: none; flex-direction: column; align-items: center; justify-content: center; gap: clamp(10px, 2.2vh, 22px);
  padding: max(24px, env(safe-area-inset-top)) var(--gut) max(18px, env(safe-area-inset-bottom)); background: radial-gradient(ellipse at 50% 45%, rgba(0,0,0,0.25), rgba(0,0,0,0.78)); }
#hub.on { display: flex; animation: hubIn 0.7s ease both; }
@keyframes hubIn { from { opacity: 0; } to { opacity: 1; } }
#hub .logo { display: flex; flex-direction: column; align-items: center; gap: 4px; }
#hub .logo .face { width: clamp(120px, 26vh, 240px); animation: breathe 3.6s ease-in-out infinite; }
#hub .logo .name { display: flex; gap: 0.25em; height: clamp(40px, 9vh, 86px); filter: drop-shadow(0 0 10px rgba(48,240,8,0.6)) drop-shadow(3px 3px 0 #000); }
#hub .logo .name img { height: 100%; }
#hub .tagline { font-family: var(--tag); color: var(--paper); font-size: clamp(14px, 2.6vh, 24px); letter-spacing: 0.06em; text-shadow: var(--dark); transform: rotate(-1.5deg); filter: url(#spray); text-align: center; }
#hub .go { display: flex; gap: clamp(18px, 6vw, 70px); align-items: flex-end; }
#hub .go .sticker.big { font-size: clamp(30px, min(8vw, 6.4vh), 64px); line-height: 0.95; padding: 2px 10px; }
#hub .go .sticker span { display: flex; flex-direction: column; align-items: center; }
#hub .go .sticker i { display: block; font-style: normal; white-space: nowrap; }
#hubLinks { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; max-width: min(760px, 94vw); }
#hubLinks .hl { font-family: var(--tag); font-size: clamp(17px, 3vh, 27px); text-decoration: none; letter-spacing: 0.03em; transform: rotate(var(--tilt, -2deg)); display: inline-block;
  text-shadow: var(--dark); filter: url(#spray); padding: 2px 4px; }
#hubLinks .hl.g { color: var(--green); } #hubLinks .hl.p { color: var(--pink); }
#hubLinks .hl:hover { color: var(--paper); transform: rotate(0deg) scale(1.1); }
#hubAddr { font-family: var(--marker); color: var(--paper); opacity: 0.85; font-size: clamp(12px, 1.9vh, 16px); letter-spacing: 0.08em; text-shadow: var(--dark); text-align: center; }

/* 668 round 2 (his diagram): the green roof; ONE nav strip ‹ ▶/❚❚ › with the stop's name (or EXPLORE) over it; CONTACT bottom right on the landing;
   the home page pops up over the picture (no camera move) with an X */
#hub .logo .name { gap: clamp(10px, 1.8vh, 18px); }
#bLoiter { font-size: clamp(17px, 2.9vh, 27px); }
#bContact { position: fixed; right: var(--gut); bottom: calc(var(--bot) - 2px); z-index: 4; color: var(--paper); --tilt: 2deg; min-height: 0; padding: 4px 6px;
  font-family: var(--tag); font-size: clamp(17px, 2.9vh, 27px); text-shadow: var(--dark), 0 0 18px rgba(236,230,210,0.25); opacity: 0; pointer-events: none; }
#land.on #bContact { pointer-events: auto; }
#bContact.in { opacity: 1; } #bContact:hover { color: var(--pink); }
#mpill .seg, #mpill .stops { display: none !important; }
#mpill { gap: 4px; }
#mpill #stName { font-family: var(--tag); font-weight: normal; font-size: clamp(22px, 5vw, 32px); color: var(--pink); text-shadow: var(--dark), 0 0 20px rgba(255,47,160,0.5); transform: rotate(-1.5deg); filter: url(#spray); }
#mpill[data-m="orbit"] #stName { color: var(--green); text-shadow: var(--dark), 0 0 20px rgba(48,240,8,0.5); }
#mpill .nav { display: flex; align-items: center; gap: clamp(14px, 5vw, 34px); }
#mpill .nav #stPrev, #mpill .nav #stNext { font-family: var(--tag); font-size: clamp(46px, 11vw, 64px); line-height: 0.8; color: var(--green); text-shadow: var(--dark), 0 0 18px rgba(48,240,8,0.6); padding: 0 10px 8px; }
#mpill .nav button.dim { opacity: 0.25; pointer-events: none; }
#mpill .nav #stPrev:hover, #mpill .nav #stNext:hover { transform: scale(1.15); }
#playBtn { width: clamp(58px, 15vw, 74px); height: clamp(58px, 15vw, 74px); border-radius: 50%; border: 3px solid var(--pink); background: rgba(0,0,0,0.5);
  box-shadow: 0 0 16px rgba(255,47,160,0.55), 3px 3px 0 #000; display: grid; place-items: center; filter: url(#spray); }
#playBtn svg { width: 56%; height: 56%; overflow: visible; }
#playBtn path { fill: none; stroke: var(--pink); stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; }
#playBtn .pl { fill: var(--pink); fill-opacity: 0.25; }
#mpill[data-m="orbit"] #playBtn { border-color: var(--green); box-shadow: 0 0 16px rgba(48,240,8,0.55), 3px 3px 0 #000; }
#mpill[data-m="orbit"] #playBtn path { stroke: var(--green); } #mpill[data-m="orbit"] #playBtn .pl { fill: var(--green); }
#playBtn:active { transform: scale(0.94); }
#hub { background: rgba(0,0,0,0.62); }
#hubX { position: absolute; top: max(16px, env(safe-area-inset-top)); right: var(--gut); font-family: var(--tag); font-size: clamp(30px, 6vw, 44px); color: var(--pink);
  text-shadow: var(--dark), 0 0 18px rgba(255,47,160,0.5); transform: rotate(4deg); filter: url(#spray); padding: 4px 10px; }
#hubX:hover { color: var(--paper); }
body.hub #landSign, body.hub #land .bottom, body.hub #bLoiter, body.hub #bContact { opacity: 0 !important; pointer-events: none !important; }

/* (20 Oct) the barrel roll back, bottom left, in the tour and in explore */
body.rollOn #rollCtl { display: flex; }
body.hub #rollCtl, body.hero #rollCtl { display: none !important; }

/* ══ 668, 20 Oct evening (his Word document) ══ */
/* the landing's four corners: HOME and LOITER OUT THE FRONT at the top, ENTER THE SHOP and TAKE A TOUR at the bottom — the same blocks */
#land .bottom { bottom: calc(var(--bot) + clamp(14px, 2.6vh, 30px)); }
#bLoiter { position: static; left: auto; bottom: auto; opacity: 0; font-family: var(--tag); color: var(--pink); --tilt: -2.5deg; text-shadow: var(--dark), 0 0 26px rgba(255,47,160,0.4); }   /* (the corners alternate green / pink, like a checkerboard) */
#bLoiter.in { opacity: 1; }
.ways.top2 { position: fixed; left: 0; right: 0; top: max(14px, env(safe-area-inset-top)); display: flex; justify-content: space-between; align-items: flex-start; padding: 0 clamp(18px, 4.5vw, 44px); }
#land.on .ways.top2 .sticker { pointer-events: auto; }
#bHome span { align-items: center !important; } #bHome img { display: block; height: var(--homeImg, 70px); width: auto; animation: breathe 3.6s ease-in-out infinite; }
#bHome i { color: var(--green); }
#bLoiter span { align-items: flex-end; } #bLoiter i { text-align: right; }
/* the head top left is the home button: HOME sprayed under it */
#homeWord { position: fixed; z-index: 8; pointer-events: none; opacity: 0; transition: opacity 0.5s ease; font-family: var(--tag); color: var(--green); letter-spacing: 0.04em;
  text-shadow: var(--dark), 0 0 14px rgba(48,240,8,0.6); transform: translate(-50%, 0) rotate(-3deg); filter: url(#spray); white-space: nowrap; }
#homeWord.on { opacity: 1; }
body.hub #homeWord { opacity: 0 !important; }
/* the stop's name (or EXPLORE) at the top of the picture */
#mpill #stName { position: fixed; left: 50%; top: max(18px, env(safe-area-inset-top)); transform: translateX(-50%) rotate(-1.5deg); font-size: clamp(28px, 6vw, 46px); white-space: nowrap; }
#stName { display: none; position: fixed; z-index: 6; left: 50%; top: max(18px, env(safe-area-inset-top)); transform: translateX(-50%) rotate(-1.5deg); white-space: nowrap;
  font-family: var(--tag); font-weight: normal; font-size: clamp(28px, 6vw, 46px); color: var(--pink); text-shadow: var(--dark), 0 0 20px rgba(255,47,160,0.5); filter: url(#spray); pointer-events: none; }
#stName.on { display: block; }
#stName.explore { color: var(--green); text-shadow: var(--dark), 0 0 20px rgba(48,240,8,0.5); }
body.hub #stName, body.hero #stName { display: none !important; }
#bHome span { gap: calc(var(--homeImg, 70px) * 0.1); } #bHome img { margin: 0 auto; } #bHome i { display: block; margin-top: 0.06em; }

/* (20 Oct evening) the 2D stop names are gone (the 3D titles say it); EXPLORE ⇄ TOUR bottom right; ▶ / ❚❚ only the drift */
#stName { display: none !important; }
#modeBtn { position: fixed; right: var(--gut); bottom: max(16px, env(safe-area-inset-bottom)); z-index: 6; display: none; --tilt: 2.5deg; padding: 2px 6px; min-height: 0; }
#modeBtn.on { display: inline-flex; }
#modeBtn span { display: flex; flex-direction: column; align-items: flex-end; }
#modeBtn i { display: block; font-style: normal; white-space: nowrap; line-height: 0.92; text-align: right; }
#modeBtn i:first-child { font-size: clamp(16px, 3.4vw, 24px); }
#modeBtn i:last-child { font-size: clamp(26px, 6vw, 42px); }
#modeBtn.toTour { color: var(--pink); text-shadow: var(--dark), 0 0 26px rgba(255,47,160,0.4); }
#mpill #playBtn .pl, #mpill #playBtn .pa { display: inline; }
#mpill[data-play="1"] #playBtn .pl, #mpill[data-play="0"] #playBtn .pa { display: none; }
body.hub #modeBtn, body.hero #modeBtn { display: none !important; }

/* (20 Oct night) HOME under the head is part of the home button; the speaker out the front while loitering */
#homeWord.on { pointer-events: auto; cursor: pointer; padding: 4px 10px 8px; }
body.hub #homeWord { pointer-events: none !important; }
body.loitering #sound { display: flex; }

/* (20 Oct night) the hours under the address on the home page */
#hubHours { font-family: var(--marker); color: var(--green); opacity: 0.9; font-size: clamp(12px, 1.9vh, 16px); letter-spacing: 0.08em; text-shadow: var(--dark); text-align: center; line-height: 1.5; margin-top: 2px; }
/* (20 Oct night) the speaker sits where the home page's X is: away while the page is up */
body.hub #sound { display: none !important; }

/* (20 Oct night) THE FRAME-UP on the carousel: TAKE A TOUR, the roll and the speaker go; the X bottom right gets you out */
body.carousel #modeBtn, body.carousel #rollCtl, body.carousel #sound { display: none !important; }
body.carousel #tourX { display: block; }

/* (20 Oct night) THE HOME PAGE, LAID OUT WIDE (his: "way too squeezed and cramped … take a tour and explore the shop either side of the Trash Cult logo … more
   square or rectangular … social media platform logos … in the typical trash cult fashion … both desktop and mobile"): a desktop gets TAKE A TOUR | the logo |
   EXPLORE THE SHOP in one row, the icons in a row under, the address beside the hours; a phone stacks the logo over the two buttons, the icons wrap */
#hub { gap: clamp(8px, 2vh, 18px); padding-top: max(18px, env(safe-area-inset-top)); }
#hub .hubGrid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; justify-items: center; gap: clamp(14px, 3vw, 48px); width: min(100%, 1180px); }
#hub .hubGrid #hubTour { justify-self: end; } #hub .hubGrid #hubExplore { justify-self: start; }
#hub .hubGrid .sticker.big { font-size: clamp(30px, min(5.4vw, 7vh), 68px); line-height: 0.95; padding: 2px 10px; }
#hub .hubGrid .sticker span { display: flex; flex-direction: column; align-items: center; }
#hub .hubGrid .sticker i { display: block; font-style: normal; white-space: nowrap; }
#hub .logo { gap: 2px; }
#hub .logo .face { width: clamp(110px, 22vh, 210px); }
#hub .logo .name { height: clamp(36px, 8vh, 78px); }
#hub .logo .tagline { margin-top: 4px; font-size: clamp(13px, 2.2vh, 21px); }
/* THE ICONS: hand-drawn strokes in the two paints, sprayed and glowing, a word under each; they alternate green / pink and lean a little */
#hubLinks { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: clamp(6px, 1.6vh, 14px) clamp(6px, 2.2vw, 26px); max-width: min(100%, 1180px); margin-top: clamp(2px, 1vh, 10px); }
#hubLinks .hl { display: flex; flex-direction: column; align-items: center; gap: 0; text-decoration: none; width: clamp(62px, 9vw, 100px); transform: rotate(var(--tilt, -2deg)); padding: 2px 0;
  font-family: var(--tag); font-size: clamp(12px, 1.9vh, 18px); letter-spacing: 0.03em; text-shadow: var(--dark); filter: url(#spray); }
#hubLinks .hl svg { width: clamp(42px, 6.6vh, 64px); height: clamp(42px, 6.6vh, 64px); overflow: visible; }
#hubLinks .hl svg path, #hubLinks .hl svg circle, #hubLinks .hl svg ellipse, #hubLinks .hl svg line { fill: none; stroke: currentColor; stroke-width: 3.4; stroke-linecap: round; stroke-linejoin: round; }
#hubLinks .hl svg .fill { fill: currentColor; fill-opacity: 0.28; }
#hubLinks .hl svg .dot { fill: currentColor; stroke: none; }
#hubLinks .hl.g svg { filter: drop-shadow(0 0 5px rgba(48,240,8,0.8)) drop-shadow(2px 2px 0 #000); }
#hubLinks .hl.p svg { filter: drop-shadow(0 0 5px rgba(255,47,160,0.8)) drop-shadow(2px 2px 0 #000); }
#hubLinks .hl b { font-weight: normal; white-space: nowrap; }
#hubLinks .hl:hover { color: var(--paper); transform: rotate(0deg) scale(1.12); }
#hub .hubFoot { display: flex; gap: clamp(18px, 5vw, 70px); align-items: flex-start; justify-content: center; flex-wrap: wrap; margin-top: clamp(2px, 1vh, 8px); }
#hubAddr { font-size: clamp(12px, 2vh, 17px); line-height: 1.5; }
#hubHours { margin-top: 0; }
/* A PHONE (portrait, or a narrow window): the logo on top, the two buttons under it side by side, the icons in rows of four or five */
@media (max-width: 760px), (orientation: portrait) {
  #hub .hubGrid { grid-template-columns: 1fr 1fr; gap: 6px clamp(10px, 4vw, 30px); }
  #hub .hubGrid .logo { grid-column: 1 / 3; grid-row: 1; }
  #hub .hubGrid #hubTour { grid-column: 1; grid-row: 2; justify-self: end; } #hub .hubGrid #hubExplore { grid-column: 2; grid-row: 2; justify-self: start; }
  #hub .hubGrid .sticker.big { font-size: clamp(26px, min(9vw, 5.6vh), 52px); }
  #hub .logo .face { width: clamp(96px, 20vh, 170px); }
  #hubLinks .hl { width: clamp(56px, 16vw, 80px); font-size: clamp(11px, 1.7vh, 15px); }      /* (five to a row on a 375 phone) */
  #hubLinks .hl svg { width: clamp(36px, 5.6vh, 52px); height: clamp(36px, 5.6vh, 52px); }
  #hub .hubFoot { flex-direction: column; align-items: center; gap: 4px; }
}

/* (20 Oct night, round 2) THE HOME PAGE: the logo bigger, the buttons smaller, the words (address · hours · website · email · contact) on the left and the
   six icons on the right; a phone stacks them */
#hub { gap: clamp(8px, 2.4vh, 26px); }
#hub .hubGrid { gap: clamp(12px, 2.4vw, 40px); }
#hub .hubGrid .sticker.big { font-size: clamp(24px, min(3.6vw, 5vh), 46px); }
#hub .logo .face { width: clamp(130px, 30vh, 300px); }
#hub .logo .name { height: clamp(44px, 10.5vh, 104px); }
#hub .logo .tagline { font-size: clamp(13px, 2.4vh, 23px); }
#hub .hubBody { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(16px, 4vw, 70px); width: min(100%, 1100px); }
#hub .hubWords { justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: clamp(6px, 1.4vh, 14px); text-align: right; }
#hubAddr { font-size: clamp(13px, 2.3vh, 20px); letter-spacing: 0.08em; }
#hubHours { font-size: clamp(12px, 2vh, 17px); line-height: 1.45; }
#hubText { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
#hubText a { font-family: var(--tag); color: var(--pink); text-decoration: none; font-size: clamp(14px, 2.4vh, 22px); letter-spacing: 0.03em; text-shadow: var(--dark); filter: url(#spray); transform: rotate(var(--tilt, -1.5deg)); display: inline-block; }
#hubText a:nth-child(2n) { color: var(--green); }
#hubText a:hover { color: var(--paper); transform: rotate(0deg) scale(1.06); }
#hubText small { display: block; font-family: var(--marker); font-size: 0.6em; color: var(--paper); opacity: 0.8; letter-spacing: 0.08em; }
#hubLinks { justify-self: start; display: grid; grid-template-columns: repeat(3, auto); gap: clamp(6px, 1.6vh, 16px) clamp(10px, 2vw, 30px); margin: 0; max-width: none; }
#hubLinks .hl { width: clamp(70px, 8vw, 110px); font-size: clamp(12px, 2vh, 19px); }
#hubLinks .hl svg { width: clamp(48px, 8vh, 78px); height: clamp(48px, 8vh, 78px); }
#hub .hubFoot { display: none; }
@media (max-width: 760px), (orientation: portrait) {
  #hub .hubGrid .sticker.big { font-size: clamp(22px, min(7.4vw, 4.6vh), 40px); }
  #hub .logo .face { width: clamp(110px, 24vh, 220px); }
  #hub .hubBody { grid-template-columns: 1fr; justify-items: center; gap: clamp(10px, 2vh, 18px); }
  #hub .hubWords { justify-self: center; align-items: center; text-align: center; }
  #hubText { align-items: center; }
  #hubLinks { justify-self: center; grid-template-columns: repeat(3, auto); }
  #hubLinks .hl { width: clamp(64px, 20vw, 90px); }
  #hubLinks .hl svg { width: clamp(40px, 6.2vh, 60px); height: clamp(40px, 6.2vh, 60px); }
}

/* ── THE INSTRUCTIONS AS AN 80s HORROR TITLE SEQUENCE (20 Oct night) — green, slimy, flickering, one step at a time over a dark wash; it takes every press
   while it is up (the camera waits); a tap = the next step, the last tap or TAP TO SKIP ends it. show.js guideStyle 'sprayed' = the old lines ── */
#horror { position: fixed; inset: 0; z-index: 8; display: none; align-items: center; justify-content: center; pointer-events: none; opacity: 0; transition: opacity 0.6s ease;
  background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.88) 70%, #000 100%); overflow: hidden; }
#horror.on { display: flex; pointer-events: auto; opacity: 1; animation: hFlicker 7s steps(1) infinite; }
#horror.on.gone { opacity: 0; pointer-events: none; }
#horror::before { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: 0.22;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0) 0 2px, rgba(0,0,0,0.5) 2px 3px); }     /* the scan lines of a tape */
#horror::after { content: ''; position: absolute; inset: -10%; pointer-events: none; opacity: 0.35; mix-blend-mode: screen;
  background: radial-gradient(circle at 30% 20%, rgba(48,240,8,0.16), transparent 40%), radial-gradient(circle at 75% 80%, rgba(48,240,8,0.12), transparent 45%); animation: hDrift 9s ease-in-out infinite alternate; }
@keyframes hDrift { from { transform: translate(-2%, -1%); } to { transform: translate(2%, 1.5%); } }
@keyframes hFlicker { 0%, 93%, 95%, 97%, 100% { filter: brightness(1); } 94% { filter: brightness(0.75); } 96% { filter: brightness(1.18); } 98% { filter: brightness(0.85); } }
#horror .hStage { position: relative; width: min(92vw, 820px); height: min(70vh, 560px); display: grid; place-items: center; }
#horror .hstep { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(6px, 1.6vh, 16px); opacity: 0; pointer-events: none; }
#horror .hstep.in { animation: hStepIn 0.9s cubic-bezier(0.2, 0.9, 0.2, 1) both; }
#horror .hstep.out { animation: hMelt 0.6s ease-in both; }
@keyframes hStepIn { 0% { opacity: 0; transform: scale(2.4); filter: blur(14px) brightness(2); } 55% { opacity: 1; transform: scale(0.96); filter: blur(0) brightness(1.3); } 70% { transform: scale(1.03); } 100% { opacity: 1; transform: scale(1); filter: blur(0) brightness(1); } }
@keyframes hMelt { 0% { opacity: 1; transform: translateY(0) scaleY(1); filter: blur(0); } 100% { opacity: 0; transform: translateY(60px) scaleY(1.6); filter: blur(8px); } }
#horror .pic { width: clamp(96px, 17vh, 170px); height: clamp(96px, 17vh, 170px); margin-bottom: clamp(6px, 1.6vh, 16px); overflow: visible; filter: drop-shadow(0 0 8px rgba(48,240,8,0.9)) drop-shadow(0 0 22px rgba(48,240,8,0.45)); }
#horror .pic path, #horror .pic circle, #horror .pic line, #horror .pic rect, #horror .pic polyline { fill: none; stroke: var(--green); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
#horror .pic .dot { fill: var(--green); stroke: none; }
#horror .pic .fill { fill: var(--green); fill-opacity: 0.3; }
#horror .pic image { filter: drop-shadow(0 0 10px rgba(48,240,8,0.8)); }
#horror .word { position: relative; font-family: var(--tag); color: var(--green); font-size: clamp(46px, min(12vw, 14vh), 132px); line-height: 0.9; letter-spacing: 0.02em; text-align: center; white-space: nowrap;
  text-shadow: 0 0 10px rgba(48,240,8,0.9), 0 0 30px rgba(48,240,8,0.55), 4px 4px 0 #000, 0 0 2px #000; filter: url(#slime); transform: rotate(-1.5deg); }
#horror .word .drop { position: absolute; top: 88%; width: clamp(7px, 1vw, 12px); height: 0; border-radius: 0 0 50% 50%; background: var(--green); box-shadow: 0 0 10px rgba(48,240,8,0.8); animation: hDrip 2.2s ease-in both; }
#horror .word .drop:nth-child(1) { left: 18%; animation-delay: 0.55s; } #horror .word .drop:nth-child(2) { left: 46%; animation-delay: 0.9s; width: clamp(5px, 0.7vw, 9px); } #horror .word .drop:nth-child(3) { left: 76%; animation-delay: 0.7s; }
@keyframes hDrip { 0% { height: 0; opacity: 0; } 15% { opacity: 1; } 100% { height: clamp(26px, 7vh, 70px); opacity: 0.95; } }
#horror .to { font-family: var(--tag); color: var(--green); opacity: 0.85; font-size: clamp(22px, min(5.2vw, 5.6vh), 48px); letter-spacing: 0.04em; text-align: center; text-shadow: 3px 3px 0 #000, 0 0 14px rgba(48,240,8,0.5); filter: url(#spray); transform: rotate(1deg); margin-top: clamp(8px, 2vh, 20px); }
#horror .hCount { position: absolute; top: max(18px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); font-family: var(--marker); color: var(--green); opacity: 0.7; font-size: clamp(13px, 2.2vh, 19px); letter-spacing: 0.3em; text-shadow: 2px 2px 0 #000; }
#horror .hSkip { position: absolute; bottom: max(22px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%); font-family: var(--tag); color: var(--green); font-size: clamp(16px, 2.8vh, 24px); letter-spacing: 0.1em; text-shadow: 2px 2px 0 #000, 0 0 12px rgba(48,240,8,0.6); animation: hPulse 1.6s ease-in-out infinite; }
@keyframes hPulse { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { #horror.on, #horror::after, #horror .hSkip { animation: none; } }

/* (20 Oct night) a phone's home page must fit without a scroll: everything a notch tighter, and it scrolls from the top if it still cannot */
@media (max-width: 760px), (orientation: portrait) {
  #hub { gap: clamp(6px, 1.4vh, 14px); overflow-y: auto; justify-content: safe center; }
  #hub .logo .face { width: clamp(90px, 18vh, 180px); }
  #hub .logo .name { height: clamp(34px, 7.6vh, 76px); }
  #hub .logo .tagline { font-size: clamp(12px, 1.9vh, 18px); }
  #hub .hubGrid { gap: 4px clamp(10px, 4vw, 30px); }
  #hub .hubBody { gap: clamp(8px, 1.4vh, 14px); }
  #hub .hubWords { gap: clamp(4px, 1vh, 10px); }
  #hubAddr { font-size: clamp(12px, 2vh, 17px); line-height: 1.3; }
  #hubHours { font-size: clamp(11px, 1.75vh, 15px); line-height: 1.3; }
  #hubText a { font-size: clamp(13px, 2.1vh, 19px); }
  #hubLinks { gap: clamp(4px, 1vh, 10px) clamp(8px, 3vw, 24px); }
  #hubLinks .hl { width: clamp(60px, 17vw, 84px); font-size: clamp(11px, 1.6vh, 14px); }
  #hubLinks .hl svg { width: clamp(36px, 5.2vh, 54px); height: clamp(36px, 5.2vh, 54px); }
}

/* (20 Oct night, round 3) THE TOUR STRIP (his: "make the next and previous arrows a bit bigger so they're the same size as the circle? And give the circle a
   bit of a trash look"): ‹ › as tall as the circle; the circle is a DRAWN ring — a wobbly stroke with two drips — in the paint, sprayed, no clean border */
#mpill .nav { gap: clamp(10px, 3.6vw, 26px); }
#mpill .nav #stPrev, #mpill .nav #stNext { font-size: clamp(76px, 19.5vw, 98px); line-height: 0.7; padding: 0 8px 10px; filter: url(#spray); transform: rotate(-3deg); }
#mpill .nav #stNext { transform: rotate(3deg); }
#mpill .nav #stPrev:hover, #mpill .nav #stNext:hover { transform: scale(1.12); }
#playBtn { position: relative; border: none; background: rgba(0,0,0,0.42); box-shadow: 3px 3px 0 #000; overflow: visible; width: clamp(60px, 15.5vw, 78px); height: clamp(60px, 15.5vw, 78px); }
#playBtn svg.ring { position: absolute; inset: -9%; width: 118%; height: 118%; overflow: visible; }
#playBtn svg.ring path { fill: none; stroke: var(--pink); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
#playBtn svg.ring .drip { stroke-width: 3; }
#playBtn svg.ring .dot { fill: var(--pink); }
#playBtn svg.ring { filter: drop-shadow(0 0 6px rgba(255,47,160,0.85)) drop-shadow(0 0 16px rgba(255,47,160,0.4)); }
#mpill[data-m="orbit"] #playBtn { border: none; box-shadow: 3px 3px 0 #000; }
#mpill[data-m="orbit"] #playBtn svg.ring path { stroke: var(--green); } #mpill[data-m="orbit"] #playBtn svg.ring .dot { fill: var(--green); }
#mpill[data-m="orbit"] #playBtn svg.ring { filter: drop-shadow(0 0 6px rgba(48,240,8,0.85)) drop-shadow(0 0 16px rgba(48,240,8,0.4)); }
#playBtn svg:not(.ring) { position: relative; width: 54%; height: 54%; }

/* THE HOME PAGE, CUT DOWN (his: "I made a mess of it … keep the ones that most people would … redesign it"): the logo big in the middle with the two ways in
   either side, FIVE icons in one row under it — tickets, instagram, facebook, email, find us — then one line of address · hours and the website. YouTube,
   Bandcamp and the contact page are kept in show.js with hide: true for the day he wants them back */
#hub { gap: clamp(10px, 2.6vh, 28px); }
#hub .hubGrid .sticker.big { font-size: clamp(26px, min(4vw, 5.4vh), 50px); }
#hubLinks { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(6px, 1.4vh, 14px) clamp(14px, 3vw, 46px); max-width: min(100%, 1100px); margin: 0; justify-self: center; }
#hubLinks .hl { width: clamp(72px, 9vw, 118px); font-size: clamp(13px, 2.2vh, 20px); }
#hubLinks .hl svg { width: clamp(50px, 8.6vh, 84px); height: clamp(50px, 8.6vh, 84px); }
#hub .hubFoot { display: flex; flex-direction: column; align-items: center; gap: clamp(2px, 0.8vh, 8px); margin-top: clamp(2px, 1vh, 10px); }
#hubAddr { font-size: clamp(13px, 2.3vh, 20px); letter-spacing: 0.1em; line-height: 1.4; }
#hubHours { font-size: clamp(12px, 2vh, 17px); letter-spacing: 0.08em; line-height: 1.4; color: var(--green); opacity: 0.95; }
#hubHours br { display: none; } #hubHours span:not(:first-child)::before { content: '  ·  '; opacity: 0.6; white-space: pre; }      /* (a <br> sits between the spans: + would never match) */
#hubText { align-items: center; margin-top: clamp(2px, 0.8vh, 8px); }
#hubText a { font-size: clamp(15px, 2.6vh, 24px); }
@media (max-width: 760px), (orientation: portrait) {
  #hub { gap: clamp(8px, 1.8vh, 18px); }
  #hub .hubGrid .sticker.big { font-size: clamp(22px, min(7.4vw, 4.6vh), 40px); }
  #hub .logo .face { width: clamp(100px, 21vh, 200px); }
  #hub .logo .name { height: clamp(36px, 8.4vh, 84px); }
  #hubLinks { gap: clamp(6px, 1.2vh, 12px) clamp(8px, 4vw, 22px); }
  #hubLinks .hl { width: clamp(62px, 18vw, 86px); font-size: clamp(11px, 1.7vh, 15px); }
  #hubLinks .hl svg { width: clamp(42px, 6.4vh, 60px); height: clamp(42px, 6.4vh, 60px); }
  #hubHours br { display: block; } #hubHours span:not(:first-child)::before { content: none; }
  #hubAddr { font-size: clamp(12px, 2vh, 17px); }
  #hubHours { line-height: 1.3; }
}

/* (20 Oct night, round 4) THE LANDING HAS NO HOME TOP LEFT (his: "we don't need the home icon … at the landing page. It only needs to pop up once we hit either
   enter the shop, loiter, or take a tour") — the head flies to the corner then, at that HOME's size + 5 %. LOITER keeps ENTER / TAKE A TOUR on screen */
#bHome { display: none !important; }
body.loitering #bEnter, body.loitering #bGigs { pointer-events: auto; }
body.hub #bEnter, body.hub #bGigs { opacity: 0 !important; pointer-events: none !important; }
#homeWord { line-height: 0.95; transform: translateX(-50%) rotate(-2deg); white-space: nowrap; }
#homeWord.on { padding: 0 6px 4px; }

/* THE CORNERS ARE ONE SIZE AND SQUARE (his: "check all the other icons and the bottom right-hand shop button and make them nice and square … each icon looks like
   it's a different size"): the speaker, the roll and the X are --iconW square, their art filling the same share of it; the mode button is a square of --sq whose
   three lines are set to its width (trash.js fitSquare); every corner sits the same distance in from its two edges */
:root { --edge: max(16px, env(safe-area-inset-left)); --sq: clamp(96px, calc(var(--iconW, 64px) * 1.55), 150px); }
#sound, #rollBtn, #tourX { width: var(--iconW, 64px) !important; height: var(--iconW, 64px) !important; padding: calc(var(--iconW, 64px) * 0.08) !important; box-sizing: border-box; }
#sound { right: var(--edge) !important; top: var(--edge) !important; }
#rollCtl { left: var(--edge) !important; bottom: var(--edge) !important; }
#tourX { right: var(--edge) !important; bottom: var(--edge) !important; }
#modeBtn { right: var(--edge) !important; bottom: var(--edge) !important; width: var(--sq); height: var(--sq); padding: 4px !important; box-sizing: border-box; }
#modeBtn span { width: 100%; height: 100%; justify-content: center; align-items: center !important; }
#modeBtn i { text-align: center !important; line-height: 0.9 !important; }
#modeBtn i:first-child, #modeBtn i:last-child { font-size: inherit; }

/* THE TOUR STRIP, ONE HEIGHT (his: "they're still a bit small, and it's going off the edge of the screen … give that pause play button another makeover and
   try and make it and the arrows the same size top to bottom"): ‹ ▶ › are three squares of --strip, drawn chevrons and a rough double ring; its middle is level
   with the corners' middles. Where it would meet the corners (a phone) it stands on top of the mode button's row */
:root { --strip: clamp(64px, calc(var(--iconW, 64px) * 1.1), 104px); }
#mpill { bottom: calc(var(--edge) + (var(--sq) - var(--strip)) / 2) !important; }
#mpill .nav { gap: clamp(6px, 1.4vw, 16px); align-items: center; }
#mpill .nav #stPrev, #mpill .nav #stNext { width: calc(var(--strip) * 0.8); height: var(--strip); padding: 0; font-size: 0; line-height: 0; transform: none; filter: none; display: grid; place-items: center; }
#mpill .nav #stPrev svg, #mpill .nav #stNext svg { width: 100%; height: 100%; overflow: visible; filter: url(#spray) drop-shadow(0 0 6px rgba(48,240,8,0.85)) drop-shadow(0 0 14px rgba(48,240,8,0.4)) drop-shadow(3px 3px 0 #000); }
#mpill .nav #stPrev path, #mpill .nav #stNext path { fill: none; stroke: var(--green); stroke-width: 6.2; stroke-linecap: round; stroke-linejoin: round; }
#mpill .nav #stPrev .drip, #mpill .nav #stNext .drip { stroke-width: 3.6; }
#mpill .nav #stPrev:hover, #mpill .nav #stNext:hover { transform: scale(1.1); }
#mpill .nav #stPrev:active, #mpill .nav #stNext:active { transform: scale(0.92); }
#playBtn { width: var(--strip) !important; height: var(--strip) !important; background: radial-gradient(circle, rgba(0,0,0,0.72) 55%, rgba(0,0,0,0.35) 72%, transparent 74%) !important; box-shadow: none !important; }
#playBtn svg.ring { inset: 0 !important; width: 100% !important; height: 100% !important; filter: url(#spray) drop-shadow(0 0 6px rgba(255,47,160,0.9)) drop-shadow(0 0 16px rgba(255,47,160,0.4)) drop-shadow(3px 3px 0 #000) !important; }
#playBtn svg.ring path { stroke-width: 4.4; }
#playBtn svg.ring .two { stroke-width: 2.2; opacity: 0.75; }
#playBtn svg:not(.ring) { width: 46% !important; height: 46% !important; filter: url(#spray); }
#playBtn path.pa { stroke-width: 7; }
#mpill[data-m="orbit"] #playBtn svg.ring { filter: url(#spray) drop-shadow(0 0 6px rgba(48,240,8,0.9)) drop-shadow(0 0 16px rgba(48,240,8,0.4)) drop-shadow(3px 3px 0 #000) !important; }
@media (max-width: 620px) {
  #mpill { bottom: calc(var(--edge) + var(--sq) + 14px) !important; }
}
.ways.top2 #bLoiter { margin-left: auto; }      /* (HOME gone from the row: LOITER keeps the top right) */
#rollCtl { bottom: calc(var(--edge) + (var(--sq) - var(--iconW, 64px)) / 2) !important; }      /* (the roll's middle level with the strip's and the mode button's) */

/* (20 Oct night, round 5) a little air in the strip; the roll icon 10 % bigger; the head in the corner with the dark shadow the rest has */
#mpill .nav { gap: clamp(14px, 2.6vw, 30px) !important; }
#rollBtn { width: calc(var(--iconW, 64px) * 1.1) !important; height: calc(var(--iconW, 64px) * 1.1) !important; }
#rollCtl { bottom: calc(var(--edge) + (var(--sq) - var(--iconW, 64px) * 1.1) / 2) !important; }
#landFace.asHome { filter: drop-shadow(0 0 5px rgba(48,240,8,0.7)) drop-shadow(3px 3px 0 #000) drop-shadow(0 0 10px rgba(0,0,0,0.85)) drop-shadow(0 0 24px rgba(0,0,0,0.5)) !important; }
/* THE TIPS STAND BESIDE THE ICON, to its right (his: "under my finger") */
#rollTip, #drinkTip { left: calc(100% + 10px) !important; bottom: calc(var(--iconW, 64px) * 0.25) !important; }
#rollTip { pointer-events: none; cursor: pointer; } #rollTip.on { pointer-events: auto; animation: rollTipWobble 1.1s ease-in-out infinite, tipPulse 1.1s ease-in-out infinite !important; }
@keyframes tipPulse { 0%, 100% { filter: drop-shadow(0 0 0 rgba(255,47,160,0)); } 50% { filter: drop-shadow(0 0 14px rgba(255,47,160,0.9)); } }
#rollTip b { font-size: clamp(24px, 2.9vw, 38px) !important; } #rollTip i { font-size: clamp(22px, 2.6vw, 34px) !important; }
#drinkTip { position: absolute; display: grid; grid-template-columns: auto auto; align-items: baseline; column-gap: 6px; white-space: nowrap; pointer-events: none;
  opacity: 0; transform: rotate(-7deg) translate(-8px, 8px) scale(0.85); transform-origin: left bottom; transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.9, 0.2, 1.3); }
#drinkTip.on { opacity: 1; transform: rotate(-7deg) translate(0, 0) scale(1); animation: rollTipWobble 1.6s ease-in-out 0.5s infinite; }
#drinkTip .squig { grid-row: 1 / 3; width: clamp(34px, 4vw, 48px); height: auto; color: var(--green); align-self: end; margin-bottom: -0.2em; filter: drop-shadow(2px 2px 0 #000); }
#drinkTip b { font-family: var(--tag); font-weight: normal; font-size: clamp(24px, 2.9vw, 38px); color: var(--green); line-height: 0.95; text-shadow: var(--dark), 0 0 16px rgba(48,240,8,0.55); filter: url(#spray); }
#drinkTip i { grid-column: 2; font-style: normal; font-family: var(--tag); font-size: clamp(30px, 3.6vw, 48px); color: var(--pink); line-height: 1; text-shadow: var(--dark), 0 0 16px rgba(255,47,160,0.55); filter: url(#spray); }
#drinkTip em { grid-column: 2; font-style: normal; font-family: var(--marker); font-size: clamp(12px, 1.2vw, 15px); color: var(--paper); letter-spacing: 0.04em; text-shadow: var(--dark); }
@media (prefers-reduced-motion: reduce) { #drinkTip.on, #rollTip.on { animation: none !important; } }
/* TAKE A CIGARETTE, bottom right of the home page */
#hubCig { position: absolute; right: var(--edge, 16px); bottom: var(--edge, 16px); display: flex; flex-direction: column; align-items: center; gap: 2px; color: var(--green); transform: rotate(-3deg); }
#hubCig svg { width: clamp(64px, 8vh, 96px); height: auto; overflow: visible; filter: url(#spray) drop-shadow(0 0 6px rgba(48,240,8,0.8)) drop-shadow(3px 3px 0 #000); }
#hubCig svg path { fill: none; stroke: var(--green); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
#hubCig svg .butt { fill: var(--green); fill-opacity: 0.3; }
#hubCig svg .ember { fill: var(--pink); stroke: var(--pink); }
#hubCig svg .smoke { stroke: var(--paper); stroke-width: 2.4; opacity: 0.8; animation: smokeUp 2.8s ease-in-out infinite; }
#hubCig svg .smoke.two { animation-delay: 1.3s; opacity: 0.55; }
@keyframes smokeUp { 0% { transform: translateY(4px); opacity: 0; } 30% { opacity: 0.85; } 100% { transform: translateY(-8px); opacity: 0; } }
#hubCig span { display: flex; flex-direction: column; align-items: center; }
#hubCig i { font-style: normal; font-family: var(--tag); line-height: 0.9; text-shadow: var(--dark), 0 0 14px rgba(48,240,8,0.5); filter: url(#spray); white-space: nowrap; }
#hubCig i:first-child { font-size: clamp(14px, 2.2vh, 20px); color: var(--paper); }
#hubCig i:last-child { font-size: clamp(18px, 3vh, 28px); color: var(--green); }
#hubCig:hover { transform: rotate(0deg) scale(1.08); }
@media (max-width: 760px), (orientation: portrait) {
  #hubCig svg { width: clamp(48px, 6vh, 70px); }
  #hubCig i:last-child { font-size: clamp(15px, 2.4vh, 22px); }
}
#hubCig svg { width: clamp(80px, 11vh, 124px); } #hubCig i:first-child { font-size: clamp(16px, 2.6vh, 24px); } #hubCig i:last-child { font-size: clamp(22px, 3.8vh, 36px); }

/* (20 Oct night, round 2) THE INSTRUCTIONS, CALMER: no wash, no scan lines, no flicker, no slime warp, no drips, no pictures — the words fade in and out,
   smaller, the line under the big word clear of it; the picture works underneath (only TAP TO SKIP takes a press) */
#horror { background: none !important; pointer-events: none !important; }
#horror.on { animation: none !important; pointer-events: none !important; }
#horror::before, #horror::after { display: none !important; }
#horror .hSkip { pointer-events: auto; cursor: pointer; padding: 8px 14px; }
#horror .hstep { gap: clamp(10px, 1.8vh, 18px); }
#horror .hstep.in { animation: hFadeIn 0.7s ease both !important; }
#horror .hstep.out { animation: hFadeOut 0.6s ease both !important; }
@keyframes hFadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes hFadeOut { from { opacity: 1; } to { opacity: 0; } }
#horror .word { font-size: clamp(32px, min(7.2vw, 8.4vh), 84px) !important; line-height: 1.05 !important; filter: url(#spray) !important;
  text-shadow: 0 0 10px rgba(48,240,8,0.7), 4px 4px 0 #000, 0 0 3px #000, 0 0 18px rgba(0,0,0,0.9) !important; }
#horror .to { font-size: clamp(16px, min(3.6vw, 3.8vh), 32px) !important; line-height: 1.15 !important; margin-top: 0 !important; color: var(--paper) !important; opacity: 1 !important;
  text-shadow: 3px 3px 0 #000, 0 0 3px #000, 0 0 14px rgba(0,0,0,0.95) !important; }
#horror .hCount { text-shadow: 2px 2px 0 #000, 0 0 10px rgba(0,0,0,0.9); }

/* (20 Oct night, round 3) HALFWAY BETWEEN, AND POINTING: the slime back on the word (gentler), two short drips that stop above the line under it, a small
   picture for the gestures, a soft fade with a little settle; a step about a THING stands beside it with a sprayed arrow and a pulsing ring round it */
#horror .hstep { gap: clamp(8px, 1.6vh, 16px); }
#horror .hstep.in { animation: hSettle 0.8s cubic-bezier(0.2, 0.8, 0.2, 1) both !important; }
@keyframes hSettle { from { opacity: 0; transform: scale(1.08); } to { opacity: 1; transform: scale(1); } }
#horror .hstep.pinned { position: fixed; inset: auto; width: max-content; max-width: min(78vw, 560px); transform: translate(-50%, -50%); }
#horror .hstep.pinned.in { animation: hFadeIn 0.6s ease both !important; }
#horror .pic { width: clamp(64px, 11vh, 110px) !important; height: clamp(64px, 11vh, 110px) !important; margin-bottom: 0 !important; }
#horror .word { filter: url(#slime) !important; padding-bottom: clamp(10px, 1.6vh, 18px); }
#horror .word .drop { top: 78% !important; height: 0; animation: hDrip2 1.6s ease-in both !important; }
#horror .word .drop:nth-child(1) { left: 22%; animation-delay: 0.5s !important; } #horror .word .drop:nth-child(2) { left: 70%; animation-delay: 0.8s !important; }
@keyframes hDrip2 { 0% { height: 0; opacity: 0; } 20% { opacity: 1; } 100% { height: clamp(10px, 1.8vh, 18px); opacity: 0.9; } }
#horror .hArrow { position: fixed; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; filter: url(#spray) drop-shadow(0 0 6px rgba(48,240,8,0.8)) drop-shadow(3px 3px 0 #000); opacity: 0; transition: opacity 0.5s ease; }
#horror .hArrow.in { opacity: 1; }
#horror .hArrow path, #horror .hArrow ellipse { fill: none; stroke: var(--green); stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; }
#horror .hArrow .shaft { stroke-dasharray: 1400; stroke-dashoffset: 1400; animation: hDraw 0.7s ease-out 0.15s forwards; }
#horror .hArrow .head { opacity: 0; animation: hFadeIn 0.2s ease 0.75s forwards; }
#horror .hArrow .ring { stroke: var(--pink); stroke-width: 4; transform-box: fill-box; transform-origin: center; animation: hRing 1.2s ease-in-out infinite; }
@keyframes hDraw { to { stroke-dashoffset: 0; } }
@keyframes hRing { 0%, 100% { transform: scale(1); opacity: 0.95; } 50% { transform: scale(1.12); opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) { #horror .hArrow .ring, #horror .hArrow .shaft { animation: none; stroke-dashoffset: 0; } }
/* TAP TO SKIP under the count at the top (at the bottom it sat on the tour's strip) */
#horror .hSkip { top: calc(max(18px, env(safe-area-inset-top)) + clamp(20px, 3vh, 30px)) !important; bottom: auto !important; font-size: clamp(14px, 2.2vh, 20px) !important; }

/* (20 Oct night, round 4, his picture: "a little bit more like the picture … ditch the white and put some glow to it"): a light wash with a soft vignette (lighter
   than the first one), the line under the word GREEN and glowing, the word's glow fuller */
#horror.on { background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.22) 0%, rgba(0,0,0,0.45) 70%, rgba(0,0,0,0.6) 100%) !important; }
#horror .word { text-shadow: 0 0 12px rgba(48,240,8,0.95), 0 0 34px rgba(48,240,8,0.6), 4px 4px 0 #000 !important; }
#horror .to { color: var(--green) !important; text-shadow: 0 0 10px rgba(48,240,8,0.75), 0 0 22px rgba(48,240,8,0.35), 3px 3px 0 #000 !important; filter: url(#spray); }
#horror .hCount, #horror .hSkip { color: var(--green); text-shadow: 0 0 8px rgba(48,240,8,0.6), 2px 2px 0 #000 !important; }
#horror.on { background: radial-gradient(ellipse at 50% 50%, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.6) 70%, rgba(0,0,0,0.75) 100%) !important; }   /* (his picture: darker than the first try) */
#horror .word { font-size: clamp(36px, min(8.4vw, 9.6vh), 100px) !important; }
#horror .pic { width: clamp(72px, 12.5vh, 124px) !important; height: clamp(72px, 12.5vh, 124px) !important; }
#horror .hCount { display: none !important; }      /* (his: no progress meter at the top) */
#horror .hSkip { top: max(18px, env(safe-area-inset-top)) !important; }
#horror .hSkip { display: none !important; }      /* (his, 20 Oct night: "Remove tap to skip") */
#horror.on { background: none !important; }      /* (20 Oct night, his: "there's a little bit of a jump at the start … the darkening. So we might just ditch the darkening") */

/* (20 Oct night, his: "a little bit of a navigation user interface rearrange. Not the wiring, just the look of it"): THE SPEAKER bottom left, THE BEER bottom right
   (its pop-ups now to its LEFT, the arrow flipped to point at it), EXPLORE THE SHOP top right with its bottom level with HOME's, more room round ▶ / ❚❚.
   Out the front (loitering) the speaker stays top right — ENTER THE SHOP has the bottom left there */
#sound { top: auto !important; bottom: calc(var(--edge) + (var(--iconW, 64px) * 1.1 - var(--iconW, 64px)) / 2) !important; left: var(--edge) !important; right: auto !important; }
body.loitering #sound { top: var(--edge) !important; bottom: auto !important; right: var(--edge) !important; left: auto !important; }
#rollCtl { left: auto !important; right: var(--edge) !important; bottom: var(--edge) !important; align-items: flex-end; }
#rollTip, #drinkTip, #dragTip { left: auto !important; right: calc(100% + 10px) !important; bottom: calc(var(--iconW, 64px) * 0.25) !important; transform-origin: right bottom !important; }
#rollTip .squig, #drinkTip .squig, #dragTip .squig { grid-column: 2 !important; grid-row: 1 / 4 !important; transform: scaleX(-1); }
#rollTip b, #rollTip i, #rollTip em, #drinkTip b, #drinkTip i, #drinkTip em, #dragTip b, #dragTip i, #dragTip em { grid-column: 1 !important; text-align: right; justify-self: end; }
#rollTip b, #drinkTip b, #dragTip b { grid-row: 1; } #rollTip i, #drinkTip i, #dragTip i { grid-row: 2; } #rollTip em, #drinkTip em, #dragTip em { grid-row: 3; }
#modeBtn { bottom: auto !important; top: max(var(--edge), calc(var(--homeBottom, 160px) - var(--sq))) !important; right: var(--edge) !important; }
#mpill { bottom: calc(var(--edge) + (var(--iconW, 64px) * 1.1 - var(--strip)) / 2) !important; }
#mpill .nav { gap: clamp(22px, 4.2vw, 50px) !important; }
/* a phone too narrow for the speaker, the strip and the beer on one line: the strip sits just above them */
@media (max-width: 440px) { #mpill { bottom: calc(var(--edge) + var(--iconW, 64px) * 1.1 + 12px) !important; } }
#rollTip, #drinkTip, #dragTip { bottom: calc(var(--iconW, 64px) * 1.15) !important; }      /* (beside the beer, just above the arrow row: clear of the strip, and of a thumb sliding up the beer) */
@media (max-width: 440px) { #rollTip, #drinkTip, #dragTip { bottom: calc(var(--iconW, 64px) * 1.1 + 12px + var(--strip) + 10px) !important; } }      /* (a phone: the strip is a row up, so the beer's pop-ups sit above it, still left of the beer) */

/* (20 Oct, late, his phone: "the navigation pills jump up above the other buttons when it's too narrow … get rid of the play pause in the middle … nudge those arrows
   together and move them down so it's all on the same line"): ‹ › only, closer, their middle level with the speaker's and the beer's on every width */
#mpill .nav { gap: calc(var(--strip, 64px) * 0.3) !important; }
@media (max-width: 440px) {
  #mpill { bottom: calc(var(--edge) + (var(--iconW, 64px) * 1.1 - var(--strip)) / 2) !important; }
  #rollTip, #drinkTip, #dragTip { bottom: calc(var(--iconW, 64px) * 1.1 + 18px) !important; }
}

/* (20 Oct, late, his: "the drink icon is actually the pill … move the slider over so it's dead centre with the drink where it is now … those pop-ups … above the
   drink, not over to the side"): the track stands centred on the beer, from its middle up --rollTravel; the beer rides it (trash.js paintRoll: translateY by the
   level); the track shows while pressed and while the beer is up. The pop-ups stand ABOVE the beer, right-aligned with it, their arrow pointing down at its middle,
   and ride up with it (--rollLift) */
#rollCtl { --rollTravel: clamp(110px, 19vh, 170px); }
#rollGauge { position: absolute !important; left: 50% !important; bottom: 50% !important; height: var(--rollTravel) !important; width: 7px !important; margin-left: -3.5px; z-index: -1; }
#rollCtl.up #rollGauge { opacity: 0.85; transform: scaleY(1); }
#rollBtn { transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
#rollCtl.open #rollBtn { transition: none; }
#rollTip, #drinkTip, #dragTip { left: auto !important; right: 0 !important; bottom: calc(100% + 8px + var(--rollLift, 0px)) !important; transform-origin: right bottom !important;
  grid-template-columns: auto !important; justify-items: end; }
#rollTip b, #rollTip i, #rollTip em, #drinkTip b, #drinkTip i, #drinkTip em, #dragTip b, #dragTip i, #dragTip em { grid-column: 1 !important; }
#rollTip .squig, #drinkTip .squig, #dragTip .squig { grid-column: 1 !important; grid-row: 4 !important; transform: none !important; width: 26px !important; height: 34px !important;
  margin: 2px calc(var(--iconW, 64px) * 0.55 - 13px) 0 0 !important; align-self: auto !important; }

/* (20 Oct, late, his: "tap to move (same size type - make it the size tap is at the moment)"): the second line is the word's size and type; the drips stay on the
   first; a computer's small bracket line (.pc) under it */
#horror .to { font-size: clamp(36px, min(8.4vw, 9.6vh), 100px) !important; line-height: 1.05 !important; letter-spacing: 0.02em !important; white-space: nowrap; margin-top: calc(clamp(10px, 1.6vh, 18px) * -0.6) !important; }
#horror .pc { font-family: var(--marker); font-size: clamp(14px, min(3vw, 3vh), 24px); color: var(--paper); letter-spacing: 0.06em; text-align: center; text-shadow: 2px 2px 0 #000, 0 0 10px rgba(0,0,0,0.8); }

/* (20 Oct, late, his: "make these same size and even spacing. and change prev/next to a vhs player rewind and fast forward icon"): the speaker, ◀◀, ▶▶ and the beer
   are one size (--barS, the beer's) and stand with three equal gaps between them along the bottom; their middles level */
:root { --barS: calc(var(--iconW, 64px) * 1.1); }
#sound { width: var(--barS) !important; height: var(--barS) !important; padding: calc(var(--iconW, 64px) * 0.1) !important; bottom: var(--edge) !important; }
#mpill { bottom: var(--edge) !important; }
#mpill .nav { gap: calc((100vw - 2 * var(--edge) - 4 * var(--barS)) / 3) !important; }
#mpill .nav #stPrev, #mpill .nav #stNext { width: var(--barS) !important; height: var(--barS) !important; padding: calc(var(--iconW, 64px) * 0.1) !important; box-sizing: border-box; }
#mpill .nav #stPrev path, #mpill .nav #stNext path { stroke-width: 3.6 !important; fill: var(--green); fill-opacity: 0.35; }
#mpill .nav #stPrev svg, #mpill .nav #stNext svg { filter: drop-shadow(0 0 4px rgba(48,240,8,0.85)) drop-shadow(0 0 12px rgba(48,240,8,0.45)) drop-shadow(2px 2px 0 #000) !important; }
/* (his: "take a tour needs to be same size as icon/text in left corner"): the HOME corner's box (trash.js placeFace: --homeTop, --homeW, --homeLeft, --homeBottom),
   mirrored on the right */
#modeBtn { top: var(--homeTop, 16px) !important; right: var(--homeLeft, 16px) !important; bottom: auto !important; width: var(--homeW, 96px) !important;
  height: calc(var(--homeBottom, 150px) - var(--homeTop, 16px)) !important; padding: 0 !important; }
/* THE HOME PAGE WITHOUT ITS TWO BUTTONS (his: "the X gets the user there and it will declutter and allow for a better re-layout"): the logo alone at the top and
   bigger, the icons in one row, the words under them; on a phone the cigarette comes after the words instead of over them */
#hub .hubGrid { display: flex !important; justify-content: center; width: auto !important; }
#hub .logo .face { width: clamp(140px, 32vh, 320px) !important; }
#hub .logo .name { height: clamp(44px, 10vh, 100px) !important; }
@media (max-width: 700px) {
  #hub .logo .face { width: clamp(120px, 27vh, 230px) !important; }
  #hub .logo .name { height: clamp(40px, 8.6vh, 84px) !important; }
  #hubLinks { flex-wrap: nowrap !important; gap: clamp(4px, 1.4vw, 10px) !important; }
  #hubLinks .hl { width: 17vw !important; }
  #hubCig { position: static !important; margin-top: clamp(4px, 1.2vh, 12px); }
}

/* (20 Oct, late, his: "change loiter out the front to only say loiter. and put it centre top") */
.ways.top2 { justify-content: center !important; }
.ways.top2 #bLoiter { margin: 0 auto !important; }
#bLoiter span { align-items: center !important; } #bLoiter i { text-align: center !important; }
@media (max-width: 700px) { #hubLinks .hl b { font-size: clamp(9px, 2.5vw, 12px) !important; } }      /* (the five labels clear of each other on a phone) */

/* (21 Oct, his list) 1. ◀◀ ▶▶ a bit closer: three quarters of the even gap, and never more than 0.8 of a button */
#mpill .nav { gap: min(calc((100vw - 2 * var(--edge) - 4 * var(--barS)) / 3 * 0.75), calc(var(--barS) * 0.8)) !important; }
/* THE HOME PAGE: 2. the X twice the size and green · 3. the scan under it can be moved (the page lets presses through, its links and buttons keep them) ·
   5. the web address in the bottom left corner · 9. HAVE A SMOKE top left */
#hubX { font-size: clamp(60px, 12vw, 88px) !important; color: var(--green) !important; text-shadow: 0 0 12px rgba(48,240,8,0.9), 0 0 30px rgba(48,240,8,0.45), 4px 4px 0 #000 !important; line-height: 0.9; }
#hubX:hover { color: var(--paper) !important; }
#hub { pointer-events: none; } #hub a, #hub button { pointer-events: auto; }
#hubText { position: absolute !important; left: var(--edge, 16px); bottom: max(14px, env(safe-area-inset-bottom)); align-items: flex-start !important; margin: 0 !important; }
#hubCig { position: absolute !important; left: var(--edge, 16px) !important; top: max(14px, env(safe-area-inset-top)) !important; right: auto !important; bottom: auto !important; margin: 0 !important; }
@media (max-width: 700px) { #hub { padding-top: clamp(96px, 15vh, 130px) !important; padding-bottom: 48px; } }
/* THE LANDING: 4. the loading screen ends in ENTER (its words and line fade, ENTER comes up where the words were) · HAVE A SMOKE top right (LOITER is gone) */
#loadWords { position: relative; }
#loadWords > span { transition: opacity 0.6s ease; }
#loader .line { transition: opacity 0.6s ease; }
#loader.ready #loadWords > span, #loader.ready .line { opacity: 0; }
#bStart { position: absolute !important; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(-2deg); opacity: 0; pointer-events: none; transition: opacity 0.6s ease 0.3s;
  font-size: clamp(54px, 13vw, 110px) !important; filter: none; }
#loader.ready #bStart { opacity: 1; pointer-events: auto; }
#bStart:hover { color: var(--paper); }
#bStart i { font-style: normal; }
#bSmoke { position: fixed; top: max(14px, env(safe-area-inset-top)); right: var(--edge, 16px); z-index: 4; display: flex; flex-direction: column; align-items: center; gap: 2px;
  background: none; border: 0; padding: 0; color: var(--green); transform: rotate(-3deg); opacity: 0; transition: opacity 0.6s ease; pointer-events: none; cursor: pointer; }
#bSmoke.in { opacity: 1; } #land.on #bSmoke.in { pointer-events: auto; }
body.hub #bSmoke, body.loitering #bSmoke { opacity: 0 !important; pointer-events: none !important; }
#bSmoke svg { width: clamp(64px, 9vh, 104px); height: auto; overflow: visible; filter: url(#spray) drop-shadow(0 0 6px rgba(48,240,8,0.8)) drop-shadow(3px 3px 0 #000); }
#bSmoke svg path { fill: none; stroke: var(--green); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
#bSmoke svg .butt { fill: var(--green); fill-opacity: 0.3; } #bSmoke svg .ember { fill: var(--pink); stroke: var(--pink); }
#bSmoke svg .smoke { stroke: var(--paper); stroke-width: 2.4; opacity: 0.8; animation: smokeUp 2.8s ease-in-out infinite; } #bSmoke svg .smoke.two { animation-delay: 1.3s; opacity: 0.55; }
#bSmoke span { display: flex; flex-direction: column; align-items: center; }
#bSmoke i { font-style: normal; font-family: var(--tag); line-height: 0.9; text-shadow: var(--dark), 0 0 14px rgba(48,240,8,0.5); filter: url(#spray); white-space: nowrap; }
#bSmoke i:first-child { font-size: clamp(16px, 2.6vh, 24px); color: var(--paper); } #bSmoke i:last-child { font-size: clamp(22px, 3.8vh, 36px); color: var(--green); }
#bSmoke:hover { transform: rotate(0deg) scale(1.08); }
/* (21 Oct, his: "a hand … pops up … like there's an invisible object"): the loading screen's ENTER kept its own pointer-events after the loader faded (a child's
   pointer-events: auto beats its parent's none) — invisible, it took the pointer and every press in the middle of the lower half. Gone with the loader now */
#loader.gone #bStart, #loader.gone #bStart * { pointer-events: none !important; visibility: hidden !important; }
#mpill, #mpill .nav { pointer-events: none !important; } #mpill button { pointer-events: auto !important; }      /* (the gap between ◀◀ and ▶▶ lets the scan have the press) */

/* (21 Oct) CHECK OUT THE BAR & STAGE: over ◀◀ ▶▶, the drink pop-up's look, its arrow pointing down at them */
#stopTip { position: absolute; left: 50%; bottom: calc(100% + 10px); display: flex; flex-direction: column; align-items: center; white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translateX(-50%) rotate(-4deg) translateY(10px) scale(0.85); transform-origin: center bottom; transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
#stopTip.on { opacity: 1; transform: translateX(-50%) rotate(-4deg) translateY(0) scale(1); animation: rollTipWobble 1.6s ease-in-out 0.5s infinite; }
#stopTip b { font-family: var(--tag); font-weight: normal; font-size: clamp(22px, 2.6vw, 34px); color: var(--green); line-height: 0.95; text-shadow: var(--dark), 0 0 16px rgba(48,240,8,0.55); filter: url(#spray); }
#stopTip i { font-style: normal; font-family: var(--tag); font-size: clamp(26px, 3.2vw, 44px); color: var(--pink); line-height: 1; text-shadow: var(--dark), 0 0 16px rgba(255,47,160,0.55); filter: url(#spray); }
#stopTip .squig { width: 26px; height: 34px; margin-top: 2px; color: var(--green); filter: drop-shadow(2px 2px 0 #000); }
body.hub #stopTip, body.carousel #stopTip { opacity: 0 !important; }
@media (prefers-reduced-motion: reduce) { #stopTip.on { animation: none; } }

/* (21 Oct, his: "give the home page some sort of animation on and off? Just sort of snaps at the moment"): IN — the dark comes up, the logo drops in with a
   bounce, the five icons pop up one after another, the words rise under them, the X spins in, HAVE A SMOKE slides in from the left. OUT (#hub.off, the
   page's last 0.46 s — trash.js HUB_OUT) — the lot fades while the logo lifts, the icons drop and the X spins away. The moves are the separate translate /
   scale / rotate properties, so each piece's own tilt (its transform) is kept */
#hub.on { animation: hubIn 0.45s ease both; }
#hub.on .logo { animation: hubLogoIn 0.75s cubic-bezier(0.2, 1.35, 0.35, 1) both; }
#hub.on .tagline { animation: hubRise 0.5s ease 0.3s both; }
#hub.on #hubLinks .hl { animation: hubPop 0.5s cubic-bezier(0.2, 1.5, 0.4, 1) calc(0.22s + var(--i, 0) * 0.07s) both; }
#hub.on #hubAddr, #hub.on #hubHours { animation: hubRise 0.5s ease 0.5s both; }      /* (not .hubFoot: a moving box becomes the anchor of the web address inside it, which then sat on the hours) */
#hub.on #hubText { animation: hubRise 0.5s ease 0.6s both; }
#hub.on #hubX { animation: hubXIn 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) 0.15s both; }
#hub.on #hubCig { animation: hubSlideIn 0.55s cubic-bezier(0.2, 1.2, 0.4, 1) 0.25s both; }
@keyframes hubIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes hubLogoIn { from { opacity: 0; translate: 0 -40px; scale: 0.8; rotate: -5deg; } 55% { opacity: 1; } to { opacity: 1; translate: 0 0; scale: 1; rotate: 0deg; } }
@keyframes hubRise { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }
@keyframes hubPop { from { opacity: 0; translate: 0 24px; scale: 0.4; } to { opacity: 1; translate: 0 0; scale: 1; } }
@keyframes hubXIn { from { opacity: 0; rotate: -200deg; scale: 0.3; } to { opacity: 1; rotate: 0deg; scale: 1; } }
@keyframes hubSlideIn { from { opacity: 0; translate: -60px 0; } to { opacity: 1; translate: 0 0; } }
#hub.on.off { animation: hubOut 0.46s ease-in both; }
#hub.on.off .logo { animation: hubLogoOut 0.46s ease-in both; }
#hub.on.off #hubLinks .hl { animation: hubDrop 0.4s ease-in calc(var(--i, 0) * 0.025s) both; }
#hub.on.off #hubAddr, #hub.on.off #hubHours, #hub.on.off #hubText, #hub.on.off .tagline { animation: hubSink 0.4s ease-in both; }
#hub.on.off #hubX { animation: hubXOut 0.4s ease-in both; }
#hub.on.off #hubCig { animation: hubSlideOut 0.4s ease-in both; }
#hub.off a, #hub.off button { pointer-events: none !important; }      /* (nothing on the page going out takes a press) */
@keyframes hubOut { from { opacity: 1; } to { opacity: 0; } }
@keyframes hubLogoOut { from { translate: 0 0; scale: 1; } to { translate: 0 -30px; scale: 1.08; } }
@keyframes hubDrop { from { translate: 0 0; scale: 1; } to { translate: 0 30px; scale: 0.6; } }
@keyframes hubSink { from { translate: 0 0; } to { translate: 0 14px; } }
@keyframes hubXOut { from { rotate: 0deg; scale: 1; } to { rotate: 180deg; scale: 0.3; } }
@keyframes hubSlideOut { from { translate: 0 0; } to { translate: -50px 0; } }
/* THE WEB ADDRESS (21 Oct, his: "center the bottom line, which is the web address, and give it some sort of animation every 5 to 10 seconds. Change color
   or glow or something"): across the bottom, centred; every 7 s it flickers like a dodgy neon tube and flares green, then settles back to pink. The first
   flicker ~2.7 s after the page comes up (the negative delay) */
#hubText { left: 0 !important; right: 0 !important; align-items: center !important; text-align: center; }
#hubText a { animation: addrNeon 7s linear -3s infinite; }
#hubText a:hover { animation: none; }
@keyframes addrNeon {
  0%, 80%, 100% { color: var(--pink); text-shadow: var(--dark); scale: 1; }
  81.5% { color: var(--paper); text-shadow: var(--dark), 0 0 10px rgba(255,47,160,0.95), 0 0 26px rgba(255,47,160,0.6); }
  82.5% { color: var(--pink); text-shadow: var(--dark); }
  83.5% { color: var(--paper); text-shadow: var(--dark), 0 0 10px rgba(255,47,160,0.95), 0 0 26px rgba(255,47,160,0.6); }
  84.5% { color: var(--pink); text-shadow: var(--dark); }
  86%, 93% { color: var(--green); text-shadow: var(--dark), 0 0 12px rgba(48,240,8,0.95), 0 0 30px rgba(48,240,8,0.65); scale: 1.07; }
}
@media (prefers-reduced-motion: reduce) {
  #hub.on .logo, #hub.on .tagline, #hub.on #hubLinks .hl, #hub.on #hubAddr, #hub.on #hubHours, #hub.on #hubText, #hub.on #hubX, #hub.on #hubCig,
  #hub.on.off .logo, #hub.on.off #hubLinks .hl, #hub.on.off #hubAddr, #hub.on.off #hubHours, #hub.on.off #hubText, #hub.on.off .tagline, #hub.on.off #hubX, #hub.on.off #hubCig, #hubText a { animation: none; }
}
/* THE SPEAKER IS GREEN (21 Oct, his: "Make the speaker green"): muted it was paper-grey with a pink cross — the cross was all that showed over the records.
   Now the speaker and its cross are green with the glow either way; muted it is a touch dimmer */
#sound[aria-pressed="false"] { color: var(--green); opacity: 0.85; }
#sound[aria-pressed="false"] svg { filter: drop-shadow(0 0 4px rgba(48,240,8,0.85)) drop-shadow(0 0 12px rgba(48,240,8,0.45)) drop-shadow(2px 2px 0 #000); }
#sound .cross { stroke: var(--green); filter: none; }

/* THE TV (21 Oct): a tap on a TV's still plays its video here, over the shop — a dark scrim, the player in a 16:9 frame with a green edge and a hard
   black shadow, the X in the poster hand top right (the home page's X). It fades and lifts in */
#tvBox { position: fixed; inset: 0; z-index: 31; display: none; align-items: center; justify-content: center; }
#tvBox.on { display: flex; animation: tvIn 0.35s ease both; }
#tvScrim { position: absolute; inset: 0; background: rgba(2, 4, 2, 0.9); }
#tvFrame { position: relative; width: min(92vw, calc(80vh * 16 / 9)); aspect-ratio: 16 / 9; background: #000; border: 3px solid var(--green);
  box-shadow: 0 0 22px rgba(48, 240, 8, 0.45), 10px 10px 0 #000; animation: tvLift 0.4s cubic-bezier(0.2, 1.2, 0.4, 1) both; }
#tvFrame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
#tvX { position: absolute; top: max(14px, env(safe-area-inset-top)); right: var(--edge, 16px); background: none; border: 0; padding: 0 6px; cursor: pointer;
  font-family: var(--tag); font-size: clamp(54px, 10vw, 80px); line-height: 0.9; color: var(--green); transform: rotate(4deg); filter: url(#spray);
  text-shadow: 0 0 12px rgba(48,240,8,0.9), 0 0 30px rgba(48,240,8,0.45), 4px 4px 0 #000; -webkit-tap-highlight-color: transparent; }
#tvX:hover { color: var(--paper); }
@keyframes tvIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes tvLift { from { opacity: 0; translate: 0 26px; scale: 0.92; } to { opacity: 1; translate: 0 0; scale: 1; } }
/* (21 Oct, his: "change the bright green border to be a bit of a gradient from a dark green to the bright green"): the frame's edge runs dark green (top left)
   to the bright green (bottom right) — the border is see-through and a gradient behind it shows through, the black inside on top */
#tvFrame { border: 3px solid transparent !important; background: linear-gradient(#000, #000) padding-box, linear-gradient(135deg, #0a3d04 0%, #168a04 45%, #30f008 100%) border-box !important;
  box-shadow: 4px 4px 18px rgba(48, 240, 8, 0.35), -2px -2px 14px rgba(10, 61, 4, 0.5), 10px 10px 0 #000 !important; }
/* (21 Oct, his: "a tiny bit more space between the head and enter"): ENTER 16 px lower under the head */
#bStart { top: calc(50% + 40px); }      /* (then: "more space again … a little bit too intimate": 16 → 40) */
/* (21 Oct, his: START TOUR "the same size as the top left corner home icon and title like it was beforehand"): two lines in HOME's box, as wide as it,
   their bottom level with HOME's word (the 20 Oct rule), not floating in the middle of the box */
#modeBtn span { justify-content: flex-start !important; padding-top: 0; }      /* (then: "move up to corner": the top line up at the head's top) */

/* THE JOYSTICK (21 Oct, his: "a joystick in the center … the same visual style as the … spew cam icon … the speaker icon, and it's going to sit in between those
   two in the center … drag it up to move the camera forward and left and right to go left and right … Explore the Shop and … out the front loitering"):
   #joy, bottom middle, its middle level with the speaker's and the beer's: a green ring with the speaker's strokes and glow, four little chevrons, and a pink
   knob that follows the finger inside the ring and springs back */
#joy { position: fixed; left: 50%; bottom: calc(var(--edge, 16px) - var(--barS, 70px) * 0.125); width: calc(var(--barS, 70px) * 1.25); height: calc(var(--barS, 70px) * 1.25);
  transform: translateX(-50%); z-index: 6; display: none; touch-action: none; -webkit-tap-highlight-color: transparent; user-select: none; }
body.joyOn #joy { display: block; }
#joyBase { position: absolute; inset: 0; color: var(--green); cursor: grab; }
#joy.drag #joyBase { cursor: grabbing; }
#joyBase > svg { width: 100%; height: 100%; overflow: visible; pointer-events: none;
  filter: drop-shadow(0 0 4px rgba(48,240,8,0.85)) drop-shadow(0 0 12px rgba(48,240,8,0.45)) drop-shadow(2px 2px 0 #000); }
#joyBase .ring { fill: rgba(6, 17, 4, 0.38); stroke: currentColor; stroke-width: 4.6; }
#joyBase .chev { fill: none; stroke: currentColor; stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
#joyKnob { position: absolute; left: 50%; top: 50%; width: 44%; height: 44%; margin: -22% 0 0 -22%; pointer-events: none; will-change: transform;
  transition: transform 0.2s cubic-bezier(0.2, 1.4, 0.4, 1); }
#joy.drag #joyKnob { transition: none; }
#joyKnob svg { width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 0 6px rgba(255,47,160,0.9)) drop-shadow(2px 2px 0 #000); }
#joyKnob circle { fill: rgba(255, 47, 160, 0.45); stroke: #ff2fa0; stroke-width: 3.4; }
#joyKnob .grip { fill: none; stroke: #ff2fa0; stroke-width: 2.4; stroke-linecap: round; opacity: 0.9; }
/* PULL STICK = JOY: the drink / stops pop-ups' look, over the stick, its arrow pointing down at it */
#joyTip { position: absolute; left: 50%; bottom: calc(100% + 8px); display: flex; flex-direction: column; align-items: center; white-space: nowrap; pointer-events: none;
  opacity: 0; transform: translateX(-50%) rotate(-4deg) translateY(10px) scale(0.85); transform-origin: center bottom; transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }
#joyTip.on { opacity: 1; transform: translateX(-50%) rotate(-4deg) translateY(0) scale(1); animation: rollTipWobble 1.6s ease-in-out 0.5s infinite; }
#joyTip b { font-family: var(--tag); font-weight: normal; font-size: clamp(22px, 2.6vw, 34px); color: var(--green); line-height: 0.95; text-shadow: var(--dark), 0 0 16px rgba(48,240,8,0.55); filter: url(#spray); }
#joyTip i { font-style: normal; font-family: var(--tag); font-size: clamp(26px, 3.2vw, 44px); color: var(--pink); line-height: 1; text-shadow: var(--dark), 0 0 16px rgba(255,47,160,0.55); filter: url(#spray); }
#joyTip .squig { width: 26px; height: 34px; margin-top: 2px; color: var(--green); filter: drop-shadow(2px 2px 0 #000); }
@media (prefers-reduced-motion: reduce) { #joyTip.on { animation: none; } }

/* (21 Oct) THE PAPER IN THE BEER'S PLACE while tripping (trash.js paintTripCtl): the beer's size and corner; the paper is a 2-D pad — UP / DOWN the dose along its
   track (OUT at the bottom, MAX at the top), SIDEWAYS the roll along the rail that rides at its height from the right edge; fades away as the trip wears off */
#tripCtl { position: fixed; right: var(--edge); bottom: var(--edge); z-index: 6; width: var(--barS); height: var(--barS); display: none;
  --tripTravel: clamp(110px, 19vh, 170px); --tripRail: min(43.4vw, 210px);      /* 30 % shorter (21 Oct, his: "extending a bit too far … bring it in by 30%"; was min(62vw, 300px)) */ --tripLift: 0px; }
body.rollOn.tripping #tripCtl { display: block; }
body.rollOn.tripping #rollCtl { display: none !important; }
body.hub #tripCtl, body.hero #tripCtl, body.carousel #tripCtl { display: none !important; }
#tripTrack { position: absolute; left: 50%; bottom: 50%; width: 7px; margin-left: -3.5px; height: var(--tripTravel); border-radius: 4px;
  background: rgba(48,240,8,0.22); opacity: 0.85; pointer-events: none; }
#tripFill { position: absolute; left: 0; right: 0; bottom: 0; height: 0; border-radius: 4px; background: linear-gradient(0deg, var(--green), var(--pink)); opacity: 0.85; }
#tripMax, #tripOut { position: absolute; right: calc(50% + 12px); font-family: var(--tag); font-weight: normal; line-height: 1; white-space: nowrap; pointer-events: none;
  font-size: clamp(15px, 3.6vw, 20px); letter-spacing: 0.04em; transform: rotate(-6deg); text-shadow: var(--dark), 0 0 10px currentColor; }
#tripMax { bottom: calc(50% + var(--tripTravel) - 0.5em); right: calc(100% + 6px); color: var(--pink); }        /* (left of the paper at the top, as OUT is at the bottom: the paper at MAX covered it) */
#tripOut { bottom: calc(50% - 1em); right: calc(100% + 6px); color: var(--green); text-align: center; line-height: 0.95; }     /* (two lines: one line ran under the joystick on a phone) */
#tripRail { position: absolute; right: calc(-1 * var(--edge)); bottom: calc(50% + var(--tripLift) - 3.5px); width: var(--tripRail); height: 7px; border-radius: 4px;
  background: rgba(48,240,8,0.2); opacity: 0.45; pointer-events: none; transition: opacity 0.3s ease; }
#tripCtl.rolling #tripRail { opacity: 0.95; }
#tripRailFill { position: absolute; right: 0; top: 0; bottom: 0; width: 0; border-radius: 4px; background: linear-gradient(270deg, var(--green), var(--pink)); }
#tripBtn { position: absolute; left: 0; bottom: 0; width: var(--barS); height: var(--barS); border: 0; padding: 0; background: none; cursor: grab; touch-action: none;
  display: flex; align-items: center; justify-content: center; will-change: transform; }
#tripBtn img { height: 100%; width: auto; transform: rotate(-9deg); border-radius: 2px; pointer-events: none; user-select: none;
  filter: drop-shadow(0 0 4px rgba(48,240,8,0.85)) drop-shadow(0 0 12px rgba(48,240,8,0.4)) drop-shadow(2px 2px 0 #000); }
#tripBtn:active img { transform: rotate(-9deg) scale(0.94); }
/* (25 Oct) IT ARRIVES PSYCHEDELIC, his: "you can't really tell it's there … go all psychedelic at first when it comes on the screen, and make the acid tab glow a few
   times so that while they're on the trip they get prompted to use the slider": trash.js puts .intro on #tripCtl as it comes on (and takes it off at the first
   press). The paper pops in spinning through the colours (tripPsy, 2.4 s), then glows up three times (tripGlow); the words and the track go round the colours with it.
   Every keyframe keeps the same filter list (sepia saturate hue-rotate + three drop-shadows) so the browser can blend between them */
#tripCtl.intro #tripBtn img { animation: tripPsy 2.4s ease-in-out, tripGlow 1.3s ease-in-out 2.4s 3; }
#tripCtl.intro #tripMax, #tripCtl.intro #tripOut { animation: tripWords 2.4s ease-in-out, tripWordsGlow 1.3s ease-in-out 2.4s 3; }
#tripCtl.intro #tripTrack { animation: tripWords 2.4s ease-in-out, tripTrackGlow 1.3s ease-in-out 2.4s 3; }
@keyframes tripPsy {
  0%   { transform: rotate(-9deg) scale(0.2);  filter: sepia(1) saturate(9) hue-rotate(0deg)   drop-shadow(0 0 8px #ff2bd6)  drop-shadow(0 0 22px #30f008) drop-shadow(2px 2px 0 #000); }
  18%  { transform: rotate(16deg) scale(1.4);  filter: sepia(1) saturate(9) hue-rotate(140deg) drop-shadow(0 0 12px #ff2bd6) drop-shadow(0 0 30px #30f008) drop-shadow(2px 2px 0 #000); }
  36%  { transform: rotate(-26deg) scale(1.15); filter: sepia(1) saturate(9) hue-rotate(290deg) drop-shadow(0 0 12px #30f008) drop-shadow(0 0 30px #ff2bd6) drop-shadow(2px 2px 0 #000); }
  54%  { transform: rotate(12deg) scale(1.35); filter: sepia(1) saturate(9) hue-rotate(430deg) drop-shadow(0 0 12px #ff2bd6) drop-shadow(0 0 30px #30f008) drop-shadow(2px 2px 0 #000); }
  74%  { transform: rotate(-18deg) scale(1.12); filter: sepia(1) saturate(8) hue-rotate(580deg) drop-shadow(0 0 10px #30f008) drop-shadow(0 0 24px #ff2bd6) drop-shadow(2px 2px 0 #000); }
  100% { transform: rotate(-9deg) scale(1);    filter: sepia(0) saturate(1) hue-rotate(720deg) drop-shadow(0 0 4px rgba(48,240,8,0.85)) drop-shadow(0 0 12px rgba(48,240,8,0.4)) drop-shadow(2px 2px 0 #000); }
}
@keyframes tripGlow {
  0%, 100% { transform: rotate(-9deg) scale(1);    filter: drop-shadow(0 0 4px rgba(48,240,8,0.85)) drop-shadow(0 0 12px rgba(48,240,8,0.4)) drop-shadow(2px 2px 0 #000); }
  50%      { transform: rotate(-9deg) scale(1.16); filter: drop-shadow(0 0 9px #e6ffd8) drop-shadow(0 0 30px #30f008) drop-shadow(0 0 10px #ff2bd6); }
}
@keyframes tripWords { 0% { opacity: 0; filter: hue-rotate(0deg); } 15% { opacity: 1; } 100% { opacity: 1; filter: hue-rotate(720deg); } }
@keyframes tripWordsGlow { 0%, 100% { filter: brightness(1); } 50% { filter: brightness(1.6); } }
@keyframes tripTrackGlow { 0%, 100% { box-shadow: 0 0 0 rgba(48,240,8,0); opacity: 0.85; } 50% { box-shadow: 0 0 16px rgba(48,240,8,0.9), 0 0 6px rgba(255,43,214,0.8); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  #tripCtl.intro #tripBtn img { animation: tripGlow 1.3s ease-in-out 3; }
  #tripCtl.intro #tripMax, #tripCtl.intro #tripOut, #tripCtl.intro #tripTrack { animation: none; }
}

/* (21 Oct) LOITERING, his: "remove the speaker icon and move START TOUR to its position … put [ENTER THE SHOP] into 3D space … up against the front door … increase
   the size of the navigation joystick" — then: "don't worry about increasing the size of the joystick"): the speaker gone out the front, ENTER THE SHOP on the
   door (trash.js doorSign) so its corner button goes, START TOUR in the top right corner */
body.loitering #sound { display: none !important; }
body.loitering #bEnter { visibility: hidden !important; pointer-events: none !important; }
body.loitering #bGigs { display: none !important; }      /* (21 Oct, then: "make them the same": out the front START TOUR is #modeBtn, HOME's size, in its corner) */

/* (21 Oct) THE VIDEOS FADE IN AND OUT over the shop (his: "fading transitions when we come to and from the videos and back into the scan"); OUR FULL SCREEN (#tvFull:
   the same player fills the screen — an iPhone's own full screen paused it on the way out) */
#tvBox.on { animation: tvIn 0.6s ease both; }
#tvBox { transition: opacity 0.6s ease; }
#tvBox.closing { opacity: 0; pointer-events: none; }
#tvFull { position: absolute; bottom: max(18px, env(safe-area-inset-bottom)); right: var(--edge, 16px); width: 52px; height: 52px; padding: 10px; border: 0; background: none;
  cursor: pointer; color: var(--green); filter: drop-shadow(0 0 6px rgba(48,240,8,0.8)) drop-shadow(2px 2px 0 #000); z-index: 2; }
#tvFull svg { width: 100%; height: 100%; }
#tvFull path { fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
#tvFull:hover { color: var(--paper); }
#tvBox.full { background: #000; }
#tvBox.full #tvScrim { background: #000; }
#tvBox.full #tvFrame { width: 100vw !important; height: 100vh; height: 100dvh; aspect-ratio: auto !important; border: 0 !important; background: #000 !important; border-radius: 0 !important; }
/* (21 Oct, his: "is that symbol … actually the close full screen icon?"): two drawings, one shown at a time — corners OUT = open full screen, corners IN (only in
   full screen) = close it; the CSS `d: path()` swap it was is not in Safari, so an iPhone kept the open one in full screen */
#tvFull .fsClose, #tvBox.full #tvFull .fsOpen { display: none; }
#tvBox.full #tvFull .fsClose { display: inline; }

/* OUR OWN VIDEO CONTROLS (21 Oct, his: "as minimal as possible with the YouTube … our own play button … increase the size of that full screen button … the Trash
   Cult! visual fashion makeover"): #tvBar under the picture — play / pause, the seek line with the time, full screen (bigger); in full screen it lies over
   the bottom of the picture on a dark fade */
#tvBox { --tvW: min(92vw, calc((100vh - 200px) * 16 / 9)); }
#tvBox.on { flex-direction: column; gap: clamp(10px, 2vh, 18px); }
#tvBox:not(.full) #tvFrame { width: var(--tvW) !important; }
#tvBar { position: relative; z-index: 2; width: var(--tvW); display: flex; align-items: center; gap: clamp(10px, 2.6vw, 20px); }
#tvPlay { flex: none; width: 60px; height: 60px; padding: 0; border: 0; background: none; cursor: pointer; filter: drop-shadow(0 0 6px rgba(48,240,8,0.8)) drop-shadow(2px 2px 0 #000); }
#tvPlay svg { display: block; width: 100%; height: 100%; }
#tvPlay circle { fill: rgba(0, 0, 0, 0.4); stroke: var(--green); stroke-width: 3; }
#tvPlay path { fill: var(--pink); }
#tvPlay .pa, #tvPlay.playing .pl { display: none; }
#tvPlay.playing .pa { display: inline; }
#tvPlay:hover circle { stroke: var(--paper); }
#tvPlay:active { transform: scale(0.94); }
#tvSeek { position: relative; flex: 1; min-width: 0; height: 48px; cursor: pointer; touch-action: none; --u: 0; }
#tvSeekLine, #tvSeekFill { position: absolute; left: 0; top: 60%; height: 6px; margin-top: -3px; border-radius: 3px; }
#tvSeekLine { right: 0; background: rgba(240, 236, 220, 0.2); }
#tvSeekFill { width: calc(var(--u) * 100%); background: linear-gradient(90deg, var(--green), var(--pink)); box-shadow: 0 0 8px rgba(48, 240, 8, 0.6); }
#tvKnob { position: absolute; top: 60%; left: calc(var(--u) * 100%); width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--pink);
  box-shadow: 0 0 10px rgba(255, 47, 160, 0.9), 2px 2px 0 #000; transition: transform 0.15s ease; }
#tvSeek.held #tvKnob, #tvSeek:hover #tvKnob { transform: scale(1.35); }
#tvTime { position: absolute; right: 0; top: 0; font-family: var(--marker); font-size: clamp(11px, 2.9vw, 15px); line-height: 1; color: var(--paper); text-shadow: var(--dark);
  white-space: nowrap; pointer-events: none; }
#tvBar #tvFull { position: static !important; flex: none; width: 64px !important; height: 64px !important; padding: 6px !important;
  filter: drop-shadow(0 0 8px rgba(48, 240, 8, 0.9)) drop-shadow(2px 2px 0 #000) !important; }
#tvBar #tvFull path { stroke-width: 2.8; }
#tvBox.full #tvBar { position: absolute; left: 0; right: 0; bottom: 0; width: auto; padding: 28px var(--edge, 16px) max(14px, env(safe-area-inset-bottom));
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8)); }
#tvBar.idle #tvPlay, #tvBar.idle #tvSeek { opacity: 0.35; pointer-events: none; }      /* (before the video has started: YouTube's own red button starts it) */

/* A YOUTUBE GALLERY (21 Oct): the title (n / of) over the picture when the TV has a list, the title in the tag hand; in full screen it lies over the top of the
   picture on a dark fade, clear of the X. ITS ◀◀ ▶▶ (his, the same night: "underneath the timeline … like the next and previous buttons from the tour"): #tvNav
   under the line — the tour's own drawing, size (--barS, the beer's) and look (green strokes 3.6, a 35 % green fill, the green glow), the tour's gap */
#tvBox { --tvW: min(92vw, calc((100vh - 270px - var(--barS, 70px)) * 16 / 9)); }
#tvHead { display: none; position: relative; z-index: 2; width: var(--tvW); align-items: center; }
#tvBox.many #tvHead { display: flex; }
#tvNav { display: none; position: relative; z-index: 2; justify-content: center; gap: calc(var(--barS, 70px) * 0.8); margin-top: -4px; }
#tvBox.many #tvNav { display: flex; }
#tvPrev, #tvNext { flex: none; width: var(--barS, 70px); height: var(--barS, 70px); padding: calc(var(--iconW, 64px) * 0.1); box-sizing: border-box; border: 0; background: none;
  cursor: pointer; display: grid; place-items: center; }
#tvPrev svg, #tvNext svg { display: block; width: 100%; height: 100%; overflow: visible;
  filter: drop-shadow(0 0 4px rgba(48,240,8,0.85)) drop-shadow(0 0 12px rgba(48,240,8,0.45)) drop-shadow(2px 2px 0 #000); }
#tvPrev path, #tvNext path { fill: var(--green); fill-opacity: 0.35; stroke: var(--green); stroke-width: 3.6; stroke-linecap: round; stroke-linejoin: round; }
#tvPrev:hover, #tvNext:hover { transform: scale(1.1); }
#tvPrev:active, #tvNext:active { transform: scale(0.92); }
#tvBox.full.many #tvBar { bottom: calc(var(--barS, 70px) + 6px); padding-bottom: 6px; }
#tvBox.full #tvNav { position: absolute; left: 0; right: 0; bottom: 0; margin: 0; padding: 2px 0 max(8px, env(safe-area-inset-bottom)); background: rgba(0, 0, 0, 0.8); }
#tvTitle { flex: 1; min-width: 0; text-align: center; line-height: 1.05; padding: 0 8px; }
#tvTitle b { display: block; font-family: var(--tag); font-weight: normal; font-size: clamp(30px, 8.4vw, 51px); color: var(--pink); text-shadow: var(--dark), 0 0 18px rgba(255,47,160,0.45);
  line-height: 1; overflow-wrap: anywhere; }      /* (50 % bigger, his: "increase the size of [the video] title by 50%"; a long name wraps instead of "…") */
#tvTitle small { display: block; margin-top: 3px; font-family: var(--marker); font-size: clamp(11px, 2.9vw, 14px); color: var(--paper); text-shadow: var(--dark); white-space: pre; }
#tvBox.full #tvHead { position: absolute; top: 0; left: 0; right: 0; width: auto; padding: max(12px, env(safe-area-inset-top)) 64px 26px var(--edge, 16px);
  background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0)); }
/* (21 Oct) FULL SCREEN KEEPS THE PICTURE 16:9 (the player filling an upright phone put YouTube's own title strip and logo — shown at the start, on a pause and while loading — under our head and bar): the biggest 16:9 that fits, in the middle; our controls on the black above and below it (sideways: over it) */
#tvBox.full #tvFrame { width: min(100vw, calc(100vh * 16 / 9)) !important; width: min(100vw, calc(100dvh * 16 / 9)) !important; height: auto !important; aspect-ratio: 16 / 9 !important; }
#tvTime { display: none !important; }      /* (21 Oct, his screenshot: "ditch white timer progress thingy": the time is gone; the line stays) */
/* (21 Oct, his: "Hitting the X when we're in the carousel doesn't bring up the zombie finger … hovering over it"): the carousel's X has the zombie finger too */
body.carousel #tourX, body.carousel #tourX * { cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='38' height='38' viewBox='0 0 32 32'><path d='M11 2.5c1.6 0 2.6 1.1 2.6 2.8v8.1l1.2-.3c1.4-.3 2.5.4 2.8 1.6l.2.6.6-.2c1.4-.4 2.6.3 3 1.5l.2.6.6-.1c1.5-.2 2.6.8 2.7 2.2l.2 4.3c.2 3.6-2 6.6-5.6 7.3l-3.4.6c-2.6.4-5-.7-6.4-2.9l-4.7-7.3c-.8-1.2-.4-2.6.8-3.2 1-.5 2.2-.2 2.9.7l1.4 1.8V5.3c0-1.7 1-2.8 2.6-2.8z' fill='%2330f008' stroke='%23061104' stroke-width='1.6' stroke-linejoin='round'/><path d='M12 9.5h2.2M12 12.5h2.2M15.6 22.5l4 1.2M14.2 26l3.4.4' stroke='%23ff2fa0' stroke-width='1.3' stroke-linecap='round'/><circle cx='20.5' cy='18.6' r='1' fill='%23061104'/></svg>") 13 2, pointer; }