:root{--bg-primary: #121213;--bg-secondary: #1a1a1b;--bg-tile: #3a3a3c;--bg-tile-active: #565758;--color-correct: #538d4e;--color-present: #b59f3b;--color-absent: #3a3a3c;--text-primary: #ffffff;--text-secondary: #818384;--text-tile: #ffffff;--key-bg: #818384;--key-text: #ffffff;--border-tile: #3a3a3c;--border-tile-active: #565758;--toast-bg: #ffffff;--toast-text: #121213;--font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--tile-size: 58px;--tile-gap: 5px;--key-height: 58px;--border-radius: 4px;--transition-flip: .5s}*{margin:0;padding:0;box-sizing:border-box}body{font-family:var(--font-family);background:var(--bg-primary);color:var(--text-primary);min-height:100dvh;-webkit-user-select:none;user-select:none}#root{display:flex;flex-direction:column;align-items:center;min-height:100dvh}button{font-family:inherit;cursor:pointer;border:none;outline:none}.tile{width:var(--tile-size);height:var(--tile-size);display:flex;align-items:center;justify-content:center;font-size:2rem;font-weight:700;text-transform:uppercase;border:2px solid var(--border-tile);border-radius:var(--border-radius);color:var(--text-tile);background:transparent;transition:transform var(--transition-flip);transform-style:preserve-3d}.tile--active{border-color:var(--border-tile-active)}.tile--correct{background:var(--color-correct);border-color:var(--color-correct)}.tile--present{background:var(--color-present);border-color:var(--color-present)}.tile--absent{background:var(--color-absent);border-color:var(--color-absent)}.tile--flip{animation:flip .5s ease forwards}@keyframes flip{0%{transform:rotateX(0)}50%{transform:rotateX(90deg)}to{transform:rotateX(0)}}.grid{display:grid;grid-template-rows:repeat(6,1fr);gap:var(--tile-gap);padding:10px}.grid-row{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--tile-gap)}.keyboard{width:100%;max-width:500px;padding:8px;display:flex;flex-direction:column;gap:6px}.keyboard-row{display:flex;justify-content:center;gap:4px}.key{height:var(--key-height);min-width:30px;padding:0 6px;border-radius:var(--border-radius);background:var(--key-bg);color:var(--key-text);font-size:.85rem;font-weight:600;display:flex;align-items:center;justify-content:center;flex:1;max-width:44px;transition:background .2s}.key--wide{max-width:65px;font-size:.75rem}.key--correct{background:var(--color-correct)}.key--present{background:var(--color-present)}.key--absent{background:var(--color-absent)}.toast{position:fixed;top:60px;left:50%;transform:translate(-50%);background:var(--toast-bg);color:var(--toast-text);padding:12px 20px;border-radius:6px;font-weight:600;font-size:.9rem;z-index:100;animation:toast-in .2s ease}@keyframes toast-in{0%{opacity:0;transform:translate(-50%) translateY(-10px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.game{display:flex;flex-direction:column;align-items:center;justify-content:space-between;flex:1;width:100%;max-width:500px;padding:8px 0}.header{width:100%;display:flex;align-items:center;justify-content:center;position:relative;padding:12px;font-size:1.5rem;font-weight:700;letter-spacing:.1em;border-bottom:1px solid var(--bg-tile)}.header-profile{position:absolute;right:12px;background:var(--bg-tile);color:var(--text-primary);padding:6px 12px;border-radius:16px;font-size:.75rem;font-weight:600}.header-timer{position:absolute;left:12px;font-size:.7rem;font-weight:600;color:var(--text-secondary);letter-spacing:0;font-variant-numeric:tabular-nums}.cooldown{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;flex:1;text-align:center}.cooldown-timer{font-size:3rem;font-weight:700;font-variant-numeric:tabular-nums}.result{display:flex;flex-direction:column;align-items:center;gap:12px;padding:20px;text-align:center}.result-title{font-size:1.3rem;font-weight:700}.result-answer{font-size:1.1rem;color:var(--text-secondary);text-transform:uppercase;letter-spacing:.2em}.result-xp{color:var(--color-correct);font-weight:600}.result-subtitle{font-size:.9rem;color:var(--text-secondary)}.result-actions{display:flex;flex-direction:column;gap:8px;align-items:center;margin-top:4px}.btn--secondary{background:var(--bg-tile)}.btn{padding:14px 28px;border-radius:30px;background:var(--color-correct);color:var(--text-primary);font-size:1rem;font-weight:600;margin-top:8px}.idle{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;flex:1}.xp-bar-container{width:100%;max-width:200px}.xp-bar{width:100%;height:8px;background:var(--bg-tile);border-radius:4px;overflow:hidden}.xp-bar-fill{height:100%;background:var(--color-correct);border-radius:4px;transition:width .8s ease}.xp-bar--animate .xp-bar-fill{animation:xp-grow 1s ease forwards}@keyframes xp-grow{0%{width:0}}.xp-bar-label{font-size:.75rem;color:var(--text-secondary);text-align:center;margin-top:4px}.xp-bar-remaining{font-size:.7rem;color:var(--text-secondary);text-align:center;margin-top:2px}.result-xp-section{display:flex;flex-direction:column;align-items:center;gap:8px}.result-levelup{color:var(--color-present);font-weight:700;font-size:1.1rem;animation:levelup-pulse .6s ease}@keyframes levelup-pulse{0%,to{transform:scale(1)}50%{transform:scale(1.3)}}.profile-overlay{position:fixed;inset:0;background:#000000b3;display:flex;align-items:center;justify-content:center;z-index:200;animation:fade-in .2s ease}@keyframes fade-in{0%{opacity:0}to{opacity:1}}.profile{background:var(--bg-secondary);border-radius:16px;padding:24px;width:90%;max-width:320px;position:relative;display:flex;flex-direction:column;align-items:center;gap:16px}.profile-close{position:absolute;top:12px;right:12px;background:none;color:var(--text-secondary);font-size:1.2rem}.profile-level{font-size:1.5rem;font-weight:700}.profile-stats{display:flex;gap:16px;width:100%;justify-content:center}.stat{display:flex;flex-direction:column;align-items:center;gap:2px}.stat-value{font-size:1.3rem;font-weight:700}.stat-label{font-size:.7rem;color:var(--text-secondary);text-transform:uppercase}