/* Exedra relics: relic cards (terminal window, gridded stage, glow), the 1-of-1 card frame
   (spinning spectrum, tilt, glare), embeds, the profile cabinet, post effect layers, and the
   terminal prompts for wild relics and drops. Pixel colours are roles mapped to
   the style (relics.js reads --px-*). CRT (dark) first, "paper" printout for light. */

/* ---------- Palette: paper (light) ---------- */
:root {
  --px-a: #b4560a; --px-d: #e2b46e; --px-h: #fffaf0; --px-k: #2a1d0c; --px-r: #c2380c; --px-g: #4f8a1c; --px-m: #9c8a66;
  --r-common: #7a6340; --r-uncommon: #4f8a1c; --r-rare: #9a6a06; --r-epic: #c2380c; --r-legendary: #d9700b; --r-root: #2a1d0c;
  --relic-card-2: var(--surface-alt, #ece1c6);
  --relic-plank: #b08a52; --relic-plank-hi: #d8b57a;
  --relic-glow: none;
  --relic-glow-big: drop-shadow(0 0 6px rgb(217 112 11 / .35));
  --relic-text-glow: none;
  --relic-halo: rgb(217 112 11 / .14);
}
/* ---------- Palette: CRT (dark) ---------- */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --px-a: #ffa31a; --px-d: #7a4f12; --px-h: #f6d58a; --px-k: #0d0a06; --px-r: #ff5a3a; --px-g: #9fd36b; --px-m: #c9b48a;
    --r-common: #a08458; --r-uncommon: #9fd36b; --r-rare: #f6d58a; --r-epic: #ff6b4a; --r-legendary: #ffa31a; --r-root: #f6d58a;
    --relic-plank: #6b4718; --relic-plank-hi: #a8731f;
    --relic-glow: drop-shadow(0 0 3px rgb(255 163 26 / .55)) drop-shadow(0 0 10px rgb(255 163 26 / .25));
    --relic-glow-big: drop-shadow(0 0 4px rgb(255 163 26 / .7)) drop-shadow(0 0 18px rgb(255 163 26 / .35));
    --relic-text-glow: 0 0 6px rgb(255 163 26 / .45);
    --relic-halo: rgb(255 163 26 / .22);
  }
}
:root[data-theme="dark"] {
  --px-a: #ffa31a; --px-d: #7a4f12; --px-h: #f6d58a; --px-k: #0d0a06; --px-r: #ff5a3a; --px-g: #9fd36b; --px-m: #c9b48a;
  --r-common: #a08458; --r-uncommon: #9fd36b; --r-rare: #f6d58a; --r-epic: #ff6b4a; --r-legendary: #ffa31a; --r-root: #f6d58a;
  --relic-plank: #6b4718; --relic-plank-hi: #a8731f;
  --relic-glow: drop-shadow(0 0 3px rgb(255 163 26 / .55)) drop-shadow(0 0 10px rgb(255 163 26 / .25));
  --relic-glow-big: drop-shadow(0 0 4px rgb(255 163 26 / .7)) drop-shadow(0 0 18px rgb(255 163 26 / .35));
  --relic-text-glow: 0 0 6px rgb(255 163 26 / .45);
  --relic-halo: rgb(255 163 26 / .22);
}

