:root{--radius: 14px;--radius-sm: 10px;--transition: .25s ease;--theme-transition: .4s ease;--shadow-soft: 0 4px 24px rgba(0, 0, 0, .08);--font-base: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;--font-display: "Segoe UI", system-ui, sans-serif}*{box-sizing:border-box}html,body{margin:0;padding:0;font-family:var(--font-base);background:var(--bg);color:var(--text);min-height:100vh;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}img,video,canvas{max-width:100%;display:block}h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;color:var(--text);margin:0 0 .5em;letter-spacing:-.01em}h1{font-size:2rem}h2{font-size:1.5rem}h3{font-size:1.2rem}h4{font-size:1rem}p{line-height:1.5;margin:0 0 .8em}a{color:var(--accent);text-decoration:none}a:hover{text-decoration:underline}button{font-family:inherit}[hidden]{display:none!important}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}[data-mode=dark]{--radius: 10px}.btn-primary,.btn-secondary,.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:12px 20px;border-radius:var(--radius-sm);border:1px solid transparent;font-weight:600;font-size:.95rem;cursor:pointer;transition:background-color var(--transition),color var(--transition),border-color var(--transition),transform .12s ease,box-shadow var(--transition);-webkit-user-select:none;user-select:none;font-family:inherit}.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}.btn-primary:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-1px)}[data-mode=dark] .btn-primary{text-shadow:0 0 8px currentColor}[data-mode=dark] .btn-primary:hover:not(:disabled){box-shadow:0 0 16px var(--accent)}.btn-secondary{background:var(--card2);color:var(--text);border-color:var(--border)}.btn-secondary:hover:not(:disabled){background:var(--card)}.btn-ghost{background:transparent;color:var(--text);border-color:transparent}.btn-ghost:hover:not(:disabled){background:var(--card2)}.btn-primary:disabled,.btn-secondary:disabled,.btn-ghost:disabled{opacity:.5;cursor:not-allowed}.btn-danger{background:var(--wrong);color:#fff;border:1px solid var(--wrong);padding:12px 20px;border-radius:var(--radius-sm);font-weight:700;cursor:pointer;transition:filter var(--transition)}.btn-danger:hover:not(:disabled){filter:brightness(1.08)}.input-field{width:100%;padding:12px 14px;border-radius:var(--radius-sm);border:1px solid var(--border);background:var(--card);color:var(--text);font-family:inherit;font-size:1rem;transition:border-color var(--transition),box-shadow var(--transition)}.input-field:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 25%,transparent)}.input-field[readonly]{background:var(--card2);color:var(--text-dim)}.input-row{display:flex;gap:10px;align-items:stretch}.input-row .input-field{flex:1 1 auto}.input-row .btn-primary,.input-row .btn-secondary{width:auto;flex-shrink:0}select.input-field{cursor:pointer}.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-soft);transition:transform var(--transition),box-shadow var(--transition)}.card-hover:hover{transform:translateY(-2px)}[data-mode=dark] .card-hover:hover{box-shadow:0 0 20px color-mix(in srgb,var(--accent) 35%,transparent)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#0000008c;display:flex;align-items:center;justify-content:center;z-index:100;padding:16px;animation:fade-in .18s ease}.modal{background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);padding:24px;max-width:720px;width:100%;max-height:90vh;overflow:auto;box-shadow:0 24px 60px #00000059;animation:pop-in .22s ease}.modal-header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}.modal-header h2{margin:0}.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:20px}@keyframes fade-in{0%{opacity:0}to{opacity:1}}@keyframes pop-in{0%{opacity:0;transform:scale(.97)}to{opacity:1;transform:scale(1)}}.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:999px;font-size:.8rem;font-weight:600;background:var(--card2);color:var(--text-dim);border:1px solid var(--border)}.badge-accent{background:color-mix(in srgb,var(--accent) 18%,transparent);color:var(--accent);border-color:var(--accent)}.timer-bar-bg{width:100%;height:6px;background:var(--card2);border-radius:999px;overflow:hidden}.timer-bar-fill{height:100%;background:var(--accent);border-radius:999px}.progress-bar{width:100%;height:8px;background:var(--card2);border-radius:999px;overflow:hidden}.progress-bar-fill{height:100%;background:linear-gradient(90deg,var(--accent),var(--accent2));transition:width var(--transition)}.img-cover{position:absolute;top:0;right:0;bottom:0;left:0;background:var(--card);opacity:1;pointer-events:none}.img-cover.revealed{opacity:0;transition:opacity .2s ease}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}.shake{animation:shake .42s ease}.feedback-correct{color:var(--correct);font-weight:700}.feedback-wrong{color:var(--wrong);font-weight:700}.feedback-hint{color:var(--hint);font-weight:600}.toast-root{position:fixed;bottom:24px;right:24px;display:flex;flex-direction:column;gap:8px;z-index:9000;pointer-events:none}.toast{background:var(--card);color:var(--text);border:1px solid var(--border);border-left:3px solid var(--accent);padding:10px 16px;border-radius:var(--radius-sm);box-shadow:0 8px 24px #0000002e;opacity:0;transform:translate(20px);transition:opacity .2s ease,transform .2s ease;max-width:360px}.toast.is-shown{opacity:1;transform:translate(0)}.toast-correct{border-left-color:var(--correct)}.toast-wrong{border-left-color:var(--wrong)}.toast-hint{border-left-color:var(--hint)}.unlock-banner{position:fixed;top:20px;left:50%;transform:translate(-50%,-150%);background:var(--card);border:1px solid var(--banner-color, var(--accent));border-left:4px solid var(--banner-color, var(--accent));border-radius:var(--radius);padding:14px 22px;box-shadow:0 12px 40px #00000052;z-index:10000;transition:transform .4s ease;min-width:320px;max-width:500px}.unlock-banner.is-shown{transform:translate(-50%)}.unlock-banner-head{font-size:.85rem;color:var(--text-dim);margin-bottom:6px;font-weight:600}.unlock-banner-body{display:flex;align-items:center;gap:12px}.unlock-banner-emoji{font-size:2rem}.unlock-banner-name{font-weight:700;color:var(--text)}.unlock-banner-desc{font-size:.85rem;color:var(--text-dim)}.unlock-legendary{background:linear-gradient(135deg,var(--card),color-mix(in srgb,gold 10%,var(--card)));border-color:gold;border-left-color:gold;animation:legendary-shimmer 2s linear infinite}@keyframes legendary-shimmer{0%,to{box-shadow:0 12px 40px #00000052,0 0 16px #ffd70066}50%{box-shadow:0 12px 40px #00000052,0 0 28px #ffd700bf}}.player-item{display:flex;align-items:center;gap:10px;padding:8px 12px;background:var(--card2);border-radius:var(--radius-sm);border:1px solid var(--border)}.player-name{font-weight:600}.player-name-host:after{content:"👑";margin-left:6px}.room-code-display{display:inline-flex;align-items:center;gap:8px;padding:8px 14px;background:var(--card2);border:1px dashed var(--border);border-radius:var(--radius-sm);font-family:ui-monospace,SF Mono,Menlo,monospace;font-size:1.2rem;letter-spacing:.15em;font-weight:700}.stack{display:flex;flex-direction:column;gap:12px}.row{display:flex;flex-direction:row;gap:12px;align-items:center}.spacer{flex:1 1 auto}:root[data-theme=pastel-doux]{--bg: #fdf2f8;--card: #ffffff;--card2: #fce7f3;--border: rgba(0, 0, 0, .06);--text: #2d3748;--text-dim: #8b7a8a;--text-muted: #c9b7c2;--accent: #f9c5d1;--accent2: #c8b6e2;--correct: #b5e2d4;--wrong: #f4a4ad;--hint: #fde4a6}:root[data-theme=pastel-pop]{--bg: #fef6f0;--card: #ffffff;--card2: #fff4ed;--border: rgba(0, 0, 0, .06);--text: #2d3748;--text-dim: #7a6b5d;--text-muted: #bfb0a0;--accent: #ff7e8a;--accent2: #4ecdc4;--correct: #6dd6a3;--wrong: #ff7e8a;--hint: #ffd93d}:root[data-theme=pastel-froid]{--bg: #f0f7ff;--card: #ffffff;--card2: #e6f0fa;--border: rgba(0, 0, 0, .06);--text: #2d3748;--text-dim: #6b7a8a;--text-muted: #a8b8c8;--accent: #a5d8ff;--accent2: #b5e8c5;--correct: #88ddaa;--wrong: #ffadad;--hint: #ffd8a8}:root[data-theme=neon-80s]{--bg: #0a1428;--card: #142142;--card2: #1a2a52;--border: rgba(109, 213, 244, .18);--text: #e8f0ff;--text-dim: #8aa8d4;--text-muted: #4a6090;--accent: #00e5ff;--accent2: #ff2e9a;--correct: #00ff9c;--wrong: #ff2e6a;--hint: #ffea00}:root[data-theme=synthwave]{--bg: #0f0a1e;--card: #1a1133;--card2: #251947;--border: rgba(255, 0, 110, .18);--text: #f0e6ff;--text-dim: #b8a4d4;--text-muted: #6a5285;--accent: #ff006e;--accent2: #fb5607;--correct: #06ffa5;--wrong: #ff3860;--hint: #ffbe0b}:root[data-theme=crt-arcade]{--bg: #050a05;--card: #0a1a0a;--card2: #102510;--border: rgba(57, 255, 20, .22);--text: #c8ffc8;--text-dim: #6abc6a;--text-muted: #2d5a2d;--accent: #39ff14;--accent2: #ffaa00;--correct: #39ff14;--wrong: #ff3030;--hint: #ffaa00;--font-display: ui-monospace, "SF Mono", Menlo, "Courier New", monospace}.hub-shell{min-height:100vh;display:flex;flex-direction:column}.hub-header{display:flex;align-items:center;justify-content:space-between;padding:18px 28px;background:var(--card);border-bottom:1px solid var(--border);gap:12px}.hub-logo{font-size:1.5rem;font-weight:800;letter-spacing:-.01em;line-height:1.1}.hub-logo small{display:block;font-size:.7rem;font-weight:600;color:var(--accent);letter-spacing:.18em}.hub-header-right{display:flex;align-items:center;gap:14px}.profile-chip{display:flex;align-items:center;gap:12px;padding:6px 12px 6px 6px;background:var(--card2);border-radius:999px;border:1px solid var(--border);cursor:pointer}.profile-chip-info{display:flex;flex-direction:column;line-height:1.15}.profile-chip-name{font-weight:700;font-size:.95rem}.profile-chip-title{font-size:.75rem;color:var(--text-dim)}.profile-chip-level{display:flex;align-items:center;gap:6px;font-size:.8rem;color:var(--text-dim)}.profile-chip-level .progress-bar{width:70px;height:6px}.hub-main{flex:1;padding:32px;max-width:1200px;margin:0 auto;width:100%}.hub-section-title{margin:0 0 18px;font-size:1.1rem;font-weight:600;color:var(--text-dim);text-transform:uppercase;letter-spacing:.1em}.hub-games-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px;margin-bottom:40px}.game-card{display:flex;flex-direction:column;gap:8px;background:var(--card);border:1px solid var(--border);border-left:4px solid var(--game-color, var(--accent));border-radius:var(--radius);padding:22px;cursor:pointer;text-align:left;font-family:inherit;color:inherit;transition:transform var(--transition),box-shadow var(--transition)}.game-card:hover{transform:translateY(-3px);box-shadow:0 10px 32px #0000002e}[data-mode=dark] .game-card:hover{box-shadow:0 0 24px color-mix(in srgb,var(--game-color, var(--accent)) 40%,transparent)}.game-card-icon{font-size:2.4rem;line-height:1}.game-card-name{font-size:1.2rem;font-weight:700}.game-card-desc{font-size:.9rem;color:var(--text-dim)}.game-card-meta{font-size:.78rem;color:var(--text-muted);margin-top:4px;display:flex;gap:10px;flex-wrap:wrap}.leaderboard{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:22px}.leaderboard-row{display:grid;grid-template-columns:32px 48px 1fr auto;align-items:center;gap:12px;padding:8px 10px;border-radius:var(--radius-sm)}.leaderboard-row+.leaderboard-row{margin-top:4px}.leaderboard-row:nth-child(odd){background:var(--card2)}.leaderboard-rank{text-align:center;font-weight:700;color:var(--text-dim)}.leaderboard-rank.gold{color:gold}.leaderboard-rank.silver{color:silver}.leaderboard-rank.bronze{color:#cd7f32}.leaderboard-name{font-weight:600}.leaderboard-title{font-size:.78rem;color:var(--text-dim)}.leaderboard-xp{font-weight:700;color:var(--accent);font-variant-numeric:tabular-nums}.hub-footer{text-align:center;padding:24px;color:var(--text-muted);font-size:.85rem}.theme-switcher{position:relative}.theme-switcher-btn{width:40px;height:40px;border-radius:50%;background:var(--card2);border:1px solid var(--border);cursor:pointer;font-size:1.2rem;display:flex;align-items:center;justify-content:center;transition:background-color var(--transition),transform .15s ease}.theme-switcher-btn:hover{transform:rotate(10deg)}.theme-popover{position:absolute;top:calc(100% + 8px);right:0;background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:16px;box-shadow:0 16px 40px #00000040;z-index:9999;width:320px}.theme-popover h4{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);margin:12px 0 8px}.theme-popover h4:first-child{margin-top:0}.theme-mode-row{display:flex;gap:4px;background:var(--card2);padding:4px;border-radius:var(--radius-sm)}.theme-mode-btn{flex:1;padding:8px;border:none;background:transparent;color:var(--text-dim);font-weight:600;cursor:pointer;border-radius:var(--radius-sm);font-size:.85rem;transition:background-color var(--transition),color var(--transition)}.theme-mode-btn.is-active{background:var(--card);color:var(--text)}.theme-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}.theme-preview{cursor:pointer;background:var(--preview-bg, var(--card2));border:1.5px solid var(--border);border-radius:var(--radius-sm);padding:8px;display:flex;flex-direction:column;gap:6px;align-items:center;transition:border-color var(--transition);position:relative}.theme-preview.is-active{border-color:var(--text)}.theme-preview-swatches{display:flex;gap:3px}.theme-preview-swatches span{width:14px;height:14px;border-radius:50%}.theme-preview-name{font-size:.78rem;font-weight:600;color:var(--preview-text, var(--text))}.theme-preview-check{position:absolute;top:4px;right:6px;font-size:.85rem}@media (max-width: 640px){.hub-header{padding:14px 16px;flex-wrap:wrap}.hub-main{padding:18px}.profile-chip-info{display:none}.theme-popover{right:-40px}}.avatar{display:inline-flex;align-items:center;justify-content:center;width:var(--avatar-size, 48px);height:var(--avatar-size, 48px);border-radius:50%;background:color-mix(in srgb,var(--avatar-color, var(--accent)) 22%,var(--card));border:2px solid var(--avatar-border, var(--avatar-color, var(--accent)));overflow:hidden;font-size:calc(var(--avatar-size, 48px) * .55);line-height:1;-webkit-user-select:none;user-select:none;flex-shrink:0;position:relative;color:var(--text)}.avatar-emoji{background-clip:padding-box}.avatar-photo img{width:100%;height:100%;object-fit:cover}.avatar-glow{filter:drop-shadow(0 0 6px var(--avatar-border, var(--accent)))}.avatar-legendary:after{content:"";position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px;border-radius:50%;background:conic-gradient(from 0deg,gold,#ff7a00,gold,gold,gold);z-index:-1;animation:legendary-rotate 6s linear infinite}.avatar-legendary{filter:drop-shadow(0 0 8px rgba(255,215,0,.5))}@keyframes legendary-rotate{to{transform:rotate(360deg)}}.avatar-webcam-modal{max-width:520px}.avatar-webcam-stage{position:relative;width:100%;aspect-ratio:1 / 1;background:#000;border-radius:var(--radius);overflow:hidden;margin-bottom:12px}.avatar-webcam-stage video{width:100%;height:100%;object-fit:cover;transform:scaleX(-1)}.avatar-webcam-error{background:color-mix(in srgb,var(--wrong) 18%,transparent);color:var(--wrong);padding:10px 14px;border-radius:var(--radius-sm);margin-bottom:12px;font-size:.9rem}.avatar-webcam-actions{display:flex;gap:10px;justify-content:flex-end}.profile-section{margin-bottom:24px}.profile-section h3{font-size:.85rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-dim);margin-bottom:10px}.profile-current{display:flex;align-items:center;gap:16px;padding:12px;background:var(--card2);border-radius:var(--radius);margin-bottom:12px}.profile-actions{display:flex;gap:8px;flex-wrap:wrap}.emoji-grid{display:grid;grid-template-columns:repeat(10,1fr);gap:4px}@media (max-width: 640px){.emoji-grid{grid-template-columns:repeat(8,1fr)}}.emoji-btn{aspect-ratio:1;font-size:1.3rem;background:var(--card2);border:1px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;transition:background-color var(--transition),border-color var(--transition),transform .12s ease}.emoji-btn:hover{transform:scale(1.08)}.emoji-btn.is-active{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 18%,transparent)}.color-palette{display:flex;gap:8px;flex-wrap:wrap}.titles-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;flex-wrap:wrap;gap:10px}.titles-count{font-weight:600;color:var(--text-dim)}.titles-controls{display:flex;gap:8px}.titles-controls select{padding:8px 10px;background:var(--card2);border:1px solid var(--border);border-radius:var(--radius-sm);color:var(--text);font-family:inherit;cursor:pointer}.titles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}.title-card{display:flex;flex-direction:column;gap:6px;padding:14px;background:var(--card2);border:1px solid var(--border);border-radius:var(--radius);text-align:left;font-family:inherit;color:inherit;cursor:pointer;position:relative;transition:transform var(--transition),border-color var(--transition)}.title-card:hover:not(:disabled){transform:translateY(-2px)}.title-card.is-locked{opacity:.55;cursor:not-allowed;filter:grayscale(.5)}.title-card.is-active{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}.title-card-emoji{font-size:1.6rem}.title-card-name{font-weight:700}.title-card-desc{font-size:.82rem;color:var(--text-dim);min-height:2.4em}.title-card-rarity{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;font-weight:600;margin-top:auto}.title-common .title-card-rarity{color:#a0a0a0}.title-rare{border-color:color-mix(in srgb,var(--accent) 38%,transparent)}.title-rare .title-card-rarity{color:var(--accent)}.title-epic{border-color:color-mix(in srgb,var(--accent2) 38%,transparent)}.title-epic .title-card-rarity{color:var(--accent2)}.title-legendary{border-color:gold;background:color-mix(in srgb,gold 8%,var(--card2))}.title-legendary .title-card-rarity{color:gold}.title-card-active{position:absolute;top:8px;right:10px;font-size:.7rem;background:var(--accent);color:#fff;padding:2px 8px;border-radius:999px;font-weight:700;text-transform:uppercase;letter-spacing:.08em}.stats-modal{max-width:760px}.stats-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.stats-tabs{display:flex;gap:4px;background:var(--card2);padding:4px;border-radius:var(--radius-sm);margin-bottom:18px;overflow-x:auto}.stats-tab{flex:1;padding:10px 14px;background:transparent;border:none;cursor:pointer;color:var(--text-dim);font-weight:600;border-radius:var(--radius-sm);white-space:nowrap;font-family:inherit;transition:background-color var(--transition),color var(--transition)}.stats-tab.is-active{background:var(--card);color:var(--text)}.stats-overview{display:flex;gap:18px;align-items:center;margin-bottom:14px}.stats-overview-text{flex:1}.stats-name{font-size:1.4rem;font-weight:800}.stats-tier{color:var(--text-dim);margin-bottom:12px}.stats-progress-text{font-size:.82rem;color:var(--text-dim);margin-top:6px}.stats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}.stats-grid>div{background:var(--card2);padding:10px;border-radius:var(--radius-sm);text-align:center}.stats-grid strong{display:block;font-size:1.3rem}.stats-grid span{font-size:.78rem;color:var(--text-dim)}.stats-games{display:flex;flex-direction:column;gap:12px}.stats-game-row{padding:12px 14px;background:var(--card2);border-radius:var(--radius)}.stats-game-title{font-weight:700}.stats-game-meta{font-size:.85rem;color:var(--text-dim);margin:4px 0 6px}.stats-game-level{font-size:.85rem;margin-bottom:6px}.level-mini{display:flex;flex-direction:column;gap:4px;min-width:90px}.level-mini-text{font-size:.75rem;font-weight:600;color:var(--text-dim)}.level-mini .progress-bar{width:100%;height:5px}.tier-pill{display:inline-flex;align-items:center;gap:4px;padding:2px 8px;border-radius:999px;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;border:1px solid currentColor;color:var(--tier-color, var(--text-dim))}@keyframes xp-pop{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.xp-pop{animation:xp-pop .3s ease}