*{box-sizing:border-box}html,body,#root{margin:0;height:100%}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,sans-serif;background:#0f172a;color:#e2e8f0;-webkit-text-size-adjust:100%;overscroll-behavior:none}h1,h2{margin:0}button{font:inherit}.muted{color:#94a3b8}.small{font-size:12px}.row{display:flex;gap:8px;flex-wrap:wrap}.btn{border:1px solid #334155;background:#1e293b;color:#e2e8f0;padding:10px 14px;border-radius:8px;cursor:pointer;font-weight:600}.btn:hover{background:#273449}.btn--primary{background:#2563eb;border-color:#2563eb}.btn--primary:hover{background:#1d4ed8}.btn--danger{background:#e11d48;border-color:#e11d48}.btn--danger:hover{background:#be123c}.btn--ghost{background:transparent}.btn--big{padding:14px;font-size:18px;width:100%}.btn:disabled{opacity:.5;cursor:default}.dot{display:inline-block;width:10px;height:10px;border-radius:50%}.dot--on{background:#22c55e}.dot--off{background:#ef4444}.swatch{display:inline-block;width:14px;height:14px;border-radius:50%;border:1px solid rgba(255,255,255,.4);flex:none}.trainer{display:flex;height:100vh;gap:16px;padding:16px}.trainer__side{display:flex;flex-direction:column;gap:14px;flex:none;overflow-y:auto}.trainer__head{display:flex;align-items:center;justify-content:space-between}.trainer__head h1{font-size:20px}.trainer__map{flex:1;display:flex;align-items:center;justify-content:center}.qr{background:#fff;color:#0f172a;border-radius:12px;padding:14px;display:flex;flex-direction:column;gap:10px}.qr__code{display:flex;justify-content:center}.qr__code svg{width:100%;height:auto;max-width:360px}.qr__label{font-size:12px;color:#64748b;text-transform:uppercase;letter-spacing:.08em}.qr__value{font-size:40px;font-weight:800;letter-spacing:.12em;line-height:1.1}.qr__url{font-size:13px;word-break:break-all;color:#334155}.qr .btn--ghost{color:#0f172a;border-color:#cbd5e1}.sim{display:flex;flex-direction:column;gap:8px;background:#1e293b;border-radius:12px;padding:10px 12px}.sim h2{font-size:14px}.check{display:flex;align-items:center;gap:8px;font-size:13px;color:#cbd5e1;cursor:pointer}.check input{width:16px;height:16px}.tag{margin-left:6px;font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;background:#334155;color:#cbd5e1;padding:1px 5px;border-radius:4px;vertical-align:middle}.controls{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}.phase{font-weight:600;color:#cbd5e1}.counter{display:grid;grid-template-columns:1fr 1fr;gap:10px}.counter__box{background:#1e293b;border:2px solid #334155;border-radius:12px;padding:10px 12px;text-align:center}.counter__box--active{border-color:#ef4444;box-shadow:0 0 0 3px #ef444440}.counter__label{font-size:12px;color:#94a3b8}.counter--large .counter__value{font-size:64px;font-weight:800;color:#ef4444;line-height:1.05}.players h2{font-size:15px;margin-bottom:6px}.players ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}.players li{display:flex;align-items:center;gap:8px;font-size:14px}.players__name{font-weight:600}.players__meta{color:#94a3b8;font-size:12px;margin-left:auto;text-align:right}.join{min-height:100%;display:flex;align-items:center;justify-content:center;padding:20px}.join__card{background:#1e293b;border-radius:16px;padding:24px;width:100%;max-width:380px;display:flex;flex-direction:column;gap:14px}.join__card h1{font-size:22px}.join__card label{display:flex;flex-direction:column;gap:6px;font-size:14px;font-weight:600}.join__card input{font:inherit;font-size:18px;padding:12px;border-radius:8px;border:1px solid #475569;background:#0f172a;color:#e2e8f0}.error{color:#fca5a5;font-size:14px}.play{height:100dvh;display:flex;flex-direction:column;align-items:center;touch-action:none;user-select:none;-webkit-user-select:none;overflow:hidden;transition:background .1s}.play--flash{background:#b91c1c;animation:flash .35s ease-out}@keyframes flash{0%{background:#ef4444}to{background:#0f172a}}.play__head{width:100%;display:flex;align-items:center;gap:12px;padding:0 14px}.play__me{display:flex;align-items:center;gap:8px;font-weight:700;flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.play__counters{display:flex;gap:8px}.mini{display:flex;align-items:baseline;gap:4px;background:#1e293b;border:1px solid #334155;border-radius:8px;padding:4px 8px}.mini--active{border-color:#ef4444}.mini__label{font-size:11px;color:#94a3b8}.mini__value{font-size:20px;font-weight:800;color:#ef4444}.play__map{position:relative}.play__joy{flex:1;display:flex;align-items:center;justify-content:center;width:100%}.overlay{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:#0f172ad9;color:#fff;padding:12px 18px;border-radius:12px;font-weight:700;font-size:18px;text-align:center;pointer-events:none;white-space:nowrap}.overlay--start{background:#2563ebe6;top:12%;font-size:16px}.overlay--ok{background:#16a34ae6}.overlay--volte{background:#e11d48e6;top:12%}.overlay--hit{background:#ef4444f2;top:85%;font-size:15px}.joystick{position:relative;border-radius:50%;background:radial-gradient(circle,#1e293b 55%,#334155);border:3px solid #475569;touch-action:none;display:flex;align-items:center;justify-content:center}.joystick--disabled{opacity:.35}.joystick__knob{border-radius:50%;background:#e2e8f0;box-shadow:0 4px 14px #00000073;transition:transform .04s linear;pointer-events:none}