/* ============================================================================
   styles.css — Full responsive rewrite
   Mobile-first. Shop window stays intact at every viewport size.
   Safe-area insets for notched phones (iPhone X+).
   ============================================================================ */

:root {
  --bg:          #000000;
  --text:        #f7f7f7;
  --cyan:        #000000;
  --brand-red:   #d2342b;   /* logo red — the single brand accent */
  --item-height: 40px;
  --header-h:    0px;     /* header removed (spatial-reduction) */
  --menu-h:      120px;
  --edge:        24px;   /* shared breathing room for the corner furniture (header, corner-nav, links) */
  --content-max: 700px;  /* shared content width — tight, with generous gaps on all sides */
  --content-top: 84px;   /* symmetric with --content-bottom so centered content lands on the bg logo */
  --content-bottom: 84px;/* clears the nav dock; symmetric for true vertical centering */
  /* safe area fallback for notched phones */
  --safe-bottom:    env(safe-area-inset-bottom, 0px);
  --safe-top:       env(safe-area-inset-top,    0px);
  --transition-time: 0.8s;
  --page-glide:   420ms;   /* incoming/outgoing pane glide */
}

/* ── RESET / BASE ──────────────────────────────────────────────────────────── */
html {  
  height: 100%;
  background-color: var(--bg);

}

/* INJECTED FALLBACK LAYER: Keeps your background color safely behind the video */
html::before {
  content: "";
  position: fixed;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  background: var(--bg);
  z-index: 1;
  pointer-events: none;
  opacity: .4;
}

body {
height: 100%; 
  margin: 0;
  color: var(--text);
  font-family: system-ui, sans-serif;
  overflow: hidden;
  background: transparent;
}

body.dark-mode { --bg: #000; --text: #fff; }

/* ── AUTO DAY / NIGHT (theme.js toggles html.day-mode by local time) ─────────
   The site is dark-first. For daytime we flip the whole thing to light with a
   hue-preserving inversion, then counter-invert real media so photos / video /
   3D / camera render true-colour. The logo line-art is intentionally left to
   invert (white → black) so it reads on the white background.
   06:00–19:30 = day (light) · 19:31–05:59 = night (original dark). */
html.day-mode { filter: invert(1) hue-rotate(180deg); }
html.day-mode img,
html.day-mode video,
html.day-mode model-viewer,
html.day-mode canvas,
html.day-mode #twitch-background iframe,
html.day-mode #global-site-video-mask,
html.day-mode #camera-stream {
  filter: invert(1) hue-rotate(180deg);
}
/* Keep the LOGO identical in day mode: the line-art is brightness(0) invert(100%)
   (white); pre-invert it to black here so the page-flip turns it back to white —
   same look as night, just over the white background. */
html.day-mode #global-site-logo-overlay { filter: brightness(0) invert(0); }
/* cross-fade between modes — armed after first paint so there's no load flash */
html.theme-anim,
html.theme-anim img,
html.theme-anim video,
html.theme-anim model-viewer,
html.theme-anim canvas,
html.theme-anim #twitch-background iframe,
html.theme-anim #global-site-video-mask,
html.theme-anim #camera-stream,
html.theme-anim #global-site-logo-overlay { transition: filter .9s ease; }

/* ── HEADER ────────────────────────────────────────────────────────────────── */
/* Header removed (spatial-reduction) — --header-h is 0 so content reclaims the
   top. The small red Home-button logo (#home-logo) sits top-left instead. */
#home-logo {
  position: fixed;
  top: 120px; left: 50%;            /* JS (positionHomeLogo) parks it just above the centered content */
  z-index: 1011;
  background: none; border: none; padding: 0; cursor: pointer;
  transform: translateX(-50%);
  display: none;                        /* hidden on HOME (big logo is the identity) */
  -webkit-tap-highlight-color: transparent;
}
#home-logo img { height: 34px; width: auto; display: block; }
#home-logo:hover { filter: brightness(1.12); }
/* Off HOME, the small logo just appears (no fade/scale) as the Home button */
body:not([data-page="HOME"]) #home-logo { display: block; }
@media (max-width: 768px) { #home-logo img { height: 30px; } }

/* ── CONTEXTUAL FLOATING CART SUMMARY ─────────────────────────────────────────
   Hidden until the cart has items (body.has-cart); then a small summary panel
   floats top-right on every page: count, subtotal, view/edit cart, checkout.
   Sits in the right margin gap so it clears the centered content. */
#floating-cart {
  position: fixed; right: var(--edge); top: 50%; transform: translateY(-50%);
  z-index: 1011;
  display: none; flex-direction: column; align-items: flex-end; gap: 2px;
  font-family: 'VT323', monospace; color: var(--text);
  text-align: right; line-height: 1.25;
}
body.has-cart #floating-cart { display: flex; }
#floating-cart .fc-count { font-size: .9rem; letter-spacing: 1px; opacity: .8; }
#floating-cart .fc-sub { font-size: .9rem; letter-spacing: 1px; opacity: .5; margin-bottom: 2px; }
#floating-cart .fc-sub b { opacity: 1; font-weight: 400; }
#floating-cart button {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: 'VT323', monospace; font-size: .92rem; letter-spacing: 1px;
  color: var(--text); opacity: .7; text-transform: lowercase;
  transition: opacity .15s, color .15s; -webkit-tap-highlight-color: transparent;
}
#floating-cart .fc-view:hover { opacity: 1; }
#floating-cart .fc-checkout { color: var(--brand-red); opacity: 1; }
#floating-cart .fc-checkout:hover { filter: brightness(1.12); }

/* ── CONTENT DISPLAY (main stage) ─────────────────────────────────────────── */
/* One shared canvas for every section. On HOME it fills the viewport (the pane
   is empty — the big background logo shows). On section pages it insets from the
   top (clears the #home-logo) and the bottom (clears the relocated nav dock), so
   every section occupies the identical frame. */
#content-display {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: calc(100vh - var(--safe-bottom));
  height: calc(100dvh - var(--safe-bottom));
  overflow: hidden;
  z-index: 1009;
}
body:not([data-page="HOME"]) #content-display {
  top: var(--content-top, 64px);
  height: calc(100vh - var(--content-top, 64px) - var(--content-bottom, 64px) - var(--safe-bottom));
  height: calc(100dvh - var(--content-top, 64px) - var(--content-bottom, 64px) - var(--safe-bottom));
}

/* ── UNIFORM CONTENT FRAME ────────────────────────────────────────────────────
   Every page's root content occupies the identical box: the same max-width,
   centered in the pane, with the same top/bottom (the content-display insets).
   Only what's inside changes — so the site feels like one continuous room. */
#content-display .page-pane > * {
  width: 100%;
  max-width: var(--content-max);
  max-height: 100%;                 /* tall pages clamp + scroll internally; short pages center */
  box-sizing: border-box;
}
/* Every page's content fills the same condensed frame, so the content box is
   identical across pages (contact, tokenomics, shop, sections). */
.token-window > :not(.lq-sheen) { width: 100%; align-self: stretch; }
/* The cart is a tidier, narrower centered column within the frame. */
.cart-window > * { width: 100%; max-width: 460px; align-self: center; }

#content-display::-webkit-scrollbar { display: none; }

/* ── PAGE PANES (crossfade stage) ──────────────────────────────────────────── */
.page-pane {
  position: absolute;
  inset: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;          /* content centered on the bg logo (symmetric insets) */
  padding: 12px;
  box-sizing: border-box;
  opacity: 1;
  transition: opacity var(--page-glide) ease;
  will-change: opacity;
}
.page-pane::-webkit-scrollbar { display: none; }

/* incoming pane starts transparent, then fades in */
.page-pane.is-entering {
  opacity: 0;
}

/* outgoing pane fades out */
.page-pane.is-leaving {
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .page-pane,
  .page-pane.is-entering,
  .page-pane.is-leaving {
    transition: none;
    opacity: 1;
  }
}

/* SHOP is a fixed-height viewer — lock its pane so a stray vertical swipe can't
   drag/rubber-band it (the model-viewer's touch-action:pan-y would otherwise
   scroll the pane's ~24px of padding slack). The fade still runs; we only kill
   the scroll slack. */
body[data-page="SHOP"] #content-display .page-pane,
body[data-page="STORE"] #content-display .page-pane {
  overflow: hidden;
  padding: 0;
}

/* VIEW STORE → swaps the grid in place. A slide would interrupt the flow, so the
   store view just fades in (the .store-mode element mounts fresh each time). */
@keyframes shopStoreFade { from { opacity: 0; } to { opacity: 1; } }
.shop-viewer-window.store-mode,
.shop-viewer-window.shop-fade-in { animation: shopStoreFade 300ms ease both; }
@media (prefers-reduced-motion: reduce) {
  .shop-viewer-window.store-mode,
  .shop-viewer-window.shop-fade-in { animation: none; }
}

