.stage{align-items:center}
.ball-btn{width:min(52vw,230px);aspect-ratio:1;border-radius:50%;padding:0;border:5px solid #111;
  background:radial-gradient(circle at 35% 30%, #fff 0 42%, #e9e9ef 55%, #c9c9d4 100%);
  box-shadow:0 16px 40px rgba(0,0,0,.5), inset 0 -14px 26px rgba(0,0,0,.18);
  display:grid;place-content:center;cursor:pointer;user-select:none;touch-action:manipulation;
  transition:transform .12s cubic-bezier(.2,1.4,.4,1),filter .12s ease}
.ball-btn:hover:not(:disabled){transform:scale(1.03)}
.ball-btn:active:not(:disabled){transform:scale(.95);filter:brightness(.95)}
.ball-btn:focus-visible{outline:4px solid var(--gold);outline-offset:6px}
.ball-btn:disabled{filter:grayscale(.5) brightness(.9);cursor:not-allowed}
.ball-face{font-family:var(--pixel);font-size:clamp(28px,9vw,54px);color:#15151c;line-height:1}
.ball-btn.pop{animation:pop2 .5s cubic-bezier(.2,1.6,.4,1)}
@keyframes pop2{0%{transform:scale(.7) rotate(-8deg)}60%{transform:scale(1.12) rotate(3deg)}100%{transform:scale(1)}}

.counter{font-family:var(--pixel);font-size:10px;color:var(--muted);margin:0;text-align:center;line-height:1.7}

.last{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;min-height:38px}
.last span{background:var(--card);border:1px solid var(--line);border-radius:999px;padding:6px 12px;
  font-weight:900;font-size:15px;animation:in .3s ease both}
.last span:first-child{background:var(--accent);color:#fff;border-color:transparent}
@keyframes in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.board{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:5px;width:100%;max-width:560px}
.board i{display:grid;place-content:center;aspect-ratio:1;border-radius:7px;background:var(--card);
  border:1px solid var(--line);font-style:normal;font-size:12px;font-weight:800;color:var(--muted)}
.board i.out{background:var(--accent);border-color:transparent;color:#fff;
  box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 35%, transparent)}
.board i.new{animation:pop2 .45s cubic-bezier(.2,1.6,.4,1)}

.history{list-style:none;margin:10px 0 0;padding:0;max-height:200px;overflow:auto;font-size:13px}
.history li{display:flex;gap:8px;align-items:center;padding:5px 8px;border-radius:8px}
.history li:nth-child(odd){background:var(--card)}
.history li .n{font-family:var(--pixel);font-size:9px;color:var(--accent);min-width:26px}
.history .empty{color:var(--muted);font-style:italic}

@media(max-width:560px){
  .board{grid-template-columns:repeat(8,minmax(0,1fr))}
  .board i{font-size:11px;border-radius:6px}
  .ball-btn{width:min(62vw,220px)}
}
@media(max-height:520px) and (orientation:landscape){
  .ball-btn{width:min(30vw,150px)}
  .board{max-width:420px}
}
@media(prefers-reduced-motion:reduce){
  .ball-btn,.board i.new,.last span{animation:none;transition:none}
}