/* realm/css/realm.css — Your Realm (receiver side of Stations' Cast).
   Rebuilt 2026-06. This file holds ONLY the live page: a small base section
   (view mechanics + claim modal skeleton) and the full visual layer below.
   All legacy wallet styles were retired with the wallet/ → realm/ rename. */

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; min-height: 100%; }
body { font-family: 'Inter', system-ui, sans-serif; color: #e9eff8; }
button { font: inherit; }
/* no rubber-band / pull-to-refresh — the page is an app surface, the only real
   scroller is the grid (wallet-view); scroll chaining to the page is never right */
html, body { overscroll-behavior: none; }

/* ── view sections ── */
#wallet-view {
  position: fixed; inset: 0; z-index: 100;
  display: none; flex-direction: column; overflow-y: auto;
  padding: 64px 32px 28px;
}
#wallet-view.visible { display: flex; }

#action-detail-view {
  position: fixed; inset: 0; z-index: 110;
  overflow-y: auto; padding: 24px 32px 120px;
}
#detail-back-btn { margin-bottom: 28px; cursor: pointer; }

/* section head — element resets; look lives in the layer below */
.wallet-section-title { margin: 0; }
.wallet-section-sub { margin: 0; }

/* empty state (no search matches) — toggled by realm.js */
#wallet-empty-state { display: none; padding: 40px 0 20px; }
.empty-line1 { font-family: var(--font-mono); font-size: 11px; margin-bottom: 7px; }
.empty-line2 { font-family: var(--font-mono); font-size: 9.5px; }

/* ── claim modal skeleton (the layer below reskins it) ── */
.claim-modal-overlay {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none;
  transition: opacity .25s;
}
.claim-modal-overlay.visible { opacity: 1; pointer-events: all; }
.claim-modal-inner { position: relative; max-width: 480px; width: 90vw; }
.claim-close { position: absolute; top: 16px; right: 18px; background: none; border: none; cursor: pointer; line-height: 1; padding: 4px 6px; }
.claim-title { margin: 0 0 16px; }
.claim-desc { margin: 0 0 20px; }
.claim-field { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; }
.claim-input { width: 100%; }
.claim-error { margin-bottom: 12px; }
.claim-confirm-btn { margin-bottom: 16px; cursor: pointer; }
.claim-note { margin: 0; }

/* ════════════════════════════════════════════════════════════════════════════
   REALM REBUILD LAYER — receiver side of Stations' Cast.
   Stations look: deep-space glitter-warp + glass panels, blue structure /
   gold C// / white Standard. Everything below overrides the legacy wallet skin.
   ════════════════════════════════════════════════════════════════════════════ */

:root {
  --font-sans: 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --font-pixel: 'Press Start 2P', monospace;
  --rlm-gold: #f5c542;
  --rlm-gold-deep: #e0a040;
  --rlm-blue: #18B0F5;
  --rlm-blue-soft: #7fc3ff;
  --rlm-text: #e9eff8;
  --rlm-dim: #8fa3c0;
  --rlm-panel: rgba(13, 22, 42, 0.62);
  --rlm-border: rgba(120, 170, 230, 0.22);
}

/* ── deep space backdrop — 「星泊」Anchorage ──
   Stations' sky is blue/purple and travelling; the Realm's is the same deep
   space seen from a place stars settle: cyan-teal and aurora-green nebulae
   (the C// voice/tree family), still cold, but at rest. */
body.rlm-body {
  background:
    radial-gradient(60% 54% at 20% 18%, rgba(28,110,118,0.26), transparent 70%),
    radial-gradient(54% 50% at 84% 56%, rgba(34,128,96,0.16), transparent 72%),
    radial-gradient(70% 60% at 56% 98%, rgba(18,98,110,0.20), transparent 72%),
    #090e10 !important;
  background-attachment: fixed;
}
#warp-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; display: block; }

/* ── claim pill — Stations plan-pill pattern: collapsed idle, expands on hover ── */
#rlm-claim-pill { position: fixed; top: 23px; right: 72px; z-index: 419; }
body.ncp-nav-open #rlm-claim-pill { opacity: 0; pointer-events: none; }
#rlm-claim-pill #custody-widget { display: flex; align-items: center; }
#rlm-claim-pill .cc-claim-btn {
  display: inline-flex; align-items: center; gap: 0; height: 30px; padding: 0 11px;
  background: rgba(12,20,38,0.38); border: 1px solid rgba(120,170,230,0.16); border-radius: 999px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 3px 12px rgba(0,0,0,0.25); cursor: pointer;
  font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .1em;
  color: rgba(205,221,242,0.5);
  transition: border-color .25s ease, background .25s ease, color .25s ease, box-shadow .25s ease;
}
#rlm-claim-pill .rlm-cp-ico {
  font-family: var(--font-pixel); font-size: 11px; color: rgba(127,195,255,0.7);
  transition: color .25s ease;
}
/* label stays out — the pill is a standing reminder, never fully collapsed */
#rlm-claim-pill .rlm-cp-sep { width: 1px; height: 12px; background: rgba(120,170,230,0.3); margin: 0 9px; }
#rlm-claim-pill .rlm-cp-label { white-space: nowrap; color: #e7eefb; }
#rlm-claim-pill .rlm-cp-arr { white-space: nowrap; color: #e7eefb; margin-left: 8px; opacity: .55; transition: opacity .25s ease; }
#rlm-claim-pill .cc-claim-btn:hover {
  background: rgba(16,28,52,0.8); border-color: rgba(127,195,255,0.5);
  color: rgba(225,236,250,0.95);
  box-shadow: 0 6px 20px rgba(0,0,0,0.4), 0 0 12px rgba(24,176,245,0.18);
}
#rlm-claim-pill .cc-claim-btn:hover .rlm-cp-ico { color: #7fc3ff; }
#rlm-claim-pill .cc-claim-btn:hover .rlm-cp-arr { opacity: 1; }
/* claimed → gold confirmed chip, same pill geometry */
#rlm-claim-pill #cc-addr-chip {
  display: inline-flex; align-items: center; gap: 7px; height: 30px; padding: 0 13px;
  background: rgba(20,16,6,0.5); border: 1px solid rgba(245,197,66,0.5); border-radius: 999px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 3px 12px rgba(0,0,0,0.25), 0 0 12px rgba(245,197,66,0.18);
  font-family: var(--font-mono); font-size: 11px; color: var(--rlm-gold);
}
#rlm-claim-pill .cc-tick { font-size: 10px; }

/* ── floating nav drawer (verbatim Stations skin) ── */
.ncp-nav-toggle {
  position: fixed; top: 16px; right: 18px; z-index: 460;
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: rgba(12,20,38,0.62); border: 1px solid rgba(120,170,230,0.30);
  border-radius: 12px; cursor: pointer;
  -webkit-backdrop-filter: blur(14px) saturate(1.12); backdrop-filter: blur(14px) saturate(1.12);
  box-shadow: 0 6px 22px rgba(0,0,0,0.42), inset 0 1px 0 rgba(195,222,255,0.13);
  transition: border-color .2s, background .2s, transform .12s;
}
.ncp-nav-toggle:hover { border-color: rgba(130,185,255,0.6); background: rgba(16,28,52,0.8); }
.ncp-nav-toggle:active { transform: translateY(1px); }
.ncp-nav-lines { display: flex; flex-direction: column; gap: 4px; width: 19px; }
.ncp-nav-lines > span { height: 2px; border-radius: 2px; background: #bcd6f5; transition: transform .26s ease, opacity .18s ease; }
body.ncp-nav-open .ncp-nav-lines > span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.ncp-nav-open .ncp-nav-lines > span:nth-child(2) { opacity: 0; }
body.ncp-nav-open .ncp-nav-lines > span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.ncp-nav-backdrop {
  position: fixed; inset: 0; z-index: 440; background: rgba(4,7,13,0.52);
  -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); animation: ncpNavFade .2s ease;
}
@keyframes ncpNavFade { from { opacity: 0; } to { opacity: 1; } }

.ncp-nav-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 450; width: 272px; max-width: 82vw;
  display: flex; flex-direction: column; padding: 72px 16px 18px;
  transform: translateX(104%); transition: transform .3s cubic-bezier(.3,.82,.3,1);
  background: linear-gradient(180deg, rgba(11,18,34,0.95), rgba(6,10,20,0.97));
  border-left: 1px solid rgba(120,170,230,0.22);
  -webkit-backdrop-filter: blur(22px) saturate(1.15); backdrop-filter: blur(22px) saturate(1.15);
  box-shadow: -10px 0 44px rgba(0,0,0,0.5);
}
body.ncp-nav-open .ncp-nav-drawer { transform: translateX(0); }
.ncp-nav-brand { display: block; padding: 0 10px 16px; margin-bottom: 8px; border-bottom: 1px solid rgba(120,170,230,0.14); }
.ncp-nav-brand img { height: 23px; width: auto; display: block; opacity: .96; }
.ncp-nav-section { font-family: var(--font-pixel); font-size: 7px; letter-spacing: .26em; color: rgba(140,170,215,0.5);
  text-transform: uppercase; padding: 22px 12px 7px; }
button.ncp-nav-link {
  width: 100%; background: none; border: none; cursor: pointer; text-align: left;
  font-family: var(--font-sans); font-size: 13.5px;
}
.ncp-nav-links { display: flex; flex-direction: column; gap: 1px; }
.ncp-nav-link { display: flex; align-items: center; gap: 11px; padding: 10px 12px; border-radius: 9px;
  font-family: var(--font-sans); font-size: 13.5px; color: #cdddf2; text-decoration: none;
  transition: background .15s, color .15s; }
