:root{
  --cyan:#3ef0ff;
  --magenta:#ff3ec8;
  --violet:#a86bff;
  --yellow:#ffe95e;
  --bg1:#241a4a;
  --bg2:#3a1e63;
  --bg3:#5a2a7a;
  --panel:rgba(20,14,40,0.6);
  --panel-border:rgba(255,255,255,0.16);
  --text:#f2eefc;
  --sub:#c6b8ec;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;min-height:100vh}
body{
  font-family:'Share Tech Mono',ui-monospace,monospace;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 15% 10%, rgba(62,240,255,.18), transparent 60%),
    radial-gradient(1000px 900px at 90% 20%, rgba(255,62,200,.20), transparent 55%),
    radial-gradient(1400px 1000px at 50% 100%, rgba(168,107,255,.25), transparent 60%),
    linear-gradient(135deg, var(--bg1), var(--bg2) 45%, var(--bg3) 100%);
  background-attachment:fixed;
  overflow-x:hidden;
  position:relative;
  min-height:100vh;
}
h1,h2,.brand{font-family:'Orbitron',ui-monospace,monospace}
.glyphs{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none}
.glyph{
  position:absolute;
  font-family:'Orbitron','Arial',sans-serif;
  font-weight:900;
  line-height:1;
  color:transparent;
  -webkit-text-stroke:2px rgba(255,255,255,0.06);
  filter:blur(1px);
  user-select:none;
  animation:drift 26s ease-in-out infinite alternate;
  will-change:transform;
}
.glyph.a{ top:-8%; left:-10%; font-size:56vw; color:rgba(62,240,255,0.06); transform:rotate(-8deg); animation-duration:34s;}
.glyph.b{ bottom:-18%; right:-14%; font-size:48vw; color:rgba(255,62,200,0.07); transform:rotate(6deg); animation-duration:29s; animation-delay:-6s;}
.glyph.c{ top:20%; right:-8%; font-size:22vw; color:rgba(255,233,94,0.06); transform:rotate(-4deg); animation-duration:22s; animation-delay:-3s;}
@keyframes drift{
  from{ transform:translate(0,0) rotate(var(--r,0deg)); }
  to{ transform:translate(1.5vw,2vw) rotate(calc(var(--r,0deg) + 2deg)); }
}
.scanlines{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:repeating-linear-gradient(to bottom, rgba(255,255,255,0.035) 0px, rgba(255,255,255,0.035) 1px, transparent 2px, transparent 4px);
  mix-blend-mode:overlay;
  opacity:.5;
}
.wrap{position:relative;z-index:2;max-width:1280px;margin:0 auto;padding:2.2rem 1.4rem 4rem}
header{text-align:center;margin-bottom:1.6rem}
header .back{
  display:inline-block;margin-bottom:.8rem;font-size:.8rem;letter-spacing:.08em;
  color:var(--sub);text-decoration:none;border:2px solid var(--panel-border);
  padding:.3rem .8rem;border-radius:999px;background:var(--panel);backdrop-filter:blur(6px);
}
header .back:hover{color:var(--cyan);border-color:var(--cyan)}
h1{
  font-size:clamp(2rem,5.5vw,3.6rem);
  margin:.2rem 0;
  letter-spacing:.08em;
  background:linear-gradient(90deg,var(--cyan),var(--magenta) 50%,var(--yellow));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 0 40px rgba(168,107,255,.35);
}

.board-card{
  background:var(--panel);
  border:4px solid var(--panel-border);
  border-radius:26px;
  padding:1.6rem;
  backdrop-filter:blur(14px);
  box-shadow:0 0 0 2px rgba(255,255,255,0.04), 0 24px 70px rgba(0,0,0,.4), 0 0 70px rgba(168,107,255,.1);
}

.board-layout{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:1.4rem;
  align-items:stretch;
}
@media (max-width:820px){
  .board-layout{grid-template-columns:1fr}
}

