/* Cryptogoths - "The Register": a gothic on-chain broadsheet.
   Document-like, table-driven, dense avatar grid with a colour swatch behind each goth (the swatch
   changes on hover; the avatar itself is transparent). Flat, square, 1px rules. No shadows, no hover-lift.
   The ONE deliberate motion/gradient: the swatch behind each avatar flows a soft looping gradient on hover
   (a little ocean) and the top procession drifts via a compositor keyframe. Violet / mauve / periwinkle on
   near-black. 2005 vibe. */

:root {
  --bg:       #130d20;
  --panel:    #1d1533;
  --panel2:   #251b3f;
  --rule:     #463566;
  --rule-lit: #9279c4;
  --rule-hot: #d8c6ff;
  --ink:      #d7cdec;
  --dim:      #9386b4;
  --mauve:    #c8a2c8;
  --violet:   #8a6fc6;
  --blue:     #7f8fe0;
  --link:     #b6a0e6;
  --link-hot: #efe6ff;
  --gold:     #cbb06a;
  --logo-pink: #d933d2;  /* sampled directly from the logo PNG's outline pixels (Hadrian 2026-08-15) */
  --tb-h:     80px;   /* sticky topbar height - shorter than the natural-size logo (105px) so the
                         logo's bottom ~25px overhangs onto the first procession strip (Hadrian) */
  /* delicate violet→blue gradient behind each avatar (angled, slightly wider span); lightens on hover */
  --swatch-a:     #c080f0;  --swatch-b:     #6888f0;
  --swatch-a-hot: #d098f8;  --swatch-b-hot: #7ea0fa;
  /* sale-status gradients: rosy-lila-peachy-orange (Hadrian 2026-08-21) */
  --swatch-sale-a: #e86040; --swatch-sale-b: #c878a8;
  /* bid: violet -> light pink (Hadrian 2026-08-21) */
  --swatch-bid-a:  #9848d8; --swatch-bid-b:  #e88cb8;
}

/* ---- Press Start 2P (self-hosted pixel font) on the nav + the section titles (Hadrian) ---- */
@font-face {
  font-family: "Press Start 2P";
  font-style: normal; font-weight: 400; font-display: swap;
  src: local("_"), url("data:font/woff2;base64,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") format("woff2");
}
/* Silkscreen (self-hosted pixel font), used only on the "Goths by number of attributes" strip's count
   numbers (.acd-n). Same blur risk as Press Start 2P above, so it gets the same >=native-grid sizing. */
@font-face {
  font-family: "Silkscreen";
  font-style: normal; font-weight: 400; font-display: swap;
  src: local("_"), url("data:font/woff2;base64,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") format("woff2");
}
@font-face {
  font-family: "Silkscreen";
  font-style: normal; font-weight: 700; font-display: swap;
  src: local("_"), url("data:font/woff2;base64,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") format("woff2");
}


* { margin: 0; padding: 0; box-sizing: border-box; }
html, body {
  background: var(--bg);
  background-image: radial-gradient(rgba(200,162,200,0.045) 1px, transparent 1px);
  background-size: 13px 13px;
  color: var(--ink);
  font-family: Verdana, Tahoma, Geneva, sans-serif;
  font-size: 12px;
  line-height: 1.55;
  overflow-x: hidden;   /* let the detail page's full-bleed band reach the viewport edges cleanly */
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--link); text-decoration: none; font-weight: bold; }
a:hover { color: var(--link-hot); text-decoration: underline; }
a:focus-visible { outline: 2px solid var(--rule-hot); outline-offset: 2px; }
/* Every clickable TEXT link gets a brighter, continuously looping gradient traveling through it on hover
   (teal -> violet -> teal), instead of a flat colour swap. Excluded via a zero-specificity :where() (so this
   still loses to more specific rules like .attr-row.lit a): .tile/.sg-tile/.proc-tile/.attr-card, the
   avatar-card anchors. color:transparent + -webkit-text-fill-color:transparent are BOTH inherited, so applying
   this to those anchors bled transparent fill into every nested overlay span (.sg-id/.sg-eth/...) even though
   those spans set their own `color` - webkit paints from -webkit-text-fill-color when set, ignoring `color`,
   which is exactly the "white hover text vanished, only the black text-shadow outline shows" bug (Hadrian). */
/* Same seam bug as the attr-row gradient (Hadrian 2026-08-15, this is the one actually meant by "the
   categories underneath the second avatar strip" - the nav links, not attr-row): no explicit starting
   background-position (so the animation's implicit "from" was the CSS-initial 0% 0%) panning to an
   arbitrary 200% 50% on a gradient that only closes over its OWN un-doubled 0-100% span - the wrap was
   never guaranteed to land on a matching frame. Same fix as attr-row: doubled stops, background-size
   200% (the exact value for one full cycle per 100% of linear position travel), explicit start. */
@keyframes link-glow-flow { to { background-position: 100% 50%; } }
a:hover:not(:where(.tile, .sg-tile, .proc-tile, .attr-card, .t-thumb, .ledger-card, .acd-cell, .minted-thumb)) {
  text-decoration: none;
  background-image: linear-gradient(90deg, #5eead4, var(--link-hot), #b98ce8, #5eead4, var(--link-hot), #b98ce8, #5eead4);
  background-size: 200% 100%;
  background-position: 0% 50%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: link-glow-flow 2.2s linear infinite;
}
.dim, .muted { color: var(--dim); }
.small { font-size: 11px; }
/* prices in a plain sans-serif so the Ξ renders as three simple lines */
.price { color: var(--gold); font-weight: bold; white-space: nowrap; font-family: Arial, Helvetica, sans-serif; }
.offer { color: var(--blue); white-space: nowrap; font-family: Arial, Helvetica, sans-serif; }
.mauve { color: var(--mauve); }
/* a $ amount that reveals £ and € on hover (data-tip) */
.usd-price { position: relative; cursor: help; border-bottom: 1px dotted rgba(147, 134, 180, 0.55); }
.usd-price:hover::after { content: attr(data-tip); position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%);
  margin-bottom: 6px; white-space: nowrap; background: #150e26; border: 1px solid var(--rule-lit); color: var(--ink);
  font-family: Arial, Helvetica, sans-serif; font-size: 11px; padding: 3px 8px; z-index: 90; pointer-events: none; }
.usd-price:hover::before { content: ''; position: absolute; left: 50%; bottom: 100%; transform: translateX(-50%);
  border: 5px solid transparent; border-top-color: var(--rule-lit); z-index: 90; pointer-events: none; }
.num { text-align: right; }
h1, h2, .title { font-family: Georgia, 'Times New Roman', serif; font-weight: normal; color: var(--mauve); }
h1 { font-size: 22px; }
h2 { font-size: 18px; }
h3 { font-family: Verdana, sans-serif; font-size: 11px; text-transform: none; letter-spacing: 1.5px; color: var(--dim); border-bottom: 1px solid var(--rule); padding-bottom: 4px; margin-bottom: 8px; }
code { font-family: 'Courier New', monospace; font-size: 11px; color: var(--dim); word-break: break-all; }

/* ---- the swatch behind every avatar: delicate violet→blue gradient, lightens on hover ---- */
.swatch { display: inline-block; line-height: 0; border: 1px solid #5a4a78;
  background: linear-gradient(135deg, var(--swatch-a), var(--swatch-b)); position: relative; }
/* Hover glow: a ::after overlay that fades in/out via opacity transition so each swatch keeps its
   OWN status colour and the unhover is a smooth fade, not a hard snap. The animated gradient runs
   continuously on the pseudo (cheap, compositor-only) and is revealed by opacity on hover. */
.swatch::after {
  content: ''; position: absolute; inset: 0; opacity: 0;
  transition: opacity 0.35s ease; pointer-events: none;
  background: linear-gradient(120deg, var(--swatch-a-hot), var(--swatch-b-hot), var(--swatch-a-hot), var(--swatch-b-hot));
  background-size: 320% 320%;
  animation: swatchflow 2.5s ease-in-out infinite; }
