/* The progress tab: the card-game look of game.css (--gm-*), phone first. Every class is `gm-pr-`. The tab fills the page's root and
   scrolls inside itself; the tabs stay at the top. */

.gm-pr-host[hidden] { display: none; }
.gm-pr-host { position: fixed; inset: 0; z-index: 5; background: var(--gm-bg); }

.gm-pr, .gm-pr * { box-sizing: border-box; }
.gm-pr {
  width: 100%; max-width: 100%; height: 100%; display: flex; flex-direction: column; color: var(--gm-text); font-size: 15px; overflow: hidden;
  padding: 0 16px calc(var(--pg-inset-bottom, env(safe-area-inset-bottom, 0px)) + 16px);
}

/* The header and the tabs stay on top; only the body scrolls, and it is opaque behind them. */
.gm-pr-top {
  flex: 0 0 auto; display: flex; flex-direction: column; gap: 10px; min-width: 0;
  padding: calc(var(--pg-inset-top, env(safe-area-inset-top, 0px)) + 12px) 0 10px; background: var(--gm-bg); position: relative; z-index: 2;
}
.gm-pr-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.gm-pr-title { margin: 0; font-size: 24px; font-weight: 900; }
.gm-pr-close {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0;
  color: var(--gm-text); background: var(--gm-surface); border: 1px solid var(--gm-line); border-radius: 50%; cursor: pointer;
}
.gm-pr-close svg { width: 20px; height: 20px; display: block; }

