:root {
  --checkout-ink: oklch(0.96 0.02 250);
  --checkout-muted: oklch(0.72 0.035 250);
  --checkout-panel: oklch(0.16 0.03 255);
  --checkout-line: oklch(0.48 0.14 245 / 0.42);
  --checkout-accent: oklch(0.76 0.16 218);
  --checkout-success: oklch(0.78 0.16 155);
  --checkout-error: oklch(0.72 0.18 28);
  --checkout-ease: cubic-bezier(0.23, 1, 0.32, 1);
}

.arena-stripe-dialog {
  inline-size: min(94vi, 760px);
  max-inline-size: 760px;
  max-block-size: min(92dvb, 920px);
  padding: 0;
  overflow: hidden;
  color: var(--checkout-ink);
  background: var(--checkout-panel);
  border: 1px solid var(--checkout-line);
  border-radius: 20px;
  box-shadow: 0 28px 80px oklch(0.03 0.02 255 / 0.72), 0 0 0 1px oklch(0.78 0.16 218 / 0.08) inset;
  opacity: 1;
  transform: translateY(0) scale(1);
  transition: opacity 220ms var(--checkout-ease), transform 220ms var(--checkout-ease), overlay 220ms allow-discrete, display 220ms allow-discrete;
}

.arena-stripe-dialog::backdrop {
  background: oklch(0.03 0.02 255 / 0.82);
  backdrop-filter: blur(8px);
}

@starting-style {
  .arena-stripe-dialog[open] {
    opacity: 0;
    transform: translateY(10px) scale(0.985);
  }
}

.arena-stripe-panel {
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto;
  max-block-size: min(92dvb, 920px);
  min-block-size: min(82dvb, 700px);
}

.arena-stripe-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: clamp(20px, 4vi, 32px);
  border-block-end: 1px solid var(--checkout-line);
  background: oklch(0.19 0.045 252);
}

.arena-stripe-header > div { min-inline-size: 0; }

.arena-stripe-kicker {
  display: block;
  margin-block-end: 8px;
  color: var(--checkout-accent);
  font: 700 0.7rem/1.2 "IBM Plex Mono", ui-monospace, monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.arena-stripe-header h2 {
  margin: 0;
  color: var(--checkout-ink);
  font: 700 clamp(1.35rem, 4vi, 2rem)/1.08 "Space Grotesk", system-ui, sans-serif;
  letter-spacing: -0.035em;
  text-wrap: balance;
}

.arena-stripe-header p {
  max-inline-size: 62ch;
  margin: 10px 0 0;
  color: var(--checkout-muted);
  font: 500 0.85rem/1.55 "Inter", system-ui, sans-serif;
  text-wrap: pretty;
}

.arena-stripe-close {
  position: relative;
  flex: 0 0 44px;
  inline-size: 44px;
  block-size: 44px;
  padding: 0;
  color: var(--checkout-ink);
  background: oklch(0.24 0.04 250);
  border: 1px solid var(--checkout-line);
  border-radius: 12px;
  cursor: pointer;
  font: 400 1.6rem/1 system-ui, sans-serif;
  transition: transform 140ms var(--checkout-ease), border-color 140ms ease, background-color 140ms ease;
}

.arena-stripe-close:active { transform: scale(0.96); }
.arena-stripe-close:focus-visible { outline: 3px solid var(--checkout-accent); outline-offset: 3px; }

@media (hover: hover) and (pointer: fine) {
  .arena-stripe-close:hover { background: oklch(0.29 0.055 248); border-color: var(--checkout-accent); }
}

.arena-stripe-status {
  padding: 12px clamp(20px, 4vi, 32px);
  color: var(--checkout-muted);
  background: oklch(0.13 0.025 255);
  border-block-end: 1px solid oklch(0.48 0.14 245 / 0.25);
  font: 600 0.76rem/1.4 "IBM Plex Mono", ui-monospace, monospace;
}

.arena-stripe-dialog[data-state="error"] .arena-stripe-status { color: var(--checkout-error); }
.arena-stripe-dialog[data-state="complete"] .arena-stripe-status { color: var(--checkout-success); }

.arena-stripe-mount {
  min-block-size: 440px;
  padding: clamp(12px, 3vi, 24px);
  overflow: auto;
  overscroll-behavior: contain;
  background: oklch(0.985 0.004 245);
  contain: layout paint;
}

.arena-stripe-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px clamp(20px, 4vi, 32px);
  color: var(--checkout-muted);
  background: oklch(0.13 0.025 255);
  border-block-start: 1px solid var(--checkout-line);
  font: 600 0.68rem/1.35 "IBM Plex Mono", ui-monospace, monospace;
}

.arena-stripe-footer > span:first-child { color: var(--checkout-success); }

@media (max-width: 640px) {
  .arena-stripe-dialog {
    inline-size: 100vi;
    max-inline-size: none;
    max-block-size: 100dvb;
    margin: 0;
    border: 0;
    border-radius: 0;
  }
  .arena-stripe-panel { min-block-size: 100dvb; max-block-size: 100dvb; }
  .arena-stripe-header { padding-block-start: max(18px, env(safe-area-inset-top)); }
  .arena-stripe-header p { display: none; }
  .arena-stripe-mount { min-block-size: 0; padding: 8px; }
  .arena-stripe-footer {
    padding-block-end: max(12px, env(safe-area-inset-bottom));
    flex-wrap: wrap;
  }
}

@media (prefers-reduced-motion: reduce) {
  .arena-stripe-dialog,
  .arena-stripe-close { transition-duration: 0.01ms; }
}