/* ============================================================
   style.css — seekorv.xyz
   This file controls HOW everything LOOKS.
   HTML is the skeleton, CSS is the skin & clothes!
   ============================================================ */


/* ---- CSS VARIABLES (like a colour palette you define once) ----
   Instead of typing #050d1a everywhere, you just write var(--bg)
   Change it here once and it updates everywhere on the site! */
:root {
  --bg:      #050d1a;               /* main dark navy background */
  --panel:   rgba(8, 20, 50, 0.75); /* semi-transparent card background */
  --border:  rgba(60, 120, 255, 0.25); /* subtle blue border on cards */
  --accent:  #3b82f6;               /* main blue colour */
  --accent2: #60efff;               /* bright cyan/teal accent */
  --gold:    #fbbf24;               /* gold for your name */
  --green:   #4ade80;               /* green for "learning" badges */
  --red:     #f87171;               /* red for mod commands */
  --purple:  #a78bfa;               /* purple for fun commands */
  --text:    #c8d8ff;               /* main text colour (light blue-white) */
  --dim:     #7090c0;               /* dimmer text for subtitles */

  /* font variables — we load these from Google Fonts in the HTML */
  --pixel: 'Press Start 2P', monospace; /* chunky pixel font for headings */
  --vt:    'VT323', monospace;          /* retro terminal font for body text */
}


/* ---- RESET ----
   Browsers add their own default margins/padding which causes
   inconsistencies. This zeros everything out so we start fresh. */
*, *::before, *::after {
  box-sizing: border-box; /* padding gets included in width calculations */
  margin: 0;
  padding: 0;
}

/* smooth scrolling when clicking anchor links */
html { scroll-behavior: smooth; }


/* ---- BODY ----
   The outermost wrapper. Sets background, text colour,
   font, and prevents horizontal scrolling. */
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--vt);
  min-height: 100vh; /* at least as tall as the screen */
  overflow-x: hidden; /* hide any accidental horizontal overflow */
}

/* custom cursor — cursor.png is 32x32px, hotspot at centre (16,16) */
* { cursor: url('cursor.png') 16 16, auto; }
a, button { cursor: url('cursor.png') 16 16, pointer; }


/* ============================================================
   BACKGROUND EFFECTS
   These use position:fixed so they stay put while you scroll
   ============================================================ */

/* The starfield — uses layered radial-gradients to fake stars.
   Each radial-gradient(1px 1px at X% Y%, white ...) = one star dot! */
