/* ---------- theme tokens ---------- */
:root {
  --bg: #0a0806;
  --bg-alt: #14100c;
  --fg: #f5ede4;
  --muted: #9a8f82;
  --accent: #ff5c0f;
  --accent-dim: #a63f0c;
  --accent-2: #ffb347;
  --card-border: rgba(255, 140, 60, 0.18);
  --font-mono: "Cascadia Code", "Fira Code", "JetBrains Mono", Consolas, "Courier New", monospace;
}

[data-theme="cyan"] {
  --accent: #39d0ff;
  --accent-dim: #1c7fa3;
  --accent-2: #9fe8ff;
  --card-border: rgba(60, 200, 255, 0.18);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-mono);
  overflow-x: hidden;
  transition: background 0.4s ease, color 0.4s ease;
}

#trail-canvas {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
}

/* CRT scanlines */
.scanlines {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 60;
  background: repeating-linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.12) 0px,
    rgba(0, 0, 0, 0.12) 1px,
    transparent 2px,
    transparent 3px
  );
  mix-blend-mode: overlay;
  opacity: 0.5;
  animation: flicker 6s infinite;
}
@keyframes flicker {
  0%, 96%, 100% { opacity: 0.5; }
  97% { opacity: 0.35; }
  98% { opacity: 0.6; }
}

