/* ================================================================
   Account Rift design system — tokens + shared storefront components
   Source of truth: the "Account Rift" Design System artifact
   (tokens.json + components/bundle.css). Class names keep the
   artifact's `ev-` prefix so views map 1:1 onto its components.

   Admin pages load every stylesheet (`stylesheet_link_tag :app`), so
   this file only defines :root tokens and `ev-*` classes — never bare
   element selectors.
   ================================================================ */

:root {
  /* Color — one dark theme ("Night") */
  --void: #07080c;          /* Page background */
  --surface-100: #0f1117;   /* Card and tile background */
  --surface-200: #161a23;   /* Raised surfaces: stat chips, inputs, hovered cards */
  --line: #232838;          /* Hairline borders; common-tier frame */
  --ink: #f2f4f8;           /* Primary text */
  --ink-soft: #c3cad8;      /* Body copy on dark fields (hero, descriptions, answers) */
  --ink-muted: #8b93a7;     /* Secondary text, labels, captions */
  --on-bright: #07080c;     /* Text on gold, cyan and other bright fills */
  --ki: #22d3ee;            /* Brand cyan: links, focus rings, selection */
  --ki-deep: #0a1f3a;       /* Image placeholders (large fields only) */
  --abyss: #08111f;         /* Behind every HeroBanner (large fields only) */
  --stone: #f5b301;         /* Dragon-stone gold: the BUY button + stone gem */
  --stone-deep: #a37700;    /* Pressed-key shadow under gold buttons */
  --rarity-common: #9aa4b2;
  --rarity-rare: #3b9eff;
  --rarity-epic: #b47aff;
  --hot: #ff4d6d;           /* Out of stock / errors */
  --success: #34d399;       /* In stock / delivered / confirmations */

  /* Shadow */
  --glow-ki: 0 0 0 1px #22d3ee, 0 0 24px rgba(34, 211, 238, 0.35);
  --glow-epic: 0 0 0 1px #b47aff, 0 8px 32px rgba(180, 122, 255, 0.28);
  --lift: 0 12px 28px rgba(0, 0, 0, 0.55);

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;

  /* Radius */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Type (faces are self-hosted in fonts.css) */
  --font-display: "Orbitron", "Eurostile", system-ui, sans-serif;
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* ---------- Page shell ---------- */
.ev-page {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-6) var(--space-6) var(--space-8);
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.ev-page--narrow { max-width: 768px; }

.ev-section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.ev-section-head h2 { margin: 0; font: 700 24px/30px var(--font-sans); color: var(--ink); }
.ev-section-head p { margin: 4px 0 0; color: var(--ink-muted); font-size: 14px; }

.ev-crumb { font-size: 13px; color: var(--ink-muted); margin-bottom: calc(-1 * var(--space-4)); }
.ev-crumb a { color: var(--ki); text-decoration: none; }
.ev-crumb a:hover { text-decoration: underline; }

.ev-eyebrow { font: 700 11px/1 var(--font-display); letter-spacing: 0.16em; text-transform: uppercase; color: var(--ki); }

.ev-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

@media (max-width: 760px) {
  .ev-page { padding: var(--space-4) var(--space-4) var(--space-6); gap: var(--space-6); }
}

/* ---------- Button ---------- */
.ev-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font: 700 13px/1 var(--font-sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--radius-sm);
  padding: 12px 18px;
  border: 1px solid var(--line);
  background: var(--surface-200);
  color: var(--ink);
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.12s, background 0.12s, border-color 0.12s;
}

