/* ==========================================================================
   Gopnik NFT Marketplace v2 — cross-surface polish pass
   --------------------------------------------------------------------------
   Loaded after the per-surface stylesheets. Low-specificity cosmetic lifts
   only — nothing here should change layout behaviour. Scoped per-namespace
   so a selector here can never leak into v1 (.mp-*) or non-marketplace
   pages.
   ==========================================================================
   Namespaces touched:
     mpv2a-*    Arena
     mpv2act-*  Activity feed
     mpv2e-*    Explore
     mpv2np-*   Notification Prefs
     mpv2-*     shared shell
     mpv2f-*    Fusion Lab (subtle tightening)
     mpv2mb-*   Master Book (subtle tightening)
   ========================================================================== */


/* --------------------------------------------------------------------------
   Shared — scrollbar + focus ring refinements, applied once per surface
   -------------------------------------------------------------------------- */
.mpv2 ::-webkit-scrollbar,
.mpv2a ::-webkit-scrollbar,
.mpv2act ::-webkit-scrollbar,
.mpv2e ::-webkit-scrollbar,
.mpv2np ::-webkit-scrollbar,
.mpv2f ::-webkit-scrollbar,
.mpv2mb ::-webkit-scrollbar { width: 10px; height: 10px; }
.mpv2 ::-webkit-scrollbar-track,
.mpv2a ::-webkit-scrollbar-track,
.mpv2act ::-webkit-scrollbar-track,
.mpv2e ::-webkit-scrollbar-track,
.mpv2np ::-webkit-scrollbar-track,
.mpv2f ::-webkit-scrollbar-track,
.mpv2mb ::-webkit-scrollbar-track { background: rgba(16, 22, 34, 0.45); border-radius: 6px; }
.mpv2 ::-webkit-scrollbar-thumb,
.mpv2a ::-webkit-scrollbar-thumb,
.mpv2act ::-webkit-scrollbar-thumb,
.mpv2e ::-webkit-scrollbar-thumb,
.mpv2np ::-webkit-scrollbar-thumb,
.mpv2f ::-webkit-scrollbar-thumb,
.mpv2mb ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(124, 158, 255, 0.45), rgba(179, 126, 255, 0.55));
  border-radius: 6px;
  border: 2px solid rgba(16, 22, 34, 0.55);
}
.mpv2 ::-webkit-scrollbar-thumb:hover,
.mpv2a ::-webkit-scrollbar-thumb:hover,
.mpv2act ::-webkit-scrollbar-thumb:hover,
.mpv2e ::-webkit-scrollbar-thumb:hover,
.mpv2np ::-webkit-scrollbar-thumb:hover,
.mpv2f ::-webkit-scrollbar-thumb:hover,
.mpv2mb ::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(124, 158, 255, 0.7), rgba(255, 88, 215, 0.7));
}

/* Consistent accent rule for page-heading dividers across all v2 surfaces. */
.mpv2a-section-head::after,
.mpv2act-section-head::after,
.mpv2e-section-head::after,
.mpv2np-section-head::after {
  content: "";
  display: block;
  width: 56px;
  height: 2px;
  margin-top: 8px;
  background: linear-gradient(90deg, #d4af37 0%, rgba(212, 175, 55, 0) 100%);
  border-radius: 2px;
}


/* --------------------------------------------------------------------------
   Arena
   -------------------------------------------------------------------------- */
.mpv2a {
  --mpv2a-faction-kontora: #7C9EFF;
  --mpv2a-faction-tiski: #F39B4B;
  --mpv2a-faction-babushka: #B37EFF;
  --mpv2a-faction-blokari: #FF58D7;
  --mpv2a-gold: #d4af37;
}

/* Fighter panels — subtle faction-tinted left rail. */
.mpv2a-fighter[data-faction="kontora"]  { box-shadow: inset 4px 0 0 0 var(--mpv2a-faction-kontora); }
.mpv2a-fighter[data-faction="tiski"]    { box-shadow: inset 4px 0 0 0 var(--mpv2a-faction-tiski); }
.mpv2a-fighter[data-faction="babushka"] { box-shadow: inset 4px 0 0 0 var(--mpv2a-faction-babushka); }
.mpv2a-fighter[data-faction="blokari"]  { box-shadow: inset 4px 0 0 0 var(--mpv2a-faction-blokari); }

/* Frame stream readability — alternating row tint + monospace for tick ids. */
.mpv2a-frame:nth-child(odd) {
  background: linear-gradient(90deg, rgba(124, 158, 255, 0.035) 0%, rgba(124, 158, 255, 0) 60%);
}
.mpv2a-frame .mpv2a-frame-turn {
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-variant-numeric: tabular-nums;
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.55);
  letter-spacing: 0.04em;
}

