:root {
  --pink: #ff2e88;
  --lilac: #b9a4ff;
  --xp-blue: #245edb;
  --slab: #ff8a50;
  --ink: #000;
  --paper: #f4f1ea;
  --stick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Ccircle cx='9' cy='9' r='7.5' fill='%23ffd6ec' stroke='%23ff2e88' stroke-width='2'/%3E%3Cpath d='M9 5.5l1 2.2 2.4.2-1.8 1.6.6 2.4L9 10.6 6.8 11.9l.6-2.4L5.6 7.9 8 7.7z' fill='%23ff2e88'/%3E%3Crect x='14' y='14' width='5' height='17' rx='2' transform='rotate(-45 16.5 22.5)' fill='%23222'/%3E%3C/svg%3E") 4 4, auto;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--ink);
  color: #fff;
  overflow-x: hidden;
}

body {
  cursor: var(--stick);
  font-family: Tahoma, "Segoe UI", sans-serif;
}

a, button, .tv-screen, .pc { cursor: var(--stick); }

/* ---------- layers & pieces ---------- */
.layer {
  position: relative;
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}
.layer-desktop { height: max(100vh, 780px); }
.layer-wall    { height: 820px; }
.layer-floor   { height: 860px; }

.piece {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w, auto);
  transform: rotate(var(--r, 0deg));
  z-index: 2;
}
[data-drag] { touch-action: none; }

.bg-hangul {
  position: absolute;
  left: var(--x);
  top: var(--y);
  font-family: "Black Han Sans", sans-serif;
  font-size: var(--s);
  line-height: 1;
  color: #fff;
  opacity: .07;
  pointer-events: none;
  white-space: nowrap;
  z-index: 0;
}

/* ---------- CRT TV ---------- */
.tv-body {
  background: linear-gradient(160deg, #e9e6dc, #bdb8aa 60%, #8f8a7d);
  border-radius: 34px 34px 28px 28px;
  padding: 22px 22px 34px;
  box-shadow: inset -6px -8px 0 rgba(0,0,0,.18), inset 4px 4px 0 rgba(255,255,255,.6), 0 10px 30px rgba(0,0,0,.6);
  position: relative;
}
.tv-screen {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 22px / 28px;
  overflow: hidden;
  background: #111;
  box-shadow: inset 0 0 0 6px #2b2a27, inset 0 0 40px rgba(0,0,0,.9);
}
.tv-screen canvas, .tv-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  image-rendering: pixelated;
}
.tv-img { background: center / cover no-repeat; opacity: 0; }
.tv-img.show { opacity: 1; }
.tv-vid { width: 100%; height: 100%; object-fit: cover; }
/* MV clips: a 16:9 player covers the 4:3 tube (160% × 120%, same crop as
   before). The embed is laid out thousands of pixels wide and scaled down to
   that, so YouTube's title and logo — drawn in CSS pixels — shrink off the
   glass. Taps go to the TV, not YouTube. */
.tv-yt { overflow: hidden; container-type: inline-size; }
.tv-yt iframe {
  --layout-w: 9600px;
  --overscan: 1.2; /* visual size: 160% wide, 120% tall */
  position: absolute;
  width: var(--layout-w) !important;
  height: calc(var(--layout-w) * 9 / 16) !important;
  left: calc((1 - 4 / 3 * var(--overscan)) / 2 * 100%) !important;
  top: calc((1 - var(--overscan)) / 2 * 100%) !important;
  right: auto !important;
  bottom: auto !important;
  border: 0;
  transform: scale(calc(100cqw * 4 / 3 * var(--overscan) / var(--layout-w)));
  transform-origin: 0 0;
  pointer-events: none;
}
.tv-screen::after { /* scanlines + glass */
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 20%, rgba(255,255,255,.18), transparent 50%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.28) 0 1px, transparent 1px 3px);
  pointer-events: none;
}
.tv-label {
  position: absolute; top: 8px; right: 12px;
  font-family: "VT323", monospace;
  font-size: 22px;
  color: #7dff7d;
  text-shadow: 0 0 6px #7dff7d;
  z-index: 2;
}
.tv-brand {
  position: absolute; bottom: 9px; left: 50%;
  transform: translateX(-50%);
  font: bold 10px/1 Tahoma, sans-serif;
  letter-spacing: 4px;
  color: #6c685d;
}