.ev-btn:hover { transform: translateY(-1px); border-color: var(--ki); }
.ev-btn:active { transform: translateY(1px); }
.ev-btn:focus-visible { outline: 2px solid var(--ki); outline-offset: 2px; }
.ev-btn--primary { background: var(--stone); border-color: var(--stone); color: var(--on-bright); box-shadow: 0 3px 0 var(--stone-deep); }
.ev-btn--primary:hover { border-color: var(--stone); box-shadow: 0 4px 0 var(--stone-deep), 0 0 18px rgba(245, 179, 1, 0.45); }
.ev-btn--primary:active { box-shadow: 0 1px 0 var(--stone-deep); }
.ev-btn--ghost { background: transparent; border-color: transparent; color: var(--ki); }
.ev-btn--sm { padding: 9px 12px; font-size: 12px; }
.ev-btn--block { width: 100%; }
.ev-btn:disabled,
.ev-btn.is-disabled { opacity: 0.45; cursor: not-allowed; transform: none; box-shadow: none; }

/* ---------- RarityBadge ---------- */
.ev-rarity {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 700 11px/1 var(--font-display);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  border: 1px solid currentColor;
  background: rgba(7, 8, 12, 0.82);
}

.ev-rarity::before { content: ""; width: 6px; height: 6px; transform: rotate(45deg); background: currentColor; }
.ev-rarity--common { color: var(--rarity-common); }
.ev-rarity--rare { color: var(--rarity-rare); }
.ev-rarity--epic { color: var(--rarity-epic); }

/* ---------- StatChip ---------- */
.ev-stat {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface-200);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  box-sizing: border-box;
  height: 26px; /* every chip the same height, with or without a number/gem */
  padding: 0 8px;
  line-height: 1;
  white-space: nowrap;
  font-size: 12px;
  color: var(--ink-muted);
}

.ev-stat b { font: 700 13px/1 var(--font-display); color: var(--ink); }
.ev-stat--stone b { color: var(--stone); }
.ev-stat span:not(.ev-gem) { font: 500 12px/1 var(--font-sans); }
.ev-gem { width: 10px; height: 12px; flex: none; background: var(--stone); clip-path: polygon(50% 0, 100% 35%, 50% 100%, 0 35%); }

/* ---------- Art (product / game images) ---------- */
.ev-art-ph {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
  color: var(--ink-muted);
  font-size: 12px;
  background-color: var(--ki-deep);
  background-image:
    linear-gradient(rgba(34, 211, 238, 0.1) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, 0.1) 1px, transparent 1px);
  background-size: 20px 20px;
}

.ev-art-img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- AccountCard ---------- */
.ev-card {
  position: relative;
  background: var(--surface-100);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: var(--ink);
  text-decoration: none;
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.ev-card:hover { transform: translateY(-4px); box-shadow: var(--lift); }
.ev-card:focus-visible { outline: 2px solid var(--ki); outline-offset: 2px; }
.ev-card--rare { border-color: var(--rarity-rare); }
.ev-card--epic { border-color: var(--rarity-epic); box-shadow: var(--glow-epic); }
.ev-card--epic:hover { box-shadow: var(--glow-epic), var(--lift); }

.ev-card--epic .ev-card-art::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.18) 50%, transparent 65%);
  transform: translateX(-100%);
  pointer-events: none;
}

.ev-card--epic:hover .ev-card-art::after { transform: translateX(100%); transition: transform 0.7s ease; }

/* Plain: neutral frame, tier shown only by the badge (the game-page look) */
.ev-card--plain,
.ev-card--plain:hover { border-color: var(--line); box-shadow: none; }
.ev-card--plain:hover { box-shadow: var(--lift); }
.ev-card--plain .ev-card-art::after { display: none; }

.ev-card-art { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ki-deep); }
.ev-card-tags { position: absolute; top: var(--space-2); left: var(--space-2); right: var(--space-2); display: flex; justify-content: flex-end; }
.ev-card-body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; }

.ev-card-title {
  margin: 0;
  font: 600 15px/20px var(--font-sans);
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 40px;
}

.ev-card-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.ev-card-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.ev-price { display: flex; flex-direction: column; }
.ev-price small { font-size: 12px; color: var(--ink-muted); }
.ev-price .ev-amount { font: 800 26px/1 var(--font-sans); letter-spacing: -.02em; color: var(--ink); }

