/* NETANPAYO.COM — ugly on purpose. See DESIGN.md. */
* { box-sizing: border-box; }
@property --h { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes tilehue { to { --h: 360deg; } }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  font: 17px/1.45 "Times New Roman", Times, serif;
  color: #000;
  /* tile colours ride --h so the whole tile hue-shifts slowly (90s, no flashing) */
  background-color: hsl(calc(300deg + var(--h)) 100% 25%);
  background-image:
    radial-gradient(circle at 50% 50%, hsl(calc(120deg + var(--h)) 100% 50%) 0 3px, transparent 4px),
    repeating-conic-gradient(hsl(calc(300deg + var(--h)) 100% 50%) 0 25%, hsl(calc(300deg + var(--h)) 100% 25%) 0 50%);
  animation: tilehue 90s linear infinite;
  background-size: 48px 48px, 96px 96px;
  cursor: crosshair;
}
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='240' height='140'><g font-family='Impact,Arial Black,sans-serif' fill='white' fill-opacity='.22'><text x='40' y='44' font-size='26' transform='rotate(-15 60 35)'>61</text><text x='110' y='118' font-size='16' transform='rotate(-15 170 105)'>LA-LI-LU-LE-LO</text></g></svg>");
  animation: drift 40s linear infinite;
}
@keyframes drift { to { background-position: 240px 140px; } }
h1, h2, .nav-title, button { font-family: "Comic Sans MS", "Comic Sans", "Chalkboard SE", cursive; }
.tiny { font: 12px/1.3 "Courier New", Courier, monospace; margin: .4em 0; }
a { color: #0000ee; }
a:visited { color: #551a8b; }

/* ---------- effects ---------- */
.blink { animation: blink 1s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0; } }
.rainbow {
  background: linear-gradient(90deg, #f00, #f90, #ff0, #0f0, #0ff, #00f, #f0f, #f00);
  background-size: 200% 100%;
  -webkit-background-clip: text; background-clip: text;
  color: transparent;
  animation: rainbow 4s linear infinite;
}
@keyframes rainbow { to { background-position: 200% 0; } }
.wobble { display: inline-block; animation: wobble 2s ease-in-out infinite; }
@keyframes wobble { 50% { transform: skewX(-8deg) rotate(-1deg); } }
.spin { display: inline-block; animation: spin 3s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.marquee-strip { overflow: hidden; white-space: nowrap; background: #000; color: #0f0; font: bold 14px "Courier New", monospace; padding: 3px 0; }
.marquee { display: inline-block; padding-left: 100%; animation: marquee 18s linear infinite; }
.marquee.rev { animation-direction: reverse; color: #ff0; }
@keyframes marquee { to { transform: translateX(-100%); } }
.stripes {
  background: repeating-linear-gradient(45deg, #ff0 0 16px, #000 16px 32px);
  background-size: 45px 45px;
  animation: stripes 2s linear infinite;
}
@keyframes stripes { to { background-position: 45px 0; } }
.flip { animation: flip 1s steps(1) infinite; }
@keyframes flip { 50% { color: #ff0; background: #f00; } }
@keyframes pulse { to { transform: scale(1.1) rotate(var(--rot, 0deg)); } }
@keyframes shake { 25% { transform: translateX(-2px); } 75% { transform: translateX(2px); } }
.glitch { color: #f00; font-family: Impact, "Arial Black", sans-serif; letter-spacing: 2px; text-shadow: 2px 0 #0ff, -2px 0 #f0f; }

/* ---------- splash ---------- */
#splash {
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 16px; text-align: center; overflow: auto;
  background-color: #000;
  background-image: radial-gradient(#f0f 1px, transparent 2px);
  background-size: 24px 24px;
  color: #fff;
}
#splash[hidden] { display: none; }
#splash h1 { font: 900 clamp(40px, 11vw, 110px)/1 Impact, "Arial Black", sans-serif; margin: 0 0 .2em; }
.splash-sub { color: #0ff; font-family: "Comic Sans MS", cursive; font-size: 20px; }
.enter {
  font-size: 40px; font-weight: bold; padding: 10px 40px; margin: 16px;
  color: #ff0; background: #f00; border: 6px outset #f66; cursor: pointer;
}
.enter:focus-visible { outline: 4px dashed #0f0; outline-offset: 4px; }
.splash-small { font: 13px "Courier New", monospace; color: #ccc; margin: .3em 0; }

/* ---------- frame ---------- */
.frame { max-width: 980px; margin: 12px auto 80px; border: 8px ridge #c0c0c0; background: #000080; }
.banner { position: relative; text-align: center; background: #000; color: #fff; overflow: clip; }
.title-row { display: flex; align-items: center; justify-content: center; gap: 8px; font-size: clamp(22px, 5vw, 40px); }
.banner .title {
  font: 900 clamp(32px, 8vw, 80px)/1.05 Impact, "Arial Black", sans-serif; margin: 8px 0 0;
  /* stacked shadows via filter: text-shadow would paint over background-clip:text */
  filter: drop-shadow(3px 3px 0 #f0f) drop-shadow(3px 3px 0 #0ff) drop-shadow(3px 3px 0 #0f0);
}
.burst {
  position: absolute; top: 26px; right: 10px; width: 92px; padding: 22px 10px; pointer-events: none;
  font: 900 11px/1.1 "Arial Black", sans-serif; color: #f00; background: #ff0; text-align: center;
  clip-path: polygon(50% 0, 61% 18%, 82% 9%, 79% 30%, 100% 35%, 85% 50%, 100% 65%, 79% 70%, 82% 91%, 61% 82%, 50% 100%, 39% 82%, 18% 91%, 21% 70%, 0 65%, 15% 50%, 0 35%, 21% 30%, 18% 9%, 39% 18%);
  --rot: 12deg; transform: rotate(12deg); animation: pulse 1.5s ease-in-out infinite alternate;
}
.tagline { font-family: "Comic Sans MS", cursive; color: #0ff; margin: 4px 8px 8px; }
.construction { position: relative; }
.construction .worker { top: 2px; font-size: 22px; }
.construction span:not(.worker) { display: inline-block; background: #ff0; color: #000; font: bold 14px "Arial Black", sans-serif; padding: 2px 8px; margin: 6px; }

.cols { display: grid; grid-template-columns: 160px minmax(0, 1fr) 180px; gap: 8px; padding: 8px; }

.leftnav { background: #c0c0c0; border: 4px outset #fff; padding: 6px; align-self: start; text-align: center; }
.nav-title { font-weight: bold; color: #f00; margin: 0 0 6px; }
.leftnav a {
  display: block; margin: 4px 0; padding: 4px; text-decoration: none;
  font: bold 14px "Comic Sans MS", cursive; color: #ff0; background: #000080; border: 3px outset #66f;
}
.leftnav a:nth-of-type(4n+2) { background: #f0f; color: #000; border-color: #f9f; font: 15px Impact, "Arial Black", sans-serif; letter-spacing: 1px; }
.leftnav a:nth-of-type(4n+3) { background: #0f0; color: #000; border-color: #9f9; font: bold 13px "Courier New", monospace; }
.leftnav a:nth-of-type(4n) { background: #f00; color: #fff; border-color: #f99; font: italic bold 15px "Times New Roman", serif; }
.leftnav a:hover { outline: 3px dashed #ff0; animation: shake .3s linear; }
.bul { display: inline-block; animation: spin 3s linear infinite; }
.mini-counter { display: inline-block; margin: 4px 0; padding: 2px 6px; font: bold 13px "Courier New", monospace; background: #000; color: #0f0; border: 2px inset #888; }
.counter-box { margin: 10px 0; background: #000; color: #0f0; padding: 6px 4px; font: 12px "Courier New", monospace; }
.counter-box p { margin: 2px 0; }
.counter {
  display: inline-block; font: bold 20px "Courier New", monospace; letter-spacing: 2px;
  background: #222; color: #f00; border: 2px inset #888; padding: 2px 4px; max-width: 100%; overflow: hidden;
}
.counter.glitch { font-size: 13px; }
.btn-red { width: 100%; margin: 8px 0 2px; padding: 6px 2px; font-weight: bold; color: #fff; background: #f00; border: 4px outset #f88; cursor: pointer; }
.loadbar { height: 14px; border: 2px inset #888; background: #fff; margin-top: 8px; }
.loadbar-fill { height: 100%; width: 3%; background: #00f; animation: backwards-load 6s linear infinite; }
@keyframes backwards-load { from { width: 100%; } to { width: 3%; } }

/* ---------- content boxes ---------- */
.content { min-width: 0; overflow: clip; padding: 4px; }
.box {
  position: relative; overflow: clip;
  background: #ffffcc; border: 4px double #000; margin: 0 0 14px; padding: 0 12px 10px; scroll-margin-top: 10px;
  transform: rotate(calc(var(--tilt, 0deg) * var(--tilt-k, 1)));
}
.box:nth-of-type(4n+1) { --tilt: -0.8deg; border: 6px ridge #f0f; }
.box:nth-of-type(4n+2) { --tilt: 0.6deg; border: 4px dotted #000; background: #ccffff; }
.box:nth-of-type(4n+3) { --tilt: 1.1deg; border: 6px groove #0f0; background: #ffccff; }
.box:nth-of-type(4n) { --tilt: -1.2deg; border: 6px outset #ff0; background: #fff; }
.box-title { margin: 0 -12px 10px; padding: 4px 84px 4px 8px; font-size: 20px; background: #000080; color: #fff; border-bottom: 3px solid #f0f; animation: tglitch 5s steps(1) infinite; }
.box:nth-of-type(2n) .box-title { animation-delay: -1.7s; }
.box:nth-of-type(3n) .box-title { animation-delay: -3.3s; }
@keyframes tglitch { 97% { transform: translateX(3px); text-shadow: 2px 0 #0ff, -2px 0 #f0f; color: #f00; } 99% { transform: translateX(-2px); } }
.box ~ .box::before {
  content: "🌀💣🥂👁️📟🌀💣🥂👁️📟🌀💣🥂👁️📟🌀💣🥂👁️📟🌀💣🥂👁️📟🌀💣🥂👁️📟🌀💣🥂👁️📟";
  display: block; margin: 0 -12px; padding: 2px 0; overflow: hidden; white-space: nowrap; background: #000; font-size: 14px;
  animation: divscroll 12s linear infinite;
}
@keyframes divscroll { to { text-indent: -300px; } }
.sticker {
  position: absolute; top: 2px; right: 6px; z-index: 2; pointer-events: none; max-width: 84px; padding: 16px 10px;
  font: 900 10px/1.1 "Arial Black", sans-serif; text-align: center; color: #f00; background: #ff0;
  clip-path: polygon(50% 0, 61% 18%, 82% 9%, 79% 30%, 100% 35%, 85% 50%, 100% 65%, 79% 70%, 82% 91%, 61% 82%, 50% 100%, 39% 82%, 18% 91%, 21% 70%, 0 65%, 15% 50%, 0 35%, 21% 30%, 18% 9%, 39% 18%);
  --rot: -8deg; transform: rotate(-8deg); animation: pulse 1.5s ease-in-out infinite alternate;
}
.st-hot { background: #f00; color: #ff0; --rot: 10deg; }
.st-upd { background: #0ff; color: #000; }
.st-free { background: #0f0; color: #000; --rot: 6deg; }
.st-burn { background: none; clip-path: none; font-size: 28px; padding: 4px; animation: spin 4s linear infinite; }
.sponsor { color: #808; }
.worker-strip { position: relative; height: 24px; margin: 8px -12px -10px; overflow: hidden; }
.worker { position: absolute; left: 0; top: 0; font-size: 20px; animation: walk 6s linear infinite alternate; }
@keyframes walk { to { left: calc(100% - 26px); } }
.bounce-strip { position: relative; height: 28px; margin: 0 0 14px; background: #ff0; border: 3px outset #f0f; }
.bounce { position: absolute; left: 0; top: 3px; color: #f00; font: 900 16px Impact, "Arial Black", sans-serif; animation: bounce 4s ease-in-out infinite alternate; }
@keyframes bounce { to { left: 100%; transform: translateX(-100%); } }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(56px, 1fr)); gap: 8px; padding: 6px; background: #000; }
.pic { margin: 0; padding-top: 4px; text-align: center; font-size: 26px; line-height: 1.2; border: 2px solid #000; overflow: hidden; }
.pic figcaption { font: 9px "Courier New", monospace; background: #fff; color: #000; overflow-wrap: anywhere; }
.pic.broken { background: #ddd; border: 2px dashed #888; }
.verdict { text-align: center; font: 900 clamp(28px, 6vw, 46px) Impact, "Arial Black", sans-serif; color: #f00; margin: .2em 0; }
.bomb-fig { margin: 0; text-align: center; }
.bomb-fig svg { max-width: 100%; height: auto; border: 3px dashed #f00; background: #fff; }
.bomb-fig figcaption { font: italic 14px "Comic Sans MS", cursive; }
.career-table { width: 100%; border-collapse: collapse; background: #fff; font-size: 16px; }
.career-table th { background: #f0f; font-family: "Comic Sans MS", cursive; }
.career-table td, .career-table th { border: 2px solid #000; padding: 4px 6px; vertical-align: top; }
.career-table td:last-child { white-space: nowrap; text-align: center; }
.stamp { text-align: center; font: 900 22px "Arial Black", sans-serif; color: #c00; border: 4px solid #c00; transform: rotate(-3deg); padding: 4px; overflow-wrap: anywhere; }

.box.codec-sec { background: #ccffff; text-align: center; }
.btn-codec { font: bold 22px "Courier New", monospace; padding: 8px 20px; color: #0f0; background: #000; border: 4px outset #0a0; cursor: pointer; }

.gb-form { display: grid; gap: 6px; background: #c0c0c0; border: 3px outset #fff; padding: 8px; font-family: "Comic Sans MS", cursive; }
.gb-form label { display: grid; gap: 2px; }
.gb-form input, .gb-form textarea { font: 15px "Courier New", monospace; width: 100%; }
.gb-form button { justify-self: start; font-weight: bold; padding: 4px 14px; cursor: pointer; }
.gb-list { list-style: none; padding: 0; margin: 10px 0 0; }
.gb-list li { background: #fff; border: 2px dashed #f0f; padding: 6px 8px; margin: 6px 0; overflow-wrap: anywhere; }
.gb-name { font: bold 15px "Comic Sans MS", cursive; color: #00f; }
.gb-date { font: 11px "Courier New", monospace; color: #666; margin-left: 6px; }
.gb-text { margin: 2px 0 0; white-space: pre-wrap; }
.webring { text-align: center; font-family: "Comic Sans MS", cursive; }
.ascii { font: 14px "Courier New", monospace; background: #000; color: #0f0; padding: 6px; overflow-x: auto; }

/* ---------- right col ---------- */
.rightcol { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.ad { background: #ff0; border: 4px dashed #f00; padding: 6px; font: 14px "Comic Sans MS", cursive; text-align: center; }
.ad p { margin: .3em 0; }
.ad-head { font: 900 15px "Arial Black", sans-serif; color: #f00; }
.ad-2 { background: #0ff; border-color: #00f; }
.ad-3 { background: #f9f; border-color: #000; }
.vmarq { background: #000; color: #0f0; border: 4px ridge #f0f; padding: 4px; font: 12px "Courier New", monospace; }
.vmarq-head { margin: 0 0 4px; color: #ff0; font-weight: bold; text-align: center; }
.vmarq-win { height: 140px; overflow: hidden; }
.vmarq-text { animation: vmarq 16s linear infinite; }
.vmarq.down .vmarq-text { animation-direction: reverse; }
.vmarq-text p { margin: 0 0 8px; }
@keyframes vmarq { from { transform: translateY(140px); } to { transform: translateY(-100%); } }
.dvd { position: fixed; inset: 0; z-index: 40; pointer-events: none; overflow: hidden; }
.dvd-x { position: absolute; top: 0; bottom: 0; left: 0; width: 84px; animation: dvdx 13s linear infinite alternate; }
.dvd-y {
  position: absolute; top: 0; left: 0; width: 84px; padding: 4px; text-align: center;
  font: 900 11px/1.2 "Arial Black", sans-serif; color: #ff0; background: #f0f; border: 3px outset #f9f;
  animation: dvdy 7s linear infinite alternate;
}
@keyframes dvdx { to { left: calc(100% - 84px); } }
@keyframes dvdy { to { top: calc(100% - 44px); } }
.eye-box { background: #fff; border: 4px ridge #888; text-align: center; padding: 4px; }
.eye-box svg { max-width: 100%; height: auto; }
.midi { background: #c0c0c0; border: 3px outset #fff; padding: 6px; font: 13px Arial, sans-serif; text-align: center; }
.midi code { font-size: 11px; overflow-wrap: anywhere; }
.midi button { font-size: 12px; cursor: pointer; }
.badge { align-self: center; width: 120px; padding: 6px; font: 900 13px/1.2 "Arial Black", sans-serif; text-align: center; color: #fff; background: #000; border: 3px outset #888; }
.badge-b { background: #f00; color: #ff0; }
.badge-c { background: #00f; }

.footer { background: #000; color: #fff; text-align: center; padding-bottom: 8px; }
.footer .tiny { color: #0ff; }

/* ---------- dock ---------- */
.dock { position: fixed; right: 8px; bottom: 8px; z-index: 60; display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; max-width: calc(100vw - 16px); }
.dock button { font-size: 13px; font-weight: bold; padding: 6px 8px; background: #c0c0c0; border: 3px outset #fff; cursor: pointer; }
.dock button[aria-pressed="true"] { border-style: inset; background: #9f9; }

/* ---------- dialogs ---------- */
dialog { padding: 0; max-width: calc(100vw - 24px); }
dialog::backdrop { background: rgba(0, 0, 0, .6); }
.codec { width: 560px; background: #001a00; color: #3f3; border: 4px solid #3f3; font-family: "Courier New", monospace; }
.codec-head { display: flex; justify-content: space-between; padding: 6px 10px; border-bottom: 2px solid #3f3; font-weight: bold; }
.codec-faces { display: flex; align-items: center; justify-content: space-between; padding: 10px; gap: 8px; }
.face { width: 90px; height: 110px; overflow: hidden; border: 3px solid #3f3; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: 40px; background: #030; }
.face span { font-size: 11px; }
.freq { font: bold 30px "Courier New", monospace; color: #3f3; }
.codec-log { min-height: 160px; max-height: 45vh; overflow-y: auto; padding: 0 12px; font-size: 15px; }
.codec-log p { margin: .4em 0; }
.codec-close { display: block; margin: 10px auto; font: bold 14px "Courier New", monospace; color: #000; background: #3f3; border: 3px outset #9f9; padding: 6px 12px; cursor: pointer; }

.win98 { width: 340px; background: #c0c0c0; border: 3px outset #fff; font: 13px Tahoma, Arial, sans-serif; }
.win98-bar { display: flex; justify-content: space-between; align-items: center; background: linear-gradient(90deg, #000080, #1084d0); color: #fff; font-weight: bold; padding: 2px 3px 2px 6px; }
.win98-bar form { margin: 0; }
.win98-bar button { font: bold 12px Arial, sans-serif; width: 22px; height: 20px; padding: 0; background: #c0c0c0; border: 2px outset #fff; cursor: pointer; }
.win98-body { display: flex; gap: 10px; align-items: center; padding: 14px; }
.win98-icon { font-size: 32px; }
.win98-btns { display: flex; justify-content: center; gap: 10px; padding: 0 0 12px; margin: 0; }
.win98-btns button { min-width: 72px; padding: 3px; background: #c0c0c0; border: 2px outset #fff; cursor: pointer; }

/* ---------- photos (crude, obviously fake edits only) ---------- */
.title-head, .ad-bear-head, .popad-head, .bear-bibi {
  object-fit: cover; object-position: 48% 22%; border-radius: 50%;
}
.splash-head { width: 200px; max-width: 60vw; height: auto; border: 6px dotted #ff0; transform: rotate(-6deg); margin-bottom: 6px; }
.title-head { width: 70px; height: 70px; border: 4px dashed #0f0; flex: none; }
.flipx { transform: scaleX(-1); filter: hue-rotate(180deg) saturate(3); }
.nav-head { display: block; width: 130px; max-width: 100%; height: auto; margin: 10px auto 0; border: 5px ridge #f0f; transform: rotate(5deg); }
.side-head { align-self: center; width: 150px; max-width: 100%; height: auto; border: 8px solid; border-image: repeating-linear-gradient(45deg, #f00, #ff0 8px, #0f0 16px, #0ff 24px, #f0f 32px) 8; transform: rotate(-4deg); }
.cutout { float: right; position: relative; width: 116px; margin: 0 0 8px 10px; text-align: center; }
.cutout-l { float: left; margin: 0 10px 8px 0; }
.cutout img { width: 110px; height: auto; border: 4px dashed #f0f; transform: rotate(8deg); background: #fff; }
.cutout-l img { transform: rotate(-7deg); border-color: #00f; }
.bubble { position: absolute; top: -4px; left: -10px; padding: 2px 8px; font: bold 14px "Comic Sans MS", cursive; background: #fff; color: #000; border: 2px solid #000; border-radius: 12px; transform: rotate(-10deg); }
.wall { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; padding: 10px 4px; align-items: start; }
.polaroid { margin: 0; padding: 6px 6px 4px; background: #fff; border: 2px solid #000; box-shadow: 4px 4px 0 #000; }
.polaroid figcaption { font: 13px/1.25 "Comic Sans MS", cursive; color: #000; padding-top: 4px; }
.glitter { border: 6px solid; border-image: repeating-linear-gradient(45deg, #f0f, #ff0 6px, #0ff 12px, #fff 14px, #f0f 18px) 6; }
.tilt-a { transform: rotate(-3deg); }
.tilt-b { transform: rotate(2.5deg); }
.tilt-c { transform: rotate(-1.5deg); }
.tilt-d { transform: rotate(4deg); }
.ph { position: relative; line-height: 0; overflow: hidden; }
.ph img { width: 100%; height: auto; display: block; }
.googly {
  position: absolute; left: var(--x); top: var(--y); width: 15%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: #fff; border: 2px solid #000; border-radius: 50%;
}
.googly.sm { width: 11%; }
.googly::after {
  content: ""; position: absolute; left: 30%; top: 40%; width: 45%; height: 45%; border-radius: 50%; background: #000;
  animation: googly 1.3s ease-in-out infinite alternate;
}
.googly + .googly::after { animation-delay: -.6s; }
@keyframes googly { 50% { left: 10%; top: 15%; } to { left: 40%; top: 50%; } }
.pstick { position: absolute; left: var(--x); top: var(--y); transform: translate(-50%, -50%) rotate(-12deg); font: 900 14px/1 "Arial Black", sans-serif; color: #f00; background: #ff0; padding: 3px 4px; border: 2px solid #000; white-space: nowrap; }
.f-fried { filter: contrast(1.7) saturate(5) brightness(1.1); }
.f-hue { animation: huecycle 6s linear infinite; }
@keyframes huecycle { to { filter: hue-rotate(360deg) saturate(2); } }
.f-neg { filter: invert(1); }
.f-old { filter: sepia(1) contrast(1.3) blur(.4px); }
.ovation-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; padding: 6px 4px 10px; }
.meter { height: 26px; border: 3px inset #888; background: #fff; overflow: hidden; }
.meter-fill { width: 100%; height: 100%; padding: 2px 6px; font: bold 13px "Courier New", monospace; color: #fff; white-space: nowrap; background: repeating-linear-gradient(90deg, #0a0 0 18px, #0f0 18px 20px); }

/* ---------- BIBI BEAR(TM) merch ---------- */
.box.merch { background: #fff0f8; }
.merch-yell { text-align: center; font: 900 clamp(18px, 4vw, 26px) Impact, "Arial Black", sans-serif; color: #f00; margin: .2em 0 .5em; }
.merch-grid { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: center; }
.bear-shot { position: relative; flex: 0 1 300px; margin: 0; padding: 6px 6px 2px; background: #fff; border: 6px outset #fc0; transform: rotate(-2deg); }
.bear-shot > img:first-child { display: block; width: 100%; height: auto; }
.bear-shot figcaption, .bear-models figcaption { font: 900 13px "Arial Black", sans-serif; text-align: center; color: #f00; }
.bear-bibi { position: absolute; left: 44%; top: 8%; width: 60px; height: 60px; border: 3px solid #fff; transform: rotate(-14deg); pointer-events: none; }
.bear-models { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin-top: 12px; }
.bear-models figure { margin: 0; padding: 3px; background: #ff0; border: 3px dashed #f0f; }
.bear-models figure:nth-child(odd) { transform: rotate(3deg); }
.bear-models img { display: block; width: 100%; aspect-ratio: 1; height: auto; object-fit: cover; }
.bear-shot > .price-burst {
  position: absolute;
  left: auto; right: -8px; top: -6px; z-index: 3; width: 96px; padding: 20px 8px; border: none; border-radius: 0;
  font: 900 10px/1.1 "Arial Black", sans-serif; text-align: center; color: #ff0; background: #f00;
  clip-path: polygon(50% 0, 61% 18%, 82% 9%, 79% 30%, 100% 35%, 85% 50%, 100% 65%, 79% 70%, 82% 91%, 61% 82%, 50% 100%, 39% 82%, 18% 91%, 21% 70%, 0 65%, 15% 50%, 0 35%, 21% 30%, 18% 9%, 39% 18%);
  --rot: 14deg; transform: rotate(14deg); animation: pulse 1.2s ease-in-out infinite alternate;
}
.bear-spin { animation: spin .8s linear 1; }
.merch-feats { flex: 1 1 220px; margin: 0; padding-left: 0; list-style: none; font: bold 15px "Comic Sans MS", cursive; }
.merch-feats li { margin: .3em 0; }
.order-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: center; margin-top: 10px; }
.btn-order { font-size: 22px; font-weight: bold; padding: 8px 20px; color: #fff; background: #f00; border: 5px outset #f88; cursor: pointer; }
.order-msg { min-height: 1.4em; text-align: center; font: bold 15px "Comic Sans MS", cursive; color: #00f; }
.banner-ad {
  display: flex; align-items: center; justify-content: center; gap: 10px; margin: 0 0 14px; padding: 6px 10px;
  font: 15px "Arial Black", Arial, sans-serif; text-align: center; color: #000;
  background: linear-gradient(#ff0, #f90); border: 4px outset #fc0; overflow: clip;
}
.banner-ad-2 { background: linear-gradient(#0ff, #9cf); border-color: #9cf; font-family: "Comic Sans MS", cursive; }
.banner-ad-pic { width: 48px; height: 64px; object-fit: cover; border: 3px solid #f00; transform: rotate(-6deg); flex: none; }
.ad-bear { background: #fdf; border-color: #a0522d; }
.ad-bear-pic { position: relative; display: block; }
.ad-bear-pic img:first-child { display: block; width: 100%; height: auto; border: 4px solid #a0522d; }
.ad-bear-head { position: absolute; right: -6px; top: -6px; width: 40px; height: 40px; border: 3px solid #fff; transform: rotate(16deg); }
.ad-nav { margin-top: 10px; background: #fff; border-color: #0a0; font-size: 12px; }
.ad-4 { background: #9f9; border-color: #060; }
.ad-5 { background: #fc9; border-color: #f0f; }
.btn-tiny { font-size: 12px; font-weight: bold; padding: 3px 8px; color: #fff; background: #00f; border: 3px outset #99f; cursor: pointer; }
.badges88 { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; padding: 6px; }
.b88 { display: inline-flex; align-items: center; justify-content: center; width: 88px; height: 31px; font: 900 9px/1.05 Arial, sans-serif; text-align: center; color: #fff; background: #000; border: 2px outset #888; overflow: hidden; }
.b88-a { background: #036; color: #ff0; } .b88-b { background: #f0f; color: #000; } .b88-c { background: #ccc; color: #000; }
.b88-d { background: #fff; color: #00f; } .b88-e { background: #a0522d; color: #fff; } .b88-f { background: #f00; color: #ff0; }
.credits { margin: 10px 8px; padding: 8px 10px; text-align: left; font: 12px/1.4 Arial, Helvetica, sans-serif; background: #fff; color: #000; border: 3px double #000; overflow-wrap: anywhere; }
.credits h3 { margin: 8px 0 2px; font-size: 13px; }
.credits h2 { margin: 0 0 4px; font-size: 16px; color: #00f; }
.credits ul { margin: 4px 0; padding-left: 1.2em; }
.credits a { color: #00e; }
.face-r img { width: 84px; height: 84px; object-fit: contain; background: #000; }
.popad .win98-body { align-items: flex-start; }
.popad-pic { position: relative; flex: none; width: 90px; }
.popad-pic img:first-child { display: block; width: 100%; height: auto; border: 4px solid #a0522d; }
.popad-head { position: absolute; left: -8px; bottom: -6px; width: 34px; height: 34px; border: 2px solid #fff; transform: rotate(-12deg); }
.popad-yell { margin: 0 0 4px; font: 900 18px Impact, "Arial Black", sans-serif; color: #f00; }
.popad .win98-bar { background: linear-gradient(90deg, #a0522d, #f0f); }
.pic img { width: 100%; aspect-ratio: 1; object-fit: contain; background: #000; display: block; }

/* ---------- schizo slop (rev 2) ---------- */
.memewall { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.memewall .polaroid:nth-child(3n+2) { margin-top: -18px; z-index: 1; position: relative; }
.memewall .polaroid:nth-child(4n) { transform: rotate(-5deg) translateX(-10px); }
.mom { margin: .5em 0; font: 900 15px/1.2 "Comic Sans MS", cursive; color: #f00; text-transform: uppercase; }
.caps { font: 900 20px/1.2 Impact, "Arial Black", sans-serif; color: #c0c; }
.heads { display: flex; justify-content: center; gap: 4px; padding: 4px; overflow: clip; background: #ff0; }
.heads img { flex: none; width: 44px; height: 44px; object-fit: contain; background: #000; border: 2px solid #f0f; animation: bob 1.4s ease-in-out infinite alternate; }
.heads img:nth-child(2n) { animation-delay: -.7s; }
.heads img:nth-child(3n) { animation-delay: -.3s; }
@keyframes bob { to { translate: 0 -5px; rotate: 12deg; } }
.side-head-2 { transform: rotate(5deg); }
.banner-ad-3 { background: linear-gradient(#f0f, #f9f); border-color: #f9f; }
.broken-img { display: inline-block; margin: 4px; padding: 10px 6px; font: 11px "Courier New", monospace; color: #555; background: #eee; border: 2px dashed #888; overflow-wrap: anywhere; }
.broken-row { display: flex; flex-wrap: wrap; justify-content: center; }
.fakewin { width: auto; max-width: 360px; margin: 0 auto 14px; transform: rotate(-1.5deg); }
.fake-x, .fake-btn, .btn-fake { display: inline-block; padding: 1px 6px; min-width: 22px; text-align: center; background: #c0c0c0; color: #000; border: 2px outset #fff; font-weight: bold; }
.fake-btn { min-width: 72px; }
.msn { background: linear-gradient(#e8f0ff, #fff); border: 3px solid #36c; font: 12px/1.3 Tahoma, Arial, sans-serif; padding: 0 6px 6px; overflow-wrap: anywhere; }
.msn p { margin: .3em 0; }
.msn-bar { margin: 0 -6px 4px !important; padding: 2px 6px; color: #fff; background: linear-gradient(90deg, #36c, #6cf); font-weight: bold; }
.msn-nudge { color: #c00; font-weight: bold; animation: shake .3s linear infinite; }
.news { background: #000; color: #ff0; border: 3px ridge #0f0; padding: 4px 6px; font: 12px/1.3 "Courier New", monospace; }
.news p { margin: .3em 0; }
.news-head { color: #f0f; font-weight: bold; text-align: center; }

/* corkboard: items sit on % coordinates, red string SVG uses the same 0-100 space */
.board {
  position: relative; aspect-ratio: 4 / 3; margin: 8px 0; overflow: clip; --k: 1;
  background: #c48a52 radial-gradient(#8a5a2b 1px, transparent 2px) 0 0 / 9px 9px; border: 10px ridge #6b3e1f;
}
.strings { position: absolute; inset: 0; width: 100%; height: 100%; }
.pin-it {
  position: absolute; left: var(--x); top: var(--y); z-index: 1; width: calc(var(--w) * var(--k)); margin: 0;
  transform: translate(-50%, -50%) rotate(var(--r, 0deg));
}
.pin-it::before { content: ""; position: absolute; top: -5px; left: 50%; z-index: 2; width: 10px; height: 10px; margin-left: -5px; border-radius: 50%; background: #e00; border: 1px solid #600; }
.pin-photo { padding: 3px 3px 0; background: #fff; box-shadow: 2px 2px 0 #000; }
.pin-photo img { display: block; width: 100%; height: auto; }
.pin-photo figcaption { font: bold 11px "Comic Sans MS", cursive; text-align: center; color: #00f; }
.note { padding: 6px 5px; font: bold clamp(9px, 1.5vw, 12px)/1.2 "Comic Sans MS", cursive; color: #000; background: #ff9; box-shadow: 2px 2px 0 rgba(0,0,0,.4); overflow-wrap: anywhere; }
.note-b { background: #9ff; }
.note-c { background: #fff; color: #c00; }
.pin-it.broken-img { margin: 0; text-align: center; }
.stamp-big { z-index: 0; padding: 4px; font: 900 clamp(13px, 2.6vw, 22px)/1 Impact, "Arial Black", sans-serif; text-align: center; color: #d00; border: 4px solid #d00; opacity: .85; }
.stamp-big::before { display: none; }

/* greentext */
.green { margin: 8px 0; padding: 6px 8px; background: #f0e0d6; border: 1px solid #d9bfb7; font: 15px/1.35 Arial, Helvetica, sans-serif; color: #789922; overflow: hidden; overflow-wrap: anywhere; }
.green p { margin: 0; }
.green .gt-head { margin-bottom: 4px; color: #000; font-size: 12px; }
.gt-head b { color: #117743; }
.gt-thumb { float: left; width: 110px; height: auto; margin: 0 10px 4px 0; }


/* ---------- garbage animations (round 5). all killed by calm / reduced motion below ---------- */
.sky {
  position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  background: radial-gradient(#fff 1px, transparent 1.5px) 0 0 / 70px 70px, radial-gradient(#ff9 1px, transparent 2px) 0 0 / 130px 130px;
  animation: stars 40s linear infinite;
}
@keyframes stars { to { background-position: 0 700px, 0 260px; } }
.sky span { position: absolute; top: -40px; font-size: 22px; opacity: .7; animation: fall 11s linear infinite; }
@keyframes fall { to { transform: translateY(calc(100vh + 80px)) rotate(360deg); } }
.sky span:nth-child(1) { left: 5%; animation-duration: 9s; animation-delay: -0.0s; }
.sky span:nth-child(2) { left: 42%; animation-duration: 16s; animation-delay: -3.3s; }
.sky span:nth-child(3) { left: 79%; animation-duration: 15s; animation-delay: -6.6s; }
.sky span:nth-child(4) { left: 20%; animation-duration: 14s; animation-delay: -9.9s; }
.sky span:nth-child(5) { left: 57%; animation-duration: 13s; animation-delay: -1.2s; }
.sky span:nth-child(6) { left: 94%; animation-duration: 12s; animation-delay: -4.5s; }
.sky span:nth-child(7) { left: 35%; animation-duration: 11s; animation-delay: -7.8s; }
.sky span:nth-child(8) { left: 72%; animation-duration: 10s; animation-delay: -11.1s; }
.sky span:nth-child(9) { left: 13%; animation-duration: 9s; animation-delay: -2.4s; }
.sky span:nth-child(10) { left: 50%; animation-duration: 16s; animation-delay: -5.7s; }
.sky span:nth-child(11) { left: 87%; animation-duration: 15s; animation-delay: -9.0s; }
.sky span:nth-child(12) { left: 28%; animation-duration: 14s; animation-delay: -0.3s; }

#merch { cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><text y='26' font-size='26'>🧸</text></svg>") 16 16, auto; }
#codec-sec { cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><text y='26' font-size='26'>📟</text></svg>") 16 16, auto; }
#pizarra { cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><text y='26' font-size='26'>👁️</text></svg>") 16 16, auto; }
.wavy span { display: inline-block; white-space: pre; animation: wave 1.2s ease-in-out infinite; animation-delay: calc(var(--i) * -.09s); }
@keyframes wave { 50% { transform: translateY(-5px) rotate(-3deg); } }
.wordart { color: #ff0; transform: skewX(-12deg) rotate(-2deg); text-shadow: 1px 1px 0 #f0f, 2px 2px 0 #f0f, 3px 3px 0 #c0c, 4px 4px 0 #909, 5px 5px 0 #606, 6px 6px 0 #303, 8px 8px 6px rgba(0,0,0,.6); }
.verdict.wordart { color: #0ff; }
.subtitle { margin: 6px 8px 0; font: 900 clamp(18px, 4.5vw, 32px)/1.1 Impact, "Arial Black", sans-serif; }
.glitter-text {
  background: repeating-linear-gradient(110deg, #ff0 0 6px, #fff 6px 8px, #f0f 8px 14px, #0ff 14px 18px); background-size: 200px 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent; animation: glitter 3s linear infinite;
}
@keyframes glitter { to { background-position: 200px 0; } }
.charcasis { margin: .2em 0; font: 900 clamp(18px, 5vw, 34px)/1.15 Impact, "Arial Black", sans-serif; }
.cube-wrap { align-self: center; width: 100px; height: 100px; margin: 14px 0; perspective: 400px; }
.cube { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; animation: cube 9s linear infinite; }
.cube img { position: absolute; inset: 0; width: 100px; height: 100px; object-fit: cover; border: 3px solid #ff0; background: #000; backface-visibility: hidden; }
.cube img:nth-child(1) { transform: translateZ(50px); }
.cube img:nth-child(2) { transform: rotateY(90deg) translateZ(50px); }
.cube img:nth-child(3) { transform: rotateY(180deg) translateZ(50px); }
.cube img:nth-child(4) { transform: rotateY(-90deg) translateZ(50px); }
.cube img:nth-child(5) { transform: rotateX(90deg) translateZ(50px); }
.cube img:nth-child(6) { transform: rotateX(-90deg) translateZ(50px); }
@keyframes cube { to { transform: rotateX(360deg) rotateY(720deg); } }
.flipcard { perspective: 700px; }
.flip-in { position: relative; transform-style: preserve-3d; transition: transform .6s; }
.flipcard:hover .flip-in { transform: rotateY(180deg); }
.flip-front, .flip-back { backface-visibility: hidden; }
.flip-back { position: absolute; inset: 0; display: grid; place-items: center; transform: rotateY(180deg); font: 900 24px Impact, "Arial Black", sans-serif; text-align: center; color: #0f0; background: #000; }
.b88:hover { animation: spin .8s linear infinite; }
.content a:hover, .footer a:hover { display: inline-block; animation: shake .3s linear infinite; }
.ad { animation: jelly 2.4s ease-in-out infinite; }
.ad:nth-child(2n) { animation-delay: -1.1s; }
@keyframes jelly { 30% { scale: 1.04 .96; } 50% { scale: .97 1.03; } 70% { scale: 1.02 .99; } }
.msn, .news, .fakewin, .typer {
  border: 5px solid transparent;
  background: var(--fill, #000) padding-box, linear-gradient(90deg, #f0f, #0ff, #ff0, #0f0, #f0f) 0 0 / 300% 100% border-box;
  animation: gborder 3s linear infinite;
}
.msn { --fill: linear-gradient(#e8f0ff, #fff); }
.fakewin { --fill: #c0c0c0; }
@keyframes gborder { to { background-position: 0 0, 300% 0; } }
.rays { position: relative; overflow: clip; isolation: isolate; }
.rays::before { content: ""; position: absolute; inset: -60%; z-index: -1; background: repeating-conic-gradient(#ff0 0 10deg, #f9f 10deg 20deg); animation: spin 14s linear infinite; }
.typer { margin: 0 0 14px; padding: 6px; color: #0f0; font: 15px "Courier New", monospace; overflow: hidden; }
.typer span { display: inline-block; max-width: 100%; width: 33ch; overflow: hidden; white-space: nowrap; vertical-align: bottom; animation: type 5s steps(33) infinite; }
@keyframes type { from { width: 0; } 70%, to { width: 33ch; } }
.lb-2 { animation-duration: 2.3s; background: #f0f; }
.lb-3 { animation-duration: 9s; animation-direction: alternate; background: #0a0; }
.globe-box { text-align: center; background: #000; border: 3px ridge #0ff; padding: 6px; }
.globe-box .tiny { color: #0ff; }
.globe { width: 80px; height: 80px; margin: 0 auto; border-radius: 50%; box-shadow: inset -14px -10px 20px rgba(0,0,0,.7), 0 0 10px #0ff; background: repeating-linear-gradient(90deg, #0a0 0 14px, #06c 14px 30px, #0a0 30px 38px, #06c 38px 60px) 0 0 / 120px 100%, #06c; animation: globe 5s linear infinite; }
@keyframes globe { to { background-position: 120px 0, 0 0; } }
.diag { overflow: hidden; white-space: nowrap; margin: 4px -20px; padding: 2px 0; transform: rotate(-2.5deg); background: #f0f; color: #000; font: 900 13px "Arial Black", sans-serif; }
.diag .marquee { animation-duration: 11s; }
.frame.quake { animation: quake .125s linear 16; }
@keyframes quake { 25% { transform: translate(-6px, 3px) rotate(-.6deg); } 75% { transform: translate(6px, -3px) rotate(.6deg); } }
.btn-quake { background: #a50; border-color: #d83; }
.btn-bsod { background: #00a; border-color: #66f; }
dialog.bsod { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 8vh 6vw; border: 0; background: #00a; color: #fff; font: 16px/1.5 "Courier New", monospace; text-align: center; }
.bsod-title { display: inline-block; padding: 0 8px; background: #aaa; color: #00a; font-weight: bold; }
.bsod-close { margin-top: 20px; padding: 6px 14px; font: bold 15px "Courier New", monospace; color: #00a; background: #fff; border: 0; cursor: pointer; }
.junk { position: absolute; right: 96px; top: 2px; z-index: 2; width: 64px; padding: 2px; background: #fff; border: 3px dashed #0f0; transform: rotate(var(--r)); pointer-events: none; }
.junk img { display: block; width: 100%; height: auto; }
.rightcol .junk { position: static; align-self: center; width: 110px; }

/* ---------- cursor trail ---------- */
.trail.comet { width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(#fff, #ff0 40%, transparent 70%); box-shadow: 0 0 8px 3px #f0f; }
.trail { position: fixed; z-index: 70; pointer-events: none; font-size: 18px; animation: trail .7s ease-out forwards; }
@keyframes trail { to { opacity: 0; transform: translateY(20px) scale(.4); } }

/* ---------- phone ---------- */
@media (max-width: 760px) {
  .cols { grid-template-columns: minmax(0, 1fr); }
  .leftnav, .rightcol { align-self: stretch; }
  .leftnav { display: grid; grid-template-columns: 1fr 1fr; column-gap: 6px; }
  .leftnav > :not(a) { grid-column: 1 / -1; }
  .frame { margin: 0 0 90px; border-width: 4px; }
  .box { padding: 0 8px 8px; --tilt-k: .4; }
  .box-title { margin: 0 -8px 8px; font-size: 18px; }
  .box ~ .box::before, .worker-strip { margin-inline: -8px; }
  .career-table { font-size: 14px; }
  .career-table td:last-child { white-space: normal; }
  .board { aspect-ratio: 3 / 4; --k: 1.35; border-width: 6px; }
  .heads img:nth-child(n+7) { display: none; }
}

/* ---------- CALM MODE (also default for prefers-reduced-motion, set in script.js) ---------- */
body.calm *, body.calm *::before, body.calm *::after { animation: none !important; transition: none !important; }
body.calm .marquee { padding-left: 0; white-space: normal; }
body.calm .marquee-strip { white-space: normal; }
body.calm { cursor: auto; }
body.calm::before { animation: none !important; }
body.calm .dvd, body.calm .sky { display: none; }
body.calm { animation: none !important; }
body.calm :is(#merch, #codec-sec, #pizarra) { cursor: auto; }
html:has(body.calm) { scroll-behavior: auto; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* off until the visitor opts in (CALM MODE off adds .wild) */
  body:not(.wild) *, body:not(.wild) *::before, body:not(.wild) *::after, body:not(.wild)::before { animation: none !important; transition: none !important; }
  body:not(.wild) .dvd, body:not(.wild) .sky { display: none; }
  body:not(.wild) { animation: none !important; }
  body:not(.wild) :is(#merch, #codec-sec, #pizarra) { cursor: auto; }
}
.charca-list { font: bold 16px/1.35 "Comic Sans MS", cursive; }
.charca-list li:nth-child(odd) { color: #060; }