/* ============================================================
   Poncash design system + persistent shell.
   Page-specific rules live in styles/<page>.css, linked AFTER
   this file so page rules win on ties. Source order beats
   specificity guesses, so never rely on a media query to
   out-rank a later plain rule.
   ============================================================ */

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

/* The hidden attribute loses to any explicit display value, and this sheet sets
   display on nearly everything. Make [hidden] win once, here. */
[hidden] { display: none !important; }

html, body { height: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

html.modal-open body { overflow: hidden; }

a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
img, svg { display: block; max-width: 100%; }
:focus-visible { outline: 2px solid var(--primary-soft); outline-offset: 2px; border-radius: 6px; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 20px; border: 3px solid var(--bg); }

/* ---------- typography ---------- */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.012em;
  line-height: 0.88;
  margin: 0;
}
.display.xl { font-size: clamp(46px, 8.5vw, 104px); }
.display.lg { font-size: clamp(34px, 5.4vw, 62px); }
.display.md { font-size: clamp(24px, 3.2vw, 38px); }
.display.sm { font-size: clamp(18px, 2.2vw, 24px); }

.display.chrome {
  background: linear-gradient(178deg, #ffffff 6%, #cfd2e0 34%, #8b90a6 62%, #f3f4f8 82%, #757b93 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  filter: drop-shadow(0 4px 18px oklch(0% 0 0 / 0.35));
}
:root:not(.dark) .display.chrome {
  background: linear-gradient(178deg, #3b3f52 6%, #6e7488 34%, #23263a 62%, #7d8298 82%, #2a2d3e 100%);
  -webkit-background-clip: text;
  background-clip: text;
}

.muted { color: var(--muted-fg); }
.mono { font-family: var(--font-mono); }
.eyebrow {
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--muted-fg);
}
.section-title { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0 0 16px; }

/* ---------- layout ---------- */
.shell { width: min(100% - 32px, var(--shell-w)); margin-inline: auto; }
.view { min-height: calc(100vh - var(--header-h) - 120px); padding-bottom: 72px; }
.stack { display: flex; flex-direction: column; }
.row { display: flex; align-items: center; }
.grow { flex: 1 1 auto; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent; border-radius: 999px;
  padding: 9px 18px; font-size: 14px; font-weight: 600;
  cursor: pointer; white-space: nowrap;
  transition: transform .12s ease, filter .15s ease, background .15s ease, border-color .15s ease;
}
.btn:active { transform: translateY(1px); }
.btn[disabled] { opacity: .5; cursor: not-allowed; transform: none; }

.btn-primary { background: var(--primary-grad); color: #fff; box-shadow: 0 6px 18px oklch(54.9% .2055 286.94 / .28); }
.btn-primary:hover:not([disabled]) { filter: brightness(1.08); }

.btn-ghost { background: var(--muted); color: var(--fg); border-color: var(--border); }
.btn-ghost:hover:not([disabled]) { background: var(--border-soft); border-color: var(--muted-fg); }

.btn-outline { background: transparent; border-color: var(--border); color: var(--fg); }
.btn-outline:hover:not([disabled]) { border-color: var(--primary-soft); color: var(--primary-soft); }

.btn-lg { padding: 13px 26px; font-size: 15px; }
.btn-sm { padding: 6px 13px; font-size: 13px; }
.btn-block { width: 100%; }

.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 999px;
  background: var(--muted); border: 1px solid var(--border);
  color: var(--muted-fg); cursor: pointer;
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.icon-btn:hover { color: var(--fg); border-color: var(--muted-fg); }

.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 13px; border-radius: 999px;
  background: var(--muted); border: 1px solid var(--border);
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.pill-ico { display: inline-flex; color: var(--muted-fg); }
.pill-sep { width: 1px; height: 13px; background: var(--border); }
.pill-exp { color: var(--muted-fg); font-size: 12px; }

/* ---------- tabs / segmented ---------- */
.seg { display: inline-flex; padding: 4px; gap: 4px; border-radius: 999px; background: var(--muted); border: 1px solid var(--border); }
.seg button {
  border: 0; background: transparent; border-radius: 999px;
  padding: 7px 16px; font-size: 12px; font-weight: 700;
  letter-spacing: .07em; text-transform: uppercase;
  color: var(--muted-fg); cursor: pointer; transition: background .15s, color .15s;
}
.seg button.active { background: var(--elev); color: var(--fg); box-shadow: var(--shadow-1); }
.seg.plain { background: transparent; border: 0; padding: 0; }
.seg.plain button { letter-spacing: 0; text-transform: none; font-size: 13px; padding: 6px 14px; }
.seg.plain button.active { background: var(--muted); box-shadow: none; }

/* ---------- surfaces ---------- */
.panel {
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--shadow-1);
}
.panel-pad { padding: 20px; }

.divider { height: 1px; background: var(--border); border: 0; margin: 0; }

.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  background: var(--muted); color: var(--muted-fg); border: 1px solid var(--border);
}

