:root{
  --bg:#071120;
  --bg-2:#0a1428;
  --panel:#0d1a30;
  --panel-2:#111f36;
  --text:#eef6ff;
  --muted:#9bb1cf;
  --line:rgba(112,149,198,.22);
  --cyan:#63ecff;
  --cyan-2:#23c7ff;
  --violet:#946dff;
  --pink:#ff58c7;
  --orange:#ff9a57;
  --green:#5ce6a3;
  --gold:#ffd166;
  --danger:#ff6d82;
  --shadow:0 26px 80px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{margin:0;min-height:100%;font-family:Inter,Segoe UI,Arial,sans-serif;background:radial-gradient(circle at top,#11254a 0%,#0a1530 22%,#071120 58%,#050b15 100%);color:var(--text);overflow-x:hidden}
body{position:relative}
body::before{content:"";position:fixed;inset:0;pointer-events:none;background:
  radial-gradient(circle at 12% 18%,rgba(99,236,255,.14),transparent 18%),
  radial-gradient(circle at 88% 20%,rgba(148,109,255,.18),transparent 20%),
  radial-gradient(circle at 78% 78%,rgba(255,88,199,.14),transparent 18%),
  radial-gradient(circle at 22% 84%,rgba(92,230,163,.10),transparent 18%);
  filter:blur(16px);animation:aurora 18s ease-in-out infinite alternate}
body::after{content:"";position:fixed;inset:0;pointer-events:none;background:linear-gradient(transparent 0,rgba(255,255,255,.03) 50%,transparent 100%);background-size:100% 6px;mix-blend-mode:soft-light;opacity:.16}
@keyframes aurora{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(0,-18px,0) scale(1.05)}}
.bg-grid{position:fixed;inset:0;pointer-events:none;background-image:linear-gradient(rgba(99,236,255,.055) 1px,transparent 1px),linear-gradient(90deg,rgba(99,236,255,.055) 1px,transparent 1px);background-size:44px 44px;mask-image:linear-gradient(180deg,rgba(0,0,0,.55),transparent 95%);opacity:.28}
.bg-orb{position:fixed;border-radius:50%;pointer-events:none;filter:blur(2px);opacity:.85;mix-blend-mode:screen;animation:floatOrb 16s ease-in-out infinite}
.orb-1{width:280px;height:280px;top:8%;left:-60px;background:radial-gradient(circle at 35% 35%,rgba(99,236,255,.55),rgba(99,236,255,.06) 60%,transparent 72%)}
.orb-2{width:340px;height:340px;right:-100px;top:28%;background:radial-gradient(circle at 50% 50%,rgba(148,109,255,.48),rgba(148,109,255,.06) 60%,transparent 72%);animation-duration:19s}
.orb-3{width:260px;height:260px;bottom:-20px;left:18%;background:radial-gradient(circle at 50% 50%,rgba(255,88,199,.42),rgba(255,88,199,.04) 60%,transparent 72%);animation-duration:22s}
@keyframes floatOrb{0%{transform:translateY(0) translateX(0)}50%{transform:translateY(-26px) translateX(16px)}100%{transform:translateY(12px) translateX(-10px)}}

.app-shell{position:relative;z-index:2;width:min(1360px,calc(100% - 24px));margin:0 auto;padding:18px 0 40px;transition:filter .2s,opacity .2s}
body:not(.authorized) .app-shell{filter:blur(7px) saturate(.85);opacity:.65;pointer-events:none;user-select:none}
.topbar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:4px 4px 16px}
.eyebrow,.label{color:#8ecaf5;font-size:11px;font-weight:900;letter-spacing:.18em;text-transform:uppercase}
h1{margin:8px 0 0;font-size:clamp(28px,4vw,42px);line-height:1.02;letter-spacing:-.02em;text-shadow:0 0 24px rgba(99,236,255,.12)}
.topbar-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.connection,.user-badge,.logout-button{border:1px solid rgba(109,154,210,.26);background:linear-gradient(160deg,rgba(17,31,54,.9),rgba(8,16,29,.88));box-shadow:inset 0 1px rgba(255,255,255,.04)}
.connection{display:flex;align-items:center;gap:9px;min-height:44px;padding:0 14px;border-radius:999px;color:#d4e5fb;font-size:12px;font-weight:800}
.connection .dot{width:10px;height:10px;border-radius:50%;background:#ff7c87;box-shadow:0 0 0 4px rgba(255,124,135,.12),0 0 16px rgba(255,124,135,.35)}
.connection.online .dot{background:var(--green);box-shadow:0 0 0 4px rgba(92,230,163,.12),0 0 18px rgba(92,230,163,.4)}
.user-badge{display:flex;align-items:center;gap:9px;min-height:44px;padding:0 14px;border-radius:14px}.user-badge .label{font-size:10px}.user-badge strong{font-size:13px}
.logout-button{min-height:44px;padding:0 16px;border-radius:14px;color:#ffd8de;cursor:pointer;font-weight:900;letter-spacing:.08em;background:linear-gradient(135deg,rgba(255,109,130,.18),rgba(255,109,130,.08));transition:.18s}
.logout-button:hover{transform:translateY(-1px);background:linear-gradient(135deg,rgba(255,109,130,.24),rgba(255,109,130,.11))}

.roulette-panel,.list-panel,.history-panel{position:relative;border:1px solid var(--line);border-radius:24px;background:linear-gradient(160deg,rgba(13,25,48,.92),rgba(6,11,20,.94));box-shadow:var(--shadow),inset 0 1px rgba(255,255,255,.04);overflow:hidden}
.roulette-panel{padding-bottom:10px}
.roulette-panel::before,.list-panel::before,.history-panel::before{content:"";position:absolute;inset:0;background:linear-gradient(120deg,rgba(99,236,255,.05),transparent 24%,rgba(148,109,255,.05) 58%,transparent 82%);pointer-events:none}
.case-head{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:24px 24px 18px;border-bottom:1px solid rgba(109,154,210,.14)}
.case-kicker{color:#91d8ff;font-size:11px;font-weight:900;letter-spacing:.18em}.case-title{margin-top:8px;font-size:clamp(24px,4vw,40px);font-weight:950;letter-spacing:-.02em}
.count-block{display:flex;flex-direction:column;align-items:flex-end;gap:2px;min-width:110px}.count-block strong{font-size:44px;line-height:1;background:linear-gradient(180deg,#fff2c3,#ffd166 60%,#ffae3d);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:0 0 26px rgba(255,209,102,.18)}.count-block span{color:var(--muted);font-size:12px;font-weight:800}

.roulette-window{position:relative;height:340px;margin:18px 20px 0;border:1px solid rgba(109,154,210,.18);border-radius:28px;overflow:hidden;background:
  radial-gradient(circle at 50% 50%,rgba(99,236,255,.07),transparent 24%),
  linear-gradient(180deg,rgba(16,30,56,.92),rgba(8,15,27,.96));box-shadow:inset 0 0 0 1px rgba(255,255,255,.02),inset 0 -40px 70px rgba(0,0,0,.28)}
.roulette-window::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(99,236,255,.06),transparent 30%),linear-gradient(90deg,rgba(99,236,255,.06),transparent 18%,transparent 82%,rgba(255,88,199,.05));pointer-events:none}
.track{position:absolute;left:0;top:50%;transform:translate3d(0,-50%,0);display:flex;align-items:flex-start;gap:11px;padding:0 420px;will-change:transform,filter}
.center-line{z-index:1;position:absolute;left:50%;top:0;transform:translateX(-50%);width:4px;height:100%;background:linear-gradient(180deg,transparent 0,#63ecff 12%,#9de9ff 30%,#63ecff 55%,transparent 100%);box-shadow:0 0 20px rgba(99,236,255,.6),0 0 60px rgba(99,236,255,.22);opacity:.95}
.marker{position:absolute;left:50%;transform:translateX(-50%);width:0;height:0;border-left:13px solid transparent;border-right:13px solid transparent;filter:drop-shadow(0 0 12px rgba(99,236,255,.55))}
.marker-top{top:-2px;border-top:none;border-bottom:20px solid #63ecff}.marker-bottom{bottom:-2px;border-bottom:none;border-top:20px solid #63ecff}
.scanlines{position:absolute;inset:0;background:repeating-linear-gradient(180deg,rgba(255,255,255,.03) 0,rgba(255,255,255,.03) 2px,transparent 2px,transparent 7px);opacity:.18;pointer-events:none}
.roulette-window.is-spinning .scanlines{animation:scanShift .45s linear infinite}.roulette-window.is-spinning .marker{animation:markerPulse .9s ease-in-out infinite}
@keyframes scanShift{from{transform:translateY(0)}to{transform:translateY(7px)}}
@keyframes markerPulse{0%,100%{filter:drop-shadow(0 0 10px rgba(99,236,255,.5))}50%{filter:drop-shadow(0 0 18px rgba(99,236,255,.95))}}

.player-card{--rarity:var(--cyan);position:relative;width:188px;min-width:188px;height:232px;border:1px solid color-mix(in srgb,var(--rarity) 40%,rgba(255,255,255,.12));border-radius:22px;overflow:hidden;background:
  linear-gradient(180deg,color-mix(in srgb,var(--rarity) 9%,#162744),transparent 60%),
  linear-gradient(160deg,rgba(16,27,46,.98),rgba(8,14,24,.98));box-shadow:inset 0 -3px color-mix(in srgb,var(--rarity) 55%,transparent),0 10px 24px rgba(0,0,0,.25);display:flex;flex-direction:column;justify-content:flex-end;transform:translateZ(0)}
.player-card::before{content:"";position:absolute;inset:-1px;background:radial-gradient(circle at 50% 38%,color-mix(in srgb,var(--rarity) 58%,transparent),transparent 66%);opacity:.35;filter:blur(.25px)}
.player-card::after{content:"";position:absolute;inset:0;background:linear-gradient(112deg,transparent 24%,rgba(255,255,255,.1) 44%,transparent 58%);transform:translateX(-115%);pointer-events:none}
.spin-active .player-card::after{animation:cardFlash 1s linear infinite;animation-delay:calc(var(--phase) * -120ms)}
@keyframes cardFlash{to{transform:translateX(115%)}}
.card-shine{position:absolute;inset:0;background:radial-gradient(140px circle at 50% 34%,color-mix(in srgb,var(--rarity) 18%,transparent),transparent 68%);pointer-events:none}
.card-accent{position:absolute;top:14px;right:12px;display:flex;gap:6px;z-index:3}.card-accent i{display:block;width:8px;height:8px;border-radius:50%;background:color-mix(in srgb,var(--rarity) 84%,white);box-shadow:0 0 14px color-mix(in srgb,var(--rarity) 65%,transparent);opacity:.95}.card-accent i:nth-child(2){opacity:.72}.card-accent i:nth-child(3){opacity:.48}
.avatar{position:absolute;left:50%;top:40px;transform:translateX(-50%);width:96px;height:96px;border-radius:50%;border:1px solid color-mix(in srgb,var(--rarity) 42%,rgba(255,255,255,.12));display:grid;place-items:center;font-size:32px;font-weight:950;color:#eff7ff;background:linear-gradient(145deg,color-mix(in srgb,var(--rarity) 16%,#274268),#121d31);text-transform:uppercase;text-shadow:0 0 18px color-mix(in srgb,var(--rarity) 45%,transparent);box-shadow:0 0 0 8px rgba(255,255,255,.02),0 0 38px color-mix(in srgb,var(--rarity) 18%,transparent)}
.player-card .name{position:relative;z-index:2;min-height:58px;padding:14px 14px 15px;border-top:1px solid rgba(255,255,255,.06);background:linear-gradient(180deg,rgba(8,13,24,.55),rgba(5,9,16,.88));font-size:14px;font-weight:900;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.player-card.is-winner{animation:winnerCard .75s cubic-bezier(.16,1,.3,1) both;border-color:var(--gold);box-shadow:inset 0 -4px var(--gold),0 0 0 1px rgba(255,209,102,.7),0 0 48px rgba(255,209,102,.42),0 20px 48px rgba(0,0,0,.36)}
@keyframes winnerCard{0%{transform:scale(1)}45%{transform:scale(1.12)}100%{transform:scale(1.045)}}
.roulette-window.spin-landed::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(255,209,102,.24),transparent 34%);animation:landFlash .8s ease-out both}
@keyframes landFlash{0%{opacity:0}25%{opacity:1}100%{opacity:0}}
.empty-state{position:absolute;inset:0;display:grid;place-items:center;padding:18px;text-align:center;color:#bdd2ec;font-size:15px;z-index:5;background:radial-gradient(circle at center,rgba(99,236,255,.08),transparent 44%)}
.empty-state b{color:#ffffff}.empty-state[hidden]{display:none!important}
.winner-strip{position:relative;display:flex;align-items:center;justify-content:center;gap:14px;min-height:70px;margin:0 20px;border-top:1px solid rgba(109,154,210,.16);background:linear-gradient(90deg,rgba(11,20,35,.94),rgba(14,25,43,.98) 45%,rgba(11,20,35,.94));overflow:hidden}
.winner-strip::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent,rgba(255,209,102,.12),transparent);transform:translateX(-100%)}
.winner-strip.winner-hit::before{animation:winnerSweep .8s ease-out}
@keyframes winnerSweep{to{transform:translateX(100%)}}
.winner-strip span{color:var(--muted);font-size:10px;font-weight:900;letter-spacing:.17em}.winner-strip strong{color:var(--gold);font-size:21px;text-shadow:0 0 22px rgba(255,209,102,.32)}.winner-strip.winner-hit strong{animation:winnerText .65s cubic-bezier(.16,1,.3,1)}
@keyframes winnerText{0%{transform:scale(.72);opacity:.2}55%{transform:scale(1.22)}100%{transform:scale(1);opacity:1}}

.controls-grid{display:grid;grid-template-columns:minmax(300px,1.35fr) minmax(245px,.8fr) auto auto;gap:12px;margin-top:14px}
.control-card{min-height:98px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(160deg,rgba(17,31,54,.9),rgba(9,17,29,.9));padding:18px;display:flex;align-items:center;justify-content:space-between;gap:18px;box-shadow:var(--shadow),inset 0 1px rgba(255,255,255,.03)}
.control-copy{min-width:0;display:flex;flex-direction:column;gap:4px}.control-copy strong{font-size:17px}.control-card small{color:var(--muted);font-size:12px;line-height:1.45}
.switch{position:relative;flex:0 0 auto;width:66px;height:34px}.switch input{position:absolute;opacity:0;pointer-events:none}.switch span{display:block;width:100%;height:100%;border-radius:999px;background:#233247;border:1px solid #42607f;cursor:pointer;transition:.22s;box-shadow:inset 0 2px 6px rgba(0,0,0,.3)}.switch span::after{content:"";display:block;width:26px;height:26px;margin:3px;border-radius:50%;background:#aab8cb;transition:.22s;box-shadow:0 3px 10px rgba(0,0,0,.35)}.switch input:checked+span{background:linear-gradient(90deg,rgba(92,230,163,.25),rgba(99,236,255,.28));border-color:rgba(92,230,163,.72);box-shadow:0 0 20px rgba(92,230,163,.12)}.switch input:checked+span::after{transform:translateX(32px);background:linear-gradient(145deg,#baffdf,var(--green));box-shadow:0 0 16px rgba(92,230,163,.5)}
.duration-row{display:flex;align-items:baseline;gap:8px;margin:8px 0 4px}.duration-row input{width:138px;height:44px;padding:0 12px;border:1px solid #44617f;border-radius:12px;outline:none;color:var(--text);background:#091424;font-size:20px;font-weight:900;transition:.18s}.duration-row input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(72,232,255,.12),0 0 22px rgba(72,232,255,.1)}.duration-row b{color:var(--muted);font-size:12px}
.spin-button,.danger-button,.ghost-button,.auth-submit{position:relative;overflow:hidden;min-height:98px;border:1px solid;border-radius:18px;padding:0 26px;font-size:12px;font-weight:950;letter-spacing:.065em;cursor:pointer;transition:transform .16s,filter .16s,box-shadow .2s,background .2s}
.spin-button{color:#07111b;border-color:#ffd18a;background:linear-gradient(135deg,#fff0a4,#ffd166 30%,#ff9d4d 58%,#ff6f61);box-shadow:inset 0 1px rgba(255,255,255,.5),0 12px 32px rgba(255,128,67,.24)}
.spin-button::after,.auth-submit::after{content:"";position:absolute;inset:-40% auto -40% -50%;width:35%;transform:skewX(-20deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.55),transparent);animation:buttonShine 3.1s ease-in-out infinite}
@keyframes buttonShine{0%,65%{left:-55%}100%{left:135%}}
.spin-button:hover:not(:disabled),.auth-submit:hover:not(:disabled){filter:brightness(1.08) saturate(1.06);transform:translateY(-2px);box-shadow:0 16px 38px rgba(255,128,67,.32)}.spin-button:active:not(:disabled),.auth-submit:active:not(:disabled){transform:translateY(0) scale(.99)}.spin-button:disabled,.danger-button:disabled,.ghost-button:disabled,.auth-submit:disabled,.logout-button:disabled{cursor:not-allowed;filter:saturate(.45);opacity:.55;box-shadow:none}.cube{margin-right:8px}
.danger-button{color:#ffd0d6;border-color:rgba(255,100,112,.38);background:linear-gradient(145deg,rgba(255,100,112,.14),rgba(255,100,112,.06))}.danger-button:hover:not(:disabled){background:rgba(255,100,112,.18);transform:translateY(-1px)}
.ghost-button{color:#d3deec;border-color:#4c6484;background:#0a1526}
.status-line{min-height:32px;padding:10px 4px 0;color:var(--muted);font-size:12px;font-weight:700}.status-line.error{color:#ffabb6}.status-line.ok{color:#8af0bd}

.lower-grid{display:grid;grid-template-columns:1.35fr .65fr;gap:12px;margin-top:10px}
.section-head{padding:18px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between}.section-head h2{margin:4px 0 0;font-size:18px}.mini-count{color:var(--gold);font-size:20px;font-weight:950}
.participants{min-height:120px;max-height:280px;overflow:auto;padding:12px;display:flex;flex-wrap:wrap;align-content:flex-start;gap:8px}
.person-chip{--chip:var(--cyan);max-width:230px;padding:9px 12px;border:1px solid color-mix(in srgb,var(--chip) 28%,#2a3b52);border-radius:10px;background:linear-gradient(145deg,color-mix(in srgb,var(--chip) 8%,#112038),#0b1627);color:#deebfa;font-size:12px;font-weight:800;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-shadow:inset 3px 0 var(--chip)}
.placeholder{color:var(--muted);font-size:12px;padding:14px 8px}
.history-row{display:grid;grid-template-columns:28px 1fr auto;align-items:center;gap:10px;padding:13px 16px;border-bottom:1px solid rgba(59,82,113,.38)}.history-row:last-child{border-bottom:0}.history-place{color:#607895;font-size:10px;font-weight:900}.history-row strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.history-row time{color:var(--muted);font-size:11px}

.modal-backdrop,.auth-overlay{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:20px;background:rgba(2,6,12,.72);backdrop-filter:blur(12px)}
.modal-backdrop[hidden],.auth-overlay[hidden]{display:none}
.modal,.auth-card{width:min(460px,100%);border:1px solid rgba(110,148,199,.28);border-radius:22px;background:linear-gradient(155deg,rgba(20,34,56,.96),rgba(10,18,33,.98));padding:28px;box-shadow:0 30px 90px rgba(0,0,0,.5),inset 0 1px rgba(255,255,255,.05)}
.modal h2,.auth-card h2{margin:8px 0 10px;font-size:28px}.modal p,.auth-card p{color:var(--muted);font-size:13px;line-height:1.5}.modal-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:20px}.modal-actions button{min-height:50px}
.auth-field{display:flex;flex-direction:column;gap:7px;margin-top:14px}.auth-field span{color:#d2e3f8;font-size:12px;font-weight:800}.auth-field input{height:50px;padding:0 14px;border:1px solid #496482;border-radius:12px;outline:none;background:#091424;color:var(--text);font-size:16px;font-weight:800;transition:.18s}.auth-field input:focus{border-color:var(--cyan);box-shadow:0 0 0 3px rgba(72,232,255,.12),0 0 20px rgba(72,232,255,.1)}.auth-error{min-height:20px;margin-top:8px;color:#ffb0b8;font-size:12px;font-weight:700}.auth-submit{width:100%;margin-top:12px;min-height:52px;color:#07111b;border-color:#a4efff;background:linear-gradient(135deg,#75f1ff,#63ecff 35%,#8f7cff 78%,#ff74d1)}

@media(max-width:1100px){.controls-grid{grid-template-columns:1fr 1fr}.spin-button,.danger-button{min-height:66px}.lower-grid{grid-template-columns:1fr}}
@media(max-width:760px){.topbar{align-items:flex-start;flex-direction:column}.topbar-actions{width:100%;justify-content:flex-start}.controls-grid{grid-template-columns:1fr}.spin-button,.danger-button,.logout-button{width:100%}.user-badge{display:none}}
@media(max-width:640px){.app-shell{width:calc(100% - 18px);padding-top:12px}.case-head{justify-content:flex-start;flex-direction:column;align-items:flex-start;text-align:left;padding:18px}.count-block{align-items:flex-start}.roulette-window{height:246px;margin:14px 12px 0}.winner-strip{margin:0 12px}.player-card{width:150px;min-width:150px;height:176px}.avatar{width:72px;height:72px;top:30px;font-size:24px}.player-card .name{min-height:48px;padding:10px 11px}.control-card{min-height:88px}}
@media(prefers-reduced-motion:reduce){body::before,.bg-orb,.roulette-window.is-spinning .scanlines,.roulette-window.is-spinning .marker,.spin-active .player-card::after,.spin-button::after,.auth-submit::after{animation:none!important}}


/* v4 layout fixes */
.topbar,.topbar-actions,.connection,.user-badge{display:none!important}

.case-actions{
  display:flex;
  align-items:center;
  gap:14px;
}
.compact-logout{
  min-height:34px;
  padding:0 12px;
  border:1px solid rgba(255,109,130,.28);
  border-radius:10px;
  color:#ffd8de;
  background:linear-gradient(135deg,rgba(255,109,130,.12),rgba(255,109,130,.05));
  font-size:10px;
  font-weight:900;
  letter-spacing:.08em;
  cursor:pointer;
  transition:.18s;
}
.compact-logout:hover{
  transform:translateY(-1px);
  background:linear-gradient(135deg,rgba(255,109,130,.2),rgba(255,109,130,.08));
}

/* JS animates transform only on the X axis, so vertical centering must not depend on transform. */
.track{
  top:50%;
  margin-top:-116px;
  transform:translate3d(0,0,0);
}

@media(max-width:640px){
  .track{
    margin-top:-88px;
  }
  .case-actions{
    width:100%;
    justify-content:space-between;
  }
}