.app-container{display:flex;flex-direction:column;min-height:100vh;background-color:transparent}.modern-navbar{position:sticky;top:0;width:100%;height:var(--header-height);z-index:1000;background:#ffffffb3;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(255,255,255,.4);box-shadow:0 4px 6px -1px #00000005,0 2px 4px -1px #00000005;display:flex;justify-content:center;transition:all .3s ease}.navbar-content{width:100%;max-width:var(--max-width);padding:0 24px;display:flex;align-items:center;justify-content:space-between}.brand{font-size:1.5rem;font-weight:800;color:var(--text-primary);display:flex;align-items:center;gap:8px;cursor:pointer;letter-spacing:-.03em}.brand-icon{font-size:1.8rem;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.brand-accent{color:var(--accent-blue)}.nav-links{display:flex;gap:32px;align-items:center}.nav-item{position:relative;text-decoration:none;color:var(--text-secondary);font-weight:500;font-size:.95rem;padding:8px 0;transition:color .2s ease}.nav-item:hover,.nav-item.active{color:var(--text-primary)}.nav-item:after{content:"";position:absolute;bottom:0;left:0;width:100%;height:2px;background:var(--gradient-primary);transform:scaleX(0);transform-origin:right;transition:transform .3s ease}.nav-item:hover:after,.nav-item.active:after{transform:scaleX(1);transform-origin:left}.nav-actions{display:flex;align-items:center;gap:16px}.user-badge{display:flex;align-items:center;gap:6px;background:#fff;padding:6px 12px;border-radius:20px;border:1px solid var(--border-subtle);box-shadow:var(--shadow-sm)}.streak-count{font-weight:700;color:var(--text-primary)}.user-name{font-weight:600;font-size:.95rem}.btn-theme-toggle{border-radius:999px;border:1px solid var(--border-subtle);padding:6px 10px;background:#f8fafce6;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;transition:background-color .2s ease,transform .15s ease,box-shadow .2s ease,border-color .2s ease;box-shadow:var(--shadow-xs)}.btn-theme-toggle:hover{background:#f9fafb;border-color:#94a3b880;transform:translateY(-1px);box-shadow:var(--shadow-sm)}.btn-theme-toggle:active{transform:translateY(0);box-shadow:none}.theme-icon{font-size:1.1rem}.btn-logout-ghost{background:transparent;border:none;font-weight:500;color:var(--text-muted);cursor:pointer;padding:8px 16px;transition:color .2s;font-size:.9rem}.btn-logout-ghost:hover{color:var(--accent-danger)}.auth-buttons-nav{display:flex;gap:12px;align-items:center}.btn-text{background:none;border:none;font-weight:600;color:var(--text-primary);cursor:pointer;font-size:.95rem}.btn-sm{padding:8px 16px;font-size:.9rem}.main-content-area{flex:1;width:100%;max-width:var(--max-width);margin:0 auto;padding:40px 24px}.modern-footer{margin-top:auto;background:#fff;border-top:1px solid var(--border-subtle);padding:32px 0}.footer-content{max-width:var(--max-width);margin:0 auto;padding:0 24px;display:flex;justify-content:space-between;align-items:center;color:var(--text-muted);font-size:.9rem}.footer-links{display:flex;gap:24px}html[data-theme=dark] .modern-navbar{background:#0f172ae6;border-bottom-color:#1e40af99;box-shadow:0 10px 30px #0f172ad9}html[data-theme=dark] .brand{color:var(--text-primary)}html[data-theme=dark] .nav-item{color:var(--text-secondary)}html[data-theme=dark] .nav-item:hover,html[data-theme=dark] .nav-item.active{color:var(--text-primary)}html[data-theme=dark] .user-badge{background:#0f172ae6;border-color:#94a3b866}html[data-theme=dark] .modern-footer{background:#020617;border-top-color:#0f172ae6}html[data-theme=dark] .footer-content{color:var(--text-muted)}.mobile-menu-toggle{display:none;background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--text-primary);padding:8px}.mobile-menu{display:none;position:absolute;top:100%;left:0;right:0;background:#fffffff2;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);border-top:1px solid var(--border-subtle);box-shadow:0 4px 12px #0000001a;padding:16px;flex-direction:column;gap:12px;z-index:1001}.mobile-menu.active{display:flex}.mobile-menu .nav-item{padding:12px 16px;border-radius:var(--radius-md);background:var(--bg-primary);text-align:center}@media(max-width:768px){.mobile-menu-toggle{display:block}.nav-links{display:none}.brand span:not(.brand-icon){font-size:1.2rem}.navbar-content{padding:0 16px;position:relative}.main-content-area{padding:24px 16px}.footer-content{flex-direction:column;gap:16px;text-align:center}.footer-links{flex-wrap:wrap;justify-content:center}.user-badge{padding:4px 10px;font-size:.85rem}.auth-buttons-nav{gap:8px}.btn-sm{padding:6px 12px;font-size:.85rem}.user-menu{display:none}.nav-actions{gap:8px}}@media(max-width:480px){.brand{font-size:1.2rem}.brand-icon{font-size:1.4rem}.navbar-content{padding:0 12px}.main-content-area{padding:20px 12px}.user-badge{flex-direction:column;gap:4px;padding:6px 8px}.user-name{font-size:.8rem}.streak-count{font-size:.85rem}.mobile-menu{padding:12px}.mobile-menu .nav-item{padding:10px 12px;font-size:.9rem}.btn-logout-ghost{padding:6px 12px;font-size:.8rem}}.leaderboard{width:100%;overflow:hidden}.leaderboard .row{display:grid;grid-template-columns:56px 1fr 96px 120px;gap:12px;align-items:center;padding:10px;border-bottom:1px solid var(--border-subtle);transition:background .12s ease,transform .12s ease}.leaderboard .row.head{color:var(--text-secondary);font-size:13px;text-transform:uppercase;letter-spacing:.6px}.leaderboard .row:hover{background:#ffffff05}.leaderboard .cell.rank{font-weight:700;color:var(--text-primary)}.leaderboard .cell.user .username{font-weight:600;color:var(--text-primary)}.leaderboard .cell.score{font-weight:700;color:var(--accent-blue)}.leaderboard .row.current{background:linear-gradient(90deg,rgba(79,140,255,.04),transparent);border-left:4px solid var(--accent-blue)}.leaderboard .rank-1{box-shadow:0 0 12px #a855f729}.leaderboard .rank-2{box-shadow:0 0 10px #4f8cff1f}.leaderboard .rank-3{box-shadow:0 0 8px #22c55e1f}.leaderboard .row{cursor:pointer}.leaderboard .row:active{transform:translateY(.5px)}@media(max-width:720px){.leaderboard .row{grid-template-columns:40px 1fr 72px 92px;padding:8px}.leaderboard .cell.rank{font-size:14px}.leaderboard .cell.user .username,.leaderboard .cell.score{font-size:.9rem}.leaderboard .cell.badge{font-size:.7rem}}@media(max-width:480px){.leaderboard .row{grid-template-columns:32px 1fr 60px 80px;padding:6px;gap:8px}.leaderboard .cell.rank{font-size:12px}.leaderboard .cell.user .username,.leaderboard .cell.score{font-size:.85rem}.leaderboard .cell.badge{font-size:.65rem}.leaderboard .row.head{font-size:11px}}:root{--bg-primary: #f6f7fb;--bg-secondary: #ffffff;--bg-card: #ffffff;--bg-float: rgba(255, 255, 255, .8);--bg-glass: rgba(255, 255, 255, .65);--bg-glass-heavy: rgba(255, 255, 255, .85);--text-primary: #0f172a;--text-secondary: #64748b;--text-muted: #94a3b8;--text-inverse: #ffffff;--text-brand: #4f46e5;--accent-blue: #3b82f6;--accent-indigo: #6366f1;--accent-purple: #8b5cf6;--accent-cyan: #06b6d4;--accent-green: #10b981;--accent-orange: #f97316;--accent-danger: #ef4444;--gradient-primary: linear-gradient(135deg, #4f46e5 0%, #3b82f6 100%);--gradient-hover: linear-gradient(135deg, #4338ca 0%, #2563eb 100%);--gradient-glow: linear-gradient(135deg, #818cf8 0%, #38bdf8 100%);--gradient-text: linear-gradient(135deg, #4f46e5 0%, #06b6d4 100%);--border-subtle: rgba(148, 163, 184, .15);--border-glass: rgba(255, 255, 255, .5);--border-focus: rgba(79, 70, 229, .4);--shadow-xs: 0 1px 2px rgba(0, 0, 0, .03);--shadow-sm: 0 2px 4px rgba(15, 23, 42, .04);--shadow-md: 0 4px 12px -2px rgba(15, 23, 42, .06), 0 2px 6px -1px rgba(15, 23, 42, .04);--shadow-lg: 0 12px 24px -4px rgba(15, 23, 42, .08), 0 4px 12px -2px rgba(15, 23, 42, .04);--shadow-xl: 0 20px 32px -4px rgba(15, 23, 42, .08);--shadow-glow: 0 0 24px rgba(79, 70, 229, .12);--radius-xl: 24px;--radius-lg: 16px;--radius-md: 12px;--radius-sm: 8px;--max-width: 1200px;--header-height: 72px}html[data-theme=dark]{--bg-primary: #020617;--bg-secondary: #020617;--bg-card: #020617;--bg-float: rgba(15, 23, 42, .9);--bg-glass: rgba(15, 23, 42, .85);--bg-glass-heavy: rgba(15, 23, 42, .95);--text-primary: #e5e7eb;--text-secondary: #9ca3af;--text-muted: #6b7280;--text-inverse: #020617;--text-brand: #c7d2fe;--accent-blue: #60a5fa;--accent-indigo: #818cf8;--accent-purple: #a855f7;--accent-cyan: #22d3ee;--accent-green: #34d399;--accent-orange: #fb923c;--accent-danger: #fca5a5;--gradient-primary: linear-gradient(135deg, #1d4ed8 0%, #4f46e5 100%);--gradient-hover: linear-gradient(135deg, #1e293b 0%, #1d4ed8 100%);--gradient-glow: linear-gradient(135deg, #4f46e5 0%, #0ea5e9 100%);--gradient-text: linear-gradient(135deg, #e5e7eb 0%, #a5b4fc 100%);--border-subtle: rgba(15, 23, 42, .8);--border-glass: rgba(148, 163, 184, .6);--border-focus: rgba(129, 140, 248, .6);--shadow-xs: 0 1px 2px rgba(15, 23, 42, .6);--shadow-sm: 0 2px 4px rgba(15, 23, 42, .7);--shadow-md: 0 8px 20px rgba(15, 23, 42, .8);--shadow-lg: 0 16px 32px rgba(15, 23, 42, .9);--shadow-xl: 0 24px 48px rgba(15, 23, 42, 1)}@font-face{font-family:InterVarLocal;src:local("Inter"),local("InterVar");font-weight:100 900}html,body,#root{height:100%}body{margin:0;background-color:var(--bg-primary);background-image:radial-gradient(circle at 15% 50%,rgba(59,130,246,.08),transparent 25%),radial-gradient(circle at 85% 30%,rgba(99,102,241,.08),transparent 25%),url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.03'/%3E%3C/svg%3E");color:var(--text-primary);font-family:InterVarLocal,Inter,Segoe UI,system-ui,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-size:16px;line-height:1.5;background-attachment:fixed}html[data-theme=dark] body{background-color:var(--bg-primary);background-image:radial-gradient(circle at 15% 50%,rgba(56,189,248,.18),transparent 30%),radial-gradient(circle at 85% 30%,rgba(129,140,248,.2),transparent 30%),radial-gradient(circle at 10% 10%,rgba(15,23,42,.9),transparent 55%)}.app-container{display:flex;min-height:100vh;position:relative}.main-content{flex:1;padding:0;max-width:100%;margin:0 auto;width:100%}.card{background:var(--bg-card);border:1px solid var(--border-subtle);border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-sm);transition:all .4s cubic-bezier(.175,.885,.32,1.275)}.card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg),var(--shadow-glow);border-color:#3b82f633}h1,h2,h3,h4,h5,h6{color:var(--text-primary);font-weight:700;letter-spacing:-.025em;margin-top:0}h1{font-size:3.5rem;line-height:1.1;letter-spacing:-.04em}h2{font-size:2.25rem;line-height:1.2}h3{font-size:1.5rem;line-height:1.3}p{color:var(--text-secondary);line-height:1.7;margin-bottom:1rem}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:16px 32px;background:#fff;color:var(--text-primary);border:2px solid var(--border-subtle);border-radius:var(--radius-md);cursor:pointer;transition:box-shadow .25s,transform .25s,background-color .25s,border-color .25s;font-weight:600;font-size:1.05rem;box-shadow:4px 6px #0f172a66;position:relative;overflow:hidden}.btn:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#f472b666,#facc1599);transform:translate(-100%);transition:transform .25s ease-in-out;z-index:-1}.btn:hover:after{transform:translate(0)}.btn:hover{transform:translate(2px,2px);box-shadow:2px 3px #0f172a80}.btn:active{filter:saturate(.9);transform:translate(0);box-shadow:1px 2px #0f172a80}.btn-primary{background:#facc15;border-color:#f97316;color:#111827}.btn-primary:hover{background:#fde047}.btn-xl{padding:20px 40px;font-size:1.25rem;letter-spacing:.02em}input,select,textarea{width:100%;background:#fff;border:2px solid #e2e8f0;border-radius:var(--radius-md);padding:12px 16px;color:var(--text-primary);font-size:1rem;transition:all .2s ease}input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent-blue);box-shadow:0 0 0 4px #3b82f61a}.badge{display:inline-flex;align-items:center;padding:4px 12px;border-radius:999px;font-weight:700;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em;box-shadow:var(--shadow-sm)}.badge.new{background:#dcfce7;color:#15803d}.badge.trending{background:#ffedd5;color:#c2410c}.badge.hot{background:#fee2e2;color:#b91c1c}.reveal-text{opacity:0;transform:translateY(20px)}.fade-in{opacity:0}.stagger-card{opacity:0;transform:translateY(30px)}.animate-fade-in{animation:fadeIn .6s cubic-bezier(.16,1,.3,1) forwards}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:#f1f5f9}::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:5px;border:2px solid #f1f5f9}::-webkit-scrollbar-thumb:hover{background:#94a3b8}.progress-track{background:#ffffff0f;height:8px;border-radius:999px;overflow:hidden}.progress-fill{height:100%;width:0%;background:var(--gradient-primary);transition:width .8s cubic-bezier(.34,1.56,.64,1);border-radius:999px}.badge{padding:4px 12px;border-radius:999px;font-weight:600;font-size:.75rem;text-transform:uppercase;letter-spacing:.05em}.badge.bronze{background:#451a03;color:#fb923c;border:1px solid rgba(251,146,60,.2)}.badge.silver{background:#1e293b;color:#cbd5e1;border:1px solid rgba(203,213,225,.2)}.badge.gold{background:#422006;color:#fbbf24;border:1px solid rgba(251,191,36,.2)}.badge.platinum{background:#064e3b;color:#34d399;border:1px solid rgba(52,211,153,.2)}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.animate-fade-in{animation:fadeIn .4s ease-out forwards}.select-filter{background-color:var(--bg-card);color:var(--text-primary);border:1px solid var(--border-subtle);border-radius:var(--radius-sm);padding:8px 32px 8px 12px;cursor:pointer;appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>");background-repeat:no-repeat;background-position:right 10px center}.select-filter:hover{border-color:var(--text-muted)}html[data-theme=dark] .dashboard-hero,html[data-theme=dark] .feature-card,html[data-theme=dark] .games-grid-modern .game-card,html[data-theme=dark] .pathway-details .field-card,html[data-theme=dark] .card{background:radial-gradient(circle at 0% 0%,#0f172af2,#0f172a),#020617;border-color:#1e40afb3;box-shadow:0 24px 60px #0f172a}html[data-theme=dark] .games-grid-modern .game-card .card-content,html[data-theme=dark] .dashboard-hero,html[data-theme=dark] .feature-card,html[data-theme=dark] .pathway-details .field-card{color:var(--text-primary)}html[data-theme=dark] .games-grid-modern .game-card .card-content p,html[data-theme=dark] .feature-card p,html[data-theme=dark] .pathway-details .field-card .overview{color:var(--text-secondary)}html[data-theme=dark] .card-image-placeholder{background:radial-gradient(circle at 50% 0%,rgba(129,140,248,.45),transparent 55%),radial-gradient(circle at 0% 100%,rgba(56,189,248,.18),transparent 55%),#020617}html[data-theme=dark] .stat-card-modern{background:radial-gradient(circle at 0% 0%,rgba(56,189,248,.18),transparent 55%),#020617;box-shadow:0 20px 50px #0f172a}html[data-theme=dark] .glass-panel{background:#0f172ae6;border-color:#1e40afcc;box-shadow:0 20px 50px #0f172a}html[data-theme=dark] .skill-row{background:radial-gradient(circle at 0% 0%,rgba(59,130,246,.18),transparent 55%),#020617}.auth-page{display:flex;min-height:100vh;width:100%;background:#fff}.auth-sidebar{display:none;flex:1;background:var(--gradient-primary);flex-direction:column;justify-content:center;align-items:center;color:#fff;padding:48px;position:relative;overflow:hidden}.auth-sidebar:before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E")}.auth-sidebar-content{position:relative;z-index:10;max-width:400px;text-align:center}.auth-sidebar h2{color:#fff;margin-bottom:16px;font-size:2.5rem}.auth-sidebar p{color:#ffffffe6;font-size:1.1rem}.auth-main{flex:1;display:flex;justify-content:center;align-items:center;padding:24px}.auth-container{width:100%;max-width:440px;padding:40px}.auth-container h1{font-size:2rem;margin-bottom:8px;color:var(--text-primary)}.auth-subtitle{color:var(--text-secondary);margin-bottom:32px;font-size:1rem}.auth-form .form-group{margin-bottom:20px}.auth-form label{display:block;margin-bottom:8px;font-weight:500;color:var(--text-primary);font-size:.9rem}.auth-form input{background:var(--bg-primary);border:1px solid var(--border-subtle);transition:all .3s}.auth-form input:focus{background:#fff;border-color:var(--accent-blue);box-shadow:0 0 0 4px #3b82f61a}.auth-footer{text-align:center;margin-top:24px;font-size:.9rem;color:var(--text-secondary)}.auth-link{color:var(--text-brand);font-weight:600;text-decoration:none}.auth-link:hover{text-decoration:underline}@media(min-width:900px){.auth-sidebar{display:flex}}.dashboard-landing{text-align:center;animation:fadeIn .8s ease-out}.hero-section{padding:80px 24px 60px;max-width:900px;margin:0 auto}.hero-pill{display:inline-block;background:#3b82f61a;color:var(--accent-blue);padding:8px 16px;border-radius:999px;font-weight:600;font-size:.85rem;margin-bottom:24px;text-transform:uppercase;letter-spacing:.05em}.hero-title{font-size:4rem;margin-bottom:24px;letter-spacing:-.03em}.text-gradient{background:var(--gradient-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.hero-subtitle{font-size:1.25rem;color:var(--text-secondary);margin-bottom:40px;max-width:600px;margin-left:auto;margin-right:auto}.hero-cta{display:flex;gap:16px;justify-content:center}.features-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:32px;padding:40px 24px 80px;max-width:var(--max-width);margin:0 auto}.feature-card{background:#fff;padding:32px;border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);border:1px solid var(--border-subtle);transition:transform .3s ease;text-align:center}.feature-card:hover{transform:translateY(-8px);box-shadow:var(--shadow-lg)}.feature-icon{font-size:3rem;margin-bottom:16px;display:inline-block}.dashboard-container{padding-bottom:60px}.dashboard-hero{background:#fff;border-radius:var(--radius-lg);padding:40px;margin-bottom:48px;display:flex;justify-content:space-between;align-items:center;box-shadow:var(--shadow-md);border:1px solid var(--border-subtle);background-image:radial-gradient(circle at 100% 0%,rgba(59,130,246,.08),transparent 40%)}.hero-text h2{font-size:2rem;margin-bottom:8px}.text-highlight{color:var(--accent-blue)}.hero-stats-row{display:flex;gap:32px}.mini-stat{display:flex;flex-direction:column;align-items:flex-end}.mini-stat .label{font-size:.85rem;color:var(--text-muted);text-transform:uppercase;font-weight:600;margin-bottom:4px}.mini-stat .value{font-size:2rem;font-weight:800;color:var(--text-primary);line-height:1}.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:32px}.filter-tabs{display:flex;gap:8px;background:#fff;padding:4px;border-radius:12px;border:1px solid var(--border-subtle)}.tab{padding:6px 16px;cursor:pointer;border-radius:8px;font-size:.9rem;font-weight:500;color:var(--text-secondary);transition:all .2s}.tab.active{background:var(--bg-primary);color:var(--text-primary);font-weight:600}.games-grid-modern{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:32px}.game-card{background:#fff;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-sm);border:1px solid var(--border-subtle);transition:all .4s cubic-bezier(.175,.885,.32,1.275);display:flex;flex-direction:column;height:100%}.game-card:hover{transform:translateY(-8px) scale(1.02);box-shadow:var(--shadow-lg),var(--shadow-glow);border-color:#3b82f64d}.card-image-placeholder{height:180px;background:linear-gradient(135deg,#f8fafc,#e2e8f0);display:flex;align-items:center;justify-content:center;position:relative}.game-emoji{font-size:5rem;filter:drop-shadow(0 10px 10px rgba(0,0,0,.1));transition:transform .4s ease}.game-card:hover .game-emoji{transform:scale(1.15) rotate(5deg)}.card-content{padding:24px;flex:1;display:flex;flex-direction:column}.card-content h3{font-size:1.25rem;margin-bottom:8px}.card-content p{font-size:.95rem;margin-bottom:20px;flex-grow:1}.play-btn-modern{width:100%;padding:12px;font-size:1rem;border-radius:var(--radius-md);opacity:.9}.card-image-placeholder .badge{position:absolute;top:16px;right:16px;box-shadow:0 4px 12px #0000001a}.game-wrapper-fullscreen{position:fixed;inset:0;z-index:2000;background:#0f172a;display:flex;flex-direction:column}.game-header-overlay{height:60px;display:flex;align-items:center;justify-content:space-between;padding:0 24px;background:#0f172ae6;color:#fff}.game-title-overlay{font-weight:700;color:#fff}.game-iframe-fullscreen{flex:1;border:none;width:100%;height:100%}.loader-container{display:flex;justify-content:center;align-items:center;height:50vh}.spinner{width:40px;height:40px;border:3px solid rgba(59,130,246,.3);border-radius:50%;border-top-color:var(--accent-blue);animation:spin 1s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}@media(max-width:768px){.hero-title{font-size:2.5rem}.dashboard-hero{flex-direction:column;align-items:flex-start;gap:24px;padding:24px}.hero-stats-row{width:100%;justify-content:space-between}.section-header{flex-direction:column;align-items:flex-start;gap:16px}.games-grid-modern{grid-template-columns:1fr;gap:24px}.filter-tabs{width:100%;justify-content:center}.hero-cta{flex-direction:column;width:100%}.hero-cta .btn{width:100%}.features-grid{grid-template-columns:1fr;padding:24px 16px}.page-container{padding:24px 16px!important}}@media(max-width:480px){.hero-title{font-size:2rem}.dashboard-hero{padding:20px}.hero-text h2{font-size:1.5rem}.games-grid-modern{gap:16px}.game-card{border-radius:var(--radius-md)}.card-content{padding:20px}}.pathway-details{max-width:1000px;margin:0 auto;padding:40px 24px}.pathway-details .guidance-header{text-align:center;margin-bottom:48px}.user-skill-summary{position:relative;margin-bottom:32px;padding:32px 28px;border-radius:var(--radius-xl);background:radial-gradient(circle at 0% 0%,rgba(252,165,165,.45),transparent 55%),radial-gradient(circle at 100% 0%,rgba(129,140,248,.4),transparent 55%),radial-gradient(circle at 0% 100%,rgba(52,211,153,.35),transparent 55%),#fee2f2;box-shadow:var(--shadow-lg)}.user-skill-summary h2{font-size:2.1rem;margin-bottom:24px;color:var(--text-primary)}.user-skill-summary .subtitle{color:var(--text-secondary)}html[data-theme=dark] .user-skill-summary{background:radial-gradient(circle at 0% 0%,rgba(251,113,133,.45),transparent 55%),radial-gradient(circle at 100% 0%,rgba(59,130,246,.5),transparent 55%),#020617;box-shadow:0 24px 50px #0f172a;color:#fff}.fields-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:24px}.field-card{background:#fff;border-radius:var(--radius-lg);padding:24px;box-shadow:var(--shadow-sm);border:1px solid var(--border-subtle);transition:transform .2s}.field-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}.field-card h3{color:var(--text-brand);margin-bottom:12px}.field-card .overview{color:var(--text-secondary);font-size:.95rem;margin-bottom:20px}.field-details{background:var(--bg-primary);padding:16px;border-radius:var(--radius-md);margin-bottom:20px;display:flex;flex-direction:column;gap:8px}.detail-item{display:flex;justify-content:space-between;font-size:.9rem}.detail-item strong{color:var(--text-primary)}.typical-work ul{padding-left:20px;color:var(--text-secondary);font-size:.9rem}.tag-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}.tag{background:var(--bg-primary);color:var(--text-secondary);padding:4px 10px;border-radius:99px;font-size:.8rem;font-weight:500}.btn-secondary{display:inline-block;color:var(--text-secondary);font-weight:600;transition:color .2s}.btn-secondary:hover{color:var(--text-brand)}@keyframes float{0%,to{transform:translateY(0) rotate(0);opacity:.7}50%{transform:translateY(-30px) rotate(5deg);opacity:.9}}@keyframes float-reverse{0%,to{transform:translateY(0) rotate(0);opacity:.6}50%{transform:translateY(30px) rotate(-5deg);opacity:.8}}@keyframes pulse-glow{0%,to{box-shadow:0 0 10px #ffc86480;transform:scale(1)}50%{box-shadow:0 0 30px #ffc864cc;transform:scale(1.1)}}@keyframes rotate-slow{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes shimmer{0%{background-position:-1000px 0}to{background-position:1000px 0}}@keyframes bounce-smooth{0%,to{transform:translateY(0)}50%{transform:translateY(-20px)}}@keyframes slide-in-left{0%{transform:translate(-100px);opacity:0}to{transform:translate(0);opacity:1}}@keyframes gradient-shift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.animated-bg-container{position:fixed;inset:0;background:linear-gradient(135deg,#ffd6e8,#b8e0ff,#fffacd,#ffb6d9,#87ceeb);background-size:400% 400%;animation:gradient-shift 15s ease infinite;overflow:hidden;z-index:0;pointer-events:none}html[data-theme=dark] .animated-bg-container{display:none}.floating-shape{position:absolute;border-radius:50%;animation:float 6s ease-in-out infinite}.floating-shape.star{width:60px;height:60px;animation:float 8s ease-in-out infinite;opacity:.8}.floating-shape.bubble-1{width:80px;height:80px;background:radial-gradient(circle at 30% 30%,#fffc,#ffc8644d);border:3px solid rgba(255,200,100,.4);top:10%;left:5%;animation:float 7s ease-in-out infinite}.floating-shape.bubble-2{width:120px;height:120px;background:radial-gradient(circle at 30% 30%,#ffffffb3,#64c8ff4d);border:3px solid rgba(100,200,255,.4);top:20%;right:10%;animation:float-reverse 8s ease-in-out infinite}.floating-shape.bubble-3{width:100px;height:100px;background:radial-gradient(circle at 30% 30%,#ffffffbf,#ffb6d94d);border:3px solid rgba(255,182,217,.4);bottom:15%;left:20%;animation:float 9s ease-in-out infinite}.floating-shape.bubble-4{width:90px;height:90px;background:radial-gradient(circle at 30% 30%,#fffc,#90ee904d);border:3px solid rgba(144,238,144,.4);bottom:20%;right:15%;animation:float-reverse 7s ease-in-out infinite}.star{display:inline-block;font-size:3rem;animation:float 7s ease-in-out infinite}.star-1{top:15%;left:12%;animation-delay:0s}.star-2{top:60%;right:8%;animation-delay:1s}.star-3{bottom:25%;left:8%;animation-delay:2s}.star-4{top:40%;left:15%;animation-delay:1.5s}.confetti{position:absolute;width:12px;height:12px;background-color:gold;opacity:.7;animation:fall 3s linear infinite}@keyframes fall{to{transform:translateY(100vh) rotate(360deg);opacity:0}}.glow-orb{position:absolute;border-radius:50%;filter:blur(40px);animation:pulse-glow 4s ease-in-out infinite}.glow-1{width:200px;height:200px;background:radial-gradient(circle,rgba(255,200,100,.6),transparent);top:-50px;right:-50px}.glow-2{width:300px;height:300px;background:radial-gradient(circle,rgba(100,200,255,.5),transparent);bottom:-100px;left:-100px}.bg-overlay{position:relative;z-index:1}@media(max-width:768px){.floating-shape,.floating-shape.bubble-1,.floating-shape.bubble-3{width:60px!important;height:60px!important}.floating-shape.bubble-2,.floating-shape.bubble-4{width:80px!important;height:80px!important}.star{font-size:2rem}}@media(prefers-reduced-motion:reduce){.floating-shape,.star,.glow-orb,.animated-bg-container{animation:none!important}.animated-bg-container{background:linear-gradient(135deg,#ffd6e8,#b8e0ff,#fffacd,#ffb6d9,#87ceeb)}}.container{position:relative;width:190px;height:254px;transition:.2s}.container:active{width:180px;height:245px}#card{position:absolute;inset:0;z-index:0;display:flex;justify-content:center;align-items:center;border-radius:20px;transition:.7s;background:linear-gradient(43deg,#4158d0,#c850c0 46%,#ffcc70)}.subtitle{transform:translateY(160px);color:#866edd;text-align:center;width:100%}.title{opacity:0;transition-duration:.3s;transition-timing-function:ease-in-out-out;transition-delay:.1s;position:absolute;font-size:x-large;font-weight:700;color:#fff}.tracker:hover~#card .title{opacity:1}#prompt{bottom:8px;left:12px;z-index:20;font-size:20px;font-weight:700;transition:.3s ease-in-out-out;position:absolute;max-width:110px;color:#fff}.tracker{position:absolute;z-index:200;width:100%;height:100%}.tracker:hover{cursor:pointer}.tracker:hover~#card #prompt{opacity:0}.tracker:hover~#card{transition:.3s;filter:brightness(1.1)}.container:hover #card:before{transition:.2s;content:"";opacity:80%}.canvas{perspective:800px;inset:0;z-index:200;position:absolute;display:grid;grid-template-columns:1fr 1fr 1fr 1fr 1fr;grid-template-rows:1fr 1fr 1fr 1fr 1fr;gap:0px 0px;grid-template-areas:"tr-1 tr-2 tr-3 tr-4 tr-5" "tr-6 tr-7 tr-8 tr-9 tr-10" "tr-11 tr-12 tr-13 tr-14 tr-15" "tr-16 tr-17 tr-18 tr-19 tr-20" "tr-21 tr-22 tr-23 tr-24 tr-25"}#card:before{content:"";background:linear-gradient(43deg,#4158d0,#c850c0 46%,#ffcc70);filter:blur(2rem);opacity:30%;width:100%;height:100%;position:absolute;z-index:-1;transition:.2s}.tr-1{grid-area:tr-1}.tr-2{grid-area:tr-2}.tr-3{grid-area:tr-3}.tr-4{grid-area:tr-4}.tr-5{grid-area:tr-5}.tr-6{grid-area:tr-6}.tr-7{grid-area:tr-7}.tr-8{grid-area:tr-8}.tr-9{grid-area:tr-9}.tr-10{grid-area:tr-10}.tr-11{grid-area:tr-11}.tr-12{grid-area:tr-12}.tr-13{grid-area:tr-13}.tr-14{grid-area:tr-14}.tr-15{grid-area:tr-15}.tr-16{grid-area:tr-16}.tr-17{grid-area:tr-17}.tr-18{grid-area:tr-18}.tr-19{grid-area:tr-19}.tr-20{grid-area:tr-20}.tr-21{grid-area:tr-21}.tr-22{grid-area:tr-22}.tr-23{grid-area:tr-23}.tr-24{grid-area:tr-24}.tr-25{grid-area:tr-25}.tr-1:hover~#card{transition:125ms ease-in-out;transform:rotateX(20deg) rotateY(-10deg) rotate(0)}.tr-2:hover~#card{transition:125ms ease-in-out;transform:rotateX(20deg) rotateY(-5deg) rotate(0)}.tr-3:hover~#card{transition:125ms ease-in-out;transform:rotateX(20deg) rotateY(0) rotate(0)}.tr-4:hover~#card{transition:125ms ease-in-out;transform:rotateX(20deg) rotateY(5deg) rotate(0)}.tr-5:hover~#card{transition:125ms ease-in-out;transform:rotateX(20deg) rotateY(10deg) rotate(0)}.tr-6:hover~#card{transition:125ms ease-in-out;transform:rotateX(10deg) rotateY(-10deg) rotate(0)}.tr-7:hover~#card{transition:125ms ease-in-out;transform:rotateX(10deg) rotateY(-5deg) rotate(0)}.tr-8:hover~#card{transition:125ms ease-in-out;transform:rotateX(10deg) rotateY(0) rotate(0)}.tr-9:hover~#card{transition:125ms ease-in-out;transform:rotateX(10deg) rotateY(5deg) rotate(0)}.tr-10:hover~#card{transition:125ms ease-in-out;transform:rotateX(10deg) rotateY(10deg) rotate(0)}.tr-11:hover~#card{transition:125ms ease-in-out;transform:rotateX(0) rotateY(-10deg) rotate(0)}.tr-12:hover~#card{transition:125ms ease-in-out;transform:rotateX(0) rotateY(-5deg) rotate(0)}.tr-13:hover~#card{transition:125ms ease-in-out;transform:rotateX(0) rotateY(0) rotate(0)}.tr-14:hover~#card{transition:125ms ease-in-out;transform:rotateX(0) rotateY(5deg) rotate(0)}.tr-15:hover~#card{transition:125ms ease-in-out;transform:rotateX(0) rotateY(10deg) rotate(0)}.tr-16:hover~#card{transition:125ms ease-in-out;transform:rotateX(-10deg) rotateY(-10deg) rotate(0)}.tr-17:hover~#card{transition:125ms ease-in-out;transform:rotateX(-10deg) rotateY(-5deg) rotate(0)}.tr-18:hover~#card{transition:125ms ease-in-out;transform:rotateX(-10deg) rotateY(0) rotate(0)}.tr-19:hover~#card{transition:125ms ease-in-out;transform:rotateX(-10deg) rotateY(5deg) rotate(0)}.tr-20:hover~#card{transition:125ms ease-in-out;transform:rotateX(-10deg) rotateY(10deg) rotate(0)}.tr-21:hover~#card{transition:125ms ease-in-out;transform:rotateX(-20deg) rotateY(-10deg) rotate(0)}.tr-22:hover~#card{transition:125ms ease-in-out;transform:rotateX(-20deg) rotateY(-5deg) rotate(0)}.tr-23:hover~#card{transition:125ms ease-in-out;transform:rotateX(-20deg) rotateY(0) rotate(0)}.tr-24:hover~#card{transition:125ms ease-in-out;transform:rotateX(-20deg) rotateY(5deg) rotate(0)}.tr-25:hover~#card{transition:125ms ease-in-out;transform:rotateX(-20deg) rotateY(10deg) rotate(0)}.noselect{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.game-card,.feature-card,.field-card{position:relative;transform-style:preserve-3d;perspective:800px;transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease,background .25s ease;will-change:transform,box-shadow}.game-card:before,.feature-card:before,.field-card:before{content:"";position:absolute;inset:0;border-radius:inherit;background:linear-gradient(43deg,#4158d0,#c850c0 46%,#ffcc70);filter:blur(32px);opacity:0;z-index:-1;transition:opacity .25s ease}.game-card:hover,.feature-card:hover,.field-card:hover{transform:translateY(-8px) scale(1.03);box-shadow:0 18px 40px #0f172a59;border-color:#4f46e580;background:radial-gradient(circle at 0% 0%,rgba(255,255,255,.08),transparent 55%),radial-gradient(circle at 100% 0%,rgba(129,140,248,.12),transparent 60%),var(--bg-card)}.game-card:hover:before,.feature-card:hover:before,.field-card:hover:before{opacity:.7}.wheel-and-hamster{--dur: 1s;position:relative;width:12em;height:12em;font-size:14px}.wheel,.hamster,.hamster div,.spoke{position:absolute}.wheel,.spoke{border-radius:50%;top:0;left:0;width:100%;height:100%}.wheel{background:radial-gradient(100% 100% at center,#9990 47.8%,#999 48%);z-index:2}.hamster{animation:hamster var(--dur) ease-in-out infinite;top:50%;left:calc(50% - 3.5em);width:7em;height:3.75em;transform:rotate(4deg) translate(-.8em,1.85em);transform-origin:50% 0;z-index:1}.hamster__head{animation:hamsterHead var(--dur) ease-in-out infinite;background:#f48c25;border-radius:70% 30% 0 100%/40% 25% 25% 60%;box-shadow:0 -.25em #facc9e inset,.75em -1.55em #fce6cf inset;top:0;left:-2em;width:2.75em;height:2.5em;transform-origin:100% 50%}.hamster__ear{animation:hamsterEar var(--dur) ease-in-out infinite;background:#fbb6b6;border-radius:50%;box-shadow:-.25em 0 #f48c25 inset;top:-.25em;right:-.25em;width:.75em;height:.75em;transform-origin:50% 75%}.hamster__eye{animation:hamsterEye var(--dur) linear infinite;background-color:#000;border-radius:50%;top:.375em;left:1.25em;width:.5em;height:.5em}.hamster__nose{background:#f98686;border-radius:35% 65% 85% 15%/70% 50% 50% 30%;top:.75em;left:0;width:.2em;height:.25em}.hamster__body{animation:hamsterBody var(--dur) ease-in-out infinite;background:#fce6cf;border-radius:50% 30%/15% 60% 40% 40%;box-shadow:.1em .75em #f48c25 inset,.15em -.5em #facc9e inset;top:.25em;left:2em;width:4.5em;height:3em;transform-origin:17% 50%;transform-style:preserve-3d}.hamster__limb--fr,.hamster__limb--fl{clip-path:polygon(0 0,100% 0,70% 80%,60% 100%,0% 100%,40% 80%);top:2em;left:.5em;width:1em;height:1.5em;transform-origin:50% 0}.hamster__limb--fr{animation:hamsterFRLimb var(--dur) linear infinite;background:linear-gradient(#facc9e 80%,#f98686 80%);transform:rotate(15deg) translateZ(-1px)}.hamster__limb--fl{animation:hamsterFLLimb var(--dur) linear infinite;background:linear-gradient(#fce6cf 80%,#fbb6b6 80%);transform:rotate(15deg)}.hamster__limb--br,.hamster__limb--bl{border-radius:.75em .75em 0 0;clip-path:polygon(0 0,100% 0,100% 30%,70% 90%,70% 100%,30% 100%,40% 90%,0% 30%);top:1em;left:2.8em;width:1.5em;height:2.5em;transform-origin:50% 30%}.hamster__limb--br{animation:hamsterBRLimb var(--dur) linear infinite;background:linear-gradient(#facc9e 90%,#f98686 90%);transform:rotate(-25deg) translateZ(-1px)}.hamster__limb--bl{animation:hamsterBLLimb var(--dur) linear infinite;background:linear-gradient(#fce6cf 90%,#fbb6b6 90%);transform:rotate(-25deg)}.hamster__tail{animation:hamsterTail var(--dur) linear infinite;background:#fbb6b6;border-radius:.25em 50% 50% .25em;box-shadow:0 -.2em #f98686 inset;top:1.5em;right:-.5em;width:1em;height:.5em;transform:rotate(30deg) translateZ(-1px);transform-origin:.25em .25em}.spoke{animation:spoke var(--dur) linear infinite;background:radial-gradient(100% 100% at center,#999 4.8%,#9990 5%),linear-gradient(#8c8c8c00 46.9%,#a6a6a6 47% 52.9%,#a6a6a600 53%) 50% 50% / 99% 99% no-repeat}@keyframes hamster{0%,to{transform:rotate(4deg) translate(-.8em,1.85em)}50%{transform:rotate(0) translate(-.8em,1.85em)}}@keyframes hamsterHead{0%,25%,50%,75%,to{transform:rotate(0)}12.5%,37.5%,62.5%,87.5%{transform:rotate(8deg)}}@keyframes hamsterEye{0%,90%,to{transform:scaleY(1)}95%{transform:scaleY(0)}}@keyframes hamsterEar{0%,25%,50%,75%,to{transform:rotate(0)}12.5%,37.5%,62.5%,87.5%{transform:rotate(12deg)}}@keyframes hamsterBody{0%,25%,50%,75%,to{transform:rotate(0)}12.5%,37.5%,62.5%,87.5%{transform:rotate(-2deg)}}@keyframes hamsterFRLimb{0%,25%,50%,75%,to{transform:rotate(50deg) translateZ(-1px)}12.5%,37.5%,62.5%,87.5%{transform:rotate(-30deg) translateZ(-1px)}}@keyframes hamsterFLLimb{0%,25%,50%,75%,to{transform:rotate(-30deg)}12.5%,37.5%,62.5%,87.5%{transform:rotate(50deg)}}@keyframes hamsterBRLimb{0%,25%,50%,75%,to{transform:rotate(-60deg) translateZ(-1px)}12.5%,37.5%,62.5%,87.5%{transform:rotate(20deg) translateZ(-1px)}}@keyframes hamsterBLLimb{0%,25%,50%,75%,to{transform:rotate(20deg)}12.5%,37.5%,62.5%,87.5%{transform:rotate(-60deg)}}@keyframes hamsterTail{0%,25%,50%,75%,to{transform:rotate(30deg) translateZ(-1px)}12.5%,37.5%,62.5%,87.5%{transform:rotate(10deg) translateZ(-1px)}}@keyframes spoke{0%{transform:rotate(0)}to{transform:rotate(-1turn)}}