@import "https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&family=Outfit:wght@400;500;600;700&display=swap";:root{--bg-hue:222;--bg-sat:47%;--bg-light:6%;--bg-app:hsl(var(--bg-hue), var(--bg-sat), var(--bg-light));--bg-app-glass:hsla(var(--bg-hue), var(--bg-sat), calc(var(--bg-light) + 3%), .65);--primary-hue:250;--primary-sat:95%;--primary-light:68%;--primary:hsl(var(--primary-hue), var(--primary-sat), var(--primary-light));--primary-glow:hsla(var(--primary-hue), var(--primary-sat), var(--primary-light), .35);--accent-hue:180;--accent-sat:100%;--accent-light:45%;--accent:hsl(var(--accent-hue), var(--accent-sat), var(--accent-light));--accent-glow:hsla(var(--accent-hue), var(--accent-sat), var(--accent-light), .35);--success:#26d968;--success-glow:#26d96833;--danger:#e8304f;--text-main:#f9fafb;--text-muted:#a7b1be;--text-dark:#1f242e;--border-color:#3d475c4d;--border-light:#ffffff14;--font-family:"Poppins", "Outfit", sans-serif;--transition-smooth:all .25s cubic-bezier(.4, 0, .2, 1);--transition-fast:all .15s ease}*{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:var(--border-color) transparent;margin:0;padding:0}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:var(--border-color);border-radius:4px}::-webkit-scrollbar-thumb:hover{background:var(--text-muted)}body{background-color:var(--bg-app);color:var(--text-main);font-family:var(--font-family);-webkit-font-smoothing:antialiased;background-image:radial-gradient(at 10% 10%,#6347eb14 0,#0000 50%),radial-gradient(at 90% 90%,#47ebeb14 0,#0000 50%),radial-gradient(at 50% 10%,#3352991a 0,#0000 60%);min-height:100vh;overflow-x:hidden}#root{flex-direction:column;min-height:100vh;display:flex}.app-container{flex-direction:column;flex:1;width:100%;max-width:1400px;margin:0 auto;padding:1rem 1.5rem;display:flex}.app-header{border-bottom:1px solid var(--border-light);justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding-bottom:1rem;display:flex}.logo{letter-spacing:-1px;background:linear-gradient(135deg, var(--text-main) 30%, var(--primary) 70%, var(--accent));-webkit-text-fill-color:transparent;-webkit-background-clip:text;align-items:center;gap:.5rem;font-family:Outfit,sans-serif;font-size:1.8rem;font-weight:700;display:flex}.logo span{color:var(--accent)}.glass-panel{background:var(--bg-app-glass);-webkit-backdrop-filter:blur(16px);border:1px solid var(--border-light);transition:var(--transition-smooth);border-radius:16px;box-shadow:0 8px 32px #0000005e}.glass-card{border:1px solid var(--border-light);transition:var(--transition-smooth);background:#ffffff05;border-radius:12px;padding:1rem}.glass-card:hover{border-color:hsla(var(--primary-hue), var(--primary-sat), var(--primary-light), .2);background:#ffffff0a}.btn{font-family:var(--font-family);cursor:pointer;transition:var(--transition-fast);border:none;border-radius:10px;outline:none;justify-content:center;align-items:center;gap:.5rem;padding:.75rem 1.5rem;font-size:.95rem;font-weight:600;display:inline-flex}.btn-primary{background:linear-gradient(135deg, var(--primary) 0%, hsl(var(--primary-hue), var(--primary-sat), 55%) 100%);color:var(--text-main);box-shadow:0 4px 15px var(--primary-glow)}.btn-primary:hover{box-shadow:0 6px 20px hsla(var(--primary-hue), var(--primary-sat), var(--primary-light), .5);background:linear-gradient(135deg, hsl(var(--primary-hue), var(--primary-sat), 75%) 0%, var(--primary) 100%);transform:translateY(-2px)}.btn-primary:active{transform:translateY(0)}.btn-accent{background:linear-gradient(135deg, var(--accent) 0%, hsl(var(--accent-hue), var(--accent-sat), 35%) 100%);color:var(--text-main);box-shadow:0 4px 15px var(--accent-glow)}.btn-accent:hover{box-shadow:0 6px 20px hsla(var(--accent-hue), var(--accent-sat), var(--accent-light), .5);transform:translateY(-2px)}.btn-secondary{color:var(--text-main);border:1px solid var(--border-light);background:#ffffff0d}.btn-secondary:hover{border-color:var(--text-muted);background:#ffffff1a}.btn-danger{background:var(--danger);color:var(--text-main)}.btn-danger:hover{background:#cf1736}.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none!important;transform:none!important}.input-group{text-align:left;flex-direction:column;gap:.5rem;margin-bottom:1.25rem;display:flex}.input-group label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.5px;font-size:.85rem;font-weight:500}.input-field{border:1px solid var(--border-light);color:var(--text-main);font-size:1rem;font-family:var(--font-family);transition:var(--transition-fast);background:#0003;border-radius:10px;outline:none;padding:.75rem 1rem}.input-field:focus{border-color:var(--primary);box-shadow:0 0 0 2px var(--primary-glow);background:#0000004d}.auth-container{flex-direction:column;flex:1;justify-content:center;align-items:center;display:flex}.auth-box{width:100%;max-width:480px;padding:2.5rem}.auth-tabs{border-bottom:1px solid var(--border-light);gap:1rem;margin-bottom:2rem;padding-bottom:.5rem;display:flex}.auth-tab{color:var(--text-muted);cursor:pointer;font-size:1.1rem;font-weight:600;font-family:var(--font-family);transition:var(--transition-fast);background:0 0;border:none;flex:1;padding:.5rem;position:relative}.auth-tab.active{color:var(--primary)}.auth-tab.active:after{content:"";background-color:var(--primary);width:100%;height:2px;box-shadow:0 0 8px var(--primary);position:absolute;bottom:-9px;left:0}.game-grid{flex:1;grid-template-columns:1fr 340px;gap:1.5rem;min-height:0;display:grid}@media (width<=1024px){.game-grid{grid-template-rows:auto auto auto;grid-template-columns:1fr;overflow-y:auto}}.panel-column{flex-direction:column;height:100%;min-height:0;display:flex}.leaderboard-title{border-bottom:1px solid var(--border-light);align-items:center;gap:.5rem;padding:1.25rem;font-size:1.1rem;font-weight:700;display:flex}.player-list{flex:1;padding:.75rem;list-style:none;overflow-y:auto}.player-item{transition:var(--transition-fast);border:1px solid #0000;border-radius:10px;align-items:center;gap:.75rem;margin-bottom:.5rem;padding:.75rem;display:flex}.player-item.self{background:hsla(var(--primary-hue), var(--primary-sat), var(--primary-light), .08);border-color:hsla(var(--primary-hue), var(--primary-sat), var(--primary-light), .2)}.player-item.clue-master{background:hsla(var(--accent-hue), var(--accent-sat), var(--accent-light), .06);border-color:hsla(var(--accent-hue), var(--accent-sat), var(--accent-light), .15)}.player-item.solved{background:#26d9680d;border-color:#26d9684d}.player-item.guessed-part{background:#f9bc060d;border-color:#f9bc064d}.player-avatar{width:40px;height:40px;color:var(--text-dark);border-radius:50%;justify-content:center;align-items:center;font-size:1rem;font-weight:700;display:flex;box-shadow:0 2px 8px #0003}.player-info{text-align:left;flex:1}.player-name{align-items:center;gap:.25rem;font-size:.95rem;font-weight:600;display:flex}.player-score{color:var(--text-muted);font-size:.85rem}.badge{text-transform:uppercase;border-radius:4px;padding:.15rem .4rem;font-size:.65rem;font-weight:700}.badge-master{background:var(--accent);color:var(--text-dark)}.badge-solved{background:var(--success);color:var(--text-main)}.leaderboard-panel{flex-direction:row!important;align-items:center!important;gap:1rem!important;width:100%!important;height:auto!important;min-height:auto!important;margin-bottom:1rem!important;padding:.6rem 1.25rem!important;display:flex!important}.leaderboard-panel .leaderboard-title{color:var(--primary)!important;white-space:nowrap!important;border-bottom:none!important;align-items:center!important;gap:.4rem!important;padding:0!important;font-size:.95rem!important;font-weight:700!important;display:flex!important}.leaderboard-panel .player-list{scrollbar-width:none;white-space:nowrap!important;flex-direction:row!important;flex:1!important;gap:.75rem!important;margin:0!important;padding:.25rem!important;list-style:none!important;display:flex!important;overflow:auto hidden!important}.leaderboard-panel .player-list::-webkit-scrollbar{display:none}.leaderboard-panel .player-item{background:#ffffff05!important;border:1px solid #ffffff0d!important;border-radius:8px!important;flex-shrink:0!important;align-items:center!important;gap:.5rem!important;margin-bottom:0!important;padding:.35rem .6rem!important;font-size:.85rem!important;display:inline-flex!important}.leaderboard-panel .player-avatar{width:28px!important;height:28px!important;font-size:.8rem!important}.leaderboard-panel .player-info{flex-direction:column!important;flex:none!important;justify-content:center!important;align-items:flex-start!important;gap:.1rem!important;display:flex!important}.leaderboard-panel .player-name{font-size:.85rem!important;font-weight:600!important;line-height:1.1!important}.leaderboard-panel .player-score{color:var(--text-muted)!important;font-size:.75rem!important;line-height:1.1!important}.lobby-header{justify-content:space-between;align-items:center;gap:1rem;width:100%;margin-bottom:1.5rem;display:flex}.lobby-buttons{gap:.75rem;display:flex}.lobby-grid{grid-template-columns:1fr 1fr;gap:1.5rem;width:100%;display:grid}@media (width<=768px){.lobby-grid{grid-template-columns:1fr}}@media (width<=600px){.lobby-header{flex-direction:column;align-items:flex-start;gap:.75rem}.lobby-header h2{font-size:1.5rem!important}.lobby-buttons{gap:.5rem;width:100%;display:flex}.lobby-buttons button{flex:1;justify-content:center}}.chat-container{flex-direction:column;height:100%;display:flex}.chat-messages{flex-direction:column;flex:1;gap:.75rem;padding:1.25rem;display:flex;overflow-y:auto}.chat-message{text-align:left;background:#ffffff05;border:1px solid #ffffff05;border-radius:8px;padding:.5rem .75rem;font-size:.9rem;line-height:1.4}.chat-message.system{border-color:var(--border-light);color:var(--text-muted);text-align:center;background:#3d475c26;font-style:italic}.chat-message.correct{color:var(--success);background:#26d9681a;border-color:#26d96833;font-weight:600}.chat-message.part-correct{color:#fbbf24;background:#f9bc061a;border-color:#f9bc0633;font-weight:600}.chat-sender{color:var(--primary);margin-right:.5rem;font-weight:600}.chat-input-area{border-top:1px solid var(--border-light);padding:1rem}.chat-form{gap:.5rem;display:flex}.board-container{flex-direction:column;gap:1.5rem;height:100%;display:flex}.timer-header{justify-content:space-between;align-items:center;padding:.5rem .75rem;display:flex}.timer-bar-wrapper{background:#0000004d;border-radius:4px;width:100%;height:8px;position:relative;overflow:hidden}.timer-bar{background:linear-gradient(90deg, var(--primary), var(--accent));height:100%;box-shadow:0 0 10px var(--primary-glow);transition:width .2s linear}.timer-bar.warning{background:linear-gradient(90deg,#f59e0b,#ef4444);box-shadow:0 0 10px #ef444466}.clues-grid{grid-template-columns:repeat(3,1fr);gap:1rem;display:grid}@media (width<=768px){.clues-grid{grid-template-columns:1fr}}.clue-card{text-align:center;flex-direction:column;justify-content:center;min-height:140px;padding:1.5rem;display:flex}.clue-label{text-transform:uppercase;color:var(--text-muted);letter-spacing:1px;margin-bottom:.5rem;font-size:.75rem;font-weight:700}.clue-text{font-size:1.1rem;font-weight:500;line-height:1.5}.clue-input{border:1px dashed var(--border-light);width:100%;color:var(--text-main);font-family:var(--font-family);resize:none;background:#00000040;border-radius:8px;outline:none;padding:.5rem;font-size:.95rem}.clue-input:focus{border-color:var(--accent);background:#0006}.word-blanks-container{border:1px solid var(--border-light);background:#ffffff03;border-radius:16px;flex-direction:column;align-items:center;gap:1.5rem;padding:2rem;display:flex}.joined-word-layout{flex-wrap:wrap;justify-content:center;align-items:center;gap:1.5rem;display:flex}.part-word{background:#ffffff05;border:1px solid #ffffff0a;border-radius:12px;gap:.5rem;padding:.5rem 1rem;display:flex}.letter-slot{border-bottom:3px solid var(--text-muted);text-transform:uppercase;width:36px;height:46px;color:var(--text-main);justify-content:center;align-items:center;font-family:Outfit,sans-serif;font-size:1.5rem;font-weight:700;display:flex}.letter-slot.revealed{border-bottom-color:var(--primary);color:var(--primary);text-shadow:0 0 10px var(--primary-glow);animation:.2s cubic-bezier(.175,.885,.32,1.275) popIn}.continuous-line{border-bottom:3px solid var(--text-muted);height:46px}.continuous-line.full{width:120px}.continuous-line.partial{width:90px}.plus-sign{color:var(--text-muted);font-size:2rem;font-weight:500}.hints-container{flex-wrap:wrap;justify-content:center;gap:1rem;display:flex}.hint-badge{border:1px solid var(--border-light);background:#ffffff0d;border-radius:8px;align-items:center;gap:.5rem;padding:.5rem 1rem;font-size:.85rem;font-weight:500;display:flex}.hint-badge.revealed{color:var(--accent);background:#00e6e61a;border-color:#00e6e64d}.master-controls{border-top:1px solid var(--border-light);justify-content:center;gap:1rem;padding:1rem;display:flex}.virtual-keyboard{flex-direction:column;gap:.4rem;width:100%;max-width:600px;margin:0 auto;padding:.5rem;display:flex}.keyboard-row{justify-content:center;gap:.4rem;display:flex}.key-btn{border:1px solid var(--border-light);color:var(--text-main);cursor:pointer;min-width:32px;height:44px;transition:var(--transition-fast);-webkit-user-select:none;user-select:none;background:#ffffff0f;border-radius:6px;flex:1;justify-content:center;align-items:center;font-size:1rem;font-weight:600;display:flex}.key-btn:hover{border-color:var(--text-muted);background:#ffffff26}.key-btn:active{transform:scale(.95)}.key-btn.action-key{background:hsla(var(--primary-hue), var(--primary-sat), var(--primary-light), .15);border-color:hsla(var(--primary-hue), var(--primary-sat), var(--primary-light), .3);flex:1.5}.key-btn.action-key:hover{background:hsla(var(--primary-hue), var(--primary-sat), var(--primary-light), .25)}.overlay-container{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:100;background:#000000bf;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.modal-box{text-align:center;width:100%;max-width:500px;padding:2rem}.word-reveal-title{color:var(--accent);margin:1rem 0;font-family:Outfit,sans-serif;font-size:2.2rem;font-weight:700}.word-parts{color:var(--text-muted);margin-bottom:2rem;font-size:1.2rem}@keyframes popIn{0%{opacity:0;transform:scale(.7)}to{opacity:1;transform:scale(1)}}@keyframes pulse{0%{opacity:.6}50%{opacity:1}to{opacity:.6}}.pulse-text{animation:1.5s ease-in-out infinite pulse}.choice-card-interactive{transition:all .25s cubic-bezier(.4,0,.2,1)}.choice-card-interactive:hover{transform:translateY(-4px)scale(1.02);border-color:var(--primary)!important;box-shadow:0 10px 25px var(--primary-glow)!important;background:#ffffff12!important}.guess-form{align-items:center;gap:.75rem;width:100%;max-width:600px;margin:0 auto;padding:.75rem 1rem;display:flex}.guess-input{flex:1;padding:.6rem .8rem;font-size:1rem}@media (width<=1024px){.game-grid{grid-template-rows:auto auto;grid-template-columns:1fr;overflow-y:auto}.board-panel{order:1}.chat-panel{order:2}}@media (width<=768px){.board-panel{gap:.75rem!important}.clues-grid{grid-template-columns:1fr!important;gap:.75rem!important}.clue-card{text-align:left!important;border-radius:12px!important;min-height:auto!important;padding:1rem!important}.clue-label{margin-bottom:.25rem!important;font-size:.75rem!important}.clue-text{font-size:.95rem!important;line-height:1.4!important}.word-blanks-container{border-radius:12px!important;gap:.5rem!important;padding:.75rem!important}.joined-word-layout{gap:.4rem!important}.part-word{border-radius:8px!important;gap:.2rem!important;padding:.2rem .4rem!important}.letter-slot{border-bottom-width:2px!important;width:24px!important;height:32px!important;font-size:1.05rem!important}.continuous-line{border-bottom-width:2px!important;height:32px!important}.continuous-line.full{width:70px!important}.continuous-line.partial{width:50px!important}.plus-sign{font-size:1.2rem!important}.hints-container{gap:.4rem!important}.hint-badge{border-radius:6px!important;padding:.25rem .5rem!important;font-size:.7rem!important}.guess-form{border-radius:10px!important;gap:.4rem!important;padding:.4rem .6rem!important}.guess-input{border-radius:8px!important;padding:.4rem .6rem!important;font-size:.9rem!important}.virtual-keyboard{border-radius:12px!important;gap:.25rem!important;padding:.25rem!important}.keyboard-row{gap:.25rem!important}.key-btn{border-radius:4px!important;min-width:20px!important;height:36px!important;font-size:.8rem!important}.leaderboard-panel{padding:.4rem .75rem!important}.leaderboard-panel .leaderboard-title{font-size:.85rem!important}.leaderboard-panel .player-list{gap:.5rem!important;padding:.15rem!important}.leaderboard-panel .player-item{border-radius:6px!important;gap:.35rem!important;padding:.25rem .5rem!important}.leaderboard-panel .player-avatar{width:22px!important;height:22px!important;font-size:.7rem!important}.leaderboard-panel .player-name{font-size:.75rem!important}.leaderboard-panel .player-score{font-size:.7rem!important}.chat-panel{max-height:220px!important}.chat-panel .leaderboard-title{padding:.4rem .6rem!important;font-size:.9rem!important}.chat-panel .chat-messages{gap:.35rem!important;max-height:160px!important;padding:.4rem .6rem!important}.chat-panel .chat-message{border-radius:6px!important;padding:.25rem .4rem!important;font-size:.78rem!important}}@media (width<=480px){.app-container{padding:.5rem!important}.logo{font-size:1.5rem!important}.app-header{margin-bottom:1rem!important}.timer-header{padding:.25rem .5rem!important}}
