:root{--bg-primary:#0a0813;--bg-secondary:#121020d9;--glass-bg:#19162f73;--glass-border:#ffffff14;--neon-violet:#a855f7;--neon-pink:#f43f5e;--neon-cyan:#06b6d4;--text-primary:#f8fafc;--text-secondary:#94a3b8;--glow-shadow:0 0 20px #a855f766;--glow-shadow-pink:0 0 20px #f43f5e66;--font-display:"Orbitron", sans-serif;--font-sans:"Outfit", sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-sans);background-color:var(--bg-primary);color:var(--text-primary);background-image:radial-gradient(at 10% 20%,#a855f726 0,#0000 50%),radial-gradient(at 90% 80%,#f43f5e26 0,#0000 50%),radial-gradient(#06b6d40d 0,#0000 50%);background-attachment:fixed;flex-direction:column;min-height:100vh;display:flex;overflow-x:hidden}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:#ffffff05}::-webkit-scrollbar-thumb{background:#a855f74d;border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#a855f799}.glass-panel{background:var(--glass-bg);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border);border-radius:16px;transition:all .3s cubic-bezier(.4,0,.2,1);box-shadow:0 8px 32px #0000005e}.glass-panel:hover{border-color:#a855f740;box-shadow:0 8px 32px #a855f71a}.glow-text-violet{text-shadow:0 0 10px #a855f799;color:var(--text-primary)}.glow-text-pink{text-shadow:0 0 10px #f43f5e99;color:var(--text-primary)}.btn-cyber{cursor:pointer;background:linear-gradient(135deg, var(--neon-violet), var(--neon-pink));color:#fff;font-family:var(--font-display);letter-spacing:1px;box-shadow:var(--glow-shadow);border:none;border-radius:8px;justify-content:center;align-items:center;gap:8px;padding:12px 28px;font-size:14px;font-weight:700;transition:all .2s;display:inline-flex;position:relative;overflow:hidden}.btn-cyber:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 0 30px #f43f5eb3}.btn-cyber:active:not(:disabled){transform:translateY(0)}.btn-cyber:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.btn-cyber-secondary{cursor:pointer;color:var(--text-primary);border:1px solid var(--glass-border);font-family:var(--font-display);letter-spacing:1px;background:#ffffff0d;border-radius:8px;justify-content:center;align-items:center;gap:8px;padding:12px 28px;font-size:14px;font-weight:700;transition:all .2s;display:inline-flex}.btn-cyber-secondary:hover{border-color:var(--neon-cyan);background:#ffffff1a;box-shadow:0 0 15px #06b6d44d}.input-cyber{border:1px solid var(--glass-border);color:var(--text-primary);font-family:var(--font-sans);background:#ffffff08;border-radius:8px;outline:none;width:100%;padding:14px 20px;font-size:16px;transition:all .2s}.input-cyber:focus{border-color:var(--neon-violet);background:#ffffff0f;box-shadow:0 0 15px #a855f74d}header{border-bottom:1px solid var(--glass-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:100;background:#0a0813cc;justify-content:space-between;align-items:center;padding:20px 40px;display:flex;position:sticky;top:0}.logo{font-family:var(--font-display);letter-spacing:2px;background:linear-gradient(135deg, var(--neon-violet), var(--neon-cyan));-webkit-text-fill-color:transparent;-webkit-background-clip:text;align-items:center;gap:8px;font-size:24px;font-weight:900;display:flex}.logo-dot{background:var(--neon-pink);width:8px;height:8px;box-shadow:var(--glow-shadow-pink);border-radius:50%;animation:1.5s infinite pulse}@keyframes pulse{0%{opacity:.7;transform:scale(.9)}50%{opacity:1;box-shadow:0 0 15px var(--neon-pink);transform:scale(1.2)}to{opacity:.7;transform:scale(.9)}}.lobby-container{text-align:center;width:90%;max-width:500px;margin:60px auto;padding:40px}.lobby-title{font-family:var(--font-display);margin-bottom:24px;font-size:28px}.role-select{gap:16px;margin-bottom:24px;display:flex}.role-card{cursor:pointer;border:1px solid var(--glass-border);background:#ffffff03;border-radius:12px;flex-direction:column;flex:1;align-items:center;gap:8px;padding:20px;transition:all .2s;display:flex}.role-card.active{border-color:var(--neon-violet);background:#a855f714;box-shadow:0 0 15px #a855f733}.role-card:hover{background:#ffffff08}.game-layout{flex:1;grid-template-columns:280px 1fr 380px;gap:24px;max-width:1600px;height:100%;margin:0 auto;padding:24px;display:grid;overflow:hidden}@media (width<=1200px){.game-layout{grid-template-rows:auto auto auto;grid-template-columns:1fr;height:auto;overflow-y:auto}.game-arena{height:auto;min-height:440px;overflow:visible}}.player-list-panel{flex-direction:column;height:100%;padding:20px;display:flex}.panel-title{font-family:var(--font-display);letter-spacing:1px;border-bottom:1px solid var(--glass-border);justify-content:space-between;align-items:center;margin-bottom:16px;padding-bottom:10px;font-size:16px;display:flex}.player-count{color:var(--neon-cyan);background:#ffffff1a;border-radius:20px;padding:2px 8px;font-size:12px}.players-container{flex-direction:column;flex:1;gap:10px;display:flex;overflow-y:auto}.player-item{background:#ffffff05;border:1px solid #0000;border-radius:8px;justify-content:space-between;align-items:center;padding:12px 16px;display:flex}.player-item.is-me{background:#06b6d40d;border-color:#06b6d433}.player-item.is-active{background:#f43f5e14;border-color:#f43f5e4d;animation:1.5s infinite pulse-border}@keyframes pulse-border{0%{border-color:#f43f5e33}50%{border-color:#f43f5e99}to{border-color:#f43f5e33}}.badge-host{font-size:10px;font-family:var(--font-display);background:linear-gradient(135deg, var(--neon-violet), var(--neon-pink));border-radius:4px;padding:2px 6px;font-weight:700}.game-arena{flex-direction:column;justify-content:center;align-items:center;height:100%;display:flex;position:relative;overflow:hidden}.wheel-wrapper{justify-content:center;align-items:center;margin-bottom:24px;display:flex;position:relative}.wheel-pointer{z-index:10;border-left:20px solid #0000;border-right:20px solid #0000;border-top:30px solid var(--neon-pink);filter:drop-shadow(0 0 8px #f43f5ecc);width:0;height:0;position:absolute;top:-15px}.task-card{z-index:20;text-align:center;opacity:0;pointer-events:none;width:90%;max-width:420px;max-height:90%;padding:30px;transition:all .4s cubic-bezier(.34,1.56,.64,1);position:absolute;top:50%;left:50%;overflow-y:auto;transform:translate(-50%,-50%)scale(.9)}.task-card.active{opacity:1;pointer-events:auto;transform:translate(-50%,-50%)scale(1)}.task-type{font-family:var(--font-display);letter-spacing:2px;margin-bottom:12px;font-size:24px;font-weight:900}.task-type.truth{color:var(--neon-cyan);text-shadow:0 0 10px #06b6d480}.task-type.dare{color:var(--neon-pink);text-shadow:0 0 10px #f43f5e80}.task-target{color:var(--text-secondary);margin-bottom:16px;font-size:14px}.task-text{margin-bottom:24px;font-size:18px;line-height:1.6}.chat-panel{flex-direction:column;height:100%;display:flex;overflow:hidden}.chat-history{flex-direction:column;flex:1;gap:12px;padding:16px;display:flex;overflow-y:auto}.chat-bubble{flex-direction:column;align-self:flex-start;max-width:80%;display:flex}.chat-bubble.is-me{align-self:flex-end}.chat-sender{color:var(--text-secondary);margin-bottom:4px;margin-left:4px;font-size:11px}.chat-bubble.is-me .chat-sender{text-align:right;margin-right:4px}.chat-content-box{border:1px solid var(--glass-border);word-break:break-word;background:#ffffff0a;border-radius:0 12px 12px;padding:10px 14px;position:relative}.chat-bubble.is-me .chat-content-box{background:#a855f726;border-color:#a855f740;border-radius:12px 0 12px 12px}.chat-time{color:#ffffff4d;text-align:right;margin-top:4px;font-size:9px}.chat-input-area{border-top:1px solid var(--glass-border);flex-direction:column;gap:8px;padding:12px 16px;display:flex}.chat-input-row{align-items:center;gap:8px;display:flex}.chat-toolbar{align-items:center;gap:10px;padding-left:4px;display:flex}.tool-btn{color:var(--text-secondary);cursor:pointer;background:0 0;border:none;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;font-size:18px;transition:color .2s,transform .1s;display:flex}.tool-btn:hover{color:var(--neon-cyan);background:#ffffff0d}.tool-btn:active{transform:scale(.95)}.media-embed{border:1px solid #ffffff1a;border-radius:8px;max-width:100%;margin-top:4px}.voice-message-player{background:#0003;border-radius:8px;align-items:center;gap:10px;margin-top:4px;padding:8px;display:flex}.voice-icon{color:var(--neon-cyan);animation:1.5s infinite pulse}.download-link{color:var(--neon-cyan);align-items:center;gap:4px;margin-top:4px;font-size:12px;text-decoration:none;display:inline-flex}.download-link:hover{text-decoration:underline}.recording-bar{background:#f43f5e26;border:1px solid #f43f5e4d;border-radius:8px;justify-content:space-between;align-items:center;padding:8px 12px;font-size:13px;display:flex}.recording-indicator{align-items:center;gap:8px;display:flex}.recording-dot{background:var(--neon-pink);border-radius:50%;width:8px;height:8px;animation:1s infinite pulse}.camera-modal{z-index:200;background:#000000d9;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.camera-box{flex-direction:column;align-items:center;gap:16px;width:90%;max-width:600px;padding:24px;display:flex;position:relative}.camera-preview{aspect-ratio:4/3;object-fit:cover;border:1px solid var(--glass-border);background:#000;border-radius:12px;width:100%}.camera-controls{justify-content:center;gap:16px;width:100%;display:flex}.emoji-popover{background:var(--bg-secondary);border:1px solid var(--glass-border);z-index:110;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border-radius:12px;grid-template-columns:repeat(6,1fr);gap:8px;padding:12px;display:grid;position:absolute;bottom:80px;left:16px;box-shadow:0 10px 25px #00000080}.emoji-btn{cursor:pointer;background:0 0;border:none;border-radius:4px;padding:4px;font-size:20px;transition:background .1s}.emoji-btn:hover{background:#ffffff1a}.modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:999;background:#000000b3;justify-content:center;align-items:center;width:100vw;height:100vh;animation:.2s ease-out fadeIn;display:flex;position:fixed;top:0;left:0}.modal-content{text-align:center;border:1px solid var(--neon-violet);border-radius:16px;flex-direction:column;gap:16px;width:95%;max-width:400px;padding:30px;animation:.3s cubic-bezier(.34,1.56,.64,1) scaleUp;display:flex;box-shadow:0 0 25px #a855f74d}@media (width<=768px){header{padding:12px 16px}.logo{font-size:20px}.logo-dot{width:6px;height:6px}.game-layout{grid-template-rows:auto auto auto;grid-template-columns:1fr;gap:16px;height:auto;padding:12px;overflow-y:auto}.game-arena{height:auto;min-height:440px;overflow:visible}.player-list-panel{height:200px}.chat-panel{height:480px}.lobby-container{width:95%;margin:30px auto;padding:24px 16px}.lobby-title{font-size:22px}.role-select{gap:8px}.role-card{padding:14px}.role-card strong{font-size:14px}}@media (height<=700px) and (width>=769px){.game-layout{gap:16px;height:calc(100vh - 60px);padding:16px}}