@property --spin { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes relic-spin { to { --spin: 360deg; } }
@keyframes relic-pulse { 50% { filter: brightness(1.3); } }
@keyframes relic-sheen { to { background-position: 300% 0; } }
@keyframes relic-jitter { 0% { transform: translate(2px, -1px); } 50% { transform: translate(-2px, 1px); } 100% { transform: translate(1px, 2px); } }
@keyframes relic-fade { from { opacity: 0; } }
@keyframes relic-pop { from { transform: scale(.7); opacity: 0; } }
@keyframes relic-drop-in { from { transform: translateY(-14px); opacity: 0; } }

/* ---------- Sprites ---------- */
.relic-sprite {
  display: inline-block; vertical-align: middle; flex: none;
  width: var(--relic-size, 16px); height: var(--relic-size, 16px);
  image-rendering: pixelated; image-rendering: crisp-edges;
}

/* ---------- Chips ---------- */
.relic-chip { font-family: var(--pixel); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 6px; border: 1px solid currentColor; white-space: nowrap; line-height: 1.4; }
.relic-chip.common { color: var(--r-common); }
.relic-chip.uncommon { color: var(--r-uncommon); }
.relic-chip.rare { color: var(--r-rare); }
.relic-chip.epic { color: var(--r-epic); }
.relic-chip.legendary { color: var(--background); background: var(--r-legendary); border-color: var(--r-legendary); animation: relic-pulse 2.4s ease-in-out infinite; }
.relic-chip.root { color: var(--background); border-color: transparent; background: linear-gradient(90deg, var(--accent), var(--px-h), var(--success), var(--px-h), var(--accent)); background-size: 300% 100%; animation: relic-sheen 3s linear infinite; }
.relic-rootbadge { font-family: var(--pixel); font-size: 9px; letter-spacing: .08em; padding: 1px 5px; background: var(--accent); color: var(--background); }
.relic-serial { font-family: var(--mono); color: var(--muted-foreground); font-weight: 400; font-variant-numeric: tabular-nums; }
.relic-uname { color: var(--accent); font-weight: 700; }
.relic-uname::before { content: "@"; color: var(--muted-foreground); font-weight: 400; }
.relic-ok { color: var(--success); }
.relic-fail { color: var(--r-epic); }
.relic-verified { color: var(--success); font-size: 11px; }
.relic-verified::before { content: "✓ "; }
.relic-hint { font-size: 12px; color: var(--muted-foreground); margin: 0; }

/* ---------- Relic cards ---------- */
.relic-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 22px; padding: 16px 16px 22px; }
.relic-vault { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 330px), 1fr)); gap: 26px; padding: 16px 16px 24px; }
.relic-card { background: var(--card); border: 1px solid var(--line); box-shadow: 5px 5px 0 var(--accent-2); display: flex; flex-direction: column; min-width: 0; position: relative; }
.relic-bar { display: flex; justify-content: space-between; gap: 8px; padding: 5px 10px; background: var(--relic-card-2); border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 11px; color: var(--muted-foreground); }
.relic-bar span:last-child { color: var(--foreground); }
.relic-bar .relic-held { color: var(--success); }
.relic-stage {
  display: grid; place-items: center; height: 210px; position: relative; overflow: hidden;
  background-image: linear-gradient(var(--relic-card-2) 1px, transparent 1px), linear-gradient(90deg, var(--relic-card-2) 1px, transparent 1px);
  background-size: 12px 12px; background-position: center; border-bottom: 1px dashed var(--line);
}
.relic-stage .relic-sprite { --relic-size: 144px; filter: var(--relic-glow); position: relative; z-index: 1; }
.relic-stage .relic-fx:not(.tier-common) { --relic-size: 196px; filter: var(--relic-glow-big); }
.relic-stage-serial { position: absolute; right: 10px; bottom: 6px; font-family: var(--display); font-size: 22px; color: var(--muted-foreground); font-variant-numeric: tabular-nums; z-index: 2; }
.relic-body { padding: 14px 16px 16px; display: flex; flex-direction: column; gap: 8px; flex: 1; }
.relic-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.relic-name { font-family: var(--display); font-size: 30px; line-height: 1; color: var(--foreground); text-decoration: none; }
a.relic-name:hover { color: var(--accent); }
.relic-lore { margin: 0; font-size: 13px; color: var(--muted-foreground); }
.relic-lore::before { content: "// "; color: var(--line); }
.relic-stats { display: grid; grid-template-columns: auto 1fr; gap: 2px 12px; font-size: 12px; margin: 4px 0 0; }
.relic-stats dt { color: var(--muted-foreground); }
.relic-stats dd { margin: 0; font-variant-numeric: tabular-nums; }
.relic-supply { height: 6px; background: var(--relic-card-2); border: 1px solid var(--line); margin-top: 6px; }
.relic-supply i { display: block; height: 100%; background: var(--accent); }
.relic-fxline { font-size: 12px; color: var(--foreground); background: var(--relic-card-2); border: 1px solid var(--line); padding: 6px 10px; }
.relic-fxline b { color: var(--accent); }
.relic-hoverline { font-size: 12px; color: var(--muted-foreground); }
.relic-hoverline b { color: var(--success); font-weight: 400; }
.relic-embed-code { display: flex; flex-direction: column; gap: 4px; }
.relic-embed-code .input { font-family: var(--mono); }

