/* ============================================================
   idris.world - arcade · comic · manga · chaos
   ============================================================ */

@import url("https://fonts.googleapis.com/css2?family=Bangers&family=Luckiest+Guy&family=Press+Start+2P&family=Bungee&family=Baloo+2:wght@600;800&display=swap");

:root {
  --ink:      #0a0a1a;
  --paper:    #fffbe6;
  --pink:     #ff2e88;
  --hotpink:  #ff005c;
  --blue:     #2ec4ff;
  --cyan:     #00e5ff;
  --yellow:   #ffd60a;
  --orange:   #ff8c00;
  --red:      #ff3b30;
  --green:    #39ff88;
  --lime:     #c6ff00;
  --purple:   #8a2be2;
  --indigo:   #5a00ff;
  --shadow:    4px 4px 0 var(--ink);
  --shadow-lg: 8px 8px 0 var(--ink);
  --shadow-xl: 12px 12px 0 var(--ink);
  font-family: "Baloo 2", system-ui, sans-serif;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

/* ============================================================
   Background - animated comic sky, speed lines, halftone dots
   ============================================================ */
body {
  color: var(--ink);
  min-height: 100vh;
  overflow-x: hidden;
  background: #0a0a1f;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 88% 22%, #fff, transparent),
    radial-gradient(2px 2px at 44% 55%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 22% 78%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 76% 82%, #fff, transparent),
    radial-gradient(2px 2px at 60% 12%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 30% 40%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 70% 60%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 90% 48%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 10% 60%, #fff, transparent),
    radial-gradient(2px 2px at 55% 88%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 35% 25%, #fff, transparent),
    radial-gradient(ellipse 400px 300px at 20% 25%, rgba(46,196,255,0.12), transparent),
    radial-gradient(ellipse 500px 400px at 80% 75%, rgba(138,43,226,0.15), transparent),
    linear-gradient(180deg, #0a0a1f 0%, #12052e 100%);
  background-size: 220px 220px, 200px 200px, 300px 300px, 250px 250px, 250px 250px, 200px 200px, 220px 220px, 260px 260px, 180px 180px, 240px 240px, 280px 280px, 200px 200px, auto, auto, auto;
  background-attachment: fixed;
}

body::before {
  /* scanlines overlay */
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.04) 0 2px, transparent 2px 4px);
  z-index: 1;
}

/* floating comic words in background */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image:
    radial-gradient(ellipse 60px 40px at 10% 40%, rgba(255,255,255,0.15), transparent),
    radial-gradient(ellipse 80px 50px at 90% 70%, rgba(255,255,255,0.12), transparent);
}

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

/* ============================================================
   Header
   ============================================================ */
header {
  padding: 2.5rem 1.5rem 1.5rem;
  text-align: center;
  border-bottom: 6px solid var(--ink);
  background: linear-gradient(180deg, rgba(255,255,255,0.25), transparent);
  backdrop-filter: blur(2px);
}

.pow, .zap, .boom, .bam {
  position: absolute;
  font-family: "Bangers", cursive;
  font-size: 2rem;
  -webkit-text-stroke: 2.5px var(--ink);
  filter: drop-shadow(3px 3px 0 var(--ink));
  animation: pulse 1.5s ease-in-out infinite;
}
.pow  { top: 1rem;   left: 1.5rem;  color: var(--red);    transform: rotate(-14deg); }
.zap  { top: 1rem;   right: 1.5rem; color: var(--cyan);   transform: rotate(12deg); animation-delay: 0.3s; }
.boom { bottom: 1rem; left: 2rem;   color: var(--yellow); transform: rotate(-6deg); animation-delay: 0.6s; font-size: 1.5rem; }
.bam  { bottom: 1rem; right: 2rem;  color: var(--green);  transform: rotate(8deg);  animation-delay: 0.9s; font-size: 1.5rem; }

@keyframes pulse {
  0%,100% { transform: scale(1)   rotate(var(--r, 0deg)); }
  50%     { transform: scale(1.2) rotate(var(--r, 0deg)); }
}

header h1, header h1 a {
  font-family: "Luckiest Guy", cursive;
  font-size: clamp(3rem, 10vw, 7rem);
  letter-spacing: 2px;
  margin: 0;
  line-height: 1;
  color: var(--yellow);
  -webkit-text-stroke: 4px var(--ink);
  text-shadow:
    5px 5px 0 var(--pink),
    10px 10px 0 var(--cyan),
    14px 14px 0 var(--ink);
  text-decoration: none;
  display: inline-block;
  animation: wobble 3.5s ease-in-out infinite;
}
@keyframes wobble {
  0%,100% { transform: rotate(-1.5deg) scale(1); }
  25%     { transform: rotate(1.5deg) scale(1.02); }
  75%     { transform: rotate(-0.5deg) scale(0.99); }
}

header p.tagline {
  font-family: "Bangers", cursive;
  font-size: 1.4rem;
  letter-spacing: 2px;
  color: var(--paper);
  -webkit-text-stroke: 1.5px var(--ink);
  margin: 0.75rem 0 1.25rem;
}

/* ============================================================
   Nav - comic badges
   ============================================================ */
nav { display: flex; justify-content: center; }

nav ul {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  padding: 0;
  margin: 0;
  justify-content: center;
}

nav a {
  display: inline-block;
  padding: 0.6rem 1.15rem;
  font-family: "Bangers", cursive;
  font-size: 1.2rem;
  letter-spacing: 1.5px;
  color: var(--ink);
  background: var(--paper);
  text-decoration: none;
  border: 3px solid var(--ink);
  border-radius: 999px;
  box-shadow: var(--shadow);
  transition: transform 0.1s, box-shadow 0.1s, background 0.1s;
}

nav a:hover { transform: translate(-3px, -3px) rotate(-2deg); box-shadow: 7px 7px 0 var(--ink); }
nav a:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 var(--ink); }

nav li:nth-child(1) a.active { background: var(--red);    color: var(--paper); }
nav li:nth-child(2) a.active { background: var(--green);  color: var(--ink); }
nav li:nth-child(3) a.active { background: var(--blue);   color: var(--ink); }
nav li:nth-child(4) a.active { background: var(--pink);   color: var(--paper); }
nav li:nth-child(5) a.active { background: var(--purple); color: var(--paper); }
nav li:nth-child(6) a.active { background: var(--yellow); color: var(--ink); }
nav li:nth-child(7) a.active { background: var(--ink);    color: var(--yellow); }

/* ============================================================
   Main + cards
   ============================================================ */
main {
  padding: 2rem 1.5rem 6rem;
  max-width: 1200px;
  margin: 0 auto;
}

main h2 {
  font-family: "Luckiest Guy", cursive;
  font-size: clamp(2rem, 5vw, 3rem);
  color: var(--paper);
  -webkit-text-stroke: 2px var(--ink);
  text-shadow: 4px 4px 0 var(--ink);
  margin: 0 0 1rem;
  letter-spacing: 1px;
}

main p { font-size: 1.15rem; font-weight: 600; line-height: 1.5; max-width: 62ch; color: var(--paper); text-shadow: 2px 2px 0 rgba(0,0,0,0.5); }
.hero p, .info-card p, .planet p, .pillar p, .concept p, .about-section p, .fact-card, .quiz p, .sim-wrap p, .game-wrap p { color: var(--ink); text-shadow: none; }

/* ============================================================
   Hero - "Hi I'm Idris Hegazi"
   ============================================================ */
.hero {
  background: var(--paper);
  border: 5px solid var(--ink);
  border-radius: 20px;
  box-shadow: var(--shadow-xl);
  padding: 2.5rem 2rem;
  margin: 1rem 0 2.5rem;
  position: relative;
  transform: rotate(-0.5deg);
}

.hero::before {
  content: "★";
  position: absolute;
  top: -28px; right: 30px;
  font-size: 4rem;
  color: var(--yellow);
  -webkit-text-stroke: 4px var(--ink);
  filter: drop-shadow(4px 4px 0 var(--ink));
  animation: spin 6s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.hero h2.hi {
  font-family: "Luckiest Guy", cursive;
  font-size: clamp(2.2rem, 6vw, 4rem);
  color: var(--hotpink);
  -webkit-text-stroke: 3px var(--ink);
  text-shadow: 5px 5px 0 var(--yellow), 8px 8px 0 var(--ink);
  margin: 0 0 0.5rem;
  letter-spacing: 1px;
  line-height: 1.05;
}

.hero .age {
  font-family: "Bangers", cursive;
  font-size: 1.6rem;
  letter-spacing: 1.5px;
  color: var(--indigo);
  -webkit-text-stroke: 1px var(--ink);
  margin: 0 0 1rem;
}

.hero p { font-size: 1.2rem; }

/* AI Team formula badge */
.ai-formula {
  display: inline-block;
  margin-top: 1.25rem;
  padding: 1rem 1.5rem;
  background: var(--ink);
  color: var(--yellow);
  border: 4px solid var(--yellow);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  font-family: "Bungee", "Luckiest Guy", cursive;
  font-size: clamp(1rem, 2.5vw, 1.4rem);
  letter-spacing: 1.5px;
  transform: rotate(1deg);
}
.ai-formula .plus  { color: var(--cyan); margin: 0 0.4rem; }
.ai-formula .eq    { color: var(--pink); margin: 0 0.4rem; }
.ai-formula .team  { color: var(--green); }
.ai-formula .big   { font-size: 1.3em; color: var(--yellow); }

/* Speech bubble */
.bubble {
  position: relative;
  display: inline-block;
  margin-top: 1.25rem;
  padding: 0.9rem 1.3rem;
  background: var(--cyan);
  color: var(--ink);
  border: 3px solid var(--ink);
  border-radius: 16px;
  font-family: "Bangers", cursive;
  font-size: 1.2rem;
  letter-spacing: 1px;
  box-shadow: var(--shadow);
  transform: rotate(-1deg);
}
.bubble::after {
  content: "";
  position: absolute;
  bottom: -14px; left: 30px;
  border: 10px solid transparent;
  border-top-color: var(--cyan);
}
.bubble::before {
  content: "";
  position: absolute;
  bottom: -18px; left: 26px;
  border: 12px solid transparent;
  border-top-color: var(--ink);
}

/* ============================================================
   Heroes grid - character tiles (placeholders, no copyrighted art)
   ============================================================ */
.heroes-title {
  font-family: "Luckiest Guy", cursive;
  font-size: clamp(1.8rem, 4.5vw, 2.8rem);
  color: #ffd700;
  -webkit-text-stroke: 2.5px var(--ink);
  text-shadow: 4px 4px 0 #39ff88, 7px 7px 0 var(--ink);
  margin: 2rem 0 1rem;
  text-align: center;
  letter-spacing: 1.5px;
}

.heroes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.heroes { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); }

.hero-tile {
  aspect-ratio: 1;
  border: 5px solid var(--ink);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0.6rem;
  font-family: "Bungee", "Luckiest Guy", cursive;
  letter-spacing: 1px;
  text-align: center;
  position: relative;
  overflow: hidden;
  transition: transform 0.15s;
}
.hero-tile:hover { transform: translate(-3px, -3px) rotate(-3deg); box-shadow: 10px 10px 0 var(--ink); }

.hero-tile .icon {
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(3px 3px 0 rgba(0,0,0,0.35));
}
.hero-tile .icon svg { width: 100%; height: 100%; }

.hero-tile .label {
  font-size: 1.1rem;
  margin-top: 0.6rem;
  padding: 0.25rem 0.6rem;
  background: var(--ink);
  color: var(--yellow);
  border-radius: 999px;
  border: 2px solid var(--yellow);
  letter-spacing: 1.5px;
  box-shadow: 2px 2px 0 rgba(0,0,0,0.3);
  font-weight: 700;
  line-height: 1;
}

.hero-tile.sonic     { background: radial-gradient(circle at 30% 30%, #4dc3ff, #0066cc); }
.hero-tile.mario     { background: radial-gradient(circle at 30% 30%, #ff4d4d, #b30000); }
.hero-tile.thor      { background: radial-gradient(circle at 30% 30%, #c0c0ff, #4a4a9c); }
.hero-tile.ironman   { background: radial-gradient(circle at 30% 30%, #ffcc00, #b30000); }
.hero-tile.capam     { background: radial-gradient(circle at 30% 30%, #1e3a8a, #b91c1c); }
.hero-tile.vision    { background: radial-gradient(circle at 30% 30%, #ffd700, #6b21a8); }
.hero-tile.ultron    { background: radial-gradient(circle at 30% 30%, #c0c0c0, #2a2a2a); }
.hero-tile.thanos    { background: radial-gradient(circle at 30% 30%, #d28bff, #4a0080); }
.hero-tile.turtles   { background: radial-gradient(circle at 30% 30%, #7cff5e, #006622); }
.hero-tile.hulk      { background: radial-gradient(circle at 30% 30%, #7cff5e, #1a4d1a); }
.hero-tile.panda     { background: radial-gradient(circle at 30% 30%, #ff7eb9, #6b2d5c); }
.hero-tile.minion    { background: radial-gradient(circle at 30% 30%, #ffe14d, #8a5a00); }
.hero-tile.minecraft { background: radial-gradient(circle at 30% 30%, #7cbf5e, #3d5a24); }
.hero-tile.pizza     { background: radial-gradient(circle at 30% 30%, #ffb347, #b33a00); }
.hero-tile.burger    { background: radial-gradient(circle at 30% 30%, #d4a373, #5a3410); }
.hero-tile.fries     { background: radial-gradient(circle at 30% 30%, #ffe066, #b36b00); }
.hero-tile.icecream  { background: radial-gradient(circle at 30% 30%, #b8f5d0, #2d6b4a); }
.hero-tile.choco     { background: radial-gradient(circle at 30% 30%, #a05c2c, #3a1e0b); }
.hero-tile.sushi     { background: radial-gradient(circle at 30% 30%, #ffc4c4, #990000); }
.hero-tile.falafel   { background: radial-gradient(circle at 30% 30%, #c8a032, #5a4410); }
.hero-tile.knafeh    { background: radial-gradient(circle at 30% 30%, #ff9933, #802000); }
.hero-tile.noodles   { background: radial-gradient(circle at 30% 30%, #ffe699, #8a5a00); }
.hero-tile.fish      { background: radial-gradient(circle at 30% 30%, #ffd480, #a35c00); }
.hero-tile.pasta     { background: radial-gradient(circle at 30% 30%, #ffd966, #8b4500); }

/* ============================================================
   Floating randomized photo album (bottom-right)
   ============================================================ */
.photo-album {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 180px;
  height: 180px;
  border: 5px solid var(--ink);
  border-radius: 18px;
  box-shadow: var(--shadow-lg);
  background: var(--paper);
  overflow: hidden;
  z-index: 100;
  transform: rotate(-3deg);
  animation: jiggle 4s ease-in-out infinite;
}
@keyframes jiggle {
  0%,100% { transform: rotate(-3deg); }
  50%     { transform: rotate(3deg); }
}
.photo-album img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.6s ease-in-out;
}
.photo-album img.active { opacity: 1; }
.photo-album::after {
  content: "★ ART ★";
  position: absolute;
  bottom: 6px; left: 0; right: 0;
  text-align: center;
  font-family: "Bangers", cursive;
  font-size: 0.9rem;
  color: var(--paper);
  -webkit-text-stroke: 1.5px var(--ink);
  text-shadow: 2px 2px 0 var(--ink);
  letter-spacing: 2px;
  pointer-events: none;
}

@media (max-width: 600px) {
  .photo-album { width: 120px; height: 120px; bottom: 10px; right: 10px; }
}

/* ============================================================
   Gallery grid (used on tab pages)
   ============================================================ */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.2rem;
}
.card {
  background: var(--paper);
  border: 4px solid var(--ink);
  border-radius: 14px;
  padding: 0.75rem;
  box-shadow: var(--shadow);
  transition: transform 0.15s, box-shadow 0.15s;
}
.card:hover { transform: translate(-3px, -3px) rotate(-1deg); box-shadow: 8px 8px 0 var(--ink); }
.card img, .card video { width: 100%; border-radius: 8px; display: block; border: 2px solid var(--ink); }
.card small { display: block; margin-top: 0.5rem; font-family: "Bangers", cursive; font-size: 1rem; letter-spacing: 1px; }

/* ============================================================
   Lab list
   ============================================================ */
.lab-list { list-style: none; padding: 0; display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.lab-list li {
  background: var(--paper);
  border: 4px solid var(--ink);
  border-radius: 14px;
  padding: 1rem;
  box-shadow: var(--shadow);
  transition: transform 0.15s;
}
.lab-list li:hover { transform: rotate(-1deg) translate(-2px, -2px); }
.lab-list a { font-family: "Bangers", cursive; font-size: 1.3rem; letter-spacing: 1px; text-decoration: none; color: var(--ink); }
.lab-list a::before { content: "▶ "; color: var(--red); }

/* ============================================================
   Footer - subtle, no chest-beating
   ============================================================ */
footer {
  padding: 1.5rem 1.5rem;
  text-align: center;
  background: var(--ink);
  color: var(--cyan);
  font-family: "Press Start 2P", monospace;
  font-size: 0.6rem;
  letter-spacing: 1.5px;
  border-top: 6px solid var(--hotpink);
}
footer a { color: var(--yellow); }

/* ============================================================
   Accessibility
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  header h1, .hero::before, .pow, .zap, .boom, .bam, .photo-album { animation: none; }
}