@import url("https://fonts.googleapis.com/css2?family=Jacquard+12&family=VT323&display=swap");

:root {
  --aqua: #65cafe;
  --teal: #3da2b7;
  --pink: #ff4fd8;
  --cyan: #2ff3ff;
  --yellow: #ffe600;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: #11001a url("assets/img/mega-background.png") center top / cover fixed no-repeat;
  font-family: "Pixelated MS Sans Serif", "MS Sans Serif", Tahoma, sans-serif;
  font-size: 14px;
  cursor: url("assets/img/cat-cursor.png") 6 6, auto;
  overflow-x: hidden;
}

/* dark wash so the chaotic bg never eats the text in the gaps */
body::before {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse at top, rgba(10,0,20,0.45), rgba(10,0,20,0.72));
}

body * { cursor: url("assets/img/cat-cursor.png") 6 6, auto; }

a { color: #00f; }
a:hover { color: var(--yellow); }

/* scanline overlay */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9000;
  background: repeating-linear-gradient(to bottom,
    rgba(0,0,0,0) 0px, rgba(0,0,0,0) 2px,
    rgba(0,0,0,0.12) 3px, rgba(0,0,0,0) 4px);
}

/* ───── header ───── */

.site-header { text-align: center; padding: 0.8rem 1rem 0; }

.site-pfp {
  display: inline-block; margin: 0 auto 6px; padding: 3px;
  background: #000; border: 3px ridge var(--pink);
  box-shadow: 0 0 14px var(--pink), 0 0 28px rgba(47,243,255,0.35);
  line-height: 0; text-decoration: none;
  animation: pfpPulse 2.4s ease-in-out infinite;
}
.site-pfp img {
  display: block; width: 80px; height: 80px; object-fit: cover;
  image-rendering: pixelated;
}
.site-pfp:hover { border-color: var(--yellow); box-shadow: 0 0 18px var(--yellow); }
@keyframes pfpPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.04); }
}