.stars-bg {
  position: fixed; /* stays in place even when scrolling */
  inset: 0;        /* shorthand for top:0; right:0; bottom:0; left:0 */
  z-index: 0;      /* sits behind everything else */
  background:
    radial-gradient(ellipse at 20% 50%, rgba(20,40,120,0.4) 0%, transparent 60%),
    radial-gradient(ellipse at 80% 20%, rgba(10,30,100,0.3) 0%, transparent 50%),
    linear-gradient(180deg, #050d1a 0%, #081428 50%, #050d1a 100%);
}

/* ::before and ::after are "pseudo-elements" — free extra elements
   you can style without adding HTML. Great for decorative layers! */
.stars-bg::before, .stars-bg::after {
  content: ''; /* required for pseudo-elements to appear */
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 10% 15%, white 0%, transparent 100%),
    radial-gradient(1px 1px at 30% 45%, rgba(255,255,255,0.7) 0%, transparent 100%),
    radial-gradient(1px 1px at 55% 25%, white 0%, transparent 100%),
    radial-gradient(1px 1px at 75% 60%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(1px 1px at 90% 10%, white 0%, transparent 100%),
    radial-gradient(1px 1px at 15% 80%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 40% 70%, white 0%, transparent 100%),
    radial-gradient(1px 1px at 65% 90%, rgba(255,255,255,0.4) 0%, transparent 100%),
    radial-gradient(2px 2px at 85% 35%, rgba(100,180,255,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 50% 55%, white 0%, transparent 100%),
    radial-gradient(1px 1px at 25% 35%, rgba(255,255,255,0.5) 0%, transparent 100%),
    radial-gradient(2px 2px at 70% 15%, rgba(180,220,255,0.9) 0%, transparent 100%);
}

/* the ::after layer animates to create a twinkling effect */
.stars-bg::after {
  animation: twinkle 4s ease-in-out infinite alternate;
  background-image:
    radial-gradient(1px 1px at 20% 20%, rgba(255,255,255,0.8) 0%, transparent 100%),
    radial-gradient(1px 1px at 45% 55%, white 0%, transparent 100%),
    radial-gradient(1px 1px at 80% 45%, rgba(255,255,255,0.6) 0%, transparent 100%),
    radial-gradient(1px 1px at 35% 85%, white 0%, transparent 100%),
    radial-gradient(2px 2px at 60% 5%,  rgba(160,210,255,0.9) 0%, transparent 100%),
    radial-gradient(1px 1px at 95% 75%, rgba(255,255,255,0.5) 0%, transparent 100%);
}

/* @keyframes defines an animation.
   "alternate" means it plays forward then backward, looping. */
@keyframes twinkle {
  from { opacity: 0.6; }
  to   { opacity: 1; }
}

/* Tree silhouette along the bottom edge */
.trees {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  height: 220px;
  z-index: 1; /* just above the stars */
  background: linear-gradient(to top, #010814 30%, transparent 100%);
  pointer-events: none; /* clicks pass straight through this element */
}

/* SVG tree shapes as a background-image — the SVG is encoded in the URL */
.trees::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0; height: 180px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 180'%3E%3Cpath fill='%23010814' d='M0,180 L0,120 L30,120 L30,80 L50,80 L50,40 L70,40 L70,80 L90,80 L90,100 L110,100 L110,60 L130,60 L130,30 L150,30 L150,60 L170,60 L170,90 L200,90 L200,120 L220,120 L220,70 L240,70 L240,40 L260,40 L260,10 L280,10 L280,40 L300,40 L300,70 L320,70 L320,100 L360,100 L360,120 L380,120 L380,60 L400,60 L400,25 L420,25 L420,60 L440,60 L440,90 L460,90 L460,110 L500,110 L500,70 L520,70 L520,35 L540,35 L540,10 L560,10 L560,35 L580,35 L580,70 L600,70 L600,100 L640,100 L640,120 L670,120 L670,75 L690,75 L690,45 L710,45 L710,20 L730,20 L730,45 L750,45 L750,75 L780,75 L780,110 L810,110 L810,65 L830,65 L830,30 L850,30 L850,5 L870,5 L870,30 L890,30 L890,65 L920,65 L920,100 L950,100 L950,120 L980,120 L980,80 L1000,80 L1000,50 L1020,50 L1020,25 L1040,25 L1040,50 L1060,50 L1060,80 L1090,80 L1090,110 L1120,110 L1120,70 L1140,70 L1140,40 L1160,40 L1160,70 L1180,70 L1180,100 L1220,100 L1220,120 L1260,120 L1260,75 L1280,75 L1280,45 L1300,45 L1300,20 L1320,20 L1320,45 L1340,45 L1340,75 L1370,75 L1370,110 L1440,110 L1440,180 Z'/%3E%3C/svg%3E") no-repeat bottom;
  background-size: cover;
}

/* CRT scanline effect */
.scanlines {
  position: fixed;
  inset: 0;
  z-index: 10;
  pointer-events: none;
  background: repeating-linear-gradient(
    0deg,
    transparent,
    transparent 2px,
    rgba(0, 0, 0, 0.04) 2px,
    rgba(0, 0, 0, 0.04) 4px
  );
}

/* CRT canvas — pixel grid + scanlines + vignette + flicker */
#crt-canvas {
  position: fixed;
  inset: 0;
  width: 100%; height: 100%;
  z-index: 9;
  pointer-events: none;
  image-rendering: pixelated;
}

/* CURSOR RIPPLE — expands and fades on click */
#cursor-ripple {
  position: fixed;
  width: 60px; height: 60px;
  border: 2px solid rgba(96, 239, 255, 0.7);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  transition: none;
}
#cursor-ripple.ripple-active {
  animation: cursor-ripple-anim 0.6s ease-out forwards;
}
@keyframes cursor-ripple-anim {
  0%   { transform: translate(-50%, -50%) scale(0);   opacity: 0.9; }
  100% { transform: translate(-50%, -50%) scale(2.5); opacity: 0; }
}

