body {
    font-family: 'Arial', sans-serif;
    background-color: #f2f6fc;
    margin: 0;
    padding: 0;
    text-align: center;
}

/* --- Layout & Hero --- */
.hero {
    padding: 40px 20px 10px;
    background: linear-gradient(135deg,#6dd5ed 0%,#2193b0 100%);
    color: #fff;
    position: relative;
    overflow: hidden;
}

.neon {
    font-size: 3rem;
    letter-spacing: 2px;
    text-shadow: 0 0 6px rgba(255,255,255,0.8), 0 0 20px rgba(255,255,255,0.2), 0 0 30px rgba(255,255,255,0.1);
    margin: 0;
    animation: neonPulse 2.5s infinite;
}

.subtitle {
    margin: 8px 0 24px;
    font-size: 1.1rem;
}

.typed {
    color: #ffe082;
    font-weight: 700;
}

/* Floating bubbles decorative */
.bubbles {position: absolute; inset: 0; pointer-events: none;}
.bubbles span {position: absolute; display:block; border-radius:50%; background: rgba(255,255,255,0.08);}
.bubbles span:nth-child(1){width:120px;height:120px;left:5%;top:10%;animation:bubble 8s ease-in-out infinite}
.bubbles span:nth-child(2){width:80px;height:80px;left:25%;top:5%;animation:bubble 6s infinite;}
.bubbles span:nth-child(3){width:60px;height:60px;left:45%;top:15%;animation:bubble 9s infinite}
.bubbles span:nth-child(4){width:140px;height:140px;left:70%;top:2%;animation:bubble 10s infinite}
.bubbles span:nth-child(5){width:90px;height:90px;left:85%;top:12%;animation:bubble 7s infinite}
.bubbles span:nth-child(6){width:50px;height:50px;left:15%;top:50%;animation:bubble 8.5s infinite}
.bubbles span:nth-child(7){width:70px;height:70px;left:55%;top:55%;animation:bubble 11s infinite}
.bubbles span:nth-child(8){width:40px;height:40px;left:80%;top:45%;animation:bubble 12s infinite}

@keyframes bubble{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-30px) scale(1.05)}}