.cursor-blink {
  display: inline-block;
  width: 0.55em;
  height: 1em;
  background: var(--accent);
  margin-left: 0.15em;
  vertical-align: -0.15em;
  animation: blink 1s step-end infinite;
}
.cursor-blink.settled {
  animation: none;
  opacity: 1;
}
@keyframes blink {
  0%, 49% { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* ---------- header ---------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.1rem 2rem;
  backdrop-filter: blur(10px);
  background: color-mix(in srgb, var(--bg) 75%, transparent);
  border-bottom: 1px solid var(--card-border);
}

.logo {
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--fg);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.logo span { color: var(--accent); }

.header-links {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.header-link-btn {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.3rem 0.4rem;
  transition: color 0.2s ease;
}
.header-link-btn:hover { color: var(--accent); }

/* ---------- hero ---------- */
.hero {
  position: relative;
  height: calc(100vh - 68px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: left;
  padding: 2rem;
  overflow: hidden;
  z-index: 2;
}

.blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(90px);
  opacity: 0.22;
  z-index: -1;
  animation: float 14s ease-in-out infinite;
}
.blob-a { width: 32rem; height: 32rem; background: var(--accent); top: -10rem; left: -8rem; }
.blob-b { width: 24rem; height: 24rem; background: var(--accent-2); bottom: -8rem; right: -6rem; animation-delay: -4s; }
.blob-c { width: 20rem; height: 20rem; background: var(--accent-dim); top: 40%; left: 55%; animation-delay: -8s; }

@keyframes float {
  0%, 100% { transform: translate(0, 0) scale(1); }
  33% { transform: translate(3rem, -2rem) scale(1.08); }
  66% { transform: translate(-2rem, 3rem) scale(0.95); }
}

/* ---------- terminal window ---------- */
/* Always tiled: geometry is computed and applied by the auto-tiling
   layout in script.js, not by free dragging or manual resizing. */
.terminal {
  position: fixed;
  margin: 0;
  min-width: 20rem;
  min-height: 18rem;
  background: color-mix(in srgb, var(--bg-alt) 92%, transparent);
  border: 1px solid var(--card-border);
  border-radius: 8px;
  box-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.6), 0 0 40px -10px color-mix(in srgb, var(--accent) 25%, transparent);
  display: flex;
  flex-direction: column;
  resize: none;
  overflow: hidden;
  z-index: 5;
  transition: left 0.2s ease, top 0.2s ease, width 0.2s ease, height 0.2s ease;
}
.terminal.closed {
  display: none;
}

.terminal-bar {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.65rem 0.9rem;
  background: color-mix(in srgb, var(--bg) 80%, black);
  border-bottom: 1px solid var(--card-border);
  flex: 0 0 auto;
}
/* The clickable button is bigger than the visible dot — a separate
   ::before circle carries the actual color/size, so the hit area can grow
   without the dots looking oversized or touching each other. Flexbox's
   `gap` on .terminal-bar always keeps a fixed minimum space between
   flex items regardless of each item's own size, so growing .dot here can
   never make adjacent hitboxes overlap. */
.dot {
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: filter 0.15s ease;
}
.dot::before {
  content: "";
  display: block;
  width: 0.75rem;
  height: 0.75rem;
  border-radius: 50%;
  background: currentColor;
}
.dot:hover { filter: brightness(1.2); }
.dot-r { color: #ff5f57; }
.dot-y { color: #febc2e; }
.dot-g { color: #28c840; }
.terminal-title {
  margin-left: 0.75rem;
  font-size: 0.75rem;
  color: var(--muted);
}

.terminal-body {
  padding: 1.5rem 1.75rem 1.75rem;
  flex: 1 1 auto;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.terminal.minimized .terminal-body { display: none; }
.terminal.minimized {
  height: auto !important;
  min-height: 0 !important;
  transition: left 0.2s ease, bottom 0.2s ease, width 0.2s ease;
}

.reopen-btn {
  position: fixed;
  left: 1.5rem;
  bottom: 1.5rem;
  z-index: 15;
  font-family: var(--font-mono);
  font-size: 0.8rem;
  padding: 0.6rem 1rem;
  border-radius: 4px;
  border: 1px solid var(--card-border);
  background: var(--bg-alt);
  color: var(--accent);
  cursor: pointer;
  display: none;
}
.reopen-btn.visible { display: inline-block; }
.reopen-btn:hover { border-color: var(--accent); }

h1.glitch {
  font-size: clamp(2.1rem, 7vw, 3.6rem);
  margin: 0;
  font-weight: 800;
  position: relative;
  color: var(--fg);
  letter-spacing: -0.01em;
}
h1.glitch::before,
h1.glitch::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  opacity: 0;
}
h1.glitch:hover::before {
  opacity: 0.8;
  color: var(--accent);
  animation: glitch-a 0.6s steps(2, end) infinite;
}
h1.glitch:hover::after {
  opacity: 0.8;
  color: var(--accent-2);
  animation: glitch-b 0.6s steps(2, end) infinite;
}
@keyframes glitch-a {
  0% { transform: translate(0, 0); clip-path: inset(0 0 60% 0); }
  50% { transform: translate(-4px, 2px); clip-path: inset(40% 0 20% 0); }
  100% { transform: translate(0, 0); clip-path: inset(0 0 60% 0); }
}
@keyframes glitch-b {
  0% { transform: translate(0, 0); clip-path: inset(60% 0 0 0); }
  50% { transform: translate(4px, -2px); clip-path: inset(20% 0 40% 0); }
  100% { transform: translate(0, 0); clip-path: inset(60% 0 0 0); }
}

.tagline {
  color: var(--muted);
  font-size: 0.95rem;
  margin: 0.6rem 0 1.25rem;
}

.output-log {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--muted);
  margin-bottom: 0.75rem;
  scrollbar-width: thin;
  scrollbar-color: var(--accent-dim) transparent;
}
.output-log:empty { margin-bottom: 0; }
.log-line { white-space: pre-wrap; word-break: break-word; }
.log-line.cmd { color: var(--fg); }
.log-line.cmd::before { content: "guest@renscal:~$ "; color: var(--accent); }
.log-line.resp { color: var(--muted); padding-left: 0.1rem; }
.log-line.err { color: var(--accent-2); }

.sysfetch-block {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 1.5rem;
  row-gap: 0.15rem;
  margin: 0.4rem 0;
}
.sysfetch-art {
  color: var(--accent);
  white-space: pre;
}
.sysfetch-spec {
  color: var(--muted);
}

.train-block {
  color: var(--accent);
}

.starwars-viewport {
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
}
.starwars-frame {
  margin: 0;
  width: 67ch;
  color: var(--accent);
  font-family: var(--font-mono);
  font-size: var(--starwars-font-size, 14px);
  line-height: 1.15;
  white-space: pre;
}
.starwars-hint {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: var(--muted);
  letter-spacing: 0.01em;
}

.vim-viewport {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.vim-screen {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
}
.vim-buffer {
  margin: 0;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  line-height: 1.4;
  white-space: pre;
}
.vim-cursor {
  position: absolute;
  top: 0;
  left: 0;
  width: 0.6ch;
  height: 1.4em;
  background: var(--accent);
  animation: blink 1s step-end infinite;
}
.vim-status {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.78rem;
  color: var(--muted);
  border-top: 1px dashed var(--card-border);
  padding-top: 0.4rem;
}

.forkbomb-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  overflow: hidden;
  transition: opacity 0.4s ease;
}
.forkbomb-overlay.clearing { opacity: 0; }
.forkbomb-proc {
  position: absolute;
  padding: 0.2rem 0.5rem;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--accent-2);
  background: color-mix(in srgb, var(--bg-alt) 85%, transparent);
  border: 1px solid var(--card-border);
  border-radius: 3px;
  animation: forkbomb-pop 0.25s ease;
}
@keyframes forkbomb-pop {
  from { transform: scale(0.4); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

.input-line {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border-top: 1px dashed var(--card-border);
  padding-top: 0.85rem;
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  background: var(--bg-alt);
}
.prompt {
  color: var(--accent);
  font-size: 0.9rem;
  white-space: nowrap;
}
.input-wrap {
  position: relative;
  flex: 1;
}
.cmd-input {
  width: 100%;
  background: transparent;
  border: none;
  outline: none;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 0.9rem;
  caret-color: var(--accent);
}
.cmd-input::placeholder { color: color-mix(in srgb, var(--muted) 70%, transparent); }
/* Visual masking for the sudo prompt — stays type="text" the whole time so
   password managers never see a real type="password" field to latch onto.
   Chrome/Safari/Edge only; Firefox has no equivalent and just shows plain
   text, which is fine since nothing here is a real credential. */
.cmd-input.masked { -webkit-text-security: disc; }

.suggestions {
  position: fixed;
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  width: min(32rem, calc(100vw - 3rem));
  background: color-mix(in srgb, var(--bg-alt) 80%, transparent);
  backdrop-filter: blur(8px);
  border: 1px solid var(--card-border);
  border-radius: 6px;
  box-shadow: 0 10px 30px -8px rgba(0, 0, 0, 0.6);
  max-height: 14rem;
  overflow-y: auto;
  z-index: 100;
  display: none;
}
.suggestions.open { display: block; }
.suggestions li {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.5rem 0.6rem;
  border-radius: 4px;
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--fg);
}
.suggestions li .s-cmd { color: var(--fg); }
.suggestions li .s-cmd b { color: var(--accent); font-weight: 700; }
.suggestions li .s-desc { color: var(--muted); font-size: 0.72rem; }
.suggestions li.active,
.suggestions li:hover {
  background: color-mix(in srgb, var(--accent) 14%, transparent);
}

/* ---------- shared buttons ---------- */
.btn {
  font-family: var(--font-mono);
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.75rem 1.25rem;
  border-radius: 4px;
  cursor: pointer;
  border: 1px solid var(--card-border);
  background: var(--bg-alt);
  color: var(--fg);
  transition: transform 0.15s ease, border-color 0.2s ease, color 0.2s ease;
}
.btn:active { transform: scale(0.94); }
.btn:hover { border-color: var(--accent); color: var(--accent); }

/* ---------- browser app ---------- */
.browser .terminal-body {
  padding: 0;
}

.browser-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  background: color-mix(in srgb, var(--bg) 70%, black);
  border-bottom: 1px solid var(--card-border);
  flex: 0 0 auto;
}
.browser-btn {
  width: 1.9rem;
  height: 1.9rem;
  flex: 0 0 auto;
  border-radius: 4px;
  border: 1px solid var(--card-border);
  background: var(--bg-alt);
  color: var(--muted);
  cursor: pointer;
  font-size: 0.9rem;
  display: grid;
  place-items: center;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.browser-btn:hover { border-color: var(--accent); color: var(--accent); }

.browser-address-wrap {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: var(--bg);
  border: 1px solid var(--card-border);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
}
.browser-scheme {
  color: var(--muted);
  font-size: 0.82rem;
  white-space: nowrap;
}
.browser-address {
  flex: 1;
  min-width: 0;
  background: transparent;
  border: none;
  outline: none;
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  caret-color: var(--accent);
}

.browser-page {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 1.75rem;
}
/* Only the edit/new-page view needs to stretch to fill the window — normal
   content pages keep plain block flow so paragraph margins collapse as usual. */
.browser-page:has(.page-form) {
  display: flex;
  flex-direction: column;
}
.browser-page h2,
.browser-page h3,
.browser-page h4,
.browser-page h5 {
  color: var(--fg);
  text-transform: lowercase;
}
.browser-page h2::before,
.browser-page h3::before,
.browser-page h4::before,
.browser-page h5::before {
  content: "// ";
  color: var(--accent);
}
.browser-page h2 { margin-top: 0; font-size: 1.4rem; }
.browser-page h3 { font-size: 1.15rem; margin: 1.5rem 0 0.5rem; }
.browser-page h4 { font-size: 1.02rem; margin: 1.25rem 0 0.4rem; }
.browser-page h5 { font-size: 0.92rem; margin: 1rem 0 0.35rem; }
.browser-page p {
  color: var(--muted);
  line-height: 1.7;
}
.browser-page strong { color: var(--fg); }
.browser-page a {
  color: var(--accent);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.browser-page a:hover { color: var(--accent-2); }
.browser-page ul,
.browser-page ol {
  color: var(--muted);
  line-height: 1.7;
  margin: 0.5rem 0 1rem 1.25rem;
  padding: 0;
}
.browser-page li { margin-bottom: 0.3rem; }
.md-quote {
  margin: 0.9rem 0;
  padding: 0.6rem 1rem;
  border-left: 3px solid var(--accent);
  background: color-mix(in srgb, var(--bg-alt) 70%, transparent);
  color: var(--muted);
}
.md-code {
  margin: 0.9rem 0;
  padding: 0.9rem 1rem;
  border-radius: 4px;
  background: var(--bg);
  border: 1px solid var(--card-border);
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--fg);
}
.md-inline-code {
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  background: var(--bg);
  border: 1px solid var(--card-border);
  font-size: 0.88em;
  color: var(--accent-2);
}

.site-list {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.site-link {
  width: 100%;
  text-align: left;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  padding: 0.7rem 1rem;
  border-radius: 4px;
  border: 1px solid var(--card-border);
  background: var(--bg-alt);
  color: var(--accent);
  cursor: pointer;
  transition: border-color 0.2s ease, transform 0.15s ease;
}
.site-link:hover { border-color: var(--accent); transform: translateX(4px); }
.result-snippet {
  margin: 0.3rem 0 0 0.2rem;
  color: var(--muted);
  font-size: 0.78rem;
}

.site-card {
  background: var(--bg-alt);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  padding: 1.25rem;
  margin-top: 1rem;
}
.site-card h3 { margin-top: 0; color: var(--fg); }
.site-card p { margin-bottom: 0; }

/* ---------- renscal://rice ---------- */
/* Sticky, not fixed — .terminal windows are draggable/tileable, and a
   position:fixed badge would stay pinned to the viewport instead of moving
   with the window. Sticky pins it to the top of .browser-page (the actual
   scrolling container) instead, which stays correctly anchored to the
   window no matter where it's tiled or how far the question list scrolls.
   height:0 keeps it from reserving flow space — the badge itself is
   absolutely positioned inside it, so it floats over the page content
   instead of pushing the heading/list down. */
.rice-header {
  position: sticky;
  top: 0;
  height: 0;
  z-index: 5;
}
.rice-score-badge {
  position: absolute;
  top: 0.5rem;
  right: 0;
  font-family: var(--font-mono);
  font-size: 2.4rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  background: transparent;
  color: var(--accent);
  text-shadow: 0 0 16px color-mix(in srgb, var(--accent) 55%, transparent);
  pointer-events: none;
  user-select: none;
}

.rice-list {
  list-style: none;
  padding: 0;
  margin: 1.25rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.rice-q {
  display: flex;
  gap: 0.5rem;
  padding: 0.6rem 0.9rem;
  border-radius: 4px;
  border: 1px solid var(--card-border);
  background: var(--bg-alt);
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background-color 0.15s ease;
}
.rice-q:hover { border-color: var(--muted); }
.rice-q .rice-num { flex: 0 0 auto; color: inherit; opacity: 0.7; }
.rice-q.yes {
  color: var(--accent);
  border-color: var(--accent);
  background: color-mix(in srgb, var(--accent) 8%, var(--bg-alt));
}

/* ---------- renscal://skaal (skålspillet) ---------- */
/* .site-card has no max-width -- fine for the short one-line blurbs it's
   used for elsewhere (e.g. the projects page), but this page's screens are
   a full multi-section control panel, and letting it stretch to whatever
   width the browser window happens to be (it's a regular tiled window, can
   be maximized) left everything bunched in the top-left corner with a
   huge, awkward dead zone next to it. Capping and centering the whole
   thing fixes every screen at once without touching the JS markup. */
#skaal-app { max-width: 34rem; margin: 0 auto; }
/* --bg and --bg-alt are both near-black and close in value -- .site-card's
   plain 1px border reads as basically invisible against them at this
   page's scale, so it gets its own stronger presence here (an accent glow
   like the terminal windows use) rather than changing the shared
   .site-card everywhere else on the site. */
#skaal-app .site-card {
  box-shadow: 0 0 30px -12px color-mix(in srgb, var(--accent) 30%, transparent);
  padding: 1.5rem;
}
.skaal-room-code-row { text-align: center; margin-bottom: 0.75rem; }
.skaal-room-code { font-size: 1.6rem; font-weight: 800; color: var(--accent); letter-spacing: 0.15em; }
.skaal-header-actions { display: flex; align-items: center; }
/* Leave Room keeps .admin-btn's quieter (non-bold) look — it's a plain
   navigation action, not a primary or destructive one — but matches
   .btn's exact box size so it doesn't look mismatched sitting next to
   Lock room. */
.skaal-header-actions .admin-btn { font-size: 0.9rem; padding: 0.75rem 1.25rem; }
.skaal-header-spacer { flex: 1 1 auto; }
.skaal-wide-btn { display: block; width: 100%; text-align: center; }

/* Scoped to the Lobby screen (create/join room) — .pf-slug-label is shared
   with the admin CMS's page-form slug field, so these overrides only apply
   nested inside .skaal-centered rather than touching that shared class. */
.skaal-centered { text-align: center; }
.skaal-centered .result-snippet { margin-left: 0; }
.skaal-centered .pf-slug-label { align-items: center; }
.skaal-centered .pf-slug-label input {
  width: 11.2rem; /* 8rem +40% */
  padding-top: 0.72rem; /* 0.6rem +20% */
  padding-bottom: 0.72rem;
  text-align: center;
}

.skaal-avatar-initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4em;
  height: 1.4em;
  border-radius: 4px;
  background: var(--bg);
  border: 1px solid var(--accent-dim);
  color: var(--accent);
  font-family: var(--font-mono);
  font-weight: 700;
  font-size: 0.8em;
  vertical-align: -0.3em;
}

.skaal-host-badge {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
  background: color-mix(in srgb, var(--accent-2) 18%, transparent);
  color: var(--accent-2);
  border: 1px solid var(--accent-2);
  margin-left: 0.2rem;
}

.skaal-roster { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 1rem 0; }
.skaal-chip {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  border: 1px solid var(--card-border);
  background: var(--bg-alt);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: 0.85rem;
}
.skaal-chip.is-master { border-color: var(--accent-2); }
.skaal-chip.is-reconnecting { opacity: 0.6; }
.skaal-chip .reconnecting-badge { font-size: 0.68rem; color: var(--muted); margin-left: 0.3rem; }
.skaal-chip .admin-btn { padding: 0.15rem 0.4rem; margin-left: 0.2rem; }

.skaal-category-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem; margin: 0.75rem 0; }
.skaal-pill {
  padding: 0.5rem 0.9rem;
  border-radius: 999px;
  border: 1px solid var(--card-border);
  background: var(--bg-alt);
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}
.skaal-pill.selected { color: var(--accent); border-color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--bg-alt)); }

