:root {
  --bg:        #0a0a0f;
  --bg2:       #0f0f1a;
  --panel:     #141420;
  --border:    #2a2a4a;
  --border2:   #3a3a6a;
  --accent:    #7c6cff;
  --accent2:   #ff6caa;
  --accent3:   #6cffd4;
  --yellow:    #ffe66c;
  --text:      #c8c8e8;
  --textdim:   #6a6a9a;
  --textbright:#e8e8ff;
  --scanline:  rgba(0,0,0,0.15);
  --pixel:     'Press Start 2P', monospace;
  --vt:        'VT323', monospace;
  --mono:      'Share Tech Mono', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: auto; }

body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--mono);
  font-size: 28px;
  line-height: 1.25;
  min-height: 100vh;
  cursor: crosshair;
  overflow-x: hidden;
}

body::before {
  content: '';
  position: fixed; inset: 0;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 3px,
    rgba(0,0,0,0.46) 7px,
    rgb(0, 0, 0) 6px
  );
  pointer-events: none; z-index: 9999;
}


/*          ══ Retro city background ══
Canvas draws at a fixed 1920×1080 internal resolution.
object-fit:cover scales it up to always fill the viewport,
cropping the sides/top rather than distorting or leaving gaps.*/
#city-canvas {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  object-position: center center;
  pointer-events: none;
  z-index: 0;
  opacity: 0.8;
}

/* Everything else sits above the city */
.ticker-wrap, .page-shell, .mobile-nav-toggle { position: relative; z-index: 1; }

/* ══ MUSIC PLAYER ══ */
/* ══ BOTTOM DOCK ══
   All bottom-left widgets (radio, tool mini-bar, zen exit) are flex children
   of this container. Adding/removing display:none on any child automatically
   reflows the row — no JS positioning required. */
#bottom-dock {
  position: fixed;
  bottom: 18px; left: 18px;
  z-index: 500;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 8px;
  pointer-events: none;   /* dock frame is not interactive */
}

#bottom-dock > * { pointer-events: all; }

#radio-player-wrap {
  display: none;
  flex-direction: column;
  border: 1px solid var(--border2);
  background: var(--panel);
  box-shadow: 0 0 20px rgba(124,108,255,0.25);
  overflow: hidden;
}

@keyframes radio-slide-in {
  from { transform: translateY(calc(100% + 36px)); opacity: 0; }
  to   { transform: translateY(0);                 opacity: 1; }
}

@keyframes radio-slide-out {
  from { transform: translateY(0);                 opacity: 1; }
  to   { transform: translateY(calc(100% + 36px)); opacity: 0; }
}

#radio-player-wrap.visible {
  display: flex;
  animation: radio-slide-in 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* radio-hiding plays the out-animation while the panel is still display:flex */
#radio-player-wrap.radio-hiding {
  animation: radio-slide-out 0.32s ease forwards;
}

#radio-player-bar {
  font-family: var(--pixel);
  padding: 14px 18px;
  display: flex;
  flex-direction: column;
  gap: 0;
  min-width: 290px; max-width: 360px;
}

/* Collapsible body — wraps vol, station, track rows */
.radio-body {
  display: flex;
  flex-direction: column;
  gap: 9px;
  overflow: hidden;
  margin-top: 9px;
}

.radio-head {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 9px;
  color: var(--accent2);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.radio-head .radio-play  {
  background: none; border: none; padding: 0; margin: 0; cursor: pointer;
  color: var(--accent);
  font-family: "Segoe UI Symbol", "Apple Color Emoji", system-ui, sans-serif;
  font-size: 16px;
  line-height: 1;
  position: relative; top: -0.25em;
}
.radio-head .radio-play::before { content: '⏸'; }
#radio-player-wrap.paused .radio-head .radio-play::before { content: '▶'; }
.radio-head .radio-play:hover { color: var(--accent2); }
.radio-head .radio-label { flex: 1; }
.radio-live  {
  color: #ff6a6a; font-size: 12px; font-weight: bold;
  animation: radio-pulse 1.4s ease-in-out infinite;
}
.radio-live .radio-dot { font-size: 25px; line-height: 0; vertical-align: middle; position: relative; top: -0.32em; }
@keyframes radio-pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.2; } }
#radio-player-wrap.paused .radio-live { color: #7a7a8c; animation: none; }

/* Minimise chevron in the panel's top-right corner */
.radio-head .radio-toggle {
  background: none; border: none; padding: 0; margin: 0;
  color: #fff; font-size: 32px; line-height: 1; cursor: pointer;
}
.radio-head .radio-toggle:hover { color: var(--accent); }

/* Minimised state */
#radio-mini {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: var(--panel);
  border: 1px solid transparent;
  cursor: pointer;
  font-family: var(--pixel);
  font-size: 7px;
  color: var(--accent2);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: border-color 0.1s;
}
#radio-mini .radio-up { color: #fff; font-size: 32px; line-height: 1; transform: translateY(-0.2em); }
#radio-mini:hover { border-color: var(--accent); }
#radio-player-wrap.minimized #radio-player-bar { display: none; }
#radio-player-wrap.minimized #radio-mini       { display: flex; }

.radio-station {
  font-size: 11px;
  color: var(--accent);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}

.radio-track {
  font-size: 11px;
  line-height: 1.6;
  color: #fff;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Volume slider row */
.radio-vol { display: flex; align-items: center; gap: 9px; }
.radio-vol-label {
  font-family: var(--pixel); font-size: 7px; color: var(--accent2);
  letter-spacing: 0.5px; text-transform: uppercase;
  cursor: pointer; user-select: none;
  transition: color 0.15s ease;
}
.radio-vol-label:hover { color: var(--accent); }
.radio-volume {
  -webkit-appearance: none; appearance: none;
  flex: 1; height: 4px; margin: 0; border-radius: 2px;
  background: var(--border2); cursor: pointer;
  transition: opacity 0.2s ease;
}
.radio-volume::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 9px; height: 14px; border-radius: 2px; border: none;
  background: var(--accent); cursor: pointer;
  transition: background 0.2s ease;
}
.radio-volume::-moz-range-thumb {
  width: 9px; height: 14px; border-radius: 2px; border: none;
  background: var(--accent); cursor: pointer;
  transition: background 0.2s ease;
}
.radio-volume::-moz-range-track { height: 4px; border-radius: 2px; background: var(--border2); }

