@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Share+Tech+Mono&family=Inter:wght@300;400;600&display=swap');
*{margin:0;padding:0;box-sizing:border-box;}
:root{
  --rb1:#FF3A3A;--rb2:#FF8C00;--rb3:#FFD700;--rb4:#3ECC3E;--rb5:#4488FF;--rb6:#BB44FF;
  --bg:#0a0813;--panel:#120f20;--card:#1c1730;--border:#2e2850;
  --text:#ede8ff;--accent:#c96fff;--nav-height:52px;
  --rainbow:linear-gradient(90deg,var(--rb1) 0%,var(--rb2) 20%,var(--rb3) 40%,var(--rb4) 60%,var(--rb5) 80%,var(--rb6) 100%);
  --rainbow-anim:linear-gradient(90deg,var(--rb1),var(--rb2),var(--rb3),var(--rb4),var(--rb5),var(--rb6),var(--rb1));
}

/* ── BASE ── */
body{background:var(--bg);color:var(--text);font-family:'Share Tech Mono',monospace;font-size:16px;display:flex;flex-direction:column;min-height:100vh;overflow-x:hidden;}

/* animated background haze */
body::before{
  content:'';pointer-events:none;position:fixed;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 70% 50% at 10% 10%,rgba(255,60,60,.06) 0%,transparent 70%),
    radial-gradient(ellipse 60% 40% at 90% 80%,rgba(160,60,255,.07) 0%,transparent 70%),
    radial-gradient(ellipse 50% 35% at 50% 50%,rgba(68,136,255,.04) 0%,transparent 70%);
  animation:hazeShift 12s ease-in-out infinite alternate;
}
@keyframes hazeShift{
  0%{filter:hue-rotate(0deg);}
  100%{filter:hue-rotate(30deg);}
}