/* PriceConcepts "B" — big euros, small raised € and cents (markup from
   ProductsHelper#split_euro). Parts are em-relative so any .ev-amount size works. */
.ev-amount { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ev-amount .ev-cur { font-size: .615em; font-weight: 700; vertical-align: .23em; margin-right: 1px; color: var(--ink-muted); }
.ev-amount .ev-ct { font-size: .54em; font-weight: 700; vertical-align: .35em; margin-left: 1px; }

/* ---------- GameTile ---------- */
.ev-tile {
  text-align: left;
  font: inherit;
  color: var(--ink);
  text-decoration: none;
  width: 100%;
  background: var(--surface-100);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: var(--space-3);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  transition: transform 0.15s, box-shadow 0.15s, border-color 0.15s;
}

.ev-tile:hover { transform: translateY(-3px); border-color: var(--ki); }
.ev-tile.is-active,
.ev-tile:focus-visible { outline: none; border-color: var(--ki); box-shadow: var(--glow-ki); }
.ev-tile-art { aspect-ratio: 16 / 9; border-radius: var(--radius-sm); overflow: hidden; background: var(--ki-deep); }
.ev-tile-name { font: 700 15px/1.2 var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; }
.ev-tile-meta { font-size: 12px; color: var(--ink-muted); display: flex; align-items: center; gap: 6px; }
.ev-tile-meta b { color: var(--ink); }
.ev-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); box-shadow: 0 0 8px var(--success); }
.ev-dot--off { background: var(--ink-muted); box-shadow: none; }

/* ---------- HeroBanner — shared base: abyss with a CSS starfield ---------- */
.ev-hero {
  --hero-rgb: 34, 211, 238;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background: var(--abyss);
}

.ev-hero-sky {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    radial-gradient(1px 1px at 12% 22%, rgba(242, 244, 248, 0.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 28% 64%, rgba(242, 244, 248, 0.5) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 44% 18%, rgba(242, 244, 248, 0.45) 50%, transparent 51%),
    radial-gradient(1px 1px at 61% 41%, rgba(242, 244, 248, 0.5) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 77% 14%, rgba(242, 244, 248, 0.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 52%, rgba(242, 244, 248, 0.5) 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 78%, rgba(242, 244, 248, 0.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 94% 30%, rgba(242, 244, 248, 0.6) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 20% 40%, rgba(242, 244, 248, 0.6) 50%, transparent 51%),
    radial-gradient(1px 1px at 35% 30%, rgba(242, 244, 248, 0.45) 50%, transparent 51%),
    radial-gradient(2px 2px at 52% 8%, rgba(var(--hero-rgb), 0.4) 50%, transparent 51%),
    radial-gradient(1px 1px at 69% 26%, rgba(242, 244, 248, 0.45) 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 83% 70%, rgba(242, 244, 248, 0.5) 50%, transparent 51%),
    radial-gradient(2px 2px at 4% 12%, rgba(242, 244, 248, 0.6) 50%, transparent 51%),
    radial-gradient(120% 60% at 50% 100%, rgba(var(--hero-rgb), 0.09) 0%, rgba(var(--hero-rgb), 0.02) 40%, transparent 70%);
}

.ev-hero-text { position: relative; display: flex; flex-direction: column; gap: var(--space-3); }

.ev-hero h1 {
  margin: 0;
  font: 900 52px/1.02 var(--font-display);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
  text-shadow: 0 0 18px rgba(var(--hero-rgb), 0.12);
  overflow-wrap: anywhere;
}

.ev-hero p { color: var(--ink-soft); font-size: 16px; line-height: 24px; margin: 0; }
.ev-hero-cta { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; margin-top: var(--space-3); }

.ev-handle {
  font-size: 13px;
  color: var(--ink);
  border: 1px solid var(--line);
  background: rgba(7, 8, 12, 0.6);
  border-radius: var(--radius-pill);
  padding: 8px 14px;
}

/* Hero frame — shared by both variants: faint scanlines + cyan corner brackets */
.ev-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 1px, transparent 1px 3px);
}

.ev-br { position: absolute; width: 22px; height: 22px; border: 2px solid var(--ki); opacity: 0.6; pointer-events: none; z-index: 2; }
.ev-br--tl { top: 12px; left: 12px; border-right: 0; border-bottom: 0; }
.ev-br--tr { top: 12px; right: 12px; border-left: 0; border-bottom: 0; }
.ev-br--bl { bottom: 12px; left: 12px; border-right: 0; border-top: 0; }
.ev-br--br { bottom: 12px; right: 12px; border-left: 0; border-top: 0; }

/* Hero — select (home): your games as a character-select roster */
.ev-hero--select {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: var(--space-8);
  align-items: center;
  padding: 56px var(--space-8);
}

.ev-roster { position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); padding-top: var(--space-3); }