/* floating crosshair follower — always trails cursor */
#cursor-glow {
  position: fixed;
  width: 24px; height: 24px;
  border: 1px solid rgba(96, 239, 255, 0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  box-shadow: 0 0 8px rgba(96,239,255,0.3), inset 0 0 4px rgba(96,239,255,0.1);
  transition: width 0.15s, height 0.15s, opacity 0.15s;
  mix-blend-mode: screen;
}


/* ============================================================
   LAYOUT
   ============================================================ */

/* .container is the centred column that holds all page content.
   max-width stops it getting too wide on big screens.
   margin: 0 auto centres it horizontally. */
.container {
  position: relative;
  z-index: 2; /* sits above the fixed background layers */
  max-width: 960px;
  margin: 0 auto;
  padding: 40px 20px 200px; /* extra bottom padding so trees don't cover content */
}


/* ============================================================
   NAVIGATION
   ============================================================ */

nav {
  display: flex;                  /* puts children side by side */
  align-items: center;            /* vertically centres them */
  justify-content: space-between; /* logo left, links right */
  padding: 16px 0 32px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 60px;
}

.nav-logo {
  font-family: var(--pixel);
  font-size: 13px;
  color: var(--gold);
  text-shadow: 0 0 10px rgba(251,191,36,0.5); /* soft glow behind text */
  letter-spacing: 1px;
}

/* glitch effect on logo hover */
.nav-logo:hover {
  animation: glitch 0.3s steps(2) infinite;
}
@keyframes glitch {
  0%   { text-shadow:  2px  0   red,   -2px  0   cyan; }
  25%  { text-shadow: -2px  0   red,    2px  0   cyan; }
  50%  { text-shadow:  2px  2px red,   -2px -2px cyan; }
  75%  { text-shadow: -2px  2px red,    2px -2px cyan; }
  100% { text-shadow:  2px  0   red,   -2px  0   cyan; }
}

.nav-links {
  display: flex;
  gap: 24px; /* space between the links */
}

.nav-links a {
  font-family: var(--pixel);
  font-size: 8px;
  color: var(--dim);
  text-decoration: none;         /* removes the default underline */
  transition: color 0.2s;        /* smoothly fades colour on hover */
  letter-spacing: 0.5px;
}

/* :hover applies styles only when the mouse is over the element */
.nav-links a:hover,
.nav-links a.active { /* .active is added by JS to the current page link */
  color: var(--accent2);
  text-shadow: 0 0 8px var(--accent2);
}


/* ============================================================
   SHARED ANIMATION
   Used by many elements — they fade up when the page loads
   ============================================================ */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px); /* starts 20px lower */
  }
  to {
    opacity: 1;
    transform: translateY(0);    /* ends at normal position */
  }
}

/* "both" means the animation-fill-mode applies before AND after */
.hero-card    { animation: fadeInUp 0.6s 0.0s ease both; }
.connected-card { animation: fadeInUp 0.6s 0.15s ease both; }
.socials      { animation: fadeInUp 0.6s 0.25s ease both; }
.stats-row    { animation: fadeInUp 0.6s 0.30s ease both; }
.now-playing  { animation: fadeInUp 0.6s 0.40s ease both; }
.section      { animation: fadeInUp 0.6s 0.50s ease both; }
.cta-row      { animation: fadeInUp 0.6s 0.70s ease both; }
.bot-hero     { animation: fadeInUp 0.6s 0.00s ease both; }
.stats-panel  { animation: fadeInUp 0.6s 0.20s ease both; }
.bottom-cta   { animation: fadeInUp 0.6s 0.60s ease both; }


/* ============================================================
   CARDS — shared panel style
   ============================================================ */

/* The main profile card */
.hero-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 32px;
  margin-bottom: 40px;
  backdrop-filter: blur(12px); /* blurs whatever is behind the card */
  position: relative;
  overflow: hidden; /* clips the gradient bar so it stays inside */
}

/* top colour bar — uses a pseudo-element so no extra HTML needed */
.hero-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent2), transparent);
}

/* flex row for avatar + info side by side */
.hero-top {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  flex-wrap: wrap; /* wraps to a column on small screens */
}

/* wrapper around avatar image so we can position the ring on top */
.avatar-wrap {
  position: relative;
  flex-shrink: 0; /* stops the avatar squishing when space is tight */
  width: 100px;
  height: 100px;
}