/* Muted state */
#radio-player-wrap.radio-muted .radio-vol-label { color: var(--textdim); }
#radio-player-wrap.radio-muted .radio-vol-label:hover { color: var(--textdim); }
#radio-player-wrap.radio-muted .radio-volume { opacity: 1; }
#radio-player-wrap.radio-muted .radio-volume::-webkit-slider-thumb { background: var(--textdim); }
#radio-player-wrap.radio-muted .radio-volume::-moz-range-thumb     { background: var(--textdim); }

/* Hidden audio-stream element */
#radio-audio { display: none; }

/* ══ FAKE ADS ══ */
.fake-ad {
  position: fixed;
  width: 200px;
  z-index: 470;
  background: var(--panel);
  border: 1px solid var(--border2);
  box-shadow: 0 4px 18px rgba(0,0,0,0.6);
  animation: ad-pop 0.16s ease-out;
}
@keyframes ad-pop {
  from { transform: scale(0.7); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}
.fake-ad-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 5px 6px;
  font-family: var(--pixel);
  font-size: 7px;
  color: #0a0a14;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  cursor: move;
  user-select: none;
  touch-action: none;
}
.fake-ad-title {
  flex: 1;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.fake-ad-x {
  background: rgba(0,0,0,0.25);
  border: none;
  color: #0a0a14;
  font-size: 9px;
  line-height: 1;
  padding: 2px 4px;
  cursor: pointer;
  flex-shrink: 0;
}
.fake-ad-x:hover { background: rgba(0,0,0,0.5); color: #fff; }
.fake-ad-body {
  padding: 9px 10px;
  font-family: var(--vt);
  font-size: 19px;
  line-height: 1.2;
  color: var(--textbright);
}
.fake-ad-body.blink {
  font-size: 23px;
  color: #ffe66c;
  animation: ad-blink 1.1s steps(1, end) infinite;
}
@keyframes ad-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.fake-ad-body.scroll { overflow: hidden; white-space: nowrap; }
.fake-ad-body.scroll span {
  display: inline-block;
  padding-left: 100%;
  animation: ad-marquee 7s linear infinite;
}
@keyframes ad-marquee { from { transform: translateX(0); } to { transform: translateX(-100%); } }
.fake-ad.pulse {
  animation: ad-pop 0.16s ease-out, ad-pulse 1.2s ease-in-out 0.16s infinite;
}
@keyframes ad-pulse {
  0%, 100% { box-shadow: 0 4px 18px rgba(0,0,0,0.6); }
  50%      { box-shadow: 0 0 24px var(--glow, var(--accent)); }
}
.fake-ad-tag {
  padding: 0 10px 7px;
  font-family: var(--pixel);
  font-size: 6px;
  color: var(--textdim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ══ TICKER ══ */
.ticker-wrap {
  background: var(--panel);
  border-bottom: 2px solid var(--border);
  padding: 7px 0;
  overflow: hidden;
  white-space: nowrap;
  position: sticky; top: 0; z-index: 200;
}

.ticker-track {
  display: inline-flex;
  animation: ticker-scroll 35s linear infinite;
  will-change: transform;
}

@keyframes ticker-scroll { 0%{transform:translateX(0)} 100%{transform:translateX(var(--ticker-end,-50%))} }

.ticker-copy { display: inline-flex; align-items: center; }

.ticker-item {
  font-family: var(--pixel); font-size: 11px;
  color: var(--accent2); letter-spacing: 1px;
  text-transform: uppercase; padding: 0 28px; flex-shrink: 0;
}

.ticker-sep { color: var(--accent3); font-family: var(--pixel); font-size: 11px; flex-shrink: 0; }

/* ══ CENTERED SHELL ══ */
.page-shell { max-width: 1120px; margin: 0 auto; padding: 0 20px; }

/* ══ NAME BANNER ══ */
.site-name-banner {
  padding: 30px 0 18px;
  text-align: center;
  border-bottom: 1px solid var(--border);
  margin-bottom: 24px;
}

@keyframes flicker {
  0%,100%{opacity:1} 92%{opacity:1} 93%{opacity:0.5} 94%{opacity:1} 96%{opacity:0.7} 97%{opacity:1}
}

.site-name {
  font-family: var(--pixel);
  font-size: clamp(22px, 4vw, 46px);
  color: var(--textbright);
  text-shadow: 3px 3px 0 var(--accent), 0 0 28px rgba(124,108,255,0.45);
  animation: flicker 7s infinite;
  display: inline-block;
  letter-spacing: 2px;
  cursor: default;
  line-height: 1.4;
  transition: text-shadow 0.1s;
  white-space: pre-wrap;
}

.site-name .term-cursor {
  display: inline-block;
  width: 0.55em;
  height: 0.08em;
  background: var(--textbright);
  vertical-align: baseline;
  margin-bottom: 0.12em;
  margin-left: 0.05em;
  animation: blink-under 1.1s step-start infinite;
  cursor: text;
}

.site-name.typing .term-cursor {
  animation: none;
  opacity: 1;
  width: 0.6em;
  height: 0.85em;
  margin-bottom: 0;
  vertical-align: middle;
  background: var(--textbright);
}

@keyframes blink-under { 0%,100%{opacity:1} 50%{opacity:0} }

.site-name-sub {
  font-family: var(--vt);
  font-size: 28px; color: var(--textdim);
  letter-spacing: 3px; text-transform: uppercase; margin-top: 6px;
}

/* ══ FEED: main left, sidebar right ══ */
.feed {
  display: grid;
  grid-template-columns: 1fr 248px;
  gap: 0;
  align-items: start;
  position: relative;
}

/* feed background */
.feed::before {
  content: '';
  position: absolute;
  inset: -14px -14px -14px -14px;
  z-index: -1;
  pointer-events: none;
  background-color: rgba(6,5,18,0.62);
  background-image:
    linear-gradient(45deg, rgba(0,0,0,0.30) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.30) 75%),
    linear-gradient(45deg, rgba(0,0,0,0.30) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.30) 75%);
  background-size: 4px 4px;
  background-position: 0 0, 2px 2px;
  image-rendering: pixelated;
}

/*  Main content  */
.main-content { min-width: 0; padding: 0 24px 48px 0; }

/*  RIGHT SIDEBAR  */
.sidebar {
  border-left: 1px solid var(--border);
  padding: 0 0 0 16px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Shared sidebar widget style */
.sw {
  border: 1px solid var(--border);
  background: var(--panel);
  margin-bottom: 10px;
}

.sw-head {
  font-family: var(--pixel);
  font-size: 10px;
  color: var(--accent2);
  padding: 9px 12px;
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  gap: 7px;
  line-height: 1;
}

.sw-head::before {
  content: '▶';
  font-size: 14px;
  color: var(--accent);
  flex-shrink: 0;
  line-height: 0.5;
  position: relative;
  top: -3px;
}

.sw-body { padding: 10px; container-type: inline-size; }

/*  NAV widget  */
.vnav-links { list-style: none; }

.vnav-links li { border-bottom: 1px dotted var(--border); }
.vnav-links li:last-child { border-bottom: none; }

.vnav-links a {
  font-family: var(--pixel);
  font-size: 10px;
  color: var(--textdim);
  text-decoration: none;
  padding: 12px 8px;
  display: flex;
  align-items: center;
  gap: 9px;
  border-left: 2px solid transparent;
  transition: all 0.1s;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.vnav-links a .ni { font-size: 14px; line-height: 1; flex-shrink: 0; display: inline-flex; align-items: center; }

.vnav-links a:hover {
  color: var(--accent3);
  border-left-color: var(--accent3);
  background: rgba(108,255,212,0.04);
}

.vnav-links a.active {
  color: var(--accent);
  border-left-color: var(--accent);
  background: rgba(124,108,255,0.1);
}

/* WEATHER widget */
.wx-main {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  padding: 6px 0 2px;
  width: 100%;
  overflow: hidden;
  min-width: 0;
}

.wx-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  flex: 0 1 44%;
  min-width: 0;
  overflow: hidden;
}

.wx-icon {
  font-size: clamp(22px, 17cqi, 40px);
  line-height: 1.2;
}

.wx-cond {
  font-family: var(--vt);
  font-size: clamp(15px, 9.5cqi, 24px);
  color: var(--yellow);
  letter-spacing: 0.5px;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  width: 100%;
  line-height: 1.2;
}

.wx-right {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 6px;
  flex: 1 1 0;
  min-width: 0;
  overflow: hidden;
}

.wx-temp {
  font-family: var(--pixel);
  font-size: clamp(14px, 10.5cqi, 26px);
  color: var(--accent3);
  line-height: 1;
  transition: color 0.4s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.wx-loc {
  font-family: var(--pixel);
  font-size: clamp(7px, 3.8cqi, 9px);
  color: var(--textdim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 5px;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  width: 100%;
  line-height: 1.25;
}

.wx-hot .wx-temp {
  background: linear-gradient(135deg, #ff9f40, #ff3a3a);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.wx-cold .wx-temp {
  background: linear-gradient(135deg, #6cdeff, #4a9fff);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.wx-forecast {
  border-top: 1px dashed var(--border);
  padding-top: 8px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.wx-day {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wx-day-name {
  font-family: var(--pixel);
  font-size: 8px;
  color: var(--textdim);
  text-transform: uppercase;
  width: 30px;
  flex-shrink: 0;
}

.wx-day-icon {
  font-size: 13px;
  line-height: 1;
  flex-shrink: 0;
  width: 18px;
  text-align: center;
}

.wx-day-bar-wrap {
  flex: 1;
  height: 5px;
  background: var(--border);
  margin: 0 8px;
  position: relative;
}

.wx-day-bar {
  position: absolute;
  left: 0; top: 0; height: 100%;
  opacity: 0.85;
}

.wx-day-hi {
  font-family: var(--pixel);
  font-size: 8px;
  width: 34px;
  text-align: right;
  flex-shrink: 0;
}

.wx-updated {
  font-family: var(--pixel);
  font-size: 8px;
  color: var(--textdim);
  margin-top: 8px;
  color:#c8c8e8;
  padding-top: 6px;
  border-top: 2px dashed var(--border);
  text-align: center;
  line-height: 1.25;
}

/* SUN widget */
.sun-main {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
  padding: 6px 0 2px;
  width: 100%;
  overflow: hidden;
  min-width: 0;
}

.sun-icon {
  font-size: clamp(28px, 22cqi, 48px);
  line-height: 1;
  flex-shrink: 0;
}

.sun-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
  overflow: hidden;
}

.sun-label {
  font-family: var(--vt);
  font-size: clamp(15px, 9.5cqi, 24px);
  color: var(--yellow);
  letter-spacing: 0.5px;
  line-height: 1.1;
}

.sun-time {
  font-family: var(--pixel);
  font-size: clamp(14px, 10.5cqi, 26px);
  color: var(--accent3);
  line-height: 1;
  white-space: nowrap;
}

.sun-loc {
  font-family: var(--pixel);   /* match the weather widget's "London" (.wx-temp @ 14px) */
  font-size: 14px;
  color: var(--accent3);
  line-height: 1;
  white-space: nowrap;
}

/*  CATS widget  */
.cat-frame {
  width: 100%;
  aspect-ratio: 1 / 1;
  position: relative;
  overflow: hidden;
  background: var(--bg2);
  border: 1px solid var(--border);
}

.cat-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 90px;
  line-height: 1;
  user-select: none;
  pointer-events: none;
}

.cat-frame img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 1s ease;
}

.cat-frame img.visible { opacity: 1; }

.cat-caption {
  font-family: var(--pixel);
  font-size: 7px;
  color: var(--textdim);
  color:#c8c8e8;
  text-align: center;
  margin-top: 8px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  line-height: 1.8;
}

/*  TOGGLES widget  */
.toggle-list { list-style: none; display: flex; flex-direction: column; gap: 0; }

.toggle-item {
  display: block;
  border-bottom: 1px dotted var(--border);
}

.toggle-item:last-child { border-bottom: none; }

.toggle-item label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 4px;
  cursor: pointer;
  width: 100%;
  transition: background 0.1s;
}

.toggle-item label:hover { background: rgba(108,255,212,0.04); }

.toggle-item input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 11px;
  height: 11px;
  border: 1px solid var(--border2);
  background: var(--bg2);
  flex-shrink: 0;
  cursor: pointer;
  position: relative;
  transition: background 0.1s, border-color 0.1s;
}

.toggle-item input[type="checkbox"]:checked {
  background: var(--accent);
  border-color: var(--accent);
}

.toggle-item input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  top: 1px; left: 2px;
  width: 5px; height: 3px;
  border-bottom: 1.5px solid var(--bg);
  border-right: 1.5px solid var(--bg);
  transform: rotate(45deg);
}

.toggle-label {
  font-family: var(--pixel);
  font-size: 9px;
  color: var(--textdim);
  line-height: 1.8;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  transition: color 0.1s;
  pointer-events: none;
}

.toggle-item:has(input:checked) .toggle-label { color: var(--accent3); }

/*  Functional toggle states  */
body.no-scanlines::before { display: none; }
body.no-ticker .ticker-wrap { display: none; }
/* Default-cursor mode: arrow base (inherited by everything), but keep the
   finger pointer on things you can actually click — including href-less nav
   links that don't declare their own cursor. */
body.default-cursor { cursor: default !important; }
body.default-cursor a,
body.default-cursor button,
body.default-cursor label,
body.default-cursor select,
body.default-cursor summary,
body.default-cursor .nav-link,
body.default-cursor [role="button"],
body.default-cursor input[type="checkbox"],
body.default-cursor input[type="radio"],
body.default-cursor input[type="range"] { cursor: pointer !important; }

/* ══ SECTION transitions — child build-in animation ══ */
@keyframes panel-child-in {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Each direct child of an incoming section slides in with a staggered delay
   set via the --pi (panel index) custom property on each element */
.panel-in > * {
  opacity: 0;
  animation: panel-child-in 0.2s ease forwards;
  animation-delay: calc(var(--pi, 0) * 70ms);
}

/* ══ Shared content utilities ══ */
.dither {
  height: 8px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Crect x='0' y='0' width='4' height='4' fill='%232a2a4a'/%3E%3Crect x='4' y='4' width='4' height='4' fill='%232a2a4a'/%3E%3C/svg%3E");
  background-repeat: repeat-x; margin: 24px 0;
}

.sec-title {
  font-family: var(--pixel); font-size: 16px;
  color: var(--accent);
  text-shadow: 0 0 6px rgba(124,108,255,0.5);
  margin-bottom: 20px; padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 10px;
  line-height: 1;
}

.sec-title::before {
  content: '▶';
  color: var(--accent2);
  font-size: 18px;
  flex-shrink: 0;
  line-height: 1;
  position: relative;
  top: -4;
  display: flex;
  align-items: center;
}

@keyframes blink { 0%,100%{opacity:1} 50%{opacity:0} }
.cursor { animation: blink 1s infinite; color: var(--accent); }

/* ══ HOME ══ */
.hero-box {
  border: 1px solid var(--border2); background: var(--panel);
  padding: 24px 24px 20px; position: relative; overflow: hidden; margin-bottom: 24px;
}

.hero-box::before {
  content: ''; position: absolute; top: 0; left: 0;
  width: 0; height: 0; border-top: 16px solid var(--accent); border-right: 16px solid transparent;
}

.hero-box::after {
  content: ''; position: absolute; bottom: 0; right: 0;
  width: 0; height: 0; border-bottom: 16px solid var(--accent); border-left: 16px solid transparent;
}

.hero-tag {
  font-family: var(--pixel); font-size: 10px; color: var(--accent2);
  letter-spacing: 2px; margin-bottom: 14px;
  display: flex; align-items: center; gap: 6px;
  line-height: 1;
}

.hero-name {
  font-family: var(--pixel); font-size: 24px; color: var(--textbright);
  line-height: 1.5; margin-bottom: 8px;
  text-shadow: 2px 2px 0 var(--accent), 0 0 18px rgba(124,108,255,0.35);
  animation: flicker 7s infinite;
}

.hero-sub {
  font-family: var(--vt); font-size: 30px; color: var(--accent3);
  margin-bottom: 16px; letter-spacing: 1px;
}

.hero-body { font-family: var(--vt); font-size: 28px; color: var(--text); line-height: 1.1; }
.hero-body p { margin-bottom: 10px; }
.hero-body .hl { color: var(--yellow); }

.stats-row { display: flex; gap: 0; margin-top: 18px; flex-wrap: wrap; }

.stat-item {
  padding: 9px 14px; border: 1px solid var(--border); border-right: none;
  background: var(--bg2); text-align: center; flex: 1; min-width: 80px;
}

.stat-item:last-child { border-right: 1px solid var(--border); }

.stat-val {
  font-family: var(--pixel); font-size: 17px; color: var(--accent3);
  display: block; text-shadow: 0 0 8px rgba(108,255,212,0.4);
  line-height: 1.3;
}

.stat-val.infinity {
  font-family: var(--mono);
  font-size: 46px;
  line-height: 0.48;
  letter-spacing: 0;
}

.stat-label { font-family: var(--pixel); font-size: 8px; color: var(--textdim); display: block; margin-top: 3px; text-transform: uppercase; }

/*  Cat widget: animated collapse/expand  */
.sw-cat {
  margin-bottom: 10px;
  border: 1px solid var(--border);
  background: var(--panel);
}

/* ══ Collapsible widget bodies — shared by .sw and .sw-cat ══ */
.sw .sw-body,
.sw-cat .sw-body {
  overflow: hidden;
  transition: max-height 0.45s cubic-bezier(0.4, 0, 0.2, 1),
              padding 0.4s ease,
              opacity 0.3s ease;
  max-height: 800px;
  opacity: 1;
}

.sw.collapsed .sw-body,
.sw-cat.collapsed .sw-body {
  max-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  opacity: 0;
}

/* Clickable header */
.sw .sw-head,
.sw-cat .sw-head {
  cursor: pointer;
  user-select: none;
  transition: color 0.25s ease;
}

.sw .sw-head::before,
.sw-cat .sw-head::before { transition: color 0.25s ease; }

.sw.collapsed .sw-head,
.sw.collapsed .sw-head::before,
.sw-cat.collapsed .sw-head,
.sw-cat.collapsed .sw-head::before { color: var(--textdim); }

/* ══ EASTER EGG: secret widget + zen mode ══ */
#secret-widget-wrap { overflow: hidden; }

#secret-widget {
  margin-bottom: 10px;
  border: 1px solid var(--accent2);
  background: var(--panel);
  display: none;
}

#secret-widget .sw-head { color: var(--accent2); animation: flicker 4s infinite; }
#secret-widget .sw-head::before { color: var(--accent2); }

#secret-widget .sw-body {
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  padding: 0 10px !important;
  transition: max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1),
              opacity 0.3s ease,
              padding 0.32s ease;
}

#secret-widget.sw-open .sw-body {
  max-height: 120px;
  opacity: 1;
  padding: 10px !important;
}