.ev-slot {
  position: relative;
  aspect-ratio: 3 / 4;
  overflow: visible;
  color: var(--ink);
  text-decoration: none;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background-color: var(--surface-100);
  background-image:
    linear-gradient(rgba(34, 211, 238, 0.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34, 211, 238, 0.06) 1px, transparent 1px);
  background-size: 16px 16px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--space-3);
  gap: 6px;
  transition: transform 0.15s, border-color 0.15s, box-shadow 0.15s;
}

.ev-slot img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; opacity: 0.55; }
.ev-slot b,
.ev-slot small { position: relative; }
.ev-slot b { font: 700 13px/1.2 var(--font-display); letter-spacing: 0.04em; text-transform: uppercase; }
.ev-slot small { font-size: 11px; color: var(--ink-soft); }
.ev-slot:hover { border-color: var(--ki); transform: translateY(-4px); }
.ev-slot:focus-visible { outline: 2px solid var(--ki); outline-offset: 2px; }
.ev-slot.is-locked { opacity: 0.45; }
.ev-slot.is-locked:hover { border-color: var(--line); transform: none; }

/* Hero — hud (game pages): status bar + "How it works" (frame comes from .ev-hero) */
.ev-hero--hud { padding: var(--space-6) var(--space-8) var(--space-8); }

.ev-hud-top {
  position: relative;
  display: flex;
  justify-content: space-between;
  flex-direction: row-reverse;
  gap: var(--space-3);
  font: 700 11px/1 var(--font-display);
  letter-spacing: 0.16em;
  color: var(--ink-muted);
  text-transform: uppercase;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-6);
}

.ev-hud-top i { font-style: normal; color: var(--success); }
.ev-hud-body { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-8); align-items: center; }
.ev-hero--hud h1 { font-size: 44px; }

.ev-mission {
  position: relative;
  border: 1px solid var(--ki);
  background: rgba(7, 8, 12, 0.6);
  padding: var(--space-4) var(--space-6) var(--space-6);
  clip-path: polygon(0 0, calc(100% - 24px) 0, 100% 24px, 100% 100%, 24px 100%, 0 calc(100% - 24px));
}

.ev-mission h2 {
  margin: 0 0 var(--space-3);
  font: 700 12px/1 var(--font-display);
  letter-spacing: 0.16em;
  color: var(--ki);
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
}

.ev-mission h2 span { color: var(--ink-muted); }
.ev-mission ol { list-style: none; margin: 0; padding: 0; }
.ev-obj { display: flex; gap: var(--space-3); align-items: center; padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: 14px; color: var(--ink); }
.ev-obj i { width: 12px; height: 12px; margin: 0 2px; border: 2px solid var(--ki); transform: rotate(45deg); flex: none; }
.ev-obj.is-done i { background: var(--ki); }
.ev-obj.is-done span { color: var(--ink-muted); }
.ev-obj:last-child { border-bottom: 0; }

