@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&family=VT323&family=Orbitron:wght@400;700;900&family=Creepster&display=swap');

:root {
  --neon-green:  #00ff41;
  --neon-pink:   #ff006e;
  --neon-blue:   #00d4ff;
  --neon-yellow: #ffff00;
  --blood-red:   #cc0000;
  --dark-bg:     #000208;
  --dark-panel:  #050d14;
  --grid-color:  rgba(0,255,65,0.07);
  --scanline:    rgba(0,0,0,0.4);
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scrollbar-width:thin; scrollbar-color:var(--neon-pink) #000; }
::-webkit-scrollbar { width:8px; }
::-webkit-scrollbar-thumb { background:var(--neon-pink); }

body {
  background-color: var(--dark-bg);
  color: var(--neon-green);
  font-family: 'Share Tech Mono', monospace;
  font-size: 14px;
  overflow-x: hidden;
  cursor: crosshair;
}

/* ══════════════════════════════════════════════════════════
   SCANLINES + FLICKER (always on top)
   ══════════════════════════════════════════════════════════ */
body::before {
  content:'';
  position:fixed; inset:0;
  background: repeating-linear-gradient(0deg,transparent,transparent 2px,var(--scanline) 2px,var(--scanline) 4px);
  pointer-events:none; z-index:9997;
  animation: scanlines 8s linear infinite;
}
body::after {
  content:'';
  position:fixed; inset:0;
  background: radial-gradient(ellipse at center, transparent 60%, rgba(0,0,0,0.8) 100%);
  pointer-events:none; z-index:9996;
  animation: flicker 0.15s infinite;
}
@keyframes scanlines { 0%{background-position:0 0} 100%{background-position:0 100px} }
@keyframes flicker   { 0%,100%{opacity:1} 92%{opacity:.97} 93%{opacity:.84} 94%{opacity:.97} }
@keyframes blink     { 0%,100%{opacity:1} 50%{opacity:0} }

/* ══════════════════════════════════════════════════════════
   HORROR ENTRANCE SPLASH
   Full-screen gore/comic/cyberpunk overlay
   ══════════════════════════════════════════════════════════ */
#horror-splash {
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: #0a0000;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: crosshair;
}

/* Halftone comic dot bg */
#horror-splash::before {
  content:'';
  position:absolute; inset:0;
  background-image: radial-gradient(circle, rgba(180,0,0,0.15) 1px, transparent 1px);
  background-size: 8px 8px;
  pointer-events:none;
}

/* Blood drip from top */
#horror-splash::after {
  content:'';
  position:absolute;
  top:0; left:0; right:0;
  height:120px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120'%3E%3Cpath d='M0,0 L0,40 Q30,80 60,40 Q90,0 120,50 Q150,90 180,40 Q210,0 240,60 Q270,100 300,45 Q330,0 360,55 Q390,95 420,40 Q450,0 480,65 Q510,110 540,45 Q570,0 600,55 Q630,95 660,40 Q690,0 720,60 Q750,100 780,45 Q810,0 840,55 Q870,95 900,40 Q930,0 960,50 Q990,90 1020,40 Q1050,0 1080,55 Q1110,100 1140,45 Q1170,0 1200,40 L1200,0 Z' fill='%23aa0000'/%3E%3C/svg%3E") no-repeat top center / cover;
  animation: drip-in 1.2s ease forwards;
}

@keyframes drip-in {
  0%   { transform: translateY(-100%); opacity:0; }
  60%  { opacity:1; }
  100% { transform: translateY(0); opacity:1; }
}

.splash-inner {
  position: relative;
  z-index: 2;
  text-align: center;
  max-width: 700px;
  padding: 20px;
  animation: splash-glitch-in 0.5s ease 0.3s both;
}

@keyframes splash-glitch-in {
  0%   { transform: skewX(-8deg) scale(0.9); opacity:0; }
  40%  { transform: skewX(4deg)  scale(1.02); opacity:1; }
  60%  { transform: skewX(-2deg) scale(0.99); }
  100% { transform: none; opacity:1; }
}