/* ---------- rarity ---------- */
.rarity-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 3px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: #101014; background: var(--grad-common);
}
.rarity-chip[data-rarity="common"] { background: var(--grad-common); }
.rarity-chip[data-rarity="uncommon"] { background: var(--grad-uncommon); }
.rarity-chip[data-rarity="rare"] { background: var(--grad-rare); }
.rarity-chip[data-rarity="mythic"] { background: var(--grad-mythic); color: #fff; }
.rarity-chip[data-rarity="legendary"] { background: var(--grad-legendary); }

.rarity-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--rarity-common); }
.rarity-dot[data-rarity="uncommon"] { background: var(--rarity-uncommon); }
.rarity-dot[data-rarity="rare"] { background: var(--rarity-rare); }
.rarity-dot[data-rarity="mythic"] { background: var(--rarity-mythic); }
.rarity-dot[data-rarity="legendary"] { background: var(--rarity-legendary); }

.rarity-text[data-rarity="common"] { color: var(--rarity-common); }
.rarity-text[data-rarity="uncommon"] { color: var(--rarity-uncommon); }
.rarity-text[data-rarity="rare"] { color: var(--rarity-rare); }
.rarity-text[data-rarity="mythic"] { color: var(--rarity-mythic); }
.rarity-text[data-rarity="legendary"] { color: var(--rarity-legendary); }

/* ---------- header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 60;
  height: var(--header-h);
  background: oklch(from var(--bg) l c h / .82);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border-soft);
}
.header-inner {
  width: min(100% - 24px, 1400px); margin-inline: auto; height: 100%;
  display: flex; align-items: center; gap: 14px;
}
.brand { display: inline-flex; align-items: center; }
.wordmark { display: inline-flex; align-items: center; gap: 9px; }
.wordmark-glyph { flex: none; }
.wordmark-text {
  font-family: var(--font-display); font-size: 22px;
  letter-spacing: .03em; text-transform: uppercase; line-height: 1;
}
.footer-mark .wordmark-text { font-size: 16px; }

.main-nav { display: flex; align-items: center; gap: 4px; margin-left: 10px; }
.nav-link {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 7px 14px; border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--muted-fg);
  border: 1px solid transparent;
  transition: color .15s, background .15s, border-color .15s;
}
.nav-link:hover { color: var(--fg); }
.nav-link.active { color: var(--fg); background: var(--muted); border-color: var(--border); }
.nav-ico { display: inline-flex; opacity: .85; }

.header-right { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.account-btn { padding-inline: 12px; }
.avatar-dot {
  width: 18px; height: 18px; border-radius: 999px;
  background: var(--primary-grad); flex: none;
}
.account-handle { max-width: 120px; overflow: hidden; text-overflow: ellipsis; }

/* ---------- footer ---------- */
.site-footer { border-top: 1px solid var(--border-soft); padding: 22px 0 90px; }
.footer-inner {
  width: min(100% - 32px, 1400px); margin-inline: auto;
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
}
.footer-col { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; min-width: 0; }
.footer-links { margin-left: auto; display: flex; align-items: center; gap: 18px; font-size: 13px; color: var(--muted-fg); }
.footer-links a:hover { color: var(--fg); }