/* Tier frames: each tier above common gets a little more presence */
.relic-card[data-rarity="uncommon"] { border-color: color-mix(in srgb, var(--r-uncommon) 55%, var(--line)); }
.relic-card[data-rarity="rare"] { border-color: color-mix(in srgb, var(--r-rare) 55%, var(--line)); }
.relic-card[data-rarity="epic"] { border-color: var(--r-epic); box-shadow: 5px 5px 0 var(--accent-2), 0 0 18px color-mix(in srgb, var(--r-epic) 25%, transparent); }
.relic-card[data-rarity="legendary"] { border-color: var(--accent); box-shadow: 5px 5px 0 var(--accent-2), 0 0 26px var(--relic-halo); }
.relic-card[data-rarity="legendary"] .relic-bar { color: var(--accent); }

/* Root: rotating spectrum frame; hover tilts the card toward the pointer and a glare follows */
.relic-card--root { border: 2px solid transparent;
  background: linear-gradient(var(--card), var(--card)) padding-box,
              conic-gradient(from var(--spin), var(--accent), var(--accent-2), var(--px-h), var(--success), var(--accent)) border-box;
  animation: relic-spin 4s linear infinite;
  box-shadow: 6px 6px 0 var(--accent-2), 0 0 34px var(--relic-halo);
  transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .25s ease-out; }
.relic-card--root:hover { animation-duration: 1.2s; }
.relic-card--root .relic-bar { background: var(--accent); color: var(--background); border-color: var(--accent); font-weight: 700; }
.relic-card--root .relic-bar span:last-child { color: var(--background); }
.relic-card--root .relic-stage { height: 260px; cursor: crosshair; touch-action: pan-y; }
.relic-card--root .relic-stage .relic-sprite { --relic-size: 224px; filter: var(--relic-glow-big); }
.relic-card--root .relic-stage::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, var(--relic-halo), transparent 62%); }
.relic-card--root .relic-stage::after { content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity .2s; background: radial-gradient(circle at var(--gx, 50%) var(--gy, 50%), rgb(255 240 200 / .2), transparent 45%); }
.relic-card--root:hover .relic-stage::after { opacity: 1; }
.relic-card--root .relic-name { color: var(--accent); text-shadow: var(--relic-text-glow); }

.relic-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }

/* Relic and copy pages: the card next to its history */
.relic-detail { display: grid; grid-template-columns: minmax(280px, 380px) minmax(0, 1fr); gap: 24px; align-items: start; }
.relic-detail > .relic-card { position: sticky; top: calc(var(--header-h) + 14px); }
.relic-event { font-family: var(--pixel); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; }
.relic-event--mint { color: var(--success); }
.relic-event--void { color: var(--destructive); }
.relic-event--grant, .relic-event--reclaim { color: var(--accent); }
.data-table tr.is-muted { opacity: .55; }
.relic-list { list-style: none; margin: 0; padding: 8px 12px; display: flex; flex-direction: column; gap: 8px; }
.relic-list li { display: flex; gap: 10px; align-items: center; }
.relic-list .relic-sprite { filter: var(--relic-glow); }
.relic-ranks { margin: 0; padding: 8px 12px 8px 34px; display: flex; flex-direction: column; gap: 4px; }
.relic-drop-banner {
  display: flex; align-items: center; gap: 12px; margin: 0 0 16px; padding: 10px 14px; color: inherit; text-decoration: none;
  border: 1px solid var(--accent); background: var(--card); box-shadow: 5px 5px 0 var(--accent-2); font-family: var(--mono);
}
.relic-drop-banner .relic-sprite { filter: var(--relic-glow); }