@keyframes sw-enter {
  from { transform: translateY(-100%); }
  to   { transform: translateY(0); }
}

@keyframes sw-exit-up {
  from { transform: translateY(0);     opacity: 1; }
  to   { transform: translateY(-260%); opacity: 0; }
}

/* Main UI fade out when entering zen */
@keyframes zen-ui-out {
  from { opacity: 1; transform: translateY(0);     }
  to   { opacity: 0; transform: translateY(-20px); }
}

/* Main UI fade in when exiting zen */
@keyframes zen-ui-in {
  from { opacity: 0; transform: translateY(-20px); }
  to   { opacity: 1; transform: translateY(0);     }
}

body.zen-ui-out .ticker-wrap,
body.zen-ui-out .page-shell {
  animation: zen-ui-out 0.32s ease forwards;
  pointer-events: none;
}

body.zen-ui-in .ticker-wrap,
body.zen-ui-in .page-shell {
  animation: zen-ui-in 0.36s ease forwards;
}

body.zen-mode .ticker-wrap,
body.zen-mode .page-shell,
body.zen-mode .mobile-nav-toggle { display: none !important; }
body.zen-mode:not(.zen-radio) #radio-player-wrap { display: none !important; }

/* Zen exit button */
#zen-exit {
  display: none;
  font-family: var(--pixel);
  font-size: 14px;
  padding: 15px 20px;
  background: var(--panel);
  border: 1px solid var(--accent2);
  color: var(--accent2);
  cursor: pointer;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  transition: background 0.1s, color 0.1s;
}