/* ── STORE GRID PAGE (Supreme-style feng shui) ───────────────────────────────
   Tiny right-aligned category nav on the left + an airy, flat product grid that
   floats on the page — no card chrome, products breathe. Mono type, dark theme
   (matches the site's --text). Renders in the content area; header/footer stay
   visible. */
.store-page {
  width: 100%; max-width: var(--content-max);
  display: flex; gap: 34px;
  box-sizing: border-box; padding: 2px 6px;
  color: var(--text, #f7f7f7);
  font-family: 'VT323', monospace;
}
.store-cats {
  flex: 0 0 auto; width: 104px; text-align: right;
  display: flex; flex-direction: column; gap: 2px;
  padding-top: 2px;
}
.store-cat {
  font-family: 'VT323', monospace; font-size: 1rem; line-height: 1.3;
  letter-spacing: 0.5px; color: var(--text, #f7f7f7);
  opacity: 0.55; cursor: pointer; text-decoration: none;
  transition: opacity 0.15s;
}
.store-cat:hover { opacity: 0.85; }
.store-cat.is-active { opacity: 1; font-weight: 700; }
.store-col { flex: 1; min-width: 0; display: flex; flex-direction: column; position: relative; }
.store-topbar {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px;
}
.store-eyebrow {
  font-family: 'VT323', monospace; letter-spacing: 2px;
  font-size: 0.95rem; opacity: 0.6;
}
.store-page-back {
  background: none; border: none; color: var(--text, #f7f7f7);
  font-family: 'VT323', monospace; font-size: 1rem; letter-spacing: 0.5px;
  cursor: pointer; opacity: 0.6; padding: 0; transition: opacity 0.15s;
}
.store-page-back:hover { opacity: 1; }
.sg-grid {
  /* overflow-x pinned: a container with overflow-y:auto + default overflow-x:visible
     makes the browser compute overflow-x to `auto`, which lets the grid pan
     left/right under a finger during vertical scroll. Explicit hidden stops it. */
  flex: 0 0 auto; height: 440px; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch;
  display: grid; grid-template-columns: repeat(4, 1fr);   /* always 4-across on desktop */
  gap: 22px 16px; padding-bottom: 16px; align-content: start;
}
.sg-grid::-webkit-scrollbar { width: 6px; }
.sg-grid::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 3px; }
.sg-card {
  background: none; border: none; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; gap: 6px; text-align: center;
  color: inherit; font-family: 'VT323', monospace;
}
.sg-card-img {
  position: relative; aspect-ratio: 1 / 1; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  background: transparent;                 /* product sits on the page (transparent) */
  transition: transform 180ms ease, opacity 180ms ease;
}
.sg-card:hover .sg-card-img { transform: scale(1.03); }
.sg-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; display: block; }
.sg-card-ph {
  font-family: 'Anton', sans-serif; letter-spacing: 2px;
  font-size: 1.4rem; color: rgba(0, 0, 0, 0.55);
}
.sg-card-name { font-size: 0.95rem; line-height: 1.15; opacity: 0.85; }
.sg-card-price { font-size: 0.9rem; opacity: 0.55; }
/* Overlaid (absolute) so an empty category never changes the layout height —
   keeps the centered shop from jumping when you filter. */
.store-empty {
  position: absolute; left: 0; right: 0; top: 58%; transform: translateY(-50%);
  font-family: 'VT323', monospace; opacity: 0.5; text-align: center;
}
@media (max-width: 768px) {
  .store-page { flex-direction: column; gap: 12px; padding: 30px 2px 2px; }
  .store-cats {
    width: 100%; text-align: left;
    flex-direction: row; flex-wrap: wrap; gap: 4px 14px;
    padding-top: 0;
  }
  .sg-grid { grid-template-columns: repeat(3, 1fr); gap: 18px 12px; }
  .sg-card-name { font-size: 0.85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .sg-card-img, .sg-card:hover .sg-card-img { transition: none; transform: none; }
}

#content-display h1 {
  margin: 12px 0 0;
  text-transform: uppercase;
  text-align: center;
}

/* ── BOTTOM MENU WRAP ──────────────────────────────────────────────────────── */
.wrap {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: var(--menu-h);
  padding-bottom: var(--safe-bottom);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1009;
  pointer-events: none;
  background: transparent;
  box-sizing: border-box;
}

.menu {
  height: calc(var(--item-height) * 3);
  width: 100%;
  max-width: 100vw;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  scrollbar-width: none;
  outline: none;
  background: transparent;
}

.menu::-webkit-scrollbar { display: none; }

.menu-item {
  flex-shrink: 0;
  height: var(--item-height);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'VT323', monospace;
  font-size: 1.6rem;
  font-weight: 400;
  letter-spacing: 3px;
  text-transform: lowercase;
  color: var(--text);
  pointer-events: auto;
  cursor: pointer;
  will-change: transform, opacity;
  backface-visibility: hidden;
  transform: translateZ(0);
  user-select: none;
  transition: transform 0.2s ease;
}

.menu-item.active { transform: scale(1.12); font-weight: 700; }

/* ── PIXEL WINDOW (flattened — feng-shui) ──────────────────────────────────────
   No box/border/scrim: content floats over the page's frosted scrim, mono and
   airy. The dark page-frost behind content keeps white text legible. */
.pixel-window {
  background: transparent;
  border: none;
  box-shadow: none;
  width: 92%;
  max-width: 460px;
  font-family: 'VT323', monospace;
  margin: 0;
  position: relative;
  flex-shrink: 0;
  /* fill available height in content-display */
  max-height: 100%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}

/* ── PIXEL HEADER / CONTENT ────────────────────────────────────────────────── */
.pixel-header {
  background: transparent;
  color: var(--text);
  padding: 2px 2px 10px;
  margin-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'VT323', monospace;
  font-size: 1rem;
  letter-spacing: 2px;
  flex-shrink: 0;
}

.pixel-content {
  padding: 8px 2px;
  color: var(--text);
  background: transparent;
  display: flex;
  flex-direction: column;
  gap: 6px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  flex: 1;
}

/* ── SHOP / 3-D VIEWER ─────────────────────────────────────────────────────── */

/* Shop window fills the shared content pane and acts as a flex column */
.shop-viewer-window {
  display: flex !important;
  flex-direction: column !important;
  height: 100%;
  max-height: 100%;
  overflow: hidden !important;
}

/* pixel-content inside the shop window stretches to fill remaining height */
.shop-viewer-window .pixel-content {
  flex: 1 !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

.viewer-3D-container {
  background: transparent;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  /* grow to fill all space not taken by meta row + buttons */
  flex: 1 !important;
  height: auto !important;
  min-height: 200px;
  overscroll-behavior-y: contain;
}
/* Photo products (no 3D model) — fill the viewer area, fully visible. */
#showcase-media { display: flex; align-items: center; justify-content: center; }
.product-photo { width: 100%; height: 100%; object-fit: contain; display: block; }

model-viewer {
  width: 100%;
  height: 100%;
  background-color: transparent;
  outline: none !important;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}

model-viewer#shirt-3d {
  width: 100%;
  height: 100%;
  outline: none;
  display: block;
  touch-action: pan-y !important;
}

model-viewer#shirt-3d:active { cursor: grabbing; }

model-viewer#shirt-3d.switching {
  opacity: 0.3;
  filter: blur(5px) brightness(1.5) contrast(1.2);
}

/* product-meta-row — side-by-side on wide, stacked on narrow */
.product-meta-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  flex-shrink: 0;
  margin-top: 6px;
}

.product-info {
  flex: 1;
  background: transparent;
  padding: 4px 2px;
  min-width: 0;
}

.product-info h3 { margin: 0 0 4px; font-size: 1rem; }
.product-info p  { margin: 2px 0; font-size: 0.9rem; }

.product-controls {
  background: rgba(255, 255, 255, 0);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  width: 160px;
}

/* scanner line */
.scan-line {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 2px;
  background: var(--cyan);
  opacity: 0.3;
  box-shadow: 0 0 10px var(--cyan);
  animation: scan 4s linear infinite;
  pointer-events: none;
  z-index: 10;
}

@keyframes scan { 0% { top: 0; } 100% { top: 100%; } }

/* ── BUTTONS ───────────────────────────────────────────────────────────────── */
.buy-btn {
  border-radius: 18px;
  background: #e9e9e9;
  border: 2px solid #bdbdbd;
  padding: 8px 14px;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
  display: inline-block;
  touch-action: manipulation;
}

.buy-btn:active { transform: translateY(1px); }

.center-buy {
  width: 48%;
  display: block;
  margin: 8px auto 0;
  align-self: center;
}