/* ---------- Posts: pinned relic and hidden relics ---------- */
.relic-pin { display: inline-flex; align-items: center; gap: 4px; margin-left: 2px; vertical-align: middle; font-size: 11px; color: var(--muted-foreground); text-decoration: none; }
.relic-pin .relic-sprite { --relic-size: 24px; filter: var(--relic-glow); }
.message-main { position: relative; }
.relic-hidden {
  position: absolute; right: 10px; bottom: 40px; z-index: 2; padding: 2px; border: 0; background: none; cursor: pointer;
  opacity: .9; transform: translateY(6px) rotate(-8deg); transition: transform var(--dur) var(--ease-spring), opacity var(--dur);
  animation: relic-peek 3.2s var(--ease-out) infinite;
}
.relic-hidden .relic-sprite { --relic-size: 32px; filter: var(--relic-glow-big); }
.relic-hidden:hover, .relic-hidden:focus-visible { opacity: 1; transform: translateY(0) rotate(0) scale(1.25); animation: none; }
.relic-hidden.is-catching { opacity: .4; pointer-events: none; }
@keyframes relic-peek { 0%, 70%, 100% { transform: translateY(6px) rotate(-8deg); } 80% { transform: translateY(0) rotate(4deg); } 90% { transform: translateY(2px) rotate(-2deg); } }

/* ---------- [RELIC] embeds ---------- */
.bbc-relic { margin: 8px 0; }
.relic-embed { display: flex; gap: 14px; align-items: center; padding: 10px 14px 10px 10px; border: 1px solid var(--line); background: var(--relic-card-2); max-width: 460px; position: relative; }
.relic-embed .relic-sprite { --relic-size: 96px; filter: var(--relic-glow); }
.relic-embed.is-small .relic-sprite { --relic-size: 80px; }
.relic-embed.root { border: 2px solid transparent; background: linear-gradient(var(--relic-card-2), var(--relic-card-2)) padding-box, conic-gradient(from var(--spin), var(--accent), var(--accent-2), var(--px-h), var(--success), var(--accent)) border-box; animation: relic-spin 4s linear infinite; }
.relic-embed.root .relic-sprite { --relic-size: 112px; filter: var(--relic-glow-big); cursor: crosshair; }
.relic-embed.is-gone { opacity: .6; }
.relic-embed-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; font-size: 12px; }
.relic-embed-name { font-family: var(--display); font-size: 26px; line-height: 1; color: var(--foreground); text-decoration: none; }
a.relic-embed-name:hover { color: var(--accent); }
.bbc-relic.is-missing a { color: var(--muted-foreground); text-decoration: line-through; }

/* ---------- Post effect layers (each effect's own rules ship with its scene file) ---------- */
article.message { position: relative; }
.relic-fx-canvas { position: absolute; z-index: 6; pointer-events: none; image-rendering: pixelated; }
.relic-fx-screen { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 400; pointer-events: none; image-rendering: pixelated; }

