/* ════════════════════════════════════════════════════════════════
   WINR v8 — additions on top of the deployed baseline.
   Everything in this file is purely additive: new components introduced
   in v8 (wax-seal verified mark, proof-card message system, axiom card
   variant). The baseline files (app.css, inbox.css, etc.) are untouched
   so the Supabase auth integration keeps working unchanged.
   ════════════════════════════════════════════════════════════════ */

/* ── Verified wax seal ─────────────────────────────────────────────
   Mini stamp that mirrors the loader's wax seal. Used wherever a
   verified user's name appears (post ribbons, profile headers,
   inside proof-card headers). Three sizes via [data-size]. */
.verified-seal {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 35% 35%, #b3141a 0%, #850c11 50%, #520508 100%);
  border-radius: 50%;
  box-shadow:
    inset 0 0 4px rgba(0,0,0,0.7),
    inset 1px 1px 2px rgba(255,100,100,0.3),
    0 2px 4px rgba(0,0,0,0.5);
  font-family: 'Times New Roman', Times, serif;
  font-weight: 700;
  color: #5a070b;
  text-shadow: -0.5px -0.5px 0 rgba(0,0,0,0.55), 0.5px 0.5px 0 rgba(255,100,100,0.3);
  letter-spacing: -0.5px;
  vertical-align: middle;
  flex-shrink: 0;
  cursor: help;
  position: relative;
  z-index: 1;
  transition: transform 200ms ease-out;
}
.verified-seal::before {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: 47% 53% 48% 52% / 51% 49% 52% 48%;
  background: radial-gradient(circle at 30% 30%, #a41217, #700a0d);
  z-index: -1;
  box-shadow: inset 1px 1px 2px rgba(255,255,255,0.08), 1px 2px 3px rgba(0,0,0,0.4);
}
.verified-seal:hover { transform: scale(1.12) rotate(-4deg); }
.verified-seal[data-size="sm"] { width: 14px; height: 14px; font-size: 9px; }
.verified-seal[data-size="md"] { width: 18px; height: 18px; font-size: 11px; }
.verified-seal[data-size="lg"] { width: 26px; height: 26px; font-size: 16px; }

/* ════════════════════════════════════════════════════════════════
   PROOF CARDS — premium STFX-inspired surface used by trade, receipt,
   and axiom messages. Variants are tinted via --pc (proof color) and
   slot different content but share the dark-glass + radial-glow +
   circuit aesthetic.
   ════════════════════════════════════════════════════════════════ */
.proof-card{
  position:relative;
  width:340px;
  max-width:100%;
  padding:16px 16px 14px;
  margin-top:2px;
  border-radius:18px;
  background:
    radial-gradient(120% 80% at 95% 50%, color-mix(in srgb, var(--pc) 22%, transparent) 0%, transparent 55%),
    linear-gradient(160deg, #0d0e10 0%, #0a0b0d 60%, #060708 100%);
  border:1px solid color-mix(in srgb, var(--pc) 28%, rgba(255,255,255,0.05));
  box-shadow:
    0 18px 40px rgba(0,0,0,0.55),
    0 0 0 1px rgba(0,0,0,0.4),
    inset 0 1px 0 rgba(255,255,255,0.06),
    inset 0 0 30px color-mix(in srgb, var(--pc) 10%, transparent);
  overflow:hidden;
  isolation:isolate;
  color:#fff;
}
/* Circuit-lattice overlay — subtle SVG mesh radiating from the right */
.proof-card::before{
  content:'';
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 120' fill='none' stroke='white' stroke-width='0.4' opacity='0.7'><path d='M200 10 L150 10 L140 25 L120 25 M200 35 L160 35 L150 50 L130 50 M200 60 L170 60 L160 75 L140 75 M200 85 L160 85 L150 100 L130 100 M200 110 L150 110 L140 95 L120 95'/><circle cx='120' cy='25' r='1.2' fill='white'/><circle cx='130' cy='50' r='1.2' fill='white'/><circle cx='140' cy='75' r='1.2' fill='white'/><circle cx='130' cy='100' r='1.2' fill='white'/><circle cx='120' cy='95' r='1.2' fill='white'/></svg>");
  background-size:cover;
  background-position:right center;
  background-repeat:no-repeat;
  opacity:0.18;
  mix-blend-mode:screen;
  pointer-events:none;
  z-index:0;
}
/* Soft glow halo bottom-right */
.proof-card::after{
  content:'';
  position:absolute;
  right:-40px; bottom:-60px;
  width:200px; height:200px;
  background:radial-gradient(circle, color-mix(in srgb, var(--pc) 38%, transparent) 0%, transparent 70%);
  pointer-events:none;
  z-index:0;
  filter:blur(14px);
}
.proof-card > *{ position:relative; z-index:1; }

/* Header row: source/asset icon + ticker/source name + verified seal */
.proof-card .pc-head{
  display:flex; align-items:center; gap:10px;
  margin-bottom:14px;
}
.proof-card .pc-icon{
  width:28px; height:28px;
  border-radius:8px;
  display:flex; align-items:center; justify-content:center;
  background:color-mix(in srgb, var(--pc) 18%, rgba(255,255,255,0.04));
  color:var(--pc);
  font-weight:900; font-size:14px;
  flex-shrink:0;
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--pc) 40%, transparent);
}
.proof-card .pc-icon svg{ width:16px; height:16px; }
.proof-card .pc-title{
  font-size:16px; font-weight:900; letter-spacing:-0.3px;
  color:#fff;
  flex:1; min-width:0;
}
.proof-card .pc-head .verified-seal{ flex-shrink:0; }

