/* =========================================================================
   chrome/layout/profile.css · WEEK73 (M4 sprint 1 · plan §4 T5)
   ---------------------------------------------------------------------------
   In-game profile modal styling. Mirrors mockups 70 (human, not friend),
   70b (human, friend), 70d (self), 71 (bot) for the 680px desktop card,
   and 72k for the terser phone popup; 73b just reuses the 680px card with
   an iPad-pointer enlarge.

   Discipline (plan §2):
     - Tokens only. No literal 6-digit hex. Every colour resolves to a
       --rd-* token in chrome/tokens.css.
     - Modal lives OUTSIDE the .viewport scale, so sizing uses base rules +
       @media queries — never `[data-layout]` descendant selectors (WEEK66
       modal-sizing lesson).
     - Stat labels = --rd-cream-dim (NOT gold). Section headers (Stats /
       About / Social / Your Profile / Bot Profile / Player Profile) = gold,
       underlined. Tier dot colours = --rd-tier-* tokens. Follow star: grey
       → yellow on .following.
   ========================================================================= */

/* ───── DESKTOP / iPad · 680px 2-column glass card ──────────────────── */

#m-profile .profile-modal {
  background: var(--rd-glass-bg);
  backdrop-filter: blur(22px) saturate(1.1);
  -webkit-backdrop-filter: blur(22px) saturate(1.1);
  border: 1px solid var(--rd-glass-border);
  border-radius: 8px;
  padding: 24px 28px 26px;
  font-family: var(--rd-font-serif);
  color: var(--rd-cream);
  box-shadow: 0 4px 40px rgba(0, 0, 0, 0.6);
  width: 680px;
  max-width: calc(100% - 40px);
  position: relative;
}

#m-profile .profile-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: transparent;
  border: none;
  color: var(--rd-cream-dim);
  font-size: 20px;
  width: 28px;
  height: 28px;
  line-height: 1;
  cursor: pointer;
}
#m-profile .profile-close:hover { color: var(--rd-cream); }

.profile-grid {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 28px;
}

.profile-col {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.profile-col-header {
  font-family: var(--rd-font-body);
  font-size: 10px;
  font-weight: 600;
  color: var(--rd-gold);
  text-transform: uppercase;
  letter-spacing: 2.2px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--rd-line);
}

.profile-avatar {
  width: 200px;
  height: 200px;
  margin: 0 auto;
  border-radius: 8px;
  border: 1px solid var(--rd-gold);
  background: linear-gradient(180deg, var(--rd-dark), var(--rd-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--rd-font-serif);
  font-style: italic;
  font-size: 13px;
  color: var(--rd-cream-dim);
  text-align: center;
  line-height: 1.3;
  box-shadow: 0 0 18px var(--rd-gold-glow);
}

.pf-tagline {
  font-family: var(--rd-font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--rd-cream-dim);
  text-align: center;
  line-height: 1.4;
  padding: 0 4px;
}

.mini-label {
  font-family: var(--rd-font-body);
  font-size: 10px;
  font-weight: 600;
  color: var(--rd-cream-dim);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  margin-bottom: 9px;
  text-align: center;
}

.sportsmanship .timeout-line {
  text-align: center;
  font-family: var(--rd-font-body);
  font-size: 12.5px;
  color: var(--rd-emerald-text);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.sportsmanship .timeout-line .ico { font-size: 14px; }

.tr-row {
  display: flex;
  gap: 9px;
  justify-content: center;
}
.trophy {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--rd-gold);
  background: radial-gradient(circle at 50% 34%, var(--rd-dark), var(--rd-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 0 9px var(--rd-gold-glow);
}
.trophy svg { width: 21px; height: 21px; display: block; fill: var(--rd-gold); }
.trophy.empty {
  border-color: var(--rd-line);
  box-shadow: none;
  opacity: 0.45;
}

/* ───── Name + flag + Follow star (right-col top row) ─────────────────── */

.profile-name-line {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--rd-font-serif);
  font-style: italic;
  font-size: 24px;
  font-weight: 600;
  color: var(--rd-cream);
  letter-spacing: 0.3px;
  line-height: 1;
}
.profile-name-flag {
  width: 28px;
  height: 19px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 2px;
  overflow: hidden;
  line-height: 0;
  flex-shrink: 0;
  background: var(--rd-surface);
}

.follow-star {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-left: auto;
  padding: 4px 10px;
  background: transparent;
  border: 1px solid var(--rd-line-strong);
  border-radius: 999px;
  color: var(--rd-cream-dim);
  font-family: var(--rd-font-body);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  cursor: pointer;
  line-height: 1;
}
.follow-star svg { width: 13px; height: 13px; fill: var(--rd-cream-dim); }
.follow-star.following { color: var(--rd-gold); }
.follow-star.following svg { fill: var(--rd-gold); }
.follow-star[aria-disabled="true"] { cursor: default; }

/* ───── Tier badge · 8-level dot + label ──────────────────────────────── */

.pf-level {
  display: flex;
  align-items: center;
  gap: 10px;
}
.profile-tier {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--rd-dark);
  color: var(--rd-cream);
  font-family: var(--rd-font-body);
  font-style: italic;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  padding: 4px 11px;
  border: 1px solid var(--rd-line-strong);
  border-radius: 2px;
}
.profile-tier::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
  background: var(--rd-cream-dim);
}
/* WEEK74 §4 T1 — heritage tier-dot glow. Every dot gets a soft halo in its
   OWN tier token (DESIGN_SYSTEM_V2.html §10). Supremo / Grandmaster keep
   their gradient fills but the halo switches to the tier's -from token so
   the silver/gold reads at dot scale. Tokens only — no literal rgba. */