.ncp-nav-link:hover { background: rgba(120,170,230,0.1); color: #fff; }
.ncp-nav-link-current { background: rgba(127,195,255,0.12); color: #fff; cursor: default; position: relative; padding-left: 14px; }
.ncp-nav-link-current::before { content: ''; position: absolute; left: 3px; top: 9px; bottom: 9px; width: 2px; border-radius: 2px; background: #7fc3ff; box-shadow: 0 0 7px rgba(127,195,255,0.6); }
.ncp-nav-link-current:hover { background: rgba(127,195,255,0.12); }
.ncp-nav-here { margin-left: auto; font-family: var(--font-mono); font-size: 8px; letter-spacing: .18em; text-transform: uppercase; color: rgba(127,195,255,0.85); }
.ncp-nav-ico { width: 17px; text-align: center; color: #7fc3ff; font-size: 13px; flex-shrink: 0; }
.ncp-nav-ext { margin-left: auto; opacity: .45; font-size: 12px; }
.ncp-nav-foot { margin-top: auto; padding-top: 16px; border-top: 1px solid rgba(120,170,230,0.12); }
.ncp-nav-socials { display: flex; justify-content: flex-start; gap: 4px; padding: 0 6px; margin-bottom: 4px; }
.ncp-nav-socials a { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center;
  border-radius: 9px; color: rgba(170,195,230,0.55); text-decoration: none;
  transition: color .15s, background .15s, transform .12s; }
.ncp-nav-socials a:hover { color: #fff; background: rgba(120,170,230,0.1); transform: translateY(-1px); }
.ncp-nav-socials svg { width: 17px; height: 17px; display: block; }
.ncp-nav-logout { display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px;
  background: rgba(255,255,255,0.03); border: 1px solid rgba(150,175,220,0.18); border-radius: 9px;
  font-family: var(--font-sans); font-size: 13px; color: rgba(200,212,230,0.8); cursor: pointer; text-align: left;
  transition: background .15s, color .15s, border-color .15s; }
.ncp-nav-logout:hover { background: rgba(240,110,110,0.1); border-color: rgba(240,110,110,0.4); color: #ffdada; }
.ncp-nav-logout .ncp-nav-ico { color: rgba(225,140,140,0.85); }

/* ── home: centered column, Browse-style head + controls ──
   no top bar anymore → content rises; 64px clears the floating menu/pill row */
.rlm-body #wallet-view { align-items: center; top: 0; padding-top: 64px; }
.rlm-body #action-detail-view { top: 0; padding-top: 24px; }
.rlm-body #wallet-view > * { width: 100%; max-width: 1180px; }
.rlm-body .rlm-head {
  margin: 0 0 18px;
  display: flex; justify-content: space-between; align-items: flex-end; gap: 26px; flex-wrap: wrap;
}
.rlm-body .rlm-head .wallet-section-title {
  font-family: var(--font-pixel); font-size: 15px; letter-spacing: .08em;
  color: var(--rlm-gold); text-shadow: 0 0 18px rgba(245,197,66,0.45);
}
.rlm-body .rlm-head .wallet-section-sub {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em;
  color: var(--rlm-dim); margin-top: 10px;
}
/* footer band — invite left, chain line right (one conventional row) */
.rlm-footer {
  display: flex; align-items: center; justify-content: space-between; gap: 28px; flex-wrap: wrap;
  margin-top: 64px; padding: 26px 0 6px;
  border-top: 1px solid rgba(24,176,245,0.12);
}
.rlm-mode-sky .rlm-footer { margin-top: 18px; }
/* grid mode: when few/no cards, push the footer to the very bottom instead of
   letting it float up under a short grid (#wallet-view is a full-height flex column) */
.rlm-mode-grid .rlm-footer { margin-top: auto; }
.rlm-ft-invite { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.rlm-make-line { font-family: var(--font-sans); font-size: 12px; color: #c9d6ea; }
.rlm-ft-chain {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: rgba(240,245,243,0.46);
}
.rlm-create-btn {
  display: inline-flex; align-items: center; gap: 9px; padding: 10px 15px;
  border: 2px solid #6e4a13; border-radius: 0; cursor: pointer; text-decoration: none;
  background: linear-gradient(180deg, #d49636, #b07a1e); color: #fff5e6;
  font-family: var(--font-pixel); font-size: 7.5px; letter-spacing: .06em;
  box-shadow: 0 4px 0 #6e4a13, inset 0 2px 0 rgba(255,255,255,0.22), 0 0 20px rgba(245,197,66,0.18);
  transition: transform .12s, box-shadow .12s;
  clip-path: polygon(0 3px,3px 3px,3px 0,calc(100% - 3px) 0,calc(100% - 3px) 3px,100% 3px,100% calc(100% - 3px),calc(100% - 3px) calc(100% - 3px),calc(100% - 3px) 100%,3px 100%,3px calc(100% - 3px),0 calc(100% - 3px));
}
.rlm-create-btn:hover { transform: translateY(2px); box-shadow: 0 2px 0 #6e4a13, inset 0 2px 0 rgba(255,255,255,0.22), 0 0 24px rgba(245,197,66,0.26); }
.rlm-create-btn:active { transform: translateY(4px); box-shadow: 0 0 0 #6e4a13, inset 0 2px 0 rgba(255,255,255,0.18); }
.rlm-cb-ico { font-size: 9.5px; line-height: 1; }
.rlm-cb-arr { font-family: var(--font-mono); font-size: 10.5px; }
.rlm-create-sub { font-family: var(--font-mono); font-size: 8px; letter-spacing: .12em; color: rgba(143,163,192,0.6); }

/* mini browse controls — one quiet row beside the head, no panel chrome */
#rlm-controls {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  justify-content: flex-end; padding-bottom: 4px;
}
.rlm-search-wrap {
  display: flex; align-items: center; gap: 7px; width: 168px;
  background: rgba(8, 14, 28, 0.42); border: 1px solid rgba(120,170,230,0.18);
  border-radius: 999px; padding: 5px 11px;
  transition: border-color .2s, box-shadow .2s, width .25s ease;
}
.rlm-search-wrap:focus-within {
  border-color: rgba(24,176,245,0.55); box-shadow: 0 0 0 3px rgba(24,176,245,0.10);
  width: 230px;
}
.rlm-search-ico { color: rgba(143,163,192,0.7); font-size: 12px; line-height: 1; }
#rlm-search {
  flex: 1; min-width: 0; background: none; border: none; outline: none;
  font-family: var(--font-mono); font-size: 10.5px; letter-spacing: .03em; color: var(--rlm-text);
}
#rlm-search::placeholder { color: rgba(143,163,192,0.5); }

.rlm-ctl-sep { width: 1px; height: 14px; background: rgba(120,170,230,0.2); }
.rlm-chips { display: flex; align-items: center; gap: 5px; }
.rlm-chip {
  font-family: var(--font-mono); font-size: 8px; font-weight: 700; letter-spacing: .12em;
  color: rgba(143,163,192,0.85); background: transparent;
  border: 1px solid rgba(120,170,230,0.2); border-radius: 999px;
  padding: 5px 9px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  transition: color .15s, border-color .15s, background .15s, box-shadow .15s;
}
.rlm-chip:hover { color: #dce8f7; border-color: rgba(130,185,255,0.45); }
.rlm-chip .rlm-chip-n { font-size: 7.5px; opacity: .75; }
.rlm-chip.active {
  color: #0a1322; background: var(--rlm-blue); border-color: var(--rlm-blue);
  box-shadow: 0 0 10px rgba(24,176,245,0.32);
}
.rlm-chip.active .rlm-chip-n { opacity: .85; }
.rlm-chip.rlm-chip-c.active {
  color: #2a1c04; background: linear-gradient(180deg, var(--rlm-gold), var(--rlm-gold-deep));
  border-color: var(--rlm-gold); box-shadow: 0 0 10px rgba(245,197,66,0.32);
}
.rlm-chip.rlm-chip-std.active {
  color: #10182a; background: #e9eff8; border-color: #e9eff8;
  box-shadow: 0 0 9px rgba(233,239,248,0.26);
}

/* ── floating star field — a perspective stage over the grid ──
   The grid stays the layout truth (filter/sort/search, no occlusion, any
   count); the ParallaxCards feel rides on top: per-card depth, idle bob,
   and a stage that leans toward the cursor. */
/* grid view — a plain, direct card grid (no perspective, no float/drift) */
.rlm-body #nft-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(218px, 248px));
  justify-content: flex-start;
  gap: 22px; margin: 8px 0 56px;
}
/* a static card hovers with a simple lift — no 3D tilt */
#nft-grid .dc-card { transition: transform .2s ease, box-shadow .3s ease; }
#nft-grid .dc-card:hover { transform: translateY(-4px); }

/* sky-only float/bob (kept for the immersive view) */
.rlm-bob { animation: rlmBob 6s ease-in-out infinite; }
@keyframes rlmBob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-7px) rotate(0.45deg); }
}
@media (prefers-reduced-motion: reduce) { .rlm-bob { animation: none; } }

/* static cards (grid) — title always shown, anchored at the card's bottom; the
   caption (host/date + blurb) is COLLAPSED from layout (max-height 0, not just
   transparent — transparent text still holds space and floats the title to the
   middle of the card). Hover expands it under the title. A faint ··· marks
   that there is more to reveal. */
.dc-static .dc-title { transform: none; opacity: 1; }
.dc-static .dc-sub, .dc-static .dc-desc {
  max-height: 0; margin: 0; overflow: hidden; opacity: 0; transform: translateY(6px);
  transition: max-height .45s ease, opacity .35s ease, transform .45s ease, margin .45s ease;
}
.dc-static:hover .dc-sub  { max-height: 34px;  margin-bottom: 3px; opacity: 1; transform: none; }
.dc-static:hover .dc-desc { max-height: 130px; margin-top: 5px;   opacity: 1; transform: none; }
.dc-static .dc-bg { transform: scale(1.06); }
.dc-static:hover .dc-title { color: var(--rlm-gold); text-shadow: 0 0 14px rgba(245,197,66,0.4), 0 2px 12px rgba(0,0,0,0.6); }
.dc-static:hover .dc-sub { color: rgba(245,216,140,0.88); }
.dc-static:hover .dc-desc { color: rgba(240,229,202,0.92); }
/* the hover cue — quiet dots under the title, gone once the caption is open */
.dc-static .dc-content::after {
  content: '···'; display: block; font-family: var(--font-mono); font-size: 11px;
  letter-spacing: .22em; line-height: 1; color: rgba(190,208,235,0.45);
  margin-top: 6px; max-height: 12px; overflow: hidden;
  transition: max-height .3s ease, opacity .3s ease, margin .3s ease;
}
.dc-static:hover .dc-content::after { max-height: 0; opacity: 0; margin-top: 0; }
/* touch / no-hover devices can't reveal — keep the caption visible, no dots */
@media (hover: none) {
  .dc-static .dc-sub  { max-height: 34px;  margin-bottom: 3px; opacity: 1; transform: none; }
  .dc-static .dc-desc { max-height: 130px; margin-top: 5px;   opacity: 1; transform: none; }
  .dc-static .dc-content::after { display: none; }
}

/* faint luminous rim lives on the BUTTON — .dc-inner's clip-path would clip
   any shadow painted there (that's why the glow never showed) */
.dc-card {
  position: relative; display: block; width: 100%; aspect-ratio: 3 / 4;
  padding: 0; border: none; background: none; color: inherit; text-align: left;
  border-radius: 16px; overflow: hidden; cursor: pointer;
  perspective: 1000px; outline: none;
  box-shadow:
    0 10px 24px rgba(0,0,0,0.38),
    0 0 18px rgba(120,180,255,0.22),
    0 0 42px rgba(110,170,255,0.14);
  transition: box-shadow .3s ease;
}
.dc-card.dc-kind-c {
  box-shadow:
    0 10px 24px rgba(0,0,0,0.38),
    0 0 18px rgba(245,197,66,0.20),
    0 0 44px rgba(245,197,66,0.12);
}
.dc-card.dc-hover {
  box-shadow:
    0 22px 46px rgba(0,0,0,0.52),
    0 0 26px rgba(130,190,255,0.34),
    0 0 64px rgba(110,170,255,0.20);
}
.dc-card.dc-kind-c.dc-hover {
  box-shadow:
    0 22px 46px rgba(0,0,0,0.52),
    0 0 26px rgba(245,197,66,0.34),
    0 0 66px rgba(245,197,66,0.2);
}
.dc-card:focus-visible { box-shadow: 0 0 0 3px rgba(24,176,245,0.55); }
.dc-inner {
  position: relative; width: 100%; height: 100%;
  background: #101a30; border-radius: 16px;
  transform-style: preserve-3d; backface-visibility: hidden; will-change: transform;
  clip-path: inset(0 round 16px);
}
.dc-clip { position: absolute; inset: 0; overflow: hidden; border-radius: 16px; }
.dc-bg {
  position: absolute; inset: 0; pointer-events: none;
  background-size: cover; background-position: center; background-repeat: no-repeat;
  transform: scale(1.3); backface-visibility: hidden;
}
.dc-spot {
  position: absolute; inset: 0; z-index: 20; pointer-events: none;
  mix-blend-mode: soft-light; filter: blur(2px);
  opacity: 0; transition: opacity .3s ease;
}
.dc-badge {
  position: absolute; top: 13px; left: 13px; z-index: 40;
  font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .16em;
  color: #e9eff8; background: rgba(9, 15, 30, 0.72);
  border: 1px solid rgba(233,239,248,0.4); border-radius: 6px; padding: 5px 9px;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.dc-kind-c .dc-badge {
  color: var(--rlm-gold); border-color: rgba(245,197,66,0.6);
  text-shadow: 0 0 10px rgba(245,197,66,0.45);
}
.dc-content {
  position: absolute; inset: 0; z-index: 30;
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: 20px;
  background: linear-gradient(to top, rgba(4,8,18,0.9), rgba(4,8,18,0.42) 46%, transparent);
  border-radius: 16px;
}
.dc-content { padding: 16px; }
.dc-title {
  font-family: var(--font-pixel); font-size: 10px; font-weight: 400; line-height: 1.55;
  letter-spacing: .02em; color: #fff; margin-bottom: 7px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.6);
  transform: translateY(8px); opacity: .94;
  transition: transform .5s ease, opacity .5s ease;
}
.dc-sub {
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .13em; text-transform: uppercase;
  line-height: 1.75; color: rgba(190,208,235,0.78); margin-bottom: 3px;
  transform: translateY(8px);
  transition: transform .5s ease;
}
.dc-desc {
  font-family: var(--font-sans); font-size: 11.5px; line-height: 1.5;
  color: rgba(225,234,248,0.85); margin-top: 5px;
  opacity: 0; transform: translateY(10px);
  transition: transform .5s ease .07s, opacity .5s ease .07s;
}
/* hover — the caption block warms to gold */
.dc-card.dc-hover .dc-title, .dc-card.dc-hover .dc-sub { transform: translateY(0); opacity: 1; }
.dc-card.dc-hover .dc-desc { transform: translateY(0); opacity: 1; }
.dc-title, .dc-sub, .dc-desc { transition-property: transform, opacity, color, text-shadow; }
.dc-card.dc-hover .dc-title {
  color: var(--rlm-gold);
  text-shadow: 0 0 14px rgba(245,197,66,0.45), 0 2px 12px rgba(0,0,0,0.6);
}
.dc-card.dc-hover .dc-sub { color: rgba(245,216,140,0.88); }
.dc-card.dc-hover .dc-desc { color: rgba(240,229,202,0.92); }
@media (prefers-reduced-motion: reduce) {
  .dc-title, .dc-sub, .dc-desc { transform: none; opacity: 1; }
  .dc-bg { transform: none; }
}

/* ── empty state (no matches) ── */
.rlm-body #wallet-empty-state .empty-line1 { color: var(--rlm-text); }
.rlm-body #wallet-empty-state .empty-line2 { color: var(--rlm-dim); }

/* ── detail view — the page left, the star's record right ──
   Same sky as the home view (transparent over the warp field), and a silky
   push transition: home slides back-left while the detail glides in from
   the right — one continuous move, not a cut. */
.rlm-body #action-detail-view {
  background: transparent;
  display: block;
  opacity: 0; pointer-events: none;
  transform: translateX(46px) scale(0.988);
  transition: opacity .36s ease, transform .46s cubic-bezier(.22,.8,.3,1);
}
.rlm-body #action-detail-view.visible {
  opacity: 1; pointer-events: auto;
  transform: translateX(0) scale(1);
}
.rlm-body #wallet-view {
  transition: opacity .32s ease, transform .42s cubic-bezier(.3,.7,.3,1);
}
body.rlm-detail-open #wallet-view {
  opacity: 0; pointer-events: none;
  transform: translateX(-34px) scale(0.992);
}
.rlm-body #detail-back-btn {
  font-family: var(--font-mono); font-size: 10px; font-weight: 700; letter-spacing: .14em;
  color: var(--rlm-blue-soft); background: rgba(12,20,38,0.62);
  border: 1px solid rgba(120,170,230,0.3); border-radius: 10px; padding: 10px 16px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.rlm-body #detail-back-btn:hover { border-color: rgba(130,185,255,0.6); background: rgba(16,28,52,0.8); }

/* two equal halves — the page frame left matches the open info flow right */
#rlm-detail {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 56px; max-width: 1240px; margin: 14px auto 70px; align-items: start;
}
@media (max-width: 980px) { #rlm-detail { grid-template-columns: 1fr; gap: 34px; } .rlm-d-left { max-width: 560px; } }

.rlm-frame-shell {
  position: relative; width: 100%; overflow: hidden;
  border-radius: 14px; border: 1px solid rgba(120,170,230,0.34);
  background: #0a1322;
  box-shadow: 0 18px 48px rgba(0,0,0,0.5), 0 0 36px rgba(24,176,245,0.10);
}
#rlm-frame {
  position: absolute; top: 0; left: 0; width: 556px; height: 556px;
  border: none; transform-origin: 0 0; display: block; background: #0a1322;
}
.rlm-frame-cap {
  margin-top: 11px; font-family: var(--font-mono); font-size: 8.5px;
  letter-spacing: .2em; color: var(--rlm-dim); text-transform: uppercase;
}

/* Full Screen + Broadcast under the page — the Stations share pair, dark skin */
.rlm-frame-actions { display: flex; gap: 8px; margin-top: 12px; }
.rlm-frame-actions .home-st-share-btn {
  flex: 1; padding: 10px 8px; cursor: pointer; border-radius: 0; white-space: nowrap;
  font-family: var(--font-pixel); font-size: 7px; letter-spacing: .04em; line-height: 1;
  background: rgba(120,162,220,0.12); color: #dce8f7;
  border: 2px solid rgba(120,162,220,0.42); box-shadow: 0 3px 0 rgba(8,18,40,0.6);
  transition: transform .1s, box-shadow .1s;
  clip-path: polygon(0 3px,3px 3px,3px 0,calc(100% - 3px) 0,calc(100% - 3px) 3px,100% 3px,100% calc(100% - 3px),calc(100% - 3px) calc(100% - 3px),calc(100% - 3px) 100%,3px 100%,3px calc(100% - 3px),0 calc(100% - 3px));
}
.rlm-frame-actions .home-st-share-btn:active { transform: translateY(3px); box-shadow: 0 0 0 rgba(8,18,40,0.6); }
.rlm-frame-actions .home-st-share-cast {
  background: linear-gradient(180deg, #f5c542, #e0a040); color: #2a1c06;
  border-color: #b9831f; box-shadow: 0 3px 0 #8f6416;
}
.rlm-frame-actions .home-st-share-cast:active { box-shadow: 0 0 0 #8f6416; }

/* FULL SCREEN — the page fills the screen (fake-fullscreen, no chrome) */
#rlm-lightbox {
  position: fixed; inset: 0; z-index: 600; display: none;
  align-items: center; justify-content: center;
  background: #04070d;
}
#rlm-lightbox.visible { display: flex; }
#rlm-lb-shell { position: relative; overflow: hidden; background: #04070d; }
#rlm-lb-frame {
  position: absolute; top: 0; left: 0; width: 556px; height: 556px;
  border: none; transform-origin: 0 0; display: block; background: #04070d;
}
/* 1006: 一度挪到左下角,Zo 要求放回右上角 —— 退出键在右上是约定,换地方反而难找。
   它确实会压住页面自己的右上角控件(Ellen 那页的语言下拉),但那天看到的「顶栏整条
   不见」不是它干的,是灯箱在 zoom 下高了 1.5 屏(见 realm.js fitLightbox)。
   挡住一个下拉是小事,且随时能让页面把控件挪开;把退出键藏到不常规的角落才是大事。 */
#rlm-lb-close {
  position: fixed; top: 18px; right: 22px; z-index: 610; cursor: pointer;
  font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .16em;
  color: #dce8f7; background: rgba(12,20,38,0.62); border: 1px solid rgba(120,170,230,0.3);
  border-radius: 999px; padding: 9px 14px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: border-color .2s, background .2s;
}
#rlm-lb-close:hover { border-color: rgba(130,185,255,0.6); background: rgba(16,28,52,0.8); }

/* ── on-chain identity layer — a corner orb (chat-widget position: read as
   platform UI on any full-bleed page). Open = scrim + the page steps back +
   a glass card blooms from the corner. ── */
.nfs-scrim {
  position: fixed; inset: 0; z-index: 602;
  background: rgba(2,5,10,0.55);
  opacity: 0; pointer-events: none; transition: opacity .32s ease;
}
#rlm-lightbox.nfs-open .nfs-scrim { opacity: 1; pointer-events: auto; }
#rlm-lb-shell { transition: transform .38s ease, filter .38s ease; }
#rlm-lightbox.nfs-open #rlm-lb-shell { transform: scale(0.965); filter: brightness(0.62) saturate(0.92); }
.nfs-dock { position: fixed; right: 22px; bottom: 22px; z-index: 612; }
/* the orb — ghost-glass at rest (all idle motion stays INSIDE the circle);
   solid on hover / while the card is open */
.nfs-orb {
  position: relative; width: 54px; height: 54px; border-radius: 50%; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 34% 28%, rgba(46,70,116,0.42), rgba(8,14,28,0.38) 72%);
  border: 1px solid rgba(150,195,255,0.22);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  box-shadow: 0 8px 24px rgba(0,0,0,0.32), inset 0 1px 0 rgba(255,255,255,0.07);
  transition: transform .22s, border-color .25s, background .25s, box-shadow .25s;
}
.nfs-orb::before {
  content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  box-shadow: inset 0 0 16px rgba(245,197,66,0.22);
  animation: nfsInnerBreath 3.6s ease-in-out infinite;
}
.nfs-orb:hover, .nfs-dock.open .nfs-orb {
  background: radial-gradient(circle at 34% 28%, rgba(46,70,116,0.92), rgba(8,14,28,0.9) 72%);
  border-color: rgba(175,212,255,0.6);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.1);
}
.nfs-orb:hover { transform: translateY(-2px) scale(1.04); }
.nfs-orb-ic {
  color: #ffd969; font-size: 19px; line-height: 1; text-shadow: 0 0 10px rgba(245,197,66,0.8);
  animation: nfsIcTwinkle 3.2s ease-in-out infinite;
}
.nfs-orb-badge {
  position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px;
  padding: 0 5px; border-radius: 999px; box-sizing: border-box;
  display: flex; align-items: center; justify-content: center;
  background: rgba(245,197,66,0.92); color: #1a1206;
  font-family: var(--font-pixel); font-size: 7px;
  box-shadow: 0 3px 10px rgba(0,0,0,0.5);
}
@keyframes nfsInnerBreath { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@keyframes nfsIcTwinkle {
  0%, 100% { opacity: .62; transform: scale(.93); }
  50%      { opacity: 1; transform: scale(1.08); }
}
/* hover tag — the full identity at a glance, still small */
.nfs-orb-tag {
  position: absolute; right: 64px; bottom: 2px; transform: translateX(6px);
  opacity: 0; pointer-events: none;
  display: flex; flex-direction: column; gap: 6px;
  padding: 10px 13px; border-radius: 12px;
  background: rgba(8,14,28,0.74); border: 1px solid rgba(130,180,240,0.28);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 10px 28px rgba(0,0,0,0.45);
  transition: opacity .2s, transform .2s;
}
.nfs-dock:not(.open) .nfs-orb:hover ~ .nfs-orb-tag { opacity: 1; transform: none; }
.nfs-tag-row { font-family: var(--font-pixel); font-size: 7px; letter-spacing: .12em; color: #dce8f7; white-space: nowrap; }
.nfs-tag-gold { color: var(--rlm-gold); }
.nfs-tag-cs { color: var(--rlm-gold); text-shadow: 0 0 8px rgba(245,197,66,0.45); }
.nfs-tag-pl { color: #7fc3ff; text-shadow: 0 0 8px rgba(91,170,255,0.4); }
/* the glass card — gradient hairline border + top inner highlight */
.nfs-card {
  position: absolute; right: 0; bottom: 68px; overflow: hidden;
  width: min(480px, calc(100vw - 44px)); padding: 8px 22px; border-radius: 20px;
  background: linear-gradient(180deg, rgba(12,19,38,0.72), rgba(6,10,22,0.84));
  -webkit-backdrop-filter: blur(24px) saturate(1.4); backdrop-filter: blur(24px) saturate(1.4);
  box-shadow: 0 24px 60px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.08);
  opacity: 0; transform: translateY(12px) scale(0.9); pointer-events: none;
  transform-origin: 100% 100%;
  transition: opacity .28s ease, transform .3s cubic-bezier(.2,.9,.3,1.18);
}
.nfs-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.07) 45%, rgba(245,197,66,0.10) 52%, transparent 66%);
  transform: translateX(-130%);
}
.nfs-dock.open .nfs-card::after { animation: nfsSheen 1.1s ease .18s forwards; }
@keyframes nfsSheen { to { transform: translateX(130%); } }
.nfs-card::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: linear-gradient(135deg, rgba(170,210,255,0.5), rgba(245,197,66,0.26) 45%, rgba(120,150,210,0.10));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  pointer-events: none;
}
.nfs-dock.open .nfs-card { opacity: 1; transform: none; pointer-events: auto; }
.nfs-sec {
  position: relative; padding: 14px 0;
  display: flex; flex-direction: column; gap: 9px;
}
/* distinct dividers — gradient hairline (no text), drawn in on open */
.nfs-sec + .nfs-sec::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(170,200,250,0.32) 18%, rgba(245,197,66,0.42) 50%, rgba(170,200,250,0.32) 82%, transparent);
}
.nfs-dock.open .nfs-sec + .nfs-sec::before { animation: nfsDivGrow .7s ease .2s both; }
@keyframes nfsDivGrow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* micro-motion when the card opens: sections drift in staggered,
   the constellation line draws itself, stars pop in, halos pulse */