.buy-btn.connected {
  background: #cfeef5;
  border-color: #7fd6e6;
}

/* ── CART BADGE ────────────────────────────────────────────────────────────── */
.cart-wrapper {
  position: fixed;
  top: 15px;
  right: 15px;
  cursor: pointer;
  z-index: 1006;
  display: flex;
  align-items: center;
  justify-content: center;
}

#cart-badge {
  position: absolute;
  top: -5px; right: -10px;
  background: #ff0000;
  color: #fff;
  width: 20px; height: 20px;
  border-radius: 50%;
  font-size: 12px;
  display: none;
  align-items: center;
  justify-content: center;
  font-family: 'VT323', monospace;
  font-weight: bold;
  box-shadow: 0 0 8px rgba(255,0,0,0.8);
}

/* ── WALLET DISPLAY ────────────────────────────────────────────────────────── */
#wallet-display {
  font-family: monospace;
  font-size: 13px;
  color: #ffffff;
}

/* ── FORM / INPUTS ─────────────────────────────────────────────────────────── */
.input-group {
  display: flex;
  flex-direction: column;
  margin-bottom: 10px;
}

.input-group label { font-size: 1.3rem; margin-bottom: 4px; }

.pixel-content input,
.pixel-content textarea {
  border: 4px solid #fff;
  padding: 8px;
  font-family: inherit;
  font-size: 1.1rem;
  outline: none;
  background: transparent;
  color: powderblue;
}

.pixel-content textarea { height: 80px; resize: none; }

#submit-btn {
  width: 100%;
  background: transparent;
  border: 4px solid #fff;
  padding: 10px;
  font-family: inherit;
  font-size: 1.4rem;
  font-weight: bold;
  cursor: pointer;
  box-shadow: 4px 4px 0 #fff;
  transition: transform 0.1s;
  color: #fff;
  touch-action: manipulation;
}

#submit-btn:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0 #fff;
}

#form-status {
  margin-top: 10px;
  font-size: 1rem;
  text-align: center;
}

select {
  background: #fff;
  color: #000;
  border: 1px solid #000;
  font-family: 'VT323', monospace;
  padding: 4px;
  font-size: 13px;
  width: 100%;
  touch-action: manipulation;
}

/* ── WALL / IM WINDOW ──────────────────────────────────────────────────────── */
.im-pixel-container {
  width: 98%;
  height: 100%;
  max-height: 100%;
  max-width: 1200px;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0 auto;
  box-sizing: border-box;
}

.pixel-log-area {
  flex: 1 1 auto;
  background: #000;
  margin: 8px;
  padding: 12px;
  border: 4px solid #fff;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 5px;
  scrollbar-width: none;
  text-align: left;
}

.pixel-log-area::-webkit-scrollbar { display: none; }

.im-pixel-input-dock {
  flex: 0 0 auto;
  border-top: 4px solid #fff;
  background: #000;
  padding: 12px !important;
}

.im-pixel-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  flex-wrap: wrap;
  gap: 6px;
}

.pixel-input-small {
  width: 150px !important;
  padding: 5px !important;
  font-size: 1rem !important;
}

.pixel-timestamp-label {
  font-family: 'VT323', monospace;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.5);
}

.pixel-textarea-aim {
  height: 45px !important;
  margin-bottom: 8px;
  width: 100%;
}