.skaal-intensity-row { margin: 1rem 0; }
.skaal-intensity-row label { display: block; margin-bottom: 0.4rem; font-size: 0.85rem; color: var(--muted); }
.skaal-intensity-row input[type="range"] { width: 100%; accent-color: var(--accent); }
.skaal-weight-row { display: flex; align-items: center; justify-content: space-between; margin: 0.5rem 0; }
.skaal-weight-btn {
  padding: 0.3rem 0.6rem;
  border-radius: 4px;
  border: 1px solid var(--card-border);
  background: var(--bg-alt);
  color: var(--muted);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.8rem;
}
.skaal-weight-btn.selected { color: var(--accent); border-color: var(--accent); }

.skaal-challenge-card {
  background: var(--bg-alt);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  padding: 1.5rem;
  margin-top: 1rem;
  text-align: center;
}
.skaal-challenge-type { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-2); }
.skaal-challenge-text { font-size: 1.15rem; color: var(--fg); margin: 0.75rem 0; line-height: 1.5; }

.skaal-vote-options { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center; margin: 0.75rem 0; }
.skaal-vote-btn {
  padding: 0.5rem 0.9rem;
  border-radius: 4px;
  border: 1px solid var(--card-border);
  background: var(--bg-alt);
  color: var(--fg);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.85rem;
}
.skaal-vote-btn.voted { border-color: var(--accent); color: var(--accent); }
.skaal-vote-tally-row.is-loser { color: var(--accent-2); font-weight: 700; }