.gm-pr-tabs { display: flex; gap: 6px; min-width: 0; max-width: 100%; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.gm-pr-tabs::-webkit-scrollbar { display: none; }
.gm-pr-tab {
  flex: 0 0 auto; font: inherit; font-size: 14px; font-weight: 700; color: var(--gm-dim); background: var(--gm-surface);
  border: 1px solid var(--gm-line); border-radius: 999px; padding: 7px 13px; cursor: pointer;
}
.gm-pr-tab[aria-selected="true"] { color: var(--gm-on-accent); background: var(--gm-accent); border-color: var(--gm-accent); }

.gm-pr-body { flex: 1 1 auto; min-width: 0; min-height: 0; overflow-y: auto; overflow-x: hidden; padding-right: 12px; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 12px; padding-bottom: 8px; }
.gm-pr-body > * { flex: 0 0 auto; }

.gm-pr-stack { display: flex; flex-direction: column; gap: 12px; }
.gm-pr-grid-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; }
@media (min-width: 560px) { .gm-pr-grid-cards { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.gm-pr-sub { margin: 0; color: var(--gm-dim); font-size: 13px; }
.gm-pr-h { margin: 0 0 8px; font-size: 13px; font-weight: 800; color: var(--gm-dim); letter-spacing: .06em; text-transform: uppercase; }
.gm-pr-block { display: flex; flex-direction: column; gap: 8px; }
.gm-pr-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.gm-pr-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gm-pr-asset { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }

.gm-pr-tag {
  flex: 0 0 auto; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--gm-dim);
  border: 1px solid var(--gm-line); border-radius: 999px; padding: 2px 8px;
}
.gm-pr-tag--done { color: var(--gm-up); border-color: var(--gm-up); }
.gm-pr-card > .gm-pr-tag { align-self: flex-start; max-width: 100%; white-space: normal; }

/* Stats */
.gm-pr-hero { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 16px; border-radius: 22px; background: var(--gm-surface); border: 1px solid var(--gm-line); text-align: center; }
.gm-pr-big { margin: 0; font-size: 44px; font-weight: 900; font-variant-numeric: tabular-nums; }
.gm-pr-big--empty { font-size: 17px; font-weight: 700; color: var(--gm-dim); }
.gm-pr-grid { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; }
.gm-pr-metric { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 12px; border-radius: 16px; background: var(--gm-surface); border: 1px solid var(--gm-line); }
.gm-pr-metric-label { color: var(--gm-dim); font-size: 12px; }
.gm-pr-metric-value { margin: 0; font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums; }

.gm-pr-bar-row { display: grid; grid-template-columns: minmax(0, 88px) minmax(0, 1fr) minmax(0, max-content); align-items: center; gap: 10px; font-size: 13px; min-width: 0; }
.gm-pr-bar { height: 8px; border-radius: 999px; background: var(--gm-track); border: 1px solid var(--gm-line); overflow: hidden; }
.gm-pr-bar-fill { height: 100%; border-radius: inherit; background: var(--gm-accent); }
.gm-pr-bar-fill--up { background: var(--gm-up); }
.gm-pr-bar-fill--down { background: var(--gm-down); }
.gm-pr-bar-value { font-variant-numeric: tabular-nums; color: var(--gm-dim); text-align: right; max-width: 150px; overflow-wrap: anywhere; }

.gm-pr-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.gm-pr-list-item {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto; min-width: 0; align-items: center; gap: 8px; padding: 10px 12px;
  border-radius: 14px; background: var(--gm-surface); border: 1px solid var(--gm-line); font-size: 14px;
}
.gm-pr-list-value { font-variant-numeric: tabular-nums; color: var(--gm-dim); white-space: nowrap; }

/* Quests and achievements */
.gm-pr-card {
  display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 18px; background: var(--gm-surface); border: 1px solid var(--gm-line);
}
.gm-pr-card[data-done="true"], .gm-pr-card[data-unlocked="true"] { border-color: var(--gm-up); }
.gm-pr-card-title { margin: 0; font-size: 16px; font-weight: 800; }
.gm-pr-card-text { margin: 0; color: var(--gm-dim); font-size: 14px; }
.gm-pr-achievement[data-unlocked="false"] { opacity: .75; }

/* Leaderboard: one grid for the header and every row, so the columns line up: rank | player (with YOU) | won | accuracy. */
.gm-pr-board { display: flex; flex-direction: column; min-width: 0; font-size: 14px; }
.gm-pr-lb {
  display: grid; grid-template-columns: 28px minmax(0, 1fr) 44px 68px; align-items: center; gap: 6px; min-width: 0;
  padding: 10px 8px; border-bottom: 1px solid var(--gm-line); border-radius: 10px;
}
.gm-pr-lb--head { padding: 6px 8px; font-size: 12px; font-weight: 700; color: var(--gm-dim); border-bottom-width: 1px; }
.gm-pr-lb-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gm-pr-lb-player { display: flex; align-items: center; gap: 6px; min-width: 0; }
.gm-pr-lb--you { color: var(--gm-text); background: rgba(59, 130, 246, .16); font-weight: 700; }
.gm-pr-gap { margin: 14px 0 0; color: var(--gm-dim); font-size: 12px; font-weight: 700; }

/* History */
.gm-pr-entry { gap: 10px; }
.gm-pr-combo-card { grid-template-columns: auto minmax(0, 1fr) auto auto auto; }
.gm-pr-side { font-size: 11px; font-weight: 900; letter-spacing: .05em; padding: 2px 7px; border-radius: 6px; color: #fff; }
.gm-pr-side--up { background: var(--gm-upper); }
.gm-pr-side--down { background: var(--gm-lower); }
.gm-pr-outcome { font-size: 12px; color: var(--gm-dim); white-space: nowrap; }
.gm-pr-money { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; }
.gm-pr-money[data-tone="gain"], .gm-pr-total[data-tone="gain"] { color: var(--gm-up); }
.gm-pr-money[data-tone="loss"], .gm-pr-total[data-tone="loss"] { color: var(--gm-down); }
.gm-pr-total { margin: 0; text-align: right; font-weight: 800; font-variant-numeric: tabular-nums; }

@media (max-width: 380px) {
  .gm-pr-combo-card { grid-template-columns: auto minmax(0, 1fr) auto; }
  .gm-pr-combo-card .gm-pr-outcome { grid-column: 2; }
}