:root {
  /* India flag palette, per request */
  --saffron: #FF671F;
  --white: #FFFFFF;
  --green: #046A38;
  --navy: #06038D;
  /* Not part of the flag palette — the flag's 4 colors are already spoken
     for by Shop/Vault/Board/Tickets, so Goldfang gets its own themed gold. */
  --gold: #D4AF37;

  --bg: #10121a;
  --card-bg: #1a1d29;
  --card-border: #2a2e40;
  --text: #f0f0f5;
  --text-dim: #9a9db0;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

#app {
  max-width: 480px;
  margin: 0 auto;
  padding: 12px 12px 90px;
}

.card {
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 14px;
  padding: 14px;
}

.header-card {
  /* India flag wash (saffron -> white -> green), same diagonal as the
     reference image. A dark overlay is layered on top (first background
     listed = topmost) so the existing light/white text stays readable
     where it crosses the white band — a plain saffron/white/green gradient
     alone would make display-name/user-id's white text vanish there. */
  background:
    linear-gradient(135deg, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0.2) 50%, rgba(0, 0, 0, 0.45)),
    linear-gradient(
      135deg,
      var(--saffron) 0%, var(--saffron) 28%,
      var(--white) 38%, var(--white) 62%,
      var(--green) 72%, var(--green) 100%
    );
  border: none;
  margin-bottom: 14px;
}

.header-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.avatar {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.header-text { overflow: hidden; }

.display-name {
  font-size: 18px;
  font-weight: 700;
  color: var(--white);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-id {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.75);
}

.goldfang-row {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  background: rgba(0, 0, 0, 0.25);
  border-radius: 10px;
  padding: 8px 12px;
  width: fit-content;
}

.goldfang-icon { font-size: 16px; }

#goldfang-balance {
  font-weight: 700;
  color: var(--white);
}

.goldfang-label {
  color: rgba(255, 255, 255, 0.75);
  font-size: 13px;
}

.join-group-link {
  display: inline-block;
  margin-top: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.15);
  color: var(--white);
  font-size: 13px;
  font-weight: 600;
  text-decoration: none;
}

.tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 10;
  display: flex;
  flex-direction: row;
  background: var(--card-bg);
  border-top: 1px solid var(--card-border);
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
}

.tab {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  background: transparent;
  border: none;
  color: var(--text-dim);
  border-radius: 10px;
  padding: 6px 2px;
  font-size: 11px;
  margin: 0 2px;
}

.tab-emoji { font-size: 20px; }
.tab-label { font-weight: 600; }

/* Each tab gets its own active color, one per India-flag stripe (gold for
   Goldfang, since the flag's own 4 colors were already spoken for). */
.tab.active { font-weight: 700; }

.tab.active[data-tab="shop"] {
  background: var(--saffron);
  color: #1a1000;
}

.tab.active[data-tab="vault"] {
  background: var(--white);
  color: var(--navy);
}

.tab.active[data-tab="leaderboard"] {
  background: var(--green);
  color: var(--white);
}

.tab.active[data-tab="tickets"] {
  background: var(--navy);
  color: var(--white);
}

.tab.active[data-tab="goldfang"] {
  background: var(--gold);
  color: #1a1000;
}

.panel { display: none; }
.panel.active { display: block; }

.panel-hint {
  color: var(--text-dim);
  font-size: 12px;
  margin: 0 0 10px 2px;
}

.team-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin-bottom: 12px;
}

.team-chip {
  flex: 0 0 auto;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 8px 12px;
  font-size: 13px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.team-chip.active {
  border-color: var(--green);
  background: rgba(4, 106, 56, 0.25);
}

.list { display: flex; flex-direction: column; gap: 8px; }

.row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 12px;
  padding: 12px;
}

.row-main { display: flex; align-items: center; gap: 10px; min-width: 0; }
.row-emoji { font-size: 20px; flex-shrink: 0; }

.row-title {
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.row-sub {
  font-size: 12px;
  color: var(--text-dim);
}

.btn {
  border: none;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  font-weight: 700;
  flex-shrink: 0;
}

/* Each screen's buttons/badges match that screen's own tab color (see the
   bottom nav's .tab.active rules) — Buy stays saffron since Shop already is;
   Activate switches from a generic green to Vault's own white. */
.btn-buy { background: var(--saffron); color: #1a1000; }
.btn-activate { background: var(--white); color: var(--navy); }
.btn:disabled { background: var(--card-border); color: var(--text-dim); }

.rank-badge {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 700;
  background: var(--green);
  color: var(--white);
  flex-shrink: 0;
}

/* Same per-screen color, applied as each panel's own row accent — Board's
   rank-badge already carries it, Shop's Buy/Vault's Activate buttons already
   do too, so these cover Tickets and Goldfang (and restate Board/Shop/Vault
   on the row itself for one consistent rule covering every screen). */
#panel-shop .row { border-left: 3px solid var(--saffron); }
#panel-vault .row { border-left: 3px solid var(--white); }
#panel-leaderboard .row { border-left: 3px solid var(--green); }
#panel-tickets .row { border-left: 3px solid var(--navy); }
#panel-goldfang .row { border-left: 3px solid var(--gold); }

.notice {
  background: rgba(255, 103, 31, 0.15);
  border: 1px solid var(--saffron);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 13px;
  margin-bottom: 10px;
}

.delta-positive { color: var(--green); font-weight: 700; }
.delta-negative { color: var(--saffron); font-weight: 700; }

.empty-state {
  color: var(--text-dim);
  text-align: center;
  padding: 24px 0;
  font-size: 13px;
}

.toast {
  position: fixed;
  bottom: 16px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--card-bg);
  border: 1px solid var(--card-border);
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 13px;
  max-width: 90%;
  text-align: center;
}