.panel{
  background:rgba(0,0,0,.25);
  border:3px solid var(--panel-border);
  border-radius:20px;
  padding:1.2rem 1.1rem;
  display:flex;
  flex-direction:column;
  gap:1.3rem;
}
.panel-title{
  font-family:'Orbitron',sans-serif;
  font-size:.85rem;letter-spacing:.16em;text-transform:uppercase;
  text-align:center;
  color:var(--cyan);
  text-shadow:0 0 12px rgba(62,240,255,.5);
  margin-bottom:.2rem;
}
.ctrl label{
  display:flex;justify-content:space-between;gap:.5rem;
  font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--sub);
  margin-bottom:.5rem;
}
.ctrl label span{color:var(--yellow);font-weight:700}
.num-input{
  width:100%;
  margin-top:.5rem;
  background:rgba(0,0,0,.3);
  border:2px solid var(--panel-border);
  border-radius:8px;
  color:var(--text);
  font-family:inherit;
  font-size:.9rem;
  padding:.4rem .6rem;
  text-align:center;
  outline:none;
}
.num-input:focus{border-color:var(--cyan); box-shadow:0 0 12px rgba(62,240,255,.3)}
.ctrl input[type="range"]{
  width:100%;
  -webkit-appearance:none;appearance:none;
  height:10px;border-radius:999px;
  background:linear-gradient(90deg,var(--cyan),var(--magenta));
  border:2px solid rgba(255,255,255,.2);
  outline:none;
  cursor:pointer;
}
.ctrl input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:24px;height:24px;border-radius:50%;
  background:#fff;border:3px solid var(--violet);
  box-shadow:0 0 12px rgba(255,255,255,.8), 0 0 20px var(--magenta);
  cursor:pointer;
}
.ctrl input[type="range"]::-moz-range-thumb{
  width:24px;height:24px;border-radius:50%;
  background:#fff;border:3px solid var(--violet);
  box-shadow:0 0 12px rgba(255,255,255,.8), 0 0 20px var(--magenta);
  cursor:pointer;
}

.seg{
  display:flex;flex-wrap:wrap;gap:.5rem;
}
.seg-btn{
  flex:1 1 calc(50% - .25rem);
  font-family:'Orbitron',sans-serif;
  font-size:.68rem;letter-spacing:.08em;text-transform:uppercase;
  color:var(--sub);
  background:rgba(0,0,0,.3);
  border:2px solid var(--panel-border);
  border-radius:10px;
  padding:.55rem .3rem;
  cursor:pointer;
  transition:all .15s;
}
.seg-btn:hover{border-color:var(--cyan)}
.seg-btn.active{
  background:linear-gradient(90deg,var(--cyan),var(--magenta));
  color:#0a0a14;
  border-color:rgba(255,255,255,.4);
  font-weight:700;
}
.mode-desc{
  font-size:.72rem;
  line-height:1.5;
  color:var(--sub);
  margin-top:.6rem;
}

.board-stage{
  background:rgba(0,0,0,.3);
  border:3px solid var(--panel-border);
  border-radius:20px;
  box-shadow:inset 0 0 40px rgba(0,0,0,.5);
  overflow:hidden;
  display:flex;
  flex-direction:column;
}
.combo-strip{
  display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;
  padding:.9rem 1.2rem;
  border-bottom:2px solid var(--panel-border);
  min-height:52px;
}
.combo-label{
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;color:var(--sub);
}
.combo-balls{display:flex;gap:.4rem;flex-wrap:wrap}
.combo-ball{
  width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.8rem;font-weight:700;color:#0a0a14;
  background:radial-gradient(circle at 30% 30%, #fff, var(--cyan) 55%, var(--magenta));
  box-shadow:0 0 10px rgba(62,240,255,.7);
}
.combo-sum{
  font-family:'Orbitron',sans-serif;
  color:var(--yellow);font-weight:700;font-size:.9rem;
  margin-left:auto;
}
#board{
  width:100%;
  flex:1;
  min-height:460px;
  display:block;
}