.skaal-countdown {
  font-size: 3.5rem;
  font-weight: 800;
  color: var(--accent);
  text-align: center;
  text-shadow: 0 0 16px color-mix(in srgb, var(--accent) 55%, transparent);
}

/* ---------- browser admin mode ---------- */
.admin-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
  padding-bottom: 0.9rem;
  border-bottom: 1px dashed var(--card-border);
}
.admin-badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 0.2rem 0.5rem;
  border-radius: 3px;
  background: color-mix(in srgb, var(--accent-2) 18%, transparent);
  color: var(--accent-2);
  border: 1px solid var(--accent-2);
}
.admin-btn {
  font-family: var(--font-mono);
  font-size: 0.78rem;
  padding: 0.4rem 0.75rem;
  border-radius: 4px;
  border: 1px solid var(--card-border);
  background: var(--bg-alt);
  color: var(--fg);
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease;
}
.admin-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.admin-btn-danger:hover { border-color: var(--accent-2); color: var(--accent-2); }
.admin-io-msg {
  font-size: 0.78rem;
  color: var(--muted);
}
.admin-btn:disabled {
  opacity: 0.4;
  cursor: default;
}

.page-actions {
  display: flex;
  gap: 0.6rem;
  margin-top: 1.75rem;
}

.page-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.25rem;
  width: 100%;
  flex: 1 1 auto;
  min-height: 0;
}
.pf-slug-label {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  font-size: 0.8rem;
  color: var(--muted);
  flex: 0 0 auto;
}
.pf-slug-label input {
  font-family: var(--font-mono);
  font-size: 0.88rem;
  padding: 0.6rem 0.75rem;
  border-radius: 4px;
  border: 1px solid var(--card-border);
  background: var(--bg);
  color: var(--fg);
}
.pf-slug-label input:focus {
  outline: none;
  border-color: var(--accent);
}