#zen-exit:hover { background: var(--accent2); color: var(--bg); }

@keyframes zen-exit-in {
  from { transform: translateY(80px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

@keyframes zen-exit-out {
  from { transform: translateY(0);    opacity: 1; }
  to   { transform: translateY(80px); opacity: 0; }
}

#zen-exit.anim-in  { animation: zen-exit-in  0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
#zen-exit.anim-out { animation: zen-exit-out 0.3s ease forwards; }

#zen-btn {
  font-family: var(--pixel);
  font-size: 9px;
  width: 100%;
  padding: 11px 8px;
  background: rgba(255,108,170,0.07);
  border: 1px solid var(--accent2);
  color: var(--accent2);
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  transition: background 0.1s, color 0.1s;
  display: block;
}

#zen-btn:hover { background: var(--accent2); color: var(--bg); }

/* ══ RAIN canvas ══ */
#rain-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 50;
  opacity: 0;
  transition: opacity 0.8s ease;
}

#rain-canvas.active { opacity: 1; }

/* ══ PORTFOLIO ══ */
.portfolio-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }

.proj-card {
  background: var(--panel); border: 1px solid var(--border); padding: 18px;
  position: relative; transition: border-color 0.1s, transform 0.1s, box-shadow 0.1s;
  cursor: pointer; text-decoration: none; display: block; color: inherit;
}

