/* ===== Living particle field / cursor reveal ===== */
.chaos-particles{
  position:fixed;
  inset:0;
  z-index:0;
  pointer-events:none;
  overflow:hidden;
}
.chaos-particle{
  position:absolute;
  width:3px;
  height:3px;
  border-radius:50%;
  background:rgba(226,211,174,.30);
  box-shadow:0 0 0 rgba(201,160,72,0);
  transform:translate(-50%,-50%) scale(1);
  opacity:.30;
  transition:
    transform .18s ease-out,
    opacity .18s ease-out,
    background-color .18s ease-out,
    box-shadow .22s ease-out;
  will-change:transform,opacity;
}
.chaos-particle.is-revealed{
  opacity:1;
  background:rgba(246,224,159,.98);
  box-shadow:
    0 0 5px rgba(246,224,159,.95),
    0 0 13px rgba(201,160,72,.62);
  transform:translate(-50%,-50%) scale(2.45);
}
nav, main, footer{position:relative;z-index:1;}

@media (prefers-reduced-motion: reduce){
  .chaos-particle{transition:none;}
}

:root{
  --bg:#050812;
  --bg-soft:#091120;
  --panel:rgba(12,21,39,.78);
  --panel-solid:#0c1527;
  --line:rgba(224,204,157,.14);
  --line-strong:rgba(224,204,157,.28);
  --gold:#c8aa6e;
  --gold-light:#f1dfad;
  --text:#eee8dc;
  --muted:#8e98ad;
  --blue:#35d5df;
  --blue-deep:#147c9a;
  --red:#ef6657;
  --red-deep:#9e3040;
  --shadow:0 24px 70px rgba(0,0,0,.42);
  --mx:50vw;
  --my:50vh;
  --chaos-cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M4 2.5l5.2 21.2 5.1-6.1 6.8 7.7-2.7 2.4-6.7-7.6-5.1 6.1L4 2.5z' fill='%23f4e7bd' stroke='%23121a24' stroke-width='2.2' stroke-linejoin='round'/%3E%3Cpath d='M8 7l12.8 6.4-7.3 1.6-4.1 5.1L8 7z' fill='%23c89b3c'/%3E%3C/svg%3E") 3 2,auto;
  --chaos-cursor-pointer:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'%3E%3Cpath d='M8 3.5c0-1.1.9-2 2-2s2 .9 2 2v9.2l1.4-5.2c.3-1 1.3-1.6 2.3-1.3 1 .3 1.6 1.3 1.3 2.3l-1 4 1.8-3.3c.5-.9 1.6-1.2 2.5-.7.9.5 1.2 1.6.7 2.5l-1.6 3 1.4-1.7c.7-.8 1.9-.9 2.7-.2.8.7.9 1.9.2 2.7l-4.8 5.8c-1.5 1.8-3.7 2.9-6.1 2.9h-1.3c-3.5 0-6.3-2.8-6.3-6.3V10c0-1.1.9-2 2-2s2 .9 2 2V3.5z' fill='%23f4e7bd' stroke='%23121a24' stroke-width='2'/%3E%3C/svg%3E") 10 3,pointer;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:80px}
body{
  margin:0;min-height:100%;overflow-x:hidden;color:var(--text);
  font-family:Inter,system-ui,sans-serif;
  background:
    radial-gradient(circle at 50% -10%,rgba(31,80,112,.22),transparent 38%),
    radial-gradient(circle at 5% 55%,rgba(19,103,116,.09),transparent 28%),
    radial-gradient(circle at 95% 55%,rgba(128,42,53,.09),transparent 28%),
    linear-gradient(180deg,#050812 0%,#070d19 45%,#050812 100%);
}
body:before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.22;
  background-image:radial-gradient(rgba(255,255,255,.7) .45px,transparent .55px);
  background-size:5px 5px;
  mask-image:linear-gradient(to bottom,transparent,black 18%,black 82%,transparent);
}

/* CURSOR / PARTICLE REVEAL */
body:after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:0;
  opacity:0;
  transition:opacity .18s ease;
  background:
    radial-gradient(circle 115px at var(--mx) var(--my),rgba(241,223,173,.24) 0,rgba(200,170,110,.12) 22%,rgba(200,170,110,.045) 48%,transparent 72%),
    radial-gradient(circle 34px at var(--mx) var(--my),rgba(255,244,204,.18),transparent 75%);
  mix-blend-mode:screen;
}
body.pointer-active:after{opacity:1}
nav,main,footer{position:relative;z-index:1}

/* League-inspired pointer */
html,body{cursor:var(--chaos-cursor)}
a,button,[role="button"],input[type="button"],input[type="submit"],input[type="checkbox"],input[type="radio"],label{cursor:var(--chaos-cursor-pointer)}
input,textarea{cursor:text}
button:disabled{cursor:var(--chaos-cursor)}
a{color:inherit}
button,input{font:inherit}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--gold-light);outline-offset:3px}

