@import"https://fonts.googleapis.com/css2?family=Dela+Gothic+One&family=IBM+Plex+Mono:wght@400;500;700&display=swap";:root{--bg: #0c0c0c;--bg-card: #111111;--bg-elevated: #181818;--accent-1: #ff2d7b;--accent-2: #00f0ff;--success: #39ff14;--warning: #ffe600;--danger: #ff3333;--text: #e0e0e0;--text-dim: #4a4a4a;--border: #222222;--border-light: #333333;--font-heading: "Dela Gothic One", sans-serif;--font-body: "IBM Plex Mono", monospace;--glow-1: 0 0 20px rgba(255, 45, 123, .3);--glow-2: 0 0 20px rgba(0, 240, 255, .3);--glow-success: 0 0 20px rgba(57, 255, 20, .3)}*{margin:0;padding:0;box-sizing:border-box}html,body{height:100%;background:var(--bg);color:var(--text);font-family:var(--font-body);font-size:16px;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;-webkit-user-select:none;user-select:none;overflow-x:hidden}#root{height:100%}.app:before{content:"";position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:50;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.08) 2px,rgba(0,0,0,.08) 4px)}.app:after{content:"";position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:49;background:radial-gradient(ellipse at center,transparent 60%,rgba(0,0,0,.5) 100%)}.app{min-height:100%;display:flex;flex-direction:column;align-items:center;padding:0 1.25rem 1.5rem;max-width:480px;margin:0 auto;position:relative}.connection-bar{width:100%;display:flex;align-items:center;justify-content:center;gap:.4rem;padding:.35rem;font-size:.55rem;letter-spacing:.2em;text-transform:uppercase;color:var(--text-dim);font-family:var(--font-body)}.connection-bar .dot{width:5px;height:5px;border-radius:50%;background:var(--danger);transition:background .3s}.connection-bar.online .dot{background:var(--success);box-shadow:0 0 6px var(--success)}.error-toast{position:fixed;top:1rem;left:50%;transform:translate(-50%);background:var(--danger);color:#fff;padding:.65rem 1.25rem;font-size:.75rem;font-weight:700;letter-spacing:.08em;z-index:100;max-width:90vw;text-align:center;animation:toast-in .3s ease;border:1px solid rgba(255,255,255,.2)}@keyframes toast-in{0%{opacity:0;transform:translate(-50%) translateY(-12px)}to{opacity:1;transform:translate(-50%) translateY(0)}}.screen{width:100%;display:flex;flex-direction:column;align-items:center;gap:1.25rem;padding:.75rem 0}.title{font-family:var(--font-heading);font-size:2.4rem;font-weight:400;color:var(--accent-1);text-align:center;letter-spacing:.06em;text-transform:uppercase;line-height:1.05;margin-top:1.5rem;text-shadow:0 0 30px rgba(255,45,123,.4),0 0 60px rgba(255,45,123,.15)}.subtitle{color:var(--text-dim);font-size:.75rem;text-align:center;letter-spacing:.12em;text-transform:uppercase}h2{font-family:var(--font-heading);font-size:1.3rem;font-weight:400;color:var(--accent-2);letter-spacing:.06em;text-transform:uppercase;text-shadow:0 0 20px rgba(0,240,255,.3)}h3{font-size:.9rem;color:var(--text);letter-spacing:.1em;text-transform:uppercase}.form-group{width:100%;display:flex;flex-direction:column;gap:.35rem}.form-group label{font-size:.6rem;color:var(--text-dim);letter-spacing:.2em;text-transform:uppercase}input[type=text]{width:100%;padding:.75rem 1rem;background:var(--bg-card);border:1px solid var(--border);color:var(--text);font-family:var(--font-body);font-size:1rem;outline:none;transition:border-color .2s,box-shadow .2s}input[type=text]:focus{border-color:var(--accent-2);box-shadow:0 0 0 1px var(--accent-2),var(--glow-2)}input[type=text]::placeholder{color:var(--text-dim)}.btn{width:100%;padding:.875rem 1.5rem;font-family:var(--font-body);font-size:.8rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;border:1px solid var(--border);cursor:pointer;transition:all .15s;min-height:48px;position:relative}.btn:active:not(:disabled){transform:scale(.97)}.btn-primary{background:var(--accent-1);color:#fff;border-color:var(--accent-1);box-shadow:var(--glow-1)}.btn-primary:hover:not(:disabled){filter:brightness(1.15);box-shadow:0 0 30px #ff2d7b80}.btn-secondary{background:transparent;color:var(--accent-2);border-color:var(--accent-2)}.btn-secondary:hover:not(:disabled){background:#00f0ff14;box-shadow:var(--glow-2)}.btn:disabled{opacity:.3;cursor:not-allowed;box-shadow:none}.btn-download{width:100%;display:block;padding:.875rem 1.5rem;font-family:var(--font-body);font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;text-align:center;text-decoration:none;color:var(--text-dim);border:1px dashed var(--border-light);background:transparent;cursor:pointer;transition:all .15s;min-height:48px}.btn-download:hover{color:var(--accent-2);border-color:var(--accent-2);border-style:solid;box-shadow:var(--glow-2)}.credit{margin-top:1.5rem;padding:1rem 0 .5rem;font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--text-dim)}.credit a{color:var(--accent-1);text-decoration:none;font-weight:700;transition:all .2s}.credit a:hover{color:#fff;text-shadow:0 0 12px var(--accent-1)}.btn-text{background:none;border:none;color:var(--text-dim);font-family:var(--font-body);font-size:.65rem;letter-spacing:.2em;text-transform:uppercase;cursor:pointer;padding:.4rem;transition:color .15s}.btn-text:hover{color:var(--accent-2)}.settings-form{width:100%;display:flex;flex-direction:column;gap:.75rem;padding:.75rem;border:1px solid var(--border);background:var(--bg-card);border-top:2px solid var(--accent-2)}.setting-group{display:flex;flex-direction:column;gap:.4rem}.setting-group label{font-size:.55rem;color:var(--text-dim);letter-spacing:.2em;text-transform:uppercase}.option-row{display:flex;gap:.4rem}.btn-option{flex:1;padding:.5rem;background:var(--bg);border:1px solid var(--border);color:var(--text-dim);font-family:var(--font-body);font-size:.85rem;font-weight:700;cursor:pointer;transition:all .15s;min-height:40px}.btn-option:hover{border-color:var(--accent-2);color:var(--text)}.btn-option.active{border-color:var(--accent-2);color:var(--accent-2);background:#00f0ff0f;box-shadow:inset 0 0 12px #00f0ff14}.btn-choice,.btn-predict{width:45%;font-family:var(--font-heading);font-size:2rem;font-weight:400;padding:1.25rem;background:var(--bg-card);color:var(--text);border:2px solid var(--border);cursor:pointer;transition:all .2s;min-height:80px;display:flex;align-items:center;justify-content:center}.btn-choice:hover:not(:disabled),.btn-predict:hover:not(:disabled){border-color:var(--accent-2);color:var(--accent-2);box-shadow:var(--glow-2)}.btn-choice.selected{border-color:var(--accent-1);color:var(--accent-1);background:#ff2d7b14;box-shadow:var(--glow-1)}.btn-predict.selected{border-color:var(--accent-2);color:var(--accent-2);background:#00f0ff14;box-shadow:var(--glow-2)}.btn-choice:disabled,.btn-predict:disabled{opacity:.4;cursor:not-allowed}.divider{width:100%;text-align:center;color:var(--text-dim);font-size:.65rem;letter-spacing:.25em;position:relative;padding:.2rem 0}.divider:before,.divider:after{content:"";position:absolute;top:50%;width:38%;height:1px;background:var(--border)}.divider:before{left:0}.divider:after{right:0}.room-code-display{text-align:center;cursor:pointer;padding:.75rem 1.5rem;border:1px dashed var(--border-light);transition:all .2s;background:var(--bg-card)}.room-code-display:hover{border-color:var(--accent-2);box-shadow:var(--glow-2)}.room-code-display .code{font-family:var(--font-heading);font-size:2.8rem;font-weight:400;color:var(--accent-2);letter-spacing:.25em;margin-top:.2rem;text-shadow:0 0 25px rgba(0,240,255,.4)}.room-code-display label{font-size:.55rem;color:var(--text-dim);letter-spacing:.2em;pointer-events:none}.settings-display{width:100%;display:flex;gap:.5rem}.setting-row{flex:1;display:flex;flex-direction:column;align-items:center;padding:.5rem;border:1px solid var(--border);background:var(--bg-card);font-size:.6rem;color:var(--text-dim);letter-spacing:.15em;text-transform:uppercase}.setting-value{font-family:var(--font-heading);font-size:1.1rem;font-weight:400;color:var(--text);margin-top:.15rem}.players-list{width:100%}.players-list h3{font-size:.8rem;letter-spacing:.15em}.player-chip{display:flex;align-items:center;gap:.5rem;padding:.55rem .75rem;border:1px solid var(--border);margin-top:.4rem;font-size:.85rem;background:var(--bg-card);transition:border-color .2s}.player-chip.you{border-color:var(--accent-2);border-left:3px solid var(--accent-2)}.player-chip .status-dot{width:7px;height:7px;border-radius:50%;background:var(--success);flex-shrink:0;box-shadow:0 0 6px var(--success)}.player-chip.disconnected .status-dot{background:var(--danger);box-shadow:0 0 6px var(--danger)}.player-chip .tag{margin-left:auto;font-size:.55rem;color:var(--accent-2);letter-spacing:.12em}.disconnected-tag{color:var(--danger)!important}.hint{color:var(--text-dim);font-size:.7rem;text-align:center;letter-spacing:.08em}.hint strong{color:var(--accent-1)}.vs-block{width:100%;text-align:center;border:1px solid var(--border);padding:.75rem;background:var(--bg-card);border-top:2px solid var(--accent-1)}.vs-block .match-info,.vs-block .round-info{font-size:.6rem;color:var(--text-dim);letter-spacing:.2em}.vs{display:flex;align-items:center;justify-content:center;gap:1rem;font-size:1.05rem;font-weight:700;margin:.4rem 0}.vs-text{font-family:var(--font-heading);color:var(--accent-1);font-size:.7rem;font-weight:400;text-shadow:0 0 10px rgba(255,45,123,.4)}.timer{width:100%;position:relative;height:1.75rem;border:1px solid var(--border);overflow:hidden;background:var(--bg-card)}.timer-bar{height:100%;background:linear-gradient(90deg,var(--accent-2),rgba(0,240,255,.6));opacity:.35;transition:width 1s linear}.timer-bar.low{background:linear-gradient(90deg,var(--danger),rgba(255,51,51,.6));opacity:.5;animation:timer-pulse .5s ease-in-out infinite}@keyframes timer-pulse{0%,to{opacity:.5}50%{opacity:.8}}.timer-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:.8rem;font-weight:700;letter-spacing:.1em}.timer-text.low{color:var(--danger);text-shadow:0 0 8px var(--danger)}.phase{width:100%;display:flex;flex-direction:column;align-items:center;gap:1rem}.choice-buttons{display:flex;gap:1rem;justify-content:center;width:100%}.reveal-grid{width:100%;display:flex;flex-direction:column;gap:.4rem}.reveal-row{display:flex;justify-content:space-between;align-items:center;padding:.55rem .75rem;border:1px solid var(--border);font-size:.8rem;background:var(--bg-card)}.reveal-row .correct{color:var(--success);text-shadow:0 0 8px rgba(57,255,20,.4)}.reveal-row .wrong{color:var(--danger)}.match-score{font-family:var(--font-heading);font-size:1.3rem;font-weight:400;color:var(--accent-2);text-shadow:0 0 15px rgba(0,240,255,.3);letter-spacing:.05em}.result-display{text-align:center;padding:1.5rem 0}.score-big{font-family:var(--font-heading);font-size:3.5rem;font-weight:400;letter-spacing:.05em}.result-label{font-family:var(--font-heading);font-size:1.4rem;font-weight:400;letter-spacing:.1em;margin-top:.5rem}.result-label.win{color:var(--success);text-shadow:var(--glow-success)}.result-label.loss{color:var(--danger)}.result-label.draw{color:var(--warning)}.next-opponent{text-align:center;color:var(--text-dim);font-size:.8rem}.next-opponent strong{color:var(--accent-2);font-size:1rem}.rankings{width:100%;display:flex;flex-direction:column;gap:.35rem}.ranking-row{display:flex;align-items:center;gap:.75rem;padding:.65rem .75rem;border:1px solid var(--border);font-size:.8rem;background:var(--bg-card);transition:all .3s}.ranking-row.first{border-color:var(--warning);border-left:3px solid var(--warning);background:#ffe6000a}.ranking-row.you{border-color:var(--accent-2);border-left:3px solid var(--accent-2);background:#00f0ff0a}.ranking-row .rank{font-family:var(--font-heading);font-weight:400;font-size:.9rem;color:var(--text-dim);min-width:2rem}.ranking-row.first .rank{color:var(--warning);text-shadow:0 0 8px rgba(255,230,0,.4)}.ranking-row .name{flex:1;font-weight:500}.ranking-row .score{font-weight:700;color:var(--accent-1)}.ranking-row .record{color:var(--text-dim);font-size:.65rem;letter-spacing:.05em}@keyframes pulse{0%,to{opacity:.3}50%{opacity:1}}.waiting-phase h3{animation:pulse 1.5s ease-in-out infinite}@keyframes glow-border{0%,to{border-color:var(--accent-2)}50%{border-color:var(--accent-1)}}.vs-block,.settings-form{position:relative}.home .title:before{content:"⍟";display:block;font-size:1rem;color:var(--accent-2);margin-bottom:.5rem;text-shadow:0 0 15px rgba(0,240,255,.5)}.match-info:before{content:"// ";color:var(--text-dim)}.round-info:before{content:"// ";color:var(--text-dim)}