.profile-tier.beginner::before     { background: var(--rd-tier-beginner);     box-shadow: 0 0 6px var(--rd-tier-beginner); }
.profile-tier.casual::before       { background: var(--rd-tier-casual);       box-shadow: 0 0 6px var(--rd-tier-casual); }
.profile-tier.intermediate::before { background: var(--rd-tier-intermediate); box-shadow: 0 0 6px var(--rd-tier-intermediate); }
.profile-tier.advanced::before     { background: var(--rd-tier-advanced);     box-shadow: 0 0 6px var(--rd-tier-advanced); }
.profile-tier.expert::before       { background: var(--rd-tier-expert);       box-shadow: 0 0 6px var(--rd-tier-expert); }
.profile-tier.worldclass::before   { background: var(--rd-tier-world);        box-shadow: 0 0 6px var(--rd-tier-world); }
.profile-tier.supremo::before {
  background: linear-gradient(135deg, var(--rd-tier-supremo-from), var(--rd-tier-supremo-to));
  box-shadow: 0 0 7px var(--rd-tier-supremo-from);
}
.profile-tier.grandmaster::before {
  background: linear-gradient(135deg, var(--rd-tier-gm-from), var(--rd-tier-gm-to));
  box-shadow: 0 0 9px var(--rd-tier-gm-from);
}

/* ───── 6-stat grid ───────────────────────────────────────────────────── */

.profile-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 8px;
  row-gap: 2px;
}
.stat-pair {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 12px;
  border-radius: 4px;
  background: var(--rd-surface);
}
.stat-lbl {
  font-family: var(--rd-font-body);
  font-size: 11px;
  font-weight: 500;
  color: var(--rd-cream-dim);
  text-transform: uppercase;
  letter-spacing: 0.6px;
}
.stat-val {
  font-family: var(--rd-font-body);
  font-size: 14px;
  font-weight: 700;
  color: var(--rd-cream);
  font-variant-numeric: tabular-nums;
}

/* ───── Bottom block (About / Social) ─────────────────────────────────── */

.about-block, .social-block {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.profile-bio {
  font-family: var(--rd-font-body);
  font-style: italic;
  font-size: 13px;
  line-height: 1.55;
  color: var(--rd-cream-dim);
  text-align: center;
}
.about-links, .social-actions {
  display: flex;
  gap: 24px;
  align-items: center;
}
.profile-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--rd-font-body);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.4px;
  color: var(--rd-gold);
  text-decoration: none;
  padding: 2px 1px;
  border-bottom: 1px solid transparent;
  white-space: nowrap;
}
.profile-link:hover { color: var(--rd-cream); border-bottom-color: var(--rd-line-strong); }
.profile-link .ext { font-size: 11px; opacity: 0.85; }
.profile-link[aria-disabled="true"] {
  color: var(--rd-cream-dim);
  cursor: default;
  opacity: 0.6;
  pointer-events: none;
}

/* ───── Friend buttons (Become / Remove) ──────────────────────────────── */

.friend-btn {
  font-family: var(--rd-font-action, var(--rd-font-body));
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  padding: 9px 18px;
  border-radius: 6px;
  cursor: pointer;
  background: var(--rd-emerald-1);
  color: var(--rd-cream);
  border: 1px solid var(--rd-emerald-1);
  transition: background 140ms ease, border-color 140ms ease, color 140ms ease;
}
.friend-btn:hover { background: var(--rd-emerald-2); }
.friend-btn.is-friend {
  background: transparent;
  color: var(--rd-cream-dim);
  border-color: var(--rd-line-strong);
}
.friend-btn.is-friend:hover { color: var(--rd-cream); border-color: var(--rd-gold-dim); }
.friend-btn[aria-disabled="true"] { cursor: default; }

/* ───── iPad enlarge · same 680px card, more headroom ─────────────────── */
@media (pointer: coarse) and (min-height: 700px) {
  #m-profile .profile-modal {
    width: 720px;
    padding: 28px 32px 30px;
  }
  .profile-avatar { width: 220px; height: 220px; }
  .profile-name-line { font-size: 26px; }
  .stat-val { font-size: 15px; }
}

/* ───── PHONE · terser popup (mockup 72k) ────────────────────────────── */