@media (max-width: 760px) {
  .ev-hero--select,
  .ev-hud-body { grid-template-columns: 1fr; }
  .ev-hero--select { padding: var(--space-6) var(--space-4); }
  .ev-hero--hud { padding: var(--space-4) var(--space-4) var(--space-6); }
  .ev-hero--hud .ev-hud-top { margin-bottom: var(--space-4); }
  /* "How it works" makes the hero too tall on phones */
  .ev-hero--hud .ev-mission { display: none; }
  .ev-hero h1,
  .ev-hero--hud h1 { font-size: 30px; }
  .ev-roster { gap: var(--space-2); }
  .ev-slot { padding: var(--space-2); }
  .ev-slot b { font-size: 10px; overflow-wrap: anywhere; }
}

/* ---------- Filter chips ---------- */
.ev-filters { display: flex; gap: var(--space-2); flex-wrap: wrap; }

.ev-chip {
  font: 600 12px/1 var(--font-sans);
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--line);
  background: var(--surface-100);
  color: var(--ink-muted);
  text-decoration: none;
  transition: border-color 0.15s, color 0.15s;
}

.ev-chip:hover { color: var(--ink); }
.ev-chip.is-active { border-color: var(--ki); color: var(--ink); }
.ev-chip:focus-visible { outline: 2px solid var(--ki); outline-offset: 2px; }

/* ---------- FaqList (plain <details>/<summary>) ---------- */
.ev-faq { display: flex; flex-direction: column; gap: var(--space-3); counter-reset: ev-faq; }

.ev-faq-item {
  counter-increment: ev-faq;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--surface-100);
  transition: border-color 0.15s, box-shadow 0.15s;
}

.ev-faq-item:hover { border-color: #33405a; }
.ev-faq-item[open] { border-color: var(--ki); box-shadow: 0 0 0 1px var(--ki), 0 0 20px rgba(34, 211, 238, 0.12); }

.ev-faq-q {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  padding: 18px 20px;
  font: 600 15px/1.35 var(--font-sans);
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}

.ev-faq-q::-webkit-details-marker { display: none; }
.ev-faq-q:focus-visible { outline: 2px solid var(--ki); outline-offset: -2px; border-radius: var(--radius-md); }

.ev-faq-q::before {
  content: counter(ev-faq, decimal-leading-zero);
  font: 700 12px/1 var(--font-display);
  letter-spacing: 0.08em;
  color: var(--ink-muted);
  min-width: 22px;
}

.ev-faq-item[open] .ev-faq-q::before { color: var(--ki); }
.ev-faq-text { flex: 1; }
.ev-faq-icon { position: relative; width: 12px; height: 12px; flex: none; }

.ev-faq-icon::before,
.ev-faq-icon::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 5px;
  height: 2px;
  background: var(--ink-muted);
  transition: transform 0.15s;
}

.ev-faq-icon::after { transform: rotate(90deg); }
.ev-faq-item[open] .ev-faq-icon::before,
.ev-faq-item[open] .ev-faq-icon::after { background: var(--ki); }
.ev-faq-item[open] .ev-faq-icon::after { transform: rotate(0deg); }
.ev-faq-a { padding: 0 20px 18px 58px; font-size: 14px; line-height: 22px; color: var(--ink-soft); white-space: pre-line; }

/* ---------- PaymentMethods ---------- */
.ev-pay { display: flex; flex-direction: column; gap: 8px; }
.ev-pay-label { font: 700 10px/1 var(--font-display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); }
.ev-pay-list { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; }
.ev-pay-tile { width: 48px; height: 32px; display: grid; place-items: center; background: #ffffff; border-radius: 5px; }
.ev-pay-tile img { max-width: 40px; max-height: 22px; width: auto; height: auto; object-fit: contain; }

/* ---------- Motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .ev-card,
  .ev-tile,
  .ev-btn,
  .ev-slot,
  .ev-chip,
  .ev-faq-item,
  .ev-faq-icon::before,
  .ev-faq-icon::after { transition: none; }

  .ev-card:hover,
  .ev-tile:hover,
  .ev-btn:hover,
  .ev-slot:hover { transform: none; }

  .ev-card-art::after { display: none; }
}