:root{--color-bg: #ffffff;--color-bg-secondary: #f5f5f5;--color-surface: #ffffff;--color-border: #d3d6da;--color-text: #1a1a2e;--color-text-muted: #787c7e;--color-correct: #6aaa64;--color-present: #c9b458;--color-absent: #787c7e;--color-absent-bg: #d3d6da;--color-key-bg: #d3d6da;--color-key-text: #1a1a2e;--color-accent: #538d4e;--radius: 4px;--font: "Segoe UI", system-ui, sans-serif}@media (prefers-color-scheme: dark){:root{--color-bg: #121213;--color-bg-secondary: #1a1a2e;--color-surface: #1a1a2e;--color-border: #3a3a3c;--color-text: #ffffff;--color-text-muted: #818384;--color-absent-bg: #3a3a3c;--color-key-bg: #818384;--color-key-text: #ffffff}}[data-theme=dark]{--color-bg: #121213;--color-bg-secondary: #1a1a2e;--color-surface: #1a1a2e;--color-border: #3a3a3c;--color-text: #ffffff;--color-text-muted: #818384;--color-absent-bg: #3a3a3c;--color-key-bg: #818384;--color-key-text: #ffffff}[data-theme=light]{--color-bg: #ffffff;--color-bg-secondary: #f5f5f5;--color-surface: #ffffff;--color-border: #d3d6da;--color-text: #1a1a2e;--color-text-muted: #787c7e;--color-absent-bg: #d3d6da;--color-key-bg: #d3d6da;--color-key-text: #1a1a2e}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body{height:100%;background:var(--color-bg);color:var(--color-text);font-family:var(--font);font-size:16px}#app{display:flex;flex-direction:column;height:100%}nav{display:flex;align-items:center;justify-content:space-between;padding:0 16px;height:52px;border-bottom:1px solid var(--color-border);background:var(--color-bg)}nav .logo{font-weight:700;font-size:1.1rem;letter-spacing:1px;text-decoration:none;color:var(--color-text)}nav .nav-links{display:flex;gap:12px;list-style:none}nav .nav-links a{text-decoration:none;color:var(--color-text-muted);font-size:.9rem;padding:4px 8px;border-radius:var(--radius);transition:color .15s,background .15s}nav .nav-links a:hover,nav .nav-links a.active{color:var(--color-text);background:var(--color-bg-secondary)}nav .nav-right{display:flex;align-items:center;gap:8px}main{flex:1;overflow-y:auto;padding:20px 16px;max-width:960px;width:100%;margin:0 auto}button{cursor:pointer;border:none;border-radius:var(--radius);font-family:var(--font);font-size:.9rem;padding:8px 16px;transition:opacity .15s,transform .1s}button:active{transform:scale(.97)}button:disabled{opacity:.5;cursor:not-allowed}.btn-primary{background:var(--color-correct);color:#fff;font-weight:600}.btn-secondary{background:var(--color-key-bg);color:var(--color-key-text)}.login-page{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100%;gap:24px}.login-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;padding:32px;width:100%;max-width:360px;display:flex;flex-direction:column;gap:16px}.login-card h1{font-size:1.4rem;text-align:center;letter-spacing:2px}.login-card label{font-size:.85rem;color:var(--color-text-muted);margin-bottom:4px;display:block}.login-card select,.login-card input{width:100%;padding:10px 12px;border:1px solid var(--color-border);border-radius:var(--radius);background:var(--color-bg);color:var(--color-text);font-size:1rem;font-family:var(--font)}.login-card .error{color:#e53e3e;font-size:.85rem}.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:16px;margin-top:8px}.game-card{background:var(--color-surface);border:2px solid var(--color-border);border-radius:8px;padding:20px;cursor:pointer;transition:border-color .15s,box-shadow .15s;display:flex;flex-direction:column;gap:8px}.game-card:hover{border-color:var(--color-correct);box-shadow:0 2px 12px #6aaa6426}.game-card.done{border-color:var(--color-correct)}.game-card.failed{border-color:var(--color-absent)}.game-card .game-name{font-weight:700;font-size:1rem;letter-spacing:1px}.game-card .game-status{font-size:.85rem;color:var(--color-text-muted)}.game-card .game-score{font-size:1.2rem;font-weight:700}.grid-container{display:flex;flex-direction:column;align-items:center;gap:4px;margin:0 auto}.grid-row{display:flex;gap:4px}.grid-tile{width:52px;height:52px;border:2px solid var(--color-border);display:flex;align-items:center;justify-content:center;font-size:1.2rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;border-radius:2px;transition:border-color .1s;-webkit-user-select:none;user-select:none}.grid-tile.filled{border-color:var(--color-text-muted);animation:pop .1s ease-in-out}.grid-tile.correct{background:var(--color-correct);border-color:var(--color-correct);color:#fff}.grid-tile.present{background:var(--color-present);border-color:var(--color-present);color:#fff}.grid-tile.absent{background:var(--color-absent-bg);border-color:var(--color-absent-bg);color:var(--color-text)}.grid-tile.shake{animation:shake .4s ease}.grid-tile.bounce{animation:bounce .4s ease}.grid-container.small .grid-tile{width:36px;height:36px;font-size:.85rem}.keyboard{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 0;max-width:500px;margin:0 auto}.keyboard-row{display:flex;gap:5px;justify-content:center}.key{height:56px;min-width:36px;padding:0 6px;background:var(--color-key-bg);color:var(--color-key-text);border:none;border-radius:4px;font-size:.75rem;font-weight:700;cursor:pointer;display:flex;align-items:center;justify-content:center;text-transform:uppercase;transition:background .2s,color .2s;-webkit-user-select:none;user-select:none}.key.wide{min-width:56px;font-size:.7rem}.key.digraph{min-width:48px}.key.correct{background:var(--color-correct);color:#fff}.key.present{background:var(--color-present);color:#fff}.key.absent{background:var(--color-absent);color:#fff}.toast-container{position:fixed;top:72px;left:50%;transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;z-index:999;pointer-events:none}.toast{background:var(--color-text);color:var(--color-bg);padding:10px 20px;border-radius:4px;font-size:.9rem;font-weight:600;animation:fadeInOut 2s ease forwards}.timer{font-size:.85rem;color:var(--color-text-muted);display:flex;align-items:center;gap:4px;font-variant-numeric:tabular-nums}.timer.paused{opacity:.5}.play-page{display:flex;flex-direction:column;align-items:center;gap:12px;height:100%}.play-header{display:flex;align-items:center;justify-content:space-between;width:100%;max-width:500px;padding:8px 0}.play-header h2{font-size:1rem;letter-spacing:2px}.catchup-badge{background:#e53e3e;color:#fff;font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:10px;letter-spacing:1px}.day-header{display:flex;align-items:center;gap:12px;margin-bottom:16px}.day-header h2{font-size:1.1rem}.day-grids{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:24px}.user-day-card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;padding:16px}.user-day-card h3{font-size:.9rem;margin-bottom:12px;color:var(--color-text-muted)}.history-calendar{display:grid;grid-template-columns:repeat(7,1fr);gap:4px}.cal-day{aspect-ratio:1;border-radius:var(--radius);background:var(--color-bg-secondary);display:flex;align-items:center;justify-content:center;font-size:.8rem;cursor:pointer;position:relative;transition:background .1s}.cal-day:hover{background:var(--color-border)}.cal-day.full{background:var(--color-correct);color:#fff}.cal-day.partial{background:var(--color-present)}.cal-day.missing:after{content:"";position:absolute;bottom:3px;right:3px;width:5px;height:5px;border-radius:50%;background:#e53e3e}.stats-section{margin-bottom:32px}.stats-section h3{font-size:.85rem;text-transform:uppercase;letter-spacing:1px;color:var(--color-text-muted);margin-bottom:12px}.stats-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:12px}.stat-box{background:var(--color-surface);border:1px solid var(--color-border);border-radius:8px;padding:16px;text-align:center}.stat-box .value{font-size:2rem;font-weight:700}.stat-box .label{font-size:.75rem;color:var(--color-text-muted);margin-top:4px}.summary-box{background:var(--color-bg-secondary);border:1px solid var(--color-border);border-radius:8px;padding:16px;font-family:monospace;font-size:.9rem;white-space:pre;margin-bottom:12px}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.1)}to{transform:scale(1)}}@keyframes bounce{0%,to{transform:translateY(0)}40%{transform:translateY(-20px)}60%{transform:translateY(-10px)}}@keyframes shake{0%,to{transform:translate(0)}20%{transform:translate(-6px)}40%{transform:translate(6px)}60%{transform:translate(-4px)}80%{transform:translate(4px)}}@keyframes fadeInOut{0%{opacity:0;transform:translateY(-8px)}15%{opacity:1;transform:translateY(0)}75%{opacity:1}to{opacity:0}}@media (max-width: 480px){.grid-tile{width:44px;height:44px;font-size:1rem}.key{height:48px;min-width:30px;font-size:.65rem}.games-grid{grid-template-columns:1fr 1fr}}