.controls-bottom{
  margin-top:1.4rem;
  display:flex;flex-wrap:wrap;gap:1.1rem;align-items:center;justify-content:center;
}
.btn{
  font-family:'Orbitron',sans-serif;
  font-size:.85rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--text);
  background:rgba(0,0,0,.3);
  border:3px solid var(--panel-border);
  border-radius:14px;
  padding:.9rem 1.6rem;
  cursor:pointer;
  transition:transform .12s, box-shadow .12s, border-color .12s;
}
.btn:hover{border-color:var(--cyan); box-shadow:0 0 20px rgba(62,240,255,.35)}
.btn:active{transform:scale(.96)}
.btn.primary{
  background:linear-gradient(90deg,var(--cyan),var(--magenta));
  color:#0a0a14;
  border-color:rgba(255,255,255,.4);
  font-weight:700;
  box-shadow:0 0 24px rgba(255,62,200,.4);
}
.btn.primary:hover{box-shadow:0 0 34px rgba(255,62,200,.6)}
.stats{
  font-size:.85rem;letter-spacing:.05em;color:var(--sub);
  border:2px solid var(--panel-border);
  border-radius:12px;
  padding:.6rem 1rem;
  background:rgba(0,0,0,.25);
}
.stats span{color:var(--yellow)}

.progress-wrap{
  margin-top:1.4rem;
}
.progress-track{
  position:relative;
  width:100%;
  height:34px;
  border-radius:999px;
  border:3px solid var(--panel-border);
  background:rgba(0,0,0,.35);
  box-shadow:inset 0 0 14px rgba(0,0,0,.5);
  overflow:hidden;
}
.progress-fill{
  position:absolute;
  top:0;left:0;bottom:0;
  width:0%;
  background:linear-gradient(90deg,var(--cyan),var(--magenta) 60%,var(--yellow));
  box-shadow:0 0 18px rgba(255,62,200,.6);
  transition:width .1s linear;
}
.progress-label{
  position:absolute;
  inset:0;
  display:flex;align-items:center;justify-content:center;
  font-family:'Orbitron',sans-serif;
  font-size:.72rem;letter-spacing:.08em;
  color:#fff;
  text-shadow:0 1px 3px rgba(0,0,0,.9);
}

