*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --bg: #1A1A18;
  --bg-card: #222220;
  --text: #F0EDE6;
  --muted: #8A8880;
  --accent: #8B6FE8;
  --border: rgba(240, 237, 230, 0.1);
  --font-display: "Nunito", sans-serif;
  --font-mono: "IBM Plex Mono", "Courier New", monospace;
}
html.light {
  --bg: #F7F5F0;
  --bg-card: #EDEAE2;
  --text: #1A1A18;
  --muted: #6B6A65;
  --accent: #5D3FD3;
  --border: rgba(26, 26, 24, 0.12);
}
/* theme toggle */
/* moon/sun toggle button */
/* toggle switch */
.moon-btn {
  background: none; border: none; cursor: pointer; padding: 0;
  display: flex; align-items: center; gap: 10px;
  transition: transform 0.15s;
}
.moon-btn:active { transform: scale(0.96); }

/* the pill track — wider to hold both icons */
.toggle-track {
  position: relative; width: 66px; height: 30px;
  background: var(--bg-card); border: 1.5px solid var(--border);
  border-radius: 15px;
  transition: border-color 0.35s, box-shadow 0.35s;
  overflow: hidden;
}
.moon-btn:hover .toggle-track { border-color: var(--accent); box-shadow: 0 0 8px 0 var(--accent); }

/* static moon on left, sun on right — always visible */
.track-moon {
  position: absolute; top: 50%; left: 8px;
  transform: translateY(-50%) rotate(40deg);
  width: 11px; height: 11px; border-radius: 50%;
  box-shadow: 3px -2px 0 1.5px var(--accent);
  background: transparent;
  opacity: 0.4; transition: opacity 0.35s;
}
.track-sun {
  position: absolute; top: 50%; right: 8px;
  transform: translateY(-50%);
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent);
  box-shadow:
    0 0 0 1.5px var(--bg-card), 0 0 0 2.5px var(--accent),
    0 -5px 0 -1.5px var(--accent),
    0  5px 0 -1.5px var(--accent),
    -5px 0 0 -1.5px var(--accent),
     5px 0 0 -1.5px var(--accent),
    -3.5px -3.5px 0 -1.5px var(--accent),
     3.5px -3.5px 0 -1.5px var(--accent),
    -3.5px  3.5px 0 -1.5px var(--accent),
     3.5px  3.5px 0 -1.5px var(--accent);
  opacity: 0.35; transition: opacity 0.35s;
}
/* active side is bright */
.moon-btn:not(.is-light) .track-moon { opacity: 1; }
.moon-btn.is-light .track-sun { opacity: 1; }

/* the sliding knob — plain, rides over the icons */
.toggle-knob {
  position: absolute; top: 4px; left: 4px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--accent);
  transition: left 0.4s cubic-bezier(0.34,1.56,0.64,1);
  box-shadow: 0 0 6px var(--accent);
  animation: knob-pulse 3s ease-in-out infinite;
  z-index: 2;
}
.moon-btn.is-light .toggle-knob { left: 40px; }
@keyframes knob-pulse {
  0%, 100% { box-shadow: 0 0 4px var(--accent); }
  50%       { box-shadow: 0 0 10px 2px var(--accent); }
}

