:root{--bg:#111;--surface:#222;--surface2:#444;--text:#fff;--accent:#0a5;--accentText:#fff;--latest:#f59e0b;--latestText:#111}body.light{--bg:#f3f4f6;--surface:#fff;--surface2:#d1d5db;--text:#111827;--accent:#22c55e;--accentText:#fff;--latest:#f59e0b;--latestText:#111827}body.catppuccin{--bg:#1e1e2e;--surface:#313244;--surface2:#45475a;--text:#cdd6f4;--accent:#a6e3a1;--accentText:#1e1e2e;--latest:#f9e2af;--latestText:#1e1e2e}body.nord{--bg:#2e3440;--surface:#3b4252;--surface2:#4c566a;--text:#eceff4;--accent:#88c0d0;--accentText:#2e3440;--latest:#ebcb8b;--latestText:#2e3440}body.tokyonight{--bg:#1a1b26;--surface:#24283b;--surface2:#414868;--text:#c0caf5;--accent:#7aa2f7;--accentText:#1a1b26;--latest:#e0af68;--latestText:#1a1b26}body.onedark{--bg:#282c34;--surface:#21252b;--surface2:#3b4048;--text:#abb2bf;--accent:#61afef;--accentText:#282c34;--latest:#e5c07b;--latestText:#282c34}body.horizons{--bg:#f4efe5;--surface:#fbf8f2;--surface2:#d9cbb8;--text:#101010;--accent:#3d3f7d;--accentText:#fff;--latest:#ef5b93;--latestText:#fff}body.hackclub{--bg:#1d1c22;--surface:#2a2930;--surface2:#3a3841;--text:#f2f2f2;--accent:#f23350;--accentText:#fff;--latest:#59b3d0;--latestText:#fff}*{box-sizing:border-box;margin:0;padding:0;font-family:Arial,Helvetica,sans-serif}body{background:var(--bg);min-height:100vh;color:var(--text);justify-content:center;padding:20px;display:flex}.container{flex-direction:column;width:100%;max-width:1100px;display:flex}h1{text-align:center;margin-bottom:20px;font-size:40px}.toolbar{flex-wrap:wrap;justify-content:center;align-items:center;gap:12px;margin-bottom:20px;display:flex}.toolbar label{color:var(--text);font-size:16px;font-weight:700}.current{background:var(--surface);border:3px solid var(--surface2);border-radius:15px;justify-content:center;align-items:center;height:170px;margin-bottom:20px;font-size:90px;font-weight:700;transition:all .3s;display:flex}.current.animate{color:var(--accent);transform:scale(1.15)}.buttons{flex-wrap:wrap;justify-content:center;gap:15px;margin-bottom:25px;display:flex}button{cursor:pointer;background:var(--surface2);color:var(--text);border:none;border-radius:10px;padding:15px 30px;font-size:20px;transition:all .2s}button:hover{background:#666}.board{grid-template-columns:repeat(10,1fr);gap:8px;margin-bottom:30px;display:grid}.cell{background:var(--surface);text-align:center;border:1px solid var(--surface2);color:var(--text);border-radius:8px;padding:12px;font-weight:700}.drawn{background:var(--accent);color:var(--accentText)}.latest{background:var(--latest);color:var(--latestText)}.progress-container{margin-bottom:20px}.progress-bar{background:var(--surface2);border-radius:999px;width:100%;height:12px;overflow:hidden}.history{background:var(--surface);border-radius:10px;padding:20px}.history h2{margin-bottom:10px}.historyList{flex-wrap:wrap;gap:8px;display:flex}.historyItem{background:var(--surface2);border-radius:8px;padding:8px 12px;font-weight:700}canvas{pointer-events:none;position:fixed;top:0;left:0}.footer{text-align:center;margin-top:30px;padding:20px 0}.footer a{color:var(--accent);font-weight:600;text-decoration:none}.footer a:hover{text-decoration:underline}#themeSelect{appearance:none;color:var(--text);background:var(--surface);border:2px solid var(--surface2);cursor:pointer;border-color:var(--accent);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M1.5 5l6.5 6 6.5-6' stroke='white' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;background-size:14px;border-radius:10px;outline:none;padding:10px 40px 10px 14px;font-size:16px;font-weight:600;transition:all .2s}#themeSelect:focus{border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 30%, transparent)}#themeSelect option{background:var(--surface);color:var(--text)}#fullscreenBtn{padding:10px 15px;font-size:20px}#progressFill{background:var(--accent);width:0%;height:100%;transition:width .3s}#progressText{text-align:center;margin-top:8px;font-weight:700}@media (width<=700px){.board{grid-template-columns:repeat(5,1fr)}.current{height:130px;font-size:70px}.toolbar{justify-content:space-between}#themeSelect{width:180px}}