a.proj-card:hover { border-color: var(--accent); transform: translate(-2px,-2px); box-shadow: 2px 2px 0 var(--accent); }
div.proj-card { cursor: default; }

.proj-num { font-family: var(--pixel); font-size: 8px; color: var(--accent2); margin-bottom: 8px; display: block; }

.proj-card h3 { font-family: var(--pixel); font-size: 11px; color: var(--textbright); margin-bottom: 10px; line-height: 1.7; }

.proj-card p { font-family: var(--vt); font-size: 25px; color: var(--textdim); line-height: 1; margin-bottom: 10px; }

.tag-list { display: flex; flex-wrap: wrap; gap: 4px; }

.tag { font-family: var(--pixel); font-size: 7px; padding: 3px 6px; border: 1px solid var(--border2); color: var(--textdim); background: var(--bg2); text-transform: uppercase; }
.tag.cpp    { border-color: #ff9f40; color: #ff9f40; }
.tag.csharp { border-color: #a855f7; color: #a855f7; }
.tag.web    { border-color: var(--accent3); color: var(--accent3); }
.tag.game   { border-color: var(--accent2); color: var(--accent2); }

.badge-wip { position: absolute; top: 9px; right: 9px; font-family: var(--pixel); font-size: 7px; background: var(--accent2); color: var(--bg); padding: 3px 6px; animation: blink 2s infinite; }

/* ══ TOOLS ══ */
.tools-list { display: flex; flex-direction: column; gap: 12px; }

.tool-card {
  background: var(--bg2);
  border: 1px solid var(--border);
  padding: 18px 20px;
  text-decoration: none;
  color: inherit;
  display: flex;
  align-items: center;
  gap: 18px;
  transition: border-color 0.1s, background 0.1s;
  position: relative;
}

.tool-card:not(.tool-wip):hover {
  border-color: var(--accent3);
  background: var(--panel);
}

.tool-card.tool-wip {
  opacity: 0.45;
  cursor: default;
  border-style: dashed;
}

.tool-icon { font-size: 30px; line-height: 1; flex-shrink: 0; }
.tool-info { flex: 1; min-width: 0; }

.tool-card h3 {
  font-family: var(--pixel);
  font-size: 13px;
  color: var(--accent3);
  margin-bottom: 6px;
  line-height: 1.6;
}

.tool-card.tool-wip h3 { color: var(--textdim); }

.tool-card p {
  font-family: var(--vt);
  font-size: 28px;
  color: var(--textdim);
  line-height: 1;
}

.tool-launch {
  font-family: var(--pixel);
  font-size: 10px;
  padding: 11px 16px;
  border: 1px solid var(--accent3);
  color: var(--accent3);
  background: rgba(108,255,212,0.06);
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.1s;
  cursor: pointer;
  display: inline-block;
}

.tool-launch:hover { background: var(--accent3); color: var(--bg); }

.tool-launch.wip {
  border-color: var(--border2);
  color: var(--textdim);
  font-size:25px;
  background: transparent;
  cursor: default;
  pointer-events: none;
}

/* ══ GAMES ══ */
.games-list { display: flex; flex-direction: column; gap: 20px; }

.game-card {
  background: var(--panel);
  border: 1px solid var(--border);
  transition: border-color 0.1s;
  position: relative;
}

.game-top {
  display: flex;
  gap: 20px;
  padding: 18px;
}

.game-boxart {
  flex-shrink: 0;
  width: 160px;
  height: 220px;
  background: var(--bg2);
  border: 1px solid var(--border);
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.1s;
}

.game-boxart:hover { border-color: var(--accent); }
.game-boxart:hover img { opacity: 0.8; transition: opacity 0.1s; }

/* ══ IMAGE LIGHTBOX ══ */
#img-modal {
  position: fixed;
  inset: 0;
  z-index: 650;
  background: rgba(0,0,0,0.94);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 60px 90px;
}

#img-modal.open { display: flex; }

#img-modal-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  display: block;
  border: 1px solid var(--border2);
  box-shadow: 0 0 60px rgba(124,108,255,0.2);
}