/* Skull SVG pulse */
.splash-skull {
  width: 110px;
  height: 110px;
  margin: 0 auto 10px;
  display: block;
  filter: drop-shadow(0 0 18px var(--blood-red)) drop-shadow(0 0 6px #ff6600);
  animation: skull-pulse 1.4s ease-in-out infinite;
}

@keyframes skull-pulse {
  0%,100% { transform: scale(1);    filter: drop-shadow(0 0 18px var(--blood-red)); }
  50%      { transform: scale(1.06); filter: drop-shadow(0 0 30px #ff2200) drop-shadow(0 0 10px #ff8800); }
}

/* Comic-style action border */
.splash-frame {
  border: 4px solid var(--blood-red);
  box-shadow:
    0 0 0 2px #000,
    0 0 0 5px var(--blood-red),
    0 0 40px rgba(200,0,0,0.6),
    inset 0 0 60px rgba(100,0,0,0.3);
  padding: 28px 30px 22px;
  position: relative;
  background: rgba(5,0,0,0.9);
}

/* Comic halftone inner shadow */
.splash-frame::before {
  content:'';
  position:absolute; inset:0;
  background: repeating-linear-gradient(
    -45deg,
    transparent, transparent 3px,
    rgba(150,0,0,0.04) 3px, rgba(150,0,0,0.04) 6px
  );
  pointer-events:none;
}

/* Speed lines / impact lines */
.splash-frame::after {
  content:'';
  position:absolute; inset:-40px;
  background: conic-gradient(
    from 0deg at 50% 50%,
    transparent 0deg, rgba(180,0,0,0.07) 1deg,
    transparent 2deg, rgba(180,0,0,0.07) 3deg,
    transparent 4deg, rgba(180,0,0,0.07) 5deg,
    transparent 6deg
  );
  background-size: 100% 100%;
  pointer-events:none;
  z-index:-1;
  animation: spin-slow 30s linear infinite;
}

@keyframes spin-slow { to { transform: rotate(360deg); } }

.splash-title {
  font-family: 'Creepster', cursive;
  font-size: clamp(2.8rem, 7vw, 5rem);
  color: var(--blood-red);
  text-shadow:
    3px 3px 0 #000,
    -1px -1px 0 #000,
    0 0 20px rgba(255,0,0,0.8),
    0 0 50px rgba(255,0,0,0.4);
  letter-spacing: 4px;
  line-height: 1;
  animation: title-drip 0.1s step-end infinite;
  margin-bottom: 6px;
}

@keyframes title-drip {
  0%,95%,100% { text-shadow: 3px 3px 0 #000, 0 0 20px rgba(255,0,0,0.8); }
  96% { text-shadow: 3px 6px 0 #000, 0 0 30px #f00, 2px 8px 8px rgba(150,0,0,0.5); }
}

.splash-sub {
  font-family: 'VT323', monospace;
  font-size: 1.1rem;
  color: #ff4444;
  letter-spacing: 5px;
  text-transform: uppercase;
  margin-bottom: 16px;
  animation: blink 1.8s step-end infinite;
}

.splash-warning {
  font-family: 'Share Tech Mono', monospace;
  font-size: 11px;
  color: #883333;
  letter-spacing: 2px;
  line-height: 1.9;
  margin-bottom: 20px;
  border: 1px dashed #550000;
  padding: 10px;
  background: rgba(80,0,0,0.2);
}

.splash-warning .hi { color: #ff4444; }

/* Comic-style "ENTER" button */
.splash-enter {
  display: inline-block;
  position: relative;
  font-family: 'Creepster', cursive;
  font-size: 1.6rem;
  letter-spacing: 4px;
  color: #000;
  background: var(--blood-red);
  border: 3px solid #000;
  padding: 10px 40px;
  cursor: crosshair;
  text-transform: uppercase;
  box-shadow:
    4px 4px 0 #000,
    0 0 20px rgba(200,0,0,0.6);
  transition: all 0.08s;
  clip-path: polygon(8px 0%, calc(100% - 8px) 0%, 100% 8px, 100% calc(100% - 8px), calc(100% - 8px) 100%, 8px 100%, 0% calc(100% - 8px), 0% 8px);
  animation: btn-throb 1.5s ease-in-out infinite;
}

@keyframes btn-throb {
  0%,100% { box-shadow: 4px 4px 0 #000, 0 0 20px rgba(200,0,0,0.6); }
  50%      { box-shadow: 4px 4px 0 #000, 0 0 35px rgba(255,0,0,0.9), 0 0 60px rgba(200,0,0,0.3); }
}

.splash-enter:hover {
  background: #ff1111;
  transform: translate(-2px,-2px);
  box-shadow: 6px 6px 0 #000, 0 0 40px #f00;
}

.splash-enter:active { transform: translate(2px,2px); box-shadow: 2px 2px 0 #000; }

/* Animated blood drops falling */
.blood-drop {
  position: absolute;
  top: 0;
  width: 6px;
  background: linear-gradient(to bottom, #990000, #cc0000);
  border-radius: 0 0 50% 50%;
  pointer-events: none;
  animation: blood-fall linear forwards;
  opacity: 0.85;
}

@keyframes blood-fall {
  0%   { transform: translateY(-20px) scaleY(0.5); opacity:1; }
  80%  { opacity:0.8; }
  100% { transform: translateY(105vh) scaleY(1.8); opacity:0; }
}

/* Comic "POW" burst decorations */
.comic-burst {
  position: absolute;
  font-family: 'Creepster', cursive;
  font-size: 1.4rem;
  pointer-events: none;
  animation: burst-wobble 2s ease-in-out infinite;
}

@keyframes burst-wobble {
  0%,100% { transform: rotate(-8deg) scale(1); }
  50%      { transform: rotate(8deg) scale(1.1); }
}

/* Splash exit animation */
.horror-exit {
  animation: horror-close 0.6s ease-in forwards !important;
}

@keyframes horror-close {
  0%   { transform: scale(1);   opacity:1; }
  30%  { transform: scale(1.05) skewX(3deg); opacity:1; }
  60%  { transform: scaleY(0.05) scaleX(1.4); opacity:0.7; }
  100% { transform: scaleY(0) scaleX(0); opacity:0; }
}

/* ══════════════════════════════════════════════════════════
   CRT BOOT SCREEN
   ══════════════════════════════════════════════════════════ */
#crt-boot {
  position:fixed; inset:0;
  background:#000;
  z-index:99998;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  font-family:'Share Tech Mono',monospace;
  color:var(--neon-green);
  overflow:hidden;
  display:none; /* shown after horror splash */
}

#crt-boot::before {
  content:'';
  position:absolute; inset:0;
  background:#fff;
  animation: crt-poweron 0.7s ease-out forwards;
  pointer-events:none;
}

@keyframes crt-poweron {
  0%   { clip-path:inset(50% 0 50% 0); opacity:1; }
  30%  { clip-path:inset(48% 0 48% 0); opacity:0.9; }
  60%  { clip-path:inset(0% 0 0% 0);   opacity:0.3; }
  100% { clip-path:inset(0% 0 0% 0);   opacity:0; }
}

.crt-boot-off { animation: crt-poweroff 0.45s ease-in forwards !important; }

@keyframes crt-poweroff {
  0%   { clip-path:inset(0 0 0 0);              opacity:1; }
  40%  { clip-path:inset(49% 0 49% 0);          opacity:0.8; }
  70%  { clip-path:inset(49.9% 20% 49.9% 20%);  opacity:0.4; }
  100% { clip-path:inset(50% 50% 50% 50%);      opacity:0; }
}

#boot-content {
  position:relative; z-index:2;
  width:100%; max-width:680px;
  padding:30px 20px;
  opacity:0;
  animation:boot-fadein 0.3s ease 0.6s forwards;
}

@keyframes boot-fadein { to { opacity:1; } }

#boot-content::after {
  content:''; position:absolute; inset:0;
  background: repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,0.3) 2px,rgba(0,0,0,0.3) 4px);
  pointer-events:none;
}

.boot-line {
  font-size:13px; line-height:1.75; opacity:0; white-space:pre;
  animation:boot-line-reveal 0.06s ease forwards;
}

.boot-line.ok   { color:var(--neon-green); }
.boot-line.warn { color:var(--neon-yellow); }
.boot-line.err  { color:var(--neon-pink); }
.boot-line.dim  { color:#3a3a3a; }
.boot-line.blue { color:var(--neon-blue); }
.boot-line.red  { color:#ff3333; }

@keyframes boot-line-reveal { to { opacity:1; } }

#boot-bar-wrap { margin-top:18px; opacity:0; transition:opacity 0.3s; }
#boot-bar-wrap.show { opacity:1; }

#boot-bar-label { font-size:11px; color:var(--neon-blue); margin-bottom:5px; letter-spacing:2px; animation:blink 0.9s step-end infinite; }

#boot-bar-track {
  width:420px; max-width:88vw; height:16px;
  border:1px solid var(--neon-green);
  background:#000; position:relative; overflow:hidden;
}

#boot-bar-fill {
  height:100%; width:0%;
  background:var(--neon-green);
  box-shadow:0 0 10px var(--neon-green);
  transition:width 0.12s linear;
}

#boot-bar-pct {
  position:absolute; right:5px; top:0;
  font-size:11px; color:#000;
  mix-blend-mode:difference;
  line-height:16px;
}

/* ══════════════════════════════════════════════════════════
   GRID BG
   ══════════════════════════════════════════════════════════ */
.grid-bg {
  position:fixed; inset:0;
  background-image:
    linear-gradient(var(--grid-color) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-color) 1px,transparent 1px);
  background-size:40px 40px;
  pointer-events:none; z-index:0;
  animation:gridscroll 20s linear infinite;
}

@keyframes gridscroll { 0%{background-position:0 0} 100%{background-position:0 40px} }

/* ══════════════════════════════════════════════════════════
   MUSIC PLAYER (replaced with Spotify)
   ══════════════════════════════════════════════════════════ */
#music-player {
  position:fixed; bottom:14px; right:14px; z-index:9990;
  background:#000; border:1px solid var(--neon-green);
  box-shadow:0 0 14px rgba(0,255,65,0.35);
  padding:5px;
  font-size:11px;
  min-width:260px;
}

/* ══════════════════════════════════════════════════════════
   LAYOUT
   ══════════════════════════════════════════════════════════ */
#wrapper { position:relative; z-index:1; max-width:900px; margin:0 auto; padding:10px; }

/* ══════════════════════════════════════════════════════════
   GLITCH TEXT
   ══════════════════════════════════════════════════════════ */
.glitch {
  position:relative; color:var(--neon-green);
  font-family:'VT323',monospace; font-size:3.5rem;
  letter-spacing:4px; text-transform:uppercase;
  animation:glitch-main 3s infinite;
}
.glitch::before,.glitch::after { content:attr(data-text); position:absolute; top:0; left:0; width:100%; height:100%; }
.glitch::before { color:var(--neon-pink); animation:glitch-before 3s infinite; clip-path:polygon(0 0,100% 0,100% 35%,0 35%); }
.glitch::after  { color:var(--neon-blue); animation:glitch-after  3s infinite; clip-path:polygon(0 65%,100% 65%,100% 100%,0 100%); }
@keyframes glitch-main   { 0%,90%,100%{transform:none} 91%{transform:skew(-1deg)} 93%{transform:skew(1deg) translateX(3px)} }
@keyframes glitch-before { 0%,89%,100%{transform:none;opacity:0} 90%{transform:translateX(-4px);opacity:1} 92%{transform:translateX(4px);opacity:1} 94%{opacity:0} }
@keyframes glitch-after  { 0%,89%,100%{transform:none;opacity:0} 90%{transform:translateX(4px);opacity:1} 92%{transform:translateX(-4px);opacity:1} 94%{opacity:0} }

/* ══════════════════════════════════════════════════════════
   HEADER
   ══════════════════════════════════════════════════════════ */
header {
  border:2px solid var(--neon-green); border-top:4px solid var(--neon-pink);
  padding:15px; margin-bottom:10px; background:var(--dark-panel);
  position:relative; text-align:center;
  box-shadow:0 0 20px rgba(0,255,65,0.3),inset 0 0 20px rgba(0,255,65,0.05);
}
header::before {
  content:'[ CYBER_ZONE v2.7 ] [ CONNECTED ] [ USERS ONLINE: 1337 ]';
  position:absolute; top:-12px; left:10px;
  background:var(--dark-bg); color:var(--neon-pink);
  font-size:11px; padding:0 5px; animation:blink 1.5s step-end infinite;
}
.header-subtitle {
  font-family:'Orbitron',monospace; color:var(--neon-blue);
  font-size:.75rem; letter-spacing:6px; text-transform:uppercase;
  margin-top:5px; animation:pulse-text 2s ease-in-out infinite;
}
@keyframes pulse-text {
  0%,100%{opacity:1;text-shadow:0 0 10px var(--neon-blue)}
  50%{opacity:.7;text-shadow:0 0 20px var(--neon-blue),0 0 40px var(--neon-blue)}
}
#greeting-message {
  color: var(--neon-yellow);
  font-size: 0.9rem;
  margin-top: 5px;
  letter-spacing: 2px;
  text-transform: uppercase;
}

