:root{font-family:system-ui,Avenir,Helvetica,Arial,sans-serif;line-height:1.5;font-weight:400;color-scheme:light dark;color:#ffffffde;background-color:#242424;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.symbol-container{width:25vw;max-width:120px;height:auto;margin:0 auto}.symbol-img{width:100%;height:auto}a{font-weight:500;color:#646cff;text-decoration:inherit}a:hover{color:#535bf2}body{margin:0;display:flex;place-items:center;min-width:320px;min-height:100vh}h1{font-size:3.2em;line-height:1.1}button{border-radius:8px;border:1px solid transparent;padding:.6em 1.2em;font-size:1em;font-weight:500;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:border-color .25s}button:hover{border-color:#646cff}button:focus,button:focus-visible{outline:4px auto -webkit-focus-ring-color}.leaderboard-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#000000bf;display:flex;justify-content:center;align-items:center;z-index:1000}.leaderboard-container{background-color:#1e1e2f;padding:2rem;border-radius:1rem;width:90%;max-width:700px;color:#fff;box-shadow:0 0 20px #00000080;animation:fadeIn .3s ease}.leaderboard-header{display:flex;justify-content:space-between;margin-bottom:1rem}.leaderboard-header h2{font-size:1.8rem}.close-btn{background:transparent;border:none;color:#fff;font-size:1.5rem;cursor:pointer;transition:transform .2s}.close-btn:hover{transform:scale(1.2)}.no-entries{text-align:center;font-size:1.2rem;color:#aaa;margin-top:2rem}.leaderboard-table{width:100%;border-collapse:collapse}.leaderboard-table th,.leaderboard-table td{padding:.6rem 1rem;text-align:left}.leaderboard-table th{border-bottom:2px solid #444;font-weight:600}.leaderboard-table td{border-bottom:1px solid #333}.leaderboard-table tbody tr:hover{background-color:#ffffff0d}@keyframes fadeIn{0%{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}.welcome-container{display:flex;flex-direction:column;justify-content:center;align-items:center;height:100vh;width:100vw;background:var(--bg-primary),var(--background-image);background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:fixed;position:relative;transition:background var(--transition-normal);padding-top:120px;gap:var(--space-md)}.player-count-display{display:flex;align-items:center;justify-content:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-lg);background:#000c;border-radius:var(--radius-lg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:2px solid var(--primary-purple);box-shadow:var(--shadow-lg);transition:all var(--transition-normal);color:var(--white);position:relative;width:fit-content;max-width:90vw}.player-count-display:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg),0 0 20px #5c33f64d}.player-count-icon{font-size:1.2rem;animation:pulse 2s ease-in-out infinite}.player-count-content{display:flex;align-items:center;gap:var(--space-sm)}.player-count-value{font-size:1.4rem;font-weight:800;color:var(--primary-teal);text-shadow:0 0 15px rgba(0,191,166,.6);line-height:1;transition:all .3s ease;animation:countChange .5s ease-out}@keyframes countChange{0%{transform:scale(1)}50%{transform:scale(1.2);color:var(--primary-orange)}to{transform:scale(1)}}.player-count-label{font-size:.8rem;font-weight:600;color:var(--white);text-transform:uppercase;letter-spacing:.5px;opacity:.9}.connection-status{position:absolute;top:-2px;right:-2px;width:8px;height:8px;border-radius:50%;transition:all var(--transition-normal)}.connection-status.connected{background:var(--primary-teal);box-shadow:0 0 10px #00bfa699;animation:pulse 2s ease-in-out infinite}.connection-status.disconnected{background:#f44;box-shadow:0 0 10px #f449}.logo-container{position:relative;pointer-events:none;background:#000c;border-radius:var(--radius-lg);padding:var(--space-sm);border:2px solid var(--primary-purple);box-shadow:var(--shadow-lg),0 0 20px #5c33f64d;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:all var(--transition-normal);display:flex;align-items:center;justify-content:center;overflow:hidden;height:15vh;width:30vw;min-height:80px;min-width:160px;max-height:120px;max-width:240px;margin-bottom:var(--space-md)}.logo{height:100%;width:100%;object-fit:contain;object-position:center;filter:drop-shadow(0 0 20px rgba(0,191,166,.3));animation:logoFloat 3s ease-in-out infinite alternate}.welcome-box{background:#000000e6;padding:var(--space-2xl);border-radius:var(--radius-xl);text-align:center;width:100%;max-width:400px;box-shadow:var(--shadow-lg);border:2px solid var(--primary-purple);position:relative;overflow:hidden;transition:all var(--transition-normal);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);margin-top:var(--space-md)}.welcome-box:before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:var(--gradient-primary)}.welcome-box:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg),var(--shadow-glow)}h1{font-size:3rem;font-weight:800;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:var(--space-sm);text-shadow:0 0 30px rgba(0,191,166,.3);animation:titleGlow 3s ease-in-out infinite alternate}@keyframes titleGlow{0%{filter:drop-shadow(0 0 10px rgba(0,191,166,.3))}to{filter:drop-shadow(0 0 20px rgba(92,51,246,.4))}}.tagline{color:var(--white);margin:0 0 var(--space-xl) 0;font-size:1.1rem;font-weight:400;line-height:1.5;text-shadow:0 2px 4px rgba(0,0,0,.5)}input{width:100%;padding:var(--space-md) var(--space-lg);border-radius:var(--radius-md);border:2px solid transparent;margin-bottom:var(--space-lg);background:#000000b3;color:var(--white);font-size:1rem;transition:all var(--transition-normal);box-shadow:var(--shadow-sm)}input:focus{outline:none;border-color:var(--primary-teal);box-shadow:var(--shadow-md),0 0 0 3px #00bfa61a;transform:translateY(-1px)}input::placeholder{color:#ffffffb3;opacity:.7}.mode-switch{display:flex;justify-content:space-between;margin-bottom:var(--space-xl);background:var(--surface-hover);border-radius:var(--radius-md);padding:var(--space-xs);position:relative}.mode-switch:before{content:"";position:absolute;top:var(--space-xs);left:var(--space-xs);width:calc(50% - var(--space-xs));height:calc(100% - var(--space-sm));background:var(--gradient-primary);border-radius:var(--radius-sm);transition:transform var(--transition-normal);z-index:1}.mode-switch[data-mode=party]:before{transform:translate(100%)}.mode-switch button{flex:1;padding:var(--space-md) 0;background:transparent;color:var(--white);border:none;cursor:pointer;font-size:1rem;font-weight:600;position:relative;z-index:2;transition:color var(--transition-normal)}.mode-switch button.active{color:var(--white)}.mode-switch button:not(.active){color:#ffffffb3}.play-btn,.rules-btn{width:100%;padding:var(--space-md) var(--space-lg);border:none;margin-top:var(--space-md);border-radius:var(--radius-md);font-size:1.1rem;font-weight:600;cursor:pointer;transition:all var(--transition-normal);position:relative;overflow:hidden;text-transform:uppercase;letter-spacing:.5px}.play-btn{background:var(--gradient-primary);color:var(--white);box-shadow:var(--shadow-md)}.play-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}.play-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg),var(--shadow-glow)}.play-btn:hover:before{left:100%}.play-btn:active{transform:translateY(0) scale(.98)}.rules-btn{background:#000000b3;color:var(--white);border:2px solid var(--primary-teal)}.rules-btn:hover{background:var(--primary-teal);color:var(--white);transform:translateY(-2px);box-shadow:var(--shadow-md)}.rules-modal{position:fixed;inset:0;background:#000000e6;display:flex;justify-content:center;align-items:center;z-index:2000;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);animation:modalFadeIn .3s ease-out}@keyframes modalFadeIn{0%{opacity:0;-webkit-backdrop-filter:blur(0px);backdrop-filter:blur(0px)}to{opacity:1;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}}.rules-content{background:#000000e6;padding:var(--space-2xl);border-radius:var(--radius-xl);max-width:500px;width:90%;color:var(--white);box-shadow:var(--shadow-lg);border:2px solid var(--primary-teal);position:relative;animation:modalSlideIn .3s ease-out;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}@keyframes modalSlideIn{0%{opacity:0;transform:translateY(30px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}.rules-content h2{background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;margin-bottom:var(--space-lg);font-size:1.8rem;font-weight:700}.rules-content ul{list-style:none;margin-left:0;line-height:1.8;font-size:1rem}.rules-content li{margin-bottom:var(--space-md);padding-left:var(--space-xl);position:relative;color:var(--white)}.rules-content li:before{content:"🎯";position:absolute;left:0;top:0;font-size:1.2rem}.rules-content strong{color:var(--primary-orange);font-weight:700}.close-btn{background:var(--gradient-primary);border:none;padding:var(--space-md) var(--space-lg);border-radius:var(--radius-md);color:var(--white);cursor:pointer;font-size:1rem;transition:all var(--transition-normal)}.close-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}input:focus,button:focus{outline:2px solid var(--primary-teal);outline-offset:2px}.game-wrapper{display:flex;flex-wrap:wrap;height:100vh;width:100vw;padding:var(--space-lg);gap:var(--space-lg);justify-content:center;align-items:center;background:var(--bg-primary),var(--background-image);background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:fixed;position:relative;transition:background var(--transition-normal)}.game-wrapper.solo{flex-direction:column;padding-top:80px}.game-wrapper.solo .tile{width:100%;max-width:600px;height:70vh;min-height:500px}.room-id-display{position:absolute;top:30px;left:90%;transform:translate(-50%);font-size:20px;color:#fff;background-color:#00000080;padding:6px 12px;border-radius:8px}.game-wrapper.party .tile{min-width:300px;max-width:500px;height:75vh;min-height:400px}.game-wrapper.party{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:var(--space-lg);padding:80px var(--space-lg) var(--space-lg);align-items:start}.game-wrapper.party:has(.tile:nth-child(2)):not(:has(.tile:nth-child(3))){grid-template-columns:1fr 1fr;align-items:center}.tile{background:#000000e6;border-radius:var(--radius-xl);display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:var(--space-xl);position:relative;box-shadow:var(--shadow-lg);transition:all var(--transition-normal);border:2px solid var(--primary-purple);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--white)}.tile *{color:var(--white)!important}.tile h1,.tile h2,.tile h3,.tile h4,.tile h5,.tile h6{color:var(--white)!important;text-shadow:0 2px 4px rgba(0,0,0,.8);font-weight:700}.tile p,.tile span,.tile div{color:var(--white)!important;text-shadow:0 1px 3px rgba(0,0,0,.8);font-weight:600}.tile button{color:var(--white)!important;text-shadow:0 2px 4px rgba(0,0,0,.8)}.logo-container{position:fixed;top:var(--space-lg);left:var(--space-lg);pointer-events:none;margin-bottom:var(--space-sm)}.logo{width:200px;height:200px;object-fit:contain;filter:drop-shadow(0 0 20px rgba(0,191,166,.3));animation:logoFloat 3s ease-in-out infinite alternate}.count-display{top:var(--space-lg);background:#000c;border-radius:var(--radius-md);transition:all var(--transition-normal);border:2px solid var(--primary-purple);box-shadow:var(--shadow-lg);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);height:100px;width:200px;padding:var(--space-xs);display:flex;align-items:center;justify-content:center}.count-content{position:relative;width:100%;height:100%;display:flex;align-items:center;justify-content:center;transition:all .8s cubic-bezier(.4,0,.2,1)}.time-display{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.time-value{font-size:2.5rem;font-weight:800;color:var(--primary-orange);text-shadow:0 0 15px rgba(255,127,80,.5);line-height:1}.time-label{font-size:1rem;font-weight:600;color:var(--white);margin-top:var(--space-xs);opacity:.8}.nback-display-content{display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.nback-value{font-size:2.5rem;font-weight:800;color:var(--primary-orange);text-shadow:0 0 15px rgba(255,127,80,.5);line-height:1}.nback-label{font-size:.9rem;font-weight:600;color:var(--white);margin-top:var(--space-xs);opacity:.8;text-transform:uppercase;letter-spacing:1px}.count-content.show-time,.count-content.show-nback{opacity:1;transform:scale(1)}.count-content.show-time .nback-display-content{opacity:0;transform:translateY(20px) scale(.8)}.count-content.show-nback .time-display{opacity:0;transform:translateY(-20px) scale(.8)}.count-content.show-time .time-display,.count-content.show-nback .nback-display-content{opacity:1;transform:translateY(0) scale(1)}.symbol-area{width:220px;height:220px;background:#000c;border-radius:var(--radius-xl);display:flex;justify-content:center;align-items:center;overflow:hidden;margin-bottom:var(--space-lg);position:relative;border:2px solid var(--primary-teal);box-shadow:inset 0 0 20px #00bfa61a;transition:all var(--transition-normal);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.symbol-img{width:150px;height:150px;object-fit:contain;transition:all var(--transition-normal);filter:brightness(1.2) contrast(1.1)}.stay-until-next{animation:slideInScale .6s cubic-bezier(.34,1.56,.64,1) forwards}@keyframes slideInScale{0%{opacity:0;transform:translateY(40px) scale(.8)}50%{opacity:.8;transform:translateY(-10px) scale(1.1)}to{opacity:1;transform:translateY(0) scale(1)}}.react-btn{padding:var(--space-lg) var(--space-2xl);font-size:1.4rem;font-weight:700;background:var(--gradient-primary);border-radius:var(--radius-lg);color:var(--white);cursor:pointer;transition:all var(--transition-normal);box-shadow:var(--shadow-md),0 0 15px #ff7f504d;text-transform:uppercase;letter-spacing:1px;min-width:200px;position:relative;overflow:hidden;text-shadow:0 2px 4px rgba(0,0,0,.3)}.react-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}.react-btn:active:not(:disabled){transform:translateY(0) scale(.98)}.react-btn:disabled{opacity:.5;cursor:not-allowed;transform:none}.scoreboard{display:flex;flex-direction:column;gap:var(--space-md);flex-wrap:wrap;justify-content:center;align-items:center;width:100%;max-width:400px;background:#000c;padding:var(--space-lg);border-radius:var(--radius-lg);border:2px solid var(--primary-teal);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--white)}.scoreboard *{color:var(--white)!important}.scoreboard h1,.scoreboard h2,.scoreboard h3,.scoreboard h4,.scoreboard h5,.scoreboard h6{color:var(--white)!important;text-shadow:0 2px 4px rgba(0,0,0,.8);font-weight:700}.scoreboard p,.scoreboard span,.scoreboard div{color:var(--white)!important;text-shadow:0 1px 3px rgba(0,0,0,.8);font-weight:600}.score-card{background:#000000b3;padding:var(--space-lg) var(--space-xl);border-radius:var(--radius-lg);text-align:center;min-width:120px;transition:all var(--transition-normal);border:2px solid var(--primary-orange);box-shadow:var(--shadow-sm);position:relative;overflow:hidden;-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px)}.score-card:before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:var(--gradient-primary);transform:scaleX(0);transition:transform var(--transition-normal)}.score-card h2{margin-bottom:var(--space-sm);font-size:1.1rem;font-weight:700;color:var(--white)!important;text-shadow:0 2px 4px rgba(0,0,0,.8)}.score-card span{font-size:2rem;font-weight:800;color:var(--white)!important;text-shadow:0 2px 6px rgba(0,0,0,.9)}.score-card.winner{background:var(--gradient-primary);color:var(--white);border-color:var(--primary-orange);animation:winnerPulse 2s infinite;box-shadow:var(--shadow-lg),var(--shadow-glow)}.score-card.winner:before{transform:scaleX(1);background:var(--primary-orange)}.score-card.winner h2{color:var(--white)!important;text-shadow:0 2px 6px rgba(0,0,0,.9)}.score-card.winner span{color:var(--white)!important;text-shadow:0 2px 8px rgba(0,0,0,.9)}@keyframes winnerPulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}.game-over-banner{margin-top:var(--space-lg);font-size:1.6rem;background:var(--gradient-primary);padding:var(--space-lg) var(--space-xl);border-radius:var(--radius-lg);color:var(--white);text-align:center;font-weight:700;box-shadow:var(--shadow-lg);animation:gameOverSlide .8s ease-out;text-shadow:0 2px 4px rgba(0,0,0,.5);border:2px solid var(--primary-orange);display:flex;align-items:center;justify-content:center;gap:var(--space-md)}.winner-icon{font-size:2rem;filter:drop-shadow(0 0 10px rgba(255,215,0,.5))}.winner-text{color:var(--white)!important;text-shadow:0 2px 6px rgba(0,0,0,.9);font-weight:800}.scoreboard.floating{position:fixed;display:flex;flex-direction:column;align-items:stretch;padding:8px;gap:6px;min-width:120px;max-width:180px;background:#000000d9;border-radius:12px;border:2px solid var(--primary-teal);box-shadow:0 5px 15px #0006;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:999;cursor:grab}.scoreboard.floating .score-card{display:flex;flex-direction:column;align-items:center;padding:6px 8px;font-size:.9rem;border-radius:8px;border:1px solid var(--primary-orange);background:#000000b3}.scoreboard.floating .score-card.winner{background:var(--gradient-primary);color:#fff;border-color:var(--primary-orange);box-shadow:0 0 10px var(--primary-orange)}@media (max-width: 768px){.scoreboard.floating{max-width:140px;padding:6px;gap:4px}.scoreboard.floating .score-card{padding:4px 6px;font-size:.8rem}}@keyframes gameOverSlide{0%{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}:root{--primary-teal: #00BFA6;--primary-purple: #5C33F6;--primary-orange: #FF7F50;--soft-gray: #F0F0F0;--dark-gray: #2C2C2C;--darker-gray: #1A1A1A;--white: #FFFFFF;--black: #000000;--gradient-primary: linear-gradient(135deg, var(--primary-teal), var(--primary-purple));--gradient-dark: linear-gradient(135deg, var(--darker-gray), var(--dark-gray));--gradient-light: linear-gradient(135deg, var(--soft-gray), var(--white));--shadow-sm: 0 2px 8px rgba(0, 0, 0, .1);--shadow-md: 0 4px 16px rgba(0, 0, 0, .15);--shadow-lg: 0 8px 32px rgba(0, 0, 0, .2);--shadow-glow: 0 0 20px rgba(0, 191, 166, .3);--transition-fast: .2s ease;--transition-normal: .3s ease;--transition-slow: .5s ease;--radius-sm: 8px;--radius-md: 12px;--radius-lg: 16px;--radius-xl: 20px;--space-xs: 4px;--space-sm: 8px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--space-2xl: 48px}[data-theme=dark]{--bg-primary: var(--darker-gray);--bg-secondary: var(--dark-gray);--text-primary: var(--white);--text-secondary: #CCCCCC;--surface: rgba(255, 255, 255, .08);--surface-hover: rgba(255, 255, 255, .12)}[data-theme=light]{--bg-primary: var(--white);--bg-secondary: var(--soft-gray);--text-primary: var(--black);--text-secondary: #666666;--surface: rgba(0, 0, 0, .05);--surface-hover: rgba(0, 0, 0, .08)}*{box-sizing:border-box;margin:0;padding:0;font-family:Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}body,html,#root{height:100%;width:100%;background:var(--gradient-dark);background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:fixed;color:var(--text-primary);transition:background var(--transition-normal),color var(--transition-normal);overflow-x:hidden}.app{height:100vh;width:100vw;display:flex;flex-direction:column;position:relative;background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:fixed}.logo-container{position:fixed;top:var(--space-sm);left:50%;transform:translate(-50%);border-radius:var(--radius-md);transition:all var(--transition-normal);border:1px solid rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;overflow:hidden;height:100px;width:200px;padding:var(--space-xs);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.logo-container{background-color:#000c;border:2px solid var(--primary-purple);box-shadow:var(--shadow-lg),0 0 20px #5c33f64d}.app-logo{height:100%;width:100%;object-fit:cover;object-position:center;filter:brightness(1) contrast(1);max-width:none;max-height:none}.logo-fallback{font-size:1.5rem;font-weight:800;color:var(--text-primary);text-align:center;line-height:60px;background:var(--gradient-primary);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}