/* blackout overlay */
.blackout-overlay { display: none; position: fixed; inset: 0; background: #000; z-index: 9999; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; }
html.blackout .blackout-overlay { display: flex; }
html.blackout body > .container { visibility: hidden; }
.blackout-text { font-family: "IBM Plex Mono", monospace; font-size: 13px; color: #fff; letter-spacing: 0.08em; max-width: 320px; text-align: center; line-height: 1.8; min-height: 3.6em; }
.blackout-text .caret { display: inline-block; width: 8px; height: 13px; background: #fff; vertical-align: text-bottom; animation: caret-blink 0.7s step-end infinite; margin-left: 2px; }
@keyframes caret-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
/* candle on blackout screen */
.candle-wrap { display: flex; flex-direction: column; align-items: center; position: relative; }
.candle-wrap::before { content: ""; position: absolute; width: 90px; height: 90px; background: radial-gradient(circle, rgba(255,150,30,0.15) 0%, transparent 70%); top: -22px; left: 50%; transform: translateX(-50%); border-radius: 50%; animation: ambient-pulse 2.2s ease-in-out infinite; pointer-events: none; }
@keyframes ambient-pulse { 0%, 100% { opacity: 0.7; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.35); } }

.candle-flame { position: relative; width: 14px; height: 26px; margin: 0 auto 0; animation: flame-sway 3.5s ease-in-out infinite; transform-origin: bottom center; transition: transform 2s cubic-bezier(0.4, 0, 0.2, 1); }
@keyframes flame-sway { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }

/* hover: flame surges */
.torch-btn:hover .candle-flame { transform: scaleX(1.2) scaleY(1.35) !important; }
.torch-btn:hover .flame-inner { background: linear-gradient(to top, rgba(255,180,0,1) 0%, rgba(255,240,80,1) 55%, rgba(255,255,200,0.95) 100%); filter: blur(0.2px); }
.torch-btn:hover .flame-outer { transform: translateX(-50%) scaleX(1.15) scaleY(1.2); filter: blur(3px); opacity: 1; background: linear-gradient(to top, rgba(220,60,0,0.75) 0%, rgba(255,120,0,0.55) 45%, rgba(255,200,60,0.2) 100%); }
.torch-btn:hover .flame-core { transform: translateX(-50%) scaleY(1.3); background: rgba(255,255,245,1); }
.torch-btn:hover .flame-glow { width: 52px; height: 52px; background: radial-gradient(circle, rgba(255,160,30,0.65) 0%, transparent 70%); }
.torch-btn:hover .candle-wrap::before { transform: translateX(-50%) scale(1.7); opacity: 1; background: radial-gradient(circle, rgba(255,140,20,0.28) 0%, transparent 70%); }
.torch-btn:hover .candle-wick::after { box-shadow: 0 0 8px 3px rgba(255,160,30,1); }

.flame-inner { transition: all 0.9s cubic-bezier(0.4, 0, 0.2, 1); }
.flame-outer { transition: all 1.1s cubic-bezier(0.4, 0, 0.2, 1); }
.flame-core { transition: all 0.7s cubic-bezier(0.4, 0, 0.2, 1); }
.flame-glow { transition: all 1.2s cubic-bezier(0.4, 0, 0.2, 1); }
.candle-wick::after { transition: box-shadow 0.8s cubic-bezier(0.4, 0, 0.2, 1); }
.candle-wrap::before { transition: transform 1.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 1.1s ease; }

.flame-glow { position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); width: 32px; height: 32px; background: radial-gradient(circle, rgba(255,140,20,0.45) 0%, transparent 70%); border-radius: 50%; animation: glow-pulse 1.2s ease-in-out infinite; z-index: 0; }
.flame-outer { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 14px; height: 26px; background: linear-gradient(to top, rgba(200,50,0,0.55) 0%, rgba(255,90,0,0.35) 45%, rgba(255,180,40,0.1) 100%); border-radius: 50% 50% 28% 28% / 60% 60% 40% 40%; animation: flicker-outer 1.4s ease-in-out infinite 0.1s; transform-origin: bottom center; filter: blur(2.5px); z-index: 1; }
.flame-inner { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 8px; height: 19px; background: linear-gradient(to top, rgba(255,130,0,0.95) 0%, rgba(255,215,50,0.95) 55%, rgba(255,255,160,0.85) 100%); border-radius: 50% 50% 25% 25% / 60% 60% 40% 40%; animation: flicker 1.1s ease-in-out infinite; transform-origin: bottom center; filter: blur(0.4px); z-index: 2; }
.flame-core { position: absolute; bottom: 3px; left: 50%; transform: translateX(-50%); width: 3px; height: 8px; background: rgba(255,255,230,0.98); border-radius: 50% 50% 30% 30% / 70% 70% 30% 30%; animation: core-flicker 0.85s ease-in-out infinite; transform-origin: bottom center; z-index: 3; }

@keyframes flicker { 0%, 100% { transform: translateX(-50%) scaleX(1) scaleY(1) rotate(-1deg); } 30% { transform: translateX(-50%) scaleX(0.85) scaleY(1.07) rotate(2deg); } 65% { transform: translateX(-50%) scaleX(1.08) scaleY(0.93) rotate(-2deg); } }
@keyframes flicker-outer { 0%, 100% { transform: translateX(-50%) scaleX(1) scaleY(1) rotate(1deg); } 45% { transform: translateX(-50%) scaleX(0.88) scaleY(1.1) rotate(-3deg); } }
@keyframes glow-pulse { 0%, 100% { opacity: 0.75; transform: translateX(-50%) scale(1); } 50% { opacity: 1; transform: translateX(-50%) scale(1.2); } }
@keyframes core-flicker { 0%, 100% { transform: translateX(-50%) scaleY(1); opacity: 0.9; } 50% { transform: translateX(-50%) scaleY(1.15); opacity: 1; } }

/* smoke wisps */
.candle-smoke { position: absolute; top: -4px; left: 50%; }
.smoke-wisp { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: rgba(210,210,210,0.35); filter: blur(2px); animation: smoke-rise 3s ease-out infinite; }
.smoke-wisp:nth-child(1) { left: -1px; animation-delay: 0s; }
.smoke-wisp:nth-child(2) { left: 2px; width: 3px; height: 3px; animation-delay: 1s; }
.smoke-wisp:nth-child(3) { left: -3px; width: 5px; height: 5px; animation-delay: 2s; }
@keyframes smoke-rise { 0% { transform: translateY(0) translateX(0) scale(0.4); opacity: 0; } 15% { opacity: 0.45; } 60% { transform: translateY(-22px) translateX(5px) scale(1.6); opacity: 0.2; } 100% { transform: translateY(-44px) translateX(-5px) scale(2.5); opacity: 0; } }

.candle-body { width: 16px; height: 42px; background: linear-gradient(90deg, #ccc 0%, #f8f8f8 45%, #bbb 100%); border-radius: 2px 2px 3px 3px; position: relative; overflow: visible; }
.candle-wax { position: absolute; top: -3px; left: 50%; transform: translateX(-50%); width: 16px; height: 6px; background: rgba(255,210,110,0.55); border-radius: 50%; }
.candle-wick { position: absolute; top: -9px; left: 50%; transform: translateX(-50%) rotate(3deg); width: 1.5px; height: 9px; background: linear-gradient(to top, #222, #555); border-radius: 1px; }
.candle-wick::after { content: ""; position: absolute; top: -2px; left: 50%; transform: translateX(-50%); width: 3px; height: 3px; border-radius: 50%; background: rgba(255,80,0,0.95); box-shadow: 0 0 4px 1px rgba(255,140,20,0.8); animation: ember-pulse 0.9s ease-in-out infinite; }
@keyframes ember-pulse { 0%, 100% { opacity: 0.85; box-shadow: 0 0 3px 1px rgba(255,140,20,0.7); } 50% { opacity: 1; box-shadow: 0 0 6px 2px rgba(255,160,30,1); } }
.candle-drip { position: absolute; top: 2px; left: 2px; width: 4px; background: rgba(245,235,200,0.9); border-radius: 0 0 3px 3px; height: 0; animation: drip-grow 7s ease-in-out infinite 1s; }
.candle-drip::after { content: ""; position: absolute; bottom: -5px; left: 50%; transform: translateX(-50%); width: 4px; height: 0; background: rgba(245,235,200,0.9); border-radius: 0 0 50% 50%; animation: drip-tip 7s ease-in-out infinite 1s; }
@keyframes drip-grow { 0%, 20% { height: 0; } 65%, 85% { height: 14px; } 95%, 100% { height: 0; } }
@keyframes drip-tip { 0%, 20% { height: 0; opacity: 0; } 65%, 85% { height: 7px; opacity: 1; } 95%, 100% { height: 0; opacity: 0; } }
.candle-base { width: 20px; height: 6px; background: linear-gradient(90deg, #888 0%, #bbb 50%, #888 100%); border-radius: 2px; margin: 0 auto; }
/* flashlight button */
.torch-btn { display: none; flex-direction: column; align-items: center; gap: 8px; background: none; border: none; cursor: none; opacity: 0; transition: opacity 0.6s; }
.torch-btn.visible { display: flex; opacity: 1; }
.torch-btn:hover .torch-svg { filter: drop-shadow(0 0 6px #fff); }
.torch-beam { width: 0; height: 0; border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 18px solid rgba(255,255,180,0.55); border-radius: 0 0 6px 6px; margin: 0 auto; animation: beam-flicker 1.4s ease-in-out infinite; }
.torch-body-wrap { position: relative; display: flex; flex-direction: column; align-items: center; }
.torch-head { width: 22px; height: 8px; background: #ccc; border-radius: 3px 3px 1px 1px; }
.torch-neck { width: 13px; height: 5px; background: #aaa; margin: 0 auto; }
.torch-body { width: 16px; height: 30px; background: linear-gradient(135deg, #bbb 0%, #888 60%, #666 100%); border-radius: 3px 3px 5px 5px; }
.torch-butt { width: 18px; height: 5px; background: #777; border-radius: 2px; margin: 0 auto; }
.torch-lens { position: absolute; top: 0; left: 50%; transform: translateX(-50%); width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,200,0.9) 0%, rgba(255,220,100,0.4) 60%, transparent 100%); animation: lens-glow 1.4s ease-in-out infinite; }
@keyframes beam-flicker { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.85; border-bottom-color: rgba(255,255,200,0.75); } }
@keyframes lens-glow { 0%, 100% { opacity: 0.7; } 50% { opacity: 1; } }
.torch-label { font-family: "IBM Plex Mono", monospace; font-size: 11px; letter-spacing: 0.1em; color: #fff; opacity: 0.8; }
html { scroll-behavior: smooth; }
body { background: var(--bg); color: var(--text); font-family: var(--font-mono); font-size: 14px; line-height: 1.7; min-height: 100vh; }
.container { max-width: 860px; margin: 0 auto; padding: 0 3rem; }
@media (max-width: 560px) { .container { padding: 0 1.25rem; } }
@media (min-width: 561px) and (max-width: 900px) { .container { padding: 0 2rem; } }

nav {
  position: sticky; top: 0; z-index: 100;
  padding: 0; margin-bottom: 0;
  background: rgba(26, 26, 24, 0.75);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  opacity: 0; animation: fadein 0.6s ease 0.1s forwards;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1), background 0.3s;
}
html.light nav { background: rgba(247, 245, 240, 0.8); }
nav.nav-hidden { transform: translateY(-100%); }
.nav-inner {
  max-width: 860px; margin: 0 auto; padding: 0.75rem 3rem;
  display: flex; align-items: center;
}
@media (min-width: 561px) and (max-width: 900px) { .nav-inner { padding: 0.75rem 2rem; } }
@media (max-width: 560px) { .nav-inner { padding: 0.75rem 1.25rem; } }
.nav-logo {
  font-size: 13px; font-weight: 600; letter-spacing: 0.08em;
  color: var(--text); text-decoration: none;
  position: relative; padding-bottom: 2px;
  transition: color 0.2s; white-space: nowrap; margin-right: auto;
}
.nav-logo::after {
  content: ""; position: absolute; bottom: 0; left: 0;
  width: 0; height: 1.5px; background: var(--accent);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-logo:hover::after { width: 100%; }
.nav-logo:hover { color: var(--accent); }

.nav-links {
  display: flex; gap: 0.25rem; list-style: none;
  background: var(--bg-card); border-radius: 20px;
  padding: 3px 4px; border: 1px solid var(--border);
  margin: 0 1.5rem;
}
.nav-links a {
  font-size: 11px; letter-spacing: 0.04em; color: var(--muted);
  text-decoration: none; padding: 5px 12px; border-radius: 16px;
  transition: color 0.25s, background 0.25s;
  white-space: nowrap;
}
.nav-links a:hover { color: var(--text); background: rgba(139, 111, 232, 0.08); }
.nav-links a.active { color: var(--bg); background: var(--accent); font-weight: 500; }

.nav-toggle-wrap { flex-shrink: 0; }

/* hamburger */
.nav-hamburger {
  display: none; background: none; border: none;
  width: 28px; height: 20px; position: relative;
  flex-direction: column; justify-content: space-between;
  padding: 0; cursor: none; margin-left: 1rem;
}
.nav-hamburger span {
  display: block; width: 100%; height: 2px;
  background: var(--text); border-radius: 2px;
  transition: transform 0.3s, opacity 0.3s;
}
.nav-hamburger.open span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

/* mobile overlay menu */
.mobile-menu {
  display: none; position: fixed; inset: 0; z-index: 99;
  background: rgba(26, 26, 24, 0.95);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  flex-direction: column; align-items: center; justify-content: center;
  gap: 2rem; opacity: 0; transition: opacity 0.3s;
}
html.light .mobile-menu { background: rgba(247, 245, 240, 0.95); }
.mobile-menu.open { display: flex; opacity: 1; }
.mobile-menu a {
  font-family: var(--font-display); font-size: 1.5rem; font-weight: 600;
  color: var(--muted); text-decoration: none;
  transition: color 0.2s, transform 0.2s;
}
.mobile-menu a:hover { color: var(--accent); transform: scale(1.05); }
.mobile-menu a.active { color: var(--accent); }

.hero { padding: 5rem 0 5rem; opacity: 0; animation: fadein 0.8s ease 0.25s forwards; }
.hero-eyebrow { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); font-weight: 400; margin-bottom: 1.25rem; }
.hero-name { font-family: var(--font-display); font-size: clamp(3.4rem, 10vw, 6.2rem); font-weight: 600; line-height: 1.08; letter-spacing: -0.01em; margin-bottom: 1.75rem; }
.hero-name .cursor { display: inline-block; width: 4px; height: 0.85em; background: var(--accent); margin-left: 6px; vertical-align: middle; animation: blink 1.1s step-end infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }
.hero-desc { font-size: 14px; color: var(--muted); max-width: 560px; line-height: 1.85; font-weight: 300; }
.hero-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 2rem; }
.tag { font-size: 11px; letter-spacing: 0.06em; color: var(--muted); border: 1px solid var(--border); padding: 4px 10px; transition: border-color 0.2s, color 0.2s; position: relative; }
.tag:hover { border-color: var(--accent); color: var(--accent); }
.tag[data-def]::after {
  content: attr(data-def);
  position: absolute; top: calc(100% + 7px); left: 50%;
  transform: translateX(-50%) translateY(-6px);
  background: var(--bg-card); color: var(--text);
  font-size: 10px; padding: 5px 9px; border-radius: 5px;
  border: 1px solid var(--border); white-space: nowrap;
  opacity: 0; pointer-events: none; z-index: 200;
  transition: opacity 0.22s, transform 0.28s cubic-bezier(0.22,1,0.36,1);
  box-shadow: 0 4px 14px rgba(0,0,0,0.25);
}
.tag[data-def]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }

/* on touch/mobile: suppress the floating tooltip and use the inline panel instead */
@media (hover: none) {
  .tag[data-def]::after { display: none !important; }
}
.tag.tag-active { border-color: var(--accent); color: var(--accent); }

/* inline definition panel shown below hero-tags on touch devices */
.tag-def-panel {
  display: none;
  overflow: hidden;
  max-height: 0;
  opacity: 0;
  font-size: 11px;
  color: var(--muted);
  border-left: 2px solid var(--accent);
  padding: 0 0 0 0.75rem;
  margin-top: 0;
  transition:
    max-height 0.4s cubic-bezier(0.22,1,0.36,1),
    opacity 0.3s ease,
    margin-top 0.3s ease,
    padding 0.3s ease;
}
.tag-def-panel.open {
  max-height: 80px;
  opacity: 1;
  margin-top: 0.75rem;
  padding: 0.4rem 0.5rem 0.4rem 0.75rem;
}
@media (hover: none) {
  .tag-def-panel { display: block; }
}

.deco-row { display: flex; align-items: center; gap: 2rem; margin-top: 2.5rem; flex-wrap: wrap; }
.deco-item { display: flex; align-items: center; gap: 10px; }
.deco-label { font-size: 11px; color: var(--muted); font-weight: 300; letter-spacing: 0.06em; }

/* coffee */
.coffee { position: relative; width: 28px; height: 26px; }
.coffee-cup { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 22px; height: 16px; background: transparent; border: 2px solid var(--accent); border-top: none; border-radius: 0 0 8px 8px; }
.coffee-cup::before { content: ""; position: absolute; top: 2px; right: -7px; width: 6px; height: 8px; border: 2px solid var(--accent); border-left: none; border-radius: 0 4px 4px 0; }
.coffee-cup::after { content: ""; position: absolute; bottom: -5px; left: -4px; right: -4px; height: 3px; background: var(--accent); border-radius: 2px; opacity: 0.4; }
.steam { position: absolute; bottom: 18px; display: flex; gap: 4px; left: 50%; transform: translateX(-50%); }
.steam span { display: block; width: 2px; height: 8px; background: var(--accent); border-radius: 2px; opacity: 0; animation: steam 2s ease-in-out infinite; }
.steam span:nth-child(1) { animation-delay: 0s; }
.steam span:nth-child(2) { animation-delay: 0.4s; height: 10px; }
.steam span:nth-child(3) { animation-delay: 0.8s; }
@keyframes steam { 0% { opacity: 0; transform: translateY(0) scaleX(1); } 30% { opacity: 0.7; } 100% { opacity: 0; transform: translateY(-12px) scaleX(1.5); } }

/* duck - cuter minimal */
.duck { position: relative; width: 20px; height: 18px; cursor: pointer; }
.duck.float { animation: duck-float 0.6s ease-out forwards; }
@keyframes duck-float { 0% { transform: translateY(0); } 40% { transform: translateY(-14px); } 100% { transform: translateY(0); } }
.duck-body { position: absolute; bottom: 0; left: 0; width: 20px; height: 11px; background: var(--accent); border-radius: 50% 50% 50% 50% / 55% 55% 45% 45%; opacity: 0.9; }
.duck-head { position: absolute; top: 0; right: 3px; width: 9px; height: 9px; background: var(--accent); border-radius: 50%; }
.duck-eye { position: absolute; top: 2px; right: 5px; width: 2px; height: 2px; background: var(--bg); border-radius: 50%; opacity: 0.9; }
.duck-bill { position: absolute; top: 3px; right: -1px; width: 4px; height: 2px; background: var(--accent); border-radius: 0 2px 2px 0; opacity: 0.65; animation: quack 2s ease-in-out infinite; }
.duck-wing { position: absolute; bottom: 3px; left: 5px; width: 7px; height: 5px; border: 1.5px solid rgba(240,237,230,0.25); border-radius: 50%; border-top-color: transparent; border-left-color: transparent; }
@keyframes quack { 0%, 100% { height: 2px; } 45%, 55% { height: 1px; transform: scaleY(0.3); } }

/* wifi */
.wifi { display: flex; align-items: flex-end; gap: 3px; height: 18px; }
.wifi span { display: block; width: 4px; background: var(--accent); border-radius: 1px; opacity: 0.25; animation: signal 1.4s ease-in-out infinite; }
.wifi span:nth-child(1) { height: 6px; animation-delay: 0s; }
.wifi span:nth-child(2) { height: 10px; animation-delay: 0.2s; }
.wifi span:nth-child(3) { height: 14px; animation-delay: 0.4s; }
.wifi span:nth-child(4) { height: 18px; animation-delay: 0.6s; }
@keyframes signal { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } }

/* deploy pipeline */
.deploy { display: flex; align-items: center; gap: 0; }
.deploy-node { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: 0.18; }
.deploy-pipe { width: 12px; height: 1.5px; background: var(--accent); opacity: 0.12; position: relative; overflow: hidden; }
.deploy-pipe::after { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: var(--accent); animation: pipe-travel 2.4s ease-in-out infinite; }
.deploy-node:nth-child(1) { animation: node-light 2.4s ease-in-out infinite 0s; }
.deploy-pipe:nth-child(2)::after { animation-delay: 0.3s; }
.deploy-node:nth-child(3) { animation: node-light 2.4s ease-in-out infinite 0.7s; }
.deploy-pipe:nth-child(4)::after { animation-delay: 1s; }
.deploy-node:nth-child(5) { animation: node-light 2.4s ease-in-out infinite 1.4s; }
@keyframes node-light { 0%, 85%, 100% { opacity: 0.18; box-shadow: none; } 30%, 55% { opacity: 1; box-shadow: 0 0 6px 1px var(--accent); } }
@keyframes pipe-travel { 0%, 15% { left: -100%; opacity: 0; } 20% { opacity: 1; } 60%, 100% { left: 100%; opacity: 0; } }

section { padding: 5rem 0; border-top: 1px solid var(--border); }
section.animate { opacity: 0; }
section.visible { animation: fadein 0.7s ease forwards; }
.section-header { display: flex; align-items: center; gap: 12px; margin-bottom: 2rem; }
.section-label { font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); font-weight: 400; }
/* stack: layered cards sliding up */
.layers { display: flex; flex-direction: column; gap: 2px; }
.layer { height: 3px; background: var(--accent); border-radius: 1px; animation: layer-slide 2s ease-in-out infinite; }
.layer:nth-child(1) { width: 20px; animation-delay: 0s;    opacity: 1; }
.layer:nth-child(2) { width: 16px; animation-delay: 0.15s; opacity: 0.7; }
.layer:nth-child(3) { width: 12px; animation-delay: 0.3s;  opacity: 0.45; }
.layer:nth-child(4) { width: 8px;  animation-delay: 0.45s; opacity: 0.25; }
@keyframes layer-slide { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(3px); } }
/* experience: ticking clock */
.exp-clock { position: relative; width: 14px; height: 14px; }
.exp-clock-face { position: absolute; inset: 0; border: 1.5px solid var(--accent); border-radius: 50%; opacity: 0.8; }
.exp-hand-h { position: absolute; bottom: 50%; left: 50%; width: 1.5px; height: 3.5px; background: var(--accent); border-radius: 1px; transform-origin: bottom center; transform: translateX(-50%) rotate(0deg); animation: hand-h 12s linear infinite; }
.exp-hand-m { position: absolute; bottom: 50%; left: 50%; width: 1px; height: 4.5px; background: var(--accent); border-radius: 1px; opacity: 0.7; transform-origin: bottom center; transform: translateX(-50%) rotate(0deg); animation: hand-m 2s linear infinite; }
@keyframes hand-h { from { transform: translateX(-50%) rotate(0deg); } to { transform: translateX(-50%) rotate(360deg); } }
@keyframes hand-m { from { transform: translateX(-50%) rotate(0deg); } to { transform: translateX(-50%) rotate(360deg); } }
/* contact: paper plane flies across */
/* paper plane */
.paper-plane { display: inline-block; width: 60px; height: 36px; position: relative; }
.paper-plane svg { overflow: visible; position: absolute; top: 0; left: 0; }
.plane-css {
  position: absolute; top: 0; left: 0; width: 14px; height: 8px;
  offset-path: path("M-8,28 C4,28 8,4 20,4 C32,4 28,28 40,20 C46,16 52,8 68,8");
  offset-rotate: auto;
  animation: fly-smooth 4s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}
@keyframes fly-smooth {
  0%   { offset-distance: 0%;   opacity: 0; }
  6%   { offset-distance: 4%;   opacity: 1; }
  78%  { offset-distance: 100%; opacity: 1; }
  88%  { offset-distance: 100%; opacity: 0; }
  100% { offset-distance: 0%;   opacity: 0; }
}

.about-text { font-size: 15px; color: var(--text); line-height: 1.9; font-weight: 300; max-width: 640px; }
.about-text strong { font-weight: 600; }

.exp-list { display: flex; flex-direction: column; }
.exp-row { display: grid; grid-template-columns: 140px 1fr; gap: 2rem; padding: 1.75rem 0; border-bottom: 1px solid var(--border); }
.exp-row:first-child { border-top: 1px solid var(--border); }
.exp-date { font-size: 11px; color: var(--muted); font-weight: 300; padding-top: 3px; letter-spacing: 0.03em; line-height: 1.6; }
.exp-role { font-size: 16px; font-weight: 600; margin-bottom: 2px; }
.exp-company-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.exp-company { font-size: 12px; color: var(--accent); font-weight: 400; }
.exp-desc { font-size: 12px; color: var(--muted); font-weight: 300; line-height: 1.7; }

/* EV car charging (Schneider) — redesigned */
.ev { position: relative; width: 44px; height: 26px; }
.ev-body { position: absolute; bottom: 4px; left: 0; width: 26px; height: 10px; border: 1.5px solid var(--accent); border-radius: 2px; overflow: hidden; }
.ev-fill { position: absolute; bottom: 0; left: 0; height: 100%; width: 0; background: var(--accent); opacity: 0.55; animation: ev-fill-up 3.5s ease-in-out infinite; }
.ev-cabin { position: absolute; bottom: 14px; left: 5px; width: 15px; height: 7px; border: 1.5px solid var(--accent); border-radius: 4px 6px 0 0; overflow: hidden; }
.ev-cabin-fill { position: absolute; bottom: 0; left: 0; height: 100%; width: 0; background: var(--accent); opacity: 0.35; animation: ev-fill-up 3.5s ease-in-out infinite 0.3s; }
.ev-cabin::after { content: ""; position: absolute; top: 2px; left: 3px; right: 3px; height: 3px; background: var(--accent); border-radius: 2px; opacity: 0.2; z-index: 1; }
.ev-wheel { position: absolute; bottom: 1px; width: 6px; height: 6px; background: var(--bg); border: 1.5px solid var(--accent); border-radius: 50%; }
.ev-wheel-l { left: 3px; }
.ev-wheel-r { left: 18px; }
.ev-charger { position: absolute; right: 0; bottom: 4px; width: 8px; height: 18px; border: 1.5px solid var(--accent); border-radius: 2px; opacity: 0.7; }
.ev-charger-light { position: absolute; top: -4px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; background: var(--accent); border-radius: 50%; opacity: 0; animation: charger-ready 3.5s ease-in-out infinite; }
.ev-cable { position: absolute; right: 12px; bottom: 14px; width: 10px; height: 1.5px; background: var(--accent); opacity: 0.5; }
.ev-cable::after { content: ""; position: absolute; right: -2px; top: -2px; width: 0; height: 0; border-top: 3px solid transparent; border-bottom: 3px solid transparent; border-left: 4px solid var(--accent); opacity: 0.5; }
.ev-bolt { position: absolute; right: 1px; bottom: 8px; font-size: 8px; font-style: normal; color: var(--accent); opacity: 0; animation: bolt-flash 3.5s ease-in-out infinite; }
@keyframes ev-fill-up {
  0%       { width: 0; opacity: 0.55; }
  65%      { width: 100%; opacity: 0.7; }
  80%      { width: 100%; opacity: 0.4; }
  95%, 100% { width: 0; opacity: 0.1; }
}
@keyframes charger-ready {
  0%, 5%   { opacity: 0; }
  15%, 80% { opacity: 1; }
  90%, 100%{ opacity: 0; }
}
@keyframes bolt-flash {
  0%, 8%   { opacity: 0; }
  15%      { opacity: 1; transform: scale(1.1); }
  20%      { opacity: 0; }
  30%      { opacity: 1; transform: scale(1); }
  35%      { opacity: 0; }
  45%      { opacity: 1; }
  50%      { opacity: 0; }
  70%, 100%{ opacity: 0; }
}

/* Solar panel (EnergySage) */
.solar { position: relative; width: 24px; height: 22px; }
.solar-grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 1.5px; width: 100%; height: 16px; }
.solar-cell { background: var(--accent); border-radius: 1px; opacity: 0.25; animation: solar-shine 3s ease-in-out infinite; }
.solar-cell:nth-child(1) { animation-delay: 0s; }
.solar-cell:nth-child(2) { animation-delay: 0.15s; }
.solar-cell:nth-child(3) { animation-delay: 0.3s; }
.solar-cell:nth-child(4) { animation-delay: 0.45s; }
.solar-cell:nth-child(5) { animation-delay: 0.6s; }
.solar-cell:nth-child(6) { animation-delay: 0.75s; }
.solar-legs { position: absolute; bottom: 1px; left: 6px; right: 6px; height: 4px; border-left: 1.5px solid var(--accent); border-right: 1.5px solid var(--accent); opacity: 0.5; }
.solar-base { position: absolute; bottom: 0; left: 2px; right: 2px; height: 1.5px; background: var(--accent); border-radius: 1px; opacity: 0.5; }
@keyframes solar-shine { 0%, 100% { opacity: 0.15; } 40%, 60% { opacity: 1; } }

/* Wings: chat bubbles */
.chat { position: relative; width: 22px; height: 16px; }
.bubble { position: absolute; border: 1.5px solid var(--accent); border-radius: 6px; }
.bubble-1 { width: 14px; height: 10px; top: 0; left: 0; animation: bubble-pop 2s ease-in-out infinite; }
.bubble-2 { width: 10px; height: 8px; bottom: 0; right: 0; animation: bubble-pop 2s ease-in-out infinite 0.5s; }
.bubble-dot { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; gap: 2px; }
.bubble-dot span { width: 2px; height: 2px; background: var(--accent); border-radius: 50%; animation: dot-fade 2s ease-in-out infinite; }
.bubble-dot span:nth-child(2) { animation-delay: 0.3s; }
.bubble-dot span:nth-child(3) { animation-delay: 0.6s; }
@keyframes bubble-pop { 0%, 100% { transform: scale(1); opacity: 0.5; } 50% { transform: scale(1.05); opacity: 1; } }
@keyframes dot-fade { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

/* esome: ad banner + cursor click */
.ad-click { position: relative; width: 34px; height: 22px; }
.ad-banner { position: absolute; top: 0; left: 0; width: 24px; height: 14px; border: 1.5px solid var(--accent); border-radius: 2px; overflow: hidden; opacity: 0; animation: ad-appear 3s ease-in-out infinite; }
.ad-inner { width: 100%; height: 4px; background: var(--accent); opacity: 0.5; margin-top: 3px; border-radius: 1px; }
.ad-inner2 { width: 60%; height: 2px; background: var(--accent); opacity: 0.3; margin-top: 2px; margin-left: 2px; border-radius: 1px; }
.ad-cursor { position: absolute; bottom: 0; right: 0; width: 10px; height: 14px; background: var(--accent); clip-path: polygon(0 0, 0 100%, 38% 72%, 54% 100%, 70% 93%, 54% 65%, 100% 65%); opacity: 0; animation: cursor-move 3s ease-in-out infinite; }
.ad-ripple { position: absolute; bottom: 3px; right: 4px; width: 8px; height: 8px; border: 1.5px solid var(--accent); border-radius: 50%; opacity: 0; animation: ad-ripple 3s ease-in-out infinite; }
@keyframes ad-appear { 0%, 8% { opacity: 0; transform: translateY(-3px); } 20%, 72% { opacity: 1; transform: translateY(0); } 88%, 100% { opacity: 0; } }
@keyframes cursor-move { 0%, 20% { opacity: 0; transform: translate(4px, 4px); } 50% { opacity: 1; transform: translate(0, 0); } 70%, 100% { opacity: 0; transform: translate(0,0); } }
@keyframes ad-ripple { 0%, 55% { opacity: 0; transform: scale(0.3); } 65% { opacity: 1; transform: scale(1); } 85%, 100% { opacity: 0; transform: scale(1.8); } }

/* Stackabuse: pencil writing */
.pencil-wrap { position: relative; width: 28px; height: 22px; }
.pencil { position: absolute; top: 3px; right: 2px; width: 5px; height: 13px; background: var(--accent); border-radius: 2px 2px 0 0; transform: rotate(30deg); transform-origin: bottom center; animation: pencil-write 2.4s ease-in-out infinite; }
.pencil::after { content: ""; position: absolute; bottom: -4px; left: 50%; transform: translateX(-50%); width: 0; height: 0; border-left: 2.5px solid transparent; border-right: 2.5px solid transparent; border-top: 5px solid var(--accent); }
.pencil-line { position: absolute; bottom: 1px; left: 0; height: 1.5px; background: var(--accent); border-radius: 1px; width: 0; animation: line-grow 2.4s ease-in-out infinite; }
.pencil-line2 { position: absolute; bottom: 6px; left: 0; height: 1.5px; background: var(--accent); border-radius: 1px; opacity: 0.45; width: 0; animation: line-grow 2.4s ease-in-out infinite 0.5s; }
@keyframes pencil-write {
  0%   { transform: rotate(30deg) translate(0px, 0); }
  25%  { transform: rotate(30deg) translate(-4px, 0); }
  50%  { transform: rotate(30deg) translate(-8px, 0); }
  75%  { transform: rotate(30deg) translate(-4px, 0); }
  100% { transform: rotate(30deg) translate(0px, 0); }
}
@keyframes line-grow { 0% { width: 0; opacity: 1; } 70% { width: 16px; opacity: 1; } 88%, 100% { width: 0; opacity: 0; } }

.projects-list { display: flex; flex-direction: column; }
.project-row { display: grid; grid-template-columns: 1fr; gap: 1.5rem; padding: 1.75rem 0; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; align-items: start; }
.project-row:first-child { border-top: 1px solid var(--border); }
.project-title-row { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.project-name { font-family: var(--font-display); font-size: 1.25rem; font-weight: 600; transition: color 0.2s; }
.project-row:hover .project-name { color: var(--accent); }
.project-desc { font-size: 12px; color: var(--muted); font-weight: 300; line-height: 1.65; margin-bottom: 8px; }
.project-tech { display: flex; flex-wrap: wrap; gap: 6px; }
.tech-pill { font-size: 10px; letter-spacing: 0.05em; color: var(--muted); border: 1px solid var(--border); padding: 2px 8px; }
.project-arrow { font-size: 12px; color: var(--muted); padding-top: 4px; flex-shrink: 0; transition: color 0.2s, transform 0.2s; }
.project-row:hover .project-arrow { color: var(--accent); transform: translateX(3px); }

/* Spider Gym: proper horizontal barbell SVG */
.barbell-svg { animation: bb-lift 3s ease-in-out infinite; transform-origin: center bottom; }
@keyframes bb-lift {
  0%        { transform: translateY(0) rotate(0deg); }
  12%       { transform: translateY(2px) rotate(0deg); }
  30%, 52%  { transform: translateY(-6px) rotate(0deg); }
  62%       { transform: translateY(3px) rotate(0deg); }
  65%       { transform: translateY(0px) rotate(-1.5deg); }
  68%       { transform: translateY(0px) rotate(1.5deg); }
  71%       { transform: translateY(0px) rotate(-0.5deg); }
  74%       { transform: translateY(0px) rotate(0deg); }
  100%      { transform: translateY(0) rotate(0deg); }
}

/* A-Scan: scan line only, no corner nubs */
.qr { position: relative; width: 18px; height: 18px; border: 1.5px solid var(--accent); border-radius: 2px; overflow: hidden; }
.qr-line { position: absolute; left: 0; right: 0; height: 1.5px; background: var(--accent); top: 0; animation: scan 1.6s ease-in-out infinite; }
@keyframes scan { 0% { top: 0; } 50% { top: calc(100% - 1.5px); } 100% { top: 0; } }

/* Word Embeddings: neural nodes */
/* NLP: 4x4 matrix of pulsing dots */
.nlp { display: grid; grid-template-columns: repeat(4, 5px); grid-template-rows: repeat(4, 5px); gap: 2px; }
.nlp-dot { width: 5px; height: 5px; background: var(--accent); border-radius: 50%; opacity: 0.15; animation: nlp-pop 2.4s ease-in-out infinite; }
.nlp-dot.d1  { animation-delay: 0s; }
.nlp-dot.d2  { animation-delay: 0.15s; }
.nlp-dot.d3  { animation-delay: 0.3s; }
.nlp-dot.d4  { animation-delay: 0.45s; }
.nlp-dot.d5  { animation-delay: 0.6s; }
.nlp-dot.d6  { animation-delay: 0.75s; }
.nlp-dot.d7  { animation-delay: 0.9s; }
.nlp-dot.d8  { animation-delay: 1.05s; }
.nlp-dot.d9  { animation-delay: 1.2s; }
.nlp-dot.d10 { animation-delay: 1.35s; }
.nlp-dot.d11 { animation-delay: 1.5s; }
.nlp-dot.d12 { animation-delay: 1.65s; }
.nlp-dot.d13 { animation-delay: 1.8s; }
.nlp-dot.d14 { animation-delay: 1.95s; }
.nlp-dot.d15 { animation-delay: 2.1s; }
.nlp-dot.d16 { animation-delay: 2.25s; }
@keyframes nlp-pop { 0%, 100% { opacity: 0.12; transform: scale(0.6); } 50% { opacity: 1; transform: scale(1.25); } }

/* Payment: calendar morphs into $ in a circle */
.cal-dollar { position: relative; width: 20px; height: 20px; }
.cal-icon {
  position: absolute; inset: 0; border: 1.5px solid var(--accent); border-radius: 2px;
  display: flex; flex-direction: column; overflow: hidden;
  animation: shape-to-circle 3s ease-in-out infinite;
}
.cal-top { height: 6px; background: var(--accent); opacity: 0.7; display: flex; justify-content: center; align-items: center; gap: 4px; }
.cal-ring { width: 2px; height: 3px; background: var(--bg); border-radius: 1px; }
.cal-body { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5px; padding: 2px 3px; }
.cal-dot { background: var(--accent); border-radius: 50%; opacity: 0.5; }
.dollar-icon {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--bg);
  background: var(--accent); border-radius: 50%;
  opacity: 0; animation: circle-appear 3s ease-in-out infinite;
}
@keyframes shape-to-circle {
  0%, 25%  { opacity: 1; border-radius: 2px; transform: scale(1); }
  40%      { opacity: 0; border-radius: 50%; transform: scale(0.85); }
  100%     { opacity: 0; }
}
@keyframes circle-appear {
  0%, 38%  { opacity: 0; transform: scale(0.6); }
  52%, 78% { opacity: 1; transform: scale(1); }
  92%, 100% { opacity: 0; transform: scale(0.85); }
}

/* Game Theory: fat penguin swinging a sword — redesigned */
.swordguin { position: relative; width: 32px; height: 28px; }
.sg-body { position: absolute; bottom: 0; left: 4px; width: 16px; height: 18px; background: var(--accent); border-radius: 50% 50% 45% 45%; }
.sg-belly { position: absolute; bottom: 2px; left: 7px; width: 10px; height: 11px; background: var(--bg); border-radius: 50% 50% 45% 45%; opacity: 0.45; }
.sg-head { position: absolute; top: 1px; left: 5px; width: 14px; height: 12px; background: var(--accent); border-radius: 50%; }
.sg-eye-l { position: absolute; top: 5px; left: 8px; width: 2.5px; height: 2.5px; background: var(--bg); border-radius: 50%; opacity: 0.9; }
.sg-eye-r { position: absolute; top: 5px; left: 13px; width: 2.5px; height: 2.5px; background: var(--bg); border-radius: 50%; opacity: 0.9; }
.sg-beak { position: absolute; top: 8px; left: 16px; width: 5px; height: 3px; background: var(--accent); border-radius: 0 3px 3px 0; opacity: 0.6; }
.sg-wing-flap { position: absolute; top: 14px; left: 1px; width: 6px; height: 8px; background: var(--accent); border-radius: 50% 0 50% 50%; opacity: 0.6; animation: wing-idle 1.4s ease-in-out infinite; }
.sg-arm { position: absolute; top: 13px; right: 0; width: 6px; height: 3px; background: var(--accent); border-radius: 2px; transform-origin: left center; animation: sword-swing 1.4s ease-in-out infinite; }
/* Sword: blade + crossguard + pommel */
.sg-sword { position: absolute; top: -1px; right: -12px; width: 12px; height: 3px; background: var(--accent); opacity: 0.9; transform-origin: left center; clip-path: polygon(0% 0%, 80% 0%, 100% 50%, 80% 100%, 0% 100%); }
.sg-crossguard { position: absolute; top: -4px; right: -1px; width: 2px; height: 9px; background: var(--accent); border-radius: 1px; opacity: 0.8; }
.sg-feet { position: absolute; bottom: -2px; left: 7px; display: flex; gap: 4px; }
.sg-foot { width: 4px; height: 2px; background: var(--accent); border-radius: 0 0 2px 2px; opacity: 0.5; }
@keyframes sword-swing { 0%, 100% { transform: rotate(-35deg); } 50% { transform: rotate(35deg); } }
@keyframes wing-idle { 0%, 100% { transform: rotate(5deg); } 50% { transform: rotate(-10deg); } }

/* Maze generator */
.maze-gen { display: grid; grid-template-columns: repeat(5, 5px); grid-template-rows: repeat(5, 5px); gap: 1px; }
.mc { width: 5px; height: 5px; background: var(--accent); border-radius: 1px; opacity: 0.08; }
.mc.path { animation: maze-light 4s ease-in-out infinite; }
.mc.p1  { animation-delay: 0.0s; } .mc.p2  { animation-delay: 0.2s; } .mc.p3  { animation-delay: 0.4s; }
.mc.p4  { animation-delay: 0.6s; } .mc.p5  { animation-delay: 0.8s; } .mc.p6  { animation-delay: 1.0s; }
.mc.p7  { animation-delay: 1.2s; } .mc.p8  { animation-delay: 1.4s; } .mc.p9  { animation-delay: 1.6s; }
.mc.p10 { animation-delay: 1.8s; } .mc.p11 { animation-delay: 2.0s; } .mc.p12 { animation-delay: 2.2s; }
.mc.p13 { animation-delay: 2.4s; } .mc.p14 { animation-delay: 2.6s; } .mc.p15 { animation-delay: 2.8s; }
.mc.p16 { animation-delay: 3.0s; } .mc.p17 { animation-delay: 3.2s; } .mc.p18 { animation-delay: 3.4s; }
@keyframes maze-light { 0% { opacity: 0.08; } 5% { opacity: 1; } 80% { opacity: 0.6; } 95%, 100% { opacity: 0.08; } }

.stack-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.stack-item { background: var(--bg); padding: 1.1rem 1.4rem; font-size: 12px; color: var(--muted); transition: background 0.2s, color 0.2s; }
.stack-item:hover { background: var(--bg-card); color: var(--text); }
.stack-item .stack-name { font-weight: 600; color: var(--text); display: block; margin-bottom: 2px; }

.contact-links { display: flex; flex-direction: column; }
.contact-link { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 0; border-bottom: 1px solid var(--border); text-decoration: none; color: var(--muted); font-size: 13px; transition: color 0.2s, padding-left 0.2s; }
.contact-link:first-child { border-top: 1px solid var(--border); }
.contact-link:hover { color: var(--accent); padding-left: 6px; }
.contact-link .link-label { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 300; opacity: 0.5; transition: opacity 0.2s; }
.contact-link:hover .link-label { color: var(--accent); opacity: 0.8; }

footer { padding: 3.5rem 0; border-top: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: var(--muted); letter-spacing: 0.04em; opacity: 0; animation: fadein 0.6s ease 1s forwards; max-width: 780px; margin: 0 auto; }
@keyframes fadein { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

@media (max-width: 560px) {
  .exp-row { grid-template-columns: 1fr; gap: 0.25rem; }
  .exp-date { padding-top: 0; }
  .hero { padding: 4.5rem 0 3.5rem; }
  .nav-links { display: none; }
  .nav-hamburger { display: flex; }
  .moon-btn { order: 0; }
}

/* ── cursor trail ── */
.trail-dot {
  position: fixed; pointer-events: none; border-radius: 50%;
  width: 5px; height: 5px; background: var(--accent);
  z-index: 9000; transition: opacity 0.4s;
}

/* ── konami ducks ── */
.konami-duck {
  position: fixed; pointer-events: none; z-index: 9998;
  font-size: 24px; user-select: none;
  animation: duck-fly linear forwards;
}
@keyframes duck-fly {
  0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(-110vh) rotate(780deg); opacity: 0; }
}

/* ── terminal popup ── */
#terminal-wrap {
  display: none; position: fixed; inset: 0; z-index: 8000;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(4px);
}
#terminal-wrap.open { display: flex; animation: fadein 0.25s ease forwards; }
#terminal-box {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: 10px; width: min(600px, 90vw);
  box-shadow: 0 24px 60px rgba(0,0,0,0.4);
  overflow: hidden;
}
#terminal-titlebar {
  display: flex; align-items: center; gap: 6px;
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  background: var(--bg);
}
#terminal-titlebar span { font-family: var(--font-mono); font-size: 11px; color: var(--muted); margin-left: 6px; opacity: 0.6; }
.term-dot { width: 10px; height: 10px; border-radius: 50%; }
.term-dot.close { background: #ff5f57; cursor: pointer; }
.term-dot.min { background: #febc2e; }
.term-dot.max { background: #28c840; }
#terminal-body { padding: 14px 16px; }
#terminal-form { display: flex; align-items: center; gap: 8px; }
#terminal-prompt { font-size: 12px; color: var(--accent); font-family: var(--font-mono); opacity: 0.7; }
#terminal-input {
  background: transparent; border: none; outline: none;
  font-family: var(--font-mono); font-size: 12px; color: var(--text);
  flex: 1; caret-color: var(--accent);
}
#terminal-output {
  font-family: var(--font-mono); font-size: 11px; color: var(--muted);
  margin-top: 10px; line-height: 1.7; white-space: pre-wrap;
  min-height: 1.4em; max-height: 240px; overflow-y: auto;
}

/* ── rage popup ── */
#rage-msg {
  position: fixed; pointer-events: none; z-index: 9990;
  background: var(--bg-card); border: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 11px; color: var(--muted);
  padding: 6px 12px; border-radius: 8px;
  opacity: 0; transition: opacity 0.3s; white-space: nowrap;
}

/* ── snake modal ── */
#snake-modal {
  display: none; position: fixed; inset: 0; z-index: 9995;
  background: rgba(0,0,0,0.85); align-items: center; justify-content: center;
}
#snake-modal.open { display: flex; }
#snake-box {
  background: var(--bg); border: 1px solid var(--accent);
  padding: 16px; border-radius: 8px; text-align: center;
}
#snake-box h3 { font-family: var(--font-mono); font-size: 12px; color: var(--accent); margin-bottom: 8px; letter-spacing: 0.1em; }
#snake-canvas { display: block; border: 1px solid var(--border); }
#snake-box p { font-family: var(--font-mono); font-size: 10px; color: var(--muted); margin-top: 8px; }
#snake-close { margin-top: 8px; background: none; border: 1px solid var(--border); color: var(--muted); font-family: var(--font-mono); font-size: 10px; padding: 4px 10px; cursor: pointer; border-radius: 4px; }
#snake-close:hover { border-color: var(--accent); color: var(--accent); }
#snake-score { font-family: var(--font-mono); font-size: 11px; color: var(--accent); margin-top: 4px; }

/* ── Snake D-pad ── */
#snake-dpad { display: flex; flex-direction: column; align-items: center; gap: 0; margin: 10px auto 4px; width: fit-content; }
.dpad-row { display: flex; align-items: center; justify-content: center; }
.dpad-btn {
  width: 44px; height: 44px; background: var(--bg-card);
  border: 1px solid var(--border); color: var(--muted);
  font-size: 14px; border-radius: 6px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s, transform 0.1s;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.dpad-btn:active, .dpad-btn.pressed {
  background: var(--accent); color: var(--bg);
  transform: scale(0.93);
}
.dpad-center { width: 44px; height: 44px; background: var(--bg); border: 1px solid var(--border); border-radius: 4px; opacity: 0.3; }

/* ── Touch ripple ── */
.touch-ripple {
  position: fixed; pointer-events: none; z-index: 9996;
  border-radius: 50%; border: 2px solid var(--accent);
  width: 10px; height: 10px;
  transform: translate(-50%, -50%) scale(0);
  animation: touch-ripple-expand 0.55s cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
}
@keyframes touch-ripple-expand {
  0%   { transform: translate(-50%, -50%) scale(0); opacity: 0.8; }
  70%  { opacity: 0.4; }
  100% { transform: translate(-50%, -50%) scale(5); opacity: 0; }
}

/* ── Mobile toast ── */
#mobile-toast {
  position: fixed; bottom: 80px; left: 50%; transform: translateX(-50%) translateY(12px);
  background: var(--bg-card); border: 1px solid var(--border);
  font-family: var(--font-mono); font-size: 11px; color: var(--muted);
  padding: 8px 16px; border-radius: 20px; z-index: 9993;
  opacity: 0; transition: opacity 0.3s, transform 0.3s;
  pointer-events: none; white-space: nowrap;
}
#mobile-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ── Long-press glow on project rows ── */
.project-row.longpress-glow {
  box-shadow: 0 0 0 2px var(--accent), 0 0 20px rgba(139,111,232,0.25);
  transition: box-shadow 0.2s;
}

/* === NEW JS-powered elements === */

/* Custom cursor */
.cursor-dot { position: fixed; top: 0; left: 0; width: 8px; height: 8px; background: var(--accent); border-radius: 50%; pointer-events: none; z-index: 100001; opacity: 0; transition: opacity 0.3s, transform 0.15s ease-out; mix-blend-mode: screen; }
.cursor-ring { position: fixed; top: 0; left: 0; width: 36px; height: 36px; border: 1.5px solid var(--accent); border-radius: 50%; pointer-events: none; z-index: 100000; opacity: 0; transition: opacity 0.3s, width 0.2s, height 0.2s; }
.cursor-dot.visible, .cursor-ring.visible { opacity: 1; }
.cursor-ring.hovering { width: 50px; height: 50px; border-color: var(--accent); opacity: 0.5; }
body { cursor: none; }
a, button, .tag, .stack-item, .project-row, input, .nav-hamburger { cursor: none; }
/* During blackout, show a white cursor dot */
html.blackout .cursor-dot { background: #fff; mix-blend-mode: normal; }
html.blackout .cursor-ring { border-color: rgba(255,255,255,0.5); }

/* Scroll progress */
.scroll-progress { position: fixed; top: 0; left: 0; height: 2px; background: linear-gradient(90deg, var(--accent), #c084fc); z-index: 10000; width: 0; pointer-events: none; }

/* Particle canvas */
#particle-canvas { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; }
.container { position: relative; z-index: 1; }

/* 3D tilt cards */
.project-row { transition: transform 0.1s ease-out, box-shadow 0.3s; transform-style: preserve-3d; perspective: 600px; }
.project-row.tilting { box-shadow: 0 8px 30px rgba(139, 111, 232, 0.08); }

/* Click spark particles */
.spark { position: fixed; width: 3px; height: 3px; background: var(--accent); border-radius: 50%; pointer-events: none; z-index: 9997; }

/* Stack hover glow */
.stack-item { position: relative; overflow: hidden; }
.stack-item::before { content: ""; position: absolute; top: var(--mouse-y, 50%); left: var(--mouse-x, 50%); width: 120px; height: 120px; background: radial-gradient(circle, rgba(139,111,232,0.15) 0%, transparent 70%); border-radius: 50%; transform: translate(-50%, -50%); opacity: 0; transition: opacity 0.3s; pointer-events: none; }
.stack-item:hover::before { opacity: 1; }

/* Stack item entrance animation (applied via JS) */
.stack-item.stack-hidden { opacity: 0; transform: translateY(-12px); }
.stack-item.stack-visible { transition: opacity 0.4s, transform 0.45s cubic-bezier(0.22,1,0.36,1); opacity: 1; transform: translateY(0); }

/* Easter egg overlay */
.easter-egg-overlay { position: fixed; inset: 0; z-index: 99999; pointer-events: none; display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.5s; }
.easter-egg-overlay.active { opacity: 1; }
.ee-text { font-family: var(--font-display); font-size: clamp(2rem, 8vw, 5rem); font-weight: 600; color: var(--accent); text-shadow: 0 0 40px rgba(139,111,232,0.6); animation: ee-float 2s ease-in-out; }
@keyframes ee-float { 0% { transform: scale(0.5) rotate(-10deg); opacity: 0; } 30% { transform: scale(1.1) rotate(2deg); opacity: 1; } 70% { transform: scale(1) rotate(0); opacity: 1; } 100% { transform: scale(0.9) translateY(-30px); opacity: 0; } }

/* Section count-up numbers */
.section-counter { font-family: var(--font-mono); font-size: 11px; color: var(--accent); opacity: 0.6; letter-spacing: 0.06em; }

@media (max-width: 560px) {
  .cursor-dot, .cursor-ring { display: none !important; }
  body, a, button, .tag, .stack-item, .project-row, input, .nav-hamburger { cursor: auto; }
}
@media (hover: none) {
  body, a, button, .tag, .stack-item, .project-row, input, .nav-hamburger { cursor: auto; }
  .cursor-dot, .cursor-ring { display: none !important; }
}

/* ══ Boot Screen ══ */
#boot-screen {
  position: fixed; inset: 0; z-index: 99998;
  background: #000;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  padding: 2.5rem 3.5rem;
  font-family: "IBM Plex Mono", monospace;
  transition: opacity 0.6s ease;
}
#boot-screen.fade-out { opacity: 0; pointer-events: none; }
#boot-lines { display: flex; flex-direction: column; gap: 0.45rem; max-width: 540px; width: 100%; }
.boot-line { font-size: 12px; color: #666; letter-spacing: 0.03em; opacity: 0; transition: opacity 0.08s; }
.boot-line.show { opacity: 1; }
.b-ts { color: #333; margin-right: 1rem; }
.b-ok { color: #4ade80; float: right; margin-left: 1.5rem; }
.b-warn { color: #facc15; }
.b-dim { color: #3a3a3a; }
.boot-hint { margin-top: 2rem; font-size: 10px; color: #2a2a2a; letter-spacing: 0.1em; }
@media (max-width: 560px) {
  #boot-screen { padding: 1.5rem 1.5rem; }
  .boot-line { font-size: 10px; }
}

/* ══ Command Palette ══ */
#cmd-palette {
  display: none; position: fixed; inset: 0; z-index: 99000;
  background: rgba(0,0,0,0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  align-items: flex-start; justify-content: center; padding-top: 14vh;
}
#cmd-palette.open { display: flex; animation: fadein 0.14s ease forwards; }
#cmd-box {
  width: min(560px, 92vw); background: var(--bg-card);
  border: 1px solid var(--border); border-radius: 12px; overflow: hidden;
  box-shadow: 0 32px 80px rgba(0,0,0,0.5);
}
#cmd-search-wrap {
  display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--border);
}
#cmd-icon { font-size: 14px; color: var(--accent); opacity: 0.55; flex-shrink: 0; line-height: 1; }
#cmd-input {
  flex: 1; background: transparent; border: none; outline: none;
  font-family: var(--font-mono); font-size: 13px; color: var(--text);
  caret-color: var(--accent);
}
#cmd-input::placeholder { color: var(--muted); opacity: 0.4; }
#cmd-esc {
  font-family: var(--font-mono); font-size: 9px; color: var(--muted); opacity: 0.45;
  border: 1px solid var(--border); border-radius: 4px; padding: 2px 6px;
  background: var(--bg); letter-spacing: 0.04em; flex-shrink: 0;
}
#cmd-results { max-height: 300px; overflow-y: auto; padding: 4px; }
.cmd-group { padding: 8px 10px 3px; font-family: var(--font-mono); font-size: 9px; color: var(--muted); opacity: 0.4; letter-spacing: 0.14em; text-transform: uppercase; }
.cmd-item {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  border-radius: 7px; font-family: var(--font-mono); font-size: 12px;
  color: var(--text); cursor: none; transition: background 0.1s, color 0.1s;
}
.cmd-item.hi { background: rgba(139,111,232,0.12); color: var(--accent); }
.cmd-ico { width: 20px; text-align: center; flex-shrink: 0; font-size: 13px; opacity: 0.65; }
.cmd-lbl { flex: 1; }
.cmd-hint-kbd { font-size: 9px; color: var(--muted); opacity: 0.4; letter-spacing: 0.05em; }
#cmd-empty { font-family: var(--font-mono); font-size: 12px; color: var(--muted); opacity: 0.35; padding: 22px; text-align: center; }

/* ══ Mute button ══ */
.mute-btn {
  background: none; border: none; cursor: none; padding: 0;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; color: var(--muted);
  opacity: 0.4; transition: opacity 0.2s, color 0.2s; flex-shrink: 0;
}
.mute-btn:hover { opacity: 0.9; color: var(--accent); }
.mute-btn svg { width: 14px; height: 14px; display: block; }

/* ══ Mage ══ */
.mage { position: relative; width: 28px; height: 30px; overflow: visible; }

/* Hat */
.mage-hat-tip {
  position: absolute; top: 0; left: 8px;
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-bottom: 11px solid var(--accent);
  animation: hat-bob 2.6s ease-in-out infinite;
  transform-origin: bottom center;
}
.mage-hat-mid {
  position: absolute; top: 9px; left: 5px;
  width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 5px solid var(--accent);
  opacity: 0.8;
}
.mage-hat-brim {
  position: absolute; top: 13px; left: 1px;
  width: 20px; height: 3px;
  background: var(--accent); border-radius: 50%; opacity: 0.65;
}

/* Head */
.mage-head {
  position: absolute; top: 15px; left: 8px;
  width: 9px; height: 8px;
  border: 1.5px solid var(--accent);
  border-radius: 50%; opacity: 0.85;
}

/* Robe */
.mage-robe {
  position: absolute; bottom: 0; left: 4px;
  width: 14px; height: 11px;
  background: var(--accent); opacity: 0.45;
  border-radius: 1px 1px 5px 5px;
  clip-path: polygon(8% 0%, 92% 0%, 100% 100%, 0% 100%);
}
.mage-robe::before {
  content: ''; position: absolute; top: -4px; left: 2px;
  width: 10px; height: 5px;
  background: var(--accent); opacity: 0.7; border-radius: 50% 50% 0 0;
}

/* Staff */
.mage-staff {
  position: absolute; bottom: 1px; right: 1px;
  width: 2px; height: 23px;
  background: var(--accent); opacity: 0.6; border-radius: 1px;
  transform-origin: bottom center;
  animation: staff-sway 3s ease-in-out infinite;
}
.mage-orb {
  position: absolute; top: -5px; left: 50%; transform: translateX(-50%);
  width: 7px; height: 7px;
  background: var(--accent); border-radius: 50%;
  animation: orb-glow 1.4s ease-in-out infinite;
}

/* Sparks */
.mage-spark { position: absolute; background: var(--accent); border-radius: 50%; opacity: 0; }
.ms1 { width: 3px; height: 3px; top: 2px; right: 2px;  animation: sparkA 2.4s ease-out infinite 0s; }
.ms2 { width: 2px; height: 2px; top: 0px; right: 0px;  animation: sparkB 2.4s ease-out infinite 0.85s; }
.ms3 { width: 2px; height: 2px; top: 3px; right: 5px;  animation: sparkC 2.4s ease-out infinite 1.6s; }

@keyframes hat-bob {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-2px); }
}
@keyframes staff-sway {
  0%, 100% { transform: rotate(-5deg); }
  50%       { transform: rotate(5deg); }
}
@keyframes orb-glow {
  0%, 100% { box-shadow: 0 0 3px 1px var(--accent); opacity: 0.75; transform: translateX(-50%) scale(1); }
  50%       { box-shadow: 0 0 8px 3px var(--accent); opacity: 1;    transform: translateX(-50%) scale(1.2); }
}
@keyframes sparkA {
  0%   { transform: translate(0,0) scale(0.4); opacity: 0; }
  18%  { opacity: 0.95; }
  65%  { transform: translate(-5px,-15px) scale(1);   opacity: 0.35; }
  100% { transform: translate(-7px,-22px) scale(0.1); opacity: 0; }
}
@keyframes sparkB {
  0%   { transform: translate(0,0) scale(0.4); opacity: 0; }
  18%  { opacity: 0.95; }
  65%  { transform: translate(3px,-13px) scale(1);   opacity: 0.35; }
  100% { transform: translate(4px,-20px) scale(0.1); opacity: 0; }
}
/* ══ Paint the Town Crimson — top-down shooter icon ══ */
.ptc { position: relative; width: 26px; height: 26px; overflow: visible; }

/* Central player square */
.ptc-player {
  position: absolute; top: 9px; left: 9px;
  width: 8px; height: 8px;
  background: var(--accent); border-radius: 1px;
  animation: ptc-player-glow 1.6s ease-in-out infinite;
}

/* Bullets — all start at center, fire in sequence */
.ptc-bullet {
  position: absolute; top: 11.5px; left: 11.5px;
  width: 3px; height: 3px;
  background: var(--accent); border-radius: 50%; opacity: 0;
}
.ptc-b-up    { animation: ptc-b-up    1.4s ease-in infinite 0s; }
.ptc-b-right { animation: ptc-b-right 1.4s ease-in infinite 0.35s; }
.ptc-b-down  { animation: ptc-b-down  1.4s ease-in infinite 0.7s; }
.ptc-b-left  { animation: ptc-b-left  1.4s ease-in infinite 1.05s; }

/* Enemies — creep in from the four corners */
.ptc-enemy {
  position: absolute; width: 3px; height: 3px;
  background: var(--accent); border-radius: 1px; opacity: 0;
}
.ptc-e1 { top: -1px;  left: -1px;   animation: ptc-e-tl 2.4s ease-in infinite 0s; }
.ptc-e2 { top: -1px;  right: -1px;  animation: ptc-e-tr 2.4s ease-in infinite 0.6s; }
.ptc-e3 { bottom: -1px; left: -1px; animation: ptc-e-bl 2.4s ease-in infinite 1.2s; }
.ptc-e4 { bottom: -1px; right: -1px;animation: ptc-e-br 2.4s ease-in infinite 1.8s; }

@keyframes ptc-player-glow {
  0%, 100% { box-shadow: 0 0 2px var(--accent); }
  50%       { box-shadow: 0 0 6px 2px var(--accent); }
}
@keyframes ptc-b-up    { 0%{opacity:0;transform:translate(0,0);}12%{opacity:1;}100%{opacity:0;transform:translate(0,-11px);} }
@keyframes ptc-b-right { 0%{opacity:0;transform:translate(0,0);}12%{opacity:1;}100%{opacity:0;transform:translate(11px,0);} }
@keyframes ptc-b-down  { 0%{opacity:0;transform:translate(0,0);}12%{opacity:1;}100%{opacity:0;transform:translate(0,11px);} }
@keyframes ptc-b-left  { 0%{opacity:0;transform:translate(0,0);}12%{opacity:1;}100%{opacity:0;transform:translate(-11px,0);} }
@keyframes ptc-e-tl { 0%{opacity:0;transform:translate(0,0);}15%{opacity:0.7;}85%{opacity:0.5;transform:translate(7px,7px);}100%{opacity:0;transform:translate(9px,9px);} }
@keyframes ptc-e-tr { 0%{opacity:0;transform:translate(0,0);}15%{opacity:0.7;}85%{opacity:0.5;transform:translate(-7px,7px);}100%{opacity:0;transform:translate(-9px,9px);} }
@keyframes ptc-e-bl { 0%{opacity:0;transform:translate(0,0);}15%{opacity:0.7;}85%{opacity:0.5;transform:translate(7px,-7px);}100%{opacity:0;transform:translate(9px,-9px);} }
@keyframes ptc-e-br { 0%{opacity:0;transform:translate(0,0);}15%{opacity:0.7;}85%{opacity:0.5;transform:translate(-7px,-7px);}100%{opacity:0;transform:translate(-9px,-9px);} }

/* Mage scaled up for project icons */
.mage-lg {
  transform: scale(1.35);
  transform-origin: top left;
  margin-right: 10px;
}
.mage-lg .mage-spark { background: var(--accent); }
.mage-lg .ms1 { width: 4px; height: 4px; animation-duration: 2s; }
.mage-lg .ms2 { width: 3px; height: 3px; animation-duration: 2.1s; }
.mage-lg .ms3 { width: 3px; height: 3px; animation-duration: 2.2s; }

@keyframes sparkC {
  0%   { transform: translate(0,0) scale(0.4); opacity: 0; }
  18%  { opacity: 0.95; }
  65%  { transform: translate(-2px,-17px) scale(1);   opacity: 0.35; }
  100% { transform: translate(-3px,-24px) scale(0.1); opacity: 0; }
}

/* ══════════════════════════════════════════════════
   PAINT THE TOWN CRIMSON — WebGL game modal
   ══════════════════════════════════════════════════ */
#crimson-modal {
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,0.88); z-index: 12000;
  align-items: center; justify-content: center;
}
#crimson-modal.open { display: flex; }