.swatch:hover::after,
.attr-card:hover .swatch::after,
.sg-tile:hover .swatch::after { opacity: 1; }
@keyframes swatchflow { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
/* sale-status base gradients */
.swatch.swatch-sale { background: linear-gradient(135deg, var(--swatch-sale-a), var(--swatch-sale-b)); }
.swatch.swatch-bid  { background: linear-gradient(135deg, var(--swatch-bid-a), var(--swatch-bid-b)); }
/* sale-status hover overlays: the ::after inherits the right hue per status class */
.swatch.swatch-sale::after {
  background: linear-gradient(120deg, #ffa050, #e09888, #ffa050, #d0a0a8);
  background-size: 320% 320%; }
.swatch.swatch-bid::after {
  background: linear-gradient(120deg, #b060e0, #f0a0c8, #b060e0, #f0a0c8);
  background-size: 320% 320%; }
/* displayed at its exact rendered size (set inline, a multiple of 24) -> uniform square pixels */
.goth-img { display: block; image-rendering: -webkit-optimize-contrast; image-rendering: pixelated; outline: 1px solid rgba(90,74,120,0.6); position: relative; z-index: 1; }
.goth-img.soul-base { outline: none; }

/* ---- buttons: rectangular, 1px outline, colour changes on hover + click, no movement ---- */
/* buttons read bluish; hovering shifts them violet */
/* A4 contrast: the old #f0a050 label sat at ~2.9:1 on this purple gradient (fails WCAG AA 4.5:1). A warm
   near-white #fdf6ee clears AA across the dominant darker two-thirds of the gradient (5.9:1 on the darkest
   stop #6b4fa8, ~4.4:1 on the mid #8b5fc0) while staying on-brand warm; the gradient itself is unchanged. */
/* BASE .btn IS the "Connect Wallet" slab (Hadrian: EVERY real button wears the dark slab, ZERO
   exceptions). The dark background, the animated ::after sweep and the hover/active/disabled swaps all
   come from the consolidated slab rule below (which now lists a bare `.btn` alongside the container
   selectors). This base rule keeps only each button's OWN sizing - padding stays 4px 11px so buttons are
   NOT enlarged - plus the slab's rounded corners and the text-decoration reset that keeps <a class="btn">
   reading as a button. Size modifiers (.btn-sm/.btn-lg/.btn-block/.pager .btn) still layer on top. */
.btn { display: inline-block; padding: 4px 11px; border: none; color: #fff;
  font-family: "Press Start 2P", monospace; font-size: 12px; cursor: pointer; border-radius: 6px; text-decoration: none; -webkit-font-smoothing: antialiased; }
.btn:hover:not(:disabled) { text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--rule-hot); outline-offset: 2px; }
.btn:disabled { cursor: default; }
.price-actions .btn:disabled, .wallet-panel .btn:disabled, .connect-prompt .btn:disabled,
.modal-actions .btn:disabled, .mintp .btn-block:disabled, .btn-slab:disabled, .btn:disabled {
  background: linear-gradient(135deg, #3a2858, #2e2248, #3a2858);
  color: #8a7a9a; -webkit-text-fill-color: #8a7a9a; }
.price-actions .btn:disabled::after, .wallet-panel .btn:disabled::after, .connect-prompt .btn:disabled::after,
.modal-actions .btn:disabled::after, .mintp .btn-block:disabled::after, .btn-slab:disabled::after, .btn:disabled::after { display: none; }
/* .btn-accent is now a no-op alias of the slab (it used to paint a purple gradient + gold text, the look
   Hadrian did NOT want). Kept as a class so existing markup that still carries it renders as a plain slab
   with zero exceptions; a selected/current state (e.g. the active pager page) no longer tints. */
.btn-lg { padding: 7px 16px; font-size: 13px; }
.btn-sm { padding: 1px 7px; font-size: 11px; }
.btn-block { display: block; width: 100%; text-align: center; }
/* BBCode formatting toolbar: its buttons now wear .btn .btn-sm (slabs); this only lays them out. */
.bb-toolbar { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
/* Shared "slab" button: a big, generously-padded gradient-text control. Both the wallet-panel connect
   action and the goth detail-page Buy action wear it, so the two read as one control. The gradient
   background, its animated ::after overlay and the hover/active swaps already come from the
   .wallet-panel .btn / .price-actions .btn rules below (both slabs live inside those containers); this
   class only factors out the shared sizing, padding and centered label. */
.btn-slab { padding: 10px 16px; font-size: 12px; line-height: 1.5; text-align: center; border-radius: 6px; }
input, select { padding: 4px 7px; background: var(--bg); border: 1px solid var(--rule); color: var(--ink);
  font-family: Verdana, sans-serif; font-size: 12px; border-radius: 0; }
input:focus-visible, select:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; border-color: var(--rule-lit); }
input:focus:not(:focus-visible), select:focus:not(:focus-visible) { outline: none; border-color: var(--rule-lit); }
select { cursor: pointer; }

/* ---- masthead ---- */
.register-head { border-bottom: 1px solid var(--rule); }
.mast-wallet { font-size: 11px; color: var(--dim); }
.mast-wallet .bal { color: var(--gold); }
.mast-wallet .wlink { color: var(--link); }
.wallet-chainwarn { color: #e8a86a; font-weight: bold; }
.wallet-balerr { color: #e8848a; }
.wallet-demo-note { color: var(--dim); font-size: 10px; }
.wallet-demo-badge { font-size: 9px; font-weight: bold; letter-spacing: .5px; color: var(--bg);
  background: var(--gold); padding: 1px 4px; border-radius: 2px; }
.wallet-picker { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }

/* ---- sticky topbar (materializes on scroll) ----
   Pinned to the top of the viewport, sized to fit the logo at its natural pixel size (--tb-h). It
   "materializes": transparent while the page rests at the very top, then a solid ruled + blurred bar
   fades in the instant you scroll down (.solid). Three sections: an empty left spacer, the CENTRED
   logo, and the wallet on the right. */
#app { padding-top: var(--tb-h); }   /* keep the page content clear of the fixed bar */
.topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: var(--tb-h);
  display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 0 14px;
  background: transparent; border-bottom: 1px solid transparent;
  transition: background .28s ease, border-color .28s ease, box-shadow .28s ease; }
.topbar.solid { background: rgba(19, 13, 32, 0.9); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  border-bottom: 1px solid var(--logo-pink); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.45); }
.tb-side { flex: 1 1 0; display: flex; align-items: center; min-width: 0; }
.tb-right { justify-content: flex-end; }
/* top-aligned (not centered): the logo is TALLER than the bar on purpose, so it hangs down over the
   first procession strip below (Hadrian) - top-align keeps the overhang on the bottom edge only.
   align-self overrides .topbar's own align-items:center, which was centering tb-mid's whole box inside
   the shorter bar and pushing the logo's top ~12px above the viewport edge (invisible) - the actual bug
   behind "logo not fully visible" (Hadrian). A few px of top margin as a safety buffer past the exact
   viewport edge, at the cost of a little more overlap onto the strip below (Hadrian: fine either way). */
.tb-mid { flex: 0 0 auto; display: flex; align-items: flex-start; justify-content: center; line-height: 1;
  align-self: flex-start; margin-top: 6px; }
.tb-mid:hover { text-decoration: none; }
.tb-mid:hover .tb-logo { filter: drop-shadow(0 0 4px rgba(255,95,125,0.75)) drop-shadow(0 0 9px rgba(255,60,95,0.45)); transition: filter 0.3s ease; }
.tb-logo { transition: filter 0.3s ease; }
/* natural size (Hadrian) - no forced height/width; pixelated like every avatar image, since this is
   also enlarged pixel art and would otherwise get antialiased/blurred at non-1:1 device pixel ratios */
.tb-logo { display: block; image-rendering: -webkit-optimize-contrast; image-rendering: pixelated; }
.tb-mid { position: relative; }
/* On phone-width viewports the logo (351px natural width) alone exceeds the space .tb-side's own
   flex-shrink leaves it, since .tb-mid never shrinks (flex:0 0 auto) - it would overflow past the
   wallet panel on the right. Scaled down (still pixelated, aspect ratio preserved automatically since
   only max-width is set) rather than left to overflow. */
@media (max-width: 480px) {
  .tb-logo { max-width: 220px; }
}

/* ---- persistent wallet panel (Hadrian: pinned to the right edge, unaffected by scroll - was
   previously inside the topbar, which scrolls/materializes) ---- */
/* same pink outline (sampled from the logo) and glassy translucent-blur treatment as the sticky
   topbar's solid state (Hadrian 2026-08-15), so the two persistent chrome pieces read as one family. */
.wallet-panel { position: fixed; top: 50%; right: 0; transform: translateY(-50%); z-index: 41;
  background: rgba(19, 13, 32, 0.85); backdrop-filter: blur(7px); -webkit-backdrop-filter: blur(7px);
  border: 1px solid var(--rule); border-right: 0; border-radius: 6px 0 0 6px;
  padding: 12px 14px; box-shadow: -2px 0 10px rgba(0,0,0,0.35); }
.wallet-panel .mast-wallet { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
/* Disconnected connect state: the whole panel IS the button. The connect slab fills the panel
   edge-to-edge (its own padding replaces the panel's), so the hover background covers the entire div
   rather than only the text area. overflow clips the slab to the panel's rounded left edge. Applied only
   in the connect state (see renderWalletPanel / syncWallet toggling .wallet-panel--connect); the
   connected states keep the panel's normal padding around the balance/address display. */
.wallet-panel--connect { padding: 0; overflow: hidden; }
.wallet-panel--connect .btn-slab { display: block; width: 100%; border-radius: 6px 0 0 6px; }
/* gradient-text buttons: solid bg + white text; ::after gradient overlay with mix-blend-mode: darken
   shows gradient colors only through white text. The bg must have every channel below the gradient's
   minimum (R124 from #7c3aed, G38 from #c026d3, B22 from #f97316) so darken never tints it. */
.wallet-panel .btn, .price-actions .btn, .connect-prompt .btn, .modal-actions .btn, .mintp .btn-block, .btn-slab, .btn {
  position: relative; isolation: isolate; overflow: hidden;
  border: none; background: #0f0b15;
  color: #fff; -webkit-text-fill-color: #fff; }
.wallet-panel .btn::after, .price-actions .btn::after, .connect-prompt .btn::after,
.modal-actions .btn::after, .mintp .btn-block::after, .btn-slab::after, .btn::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(100deg, #7c3aed, #c026d3, #f97316, #c026d3, #7c3aed, #c026d3, #f97316, #c026d3, #7c3aed);
  background-size: 200% 200%; mix-blend-mode: darken; animation: mottofog 40s linear infinite; }
.wallet-panel .btn:hover:not(:disabled), .price-actions .btn:hover:not(:disabled),
.connect-prompt .btn:hover:not(:disabled), .modal-actions .btn:hover:not(:disabled),
.mintp .btn-block:hover:not(:disabled), .btn-slab:hover:not(:disabled), .btn:hover:not(:disabled) { background: #1a1416; }
.wallet-panel .btn:hover:not(:disabled)::after, .price-actions .btn:hover:not(:disabled)::after,
.connect-prompt .btn:hover:not(:disabled)::after, .modal-actions .btn:hover:not(:disabled)::after,
.mintp .btn-block:hover:not(:disabled)::after, .btn-slab:hover:not(:disabled)::after, .btn:hover:not(:disabled)::after {
  background-image: linear-gradient(100deg, #9c5aff, #e040f0, #ff9040, #e040f0, #9c5aff, #e040f0, #ff9040, #e040f0, #9c5aff); }
/* A successful connect swaps the button for the address/balance display, which is real feedback but easy
   to miss if you're watching the button (expecting a wallet-extension popup) rather than this side-pinned
   panel (Hadrian 2026-08-16: "does nothing" reported twice) - one bright, unmissable flash draws the eye
   over on success, on top of the toast. Pure CSS, triggered by a class toggled briefly in components.js. */
.wallet-panel.just-connected { animation: walletConnectFlash 1.1s ease-out; }
@keyframes walletConnectFlash {
  0%   { box-shadow: 0 0 0 3px var(--violet), -2px 0 24px rgba(138,111,198,0.9); }
  100% { box-shadow: -2px 0 10px rgba(0,0,0,0.35); }
}
@media (max-width: 768px) {
  .wallet-panel { position: sticky; top: var(--tb-h); right: auto; left: 0; width: 100%;
    transform: none; border-radius: 0; border: 0; border-bottom: 1px solid var(--rule);
    display: flex; justify-content: center; box-shadow: none; z-index: 39; }
  .wallet-panel .mast-wallet { flex-direction: row; align-items: center; flex-wrap: wrap; justify-content: center; }
}

/* ---- procession strip ---- */
.procession { overflow: hidden; border-bottom: 1px solid var(--rule); }
/* wrapper carries the manual wheel-nudge offset (JS); the CSS-animated .proc-track composes on top of it */
.proc-wrap { display: block; transition: transform 0.18s ease-out; }
.proc-track { display: flex; flex-wrap: nowrap; width: max-content; will-change: transform; }
.proc-row { display: flex; flex: 0 0 auto; }
/* one compositor-driven keyframe: -50% = one identical row width, so the parade loops seamlessly and
   glides on the GPU thread (immune to main-thread jank, the real cause of the pixel-by-pixel jitter) */
/* 5 identical rows: advancing one copy = -20% keeps the loop seamless with generous buffer for
   wheel-nudge offset (up to 2*rowWidth) so scrolling never wraps visibly. */
@keyframes procdrift { from { transform: translateX(0); } to { transform: translateX(-33.3333%); } }
@keyframes procdrift5 { from { transform: translateX(0); } to { transform: translateX(-20%); } }
.proc-tile { flex: 0 0 auto; border-right: 1px solid var(--rule); }
.proc-tile .swatch { border: 0; }
/* The tiles render at exactly 72px (their source size) so `auto` looks identical to `pixelated` while
   STATIC, but it lets the compositor sub-pixel-glide the translated track instead of snapping each
   pixelated tile to the device-pixel grid every frame - which is what made the parade jump pixel by
   pixel. Smooth drift here, crisp pixel art everywhere else. */
.procession .goth-img { image-rendering: auto; }

/* ---- nav ---- */
/* clean oddtales-style nav (no brackets): spaced text links with an underline that grows on hover/active */
.register-nav { display: flex; justify-content: center; gap: 30px; padding: 11px 10px 9px; }
.nlink { color: var(--ink); font-size: 13px; letter-spacing: 1.2px; padding-bottom: 4px; position: relative; }
.nlink::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--violet); opacity: 0; transition: opacity 0.18s ease; }
/* nav links use the same looping teal/violet text gradient as every other clickable text on hover (the
   generic a:hover rule above already covers this; the underline sweep is layered on top here). */
.nlink:hover::after { opacity: 1; background: #5eead4; }
.nlink.active { color: var(--mauve); }
.nlink.active::after { opacity: 1; background: var(--mauve); }
/* A1: Random + Search are real <button>s wearing .nlink (keyboard-focusable, unlike the href-less <a>s the
   URL-scheme guard now leaves behind). Reset the native button chrome so they read byte-for-byte like the
   sibling nav <a> links: no background/border, inherited pixel font (from .nlink), same color, cursor and
   4px underline gutter. The .nlink::after underline sweep already applies (class selector). The hover text
   gradient is anchor-only (a:hover:not(...)), so it is mirrored here; focus-visible matches a:focus-visible. */
button.nlink { background: none; border: none; margin: 0; padding: 0 0 4px; color: var(--ink);
  cursor: pointer; line-height: inherit; }
/* font-family + font-weight are deliberately NOT set here: the `.nlink, .nsep` rule below (Press Start 2P,
   10px, normal weight) is the nav font, and setting font-family:inherit/font-weight:bold here would win on
   specificity and make Random + Search render in the wrong (body) font. Leaving them unset lets the .nlink
   rule govern, so the <button> nav items match the <a> nav links byte-for-byte. */
button.nlink:hover { text-decoration: none;
  background-image: linear-gradient(90deg, #5eead4, var(--link-hot), #b98ce8, #5eead4, var(--link-hot), #b98ce8, #5eead4);
  background-size: 200% 100%; background-position: 0% 50%;
  -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent;
  animation: link-glow-flow 2.2s linear infinite; }
button.nlink:focus-visible { outline: 2px solid var(--rule-hot); outline-offset: 2px; }
/* Hover paints the label with a background-clip:text gradient; with the inline box exactly text-width the
   first glyph's left ink column was getting clipped. A few px of horizontal padding gives the gradient room;
   an equal negative margin keeps the resting nav spacing identical. cursor:pointer here (and on the <a>
   links, which get it for free from href) guarantees every .nlink shows the pointer, not a text I-beam,
   on hover - the native <button> reset had left Random/Search showing a text cursor. */
.nlink, button.nlink {
  padding-left: 3px; padding-right: 3px; margin-left: -3px; margin-right: -3px;
  cursor: pointer;
}

/* ---- accessibility helpers ---- */
/* Standard visually-hidden pattern: keeps text in the accessibility tree (screen readers) while
   removing it from the visual layout. Used for sr-only h1s and any offscreen label text. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
/* WCAG 2.4.1 bypass: offscreen until focused, then it drops into view as the first focusable control. */
.skip-link {
  position: absolute; left: 8px; top: -50px; z-index: 1000;
  background: var(--rule-hot); color: #000; padding: 8px 14px;
  border-radius: 4px; text-decoration: none; font-weight: 700;
  transition: top 0.15s ease;
}
.skip-link:focus { top: 8px; outline: 2px solid #000; outline-offset: 2px; }

/* ---- content column ---- */
.content { max-width: 1040px; margin: 0 auto; padding: 18px 16px 70px; }
/* renderRoute focuses <main> on every route change for screen-reader announcement (tabindex=-1). That focus
   must NOT paint a visible box around the whole content column (it looked like the site was "selected" on
   load). Suppress the outline here; keyboard users reach content via the skip link, not by focusing <main>. */
.content:focus, #main:focus, .content:focus-visible { outline: none; }
.empty { padding: 36px; text-align: center; color: var(--dim); border: 1px solid var(--rule); }
.loading { padding: 30px; text-align: center; color: var(--dim); }
.boot { display: flex; align-items: center; justify-content: center; height: 60vh; color: var(--dim); }
.spinner { display: none; }
/* fixed-width so the looping "." -> ".." -> "..." dot count never reflows "Loading CryptoGoths" or
   re-centers the .boot line (Hadrian) - left-aligned inside its own reserved box. */
.boot-dots { display: inline-block; width: 1.4em; text-align: left; }
.pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 18px; }
.pager-top { margin-top: 0; margin-bottom: 18px; }
.pager-info { color: var(--dim); }
/* the scroll jump sits with the centred Prev/Next group, set apart by a little extra breathing room */
.pager-jump { margin-left: 8px; }
.grid-wrap { display: grid; grid-template-columns: 40px 1fr 40px; position: relative; overflow: clip; }
.page-arrow { position: sticky; top: 50vh; z-index: 10; width: 36px; height: 64px; align-self: start;
  background: var(--panel); border: 1px solid var(--rule); color: var(--ink); font-size: 24px;
  cursor: pointer; opacity: 0.7; display: flex; align-items: center; justify-content: center; }
.page-arrow:hover { opacity: 1; background: var(--panel2); }
.page-arrow-left { border-radius: 0 4px 4px 0; }
.page-arrow-right { border-radius: 4px 0 0 4px; }

/* ---- register tables (used everywhere) ---- */
.reg-table { width: 100%; border-collapse: collapse; border: 1px solid var(--rule); }
.reg-table th { text-align: left; font-family: Verdana, sans-serif; font-weight: normal; font-size: 10px;
  text-transform: none; letter-spacing: .5px; color: var(--dim); padding: 5px 8px; background: var(--panel2); border-bottom: 1px solid var(--rule); }
.reg-table td { padding: 5px 8px; border-bottom: 1px solid var(--rule); vertical-align: middle; }
.reg-table tr:last-child td { border-bottom: 0; }
.reg-table tbody tr:hover { background: var(--panel); }
.reg-table .num { text-align: right; }
.t-thumb { line-height: 0; display: inline-block; }
/* the 48px thumb's hover overlay had no scaled-down text at all - it was inheriting the DEFAULT
   (96px-tuned) sizing, overflowing the tiny swatch the same way the original attribute-trio bug did. */
.t-thumb .sg-hover-text { padding: 5px 6px; }
.t-thumb .sg-id { font-size: 14px; }
.t-thumb .sg-owner { font-size: 11px; }
.t-thumb .sg-eth { font-size: 13px; }
.t-thumb .sg-na { font-size: 11px; }
.ledger-card .sg-hover-text { padding: 4px 5px; }
.ledger-card .sg-id { font-size: 12px; }
.ledger-card .sg-owner { font-size: 9px; }
.ledger-card .sg-eth { font-size: 11px; }
.ledger-card .sg-na { font-size: 9px; }
.key-table td:first-child { color: var(--dim); width: 45%; }
.key-table .big { font-family: Arial, Helvetica, sans-serif; font-size: 15px; color: var(--ink); }

/* ---- HOME / front page ---- */
/* the anti-hype homepage motto (Hadrian 2026-08-15/16, moved to the LEFT of the manifesto + reworded):
   big, thick pixel-block letters (Press Start 2P, already inherently "thick"/blocky), left-justified per
   line. "not" and "CryptoGoths" carry a very slow, foggy violet<->orange drift in vivid, saturated stops.
   Doubled gradient stops + background-size:200% + a single linear 0%->100% pass = an exactly seamless
   loop (same technique as .attr-row.lit a's and the nav link-glow-flow fix - no ping-pong, no snap).
   Descender clipping fix (Hadrian: "bottom is cut off" - g/y in "buying"/"selling"/"CryptoGoths"): the
   9-10px `text-rendering: optimizeSpeed` hint two sections down exists ONLY to de-blur Press Start 2P at
   tiny sizes (see that comment) - it has no business on a 20px+ heading and was dropped here.
   Taller + tight-stacked letters (Hadrian 2026-08-16: "letters taller and much closer to each other"):
   line-height packs the rows close, then EACH LINE is independently stretched vertically with a paint-only
   `transform: scaleY()` anchored at its own top edge - transforms never affect layout/box height, so the
   tight line-height controls how close rows sit while the transform makes the glyphs themselves taller and
   visually crowd into the gap, "almost touching" the row below, with zero risk of the descender-clipping
   bug above (no overflow:hidden anywhere in this chain). */
.home-motto { font-family: "Press Start 2P", monospace; text-align: left; color: var(--mauve);
  font-size: 22px; line-height: 1.25; margin: 0; -webkit-font-smoothing: antialiased; overflow: visible;
  user-select: none; -webkit-user-select: none;
  /* the scaleY() below is PAINT-ONLY - it doesn't add to layout height, so the last line's stretched
     glyphs would otherwise visually spill past this block's box into whatever sits below it (Recent
     Sales). This reserves that space without affecting the tight look between the motto's own lines. */
  padding-bottom: 18px; }
.home-motto > div { transform: scaleY(1.35); transform-origin: 0 0; }
.motto-glow { background-image: linear-gradient(100deg,
    #7c3aed, #c026d3, #f97316, #c026d3, #7c3aed,
    #c026d3, #f97316, #c026d3, #7c3aed);
  background-size: 200% 200%; -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
  animation: mottofog 40s linear infinite; }
@keyframes mottofog { to { background-position: 100% 100%; } }
@media (max-width: 700px) { .home-motto { font-size: 20px; } }
@media (max-width: 420px) { .home-motto { font-size: 16px; } }
.front-lead { display: grid; grid-template-columns: 1fr 1.4fr; gap: 18px; align-items: stretch; }
.manifesto { display: flex; flex-direction: column; justify-content: center; }
.manifesto h2 { text-align: center; color: var(--mauve); }
.manifesto p { color: var(--ink); margin-bottom: 18px; font-family: Georgia, serif; font-size: 13px; line-height: 1.65; }
.manifesto p:last-of-type { margin-bottom: 0; }
.front-side { display: flex; flex-direction: column; gap: 22px; }
/* Register, compacted (Hadrian: "lots of empty spaces") to leave room for the motto sharing this column:
   the reg-table's header row was two blank <th>s (id/value have no column titles) - pure wasted height,
   dropped entirely; row padding tightened from the site-wide 5px/8px default. */
.front-side h3 { color: var(--mauve); }
.ledger h3 { margin-bottom: 6px; }
.ledger .reg-table thead { display: none; }
.ledger .reg-table td { padding: 3px 8px; }
.ledger .key-table .big { font-size: 13px; }
.ledger-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.ledger-card { display: flex; align-items: center; gap: 6px; padding: 4px 6px; border: 1px solid var(--rule); background: var(--panel); color: var(--ink); }
.ledger-card:hover { border-color: var(--rule-lit); text-decoration: none; }
.lc-info { display: flex; flex-direction: column; gap: 1px; font-size: 11px; }
.lc-id { font-weight: bold; }
.lc-event { color: var(--dim); font-size: 10px; text-transform: uppercase; letter-spacing: 0.5px; }
.lc-price { font-size: 11px; }
.front-tables { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-top: 24px; }
.front-strip { margin-top: 24px; }
.front-topsales { margin-top: 28px; }
.front-topsales .reg-table td:first-child { width: 1%; white-space: nowrap; }
.front-block { margin-top: 32px; }
.topsales-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.strip { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }

/* ---- OWNERS page ---- */
.owners-records { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin-bottom: 22px; }
.owners-records h3 { margin-bottom: 8px; }
/* vault give-away/bought split: deliberately NOT the swatch-status palette (violet/blue default, rose/amber
   listed, deep-violet bid) - that grammar already means something else on this site (Hadrian, via Sol). */
.owner-origin { display: flex; flex-direction: column; gap: 3px; font-size: 11px; white-space: nowrap; }
.origin-bar { width: 64px; height: 4px; background: var(--rule); overflow: hidden; }
.origin-won { height: 100%; background: var(--gold); }
.pnl { font-family: Arial, Helvetica, sans-serif; font-weight: bold; white-space: nowrap; }
.pnl-pos { color: #6fd88a; }
.pnl-neg { color: #e8848a; }
.owners-method { margin-top: 14px; line-height: 1.6; max-width: 760px; }

/* ---- dense grid (explore, account, strip) ---- */
.dense-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.block-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(122px, max-content)); justify-content: center; }
.tile { display: flex; flex-direction: column; border: 1px solid var(--rule); background: var(--panel); color: var(--ink); }
.tile:hover { border-color: var(--rule-lit); text-decoration: none; }
.tile .swatch { border: 0; border-bottom: 1px solid var(--rule); }
.tile-cap { display: flex; justify-content: space-between; padding: 3px 6px; font-size: 11px; }
.tile-id { color: var(--ink); }

/* ---- EXPLORE / the crypt ---- */
.crypt-bar { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding-bottom: 10px; margin-bottom: 12px; border-bottom: 1px solid var(--rule); }
.crypt-count { color: var(--mauve); font-family: Georgia, serif; font-size: 15px; }
.seg { display: inline-flex; border: 1px solid var(--rule); }
.seg button { padding: 4px 9px; background: var(--panel); border: 0; border-right: 1px solid var(--rule); color: var(--dim);
  font-family: Verdana, sans-serif; font-size: 12px; cursor: pointer; }
.seg button:last-child { border-right: 0; }
.seg button:hover { color: var(--ink); }
.seg button.on { background: #3a2566; color: #efe7ff; }
.seg button:focus-visible { outline: 2px solid var(--rule-hot); outline-offset: -2px; }
.crypt-bar .grow { flex: 1; }
.trait-toggle { cursor: pointer; }
.trait-panel { display: none; border: 1px solid var(--rule); background: var(--panel); padding: 10px; margin-bottom: 12px;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 4px 18px; }
.trait-panel.open { display: grid; }
.tgroup { }
.tgroup > .tg-head { font-size: 10px; text-transform: none; letter-spacing: .5px; color: var(--dim); border-bottom: 1px solid var(--rule); padding-bottom: 2px; margin-bottom: 3px; }
.tg-opt { display: flex; align-items: center; gap: 5px; font-size: 11px; color: var(--dim); cursor: pointer; }
.tg-opt:hover { color: var(--ink); }
.tg-more { color: var(--link); cursor: pointer; font-size: 11px; }

/* ---- GOTH / a soul: a full-bleed, softly-swirling ocean band with three floating cards ---- */
.soul-hero { position: relative; left: 50%; right: 50%; width: 100vw; margin-left: -50vw; margin-right: -50vw;
  border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); overflow: hidden;
  background: linear-gradient(135deg, #6050c0, #304aa0, #7058c8, #3858b0, #6848b8, #3050a8);
  background-size: 320% 320%; background-repeat: no-repeat; animation: ocean 60s linear infinite; }
/* a second, slowly-drifting pair of soft light pools, for ocean-like depth */
.soul-hero::before { content: ''; position: absolute; inset: -10%; pointer-events: none; mix-blend-mode: screen; background-repeat: no-repeat;
  background: radial-gradient(45% 60% at 30% 40%, rgba(168,158,236,0.42), transparent 70%),
              radial-gradient(40% 55% at 75% 62%, rgba(126,146,224,0.38), transparent 70%);
  background-size: 200% 200%, 230% 230%; animation: ocean2 48s linear infinite; }
/* Both drifts are CLOSED LOOPS traversed at CONSTANT (linear) speed: the position circles round and
   returns to its start without ever RETRACING, so there is no decelerate-pause-reverse at the turn (the
   old ease-in-out + `alternate` bounce is exactly the "goes down, waits, goes back up" line the user saw).
   Corners are 90 degrees, not 180, and the gradients are soft enough that the turns are imperceptible. */
@keyframes ocean { 0%{background-position:20% 25%} 25%{background-position:80% 35%} 50%{background-position:80% 80%} 75%{background-position:20% 70%} 100%{background-position:20% 25%} }
@keyframes ocean2 {
  0%{background-position:30% 40%, 70% 60%} 25%{background-position:70% 40%, 30% 60%}
  50%{background-position:70% 60%, 30% 40%} 75%{background-position:30% 60%, 70% 40%}
  100%{background-position:30% 40%, 70% 60%} }
/* band height == avatar (only wider). Attributes LEFT, avatar CENTRE, identity+price RIGHT; the side
   cards are vertically centred so they sit inset from the band's top/bottom edges. Fixed heights, no
   scrollbars: content is sized to fit. */
.soul-hero-inner { position: relative; z-index: 1; max-width: 1280px; margin: 0 auto; padding: 0 28px; height: 432px; display: flex; gap: 20px; align-items: center; justify-content: space-between; }
.soul-stage { position: relative; width: 432px; height: 432px; flex: 0 0 auto; }
.soul-base { position: relative; z-index: 1; }
.soul-hero-sale { background: linear-gradient(135deg, #d85838, #c06878, #e87848, #b868a0, #d06040, #9870a8);
  background-size: 320% 320%; animation: ocean 60s linear infinite; }
.soul-hero-bid { background: linear-gradient(135deg, #7030a8, #b06098, #8038b8, #a85888, #7830a0, #c068a8);
  background-size: 320% 320%; animation: ocean 60s linear infinite; }
.soul-right { width: 300px; flex: 0 0 auto; display: flex; flex-direction: column; gap: 14px; }
/* Side panels either side of the avatar (attrs on the left, head + price on the right) must be fully
   opaque so the full-bleed hero gradient never shows through them (Hadrian). Same colour as before
   (rgba(18,12,30,0.78)), just alpha 1. */
.soul-card { background: #120c1e; border: 1px solid var(--rule); padding: 11px 13px; overflow: hidden; }
.soul-card.attrs { width: 336px; flex: 0 0 auto; height: 408px; overflow-y: auto; overflow-x: hidden; }
/* attribute rows: each name stays on ONE line (smaller font + tight padding so the long ones still fit) */
.soul-card.attrs .reg-table { font-size: 12.5px; }
.soul-card.attrs .reg-table td { padding: 5px 8px; }
/* long attribute names WRAP instead of overflowing the card; the count stays on one line, right-aligned */
.attr-table td.ar-name { white-space: normal; word-break: break-word; }
/* the count column has a FIXED width so its header wraps to ~2 lines (not the 5 it collapsed to when the
   column was sized to the number alone), and the numbers sit right-aligned within it */
.attr-table th.num, .attr-table td.num, .attr-table td.ar-count { width: 88px; text-align: right; }
.attr-table td.num, .attr-table td.ar-count { white-space: nowrap; }
/* the single "# of Goths that have this:" header stays pinned while the list scrolls inside the card */
.attr-table thead th { position: sticky; top: 0; z-index: 1; background: #150e26; border-bottom: 1px solid var(--rule);
  font-family: Verdana, sans-serif; font-weight: normal; font-size: 10px; letter-spacing: .3px; color: var(--dim); padding: 4px 8px; text-align: left; }
.attr-table thead th.num { text-align: right; white-space: normal; }
/* the short "Goths with it:" header stays on ONE line (no vertical bloat of the attributes card) */
.attr-table thead th.nowrap { white-space: nowrap; width: auto; }
.soul-card.attrs .attrs-cap { font-size: 11px; }
/* identity + price cards grow to fit their content (no fixed height -> nothing gets clipped) */
.soul-card.head { min-height: 104px; }
.soul-card.price { min-height: 150px; }
/* "Save as" export control (small button INSIDE the price card - no standalone panel). The button is a
   small slab; the format menu is positioned position:fixed from the button's rect in goth.js at open
   time, so it escapes the price card's overflow:hidden and paints above the section below. */
.saveas-wrap { position: relative; margin-top: 10px; }
.saveas-btn { display: inline-flex; align-items: center; gap: 6px; }
.saveas-caret { font-size: 10px; opacity: .85; }
.saveas-menu { position: fixed; z-index: 55; min-width: 140px;
  background: #150e26; border: 1px solid var(--rule); border-radius: 6px; overflow: hidden;
  box-shadow: 0 8px 22px rgba(0,0,0,0.5); }
.saveas-menu[hidden] { display: none; }
.saveas-item { display: block; width: 100%; text-align: left; background: none; border: 0; cursor: pointer;
  color: var(--ink, #e8e2f0); font-family: Verdana, sans-serif; font-size: 12px; padding: 9px 13px; }
.saveas-item + .saveas-item { border-top: 1px solid var(--rule); }
.saveas-item:hover:not(:disabled) { background: #201636; }
.saveas-item:disabled, .saveas-btn:disabled { opacity: .55; cursor: default; }
.nft-joke { margin: 4px 0; font-size: 15px; color: var(--ink, #e8e2f0); }
/* the highlight has TWO stacked layers per attribute, isolated so they blend with each other (not the
   whole avatar) and then fade in/out together as one group (opacity pulse, JS - see goth.js):
     .attr-real - the attribute's OWN sprite redrawn ON TOP and brightened, so the attribute SHINES
                  THROUGH any layer that covers it (hair under a hat, eyeshadow under hair, ...).
     .attr-glow - the same shape washed by a slow oceanic cyan↔violet gradient that SWEEPS diagonally
                  in waves (CSS background-position), recolouring the attribute so the highlight reads
                  on any colour. Jewelry / metal gets a warmer, redder sweep so it stays visible on gold. */
/* a delicate pink/red AURA haloing the highlighted pixels; it fades/pulses with the overlay's opacity */
.attr-ov { position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 2; isolation: isolate;
  filter: drop-shadow(0 0 4px rgba(255,95,125,0.75)) drop-shadow(0 0 9px rgba(255,60,95,0.45)); }
.attr-real { position: absolute; inset: 0; width: 100%; height: 100%; image-rendering: -webkit-optimize-contrast; image-rendering: pixelated;
  filter: brightness(1.5) contrast(1.04); }
/* skin: NO brightness at all. Any brightness multiply clamps the palest human skin (234,217,217) toward
   (255,255,255) = the exact vampire-white RGB, which made a "Human" goth read as a Vampire when the skin
   overlay was lit (the thrice-reported "Human label / Vampire image" bug). Saturation alone lifts the tone
   without ever pushing a channel to 255; the pink aura + cyan/violet glow sweep mark the "lit" state. */
.attr-real.skinkeep { filter: saturate(1.15); }
/* ONE unified sweep for EVERY attribute (jewelry included, same as e.g. Cigarette Holder): cyan, violet
   AND red flowing together through the same gradient */
.attr-glow { position: absolute; inset: 0; mix-blend-mode: screen; opacity: 0.85;
  background: linear-gradient(115deg, #45dcff, #8b78ff, #ff5470, #57d2ff, #b06bff, #45dcff);
  background-size: 280% 280%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  animation: attrsweep 8s ease-in-out infinite; }
/* skin keeps its colour: only a whisper of sweep over the real tone */
.attr-glow.skinkeep { opacity: 0.16; }
/* MULTIPLY twin of the sweep: screen washes out on near-white pixels, multiply tints them, so the
   gradient stays visible on silver jewelry, the Grin (white teeth) and other light colours */
.attr-glow.attr-glow-mul { mix-blend-mode: multiply; opacity: 0.62; }
@keyframes attrsweep { 0% { background-position: 0% 0%; } 50% { background-position: 100% 100%; } 100% { background-position: 0% 0%; } }
.soul-title { display: flex; align-items: center; gap: 10px; }
.soul-title h1 { display: inline; }
.soul-sub { color: var(--ink); margin-top: 4px; }
.soul-held, .soul-floor { display: block; font-size: 12px; margin-top: 3px; }
.soul-prov { margin-top: 6px; }
.badge { border: 1px solid var(--rule); padding: 1px 7px; font-size: 11px; text-transform: capitalize; color: var(--dim); }
.badge.warn { color: var(--gold); border-color: var(--gold); }
.price-label { color: var(--dim); font-size: 10px; text-transform: none; letter-spacing: .5px; }
.holder-label { color: var(--gold); font-size: 12px; font-weight: bold; }
.price-big { font-family: Arial, Helvetica, sans-serif; font-weight: bold; font-size: 26px;
  background-image: linear-gradient(100deg, #7c3aed, #c026d3, #f97316, #c026d3, #7c3aed, #c026d3, #f97316, #c026d3, #7c3aed);
  background-size: 200% 200%; -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent; animation: mottofog 40s linear infinite; }
.price-usd { color: var(--dim); }
.price-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
/* price-actions gradient-text: see consolidated block above */
.price-big.dim { background-image: none; background: none; -webkit-background-clip: unset; background-clip: unset;
  color: var(--dim); -webkit-text-fill-color: var(--dim); animation: none; }
.price-big.offer-big { background-image: linear-gradient(100deg, #5b8dee, #7c3aed, #38bdf8, #7c3aed, #5b8dee, #7c3aed, #38bdf8, #7c3aed, #5b8dee); }
.attr-row { cursor: pointer; }
.attr-row:hover { background: var(--panel2); }
.soul-below { max-width: 1040px; margin: 22px auto 0; }
.soul-section { margin-top: 16px; }
/* the market-status + transaction-history tables read at a larger, more legible size */
.soul-below .reg-table { font-size: 13.5px; }
.soul-below .reg-table th { font-size: 11px; }
.soul-below .reg-table td { padding: 8px 11px; }
.mk-accept { margin-top: 9px; }
/* centred, directly under the avatar: big gradient-filled name (matches the ocean band), attribute count,
   and the owner's editable "word" */
.soul-mid { text-align: center; padding: 14px 16px 4px; }
/* Big "CryptoGoth #N" name centred under the avatar. Pixel font by explicit owner request
   (2026-08-22) - deliberate, not the accidental-pixel case the .soul-title comment warns about. */
.soul-bignum { font-family: "Press Start 2P", monospace; font-size: 18px; letter-spacing: 0; line-height: 1.4;
  background: linear-gradient(135deg, #c8a2c8, #9279c4, #7f8fe0, #b6a0e6); -webkit-background-clip: text;
  background-clip: text; color: transparent;
  -webkit-font-smoothing: none; text-rendering: optimizeSpeed; }
.soul-nav { display: flex; align-items: center; justify-content: center; gap: 16px; }
.soul-nav-arrow { flex: 0 0 auto; width: 32px; height: 32px; display: flex; align-items: center;
  justify-content: center; border-radius: 50%; background: var(--panel); border: 1px solid var(--rule);
  color: var(--ink); font-size: 20px; text-decoration: none; cursor: pointer; opacity: 0.7;
  transition: opacity 0.15s, background 0.15s; }
.soul-nav-arrow:hover { opacity: 1; background: var(--panel2); text-decoration: none; }
.soul-attrcount { margin-top: 2px; }
/* price paid (left) / current asking price if listed (right), directly under the big name */
.soul-paidrow { display: flex; justify-content: center; gap: 34px; margin-top: 8px; flex-wrap: wrap; }
.soul-paid-cell { text-align: center; }
.soul-paid-cell.right { text-align: right; }
.soul-word { margin-top: 12px; }
.sw-label { color: var(--dim); font-size: 11px; letter-spacing: .5px; }
.sw-text { font-family: Georgia, serif; font-size: 16px; color: var(--mauve); margin-top: 2px; }
.sw-edit { display: inline-flex; gap: 6px; align-items: center; margin-top: 5px; }
.sw-input { width: 250px; text-align: center; }
/* CryptoPunks-style "Goths by number of attributes" strip */
.attr-count-dist { border: 1px solid var(--rule); margin: 0 auto 18px; width: fit-content; max-width: 100%; }
.acd-title { display: block; font-size: 10px; letter-spacing: .5px; color: var(--dim); padding: 4px 8px; background: var(--panel2); border-bottom: 1px solid var(--rule); text-align: center; }
.acd-row { display: flex; flex-wrap: wrap; justify-content: center; }
.acd-cell { display: flex; flex-direction: column; align-items: center; padding: 5px 13px; border-right: 1px solid var(--rule); min-width: 46px; cursor: pointer; }
.acd-cell:hover { background: var(--panel2); text-decoration: none; }
.acd-cell:hover .acd-n { color: var(--rule-hot); }
.acd-cell.on { background: var(--panel2); }
.acd-cell.on .acd-n { color: var(--rule-hot); }
.acd-n { font-family: "Silkscreen", Georgia, serif; font-size: 18px; color: var(--mauve);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeSpeed; }
.acd-g { font-size: 11px; }
/* every address is a link to its owner profile */
.addr-link { color: var(--link); }
/* attributes card: one title only (no redundant "Attribute" header), a one-line caption, then rows */
.attrs-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; border-bottom: 1px solid var(--rule); margin-bottom: 6px; padding-bottom: 4px; }
.attrs-head h3 { border: 0; margin: 0; padding: 0; }
.attrs-race { width: 100%; font-size: 12px; letter-spacing: .3px; color: var(--dim); }
.attrs-race .race-name { color: var(--mauve); font-weight: bold; }
.attrs-cap { font-size: 10px; letter-spacing: .3px; }
.attr-table td:last-child { text-align: right; width: 1%; white-space: nowrap; color: var(--dim); }
/* a row "lit" (hovering its name OR its attribute on the image): the name takes the same sweeping
   cyan/violet/red gradient as the on-image highlight, over a faint panel */
.attr-row.lit { background: rgba(123,107,194,0.16); }
/* The gradient's 5 colors are listed TWICE (2 full cycles packed into one gradient definition) and
   background-size is exactly 200% - the one value that makes a linear 0%->100% position pan cover
   EXACTLY one cycle's width, so frame 0 and the wrap-back-to-frame-0 are pixel-identical. The previous
   version panned only one COPY of the cycle back and forth (ease-in-out, 0%->100%->0%) - decelerating to
   a near-stop at both the turnaround AND the loop restart is what read as a visible flicker/snap back to
   the start (Hadrian 2026-08-15), not a smooth continuous flow. linear timing + no reverse leg fixes it. */
.attr-row.lit a { background: linear-gradient(115deg,
    #45dcff, #8b78ff, #ff5470, #57d2ff, #b06bff, #45dcff, #8b78ff, #ff5470, #57d2ff, #b06bff, #45dcff);
  background-size: 200% 200%; -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: attrsweep-seamless 8s linear infinite; }
@keyframes attrsweep-seamless { to { background-position: 100% 100%; } }
.attr-row.lit .ar-count { color: var(--ink); }
/* owner profile page */
.addr-head { border-bottom: 1px solid var(--rule); padding-bottom: 12px; margin-bottom: 16px; }
.addr-full { font-family: 'Courier New', monospace; font-size: 12px; word-break: break-all; margin-top: 2px; }
.addr-stats { display: flex; gap: 26px; margin-top: 12px; flex-wrap: wrap; }
.addr-stat { display: flex; flex-direction: column; }
.as-big { font-family: Arial, Helvetica, sans-serif; font-size: 20px; color: var(--ink); font-weight: bold; }
.as-label { font-size: 11px; letter-spacing: .5px; }
/* ---- footer: our broadsheet take on the CryptoPunks sitemap ---- */
.register-foot { border-top: 3px double var(--rule); margin-top: 56px; padding: 26px 16px 32px; background: rgba(0,0,0,0.18); }
.foot-cols { max-width: 1040px; margin: 0 auto; display: flex; flex-wrap: wrap; gap: 26px 64px; }
.foot-col { display: flex; flex-direction: column; gap: 5px; }
.foot-h { font-family: Georgia, serif; font-size: 13px; color: var(--mauve); margin-bottom: 4px; }
.foot-link { color: var(--link); font-size: 12px; }
.foot-base { max-width: 1040px; margin: 22px auto 0; padding-top: 14px; border-top: 1px solid var(--rule);
  display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.foot-mark { font-family: "Press Start 2P", monospace; font-size: 8px; color: var(--mauve); letter-spacing: 0; -webkit-font-smoothing: none; text-rendering: optimizeSpeed; }
/* currency picker in footer */
.cur-wrap { position: relative; }
.cur-btn { background: none; border: 1px solid var(--rule); color: var(--dim); font-size: 11px; padding: 3px 10px;
  cursor: pointer; font-family: Verdana, sans-serif; }
.cur-btn:hover { border-color: var(--rule-lit); color: var(--ink); }
.cur-menu { display: none; position: absolute; bottom: 100%; right: 0; margin-bottom: 8px; min-width: 220px;
  background: #150e26; border: 1px solid var(--rule-lit); padding: 10px; z-index: 80;
  box-shadow: 0 -4px 16px rgba(0,0,0,0.5); max-height: 320px; overflow-y: auto; }
.cur-menu.open { display: block; }
.cur-row { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--ink); padding: 3px 0;
  cursor: pointer; white-space: nowrap; }
.cur-row:hover { color: var(--link); }
.cur-row input[type="checkbox"] { accent-color: var(--mauve); }
/* ---- legal / content pages (Terms, Privacy, License) ---- */
.legal-page { padding: 8px 16px 48px; }
.legal { max-width: 680px; margin: 0 auto; }
.legal-h1 { font-family: Georgia, serif; color: var(--mauve); font-size: 30px; margin: 18px 0 6px; }
.legal-sub { color: var(--dim); font-size: 13px; margin-bottom: 22px; font-style: italic; }
.legal-h2 { font-family: Georgia, serif; color: var(--ink); font-size: 18px; margin: 24px 0 7px;
  border-bottom: 1px solid var(--rule); padding-bottom: 4px; }
.legal p { font-size: 14px; line-height: 1.62; margin-bottom: 12px; color: var(--ink); }
.legal-a { color: var(--link); }
.legal-fine { font-size: 12px; color: var(--dim); }
/* ---- dev panel (font swap + drag-and-drop rarity organizer) ---- */
/* ---- ATTRIBUTES page: clickable cards (name/count/pct + sample avatars) per category ---- */
.attr-cat { margin-bottom: 22px; }
.attr-cat h3 { margin-bottom: 10px; }
/* 4 cards per row (Hadrian); a fixed column count reads better than flex-wrap's variable count per row */
.attr-card-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
/* the name/count/pct line stacks HORIZONTALLY (one row: "Name  Count  Pct%") ABOVE the trio, not beside it
   (Hadrian) - DOM order in attributes.js's card() puts .ac-meta before the trio to match. */
.attr-card { display: flex; flex-direction: column; align-items: center; gap: 7px; border: 1px solid var(--rule);
  background: var(--panel); color: var(--ink); padding: 8px 6px; text-align: center; }
.attr-card:hover { border-color: var(--rule-lit); text-decoration: none; }
.attr-card .swatch { flex: 0 0 auto; display: block; }
.ac-block { display: inline-flex; flex-direction: column; border: 1px solid var(--rule);
  background: var(--rule); overflow: hidden; gap: 1px; width: 219px; position: relative; }
.ac-block .swatch { border: 0; }
.ac-block .goth-img { outline: none; }
/* Every track is a multiple of 24 (the source-art dimension) so each avatar renders as identical square
   pixel blocks - no fractional scaling, no clipping. Big avatar = 144 (6x24) spanning both rows; the two
   stacked ones = 72 (3x24) each. The 1px row gap means the pair (72+1+72) sits 1px taller than the big
   avatar's 144 image, so a hairline of the --rule background shows under the big one, matching the grid's
   1px rules. (Was 72px 71px, which crushed the lower stacked avatar into a non-24 cell - the stretch bug.) */
.ac-trio { display: grid; grid-template-columns: 144px 72px; grid-template-rows: 72px 72px;
  gap: 1px; flex: 0 0 auto; overflow: hidden; }
.ac-trio > :first-child { grid-row: 1 / -1; }
.ac-trio-col { display: contents; }
.ac-trio-col .sg-hover-text { padding: 4px 5px; }
.ac-trio-col .sg-id { font-size: 12px; }
.ac-trio-col .sg-owner { font-size: 10px; }
.ac-trio-col .sg-eth { font-size: 11px; }
.ac-trio-col .sg-na { font-size: 10px; }
.ac-more { position: relative; display: grid; grid-template-columns: repeat(auto-fit, 24px); grid-template-rows: 24px; gap: 1px;
  max-height: 25px; overflow: hidden; justify-content: start; }
.ac-more .sg-tile { width: auto; height: 24px; min-width: 0; overflow: hidden; border: 0; }
.ac-more .sg-tile .goth-img { left: 0; transform: none; }
.ac-more-few { justify-content: center; overflow: visible; }
.ac-more-few .sg-tile { width: 24px; }
.ac-more .sg-hover-text { padding: 2px 3px; }
.ac-more .sg-id { font-size: 8px; }
.ac-more .sg-owner, .ac-more .sg-eth, .ac-more .sg-na { display: none; }
.ac-more-mark { position: absolute; top: 0; bottom: 0; left: 0; right: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.45); color: #fff; font-weight: bold; font-size: 12px; pointer-events: none; z-index: 2; }
.ac-meta { min-width: 0; width: 100%; display: flex; align-items: baseline; justify-content: center;
  flex-wrap: wrap; gap: 5px; }
.ac-name { color: var(--ink); }
.ac-count { font-size: 11px; font-family: Arial, Helvetica, sans-serif; }
.ac-pct { font-size: 11px; font-family: Arial, Helvetica, sans-serif; }
/* ---- RACES row on the attributes page: one horizontal scrollable band, rarest to the right ---- */
.race-row { border: 1px solid var(--rule); background: var(--panel); margin: 0 0 16px; padding: 7px 9px; }
/* WRAP the races onto as many lines as needed (Hadrian: no horizontal scrollbar; two lines if it must) */
.race-cells { display: flex; flex-wrap: wrap; gap: 8px; }
.race-cells .attr-card { flex: 0 0 auto; }

/* ---- per-attribute SEARCH grid: big avatars; hover overlays #id / ethΞ / $usdK ---- */
.search-head { border-bottom: 1px solid var(--rule); padding-bottom: 8px; margin-bottom: 16px; }
.search-head .dim { margin-top: 4px; }
.attr-info-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 4px; }
.attr-sort { background: var(--panel); color: var(--ink); border: 1px solid var(--rule); border-radius: 4px; padding: 3px 6px; font-size: 13px; cursor: pointer; }
.sg-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.sg-tile { position: relative; display: block; border: 1px solid var(--rule); line-height: 0; overflow: hidden; }
.sg-tile:hover { border-color: var(--rule-lit); }
.sg-tile .swatch { border: 0; }
/* hover overlay: lines justified to the TOP-RIGHT; the dim is a delicate black vignette around the
   borders, concentrated (strongest) in the top-right corner so the text stays legible over the avatar */
.sg-hover { position: absolute; inset: 0; z-index: 2;
  background:
    linear-gradient(to bottom, rgba(0,0,0,0.66) 0%, rgba(0,0,0,0.12) 36%, rgba(0,0,0,0) 58%),
    radial-gradient(85% 85% at 100% 0%, rgba(0,0,0,0.80) 0%, rgba(0,0,0,0.22) 42%, rgba(0,0,0,0) 70%),
    radial-gradient(125% 125% at 50% 50%, rgba(0,0,0,0) 52%, rgba(0,0,0,0.38) 100%);
  opacity: 0; transition: opacity 0.12s; }
/* the text lines: a SIBLING of .sg-hover (the dark vignette), not a child of it - see components.js's
   avatarHover for why (a parent with its own opacity transition traps a descendant's z-index inside it,
   which would have made the procession-strip/logo fix below impossible). Independently faded in/out via
   the same :hover trigger, so visually it still reads as one overlay. */
.sg-hover-text { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; align-items: flex-end; justify-content: flex-start; gap: 2px;
  padding: 6px 7px; text-align: right;
  opacity: 0; transition: opacity 0.12s; font-family: Arial, Helvetica, sans-serif; line-height: 1.2;
  /* 1px black outline around every hover line (inherited) so the text stays legible over any avatar colour */
  text-shadow: -1px -1px 0 #000, 0 -1px 0 #000, 1px -1px 0 #000, 1px 0 0 #000, 1px 1px 0 #000, 0 1px 0 #000, -1px 1px 0 #000, -1px 0 0 #000,
    -2px 0 0 #000, 2px 0 0 #000, 0 -2px 0 #000, 0 2px 0 #000; }
.sg-tile:hover .sg-hover, .sg-tile:hover .sg-hover-text { opacity: 1; }
/* the sticky logo overhangs the first procession row (Hadrian 2026-08-15): when a covered avatar is
   hovered, its INFO TEXT rises above the logo (z-index 41), but the dark vignette (.sg-hover, no z-index
   change here) and the avatar image itself stay exactly where they always were, underneath it. */
.proc-tile .sg-hover-text { z-index: 42; }
.sg-id { color: var(--mauve); font-weight: bold; font-size: 16px; }
/* who holds it right now: an ENS-style handle / project label if it has one, else "0x"+4 digits+"…"
   (Hadrian 2026-08-15) - deliberately terser than the full profile-page address format. */
.sg-owner { color: var(--ink); font-size: 13px; }
.sg-eth { color: #fff; font-size: 15px; }
.sg-usd { color: var(--gold); font-size: 13px; }
/* the top procession strips reuse the SAME #id + sale-status + price hover overlay as every other avatar,
   compact and borderless to keep the parade look. The swatch already carries the sale-status gradient. */
.proc-tile.sg-tile { border: 0; border-right: 1px solid var(--rule); }
/* the overlay-swatch nested inside the grid tiles / table thumbs / trio keeps NO extra border, so the grids
   look unchanged; only the #id + status + price overlay is added on hover. */
.tile .sg-tile, .t-thumb .sg-tile, .ac-trio .sg-tile { border: 0; }
.tile .sg-tile { align-self: flex-start; width: fit-content; }
.t-thumb .sg-tile { display: inline-block; }
.minted-thumb .sg-tile { display: inline-block; }
.proc-tile .sg-hover-text { padding: 4px 5px; }
.proc-tile .sg-id { font-size: 12px; }
.proc-tile .sg-owner { font-size: 10px; }
.proc-tile .sg-eth { font-size: 11px; }
.proc-tile .sg-na { font-size: 10px; }
.sg-na { color: var(--dim); font-size: 12px; }

/* ---- MINT ---- */
.mint-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; align-items: start; }
.mint-lead .lead { font-family: Georgia, serif; font-size: 14px; color: var(--mauve); margin-bottom: 10px; }
.mint-box { border: 1px solid var(--rule); background: var(--panel); padding: 14px; margin-top: 14px; }
/* mintp gradient-text: see consolidated block above */
.progress-bar { height: 14px; background: var(--bg); border: 1px solid var(--rule); }
.progress-fill { height: 100%; background: var(--violet); }
.progress-meta { display: flex; justify-content: space-between; margin-top: 5px; font-size: 11px; }
.mint-free { display: flex; align-items: baseline; gap: 8px; margin: 16px 0 12px; }
.mint-free .free { font-family: Arial, Helvetica, sans-serif; font-size: 24px; color: var(--mauve); font-weight: bold; letter-spacing: 1px; }
.qty { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.qty .v { font-family: Georgia, serif; font-size: 18px; min-width: 22px; text-align: center; }
.qty .max { margin-left: auto; color: var(--dim); font-size: 11px; }
.mint-waiver-label { display: flex; align-items: flex-start; gap: 8px; font-size: 11px; color: var(--dim); margin-bottom: 12px; cursor: pointer; line-height: 1.4; }
.mint-waiver-label input { margin-top: 2px; flex-shrink: 0; accent-color: var(--violet); }
.free-entry-box { border: 1px solid var(--rule-lit); background: var(--panel); padding: 14px; margin-top: 14px; }
.free-entry-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; }
.free-tag { font-family: Verdana, sans-serif; font-size: 10px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--mauve); border: 1px solid var(--mauve); padding: 2px 8px; }
.free-entry-desc { font-size: 12px; color: var(--dim); margin-bottom: 10px; }
/* Region-gate notice shown in place of the give-away entry copy (FAQ, mint, legal Terms). */
.geo-notice { color: var(--dim); font-size: 13px; font-style: italic; }
.free-entry-box.geo-notice { font-style: normal; }
.free-entry-box.geo-notice p { margin: 0; color: var(--dim); font-size: 13px; font-style: italic; }
/* .btn-free was a transparent mauve-outline variant; Hadrian wants ALL buttons as the dark slab, so it
   no longer overrides the slab look. Kept as a class so existing markup renders as a plain slab. */
.mint-terms { border: 1px solid var(--rule); background: var(--panel); padding: 14px; }
.mint-terms ul { list-style: none; }
.mint-terms li { color: var(--dim); padding-left: 16px; position: relative; margin-bottom: 8px; }
.mint-terms li::before { content: '\271D'; position: absolute; left: 0; color: var(--violet); }
.mint-terms b { color: var(--ink); }
.prov { margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--rule); }
.minted-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.minted-row a { display: inline-block; text-align: center; }
/* Blind-mint reveal + EOA-only notices on the mint page. */
.mint-sealed-note { font-size: 12px; color: var(--mauve); border-left: 2px solid var(--mauve); padding-left: 10px; margin: 12px 0; }
.mint-eoa-warn { font-size: 12px; color: var(--amber, #d9a441); border: 1px solid var(--amber, #d9a441); background: rgba(217, 164, 65, 0.08); padding: 8px 10px; margin: 10px 0; }
/* Sealed avatar (pre-reveal): the inline-SVG placeholder fills the tile like a real avatar. */
.goth-sealed { image-rendering: auto; }

/* ---- ACCOUNT ---- */
.coven-head { display: flex; justify-content: space-between; align-items: flex-end; flex-wrap: wrap; gap: 12px;
  border-bottom: 1px solid var(--rule); padding-bottom: 10px; margin-bottom: 14px; }
.coven-stats { color: var(--dim); }
.coven-stats b { color: var(--ink); }
/* Drip-win badge on the account page: a wallet that won a vault goth in the daily give-away. */
.drip-badge { display: inline-block; font-size: 12px; color: var(--mauve); border: 1px solid var(--mauve);
  padding: 4px 10px; margin: 4px 0 12px; letter-spacing: 0.3px; }
.connect-prompt { text-align: center; padding: 50px 20px; border: 1px solid var(--rule); background: var(--panel); }
/* connect-prompt gradient-text: see consolidated block above */
.connect-prompt .glyph { font-size: 40px; color: var(--violet); }

/* ---- modal + toast ---- */
.modal-overlay { position: fixed; inset: 0; background: rgba(8,5,16,0.72); display: flex; align-items: center; justify-content: center; z-index: 60; }
.modal { background: var(--panel); border: 1px solid var(--rule-lit); width: min(420px, 92vw); max-height: 86vh; overflow: auto; }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 9px 13px; background: var(--panel2); border-bottom: 1px solid var(--rule); color: var(--mauve); font-family: Georgia, serif; }
.modal-x { background: none; border: none; color: var(--dim); font-size: 17px; cursor: pointer; }
.modal-x:hover { color: var(--ink); }
.modal-x:focus-visible { outline: 2px solid var(--rule-hot); outline-offset: 2px; }
.modal-body { padding: 13px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; padding: 0 13px 13px; }
/* modal-actions gradient-text: see consolidated block above */
.wallet-panel .btn:active:not(:disabled), .price-actions .btn:active:not(:disabled),
.connect-prompt .btn:active:not(:disabled), .modal-actions .btn:active:not(:disabled),
.mintp .btn-block:active:not(:disabled), .btn-slab:active:not(:disabled), .btn:active:not(:disabled) { background: #080610; }
.wallet-panel .btn:active:not(:disabled)::after, .price-actions .btn:active:not(:disabled)::after,
.connect-prompt .btn:active:not(:disabled)::after, .modal-actions .btn:active:not(:disabled)::after,
.mintp .btn-block:active:not(:disabled)::after, .btn-slab:active:not(:disabled)::after, .btn:active:not(:disabled)::after {
  background-image: linear-gradient(100deg, #9c5aff, #e040f0, #ff9040, #e040f0, #9c5aff, #e040f0, #ff9040, #e040f0, #9c5aff); }
.field-label { display: block; color: var(--dim); font-size: 12px; margin-bottom: 5px; }
.field-hint { color: var(--dim); font-size: 11px; margin-top: 5px; }
/* DEX-style trading modal */
.trade-form { display: flex; flex-direction: column; gap: 12px; }
.trade-row { display: flex; justify-content: space-between; align-items: center; padding: 6px 0; }
.trade-row-label { color: var(--dim); font-size: 11px; }
.trade-row-value { color: var(--ink); font-size: 13px; text-align: right; }
.trade-row-value.gold { color: var(--gold); }
.trade-input-wrap { background: var(--bg); border: 1px solid var(--rule); padding: 10px 12px; }
.trade-input-wrap:focus-within { border-color: var(--rule-lit); }
.trade-input-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.trade-input-top .field-label { margin-bottom: 0; }
.trade-max { color: var(--violet); cursor: pointer; font-size: 11px; border: none; background: none; padding: 0; }
.trade-max:hover { color: var(--mauve); }
.trade-eth-input { width: 100%; background: none; border: none; color: var(--ink); font-size: 20px; font-family: Arial, Helvetica, sans-serif; font-weight: bold; outline: none; }
/* A5 contrast: --dim (#9386b4) alone clears 4.5:1 on --bg (5.7:1); the 0.5 opacity dropped it to ~2.3:1. */
.trade-eth-input::placeholder { color: var(--dim); opacity: 1; }
.trade-usd { color: var(--dim); font-size: 11px; margin-top: 4px; }
.trade-summary { border-top: 1px solid var(--rule); padding-top: 10px; }
.trade-warn { color: var(--gold); font-size: 11px; margin-top: 6px; }
.trade-err { color: #e05050; font-size: 11px; margin-top: 4px; }
.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--panel2);
  border: 1px solid var(--rule-lit); padding: 8px 15px; display: none; z-index: 80; font-size: 12px; }
.toast.show { display: block; }
.toast.ok { border-color: var(--violet); }
.toast.warn { border-color: #e0a030; }
.toast.err { border-color: var(--gold); }

/* ---- first-visit terms notice (our "at your own risk / I Agree" box) ----
   A small box that does NOT dim the page: the backdrop is transparent and lets clicks through
   (pointer-events: none), only the box itself is interactive. Choices are centred text links. */
.terms-gate { position: fixed; inset: 0; z-index: 500; pointer-events: none;
  display: flex; align-items: center; justify-content: center; padding: 16px; }
/* max-width leaves room for the wallet-panel pinned at the right edge (Opus review, 2026-08-16): centered
   at a plain 400px, this box's right edge could reach under the panel on a narrow-but-not-mobile viewport
   (.wallet-panel switches to a full-width inline bar below 480px, so only the ~480-700px range was ever at
   risk) - at z-index 500 against the panel's 41, it would silently swallow a click meant for the panel. */
.terms-box { pointer-events: auto; max-width: min(400px, calc(100vw - 220px)); width: 100%; background: var(--panel);
  border: 1px solid var(--rule-lit); box-shadow: 0 6px 30px rgba(0, 0, 0, 0.5); padding: 18px 20px; }
/* same pixel-block font + size as the nav links (Hadrian 2026-08-15) - text-rendering hints match too,
   for the same reason: Press Start 2P blurs badly at small sizes without them. */
.terms-title { font-family: "Press Start 2P", monospace; font-size: 16px; color: var(--mauve);
  text-align: center; margin-bottom: 10px; -webkit-font-smoothing: antialiased; text-rendering: optimizeSpeed; }
.terms-body p { margin-bottom: 9px; font-size: 12px; }
.terms-fine { font-size: 11px; color: var(--dim); }
.terms-link { text-decoration: underline; }
.terms-note { color: var(--gold); font-size: 11px; margin: 2px 0 8px; display: none; }
.terms-note.show { display: block; }
.terms-actions { margin-top: 12px; text-align: center; }
/* each choice is a plain text LINK on its OWN line, centred - not a button */
.terms-choice { display: block; width: 100%; text-align: center; color: var(--link);
  font-weight: bold; cursor: pointer; padding: 3px 0; }
/* A1: the accept/decline choices are real <button>s now (keyboard-focusable actions, not navigation).
   Reset the native button chrome so they keep the plain centred-text-link look above. */
button.terms-choice { background: none; border: none; font: inherit; font-weight: bold; }
button.terms-choice:hover { text-decoration: underline; color: var(--link-hot); }
button.terms-choice:focus-visible { outline: 2px solid var(--rule-hot); outline-offset: 2px; }

/* ---- responsive ---- */
@media (max-width: 920px) {
  .front-lead, .front-tables, .mint-cols, .topsales-cols, .owners-records { grid-template-columns: 1fr; }
  .ledger-grid { grid-template-columns: repeat(3, 1fr); }
  .block-grid { grid-template-columns: repeat(4, 1fr); }
  .soul-hero-inner { flex-direction: column; height: auto; padding: 18px 16px; }
  .soul-card.attrs, .soul-right { width: 100%; height: auto; }
  .soul-stage { width: 100%; max-width: 432px; height: auto; aspect-ratio: 1 / 1; margin-inline: auto; }
  .soul-base { width: 100% !important; height: auto !important; }
  /* the fixed 4-column attribute grid has no room for a 144px avatar once each column drops below
     ~156px - a bug found in review (not visible on desktop, where 4 columns is what was asked for). */
  .attr-card-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .attr-card-grid { grid-template-columns: 1fr; justify-items: center; }
  .attr-card-grid > * { width: 100%; max-width: 320px; }
  .block-grid { grid-template-columns: repeat(auto-fill, minmax(122px, 1fr)); justify-content: center; }
  .race-cells { justify-content: center; }
  .dense-grid { justify-content: center; }
  .sg-grid { justify-content: center; }
}
@media (max-width: 640px) {
  .front-topsales .reg-table, .soul-below .reg-table { display: block; overflow-x: auto; }
}


/* Press Start 2P is drawn on an 8px pixel grid: shrunk down to 9-10px like before, the browser has to
   anti-alias sub-pixel detail on every glyph, which is what read as "blurry / squished" (Hadrian). Sized
   back up to values legible at that grid (nav 16px, headings 24/18/13, all >= the font's native unit) and
   text-rendering hints turned off so glyph edges land on whole device pixels instead of being smoothed. */
.register-nav { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.nav-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; }
.nlink, .nsep {
  font-family: "Press Start 2P", monospace; font-size: 10px; letter-spacing: 0;
  font-weight: normal; -webkit-font-smoothing: none;
  text-rendering: optimizeSpeed;
}
h1, h2, h3 {
  font-family: "Press Start 2P", monospace; letter-spacing: 0;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeSpeed;
}
h1 { font-size: 24px; line-height: 1.5; }
h2 { font-size: 16px; line-height: 1.5; }
h3 { font-size: 16px; line-height: 1.5; font-weight: normal; }
/* the big detail-view hero name stays serif: the ocean-hero title is a deliberate exception to the pixel headings
   (Fable review flagged it was going pixel by accident). Legal pages already stay serif via .legal-h* specificity. */
.soul-title h1 { font-family: "Press Start 2P", monospace; font-size: 18px; line-height: 1.3; letter-spacing: 0.02em; }

/* ---- color guide (gradient text describing avatar background meanings) ---- */
.front-colorguide { margin: 14px 0 0; font-size: 14px; line-height: 1.7; color: var(--ink); }
.front-colorguide p { margin: 2px 0; }
.color-grad { font-family: "Press Start 2P", monospace; font-size: 10px; font-weight: bold;
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text; padding: 2px 5px; border: 2px solid; border-image-slice: 1;
  -webkit-font-smoothing: none; text-rendering: optimizeSpeed; text-decoration: none;
  display: inline-block; min-width: 100px; text-align: center; box-sizing: border-box; }
.cg-default { background-image: linear-gradient(135deg, var(--swatch-a), var(--swatch-b));
  border-image: linear-gradient(135deg, var(--swatch-a), var(--swatch-b)) 1; }
.cg-sale { background-image: linear-gradient(135deg, var(--swatch-sale-a), var(--swatch-sale-b));
  border-image: linear-gradient(135deg, var(--swatch-sale-a), var(--swatch-sale-b)) 1; }
.cg-bid { background-image: linear-gradient(135deg, var(--swatch-bid-a), var(--swatch-bid-b));
  border-image: linear-gradient(135deg, var(--swatch-bid-a), var(--swatch-bid-b)) 1; }

/* ---- overall stats grid ---- */
.front-overall { max-width: 720px; margin: 28px auto 0; }
.front-overall h3 { font-family: Georgia, serif; font-size: 18px; color: var(--mauve); margin-bottom: 10px; }
.os-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 24px; border-top: 1px solid var(--rule); }
.os-label { padding: 8px 0; font-size: 13px; color: var(--dim); border-bottom: 1px solid var(--rule); }
.os-value { padding: 8px 0; font-size: 14px; color: var(--ink); font-weight: bold; text-align: right; border-bottom: 1px solid var(--rule); }

/* ---- FAQ page ---- */
.faq-page { max-width: 720px; margin: 0 auto; padding: 8px 16px 48px; }
.faq-page h1 { font-family: Georgia, serif; font-size: 28px; color: var(--mauve); margin: 18px 0 14px; }
.faq-list { display: flex; flex-direction: column; gap: 2px; }
.faq-item { border: 1px solid var(--rule); padding: 0; }
.faq-q { padding: 12px 16px; font-size: 14px; font-weight: bold; color: var(--ink); cursor: pointer;
  list-style: none; }
.faq-q::-webkit-details-marker { display: none; }
.faq-q::before { content: '+ '; color: var(--mauve); font-family: monospace; }
.faq-item[open] .faq-q::before { content: '- '; }
.faq-a { padding: 0 16px 14px; font-size: 13px; color: var(--dim); line-height: 1.65; margin: 0; }

/* ---- nav search dropdown ---- */
.nav-search-wrap { position: relative; display: inline-block; }
.nav-search-btn { cursor: pointer; }
.nav-search-drop { display: none; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 6px; z-index: 100; background: var(--bg, #1a1a2e); border: 1px solid var(--rule);
  padding: 8px; min-width: 180px; }
.nav-search-drop.open { display: block; }
.nav-search-input { width: 100%; box-sizing: border-box; background: rgba(255,255,255,0.08); border: 1px solid var(--rule);
  color: var(--ink); padding: 6px 8px; font-family: "Press Start 2P", monospace; font-size: 9px; }
/* A5 contrast: --dim (#9386b4) clears 4.5:1 on --bg (5.7:1); the 0.6 opacity dropped it to ~2.5:1. */
.nav-search-input::placeholder { color: var(--dim); opacity: 1; }

/* ---- Forum ("The Crypt") ---- */
.forum-crumb { margin-bottom: 12px; }
.forum-crumb a { color: var(--link); }

/* Columnar listings, phpBB-style: shared header row + grid rows with matching templates. */
.forum-col-header { display: grid; align-items: center; gap: 10px; padding: 5px 8px;
  border: 1px solid var(--rule); background: var(--bg); font-size: 11px;
  text-transform: uppercase; letter-spacing: 0.04em; }
.forum-section-header { grid-template-columns: 1fr 80px 220px; padding: 5px 14px; }
.forum-thread-header { grid-template-columns: 52px 1fr 70px 70px 180px; }
.fcol-center { text-align: center; }

.forum-notice { margin-top: 10px; font-style: italic; }
.forum-sections { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.forum-section-card { display: grid; grid-template-columns: 1fr 80px 220px; align-items: center; gap: 10px;
  padding: 12px 14px; border: 1px solid var(--rule); background: var(--panel); color: var(--ink); }
.forum-section-card:hover { border-color: var(--rule-lit); text-decoration: none; }
.fsc-main { min-width: 0; }
.fsc-title { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; flex-wrap: wrap; }
.fsc-topics { text-align: center; }
.fsc-lastpost-col { min-width: 0; }
.forum-badge { border: 1px solid var(--rule); padding: 1px 7px; font-size: 10px; color: var(--dim); }
.forum-badge-lock { color: var(--gold); border-color: var(--gold); }

.forum-new-wrap { margin: 12px 0; }
.forum-thread-list { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; }
.forum-thread-row { display: grid; grid-template-columns: 52px 1fr 70px 70px 180px; align-items: center; gap: 10px;
  padding: 6px 8px; border: 1px solid var(--rule); background: var(--panel); color: var(--ink); }
.forum-thread-row:hover { border-color: var(--rule-lit); text-decoration: none; }
.ftr-avatar { display: flex; justify-content: center; }
.ftr-main { min-width: 0; }
.ftr-title { color: var(--ink); }
.ftr-icon { font-size: 0.85em; }
.ftr-replies, .ftr-views { text-align: center; }

.forum-posts { display: flex; flex-direction: column; gap: 14px; margin: 14px 0; }
.forum-post { display: flex; gap: 12px; padding: 10px 12px; border: 1px solid var(--rule); background: var(--panel); }
.forum-post-avatar { flex: 0 0 90px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.forum-post-gid { color: var(--link); font-size: 12px; font-weight: bold; }
.forum-post-wallet { color: var(--dim); font-size: 10px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 90px; text-align: center; }
.forum-post-wallet:hover { color: var(--link-hot); }
.forum-post-main { flex: 1; min-width: 0; position: relative;
  border-left: 1px solid var(--rule); padding-left: 12px; }
.forum-post-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.forum-post-num { color: var(--link); font-size: 11px; }
.forum-post-num:hover { color: var(--link-hot); }
.forum-post-body { color: var(--ink); overflow-wrap: break-word; word-break: break-word; }
.bb-quote .bb-quote { padding-left: 8px; margin: 6px 0; }
.bb-quote .bb-quote .bb-quote { padding-left: 4px; }
.forum-edit-link { color: var(--link); cursor: pointer; }
.forum-edit-actions { display: flex; gap: 8px; margin-top: 6px; }

.forum-reply-wrap { margin: 16px 0; }
.forum-reply-box, .forum-new-form { display: flex; flex-direction: column; gap: 8px; max-width: 560px; }
.forum-reply-textarea, .forum-title-input { width: 100%; box-sizing: border-box; background: var(--bg);
  border: 1px solid var(--rule); color: var(--ink); padding: 6px 8px; font-family: inherit; }
.forum-reply-textarea { min-height: 90px; resize: vertical; }
.forum-reply-avatar select, .forum-new-form select { align-self: flex-start; }
.forum-status { color: var(--gold); font-size: 0.85em; min-height: 0; }
.forum-status:empty { display: none; }
.btn-link { background: none; border: none; color: var(--link); cursor: pointer; padding: 0; font: inherit; }
.btn-link:hover { color: var(--link-hot); }

/* ---- Forum: last-post columns, unread, sort/mark-read, online panel, subscribe, report ---- */
.forum-past-owner { font-style: italic; color: var(--dim); font-size: 0.85em; margin-left: 6px; }
.forum-signature { border-top: 1px solid var(--rule); margin-top: 8px; padding-top: 4px; }
.forum-also-owner { color: var(--dim); font-size: 0.85em; display: flex; align-items: center; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.forum-also-owner a { display: flex; align-items: center; gap: 4px; color: var(--link); }
.forum-sort { margin-bottom: 8px; }
.forum-online-panel { border-top: 1px solid var(--rule); margin-top: 16px; padding-top: 8px; }
.forum-subscribe-btn { margin-left: auto; }
.pager { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin: 12px 0; }
.pager .btn { min-width: 34px; padding: 6px 10px; }
/* pagerPair's Prev/Next/Jump controls wear .btn-slab (the Connect Wallet action-button style); let the
   slab's own padding stand instead of the compact numbered-pager padding above. */
.pager .btn-slab { padding: 10px 16px; }
.pager-ellipsis { padding: 0 4px; user-select: none; }
.forum-view-count { color: var(--dim); font-size: 0.85em; }
.forum-post-counts { color: var(--dim); font-size: 0.85em; line-height: 1.4; }
.forum-thread-row.unread .ftr-title { font-weight: bold; }

.forum-thread-controls { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0; }
.forum-post-actions { display: flex; gap: 8px; margin-top: 6px; }
.fsc-lastpost { display: flex; align-items: center; gap: 6px; min-width: 0; }
.fsc-lastpost .swatch { flex: 0 0 auto; }
.fsc-lastpost-text { display: flex; flex-direction: column; min-width: 0; }
.fsc-lastpost-title { color: var(--link); cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fsc-lastpost-title:hover { color: var(--link-hot); }
.ftr-lastpost { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ftr-lastpost .swatch { flex: 0 0 auto; }

.forum-poll { background: var(--panel); border: 1px solid var(--rule); border-radius: 6px; padding: 16px; margin: 16px 0; }
.forum-poll-question { font-weight: bold; margin-bottom: 10px; }
.forum-poll-bar { position: relative; background: var(--bg); border: 1px solid var(--rule); border-radius: 4px; height: 32px; margin-bottom: 6px; overflow: hidden; display: flex; align-items: center; }
.forum-poll-bar-fill { position: absolute; inset: 0; width: var(--pct, 0%); background: color-mix(in srgb, var(--gold) 25%, transparent); transition: width 0.3s; }
.forum-poll-bar-label { position: relative; padding-left: 8px; flex: 1; }
.forum-poll-bar-pct { position: relative; padding-right: 8px; font-size: 0.85em; color: var(--dim); }
.forum-poll-voted { font-weight: bold; }
.forum-poll-option { display: block; margin-bottom: 6px; cursor: pointer; }
.forum-poll-option input { margin-right: 6px; }

/* ---- Forum: search ---- */
.forum-search-input { background: var(--bg); border: 1px solid var(--rule); color: var(--ink);
  padding: 6px 8px; font-family: inherit; min-width: 160px; }
.forum-search-snippet { font-style: italic; }

/* ---- Forum: admin panel ---- */
.forum-admin-tabs { display: flex; gap: 4px; margin: 12px 0; }
.forum-admin-tab { padding: 6px 14px; border: 1px solid var(--rule); background: var(--bg); color: var(--dim); cursor: pointer; }
.forum-admin-tab.active { background: var(--panel); color: var(--ink); border-bottom-color: var(--panel); }
.forum-report-card { border: 1px solid var(--rule); background: var(--panel); padding: 12px; margin-bottom: 8px; }
.forum-report-meta { color: var(--dim); font-size: 0.85em; margin-bottom: 6px; }
.forum-report-reason { margin-bottom: 8px; font-style: italic; }
.forum-report-actions { display: flex; gap: 8px; }
.forum-mod-log-table { width: 100%; border-collapse: collapse; font-size: 0.85em; }
.forum-mod-log-table th, .forum-mod-log-table td { padding: 6px 8px; border-bottom: 1px solid var(--rule); text-align: left; }
.forum-mod-log-table th { color: var(--dim); text-transform: uppercase; font-size: 0.75em; letter-spacing: 0.04em; }
.forum-admin-action { display: inline-flex; align-items: center; gap: 4px; }
.forum-stats { margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--rule); }
.forum-stats-label { font-size: 0.8em; margin-bottom: 2px; }
.forum-stats-value { font-size: 0.85em; }

/* ---- Forum: responsive columns ---- */
@media (max-width: 768px) {
  /* Drop the Views column. */
  .forum-thread-row, .forum-thread-header { grid-template-columns: 52px 1fr 70px 150px; }
  .ftr-views, .fcol-views { display: none; }
  .forum-section-card, .forum-section-header { grid-template-columns: 1fr 60px 170px; }
}
@media (max-width: 600px) {
  /* Drop Replies too and stack: avatar | main, with last-post tucked under the title block. */
  .forum-thread-header, .forum-section-header { display: none; }
  .ftr-replies, .fcol-replies { display: none; }
  .forum-thread-row { grid-template-columns: 52px 1fr; }
  .ftr-lastpost { grid-column: 2; }
  .forum-section-card { grid-template-columns: 1fr; }
  .fsc-topics { display: none; } /* a bare number with no column label is noise when stacked */
  .forum-post-avatar { flex-basis: 80px; }
}

/* ============ MOBILE ============ */

.mobile-menu-btn { display: none; }

@media (max-width: 768px) {
  .mobile-menu-btn { display: flex; align-items: center; justify-content: center;
    width: 44px; height: 44px; background: none; border: 1px solid var(--rule);
    color: var(--fg); font-size: 22px; cursor: pointer; border-radius: 4px;
    -webkit-tap-highlight-color: transparent; }
  .register-nav { display: none; flex-direction: column; position: fixed;
    top: var(--tb-h); left: 0; right: 0; bottom: 0; z-index: 40;
    background: var(--bg); overflow-y: auto; padding: 16px; gap: 6px;
    border-top: 1px solid var(--rule); }
  .register-nav.mobile-open { display: flex; }
  .register-nav .nav-row { flex-direction: column; gap: 4px; }
  .register-nav .nlink { padding: 12px 8px; font-size: 14px; }
  .register-nav .nsep { display: none; }
  .register-nav .nav-search-wrap { width: 100%; }
  .register-nav .nav-search-btn { width: 100%; text-align: left; }
  .register-nav .nav-search-drop { position: static; width: 100%; }
  .register-nav .nav-search-drop.open { display: block; }
  .register-nav .nav-search-input { width: 100%; font-size: 16px; }
  body.mobile-nav-open { overflow: hidden; }
  .terms-box { max-width: min(400px, calc(100vw - 32px)); }
  .forum-admin-tabs { flex-wrap: wrap; }
}

@media (max-width: 640px) {
  .reg-table { display: block; overflow-x: auto; }
  .soul-card.attrs .reg-table { display: table; overflow-x: visible; }
  .forum-mod-log-table { display: block; overflow-x: auto; }
  .grid-wrap { grid-template-columns: 0 1fr 0; }
  .page-arrow { display: none; }
  .toast { max-width: calc(100vw - 24px); }
}

@media (max-width: 480px) {
  :root { --tb-h: 60px; }
  .content { padding: 14px 12px 56px; }
  .soul-hero-inner { padding: 14px 12px; }

  input, select, textarea { font-size: 16px; }
  .forum-reply-textarea, .forum-title-input, .forum-search-input { font-size: 16px; }
  .nav-search-input { font-size: 16px; }

  .btn, .btn-lg, .btn-slab, .pager .btn, .cur-btn,
  .forum-admin-tab, .saveas-item, .modal-x { min-height: 44px; }
  .btn-sm { min-height: 36px; padding: 6px 10px; }
  .modal-x { min-width: 44px; }
  .seg button { padding: 10px 12px; }
  .nlink, button.nlink { padding-top: 8px; padding-bottom: 8px; }
  .terms-choice { padding: 10px 0; }
  .tg-opt { padding: 6px 0; }
  .trade-max { padding: 8px 10px; }
  .acd-cell { padding: 8px 13px; }
  .btn, .btn-sm, .btn-lg, .btn-slab, .seg button, .terms-choice, .modal-x,
  .page-arrow, .forum-admin-tab { -webkit-tap-highlight-color: transparent; }

  .ledger-grid { grid-template-columns: repeat(2, 1fr); }
  .os-grid { grid-template-columns: 1fr; }
  .crypt-bar select, .crypt-bar input, .attr-sort { flex: 1 1 140px; min-width: 0; }
  .sw-edit { flex-wrap: wrap; justify-content: center; }
  .sw-input { width: min(250px, 100%); }
  .mint-waiver-label { font-size: 12px; }
  .mint-waiver-label input { min-width: 18px; min-height: 18px; }

  .modal-overlay { padding: 0; align-items: flex-end; }
  .modal { width: 100vw; max-height: 100dvh; border-left: 0; border-right: 0; border-radius: 8px 8px 0 0; }
  .modal-actions { flex-wrap: wrap; }
  .modal-actions .btn { flex: 1 1 auto; }

  .forum-post { flex-direction: column; gap: 8px; }
  .forum-post-avatar { flex: 0 0 auto; flex-direction: row; align-items: center; }
  .forum-post-wallet { max-width: none; }
  .forum-post-main { border-left: 0; padding-left: 0; }

  h1 { font-size: 16px; }
  .soul-bignum { font-size: 16px; }
  .soul-nav-arrow { width: 28px; height: 28px; font-size: 17px; }
  .soul-title h1 { font-size: 16px; }
  .legal-h1 { font-size: 24px; }
  .faq-page h1 { font-size: 22px; }
}

body.modal-open { position: fixed; left: 0; right: 0; overflow: hidden; touch-action: none; }

.mobile-wallet-links { display: flex; flex-direction: column; gap: 10px; align-items: center; width: 100%; }
.mobile-wallet-btn { display: block; width: 100%; text-align: center; }

.toast { bottom: max(18px, calc(env(safe-area-inset-bottom) + 12px)); }

@media (max-width: 320px) {
  .tb-logo { max-width: 180px; }
  .home-motto { font-size: 14px; }
}

@media (hover: none) and (pointer: coarse) {
  .sg-tile:not(.proc-tile) .sg-hover { opacity: 0.55; }
  .sg-tile:not(.proc-tile) .sg-hover-text { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}