/* ---------- Profile cabinet ---------- */
.relic-cabinet-wrap { background: var(--card); border: 1px solid var(--line); box-shadow: 5px 5px 0 var(--accent-2); min-width: 0; }
.relic-cabinet { padding: 18px 18px 22px; display: flex; flex-direction: column; gap: 6px; }
.relic-cab-head { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; align-items: baseline; font-size: 12px; color: var(--muted-foreground); }
.relic-cab-head b { color: var(--foreground); }
.relic-completion { display: flex; gap: 10px; align-items: center; font-size: 12px; }
.relic-completion .bar { width: 120px; height: 8px; border: 1px solid var(--line); background: var(--relic-card-2); }
.relic-completion .bar i { display: block; height: 100%; background: var(--success); }
.relic-ledge { position: relative; padding: 18px 8px 0; }
.relic-ledge-label { position: absolute; left: 8px; top: 0; font-family: var(--pixel); font-size: 9px; letter-spacing: .1em; color: var(--muted-foreground); text-transform: uppercase; }
.relic-pedestal { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; padding-top: 10px; }
.relic-pedestal-item { display: flex; flex-direction: column; align-items: center; text-decoration: none; color: inherit; }
.relic-pedestal-item .relic-sprite { --relic-size: 128px; filter: var(--relic-glow-big); cursor: crosshair; }
.relic-pedestal-base { width: 200px; height: 14px; margin: 0 auto 6px; background: linear-gradient(var(--relic-plank-hi), var(--relic-plank)); border: 1px solid var(--line); box-shadow: 0 6px 0 var(--accent-2), 0 0 30px var(--relic-halo); }
.relic-pedestal .relic-plaque { width: 200px; }
.relic-row { display: flex; gap: 14px; justify-content: flex-start; align-items: flex-end; overflow-x: auto; padding: 6px 6px 0; min-height: 112px; }
.relic-plank { height: 12px; background: linear-gradient(var(--relic-plank-hi), var(--relic-plank) 60%); border: 1px solid var(--line); box-shadow: 0 5px 0 var(--relic-card-2); }
.relic-item { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: none; width: 92px; position: relative; color: inherit; text-decoration: none; }
.relic-item .relic-sprite { --relic-size: 72px; filter: var(--relic-glow); }
.relic-item.fx .relic-sprite { --relic-size: 88px; }
.relic-item.leg .relic-sprite { --relic-size: 96px; filter: var(--relic-glow-big); }
.relic-item.is-pinned .relic-plaque { border-color: var(--accent); }
.relic-plaque { font-size: 9px; line-height: 1.3; text-align: center; padding: 2px 4px; background: var(--relic-card-2); border: 1px solid var(--line); color: var(--foreground); width: 100%; font-variant-numeric: tabular-nums; }
.relic-plaque small { display: block; color: var(--muted-foreground); font-size: 9px; }
.relic-slot { width: 72px; height: 72px; border: 1px dashed var(--line); display: grid; place-items: center; color: var(--line); font-family: var(--display); font-size: 28px; }
.relic-item.missing .relic-plaque { color: var(--muted-foreground); }