/* floating particles */
.particles{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.particle{position:absolute;border-radius:50%;opacity:0;animation:floatUp linear infinite;}
@keyframes floatUp{
  0%{transform:translateY(100vh) scale(0);opacity:0;}
  10%{opacity:.4;}
  90%{opacity:.15;}
  100%{transform:translateY(-10vh) scale(1.5);opacity:0;}
}

header,nav,main,footer{position:relative;z-index:1;}

/* ══════════════════════════════════════
   RAINBOW STRIPE ANIMATION
══════════════════════════════════════ */
@keyframes rainbowScroll{
  0%{background-position:0% 0%;}
  100%{background-position:200% 0%;}
}
.rb-stripe{
  height:5px;
  background:var(--rainbow-anim);
  background-size:200% 100%;
  animation:rainbowScroll 3s linear infinite;
}
.rb-border-top::before{
  content:'';display:block;height:3px;
  background:var(--rainbow-anim);background-size:200% 100%;
  animation:rainbowScroll 3s linear infinite;
}

/* ══════════════════════════════════════
   HEADER
══════════════════════════════════════ */
header{
  background:linear-gradient(180deg,#1a0d2e 0%,#0d0818 100%);
  border-bottom:none;padding:0;overflow:hidden;
}
.header-stripe{
  height:8px;
  background:var(--rainbow-anim);background-size:200% 100%;
  animation:rainbowScroll 2.5s linear infinite;
}
.header-inner{padding:22px 40px;display:flex;align-items:center;gap:22px;}

.logo-block{
  width:60px;height:60px;background:transparent;border:0;padding:0;
  position:relative;flex-shrink:0;display:flex;align-items:center;justify-content:center;
  cursor:pointer;transition:transform .2s;
}
.logo-block:hover{transform:scale(1.08);}
.logo-block img{width:100%;height:100%;object-fit:contain;display:block;border-radius:4px;position:relative;z-index:1;}
.logo-block::after{
  content:'';position:absolute;inset:-5px;border-radius:8px;
  background:var(--rainbow-anim);background-size:200% 100%;
  animation:rainbowScroll 2s linear infinite;
  opacity:.55;z-index:0;filter:blur(7px);
}
/* logo click ripple */
.logo-block.pulsed{animation:logoPulse .25s ease-out;}
@keyframes logoPulse{0%{transform:scale(1);}50%{transform:scale(1.2);}100%{transform:scale(1);}}

.header-titles{}
.title-text{
  font-family:'Share Tech Mono',monospace;font-size:38px;font-weight:700;
  background:var(--rainbow-anim);background-size:200% 100%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  animation:rainbowScroll 4s linear infinite;
  line-height:1.1;display:inline-block;letter-spacing:2px;
}
.subtitle{color:#c8a0f0;font-size:15px;margin-top:5px;letter-spacing:1px;opacity:.85;}
/* subtle logo click counter hint */
#logo-hint{
  position:absolute;bottom:-22px;left:50%;transform:translateX(-50%);
  font-size:10px;color:rgba(200,150,255,.5);white-space:nowrap;
  font-family:'Share Tech Mono',monospace;pointer-events:none;
  opacity:0;transition:opacity .3s;
}
.logo-block:hover #logo-hint{opacity:1;}

/* ══════════════════════════════════════
   NAV
══════════════════════════════════════ */
nav{
  background:rgba(8,5,18,.93);backdrop-filter:blur(8px);
  display:flex;gap:0;padding:0 20px;
  position:sticky;top:0;z-index:100;
}
nav::after{
  content:'';display:block;position:absolute;bottom:0;left:0;right:0;height:2px;
  background:var(--rainbow-anim);background-size:200% 100%;
  animation:rainbowScroll 3s linear infinite;
}
nav button{
  font-family:'Share Tech Mono',monospace;font-size:14px;padding:16px 18px;
  background:transparent;border:none;color:#6a5a8a;cursor:pointer;
  position:relative;border-bottom:3px solid transparent;margin-bottom:-2px;
  transition:color .15s,background .15s;letter-spacing:.5px;
  display:flex;align-items:center;gap:8px;
}
nav button:hover{color:#ddd0ff;background:rgba(200,150,255,.06);}
nav button.active{color:#FFD700;border-bottom-color:#FFD700;}
nav button.active::after{
  content:'';position:absolute;bottom:-3px;left:0;right:0;height:3px;
  background:var(--rainbow-anim);background-size:200% 100%;
  animation:rainbowScroll 2s linear infinite;
}
.nav-icon{width:22px;height:22px;display:inline-block;image-rendering:pixelated;flex-shrink:0;}

/* ══════════════════════════════════════
   MAIN / TABS
══════════════════════════════════════ */
main{max-width:1200px;margin:0 auto;padding:30px 20px;flex:1;}
.tab-content{display:none;animation:tabIn .25s ease-out;}
.tab-content.active{display:block;}
@keyframes tabIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

/* SECTION TITLE */
.section-title{
  font-family:'Share Tech Mono',monospace;font-size:18px;
  color:var(--accent);margin-bottom:20px;padding-bottom:10px;
  border-bottom:2px solid transparent;border-image:var(--rainbow) 1;
  display:flex;align-items:center;gap:10px;
}
.pixel-icon{width:32px;height:32px;display:inline-block;flex-shrink:0;image-rendering:pixelated;}
.layer-icon{width:30px;height:30px;flex-shrink:0;image-rendering:pixelated;}

/* CARD BASE */
.card{background:var(--panel);border:2px solid var(--border);padding:20px;margin-bottom:16px;position:relative;overflow:hidden;}
.card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--rainbow-anim);background-size:200% 100%;animation:rainbowScroll 3s linear infinite;}

/* ══════════════════════════════════════
   HERO BANNER (Updates tab intro banner card)
══════════════════════════════════════ */
.hero{
  background:linear-gradient(135deg,#1a0d2e 0%,#0f1540 50%,#120f20 100%);
  border:2px solid var(--border);padding:36px 40px;margin-bottom:28px;
  position:relative;overflow:hidden;display:flex;align-items:center;gap:40px;
}
.hero::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--rainbow-anim);background-size:200% 100%;animation:rainbowScroll 2.5s linear infinite;}
.hero::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(ellipse 80% 80% at 100% 50%,rgba(187,68,255,.08) 0%,transparent 70%);
}
.hero-text h2{
  font-family:'Share Tech Mono',monospace;font-size:26px;
  background:var(--rainbow-anim);background-size:200% 100%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;
  animation:rainbowScroll 5s linear infinite;
  margin-bottom:10px;
}
.hero-text p{font-size:15px;color:#a090c0;line-height:1.7;max-width:520px;}
.hero-badge{
  flex-shrink:0;background:var(--card);border:2px solid var(--border);
  padding:18px 24px;text-align:center;position:relative;overflow:hidden;
}
.hero-badge::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--rainbow-anim);background-size:200% 100%;animation:rainbowScroll 2s linear infinite;}
.hero-badge-label{font-size:12px;color:#6a5a8a;letter-spacing:1px;text-transform:uppercase;margin-bottom:4px;}
.hero-badge-val{font-family:'Share Tech Mono',monospace;font-size:28px;color:var(--accent);}

/* ══════════════════════════════════════
   UPDATES TAB
═════════════════════════════════════ */
.updates-layout{display:grid;grid-template-columns:260px 1fr;gap:20px;min-height:500px;}
.update-list{background:var(--panel);border:2px solid var(--border);}
.update-list-header{font-family:'Share Tech Mono',monospace;font-size:13px;color:var(--accent);padding:12px 16px;border-bottom:2px solid var(--border);background:var(--card);letter-spacing:1px;}
.update-item{padding:14px 16px;border-bottom:1px solid var(--border);cursor:pointer;transition:all .15s;position:relative;}
.update-item:hover{background:rgba(200,150,255,.07);}
.update-item.active{background:rgba(200,150,255,.12);border-left:3px solid var(--rb6);}
.update-item.active::after{content:'▶';position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--rb6);font-size:12px;}
.update-version{font-family:'Share Tech Mono',monospace;font-size:13px;color:#FFD700;}
.update-name{color:var(--text);margin-top:4px;font-size:15px;}
.update-date{color:#666;font-size:12px;margin-top:3px;}
.update-tag{display:inline-block;font-size:11px;padding:1px 6px;margin-top:4px;border:1px solid;}
.tag-major{color:var(--rb1);border-color:var(--rb1);}
.tag-minor{color:var(--rb3);border-color:var(--rb3);}
.tag-patch{color:#7a9a6a;border-color:#7a9a6a;}
.tag-indev{color:var(--rb6);border-color:var(--rb6);} 
.patch-panel{background:var(--panel);border:2px solid var(--border);padding:24px;}
.patch-title{font-family:'Share Tech Mono',monospace;font-size:15px;color:#FFD700;margin-bottom:6px;}
.patch-subtitle{color:var(--accent);font-size:17px;margin-bottom:20px;}
.patch-section{margin-bottom:18px;}
.patch-section-label{font-family:'Share Tech Mono',monospace;font-size:13px;margin-bottom:10px;display:flex;align-items:center;gap:8px;}
.label-added{color:#3ECC3E;}.label-changed{color:#FF8C00;}.label-fixed{color:#4D9EFF;}.label-removed{color:#FF4444;}
.patch-entry{padding:7px 0 7px 16px;border-left:2px solid var(--border);margin-bottom:5px;font-size:15px;line-height:1.5;color:#b8b0d0;}
.patch-entry::before{content:'◆ ';font-size:12px;color:var(--accent);}
.no-selection{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;min-height:400px;color:#333;font-family:'Share Tech Mono',monospace;font-size:14px;text-align:center;gap:14px;}

/* ══════════════════════════════════════
   GOALS TAB
══════════════════════════════════════ */
.goals-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:16px;}
.goal-card{background:var(--panel);border:2px solid var(--border);padding:20px;position:relative;overflow:hidden;transition:transform .15s,box-shadow .15s;}
.goal-card:hover{transform:translateY(-3px);box-shadow:0 8px 30px rgba(187,68,255,.15);}
.goal-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--rainbow-anim);background-size:200% 100%;animation:rainbowScroll 3s linear infinite;}
.goal-card.complete{border-color:#2a5a38;}
.goal-card.in-progress{border-color:#5a4010;}
.goal-card.planned{border-color:#2e2850;}
.goal-header{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:10px;}
.goal-name{font-family:'Share Tech Mono',monospace;font-size:14px;color:#FFD700;line-height:1.4;flex:1;margin-right:8px;}
.status-badge{font-size:11px;padding:2px 8px;border:1px solid;white-space:nowrap;flex-shrink:0;}
.badge-complete{color:#3ECC3E;border-color:#3ECC3E;}
.badge-progress{color:#FF8C00;border-color:#FF8C00;}
.badge-planned{color:#6a5a8a;border-color:#6a5a8a;}
.goal-desc{font-size:14px;color:#9088b0;line-height:1.55;margin-bottom:14px;}
.progress-bar{height:7px;background:#1a1430;border:1px solid #2e2850;overflow:hidden;}
.progress-fill{height:100%;width:0;transition:width 1s cubic-bezier(.4,0,.2,1);}
.fill-complete{background:linear-gradient(90deg,var(--rb4),var(--rb5));}
.fill-progress{background:linear-gradient(90deg,var(--rb2),var(--rb3));}
.fill-planned{background:#2a2440;}
.progress-label{font-size:11px;color:#555;margin-top:4px;}

/* ══════════════════════════════════════
   WORLD TAB
══════════════════════════════════════ */
.world-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:12px;margin-bottom:24px;}
.biome-card{
  background:var(--panel);border:2px solid var(--border);
  padding:18px 12px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:8px;
  position:relative;overflow:hidden;transition:transform .15s,border-color .2s,box-shadow .2s;cursor:default;
}
.biome-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--rainbow-anim);background-size:200% 100%;animation:rainbowScroll 3s linear infinite;}
.biome-card:hover{transform:translateY(-4px);border-color:var(--rb5);box-shadow:0 8px 24px rgba(68,136,255,.2);}
.biome-img{width:40px;height:40px;image-rendering:pixelated;}
.biome-name{font-family:'Share Tech Mono',monospace;font-size:13px;color:#FFD700;line-height:1.2;}
.biome-desc{font-size:12px;color:#7870a0;line-height:1.4;}

/* ══════════════════════════════════════
   ITEMS & CREATURES
══════════════════════════════════════ */
.items-layout{display:flex;gap:20px;align-items:flex-start;margin-left:-190px;}
#themes-toc{width:170px;flex-shrink:0;position:sticky;top:calc(var(--nav-height) + 12px);align-self:flex-start;display:flex;flex-direction:column;gap:6px;}
@media(max-width:1100px){.items-layout{margin-left:0;}#themes-toc{position:static;width:100%;}}
.toc-card{background:var(--card);border:2px solid var(--border);padding:10px 12px;position:relative;overflow:hidden;}
.toc-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--rainbow-anim);background-size:200% 100%;animation:rainbowScroll 3s linear infinite;}
.toc-card strong{font-family:'Share Tech Mono',monospace;color:var(--accent);display:block;margin-bottom:8px;font-size:12px;letter-spacing:1px;text-transform:uppercase;}
.toc-pages{display:flex;gap:5px;flex-wrap:wrap;}
.toc-page{background:transparent;border:1px solid var(--border);color:var(--text);padding:4px 9px;cursor:pointer;font-family:'Share Tech Mono',monospace;font-size:12px;transition:border-color .15s,color .15s;}
.toc-page:hover{border-color:var(--rb5);color:var(--rb5);} 
.toc-page.active{border-color:var(--rb6);color:var(--rb6);background:rgba(187,68,255,.1);} 
.toc-list{display:flex;flex-direction:column;gap:4px;}
.toc-entry{background:var(--panel);border:1px solid var(--border);border-left:3px solid transparent;padding:7px 10px;cursor:pointer;color:#8080a8;font-size:12px;font-family:'Share Tech Mono',monospace;line-height:1.4;transition:all .15s;display:flex;align-items:center;}
.toc-entry:hover{border-left-color:var(--rb5);color:var(--text);background:rgba(68,136,255,.05);}
.toc-icon{width:20px;height:20px;display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:8px;image-rendering:pixelated;}
.toc-icon img{width:100%;height:100%;display:block;object-fit:contain;}
.toc-name{font-family:'Share Tech Mono',monospace;color:#d8d0f0;font-size:12px;}
#themes-container{flex:1;min-width:0;display:flex;flex-direction:column;gap:24px;}
.theme-card{background:var(--panel);border:2px solid var(--border);border-left:4px solid var(--theme-color,var(--accent));padding:0;overflow:hidden;position:relative;transition:box-shadow .2s;}
.theme-card:hover{box-shadow:0 6px 28px rgba(0,0,0,.4);}
.theme-card::before{content:'';position:absolute;top:0;left:4px;right:0;height:2px;background:var(--rainbow-anim);background-size:200% 100%;animation:rainbowScroll 3s linear infinite;}
.theme-header{display:flex;align-items:center;gap:14px;padding:16px 22px;background:linear-gradient(90deg,color-mix(in srgb,var(--theme-color,var(--accent)) 14%,var(--card)),transparent);border-bottom:1px solid var(--border);}
.theme-icon{font-size:26px;flex-shrink:0;display:flex;align-items:center;justify-content:center;width:36px;height:36px;}
.theme-icon img{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated;}
.theme-name{font-family:'Share Tech Mono',monospace;font-size:18px;color:var(--theme-color,var(--accent));letter-spacing:.5px;}
.theme-summary{font-size:14px;color:#8888aa;line-height:1.65;padding:14px 22px 16px;border-bottom:1px solid var(--border);margin:0;}
.theme-entries{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));}
.theme-entry{padding:14px 18px;border-right:1px solid var(--border);border-bottom:1px solid var(--border);transition:background .15s;}
.theme-entry:hover{background:rgba(255,255,255,.025);} 
.theme-entry-header{display:flex;align-items:center;gap:8px;margin-bottom:7px;flex-wrap:wrap;}
.theme-entry-label{font-family:'Share Tech Mono',monospace;font-size:13px;color:#e0d8ff;}
.theme-entry-type{font-size:11px;padding:2px 6px;border:1px solid;white-space:nowrap;flex-shrink:0;}
.theme-entry-desc{font-size:13px;color:#6868a0;line-height:1.6;margin:0;}

/* ══════════════════════════════════════
   ABOUT
══════════════════════════════════════ */
.about-card{background:var(--panel);border:2px solid var(--border);padding:28px;max-width:800px;position:relative;overflow:hidden;transition:box-shadow .2s;}
.about-card:hover{box-shadow:0 8px 40px rgba(187,68,255,.12);} 
.about-card::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--rainbow-anim);background-size:200% 100%;animation:rainbowScroll 2.5s linear infinite;}
.about-card h2{font-family:'Share Tech Mono',monospace;font-size:16px;color:#FFD700;margin-bottom:14px;}
.about-card p{font-size:15px;color:#9898b8;line-height:1.75;margin-bottom:14px;} 
.stats-row{display:flex;gap:14px;flex-wrap:wrap;margin-top:20px;}
.stat-box{background:var(--card);border:2px solid var(--border);padding:16px 20px;text-align:center;flex:1;min-width:90px;position:relative;overflow:hidden;transition:transform .15s,border-color .15s;}
.stat-box:hover{transform:translateY(-3px);border-color:var(--accent);} 
.stat-box::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--rainbow-anim);background-size:200% 100%;animation:rainbowScroll 3s linear infinite;} 
.stat-num{font-family:'Share Tech Mono',monospace;font-size:22px;color:var(--accent);} 
.stat-label{font-size:13px;color:#555;margin-top:5px;} 

/* ══════════════════════════════════════
   FOOTER
══════════════════════════════════════ */
footer{
  margin-top:50px;background:#060410;
  border-top:3px solid transparent;border-image:var(--rainbow) 1;
  padding:18px 20px;text-align:center;color:#3a3050;font-size:13px;
}
footer span{cursor:pointer;color:#4a3860;transition:color .2s;}
footer span:hover{color:var(--accent);} 

/* ══════════════════════════════════════
   RAINBOW-RUNNER EASTER EGG MODAL
══════════════════════════════════════ */
#rainbow-runner-overlay{
  display:none;position:fixed;inset:0;z-index:9999;
  background:rgba(5,3,15,.92);backdrop-filter:blur(10px);
  align-items:center;justify-content:center;flex-direction:column;gap:16px;
}
#rainbow-runner-overlay.show{display:flex;animation:overlayIn .3s ease-out;}
@keyframes overlayIn{from{opacity:0;}to{opacity:1;}}
#rainbow-runner-container{background:var(--panel);border:2px solid var(--border);padding:0;position:relative;overflow:hidden;}
#rainbow-runner-container::before{content:'';position:absolute;top:0;left:0;right:0;height:3px;background:var(--rainbow-anim);background-size:200% 100%;animation:rainbowScroll 2s linear infinite;z-index:2;}
#rainbow-runner-header{font-family:'Share Tech Mono',monospace;font-size:13px;color:var(--accent);padding:12px 20px;border-bottom:1px solid var(--border);background:var(--card);display:flex;justify-content:space-between;align-items:center;}
#rainbow-runner-close{background:transparent;border:1px solid var(--border);color:#888;padding:4px 10px;cursor:pointer;font-family:'Share Tech Mono',monospace;font-size:12px;transition:border-color .15s,color .15s;} 
#rainbow-runner-close:hover{border-color:var(--rb1);color:var(--rb1);} 
#rainbow-runner-canvas{display:block;} 
#rainbow-runner-msg{font-family:'Share Tech Mono',monospace;font-size:13px;color:#5a5080;padding:10px 20px;text-align:center;} 
#rainbow-runner-score-display{color:var(--rb3);} 

/* scrollbar */
::-webkit-scrollbar{width:7px;} 
::-webkit-scrollbar-track{background:#060410;} 
::-webkit-scrollbar-thumb{background:linear-gradient(180deg,var(--rb1),var(--rb6));border-radius:0;}