/* ════════════════════════════════════════════════════════════
   REFINE.CSS — Beta v2.0.2 UI Polish & Profile Refinement
   Loads last so it can calmly refine earlier layers.
   Scope: palette already aligned in base.css. Here we unify the
   main-menu buttons, go text-first, add placeholder artwork, and
   rebuild the profile hierarchy. No gameplay / backend changes.
════════════════════════════════════════════════════════════ */

/* ── 1. HOME BUTTONS — superseded by css/welcome-ui.css (v2.0.5) ─ */
#screen-home .home-primary-actions { gap: var(--space-3); }

/* ── 2. SECONDARY NAV — superseded by css/welcome-ui.css (v2.0.5) ─ */

/* ── 3. PLACEHOLDER ARTWORK — relic frame + silhouette ────────── */
.relic-frame {
  position: relative;
  display: grid;
  place-items: center;
  width: 96px;
  height: 96px;
  border-radius: 18px;
  background: radial-gradient(circle at 50% 34%, rgba(106, 76, 255, 0.30), rgba(13, 11, 20, 0.96) 72%);
  border: 1px solid var(--abyss-gold);
  box-shadow:
    inset 0 0 0 1px rgba(232, 217, 166, 0.22),
    inset 0 0 18px rgba(106, 76, 255, 0.16),
    0 8px 22px rgba(7, 5, 18, 0.5);
}
.relic-frame::after {
  content: "";
  position: absolute;
  inset: 5px;
  border-radius: 13px;
  border: 1px solid rgba(232, 217, 166, 0.16);
  pointer-events: none;
}
.relic-frame--lg { width: 112px; height: 112px; border-radius: 20px; }
.relic-frame--sm { width: 60px; height: 60px; border-radius: 13px; }
.relic-frame--sm::after { inset: 4px; border-radius: 9px; }

.art-silhouette {
  width: 64%;
  height: 64%;
  fill: currentColor;
  stroke: none;
  color: #d2c6f2;
  filter: drop-shadow(0 2px 8px rgba(106, 76, 255, 0.45));
}

/* ── 4. HOME HERO IDENTITY (rebuilt hierarchy) ─────────────────
   Avatar → Name → Username → Rank/Level → XP → Favourite → Stats */
.idv2-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--space-2);
  width: 100%;
}
.idv2-art {
  position: relative;
  margin-bottom: var(--space-1);
}
/* idv2-status text badge removed — presence dot on avatar (profile-hero.css) */
.idv2-name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-2xl);
  line-height: 1.1;
  color: var(--abyss-white);
  margin-top: var(--space-3);
}
.idv2-username {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
}
.idv2-rank {
  font-family: var(--font-display);
  font-size: var(--text-sm);
  letter-spacing: 0.05em;
  color: var(--abyss-gold-br);
}
.idv2-xp {
  width: 100%;
  max-width: 280px;
  height: 8px;
  margin-top: var(--space-1);
  border-radius: 999px;
  background: rgba(13, 11, 20, 0.8);
  border: 1px solid rgba(201, 162, 75, 0.25);
  overflow: hidden;
}
.idv2-xp-fill {
  height: 100%;
  border-radius: inherit;
  background: linear-gradient(90deg, #C9A24B, #E8D9A6);
  box-shadow: 0 0 10px rgba(201, 162, 75, 0.5);
}
.idv2-xp-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.06em;
  color: var(--color-text-secondary);
}
.idv2-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-2);
  width: 100%;
  max-width: 320px;
  margin-top: var(--space-3);
  padding-top: var(--space-3);
  border-top: 1px solid rgba(201, 162, 75, 0.16);
}
.idv2-stat { display: flex; flex-direction: column; gap: 2px; }
.idv2-stat-v { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); color: var(--abyss-white); }
.idv2-stat-l { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); }
.idv2-fav {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(43, 36, 64, 0.5);
  border: 1px solid rgba(201, 162, 75, 0.22);
}
.idv2-fav-l { font-family: var(--font-mono); font-size: 0.58rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); }
.idv2-fav-v { font-family: var(--font-display); font-size: var(--text-sm); color: var(--abyss-gold-br); }

