/* index page styles: home blocks fed by the API (hero slabs, stats, fates art,
   top strategies, recent wins, live recompute, $BIND numbers).
   Colours come from theme.css / the .pgl tokens only (palette is switched site-wide). */

/* ── shared loading skeleton ──────────────────────────────── */
@keyframes hm-shimmer {
  0% { background-position: 120% 0; }
  100% { background-position: -20% 0; }
}
.pgl .sk,
.pgl .sk-line,
.pgl .sk-img,
.pgl .slab .ph,
.pgl .kp-slab .ph,
.pgl .ph-card,
.pgl .art-rf .grid .cell,
.pgl main .win-row img,
.pgl .art-rf .grid img {
  background: linear-gradient(100deg, rgba(var(--red-hot-rgb), 0.04) 30%, rgba(var(--red-hot-rgb), 0.12) 50%, rgba(var(--red-hot-rgb), 0.04) 70%);
  background-size: 260% 100%;
  animation: hm-shimmer 1.6s ease-in-out infinite;
}
.pgl .sk-line { display: block; height: 12px; width: 70%; border-radius: 4px; }
/* a loaded photo or a "no data" placeholder stops shimmering */
.pgl main .win-row img.ld,
.pgl main .art-rf .grid img.ld { background: none; }
.pgl main .win-row img.ld,
.pgl main .art-rf .grid img.ld:not(.hit) { animation: none; }
.pgl .art-rf .grid.is-idle .cell,
.pgl .kp-slab.is-idle .ph,
.pgl .ph-card.is-idle { animation: none; }
.pgl [hidden] { display: none !important; }

/* small secondary text: readable on the dark background (cream-dim is ~3.4:1) */
.pgl { --hm-dim: color-mix(in srgb, var(--pgl-cream) 56%, transparent); }
.pgl .trust .wrap .row { color: var(--hm-dim); }
.pgl main .win-row .ago,
.pgl main .win-row .t .src { color: var(--hm-dim); }

/* keyboard focus, on-palette and the same everywhere on the page */
.pgl main a:focus-visible,
.pgl main button:focus-visible { outline: 2px solid var(--pgl-red-hot); outline-offset: 3px; }
.pgl main .btn:focus-visible { outline-offset: 2px; }

/* inline state messages (empty / error) */
.pgl .hm-state {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 16px;
  padding: 22px 20px;
  border: 1px dashed var(--pgl-edge);
  border-radius: var(--pgl-rcard);
  font-family: var(--pgl-fmono);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--pgl-cream-mute);
}
.pgl .hm-state b { color: var(--pgl-cream); }
.pgl .hm-state.err { border-color: rgba(var(--red-hot-rgb), 0.35); }
.pgl .hm-state a:not(.btn) { color: var(--pgl-cream); border-bottom: 1px solid var(--pgl-red-hot); }
.pgl .hm-state .btn { margin-left: auto; }
.pgl .statnote button,
.pgl .hm-retry {
  font: inherit;
  color: var(--pgl-cream);
  background: none;
  border: 0;
  border-bottom: 1px solid var(--pgl-red-hot);
  padding: 0;
  cursor: pointer;
}

/* ── hero slabs ───────────────────────────────────────────── */
.pgl .slab { display: block; color: inherit; }
.pgl .slab .ph { display: block; width: 100%; aspect-ratio: 1 / 1.62; }
.pgl .slab:not(.is-empty) .ph { display: none; }
.pgl .slab img { opacity: 0; transition: opacity 0.6s var(--pgl-eout); }
.pgl .slab:not(.is-empty) img { opacity: 1; }
.pgl .slab.is-blank .ph { animation: none; }
.pgl a.slab:focus-visible { outline: 2px solid var(--pgl-red-hot); outline-offset: 4px; }
.pgl .stage-cap {
  margin-top: 6px;
  text-align: center;
  font-family: var(--pgl-fmono);
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--pgl-cream-mute);
  min-height: 1.6em;
  padding: 0 8px;
  text-wrap: balance;
}
.pgl .stage-cap b { color: var(--pgl-cream); font-weight: 700; }
.pgl .stage-cap .g { color: var(--pgl-trust); font-weight: 700; }
.pgl .stage-cap a { color: var(--pgl-cream); border-bottom: 1px dashed var(--pgl-cream-dim); }
/* two-column hero between 960 and 1199px: the fanned slabs are wider than their column,
   so they ran into the sub-copy and off the right edge. `scale` composes with the tilt transform. */