.avatar-wrap img {
  width: 100px;
  height: 100px;
  border-radius: 50%;            /* makes it a circle */
  border: 3px solid var(--accent);
  display: block;
  image-rendering: pixelated;   /* keeps pixel art crisp instead of blurry */
}

/* spinning ring around the avatar */
.avatar-ring {
  position: absolute;
  inset: -6px; /* slightly outside the image */
  border-radius: 50%;
  border: 2px solid transparent;        /* all sides transparent... */
  border-top-color: var(--accent2);     /* ...except top */
  border-right-color: var(--accent2);   /* ...and right — creates a spinner arc */
  animation: spin 3s linear infinite;
}

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

.hero-info {
  flex: 1;         /* takes up remaining space after the avatar */
  min-width: 200px;
}

.hero-name {
  font-family: var(--pixel);
  font-size: 20px;
  color: var(--text);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.badge {
  display: inline-block;
  width: 20px; height: 20px;
  font-size: 14px;
  line-height: 20px;
  text-align: center;
}

/* language logo badges (Python + JS SVGs next to the name) */
.lang-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 6px;
  transition: transform 0.2s;
}
.lang-badge:hover { transform: translateY(-2px) scale(1.1); }

/* seekorv name in the requested orange colour */
.seekorv-name {
  color: #FF9933;
  font-family: 'Minecraft', var(--pixel);
  text-shadow: 0 0 15px rgba(255,153,51,0.6), 2px 2px 0 rgba(0,0,0,0.5);
}

/* hero bio in Minecraft font */
.hero-bio {
  font-family: 'Minecraft', var(--pixel);
  font-size: 11px;
  color: #519563;
  line-height: 2.2;
  margin-bottom: 12px;
  max-width: 500px;
  text-shadow: 0 0 8px rgba(81,149,99,0.4);
  min-height: 2em; /* reserves space so layout doesn't jump */
}

/* blinking typewriter cursor */
.tw-cursor {
  color: #519563;
  animation: tw-blink 0.7s step-start infinite;
  font-size: 13px;
  vertical-align: middle;
}
@keyframes tw-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