.nfs-dock.open .nfs-sec { animation: nfsSecIn .45s cubic-bezier(.2,.8,.3,1) both; }
.nfs-dock.open .nfs-sec:nth-child(2) { animation-delay: .07s; }
.nfs-dock.open .nfs-sec:nth-child(3) { animation-delay: .14s; }
.nfs-dock.open .nfs-sec:nth-child(4) { animation-delay: .2s; }
@keyframes nfsSecIn { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.nfs-sky polyline { stroke-dasharray: 1; stroke-dashoffset: 1; }
.nfs-dock.open .nfs-sky polyline { animation: nfsLineDraw 1.4s ease .25s forwards; }
@keyframes nfsLineDraw { to { stroke-dashoffset: 0; } }
.nfs-dock.open .nfs-sky circle { animation: nfsHalo 3.2s ease-in-out infinite; }
@keyframes nfsHalo { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
.nfs-stamps { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.nfs-stamp { font-family: var(--font-pixel); font-size: 8px; letter-spacing: .14em; color: rgba(233,239,248,0.88); }
.nfs-verify {
  font-family: var(--font-pixel); font-size: 7px; letter-spacing: .14em;
  color: var(--rlm-blue-soft); text-decoration: none;
  border-bottom: 1px dashed rgba(127,195,255,0.5); padding-bottom: 1px;
}
.nfs-verify:hover { color: #fff; border-bottom-color: #fff; }
/* the arc star map — kind lives on each star: gold = C//, blue = station */
.nfs-sky { width: 100%; height: auto; display: block; }
.nfs-sg {
  font-size: 9px;
  -webkit-user-select: none; user-select: none; cursor: pointer;
  transform-box: fill-box; transform-origin: center;
}
.nfs-sg-cs { fill: rgba(245,197,66,0.5); }
.nfs-sg-pl { fill: rgba(127,195,255,0.5); }
/* hover → twinkle in place (no size jump); beats the open-state twinkle */
.nfs-sg:hover, .nfs-dock.open .nfs-sg:hover { animation: nfsFlash .5s ease-in-out infinite; }
@keyframes nfsFlash {
  0%, 100% { opacity: 1; filter: drop-shadow(0 0 5px rgba(255,240,200,0.95)); }
  50%      { opacity: .3; filter: drop-shadow(0 0 1px rgba(255,240,200,0.3)); }
}
.nfs-sg-lit { font-size: 12px; }
.nfs-sg-lit.nfs-sg-cs { fill: #ffe9a8; filter: drop-shadow(0 0 4px rgba(245,197,66,0.9)); }
.nfs-sg-lit.nfs-sg-pl { fill: #bfe3ff; filter: drop-shadow(0 0 4px rgba(91,170,255,0.9)); }
.nfs-sg-yours { font-size: 13.5px; }
.nfs-dock.open .nfs-sg {
  animation: nfsPopIn .5s cubic-bezier(.2,.9,.3,1.5) backwards, nfsTwinkle 3.4s ease-in-out infinite;
}
.nfs-dock.open .nfs-sg-burst {
  animation: nfsBurst .9s cubic-bezier(.2,.9,.3,1.4), nfsTwinkle 3.4s ease-in-out infinite;
}
.nfs-sg-more {
  font-size: 8px; fill: rgba(245,197,66,0.55); font-family: var(--font-mono);
  -webkit-user-select: none; user-select: none;
}
@keyframes nfsPopIn { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
@keyframes nfsTwinkle { 0%, 100% { opacity: .72; } 50% { opacity: 1; } }
@keyframes nfsBurst {
  0%   { transform: scale(0.3); }
  45%  { transform: scale(2.2); }
  100% { transform: scale(1); }
}
/* the emphasized numbers — pixel numerals, counted up on open */
.nfs-stats { display: flex; align-items: flex-end; gap: 22px; }
.nfs-stat { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.nfs-stat b { font-family: var(--font-pixel); font-size: 14px; font-weight: 400; color: #e7eefb; line-height: 1; }
.nfs-stat i { font-style: normal; font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .16em; color: var(--rlm-dim); }
.nfs-stat-cs b { color: var(--rlm-gold); text-shadow: 0 0 10px rgba(245,197,66,0.4); }
.nfs-stat-pl b { color: #7fc3ff; text-shadow: 0 0 10px rgba(91,170,255,0.35); }
.nfs-stat-lit b { color: #ffe9a8; text-shadow: 0 0 10px rgba(245,197,66,0.4); }
.nfs-sub {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .08em;
  font-style: italic; color: var(--rlm-dim);
  margin-left: auto; align-self: flex-end; padding-bottom: 1px;
}
/* words from the holders — each line signed */
.nfs-words-h { font-family: var(--font-pixel); font-size: 7px; letter-spacing: .18em; color: #c9a85f; }
.nfs-echo { font-family: var(--font-mono); font-size: 10.5px; line-height: 1.5; color: rgba(233,239,248,0.85); }
.nfs-echo i { font-style: normal; font-size: 8px; letter-spacing: .1em; color: var(--rlm-dim); margin-left: 8px; }
.nfs-echo em { font-style: normal; color: #f5d88c; }
.nfs-acts { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
/* the two recipient actions — each its own clearly-separated block */
.nfs-act-h { font-family: var(--font-pixel); font-size: 7px; letter-spacing: .18em; color: #c9a85f; margin-bottom: 10px; }
.nfs-actsec, .nfs-linesec { display: flex; flex-direction: column; align-items: flex-start; }
.nfs-linewrap { display: inline-flex; align-items: center; gap: 7px; border-bottom: 1px solid rgba(120,170,230,0.32); padding-bottom: 4px; }
.nfs-linesec .nfs-linewrap { width: 100%; max-width: 440px; }
.nfs-linewrap input { flex: 1; width: auto; min-width: 0; background: none; border: none; outline: none; font-family: var(--font-mono); font-size: 11px; color: var(--rlm-text); }
.nfs-linewrap input::placeholder { color: rgba(143,163,192,0.5); }
.nfs-linewrap button { background: none; border: none; color: var(--rlm-blue-soft); font-size: 13px; cursor: pointer; padding: 0 2px; }
.nfs-sent { font-family: var(--font-mono); font-size: 10px; color: rgba(245,216,140,0.85); }
/* hover affordance on the received page — appears over the page itself */
.nfs-peek {
  position: absolute; top: 50%; left: 50%; z-index: 5; cursor: pointer;
  transform: translate(-50%,-50%) scale(.96); opacity: 0; pointer-events: none;
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-pixel); font-size: 9px; letter-spacing: .1em; color: #fff;
  background: rgba(4,8,16,0.78); border: 1px solid rgba(255,255,255,0.30); border-radius: 12px;
  padding: 13px 18px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: 0 10px 30px rgba(0,0,0,0.5);
  transition: opacity .2s, transform .2s, border-color .2s;
}
.rlm-frame-shell:hover .nfs-peek {
  opacity: 1; transform: translate(-50%,-50%) scale(1); pointer-events: auto;
}
.nfs-peek:hover { border-color: #fff; }

/* the record reads as an OPEN flow — translucent breath, no frame */
.rlm-d-right {
  background: linear-gradient(180deg, rgba(13,22,42,0.34), rgba(13,22,42,0.10) 72%, transparent);
  border: none; border-radius: 22px;
  padding: 18px 30px 30px;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  box-shadow: none;
}
.rlm-d-kind { font-family: var(--font-pixel); font-size: 10px; letter-spacing: .1em; margin-bottom: 16px; }
.rlm-k-c { color: var(--rlm-gold); text-shadow: 0 0 14px rgba(245,197,66,0.5); }
.rlm-k-std { color: #e9eff8; }
.rlm-d-name { font-family: var(--font-pixel); font-size: 17px; font-weight: 400; line-height: 1.5; letter-spacing: .01em; color: #fff; margin: 2px 0 13px; text-shadow: 0 2px 16px rgba(0,0,0,0.45); }
.rlm-d-host { font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; line-height: 1.7; color: var(--rlm-dim); }
.rlm-d-desc { font-family: var(--font-sans); font-size: 13.5px; line-height: 1.62; color: #c9d6ea; margin: 0 0 14px; }
.rlm-d-cast {
  font-family: var(--font-sans); font-size: 12px; line-height: 1.55; color: #efe2bd;
  border-left: 2px solid rgba(245,197,66,0.55); padding: 2px 0 2px 11px; margin-bottom: 4px;
}
/* Standard panels keep a single white accent — gold stays C//-only */
.rlm-d-cast.rlm-cast-std { color: #e9eff8; border-left-color: rgba(233,239,248,0.55); }

.rlm-d-sec {
  font-family: var(--font-pixel); font-size: 7px; letter-spacing: .26em;
  color: rgba(140,170,215,0.6); text-transform: uppercase;
  margin: 36px 0 16px; padding-top: 22px; border-top: 1px solid rgba(120,170,230,0.13);
}
.rlm-row { display: grid; grid-template-columns: 112px 1fr; gap: 14px; padding: 6.5px 0; align-items: baseline; }
.rlm-row-l { font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .14em; color: rgba(143,163,192,0.75); }
.rlm-row-v { font-family: var(--font-sans); font-size: 12.5px; color: #dfe9f8; }
.rlm-mono { font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .02em; }
/* 0828:这颗星还没上链 —— 说得清楚,但不喊 */
.rlm-row-pending { color: rgba(205,221,242,0.42); font-style: italic; }
.rlm-row-tx { color: #7fd6ff; text-decoration: none; border-bottom: 1px solid rgba(127,214,255,0.35); }
.rlm-row-tx:hover { border-bottom-color: #7fd6ff; }

/* C// mission — a gold SECTION, not a box-in-box: gold divider + label, content in panel flow */
.rlm-d-sec.rlm-sec-gold {
  color: var(--rlm-gold); text-shadow: 0 0 12px rgba(245,197,66,0.4);
  border-top-color: rgba(245,197,66,0.32);
}
.rlm-m-lead { font-family: var(--font-sans); font-size: 12.5px; line-height: 1.7; color: #efe6cf; }
.rlm-m-cell { display: flex; gap: 14px; margin-top: 24px; align-items: flex-start; }
.rlm-m-ico { font-size: 14px; line-height: 1.2; flex-shrink: 0; width: 17px; text-align: center; }
.rlm-m-voice .rlm-m-ico { color: #5fc9d8; text-shadow: 0 0 10px rgba(95,201,216,0.5); }
.rlm-m-tree  .rlm-m-ico { color: #5fd8ae; text-shadow: 0 0 10px rgba(95,216,174,0.5); }
.rlm-m-t { font-family: var(--font-sans); font-size: 13.5px; font-weight: 700; color: #fff; }
.rlm-m-s { font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .05em; line-height: 1.7; color: var(--rlm-dim); margin-top: 6px; }
.rlm-m-link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 12px;
  font-family: var(--font-mono); font-size: 9px; font-weight: 700; letter-spacing: .14em;
  color: var(--rlm-gold); text-decoration: none;
  border: 1px solid rgba(245,197,66,0.45); border-radius: 8px; padding: 7px 11px;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.rlm-m-link:hover {
  background: linear-gradient(180deg, var(--rlm-gold), var(--rlm-gold-deep));
  color: #2a1c04; border-color: var(--rlm-gold); box-shadow: 0 0 16px rgba(245,197,66,0.4);
}
.rlm-m-drop { font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; color: rgba(245,197,66,0.78); margin-top: 26px; }

.rlm-std-note {
  margin-top: 34px; font-family: var(--font-sans); font-size: 12.5px; line-height: 1.75; color: #e9eff8;
  border-left: 2px solid rgba(233,239,248,0.6); padding: 4px 0 4px 14px;
}

.rlm-d-links { display: flex; gap: 9px; flex-wrap: wrap; }
.rlm-d-links a {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .14em;
  color: var(--rlm-blue-soft); text-decoration: none;
  border: 1px solid rgba(120,170,230,0.34); border-radius: 8px; padding: 8px 12px;
  transition: background .15s, color .15s, border-color .15s, box-shadow .15s;
}
.rlm-d-links a:hover { background: var(--rlm-blue); border-color: var(--rlm-blue); color: #0a1322; box-shadow: 0 0 16px rgba(24,176,245,0.4); }

/* ── claim modal — reskinned to the rebuild spec (glass panel, mono fields, gold confirm) ── */
.rlm-body .claim-modal-overlay {
  background: rgba(4, 7, 13, 0.6);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.rlm-body .claim-modal-inner {
  background: linear-gradient(180deg, rgba(11,18,34,0.97), rgba(6,10,20,0.98));
  border: 1px solid rgba(120,170,230,0.26); border-radius: 16px;
  -webkit-backdrop-filter: blur(22px) saturate(1.15); backdrop-filter: blur(22px) saturate(1.15);
  box-shadow: 0 24px 70px rgba(0,0,0,0.6), 0 0 40px rgba(24,176,245,0.08);
  padding: 30px 32px;
}
.rlm-body .claim-modal-inner::before { display: none; }
.rlm-body .claim-close { color: rgba(170,195,230,0.55); font-size: 17px; }
.rlm-body .claim-close:hover { color: #fff; }
.rlm-body .claim-title {
  font-family: var(--font-pixel); font-size: 11px; letter-spacing: .1em;
  color: var(--rlm-text); text-shadow: 0 0 14px rgba(24,176,245,0.3);
}
.rlm-body .claim-desc { font-family: var(--font-sans); font-size: 12.5px; line-height: 1.6; color: #c9d6ea; }
.rlm-body .claim-label {
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .18em; color: rgba(143,163,192,0.75);
}
.rlm-body .claim-input {
  font-family: var(--font-mono); font-size: 12px; color: var(--rlm-text);
  background: rgba(8, 14, 28, 0.6); border: 1px solid rgba(120,170,230,0.24); border-radius: 10px;
  padding: 11px 13px;
  transition: border-color .2s, box-shadow .2s;
}
.rlm-body .claim-input:focus { outline: none; border-color: rgba(24,176,245,0.6); box-shadow: 0 0 0 3px rgba(24,176,245,0.12); }
.rlm-body .claim-confirm-btn {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  padding: 13px 18px; border: 2px solid #6e4a13; border-radius: 0; cursor: pointer;
  background: linear-gradient(180deg, #d49636, #b07a1e); color: #fff5e6;
  font-family: var(--font-pixel); font-size: 8px; letter-spacing: .07em;
  box-shadow: 0 4px 0 #6e4a13, inset 0 2px 0 rgba(255,255,255,0.22);
  transition: transform .12s, box-shadow .12s;
  clip-path: polygon(0 4px,4px 4px,4px 0,calc(100% - 4px) 0,calc(100% - 4px) 4px,100% 4px,100% calc(100% - 4px),calc(100% - 4px) calc(100% - 4px),calc(100% - 4px) 100%,4px 100%,4px calc(100% - 4px),0 calc(100% - 4px));
}
.rlm-body .claim-confirm-btn:hover { transform: translateY(2px); box-shadow: 0 2px 0 #6e4a13, inset 0 2px 0 rgba(255,255,255,0.22); }
.rlm-body .claim-confirm-btn:active { transform: translateY(4px); box-shadow: 0 0 0 #6e4a13, inset 0 2px 0 rgba(255,255,255,0.18); }
.rlm-body .claim-note { font-family: var(--font-mono); font-size: 9px; letter-spacing: .04em; line-height: 1.7; color: rgba(143,163,192,0.6); }
.rlm-body .claim-error { font-family: var(--font-mono); font-size: 10px; }

/* ── awaiting state — a beacon listening for the first cast ── */
#rlm-await { padding: 46px 0 30px; text-align: center; }
.rlm-await-scope {
  position: relative; width: 240px; height: 240px; margin: 0 auto 30px;
}
.rlm-await-ring {
  position: absolute; inset: 0; border-radius: 50%;
  border: 1px solid rgba(127,195,255,0.5);
  opacity: 0; transform: scale(0.24);
  animation: rlmAwaitPulse 4.2s cubic-bezier(.2,.6,.36,1) infinite;
}
.rlm-await-ring.r2 { animation-delay: 1.4s; }
.rlm-await-ring.r3 { animation-delay: 2.8s; }
@keyframes rlmAwaitPulse {
  0%   { opacity: 0;   transform: scale(0.24); }
  12%  { opacity: .85; }
  100% { opacity: 0;   transform: scale(1); }
}
.rlm-await-orbit {
  position: absolute; inset: 34px; border-radius: 50%;
  border: 1px dashed rgba(120,170,230,0.18);
  animation: rlmAwaitSpin 14s linear infinite;
}
.rlm-await-sat {
  position: absolute; top: -3px; left: 50%; margin-left: -3px;
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--rlm-blue);
  box-shadow: 0 0 10px rgba(24,176,245,0.9), 0 0 22px rgba(24,176,245,0.45);
}
@keyframes rlmAwaitSpin { to { transform: rotate(360deg); } }
.rlm-await-star {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-size: 34px; color: var(--rlm-gold);
  text-shadow: 0 0 18px rgba(245,197,66,0.75), 0 0 44px rgba(245,197,66,0.35);
  animation: rlmAwaitBreathe 3.2s ease-in-out infinite;
}
@keyframes rlmAwaitBreathe {
  0%, 100% { transform: translate(-50%, -50%) scale(1);    text-shadow: 0 0 18px rgba(245,197,66,0.75), 0 0 44px rgba(245,197,66,0.35); }
  50%      { transform: translate(-50%, -50%) scale(1.14); text-shadow: 0 0 26px rgba(245,197,66,0.95), 0 0 60px rgba(245,197,66,0.5); }
}
.rlm-await-title {
  font-family: var(--font-pixel); font-size: 11px; letter-spacing: .12em;
  color: var(--rlm-gold); text-shadow: 0 0 16px rgba(245,197,66,0.4);
  margin-bottom: 12px;
}
.rlm-await-sub {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em;
  color: var(--rlm-dim); max-width: 480px; margin: 0 auto; line-height: 1.8;
}
@media (prefers-reduced-motion: reduce) {
  .rlm-await-ring, .rlm-await-orbit, .rlm-await-star { animation: none; }
  .rlm-await-ring { opacity: .3; transform: scale(0.7); }
}

/* ════════════════════════════════════════════════════════════════════════════
   SKY MODE — the immersive default. Stars hang in open space (first received
   = nearest), golden-angle spread with per-load jitter; clicking sails the
   star to the front before the detail opens. Grid mode stays one icon away.
   ════════════════════════════════════════════════════════════════════════════ */

/* mini status + view toggles — the quiet top-left corner */
#rlm-topleft { position: fixed; top: 23px; left: 22px; z-index: 419; display: flex; align-items: center; }
/* ── merged identity pill — ✦ N [navistars] · NAME'S REALM ──
   One quiet pill: count + (hover-expanding) label + the sky's signature.
   Hover the name → a pen appears; click → in-place underline input
   (Enter/blur saves, Esc cancels). Still, small, precise. */
#rlm-id {
  display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 11px;
  border-radius: 999px; background: rgba(12,20,38,0.38); border: 1px solid rgba(120,170,230,0.16);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 3px 12px rgba(0,0,0,0.25);
}
.rlm-id-star { color: var(--rlm-gold); font-size: 10px; text-shadow: 0 0 10px rgba(245,197,66,0.5); }
#rlm-st-n { font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: .04em; color: #fff; }
/* the label slides out on hover — N becomes "N NAVISTARS" */
.rlm-id-lbl {
  max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; margin: 0;
  font-family: var(--font-mono); font-size: 7.5px; letter-spacing: .18em;
  text-transform: uppercase; color: var(--rlm-dim);
  transition: max-width .35s ease, opacity .25s ease;
}
#rlm-id:hover .rlm-id-lbl { max-width: 90px; opacity: 1; }
.rlm-id-sep { width: 1px; height: 12px; background: rgba(120,170,230,0.3); flex-shrink: 0; }
.rlm-id-name {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 600; letter-spacing: .1em;
  color: rgba(245,216,140,0.7); text-transform: uppercase; line-height: 1;
  transition: color .2s ease;
}
.rlm-id-name:hover { color: #f5d88c; }
.rlm-name-edit { font-size: 12px; line-height: 1; opacity: 0; transition: opacity .2s ease; color: rgba(245,216,140,0.75); }
.rlm-id-name:hover .rlm-name-edit { opacity: .9; }
/* unnamed — the WHOLE pill glows gold (a clear "name yourself" nudge), the name
   text breathes with it; once a name is set, .rlm-unnamed drops → back to normal */
#rlm-id.rlm-unnamed { border-color: rgba(245,197,66,0.5); animation: rlmUnnamedGlow 3s ease-in-out infinite; }
#rlm-id.rlm-unnamed .rlm-id-name { color: rgba(245,197,66,0.65); animation: rlmNameAsk 3s ease-in-out infinite; }
#rlm-id.rlm-unnamed .rlm-name-edit { opacity: .8; }
@keyframes rlmNameAsk { 0%, 100% { opacity: .6; } 50% { opacity: 1; } }
@keyframes rlmUnnamedGlow {
  0%, 100% { box-shadow: 0 3px 12px rgba(0,0,0,0.25), 0 0 0 1px rgba(245,197,66,0.15); }
  50%      { box-shadow: 0 3px 12px rgba(0,0,0,0.25), 0 0 18px 1px rgba(245,197,66,0.5); }
}
@media (prefers-reduced-motion: reduce) { #rlm-id.rlm-unnamed, #rlm-id.rlm-unnamed .rlm-id-name { animation: none; } }
/* the confirm ✓ that appears beside the name input while editing */
.rlm-name-ok {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; padding: 0; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  background: rgba(245,197,66,0.12); border: 1px solid rgba(245,197,66,0.5); color: #f5c542; font-size: 11px;
  transition: background .15s ease, border-color .15s ease;
}
.rlm-name-ok:hover { background: rgba(245,197,66,0.22); border-color: rgba(245,197,66,0.85); }
.rlm-name-ok[hidden] { display: none; }
#rlm-name-input {
  width: 120px; background: none; border: none; outline: none;
  border-bottom: 1px solid rgba(245,197,66,0.5); padding: 1px 2px 3px;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  color: var(--rlm-text);
}
#rlm-name-input::placeholder { color: rgba(245,216,140,0.35); }
/* faint functional hint below the pill — bare ghost text, no box; it just
   names what the pill is (count = NaviStars received; the name edits in place).
   Sits above sky/grid content (z) so nothing covers it; fades in only on hover. */
.rlm-id-tip {
  position: absolute; top: calc(100% + 6px); left: 4px; z-index: 5;
  white-space: nowrap; pointer-events: none;
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .05em;
  color: rgba(200,216,240,0.42); text-shadow: 0 1px 5px rgba(0,0,0,0.75);
  opacity: 0; transform: translateY(-3px);
  transition: opacity .25s ease, transform .25s ease;
}
#rlm-id:hover ~ .rlm-id-tip { opacity: 1; transform: translateY(0); }
/* while renaming, the prompt is redundant — hold it back */
#rlm-topleft:has(#rlm-name-input:not([hidden])) .rlm-id-tip { opacity: 0 !important; }
/* view toggles — centered, on the same line as the corner pills (centers at y≈38) */
#rlm-modes {
  position: fixed; top: 23px; left: 50%; transform: translateX(-50%); z-index: 421;
  display: inline-flex; gap: 5px;
}
body.ncp-nav-open #rlm-modes,
body.rlm-detail-open #rlm-modes { opacity: 0; pointer-events: none; transition: opacity .25s ease; }
#rlm-modes button {
  width: 30px; height: 30px; border-radius: 999px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(12,20,38,0.38); border: 1px solid rgba(120,170,230,0.16);
  color: var(--rlm-dim); font-size: 13px; line-height: 1; cursor: pointer;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: color .2s, border-color .2s, background .2s, box-shadow .2s;
}
#rlm-modes button:hover { color: #dce8f7; border-color: rgba(130,185,255,0.45); }
#rlm-modes button.active {
  color: #0a1322; background: var(--rlm-blue); border-color: var(--rlm-blue);
  box-shadow: 0 0 10px rgba(24,176,245,0.32);
}

/* mode visibility */
.rlm-mode-sky #rlm-controls,
.rlm-mode-sky #rlm-stagewrap,
.rlm-mode-sky #wallet-empty-state { display: none !important; }
.rlm-mode-grid #rlm-skywrap { display: none !important; }
/* the grid scroller is vertical-only. #wallet-view sets overflow-y:auto, which
   silently promotes overflow-x to `auto` too — that phantom horizontal axis is
   what lets the page drift left/right on touch AND what makes a drag started on
   a card stall (iOS can't tell if you mean to scroll x or y). Clip x dead. */
.rlm-mode-grid#wallet-view, .rlm-mode-grid #wallet-view { overflow-x: hidden; overscroll-behavior: contain; }
/* grid: the whole browse block starts a breath below the fixed top pills,
   and the cards keep their own distance from the search/filter row */
.rlm-mode-grid #rlm-controls { margin-top: 44px; }
.rlm-mode-grid #rlm-stagewrap { margin-top: 18px; }

/* the sky viewport — full bleed, one screen tall */
#rlm-skywrap {
  align-self: stretch; max-width: none !important;
  margin: -64px -32px 0; height: 100vh; min-height: 540px;
  position: relative; overflow: hidden; flex-shrink: 0;
  perspective: 1400px;
}
#rlm-sky {
  position: absolute; inset: 0;
  transform-style: preserve-3d; will-change: transform;
  pointer-events: none;                 /* same Chrome 3D hit fix as the grid */
}
#rlm-sky .dc-card, #rlm-sky .rlm-skydot { pointer-events: auto; }

.rlm-star {
  position: absolute; width: 230px;
  transform: translate(-50%, -50%) translateZ(var(--sz, 0px));
  transform-style: preserve-3d;
}
.rlm-skydot {
  position: absolute; width: 9px; height: 9px; border-radius: 50%;
  border: none; padding: 0; cursor: pointer;
  transform: translate(-50%, -50%) translateZ(var(--sz, 0px));
  background: #cfe2ff;
  box-shadow: 0 0 10px rgba(160,200,255,0.9), 0 0 26px rgba(120,180,255,0.5);
}
.rlm-skydot.rlm-dot-c {
  background: var(--rlm-gold);
  box-shadow: 0 0 10px rgba(245,197,66,0.9), 0 0 26px rgba(245,197,66,0.5);
}


/* the corner yields to the back button while a detail is open */
#rlm-topleft { transition: opacity .25s ease; }
/* nav drawer open: the pill floats ABOVE the backdrop (z 419 > 405) — without
   this it keeps swallowing taps, so closing the menu near the corner starts a
   rename instead. Hide it like the claim pill. */
body.ncp-nav-open #rlm-topleft,
body.rlm-detail-open #rlm-topleft { opacity: 0; pointer-events: none; transition: opacity .25s ease; }
/* the star detail is a focused overlay — occlude the airwaves seats (the three
   props + Navi) and the weather orb so nothing floats over the opened record */
body.rlm-detail-open #plaza-entry,
body.rlm-detail-open #plz-chest,
body.rlm-detail-open #plz-station,
body.rlm-detail-open #rn-navi-dock,
body.rlm-detail-open #sky-orb { opacity: 0 !important; pointer-events: none !important; transition: opacity .25s ease; }

/* hover → the status pill says the whole sentence */

/* grid view — smaller cards (the functional, filterable view) */
.rlm-body #nft-grid { grid-template-columns: repeat(auto-fill, minmax(158px, 182px)); gap: 18px; }
#nft-grid .dc-content { padding: 12px; }
#nft-grid .dc-title { font-size: 8.5px; margin-bottom: 5px; }
#nft-grid .dc-sub { font-size: 7px; }
#nft-grid .dc-desc { font-size: 10px; margin-top: 4px; }
#nft-grid .dc-badge { font-size: 8px; padding: 4px 7px; top: 10px; left: 10px; }


/* grid + controls stretch edge to edge (the 1180 cap stays for the detail/footer) */
.rlm-body #wallet-view > #rlm-stagewrap,
.rlm-body #wallet-view > #rlm-controls { max-width: none; align-self: stretch; }
#rlm-controls { justify-content: flex-start; }
#rlm-controls .rlm-search-wrap { margin-right: auto; }

/* sky mode toggle — the chosen sky is GOLD; grid stays blue */
#rlm-modes #rlm-mode-sky.active {
  color: #2a1c04; background: linear-gradient(180deg, var(--rlm-gold), var(--rlm-gold-deep));
  border-color: var(--rlm-gold); box-shadow: 0 0 10px rgba(245,197,66,0.35);
}

/* claim pill — smaller and lighter, matching the top-left status */
#rlm-claim-pill .cc-claim-btn {
  height: 28px; padding: 0 10px;
  font-size: 8.5px; font-weight: 400; letter-spacing: .12em;
}
#rlm-claim-pill .rlm-cp-ico { font-size: 9px; }
#rlm-claim-pill .rlm-cp-sep { height: 10px; margin: 0 8px; }
#rlm-claim-pill #cc-addr-chip { height: 28px; padding: 0 11px; font-size: 9.5px; }

/* ── sky guide — a little gold mouse, center field; gone on first drag/scroll ── */
#rlm-skyhint {
  position: absolute; left: 50%; top: 54%; z-index: 6;
  transform: translate(-50%, -50%);
  pointer-events: none; opacity: .85;
  transition: opacity .4s ease;
}
#rlm-skyhint.rlm-sh-out { opacity: 0; }
.rlm-sh-mouse {
  display: block; width: 26px; height: 40px;
  border: 2px solid var(--rlm-gold); border-radius: 13px;
  box-shadow: 0 0 16px rgba(245,197,66,0.3), inset 0 0 8px rgba(245,197,66,0.12);
  position: relative;
}
.rlm-sh-wheel {
  position: absolute; left: 50%; top: 7px; width: 4px; height: 8px;
  margin-left: -2px; border-radius: 2px;
  background: var(--rlm-gold);
  box-shadow: 0 0 8px rgba(245,197,66,0.7);
  animation: rlmWheel 1.7s ease-in-out infinite;
}
@keyframes rlmWheel {
  0%, 100% { top: 7px; opacity: 1; }
  55%      { top: 19px; opacity: .55; }
}
@media (prefers-reduced-motion: reduce) { .rlm-sh-wheel { animation: none; } }

/* drag-to-pan cursor */
#rlm-skywrap { cursor: grab; user-select: none; touch-action: none; }
#rlm-skywrap.rlm-dragging { cursor: grabbing; }
#rlm-skywrap.rlm-dragging .dc-card { cursor: grabbing; }

/* status hover — the sentence floats ABOVE in quiet gold; nothing shifts */

/* cards never select text — a stray selection after the detail swallowed the wheel */
.dc-card, .dc-card * { -webkit-user-select: none; user-select: none; }

/* ── sky mode = exactly one screen, no page scroll (immersive) ──
   grid mode keeps its normal vertical scroll through the cards. */
.rlm-mode-sky#wallet-view, .rlm-mode-sky #wallet-view { overflow: hidden; }
#wallet-view.rlm-mode-sky { overflow: hidden; padding-bottom: 0; overscroll-behavior: none; }
.rlm-mode-sky .rlm-footer { display: none; }   /* footer lives in grid mode */

/* sky-mode invite — centered at the very bottom. A faint, un-clickable question
   above the actual link; the link reads clearly but stays quiet (grid keeps the
   full footer; nav/detail layers take over). */
#rlm-sky-make { display: none; }
.rlm-mode-sky #rlm-sky-make {
  display: flex; flex-direction: column; align-items: center; gap: 3px; width: max-content;
  position: fixed; left: 50%; bottom: 15px; transform: translateX(-50%); z-index: 418;
  pointer-events: none;   /* only the link re-enables clicks */
  transition: opacity .3s ease;
}
.rlm-skm-q {
  font-family: var(--font-mono); font-size: 8.5px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(200,216,240,0.20);
}
.rlm-skm-link {
  display: inline-flex; align-items: center; gap: 6px; pointer-events: auto;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(210,224,245,0.52); text-decoration: none; white-space: nowrap;
  padding: 4px 10px; transition: color .3s ease;
}
.rlm-skm-link:hover { color: rgba(245,216,140,0.95); }
.rlm-skm-arr { transition: transform .3s ease; }
.rlm-skm-link:hover .rlm-skm-arr { transform: translateX(4px); }
body.ncp-nav-open #rlm-sky-make,
body.rlm-detail-open #rlm-sky-make { opacity: 0; pointer-events: none; }

/* (the touch ⌖ recenter pill was retired with single-finger pan — the phone
   sky is pinch-only now, and a pinch walks back out by itself) */

/* ════════════════════════════════════════════════════════════════════════════
   NEW-ARRIVAL glow + toast · EMPTY SKY (glitch text + sparse 3D points)
   ════════════════════════════════════════════════════════════════════════════ */

/* the newest star (sky front / grid top-left) breathes a gold halo */
.dc-card.rlm-new { animation: rlmNewPulse 2.2s ease-in-out infinite; border-radius: 16px; }
@keyframes rlmNewPulse {
  0%, 100% { box-shadow: 0 10px 24px rgba(0,0,0,0.38), 0 0 0 1px rgba(245,197,66,0.55), 0 0 22px rgba(245,197,66,0.30); }
  50%      { box-shadow: 0 12px 30px rgba(0,0,0,0.42), 0 0 0 2px rgba(245,197,66,0.85), 0 0 40px rgba(245,197,66,0.55); }
}
.dc-card.rlm-new::after {
  content: 'NEW'; position: absolute; top: 11px; right: 11px; z-index: 42;
  font-family: var(--font-pixel); font-size: 6.5px; letter-spacing: .1em; color: #2a1c04;
  background: linear-gradient(180deg, var(--rlm-gold), var(--rlm-gold-deep));
  padding: 4px 6px; border-radius: 5px; box-shadow: 0 0 12px rgba(245,197,66,0.6);
}
@media (prefers-reduced-motion: reduce) { .dc-card.rlm-new { animation: none; } }

/* new-arrival toast — top-center, just under the mode toggles */
#rlm-newtoast {
  position: fixed; top: 64px; left: 50%; transform: translateX(-50%) translateY(-14px);
  z-index: 430; display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 18px; border-radius: 999px; cursor: pointer;
  background: linear-gradient(180deg, rgba(34,27,9,0.72), rgba(20,16,6,0.72));
  border: 1px solid rgba(245,197,66,0.40);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: 0 8px 26px rgba(0,0,0,0.4), inset 0 1px 0 rgba(245,197,66,0.18), 0 0 18px rgba(245,197,66,0.16);
  opacity: 0; pointer-events: none;
  transition: opacity .4s ease, transform .4s cubic-bezier(.3,.8,.3,1);
}
#rlm-newtoast.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.rlm-nt-star {
  color: var(--rlm-gold); font-size: 12px; line-height: 1; flex-shrink: 0;
  text-shadow: 0 0 10px rgba(245,197,66,0.7); animation: rlmNtGlow 2.6s ease-in-out infinite;
}
@keyframes rlmNtGlow { 0%,100% { text-shadow: 0 0 8px rgba(245,197,66,0.6); } 50% { text-shadow: 0 0 14px rgba(245,197,66,0.95); } }
.rlm-nt-txt {
  font-family: var(--font-sans); font-size: 12.5px; font-weight: 600;
  letter-spacing: .01em; color: #fbf1d8; white-space: nowrap;
}

/* ── empty sky — sparse faint 3D points + a floating glitch title ── */
#rlm-await {
  position: fixed; inset: 0; display: none; z-index: 105;
  flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 24px;
}
.rlm-await-stars { position: absolute; inset: 0; pointer-events: none; }
.rlm-aw-dot {
  position: absolute; border-radius: 50%; background: #cfe6ff;
  box-shadow: 0 0 6px rgba(160,210,255,0.7);
  animation: rlmAwTwinkle 5s ease-in-out infinite;
}
@keyframes rlmAwTwinkle { 0%,100% { opacity: inherit; } 50% { opacity: .08; } }
.rlm-await-core { position: relative; z-index: 2; text-align: center; padding: 0 24px; }
.rlm-await-sub {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em;
  color: var(--rlm-dim); max-width: 460px; margin: 18px auto 0; line-height: 1.8;
}

/* glitch title — gold, homepage-style RGB-split jitter, not too large */
.rlm-await-glitch {
  position: relative; display: inline-block;
  font-family: var(--font-pixel); font-size: 17px; letter-spacing: .06em;
  color: var(--rlm-gold); text-shadow: 0 0 18px rgba(245,197,66,0.45);
  animation: rlmFloat 6s ease-in-out infinite;
}
.rlm-await-glitch::before, .rlm-await-glitch::after {
  content: attr(data-text); position: absolute; left: 0; top: 0; width: 100%;
  opacity: 0.55; pointer-events: none;
}
.rlm-await-glitch::before { color: #5fd8ae; animation: rlmGlitchA 2.6s steps(2,end) infinite; }
.rlm-await-glitch::after  { color: #18B0F5; animation: rlmGlitchB 3.1s steps(2,end) infinite; }
@keyframes rlmFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes rlmGlitchA {
  0%,92%,100% { transform: translate(0,0); opacity: 0; clip-path: none; }
  93% { transform: translate(-2px,-1px); opacity: .55; clip-path: inset(0 0 62% 0); }
  97% { transform: translate(2px,1px);  opacity: .55; clip-path: inset(58% 0 0 0); }
}
@keyframes rlmGlitchB {
  0%,90%,100% { transform: translate(0,0); opacity: 0; clip-path: none; }
  91% { transform: translate(2px,1px);  opacity: .5; clip-path: inset(0 0 55% 0); }
  95% { transform: translate(-2px,-1px); opacity: .5; clip-path: inset(50% 0 0 0); }
}
@media (prefers-reduced-motion: reduce) {
  .rlm-await-glitch, .rlm-aw-dot { animation: none; }
  .rlm-await-glitch::before, .rlm-await-glitch::after { display: none; }
}

/* ════════════════════════════════════════════════════════════════════════════
   MOBILE / TOUCH — additive only; desktop rules above stay untouched.
   ════════════════════════════════════════════════════════════════════════════ */

/* iOS URL-bar-safe viewport height for the sky */
@supports (height: 100dvh) {
  #rlm-skywrap { height: 100dvh; }
}

@media (max-width: 640px) {
  /* iOS zooms the viewport on focus of any sub-16px field — floor every
     text-entry control at 16px (grid search · claim wallet address) */
  #rlm-search, .claim-input, input[type="text"], #nfs-line, textarea { font-size: 16px !important; }

  /* the top row: compact status (✦ N) · centered toggles · compact claim (⬡ →) */
  .rlm-id-lbl { display: none; }
  #rlm-id { padding: 0 10px; gap: 5px; }
  .rlm-id-name { font-size: 6.5px; }
  #rlm-claim-pill { right: 64px; }
  #rlm-claim-pill .rlm-cp-label, #rlm-claim-pill .rlm-cp-sep { display: none; }
  #rlm-claim-pill .rlm-cp-arr { margin-left: 5px; }
  #rlm-claim-pill #cc-addr-chip { font-size: 8.5px; padding: 0 9px; }

  /* sky cards sized for small screens — small enough that the field breathes */
  .rlm-star { width: 142px; }

  /* phones: a card shows only its station title (already bottom-anchored).
     host/date + blurb crowd a small screen, so drop them in BOTH sky and grid —
     and the ··· hover cue with them (nothing to reveal here). */
  .dc-sub, .dc-desc, .dc-static .dc-content::after { display: none; }

  /* true full-bleed sky. The base rule pairs width:100% (from the wallet-view
     child rule) with -32px side margins, which only SHIFTS the box left — the
     right edge loses 64px and the whole field reads off-centre on a phone.
     Restore the two margins into the width so the sky spans edge to edge.
     (selector must outrank `.rlm-body #wallet-view > *`) */
  .rlm-body #wallet-view > #rlm-skywrap { width: calc(100% + 64px); }

  /* grid: two comfortable columns */
  .rlm-body #nft-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }

  /* controls wrap cleanly */
  #rlm-controls { gap: 7px; }
  .rlm-search-wrap { width: 100%; }
  .rlm-search-wrap:focus-within { width: 100%; }

  /* detail: tighter padding, full-width frame */
  .rlm-body #action-detail-view { padding: 18px 16px 90px; }
  .rlm-d-right { padding: 14px 18px 22px; }
  .rlm-d-name { font-size: 14px; }

  /* footer stacks */
  .rlm-footer { flex-direction: column; align-items: flex-start; gap: 18px; }

  /* identity card hugs the corner closer on phones */
  .nfs-card { bottom: 60px; padding: 6px 16px; }
  .nfs-stats { gap: 16px; }

  /* new-arrival toast fits the narrow row */
  #rlm-newtoast { top: 60px; max-width: calc(100vw - 24px); }
  .rlm-nt-txt { font-size: 11px; }

  /* empty sky title scales down */
  .rlm-await-glitch { font-size: 12px; }
}

/* touch devices: grid mode must pan vertically — be explicit for iOS Safari
   (the sky's touch-action:none lives on #rlm-skywrap, hidden in grid, but
   stubborn devices still need the scroller and its cards to declare pan-y) */
@media (pointer: coarse) {
  #wallet-view.rlm-mode-grid,
  #wallet-view.rlm-mode-grid #rlm-stagewrap,
  #wallet-view.rlm-mode-grid #nft-grid,
  #wallet-view.rlm-mode-grid .dc-card,
  /* a touch that starts on any inner layer of a card must still pan-y —
     otherwise the gesture stalls before the browser commits to a scroll */
  #wallet-view.rlm-mode-grid .dc-card * { touch-action: pan-y; }
  #wallet-view.rlm-mode-grid, #action-detail-view { -webkit-overflow-scrolling: touch; }
  /* tilt is disabled on touch (DepthCard bails early), so the permanent
     will-change layer just burns memory and janks the scroll — drop it */
  .dc-inner { will-change: auto; }
  /* touch: tap-to-edit — no hover here, so the ✎ pen stays visible as the cue,
     the name tile stays tappable, and the rename input floors at 16px so iOS
     doesn't zoom the viewport on focus. */
  .rlm-name-edit { opacity: .85; }
  .rlm-id-tip { display: none; }
  #rlm-name-input { font-size: 16px; }
}

/* touch devices: the sky is pinch-only, so the hint is two fingertips
   breathing apart and together along a diagonal — "pinch to travel" */
@media (pointer: coarse) {
  .rlm-sh-mouse { border: none; border-radius: 0; width: 46px; height: 46px; }
  .rlm-sh-wheel { display: none; }
  .rlm-sh-mouse::before, .rlm-sh-mouse::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: 11px; height: 11px; margin: -5.5px 0 0 -5.5px; border-radius: 50%;
    background: rgba(245,216,140,0.92);
    box-shadow: 0 0 12px rgba(245,197,66,0.65);
  }
  .rlm-sh-mouse::before { animation: rlmPinchA 2s ease-in-out infinite; }
  .rlm-sh-mouse::after  { animation: rlmPinchB 2s ease-in-out infinite; }
  @keyframes rlmPinchA {
    0%, 100% { transform: translate(-6px, -6px); opacity: .65; }
    50%      { transform: translate(-16px, -16px); opacity: 1; }
  }
  @keyframes rlmPinchB {
    0%, 100% { transform: translate(6px, 6px); opacity: .65; }
    50%      { transform: translate(16px, 16px); opacity: 1; }
  }
}

/* ── "light your star" — one playful line; the star itself is the button ── */
.nfs-light2 {
  display: inline-flex; align-items: center; gap: 10px;
  background: none; border: none; padding: 2px 0; cursor: pointer;
}
.nfs-l2-star {
  font-size: 19px; line-height: 1; color: rgba(245,197,66,0.55);
  text-shadow: 0 0 8px rgba(245,197,66,0.3);
  transition: color .25s ease, text-shadow .25s ease, transform .2s ease;
}
.nfs-light2:hover .nfs-l2-star {
  color: var(--rlm-gold);
  text-shadow: 0 0 14px rgba(245,197,66,0.9), 0 0 30px rgba(245,197,66,0.4);
  transform: scale(1.15) rotate(12deg);
}
.nfs-l2-txt {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--rlm-dim); transition: color .25s ease;
}
.nfs-light2:hover .nfs-l2-txt { color: #f5d88c; }
.nfs-light2.nfs-lit2 { cursor: default; }
.nfs-light2.nfs-lit2 .nfs-l2-star {
  color: #ffe9a8;
  text-shadow: 0 0 12px rgba(245,197,66,1), 0 0 28px rgba(245,197,66,0.55);
  animation: nfsBurst .9s cubic-bezier(.2,.9,.3,1.4);
}
.nfs-light2.nfs-lit2:hover .nfs-l2-star { transform: none; }
.nfs-light2.nfs-lit2 .nfs-l2-txt { color: rgba(245,216,140,0.85); }

/* longer kind label (STATION · C//) — slightly tighter so the strip stays calm */
.nfs-stat-cs i { letter-spacing: .1em; }
.rlm-chip.rlm-chip-c { letter-spacing: .09em; }

/* ═══════════════════════════════════════════════════════════════════════════
   REALM-NEW — one continuous screen: Navi + the waiting stars above,
   the shelf of kept stars below. Everything above this line is the carried-
   over base (detail view · identity layer · custody · drawer · nameplate);
   sky/grid-mode blocks above are dormant (their markup no longer exists).
   ═══════════════════════════════════════════════════════════════════════════ */

/* the home layer is one fixed screen — nothing scrolls, the shelf browses.
   The shelf is the only in-flow child, so justify-content:center floats it to
   the middle; Navi (top) and the invite (bottom) are positioned out of flow. */
.rn-body { overflow: hidden; }
.rn-body #wallet-view {
  position: fixed; inset: 0; z-index: 100;
  display: flex; flex-direction: column; align-items: stretch; justify-content: center;
  overflow: hidden; padding: 0;
}
.rn-body #wallet-view > * { max-width: none; width: auto; }

/* ── top-right cluster: custody pill + credits pill on one row ─────────────── */
.rn-body #rn-tr {
  position: fixed; top: 23px; right: 72px; z-index: 419;
  display: flex; align-items: center; gap: 10px;
}
.rn-body #rlm-claim-pill { position: static; top: auto; right: auto; }
body.ncp-nav-open #rn-tr { opacity: 0; pointer-events: none; }

/* credits pill wrapper — holds the faint hover tip beneath it */
.rn-cr-wrap { position: relative; display: inline-flex; }
.rn-cr-tip {
  position: absolute; top: calc(100% + 8px); right: 4px; white-space: nowrap;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .04em;
  color: rgba(205,221,242,0.4);
  opacity: 0; pointer-events: none; transform: translateY(-3px);
  transition: opacity .25s ease, transform .25s ease;
}
.rn-cr-wrap:hover .rn-cr-tip { opacity: 1; transform: none; }

/* the credits pill — Stations' plan-pill glass, without the plan */
#rn-cr {
  display: inline-flex; align-items: center; gap: 0; height: 30px; padding: 0 11px;
  background: rgba(12,20,38,0.38); border: 1px solid rgba(120,170,230,0.16); border-radius: 999px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  box-shadow: 0 3px 12px rgba(0,0,0,0.25);
  font-family: var(--font-mono); font-size: 11px; color: rgba(205,221,242,0.5);
  text-decoration: none; cursor: pointer;
  transition: border-color 0.25s ease, background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
}
#rn-cr b {
  font-family: var(--font-pixel); font-size: 9.5px; font-weight: 400;
  color: rgba(245,197,66,0.65); margin-left: 5px;
  transition: color 0.25s ease;
}
.rn-cr-sep {
  width: 0; height: 12px; background: rgba(120,170,230,0.3); margin: 0;
  transition: width 0.3s ease, margin 0.3s ease;
}
.rn-cr-lbl {
  max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap;
  font-size: 9px; letter-spacing: .12em; font-weight: 600; color: #e7eefb;
  transition: max-width 0.35s ease, opacity 0.25s ease;
}
#rn-cr:hover {
  background: rgba(16,28,52,0.8); border-color: rgba(245,197,66,0.5);
  color: rgba(205,221,242,0.9);
  box-shadow: 0 6px 20px rgba(0,0,0,0.4), 0 0 12px rgba(245,197,66,0.15);
}
#rn-cr:hover b { color: #f5c542; }
#rn-cr:hover .rn-cr-sep { width: 1px; margin: 0 9px; }
#rn-cr:hover .rn-cr-lbl { max-width: 130px; opacity: 1; }
/* the moment credits land — one warm pulse, no fireworks */
#rn-cr.rn-cr-hit { animation: rnCrHit 1s cubic-bezier(.3,.7,.3,1); }
#rn-cr.rn-cr-hit b { color: #f5c542; }
@keyframes rnCrHit {
  0% { box-shadow: 0 3px 12px rgba(0,0,0,0.25); border-color: rgba(120,170,230,0.16); }
  22% { box-shadow: 0 3px 12px rgba(0,0,0,0.25), 0 0 22px rgba(245,197,66,0.45); border-color: rgba(245,197,66,0.6); transform: scale(1.04); }
  100% { box-shadow: 0 3px 12px rgba(0,0,0,0.25); transform: scale(1); }
}

/* the nameplate count ticks up on each claim */
#rlm-id.rn-id-tick .rlm-id-star { animation: rnIdStar .9s cubic-bezier(.2,.9,.3,1.3); }
@keyframes rnIdStar {
  0% { transform: none; }
  30% { transform: scale(1.5) rotate(16deg); color: #ffe9a8; text-shadow: 0 0 12px rgba(245,197,66,.9); }
  100% { transform: none; }
}

/* ── Navi's dock — a small guide at top-center, out of flow so the shelf can
      center. A gold badge appears when stars wait; tapping her re-opens the
      hail. She stays blue at rest, eases gold while stars are pending. ─────── */
#rn-navi-dock {
  position: absolute; top: 14vh; left: 50%; transform: translateX(-50%); z-index: 2;
  background: none; border: none; padding: 6px; cursor: default;
  display: flex; align-items: center; justify-content: center;
}
#rn-navi-dock.rn-has-pending { cursor: pointer; }
#rn-navi {
  display: block; width: 72px; height: 72px; image-rendering: pixelated;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.35));
}
#rn-navi-badge {
  position: absolute; top: 2px; right: 2px;
  min-width: 18px; height: 18px; padding: 0 4px; box-sizing: border-box; border-radius: 999px;
  background: #f5c542; color: #14100a;
  font-family: var(--font-pixel); font-size: 8px; line-height: 18px; text-align: center;
  box-shadow: 0 0 12px rgba(245,197,66,0.65);
  animation: rnBadgePulse 2.4s ease-in-out infinite;
}
#rn-navi-badge[hidden] { display: none; }
@keyframes rnBadgePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.14); } }

/* ── the shelf head — caption + the expand-to-grid toggle ──────────────────── */
.rn-shelf-head {
  display: flex; align-items: center; justify-content: flex-start; gap: 13px;
  padding: 0 10vw 16px;
}
/* the ⊞ toggle — same glass pill as the original realm's view-mode buttons */
.rn-grid-toggle {
  flex: 0 0 auto;
  width: 30px; height: 30px; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(12,20,38,0.38); border: 1px solid rgba(120,170,230,0.16); border-radius: 999px;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--rlm-dim); font-size: 13px; line-height: 1;
  transition: color .2s, border-color .2s, background .2s, box-shadow .2s;
}
.rn-grid-toggle:hover { color: #f5c542; border-color: rgba(245,197,66,0.5); box-shadow: 0 0 12px rgba(245,197,66,0.18); }

/* ── THE SHELF ──────────────────────────────────────────────────────────────── */
#rn-shelfwrap {
  flex: 0 0 auto; position: relative;
  margin-top: 7vh;   /* the stage sits a little lower — Navi holds the upper-middle */
}
.rn-shelf-cap {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .3em;
  color: rgba(205,221,242,0.34);
  transition: opacity .4s ease;
}
#rn-shelf {
  position: relative; overflow: hidden;
  padding: 14px 0 10px;                 /* headroom for hover lift + landing glow */
  cursor: grab;
  touch-action: pan-y;                  /* the horizontal drag is ours */
  -webkit-user-select: none; user-select: none;
}
#rn-shelf.rn-sh-drag { cursor: grabbing; }
#rn-track {
  display: flex; align-items: flex-end; gap: 24px;
  padding: 0 10vw;
  width: max-content;
  will-change: transform;
}
#rn-shelf-empty {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  color: rgba(205,221,242,0.4);
  padding: 60px 0 66px 10vw;
}

/* one card — the station's face, its line of provenance below */
.rn-card {
  position: relative; flex: 0 0 auto;
  width: 206px;
  border-radius: 14px;
  cursor: pointer; outline: none;
  transition: transform .35s cubic-bezier(.3,.7,.3,1);
}
.rn-card:hover, .rn-card:focus-visible { transform: translateY(-6px); }
#rn-shelf.rn-sh-drag .rn-card { transition: none; }
.rn-card-cover {
  position: relative; height: 252px; border-radius: 14px; overflow: hidden;
  background: #0a1218;
  border: 1px solid rgba(150,190,225,0.14);
  /* soft + tight — the old 34px/0.42 shadows of adjacent cards merged into a
     visible dark band once the sky can be light (sky module) */
  box-shadow: 0 8px 18px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.05);
  transition: border-color .3s ease, box-shadow .3s ease;
}
.rn-card-cover img {
  position: absolute; top: 0; bottom: 0; left: -15%;
  width: 130%; height: 100%; object-fit: cover;
  will-change: transform;
  pointer-events: none;
}
/* .rn-cover-page and .rn-cover-live dressed the live-page-as-cover iframe.
   Cards carry images now (Joey 0804 — an iframe per card crashed phones), so
   both rules lost their element. */
/* the ink under the title — kept inside the cover so it clips with it.
   A taller, smoother ramp (transparent → deep at the very foot) so the title
   and its hover subtitle stay crisp even over bright covers. */
.rn-card-cover::after {
  content: ''; position: absolute; inset: 38% 0 0 0;
  background: linear-gradient(to top, rgba(4,8,13,0.94) 0%, rgba(4,8,13,0.62) 34%, rgba(4,8,13,0) 100%);
  pointer-events: none;
}
.rn-card:hover .rn-card-cover, .rn-card:focus-visible .rn-card-cover {
  border-color: rgba(180,215,255,0.35);
  box-shadow: 0 20px 44px rgba(0,0,0,0.5), 0 0 22px rgba(140,190,255,0.1), inset 0 1px 0 rgba(255,255,255,0.06);
}
.rn-card.rn-k-c:hover .rn-card-cover, .rn-card.rn-k-c:focus-visible .rn-card-cover {
  border-color: rgba(245,197,66,0.4);
  box-shadow: 0 20px 44px rgba(0,0,0,0.5), 0 0 22px rgba(245,197,66,0.12), inset 0 1px 0 rgba(255,255,255,0.06);
}
/* quieter than before: the seal states the fact, the cover stays the star */
.rn-card-badge {
  position: absolute; top: 9px; right: 9px; z-index: 2;
  font-family: var(--font-pixel); font-size: 7px; color: rgba(245,197,66,0.85);
  background: rgba(10,14,8,0.6); border: 1px solid rgba(245,197,66,0.32);
  padding: 4px 6px 3px; border-radius: 4px; letter-spacing: .05em;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.rn-card-meta { position: absolute; left: 14px; right: 14px; bottom: 12px; z-index: 2; pointer-events: none; }
.rn-card-t {
  font-family: var(--font-sans); font-weight: 700; font-size: 14px; line-height: 1.3;
  color: #eef4fb; text-shadow: 0 2px 10px rgba(0,0,0,0.6);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.rn-card-s {
  margin-top: 5px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .06em;
  color: rgba(205,221,242,0.6);
  opacity: 0; transform: translateY(3px);
  transition: opacity .3s ease, transform .3s ease;
}
.rn-card:hover .rn-card-s, .rn-card:focus-visible .rn-card-s { opacity: 1; transform: none; }

/* the ghost holds the front slot while the star is in flight */
.rn-card.rn-ghost { visibility: hidden; }
/* landing — the card settles with one ring of light that fades. It rides above
   its still-sliding neighbours: the new star takes the front, never dips under. */
.rn-card.rn-ghost, .rn-card.rn-land { z-index: 3; }
.rn-card.rn-land .rn-card-cover { animation: rnLand 1.3s cubic-bezier(.25,.8,.3,1) both; }
@keyframes rnLand {
  0% { box-shadow: 0 8px 18px rgba(0,0,0,0.22), 0 0 0 1px rgba(245,197,66,0.8), 0 0 34px rgba(245,197,66,0.5); }
  100% { box-shadow: 0 8px 18px rgba(0,0,0,0.22), 0 0 0 0 rgba(245,197,66,0), 0 0 0 rgba(245,197,66,0); }
}

/* ── the quiet invite at the very bottom (out of flow, so the shelf centers) ── */
#rn-make {
  position: absolute; left: 0; right: 0; bottom: 20px; z-index: 2;
  display: flex; align-items: baseline; justify-content: center; gap: 10px;
}
.rn-make-q {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
  color: rgba(205,221,242,0.3);
}
.rn-make-link {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .06em;
  color: rgba(205,221,242,0.5); text-decoration: none;
  border-bottom: 1px solid rgba(205,221,242,0.16);
  padding-bottom: 1px;
  transition: color .25s ease, border-color .25s ease;
}
.rn-make-link:hover { color: #f5d88c; border-color: rgba(245,197,66,0.5); }
.rn-make-arr { opacity: .6; }

/* ═══ RECEIVE — the claim layer ═══════════════════════════════════════════════
   RECEIVE is the immersive moment: the whole page behind BLURS (the scrim sits
   over #wallet-view — nothing is lifted out), and the claim card is CENTERED.
   Coins still fly to the credits pill, which is lifted crisp above the blur.
   z while claiming: scrim 1140 · card 1170 · pills 1210 · flight 1300 */
#rn-claim-scrim {
  position: fixed; inset: 0; z-index: 1140;
  background: rgba(3,7,12,0.62);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  opacity: 0; pointer-events: none;
  transition: opacity .4s ease;
}
body.rn-claiming #rn-claim-scrim { opacity: 1; pointer-events: auto; }
#rn-claim { position: fixed; inset: 0; z-index: 1170; pointer-events: none; }
#rn-claim .rn-cc { pointer-events: auto; }
/* the pills stay readable & crisp above the blur (coins land on the credits one) */
body.rn-claiming #rn-tr { z-index: 1210; }
body.rn-claiming #rlm-topleft { z-index: 1210; }
body.rn-claiming #rlm-claim-pill { opacity: 0; pointer-events: none; }   /* one thing at a time */
body.rn-claiming .ncp-nav-toggle { opacity: 0; pointer-events: none; }

#rn-cc-slot {
  position: fixed; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
}
.rn-cc {
  display: flex; flex-direction: column; align-items: center;
  opacity: 0; transform: translateY(14px) scale(0.965);
  transition: opacity .42s ease, transform .5s cubic-bezier(.25,.8,.3,1);
}
.rn-cc.rn-cc-in { opacity: 1; transform: none; }
/* kept — the whole thing bows out while the cover sails to the shelf */
.rn-cc.rn-cc-kept { opacity: 0; transform: translateY(6px) scale(0.97); transition-duration: .5s, .55s; }
.rn-cc.rn-cc-kept .rn-cc-card { visibility: hidden; }

.rn-cc-kick {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .28em;
  color: rgba(205,221,242,0.5);
  margin-bottom: 16px;
}
/* the card IS the star — the exact size/shape of a shelf card (206×252), so
   KEEP flies it to the shelf 1:1 with no stretch. Title + provenance laid on
   the image, no frame-in-frame. */
.rn-cc-card {
  position: relative; width: 206px; height: 252px;
  border-radius: 14px; overflow: hidden;      /* == .rn-card-cover, so the fly lands seamless */
  border: 1px solid rgba(150,190,225,0.28);
  box-shadow: 0 30px 70px rgba(0,0,0,0.55), inset 0 1px 0 rgba(255,255,255,0.06);
}
.rn-cc-card.rn-k-c { border-color: rgba(245,197,66,0.42); }
.rn-cc-cover-img { position: absolute; inset: 0; }
.rn-cc-cover-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.rn-cc-card::after {                 /* ink so the laid-on text stays legible */
  content: ''; position: absolute; inset: 44% 0 0 0;
  background: linear-gradient(to top, rgba(4,8,13,0.92) 14%, rgba(4,8,13,0) 100%);
  pointer-events: none;
}
.rn-cc-stamp {
  position: absolute; top: 10px; right: 10px; z-index: 2;
  font-family: var(--font-pixel); font-size: 8px; color: #f5c542;
  background: rgba(10,14,8,0.72); border: 1px solid rgba(245,197,66,0.5);
  padding: 5px 7px 4px; border-radius: 4px;
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.rn-cc-meta { position: absolute; left: 15px; right: 15px; bottom: 15px; z-index: 2; }
.rn-cc-title {
  font-family: var(--font-sans); font-weight: 700; font-size: 16px; line-height: 1.3;
  color: #eef4fb; text-shadow: 0 2px 12px rgba(0,0,0,0.65);
}
.rn-cc-from {
  margin-top: 7px;
  font-family: var(--font-mono); font-size: 8px; letter-spacing: .11em;
  color: rgba(245,216,140,0.9);
}
.rn-cc-card:not(.rn-k-c) .rn-cc-from { color: rgba(170,210,255,0.82); }

/* KEEP — the gold pixel button (Stations' Broadcast language) */
.rn-keep {
  margin-top: 18px;
  font-family: var(--font-pixel); font-size: 10px; letter-spacing: .04em;
  color: #14100a; background: #f5c542;
  border: none; border-radius: 8px;
  padding: 13px 22px 12px;
  cursor: pointer;
  box-shadow: 0 4px 0 #8a6a14, 0 10px 26px rgba(245,197,66,0.24);
  transition: transform .12s ease, box-shadow .12s ease, filter .2s ease;
}
.rn-keep:hover { filter: brightness(1.06); }
.rn-keep:active, .rn-keep.rn-keep-hit {
  transform: translateY(3px);
  box-shadow: 0 1px 0 #8a6a14, 0 5px 14px rgba(245,197,66,0.2);
}
.rn-keep:disabled { cursor: default; }
.rn-later {
  margin-top: 12px;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .1em;
  color: rgba(205,221,242,0.36);
  background: none; border: none; cursor: pointer;
  padding: 4px 8px;
  transition: color .25s ease;
}
.rn-later:hover { color: rgba(205,221,242,0.7); }

/* the star in flight — the cover sails from the claim card to the shelf */
.rn-fly {
  position: fixed; z-index: 1300; pointer-events: none;
  border-radius: 14px; overflow: hidden;
  border: 1px solid rgba(180,215,255,0.3);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 30px rgba(140,190,255,0.18);
  transform-origin: top left;
  transition: transform .64s cubic-bezier(.32,.72,.28,1), border-radius .64s ease;
  will-change: transform;
}
.rn-fly.rn-fly-c {
  border-color: rgba(245,197,66,0.45);
  box-shadow: 0 24px 60px rgba(0,0,0,0.55), 0 0 30px rgba(245,197,66,0.22);
}
.rn-fly img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* sparks — a restrained burst where the star lands */
.rn-spark {
  position: fixed; z-index: 1300; pointer-events: none;
  width: 4px; height: 4px; border-radius: 50%;
  background: #ffe9a8;
  box-shadow: 0 0 8px rgba(245,197,66,0.9);
  animation: rnSpark .9s cubic-bezier(.2,.7,.4,1) both;
}
.rn-spark-star {
  width: auto; height: auto; background: none; box-shadow: none; border-radius: 0;
  font-size: 11px; line-height: 1; color: #ffe9a8;
  text-shadow: 0 0 10px rgba(245,197,66,0.9);
}
.rn-spark-blue { background: #bfe0ff; box-shadow: 0 0 8px rgba(140,190,255,0.9); }
@keyframes rnSpark {
  0% { transform: translate(0,0) scale(0.6); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translate(var(--dx), var(--dy)) scale(1); opacity: 0; }
}
/* motes on their way to the pill — positioned by JS along an arc */
.rn-mote {
  position: fixed; left: 0; top: 0; z-index: 1300; pointer-events: none;
  font-size: 12px; line-height: 1; color: #ffe9a8;
  text-shadow: 0 0 10px rgba(245,197,66,0.9);
  will-change: transform, opacity;
}

/* ═══ THE NOTICE — a simple inline dialogue bubble under Navi ══════════════════
   Not a modal: it just sits on the page (top-center, tail pointing up at Navi)
   whenever stars wait, shown on its own, and opens RECEIVE on click. Terse —
   one line, no sender (you see who it's from once you open it). */
/* the notice wears the RPG dialogue-box dress: near-solid ink, a hard
   square gold frame (double edge: gold line + dark seam inside), and a
   stepped pixel tail instead of the rotated-square "beak". Breathing room
   from Navi: the machine at her side is taller now, the box sits below both. */
#rn-hail {
  /* 0828: 位置原本用 vh 估,窗口一矮就落到第一排星的脸上。改成贴着标签行的下沿——
     它本来就是这一行长出来的气泡(尾巴朝上指着 Navi),不该跟视口高度赛跑。 */
  position: absolute; top: calc(100% + 12px); left: 50%; transform: translateX(-50%); z-index: 3;
  display: inline-flex; align-items: center; gap: 14px;
  padding: 12px 18px; white-space: nowrap; cursor: pointer;
  background: rgba(10,16,24,0.88); border: 2px solid rgba(245,197,66,0.55); border-radius: 0;
  box-shadow: inset 0 0 0 2px rgba(8,12,20,0.95), 0 8px 22px rgba(0,0,0,0.4);
  animation: rnHailIn .45s ease both;
  transition: border-color .25s ease, transform .25s cubic-bezier(.3,.7,.3,1), box-shadow .25s ease;
}
#rn-hail[hidden] { display: none; }
/* the tail — a two-step pixel pyramid rising toward Navi */
#rn-hail::before {
  content: ''; position: absolute; top: -10px; left: 50%; margin-left: -3px;
  width: 6px; height: 5px; background: rgba(245,197,66,0.55);
  transition: background .25s ease;
}
#rn-hail::after {
  content: ''; position: absolute; top: -5px; left: 50%; margin-left: -7px;
  width: 14px; height: 5px; background: rgba(245,197,66,0.55);
  transition: background .25s ease;
}
#rn-hail:hover {
  border-color: rgba(245,197,66,0.9); transform: translateX(-50%) translateY(-2px);
  box-shadow: inset 0 0 0 2px rgba(8,12,20,0.95), 0 10px 26px rgba(0,0,0,0.46), 0 0 18px rgba(245,197,66,0.2);
}
#rn-hail:hover::before, #rn-hail:hover::after { background: rgba(245,197,66,0.9); }
@keyframes rnHailIn { from { opacity: 0; } to { opacity: 1; } }
#rn-hail-text {
  font-family: var(--font-pixel); font-size: 10px; letter-spacing: .05em;
  color: #f5d88c; text-shadow: 0 0 12px rgba(245,197,66,0.3);
}
.rn-hail-cue {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(205,221,242,0.5);
}
.rn-hail-arr { color: #f5c542; transition: transform .25s ease; }
#rn-hail:hover .rn-hail-arr { transform: translateX(3px); }

/* ═══ THE GRID (expanded view) ════════════════════════════════════════════════
   A full-screen scroll over the field; the chrome (pills, nameplate, drawer)
   stays. Controls are deliberately understated — search + two icon sort
   buttons — matching the original realm's quiet browse bar. */
body.rn-grid-open #rn-navi-dock,
body.rn-grid-open #rn-hail,
body.rn-grid-open #rn-shelfwrap,
body.rn-grid-open #rn-make,
body.rn-grid-open #rn-class,
body.rn-grid-open #rn-tuned { opacity: 0; pointer-events: none; }
/* the hail's entrance animation has `both` fill, which would pin opacity to 1
   over the rule above — cancel it while the grid is open */
body.rn-grid-open #rn-hail { animation: none; }
/* the SCROLLER is the wrap, not the grid. This said #rn-grid (and named the tuned
   wrap twice), so the grid itself went position:fixed over the whole viewport at
   z-index 105 — which is why the control bar rendered down among the cards and
   could not be clicked: the grid was lying on top of it. Joey 0804 #2a. */
#rn-gridwrap,
#rn-tn-gridwrap {
  position: fixed; inset: 0; z-index: 105;
  overflow-y: auto; overscroll-behavior: contain;
  padding: 84px 6vw 80px;
  animation: rnGridIn .3s ease both;
}
#rn-gridwrap[hidden],
#rn-tn-gridwrap[hidden] { display: none; }
@keyframes rnGridIn { from { opacity: 0; } to { opacity: 1; } }
#rn-grid-controls,
#rn-tn-gcontrols {
  display: flex; align-items: center; gap: 12px;
  max-width: 1180px; margin: 0 auto 22px;
}
.rn-search-wrap {
  flex: 1 1 auto; display: flex; align-items: center; gap: 8px;
  height: 34px; padding: 0 12px; max-width: 340px;
  background: rgba(12,20,30,0.5); border: 1px solid rgba(150,190,225,0.16); border-radius: 10px;
  transition: border-color .25s ease;
}
.rn-search-wrap:focus-within { border-color: rgba(150,190,225,0.4); }
.rn-search-ico { color: rgba(205,221,242,0.4); font-size: 13px; }
#rn-search,
#rn-tn-search {
  flex: 1 1 auto; background: none; border: none; outline: none;
  font-family: var(--font-mono); font-size: 12px; color: #e7eefb;
}
#rn-search::placeholder,
#rn-tn-search::placeholder { color: rgba(205,221,242,0.35); }
.rn-sort { display: flex; gap: 6px; margin-left: auto; }
.rn-sort-b {
  width: 30px; height: 30px; padding: 0; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(12,20,30,0.4); border: 1px solid rgba(150,190,225,0.14); border-radius: 8px;
  color: rgba(205,221,242,0.4); font-size: 14px; line-height: 1;
  transition: color .2s ease, border-color .2s ease, background .2s ease;
}
.rn-sort-b:hover { color: rgba(205,221,242,0.75); border-color: rgba(150,190,225,0.34); }
.rn-sort-b.active { color: #14100a; background: rgba(245,197,66,0.85); border-color: rgba(245,197,66,0.9); }
.rn-grid-back { margin-right: 4px; flex: 0 0 auto; }
/* both grids ARE one grid — same rule, same selector list, so they cannot drift
   apart again. TUNED had no rule at all, which is why its cards stacked one per
   row instead of flowing (Joey 0804 #2b). */
#rn-grid,
#rn-tn-grid {
  /* Joey 0804: four across on desktop, two on a phone. The width is what sets the
     count — 4×206 + 3×24 = 896 — rather than a hard repeat(4,…), so a narrower
     window steps down to 3 then 2 instead of squeezing four cards thin. minmax
     lets them take up the remainder evenly, the same idiom the phone rule uses. */
  display: grid; grid-template-columns: repeat(auto-fill, minmax(206px, 1fr)); justify-content: center;
  gap: 26px 24px; max-width: 920px; margin: 0 auto;
}
/* grid cards: reuse .rn-card but no parallax and captions always shown.
   .rn-card is a fixed 206px for the shelf — in the grid the track owns the width. */
