:root {
  --bg: #0b1017;
  --bg2: #121a24;
  --card: #16202c;
  --line: #26323f;
  --txt: #e8eff6;
  --muted: #8ea0b2;
  --accent: #4cc2f1;   /* Verge brand "Picton Blue" */
  --accent2: #1aa3e0;  /* deeper Verge blue for gradients */
  --danger: #ff6b6b;
  --ok: #38d39f;       /* green kept for "confirmed" success semantics */
  --radius: 12px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: radial-gradient(1200px 600px at 50% -200px, #12456633, transparent), var(--bg);
  color: var(--txt);
  min-height: 100vh;
}

/* Header */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 24px; border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 14px; }
.logo {
  width: 44px; height: 44px; border-radius: 12px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #052436; font-weight: 800; font-size: 26px;
  display: grid; place-items: center;
}
.brand h1 { margin: 0; font-size: 20px; letter-spacing: .3px; }
.tagline { margin: 2px 0 0; font-size: 12px; color: var(--muted); }
.netinfo { font-size: 12px; color: var(--muted); text-align: right; line-height: 1.5; }
.topbar-right { display: flex; align-items: center; gap: 16px; }
.wallet-connect { width: auto; margin: 0; padding: 9px 16px; font-size: 13px; white-space: nowrap; }
.wallet-connect.connected { border-color: var(--accent2); color: var(--accent); font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

/* Install banner (shown only when no wallet extension is detected) */
.install-banner { border-bottom: 1px solid var(--line); background: linear-gradient(180deg, #1245661f, transparent); }
.install-banner-in { max-width: 980px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 14px; }
.ib-icon {
  width: 34px; height: 34px; border-radius: 9px; flex: 0 0 auto;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  color: #052436; font-weight: 800; display: grid; place-items: center;
}
.ib-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.ib-text strong { font-size: 14px; }
.ib-text span { font-size: 12px; color: var(--muted); }
.btn.primary.ib-cta { width: auto; margin: 0; padding: 9px 16px; font-size: 13px; white-space: nowrap; text-decoration: none; flex: 0 0 auto; }
.ib-close { background: none; border: none; color: var(--muted); cursor: pointer; font-size: 14px; padding: 4px 8px; flex: 0 0 auto; line-height: 1; }
.ib-close:hover { color: var(--txt); }
@media (max-width: 640px) { .ib-text span { display: none; } }

/* "No extension" block on the My Wallet tab */
.noext-block { margin-top: 12px; padding: 16px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg2); }
.noext-block .hint { margin: 0 0 12px; }
.btn.primary.noext-cta { width: auto; margin: 0; padding: 10px 18px; font-size: 14px; text-decoration: none; display: inline-block; }

/* header connect button in "install" state */
.wallet-connect.install { border-color: var(--accent2); color: var(--accent); }

/* Wallet integration */
.wallet-pay { margin-bottom: 8px; }
.wallet-head {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding-bottom: 16px; margin-bottom: 16px; border-bottom: 1px solid var(--line);
}
.wallet-id { flex: 1; min-width: 0; }
.wallet-id code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; word-break: break-all; display: block; margin-top: 4px; }
.wallet-bal { text-align: right; }
.wallet-bal b { display: block; font-size: 18px; }
.wallet-bal span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.wallet-insc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.wallet-insc-head h3 { margin: 0; }
.wallet-insc-head .btn { width: auto; margin: 0; padding: 8px 14px; font-size: 13px; }
.xfer-btn { width: 100%; margin-top: 10px; padding: 8px; font-size: 13px; }
.xfer-preview { display: grid; place-items: center; margin-bottom: 18px; }
.xfer-preview img { max-height: 160px; max-width: 100%; border-radius: 10px; border: 1px solid var(--line); }
.xfer-cap { margin-top: 8px; font-weight: 700; }

/* Toast */
.toast {
  position: fixed; left: 50%; bottom: 28px; transform: translate(-50%, 20px);
  background: var(--card); border: 1px solid var(--accent2); color: var(--txt);
  padding: 12px 18px; border-radius: 10px; font-size: 13px; box-shadow: 0 8px 24px #0008;
  opacity: 0; transition: opacity .3s ease, transform .3s ease; z-index: 60; max-width: 90vw;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* Tabs */
.tabs {
  display: flex; gap: 6px; padding: 14px 24px 0; max-width: 980px; margin: 0 auto;
  overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
  flex: 0 0 auto; white-space: nowrap;
  background: none; border: none; color: var(--muted); font-size: 15px; font-weight: 600;
  padding: 10px 18px; cursor: pointer; border-radius: 10px 10px 0 0; border-bottom: 2px solid transparent;
}
.tab.active { color: var(--txt); border-bottom-color: var(--accent); }

main { max-width: 980px; margin: 0 auto; padding: 18px 24px 40px; }
.panel { display: none; }
.panel.active { display: block; }

/* Cards */
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px; margin-bottom: 20px;
}
.card h2 { margin: 0 0 14px; font-size: 17px; }

/* Subtabs */
.subtabs { display: inline-flex; background: var(--bg2); border-radius: 10px; padding: 4px; margin-bottom: 18px; }
.subtab {
  background: none; border: none; color: var(--muted); padding: 8px 20px; border-radius: 8px;
  cursor: pointer; font-weight: 600; font-size: 14px;
}
.subtab.active { background: var(--card); color: var(--txt); box-shadow: 0 1px 4px #0006; }
.kind-pane { display: none; }
.kind-pane.active { display: block; }

/* Form fields */
.lbl { display: block; font-size: 12px; color: var(--muted); margin: 0 0 6px; text-transform: uppercase; letter-spacing: .4px; }
textarea, input[type=text], input[type=number], select {
  width: 100%; background: var(--bg2); border: 1px solid var(--line); color: var(--txt);
  border-radius: 10px; padding: 11px 13px; font-size: 14px; font-family: inherit;
}
textarea { resize: vertical; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent2); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 16px 0; }
.hint { font-size: 12px; color: var(--muted); margin-top: 6px; }

/* Dropzone */
.dropzone {
  border: 1.5px dashed var(--line); border-radius: 12px; padding: 26px; text-align: center;
  cursor: pointer; transition: border-color .15s, background .15s;
}
.dropzone.drag { border-color: var(--accent); background: #4cc2f114; }
.dropzone strong { color: var(--txt); }
#drop-filled { display: flex; align-items: center; gap: 16px; justify-content: center; }
#file-preview img { max-height: 90px; max-width: 120px; border-radius: 8px; border: 1px solid var(--line); }
#file-preview .ficon { font-size: 40px; }
.file-meta { text-align: left; font-size: 13px; }

/* Buttons */
.btn {
  display: inline-block; border: none; border-radius: 10px; padding: 12px 20px; font-size: 14px;
  font-weight: 700; cursor: pointer; transition: filter .15s, opacity .15s;
}
.btn.primary { background: linear-gradient(135deg, var(--accent), var(--accent2)); color: #052436; width: 100%; margin-top: 6px; }
.btn.primary:hover { filter: brightness(1.07); }
.btn.ghost { background: var(--bg2); color: var(--txt); border: 1px solid var(--line); }
.btn.ghost:hover { border-color: var(--accent2); }
.btn:disabled { opacity: .5; cursor: progress; }
.link { background: none; border: none; color: var(--accent); cursor: pointer; font-size: 13px; padding: 0; text-decoration: underline; }

/* Messages */
.error { color: var(--danger); font-size: 13px; margin-top: 10px; white-space: pre-wrap; }
.success {
  margin-top: 14px; padding: 14px; border-radius: 10px; background: #4cc2f114; border: 1px solid var(--accent2);
  font-size: 14px; word-break: break-all;
}
.notice { background: #f7c94814; border: 1px solid #f7c94855; border-radius: 10px; padding: 12px 14px; font-size: 13px; margin: 6px 0 16px; }
.summary { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px,1fr)); gap: 10px; margin-bottom: 16px; }
.summary .kv { background: var(--bg2); border-radius: 10px; padding: 10px 12px; }
.summary .kv b { display: block; font-size: 16px; }
.summary .kv span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }

/* Funding inputs */
.fund-row { display: grid; grid-template-columns: 26px 1fr 1.4fr; gap: 10px; align-items: center; margin-bottom: 8px; }
.fund-row .ix { color: var(--muted); font-size: 12px; text-align: center; }
.addr { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 9px 10px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.addr .copy { flex: none; }
.bulk { margin-bottom: 14px; }
.bulk summary { cursor: pointer; color: var(--accent); font-size: 13px; }
.bulk textarea { margin: 10px 0; }

/* Explore */
.explore-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.explore-head h2 { margin: 0; }
.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 16px; }
.ins-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; }
.ins-media { aspect-ratio: 1 / 1; background: var(--bg2); display: grid; place-items: center; overflow: hidden; }
.ins-media img { width: 100%; height: 100%; object-fit: contain; image-rendering: auto; }
.ins-media .txtprev { padding: 12px; font-size: 12px; color: var(--txt); overflow: hidden; max-height: 100%; white-space: pre-wrap; word-break: break-word; }
.ins-media .blob { font-size: 38px; color: var(--muted); }
.ins-body { padding: 11px 13px; border-top: 1px solid var(--line); }
.ins-body .num { font-weight: 700; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.badge { font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.badge.ok { color: #06231c; background: var(--ok); }
.badge.pending { color: #2a1d00; background: #f5c451; animation: pulse 1.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.ins-body .ct { font-size: 11px; color: var(--accent); }
.ins-body .meta { font-size: 11px; color: var(--muted); margin-top: 4px; word-break: break-all; }
.ins-body a { color: var(--accent); text-decoration: none; font-size: 12px; }
.myfilter { display: flex; gap: 8px; align-items: center; margin: 4px 0 14px; }
.myfilter input { flex: 1; }
.myfilter .btn { width: auto; margin: 0; white-space: nowrap; }
.empty { color: var(--muted); padding: 30px; text-align: center; }

footer { border-top: 1px solid var(--line); padding: 16px 24px; }
footer .hint { max-width: 980px; margin: 0 auto; }
.hidden { display: none !important; }

/* Payment request */
.pay-grid { display: grid; grid-template-columns: 220px 1fr; gap: 20px; align-items: start; margin: 8px 0 16px; }
.qr-wrap { background: #fff; border-radius: 12px; padding: 12px; display: grid; place-items: center; }
.qr-wrap svg { width: 100%; height: auto; display: block; }
.qr-wrap #qrcode { width: 100%; }
.donate-qr { max-width: 220px; margin: 14px 0 4px; }
.wallet-hint { margin-top: 8px; color: var(--muted); }

/* Terms-acceptance modal */
.modal-overlay {
  position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  background: rgba(4, 8, 12, .72); backdrop-filter: blur(3px); padding: 20px;
}
.modal-overlay.hidden { display: none; }
.modal-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  max-width: 460px; width: 100%; padding: 24px 24px 20px; box-shadow: 0 20px 60px rgba(0, 0, 0, .5);
}
.modal-card h2 { margin: 0 0 10px; font-size: 20px; }
.modal-card p { font-size: 14px; line-height: 1.6; color: var(--txt); margin: 0 0 16px; }
.consent-check { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-size: 13.5px; line-height: 1.5; color: var(--txt); }
.consent-check input { margin-top: 2px; width: 16px; height: 16px; flex: none; accent-color: var(--accent); cursor: pointer; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 20px; }
.modal-actions .btn:disabled { opacity: .45; cursor: not-allowed; }
.pay-fields .lbl { margin-top: 12px; }
.copyline { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; }
.copyline code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 13px; word-break: break-all; }
.copyline .copy { flex: none; }
#pay-uri { display: inline-block; margin-top: 14px; text-decoration: none; }
.paystatus { display: flex; align-items: center; gap: 10px; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font-size: 14px; color: var(--txt); }
.spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--line); border-top-color: var(--accent); animation: spin 0.8s linear infinite; flex: none; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Mint (Alpha Verginals) */
.tab.hidden { display: none !important; }
.mint-hero { background: linear-gradient(160deg, #123650, var(--card)); }
.mint-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; }
.mint-head h2 { margin: 0 0 4px; }
.mint-count { text-align: right; flex: none; }
.mc-num { font-size: 26px; font-weight: 800; color: var(--accent); line-height: 1; }
.mc-tot { color: var(--muted); font-size: 18px; font-weight: 600; }
.mc-lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin-top: 2px; }
.mint-progress { height: 8px; background: var(--bg2); border-radius: 999px; overflow: hidden; margin: 16px 0 10px; }
.mint-bar { height: 100%; width: 0; background: linear-gradient(90deg, var(--accent2), var(--accent)); border-radius: 999px; transition: width .6s ease; }
.mint-fair code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--accent); }
.mint-promo {
  margin-top: 10px; padding: 10px 14px; border-radius: 10px; font-size: 14px;
  color: var(--txt); border: 1px solid var(--accent2);
  background: linear-gradient(180deg, #1245661f, transparent);
}
.mint-promo b { color: var(--accent); }
.reveal-seed { background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; font-size: 13px; word-break: break-all; }
.reveal-seed code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; color: var(--accent); }