/* ---------- mobile nav ---------- */
.mobile-nav {
  display: none; position: fixed; z-index: 70;
  left: 12px; right: 12px; bottom: 12px;
  padding: 8px; gap: 4px; border-radius: 18px;
  background: oklch(from var(--elev) l c h / .92);
  backdrop-filter: blur(16px);
  border: 1px solid var(--border); box-shadow: var(--shadow-2);
}
.mnav-link {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 0; border-radius: 12px; color: var(--muted-fg);
}
.mnav-link.active { color: var(--fg); background: var(--muted); }
.mnav-label { font-size: 10px; font-weight: 700; letter-spacing: .04em; }

/* ---------- modal ---------- */
.scrim {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center; padding: 18px;
  background: oklch(6% .01 270 / .68);
  backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .2s ease;
}
.scrim.in { opacity: 1; }
.modal {
  width: min(100%, 520px); max-height: min(88vh, 900px); overflow: auto;
  background: var(--elev); border: 1px solid var(--border);
  border-radius: 20px; box-shadow: var(--shadow-2);
  transform: translateY(14px) scale(.98); transition: transform .22s cubic-bezier(.2,.9,.3,1);
}
.scrim.in .modal { transform: none; }
.modal-lg { width: min(100%, 780px); }
.modal-xl { width: min(100%, 1040px); }
.modal-full { width: min(100%, 1200px); max-height: 92vh; }
.modal-head {
  display: flex; align-items: center; gap: 12px;
  padding: 18px 20px; border-bottom: 1px solid var(--border-soft);
}
.modal-body { padding: 20px; }
.modal-foot { padding: 16px 20px; border-top: 1px solid var(--border-soft); display: flex; gap: 10px; justify-content: flex-end; }

/* ---------- toast ---------- */
.toast-host {
  position: fixed; z-index: 300; right: 16px; bottom: 16px;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
  pointer-events: none;
}
.toast {
  pointer-events: auto; cursor: pointer;
  max-width: 340px; padding: 11px 16px; border-radius: 12px;
  background: var(--elev); border: 1px solid var(--border);
  box-shadow: var(--shadow-2); font-size: 13px; font-weight: 600;
  opacity: 0; transform: translateY(10px); transition: opacity .2s, transform .2s;
}
.toast.in { opacity: 1; transform: none; }
.toast-success { border-color: oklch(63.11% .1712 147.79 / .5); }
.toast-error { border-color: oklch(55.91% .1826 23.66 / .5); }

/* ---------- generic empty state ---------- */
.empty-page { display: grid; place-items: center; gap: 10px; padding: 120px 20px; text-align: center; }
.empty-state {
  display: grid; place-items: center; gap: 10px;
  padding: 56px 20px; text-align: center; color: var(--muted-fg); font-size: 14px;
}
.empty-state .empty-ico { color: var(--border); }

/* ---------- page header block ---------- */
.page-head { padding: 44px 0 26px; text-align: center; }
.page-head p { margin: 12px auto 0; max-width: 520px; color: var(--muted-fg); font-size: 14px; }

/* ---------- skeleton ---------- */
@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.skeleton {
  border-radius: 8px;
  background: linear-gradient(90deg, var(--muted) 0%, var(--border) 40%, var(--muted) 80%);
  background-size: 800px 100%;
  animation: shimmer 1.4s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
  * { scroll-behavior: auto !important; }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .main-nav { display: none; }
  .mobile-nav { display: flex; }
  .site-footer { padding-bottom: 96px; }
  .footer-links { margin-left: 0; width: 100%; }
  /* The floating nav owns the bottom 82px of the viewport here, so a toast
     pinned to bottom:16px lands on top of it. */
  .toast-host { bottom: 94px; }
}
@media (max-width: 620px) {
  .balance-pill .pill-exp, .balance-pill .pill-sep { display: none; }
  .wordmark-text { font-size: 19px; }
  .header-inner { gap: 8px; }
}

/* ============================================================
   GLASS LAYER
   Everything above defines structure. This block gives the site
   its surface: translucent panels that refract what is behind
   them, over an interactive wireframe ground. Appended last on
   purpose, so it wins over the plain surfaces above without
   needing !important.
   ============================================================ */

