/* ============ HALLOWEEN?! — sponsored by the Local Dairy Council™ ============ */
:root {
  --ink: #161210;
  --news: #f3ead2;
  --orange: #ff7a00;
  --purple: #2a0845;
  --yellow: #ffe000;
  --red: #e0161e;
  --milk: #fffdf6;
  --ticker-h: 46px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-x: hidden; overflow-x: clip; }
body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  font-family: 'Old Standard TT', Georgia, serif;
  overflow-x: hidden;
  overflow-x: clip;
  background-color: var(--purple);
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255, 122, 0, .35) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 80%, rgba(255, 255, 255, .18) 0 1.5px, transparent 2.5px),
    repeating-conic-gradient(#1a0430 0 25%, #36105a 0 50%),
    linear-gradient(160deg, #3b0a5e, #120020 60%, #4a1500);
  background-size: 22px 22px, 31px 31px, 80px 80px, 100% 100%;
  background-attachment: fixed;
  padding-bottom: calc(var(--ticker-h) + 10px);
}
button { font: inherit; cursor: pointer; }

/* ---------- the gate ---------- */
#gate {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: 16px;
  background:
    repeating-linear-gradient(45deg, rgba(255, 224, 0, .14) 0 22px, transparent 22px 44px),
    radial-gradient(circle, #3a0060, #000 75%);
  animation: stripes 2s linear infinite;
  transition: opacity .8s, transform .8s;
}
#gate.gone { opacity: 0; transform: scale(2.5) rotate(25deg); pointer-events: none; }
@keyframes stripes { to { background-position: 62px 0, 0 0; } }
.gate-inner { text-align: center; color: #fff; max-width: 760px; }
.gate-kicker { font-family: 'Bungee', sans-serif; color: var(--yellow); letter-spacing: .1em; font-size: clamp(.7rem, 2.6vw, 1rem); animation: wobble 1.4s ease-in-out infinite; }
#gate-title { font-size: clamp(1.6rem, 8vw, 5rem); margin: .3em 0; line-height: 1.25; }
.gate-sub { font-family: 'Special Elite', monospace; font-size: clamp(1rem, 3.4vw, 1.35rem); line-height: 1.5; }
.council { font-family: 'UnifrakturMaguntia', serif; font-size: 1.6em; color: var(--yellow); text-shadow: 3px 3px 0 var(--red); }
.gate-when { display: inline-block; font-family: 'Bungee', sans-serif; font-size: clamp(1rem, 4vw, 1.6rem); color: var(--ink); background: var(--yellow); padding: .2em .7em; transform: rotate(-2deg); box-shadow: 4px 4px 0 var(--red); margin: .2em 0 .4em; }
.gate-where { font-family: 'Special Elite', monospace; font-weight: 700; font-size: clamp(.95rem, 3.4vw, 1.3rem); color: #fff; background: var(--red); display: inline-block; padding: .25em .7em; transform: rotate(1.5deg); box-shadow: 4px 4px 0 var(--ink); margin: .3em 0; }
.gate-tip { font-family: 'Special Elite', monospace; font-size: clamp(.85rem, 3vw, 1.05rem); color: var(--yellow); margin: .6em 0 0; }
.gate-tip b { color: #fff; text-decoration: underline wavy var(--red); }
.gate-warn { font-family: 'Special Elite', monospace; opacity: .7; font-size: .85rem; margin-top: 1.4em; }

/* ---------- ransom-note letters ---------- */
.r {
  display: inline-block; padding: .02em .14em; margin: .05em .03em; line-height: 1.1;
  box-shadow: 2px 3px 0 rgba(0, 0, 0, .45);
}
.r-space { display: inline-block; width: .35em; }
.r-word { display: inline-block; white-space: nowrap; }

/* ---------- tickers ---------- */
.ticker { position: fixed; left: 0; right: 0; z-index: 60; overflow: hidden; white-space: nowrap; }
.ticker.top { top: 0; height: 30px; background: var(--ink); color: var(--yellow); font-family: 'Special Elite', monospace; font-size: 15px; line-height: 30px; border-bottom: 3px solid var(--red); }
.ticker.bottom {
  bottom: 0; height: var(--ticker-h); line-height: var(--ticker-h);
  background: repeating-linear-gradient(-45deg, var(--yellow) 0 18px, #ffd000 18px 36px);
  border-top: 4px solid var(--ink); color: var(--red);
  font-family: 'Bungee', sans-serif; font-size: 26px; text-shadow: 2px 2px 0 var(--ink);
}
.ticker-track { display: inline-block; animation: scroll 40s linear infinite; }
.ticker.bottom .ticker-track { animation-duration: 18s; }
.ticker-track span { padding: 0 2.2em; }
.ticker.bottom b { color: var(--ink); text-shadow: 2px 2px 0 #fff; animation: pulse .8s ease-in-out infinite alternate; display: inline-block; }
@keyframes scroll { to { transform: translateX(-50%); } }
@keyframes pulse { to { transform: scale(1.15) rotate(-3deg); } }

/* ---------- the menu ---------- */
#menu {
  position: sticky; top: 30px; z-index: 55;
  display: flex; flex-wrap: wrap; gap: 8px; justify-content: center;
  padding: 12px 10px 8px; margin-top: 30px;
}
.menu-btn {
  border: 3px solid var(--ink); padding: .5em .9em;
  font-family: 'Bungee', sans-serif; font-size: clamp(.72rem, 2.4vw, .95rem);
  background: var(--yellow); color: var(--ink);
  box-shadow: 4px 4px 0 var(--ink);
  transform: rotate(var(--rot, -1.5deg));
  transition: transform .12s;
}
#menu > :nth-child(2n) .menu-btn, #menu > .menu-btn:nth-child(2n) { --rot: 2deg; background: var(--orange); }
#menu > .menu-btn:nth-child(3n) { background: #ff4fa3; color: #fff; text-shadow: 1px 1px 0 var(--ink); }
#menu > .menu-btn:nth-child(5) { background: var(--red); color: #fff; }
a.menu-btn { display: inline-block; text-decoration: none; }
.menu-btn.fda { background: #c8102e; color: var(--yellow); font-family: 'Bungee', 'PingFang HK', 'Noto Sans HK', 'Microsoft JhengHei', sans-serif; --rot: -2.5deg; text-shadow: 1px 1px 0 var(--ink); }
.menu-btn:hover { transform: rotate(0) scale(1.08); }
.menu-btn:active { transform: translate(3px, 3px); box-shadow: 1px 1px 0 var(--ink); }
.menu-btn.boom { animation: boom .5s; }
@keyframes boom { 30% { transform: scale(1.25) rotate(8deg); filter: hue-rotate(180deg); } }
.menu-btn.big { font-size: clamp(1.1rem, 4.5vw, 1.8rem); padding: .6em 1.2em; margin-top: .6em; }
.menu-btn.big:hover { animation: wobble .4s infinite; }

.jukebox { position: relative; }
.jukebox-list {
  position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) rotate(1deg);
  width: min(320px, 90vw); padding: 10px; display: grid; gap: 8px;
  background: var(--news); border: 3px solid var(--ink); box-shadow: 6px 6px 0 var(--ink);
}
.jukebox-list[hidden] { display: none; }
.jukebox-list::before { content: 'RADIO LISTINGS · TONIGHT'; font-family: 'UnifrakturMaguntia', serif; font-size: 1.3rem; text-align: center; border-bottom: 3px double var(--ink); }
.track { font-family: 'Special Elite', monospace; font-size: .95rem; text-align: left; background: #fff; --rot: 0deg; box-shadow: 3px 3px 0 var(--ink); }
.track.on { background: var(--ink); color: var(--yellow); }
.track.on::before { content: '▶ '; }
.now-playing {
  position: sticky; top: 88px; z-index: 54; width: max-content; max-width: 92vw; margin: 0 auto;
  background: var(--ink); color: #7cfc00; font-family: 'Press Start 2P', monospace; font-size: 9px; padding: 5px 8px;
  border: 2px solid #7cfc00; transform: rotate(-1deg); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---------- the collage ---------- */
#collage { position: relative; padding: 30px 16px 60px; min-height: 80vh; }
.info-flow {
  position: relative; z-index: 2;
  display: grid; gap: 22px 26px; max-width: 1080px; margin: 0 auto;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  align-items: start;
}
.decor-layer { position: absolute; inset: 0; pointer-events: none; }
.piece { will-change: transform; filter: drop-shadow(3px 6px 5px rgba(0, 0, 0, .55)); }
.piece.info { position: relative; }
.piece.decor { position: absolute; width: clamp(110px, 17vw, 230px); }
.piece.wide { grid-column: 1 / -1; }
@media (min-width: 760px) { .piece.wide-ish { grid-column: span 2; } }
.paper {
  background-color: var(--news);
  background-image: repeating-linear-gradient(0deg, rgba(0, 0, 0, .025) 0 1px, transparent 1px 3px),
                    radial-gradient(circle at 30% 20%, rgba(120, 80, 20, .12), transparent 70%);
  padding: 16px 18px 18px;
}
.tape { position: absolute; top: -10px; width: 74px; height: 24px; background: rgba(255, 238, 170, .65); border: 1px solid rgba(0, 0, 0, .06); z-index: 3; }

.news h2 { font-family: 'Abril Fatface', serif; font-size: 2rem; margin: 0 0 .3em; border-bottom: 4px double var(--ink); letter-spacing: .02em; }
.news h3 { font-family: 'Abril Fatface', serif; font-size: 1.15rem; line-height: 1.15; margin: 0 0 .4em; }
.news h4 { font-family: 'UnifrakturMaguntia', serif; font-size: 1.3rem; margin: 0 0 .3em; border-bottom: 1px solid var(--ink); }
.news p { margin: .3em 0; font-size: .92rem; line-height: 1.35; }
.news.small p { font-size: .8rem; }
.big-val { font-family: 'Special Elite', monospace; font-size: 1.35rem !important; line-height: 1.3 !important; }
.byline { font-style: italic; opacity: .75; }
.todo { font-family: 'Permanent Marker', cursive; color: var(--red); background: rgba(255, 224, 0, .55); padding: 0 .2em; }
.news.yellow .paper { background-color: var(--yellow); }
.news.pink .paper { background-color: #ffb3d1; }
.news.black .paper { background: var(--ink); color: #fff; }
.news.black h2 { border-color: #fff; color: var(--orange); }

.masthead .paper { text-align: center; padding: 10px 18px; }
.mast-top, .mast-bot { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 6px; font-size: .72rem; letter-spacing: .08em; border-top: 2px solid var(--ink); border-bottom: 2px solid var(--ink); padding: 3px 0; }
.mast-bot { justify-content: center; font-family: 'Special Elite', monospace; }
.mast-name { font-family: 'UnifrakturMaguntia', serif; font-size: clamp(2.6rem, 10vw, 6rem); line-height: 1.05; margin: .05em 0; }

.headline .paper { text-align: center; background-color: #fff; padding: 20px 14px 22px; }
.kicker { font-family: 'Bungee', sans-serif; letter-spacing: .12em; font-size: clamp(.75rem, 2.5vw, 1rem); color: var(--red); }
.ransom-big { font-size: clamp(1.5rem, 7.4vw, 5.4rem); margin: .15em 0; line-height: 1.2; }
.deck { font-family: 'Creepster', cursive; font-size: clamp(1.4rem, 5vw, 2.6rem); color: var(--orange); -webkit-text-stroke: 1px var(--ink); margin: 0; letter-spacing: .04em; }

.photo .paper { padding: 7px; background: #fff; position: relative; }
.photo svg { display: block; width: 100%; height: auto; filter: sepia(.35) contrast(1.15) saturate(.85); }
.photo .paper::after { content: ''; position: absolute; inset: 7px; background: radial-gradient(circle, rgba(0, 0, 0, .28) 32%, transparent 36%) 0 0 / 4px 4px; mix-blend-mode: multiply; pointer-events: none; }

.ad .paper { background: #000; color: #ff4fa3; text-align: center; border: 4px solid #ff4fa3; }
.ad-hot { font-family: 'Monoton', cursive; font-size: clamp(1rem, 2.2vw, 1.6rem); line-height: 1.2; }
.ad-small { font-family: 'Special Elite', monospace; color: #fff; font-size: .72rem; margin-top: 6px; }
.blink .ad-hot { animation: neon 1.2s steps(2) infinite; }
@keyframes neon { 50% { color: #00e5ff; text-shadow: 0 0 8px #00e5ff; } }

.poster .paper { background: radial-gradient(circle, #b71c1c, #2a0000); color: var(--yellow); text-align: center; font-family: 'Bungee', sans-serif; }
.poster-top { font-size: .8rem; letter-spacing: .3em; }
.poster-vs { display: grid; gap: 2px; font-size: clamp(.8rem, 1.6vw, 1.1rem); text-shadow: 2px 2px 0 #000; margin: 6px 0; }
.poster-vs b { font-size: 2.2em; color: #fff; font-style: italic; -webkit-text-stroke: 2px var(--red); }
.poster-bot { font-family: 'Special Elite', monospace; font-size: .62rem; color: #fff; }

.sticker { width: clamp(100px, 12vw, 150px) !important; }
.sticker .paper { aspect-ratio: 1; border-radius: 50%; clip-path: none !important; display: grid; place-items: center; text-align: center; background: var(--yellow); color: var(--red); font-family: 'Bungee', sans-serif; font-size: clamp(.75rem, 1.3vw, 1rem); line-height: 1.1; border: 4px dashed var(--red); }
.warning .paper { background: var(--yellow); text-align: center; font-family: 'Rubik Mono One', sans-serif; font-size: clamp(.7rem, 1.2vw, .95rem); border: 10px solid transparent; border-image: repeating-linear-gradient(45deg, #000 0 10px, var(--yellow) 10px 20px) 10; }
.coupon .paper { border: 3px dashed var(--ink); text-align: center; font-family: 'Special Elite', monospace; font-size: .85rem; background: #e6f4ff; }
.coupon b { font-family: 'Abril Fatface', serif; font-size: 1.4rem; }
.counter .paper { background: #000; color: #ccc; font-family: 'Press Start 2P', monospace; font-size: 8px; text-align: center; line-height: 1.8; }
.digits { color: #39ff14; font-size: 16px; letter-spacing: 3px; background: #111; border: 2px inset #555; padding: 2px 6px; display: inline-block; margin-top: 4px; }
.sudoku { display: grid; grid-template-columns: repeat(3, 1fr); border: 2px solid var(--ink); }
.sudoku span { border: 1px solid var(--ink); text-align: center; font-size: 1.1rem; padding: 2px; }
.tiny { font-size: .65rem !important; transform: rotate(180deg); text-align: center; }
.weather { font-family: 'Bungee', sans-serif; font-size: 1rem !important; }

.fineprint { position: relative; z-index: 5; max-width: 720px; margin: 0 auto 20px; padding: 10px 16px; background: rgba(0, 0, 0, .7); color: rgba(255, 255, 255, .55); font-size: .68rem; text-align: center; font-family: 'Special Elite', monospace; }

/* ---------- the cow ---------- */
.runner { position: fixed; left: 0; top: 0; z-index: 80; width: clamp(160px, 18vw, 250px); padding: 14px; cursor: crosshair; touch-action: none; user-select: none; -webkit-user-select: none; }
.runner img { display: block; width: 100%; height: auto; pointer-events: none; filter: drop-shadow(4px 8px 5px rgba(0, 0, 0, .5)); animation: gallop-photo .3s ease-in-out infinite; transform-origin: 50% 90%; }
@keyframes gallop-photo { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-16px) rotate(4deg); } }
.runner.unstoppable { cursor: not-allowed; }
.cow-hint { position: absolute; left: 50%; bottom: 88%; transform: translateX(-50%) scaleX(var(--dir, 1)); white-space: nowrap; font-family: 'Bungee', sans-serif; font-size: clamp(.8rem, 1.4vw, 1.1rem); color: var(--ink); background: var(--yellow); border: 3px solid var(--ink); border-radius: 10px; padding: 2px 10px; box-shadow: 3px 3px 0 var(--red); animation: hint-bob .5s ease-in-out infinite alternate; pointer-events: none; }
.cow-hint::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 8px solid transparent; border-top-color: var(--ink); }
@keyframes hint-bob { to { margin-bottom: 8px; } }
.runner.caught .cow-hint, .runner.bump .cow-hint { display: none; }
.runner.bump::before { content: 'THUD!'; position: absolute; left: 50%; top: -24px; transform: translateX(-50%) scaleX(var(--dir, 1)) rotate(-10deg); font-family: 'Bungee', sans-serif; font-size: 1.8rem; color: #fff; -webkit-text-stroke: 2px var(--ink); white-space: nowrap; }
.runner.caught img { animation: caught .9s ease-in forwards; }
.runner[hidden] { display: none; }
.runner svg { display: block; width: 100%; height: auto; overflow: visible; animation: gallop-body .18s ease-in-out infinite alternate; }
.runner .leg { transform-box: fill-box; transform-origin: 50% 0; animation: gallop .18s ease-in-out infinite alternate; }
.runner .l2, .runner .l3 { animation-direction: alternate-reverse; }
.runner .tail { transform-box: fill-box; transform-origin: 100% 0; animation: gallop .25s infinite alternate; }
@keyframes gallop { from { transform: rotate(-32deg); } to { transform: rotate(32deg); } }
@keyframes gallop-body { to { transform: rotate(-4deg) translateY(-3px); } }
.runner.caught svg { animation: caught .9s ease-in forwards; }
.runner.caught .leg { animation-duration: .05s; }
.runner.caught::after {
  content: 'CAUGHT!'; position: absolute; left: 50%; top: -10px; transform: translateX(-50%) rotate(-8deg);
  font-family: 'Bungee', sans-serif; font-size: 1.6rem; color: var(--yellow); -webkit-text-stroke: 2px var(--red); white-space: nowrap;
}
@keyframes caught { 40% { transform: scale(1.6) rotate(-20deg); } 100% { transform: scale(.2) rotate(720deg); opacity: 0; } }
.cow-taunt { position: fixed; z-index: 79; font-family: 'Bungee', sans-serif; font-size: clamp(1rem, 3vw, 1.6rem); color: #fff; background: var(--red); padding: 6px 12px; border: 3px solid var(--ink); transform: rotate(-6deg); animation: wobble .3s infinite; pointer-events: none; }
.cow-taunt[hidden] { display: none; }

/* ---------- Margaret Thatcher (walk-on part) ---------- */
.thatcher { position: fixed; z-index: 78; aspect-ratio: 100 / 210; pointer-events: none; }
.thatcher[hidden] { display: none; }
.th-body { height: 100%; transform: scaleX(var(--face, 1)); transform-origin: 50% 100%; }
.th-body svg { display: block; height: 100%; width: auto; overflow: visible; filter: drop-shadow(3px 6px 4px rgba(0, 0, 0, .5)); }
.th-leg { transform-box: fill-box; transform-origin: 50% 0; }
.walking .th-l1 { animation: th-walk .45s ease-in-out infinite alternate; }
.walking .th-l2 { animation: th-walk .45s ease-in-out infinite alternate-reverse; }
.walking .th-body { animation: th-bob .45s ease-in-out infinite alternate; }
@keyframes th-walk { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
@keyframes th-bob { to { transform: scaleX(var(--face, 1)) translateY(-4px); } }
.th-bubble { position: absolute; bottom: 102%; left: 50%; transform: translateX(-50%) rotate(-3deg); background: #fff; border: 3px solid var(--ink); border-radius: 14px; padding: 6px 10px; font-family: 'Bungee', sans-serif; font-size: clamp(.65rem, 1.4vw, .9rem); line-height: 1.15; white-space: nowrap; opacity: 0; transition: opacity .2s; }
.th-bubble::after { content: ''; position: absolute; top: 100%; left: 45%; border: 9px solid transparent; border-top-color: var(--ink); }
.standing .th-bubble { opacity: 1; }
.splat .th-body { animation: th-splat .25s ease-in forwards; }
@keyframes th-splat { to { transform: scaleX(calc(var(--face, 1) * 1.7)) scaleY(.1); } }
.th-bag { transform-box: fill-box; transform-origin: center; }
.splat .th-bag { animation: th-bag 1.2s ease-out forwards; }
@keyframes th-bag { to { transform: translate(calc(var(--fly, 1) * 260px), -220px) rotate(900deg); opacity: 0; } }
.th-ghost { position: fixed; z-index: 79; width: 70px; pointer-events: none; transform: translate(-50%, -100%); animation: th-rise 4.2s ease-out forwards; text-align: center; }
.th-ghost span { font-family: 'Creepster', cursive; color: #fff; font-size: 1.3rem; text-shadow: 2px 2px 0 var(--ink); }
@keyframes th-rise { 0% { opacity: 0; transform: translate(-50%, -100%); } 15% { opacity: 1; } 50% { transform: translate(calc(-50% + 18px), calc(-100% - 120px)); } 100% { opacity: 0; transform: translate(-50%, calc(-100% - 260px)); } }
.th-headline { position: fixed; z-index: 95; left: 50%; top: 28%; width: min(440px, 86vw); transform: translateX(-50%) rotate(-4deg); animation: slam .35s cubic-bezier(.2, 1.6, .4, 1); transition: opacity .6s, transform .6s; pointer-events: none; }
.th-headline .paper { text-align: center; }
.th-headline h3 { font-family: 'Abril Fatface', serif; font-size: clamp(1.3rem, 4vw, 2rem); line-height: 1.1; margin: .2em 0; }
.th-headline p { font-size: .9rem; margin: 0; }
.th-headline.out { opacity: 0; transform: translateX(-50%) rotate(20deg) translateY(-80px); }
@keyframes slam { from { transform: translateX(-50%) scale(3) rotate(15deg); opacity: 0; } }

/* ---------- booze clippings ---------- */
.byob .paper { border-color: #ffb300; color: #ffb300; }
.byob .ad-hot { font-size: clamp(1.4rem, 3vw, 2.2rem); }
.recipe .paper { background: #fff; font-family: 'Special Elite', monospace; font-size: .8rem; border-top: 10px solid #c62828; }
.recipe h4 { font-family: 'Abril Fatface', serif; font-size: 1rem; margin: 0 0 .2em; }
.recipe ul { margin: .3em 0; padding-left: 1.1em; }
.psa .paper { background: #e3f2fd; }

/* ---------- Winston Churchill, napping ---------- */
.churchill { position: fixed; z-index: 72; right: 10px; bottom: calc(var(--ticker-h) - 6px); width: clamp(150px, 15vw, 220px); pointer-events: none; transform: translateY(115%); transition: transform .7s cubic-bezier(.2, 1.3, .4, 1); --flush: 0; }
.churchill[hidden] { display: none; }
.churchill.in { transform: translateY(0); }
.ch-body svg { display: block; width: 100%; height: auto; overflow: visible; filter: drop-shadow(-3px 6px 5px rgba(0, 0, 0, .5)); }
.ch-flush { opacity: var(--flush); transition: opacity .4s; }
.ch-arm { transform-origin: 72px 204px; transition: transform .35s ease-in-out; }
.sipping .ch-arm { transform: rotate(52deg); }
.ch-cigar { transition: opacity .2s; }
.sipping .ch-cigar { opacity: 0; }
.ch-smoke { animation: smoke 2.4s ease-out infinite; transform-box: fill-box; transform-origin: center; }
.ch-smoke.s2 { animation-delay: 1.2s; }
@keyframes smoke { 0% { transform: translate(0, 10px) scale(.4); opacity: 0; } 30% { opacity: .7; } 100% { transform: translate(12px, -30px) scale(1.4); opacity: 0; } }
.ch-shut { display: none; }
.asleep .ch-shut { display: inline; }
.asleep .ch-open { display: none; }
.ch-head { transform-origin: 104px 168px; transition: transform 1.2s ease-in-out; }
.tipsy .ch-body { animation: tipsy 1.6s ease-in-out infinite; transform-origin: 50% 100%; }
@keyframes tipsy { 25% { transform: rotate(-4deg); } 75% { transform: rotate(4deg); } }
.asleep .ch-body { animation: none; }
.asleep .ch-head { transform: rotate(-16deg) translateY(6px); }
.ch-bubble { position: absolute; bottom: 92%; right: 30%; width: max-content; max-width: min(260px, 70vw); background: #fff; border: 3px solid var(--ink); border-radius: 14px; padding: 6px 10px; font-family: 'Special Elite', monospace; font-weight: 700; font-size: clamp(.7rem, 1.2vw, .9rem); line-height: 1.25; transform: rotate(-3deg); }
.ch-bubble[hidden] { display: none; }
.ch-bubble::after { content: ''; position: absolute; top: 100%; right: 26%; border: 9px solid transparent; border-top-color: var(--ink); }
.ch-zzz { position: absolute; top: 4%; left: 8%; font-family: 'Bungee', sans-serif; color: #fff; -webkit-text-stroke: 1.5px var(--ink); font-size: 1.6rem; opacity: 0; }
.asleep .ch-zzz { opacity: 1; }
.ch-zzz span { position: absolute; animation: zzz 2.4s ease-out infinite; }
.ch-zzz span:nth-child(2) { animation-delay: .8s; font-size: .8em; }
.ch-zzz span:nth-child(3) { animation-delay: 1.6s; font-size: .6em; }
@keyframes zzz { 0% { transform: translate(0, 0); opacity: 0; } 20% { opacity: 1; } 100% { transform: translate(-30px, -70px) rotate(-20deg); opacity: 0; } }
.ch-fine { position: absolute; left: -14%; top: 46%; font-family: 'Bungee', sans-serif; font-size: clamp(.8rem, 1.4vw, 1.1rem); background: var(--yellow); color: var(--ink); border: 3px solid var(--ink); padding: 2px 8px; transform: rotate(-8deg) scale(0); transition: transform .3s cubic-bezier(.2, 1.6, .4, 1) .8s; white-space: nowrap; }
.asleep .ch-fine { transform: rotate(-8deg) scale(1); }

/* ---------- PLUCK-A-BREZHNEV™ ---------- */
.bz { position: fixed; z-index: 70; top: 36px; left: 8px; width: clamp(270px, 36vw, 480px); animation: bz-in .5s cubic-bezier(.2, 1.5, .4, 1); }
.bz[hidden] { display: none; }
.bz.leaving { animation: bz-out .35s ease-in forwards; }
@keyframes bz-in { from { transform: scale(.1) rotate(-25deg); opacity: 0; } }
@keyframes bz-out { to { transform: scale(.1) rotate(25deg); opacity: 0; } }
.bz-box { position: relative; background: #d32f2f; border: 4px solid var(--ink); border-radius: 14px; padding: 8px; box-shadow: 8px 8px 0 var(--ink), inset 0 0 0 4px var(--yellow); transform: rotate(-1.5deg); }
.bz-title { font-family: 'Bungee', sans-serif; color: var(--yellow); font-size: clamp(.95rem, 1.9vw, 1.35rem); text-shadow: 3px 3px 0 var(--ink); line-height: 1; padding: 2px 34px 6px 4px; }
.bz-title small { display: block; font-family: 'Special Elite', monospace; color: #fff; font-size: .55em; text-shadow: none; margin-top: 3px; letter-spacing: .05em; }
.bz-x { position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; border: 3px solid var(--ink); border-radius: 50%; background: var(--yellow); font-weight: 700; line-height: 1; padding: 0; }
.bz-timer { height: 10px; background: var(--ink); border: 2px solid var(--ink); margin-bottom: 6px; }
.bz-timer i { display: block; height: 100%; background: #76ff03; transform-origin: 0 50%; }
.bz.hurry .bz-timer i { background: #ff1744; animation: hurry .5s steps(2) infinite; }
@keyframes hurry { 50% { opacity: .35; } }
.bz-stage { position: relative; overflow: hidden; border: 4px solid var(--ink); border-radius: 6px; background: #ffb300; touch-action: none; user-select: none; -webkit-user-select: none;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Cpath d='M2 2 L14 30 L18 28 L6 2z M2 2 L28 14 L26 18 L2 6z' fill='%23bbb' stroke='%23333' stroke-width='1.5'/%3E%3C/svg%3E") 2 2, crosshair; }
.bz-svg { display: block; width: 100%; height: auto; }
.bz-svg.pain { animation: wobble .25s; }
.bz-eyes-shut { display: none; }
.pain .bz-eyes-shut { display: inline; }
.pain .bz-eyes-open { display: none; }
.hair { transform-box: fill-box; transform-origin: 50% 100%; }
.hair.wiggle { animation: hair-wiggle .25s; }
@keyframes hair-wiggle { 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } }
.hair.gone { transition: transform .65s ease-out, opacity .65s; opacity: 0; pointer-events: none; }
.hole { fill: #2b1a10; opacity: 0; transition: opacity .2s; }
.hole.open { opacity: 1; }
.bz-lunch { position: absolute; left: 4px; bottom: 4px; width: 17%; transition: transform .6s .9s; }
.bz-lunch svg { display: block; width: 100%; height: auto; }
.lunch-gone { display: none; }
.eaten .lunch-full { display: none; }
.eaten .lunch-gone { display: inline; }
.reagan-in .bz-lunch { transform: translate(110%, -18%) rotate(12deg); }
.bz-reagan { position: absolute; right: 0; bottom: -2px; width: 50%; transform: translateX(110%); transition: transform .8s cubic-bezier(.2, 1.3, .4, 1); pointer-events: none; }
.bz-reagan svg { display: block; width: 100%; height: auto; }
.reagan-in .bz-reagan { transform: translateX(-30%); }
.rg-chomp { display: none; }
.chomping .rg-grin { display: none; }
.chomping .rg-chomp { display: inline; }
.bz-bubble { position: absolute; z-index: 2; background: #fff; border: 3px solid var(--ink); border-radius: 12px; padding: 4px 8px; font-family: 'Bungee', sans-serif; font-size: clamp(.7rem, 1.4vw, 1rem); pointer-events: none; white-space: nowrap; transform: rotate(-4deg); }
.bz-bubble[hidden] { display: none; }
.bz-banner { position: absolute; z-index: 3; inset: 0; display: grid; place-content: center; text-align: center; pointer-events: none; font-family: 'Bungee', sans-serif; color: var(--yellow); font-size: clamp(1.4rem, 3.4vw, 2.6rem); line-height: 1.05; -webkit-text-stroke: 2px var(--red); text-shadow: 3px 3px 0 var(--ink); animation: slam-c .35s cubic-bezier(.2, 1.6, .4, 1); }
.bz-banner[hidden] { display: none; }
.reagan-in .bz-banner { place-content: start center; padding-top: 4%; font-size: clamp(1.1rem, 2.6vw, 2rem); }
.bz-banner small { display: block; font-family: 'Special Elite', monospace; font-size: .4em; color: #fff; -webkit-text-stroke: 0; text-shadow: 1px 1px 0 var(--ink); margin-top: 6px; background: var(--ink); padding: 3px 6px; }
@keyframes slam-c { from { transform: scale(3) rotate(10deg); opacity: 0; } }
.bz-count { font-family: 'Press Start 2P', monospace; font-size: 8px; color: var(--yellow); text-align: center; padding-top: 7px; text-shadow: 1px 1px 0 var(--ink); }
.troll { position: fixed; z-index: 85; width: 30px; pointer-events: none; }
.troll svg { display: block; width: 100%; height: auto; transform: scaleX(var(--face, 1)); overflow: visible; }
.troll .tl, .troll .tr { transform-box: fill-box; transform-origin: 50% 0; animation: th-walk .14s infinite alternate; }
.troll .tr { animation-direction: alternate-reverse; }
.missile { position: fixed; z-index: 86; bottom: -170px; width: 34px; pointer-events: none; }
.missile svg { display: block; width: 100%; height: auto; position: relative; z-index: 1; }
.missile::after { content: ''; position: absolute; top: 88%; left: 50%; width: 28px; height: 70vh; transform: translateX(-50%); background: linear-gradient(rgba(235, 235, 235, .9), rgba(200, 200, 200, .4) 40%, transparent); filter: blur(4px); border-radius: 50%; }
.missile .flame { animation: flame .08s infinite alternate; transform-box: fill-box; transform-origin: 50% 0; }
@keyframes flame { to { transform: scaleY(1.35); } }

/* ---------- the fight ---------- */
.fight {
  position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 10px;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .03) 0 2px, transparent 2px 4px), rgba(0, 0, 0, .94);
}
.fight[hidden] { display: none; }
body.fighting { overflow: hidden; }
.fight { grid-template-columns: minmax(0, 1fr); }
.cabinet { position: relative; width: min(100%, 980px); min-width: 0; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; justify-items: center; }
.cabinet-marquee { font-family: 'Bungee', sans-serif; color: var(--yellow); font-size: clamp(1rem, 4vw, 2rem); text-shadow: 3px 3px 0 var(--red), 6px 6px 0 #000; text-align: center; line-height: 1.1; padding-right: 0; }
.cabinet-marquee span { color: #fff; }
.cabinet-marquee small { display: block; font-family: 'Creepster', cursive; color: var(--orange); font-size: .6em; letter-spacing: .1em; text-shadow: 2px 2px 0 #000; }
#fight-canvas {
  width: min(100%, calc((100dvh - 190px) * 16 / 9)); aspect-ratio: 16 / 9; height: auto;
  max-width: 100%; image-rendering: pixelated; image-rendering: crisp-edges;
  border: 4px solid #333; box-shadow: 0 0 0 4px #000, 0 0 40px rgba(255, 122, 0, .45); background: #000; touch-action: none;
}
.fight-exit { position: absolute; top: 0; right: 0; font-family: 'Press Start 2P', monospace; font-size: 10px; background: #000; color: #fff; border: 2px solid #fff; padding: 8px; z-index: 2; }
.fight-help { font-family: 'Press Start 2P', monospace; font-size: 9px; color: #aaa; text-align: center; line-height: 1.8; }
.pad { display: none; width: 100%; justify-content: space-between; gap: 10px; user-select: none; -webkit-user-select: none; }
.pad button { touch-action: none; font-family: 'Press Start 2P', monospace; font-size: 10px; border: 3px solid #fff; background: #222; color: #fff; border-radius: 12px; min-width: 52px; min-height: 52px; padding: 6px; }
.pad button.on { background: var(--orange); color: #000; }
.pad-dirs { display: grid; grid-template-columns: repeat(3, 52px); grid-template-areas: ". up ." "left down right"; gap: 6px; }
.pad-dirs [data-k=up] { grid-area: up; } .pad-dirs [data-k=left] { grid-area: left; } .pad-dirs [data-k=down] { grid-area: down; } .pad-dirs [data-k=right] { grid-area: right; }
.pad-acts { display: grid; grid-template-columns: repeat(2, 76px); gap: 6px; align-content: start; }
.pad-acts [data-k=special] { grid-column: 1 / -1; }
.pad-acts button:nth-child(1) { background: #b71c1c; }
.pad-acts button:nth-child(2) { background: #0d47a1; }
.pad-acts button:nth-child(3) { background: #6a1b9a; }
@media (pointer: coarse) {
  .pad { display: flex; }
  .fight-help { display: none; }
  .cabinet { padding-top: 34px; }
  .fight { place-items: start center; padding-top: 14px; }
  #fight-canvas { width: min(100%, calc((100dvh - 230px) * 16 / 9)); }
}

/* ---------- general chaos ---------- */
@keyframes wobble { 25% { transform: rotate(-3deg); } 75% { transform: rotate(3deg); } }
body.panic { animation: panic 1.6s; }
@keyframes panic {
  0%, 100% { filter: none; transform: none; }
  20% { filter: hue-rotate(120deg) saturate(3); transform: translate(-8px, 4px) rotate(-1deg); }
  45% { filter: hue-rotate(240deg) saturate(3); transform: translate(8px, -4px) rotate(1deg); }
  70% { filter: hue-rotate(60deg) saturate(2); transform: translate(-4px, 2px); }
}
#cursor-trail span { position: fixed; z-index: 90; pointer-events: none; font-size: 20px; transform: translate(-50%, -50%); animation: trail 1s ease-out forwards; }
@keyframes trail { to { opacity: 0; transform: translate(calc(-50% + var(--dx)), 30px) rotate(200deg) scale(.4); } }

@media (max-width: 600px) {
  :root { --ticker-h: 40px; }
  .ticker.bottom { font-size: 20px; }
  .info-flow > .piece:not(.wide) { width: 90%; justify-self: start; }
  .info-flow > .piece:not(.wide):nth-child(even) { justify-self: end; }
  .piece.decor { width: 110px; z-index: 1 !important; }
  #menu { position: relative; top: auto; }
  .now-playing { position: relative; top: auto; margin-top: 2px; }
  .bz { width: min(300px, 80vw); }
  .churchill { width: 130px; }
}
@media (prefers-reduced-motion: reduce) {
  .blink .ad-hot, .ticker.bottom b, .gate-kicker, .cow-taunt { animation: none; }
}

/* ================= THE THREE LAYERS ================= */
/* Layer 1: password */
.pw-form { display: grid; justify-items: center; gap: 10px; margin: 1.2em auto 0; }
.pw-form label { font-family: 'Bungee', sans-serif; color: var(--yellow); font-size: clamp(1rem, 4vw, 1.4rem); letter-spacing: .05em; }
.pw-form input {
  width: min(320px, 86vw); padding: .5em .8em; text-align: center;
  font-family: 'Special Elite', monospace; font-size: 1.5rem; letter-spacing: .2em; text-transform: none;
  background: var(--news); color: var(--ink); border: 4px solid var(--ink); box-shadow: 5px 5px 0 var(--red); transform: rotate(-1deg); outline: none;
}
.pw-form input:focus { box-shadow: 5px 5px 0 var(--yellow); }
.pw-form .menu-btn.big { margin-top: .2em; }

/* Wrong password: the dead end */
.nope { position: fixed; inset: 0; z-index: 210; display: grid; place-items: center; padding: 16px; text-align: center; color: #fff;
  background: repeating-linear-gradient(-45deg, rgba(224, 22, 30, .25) 0 22px, transparent 22px 44px), radial-gradient(circle, #3a0010, #000 75%); animation: nope-in .3s ease-out; }
.nope[hidden] { display: none; }
@keyframes nope-in { from { opacity: 0; transform: scale(1.3); } }
.nope-inner { max-width: 560px; }
.nope-cow { width: min(260px, 60vw); animation: head-shake .5s ease-in-out infinite; filter: drop-shadow(4px 8px 5px rgba(0, 0, 0, .6)); }
@keyframes head-shake { 25% { transform: rotate(-6deg) translateX(-8px); } 75% { transform: rotate(6deg) translateX(8px); } }
#nope-title { font-size: clamp(2.6rem, 12vw, 5rem); margin: .2em 0; }
.nope-msg { font-family: 'Bungee', sans-serif; font-size: clamp(1rem, 4vw, 1.4rem); color: var(--yellow); line-height: 1.3; }

/* Hide the chaos until it's earned */
body.locked .ticker, body.locked #menu, body.locked .now-playing, body.locked .fineprint, body.locked .calm-cta,
body.calm .ticker, body.calm #menu, body.calm .now-playing, body.calm .fineprint, body.calm .decor-layer { display: none; }
.calm-cta { display: none; }

/* Layer 2: the invitation — still a collage, just a quiet one */
body.calm { padding-bottom: 20px; background-image: radial-gradient(circle at 20% 30%, rgba(255, 122, 0, .25) 0 2px, transparent 3px), linear-gradient(160deg, #3b0a5e, #120020 60%, #2a0d00); background-size: 26px 26px, 100% 100%; }
body.calm #collage { min-height: 0; padding-bottom: 10px; }
body.calm .calm-cta { display: block; position: relative; z-index: 5; text-align: center; padding: 10px 16px 60px; animation: cta-in .8s 1.6s both; }
@keyframes cta-in { from { opacity: 0; transform: translateY(30px); } }
.calm-line { font-family: 'Special Elite', monospace; color: #fff; font-size: clamp(1rem, 3.4vw, 1.25rem); margin: 0 0 .4em; }
#madness-btn { animation: wobble 1.6s ease-in-out infinite; }

/* Layer 2 → 3: zoom in, the chaos slams in around the clippings */
body.madness-in #collage { animation: zoom-in 1.2s cubic-bezier(.3, 1.4, .4, 1); transform-origin: 50% 20%; }
@keyframes zoom-in { 0% { transform: scale(1); filter: none; } 35% { transform: scale(1.35) rotate(-2deg); filter: saturate(3) hue-rotate(40deg); } 100% { transform: scale(1); filter: none; } }
body.madness-in .ticker.top { animation: drop-down .6s .3s both; }
body.madness-in .ticker.bottom { animation: pop-up .6s .3s both; }
body.madness-in #menu { animation: drop-down .6s .5s both; }
@keyframes drop-down { from { transform: translateY(-140%); } }
@keyframes pop-up { from { transform: translateY(140%); } }
.calm-cta .gate-warn { color: rgba(255, 255, 255, .6); font-family: 'Special Elite', monospace; font-size: .85rem; }

/* The door behind the clippings (layer 2 → 3) */
.door { position: absolute; left: 50%; z-index: 1; transform: translateX(-50%); width: max-content; max-width: 100%; text-align: center; pointer-events: none; }
.door.open { pointer-events: auto; }
.door .menu-btn.big { margin: 0; font-size: clamp(.95rem, 3.6vw, 1.5rem); animation: wobble 1.6s ease-in-out infinite; box-shadow: 4px 4px 0 var(--ink), 0 0 30px rgba(255, 224, 0, .6); }
.door-note { margin: 6px 0 0; font-family: 'Special Elite', monospace; font-size: .8rem; color: rgba(255, 255, 255, .75); opacity: 0; transition: opacity .6s .6s; }
.door.open .door-note { opacity: 1; }
body.diving #collage { transition: transform .65s cubic-bezier(.6, 0, .9, .4), filter .65s; transform: scale(7); filter: brightness(1.8) blur(3px); }
body.calm #collage { padding-bottom: 80px; }
.maps { display: inline-block; margin: 4px 0 2px; font-family: 'Bungee', sans-serif; font-size: .85rem; color: var(--ink); background: #fff; border: 3px solid var(--ink); padding: 3px 10px; text-decoration: none; box-shadow: 3px 3px 0 var(--red); transform: rotate(-2deg); }

/* Phones: one swipeable menu row, no "now playing" label */
@media (max-width: 600px) {
  #menu { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; padding: 10px 12px 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  #menu::-webkit-scrollbar { display: none; }
  #menu > * { flex: 0 0 auto; }
  .now-playing { display: none; }
  .jukebox-list { position: fixed; top: 96px; left: 50%; }
}
.maps.phone { background: var(--ink); color: var(--yellow); box-shadow: 3px 3px 0 #fff; transform: rotate(1.5deg); margin-top: 6px; }

/* Wrong password: Reagan & Thatcher as disapproving paper cut-out parents */
.parents { display: flex; justify-content: center; align-items: flex-end; gap: clamp(8px, 4vw, 48px); margin-bottom: 4px; }
.parent { position: relative; width: clamp(140px, 42vw, min(210px, 28vh)); display: flex; flex-direction: column; align-items: center; }
.parent .fig { width: 100%; animation: stern 1.4s steps(2, jump-none) infinite; transform-origin: 50% 100%; }
.parent.thatcher .fig { animation-delay: -.7s; }
.parent svg { display: block; width: 100%; height: auto; overflow: visible;
  filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff) drop-shadow(5px 8px 4px rgba(0, 0, 0, .6)); }
@keyframes stern { from { transform: rotate(-2.5deg); } to { transform: rotate(2.5deg) translateY(-3px); } }
.st-head { transform-box: fill-box; transform-origin: 50% 100%; animation: disapprove 1.1s steps(3, jump-none) infinite alternate; }
.thatcher .st-head { animation-duration: 1.5s; }
@keyframes disapprove { from { transform: rotate(-5deg); } to { transform: rotate(5deg); } }
.st-wag { transform-box: view-box; transform-origin: 168px 278px; animation: wag .45s steps(2, jump-none) infinite alternate; }
@keyframes wag { from { transform: rotate(-14deg); } to { transform: rotate(12deg); } }
.parent .say { order: -1; margin-bottom: 8px; background: #fff; color: var(--ink); border: 3px solid var(--ink); border-radius: 12px; padding: 5px 9px;
  font-family: 'Special Elite', monospace; font-weight: 700; font-size: clamp(.72rem, 2.8vw, .95rem); line-height: 1.2; position: relative; transform: rotate(-3deg); max-width: 100%; }
.parent.thatcher .say { transform: rotate(3deg); }
.parent .say::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 8px solid transparent; border-top-color: var(--ink); }
.parent .cap { margin-top: 8px; font-family: 'Old Standard TT', serif; font-style: italic; font-size: .72rem; color: rgba(255, 255, 255, .7); }
.nope { overflow-y: auto; }
.nope #nope-title { margin: .1em 0; }
@media (max-width: 600px) { .nope #nope-title { font-size: 2.4rem; } .nope-msg { font-size: .95rem; } }