/* ---------- ask box ---------- */
.askbox {
  background: #fff;
  border-radius: 10px;
  padding: 14px 16px 10px;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
  color: #6b78c9;
}
.askbox input {
  width: 100%;
  text-indent: 26px; /* clears the left tape strip */
  border: 0;
  border-bottom: 1px solid #d6dbf5;
  font: 15px Tahoma, sans-serif;
  color: #333;
  padding: 4px 0 8px;
  outline: none;
  background: transparent;
}
.askbox input::placeholder { color: #8b96d8; }
.ask-q { font-style: italic; color: #555; word-break: break-word; }
.askbox .askbox-send {
  all: unset;
  display: block;
  width: 100%;
  text-align: center;
  font: 13px Tahoma, sans-serif;
  padding-top: 8px;
  color: #6b78c9;
}
.askbox .askbox-send:hover { color: var(--pink); }
.askbox .askbox-send { cursor: pointer; }
.tape {
  position: absolute;
  width: 74px; height: 22px;
  background: repeating-linear-gradient(90deg, #1b1b1b 0 6px, #2c2c2c 6px 8px);
  opacity: .95;
}
.tape-l { left: -24px; top: -6px; transform: rotate(30deg); }
.tape-r { right: -26px; top: -2px; transform: rotate(32deg); }

/* ---------- minimized windows (script.js) ---------- */
.piece.minimized > :not(.title-bar) { display: none !important; }
.piece.minimized { height: auto !important; }

/* ---------- macOS TextEdit (Aqua-era) ---------- */
.mac-window {
  border-radius: 8px 8px 4px 4px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,.5), 0 16px 40px rgba(0,0,0,.7);
  background: #fff;
}
.mac-titlebar {
  position: relative;
  height: 24px;
  display: flex;
  align-items: center;
  background:
    repeating-linear-gradient(0deg, rgba(255,255,255,.35) 0 1px, transparent 1px 2px),
    linear-gradient(#ececec, #c9c9c9);
  border-bottom: 1px solid #8e8e8e;
  cursor: grab;
}
.lights { display: flex; gap: 7px; padding-left: 9px; z-index: 1; }
.lights i {
  width: 13px; height: 13px; border-radius: 50%;
  box-shadow: inset 0 -2px 3px rgba(0,0,0,.25), 0 0 0 .5px rgba(0,0,0,.5);
  position: relative;
}
.lights i::after {
  content: ""; position: absolute; left: 3px; top: 1px;
  width: 7px; height: 4px; border-radius: 50%;
  background: rgba(255,255,255,.75);
}
.l-red    { background: radial-gradient(circle at 50% 70%, #ff8a80, #d8281f); }
.l-yellow { background: radial-gradient(circle at 50% 70%, #ffe37a, #d99a0b); }
.l-green  { background: radial-gradient(circle at 50% 70%, #a3f08a, #3c9b22); }
.mac-title {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  font: 13px "Lucida Grande", "Helvetica Neue", sans-serif;
  color: #222;
  text-shadow: 0 1px 0 rgba(255,255,255,.7);
  pointer-events: none;
}
.mac-ruler {
  height: 22px;
  background: linear-gradient(#f6f6f6, #e3e3e3);
  border-bottom: 1px solid #bbb;
  padding: 0 20px;
}
.mac-ruler span {
  display: block; height: 100%;
  background: repeating-linear-gradient(90deg, #999 0 1px, transparent 1px 10px) bottom / 100% 5px no-repeat,
              repeating-linear-gradient(90deg, #666 0 1px, transparent 1px 50px) bottom / 100% 10px no-repeat;
}
.mac-body {
  height: 340px;
  overflow: auto;
  padding: 18px 24px;
  background:
    linear-gradient(rgba(255,255,255,.88), rgba(255,255,255,.88)),
    radial-gradient(circle at 70% 60%, var(--lilac), transparent 55%),
    radial-gradient(circle at 25% 30%, #ffc2df, transparent 50%);
}
.typed {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: 14px/1.9 Monaco, Menlo, monospace;
  color: #111;
  text-align: center;
  white-space: pre-wrap;
  min-height: 100%;
  outline: none;
  cursor: text;
}
.typed:focus::after { display: none; } /* the real caret takes over */
.typed::after {
  content: "";
  display: inline-block;
  width: 1px; height: 1.1em;
  background: #111;
  vertical-align: -3px;
  animation: blink 1s steps(1) infinite;
}
@keyframes blink { 50% { opacity: 0; } }

/* ---------- XP windows ---------- */
.window { color: #000; }
.window .title-bar { cursor: grab; }
.sysmsg .window-body { margin: 10px; }
.links { display: flex; gap: 12px; justify-content: center; margin: 6px 0 14px; }
.link-ico {
  width: 48px; height: 48px;
  display: grid; place-items: center;
  border-radius: 50%;
  font: bold 22px Tahoma, sans-serif;
  text-decoration: none;
  color: #fff;
  background: #1d9bf0;
  box-shadow: inset 0 -3px 0 rgba(0,0,0,.2);
}
.link-ico:nth-child(2) { background: #1db954; }
.link-ico:nth-child(3) { background: radial-gradient(circle at 30% 110%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285aeb 90%); font-size: 26px; }
.link-ico:hover { transform: scale(1.12) rotate(-6deg); }
.sysmsg-btns { display: flex; gap: 8px; justify-content: center; }

.error-cascade { position: absolute; left: var(--x); top: var(--y); z-index: 2; }
.err {
  position: absolute;
  width: 230px;
}
.err .window-body { margin: 8px 10px; }
.err-row { display: flex; gap: 10px; align-items: center; margin: 8px 0 12px; font-size: 12px; }
.err-ico {
  flex: none;
  width: 28px; height: 28px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #ff8a7a, #c4120c);
  color: #fff; font: bold 18px/28px Tahoma, sans-serif; text-align: center;
  box-shadow: 0 1px 2px rgba(0,0,0,.4);
}
.err-btns { text-align: center; }
.err.spawned { position: fixed; animation: pop .14s ease-out; }
@keyframes pop { from { transform: scale(.6); opacity: 0; } }

.player .window-body { margin: 0; background: #0b0b18; padding: 10px; }
.viz {
  height: 56px;
  display: flex; align-items: flex-end; gap: 3px;
  padding: 4px;
  background: #000;
  border: 1px solid #2a2a4a;
  margin-bottom: 8px;
}
.viz i {
  flex: 1;
  background: linear-gradient(to top, var(--pink), var(--lilac));
  height: 30%;
  animation: viz 0.9s ease-in-out infinite alternate;
}
.viz i:nth-child(3n)   { animation-duration: .6s; }
.viz i:nth-child(4n+1) { animation-duration: 1.2s; animation-delay: -.3s; }
.viz i:nth-child(5n+2) { animation-duration: .75s; animation-delay: -.5s; }
@keyframes viz { to { height: 95%; } }
/* YouTube's embed rules ask for a player at least 200px tall, and a hidden or
   tiny iframe stops playback, so the embed stays full-size in the layout.
   The visualizer sits on top of it: audio only, no picture. */
.mini { position: relative; height: 200px; margin-bottom: 8px; background: #000; border: 1px solid #2a2a4a; overflow: hidden; }
.mini .viz { position: absolute; inset: 0; z-index: 1; height: 100%; margin: 0; border: 0; }
.mini iframe { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; border: 0; }
.mini:not(.on) iframe { visibility: hidden; }
.mp-controls { display: flex; align-items: center; gap: 4px; margin-bottom: 8px; }
.mp-controls button { min-width: 0; padding: 0 8px; height: 24px; font-size: 13px; }
.mp-shuffle[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--pink); }
.mp-now {
  flex: 1; min-width: 0; margin-left: 4px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font: 17px "VT323", monospace; color: #c8ccff;
}
.tracks {
  max-height: 210px;
  overflow-y: auto;
  margin: 0; padding: 0; list-style: none;
  font: 18px/1.15 "VT323", monospace;
  color: #9fa3ff;
  counter-reset: t;
}
.tracks li {
  cursor: var(--stick);
  display: flex; gap: 8px;
  padding: 3px 6px;
  counter-increment: t;
}
.tracks li::before { content: counter(t, decimal-leading-zero); opacity: .5; }
.tracks li b { font-weight: normal; color: #fff; }
.tracks li span { margin-left: auto; opacity: .7; }
.tracks li.on { background: var(--pink); color: #fff; }
.tracks li.on::before { content: "▶"; opacity: 1; }
.tracks li:hover { outline: 1px dotted var(--lilac); }

/* ---------- allkpop news ---------- */
.newsbox { box-shadow: 0 14px 30px rgba(0,0,0,.6); }
.newsbox .window-body { margin: 0; background: #fff; }
.news-head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 6px 10px;
  background: linear-gradient(#fdfdfd, #dde6f7);
  border-bottom: 1px solid #a8b8d8;
  font-size: 12px; color: #1a3a78;
}
.news-list {
  height: 196px;
  overflow-y: auto;
  margin: 0; padding: 0; list-style: none;
  font: 12px Tahoma, sans-serif;
}
.news-list li { border-bottom: 1px solid #eef1f7; }
.news-list a {
  display: flex; gap: 10px; align-items: baseline;
  padding: 5px 10px;
  color: #111; text-decoration: none;
  cursor: var(--stick);
}
.news-list a:hover { background: #316ac5; color: #fff; }
.news-list time { flex: none; width: 52px; color: #8a93a8; font-size: 11px; }
.news-list a:hover time { color: #cfe0ff; }
.news-list .fresh { font-weight: bold; }
.news-list .fresh::before { content: "✉ "; color: var(--pink); }

/* ---------- stickers / bits ---------- */
.sticker {
  font: 34px/1 "Black Han Sans", sans-serif;
  color: var(--pink);
  background: #fff;
  padding: 8px 14px 6px;
  border-radius: 999px;
  border: 3px solid var(--pink);
  box-shadow: 4px 4px 0 var(--lilac);
  cursor: grab;
  white-space: nowrap;
  user-select: none;
}
.sticker-b { color: #000; background: #c8ff3d; border-color: #000; box-shadow: 4px 4px 0 #000; }
.kaomoji { font-size: 22px; color: #fff; opacity: .8; font-family: Menlo, monospace; }

/* ---------- watch party ---------- */
/* Normally two tilted collage windows. The fullscreen button adds .theater:
   the section covers the whole screen (real fullscreen where the browser
   allows it, a fixed overlay elsewhere, e.g. on iPhone) with TV and chat side
   by side, or stacked on tall screens; the video is the largest 16:9 box
   that fits. --app-h/--app-top follow the visible viewport, so the chat input
   stays on screen when a phone keyboard opens. */
.layer-party { height: max(min(100vh, 860px), 640px); }
.layer-party .kpoptv { box-shadow: 0 16px 40px rgba(0,0,0,.7); }
.kpoptv .window-body { margin: 0; background: #0b0b18; padding: 8px; color: #fff; }
.tv-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  container-type: inline-size;
}
.msn { height: min(620px, calc(100% - 40px)); }

.layer-party.theater {
  position: fixed; left: 0; right: 0;
  top: var(--app-top, 0px);
  z-index: 9800; /* above the taskbar, ticker and pop-ups */
  max-width: none;
  width: 100%;
  height: var(--app-h, 100dvh);
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) clamp(290px, 24vw, 440px);
  grid-template-rows: minmax(0, 1fr);
  gap: 14px;
  padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right))
           max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  background: #000;
  overflow: hidden;
}
.layer-party.theater .bg-hangul { display: none; }
.layer-party.theater { align-items: stretch; justify-items: stretch; } /* beats the phone layout's centring */
.theater .msn-log { min-height: 0; }
html.theater-open, html.theater-open body { overflow: hidden; }
.theater .piece {
  position: relative;
  left: auto !important; top: auto !important; /* ignore dragged spots */
  width: auto;
  transform: none;
  min-height: 0;
}
.theater .msn { height: auto; }
.theater .kpoptv { display: flex; flex-direction: column; }
.theater .kpoptv .window-body { flex: 1; min-height: 0; display: flex; flex-direction: column; }
.theater .tv-stage { flex: 1; min-height: 0; container-type: size; display: grid; place-items: center; }
.theater .tv-frame { width: min(100cqw, 100cqh * 16 / 9); }
/* Tall screens (phones, portrait tablets): TV on top, chat fills the rest */
@media (max-aspect-ratio: 5/4) {
  .layer-party.theater {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
    padding: max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right))
             max(8px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }
  .theater .kpoptv .window-body, .theater .tv-stage { flex: none; }
  .theater .kpoptv .window-body { padding: 6px; }
  .theater .tv-stage { container-type: normal; display: block; }
  .theater .tv-frame { width: 100%; }
  .theater .np-next { display: none; }
}
/* Keyboard open on a phone: give the chat the room, keep a smaller TV */
.theater.kb .kpoptv .title-bar, .theater.kb .np-bar, .theater.kb .np-next { display: none; }
.theater.kb .tv-frame { width: min(100%, 30vh * 16 / 9); margin: 0 auto; }
.theater .msn { min-height: 0; }
.theater .msn-top { padding: 6px 10px; }
.np-full { margin-left: auto; min-width: 0; padding: 0 8px; font-size: 12px; white-space: nowrap; }

.tv-frame #yt, .tv-static {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: 0;
}
/* YouTube draws its title, spinner and end cards in CSS pixels, on top of a
   video that fills the frame. Lay the embed out at a fixed wide size and
   scale it down onto the tube: the chrome shrinks away, the picture still
   covers the screen, and the layout size stays inside what the browser will
   paint. .tv-frame clips the overflow. Inline sizes from the IFrame API lose. */
.tv-frame iframe {
  --layout-w: 12000px;
  --overscan: 1.18;
  position: absolute;
  width: var(--layout-w) !important;
  height: calc(var(--layout-w) * 9 / 16) !important;
  left: calc((1 - var(--overscan)) / 2 * 100%) !important;
  top: calc((1 - var(--overscan)) / 2 * 100%) !important;
  right: auto !important;
  bottom: auto !important;
  border: 0;
  transform: scale(calc(100cqw / var(--layout-w) * var(--overscan)));
  transform-origin: 0 0;
  pointer-events: none; /* no pausing/seeking: it's live TV */
}
.tv-static { image-rendering: pixelated; z-index: 1; }
/* Phones and tablets: YouTube picks the video quality from the player's
   layout size, and thousands of pixels wide means 4K, which an iPhone tab
   can't hold in memory. Lay both embeds out smaller there; the title chrome
   still shrinks, just not as far. */
@media (max-width: 760px), (pointer: coarse) {
  .tv-frame iframe, .tv-yt iframe { --layout-w: 640px; }
}
.tv-frame::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
}
.tv-msg {
  position: absolute; left: 50%; top: 50%; z-index: 3;
  transform: translate(-50%, -50%);
  margin: 0; padding: 6px 12px;
  background: #000; color: #7dff7d;
  font: 22px "VT323", monospace;
}
.kpoptv .unmute {
  position: absolute; left: 12px; bottom: 12px; z-index: 4;
  min-width: 0;
  font-size: 13px;
  padding: 6px 12px;
}
.np {
  display: flex; gap: 12px; align-items: baseline;
  margin-top: 8px;
  font: 20px/1.1 "VT323", monospace;
}
.np-live { color: var(--pink); animation: blink 1.4s steps(1) infinite; }
.np-title { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.np-time { color: #9fa3ff; }
.np-bar { height: 4px; background: #222244; margin-top: 6px; }
.np-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--pink), var(--lilac)); }
.np-next { margin: 6px 0 0; font: 16px "VT323", monospace; color: #8a8fc9; }

/* MSN Messenger-ish chat */
.msn {
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid #7a96c9;
  border-radius: 8px;
  overflow: visible;
  box-shadow: 0 16px 40px rgba(0,0,0,.7);
  color: #1b1b1b;
  font: 13px Tahoma, "Segoe UI", sans-serif;
}
.msn-top {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px;
  border-radius: 8px 8px 0 0;
  background: linear-gradient(#e9f2ff, #b8d1f3);
  border-bottom: 1px solid #8aa8d6;
  cursor: grab;
}
.msn-top b { display: block; color: #1a3a78; }
.msn-top small { color: #4d6aa3; }
.msn-buddy {
  width: 30px; height: 30px; flex: none;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 30%, #9cff7a 30%, #3a9b1f 31%, #3a9b1f 45%, transparent 46%),
              radial-gradient(ellipse at 50% 95%, #9cff7a 40%, #3a9b1f 41%, #3a9b1f 55%, transparent 56%);
}
.msn-count { margin-left: auto; color: #1a3a78; font-size: 12px; white-space: nowrap; }
.msn-log {
  flex: 1;
  overflow-y: auto;
  padding: 8px 12px;
  background: linear-gradient(#fff, #f3f7ff);
}
.msn-log p { margin: 0 0 6px; line-height: 1.5; overflow-wrap: anywhere; }
.msn-log time { color: #9aa; font-size: 11px; margin-right: 6px; }
.msn-log .sys { color: #7a7fa8; font-style: italic; }
.emote { height: 28px; vertical-align: middle; margin: -4px 1px; }
.msn-name, .msn-send {
  position: relative;
  padding: 10px 12px;
  border-top: 1px solid #c5d5ee;
  background: #eef4fd;
  border-radius: 0 0 8px 8px;
}
.msn-name label { display: block; margin-bottom: 6px; color: #1a3a78; }
.msn-name div, .msn-send { display: flex; gap: 6px; }
.msn-name[hidden], .msn-send[hidden] { display: none; }
.msn-name .legal-note { display: block; margin-top: 5px; font-size: 10px; color: #4a5a78; }
.msn-name .legal-note a { color: #1a3a78; }
.msn input { flex: 1; min-width: 0; height: 28px; font-size: 13px; }
.msn button { min-width: 0; }
.emote-btn { font-size: 18px; padding: 0 8px; }
.emote-pop {
  position: absolute; left: 8px; right: 8px; bottom: calc(100% + 6px);
  background: #fff;
  border: 1px solid #7a96c9;
  border-radius: 6px;
  box-shadow: 0 10px 24px rgba(0,0,0,.35);
  padding: 8px;
  z-index: 5;
}
.emote-pop .emote-search { width: 100%; margin-bottom: 6px; }
.emote-tabs { display: flex; gap: 4px; margin-bottom: 6px; }
.emote-tabs button { min-width: 0; min-height: 0; padding: 2px 10px; border-radius: 999px; font-size: 12px; }
.emote-tabs button.on { background: #ff2e88; color: #fff; border-color: #c41866; box-shadow: none; }
.emote-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
}
.emote-grid button {
  height: 40px; padding: 2px;
  display: grid; place-items: center;
}
.emote-grid img { max-width: 100%; max-height: 32px; }

/* ---------- layer 2 ---------- */
.ph {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  text-align: center;
  font: 20px "VT323", monospace;
  color: #000;
  mix-blend-mode: difference;
  filter: invert(1);
}
.loaded .ph { display: none; }

.cutout {
  height: 680px;
  background:
    radial-gradient(circle, #fff 1.2px, transparent 1.6px) 0 0 / 7px 7px,
    #000;
  -webkit-mask: radial-gradient(ellipse 48% 50% at 50% 50%, #000 70%, transparent 71%);
  mask: radial-gradient(ellipse 48% 50% at 50% 50%, #000 70%, transparent 71%);
}
.cutout.loaded {
  background: var(--img) center / cover no-repeat;
  filter: grayscale(1) contrast(9) brightness(1.1);
  -webkit-mask: none; mask: none;
}

.shout {
  height: 300px;
  overflow: hidden;
  background: var(--slab);
}
.shout-inner {
  font: 900 18px/1.15 Arial Black, Arial, sans-serif;
  color: #1a0d00;
  text-align: right;
  padding-right: 10px;
  animation: shout 14s linear infinite;
}
@keyframes shout { to { transform: translateY(-50%); } }

.binder {
  background: linear-gradient(135deg, #ffc8e3, #ff9ccc);
  border-radius: 14px;
  padding: 22px 22px 22px 46px;
  box-shadow: 0 20px 40px rgba(0,0,0,.6), inset 0 0 0 2px rgba(255,255,255,.5);
}
.binder-rings {
  position: absolute; left: 12px; top: 0; bottom: 0;
  display: flex; flex-direction: column; justify-content: space-around;
}
.binder-rings i {
  width: 22px; height: 22px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #fff, #aaa 50%, #555);
  box-shadow: 0 2px 3px rgba(0,0,0,.4);
}
.binder-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.pc {
  aspect-ratio: 55 / 85;
  perspective: 700px;
  background: rgba(255,255,255,.4);
  border-radius: 6px;
  padding: 3px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.8);
}
.pc-inner {
  position: relative;
  width: 100%; height: 100%;
  transform-style: preserve-3d;
  transition: transform .5s cubic-bezier(.3,1.4,.6,1);
}
.pc.flipped .pc-inner { transform: rotateY(180deg); }
.pc-front, .pc-back {
  position: absolute; inset: 0;
  border-radius: 5px;
  backface-visibility: hidden;
  overflow: hidden;
}
.pc-front { background: #fff; }

/* Member card face (cards.js): group colours, a big monogram, name strip.
   A real photo (assets/pc/...) replaces the monogram when one exists. */
.pc-face {
  position: absolute; inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.55), transparent 40%),
    repeating-linear-gradient(45deg, rgba(255,255,255,.08) 0 6px, transparent 6px 12px),
    linear-gradient(160deg, var(--c1), var(--c2));
  container-type: inline-size;
}
.pc-face.has-img { background: var(--img) center / cover; }
.pc-face.has-img .pc-mono { display: none; }
.pc-mono {
  position: absolute; left: 0; right: 0; top: 14%;
  text-align: center;
  font: 58cqw/1 "Black Han Sans", sans-serif;
  color: rgba(255,255,255,.8);
  text-shadow: 0 3px 0 rgba(0,0,0,.15);
}
.pc-name, .pc-group {
  position: absolute; left: 0; right: 0;
  padding: 0 6%;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pc-name {
  bottom: 13%;
  font: 21cqw/1 "Nanum Pen Script", cursive;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.pc-group {
  bottom: 0;
  padding-top: 2%; padding-bottom: 3%;
  font: bold max(9px, 8.5cqw)/1.3 Tahoma, sans-serif;
  letter-spacing: .5px;
  color: #222;
  background: rgba(255,255,255,.85);
}
.pc-front::after { /* holo */
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(115deg,
      transparent 20%, #ff9de2 35%, #9dfcff 45%, #fffb9d 55%, #b39dff 65%, transparent 80%)
      calc(var(--mx, 50) * 1%) 0 / 300% 100%;
  mix-blend-mode: color-dodge;
  opacity: 0;
  transition: opacity .2s;
}
.pc:hover .pc-front::after { opacity: .75; }
.pc-back {
  transform: rotateY(180deg);
  background: var(--paper);
  color: #2a2a2a;
  font: 21px/1.05 "Nanum Pen Script", cursive;
  padding: 10px 8px;
  display: flex; align-items: center; text-align: center;
}

/* the framed painting hanging on the wall */
.painting { margin: 0; padding-top: 34px; }
.painting::before { /* nail and wire */
  content: "";
  position: absolute; top: 0; left: 50%;
  width: 46%; height: 36px;
  transform: translateX(-50%);
  background:
    radial-gradient(circle at 50% 3px, #ddd 2px, #777 3px, transparent 3.5px),
    linear-gradient(to top right, transparent calc(50% - 1px), #bbb 50%, transparent calc(50% + 1px)) left / 50% 100% no-repeat,
    linear-gradient(to top left, transparent calc(50% - 1px), #bbb 50%, transparent calc(50% + 1px)) right / 50% 100% no-repeat;
}
.painting-frame {
  display: block;
  padding: 14px;
  background: linear-gradient(135deg, #2b2b2b, #0c0c0c 40%, #1e1e1e);
  border-radius: 2px;
  box-shadow: inset 0 0 0 1px #444, 0 18px 40px rgba(0,0,0,.75), 0 0 50px rgba(255,214,170,.12);
  transition: transform .25s;
}
.painting-frame:hover { transform: scale(1.03) rotate(-1deg); }
.painting img {
  display: block; width: 100%; height: auto;
  border: 6px solid #f4efe6; /* mat */
  box-shadow: inset 0 0 8px rgba(0,0,0,.4);
}
.painting figcaption {
  width: max-content; max-width: 90%;
  margin: 12px auto 0;
  padding: 5px 10px;
  background: #f4efe6; color: #222;
  font: 11px/1.35 Georgia, serif; font-style: italic;
  text-align: center;
  box-shadow: 0 4px 10px rgba(0,0,0,.5);
}
.painting figcaption small { font-style: normal; font-size: 9.5px; letter-spacing: .5px; color: #666; }

/* ---------- layer 3 ---------- */
.soundboard .window-body { margin: 10px; }
.pads {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 6px;
}
.pads button {
  min-width: 0;
  min-height: 0;
  height: 62px;
  font-size: 30px;
  padding: 0;
}
.pads button.hit { transform: scale(.9); filter: brightness(1.2); }
.fx {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 10px;
  margin-top: 12px;
  font-size: 12px;
}

.note {
  width: 200px;
  min-height: 170px;
  padding: 26px 18px 18px;
  background: #fff58a;
  color: #2c2a00;
  font: 30px/1 "Nanum Pen Script", cursive;
  box-shadow: 0 12px 20px rgba(0,0,0,.5);
  cursor: grab;
  user-select: none;
}
.note::before {
  content: ""; position: absolute; left: 50%; top: -10px;
  width: 80px; height: 22px; transform: translateX(-50%) rotate(-3deg);
  background: rgba(255,255,255,.45);
}
.note-pink { background: #ffb3d6; }
.note-blue { background: #b7e3ff; font-size: 34px; }

/* ---------- ticker / badge ---------- */
.ticker {
  position: fixed; left: 0; right: 0; bottom: 0;
  height: 28px;
  background: var(--pink);
  overflow: hidden;
  z-index: 9000;
  border-top: 2px solid #000;
}
.ticker-track {
  display: inline-block;
  white-space: nowrap;
  font: 22px/28px "VT323", monospace;
  color: #000;
  animation: ticker 40s linear infinite;
}
@keyframes ticker { to { transform: translateX(-50%); } }

.badge {
  all: unset;
  position: fixed; right: 0; bottom: 0;
  height: 28px;
  z-index: 9001;
  background: #e8001c;
  color: #fff;
  font: bold 12px/28px Tahoma, sans-serif;
  padding: 0 14px;
  border-top: 2px solid #000;
  border-left: 2px solid #000;
}
.badge:hover { background: #ff1a36; }

/* ---------- chaos ---------- */
.sparkle {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  color: var(--pink);
  font-size: 14px;
  animation: sparkle .7s ease-out forwards;
}
@keyframes sparkle {
  to { transform: translate(var(--dx), 26px) scale(.2) rotate(120deg); opacity: 0; }
}

.layer.glitching {
  animation: glitch .18s steps(3) 1;
}
/* Phones and tablets: shake only. A filter on a tall section needs more
   memory than iOS Safari allows a tab. */
@media (max-width: 760px), (pointer: coarse) {
  .layer.glitching { animation-name: glitch-lite; }
}
@keyframes glitch-lite {
  0%   { transform: translate(6px, -2px); }
  50%  { transform: translate(-8px, 3px) skewX(4deg); }
  100% { transform: none; }
}
@keyframes glitch {
  0%   { transform: translate(6px, -2px); filter: drop-shadow(-4px 0 #f0f) drop-shadow(4px 0 #0ff); }
  50%  { transform: translate(-8px, 3px) skewX(4deg); filter: hue-rotate(90deg) drop-shadow(5px 0 #f00); }
  100% { transform: none; filter: none; }
}

body.dance .piece { animation: bop .45s ease-in-out infinite alternate; }
body.dance .piece:nth-child(odd) { animation-delay: -.22s; }
@keyframes bop {
  from { transform: rotate(calc(var(--r, 0deg) - 4deg)) translateY(0); }
  to   { transform: rotate(calc(var(--r, 0deg) + 4deg)) translateY(-14px); }
}

/* ---------- phone ---------- */
@media (max-width: 760px) {
  .layer {
    height: auto;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 28px;
    padding: 28px 16px;
  }
  .piece, .error-cascade {
    position: relative;
    left: auto !important; top: auto !important;
    width: min(100%, var(--w, 100%));
    max-width: 100%;
  }
  .sticker, .kaomoji, .note { width: auto; }
  .mac-window, .kpoptv, .msn { width: 100%; }
  .layer-party { height: auto; min-height: 0; padding: 10px 10px 28px; gap: 12px; }
  .kpoptv .window-body, .tv-stage { flex: none; }
  .tv-stage { container-type: normal; display: block; }
  .tv-frame { width: 100%; }
  .msn { height: 60vh; height: min(60dvh, 560px); min-height: 380px; }
  /* 16px stops iPhones zooming in when a chat field is tapped */
  .msn input { font-size: 16px; height: 38px; }
  .msn button, .emote-btn { min-height: 38px; }
  .emote-grid { grid-template-columns: repeat(auto-fill, minmax(48px, 1fr)); max-height: 40vh; }
  .emote-grid button { height: 48px; }
  .mac-body { height: 200px; }
  .error-cascade { height: 190px; width: 270px; }
  .err:nth-child(n+4) { display: none; }
  .cutout { height: 420px; }
  .shout { height: 200px; width: 100%; }
  .binder { width: 100%; padding-left: 40px; }
  .pc-front { font-size: 38px; }
  .pads { grid-template-columns: repeat(4, 1fr); }
  .fx { grid-template-columns: repeat(2, 1fr); }
  .bg-hangul { font-size: calc(var(--s) * .5); }
  .layer-floor { padding-bottom: 120px; }
  .mac-title { padding-left: 70px; white-space: nowrap; font-size: 12px; }
  .badge { font-size: 11px; padding: 0 8px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ================= whimsy (whimsy.js) ================= */

/* gacha machine */
.gacha .window-body { margin: 10px; text-align: center; }
.gacha-machine { position: relative; width: 190px; margin: 0 auto; }
.gacha-dome {
  position: relative;
  height: 150px;
  border-radius: 95px 95px 10px 10px;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,.95), rgba(220,235,255,.55) 45%, rgba(170,200,255,.45));
  border: 3px solid #fff;
  box-shadow: inset 0 0 0 2px #9db5e8, 0 4px 10px rgba(0,0,0,.25);
  overflow: hidden;
}
.gacha-dome i {
  position: absolute;
  width: 34px; height: 34px; border-radius: 50%;
  background: linear-gradient(#fff 50%, var(--cap) 50%);
  box-shadow: inset 0 0 0 2px rgba(0,0,0,.12);
}
.gacha-dome i:nth-child(1) { --cap: #ff2e88; left: 20px; bottom: 6px; }
.gacha-dome i:nth-child(2) { --cap: #b9a4ff; left: 56px; bottom: 4px; transform: rotate(40deg); }
.gacha-dome i:nth-child(3) { --cap: #7dd3fc; left: 92px; bottom: 7px; transform: rotate(-30deg); }
.gacha-dome i:nth-child(4) { --cap: #c8ff3d; left: 128px; bottom: 5px; }
.gacha-dome i:nth-child(5) { --cap: #ffe14d; left: 38px; bottom: 38px; transform: rotate(80deg); }
.gacha-dome i:nth-child(6) { --cap: #ff8a50; left: 76px; bottom: 40px; }
.gacha-dome i:nth-child(7) { --cap: #ff7a9c; left: 112px; bottom: 37px; transform: rotate(-60deg); }
.gacha-base {
  height: 78px;
  margin-top: -4px;
  border-radius: 8px 8px 14px 14px;
  background: linear-gradient(#ff5fa2, #e01e74);
  display: flex; align-items: center; justify-content: space-around;
  box-shadow: inset 0 -5px 0 rgba(0,0,0,.18);
}
.gacha .gacha-crank {
  min-width: 0;
  width: 70px; height: 54px;
  border-radius: 50%;
  font: bold 13px Tahoma, sans-serif;
}
.gacha-slot { width: 42px; height: 34px; border-radius: 6px; background: #3a0a20; box-shadow: inset 0 3px 6px rgba(0,0,0,.6); }
.gacha.shaking .gacha-dome { animation: rattle .12s linear 5; }
@keyframes rattle { 50% { transform: translateX(3px) rotate(1deg); } }
.gacha-stats { margin: 8px 0 0; font-size: 11px; color: #555; }
.gacha .gacha-daily {
  display: block; width: 100%; margin-top: 6px; min-width: 0;
  font-size: 11px; font-weight: bold; color: #b0105a;
}
.gacha .gacha-daily:disabled { color: #888; font-weight: normal; }
.gacha .gacha-daily.ssr-day {
  color: #fff; text-shadow: 0 1px 0 #b0105a;
  background: linear-gradient(115deg, #ff9de2, #9dfcff, #fffb9d, #b39dff, #ff9de2) 0 0 / 300% 100%;
  animation: holo 2.4s linear infinite;
}
.gacha-result { margin-top: 10px; animation: pop .25s ease-out; }
.gacha-result p { margin: 6px 0 0; font-size: 12px; }
.gacha-card {
  position: relative;
  width: 120px; aspect-ratio: 55 / 85;
  margin: 0 auto;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 6px 14px rgba(0,0,0,.3);
}
.r-R .gacha-card { box-shadow: 0 0 0 3px #7dd3fc, 0 6px 14px rgba(0,0,0,.3); }
.r-SR .gacha-card { box-shadow: 0 0 0 3px #ffe14d, 0 0 18px #ffe14d; }
.r-SSR .gacha-card { box-shadow: 0 0 0 3px #ff2e88, 0 0 26px #ff2e88; }
.r-SSR .gacha-card::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 20%, #ff9de2 35%, #9dfcff 45%, #fffb9d 55%, #b39dff 65%, transparent 80%) 0 0 / 300% 100%;
  mix-blend-mode: color-dodge;
  animation: holo 2.4s linear infinite;
}
@keyframes holo { to { background-position: 300% 0; } }
.r-SSR p b { color: #ff2e88; }

.heart-burst {
  position: fixed; z-index: 9999; pointer-events: none;
  font-size: 20px;
  animation: hb 1.1s ease-out forwards;
}
@keyframes hb { to { transform: translate(var(--dx), var(--dy)) scale(.4) rotate(200deg); opacity: 0; } }

/* bias pet */
.pet-egg {
  width: 230px;
  padding: 26px 22px 18px;
  border-radius: 50% 50% 46% 46% / 58% 58% 42% 42%;
  background:
    radial-gradient(circle at 30% 20%, rgba(255,255,255,.7), transparent 30%),
    linear-gradient(160deg, #c3b1ff, #ff8fc4);
  box-shadow: inset -8px -10px 0 rgba(0,0,0,.12), 0 14px 30px rgba(0,0,0,.5);
  text-align: center;
  cursor: grab;
}
.pet.hop .pet-face { animation: hop .4s ease-out; }
@keyframes hop { 40% { transform: translateY(-8px) scale(1.1); } }
.pet-lcd {
  background: #b9d48a;
  border: 4px solid #6e6a8a;
  border-radius: 10px;
  padding: 8px 6px 6px;
  color: #2a3a14;
  box-shadow: inset 0 2px 6px rgba(0,0,0,.25);
}
.pet-face { margin: 0; font: 26px/1.2 Menlo, monospace; animation: idle 2.4s ease-in-out infinite; }
@keyframes idle { 50% { transform: translateY(-2px); } }
.pet-say { margin: 4px 0 6px; min-height: 2.4em; font: 17px/1.1 "VT323", monospace; }
.pet-bars { display: grid; gap: 2px; }
.pet-bars label { display: flex; align-items: center; gap: 4px; font-size: 11px; }
.pet-bars meter { flex: 1; height: 8px; }
.pet-btns { display: flex; justify-content: center; gap: 10px; margin-top: 12px; }
.pet-btns button {
  min-width: 0; width: 40px; height: 40px;
  border-radius: 50%;
  font-size: 18px; padding: 0;
}
.pet-name { margin: 8px 0 0; font: 18px "Nanum Pen Script", cursive; color: #3b1a4a; }

/* Start button + menu */
.start-btn {
  all: unset;
  position: fixed; left: 0; bottom: 0; z-index: 9001;
  height: 28px;
  padding: 0 16px 0 12px;
  border-radius: 0 12px 0 0;
  background: linear-gradient(#5fbf45, #2f8f1f);
  border-top: 2px solid #000; border-right: 2px solid #000;
  color: #fff;
  font: italic bold 15px/28px Tahoma, sans-serif;
  text-shadow: 1px 1px 0 rgba(0,0,0,.4);
}
.start-btn:hover, .start-btn[aria-expanded="true"] { background: linear-gradient(#72d457, #36a024); }
.start-menu {
  position: fixed; left: 0; bottom: 30px; z-index: 9500;
  width: 250px;
  background: #fff;
  border: 2px solid #245edb;
  border-radius: 8px 8px 0 0;
  box-shadow: 4px -4px 20px rgba(0,0,0,.4);
  overflow: hidden;
  font: 13px Tahoma, sans-serif;
}
.sm-head {
  display: flex; align-items: center; gap: 10px;
  padding: 10px;
  background: linear-gradient(#3c81f3, #245edb);
  color: #fff; font-size: 15px;
}
.sm-av {
  width: 36px; height: 36px; border-radius: 6px;
  display: grid; place-items: center;
  background: #fff; color: var(--pink); font-size: 22px;
  border: 2px solid #b8d0ff;
}
.start-menu button {
  all: unset;
  display: block; box-sizing: border-box; width: 100%;
  padding: 8px 12px;
  color: #111;
  cursor: var(--stick);
}
.start-menu button:hover, .start-menu button:focus-visible { background: #316ac5; color: #fff; }
.start-menu hr { margin: 2px 0; border: 0; border-top: 1px solid #dde; }

/* popups */
.popup { position: fixed; color: #000; animation: pop .14s ease-out; }
.popup .window-body { margin: 10px; }
.cb-bar { height: 18px; border: 1px solid #888; background: #fff; padding: 2px; }
.cb-bar i {
  display: block; height: 100%; width: 0;
  background: repeating-linear-gradient(90deg, #3cba3c 0 9px, transparent 9px 11px);
  transition: width .3s;
}
.cb-pct { margin: 6px 0; font-size: 12px; }
.cb-btns { text-align: right; }
.ball {
  width: 150px; height: 150px; margin: 4px auto 12px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #555, #000 60%);
  display: grid; place-items: center;
  box-shadow: 0 8px 16px rgba(0,0,0,.4);
}
.ball.shake { animation: rattle .1s linear 6; }
.ball-win {
  width: 84px; height: 84px; border-radius: 50%;
  display: grid; place-items: center;
  background: #fff; color: #000;
  font: bold 40px Tahoma, sans-serif;
}
.ball-win.answer {
  background: radial-gradient(#2a3fd6, #121f8a);
  color: #dfe6ff;
  font: 12px/1.15 Tahoma, sans-serif;
  padding: 10px; text-align: center;
  clip-path: polygon(50% 0, 100% 85%, 0 85%);
  padding-top: 26px;
}
.ball-form { display: flex; gap: 6px; }
.ball-form input { flex: 1; min-width: 0; }
.horo { display: flex; gap: 12px; align-items: center; }
.horo-card { position: relative; flex: none; width: 90px; aspect-ratio: 55 / 85; border-radius: 6px; overflow: hidden; }
.horo p { margin: 0 0 6px; font-size: 12px; }
.horo-who { font-weight: bold; }
.horo-txt { font: 20px/1.1 "Nanum Pen Script", cursive; }
.horo-lucky { color: #666; }

.shutdown {
  position: fixed; inset: 0; z-index: 10000;
  background: #000;
  display: grid; place-content: center; text-align: center;
  color: #ff8a50;
  font: 34px Tahoma, sans-serif;
}
.shutdown p { margin: 0 0 12px; }
.shutdown small { color: #777; font-size: 13px; }

/* Bunni */
.bunni {
  position: fixed; right: 18px; bottom: 44px; z-index: 9400;
  display: flex; align-items: flex-end; gap: 6px;
  transform: translateY(160%);
  transition: transform .4s cubic-bezier(.3,1.4,.6,1);
  pointer-events: none;
}
.bunni.on { transform: none; pointer-events: auto; }
.bunni-bubble {
  max-width: 230px;
  background: #ffffe1;
  border: 1px solid #000;
  border-radius: 10px;
  padding: 10px;
  color: #000;
  font: 12px/1.4 Tahoma, sans-serif;
  box-shadow: 2px 2px 0 rgba(0,0,0,.4);
  margin-bottom: 40px;
}
.bunni-bubble p { margin: 0 0 8px; }
.bunni-btns { display: flex; gap: 6px; justify-content: flex-end; }
.bunni-btns button { min-width: 0; padding: 0 8px; }
.bunni-body {
  position: relative;
  width: 74px; height: 64px;
  border-radius: 50% 50% 45% 45%;
  background: #fff;
  border: 2px solid #000;
  display: grid; place-items: center;
  font: 20px Menlo, monospace; color: #000;
  cursor: var(--stick);
  animation: idle 2s ease-in-out infinite;
}
.bunni-body .ear {
  position: absolute; top: -38px;
  width: 18px; height: 44px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid #000;
  box-shadow: inset 0 0 0 5px #fff, inset 0 0 0 20px #ffb3d6;
}
.bunni-body .ear.l { left: 12px; transform: rotate(-12deg); }
.bunni-body .ear.r { right: 12px; transform: rotate(14deg); }

/* screensaver */
.saver { position: fixed; inset: 0; z-index: 10001; background: #000; cursor: none; }
.saver-logo {
  position: absolute; left: 0; top: 0;
  font: 64px "Black Han Sans", sans-serif;
  color: #ff2e88;
  white-space: nowrap;
}

@media (max-width: 760px) {
  .pet-egg { margin: 0 auto; }
  .bunni { right: 8px; }
  .bunni-bubble { max-width: 190px; }
}
.pet-bars meter { appearance: none; -webkit-appearance: none; border: 1px solid #2a3a14; background: #a6c17a; border-radius: 2px; }
.pet-bars meter::-webkit-meter-bar { background: #a6c17a; border: 0; border-radius: 0; height: 6px; }
.pet-bars meter::-webkit-meter-optimum-value,
.pet-bars meter::-webkit-meter-suboptimum-value,
.pet-bars meter::-webkit-meter-even-less-good-value { background: #2a3a14; }
.pet-bars meter::-moz-meter-bar { background: #2a3a14; }
.pc-face.has-img { background: var(--img) center / cover no-repeat, #000; }
.pc-play {
  position: absolute; top: 5%; right: 6%;
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,0,0,.85); color: #fff;
  font-size: 10px; text-decoration: none;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
  cursor: var(--stick);
}
.pc-play:hover { transform: scale(1.15); }
.pc-credit {
  position: absolute; top: 4%; right: 5%;
  width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(0,0,0,.45); color: #fff;
  font: 11px/1 Tahoma, sans-serif; text-decoration: none;
  cursor: var(--stick);
}
.pc-credit:hover { background: rgba(0,0,0,.8); }
.credits-intro { margin: 0 0 8px; font-size: 12px; }
.credits { margin: 0; padding-left: 18px; max-height: 300px; overflow-y: auto; font-size: 11px; line-height: 1.5; }
/* Melody Player */
.mini .tv-msg { font-size: 18px; }
.mini iframe { pointer-events: none; } /* its own buttons drive it */
.mini::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.18) 0 1px, transparent 1px 3px);
}

/* ================= the 1999 homepage (homepage.js) ================= */
.layer-home {
  height: auto;
  max-width: none;
  padding: 60px 16px 80px;
  background:
    radial-gradient(circle at 20% 30%, #fff 1px, transparent 1.5px) 0 0 / 46px 46px,
    radial-gradient(circle at 70% 60%, #ffe14d 1px, transparent 1.5px) 0 0 / 62px 62px,
    radial-gradient(circle at 40% 80%, #b9a4ff 1.2px, transparent 1.7px) 0 0 / 80px 80px,
    #0a0030;
}
.geo {
  width: 100%;
  max-width: 780px;
  margin: 0 auto;
  font: 15px/1.45 "Comic Sans MS", "Comic Neue", "Chalkboard SE", cursive;
  color: #fff;
  text-align: center;
}
.geo a { color: #7df9ff; }
.geo a:visited { color: #ff9de2; }
.geo-addr { margin: 0 0 14px; font: 12px "Times New Roman", serif; color: #c9c9ff; }
.geo-title {
  margin: 0 0 10px;
  font: bold clamp(26px, 5vw, 42px)/1.1 "Times New Roman", serif;
  color: #ff2e88;
  text-shadow: 3px 3px 0 #ffe14d, 6px 6px 0 #00d0ff;
  animation: rainbowtext 3s linear infinite;
}
@keyframes rainbowtext { 50% { color: #c8ff3d; } }
.geo-marquee {
  overflow: hidden; white-space: nowrap;
  background: #000; color: #c8ff3d;
  border: 2px inset #888;
  padding: 3px 0;
  font: 16px "Courier New", monospace;
}
.geo-marquee span { display: inline-block; padding-left: 100%; animation: marquee 18s linear infinite; }
@keyframes marquee { to { transform: translateX(-100%); } }
.construction {
  margin: 14px auto;
  max-width: 460px;
  padding: 8px;
  font: bold 18px Arial, sans-serif;
  color: #000;
  background: repeating-linear-gradient(-45deg, #ffd400 0 14px, #111 14px 28px);
  border: 3px solid #000;
  text-shadow: 0 0 4px #ffd400, 0 0 4px #ffd400;
}
.construction small { font-weight: normal; }
.blinkies { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin: 10px 0; }
.blinkie {
  width: 150px; height: 20px;
  display: grid; place-items: center;
  font: bold 10px/20px Verdana, sans-serif;
  border: 1px solid #000;
  animation: blinkie 1s steps(1) infinite;
}
.b1 { background: #ffb3d6; color: #c0005a; }
.b2 { background: #c8ff3d; color: #224400; animation-delay: -.3s; }
.b3 { background: #b9a4ff; color: #2a0a6a; animation-delay: -.6s; }
.b4 { background: #ffe14d; color: #7a3a00; animation-delay: -.2s; }
.b5 { background: #7df9ff; color: #003a4a; animation-delay: -.8s; }
@keyframes blinkie { 50% { filter: invert(1) hue-rotate(180deg); } }
hr.rainbow {
  height: 6px; border: 0; margin: 22px 0;
  background: linear-gradient(90deg, #ff2e88, #ffe14d, #c8ff3d, #00d0ff, #b9a4ff, #ff2e88);
}
.geo-cols { display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; text-align: left; }
.geo-side { display: grid; gap: 14px; align-content: start; }
.geo-box {
  background: #1b0a5a;
  border: 4px ridge #b9a4ff;
  padding: 12px;
}
.geo-box h3 { margin: 0 0 8px; text-align: center; font: bold 20px "Times New Roman", serif; color: #ffe14d; }
.geo .small { font-size: 11px; color: #c9c9ff; margin: 6px 0 0; }

/* shrine */
.shrine { text-align: center; }
.shrine-frame { position: relative; width: 190px; margin: 4px auto; padding: 8px; background: linear-gradient(135deg, #ffd1e8, #fff, #c9e4ff); border: 3px double #ff2e88; }
.shrine-photo { aspect-ratio: 3 / 4; background: #ffd1e8 center / cover; }
.sparkle-s { position: absolute; color: #ffe14d; font-size: 22px; animation: twinkle 1.6s ease-in-out infinite; }
.s1 { left: -12px; top: -10px; } .s2 { right: -12px; top: 30%; animation-delay: -.5s; } .s3 { left: 10%; bottom: -14px; animation-delay: -1s; }
@keyframes twinkle { 50% { transform: scale(.4) rotate(90deg); opacity: .3; } }
.shrine-credit { margin: 2px 0 8px; font-size: 10px; }
.shrine-facts { margin: 0 auto 8px; border-collapse: collapse; font-size: 13px; text-align: left; }
.shrine-facts th { color: #ff9de2; padding: 2px 8px 2px 0; font-weight: normal; vertical-align: top; }
.shrine-why { margin: 6px 0 2px; }
.shrine-list { margin: 0 auto 10px; padding-left: 20px; text-align: left; max-width: 300px; font-size: 13px; }
.shrine-list li::marker { content: "♡ "; color: #ff2e88; }
.geo button { font-family: inherit; }
.shrine-love { min-width: 0; }

/* counter */
.counter-box { text-align: center; }
.counter-box p { margin: 0 0 6px; }
.odometer {
  display: inline-block;
  padding: 4px 6px;
  background: #000;
  border: 2px inset #777;
  font: bold 26px/1 "Courier New", monospace;
  letter-spacing: 6px;
  color: #3dff6a;
  text-shadow: 0 0 6px #3dff6a;
}
.updates ul { margin: 0; padding-left: 18px; font-size: 13px; }
.updates li { margin-bottom: 4px; }
.updates b { color: #7df9ff; }
.webring { text-align: center; }
.webring p:first-child { margin: 0 0 6px; color: #ff9de2; font-weight: bold; }
.webring div { display: flex; justify-content: center; gap: 4px; }
.webring button { min-width: 0; padding: 0 8px; }

/* guestbook */
.guestbook { text-align: left; }
.gb-form { display: grid; grid-template-columns: 1fr 1fr 90px; gap: 8px; align-items: end; color: #fff; }
.gb-form label { display: grid; gap: 2px; font-size: 12px; }
.gb-form input, .gb-form select, .gb-form textarea { font: 14px Tahoma, sans-serif; color: #000; width: 100%; box-sizing: border-box; }
.gb-form .gb-msg { grid-column: 1 / -1; }
.gb-form button { grid-column: 1 / -1; justify-self: start; }
.gb-form .legal-note { grid-column: 1 / -1; font-size: 11px; color: #c9c9ff; }
.gb-form .legal-note a, .geo-legal a { color: #ff9ad5; }
.gb-status { grid-column: 1 / -1; margin: 0; min-height: 1.2em; font-size: 12px; color: #ffe14d; }
.gb-list { margin: 12px 0 0; padding-left: 34px; }
.gb-list li { padding: 8px 0; border-bottom: 1px dashed #6a5ab0; }
.gb-list li::marker { color: #c9c9ff; font-size: 12px; }
.gb-head { margin: 0; font-size: 12px; color: #c9c9ff; }
.gb-head b { color: #ff9de2; font-size: 14px; }
.gb-text { margin: 2px 0 0; overflow-wrap: anywhere; }
.gb-empty { list-style: none; color: #c9c9ff; }
.gb-more { margin-top: 8px; }

/* 88x31 buttons */
.buttons88 { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.b88 {
  width: 88px; height: 31px;
  display: grid; place-items: center;
  font: bold 9px/1.05 Verdana, sans-serif;
  text-align: center; text-decoration: none;
  border: 1px solid #000;
  box-shadow: inset 1px 1px 0 rgba(255,255,255,.6), inset -1px -1px 0 rgba(0,0,0,.4);
  overflow: hidden;
}
.k1 { background: linear-gradient(#ff2e88, #8a0040); color: #fff; font-size: 13px; }
.k1 b { color: #ffe14d; }
.geo .k2 { background: linear-gradient(#ffa6d5, #ff5fa2); color: #3a0020; font-size: 12px; }
.k3 { background: #000; color: #3dff6a; }
.k4 { background: #fff; color: #000; font-family: "Courier New", monospace; }
.k5 { background: linear-gradient(90deg, #b9a4ff, #7df9ff); color: #2a0a6a; font-size: 11px; }
.k6 { background: #c8ff3d; color: #224400; }
.k7 { background: linear-gradient(#ffe9a8, #ff6aa2); color: #6a0030; font-size: 12px; }
.k8 { background: #0018a8; color: #fff; }
.linkus { margin: 14px auto 0; max-width: 460px; }
.linkus p { margin: 0 0 4px; font-size: 13px; }
.linkus textarea { width: 100%; box-sizing: border-box; font: 12px "Courier New", monospace; }
.geo-foot { margin: 24px 0 0; font: 12px "Times New Roman", serif; color: #c9c9ff; }
.geo-foot.geo-legal { margin-top: 6px; font-size: 11px; }

@media (max-width: 760px) {
  .geo-cols { grid-template-columns: 1fr; }
  .gb-form { grid-template-columns: 1fr 1fr; }
  .gb-form label:nth-child(3) { grid-column: 1 / -1; }
  .layer-home { padding: 30px 10px 70px; }
}
@media (prefers-reduced-motion: reduce) {
  .geo-marquee span { padding-left: 0; }
}
/* ticker items: silly lines + allkpop links */
.ticker-track > * { margin-right: 2.5em; }
.ticker-track a { color: #000; text-decoration: none; }
.ticker-track a:hover { text-decoration: underline; }
.ticker:hover .ticker-track { animation-play-state: paused; } /* so headlines can be clicked */

/* ================= chaos (chaos.js) ================= */
.dnp { text-align: center; }
.dnp-btn {
  all: unset;
  width: 120px; height: 120px; border-radius: 50%;
  display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, #ff8a8a, #e00000 55%, #8a0000);
  box-shadow: 0 10px 0 #5a0000, 0 18px 30px rgba(0,0,0,.6), inset 0 -6px 12px rgba(0,0,0,.3);
  color: #fff; font: 900 16px/1.1 Arial Black, Arial, sans-serif; text-align: center;
  text-shadow: 0 2px 0 rgba(0,0,0,.4);
  cursor: var(--stick);
  transition: transform .08s, box-shadow .08s;
}
.dnp-btn:hover { animation: rattle .15s linear infinite; }
.dnp-btn:active { transform: translateY(8px); box-shadow: 0 2px 0 #5a0000, 0 6px 14px rgba(0,0,0,.6); }
.dnp p { margin: 16px 0 0; font: 22px "Nanum Pen Script", cursive; color: #ffb3b3; }
.note-green { background: #c8ff9a; font-size: 24px; }

.fly-card {
  all: unset;
  position: fixed; left: 0; top: 0; z-index: 9300;
  width: 84px; aspect-ratio: 55 / 85;
  border-radius: 6px; overflow: hidden;
  box-shadow: 0 0 0 3px #fff, 0 8px 22px rgba(255,46,136,.6);
  cursor: var(--stick);
}
.fly-card .pc-face { pointer-events: none; }

.notif {
  position: fixed; top: 14px; right: 14px; z-index: 9600;
  width: min(320px, calc(100vw - 28px));
  padding: 10px 40px 10px 14px;
  border-radius: 16px;
  background: rgba(245,245,250,.92);
  backdrop-filter: blur(10px);
  box-shadow: 0 10px 30px rgba(0,0,0,.45);
  color: #111;
  font: 13px/1.35 -apple-system, "Segoe UI", sans-serif;
  animation: notifIn .35s cubic-bezier(.3,1.4,.6,1);
  cursor: var(--stick);
}
.notif.out { opacity: 0; transform: translateY(-20px); transition: .5s; }
@keyframes notifIn { from { transform: translateY(-120%); } }
.notif p { margin: 0; }
.notif-app { font-size: 11px; color: #666; margin-bottom: 2px !important; }
.notif-mute { all: unset; position: absolute; right: 10px; top: 10px; font-size: 14px; cursor: var(--stick); opacity: .6; }
.notif-mute:hover { opacity: 1; }

.av-now { margin: 0 0 8px; font-size: 12px; }
.av-found { margin: 10px 0; padding-left: 18px; font-size: 12px; color: #b00; }
.av-btns { text-align: right; }

.rain-drop {
  position: fixed; top: -60px; z-index: 9700; pointer-events: none;
  animation: rainfall linear forwards;
}
@keyframes rainfall { to { transform: translateY(calc(100vh + 120px)) rotate(200deg); } }
.big-banner {
  position: fixed; left: 50%; top: 40%; z-index: 9750;
  transform: translate(-50%, -50%);
  font: clamp(40px, 10vw, 120px) "Black Han Sans", sans-serif;
  color: #ffe14d;
  -webkit-text-stroke: 3px #ff2e88;
  text-shadow: 8px 8px 0 #000;
  white-space: nowrap;
  pointer-events: none;
  animation: bannerPop 2.6s ease-out forwards;
}
@keyframes bannerPop {
  0% { transform: translate(-50%, -50%) scale(.2) rotate(-20deg); }
  15% { transform: translate(-50%, -50%) scale(1.15) rotate(4deg); }
  25%, 80% { transform: translate(-50%, -50%) scale(1) rotate(-2deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }
}
.big-card {
  position: fixed; left: 50%; top: 50%; z-index: 9750;
  width: min(260px, 60vw); aspect-ratio: 55 / 85;
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 0 0 6px #fff, 0 0 60px #ff2e88;
  pointer-events: none;
  animation: bigcard 3s ease-in-out forwards;
}
@keyframes bigcard {
  0% { transform: translate(-50%, -50%) scale(0) rotateY(0); }
  30% { transform: translate(-50%, -50%) scale(1) rotateY(720deg); }
  85% { transform: translate(-50%, -50%) scale(1) rotateY(720deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(.6) rotateY(900deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .big-banner, .big-card { animation: none; }
}

/* ================= the descent (descent.js) ================= */
.layer-descent {
  height: auto;
  max-width: none;
  padding-bottom: 120px;
  background: linear-gradient(#0a0030, #12001f 20%, #1a0010 45%, #000 70%, #000);
  overflow: hidden;
  color: #fff;
}
.dz { position: relative; min-height: 900px; padding: 80px 5% 40px; }
.dz-title {
  margin: 0 0 6px;
  font: 48px "Black Han Sans", sans-serif;
  color: transparent;
  -webkit-text-stroke: 1.5px #ff2e88;
  letter-spacing: 2px;
}
.dz-intro { margin: 0 0 30px; font: 22px "VT323", monospace; color: #b9a4ff; max-width: 640px; }

/* trainee era */
.dz-1 { min-height: 1100px; }
.drift-card {
  position: absolute; width: 96px; aspect-ratio: 55 / 85;
  border-radius: 6px; overflow: hidden;
  box-shadow: 0 0 0 3px #fff, 0 10px 24px rgba(0,0,0,.6);
  opacity: .9;
  will-change: transform;
}

/* confirmation stairs */
.dz-2 { display: flex; flex-direction: column; gap: 26px; }
.stair { width: 270px; color: #000; box-shadow: 6px 6px 0 rgba(0,0,0,.5); }
.stair .window-body { margin: 10px; }
.stair p { margin: 0 0 10px; font-size: 12px; }
.stair-btns { display: flex; gap: 6px; justify-content: flex-end; }
.stair-btns button { min-width: 0; padding: 0 10px; }

/* album version hell */
.versions { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 14px; max-width: 980px; }
.album {
  position: relative;
  aspect-ratio: 1;
  padding: 10px;
  display: flex; flex-direction: column; justify-content: flex-end;
  background: linear-gradient(135deg, hsl(var(--h) 90% 70%), hsl(calc(var(--h) + 60) 80% 45%));
  box-shadow: 0 8px 18px rgba(0,0,0,.5);
  overflow: hidden;
  font: 12px Tahoma, sans-serif;
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.6);
}
.album b { font-size: 15px; }
.album small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.album.has-art {
  background: linear-gradient(transparent 45%, rgba(0,0,0,.75)), var(--art) center / cover, #222;
  filter: hue-rotate(var(--shift, 0deg));
}
.album.has-art .album-cd { right: -62px; top: 8px; opacity: .85; }
.album-cd {
  position: absolute; right: -30px; top: 10px;
  width: 90px; height: 90px; border-radius: 50%;
  background: radial-gradient(circle, #222 0 9px, #ddd 10px 12px, transparent 13px), conic-gradient(#ccc, #fff, #9cf, #fcf, #ccc);
  animation: spin 4s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.spent {
  position: sticky; bottom: 40px;
  display: inline-block;
  margin: 30px 0 0;
  padding: 8px 14px;
  background: #000; border: 2px solid #c8ff3d;
  font: 26px "VT323", monospace; color: #c8ff3d;
}

/* the fanchant */
.dz-4 { text-align: center; }
.chant {
  margin: 0 0 6vh;
  font: clamp(70px, 16vw, 220px)/1 "Black Han Sans", sans-serif;
  color: transparent;
  -webkit-text-stroke: 2px #3a2a5a;
  transition: color .2s, -webkit-text-stroke-color .2s, transform .2s;
}
.chant.lit { color: #ff2e88; -webkit-text-stroke-color: #ffe14d; transform: scale(1.08) rotate(-2deg); text-shadow: 0 0 40px #ff2e88; }

/* hall of mirrors */
.dz-5 { display: flex; flex-direction: column; align-items: center; }
.mirror {
  position: relative;
  width: 100%; aspect-ratio: 55 / 85;
  padding: 7%;
  border-radius: 8px;
  background: linear-gradient(135deg, #fff, #b9a4ff, #ff9de2);
  box-sizing: border-box;
}
.dz-5 > .mirror { width: min(340px, 80vw); box-shadow: 0 0 60px #b9a4ff; }
.mirror > .pc-face { border-radius: 6px; }

/* confession pit */
.confession {
  max-width: 420px;
  margin: 0 0 50px;
  padding: 14px 18px;
  background: #fff; color: #222;
  border-radius: 18px 18px 18px 4px;
  font: 24px/1.15 "Nanum Pen Script", cursive;
  transform: rotate(var(--r));
  box-shadow: 0 8px 20px rgba(0,0,0,.5);
}

/* the core */
.dz-7 { min-height: 100vh; display: grid; place-items: center; }
.core { text-align: center; }
.core-text { margin: 0 0 20px; font: 34px "VT323", monospace; color: #ffe14d; }
.core-card {
  position: relative;
  width: 160px; aspect-ratio: 55 / 85; margin: 0 auto;
  border-radius: 8px; overflow: hidden;
  filter: blur(4px) saturate(1.4);
  box-shadow: 0 0 80px #ff2e88;
  animation: idle 3s ease-in-out infinite;
}
.core-sub { margin: 20px 0 12px; font: 22px "Nanum Pen Script", cursive; font-size: 28px; }
.core-btns { display: flex; gap: 10px; justify-content: center; }
.core-btns button { min-width: 90px; }

/* depth meter */
.depth {
  position: fixed; right: 12px; top: 50%; z-index: 8800;
  transform: translateY(-50%);
  display: grid; gap: 2px; justify-items: end;
  padding: 10px 12px;
  background: rgba(0,0,0,.75);
  border: 1px solid #ff2e88;
  font: 18px/1.1 "VT323", monospace; color: #b9a4ff;
  text-align: right;
  pointer-events: none;
}
.depth[hidden] { display: none; }
.depth-m { color: #ffe14d; font-size: 24px; font-weight: normal; }
.depth-zone { color: #ff9de2; }

@media (max-width: 760px) {
  .layer-descent { padding-left: 0; padding-right: 0; display: block; }
  .dz-title { font-size: 34px; }
  .drift-card { width: 70px; }
  .stair { width: min(270px, 85vw); margin-left: 0 !important; }
  .depth { top: auto; bottom: 40px; transform: none; font-size: 14px; }
  .depth-m { font-size: 18px; }
}
/* each nested frame gets an edge and shifts hue: 9 levels × 40° = a full rainbow,
   landing back on true colour for the photo in the middle */
.mirror .mirror { filter: hue-rotate(40deg); box-shadow: inset 0 0 0 3px rgba(255,255,255,.85), 0 6px 14px rgba(0,0,0,.35); }

/* ---------- "there's more below" hint ---------- */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}
.scroll-hint {
  position: fixed; left: 50%; bottom: 42px; z-index: 8900;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 0;
  min-width: 0; min-height: 0;
  padding: 5px 16px 3px;
  border: 2px solid #ff2e88; border-radius: 999px;
  background: rgba(0,0,0,.8);
  box-shadow: 0 0 18px rgba(255,46,136,.5);
  color: #fff; font: 18px/1 "VT323", monospace; text-shadow: none;
  cursor: pointer;
  transition: opacity .35s, transform .35s;
}
.scroll-hint:hover, .scroll-hint:focus-visible { background: #ff2e88; outline: none; }
.scroll-hint b { font-size: 24px; line-height: .9; color: #c8ff3d; animation: hint-bob 1.2s ease-in-out infinite; }
.scroll-hint.quiet { opacity: .3; }
.scroll-hint.covering { opacity: 0; pointer-events: none; }
.scroll-hint.gone { opacity: 0; pointer-events: none; transform: translateX(-50%) translateY(24px); }
@keyframes hint-bob { 0%, 100% { transform: translateY(-2px); } 50% { transform: translateY(5px); } }
@media (prefers-reduced-motion: reduce) { .scroll-hint b { animation: none; } }

/* ================= arcade: guess the MV + comeback countdown ================= */
.layer-arcade { height: 720px; }

/* guess the MV */
.mvq .window-body { margin: 10px; color: #000; }
.mvq-head { margin: 0 0 8px; font-size: 12px; }
.mvq-player {
  position: relative; height: 90px; overflow: hidden;
  border: 2px inset #ddd; background: #000;
}
.mvq-player #mvq-yt, .mvq-player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; pointer-events: none; }
/* opaque on top of the video: only the sound gets out */
.mvq-cover {
  position: absolute; inset: 0; z-index: 1;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,.25) 0 1px, transparent 1px 3px), linear-gradient(135deg, #1a0a2e, #3a0a20);
  color: #ffd6ec; font: 20px "VT323", monospace;
}
.mvq-cd { font-size: 34px; display: inline-block; }
.mvq.playing .mvq-cd { animation: spin 1.2s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.mvq-bar {
  position: relative; height: 10px; margin: 6px 0;
  background: #222244;
}
/* how far this round's clip reaches, out of 16 s */
.mvq-bar::before { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--clip, 6%); background: #4a3a7a; }
.mvq-bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: linear-gradient(90deg, var(--pink), var(--lilac)); }
.mvq .mvq-play { width: 100%; font-weight: bold; }
.mvq-rows { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 3px; }
.mvq-rows li {
  min-height: 22px; padding: 2px 8px;
  border: 1px solid #c8c8c8; background: #f7f7f7;
  font-size: 12px; color: #999; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.mvq-rows .g-now { border-color: var(--pink); color: var(--pink); }
.mvq-rows .g-skip { background: #e6e6e6; color: #666; }
.mvq-rows .g-wrong { background: #ffe0e0; border-color: #e88; color: #900; }
.mvq-rows .g-artist { background: #fff6c8; border-color: #e0c040; color: #765; }
.mvq-rows .g-win { background: #dcffd8; border-color: #4c4; color: #060; font-weight: bold; }
.mvq-form input { width: 100%; height: 26px; font-size: 13px; }
.mvq-btns { display: flex; gap: 6px; margin-top: 6px; }
.mvq-btns button { flex: 1; min-width: 0; }
.mvq-msg { min-height: 14px; margin: 4px 0 0; font-size: 11px; color: #b0105a; white-space: pre-wrap; }
.mvq-end { text-align: center; }
.mvq-end p { margin: 4px 0; }
.mvq-verdict { font: 24px "VT323", monospace; color: var(--pink); }
.mvq-answer { font-weight: bold; font-size: 14px; }
.mvq-stats { font-size: 11px; color: #555; }

/* comeback countdown */
.cb { --c1: #ff2e88; --c2: #b9a4ff; }
.cb .window-body {
  margin: 0; padding: 14px 16px 10px;
  background: radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--c1) 35%, transparent), transparent 60%), #0b0b18;
  color: #fff;
  transition: background .8s;
}
.cb-label { margin: 0; font: 16px "VT323", monospace; letter-spacing: 2px; color: #8a8fc9; }
.cb-next { margin: 2px 0 12px; font-size: 13px; color: #ddd; }
.cb-next b { display: block; font: 34px/1 "Black Han Sans", sans-serif; color: var(--c1); text-shadow: 0 0 18px color-mix(in srgb, var(--c1) 60%, transparent); }
.cb-clock { display: flex; align-items: flex-start; gap: 6px; }
.cb-clock > i { font: 40px/60px "VT323", monospace; font-style: normal; color: #555; }
.cb-unit { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; text-align: center; }
.cb-unit small { grid-column: span 2; font: 14px "VT323", monospace; color: #8a8fc9; }
.flip {
  position: relative; width: 44px; height: 60px;
  perspective: 200px;
  background: linear-gradient(#26263e 50%, #1c1c30 50%);
  border-radius: 5px; box-shadow: 0 3px 0 #000, inset 0 0 0 1px #33335a;
  display: grid; place-items: center;
}
.flip::after { content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 1px; background: #000; }
.flip b { font: 52px/1 "VT323", monospace; color: #fff; }
.flip.flipping b { animation: flip .35s ease-out; }
@keyframes flip { from { transform: rotateX(-90deg); opacity: .3; } }
.cb-list { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.cb-list li {
  display: grid; grid-template-columns: auto 1fr; column-gap: 8px;
  padding: 5px 8px; border-left: 4px solid var(--c);
  background: rgba(255,255,255,.05); font-size: 12px;
}
.cb-list em { grid-row: span 2; align-self: center; font: 20px "VT323", monospace; font-style: normal; color: var(--c); min-width: 44px; }
.cb-list b, .cb-list span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cb-list span { color: #999; font-size: 11px; }
.cb-list li.out em { color: #7dff7d; animation: blink 1.4s steps(1) infinite; }
.cb-foot { margin: 10px 0 0; font-size: 10px; color: #666; }
.cb-confetti {
  position: fixed; z-index: 9999; pointer-events: none;
  width: 8px; height: 12px;
  animation: confetti 2.2s cubic-bezier(.2,.6,.4,1) forwards;
}
@keyframes confetti { to { transform: translate(var(--dx), var(--dy)) rotate(var(--rot)); opacity: 0; } }

@media (max-width: 760px) {
  .layer-arcade { height: auto; }
  .cb .window-body { padding: 12px 10px 8px; }
  .cb-clock { gap: 3px; justify-content: center; }
  .flip { width: 30px; height: 44px; }
  .flip b { font-size: 36px; }
  .cb-clock > i { font-size: 24px; line-height: 44px; }
  .cb-next b { font-size: 28px; }
}