/* Title/content look like the rendered page itself — editing strips the
   formatting away rather than swapping in separate labeled form fields. */
.pf-title-row {
  display: flex;
  align-items: baseline;
  flex: 0 0 auto;
}
.pf-title-prefix {
  color: var(--accent);
  font-size: 1.4rem;
  font-weight: 800;
}
.pf-title-input {
  flex: 1;
  font-family: var(--font-mono);
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--fg);
  text-transform: lowercase;
  background: transparent;
  border: none;
  border-bottom: 1px dashed var(--card-border);
  padding: 0.15rem 0;
}
.pf-title-input:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

.pf-body-wrap {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}
.pf-body-input {
  flex: 1 1 auto;
  min-height: 12rem;
  background: transparent;
  border: 1px dashed var(--card-border);
  border-radius: 4px;
  padding: 1rem;
  color: var(--muted);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  line-height: 1.7;
  resize: vertical;
}
.pf-body-input:focus {
  outline: none;
  border-color: var(--accent);
  color: var(--fg);
}
.pf-preview {
  flex: 1 1 auto;
  min-height: 12rem;
  overflow-y: auto;
  border: 1px dashed var(--card-border);
  border-radius: 4px;
  padding: 1rem;
}

.pf-body-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  flex: 0 0 auto;
}
.md-hint {
  color: var(--muted);
  font-size: 0.78rem;
  flex: 0 0 auto;
}

.pf-header-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--muted);
  flex: 0 0 auto;
}

.form-actions {
  display: flex;
  gap: 0.75rem;
}
.form-error {
  color: var(--accent-2);
  font-size: 0.8rem;
  margin: -0.4rem 0 0;
  min-height: 1em;
}