#cg-box {
  display: flex; flex-direction: column;
  width: min(96vw, 820px); height: min(92vh, 600px);
  background: #0e0b12; border: 1.5px solid rgba(139,111,232,0.35);
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 0 60px rgba(139,111,232,0.18), 0 0 0 1px rgba(255,255,255,0.04);
}

#cg-titlebar {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 14px; background: #130f1a;
  border-bottom: 1px solid rgba(139,111,232,0.2);
  flex-shrink: 0;
}
#cg-title {
  font-family: var(--font-mono); font-size: 11px;
  color: #c084fc; letter-spacing: 0.05em;
  text-transform: uppercase;
}
#cg-hud-inline {
  display: flex; align-items: center; gap: 14px;
  margin-left: auto; margin-right: 10px;
  font-family: var(--font-mono); font-size: 12px;
}
#cg-hp { display: flex; gap: 2px; }
.cg-hf { color: #e03060; }
.cg-he { color: #3a2a3a; }
#cg-score  { color: #a88cf0; }
#cg-wave   { color: #7060a0; }
#cg-bombs  { color: #ff6820; letter-spacing: 0.04em; }
#cg-powerup { color: #50e88a; font-size: 11px; letter-spacing: 0.04em; animation: cg-pu-pulse 0.8s ease-in-out infinite alternate; }
@keyframes cg-pu-pulse { from { opacity:0.7; } to { opacity:1; } }
#cg-close {
  background: none; border: none; cursor: pointer;
  color: #6b5a7a; font-size: 14px; padding: 2px 4px;
  line-height: 1; transition: color 0.15s;
}
#cg-close:hover { color: #e03060; }

#cg-canvas-wrap {
  position: relative; flex: 1; min-height: 0;
}
#cg-canvas {
  display: block; width: 100%; height: 100%;
  cursor: crosshair;
}

/* Overlay message (wave, game over, win) */
#cg-msg {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  pointer-events: none; gap: 6px;
  background: rgba(5,3,9,0.55);
}
.cg-mh {
  font-family: var(--font-mono); font-size: clamp(16px,3vw,26px);
  color: #e03060; letter-spacing: 0.12em; text-align: center;
  text-shadow: 0 0 24px #e03060; white-space: pre;
}
.cg-ml {
  font-family: var(--font-mono); font-size: clamp(11px,1.8vw,14px);
  color: #c084fc; letter-spacing: 0.04em; text-align: center;
  white-space: pre;
}

#cg-hint {
  flex-shrink: 0; padding: 5px 14px;
  font-family: var(--font-mono); font-size: 10px;
  color: #4a3a5a; text-align: center; letter-spacing: 0.04em;
  background: #0a0810;
  border-top: 1px solid rgba(139,111,232,0.1);
}

/* Mage hover tooltip */
.mage.mage-lg:hover { filter: drop-shadow(0 0 8px var(--accent)); }

@media (max-width: 600px) {
  #cg-hint { display: none; }
  #cg-box  { width: 100vw; height: 100dvh; border-radius: 0; border: none; }
}