/* ══════════════════════════════════════════════════════════
   MARQUEE
   ══════════════════════════════════════════════════════════ */
.marquee-wrap {
  background:#000; border:1px solid var(--neon-pink); border-left:4px solid var(--neon-pink);
  padding:5px 0; margin-bottom:10px; overflow:hidden;
  box-shadow:0 0 10px rgba(255,0,110,0.4);
}
.marquee-inner { display:inline-block; white-space:nowrap; animation:marquee 25s linear infinite; color:var(--neon-pink); font-size:13px; }
@keyframes marquee { 0%{transform:translateX(100vw)} 100%{transform:translateX(-100%)} }

/* ══════════════════════════════════════════════════════════
   NAV
   ══════════════════════════════════════════════════════════ */
nav { display:flex; gap:4px; margin-bottom:10px; flex-wrap:wrap; }
nav a {
  display:inline-block; padding:6px 14px;
  background:#000; border:1px solid var(--neon-green); color:var(--neon-green);
  text-decoration:none; font-family:'Share Tech Mono',monospace;
  font-size:13px; text-transform:uppercase; letter-spacing:2px;
  transition:all .1s; position:relative; overflow:hidden;
}
nav a::before {
  content:''; position:absolute; top:0; left:-100%;
  width:100%; height:100%; background:var(--neon-green);
  transition:left .2s; z-index:-1;
}
nav a:hover { color:#000; text-shadow:none; box-shadow:0 0 15px var(--neon-green); }
nav a:hover::before { left:0; }

/* ══════════════════════════════════════════════════════════
   MAIN GRID
   ══════════════════════════════════════════════════════════ */
.main-grid { display:grid; grid-template-columns:1fr 280px; gap:8px; }

/* ══════════════════════════════════════════════════════════
   PANELS
   ══════════════════════════════════════════════════════════ */
.panel { border:1px solid var(--neon-green); background:var(--dark-panel); margin-bottom:8px; }
.panel-title {
  background:var(--neon-green); color:#000;
  font-family:'Orbitron',monospace; font-size:.7rem; font-weight:700;
  letter-spacing:3px; padding:4px 10px; text-transform:uppercase;
}
.panel-title.pink { background:var(--neon-pink); }
.panel-title.blue { background:var(--neon-blue); }
.panel-body { padding:12px; line-height:1.8; font-size:13px; }

.welcome-text { border-left:3px solid var(--neon-pink); padding-left:10px; color:#ccc; font-size:13px; line-height:1.9; }
.welcome-text span  { color:var(--neon-green); }
.welcome-text .warn { color:var(--neon-pink); }
.welcome-text .info { color:var(--neon-blue); }

/* ══════════════════════════════════════════════════════════
   USER PROFILE PANEL
   ══════════════════════════════════════════════════════════ */
.profile-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}
.profile-row input {
  flex: 1;
  background: #000;
  border: 1px solid var(--neon-green);
  color: var(--neon-green);
  font-family: 'Share Tech Mono', monospace;
  font-size: 12px;
  padding: 4px 6px;
  outline: none;
}
.profile-row input:focus {
  border-color: var(--neon-blue);
  box-shadow: 0 0 6px var(--neon-blue);
}
.avatar-selector {
  display: flex;
  gap: 4px;
  justify-content: space-around;
  margin: 6px 0;
}
.avatar-option {
  font-size: 20px;
  cursor: crosshair;
  padding: 4px 8px;
  border: 1px solid transparent;
  transition: all 0.1s;
}
.avatar-option.selected {
  border-color: var(--neon-yellow);
  background: rgba(255,255,0,0.1);
  box-shadow: 0 0 8px var(--neon-yellow);
}
.avatar-option:hover {
  border-color: var(--neon-green);
}
.profile-save {
  width: 100%;
  background: var(--neon-green);
  color: #000;
  border: none;
  font-family: 'Orbitron', monospace;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 2px;
  padding: 6px;
  cursor: crosshair;
  text-transform: uppercase;
  transition: background 0.1s;
}
.profile-save:hover {
  background: var(--neon-yellow);
}

/* ══════════════════════════════════════════════════════════
   TROPHY CASE
   ══════════════════════════════════════════════════════════ */
.trophy-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 8px;
}
.trophy-item {
  border: 1px solid rgba(255,0,110,0.3);
  background: rgba(0,0,0,0.5);
  padding: 6px 2px;
  text-align: center;
  font-size: 10px;
  color: #555;
  transition: all 0.2s;
  position: relative;
}
.trophy-item.unlocked {
  border-color: var(--neon-yellow);
  background: rgba(255,255,0,0.05);
  color: var(--neon-yellow);
  box-shadow: 0 0 10px rgba(255,255,0,0.2);
}
.trophy-item.unlocked .trophy-icon {
  filter: drop-shadow(0 0 4px currentColor);
}
.trophy-icon {
  font-size: 22px;
  display: block;
  margin-bottom: 2px;
}
.trophy-name {
  font-weight: bold;
  letter-spacing: 1px;
}
.trophy-desc {
  font-size: 8px;
  color: #777;
  margin-top: 2px;
}