.chat-line   { font-family: 'VT323', monospace; font-size: 1.1rem; line-height: 1.2; }
.chat-user   { color: #ff0000; font-weight: bold; }
.chat-comment{ color: #fff; }
.chat-time   { color: #73cd49; font-size: 0.8rem; margin-left: 6px; }

.pixel-color-picker {
  background: transparent;
  border: 2px solid #fff;
  width: 28px; height: 28px;
  cursor: pointer; padding: 0;
  appearance: none;
}

.pixel-color-picker::-webkit-color-swatch-wrapper { padding: 0; }
.pixel-color-picker::-webkit-color-swatch { border: none; }

/* ── ROSTER ────────────────────────────────────────────────────────────────── */
.spotify-credits {
  background: #000;
  color: #fff;
  width: 100%; height: 100%;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.credits-header {
  padding: 16px 12px;
  text-align: center;
  position: sticky;
  top: 0;
  background: #000;
  z-index: 10;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  font-weight: 700;
}

.close-btn {
  background: none; border: none;
  color: #fff; font-size: 20px; cursor: pointer;
}

.filter-wrapper {
  padding: 0 12px 12px;
  overflow-x: auto;
  white-space: nowrap;
  scrollbar-width: none;
}
.filter-wrapper::-webkit-scrollbar { display: none; }

.filter-bar { display: flex; gap: 8px; }

.pill {
  background: #282828;
  border: 1px solid #404040;
  color: #fff;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: 13px;
  cursor: pointer;
  pointer-events: auto;
  touch-action: manipulation;
}
.pill.active { background: #fff; color: #000; }

.credits-list {
  flex: 1;
  overflow-y: auto;
  padding: 0 12px 120px;
}

.credit-row { display: flex; align-items: center; padding: 10px 0; }

.track-art {
  width: 50px; height: 50px;
  border-radius: 50%;
  margin-right: 12px;
  border: 1px solid rgba(255,255,255,0.2);
  object-fit: cover;
}

.track-info { flex: 1; display: flex; flex-direction: column; gap: 2px; }

.title-line { display: flex; align-items: center; gap: 6px; }

.e-tag {
  background: var(--cyan);
  color: #000; font-size: 8px; font-weight: 900;
  padding: 2px 4px; border-radius: 2px;
  letter-spacing: 1px;
  box-shadow: 0 0 5px var(--cyan);
}

.artist-name { font-size: 13px; color: #fff; }

/* ── ADMIN PANEL ───────────────────────────────────────────────────────────── */
.admin-panel {
  max-width: 520px;
  width: 95%;
}

/* ── SUCCESS SCREEN ────────────────────────────────────────────────────────── */
.success-content { background: transparent; color: var(--cyan); padding: 16px; }

/* ============================================================================
   RESPONSIVE BREAKPOINTS
   ============================================================================ */

/* ── SMALL PHONES (≤ 390px wide) ───────────────────────────────────────────── */
@media (max-width: 390px) {
  .pixel-window { width: 99%; }

  .viewer-3D-container {
    height: 200px !important;
    min-height: 200px !important;
  }

  .shop-viewer-window {
    min-height: unset !important;
    max-height: calc(100vh - 185px);
    overflow-y: auto;
  }

  .product-meta-row { flex-direction: column !important; }
  .product-controls { width: 100% !important; }

  .center-buy { width: 100%; font-size: 12px; padding: 6px; }
  .menu-item  { font-size: 1.5rem; }
}

/* ── STANDARD MOBILE (≤ 768px wide) ────────────────────────────────────────── */
@media (max-width: 768px) {
  /* Tighter shared canvas on phones. The content frame insets clear the small
     home logo (top) and the nav dock (bottom). */
  :root { --edge: 16px; --content-top: 72px; --content-bottom: 72px; }

  .pixel-window {
    width: 96%;
    max-width: 96vw;
    overflow: hidden;
  }

  /* Shop window fills the (now inset) content pane and scrolls internally */
  .shop-viewer-window {
    min-height: unset !important;
    max-height: 100%;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* 3-D viewer: shorter on mobile so meta + buttons fit below it */
  .viewer-3D-container {
    height: 240px !important;
    min-height: 200px !important;
    max-height: 260px !important;
  }

  /* Stack product info and controls vertically */
  .product-meta-row { flex-direction: column !important; }
  .product-controls { width: 100% !important; flex-direction: row !important; }
  .product-controls select { flex: 1; }

  .buy-btn  { font-size: 13px; padding: 7px 10px; }
  .center-buy { width: 47%; }

  .menu-item { font-size: 1.5rem; }

  /* admin panel full-width */
  .admin-panel { width: 98%; max-width: 98vw; }
}

/* ── LANDSCAPE PHONES (height ≤ 500px) ─────────────────────────────────────── */
@media (max-height: 500px) and (orientation: landscape) {
  :root { --content-top: 50px; --content-bottom: 50px; }

  /* In landscape the 3D viewer is very short — rely on scrolling */
  .shop-viewer-window {
    min-height: unset !important;
    max-height: 100%;
    overflow-y: auto !important;
  }

  .viewer-3D-container {
    height: 140px !important;
    min-height: 130px !important;
  }

  .product-meta-row { flex-direction: row !important; }
  .product-controls { width: 130px !important; }
}

/* ── TABLET (769px – 1024px) ────────────────────────────────────────────────── */
@media (min-width: 769px) and (max-width: 1024px) {
  .pixel-window { max-width: 480px; }

  .viewer-3D-container {
    height: 300px !important;
    min-height: 280px !important;
  }

  .shop-viewer-window {
    min-height: unset !important;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
  }
}

/* ── DESKTOP (≥ 1025px) ─────────────────────────────────────────────────────── */
@media (min-width: 1025px) {
  .viewer-3D-container {
    height: 360px;
    min-height: 300px;
  }

  .shop-viewer-window {
    min-height: unset !important;
    overflow-y: auto;
  }

  .product-controls { width: 180px; }
}

/* ── SHOP GRID (legacy product grid) ───────────────────────────────────────── */
.shop-container {
  position: absolute;
  top: 0; left: 0;
  width: 100vw; height: 100vh;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 25vh;
  overflow-y: auto;
  overflow-x: hidden;   /* stop sideways pan during vertical scroll (see .sg-grid) */
  pointer-events: auto;
  z-index: 1006;
  padding-bottom: 25vh;
}

@media (max-width: 768px) {
  .shop-container { grid-template-columns: repeat(2, 1fr); }
}

.product-card {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  border-right: 1px solid var(--cyan);
  border-bottom: 1px solid var(--cyan);
  background: var(--bg);
}

.product-card img { max-width: 60%; height: auto; }
.product-price    { margin-top: 8px; font-weight: 600; font-size: 1.1rem; }

/* ── ARTIST GRID ───────────────────────────────────────────────────────────── */
.artist-container {
  position: absolute;
  top: 0; left: 0;
  width: 100vw; height: 100%;
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 10vh;
  overflow-y: auto;
  overflow-x: hidden;   /* stop sideways pan during vertical scroll (see .sg-grid) */
  pointer-events: auto;
  z-index: 1;
}

.artist-card {
  border-bottom: 1px solid rgba(255,255,255,0.3);
  padding: 16px;
  display: flex; flex-direction: column;
  align-items: center;
  background: #05000a;
  overflow: hidden;
}

.artist-image-wrap {
  width: 100px; height: 180px;
  overflow: hidden;
  margin-bottom: 8px;
  border: 1px solid #fff;
}

.artist-image {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  display: block;
}

/* ── MISC ───────────────────────────────────────────────────────────────────── */
.blueprint-form {
  display: flex; flex-direction: column;
  gap: 10px; width: 90%; max-width: 480px;
  margin-top: 16px;
  align-items: center;
}

.blueprint-form input,
.blueprint-form textarea {
  background: #000; border: 1px solid var(--cyan);
  color: powderblue; padding: 10px;
  font-family: monospace; font-size: 14px;
  outline: none; z-index: 1005; width: 100%;
  box-sizing: border-box;
}

.blueprint-form textarea { height: 100px; resize: none; }

.blueprint-form button {
  background: var(--cyan); color: #fefefe;
  border: none; padding: 14px;
  font-weight: bold; font-family: monospace;
  cursor: pointer; text-transform: uppercase;
  width: 100%;
}

.blueprint-form button:disabled { opacity: 0.5; cursor: not-allowed; }

.product-meta { background: #fff; color: #000 !important; padding: 12px; }
.product-meta h3, .product-meta p { color: #000 !important; margin: 2px 0; }

.cart-icon {
  position: fixed; top: 30px; right: 30px;
  z-index: 1002; cursor: pointer;
  color: #ffffff;
}

#cart-tray {
  position: fixed; top: 20px; right: 20px;
  background: #ffffff; border: 1px solid var(--cyan);
  padding: 5px 15px; color: var(--cyan);
  font-family: monospace; cursor: pointer;
  z-index: 9999;
  box-shadow: 0 0 10px rgba(0,255,255,0.2);
}

#cart-tray:hover { background: var(--cyan); color: #000; }

/* viewer label */
.viewer-label {
  position: absolute; bottom: 8px; right: 8px;
  font-size: 10px; font-family: monospace;
  color: var(--cyan); letter-spacing: 1px;
}

/* ── CONTACT TERMINAL — flush alignment fix ─────────────────────────────── */

/* Remove the 4px white border the base .pixel-window adds */
.contact-terminal {
    border: none;
    box-shadow: 0 0 0 1px #1a0000, 8px 8px 0 rgba(0,0,0,0.5);
}

/* Kill the default pixel-content padding; the form handles its own spacing */
.contact-terminal .pixel-content {
    padding: 0;
    gap: 0;
}

/* The inner dark area gets consistent padding on all 4 sides */
.contact-terminal .contact-inner {
    background: #050505;
    padding: 14px;
    box-sizing: border-box;
    width: 100%;
}

/* Every field block — label + input — flush left edge */
.contact-field {
    margin-bottom: 12px;
    width: 100%;
}

.contact-label {
    display: block;
    font-family: monospace;
    font-size: 10px;
    letter-spacing: 2px;
    color: #00ffff;
    margin: 0 0 5px 0;
    padding: 0;
}

/* Inputs stretch full width, no quirky box model */
.contact-input,
.contact-textarea {
    display: block;
    width: 100%;
    margin: 0;
    background: #0a0a0a;
    border: 1px solid #00ff00;
    color: #00ff00;
    padding: 9px 10px;
    font-family: monospace;
    font-size: 13px;
    outline: none;
    box-sizing: border-box;
    caret-color: #00ff00;
}

.contact-input:focus,
.contact-textarea:focus {
    border-color: #00ffff;
    box-shadow: 0 0 5px rgba(0,255,255,0.12);
}

.contact-input::placeholder,
.contact-textarea::placeholder { color: #333; }

.contact-textarea { resize: none; height: 88px; }

/* Button flush with inputs — same width, no margin quirks */
.contact-submit {
    display: block;
    width: 100%;
    margin: 4px 0 0 0;
    background: #00ff00;
    color: #000;
    border: none;
    padding: 11px 0;
    cursor: pointer;
    font-weight: bold;
    font-family: monospace;
    font-size: 12px;
    letter-spacing: 1px;
    box-sizing: border-box;
}

.contact-submit:hover  { background: #00ffcc; }
.contact-submit:active { transform: translateY(1px); }

.contact-status {
    margin: 10px 0 0 0;
    font-size: 11px;
    font-family: monospace;
    color: #00ffff;
    min-height: 16px;
    letter-spacing: 1px;
}

/* ============================================================================
   CONTACT — MINIMAL PASS
   Quiet and versatile to match the shop: monochrome, clean Archivo, 1px lines,
   a single acid accent, semi-transparent panel so the stream shows behind.
   ============================================================================ */
.contact-terminal {
    --accent: #d2342b;   /* brand red (from logo) */
    --ink:  #0b0b0b;
    --line: rgba(255,255,255,0.18);
    --line-strong: rgba(255,255,255,0.55);
    border: none;
    box-shadow: none;
    overflow: visible;
}

/* panel goes semi-transparent (glass) so the live background bleeds through */
.contact-terminal .pixel-content {
    background: rgba(8, 8, 8, 0.58) !important;
    border: 1px solid var(--line) !important;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* header title → quiet spaced wordmark */
.contact-terminal .pixel-header {
    background: transparent;
    padding: 14px 12px 6px;
    align-items: center;
}
.contact-terminal .pixel-header > span:first-child {
    font-family: 'Archivo', sans-serif;
    font-weight: 600;
    font-size: 0.92rem;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: #fff;
}
.contact-terminal .pixel-header .admin-blink { display: none; }

/* status bar → a single thin rule, no chrome */
.contact-terminal .pixel-content > div:first-child {
    border: none !important;
    background: transparent !important;
    position: relative;
    padding: 0 0 12px 0 !important;
    margin-bottom: 14px !important;
    color: rgba(255,255,255,0.45) !important;
    font-family: 'VT323', monospace !important;
    font-size: 11px !important;
    letter-spacing: 2px !important;
}
.contact-terminal .pixel-content > div:first-child::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 1px;
    background: var(--line);
}

/* labels → small uppercase, quiet */
.contact-label {
    font-family: 'Archivo', sans-serif;
    font-weight: 500;
    font-size: 10px;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.55);
    text-transform: uppercase;
}

/* inputs → thin border, translucent, acid focus */
.contact-input,
.contact-textarea {
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid var(--line-strong);
    color: #fff;
    font-family: 'Archivo', sans-serif;
    font-size: 14px;
    border-radius: 0;
    caret-color: var(--accent);
}
.contact-input:focus,
.contact-textarea:focus {
    border-color: var(--accent);
    box-shadow: none;
}
.contact-input::placeholder,
.contact-textarea::placeholder {
    color: rgba(255,255,255,0.28);
    font-family: 'VT323', monospace;
    letter-spacing: 1px;
}

/* submit → flat white, acid on hover (mirrors the shop ADD TO CART) */
.contact-submit {
    font-family: 'Archivo', sans-serif;
    font-weight: 600;
    font-size: 12px;
    letter-spacing: 2px;
    text-transform: uppercase;
    background: var(--accent);
    color: #fff;
    border: 1px solid var(--accent);
    border-radius: 0;
    box-shadow: none;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.contact-submit:hover {
    background: #fff;
    border-color: #fff;
    color: var(--ink);
}
.contact-status {
    font-family: 'VT323', monospace;
    color: var(--accent);
    letter-spacing: 1px;
}

/* ============================================================================
   CART — MINIMAL PASS  (matches shop + contact; Anton only on the total)
   ============================================================================ */
.cart-window {
    --accent: #d2342b;   /* brand red (from logo) */
    --ink:  #0b0b0b;
    --line: rgba(255,255,255,0.18);
    --line-strong: rgba(255,255,255,0.55);
    border: none;
    box-shadow: none;
}
.cart-window .pixel-header {
    background: transparent;
    padding: 14px 12px 8px;
}
.cart-window .pixel-header > span:first-child {
    font-family: 'VT323', monospace;
    font-weight: 400;
    font-size: 1rem;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #fff;
}
.cart-close {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.55);
    font-family: 'VT323', monospace;
    font-size: 0.95rem;
    letter-spacing: 1px;
    text-transform: lowercase;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
    transition: color 0.15s;
}
.cart-close:hover { color: #fff; }

.cart-window .cart-body {
    background: transparent !important;
    border: none;
    color: #fff !important;
    padding: 6px 2px !important;
    gap: 0;
    overflow-y: auto;
    min-height: 0;
}
.cart-list-head {
    font-family: 'VT323', monospace;
    font-size: 0.82rem;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.45);
    padding-bottom: 14px;
    border-bottom: 1px solid var(--line);
    margin-bottom: 18px;
}
.cart-list { min-height: 40px; margin-bottom: 8px; }
.cart-empty {
    font-family: 'VT323', monospace;
    font-size: 0.85rem;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.4);
    text-align: center;
    padding: 20px 0;
}

/* line items */
.cart-row {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 0;
    border-bottom: 1px solid var(--line);
}
.cart-row-main { flex: 1; min-width: 0; }
.cart-row-title {
    font-family: 'Archivo', sans-serif;
    font-weight: 600;
    font-size: 0.84rem;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #fff;
}
.cart-row-variant {
    font-family: 'VT323', monospace;
    font-size: 0.76rem;
    letter-spacing: 1px;
    color: rgba(255,255,255,0.45);
    margin-top: 2px;
}
.cart-row-price {
    text-align: right;
    font-family: 'Archivo', sans-serif;
    font-size: 0.86rem;
    color: #fff;
    white-space: nowrap;
}
/* quantity stepper (+ / −) */
.cart-qty {
    display: inline-flex;
    align-items: stretch;
    margin-top: 8px;
    border: 1px solid var(--line-strong);
}
.cart-qty-btn {
    width: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    color: #fff;
    font-family: 'Archivo', sans-serif;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.cart-qty-btn:hover  { background: var(--accent); color: #fff; }
.cart-qty-btn:active { transform: translateY(1px); }
.cart-qty-btn:disabled { opacity: 0.5; cursor: default; }
.cart-qty-val {
    min-width: 34px;
    padding: 3px 0;
    text-align: center;
    font-family: 'VT323', monospace;
    font-size: 1rem;
    color: #fff;
    border-left: 1px solid var(--line);
    border-right: 1px solid var(--line);
}
.cart-remove {
    background: transparent;
    border: none;
    color: rgba(255,255,255,0.4);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: 4px 6px;
    transition: color 0.15s;
}
.cart-remove:hover { color: var(--accent); }

/* total */
.cart-total-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    border-top: 1px solid var(--line);
    padding-top: 18px;
    margin: 22px 0 22px;
    font-family: 'Archivo', sans-serif;
    font-weight: 600;
    font-size: 0.85rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: #fff;
}
.cart-total-row #cart-total-price {
    font-family: 'VT323', monospace;
    font-size: 1.1rem;
    letter-spacing: 0;
}

/* actions — minimal flat text links */
.cart-actions { display: flex; align-items: center; gap: 20px; }
.cart-btn {
    font-family: 'VT323', monospace;
    font-weight: 400;
    font-size: 1rem;
    letter-spacing: 1px;
    text-transform: lowercase;
    background: none; border: none; padding: 0;
    cursor: pointer;
    transition: color 0.15s, opacity 0.15s;
}
.cart-checkout { color: var(--accent); }
.cart-checkout::after { content: " →"; }
.cart-checkout:hover { filter: brightness(1.12); }
.cart-clear { color: var(--text); opacity: 0.55; }
.cart-clear:hover { opacity: 1; }
.cart-clear { background: transparent; color: rgba(255,255,255,0.6); border-color: var(--line-strong); }
.cart-clear:hover { color: #fff; border-color: #fff; }

/* ============================================================================
   TOKEN — TOKENOMICS PAGE  (third pillar of the hub; minimal + brand red)
   ============================================================================ */
.token-window {
    --accent: #d2342b;
    --ink:  #0b0b0b;
    --line: rgba(255,255,255,0.18);
    --line-strong: rgba(255,255,255,0.55);
    border: none;
    box-shadow: none;
}
.token-window .pixel-header { background: transparent; padding: 14px 12px 8px; }
.token-window .pixel-header > span:first-child {
    font-family: 'Archivo', sans-serif;
    font-weight: 600;
    font-size: 0.92rem;
    letter-spacing: 5px;
    text-transform: uppercase;
    color: #fff;
}
.token-mc-pill {
    font-family: 'VT323', monospace;
    font-size: 0.85rem;
    letter-spacing: 1px;
    color: var(--accent);
    border: 1px solid var(--line);
    padding: 2px 8px;
}
.token-window .token-body {
    background: transparent !important;   /* the glass lives on the .liquid frame now */
    border: none;
    color: #fff !important;
    padding: 16px !important;
    gap: 0;
    flex: 1;
    min-height: 0;                        /* let the flex child shrink so it can scroll */
    overflow-y: auto;                     /* ← the body scrolls INSIDE the frame */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.18) transparent;
}
.token-window .token-body::-webkit-scrollbar { width: 6px; }
.token-window .token-body::-webkit-scrollbar-track { background: transparent; }
.token-window .token-body::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18); border-radius: 3px; }

.token-sec { padding: 14px 0; border-bottom: 1px solid var(--line); }
.token-sec:last-child { border-bottom: none; padding-bottom: 4px; }
.token-kicker {
    font-family: 'VT323', monospace;
    font-size: 0.78rem;
    letter-spacing: 3px;
    color: var(--accent);
    margin-bottom: 9px;
}
.token-window p {
    font-family: 'Archivo', sans-serif;
    font-weight: 300;
    font-size: 0.86rem;
    line-height: 1.5;
    color: rgba(255,255,255,0.82);
    margin: 0;
}
.token-lead {
    font-weight: 400 !important;
    font-size: 0.98rem !important;
    color: #fff !important;
}
.token-list {
    margin: 0;
    padding: 0;
    list-style: none;
    font-family: 'Archivo', sans-serif;
}
.token-list li {
    position: relative;
    padding: 5px 0 5px 18px;
    font-size: 0.84rem;
    font-weight: 300;
    line-height: 1.45;
    color: rgba(255,255,255,0.82);
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
.token-list li:last-child { border-bottom: none; }
.token-list li::before {
    content: '';
    position: absolute;
    left: 0; top: 12px;
    width: 7px; height: 7px;
    background: var(--accent);
}

/* allocation bars */
.token-alloc { margin-top: 4px; }
.alloc-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    font-family: 'Archivo', sans-serif;
    font-weight: 500;
    font-size: 0.72rem;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(255,255,255,0.7);
    margin: 9px 0 4px;
}
.alloc-val { font-family: 'Anton', sans-serif; font-size: 0.95rem; color: #fff; letter-spacing: 0; }
.alloc-bar { height: 5px; background: rgba(255,255,255,0.08); overflow: hidden; }
.alloc-bar i { display: block; height: 100%; background: var(--accent); }
.token-fine {
    margin-top: 12px !important;
    font-size: 0.74rem !important;
    color: rgba(255,255,255,0.45) !important;
    line-height: 1.45 !important;
}

/* contract / buy */
.token-ca-label {
    font-family: 'VT323', monospace;
    font-size: 0.72rem;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.45);
    margin-bottom: 6px;
}
.token-ca {
    display: flex;
    align-items: center;
    gap: 8px;
    border: 1px solid var(--line-strong);
    padding: 9px 10px;
}
.token-ca code {
    flex: 1;
    min-width: 0;
    font-family: 'VT323', monospace;
    font-size: 0.84rem;
    letter-spacing: 0.5px;
    color: #fff;
    overflow-wrap: anywhere;
}
.token-copy {
    flex-shrink: 0;
    font-family: 'Archivo', sans-serif;
    font-weight: 600;
    font-size: 10px;
    letter-spacing: 1.5px;
    background: var(--accent);
    color: #fff;
    border: none;
    padding: 5px 9px;
    cursor: pointer;
}
.token-copy:hover { background: #fff; color: var(--ink); }
.token-links { display: flex; gap: 8px; margin-top: 10px; }
.token-links[hidden] { display: none; }

/* ============================================================================
   HUD — quiet edge furniture (LIVE pill, side micro-type, corner marks)
   Restrained on purpose: it frames the stage without crowding it.
   ============================================================================ */
#hud {
    position: fixed;
    inset: 0;
    z-index: 1006;            /* behind header + centered content (1009) */
    pointer-events: none;
}

/* LIVE / OFFLINE pill — top-left, under the header */
#live-pill {
    position: fixed;
    top: calc(var(--header-h) + 12px);
    left: var(--edge);
    display: flex;
    align-items: center;
    gap: 7px;
    font-family: 'VT323', monospace;
    font-size: 0.74rem;
    letter-spacing: 2px;
    color: rgba(255,255,255,0.5);
    background: rgba(0,0,0,0.42);
    border: 1px solid rgba(255,255,255,0.16);
    padding: 3px 9px;
}
#live-pill i {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: rgba(255,255,255,0.35);
}
#live-pill[data-live="true"] {
    color: #fff;
    border-color: var(--brand-red);
}
#live-pill[data-live="true"] i {
    background: var(--brand-red);
    box-shadow: 0 0 8px var(--brand-red);
    animation: livePulse 1.4s ease-in-out infinite;
}
@keyframes livePulse { 0%,100% { opacity: 1; } 50% { opacity: 0.35; } }

/* vertical brand micro-type running up the left edge */
.hud-side {
    position: fixed;
    left: 14px;
    bottom: calc(var(--menu-h) + 20px);
    writing-mode: vertical-rl;
    transform: rotate(180deg);
    font-family: 'VT323', monospace;
    font-size: 0.72rem;
    letter-spacing: 4px;
    color: rgba(255,255,255,0.26);
    white-space: nowrap;
}

/* faint registration marks framing the stage */
.hud-mark {
    position: fixed;
    width: 13px; height: 13px;
    border: 1px solid rgba(255,255,255,0.16);
}
.hud-tl { top: calc(var(--header-h) + 12px);  right: auto; left: auto; left: 16px; border-right: none; border-bottom: none; display: none; }
.hud-tr { top: calc(var(--header-h) + 12px);  right: 16px; border-left: none; border-bottom: none; }
.hud-bl { bottom: calc(var(--menu-h) - 4px);  left: 16px;  border-right: none; border-top: none; }
.hud-br { bottom: calc(var(--menu-h) - 4px);  right: 16px; border-left: none; border-top: none; }

/* ticker doubles as a button into the token page */
#price-ticker { cursor: pointer; transition: opacity 0.15s; }
#price-ticker:hover { opacity: 0.85; }
#price-ticker:focus-visible { outline: 1px solid var(--brand-red); outline-offset: 3px; }
.token-link {
    flex: 1;
    text-align: center;
    font-family: 'Archivo', sans-serif;
    font-weight: 600;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-decoration: none;
    color: #fff;
    border: 1px solid var(--line-strong);
    padding: 9px 0;
    transition: border-color 0.15s, background 0.15s;
}
.token-link:hover { border-color: #fff; background: rgba(255,255,255,0.06); }

/* ============================================================================
   CYBER TERMINAL — FULL HYBRID CONFLUENCE (MASK & OVERLAY)
   Synchronized Silhouette Mask (trans.png) & Line-Art Overlay (trans2.png)
   ============================================================================ */

/* ── STEP 1: Layer 1 - The Cookie-Cutter Video Silhouette (Using trans.png) ─────
   This defines the raw shape that the red video stream will occupy. */
#global-site-video-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    object-fit: cover;
    z-index: 1000;
    pointer-events: none;
    opacity: 0.8;
    scale: 1.02;
    
    /* ⚡ MOBILE HARDWARE ACCELERATION FORCE:
       Forces iOS and Android mobile chips to render the mask layer via the GPU */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    
    /* Alpha Mask Engine — clean wordmark (same shape as the white overlay so
       the video fill always lines up; the white overlay below sits a touch
       larger to read as an outline). */
-webkit-mask-image: url('/public/homelogo_trans2.png');
mask-image: url('/public/homelogo_trans2.png');


    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: 65% auto; 
    mask-size: 65% auto;
    
    image-rendering: crisp-edges; 
}

/* ── STEP 2: Layer 2 - The White Line-Art Visual Wrapper ──────────────────── */
#global-site-logo-overlay {
    position: fixed;
    top: 0; left: 0;
    width: 100vw; height: 100vh;
    scale: 1.02;
    z-index: 100; /* Keep it below your products so it doesn't block mobile touch scrolls */
    pointer-events: none;
    
    /* ⚡ MOBILE HARDWARE ACCELERATION FORCE */
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    
    background-image: url('/public/homelogo_trans.png');
    background-repeat: no-repeat;
    background-position: center;
    background-size: 65% auto; 
    mix-blend-mode: normal; 
    opacity: 1; 
    image-rendering: crisp-edges;
    background-color: transparent !important; 
    
    /* FIX: Clamped invert value to a valid 100% boundary to stop mobile engines from crashing */
    filter: brightness(0) invert(100%); 
}

/* ── STEP 3: AUTOMATIC MOBILE RESPONSIVE MATRIX ────────────────────────────── */
/* When screen width dips below 768px (Mobile & Tablets), we scale up the logo bounds 
   so it stays punchy and legible instead of shrinking into a tiny dot. */
@media (max-width: 768px) {
    #global-site-video-mask {
        -webkit-mask-size: 90% auto;
        mask-size: 90% auto;
    }
    #global-site-logo-overlay {
        background-size: 90% auto;
    }
}

