/* =========================================================
   SHADOW MARKET -- cosmetics, premium /command effects, and the
   Little Hero's market / roulette / ledger terminal.
   Purely visual. Nothing here reflects or grants gameplay.
   ========================================================= */

/* ---------- Titles ---------- */
.cos-title {
  display: inline-block;
  margin-left: 7px;
  padding: 1px 7px;
  border: 1px solid rgba(201, 164, 255, .45);
  border-radius: 3px;
  background: linear-gradient(180deg, rgba(120, 70, 190, .22), rgba(40, 20, 70, .3));
  color: #d9c2ff;
  font: 700 .62rem/1.5 var(--font-machine, ui-monospace, monospace);
  letter-spacing: .12em;
  text-transform: uppercase;
  vertical-align: middle;
  white-space: nowrap;
}
.cos-title-hud { margin-left: 0; font-size: .66rem; }
.cos-title[hidden] { display: none !important; }

/* ---------- Avatar base for cosmetics ---------- */
.little-hero-avatar .cos-layer {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 2;
}
.little-hero-avatar .cos-layer > i { position: absolute; inset: 0; border-radius: 50%; }
.little-hero-avatar:has(.cos-layer) { position: relative; }

/* ---------- Avatar looks ---------- */
.little-hero-avatar.cos-look-noir img { filter: grayscale(1) contrast(1.45) brightness(.92); }
.little-hero-avatar.cos-look-spectral img { filter: hue-rotate(235deg) saturate(1.4) brightness(1.05); }
.little-hero-avatar.cos-look-spectral .cos-layer { background: radial-gradient(circle at 50% 40%, transparent 45%, rgba(155, 93, 224, .45)); mix-blend-mode: screen; }
.little-hero-avatar.cos-look-damaged img { filter: sepia(.45) contrast(1.25) saturate(.7); }
.little-hero-avatar.cos-look-damaged .cos-layer {
  background:
    linear-gradient(118deg, transparent 46%, rgba(0, 0, 0, .75) 47%, rgba(255, 255, 255, .25) 48%, transparent 49%),
    linear-gradient(62deg, transparent 60%, rgba(0, 0, 0, .7) 61%, transparent 62.5%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 3px);
}