@media (min-width: 960px) and (max-width: 1079px) { .pgl .slabs { scale: 0.78; } }
@media (min-width: 1080px) and (max-width: 1199px) { .pgl .slabs { scale: 0.9; } }
@media (max-width: 640px) {
  .pgl .slabs-stage .slabs { margin: -20px 0 -10px; }
  .pgl .stage-cap { font-size: 11px; }
}

/* ── stats strip ──────────────────────────────────────────── */
.pgl .statstrip[aria-busy="true"] .stat .n { color: var(--pgl-cream-dim); }
.pgl .statnote {
  padding-bottom: 14px;
  text-align: center;
  font-family: var(--pgl-fmono);
  font-size: 11.5px;
  color: var(--pgl-cream-mute);
}
.pgl .tok-note { padding: 18px 0 0; text-align: left; }

/* ── thesis link ──────────────────────────────────────────── */
.pgl .thesis .sub a {
  color: var(--pgl-cream);
  border-bottom: 1px solid var(--pgl-red-hot);
  white-space: nowrap;
}
.pgl .thesis .sub a::after { content: " →"; color: var(--pgl-red-hot); }

/* ── three fates art ──────────────────────────────────────── */
.pgl .game .cta .fate-n:not(:empty) { margin-left: 0.5em; opacity: 0.8; }
.pgl .art-rf .grid img,
.pgl .art-rf .grid .cell {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 2px;
}
.pgl .art-rf .grid .cell { opacity: 0.6; }
.pgl .art-up .usdc { width: 60px; height: 60px; border-radius: 50%; box-shadow: 0 8px 16px rgba(0, 0, 0, 0.5); }
.pgl .art-up .ph-card { display: block; width: 88px; aspect-ratio: 1 / 1.62; border-radius: 5px; }
.pgl .art-kp { display: grid; place-items: center; }
.pgl .art-kp .kp-slab {
  width: 84px;
  border-radius: 6px;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(var(--gold-rgb), 0.28);
  animation: hm-kpFloat 4s ease-in-out infinite;
}
.pgl .art-kp .kp-slab img { display: block; width: 100%; border-radius: 0; box-shadow: none; }
.pgl .art-kp .kp-slab .ph { display: block; width: 100%; aspect-ratio: 1 / 1.62; }
.pgl .art-kp .kp-slab.has-img .ph { display: none; }
.pgl .art-kp::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 150px;
  height: 150px;
  margin: -75px 0 0 -75px;
  border-radius: 50%;
  border: 1px dashed rgba(var(--gold-rgb), 0.28);
  animation: hm-kpRing 18s linear infinite;
}
.pgl .art-kp .kp-stamp {
  position: absolute;
  right: 18px;
  bottom: 16px;
  transform: rotate(-8deg);
  font-family: var(--pgl-fmono);
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--pgl-trust);
  border: 1.5px solid rgba(var(--gold-rgb), 0.7);
  border-radius: 4px;
  padding: 4px 7px;
  background: rgba(var(--bg-rgb), 0.7);
  animation: hm-kpStamp 4s ease-in-out infinite;
}
@keyframes hm-kpFloat { 50% { transform: translateY(-7px); } }
@keyframes hm-kpRing { to { transform: rotate(360deg); } }
@keyframes hm-kpStamp {
  0%, 30% { opacity: 0.35; transform: rotate(-8deg) scale(1.15); }
  45%, 100% { opacity: 1; transform: rotate(-8deg) scale(1); }
}

/* ── how a strategy runs ──────────────────────────────────── */
.pgl .runs-head { margin: 64px 0 22px; }
.pgl .runs-h {
  font-family: var(--pgl-fdisp);
  font-size: clamp(22px, 3vw, 30px);
  line-height: 1.05;
  margin-top: 8px;
  text-wrap: balance;
}
.pgl .runs-grid .tok .n { color: var(--pgl-red-hot); }