/* ---------- Terminal windows: wild relics and drops ---------- */
.relic-term { background: var(--card); border: 1px solid var(--line); box-shadow: 5px 5px 0 var(--accent-2); font-family: var(--mono); }
.relic-term-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 5px 10px; background: var(--relic-card-2); border-bottom: 1px solid var(--line); font-size: 11px; color: var(--muted-foreground); }
.relic-term-close { margin-left: 4px; }
.relic-term-body { display: flex; flex-direction: column; gap: 10px; padding: 12px; }
.relic-status { font-size: 12px; padding: 6px 10px; background: var(--relic-card-2); border: 1px solid var(--line); }
.relic-status::before { content: "● "; color: var(--success); }
.relic-status b { color: var(--accent); font-weight: 400; user-select: none; -webkit-user-select: none; }
.relic-timer { font-variant-numeric: tabular-nums; color: var(--accent); }
.relic-cli { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.relic-cli label { color: var(--accent); white-space: nowrap; }
.relic-cli input { flex: 1 1 200px; min-width: 0; font: inherit; color: var(--foreground); background: var(--background); border: 1px solid var(--line); padding: 8px 10px; }
.relic-cli input:focus { outline: 1px solid var(--accent); outline-offset: 0; }
.relic-log { margin: 0; font-size: 13px; min-height: 1.65em; }
.relic-cmd { user-select: none; -webkit-user-select: none; }
.relic-wild-panel, .relic-drop-panel {
  position: fixed; right: 16px; bottom: calc(var(--status-h) + 14px); z-index: 360; width: min(440px, calc(100vw - 32px));
  animation: relic-drop-in 380ms var(--ease-spring);
}
.relic-drop-panel { left: 50%; right: auto; transform: translateX(-50%); width: min(560px, calc(100vw - 32px)); border-color: var(--accent); }
.relic-walker {
  position: fixed; bottom: calc(var(--status-h) - 4px); left: -72px; z-index: 90; padding: 0; border: 0; background: none; cursor: pointer;
  animation: relic-walk var(--walk, 60s) linear forwards;
}
.relic-walker .relic-sprite { filter: var(--relic-glow); }
@keyframes relic-walk { to { left: calc(100vw + 8px); } }

/* ---------- Trade window (ported from the approved "Exedra Relics" artifact: .term, .trade) ---------- */
.relic-window { background: var(--card); border: 1px solid var(--line); box-shadow: 5px 5px 0 var(--accent-2); min-width: 0; font-family: var(--mono); }
.relic-window-bar { display: flex; justify-content: space-between; gap: 8px; padding: 6px 12px; background: var(--accent); color: var(--background); font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.relic-window-body { padding: 18px 20px; display: flex; flex-direction: column; gap: 14px; }
.relic-trade { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: stretch; }
.relic-side { border: 1px solid var(--line); background: var(--relic-card-2); padding: 12px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.relic-side h4 { margin: 0; font-size: 12px; color: var(--muted-foreground); font-weight: 400; }
.relic-side h4 b { color: var(--accent); }
.relic-tiles { display: flex; flex-wrap: wrap; gap: 10px; }
.relic-tile { width: 112px; border: 1px solid var(--line); background: var(--card); padding: 8px 6px; display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; font-size: 11px; position: relative; color: inherit; text-decoration: none; }
.relic-tile .relic-sprite { --relic-size: 64px; filter: var(--relic-glow); }
.relic-tile .relic-lock { position: absolute; top: 4px; right: 5px; z-index: 2; font-size: 10px; color: var(--muted-foreground); }
.relic-window [hidden] { display: none !important; }
.relic-swap { display: grid; place-items: center; font-family: var(--display); font-size: 40px; color: var(--accent); }
.relic-checks { margin: 0; padding: 0; list-style: none; font-size: 13px; display: flex; flex-direction: column; gap: 4px; }
.relic-checks .relic-tag { display: inline-block; width: 7ch; }
.relic-checks .relic-tag.ok { color: var(--success); }
.relic-checks .relic-tag.warn { color: var(--accent); }
.relic-checks .relic-tag.fail { color: var(--r-epic); }
.relic-settle { margin: 0; padding: 10px 12px; background: var(--background); border: 1px solid var(--line); font-size: 12px; min-height: 3em; white-space: pre-wrap; }
.relic-btnrow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.relic-btn { font: inherit; font-weight: 700; font-size: 13px; letter-spacing: .05em; text-transform: uppercase; color: var(--background); background: var(--accent); border: 1px solid var(--accent); padding: 8px 14px; cursor: pointer; box-shadow: 3px 3px 0 var(--accent-2); text-decoration: none; }
.relic-btn:hover { filter: brightness(1.08); }
.relic-btn:active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--accent-2); }
.relic-btn:disabled { opacity: .5; cursor: default; transform: none; }
.relic-btn--ghost { background: transparent; color: var(--accent); }
.relic-confirm { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.relic-confirm input { font: inherit; color: var(--foreground); background: var(--background); border: 1px solid var(--line); padding: 8px 10px; min-width: 0; flex: 0 1 240px; }
.relic-confirm input:focus { outline: 1px solid var(--accent); outline-offset: 0; }
.relic-note { margin: 0; font-size: 13px; padding: 8px 10px; border-left: 2px solid var(--accent); background: var(--relic-card-2); white-space: pre-wrap; overflow-wrap: anywhere; }
/* The offer form: the same window, tiles you tick. */
.relic-tile--pick { cursor: pointer; }
.relic-tile--pick input { position: absolute; top: 5px; left: 5px; margin: 0; accent-color: var(--accent); }
.relic-tile--pick:has(input:checked) { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 14px var(--relic-halo); }
.relic-tile--pick.is-unavailable { opacity: .45; cursor: not-allowed; }
.relic-trade-list .relic-sprite { --relic-size: 24px; filter: var(--relic-glow); }
.relic-trade-status { font-family: var(--pixel); font-size: 10px; letter-spacing: .08em; text-transform: uppercase; }
.relic-trade-status--open, .relic-trade-status--settling { color: var(--accent); }
.relic-trade-status--settled { color: var(--success); }
.relic-trade-status--declined, .relic-trade-status--cancelled, .relic-trade-status--expired { color: var(--muted-foreground); }
.relic-event--transfer { color: var(--accent); }
.relic-timeline { padding: 12px 16px; }

/* ---------- Catch modal, banners, the Root moment ---------- */
.relic-modal { position: fixed; inset: 0; z-index: 420; display: grid; place-items: center; padding: 16px; background: color-mix(in srgb, var(--px-k) 72%, transparent); animation: relic-fade var(--dur-slow) var(--ease-out); }
.relic-modal-card { width: min(340px, 100%); animation: relic-pop 420ms var(--ease-spring); }
.relic-banners { position: fixed; top: calc(var(--header-h) + 8px); left: 50%; transform: translateX(-50%); z-index: 350; display: flex; flex-direction: column; gap: 8px; width: min(640px, calc(100vw - 32px)); pointer-events: none; }
.relic-banner { pointer-events: auto; display: block; padding: 10px 14px; color: var(--foreground); text-decoration: none; background: var(--card); border: 1px solid var(--accent); box-shadow: 5px 5px 0 var(--accent-2); font-family: var(--mono); font-size: .82rem; animation: relic-drop-in 380ms var(--ease-spring); }
.relic-banner[data-rarity="epic"] { border-color: var(--r-epic); }
.relic-banner[data-rarity="legendary"] { box-shadow: 5px 5px 0 var(--accent-2), 0 0 26px var(--relic-halo); }
.relic-banner.is-leaving { opacity: 0; transform: translateY(-8px); transition: opacity 300ms, transform 300ms; }
.relic-moment { position: fixed; inset: 0; z-index: 450; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; padding: 16px; background: color-mix(in srgb, #000 86%, transparent); text-align: center; animation: relic-fade 600ms var(--ease-out); }
.relic-moment-line { font-family: var(--display); font-size: clamp(1.8rem, 6vw, 3.4rem); letter-spacing: .12em; color: var(--accent); text-shadow: 0 0 18px var(--accent); }
.relic-moment-card { width: min(360px, 100%); animation: relic-pop 900ms var(--ease-spring) both; }
.relic-moment-who { font-size: 1rem; color: var(--foreground); }

/* ---------- ACP ---------- */
.relic-admin-forms { display: grid; grid-template-columns: repeat(auto-fit, minmax(380px, 1fr)); gap: 16px; align-items: start; }
.relic-sprite-editor { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 12px; }
.relic-sprite-editor .explain, .relic-sprite-editor .field-error { grid-column: 1 / -1; }
.relic-sprite-preview { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; border: 1px solid var(--line); background-image: linear-gradient(var(--relic-card-2) 1px, transparent 1px), linear-gradient(90deg, var(--relic-card-2) 1px, transparent 1px); background-size: 12px 12px; }
.relic-sprite-preview canvas { width: 196px; height: 196px; image-rendering: pixelated; filter: var(--relic-glow-big); }
.input--code { font-family: var(--mono); font-size: .75rem; line-height: 1.3; }
.relic-vault-admin .relic-card form .form-stack { display: flex; flex-direction: column; gap: 6px; }

@media (max-width: 640px) {
  .relic-trade { grid-template-columns: 1fr; }
  .relic-swap { transform: rotate(90deg); }
}

@media (max-width: 760px) {
  .relic-detail { grid-template-columns: 1fr; }
  .relic-detail > .relic-card { position: static; }
  .relic-embed { flex-direction: column; align-items: flex-start; }
  .relic-admin-forms { grid-template-columns: 1fr; }
  .relic-sprite-editor { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .relic-chip.legendary, .relic-chip.root, .relic-card--root, .relic-embed.root, .relic-hidden, .relic-modal-card,
  .relic-moment-card, .relic-banner, .relic-wild-panel, .relic-drop-panel { animation: none; }
  .relic-card--root { transform: none; }
  .relic-walker { animation: none; left: 16px; }
}