/* --- Container & Cards --- */
.container{max-width:1100px;margin: -60px auto 80px;padding:0 20px;}
.card{background:linear-gradient(180deg,rgba(255,255,255,0.95),#fff);border-radius:18px;padding:18px;box-shadow:0 14px 30px rgba(31,38,135,0.08);transition:transform .28s ease,box-shadow .28s ease}
.card:hover{transform:translateY(-8px);box-shadow:0 24px 48px rgba(31,38,135,0.12)}

.profile-card{width:320px;margin:0 auto 24px;padding:22px;text-align:center;border:4px solid rgba(255,255,255,0.3);}
.profile-card .photo{width:140px;height:140px;margin:0 auto;border-radius:50%;overflow:hidden;transform-style:preserve-3d;}
.profile-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s cubic-bezier(.2,.9,.2,1),filter .45s}
.profile-card .photo{box-shadow:0 18px 50px rgba(4,20,48,0.18);border:6px solid rgba(255,255,255,0.85);background:linear-gradient(180deg,rgba(0,0,0,0.06),transparent)}
.profile-card img:hover{transform:scale(1.06) translateZ(20px);filter:brightness(1.05) saturate(1.08)}
/* Improve avatar visibility: slight vignette and brightness boost */
.profile-card img{filter:contrast(1.05) brightness(1.02)}
.profile-card .photo::after{content:'';position:absolute;left:0;top:0;right:0;bottom:0;border-radius:50%;background:radial-gradient(ellipse at 30% 30%, rgba(255,255,255,0.08), rgba(0,0,0,0));pointer-events:none}

.profile-card h2{margin:12px 0 6px;font-size:1.6rem;color:#0b3a6b}
.tagline{color:#083047;font-weight:600;margin:6px 0}

.stats{display:flex;gap:12px;justify-content:center;margin:12px 0}
.stats div{min-width:60px}
.stats strong{display:block;font-size:1.1rem;color:#0b3a6b}
.stats span{font-size:.85rem;color:#666}

.cta{background:linear-gradient(90deg,#ff8a00,#e52e71);border:none;color:#fff;padding:10px 14px;border-radius:12px;font-weight:700;cursor:pointer}
.portfolio-panel{max-width:820px;margin:18px auto;padding:14px;text-align:left}
.portfolio-panel .bio{margin:8px 0;color:#164a68}
.portfolio-stats{display:flex;gap:18px;align-items:center;margin:10px 0}
.portfolio-stats div{min-width:80px}
.portfolio-stats strong{display:block;font-size:1.05rem;color:#0b3a6b}
.thumbs{display:flex;gap:8px;margin-top:12px}
.thumbs img{width:76px;height:76px;object-fit:cover;border-radius:8px;cursor:pointer;transition:transform .22s,box-shadow .22s}
.thumbs img:hover{transform:scale(1.06);box-shadow:0 10px 26px rgba(10,36,86,0.12)}

/* XP bar */
.xp-container{margin-top:14px;background:linear-gradient(90deg,rgba(255,255,255,0.9),#fbfdff);padding:10px;border-radius:10px;border:1px solid rgba(10,36,86,0.04)}
.xp-header{display:flex;justify-content:space-between;align-items:center;font-weight:800;color:#0b3a6b;margin-bottom:8px}
.xp-bar-wrap{background:#e9f3ff;height:12px;border-radius:12px;overflow:hidden}
.xp-bar{height:100%;background:linear-gradient(90deg,#7bffca,#6bd3ff);width:0%}

/* Worlds card row */
.worlds{display:flex;gap:12px;margin-top:18px;overflow:auto;padding-bottom:6px}
.world-card{min-width:220px;background:linear-gradient(135deg,#ffffff,#f1f8ff);border-radius:14px;padding:12px;box-shadow:0 10px 30px rgba(8,24,64,0.06);cursor:pointer;transition:transform .28s,box-shadow .28s}
.world-card:hover{transform:translateY(-8px) rotateX(2deg);box-shadow:0 26px 60px rgba(8,24,64,0.12);border:1px solid rgba(123,122,255,0.08)}
.world-card h4{margin:6px 0 4px;color:#0b3a6b}
.world-card p{font-size:0.92rem;color:#264f6b}

/* Game modal helper styles */
.game-controls-row{display:flex;gap:10px;align-items:center;margin-bottom:8px}
.label-bold{font-weight:700}
.small-input{width:80px;padding:6px;border-radius:8px;border:1px solid #ddd}
.game-question{font-size:1.4rem;margin:12px 0;color:#083047}
.game-action-row{margin-top:8px;display:flex;gap:8px}
.game-score{margin-top:10px;font-weight:800;color:#0b3a6b}

/* Daily quest popup */
.quest-popup{position:fixed;left:16px;bottom:20px;background:linear-gradient(90deg,#fffbeb,#e8f7ff);padding:12px;border-radius:12px;box-shadow:0 16px 40px rgba(2,6,23,0.14);z-index:1200;max-width:320px}
.quest-popup h4{margin:0 0 6px}
.quest-popup .quest-cta{margin-top:8px;display:flex;gap:8px}

/* Badge unlock */
.badge{width:64px;height:64px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#fff6f0,#fff);box-shadow:0 10px 30px rgba(0,0,0,0.08)}
.badge.spin{animation:spinBadge .9s ease}
@keyframes spinBadge{0%{transform:rotate(0deg) scale(.8);opacity:0}60%{transform:rotate(360deg) scale(1.05);opacity:1}100%{transform:rotate(390deg) scale(1);opacity:1}}
#ai-canvas{z-index:0}
.symbol-canvas{position:fixed;right:12px;bottom:12px;width:260px;height:300px;border-radius:12px;box-shadow:0 10px 30px rgba(2,6,23,0.25);overflow:hidden;pointer-events:none}
.atom-canvas{position:fixed;left:12px;bottom:12px;width:220px;height:220px;border-radius:50%;box-shadow:0 10px 30px rgba(2,6,23,0.25);overflow:hidden;pointer-events:none}

/* Knowledge network background */
.knowledge-canvas{position:fixed;left:0;top:0;width:100%;height:100%;z-index:-1;pointer-events:none}

/* Confetti pieces */
.confetti{position:fixed;left:0;top:0;right:0;bottom:0;pointer-events:none;z-index:999}
.confetti-piece{position:absolute;display:block;width:10px;height:14px;border-radius:2px}

/* Toast used for motivational messages */
.toast{font-weight:700}

/* Study modal and timer */
.study-modal{position:fixed;inset:0;background:rgba(2,6,23,0.6);display:flex;align-items:center;justify-content:center;z-index:1100;opacity:0;pointer-events:none;transition:opacity .2s}
.study-modal[aria-hidden="false"]{opacity:1;pointer-events:auto}
.study-modal-content{background:#fff;padding:18px;border-radius:12px;max-width:420px;width:92%;position:relative;text-align:left}
.study-close{position:absolute;right:10px;top:10px;border:none;background:none;font-size:18px;cursor:pointer}
.study-modal label{display:block;margin-top:12px;font-weight:700}
.study-modal input[type="text"], .study-modal input[type="number"]{width:100%;padding:8px;border-radius:8px;border:1px solid #ddd;margin-top:6px}
.study-actions{display:flex;gap:10px;margin-top:12px}
.study-timer{margin-top:14px;display:none}
.study-timer[aria-hidden="false"]{display:block}
.timer-display{font-size:2rem;font-weight:800;text-align:center;margin-bottom:8px;color:#0b3a6b}
.timer-progress{background:#eee;height:10px;border-radius:10px;overflow:hidden}
.timer-bar{height:100%;background:linear-gradient(90deg,#66bb6a,#ffeb3b);width:0%}
.timer-controls{display:flex;gap:8px;justify-content:center;margin-top:10px}

/* Mini-game and drawing in modal */
.mini-game{margin-top:12px;padding:10px;border:1px solid #ddd;border-radius:8px;background:#f9f9f9}
.math-question{font-size:1.2rem;margin:8px 0}
.math-feedback{margin-top:8px;color:#d32f2f}
.drawing-section{margin-top:12px;text-align:center}
.drawing-canvas{border:1px solid #ccc;border-radius:8px;background:#fff;width:100%;max-width:300px;height:auto;aspect-ratio:2/1}
.drawing-section p{margin:6px 0}

/* Responsive for study modal */
@media (max-width: 600px) {
    .study-modal-content { padding: 12px; max-width: 95%; width: 95%; }
    .study-close { font-size: 16px; right: 8px; top: 8px; }
    .study-modal label { margin-top: 8px; font-size: 0.9rem; }
    .study-modal input[type="text"], .study-modal input[type="number"] { padding: 6px; font-size: 0.9rem; }
    .study-actions { flex-direction: column; gap: 8px; }
    .study-actions .cta { width: 100%; }
    .timer-display { font-size: 1.5rem; }
    .mini-game { padding: 8px; }
    .math-question { font-size: 1rem; }
    .drawing-canvas { max-width: 100%; }
    .drawing-section p { font-size: 0.9rem; }
}

/* Larger screens (desktop) */
@media (min-width: 1200px) {
    .study-modal-content { max-width: 600px; padding: 24px; }
    .drawing-canvas { max-width: 400px; }
    .math-question { font-size: 1.4rem; }
    .study-modal input[type="text"], .study-modal input[type="number"] { padding: 10px; }
}

/* Modal particles */
.modal-particle{position:absolute;font-size:20px;pointer-events:none;animation:float 3s infinite ease-in-out}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

/* Explosion effect */
.explosion{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;z-index:10}
.spark{position:absolute;width:4px;height:4px;background:#ff5722;border-radius:50%;animation:explode 1s ease-out forwards}
@keyframes explode{0%{opacity:1;transform:rotate(0deg) translateY(-50px)}100%{opacity:0;transform:rotate(360deg) translateY(-100px)}}

/* Portfolio actions */
.portfolio-actions{margin-top:12px;display:flex;gap:10px}
.portfolio-actions .cta.secondary{background:transparent;color:#0b3a6b;border:1px solid #d6dbe6}

/* Roles panel */
.roles-panel{max-width:1100px;margin:22px auto;padding:18px}
.roles-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.role{padding:12px;border-radius:12px;background:linear-gradient(180deg,#fff,#fbfbfd);box-shadow:0 10px 26px rgba(6,20,40,0.06);text-align:center}
.role-visual{height:120px;margin-bottom:10px;border-radius:8px;background:linear-gradient(135deg,#eef6ff,#f7fff0);position:relative}
.role-visual canvas{position:absolute;inset:0;width:100%;height:100%}

/* Lightbox */
.lightbox{position:fixed;left:0;top:0;right:0;bottom:0;background:rgba(3,6,20,0.7);display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;pointer-events:none;transition:opacity .28s}
.lightbox[aria-hidden="false"]{opacity:1;pointer-events:auto}
.lightbox-content{background:#fff;border-radius:12px;padding:12px;max-width:720px;max-height:86vh;overflow:auto;position:relative;text-align:center}
.lightbox-content img{max-width:100%;height:auto;border-radius:8px}
.lightbox-content img{filter:brightness(1.03) contrast(1.04)}
.lightbox-close{position:absolute;right:8px;top:8px;border:none;background:transparent;font-size:18px;cursor:pointer}

/* Small responsive tweaks */
@media (max-width:720px){
    .container{margin-top:-30px}
    .profile-card{padding:16px}
    .symbol-canvas{display:none}
}

/* Grid */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px}
.about-child{ /* reuse card look for compatibility */ padding:18px}

/* Responsive */
@media (max-width:600px){.neon{font-size:2rem}.profile-card{width:92%}}

@keyframes neonPulse{0%{text-shadow:0 0 6px rgba(255,255,255,0.8)}50%{text-shadow:0 0 18px rgba(255,235,59,0.85)}100%{text-shadow:0 0 6px rgba(255,255,255,0.8)}}