/* ── FROSTED GLASS ON CONTENT PAGES ─────────────────────────────────────────
   loadPage() adds body.page-frost on SHOP / CONTACT / TOKENOMICS. Instead of
   blurring the logo itself (which smeared it), a single frosted-glass panel
   slides over the whole background — the logo just sits crisp behind the glass.
   HOME / CART have no frost. Falls back to the flat dark scrim where
   backdrop-filter is unsupported. */
body.page-frost::before {
  content: ""; position: fixed; inset: 0; z-index: 1005; pointer-events: none;
  background: rgba(8, 8, 8, 0.58);
  -webkit-backdrop-filter: blur(7px) saturate(110%);
  backdrop-filter: blur(7px) saturate(110%);
  animation: pageFrostIn .3s ease both;
}
@keyframes pageFrostIn { from { opacity: 0; } to { opacity: 1; } }

/* ============================================================================
   TWITCH LIVE BACKGROUND
   Lazy-init: player is only created once the container is at opacity:1.
   ============================================================================ */

/* Fullscreen Twitch Background Container */
#twitch-background {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  z-index: 1001;
  opacity: 0;
  /* transition here = governs the FADE-OUT (removing .active) */
  transition: opacity var(--transition-time) ease-in-out;
  pointer-events: none;
  background: #000;
  overflow: hidden;
}