/* Reveal card flip */
.reveal-stage { display: grid; place-items: center; margin: 4px 0 22px; perspective: 1200px; }
.reveal-box { width: 260px; height: 300px; }
.reveal-inner { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 1s cubic-bezier(.4, .2, .2, 1); }
.reveal-box.revealed .reveal-inner { transform: rotateY(180deg); }
.reveal-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: var(--radius); border: 1px solid var(--line); overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 16px; }
.reveal-front { background: linear-gradient(160deg, #1f2a3a, var(--bg2)); }
.reveal-front .hint { margin-top: 14px; }
.mystery { font-size: 88px; font-weight: 800; color: var(--accent); animation: floaty 2.4s ease-in-out infinite; }
@keyframes floaty { 0%, 100% { transform: translateY(0) scale(1); opacity: .85; } 50% { transform: translateY(-8px) scale(1.06); opacity: 1; } }
.reveal-back { transform: rotateY(180deg); background: var(--card); padding: 0; justify-content: flex-start; }
.reveal-img { width: 100%; height: 200px; object-fit: contain; background: var(--bg2); }
.reveal-info { padding: 12px 14px; width: 100%; }
.reveal-name { font-weight: 700; display: flex; align-items: center; gap: 8px; }
.traits { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.trait { font-size: 11px; background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 4px 8px; }
.trait b { color: var(--muted); font-weight: 600; margin-right: 5px; text-transform: uppercase; letter-spacing: .3px; }
/* Traits shown inside a gallery card: tighter than the reveal box, capped so tall lists don't blow out the card. */
.card-traits { gap: 4px; margin: 8px 0 0; max-height: 92px; overflow: auto; }
.card-traits .trait { font-size: 10px; padding: 3px 6px; }
.reveal-tx { word-break: break-all; }
.reveal-box.revealed { animation: pop .6s ease; }
@keyframes pop { 0% { transform: scale(.96); } 55% { transform: scale(1.04); } 100% { transform: scale(1); } }

/* Alpha Verginals showcase */
.showcase { background: linear-gradient(160deg, #123650, var(--card)); overflow: hidden; }
.showcase-tag {
  display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase;
  color: var(--accent); background: #4cc2f11a; border: 1px solid #4cc2f155; border-radius: 999px; padding: 5px 12px;
}
.showcase h2 { margin: 14px 0 6px; font-size: 24px; letter-spacing: .2px; }
.showcase .lead { font-size: 15px; color: var(--txt); line-height: 1.55; margin: 0 0 4px; max-width: 640px; }
.showcase .lead .em { color: var(--accent); font-weight: 700; }
.showcase-solo { margin: 20px 0 6px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.sc-card {
  background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
  transition: transform .18s ease, border-color .18s ease;
}
.sc-card:hover { transform: translateY(-4px); border-color: var(--accent); }
.sc-card img { width: 100%; aspect-ratio: 1/1; object-fit: contain; display: block; image-rendering: pixelated; background: var(--bg); }
.sc-featured { width: 100%; max-width: 340px; }
.sc-dots { display: flex; gap: 10px; }
.sc-dot {
  width: 10px; height: 10px; padding: 0; border-radius: 999px; cursor: pointer;
  background: var(--line); border: 1px solid var(--line); transition: background .18s ease, border-color .18s ease, transform .18s ease;
}
.sc-dot:hover { border-color: var(--accent); }
.sc-dot.active { background: var(--accent); border-color: var(--accent); transform: scale(1.15); }
.sc-meta { padding: 9px 11px; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.sc-name { font-weight: 700; font-size: 13px; }
.sc-house { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px; padding: 3px 8px; border-radius: 999px; }
.sc-house.fire { color: #ff9d6b; background: #ff9d6b1a; border: 1px solid #ff9d6b55; }
.sc-house.water { color: #4cc2f1; background: #4cc2f11a; border: 1px solid #4cc2f155; }
.sc-house.earth { color: #7ed492; background: #7ed4921a; border: 1px solid #7ed49255; }
.showcase-note { font-size: 12px; color: var(--muted); margin-top: 12px; }

/* Long-form prose (Vision / Terms) */
.prose { max-width: 760px; }
.prose h2 { font-size: 22px; margin: 0 0 6px; }
.prose .updated { font-size: 12px; color: var(--muted); margin: 0 0 18px; }
.prose h3 { font-size: 15px; margin: 22px 0 8px; color: var(--accent); letter-spacing: .2px; }
.prose p { font-size: 14px; line-height: 1.65; color: var(--txt); margin: 0 0 12px; }
.prose ul { margin: 0 0 12px; padding-left: 20px; }
.prose li { font-size: 14px; line-height: 1.6; color: var(--txt); margin-bottom: 7px; }
.prose strong { color: #fff; }
.prose .lead-block {
  font-size: 16px; line-height: 1.6; color: var(--txt); border-left: 3px solid var(--accent);
  background: #4cc2f10d; border-radius: 0 10px 10px 0; padding: 14px 18px; margin: 0 0 20px;
}
.prose .callout {
  background: #f7c9480f; border: 1px solid #f7c94855; border-radius: 10px; padding: 12px 16px; margin: 16px 0;
  font-size: 13.5px; line-height: 1.6;
}
.prose .callout strong { color: #f7c948; }
.footlinks { margin-top: 10px; display: flex; gap: 16px; flex-wrap: wrap; }
.footlinks a { color: var(--accent); text-decoration: none; font-size: 12px; cursor: pointer; }
.footlinks a:hover { text-decoration: underline; }

/* --- metadata editor (inscribe form) ------------------------------------------------------ */
.meta-editor { margin: 14px 0 4px; padding: 10px 12px; border: 1px dashed var(--line); border-radius: 10px; }
.meta-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.meta-head .lbl { margin: 0; }
.trait-row { display: grid; grid-template-columns: 1fr 1.4fr 28px; gap: 8px; align-items: center; margin-bottom: 8px; }
.trait-del { justify-self: center; }

/* --- clickable cards + trait chips --------------------------------------------------------- */
.ins-card.clickable { cursor: pointer; transition: border-color .15s, transform .15s; }
.ins-card.clickable:hover { border-color: var(--accent2); transform: translateY(-2px); }
.trait-click { cursor: pointer; }
.trait-click:hover { border-color: var(--accent); }
.trait .pct { font-style: normal; color: var(--accent); margin-left: 6px; }
.filterbar { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; font-size: 13px; color: var(--muted); }

/* --- detail modal --------------------------------------------------------------------------- */
.detail-card { max-width: 720px; width: min(720px, 94vw); position: relative; }
.detail-close { position: absolute; top: 10px; right: 12px; background: none; border: none; color: var(--muted); font-size: 16px; cursor: pointer; }
.detail-close:hover { color: var(--txt); }
.detail-grid { display: grid; grid-template-columns: 280px 1fr; gap: 18px; align-items: start; }
.detail-media { aspect-ratio: 1 / 1; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; display: grid; place-items: center; overflow: hidden; }
.detail-media img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.detail-media .txtprev { padding: 14px; font-size: 13px; white-space: pre-wrap; word-break: break-word; overflow: hidden; max-height: 100%; }
.detail-media .blob { font-size: 48px; color: var(--muted); }
.detail-title { font-weight: 700; font-size: 18px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.detail-rank { margin-top: 6px; font-size: 13px; color: var(--muted); }
.detail-rank b { color: var(--accent); }
.detail-traits { margin-top: 10px; }
.detail-desc { margin-top: 10px; font-size: 13px; color: var(--txt); line-height: 1.5; }
.detail-meta { margin-top: 12px; font-size: 12px; color: var(--muted); word-break: break-all; line-height: 1.7; }
.detail-actions { margin-top: 14px; display: flex; gap: 10px; flex-wrap: wrap; }

/* --- stats: leaderboard + trait distribution ------------------------------------------------ */
.lb-h { margin: 14px 0 6px; font-size: 14px; color: var(--accent); }
.lb-h:first-child { margin-top: 0; }
.lb-head { padding: 2px 8px; }
.lb-head span { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 600; }
.lookup-row { display: flex; gap: 10px; margin: 10px 0 14px; }
.lookup-row input { max-width: 160px; }
.lookup-hit { display: flex; gap: 14px; align-items: flex-start; padding: 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--bg2); }
.lookup-hit img { width: 96px; height: 96px; border-radius: 8px; object-fit: contain; image-rendering: pixelated; background: var(--bg); flex: none; }
.lookup-mystery { width: 96px; height: 96px; display: grid; place-items: center; border-radius: 8px; background: var(--bg); font-size: 34px; flex: none; }
.lb-row { display: grid; grid-template-columns: 52px 44px 1fr auto; gap: 10px; align-items: center; padding: 6px 8px; border-radius: 8px; }
.lb-row.lb-minted:hover { background: var(--bg2); }
.lb-rank { color: var(--accent); font-weight: 700; }
.lb-thumb { width: 44px; height: 44px; border-radius: 6px; overflow: hidden; background: var(--bg2); display: grid; place-items: center; }
.lb-thumb img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.lb-mystery { color: var(--muted); font-weight: 700; font-size: 18px; }
.lb-name { font-size: 13.5px; }
.lb-row:not(.lb-minted) .lb-name { color: var(--muted); font-style: italic; }
.lb-score { font-size: 12px; color: var(--muted); }
.tdist { border-top: 1px solid var(--line); padding: 8px 0; }
.tdist summary { cursor: pointer; font-weight: 600; font-size: 14px; padding: 4px 0; }
.tdist-row { display: grid; grid-template-columns: 1fr 2fr auto; gap: 10px; align-items: center; padding: 4px 6px; border-radius: 6px; cursor: pointer; font-size: 12.5px; }
.tdist-row:hover { background: var(--bg2); }
.tdist-bar { height: 6px; border-radius: 3px; background: var(--bg2); overflow: hidden; }
.tdist-bar i { display: block; height: 100%; background: linear-gradient(90deg, var(--accent2), var(--accent)); border-radius: 3px; }
.tdist-pct { color: var(--muted); white-space: nowrap; }

/* --- latest inscriptions strip --------------------------------------------------------------- */
.latest-strip { display: flex; align-items: center; gap: 14px; padding: 12px 16px; }
.latest-lbl { font-size: 12px; color: var(--muted); white-space: nowrap; }
.latest-items { display: flex; gap: 10px; flex-wrap: wrap; }
.latest-item { display: flex; align-items: center; gap: 7px; background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px 5px 5px; cursor: pointer; color: var(--txt); font-size: 12.5px; }
.latest-item:hover { border-color: var(--accent2); }
.latest-item img { width: 26px; height: 26px; border-radius: 5px; object-fit: contain; image-rendering: pixelated; background: var(--bg); }
.latest-ico { font-size: 15px; padding-left: 4px; }

/* --- marketplace ------------------------------------------------------------------------------ */
.detail-market { margin-top: 12px; }
.mk { display: flex; flex-direction: column; gap: 8px; padding: 12px; border: 1px solid var(--accent2); border-radius: 10px; background: linear-gradient(180deg, #1245661f, transparent); }
.mk-price { font-size: 14px; }
.mk-price b { color: var(--accent); }
.mk-listrow { display: flex; gap: 8px; }
.mk-listrow input { flex: 1; min-width: 0; }
.mk .btn { align-self: flex-start; }
.mk-listrow .btn { align-self: stretch; white-space: nowrap; }
.mk-form { display: flex; flex-direction: column; gap: 8px; }
.mk-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.mk-field { display: flex; align-items: center; background: var(--bg2); border: 1px solid var(--line); border-radius: 10px; }
.mk-field:focus-within { border-color: var(--accent2); }
.mk-field input[type=number] { flex: 1; min-width: 0; border: none; background: none; padding: 12px 14px; font-size: 16px; }
.mk-field input[type=number]:focus { border: none; }
.mk-suffix { padding: 0 14px 0 4px; color: var(--muted); font-size: 13px; font-weight: 700; letter-spacing: .04em; }
.mk-usd { color: var(--muted); font-size: 12px; font-weight: 500; min-height: 1em; }
.mk-fee { color: var(--muted); font-size: 12px; margin-top: 4px; line-height: 1.4; }
.rarity-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rarity-badge { font-size: 11px; font-weight: 700; letter-spacing: .02em; padding: 3px 9px; border-radius: 999px; border: 1px solid transparent; }
/* Badge families, shared by the rank card, the collection card pill, and the stats chips. */
.b-rainbow { background: linear-gradient(90deg, #ff5f6d, #ffc371, #42e695, #3bb2f6, #b06ab3); color: #1a1622; }
.b-prism { background: linear-gradient(135deg, rgba(120,90,255,.22), rgba(60,150,246,.22)); border-color: rgba(120,110,255,.45); }
.b-chroma { background: rgba(200,150,60,.16); border-color: rgba(200,150,60,.45); }
.b-pair { background: rgba(255,120,180,.18); border-color: rgba(255,120,180,.5); }
.b-mono { background: linear-gradient(135deg, rgba(20,20,24,.9), rgba(230,230,235,.9)); color: #fff; text-shadow: 0 0 2px rgba(0,0,0,.6); }
.b-duo { background: linear-gradient(90deg, rgba(60,150,246,.28) 0 50%, rgba(230,80,70,.28) 50% 100%); border-color: rgba(150,150,150,.4); }
.b-tailored { background: rgba(120,200,160,.14); border-color: rgba(120,200,160,.4); }
.b-camo { background: rgba(130,140,70,.18); border-color: rgba(130,140,70,.45); }
.coll-badge-pill { position: absolute; left: 8px; top: 8px; font-size: 10px; font-weight: 700; padding: 2px 8px;
  border-radius: 999px; border: 1px solid transparent; backdrop-filter: blur(2px); }
.coll-media { position: relative; }
.badge-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.badge-chip { cursor: pointer; font-size: 13px; font-weight: 700; padding: 6px 12px; border-radius: 999px; border: 1px solid transparent; }
.badge-chip .bc-count { opacity: .7; font-weight: 600; margin-left: 4px; }
.badge-chip:focus-visible { outline: 2px solid var(--accent, #7a5cff); outline-offset: 2px; }
.mk-price .mk-usd { display: inline; margin-left: 4px; }
.mk .btn.block { align-self: stretch; width: 100%; margin-top: 0; white-space: nowrap; }

/* Arena */
.arena-grid { display: grid; grid-template-columns: 1fr 300px; gap: 20px; align-items: start; }
.arena-play h3 { margin: 18px 0 8px; }
.arena-play h3:first-child { margin-top: 0; }
.arena-fighters { display: flex; flex-wrap: wrap; gap: 10px; }
.arena-fighter { background: var(--bg2); border: 2px solid var(--line); border-radius: 10px; padding: 6px; cursor: pointer; display: flex; flex-direction: column; align-items: center; gap: 4px; width: 84px; }
.arena-fighter img { width: 68px; height: 68px; border-radius: 6px; image-rendering: pixelated; background: #0a0f16; }
.arena-fighter span { font-size: 12px; color: var(--muted); font-weight: 700; }
.arena-fighter.sel { border-color: var(--accent); }
.arena-fighter.sel span { color: var(--accent); }
.arena-loadout { display: flex; flex-direction: column; gap: 8px; }
.arena-round { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.arena-round-n { width: 78px; font-size: 12px; color: var(--muted); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; }
.arena-el { display: inline-flex; align-items: center; gap: 6px; background: var(--bg2); border: 1px solid var(--line); color: var(--txt); border-radius: 8px; padding: 8px 12px; cursor: pointer; font-size: 14px; text-transform: capitalize; }
.arena-el.sm { padding: 6px 10px; font-size: 13px; min-width: 44px; justify-content: center; }
.arena-el.on { border-color: var(--accent); background: #4cc2f114; color: var(--accent); font-weight: 700; }
.arena-actions { display: flex; gap: 10px; margin-top: 16px; }
.arena-actions .btn { width: auto; margin: 0; }
.arena-verdict { font-size: 28px; font-weight: 800; letter-spacing: 2px; margin: 10px 0 6px; }
.arena-verdict.win { color: var(--ok); }
.arena-verdict.loss { color: var(--danger); }
.arena-rounds { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.arena-rr { font-size: 12px; padding: 4px 8px; border-radius: 6px; background: var(--bg2); border: 1px solid var(--line); }
.arena-rr em { color: var(--muted); font-style: normal; }
.arena-rr.win { border-color: var(--ok); }
.arena-rr.loss { border-color: var(--danger); }
.arena-stage { margin-top: 16px; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: #0a0f16; }
.arena-stage canvas { display: block; width: 100%; height: auto; }
.arena-side { display: flex; flex-direction: column; gap: 16px; }
.arena-side .card { padding: 16px; margin: 0; }
.arena-side h3 { margin: 0 0 10px; font-size: 15px; }
.arena-rank { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.arena-rank:last-child { border-bottom: none; }
.arena-rank b { color: var(--accent); }
@media (max-width: 760px) { .arena-grid { grid-template-columns: 1fr; } }
.btn.sm { padding: 5px 10px; font-size: 12px; }
.mk-offers { margin-top: 4px; border-top: 1px solid var(--line); padding-top: 8px; }
.mk-offers-h { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 6px; }
.mk-offer { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; padding: 4px 0; }
.mk-status { font-size: 12.5px; color: var(--muted); min-height: 1em; word-break: break-all; }
.mk-status code { color: var(--accent); }
#market-gallery .mk-price { margin-top: 4px; font-weight: 700; color: var(--accent); }
.badge.sale { background: #1aa3e022; color: var(--accent); border: 1px solid var(--accent2); }
.card-sale { margin: 4px 0 2px; }

/* --- launchpad -------------------------------------------------------------------------------- */
.lp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-top: 14px; }
.lp-card { background: var(--bg2); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; transition: border-color .15s, transform .15s; }
.lp-card:hover { border-color: var(--accent2); transform: translateY(-2px); }
.lp-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; image-rendering: pixelated; background: var(--bg); display: block; }
.lp-card-body { padding: 10px 12px; }
.lp-card-body .num { font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.lp-head { display: flex; gap: 16px; align-items: flex-start; margin: 10px 0 14px; }
.lp-head img { width: 120px; height: 120px; border-radius: 10px; border: 1px solid var(--line); object-fit: contain; image-rendering: pixelated; background: var(--bg2); flex: none; }
.lp-headtext { flex: 1; min-width: 0; }
.lp-headtext h2 { margin: 0 0 4px; }
.lp-reveal { display: flex; gap: 16px; align-items: flex-start; margin-top: 14px; padding: 14px; border: 1px solid var(--accent2); border-radius: 10px; background: linear-gradient(180deg, #1245661f, transparent); }
.lp-reveal img { width: 160px; height: 160px; border-radius: 10px; object-fit: contain; image-rendering: pixelated; background: var(--bg2); flex: none; }
.lps-progress { position: relative; height: 22px; background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; margin-top: 12px; overflow: hidden; }
.lps-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--accent2), var(--accent)); transition: width .3s; }
.lps-progress span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11.5px; color: var(--txt); }
#lps-manifest { margin-bottom: 6px; }

@media (max-width: 640px) {
  .tabs { padding: 10px 12px 0; gap: 2px; }
  .tab { padding: 9px 13px; font-size: 14px; }
  main { padding: 16px 16px 40px; }
  .grid2 { grid-template-columns: 1fr; }
  .fund-row { grid-template-columns: 1fr; }
  .pay-grid { grid-template-columns: 1fr; }
  .qr-wrap { max-width: 240px; margin: 0 auto; }
  .detail-grid { grid-template-columns: 1fr; }
  .detail-media { width: 100%; max-width: 340px; margin: 0 auto; }
  .trait-row { grid-template-columns: 1fr 1fr 28px; }
  .lp-head { flex-direction: column; align-items: center; text-align: center; }
  .lp-reveal { flex-direction: column; align-items: center; text-align: center; }
}

/* ============ Arena rules explainer ============ */
.arena-rules { margin: 8px 0 12px; padding-left: 18px; list-style: none; }
.arena-rules li { position: relative; font-size: 13px; color: var(--muted); line-height: 1.5; margin: 6px 0; padding-left: 4px; }
.arena-rules li::before { content: "›"; position: absolute; left: -14px; color: var(--accent); font-weight: 700; }
.arena-rules b { color: var(--txt); }

/* Arena profile, badges and battle history */
.arena-sub { margin: 16px 0 8px; font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.arena-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.arena-stats .as { background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; display: flex; flex-direction: column; gap: 2px; }
.arena-stats .as b { font-size: 16px; color: var(--txt); }
.arena-stats .as span { font-size: 11px; color: var(--muted); }
.arena-badges { display: grid; grid-template-columns: repeat(auto-fill, minmax(80px, 1fr)); gap: 8px; }
.arena-badge { background: var(--bg2); border: 1px solid var(--line); border-radius: 8px; padding: 8px 6px; text-align: center; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.arena-badge.off { opacity: .38; filter: grayscale(1); }
.arena-badge.on { border-color: var(--accent); }
.ab-icon { font-size: 20px; }
.ab-name { font-size: 10px; color: var(--muted); line-height: 1.2; }
.arena-hist { display: flex; align-items: center; gap: 10px; padding: 7px 2px; border-bottom: 1px solid var(--line); font-size: 13px; }
.arena-hist:last-child { border-bottom: none; }
.ah-res { font-weight: 700; font-size: 10px; letter-spacing: .03em; padding: 3px 7px; border-radius: 999px; }
.arena-hist.win .ah-res { background: rgba(56, 211, 159, .15); color: var(--ok); }
.arena-hist.loss .ah-res { background: rgba(255, 107, 107, .15); color: var(--danger); }
.ah-vs { flex: 1; color: var(--txt); }
.ah-vs em { color: var(--muted); font-style: normal; font-size: 11px; }
.ah-vs b { color: var(--accent); margin-left: 4px; }
.ah-replay { color: var(--accent); font-size: 12px; cursor: pointer; text-decoration: none; }
.ah-replay:hover { text-decoration: underline; }
.arena-matchup { font-size: 14px; color: var(--muted); margin: 2px 0 6px; text-align: center; }

/* Clickable tournament row in the Arena side panel */
.arena-tourn { display: block; width: 100%; text-align: left; background: linear-gradient(180deg, rgba(76, 194, 241, .10), rgba(76, 194, 241, .03)); border: 1px solid rgba(76, 194, 241, .45); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; cursor: pointer; color: var(--txt); font: inherit; transition: border-color .15s, box-shadow .15s, transform .1s; }
.arena-tourn:last-child { margin-bottom: 0; }
.arena-tourn:hover { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(76, 194, 241, .14); }
.arena-tourn:active { transform: translateY(1px); }
.at-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.at-name { font-weight: 700; }
.at-state { font-size: 12px; color: var(--accent); font-weight: 700; white-space: nowrap; }
.at-cta { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; background: var(--accent); color: #04141f; font-size: 12.5px; font-weight: 700; padding: 6px 13px; border-radius: 999px; }
.arena-tourn:hover .at-cta { filter: brightness(1.08); }
.at-arrow { display: inline-block; animation: at-nudge 1.1s ease-in-out infinite; }
@keyframes at-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }
@media (prefers-reduced-motion: reduce) { .at-arrow { animation: none; } }

/* Tournament knockout bracket */
:root { --brkc: #3a4b5c; --brk-gap: 22px; --brk-colw: 128px; }
.arena-bracket-wrap { margin-top: 6px; }
.bracket-topbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
#arena-bracket-actions { display: flex; align-items: center; gap: 8px; }
.bk-joined { font-size: 13px; color: var(--ok); }
#arena-bracket-head h2 { margin: 0 0 4px; }
.bk-meta { font-size: 13px; color: var(--muted); }
.bk-status { text-transform: uppercase; font-size: 11px; font-weight: 700; letter-spacing: .04em; padding: 2px 8px; border-radius: 999px; background: var(--bg2); color: var(--muted); }
.bk-status.running { background: rgba(76, 194, 241, .16); color: var(--accent); }
.bk-status.ended { background: rgba(56, 211, 159, .16); color: var(--ok); }
#arena-bracket-scroll { overflow: auto; padding: 18px 8px; }

/* registering: a simple grid of the fighters who have joined */
.bracket.registering { display: block; }
.bk-registering { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-bottom: 10px; }

/* running / ended: two half-brackets converging on a centre Grand Final */
.bracket { display: flex; align-items: center; justify-content: center; min-width: min-content; }
.brk { display: flex; align-items: stretch; }
.brk-round { display: flex; flex-direction: column; width: var(--brk-colw); flex: 0 0 auto; }
.side-l .brk-round { padding-right: var(--brk-gap); }
.side-r .brk-round { padding-left: var(--brk-gap); }
.bk-slot { flex: 1 1 0; position: relative; display: flex; align-items: center; padding: 5px 0; }
.bk-match { width: 100%; background: var(--card); border: 1px solid var(--line); border-radius: 7px; overflow: hidden; }
.bk-match.done { border-color: #2f4152; }
.bk-match.tbd { opacity: .5; }

/* connectors: horizontal ticks at each match centre + a vertical line joining a pair */
.side-l .brk-round:not(:last-child) .bk-slot::after,
.side-r .brk-round:not(:first-child) .bk-slot::after { content: ''; position: absolute; width: var(--brk-gap); }
.side-l .brk-round:not(:last-child) .bk-slot::after { left: 100%; border-right: 2px solid var(--brkc); }
.side-r .brk-round:not(:first-child) .bk-slot::after { right: 100%; border-left: 2px solid var(--brkc); }
.side-l .brk-round:not(:last-child) .bk-slot:nth-child(odd)::after,
.side-r .brk-round:not(:first-child) .bk-slot:nth-child(odd)::after { top: 50%; bottom: 0; border-top: 2px solid var(--brkc); }
.side-l .brk-round:not(:last-child) .bk-slot:nth-child(even)::after,
.side-r .brk-round:not(:first-child) .bk-slot:nth-child(even)::after { top: 0; bottom: 50%; border-bottom: 2px solid var(--brkc); }
/* the single semi-final on each side feeds straight into the final: a plain horizontal */
.side-l .brk-round:last-child .bk-slot::after { content: ''; position: absolute; left: 100%; width: var(--brk-gap); top: 50%; border-top: 2px solid var(--brkc); }
.side-r .brk-round:first-child .bk-slot::after { content: ''; position: absolute; right: 100%; width: var(--brk-gap); top: 50%; border-top: 2px solid var(--brkc); }

/* centre grand final: the match stays vertically centred (aligned with both semi-finals); the
   badge and champion float above/below it so they do not shift its centre. */
.brk-final { display: flex; align-items: center; justify-content: center; width: 184px; flex: 0 0 auto; padding: 0 8px; }
.brk-final-inner { position: relative; width: 100%; }
.brk-final .bk-slot { flex: 0 0 auto; width: 100%; padding: 0; }
.brk-final-badge { position: absolute; bottom: 100%; left: 0; right: 0; margin-bottom: 10px; display: flex; flex-direction: column; align-items: center; color: var(--accent); font-size: 12px; font-weight: 700; letter-spacing: .1em; }
.brk-swords { font-size: 24px; }
.brk-final .bk-match { border-color: var(--accent); box-shadow: 0 0 22px rgba(76, 194, 241, .18); }
.brk-champ { position: absolute; top: 100%; left: 0; right: 0; margin-top: 10px; font-size: 14px; color: var(--txt); text-align: center; }

/* fighter rows inside a match box */
.bk-f { display: flex; align-items: center; gap: 7px; padding: 5px 8px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--line); }
.bk-f:last-child { border-bottom: none; }
.bk-f img, .bk-av { width: 20px; height: 20px; border-radius: 4px; object-fit: cover; background: var(--bg2); display: inline-grid; place-items: center; flex: 0 0 auto; font-size: 11px; }
.bk-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-f.win { color: var(--txt); background: rgba(56, 211, 159, .12); font-weight: 600; }
.bk-f.win .bk-name::after { content: ' ✓'; color: var(--ok); }
.bk-f.me .bk-name { color: var(--accent); }
.bk-f.tbd { color: var(--muted); opacity: .6; }

/* ============ Alpha collection page ============ */
.coll-hero { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; margin-bottom: 18px; }
.coll-logo { width: 88px; height: 88px; border-radius: 16px; object-fit: cover; border: 1px solid var(--line); background: var(--bg2); }
.coll-id { flex: 1 1 240px; min-width: 200px; }
.coll-id h2 { margin: 0 0 4px; }
.coll-stats { display: flex; gap: 10px; flex-wrap: wrap; }
.coll-stat { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 10px 16px; min-width: 84px; display: flex; flex-direction: column; gap: 2px; }
.cs-val { font-size: 18px; font-weight: 700; color: var(--txt); }
.cs-lbl { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.cs-sub { font-size: 11px; color: var(--muted); }
.coll-bar { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; }
.coll-controls { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.coll-select { background: var(--card); color: var(--txt); border: 1px solid var(--line); border-radius: 8px; padding: 7px 10px; font-size: 13px; }
.coll-check { font-size: 13px; color: var(--muted); display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.coll-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; }
.coll-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; transition: border-color .15s, transform .15s; }
.coll-card.clickable { cursor: pointer; }
.coll-card.clickable:hover { border-color: var(--accent); transform: translateY(-2px); }
.coll-media { position: relative; aspect-ratio: 1 / 1; background: var(--bg2); display: grid; place-items: center; overflow: hidden; }
.coll-media img { width: 100%; height: 100%; object-fit: contain; }
.coll-rank { position: absolute; top: 6px; left: 6px; background: #000a; color: #fff; font-size: 11px; font-weight: 600; padding: 2px 7px; border-radius: 999px; }
.coll-cbody { padding: 9px 11px; display: flex; flex-direction: column; gap: 3px; }
.coll-cnum { font-size: 13px; font-weight: 600; color: var(--txt); }
.coll-cprice { font-size: 13px; color: var(--accent); font-weight: 600; }
.coll-cunlisted { font-size: 12px; color: var(--muted); }
.coll-activity { display: flex; flex-direction: column; gap: 6px; }
.coll-act { display: grid; grid-template-columns: 68px 1.2fr .8fr 1.6fr auto; gap: 12px; align-items: center; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; font-size: 13px; }
.ca-type { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 3px 8px; border-radius: 999px; text-align: center; }
.ca-sale { background: rgba(56, 211, 159, .15); color: var(--ok); }
.ca-list { background: rgba(76, 194, 241, .15); color: var(--accent); }
.ca-item { font-weight: 600; color: var(--txt); }
.ca-price { color: var(--accent); font-weight: 600; }
.ca-who { color: var(--muted); }
.ca-addr { color: var(--txt); font-family: ui-monospace, monospace; font-size: 12px; }
.ca-time { color: var(--muted); font-size: 12px; text-align: right; }
@media (max-width: 720px) {
  .coll-act { grid-template-columns: 56px 1fr auto; }
  .coll-act .ca-who, .coll-act .ca-time { display: none; }
}


/* ================================================================================================
   The mint front door. Rebuilt on the design system; every colour and face comes from vg.css.
   ================================================================================================ */

.mh {
  display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr);
  border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden;
  background: var(--card); margin-bottom: 18px;
}

/* One sealed mark, not a grid of them. A wall of identical placeholders reads as stock; a single
   sealed shape reads as the one you have not opened. */
.mh-seal {
  position: relative; min-height: 260px;
  background-color: var(--bg);
  border-right: 1px solid var(--line);
  display: grid; place-items: center;
}
.mh-diamond {
  width: 84px; height: 84px; transform: rotate(45deg);
  border: 2px solid var(--accent); border-radius: 8px;
  box-shadow: 0 0 44px -6px rgba(76, 194, 241, .5);
}
@media (prefers-reduced-motion: no-preference) {
  .mh-diamond { animation: mhBreathe 5s ease-in-out infinite; }
  @keyframes mhBreathe {
    0%, 100% { opacity: .75; transform: rotate(45deg) scale(1); }
    50% { opacity: 1; transform: rotate(45deg) scale(1.05); }
  }
}

.mh-body { padding: 34px 32px; display: flex; flex-direction: column; gap: 20px; }
.mh-counts { display: flex; gap: 44px; }
.mh-bar { margin-top: -6px; }

.mh-houses { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.mh-house {
  display: flex; flex-direction: column; gap: 7px;
  padding: 11px 13px; border: 1px solid var(--line); border-radius: var(--r-ctl);
  background: var(--bg2);
}
.mh-house .vg-num { line-height: 1; }

.mh-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.mh-pair p { margin: 0 0 6px; }
.mh-pair .vg-small { margin: 0; }

.mh-fair { color: var(--dim); font-size: 11.5px; }
.mh-fair code { font-family: var(--mono); color: var(--muted); }

@media (max-width: 820px) {
  .mh { grid-template-columns: 1fr; }
  .mh-seal { min-height: 150px; border-right: 0; border-bottom: 1px solid var(--line); }
  .mh-body { padding: 26px 22px; }
  .mh-counts { gap: 30px; }
}


/* ================================================================================================
   The reveal. Art first and alone, facts a beat later.
   ================================================================================================ */

.rv {
  border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden;
  background: var(--card); max-width: 520px;
}
.rv-stage {
  position: relative; aspect-ratio: 1 / 1; background: var(--bg);
  display: grid; place-items: center;
}
.rv-sealed {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 16px; padding: 26px; text-align: center;
  background-color: var(--bg);
}
.rv-sealed .vg-small { max-width: 30ch; margin: 0; }
.rv-diamond {
  width: 76px; height: 76px; transform: rotate(45deg);
  border: 2px solid var(--accent); border-radius: 8px;
  box-shadow: 0 0 40px -6px rgba(76, 194, 241, .5);
}
@media (prefers-reduced-motion: no-preference) {
  .rv-diamond { animation: rvBreathe 4s ease-in-out infinite; }
  @keyframes rvBreathe {
    0%, 100% { opacity: .7; transform: rotate(45deg) scale(1); }
    50% { opacity: 1; transform: rotate(45deg) scale(1.06); }
  }
}

/* Full bleed, nothing over it. The art is the whole point of the moment. */
.rv-art { width: 100%; height: 100%; object-fit: cover; display: block; image-rendering: pixelated; }
@media (prefers-reduced-motion: no-preference) {
  .rv.is-open .rv-art { animation: rvLand .5s cubic-bezier(.2, .8, .2, 1) both; }
  @keyframes rvLand { from { opacity: 0; transform: scale(1.04); } to { opacity: 1; transform: none; } }
}

.rv-chrome {
  padding: 20px 22px 22px; display: flex; flex-direction: column; gap: 16px;
  opacity: 0; transform: translateY(8px);
  transition: opacity .34s ease, transform .34s cubic-bezier(.2, .8, .2, 1);
}
.rv-chrome.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .rv-chrome { opacity: 1; transform: none; } }

.rv-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; justify-content: space-between; }
.rv-house.fire { border-color: rgba(255, 107, 107, .45); color: var(--danger); }
.rv-house.water { border-color: rgba(76, 194, 241, .45); color: var(--accent); }
.rv-house.earth { border-color: rgba(56, 211, 159, .45); color: var(--ok); }

.rv-facts { display: flex; flex-wrap: wrap; gap: 30px; }
.rv-fact { font-size: 20px; letter-spacing: -.02em; }
.rv-of { font: 400 12px/1 var(--mono); color: var(--dim); letter-spacing: 0; }

.rv-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.rv-prov { margin: 0; font-size: 11.5px; line-height: 1.55; color: var(--dim); }
.rv-tx { font-family: var(--mono); }

@media (max-width: 560px) {
  .rv-acts .vg-btn { flex: 1 1 100%; }
  .rv-facts { gap: 22px; }
}


/* ================================================================================================
   Market head, launchpad hero, and the payment wait.
   ================================================================================================ */

.mk-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(260px, .7fr);
  gap: 32px; align-items: start; padding: 8px 0 26px;
}
.mk-head h2 { margin: 0 0 12px; }
.mk-claim { margin: 0 0 12px; color: var(--accent); max-width: 26ch; }
.mk-side { display: flex; flex-direction: column; gap: 12px; align-items: stretch; }
.mk-stats { grid-template-columns: repeat(3, 1fr); }

.lp-hero {
  display: flex; flex-direction: column; align-items: flex-start; gap: 16px;
  padding: 34px 32px; margin-bottom: 20px;
  border: 1px solid var(--line); border-radius: var(--r-card);
  background:
    radial-gradient(120% 140% at 8% 0%, #14344a 0%, transparent 58%),
    var(--card);
}
.lp-hero h2 { margin: 0; max-width: 22ch; }
.lp-acts { display: flex; flex-wrap: wrap; gap: 10px; }

/* Waiting for a payment. Minutes, not seconds, and it must never look stuck: the sweep is the only
   thing on the site that exists purely to say "still working". */
.pay-wait { display: flex; align-items: center; gap: 14px; }
.pay-sweep {
  position: relative; flex: 1; height: 4px; border-radius: 2px;
  background: var(--bg2); overflow: hidden;
}
.pay-sweep::after {
  content: ''; position: absolute; inset: 0 auto 0 0; width: 34%;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
}
@media (prefers-reduced-motion: no-preference) {
  .pay-sweep::after { animation: paySweep 1.7s ease-in-out infinite; }
  @keyframes paySweep { from { transform: translateX(-110%); } to { transform: translateX(310%); } }
}

@media (max-width: 860px) {
  .mk-head { grid-template-columns: 1fr; gap: 22px; }
  .lp-hero { padding: 26px 22px; }
}

#mint-paystatus { display: flex; flex-direction: column; gap: 10px; }
#mint-paystatus .vg-small { margin: 0; max-width: 52ch; }

/* The trust story. Four claims in one instrument panel, hairline-divided, so they read as a set of
   facts rather than as four separate boasts. */
.tw {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1px;
  margin: 0 0 20px; background: var(--line);
  border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden;
}
.tw-item { background: var(--card); padding: 20px 22px; display: flex; flex-direction: column; gap: 9px; }
.tw-item p { margin: 0; }
.tw-item .vg-d4 { color: var(--txt); }

.st-head { padding: 8px 0 22px; display: flex; flex-direction: column; gap: 12px; }
.st-head h2 { margin: 0; }
.st-claim { margin: 0; color: var(--accent); max-width: 44ch; }

/* The connect-or-paste choice on the mint form. Connecting is the way in; pasting is the fallback
   for somebody without the extension, so it is below the divider rather than beside it. */
.mint-connect { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-bottom: 16px; }
.mint-connect .vg-small { margin: 0; max-width: 34ch; }
.mint-or {
  display: flex; align-items: center; gap: 12px; margin: 0 0 16px;
  font: 700 10px/1 var(--mono); letter-spacing: .16em; text-transform: uppercase; color: var(--dim);
}
.mint-or::before, .mint-or::after { content: ''; flex: 1; height: 1px; background: var(--hair); }