/* Gravity Rush — game-specific styles (on top of kit.css) */
.c00i-canvas { background: linear-gradient(180deg, #0e1830, #050912); }

.hero-pick {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(58px, 1fr));
  gap: 8px;
  margin: 4px 0 6px;
}
.hero-opt {
  position: relative;
  padding: 10px 4px 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.04);
  cursor: pointer;
  text-align: center;
  transition: transform 0.12s ease, border-color 0.12s ease;
}
.hero-opt:active { transform: scale(0.96); }
.hero-opt.sel { border-color: var(--accent2); background: rgba(0, 224, 198, 0.12); }
.hero-opt .dot { display: block; width: 20px; height: 20px; margin: 0 auto 6px; border-radius: 50%; }
.hero-opt .nm { display: block; font-size: 11px; font-weight: 800; color: var(--muted); letter-spacing: 0.02em; }
.hero-opt.sel .nm { color: var(--text); }
.hero-opt .blurb { display: block; font-size: 8.5px; color: var(--muted); margin-top: 2px; line-height: 1.2; }
.hero-opt .cost { display: block; font-size: 9px; color: var(--gold); margin-top: 3px; font-weight: 800; }

.power-btn {
  position: fixed;
  bottom: calc(env(safe-area-inset-bottom) + 20px);
  right: calc(env(safe-area-inset-right) + 18px);
  z-index: 6;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background: rgba(9, 10, 20, 0.6);
  backdrop-filter: blur(10px);
  color: var(--text);
  cursor: pointer;
  display: grid;
  place-items: center;
}
.power-btn[hidden] { display: none; }
.power-ring {
  position: absolute;
  inset: 6px;
  border-radius: 50%;
  background: conic-gradient(var(--accent2) var(--p, 0%), rgba(255,255,255,0.08) 0);
  -webkit-mask: radial-gradient(farthest-side, transparent 62%, #000 64%);
  mask: radial-gradient(farthest-side, transparent 62%, #000 64%);
}
.power-btn.ready { box-shadow: 0 0 22px rgba(0, 224, 198, 0.6); }
.power-label { font-size: 11px; font-weight: 900; letter-spacing: 0.06em; }