/* NAV */
nav{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;justify-content:space-between;
  padding:14px clamp(18px,4vw,48px);
  background:rgba(5,8,18,.72);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(18px);
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;font:700 15px Cinzel,serif;color:var(--gold-light);letter-spacing:.02em}
.brand-mark{
  width:25px;height:25px;border-radius:50%;position:relative;
  border:1px solid var(--gold);
  background:conic-gradient(from 15deg,var(--gold-light),#72572c,var(--gold),#72572c,var(--gold-light));
  box-shadow:0 0 18px rgba(200,170,110,.18);
}
.brand-mark:after{content:"";position:absolute;inset:5px;border-radius:50%;background:var(--bg)}
.nav-cta{
  text-decoration:none;padding:9px 15px;border:1px solid var(--line-strong);border-radius:9px;
  color:var(--gold-light);font-size:12px;font-weight:700;letter-spacing:.04em;
  transition:.2s ease;
}
.nav-cta:hover{border-color:var(--gold);background:rgba(200,170,110,.08);transform:translateY(-1px)}

/* HERO */
.hero{position:relative;text-align:center;padding:92px 22px 76px;overflow:hidden}
.hero-orbit{position:absolute;left:50%;top:25px;width:min(680px,100vw);aspect-ratio:1;transform:translateX(-50%);border:1px solid rgba(200,170,110,.05);border-radius:50%;pointer-events:none}
.hero-orbit:before,.hero-orbit:after{content:"";position:absolute;border-radius:50%;border:1px solid rgba(53,213,223,.06)}
.hero-orbit:before{inset:65px}.hero-orbit:after{inset:130px}
.hero-inner{position:relative;max-width:780px;margin:auto}
.eyebrow{margin:0 0 14px;color:var(--gold);font-size:11px;font-weight:700;letter-spacing:.22em;text-transform:uppercase}
.hero h1{margin:0;color:var(--gold-light);font:800 clamp(38px,7vw,68px)/1.02 Cinzel,serif;letter-spacing:-.025em;text-shadow:0 8px 35px rgba(200,170,110,.16)}
.hero h1 span{display:block;color:#fffaf0}
.hero p{max-width:610px;margin:22px auto 30px;color:var(--muted);font-size:16px;line-height:1.75}
.hero-ctas{display:flex;justify-content:center;gap:11px;flex-wrap:wrap}
.btn-primary,.btn-secondary{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:0 20px;border-radius:10px;text-decoration:none;font-weight:700;font-size:13px;
  transition:transform .2s,filter .2s,background .2s,border-color .2s;
}
.btn-primary{color:#181207;background:linear-gradient(135deg,#f4e4b8,#c8aa6e);box-shadow:0 10px 28px rgba(200,170,110,.18)}
.btn-secondary{border:1px solid var(--line-strong);background:rgba(255,255,255,.025);color:var(--text)}
.btn-primary:hover,.btn-secondary:hover{transform:translateY(-2px)}
.btn-primary:hover{filter:brightness(1.06)}
.btn-secondary:hover{border-color:var(--gold);background:rgba(200,170,110,.06)}

/* STEPS */
.steps{max-width:1040px;margin:0 auto;padding:0 22px 90px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.step{
  position:relative;padding:24px 22px 25px;min-height:155px;
  border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,rgba(17,29,50,.82),rgba(8,15,28,.72));
  box-shadow:0 14px 40px rgba(0,0,0,.14);overflow:hidden;
}
.step:after{content:"";position:absolute;right:-35px;bottom:-45px;width:120px;height:120px;border-radius:50%;border:1px solid rgba(200,170,110,.07)}
.step-num{margin:0 0 18px;color:var(--gold);font:700 12px Cinzel,serif;letter-spacing:.18em}
.step h3{margin:0 0 7px;font-size:15px;color:#f5efe2}
.step p{margin:0;color:var(--muted);font-size:13px;line-height:1.6}

/* TOOL */
#tool{max-width:1180px;margin:auto;padding:62px 22px 110px;border-top:1px solid var(--line)}
.tool-head{text-align:center;margin-bottom:34px}
.tool-kicker{margin:0 0 8px;color:var(--gold);font-size:10px;font-weight:700;letter-spacing:.2em;text-transform:uppercase}
.tool-head h2{margin:0 0 8px;color:var(--gold-light);font:700 clamp(26px,4vw,36px) Cinzel,serif}
.tool-head p{margin:0;color:var(--muted);font-size:13px}
.layout{display:grid;grid-template-columns:235px minmax(360px,1fr) 235px;gap:24px;align-items:center}

/* TEAM PANELS */
.team-panel{
  position:relative;min-height:300px;padding:18px 16px 17px;border:1px solid var(--line);border-radius:18px;
  background:linear-gradient(160deg,rgba(13,25,44,.9),rgba(7,13,25,.82));
  box-shadow:var(--shadow);overflow:hidden;
}
.team-panel:before{content:"";position:absolute;left:0;right:0;top:0;height:2px}
.team-blue:before{background:linear-gradient(90deg,transparent,var(--blue),transparent)}
.team-red:before{background:linear-gradient(90deg,transparent,var(--red),transparent)}
.team-blue{box-shadow:0 22px 70px rgba(12,161,182,.08)}
.team-red{box-shadow:0 22px 70px rgba(191,50,63,.08)}
.team-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.team-title{display:flex;align-items:center;gap:8px;font:700 14px Cinzel,serif;letter-spacing:.03em}
.team-blue .team-title{color:var(--blue)}.team-red .team-title{color:#ff887d}
.dot{width:8px;height:8px;border-radius:50%}.team-blue .dot{background:var(--blue);box-shadow:0 0 12px var(--blue)}.team-red .dot{background:var(--red);box-shadow:0 0 12px var(--red)}
.team-count{font-size:11px;color:var(--muted)}
.team-meter{height:3px;background:rgba(255,255,255,.06);border-radius:9px;margin:-5px 0 15px;overflow:hidden}
.team-meter span{display:block;height:100%;width:0;transition:width .45s ease}
.team-blue .team-meter span{background:linear-gradient(90deg,var(--blue-deep),var(--blue))}
.team-red .team-meter span{background:linear-gradient(90deg,var(--red-deep),var(--red))}
.team-list{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:7px}
.team-list li{
  position:relative;padding:9px 10px 9px 13px;border:1px solid rgba(255,255,255,.055);border-radius:9px;
  background:rgba(255,255,255,.025);font-size:13px;font-weight:600;
  animation:playerIn .4s cubic-bezier(.2,.8,.2,1) both;
}
.team-list li:before{content:"";position:absolute;left:0;top:7px;bottom:7px;width:2px;border-radius:2px}
.team-blue .team-list li:before{background:var(--blue)}.team-red .team-list li:before{background:var(--red)}
@keyframes playerIn{from{opacity:0;transform:translateY(7px) scale(.98)}to{opacity:1;transform:none}}
.empty-hint{margin:18px 0 0;color:#657086;font-size:12px;font-style:italic}

/* WHEEL */
.wheel-col{display:flex;flex-direction:column;align-items:center;min-width:0}
.wheel-stage{position:relative;width:min(420px,82vw);aspect-ratio:1;margin:2px auto 20px}
.wheel-glow{position:absolute;inset:10%;border-radius:50%;background:radial-gradient(circle,rgba(200,170,110,.12),rgba(31,133,150,.06) 42%,transparent 70%);filter:blur(20px)}
.pointer{
  position:absolute;top:-5px;left:50%;transform:translateX(-50%);z-index:8;
  width:0;height:0;border-left:15px solid transparent;border-right:15px solid transparent;border-top:25px solid var(--gold-light);
  filter:drop-shadow(0 2px 7px rgba(0,0,0,.65));
}
.pointer:after{content:"";position:absolute;left:-5px;top:-22px;width:10px;height:10px;border-radius:50%;background:#fff7dc;box-shadow:0 0 12px rgba(240,224,176,.75)}
.wheel-bezel{position:absolute;inset:0;border-radius:50%;padding:8px;background:conic-gradient(from -12deg,#5e4727,var(--gold-light),#7d6135,var(--gold),#3c2d19,var(--gold-light),#5e4727);box-shadow:0 20px 55px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08)}
.wheel-bezel:after{content:"";position:absolute;inset:5px;border-radius:50%;border:1px solid rgba(255,255,255,.2);pointer-events:none}
.wheel-inner{position:relative;width:100%;height:100%;border-radius:50%;background:#07101e;padding:11px;box-shadow:inset 0 0 0 1px rgba(0,0,0,.7)}
canvas{position:absolute;inset:11px;width:calc(100% - 22px);height:calc(100% - 22px);border-radius:50%;transition:transform 3.1s cubic-bezier(.15,.75,.15,1)}
.hub{
  position:absolute;left:50%;top:50%;width:52px;height:52px;transform:translate(-50%,-50%);z-index:7;border-radius:50%;
  background:radial-gradient(circle at 35% 28%,#fff0c7 0,#dfc282 34%,#9c783e 67%,#4d381d 100%);
  border:3px solid #080d17;box-shadow:0 0 0 1px rgba(240,224,176,.7),0 0 24px rgba(200,170,110,.34);
}
.hub:after{content:"";position:absolute;inset:9px;border-radius:50%;border:1px solid rgba(42,31,13,.55)}
.status{min-height:20px;margin:0 0 15px;color:var(--gold);font-size:13px;text-align:center;font-weight:600}

/* CONTROLS */
.controls{width:100%;max-width:400px;display:flex;flex-direction:column;gap:10px}
.input-row{display:flex;gap:7px}
input[type=text]{
  min-width:0;flex:1;background:rgba(8,15,28,.85);border:1px solid var(--line);border-radius:10px;
  padding:12px 13px;color:var(--text);outline:none;font-size:13px;transition:.2s
}
input[type=text]::placeholder{color:#677287}
input[type=text]:focus{border-color:rgba(200,170,110,.65);box-shadow:0 0 0 3px rgba(200,170,110,.06)}
.btn-add,.btn-spin,.btn-reset{border-radius:10px;font-weight:700;transition:.2s}
.btn-add{padding:0 15px;border:1px solid rgba(200,170,110,.55);background:rgba(200,170,110,.1);color:var(--gold-light);font-size:13px}
.btn-add:hover:not(:disabled){background:rgba(200,170,110,.16);transform:translateY(-1px)}
.pending{display:flex;flex-wrap:wrap;gap:6px;min-height:0}
.chip{display:flex;align-items:center;gap:6px;padding:5px 6px 5px 10px;border:1px solid rgba(255,255,255,.08);border-radius:20px;background:rgba(255,255,255,.035);font-size:11px;color:#d6d0c5}
.chip button{width:18px;height:18px;padding:0;border:0;border-radius:50%;background:transparent;color:#778196;line-height:1}
.chip button:hover{color:#fff;background:rgba(239,102,87,.15)}
.count{font-size:11px;color:#778196}
.mode-toggle{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--line);border-radius:10px;overflow:hidden;background:rgba(0,0,0,.12)}
.mode-toggle button{padding:10px;border:0;border-radius:0;background:transparent;color:#778196;font-size:12px;font-weight:600}
.mode-toggle button.active{background:rgba(200,170,110,.12);color:var(--gold-light);box-shadow:inset 0 -2px var(--gold)}
.mode-hint{margin:0;text-align:center;color:#69758a;font-size:11px}
.btn-spin{padding:14px;border:1px solid rgba(240,224,176,.5);background:linear-gradient(135deg,#f3e2b7,#c8aa6e);color:#171106;font:700 14px Cinzel,serif;letter-spacing:.04em;box-shadow:0 10px 28px rgba(200,170,110,.13)}
.btn-spin:hover:not(:disabled){filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 13px 32px rgba(200,170,110,.2)}
.btn-reset{padding:11px;border:1px solid var(--line);background:transparent;color:#8b95a8;font-size:12px}
.btn-reset:hover{color:var(--text);border-color:var(--gold)}
button:disabled,input:disabled{opacity:.42;cursor:not-allowed}
[hidden]{display:none!important}

/* FOOTER */
footer{padding:28px 22px 46px;border-top:1px solid var(--line);text-align:center;color:#687389;font-size:11px}
.footer-mark{color:var(--gold);font-family:Cinzel,serif}

/* CONFETTI */
.confetti-piece{position:fixed;top:0;left:0;width:7px;height:9px;pointer-events:none;z-index:60;border-radius:2px;will-change:transform,opacity}
@media(max-width:900px){
  .layout{grid-template-columns:1fr;max-width:600px;margin:auto}
  .wheel-col{grid-row:1}.team-blue{grid-row:2}.team-red{grid-row:3}
  .team-panel{min-height:auto}
}
@media(max-width:680px){
  nav{padding:12px 16px}.nav-cta{padding:8px 11px}
  .hero{padding:72px 18px 62px}.hero p{font-size:14px}
  .steps{grid-template-columns:1fr;padding-bottom:65px}
  .step{min-height:auto}
  #tool{padding:48px 16px 80px}
  .wheel-stage{width:min(370px,88vw)}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  canvas{transition:none}.team-list li{animation:none}
}

    .sound-toggle{
      display:inline-flex;align-items:center;gap:8px;
      min-height:38px;padding:8px 12px;border:1px solid var(--line);
      border-radius:999px;background:rgba(255,255,255,.035);color:var(--cream);
      font:700 11px/1 Inter,sans-serif;letter-spacing:.08em;text-transform:uppercase;
      cursor:pointer;transition:.2s ease;box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
    }
    .sound-toggle:hover{border-color:rgba(200,170,110,.5);background:rgba(200,170,110,.08);transform:translateY(-1px)}
    .sound-toggle:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px}
    .sound-toggle .sound-icon{font-size:15px;line-height:1}
    .sound-toggle.is-off{opacity:.72}
    .sound-toggle .sound-label{display:inline}
    @media(max-width:560px){.sound-toggle .sound-label{display:none}.sound-toggle{padding:9px 11px}}

/* V6 navigation */
nav{gap:16px}nav .sound-toggle{margin-left:auto}.hero{padding-top:104px}