:root{
  --g:#2d9e5f;--gd:#1a6e3f;--gl:#e8f7ef;
  --y:#f5c842;--yl:#fef9e6;
  --p:#7c5cbf;--pl:#f0ebfa;
  --b:#4a90d9;--bl:#eaf3fd;
  --r:#f06060;--rl:#fdf0f0;
  --o:#f5a623;--ol:#fff3e0;
  --bg:#f8faf7;--card:#fff;
  --t1:#1a1a18;--t2:#5a5a56;--t3:#9a9a96;
  --border:#e4e8e0;--radius:16px;--shadow:0 2px 16px rgba(0,0,0,.07);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:'Segoe UI',system-ui,-apple-system,sans-serif;background:var(--bg);color:var(--t1);min-height:100vh}
input,select,button,textarea{font-family:inherit}
button{cursor:pointer}

/* CONFETTI */
#confetti-canvas{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9999}

/* WELCOME OVERLAY */
#welcome-screen{position:fixed;inset:0;background:linear-gradient(135deg,#e8f7ef,#eaf3fd,#f0ebfa);z-index:500;display:flex;align-items:center;justify-content:center;padding:1.5rem}
.welcome-card{background:#fff;border-radius:24px;padding:2.5rem 2rem;max-width:440px;width:100%;box-shadow:0 8px 40px rgba(0,0,0,.13);text-align:center}
.welcome-mascot{font-size:4rem;margin-bottom:.5rem;animation:bounce2 1s ease-in-out infinite alternate}
@keyframes bounce2{from{transform:scale(1)}to{transform:scale(1.08)}}
.welcome-card h1{font-size:1.6rem;font-weight:900;color:var(--gd);margin-bottom:.3rem}
.welcome-card p{color:var(--t2);font-size:.92rem;margin-bottom:1.5rem}
.welcome-form{display:flex;flex-direction:column;gap:.85rem;text-align:left}
.welcome-form label{font-size:.82rem;font-weight:700;color:var(--t2);margin-bottom:.25rem;display:block}
.welcome-form input,.welcome-form select{width:100%;padding:.7rem 1rem;border:2px solid var(--border);border-radius:12px;font-size:1rem;color:var(--t1);outline:none;transition:.15s;background:#fff}
.welcome-form input:focus,.welcome-form select:focus{border-color:var(--g)}
.welcome-form input.big-input{font-size:1.1rem;font-weight:700}
.btn-start{background:linear-gradient(135deg,var(--g),#38c97a);color:#fff;border:none;padding:.85rem;border-radius:14px;font-size:1.05rem;font-weight:800;width:100%;margin-top:.5rem;transition:.15s;box-shadow:0 4px 16px rgba(45,158,95,.3)}
.btn-start:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(45,158,95,.4)}
.welcome-chars{display:flex;justify-content:center;gap:.75rem;margin-bottom:1.25rem}
.wchar{font-size:2rem;animation:float 2.5s ease-in-out infinite}
.wchar:nth-child(2){animation-delay:.4s}
.wchar:nth-child(3){animation-delay:.8s}
.wchar:nth-child(4){animation-delay:1.2s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}

/* PRAISE POPUP */
#praise-popup{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(0);background:#fff;border-radius:24px;padding:2.5rem 2rem;box-shadow:0 12px 50px rgba(0,0,0,.2);z-index:400;text-align:center;max-width:340px;width:90%;transition:transform .3s cubic-bezier(.34,1.56,.64,1)}
#praise-popup.show{transform:translate(-50%,-50%) scale(1)}
.praise-emoji{font-size:4rem;margin-bottom:.5rem;display:block}
.praise-name{font-size:1.4rem;font-weight:900;color:var(--g);margin-bottom:.25rem}
.praise-msg{font-size:1rem;color:var(--t2);margin-bottom:.5rem}
.praise-stars{font-size:1.5rem;color:var(--y);letter-spacing:.1rem}
.praise-close{margin-top:1rem;background:var(--g);color:#fff;border:none;padding:.6rem 1.75rem;border-radius:12px;font-size:.95rem;font-weight:700}

/* NAV */
#navbar{background:#fff;border-bottom:1px solid var(--border);position:sticky;top:0;z-index:200;box-shadow:0 1px 8px rgba(0,0,0,.05)}
.nav-inner{max-width:1100px;margin:0 auto;padding:0 1.25rem;height:58px;display:flex;align-items:center;gap:.75rem}
.logo{font-size:1.15rem;font-weight:700;color:var(--g);cursor:pointer;display:flex;align-items:center;gap:.3rem}
.logo b{color:var(--t1)}
.nav-player{margin-left:auto;display:flex;align-items:center;gap:.6rem;font-size:.88rem;font-weight:700;color:var(--gd);background:var(--gl);padding:.35rem .9rem;border-radius:20px}
.nav-links{display:flex;align-items:center;gap:.35rem}
.nav-links button{padding:.4rem .9rem;border-radius:8px;border:1px solid var(--border);background:#fff;font-size:.85rem;cursor:pointer;color:var(--t2);transition:.15s}
.nav-links button:hover{background:var(--bg)}
.hamburger{display:none;background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--t1)}

/* VIEWS */
.view{display:none}.view.active{display:block}

/* HERO */
.hero{text-align:center;padding:4rem 1.5rem 2rem;max-width:780px;margin:0 auto}
.hero-badge{display:inline-flex;align-items:center;gap:.4rem;background:var(--gl);color:var(--gd);font-size:.8rem;font-weight:700;padding:.3rem .9rem;border-radius:20px;margin-bottom:1.25rem}
.hero h1{font-size:clamp(1.8rem,5vw,2.8rem);font-weight:900;line-height:1.2;margin-bottom:.9rem}
.hero h1 em{font-style:normal;color:var(--g)}
.hero-sub{font-size:1rem;color:var(--t2);line-height:1.7;max-width:560px;margin:0 auto 1.75rem}
.hero-btns{display:flex;gap:.75rem;justify-content:center;flex-wrap:wrap}
.btn{padding:.7rem 1.5rem;border-radius:12px;border:none;font-size:.95rem;font-weight:700;cursor:pointer;transition:.15s}
.btn-green{background:var(--g);color:#fff}.btn-green:hover{background:var(--gd);transform:translateY(-1px)}
.btn-outline{background:#fff;color:var(--t1);border:1.5px solid var(--border)}.btn-outline:hover{border-color:var(--g);color:var(--g)}

/* CHARS */
.chars{display:flex;justify-content:center;gap:1.25rem;margin:2.5rem 0 .5rem;flex-wrap:wrap}
.char{text-align:center}
.char-av{width:68px;height:68px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.9rem;margin:0 auto .4rem;border:3px solid #fff;box-shadow:var(--shadow);animation:float 3s ease-in-out infinite}
.char span{font-size:.75rem;color:var(--t2);font-weight:500;line-height:1.4}

/* STATS */
.stats-bar{display:flex;justify-content:center;gap:2rem;padding:1.75rem 1.5rem;background:#fff;border-top:1px solid var(--border);border-bottom:1px solid var(--border);flex-wrap:wrap}
.stat{text-align:center}.sn{font-size:1.7rem;font-weight:900;color:var(--g)}.sl{font-size:.8rem;color:var(--t3);margin-top:.15rem}

/* FREE BANNER */
.free-banner{background:linear-gradient(135deg,#e8f7ef,#fff8e1);border:2px solid var(--y);border-radius:var(--radius);padding:1.1rem 1.5rem;text-align:center;margin:0 auto 2rem;max-width:700px;margin-left:auto;margin-right:auto}
.free-banner h3{font-size:1.05rem;font-weight:800;color:var(--gd);margin-bottom:.25rem}
.free-banner p{font-size:.86rem;color:var(--t2)}

/* SECTIONS */
.section{max-width:1100px;margin:0 auto;padding:2.5rem 1.5rem}
.sec-title{font-size:1.4rem;font-weight:800;text-align:center;margin-bottom:.4rem}
.sec-sub{text-align:center;color:var(--t2);margin-bottom:1.75rem;font-size:.9rem}

/* SUBJECTS */
.subjects-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.9rem}
.subj-card{background:#fff;border:1.5px solid var(--border);border-radius:var(--radius);padding:1.1rem .9rem;text-align:center;cursor:pointer;transition:.15s}
.subj-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--g)}
.subj-icon{font-size:1.9rem;margin-bottom:.35rem}.subj-name{font-size:.84rem;font-weight:700}.subj-cnt{font-size:.72rem;color:var(--t3);margin-top:.15rem}
.subj-card.special{border-color:var(--p);background:var(--pl)}

/* FEATURES */
.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:1.1rem}
.feat{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.35rem}
.feat-icon{font-size:1.7rem;margin-bottom:.6rem}.feat h3{font-size:.95rem;font-weight:700;margin-bottom:.35rem}.feat p{font-size:.85rem;color:var(--t2);line-height:1.6}

/* FOOTER */
footer{background:#fff;border-top:1px solid var(--border);padding:1.75rem 1.5rem;text-align:center}
footer p{font-size:.82rem;color:var(--t3)}
footer a{color:var(--g);text-decoration:none;margin:0 .5rem}

/* APP LAYOUT */
.app-layout{display:grid;grid-template-columns:210px 1fr;min-height:calc(100vh - 58px)}

/* SIDEBAR */
.sidebar{background:#fff;border-right:1px solid var(--border);padding:1.1rem;display:flex;flex-direction:column;gap:.6rem;overflow-y:auto}
.child-profile{display:flex;align-items:center;gap:.65rem;padding:.75rem;background:var(--gl);border-radius:12px}
.child-av{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0}
.child-name{font-weight:700;font-size:.88rem}
.child-lvl{font-size:.74rem}
.child-streak{font-size:.72rem;color:var(--o);font-weight:700;margin-top:.1rem}
.side-nav{display:flex;flex-direction:column;gap:.12rem}
.side-nav a{display:flex;align-items:center;gap:.55rem;padding:.55rem .7rem;border-radius:10px;color:var(--t2);font-size:.85rem;cursor:pointer;transition:.12s;user-select:none}
.side-nav a:hover,.side-nav a.active{background:var(--gl);color:var(--gd);font-weight:700}
.side-nav a.sp-link:hover,.side-nav a.sp-link.active{background:var(--pl);color:var(--p)}
.side-nav a .ico{font-size:1rem;width:1.15rem;text-align:center}
.stars-box{background:var(--yl);border-radius:12px;padding:.65rem;text-align:center}
.stars-num{font-size:1.35rem;font-weight:900;color:#b8860b}
.side-logout{background:none;border:1px solid var(--border);padding:.45rem;border-radius:8px;font-size:.8rem;color:var(--t3);transition:.15s;margin-top:auto}
.side-logout:hover{color:var(--r);border-color:var(--r)}

/* MAIN */
.app-main{padding:1.4rem 1.6rem;overflow-y:auto;max-height:calc(100vh - 58px)}
.tab{display:none}.tab.active{display:block}
.tab-header{margin-bottom:1.35rem}
.tab-header h2{font-size:1.25rem;font-weight:800;margin-bottom:.2rem}
.tab-header p{color:var(--t2);font-size:.87rem}

/* TIMER WIDGET */
.timer-widget{display:flex;align-items:center;gap:.5rem;padding:.4rem .75rem;background:var(--bl);border-radius:10px;font-size:.85rem;font-weight:700;color:var(--b);margin-top:.5rem;display:inline-flex}
.timer-widget.warning{background:var(--rl);color:var(--r);animation:pulse .5s ease-in-out infinite alternate}
@keyframes pulse{from{opacity:1}to{opacity:.6}}
.day-bar-wrap{display:flex;align-items:center;gap:.6rem;margin-top:.5rem}
.day-progress{flex:1;max-width:180px;background:var(--border);border-radius:8px;height:7px;overflow:hidden}
.day-bar{height:100%;background:var(--g);border-radius:8px;transition:width .4s}

/* QUICK STATS */
.quick-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:.65rem;margin-bottom:1.25rem}
.qs-card{background:#fff;border:1px solid var(--border);border-radius:12px;padding:.85rem;text-align:center}
.qs-num{font-size:1.4rem;font-weight:900}
.qs-label{font-size:.72rem;color:var(--t3);margin-top:.15rem}

/* GAME PANEL */
.game-panel-wrap{background:#fff;border:2px solid var(--g);border-radius:var(--radius);padding:1.35rem;margin-bottom:1.35rem;position:relative}
.game-panel-wrap.special-panel{border-color:var(--p)}
.gp-header{display:flex;align-items:center;gap:.6rem;margin-bottom:1rem}
.gp-title{font-weight:800;font-size:1.05rem;flex:1}
.gp-timer{font-size:.82rem;font-weight:700;color:var(--b);background:var(--bl);padding:.2rem .6rem;border-radius:8px}
.gp-timer.warn{color:var(--r);background:var(--rl)}
.gp-close{background:none;border:none;font-size:1.3rem;color:var(--t3);line-height:1;padding:.1rem}

/* SECTION LABELS */
.section-label{font-weight:700;font-size:.9rem;color:var(--t2);margin-bottom:.65rem;margin-top:.9rem;display:flex;align-items:center;gap:.4rem}
.section-label .lbadge{font-size:.7rem;background:var(--pl);color:var(--p);padding:.1rem .5rem;border-radius:6px;font-weight:700}

/* GAMES GRID */
.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:.85rem;margin-bottom:1.25rem}
.game-card{background:#fff;border:1.5px solid var(--border);border-radius:var(--radius);overflow:hidden;cursor:pointer;transition:.15s}
.game-card:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:var(--g)}
.game-card.sp{border-color:var(--p)}.game-card.sp:hover{box-shadow:0 4px 16px rgba(124,92,191,.2)}
.game-thumb{height:82px;display:flex;align-items:center;justify-content:center;font-size:2.3rem}
.game-info{padding:.65rem .8rem}
.game-name{font-weight:700;font-size:.84rem;margin-bottom:.15rem}
.game-meta{font-size:.72rem;color:var(--t3);display:flex;gap:.4rem;align-items:center;flex-wrap:wrap}
.gstars{color:var(--y)}
.gbadge{font-size:.65rem;padding:.1rem .4rem;border-radius:5px;font-weight:700}
.gbn{background:var(--gl);color:var(--gd)}.gbp{background:var(--pl);color:var(--p)}.gbo{background:var(--ol);color:#c17800}

/* MATH */
.math-q{text-align:center;padding:.75rem 0}
.math-eq{font-size:clamp(2rem,8vw,2.8rem);font-weight:900;margin-bottom:1.25rem}
.math-opts{display:flex;gap:.65rem;justify-content:center;flex-wrap:wrap}
.math-opt{width:68px;height:68px;border-radius:14px;border:2px solid var(--border);background:#fff;font-size:1.35rem;font-weight:800;transition:.15s;display:flex;align-items:center;justify-content:center}
.math-opt:hover{border-color:var(--g);color:var(--g);transform:scale(1.06)}
.math-opt.correct{background:var(--gl);border-color:var(--g);color:var(--g)}
.math-opt.wrong{background:var(--rl);border-color:var(--r);color:var(--r)}
.gfeedback{text-align:center;font-size:1rem;font-weight:700;min-height:1.7rem;margin:.65rem 0}
.gscore{display:flex;gap:1.25rem;justify-content:center;font-size:.83rem;color:var(--t2)}

/* WORD */
.word-q{text-align:center;padding:.75rem 0}
.word-clue{font-size:.95rem;color:var(--t2);margin-bottom:.65rem}
.word-blanks{font-size:1.8rem;font-weight:900;letter-spacing:.2em;margin-bottom:1.1rem;min-height:2.2rem}
.letter-row{display:flex;gap:.45rem;justify-content:center;flex-wrap:wrap;margin-bottom:.65rem}
.let-opt{width:46px;height:46px;border-radius:10px;border:2px solid var(--border);background:#fff;font-size:1.15rem;font-weight:800;transition:.15s;display:flex;align-items:center;justify-content:center}
.let-opt:hover{border-color:var(--b);color:var(--b);transform:scale(1.07)}
.let-opt.used{opacity:.3;pointer-events:none}
.word-btns{display:flex;gap:.45rem;justify-content:center;margin-top:.45rem}
.word-btn{background:#fff;border:1px solid var(--border);padding:.38rem .8rem;border-radius:8px;font-size:.8rem;color:var(--t2);transition:.15s}
.word-btn:hover{border-color:var(--g);color:var(--g)}

/* SPECIAL GAMES */
.special-q{text-align:center;padding:.75rem 0}
.big-emoji{font-size:4rem;margin-bottom:.75rem;display:block;line-height:1;animation:bounce2 .6s ease-in-out infinite alternate}
.special-question{font-size:1.05rem;font-weight:700;color:var(--t1);margin-bottom:1.1rem;line-height:1.4}
.big-opts{display:flex;flex-direction:column;gap:.5rem;max-width:320px;margin:0 auto}
.big-opt{padding:.8rem 1rem;border-radius:14px;border:2.5px solid var(--border);background:#fff;font-size:1rem;font-weight:700;transition:.15s;text-align:center;display:flex;align-items:center;gap:.6rem;justify-content:center}
.big-opt:hover{border-color:var(--p);background:var(--pl);transform:scale(1.02)}
.big-opt.correct{background:var(--gl);border-color:var(--g);color:var(--gd)}
.big-opt.wrong{background:var(--rl);border-color:var(--r);color:#a02020}
.big-opt .oe{font-size:1.4rem}

/* COLORS */
.color-q{text-align:center;padding:.75rem 0}
.color-box{width:120px;height:120px;border-radius:20px;margin:0 auto 1rem;border:3px solid var(--border);box-shadow:var(--shadow)}
.color-opts{display:flex;gap:.6rem;justify-content:center;flex-wrap:wrap}
.color-opt{padding:.55rem 1rem;border-radius:10px;border:2px solid var(--border);background:#fff;font-size:.9rem;font-weight:700;transition:.15s}
.color-opt:hover{transform:scale(1.05)}
.color-opt.correct{border-color:var(--g);background:var(--gl);color:var(--gd)}
.color-opt.wrong{border-color:var(--r);background:var(--rl);color:#a02020}

/* MATCH */
.match-grid{display:grid;grid-template-columns:1fr 1fr;gap:.9rem;margin-bottom:.75rem}
.match-col{display:flex;flex-direction:column;gap:.5rem}
.match-label{font-size:.8rem;font-weight:700;color:var(--t3);text-align:center;margin-bottom:.25rem}
.match-item{padding:.65rem .9rem;border-radius:12px;border:2px solid var(--border);background:#fff;font-size:.95rem;font-weight:600;text-align:center;cursor:pointer;transition:.15s;display:flex;align-items:center;justify-content:center;gap:.4rem}
.match-item:hover{border-color:var(--b);background:var(--bl)}
.match-item.selected{border-color:var(--p);background:var(--pl)}
.match-item.matched{border-color:var(--g);background:var(--gl);color:var(--gd);pointer-events:none}
.match-item.wrong-flash{border-color:var(--r);background:var(--rl)}

/* H-OPT */
.hq{text-align:center;padding:.75rem 0}
.hq-emoji{font-size:3rem;margin-bottom:.75rem}
.hq-text{font-size:1rem;font-weight:700;margin-bottom:1.1rem;line-height:1.4}
.h-opts{display:flex;flex-direction:column;gap:.45rem;max-width:350px;margin:0 auto}
.h-opt{padding:.65rem 1rem;border-radius:12px;border:1.5px solid var(--border);background:#fff;font-size:.88rem;font-weight:600;text-align:left;transition:.15s}
.h-opt:hover{border-color:var(--b);background:var(--bl)}
.h-opt.correct{background:var(--gl);border-color:var(--g);color:var(--gd)}
.h-opt.wrong{background:var(--rl);border-color:var(--r);color:#a02020}

/* PROGRESS */
.prog-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:.9rem;margin-bottom:1.35rem}
.prog-card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem}
.prog-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:.65rem;font-weight:600;font-size:.87rem}
.prog-pct{font-size:1.3rem;font-weight:900}
.prog-bg{background:var(--border);border-radius:6px;height:6px;overflow:hidden}
.prog-fill{height:100%;border-radius:6px}
.prog-sessions{font-size:.72rem;color:var(--t3);margin-top:.4rem}

/* CHART */
.weekly-chart{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem}
.wc-title{font-weight:700;font-size:.9rem;margin-bottom:.9rem}
.bars{display:flex;align-items:flex-end;gap:.45rem;height:110px}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;gap:.25rem}
.bar-fill{width:100%;border-radius:4px 4px 0 0;min-height:4px;position:relative;transition:height .5s}
.bar-fill::after{content:attr(data-val);position:absolute;top:-17px;left:50%;transform:translateX(-50%);font-size:.65rem;font-weight:700;color:var(--t2);white-space:nowrap}
.bar-day{font-size:.68rem;color:var(--t3)}

/* LEADERBOARD */
.leaderboard{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem;margin-bottom:1.1rem}
.lb-title{font-weight:700;font-size:.9rem;margin-bottom:.9rem;display:flex;align-items:center;gap:.4rem}
.lb-list{list-style:none}
.lb-item{display:flex;align-items:center;gap:.75rem;padding:.55rem 0;border-bottom:1px solid var(--border)}
.lb-item:last-child{border-bottom:none}
.lb-rank{font-size:1.1rem;font-weight:900;width:1.5rem;text-align:center}
.lb-name{flex:1;font-weight:600;font-size:.88rem}
.lb-score{font-weight:800;color:var(--g);font-size:.95rem}
.lb-item.me{background:var(--gl);border-radius:8px;padding:.55rem .5rem}

/* ACHIEVEMENTS */
.ach-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.9rem}
.ach-item{background:#fff;border-radius:var(--radius);padding:1.1rem;text-align:center;border:1.5px solid var(--border);transition:.15s}
.ach-item.earned{border-color:var(--y);background:var(--yl)}
.ach-item.locked{opacity:.5;border-style:dashed}
.ach-item.earned:hover{transform:scale(1.04)}
.ach-emoji{font-size:2rem;margin-bottom:.4rem}
.ach-name{font-weight:700;font-size:.79rem}
.ach-req{font-size:.68rem;color:var(--t3);margin-top:.15rem}

/* DIARY */
.diary-list{display:flex;flex-direction:column;gap:.6rem}
.diary-item{background:#fff;border:1px solid var(--border);border-radius:12px;padding:.85rem 1rem;display:flex;align-items:center;gap:.75rem}
.diary-emoji{font-size:1.6rem;flex-shrink:0}
.diary-info{flex:1}
.diary-game{font-weight:700;font-size:.88rem}
.diary-detail{font-size:.75rem;color:var(--t3);margin-top:.1rem}
.diary-score{font-weight:800;color:var(--g);font-size:.95rem}

/* AI BOXES */
.ai-box{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.35rem;margin-bottom:1.1rem}
.ai-box-title{font-weight:700;font-size:.92rem;margin-bottom:.9rem}
.ai-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(145px,1fr));gap:.65rem;align-items:end;margin-bottom:.9rem}
.ai-form .fg{margin:0}
.fg{margin-bottom:.9rem}
.fg label{display:block;font-size:.81rem;font-weight:600;color:var(--t2);margin-bottom:.3rem}
.fg input,.fg select{width:100%;padding:.55rem .8rem;border:1.5px solid var(--border);border-radius:10px;font-size:.87rem;color:var(--t1);background:#fff;outline:none;transition:.15s}
.fg input:focus,.fg select:focus{border-color:var(--g)}
.btn-ai{background:linear-gradient(135deg,var(--p),#a37ee0);color:#fff;border:none;padding:.58rem 1.1rem;border-radius:10px;font-weight:700;font-size:.86rem;transition:.15s;width:100%}
.btn-ai:hover{opacity:.88;transform:translateY(-1px)}
.ai-output{min-height:75px;background:var(--bg);border-radius:10px;padding:.9rem;font-size:.86rem;line-height:1.75;color:var(--t2);border:1.5px dashed var(--border)}
.ai-ph{color:var(--t3)}
.ai-loading{display:flex;align-items:center;gap:.45rem;color:var(--p);font-weight:700;font-size:.88rem}
.dots span{animation:blink 1.2s infinite;display:inline-block}
.dots span:nth-child(2){animation-delay:.2s}.dots span:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.2}40%{opacity:1}}

/* TEACHER */
.class-table-wrap{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.cth{display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.1rem;border-bottom:1px solid var(--border);flex-wrap:wrap;gap:.5rem}
.cth .btn-ai{width:auto}
.ts{overflow-x:auto}
.class-table{width:100%;border-collapse:collapse;min-width:480px}
.class-table th{background:var(--bg);font-size:.78rem;font-weight:700;text-align:left;padding:.65rem .9rem;color:var(--t2);border-bottom:1px solid var(--border)}
.class-table td{padding:.65rem .9rem;font-size:.85rem;border-bottom:1px solid var(--border);vertical-align:middle}
.class-table tr:last-child td{border-bottom:none}
.class-table tr:hover td{background:#fafff9}
.sb{display:inline-block;padding:.18rem .55rem;border-radius:20px;font-size:.7rem;font-weight:700}
.sb.ok{background:var(--gl);color:var(--gd)}.sb.warn{background:var(--yl);color:#7a6000}.sb.bad{background:var(--rl);color:#a02020}.sb.great{background:var(--pl);color:#4a2080}.sb.sp{background:var(--ol);color:#8a5000}

/* RESPONSIVE */
@media(max-width:680px){
  .hamburger{display:block}
  .nav-links{display:none;position:fixed;top:58px;left:0;right:0;background:#fff;border-bottom:1px solid var(--border);flex-direction:column;padding:.75rem 1rem;gap:.35rem;z-index:150;box-shadow:0 4px 16px rgba(0,0,0,.1)}
  .nav-links.open{display:flex}.nav-links button{width:100%;text-align:left}
  .app-layout{grid-template-columns:1fr}.sidebar{display:none}.app-main{max-height:unset;padding:1.1rem}
  .tab-header h2{font-size:1.1rem}
  .hero{padding:2.5rem 1.1rem 1.5rem}
  .subjects-grid{grid-template-columns:repeat(2,1fr)}
  .prog-grid{grid-template-columns:repeat(2,1fr)}
  .games-grid{grid-template-columns:repeat(2,1fr)}
  .math-opt{width:60px;height:60px;font-size:1.2rem}
  .math-eq{font-size:1.8rem}
  .ai-form{grid-template-columns:1fr}
  .quick-stats{grid-template-columns:repeat(3,1fr)}
  .big-opts{max-width:100%}
  .welcome-card{padding:1.75rem 1.25rem}
}

/* ===== NAUJŲ FUNKCIJŲ STILIAI ===== */

/* GYVŪNĖLIS */
.pet-screen{position:fixed;inset:0;background:linear-gradient(135deg,#e8f7ef,#eaf3fd,#f0ebfa);z-index:490;display:none;align-items:center;justify-content:center;padding:1.5rem}
.pet-screen.show{display:flex}
.pet-card{background:#fff;border-radius:24px;padding:2rem 1.75rem;max-width:420px;width:100%;box-shadow:0 8px 40px rgba(0,0,0,.13);text-align:center}
.pet-card h2{font-size:1.3rem;font-weight:900;color:var(--gd);margin-bottom:.3rem}
.pet-card p{color:var(--t2);font-size:.9rem;margin-bottom:1.35rem}
.pet-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.75rem;margin-bottom:1.1rem}
.pet-opt{padding:1rem .5rem;border-radius:14px;border:2.5px solid var(--border);background:#fff;cursor:pointer;transition:.15s;text-align:center}
.pet-opt:hover{border-color:var(--g);background:var(--gl);transform:scale(1.04)}
.pet-opt.selected{border-color:var(--g);background:var(--gl)}
.pet-opt-emoji{font-size:2.4rem;display:block;margin-bottom:.3rem}
.pet-opt-name{font-size:.78rem;font-weight:700;color:var(--t1)}
.pet-start-btn{background:linear-gradient(135deg,var(--g),#38c97a);color:#fff;border:none;padding:.85rem;border-radius:14px;font-size:1.05rem;font-weight:800;width:100%;transition:.15s;box-shadow:0 4px 16px rgba(45,158,95,.3)}
.pet-start-btn:hover{transform:translateY(-2px)}

/* PET WIDGET šone */
.pet-widget{background:linear-gradient(135deg,var(--gl),#fff8e1);border:1.5px solid var(--y);border-radius:14px;padding:.85rem;text-align:center;margin-top:.5rem}
.pet-big{font-size:2.8rem;line-height:1;display:block;animation:petbounce 2s ease-in-out infinite}
@keyframes petbounce{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-5px) scale(1.05)}}
.pet-name-tag{font-size:.78rem;font-weight:700;color:var(--gd);margin:.2rem 0 .1rem}
.pet-level-tag{font-size:.72rem;color:var(--t3)}
.pet-xp-bar{background:var(--border);border-radius:6px;height:5px;overflow:hidden;margin:.4rem 0 .2rem}
.pet-xp-fill{height:100%;background:linear-gradient(90deg,var(--y),var(--o));border-radius:6px;transition:width .5s}
.pet-xp-label{font-size:.68rem;color:var(--t3)}
.pet-mood{font-size:.75rem;margin-top:.3rem}

/* DOVANŲ DĖŽUTĖ */
.gift-banner{background:linear-gradient(135deg,#fff8e1,#fce4ec);border:2px solid var(--y);border-radius:16px;padding:1rem 1.25rem;display:flex;align-items:center;gap:.9rem;margin-bottom:1.1rem;cursor:pointer;transition:.15s;position:relative}
.gift-banner:hover{transform:translateY(-2px);box-shadow:0 4px 16px rgba(245,200,66,.3)}
.gift-banner.opened{opacity:.6;cursor:default;transform:none}
.gift-emoji{font-size:2.5rem;animation:shake 1s ease-in-out infinite}
@keyframes shake{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}75%{transform:rotate(8deg)}}
.gift-banner.opened .gift-emoji{animation:none}
.gift-text h3{font-size:.95rem;font-weight:800;color:#8a6000;margin-bottom:.15rem}
.gift-text p{font-size:.82rem;color:var(--t2)}
.gift-badge{position:absolute;top:-8px;right:12px;background:var(--r);color:#fff;font-size:.7rem;font-weight:800;padding:.15rem .5rem;border-radius:10px}

/* NUOTAIKŲ DIENORAŠTIS */
.mood-section{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:1.1rem;margin-bottom:1.1rem}
.mood-title{font-weight:700;font-size:.9rem;margin-bottom:.75rem}
.mood-emojis{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap;margin-bottom:.75rem}
.mood-btn{width:52px;height:52px;border-radius:12px;border:2px solid var(--border);background:#fff;font-size:1.6rem;cursor:pointer;transition:.15s;display:flex;align-items:center;justify-content:center}
.mood-btn:hover{border-color:var(--g);transform:scale(1.12)}
.mood-btn.selected{border-color:var(--g);background:var(--gl)}
.mood-week{display:flex;gap:.4rem;justify-content:center;margin-top:.5rem}
.mood-day-dot{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:1.1rem;border:1px solid var(--border);background:var(--bg)}
.mood-day-label{font-size:.65rem;color:var(--t3);text-align:center;margin-top:.15rem}

/* KVĖPAVIMO PRATIMAS */
.breath-modal{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:450;display:none;align-items:center;justify-content:center}
.breath-modal.show{display:flex}
.breath-card{background:#fff;border-radius:24px;padding:2.5rem 2rem;max-width:360px;width:90%;text-align:center;box-shadow:0 8px 40px rgba(0,0,0,.2)}
.breath-card h3{font-size:1.2rem;font-weight:800;margin-bottom:.3rem;color:var(--gd)}
.breath-card p{font-size:.88rem;color:var(--t2);margin-bottom:1.5rem}
.breath-circle{width:140px;height:140px;border-radius:50%;background:linear-gradient(135deg,var(--bl),var(--pl));margin:0 auto 1.25rem;display:flex;align-items:center;justify-content:center;font-size:2rem;transition:transform 4s ease-in-out;border:4px solid var(--b)}
.breath-circle.expand{transform:scale(1.5)}
.breath-circle.contract{transform:scale(1)}
.breath-phase{font-size:1.1rem;font-weight:800;color:var(--b);margin-bottom:.5rem;min-height:1.5rem}
.breath-count{font-size:2.5rem;font-weight:900;color:var(--p);margin-bottom:1rem}
.breath-progress{display:flex;gap:.3rem;justify-content:center;margin-bottom:1.25rem}
.breath-dot{width:10px;height:10px;border-radius:50%;background:var(--border);transition:.3s}
.breath-dot.done{background:var(--g)}

/* DIDELIO TEKSTO MYGTUKAS */
.access-btn{position:fixed;bottom:1.25rem;right:1.25rem;z-index:100;background:var(--g);color:#fff;border:none;border-radius:50%;width:48px;height:48px;font-size:1.2rem;font-weight:900;box-shadow:0 4px 16px rgba(0,0,0,.2);transition:.15s;display:none}
.access-btn:hover{transform:scale(1.1)}
.access-btn.visible{display:flex;align-items:center;justify-content:center}
body.big-text{font-size:20px}
body.big-text .game-name{font-size:1rem}
body.big-text .math-eq{font-size:3.5rem}
body.big-text .math-opt{width:82px;height:82px;font-size:1.6rem}
body.big-text .big-opt{font-size:1.2rem;padding:1rem}
body.big-text .word-blanks{font-size:2.2rem}
body.big-text .let-opt{width:56px;height:56px;font-size:1.35rem}
body.high-contrast{filter:contrast(1.5)}

/* PASAKŲ KŪRĖJAS */
.story-output{background:linear-gradient(135deg,#fff8e1,#fef9f0);border:1.5px solid var(--y);border-radius:14px;padding:1.1rem;font-size:.9rem;line-height:1.85;color:var(--t1);min-height:80px;margin-top:.75rem;white-space:pre-wrap}
.story-questions{margin-top:.85rem;display:flex;flex-direction:column;gap:.5rem}
.story-q{background:#fff;border-radius:10px;padding:.65rem .85rem;border:1px solid var(--border);font-size:.85rem;font-weight:600}

/* KLASĖS LYDERIŲ LENTA */
.class-lb{background:#fff;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;margin-bottom:1.1rem}
.class-lb-header{background:linear-gradient(135deg,var(--bl),var(--pl));padding:.85rem 1.1rem;font-weight:800;font-size:.95rem;color:var(--gd)}
.class-lb-list{list-style:none}
.class-lb-item{display:flex;align-items:center;gap:.75rem;padding:.6rem 1.1rem;border-bottom:.5px solid var(--border);font-size:.86rem}
.class-lb-item:last-child{border-bottom:none}
.class-lb-rank{font-size:1.1rem;width:1.6rem;text-align:center;font-weight:900}
.class-lb-name{flex:1;font-weight:600}
.class-lb-bar{height:6px;background:var(--gl);border-radius:4px;overflow:hidden;width:80px}
.class-lb-fill{height:100%;background:var(--g);border-radius:4px}
.class-lb-score{font-weight:800;color:var(--g);min-width:40px;text-align:right}

/* SAVAITINIS PDF */
.report-preview{background:#fff;border:1.5px solid var(--border);border-radius:14px;padding:1.1rem;margin-top:.75rem}
.report-header{display:flex;align-items:center;gap:.75rem;margin-bottom:.85rem;padding-bottom:.75rem;border-bottom:1px solid var(--border)}
.report-logo{font-size:1.5rem}
.report-title{font-weight:800;font-size:.95rem;color:var(--gd)}
.report-date{font-size:.75rem;color:var(--t3)}

/* NOTIFICATION BADGE */
.notif-badge{display:inline-block;background:var(--r);color:#fff;border-radius:50%;width:18px;height:18px;font-size:.65rem;font-weight:900;text-align:center;line-height:18px;margin-left:.3rem;vertical-align:middle}

/* ===== VIDUTINIU FUNKCIJŲ STILIAI ===== */

/* NUOTYKIŲ ŽEMĖLAPIS */
.map-wrap{background:linear-gradient(160deg,#e8f7ef 0%,#eaf3fd 50%,#f0ebfa 100%);border-radius:var(--radius);padding:1.25rem;margin-bottom:1.1rem;position:relative;overflow:hidden}
.map-title{font-weight:800;font-size:1rem;margin-bottom:1rem;text-align:center}
.map-path{display:flex;flex-direction:column;gap:.5rem;position:relative}
.map-path::before{content:'';position:absolute;left:28px;top:20px;bottom:20px;width:3px;background:repeating-linear-gradient(to bottom,var(--g) 0,var(--g) 8px,transparent 8px,transparent 16px);z-index:0}
.map-stop{display:flex;align-items:center;gap:.85rem;position:relative;z-index:1}
.map-dot{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0;border:3px solid #fff;box-shadow:0 2px 8px rgba(0,0,0,.12);transition:.2s;cursor:pointer}
.map-dot.done{background:var(--g);animation:none}
.map-dot.current{background:var(--y);animation:mapPulse 1.5s ease-in-out infinite}
.map-dot.locked{background:var(--border);filter:grayscale(1);cursor:not-allowed}
@keyframes mapPulse{0%,100%{box-shadow:0 0 0 0 rgba(245,200,66,.5)}50%{box-shadow:0 0 0 8px rgba(245,200,66,0)}}
.map-stop-info{flex:1}
.map-stop-name{font-weight:700;font-size:.88rem}
.map-stop-sub{font-size:.75rem;color:var(--t2)}
.map-stop-badge{font-size:.7rem;padding:.15rem .5rem;border-radius:10px;font-weight:700}
.map-badge-done{background:var(--gl);color:var(--gd)}
.map-badge-now{background:var(--yl);color:#8a6000}
.map-badge-lock{background:var(--border);color:var(--t3)}

/* IŠŠŪKIAI */
.quest-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:.85rem}
.quest-reset{font-size:.75rem;color:var(--t3);background:none;border:none;cursor:pointer;text-decoration:underline}
.quest-card{background:#fff;border:1.5px solid var(--border);border-radius:14px;padding:.9rem 1rem;margin-bottom:.65rem;display:flex;align-items:center;gap:.85rem;transition:.15s}
.quest-card.done{background:var(--gl);border-color:var(--g);opacity:.75}
.quest-card.weekly{border-left:4px solid var(--p)}
.quest-icon{font-size:1.8rem;flex-shrink:0}
.quest-info{flex:1}
.quest-name{font-weight:700;font-size:.88rem;margin-bottom:.2rem}
.quest-desc{font-size:.75rem;color:var(--t2)}
.quest-prog{display:flex;align-items:center;gap:.5rem;margin-top:.35rem}
.quest-bar-bg{flex:1;height:5px;background:var(--border);border-radius:4px;overflow:hidden}
.quest-bar-fill{height:100%;background:var(--g);border-radius:4px;transition:width .4s}
.quest-pct{font-size:.72rem;font-weight:700;color:var(--g);min-width:32px}
.quest-reward{font-size:.8rem;font-weight:700;color:var(--y);margin-left:.5rem}
.quest-check{font-size:1.5rem;flex-shrink:0}

/* ŠEIMOS REŽIMAS */
.family-hero{text-align:center;padding:1.1rem 0;margin-bottom:1rem}
.family-emoji{font-size:3.5rem;margin-bottom:.5rem}
.family-score-grid{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-bottom:1rem}
.family-member{background:#fff;border:1.5px solid var(--border);border-radius:14px;padding:.9rem;text-align:center}
.family-member.active{border-color:var(--g);background:var(--gl)}
.family-member-av{font-size:2rem;margin-bottom:.25rem}
.family-member-name{font-weight:700;font-size:.85rem}
.family-member-score{font-size:1.2rem;font-weight:900;color:var(--g)}
.family-challenge{background:linear-gradient(135deg,var(--bl),var(--pl));border-radius:14px;padding:1rem;text-align:center;margin-bottom:.85rem}
.family-challenge h4{font-weight:800;font-size:.9rem;color:var(--gd);margin-bottom:.3rem}
.family-challenge p{font-size:.82rem;color:var(--t2)}
.family-join-input{display:flex;gap:.5rem;margin-bottom:.75rem}
.family-join-input input{flex:1;padding:.55rem .8rem;border:1.5px solid var(--border);border-radius:10px;font-size:.88rem;outline:none}
.family-join-input input:focus{border-color:var(--g)}

/* TĖVŲ TIKSLAI */
.goal-card{background:#fff;border:1.5px solid var(--border);border-radius:14px;padding:.9rem 1rem;margin-bottom:.65rem}
.goal-top{display:flex;align-items:center;gap:.75rem;margin-bottom:.6rem}
.goal-icon{font-size:1.6rem}
.goal-title{font-weight:700;font-size:.88rem;flex:1}
.goal-status{font-size:.75rem;font-weight:700}
.goal-status.met{color:var(--g)}.goal-status.unmet{color:var(--r)}
.goal-prog-row{display:flex;align-items:center;gap:.5rem}
.goal-bar{flex:1;height:6px;background:var(--border);border-radius:4px;overflow:hidden}
.goal-fill{height:100%;border-radius:4px;transition:width .4s}
.goal-nums{font-size:.75rem;color:var(--t2);min-width:40px;text-align:right}
.goal-setter{display:grid;grid-template-columns:1fr 1fr auto;gap:.5rem;align-items:end;margin-top:.85rem}
.goal-setter label{font-size:.78rem;font-weight:600;color:var(--t2);display:block;margin-bottom:.25rem}
.goal-setter select,.goal-setter input{width:100%;padding:.5rem .7rem;border:1.5px solid var(--border);border-radius:8px;font-size:.82rem}
.goal-setter button{padding:.5rem .9rem;border-radius:8px;background:var(--g);color:#fff;border:none;font-weight:700;font-size:.82rem}

/* KRYŽIAŽODŽIAI */
.crossword-wrap{margin-bottom:1rem}
.cw-grid{display:inline-grid;gap:2px;background:var(--t1);border:2px solid var(--t1);border-radius:6px;overflow:hidden}
.cw-cell{width:34px;height:34px;background:#fff;display:flex;align-items:center;justify-content:center;font-size:1rem;font-weight:800;position:relative;transition:.15s}
.cw-cell.black{background:var(--t1)}
.cw-cell.correct{background:var(--gl)}
.cw-cell.wrong{background:var(--rl)}
.cw-cell input{width:100%;height:100%;border:none;outline:none;text-align:center;font-size:1rem;font-weight:800;background:transparent;text-transform:uppercase;cursor:pointer}
.cw-cell input:focus{background:var(--yl)}
.cw-num{position:absolute;top:1px;left:2px;font-size:.5rem;color:var(--t3);font-weight:700;line-height:1}
.cw-clues{display:grid;grid-template-columns:1fr 1fr;gap:.75rem;margin-top:.85rem}
.cw-clue-col h4{font-weight:700;font-size:.82rem;color:var(--t2);margin-bottom:.4rem}
.cw-clue{font-size:.78rem;color:var(--t1);padding:.2rem 0;border-bottom:.5px solid var(--border)}
.cw-clue span{font-weight:700;color:var(--g)}
.cw-actions{display:flex;gap:.5rem;margin-top:.75rem;flex-wrap:wrap}
.cw-btn{padding:.45rem .9rem;border-radius:8px;border:1.5px solid var(--border);background:#fff;font-size:.82rem;font-weight:600;cursor:pointer;transition:.15s}
.cw-btn:hover{border-color:var(--g);color:var(--g)}
.cw-btn.primary{background:var(--g);color:#fff;border-color:var(--g)}

/* NOTIFICATION TOAST */
.toast{position:fixed;bottom:5rem;left:50%;transform:translateX(-50%) translateY(20px);background:var(--t1);color:#fff;padding:.65rem 1.25rem;border-radius:12px;font-size:.88rem;font-weight:600;z-index:300;opacity:0;transition:all .3s;pointer-events:none;white-space:nowrap}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===== SUNKIŲ FUNKCIJŲ STILIAI ===== */

/* BALSO ATPAŽINIMAS */
.voice-btn{width:72px;height:72px;border-radius:50%;border:3px solid var(--g);background:#fff;font-size:2rem;cursor:pointer;transition:.2s;display:flex;align-items:center;justify-content:center;margin:0 auto .75rem;box-shadow:0 4px 16px rgba(45,158,95,.2)}
.voice-btn:hover{transform:scale(1.08)}
.voice-btn.listening{background:var(--rl);border-color:var(--r);animation:voicePulse 1s ease-in-out infinite;box-shadow:0 0 0 0 rgba(240,96,96,.5)}
@keyframes voicePulse{0%{box-shadow:0 0 0 0 rgba(240,96,96,.5)}70%{box-shadow:0 0 0 16px rgba(240,96,96,0)}100%{box-shadow:0 0 0 0 rgba(240,96,96,0)}}
.voice-transcript{min-height:48px;background:var(--bg);border:1.5px dashed var(--border);border-radius:12px;padding:.75rem 1rem;font-size:1.1rem;font-weight:700;text-align:center;color:var(--t2);margin:.5rem 0}
.voice-status{font-size:.82rem;color:var(--t3);text-align:center;margin-bottom:.5rem}
.voice-hint{font-size:.8rem;color:var(--t3);text-align:center;margin-top:.3rem}
.voice-result.correct{color:var(--g);font-weight:800}
.voice-result.wrong{color:var(--r);font-weight:800}

/* MATEMATIKOS RPG */
.rpg-arena{background:linear-gradient(160deg,#1a1a2e 0%,#16213e 60%,#0f3460 100%);border-radius:20px;padding:1.5rem;color:#fff;margin-bottom:1rem;position:relative;overflow:hidden}
.rpg-arena::before{content:'⭐';position:absolute;font-size:6rem;opacity:.04;right:-10px;top:-10px}
.rpg-topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.25rem}
.rpg-wave{font-size:.78rem;background:rgba(255,255,255,.1);padding:.2rem .6rem;border-radius:20px;color:#aaa}
.rpg-combatants{display:grid;grid-template-columns:1fr auto 1fr;gap:.75rem;align-items:center;margin-bottom:1.25rem}
.rpg-hero,.rpg-enemy{text-align:center}
.rpg-sprite{font-size:3.5rem;line-height:1;margin-bottom:.4rem;display:block;transition:transform .2s}
.rpg-sprite.shake{animation:rpgShake .3s ease-in-out}
@keyframes rpgShake{0%,100%{transform:translateX(0)}25%{transform:translateX(-8px)}75%{transform:translateX(8px)}}
.rpg-sprite.bounce{animation:rpgBounce .3s ease-in-out}
@keyframes rpgBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
.rpg-name{font-size:.78rem;font-weight:700;color:#ccc;margin-bottom:.35rem}
.rpg-hp-bar{height:8px;background:rgba(255,255,255,.15);border-radius:4px;overflow:hidden;margin-bottom:.2rem}
.rpg-hp-fill{height:100%;border-radius:4px;transition:width .5s ease}
.rpg-hp-fill.hero-hp{background:linear-gradient(90deg,#2ecc71,#27ae60)}
.rpg-hp-fill.enemy-hp{background:linear-gradient(90deg,#e74c3c,#c0392b)}
.rpg-hp-fill.low{background:linear-gradient(90deg,#f39c12,#e67e22)}
.rpg-hp-text{font-size:.7rem;color:#aaa;text-align:right}
.rpg-vs{font-size:1.4rem;font-weight:900;color:rgba(255,255,255,.3)}
.rpg-question{background:rgba(255,255,255,.08);border-radius:12px;padding:.85rem 1rem;text-align:center;margin-bottom:.85rem}
.rpg-q-label{font-size:.72rem;color:#aaa;margin-bottom:.35rem}
.rpg-q-text{font-size:1.8rem;font-weight:900;color:#fff;letter-spacing:.05em}
.rpg-options{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.rpg-opt{padding:.6rem .5rem;border-radius:10px;border:2px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);color:#fff;font-size:1rem;font-weight:700;cursor:pointer;transition:.15s}
.rpg-opt:hover{border-color:var(--g);background:rgba(45,158,95,.25)}
.rpg-opt.correct{border-color:#2ecc71;background:rgba(46,204,113,.3)}
.rpg-opt.wrong{border-color:#e74c3c;background:rgba(231,76,60,.3)}
.rpg-log{background:rgba(0,0,0,.3);border-radius:10px;padding:.6rem .85rem;font-size:.78rem;color:#aaa;min-height:2rem;text-align:center;margin-top:.75rem;font-style:italic}
.rpg-dmg{position:absolute;font-size:1.6rem;font-weight:900;color:#f5c842;pointer-events:none;animation:dmgFloat 1s ease-out forwards}
@keyframes dmgFloat{0%{opacity:1;transform:translateY(0)}100%{opacity:0;transform:translateY(-50px)}}
.rpg-heal{color:#2ecc71}
.rpg-level-up{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:450;display:none;align-items:center;justify-content:center}
.rpg-level-up.show{display:flex}
.rpg-level-card{background:linear-gradient(135deg,#1a1a2e,#0f3460);border:2px solid var(--y);border-radius:20px;padding:2.5rem 2rem;text-align:center;color:#fff;max-width:340px;width:90%}
.rpg-level-card h2{font-size:1.5rem;font-weight:900;color:var(--y);margin-bottom:.5rem}
.rpg-level-card p{color:#ccc;margin-bottom:1.25rem}
.rpg-next-btn{background:linear-gradient(135deg,var(--g),#38c97a);color:#fff;border:none;padding:.75rem 2rem;border-radius:12px;font-size:1rem;font-weight:800;cursor:pointer}

/* GEOGRAFIJA */
.geo-game{text-align:center;padding:.5rem 0}
.geo-flag{font-size:4rem;margin-bottom:.75rem;display:block;animation:bounce2 .8s ease-in-out infinite alternate}
.geo-question{font-size:1rem;font-weight:700;color:var(--t1);margin-bottom:1rem}
.geo-opts{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;max-width:340px;margin:0 auto}
.geo-opt{padding:.65rem .5rem;border-radius:12px;border:1.5px solid var(--border);background:#fff;font-size:.88rem;font-weight:600;cursor:pointer;transition:.15s;text-align:center}
.geo-opt:hover{border-color:var(--b);background:var(--bl)}
.geo-opt.correct{border-color:var(--g);background:var(--gl);color:var(--gd)}
.geo-opt.wrong{border-color:var(--r);background:var(--rl);color:#a02020}
.geo-info{margin-top:.65rem;font-size:.78rem;color:var(--t3)}
.geo-map-hint{background:var(--yl);border-radius:10px;padding:.5rem .75rem;font-size:.82rem;color:#8a6000;margin-top:.5rem}

/* RITMO ŽAIDIMAS */
.rhythm-game{text-align:center;padding:.5rem 0}
.rhythm-display{display:flex;gap:.5rem;justify-content:center;margin-bottom:1.25rem;flex-wrap:wrap}
.beat-light{width:44px;height:44px;border-radius:10px;background:var(--border);transition:background .1s,transform .1s;display:flex;align-items:center;justify-content:center;font-size:1.2rem}
.beat-light.active{background:var(--y);transform:scale(1.15);box-shadow:0 0 12px rgba(245,200,66,.6)}
.beat-light.hit{background:var(--g);transform:scale(1.2)}
.beat-light.miss{background:var(--r)}
.rhythm-score-bar{display:flex;justify-content:center;gap:1.5rem;margin-bottom:1rem;font-size:.85rem;color:var(--t2)}
.rhythm-btn{width:90px;height:90px;border-radius:20px;border:3px solid var(--y);background:var(--yl);font-size:2.5rem;cursor:pointer;transition:.1s;margin:.5rem auto;display:flex;align-items:center;justify-content:center;user-select:none}
.rhythm-btn:active,.rhythm-btn.pressed{background:var(--y);transform:scale(.93);box-shadow:0 0 16px rgba(245,200,66,.5)}
.rhythm-pattern{display:flex;gap:.35rem;justify-content:center;margin-bottom:.75rem}
.pat-dot{width:12px;height:12px;border-radius:50%;background:var(--border)}
.pat-dot.filled{background:var(--g)}
.pat-dot.current{background:var(--y);animation:patPulse .5s infinite}
@keyframes patPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.3)}}
.rhythm-instructions{font-size:.82rem;color:var(--t2);margin-bottom:.75rem}

/* DRAUGŲ SISTEMA */
.friend-code-box{background:linear-gradient(135deg,var(--gl),#fff8e1);border:2px solid var(--y);border-radius:16px;padding:1.25rem;text-align:center;margin-bottom:1rem}
.friend-code{font-size:2rem;font-weight:900;letter-spacing:.3em;color:var(--gd);font-family:monospace;margin:.5rem 0}
.friend-code-label{font-size:.78rem;color:var(--t3)}
.friend-copy-btn{background:var(--g);color:#fff;border:none;padding:.45rem 1.1rem;border-radius:8px;font-size:.82rem;font-weight:700;cursor:pointer;margin-top:.5rem}
.friend-list{display:flex;flex-direction:column;gap:.5rem;margin-bottom:.85rem}
.friend-item{background:#fff;border:1px solid var(--border);border-radius:12px;padding:.75rem 1rem;display:flex;align-items:center;gap:.75rem}
.friend-av{font-size:1.6rem}
.friend-info{flex:1}
.friend-name{font-weight:700;font-size:.88rem}
.friend-score{font-size:.75rem;color:var(--t3)}
.friend-status{font-size:.75rem;padding:.15rem .5rem;border-radius:10px;font-weight:700}
.friend-online{background:var(--gl);color:var(--gd)}
.friend-offline{background:var(--border);color:var(--t3)}
.friend-add-form{display:flex;gap:.5rem}
.friend-add-form input{flex:1;padding:.55rem .8rem;border:1.5px solid var(--border);border-radius:10px;font-size:.88rem;letter-spacing:.15em;text-transform:uppercase;outline:none}
.friend-add-form input:focus{border-color:var(--g)}
.friend-add-form button{background:var(--g);color:#fff;border:none;padding:.55rem 1rem;border-radius:10px;font-weight:700;font-size:.85rem;cursor:pointer}