:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:dark;color:#ffffffde;background-color:#d8e4ff;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}a{font-weight:500;color:#f59e0b;text-decoration:inherit}a:hover{color:#fbbf24}body{margin:0;min-width:320px;min-height:100vh;background-color:#464646;background-image:radial-gradient(circle,rgba(250,247,76,.07) 1.5px,transparent 1.5px);background-size:28px 28px}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1e293b;cursor:pointer;transition:border-color .25s}button:hover{border-color:#f59e0b}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}.container{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:100vh;color:var(--text-primary);padding:2rem;box-sizing:border-box}.setup-panel{display:flex;flex-direction:column;align-items:center;padding:2.5rem 2rem;max-width:640px;width:100%}.heading{display:flex;flex-direction:column;align-items:center;text-align:center;margin-bottom:1.5rem}.icon-wrapper{width:72px;height:72px;background-color:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;margin-bottom:1rem}.icon-wrapper svg{font-size:2.8rem;color:#0f172a}.heading h1{font-size:2.4rem;margin:.5rem 0}.heading h6{font-size:1rem;font-weight:400;color:var(--text-secondary)}.name-form form{display:flex;flex-direction:column;align-items:center;gap:1rem;width:100%;max-width:320px}input{width:100%;padding:.75rem 1rem;font-size:1rem;border-radius:var(--radius-md);border:none;outline:none;background:var(--bg-panel-light);color:var(--text-primary)}input::placeholder{color:var(--text-muted)}input:focus{outline:2px solid var(--accent)}.lobby-actions{display:flex;gap:1.5rem;margin-top:2rem;flex-wrap:wrap;justify-content:center}.lobby-section{background:var(--bg-panel);padding:1.5rem;border-radius:var(--radius-lg);display:flex;flex-direction:column;align-items:center;min-width:280px;color:var(--text-primary)}.lobby-section h3{margin-bottom:.5rem}.lobby-section input{width:100%;margin-top:.5rem}.create-lobby-btn{width:100%;padding:.75rem;margin-top:.75rem;border-radius:999px;border:none;cursor:pointer;background:var(--accent);color:#0f172a;font-size:1rem}.create-lobby-btn:hover{background:var(--accent-soft)}.create-lobby-btn:disabled{opacity:.5;cursor:not-allowed;pointer-events:none}.create-lobby-btn:disabled:hover{background-color:inherit}.divider{margin:1rem 0;opacity:.5}.how-to-play{margin-top:2rem;padding:1rem 1.25rem;max-width:320px;background:var(--bg-panel);border-radius:var(--radius-lg);font-size:.9rem}.how-to-play p{margin-bottom:.5rem;font-weight:700;color:var(--accent);text-align:center}.how-to-play ul{list-style:none;padding:0;margin:0}.how-to-play li{padding-left:1.2rem;margin-bottom:.4rem;color:var(--text-secondary)}.how-to-play li:before{content:"✏️";margin-right:.4rem}.join-error{margin-top:8px;color:var(--danger);font-size:.9rem}@media(max-width:600px){.container{padding:1rem}.setup-panel{padding:1.5rem 1rem}.heading h1{font-size:1.6rem}.heading h6{font-size:.85rem}.icon-wrapper{width:56px;height:56px}.icon-wrapper svg{font-size:2rem}.lobby-actions{gap:1rem}.lobby-section{min-width:0;width:100%;padding:1rem}.how-to-play{max-width:100%}}.toggle-group{display:flex;background:var(--bg-panel-light);border-radius:999px;padding:4px;gap:4px}.toggle-group-btn{flex:1;padding:.5rem 1rem;border-radius:999px;border:none;background:transparent;color:var(--text-secondary);cursor:pointer;font-size:.9rem;transition:background .2s ease,color .2s ease}.toggle-group-btn:hover{background:#ffffff14;color:var(--text-primary)}.toggle-group-btn.active{background:var(--accent);color:#0f172a;font-weight:600}.lobby-page{min-height:100vh;color:var(--text-primary);padding:1.5rem;display:flex;flex-direction:column;align-items:center}.exit-lobby-btn{display:inline-flex;align-items:center;gap:.5rem;background:none;border:none;color:var(--text-secondary);cursor:pointer;font-size:.9rem;margin-bottom:1rem}.exit-lobby-btn:hover{color:var(--text-primary)}.waiting-room-container{max-width:420px;width:100%;background:var(--glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:var(--radius-lg);padding:1.5rem;box-shadow:0 0 30px #0006}.waiting-room-header{text-align:center;margin-bottom:1.5rem}.people-icon{width:56px;height:56px;background:var(--accent);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto .5rem;font-size:1.5rem;color:#0f172a}.invite-code-container{margin-bottom:1.5rem}.invite-code-container .label{font-size:.75rem;color:var(--text-muted)}.invite-code-box{display:flex;align-items:center;justify-content:space-between;background:var(--bg-panel-light);border-radius:var(--radius-sm);padding:.75rem 1rem;margin-top:.25rem}.invite-code-box code{font-size:1.1rem;letter-spacing:2px}.invite-code-box button{background:none;border:none;color:var(--accent);cursor:pointer;font-size:1rem}.players-section{margin-bottom:1.5rem}.players-header{display:flex;align-items:center;gap:.5rem;margin-bottom:.5rem;color:var(--text-secondary)}.players-list{list-style:none;padding:0;margin:0}.player-row{display:flex;align-items:center;gap:.75rem;padding:.5rem 0}.player-avatar{width:32px;height:32px;border-radius:50%;background:var(--accent);color:#0f172a;display:flex;align-items:center;justify-content:center;font-weight:700}.player-name{display:flex;align-items:center;gap:.4rem}.host-icon{color:gold;font-size:.85rem}.start-game-btn{width:100%;padding:.75rem;border-radius:999px;border:none;background:var(--bg-panel-light);color:var(--text-muted);cursor:not-allowed;font-size:1rem}.start-game-btn.active{background:var(--accent);color:#0f172a;cursor:pointer}.player-canvas-container{display:flex;flex-direction:column;align-items:center;gap:.75rem;width:100%}.canvas-wrapper{width:100%;max-width:800px;border:2px solid var(--bg-panel-light);border-radius:var(--radius-md);overflow:hidden;background-color:#fff;position:relative;aspect-ratio:16 / 10;box-shadow:0 4px 20px #00000059;touch-action:none}canvas{width:100%;height:auto;display:block}canvas.eraser-active{cursor:none}.preview-canvas{position:absolute;inset:0;pointer-events:none}.button-container{display:flex;gap:.5rem}.action-button{padding:.5rem 1rem;border:1px solid transparent;border-radius:var(--radius-sm);background:var(--bg-panel);color:var(--text-secondary);cursor:pointer;transition:background .15s,color .15s,border-color .15s;display:flex;align-items:center;gap:.3rem}.action-button:hover{background:var(--bg-panel-light);color:var(--text-primary)}.action-button.active{background:var(--accent);color:#0f172a;border-color:var(--accent)}.action-button.active:hover{background:var(--accent-soft)}.action-button.deactive{opacity:.5}.action-button svg{font-size:1.1rem}.game-page{min-height:calc(100vh - 2rem);display:flex;flex-direction:column;margin:1rem;padding:1.25rem 1.5rem;gap:1rem;background:var(--glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:var(--radius-lg);color:var(--text-primary)}.game-header{display:flex;justify-content:space-between;align-items:center;background:var(--bg-panel);border-radius:var(--radius-md);padding:.75rem 1.25rem;box-shadow:0 2px 12px #0000004d}.game-timer{display:flex;flex-direction:column}.timer-number{font-size:2.25rem;font-weight:700;line-height:1;color:var(--accent)}.timer-label{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}.game-word{text-align:center}.word-label{display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted)}.word-value{font-size:1.6rem;font-weight:800}.leave-button{background:transparent;border:1px solid rgba(255,255,255,.2);color:var(--text-secondary);padding:.4rem 1rem;border-radius:var(--radius-sm);font-size:.8rem;cursor:pointer;transition:background .15s,color .15s}.leave-button:hover{background:var(--danger);color:#fff;border-color:var(--danger)}.game-body{flex:1;display:grid;grid-template-columns:240px 1fr 240px;gap:1rem;min-height:0}.game-sidebar{display:flex;flex-direction:column;gap:1rem;min-height:0;overflow-y:auto}.sidebar-panel{background:var(--bg-panel);border-radius:var(--radius-md);padding:1rem;box-shadow:0 2px 12px #00000040}.panel-title{font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-muted);margin:0 0 .75rem}.game-center{display:flex;align-items:flex-start;justify-content:center;min-height:0}.player-scores-container{display:flex;flex-direction:column;gap:.5rem}.player-score{display:flex;align-items:center;gap:.65rem;padding:.35rem .5rem;border-radius:var(--radius-sm);transition:background .15s}.player-score:hover{background:var(--bg-panel-light)}.player-initial{width:30px;height:30px;border-radius:50%;background:var(--accent);color:#0f172a;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:.85rem;flex-shrink:0}.player-info{display:flex;justify-content:space-between;width:100%;font-size:.85rem}.player-name{font-weight:500;color:var(--text-primary)}.player-score-value{font-weight:700;color:var(--accent)}.guess-display h3{display:none}.guess-display ul{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.4rem}.guess-display li{display:flex;justify-content:space-between;align-items:center;padding:.45rem .6rem;background:var(--bg-panel-light);border-radius:var(--radius-sm);font-size:.85rem}.guess-display li span:first-child{text-transform:capitalize;color:var(--text-primary)}.guess-display li span:last-child{font-weight:600;color:var(--accent)}.side-view-container{display:flex;flex-direction:column;gap:.75rem}.side-player{display:flex;flex-direction:column;align-items:center;gap:.3rem}.side-player canvas{width:100%;height:auto;border:2px solid var(--bg-panel-light);border-radius:var(--radius-sm);background:#fff}.player-label{font-size:.75rem;color:var(--text-muted)}@media(max-width:768px){.game-page{margin:.25rem;padding:.75rem;gap:.75rem;min-height:100vh;border-radius:var(--radius-md)}.game-header{padding:.5rem .75rem;gap:.5rem}.timer-number{font-size:1.5rem}.word-value{font-size:1.2rem}.leave-button{padding:.3rem .6rem;font-size:.7rem}.game-body{grid-template-columns:1fr;gap:.75rem}.game-center{order:-1}.game-sidebar:last-child{order:0}.game-sidebar{gap:.5rem}.sidebar-panel{padding:.75rem}.side-view-container{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.5rem}}.start-round{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;text-align:center;color:var(--text-primary);padding:2rem;box-sizing:border-box}.round-panel{display:flex;flex-direction:column;align-items:center;gap:2rem;padding:3rem 3.5rem}.round-meta{display:flex;align-items:baseline;gap:.5rem;font-size:1.1rem;opacity:.8}.round-label{text-transform:uppercase;letter-spacing:.08em;font-size:.75rem}.round-count{font-weight:600}.word-card{background:#ffffff14;padding:2rem 3rem;border-radius:16px;box-shadow:0 10px 30px #00000040}.word-label{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;opacity:.7;margin-bottom:.5rem}.word{font-size:3rem;font-weight:800;margin:0}.start-round-error{opacity:.7}@media(max-width:600px){.start-round{padding:1rem}.round-panel{padding:1.5rem 1rem}.word{font-size:2rem}.word-card{padding:1.25rem 1.5rem}.countdown-number{font-size:3rem}}.round-end{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2rem;text-align:center;color:var(--text-primary);padding:2rem;box-sizing:border-box}.round-end-panel{display:flex;flex-direction:column;align-items:center;gap:2rem;padding:3rem 3.5rem}.countdown{display:flex;flex-direction:column;align-items:center}.countdown-number{font-size:4rem;font-weight:700;line-height:1;color:var(--accent)}.countdown-text{font-size:.85rem;opacity:.7;margin-top:.25rem}.winner-card{background:#ffffff14;padding:2.5rem 3rem;border-radius:16px;box-shadow:0 10px 30px #00000040;min-width:320px}.winner-label{display:block;font-size:.75rem;text-transform:uppercase;letter-spacing:.1em;opacity:.7;margin-bottom:.5rem}.winner-name{font-size:2.5rem;font-weight:800;margin:0 0 1.5rem}.guess-info{display:flex;flex-direction:column;gap:.75rem}.guess-row{display:flex;justify-content:space-between;font-size:.95rem;opacity:.9}.guess-label{text-transform:uppercase;letter-spacing:.05em;font-size:.75rem;opacity:.7}.guess-value{font-weight:600}.round-end-error{opacity:.7}.winning-canvas-container{margin-top:2rem;display:flex;flex-direction:column;align-items:center;gap:1rem}.canvas-label{font-size:.9rem;color:var(--text-muted);font-weight:500}.winning-canvas{border:2px solid var(--glass-border);border-radius:8px;box-shadow:0 2px 8px #0000004d}@media(max-width:600px){.round-end{padding:1rem}.round-end-panel{padding:1.5rem 1rem}.winner-card{min-width:0;width:100%;padding:1.5rem 1rem;box-sizing:border-box}.winner-name{font-size:1.6rem}.countdown-number{font-size:3rem}.winning-canvas{max-width:100%;height:auto}}.game-end-page{display:flex;flex-direction:column;align-items:center;min-height:100vh;padding:2rem 1.5rem;color:var(--text-primary)}.game-end-panel{display:flex;flex-direction:column;align-items:center;padding:2.5rem 2rem;width:100%;max-width:960px}.game-end-title{font-size:2.5rem;margin:0 0 .5rem}.podium{display:flex;justify-content:center;align-items:flex-end;gap:1.25rem;margin:1.5rem 0 2rem}.podium-step{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;border-radius:var(--radius-sm) var(--radius-sm) 0 0;width:110px;padding-bottom:.75rem;transition:transform .2s}.podium-step:hover{transform:translateY(-4px)}.podium-step.visual-0{order:0}.podium-step.visual-1{order:1}.podium-step.visual-2{order:2}.rank-1{height:160px;background:linear-gradient(180deg,gold,#c9a600)}.rank-2{height:120px;background:linear-gradient(180deg,silver,#8e8e8e)}.rank-3{height:100px;background:linear-gradient(180deg,#cd7f32,#9a5e20)}.podium-score{font-weight:700;font-size:1.4rem;color:#0f172a}.podium-name{font-size:.9rem;text-align:center;color:#0f172a}.trophy{margin-left:.25rem;color:#fff;font-size:1.1rem;vertical-align:middle}.leaderboard{width:320px;background:var(--bg-panel);border-radius:var(--radius-md);padding:.75rem 1rem;display:flex;flex-direction:column;gap:.35rem;box-shadow:0 2px 12px #00000040}.leaderboard-row{display:flex;align-items:center;padding:.45rem .5rem;border-radius:var(--radius-sm)}.leaderboard-row:hover{background:var(--bg-panel-light)}.lb-rank{width:28px;font-weight:700;color:var(--text-muted)}.lb-name{flex:1;text-align:left}.lb-score{font-weight:700;color:var(--accent)}.gallery-section{width:100%;max-width:900px;margin-top:2.5rem}.gallery-title{text-align:center;font-size:1.1rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted);margin:0 0 1rem}.gallery-wrapper{display:flex;align-items:center;gap:.75rem;justify-content:center}.gallery-arrow{flex-shrink:0;width:40px;height:40px;border-radius:50%;border:1px solid var(--bg-panel-light);background:var(--bg-panel);color:var(--text-secondary);font-size:1.5rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s,opacity .15s;padding:0}.gallery-arrow:hover:not(:disabled){background:var(--accent);color:#0f172a;border-color:var(--accent)}.gallery-arrow:disabled{opacity:.25;cursor:default}.gallery-track{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1rem;flex:1;min-width:0;max-width:780px}.canvas-item{display:flex;justify-content:center;transition:transform .25s,opacity .25s}.canvas-item{opacity:.5;transform:scale(.9)}.canvas-item.active{opacity:1;transform:scale(1)}.canvas-card{background:var(--bg-panel);border-radius:var(--radius-md);padding:.75rem;box-shadow:0 4px 16px #0000004d;width:240px;transition:transform .2s,box-shadow .2s}.canvas-card.placeholder{visibility:hidden}.canvas-item.active .canvas-card{box-shadow:0 8px 28px #00000073}.canvas-card canvas{width:100%;height:auto;border-radius:var(--radius-sm);display:block}.canvas-card.no-winner{opacity:.55}.canvas-card.no-winner canvas{filter:grayscale(1)}.canvas-info{display:flex;flex-direction:column;gap:.15rem;margin-top:.5rem}.canvas-round{font-size:.7rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-muted)}.canvas-word{font-weight:600;font-size:1rem;color:var(--text-primary)}.canvas-player{font-size:.8rem;color:var(--text-secondary)}.back-to-lobby-btn{margin-top:2rem;padding:.75rem 2.5rem;font-size:1rem;font-weight:600;border:none;border-radius:999px;background:var(--accent);color:#0f172a;cursor:pointer;transition:background .15s,transform .15s}.back-to-lobby-btn:hover{background:var(--accent-soft);transform:scale(1.03)}@media(max-width:600px){.game-end-page{padding:1rem .75rem}.game-end-panel{padding:1.5rem .75rem}.game-end-title{font-size:1.6rem}.podium{gap:.75rem}.podium-step{width:80px}.leaderboard{width:90%}.gallery-track{grid-template-columns:1fr;max-width:280px;margin:0 auto}.canvas-item:not(.active){display:none}.canvas-card{width:100%}.back-to-lobby-btn{padding:.65rem 2rem;font-size:.9rem}}#root{width:100%;margin:0 auto;text-align:center;--bg-page: #0f172a;--bg-panel: #1e293b;--bg-panel-light: #334155;--accent: #f59e0b;--accent-soft: #fbbf24;--accent-glow: rgba(245, 158, 11, .25);--text-primary: #f8fafc;--text-secondary: #cbd5e1;--text-muted: #94a3b8;--danger: #ef4444;--success: #22c55e;--glass-bg: rgba(15, 23, 42, .82);--glass-border: rgba(255, 255, 255, .08);--radius-lg: 16px;--radius-md: 12px;--radius-sm: 8px}.card{padding:2em}.glass-panel{background:var(--glass-bg);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:var(--radius-lg)}