/* ==========================================================================
   Reelhaven profile page (profile.html only; loaded after lobby.css).
   Mobile-first: base styles target ~360px, wider layouts unlock upward.
   Sections: 1 tokens · 2 page layout · 3 hero · 4 stat cards ·
   5 most-played list · 6 history · 7 account security forms · 8 guest card ·
   9 focus, motion, safe-area.
   ========================================================================== */

/* ---- 1. Design tokens ---- */
:root {
  --pf-primary: #0B3D2E;        /* brand emerald */
  --pf-accent: #D9B86C;         /* light accent (borders, active states) */
  --pf-rose: #9C7A3C;           /* warm accent (avatar gradient, errors) */
  --pf-ink: #F2EDE3;            /* primary text on dark */
  --pf-muted: #8A9095;          /* secondary text — AA on card surfaces */
  --pf-card: #0F1316;           /* card surface */
  --pf-raised: #161C20;         /* raised surface (inputs, list rows) */
  --pf-line: rgba(217, 184, 108, .22);
  --pf-line-strong: rgba(217, 184, 108, .45);
  --pf-radius-sm: 8px;
  --pf-radius-md: 14px;
  --pf-radius-lg: 22px;
  --pf-radius-pill: 999px;
  --pf-space-1: 8px;
  --pf-space-2: 12px;
  --pf-space-3: 16px;
  --pf-space-4: 24px;
  --pf-shadow: 0 10px 24px -10px rgba(2, 1, 12, .85), inset 0 1px 0 rgba(242, 237, 227, .07);
  --pf-focus: #F4DC9C;
}

/* ---- 2. Page layout (mobile-first, no horizontal scroll) ---- */
.profile-wrap[hidden], .guest-card[hidden] { display: none !important; }
.profile-wrap {
  max-width: 880px;
  margin: var(--pf-space-4) auto 0;
  padding-inline: max(var(--pf-space-3), env(safe-area-inset-left, 0px)) max(var(--pf-space-3), env(safe-area-inset-right, 0px));
  padding-bottom: max(64px, env(safe-area-inset-bottom, 0px));
  display: grid;
  gap: var(--pf-space-3);
  min-width: 0;
}
.profile-card {
  background: var(--pf-card);
  border: 1px solid var(--pf-line);
  border-radius: var(--pf-radius-lg);
  padding: var(--pf-space-4) var(--pf-space-3);
  box-shadow: var(--pf-shadow);
  min-width: 0;
  overflow-wrap: break-word;
}
.profile-card h2 {
  margin: 0 0 var(--pf-space-2);
  font-size: 22px;
  line-height: 1.25;
  color: var(--pf-ink);
}
.profile-card .muted { color: var(--pf-muted); }
#cashBalance { color: var(--pf-accent); font-variant-numeric: tabular-nums; }
.subhead {
  margin: var(--pf-space-3) 0 var(--pf-space-1);
  font-size: 15px;
  color: var(--pf-muted);
  font-weight: 700;
}

/* ---- 3. Hero: avatar + nickname + badge + logout ---- */
.profile-hero {
  display: flex;
  align-items: center;
  gap: var(--pf-space-3);
  flex-wrap: wrap;
  background:
    radial-gradient(420px 160px at 12% -40%, rgba(11, 61, 46, .55), transparent 70%),
    var(--pf-card);
}
.avatar {
  flex: none;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 24px;
  font-weight: 800;
  color: var(--pf-ink);
  background: linear-gradient(135deg, var(--pf-primary), var(--pf-rose));
  box-shadow: var(--pf-shadow);
}
/* initial letter (set from JS); "?" placeholder until then */
.avatar:empty::after { content: "?"; }
.hero-id { flex: 1 1 160px; min-width: 0; }
.hero-id h2 { margin: 0; overflow-wrap: break-word; }
.account-badge {
  display: inline-block;
  margin-top: 6px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #F4DC9C;
  background: rgba(11, 61, 46, .65);
  border: 1px solid rgba(217, 184, 108, .4);
  border-radius: 6px;
  padding: 2px 8px;
}
.profile-hero #logoutBtn { margin-left: auto; }

