/* =====================================================================
   PLAYPILE :: site/progress.css - daily challenge, continue playing,
   the profile page, the per-game bar and leaderboard, and the toasts.
   Uses the tokens in style.css. Owns nothing outside `.pp-*`.
   ===================================================================== */

.pp-bar{display:block;height:6px;border-radius:99px;background:#081326;overflow:hidden;
  border:1px solid var(--edge)}
.pp-bar i{display:block;height:100%;background:var(--accent);border-radius:99px;min-width:2px}
.pp-bar.big{height:10px;margin:8px 0 2px}
.pp-kick{font:10px/1.2 var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--accent)}
.pp-go{color:var(--accent);font:700 12px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.pp-empty{color:var(--dim);font-size:13.5px;margin:0}
.pp-av{display:block;flex:none}

/* ---- home: the daily card and your card, side by side ------------- */
.pp-home{margin:18px 0 0}
.pp-homegrid{display:grid;gap:var(--gap);grid-template-columns:minmax(0,1.62fr) minmax(0,1fr)}
@media (max-width:980px){.pp-homegrid{grid-template-columns:minmax(0,1fr)}}

.pp-daily{display:grid;grid-template-columns:minmax(0,42%) minmax(0,1fr);min-height:150px;
  background:var(--panel);border:1px solid var(--edge);border-radius:var(--r);overflow:hidden}
.pp-daily:hover{border-color:#2b4a73}
.pp-daily.done{border-color:rgba(34,211,122,.45)}
.pp-dshot{position:relative;background:#030812}
.pp-dshot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pp-dbody{display:flex;flex-direction:column;gap:7px;padding:14px 16px;min-width:0}
.pp-dtitle{font:700 20px/1.1 var(--mono);letter-spacing:.12em}
.pp-dgoal{color:var(--dim);font-size:13.5px;line-height:1.45}
.pp-dfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;flex-wrap:wrap}
.pp-streak{display:inline-flex;align-items:center;gap:5px;color:#ffc685;font:600 12px/1 var(--sans)}
.pp-streak svg{width:14px;height:14px}
@media (max-width:560px){
  .pp-daily{grid-template-columns:minmax(0,1fr)}
  .pp-dshot{aspect-ratio:16/7}
}

.pp-mecard{display:flex;align-items:center;gap:14px;padding:14px 16px;flex-wrap:wrap;
  background:var(--panel);border:1px solid var(--edge);border-radius:var(--r)}
.pp-mecard:hover{border-color:#2b4a73}
.pp-mecard > svg{border-radius:14px}
.pp-mebody{display:flex;flex-direction:column;gap:5px;flex:1;min-width:150px}
.pp-mebody b{font:700 16px/1.2 var(--sans);overflow-wrap:anywhere}
.pp-lv{color:var(--text);font:600 12.5px/1.2 var(--sans)}
.pp-mesub{color:var(--faint);font-size:12px}
.pp-lvchip{display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:var(--accent);color:var(--accent-ink);font:800 14px/1 var(--sans)}

/* ---- play page: your numbers, favourite, today, the board -------- */
.pp-play{margin-top:10px;display:flex;flex-direction:column;gap:10px}
.pp-gamebar{display:flex;align-items:center;gap:8px 18px;flex-wrap:wrap;padding:10px 12px;
  background:var(--panel);border:1px solid var(--edge);border-radius:8px}
.pp-stat{display:flex;flex-direction:column;line-height:1.2}
.pp-stat b{font:700 15px/1.2 var(--sans)}
.pp-stat small{color:var(--faint);font:10px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase}
.pp-sp{flex:1}
.pp-fav{display:inline-flex;align-items:center;gap:7px;padding:9px 12px;cursor:pointer;
  background:transparent;color:var(--dim);border:1px solid var(--edge);border-radius:7px;
  font:600 12px/1 var(--sans)}
.pp-fav svg{width:15px;height:15px}
.pp-fav:hover{color:var(--text);border-color:#2b4a73}
.pp-fav.on{color:#ff6b8b;border-color:rgba(255,107,139,.5);background:rgba(255,107,139,.08)}
.pp-today{padding:10px 12px;border-radius:8px;font-size:13.5px;color:var(--dim);
  background:rgba(34,211,122,.07);border:1px solid rgba(34,211,122,.3)}
.pp-today b{color:var(--accent)}
.pp-today .pp-bar{margin-top:7px}

.pp-board{padding:12px 14px;background:var(--panel);border:1px solid var(--edge);border-radius:8px}
.pp-bhead{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}
.pp-bhead b{font:700 14px/1.2 var(--sans)}
.pp-bhead small{color:var(--faint);font-size:12px}
.pp-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.pp-rows li{display:flex;align-items:center;gap:10px;padding:6px 8px;border-radius:7px;background:#0b1a30}
.pp-rows li.me{outline:1px solid rgba(34,211,122,.5)}
.pp-rows li svg{border-radius:50%}
.pp-rank{width:20px;text-align:right;color:var(--faint);font:700 12px/1 var(--mono)}
.pp-rname{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13.5px}
.pp-rows b{font:700 13.5px/1 var(--mono)}

/* ---- the profile page --------------------------------------------- */
.pp-me{padding:18px 0 40px}
.pp-hero{display:flex;align-items:center;gap:20px;flex-wrap:wrap;padding:20px;
  background:linear-gradient(135deg,#0f1f38,#0a1628);border:1px solid var(--edge);border-radius:14px}
.pp-hero > svg{border-radius:24px}
.pp-who{flex:1;min-width:220px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.pp-who h1{margin:0;font:800 clamp(22px,3vw,30px)/1.1 var(--sans);overflow-wrap:anywhere}
.pp-pill{display:inline-block;padding:4px 10px;border-radius:999px;font:700 11.5px/1.2 var(--sans);
  background:rgba(255,255,255,.06);color:var(--dim);border:1px solid var(--edge)}
.pp-pill.good{background:rgba(34,211,122,.12);color:#4fe39a;border-color:rgba(34,211,122,.4)}
.pp-pill.warn{background:rgba(255,177,94,.1);color:#ffc685;border-color:rgba(255,177,94,.35)}
.pp-lvrow{display:flex;gap:10px;align-items:baseline;flex-wrap:wrap;margin-top:6px;width:100%}
.pp-lvrow b{font:800 16px/1 var(--sans)}
.pp-lvrow span{color:var(--faint);font-size:12.5px}
.pp-who .pp-bar{width:100%;max-width:520px}
.pp-acts{margin-top:8px}
.pp-acts .btn{padding:11px 18px;letter-spacing:.1em}

.pp-tiles{display:grid;gap:var(--gap);margin-top:var(--gap);grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
@media (max-width:560px){.pp-tiles{grid-template-columns:1fr 1fr;gap:10px}}
.pp-tile{padding:14px;background:var(--panel);border:1px solid var(--edge);border-radius:var(--r)}
.pp-tile b{display:block;font:800 22px/1.1 var(--sans)}
.pp-tile b i{font-style:normal;color:var(--faint);font-size:14px;font-weight:600}
.pp-tile small{color:var(--faint);font:10px/1.4 var(--mono);letter-spacing:.14em;text-transform:uppercase}

.pp-badges{display:grid;gap:10px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr))}
@media (max-width:560px){.pp-badges{grid-template-columns:1fr}}
.pp-badge{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--r);
  background:var(--panel);border:1px solid var(--edge);opacity:.55}
.pp-badge.on{opacity:1;border-color:rgba(34,211,122,.4)}
.pp-bi{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;flex:none;
  background:#081326;color:var(--faint)}
.pp-badge.on .pp-bi{background:var(--accent);color:var(--accent-ink)}
.pp-bi svg{width:20px;height:20px}
.pp-badge b{display:block;font:700 13.5px/1.25 var(--sans)}
.pp-badge small{color:var(--faint);font-size:12px;line-height:1.35}
.pp-top{margin:0;padding:0 0 0 22px;display:flex;flex-direction:column;gap:6px}
.pp-top li{color:var(--dim)}
.pp-top a{color:var(--text);font-weight:600;margin-right:10px}
.pp-top a:hover{color:var(--accent)}
.pp-top span{font-size:13px;color:var(--faint)}
.pp-fine{margin-top:28px;color:var(--faint);font-size:12.5px;max-width:80ch}

/* ---- toasts: on the site, top centre, never inside a game ---------- */
.pp-toasts{position:fixed;z-index:950;top:calc(var(--topbar) + 12px);left:50%;transform:translateX(-50%);
  display:flex;flex-direction:column;gap:8px;width:min(360px,calc(100vw - 32px));pointer-events:none}
.pp-toast{pointer-events:auto;cursor:pointer;display:flex;align-items:center;gap:12px;padding:12px 14px;
  background:#0f1f38;color:var(--text);border:1px solid rgba(34,211,122,.5);border-radius:12px;
  box-shadow:0 14px 40px rgba(0,0,0,.5);animation:pp-in .25s ease-out;transition:opacity .3s,transform .3s}
.pp-toast.out{opacity:0;transform:translateY(-8px)}
.pp-toast b{display:block;font:700 14px/1.3 var(--sans)}
.pp-toast small{display:block;color:var(--dim);font-size:12.5px;line-height:1.35}
.pp-ti{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;flex:none;
  background:var(--accent);color:var(--accent-ink)}
.pp-ti svg{width:18px;height:18px}
.pp-ti .pp-lvchip{width:34px;height:34px}
@keyframes pp-in{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.pp-toast{animation:none}}