/* ---------- Frames: replace the ring colour ---------- */
.little-hero-avatar[class*="cos-frame-"] { box-shadow: inset 0 0 0 1px rgba(10, 12, 16, .9), 0 0 0 2px var(--cos-ring), 0 0 10px var(--cos-ring); }
.little-hero-avatar.cos-frame-gilded { --cos-ring: #e8b84a; border-color: #fff0c2; }
.little-hero-avatar.cos-frame-blood { --cos-ring: #c0202c; border-color: #ff8f8f; animation: cos-blood-pulse 2.4s ease-in-out infinite; }
.little-hero-avatar.cos-frame-circuit { --cos-ring: #34d6c7; border-color: #0d3b3a; border-style: dashed; }
@keyframes cos-blood-pulse {
  50% { box-shadow: inset 0 0 0 1px rgba(10, 12, 16, .9), 0 0 0 2px #ff3b46, 0 0 16px #ff3b46; }
}

/* ---------- Avatar effects ---------- */
/* VOID EYE, five tiers. */
.little-hero-avatar.cos-fx-void-eye { box-shadow: inset 0 0 0 1px rgba(10, 12, 16, .9), 0 0 0 2px var(--cos-ring, var(--lh-frame)), 0 0 12px #9b5de0, 0 0 22px rgba(155, 93, 224, .45); }
.little-hero-avatar.cos-fx-void-eye .cos-layer { background: radial-gradient(circle at 50% 50%, transparent 55%, rgba(110, 40, 200, .35)); }
.little-hero-avatar.cos-fx-void-eye:not(.cos-tier-1) { animation: cos-void-pulse 2.2s ease-in-out infinite; }
.little-hero-avatar.cos-fx-void-eye:is(.cos-tier-3, .cos-tier-4, .cos-tier-5) .cos-layer > i {
  background:
    radial-gradient(circle at 20% 30%, #d7b8ff 0 1px, transparent 2px),
    radial-gradient(circle at 75% 20%, #b58cff 0 1px, transparent 2px),
    radial-gradient(circle at 80% 75%, #e6d4ff 0 1px, transparent 2px),
    radial-gradient(circle at 30% 80%, #a070ff 0 1px, transparent 2px);
  animation: cos-orbit 5s linear infinite;
}
.little-hero-avatar.cos-fx-void-eye:is(.cos-tier-4, .cos-tier-5) img { animation: cos-glitch-img 3.2s steps(1) infinite; }
.little-hero-avatar.cos-fx-void-eye.cos-tier-5.final-solver-aura { animation: cos-void-final 1.1s ease-in-out infinite; }
@keyframes cos-void-pulse {
  50% { box-shadow: inset 0 0 0 1px rgba(10, 12, 16, .9), 0 0 0 2px #c79bff, 0 0 18px #b27aff, 0 0 32px rgba(155, 93, 224, .6); }
}
@keyframes cos-void-final {
  50% { box-shadow: inset 0 0 0 1px rgba(10, 12, 16, .9), 0 0 0 3px #fff, 0 0 22px #d0a8ff, 0 0 46px rgba(180, 120, 255, .85); }
}
@keyframes cos-orbit { to { transform: rotate(360deg); } }
@keyframes cos-glitch-img {
  0%, 88%, 100% { transform: none; filter: none; }
  90% { transform: translate(-1px, 0); filter: hue-rotate(90deg) saturate(2); }
  93% { transform: translate(1px, -1px); filter: hue-rotate(-60deg); }
}

.little-hero-avatar.cos-fx-smoke .cos-layer > i {
  inset: 20% -10% -30%;
  background: radial-gradient(ellipse at 50% 100%, rgba(190, 195, 205, .55), transparent 65%);
  filter: blur(2px);
  animation: cos-smoke 3.6s ease-in-out infinite;
}
.little-hero-avatar.cos-fx-smoke { box-shadow: inset 0 0 0 1px rgba(10, 12, 16, .9), 0 0 0 2px var(--cos-ring, var(--lh-frame)), 0 0 12px rgba(180, 185, 195, .5); }
@keyframes cos-smoke { 0% { transform: translateY(30%); opacity: 0; } 40% { opacity: .9; } 100% { transform: translateY(-40%); opacity: 0; } }

/* FIRE -- the avatar is engulfed in slight flames: three flickering layers
   of flame tongues rise from the bottom of the portrait (back flames, front
   tongues, drifting embers), screen-blended so the face stays readable,
   while the ring glows and breathes like heat. All sizes are percentages,
   so it holds from the 24px roster chip up to the dossier portrait. */
.little-hero-avatar.cos-fx-fire { animation: cos-fire 1.1s ease-in-out infinite alternate; }
.little-hero-avatar.cos-fx-fire img { filter: saturate(1.15) contrast(1.05) sepia(.12); }
.little-hero-avatar.cos-fx-fire .cos-layer { mix-blend-mode: screen; overflow: hidden; }
.little-hero-avatar.cos-fx-fire .cos-layer::before,
.little-hero-avatar.cos-fx-fire .cos-layer > i,
.little-hero-avatar.cos-fx-fire .cos-layer::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 0;
  transform-origin: 50% 100%;
}
/* Tongues are anchored ON the circle's lower rim (the portrait is round, so
   a base at x=15% sits at y=86%, x=30% at y=96%, x=50% at y=100%) and rise
   toward the middle -- the flames wrap the bottom and lick up the sides. */
/* Back flames: deep red, wide, slow. */
.little-hero-avatar.cos-fx-fire .cos-layer::before {
  background:
    radial-gradient(ellipse 15% 30% at 10% 80%, rgba(255, 70, 10, .8), rgba(170, 25, 0, .4) 55%, transparent 75%),
    radial-gradient(ellipse 17% 40% at 29% 96%, rgba(255, 80, 15, .85), rgba(180, 30, 0, .45) 55%, transparent 76%),
    radial-gradient(ellipse 19% 48% at 50% 104%, rgba(255, 95, 20, .85), rgba(180, 30, 0, .45) 55%, transparent 76%),
    radial-gradient(ellipse 17% 40% at 71% 96%, rgba(255, 80, 15, .85), rgba(180, 30, 0, .45) 55%, transparent 76%),
    radial-gradient(ellipse 15% 30% at 90% 80%, rgba(255, 70, 10, .8), rgba(170, 25, 0, .4) 55%, transparent 75%);
  filter: blur(1.5px);
  animation: cos-flame-back 1.7s ease-in-out infinite alternate;
}
/* Front tongues: orange to yellow cores, quick flicker. */
.little-hero-avatar.cos-fx-fire .cos-layer > i {
  background:
    radial-gradient(ellipse 6% 20% at 7% 72%, rgba(255, 220, 120, .9), rgba(255, 120, 20, .65) 40%, transparent 72%),
    radial-gradient(ellipse 8% 32% at 21% 92%, rgba(255, 236, 150, .95), rgba(255, 150, 30, .75) 38%, transparent 72%),
    radial-gradient(ellipse 9% 42% at 39% 101%, rgba(255, 228, 140, .95), rgba(255, 130, 20, .72) 40%, transparent 72%),
    radial-gradient(ellipse 8% 50% at 57% 102%, rgba(255, 242, 170, .95), rgba(255, 145, 25, .75) 36%, transparent 72%),
    radial-gradient(ellipse 8% 32% at 77% 93%, rgba(255, 225, 130, .92), rgba(255, 125, 20, .7) 40%, transparent 72%),
    radial-gradient(ellipse 6% 20% at 93% 72%, rgba(255, 215, 115, .9), rgba(255, 115, 20, .65) 40%, transparent 72%);
  filter: blur(.5px);
  animation: cos-flame-front .9s ease-in-out infinite alternate;
}
/* Embers drifting up through the portrait. */
.little-hero-avatar.cos-fx-fire .cos-layer::after {
  background:
    radial-gradient(circle at 30% 70%, rgba(255, 210, 120, .95) 0 1.2%, transparent 2.4%),
    radial-gradient(circle at 62% 80%, rgba(255, 180, 80, .9) 0 1%, transparent 2.2%),
    radial-gradient(circle at 78% 60%, rgba(255, 220, 140, .9) 0 .9%, transparent 2%),
    radial-gradient(circle at 44% 88%, rgba(255, 170, 60, .9) 0 1.1%, transparent 2.3%);
  animation: cos-embers 2.4s linear infinite;
}
@keyframes cos-flame-back {
  0% { transform: scaleY(.88) skewX(-2deg); opacity: .8; }
  50% { transform: scaleY(1.06) skewX(2deg); opacity: .95; }
  100% { transform: scaleY(.95) skewX(-1deg); opacity: .85; }
}
@keyframes cos-flame-front {
  0% { transform: scaleY(.82) scaleX(1.02) skewX(3deg); opacity: .85; }
  35% { transform: scaleY(1.12) scaleX(.97) skewX(-3deg); opacity: 1; }
  70% { transform: scaleY(.94) scaleX(1.03) skewX(2deg); opacity: .9; }
  100% { transform: scaleY(1.05) scaleX(.98) skewX(-2deg); opacity: .95; }
}
@keyframes cos-embers {
  0% { transform: translateY(18%); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateY(-55%); opacity: 0; }
}
@keyframes cos-fire {
  from { box-shadow: inset 0 0 0 1px rgba(10, 12, 16, .9), 0 0 0 2px #ff7a1a, 0 -2px 10px #ff9a2a, 0 0 18px rgba(255, 80, 0, .5); }
  to { box-shadow: inset 0 0 0 1px rgba(10, 12, 16, .9), 0 0 0 2px #ffb347, 0 -4px 16px #ffcf5a, 0 0 26px rgba(255, 60, 0, .65); }
}

.little-hero-avatar.cos-fx-frost { box-shadow: inset 0 0 0 1px rgba(10, 12, 16, .9), 0 0 0 2px #9fe8ff, 0 0 14px #7fd6ff, 0 0 24px rgba(120, 210, 255, .45); }
.little-hero-avatar.cos-fx-frost .cos-layer { background: radial-gradient(circle, transparent 50%, rgba(210, 245, 255, .55) 100%); }
.little-hero-avatar.cos-fx-frost img { filter: saturate(.7) hue-rotate(-10deg) brightness(1.05); }

.little-hero-avatar.cos-fx-corruption { animation: cos-corrupt 2.6s ease-in-out infinite; }
.little-hero-avatar.cos-fx-corruption .cos-layer > i {
  background: conic-gradient(from 0deg, rgba(120, 0, 20, .7), transparent 25%, rgba(20, 0, 0, .8) 50%, transparent 75%, rgba(120, 0, 20, .7));
  mix-blend-mode: multiply;
  animation: cos-orbit 6s linear infinite;
}
@keyframes cos-corrupt {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(10, 12, 16, .9), 0 0 0 2px #5a0a14, 0 0 12px #8a1020; }
  50% { box-shadow: inset 0 0 0 1px rgba(10, 12, 16, .9), 0 0 0 2px #1a0005, 0 0 20px #b0142a; }
}

.little-hero-avatar.cos-fx-glitch { animation: cos-glitch-ring 2.4s steps(1) infinite; }
.little-hero-avatar.cos-fx-glitch img { animation: cos-glitch-img 2.4s steps(1) infinite; }
@keyframes cos-glitch-ring {
  0%, 84%, 100% { box-shadow: inset 0 0 0 1px rgba(10, 12, 16, .9), 0 0 0 2px var(--cos-ring, var(--lh-frame)), 0 0 9px var(--cos-ring, var(--lh-frame)); }
  86% { box-shadow: inset 0 0 0 1px rgba(10, 12, 16, .9), -2px 0 0 2px #ff2a6d, 2px 0 0 2px #21e6ff; }
  90% { box-shadow: inset 0 0 0 1px rgba(10, 12, 16, .9), 2px 0 0 2px #ff2a6d, -2px 0 0 2px #21e6ff; }
}

@media (prefers-reduced-motion: reduce) {
  .little-hero-avatar[class*="cos-"],
  .little-hero-avatar[class*="cos-"] img,
  .little-hero-avatar .cos-layer > i,
  .little-hero-avatar .cos-layer::before,
  .little-hero-avatar .cos-layer::after { animation: none !important; }
}

/* ---------- Premium /command cards and screen effects ---------- */
.chat-system-card.shadow-fx-card { border-color: rgba(190, 120, 255, .55) !important; box-shadow: 0 0 16px rgba(155, 93, 224, .25); }
.chat-system-card.shadow-fx-card .chat-system-label { color: #d7b8ff !important; }
.chat-system-card.shadow-fx-card-smite { border-color: rgba(255, 220, 120, .6) !important; box-shadow: 0 0 16px rgba(255, 210, 90, .25); }
.chat-system-card.shadow-fx-card-freeze { border-color: rgba(140, 220, 255, .6) !important; box-shadow: 0 0 16px rgba(120, 210, 255, .25); }
.chat-system-card.shadow-fx-card-rupture { border-color: rgba(255, 70, 80, .6) !important; box-shadow: 0 0 16px rgba(255, 60, 70, .25); }

.shadow-fx-layer {
  position: fixed;
  inset: 0;
  /* Theatre belongs behind modal UI. Cosmetic commands must never block the
     Market, Dossier or any other critical overlay. */
  z-index: 7900;
  pointer-events: none;
  display: grid;
  place-items: center;
  animation: shadow-fx-fade 1.9s ease-out forwards;
}
.shadow-fx-layer > i { position: absolute; inset: 0; opacity: .48; }
.shadow-fx-layer > b {
  position: relative;
  opacity: .78;
  font: 900 clamp(1.8rem, 5vw, 4rem)/1 var(--font-machine, ui-monospace, monospace);
  letter-spacing: .35em;
  color: #fff;
  text-shadow: 0 0 24px currentColor;
}
@keyframes shadow-fx-fade { 0% { opacity: 0; } 12% { opacity: 1; } 70% { opacity: 1; } 100% { opacity: 0; } }

.shadow-fx-smite > i { background: linear-gradient(90deg, transparent 48%, #fff7d0 49.5%, #ffd35a 50%, #fff7d0 50.5%, transparent 52%), radial-gradient(circle at 50% 60%, rgba(255, 220, 120, .45), transparent 55%); animation: shadow-fx-flash .35s steps(2) 3; }
.shadow-fx-smite > b { color: #ffd35a; }
.shadow-fx-freeze > i { background: radial-gradient(circle, transparent 40%, rgba(170, 230, 255, .55)); box-shadow: inset 0 0 120px rgba(200, 240, 255, .7); }
.shadow-fx-freeze > b { color: #bdefff; }
.shadow-fx-glitch > i { background: repeating-linear-gradient(0deg, rgba(255, 42, 109, .18) 0 3px, transparent 3px 9px), repeating-linear-gradient(90deg, rgba(33, 230, 255, .12) 0 2px, transparent 2px 13px); animation: shadow-fx-jitter .12s steps(2) infinite; }
.shadow-fx-glitch > b { color: #ff2a6d; text-shadow: -4px 0 #21e6ff, 4px 0 #ff2a6d; animation: shadow-fx-jitter .1s steps(2) infinite; }
.shadow-fx-omen > i { background: radial-gradient(circle, rgba(60, 0, 90, .15), rgba(10, 0, 20, .8) 75%); }
.shadow-fx-omen > b { color: #b98cff; }
.shadow-fx-rupture > i { background: linear-gradient(104deg, transparent 49%, #ff3b46 49.6%, #1a0003 50%, #ff3b46 50.4%, transparent 51%), radial-gradient(circle, rgba(255, 50, 60, .25), transparent 60%); animation: shadow-fx-shake .18s linear 6; }
.shadow-fx-rupture > b { color: #ff5d66; }
.shadow-fx-vanish > i { background: radial-gradient(ellipse at 50% 70%, rgba(200, 205, 215, .5), transparent 60%); filter: blur(8px); }
.shadow-fx-vanish > b { color: #d7dce4; letter-spacing: .6em; filter: blur(.5px); }
@keyframes shadow-fx-flash { 50% { opacity: .2; } }
@keyframes shadow-fx-jitter { 50% { transform: translate(3px, -2px); } }
@keyframes shadow-fx-shake { 25% { transform: translate(-6px, 3px); } 75% { transform: translate(6px, -3px); } }

/* ---------- HUD chip is the market's door ---------- */
#game-screen .hero-stat-coins[role="button"] { cursor: pointer; }
#game-screen .hero-stat-coins[role="button"]:hover,
#game-screen .hero-stat-coins[role="button"]:focus-visible { border-color: rgba(190, 240, 120, .8) !important; box-shadow: 0 0 12px rgba(160, 240, 70, .3); outline: none; }

/* =========================================================
   MARKET TERMINAL
   ========================================================= */
.smk-overlay {
  --smk-red: #8f1822;
  --smk-black: #15171c;
  --smk-zero: #5b2a96;
  --smk-gold: #e8b84a;
  --smk-green: #c9f08c;
  position: fixed;
  inset: 0;
  z-index: 8000;
  display: grid;
  place-items: start center;
  overflow-y: auto;
  padding: clamp(10px, 3vh, 40px) 16px;
  background: radial-gradient(ellipse at 50% 0%, rgba(110, 40, 180, .18), transparent 60%), rgba(3, 4, 7, .92);
  backdrop-filter: blur(3px);
  font-family: var(--font-machine, ui-monospace, monospace);
  color: #d6dce4;
}
.smk-overlay[hidden] { display: none; }
body.smk-open { overflow: hidden; }

.smk-panel {
  position: relative;
  width: min(1180px, 100%);
  border: 1px solid #3a3350;
  border-top: 2px solid #7e4fd0;
  background: linear-gradient(180deg, #13111a, #08090c);
  box-shadow: 0 30px 90px rgba(0, 0, 0, .8), 0 0 40px rgba(126, 79, 208, .12);
}
.smk-head {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 18px;
  padding: 20px 24px 16px;
  border-bottom: 1px solid #2c2838;
}
.smk-head h2 { margin: 0; font-size: clamp(1.5rem, 3.4vw, 2.3rem); letter-spacing: .28em; color: #efe7ff; text-shadow: 0 0 18px rgba(155, 93, 224, .45); }
.smk-head small { display: block; margin-top: 6px; font-size: 11px; letter-spacing: .2em; color: #9d93b5; }
.smk-balance { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border: 1px solid rgba(150, 200, 90, .45); background: rgba(20, 30, 10, .5); }
.smk-balance img { width: 26px; aspect-ratio: 256 / 251; filter: drop-shadow(0 0 5px rgba(140, 210, 60, .45)); }
.smk-balance b { font-size: 22px; color: var(--smk-green); }
.smk-balance span { font-size: 11px; letter-spacing: .18em; color: #9fb487; }
.smk-close, .smk-btn, .smk-tab, .smk-bet, .smk-step, .smk-chip, .smk-spin {
  font-family: inherit;
  cursor: pointer;
  border: 1px solid #4a4560;
  background: linear-gradient(180deg, #1d1a26, #111016);
  color: #ddd6ee;
  letter-spacing: .14em;
}
.smk-close { padding: 10px 16px; font-size: 12px; }
.smk-close:hover { border-color: var(--smk-gold); color: #ffd98a; }

.smk-tabs { display: flex; gap: 4px; padding: 12px 24px 0; border-bottom: 1px solid #2c2838; }
.smk-tab { padding: 11px 18px; font-size: 13px; border-bottom: none; color: #9d93b5; }
.smk-tab.is-active { color: #fff; border-color: #7e4fd0; background: linear-gradient(180deg, #2b2140, #15121c); box-shadow: inset 0 2px 0 #b58cff; }

.smk-flash { margin: 14px 24px 0; padding: 10px 14px; border: 1px solid rgba(150, 200, 90, .5); background: rgba(40, 60, 20, .35); color: var(--smk-green); font-size: 13px; letter-spacing: .12em; }
.smk-flash-error { border-color: rgba(224, 96, 95, .6); background: rgba(80, 20, 20, .35); color: #ff9c9a; }
.smk-body { padding: 18px 24px 26px; }
.smk-empty { padding: 40px; text-align: center; color: #8d86a0; letter-spacing: .2em; font-size: 13px; }
.smk-fine, .smk-rule { margin: 14px 0 0; font-size: 11px; letter-spacing: .14em; color: #857d99; line-height: 1.6; }
.smk-rule { text-align: center; color: #a59bc0; margin-top: 22px; }

/* ---- market grid ---- */
.smk-group + .smk-group { margin-top: 22px; }
.smk-group h3, .smk-board h3 { margin: 0 0 12px; font-size: 14px; letter-spacing: .3em; color: #c9a8ff; }
.smk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.smk-item {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  padding: 14px;
  border: 1px solid #2f2a3d;
  background: linear-gradient(180deg, #16131e, #0d0c12);
}
.smk-item.is-owned { border-color: #3f5a2a; }
.smk-item.is-equipped { border-color: #8fd14f; box-shadow: inset 0 0 18px rgba(140, 210, 60, .12); }
.smk-item.is-relic { border-color: #6a5320; background: linear-gradient(180deg, #1b1609, #0d0b07); }
.smk-preview { display: grid; place-items: center; min-height: 64px; }
.smk-preview .little-hero-avatar { width: 54px; height: 54px; flex-basis: 54px; }
.smk-preview-title .cos-title { margin: 0; white-space: normal; text-align: center; }
.smk-preview-cmd { font-size: 15px; color: #d7b8ff; letter-spacing: .08em; border: 1px dashed #4a3a6a; border-radius: 4px; }
.smk-item-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 8px; }
.smk-item h4 { margin: 0; font-size: 15px; letter-spacing: .12em; color: #f1ecfb; }
.smk-item p { margin: 6px 0 0; font-size: 12px; line-height: 1.45; color: #a79fbb; }
.smk-tag { padding: 2px 7px; font-size: 10px; letter-spacing: .14em; border: 1px solid; white-space: nowrap; }
.smk-tag-owned { color: #b9e886; border-color: rgba(140, 210, 60, .5); }
.smk-tag-relic { color: var(--smk-gold); border-color: rgba(232, 184, 74, .55); }
.smk-tiers { margin: 8px 0 0; padding: 0; list-style: none; display: grid; gap: 2px; font-size: 11px; color: #766f89; }
.smk-tiers li b { display: inline-block; width: 26px; color: #8d83a8; }
.smk-tiers li.is-owned { color: #c9f08c; }
.smk-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.smk-btn { padding: 7px 11px; font-size: 11.5px; }
.smk-btn:disabled { opacity: .45; cursor: not-allowed; }
.smk-btn-buy { border-color: #6a4fa0; }
.smk-btn-buy:not(:disabled):hover { border-color: #b58cff; color: #fff; }
.smk-btn-buy.is-armed { border-color: var(--smk-gold); color: #ffd98a; background: #2a2010; animation: smk-armed 1s ease-in-out infinite; }
.smk-btn-equip { border-color: #3f5a2a; color: #c9f08c; }
.smk-btn-equipped { border-color: #8fd14f; color: #0c1206; background: #9bd65d; }
.smk-btn-locked { border-style: dashed; color: #8d86a0; white-space: normal; text-align: left; }
.smk-hint { align-self: center; font-size: 11px; letter-spacing: .12em; color: #9fb487; }
@keyframes smk-armed { 50% { box-shadow: 0 0 12px rgba(232, 184, 74, .5); } }

/* ---- roulette ---- */
.smk-roulette { display: grid; grid-template-columns: minmax(280px, 420px) 1fr; gap: 28px; align-items: start; }
.smk-roulette-stage { display: grid; gap: 16px; justify-items: center; }
.smk-wheel-wrap { position: relative; width: min(380px, 80vw); aspect-ratio: 1; }
.smk-wheel {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 10px solid #0a0a0d;
  box-shadow: 0 0 0 2px #3a3350, 0 0 0 5px #0a0a0d, 0 0 34px rgba(155, 93, 224, .35), 0 0 60px rgba(180, 20, 40, .2), inset 0 0 40px rgba(0, 0, 0, .8);
}
.smk-pocket {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 34px;
  margin: -12px 0 0 -17px;
  text-align: center;
  font-weight: 800;
  font-size: 18px;
  color: #f2eefa;
  text-shadow: 0 1px 2px #000;
  transform: rotate(var(--a)) translateY(calc(min(380px, 80vw) * -.39));
}
.smk-wheel-hub {
  position: absolute;
  inset: 34%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle, #1c1826, #07070a 70%);
  box-shadow: 0 0 0 3px #2a2438, 0 0 18px rgba(155, 93, 224, .45);
}
.smk-wheel-hub img { width: 70%; aspect-ratio: 256 / 251; filter: drop-shadow(0 0 8px rgba(140, 210, 60, .5)); }
.smk-wheel-pointer {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: -6px;
  width: 0;
  height: 0;
  margin-left: -12px;
  border-left: 12px solid transparent;
  border-right: 12px solid transparent;
  border-top: 24px solid var(--smk-gold);
  filter: drop-shadow(0 0 6px rgba(232, 184, 74, .7));
}
.smk-result { display: grid; justify-items: center; gap: 4px; min-height: 110px; text-align: center; }
.smk-result strong { font-size: 54px; line-height: 1; color: #fff; }
.smk-result em { font-style: normal; font-size: 15px; letter-spacing: .24em; color: #cfc6e4; }
.smk-result b { font-size: 22px; letter-spacing: .1em; }
.smk-result-win b { color: var(--smk-green); }
.smk-result-loss b { color: #ff7a78; }
.smk-result.smk-pocket-red strong { color: #ff5a64; text-shadow: 0 0 20px rgba(255, 60, 70, .6); }
.smk-result.smk-pocket-zero strong { color: #c49bff; text-shadow: 0 0 20px rgba(155, 93, 224, .7); }
.smk-result-idle { align-content: center; }
.smk-result-idle em { color: #857d99; font-size: 13px; }

.smk-board h3 + * { margin-bottom: 0; }
.smk-board h3:not(:first-child) { margin-top: 18px; }
.smk-numbers { display: grid; grid-template-columns: repeat(13, minmax(0, 1fr)); gap: 4px; }
.smk-bet { padding: 10px 4px; font-size: 14px; font-weight: 700; }
.smk-num-red { background: linear-gradient(180deg, #a01d28, #5c0c14); border-color: #c33a45; }
.smk-num-black { background: linear-gradient(180deg, #25272d, #0e0f12); border-color: #454a55; }
.smk-num-zero { background: linear-gradient(180deg, #6b3fa0, #34185a); border-color: #9b6de0; }
.smk-outside { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 4px; margin-top: 6px; }
.smk-out { font-size: 12px; }
.smk-out-red { border-color: #c33a45; color: #ff9aa0; }
.smk-groups { display: grid; grid-template-columns: 110px repeat(4, minmax(0, 1fr)); gap: 4px; margin-top: 6px; align-items: center; }
.smk-groups span { font-size: 11px; letter-spacing: .1em; color: #8d86a0; }
.smk-grp { font-size: 12px; }
.smk-bet:hover { border-color: #b58cff; }
.smk-bet.is-selected { outline: 2px solid var(--smk-gold); outline-offset: 1px; box-shadow: 0 0 12px rgba(232, 184, 74, .45); color: #fff; }
.smk-wager { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.smk-wager input { width: 92px; padding: 9px 10px; font: 700 16px var(--font-machine, ui-monospace, monospace); color: #fff; background: #0b0a10; border: 1px solid #4a4560; text-align: center; }
.smk-step { width: 38px; height: 38px; font-size: 18px; }
.smk-chip { min-width: 44px; height: 38px; border-radius: 19px; font-size: 14px; border-color: #3f5a2a; color: var(--smk-green); }
.smk-chip.is-selected { background: #2d4418; border-color: #8fd14f; }
.smk-slip { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 14px; padding: 12px 14px; border: 1px solid #3a3350; background: #0e0c14; font-size: 13px; letter-spacing: .1em; color: #b5acc9; }
.smk-slip span:first-child { color: #fff; font-weight: 700; }
.smk-slip b { color: #fff; }
.smk-spin { width: 100%; margin-top: 14px; padding: 15px; font-size: 16px; font-weight: 800; letter-spacing: .24em; border-color: #7e4fd0; background: linear-gradient(180deg, #3a2266, #1d1233); color: #fff; }
.smk-spin:not(:disabled):hover { box-shadow: 0 0 20px rgba(155, 93, 224, .5); }
.smk-spin.is-armed { border-color: var(--smk-gold); background: linear-gradient(180deg, #5c3d0c, #2a1b05); color: #ffe3a0; animation: smk-armed 1s ease-in-out infinite; }
.smk-spin:disabled { opacity: .5; cursor: not-allowed; }

/* ---- ledger ---- */
.smk-ledger { width: 100%; border-collapse: collapse; font-size: 14px; }
.smk-ledger th { padding: 8px 10px; text-align: left; font-size: 11px; letter-spacing: .18em; color: #8d86a0; border-bottom: 1px solid #3a3350; }
.smk-ledger td { padding: 10px; border-bottom: 1px solid rgba(255, 255, 255, .05); color: #d6d0e4; }
.smk-ledger .num { text-align: right; font-variant-numeric: tabular-nums; }
.smk-ledger td.pos { color: var(--smk-green); }
.smk-ledger td.neg { color: #ff8b88; }
.smk-ledger tr.smk-kind-roulette td:nth-child(2) { color: #c9a8ff; }

@media (max-width: 860px) {
  :where(html:not(.asoc-mobile)) .smk-roulette { grid-template-columns: 1fr; }
  :where(html:not(.asoc-mobile)) .smk-numbers { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  :where(html:not(.asoc-mobile)) .smk-outside { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  :where(html:not(.asoc-mobile)) .smk-groups { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  :where(html:not(.asoc-mobile)) .smk-groups span { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  :where(html:not(.asoc-mobile)) .smk-head { grid-template-columns: 1fr auto; padding: 16px; }
  :where(html:not(.asoc-mobile)) .smk-close { grid-column: 1 / -1; }
  :where(html:not(.asoc-mobile)) .smk-body { padding: 14px 12px 20px; }
  :where(html:not(.asoc-mobile)) .smk-tabs { padding: 10px 12px 0; overflow-x: auto; }
  :where(html:not(.asoc-mobile)) .smk-tab { padding: 10px 12px; font-size: 12px; }
  :where(html:not(.asoc-mobile)) .smk-grid { grid-template-columns: 1fr; }
  :where(html:not(.asoc-mobile)) .smk-ledger { font-size: 12px; }
  :where(html:not(.asoc-mobile)) .smk-ledger td, :where(html:not(.asoc-mobile)) .smk-ledger th { padding: 7px 5px; }
}
@media (prefers-reduced-motion: reduce) {
  .smk-btn-buy.is-armed, .smk-spin.is-armed { animation: none; }
}

/* =========================================================
   V1.1 -- NAME STYLES, SIGILS, CELEBRATIONS, RELICS, DOSSIER
   ========================================================= */

/* ---------- Name styles (id guard beats page-level !important colours) ---------- */
[data-dossier]:not([data-dossier=""]) { cursor: pointer; }
[data-dossier]:not([data-dossier=""]):hover { text-decoration: underline; text-underline-offset: 3px; }
.cos-name.cos-name-ember:not(#cos-guard):not(#cos-guard2) { color: #ff9a3c !important; text-shadow: 0 0 8px rgba(255, 110, 20, .55); }
.cos-name.cos-name-frost:not(#cos-guard):not(#cos-guard2) { color: #aee9ff !important; text-shadow: 0 0 8px rgba(120, 210, 255, .6); }
.cos-name.cos-name-gold:not(#cos-guard):not(#cos-guard2) {
  color: #f2d38a !important;
  background: linear-gradient(180deg, #fff3cf, #e8b84a 60%, #b8862e);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  text-shadow: none;
  filter: drop-shadow(0 0 5px rgba(232, 184, 74, .45));
}
.cos-name.cos-name-void:not(#cos-guard):not(#cos-guard2) { color: #c49bff !important; text-shadow: 0 0 10px rgba(155, 93, 224, .75); animation: cos-name-flicker 4s steps(1) infinite; }
.cos-name.cos-name-burnt:not(#cos-guard):not(#cos-guard2) { color: #e9d6c0 !important; text-shadow: 0 0 1px #000, 0 1px 3px #6b1d00, 0 0 9px rgba(160, 50, 0, .7); }
@keyframes cos-name-flicker { 0%, 86%, 92%, 100% { opacity: 1; } 88% { opacity: .35; } 90% { opacity: .85; } }

/* ---------- Sigils ---------- */
.cos-sigil {
  display: inline-grid;
  place-items: center;
  min-width: 1.15em;
  margin-left: 5px;
  font-size: .95em;
  line-height: 1;
  vertical-align: middle;
  color: #d7b8ff;
  text-shadow: 0 0 6px rgba(155, 93, 224, .6);
}
.cos-sigil.cos-sigil-skull { color: #e6e1d6; text-shadow: 0 0 6px rgba(255, 255, 255, .35); }
.cos-sigil.cos-sigil-crown { color: #f0c65d; text-shadow: 0 0 6px rgba(232, 184, 74, .6); }
.cos-sigil.cos-sigil-dagger { color: #ff6b73; text-shadow: 0 0 6px rgba(255, 60, 70, .5); }
.cos-reward-ghost { filter: drop-shadow(0 0 4px rgba(190, 150, 255, .75)); }
.cos-sigil-coin img { width: 1.05em; aspect-ratio: 256 / 251; filter: drop-shadow(0 0 3px rgba(140, 210, 60, .5)); }

/* ---------- Correct-answer celebrations ---------- */
:is(.chat-message, .gm-chat-message).cel :is(.chat-message-main, .gm-chat-message-main) { position: relative; }

/* THE BROKER NOD -- a gold ACCEPTED stamp. */
.cel-stamp {
  position: absolute;
  top: 4px;
  right: 34px;
  z-index: 3;
  padding: 2px 9px;
  border: 2px solid rgba(232, 184, 74, .85);
  border-radius: 3px;
  color: #f0c65d;
  font: 900 .7rem/1.3 var(--font-machine, ui-monospace, monospace);
  letter-spacing: .24em;
  transform: rotate(-9deg);
  opacity: .82;
  pointer-events: none;
  text-shadow: 0 0 6px rgba(232, 184, 74, .5);
  box-shadow: inset 0 0 8px rgba(232, 184, 74, .25);
}
.cel-play .cel-stamp { animation: cel-stamp 0.7s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes cel-stamp {
  0% { transform: rotate(-9deg) scale(3); opacity: 0; }
  55% { transform: rotate(-9deg) scale(.9); opacity: 1; }
  100% { transform: rotate(-9deg) scale(1); opacity: .82; }
}

/* SHATTER -- cracks across the answer. */
.cel-cracks { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: hidden; border-radius: inherit; }
.cel-cracks i { position: absolute; background: linear-gradient(90deg, transparent, rgba(220, 235, 255, .55), transparent); height: 1px; transform-origin: left center; }
.cel-cracks i:nth-child(1) { left: 8%; top: 30%; width: 62%; transform: rotate(14deg); }
.cel-cracks i:nth-child(2) { left: 40%; top: 72%; width: 48%; transform: rotate(-19deg); }
.cel-cracks i:nth-child(3) { left: 55%; top: 18%; width: 30%; transform: rotate(52deg); }
.cel-play .cel-cracks i { animation: cel-crack .5s ease-out both; }
.cel-play .cel-cracks i:nth-child(2) { animation-delay: .08s; }
.cel-play .cel-cracks i:nth-child(3) { animation-delay: .15s; }
.cel-play.cel-shatter :is(.chat-message-main, .gm-chat-message-main) { animation: cel-shake .45s linear; }
@keyframes cel-crack { from { clip-path: inset(0 100% 0 0); background: #fff; } to { clip-path: inset(0 0 0 0); } }
@keyframes cel-shake { 20% { transform: translate(-3px, 1px); } 40% { transform: translate(3px, -1px); } 60% { transform: translate(-2px, 0); } 80% { transform: translate(1px, 1px); } }

/* BLOOD INK -- the answer rewrites itself in red. */
.cel-blood-ink:not(#cos-guard):not(#cos-guard2) :is(.chat-message-text, .gm-chat-message-text) { color: #ff4a55 !important; text-shadow: 0 0 10px rgba(200, 20, 30, .55); }
.cel-play.cel-blood-ink :is(.chat-message-text, .gm-chat-message-text) { animation: cel-ink 1.1s ease-out both; }
@keyframes cel-ink { from { clip-path: inset(0 100% 0 0); filter: blur(2px); } to { clip-path: inset(0 0 0 0); filter: none; } }

/* FINAL WITNESS -- Final only; a dark room and a witness tag. */
.cel-witness-tag {
  position: absolute;
  top: -9px;
  right: 30px;
  z-index: 3;
  padding: 1px 8px;
  background: #0a0710;
  border: 1px solid #b58cff;
  color: #e6d4ff;
  font: 800 .6rem/1.5 var(--font-machine, ui-monospace, monospace);
  letter-spacing: .26em;
  box-shadow: 0 0 12px rgba(155, 93, 224, .6);
  pointer-events: none;
}
.cel-final-witness :is(.chat-message-main, .gm-chat-message-main) { box-shadow: 0 0 0 1px rgba(181, 140, 255, .55), 0 0 22px rgba(155, 93, 224, .35) !important; }
.cel-witness-layer > i { background: radial-gradient(circle, rgba(40, 10, 70, .2), rgba(4, 2, 8, .92) 70%); }
.cel-witness-layer > b { color: #e6d4ff; letter-spacing: .5em; text-shadow: 0 0 30px #9b5de0; }

@media (prefers-reduced-motion: reduce) {
  .cel-play *, .cel-play { animation: none !important; }
  .cos-name.cos-name-void:not(#cos-guard):not(#cos-guard2) { animation: none; }
}

/* ---------- Market previews for the new kinds ---------- */
.smk-preview-name span { font-weight: 800; font-size: 14px; letter-spacing: .06em; text-align: center; word-break: break-word; }
.smk-preview-sigil .cos-sigil { margin: 0; font-size: 34px; }
.smk-preview-cel { position: relative; border: 1px solid #3a3350; border-radius: 4px; background: #0e0c14; overflow: hidden; }
.smk-preview-cel span { font-size: 11px; font-weight: 800; letter-spacing: .14em; color: #cfe8b8; }
.smk-preview-cel.cel-demo-cel-broker-nod::after { content: "ACCEPTED"; position: absolute; top: 6px; right: 2px; padding: 0 3px; border: 1.5px solid #e8b84a; color: #f0c65d; font-size: 7px; font-weight: 900; letter-spacing: .12em; transform: rotate(-12deg); }
.smk-preview-cel.cel-demo-cel-shatter { background: linear-gradient(20deg, transparent 48%, rgba(220, 235, 255, .5) 49%, transparent 50%), linear-gradient(-30deg, transparent 58%, rgba(220, 235, 255, .4) 59%, transparent 60%), #0e0c14; }
.smk-preview-cel.cel-demo-cel-blood-ink span { color: #ff4a55; text-shadow: 0 0 8px rgba(200, 20, 30, .6); }
.smk-preview-cel.cel-demo-cel-final-witness { border-color: #b58cff; box-shadow: inset 0 0 18px rgba(155, 93, 224, .5); }
.smk-preview-cel.cel-demo-cel-final-witness span { color: #e6d4ff; }
.smk-preview-card { border-radius: 3px; border: 1px solid #4a4560; background: linear-gradient(180deg, #1a1812, #0e0d0a); }
.smk-preview-card span { font-size: 10px; letter-spacing: .2em; color: #b5acc9; }
.smk-preview-relic { font-size: 30px; color: #f0c65d; text-shadow: 0 0 12px rgba(232, 184, 74, .6); border: 1px solid rgba(232, 184, 74, .35); border-radius: 50%; width: 56px; height: 56px; min-height: 0; margin: 4px auto; }
.smk-preview-art { position: relative; isolation: isolate; }
.smk-preview-art::before { content: ""; position: absolute; inset: 4px; z-index: -1; background: var(--smk-art) center/contain no-repeat; filter: drop-shadow(0 0 8px rgba(0,0,0,.55)); }
.smk-preview-art > span, .smk-preview-art:not(.smk-preview-relic) { text-shadow: 0 1px 3px #000; }
.smk-preview-art.smk-preview-cmd > span, .smk-preview-art.smk-preview-cel > span { opacity: .18; }
.smk-preview-art.smk-preview-relic { color: transparent; text-shadow: none; border-color: rgba(232,184,74,.15); }
.smk-relic.is-sealed .smk-preview-relic { color: #5c5670; text-shadow: none; border-color: #3a3350; }
.smk-relic.is-sealed h4 { color: #a59bc0; }
.smk-hint-locked { color: #8d86a0; }
.smk-progress { position: relative; height: 16px; margin-top: 8px; border: 1px solid #3a3350; background: #0b0a10; }
.smk-progress i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #5b2a96, #b58cff); }
.smk-progress span { position: relative; display: block; text-align: center; font-size: 10px; line-height: 14px; letter-spacing: .12em; color: #fff; }
.smk-dossier-bar { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: space-between; padding: 12px 14px; border: 1px solid #3a3350; background: #0e0c14; font-size: 13px; letter-spacing: .14em; }
.smk-dossier-bar b { color: #f0c65d; }

/* ---------- DOSSIER overlay ---------- */
.dsr-overlay {
  position: fixed;
  inset: 0;
  z-index: 8600;
  display: grid;
  place-items: center;
  padding: 16px;
  overflow-y: auto;
  background: rgba(3, 4, 7, .82);
  backdrop-filter: blur(3px);
  font-family: var(--font-machine, ui-monospace, monospace);
}
.dsr-overlay[hidden] { display: none; }
.dsr-card {
  --dsr-accent: #b8a377;
  position: relative;
  width: min(560px, 100%);
  padding: 20px 24px 24px;
  border: 1px solid #4b4331;
  border-left: 4px solid var(--dsr-accent);
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .015) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #1b1913, #0d0c0a);
  color: #e3dccb;
  box-shadow: 0 30px 80px rgba(0, 0, 0, .75);
}
.dsr-card.dsr-card-blood { --dsr-accent: #c0202c; border-color: #4d1a1e; background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .015) 0 1px, transparent 1px 4px), linear-gradient(180deg, #221012, #0d0708); }
.dsr-card.dsr-card-void { --dsr-accent: #9b5de0; border-color: #35284d; background: radial-gradient(ellipse at 80% 0%, rgba(155, 93, 224, .22), transparent 60%), linear-gradient(180deg, #141020, #07060b); }
.dsr-card.dsr-card-gilded { --dsr-accent: #e8b84a; border-color: #6a5320; background: radial-gradient(ellipse at 50% 0%, rgba(232, 184, 74, .18), transparent 60%), linear-gradient(180deg, #1f1a0c, #0d0b06); box-shadow: 0 30px 80px rgba(0, 0, 0, .75), 0 0 30px rgba(232, 184, 74, .12); }
.smk-preview-card.dsr-card-blood { background: linear-gradient(180deg, #3a1216, #120607); border-color: #c0202c; }
.smk-preview-card.dsr-card-void { background: radial-gradient(circle at 70% 20%, rgba(155, 93, 224, .5), #0a0712 70%); border-color: #9b5de0; }
.smk-preview-card.dsr-card-gilded { background: linear-gradient(180deg, #3a2e10, #120e05); border-color: #e8b84a; }
.dsr-loading { padding: 30px; text-align: center; letter-spacing: .24em; font-size: 13px; color: #b5acc9; }
.dsr-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.dsr-stamp { padding: 2px 10px; border: 2px solid #b0303a; color: #e0605f; font-weight: 900; font-size: 12px; letter-spacing: .3em; transform: rotate(-4deg); }
.dsr-close { padding: 8px 14px; font: 700 12px var(--font-machine, ui-monospace, monospace); letter-spacing: .16em; color: #ddd6c4; background: #16140f; border: 1px solid #5a5140; cursor: pointer; }
.dsr-close:hover { border-color: #e8b84a; color: #ffd98a; }
.dsr-ident { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
.dsr-avatar .little-hero-avatar { width: 84px; height: 84px; flex-basis: 84px; }
.dsr-ident small { display: block; font-size: 11px; letter-spacing: .22em; color: #9b927c; }
.dsr-ident h2 { margin: 4px 0 6px; font-size: clamp(1.4rem, 5vw, 2rem); letter-spacing: .06em; color: #fff; overflow-wrap: anywhere; }
.dsr-ident .cos-title { margin-left: 0; font-size: .75rem; }
.dsr-since { margin: 8px 0 0; font-size: 11px; letter-spacing: .18em; color: #8d8470; }
.dsr-section { margin-top: 20px; }
.dsr-section h3 { display: flex; justify-content: space-between; gap: 10px; margin: 0 0 10px; padding-bottom: 6px; border-bottom: 1px solid rgba(255, 255, 255, .1); font-size: 13px; letter-spacing: .3em; color: var(--dsr-accent); }
.dsr-section h3 em { font-style: normal; font-size: 11px; letter-spacing: .14em; color: #9b927c; }
.dsr-relics { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.dsr-relic { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; padding: 10px 12px; border: 1px solid rgba(232, 184, 74, .35); background: rgba(232, 184, 74, .05); }
.dsr-relic-art { width: 42px; height: 42px; border-radius: 50%; background: var(--dsr-art) center/contain no-repeat; filter: drop-shadow(0 0 7px rgba(232,184,74,.22)); }
.dsr-relic b { color: #f0c65d; font-size: 14px; letter-spacing: .14em; }
.dsr-relic b::before { content: "✦ "; }
.dsr-relic span { font-size: 12px; color: #b9b09a; }
.dsr-relic-empty { border-style: dashed; border-color: #4b4331; text-align: center; }
.dsr-relic-empty span { letter-spacing: .2em; color: #7d7563; }
.dsr-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.dsr-stat { padding: 10px 6px; text-align: center; border: 1px solid rgba(255, 255, 255, .08); background: rgba(0, 0, 0, .3); }
.dsr-stat b { display: block; font-size: 20px; color: #fff; font-variant-numeric: tabular-nums; }
.dsr-stat span { display: block; margin-top: 3px; font-size: 9.5px; letter-spacing: .14em; color: #9b927c; }
@media (max-width: 520px) {
  :where(html:not(.asoc-mobile)) .dsr-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :where(html:not(.asoc-mobile)) .dsr-avatar .little-hero-avatar { width: 62px; height: 62px; flex-basis: 62px; }
}
.smk-dossier-bar + .smk-fine { margin-bottom: 18px; }

/* =========================================================
   LOVESTRUCK avatar + /love
   ========================================================= */
/* Pink glow that beats like a heart; a soft pink wash; little hearts
   floating up through the portrait. Heart glyphs are sized in container
   units, so they scale from the roster chip to the dossier portrait. */
.little-hero-avatar.cos-fx-hearts { container-type: size; animation: cos-heartbeat 1.6s ease-in-out infinite; }
.little-hero-avatar.cos-fx-hearts .cos-layer {
  background: radial-gradient(circle at 50% 60%, transparent 42%, rgba(255, 95, 162, .28) 100%);
  mix-blend-mode: screen;
}
.little-hero-avatar.cos-fx-hearts .cos-layer > i { background: radial-gradient(circle at 50% 110%, rgba(255, 120, 190, .35), transparent 60%); }
.little-hero-avatar.cos-fx-hearts .cos-layer::before,
.little-hero-avatar.cos-fx-hearts .cos-layer::after,
.little-hero-avatar.cos-fx-hearts .cos-layer > i::before,
.little-hero-avatar.cos-fx-hearts .cos-layer > i::after {
  content: "♥";
  position: absolute;
  top: 66%;
  line-height: 1;
  font-size: 34cqw;
  color: #ff6fb1;
  text-shadow: 0 0 3px rgba(255, 60, 150, .9);
  opacity: 0;
  animation: cos-heart-rise 3s ease-in infinite;
}
.little-hero-avatar.cos-fx-hearts .cos-layer::before { left: 12%; animation-delay: 0s; }
.little-hero-avatar.cos-fx-hearts .cos-layer::after { left: 60%; font-size: 26cqw; color: #ff9fd0; animation-delay: .75s; animation-duration: 3.4s; }
.little-hero-avatar.cos-fx-hearts .cos-layer > i::before { left: 36%; font-size: 22cqw; color: #ffc2e0; animation-delay: 1.5s; animation-duration: 2.7s; }
.little-hero-avatar.cos-fx-hearts .cos-layer > i::after { left: 70%; font-size: 30cqw; color: #ff4f9a; animation-delay: 2.2s; animation-duration: 3.2s; }
@keyframes cos-heart-rise {
  0% { transform: translate(0, 0) scale(.6); opacity: 0; }
  15% { opacity: .95; }
  50% { transform: translate(-3cqw, -26cqw) scale(1); }
  85% { opacity: .8; }
  100% { transform: translate(3cqw, -54cqw) scale(1.1); opacity: 0; }
}
@keyframes cos-heartbeat {
  0%, 100% { box-shadow: inset 0 0 0 1px rgba(10, 12, 16, .9), 0 0 0 2px #ff6fb1, 0 0 10px rgba(255, 95, 162, .6); }
  12% { box-shadow: inset 0 0 0 1px rgba(10, 12, 16, .9), 0 0 0 2px #ff9fd0, 0 0 18px rgba(255, 95, 162, .85); }
  24% { box-shadow: inset 0 0 0 1px rgba(10, 12, 16, .9), 0 0 0 2px #ff6fb1, 0 0 11px rgba(255, 95, 162, .6); }
  36% { box-shadow: inset 0 0 0 1px rgba(10, 12, 16, .9), 0 0 0 2px #ffb3da, 0 0 22px rgba(255, 95, 162, .9); }
}
@media (prefers-reduced-motion: reduce) {
  .little-hero-avatar.cos-fx-hearts { animation: none; box-shadow: inset 0 0 0 1px rgba(10, 12, 16, .9), 0 0 0 2px #ff6fb1, 0 0 12px rgba(255, 95, 162, .7); }
  .little-hero-avatar.cos-fx-hearts .cos-layer::before,
  .little-hero-avatar.cos-fx-hearts .cos-layer::after,
  .little-hero-avatar.cos-fx-hearts .cos-layer > i::before,
  .little-hero-avatar.cos-fx-hearts .cos-layer > i::after { animation: none; opacity: .85; top: 55%; }
}

/* /love -- hearts drifting up over the chat log. */
.love-burst { position: fixed; z-index: 7900; pointer-events: none; overflow: hidden; }
.love-burst i {
  position: absolute;
  bottom: -40px;
  font-style: normal;
  line-height: 1;
  text-shadow: 0 0 8px currentColor, 0 2px 4px rgba(0, 0, 0, .5);
  opacity: 0;
  animation-name: love-float;
  animation-timing-function: cubic-bezier(.3, .6, .5, 1);
  animation-fill-mode: forwards;
}
@keyframes love-float {
  0% { transform: translate(0, 0) scale(.5) rotate(0); opacity: 0; }
  12% { opacity: 1; }
  45% { transform: translate(var(--sway), calc(var(--rise, 90vh) * -.48)) scale(1) rotate(var(--spin)); }
  80% { opacity: .9; }
  100% { transform: translate(calc(var(--sway) * -.6), calc(var(--rise, 90vh) * -1)) scale(1.15) rotate(calc(var(--spin) * -1)); opacity: 0; }
}
.chat-system-card.shadow-fx-card-love { border-color: rgba(255, 111, 177, .65) !important; box-shadow: 0 0 16px rgba(255, 95, 162, .3); }
.chat-system-card.shadow-fx-card-love .chat-system-label { color: #ff9fd0 !important; }

/* /drug (relic command): a short psychedelic wobble -- hue spin, swirl, blur. */
.shadow-fx-drug > i {
  background:
    radial-gradient(circle at 30% 40%, rgba(80, 255, 160, .35), transparent 45%),
    radial-gradient(circle at 70% 60%, rgba(255, 80, 230, .35), transparent 45%),
    conic-gradient(from 0deg, rgba(255, 60, 120, .25), rgba(255, 220, 60, .25), rgba(60, 255, 160, .25), rgba(60, 140, 255, .25), rgba(200, 60, 255, .25), rgba(255, 60, 120, .25));
  filter: blur(18px) hue-rotate(0deg);
  animation: shadow-fx-trip 1.9s ease-in-out forwards;
}
.shadow-fx-drug > b { color: #7dffb9; text-shadow: 0 0 22px #ff5ce1, 0 0 40px #5cffb0; animation: shadow-fx-woozy 1.9s ease-in-out forwards; }
@keyframes shadow-fx-trip { 0% { transform: scale(1) rotate(0deg); filter: blur(18px) hue-rotate(0deg); } 100% { transform: scale(1.25) rotate(40deg); filter: blur(24px) hue-rotate(320deg); } }
@keyframes shadow-fx-woozy { 0%, 100% { transform: rotate(0deg) skewX(0deg); } 25% { transform: rotate(-4deg) skewX(8deg) scale(1.05); } 50% { transform: rotate(3deg) skewX(-10deg) scale(.96); } 75% { transform: rotate(-2deg) skewX(6deg) scale(1.03); } }
.chat-system-card.shadow-fx-card-drug { border-color: rgba(125, 255, 185, .6) !important; box-shadow: 0 0 16px rgba(255, 92, 225, .3); }

/* /drug heartbeat (js/shadow-cosmetics.js drugHeartbeat): toxic green. */
.drug-heartbeat { position: fixed; inset: 0; z-index: 7900; pointer-events: none; display: grid; place-items: center; animation: drug-hb-life 3.4s ease-out forwards; }
.drug-hb-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 42%, rgba(57, 255, 20, .38) 100%); animation: drug-hb-vignette 1.05s ease-out 3; }
.drug-hb-ecg { position: absolute; left: 0; top: 50%; width: 100%; height: 26vh; transform: translateY(-50%); overflow: visible; }
.drug-hb-ecg polyline { fill: none; stroke: #39ff14; stroke-width: 4; stroke-linejoin: round; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 5px #39ff14); stroke-dasharray: 2400; stroke-dashoffset: 2400; animation: drug-hb-trace 2.1s linear .15s forwards; }
.drug-hb-heart { position: relative; width: min(34vw, 260px); aspect-ratio: 24 / 22; display: grid; place-items: center; animation: drug-hb-beat 1.05s ease-in-out 3; }
.drug-hb-heart svg { width: 100%; height: 100%; overflow: visible; }
.drug-hb-heart path { fill: #39ff14; stroke: #d4ffb0; stroke-width: .35; filter: drop-shadow(0 0 14px rgba(57, 255, 20, .9)); }
.drug-hb-ring { position: absolute; inset: 8%; border: 3px solid rgba(57, 255, 20, .85); border-radius: 50%; opacity: 0; box-shadow: 0 0 22px #39ff14; animation: drug-hb-ring 1.05s ease-out 3; }
.drug-hb-ring:nth-child(2) { animation-delay: .22s; }
.drug-hb-ring:nth-child(3) { animation-delay: .44s; }
.drug-hb-title { position: absolute; top: calc(50% + min(19vw, 150px)); font: 900 clamp(1.6rem, 4.4vw, 3.4rem)/1 var(--font-machine, ui-monospace, monospace); letter-spacing: .4em; color: #b6ff8a; text-shadow: 0 0 18px #39ff14, 0 0 40px rgba(57, 255, 20, .8); animation: shadow-fx-woozy 1.7s ease-in-out 2; }
@keyframes drug-hb-life { 0% { opacity: 0; } 6% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; } }
/* lub-dub: a strong beat, a smaller echo, then rest */
@keyframes drug-hb-beat { 0% { transform: scale(.82); } 12% { transform: scale(1.12); } 22% { transform: scale(.9); } 32% { transform: scale(1.05); } 46%, 100% { transform: scale(.84); } }
@keyframes drug-hb-ring { 0% { transform: scale(.7); opacity: .9; } 70% { opacity: .15; } 100% { transform: scale(2.3); opacity: 0; } }
@keyframes drug-hb-vignette { 0%, 100% { opacity: .35; } 12% { opacity: 1; } 32% { opacity: .8; } }
@keyframes drug-hb-trace { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .drug-heartbeat * { animation-duration: .01s !important; animation-iteration-count: 1 !important; } }

/* /freeze FLASH FREEZE (js/shadow-cosmetics.js flashFreeze). Cheap layers
   only: gradients, one shadow, transforms -- starts instantly without a GPU. */
.flash-freeze { position: fixed; inset: 0; z-index: 7900; pointer-events: none; overflow: hidden; animation: ff-life 3.2s linear forwards; }
.ff-ice { position: absolute; inset: 0; }
.ff-sheet, .ff-ice > i {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at center, rgba(150, 210, 255, .12) 18%, rgba(190, 235, 255, .5) 55%, rgba(240, 252, 255, .92) 100%),
    repeating-linear-gradient(62deg, rgba(255, 255, 255, .12) 0 2px, transparent 2px 11px),
    repeating-linear-gradient(-28deg, rgba(160, 220, 255, .06) 0 1px, transparent 1px 14px);
  opacity: 0;
}
/* One seamless sheet while frozen; the shards take over the instant it breaks. */
.ff-sheet { animation: ff-creep .55s ease-out forwards, ff-hide 0s linear 1.55s forwards; }
.ff-ice > i { animation: ff-shatter .95s cubic-bezier(.5, 0, .9, .6) var(--shatter-delay, 1.6s) forwards; }
@keyframes ff-hide { to { opacity: 0; } }
.ff-crack { position: absolute; inset: 0; width: 100%; height: 100%; }
.ff-crack polyline { fill: none; stroke: #f4fcff; stroke-width: 2.5; vector-effect: non-scaling-stroke; filter: drop-shadow(0 0 4px #8fdcff); stroke-dasharray: 1600; stroke-dashoffset: 1600; animation: ff-crack .28s ease-out .5s forwards, ff-fade .3s ease-out 1.55s forwards; }
.ff-snow > i { position: absolute; top: -12px; aspect-ratio: 1; border-radius: 50%; background: #fff; opacity: .85; animation: ff-snow linear infinite; }
.ff-title {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(1.25);
  font: 900 clamp(2.2rem, 8vw, 6rem)/1 var(--font-machine, ui-monospace, monospace);
  letter-spacing: .3em; padding-left: .3em;
  color: #e9f9ff; text-shadow: 0 0 18px #6fd2ff;
  -webkit-text-stroke: 1px rgba(120, 200, 255, .8);
  opacity: 0;
  animation: ff-title-in .35s ease-out .55s forwards, ff-title-out .45s ease-in 1.6s forwards;
}
@keyframes ff-life { 0%, 92% { opacity: 1; } 100% { opacity: 0; } }
@keyframes ff-creep { from { opacity: 0; transform: scale(1.12); } to { opacity: 1; transform: scale(1); } }
@keyframes ff-shatter { 0% { transform: translate(0, 0) rotate(0deg); opacity: 1; } 100% { transform: translate(var(--slide), var(--fall)) rotate(var(--spin)); opacity: 0; } }
@keyframes ff-crack { to { stroke-dashoffset: 0; } }
@keyframes ff-fade { to { opacity: 0; } }
@keyframes ff-snow { to { transform: translate(var(--drift), 105vh); } }
@keyframes ff-title-in { to { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes ff-title-out { to { opacity: 0; transform: translate(-50%, 30%) scale(.92) rotate(4deg); } }
@media (prefers-reduced-motion: reduce) { .flash-freeze * { animation-duration: .01s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; } }
/* The chat card: icy blue with frosted corners. */
.chat-system-card.shadow-fx-card-freeze { background: linear-gradient(135deg, rgba(200, 240, 255, .16), transparent 30%, transparent 70%, rgba(200, 240, 255, .16)), rgba(14, 30, 44, .82) !important; }

/* /hug (js/shadow-cosmetics.js hugBurst): warm, soft, ~3s. */
.hug-burst { position: fixed; inset: 0; z-index: 7900; pointer-events: none; display: grid; place-items: center; animation: hug-life 3.1s ease-out forwards; }
.hug-glow { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(255, 140, 190, .38), rgba(255, 190, 120, .12) 40%, transparent 70%); animation: hug-glow 3.1s ease-out forwards; }
.hug-pair { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -62%); display: flex; align-items: center; gap: 0; }
.hug-hearts { position: absolute; inset: 0; }
.hug-blob { --hug-c: #ff7eb6; display: grid; place-items: center; width: min(22vw, 150px); aspect-ratio: 1; border-radius: 50%; overflow: hidden; border: 5px solid var(--hug-c); background: radial-gradient(circle at 35% 30%, color-mix(in srgb, var(--hug-c) 35%, #fff), var(--hug-c) 60%, color-mix(in srgb, var(--hug-c) 70%, #000)); box-shadow: 0 0 26px var(--hug-c), 0 0 60px color-mix(in srgb, var(--hug-c) 55%, transparent); }
.hug-blob img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hug-blob b { color: #fff; font: 900 clamp(1.8rem, 6vw, 3.6rem)/1 var(--font-human, system-ui); text-shadow: 0 2px 8px rgba(160, 20, 70, .5); }
.hug-left { animation: hug-in-left 1.4s cubic-bezier(.3, .9, .3, 1.2) forwards, hug-squeeze .5s ease-in-out .95s 2; }
.hug-right { animation: hug-in-right 1.4s cubic-bezier(.3, .9, .3, 1.2) forwards, hug-squeeze .5s ease-in-out .95s 2; }
.hug-hearts > i { position: absolute; top: 52%; color: #ff6fae; font-style: normal; opacity: 0; text-shadow: 0 0 10px rgba(255, 110, 170, .8); animation: hug-heart 1.8s ease-out forwards; }
.hug-hearts > i:nth-child(3n) { color: #ffb36b; }
.hug-caption { position: absolute; top: calc(50% + min(14vw, 100px)); color: #fff0f6; font: 800 clamp(1.1rem, 2.8vw, 1.9rem)/1.2 var(--font-human, system-ui); text-shadow: 0 0 14px rgba(255, 110, 170, .9); text-align: center; max-width: 90vw; opacity: 0; animation: hug-caption .5s ease-out .9s forwards; }
.hug-caption span { display: inline-block; animation: hug-wiggle .6s ease-in-out 1.1s 2; }
@keyframes hug-life { 0% { opacity: 0; } 8% { opacity: 1; } 82% { opacity: 1; } 100% { opacity: 0; } }
@keyframes hug-glow { 0% { transform: scale(.6); opacity: 0; } 35% { transform: scale(1); opacity: 1; } 100% { transform: scale(1.15); opacity: .6; } }
@keyframes hug-in-left { from { transform: translateX(-38vw) rotate(-12deg); } to { transform: translateX(12%) rotate(0deg); } }
@keyframes hug-in-right { from { transform: translateX(38vw) rotate(12deg); } to { transform: translateX(-12%) rotate(0deg); } }
@keyframes hug-squeeze { 50% { scale: 1.08 .92; } }
@keyframes hug-heart { 0% { opacity: 0; transform: translate(0, 0) scale(.4); } 20% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--sway), -42vh) scale(1.15); } }
@keyframes hug-caption { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes hug-wiggle { 50% { transform: rotate(-14deg) scale(1.2); } }
.chat-system-card.shadow-fx-card-hug { border-color: rgba(255, 126, 182, .6) !important; box-shadow: 0 0 16px rgba(255, 126, 182, .25); }

/* SHADOW MARKET / DOSSIER VISUAL REFIT — CSS ONLY. No economy or action changes. */
.smk-overlay {
  background: radial-gradient(ellipse at 52% -10%, rgba(96,30,149,.24), transparent 52%),
    radial-gradient(ellipse at 6% 87%, rgba(119,15,45,.13), transparent 43%), rgba(3,3,8,.95);
}
.smk-panel {
  width:min(1490px,100%);
  border:1px solid #3e2d56;
  border-top:2px solid #a264e2;
  background:radial-gradient(ellipse at 80% 0,rgba(61,24,90,.15),transparent 48%),linear-gradient(180deg,#12101a,#08070e 75%);
  box-shadow:0 32px 95px rgba(0,0,0,.82),0 0 45px rgba(105,40,169,.14),inset 0 0 0 1px rgba(172,101,233,.05);
}
.smk-head { padding:23px 28px 19px;gap:20px;background:linear-gradient(90deg,rgba(60,22,70,.18),transparent 75%); }
.smk-head h2 {font-size:clamp(1.55rem,3vw,2.8rem);line-height:1.12;letter-spacing:.25em;color:#f4eaff;text-shadow:0 0 23px rgba(153,74,231,.43);}
.smk-head small {color:#aca0c5;line-height:1.6;}
.smk-balance {border-color:rgba(200,163,81,.43);background:linear-gradient(180deg,rgba(48,38,19,.45),rgba(13,12,12,.83));box-shadow:inset 0 0 12px rgba(188,128,38,.08);}
.smk-balance b {color:#f6d676;}
.smk-balance span {color:#c6ac78;}
.smk-tabs {gap:6px;padding:0 28px;border-bottom-color:#382b4b;}
.smk-tab {padding:14px 22px;border-color:#393046;color:#a99bbc;transition:border-color .2s,background .2s,color .2s,box-shadow .2s;}
.smk-tab:hover {border-color:#8357a9;color:#f5eaff;}
.smk-tab.is-active {color:#fff0ff;border-color:#a46bd9;background:linear-gradient(180deg,rgba(80,43,115,.75),rgba(25,14,41,.9));box-shadow:inset 0 3px 0 #cc97ff,0 0 16px rgba(149,64,220,.25);}
.smk-close:hover,.smk-btn:hover:not(:disabled) {border-color:#aa71df;box-shadow:0 0 12px rgba(150,67,220,.2);}
.smk-body {padding:22px 28px 34px;}
/* Banner retains the existing preview button and showcase tally. */
.smk-dossier-bar {
  position:relative;min-height:104px;padding:20px 24px;gap:20px;
  border:1px solid #604477;
  background:radial-gradient(ellipse at 82% 35%,rgba(115,46,148,.2),transparent 40%),
    repeating-linear-gradient(120deg,transparent 0 24px,rgba(165,111,211,.015) 24px 25px),
    linear-gradient(120deg,#1b1326,#100c18 65%,#181026);
  box-shadow:inset 0 0 0 3px rgba(13,8,21,.6),0 8px 28px rgba(0,0,0,.19);
}
.smk-dossier-bar:before {content:"";position:absolute;inset:6px;border:1px solid rgba(189,123,229,.12);pointer-events:none;}
.smk-dossier-bar>span {font-size:16px;letter-spacing:.17em;color:#efe7f5;}
.smk-dossier-bar b {color:#f4d77e;text-shadow:0 0 10px rgba(242,194,65,.18);}
.smk-dossier-bar .smk-btn {position:relative;padding:13px 18px;border:1px solid #935ac1;background:linear-gradient(180deg,#322045,#1b112b);color:#f6e7ff;box-shadow:0 0 16px rgba(122,42,176,.22);font-weight:700;}
.smk-dossier-bar+.smk-fine {margin:12px 3px 24px;font-size:10.5px;line-height:1.7;color:#a99bb7;}
.smk-dossier-bar~.smk-group h3 {display:flex;align-items:center;gap:14px;font-size:16px;color:#d6adf9;margin:0 0 16px;}
.smk-dossier-bar~.smk-group h3:after {content:"";height:1px;flex:1;background:linear-gradient(90deg,#ae5ccd,rgba(156,77,205,.05));}
/* Relic cards only, not the shop catalog. */
.smk-group:has(.smk-relic) .smk-grid {grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;}
.smk-relic {
  position:relative;min-width:0;min-height:153px;grid-template-columns:82px minmax(0,1fr);
  gap:14px;padding:18px 14px;
  border:1px solid #443354;background:
    radial-gradient(circle at 12% 42%,rgba(100,42,127,.14),transparent 40%),
    linear-gradient(145deg,#201829,#110e1a 75%);
  box-shadow:inset 0 0 0 1px rgba(206,142,242,.035),0 4px 12px rgba(0,0,0,.18);
  transition:border-color .2s,transform .2s,box-shadow .2s;
}
.smk-relic:before,.smk-relic:after {content:"";position:absolute;width:11px;height:11px;pointer-events:none;border-color:rgba(176,109,220,.5);border-style:solid;}
.smk-relic:before {left:4px;top:4px;border-width:1px 0 0 1px;}
.smk-relic:after {right:4px;bottom:4px;border-width:0 1px 1px 0;}
.smk-relic:hover {border-color:#9862bf;transform:translateY(-2px);box-shadow:0 8px 25px rgba(0,0,0,.3),0 0 19px rgba(133,57,181,.16);}
.smk-relic.is-owned {border-color:#6f5591;}
.smk-relic.is-equipped {border-color:#a5cc64;box-shadow:inset 0 0 14px rgba(135,200,71,.12),0 0 17px rgba(135,200,71,.08);}
.smk-relic .smk-preview-relic {
  width:76px;height:76px;min-height:0;margin:2px auto;position:relative;
  border:1px solid #70547f;border-radius:50%;
  background:radial-gradient(circle at 50% 35%,#281834,#0b0912 72%);
  box-shadow:inset 0 0 0 5px #100b19,inset 0 0 0 6px rgba(171,111,206,.22),0 0 13px rgba(132,65,172,.12);
  font-size:34px;
}
.smk-relic .smk-preview-relic:after {content:"";position:absolute;inset:-5px;border:1px solid rgba(174,110,197,.22);border-radius:50%;pointer-events:none;}
.smk-relic .smk-preview-art::before {inset:7px;z-index:0;}
.smk-relic .smk-preview-art {font-size:0;}
.smk-relic.is-sealed .smk-preview-relic {border-color:#51435b;color:#786885;}
.smk-relic.is-sealed h4 {color:#d0c1dd;}
.smk-relic .smk-item-body {min-width:0;display:flex;flex-direction:column;align-items:flex-start;}
.smk-relic .smk-item-head {width:100%;}
.smk-relic h4 {font-size:14px;letter-spacing:.07em;line-height:1.33;color:#f0e5fa;overflow-wrap:anywhere;}
.smk-relic p {margin:7px 0 0;color:#b7a9ca;font-size:11.5px;line-height:1.5;overflow-wrap:anywhere;}
.smk-relic .smk-actions {margin-top:auto;padding-top:11px;}
.smk-relic .smk-hint-locked {display:inline-flex;align-items:center;padding:5px 12px;border:1px solid rgba(166,94,191,.48);border-radius:4px;background:linear-gradient(180deg,rgba(95,46,119,.26),rgba(39,20,52,.25));color:#d6afeb;font-size:10px;letter-spacing:.17em;}
.smk-relic .smk-hint-locked:before {content:"◇";font-size:12px;margin-right:8px;color:#b789d0;}
.smk-relic .smk-progress {width:100%;height:16px;border-color:#574369;border-radius:3px;overflow:hidden;background:#0a0810;}
.smk-relic .smk-progress i {background:linear-gradient(90deg,#7236a7,#c569e8);}
.smk-relic .smk-progress span {line-height:14px;font-size:10px;}
@media(max-width:1220px){.smk-group:has(.smk-relic) .smk-grid {grid-template-columns:repeat(3,minmax(0,1fr));}}
@media(max-width:930px){.smk-group:has(.smk-relic) .smk-grid {grid-template-columns:repeat(2,minmax(0,1fr));}.smk-relic {grid-template-columns:76px minmax(0,1fr);}}
@media(max-width:560px){.smk-group:has(.smk-relic) .smk-grid {grid-template-columns:1fr;}.smk-tabs {padding:8px 12px 0;overflow-x:auto;}.smk-head {padding:16px;}.smk-body {padding:15px 12px 20px;}.smk-dossier-bar {padding:17px;}.smk-relic {min-height:126px;}}
@media(prefers-reduced-motion:reduce){.smk-relic {transition:none;}.smk-relic:hover{transform:none;}}