body {
  font-family: var(--font-body);
  background: var(--bg);
}

/* The wireframe ground sits behind everything, fixed, non-interactive
   to pointer events except through the canvas that draws it. */
#wireframe-ground {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
}
#wireframe-ground canvas { width: 100%; height: 100%; display: block; }

#app, #overlay { position: relative; z-index: 1; }

/* The refraction filter lives in an inline <svg> in index.html.
   backdrop-filter can chain a url() filter with blur and saturate;
   where the url() is unsupported the rest of the chain still applies. */
.glass {
  position: relative;
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  box-shadow:
    inset 0 1px 0 var(--glass-hi),
    inset 0 -1px 0 var(--glass-lo),
    var(--glass-shadow);
}
.glass-strong { background: var(--glass-bg-strong); }
.glass-faint { background: var(--glass-bg-faint); }

/* Refracting variant. The displacement map bends the backdrop at the
   edges the way a thick lens does. Skipped where the filter cannot
   resolve, which degrades to the plain blur above. */
.glass-refract {
  -webkit-backdrop-filter: blur(calc(var(--glass-blur) * 0.35)) url(#pc-refract) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  backdrop-filter: blur(calc(var(--glass-blur) * 0.35)) url(#pc-refract) saturate(var(--glass-sat)) brightness(var(--glass-bright));
}

/* A single sharp specular line along the top edge sells thickness. */
.glass-sheen::before {
  content: ''; position: absolute; inset: 0;
  border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, oklch(100% 0 0 / .14) 0%, oklch(100% 0 0 / 0) 42%);
}

.panel {
  background: var(--glass-bg);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  -webkit-backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  backdrop-filter: blur(var(--glass-blur)) saturate(var(--glass-sat)) brightness(var(--glass-bright));
  box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 -1px 0 var(--glass-lo), var(--glass-shadow);
}

.site-header {
  background: oklch(from var(--bg) l c h / .5);
  border-bottom: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(16px) saturate(1.6) brightness(var(--glass-bright));
  backdrop-filter: blur(16px) saturate(1.6) brightness(var(--glass-bright));
}

.mobile-nav {
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  -webkit-backdrop-filter: blur(22px) saturate(1.6);
  backdrop-filter: blur(22px) saturate(1.6);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--glass-shadow);
}

.modal {
  background: var(--glass-bg-strong);
  border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg);
  -webkit-backdrop-filter: blur(26px) saturate(1.7) brightness(var(--glass-bright));
  backdrop-filter: blur(26px) saturate(1.7) brightness(var(--glass-bright));
  box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 -1px 0 var(--glass-lo), var(--shadow-2);
}
/* backdrop-filter creates a containing block, so a position:fixed child of a
   glass panel anchors to the panel, not the viewport. Keep fixed elements out
   of glass surfaces. */

.btn-ghost, .icon-btn, .pill, .seg, .badge {
  background: var(--glass-bg);
  border-color: var(--glass-border);
  -webkit-backdrop-filter: blur(10px) saturate(1.4);
  backdrop-filter: blur(10px) saturate(1.4);
}
.btn-ghost:hover:not([disabled]), .icon-btn:hover { background: var(--glass-bg-strong); }
.seg button.active {
  background: var(--glass-bg-strong);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 2px 10px oklch(0% 0 0 / .18);
}

/* The connect action carries the ponsfamily lime. */
.btn-lime {
  background: var(--lime); color: var(--lime-fg);
  border-color: oklch(88% 0.19 118 / .5);
  box-shadow: 0 0 0 1px oklch(88% 0.19 118 / .25), 0 6px 22px var(--lime-glow);
  font-weight: 700;
}
.btn-lime:hover:not([disabled]) { filter: brightness(1.06); }

.scrim { background: oklch(6% .01 270 / .5); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }

.toast {
  background: var(--glass-bg-strong);
  border-color: var(--glass-border);
  -webkit-backdrop-filter: blur(18px) saturate(1.5);
  backdrop-filter: blur(18px) saturate(1.5);
  box-shadow: inset 0 1px 0 var(--glass-hi), var(--shadow-2);
}

