/* ===========================================================
   Bouncing Balls — page styles
   Uses tokens from ../global.css
   =========================================================== */

body{
  display:flex;
  justify-content:center;
  align-items:flex-start;
  padding:clamp(16px,4vh,40px) 16px;
}

.stage{
  width:100%;
  max-width:620px;
  display:flex;
  flex-direction:column;
  gap:18px;
}

/* ---------- Top bar ---------- */
.topbar{
  display:flex;
  align-items:center;
  gap:16px;
}
.back{
  flex:none;
  width:40px;height:40px;
  display:grid;place-items:center;
  border:1px solid var(--line);
  border-radius:12px;
  color:var(--txt);
  text-decoration:none;
  font-size:20px;
  background:var(--panel);
  transition:border-color .18s ease, color .18s ease, transform .18s ease;
}
.back:hover{
  color:var(--accent);
  border-color:rgba(120,160,255,0.35);
  transform:translateX(-2px);
}
.titles{flex:1;min-width:0}
.titles .title{
  font-weight:800;letter-spacing:2px;text-transform:uppercase;
  color:var(--accent);opacity:.9;font-size:14px;
}
.titles .sub{
  font-size:13px;opacity:.55;margin-top:3px;line-height:1.4;
}

.count{
  flex:none;
  display:flex;flex-direction:column;align-items:flex-end;
  line-height:1;
}
.count-num{
  font-family:ui-monospace,"Cascadia Code",Consolas,monospace;
  font-size:28px;font-weight:800;color:#fff;
  font-variant-numeric:tabular-nums;
}
.count-label{
  font-size:10px;letter-spacing:2px;text-transform:uppercase;
  opacity:.4;margin-top:4px;
}

/* ---------- Mode segmented control ---------- */
.seg{
  display:flex;
  gap:6px;
  padding:5px;
  border:1px solid var(--line);
  border-radius:14px;
  background:var(--panel);
  backdrop-filter:blur(8px);
}
.seg-btn{
  flex:1;
  padding:10px 8px;
  border-radius:10px;
  border:1px solid transparent;
  background:transparent;
  color:var(--txt);
  font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.4px;
  cursor:pointer;opacity:.6;
  transition:opacity .15s ease,border-color .15s ease,background .15s ease,color .15s ease;
}
.seg-btn:hover{opacity:1}
.seg-btn.active{
  background:linear-gradient(180deg,rgba(90,209,255,.25),rgba(90,209,255,.08));
  border-color:var(--accent);color:#eaf6ff;opacity:1;
}

.ctl.disabled{opacity:.3;pointer-events:none}

/* ---------- Arena ---------- */
.arena-wrap{
  position:relative;
  width:100%;
  aspect-ratio:1/1;
  border-radius:24px;
  overflow:hidden;
  border:1px solid var(--line);
  background:
    radial-gradient(120% 120% at 50% 0%, rgba(90,209,255,0.06), transparent 60%),
    rgba(8,12,24,0.6);
  box-shadow:0 30px 80px -30px rgba(0,0,0,0.8);
}
#game{
  display:block;
  width:100%;
  height:100%;
}

/* ---------- Controls ---------- */
.controls{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:14px 20px;
}
.ctl{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:12px;
  letter-spacing:.5px;
  opacity:.85;
}
.ctl > span{white-space:nowrap;opacity:.7}
.ctl output{
  font-family:ui-monospace,"Cascadia Code",Consolas,monospace;
  font-size:12px;color:var(--accent);
  min-width:30px;text-align:right;
}
.ctl.toggle{cursor:pointer}

input[type="range"]{
  -webkit-appearance:none;appearance:none;
  width:120px;height:4px;border-radius:999px;
  background:rgba(120,160,255,0.18);
  outline:none;cursor:pointer;
}
input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none;appearance:none;
  width:15px;height:15px;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(90,209,255,0.15);
}
input[type="range"]::-moz-range-thumb{
  width:15px;height:15px;border:none;border-radius:50%;
  background:var(--accent);
  box-shadow:0 0 0 4px rgba(90,209,255,0.15);
}
input[type="checkbox"]{
  width:16px;height:16px;accent-color:var(--accent);cursor:pointer;
}

@media (max-width:480px){
  .titles .sub{display:none}
}