.top-table-wrap{
  margin-top:1.2rem;
  border:3px solid var(--panel-border);
  border-radius:16px;
  background:rgba(0,0,0,.25);
  padding:1rem 1.2rem 1.2rem;
  overflow-x:auto;
}
.top-table{
  width:100%;
  border-collapse:collapse;
  font-size:.85rem;
}
.top-table th{
  font-family:'Orbitron',sans-serif;
  font-size:.7rem;letter-spacing:.1em;text-transform:uppercase;
  color:var(--cyan);
  text-align:left;
  padding:.5rem .6rem;
  border-bottom:2px solid var(--panel-border);
}
.top-table td{
  padding:.5rem .6rem;
  border-bottom:1px solid rgba(255,255,255,0.08);
  vertical-align:middle;
}
.top-table tr:last-child td{border-bottom:none}
.top-table td.rank-col{color:var(--yellow);font-weight:700;width:2.2rem}
.top-table td.count-col{color:var(--yellow);font-weight:700;white-space:nowrap}
.top-table .mini-balls{display:flex;gap:.3rem;flex-wrap:wrap}
.mini-ball{
  width:26px;height:26px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:.68rem;font-weight:700;color:#0a0a14;
  background:radial-gradient(circle at 30% 30%, #fff, var(--cyan) 55%, var(--magenta));
  box-shadow:0 0 8px rgba(62,240,255,.6);
  flex:0 0 auto;
}
.top-table-empty{color:var(--sub);font-size:.85rem;padding:.4rem .6rem}

.math-card{
  margin-top:1.6rem;
  background:var(--panel);
  border:4px solid var(--panel-border);
  border-radius:26px;
  padding:1.8rem 2rem;
  backdrop-filter:blur(14px);
  box-shadow:0 0 0 2px rgba(255,255,255,0.04), 0 24px 70px rgba(0,0,0,.4), 0 0 70px rgba(168,107,255,.1);
}
.math-card h2{
  font-size:1.3rem;
  margin:.2rem 0 1rem;
  letter-spacing:.03em;
  background:linear-gradient(90deg,var(--cyan),var(--magenta) 60%,var(--yellow));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.math-card p{
  color:var(--text);
  line-height:1.7;
  font-size:.92rem;
  margin:0 0 1.1rem;
}
.math-card p strong{color:var(--yellow)}
.math-card p em{color:var(--cyan);font-style:normal}
.math-card p code{
  background:rgba(0,0,0,.35);
  border:1px solid var(--panel-border);
  border-radius:6px;
  padding:.1rem .35rem;
  color:var(--cyan);
}
.math-card a{color:var(--cyan)}
.formula-box{
  background:rgba(0,0,0,.35);
  border:2px solid var(--panel-border);
  border-radius:14px;
  padding:1rem 1.4rem;
  margin:0 0 1.3rem;
  display:flex;
  flex-direction:column;
  gap:.55rem;
}
.formula-line{
  font-family:'Share Tech Mono', monospace;
  font-size:1.05rem;
  letter-spacing:.03em;
  color:var(--sub);
}
.formula-line span{
  color:var(--yellow);
  font-weight:700;
  text-shadow:0 0 10px rgba(255,233,94,.5);
}

.stats-card{
  margin-top:1.6rem;
  background:var(--panel);
  border:4px solid var(--panel-border);
  border-radius:26px;
  padding:1.8rem 2rem;
  backdrop-filter:blur(14px);
  box-shadow:0 0 0 2px rgba(255,255,255,0.04), 0 24px 70px rgba(0,0,0,.4), 0 0 70px rgba(168,107,255,.1);
}
.stats-card h2{
  font-size:1.3rem;
  margin:.2rem 0 .8rem;
  letter-spacing:.03em;
  background:linear-gradient(90deg,var(--cyan),var(--magenta) 60%,var(--yellow));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.stats-intro{
  color:var(--sub);
  line-height:1.7;
  font-size:.9rem;
  margin:0 0 1.2rem;
}
.stats-intro strong{color:var(--yellow)}
#freqChart{
  width:100%;
  height:220px;
  display:block;
  border-radius:16px;
  border:2px solid var(--panel-border);
  background:rgba(0,0,0,.25);
}
.stats-explain{margin-top:1.6rem}
.stats-explain h2{
  font-size:1.15rem;
  margin:0 0 .8rem;
  letter-spacing:.03em;
  background:linear-gradient(90deg,var(--cyan),var(--magenta) 60%,var(--yellow));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.stats-explain p{
  color:var(--text);
  line-height:1.7;
  font-size:.9rem;
  margin:0 0 1rem;
}
.stats-explain p strong{color:var(--yellow)}

.extra-title{margin-top:1.8rem}
.extra-stats{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(180px, 1fr));
  gap:1rem;
  margin-top:.8rem;
}
.extra-tile{
  border:2px solid var(--panel-border);
  border-radius:14px;
  background:rgba(0,0,0,.25);
  padding:1rem 1.1rem;
  text-align:center;
}
.extra-label{
  font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;color:var(--sub);
  margin-bottom:.5rem;
}
.extra-value{
  font-family:'Orbitron',sans-serif;
  font-size:1.05rem;
  color:var(--yellow);
  font-weight:700;
  text-shadow:0 0 12px rgba(255,233,94,.4);
}

footer{text-align:center;margin-top:2.2rem;color:var(--sub);font-size:.78rem;letter-spacing:.06em}
footer span{color:var(--yellow)}