.site-nav a.nav-x { color: #7a0000; }
.site-nav a.nav-x:hover { color: var(--pink); }
.site-footer a { color: #024; font-weight: bold; }
.site-footer a:hover { color: var(--pink); }

.site-title {
  font-family: "Jacquard 12", serif;
  font-size: clamp(2.4rem, 8vw, 4.5rem);
  font-weight: 400; margin: 0;
  animation: rainbow 3.5s infinite; color: #fff; letter-spacing: 4px;
}

@keyframes rainbow {
  0%, 100% { text-shadow: -1px 1px #ef3550,-2px 2px #f48fb1,-3px 3px #7e57c2,-4px 4px #2196f3,-5px 5px #26c6da,-6px 6px #43a047,-7px 7px #eeff41,-8px 8px #f9a825,-9px 9px #ff5722; }
  50% { text-shadow: 1px -1px #ef3550,2px -2px #f48fb1,3px -3px #7e57c2,4px -4px #2196f3,5px -5px #26c6da,6px -6px #43a047,7px -7px #eeff41,8px -8px #f9a825,9px -9px #ff5722; }
}

.site-subtitle {
  font-family: "VT323", monospace; font-size: clamp(13px, 3.4vw, 20px);
  letter-spacing: 3px; color: var(--cyan); margin: 0 0 -2px;
  text-transform: uppercase;
}

.site-tagline { margin: 0.25rem 0 0.6rem; font-size: 15px; color: #fff; text-shadow: 1px 1px 0 #000; }

.watch-bar {
  display: inline-block; max-width: 96vw;
  font-family: "VT323", monospace; font-size: 15px; line-height: 1.3;
  color: #0f0; background: #000; padding: 4px 12px; margin: 0 auto 8px;
  border: 1px solid var(--cyan); box-shadow: 0 0 10px var(--cyan);
}
.watch-bar b { color: var(--yellow); }

.site-nav { list-style: none; margin: 0 0 8px; padding: 0.7em; background: var(--aqua); text-align: center; border-top: 2px solid #000; border-bottom: 2px solid #000; }
.site-nav li { display: inline-block; margin: 2px 10px; }
.site-nav a { font-size: 15px; text-decoration: underline; color: #000; font-weight: bold; }

/* ───── marquees ───── */

.marquee-bar { overflow: hidden; background: #000; color: #0f0; font-family: "VT323","Courier New",monospace; font-size: 18px; padding: 2px 0; border-top: 2px solid #333; border-bottom: 2px solid #333; }
.marquee-bar.pink { color: var(--pink); }
.marquee-track { display: inline-block; white-space: nowrap; animation: ml 28s linear infinite; }
.marquee-bar.reverse .marquee-track { animation: mr 32s linear infinite; }
@keyframes ml { 0% { transform: translateX(100vw);} 100% { transform: translateX(-100%);} }
@keyframes mr { 0% { transform: translateX(-100%);} 100% { transform: translateX(100vw);} }

/* ───── $CATOCRACY coin ticker (one tasteful spot, not spam) ───── */
.coin-bar {
  display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: center; justify-content: center;
  font-family: "VT323", monospace; font-size: 16px; color: #000;
  background: var(--yellow); border-bottom: 2px solid #000; padding: 3px 10px;
}
.coin-bar .tick { font-weight: bold; letter-spacing: 1px; }
.coin-bar a { color: #7a0000; font-weight: bold; text-decoration: underline; }
.coin-bar .ca { background: #000; color: #0f0; padding: 0 6px; cursor: pointer; border: 1px solid #0a0; }
.coin-bar .ca:hover { color: var(--yellow); }
.coin-bar .pump { animation: blink 1.1s step-end infinite; }

/* ───── 3-column shell ───── */

.shell {
  display: grid;
  grid-template-columns: 160px minmax(0, 680px) 160px;
  gap: 12px;
  padding: 12px;
  margin: 0 auto;
  justify-content: center;
  align-items: start;
}

/* ───── side gif rails (flow with the page, NOT an inner scrollbox) ───── */

.gif-rail { display: flex; flex-direction: column; gap: 12px; }

/* mobile horizontal gif strip (hidden on desktop) */
.gif-strip { display: none; }

.rail-gif { display: block; text-decoration: none; border: 2px outset #ccc; background: #000; padding: 3px; }
.rail-gif:hover { border-color: var(--yellow); outline: 2px solid var(--pink); }
.rail-gif img { width: 100%; display: block; image-rendering: pixelated; }
.rail-cap { display: block; font-family: "VT323",monospace; font-size: 14px; color: var(--cyan); text-align: center; background: #000; padding: 2px; line-height: 1; }

.rail-banner { font-family: "VT323",monospace; font-size: 15px; color: var(--yellow); background: #000; border: 1px solid var(--pink); padding: 4px; text-align: center; }
.rail-banner.blink { animation: blink 0.8s step-end infinite; }

/* ───── the infinite feed ───── */

#feed { display: flex; flex-direction: column; gap: 12px; }

/* generic 98 window block in the feed */
.feed-win { max-width: 100%; }
.feed-win .window-body { font-size: 13px; line-height: 1.5; padding: 10px; }
.feed-win .window-body h1 { font-size: 15px; margin: 0 0 8px; text-align: center; letter-spacing: 0.5px; }
.feed-win .window-body p { margin: 0 0 8px; }
.feed-win .window-body p:last-child { margin-bottom: 0; }

.feed-win.tilt-l { transform: rotate(-0.7deg); }
.feed-win.tilt-r { transform: rotate(0.8deg); }

/* coloured window variants */
.win-pink .title-bar { background: linear-gradient(90deg,#c0007a,#ff4fd8); }
.win-cyan .title-bar { background: linear-gradient(90deg,#007a8a,#2ff3ff); }
.win-red  .title-bar { background: linear-gradient(90deg,#8a0000,#ff3b3b); }

.terminal { background: #000; color: #0f0; font-family: "VT323",monospace; font-size: 15px; padding: 8px; margin: 8px 0; border: 2px inset #333; line-height: 1.25; }
.terminal .err { color: #f55; } .terminal .dim { color: #0a0; }

.forum { background: #ffffcc; border: 1px solid #800; padding: 8px; margin: 8px 0; font-size: 12px; }
.forum .sig { color: #666; font-size: 10px; border-top: 1px dashed #999; margin-top: 8px; padding-top: 4px; }

.string-board { border: 2px solid #800; background: #1a0a0a; color: #fcc; padding: 10px; margin: 8px 0; font-size: 12px; line-height: 1.5; }
.redacted { background: #000; color: #000; padding: 0 4px; }
.redacted:hover { color: #333; }

.big-line { font-family: "VT323",monospace; font-size: 22px; color: var(--cyan); text-shadow: 2px 2px 0 var(--pink); text-align: center; margin: 4px 0; }
.note { font-size: 11px; color: #035; font-style: italic; }

/* the "cat knows your ip" panel */
.spy-box { background: #001018; border: 2px solid var(--cyan); color: var(--cyan); font-family: "VT323",monospace; font-size: 16px; padding: 10px; line-height: 1.35; }
.spy-box b { color: var(--yellow); }
.spy-box .pulse { animation: blink 1s step-end infinite; }

/* water psyop bar */
.water { background: linear-gradient(#aee9ff,#3aa6ff); border: 2px solid #035; padding: 10px; text-align: center; }
.water .glass { font-size: 40px; }
.water button { font-family: "VT323",monospace; font-size: 18px; margin-top: 6px; padding: 4px 14px; }
.water .ml { font-family: "VT323",monospace; font-size: 18px; color: #024; }

/* infinite conspiracy list rows */
.evi { background: #d6f4ff; border-left: 4px solid var(--pink); padding: 6px 8px; font-size: 13px; }
.evi .num { color: var(--pink); font-weight: bold; font-family: "VT323",monospace; }
.evi .tag { font-size: 10px; background: var(--yellow); border: 1px solid #000; padding: 0 4px; margin-left: 4px; }

/* poll */
.poll-opt { font-size: 13px; margin: 4px 0; cursor: pointer; }
.poll-opt:hover { background: var(--yellow); }
.poll-bar { height: 12px; background: var(--pink); border: 1px solid #000; margin-top: 1px; }

/* inline game card */
.game-card { background: #120024; border: 2px solid var(--pink); padding: 8px; }
.game-card > .game-head { color: var(--cyan); font-family: "VT323",monospace; font-size: 20px; text-align: center; margin-bottom: 6px; }
.game-card .game-blurb { color: #fff; font-size: 12px; text-align: center; margin-bottom: 8px; }

.blink { animation: blink 1s step-end infinite; }
@keyframes blink { 50% { opacity: 0; } }

/* ───── game stage (used inline + window) ───── */

.game-stage { position: relative; width: 100%; max-width: 640px; height: 340px; background: linear-gradient(#1a0030,#4a0050 60%,#ff77c8); border: 2px inset #000; overflow: hidden; font-family: "VT323",monospace; margin: 0 auto; }
.game-hud { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; padding: 2px 6px; color: #fff; font-size: 16px; z-index: 5; text-shadow: 1px 1px 0 #000; }
.tower { position: absolute; bottom: 0; width: 44px; background: #cfd8e8; border: 2px solid #333; border-bottom: none; background-image: repeating-linear-gradient(#cfd8e8 0 6px,#9aa6bd 6px 9px); }
.tower .face { position: absolute; top: 6px; left: 50%; transform: translateX(-50%); font-size: 18px; }
.tower-twin { box-shadow: inset 0 0 0 2px rgba(51,51,51,0.4); }
.tower-twin .antenna { position: absolute; top: -16px; left: 50%; transform: translateX(-50%); width: 3px; height: 16px; background: #888; }
.plane { position: absolute; font-size: 28px; z-index: 4; filter: drop-shadow(1px 1px 0 #000); cursor: crosshair; touch-action: none; padding: 4px; }
.boom { position: absolute; font-size: 30px; z-index: 6; animation: boom 0.5s forwards; pointer-events: none; }
.game-stage { touch-action: manipulation; }
@keyframes boom { from { transform: scale(0.3); opacity: 1;} to { transform: scale(2.2); opacity: 0;} }
.game-over { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; background: rgba(0,0,30,0.9); color: var(--cyan); font-size: 22px; text-align: center; z-index: 10; padding: 10px; overflow-y: auto; }
.float-pts { position: absolute; font-family: "VT323",monospace; color: var(--yellow); pointer-events: none; animation: floatup 0.7s forwards; font-size: 18px; }
@keyframes floatup { from { opacity: 1; transform: translateY(0);} to { opacity: 0; transform: translateY(-40px);} }

.quiz-q { font-size: 15px; margin: 8px 0; min-height: 40px; color: #fff; }
.quiz-opt { display: block; width: 100%; text-align: left; margin: 4px 0; font-family: "VT323",monospace; font-size: 16px; padding: 4px 8px; cursor: pointer; }
.quiz-result { font-family: "VT323",monospace; font-size: 18px; text-align: center; margin-top: 8px; }

.clicker-cat { font-size: 90px; text-align: center; cursor: pointer; user-select: none; transition: transform 0.05s; }
.clicker-cat:active { transform: scale(0.9); }
.clicker-stat { text-align: center; font-family: "VT323",monospace; font-size: 18px; }

/* ── slots (catocracy casino) ── */
.slots-wrap { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 8px; color: #fff; font-family: "VT323",monospace; }
.slots-reels { display: flex; gap: 6px; background: #000; border: 3px ridge var(--yellow); padding: 8px; box-shadow: 0 0 14px var(--yellow); }
.reel { width: 64px; height: 72px; overflow: hidden; background: #fff; border: 2px inset #888; display: flex; align-items: center; justify-content: center; font-size: 44px; }
.reel.spin { animation: reelspin 0.45s linear infinite; }
@keyframes reelspin { 0% { transform: translateY(-6px); } 50% { transform: translateY(6px); } 100% { transform: translateY(-6px); } }
.slots-bal { font-size: 18px; color: var(--yellow); }
.slots-msg { font-size: 17px; min-height: 22px; text-align: center; color: var(--cyan); }
.slots-spin { font-family: "VT323",monospace; font-size: 20px; padding: 4px 22px; }

/* ── eyes of the state (surveillance whack) ── */
.surveil-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; padding: 10px; height: 100%; }
.surveil-cell { display: flex; align-items: center; justify-content: center; font-size: clamp(20px,5vw,34px); background: #1a0030; border: 1px solid #3a1a5a; user-select: none; transition: background 0.1s; }
.surveil-cell.watch { background: #500; box-shadow: inset 0 0 12px #f00; cursor: crosshair; }
.surveil-cell.caught { background: #030; box-shadow: inset 0 0 10px #0f0; }

/* ── 1337 hack terminal ── */
.hack-term { background: #000; color: #0f0; font-family: "VT323",monospace; font-size: 14px; height: 100%; padding: 8px; overflow: hidden; display: flex; flex-direction: column; }
.hack-log { flex: 1; overflow: hidden; line-height: 1.2; white-space: pre-wrap; word-break: break-all; }
.hack-log .ok { color: var(--cyan); } .hack-log .warn { color: var(--yellow); } .hack-log .crit { color: #f55; }
.hack-bar { height: 14px; background: #021; border: 1px solid #0f0; margin: 6px 0; }
.hack-bar > i { display: block; height: 100%; width: 0; background: #0f0; box-shadow: 0 0 8px #0f0; }
.hack-btn { font-family: "VT323",monospace; font-size: 18px; padding: 4px 10px; background: #000; color: #0f0; border: 2px outset #0a0; cursor: pointer; }

/* ── feline broadcast wall (showcases the 100-gif pack) ── */
.gif-wall { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.gif-wall a { display: block; border: 2px outset #555; background: #000; padding: 2px; text-decoration: none; }
.gif-wall a:hover { border-color: var(--yellow); outline: 2px solid var(--pink); }
.gif-wall img { width: 100%; display: block; image-rendering: pixelated; aspect-ratio: 1/1; object-fit: cover; }
@media (max-width: 560px) { .gif-wall { grid-template-columns: repeat(3, 1fr); } .surveil-grid { grid-template-columns: repeat(4, 1fr); } }

/* ── $CATOCRACY rug-pull pump game ── */
.rug-wrap { display: flex; gap: 10px; padding: 10px; height: 100%; color: #fff; font-family: "VT323",monospace; align-items: stretch; }
.rug-meter { width: 56px; background: #000; border: 2px inset #333; position: relative; display: flex; align-items: flex-end; }
.rug-fill { width: 100%; background: linear-gradient(#7CFC00, #0a0); transition: height 0.12s ease-out; box-shadow: 0 0 12px #0f0; }
.rug-fill.dump { background: linear-gradient(#f55, #900); box-shadow: 0 0 12px #f00; }
.rug-side { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.rug-mcap { font-size: 26px; color: var(--yellow); text-shadow: 0 0 6px #fa0; }
.rug-log { flex: 1; font-size: 14px; line-height: 1.25; overflow: hidden; color: var(--cyan); }
.rug-btn { font-family: "VT323",monospace; font-size: 22px; padding: 6px; background: #0a0; color: #000; border: 2px outset #0f0; cursor: pointer; font-weight: bold; }
.rug-btn:active { border-style: inset; }

/* ── femboy-or-fed reuses quiz styling; just the verdict ── */
.fof-card { font-size: 16px; color: #fff; min-height: 70px; background: #1a0030; border: 1px solid var(--pink); padding: 10px; margin: 6px 0; line-height: 1.3; }
.fof-row { display: flex; gap: 8px; }
.fof-row button { flex: 1; }

/* ordo ab felino seal */
.ordo-seal { text-align: center; font-family: "Jacquard 12", serif; font-size: clamp(28px,9vw,56px); color: var(--yellow); letter-spacing: 4px; text-shadow: 0 0 8px var(--pink), 0 0 18px var(--cyan); margin: 4px 0; }
.leet { font-family: "VT323",monospace; color: var(--cyan); letter-spacing: 1px; }
.femboy-box { background: linear-gradient(135deg,#ffd6f5,#d6e9ff); border: 2px solid var(--pink); padding: 8px 10px; margin: 6px 0; color: #5a0044; font-size: 13px; }
.femboy-box b { color: #b0008a; }

/* ── MEWNAMP audio player (winamp-flavored, draggable, compact) ── */
#mewnamp-mount {
  position: fixed; right: 0; bottom: 0; width: 0; height: 0;
  overflow: visible; pointer-events: none; z-index: 9100;
}
.mewnamp {
  position: fixed; right: 10px; bottom: 10px;
  width: 268px; max-width: 92vw;
  height: auto !important; max-height: none !important;
  overflow: hidden; pointer-events: auto;
  font-family: "VT323", monospace; user-select: none;
  box-shadow: 0 0 22px rgba(0,0,0,0.6), 0 0 28px rgba(255,79,216,0.35), inset 0 0 0 1px #000;
  flex: none; align-self: auto;
}
.mewnamp.is-dragging { opacity: 0.95; }
.mewnamp .title-bar {
  background: linear-gradient(90deg,#3a0066 0%,#ff4fd8 45%,#2ff3ff 80%,#ffe600 100%);
  background-size: 200% 100%; animation: mnRainbowBar 6s linear infinite; cursor: move;
  min-height: 18px; padding: 1px 2px 1px 4px;
}
@keyframes mnRainbowBar { from { background-position: 0% 0; } to { background-position: 200% 0; } }
.mewnamp .title-bar-text { font-family: "Pixelated MS Sans Serif","MS Sans Serif",Tahoma,sans-serif; font-size: 11px; letter-spacing: 0.5px; text-shadow: 0 1px 0 rgba(0,0,0,0.6); }
.mewnamp .title-bar-controls button { min-width: 16px; height: 14px; }
.mewnamp .window-body { padding: 4px; background: linear-gradient(180deg,#1a0030,#11001a); overflow: hidden; flex: none; }

/* compact LCD: one screen, 3 stacked rows (top meta · scrolling title · EQ bars) */
.mn-lcd {
  background: #001a06; color: #6cff6c; border: 2px inset #4a4a4a;
  font-family: "VT323", monospace; line-height: 1; position: relative;
  padding: 3px 6px 4px; overflow: hidden;
  text-shadow: 0 0 4px #00ff66; box-shadow: inset 0 0 10px rgba(0,255,80,0.2);
}
.mn-lcd-top { display: flex; justify-content: space-between; align-items: center; font-size: 12px; }
.mn-genre { color: #ffe600; text-shadow: 0 0 4px #fa0; letter-spacing: 1px; max-width: 60%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mn-time { color: #2ff3ff; text-shadow: 0 0 4px #2ff3ff; font-size: 13px; }
.mn-time .sep { color: #6cff6c; margin: 0 2px; opacity: 0.6; }

.mn-title-wrap { overflow: hidden; white-space: nowrap; height: 18px; margin-top: 1px; }
.mn-title { display: inline-block; padding-left: 100%; animation: mnscroll 18s linear infinite; font-size: 15px; }
@keyframes mnscroll { from { transform: translateX(0);} to { transform: translateX(-100%);} }
.mn-paused .mn-title { animation-play-state: paused; opacity: 0.7; }

/* taller, brighter EQ row across the bottom of the LCD */
.mn-bars { display: flex; gap: 2px; align-items: flex-end; height: 16px; margin-top: 2px; }
.mn-bar {
  flex: 1; min-width: 3px;
  background: linear-gradient(to top, #ff4fd8 0%, #ffe600 50%, #6cff6c 100%);
  box-shadow: 0 0 4px #6cff6c; animation: mnbar 0.7s ease-in-out infinite alternate;
}
.mn-bar:nth-child(1)  { animation-duration: .52s; }
.mn-bar:nth-child(2)  { animation-duration: .81s; animation-delay: .05s; }
.mn-bar:nth-child(3)  { animation-duration: .44s; animation-delay: .12s; }
.mn-bar:nth-child(4)  { animation-duration: .76s; animation-delay: .18s; }
.mn-bar:nth-child(5)  { animation-duration: .61s; animation-delay: .03s; }
.mn-bar:nth-child(6)  { animation-duration: .92s; animation-delay: .14s; }
.mn-bar:nth-child(7)  { animation-duration: .48s; animation-delay: .07s; }
.mn-bar:nth-child(8)  { animation-duration: .69s; animation-delay: .19s; }
.mn-bar:nth-child(9)  { animation-duration: .55s; animation-delay: .02s; }
.mn-bar:nth-child(10) { animation-duration: .83s; animation-delay: .11s; }
.mn-bar:nth-child(11) { animation-duration: .47s; animation-delay: .15s; }
.mn-bar:nth-child(12) { animation-duration: .73s; animation-delay: .09s; }
@keyframes mnbar { from { height: 18%; } to { height: 100%; } }
.mn-paused .mn-bar { animation-play-state: paused; height: 12%; opacity: 0.45; }

/* slim seek bar styled as a chunky winamp slider */
.mn-seek { -webkit-appearance: none; appearance: none; width: 100%; height: 10px;
  background: #000; border: 1px inset #555; margin: 4px 0 3px; cursor: pointer; }
.mn-seek::-webkit-slider-runnable-track { height: 10px; background: linear-gradient(90deg, var(--pink) 0%, var(--pink) var(--p,0%), #001a06 var(--p,0%), #001a06 100%); }
.mn-seek::-moz-range-progress { background: var(--pink); height: 10px; }
.mn-seek::-moz-range-track { background: #001a06; height: 10px; }
.mn-seek::-webkit-slider-thumb { -webkit-appearance: none; width: 6px; height: 14px; margin-top: -2px; background: #ffe600; border: 1px solid #000; box-shadow: 0 0 4px #ffe600; cursor: pointer; }
.mn-seek::-moz-range-thumb { width: 6px; height: 14px; background: #ffe600; border: 1px solid #000; box-shadow: 0 0 4px #ffe600; cursor: pointer; border-radius: 0; }

/* one tight control strip — more buttons, smaller */
.mn-controls { display: flex; gap: 2px; align-items: center; margin-top: 1px; }
.mn-btn {
  font-family: "VT323",monospace; font-size: 14px; line-height: 1;
  padding: 2px 0; min-width: 26px; height: 22px;
  background: linear-gradient(#e8e8e8,#a8a8a8); color: #000;
  border: 2px outset #fff; cursor: pointer;
}
.mn-btn:hover { background: linear-gradient(#fff,#c0c0c0); }
.mn-btn:active { border-style: inset; }
.mn-btn.play { background: linear-gradient(#7CFC00,#0a0); color: #000; font-weight: bold; min-width: 34px; box-shadow: 0 0 6px rgba(124,252,0,0.5); }
.mn-btn.play.is-playing { background: linear-gradient(#ffe600,#fa0); }
.mn-btn.stop { background: linear-gradient(#ff8888,#a00); color: #fff; }
.mn-btn.on { background: linear-gradient(#2ff3ff,#0a8); color: #000; box-shadow: 0 0 5px rgba(47,243,255,0.6); }

.mn-vol-wrap { display: flex; align-items: center; gap: 3px; flex: 1; margin-left: 3px; }
.mn-vol { flex: 1; -webkit-appearance: none; appearance: none; height: 8px; background: #000; border: 1px inset #555; cursor: pointer; }
.mn-vol::-webkit-slider-runnable-track { height: 8px; background: linear-gradient(90deg, var(--cyan) 0%, var(--cyan) var(--p,55%), #001a06 var(--p,55%), #001a06 100%); }
.mn-vol::-moz-range-progress { background: var(--cyan); height: 8px; }
.mn-vol::-moz-range-track { background: #001a06; height: 8px; }
.mn-vol::-webkit-slider-thumb { -webkit-appearance: none; width: 8px; height: 12px; margin-top: -2px; background: var(--pink); border: 1px solid #fff; cursor: pointer; }
.mn-vol::-moz-range-thumb { width: 8px; height: 12px; background: var(--pink); border: 1px solid #fff; cursor: pointer; border-radius: 0; }

@media (max-width: 560px) {
  .mewnamp { right: 6px; bottom: 6px; width: 248px; }
  .mn-title { font-size: 14px; }
}

/* ───── floating draggable windows (popups) ───── */

#windows-layer { position: fixed; inset: 0; pointer-events: none; z-index: 200; }
.doc-window { position: absolute; pointer-events: auto; max-width: min(520px, 94vw); }
.doc-window.is-hidden { display: none; }
.doc-window.is-dragging { opacity: 0.94; }
.doc-window .window-body { max-height: 72vh; overflow-y: auto; padding: 10px; font-size: 13px; line-height: 1.45; }
.doc-window .window-body h1 { font-size: 15px; text-align: center; margin: 0 0 10px; }
.doc-gif { float: left; width: 120px; margin: 0 10px 8px 0; border: 1px solid #000; image-rendering: pixelated; }
.doc-links { margin-top: 10px; font-size: 11px; font-family: "VT323",monospace; color: #444; }

/* ───── footer ───── */

.site-footer { text-align: center; padding: 1em; background: var(--aqua); font-size: 11px; margin-top: 8px; border-top: 2px solid #000; }

/* ───── eggs ───── */

.bsod-overlay { display: none; position: fixed; inset: 0; z-index: 99999; background: #0000aa; color: #fff; font-family: "VT323",monospace; font-size: 18px; padding: 40px; }
.bsod-overlay.active { display: block; }
.win-update-overlay { display: none; position: fixed; inset: 0; z-index: 99998; background: rgba(0,0,0,0.5); align-items: center; justify-content: center; }
.win-update-overlay.active { display: flex; }

/* ───── flashy fx ───── */

.glow { animation: glow 1.4s ease-in-out infinite alternate; }
@keyframes glow {
  from { text-shadow: 0 0 4px #fff, 0 0 10px var(--cyan), 2px 2px 0 var(--pink); }
  to { text-shadow: 0 0 8px #fff, 0 0 22px var(--pink), 0 0 34px var(--pink), 2px 2px 0 var(--cyan); }
}

.glitch { position: relative; animation: glitch 2.6s infinite; }
@keyframes glitch {
  0%, 90%, 100% { transform: translate(0); }
  91% { transform: translate(-2px, 1px); text-shadow: 2px 0 #0ff, -2px 0 #f0f; }
  93% { transform: translate(2px, -1px); text-shadow: -2px 0 #0ff, 2px 0 #f0f; }
  95% { transform: translate(-1px, 1px); }
  97% { transform: translate(1px, -1px); text-shadow: 2px 0 #ff0, -2px 0 #0ff; }
}

.rainbow-border { position: relative; z-index: 0; }
.rainbow-border::before {
  content: ""; position: absolute; inset: -3px; z-index: -1;
  background: linear-gradient(45deg, #ff004c, #ffae00, #33ff00, #00fff7, #5e00ff, #ff00c8, #ff004c);
  background-size: 400% 400%;
  animation: rainbowmove 4s linear infinite;
}
@keyframes rainbowmove { 0% { background-position: 0% 50%; } 100% { background-position: 400% 50%; } }

.stamp {
  display: inline-block; float: right; transform: rotate(11deg);
  border: 3px double #d00; color: #d00; font-family: "VT323", monospace;
  font-size: 18px; padding: 0 8px; letter-spacing: 1px; margin: -2px -2px 4px 8px;
  animation: stamppulse 1.1s steps(2, jump-none) infinite;
}
@keyframes stamppulse { 50% { opacity: 0.35; } }

.real-badge {
  display: inline-block; background: #0a0; color: #fff;
  font-family: "VT323", monospace; font-size: 12px; padding: 0 5px;
  border: 1px solid #fff; margin: 0 2px; animation: blink 1s step-end infinite;
}

.flash-divider {
  text-align: center; font-family: "VT323", monospace; font-size: 18px;
  color: var(--yellow); background: #000; padding: 4px;
  border-top: 2px solid var(--pink); border-bottom: 2px solid var(--cyan);
  letter-spacing: 1px; overflow: hidden; white-space: nowrap;
}
.flash-divider span { animation: blink 0.7s step-end infinite; }

.end-card { text-align: center; padding: 24px 14px; }
.end-card .big-line { font-size: clamp(20px, 6vw, 32px); }
.end-card p { font-size: 13px; line-height: 1.5; }

/* animated sparkle overlay (sits above everything, never blocks clicks) */
.sparkle-overlay {
  position: fixed; inset: 0; z-index: 8500; pointer-events: none;
  background-image: url("assets/img/sparkle-overlay.gif");
  background-repeat: repeat; background-size: 720px 480px;
  mix-blend-mode: screen; opacity: 0.85;
}

/* cursor word-trail */
.meow-trail {
  position: fixed; z-index: 999999; pointer-events: none; white-space: nowrap;
  font: 700 16px "Comic Sans MS", "Trebuchet MS", sans-serif; color: #ffff00;
  text-shadow: 2px 0 #000, -2px 0 #000, 0 2px #000, 0 -2px #000, 0 0 8px #ff00cc;
  transform: translate(-50%, -50%);
  animation: meowTrailFloat 850ms linear forwards;
}
@keyframes meowTrailFloat {
  0% { opacity: 1; transform: translate(-50%, -50%) scale(1) rotate(-3deg); }
  100% { opacity: 0; transform: translate(-50%, -105%) scale(.72) rotate(8deg); }
}

@media (max-width: 1040px) {
  .shell { grid-template-columns: minmax(0,1fr); padding: 8px; }
  .gif-rail { display: none; }

  /* keep the gifs always visible: sticky horizontal strip under the marquees */
  .gif-strip {
    display: flex; gap: 8px; align-items: center;
    position: sticky; top: 0; z-index: 60;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    padding: 6px 8px; background: #000;
    border-bottom: 2px solid var(--pink);
    scrollbar-width: thin; scrollbar-color: var(--cyan) #000;
  }
  .gif-strip::-webkit-scrollbar { height: 5px; }
  .gif-strip::-webkit-scrollbar-thumb { background: var(--cyan); }
  .gif-strip .rail-gif { flex: 0 0 auto; width: 84px; border-width: 1px; }
  .gif-strip .rail-gif img { width: 84px; }
  .gif-strip .rail-cap { font-size: 12px; }
  .gif-strip .strip-label { flex: 0 0 auto; color: var(--yellow); font-family: "VT323", monospace; font-size: 14px; white-space: nowrap; animation: blink 0.9s step-end infinite; }
}

@media (max-width: 560px) {
  .site-title { font-size: 2.2rem; }
  .marquee-bar { font-size: 15px; }
  .feed-win .window-body { font-size: 12px; }
  .doc-gif { width: 90px; float: none; display: block; margin: 0 auto 8px; }
  .game-stage { height: 280px; }
}