/* extinction.meme · secrets & easter eggs (pairs with secrets.js). CSP-clean: no inline styles, no external requests
   (the hard hat is a data: svg, allowed by img-src). Everything is prefixed xz-. Static when motion is off: the base style of every
   element is its visible, finished state; animations only add the way in/out (they start from a hidden state with `backwards`). */

/* ---------- the layer everything decorative lives in (never takes a click, never scrolls the page) ---------- */
.xz-fx { position: fixed; inset: 0; z-index: 87; pointer-events: none; overflow: hidden; }
.xz-fx > * { position: absolute; }
.xz-fx > .xz-click, .xz-click { pointer-events: auto; cursor: pointer; }
.xz-sr { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- the "secret found" badge + a stand-in toast ---------- */
.xz-badge {
  position: fixed; top: calc(10px + env(safe-area-inset-top)); left: 50%; z-index: 89; transform: translateX(-50%);
  max-width: calc(100vw - 24px); padding: 7px 16px; border: 3px solid var(--line); border-radius: 999px; background: var(--butter); color: var(--pastel-ink, #2b1020);
  font: 700 15px/1.25 var(--body); text-align: center; box-shadow: 3px 3px 0 var(--shade); pointer-events: none; animation: xz-badge 3.6s ease both;
}
.xz-badge b { color: var(--hot); }
:root[data-theme="dark"] .xz-badge b { color: #b02a00; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .xz-badge b { color: #b02a00; } }
.xz-badge i { font-style: normal; background: var(--paper); color: var(--ink); border: 2px solid var(--line); border-radius: 999px; padding: 0 7px; margin-left: 3px; font-size: 13px; }
@keyframes xz-badge {
  0% { opacity: 0; transform: translate(-50%, -26px) scale(.9); }
  10%, 86% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -12px) scale(1); }
}
.xz-toast {
  position: fixed; left: 50%; bottom: 26px; z-index: 88; transform: translateX(-50%); max-width: calc(100vw - 32px); padding: 10px 18px;
  background: var(--toast-bg); color: var(--toast-fg); border-radius: 999px; font-weight: 700; font-size: 17px; box-shadow: 4px 4px 0 var(--hot); text-align: center; pointer-events: none;
}

/* ---------- speech bubbles ---------- */
.xz-say {
  position: absolute; width: max-content; max-width: min(240px, calc(100vw - 130px)); padding: 6px 12px; border: 3px solid var(--line); border-radius: 16px;
  background: var(--card); color: var(--ink); font: 700 15px/1.25 var(--body); box-shadow: 3px 3px 0 var(--shade);
}
.xz-say.xz-tiny { max-width: 190px; font-size: 14px; }

/* ---------- meme-chan ---------- */
.xz-chan { display: block; width: 100%; height: auto; overflow: visible; }
.xz-c-head { fill: #fff; stroke: #2b1020; stroke-width: 3.5; stroke-linejoin: round; }
.xz-c-ink, .xz-c-ink * { fill: #2b1020; }
.xz-c-ink .xz-c-shine { fill: #fff; }
.xz-c-line { fill: none; stroke: #2b1020; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.xz-c-blush, .xz-c-blush * { fill: #ff9ccf; }
.xz-c-bow path { fill: #ff3d9a; stroke: #2b1020; stroke-width: 2.6; stroke-linejoin: round; }
.xz-c-bow circle { fill: #ff9ccf; stroke: #2b1020; stroke-width: 2.6; }
.xz-chan .xz-eL-shut, .xz-chan .xz-eR-shut, .xz-chan .xz-eR-wink { display: none; }
.xz-chan[data-mood="wink"] .xz-eR-open { display: none; }
.xz-chan[data-mood="wink"] .xz-eR-wink { display: inline; }
.xz-chan[data-mood="sleep"] .xz-eL-open, .xz-chan[data-mood="sleep"] .xz-eR-open { display: none; }
.xz-chan[data-mood="sleep"] .xz-eL-shut, .xz-chan[data-mood="sleep"] .xz-eR-shut { display: inline; }

/* meme-chan hopping out of the logo (7 pokes) */
.xz-pal { width: 78px; }
.xz-pal .xz-say { left: 86px; top: 4px; }
.xz-pal .xz-say::before { content: ""; position: absolute; left: -11px; top: 14px; width: 12px; height: 12px; background: var(--card); border-left: 3px solid var(--line); border-bottom: 3px solid var(--line); transform: rotate(45deg); }
.xz-pop { animation: xz-pop .5s cubic-bezier(.3, 1.7, .5, 1) backwards; transform-origin: 30% 0; }
@keyframes xz-pop { 0% { opacity: 0; transform: translateY(-34px) scale(.4) rotate(-14deg); } 100% { opacity: 1; transform: none; } }

/* meme-chan asleep in the bottom-left corner */
.xz-sleeper { left: 10px; bottom: calc(10px + env(safe-area-inset-bottom)); width: 56px; animation: xz-rise .8s ease-out backwards; }
.xz-sleeper .xz-chan { animation: xz-breathe 3.2s ease-in-out infinite; transform-origin: 50% 100%; }
.xz-zzz { position: absolute; left: 44px; font: 400 18px/1 var(--display); color: var(--hot); -webkit-text-stroke: 1px var(--title-stroke, #2b1020); paint-order: stroke fill; }
.xz-z1 { top: -2px; animation: xz-z 2.8s ease-in-out infinite; }
.xz-z2 { top: -2px; font-size: 14px; animation: xz-z 2.8s 0.9s ease-in-out infinite; }
.xz-z3 { top: -2px; font-size: 22px; animation: xz-z 2.8s 1.8s ease-in-out infinite; }
.xz-sleeper .xz-say { left: 62px; bottom: 22px; top: auto; white-space: nowrap; }
.xz-sleeper .xz-say::before { content: ""; position: absolute; left: -11px; bottom: 6px; width: 12px; height: 12px; background: var(--card); border-left: 3px solid var(--line); border-bottom: 3px solid var(--line); transform: rotate(45deg); }
.xz-woke .xz-chan { animation: xz-jolt .35s ease-out; }
@keyframes xz-rise { 0% { opacity: 0; transform: translateY(70px); } 100% { opacity: 1; transform: none; } }
@keyframes xz-breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05, .96); } }
@keyframes xz-z { 0% { opacity: 0; transform: translate(0, 8px) scale(.7); } 25% { opacity: 1; } 100% { opacity: 0; transform: translate(14px, -26px) scale(1.2); } }
@keyframes xz-jolt { 0% { transform: translateY(0); } 30% { transform: translateY(-10px) scale(1.08); } 100% { transform: translateY(0); } }

/* ---------- falling things: paperclips, pi ---------- */
.xz-drop { top: -40px; font-size: 26px; line-height: 1; animation: xz-fall var(--t, 3s) cubic-bezier(.3, .4, .6, 1) both; }
@keyframes xz-fall { 0% { opacity: 1; transform: translate(0, 0) rotate(0); } 100% { opacity: 1; transform: translate(var(--dx, 0), 112vh) rotate(var(--rot, 360deg)); } }

/* ---------- pause ---------- */
html[data-xz-paused] *, html[data-xz-paused] *::before, html[data-xz-paused] *::after { animation-play-state: paused !important; }
.xz-fx > .xz-pause { inset: 0; display: grid; place-items: center; background: rgba(255, 255, 255, .22); -webkit-backdrop-filter: grayscale(.9) brightness(.96); backdrop-filter: grayscale(.9) brightness(.96); }
:root[data-theme="dark"] .xz-pause { background: rgba(0, 0, 0, .28); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .xz-pause { background: rgba(0, 0, 0, .28); } }
.xz-pause-card {
  display: grid; gap: 2px; justify-items: center; padding: 14px 30px 12px; border: 4px solid var(--line); border-radius: 22px; background: var(--butter); color: var(--pastel-ink, #2b1020);
  box-shadow: 7px 7px 0 var(--shade); transform: rotate(-2deg); max-width: calc(100vw - 32px);
}
.xz-pause-card b { font: 400 clamp(34px, 9vw, 56px)/1 var(--display); letter-spacing: .02em; }
.xz-pause-card small { font: 700 20px/1.1 var(--hand); }

/* ---------- the shoggoth (smiley mask) peeking in from the right edge ---------- */
.xz-fx > .xz-shog { right: 0; bottom: 16vh; width: 150px; transform: translateX(6%); }
.xz-shog-in { animation: xz-shog-in .7s cubic-bezier(.3, 1.4, .5, 1) backwards; }
.xz-shogsvg { display: block; width: 100%; height: auto; overflow: visible; animation: xz-wig 1.6s ease-in-out .7s infinite; transform-origin: 100% 60%; }
.xz-sh-out { fill: none; stroke: var(--line); stroke-width: 13; stroke-linecap: round; }
.xz-sh-tent { fill: none; stroke: #4a3570; stroke-width: 8; stroke-linecap: round; }
.xz-sh-body { fill: #4a3570; stroke: var(--line); stroke-width: 3; stroke-linejoin: round; }
.xz-sh-eye { fill: #fff; stroke: #2b1020; stroke-width: 1.4; }
.xz-sh-mask { fill: #ffd23f; stroke: #2b1020; stroke-width: 3; }
.xz-shog .xz-shog-say { right: 118px; top: 36%; left: auto; }
.xz-shog .xz-shog-say::before { content: ""; position: absolute; right: -9px; top: 12px; width: 11px; height: 11px; background: var(--card); border-right: 3px solid var(--line); border-top: 3px solid var(--line); transform: rotate(45deg); }
@keyframes xz-shog-in { 0% { transform: translateX(120%); } 100% { transform: none; } }
@keyframes xz-wig { 0%, 100% { transform: rotate(-1.5deg); } 50% { transform: rotate(2deg) scale(1.02); } }
.xz-fx > .xz-shog.xz-leave .xz-shog-in { animation: xz-shog-out .4s ease-in forwards; }
@keyframes xz-shog-out { to { transform: translateX(125%); } }

/* ---------- p(doom) card ---------- */
.xz-fx > .xz-doom {
  top: 86px; left: 50%; display: grid; justify-items: center; gap: 0; min-width: 210px; max-width: calc(100vw - 32px); padding: 8px 22px 10px; text-align: center;
  border: 3px solid var(--line); border-radius: 20px; background: var(--card); color: var(--ink); box-shadow: 5px 5px 0 var(--shade); transform: translateX(-50%) rotate(-1.2deg);
  animation: xz-doom-in .45s cubic-bezier(.3, 1.6, .5, 1) backwards;
}
.xz-doom-l { font: 700 15px/1 var(--body); color: var(--ink-soft); }
.xz-doom-n { font: 400 clamp(38px, 11vw, 58px)/1.05 var(--display); color: var(--hot); -webkit-text-stroke: 2px var(--title-stroke); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--title-shadow); min-width: 3ch; }
.xz-doom small { font: 700 17px/1.2 var(--hand); color: var(--ink-soft); max-width: 300px; }
@keyframes xz-doom-in { 0% { opacity: 0; transform: translateX(-50%) translateY(-30px) rotate(-6deg) scale(.7); } 100% { opacity: 1; transform: translateX(-50%) rotate(-1.2deg); } }
.xz-fx > .xz-doom.xz-leave { animation: xz-doom-out .35s ease-in forwards; }
@keyframes xz-doom-out { to { opacity: 0; transform: translateX(-50%) translateY(-24px) rotate(4deg) scale(.85); } }

/* ---------- clippy ---------- */
.xz-clippy {
  position: fixed; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); z-index: 86; display: grid; grid-template-columns: minmax(0, 1fr) 46px; gap: 4px 6px; align-items: end;
  width: min(300px, calc(100vw - 24px)); padding: 12px 12px 10px 14px; border: 3px solid var(--line); border-radius: 18px 18px 6px 18px; background: #fffbd0; color: #2b1020;
  box-shadow: 5px 5px 0 var(--shade); animation: xz-clip-in .5s cubic-bezier(.3, 1.6, .5, 1) backwards;
}
.xz-clip-msg { grid-column: 1; margin: 0 20px 0 0; font: 700 15.5px/1.3 var(--body); }
.xz-clip-row { grid-column: 1; display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.xz-clip-row:empty { display: none; }
.xz-clip-pal { grid-column: 2; grid-row: 1 / span 2; align-self: end; width: 46px; }
.xz-clipsvg { display: block; width: 100%; height: auto; animation: xz-clip-wob 2.4s ease-in-out infinite; transform-origin: 50% 100%; }
.xz-clip-wire { fill: none; stroke: #8f99a6; stroke-width: 4.2; stroke-linecap: round; stroke-linejoin: round; }
.xz-clip-eye { fill: #fff; stroke: #2b1020; stroke-width: 1.3; }
.xz-clip-brow { stroke-width: 1.6; }
.xz-clip-x { position: absolute; top: 4px; right: 4px; width: 26px; height: 26px; font-size: 12px; color: #2b1020; background: #fff; }
.xz-clippy .btn { color: #2b1020; }
.xz-clippy .btn:not(.hot):not(.butter) { background: #fff; }
.xz-clippy .btn.hot { color: #fff; }
.xz-clippy.xz-leave { animation: xz-clip-out .35s ease-in forwards; }
@keyframes xz-clip-in { 0% { opacity: 0; transform: translateY(40px) scale(.8); } 100% { opacity: 1; transform: none; } }
@keyframes xz-clip-out { to { opacity: 0; transform: translateY(30px) scale(.85); } }
@keyframes xz-clip-wob { 0%, 100% { transform: rotate(-3deg); } 50% { transform: rotate(3deg); } }

/* ---------- sudo (a tiny terminal) ---------- */
.xz-fx > .xz-term {
  top: 84px; left: 12px; width: min(350px, calc(100vw - 24px)); padding: 10px 14px 12px; border: 3px solid var(--line); border-radius: 14px; background: #1b1424; color: #b8ffd9;
  font: 700 14px/1.55 ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace; box-shadow: 5px 5px 0 var(--shade); animation: xz-term-in .3s ease-out backwards;
}
.xz-term p { margin: 0; overflow-wrap: anywhere; }
.xz-term .xz-term-err { color: #ff9ccf; }
.xz-term .xz-hide { visibility: hidden; }
.xz-fx > .xz-term.xz-leave { animation: xz-term-out .3s ease-in forwards; }
@keyframes xz-term-in { 0% { opacity: 0; transform: translateY(-14px); } 100% { opacity: 1; transform: none; } }
@keyframes xz-term-out { to { opacity: 0; transform: translateY(-10px); } }

/* ---------- the dot / asteroid / dinosaur ---------- */
.xz-fx > .xz-rock { font-size: 40px; line-height: 1; transform: translate(-50%, -50%); animation: xz-rock .8s cubic-bezier(.5, 0, .9, .6) both; }
@keyframes xz-rock { 0% { opacity: .2; transform: translate(calc(-50% + var(--dx, 300px)), calc(-50% + var(--dy, -400px))) scale(.5) rotate(0); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1.5) rotate(40deg); } }
.xz-fx > .xz-boom { font-size: 54px; line-height: 1; transform: translate(-50%, -50%); animation: xz-boom .6s cubic-bezier(.3, 1.8, .5, 1) backwards; }
@keyframes xz-boom { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.2); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
.xz-fx > .xz-rex { display: flex; align-items: flex-end; gap: 4px; animation: xz-rex .55s cubic-bezier(.3, 1.7, .5, 1) .15s backwards; }
.xz-rex-emoji { font-size: 46px; line-height: 1; display: block; }
.xz-rex .xz-say { position: static; max-width: min(190px, calc(100vw - 110px)); margin-bottom: 26px; }
@keyframes xz-rex { 0% { opacity: 0; transform: translateY(40px) scale(.6); } 100% { opacity: 1; transform: none; } }
.hero-title .dot.xz-squish { animation: xz-squish .7s ease-out; }
@keyframes xz-squish { 0% { transform: scale(1, 1); } 25% { transform: scale(1.7, .35) translateY(18%); } 60% { transform: scale(.9, 1.15); } 100% { transform: none; } }

/* ---------- friday the 13th ---------- */
.xz-fx > .xz-cat { left: 0; bottom: 6px; width: 92px; animation: xz-walk 9.6s linear both; }
.xz-fx > .xz-cat.xz-cat-still { left: 14px; animation: none; }
.xz-catsvg { display: block; width: 100%; height: auto; overflow: visible; animation: xz-bob .56s ease-in-out infinite; }
.xz-cat-f { fill: #1a1020; stroke: #ff9ccf; stroke-width: 1.8; stroke-linejoin: round; }
.xz-cat-tail { fill: none; stroke: #1a1020; stroke-width: 6; stroke-linecap: round; }
.xz-cat-leg { fill: none; stroke: #1a1020; stroke-width: 6; stroke-linecap: round; }
.xz-cat-eye { fill: #ffe45e; }
@keyframes xz-walk { 0% { transform: translateX(-110px); } 100% { transform: translateX(calc(100vw + 20px)); } }
@keyframes xz-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }

/* ---------- leaving ---------- */
.xz-fx > .xz-pal.xz-leave, .xz-fx > .xz-sleeper.xz-leave, .xz-fx > .xz-rex.xz-leave, .xz-fx > .xz-boom.xz-leave { animation: xz-out .38s ease-in forwards; }
@keyframes xz-out { to { opacity: 0; transform: translateY(-14px) scale(.85); } }

/* ---------- AI safety mode (konami): everything gets a tiny hard hat ---------- */
html[data-xz-hat] .grid:not(.hell-grid) .tile::after, html[data-xz-hat] .card.is-top::after, html[data-xz-hat] .marquee button::after, html[data-xz-hat] .lb-pic::after, html[data-xz-hat] .logo::after {
  content: ""; position: absolute; width: 40px; height: 27px; z-index: 3; pointer-events: none; transform: rotate(var(--xz-r, 7deg));
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 32'%3E%3Cpath d='M7 25C7 12 14 5 24 5s17 7 17 20z' fill='%23ffd23f' stroke='%232b1020' stroke-width='3' stroke-linejoin='round'/%3E%3Cpath d='M24 5v20M15 9l2 16M33 9l-2 16' fill='none' stroke='%232b1020' stroke-width='2.2' stroke-linecap='round'/%3E%3Crect x='2' y='23' width='44' height='6.5' rx='3.2' fill='%23ff9f1c' stroke='%232b1020' stroke-width='3'/%3E%3C/svg%3E") center / contain no-repeat;
  animation: xz-hat .5s cubic-bezier(.3, 1.7, .5, 1) backwards;
}
/* inside the tile: the pile is a multi-column grid, which clips anything poking out above a column */
html[data-xz-hat] .grid:not(.hell-grid) .tile::after { top: -2px; right: 14px; width: 36px; height: 24px; }
html[data-xz-hat] .card.is-top::after { top: -22px; right: 44px; --xz-r: -6deg; width: 52px; height: 35px; }
html[data-xz-hat] .marquee button { position: relative; }
html[data-xz-hat] .marquee button::after { top: 2px; right: 5px; width: 32px; height: 22px; }
html[data-xz-hat] .lb-pic::after { top: 8px; left: 10px; --xz-r: -8deg; width: 46px; height: 31px; }
html[data-xz-hat] .logo { position: relative; }
html[data-xz-hat] .logo::after { top: -5px; left: 5px; width: 30px; height: 20px; --xz-r: -9deg; }
@keyframes xz-hat { 0% { opacity: 0; transform: translateY(-22px) rotate(calc(var(--xz-r, 7deg) + 30deg)); } 100% { opacity: 1; transform: rotate(var(--xz-r, 7deg)); } }

/* ---------- the shy word in the footer (looks exactly like the text around it) ---------- */
.xz-word { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: inherit; text-decoration: none; }
.xz-word:hover { text-decoration: underline dotted; text-underline-offset: 3px; }

/* ---------- the count in settings, and the back room ---------- */
.xz-count { margin: 10px 0 0; text-align: center; opacity: .75; font-size: 13px; }
dialog.xz-room { width: min(520px, calc(100vw - 20px)); }
.xz-room-head { display: flex; align-items: center; gap: 12px; margin: 0 0 6px; }
.xz-room-head h2 { margin: 0 40px 0 0; }
.xz-room-chan { position: relative; flex: none; width: 84px; padding: 12px 0 0; }
.xz-room-chan .xz-say { left: 4px; top: -16px; font-size: 13px; padding: 3px 9px; white-space: nowrap; transform: rotate(-4deg); }
.xz-room-chan .xz-say::before { content: ""; position: absolute; left: 20px; bottom: -9px; width: 10px; height: 10px; background: var(--card); border-right: 3px solid var(--line); border-bottom: 3px solid var(--line); transform: rotate(45deg); }
.xz-room-sub { margin: 4px 0 12px; color: var(--ink-soft); font-size: 16px; }
.xz-meter { display: grid; gap: 5px; margin: 0 0 12px; font: 700 16px/1.2 var(--body); }
.xz-bar { height: 14px; border: 3px solid var(--line); border-radius: 999px; background: var(--card); overflow: hidden; }
.xz-bar i { display: block; height: 100%; background: repeating-linear-gradient(-45deg, var(--hot) 0 9px, var(--pink) 9px 18px); border-radius: 999px; }
.xz-list { list-style: none; margin: 0 0 10px; padding: 0; display: grid; gap: 6px; }
.xz-list li { display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 0 8px; align-items: baseline; padding: 6px 10px; border: 2.5px solid var(--line); border-radius: 12px; background: var(--card); }
.xz-list .xz-tick { grid-row: 1 / span 2; align-self: center; width: 24px; height: 24px; display: grid; place-items: center; border: 2.5px solid var(--line); border-radius: 50%; font-weight: 700; font-size: 14px; background: var(--paper); }
.xz-list .xz-got .xz-tick { background: var(--mint); color: #2b1020; }
.xz-list .xz-lost { border-style: dashed; }
.xz-list .xz-lost b { color: var(--ink-soft); letter-spacing: .1em; }
.xz-list b { font-size: 16px; line-height: 1.2; }
.xz-list small { font-size: 14px; line-height: 1.3; color: var(--ink-soft); }
.xz-gold { margin: 0 0 8px; padding: 8px 12px; border: 3px solid var(--line); border-radius: 14px; background: var(--butter); color: var(--pastel-ink, #2b1020); font-weight: 700; box-shadow: 3px 3px 0 var(--shade); }
.xz-gold[hidden] { display: none; }
.xz-season { margin: 0 0 12px; }
.xz-forget { opacity: .75; }

/* =========================================================== wave 2: toys, words, little moments, rare sightings =========================================================== */

/* ---------- floating "+1 ✨" and sparkle bursts (click-through, gone in a second) ---------- */
.xz-fx > .xz-plus { transform: translate(-50%, -50%); font: 400 clamp(22px, 5vw, 28px)/1 var(--display); color: var(--hot); -webkit-text-stroke: 1.5px var(--title-stroke, #2b1020); paint-order: stroke fill; white-space: nowrap; text-shadow: 2px 2px 0 var(--title-shadow, #2b1020); animation: xz-plus 1.15s ease-out forwards; }
.xz-fx > .xz-plus-big { font-size: clamp(27px, 6vw, 38px); }
@keyframes xz-plus { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.6); } 20% { opacity: 1; transform: translate(-50%, -80%) scale(1.15); } 100% { opacity: 0; transform: translate(-50%, -260%) scale(1); } }
.xz-fx > .xz-spark { font-size: 20px; line-height: 1; transform: translate(-50%, -50%); animation: xz-spark .95s cubic-bezier(.2, .8, .3, 1) both; }
@keyframes xz-spark { 0% { opacity: 1; transform: translate(-50%, -50%) scale(.5) rotate(0); } 100% { opacity: 0; transform: translate(calc(-50% + var(--bx, 0px)), calc(-50% + var(--by, 0px))) scale(1.1) rotate(var(--br, 0deg)); } }

/* ---------- the toy shelf in the footer ---------- */
.xz-desk { margin: 20px auto 6px; max-width: 540px; padding-top: 14px; border-top: 3px dashed var(--line); }
.xz-desk-cap { margin: 0 0 10px; font: 700 21px/1.1 var(--hand); color: var(--ink-soft); }
.xz-toys { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: center; }
.xz-toy {
  display: grid; place-items: center; min-width: 58px; min-height: 54px; padding: 4px 10px; border: 3px solid var(--line); border-radius: 16px; background: var(--card); color: var(--ink);
  box-shadow: 3px 3px 0 var(--shade); transition: transform .1s, box-shadow .1s; touch-action: manipulation; user-select: none; -webkit-tap-highlight-color: transparent;
}
.xz-toy:hover { transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--shade); }
.xz-toy:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--shade); }
.xz-spinsvg { display: block; width: 42px; height: 42px; overflow: visible; transform-origin: 50% 50%; }
.xz-spin-arm { stroke: var(--pink); stroke-width: 10; stroke-linecap: round; }
.xz-spin-lobe { stroke: var(--line); stroke-width: 2.6; }
.xz-lobe0 { fill: var(--sky); } .xz-lobe1 { fill: var(--butter); } .xz-lobe2 { fill: var(--mint); }
.xz-spin-hub { fill: var(--hot); stroke: var(--line); stroke-width: 2.6; }
.xz-spin-hole { fill: var(--paper); stroke: var(--line); stroke-width: 1.6; }
.xz-duck-e { display: block; font-size: 34px; line-height: 1; }
.xz-squish2 { animation: xz-squish2 .4s ease-out; }
@keyframes xz-squish2 { 0% { transform: scale(1, 1); } 30% { transform: scale(1.2, .75); } 60% { transform: scale(.92, 1.12); } 100% { transform: scale(1, 1); } }
.xz-cradle { position: relative; width: 98px; height: 62px; padding: 0; }
.xz-cr-bar { position: absolute; left: 7px; right: 7px; top: 8px; height: 5px; border-radius: 3px; background: var(--hot); border: 1.5px solid var(--line); }
.xz-cr-w { position: absolute; top: 11px; width: 14px; height: 44px; transform-origin: 7px 2px; }
.xz-cr-0 { left: 14px; } .xz-cr-1 { left: 28px; } .xz-cr-2 { left: 42px; } .xz-cr-3 { left: 56px; } .xz-cr-4 { left: 70px; }
.xz-cr-str { display: block; width: 1.5px; height: 28px; margin: 0 auto; background: var(--line); }
.xz-cr-ball { display: block; width: 14px; height: 14px; margin-top: -1px; border-radius: 50%; border: 1.5px solid var(--line); background: radial-gradient(circle at 32% 28%, #fff 0 18%, #c4ccd6 45%, #78828f 100%); }
.xz-cradle.xz-swing .xz-cr-0 { animation: xz-cr-l 1.3s linear 6; }
.xz-cradle.xz-swing .xz-cr-4 { animation: xz-cr-r 1.3s linear 6; }
@keyframes xz-cr-l { 0% { transform: rotate(36deg); animation-timing-function: cubic-bezier(.5, 0, 1, .55); } 25% { transform: rotate(0); } 75% { transform: rotate(0); animation-timing-function: cubic-bezier(0, .45, .5, 1); } 100% { transform: rotate(36deg); } }
@keyframes xz-cr-r { 0%, 25% { transform: rotate(0); animation-timing-function: cubic-bezier(0, .45, .5, 1); } 50% { transform: rotate(-36deg); animation-timing-function: cubic-bezier(.5, 0, 1, .55); } 75%, 100% { transform: rotate(0); } }
.xz-cradle[data-pos="l"] .xz-cr-0 { transform: rotate(32deg); }
.xz-cradle[data-pos="r"] .xz-cr-4 { transform: rotate(-32deg); }
.xz-dnp { min-width: 0; padding: 8px 14px; border-radius: 12px; background: var(--hot); color: #fff; font: 700 15px/1.1 var(--body); }
.xz-dnp.xz-dnp-done { background: var(--butter); color: var(--pastel-ink, #2b1020); }
.xz-shake { animation: xz-shake .5s ease-in-out; }
@keyframes xz-shake { 0%, 100% { transform: translateX(0); } 15% { transform: translateX(-5px) rotate(-3deg); } 35% { transform: translateX(5px) rotate(3deg); } 55% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.xz-wrap { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; width: min(340px, 100%); margin: 14px auto 0; padding: 8px; border: 3px solid var(--line); border-radius: 14px; background: rgba(169, 220, 255, .28);
  touch-action: none; overscroll-behavior-x: none; } /* a finger dragging across the sheet pops bubbles: it must not scroll the page or trigger the browser's swipe-back */
.xz-bub {
  width: 100%; aspect-ratio: 1; padding: 0; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .95); touch-action: manipulation; -webkit-tap-highlight-color: transparent;
  background: radial-gradient(circle at 32% 28%, #fff 0 12%, rgba(255, 255, 255, .4) 13% 36%, rgba(150, 205, 255, .6) 72%); box-shadow: inset -2px -3px 4px rgba(60, 120, 200, .35), 1px 2px 0 rgba(43, 16, 32, .18);
  transition: transform .08s;
}
.xz-bub:hover { transform: scale(1.08); }
.xz-bub.xz-popped { background: rgba(150, 205, 255, .16); box-shadow: inset 1px 2px 3px rgba(43, 16, 32, .28); transform: scale(.82); border-color: rgba(255, 255, 255, .4); animation: xz-popb .18s ease-out; }
@keyframes xz-popb { 0% { transform: scale(1.25); } 100% { transform: scale(.82); } }

/* ---------- the skull logo's eyes (an overlay that follows the cursor; blinks now and then) ---------- */
.logo { position: relative; }
.xz-eyes { position: absolute; pointer-events: none; overflow: visible; }
.xz-eye-bg { fill: #fff; }
.xz-eye-shine { fill: #fff; }
.xz-eye-ball { transition: transform .09s ease-out; }
.xz-blink .xz-eye-ball ellipse { transform-box: fill-box; transform-origin: center; transform: scaleY(.1); }

/* ---------- the little face, hover tips, shimmer ---------- */
.xz-kao-pop { display: inline-block; animation: xz-kao .35s cubic-bezier(.3, 1.7, .5, 1); }
@keyframes xz-kao { 0% { transform: scale(.6) rotate(-8deg); } 100% { transform: none; } }
.marker.xz-shimmer {
  background-image: linear-gradient(100deg, transparent 25%, rgba(255, 255, 255, .95) 50%, transparent 75%), linear-gradient(transparent 55%, var(--butter) 55%, var(--butter) 90%, transparent 90%);
  background-size: 220% 100%, 100% 100%; background-repeat: no-repeat; animation: xz-shim 1.2s ease-out;
}
@keyframes xz-shim { 0% { background-position: 130% 0, 0 0; } 100% { background-position: -130% 0, 0 0; } }
.xz-fx > .xz-tip { max-width: min(220px, calc(100vw - 16px)); text-align: center; animation: xz-doom-in .3s ease-out backwards; transform: none; }

/* ---------- combo ---------- */
.xz-fx > .xz-combo { transform: translateX(-50%); display: grid; justify-items: center; text-align: center; }
.xz-combo b { font: 400 clamp(34px, 9vw, 50px)/1 var(--display); color: var(--hot); -webkit-text-stroke: 2px var(--title-stroke, #2b1020); paint-order: stroke fill; text-shadow: 3px 3px 0 var(--title-shadow, #2b1020); }
.xz-combo small { margin-top: 2px; padding: 0 10px; border: 2.5px solid var(--line); border-radius: 999px; background: var(--butter); color: var(--pastel-ink, #2b1020); font: 700 17px/1.2 var(--hand); }
.xz-combo-bump { animation: xz-cbump .35s cubic-bezier(.3, 1.8, .5, 1); }
@keyframes xz-cbump { 0% { transform: translateX(-50%) scale(.6) rotate(-6deg); } 100% { transform: translateX(-50%) scale(1) rotate(0); } }

/* ---------- meme-chan waving from a corner ---------- */
.xz-fx > .xz-corner { bottom: calc(14px + env(safe-area-inset-bottom)); width: 68px; animation: xz-rise .6s cubic-bezier(.3, 1.5, .5, 1) backwards; }
.xz-corner.xz-right { right: 14px; }
.xz-corner.xz-left { left: 14px; }
.xz-corner.xz-right .xz-say { left: auto; right: 76px; }
.xz-corner.xz-left .xz-say { left: 76px; }
.xz-corner.xz-right .xz-say::before { left: auto; right: -11px; border-left: 0; border-bottom: 0; border-right: 3px solid var(--line); border-top: 3px solid var(--line); }
.xz-wavy .xz-chan { animation: xz-wavy .55s ease-in-out 5; transform-origin: 50% 100%; }
@keyframes xz-wavy { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-9deg); } 75% { transform: rotate(9deg); } }

/* ---------- the kitten (meow) ---------- */
.xz-fx > .xz-kit { left: 28%; bottom: 0; width: 96px; transform: translateY(36%); animation: xz-peek .6s cubic-bezier(.3, 1.5, .5, 1) backwards; }
.xz-kit .xz-say { left: 102px; top: -4px; white-space: nowrap; }
.xz-kitsvg { display: block; width: 100%; height: auto; overflow: visible; }
.xz-kit-f { fill: #fff7ee; stroke: #2b1020; stroke-width: 3; stroke-linejoin: round; }
.xz-kit-in { fill: #ff9ccf; }
.xz-kit-nose { fill: #ff7aa8; stroke: #2b1020; stroke-width: 1.4; stroke-linejoin: round; }
.xz-kit-mouth, .xz-kit-whisk { stroke-width: 2; }
@keyframes xz-peek { 0% { transform: translateY(115%); } 100% { transform: translateY(36%); } }
.xz-fx > .xz-kit.xz-leave { animation: xz-kit-out .4s ease-in forwards; }
@keyframes xz-kit-out { to { transform: translateY(120%); } }

/* ---------- a little window (agi.exe, alignment.exe) and a letter (keltan) ---------- */
.xz-fx > .xz-win { top: 84px; right: 12px; width: min(300px, calc(100vw - 24px)); border: 3px solid var(--line); border-radius: 12px; background: var(--paper); color: var(--ink); box-shadow: 5px 5px 0 var(--shade); overflow: hidden; animation: xz-term-in .3s ease-out backwards; }
.xz-win-bar { display: flex; align-items: center; gap: 5px; padding: 5px 10px; background: var(--lilac); color: var(--pastel-ink, #2b1020); border-bottom: 3px solid var(--line); font: 700 14px/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; }
.xz-win-bar i { width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--line); background: var(--paper); }
.xz-win-bar b { margin-left: 6px; }
.xz-win-body { display: grid; gap: 8px; padding: 10px 12px 12px; }
.xz-win-t { margin: 0; font: 700 18px/1.2 var(--body); }
.xz-win-meter { height: 14px; border: 3px solid var(--line); border-radius: 999px; background: var(--card); overflow: hidden; }
.xz-win-meter i { display: block; width: 0; height: 100%; background: repeating-linear-gradient(-45deg, var(--hot) 0 8px, var(--pink) 8px 16px); transition: width 1.2s cubic-bezier(.2, .7, .2, 1); }
.xz-win-s { margin: 0; min-height: 1.3em; font: 700 16px/1.3 var(--hand); color: var(--ink-soft); }
.xz-fx > .xz-win.xz-leave { animation: xz-term-out .3s ease-in forwards; }
.xz-fx > .xz-letter {
  left: 50%; top: 32%; width: min(330px, calc(100vw - 32px)); padding: 16px 18px 14px; text-align: center; transform: translate(-50%, -50%) rotate(-2deg);
  border: 3px solid var(--line); border-radius: 18px; background: #fff8d8; color: #2b1020; box-shadow: 6px 6px 0 var(--shade); animation: xz-letter .6s cubic-bezier(.3, 1.5, .5, 1) backwards;
}
.xz-letter-e { display: block; font-size: 38px; line-height: 1; }
.xz-letter p { margin: 6px 0 0; font: 700 19px/1.3 var(--hand); }
@keyframes xz-letter { 0% { opacity: 0; transform: translate(-50%, -20%) rotate(-12deg) scale(.5); } 100% { opacity: 1; transform: translate(-50%, -50%) rotate(-2deg); } }
.xz-fx > .xz-letter.xz-leave { animation: xz-letter-out .35s ease-in forwards; }
@keyframes xz-letter-out { to { opacity: 0; transform: translate(-50%, -70%) rotate(3deg) scale(.9); } }

/* ---------- the duck that waddles across (type "duck") ---------- */
.xz-fx > .xz-duckwalk { left: 0; bottom: 6px; font-size: 40px; line-height: 1; animation: xz-walk 6.2s linear both; }
.xz-fx > .xz-duckwalk.xz-duckwalk-still { left: 40%; animation: none; }
.xz-duckwalk-e { display: block; transform-origin: 50% 100%; animation: xz-waddle .5s ease-in-out infinite; }
@keyframes xz-waddle { 0%, 100% { transform: scaleX(-1) rotate(-9deg); } 50% { transform: scaleX(-1) rotate(9deg) translateY(-3px); } }
.xz-duckwalk-still .xz-duckwalk-e { transform: scaleX(-1); }

/* ---------- rare sightings ---------- */
.xz-fx > .xz-ufo { width: 76px; }
.xz-ufosvg { display: block; width: 100%; height: auto; overflow: visible; animation: xz-ufo-bob .7s ease-in-out infinite; }
.xz-ufo-dome { fill: rgba(190, 235, 255, .88); stroke: #2b1020; stroke-width: 2.4; }
.xz-ufo-alien { fill: #7be39a; stroke: #2b1020; stroke-width: 1.6; }
.xz-ufo-body { fill: #c8cfe0; stroke: #2b1020; stroke-width: 2.6; }
.xz-ufo-light { fill: #ffe45e; stroke: #2b1020; stroke-width: 1.2; animation: xz-lights .9s ease-in-out infinite; }
@keyframes xz-ufo-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes xz-lights { 0%, 100% { fill: #ffe45e; } 50% { fill: #ff9ccf; } }
.xz-fx > .xz-beam { background: linear-gradient(180deg, rgba(255, 243, 130, .78), rgba(255, 243, 130, .14)); clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); transform-origin: 50% 0; animation: xz-beam .4s ease-out backwards; }
@keyframes xz-beam { from { opacity: 0; transform: scaleY(.2); } }
.grid .tile.xz-shiny { box-shadow: 0 0 0 3px #ffd23f, 0 0 18px 4px rgba(255, 210, 63, .85), 4px 4px 0 var(--shade); }
.tile.xz-shiny::before { content: "✨"; position: absolute; top: -14px; left: -10px; z-index: 4; font-size: 26px; line-height: 1; pointer-events: none; animation: xz-twinkle 1.6s ease-in-out infinite; }
.tile.xz-shiny .open { position: relative; overflow: hidden; }
.tile.xz-shiny .open::after { content: ""; position: absolute; inset: 0; background: linear-gradient(105deg, transparent 30%, rgba(255, 255, 255, .78) 48%, rgba(255, 243, 170, .55) 52%, transparent 70%); transform: translateX(-120%); animation: xz-shine 2.6s ease-in-out infinite; pointer-events: none; }
@keyframes xz-shine { 0%, 55% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
@keyframes xz-twinkle { 0%, 100% { transform: scale(.85) rotate(-8deg); opacity: .8; } 50% { transform: scale(1.2) rotate(8deg); opacity: 1; } }
.xz-glitch { display: inline-block; animation: xz-glitch .8s steps(2, end) both; text-shadow: 2px 0 #ff2d6f, -2px 0 #2de1ff; }
@keyframes xz-glitch {
  0% { transform: translate(0) skew(0); } 12% { transform: translate(-3px, 1px) skew(-9deg); opacity: .7; } 24% { transform: translate(3px, -1px) skew(7deg); opacity: 1; }
  38% { transform: translate(-2px, 0) scaleX(1.25); filter: hue-rotate(90deg); } 52% { transform: translate(2px, 1px) skew(-5deg); filter: none; opacity: .6; } 70% { transform: translate(-1px, 0); opacity: 1; } 100% { transform: translate(0); }
}
.xz-gclip {
  position: fixed; z-index: 86; width: 52px; height: 52px; padding: 0; border: 0; background: none; cursor: pointer; transform: translate(-50%, -50%);
  animation: xz-gclip-in .5s cubic-bezier(.3, 1.7, .5, 1) backwards, xz-gclip-float 4s ease-in-out .5s infinite;
}
.xz-gclip-e { display: block; font-size: 38px; line-height: 52px; filter: sepia(1) saturate(7) hue-rotate(-12deg) brightness(1.15) drop-shadow(0 0 8px rgba(255, 210, 63, .95)); }
.xz-gclip-s { position: absolute; color: #ffd23f; font-size: 18px; text-shadow: 0 0 6px #fff; animation: xz-twinkle 1.1s ease-in-out infinite; }
.xz-s1 { top: -2px; right: 0; } .xz-s2 { bottom: 2px; left: -2px; animation-delay: .5s; }
@keyframes xz-gclip-in { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(-60deg); } 100% { opacity: 1; transform: translate(-50%, -50%); } }
@keyframes xz-gclip-float { 0%, 100% { translate: 0 0; } 50% { translate: 8px -12px; } }
.xz-gclip.xz-leave { animation: xz-gclip-out .4s ease-in forwards; }
@keyframes xz-gclip-out { to { opacity: 0; transform: translate(-50%, -50%) scale(.3); } }
.xz-star { position: fixed; left: 0; top: 0; z-index: 86; padding: 0; border: 0; background: none; font-size: 34px; line-height: 1; cursor: pointer; filter: drop-shadow(0 0 8px rgba(255, 255, 160, .9)); }

/* ---------- the back room: group headings ---------- */
.xz-list li.xz-grp { display: block; padding: 10px 2px 0; border: 0; border-radius: 0; background: none; font: 400 18px/1.1 var(--display); color: var(--hot); }
.xz-list li.xz-rare.xz-got { border-color: #ffd23f; }

/* ---------- phones: nothing here may push the page sideways (everything is position: fixed or inside a dialog) ---------- */
@media (max-width: 520px) { .xz-room-chan .xz-say { display: none; } }
@media (max-width: 760px) {
  .xz-fx > .xz-shog { width: 118px; bottom: 22vh; }
  .xz-fx > .xz-doom { top: 74px; }
  .xz-fx > .xz-term { top: 72px; }
  .xz-clippy { bottom: calc(70px + env(safe-area-inset-bottom)); }
  .xz-fx > .xz-win { top: 72px; }
  .xz-toys { gap: 8px; }
  .xz-fx > .xz-kit { left: 18%; }
}

/* ---------- reduced motion + calm mode: the static versions (JS also skips the moving parts) ---------- */
@media (prefers-reduced-motion: reduce) {
  [class*="xz-"], [class*="xz-"]::before, [class*="xz-"]::after, .tile.xz-shiny .open::after,
  html[data-xz-hat] .grid:not(.hell-grid) .tile::after, html[data-xz-hat] .card.is-top::after, html[data-xz-hat] .marquee button::after, html[data-xz-hat] .lb-pic::after, html[data-xz-hat] .logo::after { animation: none !important; transition: none !important; }
}
html[data-calm] [class*="xz-"], html[data-calm] [class*="xz-"]::before, html[data-calm] [class*="xz-"]::after, html[data-calm] .tile.xz-shiny .open::after, html[data-calm] .hero-title .dot.xz-squish,
html[data-calm][data-xz-hat] .grid:not(.hell-grid) .tile::after, html[data-calm][data-xz-hat] .card.is-top::after, html[data-calm][data-xz-hat] .marquee button::after, html[data-calm][data-xz-hat] .lb-pic::after, html[data-calm][data-xz-hat] .logo::after { animation: none !important; transition: none !important; }