/* ??? nav link — glitches on hover */
.nav-unknown {
  color: #FF9933 !important;
  text-shadow: 0 0 8px rgba(255,153,51,0.5);
}
.nav-unknown:hover {
  animation: glitch-unknown 0.3s steps(2) infinite !important;
  text-shadow: none !important;
}
@keyframes glitch-unknown {
  0%   { text-shadow:  2px 0 red, -2px 0 cyan; color: #FF9933; }
  25%  { text-shadow: -2px 0 red,  2px 0 cyan; color: #ffbb66; }
  50%  { text-shadow:  2px 2px red, -2px -2px cyan; color: #FF9933; }
  75%  { text-shadow: -2px 2px red,  2px -2px cyan; color: #ffbb66; }
  100% { text-shadow:  2px 0 red, -2px 0 cyan; color: #FF9933; }
}

.hero-meta {
  font-family: var(--vt);
  font-size: 18px;
  color: var(--dim);
}


/* ============================================================
   CONNECTED ACCOUNT CARD
   ============================================================ */
.connected-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: 20px;
}

.conn-avatar img {
  width: 48px; height: 48px;
  border-radius: 50%;
  border: 2px solid rgba(60,120,255,0.4);
}

.conn-info { flex: 1; }

.conn-name {
  font-family: var(--pixel);
  font-size: 9px;
  color: var(--text);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* small coloured label chips */
.conn-tag {
  font-size: 7px;
  padding: 2px 5px;
  background: rgba(74,222,128,0.15);
  color: var(--green);
  border: 1px solid rgba(74,222,128,0.3);
  border-radius: 3px;
}
.conn-tag.blue {
  background: rgba(59,130,246,0.15);
  color: #60a5fa;
  border-color: rgba(59,130,246,0.3);
}

.conn-status {
  font-family: var(--vt);
  font-size: 16px;
  color: var(--dim);
}


/* ============================================================
   SOCIAL ICON BUTTONS
   ============================================================ */
.socials {
  display: flex;
  gap: 14px;
  justify-content: center;
  padding: 24px 0 16px;
}

.social-btn {
  width: 44px; height: 44px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  color: var(--dim);
  /* transition applies to ALL changing properties smoothly */
  transition: all 0.2s;
}

.social-btn:hover {
  background: rgba(59,130,246,0.15);
  border-color: var(--accent);
  color: white;
  transform: translateY(-3px); /* lifts up on hover */
  box-shadow: 0 6px 20px rgba(59,130,246,0.3);
}

.social-btn svg {
  width: 22px; height: 22px;
  fill: currentColor; /* SVG inherits the text colour from parent */
}


/* ============================================================
   STATS ROW (views, location, role)
   ============================================================ */
.stats-row {
  display: flex;
  align-items: center;
  gap: 24px;
  justify-content: center;
  font-family: var(--pixel);
  font-size: 8px;
  color: var(--dim);
  border-top: 1px solid var(--border);
  padding-top: 16px;
}

.stat-item {
  display: flex;
  align-items: center;
  gap: 6px;
}

.stat-item span { color: var(--text); }


/* ============================================================
   NOW PLAYING MUSIC PLAYER
   ============================================================ */
.now-playing {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 40px;
  backdrop-filter: blur(12px);
}

.np-icon {
  width: 52px; height: 52px;
  background: rgba(59,130,246,0.15);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}

.np-info { flex: 1; }

.np-title {
  font-family: var(--pixel);
  font-size: 9px;
  color: var(--text);
  margin-bottom: 8px;
}

.np-bar-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--vt);
  font-size: 16px;
  color: var(--dim);
}

/* the grey track behind the progress */
.np-bar {
  flex: 1;
  height: 3px;
  background: rgba(255,255,255,0.1);
  border-radius: 2px;
  position: relative;
  cursor: pointer;
}

/* the coloured fill that moves as the song plays */
.np-progress {
  height: 100%;
  width: 5%; /* JS updates this value */
  background: linear-gradient(90deg, var(--accent), var(--accent2));
  border-radius: 2px;
  transition: width 0.5s linear;
  position: relative;
}

/* the little white dot at the end of the progress bar */
.np-progress::after {
  content: '';
  position: absolute;
  right: -4px; top: -3px;
  width: 8px; height: 8px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 0 6px var(--accent2);
}

.np-controls {
  display: flex;
  gap: 10px;
  align-items: center;
  font-size: 18px;
  color: var(--dim);
}
.np-controls span:hover { color: var(--accent2); }


/* ============================================================
   SECTION HEADINGS
   ============================================================ */
.section { margin-bottom: 40px; }

.section-label {
  font-family: var(--pixel);
  font-size: 9px;
  color: var(--accent2);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* decorative line after the heading text */
.section-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--border), transparent);
}


/* ============================================================
   SKILLS TAGS
   ============================================================ */
.skills-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.skill-tag {
  font-family: var(--pixel);
  font-size: 8px;
  padding: 8px 14px;
  background: rgba(59,130,246,0.08);
  border: 1px solid rgba(59,130,246,0.25);
  border-radius: 4px;
  color: var(--text);
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 7px;
}

.skill-tag:hover {
  background: rgba(59,130,246,0.2);
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: 0 4px 15px rgba(59,130,246,0.2);
}

/* the coloured dot inside each skill tag */
.dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent2);
  flex-shrink: 0;
}
.skill-tag.mastered .dot { background: var(--gold); }
.skill-tag.learning  .dot {
  background: var(--green);
  animation: pulse 2s ease infinite; /* pulsing dot for "still learning" */
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}


/* ============================================================
   PROJECT CARDS
   ============================================================ */
.projects-grid {
  display: grid;
  /* auto-fit: fills as many columns as fit; minmax sets min/max width */
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}

.project-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  backdrop-filter: blur(8px);
  transition: all 0.25s;
  position: relative;
  overflow: hidden;
}

/* subtle gradient overlay that appears on hover */
.project-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(59,130,246,0.05) 0%, transparent 60%);
  opacity: 0;
  transition: opacity 0.25s;
}

.project-card:hover {
  border-color: rgba(59,130,246,0.5);
  transform: translateY(-4px);
  box-shadow: 0 12px 40px rgba(0,0,0,0.4), 0 0 20px rgba(59,130,246,0.1);
}