#twitch-background.active {
  opacity: 1;
  pointer-events: auto;
  /* transition: none here = instant snap-to-visible on FADE-IN */
  /* Twitch's autoplay check fires after the player is created and sees opacity:1 immediately */
  transition: none;
}

/* While the live stream is up (body.twitch-live, set by twitch-player.js) the
   logo is NOT a camera trigger. (The dark/light theme is also forced to dark
   over the dark stream — handled in theme.js so the UI text stays visible.) */
body.twitch-live #cam-logo-hit { display: none !important; }

/* Twitch Player Element */
#twitch-player {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* While the player is starting, lift the (fullscreen black) container above the
   whole site UI. Desktop Chrome's occlusion check denies Twitch autoplay if any
   element paints over the iframe — covering it with the old black #twitch-cover
   is what silently broke desktop playback. twitch-player.js removes 'starting'
   on PLAY (or a timeout fallback); occlusion doesn't stop playback once started. */
#twitch-background.starting { z-index: 9999; }

/* Floating Mute Button */
/* Minimal Twitch-style speaker — bottom-left, only while the stream is up */
#mute-toggle {
  position: fixed;
  left: var(--edge);
  bottom: calc(104px + var(--safe-bottom));  /* sits right above the corner-nav footer (≈94px tall) */
  z-index: 1011;
  width: 34px; height: 34px; padding: 4px;
  background: none; border: 0; color: #fff;
  display: none; align-items: center; justify-content: center;
  cursor: pointer; opacity: .85;
  filter: drop-shadow(0 1px 3px rgba(0,0,0,.6));
  transition: opacity .15s ease, transform .15s ease;
}
#mute-toggle:hover  { opacity: 1; transform: scale(1.1); }
#mute-toggle:active { transform: scale(0.94); }
#mute-toggle.active { display: flex; }          /* shown only when live (twitch-player adds .active) */
#mute-toggle svg { width: 26px; height: 26px; display: none; }
#mute-toggle.muted   .ic-muted   { display: block; }
#mute-toggle.unmuted .ic-unmuted { display: block; }