#rn-grid .rn-card,
#rn-tn-grid .rn-card { width: auto; }
#rn-grid .rn-card-s,
#rn-tn-grid .rn-card-s { opacity: 1; transform: none; }
#rn-grid-empty,
#rn-tn-gempty {
  text-align: center; padding: 60px 0;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .08em;
  color: rgba(205,221,242,0.4);
}
#rn-grid-empty[hidden],
#rn-tn-gempty[hidden] { display: none; }

/* ── mobile — additive only (CLAUDE.md rule 8) ─────────────────────────────── */
@media (max-width: 640px) {
  .rn-tn-fs-exit { top: 96px; }
  #rn-navi-dock { top: calc(6vh + 34px); }
  #rn-navi { width: 60px; height: 60px; }
  .rn-shelf-head { padding: 0 7vw 14px; }
  #rn-track { padding: 0 7vw; gap: 16px; }
  .rn-card { width: 156px; }
  .rn-card-cover { height: 196px; }
  .rn-card-t { font-size: 12px; }
  .rn-card-s { opacity: 0 !important; }          /* phones: title only (realm rule) */
  #rn-shelf-empty { padding-left: 7vw; }
  #rn-tr { right: 66px; gap: 8px; }
  #rlm-claim-pill .rlm-cp-label { display: none; }  /* the hex + arrow say it */
  #rlm-claim-pill .rlm-cp-sep { display: none; }
  #rlm-claim-pill .rlm-cp-arr { margin-left: 6px; }
  /* the notice box sits under the (smaller) Navi + machine; a touch tighter */
  #rn-hail { padding: 9px 13px; gap: 10px; }   /* 位置同桌面:贴标签行下沿 */
  #rn-hail-text { font-size: 8.5px; }
  .rn-hail-cue { font-size: 8px; }
  /* grid: a touch tighter, still centered — both grids, one rule (Joey 0804 #2b) */
  #rn-gridwrap, #rn-tn-gridwrap { padding: 76px 5vw 72px; }
  #rn-grid, #rn-tn-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px 14px; }
  #rn-grid .rn-card, #rn-tn-grid .rn-card { width: auto; }
  #rn-grid .rn-card-cover, #rn-tn-grid .rn-card-cover { height: 200px; }
  #rn-grid .rn-card-s, #rn-tn-grid .rn-card-s { opacity: 0 !important; }   /* phones: title only, even in grid */
}
@media (pointer: coarse) {
  .rn-card:hover { transform: none; }
  .rn-card .rn-card-s { opacity: 0; }
  #rn-grid .rn-card-s { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #rn-navi-badge { animation: none; }
  #rn-hail { animation: none; }
}


