:root {
  --bg: #05050A; --surface: #0C0C14; --surface-2: #13131F; --surface-3: #1A1A2E;
  --line: rgba(255,255,255,0.05); --line-strong: rgba(255,255,255,0.1); --line-active: rgba(255,255,255,0.18); --glass-border: var(--line); --card-border: var(--line); --card-border-hover: rgba(124,124,255,0.28);
  --text: #F0F0F5; --text-dim: #A0A0B5; --text-faint: #5C5C70;
  --primary: #7C7CFF; --primary-light: #A78BFA; --primary-deep: #5A3FD4;
  --primary-glow: rgba(124,124,255,0.3);
  --accent-soft: rgba(124,124,255,0.12);
  --secondary: #2DD4A8; --secondary-light: #6EE7C0;
  --secondary-glow: rgba(45,212,168,0.25);
  --accent-2-soft: rgba(45,212,168,0.12);
  --accent: #ff6b9d; --accent-light: #ffb3cc;
  --gold: #F5A623; --gold-light: #F7C948;
  --danger: #ff4757; --success: #00d68f; --warning: #ffa502;
  --font-body: 'Inter', system-ui, -apple-system, sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Inter', sans-serif;
  --font: var(--font-body);
  --mono: 'JetBrains Mono', 'Cascadia Code', 'Fira Code', monospace;
  --radius-sm: 8px; --radius: 14px; --radius-lg: 20px; --radius-xl: 24px;
  --shadow-card: 0 8px 32px rgba(0,0,0,0.4);
  --shadow-glow: 0 0 60px rgba(124,124,255,0.15);
  --shadow-glow-primary: 0 0 40px rgba(124,124,255,0.18), 0 0 80px rgba(45,212,168,0.06);
  --shadow-glow-gold: 0 0 40px rgba(245,166,35,0.15), 0 0 80px rgba(255,107,157,0.05);
  --gradient-hero: linear-gradient(135deg,#7C7CFF 0%,#A78BFA 50%,#2DD4A8 100%);
  --ease-spring: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-bounce: cubic-bezier(0.68, -0.3, 0.27, 1.3);
  --navbar-blur: 24px;
  --card-radius: 20px;
  --glass: rgba(255,255,255,0.02);
  --glass-hover: rgba(255,255,255,0.06);
  --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 28px; --space-xl: 36px; --space-2xl: 52px;
  --transition-fast: .2s cubic-bezier(.16,1,.3,1);
  --transition-med: .35s cubic-bezier(.16,1,.3,1);
  --transition-slow: .5s cubic-bezier(.16,1,.3,1);
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;-webkit-text-size-adjust:100%;touch-action:manipulation}
html{height:-webkit-fill-available;overflow-y:auto;overflow-x:hidden}
body{min-height:100vh;min-height:-webkit-fill-available}
html{scroll-behavior:auto}


/* ── Premium Design System ── */
/* Lazy-section default: hidden, revealed by IntersectionObserver */
.lazy-section{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease-smooth),transform .6s var(--ease-smooth);will-change:opacity,transform}
.lazy-section.visible{opacity:1;transform:translateY(0)}
/* Scroll performance – content-visibility for off-screen sections */
@media(min-width:769px){.webpage:not(.active){display:none}.service-card,.blog-card,.g-chapter,.g-widget,.dash-card,.premium-card,.achievement-card{content-visibility:auto;contain-intrinsic-size:200px}}
/* Ultra-wide screens */
@media(min-width:1600px){.webpage{max-width:1400px}.services-grid{grid-template-columns:repeat(4,1fr)}.blog-grid-home{grid-template-columns:repeat(3,1fr)}.hero h1{font-size:clamp(56px,6vw,120px)!important}.hero-tagline{font-size:clamp(24px,2.5vw,40px)}.g-chapter-grid{grid-template-columns:repeat(3,1fr)}.shop-grid{grid-template-columns:repeat(4,1fr)}}
/* Large desktop */
@media(min-width:1200px) and (max-width:1599px){.webpage{max-width:1200px}.services-grid{grid-template-columns:repeat(3,1fr)}.footer-inner{grid-template-columns:2fr 1fr 1fr 1fr}}
/* Tablet landscape */
@media(min-width:769px) and (max-width:1024px){.services-grid{grid-template-columns:repeat(2,1fr)}.blog-grid-home{grid-template-columns:repeat(2,1fr)}.hero h1{font-size:clamp(40px,8vw,70px)!important}.hero-tagline{font-size:clamp(18px,3vw,28px)}.shop-grid{grid-template-columns:repeat(3,1fr)}.achievements-grid{grid-template-columns:repeat(3,1fr)}.g-chapter-grid{grid-template-columns:repeat(2,1fr)}.dash-cards{grid-template-columns:repeat(2,1fr)}.game-nav-buttons button{font-size:12px;padding:10px 14px}}
/* Tablet portrait */
@media(min-width:600px) and (max-width:768px){.services-grid{grid-template-columns:repeat(2,1fr)}.shop-grid{grid-template-columns:repeat(2,1fr)}.g-chapter-grid{grid-template-columns:1fr}}
/* Reusable utility classes */
.flex-center{display:flex;align-items:center;justify-content:center}
.flex-between{display:flex;align-items:center;justify-content:space-between}
.flex-col{display:flex;flex-direction:column}
.gap-4{gap:4px}.gap-8{gap:8px}.gap-12{gap:12px}.gap-16{gap:16px}.gap-20{gap:20px}.gap-24{gap:24px}
.text-gradient{background:linear-gradient(135deg,var(--primary-light),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.text-center{text-align:center}
.w-full{width:100%}
.glass{background:var(--glass);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid var(--glass-border)}
.glass-hover{transition:all var(--transition-med)}
.glass-hover:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.15);transform:translateY(-2px);box-shadow:var(--shadow-glow)}
.premium-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--card-radius);padding:30px;transition:all var(--transition-med);position:relative;overflow:hidden}
.premium-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(124,124,255,0.04),transparent 50%,rgba(45,212,168,0.025));opacity:0;transition:opacity .5s;pointer-events:none}
.premium-card:hover::before{opacity:1}
.premium-card:hover{border-color:var(--card-border-hover);transform:translateY(-6px);box-shadow:var(--shadow-card),var(--shadow-glow)}
.premium-card .icon{font-size:32px;margin-bottom:12px;display:block}
.elevate{transition:all var(--transition-med)}
.elevate:hover{transform:translateY(-4px);box-shadow:var(--shadow-glow)}
.hero-wrap{position:relative}
.hero-bg{position:absolute;inset:0;z-index:0;will-change:transform}
.hero-content{position:relative;z-index:1}
.scroll-reveal{opacity:0;transform:translateY(28px);transition:opacity .7s var(--ease-smooth),transform .7s var(--ease-smooth)}.scroll-reveal.visible{opacity:1;transform:translateY(0)}.scroll-reveal-delay-1{transition-delay:.12s}.scroll-reveal-delay-2{transition-delay:.24s}.scroll-reveal-delay-3{transition-delay:.36s}
/* Ensure above-the-fold hero content always visible */
.hero-content .scroll-reveal,.hero-content .lazy-section{opacity:1;transform:none;transition:none}
/* Disable scroll animation on mobile for performance */
@media(hover:none) and (max-width:768px){.scroll-reveal{opacity:1;transform:none;transition:none}.lazy-section{opacity:1;transform:none;transition:none}.orb-1,.orb-2{animation:none}.hero-emojis span{animation:none}.section-divider{animation:none}.ep-btn .ep-arrow{opacity:1;transform:none;transition:none}.exp-section:hover .exp-icon{transform:none}.service-card:hover .icon{transform:none}.typewriter::before{display:none}}
body{font-family:var(--font-body);background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;overflow-y:auto;position:relative;line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}
body::before{content:'';position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse at 20% 25%,rgba(124,124,255,0.08),transparent 55%),radial-gradient(ellipse at 80% 20%,rgba(45,212,168,0.05),transparent 50%);pointer-events:none}
body::after{content:'';position:fixed;inset:0;z-index:-2;background-image:radial-gradient(circle at 1px 1px,rgba(255,255,255,0.025) 1px,transparent 0);background-size:32px 32px;pointer-events:none;opacity:0.4}

