/* ===========================================================================
   CPS TEST: CLICK STORM — a storm core that heats from lime to magenta
   =========================================================================== */

.cps-stage {
  --heat: 0;
  --heat-color: var(--game-accent);
  position: absolute;
  inset: 0;
  overflow: hidden;
  cursor: crosshair;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  background:
    radial-gradient(60% 55% at 50% 46%, color-mix(in srgb, var(--heat-color) calc(10% + var(--heat) * 30%), transparent), transparent 70%),
    radial-gradient(120% 70% at 50% 0%, rgba(40, 46, 90, 0.55), transparent 65%);
}

.cps-sky {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.cps-column {
  position: relative;
  z-index: 1;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(10px, 2.4vh, 22px);
  padding: 8px 16px 64px;
  pointer-events: none;
}

/* --- The core --- */
.cps-core {
  position: relative;
  width: min(52vmin, 300px, 46vh);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.cps-ring,
.cps-ring svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.cps-ring svg {
  transform: rotate(-90deg);
  overflow: visible;
}

.cps-ring__track {
  fill: none;
  stroke: rgba(255, 255, 255, 0.08);
  stroke-width: 3;
}

.cps-ring__time {
  fill: none;
  stroke: var(--heat-color);
  stroke-width: 4;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 0;
  filter: drop-shadow(0 0 6px var(--heat-color));
}

.cps-stage.is-armed .cps-ring__time {
  animation: cps-ready 1.4s ease-in-out infinite;
}

@keyframes cps-ready {
  50% { opacity: 0.35; }
}

.cps-orb {
  position: relative;
  width: 74%;
  aspect-ratio: 1;
  border-radius: 50%;
  display: grid;
  place-content: center;
  text-align: center;
  background:
    radial-gradient(circle at 34% 28%, rgba(255, 255, 255, 0.34), transparent 38%),
    radial-gradient(circle, color-mix(in srgb, var(--heat-color) 55%, #05060D) 0%, #070914 74%);
  border: 2px solid color-mix(in srgb, var(--heat-color) 75%, transparent);
  box-shadow:
    0 0 calc(24px + var(--heat) * 80px) color-mix(in srgb, var(--heat-color) 70%, transparent),
    inset 0 0 calc(20px + var(--heat) * 30px) color-mix(in srgb, var(--heat-color) 45%, transparent);
  transition: border-color 0.2s, box-shadow 0.2s;
}

/* A slow breath while it waits for the first click. */
.cps-stage.is-armed .cps-orb {
  animation: cps-breathe 2.2s ease-in-out infinite;
}

@keyframes cps-breathe {
  50% { transform: scale(1.04); }
}

.cps-count {
  font-family: var(--font-display);
  font-size: clamp(2.8rem, 13vmin, 5.4rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #fff;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 calc(10px + var(--heat) * 24px) var(--heat-color);
}

.cps-unit {
  margin-top: 4px;
  font-family: var(--font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
}

/* --- Rank callout --- */
.cps-rank {
  min-height: 3.4em;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  opacity: 0;
}

.cps-rank b {
  font-family: var(--font-display);
  font-size: clamp(1.3rem, 4.6vmin, 1.9rem);
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  text-shadow: 0 0 20px var(--heat-color);
}

.cps-rank span {
  font-size: 0.84rem;
  color: var(--arena-ink-2);
}

.cps-rank.show {
  animation: cps-rank 1.6s var(--ease) forwards;
}

@keyframes cps-rank {
  0% { opacity: 0; transform: scale(1.4); letter-spacing: 0.4em; }
  15% { opacity: 1; transform: scale(1); }
  80% { opacity: 1; }
  100% { opacity: 0.35; }
}

.cps-prompt {
  min-height: 1.4em;
  font-family: var(--font-mono);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--game-accent);
  animation: cps-ready 1.4s ease-in-out infinite;
}

/* --- Heat meter --- */
.cps-heat {
  position: relative;
  width: min(86%, 440px);
  padding-bottom: 18px;
}

.cps-heat__bar {
  height: 8px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
}

.cps-heat__fill {
  display: block;
  height: 100%;
  transform-origin: left;
  transform: scaleX(0);
  background: linear-gradient(90deg, #C8FF3D, #FFD447 45%, #FF9A3C 65%, #FF3B4E 82%, #FF4FD8);
  background-size: calc(100% / max(var(--heat), 0.001)) 100%;
  box-shadow: 0 0 14px var(--heat-color);
}

.cps-heat__mark {
  position: absolute;
  bottom: 0;
  translate: -50% 0;
  font-family: var(--font-mono);
  font-size: 0.56rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--arena-ink-3);
  white-space: nowrap;
}

.cps-heat__mark::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: calc(100% + 1px);
  width: 1px;
  height: 7px;
  background: rgba(255, 255, 255, 0.18);
}

/* --- Live graph along the bottom --- */
.cps-graph {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 56px;
  pointer-events: none;
}

.cps-graph svg {
  width: 100%;
  height: 100%;
}

.cps-graph__line {
  fill: none;
  stroke: var(--heat-color);
  stroke-width: 2;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 0 4px var(--heat-color));
}

.cps-graph__area {
  fill: color-mix(in srgb, var(--heat-color) 16%, transparent);
}

/* --- Setup pickers + results chart (inside the shared panel) --- */
.cps-picks {
  display: grid;
  gap: 8px;
  justify-items: center;
}

.cps-picks .seg {
  width: 100%;
  max-width: 440px;
  flex-wrap: nowrap;
}

.cps-picks .seg button {
  flex: 1;
  padding: 6px 6px;
  line-height: 1.2;
}

.cps-chart {
  width: 100%;
  display: grid;
  gap: 6px;
}

.cps-chart__label {
  font-family: var(--font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--arena-ink-3);
}

.cps-chart__bars {
  height: 64px;
  display: flex;
  align-items: flex-end;
  gap: 3px;
}

.cps-chart__bars i {
  flex: 1;
  height: var(--h);
  border-radius: 3px 3px 1px 1px;
  background: color-mix(in srgb, var(--game-accent) 55%, transparent);
  transform-origin: bottom;
  animation: cps-bar 0.5s var(--ease) var(--d) both;
}

.cps-chart__bars i.is-peak {
  background: var(--game-accent);
  box-shadow: 0 0 12px var(--game-glow);
}

@keyframes cps-bar {
  from { transform: scaleY(0); }
}

@media (max-width: 420px) {
  .cps-picks .seg button { font-size: 0.78rem; padding: 6px 3px; }
  .cps-picks .seg button small { font-size: 0.58rem; }
  .cps-heat__mark { font-size: 0.5rem; }
}

/* --- Menu card preview: the core, mid-storm --- */
.pv-cps {
  background: radial-gradient(circle at 50% 50%, rgba(200, 255, 61, 0.16), transparent 62%);
}

.pv-cps b {
  left: 50%;
  top: 50%;
  width: 34cqw;
  height: 34cqw;
  translate: -50% -50%;
  display: grid;
  place-content: center;
  text-align: center;
  border-radius: 50%;
  border: 2px solid rgba(200, 255, 61, 0.85);
  background:
    radial-gradient(circle at 35% 30%, rgba(255, 255, 255, 0.3), transparent 40%),
    radial-gradient(circle, #3F5A12, #070914 75%);
  box-shadow: 0 0 22px rgba(200, 255, 61, 0.55);
  animation: pv-cps-pulse 0.42s ease-out infinite;
}

.pv-cps b strong {
  font-family: var(--font-display);
  font-size: 9cqw;
  line-height: 1;
  color: #fff;
}

.pv-cps b small {
  font-family: var(--font-mono);
  font-size: 2.8cqw;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.65);
}

@keyframes pv-cps-pulse {
  0% { transform: scale(1.07); }
  100% { transform: scale(1); }
}

.pv-cps i {
  width: 10cqw;
  height: 10cqw;
  border-radius: 50%;
  border: 2px solid #C8FF3D;
  animation: pv-cps-ring 0.84s ease-out infinite;
}

.pv-cps i:nth-child(1) { left: 66%; top: 56%; }
.pv-cps i:nth-child(2) { left: 22%; top: 26%; animation-delay: -0.42s; }

@keyframes pv-cps-ring {
  from { transform: scale(0.2); opacity: 1; }
  to { transform: scale(2.2); opacity: 0; }
}

.pv-cps em {
  left: 70%;
  top: 60%;
  width: 4.5cqw;
  height: 6.5cqw;
  background: #fff;
  clip-path: polygon(0 0, 0 100%, 28% 76%, 48% 100%, 62% 93%, 42% 68%, 82% 68%);
  filter: drop-shadow(0 0 4px rgba(200, 255, 61, 0.9));
  animation: pv-cps-click 0.42s ease-in-out infinite;
}

@keyframes pv-cps-click {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(0.82); }
}