/* ── top strategies ───────────────────────────────────────── */
.pgl .strat {
  container-type: inline-size;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 18px;
  min-height: 212px;
  border-radius: var(--pgl-rcard);
  border: 1px solid var(--pgl-edge);
  background: var(--pgl-cardbg);
  box-shadow: var(--pgl-cardelev);
  transition: transform 0.2s var(--pgl-eout), border-color 0.2s, box-shadow 0.2s var(--pgl-eout);
}
.pgl a.strat:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--red-hot-rgb), 0.45);
  box-shadow: var(--pgl-cardelev), 0 22px 44px -22px rgba(0, 0, 0, 0.9);
}
.pgl a.strat:focus-visible { outline: 2px solid var(--pgl-red-hot); outline-offset: 3px; }
.pgl .strat.sk { border-style: dashed; }
.pgl .strat-top { display: flex; align-items: center; gap: 13px; min-width: 0; }
.pgl .strat-img {
  flex: 0 0 auto;
  width: 54px;
  height: 54px;
  border-radius: 12px;
  overflow: hidden;
  display: grid;
  place-items: center;
  background: radial-gradient(100% 100% at 50% 30%, rgba(var(--red-hot-rgb), 0.18), rgba(var(--bg-rgb), 0.9));
  border: 1px solid var(--pgl-line);
  font-family: var(--pgl-fdisp);
  font-size: 18px;
  color: var(--pgl-cream-mute);
}
.pgl .strat-img img { width: 100%; height: 100%; object-fit: cover; }
.pgl .strat-img img[src$=".png"] { object-fit: contain; padding: 4px; }
.pgl .strat-id { min-width: 0; flex: 1; }
.pgl .strat-id h3 {
  font-family: var(--pgl-fbody);
  font-weight: 800;
  font-size: 17px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pgl .strat-id .tk {
  display: inline-block;
  margin-top: 3px;
  font-family: var(--pgl-fmono);
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--pgl-red-hot);
}
.pgl .strat-top .go {
  flex: 0 0 auto;
  color: var(--pgl-cream-dim);
  transition: transform 0.15s var(--pgl-espring), color 0.15s;
}
.pgl a.strat:hover .go { color: var(--pgl-red-hot); transform: translateX(3px); }
.pgl .strat-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.pgl .strat-chips span {
  font-family: var(--pgl-fmono);
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--pgl-cream-mute);
  border: 1px solid var(--pgl-edge);
  border-radius: var(--pgl-rchip);
  padding: 3px 7px;
  white-space: nowrap;
}
.pgl .strat-chips span.mode { color: var(--pgl-cream); border-color: rgba(var(--red-hot-rgb), 0.5); background: rgba(var(--red-rgb), 0.18); }
.pgl .strat-stats {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  padding-top: 13px;
  border-top: 1px solid var(--pgl-line);
}
.pgl .strat-stats .k {
  display: block;
  font-family: var(--pgl-fmono);
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--hm-dim);
  margin-bottom: 4px;
  white-space: nowrap;
}
.pgl .strat-stats .v {
  display: block;
  font-family: var(--pgl-fmono);
  font-weight: 700;
  font-size: 14px;
  color: var(--pgl-cream);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pgl .strat-stats .v i { font-style: normal; font-size: 11px; font-weight: 700; margin-left: 4px; }
.pgl .strat-stats .v i.up { color: var(--good); }
.pgl .strat-stats .v i.dn { color: var(--pgl-red-hot); }
.pgl .strat-grid + .wins-more { margin-top: 26px; }

/* ── recent wins ──────────────────────────────────────────── */
.pgl .win-row .t { min-width: 0; overflow-wrap: anywhere; }
.pgl .win-row .t .txs { color: var(--hm-dim); }
.pgl .win-row .t .txs.sim { color: var(--pgl-trust); opacity: 0.8; }
.pgl .sk-row { min-height: 111px; }
.pgl .sk-row .sk-img { flex: 0 0 auto; width: 56px; height: 78px; border-radius: 6px; }
.pgl .sk-row .sk-line { width: min(420px, 60%); }
.pgl .wins-list .hm-state { margin: 16px 0; }
@media (max-width: 640px) {
  .pgl main .win-row { gap: 13px; padding: 14px 4px; }
  .pgl main .win-row img, .pgl main .sk-row .sk-img { width: 46px; height: 64px; }
  .pgl main .win-row .t { font-size: 12.5px; }
  .pgl main .win-row .chev { display: none; }
}

/* ── live recompute terminal ──────────────────────────────── */
.pgl .vrf-grid .vrf-card p code { white-space: nowrap; }
.pgl .vt-row .k { flex: 0 0 auto; }
.pgl main .vt-row .v { text-align: right; min-width: 0; max-width: 62%; }
.pgl .vt-row .v a { color: inherit; border-bottom: 1px dashed currentColor; }
.pgl .vt-row .v .mk { display: inline-block; margin-right: 6px; font-weight: 700; }
.pgl .vt-row .v .mk.ok { color: var(--good); }
.pgl .vt-row .v .mk.bad { color: var(--sw-danger); }
.pgl .vt-row .v .src { color: var(--hm-dim); }
.pgl .vt-row .v.run { color: var(--pgl-cream-dim); animation: k-blink 1s ease-in-out infinite; }
.pgl main .vt-verdict.ok { color: var(--good); }
.pgl main .vt-verdict.bad { color: var(--sw-danger); }
.pgl .vt-verdict .why { display: block; margin-top: 6px; font-weight: 400; font-size: 11.5px; color: var(--pgl-cream-mute); }
.pgl .vt-actions .btn[disabled] { opacity: 0.5; cursor: not-allowed; transform: none; }
@media (max-width: 640px) {
  .pgl main .vt-row { flex-wrap: wrap; gap: 2px 12px; }
  .pgl main .vt-row .v { max-width: 100%; text-align: left; flex: 1 1 100%; }
  .pgl main .vt-row .v[data-vt="draw"] { white-space: normal; }
  .pgl main .vt-actions .btn { flex: 1; }
}

/* ── $BIND live numbers ───────────────────────────────────── */
.pgl #hm-token .tok { display: flex; flex-direction: column; }
.pgl #hm-token .tok p { margin-bottom: 16px; }
.pgl .tok-live {
  margin-top: auto;
  padding-top: 13px;
  border-top: 1px solid var(--pgl-line);
  font-family: var(--pgl-fmono);
  font-size: 11.5px;
  line-height: 1.55;
  color: var(--pgl-cream-mute);
  min-height: 52px;
}
.pgl .tok-live b {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: var(--pgl-cream);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
}
.pgl .tok-live b.gold { color: var(--pgl-trust); }
@media (min-width: 720px) { .pgl .tok-live { min-height: 80px; } }
@media (min-width: 720px) and (max-width: 1039px) {
  .pgl #hm-token,
  .pgl .runs-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.pgl .tok-live .sk-line { margin-top: 4px; height: 18px; width: 60%; }
.pgl .tok-live a { color: var(--pgl-cream); border-bottom: 1px dashed var(--pgl-cream-dim); }
.pgl #hm-token .tok .n { color: var(--pgl-trust); }

/* ── header fix: the page's inline .btn rule un-hid the nav wallet button on
      narrow screens and pushed Deploy + the burger off-canvas ───────── */
.pgl header.nav .sw-nav-wallet { display: none; }
@media (min-width: 1100px) { .pgl header.nav .sw-nav-wallet { display: inline-flex; } }

/* ── mobile ───────────────────────────────────────────────── */
@media (max-width: 640px) {
  .pgl main .sec { padding: 64px 0; }
  .pgl main .thesis { padding: 52px 0; }
  .pgl .runs-head { margin-top: 48px; }
  .pgl .strat { min-height: 0; }
  /* compact draw steps: number beside the title */
  .pgl main .vrf-grid { gap: 12px; }
  .pgl main .vrf-card { display: grid; grid-template-columns: 30px 1fr; gap: 6px 12px; padding: 16px; }
  .pgl main .vrf-card .n { grid-row: span 2; margin: 0; }
  .pgl main .vrf-card h3 { margin: 4px 0 0; font-size: 16px; }
  .pgl main .vrf-card p { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .pgl .sk, .pgl .sk-line, .pgl .sk-img, .pgl .slab .ph, .pgl .kp-slab .ph, .pgl .ph-card, .pgl .art-rf .grid .cell { animation: none !important; }
}
.pgl .wins-more [data-count]:empty { display: none; }
@container (max-width: 330px) {
  .pgl .strat-stats .v { white-space: normal; }
  .pgl .strat-stats .v i { display: block; margin: 2px 0 0; }
}