.ilb-btn {
  position: absolute;
  background: var(--panel);
  border: 1px solid var(--border2);
  color: var(--textdim);
  cursor: pointer;
  font-family: system-ui, -apple-system, sans-serif;
  font-weight: 700;
  transition: border-color 0.1s, color 0.1s;
  line-height: 1;
}

.ilb-btn:hover { border-color: var(--accent); color: var(--accent); }

#img-modal-close { top: 18px; right: 18px; font-size: 15px; padding: 6px 10px; font-weight: 900; }
#img-modal-prev  { left: 18px; top: 50%; transform: translateY(-50%); font-size: 28px; padding: 10px 16px; }
#img-modal-next  { right: 18px; top: 50%; transform: translateY(-50%); font-size: 28px; padding: 10px 16px; }

#img-modal-counter {
  position: absolute;
  bottom: 20px; left: 50%;
  transform: translateX(-50%);
  font-family: var(--pixel);
  font-size: 8px;
  color: var(--textdim);
  letter-spacing: 1px;
  pointer-events: none;
}

#img-modal-prev.ilb-hidden,
#img-modal-next.ilb-hidden,
#img-modal-counter.ilb-hidden { display: none; }

.game-boxart img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}

.game-boxart-placeholder { font-size: 48px; opacity: 0.2; }

.game-info {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 10px;
}

.game-title {
  font-family: var(--pixel);
  font-size: 12px;
  color: var(--textbright);
  line-height: 1.6;
}

.game-stars-row { display: flex; align-items: center; gap: 8px; }

.star-full  { color: var(--yellow); font-size: 16px; }
.star-empty { color: var(--border2); font-size: 16px; }

.game-rating-num {
  font-family: var(--pixel);
  font-size: 8px;
  color: var(--textdim);
}

.game-meta {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 14px;
  align-items: baseline;
}

.game-meta-key {
  font-family: var(--pixel); font-size: 8px;
  color: var(--textdim); text-transform: uppercase; letter-spacing: 0.3px;
  white-space: nowrap;
}

.game-meta-val {
  font-family: var(--vt); font-size: 22px;
  color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.game-bottom {
  border-top: 1px solid var(--border);
  padding: 14px 18px;
}

.game-desc {
  font-family: var(--vt); font-size: 24px;
  color: var(--textdim); line-height: 1.5;
  flex: 1; min-width: 0;
}

.game-title-row {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 10px;
}

.game-launch {
  font-family: var(--pixel); font-size: 10px;
  padding: 11px 16px;
  border: 1px solid var(--accent3);
  color: var(--accent3);
  background: rgba(108,255,212,0.06);
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
  text-decoration: none;
  transition: all 0.1s;
}

.game-launch:hover { background: var(--accent3); color: var(--bg); }

.games-empty {
  font-family: var(--pixel); font-size: 9px;
  color: var(--textdim); text-align: center;
  padding: 40px 20px; border: 1px dashed var(--border);
  line-height: 2.8; letter-spacing: 0.3px;
}

/* ══ CV ══ */
.cv-section { margin-bottom: 28px; }

.cv-section-title { font-family: var(--pixel); font-size: 11px; color: var(--accent2); margin-bottom: 11px; padding: 7px 0; border-bottom: 1px dashed var(--border2); letter-spacing: 0.5px; }

.cv-entry {
  margin-bottom: 12px; padding: 13px 13px 13px 15px;
  background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--accent);
}

