/* Infin8 plan picker (infin8-checkout.js): the same plans and checkout on the website, the account portal
 * and the in-game shop. Site tokens with fallbacks, because the game does not load the site stylesheet. */
.i8-picker {
  --i8p-text: var(--text, #f7f8fc); --i8p-muted: var(--muted, #a7b0c3); --i8p-cyan: var(--cyan, #39d7ee);
  --i8p-accent: var(--accent, #8b5cf6); --i8p-border: var(--border, rgba(172, 184, 211, .16));
  --i8p-strong: var(--border-strong, rgba(185, 161, 255, .34)); --i8p-panel: var(--panel-solid, #111624);
  display: grid; gap: 18px; color: var(--i8p-text); font: inherit;
}
.i8-picker-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.i8-plan {
  position: relative; display: flex; flex-direction: column; gap: 12px; padding: 24px;
  border: 1px solid var(--i8p-border); border-radius: 18px;
  background: linear-gradient(160deg, rgba(139, 92, 246, .10), rgba(17, 22, 36, .92) 42%, rgba(57, 215, 238, .06));
}
.i8-plan.featured { border-color: var(--i8p-strong); box-shadow: 0 18px 60px rgba(107, 86, 235, .22); }
.i8-plan-featured {
  position: absolute; z-index: 3; top: -11px; right: 20px; padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #070910; background: var(--i8p-cyan);
}
.i8-plan-tier { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--i8p-cyan); }
.i8-plan h3 { margin: 0; font-size: 22px; line-height: 1.2; }
.i8-plan-price { margin: 0; display: flex; align-items: baseline; gap: 4px; }
.i8-plan-price strong { font-size: 38px; line-height: 1; font-weight: 850; letter-spacing: -.02em; }
.i8-plan-price span { color: var(--i8p-muted); font-size: 14px; }
.i8-plan select {
  width: 100%; min-height: 42px; padding: 8px 12px; color: var(--i8p-text); font: inherit;
  border: 1px solid var(--i8p-border); border-radius: 10px; background: rgba(7, 9, 16, .7);
}
.i8-plan-summary { margin: 0; color: var(--i8p-muted); font-size: 14px; line-height: 1.55; }
.i8-plan-includes { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; font-size: 14px; }
.i8-plan-includes li { position: relative; padding-left: 20px; }
.i8-plan-includes li::before { content: ''; position: absolute; left: 2px; top: .55em; width: 8px; height: 8px; border-radius: 50%; background: linear-gradient(135deg, var(--i8p-cyan), var(--i8p-accent)); }
.i8-plan-buy { margin-top: auto; width: 100%; }
.i8-plan-buy:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.i8-picker-notice {
  display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; font-size: 13px; line-height: 1.5; color: var(--i8p-muted);
  border: 1px solid var(--i8p-border); border-radius: 12px; background: rgba(7, 9, 16, .55); cursor: pointer;
}
.i8-picker-notice input { flex: none; width: 18px; height: 18px; min-height: 0; margin: 2px 0 0; padding: 0; accent-color: var(--i8p-cyan); }
.i8-picker-notice.attention { border-color: var(--i8p-cyan); box-shadow: 0 0 0 3px rgba(57, 215, 238, .18); }
.i8-picker-status { margin: 0; min-height: 1.4em; font-size: 14px; color: var(--i8p-cyan); }
.i8-picker-status.error { color: #ff8fb1; }
.i8-picker-next { color: var(--i8p-text); font-weight: 750; text-decoration: underline; text-underline-offset: 3px; }
.i8-picker-founders { margin: 0; padding: 12px 16px; border-radius: 12px; font-size: 14px; color: var(--i8p-text); background: linear-gradient(90deg, rgba(57, 215, 238, .12), rgba(139, 92, 246, .12)); }
.i8-picker-fine { margin: 0; font-size: 12px; line-height: 1.5; color: var(--i8p-muted); }
.i8-picker-current { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; padding: 20px 22px; border: 1px solid var(--i8p-strong); border-radius: 16px; background: rgba(17, 22, 36, .9); }
.i8-picker-current strong { font-size: 20px; }
.i8-picker-current .button { margin-left: auto; }
.i8-picker-eyebrow { width: 100%; font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--i8p-cyan); }
.i8-picker-chip { padding: 3px 10px; border-radius: 999px; font-size: 12px; text-transform: capitalize; border: 1px solid var(--i8p-border); color: var(--i8p-muted); }
@media (max-width: 520px) { .i8-plan { padding: 20px; } .i8-plan-price strong { font-size: 32px; } }
/* Founders: half off the first term, shown as the headline price with the regular price struck through. */
.i8-plan-price.founders { flex-direction: column; align-items: flex-start; gap: 8px; }
.i8-founders-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 850; letter-spacing: .08em; text-transform: uppercase; color: #070910;
  background: linear-gradient(90deg, var(--i8p-cyan), #b9a1ff 55%, #ff4fd8);
  box-shadow: 0 0 22px rgba(57, 215, 238, .35), 0 0 34px rgba(255, 79, 216, .18);
  animation: i8-founders-glow 3.2s ease-in-out infinite;
}
.i8-founders-badge::before { content: '∞'; font-size: 14px; line-height: 1; }
.i8-plan-now { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 8px; }
.i8-plan-now strong {
  font-size: 46px; line-height: 1; font-weight: 900; letter-spacing: -.03em;
  background: linear-gradient(100deg, #ffffff 5%, var(--i8p-cyan) 45%, #b9a1ff 75%, #ff4fd8);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 0 18px rgba(57, 215, 238, .28));
}
.i8-plan-now > span { color: var(--i8p-muted); font-size: 14px; }
.i8-plan-was { margin-left: 4px; font-size: 20px; font-weight: 700; color: var(--i8p-muted); text-decoration-thickness: 2px; text-decoration-color: rgba(255, 79, 216, .85); }
.i8-plan-then { font-size: 13px; color: var(--i8p-muted); }
.i8-plan.featured .i8-plan-now strong { font-size: 50px; }
@keyframes i8-founders-glow { 50% { box-shadow: 0 0 30px rgba(57, 215, 238, .5), 0 0 46px rgba(255, 79, 216, .3); } }
@media (prefers-reduced-motion: reduce) { .i8-founders-badge { animation: none; } }
@media (max-width: 520px) { .i8-plan-now strong, .i8-plan.featured .i8-plan-now strong { font-size: 40px; } }
.i8-plan-price .i8-founders-badge { color: #070910; font-size: 12px; }
.i8-plan-price .i8-plan-then { font-size: 13px; }
/* One clear tier surface. The page owns the shared particle field. */
.i8-plan, .i8-brand-surface {
  background: radial-gradient(ellipse at top right, rgba(57,215,238,.10), transparent 65%),
    linear-gradient(155deg, rgba(20,24,54,.94), rgba(7,10,22,.96) 60%, rgba(16,32,48,.94));
}
.i8-plan { border-color: rgba(57,215,238,.38); box-shadow: 0 14px 42px rgba(0,0,0,.22); }
.i8-plan h3 { color: var(--i8p-cyan); font-weight: 800; letter-spacing: -.025em; }
.i8-plan .nebula-ring::after { inset: 0; opacity: .35; }
.i8-plan.featured .nebula-ring { --nebula-width: 2px; }
.i8-founders-badge::before { content: none; }
.i8-plan-buy { background: linear-gradient(110deg, var(--i8p-cyan), #83efff); color: #070910; }