*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0a0a0f;--card: #15151c;--border: #26262f;--green: #39ff8f;--red: #ff3b5c;--amber: #ffce45;--text: #f5f5f5;--muted: #6b6b76}html{height:100%}body{display:flex;flex-direction:column;min-height:100vh;background:var(--bg);color:var(--text);font-family:Space Grotesk,sans-serif;overflow-x:hidden}.screen{display:none;flex-direction:column;align-items:center;justify-content:flex-start;min-height:100vh;padding:28px 20px;text-align:center;gap:16px}.screen.active{display:flex}.back{position:fixed;top:16px;left:16px;background:var(--card);border:1.5px solid var(--border);border-radius:10px;padding:8px 14px;color:var(--muted);font-size:.85rem;font-weight:700;cursor:pointer;text-decoration:none;z-index:10}.title-main{font-family:Archivo Black,sans-serif;font-size:clamp(2.2rem,10vw,3.4rem);color:var(--text);letter-spacing:.5px;line-height:1}.title-main .hl{color:var(--green)}.title-sub{font-size:.9rem;color:var(--muted);max-width:320px;line-height:1.5}.btn{display:flex;align-items:center;justify-content:center;gap:8px;padding:15px 28px;border-radius:12px;border:none;font-family:Space Grotesk,sans-serif;font-size:1rem;font-weight:700;cursor:pointer;transition:all .15s;width:100%;max-width:320px;-webkit-tap-highlight-color:transparent}.btn:active{transform:scale(.95)}.btn-go{background:var(--green);color:#04140c;box-shadow:0 4px 20px #39ff8f40}.btn-ghost{background:transparent;color:var(--muted);border:1.5px solid var(--border)}.input-field{width:100%;max-width:320px;padding:15px 18px;border-radius:12px;border:1.5px solid var(--border);background:var(--card);color:var(--text);font-family:JetBrains Mono,monospace;font-size:1.4rem;text-align:center;outline:none;letter-spacing:4px;-webkit-appearance:none}.input-field:focus{border-color:var(--green)}.setup-group{width:100%;max-width:320px;margin-bottom:16px;display:flex;flex-direction:column;align-items:center}.setup-group label{font-size:.7rem;text-transform:uppercase;letter-spacing:1.5px;color:var(--muted);font-weight:700;margin-bottom:6px}.custom-select{width:100%;padding:12px 14px;border-radius:10px;border:1.5px solid var(--border);background:var(--card);color:var(--text);font-family:inherit;font-size:.95rem;font-weight:700;outline:none;cursor:pointer;text-align:center;text-align-last:center;appearance:none;transition:all .2s}.custom-select:focus{border-color:var(--green)}.code-big{font-family:JetBrains Mono,monospace;font-weight:700;font-size:3.2rem;color:var(--green);letter-spacing:6px}.label{font-size:.65rem;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted)}.vs-row{display:flex;align-items:center;gap:12px;margin-top:2px}.vs-chip{background:var(--card);border:1.5px solid var(--border);border-radius:10px;padding:8px 16px;font-size:.78rem;color:var(--muted);font-weight:500}.vs-chip.me{color:var(--green);border-color:#39ff8f4d}.vs-x{color:var(--red);font-family:Archivo Black,sans-serif;font-size:.78rem}.round-dots{display:flex;gap:7px;justify-content:center}.dot{width:10px;height:10px;border-radius:50%;background:var(--border)}.dot.win{background:var(--green)}.dot.lose{background:var(--red)}.dot.tie{background:var(--amber)}.round-badge{background:var(--card);border:1.5px solid var(--border);border-radius:99px;padding:6px 16px;font-size:.72rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted)}.cue-stage{width:100%;max-width:320px;height:320px;border-radius:24px;background:var(--card);border:1.5px solid var(--border);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;position:relative;overflow:hidden;margin:6px 0;touch-action:none;user-select:none;-webkit-user-select:none}.cue-stage.state-go{background:var(--green)}.cue-stage.state-decoy{background:var(--red)}.cue-stage.state-simon{background:var(--card)}.cue-stage.state-toosoon{animation:shake .3s}@keyframes shake{0%,to{transform:translate(0)}25%{transform:translate(-8px)}75%{transform:translate(8px)}}.cue-label{font-family:Archivo Black,sans-serif;font-size:1.4rem;letter-spacing:1px;color:var(--text)}.cue-stage.state-go .cue-label,.cue-stage.state-decoy .cue-label{color:#04140c}.cue-sub{font-size:.78rem;color:var(--muted);max-width:240px;line-height:1.4}.cue-stage.state-go .cue-sub,.cue-stage.state-decoy .cue-sub{color:#04140ca6}.odd-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:220px}.odd-cell{width:100%;aspect-ratio:1;border-radius:14px;background:var(--green);cursor:pointer}.time-readout{font-family:JetBrains Mono,monospace;font-weight:700;font-size:2.4rem;color:var(--green)}.time-readout .unit{font-size:.9rem;color:var(--muted);margin-left:4px;font-weight:500}.cue-stage.state-go .time-readout{color:#04140c}.cue-stage.state-go .time-readout .unit{color:#04140ca6}.cue-stage.state-decoy .time-readout{color:#fff}.reveal-row{display:flex;gap:12px;width:100%;max-width:320px}.reveal-card{flex:1;background:var(--card);border:1.5px solid var(--border);border-radius:14px;padding:16px 10px}.reveal-card.winner{border-color:var(--green)}.reveal-card-name{font-size:.65rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:6px}.reveal-card-time{font-family:JetBrains Mono,monospace;font-weight:700;font-size:1.3rem;color:var(--text)}.reveal-card.winner .reveal-card-time{color:var(--green)}.reveal-verdict{font-family:Archivo Black,sans-serif;font-size:1.4rem;color:var(--text);margin-top:4px}.reveal-verdict .hl{color:var(--green)}.reveal-verdict .hl-lose{color:var(--red)}.score-row{display:flex;gap:12px;width:100%;max-width:320px;margin:4px 0}.score-card{flex:1;background:var(--card);border:1.5px solid var(--border);border-radius:14px;padding:14px 8px}.score-card-name{font-size:.62rem;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:6px}.score-card-num{font-family:JetBrains Mono,monospace;font-weight:700;font-size:1.6rem;color:var(--text)}.winner-big{font-family:Archivo Black,sans-serif;font-size:2rem;color:var(--green);line-height:1.2}.disconnect-banner{display:none;position:fixed;top:0;left:0;right:0;z-index:50;background:var(--red);color:#fff;font-size:.82rem;font-weight:700;padding:10px 16px;align-items:center;justify-content:center;gap:10px;text-align:center}.disconnect-spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.4);border-top:2px solid #fff;border-radius:50%;animation:spin .8s linear infinite;flex-shrink:0}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.wait-msg{font-size:.82rem;color:var(--muted);min-height:18px}.tap-particle{position:absolute;pointer-events:none;font-size:1.6rem;z-index:100;animation:particle-float .8s cubic-bezier(.25,1,.5,1) forwards}@keyframes particle-float{0%{transform:translate(-50%,-50%) scale(.5);opacity:1}to{transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.5);opacity:0}}.simon-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;width:230px;height:230px}.simon-pad{border-radius:16px;cursor:pointer;transition:opacity .15s,transform .1s,box-shadow .15s;opacity:.6;border:3px solid rgba(255,255,255,.15);touch-action:none}.simon-pad.active{opacity:1;transform:scale(.96)}.simon-pad-0{background:#ff3b5c;box-shadow:0 0 15px #ff3b5c4d}.simon-pad-1{background:#39ff8f;box-shadow:0 0 15px #39ff8f4d}.simon-pad-2{background:#00d2ff;box-shadow:0 0 15px #00d2ff4d}.simon-pad-3{background:#ffce45;box-shadow:0 0 15px #ffce454d}.simon-pad-0.lit{opacity:1;box-shadow:0 0 35px #ff3b5c}.simon-pad-1.lit{opacity:1;box-shadow:0 0 35px #39ff8f}.simon-pad-2.lit{opacity:1;box-shadow:0 0 35px #00d2ff}.simon-pad-3.lit{opacity:1;box-shadow:0 0 35px #ffce45}.spatial-target{position:absolute;font-size:3.5rem;cursor:pointer;user-select:none;-webkit-user-select:none;transition:transform .8s ease-out,opacity .8s ease-out;transform:translate(-50%,-50%) scale(1);opacity:1;z-index:20;touch-action:none}.spatial-target.shrink{transform:translate(-50%,-50%) scale(0);opacity:0}@keyframes target-pulse{0%{transform:translate(-50%,-50%) scale(.95)}to{transform:translate(-50%,-50%) scale(1.15)}}.imposter-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;width:250px;height:250px}.imposter-cell{display:flex;align-items:center;justify-content:center;background:var(--card);border:1.5px solid var(--border);border-radius:12px;font-size:1.8rem;cursor:pointer;user-select:none;-webkit-user-select:none;transition:background .15s,border-color .15s,transform .1s;touch-action:none}.imposter-cell:active{transform:scale(.95)}.mash-btn{background:linear-gradient(135deg,#ff007f,#7f00ff);color:#fff;border:none;border-radius:50%;font-family:Archivo Black,sans-serif;font-size:1.3rem;box-shadow:0 0 25px #ff007f66;cursor:pointer;display:flex;align-items:center;justify-content:center;position:absolute;transition:transform .1s;touch-action:none;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none;will-change:transform,left,top;pointer-events:auto;transform:translate(-50%,-50%);z-index:15}.mash-btn:active{transform:translate(-50%,-50%) scale(.9)}.mash-progress-container{width:80%;height:12px;background:var(--border);border-radius:6px;overflow:hidden;margin-top:10px;position:absolute;bottom:12px}.mash-progress-bar{height:100%;width:0%;background:linear-gradient(90deg,#ff007f,#7f00ff);transition:width .1s}.chase-target{position:absolute;font-size:2.5rem;cursor:pointer;user-select:none;-webkit-user-select:none;transition:top .1s cubic-bezier(.25,1,.5,1),left .1s cubic-bezier(.25,1,.5,1);touch-action:none;transform:translate(-50%,-50%);z-index:25}.chase-decoy{position:absolute;font-size:2.1rem;cursor:pointer;user-select:none;-webkit-user-select:none;transition:top .1s cubic-bezier(.25,1,.5,1),left .1s cubic-bezier(.25,1,.5,1);touch-action:none;transform:translate(-50%,-50%);opacity:.7;z-index:15}@media (max-width: 768px){.back{top:12px!important;left:12px!important;padding:6px 12px!important;font-size:.8rem!important}.screen{padding-top:75px!important}}[data-joining=true] .screen{display:none!important}[data-joining=true] #screen-loading{display:flex!important;flex-direction:column;align-items:center;justify-content:center;text-align:center;min-height:100vh}.joining-spinner{border:3.5px solid rgba(57,255,143,.15);border-top:3.5px solid var(--green, #39ff8f);border-radius:50%;width:44px;height:44px;animation:joining-spin .8s linear infinite;margin-bottom:20px}@keyframes joining-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}