.cv-entry-header {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 4px;
}

.cv-role { font-family: var(--pixel); font-size: 11px; color: var(--textbright); line-height: 1.25; display: block; margin-bottom: 3px; }
.cv-company { font-family: var(--vt); font-size: 28px; color: var(--accent3); display: block; }
.cv-desc { font-family: var(--vt); font-size: 24px; color: var(--textdim); line-height: 1.25; }
.cv-date { font-family: var(--pixel); font-size: 8px; color: var(--textdim); white-space: nowrap; margin-top: 2px; flex-shrink: 0; }

.cv-skills-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }

.cv-skill-chip { background: var(--bg2); border: 1px solid var(--border2); padding: 8px 11px; font-family: var(--vt); font-size: 24px; color: var(--text); display: flex; align-items: center; gap: 6px; }
.cv-skill-chip::before { content: '›'; color: var(--accent3); font-family: var(--pixel); font-size: 14px; }

.cv-download { display: inline-flex; align-items: center; gap: 7px; font-family: var(--pixel); font-size: 10px; padding: 11px 16px; border: 1px solid var(--accent); color: var(--accent); text-decoration: none; background: rgba(124,108,255,0.06); margin-bottom: 20px; transition: all 0.1s; cursor: pointer; }
.cv-download:hover { background: var(--accent); color: var(--bg); }

/* ══ ABOUT ══ */
.about-grid { display: grid; grid-template-columns: 1fr 220px; gap: 18px; align-items: start; }
.about-text { font-family: var(--vt); font-size: 26px; color: var(--text); line-height: 1.25; }
.about-text p { margin-bottom: 12px; }
.about-text a { color: var(--accent); text-decoration: none; }
.about-text a:hover { color: var(--accent3); }
.about-sidebar-box { background: var(--panel); border: 1px solid var(--border); padding: 13px; }
.sidebar-title { font-family: var(--pixel); font-size: 8px; color: var(--accent2); margin-bottom: 9px; }
.skill-list { list-style: none; }
.skill-list li { font-family: var(--vt); font-size: 24px; color: var(--text); padding: 3px 0; border-bottom: 1px dotted var(--border); display: flex; align-items: center; gap: 6px; }
.skill-list li::before { content: '›'; color: var(--accent3); font-family: var(--pixel); font-size: 13px; }
.skill-list li:last-child { border-bottom: none; }

.contact-row { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.contact-btn { font-family: var(--pixel); font-size: 10px; padding: 11px 14px; border: 1px solid var(--border2); background: var(--bg2); color: var(--textdim); text-decoration: none; text-transform: uppercase; letter-spacing: 0.5px; transition: all 0.1s; display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.contact-btn:hover { border-color: var(--accent); color: var(--accent); background: rgba(124,108,255,0.08); box-shadow: 0 0 0 1px var(--accent); }
.cb-icon { font-size: 18px; position: relative; top: -0.2em;}

/* ══ FOOTER ══ */
.site-footer { border-top: 1px solid var(--border); padding: 13px 0 0; margin-top: 28px; }
.footer-inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 10px; }
.footer-copy { font-family: var(--pixel); font-size: 8px; color: var(--textdim); }
.retro-btn { display: inline-block; width: 100px; height: 34px; background: var(--panel); border: 1px solid var(--border2); font-family: var(--pixel); font-size: 7px; color: var(--accent); text-align: center; line-height: 34px; text-transform: uppercase; letter-spacing: 0.5px; text-decoration: none; transition: all 0.1s; cursor: default; }
.retro-btn:hover { background: var(--accent); color: var(--bg); }

/* ══ MOBILE ══ */
.mobile-nav-toggle {
  display: none;
  position: fixed;
  bottom: 20px; right: 20px;
  width: 44px; height: 44px;
  background: var(--accent);
  border: none;
  font-family: var(--pixel);
  font-size: 16px;
  color: var(--bg);
  cursor: pointer;
  z-index: 450;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
/* Hover only on devices that can actually hover — on touch, taps make
   :hover stick until the next tap elsewhere, leaving the button pink */
@media (hover: hover) {
  .mobile-nav-toggle:hover { background: var(--accent2); }
}
/* Deliberate open-state styling: pink while the drawer is open */
body.nav-open .mobile-nav-toggle { background: var(--accent2); }

/* Backdrop — hidden on desktop, fades in on mobile when nav is open.
   Lives inside .feed (same stacking context as .sidebar) so z-indexes
   are compared with each other — sidebar (20) beats backdrop (10). */
#nav-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.65);
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

@media (max-width: 640px) {
  .feed { display: block; }
  .main-content { padding: 0 0 32px; }
  .about-grid { grid-template-columns: 1fr; }
  .site-name { font-size: 16px; }
  .mobile-nav-toggle { display: flex; }

  /* Slide-out nav drawer */
  .sidebar {
    position: fixed;
    top: 0; right: 0;
    width: min(300px, 88vw);
    height: 100vh;
    height: 100dvh;
    overflow-y: auto;
    border-left: 1px solid var(--border2);
    border-top: none;
    padding: 16px 12px 60px;
    display: flex;
    flex-direction: column;
    gap: 0;
    background: var(--bg2);
    box-shadow: -6px 0 28px rgba(0,0,0,0.55);
    transform: translateX(110%);
    transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    z-index: 20;
  }

  .sidebar.open {
    transform: translateX(0);
  }

  /* Backdrop only active on mobile */
  #nav-backdrop {
    display: block;
  }

  #nav-backdrop.visible {
    opacity: 1;
    pointer-events: all;
  }

  /* Prevent body scroll while drawer is open */
  body.nav-open { overflow: hidden; }

  /* Raise page-shell above the sticky ticker (z-index 200) when the nav drawer is open */
  body.nav-open .page-shell {
    z-index: 201;
  }

  /* Crosshair cursor makes no sense on touch — grey out and lock the toggle */
  .toggle-item:has(#t-cursor) {
    opacity: 0.35;
    pointer-events: none;
  }

  /* Game cards: a fixed 160px boxart starves the info column on phones.
     Scale the boxart with the viewport (same 160:220 proportions) and let
     the launch button wrap under the title instead of bursting the card */
  .game-boxart {
    width: clamp(84px, 30vw, 160px);
    height: auto;
    aspect-ratio: 160 / 220;
    align-self: flex-start;  /* don't flex-stretch — keep boxart proportions */
  }
  .game-top { gap: 14px; }
  .game-title-row { flex-wrap: wrap; }
  .game-launch { padding: 10px 12px; }
}