/* ══════════════════════════════════════════════════════════
   VISITOR COUNTER  (live localStorage)
   ══════════════════════════════════════════════════════════ */
.counter-box { text-align:center; padding:15px; border:2px dashed var(--neon-pink); margin:10px 0; background:#000; }
.counter-digits { display:inline-flex; gap:2px; margin:8px 0; }
.digit {
  background:#111; border:1px solid var(--neon-pink);
  color:var(--neon-yellow); font-family:'VT323',monospace; font-size:2.2rem;
  width:32px; text-align:center; line-height:1; padding:2px 0;
  box-shadow:inset 0 0 8px rgba(255,255,0,0.2);
  animation:digit-flicker 4s step-end infinite;
}
.digit:nth-child(2){animation-delay:.3s} .digit:nth-child(3){animation-delay:.7s}
.digit:nth-child(4){animation-delay:1.1s} .digit:nth-child(5){animation-delay:.5s}
.digit:nth-child(6){animation-delay:.9s} .digit:nth-child(7){animation-delay:.2s}
@keyframes digit-flicker {
  0%,100%{box-shadow:inset 0 0 8px rgba(255,255,0,.2)}
  95%{box-shadow:inset 0 0 2px rgba(255,255,0,.05)}
  96%{color:transparent} 97%{color:var(--neon-yellow)}
}
.counter-label { font-size:11px; color:var(--neon-pink); letter-spacing:3px; text-transform:uppercase; animation:blink 2s step-end infinite; }

/* ══════════════════════════════════════════════════════════
   UNDER CONSTRUCTION
   ══════════════════════════════════════════════════════════ */
.construction {
  display:flex; align-items:center; gap:8px;
  background:repeating-linear-gradient(45deg,#1a0000,#1a0000 10px,#000 10px,#000 20px);
  border:2px solid var(--neon-yellow); padding:8px 12px;
  color:var(--neon-yellow); font-family:'VT323',monospace; font-size:1.3rem;
  letter-spacing:2px; margin:8px 0; animation:construction-pulse 1s step-end infinite;
}
.construction-icon { font-size:1.5rem; animation:spin 2s linear infinite; display:inline-block; }
@keyframes spin { to{transform:rotate(360deg)} }
@keyframes construction-pulse { 0%,100%{border-color:var(--neon-yellow)} 50%{border-color:#664400} }

/* ══════════════════════════════════════════════════════════
   LINK LIST
   ══════════════════════════════════════════════════════════ */
.link-list { list-style:none; }
.link-list li { padding:4px 0; border-bottom:1px dotted rgba(0,255,65,0.2); }
.link-list li:last-child { border-bottom:none; }
.link-list a { color:var(--neon-blue); text-decoration:none; font-size:12px; transition:color .1s; }
.link-list a::before { content:'>> '; color:var(--neon-pink); }
.link-list a:hover { color:var(--neon-yellow); text-shadow:0 0 8px var(--neon-yellow); }

/* ══════════════════════════════════════════════════════════
   GUESTBOOK
   ══════════════════════════════════════════════════════════ */
#gb-entries { padding:8px; }

.guest-entry {
  border:1px solid rgba(0,255,65,0.3); padding:8px; margin-bottom:8px;
  background:rgba(0,255,65,0.03); font-size:12px;
  animation:gb-entry-in .3s ease;
}
@keyframes gb-entry-in {
  from{opacity:0;transform:translateX(-8px)}
  to{opacity:1;transform:none}
}
.guest-entry.new { border-color:var(--neon-pink); background:rgba(255,0,110,0.05); }
.guest-entry .from { color:var(--neon-pink); font-weight:bold; font-size:13px; }
.guest-entry .date { color:#555; float:right; font-size:11px; }
.guest-entry p { color:#aaa; margin-top:4px; clear:both; }

.gb-empty { color:#333; font-size:12px; padding:12px; text-align:center; font-style:italic; }

.guest-form input, .guest-form textarea {
  width:100%; background:#050d14; border:1px solid var(--neon-green);
  color:var(--neon-green); font-family:'Share Tech Mono',monospace;
  font-size:12px; padding:6px; margin-bottom:6px; outline:none; resize:vertical;
}
.guest-form input:focus, .guest-form textarea:focus { border-color:var(--neon-blue); box-shadow:0 0 8px rgba(0,212,255,0.3); }
.guest-form button {
  background:var(--neon-green); color:#000; border:none;
  font-family:'Orbitron',monospace; font-size:.65rem; font-weight:700;
  letter-spacing:2px; padding:8px 20px; cursor:crosshair;
  text-transform:uppercase; width:100%; transition:background .1s;
}
.guest-form button:hover { background:var(--neon-yellow); }

/* ══════════════════════════════════════════════════════════
   CHAT ROOM
   ══════════════════════════════════════════════════════════ */
.chatroom { border:2px solid var(--neon-blue); background:#000; box-shadow:0 0 20px rgba(0,212,255,0.15); }
.chat-header {
  background:var(--neon-blue); color:#000;
  font-family:'Orbitron',monospace; font-size:.65rem; font-weight:700;
  letter-spacing:3px; padding:4px 10px; display:flex; justify-content:space-between; align-items:center;
}
.chat-online { background:#000; color:var(--neon-green); padding:2px 6px; font-size:10px; border:1px solid var(--neon-green); animation:blink 2s step-end infinite; }
.chat-messages { height:220px; overflow-y:auto; padding:8px; font-size:12px; scrollbar-width:thin; scrollbar-color:var(--neon-blue) #000; }
.chat-msg { margin-bottom:5px; line-height:1.5; }
.chat-msg .user { color:var(--neon-pink); font-weight:bold; }
.chat-msg .sys  { color:var(--neon-yellow); font-style:italic; }
.chat-msg .text { color:#ccc; }
.chat-msg .time { color:#444; font-size:10px; margin-right:4px; }

.typing-indicator { height:22px; padding:3px 8px; font-size:11px; color:#555; font-style:italic; border-top:1px dashed #0a1a22; display:flex; align-items:center; gap:6px; letter-spacing:1px; opacity:0; transition:opacity .2s; }
.typing-indicator.visible { opacity:1; }
.typing-dots { display:inline-flex; gap:3px; }
.typing-dots span { width:4px; height:4px; background:var(--neon-blue); border-radius:50%; animation:typing-dot 1s ease-in-out infinite; }
.typing-dots span:nth-child(2){animation-delay:.2s} .typing-dots span:nth-child(3){animation-delay:.4s}
@keyframes typing-dot { 0%,80%,100%{transform:scale(1);opacity:.35} 40%{transform:scale(1.5);opacity:1} }

.chat-nick-row { display:flex; align-items:center; padding:0 8px; gap:6px; font-size:11px; color:var(--neon-blue); border-top:1px solid rgba(0,212,255,.25); border-bottom:1px solid rgba(0,212,255,.25); background:#050d14; }
.chat-nick-row span { white-space:nowrap; }
input.chat-nick { flex:1; background:transparent; border:none; color:var(--neon-pink); font-family:'Share Tech Mono',monospace; font-size:12px; padding:4px; outline:none; }
.chat-input-row { display:flex; border-top:1px solid var(--neon-blue); }
input.chat-input { flex:1; background:transparent; border:none; color:var(--neon-green); font-family:'Share Tech Mono',monospace; font-size:12px; padding:8px; outline:none; }
input.chat-input::placeholder { color:#2a3a2a; }
button.chat-send { background:var(--neon-blue); color:#000; border:none; font-family:'Orbitron',monospace; font-size:.6rem; font-weight:700; letter-spacing:2px; padding:0 14px; cursor:crosshair; transition:background .1s; }
button.chat-send:hover { background:var(--neon-green); }

/* ══════════════════════════════════════════════════════════
   BADGES + WEBRINGS + STATS
   ══════════════════════════════════════════════════════════ */
.badges { display:flex; flex-wrap:wrap; gap:4px; padding:10px; }
.badge { display:inline-block; padding:3px 7px; font-size:10px; font-family:'Share Tech Mono',monospace; letter-spacing:1px; text-transform:uppercase; border:1px solid; }
.badge-green  { border-color:var(--neon-green);  color:var(--neon-green);  background:rgba(0,255,65,.08); }
.badge-pink   { border-color:var(--neon-pink);   color:var(--neon-pink);   background:rgba(255,0,110,.08); animation:blink 1.2s step-end infinite; }
.badge-blue   { border-color:var(--neon-blue);   color:var(--neon-blue);   background:rgba(0,212,255,.08); }
.badge-yellow { border-color:var(--neon-yellow); color:var(--neon-yellow); background:rgba(255,255,0,.08); }

.webring { display:flex; align-items:center; gap:6px; padding:8px; border:1px dashed var(--neon-pink); margin:5px 0; font-size:11px; color:#aaa; }
.webring a { color:var(--neon-pink); text-decoration:none; font-size:16px; font-weight:bold; }
.webring-name { color:var(--neon-green); flex:1; text-align:center; }

.stat-grid { display:grid; grid-template-columns:1fr 1fr; gap:1px; background:rgba(0,255,65,.2); border:1px solid rgba(0,255,65,.2); }
.stat-cell { background:var(--dark-panel); padding:8px; text-align:center; }
.stat-cell .val { font-family:'VT323',monospace; font-size:2rem; line-height:1; color:var(--neon-yellow); text-shadow:0 0 10px var(--neon-yellow); }
.stat-cell .lbl { font-size:10px; color:#555; letter-spacing:2px; text-transform:uppercase; margin-top:2px; }

/* ══════════════════════════════════════════════════════════
   MISC DECORATIONS
   ══════════════════════════════════════════════════════════ */
.cyber-divider { height:2px; background:linear-gradient(90deg,transparent,var(--neon-pink),var(--neon-blue),var(--neon-green),transparent); margin:8px 0; background-size:200% 100%; animation:divider-flow 3s linear infinite; }
@keyframes divider-flow { 0%{background-position:0% 0%} 100%{background-position:200% 0%} }

.stripe-bar { height:12px; background:repeating-linear-gradient(90deg,var(--neon-yellow) 0px,var(--neon-yellow) 12px,#000 12px,#000 24px); margin:8px 0; animation:stripe-scroll 1s linear infinite; background-size:24px 100%; }
@keyframes stripe-scroll { from{background-position:0 0} to{background-position:24px 0} }

.glitch-box {
  width:100%; height:58px;
  background:linear-gradient(135deg,#001a00,#000d1a 50%,#1a000d);
  border:1px solid var(--neon-green); overflow:hidden; position:relative; margin-bottom:8px;
  cursor: crosshair;
}
.glitch-box::before {
  content:'SYSTEM BREACH DETECTED /// ACCESS GRANTED /// WELCOME HACKER';
  position:absolute; top:50%; transform:translateY(-50%);
  font-size:11px; color:var(--neon-green); white-space:nowrap;
  animation:marquee 15s linear infinite;
  text-shadow:0 0 10px var(--neon-green);
}
.glitch-box::after {
  content:''; position:absolute; inset:0;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,255,65,.03) 3px,rgba(0,255,65,.03) 4px);
  animation:glitch-slice 5s step-end infinite;
}
@keyframes glitch-slice {
  0%,100%{clip-path:none;transform:none}
  94%{clip-path:inset(30% 0 40% 0);transform:translateX(-5px)}
  95%{clip-path:inset(60% 0 10% 0);transform:translateX(5px)}
  96%{clip-path:none;transform:none}
}

/* ══════════════════════════════════════════════════════════
   PARTICLES
   ══════════════════════════════════════════════════════════ */
.particles { position:fixed; inset:0; pointer-events:none; z-index:1; overflow:hidden; }
.particle { position:absolute; width:2px; height:2px; background:var(--neon-green); border-radius:50%; animation:fall linear infinite; opacity:.4; }
.particle:nth-child(odd)  { background:var(--neon-blue);  width:1px; height:1px; }
.particle:nth-child(3n)   { background:var(--neon-pink);  opacity:.3; }
@keyframes fall { from{transform:translateY(-10px);opacity:.5} to{transform:translateY(100vh) translateX(20px);opacity:0} }

/* ══════════════════════════════════════════════════════════
   CURSOR TRAIL
   ══════════════════════════════════════════════════════════ */
.trail-dot { position:fixed; border-radius:50%; pointer-events:none; mix-blend-mode:screen; z-index:99997; }

/* ══════════════════════════════════════════════════════════
   FOOTER / STATUS
   ══════════════════════════════════════════════════════════ */
footer { border:1px solid #222; border-top:2px solid var(--neon-pink); padding:12px; margin-top:10px; text-align:center; font-size:11px; color:#444; background:var(--dark-panel); }
footer span { color:var(--neon-pink); }
footer a    { color:var(--neon-blue); text-decoration:none; }

.status-bar { background:#000; border:1px solid #111; border-top:1px solid var(--neon-green); padding:4px 10px; display:flex; gap:20px; font-size:11px; color:#555; margin-top:8px; flex-wrap:wrap; }
.status-bar .ok   { color:var(--neon-green); }
.status-bar .warn { color:var(--neon-yellow); animation:blink 2s step-end infinite; }
.status-bar .err  { color:var(--neon-pink); }

/* ══════════════════════════════════════════════════════════
   MUSIC ARCHIVE (unchanged)
   ══════════════════════════════════════════════════════════ */
.ma-input {
  width:100%;
  background:#050d14;
  border:1px solid rgba(255,0,110,0.4);
  color:var(--neon-green);
  font-family:'Share Tech Mono',monospace;
  font-size:12px;
  padding:6px 8px;
  outline:none;
}
.ma-input:focus { border-color:var(--neon-pink); box-shadow:0 0 8px rgba(255,0,110,0.3); }
.ma-input option { background:#050d14; }

.ma-submit-btn {
  width:100%;
  background:var(--neon-pink); color:#000;
  border:none;
  font-family:'Orbitron',monospace; font-size:.65rem; font-weight:700;
  letter-spacing:2px; padding:9px; cursor:crosshair;
  text-transform:uppercase; transition:background .1s;
}
.ma-submit-btn:hover { background:var(--neon-yellow); }

.ma-filter-btn {
  background:transparent;
  border:1px solid rgba(255,0,110,0.3);
  color:#555;
  font-family:'Share Tech Mono',monospace;
  font-size:10px; letter-spacing:1px; text-transform:uppercase;
  padding:3px 10px; cursor:crosshair; transition:all .1s;
}
.ma-filter-btn:hover  { color:var(--neon-pink); border-color:var(--neon-pink); }
.ma-filter-btn.active { background:var(--neon-pink); color:#000; border-color:var(--neon-pink); }

/* Track card */
.ma-track {
  display:flex; align-items:center; gap:10px;
  padding:8px 12px;
  border-bottom:1px solid rgba(255,0,110,0.1);
  transition:background .1s;
  position:relative;
}
.ma-track:hover { background:rgba(255,0,110,0.05); }
.ma-track:last-child { border-bottom:none; }

.ma-platform-icon {
  flex-shrink:0;
  width:28px; height:28px;
  border-radius:4px;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:bold;
}
.ma-platform-icon.youtube    { background:#ff0000; color:#fff; }
.ma-platform-icon.spotify    { background:#1db954; color:#fff; }
.ma-platform-icon.soundcloud { background:#ff5500; color:#fff; }
.ma-platform-icon.bandcamp   { background:#1da0c3; color:#fff; }
.ma-platform-icon.other      { background:#333;    color:var(--neon-green); }

.ma-track-info { flex:1; min-width:0; }
.ma-track-title {
  color:var(--neon-green); font-size:13px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.ma-track-artist { color:#888; font-size:11px; margin-top:1px; }
.ma-track-meta   { color:#444; font-size:10px; margin-top:2px; letter-spacing:1px; }

.ma-track-link {
  flex-shrink:0;
  color:var(--neon-pink); text-decoration:none;
  font-size:11px; letter-spacing:1px;
  border:1px solid rgba(255,0,110,0.4);
  padding:3px 8px;
  transition:all .1s; white-space:nowrap;
}
.ma-track-link:hover { background:var(--neon-pink); color:#000; }

.ma-delete-btn {
  flex-shrink:0; background:none;
  border:none; color:#330011; font-size:14px;
  cursor:crosshair; padding:2px 4px; line-height:1;
  transition:color .1s;
}
.ma-delete-btn:hover { color:var(--neon-pink); }

.ma-genre-tag {
  display:inline-block;
  font-size:9px; letter-spacing:1px; text-transform:uppercase;
  padding:1px 5px;
  border:1px solid rgba(0,212,255,0.3);
  color:var(--neon-blue);
  margin-left:6px;
  vertical-align:middle;
}

/* ══════════════════════════════════════════════════════════
   SAFE MODE TOGGLE
   ══════════════════════════════════════════════════════════ */
#safe-mode-toggle {
  position:fixed; top:10px; right:12px; z-index:99995;
  background:#000; border:1px solid #333;
  color:#444; font-family:'Share Tech Mono',monospace;
  font-size:10px; letter-spacing:2px; padding:5px 10px;
  cursor:crosshair; transition:all .2s;
}
#safe-mode-toggle:hover { border-color:var(--neon-green); color:var(--neon-green); }

body.safe-mode {
  filter: saturate(0.15) brightness(0.9);
}
body.safe-mode #horror-splash { filter: saturate(0) brightness(0.6); }
body.safe-mode #safe-mode-toggle {
  border-color:var(--neon-green); color:var(--neon-green);
  filter:none !important;
}

/* ══════════════════════════════════════════════════════════
   PAGE-WIDE ALERT FLASH  (guestbook sign)
   ══════════════════════════════════════════════════════════ */
#alert-flash {
  position:fixed; inset:0; z-index:89000;
  pointer-events:none;
  background:rgba(200,0,0,0);
  animation:none;
}
#alert-flash.fire {
  animation:alert-pulse .7s ease-out forwards;
}
@keyframes alert-pulse {
  0%  { background:rgba(200,0,0,0.0); }
  15% { background:rgba(200,0,0,0.45); }
  40% { background:rgba(200,0,0,0.25); }
  70% { background:rgba(200,0,0,0.10); }
  100%{ background:rgba(200,0,0,0.0); }
}
#alert-banner {
  position:fixed; top:-80px; left:0; right:0; z-index:89001;
  background:var(--blood-red); color:#fff;
  font-family:'VT323',monospace; font-size:1.4rem; letter-spacing:4px;
  text-align:center; padding:10px;
  box-shadow:0 4px 30px rgba(200,0,0,0.8);
  pointer-events:none;
  transition:top .3s cubic-bezier(.17,.67,.35,1.3);
}
#alert-banner.show { top:0; }

/* ══════════════════════════════════════════════════════════
   NEON SIGN FLICKER — header title
   ══════════════════════════════════════════════════════════ */
.neon-flicker {
  animation: neon-sign 6s step-end infinite;
}
@keyframes neon-sign {
  0%,100%   { text-shadow:0 0 10px var(--neon-green),0 0 30px var(--neon-green),0 0 60px var(--neon-green); color:var(--neon-green); }
  92%        { text-shadow:none; color:#002208; }
  93%        { text-shadow:0 0 6px var(--neon-green); color:var(--neon-green); }
  94%        { text-shadow:none; color:#002208; }
  95%,99%    { text-shadow:0 0 10px var(--neon-green),0 0 30px var(--neon-green); color:var(--neon-green); }
  96%        { text-shadow:none; color:#002208; }
}

/* ══════════════════════════════════════════════════════════
   SKULL CURSOR  (replaces default trail)
   ══════════════════════════════════════════════════════════ */
body { cursor:none !important; }
#skull-cursor {
  position:fixed; z-index:99999; pointer-events:none;
  width:28px; height:28px;
  transform:translate(-50%,-50%);
  transition:left 40ms linear, top 40ms linear;
  filter:drop-shadow(0 0 4px var(--neon-green));
}
#skull-cursor svg { width:100%; height:100%; }
#skull-cursor.clicked { animation:cursor-click .15s ease; }
@keyframes cursor-click {
  0%,100% { transform:translate(-50%,-50%) scale(1); }
  50%     { transform:translate(-50%,-50%) scale(1.5); filter:drop-shadow(0 0 8px var(--blood-red)); }
}

/* Faint ghost trail dots */
.skull-ghost {
  position:fixed; z-index:99990; pointer-events:none;
  width:6px; height:6px; border-radius:50%;
  background:var(--neon-green); opacity:0;
  transform:translate(-50%,-50%);
  animation:ghost-fade .5s ease forwards;
}
@keyframes ghost-fade {
  0%  { opacity:.5; transform:translate(-50%,-50%) scale(1); }
  100%{ opacity:0;  transform:translate(-50%,-50%) scale(.2); }
}

/* ══════════════════════════════════════════════════════════
   GLITCH RAIN on horror splash
   ══════════════════════════════════════════════════════════ */
#glitch-rain-canvas {
  position:absolute; inset:0;
  width:100%; height:100%;
  opacity:0.18; pointer-events:none; z-index:1;
}

/* ══════════════════════════════════════════════════════════
   VISITOR FLAG MAP
   ══════════════════════════════════════════════════════════ */
#flag-map-panel {
  border:1px solid var(--neon-blue);
  background:var(--dark-panel);
  margin-bottom:8px;
}
#flag-map-panel .panel-title { background:var(--neon-blue); }

#flag-world {
  width:100%; height:130px;
  background:#000d1a;
  position:relative; overflow:hidden;
}

/* Simplified SVG world silhouette bg */
#flag-world::before {
  content:'';
  position:absolute; inset:0;
  background:
    radial-gradient(ellipse 30% 18% at 20% 50%, rgba(0,212,255,0.07) 0%, transparent 100%),
    radial-gradient(ellipse 20% 15% at 55% 45%, rgba(0,212,255,0.07) 0%, transparent 100%),
    radial-gradient(ellipse 10% 18% at 75% 42%, rgba(0,212,255,0.07) 0%, transparent 100%),
    radial-gradient(ellipse 8%  12% at 88% 52%, rgba(0,212,255,0.07) 0%, transparent 100%);
}

.flag-dot {
  position:absolute;
  width:8px; height:8px; border-radius:50%;
  background:var(--neon-green);
  box-shadow:0 0 6px var(--neon-green), 0 0 12px var(--neon-green);
  transform:translate(-50%,-50%);
  animation:flag-pulse 2s ease-in-out infinite;
  cursor:default;
}
.flag-dot::after {
  content:attr(data-label);
  position:absolute; bottom:12px; left:50%;
  transform:translateX(-50%);
  background:#000; color:var(--neon-green);
  font-size:9px; font-family:'Share Tech Mono',monospace;
  letter-spacing:1px; padding:2px 5px; white-space:nowrap;
  border:1px solid var(--neon-green); opacity:0;
  transition:opacity .2s; pointer-events:none;
}
.flag-dot:hover::after { opacity:1; }
.flag-dot.you { background:var(--neon-yellow); box-shadow:0 0 8px var(--neon-yellow),0 0 16px var(--neon-yellow); animation-delay:.3s; }
.flag-dot.you::after { color:var(--neon-yellow); border-color:var(--neon-yellow); }

@keyframes flag-pulse {
  0%,100%{ transform:translate(-50%,-50%) scale(1); opacity:1; }
  50%    { transform:translate(-50%,-50%) scale(1.5); opacity:.7; }
}

#flag-log {
  padding:6px 10px; max-height:90px; overflow-y:auto;
  scrollbar-width:thin; scrollbar-color:var(--neon-blue) #000;
  font-size:11px; border-top:1px solid rgba(0,212,255,0.2);
}
.flag-entry {
  display:flex; gap:8px; align-items:center;
  padding:2px 0; border-bottom:1px dotted rgba(0,212,255,0.1);
  color:#aaa;
}
.flag-entry:last-child { border-bottom:none; }
.flag-entry .fe-flag { font-size:14px; }
.flag-entry .fe-country { color:var(--neon-blue); min-width:90px; }
.flag-entry .fe-time { color:#333; margin-left:auto; white-space:nowrap; }

/* ══════════════════════════════════════════════════════════
   SOUND EFFECT VISUAL FEEDBACK
   ══════════════════════════════════════════════════════════ */
.sfx-ripple {
  position:fixed; z-index:88000; pointer-events:none;
  width:20px; height:20px; border-radius:50%;
  border:2px solid var(--neon-green);
  transform:translate(-50%,-50%) scale(1);
  animation:sfx-expand .4s ease-out forwards;
}
@keyframes sfx-expand {
  0%  { transform:translate(-50%,-50%) scale(0.5); opacity:.8; }
  100%{ transform:translate(-50%,-50%) scale(3);   opacity:0; }
}

/* ══════════════════════════════════════════════════════════
   MOBILE OVERHAUL  — full responsive rewrite
   ══════════════════════════════════════════════════════════ */
@media (max-width:700px) {
  /* Layout */
  .main-grid { grid-template-columns:1fr; }
  #wrapper   { padding:6px; }

  /* Header */
  .glitch { font-size:clamp(1.6rem,8vw,2.8rem); letter-spacing:2px; }
  .header-subtitle { font-size:.6rem; letter-spacing:3px; }
  header { padding:10px 8px; }
  header::before { font-size:9px; top:-10px; }

  /* Nav — horizontal scroll */
  nav {
    overflow-x:auto; flex-wrap:nowrap;
    gap:3px; padding-bottom:4px;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  nav::-webkit-scrollbar { display:none; }
  nav a { font-size:11px; padding:5px 10px; letter-spacing:1px; white-space:nowrap; flex-shrink:0; }

  /* Music player — smaller on mobile */
  #music-player { min-width:0; right:6px; bottom:6px; padding:5px 8px; gap:6px; }
  #music-player .mp-title { display:none; }
  #music-player .mp-eq    { display:none; }

  /* Chat */
  .chat-messages { height:160px; }

  /* Panels */
  .panel-title { font-size:.6rem; letter-spacing:2px; }

  /* Visitor counter */
  .digit { width:26px; font-size:1.8rem; }

  /* Stat grid */
  .stat-cell .val { font-size:1.5rem; }

  /* Guestbook form */
  .guest-form input, .guest-form textarea { font-size:14px; }

  /* Music archive form */
  #music-archive > div > div[style*="grid"] { grid-template-columns:1fr !important; }

  /* Status bar */
  .status-bar { gap:10px; font-size:10px; flex-wrap:wrap; }

  /* Splash */
  .splash-title { font-size:clamp(2rem,10vw,3.5rem); }
  .splash-frame { padding:16px 12px 14px; }
  .splash-warning { font-size:10px; }
  .splash-enter { font-size:1.2rem; padding:8px 24px; }
  .comic-burst  { display:none; }

  /* Boot */
  #boot-content { padding:20px 12px; }
  .boot-line    { font-size:11px; }

  /* Arcade cabinet */
  #arcade-cabinet { width:98vw; }
  .game-canvas, #canvas-snake, #canvas-pong, #canvas-breakout, #canvas-invaders {
    height:220px !important;
  }
  #canvas-typing { height:260px !important; }
  .game-tab { font-size:9px; padding:5px 3px; }
  #cabinet-deck { padding:8px 10px; flex-wrap:wrap; gap:6px; }

  /* Safe mode toggle */
  #safe-mode-toggle { top:auto; bottom:52px; right:6px; font-size:9px; padding:4px 8px; }

  /* Flag map */
  #flag-world { height:100px; }
}

@media (max-width:400px) {
  .glitch { font-size:1.4rem; }
  nav a   { font-size:10px; padding:4px 8px; }
}