:root {
  --bg-dark:#050505;--bg-darker:#020202;--bg-card:#0d0d0d;
  --border-color:#1a1a1a;--border-light:#2a2a2a;
  --text-primary:#e0e0e0;--text-secondary:#888888;
  --accent-primary:#ffffff;--accent-orange:#ff6b35;
  --accent-modrinth:#1bd96a;
  --accent-fabric:#dacda1;--accent-forge:#6a3b1f;--accent-quilt:#9c5fdd;
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  background-color:var(--bg-dark);
  background-image:url('https://www.transparenttextures.com/patterns/stardust.png');
  background-attachment:fixed;color:var(--text-primary);
  font-family:'Segoe UI',system-ui,sans-serif;
  margin:0;min-height:100vh;overflow-x:hidden;line-height:1.6;
}
a{color:inherit;}
code{font-family:'Courier New',monospace;}

/* SITE NAV */
.site-nav{
  position:sticky;top:0;z-index:1000;
  background:rgba(5,5,5,.85);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--border-color);
  padding:14px 20px;display:flex;align-items:center;
  justify-content:space-between;gap:20px;flex-wrap:wrap;
}
.site-nav .brand{
  display:flex;align-items:center;gap:10px;
  text-decoration:none;color:var(--text-primary);
  font-weight:700;font-size:18px;letter-spacing:-.3px;
}
.site-nav .brand-mark{
  width:32px;height:32px;border-radius:6px;
  background:linear-gradient(135deg,var(--accent-orange),#3a1a0a);
  display:flex;align-items:center;justify-content:center;
  font-size:18px;color:#fff;
  box-shadow:inset 0 .0625em 0 0 #3a3a3a,0 .0625em 0 0 #252525,
    0 .125em 0 0 #202020,0 .2em .3em 0 #0a0a0a;
}
.site-nav .nav-links{display:flex;gap:4px;flex-wrap:wrap;}
.site-nav .nav-link{
  color:var(--text-secondary);text-decoration:none;
  font-size:14px;font-weight:600;padding:6px 12px;
  border-radius:6px;transition:color .2s,background .2s;
}
.site-nav .nav-link:hover{color:var(--text-primary);background:rgba(255,255,255,.04);}
.site-nav .nav-link.active{color:var(--accent-orange);}

.page-shell{max-width:1100px;margin:0 auto;padding:40px 20px;}

/* 3D BUTTONS */
.btn-3d{
  font:inherit;background-color:#2a2a2a;border:0;
  color:#e0e0e0;border-radius:6px;font-size:1rem;
  padding:.6em 1.2em;font-weight:600;
  text-shadow:0 .0625em 0 #000;
  box-shadow:inset 0 .0625em 0 0 #3a3a3a,
    0 .0625em 0 0 #252525,0 .125em 0 0 #202020,
    0 .25em 0 0 #1c1c1c,0 .3125em 0 0 #181818,
    0 .375em 0 0 #141414,0 .425em 0 0 #101010,
    0 .425em .5em 0 #0a0a0a;
  transition:.15s ease;cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
}
.btn-3d:active{translate:0 .225em;
  box-shadow:inset 0 .03em 0 0 #3a3a3a,0 .03em 0 0 #252525,
    0 .0625em 0 0 #202020,0 .125em 0 0 #1c1c1c,
    0 .125em 0 0 #181818,0 .2em 0 0 #141414,
    0 .225em 0 0 #101010,0 .225em .375em 0 #0a0a0a;
}
.btn-3d.primary{
  background-color:#3a2418;
  box-shadow:inset 0 .0625em 0 0 #4a3020,0 .0625em 0 0 #352016,
    0 .125em 0 0 #2e1c12,0 .25em 0 0 #251810,0 .3125em 0 0 #1e140c,
    0 .375em 0 0 #170f08,0 .425em 0 0 #100b05,0 .425em .5em 0 #0a0a0a;
}
.btn-3d.primary:active{translate:0 .225em;}
.btn-3d.modrinth{
  background-color:#0f3d24;
  box-shadow:inset 0 .0625em 0 0 #1a5a38,0 .0625em 0 0 #0b331e,
    0 .125em 0 0 #082a18,0 .25em 0 0 #062012,0 .3125em 0 0 #05180d,
    0 .375em 0 0 #041008,0 .425em 0 0 #030804,0 .425em .5em 0 #0a0a0a;
}
.btn-3d.discord{
  background-color:#1a1d3a;
  box-shadow:inset 0 .0625em 0 0 #2a2d4a,0 .0625em 0 0 #15182e,
    0 .125em 0 0 #101222,0 .25em 0 0 #0d0f1c,0 .3125em 0 0 #0a0c16,
    0 .375em 0 0 #070910,0 .425em 0 0 #040508,0 .425em .5em 0 #0a0a0a;
}

/* PILL INPUTS */
.input{
  background:#0d0d0d;border:none;outline:none;
  padding:12px 20px;font-size:16px;border-radius:9999px;
  box-shadow:inset 2px 5px 10px rgb(5,5,5);color:#fff;
  width:100%;font-family:inherit;
}
textarea.input{border-radius:16px;padding:16px 20px;min-height:140px;resize:vertical;}
.input::placeholder{color:#555;}
.field{display:flex;flex-direction:column;gap:6px;}
.field label{
  font-size:12px;color:var(--text-secondary);
  text-transform:uppercase;letter-spacing:1px;font-weight:600;padding-left:8px;
}

/* CHIPS */
.chip-row{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;align-items:center;}
.chip{
  font-size:.8rem;padding:.4em .8em;border-radius:6px;font-weight:600;
  background-color:#2a2a2a;border:0;color:#e0e0e0;
  box-shadow:inset 0 .0625em 0 0 #3a3a3a,0 .0625em 0 0 #252525,
    0 .125em 0 0 #202020,0 .125em .3em 0 #0a0a0a;
  text-shadow:0 .0625em 0 #000;
  white-space:nowrap;transition:.15s ease;cursor:pointer;
  display:inline-flex;align-items:center;gap:5px;
}
.chip:active{translate:0 .1em;}
.chip.active{
  background-color:#1c1c1c;color:#fff;
  box-shadow:inset 0 .0625em 0 0 #3a3a3a,0 .0625em 0 0 #252525,
    0 .125em 0 0 #202020,0 .125em .3em 0 #3a3a3a;
}

/* BADGE ROW (shields.io) */
.badge-row{display:flex;flex-wrap:wrap;gap:6px;align-items:center;}
.badge-row img{
  height:28px;border-radius:4px;
  transition:transform .15s,filter .15s,box-shadow .15s;display:block;
}
.badge-row img:hover{transform:translateY(-2px);filter:brightness(1.15);box-shadow:0 4px 12px rgba(0,0,0,.6);}

/* PANELS */
.panel{
  background:var(--bg-card);border:1px solid var(--border-color);
  border-radius:16px;padding:32px;margin-bottom:30px;
  box-shadow:0 8px 24px rgba(0,0,0,.8);
}
.panel.tight{padding:22px;}
.section-title{
  display:flex;align-items:center;gap:12px;
  font-size:13px;text-transform:uppercase;letter-spacing:2px;
  color:var(--text-secondary);margin:0 0 12px;font-weight:600;
}
.section-title::before{
  content:"";display:inline-block;width:8px;height:8px;
  border-radius:50%;background:var(--accent-orange);
}
.section-headline{font-size:28px;margin:0 0 20px;letter-spacing:-.3px;color:#fff;}
.lead{color:var(--text-secondary);font-size:16px;margin:0 0 20px;}
.lead .accent{color:var(--accent-orange);font-weight:600;}
.subhead{
  font-size:14px;text-transform:uppercase;letter-spacing:1px;
  color:var(--text-secondary);margin:0 0 14px;font-weight:600;
}

/* RESULTS TABLE */
.results-table{width:100%;border-collapse:collapse;}
.results-table th{
  color:var(--text-secondary);font-size:12px;
  text-transform:uppercase;letter-spacing:.5px;
  text-align:left;padding:15px;
  border-bottom:1px solid var(--border-color);
  cursor:pointer;user-select:none;
}
.results-table th:hover{color:var(--text-primary);}
.results-table td{
  padding:18px 15px;border-bottom:1px solid var(--border-color);
  font-size:14px;color:var(--text-primary);vertical-align:middle;
}
.results-table tr{animation:fadeIn .3s ease;}
.results-table tr:hover td{background:rgba(255,107,53,.04);}
.results-table tr:last-child td{border-bottom:none;}
@keyframes fadeIn{from{opacity:0;transform:translateY(5px);}to{opacity:1;transform:translateY(0);}}
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;width:100%;}

/* PROJECT CARDS */
.project-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));}
.project-card{
  background:var(--bg-darker);border:1px solid var(--border-color);
  border-radius:12px;padding:20px;
  transition:transform .2s,border-color .2s;
  display:flex;flex-direction:column;gap:12px;
}
.project-card:hover{transform:translateY(-3px);border-color:var(--border-light);}
.project-card .mod-icon{
  width:56px;height:56px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:26px;font-weight:700;
  background:linear-gradient(135deg,#1a1a1a,#050505);
  border:1px solid var(--border-light);
}
.project-card h4{margin:0;font-size:16px;color:#fff;}
.project-card p{margin:0;color:var(--text-secondary);font-size:13px;flex:1;}
.project-card .meta{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap;}
.row-link{color:var(--text-secondary);text-decoration:none;font-weight:600;transition:color .15s;}
.row-link:hover{color:var(--accent-orange);}

/* PROJECT ART */
.project-art{width:100%;height:160px;border-radius:10px;object-fit:cover;display:block;background:var(--bg-darker);}
.project-card.with-art{padding:0;overflow:hidden;}
.project-card.with-art .art-wrap{position:relative;}
.project-card.with-art .logo-badge{
  position:absolute;bottom:-20px;right:16px;
  width:48px;height:48px;border-radius:10px;
  background:var(--bg-darker);border:2px solid var(--border-light);
  display:flex;align-items:center;justify-content:center;z-index:2;
}
.project-card.with-art .logo-badge img{width:26px;height:26px;border-radius:4px;}
.project-card.with-art .card-body{padding:28px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1;}
.project-card.with-art .card-body h4{margin:0 0 4px;}
.project-card.with-art .card-body p{margin:0 0 12px;}

/* BRAND LOGO CHIPS */
.brand-logo-row{display:flex;gap:8px;flex-wrap:wrap;align-items:center;}
.brand-logo-chip{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--bg-darker);border:1px solid var(--border-light);
  border-radius:8px;padding:5px 10px;font-size:12px;
  color:var(--text-primary);font-weight:600;
}
.brand-logo-chip img{width:16px;height:16px;}

/* LOADER PILLS */
.loader-pill{
  display:inline-block;padding:3px 10px;border-radius:9999px;
  background:#1a1a1a;border:1px solid var(--border-light);
  color:#c0c0c0;font-size:11px;font-weight:600;
  text-transform:uppercase;letter-spacing:.5px;
}
.loader-pill.fabric{color:var(--accent-fabric);border-color:rgba(218,205,161,.4);}
.loader-pill.forge{color:#d99b6e;border-color:rgba(217,155,110,.4);}
.loader-pill.quilt{color:var(--accent-quilt);border-color:rgba(156,95,221,.4);}
.loader-pill.modrinth{color:var(--accent-modrinth);border-color:rgba(27,217,106,.4);}

/* TWO-COL + STATS */
.two-col{display:grid;grid-template-columns:1.2fr 1fr;gap:30px;align-items:start;}
.quick-grid{display:grid;grid-template-columns:1.4fr 1fr;gap:20px;align-items:start;}
.stat-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;}
.stat-card{
  background:var(--bg-darker);border:1px solid var(--border-color);
  border-radius:10px;padding:18px;
}
.stat-card .num{font-size:28px;font-weight:700;color:var(--accent-orange);line-height:1;}
.stat-card .lbl{font-size:11px;text-transform:uppercase;letter-spacing:1px;color:var(--text-secondary);margin-top:6px;}
.stat-card.with-icon{display:flex;align-items:center;gap:14px;}
.stat-card.with-icon .stat-icon{
  width:40px;height:40px;border-radius:8px;
  background:var(--bg-card);border:1px solid var(--border-color);
  display:flex;align-items:center;justify-content:center;flex-shrink:0;
}
.stat-card.with-icon .stat-icon img{width:22px;height:22px;}
.stat-card.with-icon .stat-text .num{font-size:22px;}
.stat-card.with-icon .stat-text .lbl{font-size:10px;}

/* TIMELINE */
.timeline{position:relative;padding-left:24px;}
.timeline::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--border-light);}
.timeline-item{position:relative;margin-bottom:28px;}
.timeline-item::before{
  content:"";position:absolute;left:-22px;top:6px;
  width:10px;height:10px;border-radius:50%;background:var(--accent-orange);
}
.timeline-item h4{margin:0 0 4px;font-size:16px;color:#fff;}
.timeline-item .org{color:var(--accent-orange);font-size:13px;font-weight:600;margin-bottom:2px;}
.timeline-item .dates{color:var(--text-secondary);font-size:12px;font-family:monospace;margin-bottom:8px;}
.timeline-item p{color:var(--text-secondary);font-size:14px;margin:0;}

/* SKILL BARS */
.skill-row{margin-bottom:14px;}
.skill-row .skill-head{display:flex;justify-content:space-between;margin-bottom:6px;font-size:13px;}
.skill-row .skill-head .name{color:#fff;font-weight:600;}
.skill-row .skill-head .pct{color:var(--text-secondary);font-family:monospace;}
.skill-bar{height:8px;background:#0a0a0a;border-radius:9999px;box-shadow:inset 2px 3px 6px rgba(0,0,0,.8);overflow:hidden;}
.skill-bar .fill{height:100%;background:linear-gradient(90deg,var(--accent-orange),#ffae6b);border-radius:9999px;}

/* CAROUSEL */
#carousel-container{
  background:var(--bg-card);border:1px solid var(--border-color);
  border-radius:12px;overflow:hidden;box-shadow:0 8px 24px rgba(0,0,0,.8);
}
.carousel-header{
  padding:8px 14px;border-bottom:1px solid var(--border-color);
  display:flex;justify-content:space-between;align-items:center;
  background:var(--bg-darker);gap:10px;flex-wrap:wrap;
}
.carousel-tabs{display:flex;gap:4px;}
.carousel-tab{
  font-size:.72rem;padding:.35em .7em;border-radius:5px;font-weight:600;
  background:transparent;border:1px solid var(--border-color);
  color:var(--text-secondary);cursor:pointer;transition:.15s ease;
  display:inline-flex;align-items:center;gap:4px;
}
.carousel-tab:hover{background:rgba(255,255,255,.05);color:var(--text-primary);}
.carousel-tab.active{background-color:var(--accent-orange);color:#fff;border-color:var(--accent-orange);}
.carousel-nav{display:flex;gap:6px;}
.carousel-nav .btn-3d{padding:.2em .6em;font-size:.85rem;line-height:1;min-width:28px;}
.carousel-viewport{overflow:hidden;width:100%;}
.featured-carousel{display:flex;transition:transform .6s cubic-bezier(.22,.61,.36,1);will-change:transform;}
.carousel-slide{min-width:100%;position:relative;cursor:pointer;}
.slide-art{
  width:100%;height:240px;display:flex;align-items:center;justify-content:center;
  font-family:'Courier New',monospace;font-size:80px;font-weight:700;
  color:rgba(255,255,255,.25);position:relative;overflow:hidden;
}
.slide-art::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(circle at 30% 30%,rgba(255,107,53,.25),transparent 60%);
}
.carousel-overlay{
  position:absolute;bottom:0;left:0;right:0;padding:14px 20px;
  background:linear-gradient(to top,rgba(0,0,0,.95) 0%,rgba(0,0,0,.5) 70%,transparent 100%);
  display:flex;flex-direction:column;gap:4px;
}
.carousel-overlay h3{color:#fff;text-shadow:2px 2px 4px #000;margin:0;font-size:18px;}
.carousel-overlay .sub{color:rgba(255,255,255,.7);font-size:12px;margin:0;}

/* BLACK HOLE LOADER */
.loader-container{display:flex;justify-content:center;align-items:center;padding:40px 0;width:100%;}
.planets{position:relative;width:220px;height:220px;display:flex;justify-content:center;align-items:center;overflow:visible;}
#planetTrail1,#planetTrail2,#planetTrail3{outline:solid #1a1a1a 1px;border-radius:50%;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);}
#planetTrail1::after,#planetTrail2::after,#planetTrail3::after{content:"";width:10px;height:10px;position:absolute;border-radius:50%;top:-5px;left:50%;transform:translateX(-50%);}
#planetTrail1::after{background-color:#d5d578;}
#planetTrail2::after{background-color:#73aee7;}
#planetTrail3::after{background-color:#b44931;}
#planetTrail1{width:120px;height:120px;animation:trails1 4s infinite;}
#planetTrail2{width:170px;height:170px;animation:trails2 4s infinite;}
#planetTrail3{width:220px;height:220px;animation:trails3 4s infinite;}
@keyframes trails1{0%{transform:translate(-50%,-50%) rotate(0deg);}40%{transform:translate(-50%,-50%) rotate(360deg);width:120px;height:120px;}50%{width:0;height:0;}90%{width:0;height:0;}100%{width:120px;height:120px;}}
@keyframes trails2{0%{transform:translate(-50%,-50%) rotate(0deg);}40%{transform:translate(-50%,-50%) rotate(250deg);width:170px;height:170px;}50%{width:0;height:0;}90%{width:0;height:0;}100%{width:170px;height:170px;}}
@keyframes trails3{0%{transform:translate(-50%,-50%) rotate(0deg);}40%{transform:translate(-50%,-50%) rotate(170deg);width:220px;height:220px;}50%{width:0;height:0;}90%{width:0;height:0;}100%{width:220px;height:220px;}}
#star{position:absolute;width:50px;height:50px;background-color:#ffaa00;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);animation:bouncingStar 4s infinite;}
#starShadow{position:absolute;width:50px;height:20px;background-color:#ffaa00;border-radius:50%;top:50%;left:50%;transform:translate(-50%,100%);filter:blur(5px);opacity:.3;animation:shadowAnimation 4s infinite;}
@keyframes bouncingStar{0%{transform:translate(-50%,-50%);}10%{transform:translate(-50%,-30%);}20%{transform:translate(-50%,-50%);}30%{transform:translate(-50%,-30%);}40%{transform:translate(-50%,-50%);width:50px;height:50px;}50%{width:0;height:0;}90%{width:0;height:0;}100%{width:50px;height:50px;}}
@keyframes shadowAnimation{0%{opacity:.1;}10%{opacity:.4;}20%{opacity:.1;}30%{opacity:.4;}40%{opacity:.1;}50%{opacity:0;}90%{opacity:0;}100%{opacity:.1;}}
#blackHole{position:absolute;width:50px;height:50px;background-color:#000;outline:orange solid 5px;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%);animation:bouncingBlackHole 4s infinite;}
@keyframes bouncingBlackHole{0%{height:0;width:0;}40%{width:0;height:0;}50%{width:50px;height:50px;}90%{width:50px;height:50px;}100%{width:0;height:0;}}
#blackHoleDisk1{position:absolute;width:68px;height:68px;clip-path:inset(50% 0 0 0);border:#000 10px solid;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%) rotateX(70deg);animation:diskAn 4s infinite;}
#blackHoleDisk2{position:absolute;width:70px;height:70px;clip-path:inset(0 0 50% 0);border:#f5ae08 10px solid;border-radius:50%;top:50%;left:50%;transform:translate(-50%,-50%) rotateX(55deg);animation:diskAn 4s infinite;}
@keyframes diskAn{0%{height:0;width:0;border:orange 0 solid;}40%{width:0;height:0;border:orange 0 solid;}50%{width:88px;height:88px;border:orange 18px solid;}90%{width:88px;height:88px;border:orange 18px solid;}100%{width:0;height:0;border:orange 0 solid;}}
#planet{position:absolute;width:10px;height:10px;background-color:#fff;border-radius:50%;top:50%;left:50%;animation:planetAn 4s infinite;}
@keyframes planetAn{0%{opacity:0;transform:translate(-50%,-50%);z-index:1;}50%{opacity:0;transform:translate(-50%,-50%);z-index:1;}58%{opacity:1;}70%{opacity:1;transform:translate(calc(-50% + 100px),calc(-50% + 40px));z-index:1;}71%{z-index:0;}90%{z-index:0;opacity:1;transform:translate(calc(-50% - 10px),calc(-50% + 70px));}100%{transform:translate(calc(-50% - 10px),calc(-50% + 70px));opacity:0;}}
.loader-label{text-align:center;color:var(--text-secondary);font-size:12px;letter-spacing:2px;text-transform:uppercase;margin-top:14px;}

/* API PENDING */
.api-pending{
  background:repeating-linear-gradient(45deg,#0a0a0a,#0a0a0a 10px,#0d0d0d 10px,#0d0d0d 20px);
  border:1px dashed var(--border-light);border-radius:12px;padding:28px;text-align:center;
}
.api-pending h3{margin:0 0 8px;color:var(--accent-orange);font-size:18px;}
.api-pending p{color:var(--text-secondary);font-size:14px;margin:0 0 14px;}
.api-pending code{
  display:inline-block;padding:4px 10px;border-radius:4px;
  background:#050505;border:1px solid var(--border-light);
  color:var(--accent-modrinth);font-family:monospace;font-size:12px;
}

/* HERO CARD */
.hero-card{
  background:var(--bg-card);border:1px solid var(--border-color);
  border-radius:16px;padding:50px 40px;margin-bottom:30px;
  text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.8);
  position:relative;overflow:hidden;
}
.hero-card::before{
  content:"";position:absolute;inset:0;
  background:radial-gradient(ellipse at center top,rgba(255,107,53,.08),transparent 60%);
  pointer-events:none;
}
.hero-logo{
  width:90px;height:90px;border-radius:50%;
  border:2px solid var(--accent-primary);
  object-fit:cover;margin-bottom:18px;position:relative;z-index:1;
}
.hero-card h1{margin:0 0 10px;font-size:42px;color:var(--text-primary);letter-spacing:-.5px;position:relative;z-index:1;}
.hero-card .tagline{color:var(--text-secondary);margin-bottom:30px;font-size:17px;position:relative;z-index:1;}
.hero-card .tagline .accent{color:var(--accent-orange);font-weight:600;}

/* STEAM CARD */
.steam-card{
  background:linear-gradient(135deg,#1b2838 0%,#0a141f 100%);
  border:1px solid #2a475e;border-radius:12px;padding:22px;
  display:flex;gap:18px;align-items:center;
  box-shadow:0 8px 24px rgba(0,0,0,.8),inset 0 1px 0 rgba(255,255,255,.04);
  position:relative;overflow:hidden;
}
.steam-card::before{
  content:"";position:absolute;top:0;left:0;right:0;height:4px;
  background:linear-gradient(90deg,#1b9bf4 0%,#57cbde 50%,#1b9bf4 100%);
}
.steam-avatar{
  width:84px;height:84px;border-radius:6px;
  border:2px solid #57cbde;object-fit:cover;flex-shrink:0;
}
.steam-info{flex:1;min-width:0;}
.steam-name{font-size:20px;font-weight:700;color:#fff;display:flex;align-items:center;gap:10px;margin-bottom:4px;}
.steam-level{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:22px;height:22px;padding:0 6px;border-radius:4px;
  font-size:12px;font-weight:700;
  background:linear-gradient(135deg,#1b9bf4,#0e6db8);
  color:#fff;border:1px solid #57cbde;
}
.steam-status{font-size:13px;color:#57cbde;margin-bottom:6px;display:flex;align-items:center;gap:6px;}
.steam-status .status-dot{width:8px;height:8px;border-radius:50%;background:#57cbde;}
.steam-status.offline .status-dot{background:#66c0f4;opacity:.6;}
.steam-meta{font-size:11px;color:#8f98a0;display:flex;gap:14px;flex-wrap:wrap;}
.steam-meta span{display:inline-flex;align-items:center;gap:4px;}
.steam-link{
  margin-top:12px;display:inline-flex;align-items:center;gap:6px;
  padding:6px 14px;border-radius:4px;
  background:linear-gradient(90deg,#1b9bf4 0%,#0e6db8 100%);
  color:#fff;text-decoration:none;font-size:13px;font-weight:600;transition:filter .15s;
}
.steam-link:hover{filter:brightness(1.2);}

/* HOMELAB GALLERY */
.homelab-gallery{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:14px;}
.homelab-preview{display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px;}
.homelab-preview a{
  display:block;aspect-ratio:4/3;border-radius:10px;overflow:hidden;
  border:1px solid var(--border-color);transition:transform .2s,border-color .2s;
}
.homelab-preview a:hover{transform:translateY(-3px);border-color:var(--border-light);}
.homelab-preview img{width:100%;height:100%;object-fit:cover;display:block;}
.homelab-thumb{
  position:relative;aspect-ratio:4/3;border-radius:10px;overflow:hidden;
  cursor:pointer;border:1px solid var(--border-color);background:var(--bg-darker);
  transition:transform .2s,border-color .2s;
}
.homelab-thumb:hover{transform:translateY(-3px);border-color:var(--accent-orange);}
.homelab-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.homelab-thumb .thumb-num{
  position:absolute;top:8px;left:8px;
  background:rgba(0,0,0,.7);color:#fff;font-size:11px;font-family:monospace;
  padding:2px 8px;border-radius:4px;backdrop-filter:blur(4px);
}

/* LIGHTBOX */
.lightbox{
  position:fixed;inset:0;z-index:9999;
  background:rgba(0,0,0,.95);backdrop-filter:blur(8px);
  display:none;align-items:center;justify-content:center;padding:30px;
}
.lightbox.open{display:flex;}
.lightbox-stage{position:relative;max-width:90vw;max-height:85vh;display:flex;align-items:center;justify-content:center;}
.lightbox-stage img{max-width:90vw;max-height:85vh;border-radius:8px;box-shadow:0 20px 60px rgba(0,0,0,.8);display:block;}
.lightbox-close{
  position:absolute;top:18px;right:24px;width:40px;height:40px;border-radius:50%;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);
  color:#fff;font-size:20px;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.lightbox-close:hover{background:rgba(255,107,53,.3);}
.lightbox-nav{
  position:absolute;top:50%;transform:translateY(-50%);
  width:50px;height:50px;border-radius:50%;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);
  color:#fff;font-size:24px;cursor:pointer;display:flex;align-items:center;justify-content:center;
}
.lightbox-nav:hover{background:rgba(255,107,53,.3);}
.lightbox-nav.prev{left:24px;}
.lightbox-nav.next{right:24px;}
.lightbox-counter{
  position:absolute;bottom:24px;left:50%;transform:translateX(-50%);
  color:rgba(255,255,255,.7);font-size:13px;font-family:monospace;
  background:rgba(0,0,0,.5);padding:6px 14px;border-radius:9999px;border:1px solid rgba(255,255,255,.1);
}
.lightbox-caption{position:absolute;bottom:60px;left:50%;transform:translateX(-50%);color:rgba(255,255,255,.85);font-size:13px;}

/* INTERESTS FLOW */
.interests-flow{display:flex;flex-direction:column;align-items:center;gap:0;max-width:340px;margin:0 auto;}
.interest-node{
  width:100%;padding:14px 20px;background:var(--bg-darker);border:1px solid var(--border-color);
  border-radius:10px;text-align:center;font-size:14px;font-weight:600;color:var(--text-primary);
  transition:border-color .2s,transform .2s;
}
.interest-node:hover{border-color:var(--accent-orange);transform:scale(1.03);}
.interest-node.first{border-color:rgba(255,107,53,.4);color:var(--accent-orange);}
.interest-arrow{color:var(--text-secondary);font-size:22px;padding:6px 0;line-height:1;opacity:.5;}

/* PROJECT DETAIL */
.project-detail{
  background:var(--bg-darker);border:1px solid var(--border-color);
  border-radius:12px;padding:24px;margin-bottom:18px;transition:border-color .2s,transform .2s;
}
.project-detail:hover{border-color:var(--border-light);transform:translateY(-2px);}
.project-detail h3{margin:0 0 8px;font-size:20px;color:#fff;}
.project-detail .desc{color:var(--text-secondary);font-size:14px;margin:0 0 14px;}
.project-detail .stack-row{display:flex;gap:6px;flex-wrap:wrap;}

/* MODRINTH CARD */
.modrinth-card{
  background:var(--bg-darker);border:1px solid var(--border-color);
  border-radius:12px;overflow:hidden;transition:transform .2s,border-color .2s;
  display:flex;flex-direction:column;
}
.modrinth-card:hover{transform:translateY(-3px);border-color:var(--border-light);}
.modrinth-card .mc-icon{width:100%;height:120px;object-fit:cover;display:block;background:#0a0a0a;}
.modrinth-card .mc-body{padding:16px;flex:1;display:flex;flex-direction:column;gap:8px;}
.modrinth-card .mc-title{font-size:15px;font-weight:600;color:#fff;margin:0;}
.modrinth-card .mc-desc{font-size:12px;color:var(--text-secondary);margin:0;flex:1;}
.modrinth-card .mc-meta{display:flex;justify-content:space-between;align-items:center;font-size:12px;}

/* BOT CARD */
.bot-card{
  background:var(--bg-darker);border:1px solid var(--border-color);
  border-radius:12px;overflow:hidden;transition:transform .2s,border-color .2s;
  display:flex;flex-direction:column;
}
.bot-card:hover{transform:translateY(-3px);border-color:var(--border-light);}
.bot-card .bot-header{
  padding:20px;display:flex;gap:14px;align-items:center;
  border-bottom:1px solid var(--border-color);
}
.bot-card .bot-avatar{
  width:56px;height:56px;border-radius:12px;
  border:2px solid var(--border-light);object-fit:cover;flex-shrink:0;
  background:var(--bg-card);
}
.bot-card .bot-name{font-size:16px;font-weight:700;color:#fff;margin:0;}
.bot-card .bot-tag{font-size:12px;color:var(--text-secondary);}
.bot-card .bot-body{padding:20px;flex:1;display:flex;flex-direction:column;gap:14px;}
.bot-card .bot-desc{font-size:13px;color:var(--text-secondary);margin:0;}
.bot-card .bot-features{display:flex;gap:6px;flex-wrap:wrap;}
.bot-card .bot-commands{
  background:#050505;border:1px solid var(--border-color);border-radius:8px;
  padding:14px;max-height:200px;overflow-y:auto;font-family:monospace;font-size:12px;
  color:var(--text-secondary);line-height:1.8;
}
.bot-card .bot-commands .cmd-group{color:var(--accent-orange);font-weight:600;margin-top:8px;}
.bot-card .bot-commands .cmd-group:first-child{margin-top:0;}
.bot-card .bot-commands .cmd{color:#ccc;}
.bot-card .bot-commands .cmd .slash{color:var(--accent-orange);}
.bot-card .bot-actions{display:flex;gap:8px;flex-wrap:wrap;padding:0 20px 20px;}

/* DISCORD EMBED (for Modrinth embed style) */
.discord-embed{
  background:#2b2d31;border:1px solid #1e1f22;border-radius:8px;
  overflow:hidden;display:flex;
}
.discord-embed .embed-side{width:4px;background:var(--accent-modrinth);flex-shrink:0;}
.discord-embed .embed-body{padding:12px 16px;flex:1;}
.discord-embed .embed-title{color:#fff;font-weight:600;font-size:15px;margin:0 0 4px;}
.discord-embed .embed-desc{color:#b5bac1;font-size:13px;margin:0 0 8px;}
.discord-embed .embed-fields{display:flex;gap:16px;flex-wrap:wrap;margin-top:8px;}
.discord-embed .embed-field{font-size:12px;}
.discord-embed .embed-field .fname{color:#b5bac1;font-weight:600;margin-bottom:2px;}
.discord-embed .embed-field .fval{color:#d0d4d8;}
.discord-embed .embed-thumb{width:80px;height:80px;object-fit:cover;border-radius:4px;margin:12px;flex-shrink:0;}
.discord-embed .embed-footer{font-size:11px;color:#949ba4;margin-top:8px;display:flex;align-items:center;gap:6px;}
.discord-embed .embed-footer img{width:14px;height:14px;border-radius:50%;}

/* FOOTER */
.site-footer{
  background:var(--bg-card);border:1px solid var(--border-color);
  border-radius:16px;padding:30px;margin-top:40px;text-align:center;
  box-shadow:0 8px 24px rgba(0,0,0,.8);
}
.footer-links{margin-top:20px;display:flex;gap:20px;justify-content:center;flex-wrap:wrap;}
.footer-links a{color:var(--text-secondary);text-decoration:none;font-size:14px;transition:color .2s;}
.footer-links a:hover{color:var(--accent-orange);}

/* BACK TO TOP */
#back-to-top{position:fixed;bottom:20px;right:20px;display:none;z-index:99;padding:10px 15px;}
#back-to-top.show{display:inline-flex;}
.hidden{display:none !important;}

/* RESPONSIVE */
@media(max-width:768px){
  .page-shell{padding:24px 12px;}
  .hero-card{padding:30px 18px;}
  .hero-card h1{font-size:30px;}
  .panel{padding:22px 18px;}
  .section-headline{font-size:22px;}
  .two-col{grid-template-columns:1fr;}
  .quick-grid{grid-template-columns:1fr;}
  .contact-row{grid-template-columns:1fr !important;}
  .search-row{flex-direction:column;gap:12px;}
  .btn-3d{width:100%;}
  .results-table{min-width:700px;}
  .carousel-slide .slide-art{height:180px;font-size:60px;}
  .badge-row img{height:24px;}
  .discord-embed{flex-direction:column;}
  .discord-embed .embed-thumb{width:100%;height:120px;margin:0;border-radius:0;}
}
@media(max-width:640px){
  .steam-card{flex-direction:column;text-align:center;}
  .steam-name{justify-content:center;}
  .lightbox-nav{width:40px;height:40px;}
  .lightbox-nav.prev{left:8px;}
  .lightbox-nav.next{right:8px;}
  .stat-grid{grid-template-columns:1fr 1fr;}
  .project-detail .project-detail-inner{flex-direction:column !important;}

  
}
/* ═══ SCROLL ANIMATIONS ═══ */
.fade-in-up{opacity:0;transform:translateY(30px);transition:opacity .7s ease,transform .7s ease;}
.fade-in-up.visible{opacity:1;transform:translateY(0);}
.slide-in-left{opacity:0;transform:translateX(-50px);transition:opacity .7s ease,transform .7s ease;}
.slide-in-left.visible{opacity:1;transform:translateX(0);}
.slide-in-right{opacity:0;transform:translateX(50px);transition:opacity .7s ease,transform .7s ease;}
.slide-in-right.visible{opacity:1;transform:translateX(0);}
.scale-in{opacity:0;transform:scale(.92);transition:opacity .7s ease,transform .7s ease;}
.scale-in.visible{opacity:1;transform:scale(1);}
.stagger-1{transition-delay:.08s;}
.stagger-2{transition-delay:.16s;}
.stagger-3{transition-delay:.24s;}
.stagger-4{transition-delay:.32s;}
.stagger-5{transition-delay:.40s;}

/* ═══ HERO TITLE GRADIENT ANIMATION ═══ */
@keyframes gradientShift{0%{background-position:0% 50%;}50%{background-position:100% 50%;}100%{background-position:0% 50%;}}
.hero-gradient{
  background:linear-gradient(90deg,#ffffff,#ff6b35,#ffffff);
  background-size:200% auto;
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
  animation:gradientShift 5s ease infinite;
}

/* ═══ CLICKABLE HEADLINES ═══ */
.clickable-title{cursor:pointer;transition:color .2s,transform .2s;display:inline-block;}
.clickable-title:hover{color:var(--accent-orange);transform:translateX(4px);}

/* ═══ STRETCHED LINK (makes entire card clickable) ═══ */
.stretched-link{position:absolute;inset:0;z-index:1;text-decoration:none;color:transparent;}
.project-card.with-art{position:relative;overflow:visible;}
.project-card.with-art .art-wrap{overflow:hidden;border-radius:12px 12px 0 0;position:relative;}

/* ═══ MINECRAFT INLINE SVG FIX ═══ */
.mc-icon-inline{width:16px;height:16px;display:inline-block;vertical-align:middle;}

/* ═══ STEAM CARD STATIC (no glow) ═══ */
.steam-status .status-dot,.steam-level,.steam-avatar,.steam-card::before,.section-title::before{box-shadow:none;}
.steam-card::before{display:none;}
.steam-avatar{border-color:#2a475e;}
.interest-arrow{animation:none;opacity:.5;}
/* ═══ EMBED GRID ═══ */
.embed-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  align-items: start;
}

/* ═══ PROFILE EMBED BASE ═══ */
.profile-embed {
  border-radius: 12px;
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  border: 1px solid;
  transition: transform .2s, border-color .2s;
}
.profile-embed:hover {
  transform: translateY(-3px);
}

.embed-avatar {
  width: 64px;
  height: 64px;
  border-radius: 10px;
  border: 2px solid;
  object-fit: cover;
}
.embed-name {
  font-size: 18px;
  font-weight: 700;
  color: #fff;
}
.embed-desc {
  font-size: 13px;
  color: var(--text-secondary);
  flex: 1;
}
.embed-stats {
  display: flex;
  gap: 20px;
  padding: 12px 0;
  border-top: 1px solid rgba(255,255,255,.06);
}
.embed-stat {
  display: flex;
  flex-direction: column;
}
.embed-stat .val {
  font-size: 20px;
  font-weight: 700;
  color: var(--accent-orange);
}
.embed-stat .lbl {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--text-secondary);
  margin-top: 2px;
}
.embed-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px 16px;
  border-radius: 6px;
  border: 1px solid;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: filter .15s;
}
.embed-link:hover { filter: brightness(1.2); }

/* ═══ STEAM VARIANT ═══ */
.profile-embed.steam {
  background: linear-gradient(135deg, #1b2838, #0a141f);
  border-color: #2a475e;
}
.profile-embed.steam .embed-avatar { border-color: #57cbde; }
.profile-embed.steam .embed-link {
  background: rgba(27,155,244,.1);
  border-color: rgba(87,203,222,.3);
  color: #57cbde;
}

/* ═══ MODRINTH VARIANT ═══ */
.profile-embed.modrinth {
  background: linear-gradient(135deg, #0d1a10, #050505);
  border-color: rgba(27,217,106,.15);
}
.profile-embed.modrinth:hover { border-color: rgba(27,217,106,.3); }
.profile-embed.modrinth .embed-avatar { border-color: rgba(27,217,106,.4); }
.profile-embed.modrinth .embed-stat .val { color: var(--accent-modrinth); }
.profile-embed.modrinth .embed-link {
  background: rgba(27,217,106,.1);
  border-color: rgba(27,217,106,.3);
  color: var(--accent-modrinth);
}

/* ═══ GITHUB VARIANT ═══ */
.profile-embed.github {
  background: linear-gradient(135deg, #0d0d12, #050505);
  border-color: rgba(255,255,255,.08);
}
.profile-embed.github:hover { border-color: rgba(255,255,255,.15); }
.profile-embed.github .embed-avatar {
  border-radius: 50%;
  border-color: rgba(255,255,255,.1);
}
.profile-embed.github .embed-stat .val { color: #fff; }
.profile-embed.github .embed-link {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.15);
  color: #fff;
}

@media (max-width: 900px) {
  .embed-grid { grid-template-columns: 1fr; }
}
/* ═══ FAVORITE GAMES ═══ */
.games-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px;
}
.game-card {
  background: var(--bg-darker);
  border: 1px solid var(--border-color);
  border-radius: 12px;
  overflow: hidden;
  transition: transform .2s, border-color .2s;
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  display: flex;
  flex-direction: column;
}
.game-card:hover {
  transform: translateY(-3px);
  border-color: var(--border-light);
}
.game-card .game-banner {
  width: 100%;
  height: 94px;
  object-fit: cover;
  display: block;
  background: var(--bg-card);
}
.game-card .game-body {
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.game-card .game-name {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
}
.game-card .game-tag {
  font-size: 11px;
  color: var(--text-secondary);
  text-transform: uppercase;
  letter-spacing: .5px;
}

/* ═══ CIRCULAR AVATARS (all embeds) ═══ */
.embed-avatar {
  border-radius: 50% !important;
}
.profile-embed.github .embed-avatar {
  border-radius: 50% !important;
}

/* ═══ MODRINTH VIEWS STAT ═══ */
.embed-stat .val.views { color: #73aee7; }

/* ═══ CONTACT INFO BLOCK ═══ */
.contact-info-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--bg-darker);
  border: 1px solid var(--border-color);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 12px;
}
.contact-info-row .ci-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--bg-card);
  border: 1px solid var(--border-color);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.contact-info-row .ci-icon svg { width: 18px; height: 18px; }
.contact-info-row .ci-info { flex: 1; }
.contact-info-row .ci-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-secondary); }
.contact-info-row .ci-value { font-size: 15px; color: #fff; font-weight: 600; }
.contact-info-row .ci-value code { font-family: monospace; color: var(--accent-orange); }
.contact-info-row .ci-action {
  padding: 6px 14px;
  border-radius: 6px;
  border: 1px solid var(--border-light);
  background: var(--bg-card);
  color: #fff;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: border-color .15s;
  white-space: nowrap;
}
.contact-info-row .ci-action:hover { border-color: var(--accent-orange); color: var(--accent-orange); }

/* ═══ GITHUB-LIKE PROFILE HEADER ═══ */
.gh-profile-header {
  display: flex;
  gap: 20px;
  align-items: center;
  margin-bottom: 24px;
}
.gh-profile-header .gh-avatar {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 3px solid var(--border-light);
  object-fit: cover;
  flex-shrink: 0;
}
.gh-profile-header .gh-info h3 { margin: 0 0 4px; font-size: 24px; color: #fff; }
.gh-profile-header .gh-info .gh-login { font-size: 15px; color: var(--accent-orange); font-family: monospace; }
.gh-profile-header .gh-info .gh-bio { font-size: 14px; color: var(--text-secondary); margin-top: 6px; }
.gh-profile-header .gh-info .gh-meta { display: flex; gap: 16px; margin-top: 8px; font-size: 13px; color: var(--text-secondary); }
.gh-profile-header .gh-info .gh-meta span { display: inline-flex; align-items: center; gap: 4px; }

@media (max-width: 640px) {
  .gh-profile-header { flex-direction: column; text-align: center; }
}
/* ═══ PRELOADER ═══ */
#preloader {
  position: fixed; inset: 0; background: #050505;
  z-index: 99999; display: flex; align-items: center;
  justify-content: center; flex-direction: column; gap: 20px;
  transition: opacity .5s ease;
}
#preloader.hide { opacity: 0; pointer-events: none; }

/* ═══ PAGE FADE IN ═══ */
.page-shell { animation: pageFade .6s ease; }
@keyframes pageFade { from { opacity: 0; } to { opacity: 1; } }

/* ═══ TEXT REVEAL (hero) ═══ */
@keyframes textRevealUp {
  from { opacity: 0; transform: translateY(25px); }
  to { opacity: 1; transform: translateY(0); }
}
.text-reveal { opacity: 0; animation: textRevealUp .8s ease forwards; }
.tr-1 { animation-delay: .1s; }
.tr-2 { animation-delay: .25s; }
.tr-3 { animation-delay: .4s; }
.tr-4 { animation-delay: .55s; }
.tr-5 { animation-delay: .7s; }
.tr-6 { animation-delay: .85s; }

/* ═══ CENTERED EMBED AVATARS ═══ */
.profile-embed { text-align: center; align-items: center; }
.profile-embed .embed-stats { justify-content: center; }
.profile-embed .embed-link { align-self: center; }

/* ═══ MINECRAFT GAME BANNER ═══ */
.mc-game-banner {
  background: linear-gradient(135deg, #7BB66B 0%, #4A7A3A 100%);
  display: flex; align-items: center; justify-content: center;
  min-height: 94px; width: 100%;
}
.mc-game-banner span {
  color: #fff; font-weight: 700; font-size: 14px;
  letter-spacing: 2px; text-shadow: 2px 2px 4px rgba(0,0,0,.5);
}

/* ═══ EXTRA ANIMATION VARIANTS ═══ */
.slide-in-left { opacity: 0; transform: translateX(-60px); transition: opacity .7s ease, transform .7s ease; }
.slide-in-left.visible { opacity: 1; transform: translateX(0); }
.slide-in-right { opacity: 0; transform: translateX(60px); transition: opacity .7s ease, transform .7s ease; }
.slide-in-right.visible { opacity: 1; transform: translateX(0); }
.stagger-6 { transition-delay: .48s; }
.stagger-7 { transition-delay: .56s; }
.stagger-8 { transition-delay: .64s; }
.stagger-9 { transition-delay: .72s; }
.stagger-10 { transition-delay: .80s; }

/* ═══ HOVER LIFT ═══ */
.panel { transition: transform .2s; }
.project-card, .game-card, .modrinth-card, .bot-card { transition: transform .2s, border-color .2s, box-shadow .2s; }
.project-card:hover, .game-card:hover { box-shadow: 0 12px 30px rgba(0,0,0,.6); }
/* ═══ INLINE SVG SIZING ═══ */
.brand-logo-chip img, .brand-logo-chip svg { width: 16px; height: 16px; }
.stat-icon img, .stat-icon svg { width: 22px; height: 22px; }
.ci-icon svg { width: 18px; height: 18px; }
.embed-avatar { border-radius: 50% !important; }
/* ═══ NAV AVATAR ═══ */
.nav-avatar {
  width: 32px; height: 32px; border-radius: 50%;
  object-fit: cover; border: 1px solid var(--border-light);
  flex-shrink: 0;
}