.project-card:hover::before { opacity: 1; }

.project-icon { font-size: 28px; margin-bottom: 12px; }

.project-name {
  font-family: var(--pixel);
  font-size: 10px;
  color: var(--text);
  margin-bottom: 8px;
}

.project-desc {
  font-family: var(--vt);
  font-size: 18px;
  color: var(--dim);
  line-height: 1.5;
  margin-bottom: 14px;
}

.project-tags { display: flex; gap: 6px; flex-wrap: wrap; }

.project-tag {
  font-family: var(--pixel);
  font-size: 7px;
  padding: 3px 7px;
  background: rgba(96,239,255,0.08);
  border: 1px solid rgba(96,239,255,0.2);
  border-radius: 3px;
  color: var(--accent2);
}

/* the ↗ arrow link in the top-right of each card */
.project-link {
  position: absolute;
  top: 14px; right: 14px;
  font-size: 14px;
  color: var(--dim);
  text-decoration: none;
  transition: color 0.2s;
}
.project-link:hover { color: var(--accent2); }


/* ============================================================
   CALL TO ACTION BUTTONS
   ============================================================ */
.cta-row {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  justify-content: center;
  padding: 20px 0;
}

/* base button style — shared by both variants */
.btn {
  font-family: var(--pixel);
  font-size: 9px;
  padding: 14px 24px;
  border-radius: 4px;
  border: none;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
  letter-spacing: 0.5px;
}

/* solid blue version */
.btn-primary {
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: white;
  box-shadow: 0 0 20px rgba(59,130,246,0.4);
}
.btn-primary:hover {
  box-shadow: 0 0 30px rgba(59,130,246,0.7);
  transform: translateY(-2px);
}

/* transparent/outline version */
.btn-outline {
  background: transparent;
  color: var(--accent2);
  border: 1px solid rgba(96,239,255,0.4);
}
.btn-outline:hover {
  background: rgba(96,239,255,0.08);
  transform: translateY(-2px);
}


/* ============================================================
   SEEKTOOLS PAGE — BOT HERO
   ============================================================ */
.bot-hero {
  text-align: center;
  padding: 60px 20px 50px;
  position: relative;
}

.bot-avatar {
  width: 100px; height: 100px;
  background: linear-gradient(135deg, #1a3a7a, #0a1e4a);
  border: 3px solid var(--accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  margin: 0 auto 24px;
  box-shadow: 0 0 40px rgba(59,130,246,0.4), 0 0 80px rgba(59,130,246,0.15);
  position: relative;
  animation: float 4s ease-in-out infinite;
}

/* gentle up-down floating animation */
@keyframes float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-10px); }
}

/* expanding ring that fades out — like a sonar pulse */
.bot-avatar::after {
  content: '';
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  border: 1px solid rgba(59,130,246,0.2);
  animation: ripple 2.5s ease-in-out infinite;
}
@keyframes ripple {
  0%   { transform: scale(1);   opacity: 0.6; }
  100% { transform: scale(1.4); opacity: 0; }
}

.bot-title {
  font-family: var(--pixel);
  font-size: 28px;
  color: var(--gold);
  margin-bottom: 12px;
  text-shadow: 0 0 20px rgba(251,191,36,0.5);
}

.bot-tagline {
  font-family: var(--pixel);
  font-size: 9px;
  color: var(--dim);
  margin-bottom: 30px;
  line-height: 2;
}

/* pill badges (● online, v2.0 stable, 100% free) */
.badge-row {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 36px;
}

.badge-pill {
  font-family: var(--pixel);
  font-size: 7px;
  padding: 6px 12px;
  border-radius: 99px; /* fully rounded */
  border: 1px solid;   /* colour set per variant below */
}