/* AB-BX: the CROWNED chip — every received star is crowned; the pixel crown
   says it, C// joins for mission stars. Replaces the old text-only C// tag
   (plain stars used to carry nothing — equal rank now). */
.rn-card-badge.rn-crowned { display: inline-flex; align-items: center; gap: 4px; }
.rn-card-badge.rn-crowned svg { width: 10px; height: auto; display: block; }
.rn-card-badge.rn-crowned b { font-family: var(--font-pixel); font-size: 7px; font-weight: 400; }

/* ── mobile small-text diet (≤640): hover-born hints have no life on touch ── */
@media (max-width: 640px) {
  .rlm-id-tip { display: none !important; }      /* hover tip under the nameplate */
  .rn-make-q { display: none; }                  /* "got something to share?" — the link carries it */
}

/* ── phones: the CREDITS pill retires (top too busy) — its job passes to a
   game-style floating reward at claim time. Name & claim pills stay.
   Mobile-only additive block (mobile law: add, never touch desktop). ── */
@media (max-width: 640px) {
  .rn-cr-wrap { display: none !important; }
  .rn-cr-float {
    /* above the claim scrim (1140) and the card layer (1170) — the reward
       must never sink behind the blur */
    position: fixed; left: 50%; top: 44%; z-index: 1300; pointer-events: none;
    font-family: var(--font-pixel, var(--font-mono)); font-size: 15px; letter-spacing: 0.08em;
    color: #f5d97a; text-shadow: 0 0 14px rgba(245,197,66,0.6), 0 2px 4px rgba(0,0,0,0.6);
    animation: rnCrFloat 1.4s ease-out forwards;
  }
}
@keyframes rnCrFloat {
  0%        { opacity: 0; transform: translate(-50%, 12px); }
  15%, 62%  { opacity: 1; transform: translate(-50%, 0); }
  100%      { opacity: 0; transform: translate(-50%, -46px); }
}
@media (prefers-reduced-motion: reduce) { .rn-cr-float { animation-duration: 0.9s; } }