.home-link-admin-list { margin-top: 0.75rem; }
.home-link-admin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.9rem;
  border-radius: 4px;
  border: 1px solid var(--card-border);
  background: var(--bg-alt);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--accent);
}
.home-link-add {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.9rem;
}
.link-row-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex: 0 0 auto;
}
.link-row-actions .admin-btn {
  padding: 0.3rem 0.5rem;
}

.history-list {
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.history-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.6rem 0.9rem;
  border-radius: 4px;
  border: 1px solid var(--card-border);
  background: var(--bg-alt);
}
.history-meta {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}
.history-label {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.history-time {
  font-size: 0.72rem;
  color: var(--muted);
}
.home-link-add select {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: 0.5rem 0.7rem;
  border-radius: 4px;
  border: 1px solid var(--card-border);
  background: var(--bg);
  color: var(--fg);
}
.empty-hint {
  color: var(--muted);
  font-size: 0.85rem;
}

/* ---------- confetti ---------- */
#confetti-layer {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 50;
  overflow: hidden;
}
.confetti-piece {
  position: absolute;
  top: -1rem;
  border-radius: 1px;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
  to {
    transform: translateY(110vh) rotate(720deg);
    opacity: 0.2;
  }
}

@media (max-width: 640px) {
  .site-header { padding: 1rem 1.25rem; }
  .terminal-body { padding: 1.25rem; }
}

/* ---------- "rm -rf /" easter egg ---------- */
/* Note: the shake/glitch lives entirely on this overlay's own pseudo-elements,
   never on <body> or the windows — a transformed ancestor would become the
   containing block for their position:fixed descendants and break the
   whole layout. */
.crash-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  overflow: hidden;
  background: radial-gradient(circle at 50% 40%, rgba(255, 60, 20, calc(var(--glitch-opacity, 0) * 0.35)), transparent 70%);
}
.crash-overlay.glitching::before,
.crash-overlay.glitching::after {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 0, 60, 0.15) 0px,
    rgba(255, 0, 60, 0.15) 2px,
    transparent 3px,
    transparent 6px
  );
  mix-blend-mode: screen;
  opacity: var(--glitch-opacity, 0);
  animation: crash-glitch-jitter 0.12s infinite;
}
.crash-overlay.glitching::after {
  background: repeating-linear-gradient(
    to bottom,
    rgba(60, 200, 255, 0.15) 0px,
    rgba(60, 200, 255, 0.15) 2px,
    transparent 3px,
    transparent 6px
  );
  animation-direction: reverse;
}
@keyframes crash-glitch-jitter {
  0% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(5px); }
  60% { transform: translateX(-3px); }
  80% { transform: translateX(4px); }
  100% { transform: translateX(0); }
}
.crash-overlay.glitching {
  animation: crash-signal-pulse 0.18s steps(2) infinite;
}
@keyframes crash-signal-pulse {
  0%, 100% { filter: none; }
  50% { filter: contrast(1.3) saturate(1.4) brightness(1.05); }
}

.crash-noise {
  position: absolute;
  inset: -10%;
  opacity: calc(var(--glitch-opacity, 0) * 0.5);
  background-image: repeating-conic-gradient(from 0deg, rgba(255, 255, 255, 0.07) 0deg 1deg, transparent 1deg 2deg);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
  animation: crash-noise-shift 0.08s steps(2) infinite;
}
@keyframes crash-noise-shift {
  0% { transform: translate(0, 0); }
  100% { transform: translate(-3px, 2px); }
}

.crash-slice {
  position: absolute;
  left: 0;
  right: 0;
  height: 8%;
  opacity: calc(var(--glitch-opacity, 0) * 0.7);
  mix-blend-mode: screen;
}
.crash-slice-r { background: rgba(255, 0, 60, 0.5); animation: crash-slice-jump 1.6s steps(6) infinite; }
.crash-slice-g { background: rgba(60, 255, 120, 0.35); animation: crash-slice-jump 1.9s steps(5) infinite reverse; }
.crash-slice-b { background: rgba(60, 160, 255, 0.45); animation: crash-slice-jump 1.3s steps(7) infinite; }
@keyframes crash-slice-jump {
  0%   { top: 4%;  transform: translateX(0); }
  15%  { top: 22%; transform: translateX(-14px); }
  30%  { top: 55%; transform: translateX(10px); }
  45%  { top: 12%; transform: translateX(-6px); }
  60%  { top: 68%; transform: translateX(16px); }
  75%  { top: 38%; transform: translateX(-10px); }
  90%  { top: 80%; transform: translateX(4px); }
  100% { top: 4%;  transform: translateX(0); }
}

.crash-overlay.hard-flash {
  background: rgba(255, 255, 255, 0.85);
}

.crash-overlay.panic {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  background: #050505;
}
.panic-text {
  max-width: 40rem;
  margin: 0;
  color: #ff5c5c;
  font-family: var(--font-mono);
  font-size: 0.9rem;
  line-height: 1.6;
  white-space: pre-wrap;
  text-shadow: 0 0 12px rgba(255, 60, 60, 0.4);
}
#panic-countdown {
  color: #fff;
  font-weight: 700;
}