/* Frame-type chips — match color to mechanic. */
.mpv2a-frame[data-type="skill"]       .mpv2a-frame-type { color: #8ec7ff; }
.mpv2a-frame[data-type="ultimate"]    .mpv2a-frame-type { color: var(--mpv2a-gold); font-weight: 700; letter-spacing: 0.04em; }
.mpv2a-frame[data-type="status_tick"] .mpv2a-frame-type { color: #c8a8ff; font-style: italic; }
.mpv2a-frame[data-type="passive"]     .mpv2a-frame-type { color: #8eff9d; }
.mpv2a-frame[data-type="end"]         .mpv2a-frame-type { color: #ff9de3; font-weight: 700; }

/* Charge gauge — animated neon pulse when ready. */
.mpv2a-charge[data-ready="1"] {
  animation: mpv2a-charge-pulse 1.6s ease-in-out infinite;
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.6), 0 0 2px rgba(255, 255, 255, 0.4) inset;
}
@keyframes mpv2a-charge-pulse {
  0%, 100% { box-shadow: 0 0 12px rgba(212, 175, 55, 0.55), 0 0 2px rgba(255, 255, 255, 0.4) inset; }
  50%      { box-shadow: 0 0 20px rgba(212, 175, 55, 0.85), 0 0 3px rgba(255, 255, 255, 0.7) inset; }
}

/* Empty queue state — centered with gold accent instead of pure gray. */
.mpv2a-empty {
  text-align: center;
  padding: 48px 24px;
  border: 1px dashed rgba(212, 175, 55, 0.3);
  border-radius: 14px;
  background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.05) 0%, transparent 65%);
}
.mpv2a-empty::before {
  content: "⚔";
  display: block;
  font-size: 1.8rem;
  color: rgba(212, 175, 55, 0.7);
  margin-bottom: 10px;
}


/* --------------------------------------------------------------------------
   Activity feed
   -------------------------------------------------------------------------- */
.mpv2act-item { transition: background 0.14s ease, transform 0.14s ease, border-color 0.14s ease; }
.mpv2act-item:hover {
  background: linear-gradient(90deg, rgba(124, 158, 255, 0.07) 0%, rgba(124, 158, 255, 0) 70%);
  transform: translateX(2px);
}
.mpv2act-item[data-type="mint"]     { border-left: 3px solid #8eff9d; }
.mpv2act-item[data-type="sell"]     { border-left: 3px solid #ffd166; }
.mpv2act-item[data-type="buy"]      { border-left: 3px solid #8ec7ff; }
.mpv2act-item[data-type="fuse"]     { border-left: 3px solid var(--mpv2a-gold, #d4af37); }
.mpv2act-item[data-type="arena"]    { border-left: 3px solid #ff9de3; }
.mpv2act-item[data-type="swap"]     { border-left: 3px solid #c8a8ff; }
.mpv2act-item[data-type="transfer"] { border-left: 3px solid rgba(255, 255, 255, 0.35); }
.mpv2act-item-time { font-variant-numeric: tabular-nums; color: rgba(255, 255, 255, 0.55); }

/* SSE live pill — gentle pulse that matches the Arena gold pulse. */
.mpv2act-live-pill { position: relative; }
.mpv2act-live-pill[data-connected="1"]::before {
  content: "";
  position: absolute;
  left: 10px; top: 50%;
  width: 8px; height: 8px;
  margin-top: -4px;
  background: #8eff9d;
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(142, 255, 157, 0.75);
  animation: mpv2act-live 1.6s ease-in-out infinite;
}
@keyframes mpv2act-live {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.5; transform: scale(1.3); }
}

/* Empty feed — friendlier prompt. */
.mpv2act-empty {
  text-align: center;
  padding: 56px 24px;
  color: rgba(255, 255, 255, 0.55);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 14px;
}
.mpv2act-empty::before {
  content: "⋯";
  display: block;
  font-size: 2rem;
  color: rgba(124, 158, 255, 0.5);
  margin-bottom: 6px;
}


/* --------------------------------------------------------------------------
   Explore
   -------------------------------------------------------------------------- */
.mpv2e-card {
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
  /* Iter-4 (2026-04-25): dropped persistent ``will-change: transform``.
     The Explore page can render dozens of cards on first paint; pinning
     a layer per card balloons GPU memory.  The browser auto-promotes
     the hovered card during the 0.2 s transition itself. */
}
.mpv2e-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(124, 158, 255, 0.45);
}

/* Trending badge — cleaner ribbon with angle. */
.mpv2e-badge-trending {
  background: linear-gradient(135deg, #ff58d7 0%, #b37eff 100%);
  color: #1a0b26;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 10px;
  border-radius: 4px 0 4px 0;
}
.mpv2e-badge-hot {
  background: linear-gradient(135deg, #ffc078 0%, #ff6b6b 100%);
  color: #1a0b0b;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 10px;
  border-radius: 4px 0 4px 0;
}
.mpv2e-badge-featured {
  background: linear-gradient(135deg, #d4af37 0%, #ffe8a3 100%);
  color: #1a1300;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 2px 10px;
  border-radius: 4px 0 4px 0;
}

/* Tab strip — gold underline on the active tab. */
.mpv2e-tab {
  position: relative;
  transition: color 0.15s ease;
}
.mpv2e-tab[aria-selected="true"]::after {
  content: "";
  position: absolute;
  left: 12px; right: 12px; bottom: -6px;
  height: 2px;
  background: linear-gradient(90deg, #d4af37 0%, #ff58d7 100%);
  border-radius: 2px;
}

/* Empty grid state. */
.mpv2e-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 64px 24px;
  color: rgba(255, 255, 255, 0.6);
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 14px;
}


/* --------------------------------------------------------------------------
   Notification Preferences
   -------------------------------------------------------------------------- */
.mpv2np-row {
  transition: background 0.14s ease, border-color 0.14s ease;
  border-radius: 10px;
  padding: 12px 16px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.mpv2np-row:hover {
  background: rgba(124, 158, 255, 0.05);
  border-color: rgba(124, 158, 255, 0.25);
}

/* Improved switch styling — larger hit target, neon-on state. */
.mpv2np-switch {
  width: 46px;
  height: 26px;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 26px;
  position: relative;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
  flex-shrink: 0;
}
.mpv2np-switch::after {
  content: "";
  position: absolute;
  top: 2px; left: 2px;
  width: 20px; height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.18s ease, background 0.18s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.35);
}
.mpv2np-switch[aria-checked="true"] {
  background: linear-gradient(135deg, rgba(124, 158, 255, 0.55), rgba(255, 88, 215, 0.55));
  border-color: rgba(124, 158, 255, 0.6);
}
.mpv2np-switch[aria-checked="true"]::after {
  transform: translateX(20px);
  background: #fff;
  box-shadow: 0 0 10px rgba(255, 88, 215, 0.55), 0 2px 4px rgba(0, 0, 0, 0.35);
}
.mpv2np-switch:focus-visible {
  outline: 2px solid #d4af37;
  outline-offset: 3px;
}

/* Save-state pill — cleaner success/error feedback. */
.mpv2np-saved  { color: #8eff9d; border: 1px solid rgba(142, 255, 157, 0.35); background: rgba(142, 255, 157, 0.08); }
.mpv2np-error  { color: #ff9d9d; border: 1px solid rgba(255, 157, 157, 0.35); background: rgba(255, 157, 157, 0.08); }
.mpv2np-saved,
.mpv2np-error  { padding: 4px 10px; border-radius: 999px; font-size: 0.82rem; font-weight: 600; }

/* Section grouping — subtle top border with label. */
.mpv2np-section + .mpv2np-section { margin-top: 28px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, 0.08); }


/* --------------------------------------------------------------------------
   Fusion Lab — minor tightening (already strong)
   -------------------------------------------------------------------------- */
.mpv2f-trait[draggable="true"]:active { cursor: grabbing; }
.mpv2f-slot[data-hover="1"] {
  border-color: rgba(212, 175, 55, 0.55);
  background: radial-gradient(ellipse at center, rgba(212, 175, 55, 0.1) 0%, transparent 60%);
}

/* --------------------------------------------------------------------------
   Master Book — minor tightening (already strong)
   -------------------------------------------------------------------------- */
.mpv2mb-card { transition: box-shadow 0.15s ease, transform 0.15s ease; }
.mpv2mb-card:hover { box-shadow: 0 10px 24px rgba(0, 0, 0, 0.28); transform: translateY(-1px); }


/* --------------------------------------------------------------------------
   Reduced-motion respect
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .mpv2a-charge[data-ready="1"],
  .mpv2act-live-pill[data-connected="1"]::before { animation: none; }
  .mpv2e-card:hover { transform: none; }
  .mpv2mb-card:hover { transform: none; }
}


/* --------------------------------------------------------------------------
   Mobile fine-tuning (<640px)
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
  .mpv2a-fighter[data-faction] { box-shadow: inset 0 4px 0 0 var(--mpv2a-faction-kontora); }
  .mpv2a-fighter[data-faction="tiski"]    { box-shadow: inset 0 4px 0 0 var(--mpv2a-faction-tiski); }
  .mpv2a-fighter[data-faction="babushka"] { box-shadow: inset 0 4px 0 0 var(--mpv2a-faction-babushka); }
  .mpv2a-fighter[data-faction="blokari"]  { box-shadow: inset 0 4px 0 0 var(--mpv2a-faction-blokari); }
  .mpv2e-tab[aria-selected="true"]::after { left: 6px; right: 6px; }
  .mpv2np-switch { width: 44px; height: 24px; }
  .mpv2np-switch::after { width: 18px; height: 18px; }
  .mpv2np-switch[aria-checked="true"]::after { transform: translateX(20px); }
}


/* --------------------------------------------------------------------------
   Print — admin pages stay readable on paper
   -------------------------------------------------------------------------- */
@media print {
  .mpv2-nav, .mpv2-footer, .mpv2a-actions, .mpv2act-live-pill,
  .mpv2np-save-bar { display: none !important; }
  body, .mpv2, .mpv2a, .mpv2act, .mpv2e, .mpv2np { background: #fff !important; color: #0e1b2d !important; }
}