/* Sender / trader row */
.proof-card .pc-author{
  display:flex; align-items:center; gap:8px;
  padding:8px 10px;
  margin-bottom:10px;
  background:rgba(0,0,0,0.35);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:10px;
}
.proof-card .pc-author-avatar{
  width:22px; height:22px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:800; color:#fff;
  flex-shrink:0;
}
.proof-card .pc-author-name{ font-size:13px; font-weight:700; color:#fff; }
.proof-card .pc-author-role{ font-size:10px; color:var(--text-lo); margin-left:2px; }
.proof-card .pc-author-tag{
  margin-left:auto;
  padding:3px 8px;
  font-size:9px; font-weight:800; letter-spacing:0.6px;
  background:color-mix(in srgb, var(--pc) 18%, transparent);
  color:var(--pc);
  border:1px solid color-mix(in srgb, var(--pc) 35%, transparent);
  border-radius:999px;
  text-transform:uppercase;
}

/* Chip row (LONG · BTC · 10x or MRR · Recurring) */
.proof-card .pc-chips{ display:flex; gap:6px; flex-wrap:wrap; margin-bottom:12px; }
.proof-card .pc-chip{
  display:inline-flex; align-items:center; gap:5px;
  padding:4px 9px;
  font-size:10px; font-weight:800; letter-spacing:0.5px;
  background:rgba(255,255,255,0.04);
  border:1px solid rgba(255,255,255,0.08);
  border-radius:6px;
  color:var(--text-mid);
  text-transform:uppercase;
}
.proof-card .pc-chip.long  { color:#39FF14; border-color:rgba(57,255,20,0.25); background:rgba(57,255,20,0.06); }
.proof-card .pc-chip.short { color:#ef4444; border-color:rgba(239,68,68,0.25); background:rgba(239,68,68,0.06); }
.proof-card .pc-chip.lev   { color:var(--pc); border-color:color-mix(in srgb, var(--pc) 35%, transparent); background:color-mix(in srgb, var(--pc) 10%, transparent); }

/* Big number block */
.proof-card .pc-headline-label{
  font-size:10px; font-weight:700; letter-spacing:1.2px;
  text-transform:uppercase;
  color:var(--text-lo);
  margin-bottom:2px;
}
.proof-card .pc-headline{
  display:flex; align-items:baseline; gap:8px;
  margin-bottom:14px;
  font-feature-settings:'tnum';
}
.proof-card .pc-headline-num{
  font-size:30px; font-weight:900; letter-spacing:-1px;
  line-height:1;
  text-shadow:0 0 24px color-mix(in srgb, var(--pc) 40%, transparent);
}
.proof-card .pc-headline-num.positive{ color:#39FF14; }
.proof-card .pc-headline-num.negative{ color:#ef4444; }
.proof-card .pc-headline-pct{
  font-size:14px; font-weight:800;
  font-family:var(--font-mono, monospace);
}
.proof-card .pc-headline-pct.positive{ color:#39FF14; }
.proof-card .pc-headline-pct.negative{ color:#ef4444; }

/* Stat grid (entry/exit, mtd/source, etc.) */
.proof-card .pc-stats{
  display:grid; grid-template-columns:1fr 1fr 1fr;
  gap:1px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.06);
  border-radius:10px;
  overflow:hidden;
  margin-bottom:12px;
}
.proof-card .pc-stat{
  padding:8px 10px;
  background:rgba(0,0,0,0.45);
}
.proof-card .pc-stat-label{
  font-size:9px; font-weight:800; letter-spacing:1px;
  color:var(--text-lo);
  text-transform:uppercase;
  margin-bottom:3px;
}
.proof-card .pc-stat-value{
  font-size:13px; font-weight:800; color:#fff;
  font-family:var(--font-mono, monospace);
  line-height:1.1;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}

/* Footer: verification pill + CTA */
.proof-card .pc-foot{
  display:flex; align-items:center; gap:8px;
}
.proof-card .pc-verify{
  display:inline-flex; align-items:center; gap:6px;
  padding:5px 10px 5px 6px;
  font-size:10px; font-weight:800; letter-spacing:0.5px;
  background:rgba(0,0,0,0.45);
  border:1px solid rgba(255,255,255,0.1);
  border-radius:999px;
  color:var(--text-mid);
  text-transform:uppercase;
}
.proof-card .pc-verify .verified-seal{ transform:scale(0.95); }
.proof-card .pc-cta{
  margin-left:auto;
  padding:8px 14px;
  font-size:11px; font-weight:800; letter-spacing:0.8px;
  background:color-mix(in srgb, var(--pc) 16%, transparent);
  border:1px solid color-mix(in srgb, var(--pc) 45%, transparent);
  color:var(--pc);
  border-radius:8px;
  cursor:pointer;
  text-transform:uppercase;
  transition:all 180ms ease-out;
  display:inline-flex; align-items:center; gap:6px;
}
.proof-card .pc-cta:hover{
  background:color-mix(in srgb, var(--pc) 28%, transparent);
  border-color:var(--pc);
  color:#fff;
  box-shadow:0 6px 18px color-mix(in srgb, var(--pc) 32%, transparent);
  transform:translateY(-1px);
}

/* Trade variant: green for positive, red for negative */
.proof-card-trade.positive{ --pc:#39FF14; }
.proof-card-trade.negative{ --pc:#ef4444; }

/* Receipt variant: source-tinted via inline --pc set per source */
.proof-card-receipt{ /* --pc set inline per source */ }

/* Axiom variant — always Axiom-purple shell, but the token chip + author
   logo are tinted by the per-trade --ax-token color so different memecoins
   read distinctly in a feed. */
.proof-card-axiom .pc-title { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; min-width:0; }
.proof-card-axiom .ax-token-name {
  font-size:11px; font-weight:600; color:var(--text-lo);
  letter-spacing:0; text-transform:none;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  max-width:160px;
}
.proof-card-axiom .ax-axiom-mark {
  color: var(--pc);
  background: color-mix(in srgb, var(--pc) 18%, rgba(255,255,255,0.04));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--pc) 40%, transparent);
}
.proof-card-axiom .ax-token-logo {
  width:22px; height:22px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-weight:900; font-size:11px;
  flex-shrink:0;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 4px 10px color-mix(in srgb, var(--ax-token) 35%, transparent);
}

@media (max-width:768px){
  .proof-card{ width:100%; max-width:340px; }
  .proof-card .pc-stats{ grid-template-columns:1fr 1fr; }
  .proof-card .pc-stats .pc-stat:nth-child(3){ grid-column:1/-1; }
}

/* ════════════════════════════════════════════════════════════════
   v8 — Dashboard panel (Profile main tab)
   ════════════════════════════════════════════════════════════════ */
.v8-dashboard-panel {
  margin: 18px 0 24px;
  padding: 18px;
  background: rgba(20,20,24,0.4);
  border: 1px solid rgba(255,255,255,0.06);
  border-radius: 14px;
  backdrop-filter: blur(18px);
}
.v8-dashboard-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.v8-dashboard-eyebrow { font-size: 10px; font-weight: 800; letter-spacing: 2px; color: var(--text-lo); text-transform: uppercase; }
.v8-dashboard-sub { font-size: 11px; color: var(--text-lo); margin-top: 4px; }
.v8-connect-rows { display: flex; flex-direction: column; gap: 8px; }
.v8-connect-row {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border-card, rgba(255,255,255,0.08));
  border-radius: 10px;
  transition: border-color 180ms ease-out, background 180ms ease-out;
}
.v8-connect-row:hover { border-color: rgba(255,255,255,0.14); background: rgba(255,255,255,0.04); }
.v8-connect-row .v8-cr-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--rc) 18%, transparent);
  color: var(--rc);
  flex-shrink: 0;
}
.v8-connect-row .v8-cr-icon svg { width: 18px; height: 18px; }
.v8-connect-row .v8-cr-body { flex: 1; min-width: 0; }
.v8-connect-row .v8-cr-name { font-size: 13px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 6px; }
.v8-connect-row .v8-cr-status { font-size: 11px; color: var(--text-lo); margin-top: 2px; line-height: 1.3; }
.v8-connect-row .v8-cr-status.connected { color: #39FF14; }
.v8-connect-row .v8-cr-action {
  padding: 6px 14px;
  font-size: 11px; font-weight: 800; letter-spacing: 0.4px;
  background: rgba(255, 255, 255,0.1);
  color: #FFFFFF;
  border: 1px solid rgba(255, 255, 255,0.3);
  border-radius: 999px;
  cursor: pointer; text-transform: uppercase;
  transition: all 180ms ease-out;
  flex-shrink: 0;
}
.v8-connect-row .v8-cr-action:hover { background: rgba(255, 255, 255,0.18); border-color: #FFFFFF; }
.v8-connect-row .v8-cr-action.is-connected {
  background: rgba(57,255,20,0.08);
  color: #39FF14;
  border-color: rgba(57,255,20,0.25);
  cursor: pointer;
}
.v8-connect-row .v8-cr-action.is-connected:hover {
  background: rgba(57,255,20,0.16);
  border-color: rgba(57,255,20,0.45);
}

/* Manage modal actions (Refresh / Disconnect rows) */
.v8-manage-actions { display: flex; flex-direction: column; gap: 8px; }
.v8-manage-actions .v8-btn-ghost {
  text-align: left;
  border-radius: 10px;
  padding: 12px 14px;
  font-size: 13px;
}
.v8-manage-actions .v8-btn-danger {
  color: #ef4444;
  border-color: rgba(239,68,68,0.3);
  background: rgba(239,68,68,0.05);
}
.v8-manage-actions .v8-btn-danger:hover {
  background: rgba(239,68,68,0.12);
  border-color: rgba(239,68,68,0.5);
  color: #fff;
}

/* ════════════════════════════════════════════════════════════════
   v8 — Modal system (lightweight, self-contained)
   ════════════════════════════════════════════════════════════════ */
.v8-modal-root { position: fixed; inset: 0; z-index: 9000; pointer-events: none; }
.v8-modal-root.open { pointer-events: auto; }
.v8-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0.55);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  animation: v8FadeIn 220ms ease-out forwards;
}
@keyframes v8FadeIn { from { opacity: 0; } to { opacity: 1; } }
.v8-modal-card {
  width: 100%; max-width: 520px;
  background: rgba(20,20,24,0.92);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 18px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.1), 0 32px 80px rgba(0,0,0,0.7);
  backdrop-filter: blur(28px);
  overflow: hidden;
  animation: v8ModalIn 320ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
@keyframes v8ModalIn { from { opacity: 0; transform: scale(0.96) translateY(8px); } to { opacity: 1; transform: scale(1) translateY(0); } }
.v8-modal-head {
  display: flex; align-items: flex-start; justify-content: space-between;
  padding: 18px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.v8-modal-title { font-size: 16px; font-weight: 800; color: #fff; }
.v8-modal-close {
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  color: var(--text-mid);
  font-size: 18px; line-height: 1;
  cursor: pointer; border: none;
  transition: all 180ms ease-out;
}
.v8-modal-close:hover { background: rgba(255,255,255,0.12); color: #fff; transform: rotate(90deg); }
.v8-modal-body { padding: 20px; }
.v8-modal-blurb { font-size: 12px; color: var(--text-lo); margin: 0 0 14px; line-height: 1.5; }
.v8-modal-foot {
  display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 20px;
  border-top: 1px solid rgba(255,255,255,0.06);
  background: rgba(0,0,0,0.2);
}
.v8-btn-primary {
  padding: 10px 20px;
  font-size: 13px; font-weight: 700;
  background: linear-gradient(135deg, #FFFFFF 0%, #E0E0E4 100%);
  color: #fff;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(255, 255, 255,0.4);
}
.v8-btn-primary:hover { box-shadow: 0 6px 22px rgba(255, 255, 255,0.55); }
.v8-btn-ghost {
  padding: 10px 20px;
  font-size: 13px; font-weight: 600;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  color: var(--text-mid);
  border-radius: 999px;
  cursor: pointer;
}
.v8-btn-ghost:hover { color: #fff; border-color: rgba(255,255,255,0.16); background: rgba(255,255,255,0.06); }

/* Connect modal — source intro card */
.v8-source-intro {
  display: flex; align-items: center; gap: 12px;
  padding: 14px;
  background: linear-gradient(160deg, color-mix(in srgb, var(--rc) 14%, transparent), rgba(20,20,24,0.55));
  border: 1px solid color-mix(in srgb, var(--rc) 30%, transparent);
  border-radius: 12px;
  margin-bottom: 14px;
}
.v8-source-intro .v8-source-icon {
  width: 40px; height: 40px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--rc) 22%, transparent);
  color: var(--rc);
  flex-shrink: 0;
}
.v8-source-intro .v8-source-icon svg { width: 22px; height: 22px; }
.v8-source-intro .v8-source-name { font-size: 14px; font-weight: 800; color: #fff; }
.v8-source-intro .v8-source-sub { font-size: 11px; color: var(--text-lo); margin-top: 2px; }
.v8-bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.v8-bullets li {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 12px; color: var(--text-mid); line-height: 1.45;
}
.v8-bullets li::before { content: '✓'; color: #39FF14; font-weight: 800; flex-shrink: 0; }

/* Attach popover (Receipt / Axiom tiles) */
.v8-attach-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.v8-attach-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 16px;
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 12px;
  cursor: pointer; text-align: left;
  transition: all 180ms ease-out;
  color: #fff;
}
.v8-attach-tile:hover { border-color: rgba(255, 255, 255,0.35); background: rgba(255, 255, 255,0.05); transform: translateY(-2px); }
.v8-attach-emoji { font-size: 22px; line-height: 1; }
.v8-attach-label { font-size: 14px; font-weight: 800; }
.v8-attach-desc { font-size: 11px; color: var(--text-lo); line-height: 1.35; }
@media (max-width: 480px){ .v8-attach-grid { grid-template-columns: 1fr; } }

/* Picker rows (receipts + axiom) */
.v8-picker-list { display: flex; flex-direction: column; gap: 8px; }
.v8-picker-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border-card, rgba(255,255,255,0.08));
  border-radius: 10px;
  cursor: pointer;
  transition: all 180ms ease-out;
}
.v8-picker-row:hover {
  border-color: color-mix(in srgb, var(--rc) 55%, transparent);
  background: color-mix(in srgb, var(--rc) 8%, rgba(255,255,255,0.04));
  transform: translateY(-1px);
}
.v8-picker-row .v8-picker-icon {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--rc) 18%, transparent);
  color: var(--rc);
  flex-shrink: 0;
}
.v8-picker-row .v8-picker-icon svg { width: 18px; height: 18px; }
.v8-picker-row .v8-picker-info { flex: 1; min-width: 0; }
.v8-picker-source { font-size: 11px; font-weight: 800; letter-spacing: 0.6px; color: var(--rc); text-transform: uppercase; }
.v8-picker-value { font-size: 14px; font-weight: 800; color: #fff; margin-top: 2px; }
.v8-picker-value .v8-picker-unit { font-size: 11px; font-weight: 600; color: var(--text-mid); margin-left: 2px; }
.v8-picker-label { font-size: 11px; color: var(--text-lo); margin-top: 1px; }
.v8-picker-empty {
  padding: 24px 16px;
  text-align: center;
  font-size: 13px; color: var(--text-lo);
  background: rgba(255,255,255,0.02);
  border: 1px dashed rgba(255,255,255,0.08);
  border-radius: 10px;
  line-height: 1.55;
}

/* ════════════════════════════════════════════════════════════════
   v8 — Toast (lightweight)
   ════════════════════════════════════════════════════════════════ */
.v8-toast {
  position: fixed;
  top: 80px; right: 20px;
  z-index: 9999;
  pointer-events: auto;
  padding: 12px 18px;
  background: rgba(20,20,24,0.92);
  backdrop-filter: blur(24px);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 999px;
  box-shadow: 0 14px 40px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.1);
  color: #fff;
  font-size: 13px; font-weight: 600;
  opacity: 0;
  transform: translateY(-14px);
  transition: opacity 280ms ease-out, transform 280ms cubic-bezier(0.2, 0.8, 0.2, 1);
}
.v8-toast.in { opacity: 1; transform: translateY(0); }
.v8-toast.out { opacity: 0; transform: translateY(-8px); }
.v8-toast-ok { border-color: rgba(57,255,20,0.3); }
.v8-toast-info { border-color: rgba(255,255,255,0.12); }

/* ════════════════════════════════════════════════════════════════
   v8 — Interactivity polish
   Click feedback on every clickable surface, shake animation for
   locked items, and a "preview pulsing" effect on the profile
   preview chip while a title-card is being hover-previewed.
   ════════════════════════════════════════════════════════════════ */

/* Universal click-feedback — subtle scale-down, fast snap-back. */
.title-card, .emblem-card, .profile-tile,
.v8-attach-tile, .v8-connect-row, .v8-picker-row,
.v8-cr-action, .v8-btn-primary, .v8-btn-ghost, .v8-modal-close {
  transition: transform 120ms ease-out, opacity 120ms ease-out,
              border-color 180ms ease-out, background 180ms ease-out,
              box-shadow 180ms ease-out;
}
.title-card:active, .emblem-card:active,
.profile-tile:active,
.v8-attach-tile:active, .v8-connect-row:active, .v8-picker-row:active,
.v8-cr-action:active, .v8-btn-primary:active, .v8-btn-ghost:active {
  transform: scale(0.97);
}

/* Locked title/emblem visual cue — slightly muted + lock cursor */
.title-card[onclick*="selectTitle"]:not(.selected) .title-cost.level,
.title-card[onclick*="selectTitle"]:not(.selected) .title-cost.winr-plus,
.emblem-card .emblem-cost.level,
.emblem-card .emblem-cost.winr-plus {
  /* Visual hint that these aren't equipped-ready */
}
/* Shake animation triggered by JS (.v8-shake class added then removed) */
@keyframes v8Shake {
  0%   { transform: translateX(0); }
  15%  { transform: translateX(-6px) rotate(-0.5deg); }
  30%  { transform: translateX(5px)  rotate(0.5deg); }
  45%  { transform: translateX(-4px) rotate(-0.4deg); }
  60%  { transform: translateX(3px)  rotate(0.3deg); }
  75%  { transform: translateX(-2px); }
  100% { transform: translateX(0); }
}
.v8-shake {
  animation: v8Shake 420ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}
.title-card.v8-shake { box-shadow: 0 0 0 2px rgba(239,68,68,0.4), 0 12px 28px rgba(239,68,68,0.18); }
.emblem-card.v8-shake { box-shadow: 0 0 0 2px rgba(239,68,68,0.4), 0 12px 28px rgba(239,68,68,0.18); }

/* Hover-preview state on the profile preview card */
.profile-preview.v8-preview-active {
  box-shadow: 0 0 0 1px rgba(255, 255, 255,0.45), 0 18px 44px rgba(255, 255, 255,0.18);
  transition: box-shadow 220ms ease-out;
}
.profile-preview .preview-bg { transition: background-image 280ms ease-out, opacity 280ms ease-out; }
.preview-title-chip.v8-preview-pulsing {
  background: rgba(255, 255, 255,0.22);
  color: #fff;
  border: 1px solid rgba(255, 255, 255,0.45);
  animation: v8PreviewPulse 1.6s ease-in-out infinite;
}
@keyframes v8PreviewPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 255, 255,0.4); }
  50%      { box-shadow: 0 0 14px 0 rgba(255, 255, 255,0.55); }
}

/* Title cards lift more on hover (was subtle; bump it) */
.title-card { cursor: pointer; will-change: transform; }
.title-card:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 16px 36px rgba(0,0,0,0.55), 0 0 16px rgba(255, 255, 255,0.1);
}
.emblem-card { cursor: pointer; will-change: transform; }
.emblem-card:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 16px 36px rgba(0,0,0,0.55);
}

/* Profile tiles get the same treatment */
.profile-tile { cursor: pointer; will-change: transform; }
.profile-tile:hover {
  transform: translateY(-2px);
  border-color: rgba(255, 255, 255,0.35);
  box-shadow: 0 14px 32px rgba(0,0,0,0.5);
}