/* ---------- login gate ---------- */
.login-gate {
  position: fixed;
  inset: 0;
  z-index: 9998; /* stays just below the kernel-panic overlay (9999) */
  display: flex;
  align-items: center;
  justify-content: center;
  background: #0a0603;
  overflow: hidden;
  opacity: 1;
  /* transform/filter are safe here — this element has no position:fixed
     descendants of its own (unlike .hero, which must never be transformed:
     an ancestor transform becomes the containing block for the terminal
     and browser windows' fixed positioning and breaks the whole layout). */
  transition: opacity 0.9s cubic-bezier(0.4, 0, 0.2, 1), filter 0.9s cubic-bezier(0.4, 0, 0.2, 1),
    background-color 2.6s ease;
}
.login-gate.revealing {
  background-color: transparent;
}
.login-gate.leaving {
  opacity: 0;
  filter: blur(14px);
  pointer-events: none;
}

#code-rain-canvas {
  position: absolute;
  inset: 0;
  z-index: 0;
  transition: opacity 0.6s ease;
}
.login-gate.leaving #code-rain-canvas {
  opacity: 0.3;
}

.login-panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  padding: 2.5rem 3rem;
  background: rgba(10, 8, 6, 0.82);
  border: 1px solid rgba(255, 140, 60, 0.35);
  border-radius: 10px;
  box-shadow: 0 0 60px -10px rgba(255, 120, 30, 0.35);
  backdrop-filter: blur(6px);
  text-align: center;
  max-width: 22rem;
  opacity: 1;
  transform: scale(1) translateY(0);
  transition: opacity 1.3s ease, transform 1.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.login-gate.flooding .login-panel {
  opacity: 0;
  transform: scale(0.92) translateY(-12px);
  pointer-events: none;
}
.login-mark {
  font-family: var(--font-mono);
  font-size: 1.8rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #ffb347;
  text-shadow: 0 0 18px rgba(255, 140, 40, 0.6);
}
.login-tagline {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: #d9a878;
  margin: 0;
}
.login-btn {
  font-family: var(--font-mono);
  font-size: 0.95rem;
  padding: 0.75rem 2rem;
  border-radius: 4px;
  border: 1px solid rgba(255, 140, 60, 0.5);
  background: rgba(255, 120, 30, 0.12);
  color: #ffb347;
  cursor: pointer;
  outline: none;
  transition: background 0.2s ease, box-shadow 0.2s ease;
}
.login-btn:hover:not(:disabled) {
  background: rgba(255, 120, 30, 0.25);
  box-shadow: 0 0 20px -4px rgba(255, 140, 40, 0.6);
}
.login-btn:focus-visible {
  outline: 2px solid rgba(255, 140, 60, 0.7);
  outline-offset: 2px;
}

.cf-turnstile {
  border: none;
  background: #000;
  border-radius: 4px;
  overflow: hidden;
}
.login-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.login-hint {
  font-family: var(--font-mono);
  font-size: 0.72rem;
  color: rgba(217, 168, 120, 0.6);
  margin: 0;
}

/* ---------- games (shared chrome) ---------- */
.game-body {
  padding: 0.85rem;
  gap: 0.75rem;
}
.game-hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem 0.75rem;
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 0.82rem;
  color: var(--muted);
}
.game-hud b { color: var(--fg); }
.game-status {
  flex: 0 0 auto;
  margin: 0;
  font-family: var(--font-mono);
  font-size: 0.85rem;
  color: var(--muted);
  min-height: 1.2em;
}
.game-status.win { color: var(--accent); }
.game-status.lose { color: var(--accent-2); }

/* ---------- snake ---------- */
/* The board always sizes itself to fit (see resizeCanvas() in script.js) —
   no scrolling is ever needed, so don't offer a scrollbar even if a future
   change introduces a stray pixel of overflow. */
#snake-body {
  overflow: hidden;
}
#snake-canvas {
  display: block;
  margin: 0 auto;
  border: 1px solid var(--card-border);
  border-radius: 4px;
  outline: none;
}
#snake-canvas:focus { border-color: var(--accent); }

