@import"https://fonts.googleapis.com/css2?family=Lilita+One&family=Nunito:wght@400;600;700&display=swap";:root{--bg: #1a1a2e;--bg-card: #16213e;--bg-input: #0f3460;--primary: #e94560;--primary-hover: #ff6b81;--secondary: #533483;--accent: #ffd460;--text: #eaeaea;--text-muted: #a0a0b8;--success: #2ecc71;--border: #2a2a4a;--radius: 12px;--radius-sm: 8px}*{margin:0;padding:0;box-sizing:border-box}html,body,#app{height:100%}body{font-family:Nunito,sans-serif;background:var(--bg);color:var(--text);overflow-x:hidden}.page{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:24px}.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:32px;width:100%;max-width:480px;display:flex;flex-direction:column;gap:20px}.card--wide{max-width:900px}h1{font-family:Lilita One,cursive;font-size:2.4rem;color:var(--accent);text-align:center;letter-spacing:1px}h2{font-family:Lilita One,cursive;font-size:1.6rem;color:var(--primary);text-align:center}button{font-family:Nunito,sans-serif;font-weight:700;font-size:1rem;border:none;border-radius:var(--radius-sm);padding:12px 24px;cursor:pointer;transition:all .15s ease;color:#fff;background:var(--primary)}button:hover:not(:disabled){background:var(--primary-hover);transform:translateY(-1px)}button:active:not(:disabled){transform:translateY(0)}button:disabled{opacity:.4;cursor:not-allowed}button.btn-secondary{background:var(--secondary)}button.btn-secondary:hover:not(:disabled){background:#6b44a0}button.btn-accent{background:var(--accent);color:var(--bg)}button.btn-accent:hover:not(:disabled){background:#ffe080}button.btn-small{padding:8px 14px;font-size:.85rem}input[type=text],textarea{font-family:Nunito,sans-serif;font-size:1rem;width:100%;padding:12px 16px;background:var(--bg-input);color:var(--text);border:2px solid var(--border);border-radius:var(--radius-sm);outline:none;transition:border-color .15s ease}input[type=text]:focus,textarea:focus{border-color:var(--primary)}input::placeholder,textarea::placeholder{color:var(--text-muted)}textarea{resize:vertical}.emoji{display:inline-block;vertical-align:middle;object-fit:contain}.home-page,.join-page{text-align:center}.subtitle{color:var(--text-muted);font-size:1.05rem}.avatar-join{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:6px}.avatar-preview{line-height:1;text-align:center;animation:avatarBounce .3s ease}.avatar-refresh{width:32px;height:32px;padding:0;background:var(--bg-input);color:var(--text-muted);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .2s ease}.avatar-refresh:hover:not(:disabled){background:var(--secondary);color:var(--text);transform:rotate(90deg)}@keyframes avatarBounce{0%{transform:scale(.8)}50%{transform:scale(1.1)}to{transform:scale(1)}}.btn-secondary{background:var(--secondary)}.btn-secondary:hover:not(:disabled){background:#6b44a0}.btn-small{padding:6px 16px;font-size:.85rem}.lobby-link-row{display:flex;gap:8px;align-items:stretch}.lobby-link{flex:1;background:var(--bg-input);border:1px dashed var(--border);border-radius:var(--radius-sm);padding:12px;font-size:.85rem;color:var(--accent);word-break:break-all;text-align:center;-webkit-user-select:all;user-select:all;cursor:pointer}.btn-copy{width:44px;flex-shrink:0;padding:0;background:var(--bg-input);border:1px dashed var(--border);border-radius:var(--radius-sm);color:var(--text-muted);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .15s ease}.btn-copy:hover:not(:disabled){background:var(--secondary);color:var(--text);transform:none}.player-list{list-style:none;display:flex;flex-direction:column;gap:8px}.player-item{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--bg-input);border-radius:var(--radius-sm);font-weight:600}.player-item--disconnected{opacity:.4}.player-avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.9rem;color:var(--bg);flex-shrink:0}.player-badge{font-size:.75rem;color:var(--accent);margin-left:auto}.btn-kick{margin-left:auto;width:28px;height:28px;padding:0;font-size:.8rem;background:transparent;color:var(--text-muted);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0}.btn-kick:hover:not(:disabled){background:var(--primary);color:#fff;transform:none}.phase-timer{font-family:Lilita One,cursive;font-size:2.2rem;text-align:center;color:var(--accent);letter-spacing:2px}.phase-timer--warning{color:var(--primary);animation:pulse 1s ease-in-out infinite}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}.write-input{display:flex;flex-direction:column;gap:10px}.write-input textarea{min-height:80px}.write-input-footer{display:flex;justify-content:space-between;align-items:center}.write-input-footer span{font-size:.85rem;color:var(--text-muted)}.prompt-display{text-align:center}.prompt-text{font-size:1.3rem;font-style:italic;color:var(--accent);padding:16px;background:var(--bg-input);border-radius:var(--radius-sm);border-left:4px solid var(--accent)}.drawing-area{display:flex;flex-direction:row;gap:16px;align-items:flex-start;width:100%}.drawing-toolbar{display:flex;flex-direction:column;gap:16px;width:130px;flex-shrink:0}.toolbar-section{display:flex;flex-direction:column;gap:6px}.toolbar-label{font-size:.75rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px}.tool-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}.tool-btn{width:38px;height:38px;padding:0;background:var(--bg-input);border:2px solid transparent;display:flex;align-items:center;justify-content:center;color:var(--text)}.tool-btn:hover:not(:disabled){background:var(--secondary);transform:none}.tool-btn.active{border-color:var(--primary);background:var(--secondary)}.toolbar-color-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:3px}.color-btn{width:28px!important;height:28px!important;padding:0!important;border-radius:4px!important;border:2px solid transparent!important;transition:transform .1s ease,border-color .1s ease}.color-btn:hover{transform:scale(1.15)!important}.color-btn.active{border-color:#fff!important;box-shadow:0 0 0 2px var(--primary)}.toolbar-sizes{display:flex;gap:4px;flex-wrap:wrap}.size-btn{width:34px;height:34px;padding:0;background:var(--bg-input);border:2px solid transparent;display:flex;align-items:center;justify-content:center}.size-btn:hover:not(:disabled){transform:none;background:var(--secondary)}.size-btn.active{border-color:var(--primary)}.size-dot{background:var(--text);border-radius:50%;display:block}.toolbar-actions{display:flex;flex-direction:column;gap:6px}.action-btn{background:var(--secondary);font-size:.85rem;padding:8px 0;width:100%}.action-btn:hover:not(:disabled){background:#6b44a0}.submit-btn{background:var(--success);font-size:.95rem;padding:12px 0;width:100%}.submit-btn:hover:not(:disabled){background:#3ddb85}.drawing-canvas-wrap{flex:1;min-width:0}.drawing-canvas-wrap canvas{border:2px solid var(--border);border-radius:var(--radius-sm);background:#fff;width:100%;height:auto;cursor:crosshair;touch-action:none;display:block}.drawing-viewer canvas{border:2px solid var(--border);border-radius:var(--radius-sm);background:#fff;max-width:100%}.waiting{text-align:center;color:var(--text-muted);font-size:1.1rem;padding:24px}.waiting:after{content:"";animation:dots 1.5s steps(4) infinite}@keyframes dots{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}.results-layout{min-height:100vh;display:flex;flex-direction:row;align-items:flex-start;padding:24px;gap:24px}.results-sidebar{position:sticky;top:24px;width:220px;flex-shrink:0;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px 16px}.results-sidebar h2{font-size:1.1rem;margin-bottom:12px}.results-player-list{list-style:none;display:flex;flex-direction:column;gap:8px}.results-player-item{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:var(--radius-sm);font-weight:600;font-size:.9rem}.results-player-item--disconnected{opacity:.4}.results-player-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.results-main{flex:1;min-width:0;display:flex;justify-content:center}.results-page{text-align:center}.chain-owner-label{font-size:1.1rem;color:var(--text-muted);text-align:center;display:flex;align-items:center;justify-content:center;gap:8px}.chain-owner-label strong{color:var(--accent)}.chain-owner-avatar{font-size:1.6rem;line-height:1}.chain-reveal{display:flex;flex-direction:column;gap:24px;margin-top:8px}.reveal-entry{animation:fadeSlideIn .4s ease}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.reveal-author{font-size:.95rem;color:var(--text-muted);margin-bottom:6px;text-align:left;font-weight:600;display:flex;align-items:center;gap:6px}.reveal-author-avatar{font-size:1.3rem;line-height:1}.reveal-text{font-size:1.2rem;font-style:italic;color:var(--accent);padding:16px;background:var(--bg-input);border-radius:var(--radius-sm);border-left:4px solid var(--accent);text-align:left}.reveal-drawing{display:flex;justify-content:center}.chain-export{display:flex;justify-content:center;gap:8px;margin-top:8px}.chain-export button{display:inline-flex;align-items:center;gap:4px}.results-actions{display:flex;flex-direction:column;align-items:center;gap:12px;margin-top:8px}.game-layout{min-height:100vh;display:flex;flex-direction:row;align-items:flex-start;padding:24px;gap:20px;justify-content:center}.game-main{flex:1;min-width:0;max-width:900px;display:flex;justify-content:center}.game-main>.card{width:100%}.status-panel{position:sticky;top:24px;width:200px;flex-shrink:0;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:14px 12px;display:flex;flex-direction:column;gap:6px}.status-panel-player{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:var(--radius-sm);font-size:.85rem;font-weight:600}.status-panel-player--offline{opacity:.4}.status-panel-avatar{width:28px;height:28px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;color:var(--bg);flex-shrink:0}.status-panel-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.status-panel-status{font-size:.7rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;flex-shrink:0}.status--done{color:var(--success)}.status--active{color:var(--accent)}.status--offline{color:var(--primary)}.status--waiting{color:var(--text-muted)}.admin-card{max-width:1100px}.admin-toolbar{display:flex;justify-content:space-between;align-items:center}.admin-error{color:var(--primary);text-align:center}.admin-table-wrap{overflow-x:auto}.admin-table{width:100%;border-collapse:collapse;font-size:.9rem}.admin-table th{text-align:left;padding:10px 12px;color:var(--text-muted);font-size:.75rem;text-transform:uppercase;letter-spacing:.5px;border-bottom:1px solid var(--border)}.admin-table td{padding:10px 12px;border-bottom:1px solid var(--border);vertical-align:middle}.admin-table tbody tr:hover{background:var(--bg-input)}.admin-table code{font-family:Nunito,sans-serif;font-weight:700;color:var(--accent)}.admin-phase{display:inline-block;padding:2px 8px;border-radius:4px;font-size:.8rem;font-weight:700}.admin-phase--lobby{background:var(--bg-input);color:var(--text-muted)}.admin-phase--write,.admin-phase--describe{background:#1a3a2e;color:var(--success)}.admin-phase--draw{background:#3a2e1a;color:var(--accent)}.admin-phase--results{background:#2e1a3a;color:#bb86fc}.admin-phase--finished{background:#3a1a1a;color:var(--primary)}.admin-players{display:flex;gap:4px;flex-wrap:wrap}.admin-player-chip{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:50%;background:var(--secondary);font-size:.85rem;cursor:default;position:relative}.admin-player-chip:hover:after{content:attr(title);position:absolute;bottom:calc(100% + 6px);left:50%;transform:translate(-50%);background:var(--card);color:var(--text);padding:4px 8px;border-radius:6px;font-size:.75rem;white-space:nowrap;pointer-events:none;box-shadow:0 2px 8px #0000004d;z-index:10}.admin-player-chip--offline{opacity:.35}.admin-player-chip--offline:hover{opacity:.7}.btn-open-game{display:inline-flex;align-items:center;margin-left:6px;color:var(--accent);opacity:.6;transition:opacity .15s;vertical-align:middle}.btn-open-game:hover{opacity:1}.game-config{display:flex;flex-direction:column;gap:10px;padding:16px;background:var(--bg-input);border-radius:var(--radius-sm)}.config-row{display:flex;align-items:center;justify-content:space-between;gap:12px}.config-row label{font-size:.9rem;font-weight:600;color:var(--text-muted)}.config-row select{font-family:Nunito,sans-serif;font-size:.9rem;font-weight:600;padding:6px 10px;background:var(--bg-card);color:var(--text);border:2px solid var(--border);border-radius:var(--radius-sm);cursor:pointer;outline:none}.config-row select:focus{border-color:var(--primary)}.reactions-widget{position:fixed;bottom:0;left:24px;width:240px;display:flex;flex-direction:column;gap:6px;padding:10px;z-index:100;pointer-events:none}.reactions-picker{display:flex;flex-wrap:wrap;gap:4px;justify-content:center;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:8px;pointer-events:auto}.reaction-btn{width:36px;height:36px;padding:0;background:var(--bg-input);border-radius:var(--radius-sm);font-size:1.2rem;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .1s ease,background .1s ease}.reaction-btn:hover:not(:disabled){background:var(--secondary);transform:scale(1.2)}.reactions-feed{display:flex;flex-direction:column;gap:4px;max-height:240px;overflow-y:auto;pointer-events:none}.reaction-toast{display:flex;align-items:center;gap:8px;padding:8px 10px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius-sm);animation:toastSlideUp .3s ease;font-size:.9rem;min-height:40px}@keyframes toastSlideUp{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.reaction-toast-avatar{font-size:1.2rem;line-height:1;flex-shrink:0}.reaction-toast-name{font-weight:600;color:var(--text);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;flex:1}.reaction-toast-emoji{font-size:1.4rem;line-height:1;flex-shrink:0}.btn-view-chain{margin-left:auto;width:28px;height:28px;padding:0;background:var(--bg-input);color:var(--text-muted);border-radius:50%;display:flex;align-items:center;justify-content:center;flex-shrink:0;opacity:.6;transition:all .15s ease}.btn-view-chain:hover:not(:disabled){opacity:1;background:var(--secondary);color:var(--text);transform:none}.btn-view-chain.active{opacity:1;background:var(--primary);color:#fff}.results-player-item--active{background:var(--bg-input);border-left:3px solid var(--primary)}.connection-status{position:fixed;top:0;left:0;right:0;z-index:1000;text-align:center;padding:8px 16px;font-family:Nunito,sans-serif;font-weight:700;font-size:.9rem;animation:slideDown .3s ease}@keyframes slideDown{0%{transform:translateY(-100%)}to{transform:translateY(0)}}.connection-status--connecting{background:var(--accent);color:#1a1a2e}.connection-status--disconnected{background:var(--primary);color:#fff}@media (max-width: 600px){.card{padding:20px}h1{font-size:1.8rem}h2{font-size:1.3rem}.phase-timer{font-size:1.8rem}.drawing-area{flex-direction:column}.drawing-toolbar{width:100%;flex-direction:row;flex-wrap:wrap;gap:12px}.toolbar-actions{flex-direction:row}.action-btn,.submit-btn{width:auto;padding:8px 14px}.game-layout{flex-direction:column;align-items:stretch}.status-panel{position:static;width:100%;flex-direction:row;flex-wrap:wrap;padding:10px;gap:4px}.status-panel-player{padding:4px 8px;font-size:.8rem}.results-layout{flex-direction:column;align-items:stretch}.results-sidebar{position:static;width:100%}.results-player-list{flex-direction:row;flex-wrap:wrap}.reactions-widget{left:8px;width:200px}}