/* ---- 4. Stat cards: big number, small label (2 cols to 4) ---- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--pf-space-2);
  margin-top: var(--pf-space-2);
}
.stat-grid .stat {
  background: var(--pf-raised);
  border: 1px solid var(--pf-line);
  border-radius: var(--pf-radius-md);
  padding: var(--pf-space-2) var(--pf-space-3);
  min-width: 0;
}
.stat-grid .stat span {
  display: block;
  font-size: 12px;
  color: var(--pf-muted);
}
.stat-grid .stat b {
  display: block;
  font-size: 22px;
  line-height: 1.2;
  color: var(--pf-ink);
  font-variant-numeric: tabular-nums;
  overflow-wrap: break-word;
}

/* ---- 5. Most played: numbered list ---- */
.toplist {
  list-style: none;
  margin: var(--pf-space-1) 0 0;
  padding: 0;
  display: grid;
  gap: var(--pf-space-1);
  counter-reset: pf-top;
}
.toplist li { min-width: 0; }
.toplist li > a {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 2px var(--pf-space-2);
  padding: var(--pf-space-2) var(--pf-space-3);
  min-height: 44px;
  border: 1px solid var(--pf-line);
  border-radius: var(--pf-radius-md);
  background: var(--pf-raised);
  text-decoration: none;
  color: var(--pf-ink);
  transition: border-color 150ms ease;
}
.toplist li > a:hover { border-color: var(--pf-line-strong); }
.toplist li > a::before {
  counter-increment: pf-top;
  content: counter(pf-top);
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 13px;
  font-weight: 800;
  color: var(--pf-ink);
  background: rgba(11, 61, 46, .65);
  border: 1px solid rgba(217, 184, 108, .4);
}
/* the top-3 get the warm accent */
.toplist li:nth-child(-n+3) > a::before {
  background: linear-gradient(135deg, var(--pf-primary), var(--pf-rose));
}
.toplist li > a > span:first-child {
  flex: 1 1 auto;
  min-width: 0;
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.toplist li > a > span.muted { color: var(--pf-muted); font-size: 13px; flex-basis: 100%; margin-left: 40px; }
@media (min-width: 480px) {
  .toplist li > a > span.muted { flex-basis: auto; margin-left: 0; }
}
li.muted { color: var(--pf-muted); }

/* ---- 6. History: always visible; table becomes a list on phones ---- */
#histDetails summary {
  display: flex;
  align-items: center;
  gap: var(--pf-space-1);
  min-height: 44px;
  cursor: pointer;
  border-radius: var(--pf-radius-sm);
}
#histDetails summary::marker { content: none; }
#histDetails summary::-webkit-details-marker { display: none; }
#histDetails summary::after {
  content: "\25BE";
  margin-left: auto;
  color: var(--pf-accent);
  transition: transform 180ms ease;
}
#histDetails:not([open]) summary::after { transform: rotate(-90deg); }
.details-title { font-size: 19px; font-weight: 800; color: var(--pf-ink); }
#histBody { margin-top: var(--pf-space-1); min-width: 0; }
#histBody .hist-state { color: var(--pf-muted); }
#histBody .hist-more {
  min-height: 44px;
  margin-top: var(--pf-space-2);
  padding: 0 var(--pf-space-3);
  font: inherit;
  font-weight: 700;
  color: var(--pf-ink);
  background: var(--pf-raised);
  border: 1px solid var(--pf-line);
  border-radius: var(--pf-radius-md);
  cursor: pointer;
  transition: border-color 150ms ease;
}
#histBody .hist-more:hover { border-color: var(--pf-line-strong); }
/* desktop: native table; phones: stacked cards with inline labels */
#histBody .hist-wrap { overflow-x: auto; }
@media (max-width: 640px) {
  #histBody .hist-wrap { overflow-x: visible; }
  #histBody table.hist,
  #histBody table.hist tbody,
  #histBody table.hist tr,
  #histBody table.hist td { display: block; }
  #histBody table.hist thead { display: none; }
  #histBody table.hist tr {
    border: 1px solid var(--pf-line);
    border-radius: var(--pf-radius-md);
    background: var(--pf-raised);
    padding: var(--pf-space-1) var(--pf-space-2);
    margin-bottom: var(--pf-space-1);
  }
  #histBody table.hist td {
    border: 0;
    padding: 2px 0;
    white-space: normal;
    font-size: 14px;
  }
  #histBody table.hist td::before {
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: var(--pf-muted);
  }
  #histBody table.hist td:nth-child(1)::before { content: "Time"; }
  #histBody table.hist td:nth-child(2)::before { content: "Game"; }
  #histBody table.hist td:nth-child(3)::before { content: "Type"; }
  #histBody table.hist td:nth-child(4)::before { content: "Bet"; }
  #histBody table.hist td:nth-child(5)::before { content: "Win"; }
  #histBody table.hist td.r { text-align: left; }
}

/* ---- 7. Account security: separate password and email forms ---- */
.security-grid {
  display: grid;
  gap: var(--pf-space-3);
}
.security-msg { min-height: 1.5em; }
.security-msg:empty { display: none; }
.auth-note { margin: 0; font-size: 14px; color: var(--pf-muted); }
.auth-note b { color: var(--pf-ink); overflow-wrap: anywhere; }
.auth-note.code-preview {
  color: #F4DC9C;
  background: rgba(217, 184, 108, .1);
  border: 1px solid var(--pf-line-strong);
  border-radius: var(--pf-radius-sm);
  padding: var(--pf-space-1) var(--pf-space-2);
}
.auth-note.code-preview b { letter-spacing: .16em; }
@media (min-width: 760px) {
  .security-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}