/* ---------- minesweeper ---------- */
.mine-grid {
  display: grid;
  gap: 2px;
  flex: 0 0 auto;
  margin: 0 auto;
  background: var(--card-border);
  border: 1px solid var(--card-border);
  border-radius: 4px;
  padding: 2px;
}
.mine-cell {
  width: var(--mine-cell, 26px);
  height: var(--mine-cell, 26px);
  padding: 0;
  border: none;
  border-radius: 2px;
  background: var(--bg-alt);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: calc(var(--mine-cell, 26px) * 0.46);
  font-weight: 700;
  display: grid;
  place-items: center;
  cursor: pointer;
}
.mine-cell:hover { background: color-mix(in srgb, var(--accent) 14%, var(--bg-alt)); }
.mine-cell.revealed { background: var(--bg); cursor: default; }
.mine-cell.revealed:hover { background: var(--bg); }
.mine-cell.mine { background: var(--accent-2); color: #1a0000; }
.mine-cell.flagged { color: var(--accent); }
.mine-cell.n1 { color: #39d0ff; }
.mine-cell.n2 { color: #7dffb3; }
.mine-cell.n3 { color: #ff8c3c; }
.mine-cell.n4 { color: #b98cff; }
.mine-cell.n5 { color: #ff5c5c; }
.mine-cell.n6 { color: #4fd6e8; }
.mine-cell.n7 { color: var(--fg); }
.mine-cell.n8 { color: var(--muted); }

/* ---------- calculator ---------- */
.calc-display {
  flex: 0 0 auto;
  padding: 0.75rem 0.9rem;
  border: 1px solid var(--card-border);
  border-radius: 4px;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: clamp(1.2rem, 4vw, 1.8rem);
  font-weight: 700;
  text-align: right;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.calc-display.error { color: var(--accent-2); }
.calc-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
  flex: 1 1 auto;
  min-height: 0;
}
.calc-btn {
  font-family: var(--font-mono);
  font-size: clamp(0.9rem, 2.4vw, 1.1rem);
  font-weight: 600;
  border-radius: 4px;
  border: 1px solid var(--card-border);
  background: var(--bg-alt);
  color: var(--fg);
  cursor: pointer;
  display: grid;
  place-items: center;
  transition: transform 0.15s ease, border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}
.calc-btn:hover { border-color: var(--accent); color: var(--accent); }
.calc-btn:active { transform: scale(0.94); }
.calc-btn.calc-op { color: var(--accent); border-color: var(--accent-dim); }
.calc-btn.calc-equals {
  grid-column: span 2;
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
}
.calc-btn.calc-equals:hover { color: var(--bg); border-color: var(--accent-2); background: var(--accent-2); }
.calc-btn.calc-clear { color: var(--accent-2); }
.calc-btn.calc-backspace { grid-column: span 2; }

/* ---------- solitaire ---------- */
.sol-board {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
.sol-top-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  flex: 0 0 auto;
}
.sol-spacer { flex: 1; }
.sol-pile {
  position: relative;
  width: var(--card-w, 62px);
  height: var(--card-h, 86px);
  border: 1px dashed var(--card-border);
  border-radius: 4px;
  flex: 0 0 auto;
}
.sol-stock { cursor: pointer; }
.sol-foundations {
  display: flex;
  gap: 0.6rem;
  flex: 0 0 auto;
}
.foundation-hint {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: var(--card-border);
  font-size: calc(var(--card-font, 0.85rem) * 1.8);
}
.sol-tableau {
  display: flex;
  gap: 0.6rem;
  flex: 1 1 auto;
  align-items: flex-start;
}
.sol-column {
  display: flex;
  flex-direction: column;
  width: var(--card-w, 62px);
  min-height: var(--card-h, 86px);
  flex: 0 0 auto;
}
.sol-column:empty {
  border: 1px dashed var(--card-border);
  border-radius: 4px;
}
.sol-column .card:not(:first-child) { margin-top: var(--card-overlap, -62px); }

.card {
  position: absolute;
  width: var(--card-w, 62px);
  height: var(--card-h, 86px);
  border-radius: 4px;
  border: 1px solid var(--card-border);
  background: var(--bg-alt);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: var(--card-font, 0.85rem);
  font-weight: 700;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 0.25rem 0.35rem;
  cursor: pointer;
  user-select: none;
}
/* Inside a stock/waste/foundation slot or a tableau column, cards flow in
   normal layout instead of the absolute fan-positioning waste uses. */
.sol-stock .card,
.sol-foundation .card,
.sol-column .card {
  position: relative;
}
.card.red { color: #ff5c5c; }
.card.card-back {
  background: var(--bg);
  color: var(--accent);
  align-items: center;
  justify-content: center;
}
.card-back-mark { font-size: 1.3em; }
.card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent);
}
.card.dragging {
  box-shadow: 0 10px 24px -6px rgba(0, 0, 0, 0.65);
  cursor: grabbing;
}
.card-empty {
  position: relative;
  display: grid;
  place-items: center;
  color: var(--muted);
  font-size: calc(var(--card-font, 0.85rem) * 1.3);
  background: transparent;
  cursor: pointer;
}
.card-rank { align-self: flex-start; }
.card-rank-bottom { align-self: flex-end; }
.card-suit-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2.3em;
}

/* ---------- reduced motion ---------- */
/* Canvas-driven effects (cursor trail, code rain, favicon pulse) can't be
   reached by CSS at all — those are gated in script.js via matchMedia. This
   covers everything CSS actually controls. The rm -rf glitch sequence in
   particular does rapid flashing, which is a real photosensitive-seizure
   risk, not just an animation preference — it's turned off outright below,
   not just shortened. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .cursor-blink { animation: none !important; opacity: 1; }
  .vim-cursor { animation: none !important; opacity: 1; }
  .blob { animation: none !important; }
  .scanlines { animation: none !important; opacity: 0.25; }
  h1.glitch:hover::before,
  h1.glitch:hover::after { animation: none !important; opacity: 0 !important; }

  .crash-overlay.glitching,
  .crash-overlay.glitching::before,
  .crash-overlay.glitching::after,
  .crash-noise,
  .crash-slice-r,
  .crash-slice-g,
  .crash-slice-b {
    animation: none !important;
    opacity: 0 !important;
  }
  .crash-overlay.hard-flash { background: transparent !important; }
}