:root{font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,sans-serif;line-height:1.6;font-weight:400;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;--primary-50: #eef2ff;--primary-100: #e0e7ff;--primary-200: #c7d2fe;--primary-300: #a5b4fc;--primary-400: #818cf8;--primary-500: #6366f1;--primary-600: #4f46e5;--primary-700: #4338ca;--primary-800: #3730a3;--primary-900: #312e81;--secondary-50: #fdf2f8;--secondary-100: #fce7f3;--secondary-200: #fbcfe8;--secondary-300: #f9a8d4;--secondary-400: #f472b6;--secondary-500: #ec4899;--secondary-600: #db2777;--secondary-700: #be185d;--success-50: #ecfdf5;--success-100: #d1fae5;--success-500: #10b981;--success-600: #059669;--warning-50: #fffbeb;--warning-100: #fef3c7;--warning-500: #f59e0b;--warning-600: #d97706;--danger-50: #fef2f2;--danger-100: #fee2e2;--danger-500: #ef4444;--danger-600: #dc2626;--gray-50: #f9fafb;--gray-100: #f3f4f6;--gray-200: #e5e7eb;--gray-300: #d1d5db;--gray-400: #9ca3af;--gray-500: #6b7280;--gray-600: #4b5563;--gray-700: #374151;--gray-800: #1f2937;--gray-900: #111827;--primary-gradient: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #a855f7 100%);--secondary-gradient: linear-gradient(135deg, #ec4899 0%, #f472b6 100%);--dark-gradient: linear-gradient(135deg, #0f172a 0%, #1e293b 100%);--success-gradient: linear-gradient(135deg, #10b981 0%, #34d399 100%);--warning-gradient: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);--glass-gradient: linear-gradient(135deg, rgba(255,255,255,.1) 0%, rgba(255,255,255,.05) 100%);--card-bg: rgba(255, 255, 255, .95);--card-bg-dark: rgba(30, 41, 59, .95);--glass-bg: rgba(255, 255, 255, .1);--glass-border: rgba(255, 255, 255, .2);--shadow-xs: 0 1px 2px rgba(0, 0, 0, .05);--shadow-sm: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px rgba(0, 0, 0, .06);--shadow-md: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04);--shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, .25);--shadow-glow: 0 0 40px rgba(99, 102, 241, .15);--shadow-glow-pink: 0 0 40px rgba(236, 72, 153, .15);--radius-sm: 6px;--radius-md: 10px;--radius-lg: 16px;--radius-xl: 20px;--radius-2xl: 24px;--radius-full: 9999px;--space-1: 4px;--space-2: 8px;--space-3: 12px;--space-4: 16px;--space-5: 20px;--space-6: 24px;--space-8: 32px;--space-10: 40px;--space-12: 48px;--space-16: 64px;--transition-fast: .15s cubic-bezier(.4, 0, .2, 1);--transition-base: .2s cubic-bezier(.4, 0, .2, 1);--transition-slow: .3s cubic-bezier(.4, 0, .2, 1);--transition-spring: .5s cubic-bezier(.34, 1.56, .64, 1);--z-dropdown: 100;--z-sticky: 200;--z-fixed: 300;--z-modal-backdrop: 400;--z-modal: 500;--z-popover: 600;--z-tooltip: 700}*,*:before,*:after{margin:0;padding:0;box-sizing:border-box}html{width:100%;height:100%;overflow-x:hidden;scroll-behavior:smooth;-webkit-tap-highlight-color:transparent}body{margin:0;padding:0;width:100%;min-height:100vh;overflow-x:hidden;background:var(--dark-gradient);color:var(--gray-800);font-size:16px}#root{width:100%;min-height:100vh;display:flex;flex-direction:column;position:relative}a{font-weight:500;color:var(--primary-500);text-decoration:none;transition:color var(--transition-fast)}a:hover{color:var(--primary-600)}h1,h2,h3,h4,h5,h6{font-weight:700;line-height:1.3;color:var(--gray-900)}h1{font-size:clamp(1.75rem,4vw,2.5rem)}h2{font-size:clamp(1.5rem,3.5vw,2rem)}h3{font-size:clamp(1.25rem,3vw,1.5rem)}h4{font-size:clamp(1.125rem,2.5vw,1.25rem)}button{border-radius:var(--radius-md);border:none;padding:var(--space-3) var(--space-5);font-size:1rem;font-weight:600;font-family:inherit;cursor:pointer;transition:all var(--transition-base);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2)}button:focus-visible{outline:2px solid var(--primary-500);outline-offset:2px}button:disabled{opacity:.5;cursor:not-allowed}input,textarea,select{font-family:inherit;font-size:1rem;width:100%;box-sizing:border-box;border:2px solid var(--gray-200);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);background:#fff;color:var(--gray-900);transition:all var(--transition-fast)}input:focus,textarea:focus,select:focus{outline:none;border-color:var(--primary-500);box-shadow:0 0 0 3px var(--primary-100)}input::placeholder,textarea::placeholder{color:var(--gray-400)}.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideDown{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}@keyframes scaleIn{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@keyframes spin{to{transform:rotate(360deg)}}@keyframes pulse{0%,to{opacity:1}50%{opacity:.5}}@keyframes bounce{0%,to{transform:translateY(0)}50%{transform:translateY(-10px)}}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.room-content{flex-direction:column;padding:var(--space-3);gap:var(--space-3)}.sidebar{width:100%;order:2}.main-area{width:100%;order:1;min-height:auto;padding:var(--space-4)}.landing-container{padding:var(--space-5);width:95%;max-width:100%;border-radius:var(--radius-xl)}.landing h1{font-size:1.75rem}.subtitle{font-size:.9375rem}.room-header{flex-direction:column;gap:var(--space-3);padding:var(--space-3) var(--space-4)}.room-info{flex-direction:column;gap:var(--space-2);width:100%;align-items:flex-start}.room-header h1{font-size:1.25rem}.room-info span{font-size:.875rem}.leave-btn,.settings-btn{padding:var(--space-2) var(--space-4);font-size:.875rem;width:100%}.players-list{padding:var(--space-3);border-radius:var(--radius-md)}.players-list h3{font-size:1rem}.game-board,.waiting-area{padding:var(--space-4)}.waiting-area h2{font-size:1.25rem}.play-btn{padding:var(--space-3) var(--space-6);font-size:1rem;width:100%}.room-options{grid-template-columns:1fr}.input{padding:var(--space-3) var(--space-4);font-size:1rem}.submit-btn{padding:var(--space-3) var(--space-5);font-size:1rem}.ready-status-bar{margin:var(--space-3);padding:var(--space-3)}.status-content{flex-direction:column;gap:var(--space-3)}.ready-info,.pool-status-inline{width:100%;justify-content:center}@media (min-width: 640px){.landing-container{padding:var(--space-8);width:90%;max-width:480px}.landing h1{font-size:2rem}.subtitle{font-size:1rem}.room-header{flex-direction:row;padding:var(--space-4) var(--space-5)}.room-info{flex-direction:row;gap:var(--space-4);width:auto;align-items:center}.leave-btn,.settings-btn{width:auto}.room-content{padding:var(--space-4);gap:var(--space-4)}.main-area{padding:var(--space-5)}.room-options{grid-template-columns:repeat(2,1fr)}.status-content{flex-direction:row}.ready-info,.pool-status-inline{width:auto}}@media (min-width: 768px){.landing-container{padding:var(--space-10);max-width:520px}.landing h1{font-size:2.5rem}.subtitle{font-size:1.1rem;margin-bottom:var(--space-8)}.room-header h1{font-size:1.5rem}.room-info span{font-size:1rem}.players-list{padding:var(--space-5)}.players-list h3{font-size:1.125rem}.main-area{padding:var(--space-6);min-height:400px}.waiting-area h2{font-size:1.75rem}.play-btn{width:auto;padding:var(--space-4) var(--space-8);font-size:1.125rem}.input{padding:var(--space-4) var(--space-5);font-size:1.05rem}.submit-btn{padding:var(--space-4) var(--space-8);font-size:1.1rem}}@media (min-width: 1024px){.room-content{flex-direction:row;padding:var(--space-5);gap:var(--space-5)}.sidebar{width:320px;order:2;flex-shrink:0}.main-area{flex:1;order:1;min-height:500px}.room-header{padding:var(--space-5) var(--space-6)}.room-header h1{font-size:1.75rem}.ready-status-bar{margin:var(--space-5);padding:var(--space-4) var(--space-6)}}@media (min-width: 1280px){.room-content{max-width:1400px;margin:0 auto;gap:var(--space-6)}.sidebar{width:360px}.landing-container{max-width:560px;padding:var(--space-12)}.landing h1{font-size:2.75rem}}@media (min-width: 1536px){.room-content{max-width:1600px}.landing-container{max-width:600px;padding:56px}}@media (hover: none) and (pointer: coarse){button,.option-btn,.choice-btn,.game-card{min-height:44px}.input,.confession-textarea{font-size:16px}button:hover,.option-btn:hover,.game-card:hover{transform:none}}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}@media (max-height: 500px) and (orientation: landscape){.landing{padding:var(--space-3);min-height:auto}.landing-container{padding:var(--space-4);max-height:95vh;overflow-y:auto}.landing h1{font-size:1.5rem;margin-bottom:var(--space-2)}.subtitle{margin-bottom:var(--space-3)}.landing-form{gap:var(--space-3)}}@media print{.room-header,.sidebar,button,.chat{display:none!important}.main-area{box-shadow:none;border:1px solid #ccc}}.landing{width:100%;min-height:100vh;min-height:100dvh;display:flex;justify-content:center;align-items:center;padding:var(--space-4);background:var(--dark-gradient);position:relative;overflow:hidden;box-sizing:border-box}.landing:before{content:"";position:absolute;top:-50%;right:-50%;width:200%;height:200%;background:radial-gradient(circle,rgba(99,102,241,.08) 0%,transparent 60%);animation:rotate 40s linear infinite;pointer-events:none}.landing:after{content:"";position:absolute;bottom:-30%;left:-30%;width:150%;height:150%;background:radial-gradient(circle,rgba(236,72,153,.06) 0%,transparent 50%);animation:rotate 30s linear infinite reverse;pointer-events:none}@keyframes rotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.landing-container{background:linear-gradient(135deg,#fffffffa,#f8fafcfa);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:var(--radius-2xl);padding:var(--space-6);width:100%;max-width:480px;box-shadow:var(--shadow-2xl),var(--shadow-glow);border:1px solid rgba(255,255,255,.3);position:relative;z-index:1;animation:slideUp .6s var(--transition-spring)}.landing h1{background:var(--primary-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:var(--space-3);font-size:clamp(1.75rem,6vw,2.75rem);text-align:center;font-weight:800;letter-spacing:-.5px;animation:fadeIn .8s ease-out .2s both}.subtitle{color:var(--gray-500);text-align:center;margin-bottom:var(--space-6);font-size:clamp(.9375rem,2.5vw,1.1rem);line-height:1.5}.landing-form{display:flex;flex-direction:column;gap:var(--space-4)}.input{padding:var(--space-4);font-size:1rem;border:2px solid var(--gray-200);border-radius:var(--radius-md);transition:all var(--transition-base);background:#fff;width:100%;box-sizing:border-box;color:var(--gray-800)}.input::placeholder{color:var(--gray-400)}.input:focus{outline:none;border-color:var(--primary-500);box-shadow:0 0 0 4px var(--primary-100)}.room-options{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}.option-btn{padding:var(--space-4);background:var(--gray-50);border:2px solid var(--gray-200);border-radius:var(--radius-md);font-size:.9375rem;font-weight:600;color:var(--gray-700);transition:all var(--transition-base);cursor:pointer;width:100%;min-height:48px}.option-btn:hover{border-color:var(--primary-400);background:var(--primary-50);color:var(--primary-600)}.option-btn.active{background:var(--primary-gradient);color:#fff;border-color:transparent;box-shadow:var(--shadow-md),0 0 20px #6366f140}.submit-btn{padding:var(--space-4);background:var(--primary-gradient);color:#fff;border:none;border-radius:var(--radius-md);font-size:1.0625rem;font-weight:600;letter-spacing:.3px;box-shadow:var(--shadow-md);position:relative;overflow:hidden;transition:all var(--transition-base);width:100%;min-height:52px}.submit-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.submit-btn:hover:not(:disabled):before{left:100%}.submit-btn:hover:not(:disabled){box-shadow:var(--shadow-lg),0 0 30px #6366f159}.submit-btn:disabled{opacity:.6;cursor:not-allowed}.game-info{margin-top:var(--space-6);padding-top:var(--space-6);border-top:2px solid var(--gray-100)}.game-info h3{color:var(--gray-800);margin-bottom:var(--space-4);font-size:1rem;font-weight:600}.game-info ol{color:var(--gray-600);padding-left:var(--space-5);font-size:.9375rem;line-height:1.6}.game-info li{margin-bottom:var(--space-2)}@media (max-width: 480px){.landing{padding:var(--space-3);align-items:flex-start;padding-top:var(--space-8)}.landing-container{padding:var(--space-5);border-radius:var(--radius-xl)}.room-options{grid-template-columns:1fr;gap:var(--space-2)}.option-btn{padding:var(--space-3)}}@media (min-width: 640px){.landing-container{padding:var(--space-8)}.input{padding:var(--space-4) var(--space-5);font-size:1.05rem}.submit-btn{padding:var(--space-4) var(--space-6);font-size:1.125rem}}@media (min-width: 768px){.landing-container{padding:var(--space-10);max-width:520px}}@media (min-width: 1280px){.landing-container{max-width:560px;padding:var(--space-12)}}.chat{background:var(--card-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);border:1px solid var(--glass-border);display:flex;flex-direction:column;height:400px;max-height:60vh;transition:height var(--transition-slow);overflow:hidden}.chat.collapsed{height:56px}.chat-header{background:var(--primary-gradient);color:#fff;padding:var(--space-3) var(--space-4);border-radius:var(--radius-lg) var(--radius-lg) 0 0;display:flex;justify-content:space-between;align-items:center;cursor:pointer;-webkit-user-select:none;user-select:none;transition:all var(--transition-base);min-height:56px;flex-shrink:0}.chat-header:hover{filter:brightness(1.05)}.chat-header h3{font-size:1rem;font-weight:600;margin:0;color:#fff;display:flex;align-items:center;gap:var(--space-2)}.toggle-icon{font-size:.875rem;transition:transform var(--transition-base)}.chat.collapsed .toggle-icon{transform:rotate(180deg)}.chat-messages{flex:1;overflow-y:auto;padding:var(--space-3);display:flex;flex-direction:column;gap:var(--space-2);scroll-behavior:smooth}.chat-messages::-webkit-scrollbar{width:6px}.chat-messages::-webkit-scrollbar-track{background:var(--gray-100);border-radius:var(--radius-full)}.chat-messages::-webkit-scrollbar-thumb{background:var(--gray-300);border-radius:var(--radius-full)}.chat-messages::-webkit-scrollbar-thumb:hover{background:var(--gray-400)}.message{padding:var(--space-3);border-radius:var(--radius-md);background:var(--gray-50);word-wrap:break-word;word-break:break-word;border:1px solid var(--gray-100);animation:slideUp .2s ease-out;max-width:100%}.message.system{background:var(--primary-50);font-style:italic;text-align:center;color:var(--primary-600);font-weight:500;border-color:var(--primary-100);font-size:.875rem}.message.confession-reveal{background:linear-gradient(135deg,var(--danger-50),var(--secondary-50));border:2px solid var(--danger-500);font-weight:600;color:var(--danger-600);padding:var(--space-4);box-shadow:var(--shadow-md),0 0 20px #ef444426;animation:pulseGlow 2s infinite}@keyframes pulseGlow{0%,to{box-shadow:var(--shadow-md),0 0 10px #ef444426}50%{box-shadow:var(--shadow-lg),0 0 25px #ef444440}}.message-author{font-weight:600;color:var(--primary-600);margin-right:var(--space-2);font-size:.9375rem}.message-text{color:var(--gray-700);font-size:.9375rem;line-height:1.5}.chat-input{display:flex;padding:var(--space-3);border-top:1px solid var(--gray-200);gap:var(--space-2);background:var(--gray-50);flex-shrink:0}.chat-input input{flex:1;padding:var(--space-3);border:2px solid var(--gray-200);border-radius:var(--radius-md);font-size:.9375rem;transition:all var(--transition-fast);background:#fff;min-width:0}.chat-input input:focus{outline:none;border-color:var(--primary-500);box-shadow:0 0 0 3px var(--primary-100)}.chat-input input::placeholder{color:var(--gray-400)}.chat-input button{padding:var(--space-3) var(--space-4);background:var(--primary-gradient);color:#fff;border:none;border-radius:var(--radius-md);font-weight:600;cursor:pointer;transition:all var(--transition-base);white-space:nowrap;min-height:44px}.chat-input button:hover:not(:disabled){box-shadow:var(--shadow-md),0 0 15px #6366f140}.chat-input button:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 640px){.chat{height:350px;max-height:50vh;border-radius:var(--radius-md)}.chat-header{padding:var(--space-3);border-radius:var(--radius-md) var(--radius-md) 0 0;min-height:48px}.chat-header h3{font-size:.9375rem}.chat-messages{padding:var(--space-2);gap:var(--space-2)}.message{padding:var(--space-2) var(--space-3);font-size:.875rem}.message-author,.message-text{font-size:.875rem}.chat-input{padding:var(--space-2);gap:var(--space-2)}.chat-input input{padding:var(--space-2) var(--space-3);font-size:16px}.chat-input button{padding:var(--space-2) var(--space-3);font-size:.875rem}}@media (min-width: 768px){.chat{height:450px;max-height:70vh}}@media (min-width: 1024px){.chat{height:500px}.chat-messages{padding:var(--space-4);gap:var(--space-3)}.message{padding:var(--space-3) var(--space-4)}.chat-input{padding:var(--space-4);gap:var(--space-3)}.chat-input input{padding:var(--space-3) var(--space-4)}.chat-input button{padding:var(--space-3) var(--space-5)}}.confession-form-container{width:100%;max-width:600px;margin:0 auto;padding:var(--space-6);animation:fadeIn .5s ease-out}.confession-form-container h2{background:var(--primary-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin:0 0 var(--space-3) 0;text-align:center;font-size:clamp(1.75rem,5vw,2.25rem);font-weight:800;letter-spacing:-.02em}.confession-info{color:var(--gray-500);text-align:center;margin-bottom:var(--space-6);font-size:clamp(.9375rem,2vw,1.0625rem);line-height:1.6}.confession-form{display:flex;flex-direction:column;gap:var(--space-5)}.confession-textarea{padding:var(--space-4);font-size:1rem;border:2px solid var(--gray-200);border-radius:var(--radius-lg);resize:vertical;min-height:180px;font-family:inherit;transition:all var(--transition-base);background:#fff;color:var(--gray-800);line-height:1.7}.confession-textarea::placeholder{color:var(--gray-400)}.confession-textarea:hover{border-color:var(--gray-300)}.confession-textarea:focus{outline:none;border-color:var(--primary-500);box-shadow:0 0 0 4px var(--primary-100);background:#fff}.char-count{text-align:right;color:var(--gray-500);font-size:.8125rem;font-weight:500;margin-top:calc(-1 * var(--space-3))}.char-count.warning{color:var(--warning-500)}.char-count.error{color:var(--danger-500)}.submit-btn{padding:var(--space-4);background:var(--primary-gradient);color:#fff;border:none;border-radius:var(--radius-lg);font-size:1.0625rem;font-weight:700;cursor:pointer;transition:all var(--transition-base);box-shadow:var(--shadow-md);min-height:52px;position:relative;overflow:hidden}.submit-btn:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;background:linear-gradient(135deg,rgba(255,255,255,.2),transparent);opacity:0;transition:opacity var(--transition-fast)}.submit-btn:hover:not(:disabled){transform:translateY(-3px);box-shadow:var(--shadow-lg),var(--glow-primary)}.submit-btn:hover:not(:disabled):before{opacity:1}.submit-btn:active:not(:disabled){transform:translateY(-1px)}.submit-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.warning{background:var(--warning-gradient);color:#fff;padding:var(--space-4) var(--space-5);border-radius:var(--radius-lg);text-align:center;font-size:.9375rem;font-weight:600;box-shadow:var(--shadow-md);animation:slideDown .4s ease-out;display:flex;align-items:center;justify-content:center;gap:var(--space-3)}.warning:before{content:"";flex-shrink:0}.success{background:var(--success-gradient);color:#fff;padding:var(--space-4) var(--space-5);border-radius:var(--radius-lg);text-align:center;font-size:.9375rem;font-weight:600;box-shadow:var(--shadow-md);animation:slideDown .4s ease-out}@media (max-width: 640px){.confession-form-container{padding:var(--space-4)}.confession-textarea{min-height:150px;padding:var(--space-3);font-size:1rem}.submit-btn{min-height:48px;font-size:1rem;padding:var(--space-3)}.warning,.success{padding:var(--space-3) var(--space-4);font-size:.875rem}}@media (max-width: 480px){.confession-form-container{padding:var(--space-3)}.confession-form-container h2{font-size:1.5rem}.confession-info{font-size:.875rem;margin-bottom:var(--space-5)}.confession-form{gap:var(--space-4)}.confession-textarea{min-height:130px;border-radius:var(--radius-md)}.submit-btn{border-radius:var(--radius-md)}}@media (min-width: 1024px){.confession-form-container{padding:var(--space-8)}.confession-textarea{min-height:200px;font-size:1.0625rem;padding:var(--space-5)}.submit-btn{min-height:56px;font-size:1.125rem}}@media (hover: none) and (pointer: coarse){.confession-textarea{font-size:16px}.submit-btn{min-height:52px}.submit-btn:hover:not(:disabled){transform:none;box-shadow:var(--shadow-md)}.submit-btn:active:not(:disabled){transform:scale(.98)}}@media (prefers-color-scheme: dark){.confession-info{color:var(--gray-400)}.confession-textarea{background:var(--gray-800);border-color:var(--gray-700);color:var(--gray-100)}.confession-textarea::placeholder{color:var(--gray-500)}.confession-textarea:hover{border-color:var(--gray-600)}.confession-textarea:focus{border-color:var(--primary-500);box-shadow:0 0 0 4px #6366f133;background:var(--gray-800)}.char-count{color:var(--gray-500)}}@media (prefers-reduced-motion: reduce){.confession-form-container,.warning,.success{animation:none}.submit-btn:hover:not(:disabled){transform:none}}.rock-paper-scissors{height:100%;min-height:400px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:var(--space-6);gap:var(--space-8)}.game-status{text-align:center}.game-status p{font-size:clamp(1.125rem,3vw,1.5rem);color:var(--gray-700);font-weight:500}.result-win{color:var(--success-500)!important;font-size:clamp(1.5rem,4vw,2rem)!important;font-weight:700!important;animation:celebrate .5s ease}.result-lose{color:var(--danger-500)!important;font-size:clamp(1.5rem,4vw,2rem)!important;font-weight:700!important;animation:shake .5s ease}.result-tie{color:var(--warning-500)!important;font-size:clamp(1.5rem,4vw,2rem)!important;font-weight:700!important}@keyframes celebrate{0%,to{transform:scale(1)}50%{transform:scale(1.2)}}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-10px)}75%{transform:translate(10px)}}.choices-area{display:flex;align-items:center;justify-content:center;gap:var(--space-8);flex-wrap:wrap}.player-section{text-align:center}.player-section h3{color:var(--primary-600);margin-bottom:var(--space-6);font-size:clamp(1rem,2.5vw,1.25rem);font-weight:600}.choices{display:flex;gap:var(--space-4);flex-wrap:wrap;justify-content:center}.rock-paper-scissors .choice-btn{background:#fff;border:3px solid var(--gray-200);border-radius:var(--radius-lg);padding:var(--space-4);display:flex;flex-direction:column;align-items:center;gap:var(--space-2);transition:all var(--transition-base);min-width:90px;cursor:pointer}.rock-paper-scissors .choice-btn:hover{border-color:var(--primary-500);background:var(--primary-50);transform:translateY(-4px);box-shadow:var(--shadow-md)}.rock-paper-scissors .choice-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.rock-paper-scissors .choice-btn:disabled:hover{border-color:var(--gray-200);background:#fff;box-shadow:none}.choice-emoji{font-size:clamp(2.5rem,6vw,3.5rem);line-height:1}.choice-emoji.large{font-size:clamp(3.5rem,8vw,5rem)}.choice-name{font-size:clamp(.875rem,2vw,1rem);color:var(--gray-600);text-transform:capitalize;font-weight:500}.selected-choice,.waiting-choice{display:flex;flex-direction:column;align-items:center;gap:var(--space-2);padding:var(--space-5);background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);min-width:120px}.selected-choice{border:3px solid var(--success-500);animation:scaleIn .3s ease}.waiting-choice{border:3px solid var(--warning-500);animation:pulse 1.5s infinite}.waiting-choice.ready{border-color:var(--success-500);background:linear-gradient(135deg,var(--success-50),var(--success-100));animation:none}.vs{font-size:clamp(1.5rem,4vw,2rem);font-weight:800;color:var(--warning-500);text-shadow:0 2px 10px rgba(245,158,11,.3)}@media (max-width: 768px){.rock-paper-scissors{padding:var(--space-4);gap:var(--space-6)}.choices-area{flex-direction:column;gap:var(--space-5)}.vs{transform:rotate(90deg);margin:var(--space-2) 0}.choices{gap:var(--space-3)}.rock-paper-scissors .choice-btn{min-width:80px;padding:var(--space-3)}.selected-choice,.waiting-choice{padding:var(--space-4);min-width:100px}}@media (max-width: 480px){.rock-paper-scissors{padding:var(--space-3);gap:var(--space-5);justify-content:flex-start;padding-top:var(--space-6)}.player-section h3{margin-bottom:var(--space-4)}.choices{gap:var(--space-2)}.rock-paper-scissors .choice-btn{min-width:70px;padding:var(--space-2)}}@media (min-width: 1024px){.rock-paper-scissors{padding:var(--space-8)}.choices-area{gap:var(--space-12)}.rock-paper-scissors .choice-btn{min-width:110px;padding:var(--space-5)}}@media (hover: none) and (pointer: coarse){.rock-paper-scissors .choice-btn{min-height:80px;min-width:80px}.rock-paper-scissors .choice-btn:hover{transform:none;box-shadow:none}.rock-paper-scissors .choice-btn:active{transform:scale(.95);border-color:var(--primary-500);background:var(--primary-50)}}.drawing-guess-container{display:flex;flex-direction:column;height:100%;min-height:400px;gap:var(--space-4)}.drawing-guess-container .game-info{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-3);padding:var(--space-4);background:var(--primary-gradient);color:#fff;border-radius:var(--radius-lg)}.drawing-guess-container .round-info{font-size:clamp(1rem,2.5vw,1.125rem);font-weight:600}.drawing-guess-container .timer{font-size:clamp(1.25rem,3vw,1.5rem);font-weight:700;padding:var(--space-2) var(--space-4);background:#0003;border-radius:var(--radius-md);min-width:70px;text-align:center}.drawing-guess-container .timer.warning{color:#ff6b6b;animation:pulse 1s infinite}.word-hint{font-size:clamp(1rem,2.5vw,1.125rem);font-weight:500}.drawer-word{background:#fff3;padding:var(--space-2) var(--space-4);border-radius:var(--radius-md);font-weight:600}.guesser-hint{letter-spacing:4px;font-family:Courier New,monospace;font-size:clamp(1.125rem,3vw,1.375rem);background:#ffffff1a;padding:var(--space-2) var(--space-4);border-radius:var(--radius-md)}.drawing-guess-container .game-area{display:flex;gap:var(--space-4);flex:1;min-height:0}.drawing-section{flex:1;display:flex;flex-direction:column;gap:var(--space-3);position:relative;min-width:0}.drawing-canvas{background:#fff;border:3px solid var(--gray-200);border-radius:var(--radius-lg);cursor:crosshair;box-shadow:var(--shadow-md);max-width:100%;height:auto;display:block;user-select:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;touch-action:none}.drawing-canvas:not(.drawable){cursor:not-allowed}.drawing-tools{display:flex;gap:var(--space-3);padding:var(--space-3);background:var(--gray-50);border-radius:var(--radius-lg);align-items:center;flex-wrap:wrap}.color-palette{display:flex;gap:var(--space-2);flex-wrap:wrap}.color-btn{width:32px;height:32px;border:2px solid transparent;border-radius:50%;cursor:pointer;transition:all var(--transition-fast);flex-shrink:0}.color-btn:hover{transform:scale(1.1)}.color-btn.active{border-color:var(--gray-800);box-shadow:0 0 0 3px #0000001a}.line-widths{display:flex;gap:var(--space-2);align-items:center}.width-btn{width:40px;height:40px;background:#fff;border:2px solid var(--gray-200);border-radius:var(--radius-md);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast)}.width-btn:hover{border-color:var(--primary-500)}.width-btn.active{border-color:var(--primary-500);background:var(--primary-50)}.width-preview{width:20px;border-radius:2px}.drawing-guess-container .clear-btn{margin-left:auto;padding:var(--space-2) var(--space-4);background:var(--danger-500);color:#fff;border:none;border-radius:var(--radius-md);cursor:pointer;font-weight:600;transition:all var(--transition-fast);min-height:40px}.drawing-guess-container .clear-btn:hover{background:var(--danger-600)}.drawing-guess-container .sidebar{width:280px;display:flex;flex-direction:column;gap:var(--space-4);flex-shrink:0}.scores{background:#fff;border-radius:var(--radius-lg);padding:var(--space-4);box-shadow:var(--shadow-sm)}.scores h3{margin:0 0 var(--space-4) 0;color:var(--gray-800);font-size:1rem}.drawing-guess-container .score-item{display:flex;justify-content:space-between;padding:var(--space-2) var(--space-3);margin-bottom:var(--space-2);border-radius:var(--radius-md);transition:all var(--transition-fast)}.drawing-guess-container .score-item:hover{background:var(--gray-50)}.drawing-guess-container .score-item.current{background:var(--primary-50);font-weight:600}.drawing-guess-container .player-name{flex:1;font-size:.9375rem;color:var(--gray-800)}.drawing-guess-container .player-score{font-weight:700;color:var(--primary-600);font-size:1rem}.chat-section{flex:1;background:#fff;border-radius:var(--radius-lg);padding:var(--space-4);box-shadow:var(--shadow-sm);display:flex;flex-direction:column;min-height:200px}.drawing-guess-container .chat-messages{flex:1;overflow-y:auto;margin-bottom:var(--space-3);padding:var(--space-3);background:var(--gray-50);border-radius:var(--radius-md)}.chat-message{margin-bottom:var(--space-2);padding:var(--space-2);font-size:.875rem}.chat-message.system{text-align:center;font-style:italic;color:var(--gray-500)}.chat-message.success{color:var(--success-600);font-weight:600;background:var(--success-50);border-radius:var(--radius-md)}.guess-msg{color:var(--gray-700)}.guess-input{display:flex;gap:var(--space-2)}.guess-input input{flex:1;padding:var(--space-3);border:2px solid var(--gray-200);border-radius:var(--radius-md);font-size:.9375rem}.guess-input input:focus{outline:none;border-color:var(--primary-500);box-shadow:0 0 0 3px var(--primary-100)}.guess-input button{padding:var(--space-3) var(--space-4);background:var(--primary-gradient);color:#fff;border:none;border-radius:var(--radius-md);cursor:pointer;font-weight:600;transition:all var(--transition-fast);min-height:44px}.guess-input button:hover:not(:disabled){box-shadow:var(--shadow-md)}.guess-input button:disabled{opacity:.5;cursor:not-allowed}@media (max-width: 900px){.drawing-guess-container .game-area{flex-direction:column}.drawing-guess-container .sidebar{width:100%;flex-direction:row;flex-wrap:wrap}.scores,.chat-section{flex:1;min-width:220px}.chat-section{min-height:180px}}@media (max-width: 640px){.drawing-guess-container .game-info{flex-direction:column;text-align:center;padding:var(--space-3)}.drawing-tools{padding:var(--space-2);gap:var(--space-2)}.color-btn{width:28px;height:28px}.width-btn{width:36px;height:36px}.drawing-guess-container .sidebar{flex-direction:column}.scores,.chat-section{min-width:100%}.guesser-hint{letter-spacing:3px}}@media (max-width: 480px){.drawing-guess-container{gap:var(--space-3)}.scores,.chat-section{padding:var(--space-3)}.drawing-guess-container .chat-messages{padding:var(--space-2)}.guess-input{flex-direction:column}.guess-input button{width:100%}}@media (min-width: 1024px){.drawing-guess-container .sidebar{width:320px}.drawing-guess-container .game-area{gap:var(--space-5)}}@media (hover: none) and (pointer: coarse){.drawing-canvas{touch-action:none}.color-btn,.width-btn{min-width:44px;min-height:44px}}.word-battle-container{display:flex;flex-direction:column;height:100%;min-height:400px;gap:var(--space-4)}.word-battle-container .game-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-3);padding:var(--space-4);background:var(--secondary-gradient);color:#fff;border-radius:var(--radius-lg)}.round-info{font-size:clamp(1rem,2.5vw,1.125rem);font-weight:600}.word-battle-container .timer{font-size:clamp(1.25rem,3vw,1.5rem);font-weight:700;padding:var(--space-2) var(--space-4);background:#0003;border-radius:var(--radius-md);min-width:70px;text-align:center}.word-battle-container .timer.warning{color:#fbbf24;animation:pulse 1s infinite}.word-battle-container .player-score{font-size:clamp(1rem,2.5vw,1.125rem);font-weight:600}.score-value{font-size:clamp(1.25rem,3vw,1.5rem);color:#fbbf24;text-shadow:2px 2px 4px rgba(0,0,0,.3)}.word-battle-container .game-area{display:flex;gap:var(--space-4);flex:1;min-height:0}.main-section{flex:1;display:flex;flex-direction:column;gap:var(--space-4);min-width:0}.letters-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-3);padding:var(--space-4);background:#fff;border-radius:var(--radius-lg);box-shadow:var(--shadow-md)}.letter-btn{aspect-ratio:1;font-size:clamp(1.5rem,4vw,2rem);font-weight:700;background:linear-gradient(145deg,var(--gray-50),white);border:3px solid var(--gray-200);border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-fast);color:var(--gray-800);min-height:50px}.letter-btn:hover:not(:disabled){border-color:var(--secondary-500);box-shadow:var(--shadow-md)}.letter-btn.selected{background:var(--secondary-gradient);color:#fff;border-color:var(--secondary-500);transform:scale(.95)}.letter-btn:disabled{opacity:.5;cursor:not-allowed}.word-input-section{background:#fff;padding:var(--space-4);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.word-display{width:100%;padding:var(--space-4);font-size:clamp(1.25rem,3vw,1.5rem);font-weight:700;text-align:center;border:3px solid var(--gray-200);border-radius:var(--radius-md);background:var(--gray-50);letter-spacing:4px;margin-bottom:var(--space-3);color:var(--gray-800);text-transform:uppercase}.word-controls{display:flex;gap:var(--space-3)}.word-battle-container .clear-btn,.word-battle-container .submit-btn{flex:1;padding:var(--space-3) var(--space-4);font-size:1rem;font-weight:600;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-fast);min-height:44px}.word-battle-container .clear-btn{background:var(--gray-500);color:#fff}.word-battle-container .clear-btn:hover:not(:disabled){background:var(--gray-600)}.word-battle-container .submit-btn{background:var(--primary-gradient);color:#fff}.word-battle-container .submit-btn:hover:not(:disabled){box-shadow:var(--shadow-md)}.word-battle-container .clear-btn:disabled,.word-battle-container .submit-btn:disabled{opacity:.5;cursor:not-allowed}.points-info{background:#fff;padding:var(--space-4);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.points-info h4{margin:0 0 var(--space-3) 0;color:var(--gray-800);font-size:.9375rem}.points-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2);font-size:.8125rem}.points-grid span{padding:var(--space-2);background:var(--gray-50);border-radius:var(--radius-sm);text-align:center;font-weight:500;color:var(--gray-700)}.word-battle-container .sidebar{width:300px;display:flex;flex-direction:column;gap:var(--space-4);flex-shrink:0}.word-battle-container .scoreboard{background:#fff;padding:var(--space-4);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.word-battle-container .scoreboard h3{margin:0 0 var(--space-4) 0;color:var(--gray-800);font-size:1rem}.word-battle-container .score-item{display:flex;justify-content:space-between;align-items:center;padding:var(--space-2) var(--space-3);margin-bottom:var(--space-2);border-radius:var(--radius-md);transition:all var(--transition-fast)}.word-battle-container .score-item:hover{background:var(--gray-50)}.word-battle-container .score-item.current{background:linear-gradient(135deg,#fef3c7,#fde68a);font-weight:600}.word-battle-container .player-name{flex:1;font-size:.9375rem;color:var(--gray-800)}.word-battle-container .player-stats{color:var(--gray-500);font-size:.75rem;margin-right:var(--space-2)}.word-battle-container .player-score{font-weight:700;color:var(--secondary-500);font-size:1.0625rem}.submissions-section{background:#fff;padding:var(--space-4);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);max-height:220px;display:flex;flex-direction:column}.submissions-section h3{margin:0 0 var(--space-3) 0;color:var(--gray-800);font-size:.9375rem;flex-shrink:0}.submissions-list{flex:1;overflow-y:auto}.submission-item{padding:var(--space-2);margin-bottom:var(--space-2);border-radius:var(--radius-md);font-size:.8125rem;display:flex;gap:var(--space-2);align-items:center}.submission-item.success{background:var(--success-50)}.submission-item.error{background:var(--danger-50)}.submission-item.roundEnd{background:var(--primary-50);justify-content:center;font-weight:600}.submission-player{font-weight:600;color:var(--gray-600)}.submission-word{font-weight:500;color:var(--gray-800);text-transform:uppercase}.submission-result{margin-left:auto;font-weight:600}.submission-result.success{color:var(--success-600)}.submission-result.error{color:var(--danger-600)}.used-words{background:#fff;padding:var(--space-4);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm);flex:1;min-height:120px;display:flex;flex-direction:column}.used-words h3{margin:0 0 var(--space-3) 0;color:var(--gray-800);font-size:.9375rem;flex-shrink:0}.words-list{flex:1;overflow-y:auto;display:flex;flex-wrap:wrap;gap:var(--space-2);align-content:flex-start}.used-word{padding:var(--space-1) var(--space-2);background:var(--gray-100);border-radius:var(--radius-sm);font-size:.75rem;color:var(--gray-600);text-transform:uppercase}.my-words{background:#fff;padding:var(--space-4);border-radius:var(--radius-lg);box-shadow:var(--shadow-sm)}.my-words h4{margin:0 0 var(--space-3) 0;color:var(--gray-800);font-size:.9375rem}.my-words-list{display:flex;flex-wrap:wrap;gap:var(--space-2);max-height:80px;overflow-y:auto}.my-word{padding:var(--space-1) var(--space-3);background:var(--success-gradient);border-radius:var(--radius-full);font-size:.8125rem;font-weight:500;color:#fff}.word-points{color:#fffc;font-weight:600;margin-left:var(--space-1)}@media (max-width: 900px){.word-battle-container .game-area{flex-direction:column}.word-battle-container .sidebar{width:100%;flex-direction:row;flex-wrap:wrap}.word-battle-container .scoreboard,.submissions-section,.used-words{flex:1;min-width:200px}.submissions-section{max-height:180px}}@media (max-width: 640px){.word-battle-container .game-header{flex-direction:column;text-align:center;padding:var(--space-3)}.letters-grid{gap:var(--space-2);padding:var(--space-3)}.letter-btn{font-size:clamp(1.25rem,5vw,1.5rem);min-height:44px}.word-display{font-size:1.25rem;padding:var(--space-3);letter-spacing:3px}.word-controls{flex-direction:column;gap:var(--space-2)}.word-battle-container .sidebar{flex-direction:column}.word-battle-container .scoreboard,.submissions-section,.used-words{min-width:100%}.points-grid{grid-template-columns:repeat(2,1fr)}}@media (max-width: 480px){.word-battle-container{gap:var(--space-3)}.word-input-section,.points-info,.word-battle-container .scoreboard,.submissions-section,.used-words,.my-words{padding:var(--space-3)}}@media (min-width: 1024px){.word-battle-container .sidebar{width:340px}.word-battle-container .game-area{gap:var(--space-5)}}.truth-or-dare{width:100%;height:100%;min-height:400px;display:flex;flex-direction:column;background:linear-gradient(135deg,#6366f1,#8b5cf6,#ec4899);border-radius:var(--radius-xl);overflow:hidden;position:relative;box-shadow:var(--shadow-xl)}.truth-or-dare:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:radial-gradient(circle at 20% 20%,rgba(139,92,246,.3) 0%,transparent 50%),radial-gradient(circle at 80% 80%,rgba(236,72,153,.3) 0%,transparent 50%);pointer-events:none}.truth-or-dare .game-header{padding:var(--space-4) var(--space-5);background:linear-gradient(135deg,#00000059,#0003);text-align:center;color:#fff;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.1);position:relative;z-index:1}.truth-or-dare .game-header h1{margin:0 0 var(--space-3) 0;font-size:clamp(1.5rem,5vw,2.25rem);font-weight:800;background:linear-gradient(135deg,#fbbf24,#f59e0b,#ef4444);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;letter-spacing:1px}.current-turn{font-size:clamp(1rem,3vw,1.25rem);color:#fbbf24;font-weight:600;text-shadow:0 2px 10px rgba(251,191,36,.3);padding:var(--space-2) var(--space-4);background:#fbbf241a;border-radius:var(--radius-full);display:inline-block;border:1px solid rgba(251,191,36,.2)}.truth-or-dare .game-content{flex:1;display:flex;padding:var(--space-4);gap:var(--space-4);overflow:auto;position:relative;z-index:1}.truth-or-dare .main-area{flex:1;display:flex;align-items:center;justify-content:center;padding:0;background:transparent;border:none;box-shadow:none;min-height:auto}.truth-or-dare .sidebar{width:280px;background:#ffffff14;border-radius:var(--radius-xl);padding:var(--space-5);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.1);box-shadow:var(--shadow-lg)}.phase-content{text-align:center;color:#fff;width:100%;max-width:600px}.phase-content h2{font-size:clamp(1.5rem,4vw,2rem);margin-bottom:var(--space-5);background:linear-gradient(135deg,#fbbf24,#f59e0b);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent;font-weight:700;letter-spacing:.5px}.phase-content p{font-size:clamp(1rem,2.5vw,1.25rem);margin-bottom:var(--space-5);opacity:.9;line-height:1.6}.spinner-container{position:relative;width:clamp(240px,50vw,320px);height:clamp(240px,50vw,320px);margin:var(--space-6) auto}.truth-or-dare .spinner{width:100%;height:100%;border-radius:50%;position:relative;overflow:hidden;box-shadow:0 0 0 6px #ffffff1a,0 15px 35px #0003,inset 0 0 20px #0000001a;transition:transform var(--transition-slow);background:conic-gradient(from 0deg,#ef4444,#ef4444 90deg,#3b82f6 90deg,#3b82f6 180deg,#10b981 180deg,#10b981 270deg,#f59e0b 270deg,#f59e0b 360deg);animation:none;border:none}.truth-or-dare .spinner.spinning{animation:spinWheel 4s cubic-bezier(.25,.46,.45,.94)}@keyframes spinWheel{0%{transform:rotate(0)}to{transform:rotate(2160deg)}}.spinner-segment{position:absolute;width:50%;height:50%;transform-origin:right bottom;display:flex;align-items:center;justify-content:center}.spinner-segment:nth-child(1){top:0;left:0;background:linear-gradient(135deg,#ef4444,#dc2626)}.spinner-segment:nth-child(2){top:0;right:0;background:linear-gradient(135deg,#3b82f6,#2563eb)}.spinner-segment:nth-child(3){bottom:0;right:0;background:linear-gradient(135deg,#10b981,#059669)}.spinner-segment:nth-child(4){bottom:0;left:0;background:linear-gradient(135deg,#f59e0b,#d97706)}.segment-text{font-weight:700;font-size:clamp(1rem,2vw,1.25rem);color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.4);transform:rotate(-45deg);letter-spacing:.5px}.spinner-arrow{position:absolute;top:-20px;left:50%;transform:translate(-50%);font-size:clamp(1.75rem,4vw,2.25rem);color:#fbbf24;text-shadow:0 3px 15px rgba(251,191,36,.5);z-index:10;filter:drop-shadow(0 0 10px rgba(251,191,36,.3))}.spin-result{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:clamp(1.5rem,4vw,2rem);font-weight:800;color:#fff;text-shadow:0 4px 20px rgba(0,0,0,.6);animation:bounceIn .6s ease;background:#0000004d;padding:var(--space-3) var(--space-5);border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.2)}@keyframes bounceIn{0%,to{transform:translate(-50%,-50%) scale(1)}50%{transform:translate(-50%,-50%) scale(1.15)}}.spin-button{padding:var(--space-4) var(--space-8);font-size:clamp(1rem,3vw,1.25rem);font-weight:700;background:linear-gradient(135deg,#fbbf24,#f59e0b,#ef4444);color:#fff;border:none;border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-base);box-shadow:var(--shadow-md),inset 0 1px #fff3;margin-bottom:var(--space-5);position:relative;overflow:hidden;letter-spacing:.5px;min-height:52px}.spin-button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.spin-button:hover:not(:disabled){box-shadow:var(--shadow-lg),0 0 30px #ef444466}.spin-button:hover:not(:disabled):before{left:100%}.spin-button:disabled{opacity:.5;cursor:not-allowed}.choice-buttons{display:flex;gap:var(--space-4);justify-content:center;margin-top:var(--space-6);flex-wrap:wrap}.choice-btn{padding:var(--space-5) var(--space-8);font-size:clamp(1rem,3vw,1.25rem);font-weight:700;color:#fff;border:none;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base);box-shadow:var(--shadow-md);position:relative;overflow:hidden;letter-spacing:.5px;min-width:140px;min-height:56px}.choice-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.choice-btn.truth{background:linear-gradient(135deg,#ef4444,#dc2626,#b91c1c);box-shadow:var(--shadow-md),0 0 20px #ef44444d}.choice-btn.dare{background:linear-gradient(135deg,#10b981,#059669,#047857);box-shadow:var(--shadow-md),0 0 20px #10b9814d}.choice-btn:hover{transform:translateY(-3px) scale(1.02)}.choice-btn:hover:before{left:100%}.choice-btn.truth:hover{box-shadow:var(--shadow-lg),0 0 30px #ef444466}.choice-btn.dare:hover{box-shadow:var(--shadow-lg),0 0 30px #10b98166}.task-container{background:linear-gradient(135deg,#ffffff1f,#ffffff14);border-radius:var(--radius-xl);padding:var(--space-6);backdrop-filter:blur(25px);-webkit-backdrop-filter:blur(25px);max-width:600px;margin:0 auto;border:1px solid rgba(255,255,255,.15);box-shadow:var(--shadow-xl);width:100%}.task-container.spectator{opacity:.9;border:1px solid rgba(251,191,36,.3)}.task-type{font-size:clamp(1.125rem,3vw,1.375rem);font-weight:800;margin-bottom:var(--space-5);padding:var(--space-3) var(--space-6);border-radius:var(--radius-full);display:inline-block;color:#fff;text-shadow:0 2px 10px rgba(0,0,0,.3);letter-spacing:.5px}.task-type.truth{background:linear-gradient(135deg,#ef4444,#dc2626);box-shadow:var(--shadow-md),0 0 20px #ef44444d}.task-type.dare{background:linear-gradient(135deg,#10b981,#059669);box-shadow:var(--shadow-md),0 0 20px #10b9814d}.task-text{font-size:clamp(1rem,2.5vw,1.25rem);line-height:1.6;margin:var(--space-5) 0;font-weight:500;color:#fffffff2}.timer{font-size:clamp(1.25rem,3vw,1.5rem);color:#fbbf24;font-weight:800;margin:var(--space-5) 0;text-shadow:0 3px 15px rgba(251,191,36,.4);background:#fbbf241a;padding:var(--space-3) var(--space-5);border-radius:var(--radius-lg);border:1px solid rgba(251,191,36,.2);display:inline-block}.action-buttons{display:flex;gap:var(--space-4);justify-content:center;margin-top:var(--space-6);flex-wrap:wrap}.complete-btn,.pass-btn{padding:var(--space-4) var(--space-6);font-size:clamp(1rem,2.5vw,1.125rem);font-weight:600;border:none;border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base);letter-spacing:.3px;position:relative;overflow:hidden;min-height:48px}.complete-btn:before,.pass-btn:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.complete-btn{background:var(--success-gradient);color:#fff;box-shadow:var(--shadow-md)}.complete-btn:hover:not(:disabled){box-shadow:var(--shadow-lg),0 0 20px #10b98166}.complete-btn:hover:not(:disabled):before{left:100%}.pass-btn{background:linear-gradient(135deg,var(--danger-500),var(--danger-600));color:#fff;box-shadow:var(--shadow-md)}.pass-btn:hover:not(:disabled){box-shadow:var(--shadow-lg),0 0 20px #ef444466}.pass-btn:hover:not(:disabled):before{left:100%}.pass-btn:disabled{opacity:.5;cursor:not-allowed}.vote-buttons{display:flex;gap:var(--space-4);justify-content:center;margin-top:var(--space-6);flex-wrap:wrap}.vote-yes,.vote-no{padding:var(--space-4) var(--space-8);font-size:clamp(1rem,3vw,1.25rem);font-weight:700;border:none;border-radius:var(--radius-lg);cursor:pointer;transition:all var(--transition-base);color:#fff;letter-spacing:.5px;position:relative;overflow:hidden;min-width:120px;min-height:52px}.vote-yes:before,.vote-no:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s}.vote-yes{background:var(--success-gradient);box-shadow:var(--shadow-md),0 0 20px #10b9814d}.vote-no{background:linear-gradient(135deg,var(--danger-500),var(--danger-600));box-shadow:var(--shadow-md),0 0 20px #ef44444d}.vote-yes:hover,.vote-no:hover{transform:translateY(-2px) scale(1.02)}.vote-yes:hover:before,.vote-no:hover:before{left:100%}.vote-yes:hover{box-shadow:var(--shadow-lg),0 0 30px #10b98166}.vote-no:hover{box-shadow:var(--shadow-lg),0 0 30px #ef444466}.voted-message{font-size:clamp(1rem,2.5vw,1.125rem);color:#10b981;margin-top:var(--space-5);font-weight:600;text-shadow:0 2px 10px rgba(16,185,129,.3)}.voting-progress{font-size:clamp(1rem,2.5vw,1.25rem);color:#fbbf24;margin-top:var(--space-5);font-weight:600;text-shadow:0 2px 10px rgba(251,191,36,.3)}.task-reminder{background:linear-gradient(135deg,#0000004d,#0003);border-radius:var(--radius-lg);padding:var(--space-5);margin:var(--space-5) 0;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:1px solid rgba(255,255,255,.1)}.vote-results{background:linear-gradient(135deg,#ffffff26,#ffffff1a);border-radius:var(--radius-lg);padding:var(--space-5);margin:var(--space-5) 0;animation:slideIn .6s ease;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.2)}@keyframes slideIn{0%{opacity:0;transform:translateY(-30px)}to{opacity:1;transform:translateY(0)}}.vote-results h2{color:#fbbf24;margin-bottom:var(--space-4);font-weight:700;font-size:clamp(1.125rem,3vw,1.375rem);text-shadow:0 2px 10px rgba(251,191,36,.3)}.vote-results p{font-size:clamp(1rem,2.5vw,1.125rem);margin:var(--space-3) 0;font-weight:500}.truth-or-dare .scoreboard{color:#fff}.truth-or-dare .scoreboard h3{font-size:clamp(1.125rem,3vw,1.375rem);margin-bottom:var(--space-4);text-align:center;font-weight:700;color:#fbbf24;text-shadow:0 2px 10px rgba(251,191,36,.3)}.score-list{display:flex;flex-direction:column;gap:var(--space-3);margin-bottom:var(--space-5)}.truth-or-dare .score-item{background:linear-gradient(135deg,#ffffff1f,#ffffff14);border-radius:var(--radius-md);padding:var(--space-3) var(--space-4);display:flex;justify-content:space-between;align-items:center;transition:all var(--transition-fast);-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border:1px solid rgba(255,255,255,.1)}.truth-or-dare .score-item:hover{background:#ffffff26}.truth-or-dare .score-item.current-player{background:linear-gradient(135deg,#fbbf244d,#fbbf2433);border:2px solid #fbbf24;box-shadow:0 0 20px #fbbf2433}.truth-or-dare .player-name{font-weight:600;font-size:1rem;color:#fff}.player-stats{display:flex;gap:var(--space-4);align-items:center}.truth-or-dare .score{font-weight:700;color:#10b981;font-size:1rem;text-shadow:0 1px 5px rgba(16,185,129,.3)}.passes{font-size:.875rem;opacity:.8;font-weight:500}.truth-or-dare .game-info{padding-top:var(--space-4);border-top:1px solid rgba(255,255,255,.2);display:flex;justify-content:space-between;flex-wrap:wrap;gap:var(--space-2);font-size:.9375rem;opacity:.9;font-weight:500}@media (max-width: 768px){.truth-or-dare .game-content{flex-direction:column;padding:var(--space-3);gap:var(--space-3)}.truth-or-dare .sidebar{width:100%;order:2;padding:var(--space-4)}.truth-or-dare .main-area{order:1}.spinner-container{width:clamp(200px,60vw,260px);height:clamp(200px,60vw,260px);margin:var(--space-4) auto}.choice-buttons,.vote-buttons,.action-buttons{flex-direction:column;gap:var(--space-3)}.choice-btn,.vote-yes,.vote-no{width:100%;padding:var(--space-4);min-width:auto}.complete-btn,.pass-btn{width:100%}.truth-or-dare .game-header{padding:var(--space-3) var(--space-4)}.task-container{padding:var(--space-4)}.truth-or-dare .game-info{flex-direction:column;text-align:center}}@media (max-width: 480px){.truth-or-dare{border-radius:var(--radius-lg)}.spinner-container{width:clamp(180px,65vw,220px);height:clamp(180px,65vw,220px)}.spin-button{width:100%;padding:var(--space-3) var(--space-5)}}@media (min-width: 1024px){.truth-or-dare .sidebar{width:320px}.truth-or-dare .game-content{padding:var(--space-6);gap:var(--space-6)}}.game-container{width:100%;height:100%;display:flex;flex-direction:column;animation:fadeIn .4s ease-out;border-radius:var(--radius-lg);overflow:hidden;background:#fff;box-shadow:var(--shadow-lg)}.game-header{background:var(--primary-gradient);color:#fff;padding:var(--space-4) var(--space-5);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-3);flex-shrink:0}.game-header h2{font-size:clamp(1.125rem,3vw,1.375rem);font-weight:700;margin:0;display:flex;align-items:center;gap:var(--space-2)}.game-players{display:flex;gap:var(--space-3);font-size:.9375rem;flex-wrap:wrap}.game-players span{padding:var(--space-2) var(--space-3);background:#ffffff26;border-radius:var(--radius-full);transition:all var(--transition-fast);font-weight:500;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.game-players .current-player{background:#ffffff59;font-weight:700;transform:scale(1.02);box-shadow:0 2px 8px #00000026}.game-content{flex:1;background:linear-gradient(180deg,var(--gray-50) 0%,white 100%);padding:var(--space-5);overflow:hidden;display:flex;flex-direction:column;min-height:0}@media (max-width: 768px){.game-container{border-radius:var(--radius-md)}.game-header{padding:var(--space-3) var(--space-4);flex-direction:column;text-align:center}.game-header h2{font-size:1.125rem;justify-content:center}.game-players{justify-content:center;gap:var(--space-2)}.game-players span{padding:var(--space-1) var(--space-3);font-size:.875rem}.game-content{padding:var(--space-4)}}@media (max-width: 480px){.game-container{border-radius:var(--radius-sm);box-shadow:var(--shadow-md)}.game-header{padding:var(--space-3);gap:var(--space-2)}.game-header h2{font-size:1rem}.game-players{width:100%;gap:var(--space-2)}.game-players span{flex:1;text-align:center;padding:var(--space-1) var(--space-2);font-size:.8125rem}.game-content{padding:var(--space-3)}}@media (min-width: 1024px){.game-header{padding:var(--space-5) var(--space-6)}.game-players{gap:var(--space-4)}.game-players span{padding:var(--space-2) var(--space-4);font-size:1rem}.game-content{padding:var(--space-6)}}@media (min-width: 1280px){.game-header{padding:var(--space-5) var(--space-8)}.game-content{padding:var(--space-8)}}@media (prefers-color-scheme: dark){.game-container{background:var(--gray-900);box-shadow:0 4px 20px #0006}.game-content{background:linear-gradient(180deg,var(--gray-800) 0%,var(--gray-900) 100%)}}@media (prefers-reduced-motion: reduce){.game-container{animation:none}.game-players .current-player{transform:none}}.game-selector{padding:var(--space-4);max-width:1200px;margin:0 auto}.selector-header{margin-bottom:var(--space-5)}.selector-header h2{font-size:clamp(1.125rem,3vw,1.375rem);font-weight:600;color:var(--gray-800);margin:0}.game-pool-selector .selector-info{font-size:.8125rem;color:var(--gray-500);margin:var(--space-2) 0;line-height:1.5}.games-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:var(--space-4)}.game-card{background:#fff;border:2px solid var(--gray-200);border-radius:var(--radius-lg);padding:var(--space-5);cursor:pointer;transition:all var(--transition-base);position:relative;display:flex;flex-direction:column;min-height:140px}.game-card:hover{border-color:var(--primary-400);background:var(--primary-50);box-shadow:var(--shadow-md)}.game-card.selected{border-color:var(--primary-500);background:var(--primary-50);box-shadow:var(--shadow-md),0 0 0 3px var(--primary-100)}.game-card.non-interactive{cursor:default}.game-card.non-interactive:hover{transform:none;border-color:var(--gray-200);box-shadow:none;background:#fff}.game-icon{font-size:2.25rem;margin-bottom:var(--space-3);display:block;line-height:1}.game-name{font-size:1.0625rem;font-weight:600;margin:0 0 var(--space-2) 0;color:var(--gray-800)}.game-description{font-size:.875rem;color:var(--gray-500);margin:0;line-height:1.5;flex:1}.selected-indicator{position:absolute;top:var(--space-3);right:var(--space-3);width:24px;height:24px;background:var(--primary-gradient);color:#fff;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;box-shadow:var(--shadow-sm)}.game-pool-selector{padding:var(--space-4)}.pool-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-4);margin:var(--space-5) 0}.pool-card{display:flex;align-items:flex-start;padding:var(--space-4);background:#fff;border:2px solid var(--gray-200);border-radius:var(--radius-md);cursor:pointer;transition:all var(--transition-base);gap:var(--space-3)}.pool-card:hover{border-color:var(--primary-400);background:var(--primary-50)}.pool-card.non-interactive{cursor:default}.pool-card.non-interactive:hover{border-color:var(--gray-200);background:#fff}.checkbox-area{margin-top:2px;flex-shrink:0}.custom-checkbox{width:22px;height:22px;border:2px solid var(--primary-500);border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;transition:all var(--transition-fast);background:#fff}.custom-checkbox.checked{background:var(--primary-gradient);border-color:transparent}.checkmark{color:#fff;font-size:.875rem;font-weight:700}.game-content{flex:1;min-width:0}.pool-card .game-icon{font-size:1.5rem;margin-bottom:var(--space-2)}.pool-card .game-name{font-size:.9375rem;font-weight:600;margin:0 0 var(--space-2) 0;color:var(--gray-800)}.pool-card .game-description{font-size:.8125rem;color:var(--gray-500);line-height:1.4;margin:0}.selected-count{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:var(--primary-50);border-radius:var(--radius-md);margin:var(--space-4) 0;font-size:.9375rem;color:var(--primary-600);font-weight:500}.pool-actions{display:flex;gap:var(--space-2);flex-wrap:wrap}.select-all-btn,.clear-all-btn{padding:var(--space-2) var(--space-3);border:2px solid var(--primary-500);background:#fff;color:var(--primary-600);border-radius:var(--radius-md);font-size:.875rem;font-weight:500;cursor:pointer;transition:all var(--transition-fast)}.select-all-btn:hover,.clear-all-btn:hover{background:var(--primary-gradient);color:#fff;border-color:transparent}.update-pool-btn{display:flex;align-items:center;justify-content:center;gap:var(--space-2);width:100%;max-width:400px;margin:var(--space-6) auto;padding:var(--space-4);background:var(--primary-gradient);color:#fff;border:none;border-radius:var(--radius-md);font-size:1rem;font-weight:600;cursor:pointer;transition:all var(--transition-base);min-height:52px}.update-pool-btn:hover:not(:disabled){box-shadow:var(--shadow-lg),0 0 20px #6366f14d}.update-pool-btn:disabled{opacity:.5;cursor:not-allowed}.loading-indicator{display:flex;align-items:center;justify-content:center;gap:var(--space-3);padding:var(--space-4);margin:var(--space-5) 0;background:var(--primary-50);border-radius:var(--radius-md);font-size:.9375rem;color:var(--primary-600);font-weight:500}.spinner-small{width:20px;height:20px;border:2px solid var(--primary-200);border-top-color:var(--primary-600);border-radius:50%;animation:spin .8s linear infinite}@media (prefers-color-scheme: dark){.game-selector,.selector-header h2{color:var(--gray-100)}.game-card{background:var(--gray-800);border-color:var(--gray-700);color:var(--gray-100)}.game-card:hover{border-color:var(--primary-400);background:var(--gray-700)}.game-card.selected{border-color:var(--primary-400);background:#6366f126}.game-name{color:var(--gray-100)}.game-description{color:var(--gray-400)}.pool-card{background:var(--gray-800);border-color:var(--gray-700)}.pool-card:hover{border-color:var(--primary-400);background:var(--gray-700)}.custom-checkbox{background:var(--gray-800);border-color:var(--primary-400)}.pool-card .game-name{color:var(--gray-100)}.pool-card .game-description{color:var(--gray-400)}.selected-count{background:#6366f126;color:var(--primary-400)}.select-all-btn,.clear-all-btn{background:var(--gray-800);border-color:var(--primary-400);color:var(--primary-400)}.select-all-btn:hover,.clear-all-btn:hover{background:var(--primary-gradient);color:#fff}.loading-indicator{background:#6366f126;color:var(--primary-400)}}@media (max-width: 480px){.game-selector{padding:var(--space-3)}.games-grid{grid-template-columns:1fr;gap:var(--space-3)}.game-card{padding:var(--space-4);min-height:120px}.game-icon{font-size:2rem}.pool-grid{grid-template-columns:1fr;gap:var(--space-3)}.pool-card{padding:var(--space-3)}.selected-count{flex-direction:column;text-align:center}.pool-actions{justify-content:center;width:100%}.select-all-btn,.clear-all-btn{flex:1;justify-content:center}.update-pool-btn{max-width:100%}}@media (min-width: 481px) and (max-width: 768px){.games-grid,.pool-grid{grid-template-columns:repeat(2,1fr)}}@media (min-width: 769px){.game-selector{padding:var(--space-5)}.games-grid{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:var(--space-5)}.game-card{padding:var(--space-5)}.pool-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr))}}.settings-modal-backdrop{position:fixed;top:0;right:0;bottom:0;left:0;background:#0009;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);display:flex;justify-content:center;align-items:center;z-index:var(--z-modal);padding:var(--space-4);animation:fadeIn .2s ease-out}.settings-modal{background:#fff;border-radius:var(--radius-xl);width:100%;max-width:800px;max-height:calc(100vh - var(--space-8));max-height:calc(100dvh - var(--space-8));display:flex;flex-direction:column;box-shadow:var(--shadow-2xl);animation:scaleIn .3s ease-out;overflow:hidden}.settings-modal-header{padding:var(--space-5) var(--space-6);border-bottom:1px solid var(--gray-100);display:flex;justify-content:space-between;align-items:center;background:linear-gradient(135deg,var(--primary-50) 0%,var(--secondary-50) 100%);flex-shrink:0}.settings-modal-header h2{margin:0;color:var(--gray-800);font-size:clamp(1.25rem,3vw,1.5rem);font-weight:700;display:flex;align-items:center;gap:var(--space-3)}.close-btn{background:#fff;border:none;font-size:1.25rem;color:var(--gray-500);cursor:pointer;padding:0;width:36px;height:36px;min-width:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-full);transition:all var(--transition-fast);box-shadow:var(--shadow-sm)}.close-btn:hover{background:var(--gray-100);color:var(--gray-700);transform:scale(1.05)}.close-btn:active{transform:scale(.95)}.settings-tabs{display:flex;gap:var(--space-2);padding:var(--space-4) var(--space-6);border-bottom:1px solid var(--gray-100);background:var(--gray-50);overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none;flex-shrink:0}.settings-tabs::-webkit-scrollbar{display:none}.tab{padding:var(--space-3) var(--space-4);background:#fff;border:2px solid var(--gray-200);border-radius:var(--radius-md);font-size:.9375rem;font-weight:500;color:var(--gray-600);cursor:pointer;transition:all var(--transition-fast);display:flex;align-items:center;gap:var(--space-2);white-space:nowrap;flex-shrink:0;min-height:44px}.tab:hover{border-color:var(--primary-400);color:var(--primary-600);background:var(--primary-50)}.tab.active{background:var(--primary-gradient);color:#fff;border-color:transparent;box-shadow:var(--shadow-md)}.settings-modal-content{flex:1;padding:var(--space-6);overflow-y:auto;-webkit-overflow-scrolling:touch}.settings-section{animation:fadeIn .3s ease-out}.section-description{margin-bottom:var(--space-6)}.section-description p{color:var(--gray-600);line-height:1.6;margin:0 0 var(--space-4) 0;font-size:.9375rem}.permission-notice{display:flex;align-items:center;gap:var(--space-3);padding:var(--space-3) var(--space-4);background:linear-gradient(135deg,var(--warning-50),var(--warning-100));border:1px solid var(--warning-200);border-radius:var(--radius-md);color:var(--warning-600);font-weight:500;font-size:.875rem}.notice-icon{font-size:1.125rem;flex-shrink:0}.current-pool-info{margin-top:var(--space-6);padding:var(--space-5);background:linear-gradient(135deg,var(--success-50),var(--success-100));border:1px solid var(--success-200);border-radius:var(--radius-lg)}.current-pool-info h4{margin:0 0 var(--space-4) 0;color:var(--success-600);font-size:1rem;font-weight:600}.selected-games-preview{display:flex;flex-wrap:wrap;gap:var(--space-2)}.game-badge{padding:var(--space-2) var(--space-3);background:#fff;border:1px solid var(--success-200);border-radius:var(--radius-full);color:var(--success-600);font-size:.8125rem;font-weight:500;display:flex;align-items:center;gap:var(--space-2)}.room-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--space-4);margin-top:var(--space-5)}.info-item{padding:var(--space-4);background:var(--gray-50);border-radius:var(--radius-md);display:flex;flex-direction:column;gap:var(--space-1);border:1px solid var(--gray-100)}.info-label{color:var(--gray-500);font-size:.75rem;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.info-value{color:var(--gray-800);font-size:1.0625rem;font-weight:600}.status-active{color:var(--success-500)}.settings-modal-footer{padding:var(--space-4) var(--space-6);border-top:1px solid var(--gray-100);display:flex;justify-content:flex-end;gap:var(--space-3);background:var(--gray-50);flex-shrink:0}.btn-close{padding:var(--space-3) var(--space-6);background:var(--primary-gradient);color:#fff;border:none;border-radius:var(--radius-md);font-size:.9375rem;font-weight:600;cursor:pointer;transition:all var(--transition-base);min-height:44px}.btn-close:hover{box-shadow:var(--shadow-lg),var(--glow-primary);transform:translateY(-2px)}.btn-close:active{transform:translateY(0)}@media (max-width: 768px){.settings-modal-backdrop{padding:var(--space-3);align-items:flex-end}.settings-modal{max-height:calc(100vh - var(--space-6));max-height:calc(100dvh - var(--space-6));border-radius:var(--radius-xl) var(--radius-xl) 0 0;animation:slideUp .3s ease-out}.settings-modal-header{padding:var(--space-4)}.settings-modal-header h2{font-size:1.125rem}.settings-tabs{padding:var(--space-3) var(--space-4);gap:var(--space-2)}.tab{padding:var(--space-2) var(--space-3);font-size:.875rem;min-height:40px}.settings-modal-content{padding:var(--space-4)}.room-info-grid{grid-template-columns:repeat(2,1fr);gap:var(--space-3)}.info-item{padding:var(--space-3)}.settings-modal-footer{padding:var(--space-4)}}@media (max-width: 480px){.settings-modal-backdrop{padding:0}.settings-modal{max-height:100vh;max-height:100dvh;border-radius:0}.settings-tabs{flex-direction:column;gap:var(--space-2)}.tab{width:100%;justify-content:center}.room-info-grid{grid-template-columns:1fr}.permission-notice{flex-direction:column;text-align:center;gap:var(--space-2)}.selected-games-preview{justify-content:center}.settings-modal-footer{flex-direction:column}.btn-close{width:100%}}@media (min-width: 1024px){.settings-modal{max-width:900px}.settings-modal-header{padding:var(--space-6) var(--space-8)}.settings-tabs{padding:var(--space-4) var(--space-8)}.settings-modal-content{padding:var(--space-8)}.settings-modal-footer{padding:var(--space-5) var(--space-8)}}@media (hover: none) and (pointer: coarse){.tab{min-height:48px}.close-btn{width:44px;height:44px;min-width:44px}.btn-close{min-height:48px}}@media (prefers-color-scheme: dark){.settings-modal{background:var(--gray-900);border:1px solid var(--gray-700)}.settings-modal-header{background:linear-gradient(135deg,#6366f11a,#8b5cf61a);border-color:var(--gray-700)}.settings-modal-header h2{color:var(--gray-100)}.close-btn{background:var(--gray-800);color:var(--gray-400)}.close-btn:hover{background:var(--gray-700);color:var(--gray-200)}.settings-tabs{background:var(--gray-800);border-color:var(--gray-700)}.tab{background:var(--gray-900);border-color:var(--gray-700);color:var(--gray-400)}.tab:hover{background:var(--gray-800);border-color:var(--primary-500);color:var(--primary-400)}.settings-modal-content{background:var(--gray-900)}.section-description p{color:var(--gray-400)}.info-item{background:var(--gray-800);border-color:var(--gray-700)}.info-label{color:var(--gray-500)}.info-value{color:var(--gray-200)}.settings-modal-footer{background:var(--gray-800);border-color:var(--gray-700)}}.room{width:100%;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;background:var(--dark-gradient);box-sizing:border-box;overflow-x:hidden}.reconnecting-container{display:flex;flex-direction:column;align-items:center;justify-content:center;height:100vh;color:#fff;text-align:center;padding:var(--space-5);gap:var(--space-4)}.reconnecting-container .spinner{width:60px;height:60px;border:4px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}.reconnecting-container h2{font-size:clamp(1.5rem,4vw,2rem);font-weight:600;color:#fff}.reconnecting-container p{font-size:clamp(1rem,2.5vw,1.2rem);opacity:.7}.room-header{background:linear-gradient(135deg,#fffffffa,#f8fafcfa);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:var(--space-4) var(--space-5);box-shadow:var(--shadow-md);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:var(--space-3);border-bottom:1px solid var(--primary-100);width:100%;box-sizing:border-box;position:sticky;top:0;z-index:var(--z-sticky)}.room-header h1{background:var(--primary-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;font-size:clamp(1.25rem,3vw,1.75rem);font-weight:700;margin:0}.room-info{display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap}.room-info span{color:var(--gray-500);font-size:clamp(.875rem,2vw,1rem);display:flex;align-items:center;gap:var(--space-2)}.header-buttons{display:flex;gap:var(--space-2);flex-wrap:wrap}.settings-btn{padding:var(--space-2) var(--space-4);background:var(--primary-gradient);color:#fff;border:none;border-radius:var(--radius-md);font-size:.9375rem;font-weight:600;transition:all var(--transition-base);cursor:pointer;display:flex;align-items:center;gap:var(--space-2);min-height:40px}.settings-btn:hover{box-shadow:var(--shadow-lg),0 0 20px #6366f14d}.leave-btn{padding:var(--space-2) var(--space-4);background:linear-gradient(135deg,var(--danger-500),var(--danger-600));color:#fff;border:none;border-radius:var(--radius-md);font-size:.9375rem;font-weight:600;transition:all var(--transition-base);cursor:pointer;min-height:40px}.leave-btn:hover{box-shadow:var(--shadow-lg),0 0 20px #ef44444d}.ready-status-bar{background:var(--card-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);padding:var(--space-3) var(--space-4);margin:var(--space-4);border-radius:var(--radius-lg);box-shadow:var(--shadow-md);border:1px solid var(--glass-border);max-width:1400px;margin-left:auto;margin-right:auto;width:calc(100% - var(--space-8))}.status-content{display:flex;justify-content:space-between;align-items:center;gap:var(--space-4);flex-wrap:wrap}.ready-info{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:var(--success-50);border:1px solid rgba(16,185,129,.2);border-radius:var(--radius-full)}.ready-icon{font-size:1.125rem}.ready-text{color:var(--success-600);font-weight:500;font-size:.9375rem}.pool-status-inline{display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);background:var(--primary-50);border:1px solid rgba(99,102,241,.2);border-radius:var(--radius-full);color:var(--primary-600);font-weight:500;font-size:.9375rem}.pool-status-inline.warning{background:var(--warning-50);border-color:#f59e0b33;color:var(--warning-600)}.pool-icon{font-size:1.125rem}.room-content{flex:1;display:flex;padding:var(--space-4);gap:var(--space-4);width:100%;box-sizing:border-box;max-width:1400px;margin:0 auto}.main-area{flex:1;background:var(--card-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:var(--radius-xl);padding:var(--space-5);box-shadow:var(--shadow-xl);border:1px solid var(--glass-border);min-height:400px;display:flex;flex-direction:column}.sidebar{width:320px;display:flex;flex-direction:column;gap:var(--space-4);flex-shrink:0}.players-list{background:var(--card-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-radius:var(--radius-lg);padding:var(--space-4);box-shadow:var(--shadow-lg);border:1px solid var(--glass-border)}.players-list h3{color:var(--primary-600);margin-bottom:var(--space-4);font-weight:600;font-size:1.0625rem;display:flex;align-items:center;gap:var(--space-2)}.players-list ul{list-style:none;display:flex;flex-direction:column;gap:var(--space-2)}.players-list li{display:flex;justify-content:space-between;align-items:center;padding:var(--space-3);border-radius:var(--radius-md);background:var(--gray-50);transition:all var(--transition-fast)}.players-list li:hover{background:var(--gray-100)}.players-list li.playing{background:var(--primary-50);border:1px solid var(--primary-200)}.player-name{color:var(--gray-800);font-weight:500;font-size:.9375rem}.player-status{font-size:1.125rem}.waiting-area{text-align:center;padding:var(--space-8);display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1}.waiting-area h2{background:var(--primary-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;margin-bottom:var(--space-4);font-size:clamp(1.5rem,4vw,2rem);font-weight:700}.waiting-area p{color:var(--gray-500);margin-bottom:var(--space-5);font-size:clamp(.9375rem,2vw,1.0625rem)}.play-btn{padding:var(--space-4) var(--space-8);background:var(--primary-gradient);color:#fff;border:none;border-radius:var(--radius-md);font-size:clamp(1rem,2.5vw,1.125rem);font-weight:600;transition:all var(--transition-base);box-shadow:var(--shadow-md);min-height:52px}.play-btn:hover:not(:disabled){box-shadow:var(--shadow-xl),0 0 30px #6366f159}.play-btn.secondary{background:linear-gradient(135deg,var(--gray-500),var(--gray-600));font-size:clamp(.9375rem,2vw,1rem);padding:var(--space-3) var(--space-6)}.play-btn.secondary:hover{background:linear-gradient(135deg,var(--gray-600),var(--gray-700))}.waiting-message{display:flex;flex-direction:column;align-items:center;gap:var(--space-5)}.spectator-area{text-align:center;padding:var(--space-8);background:var(--gray-50);border-radius:var(--radius-lg)}.spectator-area h3{color:var(--gray-800);margin-bottom:var(--space-3)}.spectator-area p{color:var(--gray-500)}.game-start-section{display:flex;flex-direction:column;gap:var(--space-5);align-items:center;width:100%}.ready-status{background:var(--success-50);border:2px solid rgba(16,185,129,.2);border-radius:var(--radius-lg);padding:var(--space-5);text-align:center;width:100%;max-width:400px}.ready-status h3{margin:0 0 var(--space-4) 0;color:var(--success-600);font-size:1.125rem}.ready-counter{display:flex;align-items:center;justify-content:center;gap:var(--space-2);margin:var(--space-4) 0;font-size:clamp(1.5rem,4vw,2rem);font-weight:700}.ready-count{color:var(--success-500)}.separator,.total-count{color:var(--gray-400)}.ready-counter .label{font-size:clamp(.9375rem,2vw,1.0625rem);font-weight:500;color:var(--gray-500);margin-left:var(--space-2)}.start-game-btn{padding:var(--space-4) var(--space-8);font-size:clamp(1rem,2.5vw,1.25rem);font-weight:700;background:var(--success-gradient);color:#fff;border:none;border-radius:var(--radius-full);cursor:pointer;transition:all var(--transition-base);box-shadow:var(--shadow-md),0 0 20px #10b98140;margin-top:var(--space-4);display:inline-flex;align-items:center;gap:var(--space-2);min-height:52px}.start-game-btn:hover:not(:disabled){box-shadow:var(--shadow-lg),0 0 30px #10b98166}.start-game-btn:disabled{opacity:.5;cursor:not-allowed}.start-game-btn .spinner{width:20px;height:20px;border:3px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%}.game-pool-section{background:var(--gray-50);border:2px solid var(--gray-200);border-radius:var(--radius-lg);padding:var(--space-5);width:100%}.game-pool-section h3{margin:0 0 var(--space-5) 0;color:var(--gray-800);font-size:1.125rem;text-align:center}.waiting-info{margin-top:var(--space-5);padding:var(--space-5);background:var(--gray-50);border-radius:var(--radius-lg)}.ready-counter-small{display:flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-4);background:var(--success-50);border-radius:var(--radius-md);margin-bottom:var(--space-4);font-size:1.0625rem;font-weight:500}.ready-counter-small .icon{font-size:1.5rem}.selected-pool-info{text-align:center;padding:var(--space-4);background:var(--primary-50);border-radius:var(--radius-md)}.pool-status{color:var(--success-500);font-size:1rem;margin:0 0 var(--space-2) 0;font-weight:500}.waiting-host{color:var(--gray-500);font-size:.875rem;margin:0;animation:pulse 2s infinite}.warning{color:var(--warning-600);background:var(--warning-50);border:1px solid rgba(245,158,11,.2);padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);margin:var(--space-3) 0;text-align:center;font-weight:500}.info-message{color:var(--primary-600);background:var(--primary-50);border:1px solid rgba(99,102,241,.2);padding:var(--space-3) var(--space-5);border-radius:var(--radius-md);margin:var(--space-4) 0;text-align:center;font-weight:500;font-size:.9375rem}.warning-box{margin:var(--space-3) 0}.settings-prompt{display:flex;flex-direction:column;align-items:center;gap:var(--space-4)}.open-settings-btn{padding:var(--space-3) var(--space-6);background:var(--primary-gradient);color:#fff;border:none;border-radius:var(--radius-md);font-size:1.0625rem;font-weight:600;cursor:pointer;transition:all var(--transition-base);display:flex;align-items:center;gap:var(--space-2)}.open-settings-btn:hover{box-shadow:var(--shadow-lg),0 0 20px #6366f14d}@media (max-width: 640px){.room-header{padding:var(--space-3);flex-direction:column;align-items:stretch}.room-info{justify-content:center}.header-buttons{justify-content:center;width:100%}.settings-btn,.leave-btn{flex:1;justify-content:center}.ready-status-bar{margin:var(--space-3);width:calc(100% - var(--space-6))}.status-content{flex-direction:column}.ready-info,.pool-status-inline{width:100%;justify-content:center}.room-content{flex-direction:column;padding:var(--space-3)}.sidebar{width:100%;order:2}.main-area{width:100%;order:1;min-height:auto;padding:var(--space-4)}.waiting-area{padding:var(--space-5)}.play-btn,.start-game-btn{width:100%}}@media (min-width: 640px) and (max-width: 1023px){.room-content{flex-direction:column}.sidebar{width:100%;max-width:600px;margin:0 auto}}@media (min-width: 1024px){.room-content{flex-direction:row}.sidebar{width:340px}.main-area{min-height:500px}}@media (min-width: 1280px){.sidebar{width:380px}.room-content{gap:var(--space-6)}}.app{width:100%;min-height:100vh;display:flex;flex-direction:column;background:var(--dark-gradient);position:relative;overflow-x:hidden}.loading{display:flex;justify-content:center;align-items:center;min-height:100vh;flex-direction:column;gap:var(--space-5);color:#fff;padding:var(--space-5);text-align:center}.loading h2{color:#fff;font-size:clamp(1.25rem,3vw,1.5rem);font-weight:600}.loading p{color:#ffffffb3;font-size:clamp(.875rem,2vw,1rem)}.spinner{width:48px;height:48px;border:4px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}.spinner.sm{width:20px;height:20px;border-width:2px}.spinner.md{width:32px;height:32px;border-width:3px}.spinner.lg{width:48px;height:48px}.error,.warning,.success,.info{padding:var(--space-3) var(--space-4);border-radius:var(--radius-md);margin:var(--space-3) 0;text-align:center;font-weight:500;font-size:.9375rem;animation:slideDown .3s ease-out}.error{background:var(--danger-100);color:var(--danger-600);border:1px solid var(--danger-500)}.warning{background:var(--warning-100);color:var(--warning-600);border:1px solid var(--warning-500)}.success{background:var(--success-100);color:var(--success-600);border:1px solid var(--success-500)}.info{background:var(--primary-100);color:var(--primary-600);border:1px solid var(--primary-500)}.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);font-size:1rem;font-weight:600;border-radius:var(--radius-md);border:none;cursor:pointer;transition:all var(--transition-base);white-space:nowrap;text-decoration:none}.btn:hover:not(:disabled){transform:translateY(-2px)}.btn:active:not(:disabled){transform:translateY(0)}.btn-primary{background:var(--primary-gradient);color:#fff;box-shadow:var(--shadow-md),0 0 #6366f166}.btn-primary:hover:not(:disabled){box-shadow:var(--shadow-lg),0 0 20px #6366f14d}.btn-secondary{background:var(--gray-100);color:var(--gray-700);border:2px solid var(--gray-200)}.btn-secondary:hover:not(:disabled){background:var(--gray-200);border-color:var(--gray-300)}.btn-success{background:var(--success-gradient);color:#fff;box-shadow:var(--shadow-md)}.btn-success:hover:not(:disabled){box-shadow:var(--shadow-lg),0 0 20px #10b9814d}.btn-danger{background:linear-gradient(135deg,var(--danger-500),var(--danger-600));color:#fff;box-shadow:var(--shadow-md)}.btn-danger:hover:not(:disabled){box-shadow:var(--shadow-lg),0 0 20px #ef44444d}.btn-ghost{background:transparent;color:var(--gray-600)}.btn-ghost:hover:not(:disabled){background:var(--gray-100);transform:none}.btn-sm{padding:var(--space-2) var(--space-3);font-size:.875rem}.btn-lg{padding:var(--space-4) var(--space-6);font-size:1.125rem}.btn-xl{padding:var(--space-5) var(--space-8);font-size:1.25rem}.card{background:var(--card-bg);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);border:1px solid rgba(255,255,255,.2);overflow:hidden}.card-glass{background:var(--glass-bg);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid var(--glass-border)}.container{width:100%;max-width:1400px;margin:0 auto;padding:0 var(--space-4)}@media (min-width: 640px){.container{padding:0 var(--space-6)}}@media (min-width: 1024px){.container{padding:0 var(--space-8)}}@supports not (backdrop-filter: blur(20px)){.card-glass{background:#ffffffe6}}.focus-ring:focus-visible{outline:2px solid var(--primary-500);outline-offset:2px}.text-gradient{background:var(--primary-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.text-gradient-pink{background:var(--secondary-gradient);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}@supports (padding: max(0px)){.safe-area-bottom{padding-bottom:max(var(--space-4),env(safe-area-inset-bottom))}.safe-area-top{padding-top:max(var(--space-4),env(safe-area-inset-top))}}