#m-profile-phone .pp {
  width: 498px;
  max-width: calc(100% - 24px);
  max-height: 100%;
  background: var(--rd-glass-bg);
  backdrop-filter: blur(22px) saturate(1.1);
  -webkit-backdrop-filter: blur(22px) saturate(1.1);
  border: 1px solid var(--rd-glass-border);
  border-radius: 9px;
  box-shadow: 0 4px 28px rgba(0, 0, 0, 0.6);
  padding: 13px 16px 14px;
  position: relative;
  font-family: var(--rd-font-serif);
  color: var(--rd-cream);
}
#m-profile-phone .pp-close {
  position: absolute;
  top: 6px;
  right: 9px;
  background: transparent;
  border: none;
  color: var(--rd-cream-dim);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
}
#m-profile .pp-label,
#m-profile-phone .pp-label {
  font-family: var(--rd-font-body);
  font-size: 9px;
  font-weight: 600;
  color: var(--rd-gold);
  text-transform: uppercase;
  letter-spacing: 1.8px;
  text-align: center;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}
#m-profile .pp-label::before, #m-profile .pp-label::after,
#m-profile-phone .pp-label::before, #m-profile-phone .pp-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--rd-line);
}
.pp-id { display: flex; align-items: center; gap: 12px; }
.pp-av {
  width: 60px;
  height: 60px;
  flex-shrink: 0;
  border-radius: 7px;
  border: 1px solid var(--rd-gold);
  background: linear-gradient(180deg, var(--rd-dark), var(--rd-dark));
  box-shadow: 0 0 12px var(--rd-gold-glow);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--rd-font-serif);
  font-style: italic;
  font-size: 9px;
  color: var(--rd-cream-dim);
  text-align: center;
  line-height: 1.1;
}
.pp-idr { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.pp-nl { display: flex; align-items: center; gap: 8px; }
.pp-flag {
  width: 24px;
  height: 16px;
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 2px;
  overflow: hidden;
  line-height: 0;
  flex-shrink: 0;
  background: var(--rd-surface);
}
.pp-name {
  font-family: var(--rd-font-serif);
  font-style: italic;
  font-size: 19px;
  font-weight: 600;
  color: var(--rd-cream);
}
.pp-badges { display: flex; align-items: center; gap: 8px; }

/* Phone-popup tier badge stays the same .profile-tier element — smaller. */
#m-profile-phone .profile-tier {
  font-size: 9px;
  letter-spacing: 1.2px;
  padding: 3px 9px;
}
#m-profile-phone .profile-tier::before { width: 6px; height: 6px; }
/* WEEK74 §4 T1 — phone-popup glow, slightly smaller blur to suit the 6px dot. */
#m-profile-phone .profile-tier.beginner::before     { box-shadow: 0 0 4px var(--rd-tier-beginner); }
#m-profile-phone .profile-tier.casual::before       { box-shadow: 0 0 4px var(--rd-tier-casual); }
#m-profile-phone .profile-tier.intermediate::before { box-shadow: 0 0 4px var(--rd-tier-intermediate); }
#m-profile-phone .profile-tier.advanced::before     { box-shadow: 0 0 4px var(--rd-tier-advanced); }
#m-profile-phone .profile-tier.expert::before       { box-shadow: 0 0 4px var(--rd-tier-expert); }
#m-profile-phone .profile-tier.worldclass::before   { box-shadow: 0 0 4px var(--rd-tier-world); }
#m-profile-phone .profile-tier.supremo::before      { box-shadow: 0 0 5px var(--rd-tier-supremo-from); }
#m-profile-phone .profile-tier.grandmaster::before  { box-shadow: 0 0 5px var(--rd-tier-gm-from); }

.pp-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 11px;
}
.pp-st {
  background: var(--rd-surface);
  border: 1px solid var(--rd-line);
  border-radius: 5px;
  padding: 6px 4px;
  text-align: center;
}
.pp-st .v {
  font-family: var(--rd-font-body);
  font-size: 15px;
  font-weight: 700;
  color: var(--rd-cream);
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.pp-st .l {
  font-family: var(--rd-font-body);
  font-size: 8px;
  font-weight: 600;
  color: var(--rd-cream-dim);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-top: 4px;
}
.pp-foot {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 11px;
  padding-top: 10px;
  border-top: 1px solid var(--rd-line);
}
.pp-tro { display: flex; align-items: center; gap: 7px; }
.pp-tro .l {
  font-family: var(--rd-font-body);
  font-size: 8px;
  font-weight: 600;
  color: var(--rd-cream-dim);
  text-transform: uppercase;
  letter-spacing: 1px;
}
#m-profile-phone .trophy { width: 26px; height: 26px; }
#m-profile-phone .trophy svg { width: 14px; height: 14px; }

/* Coarse-pointer + short viewport (phone) → compact the desktop modal off
   the page so it never visibly competes with the phone popup when both
   stylesheets are live. The phone popup is the only profile UI shown.
   The 700px floor in the iPad rule above keeps the desktop card alive on
   iPad (≥ 700px viewport height). */
@media (pointer: coarse) and (max-height: 699px) {
  #m-profile .profile-modal {
    width: calc(100% - 24px);
    padding: 18px 18px 20px;
  }
}