.profile-security .auth-form { display: grid; gap: var(--pf-space-2); margin-top: var(--pf-space-3); }
.profile-security .auth-form label {
  display: grid;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--pf-ink);
}
.profile-security .auth-form input {
  width: 100%;
  min-height: 44px;
  font: inherit;
  color: var(--pf-ink);
  background: var(--pf-raised);
  border: 1px solid var(--pf-line);
  border-radius: var(--pf-radius-md);
  padding: var(--pf-space-2) var(--pf-space-3);
  transition: border-color 150ms ease;
}
.profile-security .auth-form input:focus { border-color: var(--pf-accent); }
.profile-security .auth-form input:disabled { opacity: .55; cursor: not-allowed; }
.profile-security .auth-form small { font-weight: 400; color: var(--pf-muted); }
.profile-security .auth-err {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #F08A78;
  background: rgba(240, 138, 120, .12);
  border: 1px solid rgba(240, 138, 120, .55);
  border-radius: var(--pf-radius-sm);
  padding: var(--pf-space-1) var(--pf-space-2);
}
.profile-security .auth-err:empty { display: none; }

/* ---- 7b. Cash request form ---- */
.cash-form { display: grid; gap: var(--pf-space-2); margin-top: var(--pf-space-3); }
.cash-form label {
  display: grid;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--pf-ink);
}
.cash-form input, .cash-form select {
  width: 100%;
  min-height: 44px;
  padding: 0 12px;
  font: inherit;
  color: var(--pf-ink);
  background: var(--pf-raised);
  border: 1px solid var(--pf-line);
  border-radius: var(--pf-radius-sm);
}
.cash-form input:focus, .cash-form select:focus { border-color: var(--pf-accent); outline: 2px solid var(--pf-focus); outline-offset: 2px; }
.cash-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--pf-space-2); }
#cashMsg:empty { display: none; }
.cash-requests { margin-top: var(--pf-space-3); border-top: 1px solid var(--pf-line); padding-top: var(--pf-space-2); }
.cash-requests summary { cursor: pointer; font-weight: 700; }
.cash-requests .toplist { margin-top: var(--pf-space-2); }
.cash-requests .toplist li {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 2px var(--pf-space-2);
  padding: var(--pf-space-2) var(--pf-space-3);
  border: 1px solid var(--pf-line);
  border-radius: var(--pf-radius-md);
  background: var(--pf-raised);
}
.cash-requests .toplist li > span:first-child { font-weight: 700; }
@media (max-width: 479px) { .cash-row { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
  header.site { grid-template-columns: auto 1fr auto; }
  header.site .mainnav { grid-column: 2; justify-self: end; flex-wrap: nowrap; }
  header.site .mainnav a { padding: 0 8px; white-space: nowrap; }
  header.site .mainnav a[href="/#games"] { display: none; }
  header.site > .wallet { grid-column: 3; grid-row: 1; justify-self: end; gap: 6px; }
}

/* ---- 8. Guest card ---- */
.guest-card { display: grid; gap: var(--pf-space-2); justify-items: start; }
.guest-card .avatar { width: 48px; height: 48px; font-size: 20px; }
.guest-actions { display: grid; gap: var(--pf-space-1); width: 100%; }
.guest-actions .chip { justify-content: center; min-height: 44px; margin: 0; }

/* shared buttons on this page: full-height targets, smooth states */
.profile-wrap .chip {
  min-height: 44px;
  transition: border-color 150ms ease, background-color 150ms ease, transform 150ms ease;
}
.profile-wrap .chip:active { transform: translateY(1px); }

/* ---- 9. Focus, motion, safe-area ---- */
.profile-wrap :focus-visible {
  outline: 2px solid var(--pf-focus);
  outline-offset: 2px;
  border-radius: var(--pf-radius-sm);
}
@media (prefers-reduced-motion: reduce) {
  .profile-wrap *, .profile-wrap *::before, .profile-wrap *::after { transition: none; }
  #histDetails summary::after { transition: none; }
}

/* ---- wider screens ---- */
@media (min-width: 720px) {
  .stat-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .stat-grid .stat b { font-size: 24px; }
  .guest-actions { grid-template-columns: 1fr 1fr; }
  .profile-card { padding: var(--pf-space-4); }
}
@media (min-width: 1024px) {
  .profile-wrap { gap: var(--pf-space-4); }
}