@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Sora:wght@600;700;800&display=swap');

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* Aligned with the landing page (index.html) design language */
  --bg: #faf8ff;
  --surface: #ffffff;
  --surface2: #f5f3ff;
  --surface3: #ede9fe;
  --border: rgba(124,58,237,0.12);
  --border-2: rgba(20,16,31,0.07);
  --text: #15101f;
  --text-2: #4b4458;
  --text-muted: #8b8497;
  --accent: #7c3aed;
  --accent-hover: #6d28d9;
  --accent-soft: #f5f3ff;
  --accent-mid: #ddd6fe;
  --fuchsia: #c026d3;
  --red: #dc2626;
  --red-hover: #b91c1c;
  --red-soft: #fee2e2;
  --red-mid: #fecaca;
  --black-num: #15101f;
  --green: #16a34a;
  --green-soft: #dcfce7;
  --green-mid: #bbf7d0;
  --yellow: #d97706;
  --radius: 22px;
  --radius-sm: 12px;
  --radius-xs: 8px;
  --shadow-xs: 0 1px 2px rgba(20,16,31,0.04);
  --shadow-sm: 0 1px 2px rgba(20,16,31,0.04), 0 1px 3px rgba(20,16,31,0.03);
  --shadow-md: 0 4px 16px rgba(99,52,196,0.07), 0 1px 4px rgba(20,16,31,0.04);
  --shadow-lg: 0 12px 32px rgba(99,52,196,0.10), 0 3px 10px rgba(20,16,31,0.05);
  --shadow-accent: 0 4px 14px rgba(124,58,237,0.20);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --display: 'Sora','Inter',sans-serif;
  /* legacy alias used by old code */
  --shadow: var(--shadow-md);
}

html, body { height: 100%; }
body {
  background:
    radial-gradient(1000px 600px at 50% -8%, #f5f3ff 0%, rgba(245,243,255,0) 55%),
    var(--bg);
  background-attachment: fixed;
  color: var(--text);
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===== HEADER ===== */
header {
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--border);
}
/* Gradient accent stripe at very top */
header::before {
  content: '';
  display: block;
  height: 3px;
  background: linear-gradient(90deg, #7c3aed 0%, #c026d3 55%, #7c3aed 100%);
}
.header-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 104px;
  padding: 0 24px;
  gap: 16px;
}
header h1 {
  font-size: 22px;
  font-weight: 800;
  white-space: nowrap;
  letter-spacing: -0.025em;
  background: linear-gradient(125deg, #7c3aed 0%, #c026d3 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  display: flex;
  align-items: center;
  gap: 8px;
}
header h1.brand-home {
  cursor: pointer;
  transition: opacity .2s ease, transform .2s ease;
  outline: none;
}
header h1.brand-home:hover { opacity: .82; }
header h1.brand-home:active { transform: scale(.98); }
header h1.brand-home:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; border-radius: 8px; }

#game-status-bar {
  background: var(--accent-soft);
  border-radius: 99px;
  padding: 5px 14px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
  text-align: center;
  letter-spacing: 0.01em;
}
.header-right { display: flex; align-items: center; gap: 12px; min-width: 0; }
#user-chip { display: flex; align-items: center; gap: 10px; }
#user-chip.hidden { display: none; }
#user-chip-name { font-size: 13px; font-weight: 700; color: var(--text); white-space: nowrap; }

/* ===== TABS ===== */
.tabs {
  display: flex;
  background: transparent;
  border-bottom: none;
  padding: 0 24px;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { display: none; }
.tab-btn {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  color: var(--text-muted);
  padding: 14px 16px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  border-radius: 0;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 7px;
  box-shadow: none;
  transition: color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.tab-btn:hover { background: transparent; color: var(--text); box-shadow: none; transform: none; }
.tab-btn.active { color: var(--accent); border-bottom-color: var(--accent); }
.tab-btn.active:hover { background: transparent; box-shadow: none; }
.tab-icon { width: 16px; height: 16px; flex-shrink: 0; }

/* ===== TAB CONTENT ===== */
.tab-content { display: none; max-width: 1200px; margin: 0 auto; padding: 28px 24px; }
.tab-content.active { display: block; }

/* ===== PANEL / CARD ===== */
.panel {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 24px 26px;
  margin-bottom: 20px;
  box-shadow: var(--shadow-sm);
}
.panel h2 { font-size: 16px; font-weight: 700; margin-bottom: 16px; letter-spacing: -0.01em; color: var(--text); }

/* ===== FORMS ===== */
label {
  display: block;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 6px;
  letter-spacing: 0.01em;
  text-transform: uppercase;
}
.row-form { display: flex; gap: 10px; align-items: center; }
input[type=text], input[type=email], input[type=password], input[type=number] {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 10px 14px;
  font-size: 14px;
  font-family: inherit;
  flex: 1;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
input::placeholder { color: #b0adc4; }
input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124,58,237,0.12); }
select {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text);
  padding: 10px 14px;
  font-size: 14px;
  font-family: inherit;
  outline: none;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(124,58,237,0.12); }

/* ===== BUTTONS ===== */
button {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 10px 18px;
  font-size: 13.5px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
  white-space: nowrap;
  box-shadow: var(--shadow-xs);
  letter-spacing: 0.01em;
}
button:hover { background: var(--accent-hover); box-shadow: 0 4px 14px rgba(124,58,237,0.32); transform: translateY(-1px); }
button:active { transform: scale(0.97) translateY(0); }
button.secondary {
  background: var(--surface);
  color: var(--text-muted);
  border: 1.5px solid var(--border);
  box-shadow: none;
}
button.secondary:hover { background: var(--surface2); color: var(--accent); border-color: var(--accent-mid); box-shadow: none; transform: none; }
button.danger { background: var(--red); }
button.danger:hover { background: var(--red-hover); box-shadow: 0 4px 14px rgba(225,29,72,0.32); }
button.success { background: var(--green-soft); border: 1.5px solid var(--green-mid); color: var(--green); box-shadow: none; }
button.success:hover { background: var(--green-mid); box-shadow: none; }
button:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; transform: none; }

/* ===== AVATAR ===== */
.avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-weight: 700;
  font-size: 13px;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}

/* ===== USER CARDS ===== */
.users-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 410px), 1fr));
  gap: 18px;
  align-items: start; /* cards size to their own content instead of stretching to the row */
}
.user-card {
  background: var(--surface);
  border-radius: var(--radius);
  padding: 22px;
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s;
  min-width: 0; /* grid item: allow it to shrink to the column instead of overflowing on mobile */
}
.user-card:hover { box-shadow: var(--shadow-md); }
.user-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  gap: 10px;
  flex-wrap: wrap;
}
.user-card-header h3 {
  font-size: 15px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  flex: 1;
  min-width: 0;
}
.user-card-actions { display: flex; gap: 7px; flex-shrink: 0; }
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
  background: var(--surface2);
  color: var(--text-muted);
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.badge.spun { background: var(--green-soft); color: var(--green); }
.badge.owner { background: var(--accent-soft); color: var(--accent); }
.badge.me { background: #eef2ff; color: #4f46e5; }
/* Role badges (Members tab) */
.badge.role.owner { background: var(--accent-soft); color: var(--accent); }
.badge.role.admin { background: #fef2f2; color: #b91c1c; }
.badge.role.gamemaster { background: #ecfeff; color: #0e7490; }

/* Members tab: bigger avatar with the leaderboard rank as a corner medallion,
   then the name and role/status badges stacked to its right. */
.uc-id { display: flex; align-items: center; gap: 13px; min-width: 0; flex: 1; }
.uc-avatar { position: relative; flex-shrink: 0; line-height: 0; }
.uc-rank {
  position: absolute; left: -5px; bottom: -5px;
  min-width: 24px; height: 22px; padding: 0 6px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 999px; font-size: 12px; font-weight: 800;
  background: var(--accent); color: #fff;
  border: 2px solid var(--surface); box-shadow: var(--shadow-sm);
}
.uc-idtext { display: flex; flex-direction: column; min-width: 0; }
.user-card-header h3.uc-name {
  display: block; flex: 0 1 auto; gap: 0; min-width: 0;
  font-size: 16px; font-weight: 800; line-height: 1.25;
  overflow-wrap: anywhere;
}
.uc-roles { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin-top: 5px; }
.uc-nameline { display: flex; align-items: center; gap: 8px; min-width: 0; }

/* Outstanding-action flag next to the name: shown only while the card is collapsed
   (the expanded card reveals the actual confirm panel). Rendered only when the
   player has prices to confirm, so it vanishes once everything is confirmed. */
.uc-action-flag {
  display: none; flex-shrink: 0;
  align-items: center; justify-content: center;
  min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: 999px;
  background: var(--red); color: #fff;
  font-size: 11px; font-weight: 800; line-height: 1;
  position: relative; top: -2px; /* nudge up so it sits level with the name */
}
.user-card.collapsed .uc-action-flag {
  display: inline-flex;
  animation: uc-flag-pulse 1.9s ease-in-out infinite;
}
@keyframes uc-flag-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 38, 38, 0.45); }
  50% { box-shadow: 0 0 0 5px rgba(220, 38, 38, 0); }
}
@media (prefers-reduced-motion: reduce) { .uc-action-flag { animation: none !important; } }

/* Stat strip under the member header: portfolio value, profit/loss, stock count.
   Boxes wrap (flex-wrap) rather than squeezing, and the value wraps at its space,
   so the profit figure never overflows its box on a narrow / mobile screen. */