/* ── Ambient Orbs ── */
.ambient-orbs{position:fixed;inset:0;z-index:0;pointer-events:none}
.ao{position:absolute;border-radius:50%;filter:blur(80px);animation:aoFloat 22s ease-in-out infinite}
.ao-1{width:650px;height:550px;background:rgba(124,124,255,0.07);top:-15%;left:-12%;animation-delay:0s}
.ao-2{width:500px;height:500px;background:rgba(45,212,168,0.05);bottom:-12%;right:-8%;animation-delay:-8s}
.ao-3{width:350px;height:350px;background:rgba(245,166,35,0.04);top:50%;left:50%;transform:translate(-50%,-50%);animation-delay:-16s}
@keyframes aoFloat{0%,100%{transform:translate(0,0) scale(1)}25%{transform:translate(30px,-20px) scale(1.06)}50%{transform:translate(-20px,15px) scale(0.95)}75%{transform:translate(-25px,-10px) scale(1.04)}}
/* ── Selection + Focus ── */
::-moz-selection{background:var(--primary-soft);color:var(--text)}
::selection{background:var(--primary-soft);color:var(--text)}
:focus-visible{outline:2px solid var(--primary);outline-offset:3px;border-radius:4px}
/* ── Premium Scrollbar ── */
::-webkit-scrollbar{width:5px}::-webkit-scrollbar-track{background:var(--bg)}
::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:var(--line-active)}
/* ── Pulse keyframe for hero badge ── */
@keyframes pulse{0%{transform:scale(.6);opacity:.7}100%{transform:scale(2.5);opacity:0}}
/* ── Caret blink ── */
@keyframes caretBlink{50%{opacity:0}}
@media(prefers-reduced-motion){body::before{animation:none}.ao{animation:none}}
#particle-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:0.5}
.sidebar-backdrop{position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.65);z-index:100;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s;pointer-events:none;cursor:pointer}
.sidebar-backdrop.open{opacity:1;visibility:visible;pointer-events:auto}
.navbar{position:sticky;top:0;left:0;width:100%;z-index:100;background:rgba(5,5,10,0.8);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);border-bottom:1px solid var(--line);padding:0 24px;height:68px;display:flex;align-items:center;justify-content:space-between;transition:background var(--transition-med)}
.navbar.scrolled{background:rgba(5,5,10,0.95);border-bottom-color:var(--line-strong)}
.nav-logo{font-size:1.15rem;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:10px;letter-spacing:-0.02em;user-select:none;font-family:var(--font-display)}
.nav-logo span{background:var(--gradient-hero);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.nav-links{display:flex;list-style:none;gap:28px;align-items:center}
.nav-links li{pointer-events:auto}
.nav-links li button{background:none;border:none;color:var(--text-dim);font-family:var(--font-body);padding:0;border-radius:0;cursor:pointer;font-size:0.88rem;font-weight:500;transition:color var(--transition-fast);position:relative;pointer-events:auto;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none}
.nav-links li button::after{content:'';position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--primary);border-radius:1px;transition:width var(--transition-med)}
.nav-links li button:hover{color:var(--text);background:none}
.nav-links li button:hover::after{width:100%}
.nav-links li button.active{color:var(--primary-light);background:none;box-shadow:none}
.hamburger{display:none;background:none;border:none;color:var(--text);font-size:24px;cursor:pointer;min-height:44px;min-width:44px;padding:0;touch-action:manipulation;pointer-events:auto;transition:opacity .2s}
.hamburger:hover{opacity:0.8}
.main-wrapper{position:relative;z-index:1;padding-top:64px;min-height:100vh}
.webpage{display:none;padding:52px 36px 80px;max-width:1200px;margin:0 auto}
.webpage.active{display:block}
@keyframes fadeSlideIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
.lazy-section{opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease-smooth),transform .6s var(--ease-smooth);will-change:opacity,transform}.page-title{font-size:32px;font-weight:800;margin-bottom:8px;background:linear-gradient(135deg,var(--primary-light),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:inline-block;letter-spacing:-0.5px}
.page-subtitle{color:var(--text-dim);margin-bottom:44px;font-size:15px;line-height:1.6}
.hero{text-align:center;padding:130px 0 90px;position:relative;max-width:1200px;margin:0 auto}
@keyframes blink{0%,100%{opacity:1}50%{opacity:0}}
@keyframes racePart{0%{transform:translateY(0) scale(1);opacity:0.8}100%{transform:translateY(-80px) scale(0);opacity:0}}
/* ===== HOMEPAGE PREMIUM ===== */
.hero-wrap{position:relative;overflow:hidden}
.hero-wrap::after{content:'';position:absolute;inset:0;z-index:0;background-image:radial-gradient(circle,rgba(255,255,255,0.025) 1px,transparent 1px);background-size:24px 24px;pointer-events:none;mask-image:radial-gradient(ellipse at center,black 25%,transparent 70%);-webkit-mask-image:radial-gradient(ellipse at center,black 25%,transparent 70%)}
.hero-wrap .orb{position:absolute;border-radius:50%;pointer-events:none;z-index:0;filter:blur(120px)}
.orb-1{width:700px;height:600px;background:rgba(124,124,255,0.08);top:-20%;left:-15%;animation:orbDrift1 20s var(--ease-smooth) infinite alternate;will-change:transform}
.orb-2{width:600px;height:550px;background:rgba(45,212,168,0.06);bottom:-15%;right:-10%;animation:orbDrift2 22s var(--ease-smooth) infinite alternate;will-change:transform}
.orb-3{width:400px;height:400px;background:rgba(245,166,35,0.04);top:30%;left:50%;transform:translate(-50%,-50%);animation:orbDrift3 18s var(--ease-smooth) infinite alternate;will-change:transform}
@keyframes orbDrift1{0%{transform:translate(0,0) scale(1)}25%{transform:translate(30px,-25px) scale(1.05)}50%{transform:translate(-20px,20px) scale(0.96)}75%{transform:translate(-25px,-10px) scale(1.04)}}
@keyframes orbDrift2{0%{transform:translate(0,0) scale(1)}25%{transform:translate(-30px,20px) scale(0.96)}50%{transform:translate(25px,-15px) scale(1.06)}75%{transform:translate(20px,10px) scale(0.98)}}
@keyframes orbDrift3{0%{transform:translate(-50%,-50%) scale(1)}25%{transform:translate(-40%,-55%) scale(1.04)}50%{transform:translate(-55%,-45%) scale(0.96)}75%{transform:translate(-35%,-50%) scale(1.02)}}
.floating-code{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:0;font-family:var(--mono);font-size:10px;color:rgba(124,124,255,0.08);line-height:1.8;letter-spacing:-0.3px}
.floating-code span{position:absolute;animation:codeFloat 30s linear infinite;opacity:0;white-space:nowrap}
.floating-code span:nth-child(1){top:10%;left:2%;font-size:14px;animation-delay:0s}
.floating-code span:nth-child(2){top:20%;right:5%;font-size:12px;animation-delay:-3s}
.floating-code span:nth-child(3){top:35%;left:5%;font-size:11px;animation-delay:-6s}
.floating-code span:nth-child(4){top:50%;right:3%;font-size:13px;animation-delay:-9s}
.floating-code span:nth-child(5){top:65%;left:6%;font-size:10px;animation-delay:-12s}
.floating-code span:nth-child(6){top:75%;right:8%;font-size:12px;animation-delay:-15s}
.floating-code span:nth-child(7){top:85%;left:3%;font-size:11px;animation-delay:-18s}
.floating-code span:nth-child(8){top:15%;right:10%;font-size:9px;animation-delay:-21s}
.floating-code span:nth-child(9){top:45%;left:8%;font-size:10px;animation-delay:-24s}
.floating-code span:nth-child(10){top:60%;right:6%;font-size:11px;animation-delay:-27s}
.floating-code span:nth-child(11){top:30%;left:1%;font-size:9px;animation-delay:-14s}
.floating-code span:nth-child(12){top:70%;right:1%;font-size:10px;animation-delay:-8s}
@keyframes codeFloat{0%{opacity:0;transform:translateY(10px)}5%{opacity:0.3}15%{opacity:0.1}20%{opacity:0;transform:translateY(-20px)}100%{opacity:0}}
.hero-emojis{display:flex;gap:22px;justify-content:center;margin-bottom:36px}
.hero-emojis span{font-size:36px;animation:heroFloat 5s var(--ease-smooth) infinite;filter:drop-shadow(0 0 30px rgba(124,124,255,0.25));will-change:transform}
.hero-emojis span:nth-child(2){animation-delay:0.3s}
.hero-emojis span:nth-child(3){animation-delay:0.6s}
.hero-emojis span:nth-child(4){animation-delay:0.9s}
.hero-emojis span:nth-child(5){animation-delay:1.2s}
.hero-emojis span:nth-child(6){animation-delay:1.5s}
.hero-emojis span:nth-child(7){animation-delay:1.8s}
@keyframes heroFloat{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-16px) rotate(4deg)}}
.hero h1{font-family:var(--font-display);font-size:clamp(2.5rem,5.5vw,4rem)!important;letter-spacing:-0.03em;margin-bottom:16px;line-height:1.08;max-width:750px;margin-left:auto;margin-right:auto}
.hero h1 span{background:var(--gradient-hero);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:none;animation:none;background-size:100%}
.hero-tagline{font-size:clamp(1rem,2vw,1.1rem);color:var(--text-dim);font-weight:400;margin-bottom:20px;max-width:520px;margin-left:auto;margin-right:auto;line-height:1.55}
.typewriter{display:inline-flex;align-items:center;gap:6px;padding:14px 36px;border-radius:99px;font-size:18px;color:var(--secondary);background:linear-gradient(135deg,rgba(45,212,168,0.08),rgba(124,124,255,0.04));border:1px solid rgba(45,212,168,0.12);margin-bottom:36px;box-shadow:0 0 30px rgba(45,212,168,0.08);max-width:100%;position:relative}
.typewriter::before{content:'';position:absolute;inset:-1px;border-radius:99px;background:linear-gradient(135deg,rgba(45,212,168,0.25),transparent,rgba(124,124,255,0.25));z-index:-1;opacity:0;transition:opacity .5s}
.typewriter:hover::before{opacity:1}
.typewriter .cursor{display:inline-block;width:2.5px;height:1.2em;background:var(--secondary);margin-left:3px;vertical-align:middle;animation:cursorBlink 1s step-end infinite;box-shadow:0 0 10px var(--secondary);border-radius:2px}
@keyframes cursorBlink{0%,100%{opacity:1}50%{opacity:0}}
/* explore grid */
.explore-grid{display:flex;flex-direction:column;gap:26px;max-width:960px;margin:0 auto;padding:0 16px}
.exp-section{background:var(--surface);border:1px solid var(--line);border-radius:var(--card-radius);padding:26px 30px 30px;transition:all var(--transition-med);position:relative;overflow:hidden}
.exp-section::before{content:'';position:absolute;inset:-1px;border-radius:calc(var(--card-radius) + 1px);background:linear-gradient(135deg,rgba(124,92,252,0.1),transparent 25%,rgba(0,212,212,0.07) 70%);z-index:-1;opacity:0;transition:opacity .5s}
.exp-section:hover::before{opacity:1}
.exp-section:hover{border-color:var(--card-border-hover);transform:translateY(-4px);box-shadow:var(--shadow-card),var(--shadow-glow)}
.exp-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.exp-icon{font-size:20px;width:34px;height:34px;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,rgba(255,255,255,0.06),rgba(255,255,255,0.01));border-radius:10px;border:1px solid rgba(255,255,255,0.04)}
.exp-label{font-size:13px;font-weight:700;letter-spacing:1.8px;text-transform:uppercase;color:var(--text-dim)}
.exp-line{flex:1;height:1px;background:linear-gradient(90deg,rgba(255,255,255,0.06),transparent)}
.exp-section:hover .exp-label{color:var(--text)}
.exp-section:hover .exp-icon{border-color:rgba(255,255,255,0.1);transform:scale(1.05)}
.exp-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:12px}
.ep-btn{display:flex;align-items:center;gap:12px;padding:15px 20px;border:none;border-radius:14px;font-size:15px;font-weight:600;font-family:var(--font);cursor:pointer;min-height:54px;transition:all .4s var(--ease-spring);text-align:left;position:relative;overflow:hidden;text-shadow:0 1px 2px rgba(0,0,0,0.2);letter-spacing:0.2px}
.ep-btn::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.15),transparent);transform:translateX(-100%);transition:transform .7s}
.ep-btn:hover::after{transform:translateX(100%)}
.ep-btn:hover{transform:translateY(-5px) scale(1.04);box-shadow:0 12px 40px rgba(0,0,0,0.25)!important}
.ep-btn:active{transform:translateY(0) scale(0.95)}
.ep-btn .ep-icon{font-size:22px;flex-shrink:0;width:30px;text-align:center}
.ep-btn .ep-label{flex:1;color:inherit;font-size:15px;font-weight:600}
.ep-btn .ep-arrow{font-size:15px;opacity:0;transform:translateX(-12px);transition:all .4s}
.ep-btn:hover .ep-arrow{opacity:1;transform:translateX(0)}
.ep-btn .ep-tag{font-size:10px;font-weight:700;letter-spacing:0.8px;text-transform:uppercase;padding:4px 12px;border-radius:99px;flex-shrink:0;opacity:0.95}
/* Projects - purple glow */
.ep-primary{background:linear-gradient(135deg,#7c5cfc,#a08aff);color:#fff;box-shadow:0 4px 20px rgba(124,92,252,0.3),inset 0 1px 0 rgba(255,255,255,0.15)}
.ep-primary:hover{box-shadow:0 12px 44px rgba(124,92,252,0.45),0 0 0 1px rgba(180,166,255,0.25),0 0 30px rgba(124,92,252,0.12)}
.ep-primary .ep-tag{background:rgba(255,255,255,0.15)}
/* Games - cyan glow */
.ep-cyan{background:linear-gradient(135deg,#00d4d4,#00e5ff);color:#0a0a18;box-shadow:0 4px 20px rgba(0,212,212,0.3),inset 0 1px 0 rgba(255,255,255,0.35)}
.ep-cyan:hover{box-shadow:0 12px 44px rgba(0,212,212,0.45),0 0 0 1px rgba(0,229,255,0.25),0 0 30px rgba(0,212,212,0.12)}
.ep-cyan .ep-tag{background:rgba(10,10,24,0.12);color:#0a0a18}
/* Courses - indigo glow */
.ep-indigo{background:linear-gradient(135deg,#6a4eff,#8a75ff);color:#fff;box-shadow:0 4px 20px rgba(106,78,255,0.3),inset 0 1px 0 rgba(255,255,255,0.15)}
.ep-indigo:hover{box-shadow:0 12px 44px rgba(106,78,255,0.45),0 0 0 1px rgba(138,117,255,0.25),0 0 30px rgba(106,78,255,0.12)}
.ep-indigo .ep-tag{background:rgba(255,255,255,0.15)}
/* AI Labs - pink glow */
.ep-pink{background:linear-gradient(135deg,#ff6b9d,#ff9ebd);color:#12122a;box-shadow:0 4px 20px rgba(255,107,157,0.3),inset 0 1px 0 rgba(255,255,255,0.35)}
.ep-pink:hover{box-shadow:0 12px 44px rgba(255,107,157,0.45),0 0 0 1px rgba(255,158,189,0.25),0 0 30px rgba(255,107,157,0.12)}
.ep-pink .ep-tag{background:rgba(18,18,42,0.12);color:#12122a}
/* Animation keyframes */
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{from{opacity:0;transform:scale(0.92)}to{opacity:1;transform:scale(1)}}
@keyframes slideInRight{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}
@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}
/* glow hover border */
.btn-glow::before{content:'';position:absolute;inset:-1px;border-radius:inherit;background:var(--gradient-hero);z-index:-1;opacity:0;transition:opacity .5s}
.btn-glow:hover::before{opacity:0.3}
.btn-glow:active{transform:translateY(0) scale(0.96)}
/* Dashboard premium cards */
.dash-stat{font-size:28px;font-weight:800;background:linear-gradient(135deg,var(--primary-light),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.dash-label{font-size:13px;color:var(--text-dim);font-weight:500;margin-top:4px}
/* Premium overlay styling */
.overlay-header-premium{background:var(--surface);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}
/* Section accent borders */
.section-accent{border-left:3px solid;border-image:linear-gradient(180deg,var(--primary),var(--secondary)) 1;padding-left:16px}.section-accent h3{font-size:18px;font-weight:700}
/* Progress bar premium */
.progress-premium{height:6px;border-radius:99px;background:rgba(255,255,255,0.06);overflow:hidden;position:relative}
.progress-premium-fill{height:100%;border-radius:99px;background:linear-gradient(90deg,var(--primary),var(--secondary));transition:width .6s var(--ease-smooth)}
.section-divider{width:60px;height:3px;margin:-4px auto 32px;background:var(--gradient-hero);border-radius:99px;opacity:0.6}
/* responsive */
@media(max-width:900px){.exp-row{grid-template-columns:repeat(2,1fr)}.navbar{padding:0 24px}.webpage{padding:40px 24px 80px}.footer{padding:52px 24px 28px}}
@media(max-width:600px){.exp-row{grid-template-columns:1fr}.hero{padding:56px 0 40px}.hero-emojis span{font-size:24px}.hero-emojis{gap:12px}.section-title{font-size:26px}.page-title{font-size:24px}.service-card{padding:26px 22px}.blog-card{padding:22px}.exp-section{padding:18px 18px 20px}.g-chapter{padding:16px}.dash-card{padding:18px 12px}.overlay-header{padding:12px 16px}.game-main{padding:16px}.player-stats{padding:14px 16px}.battle-area{padding:24px 18px 28px}.footer{padding:40px 18px 24px}}
/* SERVICES */
.services-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin:52px auto 64px;max-width:1140px;content-visibility:auto;contain-intrinsic-size:400px}
.service-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--card-radius);padding:36px 30px;transition:all var(--transition-med);cursor:default;position:relative;overflow:hidden;contain:layout style;will-change:transform}
.service-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(124,124,255,0.04),transparent 50%,rgba(45,212,168,0.025));opacity:0;transition:opacity .5s;pointer-events:none}
.service-card:hover::before{opacity:1}
.service-card:hover{border-color:var(--card-border-hover);transform:translateY(-7px);box-shadow:var(--shadow-card),var(--shadow-glow)}
.service-card .icon{font-size:26px;width:56px;height:56px;display:flex;align-items:center;justify-content:center;background:var(--surface-2);border-radius:var(--radius);margin-bottom:20px;transition:transform var(--transition-med);border:1px solid var(--line)}
.service-card:hover .icon{transform:scale(1.1) rotate(-6deg);background:var(--accent-soft)}
.service-card h3{font-size:20px;margin-bottom:12px;font-weight:700;letter-spacing:-0.3px;line-height:1.3}
.service-card p{color:var(--text-dim);font-size:14px;line-height:1.7}
.section-title{font-family:var(--font-display);font-size:clamp(1.8rem,3vw,2.3rem);font-weight:700;margin-bottom:12px;text-align:center;color:var(--text);display:block;letter-spacing:-0.02em;position:relative}
.section-title::after{content:'';display:block;width:60px;height:3px;background:var(--gradient-hero);border-radius:3px;margin:12px auto 0}
.section-sub{text-align:center;color:var(--text-dim);font-size:1rem;margin-bottom:52px;max-width:600px;margin-left:auto;margin-right:auto;line-height:1.6}
.blog-grid-home{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-bottom:48px;min-height:120px;content-visibility:auto;contain-intrinsic-size:400px}
.filter-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:32px}
.blog-controls{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-bottom:32px}
.blog-search{flex:1;min-width:200px}
.blog-search input{width:100%;padding:12px 20px;background:var(--surface-2);border:1px solid var(--line);border-radius:99px;color:var(--text);font-family:var(--font-body);font-size:14px;outline:none;transition:border var(--transition-fast)}
.blog-search input:focus{border-color:var(--primary);box-shadow:0 0 20px rgba(124,92,252,0.08),inset 0 0 0 1px rgba(124,92,252,0.15)}
.filter-tabs button{padding:9px 22px;border:1px solid var(--line);border-radius:99px;background:transparent;color:var(--text-dim);font-family:var(--font-body);font-size:14px;font-weight:500;cursor:pointer;transition:all var(--transition-fast);min-height:42px;touch-action:manipulation}
.filter-tabs button:hover{background:var(--glass);color:var(--text);border-color:rgba(124,92,252,0.35);transform:translateY(-1px)}
.filter-tabs button.active{background:rgba(124,92,252,0.15);color:var(--primary-light);border-color:var(--primary);box-shadow:0 0 16px rgba(124,92,252,0.12)}
.notes-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;min-height:120px;content-visibility:auto;contain-intrinsic-size:400px}
.note-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--card-radius);padding:28px;transition:all var(--transition-med);position:relative;overflow:hidden}
.note-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(124,124,255,0.04),transparent 50%,rgba(45,212,168,0.025));opacity:0;transition:opacity .45s;pointer-events:none}
.note-card:hover::before{opacity:1}
.note-card:hover{transform:translateY(-5px);border-color:var(--card-border-hover);box-shadow:var(--shadow-card),var(--shadow-glow)}
.note-card h4{font-size:16px;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.note-card .diagram{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0}
.note-card .node{padding:4px 10px;border-radius:6px;font-size:11px;font-weight:600;font-family:var(--mono);letter-spacing:.5px}
.node-purple{background:var(--accent-soft);color:var(--primary-light)}
.node-green{background:var(--accent-2-soft);color:var(--secondary)}
.node-pink{background:rgba(255,107,157,0.15);color:var(--accent)}
.node-gold{background:rgba(245,166,35,0.15);color:var(--gold)}
.node-blue{background:rgba(116,185,255,0.15);color:#74b9ff}
.note-card p{font-size:13px;color:var(--text-dim);line-height:1.6}
.blog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px}
.blog-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--card-radius);padding:28px;cursor:pointer;transition:all var(--transition-med);contain:layout style;will-change:transform;position:relative;overflow:hidden}
.blog-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(124,124,255,0.04),transparent 50%,rgba(45,212,168,0.025));opacity:0;transition:opacity .5s;pointer-events:none}
.blog-card:hover::before{opacity:1}
.blog-card:hover{transform:translateY(-7px);border-color:var(--card-border-hover);box-shadow:var(--shadow-card),var(--shadow-glow)}
.blog-card .tag{display:inline-block;padding:5px 14px;border-radius:8px;font-size:10px;font-weight:700;margin-bottom:14px;text-transform:uppercase;letter-spacing:.6px}
.blog-card h3{font-family:var(--font-display);font-size:20px;margin-bottom:10px;line-height:1.4;letter-spacing:-0.02em}
.blog-card .meta{font-size:12px;color:var(--text-dim);margin-bottom:12px;opacity:0.8}
.blog-card .meta span{margin-right:16px}
.blog-card p{font-size:14px;color:var(--text-dim);line-height:1.65;margin-bottom:18px}
.blog-card .read-more{color:var(--secondary);font-weight:600;font-size:14px;cursor:pointer;background:none;border:none;font-family:var(--font-body);min-height:44px;padding:0;transition:all .25s}
.blog-card .read-more:hover{color:var(--secondary-light);gap:6px}
.single-post{display:none}
.single-post.active{display:block}
.post-full{max-width:800px;margin:0 auto}
.post-full .back-btn{margin-bottom:24px}
.post-full h2{font-size:28px;margin-bottom:8px;letter-spacing:-0.3px}
.post-full .meta{color:var(--text-dim);font-size:14px;margin-bottom:24px;opacity:0.8}
.post-full .content{line-height:1.8;font-size:16px;color:var(--text)}
.post-full .content p{margin-bottom:16px}
.page-content{max-width:800px;line-height:1.9}
.page-content h2{font-size:22px;margin:28px 0 14px;color:var(--primary-light)}
.page-content p{color:var(--text-dim);margin-bottom:18px;font-size:15px}
.contact-form{display:flex;flex-direction:column;gap:16px;max-width:500px}
.contact-form input,.contact-form textarea{padding:15px 20px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm);color:var(--text);font-family:var(--font-body);font-size:15px;outline:none;transition:border var(--transition-fast);min-height:44px}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--primary)}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--primary);box-shadow:0 0 20px rgba(124,92,252,0.08),inset 0 0 0 1px rgba(124,92,252,0.15)}
.contact-form textarea{min-height:120px;resize:vertical}
.contact-form button{align-self:flex-start}
.footer{background:var(--surface);border-top:1px solid var(--line);padding:64px 36px 36px;position:relative;z-index:1;margin-top:100px;content-visibility:auto;contain-intrinsic-size:400px}
.footer-inner{max-width:1200px;margin:0 auto;display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;text-align:left}
@media(max-width:700px){.footer-inner{grid-template-columns:1fr 1fr;gap:24px}}
@media(max-width:450px){.footer-inner{grid-template-columns:1fr}}
.footer-brand .logo{font-size:20px;font-weight:800;background:linear-gradient(135deg,var(--primary-light),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:8px}
.footer-brand p{color:var(--text-dim);font-size:13px;line-height:1.6;max-width:320px}
.footer-col h4{color:var(--text);font-size:14px;font-weight:700;margin-bottom:12px}
.footer-brand h3{font-size:20px;margin-bottom:8px;background:linear-gradient(135deg,#a29bfe,#6c5ce7);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.footer-col h4{font-size:14px;font-weight:700;margin-bottom:12px;color:var(--text)}
.footer-col a{display:block;color:var(--text-dim);font-size:13px;text-decoration:none;padding:4px 0;transition:color .2s}
.footer-col a:hover{color:var(--primary-light)}
.footer-bottom a{color:var(--primary-light);text-decoration:none}
.footer-bottom{text-align:center;padding-top:24px;margin-top:24px;border-top:1px solid var(--line);color:var(--text-dim);font-size:12px}
.footer-bottom a:hover{text-decoration:underline}
.footer a{color:var(--primary-light);text-decoration:none;margin:0 8px}
.footer a:hover{text-decoration:underline}
.overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10000;background:rgba(5,5,10,0.96);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:none;flex-direction:column;overflow-y:auto}
.overlay.active{display:flex}
.overlay-header{display:flex;align-items:center;justify-content:space-between;padding:16px 36px;background:var(--surface);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10}
.overlay-header h2{font-size:20px;display:flex;align-items:center;gap:10px;font-weight:700;font-family:var(--font-display)}
.overlay-close{background:none;border:none;color:var(--text);font-size:20px;cursor:pointer;min-height:44px;min-width:44px;border-radius:10px;transition:background var(--transition-fast)}
.overlay-close:hover{background:var(--accent-soft)}
/* ── Overlay Premium Components ── */
.overlay-game{display:none;position:fixed;inset:0;z-index:10001;background:var(--bg);flex-direction:column;overflow:hidden}
.overlay-game.active{display:flex}
.overlay-game-header{display:flex;justify-content:space-between;align-items:center;padding:10px 16px;background:var(--surface);flex-shrink:0;z-index:10;border-bottom:1px solid var(--line)}
.overlay-game-title{font-weight:700;font-size:14px;letter-spacing:0.5px}
.overlay-game-stats{display:flex;gap:12px;font-size:12px;align-items:center}
.overlay-game-stat{display:flex;align-items:center;gap:4px}
.overlay-game-close{padding:4px 10px;font-size:11px}
/* ── Quiz Overlay ── */
.quiz-overlay{display:none;position:absolute;inset:0;z-index:25;background:rgba(0,0,0,0.85);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);align-items:center;justify-content:center;flex-direction:column}
.quiz-overlay.active{display:flex}
.quiz-modal{background:rgba(14,18,34,0.98);border:2px solid rgba(0,212,212,0.35);border-radius:var(--radius-xl);padding:32px 36px;text-align:center;color:var(--text);max-width:90vw;width:500px;box-shadow:0 24px 64px rgba(0,0,0,0.5),0 0 40px rgba(0,212,212,0.08)}
.quiz-modal h3{color:var(--secondary);margin-bottom:16px;font-size:1.5rem;font-weight:800}
.quiz-modal .q-text{font-size:1.25rem;margin-bottom:24px;line-height:1.45}
.quiz-modal .q-opts{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.quiz-modal .q-opts button{background:rgba(0,212,212,0.06);border:2px solid rgba(0,212,212,0.2);color:var(--text);font-size:1.1rem;font-weight:600;padding:14px;border-radius:14px;cursor:pointer;transition:all .25s var(--ease-spring);font-family:var(--font)}
.quiz-modal .q-opts button:hover{background:rgba(0,212,212,0.12);border-color:var(--secondary);transform:scale(1.02);box-shadow:0 4px 16px rgba(0,212,212,0.1)}
.quiz-modal .q-opts button:active{transform:scale(0.97)}
.quiz-modal .q-fb{margin-top:18px;font-size:1.2rem;font-weight:bold;min-height:28px}
/* ── Game Over Overlay ── */
.gameover-overlay{display:none;position:absolute;inset:0;z-index:20;background:rgba(0,0,0,0.85);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);align-items:center;justify-content:center;flex-direction:column}
.gameover-overlay.active{display:flex}
.gameover-modal{background:rgba(18,18,28,0.96);border:2px solid rgba(255,71,87,0.4);border-radius:var(--radius-xl);padding:32px 36px;text-align:center;color:var(--text);max-width:90vw;box-shadow:0 24px 60px rgba(0,0,0,0.5),0 0 40px rgba(255,71,87,0.06)}
.gameover-modal h2{font-size:2rem;color:var(--danger);margin-bottom:8px;font-weight:800}
.gameover-modal p{margin:8px 0;color:var(--text-dim)}
.gameover-modal .final-score{font-size:3rem;font-weight:800;color:var(--gold);margin:12px 0;text-shadow:0 0 30px rgba(255,217,61,0.2)}
.gameover-modal .btn-group{display:flex;flex-direction:column;gap:8px;align-items:center}
/* ── Touch Controls ── */
.touch-controls{position:absolute;bottom:10px;left:0;right:0;z-index:15;display:flex;justify-content:space-between;padding:0 12px;pointer-events:none}
.touch-group{display:flex;gap:6px;pointer-events:auto}
.touch-btn{width:54px;height:54px;border-radius:50%;border:2px solid rgba(0,212,212,0.25);background:rgba(0,0,0,0.5);color:var(--secondary);font-size:22px;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;display:flex;align-items:center;justify-content:center;transition:all .15s var(--ease-spring);font-family:var(--font);pointer-events:auto}
.touch-btn:active{transform:scale(0.88);background:rgba(0,0,0,0.7);border-color:var(--secondary)}
.touch-btn-green{border-color:rgba(0,214,143,0.3);color:var(--success)}
.touch-btn-red{border-color:rgba(255,71,87,0.3);color:var(--danger)}
.touch-btn-white{border-color:rgba(255,255,255,0.15);color:#fff;font-size:14px}
/* ── 3D Racing Game ── */
#racingOverlay .overlay-game-header{background:rgba(0,0,0,0.7)}
#racingContainer canvas{display:block;width:100%!important;height:100%!important}
#racingTouch{display:none;position:absolute;bottom:20px;left:0;right:0;z-index:10001;justify-content:center;gap:30px;padding:0;margin:0;pointer-events:none}
#racingTouch button{pointer-events:auto}
#racingTouch button{width:80px;height:80px;border-radius:50%;background:rgba(255,255,255,0.12);border:3px solid rgba(255,255,255,0.25);color:#fff;font-size:30px;display:flex;align-items:center;justify-content:center;-webkit-tap-highlight-color:transparent;user-select:none;touch-action:manipulation;cursor:pointer;font-family:var(--font);padding:0;margin:0;line-height:1;box-shadow:0 4px 20px rgba(0,0,0,0.3);transition:all 0.1s;pointer-events:auto}
#racingTouch button:active{transform:scale(0.88);background:rgba(255,255,255,0.3);border-color:#fff}
@media(min-width:768px){#racingTouch{display:none!important}}
@media(max-width:767px){#racingTouch{display:flex!important}}
@media(max-width:400px){#racingTouch button{width:65px;height:65px;font-size:24px;gap:20px}}
.toast-container{position:fixed;bottom:24px;right:24px;z-index:9999;display:flex;flex-direction:column;gap:10px;pointer-events:none;max-width:400px}
.toast{padding:14px 20px 10px;border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);color:var(--text);font-size:14px;font-weight:500;animation:toastSlideIn .4s var(--ease-smooth);min-width:280px;box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:6px;pointer-events:auto;position:relative;overflow:hidden}
.toast .t-row{display:flex;align-items:center;gap:10px}
.toast .t-icon{font-size:18px;flex-shrink:0}
.toast .t-bar{height:3px;border-radius:2px;background:rgba(255,255,255,0.1);overflow:hidden;margin-top:2px}
.toast .t-bar span{display:block;height:100%;border-radius:2px;animation:tBarShrink 2.5s linear forwards;transform-origin:left}
.toast.success{border-color:rgba(0,184,148,0.4)}.toast.success .t-bar span{background:var(--success)}
.toast.error{border-color:rgba(231,76,60,0.4)}.toast.error .t-bar span{background:var(--danger)}
.toast.warning{border-color:rgba(253,203,110,0.4)}.toast.warning .t-bar span{background:var(--gold)}
.toast.info{border-color:rgba(162,155,254,0.4)}.toast.info .t-bar span{background:var(--primary-light)}
@keyframes toastSlideIn{from{transform:translateX(120px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes tBarShrink{from{width:100%}to{width:0%}}
.toast.removing{animation:toastSlideOut .3s ease forwards}
@keyframes toastSlideOut{to{transform:translateX(120px);opacity:0}}
.modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;z-index:10002;background:rgba(0,0,0,0.75);display:none;align-items:center;justify-content:center;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px)}
.modal-overlay.active{display:flex}
.modal-box{background:var(--surface);border:1px solid var(--line);border-radius:var(--card-radius);padding:40px;max-width:420px;width:90%;text-align:center;box-shadow:var(--shadow-card)}
.modal-box h2{font-size:28px;margin-bottom:8px}
.modal-box p{color:var(--text-dim);margin-bottom:20px}
.btn-glow{display:inline-flex;align-items:center;justify-content:center;gap:6px;padding:10px 22px;font-family:var(--font-body);font-size:14px;font-weight:600;border:none;border-radius:10px;cursor:pointer;min-height:44px;transition:all var(--transition-med);position:relative;overflow:hidden;text-decoration:none}
.btn-glow::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.08),transparent);transform:translateX(-100%);transition:transform .6s}
.btn-glow:hover::after{transform:translateX(100%)}
.btn-glow:hover{transform:translateY(-2px)}
.btn-glow:active{transform:translateY(0) scale(0.97)}
.btn-primary{background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;box-shadow:0 4px 20px var(--primary-glow)}
.btn-primary:hover{box-shadow:0 8px 35px var(--primary-glow)}
.btn-secondary{background:var(--surface-2);border:1px solid var(--line);color:var(--text)}
.btn-secondary:hover{background:var(--surface-3);border-color:var(--line-strong)}
.btn-accent{background:linear-gradient(135deg,var(--gold),var(--accent));color:#12122a;box-shadow:0 4px 20px rgba(255,107,157,0.2)}
.btn-accent:hover{box-shadow:0 8px 35px rgba(255,107,157,0.3)}
.btn-sm{padding:6px 14px;font-size:12px;min-height:36px;border-radius:8px}
.modal-box .btn-glow{margin-top:8px}
.game-container{flex:1;display:flex}
.game-sidebar{width:220px;background:var(--surface);border-right:1px solid var(--line);padding:16px 0;display:flex;flex-direction:column;flex-shrink:0;position:relative}
.game-sidebar button{background:none;border:none;color:var(--text-dim);font-family:var(--font-body);padding:12px 20px;text-align:left;cursor:pointer;font-size:14px;font-weight:500;transition:all var(--transition-fast);display:flex;align-items:center;gap:12px;min-height:44px;position:relative}
.game-sidebar button i{width:20px;text-align:center;font-size:16px;transition:all var(--transition-fast)}
.game-sidebar button:hover{color:var(--text);background:var(--accent-soft)}
.game-sidebar button.active{color:var(--primary-light);background:var(--accent-soft);font-weight:600}
.game-sidebar button.active::before{content:'';position:absolute;left:0;top:4px;bottom:4px;width:3px;background:linear-gradient(180deg,var(--primary),var(--secondary));border-radius:0 3px 3px 0;box-shadow:0 0 10px rgba(124,92,252,0.4)}
.game-sidebar button.active i{color:var(--primary)}
.game-main{flex:1;padding:24px 28px;overflow-y:auto;scroll-behavior:smooth;min-height:200px}
.player-stats{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:linear-gradient(135deg,rgba(124,92,252,0.08),rgba(0,212,212,0.04));border:1px solid rgba(124,92,252,0.12);border-radius:var(--radius);padding:20px 24px;margin-bottom:24px;box-shadow:0 8px 32px -8px rgba(0,0,0,0.3)}
.player-stats .avatar{font-size:40px;filter:drop-shadow(0 0 12px rgba(162,155,254,0.3))}
.player-stats .info{flex:1;min-width:140px}
.player-stats .info .name{font-weight:800;font-size:18px;background:linear-gradient(135deg,var(--primary-light),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.player-stats .info .level{font-size:12px;color:var(--text-dim)}
.xp-bar{width:100%;height:8px;background:rgba(255,255,255,0.1);border-radius:4px;margin-top:4px;overflow:hidden}
.xp-bar span{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:4px;transition:width .5s}
.player-stats .stat{text-align:center;padding:0 12px}
.player-stats .stat .val{font-weight:700;font-size:18px}
.player-stats .stat .lbl{font-size:11px;color:var(--text-dim);text-transform:uppercase}
.game-nav-buttons{display:flex;gap:10px;margin-bottom:28px;flex-wrap:wrap}
.game-nav-buttons button{min-height:44px;font-size:13px;padding:10px 20px;border-radius:10px;font-weight:600}
.dash-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:16px;margin-bottom:28px}
.dash-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--card-radius);padding:24px 16px;text-align:center;cursor:pointer;transition:all var(--transition-med);position:relative;overflow:hidden}
.dash-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(124,124,255,0.04),transparent);opacity:0;transition:opacity .4s;pointer-events:none}
.dash-card:hover::before{opacity:1}
.dash-card:hover{transform:translateY(-6px);border-color:var(--card-border-hover);box-shadow:var(--shadow-card),var(--shadow-glow)}
.dash-card:active{transform:translateY(0) scale(0.97)}
.dash-card .dash-icon{font-size:34px;margin-bottom:10px;transition:all var(--transition-med)}
.dash-card:hover .dash-icon{transform:scale(1.15)}
.dash-card .dash-title{font-family:var(--font-display);font-weight:700;font-size:16px;margin-bottom:4px;letter-spacing:-0.02em}
.dash-card .dash-desc{font-size:12px;color:var(--text-dim)}
/* Game chapter cards */
.g-chapter-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px;margin-bottom:28px}
.g-chapter{background:var(--surface);border:1px solid var(--line);border-radius:var(--card-radius);padding:20px;transition:all var(--transition-med);position:relative}
.g-chapter::before{content:'';position:absolute;inset:0;border-radius:var(--radius);background:linear-gradient(135deg,rgba(124,92,252,0.03),transparent 50%,rgba(0,212,212,0.02));opacity:0;transition:opacity .5s;pointer-events:none}
.g-chapter:hover::before{opacity:1}
.g-chapter:hover{border-color:var(--card-border-hover);transform:translateY(-4px);box-shadow:var(--shadow-card)}
.g-chapter .icon{font-size:30px;margin-bottom:8px}
.g-chapter h4{font-size:17px;margin-bottom:6px}
.g-chapter .desc{font-size:13px;color:var(--text-dim);margin-bottom:10px;line-height:1.5}
.g-chapter .bar{height:6px;background:rgba(255,255,255,0.06);border-radius:99px;overflow:hidden;margin-bottom:8px}
.g-chapter .bar span{display:block;height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:99px;transition:width .5s}
.g-chapter .meta{display:flex;justify-content:space-between;font-size:12px;color:var(--text-dim);margin-bottom:10px}
/* Game widget cards */
.g-widget{background:linear-gradient(145deg,rgba(255,255,255,0.03),rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.05);border-radius:var(--radius);padding:20px;transition:all .3s var(--ease-smooth)}
.g-widget:hover{border-color:rgba(124,92,252,0.15);transform:translateY(-2px);box-shadow:0 4px 16px -4px rgba(0,0,0,0.2)}
.g-widget h4{font-size:16px;margin-bottom:10px;font-weight:700}
.g-section-title{font-size:20px;font-weight:800;margin-bottom:20px;display:flex;align-items:center;gap:8px;color:var(--text);letter-spacing:-0.3px}
.g-widget-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px;margin-top:20px}
.g-ach-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
/* Quiz area */
.quiz-container{background:linear-gradient(145deg,rgba(255,255,255,0.03),rgba(255,255,255,0.01));border:1px solid rgba(255,255,255,0.06);border-radius:var(--radius);padding:24px;margin-top:16px;box-shadow:0 4px 16px rgba(0,0,0,0.15)}
.loading-screen{position:absolute;inset:0;z-index:20;background:var(--bg);display:flex;align-items:center;justify-content:center;flex-direction:column;transition:opacity .5s ease}
.loading-screen h2{margin-bottom:24px;font-size:24px;font-weight:700}
.loading-bar{width:300px;height:6px;background:rgba(255,255,255,0.06);border-radius:99px;overflow:hidden}
.loading-bar span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:99px;transition:width .3s}
.onboarding{max-width:600px;margin:0 auto;padding:40px 24px}
.onboarding h2{text-align:center;margin-bottom:24px;font-weight:800}
.onboarding-step{margin-bottom:36px}
.onboarding-step h3{font-size:17px;margin-bottom:14px;color:var(--text-dim);font-weight:600}
.lang-options{display:flex;flex-wrap:wrap;gap:8px}
.lang-options button{padding:10px 20px;border:1px solid var(--glass-border);border-radius:10px;background:transparent;color:var(--text);font-family:var(--font);cursor:pointer;font-size:14px;font-weight:500;transition:all .25s var(--ease-spring);min-height:44px}
.lang-options button:hover{background:var(--glass);border-color:rgba(124,92,252,0.3)}
.lang-options button.selected{background:rgba(124,92,252,0.15);color:var(--primary-light);border-color:var(--primary)}
.avatar-grid{display:flex;flex-wrap:wrap;gap:10px}
.avatar-grid button{width:58px;height:58px;font-size:28px;border:2px solid transparent;border-radius:14px;background:var(--glass);cursor:pointer;transition:all .25s var(--ease-spring)}
.avatar-grid button:hover{border-color:rgba(124,92,252,0.3);background:rgba(255,255,255,0.04);transform:scale(1.05)}
.avatar-grid button.selected{border-color:var(--primary);background:rgba(124,92,252,0.15);transform:scale(1.05);box-shadow:0 0 16px rgba(124,92,252,0.2)}
.onboarding input[type=text]{padding:12px 16px;background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius-sm);color:var(--text);font-family:var(--font);font-size:15px;width:100%;margin-top:8px;outline:none;min-height:44px}
.onboarding input[type=text]:focus{border-color:var(--primary)}
.subject-options{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.subject-options button{padding:8px 18px;border:1px solid var(--glass-border);border-radius:8px;background:transparent;color:var(--text);font-family:var(--font);cursor:pointer;font-size:13px;font-weight:500;transition:all .25s var(--ease-spring);min-height:40px}
.subject-options button:hover{border-color:rgba(124,92,252,0.3);background:var(--glass)}
.subject-options button.selected{background:rgba(124,92,252,0.15);color:var(--primary-light);border-color:var(--primary)}
.quiz-container{max-width:700px;margin:0 auto}
.quiz-question{font-size:18px;font-weight:600;margin-bottom:20px}
.quiz-options{display:flex;flex-direction:column;gap:10px}
.quiz-option{padding:14px 18px;border:1px solid rgba(255,255,255,0.06);border-radius:12px;background:linear-gradient(135deg,rgba(255,255,255,0.025),rgba(255,255,255,0.01));color:var(--text);font-family:var(--font);font-size:15px;cursor:pointer;text-align:left;transition:all .2s;min-height:44px}
.quiz-option:hover{border-color:var(--primary);background:rgba(108,92,231,0.1)}
.quiz-option.correct{border-color:var(--success)!important;background:rgba(0,184,148,0.15)!important}
.quiz-option.wrong{border-color:var(--danger)!important;background:rgba(231,76,60,0.15)!important}
.quiz-option:disabled{cursor:default;opacity:.7}
.quiz-feedback{margin-top:16px;padding:12px;border-radius:10px;font-size:14px}
.quest-map{display:flex;flex-direction:column;gap:16px}
.quest-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--card-radius);padding:22px;transition:all var(--transition-med)}
.quest-item:hover{border-color:var(--card-border-hover);transform:translateY(-4px);box-shadow:0 16px 44px -10px rgba(0,0,0,0.25)}
.quest-item h4{margin-bottom:6px}
.quest-item p{font-size:13px;color:var(--text-dim);margin-bottom:10px}
.quest-progress{height:8px;background:rgba(255,255,255,0.1);border-radius:4px;overflow:hidden;margin-bottom:10px}
.quest-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--accent));border-radius:4px;transition:width .5s}
.battle-area{max-width:700px;margin:0 auto;text-align:center;background:linear-gradient(135deg,rgba(124,92,252,0.06),rgba(0,212,212,0.04),rgba(8,8,22,0.7));border:1px solid rgba(124,92,252,0.12);border-radius:var(--radius-lg);padding:36px 32px 40px;position:relative;overflow:hidden}
.battle-area::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at 30% 40%,rgba(124,92,252,0.06),transparent 50%),radial-gradient(circle at 70% 60%,rgba(0,212,212,0.04),transparent 50%);pointer-events:none;z-index:0}
.battle-area>*{position:relative;z-index:1}
.battle-title{font-size:22px;font-weight:800;margin-bottom:6px;background:linear-gradient(135deg,var(--primary-light),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;display:inline-block}
.battle-sub{font-size:13px;color:var(--text-dim);margin-bottom:20px}
.battle-hp{display:flex;justify-content:space-between;gap:20px;margin-bottom:24px}
.battle-hp .hp-card{flex:1;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:12px;padding:12px 14px;text-align:left}
.battle-hp .hp-label{display:flex;align-items:center;gap:6px;font-size:13px;font-weight:600;margin-bottom:6px}
.battle-hp .hp-label .hp-icon{font-size:16px}
.battle-hp .hp-label .hp-name{flex:1}
.battle-hp .hp-label .hp-num{font-size:12px;color:var(--text-dim);font-weight:500}
.battle-hp .hp-track{height:8px;background:rgba(255,255,255,0.06);border-radius:4px;overflow:hidden}
.battle-hp .hp-track span{display:block;height:100%;border-radius:4px;transition:width .5s;position:relative}
.battle-hp .hp-player .hp-track span{background:linear-gradient(90deg,var(--secondary),#00e5ff);box-shadow:0 0 12px rgba(0,212,212,0.2)}
.battle-hp .hp-ai .hp-track span{background:linear-gradient(90deg,var(--danger),#ff6b6b);box-shadow:0 0 12px rgba(255,71,87,0.2)}
.battle-timer-wrap{display:flex;justify-content:center;margin-bottom:18px}
.battle-timer-circle{width:68px;height:68px;border-radius:50%;display:flex;align-items:center;justify-content:center;border:3px solid var(--gold);background:radial-gradient(circle,rgba(253,203,110,0.12),rgba(253,203,110,0.02));font-size:28px;font-weight:800;color:var(--gold);box-shadow:0 0 25px rgba(253,203,110,0.15);animation:timerPulse 1.5s ease-in-out infinite}
@keyframes timerPulse{0%,100%{box-shadow:0 0 25px rgba(253,203,110,0.15)}50%{box-shadow:0 0 40px rgba(253,203,110,0.25)}}
.battle-question{margin:0 auto 18px;max-width:550px}
.battle-question .q-text{font-size:18px;font-weight:600;line-height:1.5;padding:16px 20px;background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,0.05);border-radius:12px}
.battle-options{display:flex;flex-direction:column;gap:10px;max-width:500px;margin:0 auto}
.shop-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px}
.shop-item{background:var(--surface);border:1px solid var(--line);border-radius:var(--card-radius);padding:22px;text-align:center;transition:all var(--transition-med)}
.shop-item:hover{border-color:rgba(255,217,61,0.25);transform:translateY(-5px);box-shadow:0 16px 44px -10px rgba(0,0,0,0.3),var(--shadow-glow-gold)}
.shop-item .icon{font-size:36px;margin-bottom:8px}
.shop-item h4{font-size:14px;margin-bottom:4px}
.shop-item p{font-size:12px;color:var(--text-dim);margin-bottom:12px}
.shop-item .price{font-size:16px;font-weight:700;color:var(--gold);margin-bottom:8px}
.leaderboard-list{max-width:500px;margin:0 auto}
.lb-entry{display:flex;align-items:center;gap:12px;padding:14px 18px;margin-bottom:8px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);transition:all var(--transition-med)}
.lb-entry:hover{background:rgba(124,92,252,0.08);border-color:rgba(124,92,252,0.15);transform:translateX(4px);box-shadow:0 2px 8px rgba(0,0,0,0.15)}
.lb-entry .rank{font-weight:800;font-size:16px;width:30px;color:var(--gold)}
.lb-entry .av{font-size:20px}
.lb-entry .nm{flex:1;font-weight:600}
.lb-entry .sc{color:var(--gold);font-weight:700}
.achievements-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.achievement-card{background:linear-gradient(145deg,rgba(255,255,255,0.04),rgba(255,255,255,0.01));border:1px solid var(--card-border);border-radius:var(--card-radius);padding:18px;text-align:center;transition:all .35s var(--ease-smooth)}
.achievement-card:hover{transform:translateY(-5px);border-color:var(--card-border-hover);box-shadow:0 12px 36px -8px rgba(0,0,0,0.25)}
.achievement-card.locked{opacity:.4;filter:grayscale(.8)}
.achievement-card .icon{font-size:28px;margin-bottom:6px}
.achievement-card h5{font-size:12px}
.achievement-card p{font-size:10px;color:var(--text-dim)}
.daily-reward{text-align:center;padding:28px;background:linear-gradient(135deg,rgba(255,217,61,0.04),rgba(255,107,157,0.02));border:1px solid rgba(255,217,61,0.08);border-radius:var(--radius);max-width:340px;margin:0 auto;box-shadow:0 4px 20px rgba(255,217,61,0.04)}
.daily-reward .reward-btn{width:80px;height:80px;border-radius:50%;border:2px solid var(--gold);background:linear-gradient(135deg,rgba(253,203,110,0.2),rgba(253,121,168,0.2));font-size:36px;cursor:pointer;transition:all .3s;margin-bottom:12px;min-height:80px;box-shadow:0 0 20px rgba(253,203,110,0.1)}
.daily-reward .reward-btn:hover{transform:scale(1.1);box-shadow:0 0 30px rgba(253,203,110,0.3)}
.daily-reward .reward-btn.claimed{opacity:.5;cursor:default;transform:none;box-shadow:none}
@media(max-width:768px){.overlay .game-main{padding-bottom:16px}}
.race-track{height:100px;background:linear-gradient(90deg,#1a1a3e,#0a0a1a);border-radius:var(--radius);border:1px solid var(--glass-border);position:relative;margin-bottom:24px;overflow:hidden;box-shadow:inset 0 0 30px rgba(0,0,0,0.3)}
.race-track .car{position:absolute;left:0;top:50%;transform:translateY(-50%);font-size:36px;transition:left .5s ease}
.race-track .finish{position:absolute;right:0;top:0;height:100%;width:4px;background:var(--gold)}
.race-stats{display:flex;gap:16px;margin-bottom:16px;flex-wrap:wrap}
.race-stats .rs{background:var(--glass);padding:8px 16px;border-radius:10px;font-size:14px}
.race-stats .rs strong{color:var(--gold)}
.race-code{max-width:600px;margin:0 auto}
.race-code .code-snip{background:rgba(20,20,40,0.8);padding:20px;border-radius:var(--radius-sm);font-family:var(--mono);font-size:16px;margin-bottom:16px;border:1px solid var(--glass-border);white-space:pre-wrap;word-break:break-all;box-shadow:inset 0 0 20px rgba(0,0,0,0.2)}
.race-code .code-snip .blank{display:inline-block;min-width:80px;border-bottom:2px dashed var(--primary-light);color:var(--primary-light)}
.race-code input[type=text]{width:100%;padding:14px 16px;background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius-sm);color:var(--text);font-family:var(--mono);font-size:16px;outline:none;margin-bottom:12px;min-height:44px}
.race-code input[type=text]:focus{border-color:var(--primary)}
.race-actions{display:flex;gap:8px;flex-wrap:wrap}
.race-actions button{min-height:44px}
.bug-container{max-width:700px;margin:0 auto}
.bug-stats{display:flex;gap:16px;margin-bottom:20px;flex-wrap:wrap}
.bug-stats .bs{background:var(--glass);padding:8px 16px;border-radius:10px;font-size:14px}
.bug-stats .bs strong{color:var(--gold)}
.bug-code{background:rgba(20,20,40,0.8);border-radius:var(--radius-sm);padding:20px;font-family:var(--mono);font-size:14px;line-height:1.8;margin-bottom:16px;border:1px solid var(--glass-border);overflow-x:auto;white-space:pre-wrap;box-shadow:inset 0 0 20px rgba(0,0,0,0.2)}
.bug-code .bug-line{background:rgba(231,76,60,0.2);border-left:3px solid var(--danger);padding:2px 8px;display:inline}
.bug-options{display:flex;flex-direction:column;gap:10px;margin-bottom:16px}
.bug-option{padding:12px 16px;border:1px solid var(--glass-border);border-radius:10px;background:var(--glass);color:var(--text);font-family:var(--font);cursor:pointer;text-align:left;font-size:14px;min-height:44px;transition:all .2s}
.bug-option:hover{border-color:var(--primary)}
.bug-option.correct{border-color:var(--success)!important;background:rgba(0,184,148,0.15)!important}
.bug-option.wrong{border-color:var(--danger)!important;background:rgba(231,76,60,0.15)!important}
/* ── Premium Nav Hover ── */
.nav-links li button{position:relative}
.nav-links li button::after{content:'';position:absolute;bottom:4px;left:50%;transform:translateX(-50%);width:0;height:2px;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:2px;transition:width .25s var(--ease-smooth)}
.nav-links li button:hover::after,.nav-links li button.active::after{width:60%}
.nav-links li button.active{background:rgba(124,92,252,0.12)!important;color:var(--primary-light)!important}
/* ── Premium Footer ── */
.footer{position:relative}
.footer::before{content:'';position:absolute;top:0;left:5%;right:5%;height:1px;background:linear-gradient(90deg,transparent,var(--primary),var(--secondary),var(--accent),transparent);opacity:0.6}
.faq-section{max-width:800px;margin:0 auto;padding:0 20px}.faq-list{display:flex;flex-direction:column;gap:12px;margin-top:28px}.faq-item{background:var(--surface);border:1px solid var(--glass-border);border-radius:12px;padding:18px 22px;cursor:pointer;transition:all .25s var(--ease-smooth)}.faq-item:hover{border-color:var(--primary-light);box-shadow:0 4px 20px rgba(108,92,231,0.15)}.faq-item h3{font-size:15px;font-weight:600;color:var(--text);margin:0;display:flex;align-items:center;gap:8px;cursor:pointer;user-select:none}.faq-item h3::before{content:'❓';font-size:14px}.faq-item[open] h3::before{content:'💡'}.faq-item div[itemprop="text"]{font-size:13px;color:var(--text-dim);line-height:1.7;margin-top:10px;padding-top:10px;border-top:1px solid var(--glass-border)}
.footer-col a{position:relative;padding-left:0;transition:all .25s var(--ease-smooth)}
.footer-col a::before{content:'›';position:absolute;left:-4px;opacity:0;transition:all .25s;color:var(--primary-light)}
.footer-col a:hover{padding-left:14px;color:var(--primary-light)}
.footer-col a:hover::before{opacity:1;left:0}
.footer-brand .logo{font-size:22px}
/* ── Premium Overlay Header ── */
.overlay-header{background:var(--surface);border-bottom:1px solid var(--line)}
.overlay-header h2{background:linear-gradient(135deg,var(--primary-light),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
/* ── Premium Game Sidebar ── */
.game-sidebar{background:linear-gradient(180deg,rgba(15,15,30,0.98),rgba(20,16,40,0.95))}
.game-sidebar button{font-size:13px;padding:11px 18px;border-radius:0 8px 8px 0;margin:2px 6px 2px 0;transition:all .2s var(--ease-smooth)}
.game-sidebar button i{font-size:15px;transition:all .2s}
.game-sidebar button:hover{background:linear-gradient(90deg,rgba(124,92,252,0.12),transparent)}
.game-sidebar button.active{background:linear-gradient(90deg,rgba(124,92,252,0.18),transparent)}
/* ── Premium Blog Card ── */
.blog-card::before{content:'';position:absolute;inset:0;border-radius:var(--radius-lg);background:linear-gradient(135deg,transparent,rgba(124,92,252,0.03));opacity:0;transition:opacity .4s;pointer-events:none}
.blog-card .read-more{font-size:13px;transition:all .25s var(--ease-spring)}
.blog-card:hover .read-more{letter-spacing:0.5px;color:var(--secondary-light)}
/* ── Premium Service Card ── */
.service-card::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--primary),var(--secondary),transparent);opacity:0;transition:opacity .5s}
.service-card:hover::after{opacity:1}
/* ── Premium Contact Form ── */
.contact-form input,.contact-form textarea{transition:all .25s}
.contact-form input:focus,.contact-form textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(124,92,252,0.1);background:rgba(255,255,255,0.04)}
/* ── Premium Hero Enhancements ── */
.hero h1 span{background-size:200% 200%;animation:gradientShift 6s ease infinite}
.pulse-dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--success);margin-right:6px;box-shadow:0 0 10px var(--success);animation:pulse 2s ease-in-out infinite;vertical-align:middle;position:relative}
.hero-badge{display:inline-flex;align-items:center;padding:8px 20px;border-radius:99px;font-size:13px;font-weight:600;color:var(--text-dim);background:linear-gradient(135deg,rgba(45,212,168,0.08),rgba(124,124,255,0.06));border:1px solid rgba(45,212,168,0.12);margin-bottom:24px;letter-spacing:.3px;backdrop-filter:blur(4px)}
.hero-badge:hover{background:linear-gradient(135deg,rgba(45,212,168,0.12),rgba(124,124,255,0.1));transform:translateY(-1px)}
/* ── Premium Section Title ── */
.section-title{position:relative}
.section-title::after{width:80px;height:3px;background:linear-gradient(90deg,var(--primary),var(--secondary),transparent);border-radius:3px;box-shadow:0 0 12px rgba(124,124,255,0.25);margin-top:14px}
/* ── Premium Hero Actions ── */
.hero-actions{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;margin-bottom:48px}
.btn-cta-secondary{display:inline-flex;align-items:center;gap:8px;padding:16px 36px;background:var(--surface-2);color:var(--text);font-family:var(--font-body);font-size:16px;font-weight:600;border:1px solid var(--line);border-radius:99px;cursor:pointer;transition:all var(--transition-med);min-height:54px}
.btn-cta-secondary:hover{background:var(--surface-3);border-color:var(--line-strong);transform:translateY(-3px);box-shadow:var(--shadow-glow)}
.btn-cta-secondary:active{transform:translateY(0) scale(0.97)}
/* ── Premium Hero Stats ── */
.hero-stats{display:flex;gap:32px;justify-content:center;flex-wrap:wrap;margin-bottom:0}
.hero-stats span{color:var(--text-dim);font-size:14px}
.hero-stats strong{font-size:20px;color:var(--text);background:var(--gradient-hero);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-right:4px;font-weight:800}
/* ── Premium Category Tabs ── */
.category-tabs{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:24px;justify-content:center}
.category-tab{padding:10px 24px;border:1px solid var(--line);border-radius:99px;background:transparent;color:var(--text-dim);font-family:var(--font-body);font-size:14px;font-weight:600;cursor:pointer;transition:all var(--transition-fast);min-height:44px;touch-action:manipulation;letter-spacing:.3px}
.category-tab:hover{background:var(--glass);color:var(--text);border-color:rgba(124,124,255,0.3);transform:translateY(-2px)}
.category-tab.active{background:linear-gradient(135deg,rgba(124,124,255,0.18),rgba(45,212,168,0.1));color:var(--primary-light);border-color:var(--primary);box-shadow:0 0 20px rgba(124,124,255,0.12),inset 0 1px 0 rgba(255,255,255,0.06)}
/* ── Premium Game Tiles ── */
.game-tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--card-radius);padding:24px;transition:all var(--transition-med);position:relative;overflow:hidden;isolation:isolate;cursor:pointer}
.game-tile::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(124,124,255,0.04),transparent 50%,rgba(45,212,168,0.025));opacity:0;transition:opacity .5s;pointer-events:none;z-index:0}
.game-tile::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--primary),var(--secondary),transparent);opacity:0;transition:opacity .4s;z-index:1}
.game-tile:hover::before{opacity:1}
.game-tile:hover::after{opacity:1}
.game-tile:hover{transform:translateY(-6px);border-color:var(--card-border-hover);box-shadow:var(--shadow-card),var(--shadow-glow)}
.game-tile>*{position:relative;z-index:1}
.game-tile-cat{display:inline-block;padding:4px 14px;border-radius:99px;font-size:11px;font-weight:700;background:rgba(124,124,255,0.1);color:var(--primary-light);margin-bottom:12px;letter-spacing:.4px;border:1px solid rgba(124,124,255,0.08)}
.game-tile h3{font-family:var(--font-display);font-size:18px;margin-bottom:8px;letter-spacing:-.3px}
.game-tile p{font-size:13px;color:var(--text-dim);line-height:1.6}
/* ── Premium Feature Grid ── */
.feature{text-align:center;padding:36px 28px;background:var(--surface);transition:all var(--transition-med);position:relative;overflow:hidden}
.feature::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(124,124,255,0.04),transparent 50%,rgba(45,212,168,0.025));opacity:0;transition:opacity .5s;pointer-events:none}
.feature:hover::before{opacity:1}
.feature:hover{transform:translateY(-6px);border-color:var(--card-border-hover);box-shadow:var(--shadow-card),var(--shadow-glow)}
.feature-icon{width:60px;height:60px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;font-size:26px;background:linear-gradient(135deg,rgba(124,124,255,0.12),rgba(45,212,168,0.08));border-radius:16px;border:1px solid rgba(124,124,255,0.08);transition:all var(--transition-med)}
.feature:hover .feature-icon{transform:scale(1.1) rotate(-4deg);background:linear-gradient(135deg,rgba(124,124,255,0.18),rgba(45,212,168,0.12));border-color:var(--primary)}
.feature h3{font-family:var(--font-display);font-size:18px;margin-bottom:10px;font-weight:700;letter-spacing:-.3px}
.feature p{font-size:14px;color:var(--text-dim);line-height:1.65}
/* ── Premium Mode Cards ── */
.modes-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;max-width:1140px;margin:0 auto}
.mode-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--card-radius);padding:28px;transition:all var(--transition-med);position:relative;overflow:hidden}
.mode-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(124,124,255,0.04),transparent 50%,rgba(45,212,168,0.025));opacity:0;transition:opacity .5s;pointer-events:none}
.mode-card:hover::before{opacity:1}
.mode-card:hover{transform:translateY(-6px);border-color:var(--card-border-hover);box-shadow:var(--shadow-card),var(--shadow-glow)}
.mode-num{font-size:14px;font-weight:700;color:var(--primary-light);margin-bottom:6px;letter-spacing:.5px}
.mode-name{font-family:var(--font-display);font-size:20px;font-weight:800;letter-spacing:-.3px;margin-bottom:4px}
.mode-desc{color:var(--text-dim);font-size:13px;line-height:1.6}
/* ── Premium CTA Band ── */
.cta-band{text-align:center;padding:52px 32px;background:linear-gradient(135deg,rgba(124,124,255,0.06),rgba(45,212,168,0.04));border:1px solid rgba(124,124,255,0.1);border-radius:var(--radius-xl);position:relative;overflow:hidden;isolation:isolate;max-width:900px;margin:0 auto}
.cta-band::before{content:'';position:absolute;inset:0;background:radial-gradient(ellipse at 30% 40%,rgba(124,124,255,0.08),transparent 60%),radial-gradient(ellipse at 70% 60%,rgba(45,212,168,0.06),transparent 50%);pointer-events:none;z-index:0}
.cta-band>*{position:relative;z-index:1}
.cta-band h2{font-family:var(--font-display);font-size:clamp(24px,3vw,34px);font-weight:800;margin-bottom:12px;letter-spacing:-.5px}
.cta-band p{color:var(--text-dim);font-size:15px;margin-bottom:24px;max-width:500px;margin-left:auto;margin-right:auto;line-height:1.6}
.btn-cta{display:inline-flex;align-items:center;gap:8px;padding:16px 36px;background:linear-gradient(135deg,var(--primary),var(--secondary));color:#fff;font-family:var(--font-body);font-size:16px;font-weight:700;border:none;border-radius:99px;cursor:pointer;transition:all var(--transition-med);min-height:54px;box-shadow:0 4px 24px rgba(124,124,255,0.25);position:relative;overflow:hidden}
.btn-cta::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.12),transparent);transform:translateX(-100%);transition:transform .6s}
.btn-cta:hover::after{transform:translateX(100%)}
.btn-cta:hover{transform:translateY(-3px);box-shadow:0 8px 36px rgba(124,124,255,0.35)}
.btn-cta:active{transform:translateY(0) scale(0.97)}
/* ── Premium Badges Row ── */
.badges-row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;max-width:900px;margin:0 auto}
.badge-3d{width:110px;height:130px;perspective:500px;cursor:pointer}
.badge-face{width:100%;height:100%;background:linear-gradient(145deg,var(--surface-2),var(--surface-3));border:1px solid var(--line);border-radius:var(--radius);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;transition:all var(--transition-med);transform:rotateY(0deg);backface-visibility:hidden}
.badge-3d:hover .badge-face{transform:rotateY(10deg) rotateX(-5deg) translateY(-8px);box-shadow:var(--shadow-card),var(--shadow-glow-gold);border-color:rgba(245,166,35,0.25)}
.badge-icon{font-size:36px;transition:all var(--transition-med)}
.badge-3d:hover .badge-icon{transform:scale(1.15)}
.badge-name{font-size:12px;font-weight:700;color:var(--text);letter-spacing:-.2px}
/* ── Premium Section Container ── */
.premium-section{padding:80px 0;position:relative;z-index:2;max-width:1200px;margin:0 auto}
/* ── Premium Scrollbar Override for Game Areas ── */
.game-main::-webkit-scrollbar{width:4px}
.game-main::-webkit-scrollbar-track{background:transparent}
.game-main::-webkit-scrollbar-thumb{background:var(--line-strong);border-radius:99px}
/* ── Premium Section Gradient Border ── */
.premium-section:not(:last-of-type)::after{content:'';display:block;width:60%;height:1px;margin:0 auto;background:linear-gradient(90deg,transparent,rgba(124,124,255,0.1),rgba(45,212,168,0.08),transparent)}
/* ── Hero Emoji Premium ── */
.hero-emojis span{filter:drop-shadow(0 0 20px rgba(124,124,255,0.2));transition:filter var(--transition-med)}
.hero-emojis span:hover{filter:drop-shadow(0 0 35px rgba(124,124,255,0.4))}
/* ===== AUTH / LOGIN ===== */
#navLoginBtn{background:linear-gradient(135deg,var(--primary),var(--secondary))!important;color:#fff!important;font-weight:700!important;padding:14px 24px!important;border-radius:12px!important;box-shadow:0 4px 20px rgba(124,92,252,0.25)!important}
#navLoginBtn:hover{transform:scale(1.05);box-shadow:0 6px 30px rgba(124,92,252,0.35)!important}
.auth-tab{transition:all .2s}
.auth-tab.active{background:var(--primary)!important;color:#fff!important}
#authOverlay .overlay-header{max-width:420px;margin:0 auto;padding:24px 24px 0}
#authOverlay .overlay-close{color:var(--text)}
#authOverlay .game-main{padding-bottom:40px}
#authForm input{margin-bottom:0}
/* ── Auth Premium Components ── */
.auth-tabs{display:flex;gap:0;margin-bottom:20px;border-radius:10px;overflow:hidden;border:1px solid var(--line);background:var(--surface-2)}
.auth-tab{flex:1;padding:12px;border:none;font-weight:700;font-family:var(--font);cursor:pointer;font-size:14px;transition:all .25s var(--ease-smooth);min-height:44px;letter-spacing:0.3px}
.auth-tab.active{background:var(--primary);color:#fff}
.auth-tab:not(.active){background:transparent;color:var(--text-dim)}
.auth-tab:not(.active):hover{background:var(--glass);color:var(--text)}
.auth-input{width:100%;padding:12px 16px;background:rgba(255,255,255,0.03);border:1px solid var(--glass-border);border-radius:10px;color:var(--text);font-family:var(--font);font-size:15px;outline:none;margin-bottom:12px;min-height:44px;transition:all .25s}
.auth-input:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(124,92,252,0.1);background:rgba(255,255,255,0.05)}
.auth-message{font-size:13px;margin-bottom:10px;min-height:20px;color:var(--text-dim)}
.auth-submit-btn{width:100%;padding:12px;font-size:16px;margin-bottom:10px}
.auth-profile{text-align:center}
.auth-avatar-wrap{display:flex;justify-content:center;margin-bottom:16px}
.auth-avatar-btn{width:72px;height:72px;border-radius:50%;border:3px solid var(--primary);font-size:40px;background:rgba(124,92,252,0.1);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .25s var(--ease-spring);min-height:72px;min-width:72px}
.auth-avatar-btn:hover{transform:scale(1.08);border-color:var(--secondary);box-shadow:0 0 25px rgba(124,92,252,0.2)}
.auth-display-name{font-weight:700;font-size:18px;margin-bottom:4px}
.auth-email-display{color:var(--text-dim);font-size:13px;margin-bottom:16px}
.auth-profile-actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center}
.auth-delete-btn{border-color:var(--danger)!important;color:var(--danger)!important}
.auth-delete-btn:hover{background:rgba(255,71,87,0.1)!important}
/* ── Premium Loading Screen ── */
.loading-screen-premium{position:absolute;inset:0;z-index:20;background:linear-gradient(135deg,rgba(10,10,24,0.98),rgba(18,18,42,0.96));display:flex;align-items:center;justify-content:center;flex-direction:column;transition:opacity .5s var(--ease-smooth)}
.loading-screen-premium h2{margin-bottom:24px;font-size:26px;font-weight:800;background:linear-gradient(135deg,var(--primary-light),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.loading-bar-premium{width:300px;height:6px;background:rgba(255,255,255,0.06);border-radius:99px;overflow:hidden;position:relative}
.loading-bar-premium span{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:99px;transition:width .3s;position:relative}
.loading-bar-premium span::after{content:'';position:absolute;right:0;top:-2px;width:10px;height:10px;border-radius:50%;background:var(--primary-light);box-shadow:0 0 12px var(--primary-light);opacity:0.6}
/* ── Dashboard Premium Stats ── */
.player-stats-premium{background:linear-gradient(135deg,rgba(124,92,252,0.08),rgba(0,212,212,0.04));border:1px solid rgba(124,92,252,0.12);border-radius:var(--radius);padding:18px 22px;margin-bottom:24px;box-shadow:0 4px 20px rgba(124,92,252,0.06)}
.player-stats-premium .avatar{font-size:42px;filter:drop-shadow(0 0 15px rgba(180,166,255,0.3))}
.player-stats-premium .info .name{font-size:20px}
.player-stats-premium .stat .val{font-size:20px;font-weight:800;background:linear-gradient(135deg,var(--primary-light),var(--secondary));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
/* ── Premium Game Container ── */
/* Quiz area styling */
#quizArea .quiz-container{background:rgba(15,15,35,0.95);border:1px solid var(--glass-border);border-radius:var(--radius);padding:24px 28px;margin-top:4px;animation:fadeSlideIn .35s var(--ease-smooth)}
.quiz-container .quiz-question{font-size:18px;font-weight:600;margin-bottom:20px;line-height:1.5}
.quiz-container .quiz-options{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.quiz-container .quiz-option{background:rgba(255,255,255,0.04);border:1px solid var(--glass-border);border-radius:12px;padding:15px 20px;color:var(--text);font-family:var(--font);font-size:14px;cursor:pointer;text-align:left;transition:all .3s var(--ease-spring);min-height:44px}
.quiz-container .quiz-option:hover{background:rgba(124,92,252,0.14);border-color:var(--primary);transform:translateX(4px);box-shadow:0 0 16px rgba(124,92,252,0.06)}
.quiz-container .quiz-option.correct{background:rgba(0,214,143,0.15)!important;border-color:var(--success)!important;box-shadow:0 0 12px rgba(0,214,143,0.1)!important}
.quiz-container .quiz-option.wrong{background:rgba(255,71,87,0.15)!important;border-color:var(--danger)!important;box-shadow:0 0 12px rgba(255,71,87,0.1)!important}
.quiz-container .quiz-option:disabled{opacity:0.7;cursor:default}
.quiz-container .quiz-feedback{font-size:15px;font-weight:600;margin-top:14px;padding:10px 14px;border-radius:8px;background:rgba(255,255,255,0.02)}
@media(max-width:600px){.quiz-container .quiz-options{grid-template-columns:1fr}.quiz-container .quiz-question{font-size:16px}}
/* End quiz area styling */
.game-container-premium .game-sidebar{background:linear-gradient(180deg,rgba(15,15,30,0.98),rgba(20,16,40,0.95))}
.game-container-premium .game-sidebar button{font-size:13px;border-radius:0 10px 10px 0;margin:2px 8px 2px 0}
/* ── Responsive improvements ── */
@media(max-width:900px){
  .hero h1{font-size:clamp(32px,8vw,60px)}
  .section-title{font-size:clamp(22px,3vw,32px)}
  .services-grid{grid-template-columns:repeat(2,1fr)}
  .webpage{padding:40px 20px 80px}
  .game-sidebar{width:auto;flex-direction:row;overflow-x:auto;overflow-y:hidden;padding:8px 12px;border-right:none;border-bottom:1px solid var(--line);background:var(--surface);gap:8px;-webkit-overflow-scrolling:touch;scrollbar-width:thin;-ms-overflow-style:none}
  .game-sidebar::-webkit-scrollbar{display:none}
  .game-sidebar::after{display:none}
  .game-sidebar button{white-space:nowrap;padding:8px 12px;font-size:13px;gap:6px;min-height:42px;border-radius:10px!important;margin:0;flex-shrink:0}
  .game-sidebar button.active::before{display:none}
  .game-sidebar button.active{background:rgba(124,92,252,0.15);border-radius:10px}
  .game-container{flex-direction:column}
  .onboarding{padding:24px 16px}
}
@media(min-width:769px) and (max-width:1024px){
  .navbar{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;gap:8px}
  .navbar::-webkit-scrollbar{height:2px}
  .navbar::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.1);border-radius:2px}
  .nav-links{gap:12px;flex-shrink:0}
  .nav-links li button{font-size:13px;padding:8px 14px;white-space:nowrap}
  .nav-logo{flex-shrink:0}
}
@media(max-width:768px){
  .navbar{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .nav-links{display:flex;gap:8px;flex-shrink:0}
  .nav-links li button{font-size:13px;padding:8px 12px;white-space:nowrap;min-height:44px}
  .hamburger{display:none}
  .services-grid,.notes-grid,.blog-grid{grid-template-columns:1fr}
  .battle-hp{flex-direction:column}
  .battle-hp .hp-card{padding:10px 12px}
  .battle-area{padding:20px 14px 24px}
  .battle-title{font-size:18px}
  .battle-timer-circle{width:56px;height:56px;font-size:22px}
  .battle-question .q-text{font-size:15px;padding:12px 14px}
  .player-stats{flex-direction:column;text-align:center}
  .race-actions{flex-direction:column}
  .race-actions button{width:100%}
}
@media(max-width:550px){
  .services-grid{grid-template-columns:1fr}
  .exp-row{grid-template-columns:1fr}
  .auth-tabs{flex-direction:column;border-radius:8px}
}
@media(max-width:480px){
  .webpage{padding:24px 12px 80px}
  
  .achievements-grid{grid-template-columns:repeat(2,1fr)}
  .filter-tabs button{font-size:11px;padding:5px 10px}
  .build-diagram{flex-direction:column;align-items:center}
  .build-arch-grid{grid-template-columns:1fr}
  .build-wizard-steps{flex-direction:column}
  .train-dataset-grid{grid-template-columns:1fr}
  .hero h1{font-size:clamp(32px,12vw,64px)}
}
/* ===== RESPONSIVE TYPE & LAYOUT ===== */
.section-title{font-size:clamp(22px,3vw,36px)}
.page-title{font-size:clamp(28px,4vw,48px)}
.service-card h3{font-size:clamp(15px,2vw,18px)}
.service-card p{font-size:clamp(12.5px,1.4vw,14px)}
.note-card h4{font-size:clamp(15px,2vw,18px)}
.note-card p{font-size:clamp(13px,1.5vw,15px)}
.blog-card h3{font-size:clamp(16px,2vw,20px)}

/* ===== BUILD AI - REALISTIC WIZARD ===== */
.build-container{max-width:900px;margin:0 auto}
.build-wizard{background:var(--surface);border:1px solid var(--line);border-radius:var(--card-radius);padding:28px;margin-bottom:20px}
.build-wizard h3{font-size:22px;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.build-wizard .step-indicator{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}
.build-wizard .step-dot{padding:8px 16px;border-radius:20px;font-size:13px;font-weight:600;background:var(--glass);border:1px solid var(--glass-border);color:var(--text-dim)}
.build-wizard .step-dot.active{background:rgba(124,92,252,0.2);border-color:var(--primary);color:var(--primary-light)}
.build-wizard .step-dot.done{background:rgba(0,214,143,0.15);border-color:var(--success);color:var(--success)}
.build-problem-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:20px}
.build-problem-card{padding:20px;border:1px solid var(--glass-border);border-radius:14px;background:rgba(255,255,255,0.03);cursor:pointer;text-align:center;transition:all .3s var(--ease-spring)}
.build-problem-card:hover,.build-problem-card.selected{border-color:var(--primary);background:rgba(124,92,252,0.12);transform:scale(1.03)}
.build-problem-card .icon{font-size:36px;margin-bottom:8px}
.build-problem-card h5{font-size:16px;font-weight:700}
.build-problem-card p{font-size:12px;color:var(--text-dim);margin-top:4px}
.build-layer-grid{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:16px}
.build-layer-btn{padding:12px 20px;border:1px solid var(--glass-border);border-radius:10px;background:rgba(255,255,255,0.03);cursor:pointer;font-size:14px;font-weight:600;transition:all .25s var(--ease-spring);min-height:44px;font-family:var(--font);color:var(--text)}
.build-layer-btn:hover{border-color:rgba(124,92,252,0.3);background:rgba(255,255,255,0.04)}
.build-layer-btn.selected{border-color:var(--primary);background:rgba(124,92,252,0.15)}
.build-added-layers{display:flex;flex-direction:column;gap:8px;margin-bottom:16px;max-height:200px;overflow-y:auto}
.build-added-layer{display:flex;align-items:center;gap:12px;padding:10px 14px;background:rgba(124,92,252,0.08);border:1px solid rgba(124,92,252,0.15);border-radius:10px;cursor:pointer;transition:all .2s var(--ease-smooth)}
.build-added-layer .order{font-weight:800;font-size:14px;color:var(--primary-light);min-width:24px}
.build-added-layer .name{flex:1;font-weight:600;font-size:14px}
.build-added-layer .neurons{color:var(--gold);font-size:13px}
.build-added-layer .remove-btn{background:none;border:none;color:var(--danger);cursor:pointer;font-size:18px;min-height:30px;min-width:30px;transition:all .2s}
.build-added-layer.active{border-color:var(--primary);background:rgba(124,92,252,0.15)}
.build-added-layer{cursor:pointer;transition:all .2s}
.build-added-layer:hover{border-color:var(--primary-light)}
.build-added-layer .edit-btn{cursor:pointer;font-size:14px;opacity:0.6;transition:opacity .2s}
.build-added-layer .edit-btn:hover{opacity:1}
.build-config-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:20px}
.build-config-item label{display:block;font-size:14px;color:var(--text-dim);margin-bottom:6px;font-weight:600}
.build-config-item select,
.build-config-item input[type=number]{width:100%;padding:12px 14px;background:var(--glass);border:1px solid var(--glass-border);border-radius:8px;color:var(--text);font-family:var(--font);font-size:15px;outline:none;min-height:44px}
.build-config-item select:focus,
.build-config-item input[type=number]:focus{border-color:var(--primary)}
.build-summary-table{width:100%;border-collapse:collapse;margin-bottom:16px;font-size:14px}
.build-summary-table th,.build-summary-table td{padding:10px 14px;text-align:left;border-bottom:1px solid var(--glass-border)}
.build-summary-table th{color:var(--text-dim);font-weight:600;font-size:12px;text-transform:uppercase;letter-spacing:0.5px}
.build-summary-table td{font-weight:500}
.build-summary-table tr:last-child td{border-bottom:none}
.build-summary-table tr:last-child td strong{color:var(--gold);font-size:16px}
.build-result{text-align:center;padding:24px;background:rgba(0,184,148,0.1);border:2px solid var(--success);border-radius:16px;margin-bottom:16px}
.build-result h4{font-size:24px;margin-bottom:8px}
.build-result p{font-size:16px;color:var(--text-dim)}
.build-result .xp-badge{display:inline-block;padding:6px 16px;border-radius:20px;background:linear-gradient(135deg,var(--gold),var(--accent));color:#1a1a2e;font-weight:800;font-size:14px;margin-top:8px}
/* Real Build AI additions */
.build-terminal{background:#0a0a0a;border:1px solid #333;border-radius:10px;padding:16px;font-family:var(--mono);font-size:13px;max-height:240px;overflow-y:auto;margin-bottom:16px;text-align:left}
.build-terminal .line{color:#0f0;padding:2px 0;word-break:break-all}
.build-terminal .line.warn{color:var(--gold)}
.build-terminal .line.err{color:var(--danger)}
.build-terminal .line.info{color:var(--text-dim)}
.build-terminal .line.dim{color:#666}
.build-terminal .line.highlight{color:var(--primary-light);font-weight:700}
.build-terminal .prompt{color:var(--secondary);font-weight:700}
.build-diagram{display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px;margin-bottom:16px;background:rgba(10,10,26,0.5);border-radius:12px;border:1px solid var(--glass-border);overflow-x:auto}
.build-diagram .layer-block{display:flex;align-items:center;gap:8px;padding:6px 14px;border-radius:6px;font-size:12px;font-weight:600;font-family:var(--mono);white-space:nowrap}
.build-diagram .layer-arrow{color:var(--text-dim);font-size:10px}
.build-diagram .layer-input{background:rgba(108,92,231,0.2);border:1px solid rgba(108,92,231,0.4);color:var(--primary-light)}
.build-diagram .layer-dense{background:rgba(0,184,148,0.15);border:1px solid rgba(0,184,148,0.3);color:var(--success)}
.build-diagram .layer-conv2d{background:rgba(253,203,110,0.15);border:1px solid rgba(253,203,110,0.3);color:var(--gold)}
.build-diagram .layer-lstm{background:rgba(253,121,168,0.15);border:1px solid rgba(253,121,168,0.3);color:var(--accent)}
.build-diagram .layer-dropout{background:rgba(231,76,60,0.15);border:1px solid rgba(231,76,60,0.3);color:var(--danger)}
.build-diagram .layer-flatten{background:rgba(116,185,255,0.15);border:1px solid rgba(116,185,255,0.3);color:#74b9ff}
.build-diagram .layer-pooling{background:rgba(0,206,201,0.15);border:1px solid rgba(0,206,201,0.3);color:var(--secondary)}
.build-diagram .layer-output{background:rgba(253,121,168,0.2);border:1px solid rgba(253,121,168,0.4);color:var(--accent);font-weight:800}
.build-code-gen{background:#1a1a2e;border:1px solid var(--glass-border);border-radius:10px;padding:16px;margin-bottom:16px;text-align:left}
.build-code-gen .code-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.build-code-gen .code-header span{font-size:12px;color:var(--text-dim);font-weight:600}
.build-code-gen .code-header button{padding:4px 12px;border:none;border-radius:6px;background:var(--primary);color:#fff;font-size:11px;cursor:pointer;font-family:var(--font)}
.build-code-gen pre{background:#0a0a1a;padding:14px;border-radius:8px;font-family:var(--mono);font-size:12px;color:var(--text-dim);overflow-x:auto;line-height:1.6;white-space:pre-wrap;border:1px solid rgba(255,255,255,0.05)}
.build-progress-overlay{width:100%;height:4px;background:rgba(255,255,255,0.05);border-radius:2px;overflow:hidden;margin-bottom:12px}
.build-progress-overlay .fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:2px;transition:width .3s;width:0%}
/* Layer edit form */
.layer-edit-form{background:rgba(10,10,26,0.6);border:1px solid var(--glass-border);border-radius:10px;padding:16px;margin-bottom:16px}
.layer-edit-form .row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:10px}
.layer-edit-form .row label{font-size:12px;color:var(--text-dim);display:block;margin-bottom:4px;font-weight:600}
.layer-edit-form .row select,.layer-edit-form .row input{width:100%;padding:8px 10px;background:var(--glass);border:1px solid var(--glass-border);border-radius:6px;color:var(--text);font-family:var(--mono);font-size:13px;outline:none;min-height:36px}
.layer-edit-form .row select:focus,.layer-edit-form .row input:focus{border-color:var(--primary)}

/* ===== TRAIN AI - REALISTIC SIMULATOR ===== */
.train-container{max-width:800px;margin:0 auto}
.train-dataset-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin-bottom:20px}
.train-dataset-card{padding:18px;border:1px solid var(--glass-border);border-radius:14px;background:rgba(255,255,255,0.03);cursor:pointer;text-align:center;transition:all .3s var(--ease-spring)}
.train-dataset-card:hover{border-color:rgba(124,92,252,0.3);background:rgba(255,255,255,0.04);transform:scale(1.03)}
.train-dataset-card.selected{border-color:var(--primary);background:rgba(124,92,252,0.12);transform:scale(1.03);box-shadow:0 0 16px rgba(124,92,252,0.1)}
.train-dataset-card .icon{font-size:32px;margin-bottom:6px}
.train-dataset-card h5{font-size:15px;font-weight:700}
.train-dataset-card p{font-size:11px;color:var(--text-dim);margin-top:4px}
.train-params{display:flex;flex-wrap:wrap;gap:20px;margin-bottom:20px;background:var(--glass);border:1px solid var(--glass-border);border-radius:var(--radius);padding:20px}
.train-param{flex:1;min-width:160px}
.train-param label{display:block;font-size:14px;color:var(--text-dim);margin-bottom:6px;font-weight:600}
.train-param input[type=range]{width:100%;-webkit-appearance:none;background:var(--glass);height:8px;border-radius:4px;outline:none;min-height:8px}
.train-param input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--primary);cursor:pointer;border:2px solid var(--primary-light)}
.train-param .val{font-size:18px;font-weight:800;color:var(--gold);margin-top:6px;display:block}
.train-visual{background:rgba(20,20,40,0.8);border-radius:var(--radius);border:1px solid var(--glass-border);padding:20px;margin-bottom:20px;min-height:240px;position:relative;overflow:hidden;box-shadow:inset 0 0 20px rgba(0,0,0,0.2)}
.train-chart{display:flex;align-items:flex-end;gap:3px;height:180px;padding:10px 0}
.train-bar{width:10px;border-radius:3px 3px 0 0;transition:height .3s;background:linear-gradient(180deg,var(--secondary),var(--primary))}
.train-bar.loss-bar{background:linear-gradient(180deg,#e74c3c,#c0392b)}
.train-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:16px}
.train-stats .ts{background:var(--glass);border:1px solid var(--glass-border);padding:14px 12px;border-radius:12px;text-align:center;font-size:13px;color:var(--text-dim);transition:all .2s}
.train-stats .ts:hover{border-color:rgba(124,92,252,0.2);background:rgba(255,255,255,0.04)}
.train-stats .ts strong{color:var(--text);display:block;font-size:22px;margin-top:4px}
.train-stats .ts .unit{font-size:12px;color:var(--text-dim)}
.train-status{padding:12px;border-radius:10px;margin-bottom:12px;text-align:center;font-size:15px;font-weight:600}
.train-status.idle{background:rgba(255,255,255,0.05);color:var(--text-dim)}
.train-status.running{background:rgba(108,92,231,0.15);color:var(--primary-light);border:1px solid var(--primary)}
.train-status.done{background:rgba(0,184,148,0.12);color:var(--success);border:1px solid var(--success)}
.train-progress-container{height:6px;background:rgba(255,255,255,0.1);border-radius:3px;overflow:hidden;margin-bottom:16px}
.train-progress-bar{height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:3px;transition:width .2s;width:0%}
.train-result-box{text-align:center;padding:24px;background:rgba(0,184,148,0.1);border:2px solid var(--success);border-radius:16px;margin-top:16px}
.train-result-box h4{font-size:22px;margin-bottom:8px}
.train-result-box p{font-size:15px;color:var(--text-dim)}
.train-result-box .xp-badge{display:inline-block;padding:6px 16px;border-radius:20px;background:linear-gradient(135deg,var(--gold),var(--accent));color:#1a1a2e;font-weight:800;font-size:14px;margin-top:8px}
/* ===== CODE COMBAT — 2D FIGHTING GAME v2 ===== */
.combat-container{max-width:960px;margin:0 auto}
.combat-arena{position:relative;height:300px;background:linear-gradient(180deg,#1a1a3e 0%,#0d0d2b 50%,#1a0a1a 100%);border-radius:var(--radius);border:2px solid rgba(108,92,231,0.3);overflow:hidden;margin-bottom:16px;box-shadow:inset 0 0 60px rgba(108,92,231,0.05)}
.combat-arena .ground{position:absolute;bottom:0;left:0;width:100%;height:45px;background:linear-gradient(180deg,rgba(0,206,201,0.06),rgba(108,92,231,0.1));border-top:1px solid rgba(255,255,255,0.05)}
.combat-arena .grid-line{position:absolute;left:0;width:100%;height:1px;background:rgba(255,255,255,0.02)}
.combat-arena .particle{position:absolute;width:4px;height:4px;background:rgba(162,155,254,0.25);border-radius:50%}
/* Fighter Sprites */
.fighter-sprite{position:absolute;text-align:center;transition:left .5s cubic-bezier(.34,1.56,.64,1),bottom .3s ease;z-index:3}
.fighter-sprite.player-sprite{bottom:48px;left:8%;z-index:4}
.fighter-sprite.enemy-sprite{bottom:48px;right:8%;z-index:4}
.fighter-sprite .sprite-icon{font-size:80px;display:block;filter:drop-shadow(0 4px 12px rgba(0,0,0,0.6));transition:all .2s}
.fighter-sprite .sprite-name{font-size:13px;font-weight:700;color:var(--text);display:block;margin-top:4px;text-shadow:0 2px 8px rgba(0,0,0,0.5)}
.fighter-sprite .hp-bar-below{width:120px;height:10px;background:rgba(255,255,255,0.08);border-radius:5px;overflow:hidden;margin:6px auto 2px;border:1px solid rgba(255,255,255,0.05)}
.fighter-sprite .hp-bar-below span{display:block;height:100%;border-radius:4px;transition:width .4s ease}
.fighter-sprite .hp-bar-below.player-hp-bar span{background:linear-gradient(90deg,#00b894,#00cec9,#55efc4);box-shadow:0 0 10px rgba(0,206,201,0.3)}
.fighter-sprite .hp-bar-below.enemy-hp-bar span{background:linear-gradient(90deg,#e74c3c,#ff6b6b,#fd79a8);box-shadow:0 0 10px rgba(231,76,60,0.3)}
.fighter-sprite .hp-text{font-size:11px;color:var(--text-dim);margin-top:2px;font-weight:600}
/* Enemy intro */
.fighter-sprite.enemy-sprite.intro{animation:enemyIntro .6s cubic-bezier(.34,1.56,.64,1) forwards}
/* Idle bob */
.fighter-sprite.idle{animation:idleBob 2s ease-in-out infinite}
.fighter-sprite.enemy-sprite.idle{animation:idleBob 1.8s ease-in-out infinite}
/* Attack rush - enemy slides to player */
.fighter-sprite.enemy-attack-rush{left:45%!important;transition:left .35s cubic-bezier(.22,1,.36,1)!important}
.fighter-sprite.enemy-attack-rush .sprite-icon{animation:enemyBite .3s ease}
/* Player attack rush - player slides to enemy */
.fighter-sprite.player-attack-rush{left:55%!important;transition:left .3s cubic-bezier(.22,1,.36,1)!important}
.fighter-sprite.player-attack-rush .sprite-icon{animation:playerStrike .25s ease}
/* Hit reaction */
.fighter-sprite.hit-reaction{animation:recoil .35s ease}
.fighter-sprite.enemy-sprite.hit-reaction{animation:enemyRecoil .35s ease}
/* Damage float */
.dmg-float{position:absolute;font-size:36px;font-weight:900;pointer-events:none;z-index:10;text-shadow:0 0 20px rgba(0,0,0,0.8)}
.dmg-float.heal{color:var(--success)}
.dmg-float.dmg{color:var(--danger)}
/* Combat text (HIT! CRITICAL!) */
.combat-text{position:absolute;font-size:28px;font-weight:900;pointer-events:none;z-index:11;left:50%;transform:translateX(-50%);text-shadow:0 0 20px rgba(0,0,0,0.9)}
.combat-text.hit-text{color:var(--gold)}
.combat-text.crit-text{color:var(--accent);font-size:36px}
.combat-text.wrong-text{color:var(--danger)}
/* Screen shake */
.arena-shake{animation:arenaShake .25s ease}
/* Flash overlay */
.flash-overlay{position:absolute;inset:0;pointer-events:none;z-index:1}
.flash-overlay.enemy-flash{animation:flashEnemy .25s ease forwards}
/* Center VS */
.combat-vs-center{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:28px;font-weight:900;color:var(--accent);text-shadow:0 0 30px rgba(253,121,168,0.2);z-index:2;opacity:0.6}
/* Wave indicator */
.wave-indicator{text-align:center;font-size:14px;font-weight:800;padding:6px;margin-bottom:8px;background:linear-gradient(90deg,transparent,rgba(108,92,231,0.1),transparent);border-radius:8px;color:var(--primary-light);letter-spacing:2px}
/* Stats bar */
.combat-stats-bar{display:flex;gap:12px;margin-bottom:8px;flex-wrap:wrap}
.combat-stats-bar .csb{background:rgba(255,255,255,0.04);border:1px solid var(--glass-border);padding:5px 14px;border-radius:8px;font-size:13px;font-weight:600}
.combat-stats-bar .csb strong{color:var(--gold)}
/* Code area */
.combat-code-area{background:#1a1a3e;border:2px solid rgba(108,92,231,0.2);border-radius:var(--radius);padding:18px;margin-bottom:10px}
.combat-code-area .code-prompt{font-family:var(--mono);font-size:18px;margin-bottom:10px;color:var(--text);line-height:1.6;white-space:pre-wrap}
.combat-code-area .code-prompt .highlight{color:var(--gold);font-weight:700;text-shadow:0 0 10px rgba(253,203,110,0.3);border-bottom:2px solid var(--gold);padding:0 4px}
.combat-input-row{display:flex;gap:10px;margin-bottom:8px}
.combat-code-input{flex:1;padding:14px 16px;background:rgba(0,0,0,0.3);border:2px solid rgba(255,255,255,0.08);border-radius:var(--radius-sm);color:var(--text);font-family:var(--mono);font-size:16px;outline:none;min-height:44px;transition:border .2s}
.combat-code-input:focus{border-color:var(--primary)}
.combat-btn-run{padding:14px 28px;background:linear-gradient(135deg,var(--success),var(--secondary));border:none;border-radius:var(--radius-sm);color:#fff;font-weight:800;font-size:16px;cursor:pointer;min-height:44px;font-family:var(--font);transition:all .2s;box-shadow:0 0 15px rgba(0,184,148,0.2);letter-spacing:1px}
.combat-btn-run:hover{transform:scale(1.05);box-shadow:0 0 25px rgba(0,184,148,0.4)}
.combat-action-btns{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:8px}
.combat-action-btns button{min-height:44px;padding:8px 18px;border:none;border-radius:8px;font-size:13px;font-weight:700;cursor:pointer;font-family:var(--font);transition:all .2s}
.combat-action-btns button:hover{transform:translateY(-2px)}
.combat-feedback{padding:10px 16px;border-radius:10px;margin-bottom:8px;font-size:14px;font-weight:700;text-align:center}
.combat-log{max-height:80px;overflow-y:auto;background:rgba(0,0,0,0.3);border-radius:8px;padding:8px 12px;font-size:12px;font-family:var(--mono);border:1px solid rgba(255,255,255,0.03)}
.combat-log div{padding:2px 0;border-bottom:1px solid rgba(255,255,255,0.02)}
.combat-log .dmg-log{color:var(--danger)}
.combat-log .heal-log{color:var(--success)}
.combat-log .info-log{color:var(--text-dim)}
@media(max-width:768px){
.combat-arena{height:200px}
.fighter-sprite .sprite-icon{font-size:52px}
.fighter-sprite.player-sprite{bottom:35px;left:5%}
.fighter-sprite.enemy-sprite{bottom:35px;right:5%}
.fighter-sprite .hp-bar-below{width:80px;height:8px}
.combat-vs-center{font-size:20px}
.dmg-float{font-size:24px}
.combat-text{font-size:20px}
.combat-text.crit-text{font-size:26px}
.combat-input-row{flex-direction:column}
.wave-indicator{font-size:12px}
}
/* ===== MOBILE TOUCH IMPROVEMENTS ===== */

@media(max-width:600px){
  .nav-links li button,.btn-glow,.btn-glow-sm,button,.hamburger{min-height:48px;min-width:48px}
  input,.code-input,.code-snip input,.combat-code-input{min-height:48px;font-size:16px}
  .race-track .car{font-size:36px}
  .game-main{padding:12px}
  .code-snip{font-size:13px;overflow-x:auto;white-space:pre-wrap;word-break:break-all}
  .hero{padding:32px 0 24px}
  .quiz-options button{padding:12px;font-size:14px;min-height:48px}
  .race-code{padding:12px}
  .build-wizard{padding:16px}
  .build-terminal{font-size:11px;padding:10px}
  .train-dataset-card{padding:12px}
  .filter-tabs{flex-wrap:wrap;gap:6px;overflow-x:visible}
  .filter-tabs button{font-size:12px;padding:8px 12px;min-height:44px}
  .game-header h2{font-size:16px}
  .page-title{font-size:clamp(22px,6vw,32px)}
  .truthtable{font-size:12px}
  .truthtable th,.truthtable td{padding:6px 8px}
  .explore-grid{padding:0 12px;gap:14px}
  .exp-section{padding:12px 14px 14px;border-radius:14px}
  .exp-row{grid-template-columns:1fr 1fr;gap:6px}
  .dash-cards{grid-template-columns:repeat(2,1fr);gap:8px}
  .dash-card{padding:16px 12px}
  .dash-card .dash-icon{font-size:26px}
  .dash-card .dash-title{font-size:13px}
  .ep-btn{padding:10px 12px;font-size:13px;min-height:44px;border-radius:10px;touch-action:manipulation}
  .ep-btn .ep-icon{font-size:16px;width:20px}
  .ep-btn .ep-label{font-size:13px}
  .hero-emojis{gap:12px;margin-bottom:18px}
  .typewriter{padding:8px 18px;font-size:14px;margin-bottom:24px}
  .services-grid{gap:12px;margin:28px auto 36px}
  .service-card{padding:18px}
  .service-card .icon{width:38px;height:38px;font-size:20px}
  .section-title{font-size:22px;margin-bottom:24px}
  .section-sub{font-size:13px;margin-top:-18px;margin-bottom:24px}
  .blog-grid-home{gap:14px;margin-bottom:32px}
  .overlay-header h2{font-size:16px}
}
/* Touch optimization for mobile */
button,.btn-glow,input,select,textarea,.room-card,.gate,.mem-card,.service-card,.hamburger,.nav-links li,.sidebar-backdrop{touch-action:manipulation}
/* iOS smooth scroll */
.nav-links,.game-sidebar,.filter-tabs,.blog-grid,.notes-grid,.services-grid,.explore-grid{ -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
/* Prevent layout shifts on mobile */
img,video,canvas,iframe{max-width:100%;height:auto}
/* GPU layer promotion for smooth animations */
.hero,.hero-content,.navbar,.webpage.active,.game-main,.exp-section,.service-card,.blog-card,.note-card{transform:translateZ(0);backface-visibility:hidden}
/* Optimize scrolling perf - reduce paint area */
.sidebar-backdrop,.overlay,.overlay-game{will-change:opacity}
.orb-1,.orb-2{will-change:transform}
.hero-emojis span{will-change:transform}
/* Prevent iOS callout & selection on game elements */
.game-container,.game-main,#trafficContainer,#worldContent,#combatContent,#bugContainer,#raceContent,.build-container,.train-container{-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}

@media(hover:none){
.btn-glow:hover{transform:none;box-shadow:none}
.btn-glow:active{transform:scale(0.96)}
.service-card:hover{transform:none;box-shadow:none}.room-card:hover{transform:none}
.ep-btn:hover{transform:none;box-shadow:none}
.dash-card:hover{transform:none;box-shadow:none}
.premium-card:hover{transform:none;box-shadow:none}
.note-card:hover{transform:none;box-shadow:none}
.blog-card:hover{transform:none;box-shadow:none}
.exp-section:hover{transform:none;box-shadow:none}
.service-card .icon:hover{transform:none}
.quiz-container .quiz-option:hover{transform:none}
.build-problem-card:hover{transform:none}
.glass-hover:hover{transform:none;box-shadow:none}
.lb-entry:hover{transform:none}
}
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}
.scroll-reveal{opacity:1!important;transform:none!important;transition:none!important}
.lazy-section{opacity:1!important;transform:none!important;transition:none!important}
.orb-1,.orb-2{animation:none!important}
.hero-emojis span{animation:none!important}
.typewriter{animation:none!important}
}
/* ── Premium Scrollbar ── */
::-webkit-scrollbar{width:6px;height:6px}
::-::-webkit-scrollbar-thumb{background:rgba(124,92,252,0.2);border-radius:99px}
::-webkit-scrollbar-thumb:hover{background:rgba(124,92,252,0.35)}
/* ── Blog card tag colors ── */
.tag-ai{background:var(--accent-soft);color:var(--primary-light)}
.tag-coding{background:var(--accent-2-soft);color:var(--secondary)}
.tag-tutorial{background:rgba(255,107,157,0.15);color:var(--accent)}
.tag-python{background:rgba(245,166,35,0.15);color:var(--gold)}
.tag-genai{background:rgba(162,155,254,0.15);color:#a29bfe}
.tag-gamedev{background:rgba(46,213,115,0.15);color:#2ed573}
/* ── Projects section ── */
/* ── Premium card glow border ── */
.premium-card::after{content:'';position:absolute;inset:-1px;border-radius:calc(var(--card-radius) + 1px);background:linear-gradient(135deg,var(--primary),transparent 40%,var(--secondary) 80%,transparent);z-index:-1;opacity:0;transition:opacity .6s}
.premium-card:hover::after{opacity:0.5}
/* reused utility */
.page-title{position:relative;display:inline-block}
.page-title::after{content:'';position:absolute;bottom:-6px;left:0;width:100%;height:3px;background:linear-gradient(90deg,var(--primary),var(--secondary),transparent);border-radius:3px;box-shadow:0 0 12px rgba(124,92,252,0.2)}
.overlay{animation:overlayFade .25s ease}
@keyframes overlayFade{from{opacity:0}}
.modal-box{animation:modalPop .3s ease}
@keyframes modalPop{from{transform:scale(0.9);opacity:0}to{transform:scale(1);opacity:1}}
.race-track{background:linear-gradient(90deg,#1a1a3e,#0a0a1a,#1a1a3e);animation:trackMove 1s linear infinite}
@keyframes trackMove{0%{background-position:0 0}100%{background-position:40px 0}}
.lb-entry:hover{background:rgba(108,92,231,0.1);transform:translateX(4px)}
/* ===== EXTRA RESPONSIVE OVERLAYS & UTILITY ===== */
@media(max-width:600px){
  .overlay{padding:0}
  .overlay .game-main{padding:12px;margin-bottom:0}
  #authOverlay .game-main{padding:12px}
  #authOverlay .overlay-header{padding:16px 16px 0}
  #authForm{width:100%}
  .modal-box{width:92vw;padding:20px;margin:10px}
  .modal-box h2{font-size:22px}
  .bug-container{padding:8px}
  .bug-code{font-size:12px;padding:12px}
  .bug-options button{padding:12px 14px;font-size:14px;min-height:48px}
  .battle-options button{padding:12px 14px;font-size:14px;min-height:48px}
  .race-track{height:70px}
  .race-track .car{font-size:32px}
  .race-question{font-size:15px;padding:12px}
  .race-code input{font-size:16px;min-height:48px;padding:12px}
  .race-actions button{min-height:48px;font-size:14px;padding:10px 16px}
  .combat-arena{height:180px;touch-action:manipulation}
  .combat-input-row{flex-direction:column;gap:8px}
  .combat-input-row input{font-size:16px;min-height:48px;padding:12px 14px}
  .combat-btn-run{min-height:48px;font-size:15px;padding:12px 20px}
  .combat-action-btns button{min-height:44px;font-size:14px;padding:10px 16px}
  .build-wizard h3{font-size:18px}
  .train-chart{height:180px}
  .quiz-question{font-size:16px}
  .quest-map{gap:12px}
  .quest-item{padding:14px}
  .daily-reward{padding:16px}
  .daily-reward .reward-btn{width:64px;height:64px;font-size:28px;min-height:64px}
  .leaderboard-list{max-width:100%}
  .lb-entry{padding:8px 10px;gap:8px}
  .lb-entry .rank{width:24px;font-size:14px}
  .footer-inner{grid-template-columns:1fr;gap:24px;text-align:center}
  .footer-brand p{font-size:13px}
  .footer-col h4{font-size:15px}
  .footer-col a{font-size:13px}
  .footer-bottom p{font-size:11px;padding:14px 12px}
  .about-grid{grid-template-columns:1fr;gap:16px}
  .contact-form{padding:16px}
  .blog-post-content{padding:12px}
  .blog-post-content img{max-width:100%}
  .typing-area{font-size:14px;padding:10px}
  .typing-stats{flex-wrap:wrap;gap:6px}
  .typing-stats .ts{padding:6px 10px;font-size:12px}
  .diagram{flex-wrap:wrap;gap:4px}
  .diagram .node{font-size:10px;padding:4px 8px}
  .note-card{padding:16px}
  .blog-card{padding:16px}
  .pg-toolbar{flex-wrap:wrap;gap:6px}
  .pg-toolbar button{font-size:12px;padding:6px 10px;min-height:44px}
  /* Game overlay mobile */
  .combat-stats-bar{font-size:12px;gap:4px;padding:6px 8px}
  .combat-stats-bar .csb{padding:2px 6px;font-size:11px}
  .code-snip{font-size:13px;padding:10px;overflow-x:auto}
  .code-prompt{font-size:13px;padding:10px}
  #ctOpts{grid-template-columns:1fr!important;gap:8px}
  #ctOpts button{font-size:14px!important;padding:12px!important;min-height:44px}
  #ctTouchControls button{min-height:48px;font-size:14px;padding:8px 14px}
  .gameover-modal .final-score{font-size:36px}
  .gameover-modal .btn-group{flex-direction:column;gap:6px}
  .gameover-modal .btn-group button{width:100%}
}
@media(max-width:400px){
  .exp-row{grid-template-columns:1fr}
  .dash-cards{grid-template-columns:1fr}
  .shop-grid{grid-template-columns:1fr}
  .achievements-grid{grid-template-columns:1fr}
  .hero h1{font-size:clamp(28px,10vw,40px)!important}
  .hero-emojis span{font-size:20px}
  .page-title{font-size:clamp(20px,5vw,28px)}
}
@media(max-width:360px){
  .typewriter{white-space:normal;font-size:15px;padding:10px 16px;overflow-wrap:break-word;word-break:break-word}
  .hero h1{font-size:clamp(24px,8vw,30px)!important}
  .hero-tagline{font-size:clamp(17px,4vw,20px)}
  .game-sidebar button{padding:8px 10px;font-size:12px;min-height:40px}
  .filter-tabs button{padding:4px 8px;font-size:11px}
  .navbar{padding:0 12px}
  .hero{padding:40px 0 24px}
  .hero-actions{flex-direction:column;align-items:center}
  .hero-actions button{width:100%;max-width:260px}
  .hero-stats{gap:12px}
  .hero-stats span{font-size:12px}
  .hero-stats strong{font-size:16px}
  .mockup-wrap{padding:0 8px}
  .service-card{padding:20px 16px}
  .blog-card{padding:20px 16px}
}
/* ===== FULLY MOBILE — extra fixes ===== */
@media(max-width:600px){
  .orb-1,.orb-2,.orb-3{width:300px!important;height:300px!important;filter:blur(80px)!important}
  .typewriter{white-space:normal;font-size:16px;padding:10px 18px;overflow-wrap:break-word;word-break:break-word}
  .hero h1{letter-spacing:-2px}
  .overlay-header h2{font-size:15px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .g-chapter-grid .g-chapter{padding:14px;min-height:0}
  .g-chapter .icon{font-size:28px}
  .g-chapter h4{font-size:15px}
  .g-chapter .desc{font-size:12px}
  .g-chapter .meta span{font-size:11px}
  #gameOverlay .overlay-header{padding:10px 12px}
  #gameOverlay .overlay-header .close-btn{min-width:40px;min-height:40px;font-size:20px}
  .game-main{padding:10px 8px}
  .dash-cards{gap:6px}
  .dash-card{padding:12px 10px;min-height:0}
  .dash-card .dash-icon{font-size:22px;width:32px;height:32px;margin-bottom:6px}
  .dash-card .dash-title{font-size:12px}
  .dash-card .dash-desc{font-size:10px;line-height:1.3}
  #gameContent canvas,#gameContent .three-canvas{max-width:100%!important;height:auto!important}
  .webpage{padding:24px 12px 70px}
  .auth-tabs button{font-size:14px;padding:12px;min-height:48px}
  #authForm input{font-size:16px;min-height:48px;padding:12px 14px}
  .modal-box{width:95vw;padding:16px;margin:8px}
  .note-card .diagram{gap:4px}
  .note-card .diagram .node{padding:3px 8px;font-size:10px}
  .ep-btn{min-height:48px;font-size:13px;padding:10px 14px;border-radius:12px}
  .ep-btn .ep-icon{font-size:18px;width:24px}
  .exp-section{padding:14px 14px 16px}
  .exp-head{gap:8px;margin-bottom:10px}
  .exp-icon{width:28px;height:28px;font-size:16px}
  .exp-label{font-size:11px;letter-spacing:1.2px}
  .exp-row{gap:6px}
  .footer{padding:32px 12px 20px;margin-top:40px}
  .footer-inner{gap:16px}
  .footer-col h4{font-size:14px;margin-bottom:8px}
  .footer-col a,.footer-brand p{font-size:12px}
}
@media(max-width:480px){
  .dash-cards{grid-template-columns:1fr 1fr;gap:6px}
  .dash-stat{font-size:22px}
  .dash-label{font-size:11px}
  .game-sidebar{padding:6px 8px}
  .game-sidebar button{font-size:11px;padding:6px 10px;min-height:38px}
  }
@media(max-width:400px){
  .game-sidebar button{font-size:11px;padding:6px 8px;min-height:34px}
  .dash-card{padding:10px 8px}
  .dash-card .dash-icon{font-size:18px;width:28px;height:28px}
  .dash-card .dash-title{font-size:11px}
  .dash-card .dash-desc{display:none}
}
@media(min-width:601px) and (max-width:768px){
  .orb-1{width:400px!important;height:400px!important;filter:blur(100px)!important}
  .orb-2{width:350px!important;height:350px!important;filter:blur(100px)!important}
  .orb-3{width:250px!important;height:250px!important;filter:blur(80px)!important}
}
/* Ensure Three.js canvases never overflow */
canvas[data-engine]{max-width:100%;height:auto!important}
/* Mobile-friendly close buttons */
.close-btn,.overlay-close{min-width:44px;min-height:44px;display:flex;align-items:center;justify-content:center}
/* Override any inline size on small screens */
@media(max-width:600px){
  #trafficContainer>div,#worldContent>div{transform:scale(1)!important;width:100%!important}
}

/* ── Floating code fragments (premium ambient) ── */
.code-float-container{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.code-float{position:absolute;font-family:var(--mono);font-size:0.75rem;color:var(--text-muted);opacity:0;white-space:nowrap;animation:codeFloat 15s ease-in-out infinite;letter-spacing:0.02em}
.code-float .kw{color:var(--primary-light);opacity:0.8}
.code-float .fn{color:var(--secondary);opacity:0.8}
.code-float .str{color:#FFA657;opacity:0.7}
.cf-1{top:85%;left:3%;animation-delay:0s;animation-duration:14s}
.cf-2{top:90%;right:5%;animation-delay:-4s;animation-duration:17s}
.cf-3{top:87%;left:45%;animation-delay:-8s;animation-duration:16s}
.cf-4{top:92%;right:25%;animation-delay:-11s;animation-duration:18s}
.cf-5{top:80%;left:70%;animation-delay:-6s;animation-duration:15s}
@keyframes codeFloat{0%{opacity:0;transform:translateY(30px) rotate(0deg)}8%{opacity:.35}80%{opacity:.25}95%{opacity:0;transform:translateY(-400px) rotate(2deg)}100%{opacity:0;transform:translateY(-420px) rotate(2deg)}}

/* ── Mockup section ── */
.mockup-section{padding:40px 0 80px;position:relative;z-index:2}
.mockup-wrap{perspective:1200px;max-width:960px;margin:0 auto;padding:0 24px}
.mockup-frame{background:var(--surface);border:1px solid var(--line);border-radius:var(--card-radius);box-shadow:var(--shadow-card),var(--shadow-glow);overflow:hidden;transform-style:preserve-3d;transition:transform .2s ease-out}.mockup-frame:hover{box-shadow:var(--shadow-card),0 0 60px var(--primary-glow)}
.mockup-progress{height:5px;background:rgba(255,255,255,0.04)}
.mockup-progress-fill{height:100%;background:linear-gradient(90deg,var(--primary),var(--secondary));border-radius:3px;transition:width 1.5s ease}
.mockup-top{display:flex;align-items:center;gap:8px;padding:12px 18px;border-bottom:1px solid var(--line);background:var(--surface-2)}
.mockup-body{display:grid;grid-template-columns:200px 1fr;gap:20px;padding:24px}
@media(max-width:760px){.mockup-body{grid-template-columns:1fr}}
.mockup-side{display:flex;flex-direction:column;gap:4px}
.side-item{padding:10px 14px;border-radius:var(--radius-sm);font-size:.84rem;color:var(--text-dim);font-weight:500;cursor:pointer;transition:all var(--transition-fast);border:1px solid transparent;font-family:var(--font)}
.side-item.active{background:var(--accent-soft);color:var(--primary-light);border-color:rgba(124,124,255,0.2)}
.mockup-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:18px;transition:all var(--transition-med);font-size:.92rem;color:var(--text-dim);position:relative;overflow:hidden}
.mockup-card::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(124,124,255,0.04),transparent 50%,rgba(45,212,168,0.03));opacity:0;transition:opacity .5s;pointer-events:none}
.mockup-card:hover::before{opacity:1}
.mockup-card:hover{border-color:var(--card-border-hover);transform:translateY(-2px);box-shadow:var(--shadow-card)}



/* ── Games Category Grid (keep grid layout, category-tab lives in new CSS) ── */
.games-panel{position:relative;max-width:960px;margin:0 auto}
.games-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.game-tile.hidden{display:none}
@media(max-width:950px){.games-grid{grid-template-columns:1fr 1fr}}
@media(max-width:500px){.games-grid{grid-template-columns:1fr}}

/* ── Feature Grid (keep unique grid-line separator) ── */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--card-radius);overflow:hidden;transition:box-shadow .5s}
.feature-grid:hover{box-shadow:0 0 50px var(--primary-glow)}
@media(max-width:850px){.feature-grid{grid-template-columns:1fr 1fr}}
@media(max-width:540px){.feature-grid{grid-template-columns:1fr}}

/* ── Mode Grid Responsive ── */
.modes-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;max-width:960px;margin:0 auto}
@media(max-width:900px){.modes-grid{grid-template-columns:1fr 1fr}}
@media(max-width:500px){.modes-grid{grid-template-columns:1fr}}

/* ── 3D Badges ── */
.badges-row{display:flex;justify-content:center;gap:32px;flex-wrap:wrap;perspective:1000px;max-width:960px;margin:0 auto}

/* ── Scroll to Top ── */
.scroll-top{position:fixed;bottom:28px;right:28px;z-index:40;width:44px;height:44px;border-radius:50%;background:var(--surface-2);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--line);color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .3s,transform var(--transition-med);font-size:1.4rem;font-family:var(--font-body)}
.scroll-top.visible{opacity:1;pointer-events:all}
.scroll-top:hover{background:var(--surface-3);transform:translateY(-3px);box-shadow:var(--shadow-glow)}

/* ── Quiz Shooter Overlay ── */
#quizShooterOverlay{background:#050510!important}
#quizShooterContainer canvas{display:block;touch-action:none}
#qsOptions button{width:100%}
#qsRestartBtn:hover{transform:translateY(-2px);box-shadow:0 12px 40px rgba(255,60,30,0.7)}#qsRestartBtn:active{transform:scale(0.95)}
#qsShootBtn:active,#qsShootBtn.pressed{transform:scale(0.9)!important;box-shadow:0 0 60px rgba(255,60,20,0.9);background:radial-gradient(circle at 40% 35%,rgba(255,150,100,1),rgba(255,60,30,0.9),rgba(180,30,15,0.7))}
@media(max-width:480px){#qsJoystickZone{width:110px!important;height:110px!important}#qsJoystickBase{width:100px!important;height:100px!important}#qsJoystickThumb{width:38px!important;height:38px!important}#qsShootBtn{width:68px!important;height:68px!important;font-size:10px!important}#qsMobileControls{padding:12px 16px!important}}
@media(min-width:1025px){#qsMobileControls{opacity:0.4;transition:opacity .3s}#qsMobileControls:hover{opacity:1}#qsJoystickZone{width:110px!important;height:110px!important}}

/* ===== EXTRACTED FROM INDEX.HTML ===== */

/* --- Style Block 1 --- */
@font-face{font-family:'Inter';font-style:normal;font-weight:400 700;font-display:swap;src:local('Inter'),local('Inter Regular')}@font-face{font-family:'Plus Jakarta Sans';font-style:normal;font-weight:700 800;font-display:swap;src:local('Plus Jakarta Sans Bold'),local('Plus Jakarta Sans ExtraBold')}@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:400 600;font-display:swap;src:local('JetBrains Mono'),local('JetBrains Mono Regular')}

/* --- Style Block 2 --- */

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; height: 100%; margin: 0; padding: 0; width: 100%; }
body { font-family: 'Poppins', sans-serif; overflow-x: hidden; background: #0a0a1a; color: #fff; min-height: 100%; min-height: -webkit-fill-available; margin: 0; padding: 0; width: 100%; }

/* SCROLL PROGRESS BAR */
.scroll-progress { position: fixed; top: 0; left: 0; height: 3px; background: linear-gradient(90deg,#FFD700,#FFA500,#FF6347); z-index: 9999; width: 0%; transition: width 0.1s; box-shadow: 0 0 10px rgba(255,215,0,0.8); }

/* OFFLINE BANNER */
.offline-banner { display: none; position: fixed; top: 0; left: 0; width: 100%; background: #ff5f57; color: #fff; padding: 8px; text-align: center; font-size: 12px; font-weight: 700; z-index: 10000; }
.offline-banner.show { display: block; }

/* TOAST NOTIFICATIONS */
.toast-container { position: fixed; top: 80px; right: 20px; z-index: 9998; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
.toast { background: linear-gradient(135deg,#1a1a3e,#2d1b4e); border: 2px solid #FFD700; border-radius: 12px; padding: 14px 20px; color: #fff; font-size: 13px; font-weight: 600; box-shadow: 0 10px 30px rgba(0,0,0,0.5); animation: toastIn 0.4s ease, toastOut 0.4s ease 2.6s forwards; display: flex; align-items: center; gap: 10px; min-width: 250px; pointer-events: auto; }
.toast i { font-size: 18px; color: #FFD700; }
.toast.success { border-color: #28c840; }
.toast.success i { color: #28c840; }
.toast.error { border-color: #ff5f57; }
.toast.error i { color: #ff5f57; }
@keyframes toastIn { from{opacity:0;transform:translateX(100%)} }
@keyframes toastOut { to{opacity:0;transform:translateX(100%)} }

/* PIXEL ART HERO */
.pixel-hero {
  position: relative;
  width: 100%;
  margin: 0;
  overflow: hidden;
  min-height: 100vh;
  min-height: 100dvh;
  background: #0a0a1a;
  display: flex;
  align-items: center;
  justify-content: center;
}
.pixel-hero-bg-img {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  inset: 0;
  z-index: 0;
  object-fit: cover;
}

.pixel-hero-title {
  position: absolute;
  left: 50%;
  top: 35%;
  transform: translate(-50%, -50%);
  z-index: 10;
  text-align: center;
  width: 100%;
  max-width: 800px;
  padding: 0 16px;
}
.pixel-hero-buttons {
  position: absolute;
  left: 50%;
  top: 78%;
  transform: translate(-50%, -50%);
  z-index: 10;
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  justify-content: center;
}
.pixel-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,26,0.5) 0%, transparent 25%, transparent 55%, rgba(10,10,26,0.7) 75%, rgba(10,10,26,0.85) 100%);
  z-index: 1;
}
.pixel-hero-content { position: relative; z-index: 10; text-align: center; max-width: 700px; padding: 0 16px; }
.pixel-title {
  font-family: 'Press Start 2P', cursive;
  font-size: clamp(36px, 8vw, 68px);
  line-height: 1.3;
  margin-bottom: 24px;
  text-shadow: 4px 4px 0 rgba(0,0,0,0.5), -1px -1px 0 rgba(0,0,0,0.3);
}
.pixel-title .coding { color: #FFD700; display: block; }
.pixel-title .adventure { color: #00BFFF; display: block; }
.pixel-tagline { font-size: 13px; color: rgba(255,255,255,0.85); margin-bottom: 32px; line-height: 1.6; }
.pixel-tagline span { color: #FFD700; }
/* Pixel art buttons */
.pixel-btn {
  font-family: 'Press Start 2P', cursive;
  font-size: 11px;
  padding: 14px 28px;
  border: 4px solid #000;
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
  text-transform: uppercase;
  letter-spacing: 1px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 0 #000;
  position: relative;
  top: 0;
}
.pixel-btn:hover { transform: translateY(-2px); box-shadow: 0 6px 0 #000; }
.pixel-btn:active { transform: translateY(4px); box-shadow: 0 0 0 #000; }
.pixel-btn-primary { background: linear-gradient(135deg,#FFD700,#FFA500); color: #000; }
.pixel-btn-secondary { background: linear-gradient(135deg,#a78bfa,#6366f1); color: #fff; border-color: #1e1b4b; box-shadow: 0 4px 0 #1e1b4b; }
.pixel-btn-secondary:hover { box-shadow: 0 6px 0 #1e1b4b; }
/* Wooden sign board side menu */
.wooden-sign {
  background: linear-gradient(180deg, #8B4513, #654321);
  border: 4px solid #3E2723;
  border-radius: 4px;
  padding: 12px 10px;
  box-shadow: 0 4px 0 #3E2723, inset 0 1px 0 rgba(255,255,255,0.1), inset 0 -1px 0 rgba(0,0,0,0.3);
  position: relative;
}
.wooden-sign::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px 2px 0 0;
}
.wooden-sign-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  margin: 4px 0;
  background: rgba(0,0,0,0.35);
  border: 2px solid rgba(62,39,35,0.6);
  border-radius: 2px;
  cursor: pointer;
  transition: all 0.2s;
  color: #fff;
}
.wooden-sign-item:hover {
  background: rgba(255,215,0,0.2);
  border-color: #FFD700;
  transform: translateX(4px);
}
.wooden-sign-item i { color: #FFD700; font-size: 14px; width: 20px; text-align: center; }
.wooden-sign-item .label { font-family: 'Press Start 2P', cursive; font-size: 8px; line-height: 1.4; }
.wooden-sign-item .sublabel { font-size: 8px; color: rgba(255,255,255,0.6); display: block; margin-top: 2px; }
/* Wooden plaque level badge */
.wooden-plaque {
  background: linear-gradient(180deg, #A0522D, #8B4513, #654321);
  border: 4px solid #3E2723;
  border-radius: 4px;
  padding: 16px 20px;
  text-align: center;
  box-shadow: 0 4px 0 #3E2723, inset 0 1px 0 rgba(255,255,255,0.15);
  cursor: pointer;
  transition: all 0.2s;
}
.wooden-plaque:hover { transform: scale(1.05); box-shadow: 0 6px 0 #3E2723; }
.wooden-plaque:active { transform: translateY(4px); box-shadow: 0 0 0 #3E2723; }
.wooden-plaque h3 {
  font-family: 'Press Start 2P', cursive;
  font-size: 9px;
  color: #FFD700;
  margin-bottom: 8px;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.5);
}
.wooden-plaque .trophy { font-size: 32px; display: block; margin-bottom: 6px; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); }
.wooden-plaque .xp-bar-wrap { width: 100%; height: 10px; background: rgba(0,0,0,0.5); border: 2px solid rgba(62,39,35,0.8); border-radius: 2px; overflow: hidden; }
.wooden-plaque .xp-bar-fill { height: 100%; background: linear-gradient(90deg,#FFD700,#FFA500); width: 75%; }
.wooden-plaque .xp-text { font-family: 'Press Start 2P', cursive; font-size: 8px; color: #fff; margin-top: 6px; text-shadow: 1px 1px 0 rgba(0,0,0,0.5); }
/* Pixel floating gems */
.pixel-gem {
  position: absolute;
  font-size: 18px;
  z-index: 5;
  animation: pixelGemFloat 4s ease-in-out infinite;
  image-rendering: pixelated;
}
@keyframes pixelGemFloat {
  0%,100% { transform: translateY(0) scale(1); }
  50% { transform: translateY(-18px) scale(1.1); }
}
/* Scanline overlay for pixel feel */
.pixel-scanlines {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,0,0,0.05) 2px, rgba(0,0,0,0.05) 4px);
}
/* Glow effects */
.pixel-glow-gold { box-shadow: 0 0 20px rgba(255,215,0,0.4), 0 0 40px rgba(255,215,0,0.2); }
.pixel-glow-purple { box-shadow: 0 0 20px rgba(168,85,247,0.4), 0 0 40px rgba(168,85,247,0.2); }
/* Robot guide pixel style */
.pixel-robot-guide {
  background: linear-gradient(180deg, #8B4513, #654321);
  border: 3px solid #3E2723;
  border-radius: 4px;
  padding: 8px 14px;
  font-family: 'Press Start 2P', cursive;
  font-size: 8px;
  color: #FFD700;
  box-shadow: 0 3px 0 #3E2723;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}
.pixel-robot-guide:hover { transform: translateY(-2px); box-shadow: 0 5px 0 #3E2723; }
/* Pixel art star decorations */
.pixel-star { position: absolute; background: #fff; width: 3px; height: 3px; border-radius: 0; z-index: 3; animation: pixelStarTwinkle 2s ease-in-out infinite; }
@keyframes pixelStarTwinkle { 0%,100% { opacity: 0.3; } 50% { opacity: 1; } }

/* HERO (legacy fallback) */
.hero { min-height: 100vh; min-height: -webkit-fill-available; background: linear-gradient(135deg,#0f0f2e 0%,#1a1040 30%,#2d1b69 60%,#1a1040 100%); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 100px 20px 40px; max-width: none; margin: 0; width: 100%; }
.hero-wrap { max-width: none; margin: 0; padding: 0; width: 100%; min-height: 100vh; }
.webpage.active.hero-wrap { display: block; }
.webpage.active { display: block !important; }
.main-wrapper { width: 100%; min-height: 100vh; display: flex; flex-direction: column; margin: 0; padding: 0; }
main { width: 100%; margin: 0; padding: 0; }
footer { margin-top: auto; }
.hero-bg { position: absolute; inset: 0; background: radial-gradient(ellipse at 20% 80%,rgba(120,50,150,0.3) 0%,transparent 50%),radial-gradient(ellipse at 80% 20%,rgba(100,100,255,0.2) 0%,transparent 50%); }
.stars-container { position: absolute; inset: 0; }
.star { position: absolute; background: #fff; border-radius: 50%; animation: twinkle var(--dur) ease-in-out infinite; }
@keyframes twinkle { 0%,100%{opacity:0.2;transform:scale(0.8)} 50%{opacity:1;transform:scale(1.2)} }
.moon { position: absolute; right: 10%; top: 8%; width: 80px; height: 80px; background: linear-gradient(135deg,#FFF8DC,#FFE4B5); border-radius: 50%; box-shadow: 0 0 60px rgba(255,248,220,0.6); animation: moonGlow 4s ease-in-out infinite; }
@keyframes moonGlow { 0%,100%{box-shadow:0 0 60px rgba(255,248,220,0.6)} 50%{box-shadow:0 0 100px rgba(255,248,220,0.9)} }
.castle { position: absolute; left: 3%; top: 12%; font-size: 100px; animation: castleFloat 8s ease-in-out infinite; filter: drop-shadow(0 20px 40px rgba(0,0,0,0.7)); z-index: 5; }
@keyframes castleFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-20px)} }
.island-left { position: absolute; left: 1%; top: 45%; font-size: 60px; animation: islandFloat 10s ease-in-out infinite reverse; }
.island-right { position: absolute; right: 1%; top: 20%; font-size: 70px; animation: islandFloat 12s ease-in-out infinite; }
@keyframes islandFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-25px)} }
.waterfall { position: absolute; width: 25px; border-radius: 0 0 15px 15px; overflow: hidden; }
.waterfall::before { content:''; position: absolute; width: 100%; height: 200%; background: linear-gradient(180deg,rgba(100,200,255,0.9),rgba(100,200,255,0.3)); animation: waterFlow 2s linear infinite; }
@keyframes waterFlow { 0%{transform:translateY(-50%)} 100%{transform:translateY(0)} }
.wf-left { left: 2%; top: 50%; height: 120px; }
.wf-right { right: 2%; top: 25%; height: 140px; }
.character-scene { position: absolute; bottom: 15%; right: 15%; display: flex; align-items: flex-end; gap: 8px; animation: charFadeIn 2s ease; z-index: 10; }
@keyframes charFadeIn { from{opacity:0;transform:translateY(40px)} }
.cat-anim { font-size: 35px; animation: catWag 3s ease-in-out infinite; }
@keyframes catWag { 0%,100%{transform:rotate(-8deg)} 50%{transform:rotate(8deg)} }
.char-anim { font-size: 60px; }
.butterfly { position: absolute; font-size: 20px; animation: fly 12s linear infinite; z-index: 5; }
.bf1 { top: 35%; left: 25%; animation-delay: 0s; }
.bf2 { top: 55%; left: 65%; animation-delay: 4s; }
.bf3 { top: 40%; left: 50%; animation-delay: 8s; }
@keyframes fly { 0%{transform:translate(0,0)} 25%{transform:translate(40px,-30px)} 50%{transform:translate(80px,0)} 75%{transform:translate(40px,30px)} 100%{transform:translate(0,0)} }
.side-menu { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); background: linear-gradient(135deg,rgba(139,90,43,0.95),rgba(160,82,45,0.95)); padding: 15px; border-radius: 12px; border: 2px solid #FFD700; z-index: 100; animation: slideMenu 1s ease; }
@keyframes slideMenu { from{opacity:0;transform:translateY(-50%) translateX(-40px)} to{opacity:1;transform:translateY(-50%) translateX(0)} }
.menu-item { display: flex; align-items: center; gap: 8px; padding: 8px; margin: 5px 0; color: #fff; border-radius: 8px; cursor: pointer; background: rgba(0,0,0,0.3); transition: 0.3s; }
.menu-item:hover { background: rgba(255,215,0,0.3); transform: translateX(8px); }
.menu-item i { font-size: 16px; color: #FFD700; }
.menu-item span { font-weight: 600; font-size: 11px; }
.menu-item small { font-size: 8px; opacity: 0.8; display: block; }
.hero-content { text-align: center; z-index: 10; position: relative; animation: heroFade 1.5s ease; max-width: 600px; }
@keyframes heroFade { from{opacity:0;transform:translateY(30px)} }
.start-text { font-family: 'Press Start 2P', cursive; color: #FFD700; font-size: 10px; letter-spacing: 2px; margin-bottom: 10px; }
.main-title { font-family: 'Press Start 2P', cursive; font-size: 36px; line-height: 1.2; margin: 15px 0; text-shadow: 3px 3px 0 rgba(0,0,0,0.5); }
.title-coding { background: linear-gradient(135deg,#FFD700,#FFA500,#FF6347); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: block; }
.title-adventure { background: linear-gradient(135deg,#4169E1,#1E90FF,#00BFFF); -webkit-background-clip: text; -webkit-text-fill-color: transparent; display: block; }
.tagline { color: #fff; font-size: 14px; margin: 15px 0; line-height: 1.5; opacity: 0.9; }
.hero-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 20px 0; }
.btn-big { padding: 14px 28px; font-size: 11px; font-family: 'Press Start 2P', cursive; border-radius: 10px; }
.no-credit { color: rgba(255,255,255,0.7); font-size: 10px; margin-top: 8px; }
.level-up { position: absolute; right: 15px; bottom: 15px; background: linear-gradient(135deg,#8B4513,#A0522D); padding: 15px; border-radius: 12px; border: 2px solid #FFD700; text-align: center; z-index: 100; cursor: pointer; transition: 0.3s; }
.level-up:hover { transform: scale(1.05); box-shadow: 0 10px 30px rgba(255,215,0,0.4); }
.level-up h3 { font-family: 'Press Start 2P', cursive; color: #FFD700; font-size: 9px; margin-bottom: 8px; }
.trophy-anim { font-size: 30px; animation: trophySpin 2s infinite; }
@keyframes trophySpin { 0%,100%{transform:rotate(-5deg)} 50%{transform:rotate(5deg)} }
.prog-bar { width: 100%; height: 12px; background: rgba(0,0,0,0.6); border-radius: 8px; overflow: hidden; margin-top: 6px; }
.prog-fill { height: 100%; background: linear-gradient(90deg,#FFD700,#FFA500); width: 75%; border-radius: 6px; animation: fillBar 2s ease; }
@keyframes fillBar { from{width:0} to{width:75%} }
.float-gem { position: absolute; font-size: 16px; animation: gemFloat 6s ease-in-out infinite; z-index: 5; }
@keyframes gemFloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-25px)} }
.sparkle { position: absolute; width: 3px; height: 3px; background: #FFD700; border-radius: 50%; animation: sparkleAnim 3s linear infinite; }
@keyframes sparkleAnim { 0%,100%{opacity:0;transform:scale(0)} 50%{opacity:1;transform:scale(1)} }

/* BUTTON REVEAL */
@keyframes btnReveal { 0%{opacity:0;transform:scale(0.8)} 100%{opacity:1;transform:scale(1)} }
#startJourneyBtn { animation: btnReveal 0.6s 0.7s backwards cubic-bezier(0.34,1.56,0.64,1); }

/* STATS - ANIMATED COUNTERS */
.stats-section { padding: 40px 20px; background: rgba(255,215,0,0.05); display: flex; justify-content: center; gap: 30px; flex-wrap: wrap; border-top: 2px solid rgba(255,215,0,0.2); border-bottom: 2px solid rgba(255,215,0,0.2); }
.stat-box { text-align: center; min-width: 120px; }
.stat-num { font-family: 'Press Start 2P', cursive; font-size: 24px; color: #FFD700; margin-bottom: 5px; text-shadow: 0 0 20px rgba(255,215,0,0.5); }
.stat-lbl { color: rgba(255,255,255,0.8); font-size: 11px; font-weight: 600; }

/* CODE EDITOR */
.code-editor-section { padding: 50px 15px; background: linear-gradient(135deg,#0f0f2e,#1a1040); position: relative; }
.editor-container { max-width: 900px; margin: 0 auto; }
.editor-header { text-align: center; margin-bottom: 25px; }
.editor-header h2 { font-family: 'Press Start 2P', cursive; font-size: 16px; color: #FFD700; margin-bottom: 8px; }
.editor-header p { color: rgba(255,255,255,0.7); font-size: 12px; }
.code-editor { background: #1e1e2e; border-radius: 12px; border: 2px solid rgba(255,215,0,0.3); overflow: hidden; transition: 0.3s; }
.code-editor:hover { border-color: #FFD700; box-shadow: 0 20px 60px rgba(255,215,0,0.2); }
.editor-topbar { background: #2d2d3f; padding: 8px 12px; display: flex; align-items: center; gap: 8px; }
.editor-dots { display: flex; gap: 5px; }
.dot { width: 10px; height: 10px; border-radius: 50%; transition: 0.3s; }
.dot:hover { transform: scale(1.3); }
.dot-r { background: #ff5f57; }
.dot-y { background: #ffbd2e; }
.dot-g { background: #28c840; }
.editor-tabs { display: flex; gap: 4px; margin-left: 15px; }
.editor-tab { padding: 4px 12px; background: rgba(255,255,255,0.05); border-radius: 5px; font-size: 10px; color: rgba(255,255,255,0.6); font-family: 'Fira Code', monospace; cursor: pointer; transition: 0.3s; }
.editor-tab:hover { background: rgba(255,215,0,0.15); }
.editor-tab.active { background: rgba(255,215,0,0.2); color: #FFD700; }
.editor-body { display: flex; min-height: 250px; }
.line-numbers { background: #16161e; padding: 12px 10px; text-align: right; font-family: 'Fira Code', monospace; font-size: 11px; color: rgba(255,255,255,0.3); line-height: 1.8; min-width: 35px; }
.code-area { flex: 1; padding: 12px; font-family: 'Fira Code', monospace; font-size: 11px; line-height: 1.8; }
.code-line { opacity: 0; animation: codeAppear 0.5s ease forwards; white-space: pre; }
@keyframes codeAppear { from{opacity:0;transform:translateX(-10px)} to{opacity:1;transform:translateX(0)} }
.kw { color: #c678dd; }
.fn { color: #61afef; }
.str { color: #98c379; }
.var { color: #e5c07b; }
.op { color: #abb2bf; }
.cm { color: #5c6370; font-style: italic; }
.cursor-blink { display: inline-block; width: 2px; height: 14px; background: #FFD700; animation: blink 1s infinite; vertical-align: middle; margin-left: 2px; }
.editor-sidebar { width: 140px; background: #16161e; padding: 12px; border-left: 1px solid rgba(255,255,255,0.1); }
.sidebar-title { font-size: 9px; color: rgba(255,255,255,0.4); text-transform: uppercase; margin-bottom: 10px; font-weight: 700; }
.sidebar-item { display: flex; align-items: center; gap: 6px; padding: 6px; margin: 3px 0; border-radius: 5px; font-size: 10px; color: rgba(255,255,255,0.7); transition: 0.3s; cursor: pointer; }
.sidebar-item:hover { background: rgba(255,215,0,0.1); color: #FFD700; }
.sidebar-item i { font-size: 12px; color: #FFD700; }
.live-preview { margin-top: 15px; padding: 10px; background: rgba(40,200,64,0.1); border: 1px solid rgba(40,200,64,0.3); border-radius: 6px; }
.live-preview h4 { font-size: 9px; color: #28c840; margin-bottom: 6px; }
.preview-dot { width: 6px; height: 6px; background: #28c840; border-radius: 50%; display: inline-block; animation: previewPulse 1.5s infinite; vertical-align: middle; }
@keyframes previewPulse { 0%,100%{opacity:1} 50%{opacity:0.3} }

/* SECTION STYLES */
.section-title { font-family: 'Press Start 2P', cursive; font-size: 18px; text-align: center; color: #FFD700; margin-bottom: 10px; }
.section-sub { text-align: center; color: rgba(255,255,255,0.7); font-size: 12px; margin-bottom: 30px; }

/* EXPLORE & LEARN */
.explore-section { padding: 60px 15px; background: linear-gradient(135deg,#0f0f2e,#1a1040); }
.explore-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 15px; max-width: 1000px; margin: 0 auto; }
.explore-card { background: rgba(255,255,255,0.05); border: 2px solid rgba(255,215,0,0.2); border-radius: 12px; padding: 18px; transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275); cursor: pointer; }
.explore-card:hover { transform: translateY(-8px) scale(1.02); border-color: #FFD700; box-shadow: 0 15px 40px rgba(255,215,0,0.2); }
.explore-icon { font-size: 30px; margin-bottom: 8px; transition: 0.3s; }
.explore-card:hover .explore-icon { transform: scale(1.2) rotate(10deg); }
.explore-card h3 { font-size: 14px; margin-bottom: 6px; }
.explore-card p { color: rgba(255,255,255,0.7); font-size: 11px; line-height: 1.4; }
.explore-links { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.explore-link { padding: 3px 8px; background: rgba(255,215,0,0.15); border-radius: 12px; font-size: 9px; color: #FFD700; transition: 0.3s; cursor: pointer; }
.explore-link:hover { background: rgba(255,215,0,0.3); transform: translateY(-2px); }
.exp-btn{display:inline-block;padding:10px 20px;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;transition:all .3s cubic-bezier(.34,1.56,.64,1);border:2px solid rgba(255,255,255,0.15);color:#fff;text-decoration:none;letter-spacing:.2px}
.exp-btn-primary{background:linear-gradient(135deg,#8a2be2,#6a1b9a);box-shadow:0 4px 15px rgba(138,43,226,0.3)}
.exp-btn-primary:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 8px 25px rgba(138,43,226,0.5);background:linear-gradient(135deg,#9b4dff,#7b2cbf)}
.exp-btn-primary:active{transform:translateY(-1px) scale(1.01);box-shadow:0 2px 10px rgba(138,43,226,0.4)}
.exp-btn-cyan{background:linear-gradient(135deg,#00d4d4,#009b9b);box-shadow:0 4px 15px rgba(0,212,212,0.3)}
.exp-btn-cyan:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 8px 25px rgba(0,212,212,0.5);background:linear-gradient(135deg,#00e6e6,#00b3b3)}
.exp-btn-cyan:active{transform:translateY(-1px) scale(1.01);box-shadow:0 2px 10px rgba(0,212,212,0.4)}
.exp-btn-amber{background:linear-gradient(135deg,#ffb300,#e6a000);box-shadow:0 4px 15px rgba(255,179,0,0.3)}
.exp-btn-amber:hover{transform:translateY(-3px) scale(1.03);box-shadow:0 8px 25px rgba(255,179,0,0.5);background:linear-gradient(135deg,#ffc107,#f5a800)}
.exp-btn-amber:active{transform:translateY(-1px) scale(1.01);box-shadow:0 2px 10px rgba(255,179,0,0.4)}

/* GAMES */
.games-section { padding: 60px 15px; background: #0a0a1a; }
.games-tabs { display: flex; justify-content: center; gap: 6px; margin-bottom: 25px; flex-wrap: wrap; }
.game-tab { padding: 6px 14px; background: rgba(255,215,0,0.1); border: 2px solid rgba(255,215,0,0.2); border-radius: 15px; color: #fff; font-size: 11px; font-weight: 600; cursor: pointer; transition: 0.3s; }
.game-tab.active,.game-tab:hover { background: rgba(255,215,0,0.3); border-color: #FFD700; transform: translateY(-2px); }
.games-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 12px; max-width: 1200px; margin: 0 auto; }
.game-card { background: rgba(255,255,255,0.05); border: 2px solid rgba(255,215,0,0.15); border-radius: 10px; padding: 15px; transition: all 0.3s; cursor: pointer; position: relative; overflow: hidden; }
.game-card::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg,transparent,rgba(255,215,0,0.1),transparent); transition: 0.5s; }
.game-card:hover::before { left: 100%; }
.game-card:hover { transform: translateY(-5px); border-color: #FFD700; box-shadow: 0 10px 30px rgba(255,215,0,0.2); }
.game-card-icon { font-size: 28px; margin-bottom: 6px; transition: 0.3s; }
.game-card:hover .game-card-icon { transform: scale(1.2); }
.game-card h3 { font-size: 13px; margin-bottom: 4px; }
.game-card p { color: rgba(255,255,255,0.6); font-size: 10px; line-height: 1.4; }
.game-badge { position: absolute; top: 6px; right: 6px; padding: 2px 6px; background: rgba(255,215,0,0.2); border-radius: 8px; font-size: 8px; color: #FFD700; font-weight: 700; }

/* Game cards with banners */
.game-card-new { background: rgba(255,255,255,0.04); border: 2px solid rgba(168,85,247,0.15); border-radius: 12px; overflow: hidden; cursor: pointer; transition: all 0.3s; display: flex; flex-direction: column; }
.game-card-new:hover { transform: translateY(-6px); border-color: rgba(255,215,0,0.4); box-shadow: 0 10px 30px rgba(168,85,247,0.2); }
.game-card-new .card-banner { height: 80px; position: relative; display: flex; align-items: flex-start; justify-content: flex-end; padding: 6px; }
.game-card-new .card-tag { padding: 2px 8px; border-radius: 8px; font-size: 9px; font-weight: 700; background: rgba(0,0,0,0.35); backdrop-filter: blur(4px); color: #fff; border: 1px solid rgba(255,255,255,0.15); text-transform: uppercase; letter-spacing: 0.5px; }
.game-card-new .card-content { padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.game-card-new .card-icon { font-size: 20px; margin-bottom: 2px; }
.game-card-new h3 { font-size: 11px; font-weight: 700; color: #fff; line-height: 1.3; }
.game-card-new p { font-size: 10px; color: rgba(255,255,255,0.5); line-height: 1.4; }

/* Course cards for Web Dev section */
.course-card { background: rgba(255,255,255,0.04); border: 2px solid rgba(168,85,247,0.15); border-radius: 12px; overflow: hidden; transition: all 0.3s; display: flex; flex-direction: column; }
.course-card:hover { transform: translateY(-6px); border-color: rgba(255,215,0,0.4); box-shadow: 0 10px 30px rgba(168,85,247,0.2); }
.course-card .course-banner { height: 100px; }
.course-card .course-content { padding: 14px 16px 18px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.course-card .course-badge { font-size: 9px; font-weight: 700; color: rgba(255,255,255,0.4); text-transform: uppercase; letter-spacing: 1px; }
.course-card h3 { font-size: 16px; font-weight: 700; color: #fff; }
.course-card p { font-size: 11px; color: rgba(255,255,255,0.55); line-height: 1.5; }
.course-card .course-level { font-size: 9px; font-weight: 700; color: #FFD700; text-transform: uppercase; letter-spacing: 0.5px; margin-top: auto; padding-top: 8px; }

/* CORE FEATURES */
.core-features { padding: 60px 15px; background: #0a0a1a; }
.features-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 15px; max-width: 1000px; margin: 0 auto; }
.feature-card { background: linear-gradient(135deg,rgba(102,126,234,0.15),rgba(118,75,162,0.15)); border: 2px solid rgba(255,215,0,0.2); border-radius: 12px; padding: 20px; transition: all 0.4s; text-align: center; position: relative; overflow: hidden; }
.feature-card::before { content: ''; position: absolute; top: -50%; left: -50%; width: 200%; height: 200%; background: radial-gradient(circle,rgba(255,215,0,0.1) 0%,transparent 70%); opacity: 0; transition: 0.5s; }
.feature-card:hover::before { opacity: 1; }
.feature-card:hover { transform: translateY(-8px); border-color: #FFD700; box-shadow: 0 15px 40px rgba(102,126,234,0.3); }
.feature-icon { font-size: 35px; margin-bottom: 10px; transition: 0.4s; }
.feature-card:hover .feature-icon { transform: scale(1.3) rotate(10deg); }
.feature-card h3 { font-size: 14px; margin-bottom: 6px; }
.feature-card p { color: rgba(255,255,255,0.7); font-size: 11px; line-height: 1.5; }

/* SERVICES */
.services-section { padding: 60px 15px; background: linear-gradient(135deg,#0f0f2e,#1a1040); }
.services-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 15px; max-width: 1000px; margin: 0 auto; }
.service-card { background: rgba(255,255,255,0.05); border: 2px solid rgba(255,215,0,0.2); border-radius: 12px; padding: 20px; transition: all 0.4s; text-align: center; }
.service-card:hover { transform: translateY(-8px); border-color: #FFD700; box-shadow: 0 15px 40px rgba(255,215,0,0.2); }
.service-icon { font-size: 35px; margin-bottom: 10px; transition: 0.3s; }
.service-card:hover .service-icon { transform: scale(1.2) rotate(-10deg); }
.service-card h3 { font-size: 14px; margin-bottom: 6px; }
.service-card p { color: rgba(255,255,255,0.7); font-size: 11px; line-height: 1.5; }

/* TESTIMONIALS */
.testimonials-section { padding: 60px 15px; background: #0a0a1a; }
.testimonials-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 20px; max-width: 1100px; margin: 0 auto; }
.testimonial-card { background: linear-gradient(135deg,rgba(255,215,0,0.08),rgba(255,165,0,0.05)); border: 2px solid rgba(255,215,0,0.2); border-radius: 15px; padding: 25px; transition: all 0.4s; position: relative; }
.testimonial-card:hover { transform: translateY(-5px); border-color: #FFD700; box-shadow: 0 15px 40px rgba(255,215,0,0.2); }
.testimonial-card::before { content: '"'; position: absolute; top: 10px; right: 20px; font-size: 60px; color: rgba(255,215,0,0.2); font-family: Georgia, serif; line-height: 1; }
.testimonial-stars { color: #FFD700; font-size: 14px; margin-bottom: 10px; }
.testimonial-text { color: rgba(255,255,255,0.85); font-size: 12px; line-height: 1.6; margin-bottom: 15px; font-style: italic; }
.testimonial-author { display: flex; align-items: center; gap: 10px; }
.testimonial-avatar { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg,#667eea,#764ba2); display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 700; border: 2px solid #FFD700; }
.testimonial-info h4 { font-size: 12px; color: #fff; }
.testimonial-info small { font-size: 10px; color: rgba(255,255,255,0.6); }

/* ROADMAP */
.roadmap-section { padding: 60px 15px; background: linear-gradient(135deg,#0f0f2e,#1a1040); }
.roadmap-container { max-width: 1000px; margin: 0 auto; }
.roadmap-tabs { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-bottom: 30px; }
.roadmap-tab { padding: 12px 24px; border-radius: 12px; border: 2px solid rgba(255,215,0,0.2); background: rgba(255,255,255,0.05); color: rgba(255,255,255,0.7); cursor: pointer; font-size: 13px; font-weight: 600; transition: 0.3s; font-family: 'Poppins', sans-serif; display: flex; align-items: center; gap: 8px; }
.roadmap-tab:hover { border-color: #FFD700; background: rgba(255,215,0,0.1); }
.roadmap-tab.active { background: linear-gradient(135deg,#FFD700,#FFA500); color: #0a0a1a; border-color: transparent; box-shadow: 0 0 20px rgba(255,215,0,0.4); }
.roadmap-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(280px,1fr)); gap: 12px; }
.roadmap-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,215,0,0.15); border-radius: 12px; padding: 14px; transition: 0.3s; cursor: pointer; }
.roadmap-card:hover { border-color: #FFD700; transform: translateY(-3px); box-shadow: 0 8px 25px rgba(255,215,0,0.15); }
.roadmap-card.completed { border-color: #28c840; background: rgba(40,200,64,0.06); }
.roadmap-card-header { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.roadmap-card-icon { width: 36px; height: 36px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.roadmap-card-icon.python { background: rgba(253,203,110,0.2); }
.roadmap-card-icon.ai { background: rgba(253,121,168,0.2); }
.roadmap-card-icon.ml { background: rgba(0,206,201,0.2); }
.roadmap-card-title { flex: 1; font-size: 13px; font-weight: 600; color: #fff; }
.roadmap-card-check { color: #28c840; font-size: 14px; }
.roadmap-card-desc { font-size: 11px; color: rgba(255,255,255,0.6); line-height: 1.4; margin-bottom: 8px; padding-left: 46px; }
.roadmap-card-bar { height: 4px; background: rgba(0,0,0,0.4); border-radius: 2px; overflow: hidden; }
.roadmap-card-fill { height: 100%; border-radius: 2px; transition: width 0.8s ease; }
.roadmap-card-fill.python { background: linear-gradient(90deg,#fdcb6e,#f39c12); }
.roadmap-card-fill.ai { background: linear-gradient(90deg,#fd79a8,#e84393); }
.roadmap-card-fill.ml { background: linear-gradient(90deg,#00cec9,#0984e3); }
.roadmap-cta { text-align: center; margin-top: 30px; }
.roadmap-cta .btn-full { display: inline-flex; align-items: center; gap: 8px; padding: 14px 32px; border-radius: 12px; background: linear-gradient(135deg,#FFD700,#FFA500); color: #0a0a1a; font-weight: 700; font-size: 14px; text-decoration: none; transition: 0.3s; font-family: 'Poppins', sans-serif; cursor: pointer; border: none; }
.roadmap-cta .btn-full:hover { transform: scale(1.05); box-shadow: 0 0 30px rgba(255,215,0,0.5); }

/* SUCCESS METRICS */
.metrics-section { padding: 60px 15px; background: #0a0a1a; }
.metrics-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(200px,1fr)); gap: 20px; max-width: 1000px; margin: 0 auto; }
.metric-card { background: linear-gradient(135deg,rgba(40,200,64,0.1),rgba(102,126,234,0.1)); border: 2px solid rgba(255,215,0,0.2); border-radius: 15px; padding: 25px; text-align: center; transition: all 0.4s; }
.metric-card:hover { transform: translateY(-5px) scale(1.02); border-color: #FFD700; box-shadow: 0 15px 40px rgba(255,215,0,0.2); }
.metric-icon { font-size: 35px; margin-bottom: 10px; }
.metric-value { font-family: 'Press Start 2P', cursive; font-size: 24px; color: #FFD700; margin-bottom: 8px; text-shadow: 0 0 20px rgba(255,215,0,0.5); }
.metric-label { color: rgba(255,255,255,0.8); font-size: 12px; font-weight: 600; }
.metric-desc { color: rgba(255,255,255,0.6); font-size: 10px; margin-top: 5px; }

/* BLOG */
.blog-section { padding: 50px 15px; background: #0a0a1a; }
.blog-header { display: flex; justify-content: space-between; align-items: center; max-width: 1000px; margin: 0 auto 25px; }
.blog-link { color: #FFD700; text-decoration: none; font-weight: 600; font-size: 12px; transition: 0.3s; }
.blog-link:hover { text-decoration: underline; transform: translateX(5px); }
.blog-grid { display: grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 15px; max-width: 1000px; margin: 0 auto; }
.blog-card { background: rgba(255,255,255,0.05); border: 2px solid rgba(255,215,0,0.15); border-radius: 12px; overflow: hidden; transition: 0.3s; cursor: pointer; }
.blog-card:hover { transform: translateY(-5px); border-color: #FFD700; box-shadow: 0 15px 40px rgba(255,215,0,0.2); }
.blog-img { height: 120px; background: linear-gradient(135deg,#667eea,#764ba2); display: flex; align-items: center; justify-content: center; font-size: 35px; transition: 0.3s; }
.blog-card:hover .blog-img { transform: scale(1.05); }
.blog-content { padding: 15px; }
.blog-tag { display: inline-block; padding: 3px 8px; background: rgba(255,215,0,0.15); border-radius: 8px; font-size: 9px; color: #FFD700; margin-bottom: 6px; }
.blog-card h3 { font-size: 13px; margin-bottom: 5px; }
.blog-card p { color: rgba(255,255,255,0.6); font-size: 11px; line-height: 1.4; }

/* ACHIEVEMENTS */
.achievements-section { padding: 50px 15px; background: linear-gradient(135deg,rgba(255,215,0,0.08),rgba(255,165,0,0.08)); text-align: center; }
.achieve-grid { display: flex; justify-content: center; gap: 15px; flex-wrap: wrap; margin-top: 25px; }
.achieve-badge { background: rgba(255,215,0,0.15); border: 2px solid #FFD700; border-radius: 12px; padding: 18px; min-width: 110px; transition: all 0.4s; cursor: pointer; }
.achieve-badge:hover { transform: scale(1.1) rotate(5deg); box-shadow: 0 10px 30px rgba(255,215,0,0.4); }
.achieve-badge i { font-size: 28px; color: #FFD700; margin-bottom: 6px; transition: 0.3s; }
.achieve-badge:hover i { transform: scale(1.2); }
.achieve-badge h4 { font-size: 11px; }

/* FAQ */
.faq-section { padding: 60px 15px; background: #0a0a1a; }
.faq-container { max-width: 700px; margin: 0 auto; }
.faq-item { background: rgba(255,255,255,0.05); border: 2px solid rgba(255,215,0,0.15); border-radius: 10px; margin-bottom: 10px; overflow: hidden; transition: 0.3s; }
.faq-item:hover { border-color: rgba(255,215,0,0.4); }
.faq-item.active { border-color: #FFD700; }
.faq-q { padding: 14px 16px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-weight: 600; font-size: 13px; transition: 0.3s; }
.faq-q:hover { background: rgba(255,215,0,0.05); }
.faq-q i { color: #FFD700; transition: transform 0.3s; }
.faq-item.active .faq-q i { transform: rotate(180deg); }
.faq-a { padding: 0 16px; max-height: 0; overflow: hidden; transition: all 0.3s; color: rgba(255,255,255,0.7); line-height: 1.5; font-size: 12px; }
.faq-item.active .faq-a { padding: 0 16px 14px; max-height: 300px; }

/* CTA */
.cta-section { padding: 50px 15px; background: linear-gradient(135deg,#667eea,#764ba2); text-align: center; position: relative; overflow: hidden; }
.cta-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at 20% 50%,rgba(255,215,0,0.2) 0%,transparent 50%); }
.cta-content { position: relative; z-index: 2; }
.cta-section h2 { font-family: 'Press Start 2P', cursive; font-size: 18px; margin-bottom: 10px; }
.cta-section p { font-size: 13px; margin-bottom: 20px; }

/* FOOTER */
footer { background: #050510; padding: 40px 15px 100px; border-top: 2px solid rgba(255,215,0,0.3); }
.footer-content { max-width: 1000px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit,minmax(150px,1fr)); gap: 20px; margin-bottom: 25px; }
.footer-section h3 { color: #FFD700; margin-bottom: 12px; font-family: 'Press Start 2P', cursive; font-size: 10px; }
.footer-section p { color: rgba(255,255,255,0.7); font-size: 11px; line-height: 1.5; }
.footer-section ul { list-style: none; }
.footer-section ul li { margin-bottom: 6px; }
.footer-section a { color: rgba(255,255,255,0.7); text-decoration: none; font-size: 11px; transition: 0.3s; }
.footer-section a:hover { color: #FFD700; padding-left: 5px; }
.social-links { display: flex; gap: 8px; margin-top: 10px; }
.social-links a { width: 32px; height: 32px; background: rgba(255,215,0,0.15); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #FFD700; font-size: 16px; border: 2px solid rgba(255,215,0,0.3); transition: 0.3s; }
.social-links a:hover { transform: translateY(-3px) scale(1.1); filter: brightness(1.2); }
.footer-bottom { text-align: center; padding-top: 15px; border-top: 1px solid rgba(255,255,255,0.1); color: rgba(255,255,255,0.5); font-size: 11px; }

/* SCROLL TO TOP BUTTON */
.scroll-top { position: fixed; bottom: 90px; right: 20px; width: 50px; height: 50px; background: linear-gradient(135deg,#FFD700,#FFA500); color: #000; border: none; border-radius: 50%; font-size: 20px; cursor: pointer; z-index: 9999; opacity: 0; visibility: hidden; transform: translateY(20px); transition: all 0.4s; box-shadow: 0 5px 20px rgba(255,215,0,0.5); pointer-events: auto; }
.scroll-top.show { opacity: 1; visibility: visible; transform: translateY(0); }
.scroll-top:hover { transform: translateY(-5px) scale(1.1); box-shadow: 0 10px 30px rgba(255,215,0,0.8); }
.scroll-top i { transition: 0.3s; }
.scroll-top:hover i { transform: translateY(-3px); }

/* BOTTOM MOBILE NAV */
.bottom-nav { display: none; position: fixed; bottom: 0; left: 0; width: 100%; background: rgba(10,10,26,0.98); backdrop-filter: blur(15px); border-top: 2px solid rgba(255,215,0,0.3); z-index: 999; padding: 8px 0; }
.bottom-nav-items { display: flex; justify-content: space-around; align-items: center; }
.bottom-nav-item { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 12px; color: rgba(255,255,255,0.6); text-decoration: none; font-size: 9px; font-weight: 600; transition: 0.3s; border-radius: 8px; cursor: pointer; }
.bottom-nav-item i { font-size: 18px; transition: 0.3s; }
.bottom-nav-item.active,.bottom-nav-item:hover { color: #FFD700; }
.bottom-nav-item.active i,.bottom-nav-item:hover i { transform: scale(1.2) translateY(-2px); }
.bottom-nav-item.active { background: rgba(255,215,0,0.1); }

/* MODAL */
.modal { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.9); z-index: 2000; align-items: center; justify-content: center; padding: 20px; }
.modal.active { display: flex; }
.modal-box { background: linear-gradient(135deg,#1a1a3e,#2d1b4e); padding: 30px; border-radius: 15px; border: 3px solid #FFD700; max-width: 400px; width: 100%; text-align: center; animation: modalIn 0.3s ease; }
@keyframes modalIn { from{opacity:0;transform:scale(0.8)} }
.modal-box h2 { font-family: 'Press Start 2P', cursive; color: #FFD700; font-size: 14px; margin-bottom: 12px; }
.modal-box p { color: rgba(255,255,255,0.8); font-size: 12px; margin-bottom: 20px; }
.modal-close { position: absolute; top: 15px; right: 20px; font-size: 28px; color: #fff; cursor: pointer; transition: 0.3s; }
.modal-close:hover { color: #FFD700; transform: rotate(90deg); }

/* NAV */
.nav { position: fixed; top: 3px; width: 100%; padding: 10px 20px; display: flex; justify-content: space-between; align-items: center; z-index: 1000; background: rgba(10,10,26,0.98); backdrop-filter: blur(15px); border-bottom: 2px solid rgba(255,215,0,0.3); transition: all 0.3s; }
.logo { display: flex; align-items: center; gap: 8px; font-family: 'Press Start 2P', cursive; font-size: 12px; color: #fff; text-decoration: none; }
.logo i { color: #FFD700; font-size: 20px; animation: logoPulse 2s infinite; }
@keyframes logoPulse { 0%,100%{transform:scale(1)} 50%{transform:scale(1.15)} }
.nav-links { display: flex; gap: 15px; align-items: center; }
.nav-links a { color: #ccc; text-decoration: none; font-size: 12px; font-weight: 600; transition: 0.3s; position: relative; }
.nav-links a::after { content: ''; position: absolute; bottom: -4px; left: 0; width: 0; height: 2px; background: #FFD700; transition: width 0.3s; }
.nav-links a:hover::after { width: 100%; }
.nav-links a:hover { color: #FFD700; }
.user-stats { display: flex; gap: 10px; align-items: center; background: rgba(255,215,0,0.1); padding: 5px 12px; border-radius: 20px; border: 2px solid rgba(255,215,0,0.3); }
.user-stats span { font-size: 11px; font-weight: 700; }
.gem-c { color: #00CED1; }
.xp-c { color: #FF69B4; }
.nav-btns { display: flex; gap: 8px; }
.btn { padding: 8px 18px; border: none; border-radius: 8px; font-weight: 700; cursor: pointer; transition: all 0.3s; font-size: 12px; text-decoration: none; display: inline-block; position: relative; overflow: hidden; }
.btn-gold { background: linear-gradient(135deg,#FFD700,#FFA500); color: #000; }
.btn-gold:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(255,215,0,0.5); }
.btn-purple { background: linear-gradient(135deg,#667eea,#764ba2); color: #fff; }
.btn-purple:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(102,126,234,0.5); }
.btn::after { content: ''; position: absolute; top: 50%; left: 50%; width: 0; height: 0; background: rgba(255,255,255,0.3); border-radius: 50%; transform: translate(-50%,-50%); transition: width 0.6s, height 0.6s; }
.btn:active::after { width: 300px; height: 300px; }

/* Scroll animations */
.reveal { opacity: 0; transform: translateY(20px); transition: all 0.6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }

/* Responsive */
@media(max-width:768px) {
    .side-menu,.level-up,.character-scene,.castle,.island-left,.island-right,.waterfall,.butterfly,.float-gem { display: none; }
    .nav-links,.user-stats { display: none; }
    .main-title { font-size: 28px; }
    .hero { padding: 80px 15px 30px; }
    .editor-sidebar { display: none; }
    .code-area { font-size: 10px; }
    .features-grid,.games-grid,.explore-grid,.services-grid,.testimonials-grid,.metrics-grid { grid-template-columns: 1fr; }
    .blog-header { flex-direction: column; gap: 10px; text-align: center; }
    .bottom-nav { display: block; }
    footer { padding-bottom: 100px; }
    .scroll-top { bottom: 80px; right: 15px; width: 45px; height: 45px; font-size: 18px; z-index: 9999; }
    .roadmap-grid { grid-template-columns: 1fr; }
    .roadmap-tab { padding: 10px 16px; font-size: 12px; }
}
@media(max-width:480px) {
    .main-title { font-size: 24px; }
    .section-title { font-size: 16px; }
    .btn-big { padding: 12px 22px; font-size: 10px; }
    .hero-btns { flex-direction: column; align-items: center; }
    .btn-big { width: 100%; max-width: 250px; }
    .stat-num { font-size: 20px; }
    .metric-value { font-size: 20px; }
}


/* --- Style Block 3 --- */

.game-sidebar{width:220px;background:var(--surface);border-right:1px solid var(--line);padding:16px 0;display:flex;flex-direction:column;flex-shrink:0;position:relative}
///50%{@media(max-width:768px){.overlay .game-main{padding-bottom:16px}}
//////////////////////////@media(max-width:600px){.quiz-container .quiz-options{grid-template-columns:1fr}}
//}
@media(min-width:769px) and (max-width:1024px){
  .navbar{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin;gap:8px}
  }
@media(max-width:768px){
  .navbar{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  }
@media(max-width:550px){
  .services-grid{grid-template-columns:1fr}
  }
@media(max-width:480px){
  .webpage{padding:24px 12px 80px}
  
  }
@media(prefers-reduced-motion:reduce){
*,*::before,*::after{animation-duration:0.01ms!important;animation-iteration-count:1!important;transition-duration:0.01ms!important;scroll-behavior:auto!important}
}
@media(max-width:400px){.exp-row{grid-template-columns:1fr}}
@media(max-width:360px){.typewriter{white-space:normal;font-size:15px;padding:10px 16px;overflow-wrap:break-word;word-break:break-word}}
@media(max-width:480px){.dash-cards{grid-template-columns:1fr 1fr;gap:6px}}
@media(max-width:400px){.game-sidebar button{font-size:11px;padding:6px 8px;min-height:34px}}
@media(min-width:601px) and (max-width:768px){.orb-1{width:400px!important;height:400px!important;filter:blur(100px)!important}}
@media(max-width:500px){.games-grid{grid-template-columns:1fr}}
@media(max-width:540px){.feature-grid{grid-template-columns:1fr}}
@media(max-width:500px){.modes-grid{grid-template-columns:1fr}}
@media(min-width:1025px){#qsMobileControls{opacity:0.4;transition:opacity .3s}}
.robot-section{text-align:center;padding:60px 20px}.robot-container{display:flex;justify-content:center;align-items:center}.robot-character{position:relative;display:inline-block;animation:robotFloat 3s ease-in-out infinite}.robot-head{width:80px;height:70px;background:linear-gradient(135deg,#7c7cff,#5a3fd4);border-radius:16px 16px 8px 8px;position:relative;margin:0 auto;border:2px solid rgba(255,255,255,0.15);box-shadow:0 0 30px rgba(124,124,255,0.3)}.robot-eye{width:16px;height:16px;background:#00ffd4;border-radius:50%;position:absolute;top:20px;box-shadow:0 0 12px #00ffd4;animation:robotBlink 3s ease-in-out infinite}.robot-eye.left{left:16px}.robot-eye.right{right:16px}.robot-antenna{width:4px;height:20px;background:#7c7cff;position:absolute;top:-16px;left:50%;transform:translateX(-50%);border-radius:2px}.robot-antenna::after{content:'';width:10px;height:10px;background:#ff6b6b;border-radius:50%;position:absolute;top:-6px;left:50%;transform:translateX(-50%);box-shadow:0 0 16px #ff6b6b;animation:antennaGlow 1.5s ease-in-out infinite}.robot-body{width:70px;height:60px;background:linear-gradient(135deg,#2dd4a8,#1a8a7a);border-radius:8px;margin:-4px auto 0;position:relative;display:flex;align-items:center;justify-content:center;border:2px solid rgba(255,255,255,0.1)}.robot-chest{font-size:20px}.robot-arm{width:14px;height:40px;background:linear-gradient(135deg,#7c7cff,#5a3fd4);border-radius:7px;position:absolute;top:10px;border:1px solid rgba(255,255,255,0.1)}.robot-arm.left{left:-18px;transform:rotate(15deg);transform-origin:top;animation:robotArmSwing 2s ease-in-out infinite}.robot-arm.right{right:-18px;transform:rotate(-15deg);transform-origin:top;animation:robotArmSwing 2s ease-in-out infinite 1s}.robot-legs{display:flex;gap:8px;justify-content:center;margin-top:-2px}.robot-leg{width:16px;height:22px;background:linear-gradient(135deg,#2dd4a8,#1a8a7a);border-radius:4px 4px 8px 8px;border:1px solid rgba(255,255,255,0.1)}.robot-speech{margin-top:20px;font-size:15px;color:var(--text-dim);line-height:1.6;background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:14px 24px;display:inline-block;max-width:320px}
@keyframes robotFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes robotBlink{0%,90%,100%{transform:scaleY(1)}95%{transform:scaleY(0.1)}}
@keyframes robotArmSwing{0%,100%{transform:rotate(15deg)}50%{transform:rotate(-15deg)}}
@keyframes antennaGlow{0%,100%{box-shadow:0 0 16px #ff6b6b}50%{box-shadow:0 0 30px #ff6b6b,0 0 60px #ff6b6b}}
.robot-section{background:linear-gradient(135deg,#0f0f2e,#1a1040);padding:60px 15px;text-align:center;position:relative;overflow:hidden}
.robot-section::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at 50% 0,rgba(124,124,255,0.08),transparent 60%);pointer-events:none}
.robot-section::after{content:'';position:absolute;inset:0;background:radial-gradient(circle at 30% 100%,rgba(45,212,168,0.05),transparent 50%);pointer-events:none}
.robot-speech{border:1px solid rgba(255,215,0,0.2);background:linear-gradient(135deg,rgba(124,124,255,0.12),rgba(45,212,168,0.08));backdrop-filter:blur(4px);position:relative;overflow:hidden;transition:opacity .2s,transform .2s;cursor:pointer}
.robot-speech::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:conic-gradient(from 0deg,transparent,rgba(124,124,255,0.05),transparent,rgba(45,212,168,0.05),transparent);animation:robotShine 6s linear infinite;pointer-events:none}
@keyframes robotShine{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
.robot-glow{position:absolute;inset:-4px;border-radius:50%;background:radial-gradient(circle,rgba(124,124,255,0.15),transparent 70%);filter:blur(8px);animation:robotPulse 2s ease-in-out infinite;pointer-events:none}
@keyframes robotPulse{0%,100%{opacity:0.5;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}
.robot-tips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
.robot-tip-btn{padding:8px 16px;border-radius:99px;border:1px solid rgba(255,215,0,0.2);background:rgba(255,255,255,0.03);color:var(--text-dim);font-size:12px;cursor:pointer;transition:all .3s;font-family:'Poppins',sans-serif}
.robot-tip-btn:hover{background:rgba(124,124,255,0.15);border-color:rgba(124,124,255,0.4);color:#fff;transform:translateY(-2px)}
.robot-typing::after{content:'|';animation:robotBlink 1s step-end infinite;color:var(--primary-light);margin-left:2px}
.robot-head{animation:robotFloat 3s ease-in-out infinite;transition:transform .1s}
.robot-head:hover{animation-play-state:paused;transform:translateY(-2px) scale(1.02)}
.robot-character{cursor:pointer}
.robot-character:active .robot-head{transform:scale(0.95)}