/* ══ TOOL MODAL ══ */
#tool-modal {
  position: fixed;
  inset: 0;
  z-index: 480;
  background: rgba(0,0,0,0);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

#tool-modal.tm-open {
  display: flex;
  animation: tm-bg-in 0.28s ease forwards;
}

#tool-modal.tm-closing {
  animation: tm-bg-out 0.32s ease forwards;
}

@keyframes tm-bg-in  { from { background: rgba(0,0,0,0); }    to { background: rgba(0,0,0,0.92); } }
@keyframes tm-bg-out { from { background: rgba(0,0,0,0.92); } to { background: rgba(0,0,0,0); }    }

#tool-crt {
  width:  85vw;
  height: 85vh;
  background: var(--bg);
  border: 2px solid var(--border2);
  box-shadow:
    0 0 0 5px #0c0c18,
    0 0 0 7px var(--border),
    0 0 80px rgba(124,108,255,0.28);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  transform-origin: center center;
}

@keyframes crt-on {
  0%   { transform: scaleY(0.01) scaleX(0.9); filter: brightness(8) blur(1px); }
  12%  { transform: scaleY(0.01) scaleX(1);   filter: brightness(10); }
  45%  { transform: scaleY(1.04);             filter: brightness(2.5); }
  60%  { transform: scaleY(0.97);             filter: brightness(1.2); }
  75%  { transform: scaleY(1.01);             filter: brightness(1.05); }
  100% { transform: scaleY(1)    scaleX(1);   filter: brightness(1); }
}

@keyframes crt-off {
  0%   { transform: scaleY(1)    scaleX(1);   filter: brightness(1); }
  20%  { transform: scaleY(1);               filter: brightness(2.5); }
  52%  { transform: scaleY(0.01) scaleX(1);  filter: brightness(10) blur(1px); }
  78%  { transform: scaleY(0.01) scaleX(0.7); filter: brightness(3); }
  100% { transform: scaleY(0)    scaleX(0.4); filter: brightness(0); }
}

.tm-open      #tool-crt { animation: crt-on     0.58s cubic-bezier(0.22,0.61,0.36,1) forwards; }
.tm-closing   #tool-crt { animation: crt-off    0.40s ease-in forwards; }
.tm-minimizing #tool-crt { animation: crt-shrink 0.22s ease-in forwards; }
.tm-restoring  #tool-crt { animation: crt-on     0.58s cubic-bezier(0.22,0.61,0.36,1) forwards; }

@keyframes crt-shrink {
  from { transform: scale(1);    opacity: 1; filter: brightness(1); }
  60%  { transform: scale(0.15); opacity: 0.6; filter: brightness(2); }
  to   { transform: scale(0);    opacity: 0; filter: brightness(0); }
}

.tool-crt-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 14px;
  background: var(--panel);
  border-bottom: 1px solid var(--border2);
  flex-shrink: 0;
  position: relative; z-index: 21;
}

.tool-crt-title {
  font-family: var(--pixel);
  font-size: 8px;
  color: var(--accent2);
  letter-spacing: 1px;
  text-transform: uppercase;
  flex: 1;
}

.tool-crt-btns { display: flex; gap: 6px; }

.tool-crt-btn {
  width: 26px; height: 26px;
  display: flex; align-items: center; justify-content: center;
  background: none;
  border: 1px solid var(--border2);
  color: var(--textdim);
  cursor: pointer;
  font-family: system-ui, -apple-system, sans-serif;
  font-weight: 900;
  font-size: 15px;
  line-height: 1;
  transition: background 0.1s, color 0.1s, border-color 0.1s;
  flex-shrink: 0;
}

.tool-crt-btn:hover { border-color: var(--textbright); color: var(--textbright); }

#tool-close:hover { background: #7a1515; border-color: #bb2222; color: #fff; }

/* Mini bar */
#tool-mini-bar {
  display: none;
  align-items: center;
  gap: 8px;
  padding: 15px 20px;
  background: var(--panel);
  border: 1px solid var(--border2);
  box-shadow: 0 0 20px rgba(124,108,255,0.2);
  cursor: pointer;
  transition: border-color 0.1s;
}

#tool-mini-bar:hover { border-color: var(--accent); }

#tool-mini-bar.anim-in  { animation: zen-exit-in  0.42s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; }
#tool-mini-bar.anim-out { animation: zen-exit-out 0.3s ease forwards; }

.tool-mini-label {
  font-family: var(--pixel);
  font-size: 14px;
  color: var(--accent2);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.tool-mini-up {
  color: #fff;
  font-family: system-ui, sans-serif;
  font-size: 26px;
  line-height: 0.5;
  transform: translateY(-0.1em);
}

.tool-crt-screen {
  flex: 1;
  position: relative;
  overflow: hidden;
  z-index: 5;
}

#tool-iframe {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  border: none;
  background: var(--bg);
}

::selection { background: var(--accent); color: var(--bg); }
::-webkit-scrollbar { width: 5px; background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border2); }
::-webkit-scrollbar-thumb:hover { background: var(--accent); }