.home-page{background:0 0;justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex;position:relative;overflow:hidden}.home-bg{pointer-events:none;z-index:0;position:fixed;inset:0}.blob{filter:blur(80px);opacity:.15;border-radius:50%;animation:6s ease-in-out infinite pulse;position:absolute}.blob-1{background:radial-gradient(circle,#7c3aed,#4f46e5);width:600px;height:600px;animation-delay:0s;top:-200px;left:-200px}.blob-2{background:radial-gradient(circle,#f59e0b,#ef4444);width:500px;height:500px;animation-delay:2s;bottom:-150px;right:-150px}.blob-3{background:radial-gradient(circle,#10b981,#3b82f6);width:400px;height:400px;animation-delay:4s;top:50%;left:50%;transform:translate(-50%,-50%)}.home-content{z-index:1;flex-direction:column;align-items:center;gap:28px;width:100%;max-width:560px;display:flex;position:relative}.home-logo{text-align:center}.logo-icon{margin-bottom:8px;font-size:4rem;line-height:1;animation:.6s forwards bounceIn}.logo-title{font-family:var(--font-game);letter-spacing:-2px;text-shadow:3px 3px #00000040;justify-content:center;align-items:center;gap:1px;font-size:3.5rem;font-weight:900;display:flex}.logo-title .l-s{color:#f44}.logo-title .l-k{color:#ff8c00}.logo-title .l-r{color:gold}.logo-title .l-i{color:#4caf50}.logo-title .l-b{color:#2196f3}.logo-title .l-b2{color:#9c27b0}.logo-title .l-l{color:#f44}.logo-title .l-dot{color:#fff}.logo-title .l-i2{color:#ff8c00}.logo-title .l-o{color:gold}.logo-title .pencil{filter:drop-shadow(2px 2px #0000004d);margin-left:4px;font-size:2.8rem;display:inline-block;transform:rotate(-15deg)}.logo-tagline{font-family:var(--font-game);color:#fffc;letter-spacing:3px;text-transform:uppercase;text-shadow:1px 1px #0000004d;margin-top:8px;font-size:1rem}.home-card{-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);background:#fffffff2;border:2px solid #ffffff80;width:100%;box-shadow:0 8px 40px #0000004d,inset 0 1px #fffc}.tabs{background:var(--bg-surface);border-radius:var(--radius-md);gap:4px;margin-bottom:24px;padding:4px;display:flex}.tab-btn{border-radius:calc(var(--radius-md) - 2px);color:var(--text-secondary);font-family:var(--font-game);cursor:pointer;transition:var(--transition);background:0 0;border:none;flex:1;padding:10px;font-size:.9rem;font-weight:700}.tab-btn.active{background:var(--primary);color:#fff;box-shadow:0 2px 8px #7c3aed66}.tab-btn:hover:not(.active){color:var(--text-primary);background:var(--bg-hover)}.form-group{margin-bottom:16px}.form-label{font-family:var(--font-game);color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;font-size:.85rem;font-weight:700;display:block}.code-input{text-transform:uppercase;letter-spacing:4px;text-align:center;font-family:Courier New,monospace;font-size:1.3rem}.settings-grid-2{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:4px;display:grid}.settings-grid{grid-template-columns:1fr 1fr 1fr;gap:12px;display:grid}select.input{cursor:pointer;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23a09ec0' d='M6 8L1 3h10z'/%3E%3C/svg%3E");background-position:right 12px center;background-repeat:no-repeat;padding-right:32px}.error-msg{border-radius:var(--radius-sm);color:#f87171;font-size:.9rem;font-family:var(--font-game);background:#ef44441a;border:1px solid #ef44444d;margin-bottom:16px;padding:10px 14px;font-weight:600}.custom-words-section{border-top:1px solid #e0e0e0;margin-top:4px;padding-top:14px}.custom-words-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:8px;margin-bottom:8px;display:flex}.custom-words-textarea{border-radius:var(--radius-md);width:100%;font-family:var(--font-body);color:#222;resize:vertical;box-sizing:border-box;background:#fafafa;border:2px solid #ccc;outline:none;min-height:72px;padding:10px 14px;font-size:.9rem;transition:border-color .2s}.custom-words-textarea:focus{border-color:var(--primary);background:#fff}.custom-words-textarea::placeholder{color:#aaa}.custom-words-hint{color:#888;font-size:.75rem;font-family:var(--font-game);margin-top:5px}.toggle-label{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:8px;display:flex}.toggle-input{display:none}.toggle-switch{background:#ccc;border-radius:11px;flex-shrink:0;width:40px;height:22px;transition:background .2s;display:inline-block;position:relative}.toggle-switch:after{content:"";background:#fff;border-radius:50%;width:16px;height:16px;transition:transform .2s;position:absolute;top:3px;left:3px;box-shadow:0 1px 3px #0000004d}.toggle-input:checked+.toggle-switch{background:var(--primary)}.toggle-input:checked+.toggle-switch:after{transform:translate(18px)}.toggle-text{font-family:var(--font-game);color:#444;font-size:.8rem;font-weight:700}.home-footer{color:#fff;text-align:center;text-shadow:0 1px 4px #0006;letter-spacing:.5px;font-size:.85rem;font-weight:700}@media (width<=480px){.settings-grid{grid-template-columns:1fr 1fr}.logo-title{font-size:2.2rem}}.lobby-page{background:0 0;min-height:100vh;padding:24px;position:relative;overflow:hidden}.lobby-bg{pointer-events:none;z-index:0;position:fixed;inset:0}.lobby-content{z-index:1;max-width:900px;margin:0 auto;position:relative}.lobby-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:32px;display:flex}.room-code-display{text-align:center}.room-code-label{text-transform:uppercase;letter-spacing:2px;color:var(--text-muted);font-size:.75rem;font-family:var(--font-game);margin-bottom:4px;font-weight:700;display:block}.room-code-value{background:var(--bg-elevated);border:2px solid var(--primary);border-radius:var(--radius-md);letter-spacing:6px;color:var(--primary-light);cursor:pointer;transition:var(--transition);align-items:center;gap:8px;padding:8px 20px;font-family:Courier New,monospace;font-size:1.8rem;font-weight:900;display:flex;box-shadow:0 0 20px #7c3aed33}.room-code-value:hover{background:var(--bg-hover);box-shadow:0 0 30px #7c3aed66}.copy-icon{opacity:.7;font-size:1rem}.connection-status{color:var(--text-secondary);font-size:.85rem;font-family:var(--font-game);align-items:center;gap:8px;font-weight:600;display:flex}.status-dot{border-radius:50%;flex-shrink:0;width:8px;height:8px}.status-dot.connected{background:var(--success);box-shadow:0 0 6px var(--success)}.status-dot.disconnected{background:var(--danger)}.lobby-body{grid-template-columns:1fr 320px;gap:24px;display:grid}.card-title{font-family:var(--font-game);color:var(--text-primary);align-items:center;gap:10px;margin-bottom:20px;font-size:1.3rem;font-weight:800;display:flex}.players-list{flex-direction:column;gap:8px;display:flex}.player-row{border-radius:var(--radius-md);background:var(--bg-surface);border:1px solid var(--border);transition:var(--transition);align-items:center;gap:12px;padding:12px;display:flex}.player-row:not(.empty):hover{border-color:var(--primary);background:var(--bg-hover)}.player-row.empty{opacity:.4;border-style:dashed}.player-avatar{width:40px;height:40px;font-family:var(--font-game);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:1.1rem;font-weight:900;display:flex}.empty-avatar{background:var(--bg-elevated);color:var(--text-muted)}.player-info{flex-wrap:wrap;flex:1;align-items:center;gap:8px;display:flex}.player-name{font-family:var(--font-game);font-size:1rem;font-weight:700}.waiting-host{color:var(--text-secondary);font-family:var(--font-game);justify-content:center;align-items:center;gap:12px;margin-top:24px;font-weight:600;display:flex}.settings-list{flex-direction:column;gap:8px;margin-bottom:24px;display:flex}.setting-item{background:var(--bg-surface);border-radius:var(--radius-sm);border:1px solid var(--border);justify-content:space-between;align-items:center;padding:12px;display:flex}.setting-label{font-family:var(--font-game);color:var(--text-secondary);font-size:.9rem;font-weight:600}.setting-value{font-family:var(--font-game);color:var(--primary-light);font-size:1rem;font-weight:800}.invite-section{border-top:1px solid var(--border);padding-top:20px}.invite-text{color:var(--text-muted);font-size:.85rem;font-family:var(--font-game);margin-bottom:10px;font-weight:600}.invite-code{text-align:center;letter-spacing:6px;color:var(--accent);background:var(--bg-surface);border:2px dashed var(--accent);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition);padding:16px;font-family:Courier New,monospace;font-size:2rem;font-weight:900}.invite-code:hover{background:#f59e0b1a}@media (width<=700px){.lobby-body{grid-template-columns:1fr}.lobby-header{flex-direction:column;align-items:center}}.canvas-container{border-radius:var(--radius-md);border:2px solid var(--border);background:#fff;width:100%;height:100%;position:relative;overflow:hidden}.canvas-container.drawing-mode{border-color:var(--primary);box-shadow:0 0 0 3px #7c3aed33}.drawing-canvas{touch-action:none;width:100%;height:100%;display:block}.custom-cursor{pointer-events:none;z-index:9999;border:1px solid #0000004d;border-radius:50%;transition:width .1s,height .1s;position:fixed;transform:translate(-50%,-50%)}.toolbar{background:var(--bg-elevated);border-radius:var(--radius-md);border:1px solid var(--border);flex-flow:wrap;align-items:center;gap:8px;padding:10px 16px;display:flex}.toolbar-disabled{opacity:.4;pointer-events:none}.toolbar-section{align-items:center;gap:4px;display:flex}.toolbar-divider{background:var(--border);flex-shrink:0;width:1px;height:32px}.tool-btn{border:2px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-surface);cursor:pointer;width:36px;height:36px;transition:var(--transition);justify-content:center;align-items:center;font-size:1.1rem;display:flex}.tool-btn:hover:not(:disabled){border-color:var(--primary);background:var(--bg-hover)}.tool-btn.active{border-color:var(--primary);background:#7c3aed33;box-shadow:0 0 8px #7c3aed4d}.color-palette{grid-template-columns:repeat(10,24px);gap:3px;display:grid}.color-swatch{cursor:pointer;width:24px;height:24px;transition:var(--transition);border:2px solid #0000;border-radius:4px;padding:0}.color-swatch:hover{border-color:#fff;transform:scale(1.2)}.color-swatch.active{box-shadow:0 0 0 2px var(--primary);border-color:#fff;transform:scale(1.15)}.custom-color-label{cursor:pointer;position:relative}.custom-color-preview{border-radius:var(--radius-sm);border:2px solid var(--border);width:36px;height:36px;transition:var(--transition)}.custom-color-preview:hover{border-color:var(--primary);transform:scale(1.1)}.hidden-input{opacity:0;width:0;height:0;position:absolute}.brush-sizes{align-items:center;gap:4px;display:flex}.brush-btn{border:2px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-surface);cursor:pointer;width:36px;height:36px;transition:var(--transition);justify-content:center;align-items:center;display:flex}.brush-btn:hover:not(:disabled){border-color:var(--primary);background:var(--bg-hover)}.brush-btn.active{border-color:var(--primary);background:#7c3aed33}.brush-dot{transition:var(--transition);border-radius:50%;display:block}.action-btn{border:2px solid var(--border);border-radius:var(--radius-sm);background:var(--bg-surface);cursor:pointer;width:36px;height:36px;transition:var(--transition);justify-content:center;align-items:center;font-size:1rem;display:flex}.action-btn:hover:not(:disabled){border-color:var(--primary);background:var(--bg-hover);transform:scale(1.05)}.action-clear:hover:not(:disabled){border-color:var(--danger);background:#ef44441a}@media (width<=800px){.color-palette{grid-template-columns:repeat(10,20px);gap:2px}.color-swatch{width:20px;height:20px}}.chat-container{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);flex-direction:column;height:100%;display:flex;overflow:hidden}.chat-header{border-bottom:1px solid var(--border);background:var(--bg-elevated);padding:12px 16px}.chat-title{font-family:var(--font-game);color:var(--text-primary);font-size:.95rem;font-weight:800}.messages-list{flex-direction:column;flex:1;gap:6px;padding:12px;display:flex;overflow-y:auto}.message{border-radius:var(--radius-sm);word-break:break-word;align-items:flex-start;gap:6px;padding:6px 10px;font-size:.875rem;line-height:1.4;display:flex}.msg-icon{flex-shrink:0;margin-top:1px;font-size:.9rem}.msg-content{flex:1}.msg-sender{font-family:var(--font-game);font-weight:700}.msg-chat{background:var(--bg-surface);color:var(--text-primary)}.msg-correct{color:#34d399;background:#10b98126;border:1px solid #10b9814d;animation:.3s bounceIn}.msg-correct .msg-sender{color:#34d399}.msg-close{color:#fbbf24;background:#f59e0b1a;border:1px solid #f59e0b33}.msg-system{color:var(--text-secondary);text-align:center;background:#7c3aed1a;justify-content:center;font-size:.8rem;font-style:italic}.msg-reveal{color:#fbbf24;font-family:var(--font-game);text-align:center;background:#f59e0b26;border:1px solid #f59e0b4d;justify-content:center;font-weight:700}.score-badge{color:#34d399;font-family:var(--font-game);border-radius:var(--radius-full);background:#10b98133;align-items:center;margin-left:6px;padding:1px 6px;font-size:.75rem;font-weight:700;display:inline-flex}.chat-input-form{border-top:1px solid var(--border);background:var(--bg-elevated);padding:12px}.chat-input-row{gap:8px;display:flex}.chat-input{flex:1;padding:10px 12px;font-size:.9rem}.chat-status{text-align:center;border-radius:var(--radius-sm);font-family:var(--font-game);padding:10px;font-size:.9rem;font-weight:700}.chat-status.drawing{color:var(--primary-light);background:#7c3aed33}.chat-status.guessed{color:#34d399;background:#10b98133}.msg-text{color:inherit}.player-list{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);flex-direction:column;height:100%;display:flex;overflow:hidden}.player-list-header{border-bottom:1px solid var(--border);background:var(--bg-elevated);font-family:var(--font-game);color:var(--text-primary);padding:12px 16px;font-size:.95rem;font-weight:800}.pl-row{border-bottom:1px solid var(--border);transition:var(--transition);align-items:center;gap:10px;padding:10px 14px;display:flex;position:relative}.pl-row:last-child{border-bottom:none}.pl-row.current-player{border-left:3px solid var(--primary);background:#7c3aed1a}.pl-row.disconnected{opacity:.5}.pl-rank{font-family:var(--font-game);color:var(--text-muted);text-align:center;flex-shrink:0;width:20px;font-size:.75rem;font-weight:900}.pl-avatar{width:34px;height:34px;font-family:var(--font-game);color:#fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;font-size:.9rem;font-weight:900;display:flex;position:relative}.drawing-indicator{font-size:.75rem;position:absolute;bottom:-4px;right:-4px}.pl-info{flex:1;min-width:0}.pl-name{font-family:var(--font-game);white-space:nowrap;text-overflow:ellipsis;color:var(--text-primary);font-size:.9rem;font-weight:700;overflow:hidden}.you-tag{color:var(--primary-light);font-size:.75rem;font-weight:600}.host-crown{margin-left:4px;font-size:.8rem}.pl-score{font-family:var(--font-game);color:var(--accent);font-size:1rem;font-weight:800}.pl-status{gap:4px;font-size:.9rem;display:flex}.word-hint-bar{background:var(--bg-elevated);border-radius:var(--radius-md);border:1px solid var(--border);justify-content:center;align-items:center;min-height:56px;padding:12px 24px;display:flex}.hint-status{font-family:var(--font-game);color:var(--text-secondary);font-size:1rem;font-weight:700}.drawing-word{align-items:center;gap:12px;display:flex}.drawing-label{font-family:var(--font-game);color:var(--text-secondary);text-transform:uppercase;letter-spacing:1px;font-size:.95rem;font-weight:700}.secret-word{font-family:var(--font-game);color:var(--primary-light);border-radius:var(--radius-sm);letter-spacing:2px;background:#7c3aed26;border:2px solid #7c3aed4d;padding:4px 16px;font-size:1.6rem;font-weight:900}.hint-display{align-items:center;gap:16px;display:flex}.hint-label{font-family:var(--font-game);color:var(--text-muted);white-space:nowrap;font-size:.85rem;font-weight:600}.hint-letters{flex-wrap:wrap;justify-content:center;align-items:flex-end;gap:4px;display:flex}.hint-char{font-family:var(--font-game);border-bottom:3px solid var(--primary-light);min-width:24px;color:var(--text-muted);text-transform:uppercase;transition:var(--transition);justify-content:center;align-items:center;padding-bottom:2px;font-size:1.5rem;font-weight:900;display:inline-flex}.hint-char.revealed{color:var(--text-primary);border-bottom-color:var(--success);animation:.3s bounceIn}.hint-char.space{border-bottom:none;min-width:16px}.timer-container{background:var(--bg-elevated);border-radius:var(--radius-md);border:1px solid var(--border);transition:var(--transition);align-items:center;gap:12px;padding:8px 20px;display:flex}.timer-container.urgent{border-color:var(--warning);background:#f59e0b1a}.timer-container.critical{border-color:var(--danger);background:#ef44441a;animation:.5s ease-in-out infinite pulse}.timer-value{font-family:var(--font-game);text-align:center;min-width:36px;color:var(--text-primary);transition:var(--transition);font-size:1.4rem;font-weight:900}.urgent .timer-value{color:var(--warning)}.critical .timer-value{color:var(--danger)}.timer-bar-track{background:var(--bg-surface);border-radius:var(--radius-full);flex:1;height:8px;overflow:hidden}.timer-bar-fill{background:linear-gradient(90deg, var(--success), #34d399);border-radius:var(--radius-full);height:100%;transition:width 1s linear}.urgent .timer-bar-fill{background:linear-gradient(90deg, var(--warning), #fbbf24)}.critical .timer-bar-fill{background:linear-gradient(90deg, var(--danger), #f87171)}.game-page{background:0 0;flex-direction:column;height:100vh;display:flex;overflow:hidden}.game-header{background:#1a52c4;border-bottom:3px solid #1240a0;flex-wrap:wrap;flex-shrink:0;align-items:center;gap:12px;padding:8px 16px;display:flex;box-shadow:0 3px 12px #0000004d}.skribbl-header-logo{font-family:var(--font-game);letter-spacing:-1px;text-shadow:2px 2px #0000004d;flex-shrink:0;align-items:center;gap:2px;font-size:1.6rem;font-weight:900;line-height:1;display:flex}.skribbl-header-logo .l-s{color:#f44}.skribbl-header-logo .l-k{color:#ff8c00}.skribbl-header-logo .l-r{color:gold}.skribbl-header-logo .l-i{color:#4caf50}.skribbl-header-logo .l-b{color:#2196f3}.skribbl-header-logo .l-b2{color:#9c27b0}.skribbl-header-logo .l-l{color:#f44}.skribbl-header-logo .l-dot{color:#fff}.skribbl-header-logo .l-i2{color:#ff8c00}.skribbl-header-logo .l-o{color:gold}.skribbl-header-logo .pencil-icon{filter:drop-shadow(1px 1px #0000004d);margin-left:2px;font-size:1.3rem;display:inline-block;transform:rotate(-15deg)}.round-info{border-radius:var(--radius-md);background:#ffffff26;border:2px solid #ffffff40;flex-direction:column;align-items:center;min-width:80px;margin-left:auto;padding:5px 14px;display:flex}.round-label{font-family:var(--font-game);text-transform:uppercase;letter-spacing:1px;color:#ffffffb3;font-size:.6rem;font-weight:700}.round-value{font-family:var(--font-game);color:#fff;font-size:1.1rem;font-weight:900}.game-body{flex:1;grid-template-columns:220px 1fr 280px;gap:10px;min-height:0;padding:10px;display:grid;overflow:hidden}.game-players{height:100%;overflow:hidden}.game-canvas-area{flex-direction:column;gap:8px;min-height:0;display:flex}.canvas-wrapper{flex:1;min-height:0;position:relative}.game-chat{height:100%;overflow:hidden}.round-end-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border-radius:var(--radius-md);z-index:10;background:#0f0e17d9;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.round-end-card{text-align:center;padding:40px}.round-end-icon{margin-bottom:8px;font-size:3rem}.round-end-label{font-family:var(--font-game);color:var(--text-secondary);text-transform:uppercase;letter-spacing:2px;font-size:1rem}.round-end-word{font-family:var(--font-game);color:var(--accent);text-transform:capitalize;margin:8px 0 12px;font-size:3rem;font-weight:900}.round-end-sub{color:var(--text-muted);font-size:.9rem}.word-modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:100;background:#000000bf;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.word-modal{background:var(--bg-card);border:1px solid var(--primary);border-radius:var(--radius-xl);text-align:center;box-shadow:var(--shadow-glow), var(--shadow-lg);width:90%;max-width:500px;padding:48px 56px}.word-modal h2{margin-bottom:8px;font-size:1.8rem}.word-modal p{color:var(--text-secondary);font-family:var(--font-game);margin-bottom:32px;font-weight:600}.word-choices{flex-direction:column;gap:12px;display:flex}.word-choice-btn{border:2px solid var(--border);border-radius:var(--radius-md);background:var(--bg-elevated);color:var(--text-primary);font-family:var(--font-game);cursor:pointer;transition:var(--transition);text-transform:capitalize;letter-spacing:1px;padding:18px 32px;font-size:1.3rem;font-weight:800}.word-choice-btn:hover{border-color:var(--primary);color:var(--primary-light);background:#7c3aed33;transform:translateY(-2px);box-shadow:0 4px 20px #7c3aed4d}.game-end-screen{background:0 0;justify-content:center;align-items:center;min-height:100vh;padding:24px;display:flex}.game-end-card{border-radius:var(--radius-xl);text-align:center;background:#fff;border:3px solid #2d6be4;width:100%;max-width:480px;padding:48px;box-shadow:0 12px 40px #0000004d}.trophy{margin-bottom:16px;font-size:5rem;line-height:1;animation:.5s bounceIn}.game-end-card h1{margin-bottom:8px;font-size:2.5rem}.winner-text{font-family:var(--font-game);color:var(--accent);margin-bottom:32px;font-size:1.4rem;font-weight:800}.final-scores{flex-direction:column;gap:8px;margin-bottom:32px;display:flex}.score-row{background:var(--bg-surface);border-radius:var(--radius-md);border:1px solid var(--border);align-items:center;gap:12px;padding:12px 16px;display:flex}.score-row.top{border-color:var(--accent);background:#f59e0b1a}.score-rank{min-width:32px;font-size:1.2rem}.score-name{font-family:var(--font-game);text-align:left;flex:1;font-weight:700}.score-pts{font-family:var(--font-game);color:var(--accent);font-weight:900}@media (width<=900px){.game-body{grid-template-rows:auto 1fr auto;grid-template-columns:1fr}.game-players{order:3;height:auto}.game-chat{order:2;height:250px}.game-canvas-area{order:1}}:root{--primary:#2d6be4;--primary-dark:#1a52c4;--primary-light:#5b8fee;--accent:#f5a623;--accent-dark:#d4891a;--success:#4caf50;--success-dark:#388e3c;--danger:#f44336;--warning:#ff9800;--info:#2196f3;--bg-base:#2d6be4;--bg-surface:#fff;--bg-elevated:#f0f0f0;--bg-card:#fff;--bg-hover:#e8e8e8;--text-primary:#222;--text-secondary:#555;--text-muted:#888;--border:#ccc;--border-light:#ddd;--shadow-sm:0 2px 8px #00000026;--shadow-md:0 4px 20px #0003;--shadow-lg:0 8px 40px #00000040;--shadow-glow:0 0 30px #2d6be466;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:24px;--radius-full:9999px;--font-game:"Nunito", sans-serif;--font-body:"Inter", sans-serif;--transition:all .2s ease;--transition-slow:all .4s ease;--skribbl-bg:#2d6be4;--skribbl-doodle:#2460d0}*,:before,:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{width:100%;height:100%}body{font-family:var(--font-body);background-color:var(--skribbl-bg);color:var(--text-primary);-webkit-font-smoothing:antialiased;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='400' opacity='0.18'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3C!-- fish --%3E%3Cellipse cx='50' cy='30' rx='18' ry='10'/%3E%3Cpolygon points='68,30 78,22 78,38'/%3E%3Ccircle cx='43' cy='28' r='2' fill='%23ffffff'/%3E%3C!-- star --%3E%3Cpolygon points='130,15 133,25 143,25 135,31 138,41 130,35 122,41 125,31 117,25 127,25'/%3E%3C!-- house --%3E%3Crect x='170' y='35' width='30' height='22'/%3E%3Cpolygon points='165,35 185,15 205,35'/%3E%3Crect x='179' y='45' width='12' height='12'/%3E%3C!-- tree --%3E%3Cline x1='250' y1='57' x2='250' y2='30'/%3E%3Cellipse cx='250' cy='22' rx='12' ry='14'/%3E%3C!-- sun --%3E%3Ccircle cx='310' cy='28' r='12'/%3E%3Cline x1='310' y1='8' x2='310' y2='14'/%3E%3Cline x1='310' y1='42' x2='310' y2='48'/%3E%3Cline x1='290' y1='28' x2='296' y2='28'/%3E%3Cline x1='324' y1='28' x2='330' y2='28'/%3E%3Cline x1='296' y1='14' x2='300' y2='18'/%3E%3Cline x1='320' y1='38' x2='324' y2='42'/%3E%3Cline x1='296' y1='42' x2='300' y2='38'/%3E%3Cline x1='320' y1='18' x2='324' y2='14'/%3E%3C!-- car --%3E%3Crect x='360' y='30' width='50' height='22'/%3E%3Cellipse cx='375' cy='52' rx='8' ry='8'/%3E%3Cellipse cx='400' cy='52' rx='8' ry='8'/%3E%3Cpath d='M365,30 Q375,15 400,15 L410,30'/%3E%3C!-- bicycle --%3E%3Ccircle cx='470' cy='42' r='14'/%3E%3Ccircle cx='510' cy='42' r='14'/%3E%3Cline x1='470' y1='42' x2='490' y2='20'/%3E%3Cline x1='490' y1='20' x2='510' y2='42'/%3E%3Cline x1='490' y1='20' x2='490' y2='30'/%3E%3Cline x1='484' y1='30' x2='496' y2='30'/%3E%3C!-- anchor --%3E%3Ccircle cx='30' cy='100' r='6'/%3E%3Cline x1='30' y1='106' x2='30' y2='130'/%3E%3Cpath d='M16,120 Q30,135 44,120'/%3E%3Cline x1='20' y1='108' x2='40' y2='108'/%3E%3C!-- diamond --%3E%3Cpolygon points='100,90 120,105 100,125 80,105'/%3E%3C!-- cake --%3E%3Crect x='150' y='105' width='40' height='25'/%3E%3Crect x='155' y='90' width='30' height='15'/%3E%3Cline x1='165' y1='85' x2='165' y2='90'/%3E%3Cline x1='175' y1='83' x2='175' y2='90'/%3E%3Cline x1='185' y1='85' x2='185' y2='90'/%3E%3C!-- lightning --%3E%3Cpolyline points='240,85 228,105 238,105 226,130'/%3E%3C!-- eye --%3E%3Cellipse cx='300' cy='108' rx='20' ry='12'/%3E%3Ccircle cx='300' cy='108' r='6'/%3E%3Ccircle cx='302' cy='106' r='2' fill='%23ffffff'/%3E%3C!-- flower --%3E%3Ccircle cx='370' cy='108' r='8'/%3E%3Ccircle cx='370' cy='90' r='6'/%3E%3Ccircle cx='370' cy='126' r='6'/%3E%3Ccircle cx='354' cy='108' r='6'/%3E%3Ccircle cx='386' cy='108' r='6'/%3E%3C!-- mountain --%3E%3Cpolyline points='430,130 455,90 480,130'/%3E%3Cpolyline points='450,130 470,100 490,130'/%3E%3C!-- person --%3E%3Ccircle cx='540' cy='95' r='10'/%3E%3Cline x1='540' y1='105' x2='540' y2='125'/%3E%3Cline x1='525' y1='113' x2='555' y2='113'/%3E%3Cline x1='540' y1='125' x2='528' y2='140'/%3E%3Cline x1='540' y1='125' x2='552' y2='140'/%3E%3C!-- apple --%3E%3Ccircle cx='50' cy='185' r='14'/%3E%3Cpath d='M50,171 Q55,160 60,163'/%3E%3C!-- crown --%3E%3Cpolyline points='100,200 110,175 120,190 130,172 140,190 150,175 160,200'/%3E%3Cline x1='100' y1='200' x2='160' y2='200'/%3E%3C!-- clock --%3E%3Ccircle cx='210' cy='185' r='18'/%3E%3Cline x1='210' y1='185' x2='210' y2='172'/%3E%3Cline x1='210' y1='185' x2='220' y2='190'/%3E%3C!-- music note --%3E%3Cpath d='M275,200 L275,175 L295,170 L295,195'/%3E%3Ccircle cx='270' cy='200' r='6'/%3E%3Ccircle cx='290' cy='195' r='6'/%3E%3C!-- phone --%3E%3Crect x='330' y='168' width='22' height='36' rx='4'/%3E%3Cline x1='338' y1='196' x2='344' y2='196'/%3E%3C!-- scissors --%3E%3Ccircle cx='400' cy='175' r='6'/%3E%3Ccircle cx='415' cy='175' r='6'/%3E%3Cline x1='404' y1='179' x2='430' y2='200'/%3E%3Cline x1='411' y1='179' x2='430' y2='200'/%3E%3C!-- umbrella --%3E%3Cpath d='M460,185 Q460,165 490,165 Q520,165 520,185 Z'/%3E%3Cline x1='490' y1='185' x2='490' y2='205'/%3E%3Cpath d='M490,205 Q490,212 483,212'/%3E%3C!-- boat --%3E%3Cpath d='M30,280 L15,300 L65,300 L50,280 Z'/%3E%3Cline x1='40' y1='280' x2='40' y2='260'/%3E%3Cpath d='M40,260 L60,275 L40,275'/%3E%3C!-- rocket --%3E%3Cpath d='M110,305 L120,270 L130,305 Z'/%3E%3Crect x='115' y='305' width='10' height='12'/%3E%3Ccircle cx='120' cy='285' r='5'/%3E%3Cline x1='110' y1='308' x2='105' y2='318'/%3E%3Cline x1='130' y1='308' x2='135' y2='318'/%3E%3C!-- ghost --%3E%3Cpath d='M170,310 Q170,280 190,280 Q210,280 210,310 L210,330 L200,322 L190,330 L180,322 L170,330 Z'/%3E%3Ccircle cx='184' cy='295' r='3' fill='%23ffffff'/%3E%3Ccircle cx='196' cy='295' r='3' fill='%23ffffff'/%3E%3C!-- magnifier --%3E%3Ccircle cx='260' cy='295' r='16'/%3E%3Cline x1='271' y1='306' x2='285' y2='320'/%3E%3C!-- turtle --%3E%3Cellipse cx='340' cy='300' rx='20' ry='14'/%3E%3Ccircle cx='340' cy='292' r='8'/%3E%3Cline x1='322' y1='308' x2='315' y2='318'/%3E%3Cline x1='358' y1='308' x2='365' y2='318'/%3E%3Cline x1='330' y1='312' x2='325' y2='322'/%3E%3Cline x1='350' y1='312' x2='355' y2='322'/%3E%3C!-- skull --%3E%3Ccircle cx='420' cy='290' r='18'/%3E%3Crect x='410' y='302' width='20' height='12' rx='2'/%3E%3Ccircle cx='413' cy='288' r='4' fill='%232460d0'/%3E%3Ccircle cx='427' cy='288' r='4' fill='%232460d0'/%3E%3Cline x1='415' y1='306' x2='415' y2='314'/%3E%3Cline x1='420' y1='306' x2='420' y2='314'/%3E%3Cline x1='425' y1='306' x2='425' y2='314'/%3E%3C!-- smiley --%3E%3Ccircle cx='490' cy='295' r='18'/%3E%3Ccircle cx='483' cy='290' r='3' fill='%232460d0'/%3E%3Ccircle cx='497' cy='290' r='3' fill='%232460d0'/%3E%3Cpath d='M483,300 Q490,308 497,300'/%3E%3C!-- hand --%3E%3Cpath d='M550,320 L550,290 L555,285 L560,290 L560,270 L565,265 L570,270 L570,268 L575,263 L580,268 L580,285 L585,285 L585,305 L575,320 Z'/%3E%3C/g%3E%3C/svg%3E");background-repeat:repeat;background-size:600px 400px;overflow-x:hidden}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:#e0e0e0}::-webkit-scrollbar-thumb{background:#2d6be4;border-radius:3px}::-webkit-scrollbar-thumb:hover{background:#1a52c4}h1,h2,h3,h4,h5,h6{font-family:var(--font-game);font-weight:800;line-height:1.2}.btn{font-family:var(--font-game);border-radius:var(--radius-md);cursor:pointer;transition:var(--transition);white-space:nowrap;-webkit-user-select:none;user-select:none;border:none;justify-content:center;align-items:center;gap:8px;padding:12px 24px;font-size:1rem;font-weight:700;text-decoration:none;display:inline-flex}.btn:disabled{opacity:.5;cursor:not-allowed;transform:none!important}.btn-primary{background:linear-gradient(135deg, var(--primary), var(--primary-dark));color:#fff;box-shadow:0 4px 15px #2d6be466}.btn-primary:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #2d6be499}.btn-primary:active:not(:disabled){transform:translateY(0)}.btn-accent{background:linear-gradient(135deg, var(--accent), var(--accent-dark));color:#fff;box-shadow:0 4px 15px #f59e0b66}.btn-accent:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #f59e0b99}.btn-success{background:linear-gradient(135deg, var(--success), var(--success-dark));color:#fff;box-shadow:0 4px 15px #10b98166}.btn-success:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #10b98199}.btn-ghost{color:var(--text-secondary);border:1px solid var(--border-light);background:0 0}.btn-ghost:hover:not(:disabled){background:var(--bg-hover);color:var(--text-primary);border-color:var(--primary-light)}.btn-lg{border-radius:var(--radius-lg);padding:16px 36px;font-size:1.2rem}.btn-sm{border-radius:var(--radius-sm);padding:8px 16px;font-size:.85rem}.input{background:var(--bg-surface);border:2px solid var(--border);border-radius:var(--radius-md);width:100%;color:var(--text-primary);font-family:var(--font-body);transition:var(--transition);outline:none;padding:12px 16px;font-size:1rem}.input::placeholder{color:var(--text-muted)}.input:focus{border-color:var(--primary);box-shadow:0 0 0 3px #7c3aed33}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);padding:24px}.badge{border-radius:var(--radius-full);font-size:.75rem;font-weight:700;font-family:var(--font-game);align-items:center;padding:4px 10px;display:inline-flex}.badge-primary{color:var(--primary-light);background:#7c3aed33}.badge-success{color:#34d399;background:#10b98133}.badge-accent{color:#fbbf24;background:#f59e0b33}.badge-danger{color:#f87171;background:#ef444433}.flex{display:flex}.flex-col{flex-direction:column}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-1{gap:4px}.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}.w-full{width:100%}.h-full{height:100%}.text-center{text-align:center}.text-sm{font-size:.875rem}.text-lg{font-size:1.125rem}.text-xl{font-size:1.25rem}.font-bold{font-weight:700}@keyframes fadeIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(40px)}to{opacity:1;transform:translateY(0)}}@keyframes pulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes glow{0%,to{box-shadow:0 0 20px #7c3aed4d}50%{box-shadow:0 0 40px #7c3aed99}}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}@keyframes bounceIn{0%{opacity:0;transform:scale(.3)}50%{transform:scale(1.05)}70%{transform:scale(.9)}to{opacity:1;transform:scale(1)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.animate-fadeIn{animation:.3s forwards fadeIn}.animate-slideUp{animation:.4s forwards slideUp}.animate-pulse{animation:2s ease-in-out infinite pulse}.animate-glow{animation:2s ease-in-out infinite glow}.animate-bounceIn{animation:.5s forwards bounceIn}.spinner{border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;width:40px;height:40px;animation:.8s linear infinite spin}