.badge-pill.online { background: rgba(74,222,128,0.1);  color: var(--green); border-color: rgba(74,222,128,0.3); }
.badge-pill.stable { background: rgba(59,130,246,0.1);  color: #60a5fa;      border-color: rgba(59,130,246,0.3); }
.badge-pill.free   { background: rgba(251,191,36,0.1);  color: var(--gold);  border-color: rgba(251,191,36,0.3); }


/* ---- Invite / Server buttons ---- */
.invite-btn {
  font-family: var(--pixel);
  font-size: 11px;
  padding: 18px 36px;
  background: linear-gradient(135deg, #3b82f6, #1d4ed8);
  color: white;
  border: none;
  border-radius: 6px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 0 30px rgba(59,130,246,0.5), 0 0 60px rgba(59,130,246,0.2);
  transition: all 0.25s;
  position: relative;
  overflow: hidden;
  margin-right: 12px;
}

/* sheen/glare that sweeps across on hover */
.invite-btn::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: linear-gradient(45deg, transparent 40%, rgba(255,255,255,0.1) 50%, transparent 60%);
  transform: translateX(-100%);
}

.invite-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 40px rgba(59,130,246,0.7), 0 0 80px rgba(59,130,246,0.3);
}
.invite-btn:hover::before { animation: shine 0.5s ease; }

@keyframes shine {
  to { transform: translateX(100%); }
}

.server-btn {
  font-family: var(--pixel);
  font-size: 11px;
  padding: 18px 36px;
  background: transparent;
  color: var(--accent2);
  border: 1px solid rgba(96,239,255,0.4);
  border-radius: 6px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  transition: all 0.25s;
}
.server-btn:hover {
  background: rgba(96,239,255,0.08);
  transform: translateY(-3px);
  box-shadow: 0 0 20px rgba(96,239,255,0.2);
}


/* ============================================================
   SEEKTOOLS — STATS PANEL (server count, users, commands)
   ============================================================ */
.stats-panel {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin-bottom: 50px;
}

.stat-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  text-align: center;
  backdrop-filter: blur(10px);
  transition: all 0.25s;
}
.stat-card:hover {
  border-color: rgba(59,130,246,0.5);
  transform: translateY(-4px);
}

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

.stat-lbl {
  font-family: var(--vt);
  font-size: 18px;
  color: var(--dim);
}


/* ============================================================
   SEEKTOOLS — FEATURE CARDS
   ============================================================ */
.features-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(270px, 1fr));
  gap: 14px;
}

.feature-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 22px;
  backdrop-filter: blur(8px);
  transition: all 0.25s;
  position: relative;
  overflow: hidden;
}

.feature-card::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent, rgba(59,130,246,0.04));
  opacity: 0;
  transition: opacity 0.25s;
}

.feature-card:hover {
  border-color: rgba(59,130,246,0.5);
  transform: translateY(-4px);
  box-shadow: 0 8px 30px rgba(0,0,0,0.3);
}
.feature-card:hover::before { opacity: 1; }

/* colour-coded hover shadows per category */
.feature-card.mod:hover { border-color: rgba(248,113,113,0.5); box-shadow: 0 8px 30px rgba(248,113,113,0.1); }
.feature-card.fun:hover { border-color: rgba(167,139,250,0.5); box-shadow: 0 8px 30px rgba(167,139,250,0.1); }
.feature-card.util:hover{ border-color: rgba(74,222,128,0.5);  box-shadow: 0 8px 30px rgba(74,222,128,0.1);  }

.feat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.feat-icon {
  width: 40px; height: 40px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  flex-shrink: 0;
}

.feat-name {
  font-family: var(--pixel);
  font-size: 9px;
  color: var(--text);
}