.uc-stats { display: flex; gap: 8px; margin-bottom: 0; flex-wrap: wrap; }
.uc-stat {
  flex: 1 1 118px; min-width: 0;
  background: var(--surface2);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  display: flex; flex-direction: column; gap: 3px;
}
.uc-stat-val { font-size: 15px; font-weight: 800; color: var(--text); overflow-wrap: break-word; }
.uc-stat-val .pl { font-size: 14px; font-weight: 800; }
.uc-stat-pct { font-size: 11px; font-weight: 700; opacity: 0.8; white-space: nowrap; }
.uc-stat-muted { color: var(--text-muted); font-weight: 800; }
.uc-stat-lbl {
  font-size: 10px; font-weight: 700; color: var(--text-muted);
  text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap;
}

/* Collapsible member cards: the summary (header + stat strip) is always shown and
   clicking it reveals the holdings/sold detail. Collapsed is the default. */
.uc-summary { cursor: pointer; }
.uc-summary .user-card-header { margin-bottom: 14px; }
.user-card.collapsed .uc-details { display: none; }
.uc-chevron {
  flex-shrink: 0; align-self: center; color: var(--text-muted);
  font-size: 12px; line-height: 1; transition: transform 0.18s var(--ease-out);
}
.user-card.collapsed .uc-chevron { transform: rotate(-90deg); }
.uc-summary:hover .uc-chevron { color: var(--accent); }
.role-select {
  font-size: 12px; padding: 5px 8px; border-radius: 8px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  cursor: pointer; font-family: inherit;
}

/* Settings: Members & roles management panel */
.mm-desc { font-size: 13px; color: var(--text-muted); line-height: 1.55; margin-bottom: 14px; }
.mm-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 0; border-top: 1px solid var(--border); flex-wrap: wrap;
}
.mm-row:first-of-type { border-top: 0; }
.mm-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.mm-name { font-size: 14px; font-weight: 600; }
.mm-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.mm-kick { font-size: 12px; padding: 6px 12px; }
.mm-empty { font-size: 13px; color: var(--text-muted); }

