/* AI Click Speed Test - colourful mobile-first styles (scoped) */
.game-page{max-width:1100px;margin:0 auto;padding:1.1rem}
.click-shell{
  background:var(--bg-card);
  border-radius:16px;
  padding:1rem;
  border:1px solid var(--border);
  box-shadow:var(--shadow-soft);
  overflow:hidden;
}
.click-hud{display:flex;flex-wrap:wrap;gap:.55rem;align-items:center;justify-content:space-between;margin-bottom:.8rem}
.click-hud .pill{
  background:linear-gradient(135deg, rgba(43,102,255,.14), rgba(255,255,255,.06));
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  padding:.45rem .7rem;
  font-weight:800
}
.pill-muted{opacity:.82}

.tap-area{
  --hue: 210;
  position:relative;
  min-height: 46vh;
  border-radius: 18px;
  border: 1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(800px 300px at 20% 10%, hsla(var(--hue), 90%, 70%, .22), transparent 60%),
    radial-gradient(700px 280px at 80% 20%, hsla(calc(var(--hue) + 60), 90%, 65%, .18), transparent 60%),
    radial-gradient(900px 380px at 50% 100%, hsla(calc(var(--hue) + 120), 90%, 60%, .14), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,0.06), rgba(255,255,255,0.02));
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  user-select:none;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  overflow:hidden;
}

.tap-area::before{
  content:"";
  position:absolute;
  inset:-40%;
  background:
    radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.35), transparent 60%),
    radial-gradient(2px 2px at 70% 40%, rgba(255,255,255,.25), transparent 60%),
    radial-gradient(1.5px 1.5px at 40% 70%, rgba(255,255,255,.25), transparent 60%),
    radial-gradient(1.5px 1.5px at 85% 75%, rgba(255,255,255,.22), transparent 60%);
  opacity:.35;
  animation: drift 10s linear infinite;
  pointer-events:none;
}
@keyframes drift{
  0%{transform:translate3d(-2%, -2%, 0) rotate(0deg)}
  100%{transform:translate3d(2%, 2%, 0) rotate(6deg)}
}

.tap-center{position:relative;z-index:2;padding:1rem}
.tap-title{font-size:1.65rem;font-weight:1000;letter-spacing:.2px}
.tap-sub{margin-top:.35rem;font-weight:700;opacity:.85}

.tap-effects{position:absolute;inset:0;z-index:1;pointer-events:none}
.burst{
  position:absolute;
  width:10px;height:10px;border-radius:999px;
  background:hsla(var(--bh), 95%, 70%, .95);
  box-shadow:0 0 0 0 hsla(var(--bh), 95%, 70%, .35);
  transform:translate(-50%,-50%);
  animation: pop .55s ease-out forwards;
}
@keyframes pop{
  0%{opacity:1;transform:translate(-50%,-50%) scale(.6);box-shadow:0 0 0 0 hsla(var(--bh),95%,70%,.35)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(6);box-shadow:0 0 0 26px hsla(var(--bh),95%,70%,0)}
}

.tap-area.pulse{
  animation: pulse .18s ease-out;
}
@keyframes pulse{
  0%{transform:scale(1)}
  100%{transform:scale(1.005)}
}

.result-panel{
  margin-top: .9rem;
  padding: .9rem;
  border-radius: 14px;
  background: var(--bg-card-soft);
  border: 1px solid var(--border);
}
.share-row{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.6rem}
.how{margin-top:.8rem}
.how-body{padding:.6rem .2rem}

@media (max-width: 520px){
  .tap-title{font-size:1.5rem}
  .tap-area{min-height: 52vh}
}