@import "https://fonts.googleapis.com/css2?family=Caveat:wght@400;600;700&family=Inter:wght@400;500;600;700;800&display=swap";
*,:before,:after{box-sizing:border-box;margin:0;padding:0}html{scroll-behavior:smooth;overflow-x:hidden}body{overflow-x:hidden}:root{--wb-bg:#fafaf7;--wb-paper:#fafaf7;--wb-paper-alt:#f5f5f0;--wb-surface:#ffffffc7;--wb-surface-strong:#ffffffe6;--wb-ink:#1a1a2e;--wb-ink-light:#4a4a6a;--wb-ink-faint:#99a;--wb-grid:#e8e8e4;--wb-border:#2d2d2d;--wb-correct:#2d6a4f;--wb-correct-bg:#b7e4c7;--wb-present:#b5760a;--wb-present-bg:#ffe08a;--wb-absent:#4a4a6a;--wb-absent-bg:#dddde0;--wb-indigo:#4f46e5;--wb-blue:#2563eb;--wb-purple:#7c3aed;--wb-red:#dc2626;--wb-amber:#d97706;--shadow-sm:2px 2px 0 #2d2d2d;--shadow-md:3px 3px 0 #2d2d2d;--shadow-lg:5px 5px 0 #2d2d2d;--wb-board-size:clamp(44px, 14vw, 56px);--wb-key-height:clamp(44px, 11vw, 56px)}[data-theme=dark]{--wb-bg:#0c0e12;--wb-paper:#12161f;--wb-paper-alt:#1a1f2b;--wb-surface:#12161fd1;--wb-surface-strong:#161c26f5;--wb-ink:#fff;--wb-ink-light:#aab4c8;--wb-ink-faint:#6b768c;--wb-grid:#ffffff0a;--wb-border:#2d3545;--wb-correct:#4ade80;--wb-correct-bg:#064e3b;--wb-present:#facc15;--wb-present-bg:#422006;--wb-absent:#94a3b8;--wb-absent-bg:#1e293b;--wb-indigo:#818cf8;--wb-blue:#60a5fa;--wb-purple:#c084fc;--wb-red:#f87171;--wb-amber:#fbbf24;--shadow-sm:0 1px 0 #ffffff14, 0 8px 18px #00000038;--shadow-md:0 1px 0 #ffffff1a, 0 12px 28px #00000047;--shadow-lg:0 1px 0 #ffffff1f, 0 18px 44px #00000057}.wb-btn{border:2.5px solid var(--wb-border);cursor:pointer;background:var(--wb-paper);box-shadow:var(--shadow-md);color:var(--wb-ink);border-radius:8px;justify-content:center;align-items:center;gap:8px;padding:12px 28px;font-family:Caveat,cursive;font-size:1.2rem;font-weight:700;text-decoration:none;transition:transform .1s,box-shadow .1s;display:inline-flex}.wb-btn:hover{box-shadow:var(--shadow-lg);transform:translate(-2px,-2px)}.wb-btn:active{box-shadow:none;transform:translate(1px,1px)}.wb-btn:disabled{opacity:.6;cursor:not-allowed;transform:none}.wb-btn-primary{background:var(--wb-ink);color:var(--wb-paper)}.wb-btn-blue{background:var(--wb-blue);color:#fff;border-color:var(--wb-blue)}.wb-btn-indigo{background:var(--wb-indigo);color:#fff;border-color:var(--wb-indigo)}.wb-btn-green{background:var(--wb-correct);color:#fff;border-color:var(--wb-correct)}.wb-btn-red{background:var(--wb-red);color:#fff;border-color:var(--wb-red)}.wb-btn-sm{padding:7px 18px;font-size:1rem}.wb-btn-lg{padding:16px 40px;font-size:1.4rem}.wb-input{border:2.5px solid var(--wb-border);background:var(--wb-paper);width:100%;color:var(--wb-ink);box-shadow:var(--shadow-sm);border-radius:12px;outline:none;padding:12px 16px;font-family:Inter,sans-serif;font-size:1.05rem;transition:all .2s}[data-theme=dark] .wb-input{background:var(--wb-bg)}.wb-input:focus{border-color:var(--wb-blue);box-shadow:0 0 0 4px color-mix(in srgb, var(--wb-blue) 15%, transparent)}.wb-cookie-content{padding:24px}.wb-cookie-actions{gap:12px;display:flex}@media (max-width:480px){.wb-cookie-content{padding:16px!important}.wb-cookie-actions{flex-direction:column!important}.wb-cookie-actions .wb-btn{width:100%!important}}.wb-game-board{width:min(100%, calc((var(--wb-board-size) * 5) + 32px));flex-direction:column;gap:clamp(6px,1.5vw,8px);display:flex}.wb-board-row{grid-template-columns:repeat(5, var(--wb-board-size));justify-content:center;gap:clamp(6px,1.5vw,8px);display:grid}.wb-keyboard{flex-direction:column;align-items:center;gap:7px;width:min(100%,520px);margin-top:clamp(16px,4vw,24px);padding:0 2px;display:flex}.wb-keyboard-row{justify-content:center;gap:clamp(3px,1vw,6px);width:100%;display:flex}.wb-tile{width:var(--wb-board-size);height:var(--wb-board-size);border:2.5px solid var(--wb-border);text-transform:uppercase;background:var(--wb-paper);box-shadow:var(--shadow-sm);border-radius:8px;justify-content:center;align-items:center;font-family:Inter,sans-serif;font-size:clamp(1.4rem,8vw,2.2rem);font-weight:900;transition:all .2s;display:flex}[data-theme=dark] .wb-tile{background:var(--wb-paper-alt);box-shadow:inset 0 1px #ffffff08}.wb-tile.correct{background:var(--wb-correct);border-color:var(--wb-correct);color:#fff}.wb-tile.present{background:var(--wb-present);border-color:var(--wb-present);color:#fff}.wb-tile.absent{background:var(--wb-absent-bg);border-color:var(--wb-absent-bg);color:#fff;opacity:.8}.wb-key{height:var(--wb-key-height);border:2px solid var(--wb-border);background:var(--wb-paper);cursor:pointer;box-shadow:var(--shadow-sm);-webkit-user-select:none;user-select:none;color:var(--wb-ink);border-radius:6px;justify-content:center;align-items:center;font-family:Inter,sans-serif;font-size:clamp(.68rem,2.6vw,.8rem);font-weight:700;transition:transform 80ms,box-shadow 80ms;display:flex}[data-theme=dark] .wb-key{background:var(--wb-surface)}.wb-key.correct{border-color:var(--wb-correct);color:#fff;background:var(--wb-correct)!important}.wb-key.present{border-color:var(--wb-present);color:#fff;background:var(--wb-present)!important}.wb-key.absent{border-color:var(--wb-absent-bg);color:#fff;opacity:.6;background:var(--wb-absent-bg)!important}.wb-arena-header{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;gap:12px;margin-bottom:24px;display:grid}.wb-player-pill{min-width:0;padding:8px 16px;overflow:hidden}.wb-arena-game{flex-wrap:wrap;justify-content:center;align-items:flex-start;gap:clamp(18px,4vw,32px);display:flex}.wb-main-board{flex-direction:column;flex:1;align-items:center;min-width:min(100%,280px);display:flex}.sketchbrawl-shell{grid-template-columns:250px minmax(0,1fr) 300px;gap:20px;width:min(98vw,1600px);max-width:1600px;min-height:calc(100vh - 140px);margin:0 auto;padding-bottom:20px;display:grid}@media (max-width:820px){.sketchbrawl-shell{grid-template-columns:1fr;width:100%;min-height:auto}}[data-theme=dark] .wb-btn-blue,[data-theme=dark] .wb-btn-indigo,[data-theme=dark] .wb-btn-green,[data-theme=dark] .wb-btn-amber,[data-theme=dark] .wb-btn-primary,[data-theme=dark] .wb-tile.correct,[data-theme=dark] .wb-tile.present,[data-theme=dark] .wb-tile.absent,[data-theme=dark] .wb-key.correct,[data-theme=dark] .wb-key.present,[data-theme=dark] .wb-key.absent{color:#000!important}