/* small category label under the feature name */
.feat-cat {
  font-family: var(--pixel);
  font-size: 6px;
  padding: 2px 6px;
  border-radius: 3px;
  margin-top: 3px;
  display: block;
}
.cat-mod  { background: rgba(248,113,113,0.15); color: var(--red);    }
.cat-fun  { background: rgba(167,139,250,0.15); color: var(--purple); }
.cat-util { background: rgba(74,222,128,0.15);  color: var(--green);  }
.cat-info { background: rgba(59,130,246,0.15);  color: #60a5fa;       }

.feat-desc {
  font-family: var(--vt);
  font-size: 18px;
  color: var(--dim);
  line-height: 1.5;
  margin-bottom: 12px;
}

/* command chip list inside feature cards */
.feat-cmds { display: flex; flex-wrap: wrap; gap: 5px; }

.cmd {
  font-family: var(--pixel);
  font-size: 7px;
  padding: 3px 7px;
  background: rgba(0,0,0,0.3);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 3px;
  color: var(--accent2);
}


/* ============================================================
   SEEKTOOLS — COMMANDS TABLE
   ============================================================ */
.cmd-table {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  backdrop-filter: blur(10px);
}

/* header row — 4-column grid */
.cmd-table-header {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr 80px;
  padding: 12px 18px;
  background: rgba(59,130,246,0.08);
  border-bottom: 1px solid var(--border);
  font-family: var(--pixel);
  font-size: 7px;
  color: var(--dim);
  letter-spacing: 1px;
}

/* each data row matches the same 4-column grid as the header */
.cmd-row {
  display: grid;
  grid-template-columns: 1fr 1fr 2fr 80px;
  padding: 12px 18px;
  border-bottom: 1px solid rgba(60,120,255,0.08);
  transition: background 0.15s;
  align-items: center;
}
.cmd-row:last-child { border-bottom: none; }
.cmd-row:hover { background: rgba(59,130,246,0.06); }

.cmd-name-cell { font-family: var(--pixel); font-size: 8px; color: var(--accent2); }
.cmd-cat-cell  { font-family: var(--pixel); font-size: 7px; }
.cmd-desc-cell { font-family: var(--vt);    font-size: 17px; color: var(--dim); }

/* permission badges in the last column */
.cmd-perm {
  font-family: var(--pixel);
  font-size: 6px;
  padding: 2px 6px;
  border-radius: 3px;
  text-align: center;
  width: fit-content;
}
.perm-all   { background: rgba(74,222,128,0.15); color: var(--green); }
.perm-mod   { background: rgba(248,113,113,0.15); color: var(--red);  }
.perm-admin { background: rgba(251,191,36,0.15);  color: var(--gold); }


/* ============================================================
   SEEKTOOLS — BOTTOM CTA PANEL
   ============================================================ */
.bottom-cta {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 40px;
  text-align: center;
  backdrop-filter: blur(10px);
  position: relative;
  overflow: hidden;
  margin-top: 40px;
}

.bottom-cta::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), var(--accent2), transparent);
}

.cta-title {
  font-family: var(--pixel);
  font-size: 14px;
  color: var(--gold);
  margin-bottom: 12px;
}

.cta-sub {
  font-family: var(--vt);
  font-size: 20px;
  color: var(--dim);
  margin-bottom: 28px;
}

.cta-btns {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
}


/* ============================================================
   RESPONSIVE — adjustments for small screens (phones)
   @media queries only apply these rules below a certain width
   ============================================================ */
@media (max-width: 600px) {
  .hero-name { font-size: 14px; }
  .hero-bio  { font-size: 7px; }
  .bot-title { font-size: 18px; }

  .cmd-table-header,
  .cmd-row { grid-template-columns: 1fr 1fr; }
  .cmd-desc-cell,
  .cmd-perm { display: none; }

  nav { flex-direction: column; gap: 16px; }
}


/* ============================================================
   VOLUME BAR — fixed bottom-right corner
   ============================================================ */

.volume-widget {
  position: fixed;
  bottom: 28px;
  right: 28px;
  z-index: 100;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* the vertical track (the grey background bar) */
.vol-bar-track {
  width: 6px;
  height: 80px;
  background: rgba(255,255,255,0.08);
  border: 1px solid var(--border);
  border-radius: 4px;
  position: relative;
  cursor: ns-resize; /* up-down arrow shows it's draggable */
  backdrop-filter: blur(8px);
  user-select: none; /* prevents text selection while dragging */
}

/* the coloured fill inside the track — height set by JS */
.vol-bar-fill {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 30%; /* matches default 30% volume */
  background: linear-gradient(to top, var(--accent), var(--accent2));
  border-radius: 4px;
  transition: height 0.05s linear;
  box-shadow: 0 0 8px rgba(96,239,255,0.4);
}

/* speaker icon button below the bar */
.vol-speaker {
  width: 32px; height: 32px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  color: var(--dim);
  backdrop-filter: blur(8px);
  transition: all 0.2s;
  padding: 0;
}

.vol-speaker:hover {
  border-color: var(--accent);
  color: var(--accent2);
  box-shadow: 0 0 12px rgba(59,130,246,0.4);
}

/* when muted, tint the speaker red */
.vol-speaker.muted {
  border-color: rgba(248,113,113,0.5);
  color: #f87171;
  box-shadow: 0 0 10px rgba(248,113,113,0.3);
}