/* guest state */
.idv2-hero--guest .idv2-name { margin-top: var(--space-3); }

/* ── 5. PROFILES IDENTITY CARD (rebuilt) ─────────────────────── */
.idcard {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-6) var(--space-5);
  border-radius: 20px;
  background: linear-gradient(160deg, rgba(43, 36, 64, 0.55), rgba(27, 22, 38, 0.92));
  border: 1px solid rgba(201, 162, 75, 0.24);
  box-shadow: var(--shadow-lifted);
}
.idcard-top { display: flex; align-items: center; gap: var(--space-4); }
.idcard-id { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.idcard-name {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--text-2xl);
  line-height: 1.1;
  color: var(--abyss-white);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.idcard-username { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.08em; color: var(--color-text-muted); }
.idcard-rank { font-family: var(--font-display); font-size: var(--text-sm); letter-spacing: 0.05em; color: var(--abyss-gold-br); }
.idcard-xp { height: 10px; border-radius: 999px; background: rgba(13, 11, 20, 0.8); border: 1px solid rgba(201, 162, 75, 0.25); overflow: hidden; }
.idcard-xp-fill { height: 100%; border-radius: inherit; background: linear-gradient(90deg, #C9A24B, #E8D9A6); box-shadow: 0 0 10px rgba(201, 162, 75, 0.5); }
.idcard-xp-label { font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.06em; color: var(--color-text-secondary); margin-top: calc(-1 * var(--space-2)); }

.idcard-favs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3); }
.idcard-fav {
  display: flex; flex-direction: column; gap: 4px; align-items: center; text-align: center;
  padding: var(--space-3) var(--space-2);
  border-radius: 12px;
  background: rgba(13, 11, 20, 0.4);
  border: 1px solid rgba(201, 162, 75, 0.14);
}
.idcard-fav-l { font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); }
.idcard-fav-v { font-family: var(--font-display); font-size: var(--text-sm); color: var(--abyss-white); line-height: 1.2; }

.idcard-stats-block { display: flex; flex-direction: column; gap: var(--space-3); }
.idcard-stats-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--text-xs);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
}
.idcard-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-3) var(--space-2); }
.idcard-stat { display: flex; flex-direction: column; gap: 2px; align-items: center; }
.idcard-stat-v { font-family: var(--font-display); font-weight: 700; font-size: var(--text-lg); color: var(--abyss-white); }
.idcard-stat-l { font-family: var(--font-mono); font-size: 0.56rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); }

/* ── 6. COLLECTIBLE PROFILE CARDS ─────────────────────────────── */
.profile-card.profile-card--premium {
  padding: var(--space-4);
  border-radius: 18px;
  border: 1px solid rgba(201, 162, 75, 0.2);
  background: linear-gradient(160deg, rgba(43, 36, 64, 0.45), rgba(27, 22, 38, 0.9));
  box-shadow: var(--shadow-soft);
}
.profile-card.profile-card--premium.profile-card--active {
  border-color: rgba(201, 162, 75, 0.55);
  box-shadow: var(--shadow-soft), var(--glow-gold-soft);
}
.profile-card .profile-card-hero { display: flex; align-items: center; gap: var(--space-3); }
.profile-card .pc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin-top: var(--space-1); }
.profile-card .pc-stat { display: flex; flex-direction: column; gap: 1px; align-items: center; text-align: center; }
.profile-card .pc-stat-v { font-family: var(--font-display); font-weight: 700; font-size: var(--text-base); color: var(--abyss-white); }
.profile-card .pc-stat-l { font-family: var(--font-mono); font-size: 0.54rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-text-muted); }
.profile-card .profile-meta-row { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-text-secondary); }

/* ── 7. TYPOGRAPHY / SPACING POLISH ───────────────────────────── */
.screen-header h2 { font-weight: 900; letter-spacing: 0.04em; }
#screen-profiles .profiles-actions { gap: var(--space-3); margin: var(--space-5) 0; }
#screen-profiles .stats-section-title {
  font-family: var(--font-display);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-size: var(--text-xs);
  color: var(--color-text-secondary);
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .idv2-art, .relic-frame, .abyss-action { transition: none; }
}