/* Bug-report modal + shared form status pill */
#bug-report-text {
  width: 100%; border: 1px solid var(--border); border-radius: 10px;
  padding: 10px 12px; font-family: inherit; font-size: 14px; resize: vertical;
}
.form-status { font-size: 13px; padding: 10px 12px; border-radius: 8px; margin-top: 12px; }
.form-status.ok { background: var(--green-soft); color: var(--green); }
.form-status.err { background: #fee2e2; color: var(--red); }

/* Header notification bell */
.notif-bell {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; padding: 0; border-radius: 10px;
  background: rgba(255,255,255,0.7); border: 1px solid var(--border); color: var(--text);
  cursor: pointer; transition: background .15s, border-color .15s, color .15s;
}
.notif-bell:hover { background: #fff; border-color: var(--accent-mid); color: var(--accent); }
.notif-badge {
  position: absolute; top: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 5px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 99px; background: var(--red); color: #fff; font-size: 11px; font-weight: 800;
  border: 2px solid var(--surface);
}

/* Notifications view */
.notif-wrap { max-width: 640px; margin: 0 auto; padding: 8px 0; }
.notif-head h2 { font-size: 22px; font-weight: 800; letter-spacing: -0.02em; margin: 8px 0 16px; }
.notif-list { display: flex; flex-direction: column; gap: 10px; }
.notif-row {
  display: flex; align-items: flex-start; gap: 12px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 14px 16px; box-shadow: var(--shadow-sm);
}
.notif-row.unread { border-color: var(--accent-mid); background: var(--accent-soft); }
.notif-row.kick { border-left: 3px solid var(--red); }
/* An awarded stock stays sealed until the player picks watch or reveal. */
.notif-row.award { border-left: 3px solid var(--accent); }
.notif-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.notif-btn {
  font-size: 12px;
  padding: 6px 12px;
  border-radius: 8px;
  background: var(--surface2);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: none;
  filter: none;
}
.notif-btn:hover { background: var(--surface); border-color: var(--accent-mid); color: var(--accent); box-shadow: none; filter: none; transform: none; }
.notif-btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.notif-btn.primary:hover { filter: brightness(1.05); color: #fff; }
.notif-reveal { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 6px; }
.notif-reveal-name { font-size: 12.5px; color: var(--text-muted); }
.notif-reveal-price { font-size: 12.5px; font-weight: 700; color: var(--text); }
.notif-was { font-size: 12.5px; color: var(--text-muted); text-decoration: line-through; }
.notif-row.clickable { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.notif-row.clickable:hover { border-color: var(--accent); box-shadow: 0 4px 14px rgba(124,58,237,.10); }
.notif-icon { font-size: 20px; line-height: 1.2; flex-shrink: 0; }
.notif-main { flex: 1; min-width: 0; }
.notif-title { font-size: 14px; font-weight: 700; color: var(--text); }
.notif-body { font-size: 12.5px; color: var(--text-muted); margin-top: 3px; line-height: 1.5; word-break: break-word; }
.notif-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.notif-cta { font-size: 12px; font-weight: 700; color: var(--accent); white-space: nowrap; }
.notif-time { font-size: 11px; color: var(--text-muted); white-space: nowrap; }
.notif-empty { text-align: center; }

/* ===== PORTFOLIO HOLDINGS ===== */
.holdings { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.holding {
  background: var(--surface2);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  transition: background 0.12s;
}
.holding:hover { background: var(--surface3); }
.holding-top { display: flex; align-items: center; gap: 8px; }
.holding-name {
  flex: 1;
  min-width: 0; /* let the flex item shrink to the card width instead of overflowing */
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  line-height: 1.35;
  overflow-wrap: anywhere; /* wrap the full company name rather than truncating it */
}
.holding-top .round-tag { flex-shrink: 0; }
.icon-del {
  flex-shrink: 0;
  background: transparent;
  color: var(--text-muted);
  border: none;
  border-radius: 6px;
  width: 26px;
  height: 26px;
  padding: 0;
  font-size: 17px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  transition: background 0.12s, color 0.12s;
}
.icon-del:hover { background: var(--red-soft); color: var(--red); box-shadow: none; transform: none; }
.icon-edit {
  flex-shrink: 0;
  background: transparent;
  color: var(--text-muted);
  border: none;
  border-radius: 6px;
  width: 26px;
  height: 26px;
  padding: 0;
  font-size: 13px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: none;
  transition: background 0.12s, color 0.12s;
}
.icon-edit:hover { background: var(--accent-soft); color: var(--accent); box-shadow: none; transform: none; }

/* ===== CONFIRM PURCHASE PANEL ===== */
.confirm-panel {
  margin-top: 14px;
  background: var(--accent-soft);
  border-radius: 12px;
  padding: 14px 16px;
}
.confirm-panel h4 { font-size: 13px; font-weight: 700; color: var(--accent); margin-bottom: 4px; text-transform: uppercase; letter-spacing: 0.04em; }
.confirm-note { font-size: 12px; color: var(--text-muted); margin-bottom: 12px; }
/* Which currency the share price is in - players were looking their stock up on
   its home market (a Canadian miner's Toronto line, say) and trying to convert. */
.quote-note {
  border-left: 2px solid var(--border);
  padding-left: 9px;
  line-height: 1.5;
}
.pending-row {
  display: flex;
  align-items: center;
  gap: 9px;
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  margin-bottom: 8px;
  flex-wrap: wrap;
  box-shadow: var(--shadow-xs);
}
.pending-row:last-child { margin-bottom: 0; }
.pending-row .holding-name { min-width: 90px; }
.pending-confirm { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.pending-cur { font-size: 12px; color: var(--text-muted); font-weight: 600; }
.pending-confirm input { width: 90px; flex: none; padding: 7px 10px; font-size: 13px; }
.pending-confirm button { padding: 7px 14px; font-size: 13px; }

/* ===== CONFIRM SALE PANEL ===== */
.confirm-panel.sale { background: var(--red-soft); }
.confirm-panel.sale h4 { color: var(--red); }
.pending-row.sale { flex-direction: column; align-items: stretch; gap: 9px; }
.pending-sale-head { display: flex; align-items: center; gap: 9px; }
.pending-sale-figures {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 12.5px;
}
.pending-sale-figures label { color: var(--text-muted); font-weight: 600; margin-right: 3px; text-transform: none; font-size: 12.5px; letter-spacing: 0; }
.pending-sale-figures .pending-cur { margin-left: auto; }
.pending-sale-figures input { width: 90px; flex: none; padding: 7px 10px; font-size: 13px; }
.pending-sale-figures button { padding: 7px 14px; font-size: 13px; }

/* ===== SOLD LIST ===== */
.sold-panel { margin-top: 14px; }
.sold-panel h4 { font-size: 12px; font-weight: 700; color: var(--text-muted); margin-bottom: 9px; text-transform: uppercase; letter-spacing: 0.06em; }
.holding.sold { opacity: 0.8; }
.round-tag.sold-tag { background: var(--surface2); color: var(--text-muted); }

.holding-bottom {
  display: flex;
  gap: 14px;
  align-items: center;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--text);
  flex-wrap: wrap;
}
.holding-bottom label { color: var(--text-muted); font-weight: 600; margin-right: 3px; text-transform: none; font-size: 12.5px; letter-spacing: 0; }
.holding-bottom .muted { color: var(--text-muted); }
.pl { font-size: 12.5px; font-weight: 700; }
.pl.pos { color: var(--green); }
.pl.neg { color: var(--red); }

/* ===== BADGES & TAGS ===== */
.ticker-badge {
  display: inline-block;
  background: var(--accent-soft);
  border-radius: 6px;
  padding: 2px 7px;
  font-size: 11.5px;
  font-weight: 700;
  font-family: 'SF Mono', ui-monospace, monospace;
  color: var(--accent);
  letter-spacing: 0.03em;
}
.round-tag {
  display: inline-block;
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 99px;
  font-weight: 700;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.round-tag.r0 { background: var(--green-soft); color: #065f46; }
.round-tag.r1 { background: var(--accent-soft); color: var(--accent); }
.round-tag.r2 { background: #fdf0ff; color: #a21caf; }
.empty-portfolio { color: var(--text-muted); font-size: 13px; padding: 10px 0; }

/* ===== GAME PANEL ===== */
.player-turn-list { display: flex; flex-direction: column; gap: 8px; }
.player-turn-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 13px 16px;
  gap: 12px;
  box-shadow: var(--shadow-xs);
  transition: box-shadow 0.15s;
}
.player-turn-row.current { border-left: 3px solid var(--accent); background: var(--accent-soft); }
/* A finished row recedes, but its Watch button has to stay legible - so dim the
   text rather than the whole row (opacity on the row can't be undone by a child). */
.player-turn-row.done .ptr-who,
.player-turn-row.done .ptr-msg { opacity: 0.6; }

/* ===== MODALS / WHEEL ===== */
.modal {
  position: fixed; inset: 0;
  background: rgba(20,15,40,0.5);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  padding: 20px;
}
.modal.hidden { display: none; }
.modal-box {
  background: var(--surface);
  border-radius: 20px;
  padding: 30px;
  max-width: 520px;
  width: 100%;
  max-height: 95vh;
  overflow-y: auto;
  box-shadow: var(--shadow-lg);
}
.modal-box h3 { font-size: 18px; font-weight: 800; margin-bottom: 18px; letter-spacing: -0.02em; }

.wheel-modal-box { max-width: 520px; text-align: center; }
.multi-wheel-modal-box { max-width: min(96vw, 1120px); max-height: 90vh; overflow-y: auto; text-align: center; }
.multi-wheel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px; padding: 8px 0 20px; }
.wheel-card { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.wheel-card-name { font-weight: 700; font-size: 13px; color: var(--text); }
.wheel-card .wheel-result { width: 100%; font-size: 12px; padding: 8px 10px; }
.wheel-card .result-number { font-size: 28px; }
.wheel-card .result-action { font-size: 12px; }
.wheel-container {
  position: relative;
  display: inline-block;
  margin: 0 auto 18px;
}
/* The pseudo-3D wheel paints its own shadow and depth - keep the canvas bare. */
#wheel-canvas {
  display: block;
  max-width: 100%;
  height: auto;
}
.wheel-result {
  background: var(--surface2);
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 18px;
  font-size: 15px;
  line-height: 1.6;
}
.wheel-result.hidden { display: none; }
.wheel-result .result-number {
  font-size: 48px;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: -0.03em;
}
.result-number.red { color: var(--red); }
.result-number.black { color: var(--text); }
.result-number.green { color: var(--green); }
.result-action { font-size: 14px; color: var(--text-muted); }
.result-action .action-buy { color: var(--green); font-weight: 700; }
.result-action .action-sell { color: var(--red); font-weight: 700; }
.result-action .action-green { color: #059669; font-weight: 700; letter-spacing: 0.03em; }
.liq-list { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.liq-row { display: flex; align-items: center; gap: 5px; background: var(--surface2); border-radius: 8px; padding: 4px 8px; }
#spin-btn {
  font-size: 17px;
  padding: 15px 52px;
  border-radius: 99px;
  background: linear-gradient(135deg, #7c3aed 0%, #c026d3 100%);
  letter-spacing: 0.06em;
  font-weight: 800;
  box-shadow: 0 4px 16px rgba(124,58,237,0.28);
  transition: box-shadow 0.2s, transform 0.15s;
}
#spin-btn:hover {
  background: linear-gradient(135deg, #6d28d9 0%, #a21caf 100%);
  box-shadow: 0 6px 22px rgba(124,58,237,0.38);
  transform: translateY(-2px);
}
#spin-btn:disabled { opacity: 0.45; transform: none; }

/* ===== TABLES ===== */
.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-scroll table { min-width: 560px; }
table { width: 100%; border-collapse: collapse; font-size: 13px; }
th {
  text-align: left;
  color: var(--text-muted);
  font-weight: 600;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
td { padding: 11px 12px; border-bottom: 1px solid var(--border); }
tr:last-child td { border-bottom: none; }
tbody tr { transition: background 0.1s; }
tbody tr:hover { background: var(--surface2); }
.color-dot {
  display: inline-block;
  width: 9px; height: 9px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 5px;
}
.color-dot.red { background: var(--red); }
.color-dot.black { background: #3f3f46; }
.color-dot.green { background: var(--green); }

/* ===== ROUND 3 MAP ===== */
.round3-map { font-size: 13px; }
.round3-user { margin-bottom: 18px; }
.round3-user h4 { font-size: 14px; font-weight: 700; margin-bottom: 8px; }
.r3-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 8px;
}
.r3-cell {
  background: var(--surface2);
  border-radius: 8px;
  padding: 7px 10px;
  font-size: 12px;
}
.r3-cell .r3-num { font-weight: 800; color: var(--red); margin-right: 5px; }
.r3-cell .r3-ticker { font-family: 'SF Mono', ui-monospace, monospace; font-weight: 700; }

/* ===== UTILITY ===== */
.hidden { display: none; }

/* ===== VIEWS ===== */
.view { max-width: 1200px; margin: 0 auto; padding: 28px 24px; }
.view.hidden { display: none; }
#view-team { padding: 0; max-width: none; }
#view-team .tab-content { padding-top: 22px; }

/* White zone containing team-header + tabs - no grey gap */
.team-subnav {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
#view-team .team-header,
#view-team .tabs {
  max-width: 1200px;
  margin: 0 auto;
  padding: 18px 24px 14px;
}

/* ===== AUTH VIEW ===== */
#view-auth {
  min-height: calc(100vh - 63px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
}
#view-auth.hidden { display: none; }
.auth-card {
  background: var(--surface);
  border-radius: 22px;
  padding: 40px 36px;
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
/* Subtle gradient decoration at top */
.auth-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #7c3aed, #c026d3);
}
.auth-brand {
  display: flex;
  justify-content: center;
  margin-bottom: 14px;
}
.auth-brand-icon {
  width: 68px; height: 68px;
  border-radius: 20px;
  background: linear-gradient(135deg, #7c3aed 0%, #c026d3 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  box-shadow: 0 8px 24px rgba(124,58,237,0.35);
  cursor: pointer;
}
.auth-head { text-align: center; margin-bottom: 22px; }
.auth-card h2 {
  font-size: 23px;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: var(--text);
}
.auth-subtitle {
  margin-top: 5px;
  font-size: 13.5px;
  color: var(--text-muted);
  line-height: 1.45;
}
.auth-card label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  margin: 0 0 7px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.auth-card input { width: 100%; }
/* Collapsible field groups — animate in/out on mode switch instead of a hard cut. */
.auth-fg {
  overflow: hidden;
  max-height: 100px;
  opacity: 1;
  margin-bottom: 15px;
  transition: max-height .34s cubic-bezier(.4,0,.2,1), opacity .24s ease, margin .34s cubic-bezier(.4,0,.2,1);
}
.auth-fg.collapsed {
  max-height: 0;
  opacity: 0;
  margin-bottom: 0;
  pointer-events: none;
}
.auth-label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.auth-card label.auth-check { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 13.5px; color: var(--text); font-weight: 500; margin: 0; text-transform: none; letter-spacing: 0; }
.auth-check input[type=checkbox] { width: 18px; height: 18px; flex: 0 0 auto; accent-color: var(--accent); cursor: pointer; margin: 0; }
.auth-check span { line-height: 1.35; }
.auth-forgot {
  font-size: 12px; font-weight: 600; color: var(--accent);
  text-decoration: none; text-transform: none; letter-spacing: 0;
}
.auth-forgot:hover { text-decoration: underline; }

/* Account preference toggles (profile "Trades & pricing" panel). */
.pref-intro { font-size: 13px; color: var(--text-muted); line-height: 1.5; margin-bottom: 8px; }
.pref-check { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; padding: 14px 0; border-top: 1px solid var(--border); margin: 0; text-transform: none; letter-spacing: 0; }
.pref-check input[type=checkbox] { width: 18px; height: 18px; flex: 0 0 auto; margin: 2px 0 0; accent-color: var(--accent); cursor: pointer; }
.pref-check > span { display: flex; flex-direction: column; gap: 3px; }
.pref-check strong { font-size: 14px; font-weight: 700; color: var(--text); }
.pref-check em { font-style: normal; font-size: 12.5px; color: var(--text-muted); line-height: 1.45; }
.pref-check.disabled { opacity: .45; cursor: not-allowed; }
.pref-check.disabled input { cursor: not-allowed; }
.auth-forgot.hidden { display: none; }
.auth-error, .auth-notice {
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 14px;
  font-weight: 500;
  line-height: 1.4;
}
.auth-error { background: var(--red-soft); color: var(--red); }
.auth-notice { background: var(--green-soft, #ecfdf5); color: var(--green); }
.auth-error.hidden, .auth-notice.hidden { display: none; }
/* Brief fade so a mode switch reads as a transition, not a jump. Applied to the
   heading only — never the form body, which hosts the Turnstile widget (a
   transformed ancestor breaks its interactive challenge popup). */
.auth-head.auth-swap { animation: authHeadSwap .3s ease; }
@keyframes authHeadSwap { from { opacity: .3; transform: translateY(3px); } to { opacity: 1; transform: none; } }
.auth-submit { width: 100%; margin-top: 6px; padding: 13px; font-size: 15px; font-weight: 700; border-radius: 12px; }
.auth-switch { margin-top: 18px; text-align: center; font-size: 13px; color: var(--text-muted); }
.auth-switch.hidden { display: none; }
.auth-switch a { color: var(--accent); text-decoration: none; font-weight: 700; }
.auth-switch a:hover { text-decoration: underline; }
.auth-back { margin-top: 14px; }
.auth-legal {
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--border);
  text-align: center; font-size: 11.5px; line-height: 1.5; color: var(--text-muted);
}
.auth-legal a { color: var(--text-muted); text-decoration: underline; font-weight: 600; }
.auth-legal a:hover { color: var(--accent); }

/* App-wide legal footer (all views) */
.app-footer {
  max-width: 1200px; margin: 40px auto 0; padding: 20px 24px 28px;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 10px 20px;
}
.app-footer-note { font-size: 12px; color: var(--text-muted); line-height: 1.5; margin: 0; max-width: 640px; }
.app-footer-note a { color: var(--text-muted); text-decoration: underline; font-weight: 600; }
.app-footer-note a:hover { color: var(--accent); }
.app-footer-links { display: flex; gap: 16px; flex-wrap: wrap; }
.app-footer-links a { font-size: 12px; font-weight: 600; color: var(--text-muted); text-decoration: none; }
.app-footer-links a:hover { color: var(--accent); text-decoration: underline; }
@media (max-width: 640px) { .app-footer { justify-content: center; text-align: center; } }
/* Terms/policy modal (content injected from /terms.html) */
.legal-modal-box { max-width: 640px; max-height: 85vh; padding: 0; display: flex; flex-direction: column; }
.legal-modal-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid var(--border); }
.legal-modal-head h3 { margin: 0; font-size: 18px; }
.legal-close { background: none; color: var(--text-muted); font-size: 26px; line-height: 1; padding: 0 8px; box-shadow: none; }
.legal-close:hover { background: none; color: var(--text); transform: none; box-shadow: none; }
.legal-body { overflow-y: auto; padding: 20px 24px; flex: 1 1 auto; }
.legal-body h1 { font-size: 22px; margin: 0 0 6px; }
.legal-body h2 { font-size: 16px; margin: 20px 0 8px; }
.legal-body p, .legal-body li { font-size: 13.5px; color: var(--text-muted); line-height: 1.6; margin-bottom: 12px; }
.legal-body ul { padding-left: 20px; margin: 0 0 12px; }
.legal-body .updated { font-size: 12px; margin-bottom: 16px; }
.legal-body strong { color: var(--text); }
.legal-body a { color: var(--accent); }
.legal-body .callout { border-radius: 12px; padding: 14px 16px; margin: 16px 0; }
.legal-body .callout h2 { margin-top: 0; }
.legal-body .callout.warn { background: #fff7ed; border: 1px solid #fed7aa; }
.legal-body .callout.help { background: #eff6ff; border: 1px solid #bfdbfe; }
.legal-body .tel { font-weight: 800; color: #1e3a8a; }
.legal-loading { color: var(--text-muted); }
.legal-modal-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 24px; border-top: 1px solid var(--border); }
.legal-modal-foot a { font-size: 13px; font-weight: 600; color: var(--text-muted); text-decoration: none; }
.legal-modal-foot a:hover { color: var(--accent); text-decoration: underline; }
#auth-join-note { color: var(--accent); font-size: 13px; margin-bottom: 16px; padding: 10px 14px; background: var(--accent-soft); border-radius: 10px; font-weight: 500; }

/* ===== TEAMS VIEW ===== */
.teams-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
@media (max-width: 640px) { .teams-actions { grid-template-columns: 1fr; } }
.team-row {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--surface);
  border-radius: var(--radius-sm);
  padding: 16px 18px;
  margin-bottom: 10px;
  cursor: pointer;
  transition: box-shadow 0.15s, transform 0.15s;
  box-shadow: var(--shadow-xs);
}
.team-row:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.team-row:active { transform: translateY(0); }
.team-icon {
  width: 40px; height: 40px;
  border-radius: 12px;
  background: var(--accent-soft);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.team-row-name { font-weight: 700; flex: 1; font-size: 15px; }
.team-row-go { color: var(--text-muted); }

.invite-banner { background: var(--accent-soft); }
.invite-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 0;
  font-size: 14px;
}
.invite-row + .invite-row { border-top: 1px solid var(--accent-mid); }

/* ===== TEAM HEADER ===== */
.team-header {
  display: flex;
  align-items: center;
  gap: 14px;
}
.team-header h2 {
  font-size: 20px;
  font-weight: 800;
  flex: 1;
  letter-spacing: -0.025em;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface2);
  color: var(--text-muted);
  border: none;
  border-radius: 99px;
  padding: 8px 14px 8px 11px;
  font-size: 13px;
  font-weight: 600;
  box-shadow: none;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.back-link svg { transition: transform 0.18s; }
.back-link:hover { background: var(--accent-soft); color: var(--accent); box-shadow: none; transform: none; }
.back-link:hover svg { transform: translateX(-3px); }

.invite-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 99px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  box-shadow: 0 4px 14px rgba(124,58,237,0.3);
  flex-shrink: 0;
  transition: background 0.15s, box-shadow 0.15s, transform 0.1s;
}
.invite-btn:hover {
  background: var(--accent-hover);
  box-shadow: 0 6px 20px rgba(124,58,237,0.45);
  color: #fff;
  transform: translateY(-1px);
}

/* ===== SETTINGS ===== */
.settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 18px;
}
.settings-grid label {
  display: flex;
  flex-direction: column;
  gap: 7px;
  font-size: 12px;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ===== STATS DASHBOARD ===== */
.stats-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.stats-header h2 { font-size: 20px; font-weight: 800; letter-spacing: -0.025em; }
.stats-game-select {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  cursor: pointer;
  max-width: 100%;
  font-family: inherit;
}
.stats-chart-card { padding: 22px 24px; }
.stats-chart-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.stats-chart-top h3 { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; }
.stats-views { display: inline-flex; gap: 3px; background: var(--surface2); border-radius: 10px; padding: 3px; }
.stats-view-btn {
  background: transparent; color: var(--text-muted); border: none; box-shadow: none;
  padding: 7px 14px; font-size: 13px; font-weight: 600; border-radius: 8px;
  transition: background 0.15s, color 0.15s;
}
.stats-view-btn:hover { background: transparent; color: var(--text); box-shadow: none; transform: none; }
.stats-view-btn.active { background: var(--surface); color: var(--accent); box-shadow: var(--shadow-sm); }
.stats-chart { width: 100%; margin: 4px 0 14px; }
.stats-legend { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 4px; }
.stats-legend-chip {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface2); color: var(--text);
  box-shadow: none; border: none; border-radius: 99px;
  padding: 5px 12px; font-size: 12.5px; font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, opacity 0.12s;
}
.stats-legend-chip:hover { background: var(--surface3); box-shadow: none; transform: none; }
.stats-legend-chip.off { opacity: 0.35; text-decoration: line-through; }
.stats-legend-chip .dot, .stats-board .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.stats-note { font-size: 11.5px; color: var(--text-muted); margin-top: 12px; line-height: 1.6; }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 18px; }
.stats-widget h3 { font-size: 13px; font-weight: 700; margin-bottom: 14px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.stats-board { display: flex; flex-direction: column; gap: 2px; }
.stats-board-row { display: flex; align-items: center; gap: 10px; padding: 9px 4px; border-bottom: 1px solid var(--border); }
.stats-board-row:last-child { border-bottom: none; }
.stats-board-row .rank { font-weight: 800; color: var(--text-muted); width: 20px; font-size: 13px; }
.stats-board-row .nm { flex: 1; font-weight: 600; font-size: 13.5px; }
.stats-board-row .pl { font-weight: 700; font-size: 13.5px; }
.stats-board-row .pl-stack { display: flex; flex-direction: column; align-items: flex-end; }
.stats-board-row .pl-sub { font-size: 10.5px; color: var(--text-muted); font-weight: 500; }
.stats-mover { display: flex; flex-direction: column; gap: 16px; }
.stats-mover > div { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.stats-mover .lbl { font-size: 11.5px; color: var(--text-muted); font-weight: 700; width: 100%; text-transform: uppercase; letter-spacing: 0.04em; }
.stats-mover .who { font-size: 12px; color: var(--text-muted); }
.stats-totals { display: flex; justify-content: space-between; gap: 10px; text-align: center; }
.stats-totals > div { display: flex; flex-direction: column; gap: 4px; flex: 1; padding: 12px; background: var(--surface2); border-radius: 12px; }
.stats-totals .big { font-size: 28px; font-weight: 900; color: var(--accent); letter-spacing: -0.03em; }
.stats-totals .lbl { font-size: 11.5px; color: var(--text-muted); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }

/* ===== TOAST ===== */
#toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(100px);
  background: var(--text);
  color: #fff;
  border-radius: 12px;
  padding: 12px 22px;
  font-size: 13.5px;
  font-weight: 600;
  transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
  z-index: 200;
  pointer-events: none;
  box-shadow: var(--shadow-lg);
  white-space: nowrap;
}
#toast.show { transform: translateX(-50%) translateY(0); }

/* ===== LOADING INDICATORS ===== */
/* Global top progress bar: shown while any api() fetch is in flight. */
#app-loading-bar {
  position: fixed; top: 0; left: 0; right: 0; height: 3px;
  z-index: 300; pointer-events: none;
  opacity: 0; transition: opacity .2s ease;
}
#app-loading-bar.on { opacity: 1; }
#app-loading-bar::before {
  content: ''; position: absolute; top: 0; left: 0; height: 100%; width: 40%;
  background: linear-gradient(90deg, transparent, var(--accent), #c026d3);
  border-radius: 0 3px 3px 0;
  animation: appLoadingSlide 1.1s ease-in-out infinite;
}
@keyframes appLoadingSlide {
  0%   { left: -40%; width: 40%; }
  50%  { left: 30%;  width: 55%; }
  100% { left: 100%; width: 40%; }
}

/* Reusable sample spinner (rotating ring) + in-context loading block. */
.spinner {
  display: inline-block; width: 18px; height: 18px; vertical-align: middle;
  border: 2.5px solid var(--accent-mid);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.loading-block {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  padding: 32px 16px; color: var(--text-muted); font-size: 14px; font-weight: 500;
}

/* Skeleton shimmer (for future placeholder rows). */
.skeleton {
  background: linear-gradient(90deg, var(--surface2) 25%, var(--surface3) 37%, var(--surface2) 63%);
  background-size: 400% 100%; border-radius: var(--radius-sm);
  animation: skeleton 1.4s ease infinite;
}
@keyframes skeleton { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }

/* A team row awaiting its detail load: swap the chevron for a spinner. */
.team-row.loading { pointer-events: none; }
.team-row-spin { display: none; width: 16px; height: 16px; border-width: 2px; }
.team-row.loading .team-row-spin { display: inline-block; }
.team-row.loading .team-row-go { display: none; }

/* Full-screen roulette loader (major loads: initial boot, sign-in). Markup in
   app.html, driven by public/js/loader.js. Self-contained colours (no theme vars
   needed) so it paints instantly before the rest of the app is ready. */
.wom-loader {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 26px; padding: 24px;
  background: radial-gradient(900px 520px at 50% -10%, #f5f3ff 0%, rgba(245,243,255,0) 55%), #faf8ff;
}
.wom-loader.hidden { display: none; }
.wom-wheel-wrap { position: relative; width: 200px; height: 200px; filter: drop-shadow(0 16px 34px rgba(60,20,90,0.28)); }
.wom-wheel-wrap svg { display: block; width: 100%; height: 100%; }
.wom-title {
  font-family: var(--display), sans-serif; font-weight: 800; font-size: 20px; letter-spacing: -0.01em;
  background: linear-gradient(90deg, #7c3aed, #c026d3);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: #7c3aed;
}
.wom-sub { margin-top: -14px; font-size: 13.5px; font-weight: 500; color: #8b8497; min-height: 18px; }
.wom-progress-wrap { position: relative; width: min(320px, 78vw); }
.wom-progress { width: 100%; height: 8px; border-radius: 999px; background: #ede9fe; overflow: hidden; box-shadow: inset 0 1px 2px rgba(20,16,31,0.06); }
.wom-progress .fill { height: 100%; width: 0%; border-radius: 999px; background: linear-gradient(90deg, #7c3aed, #c026d3); box-shadow: 0 0 12px rgba(124,58,237,0.5); transition: width .28s ease; }
.wom-particles { position: absolute; left: 0; bottom: 0; width: 100%; height: 8px; pointer-events: none; }
.wom-particles .particle { position: absolute; bottom: 2px; border-radius: 50%; opacity: 0; will-change: transform, opacity; animation: womParticleFly .85s ease-out forwards; }
@keyframes womParticleFly { 0% { opacity: 1; transform: translate(0,0) scale(1); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.3); } }
.wom-pct { font-size: 12px; font-weight: 600; color: #8b8497; font-variant-numeric: tabular-nums; margin-top: -14px; }
#wom-pops { position: fixed; inset: 0; pointer-events: none; z-index: 10001; }
.stock-pop {
  position: absolute; display: flex; align-items: center; gap: 7px;
  padding: 7px 13px; border-radius: 999px; font-size: 13px; font-weight: 700; white-space: nowrap;
  background: #fff; box-shadow: 0 10px 24px rgba(20,16,31,0.20);
  will-change: transform, opacity; animation: womStockPop 1.7s cubic-bezier(.16,1,.3,1) forwards;
}
.stock-pop .tk { font-weight: 800; letter-spacing: .02em; }
.stock-pop .pc { font-variant-numeric: tabular-nums; }
.stock-pop.up { color: #16a34a; border: 1px solid #bbf7d0; }
.stock-pop.down { color: #dc2626; border: 1px solid #fecaca; }
@keyframes womStockPop {
  0% { opacity: 0; transform: translate(-50%, -20%) scale(.7); }
  14% { opacity: 1; transform: translate(-50%, -60%) scale(1.06); }
  28% { opacity: 1; transform: translate(-50%, -72%) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -175%) scale(.95); }
}

@media (prefers-reduced-motion: reduce) {
  #app-loading-bar::before, .spinner, .skeleton { animation: none !important; }
  .wom-particles .particle { display: none; }
  .stock-pop { animation-duration: .01ms; }
}

/* ===== MOBILE ===== */
@media (max-width: 640px) {
  header { padding: 0; }
  /* Logo on the left, user chip on the right - same row (not stacked). */
  .header-inner { padding: 8px 14px; height: auto; flex-wrap: nowrap; gap: 10px; }
  header h1 { font-size: 16px; flex: 0 0 auto; }
  header .brand-logo { width: 46px; height: 46px; }
  .header-right { flex: 1 1 auto; gap: 8px; justify-content: flex-end; min-width: 0; }
  #user-chip { min-width: 0; }
  #user-chip-name { max-width: 96px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #game-status-bar { min-width: 0; white-space: nowrap; padding: 5px 11px; font-size: 11.5px; }

  .tabs { padding: 0 6px; gap: 0; }
  .tab-btn { flex: 1 1 0; min-width: 0; padding: 10px 4px; font-size: 11px; flex-direction: column; gap: 3px; text-align: center; letter-spacing: 0; border-bottom-width: 2.5px; }
  .tab-icon { width: 17px; height: 17px; }

  .tab-content, .view { padding: 16px 14px; }
  #view-team .team-header { padding: 14px 14px 10px; }
  .panel { padding: 16px; }

  .users-grid { grid-template-columns: 1fr; gap: 14px; }
  /* Icon-only "Add stock" on mobile so long player names aren't squeezed. */
  .uc-add-stock .uc-add-label { display: none; }
  .uc-add-stock { padding: 5px 9px; }

  /* Team rows: wrap the badges to a second line instead of overflowing the box. */
  .team-row { flex-wrap: wrap; gap: 8px 8px; padding: 14px; }
  .team-row-name { flex: 1 1 auto; min-width: 0; font-size: 14px; }
  .team-row .badge { font-size: 10.5px; padding: 3px 7px; }

  /* Portfolio table (Stats): let it fit the screen instead of forcing 560px scroll. */
  .table-scroll .pf-table { min-width: 0; }
  .pf-table { font-size: 10.5px; }
  .pf-table th, .pf-table td { padding: 6px 3px; }
  .pf-table th:first-child, .pf-table td:first-child { white-space: normal; word-break: break-word; }

  .team-header { flex-wrap: wrap; gap: 10px; }
  .team-header h2 { font-size: 18px; order: -1; flex-basis: 100%; white-space: normal; }

  .modal { padding: 12px; }
  .modal-box { padding: 22px 18px; border-radius: 16px; }

  .row-form { flex-wrap: wrap; }
  .row-form button { width: 100%; }

  .auth-card { padding: 32px 24px; }

  #view-auth { padding: 20px 16px; align-items: flex-start; padding-top: 40px; }

  .stats-totals { flex-direction: column; gap: 8px; }
  .stats-totals > div { flex-direction: row; justify-content: space-between; align-items: center; }
  .stats-totals .big { font-size: 22px; }

  .profile-wrap { padding: 16px 14px; }
  .profile-head { flex-wrap: wrap; }
}

/* ===== HEADER PROFILE BUTTON ===== */
.profile-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--surface2);
  color: var(--text);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 4px 12px 4px 4px;
  cursor: pointer;
  box-shadow: none;
  transition: background 0.15s, border-color 0.15s;
}
.profile-btn:hover {
  background: var(--accent-soft);
  border-color: var(--accent-mid);
  color: var(--accent);
  box-shadow: none;
  transform: none;
}
.profile-btn #user-chip-name { font-size: 13px; font-weight: 700; }

/* ===== IN-TEAM STATUS CHIP ===== */
.team-status {
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  white-space: nowrap;
  flex-shrink: 0;
}
.team-status.idle   { background: var(--surface2); color: var(--text-muted); }
.team-status.active { background: var(--accent-soft); color: var(--accent); }
.team-status.danger { background: var(--red-soft); color: var(--red); }

/* ===== PROFILE / ACCOUNT VIEW ===== */
.profile-wrap {
  max-width: 640px;
  margin: 0 auto;
  padding: 28px 20px 60px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.profile-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-top: 4px;
}
.profile-head h2 { font-size: 24px; font-weight: 800; letter-spacing: -0.025em; }
.profile-sub { color: var(--text-muted); font-size: 13px; margin-top: 2px; }
.profile-section-title { font-size: 16px; font-weight: 700; margin-bottom: 14px; }

.profile-wrap .panel input[type=text],
.profile-wrap .panel input[type=email],
.profile-wrap .panel input[type=password] {
  display: block;
  width: 100%;
  margin-bottom: 14px;
}
.profile-wrap .panel input:last-of-type { margin-bottom: 0; }
.profile-wrap .panel button { display: block; }

.form-msg {
  font-size: 13px;
  font-weight: 600;
  padding: 9px 12px;
  border-radius: 10px;
  margin-bottom: 12px;
}
.form-msg.hidden { display: none; }
.form-msg.error   { background: var(--red-soft); color: var(--red); border: 1px solid var(--red-mid); }
.form-msg.success { background: var(--green-soft); color: var(--green); border: 1px solid var(--green-mid); }

/* ============================================================
   MATCH LANDING PAGE - Sora display, glass surfaces, gradient
   CTAs, soft purple shadows, hover lift (mirrors index.html)
   ============================================================ */

/* Sora for all headings (landing uses Sora for h1/h2/h3 + display) */
h1, h2, h3,
.panel h2, .modal-box h3, .team-header h2, .auth-card h2,
.stats-header h2, .stats-chart-top h3, .profile-head h2,
.user-card-header h3, .wheel-card-name, .round3-user h4,
.stats-totals .big, .wheel-result .result-number {
  font-family: var(--display);
  letter-spacing: -0.02em;
}

/* Glassy sticky header like the landing nav.scrolled */
header {
  background: rgba(255,255,255,0.72);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
}
.team-subnav {
  background: rgba(255,255,255,0.72);
  backdrop-filter: saturate(180%) blur(18px);
  -webkit-backdrop-filter: saturate(180%) blur(18px);
}

/* Primary CTA = purple→fuchsia gradient with lift + shimmer highlight */
button {
  background: linear-gradient(135deg, var(--accent) 0%, var(--fuchsia) 100%);
  color: #fff;
  border-radius: 12px;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(124,58,237,0.16), inset 0 1px 0 rgba(255,255,255,0.2);
  transition: transform 0.25s var(--ease-out), box-shadow 0.3s, filter 0.25s;
}
button:hover {
  filter: brightness(1.03);
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(124,58,237,0.22), inset 0 1px 0 rgba(255,255,255,0.22);
}
button:active { transform: translateY(0) scale(0.99); }
button.secondary {
  background: rgba(255,255,255,0.72);
  color: var(--text);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(8px);
  filter: none;
}
button.secondary:hover {
  background: #fff;
  color: var(--accent);
  border-color: var(--accent-mid);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  filter: none;
}
button.danger { background: linear-gradient(135deg, #ef4444 0%, #b91c1c 100%); color: #fff; }
button.danger:hover { box-shadow: 0 6px 16px rgba(220,38,38,0.24), inset 0 1px 0 rgba(255,255,255,0.22); }
button.success { background: var(--green-soft); color: var(--green); border: 1px solid var(--green-mid); box-shadow: none; }
button.success:hover { background: var(--green-mid); box-shadow: none; transform: translateY(-1px); filter: none; }
button:disabled { opacity: 0.5; transform: none; box-shadow: none; filter: none; }

/* Invite button = same gradient CTA */
.invite-btn { background: linear-gradient(135deg, var(--accent) 0%, var(--fuchsia) 100%); box-shadow: 0 3px 10px rgba(124,58,237,0.16); }
.invite-btn:hover { background: linear-gradient(135deg, var(--accent) 0%, var(--fuchsia) 100%); box-shadow: 0 6px 16px rgba(124,58,237,0.22); }

/* Soft glass cards with hover lift (landing .card) */
.panel, .user-card, .team-row, .player-turn-row, .stats-chart-card, .auth-card, .modal-box {
  border: 1px solid var(--border);
}
.panel, .user-card { box-shadow: var(--shadow-sm); }
.team-row:hover, .user-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-lg);
  border-color: var(--accent-mid);
}

/* Rounded, purple-ringed inputs (landing) */
input[type=text], input[type=email], input[type=password], input[type=number],
select, .stats-game-select {
  border-radius: 12px;
  border: 1px solid var(--border);
  background: #fff;
}
input:focus, select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(124,58,237,0.12); }

/* Glassy modal backdrop + softer corners */
.modal { background: rgba(20,16,31,0.45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.modal-box { border-radius: 26px; }

/* Secondary chips (back link) as glass */
.back-link { background: rgba(255,255,255,0.7); border: 1px solid var(--border); }
.back-link:hover { background: #fff; border-color: var(--accent-mid); }

/* Header profile button as glass pill */
.profile-btn { background: rgba(255,255,255,0.7); border: 1px solid var(--border); }
.profile-btn:hover { background: #fff; border-color: var(--accent-mid); }

/* Active turn in purple */
.player-turn-row.current { border-left: 3px solid var(--accent); background: var(--accent-soft); }

/* ===== AVATAR PHOTOS + PROFILE PICTURE EDITOR ===== */
.avatar.avatar-img { overflow: hidden; padding: 0; background: var(--surface2); }
.avatar.avatar-img img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }

.avatar-edit { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.avatar-edit-preview .avatar { box-shadow: var(--shadow-sm); border: 1px solid var(--border); }
.avatar-edit-actions { display: flex; flex-direction: column; gap: 10px; }
.avatar-edit-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.avatar-edit-hint { font-size: 12px; color: var(--text-muted); max-width: 280px; line-height: 1.5; }

/* ===== BRAND LOGO (medallion image, black bg clipped to the circle) ===== */
.brand-logo { width: 92px; height: 92px; clip-path: circle(48% at 50% 50%); object-fit: contain; flex-shrink: 0; }
.brand-fallback { flex-shrink: 0; }

/* ===== ANIMATED LOGIN ===== */
#view-auth { position: relative; overflow: hidden; max-width: none; }
.auth-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.auth-grid {
  position: absolute; inset: -2px;
  background-image:
    linear-gradient(rgba(124,58,237,.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,58,237,.05) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 30%, transparent 75%);
  mask-image: radial-gradient(ellipse 70% 60% at 50% 45%, #000 30%, transparent 75%);
}
/* animated stock-graph lines behind the login */
.auth-lines {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
.auth-lines-track {
  position: absolute; left: 0; top: 0; display: flex; width: 200%; height: 100%;
  will-change: transform; animation: authLineScroll linear infinite;
}
.auth-lines-track svg { flex: 0 0 50%; width: 50%; height: 100%; }
@keyframes authLineScroll { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.auth-orb { position: absolute; border-radius: 50%; filter: blur(44px); opacity: .45; will-change: transform; }
.auth-orb-a { width: 340px; height: 340px; top: -80px; left: -60px; background: radial-gradient(circle, #d8b4fe, transparent 70%); animation: authdrift1 26s ease-in-out infinite; }
.auth-orb-b { width: 320px; height: 320px; bottom: -100px; right: -50px; background: radial-gradient(circle, #f0abfc, transparent 70%); animation: authdrift2 32s ease-in-out infinite; }
.auth-orb-c { width: 240px; height: 240px; top: 38%; right: 14%; background: radial-gradient(circle, #c4b5fd, transparent 70%); opacity: .32; animation: authdrift1 38s ease-in-out infinite reverse; }
@keyframes authdrift1 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(50px,36px)} }
@keyframes authdrift2 { 0%,100%{transform:translate(0,0)} 50%{transform:translate(-44px,-28px)} }

.auth-ticker {
  position: absolute; display: flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700;
  padding: 7px 12px; border-radius: 12px;
  background: rgba(255,255,255,.86); border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  color: var(--text); white-space: nowrap;
  animation: authbob 7s ease-in-out infinite;
}
.auth-ticker .up { color: var(--green); }
.auth-ticker .down { color: var(--red); }
.auth-ticker.at1 { top: 15%; left: 8%; animation-delay: .2s; }
.auth-ticker.at2 { top: 24%; right: 10%; animation-delay: 1.1s; }
.auth-ticker.at3 { bottom: 20%; left: 11%; animation-delay: .6s; }
.auth-ticker.at4 { bottom: 27%; right: 12%; animation-delay: 1.6s; }
@keyframes authbob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-10px)} }

.auth-card { position: relative; z-index: 2; animation: authpop .6s cubic-bezier(.16,1,.3,1) both; }
@keyframes authpop { from { opacity: 0; transform: translateY(24px) scale(.96); } to { opacity: 1; transform: none; } }

.auth-logo {
  width: 96px; height: 96px;
  clip-path: circle(46% at 50% 50%);
  object-fit: contain;
  cursor: pointer;
  filter: drop-shadow(0 8px 20px rgba(124,58,237,.38));
  animation: authfloat 5s ease-in-out infinite;
}
@keyframes authfloat { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-6px)} }

@media (max-width: 640px) { .auth-ticker { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .auth-orb, .auth-ticker, .auth-card, .auth-logo, .auth-lines-track, .auth-head.auth-swap { animation: none !important; }
  .auth-fg { transition: none !important; }
}

/* ===== GAME - IDLE ===== */
/* Wrapper keeps the competitions panel and the ready-to-play card the same width. */
.game-idle-view { max-width: 640px; margin: 0 auto; }
.game-idle { text-align: center; padding: 40px 28px; }
.game-idle-logo { width: 92px; height: 92px; clip-path: circle(48% at 50% 50%); object-fit: contain; display: block; margin: 0 auto 16px; filter: drop-shadow(0 10px 24px rgba(124,58,237,.32)); }
.game-idle-title { font-family: var(--display); font-size: 28px; margin-bottom: 6px; }
.game-idle-sub { color: var(--text-muted); margin: 0 auto 26px; max-width: 460px; font-size: 14px; line-height: 1.6; }
.game-idle-steps { display: flex; flex-direction: column; gap: 10px; text-align: left; margin-bottom: 26px; }
.gis { display: flex; gap: 14px; align-items: center; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; }
.gis-emoji { font-size: 22px; line-height: 1; flex-shrink: 0; }
.gis div { display: flex; flex-direction: column; gap: 2px; }
.gis strong { font-size: 14px; }
.gis span { font-size: 12.5px; color: var(--text-muted); }
.gis-black { border-left: 3px solid var(--black-num); }
.gis-red { border-left: 3px solid var(--red); }
.gis-green { border-left: 3px solid var(--green); }
.gis-none { border-left: 3px solid var(--border); }
.game-idle-start { font-size: 16px; padding: 13px 40px; }
.game-idle-hint { color: var(--text-muted); font-size: 12.5px; margin-top: 16px; }
.game-idle-wait { color: var(--text-muted); }

/* ===== GAME - CREATE-GAME CARD (mode selector + visibility) ===== */
.create-game {
  margin-top: 4px; padding: 22px 20px 24px; text-align: center;
  background: linear-gradient(180deg, var(--accent-soft), transparent 60%);
  border: 1px solid var(--border); border-radius: var(--radius);
}
.cg-head { margin-bottom: 18px; }
.cg-eyebrow {
  display: inline-block; text-transform: uppercase; letter-spacing: .14em;
  font-size: 10.5px; font-weight: 800; color: var(--accent);
  background: #fff; border: 1px solid var(--accent-mid);
  padding: 3px 12px; border-radius: 99px; margin-bottom: 10px;
}
.cg-title { font-family: var(--display); font-size: 21px; margin: 0 0 4px; }
.cg-sub { color: var(--text-muted); font-size: 13px; margin: 0; }

/* Reusable mode selector (also used later for live-game modifiers) */
.mode-selector { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-bottom: 18px; }
.mode-card {
  position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 6px;
  padding: 16px 14px 14px; text-align: left; cursor: pointer;
  white-space: normal; min-width: 0; overflow: hidden;
  background: #fff; color: inherit;
  border: 1.5px solid var(--border); border-radius: var(--radius-sm);
  box-shadow: none; transition: border-color .15s, box-shadow .15s, transform .15s;
}
.mode-card:hover { background: #fff; border-color: var(--accent-mid); box-shadow: 0 6px 18px rgba(124,58,237,.10); transform: translateY(-2px); }
.mode-card.selected { border-color: var(--accent); box-shadow: 0 8px 22px rgba(124,58,237,.16); }
.mode-card-emoji { font-size: 26px; line-height: 1; }
.mode-card-label { font-weight: 700; font-size: 14px; color: var(--text); }
.mode-card-desc { font-size: 12px; color: var(--text-muted); line-height: 1.45; }
.mode-card-count {
  margin-top: 2px; font-size: 11px; font-weight: 700; color: var(--accent);
  background: var(--accent-soft); border: 1px solid var(--accent-mid);
  padding: 2px 8px; border-radius: 99px;
}
.mode-card-check {
  position: absolute; top: 10px; right: 10px;
  width: 20px; height: 20px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #fff; background: var(--accent);
  opacity: 0; transform: scale(.6); transition: opacity .15s, transform .15s;
}
.mode-card.selected .mode-card-check { opacity: 1; transform: scale(1); }

/* ===== COMPETITIONS (duration + win conditions + trophies) ===== */
.comp-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.comp-fields label { display: flex; flex-direction: column; gap: 5px; font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.comp-fields label.hidden { display: none; }
.comp-period { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.comp-period.hidden { display: none; }
@media (max-width: 560px) { .comp-fields { grid-template-columns: 1fr; } }

.comp-row {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 11px 14px; margin-bottom: 8px;
  transition: border-color .15s, box-shadow .15s;
}
.comp-row:hover { border-color: var(--accent-mid); box-shadow: 0 4px 14px rgba(124,58,237,.08); }
.comp-row.editing { display: block; }
.comp-row.concluded { opacity: .85; }
.comp-row-icon {
  flex-shrink: 0; width: 38px; height: 38px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
  background: var(--accent-soft); border: 1px solid var(--accent-mid);
}
.comp-row-icon.won { background: #fef3c7; border-color: #fde68a; }
.comp-row-icon.ended { background: var(--surface2); border-color: var(--border); }
.comp-row-main { display: flex; flex-direction: column; gap: 4px; min-width: 0; flex: 1; }
.comp-row-cond { font-size: 13.5px; font-weight: 700; }
.comp-row-when { display: flex; flex-wrap: wrap; gap: 5px; }
.comp-chip {
  font-size: 11px; font-weight: 700; color: var(--accent);
  background: var(--accent-soft); border: 1px solid var(--accent-mid);
  padding: 2px 9px; border-radius: 99px; white-space: nowrap;
}
.comp-chip.muted { color: var(--text-muted); background: var(--surface2); border-color: var(--border); }
.comp-chip.gold { color: #b45309; background: #fef3c7; border-color: #fde68a; }
.comp-row-actions { display: flex; gap: 6px; flex-shrink: 0; }
.comp-row-btn { font-size: 12px; padding: 6px 12px; }
.comp-row-btn.comp-del:hover { background: #fee2e2; color: var(--red); border-color: #fecaca; }
.comp-empty { font-size: 13px; color: var(--text-muted); padding: 6px 0; }
.comp-history-label {
  text-transform: uppercase; letter-spacing: .1em; font-size: 10.5px; font-weight: 800;
  color: var(--text-muted); margin: 14px 0 8px;
}
.comp-new {
  border: 1px dashed var(--accent-mid); border-radius: var(--radius-sm);
  background: var(--accent-soft); padding: 4px 14px 14px; margin-top: 14px;
}
.comp-new .comp-history-label { color: var(--accent); margin-top: 10px; }

/* Owner-only "Create new competition" disclosure (collapsed by default) */
.comp-create { margin-top: 16px; }
.comp-create-toggle {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px; font-weight: 700; color: var(--accent);
  background: var(--accent-soft); border: 1.5px solid var(--accent-mid);
  padding: 9px 16px; border-radius: var(--radius-sm); transition: background .15s;
}
.comp-create-toggle::-webkit-details-marker { display: none; }
.comp-create-toggle::marker { content: ''; }
.comp-create-toggle:hover { background: var(--accent-mid); }
.comp-create[open] > .comp-new { margin-top: 12px; }

/* Competition win rows in the History tab */
.history-trophy td {
  background: linear-gradient(90deg, #fef9c3, #fef3c7) !important;
  border-left: 3px solid #f59e0b; font-size: 13px; padding: 12px 14px;
}
.history-trophy-date { float: right; color: #b45309; font-size: 12px; font-weight: 600; }

/* Collapsible Spin History card inside the Stats tab */
.stats-history { padding: 0; overflow: hidden; }
.stats-history > .table-scroll { padding: 0 20px 18px; }
.stats-history-summary {
  list-style: none; cursor: pointer; user-select: none;
  display: flex; align-items: center; gap: 10px;
  padding: 18px 20px;
}
.stats-history-summary::-webkit-details-marker { display: none; }
.stats-history-summary::after {
  content: '▸'; margin-left: auto; color: var(--text-muted);
  font-size: 13px; transition: transform .2s;
}
.stats-history[open] .stats-history-summary::after { transform: rotate(90deg); }
.stats-history-title { font-family: var(--display); font-weight: 700; font-size: 16px; }
.stats-history-count { font-size: 12px; color: var(--text-muted); font-weight: 600; }

/* Round-3 map empty state */
.round3-empty { color: var(--text-muted); font-size: 13px; font-style: italic; }

/* Competitions & Trophies card (Stats tab) */
.comp-stats-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 22px; }
@media (max-width: 700px) { .comp-stats-grid { grid-template-columns: 1fr; } }
.comp-stats-label {
  text-transform: uppercase; letter-spacing: .1em; font-size: 10.5px; font-weight: 800;
  color: var(--text-muted); margin: 4px 0 10px;
}
.tc-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; font-size: 13px; }
.tc-row .rank { width: 18px; text-align: center; font-weight: 800; color: var(--text-muted); font-size: 12px; }
.tc-row .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; }
.tc-row .nm { font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tc-bar-wrap { flex: 1; height: 8px; background: var(--surface2); border-radius: 99px; overflow: hidden; min-width: 40px; }
.tc-bar { height: 100%; border-radius: 99px; background: linear-gradient(90deg, #fbbf24, #f59e0b); min-width: 0; }
.tc-count { font-size: 12px; font-weight: 800; color: #b45309; flex-shrink: 0; }
.cp-block { margin-bottom: 16px; }
.cp-block:last-child { margin-bottom: 0; }
.cp-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.cp-title { font-size: 13px; font-weight: 700; }
.cp-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 12.5px; }
.cp-name { display: flex; align-items: center; gap: 6px; width: 110px; flex-shrink: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-name .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
.cp-bar-wrap { flex: 1; height: 10px; background: var(--surface2); border-radius: 99px; overflow: hidden; }
.cp-bar { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), #a855f7); transition: width .4s var(--ease-out); }
.cp-bar.neg { background: var(--red); opacity: .5; }
.cp-metric { font-size: 11.5px; font-weight: 700; color: var(--text-muted); flex-shrink: 0; min-width: 70px; text-align: right; }

/* Cloudflare Turnstile widget container (empty when captcha is off) */
.turnstile-box { margin-top: 14px; display: flex; justify-content: center; }
.turnstile-box:empty { margin: 0; }

/* Official trophy leaderboard (home page) */
.lb-row {
  display: flex; align-items: center; gap: 10px; padding: 9px 8px;
  border-radius: var(--radius-sm); font-size: 14px;
}
.lb-row + .lb-row { border-top: 1px solid var(--border-2); }
.lb-row.me { background: var(--accent-soft); }
.lb-rank { width: 26px; text-align: center; font-size: 16px; font-weight: 800; color: var(--text-muted); flex-shrink: 0; }
.lb-name { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-count {
  font-size: 13px; font-weight: 800; color: #b45309;
  background: #fef3c7; border: 1px solid #fde68a;
  padding: 3px 10px; border-radius: 99px; flex-shrink: 0;
}

/* Create-team photo picker */
.new-team-head { display: flex; align-items: center; gap: 12px; }
.new-team-photo {
  flex-shrink: 0; width: 52px; height: 52px; border-radius: 14px; cursor: pointer;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  background: var(--accent-soft); border: 1.5px dashed var(--accent-mid);
  transition: border-color .15s, background .15s;
}
.new-team-photo:hover { border-color: var(--accent); background: #fff; }
.new-team-photo img { width: 100%; height: 100%; object-fit: cover; }
.new-team-photo-hint { font-size: 10.5px; font-weight: 700; color: var(--accent); text-align: center; line-height: 1.2; }

/* Team photo in list rows */
.team-icon-img { border-radius: 8px; object-fit: cover; display: block; }

/* Official team badge + row accent */
.badge.official {
  background: #dbeafe; color: #1d4ed8; border: 1px solid #bfdbfe;
  font-weight: 700; margin-left: 6px;
}
.pub-team-row.official { border-color: #bfdbfe; background: linear-gradient(90deg, #eff6ff, transparent 60%); }

/* Public teams list (teams page) */
.pub-team-row {
  display: flex; align-items: center; gap: 12px; cursor: default;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  margin-bottom: 8px;
}
.pub-team-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.pub-team-title { display: flex; align-items: center; gap: 4px; }
.pub-team-title .team-row-name { font-weight: 700; font-size: 14px; }
.pub-team-meta { font-size: 12px; color: var(--text-muted); white-space: nowrap; }
.pub-team-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.pt-tag {
  font-size: 11px; font-weight: 600; color: var(--text);
  background: var(--surface2); border: 1px solid var(--border);
  padding: 2px 8px; border-radius: 99px; white-space: nowrap;
}
.pub-team-join { font-size: 12.5px; padding: 7px 18px; flex-shrink: 0; }

.badge.trophy { background: #fef3c7; color: #b45309; border: 1px solid #fde68a; }
.trophy-total {
  font-size: 13px; font-weight: 700; color: #b45309;
  background: #fef3c7; border: 1px solid #fde68a;
  padding: 3px 10px; border-radius: 99px; vertical-align: 2px; margin-left: 8px;
}

/* Mode badge on the active-game hero */
.game-hero-mode {
  background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.35);
  font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 99px;
  margin-left: auto; margin-right: 10px;
}

/* ===== GAME - ACTIVE HERO ===== */
.game-hero {
  position: relative; overflow: hidden;
  border-radius: var(--radius); padding: 22px 26px; margin-bottom: 20px;
  background: linear-gradient(125deg, var(--accent) 0%, var(--fuchsia) 100%);
  color: #fff; box-shadow: var(--shadow-lg);
  animation: heroIn .5s var(--ease-out) both;
}
.game-hero::before {
  content: ''; position: absolute; top: -40%; right: -10%;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.18), transparent 70%);
  pointer-events: none;
}
@keyframes heroIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.game-hero-top { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 1; }
.game-hero-eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: 11px; font-weight: 700; opacity: .9; }
.game-hero-end {
  background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.35);
  font-size: 12px; padding: 6px 14px; border-radius: 99px; box-shadow: none;
}
.game-hero-end:hover { background: rgba(255,255,255,.28); }
.game-hero-round { font-family: var(--display); font-size: 30px; font-weight: 800; margin: 12px 0 2px; position: relative; z-index: 1; -webkit-text-fill-color: #fff; }
.game-hero-round span { font-size: 18px; font-weight: 700; opacity: .7; }
.game-hero-desc { font-size: 13.5px; opacity: .94; max-width: 580px; position: relative; z-index: 1; }
.game-steps { display: flex; align-items: flex-start; margin-top: 20px; position: relative; z-index: 1; }
.game-step { flex: 1; display: flex; flex-direction: column; align-items: center; position: relative; }
.game-step::after { content: ''; position: absolute; top: 15px; left: 50%; width: 100%; height: 3px; background: rgba(255,255,255,.25); border-radius: 2px; }
.game-step:last-child::after { display: none; }
.game-step.done::after { background: rgba(255,255,255,.7); }
.game-step-dot {
  width: 32px; height: 32px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 14px; position: relative; z-index: 1;
  background: rgba(255,255,255,.2); color: #fff; border: 2px solid rgba(255,255,255,.5);
}
.game-step.active .game-step-dot { background: #fff; color: var(--accent); border-color: #fff; box-shadow: 0 0 0 5px rgba(255,255,255,.22); }
.game-step.done .game-step-dot { background: rgba(255,255,255,.92); color: var(--accent); border-color: rgba(255,255,255,.92); }
.game-step-name { margin-top: 8px; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.88); }

.players-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 14px; gap: 12px; }
.players-progress { color: var(--text-muted); font-size: 12.5px; margin-top: 2px; }
.ptr-who { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ptr-name { font-weight: 600; }
.ptr-msg { font-size: 13px; color: var(--text-muted); flex: 1; text-align: right; }
.ptr-wait { font-size: 13px; color: var(--text-muted); }
.ptr-spin { font-size: 13px; padding: 8px 16px; flex-shrink: 0; }

/* ===== SPECTATING (watch/replay a spin) ===== */
.players-head-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.ptr-watch {
  font-size: 12px;
  padding: 6px 12px;
  flex-shrink: 0;
  background: var(--surface2);
  color: var(--accent);
  border: 1px solid var(--accent-mid);
  box-shadow: none;
  filter: none;
}
.ptr-watch:hover { background: var(--accent-soft); color: var(--accent); box-shadow: none; filter: none; }
.ptr-watch-round { font-size: 13px; padding: 8px 14px; }

/* Game-master stock assignment: mode picker inside the wheel modal, plus the
   re-roll / add-stock controls on the Members tab. */
.wheel-modes { margin: 0 0 18px; text-align: left; }
.wheel-modes.hidden { display: none; }
.wheel-modes-note { font-size: 13px; color: var(--text-muted); margin-bottom: 10px; text-align: center; }
.uc-add-stock { font-size: 12px; padding: 5px 10px; }
.icon-reroll {
  background: var(--surface2);
  color: var(--accent);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 2px 7px;
  font-size: 12px;
  line-height: 1.5;
  box-shadow: none;
  filter: none;
  flex-shrink: 0;
}
.icon-reroll:hover { background: var(--accent-soft); border-color: var(--accent-mid); box-shadow: none; filter: none; transform: none; }
.history-replay {
  padding: 3px 9px;
  font-size: 11px;
  line-height: 1.4;
  background: var(--surface2);
  color: var(--accent);
  border: 1px solid var(--border);
  box-shadow: none;
  filter: none;
}
.history-replay:hover { background: var(--accent-soft); border-color: var(--accent-mid); box-shadow: none; filter: none; transform: none; }

@media (prefers-reduced-motion: reduce) { .game-hero { animation: none; } }

/* ===== STATS - LIVE PORTFOLIOS ===== */
.pf-panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 4px; }
.pf-panel-head h3 { font-size: 16px; }
.pf-sub { color: var(--text-muted); font-size: 12.5px; margin-top: 2px; }
.pf-asof { color: var(--text-muted); font-size: 12px; margin-bottom: 16px; }
/* Collapsible per-player list: click a row to reveal that player's stocks. */
.pf-list { display: flex; flex-direction: column; gap: 10px; }
.pf-item { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); overflow: hidden; box-shadow: var(--shadow-xs); }
.pf-item.open { box-shadow: var(--shadow-sm); }
.pf-row {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; background: var(--surface); color: var(--text);
  border: none; border-radius: 0; box-shadow: none; cursor: pointer; text-align: left;
  transition: background .15s;
}
.pf-row:hover { background: var(--surface2); box-shadow: none; transform: none; }
.pf-item.open .pf-row { background: var(--surface2); border-bottom: 1px solid var(--border); }
.pf-chevron { color: var(--text-muted); font-size: 13px; flex-shrink: 0; transition: transform .2s var(--ease-out); }
.pf-item.open .pf-chevron { transform: rotate(90deg); }
.pf-name { font-weight: 700; font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pf-count { color: var(--text-muted); font-size: 12px; margin-left: auto; white-space: nowrap; }
.pf-totals { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; line-height: 1.25; }
.pf-value { font-family: var(--display); font-weight: 800; font-size: 17px; }
.pf-pl { font-size: 12px; font-weight: 600; }
.pf-pl.pos { color: var(--green); }
.pf-pl.neg { color: var(--red); }
/* Animate open/close via grid-template-rows 0fr→1fr (no fixed max-height cap). */
.pf-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .25s var(--ease-out); }
.pf-item.open .pf-body { grid-template-rows: 1fr; }
.pf-body-inner { min-height: 0; overflow: hidden; }
.pf-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pf-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); font-weight: 700; padding: 9px 12px; border-bottom: 1px solid var(--border); }
.pf-table td { padding: 10px 12px; border-bottom: 1px solid var(--border-2); }
.pf-table tr:last-child td { border-bottom: none; }
.pf-table .num { text-align: right; white-space: nowrap; }
.pf-table th.num { text-align: right; }
.pf-table .pos { color: var(--green); font-weight: 600; }
.pf-table .neg { color: var(--red); font-weight: 600; }
.pf-co { color: var(--text-muted); font-size: 12px; margin-left: 8px; }
.pf-muted { color: var(--text-muted); }
.pf-rowval { font-weight: 600; }
.stats-empty { text-align: center; padding: 28px; }
@media (max-width: 480px) { .pf-co { display: none; } .pf-count { display: none; } }