@media (max-width: 768px) {
  #mute-toggle { left: var(--edge); bottom: calc(78px + var(--safe-bottom)); } /* above the ~65px footer */
}

/* Make ticker take available space and center itself */
#price-ticker {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border-radius: 30px;
}

.ticker-price {
    font-family: 'VT323', monospace;
    font-size: 28px;
    line-height: 1;

    color: #00ff66;

    text-shadow:
        0 0 8px rgba(0,255,102,.7),
        0 0 18px rgba(0,255,102,.5),
        0 0 40px rgba(0,255,102,.3);

    animation:
        mc-count .35s ease,
        flicker 8s infinite;
}

.ticker-change {
    font-family: 'Share Tech Mono', monospace;
    font-size: 12px;
    letter-spacing: 1px;
}

.ticker-change.up {
    color: #00ff66;
}

.ticker-change.down {
    color: #ff4444;
}
.ticker-change.flat  { color: #888; }

/*market cap widget animations*/
#market-cap-widget {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    width: 280px;
    height: 46px;

    display: flex;
    flex-direction: column;
    justify-content: center;

    padding: 6px 14px;

    border: 2px solid #00ff00;
    border-radius: 999px;

    background: rgba(255,255,255,.92);
    overflow: hidden;
}

.mc-top {
    display: flex;
    align-items: center;
    gap: 8px;
    z-index: 2;
}

.mc-label {
    font-weight: 800;
    letter-spacing: 1px;
}

#mc-value {
    font-family: 'VT323', monospace;
    font-size: 26px;

    color: #00ff66;

    text-shadow:
        0 0 8px rgba(0,255,102,.6),
        0 0 18px rgba(0,255,102,.4);
}

#mc-mini-chart {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    opacity: .35;
    pointer-events: none;
}


@keyframes mc-count {
    from {
        opacity: 0;
        transform: scale(.85);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes flicker {
    0%,100% { opacity:1; }
    92% { opacity:1; }
    93% { opacity:.4; }
    94% { opacity:1; }
    97% { opacity:.7; }
    98% { opacity:1; }
}


/* ── CORNER NAV (bottom-left secondary links + socials) ────────────────────── */
#corner-links {
  position: fixed;
  left: var(--edge);
  bottom: calc(var(--edge) + var(--safe-bottom));
  z-index: 1010;             /* above world/HUD, header, and content panes so corner links are always clickable */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  pointer-events: auto;
}
#corner-links .corner-link {
  font-family: 'VT323', monospace;
  text-transform: lowercase;
  letter-spacing: 1px;
  font-size: 1.05rem;
  line-height: 1.15;
  color: #fff;
  text-decoration: none;
  position: relative;
  transition: color .2s ease;
}
#corner-links .corner-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -2px;
  width: 0; height: 1px;
  background: var(--brand-red);
  transition: width .22s ease;
}
#corner-links .corner-link:hover,
#corner-links .corner-link:focus-visible {
  color: var(--brand-red);
  outline: none;
}
#corner-links .corner-link:hover::after,
#corner-links .corner-link:focus-visible::after { width: 100%; }

.corner-socials {
  display: flex;
  gap: 12px;
  align-items: center;
}
.corner-socials a {
  color: rgba(255,255,255,0.6);
  display: inline-flex;
  transition: color .2s ease, transform .2s ease;
}
.corner-socials a:hover,
.corner-socials a:focus-visible {
  color: var(--brand-red);
  transform: translateY(-1px);
  outline: none;
}

/* Socials live centered just below the background logo (home-screen lockup),
   sitting under the camera hit-area so taps don't collide with it. */
#logo-socials {
  position: fixed;
  left: 50%;
  top: calc(50% + 20vw);
  transform: translateX(-50%);
  gap: 24px;
  z-index: 1010;
  display: none;                 /* shown only on HOME, where the logo is the hero */
}
body[data-page="HOME"]:not(.camera-active) #logo-socials { display: flex; }
@media (max-width: 768px) {
  #logo-socials { top: calc(50% + 47vw); gap: 28px; }
}

/* ── PRIMARY NAV (#site-nav) ──────────────────────────────────────────────────
   Minimal text nav that relocates instead of disappearing. Both states use
   `top` so it physically slides between the HOME lockup (above the socials) and
   the bottom dock when you enter a section. */
#site-nav {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1010;
  display: flex;
  flex-direction: row;
  gap: 22px;
  font-family: 'VT323', monospace;
  /* No slide between positions — the nav just appears in its new spot. */
}
#site-nav a {
  color: var(--text);
  text-decoration: none;
  opacity: .55;
  font-size: 1.1rem;
  letter-spacing: 1px;
  text-transform: lowercase;
  transition: opacity .2s ease, color .2s ease;
}
#site-nav a:hover { opacity: .9; }
#site-nav a.is-active { opacity: 1; color: var(--brand-red); }

/* HOME: directly above the socials lockup. */
body[data-page="HOME"] #site-nav { top: calc(50% + 17vw); }
/* SECTION: relocate to the subtle bottom dock. */
body:not([data-page="HOME"]) #site-nav {
  top: calc(100dvh - var(--edge) - 1.7rem - var(--safe-bottom));
}
@media (max-width: 768px) {
  body[data-page="HOME"] #site-nav { top: calc(50% + 34vw); }
  #site-nav { gap: 16px; }
  #site-nav a { font-size: 1rem; }
}

/* ── SIMPLE SECTION PAGES (video / lookbook / misc) ──────────────────────────
   Flat, airy, mono — share the same content frame as every other section. */
.section-page {
  width: 100%; max-width: var(--content-max); margin: 0 auto;
  box-sizing: border-box; padding: 4px 2px;
  color: var(--text); font-family: 'VT323', monospace;
  text-align: center;                 /* centered in the middle, like the references */
}
.misc-list { align-items: center; }   /* center the link column */
.section-eyebrow {
  margin: 0 0 4px; font-size: .85rem; letter-spacing: 2px;
  color: rgba(255, 255, 255, .5);
}
.section-title {
  margin: 0 0 18px; font-family: 'Anton', sans-serif; line-height: .92;
  font-size: clamp(2.1rem, 10vw, 2.8rem); letter-spacing: 1px; color: var(--text);
}
.section-note { font-size: 1rem; opacity: .5; letter-spacing: 1px; }
.misc-list { display: flex; flex-direction: column; gap: 12px; }
.misc-list a {
  color: var(--text); text-decoration: none; opacity: .8;
  font-size: 1.3rem; letter-spacing: 1px; width: max-content;
  transition: color .2s ease, opacity .2s ease;
}
.misc-list a:hover { color: var(--brand-red); opacity: 1; }

@media (max-width: 768px) {
  #corner-links {
    left: var(--edge);
    /* sit at the very bottom-left, flanking the centered menu wheel (its text is
       centered, so the corners are free) — not floating mid-screen above the wheel.
       Keep the bottom inset small/tuned so the links flank the wheel, not float above it. */
    bottom: calc(10px + var(--safe-bottom));
    gap: 1px;
  }
  #corner-links .corner-link { font-size: 0.74rem; letter-spacing: .8px; line-height: 1.15; }
  #corner-links .corner-rule { margin: 2px 0; width: 24px; }
  #corner-links .corner-socials { gap: 16px; margin-top: 1px; }
  #corner-links .corner-socials svg { width: 19px; height: 19px; } /* tap target */
}

/* Keep capture mode clean: hide the bottom footer chrome while the camera is open. */
body.camera-active .footer-link,
body.camera-active #site-nav { display: none; }

/* ── CAMERA OVERLAY + "YOU ARE HERE" ─────────────────────────────────────── */
#camera-stream {
  position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
  object-fit: cover; z-index: 1000;            /* same band as the masked bg loop */
  opacity: 0; pointer-events: none; transition: opacity .25s ease;
  scale: 1.02;                                 /* match #global-site-video-mask exactly */
  /* mask the live cam into the BAD logo silhouette (same geometry as the bg mask) */
  -webkit-mask-image: url('/public/homelogo_trans2.png');  mask-image: url('/public/homelogo_trans2.png');
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center;  mask-position: center;
  -webkit-mask-size: 65% auto;    mask-size: 65% auto;     /* desktop — mobile bumps to 90% below */
}
body.camera-active #camera-stream { opacity: 1; }
@media (max-width: 768px) {
  #camera-stream { -webkit-mask-size: 90% auto; mask-size: 90% auto; } /* mirror the mobile logo matrix */
}
.cam-hidden { opacity: 0 !important; }