/* ── the SPEND LINE — one quiet card after the last star is kept: your
   credits, and the one place they go. Shown once, never again. ── */
#rn-nudge {
  position: fixed; left: 50%; top: 46%; transform: translate(-50%, -50%) translateY(8px);
  z-index: 1250; text-align: center;
  padding: 26px 34px 20px; border-radius: 18px;
  background: rgba(14,22,38,0.97); border: 1px solid rgba(245,197,66,0.4);
  box-shadow: 0 30px 80px rgba(0,0,0,0.55), 0 0 30px rgba(245,197,66,0.12), inset 0 1px 0 rgba(255,255,255,0.06);
  opacity: 0; transition: opacity .3s ease, transform .3s ease;
}
#rn-nudge.on { opacity: 1; transform: translate(-50%, -50%); }
.rn-nudge-cr {
  font-family: var(--font-pixel, var(--font-mono)); font-size: 13px; letter-spacing: 0.06em;
  color: #f5d97a; text-shadow: 0 0 14px rgba(245,197,66,0.4); margin-bottom: 12px;
}
.rn-nudge-line {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em;
  color: rgba(190,205,228,0.75); margin-bottom: 18px;
}
.rn-nudge-go {
  display: inline-block; cursor: pointer; text-decoration: none;
  padding: 11px 22px; border-radius: 12px;
  background: linear-gradient(180deg,#f7d873,#e9b83f); color: #241a04;
  font-family: var(--font-mono); font-size: 11px; font-weight: 700; letter-spacing: 0.12em;
  box-shadow: 0 3px 0 #8f6416, inset 0 1px 0 rgba(255,255,255,0.35);
}
.rn-nudge-go:hover { transform: translateY(1px); box-shadow: 0 2px 0 #8f6416, inset 0 1px 0 rgba(255,255,255,0.35); }
.rn-nudge-later {
  display: block; margin: 12px auto 0; background: none; border: none; cursor: pointer;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.12em; color: rgba(143,163,192,0.6);
}
.rn-nudge-later:hover { color: #d6ecfa; }
@media (max-width: 640px) { #rn-nudge { width: min(88vw, 360px); padding: 22px 20px 16px; } }

/* ══ large-display scale (2026-07) ═══════════════════════════════════════════
   Fixed-px UI looks tiny on wide (2560-class) monitors. `zoom` scales the
   whole coordinate space uniformly — centering & proportions preserved
   (verified: centred fixed elements don't drift, inset:0 layers stay full,
   no h-scroll). Anchored so MacBook (~1470) & phones stay at zoom 1; the
   min-width fires on the REAL viewport, never the zoomed one, so there is no
   feedback loop. Conservative curve, capped 1.5. The one full-bleed 100vh
   box (#rlm-skywrap) gets a /zoom compensation so it stays ONE actual screen
   (100vh under zoom would otherwise become 1.5 screens → forced scroll). ══ */
@media (min-width: 1560px) { :root { zoom: 1.15; } #rlm-skywrap { height: calc(100vh / 1.15); } }
@media (min-width: 1920px) { :root { zoom: 1.30; } #rlm-skywrap { height: calc(100vh / 1.30); } }
@media (min-width: 2400px) { :root { zoom: 1.50; } #rlm-skywrap { height: calc(100vh / 1.50); } }


/* ═══════════════════════════════════════════════════════════════════════════
   ASTERISM · TUNED — 第二类关系(你主动关注的人)
   来自 Joey 2026-08-03 交接件 Our_feed_back/ASTERISM-TUNED.html,逐字采用。
   审美主权在他那边:这里不做任何视觉改动,只负责接上数据。
   上面 8 条现有规则的选择器列表已就地扩展(而不是复制一份),避免两边漂移。
   ═══════════════════════════════════════════════════════════════════════════ */
#rn-class {
  position: fixed; top: 176px; left: 0; right: 0; z-index: 3;
  display: flex; justify-content: center; align-items: flex-start; gap: 30px;
  margin: 0;
  /* NO transform here on purpose: a transform would become the containing block
     for the notice below and throw its coordinates off. */
}

.rn-cl-b {
  position: relative;
  display: flex; align-items: center; gap: 6px;
  background: none; border: none; padding: 6px 4px 8px; cursor: pointer;
  border-bottom: 1px solid transparent;
  transition: border-color .25s ease;
}

.rn-cl-b .rn-cl-t { color: rgba(219,230,245,0.44); transition: color .25s ease; }

.rn-cl-b .rn-cl-star, .rn-cl-b .rn-cl-sig { opacity: .44; transition: opacity .25s ease; }

.rn-cl-b:hover .rn-cl-t { color: rgba(219,230,245,0.78); }

.rn-cl-b:hover .rn-cl-star, .rn-cl-b:hover .rn-cl-sig { opacity: .78; }

.rn-cl-b.active { border-bottom-color: rgba(150,190,225,0.45); }

.rn-cl-b.active .rn-cl-star, .rn-cl-b.active .rn-cl-sig { opacity: 1; }

.rn-cl-top { position: relative; display: flex; align-items: center; gap: 6px; }

.rn-cl-t {
  font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: .26em;
  color: #dbe6f5;
}

.rn-cl-star { font-size: 10px; color: #f5c542; line-height: 1; }

.rn-cl-dot {
  position: absolute; top: -3px; right: -8px;
  width: 6px; height: 6px; border-radius: 50%;
  background: #f5c542; box-shadow: 0 0 0 2px rgba(10,16,24,0.85), 0 0 8px rgba(245,197,66,0.9);
  animation: rnClDot 2.9s ease-in-out infinite;
}

.rn-cl-dot[hidden] { display: none; }

.rn-cl-dot-tn {
  background: #8fd0f5;
  box-shadow: 0 0 0 2px rgba(10,16,24,0.85), 0 0 8px rgba(143,208,245,0.9);
}

.rn-cl-sig { width: 13px; height: 9px; display: block; color: #8fd0f5; }

.rn-cl-b[data-class="stars"].active .rn-cl-t { color: #f7e6b4; }

.rn-cl-b[data-class="tuned"].active .rn-cl-t { color: #cfe8fa; }

body.rn-tuned-on #rn-shelfwrap,
body.rn-tuned-on #rn-hail,
body.rn-tuned-on #rn-gridwrap { display: none !important; }

body:not(.rn-tuned-on) #rn-tuned,
body:not(.rn-tuned-on) #rn-tn-gridwrap { display: none !important; }

#rn-tuned { flex: 0 0 auto; position: relative; margin-top: 7vh; min-height: 0; }

#rn-tn-back[hidden], #rn-tn-mg[hidden], #rn-tn-gt[hidden], #rn-tn-mav[hidden] { display: none !important; }

.rn-tn-shelf {
  display: flex; gap: 24px; padding: 14px 10vw 10px;
  min-height: 276px; align-items: flex-end;
  overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}

.rn-tn-shelf::-webkit-scrollbar { display: none; }

.rn-tn-shelf.rn-tn-mk { align-items: center; }

.rn-tn-mc {
  flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: none; border: none; padding: 4px 2px; cursor: pointer;
}

.rn-tn-av {
  width: 96px; height: 96px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;   /* Joey 0804: the picture is clipped BY the circle, not laid in it */
  border: 1px solid rgba(180,205,235,0.22);
  font-family: var(--font-pixel, var(--font-mono)); font-size: 24px; color: rgba(240,247,255,0.9);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 8px 18px rgba(0,0,0,0.22);
  transition: border-color .2s ease, transform .3s cubic-bezier(.3,.7,.3,1);
}

.rn-tn-mc:hover .rn-tn-av { border-color: rgba(200,225,250,0.5); transform: translateY(-6px); }

/* a picture inside the ring FILLS it — the upload is already centre-cropped square
   at 96px, so cover never distorts it */
.rn-tn-av > img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* the small avatar that stands on its own (the maker line above a shelf) — it is
   its own circle rather than something sitting inside one */
.rn-tn-av-sm { width: 30px; height: 30px; font-size: 11px; box-shadow: none; }
img.rn-tn-av-sm { border-radius: 50%; object-fit: cover; display: block; }

.rn-tn-mc { position: relative; }

.rn-tn-new {
  position: absolute; top: 2px; right: 18px;
  width: 9px; height: 9px; border-radius: 50%;
  background: #8fd0f5;
  box-shadow: 0 0 0 2.5px rgba(8,13,22,0.92), 0 0 10px rgba(143,208,245,0.95);
  animation: rnTnNew 2.9s ease-in-out infinite;
}

.rn-tn-name {
  font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; letter-spacing: .14em;
  color: #dbe6f5; text-transform: uppercase; max-width: 128px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.rn-tn-card { width: 206px; }

#rn-tn-cap { text-transform: uppercase; }

#rn-tn-mav { display: flex; align-items: center; }

#rn-tn-empty, #rn-tn-noresult {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em;
  color: rgba(205,221,242,0.4); padding: 0 0 60px 10vw;
}

#rn-tn-empty[hidden], #rn-tn-noresult[hidden] { display: none; }

.rn-tn-golink {
  background: none; border: none; padding: 0; cursor: pointer;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .06em; color: #8fd0f5;
}

.rn-tn-golink:hover { text-decoration: underline dotted 1px; text-underline-offset: 3px; }

/* 640 — the same rung Airwaves' own full screen sits on (#plz-fs), above the
   drawer (450) and the hamburger (460), below the modals (1100+). */
#rn-tn-fs {
  position: fixed; inset: 0; z-index: 640; background: #04070d;
  opacity: 0; transition: opacity .2s ease;
}
/* Joey 0804: full screen means the page and EXIT, nothing else — same as opening
   a station from Airwaves. Everything the Realm keeps pinned on screen steps back. */
body.rn-tn-fs-on #wallet-view,
body.rn-tn-fs-on #rlm-topleft,
body.rn-tn-fs-on #rlm-claim-pill,
body.rn-tn-fs-on #rn-cr,
body.rn-tn-fs-on #sky-orb,
body.rn-tn-fs-on .ncp-nav-toggle { opacity: 0; pointer-events: none; }

#rn-tn-fs.on { opacity: 1; }

#rn-tn-fs iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }

/* Zo 0805: 18px 让 EXIT 压在页面自己的导航栏上。实测十个真实站页,固定顶栏
   最高桌面 56px、手机 90px —— 落到它下面。左上的 ✦ 圆点同步下移。 */
.rn-tn-fs-exit {
  position: absolute; top: 76px; right: 20px; z-index: 2; cursor: pointer;
  padding: 8px 14px; border-radius: 10px;
  background: rgba(9,14,22,0.8); border: 1px solid rgba(150,190,225,0.3); color: #dfeaf6;
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .14em;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

.rn-tn-fs-exit:hover { color: #fff; border-color: rgba(200,225,250,0.55); }

.rlm-av {
  position: relative; flex: 0 0 auto; padding: 0; border: none; cursor: pointer;
  background: none; line-height: 1; overflow: hidden;
  width: 18px; height: 18px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: box-shadow .2s ease;
}

.rlm-av {
  width: 20px; height: 20px;
  background: rgba(120,160,205,0.22);
  color: rgba(196,220,244,0.8);
}

.rlm-av:hover { background: rgba(146,190,232,0.34); color: #eef5fc; }

.rlm-av-ph { display: block; line-height: 0; }

.rlm-av-ph .av-ico { width: 14px; height: 14px; display: block; }

.rlm-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }

.rlm-av img[hidden] { display: none; }

.rlm-av-on { background: none; }

.rlm-av-on .rlm-av-ph { display: none; }

/* 有星在等的时候,书架整体让出通知那一行。原值 64px 约等于原本的 7vh,实际上
   一寸也没让开;而且这个类以前根本没人加(见 realm.js renderHail)。
   只在看得见通知的那一侧让位——切到 TUNED 时通知是藏起来的,不该跟着挪。 */
body.rn-hailing:not(.rn-tuned-on) #rn-shelfwrap { margin-top: calc(7vh + 60px); }

/* ── Arrived from a gift email (0904) ──
   Shown when the link named a star that is NOT in this Realm — the sender typed
   a different address than the one the visitor is signed in with. Built from the
   Realm's own tokens; the action reuses .rn-keep so the gold button is the same
   button it is everywhere else on this page. */
.rn-xr {
  position: fixed; inset: 0; z-index: 640;
  display: flex; align-items: center; justify-content: center; padding: 22px;
  background: rgba(6, 10, 16, 0.72);
  backdrop-filter: blur(3px);
}
.rn-xr-panel {
  width: 100%; max-width: 420px; text-align: center;
  padding: 26px 24px 22px;
  background: var(--rlm-panel);
  border: 1px solid var(--rlm-border);
  border-radius: 16px;
  box-shadow: 0 30px 70px rgba(0, 0, 0, 0.55), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}
.rn-xr-kick {
  font-family: var(--font-mono); font-size: 9px; letter-spacing: .28em;
  color: rgba(205, 221, 242, 0.5);
}
.rn-xr-t {
  font-family: var(--font-sans); font-size: 15px; font-weight: 700; line-height: 1.5;
  color: #fff; margin-top: 13px;
}
.rn-xr-from {
  font-family: var(--font-mono); font-size: 10px; letter-spacing: .05em;
  color: var(--rlm-dim); margin-top: 7px;
}
.rn-xr-rows { margin-top: 20px; border-top: 1px solid rgba(120, 170, 230, 0.16); }
.rn-xr-row {
  display: flex; align-items: baseline; gap: 14px; padding: 9px 2px;
  border-bottom: 1px solid rgba(120, 170, 230, 0.16);
  font-family: var(--font-mono); font-size: 10px;
}
.rn-xr-k { flex-shrink: 0; letter-spacing: .12em; color: rgba(205, 221, 242, 0.45); }
.rn-xr-v {
  margin-left: auto; min-width: 0; color: var(--rlm-text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rn-xr-note {
  font-family: var(--font-sans); font-size: 11.5px; line-height: 1.7;
  color: rgba(205, 221, 242, 0.62); margin-top: 16px;
}
.rn-xr-err { color: rgba(245, 160, 130, 0.88); }
.rn-xr-go { margin-top: 20px; }
.rn-xr-later {
  display: block; margin: 14px auto 0;
  font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .12em;
  color: rgba(205, 221, 242, 0.42);
  background: none; border: none; cursor: pointer;
}
.rn-xr-later:hover { color: rgba(205, 221, 242, 0.75); }