.site-footer { border-top: 1px solid var(--glass-border); }
.credit-line {
  font-size: 11px; font-weight: 600; letter-spacing: .05em;
  color: var(--muted-fg);
}
.credit-line a { color: var(--fg); }
.credit-line a:hover { color: var(--primary-soft); }

/* Serif accent, used for pull quotes and stat figures. */
.serif { font-family: var(--font-serif); font-weight: 400; letter-spacing: .01em; }

/* Wireframe toggle button state */
.wire-toggle.off { opacity: .55; }

@media (prefers-reduced-transparency: reduce) {
  .glass, .panel, .modal, .site-header, .mobile-nav, .toast, .btn-ghost, .icon-btn, .pill, .seg, .badge {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background: var(--card);
  }
}

/* ---------- connect / wallet ---------- */
.connect-wrap { position: relative; padding: 30px 26px 26px; }
.connect-close { position: absolute; top: 14px; right: 14px; }
.connect-card { display: grid; justify-items: center; text-align: center; gap: 12px; }
.connect-glyph {
  display: grid; place-items: center;
  width: 74px; height: 74px; border-radius: 22px;
  background: var(--glass-bg-strong); border: 1px solid var(--glass-border);
  box-shadow: inset 0 1px 0 var(--glass-hi), 0 10px 30px var(--lime-glow);
}
.connect-status { margin: 0; max-width: 40ch; font-size: 14px; }
.connect-status.warn { color: var(--warning); }
.connect-actions { display: grid; gap: 9px; width: 100%; margin-top: 6px; }
.connect-mark { display: inline-flex; margin-right: 2px; }
.connect-note { margin: 4px 0 0; max-width: 42ch; font-size: 11.5px; line-height: 1.5; }

/* ---------- footer X link ---------- */
.footer-x { display: inline-flex; align-items: center; gap: 7px; }
.footer-x-handle { font-size: 13px; }
@media (max-width: 620px) { .footer-x-handle { display: none; } }

/* ============================================================
   RESPONSIVE CHROME
   The header cluster is the only fixed-width run in the shell, so
   it is the first thing to overflow a narrow viewport. When it does,
   the layout viewport widens and the whole page zooms out, which is
   why this block is load bearing rather than cosmetic. Appended last
   so it wins over the glass layer without !important.
   ============================================================ */

/* Icon buttons are circles. Letting flex squash them turns them into
   ovals before anything else gives, so they never shrink. */
.header-right > * { flex: none; }
.header-right .account-btn { min-width: 0; }

/* Between the mobile-nav breakpoint and about 1100px the top nav and the full
   account cluster both want the bar at once. Measured at 901px: brand 116 +
   nav 397 + cluster 339 needs 890 of content box and only 867 exists, and the
   cluster grows further once the handle and the EXP chip are in it. The two
   variable-width parts come out here, which keeps the desktop nav on tablets
   and leaves room for a balance that has grown into five figures. */
@media (max-width: 1100px) {
  .account-handle { display: none; }
  .account-btn { padding-inline: 8px; }
  .balance-pill .pill-exp, .balance-pill .pill-sep { display: none; }
}

@media (max-width: 440px) {
  .header-inner { width: min(100% - 20px, 1400px); gap: 6px; }
  .header-right { gap: 6px; }
  .header-right .icon-btn { width: 32px; height: 32px; }
  /* FAQ stays reachable from the footer on every page, so the header
     shortcut is the one control that can go. The wireframe and theme
     toggles have no other entry point in the app. */
  .header-help { display: none; }
  .balance-pill { padding: 5px 10px; font-size: 12px; gap: 6px; }
  .wordmark-text { font-size: 17px; }
  .wordmark-glyph { width: 24px; height: 24px; }
}

/* No `html { overflow-x: hidden }` guard here on purpose. body already carries
   overflow-x:hidden and propagates it to the viewport; adding it to html stops
   that propagation, turns html into its own viewport-height scroll box, and the
   document silently stops scrolling past the first screen. The header fix above
   removes the overflow at its source instead. */