/* Invisible hit-area over the background logo — discreet, no visible button.
   Click it to open the camera; double-tap to flip front/back. It only catches
   clicks on HOME (where content-display is click-through, see below). */
#cam-logo-hit {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%);
  width: 65vw; height: 37vw; background: transparent; border: 0; padding: 0; cursor: pointer;
  z-index: 1008; display: none;
}
@media (max-width: 768px) { #cam-logo-hit { width: 90vw; height: 51vw; } }
/* clickable when on HOME and the cam is closed; while the cam is open it rides
   above the stream so a double-tap can flip the camera */
body[data-page="HOME"]:not(.camera-active) #cam-logo-hit { display: block; }
body.camera-active #cam-logo-hit { display: block; z-index: 1010; }
/* let the logo click fall through the (empty) HOME content pane */
body[data-page="HOME"] #content-display { pointer-events: none; }

#cam-capture {
  position: fixed; left: 50%; bottom: calc(var(--menu-h) + 24px + var(--safe-bottom));
  transform: translateX(-50%); z-index: 1011; display: none;
  width: 64px; height: 64px; border-radius: 50%; cursor: pointer;
  background: #fff; border: 4px solid rgba(255,255,255,.5);
}
body.camera-active #cam-capture { display: block; }
body.recording   #cam-capture { background: var(--brand-red); border-color: rgba(210,52,43,.5); }

/* small ✕ above the logo to exit the camera — only while it's open */
#cam-exit {
  position: fixed; left: 50%; top: 28%; transform: translate(-50%,-50%); z-index: 1011; display: none;
  width: 34px; height: 34px; border-radius: 50%; line-height: 1; font-size: 16px; cursor: pointer;
  background: rgba(0,0,0,.5); color: #fff; border: 1px solid rgba(255,255,255,.4);
}
body.camera-active #cam-exit { display: block; }

/* Stop iOS long-press from text-selecting the logo/ticker while holding to record.
   No touch-action:none here, so pinch-to-zoom (the phone's natural zoom) still works. */
#cam-capture, #cam-logo-hit, #cam-exit { -webkit-touch-callout: none;
  -webkit-user-select: none; user-select: none; touch-action: manipulation; }
body.camera-active { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }

/* ════════════════════════════════════════════════════════════════════════════
   LIQUID GLASS — shared panel treatment for CONTACT + TOKENOMICS.
   Translucent gradient + heavy blur + a soft inner highlight + a slow drifting
   specular sheen = the "liquid glass" feel. Rounded to read distinct/premium
   against the sharp shop cards (that contrast is the "pop").
   ════════════════════════════════════════════════════════════════════════════ */
/* The liquid-glass treatment was retired in the feng-shui pass — CONTACT and
   TOKENOMICS now sit flat/airy over the page frost. The sheen layer is hidden. */
.liquid { position: relative; isolation: isolate; }
.liquid > *:not(.lq-sheen) { position: relative; z-index: 1; }
.lq-sheen { display: none; }

/* ── CONTACT — flat & airy (feng-shui) ─────────────────────────────────────── */
.contact-card {
  --accent: #d2342b;
  position: relative;
  width: 100%;
  max-width: 420px;
  box-sizing: border-box;
  padding: 4px 2px;
  color: var(--text);
  background: none; border: none; box-shadow: none; border-radius: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.contact-eyebrow {
  margin: 0 0 4px; font-family: 'VT323', monospace; font-size: .85rem;
  letter-spacing: 2px; color: rgba(255,255,255,.5);
}
.contact-title {
  margin: 0 0 22px; font-family: 'VT323', monospace; font-weight: 400;
  font-size: 1.5rem; letter-spacing: 4px; text-transform: uppercase; color: var(--text);
}
.contact-form { display: flex; flex-direction: column; gap: 16px; }
.contact-field { display: flex; flex-direction: column; gap: 5px; }
.contact-field > span {
  font-family: 'VT323', monospace; font-size: .82rem;
  letter-spacing: 2px; text-transform: lowercase; color: rgba(255,255,255,.5);
}
/* underline-style fields — minimal, no boxes */
.contact-card input,
.contact-card textarea {
  width: 100%; box-sizing: border-box;
  background: transparent;
  border: none; border-bottom: 1px solid rgba(255,255,255,0.25);
  border-radius: 0;
  color: var(--text); font-family: 'VT323', monospace; font-size: 1.05rem;
  padding: 7px 2px; outline: none;
  transition: border-color .18s;
}
.contact-card textarea { resize: none; min-height: 70px; line-height: 1.4; }
.contact-card input::placeholder,
.contact-card textarea::placeholder { color: rgba(255,255,255,.28); }
.contact-card input:focus,
.contact-card textarea:focus { border-bottom-color: var(--accent); }
.contact-send {
  margin-top: 14px; align-self: flex-start;
  display: inline-flex; align-items: center; gap: 8px;
  font-family: 'VT323', monospace; font-size: 1rem; letter-spacing: 2px;
  text-transform: lowercase;
  color: var(--text); cursor: pointer;
  padding: 0; border: none; background: none;
  transition: color .15s;
}
.contact-send i { font-style: normal; transition: transform .15s ease; }
.contact-send:hover { color: var(--accent); }
.contact-send:hover i { transform: translateX(4px); }
.contact-status {
  margin-top: 12px; min-height: 16px;
  font-family: 'VT323', monospace; font-size: .95rem; letter-spacing: 1px; color: var(--accent);
}

/* ── TOKENOMICS — flat & airy (feng-shui) ──────────────────────────────────── */
.token-window.liquid {
  background: none; border: none; border-radius: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.token-mc-pill {
  background: transparent;
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 0;
}
.alloc-bar {
  height: 4px; border-radius: 0; overflow: hidden;
  background: rgba(255,255,255,0.12);
}
.alloc-bar i {
  position: relative;
  background: var(--accent);
  border-radius: 0;
}

@media (max-width: 768px) {
  .token-sec { padding: 12px 0; }
  .token-kicker { margin-bottom: 7px; }
}

#capture-actions { position: fixed; inset: 0; z-index: 1100; display: none;
  background: rgba(0,0,0,.8); align-items: center; justify-content: center; }
#capture-actions.open { display: flex; }
#capture-actions .cap-card { position: relative; max-width: 90vw; max-height: 84vh;
  background: #0a0a0a; border: 1px solid rgba(255,255,255,.15); padding: 14px; }
#cap-preview img, #cap-preview video { max-width: 84vw; max-height: 56vh; display: block; }
#cap-close { position: absolute; top: 6px; right: 8px; background: none; border: none;
  color: #fff; font-size: 18px; cursor: pointer; }
.cap-buttons { display: flex; gap: 10px; margin-top: 12px; }
.cap-btn { flex: 1; font-family: 'Anton', sans-serif; letter-spacing: 1.5px; padding: 10px;
  background: #fff; color: #000; border: none; cursor: pointer; }
.cap-btn:hover { background: var(--brand-red); color: #fff; }
.cap-social { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.cap-social-label { font-family: 'VT323', monospace; letter-spacing: 2px;
  color: rgba(255,255,255,.5); font-size: .8rem; }
.cap-social-btn { flex: 1; font-family: 'Anton', sans-serif; letter-spacing: 1px; font-size: .72rem;
  padding: 7px; background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.3); cursor: pointer; }
.cap-social-btn:hover { color: var(--brand-red); border-color: var(--brand-red); }

/* bottom-right footer entry (mirrors the bottom-left #corner-links) */
/* Persistent footer links in the bottom corners (contact left, you-are-here
   right). Shared mono style; flank the centered nav dock on section pages. */
.footer-link {
  position: fixed; bottom: calc(var(--edge) + var(--safe-bottom)); z-index: 1010;
  font-family: 'VT323', monospace; text-transform: lowercase; letter-spacing: 1px;
  font-size: .95rem; color: var(--text); text-decoration: none; opacity: .6;
  transition: color .2s, opacity .2s;
}
#footer-contact { left: var(--edge); }
#yah-link       { right: var(--edge); }
.footer-link:hover, .footer-link:focus-visible { color: var(--brand-red); opacity: 1; outline: none; }
@media (max-width: 768px) {
  .footer-link { bottom: calc(10px + var(--safe-bottom)); font-size: .8rem; }
}