:root {
  --ink: #16110c;
  --ink-2: #1f1913;
  --paper: #2a221a;
  --paper-2: #332a21;
  --line: rgba(232, 210, 176, 0.12);
  --text: #f3e8d6;
  --muted: #b9a894;
  --faint: #8a7a66;
  --gold: #d4a054;
  --gold-soft: rgba(212, 160, 84, 0.16);
  --danger: #e08a6c;
  --up: #6a9a6e;
  --down: #c46a5a;
  --pass: #c46a5a;
  --lift: #6a9a6e;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --tabbar: 64px;
}

* { box-sizing: border-box; }
html, body {
  margin: 0;
  height: 100%;
  max-height: 100%;
  background: var(--ink);
  color: var(--text);
  max-width: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}
body {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  padding: 0;
  width: 100%;
  position: relative;
}

.app {
  max-width: min(480px, 100%);
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  height: var(--vv-height, 100dvh);
  max-height: var(--vv-height, 100dvh);
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background:
    radial-gradient(1200px 480px at 50% -10%, rgba(212, 160, 84, 0.09), transparent 55%),
    var(--ink);
  padding: calc(18px + var(--safe-top)) 20px calc(var(--tabbar) + 28px + var(--safe-bottom));
  box-sizing: border-box;
}
.app > .topbar { flex-shrink: 0; }
/* Swipe Read deck: keep the card inside the visible chrome (no clip under tab bar). */
.app:has(#view-read:not([hidden]):not(.is-history)) {
  overflow-y: hidden;
}
.app.is-write {
  padding-top: calc(10px + var(--safe-top));
  padding-bottom: calc(var(--tabbar) + 16px + var(--safe-bottom));
}

.topbar { padding: 8px 0 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.topbar-copy { min-width: 0; }
.app.is-write .topbar { padding: 4px 0 10px; }
.eyebrow {
  margin: 0 0 4px;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}
h1 {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 34px;
  letter-spacing: -0.03em;
}
.app.is-write h1 { font-size: 28px; }
.topbar-tag {
  display: none;
  margin: 4px 0 0;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--gold);
  text-transform: none;
  letter-spacing: 0;
}
.app.is-memorize .topbar-copy .eyebrow { display: none; }
.app.is-memorize .topbar-tag { display: block; }
.app.is-memorize .topbar-tag[hidden] { display: none; }

.lede {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}
.app:not(.is-write) .topbar { padding: 2px 0 10px; }
.app:not(.is-write) h1 { font-size: 28px; }

.read-controls {
  display: flex;
  align-items: stretch;
  gap: 8px;
  margin: 0 0 12px;
  position: relative;
  z-index: 5; /* keep Bible + sorts above deck / caught-up unlock cards */
}
.read-controls .sort-bar { flex: 1 1 auto; margin: 0; min-width: 0; }
.sort-bar {
  display: flex;
  gap: 0;
  margin: 0 0 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
  position: relative;
  z-index: 5;
}
.sort-btn {
  flex: 1;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 8px 6px;
  cursor: pointer;
}
.sort-btn[aria-pressed="true"] {
  background: var(--gold-soft);
  color: var(--text);
}
.sort-btn + .sort-btn {
  border-left: 1px solid var(--line);
}

.feed { display: flex; flex-direction: column; gap: 14px; }
.empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px 16px 48px;
  min-height: 280px;
  color: var(--muted);
}
.empty[hidden] { display: none; }
.view-read.is-empty .deck { display: none; }
.empty-copy {
  margin: 0 0 22px;
  max-width: 20em;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 18px;
  line-height: 1.45;
  color: var(--text);
}
.start-writing {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 12px 22px;
  background: var(--gold);
  color: var(--ink);
  font: inherit;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
}

.empty #feed-empty-copy {
  margin: 0 0 16px;
  max-width: 22rem;
}
.feed-next-activities {
  width: min(100%, 100%);
  max-width: 28rem;
  margin: 0 auto 8px;
}
.feed-next-unlockables.unlockables-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  width: 100%;
  text-align: left;
}
.feed-next-unlockables .unlock-card {
  width: 100%;
}
.feed-next-loading {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}
.feed-next-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}
.feed-next-btn {
  appearance: none;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 14px;
  background: var(--card, rgba(255,255,255,0.04));
  color: var(--text);
  font: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
  transition: border-color 0.15s ease, transform 0.12s ease;
}
.feed-next-btn:active { transform: scale(0.98); }
.feed-next-btn.feed-next-write_study_refs {
  border-color: color-mix(in srgb, var(--gold) 55%, var(--line));
}
.feed-next-btn.feed-next-memorize_refs {
  border-color: color-mix(in srgb, #6ecf8e 50%, var(--line));
}
.feed-next-action {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--gold);
}
.feed-next-memorize_refs .feed-next-action { color: #6ecf8e; }
.feed-next-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--text);
}
.feed-next-sub {
  font-size: 13px;
  color: var(--muted);
  line-height: 1.35;
}
.empty .start-writing { margin-top: 8px; }

.card {
  position: relative;
  background: linear-gradient(180deg, var(--paper-2), var(--paper));
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 20px 18px 16px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);
}

.ref {
  font-family: "Fraunces", Georgia, serif;
  font-size: 26px;
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin: 0 0 6px;
  color: var(--text);
  overflow-wrap: anywhere;
}

.card-title {
  margin: 0 0 10px;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 17px;
  font-weight: 500;
  color: var(--gold);
}

.study {
  margin: 0 0 12px;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 15px;
  line-height: 1.42;
  color: #efe4d2;
  overflow-wrap: anywhere;
}

.meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.author {
  font-size: 13px;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}
.author strong { color: var(--text); font-weight: 500; }
.author-by { min-width: 0; }

.votes {
  display: flex;
  gap: 6px;
}

.vote-btn {
  appearance: none;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: var(--down);
  border-radius: 999px;
  padding: 6px 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
}
.vote-btn svg { width: 14px; height: 14px; fill: currentColor; }
.vote-btn.is-up.active,
.vote-btn.is-up:hover { color: var(--lift); background: rgba(106, 154, 110, 0.16); border-color: rgba(106, 154, 110, 0.4); }
.vote-btn.is-down:hover,
.vote-btn.is-down.active { color: var(--danger); background: rgba(224, 138, 108, 0.12); border-color: rgba(224, 138, 108, 0.35); }

.note {
  margin: 0 0 12px;
  padding: 10px 12px;
  border-left: 2px solid var(--gold);
  background: var(--gold-soft);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
  border-radius: 0 10px 10px 0;
}

.write-form { display: flex; flex-direction: column; gap: 10px; }
.field { display: flex; flex-direction: column; gap: 5px; }
.field[hidden] { display: none !important; }
.field span {
  font-size: 11px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--faint);
  font-weight: 500;
}
.field em { font-style: normal; text-transform: none; letter-spacing: 0; color: #6f6253; }

input, select, textarea {
  width: 100%;
  background: var(--ink-2);
  border: 1px solid var(--line);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 12px;
  font: inherit;
  font-size: 16px;
}
textarea { resize: vertical; min-height: 88px; font-family: "Source Serif 4", Georgia, serif; line-height: 1.5; }
input:focus, select:focus, textarea:focus, .editor:focus {
  outline: none;
  border-color: rgba(212, 160, 84, 0.55);
  box-shadow: 0 0 0 3px rgba(212, 160, 84, 0.12);
}

.editor-wrap {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--ink-2);
  overflow: hidden;
}
.format-bar {
  display: flex;
  gap: 2px;
  padding: 6px 8px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.02);
}
.fmt-btn {
  width: 34px;
  height: 30px;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
}
.fmt-btn i { font-style: italic; }
.fmt-btn u { text-decoration: underline; }
.fmt-btn[aria-pressed="true"],
.fmt-btn:hover {
  background: var(--gold-soft);
  color: var(--text);
}
.write-gateway {
  margin-left: auto;
  width: 30px;
  height: 30px;
}
.write-gateway .ref-book-icon {
  width: 18px;
  height: 18px;
}
.editor {
  min-height: 120px;
  padding: 10px 12px 12px;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  white-space: pre-wrap;
  word-break: break-word;
}
.editor:empty:before {
  content: attr(data-placeholder);
  color: var(--faint);
  pointer-events: none;
}
.count.is-near { color: #e0b56a; }
.count.is-max { color: var(--gold); }
.study b, .study strong, .editor b, .editor strong { font-weight: 700; }
.study i, .study em, .editor i, .editor em { font-style: italic; }
.study u, .editor u { text-decoration: underline; }
select { min-width: 0; }

.scripture-grid {
  display: grid;
  grid-template-columns: 1.5fr 0.7fr 1fr;
  gap: 8px;
  align-items: end;
}
#ref-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
#add-reference {
  appearance: none;
  -webkit-appearance: none;
  display: block;
  align-self: flex-start;
  width: auto;
  margin: 0;
  padding: 8px 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
}
#add-reference:hover,
#add-reference:focus {
  background: transparent;
  box-shadow: none;
  outline: none;
  text-decoration: none;
}
.verse-range-wrap {
  display: flex;
  align-items: stretch;
  gap: 6px;
  width: 100%;
  min-height: 44px;
}
.verse-range-wrap input,
.verse-range-wrap select {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
  height: 44px;
  padding-top: 0;
  padding-bottom: 0;
}
.scripture-grid .field > select {
  height: 44px;
  padding-top: 0;
  padding-bottom: 0;
}
.verse-range-wrap.has-end .verse-dash {
  pointer-events: none;
}
.verse-end[hidden] {
  display: none;
}
.verse-dash {
  appearance: none;
  -webkit-appearance: none;
  flex: 0 0 44px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--ink-2);
  color: var(--gold);
  font: 600 18px/1 "IBM Plex Sans", sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.verse-dash:hover,
.verse-dash:focus {
  background: var(--gold-soft);
  color: var(--text);
}
.ref-remove {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--faint);
  font-size: 20px;
  line-height: 1;
  padding: 0 2px;
  cursor: pointer;
  flex-shrink: 0;
}
.ref-remove:hover { color: var(--danger); }
.through-version {
  display: grid;
  grid-template-columns: 0.85fr 1.35fr;
  gap: 8px;
}
@media (max-width: 420px) {
  .scripture-grid { grid-template-columns: 1fr 1fr; }
  .field-book { grid-column: 1 / -1; }
}

.count { color: var(--faint); font-size: 12px; }
.form-error { margin: 0; color: var(--danger); font-size: 14px; }

.submit {
  appearance: none;
  border: 0;
  background: var(--gold);
  color: #1a1208;
  font-weight: 600;
  font-size: 16px;
  border-radius: 14px;
  padding: 13px 16px;
  cursor: pointer;
}
.submit:disabled { opacity: 0.55; cursor: wait; }

.tabbar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: min(480px, 100%);
  height: calc(var(--tabbar) + var(--safe-bottom));
  padding: 6px 16px var(--safe-bottom);
  display: flex;
  justify-content: space-around;
  background: rgba(22, 17, 12, 0.92);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--line);
  z-index: 20;
  touch-action: manipulation;
}
.tab {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--faint);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  min-width: 72px;
  padding: 6px 8px;
  cursor: pointer;
  touch-action: manipulation;
}
.tab svg { width: 22px; height: 22px; fill: currentColor; }
.tab[aria-current="page"] { color: var(--gold); }

.toast {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--tabbar) + 18px + var(--safe-bottom));
  background: var(--paper-2);
  border: 1px solid var(--line);
  color: var(--text);
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 120; /* above deck / sheet chrome so Share feedback is never buried */
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: min(92vw, 360px);
}
.toast.show { opacity: 1; }
.toast.has-action.show { pointer-events: auto; }
.toast-msg { flex: 1 1 auto; }
.toast-action {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--gold, #d4a054);
  font: 700 13px/1 "IBM Plex Sans", sans-serif;
  cursor: pointer;
  padding: 4px 2px;
  flex: 0 0 auto;
}
.toast-action:active { opacity: 0.75; }

.gateway {
  display: inline-block;
  margin: 0 0 12px;
  color: var(--gold);
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 160, 84, 0.35);
}
.gateway:hover { border-bottom-color: var(--gold); }

.confirm {
  background: linear-gradient(180deg, var(--paper-2), var(--paper));
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 18px 18px;
}
.confirm-kicker {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}
.confirm .ref { margin-bottom: 10px; }
.confirm .gateway { display: block; margin-bottom: 20px; }

.ref-row {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 6px;
  margin-bottom: 4px;
}
.ref-row .ref {
  min-width: 0;
  flex: 0 1 auto;
}
.ref-row .ref,
.deck .card .ref-row .ref {
  margin-bottom: 0;
  padding-right: 0;
}
.ref-book {
  position: relative;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  color: var(--gold);
  width: 36px;
  height: 36px;
  padding: 0;
  margin: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  cursor: pointer;
}
.ref-book:hover {
  background: var(--gold-soft);
}
.ref-book-icon {
  width: 22px;
  height: 22px;
  pointer-events: none;
}
.ref a {
  color: inherit;
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 160, 84, 0.45);
}
.ref-book .ref-verse {
  position: absolute;
  inset: 0;
  font-size: 0;
  line-height: 0;
  color: transparent;
  background: transparent;
  text-decoration: none;
  border: 0;
  border-bottom: none;
  overflow: hidden;
  white-space: nowrap;
}

.view-read {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
}
.view-write { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.view-you { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.view-read[hidden] { display: none; }
.view-write[hidden] { display: none; }
.view-you[hidden] { display: none; }

.swipe-rail {
  position: fixed;
  top: 0;
  bottom: calc(var(--tabbar) + var(--safe-bottom));
  width: 5px;
  pointer-events: none;
  z-index: 8;
  border-radius: 0;
  opacity: 0.9;
}
.swipe-rail-left {
  left: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(176, 86, 74, 0.22) 10%,
    rgba(176, 86, 74, 0.48) 50%,
    rgba(176, 86, 74, 0.22) 90%,
    transparent 100%
  );
  box-shadow: 2px 0 14px rgba(176, 86, 74, 0.16);
}
.swipe-rail-right {
  right: 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(86, 140, 92, 0.22) 10%,
    rgba(86, 140, 92, 0.5) 50%,
    rgba(86, 140, 92, 0.22) 90%,
    transparent 100%
  );
  box-shadow: -2px 0 14px rgba(86, 140, 92, 0.16);
}
@media (min-width: 481px) {
  .swipe-rail-left { left: calc(50vw - 240px); }
  .swipe-rail-right { right: calc(50vw - 240px); }
}

.deck {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin: 0 0 8px;
  touch-action: none;
}
.deck .card {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  user-select: none;
  will-change: transform;
  padding: 0;
}
.deck .card .ref { font-size: 22px; margin-bottom: 4px; }
.deck .card .ref-row { padding-right: 88px; }
.deck .card .card-title { font-size: 15px; margin-bottom: 8px; }
.deck .card .study {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.deck .card .meta { flex-shrink: 0; margin-top: auto; }
.deck .card.is-next {
  transform: scale(0.96) translateY(10px);
  opacity: 0.72;
  pointer-events: none;
}
.deck .card.is-top { z-index: 2; cursor: grab; }
.deck .card.is-top:active { cursor: grabbing; }
.deck .card.is-entering {
  animation: card-up 0.28s ease;
}
@keyframes card-up {
  from { transform: scale(0.96) translateY(18px); opacity: 0.4; }
  to { transform: none; opacity: 1; }
}

.stamp {
  position: absolute;
  top: 18px;
  padding: 6px 12px;
  border: 3px solid;
  border-radius: 8px;
  font-weight: 700;
  letter-spacing: 0.14em;
  font-size: 18px;
  opacity: 0;
  pointer-events: none;
  transform: rotate(-12deg);
}
.stamp-up {
  left: 16px;
  color: var(--gold);
  border-color: var(--gold);
}
.stamp-down {
  right: 16px;
  color: var(--danger);
  border-color: var(--danger);
  transform: rotate(12deg);
}

.counts {
  display: flex;
  gap: 10px;
  font-size: 13px;
  color: var(--muted);
}
.counts .up { color: var(--lift); }
.counts .down { color: var(--pass); }


.overlay {
  position: fixed;
  inset: 0;
  z-index: 40;
  background: rgba(10, 8, 6, 0.62);
  backdrop-filter: blur(7px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px 18px calc(var(--tabbar) + 20px);
}
.overlay[hidden] { display: none; }

.overlay-card {
  width: min(400px, 100%);
  background: linear-gradient(180deg, var(--paper-2), var(--paper));
  border: 1px solid var(--line);
  border-radius: 18px;
  padding: 22px 20px 18px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.4);
}
.overlay-kicker {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 500;
}
.overlay-card h2 {
  margin: 0 0 12px;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.03em;
}
.overlay-copy {
  margin: 0 0 10px;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.5;
  font-family: "Source Serif 4", Georgia, serif;
}
.overlay-copy strong { color: var(--text); font-weight: 500; }
.overlay-copy-last { margin-bottom: 16px; }
.overlay-card .submit { width: 100%; margin-top: 4px; }

.pray-card { text-align: left; }
.pray-card .overlay-copy { margin-bottom: 18px; }

.whats-new-card { text-align: left; }
.whats-new-list {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.whats-new-list li {
  margin: 0;
  color: var(--muted);
  font-size: 14.5px;
  line-height: 1.45;
  font-family: "Source Serif 4", Georgia, serif;
}
.whats-new-list strong {
  color: var(--gold);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-weight: 600;
  font-size: 13.5px;
}

.tut-visual {
  display: grid;
  grid-template-columns: 1fr 56px 1fr;
  align-items: center;
  gap: 8px;
  margin: 4px 0 16px;
  padding: 12px 8px;
  background: rgba(0, 0, 0, 0.18);
  border-radius: 14px;
  border: 1px solid var(--line);
}
.tut-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  position: relative;
}
.tut-side.pass { color: var(--pass); }
.tut-side.lift { color: var(--lift); }
.tut-rail {
  position: absolute;
  top: -4px;
  bottom: -4px;
  width: 3px;
  border-radius: 999px;
  opacity: 0.7;
}
.tut-side.pass .tut-rail {
  left: 0;
  background: linear-gradient(180deg, transparent, rgba(196, 106, 90, 0.55), transparent);
}
.tut-side.lift .tut-rail {
  right: 0;
  background: linear-gradient(180deg, transparent, rgba(106, 154, 110, 0.55), transparent);
}
.tut-arrow { font-size: 20px; line-height: 1; }
.tut-label {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.tut-hint { font-size: 11px; color: var(--faint); }
.tut-card-mini {
  height: 64px;
  border-radius: 10px;
  background: linear-gradient(180deg, var(--paper-2), var(--paper));
  border: 1px solid var(--line);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}

.app-legal {
  padding-bottom: calc(28px + var(--safe-bottom));
  max-width: 560px;
}
.app-legal .topbar { padding-bottom: 10px; }
.app-legal h1 { font-size: 30px; }

.back-link {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 160, 84, 0.35);
  font-size: 13px;
  font-weight: 500;
}
.back-link:hover { border-bottom-color: var(--gold); }

.legal {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 16px;
  line-height: 1.55;
  color: #efe4d2;
}
.legal-meta {
  margin: 0 0 18px;
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--faint);
}
.legal h2 {
  margin: 22px 0 8px;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: -0.02em;
  color: var(--text);
}
.legal p { margin: 0 0 12px; }
.legal ul {
  margin: 0 0 12px;
  padding: 0 0 0 1.15em;
  color: var(--muted);
}
.legal li { margin: 0 0 6px; }
.legal a {
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid rgba(212, 160, 84, 0.35);
}
.legal a:hover { border-bottom-color: var(--gold); }
.legal code {
  font-family: "IBM Plex Sans", ui-monospace, monospace;
  font-size: 0.88em;
  color: var(--gold);
  background: var(--gold-soft);
  padding: 1px 6px;
  border-radius: 6px;
}
.legal-close {
  margin-top: 22px;
  color: var(--muted);
  font-size: 15px;
}


.module-privacy {
  margin-top: auto;
  padding: 24px 0 12px;
  text-align: center;
}
.module-privacy a {
  color: var(--faint);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-decoration: none;
}
.module-privacy a:hover { color: var(--muted); }

.legal-foot {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: calc(var(--tabbar) + 8px + var(--safe-bottom));
  width: min(480px, 100%);
  margin: 0;
  text-align: center;
  z-index: 19;
  pointer-events: none;
}
.legal-foot a {
  pointer-events: auto;
  color: var(--faint);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-decoration: none;
}
.legal-foot a:hover { color: var(--muted); }

.boot-splash {
  position: fixed;
  inset: 0;
  z-index: 80;
  background: #16110c;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: var(--text);
}
.boot-splash[hidden] { display: none; }
.boot-copy { display: none; }
.boot-title {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: clamp(40px, 11vw, 64px);
  letter-spacing: -0.03em;
  color: #f3e8d6;
  line-height: 1.05;
}
.boot-sub {
  margin: 12px 0 0;
  font-size: clamp(14px, 3.6vw, 20px);
  color: #d4a054;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.boot-mark {
  position: relative;
  width: min(56vw, 260px);
  aspect-ratio: 1;
}
.boot-icon {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 22%;
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.35);
}
.boot-heart-fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 22%;
  clip-path: inset(100% 0 0 0);
  pointer-events: none;
}
.boot-splash.is-playing .boot-heart-fill {
  animation: heartMeter 2.1s 0.25s cubic-bezier(0.22, 0.85, 0.3, 1) forwards;
}
@keyframes heartMeter {
  0% { clip-path: inset(100% 0 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}

.card-tools {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: 6px;
}
.card-share {
  appearance: none;
  -webkit-appearance: none;
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 999px;
  background: var(--gold-soft);
  color: #e8d2b0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}
.card-share:hover,
.card-share:focus {
  background: rgba(212, 160, 84, 0.28);
  color: var(--gold);
  outline: none;
}
.card-share-icon {
  width: 17px;
  height: 17px;
  pointer-events: none;
}
.deck .card.is-next .card-tools {
  pointer-events: none;
}


/* Collaborate 1.0.1 */
.invite {
  appearance: none;
  border: 1.5px solid var(--gold);
  background: transparent;
  color: var(--gold);
  font-weight: 600;
  font-size: 16px;
  border-radius: 14px;
  padding: 12px 16px;
  cursor: pointer;
  width: 100%;
}
.invite:hover,
.invite:focus {
  background: var(--gold-soft);
  outline: none;
}
.invite:disabled { opacity: 0.55; cursor: wait; }
.invite-hint {
  margin: -2px 0 0;
  color: var(--faint);
  font-size: 12px;
  line-height: 1.4;
}
.invitee-headline {
  margin: 0 0 10px;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 26px;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.gold-ref { color: var(--gold); }
.invitee-ref-row { margin: 0 0 12px; padding-right: 0; }
.invitee-ref-row .gold-ref { margin-bottom: 0; }
#body.editor,
#invitee-body.editor {
  /* Grow with content; let .app scroll so Invite / Share stay reachable (no nested trap). */
  min-height: 12em;
  max-height: none;
  overflow: visible;
}

.dual-ribbon {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 22px;
  z-index: 4;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #e8c27a 0%, #d4a054 42%, #b8863d 100%);
  box-shadow: 2px 0 10px rgba(212, 160, 84, 0.22);
  border-radius: 18px 0 0 18px;
}
.dual-ribbon span {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #1a1208;
  white-space: nowrap;
}
.card.is-dual { overflow: hidden; }
.flip-scene {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  z-index: 1; /* pin dual study face under Passage/Comments (z:5); stickers stay inside */
  transform-origin: center center;
  transform: rotateY(0deg);
  transition: transform 0.28s ease-in;
}
.card.is-folding .flip-scene {
  transform: rotateY(90deg);
  transition: transform 0.28s ease-in;
}
.card.is-unfolding .flip-scene {
  transform: rotateY(0deg);
  transition: transform 0.28s ease-out;
}
.flip-inner {
  position: relative;
  width: 100%;
  height: 100%;
}
.flip-face {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 16px 16px 42px 38px;
  background: linear-gradient(180deg, var(--paper-2), var(--paper));
  border-radius: 18px;
  overflow: hidden;
}
.flip-front {
  visibility: visible;
  z-index: 1;
}
.flip-back {
  visibility: hidden;
  z-index: 0;
}
.card.is-flipped .flip-front {
  visibility: hidden;
  z-index: 0;
}
.card.is-flipped .flip-back {
  visibility: visible;
  z-index: 1;
}
.flip-face .study {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
.flip-face .meta { flex-shrink: 0; margin-top: auto; }
.flip-btn {
  appearance: none;
  -webkit-appearance: none;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 8px;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: var(--gold);
  color: #1a1208;
  font: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  touch-action: manipulation;
}
.flip-btn:hover,
.flip-btn:focus {
  background: #e0b56a;
  outline: none;
}
.flip-icon {
  width: 18px;
  height: 18px;
  pointer-events: none;
  flex-shrink: 0;
}
.deck .card.is-dual { padding: 0; }
.deck .card.is-dual .stamp { z-index: 5; }

.invite-waiting {
  margin: 8px 0 18px;
  font-size: 16px;
  line-height: 1.45;
  color: var(--muted);
}

#invite-confirm-again { width: 100%; margin-bottom: 10px; }

.write-preview {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 10px;
}
.write-preview[hidden] { display: none; }
.write-preview-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.write-preview-ref {
  flex: 1;
  min-width: 0;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.35;
}
.write-preview-open {
  appearance: none;
  flex-shrink: 0;
  border: 1px solid var(--line);
  background: var(--gold-soft);
  color: var(--gold);
  border-radius: 999px;
  padding: 5px 10px;
  font: 500 11px/1 "IBM Plex Sans", sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
}
.write-preview-open:hover,
.write-preview-open:focus {
  background: var(--gold);
  color: #1a1208;
  outline: none;
}
.write-preview-frame-wrap {
  position: relative;
  height: 16em;
  border-radius: 10px;
  overflow: hidden;
  background: #f7f3ea;
  border: 1px solid var(--line);
}
.write-preview-frame {
  display: block;
  width: 100%;
  height: calc(16em + 240px);
  margin-top: -228px;
  border: 0;
  background: #f7f3ea;
}
.write-preview.is-blocked .write-preview-frame {
  visibility: hidden;
  pointer-events: none;
}
.write-preview-fallback {
  appearance: none;
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin: 0;
  border: 0;
  padding: 16px;
  background: rgba(20, 16, 12, 0.92);
  color: var(--text);
  cursor: pointer;
  text-align: center;
}
.write-preview-fallback[hidden] { display: none; }
.write-preview-fallback-ref {
  font-family: "Fraunces", Georgia, serif;
  font-size: 16px;
  color: var(--gold);
  line-height: 1.35;
}
.write-preview-fallback-hint {
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.04em;
}

.deck .card { perspective: 1400px; }
.gw-study-face {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding: 16px 16px 42px;
  /* Contain avatar sticker z-index (6) so they can't paint above Passage/Comments faces (z:5) */
  position: relative;
  z-index: 1;
}
.card.is-dual .gw-study-face { padding: 0; }
.gw-preview-face {
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: 18px;
  overflow: hidden;
  background: #f7f3ea;
  pointer-events: none;
  visibility: hidden;
  transform-origin: 100% 50%;
  transform: rotateY(-92deg);
  transition: transform 0.55s cubic-bezier(0.4, 0.12, 0.2, 1);
  box-shadow: -18px 0 28px rgba(0, 0, 0, 0.28);
}
.card.is-gw-open .gw-preview-face {
  pointer-events: auto;
  visibility: visible;
  transform: rotateY(0deg);
}
.card.is-dual .card-gw-frame {
  margin-left: 30px;
  width: calc(100% - 30px);
}
.card.is-dual.is-gw-open .dual-ribbon {
  z-index: 7;
}
.card-gw-frame {
  display: block;
  width: 100%;
  height: calc(100% + 228px);
  margin-top: -228px;
  border: 0;
  background: #f7f3ea;
}

.view-read.is-history .swipe-rail { display: none; }
.view-read.is-history {
  min-height: 0;
}
.deck.is-history {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow: visible;
  touch-action: pan-y;
  min-height: 0;
  flex: none;
}
.deck.is-history .card {
  position: relative;
  inset: auto;
  height: auto;
  min-height: 480px;
  flex-shrink: 0;
  cursor: default;
  will-change: auto;
}
.deck.is-history .card.is-history-card { z-index: 1; }
.deck.is-history .card.is-shared-target {
  box-shadow: 0 0 0 2px var(--gold), 0 12px 28px rgba(0, 0, 0, 0.28);
}
.deck.is-history .card .study,
.deck.is-history .flip-face .study {
  flex: 0 0 auto;
  overflow: visible;
  min-height: 0;
  touch-action: auto;
}
.deck.is-history .gw-study-face,
.deck.is-history .flip-scene {
  flex: 0 0 auto;
  height: auto;
  min-height: 0;
}
.deck.is-history .flip-inner {
  display: grid;
  height: auto;
}
.deck.is-history .flip-face {
  position: relative;
  inset: auto;
  grid-area: 1 / 1;
  height: auto;
  min-height: 480px;
  overflow: visible;
}

.card-tabs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 4px;
  padding: 0 12px;
  pointer-events: none;
}
.card-tabs .gw-tab,
.card-tabs .collab-tab {
  position: relative;
  right: auto;
  bottom: auto;
  pointer-events: auto;
}
.card.is-gw-open .card-tabs { z-index: 7; }
html.is-shot .card-tabs { z-index: 40; }
html.is-shot .gw-tab,
html.is-shot .collab-tab { bottom: auto; }

.gw-tab {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  gap: 5px;
  margin: 0 0 0 auto;
  min-height: 24px;
  height: 24px;
  padding: 3px 8px 4px;
  border: 1px solid rgba(212, 160, 84, 0.55);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: var(--gold);
  color: #1a1208;
  font: 700 10px/1 "IBM Plex Sans", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
}
.gw-tab:hover,
.gw-tab:focus {
  background: #e0b56a;
  outline: none;
}
.card.is-gw-open .gw-tab {
  background: var(--ink-2);
  color: var(--gold);
  border-color: var(--line);
}
.gw-tab-icon {
  width: 11px;
  height: 11px;
  pointer-events: none;
}
.gw-tab-label { pointer-events: none; }
.deck .card.is-next .gw-tab { pointer-events: none; }
.card.is-dual .flip-face { padding-bottom: 30px; }

html.is-shot #body.editor,
html.is-shot #invitee-body.editor {
  min-height: 56px;
}
html.is-shot .deck.is-history .card,
html.is-shot .deck.is-history .flip-face {
  min-height: 210px;
}
html.is-shot .deck.is-history { gap: 10px; }
html.is-shot .module-privacy { display: none; }
html.is-shot .deck .card,
html.is-shot .card.is-dual {
  overflow: visible;
}
html.is-shot .gw-tab { z-index: 40; }
html.is-shot .deck .card { perspective: none; }
html.is-shot .gw-preview-face {
  transform: none !important;
  bottom: 26px;
}
html.is-shot .card-gw-frame { display: none; }
html.is-shot .card.is-gw-open .gw-tab {
  background: #1f1913;
  color: #d4a054;
  border-color: rgba(212, 160, 84, 0.45);
}
html.is-shot-write .view-write .note,
html.is-shot-write label.field:has(#title),
html.is-shot-write #add-reference {
  display: none;
}

html.is-shot,
html.is-shot body {
  width: 390px !important;
  max-width: 390px !important;
  overflow-x: hidden;
}
html.is-shot .app {
  max-width: 390px !important;
  margin: 0;
}


.topbar-actions {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  flex-shrink: 0;
}

.unlockables-btn {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--gold-soft);
  color: var(--gold);
  border-radius: 999px;
  width: 36px;
  height: 36px;
  padding: 0;
  margin-top: 10px;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.unlockables-btn[hidden] { display: none; }
.unlockables-btn:hover { border-color: rgba(212, 160, 84, 0.4); }
.unlockables-key {
  width: 18px;
  height: 18px;
  display: block;
}
.shop-btn {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--gold-soft);
  color: var(--gold);
  border-radius: 999px;
  width: 36px;
  height: 36px;
  padding: 0;
  margin-top: 10px;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.shop-btn[hidden] { display: none; }
.shop-btn:hover { border-color: rgba(212, 160, 84, 0.4); }
.shop-bag {
  width: 18px;
  height: 18px;
  display: block;
}
.notify-btn {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--gold-soft);
  color: var(--gold);
  border-radius: 999px;
  width: 36px;
  height: 36px;
  padding: 0;
  margin-top: 10px;
  cursor: pointer;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.notify-btn[hidden] { display: none; }
.notify-btn:hover { border-color: rgba(212, 160, 84, 0.4); }
.notify-bell {
  width: 18px;
  height: 18px;
  display: block;
}
.notify-dot {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #c43b3b;
  border: 1.5px solid var(--ink);
  pointer-events: none;
}
.notify-dot[hidden] { display: none; }
.account-btn {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--gold-soft);
  color: var(--gold);
  border-radius: 999px;
  padding: 7px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
  margin-top: 10px;
}
.account-btn:hover { border-color: rgba(212, 160, 84, 0.4); }
.text-link {
  appearance: none;
  border: 0;
  background: none;
  padding: 0;
  color: var(--gold);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.write-signin-hint { margin-top: 0; }
input.is-account-name {
  opacity: 0.92;
  color: var(--text);
}
.account-lede { margin-bottom: 16px; }
.apple-signin-wrap,
.google-signin-wrap { margin: 0 0 18px; }
.apple-signin-wrap[hidden],
.google-signin-wrap[hidden] { display: none; }
html.ss-android #apple-signin-wrap { display: none !important; }
html.ss-ios #google-signin-wrap { display: none !important; }
.apple-signin-btn,
.google-signin-btn {
  appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 0;
  background: #fff;
  color: #111;
  font: inherit;
  font-weight: 600;
  font-size: 16px;
  border-radius: 14px;
  padding: 13px 16px;
  cursor: pointer;
}
.apple-signin-btn:disabled,
.google-signin-btn:disabled { opacity: 0.55; cursor: wait; }
.apple-signin-logo { width: 16px; height: 18px; display: block; }
.google-signin-logo { width: 18px; height: 18px; display: block; }
.auth-or {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 16px 0 0;
  color: var(--faint);
  font-size: 13px;
}
.auth-or::before,
.auth-or::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}
.account-version-field { margin: 18px 0 10px; }
#account-guest .account-version-field { margin: 22px 0 0; }
.account-actions { margin: 18px 0 8px; display: flex; flex-direction: column; gap: 10px; }
.invite-danger {
  color: var(--danger);
  border-color: rgba(224, 138, 108, 0.55);
}
.invite-danger:hover,
.invite-danger:focus {
  background: rgba(224, 138, 108, 0.12);
}
.my-studies-heading {
  margin: 0 0 10px;
  font-family: "Fraunces", Georgia, serif;
  font-size: 22px;
  letter-spacing: -0.03em;
}
.my-studies { display: flex; flex-direction: column; gap: 8px; }
.my-study-row {
  appearance: none;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--paper-2), var(--paper));
  color: var(--text);
  border-radius: 14px;
  padding: 12px 14px;
  cursor: pointer;
  display: grid;
  gap: 2px;
}
.my-study-row:hover { border-color: rgba(212, 160, 84, 0.35); }
.my-study-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 17px;
  letter-spacing: -0.02em;
}
.my-study-ref { color: var(--gold); font-size: 13px; font-weight: 500; }
.my-study-date { color: var(--faint); font-size: 12px; }
.my-study-archived {
  margin-left: 8px;
  color: var(--muted);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 10px;
}
.my-study-detail { margin-top: 14px; }
.my-study-face + .my-study-face {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.invitee-host-card {
  margin: 8px 0 18px;
  min-height: 0;
}
.invitee-host-card .study {
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
}
#invitee-body.editor { min-height: 168px; }

.collab-tab {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  margin: 0;
  min-height: 24px;
  height: 24px;
  padding: 3px 8px 4px;
  border: 1px solid rgba(212, 160, 84, 0.55);
  border-bottom: 0;
  border-radius: 8px 8px 0 0;
  background: var(--ink-2);
  color: var(--gold);
  font: 700 10px/1 "IBM Plex Sans", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
}
.collab-tab:hover, .collab-tab:focus { background: var(--gold-soft); outline: none; }
.card.is-gw-open .collab-tab { display: none; }
.deck .card.is-next .collab-tab { pointer-events: none; }

.card .card-tabs .gw-tab,
.card .card-tabs .collab-tab {
  position: relative;
  right: auto;
  left: auto;
  bottom: auto;
}


.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.meta-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.comments-count {
  appearance: none;
  -webkit-appearance: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  border: 0;
  background: var(--gold-soft);
  color: #e8d2b0;
  padding: 0 7px 0 6px;
  margin: 0;
  min-height: 32px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font: 600 11px/1 "IBM Plex Sans", sans-serif;
  letter-spacing: 0.02em;
  cursor: pointer;
  white-space: nowrap;
}
.comments-count:hover,
.comments-count:focus {
  color: #e0b56a;
  outline: none;
}
.comments-count-icon {
  width: 15px;
  height: 15px;
  pointer-events: none;
  flex-shrink: 0;
}
.comments-count-num:empty { display: none; }
.my-study-comments .comments-count,
.my-study-detail .comments-count {
  background: transparent;
  padding: 0;
  min-height: 0;
  color: var(--gold);
}

.comments-overlay {
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: rgba(10, 8, 6, 0.55);
  z-index: 48;
}
.comments-sheet {
  width: min(480px, 100%);
  min-height: min(60dvh, 560px);
  max-height: min(88dvh, 720px);
  background: linear-gradient(180deg, var(--paper-2), var(--ink-2));
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  padding: 16px 16px 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}
.comments-sheet > .comments-flip-scene {
  flex: 1 1 auto;
  min-height: 0;
}
.comments-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.comments-sheet-head > div:first-child {
  flex: 1 1 auto;
  min-width: 0;
}
.comments-sheet-head h2 {
  margin: 2px 0 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: 26px;
  letter-spacing: -0.03em;
}
.comments-study-ref {
  margin: 4px 0 0;
  color: var(--gold);
  font-size: 13px;
  font-weight: 500;
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: normal;
}
.comments-close {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--gold-soft);
  color: var(--gold);
  border-radius: 999px;
  padding: 6px 12px;
  font: 600 12px/1 "IBM Plex Sans", sans-serif;
  cursor: pointer;
  flex-shrink: 0;
}
.comments-close:hover,
.comments-close:focus {
  border-color: rgba(212, 160, 84, 0.4);
  outline: none;
}
.comments-thread {
  flex: 1 1 auto;
  min-height: 140px;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 4px 2px 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  scroll-behavior: smooth;
}
.comments-empty {
  margin: 18px 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}
.comment-item {
  position: relative;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  padding: 10px 12px;
  overflow: visible;
}
.comment-item.is-reply {
  margin-top: 8px;
  background: transparent;
  overflow: visible;
}
.comment-replies {
  margin-top: 8px;
  padding-left: 12px;
  border-left: 2px solid rgba(212, 160, 84, 0.28);
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow: visible;
}
.comment-meta {
  margin: 0 0 6px;
  font-size: 12px;
  color: var(--faint);
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.comment-meta strong {
  color: var(--text);
  font-weight: 600;
}
.comment-body {
  margin: 0;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 15px;
  line-height: 1.45;
  color: var(--text);
  overflow-wrap: anywhere;
}
.comment-reply {
  appearance: none;
  border: 0;
  background: none;
  padding: 6px 0 0;
  color: var(--gold);
  font: 600 12px/1 "IBM Plex Sans", sans-serif;
  cursor: pointer;
}
.comment-reply:hover { text-decoration: underline; }
.comment-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  margin-top: 6px;
}
.comment-like {
  appearance: none;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  border-radius: 999px;
  width: 34px;
  height: 28px;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  touch-action: none;
}
/* Decorative emoji/text inside react targets: no iOS selection; hits go to the control */
.comment-like > *,
.comment-react-counts > *,
.comment-react-opt > * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
  pointer-events: none;
}
.comment-like.is-on {
  border-color: rgba(212, 160, 84, 0.55);
  background: rgba(212, 160, 84, 0.16);
}
.comment-react-counts {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}
.comment-react-chip {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 12px;
  color: var(--muted);
  background: rgba(255,255,255,0.04);
  border-radius: 999px;
  padding: 2px 7px;
}
.comment-react-chip.is-mine { color: var(--gold); }
.comment-react-n { font-weight: 600; }
.comment-react-picker,
.comment-react-bar {
  display: flex;
  gap: 2px;
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 999px;
  background: rgba(22, 17, 12, 0.98);
  border: 1px solid rgba(240, 215, 140, 0.32);
  box-shadow: 0 12px 28px rgba(0,0,0,0.42);
  width: fit-content;
  max-width: 100%;
  align-items: center;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
  transition: opacity 0.12s ease, transform 0.12s ease;
}
.comment-react-picker[hidden] { display: none; }
.comment-react-bar.is-armed {
  transform: translateY(-2px);
}
.comment-react-bar.is-cancel {
  opacity: 0.45;
}
.comment-react-opt {
  appearance: none;
  border: 0;
  background: transparent;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: none;
  transition: transform 0.12s ease, background 0.12s ease;
}
.comment-react-opt:hover,
.comment-react-opt.is-on,
.comment-react-opt.is-hover {
  background: rgba(212, 160, 84, 0.18);
}
.comment-react-opt.is-hover {
  transform: scale(1.28) translateY(-6px);
  background: rgba(212, 160, 84, 0.28);
}
.comment-side-tag {
  margin-left: 4px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid rgba(212, 160, 84, 0.35);
  background: rgba(212, 160, 84, 0.12);
  color: var(--gold);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.comment-side-tag.is-legacy {
  border-color: rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  color: var(--muted);
  font-weight: 500;
}
.comment-reply { padding: 0; }

.comments-form {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  margin: 0 -16px 0;
  padding: 10px 16px calc(12px + var(--safe-bottom));
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, rgba(22,17,12,0.92), var(--ink-2) 40%);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 3;
}
.comments-form.is-guest .comments-field textarea {
  opacity: 0.72;
}
.comments-submit:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.comments-signin { margin: 8px 0 0; }
.comment-react-bar.is-above {
  position: absolute;
  left: 12px;
  bottom: calc(100% - 4px);
  margin-top: 0;
  z-index: 12;
  /* Placement helper flips + scrolls thread so this stays inside .comments-thread clip. */
}
/* Extra scroll room while a reactions bar is open so last-item in-flow bars can scroll clear of the composer. */
.comments-thread.has-react-bar-open {
  padding-bottom: 72px;
}
.comments-field { margin: 0; }
.comments-field textarea {
  width: 100%;
  resize: vertical;
  min-height: 72px;
  max-height: 140px;
  border: 1px solid var(--line);
  background: var(--ink);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 12px;
  font: inherit;
  font-size: 15px;
  line-height: 1.4;
}
.comments-field textarea:focus {
  outline: none;
  border-color: rgba(212, 160, 84, 0.45);
}
.comments-form-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 8px;
}
.comments-submit {
  width: auto;
  min-width: 96px;
  padding: 10px 16px;
  font-size: 14px;
}
.comments-replying {
  margin: 0 0 8px;
  color: var(--gold);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.35;
  flex: 0 0 auto;
}
.comments-replying[hidden] {
  display: none !important;
}
.comments-replying strong {
  color: var(--text);
  font-weight: 700;
}
.comments-form.is-replying {
  /* Keep banner+textarea fully visible above keyboard / card clip */
  flex-shrink: 0;
  z-index: 6;
}
.comments-face-mount .comments-form.is-replying,
html.is-comments-kb .comments-form.is-replying {
  padding-top: 10px;
}
.comments-signin { margin-top: 8px; }
.my-study-comments {
  color: var(--gold);
  font-size: 12px;
  font-weight: 600;
}
.activity-wrap { margin: 0 0 22px; }
.activity-list { display: flex; flex-direction: column; gap: 8px; }
.activity-row {
  appearance: none;
  width: 100%;
  text-align: left;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--paper-2), var(--paper));
  color: var(--text);
  border-radius: 14px;
  padding: 12px 14px;
  cursor: pointer;
  display: grid;
  gap: 3px;
}
.activity-row:hover { border-color: rgba(212, 160, 84, 0.35); }
.activity-who { font-size: 13px; color: var(--muted); }
.activity-who strong { color: var(--text); font-weight: 600; }
.activity-ref { color: var(--gold); font-size: 13px; font-weight: 500; }
.activity-snippet {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.my-study-detail .comments-count { margin-top: 10px; }

.badges-wrap { margin: 0 0 24px; }
.badges-lede {
  margin: 0 0 12px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.4;
}
.badges-list { display: flex; flex-direction: column; gap: 8px; }
.badge-row {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  align-items: start;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--paper-2), var(--paper));
  border-radius: 14px;
  padding: 12px 14px;
}
.badge-row.is-earned {
  border-color: rgba(212, 160, 84, 0.42);
  background:
    linear-gradient(180deg, rgba(212, 160, 84, 0.08), transparent 42%),
    linear-gradient(180deg, var(--paper-2), var(--paper));
}
.badge-mark {
  width: 28px;
  height: 28px;
  margin-top: 1px;
  border-radius: 50%;
  border: 1px solid rgba(212, 160, 84, 0.35);
  background: rgba(255, 255, 255, 0.02);
  position: relative;
}
.badge-row.is-earned .badge-mark {
  border-color: var(--gold);
  background: radial-gradient(circle at 38% 32%, #f0d29a, var(--gold) 58%, #9a6f2e);
  box-shadow: 0 0 0 3px rgba(212, 160, 84, 0.12);
}
.badge-row.is-earned .badge-mark::after {
  content: "";
  position: absolute;
  left: 8px;
  top: 6px;
  width: 8px;
  height: 12px;
  border-right: 2px solid #2a1c0a;
  border-bottom: 2px solid #2a1c0a;
  transform: rotate(40deg);
}
.badge-copy { min-width: 0; }
.badge-name {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: 17px;
  letter-spacing: -0.02em;
  color: var(--text);
}
.badge-row:not(.is-earned) .badge-name { color: var(--muted); }
.badge-desc {
  margin: 3px 0 0;
  color: var(--faint);
  font-size: 13px;
  line-height: 1.4;
}
.badge-meta {
  margin: 6px 0 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 600;
}
.badge-date { color: var(--gold); letter-spacing: 0.01em; }
.badge-progress-track {
  flex: 1;
  height: 3px;
  border-radius: 999px;
  background: rgba(212, 160, 84, 0.12);
  overflow: hidden;
  max-width: 120px;
}
.badge-progress-fill {
  display: block;
  height: 100%;
  background: var(--gold);
  border-radius: 999px;
}

.field-hint { display: block; color: var(--faint); }

.avatar-btn {
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  border-radius: 50%;
  display: inline-flex;
  flex-shrink: 0;
  line-height: 0;
}
.avatar-btn .avatar {
  box-shadow: 0 0 0 1px rgba(212, 160, 84, 0.55);
}
.avatar-btn:hover .avatar,
.avatar-btn:focus-visible .avatar {
  box-shadow: 0 0 0 2px rgba(212, 160, 84, 0.72);
}
.avatar-btn:focus { outline: none; }
.author-name-btn {
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
  min-width: 0;
}
.author-name-btn:focus { outline: none; }
.author-name-btn:focus-visible {
  box-shadow: 0 0 0 2px rgba(212, 160, 84, 0.28);
  border-radius: 4px;
}

.avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(180deg, #e8d2b0, #d4a054);
  border: 1px solid rgba(212, 160, 84, 0.4);
  color: var(--ink);
}
.avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.avatar-initials {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.avatar-lg {
  width: 64px;
  height: 64px;
}
.avatar-lg.avatar-initials { font-size: 22px; }

.account-identity {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  margin: 0 0 8px;
}
.account-avatar-btn {
  appearance: none;
  border: 0;
  padding: 0;
  background: none;
  cursor: pointer;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
  overflow: visible;
  isolation: isolate;
}
/* You Account: profile photo ~72–78px, right under name row */
#account-avatar-btn #account-home-avatar,
#account-home-avatar.avatar-lg {
  width: 78px;
  height: 78px;
}
#account-home-avatar.avatar-lg.avatar-initials {
  font-size: 26px;
}
#account-avatar-btn.has-frame {
  margin-left: 0;
  margin-right: 0;
}
.account-avatar-btn:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(212, 160, 84, 0.28);
}
.account-avatar-badge {
  display: none !important; /* removed: covered by frames/stickers; use #account-edit-photo */
}
.account-name-row {
  display: flex;
  align-items: center; /* pencil vertically aligned with name text */
  gap: 8px;
  width: 100%;
  max-width: 100%;
}
.account-name-row .invitee-headline,
#account-home-name {
  margin: 0;
  flex: 1;
  min-width: 0;
  white-space: normal; /* name + points must not truncate beside photo */
  overflow: visible;
  line-height: 1.25;
}
/* Body: copy left (coins/trophies/email) | photo pinned right, under name row */
.account-identity-body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  width: 100%;
  min-width: 0;
}
.account-avatar-btn-sync {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
}
.account-email-footer {
  margin: 0 0 10px;
  text-align: center;
  color: var(--muted);
  font-size: 13px;
  word-break: break-word;
}
.account-identity-copy {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}
.account-avatar-cluster {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
  /* slight top nudge so frame/banner clears the name row */
  margin-top: 14px;
  /* inset from screen edge so banner/frame art is not clipped on the right */
  margin-right: 16px;
  overflow: visible; /* frames/stickers */
}
.account-edit-photo-icon {
  appearance: none;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(212, 160, 84, 0.4);
  background: rgba(201, 162, 39, 0.12);
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  position: relative;
  z-index: 2;
}
.account-edit-photo-icon:hover,
.account-edit-photo-icon:focus-visible {
  border-color: rgba(240, 215, 140, 0.7);
  background: rgba(201, 162, 39, 0.22);
}
.account-edit-photo-icon svg { display: block; }
.account-edit-name {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--gold-soft);
  color: var(--gold);
  border-radius: 999px;
  padding: 6px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.account-edit-name:hover { border-color: rgba(212, 160, 84, 0.45); }
.account-change-photo { margin-top: 8px; }
.account-identity .account-lede { margin: 0; }

.profile-photo-btn {
  appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  border: 1px dashed rgba(212, 160, 84, 0.4);
  background: rgba(255, 255, 255, 0.02);
  color: var(--text);
  border-radius: 14px;
  padding: 10px 12px;
  margin: 0 0 14px;
  font: inherit;
  cursor: pointer;
}
.profile-photo-label { color: var(--gold); font-weight: 600; font-size: 14px; }
.profile-card .invite { width: 100%; margin-top: 8px; }

html.is-cropping,
html.is-cropping body {
  overflow: hidden;
  overscroll-behavior: none;
}

.avatar-crop-overlay { z-index: 50; }
.avatar-crop-card { width: min(420px, 100%); }
.avatar-crop-card .overlay-copy { margin-bottom: 8px; }
.avatar-crop-stage {
  position: relative;
  width: 100%;
  height: min(280px, 48vh);
  margin: 6px 0 12px;
  overflow: hidden;
  background: #16110c;
  border-radius: 14px;
  border: 1px solid var(--line);
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  --crop-view: 240px;
}
.avatar-crop-img {
  position: absolute;
  left: 0;
  top: 0;
  max-width: none;
  transform-origin: 0 0;
  pointer-events: none;
  -webkit-user-drag: none;
  user-select: none;
  will-change: transform;
}
.avatar-crop-hole {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--crop-view, 240px);
  height: var(--crop-view, 240px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  box-shadow: 0 0 0 999px rgba(8, 6, 4, 0.62);
  border: 2px solid rgba(212, 160, 84, 0.72);
  pointer-events: none;
}
.avatar-crop-zoom { display: block; margin: 0 0 4px; }
.avatar-crop-zoom input[type="range"] {
  width: 100%;
  height: 28px;
  margin: 0;
  accent-color: var(--gold);
  cursor: pointer;
}
.avatar-crop-actions {
  display: flex;
  gap: 10px;
  margin-top: 12px;
}
.avatar-crop-actions .invite,
.avatar-crop-actions .submit,
.avatar-crop-card .submit {
  width: auto;
  flex: 1;
  margin-top: 0;
}

.achieve-toast {
  position: fixed;
  left: 14px;
  right: 14px;
  width: auto;
  max-width: 420px;
  margin-inline: auto;
  transform: translateY(12px);
  bottom: calc(var(--tabbar) + 18px + var(--safe-bottom));
  z-index: 70;
  background: linear-gradient(180deg, #2c241b, #221b14);
  border: 1px solid rgba(212, 160, 84, 0.45);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.4);
  color: var(--text);
  padding: 12px 14px 13px;
  border-radius: 14px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.achieve-toast.show {
  opacity: 1;
  transform: translateY(0);
}
.achieve-toast-tier {
  margin: 0 0 4px;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}
.achieve-toast-kicker {
  margin: 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: var(--text);
}
.achieve-toast-desc {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
  font-family: "Source Serif 4", Georgia, serif;
}

.badge-group { margin: 0 0 16px; }
.badge-group-title {
  margin: 0 0 8px;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}
.badge-group-list { display: flex; flex-direction: column; gap: 8px; }
.badge-family-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
  align-items: center;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, var(--paper-2), var(--paper));
  border-radius: 14px;
  padding: 10px 12px;
}
.badge-family-row.is-earned {
  border-color: rgba(212, 160, 84, 0.42);
}
.badge-family-name {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: 16px;
  letter-spacing: -0.02em;
}
.badge-family-row:not(.is-earned) .badge-family-name { color: var(--muted); }
.badge-family-desc {
  margin: 2px 0 0;
  color: var(--faint);
  font-size: 12px;
  line-height: 1.35;
}
.tier-pips { display: flex; gap: 5px; }
.tier-pip {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  border: 1px solid rgba(212, 160, 84, 0.28);
  background: rgba(255, 255, 255, 0.03);
}
.tier-pip.is-on.bronze { background: #b08a58; border-color: #c4a06a; }
.tier-pip.is-on.silver { background: #cfc6b6; border-color: #e8e0d2; }
.tier-pip.is-on.gold { background: var(--gold); border-color: #e0b56a; }
.tier-pip.is-on.platinum { background: linear-gradient(180deg, #f3eee6, #c5b7a0); border-color: #f0e6d4; }

.badge-group.is-books .badge-family-row,
.badge-group-list.is-books .badge-family-row { padding: 8px 12px; }
.badge-type-count {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
}
.badge-tier-label {
  display: inline-block;
  margin-left: 6px;
  font-family: "IBM Plex Sans", sans-serif;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  vertical-align: middle;
}
.badge-row .badge-tier-label { margin-left: 0; display: block; margin-bottom: 2px; }
.badge-details {
  margin: 0 0 12px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.02);
  padding: 2px 10px 10px;
}
.badge-details > summary {
  cursor: pointer;
  list-style: none;
  padding: 10px 4px;
  color: var(--gold);
  font-size: 13px;
  font-weight: 600;
}
.badge-details > summary::-webkit-details-marker { display: none; }
.badge-details[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: 10px; }

.you-tabs { margin: 0 0 18px; }
.you-tabs .sort-btn {
  font-size: 10px;
  padding: 8px 4px;
  letter-spacing: 0;
}

/* ===== mem28l: You tab bar must not flex-shrink away under Unlockables/Season panes ===== */
#you-tabs.you-tabs,
.view-you > #you-tabs {
  flex: 0 0 auto;
  flex-shrink: 0;
  align-self: stretch;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
}
.you-tabs .sort-btn {
  flex: 1 0 auto;
  white-space: nowrap;
  min-width: max-content;
}
#you-pane-titles:not([hidden]) {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: 12px;
}
#you-pane-titles[hidden] {
  display: none !important;
}
.titles-wrap { margin: 0 0 12px; }
.titles-equip-panel {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}
.title-equip-chip {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--card, rgba(255,255,255,0.03));
  color: var(--text);
  border-radius: 999px;
  padding: 8px 12px;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  cursor: pointer;
}
.title-equip-chip.is-selected {
  border-color: var(--gold);
  background: var(--gold-soft);
  color: var(--text);
}
.user-profile-title-chip,
.account-season-title {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: capitalize;
  background: rgba(212,175,55,0.15);
  border: 1px solid rgba(212,175,55,0.4);
  color: #f0d878;
  vertical-align: middle;
}
/* Titles must NOT paint on dense study/read/comment/rank surfaces */
.card .account-season-title,
.card .user-profile-title-chip,
.comment-item .account-season-title,
.activity-list .account-season-title,
.account-rank .account-season-title,
.rank-row .account-season-title {
  display: none !important;
}

.badge-type-tabs {
  margin: 0 0 14px;
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  flex-wrap: nowrap;
  scrollbar-width: thin;
}
.badge-type-tabs .sort-btn {
  flex: 1 0 auto;
  white-space: nowrap;
  font-size: 10px;
  padding: 8px 10px;
  letter-spacing: 0;
}
.you-pane[hidden] { display: none !important; } /* season1j: beat #you-pane-* display rules */
.you-empty-copy {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 14px;
}
.account-stats {
  display: grid;
  gap: 8px;
  margin: 0 0 18px;
}
.account-stat {
  margin: 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: linear-gradient(180deg, var(--paper-2), var(--paper));
  color: var(--text);
  font-size: 14px;
}
.account-stat strong {
  color: var(--gold);
  font-weight: 600;
}
.account-stat-details {
  padding: 0;
  overflow: hidden;
}
.account-stat-details > summary.account-stat-summary {
  list-style: none;
  cursor: pointer;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.account-stat-details > summary.account-stat-summary::-webkit-details-marker { display: none; }
.account-stat-details > summary.account-stat-summary::marker { content: none; display: none; }
.account-stat-details > summary.account-stat-summary::after {
  content: "";
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg);
  transition: transform 0.16s ease;
  flex-shrink: 0;
  margin-top: -3px;
}
.account-stat-details[open] > summary.account-stat-summary::after {
  transform: rotate(-135deg);
  margin-top: 3px;
}
.account-stat-breakdown {
  list-style: none;
  margin: 0;
  padding: 0 14px 12px 28px;
  display: grid;
  gap: 4px;
  color: var(--muted);
  font-size: 13px;
}
.account-stat-breakdown li strong {
  color: var(--gold);
  font-weight: 600;
}

.account-rank { letter-spacing: 0.01em; }
.account-nearby { margin: 0 0 8px; }
.account-nearby[hidden] { display: none; }
.account-nearby-heading,
.account-nearby-jump {
  margin: 0 0 8px;
  padding: 0;
  border: 0;
  background: none;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.account-nearby-jump:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
  border-radius: 2px;
}
.account-rank-list {
  max-height: min(52vh, 420px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 2px 10px;
  background: rgba(0, 0, 0, 0.12);
}
.account-nearby-row {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 10px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: 13px;
}
.account-nearby-row:last-child { border-bottom: 0; }
.account-nearby-row.is-you {
  color: var(--text);
  font-weight: 600;
}
.account-nearby-row .avatar-btn,
.account-nearby-row .avatar {
  flex-shrink: 0;
  margin-top: 2px;
}
.account-rank-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.account-rank-name-line {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.account-nearby-row .author-name-btn,
.account-nearby-row .account-rank-name {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: inherit;
}
.account-nearby-row .author-name-btn:hover,
.account-nearby-row .author-name-btn:focus-visible {
  color: var(--gold);
}
.account-rank-trophies {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  max-width: 100%;
  justify-content: flex-start;
  align-content: flex-start;
  line-height: 1;
}
.account-rank-trophies .profile-trophy,
.account-rank-trophies .trophy-icon {
  width: 16px;
  height: 16px;
  font-size: 9px;
  flex: 0 0 auto;
  border-width: 1px;
}
.account-rank-points {
  flex-shrink: 0;
  white-space: nowrap;
}
.account-rank-place {
  flex-shrink: 0;
  margin-left: auto;
  white-space: nowrap;
  align-self: center;
}
.you-comment-row {
  cursor: default;
}
.you-comment-row .activity-when {
  color: var(--faint);
  font-size: 12px;
}
.you-jump-study {
  width: auto;
  margin-top: 8px;
  padding: 8px 12px;
  font-size: 13px;
}
.my-studies-deck.deck {
  flex: none;
  min-height: 0;
  margin: 0;
}
.my-studies-deck.deck.is-history {
  gap: 18px;
}
.my-study-card-wrap {
  display: flex;
  flex-direction: column;
}
.my-study-card-wrap .card.is-shared-target {
  box-shadow: 0 0 0 2px var(--gold), 0 12px 28px rgba(0, 0, 0, 0.28);
}
#mem-challenge.is-shared-target,
.mem-challenge.is-shared-target {
  box-shadow: 0 0 0 2px var(--gold), 0 12px 28px rgba(0, 0, 0, 0.28);
}
.my-study-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0 4px;
}
.my-study-actions .invite {
  margin: 0;
}
.my-study-invite {
  margin: 8px 0 4px;
}

.tab { position: relative; min-width: 56px; }
.tab-badge {
  position: absolute; top: 2px; right: 6px;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  background: var(--gold); color: var(--ink); font-size: 10px; font-weight: 700; line-height: 16px;
}
.view-memorize { padding-bottom: 8px; }
.app.is-mem-drill {
  min-height: var(--vv-height, 100dvh);
  height: var(--vv-height, 100dvh);
  max-height: var(--vv-height, 100dvh);
  overflow: hidden;
  padding-top: calc(6px + var(--safe-top));
  padding-bottom: calc(var(--tabbar) + 8px + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.app.is-mem-drill .topbar { padding: 0 0 4px; flex: 0 0 auto; }
.app.is-mem-drill h1 { font-size: 22px; }
.app.is-mem-drill .topbar-tag { font-size: 14px; margin-top: 2px; }
.app.is-mem-drill .view-memorize {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}
.app.is-mem-drill .mem-drill {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.app.is-mem-drill .mem-card {
  flex: 1 1 auto;
  min-height: 0;
  margin: 0;
}
.app.is-mem-drill .module-privacy { display: none; }
html.is-kb-open .app.is-mem-drill {
  /* Keep home-indicator clearance while keyboard chrome is up (vv already shrinks height). */
  padding-bottom: max(6px, var(--safe-bottom));
}
html.is-kb-open .mem-entry-dock:not(:has(#mem-pool)) {
  /* Stage 2/3 type bar: safe-area pad only — do not add --kb-inset (body already uses --vv-height). */
  padding-bottom: max(6px, var(--safe-bottom));
}
html.is-kb-open .app.is-mem-drill .tabbar { display: none; }
html.is-kb-open .app.is-mem-drill .topbar { display: none; }
html.is-kb-open .mem-card .card-tabs { display: none; }
html.is-kb-open .mem-card .gw-study-face { padding-bottom: 8px; }
html.is-kb-open .mem-kicker,
html.is-kb-open .mem-stage-now,
html.is-kb-open .mem-diff-dots,
html.is-kb-open .mem-stage-copy,
html.is-kb-open .mem-hint-quiet { display: none; }
html.is-mem-drill,
html.is-mem-drill body {
  overflow: hidden;
  overscroll-behavior: none;
}
html.is-mem-drill body {
  position: fixed;
  left: 0;
  right: 0;
  top: var(--vv-offset, 0px);
  height: var(--vv-height, 100dvh);
  width: 100%;
}
.app.is-mem-drill .mem-card { padding: 12px 12px 8px; }
.app.is-mem-drill .mem-card .gw-study-face { padding: 10px 8px 32px; }
.mem-home .invitee-headline { margin: 0 0 4px; }
.mem-actions { display: flex; gap: 10px; margin: 12px 0 16px; }
.mem-actions .submit, .mem-actions .invite { flex: 1; margin: 0; }
.mem-list-tabs { margin: 0 0 14px; }
.mem-section { margin: 0 0 18px; }
.mem-kicker {
  margin: 0 0 4px; font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--gold); font-weight: 500;
}
.mem-votw { margin: 10px 0 14px; padding: 16px 16px 14px; }
.mem-votw.mem-remind-card { padding: 8px 16px; }
.mem-votw.mem-remind-card[open] { padding: 10px 16px 14px; }
.mem-votw .submit { width: 100%; margin-top: 10px; }
.mem-votw-text {
  margin: 8px 0 6px;
  font-family: "Fraunces", Georgia, serif;
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  white-space: normal;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.mem-votw #mem-votw-attr { margin: 0 0 4px; }
.mem-votw-count {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}
.mem-people-link {
  display: inline;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--gold);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
}
.mem-people-link:hover,
.mem-people-link:focus-visible {
  color: var(--ink);
  outline: none;
}
.mem-collapse-summary { min-width: 0; flex: 1; }
.mem-collapse-summary .mem-kicker { margin-bottom: 2px; }
.mem-collapse-summary .mem-row-top { margin: 0; }
.mem-collapse-summary .mem-row-ref { font-size: 17px; }
.mem-card-note {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--muted);
}
.mem-card-note[hidden] { display: none; }
.mem-card-refs {
  margin: 4px 0 0;
  font-size: 13px;
  line-height: 1.35;
  color: var(--muted);
}
.mem-card-refs[hidden] { display: none; }
.mem-votw.is-complete .mem-card-refs,
.mem-challenge.is-complete .mem-card-refs {
  color: rgba(243, 232, 214, 0.9);
}
.mem-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin: 0 0 2px;
  min-width: 0;
}
.mem-card-head .mem-kicker {
  margin: 0;
  flex: 1 1 auto;
  min-width: 0;
}
.mem-card-done {
  flex: 0 0 auto;
  align-self: flex-start;
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  color: var(--up);
}
.mem-card-done[hidden] { display: none; }
/* Challenge kicker includes a tall trophy — center Memorized with the title */
.mem-challenge .mem-card-done {
  align-self: center;
}
.mem-challenge-kicker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.mem-challenge-kicker > span:first-child {
  min-width: 0;
}
.mem-challenge-trophy {
  display: inline-flex;
  align-items: center;
  margin: 0;
  font-size: 16px;
  line-height: 1;
  flex: 0 0 auto;
  vertical-align: middle;
  filter: saturate(1.15) brightness(1.05);
}
/* Completed Recommended / Challenge cards */
.mem-votw.is-complete,
.mem-challenge.is-complete {
  border-color: rgba(240, 215, 140, 0.55);
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(240, 215, 140, 0.22), transparent 55%),
    linear-gradient(180deg, rgba(201, 162, 39, 0.18), rgba(42, 34, 26, 0.92));
  box-shadow:
    0 0 0 1px rgba(242, 223, 154, 0.25),
    0 10px 28px rgba(201, 162, 39, 0.18);
}
.mem-votw.is-complete .mem-kicker,
.mem-challenge.is-complete .mem-kicker {
  color: #f0d78c;
}
.mem-votw.is-complete .mem-row-ref,
.mem-challenge.is-complete .mem-row-ref {
  color: #f7e7b0;
}
.mem-votw.is-complete .mem-card-note,
.mem-challenge.is-complete .mem-card-note {
  color: rgba(243, 232, 214, 0.85);
}
.mem-votw.is-complete .mem-row-due.is-done,
.mem-challenge.is-complete .mem-row-due.is-done,
.mem-votw.is-complete .mem-card-done.is-done,
.mem-challenge.is-complete .mem-card-done.is-done {
  color: #f0d78c;
  background: rgba(201, 162, 39, 0.2);
  border: 1px solid rgba(240, 215, 140, 0.35);
  border-radius: 999px;
  padding: 2px 8px;
}
/* Flashy completed Challenge */
.mem-challenge.is-complete {
  border-color: rgba(255, 228, 140, 0.75);
  background:
    radial-gradient(circle at 85% 18%, rgba(255, 236, 160, 0.45), transparent 42%),
    radial-gradient(120% 100% at 50% -10%, rgba(255, 214, 100, 0.35), transparent 50%),
    linear-gradient(165deg, rgba(212, 160, 84, 0.35), rgba(42, 34, 26, 0.95) 55%);
  box-shadow:
    0 0 0 1px rgba(255, 236, 170, 0.4),
    0 0 36px rgba(240, 200, 80, 0.35),
    0 14px 32px rgba(201, 162, 39, 0.28);
  overflow: hidden;
}
.mem-challenge-trophy-big {
  margin: 10px 0 2px;
  font-size: 64px;
  line-height: 1;
  text-align: center;
  filter: drop-shadow(0 0 12px rgba(255, 220, 120, 0.85)) drop-shadow(0 4px 10px rgba(201, 162, 39, 0.55));
  animation: mem-trophy-shine 2.4s ease-in-out infinite;
}
.mem-challenge-trophy-big[hidden] { display: none; }
.mem-challenge.is-complete .mem-challenge-trophy {
  font-size: 16px;
  filter: saturate(1.4) brightness(1.2) drop-shadow(0 0 6px rgba(255, 220, 120, 0.7));
}
@keyframes mem-trophy-shine {
  0%, 100% { transform: scale(1) rotate(-4deg); filter: drop-shadow(0 0 10px rgba(255, 220, 120, 0.7)) drop-shadow(0 4px 10px rgba(201, 162, 39, 0.5)); }
  50% { transform: scale(1.08) rotate(4deg); filter: drop-shadow(0 0 22px rgba(255, 236, 160, 1)) drop-shadow(0 6px 14px rgba(240, 200, 80, 0.65)); }
}
@media (prefers-reduced-motion: reduce) {
  .mem-challenge-trophy-big { animation: none; }
}
.mem-votw.is-compact .mem-votw-text,
.mem-votw.is-compact #mem-votw-add,
.mem-votw.is-compact #mem-votw-attr { display: none; }
.mem-votw.is-compact .mem-votw-count { margin-top: 6px; }
.mem-actions [hidden] { display: none; }
.mem-row { position: relative; margin: 0 0 12px; padding: 14px 14px 28px; }
.mem-row .card-tabs,
.mem-row-tabs {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
  gap: 4px;
  padding: 0 12px;
  pointer-events: none;
  z-index: 6;
}
.mem-row-tabs .collab-tab { pointer-events: auto; }
.mem-row-top { display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.mem-row-ref { margin: 0; font-family: "Fraunces", Georgia, serif; font-size: 20px; letter-spacing: -0.02em; }
.mem-row-due { font-size: 12px; color: var(--muted); white-space: nowrap; }
.mem-row-due.is-due { color: var(--gold); font-weight: 600; }
.mem-row-due.is-done { color: var(--up); font-weight: 600; }
.mem-row-remove {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 2px;
}
.mem-row-remove:active { opacity: 0.75; }
.mem-row-text {
  margin: 8px 0 2px;
  font-family: "Fraunces", Georgia, serif;
  font-size: 17px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  white-space: normal;
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.mem-row-text.is-loading {
  font-family: inherit;
  font-size: 12px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--faint);
}
.mem-peers {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin: 6px 0 4px;
  min-height: 26px;
  appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  width: auto;
  max-width: 100%;
  text-align: left;
  cursor: pointer;
  font: inherit;
  color: inherit;
  border-radius: 8px;
}
.mem-peers:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.mem-peers-faces {
  display: flex;
  align-items: center;
  flex-wrap: nowrap;
}
.mem-peers .mem-peers-face,
.mem-peers .avatar {
  width: 24px;
  height: 24px;
}
.mem-peers .avatar {
  font-size: 9px;
  box-shadow: 0 0 0 1.5px rgba(212, 160, 84, 0.7), 0 0 0 2px rgba(20, 16, 12, 0.95);
}
.mem-peers .mem-peers-face {
  display: inline-flex;
  margin-left: -8px;
  position: relative;
  pointer-events: none;
}
.mem-peers .mem-peers-face:first-child {
  margin-left: 0;
}
.mem-peers-more {
  margin-left: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  height: 24px;
  padding: 0 6px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 600;
  color: var(--gold);
  background: rgba(212, 160, 84, 0.12);
  border: 1px solid rgba(212, 160, 84, 0.45);
  box-sizing: border-box;
}

.mem-peers-overlay {
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: rgba(10, 8, 6, 0.55);
  z-index: 48;
}
.mem-peers-sheet {
  width: min(480px, 100%);
  max-height: min(78dvh, 640px);
  background: linear-gradient(180deg, var(--paper-2), var(--ink-2));
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  padding: 16px 16px calc(16px + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.mem-peers-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.mem-peers-sheet-head h2 {
  margin: 2px 0 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: 26px;
  letter-spacing: -0.03em;
}
.mem-peers-ref {
  margin: 4px 0 0;
  color: var(--gold);
  font-size: 13px;
  font-weight: 500;
}
.mem-peers-list {
  flex: 1 1 auto;
  min-height: 80px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 2px 0 8px;
  display: flex;
  flex-direction: column;
}
.mem-peers-empty {
  margin: 18px 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
}
.mem-peers-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 2px;
  border-bottom: 1px solid var(--line);
}
.mem-peers-row:last-child {
  border-bottom: 0;
}
.mem-peers-row .avatar-btn,
.mem-peers-row .avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
}
.mem-peers-row .author-name-btn {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: left;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text);
  font: 600 14px/1.3 "IBM Plex Sans", sans-serif;
  cursor: pointer;
  padding: 0;
}
.mem-peers-row .author-name-btn:hover,
.mem-peers-row .author-name-btn:focus-visible {
  color: var(--gold);
}

.mem-stage-now { margin: 8px 0 8px; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); font-weight: 600; }
.mem-stage-bar {
  display: flex;
  flex-wrap: nowrap;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  background: rgba(255,255,255,0.03);
}
.mem-stage-cell {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  padding: 6px 3px 7px;
}
.mem-stage-cell + .mem-stage-cell { border-left: 1px solid var(--line); }
.mem-stage-cell.is-locked {
  opacity: 0.38;
  /* Keep pointer-events so the locked button can swallow the tap (no row pass-through flicker). */
}
.mem-stage-btn {
  flex: none; border: 2px solid transparent; background: transparent; color: var(--muted);
  font: inherit; font-size: 11px; font-weight: 600; padding: 3px 6px; cursor: pointer;
  white-space: nowrap; border-radius: 999px;
}
.mem-stage-btn.is-stage-cleared { border-color: var(--lift); }
.mem-stage-btn.is-stage-open { border-color: var(--pass); }
.mem-stage-btn[aria-pressed="true"] { background: var(--gold-soft); color: var(--text); }
.mem-stage-btn[aria-disabled="true"],
.mem-stage-btn.is-locked {
  color: var(--faint);
  cursor: default;
  /* Receive taps and no-op in JS — pointer-events:none let clicks hit .mem-row and re-render. */
}
.mem-stage-diff-label {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.2;
  padding: 1px 4px;
  margin: 0;
  letter-spacing: 0.01em;
  white-space: nowrap;
  border-radius: 6px;
  cursor: pointer;
  touch-action: manipulation;
}
.mem-stage-diff-label.is-current {
  color: var(--gold);
}
.mem-stage-diff-label:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 1px;
}
.mem-diff-pop {
  position: fixed;
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 88px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #1c1610;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45);
  transform: translateX(-50%);
}
.mem-diff-pop-opt {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.2;
  padding: 7px 10px;
  border-radius: 7px;
  cursor: pointer;
  text-align: left;
  white-space: nowrap;
  touch-action: manipulation;
}
.mem-diff-pop-opt:hover:not(:disabled),
.mem-diff-pop-opt:focus-visible:not(:disabled) {
  background: rgba(212,160,84,0.18);
}
.mem-diff-pop-opt.is-current {
  background: rgba(212,160,84,0.32);
  color: var(--text);
}
.mem-diff-pop-opt.is-locked,
.mem-diff-pop-opt:disabled {
  color: var(--faint);
  opacity: 0.45;
  cursor: default;
}
.mem-diff-dots {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 2px 0 8px;
}
.mem-diff-dot {
  appearance: none;
  width: 7px;
  height: 7px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(232, 210, 176, 0.22);
  cursor: pointer;
}
.mem-diff-dot.is-done { background: rgba(212, 160, 84, 0.55); }
.mem-diff-dot.is-now { background: var(--gold); }
.mem-diff-dot[aria-disabled="true"] {
  opacity: 0.35;
  cursor: default;
  pointer-events: none;
}
.mem-clear-btn {
  appearance: none; margin-top: 10px; border: 0; background: transparent;
  color: var(--gold); font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; padding: 0;
}
.mem-hint { margin: 0 0 10px; color: var(--muted); font-size: 14px; line-height: 1.4; }
.mem-hint a { color: var(--gold); font-weight: 600; }
.mem-hint-quiet { color: var(--faint); font-size: 13px; }
.mem-quiet { color: var(--muted); font-size: 14px; line-height: 1.45; }
.mem-card {
  position: relative; min-height: 420px; overflow: hidden;
  display: flex; flex-direction: column; margin: 8px 0 16px;
}
.mem-card .gw-study-face {
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  padding: 16px 16px 40px;
}
.mem-drill-head { flex: 0 0 auto; }
.mem-drill-ref { margin: 0 0 4px; }
.mem-stage-body {
  flex: 1 1 auto;
  min-height: 0;
  margin-top: 10px;
  display: flex;
  flex-direction: column;
}
.mem-stage-layout {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.mem-stage-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 14px;
  flex: 0 0 auto;
  margin: 0 0 6px;
  touch-action: manipulation;
}
.mem-tool-link {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--gold);
  font: inherit;
  font-size: 16px;
  font-weight: 600;
  padding: 0;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: rgba(212, 160, 84, 0.18);
}
.mem-tool-link:disabled { opacity: 0.5; cursor: default; }
.mem-stage-copy { flex: 0 0 auto; margin: 0; }
.mem-stage-copy .mem-hint { margin: 0 0 4px; }
.mem-stage-copy .mem-hint-quiet { margin: 0 0 2px; }
.mem-verse-pane {
  flex: 1 1 auto;
  min-height: 72px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  position: relative;
  z-index: 1;
}
#mem-assembled.mem-verse-pane {
  flex: 1 1 auto;
  min-height: 72px;
}
.mem-verse-line {
  line-height: 1.7;
}
.mem-entry-dock {
  align-self: stretch;
  min-height: 0;
  padding: 8px 0 0;
  background: linear-gradient(180deg, transparent, var(--paper) 10px);
  position: relative;
  z-index: 0;
}
/* Stage 1 word bank: capped scrollport — keep dock from eating the verse */
.mem-entry-dock:has(#mem-pool) {
  flex: 0 1 auto;
  /* vh cap — % max-height is unreliable in this flex chain and was letting the pool grow unbounded */
  max-height: min(38vh, 220px);
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y;
}
/* Stage 2/3 type (±mic) bar: fixed one-line row, never a scrollport */
.mem-entry-dock:not(:has(#mem-pool)) {
  flex: 0 0 auto;
  max-height: none;
  overflow: visible;
  padding: 10px 0 6px;
}
.mem-type-field { margin: 0; }
.mem-type-field input { font-size: 16px; }
.mem-cloze-entry {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
}
.mem-cloze-entry .mem-type-field {
  flex: 1 1 auto;
  min-width: 0;
}
.mem-mic-btn {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  margin: 0;
  padding: 0;
  border-radius: 999px;
  border: 2px solid var(--gold, #d4a054);
  background: var(--gold-soft, rgba(212, 160, 84, 0.16));
  color: var(--gold, #d4a054);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 1px 0 rgba(42, 33, 24, 0.08);
  transition: box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease, color 0.2s ease;
}
.mem-mic-btn .mem-mic-icon {
  display: block;
  width: 24px;
  height: 24px;
}
.mem-mic-btn:hover,
.mem-mic-btn:focus-visible {
  border-color: var(--gold, #d4a054);
  background: rgba(212, 160, 84, 0.28);
  color: var(--gold, #d4a054);
  outline: none;
}
.mem-mic-btn.is-listening {
  color: #fff;
  background: var(--gold, #d4a054);
  border-color: var(--gold, #d4a054);
  box-shadow: 0 0 0 0 rgba(212, 160, 84, 0.55);
  animation: mem-mic-pulse 1.4s ease-out infinite;
}
.mem-mic-btn.is-denied {
  border-color: rgba(180, 72, 72, 0.85);
  background: rgba(180, 72, 72, 0.14);
  color: #b44848;
}
.mem-mic-btn.is-unavailable {
  opacity: 0.45;
  cursor: default;
}
.mem-mic-btn.is-lock-flash {
  animation: mem-mic-lock 0.32s ease;
  background: #3d8f6a;
  border-color: #3d8f6a;
  color: #fff;
}
.mem-chip.is-voice-lock {
  animation: mem-voice-chip-lock 0.42s ease;
}
@keyframes mem-mic-pulse {
  0% { box-shadow: 0 0 0 0 rgba(212, 160, 84, 0.55); }
  70% { box-shadow: 0 0 0 12px rgba(212, 160, 84, 0); }
  100% { box-shadow: 0 0 0 0 rgba(212, 160, 84, 0); }
}
@keyframes mem-mic-lock {
  0% { transform: scale(1); }
  40% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
@keyframes mem-voice-chip-lock {
  0% { background: rgba(61, 143, 106, 0.35); }
  100% { background: transparent; }
}
.mem-cloze-chips, .mem-letter-row { min-height: 44px; margin: 0; }
.mem-letter-row {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  align-items: flex-start;
  gap: 0 2px;
}
.mem-chip {
  display: inline-block; margin: 0 6px 8px 0; padding: 2px 2px 0;
  border: 0; border-bottom: 2px solid var(--gold); background: transparent;
  color: var(--text); font: inherit; font-family: "Source Serif 4", Georgia, serif; font-size: 18px; cursor: pointer;
}
.mem-chip.is-hidden {
  color: transparent;
  min-width: 2.2em;
  user-select: none;
  border-bottom-color: rgba(212, 160, 84, 0.7);
  background: rgba(212, 160, 84, 0.07);
  border-radius: 2px;
}
.mem-chip.is-now {
  border-bottom-color: var(--gold);
  box-shadow: 0 2px 0 0 var(--gold);
}
.mem-chip.is-hidden.is-now {
  border-bottom-color: var(--pass);
  box-shadow: 0 2px 0 0 var(--pass);
}
.mem-chip.is-miss {
  color: #c46a5a;
  border-bottom-color: #c46a5a;
  background: rgba(196, 106, 90, 0.14);
  border-radius: 2px;
  box-shadow: 0 2px 0 0 rgba(196, 106, 90, 0.55);
}
.mem-cloze-fail {
  margin-top: 10px;
}
.mem-cloze-fail[hidden] { display: none; }
.mem-blank-ghost { color: var(--faint); letter-spacing: 0.12em; }
.mem-letter {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 2.6em; min-height: 34px; height: auto; margin: 0 6px 8px 0;
  padding: 4px 8px;
  border: 1px solid rgba(212,160,84,0.45); border-radius: 8px;
  background: var(--gold-soft); color: var(--text);
  font-family: "Source Serif 4", Georgia, serif; font-size: 18px; font-weight: 600;
  letter-spacing: 0.06em; white-space: nowrap;
}
.mem-recite-ref {
  margin: 8px 0 16px; font-family: "Fraunces", Georgia, serif;
  font-size: 28px; letter-spacing: -0.03em; text-align: center;
}
.mem-grade { display: flex; gap: 8px; margin: 8px 0 10px; }
.mem-grade-btn {
  flex: 1; appearance: none; border: 1px solid var(--line); border-radius: 12px;
  background: var(--paper-2); color: var(--text); font: inherit; font-weight: 600;
  padding: 12px 8px; cursor: pointer;
}
.mem-grade-again { border-color: rgba(196,106,90,0.45); }
.mem-grade-good { border-color: rgba(106,154,110,0.45); }
.mem-grade-easy { border-color: rgba(212,160,84,0.55); background: var(--gold-soft); }
.mem-drill-actions { display: flex; gap: 10px; margin-top: 14px; }
.mem-drill-actions .submit, .mem-drill-actions .invite { flex: 1; margin: 0; }
.mem-remind-card {
  margin: 8px 0 16px;
  padding: 8px 16px;
}
.mem-remind-card[open] { padding: 10px 16px 16px; }
.mem-remind-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  cursor: pointer;
  list-style: none;
  padding: 6px 0;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
}
.mem-remind-toggle::-webkit-details-marker { display: none; }
.mem-remind-toggle::marker { content: none; display: none; }
.mem-remind-title {
  margin: 0;
  color: var(--text);
}
.mem-remind-chevron {
  width: 7px;
  height: 7px;
  border-right: 2px solid var(--gold);
  border-bottom: 2px solid var(--gold);
  transform: rotate(45deg);
  transition: transform 0.16s ease;
  flex-shrink: 0;
  margin-top: -3px;
}
.mem-remind-card[open] .mem-remind-chevron {
  transform: rotate(-135deg);
  margin-top: 3px;
}
.mem-remind-body { padding-top: 4px; }
#you-pane-account .mem-remind-card { margin: 14px 0 18px; }
.mem-check { display: flex; align-items: center; gap: 8px; margin: 8px 0 12px; color: var(--text); }
.mem-check input { width: auto; accent-color: var(--gold); }
.mem-hour-field { max-width: 160px; }
.mem-time-field { max-width: 200px; }
.mem-time-field input[type="time"] { color-scheme: dark; min-height: 44px; }
.mem-days-field { margin: 4px 0 8px; }
.mem-remind-days {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.mem-day {
  position: relative; display: block; margin: 0; cursor: pointer;
}
.mem-day input {
  position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none;
}
.mem-day span {
  display: block; min-width: 40px; text-align: center;
  padding: 8px 8px; border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255,255,255,0.03); color: var(--text);
  font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none;
}
.mem-day input:checked + span {
  background: var(--gold-soft);
  border-color: rgba(212,160,84,0.55);
  color: var(--gold);
}
.mem-day input:focus-visible + span {
  box-shadow: 0 0 0 3px rgba(212, 160, 84, 0.12);
}
.mem-study-picks { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 12px; }
.mem-study-pick {
  appearance: none; border: 1px solid var(--line); border-radius: 999px;
  background: rgba(255,255,255,0.03); color: var(--text);
  font: inherit; font-size: 12px; padding: 6px 10px; cursor: pointer;
}
.mem-add .invite { width: 100%; margin-top: 8px; }

.mem-assembled {
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
}
.mem-pool {
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  gap: 8px;
  margin: 4px 0 8px;
  min-height: 0;
  max-width: 100%;
  /* height owned by .mem-entry-dock scrollport — do not expand parent */
  flex: 0 0 auto;
}
.mem-pool-chip {
  appearance: none;
  border: 1px solid rgba(212, 160, 84, 0.45);
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--text);
  font: inherit;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 16px;
  padding: 6px 12px;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: rgba(212, 160, 84, 0.18);
}
.mem-pool-chip:focus {
  outline: none;
}
.mem-pool-chip:focus-visible {
  border-color: var(--gold);
}
@media (hover: hover) {
  .mem-pool-chip:hover {
    border-color: var(--gold);
  }
}
.mem-pool-chip.is-wrong,
.mem-type-field input.is-wrong {
  border-color: rgba(196, 106, 90, 0.7);
  animation: mem-shake 0.28s ease;
}
@keyframes mem-shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-4px); }
  75% { transform: translateX(4px); }
}
.mem-letter.is-wait {
  opacity: 0.5;
  border-style: dashed;
  background: transparent;
}
.mem-letter.is-now {
  opacity: 1;
  border-style: solid;
  border-color: var(--gold);
  background: var(--gold-soft);
  box-shadow: 0 0 0 2px var(--gold);
}
.mem-letter.is-now .mem-letter-ok {
  color: var(--up);
  font-weight: 700;
}
.mem-letter.is-now .mem-letter-bad {
  color: #c46a5a;
  opacity: 0.85;
  font-weight: 600;
}
.mem-letter.is-done {
  background: transparent;
  border-color: var(--gold);
}
.mem-stage-toolbar .mem-chances { margin: 0; }
.mem-chances {
  margin: 0 0 10px;
  color: var(--gold);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.mem-chances-n { letter-spacing: 0.02em; text-transform: none; font-weight: 500; color: var(--muted); }
.mem-chance-pip {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin: 0 0 0 5px;
  border-radius: 50%;
  background: var(--gold);
  vertical-align: middle;
}
.mem-chance-pip.is-lost {
  background: transparent;
  border: 1px solid var(--faint);
}
.mem-status {
  flex: 0 0 auto;
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
}
.mem-status.is-ok { color: var(--up); }
.mem-status.is-bad { color: #c46a5a; }
#mem-hint:disabled { opacity: 0.55; cursor: default; }


.user-profile-overlay {
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: rgba(10, 8, 6, 0.55);
  /* Above mem-peers-overlay (48) so profile opens on top of Memorized By */
  z-index: 52;
}
.user-profile-sheet {
  width: min(480px, 100%);
  max-height: min(82dvh, 680px);
  background: linear-gradient(180deg, var(--paper-2), var(--ink-2));
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  padding: 16px 16px calc(16px + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.user-profile-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.user-profile-head h2 {
  margin: 2px 0 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: 26px;
  letter-spacing: -0.03em;
  color: var(--text); /* b68 */
}
.user-profile-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.user-profile-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
  margin: 4px 0 12px;
}
.user-profile-name {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -0.03em;
  color: var(--text); /* b68: cream on ink — never inherit black */
}
.user-profile-rank {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}
.user-profile-you {
  margin: 0;
  color: var(--faint);
  font-size: 13px;
}
.user-profile-stats .text-link {
  font-size: inherit;
}
.user-profile-stats {
  margin: 0 0 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  font-family: "Source Serif 4", Georgia, serif;
}
.user-profile-stat { display: block; }
.user-profile-empty {
  margin: 12px 0;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}
.user-profile-studies-deck.deck.is-history {
  gap: 18px;
  margin: 8px 0 4px;
  width: 100%;
}
.user-profile-study-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.user-profile-study-wrap .card {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}
.user-profile-study-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0 0 4px;
}
.user-profile-study-actions .user-profile-action {
  align-self: stretch;
  text-align: center;
}
.user-profile-memorized {
  margin: 16px 0 0;
}
.user-profile-mem-heading {
  margin: 0 0 8px;
  font-family: "Fraunces", Georgia, serif;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--text);
  text-align: center;
}
.user-profile-mem-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.user-profile-mem-card {
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  border-radius: 12px;
  padding: 0;
  color: var(--gold);
  font-size: 13px;
  font-weight: 500;
  overflow: hidden;
}
.user-profile-mem-summary {
  list-style: none;
  cursor: pointer;
  padding: 10px 12px;
  text-align: center;
  display: block;
}
.user-profile-mem-summary::-webkit-details-marker { display: none; }
.user-profile-mem-summary::marker { content: none; display: none; }
.user-profile-mem-ref-text { display: block; }
.user-profile-mem-card[open] .user-profile-mem-summary {
  border-bottom: 1px solid var(--line);
}
.user-profile-mem-body {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
  padding: 10px 12px 12px;
}
.user-profile-mem-text {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.45;
  text-align: left;
  white-space: pre-wrap;
}
.user-profile-action {
  appearance: none;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text);
  border-radius: 999px;
  padding: 6px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.user-profile-action:active { transform: translateY(1px); }
.mem-card-comments {
  margin-top: 10px;
  display: flex;
  justify-content: flex-start;
}
.mem-card-comments .comments-count {
  position: static;
}

.user-badges-overlay {
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: rgba(10, 8, 6, 0.55);
  /* Above user-profile-overlay (52); trophies stay at 54 */
  z-index: 53;
}
.user-badges-sheet {
  width: min(480px, 100%);
  max-height: min(82dvh, 680px);
  background: linear-gradient(180deg, var(--paper-2), var(--ink-2));
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  padding: 16px 16px calc(16px + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.user-badges-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.user-badges-head h2 {
  margin: 2px 0 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: 26px;
  letter-spacing: -0.03em;
}
.user-badges-body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}



.notify-overlay {
  align-items: flex-end;
  justify-content: center;
  padding: 0;
  background: rgba(10, 8, 6, 0.55);
}
.notify-sheet {
  width: min(480px, 100%);
  max-height: min(78dvh, 640px);
  background: linear-gradient(180deg, var(--paper-2), var(--ink-2));
  border: 1px solid var(--line);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  padding: 16px 16px calc(16px + var(--safe-bottom));
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.notify-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 10px;
}
.notify-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.notify-clear {
  appearance: none;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--muted);
  border-radius: 999px;
  padding: 6px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.notify-clear:hover { border-color: rgba(212, 160, 84, 0.4); color: var(--gold); }
.notify-clear[hidden] { display: none; }
.notify-head h2 {
  margin: 2px 0 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: 26px;
  letter-spacing: -0.03em;
}
.notify-list {
  flex: 1 1 auto;
  min-height: 80px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.notify-empty {
  margin: 18px 0;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
}
.notify-item {
  appearance: none;
  border: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.03);
  color: inherit;
  text-align: left;
  border-radius: 12px;
  padding: 10px 12px;
  cursor: pointer;
  font: inherit;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.notify-item.is-unread {
  background: var(--gold-soft);
  border-color: rgba(212, 160, 84, 0.28);
}
.notify-item-copy {
  margin: 0;
  color: var(--text);
  font-size: 14px;
  line-height: 1.35;
}
.notify-item-copy strong { font-weight: 600; }
.notify-item-snippet {
  margin: 0;
  color: var(--muted);
  font-size: 13px;
  font-family: "Source Serif 4", Georgia, serif;
  line-height: 1.35;
}
.notify-item-meta {
  margin: 0;
  color: var(--faint);
  font-size: 12px;
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.notify-item-ref { color: var(--gold); }


/* Memory Verse Challenge + Recommended */
.mem-challenge-verses {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.mem-challenge-verse {
  font-size: 14px;
  color: var(--text);
  padding: 6px 10px;
  border-radius: 10px;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.06);
}
.mem-challenge-verse.is-done { color: var(--up); }
.mem-challenge.is-compact .mem-challenge-verses,
.mem-challenge.is-compact #mem-challenge-add,
.mem-challenge.is-compact #mem-challenge-points { display: none; }
/* Past card: scoped so VOTW verse spacing does not inflate open body */
#mem-past.mem-past {
  margin: 8px 0 8px;
  padding: 8px 16px;
}
#mem-past.mem-past[open] {
  padding: 10px 16px 10px;
  margin-bottom: 8px;
}
#mem-past.mem-past .mem-remind-body {
  padding-top: 6px;
  max-height: min(42vh, 320px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.mem-past-section { margin: 0 0 10px; }
.mem-past-section:last-child { margin-bottom: 0; }
.mem-past-section[hidden] { display: none; }
.mem-past-heading {
  margin: 0 0 4px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--muted);
}
.mem-past-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.mem-past-item {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 8px 0;
  border-top: 1px solid color-mix(in srgb, var(--line) 80%, transparent);
}
.mem-past-list .mem-past-item:first-child { border-top: 0; padding-top: 0; }
.mem-past-section .mem-quiet { margin: 4px 0 0; font-size: 13px; }
.mem-past-item-main { min-width: 0; width: 100%; }
.mem-past-ref {
  margin: 0 0 2px;
  font-family: "Fraunces", Georgia, serif;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.mem-past-sub {
  margin: 2px 0 0;
  font-size: 12px;
  color: var(--muted);
}
.mem-past-count {
  margin: 4px 0 0;
}
.mem-past-action {
  width: 100%;
  box-sizing: border-box;
  white-space: nowrap;
  padding: 8px 10px;
  font-size: 12px;
}
.mem-votw.mem-remind-card .mem-remind-toggle { align-items: flex-start; }
.mem-votw.mem-remind-card .mem-remind-chevron { margin-top: 8px; }
.mem-votw.mem-remind-card[open] .mem-remind-chevron { margin-top: 10px; }
#mem-past.mem-past .mem-remind-toggle { align-items: center; }
#mem-past.mem-past .mem-remind-chevron,
#mem-past.mem-past[open] .mem-remind-chevron { margin-top: 0; }

.tier-pip.is-on.suggested { background: #7aa2ff; border-color: #9bb6ff; }
.tier-pip.is.suggested, .tier-pip.suggested { }
.tier-pip.is-on.challenge { background: linear-gradient(180deg, #f0d78c, #c9a227); border-color: #f2df9a; }

.profile-trophies {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: flex-start;
  align-content: flex-start;
  margin: 6px 0 0;
  max-width: 100%;
}
.user-profile-identity .profile-trophies {
  justify-content: center;
  width: 100%;
}
#account-trophies.profile-trophies {
  justify-content: flex-start;
  margin: 0;
  position: relative; /* stacking only; stays in document flow */
  z-index: 1;
  max-width: 100%;
  overflow: visible;
  flex-wrap: wrap;
}
#account-trophies[hidden] { display: none; }
.profile-trophy {
  width: 36px;
  height: 36px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: #f0d78c;
  font-size: 18px;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  box-shadow: none;
}
.profile-trophy:active { transform: scale(0.96); }
.trophy-overlay { z-index: 54; }
.trophy-overlay .trophy-card { max-width: 420px; }
.trophy-verses {
  margin: 12px 0 18px;
  padding-left: 18px;
  color: var(--text);
}
.trophy-verses li { margin: 4px 0; }

.mem-invite-card .mem-invite-dismiss {
  width: 100%;
  margin-top: 10px;
}

/* Flat completed Recommended / Challenge cards (no expand/collapse) */
.mem-votw.is-flat > .mem-remind-toggle,
.mem-challenge.is-flat > .mem-remind-toggle {
  cursor: default;
}
.mem-votw.is-flat .mem-remind-chevron,
.mem-challenge.is-flat .mem-remind-chevron {
  display: none;
}
.mem-votw.is-flat .mem-remind-body,
.mem-challenge.is-flat .mem-remind-body {
  padding-top: 6px;
}
.mem-votw.is-flat #mem-votw-text,
.mem-votw.is-flat #mem-votw-points,
.mem-votw.is-flat #mem-votw-add,
.mem-challenge.is-flat #mem-challenge-verses,
.mem-challenge.is-flat #mem-challenge-points,
.mem-challenge.is-flat #mem-challenge-progress,
.mem-challenge.is-flat #mem-challenge-add {
  display: none !important;
}

/* Unique trophy icons */
.trophy-icon {
  --trophy-hue: 42;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  border: 1px solid hsla(var(--trophy-hue), 70%, 62%, 0.45);
  background:
    radial-gradient(circle at 30% 25%, hsla(var(--trophy-hue), 90%, 78%, 0.55), transparent 55%),
    linear-gradient(160deg, hsla(var(--trophy-hue), 65%, 42%, 0.35), hsla(var(--trophy-hue), 40%, 18%, 0.55));
  color: hsl(var(--trophy-hue), 90%, 88%);
  box-shadow: 0 0 0 1px hsla(var(--trophy-hue), 80%, 70%, 0.18), 0 4px 12px hsla(var(--trophy-hue), 70%, 40%, 0.22);
}
/* You + public profile: emoji only, no chip background */
.profile-trophies .trophy-icon,
.profile-trophy.trophy-icon,
#account-trophies .trophy-icon,
.account-rank-trophies .trophy-icon,
.user-profile-identity .trophy-icon {
  border: 0;
  background: transparent;
  box-shadow: none;
}
.trophy-icon .trophy-emoji {
  line-height: 1;
  filter: saturate(1.2) drop-shadow(0 1px 1px rgba(0,0,0,0.25));
}
.profile-trophy.trophy-icon {
  width: 36px;
  height: 36px;
  font-size: 18px;
  padding: 0;
}
.mem-challenge-trophy.trophy-icon {
  width: 28px;
  height: 28px;
  font-size: 15px;
  margin-left: auto;
}
.mem-challenge-trophy.is-preview {
  opacity: 0.78;
  animation: mem-trophy-shine 2.4s ease-in-out infinite;
}
.mem-challenge-trophy.is-earned {
  animation: mem-trophy-shine 2.4s ease-in-out infinite;
  filter: drop-shadow(0 0 8px hsla(var(--trophy-hue), 90%, 65%, 0.65));
}
.mem-challenge-trophy-big.trophy-icon,
.mem-challenge-trophy-big {
  display: none !important;
}
.mem-challenge-trophy-big.is-preview {
  opacity: 0.72;
  filter: saturate(0.85);
  animation: none;
  box-shadow: 0 0 0 1px hsla(var(--trophy-hue), 70%, 60%, 0.25);
}
.mem-challenge-trophy-big.is-earned {
  opacity: 1;
  animation: mem-trophy-shine 2.4s ease-in-out infinite;
  filter: drop-shadow(0 0 12px hsla(var(--trophy-hue), 90%, 65%, 0.75)) drop-shadow(0 4px 10px hsla(var(--trophy-hue), 70%, 40%, 0.45));
}
.mem-challenge.is-complete .mem-challenge-trophy.trophy-icon {
  width: 28px;
  height: 28px;
  font-size: 15px;
}


/* ===== Unlockables (2.3) — do not alter ranking trophies / compact challenge cards above ===== */
.unlockables-wrap { margin: 0 0 24px; }
.unlockables-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
@media (min-width: 420px) {
  .unlockables-grid { grid-template-columns: 1fr 1fr; }
}
.unlock-card {
  position: relative;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 10px 10px;
  text-align: center;
  color: var(--text);
  cursor: default;
  outline: none;
}
.unlock-card.is-tappable {
  cursor: pointer;
  border-color: rgba(212, 160, 84, 0.55);
  box-shadow: 0 0 0 1px rgba(212,160,84,0.35);
}
.unlock-card.is-tappable:hover,
.unlock-card.is-tappable:focus-visible { box-shadow: 0 0 0 2px var(--gold); }
.unlock-card.status-locked { opacity: 0.88; }
.unlock-card.status-opened {
  background: var(--paper-2);
  border-color: #3dbe6e;
  box-shadow: 0 0 0 2px rgba(61, 190, 110, 0.55);
}
.unlock-card-top {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 6px;
  min-height: 1.25rem;
  padding-top: 2px;
}
.unlock-tier {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  pointer-events: none;
}
.unlock-reward-chip {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--text);
}
.unlock-chest-row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 76px;
  margin: 4px 0 8px;
}
.unlock-chest-svg { width: 92px; height: 80px; display: block; filter: drop-shadow(0 3px 4px rgba(0,0,0,0.35)); }
.unlock-key-wrap {
  position: static;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: auto;
  height: auto;
  margin: 0;
  flex: 0 0 auto;
}
.unlock-key-svg { width: 48px; height: 36px; display: block; filter: drop-shadow(0 1px 2px rgba(0,0,0,0.4)); }
.unlock-key-silhouette { color: var(--faint); opacity: 0.55; }
.unlock-title {
  margin: 0;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 15px;
  line-height: 1.25;
  color: var(--text);
}
.unlock-subtitle {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.35;
  color: var(--muted);
}
.unlock-reward-label {
  margin: 6px 0 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--gold);
}
.unlock-status-line {
  margin: 8px 0 0;
  font-size: 11px;
  color: var(--up);
}
.unlock-progress {
  margin: 8px auto 0;
  height: 4px;
  max-width: 90%;
  border-radius: 999px;
  background: rgba(255,255,255,0.06);
  overflow: hidden;
}
.unlock-progress > span {
  display: block;
  height: 100%;
  background: var(--gold);
  border-radius: 999px;
}
.unlock-progress-text {
  margin: 4px 0 0;
  font-size: 11px;
  color: var(--faint);
}


/* mem23as: Unlockables Edit Profile Picture expand + Themes slot; Account keeps studio Themes */
/* mem23at: studio sticker manip triangle (move/rotate/resize) smaller handles */
/* mem23au: frames/stickers on all avatars (feed/rankings/profile/peers/comments) */
/* mem23ar: studio on Account + Unlockables (reparent); sticker manip; banner name/hint; taller carousels */
.unlock-studio-host:empty { display: none; }
.unlock-profile-edit {
  margin: 4px 0 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#unlock-edit-photo-btn {
  align-self: stretch;
  width: 100%;
}
.unlock-studio-expand {
  margin: 0;
}
.unlock-themes-slot:empty { display: none; }
.unlock-themes-slot .unlock-equip-row,
.unlock-themes-slot .unlock-theme-row {
  margin: 0;
}
#you-pane-account .unlock-profile-studio,
#you-pane-unlockables .unlock-profile-studio {
  margin: 4px 0 12px;
}
#you-pane-account .unlock-studio-stage,
#you-pane-unlockables .unlock-studio-stage {
  margin: 0 0 8px;
}
#you-pane-account .unlock-save-photo-btn,
#you-pane-unlockables .unlock-save-photo-btn {
  margin: 0 0 6px;
}
#you-pane-account .unlock-change-name-btn,
#you-pane-unlockables .unlock-change-name-btn {
  margin: 0 0 8px;
}
#you-pane-account .unlock-equip-panel,
#you-pane-unlockables .unlock-equip-panel {
  margin: 0;
}
/* ===== mem23r: Unlockables profile studio + frame art ===== */
.unlock-profile-studio {
  margin: 0 0 16px;
}
.unlock-studio-stage {
  display: grid;
  grid-template-columns: minmax(80px, 104px) minmax(0, 1fr) minmax(80px, 104px);
  gap: 8px;
  align-items: stretch;
  margin: 0 0 12px;
}
.unlock-carousel-col {
  display: flex;
  flex-direction: column;
  height: 188px;
  min-height: 188px;
  max-height: 188px;
  box-sizing: border-box;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  overflow: hidden;
}
.unlock-carousel-heading {
  flex-shrink: 0;
  margin: 0;
  padding: 5px 4px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-align: center;
  color: var(--gold, #b8943f);
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.unlock-carousel-col .unlock-carousel {
  flex: 1;
  height: auto;
  min-height: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  padding: 40px 0; /* shorter viewport under fixed heading */
}
.unlock-carousel {
  height: 188px;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-snap-type: y mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  padding: 48px 0;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--paper);
  scrollbar-width: none;
}
.unlock-carousel::-webkit-scrollbar { display: none; }
.unlock-carousel-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  min-height: 76px;
  margin: 0;
  padding: 4px 4px 8px;
  border: 0;
  background: transparent;
  color: var(--text);
  scroll-snap-align: center;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
}
.unlock-carousel-item.is-selected,
.unlock-carousel-item.is-on {
  background: var(--gold-soft);
}
.unlock-carousel-item.is-focused {
  outline: 2px solid var(--gold);
}
.unlock-carousel-frame-av {
  position: relative;
  display: inline-flex;
  width: 52px;
  height: 52px;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.unlock-carousel-frame-av > .avatar {
  width: 42px;
  height: 42px;
  font-size: 14px;
}
.unlock-carousel-frame-av.has-frame {
  position: relative;
  overflow: visible;
}
.unlock-carousel-label {
  margin-top: 4px;
  font-size: 10px;
  line-height: 1.15;
  text-transform: none;
  color: var(--muted);
  max-width: 100%;
  width: 100%;
  padding: 0 2px;
  box-sizing: border-box;
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
  text-align: center;
  word-break: break-word;
}
.unlock-carousel-sticker-emoji {
  font-size: 28px;
  line-height: 1;
}
.unlock-carousel-empty {
  margin: 0;
  padding: 12px 6px;
  font-size: 11px;
  color: var(--faint);
  text-align: center;
}
.unlock-studio-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-width: 0;
  gap: 4px;
}
.unlock-studio-banner-name {
  margin: 0;
  padding: 0 4px;
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.unlock-studio-sticker-hint {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 4px 22px 4px 8px;
  max-width: 100%;
  font-size: 10px;
  line-height: 1.3;
  color: var(--faint);
  text-align: center;
  background: rgba(201, 162, 39, 0.08);
  border: 1px solid rgba(212, 160, 84, 0.25);
  border-radius: 999px;
}
.unlock-studio-hint-dismiss {
  position: absolute;
  right: 2px;
  top: 50%;
  transform: translateY(-50%);
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--faint);
  width: 20px;
  height: 20px;
  padding: 0;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
}
.unlock-profile-preview {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 188px; /* match .unlock-carousel vertical window */
  min-height: 188px;
  max-height: 188px;
  box-sizing: border-box;
  margin: 0;
  padding: 8px;
  border: 1px solid var(--line); /* same weight family as carousels */
  border-radius: 14px; /* match carousel corners */
  background: var(--paper);
  cursor: pointer;
  overflow: visible;
  touch-action: none;
}
.unlock-profile-preview:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold-soft);
}
.unlock-studio-avatar-wrap {
  position: relative;
  display: inline-flex;
  width: 78px;
  height: 78px;
  align-items: center;
  justify-content: center;
  overflow: visible;
  --av: 78px;
}
.unlock-studio-avatar-wrap > .unlock-studio-avatar,
.unlock-studio-avatar {
  width: 78px !important;
  height: 78px !important;
  font-size: 26px;
}
.unlock-studio-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.unlock-studio-sticker {
  position: absolute;
  z-index: 6;
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  padding: 0;
  width: 36px;
  height: 36px;
  /* true-size: match .avatar-sticker elsewhere (previewer ratio 14/78) */
  font-size: calc(var(--av, 78px) * 14 / 78);
  line-height: 1;
  cursor: pointer;
  touch-action: none;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.45));
  transform-origin: center center;
}
.unlock-studio-sticker.is-selected {
  z-index: 7;
}
.unlock-studio-sticker-emoji {
  pointer-events: none;
  display: block;
  width: 100%;
  text-align: center;
  line-height: 36px;
  font-size: inherit;
}
.unlock-studio-sticker:focus {
  outline: 2px solid var(--gold);
  border-radius: 8px;
}
/* mem23at: studio sticker move/rotate/resize triangle handles (smaller) */
.studio-sticker-rotate,
.studio-sticker-move,
.studio-sticker-resize {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--gold);
  color: var(--text);
  font-size: 9px;
  line-height: 12px;
  text-align: center;
  pointer-events: auto;
  cursor: pointer;
  touch-action: none;
  z-index: 8;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.studio-sticker-rotate::before,
.studio-sticker-move::before,
.studio-sticker-resize::before {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 50%;
}
.studio-sticker-rotate { top: -10px; left: 50%; transform: translateX(-50%); }
.studio-sticker-move {
  left: -10px;
  bottom: -10px;
  cursor: grab;
}
.studio-sticker-resize {
  right: -10px;
  bottom: -10px;
  cursor: nwse-resize;
  background: var(--gold-soft);
}
@media (hover: none) and (pointer: coarse) {
  .studio-sticker-move,
  .studio-sticker-rotate,
  .studio-sticker-resize {
    display: none !important;
  }
}
.unlock-save-photo-btn {
  display: block;
  width: 100%;
  margin: 0 0 8px;
  text-align: center;
}
.unlock-change-name-btn {
  display: block;
  width: 100%;
  margin: 0 0 12px;
  padding: 8px 12px;
  text-align: center;
  font-size: 0.92rem;
  font-weight: 600;
  background: transparent;
  border: 1.5px solid var(--gold);
  color: var(--gold);
  box-shadow: none;
}
.unlock-change-name-btn:hover,
.unlock-change-name-btn:focus {
  border-color: var(--gold);
  background: var(--gold-soft);
  color: var(--gold);
}
.unlock-studio-sticker.avatar-sticker {
  margin: 0;
  color: inherit;
  pointer-events: auto;
  z-index: 6;
  /* inherit proportional .avatar-sticker; carousel stays .unlock-carousel-sticker-emoji */
  font-size: calc(var(--av, 78px) * 14 / 78);
  line-height: 1;
}
.unlock-carousel-frame-av.has-frame::before {
  inset: -26%;
}

.unlock-equip-panel {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper);
}
@media (max-width: 380px) {
  .unlock-studio-stage {
    grid-template-columns: minmax(76px, 92px) minmax(0, 1fr) minmax(76px, 92px);
    gap: 6px;
  }
  /* b96: do not force 78px — previewer uses --studio-avatar-* (108/135 on narrow) */
}

.unlock-equip-row { margin: 8px 0; }
.unlock-equip-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  margin-bottom: 6px;
}
.unlock-equip-opts { display: flex; flex-wrap: wrap; gap: 6px; }
.unlock-equip-btn.is-on,
.avatar-crop-cosmetics .invite.is-on {
  background: var(--gold-soft);
  color: var(--text);
  border-color: var(--gold);
}
.unlock-theme-row { margin-top: 4px; }
.unlock-theme-select {
  display: block;
  width: 100%;
  appearance: none;
  -webkit-appearance: none;
  background: var(--paper-2);
  color: var(--text);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 36px 10px 12px;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--muted) 50%),
    linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position:
    calc(100% - 16px) 50%,
    calc(100% - 10px) 50%;
  background-size: 6px 6px, 6px 6px;
  background-repeat: no-repeat;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
}
.unlock-theme-select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px var(--gold-soft);
}

/* Gacha overlay */
.gacha-overlay {
  z-index: 80;
  align-items: center;
  justify-content: center;
}
.gacha-overlay .gacha-flash {
  /* v2.4: no white screen flash on chest open */
  display: none;
  pointer-events: none;
}
.gacha-card {
  position: relative;
  overflow: hidden;
  text-align: center;
  max-width: 360px;
  width: min(92vw, 360px);
  background: var(--paper);
  color: var(--text);
}
.gacha-stage {
  min-height: 168px;
  margin-bottom: 8px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 10px;
  perspective: 700px;
}
.gacha-fortnite {
  position: relative;
  width: 100%;
  min-height: 150px;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  transform-origin: 50% 60%;
}
.gacha-chest-viewport {
  position: relative;
  width: 150px;
  height: 150px;
  overflow: hidden;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background:
    radial-gradient(circle at 50% 42%, rgba(255, 214, 120, 0.12), transparent 58%),
    radial-gradient(circle at 50% 50%, rgba(0, 0, 0, 0.22), rgba(0, 0, 0, 0.45));
  box-shadow: inset 0 0 28px rgba(0, 0, 0, 0.45);
}
.gacha-fortnite.is-punch {
  animation: gacha-stage-punch 0.45s ease;
}
@keyframes gacha-stage-punch {
  0% { transform: scale(1); }
  35% { transform: scale(1.12); }
  100% { transform: scale(1); }
}
.gacha-beam {
  position: absolute;
  left: 50%;
  bottom: 28%;
  width: 22px;
  height: 0;
  transform: translateX(-50%);
  background: linear-gradient(to top, rgba(255,230,140,0.95), rgba(255,210,80,0.15), transparent);
  border-radius: 20px;
  opacity: 0;
  pointer-events: none;
  filter: blur(0.5px);
  box-shadow: 0 0 18px 6px rgba(255,210,90,0.35);
  z-index: 1;
}
.gacha-fortnite.is-open .gacha-beam {
  animation: gacha-beam-pulse 0.9s ease forwards;
}
@keyframes gacha-beam-pulse {
  0% { height: 0; opacity: 0; }
  40% { height: 72px; opacity: 1; }
  100% { height: 96px; opacity: 0.75; }
}
.gacha-particles {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 1;
}
.gacha-particle {
  position: absolute;
  left: 50%;
  top: 48%;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #fff8d0, #e0b040 60%, #9a6a10);
  opacity: 0;
  box-shadow: 0 0 6px rgba(255,210,90,0.7);
}
.gacha-fortnite.is-open .gacha-particle {
  animation: gacha-particle-burst 0.95s ease-out forwards;
}
.gacha-particle.p1 { --dx: -36px; --dy: -48px; animation-delay: 0.02s; }
.gacha-particle.p2 { --dx: 34px; --dy: -44px; animation-delay: 0.04s; }
.gacha-particle.p3 { --dx: -14px; --dy: -58px; animation-delay: 0.06s; }
.gacha-particle.p4 { --dx: 16px; --dy: -60px; animation-delay: 0.05s; }
.gacha-particle.p5 { --dx: -48px; --dy: -28px; animation-delay: 0.08s; }
.gacha-particle.p6 { --dx: 46px; --dy: -30px; animation-delay: 0.07s; }
.gacha-particle.p7 { --dx: -26px; --dy: -38px; animation-delay: 0.1s; width: 5px; height: 5px; }
.gacha-particle.p8 { --dx: 28px; --dy: -40px; animation-delay: 0.09s; width: 5px; height: 5px; }
.gacha-particle.p9 { --dx: -6px; --dy: -64px; animation-delay: 0.03s; background: #fff; }
.gacha-particle.p10 { --dx: 8px; --dy: -52px; animation-delay: 0.11s; }
.gacha-particle.p11 { --dx: -52px; --dy: -14px; animation-delay: 0.12s; width: 4px; height: 4px; }
.gacha-particle.p12 { --dx: 50px; --dy: -16px; animation-delay: 0.13s; width: 4px; height: 4px; }
@keyframes gacha-particle-burst {
  0% { transform: translate(-50%, -50%) scale(0.4); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx)), calc(-50% + var(--dy))) scale(1); opacity: 0; }
}
.gacha-chest-anim {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.gacha-chest-stage .unlock-chest-svg {
  width: 112px;
  height: 96px;
}
.gacha-chest-anim.phase-shake .gacha-chest-stage {
  animation: gacha-chest-shake 0.55s linear;
}
@keyframes gacha-chest-shake {
  0%, 100% { transform: translate(0,0) rotate(0); }
  15% { transform: translate(-5px, 1px) rotate(-3deg); }
  30% { transform: translate(6px, -1px) rotate(3.5deg); }
  45% { transform: translate(-4px, 2px) rotate(-2.5deg); }
  60% { transform: translate(5px, -2px) rotate(2.8deg); }
  75% { transform: translate(-3px, 1px) rotate(-1.5deg); }
}
.gacha-chest-anim.phase-open .chest-lid {
  transform-origin: 36px 28px;
  animation: gacha-lid-open 0.45s ease forwards;
}
@keyframes gacha-lid-open {
  0% { transform: rotate(0deg); }
  70% { transform: rotate(-58deg); }
  100% { transform: rotate(-52deg); }
}
.gacha-key-fly {
  position: absolute;
  left: 50%;
  top: 18%;
  z-index: 3;
  width: 44px;
  height: 32px;
  transform: translate(48px, -36px) rotate(-28deg);
  opacity: 0;
  animation: gacha-key-in 0.6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
  pointer-events: none;
}
.gacha-key-fly .unlock-key-svg { width: 44px; height: 32px; }
.gacha-key-fly.is-poof {
  animation: none;
  width: 56px;
  height: 56px;
  top: 42%;
  left: 50%;
  transform: translate(-50%, -50%);
  opacity: 1;
}
.gacha-key-fly.is-poof .unlock-key-svg { display: none; }
.gacha-key-poof {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.gacha-key-poof i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 10px;
  height: 10px;
  margin: -5px 0 0 -5px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255, 248, 220, 0.95), rgba(210, 190, 150, 0.55) 55%, rgba(120, 100, 70, 0.15));
  box-shadow: 0 0 8px rgba(255, 230, 180, 0.35);
  opacity: 0;
  animation: gacha-key-poof-burst 0.42s ease-out forwards;
}
.gacha-key-poof i:nth-child(1) { --px: -10px; --py: -14px; --s: 1.15; animation-delay: 0s; }
.gacha-key-poof i:nth-child(2) { --px: 12px; --py: -12px; --s: 1; animation-delay: 0.02s; width: 8px; height: 8px; }
.gacha-key-poof i:nth-child(3) { --px: -16px; --py: 2px; --s: 0.9; animation-delay: 0.04s; width: 12px; height: 12px; }
.gacha-key-poof i:nth-child(4) { --px: 14px; --py: 4px; --s: 1.05; animation-delay: 0.03s; }
.gacha-key-poof i:nth-child(5) { --px: -4px; --py: -20px; --s: 0.75; animation-delay: 0.05s; width: 7px; height: 7px; }
.gacha-key-poof i:nth-child(6) { --px: 6px; --py: -8px; --s: 1.25; animation-delay: 0.01s; width: 14px; height: 14px; }
.gacha-key-poof i:nth-child(7) { --px: -12px; --py: -6px; --s: 0.85; animation-delay: 0.06s; width: 9px; height: 9px; }
.gacha-key-poof i:nth-child(8) { --px: 8px; --py: -18px; --s: 0.7; animation-delay: 0.07s; width: 6px; height: 6px; }
@keyframes gacha-key-poof-burst {
  0% { transform: translate(0, 0) scale(0.35); opacity: 0; filter: blur(0); }
  25% { opacity: 0.9; }
  100% { transform: translate(var(--px), calc(var(--py) - 10px)) scale(var(--s)); opacity: 0; filter: blur(1.5px); }
}
@keyframes gacha-key-in {
  0% { transform: translate(56px, -42px) rotate(-32deg); opacity: 0; }
  55% { opacity: 1; }
  100% { transform: translate(-8px, 18px) rotate(0deg); opacity: 1; }
}
.gacha-banner { position: relative; padding: 8px 4px 4px; }
.gacha-banner.is-rising,
.gacha-overlay.is-show:not(.is-unlocking) .gacha-banner {
  animation: gacha-loot-rise 0.55s ease both;
}
@keyframes gacha-loot-rise {
  0% { transform: translateY(18px) scale(0.86); opacity: 0; }
  100% { transform: translateY(0) scale(1); opacity: 1; }
}
.gacha-banner > .gacha-rays { display: none; }
.gacha-chest-viewport .gacha-rays {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 220%;
  height: 220%;
  margin: 0;
  transform: translate(-50%, -50%);
  background: repeating-conic-gradient(from 0deg, rgba(212,160,84,0.32) 0 10deg, transparent 10deg 20deg);
  opacity: 0.75;
  animation: gacha-spin 8s linear infinite;
  pointer-events: none;
  filter: saturate(1.15);
  z-index: 0;
}
.gacha-chest-viewport .gacha-chest-anim,
.gacha-chest-viewport .gacha-chest-stage {
  position: relative;
  z-index: 2;
}
@keyframes gacha-spin {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(360deg); }
}
.gacha-overlay.is-unlocking .gacha-banner { opacity: 0; pointer-events: none; }
.gacha-kicker {
  position: relative;
  margin: 0 0 6px;
  font-size: 12px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gold);
}
.gacha-type-badge {
  position: relative;
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--gold-soft);
  color: var(--text);
  margin-bottom: 8px;
}
#gacha-reward-title {
  position: relative;
  margin: 0;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 26px;
  line-height: 1.2;
  color: var(--text);
  text-shadow: 0 1px 0 rgba(0,0,0,0.35);
}
.gacha-reward-sub {
  position: relative;
  margin: 8px 0 14px;
  color: var(--muted);
  font-size: 14px;
}
.gacha-sparkles::before,
.gacha-sparkles::after {
  content: "✦";
  position: absolute;
  color: var(--gold);
  opacity: 0.8;
  animation: gacha-twinkle 1.4s ease-in-out infinite;
}
.gacha-sparkles::before { left: 12px; top: 24px; }
.gacha-sparkles::after { right: 14px; top: 40px; animation-delay: 0.4s; }
@keyframes gacha-twinkle {
  0%, 100% { opacity: 0.35; transform: scale(0.9); }
  50% { opacity: 1; transform: scale(1.15); }
}
.gacha-overlay.is-soft .gacha-chest-viewport .gacha-rays {
  opacity: 0.22;
  animation: none;
  transform: translate(-50%, -50%);
}
.gacha-overlay.is-soft .gacha-flash { display: none; }

/* Theme packs — faint backgrounds, high-contrast text */
html.theme-pink-gold {
  --ink: #1a1014;
  --ink-2: #24151c;
  --paper: #2e1c24;
  --paper-2: #3a2430;
  --line: rgba(255, 196, 214, 0.14);
  --text: #fff4f7;
  --muted: #e0b8c4;
  --faint: #b88998;
  --gold: #e6b567;
  --gold-soft: rgba(230, 181, 103, 0.18);
}
html.theme-soft-midnight {
  --ink: #0c1018;
  --ink-2: #121826;
  --paper: #182033;
  --paper-2: #1f2a40;
  --line: rgba(170, 190, 230, 0.14);
  --text: #eef3ff;
  --muted: #aebcd6;
  --faint: #7f8eab;
  --gold: #9ec0ff;
  --gold-soft: rgba(158, 192, 255, 0.16);
}
html.theme-emerald-quiet {
  --ink: #0c1410;
  --ink-2: #122018;
  --paper: #183024;
  --paper-2: #1f3a2c;
  --line: rgba(160, 220, 180, 0.14);
  --text: #eefaf1;
  --muted: #a9cbb4;
  --faint: #7a9a86;
  --gold: #8fd4a4;
  --gold-soft: rgba(143, 212, 164, 0.16);
}

/* Avatar frames + stickers */
#account-avatar-btn {
  position: relative;
  --av: 78px;
}
#account-avatar-btn.has-frame .avatar,
#account-avatar-btn.has-frame #account-home-avatar {
  box-shadow: 0 0 0 3px var(--gold);
}
#account-avatar-btn.frame-scroll.has-frame .avatar,
#account-avatar-btn.frame-scroll.has-frame #account-home-avatar {
  box-shadow: 0 0 0 3px #c4a574, 0 0 0 6px rgba(196,165,116,0.35);
  border-radius: 18% / 22%;
}
#account-avatar-btn.frame-quill.has-frame .avatar,
#account-avatar-btn.frame-quill.has-frame #account-home-avatar {
  box-shadow: 0 0 0 3px #9bb7d4, 0 0 0 6px rgba(155,183,212,0.35);
}
#account-avatar-btn.frame-crest.has-frame .avatar,
#account-avatar-btn.frame-crest.has-frame #account-home-avatar {
  box-shadow: 0 0 0 3px #d4a054, inset 0 0 0 2px rgba(255,255,255,0.15);
}
#account-avatar-btn.frame-scripture.has-frame .avatar,
#account-avatar-btn.frame-scripture.has-frame #account-home-avatar {
  box-shadow: 0 0 0 3px #b7c4a2, 0 0 0 6px rgba(183,196,162,0.3);
}
#account-avatar-btn.frame-medal.has-frame .avatar,
#account-avatar-btn.frame-medal.has-frame #account-home-avatar {
  box-shadow: 0 0 0 3px #e0c35a, 0 0 0 6px rgba(224,195,90,0.35);
}
.avatar-sticker-host {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 6; /* above photo (z2) and frame art behind (z0) */
}
.avatar-sticker {
  position: absolute;
  z-index: 6;
  font-size: calc(var(--av, 32px) * 14 / 78);
  line-height: 1;
  filter: drop-shadow(0 1px 1px rgba(0,0,0,0.45));
}
.avatar-sticker.preset-0 { top: -2px; right: -2px; }
.avatar-sticker.preset-1 { bottom: 2px; right: -2px; }
.avatar-sticker.preset-2 { top: -2px; left: -2px; }
.avatar-sticker.preset-3 { bottom: 2px; left: -2px; }

.avatar-crop-cosmetics {
  margin: 8px 0 4px;
  text-align: left;
}
.crop-cosmetic-row {
  margin: 6px 0;
}
.crop-cosmetic-row > span {
  display: block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
}
.crop-cosmetic-opts {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.avatar-cosmetic-wrap {
  position: relative;
  display: inline-flex;
  --av: 32px; /* default .avatar size; stickers/rings scale from previewer 14/78 */
}
.avatar-cosmetic-wrap:has(.avatar-sm) {
  --av: 28px;
}
.avatar-cosmetic-wrap:has(.avatar-lg) {
  --av: 64px;
}
.mem-peers .avatar-cosmetic-wrap,
.mem-peers-face.avatar-cosmetic-wrap {
  --av: 24px;
}
.avatar-cosmetic-wrap.has-frame > .avatar {
  box-shadow: 0 0 0 calc(var(--av, 32px) * 3 / 78) var(--gold);
}


/* ===== Coins + Shop (2.3) ===== */
.account-coins {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  gap: 6px;
  margin: 0;
  padding: 4px 10px;
  border-radius: 999px;
  background: var(--gold-soft);
  border: 1px solid rgba(212,160,84,0.35);
  color: var(--gold);
  font-size: 13px;
  font-weight: 600;
}
.account-coins[hidden] { display: none; }
.account-coins-icon {
  font-size: 15px;
  line-height: 0;
  display: inline-flex;
  align-items: flex-end;
}
.account-coins-icon .coin-stack-svg,
.shop-coins-stack .coin-stack-svg {
  height: 24px;
  width: auto;
  max-height: 28px;
}
.account-coins-icon.is-empty .coin-stack-svg,
.shop-coins-stack.is-empty .coin-stack-svg {
  opacity: 0.55;
  height: 22px;
}
.account-coins-label { color: var(--muted); font-weight: 500; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; }
.account-coins-amt { color: var(--gold, #d4a054); }
.shop-coins-stack {
  display: inline-flex;
  align-items: flex-end;
  line-height: 0;
}

.coin-pile,
.coin-stack-pile {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  gap: 6px;
  position: relative;
  margin-top: 4px;
  vertical-align: middle;
}
.coin-stack-wrap {
  display: inline-flex;
  align-items: flex-end;
  justify-content: center;
  line-height: 0;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.4));
}
.coin-stack-svg { display: block; overflow: visible; }
.coin-pile .coin-amt {
  font-size: 12px;
  font-weight: 800;
  color: var(--gold);
  text-shadow: 0 1px 0 rgba(0,0,0,0.35);
  line-height: 1.1;
  padding-bottom: 1px;
}
.coin-pile.coin-sm .coin-stack-svg { transform: scale(0.92); transform-origin: bottom center; }
.coin-pile.coin-md .coin-stack-svg { transform: scale(1); }
.coin-pile.coin-lg .coin-stack-svg { transform: scale(1.08); transform-origin: bottom center; }
.coin-pile.coin-sm .coin-amt { font-size: 11px; }
.coin-pile.coin-md .coin-amt { font-size: 13px; }
.coin-pile.coin-lg .coin-amt { font-size: 15px; }
.coin-pile.is-flashy {
  animation: coin-pop 0.75s cubic-bezier(0.2, 0.9, 0.2, 1);
}
@keyframes coin-pop {
  0% { transform: translateY(14px) scale(0.55); opacity: 0; }
  55% { transform: translateY(-4px) scale(1.12); opacity: 1; }
  100% { transform: translateY(0) scale(1); }
}
.unlock-coin-row { margin-top: 6px; min-height: 28px; display: flex; justify-content: center; }

.gacha-coins-award {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin: 6px 0 14px;
  padding: 12px 14px 10px;
  border-radius: 14px;
  background: linear-gradient(160deg, rgba(255,230,150,0.28), rgba(212,160,84,0.08));
  border: 1px solid rgba(232,199,106,0.55);
  box-shadow: 0 0 18px rgba(232,199,106,0.18);
}
.gacha-coins-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
.gacha-coins-award .coin-stack-pile {
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-top: 0;
}
.gacha-coins-award .coin-amt { display: none; }
.gacha-coins-award[hidden] { display: none; }
.gacha-coins-text {
  font-size: 22px;
  font-weight: 800;
  color: #f0d78c;
  letter-spacing: 0.03em;
  text-shadow: 0 1px 0 rgba(0,0,0,0.45), 0 0 12px rgba(240,215,140,0.45);
}

/* Gacha loot preview beside +# coins */
.gacha-reward-preview {
  flex-shrink: 0;
  position: relative;
}
.gacha-reward-frame {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.gacha-reward-frame > .avatar {
  width: 48px;
  height: 48px;
  font-size: 15px;
}
.gacha-reward-frame.has-frame > .avatar,
.avatar-cosmetic-wrap.gacha-reward-frame.has-frame > .avatar {
  box-shadow: 0 0 0 3px var(--gold);
}
.gacha-reward-frame.frame-scroll.has-frame > .avatar {
  box-shadow: 0 0 0 3px #c4a574, 0 0 0 6px rgba(196,165,116,0.35);
  border-radius: 18% / 22%;
}
.gacha-reward-frame.frame-quill.has-frame > .avatar {
  box-shadow: 0 0 0 3px #9bb7d4, 0 0 0 6px rgba(155,183,212,0.35);
}
.gacha-reward-frame.frame-crest.has-frame > .avatar {
  box-shadow: 0 0 0 3px #d4a054, inset 0 0 0 2px rgba(255,255,255,0.15);
}
.gacha-reward-frame.frame-scripture.has-frame > .avatar {
  box-shadow: 0 0 0 3px #b7c4a2, 0 0 0 6px rgba(183,196,162,0.3);
}
.gacha-reward-frame.frame-medal.has-frame > .avatar {
  box-shadow: 0 0 0 3px #e0c35a, 0 0 0 6px rgba(224,195,90,0.35);
}
.gacha-reward-frame.frame-laurel.has-frame > .avatar {
  box-shadow: 0 0 0 3px #9fc27a, 0 0 0 6px rgba(159,194,122,0.35);
}
.gacha-reward-frame.frame-halo.has-frame > .avatar {
  box-shadow: 0 0 0 3px #f0e2a0, 0 0 12px rgba(240,226,160,0.55);
}
.gacha-reward-frame.frame-ribbon.has-frame > .avatar {
  box-shadow: 0 0 0 3px #d47a9a, 0 0 0 6px rgba(212,122,154,0.35);
  border-radius: 22% / 28%;
}
.gacha-reward-sticker {
  width: 52px;
  height: 52px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  line-height: 1;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(232, 199, 106, 0.4);
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
}
.gacha-reward-theme {
  min-width: 72px;
  min-height: 40px;
  padding: 8px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text);
  background: var(--gold-soft);
  border: 1px solid rgba(232, 199, 106, 0.45);
  text-align: center;
  line-height: 1.2;
}
.gacha-reward-theme[data-theme="theme-pink-gold"] {
  background: linear-gradient(135deg, rgba(232,140,180,0.45), rgba(232,199,106,0.4));
  border-color: rgba(232,140,180,0.55);
}
.gacha-reward-theme[data-theme="theme-soft-midnight"] {
  background: linear-gradient(135deg, rgba(90,110,180,0.5), rgba(40,50,90,0.55));
  border-color: rgba(140,160,220,0.45);
}
.gacha-reward-theme[data-theme="theme-emerald-quiet"] {
  background: linear-gradient(135deg, rgba(80,160,120,0.45), rgba(40,90,70,0.5));
  border-color: rgba(120,200,150,0.45);
}
.gacha-reward-theme[data-theme="theme-warm-ember"] {
  background: linear-gradient(135deg, rgba(200,100,60,0.45), rgba(120,50,30,0.5));
  border-color: rgba(220,140,90,0.45);
}
.gacha-reward-theme[data-theme="theme-ocean-calm"] {
  background: linear-gradient(135deg, rgba(70,140,180,0.45), rgba(30,70,110,0.5));
  border-color: rgba(110,180,220,0.45);
}
.gacha-reward-theme[data-theme="theme-lilac-dusk"] {
  background: linear-gradient(135deg, rgba(160,120,200,0.45), rgba(90,60,130,0.5));
  border-color: rgba(190,150,230,0.45);
}

.shop-overlay,
.shop-gift-overlay {
  z-index: 78;
  align-items: flex-end;
  justify-content: center;
}
.shop-sheet,
.shop-gift-sheet {
  width: min(100vw, 440px);
  max-height: min(88vh, 720px);
  overflow: auto;
  background: var(--paper);
  color: var(--text);
  border-radius: 18px 18px 0 0;
  border: 1px solid var(--line);
  padding: 14px 14px 28px;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.35);
}
.shop-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.shop-head h2 {
  margin: 0;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 24px;
}
.shop-coins-balance {
  margin: 6px 0 0;
  color: var(--gold);
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.shop-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.shop-item {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 12px 10px;
  text-align: center;
  position: relative;
}
.shop-item.is-owned { opacity: 0.92; }
.shop-already-unlocked,
.shop-owned-tag.shop-already-unlocked {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  min-height: 40px;
  font-size: 13px;
  font-weight: 700;
  color: #3dbe6e;
  background: transparent;
  border: none;
}
.shop-item.is-locked .shop-buy-btn { opacity: 0.55; }
.shop-item-top {
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  margin-bottom: 6px;
  min-height: 1.25rem;
  padding-top: 2px;
}
.shop-item-tier {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  font-size: 10px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  pointer-events: none;
}
.shop-item-preview {
  font-size: 12px;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--gold-soft);
}
.shop-item-preview.sticker { font-size: 16px; padding: 0 4px; background: transparent; }
.shop-item h3 {
  margin: 0;
  font-size: 15px;
  font-family: "Source Serif 4", Georgia, serif;
}
.shop-item-sub {
  margin: 4px 0 0;
  font-size: 12px;
  color: var(--muted);
  min-height: 32px;
}
.shop-item-price {
  margin: 8px 0;
  font-weight: 700;
  color: var(--gold);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.shop-item-price .shop-price-stack {
  display: inline-flex;
  align-items: flex-end;
  line-height: 0;
}
.shop-item-price .coin-stack-svg { height: 22px; width: auto; }
.shop-item-price .coin-md .coin-stack-svg { height: 24px; }
.shop-item-price .coin-lg .coin-stack-svg { height: 28px; }
.shop-item-price .coin-sm { font-size: 14px; }
.shop-item-price .coin-md { font-size: 18px; }
.shop-item-price .coin-lg { font-size: 22px; }
.shop-item-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  justify-content: stretch;
  align-items: stretch;
}
.shop-item-actions .shop-buy-btn,
.shop-item-actions .shop-gift-btn {
  flex: 1 1 0;
  width: 0; /* equal flex siblings */
  min-width: 0;
  min-height: 32px;
  padding: 4px 8px;
  font-size: 12px;
  box-sizing: border-box;
  text-align: center;
}
.shop-item-actions .shop-owned-tag {
  flex: 1 1 0;
  text-align: center;
}
.shop-item-actions .submit,
.shop-item-actions .invite {
  min-height: 32px;
  padding: 4px 8px;
  font-size: 12px;
}
.shop-owned-tag {
  font-size: 12px;
  color: var(--up);
  font-weight: 600;
  align-self: center;
}
.shop-empty {
  grid-column: 1 / -1;
  color: var(--muted);
  text-align: center;
  margin: 12px 0;
}
.shop-gift-hint {
  margin: 14px 2px 0;
  font-size: 12px;
  color: var(--faint);
  line-height: 1.4;
}
.shop-gift-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.shop-gift-person {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--paper-2);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  text-align: left;
}
.shop-gift-person:hover { border-color: var(--gold); }
.shop-gift-avatar { width: 36px; height: 36px; flex-shrink: 0; }
.shop-gift-name { font-weight: 600; }

html.theme-warm-ember {
  --ink: #1a100c;
  --ink-2: #24160f;
  --paper: #2e1c14;
  --paper-2: #3a251a;
  --line: rgba(255, 196, 140, 0.14);
  --text: #fff6ef;
  --muted: #e0b89a;
  --faint: #b8896e;
  --gold: #f0a35a;
  --gold-soft: rgba(240, 163, 90, 0.18);
}
html.theme-ocean-calm {
  --ink: #0a1218;
  --ink-2: #101c26;
  --paper: #152834;
  --paper-2: #1c3342;
  --line: rgba(140, 200, 230, 0.14);
  --text: #eef8ff;
  --muted: #a8c5d6;
  --faint: #7a98ab;
  --gold: #6ec3e8;
  --gold-soft: rgba(110, 195, 232, 0.16);
}
html.theme-lilac-dusk {
  --ink: #140f1a;
  --ink-2: #1c1526;
  --paper: #261c34;
  --paper-2: #322444;
  --line: rgba(210, 180, 240, 0.14);
  --text: #f7f0ff;
  --muted: #c5b0d8;
  --faint: #947eab;
  --gold: #c9a0ef;
  --gold-soft: rgba(201, 160, 239, 0.16);
}

#account-avatar-btn.frame-laurel.has-frame .avatar,
#account-avatar-btn.frame-laurel.has-frame #account-home-avatar {
  box-shadow: 0 0 0 3px #9fc27a, 0 0 0 6px rgba(159,194,122,0.35);
}
#account-avatar-btn.frame-halo.has-frame .avatar,
#account-avatar-btn.frame-halo.has-frame #account-home-avatar {
  box-shadow: 0 0 0 3px #f0e2a0, 0 0 12px rgba(240,226,160,0.55);
}
#account-avatar-btn.frame-ribbon.has-frame .avatar,
#account-avatar-btn.frame-ribbon.has-frame #account-home-avatar {
  box-shadow: 0 0 0 3px #d47a9a, 0 0 0 6px rgba(212,122,154,0.35);
  border-radius: 22% / 28%;
}


/* Challenge a Friend tab on completed MVC card */
.mem-challenge-invite-tabs {
  justify-content: flex-end;
}
.mem-challenge-invite-tabs[hidden] {
  display: none !important;
}
.mem-challenge.is-complete {
  padding-bottom: 28px;
}
.mem-challenge.is-complete .mem-challenge-invite-tabs {
  pointer-events: none;
}
.mem-challenge.is-complete .mem-challenge-invite-tabs .collab-tab {
  pointer-events: auto;
}

/* Points Explanation */
.points-explain-row {
  margin: 0 0 8px;
}
.points-explain-link {
  font-size: 14px;
  font-weight: 600;
}
.points-explain-card {
  max-height: min(86dvh, 720px);
  overflow: auto;
}
.points-explain-body {
  margin: 0 0 16px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.5;
}
.points-explain-body h3 {
  margin: 14px 0 6px;
  color: var(--text);
  font-family: "Fraunces", Georgia, serif;
  font-size: 18px;
  letter-spacing: -0.02em;
}
.points-explain-body h3:first-child { margin-top: 0; }
.points-explain-body p { margin: 0 0 8px; }
.points-explain-body ul {
  margin: 0 0 8px;
  padding-left: 1.15em;
}
.points-explain-body li { margin: 4px 0; }
.points-explain-body strong { color: var(--text); font-weight: 600; }
.points-explain-body em { color: var(--text); font-style: italic; }

/* ===== Unlockables polish: theme cards, previews, subtabs, crop editor (mem23m) ===== */
.unlock-subtabs {
  display: flex;
  gap: 8px;
  margin: 0 0 12px;
  flex-wrap: wrap;
}

/* Unlockables | Shop rocker switch (mem23p) — scoped; does not affect other .sort-btn uses */
.unlock-subtabs.unlock-rocker {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  flex-wrap: nowrap;
  width: 100%;
  max-width: 100%;
  margin: 0 0 16px;
  padding: 4px;
  border-radius: 999px;
  background:
    linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, rgba(0, 0, 0, 0.18) 100%),
    #1a1510;
  border: 1.5px solid rgba(232, 210, 176, 0.28);
  box-shadow:
    inset 0 2px 6px rgba(0, 0, 0, 0.55),
    inset 0 -1px 0 rgba(255, 255, 255, 0.06),
    0 1px 0 rgba(255, 255, 255, 0.04);
  isolation: isolate;
}
.unlock-rocker-thumb {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: linear-gradient(180deg, #e8bc6a 0%, var(--gold) 45%, #b8823a 100%);
  box-shadow:
    0 2px 8px rgba(212, 160, 84, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.35),
    inset 0 -2px 3px rgba(0, 0, 0, 0.2);
  transition: transform 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
  z-index: 0;
  pointer-events: none;
}
.unlock-rocker.is-shop .unlock-rocker-thumb {
  transform: translateX(100%);
}
.unlock-rocker-btn {
  position: relative;
  z-index: 1;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--faint);
  font: inherit;
  font-size: 14px;
  font-weight: 650;
  letter-spacing: 0.02em;
  padding: 12px 10px;
  min-height: 44px;
  cursor: pointer;
  border-radius: 999px;
  transition: color 0.18s ease, text-shadow 0.18s ease;
  -webkit-tap-highlight-color: transparent;
}
.unlock-rocker-btn[aria-pressed="true"] {
  color: var(--ink);
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.25);
}
.unlock-rocker-btn[aria-pressed="false"]:hover {
  color: var(--muted);
}
.unlock-rocker-btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.unlock-shop-panel { margin-top: 2px; }
.unlock-shop-balance {
  margin: 0 0 12px;
  font-size: 14px;
}

.unlock-card.reward-sticker .unlock-sticker-preview {
  font-size: 28px;
  line-height: 1;
  padding: 0;
  background: transparent;
  border: none;
}
.unlock-frame-preview {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  padding: 0;
}
.unlock-frame-mini {
  display: inline-flex;
}
.unlock-frame-mini > .avatar {
  width: 28px;
  height: 28px;
  font-size: 11px;
}
.unlock-theme-swatch {
  font-size: 10px;
  font-weight: 600;
  max-width: 72px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.unlock-theme-carousel {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding: 4px 2px 10px;
  margin: 0 -2px;
  scrollbar-width: thin;
}
.unlock-theme-chip {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--card, rgba(255,255,255,0.03));
  color: var(--text);
  border-radius: 14px;
  padding: 8px 10px 7px;
  min-width: 4.6rem;
  max-width: 5.6rem;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  scroll-snap-align: start;
  transition: border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
.unlock-theme-chip:active { transform: scale(0.97); }
.unlock-theme-chip.is-selected {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent);
}
.unlock-theme-chip-swatch {
  display: block;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  max-width: none;
  overflow: hidden;
  font-size: 0;
  line-height: 0;
  color: transparent;
  background: linear-gradient(145deg, #2c241b 0%, #16110c 100%);
}
.unlock-theme-chip-swatch.is-default {
  background: linear-gradient(145deg, #d4a054 0%, #2c241b 55%, #16110c 100%);
}
.unlock-theme-chip-name {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.unlock-theme-row .unlock-equip-label {
  margin-bottom: 6px;
}

.unlock-aura-row { margin-top: 12px; }
.unlock-equip-hint {
  font-weight: 500;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted);
  opacity: 0.85;
  font-size: 10px;
  margin-left: 4px;
}
.unlock-aura-carousel {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  gap: 10px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  padding: 8px 2px 12px;
  margin: 0 -2px;
  scrollbar-width: thin;
}
.unlock-aura-chip {
  appearance: none;
  border: 1px solid var(--line);
  background: var(--card, rgba(255,255,255,0.03));
  color: var(--text);
  border-radius: 14px;
  padding: 8px 10px 8px;
  min-width: 5.5rem;
  max-width: 7.25rem;
  min-height: 44px;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  cursor: pointer;
  scroll-snap-align: start;
  box-sizing: border-box;
  transition: border-color 0.15s ease, transform 0.12s ease, box-shadow 0.15s ease;
}
.unlock-aura-chip:active { transform: scale(0.97); }
.unlock-aura-chip.is-selected {
  border-color: var(--gold);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold) 55%, transparent);
}
.unlock-aura-chip-preview {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  overflow: visible;
}
.unlock-aura-chip-name {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  max-width: 100%;
  overflow: visible;
  text-overflow: unset;
  white-space: normal;
  word-break: break-word;
  text-transform: capitalize;
}
.shop-item-preview.aura {
  width: 56px;
  height: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.shop-aura-mini { width: 48px; height: 48px; }
.shop-equip-aura-btn, .shop-unequip-aura-btn { margin-top: 4px; }

/* Theme-tinted unlockable + shop cards (match html.theme-* palettes) */
.unlock-card.unlock-card-theme.theme-pink-gold,
.shop-item.shop-item-theme.theme-pink-gold {
  background: linear-gradient(165deg, #3a2430 0%, #2e1c24 100%);
  border-color: rgba(255, 196, 214, 0.35);
  color: #fff4f7;
}
.unlock-card.unlock-card-theme.theme-soft-midnight,
.shop-item.shop-item-theme.theme-soft-midnight {
  background: linear-gradient(165deg, #1f2a40 0%, #182033 100%);
  border-color: rgba(170, 190, 230, 0.35);
  color: #eef3ff;
}
.unlock-card.unlock-card-theme.theme-emerald-quiet,
.shop-item.shop-item-theme.theme-emerald-quiet {
  background: linear-gradient(165deg, #1f3a2c 0%, #183024 100%);
  border-color: rgba(160, 220, 180, 0.35);
  color: #eefaf1;
}
.unlock-card.unlock-card-theme.theme-warm-ember,
.shop-item.shop-item-theme.theme-warm-ember {
  background: linear-gradient(165deg, #3a251a 0%, #2e1c14 100%);
  border-color: rgba(255, 196, 140, 0.35);
  color: #fff6ef;
}
.unlock-card.unlock-card-theme.theme-ocean-calm,
.shop-item.shop-item-theme.theme-ocean-calm {
  background: linear-gradient(165deg, #1c3342 0%, #152834 100%);
  border-color: rgba(140, 200, 230, 0.35);
  color: #eef8ff;
}
.unlock-card.unlock-card-theme.theme-lilac-dusk,
.shop-item.shop-item-theme.theme-lilac-dusk {
  background: linear-gradient(165deg, #322444 0%, #261c34 100%);
  border-color: rgba(210, 180, 240, 0.35);
  color: #f7f0ff;
}
.unlock-card.unlock-card-theme .unlock-subtitle,
.unlock-card.unlock-card-theme .unlock-progress-text,
.shop-item.shop-item-theme .shop-item-sub {
  color: inherit;
  opacity: 0.82;
}
.unlock-card.unlock-card-theme.status-opened {
  box-shadow: 0 0 0 2px rgba(61, 190, 110, 0.7);
  border-color: #3dbe6e;
}

.unlock-theme-swatch[data-theme="theme-pink-gold"],
.gacha-reward-theme[data-theme="theme-pink-gold"] {
  background: linear-gradient(135deg, rgba(232,140,180,0.45), rgba(232,199,106,0.4));
  border-color: rgba(232,140,180,0.55);
}
.unlock-theme-swatch[data-theme="theme-soft-midnight"] {
  background: linear-gradient(135deg, rgba(90,110,180,0.5), rgba(40,50,90,0.55));
  border-color: rgba(140,160,220,0.45);
}
.unlock-theme-swatch[data-theme="theme-emerald-quiet"] {
  background: linear-gradient(135deg, rgba(80,160,120,0.45), rgba(40,90,70,0.5));
  border-color: rgba(120,200,150,0.45);
}
.unlock-theme-swatch[data-theme="theme-warm-ember"] {
  background: linear-gradient(135deg, rgba(200,100,60,0.45), rgba(120,50,30,0.5));
  border-color: rgba(220,140,90,0.45);
}
.unlock-theme-swatch[data-theme="theme-ocean-calm"] {
  background: linear-gradient(135deg, rgba(70,140,180,0.45), rgba(30,70,110,0.5));
  border-color: rgba(110,180,220,0.45);
}
.unlock-theme-swatch[data-theme="theme-lilac-dusk"] {
  background: linear-gradient(135deg, rgba(160,120,200,0.45), rgba(90,60,130,0.5));
  border-color: rgba(190,150,230,0.45);
}

.shop-item-preview.sticker.unlock-sticker-preview { font-size: 26px; }

/* === sticker-visual-qc-b45 === */
/* Richer sticker chips: colored disc, soft depth, clearer emoji */
.shop-item-preview.sticker,
.shop-item-preview.sticker.unlock-sticker-preview,
.unlock-reward-chip.sticker-chip,
.unlock-reward-chip.unlock-sticker-preview,
.unlock-sticker-preview,
.unlock-studio-sticker-emoji,
.unlock-carousel-sticker-emoji,
.gacha-reward-preview.gacha-reward-sticker,
.crop-stage-sticker-emoji {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 2.1em;
  height: 2.1em;
  min-width: 2.1em;
  padding: 0 !important;
  border-radius: 50%;
  background:
    radial-gradient(circle at 30% 28%, rgba(255,255,255,0.55), transparent 55%),
    linear-gradient(145deg, rgba(212,175,95,0.28), rgba(90,60,30,0.18)) !important;
  border: 1.5px solid rgba(212,175,95,0.55) !important;
  box-shadow:
    0 1px 2px rgba(0,0,0,0.18),
    inset 0 1px 0 rgba(255,255,255,0.35);
  line-height: 1 !important;
  font-size: 1.15em;
  filter: saturate(1.15) contrast(1.05);
}
.shop-item-preview.sticker.unlock-sticker-preview {
  font-size: 28px;
  width: 44px;
  height: 44px;
}
.unlock-card.reward-sticker .unlock-sticker-preview {
  font-size: 30px;
  width: 48px;
  height: 48px;
}
.unlock-carousel-sticker-emoji {
  font-size: 22px;
  width: 40px;
  height: 40px;
}
.shop-item-preview.sticker.is-holofoil,
.unlock-sticker-preview.is-holofoil {
  /* no square foil chrome — shimmer is shape-masked on .sticker-holo-shine */
  border-color: transparent !important;
  background: transparent !important;
  position: relative;
}

.shop-item-preview.frame.unlock-frame-preview { background: transparent; padding: 0; }

.avatar-sticker.is-placed {
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  transform-origin: center center;
}

/* Crop deco: frame ring + stickers over hole */
.avatar-crop-deco {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--crop-view, 240px);
  height: var(--crop-view, 240px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: 4;
}
.avatar-crop-deco.has-frame {
  box-shadow: 0 0 0 3px var(--gold), 0 0 0 6px rgba(212,160,84,0.28);
}
.avatar-crop-deco.frame-scroll.has-frame {
  box-shadow: 0 0 0 3px #c4a574, 0 0 0 6px rgba(196,165,116,0.35);
  border-radius: 18% / 22%;
}
.avatar-crop-deco.frame-quill.has-frame {
  box-shadow: 0 0 0 3px #9bb7d4, 0 0 0 6px rgba(155,183,212,0.35);
}
.avatar-crop-deco.frame-crest.has-frame {
  box-shadow: 0 0 0 3px #d4a054, inset 0 0 0 2px rgba(255,255,255,0.15);
}
.avatar-crop-deco.frame-scripture.has-frame {
  box-shadow: 0 0 0 3px #b7c4a2, 0 0 0 6px rgba(183,196,162,0.3);
}
.avatar-crop-deco.frame-medal.has-frame {
  box-shadow: 0 0 0 3px #e0c35a, 0 0 0 6px rgba(224,195,90,0.35);
}
.avatar-crop-deco.frame-laurel.has-frame {
  box-shadow: 0 0 0 3px #8fbc8f, 0 0 0 6px rgba(143,188,143,0.35);
}
.avatar-crop-deco.frame-halo.has-frame {
  box-shadow: 0 0 0 3px #f0e68c, 0 0 0 7px rgba(240,230,140,0.35);
}
.avatar-crop-deco.frame-ribbon.has-frame {
  box-shadow: 0 0 0 3px #d4849a, 0 0 0 6px rgba(212,132,154,0.35);
}

/* ===== mem28 frame border animations (outer ornament only; prefers-reduced-motion) ===== */
@keyframes scrip-frame-glow-pulse {
  0%, 100% { filter: brightness(1) saturate(1); opacity: 1; }
  50% { filter: brightness(1.28) saturate(1.25); opacity: 0.92; }
}
@keyframes scrip-frame-hue-shimmer {
  0% { filter: hue-rotate(0deg) brightness(1); }
  33% { filter: hue-rotate(18deg) brightness(1.12); }
  66% { filter: hue-rotate(-12deg) brightness(1.18); }
  100% { filter: hue-rotate(0deg) brightness(1); }
}
@keyframes scrip-frame-halo-shimmer {
  0%, 100% { filter: brightness(1) drop-shadow(0 0 1px rgba(240,226,160,0.35)); }
  50% { filter: brightness(1.4) drop-shadow(0 0 6px rgba(255,245,180,0.9)); }
}
@keyframes scrip-frame-mosaic-cycle {
  0% { filter: hue-rotate(0deg) saturate(1.1); }
  25% { filter: hue-rotate(40deg) saturate(1.25); }
  50% { filter: hue-rotate(90deg) saturate(1.15); }
  75% { filter: hue-rotate(160deg) saturate(1.2); }
  100% { filter: hue-rotate(360deg) saturate(1.1); }
}
@keyframes scrip-frame-sapphire-pulse {
  0%, 100% { filter: brightness(1) saturate(1.05) drop-shadow(0 0 2px rgba(80,140,255,0.35)); }
  50% { filter: brightness(1.35) saturate(1.3) drop-shadow(0 0 7px rgba(120,180,255,0.75)); }
}
@keyframes scrip-frame-pearl-gleam {
  0%, 100% { filter: brightness(1) saturate(1); }
  50% { filter: brightness(1.3) saturate(1.15); }
}
@keyframes scrip-frame-shadow-pulse-gold {
  0%, 100% { box-shadow: 0 0 0 4px #e0c35a, 0 0 0 8px rgba(224,195,90,0.45), 0 0 0 0 rgba(224,195,90,0); }
  50% { box-shadow: 0 0 0 4px #f0d870, 0 0 0 9px rgba(224,195,90,0.65), 0 0 14px rgba(255,220,100,0.45); }
}
@keyframes scrip-frame-shadow-pulse-halo {
  0%, 100% { box-shadow: 0 0 0 4px #f0e2a0, 0 0 12px rgba(240,226,160,0.5), 0 0 0 8px rgba(240,226,160,0.2); }
  50% { box-shadow: 0 0 0 4px #fff8d0, 0 0 22px rgba(255,240,180,0.85), 0 0 0 10px rgba(240,226,160,0.35); }
}
@keyframes scrip-frame-shadow-pulse-crest {
  0%, 100% { box-shadow: 0 0 0 4px #d4a054, 0 0 0 7px rgba(212,160,84,0.4); }
  50% { box-shadow: 0 0 0 4px #f0d090, 0 0 0 9px rgba(212,160,84,0.65), 0 0 12px rgba(255,200,100,0.4); }
}
@keyframes scrip-frame-shadow-pulse-sapphire {
  0%, 100% { box-shadow: 0 0 0 4px #2a5aaa, 0 0 0 8px rgba(40,90,180,0.45), 0 0 10px rgba(80,140,255,0.3); }
  50% { box-shadow: 0 0 0 4px #4a7ae0, 0 0 0 9px rgba(60,120,220,0.65), 0 0 18px rgba(100,160,255,0.55); }
}
@keyframes scrip-frame-shadow-pulse-rose {
  0%, 100% { box-shadow: 0 0 0 4px #e0a090, 0 0 0 8px rgba(200,130,120,0.45); }
  50% { box-shadow: 0 0 0 4px #f0c0b0, 0 0 0 9px rgba(220,150,140,0.65), 0 0 14px rgba(255,180,170,0.5); }
}
@keyframes scrip-frame-shadow-pulse-jade {
  0%, 100% { box-shadow: 0 0 0 4px #3a8a6a, 0 0 0 8px rgba(50,130,100,0.45); }
  50% { box-shadow: 0 0 0 4px #50b090, 0 0 0 9px rgba(60,160,120,0.65), 0 0 12px rgba(100,200,150,0.4); }
}
@keyframes scrip-frame-shadow-pulse-pearl {
  0%, 100% { box-shadow: 0 0 0 4px #f0e8f0, 0 0 0 8px rgba(220,200,220,0.5); }
  50% { box-shadow: 0 0 0 4px #fff5ff, 0 0 0 9px rgba(240,220,240,0.7), 0 0 14px rgba(255,240,255,0.5); }
}
@keyframes scrip-frame-shadow-pulse-stained {
  0%, 100% { box-shadow: 0 0 0 4px #4a3060, 0 0 0 8px rgba(80,50,100,0.4); }
  50% { box-shadow: 0 0 0 4px #6a4080, 0 0 0 9px rgba(120,70,160,0.55), 0 0 12px rgba(160,80,200,0.35); }
}
@keyframes scrip-frame-shadow-pulse-scripture {
  0%, 100% { box-shadow: 0 0 0 4px #b7c4a2, 0 0 0 8px rgba(183,196,162,0.4); }
  50% { box-shadow: 0 0 0 4px #d0e0b8, 0 0 0 9px rgba(183,196,162,0.6), 0 0 10px rgba(200,220,160,0.35); }
}
@keyframes scrip-frame-shadow-pulse-mosaic {
  0%, 100% { box-shadow: 0 0 0 4px #6a8ab0, 0 0 0 8px rgba(100,130,170,0.4); }
  50% { box-shadow: 0 0 0 4px #80b0e0, 0 0 0 9px rgba(120,160,200,0.6), 0 0 12px rgba(140,180,220,0.4); }
}

/* ::before ornament animations */
.avatar-cosmetic-wrap.has-frame.frame-halo::before,
#account-avatar-btn.frame-halo.has-frame::before,
.avatar-crop-deco.frame-halo.has-frame::before,
.crop-frame-icon-av.frame-halo.has-frame::before,
.gacha-reward-frame.frame-halo.has-frame::before,
.unlock-carousel-frame-av.frame-halo.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-halo::before {
  animation: scrip-frame-halo-shimmer 2.8s ease-in-out infinite;
}
.avatar-cosmetic-wrap.has-frame.frame-crest::before,
#account-avatar-btn.frame-crest.has-frame::before,
.avatar-crop-deco.frame-crest.has-frame::before,
.crop-frame-icon-av.frame-crest.has-frame::before,
.gacha-reward-frame.frame-crest.has-frame::before,
.unlock-carousel-frame-av.frame-crest.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-crest::before {
  animation: scrip-frame-glow-pulse 2.4s ease-in-out infinite;
}
.avatar-cosmetic-wrap.has-frame.frame-stained::before,
#account-avatar-btn.frame-stained.has-frame::before,
.avatar-crop-deco.frame-stained.has-frame::before,
.crop-frame-icon-av.frame-stained.has-frame::before,
.gacha-reward-frame.frame-stained.has-frame::before,
.unlock-carousel-frame-av.frame-stained.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-stained::before {
  animation: scrip-frame-hue-shimmer 5s ease-in-out infinite;
}
.avatar-cosmetic-wrap.has-frame.frame-sapphire::before,
#account-avatar-btn.frame-sapphire.has-frame::before,
.avatar-crop-deco.frame-sapphire.has-frame::before,
.crop-frame-icon-av.frame-sapphire.has-frame::before,
.gacha-reward-frame.frame-sapphire.has-frame::before,
.unlock-carousel-frame-av.frame-sapphire.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-sapphire::before {
  animation: scrip-frame-sapphire-pulse 2.6s ease-in-out infinite;
}
.avatar-cosmetic-wrap.has-frame.frame-rose-gold::before,
#account-avatar-btn.frame-rose-gold.has-frame::before,
.avatar-crop-deco.frame-rose-gold.has-frame::before,
.crop-frame-icon-av.frame-rose-gold.has-frame::before,
.gacha-reward-frame.frame-rose-gold.has-frame::before,
.unlock-carousel-frame-av.frame-rose-gold.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-rose-gold::before {
  animation: scrip-frame-glow-pulse 2.5s ease-in-out infinite;
}
.avatar-cosmetic-wrap.has-frame.frame-mosaic::before,
#account-avatar-btn.frame-mosaic.has-frame::before,
.avatar-crop-deco.frame-mosaic.has-frame::before,
.crop-frame-icon-av.frame-mosaic.has-frame::before,
.gacha-reward-frame.frame-mosaic.has-frame::before,
.unlock-carousel-frame-av.frame-mosaic.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-mosaic::before {
  animation: scrip-frame-mosaic-cycle 7s linear infinite;
}
.avatar-cosmetic-wrap.has-frame.frame-medal::before,
#account-avatar-btn.frame-medal.has-frame::before,
.avatar-crop-deco.frame-medal.has-frame::before,
.crop-frame-icon-av.frame-medal.has-frame::before,
.gacha-reward-frame.frame-medal.has-frame::before,
.unlock-carousel-frame-av.frame-medal.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-medal::before {
  animation: scrip-frame-glow-pulse 2.2s ease-in-out infinite;
}
.avatar-cosmetic-wrap.has-frame.frame-scripture::before,
#account-avatar-btn.frame-scripture.has-frame::before,
.avatar-crop-deco.frame-scripture.has-frame::before,
.crop-frame-icon-av.frame-scripture.has-frame::before,
.gacha-reward-frame.frame-scripture.has-frame::before,
.unlock-carousel-frame-av.frame-scripture.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-scripture::before {
  animation: scrip-frame-glow-pulse 3.2s ease-in-out infinite;
}
.avatar-cosmetic-wrap.has-frame.frame-pearl::before,
#account-avatar-btn.frame-pearl.has-frame::before,
.avatar-crop-deco.frame-pearl.has-frame::before,
.crop-frame-icon-av.frame-pearl.has-frame::before,
.gacha-reward-frame.frame-pearl.has-frame::before,
.unlock-carousel-frame-av.frame-pearl.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-pearl::before {
  animation: scrip-frame-pearl-gleam 2.8s ease-in-out infinite;
}
.avatar-cosmetic-wrap.has-frame.frame-jade::before,
#account-avatar-btn.frame-jade.has-frame::before,
.avatar-crop-deco.frame-jade.has-frame::before,
.crop-frame-icon-av.frame-jade.has-frame::before,
.gacha-reward-frame.frame-jade.has-frame::before,
.unlock-carousel-frame-av.frame-jade.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-jade::before {
  animation: scrip-frame-glow-pulse 2.7s ease-in-out infinite;
}

/* Matching avatar ring pulse (still outside face crop) */
.avatar-cosmetic-wrap.has-frame.frame-halo > .avatar,
#account-avatar-btn.frame-halo.has-frame .avatar,
#account-avatar-btn.frame-halo.has-frame #account-home-avatar { animation: scrip-frame-shadow-pulse-halo 2.8s ease-in-out infinite; }
.avatar-cosmetic-wrap.has-frame.frame-crest > .avatar,
#account-avatar-btn.frame-crest.has-frame .avatar,
#account-avatar-btn.frame-crest.has-frame #account-home-avatar { animation: scrip-frame-shadow-pulse-crest 2.4s ease-in-out infinite; }
.avatar-cosmetic-wrap.has-frame.frame-medal > .avatar,
#account-avatar-btn.frame-medal.has-frame .avatar,
#account-avatar-btn.frame-medal.has-frame #account-home-avatar { animation: scrip-frame-shadow-pulse-gold 2.2s ease-in-out infinite; }
.avatar-cosmetic-wrap.has-frame.frame-sapphire > .avatar,
#account-avatar-btn.frame-sapphire.has-frame .avatar,
#account-avatar-btn.frame-sapphire.has-frame #account-home-avatar { animation: scrip-frame-shadow-pulse-sapphire 2.6s ease-in-out infinite; }
.avatar-cosmetic-wrap.has-frame.frame-rose-gold > .avatar,
#account-avatar-btn.frame-rose-gold.has-frame .avatar,
#account-avatar-btn.frame-rose-gold.has-frame #account-home-avatar { animation: scrip-frame-shadow-pulse-rose 2.5s ease-in-out infinite; }
.avatar-cosmetic-wrap.has-frame.frame-jade > .avatar,
#account-avatar-btn.frame-jade.has-frame .avatar,
#account-avatar-btn.frame-jade.has-frame #account-home-avatar { animation: scrip-frame-shadow-pulse-jade 2.7s ease-in-out infinite; }
.avatar-cosmetic-wrap.has-frame.frame-pearl > .avatar,
#account-avatar-btn.frame-pearl.has-frame .avatar,
#account-avatar-btn.frame-pearl.has-frame #account-home-avatar { animation: scrip-frame-shadow-pulse-pearl 2.8s ease-in-out infinite; }
.avatar-cosmetic-wrap.has-frame.frame-stained > .avatar,
#account-avatar-btn.frame-stained.has-frame .avatar,
#account-avatar-btn.frame-stained.has-frame #account-home-avatar { animation: scrip-frame-shadow-pulse-stained 5s ease-in-out infinite; }
.avatar-cosmetic-wrap.has-frame.frame-scripture > .avatar,
#account-avatar-btn.frame-scripture.has-frame .avatar,
#account-avatar-btn.frame-scripture.has-frame #account-home-avatar { animation: scrip-frame-shadow-pulse-scripture 3.2s ease-in-out infinite; }
.avatar-cosmetic-wrap.has-frame.frame-mosaic > .avatar,
#account-avatar-btn.frame-mosaic.has-frame .avatar,
#account-avatar-btn.frame-mosaic.has-frame #account-home-avatar { animation: scrip-frame-shadow-pulse-mosaic 3.5s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .avatar-cosmetic-wrap.has-frame.frame-halo::before,
  .avatar-cosmetic-wrap.has-frame.frame-crest::before,
  .avatar-cosmetic-wrap.has-frame.frame-stained::before,
  .avatar-cosmetic-wrap.has-frame.frame-sapphire::before,
  .avatar-cosmetic-wrap.has-frame.frame-rose-gold::before,
  .avatar-cosmetic-wrap.has-frame.frame-mosaic::before,
  .avatar-cosmetic-wrap.has-frame.frame-medal::before,
  .avatar-cosmetic-wrap.has-frame.frame-scripture::before,
  .avatar-cosmetic-wrap.has-frame.frame-pearl::before,
  .avatar-cosmetic-wrap.has-frame.frame-jade::before,
  #account-avatar-btn.frame-halo.has-frame::before,
  #account-avatar-btn.frame-crest.has-frame::before,
  #account-avatar-btn.frame-stained.has-frame::before,
  #account-avatar-btn.frame-sapphire.has-frame::before,
  #account-avatar-btn.frame-rose-gold.has-frame::before,
  #account-avatar-btn.frame-mosaic.has-frame::before,
  #account-avatar-btn.frame-medal.has-frame::before,
  #account-avatar-btn.frame-scripture.has-frame::before,
  #account-avatar-btn.frame-pearl.has-frame::before,
  #account-avatar-btn.frame-jade.has-frame::before,
  .unlock-studio-avatar-wrap.has-frame.frame-halo::before,
  .unlock-studio-avatar-wrap.has-frame.frame-crest::before,
  .unlock-studio-avatar-wrap.has-frame.frame-stained::before,
  .unlock-studio-avatar-wrap.has-frame.frame-sapphire::before,
  .unlock-studio-avatar-wrap.has-frame.frame-rose-gold::before,
  .unlock-studio-avatar-wrap.has-frame.frame-mosaic::before,
  .unlock-studio-avatar-wrap.has-frame.frame-medal::before,
  .unlock-studio-avatar-wrap.has-frame.frame-scripture::before,
  .unlock-studio-avatar-wrap.has-frame.frame-pearl::before,
  .unlock-studio-avatar-wrap.has-frame.frame-jade::before,
  .avatar-cosmetic-wrap.has-frame.frame-halo > .avatar,
  .avatar-cosmetic-wrap.has-frame.frame-crest > .avatar,
  .avatar-cosmetic-wrap.has-frame.frame-medal > .avatar,
  .avatar-cosmetic-wrap.has-frame.frame-sapphire > .avatar,
  .avatar-cosmetic-wrap.has-frame.frame-rose-gold > .avatar,
  .avatar-cosmetic-wrap.has-frame.frame-jade > .avatar,
  .avatar-cosmetic-wrap.has-frame.frame-pearl > .avatar,
  .avatar-cosmetic-wrap.has-frame.frame-stained > .avatar,
  .avatar-cosmetic-wrap.has-frame.frame-scripture > .avatar,
  .avatar-cosmetic-wrap.has-frame.frame-mosaic > .avatar,
  #account-avatar-btn.frame-halo.has-frame .avatar,
  #account-avatar-btn.frame-crest.has-frame .avatar,
  #account-avatar-btn.frame-medal.has-frame .avatar,
  #account-avatar-btn.frame-sapphire.has-frame .avatar,
  #account-avatar-btn.frame-rose-gold.has-frame .avatar,
  #account-avatar-btn.frame-jade.has-frame .avatar,
  #account-avatar-btn.frame-pearl.has-frame .avatar,
  #account-avatar-btn.frame-stained.has-frame .avatar,
  #account-avatar-btn.frame-scripture.has-frame .avatar,
  #account-avatar-btn.frame-mosaic.has-frame .avatar {
    animation: none !important;
  }
}

/* frame-wool (mem28o shop art) */
#account-avatar-btn.frame-wool.has-frame .avatar,
#account-avatar-btn.frame-wool.has-frame #account-home-avatar,
#account-avatar-btn.frame-wool-soft.has-frame .avatar,
#account-avatar-btn.frame-wool-soft.has-frame #account-home-avatar {
  box-shadow: 0 0 0 4px #e6dcc8, 0 0 0 8px rgba(180,160,120,0.4);
}
.gacha-reward-frame.frame-wool.has-frame > .avatar,
.gacha-reward-frame.frame-wool-soft.has-frame > .avatar {
  box-shadow: 0 0 0 4px #e6dcc8, 0 0 0 8px rgba(180,160,120,0.4);
}
.avatar-crop-deco.frame-wool.has-frame,
.avatar-crop-deco.frame-wool-soft.has-frame {
  box-shadow: 0 0 0 4px #e6dcc8, 0 0 0 8px rgba(180,160,120,0.4);
}
.crop-frame-icon-av.has-frame.frame-wool > .avatar,
.crop-frame-icon-av.has-frame.frame-wool-soft > .avatar {
  box-shadow: 0 0 0 2px #e6dcc8, 0 0 0 4px rgba(180,160,120,0.4);
}
.avatar-cosmetic-wrap.has-frame.frame-wool::before,
#account-avatar-btn.frame-wool.has-frame::before,
.avatar-crop-deco.frame-wool.has-frame::before,
.crop-frame-icon-av.frame-wool.has-frame::before,
.gacha-reward-frame.frame-wool.has-frame::before,
.unlock-carousel-frame-av.frame-wool.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-wool::before,
.avatar-cosmetic-wrap.has-frame.frame-wool-soft::before,
#account-avatar-btn.frame-wool-soft.has-frame::before,
.avatar-crop-deco.frame-wool-soft.has-frame::before,
.crop-frame-icon-av.frame-wool-soft.has-frame::before,
.gacha-reward-frame.frame-wool-soft.has-frame::before,
.unlock-carousel-frame-av.frame-wool-soft.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-wool-soft::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22none%22%3E%0A%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2240%22%20stroke%3D%22%23e6dcc8%22%20stroke-width%3D%227%22%2F%3E%0A%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2235.5%22%20stroke%3D%22%23c4b498%22%20stroke-width%3D%221.6%22%20opacity%3D%22.7%22%2F%3E%0A%3Ccircle%20cx%3D%2250%22%20cy%3D%228%22%20r%3D%226%22%20fill%3D%22%23f2ebe0%22%20stroke%3D%22%23b8a888%22%20stroke-width%3D%221.2%22%2F%3E%0A%3Ccircle%20cx%3D%2244%22%20cy%3D%2210%22%20r%3D%224.5%22%20fill%3D%22%23ebe3d4%22%20stroke%3D%22%23b8a888%22%20stroke-width%3D%221%22%2F%3E%0A%3Ccircle%20cx%3D%2256%22%20cy%3D%2210%22%20r%3D%224.5%22%20fill%3D%22%23ebe3d4%22%20stroke%3D%22%23b8a888%22%20stroke-width%3D%221%22%2F%3E%0A%3Ccircle%20cx%3D%2212%22%20cy%3D%2232%22%20r%3D%225.5%22%20fill%3D%22%23f2ebe0%22%20stroke%3D%22%23b8a888%22%20stroke-width%3D%221.1%22%2F%3E%0A%3Ccircle%20cx%3D%2288%22%20cy%3D%2232%22%20r%3D%225.5%22%20fill%3D%22%23f2ebe0%22%20stroke%3D%22%23b8a888%22%20stroke-width%3D%221.1%22%2F%3E%0A%3Ccircle%20cx%3D%2210%22%20cy%3D%2255%22%20r%3D%225%22%20fill%3D%22%23ebe3d4%22%20stroke%3D%22%23b8a888%22%20stroke-width%3D%221.1%22%2F%3E%0A%3Ccircle%20cx%3D%2290%22%20cy%3D%2255%22%20r%3D%225%22%20fill%3D%22%23ebe3d4%22%20stroke%3D%22%23b8a888%22%20stroke-width%3D%221.1%22%2F%3E%0A%3Ccircle%20cx%3D%2218%22%20cy%3D%2278%22%20r%3D%225%22%20fill%3D%22%23f2ebe0%22%20stroke%3D%22%23b8a888%22%20stroke-width%3D%221.1%22%2F%3E%0A%3Ccircle%20cx%3D%2282%22%20cy%3D%2278%22%20r%3D%225%22%20fill%3D%22%23f2ebe0%22%20stroke%3D%22%23b8a888%22%20stroke-width%3D%221.1%22%2F%3E%0A%3Ccircle%20cx%3D%2250%22%20cy%3D%2292%22%20r%3D%225.5%22%20fill%3D%22%23ebe3d4%22%20stroke%3D%22%23b8a888%22%20stroke-width%3D%221.1%22%2F%3E%0A%3Ccircle%20cx%3D%2236%22%20cy%3D%2288%22%20r%3D%224%22%20fill%3D%22%23f2ebe0%22%20stroke%3D%22%23b8a888%22%20stroke-width%3D%221%22%2F%3E%0A%3Ccircle%20cx%3D%2264%22%20cy%3D%2288%22%20r%3D%224%22%20fill%3D%22%23f2ebe0%22%20stroke%3D%22%23b8a888%22%20stroke-width%3D%221%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* frame-still (mem28o shop art) */
#account-avatar-btn.frame-still.has-frame .avatar,
#account-avatar-btn.frame-still.has-frame #account-home-avatar,
#account-avatar-btn.frame-s1-still-waters.has-frame .avatar,
#account-avatar-btn.frame-s1-still-waters.has-frame #account-home-avatar {
  box-shadow: 0 0 0 4px #78aac8, 0 0 0 8px rgba(100,160,200,0.4);
}
.gacha-reward-frame.frame-still.has-frame > .avatar,
.gacha-reward-frame.frame-s1-still-waters.has-frame > .avatar {
  box-shadow: 0 0 0 4px #78aac8, 0 0 0 8px rgba(100,160,200,0.4);
}
.avatar-crop-deco.frame-still.has-frame,
.avatar-crop-deco.frame-s1-still-waters.has-frame {
  box-shadow: 0 0 0 4px #78aac8, 0 0 0 8px rgba(100,160,200,0.4);
}
.crop-frame-icon-av.has-frame.frame-still > .avatar,
.crop-frame-icon-av.has-frame.frame-s1-still-waters > .avatar {
  box-shadow: 0 0 0 2px #78aac8, 0 0 0 4px rgba(100,160,200,0.4);
}
.avatar-cosmetic-wrap.has-frame.frame-still::before,
#account-avatar-btn.frame-still.has-frame::before,
.avatar-crop-deco.frame-still.has-frame::before,
.crop-frame-icon-av.frame-still.has-frame::before,
.gacha-reward-frame.frame-still.has-frame::before,
.unlock-carousel-frame-av.frame-still.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-still::before,
.avatar-cosmetic-wrap.has-frame.frame-s1-still-waters::before,
#account-avatar-btn.frame-s1-still-waters.has-frame::before,
.avatar-crop-deco.frame-s1-still-waters.has-frame::before,
.crop-frame-icon-av.frame-s1-still-waters.has-frame::before,
.gacha-reward-frame.frame-s1-still-waters.has-frame::before,
.unlock-carousel-frame-av.frame-s1-still-waters.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-s1-still-waters::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22none%22%3E%0A%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2240%22%20stroke%3D%22%2378aac8%22%20stroke-width%3D%226%22%2F%3E%0A%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2235.5%22%20stroke%3D%22%234a88aa%22%20stroke-width%3D%221.5%22%20opacity%3D%22.75%22%2F%3E%0A%3Cpath%20d%3D%22M18%2028c8-10%2020-14%2032-14%22%20stroke%3D%22%23a8d4ea%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.9%22%2F%3E%0A%3Cpath%20d%3D%22M50%2014c12%200%2024%204%2032%2014%22%20stroke%3D%22%238ec4dc%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.85%22%2F%3E%0A%3Cpath%20d%3D%22M12%2055c2%2018%2016%2030%2038%2032%22%20stroke%3D%22%236aa0c0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.8%22%2F%3E%0A%3Cpath%20d%3D%22M88%2055c-2%2018-16%2030-38%2032%22%20stroke%3D%22%236aa0c0%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.8%22%2F%3E%0A%3Ccircle%20cx%3D%2222%22%20cy%3D%2218%22%20r%3D%222.5%22%20fill%3D%22%23c8e8f8%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%2218%22%20r%3D%222.5%22%20fill%3D%22%23c8e8f8%22%2F%3E%0A%3Ccircle%20cx%3D%228%22%20cy%3D%2248%22%20r%3D%222%22%20fill%3D%22%23a8d4ea%22%2F%3E%3Ccircle%20cx%3D%2292%22%20cy%3D%2248%22%20r%3D%222%22%20fill%3D%22%23a8d4ea%22%2F%3E%0A%3Ccircle%20cx%3D%2250%22%20cy%3D%2294%22%20r%3D%223%22%20fill%3D%22%238ec4dc%22%20opacity%3D%22.9%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* frame-meadow (mem28o shop art) */
#account-avatar-btn.frame-meadow.has-frame .avatar,
#account-avatar-btn.frame-meadow.has-frame #account-home-avatar,
#account-avatar-btn.frame-s1-meadow-sheep.has-frame .avatar,
#account-avatar-btn.frame-s1-meadow-sheep.has-frame #account-home-avatar {
  box-shadow: 0 0 0 4px #96be6e, 0 0 0 8px rgba(140,180,90,0.4);
}
.gacha-reward-frame.frame-meadow.has-frame > .avatar,
.gacha-reward-frame.frame-s1-meadow-sheep.has-frame > .avatar {
  box-shadow: 0 0 0 4px #96be6e, 0 0 0 8px rgba(140,180,90,0.4);
}
.avatar-crop-deco.frame-meadow.has-frame,
.avatar-crop-deco.frame-s1-meadow-sheep.has-frame {
  box-shadow: 0 0 0 4px #96be6e, 0 0 0 8px rgba(140,180,90,0.4);
}
.crop-frame-icon-av.has-frame.frame-meadow > .avatar,
.crop-frame-icon-av.has-frame.frame-s1-meadow-sheep > .avatar {
  box-shadow: 0 0 0 2px #96be6e, 0 0 0 4px rgba(140,180,90,0.4);
}
.avatar-cosmetic-wrap.has-frame.frame-meadow::before,
#account-avatar-btn.frame-meadow.has-frame::before,
.avatar-crop-deco.frame-meadow.has-frame::before,
.crop-frame-icon-av.frame-meadow.has-frame::before,
.gacha-reward-frame.frame-meadow.has-frame::before,
.unlock-carousel-frame-av.frame-meadow.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-meadow::before,
.avatar-cosmetic-wrap.has-frame.frame-s1-meadow-sheep::before,
#account-avatar-btn.frame-s1-meadow-sheep.has-frame::before,
.avatar-crop-deco.frame-s1-meadow-sheep.has-frame::before,
.crop-frame-icon-av.frame-s1-meadow-sheep.has-frame::before,
.gacha-reward-frame.frame-s1-meadow-sheep.has-frame::before,
.unlock-carousel-frame-av.frame-s1-meadow-sheep.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-s1-meadow-sheep::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22none%22%3E%0A%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2240%22%20stroke%3D%22%2396be6e%22%20stroke-width%3D%226%22%2F%3E%0A%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2235.5%22%20stroke%3D%22%235a8a3a%22%20stroke-width%3D%221.5%22%20opacity%3D%22.7%22%2F%3E%0A%3Cpath%20d%3D%22M50%206c-2%208-1%2014%200%2018%201-4%202-10%200-18z%22%20fill%3D%22%237aaa50%22%2F%3E%0A%3Cpath%20d%3D%22M40%2010c0%208%202%2014%204%2016-4-2-8-8-4-16z%22%20fill%3D%22%238aba60%22%2F%3E%0A%3Cpath%20d%3D%22M60%2010c0%208-2%2014-4%2016%204-2%208-8%204-16z%22%20fill%3D%22%238aba60%22%2F%3E%0A%3Cellipse%20cx%3D%2214%22%20cy%3D%2240%22%20rx%3D%225%22%20ry%3D%222.8%22%20transform%3D%22rotate%28-50%2014%2040%29%22%20fill%3D%22%236aaa40%22%2F%3E%0A%3Cellipse%20cx%3D%2212%22%20cy%3D%2255%22%20rx%3D%225%22%20ry%3D%222.8%22%20transform%3D%22rotate%28-20%2012%2055%29%22%20fill%3D%22%237aaa50%22%2F%3E%0A%3Cellipse%20cx%3D%2286%22%20cy%3D%2240%22%20rx%3D%225%22%20ry%3D%222.8%22%20transform%3D%22rotate%2850%2086%2040%29%22%20fill%3D%22%236aaa40%22%2F%3E%0A%3Cellipse%20cx%3D%2288%22%20cy%3D%2255%22%20rx%3D%225%22%20ry%3D%222.8%22%20transform%3D%22rotate%2820%2088%2055%29%22%20fill%3D%22%237aaa50%22%2F%3E%0A%3Cpath%20d%3D%22M28%2088c6-8%2010-6%2014-2M72%2088c-6-8-10-6-14-2%22%20stroke%3D%22%235a8a3a%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3Ccircle%20cx%3D%2250%22%20cy%3D%2292%22%20r%3D%223.5%22%20fill%3D%22%239fc27a%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* frame-staff (mem28o shop art) */
#account-avatar-btn.frame-staff.has-frame .avatar,
#account-avatar-btn.frame-staff.has-frame #account-home-avatar,
#account-avatar-btn.frame-shepherds-staff.has-frame .avatar,
#account-avatar-btn.frame-shepherds-staff.has-frame #account-home-avatar {
  box-shadow: 0 0 0 4px #8a6a32, 0 0 0 8px rgba(140,100,40,0.4);
}
.gacha-reward-frame.frame-staff.has-frame > .avatar,
.gacha-reward-frame.frame-shepherds-staff.has-frame > .avatar {
  box-shadow: 0 0 0 4px #8a6a32, 0 0 0 8px rgba(140,100,40,0.4);
}
.avatar-crop-deco.frame-staff.has-frame,
.avatar-crop-deco.frame-shepherds-staff.has-frame {
  box-shadow: 0 0 0 4px #8a6a32, 0 0 0 8px rgba(140,100,40,0.4);
}
.crop-frame-icon-av.has-frame.frame-staff > .avatar,
.crop-frame-icon-av.has-frame.frame-shepherds-staff > .avatar {
  box-shadow: 0 0 0 2px #8a6a32, 0 0 0 4px rgba(140,100,40,0.4);
}
.avatar-cosmetic-wrap.has-frame.frame-staff::before,
#account-avatar-btn.frame-staff.has-frame::before,
.avatar-crop-deco.frame-staff.has-frame::before,
.crop-frame-icon-av.frame-staff.has-frame::before,
.gacha-reward-frame.frame-staff.has-frame::before,
.unlock-carousel-frame-av.frame-staff.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-staff::before,
.avatar-cosmetic-wrap.has-frame.frame-shepherds-staff::before,
#account-avatar-btn.frame-shepherds-staff.has-frame::before,
.avatar-crop-deco.frame-shepherds-staff.has-frame::before,
.crop-frame-icon-av.frame-shepherds-staff.has-frame::before,
.gacha-reward-frame.frame-shepherds-staff.has-frame::before,
.unlock-carousel-frame-av.frame-shepherds-staff.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-shepherds-staff::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22none%22%3E%0A%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2240%22%20stroke%3D%22%238a6a32%22%20stroke-width%3D%225.5%22%2F%3E%0A%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2235.5%22%20stroke%3D%22%23d4af37%22%20stroke-width%3D%221.8%22%20opacity%3D%22.7%22%2F%3E%0A%3Cpath%20d%3D%22M28%208c-12%202-18%2012-16%2022%202%208%2010%2012%2018%2010%22%20stroke%3D%22%23a07838%22%20stroke-width%3D%223.2%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M30%208c-10%202-15%2011-13%2020%22%20stroke%3D%22%23d4af37%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.8%22%2F%3E%0A%3Cpath%20d%3D%22M78%2022v56%22%20stroke%3D%22%238a6a32%22%20stroke-width%3D%223.5%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M78%2022v56%22%20stroke%3D%22%23d4af37%22%20stroke-width%3D%221.2%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.55%22%2F%3E%0A%3Ccircle%20cx%3D%2278%22%20cy%3D%2218%22%20r%3D%223.5%22%20fill%3D%22%23d4af37%22%20stroke%3D%22%238a6a32%22%2F%3E%0A%3Ccircle%20cx%3D%2250%22%20cy%3D%2294%22%20r%3D%223%22%20fill%3D%22%23c9a227%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* frame-hill (mem28o shop art) */
#account-avatar-btn.frame-hill.has-frame .avatar,
#account-avatar-btn.frame-hill.has-frame #account-home-avatar,
#account-avatar-btn.frame-shepherds-watch.has-frame .avatar,
#account-avatar-btn.frame-shepherds-watch.has-frame #account-home-avatar {
  box-shadow: 0 0 0 4px #d4af37, 0 0 0 8px rgba(212,175,55,0.45);
}
.gacha-reward-frame.frame-hill.has-frame > .avatar,
.gacha-reward-frame.frame-shepherds-watch.has-frame > .avatar {
  box-shadow: 0 0 0 4px #d4af37, 0 0 0 8px rgba(212,175,55,0.45);
}
.avatar-crop-deco.frame-hill.has-frame,
.avatar-crop-deco.frame-shepherds-watch.has-frame {
  box-shadow: 0 0 0 4px #d4af37, 0 0 0 8px rgba(212,175,55,0.45);
}
.crop-frame-icon-av.has-frame.frame-hill > .avatar,
.crop-frame-icon-av.has-frame.frame-shepherds-watch > .avatar {
  box-shadow: 0 0 0 2px #d4af37, 0 0 0 4px rgba(212,175,55,0.45);
}
.avatar-cosmetic-wrap.has-frame.frame-hill::before,
#account-avatar-btn.frame-hill.has-frame::before,
.avatar-crop-deco.frame-hill.has-frame::before,
.crop-frame-icon-av.frame-hill.has-frame::before,
.gacha-reward-frame.frame-hill.has-frame::before,
.unlock-carousel-frame-av.frame-hill.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-hill::before,
.avatar-cosmetic-wrap.has-frame.frame-shepherds-watch::before,
#account-avatar-btn.frame-shepherds-watch.has-frame::before,
.avatar-crop-deco.frame-shepherds-watch.has-frame::before,
.crop-frame-icon-av.frame-shepherds-watch.has-frame::before,
.gacha-reward-frame.frame-shepherds-watch.has-frame::before,
.unlock-carousel-frame-av.frame-shepherds-watch.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-shepherds-watch::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22none%22%3E%0A%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2240%22%20stroke%3D%22%23d4af37%22%20stroke-width%3D%225.5%22%2F%3E%0A%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2235.5%22%20stroke%3D%22%238a7030%22%20stroke-width%3D%221.6%22%20opacity%3D%22.75%22%2F%3E%0A%3Cpath%20d%3D%22M8%2078c10-14%2022-18%2034-12%208%204%2014%204%2022%200%2012-6%2024-2%2034%2012%22%20stroke%3D%22%236a8a40%22%20stroke-width%3D%223%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M8%2084c12-10%2024-12%2036-6%2010%205%2016%204%2026-1%2012-6%2022-2%2030%207%22%20stroke%3D%22%23d4af37%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20opacity%3D%22.85%22%2F%3E%0A%3Cpath%20d%3D%22M50%204l2%205h5l-4%203.2%201.5%205L50%2014l-4.5%203.2%201.5-5-4-3.2h5z%22%20fill%3D%22%23ffe08a%22%20stroke%3D%22%23a08020%22%20stroke-width%3D%220.8%22%2F%3E%0A%3Ccircle%20cx%3D%2214%22%20cy%3D%2230%22%20r%3D%222.2%22%20fill%3D%22%23ffe08a%22%2F%3E%3Ccircle%20cx%3D%2286%22%20cy%3D%2230%22%20r%3D%222.2%22%20fill%3D%22%23ffe08a%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* frame-cloak (mem28o shop art) */
#account-avatar-btn.frame-cloak.has-frame .avatar,
#account-avatar-btn.frame-cloak.has-frame #account-home-avatar {
  box-shadow: 0 0 0 4px #6a4a6a, 0 0 0 8px rgba(120,80,120,0.45);
}
.gacha-reward-frame.frame-cloak.has-frame > .avatar {
  box-shadow: 0 0 0 4px #6a4a6a, 0 0 0 8px rgba(120,80,120,0.45);
}
.avatar-crop-deco.frame-cloak.has-frame {
  box-shadow: 0 0 0 4px #6a4a6a, 0 0 0 8px rgba(120,80,120,0.45);
}
.crop-frame-icon-av.has-frame.frame-cloak > .avatar {
  box-shadow: 0 0 0 2px #6a4a6a, 0 0 0 4px rgba(120,80,120,0.45);
}
.avatar-cosmetic-wrap.has-frame.frame-cloak::before,
#account-avatar-btn.frame-cloak.has-frame::before,
.avatar-crop-deco.frame-cloak.has-frame::before,
.crop-frame-icon-av.frame-cloak.has-frame::before,
.gacha-reward-frame.frame-cloak.has-frame::before,
.unlock-carousel-frame-av.frame-cloak.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-cloak::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22none%22%3E%0A%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2240%22%20stroke%3D%22%236a4a6a%22%20stroke-width%3D%226%22%2F%3E%0A%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2235.5%22%20stroke%3D%22%233a2848%22%20stroke-width%3D%221.6%22%20opacity%3D%22.75%22%2F%3E%0A%3Cpath%20d%3D%22M14%2022c-6%2012-8%2028-4%2044%208-6%2012-18%2010-34%202%2010%206%2020%2014%2026%22%20stroke%3D%22%238a6a8a%22%20stroke-width%3D%222.4%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M86%2022c6%2012%208%2028%204%2044-8-6-12-18-10-34-2%2010-6%2020-14%2026%22%20stroke%3D%22%238a6a8a%22%20stroke-width%3D%222.4%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M20%2070c8%2010%2018%2014%2030%2014s22-4%2030-14%22%20stroke%3D%22%23c9a227%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.85%22%2F%3E%0A%3Ccircle%20cx%3D%2250%22%20cy%3D%228%22%20r%3D%224.5%22%20fill%3D%22%23c9a227%22%20stroke%3D%22%236a4a20%22%2F%3E%0A%3Ccircle%20cx%3D%2250%22%20cy%3D%228%22%20r%3D%222%22%20fill%3D%22%23ffe08a%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* frame-fold (mem28o shop art) */
#account-avatar-btn.frame-fold.has-frame .avatar,
#account-avatar-btn.frame-fold.has-frame #account-home-avatar {
  box-shadow: 0 0 0 4px #8a7a5a, 0 0 0 8px rgba(140,120,80,0.4);
}
.gacha-reward-frame.frame-fold.has-frame > .avatar {
  box-shadow: 0 0 0 4px #8a7a5a, 0 0 0 8px rgba(140,120,80,0.4);
}
.avatar-crop-deco.frame-fold.has-frame {
  box-shadow: 0 0 0 4px #8a7a5a, 0 0 0 8px rgba(140,120,80,0.4);
}
.crop-frame-icon-av.has-frame.frame-fold > .avatar {
  box-shadow: 0 0 0 2px #8a7a5a, 0 0 0 4px rgba(140,120,80,0.4);
}
.avatar-cosmetic-wrap.has-frame.frame-fold::before,
#account-avatar-btn.frame-fold.has-frame::before,
.avatar-crop-deco.frame-fold.has-frame::before,
.crop-frame-icon-av.frame-fold.has-frame::before,
.gacha-reward-frame.frame-fold.has-frame::before,
.unlock-carousel-frame-av.frame-fold.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-fold::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22none%22%3E%0A%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2240%22%20stroke%3D%22%238a7a5a%22%20stroke-width%3D%225.5%22%2F%3E%0A%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2235.5%22%20stroke%3D%22%235a4a30%22%20stroke-width%3D%221.5%22%20opacity%3D%22.75%22%2F%3E%0A%3Crect%20x%3D%226%22%20y%3D%2228%22%20width%3D%227%22%20height%3D%2244%22%20rx%3D%221.5%22%20fill%3D%22%236a5a3a%22%20stroke%3D%22%233a3020%22%2F%3E%0A%3Crect%20x%3D%2287%22%20y%3D%2228%22%20width%3D%227%22%20height%3D%2244%22%20rx%3D%221.5%22%20fill%3D%22%236a5a3a%22%20stroke%3D%22%233a3020%22%2F%3E%0A%3Cpath%20d%3D%22M10%2026h80%22%20stroke%3D%22%23c9a227%22%20stroke-width%3D%223%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M14%2022h72%22%20stroke%3D%22%238a7a5a%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M16%2078h68%22%20stroke%3D%22%23c9a227%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3Ccircle%20cx%3D%2213%22%20cy%3D%2224%22%20r%3D%222.5%22%20fill%3D%22%23d4af37%22%2F%3E%3Ccircle%20cx%3D%2287%22%20cy%3D%2224%22%20r%3D%222.5%22%20fill%3D%22%23d4af37%22%2F%3E%0A%3C%2Fsvg%3E");
}

/* frame-dawn (mem28o shop art) */
#account-avatar-btn.frame-dawn.has-frame .avatar,
#account-avatar-btn.frame-dawn.has-frame #account-home-avatar {
  box-shadow: 0 0 0 4px #e8a060, 0 0 0 8px rgba(232,160,96,0.45);
}
.gacha-reward-frame.frame-dawn.has-frame > .avatar {
  box-shadow: 0 0 0 4px #e8a060, 0 0 0 8px rgba(232,160,96,0.45);
}
.avatar-crop-deco.frame-dawn.has-frame {
  box-shadow: 0 0 0 4px #e8a060, 0 0 0 8px rgba(232,160,96,0.45);
}
.crop-frame-icon-av.has-frame.frame-dawn > .avatar {
  box-shadow: 0 0 0 2px #e8a060, 0 0 0 4px rgba(232,160,96,0.45);
}
.avatar-cosmetic-wrap.has-frame.frame-dawn::before,
#account-avatar-btn.frame-dawn.has-frame::before,
.avatar-crop-deco.frame-dawn.has-frame::before,
.crop-frame-icon-av.frame-dawn.has-frame::before,
.gacha-reward-frame.frame-dawn.has-frame::before,
.unlock-carousel-frame-av.frame-dawn.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-dawn::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22none%22%3E%0A%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2240%22%20stroke%3D%22%23e8a060%22%20stroke-width%3D%225.5%22%2F%3E%0A%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2235.5%22%20stroke%3D%22%23c07040%22%20stroke-width%3D%221.5%22%20opacity%3D%22.7%22%2F%3E%0A%3Ccircle%20cx%3D%2250%22%20cy%3D%2210%22%20r%3D%227%22%20fill%3D%22%23ffd080%22%20stroke%3D%22%23c07040%22%20stroke-width%3D%221.3%22%2F%3E%0A%3Cpath%20d%3D%22M50%201v4M38%204l3%204M62%204l-3%204M28%2012l4%203M72%2012l-4%203%22%20stroke%3D%22%23ffd080%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%0A%3Cpath%20d%3D%22M10%2040l6%202M84%2040l-6%202M14%2070l5-2M86%2070l-5-2%22%20stroke%3D%22%23e8a060%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.85%22%2F%3E%0A%3Cpath%20d%3D%22M16%2088c10-8%2024-12%2034-12s24%204%2034%2012%22%20stroke%3D%22%23ffb070%22%20stroke-width%3D%223%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.9%22%2F%3E%0A%3C%2Fsvg%3E");
}

.avatar-crop-hole.has-frame.frame-scroll { border-radius: 18% / 22%; }
.avatar-crop-sticker-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.crop-stage-sticker {
  position: absolute;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
  pointer-events: auto;
  touch-action: none;
  cursor: grab;
  z-index: 5;
  transform-origin: center center;
}
.crop-stage-sticker.is-selected {
  z-index: 6;
}
.crop-stage-sticker-emoji {
  font-size: 28px;
  line-height: 40px;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
  pointer-events: none;
}
.crop-sticker-rotate,
.crop-sticker-remove {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--paper);
  border: 1px solid var(--gold);
  color: var(--text);
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  pointer-events: auto;
  cursor: pointer;
}
.crop-sticker-rotate { left: 50%; top: -14px; transform: translateX(-50%); }
.crop-sticker-remove { right: -8px; top: -8px; }

.crop-frame-icons { align-items: flex-end; }
.crop-frame-icon {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--paper-2);
  cursor: pointer;
  min-width: 48px;
}
.crop-frame-icon.is-on {
  border-color: var(--gold);
  background: var(--gold-soft);
}
.crop-frame-icon-av {
  display: inline-flex;
  position: relative;
}
.crop-frame-icon-av > .avatar {
  width: 36px;
  height: 36px;
  font-size: 13px;
}
.crop-frame-icon-av.has-frame.frame-scroll > .avatar {
  box-shadow: 0 0 0 2px #c4a574, 0 0 0 4px rgba(196,165,116,0.35);
  border-radius: 18% / 22%;
}
.crop-frame-icon-av.has-frame.frame-quill > .avatar {
  box-shadow: 0 0 0 2px #9bb7d4, 0 0 0 4px rgba(155,183,212,0.35);
}
.crop-frame-icon-av.has-frame.frame-crest > .avatar {
  box-shadow: 0 0 0 2px #d4a054;
}
.crop-frame-icon-av.has-frame.frame-scripture > .avatar {
  box-shadow: 0 0 0 2px #b7c4a2, 0 0 0 4px rgba(183,196,162,0.3);
}
.crop-frame-icon-av.has-frame.frame-medal > .avatar {
  box-shadow: 0 0 0 2px #e0c35a, 0 0 0 4px rgba(224,195,90,0.35);
}
.crop-frame-icon-av.has-frame.frame-laurel > .avatar {
  box-shadow: 0 0 0 2px #8fbc8f, 0 0 0 4px rgba(143,188,143,0.35);
}
.crop-frame-icon-av.has-frame.frame-halo > .avatar {
  box-shadow: 0 0 0 2px #f0e68c, 0 0 0 5px rgba(240,230,140,0.35);
}
.crop-frame-icon-av.has-frame.frame-ribbon > .avatar {
  box-shadow: 0 0 0 2px #d4849a, 0 0 0 4px rgba(212,132,154,0.35);
}
.crop-frame-icon-label {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
}
.crop-sticker-tray-btn {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--paper-2);
  font-size: 22px;
  cursor: pointer;
  line-height: 1;
}
.crop-sticker-tray-btn.is-on {
  border-color: var(--gold);
  background: var(--gold-soft);
}
.crop-rotate-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.crop-rotate-label {
  font-size: 12px;
  color: var(--muted);
  min-width: 48px;
}
.crop-rotate-row input[type="range"] {
  flex: 1;
  accent-color: var(--gold);
}

.unlock-status-line.is-unlocked {
  color: #3dbe6e;
  font-weight: 600;
}


/* ===== mem23q: unique SVG frame overlays + stronger rings + new themes ===== */

.avatar-cosmetic-wrap.has-frame,
#account-avatar-btn.has-frame,
.avatar-crop-deco.has-frame,
.crop-frame-icon-av.has-frame,
.gacha-reward-frame.has-frame,
.unlock-studio-avatar-wrap.has-frame,
.unlock-carousel-frame-av.has-frame {
  position: relative;
  overflow: visible;
}
/* Picture-frame placement: art sits behind/outside the photo (not a face overlay).
   Slight top overhang OK; stickers stay above (z-index 6). QC may redesign SVG art later. */
.avatar-cosmetic-wrap.has-frame,
#account-avatar-btn.has-frame,
.crop-frame-icon-av.has-frame,
.gacha-reward-frame.has-frame,
.unlock-studio-avatar-wrap.has-frame,
.unlock-carousel-frame-av.has-frame {
  overflow: visible;
}
.avatar-cosmetic-wrap.has-frame::before,
#account-avatar-btn.has-frame::before,
.avatar-crop-deco.has-frame::before,
.crop-frame-icon-av.has-frame::before,
.gacha-reward-frame.has-frame::before,
.unlock-studio-avatar-wrap.has-frame::before,
.unlock-carousel-frame-av.has-frame::before {
  content: "";
  position: absolute;
  inset: -26%;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.avatar-cosmetic-wrap.has-frame > .avatar,
#account-avatar-btn.has-frame > .avatar,
#account-avatar-btn.has-frame #account-home-avatar,
.crop-frame-icon-av.has-frame > .avatar,
.gacha-reward-frame.has-frame > .avatar,
.unlock-studio-avatar-wrap.has-frame > .avatar,
.unlock-carousel-frame-av.has-frame > .avatar {
  position: relative;
  z-index: 2;
}
/* b96: hollow die-cut PNG rings sit ON TOP of the photo edge (match carousel face-under-frame) */
.has-frame:has(> img.frame-diecut) > .avatar,
.has-frame:has(> img.frame-diecut) > .unlock-studio-avatar,
.unlock-studio-avatar-wrap.has-frame:has(> img.frame-diecut) > .avatar,
.unlock-studio-avatar-wrap.has-frame:has(> img.frame-diecut) > .unlock-studio-avatar,
#account-avatar-btn.has-frame:has(> img.frame-diecut) > .avatar,
#account-avatar-btn.has-frame:has(> img.frame-diecut) #account-home-avatar,
.avatar-cosmetic-wrap.has-frame:has(> img.frame-diecut) > .avatar,
.gacha-reward-frame.has-frame:has(> img.frame-diecut) > .avatar,
.crop-frame-icon-av.has-frame:has(> img.frame-diecut) > .avatar {
  z-index: 0;
}
.has-frame > img.frame-diecut,
.unlock-studio-avatar-wrap > img.frame-diecut,
#unlock-profile-preview .unlock-studio-avatar-wrap > img.frame-diecut {
  z-index: 3;
}

/* Larger unlock/shop frame preview so unique art is visible on chest cards */
.unlock-frame-preview {
  overflow: visible;
  padding: 6px;
}
.unlock-frame-mini {
  overflow: visible;
}
.unlock-frame-mini > .avatar {
  width: 52px;
  height: 52px;
  font-size: 16px;
}
.shop-item-preview.frame.unlock-frame-preview .unlock-frame-mini > .avatar {
  width: 52px;
  height: 52px;
}
.avatar-cosmetic-wrap.has-frame > .avatar {
  box-shadow: 0 0 0 calc(var(--av, 32px) * 3 / 78) var(--gold);
}
#account-avatar-btn.has-frame .avatar,
#account-avatar-btn.has-frame #account-home-avatar {
  box-shadow: 0 0 0 4px var(--gold);
}
.crop-frame-icon-av.has-frame > .avatar {
  width: 40px;
  height: 40px;
}


/* frame-scroll */
#account-avatar-btn.frame-scroll.has-frame .avatar,
#account-avatar-btn.frame-scroll.has-frame #account-home-avatar {
  box-shadow: 0 0 0 4px #c4a574, 0 0 0 8px rgba(196,165,116,0.45);
  border-radius: 18% / 22%;
}
.gacha-reward-frame.frame-scroll.has-frame > .avatar {
  box-shadow: 0 0 0 4px #c4a574, 0 0 0 8px rgba(196,165,116,0.45);
  border-radius: 18% / 22%;
}
.avatar-crop-deco.frame-scroll.has-frame {
  box-shadow: 0 0 0 4px #c4a574, 0 0 0 8px rgba(196,165,116,0.45);
  border-radius: 18% / 22%;
}
.crop-frame-icon-av.has-frame.frame-scroll > .avatar {
  box-shadow: 0 0 0 2px #c4a574, 0 0 0 4px rgba(196,165,116,0.45);
  border-radius: 18% / 22%;
}
.avatar-cosmetic-wrap.has-frame.frame-scroll::before,
#account-avatar-btn.frame-scroll.has-frame::before,
.avatar-crop-deco.frame-scroll.has-frame::before,
.crop-frame-icon-av.frame-scroll.has-frame::before,
.gacha-reward-frame.frame-scroll.has-frame::before,
.unlock-carousel-frame-av.frame-scroll.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-scroll::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22none%22%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2240%22%20stroke%3D%22%23c4a574%22%20stroke-width%3D%227%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2235.5%22%20stroke%3D%22%238a6a40%22%20stroke-width%3D%221.6%22%20opacity%3D%22.7%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2243.5%22%20stroke%3D%22%23e8d4a8%22%20stroke-width%3D%221.4%22%20opacity%3D%22.55%22%2F%3E%20%3C%21--%20top%20roller%20--%3E%20%3Crect%20x%3D%2222%22%20y%3D%222%22%20width%3D%2256%22%20height%3D%2210%22%20rx%3D%225%22%20fill%3D%22%23d4b888%22%20stroke%3D%22%237a5a30%22%20stroke-width%3D%221.4%22%2F%3E%20%3Ccircle%20cx%3D%2222%22%20cy%3D%227%22%20r%3D%225.5%22%20fill%3D%22%23b89050%22%20stroke%3D%22%236a4820%22%20stroke-width%3D%221.3%22%2F%3E%20%3Ccircle%20cx%3D%2278%22%20cy%3D%227%22%20r%3D%225.5%22%20fill%3D%22%23b89050%22%20stroke%3D%22%236a4820%22%20stroke-width%3D%221.3%22%2F%3E%20%3Ccircle%20cx%3D%2222%22%20cy%3D%227%22%20r%3D%222%22%20fill%3D%22%23f0e0c0%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%227%22%20r%3D%222%22%20fill%3D%22%23f0e0c0%22%2F%3E%20%3C%21--%20bottom%20roller%20--%3E%20%3Crect%20x%3D%2222%22%20y%3D%2288%22%20width%3D%2256%22%20height%3D%2210%22%20rx%3D%225%22%20fill%3D%22%23d4b888%22%20stroke%3D%22%237a5a30%22%20stroke-width%3D%221.4%22%2F%3E%20%3Ccircle%20cx%3D%2222%22%20cy%3D%2293%22%20r%3D%225.5%22%20fill%3D%22%23b89050%22%20stroke%3D%22%236a4820%22%20stroke-width%3D%221.3%22%2F%3E%20%3Ccircle%20cx%3D%2278%22%20cy%3D%2293%22%20r%3D%225.5%22%20fill%3D%22%23b89050%22%20stroke%3D%22%236a4820%22%20stroke-width%3D%221.3%22%2F%3E%20%3Ccircle%20cx%3D%2222%22%20cy%3D%2293%22%20r%3D%222%22%20fill%3D%22%23f0e0c0%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%2293%22%20r%3D%222%22%20fill%3D%22%23f0e0c0%22%2F%3E%20%3C%21--%20side%20rods%20--%3E%20%3Crect%20x%3D%223%22%20y%3D%2228%22%20width%3D%227%22%20height%3D%2244%22%20rx%3D%223.5%22%20fill%3D%22%23c4a574%22%20stroke%3D%22%237a5a30%22%20stroke-width%3D%221.2%22%2F%3E%20%3Crect%20x%3D%2290%22%20y%3D%2228%22%20width%3D%227%22%20height%3D%2244%22%20rx%3D%223.5%22%20fill%3D%22%23c4a574%22%20stroke%3D%22%237a5a30%22%20stroke-width%3D%221.2%22%2F%3E%20%3Cpath%20d%3D%22M28%2018h8M40%2018h8M52%2018h8M64%2018h8%22%20stroke%3D%22%238a6a40%22%20stroke-width%3D%221.2%22%20opacity%3D%22.5%22%2F%3E%20%3Cpath%20d%3D%22M28%2082h8M40%2082h8M52%2082h8M64%2082h8%22%20stroke%3D%22%238a6a40%22%20stroke-width%3D%221.2%22%20opacity%3D%22.5%22%2F%3E%20%3C%2Fsvg%3E");
}

/* frame-quill */
#account-avatar-btn.frame-quill.has-frame .avatar,
#account-avatar-btn.frame-quill.has-frame #account-home-avatar {
  box-shadow: 0 0 0 4px #9bb7d4, 0 0 0 8px rgba(155,183,212,0.45);
}
.gacha-reward-frame.frame-quill.has-frame > .avatar {
  box-shadow: 0 0 0 4px #9bb7d4, 0 0 0 8px rgba(155,183,212,0.45);
}
.avatar-crop-deco.frame-quill.has-frame {
  box-shadow: 0 0 0 4px #9bb7d4, 0 0 0 8px rgba(155,183,212,0.45);
}
.crop-frame-icon-av.has-frame.frame-quill > .avatar {
  box-shadow: 0 0 0 2px #9bb7d4, 0 0 0 4px rgba(155,183,212,0.45);
}
.avatar-cosmetic-wrap.has-frame.frame-quill::before,
#account-avatar-btn.frame-quill.has-frame::before,
.avatar-crop-deco.frame-quill.has-frame::before,
.crop-frame-icon-av.frame-quill.has-frame::before,
.gacha-reward-frame.frame-quill.has-frame::before,
.unlock-carousel-frame-av.frame-quill.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-quill::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22none%22%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2241%22%20stroke%3D%22%239bb7d4%22%20stroke-width%3D%226.5%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2236%22%20stroke%3D%22%235a7fa0%22%20stroke-width%3D%221.5%22%20opacity%3D%22.55%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2244.5%22%20stroke%3D%22%23c8dcee%22%20stroke-width%3D%221.3%22%20opacity%3D%22.5%22%2F%3E%20%3C%21--%20quill%20feather%20top-right%20outside%20--%3E%20%3Cpath%20d%3D%22M78%204c12%204%2018%2014%2019%2024-9-2-16-6-20-14-2-4-1-8%201-10z%22%20fill%3D%22%23c8dcee%22%20stroke%3D%22%234a6a88%22%20stroke-width%3D%221.4%22%2F%3E%20%3Cpath%20d%3D%22M80%208c6%206%2011%2013%2013%2020%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.2%22%20opacity%3D%22.7%22%2F%3E%20%3Cpath%20d%3D%22M92%2022l8%2012%22%20stroke%3D%22%234a6a88%22%20stroke-width%3D%222.6%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M98%2032l3%206%22%20stroke%3D%22%234a6a88%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%2F%3E%20%3C%21--%20ink%20bottle%20bottom-left%20--%3E%20%3Crect%20x%3D%224%22%20y%3D%2278%22%20width%3D%2214%22%20height%3D%2214%22%20rx%3D%222%22%20fill%3D%22%233a5070%22%20stroke%3D%22%239bb7d4%22%20stroke-width%3D%221.3%22%2F%3E%20%3Crect%20x%3D%227%22%20y%3D%2274%22%20width%3D%228%22%20height%3D%225%22%20rx%3D%221%22%20fill%3D%22%235a7fa0%22%2F%3E%20%3Ccircle%20cx%3D%2211%22%20cy%3D%2285%22%20r%3D%223%22%20fill%3D%22%238fb0d0%22%20opacity%3D%22.8%22%2F%3E%20%3Ccircle%20cx%3D%2222%22%20cy%3D%2294%22%20r%3D%222.2%22%20fill%3D%22%238fb0d0%22%2F%3E%3Ccircle%20cx%3D%2228%22%20cy%3D%2290%22%20r%3D%221.6%22%20fill%3D%22%238fb0d0%22%2F%3E%20%3C%21--%20corner%20nib%20accents%20--%3E%20%3Cpath%20d%3D%22M10%2018l4-8%202%206z%22%20fill%3D%22%239bb7d4%22%20stroke%3D%22%235a7fa0%22%20stroke-width%3D%22.8%22%2F%3E%20%3Cpath%20d%3D%22M90%2082l4%208-6-2z%22%20fill%3D%22%239bb7d4%22%20stroke%3D%22%235a7fa0%22%20stroke-width%3D%22.8%22%2F%3E%20%3C%2Fsvg%3E");
}

/* frame-crest */
#account-avatar-btn.frame-crest.has-frame .avatar,
#account-avatar-btn.frame-crest.has-frame #account-home-avatar {
  box-shadow: 0 0 0 4px #d4a054, 0 0 0 7px rgba(212,160,84,0.4), inset 0 0 0 2px rgba(255,255,255,0.2);
}
.gacha-reward-frame.frame-crest.has-frame > .avatar {
  box-shadow: 0 0 0 4px #d4a054, 0 0 0 7px rgba(212,160,84,0.4), inset 0 0 0 2px rgba(255,255,255,0.2);
}
.avatar-crop-deco.frame-crest.has-frame {
  box-shadow: 0 0 0 4px #d4a054, 0 0 0 7px rgba(212,160,84,0.4), inset 0 0 0 2px rgba(255,255,255,0.2);
}
.crop-frame-icon-av.has-frame.frame-crest > .avatar {
  box-shadow: 0 0 0 2px #d4a054, 0 0 0 3px rgba(212,160,84,0.4), inset 0 0 0 2px rgba(255,255,255,0.2);
}
.avatar-cosmetic-wrap.has-frame.frame-crest::before,
#account-avatar-btn.frame-crest.has-frame::before,
.avatar-crop-deco.frame-crest.has-frame::before,
.crop-frame-icon-av.frame-crest.has-frame::before,
.gacha-reward-frame.frame-crest.has-frame::before,
.unlock-carousel-frame-av.frame-crest.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-crest::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22none%22%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2240%22%20stroke%3D%22%23d4a054%22%20stroke-width%3D%227%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2235.5%22%20stroke%3D%22%23f0d090%22%20stroke-width%3D%221.8%22%20stroke-dasharray%3D%223%202.5%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2244%22%20stroke%3D%22%238a6020%22%20stroke-width%3D%221.6%22%2F%3E%20%3C%21--%20crown%20top%20hang%20--%3E%20%3Cpath%20d%3D%22M28%2014h44l-4-8-8%205-10-9-10%209-8-5z%22%20fill%3D%22%23f0d090%22%20stroke%3D%22%238a6020%22%20stroke-width%3D%221.3%22%2F%3E%20%3Ccircle%20cx%3D%2238%22%20cy%3D%228%22%20r%3D%222.2%22%20fill%3D%22%23fff3c0%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%224%22%20r%3D%222.6%22%20fill%3D%22%23fff3c0%22%2F%3E%3Ccircle%20cx%3D%2262%22%20cy%3D%228%22%20r%3D%222.2%22%20fill%3D%22%23fff3c0%22%2F%3E%20%3C%21--%20side%20fleur%20finials%20--%3E%20%3Cpath%20d%3D%22M6%2042c4-6%208-4%208%202s-4%208-8%202c-2-3%200-4%200-4z%22%20fill%3D%22%23d4a054%22%20stroke%3D%22%238a6020%22%20stroke-width%3D%221%22%2F%3E%20%3Cpath%20d%3D%22M94%2042c-4-6-8-4-8%202s4%208%208%202c2-3%200-4%200-4z%22%20fill%3D%22%23d4a054%22%20stroke%3D%22%238a6020%22%20stroke-width%3D%221%22%2F%3E%20%3C%21--%20ribbon%20feet%20--%3E%20%3Cpath%20d%3D%22M28%2090c8-6%2016-4%2022%200%206-4%2014-6%2022%200l-4%206c-6-3-12-2-18%201-6-3-12-4-18-1z%22%20fill%3D%22%23c04040%22%20stroke%3D%22%238a2020%22%20stroke-width%3D%221.1%22%2F%3E%20%3Ccircle%20cx%3D%2218%22%20cy%3D%2222%22%20r%3D%223%22%20fill%3D%22%23f0d090%22%20stroke%3D%22%238a6020%22%2F%3E%3Ccircle%20cx%3D%2282%22%20cy%3D%2222%22%20r%3D%223%22%20fill%3D%22%23f0d090%22%20stroke%3D%22%238a6020%22%2F%3E%20%3Ccircle%20cx%3D%2218%22%20cy%3D%2278%22%20r%3D%223%22%20fill%3D%22%23f0d090%22%20stroke%3D%22%238a6020%22%2F%3E%3Ccircle%20cx%3D%2282%22%20cy%3D%2278%22%20r%3D%223%22%20fill%3D%22%23f0d090%22%20stroke%3D%22%238a6020%22%2F%3E%20%3C%2Fsvg%3E");
}

/* frame-scripture */
#account-avatar-btn.frame-scripture.has-frame .avatar,
#account-avatar-btn.frame-scripture.has-frame #account-home-avatar {
  box-shadow: 0 0 0 4px #b7c4a2, 0 0 0 8px rgba(183,196,162,0.4);
}
.gacha-reward-frame.frame-scripture.has-frame > .avatar {
  box-shadow: 0 0 0 4px #b7c4a2, 0 0 0 8px rgba(183,196,162,0.4);
}
.avatar-crop-deco.frame-scripture.has-frame {
  box-shadow: 0 0 0 4px #b7c4a2, 0 0 0 8px rgba(183,196,162,0.4);
}
.crop-frame-icon-av.has-frame.frame-scripture > .avatar {
  box-shadow: 0 0 0 2px #b7c4a2, 0 0 0 4px rgba(183,196,162,0.4);
}
.avatar-cosmetic-wrap.has-frame.frame-scripture::before,
#account-avatar-btn.frame-scripture.has-frame::before,
.avatar-crop-deco.frame-scripture.has-frame::before,
.crop-frame-icon-av.frame-scripture.has-frame::before,
.gacha-reward-frame.frame-scripture.has-frame::before,
.unlock-carousel-frame-av.frame-scripture.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-scripture::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22none%22%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2239%22%20stroke%3D%22%23b7c4a2%22%20stroke-width%3D%225.5%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2235%22%20stroke%3D%22%236a7858%22%20stroke-width%3D%221.3%22%20opacity%3D%22.55%22%2F%3E%20%3C%21--%20left%20cover%20rail%20--%3E%20%3Crect%20x%3D%222%22%20y%3D%2218%22%20width%3D%2212%22%20height%3D%2264%22%20rx%3D%222%22%20fill%3D%22%236a7858%22%20stroke%3D%22%23d4e0c0%22%20stroke-width%3D%221.3%22%2F%3E%20%3Cpath%20d%3D%22M5%2028h6M5%2040h6M5%2052h6M5%2064h6%22%20stroke%3D%22%23d4e0c0%22%20stroke-width%3D%221.1%22%20opacity%3D%22.7%22%2F%3E%20%3Ccircle%20cx%3D%228%22%20cy%3D%2222%22%20r%3D%222%22%20fill%3D%22%23e8f0d8%22%2F%3E%20%3C%21--%20right%20cover%20rail%20--%3E%20%3Crect%20x%3D%2286%22%20y%3D%2218%22%20width%3D%2212%22%20height%3D%2264%22%20rx%3D%222%22%20fill%3D%22%236a7858%22%20stroke%3D%22%23d4e0c0%22%20stroke-width%3D%221.3%22%2F%3E%20%3Cpath%20d%3D%22M89%2028h6M89%2040h6M89%2052h6M89%2064h6%22%20stroke%3D%22%23d4e0c0%22%20stroke-width%3D%221.1%22%20opacity%3D%22.7%22%2F%3E%20%3Ccircle%20cx%3D%2292%22%20cy%3D%2222%22%20r%3D%222%22%20fill%3D%22%23e8f0d8%22%2F%3E%20%3C%21--%20top%20spine%2Fedge%20--%3E%20%3Cpath%20d%3D%22M18%206h64c2%200%204%202%204%205v4H14v-4c0-3%202-5%204-5z%22%20fill%3D%22%238a9a70%22%20stroke%3D%22%23d4e0c0%22%20stroke-width%3D%221.2%22%2F%3E%20%3Cpath%20d%3D%22M30%209h8M42%209h8M54%209h8%22%20stroke%3D%22%23d4e0c0%22%20stroke-width%3D%221%22%20opacity%3D%22.6%22%2F%3E%20%3C%21--%20bottom%20edge%20--%3E%20%3Cpath%20d%3D%22M18%2085h64c2%200%204%202%204%205v4H14v-4c0-3%202-5%204-5z%22%20fill%3D%22%238a9a70%22%20stroke%3D%22%23d4e0c0%22%20stroke-width%3D%221.2%22%2F%3E%20%3C%21--%20small%20cross%20ornaments%20outside%20top%20--%3E%20%3Cpath%20d%3D%22M50%201v6M47%204h6%22%20stroke%3D%22%23d4e0c0%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%2F%3E%20%3C%2Fsvg%3E");
}

/* frame-medal */
#account-avatar-btn.frame-medal.has-frame .avatar,
#account-avatar-btn.frame-medal.has-frame #account-home-avatar {
  box-shadow: 0 0 0 4px #e0c35a, 0 0 0 8px rgba(224,195,90,0.45);
}
.gacha-reward-frame.frame-medal.has-frame > .avatar {
  box-shadow: 0 0 0 4px #e0c35a, 0 0 0 8px rgba(224,195,90,0.45);
}
.avatar-crop-deco.frame-medal.has-frame {
  box-shadow: 0 0 0 4px #e0c35a, 0 0 0 8px rgba(224,195,90,0.45);
}
.crop-frame-icon-av.has-frame.frame-medal > .avatar {
  box-shadow: 0 0 0 2px #e0c35a, 0 0 0 4px rgba(224,195,90,0.45);
}
.avatar-cosmetic-wrap.has-frame.frame-medal::before,
#account-avatar-btn.frame-medal.has-frame::before,
.avatar-crop-deco.frame-medal.has-frame::before,
.crop-frame-icon-av.frame-medal.has-frame::before,
.gacha-reward-frame.frame-medal.has-frame::before,
.unlock-carousel-frame-av.frame-medal.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-medal::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22none%22%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2240%22%20stroke%3D%22%23e0c35a%22%20stroke-width%3D%227.5%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2235%22%20stroke%3D%22%23a08020%22%20stroke-width%3D%222%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2244%22%20stroke%3D%22%23fff0a0%22%20stroke-width%3D%221.4%22%20opacity%3D%22.6%22%2F%3E%20%3C%21--%20ribbon%20loops%20top%20--%3E%20%3Cpath%20d%3D%22M38%202c-4%2010-2%2016%200%2020l12-4%2012%204c2-4%204-10%200-20-6%204-12%204-24%200z%22%20fill%3D%22%23c02828%22%20stroke%3D%22%23801010%22%20stroke-width%3D%221.2%22%2F%3E%20%3Cpath%20d%3D%22M42%206c4%203%2012%203%2016%200%22%20stroke%3D%22%23f08080%22%20stroke-width%3D%221.4%22%20opacity%3D%22.7%22%2F%3E%20%3C%21--%20pendant%20below%20--%3E%20%3Cpath%20d%3D%22M50%2088l8%2010-8-3-8%203z%22%20fill%3D%22%23e0c35a%22%20stroke%3D%22%23a08020%22%20stroke-width%3D%221.3%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2286%22%20r%3D%225%22%20fill%3D%22%23f0d870%22%20stroke%3D%22%23a08020%22%20stroke-width%3D%221.2%22%2F%3E%20%3Cpath%20d%3D%22M50%2083l1.5%203h3l-2.5%202%201%203.2L50%2089.5l-3%201.7%201-3.2-2.5-2h3z%22%20fill%3D%22%23fff8d0%22%2F%3E%20%3C%21--%20side%20jewels%20--%3E%20%3Ccircle%20cx%3D%228%22%20cy%3D%2250%22%20r%3D%224.5%22%20fill%3D%22%23f0d870%22%20stroke%3D%22%23a08020%22%2F%3E%3Ccircle%20cx%3D%2292%22%20cy%3D%2250%22%20r%3D%224.5%22%20fill%3D%22%23f0d870%22%20stroke%3D%22%23a08020%22%2F%3E%20%3Ccircle%20cx%3D%2216%22%20cy%3D%2220%22%20r%3D%223%22%20fill%3D%22%23e0c35a%22%20stroke%3D%22%23a08020%22%2F%3E%3Ccircle%20cx%3D%2284%22%20cy%3D%2220%22%20r%3D%223%22%20fill%3D%22%23e0c35a%22%20stroke%3D%22%23a08020%22%2F%3E%20%3Ccircle%20cx%3D%2216%22%20cy%3D%2280%22%20r%3D%223%22%20fill%3D%22%23e0c35a%22%20stroke%3D%22%23a08020%22%2F%3E%3Ccircle%20cx%3D%2284%22%20cy%3D%2280%22%20r%3D%223%22%20fill%3D%22%23e0c35a%22%20stroke%3D%22%23a08020%22%2F%3E%20%3C%2Fsvg%3E");
}

/* frame-laurel */
#account-avatar-btn.frame-laurel.has-frame .avatar,
#account-avatar-btn.frame-laurel.has-frame #account-home-avatar {
  box-shadow: 0 0 0 4px #9fc27a, 0 0 0 8px rgba(159,194,122,0.45);
}
.gacha-reward-frame.frame-laurel.has-frame > .avatar {
  box-shadow: 0 0 0 4px #9fc27a, 0 0 0 8px rgba(159,194,122,0.45);
}
.avatar-crop-deco.frame-laurel.has-frame {
  box-shadow: 0 0 0 4px #9fc27a, 0 0 0 8px rgba(159,194,122,0.45);
}
.crop-frame-icon-av.has-frame.frame-laurel > .avatar {
  box-shadow: 0 0 0 2px #9fc27a, 0 0 0 4px rgba(159,194,122,0.45);
}
.avatar-cosmetic-wrap.has-frame.frame-laurel::before,
#account-avatar-btn.frame-laurel.has-frame::before,
.avatar-crop-deco.frame-laurel.has-frame::before,
.crop-frame-icon-av.frame-laurel.has-frame::before,
.gacha-reward-frame.frame-laurel.has-frame::before,
.unlock-carousel-frame-av.frame-laurel.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-laurel::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22none%22%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2238%22%20stroke%3D%22%239fc27a%22%20stroke-width%3D%223%22%20opacity%3D%22.5%22%2F%3E%20%3C%21--%20left%20branch%20--%3E%20%3Cpath%20d%3D%22M48%2088c-18-4-34-20-38-40%208%206%2014%2016%2018%2028%204-10%206-22%204-34%2010%208%2016%2020%2016%2034%200-12%202-24%208-34%22%20stroke%3D%22%235a8a3a%22%20stroke-width%3D%222.2%22%20fill%3D%22none%22%2F%3E%20%3Cellipse%20cx%3D%2214%22%20cy%3D%2242%22%20rx%3D%225%22%20ry%3D%222.8%22%20transform%3D%22rotate%28-55%2014%2042%29%22%20fill%3D%22%237aaa50%22%2F%3E%20%3Cellipse%20cx%3D%2216%22%20cy%3D%2254%22%20rx%3D%225%22%20ry%3D%222.8%22%20transform%3D%22rotate%28-40%2016%2054%29%22%20fill%3D%22%238aba60%22%2F%3E%20%3Cellipse%20cx%3D%2220%22%20cy%3D%2266%22%20rx%3D%225%22%20ry%3D%222.8%22%20transform%3D%22rotate%28-25%2020%2066%29%22%20fill%3D%22%237aaa50%22%2F%3E%20%3Cellipse%20cx%3D%2226%22%20cy%3D%2276%22%20rx%3D%224.5%22%20ry%3D%222.5%22%20transform%3D%22rotate%28-10%2026%2076%29%22%20fill%3D%22%238aba60%22%2F%3E%20%3Cellipse%20cx%3D%2218%22%20cy%3D%2230%22%20rx%3D%224.5%22%20ry%3D%222.5%22%20transform%3D%22rotate%28-70%2018%2030%29%22%20fill%3D%22%239fc27a%22%2F%3E%20%3Cellipse%20cx%3D%2228%22%20cy%3D%2220%22%20rx%3D%224%22%20ry%3D%222.2%22%20transform%3D%22rotate%28-85%2028%2020%29%22%20fill%3D%22%237aaa50%22%2F%3E%20%3C%21--%20right%20branch%20--%3E%20%3Cpath%20d%3D%22M52%2088c18-4%2034-20%2038-40-8%206-14%2016-18%2028-4-10-6-22-4-34-10%208-16%2020-16%2034%200-12-2-24-8-34%22%20stroke%3D%22%235a8a3a%22%20stroke-width%3D%222.2%22%20fill%3D%22none%22%2F%3E%20%3Cellipse%20cx%3D%2286%22%20cy%3D%2242%22%20rx%3D%225%22%20ry%3D%222.8%22%20transform%3D%22rotate%2855%2086%2042%29%22%20fill%3D%22%237aaa50%22%2F%3E%20%3Cellipse%20cx%3D%2284%22%20cy%3D%2254%22%20rx%3D%225%22%20ry%3D%222.8%22%20transform%3D%22rotate%2840%2084%2054%29%22%20fill%3D%22%238aba60%22%2F%3E%20%3Cellipse%20cx%3D%2280%22%20cy%3D%2266%22%20rx%3D%225%22%20ry%3D%222.8%22%20transform%3D%22rotate%2825%2080%2066%29%22%20fill%3D%22%237aaa50%22%2F%3E%20%3Cellipse%20cx%3D%2274%22%20cy%3D%2276%22%20rx%3D%224.5%22%20ry%3D%222.5%22%20transform%3D%22rotate%2810%2074%2076%29%22%20fill%3D%22%238aba60%22%2F%3E%20%3Cellipse%20cx%3D%2282%22%20cy%3D%2230%22%20rx%3D%224.5%22%20ry%3D%222.5%22%20transform%3D%22rotate%2870%2082%2030%29%22%20fill%3D%22%239fc27a%22%2F%3E%20%3Cellipse%20cx%3D%2272%22%20cy%3D%2220%22%20rx%3D%224%22%20ry%3D%222.2%22%20transform%3D%22rotate%2885%2072%2020%29%22%20fill%3D%22%237aaa50%22%2F%3E%20%3C%21--%20gold%20base%20clasp%20--%3E%20%3Cpath%20d%3D%22M40%2090h20l-4%206h-12z%22%20fill%3D%22%23d4a054%22%20stroke%3D%22%238a6020%22%20stroke-width%3D%221%22%2F%3E%20%3C%2Fsvg%3E");
}

/* frame-halo */
#account-avatar-btn.frame-halo.has-frame .avatar,
#account-avatar-btn.frame-halo.has-frame #account-home-avatar {
  box-shadow: 0 0 0 4px #f0e2a0, 0 0 16px rgba(240,226,160,0.65), 0 0 0 9px rgba(240,226,160,0.25);
}
.gacha-reward-frame.frame-halo.has-frame > .avatar {
  box-shadow: 0 0 0 4px #f0e2a0, 0 0 16px rgba(240,226,160,0.65), 0 0 0 9px rgba(240,226,160,0.25);
}
.avatar-crop-deco.frame-halo.has-frame {
  box-shadow: 0 0 0 4px #f0e2a0, 0 0 16px rgba(240,226,160,0.65), 0 0 0 9px rgba(240,226,160,0.25);
}
.crop-frame-icon-av.has-frame.frame-halo > .avatar {
  box-shadow: 0 0 0 2px #f0e2a0, 0 0 16px rgba(240,226,160,0.65), 0 0 0 4px rgba(240,226,160,0.25);
}
.avatar-cosmetic-wrap.has-frame.frame-halo::before,
#account-avatar-btn.frame-halo.has-frame::before,
.avatar-crop-deco.frame-halo.has-frame::before,
.crop-frame-icon-av.frame-halo.has-frame::before,
.gacha-reward-frame.frame-halo.has-frame::before,
.unlock-carousel-frame-av.frame-halo.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-halo::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22none%22%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2252%22%20r%3D%2240%22%20stroke%3D%22%23f0e2a0%22%20stroke-width%3D%226%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2252%22%20r%3D%2235.5%22%20stroke%3D%22%23fff8d0%22%20stroke-width%3D%221.5%22%20opacity%3D%22.55%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2252%22%20r%3D%2244%22%20stroke%3D%22%23d4c070%22%20stroke-width%3D%221.4%22%20opacity%3D%22.7%22%2F%3E%20%3C%21--%20halo%20ellipse%20top%20hang%20--%3E%20%3Cellipse%20cx%3D%2250%22%20cy%3D%2210%22%20rx%3D%2228%22%20ry%3D%228%22%20stroke%3D%22%23fff8d0%22%20stroke-width%3D%223.5%22%20fill%3D%22none%22%20opacity%3D%22.95%22%2F%3E%20%3Cellipse%20cx%3D%2250%22%20cy%3D%2210%22%20rx%3D%2228%22%20ry%3D%228%22%20stroke%3D%22%23f0e2a0%22%20stroke-width%3D%221.5%22%20fill%3D%22none%22%2F%3E%20%3C%21--%20sparkles%20outside%20--%3E%20%3Cpath%20d%3D%22M12%2028l2%204%204%201-4%202-1%204-2-4-4-1%204-2z%22%20fill%3D%22%23fff8d0%22%2F%3E%20%3Cpath%20d%3D%22M88%2028l2%204%204%201-4%202-1%204-2-4-4-1%204-2z%22%20fill%3D%22%23fff8d0%22%2F%3E%20%3Cpath%20d%3D%22M50%202l1.5%203%203%20.8-3%201.5-.8%203-1.5-3-3-.8%203-1.5z%22%20fill%3D%22%23fff%22%2F%3E%20%3Ccircle%20cx%3D%228%22%20cy%3D%2255%22%20r%3D%222.5%22%20fill%3D%22%23f0e2a0%22%2F%3E%3Ccircle%20cx%3D%2292%22%20cy%3D%2255%22%20r%3D%222.5%22%20fill%3D%22%23f0e2a0%22%2F%3E%20%3Ccircle%20cx%3D%2218%22%20cy%3D%2288%22%20r%3D%222%22%20fill%3D%22%23fff8d0%22%2F%3E%3Ccircle%20cx%3D%2282%22%20cy%3D%2288%22%20r%3D%222%22%20fill%3D%22%23fff8d0%22%2F%3E%20%3Ccircle%20cx%3D%2222%22%20cy%3D%2214%22%20r%3D%221.8%22%20fill%3D%22%23fff%22%2F%3E%3Ccircle%20cx%3D%2278%22%20cy%3D%2214%22%20r%3D%221.8%22%20fill%3D%22%23fff%22%2F%3E%20%3C%2Fsvg%3E");
}

/* frame-ribbon */
#account-avatar-btn.frame-ribbon.has-frame .avatar,
#account-avatar-btn.frame-ribbon.has-frame #account-home-avatar {
  box-shadow: 0 0 0 4px #d47a9a, 0 0 0 8px rgba(212,122,154,0.4);
  border-radius: 22% / 28%;
}
.gacha-reward-frame.frame-ribbon.has-frame > .avatar {
  box-shadow: 0 0 0 4px #d47a9a, 0 0 0 8px rgba(212,122,154,0.4);
  border-radius: 22% / 28%;
}
.avatar-crop-deco.frame-ribbon.has-frame {
  box-shadow: 0 0 0 4px #d47a9a, 0 0 0 8px rgba(212,122,154,0.4);
  border-radius: 22% / 28%;
}
.crop-frame-icon-av.has-frame.frame-ribbon > .avatar {
  box-shadow: 0 0 0 2px #d47a9a, 0 0 0 4px rgba(212,122,154,0.4);
  border-radius: 22% / 28%;
}
.avatar-cosmetic-wrap.has-frame.frame-ribbon::before,
#account-avatar-btn.frame-ribbon.has-frame::before,
.avatar-crop-deco.frame-ribbon.has-frame::before,
.crop-frame-icon-av.frame-ribbon.has-frame::before,
.gacha-reward-frame.frame-ribbon.has-frame::before,
.unlock-carousel-frame-av.frame-ribbon.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-ribbon::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22none%22%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2252%22%20r%3D%2239%22%20stroke%3D%22%23d47a9a%22%20stroke-width%3D%226%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2252%22%20r%3D%2235%22%20stroke%3D%22%23a04060%22%20stroke-width%3D%221.4%22%20opacity%3D%22.55%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2252%22%20r%3D%2243%22%20stroke%3D%22%23f0b0c8%22%20stroke-width%3D%221.3%22%20opacity%3D%22.5%22%2F%3E%20%3C%21--%20bow%20crest%20--%3E%20%3Cpath%20d%3D%22M50%2016c-8-10-22-8-24%202%206%202%2014%204%2024%204%2010%200%2018-2%2024-4-2-10-16-12-24-2z%22%20fill%3D%22%23e090b0%22%20stroke%3D%22%23a04060%22%20stroke-width%3D%221.3%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2214%22%20r%3D%225%22%20fill%3D%22%23f0b0c8%22%20stroke%3D%22%23a04060%22%20stroke-width%3D%221.2%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2214%22%20r%3D%222%22%20fill%3D%22%23fff0f5%22%2F%3E%20%3C%21--%20draped%20tails%20--%3E%20%3Cpath%20d%3D%22M26%2018c-10%2010-14%2028-12%2048l8-2c-2-16%202-30%2010-40z%22%20fill%3D%22%23d47a9a%22%20stroke%3D%22%23a04060%22%20stroke-width%3D%221.1%22%2F%3E%20%3Cpath%20d%3D%22M74%2018c10%2010%2014%2028%2012%2048l-8-2c2-16-2-30-10-40z%22%20fill%3D%22%23d47a9a%22%20stroke%3D%22%23a04060%22%20stroke-width%3D%221.1%22%2F%3E%20%3Cpath%20d%3D%22M30%2088c6-4%2014-4%2020%200%206-4%2014-4%2020%200%22%20stroke%3D%22%23f0b0c8%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.8%22%2F%3E%20%3Ccircle%20cx%3D%2210%22%20cy%3D%2250%22%20r%3D%223%22%20fill%3D%22%23f0b0c8%22%2F%3E%3Ccircle%20cx%3D%2290%22%20cy%3D%2250%22%20r%3D%223%22%20fill%3D%22%23f0b0c8%22%2F%3E%20%3C%2Fsvg%3E");
}

/* frame-olive */
#account-avatar-btn.frame-olive.has-frame .avatar,
#account-avatar-btn.frame-olive.has-frame #account-home-avatar {
  box-shadow: 0 0 0 4px #8a9a4a, 0 0 0 8px rgba(138,154,74,0.4);
}
.gacha-reward-frame.frame-olive.has-frame > .avatar {
  box-shadow: 0 0 0 4px #8a9a4a, 0 0 0 8px rgba(138,154,74,0.4);
}
.avatar-crop-deco.frame-olive.has-frame {
  box-shadow: 0 0 0 4px #8a9a4a, 0 0 0 8px rgba(138,154,74,0.4);
}
.crop-frame-icon-av.has-frame.frame-olive > .avatar {
  box-shadow: 0 0 0 2px #8a9a4a, 0 0 0 4px rgba(138,154,74,0.4);
}
.avatar-cosmetic-wrap.has-frame.frame-olive::before,
#account-avatar-btn.frame-olive.has-frame::before,
.avatar-crop-deco.frame-olive.has-frame::before,
.crop-frame-icon-av.frame-olive.has-frame::before,
.gacha-reward-frame.frame-olive.has-frame::before,
.unlock-carousel-frame-av.frame-olive.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-olive::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22none%22%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2240%22%20stroke%3D%22%238a9a4a%22%20stroke-width%3D%225.5%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2236%22%20stroke%3D%22%235a6a28%22%20stroke-width%3D%221.3%22%20opacity%3D%22.5%22%2F%3E%20%3C%21--%20left%20olive%20branch%20--%3E%20%3Cpath%20d%3D%22M12%2020c4%2012%206%2028%204%2048%22%20stroke%3D%22%236a7a30%22%20stroke-width%3D%222%22%2F%3E%20%3Cellipse%20cx%3D%2210%22%20cy%3D%2228%22%20rx%3D%224%22%20ry%3D%222.2%22%20transform%3D%22rotate%28-50%2010%2028%29%22%20fill%3D%22%239aaa5a%22%2F%3E%20%3Cellipse%20cx%3D%229%22%20cy%3D%2240%22%20rx%3D%224%22%20ry%3D%222.2%22%20transform%3D%22rotate%28-40%209%2040%29%22%20fill%3D%22%238a9a4a%22%2F%3E%20%3Cellipse%20cx%3D%2210%22%20cy%3D%2252%22%20rx%3D%224%22%20ry%3D%222.2%22%20transform%3D%22rotate%28-30%2010%2052%29%22%20fill%3D%22%239aaa5a%22%2F%3E%20%3Cellipse%20cx%3D%2212%22%20cy%3D%2264%22%20rx%3D%223.5%22%20ry%3D%222%22%20transform%3D%22rotate%28-20%2012%2064%29%22%20fill%3D%22%238a9a4a%22%2F%3E%20%3Cellipse%20cx%3D%2216%22%20cy%3D%2234%22%20rx%3D%222.2%22%20ry%3D%223%22%20fill%3D%22%236a3a70%22%2F%3E%3Cellipse%20cx%3D%2215%22%20cy%3D%2248%22%20rx%3D%222.2%22%20ry%3D%223%22%20fill%3D%22%236a3a70%22%2F%3E%20%3Cellipse%20cx%3D%2216%22%20cy%3D%2258%22%20rx%3D%222%22%20ry%3D%222.8%22%20fill%3D%22%235a2a60%22%2F%3E%20%3C%21--%20right%20--%3E%20%3Cpath%20d%3D%22M88%2020c-4%2012-6%2028-4%2048%22%20stroke%3D%22%236a7a30%22%20stroke-width%3D%222%22%2F%3E%20%3Cellipse%20cx%3D%2290%22%20cy%3D%2228%22%20rx%3D%224%22%20ry%3D%222.2%22%20transform%3D%22rotate%2850%2090%2028%29%22%20fill%3D%22%239aaa5a%22%2F%3E%20%3Cellipse%20cx%3D%2291%22%20cy%3D%2240%22%20rx%3D%224%22%20ry%3D%222.2%22%20transform%3D%22rotate%2840%2091%2040%29%22%20fill%3D%22%238a9a4a%22%2F%3E%20%3Cellipse%20cx%3D%2290%22%20cy%3D%2252%22%20rx%3D%224%22%20ry%3D%222.2%22%20transform%3D%22rotate%2830%2090%2052%29%22%20fill%3D%22%239aaa5a%22%2F%3E%20%3Cellipse%20cx%3D%2288%22%20cy%3D%2264%22%20rx%3D%223.5%22%20ry%3D%222%22%20transform%3D%22rotate%2820%2088%2064%29%22%20fill%3D%22%238a9a4a%22%2F%3E%20%3Cellipse%20cx%3D%2284%22%20cy%3D%2234%22%20rx%3D%222.2%22%20ry%3D%223%22%20fill%3D%22%236a3a70%22%2F%3E%3Cellipse%20cx%3D%2285%22%20cy%3D%2248%22%20rx%3D%222.2%22%20ry%3D%223%22%20fill%3D%22%236a3a70%22%2F%3E%20%3C%21--%20top%20twigs%20--%3E%20%3Cpath%20d%3D%22M30%208c6%204%2012%204%2020%200%208%204%2014%204%2020%200%22%20stroke%3D%22%238a9a4a%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%226%22%20r%3D%222.5%22%20fill%3D%22%236a3a70%22%2F%3E%20%3C%2Fsvg%3E");
}

/* frame-stone */
#account-avatar-btn.frame-stone.has-frame .avatar,
#account-avatar-btn.frame-stone.has-frame #account-home-avatar {
  box-shadow: 0 0 0 5px #8a8680, 0 0 0 9px rgba(100,96,90,0.45);
  border-radius: 12%;
}
.gacha-reward-frame.frame-stone.has-frame > .avatar {
  box-shadow: 0 0 0 5px #8a8680, 0 0 0 9px rgba(100,96,90,0.45);
  border-radius: 12%;
}
.avatar-crop-deco.frame-stone.has-frame {
  box-shadow: 0 0 0 5px #8a8680, 0 0 0 9px rgba(100,96,90,0.45);
  border-radius: 12%;
}
.crop-frame-icon-av.has-frame.frame-stone > .avatar {
  box-shadow: 0 0 0 2px #8a8680, 0 0 0 4px rgba(100,96,90,0.45);
  border-radius: 12%;
}
.avatar-cosmetic-wrap.has-frame.frame-stone::before,
#account-avatar-btn.frame-stone.has-frame::before,
.avatar-crop-deco.frame-stone.has-frame::before,
.crop-frame-icon-av.frame-stone.has-frame::before,
.gacha-reward-frame.frame-stone.has-frame::before,
.unlock-carousel-frame-av.frame-stone.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-stone::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22none%22%3E%20%3Cpath%20d%3D%22M18%2012h64l10%2014v52l-10%2014H18L8%2078V26z%22%20stroke%3D%22%238a8680%22%20stroke-width%3D%226%22%20fill%3D%22none%22%2F%3E%20%3Cpath%20d%3D%22M22%2016h56l8%2012v48l-8%2012H22l-8-12V28z%22%20stroke%3D%22%235a5850%22%20stroke-width%3D%221.8%22%20fill%3D%22none%22%2F%3E%20%3C%21--%20chips%20%2F%20cracks%20outside%20--%3E%20%3Cpath%20d%3D%22M8%2030l-5%204%203%206%22%20stroke%3D%22%23a8a49c%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M92%2030l5%204-3%206%22%20stroke%3D%22%23a8a49c%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M14%2088l-4%206%208%202%22%20stroke%3D%22%23a8a49c%22%20stroke-width%3D%222%22%2F%3E%20%3Cpath%20d%3D%22M86%2088l4%206-8%202%22%20stroke%3D%22%23a8a49c%22%20stroke-width%3D%222%22%2F%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2250%22%20r%3D%223%22%20fill%3D%22%236a6860%22%2F%3E%3Ccircle%20cx%3D%2288%22%20cy%3D%2250%22%20r%3D%223%22%20fill%3D%22%236a6860%22%2F%3E%20%3Cpath%20d%3D%22M30%2010l4-6%206%204%22%20stroke%3D%22%23a8a49c%22%20stroke-width%3D%221.8%22%2F%3E%3Cpath%20d%3D%22M70%2010l-4-6-6%204%22%20stroke%3D%22%23a8a49c%22%20stroke-width%3D%221.8%22%2F%3E%20%3Cpath%20d%3D%22M40%2090h20%22%20stroke%3D%22%235a5850%22%20stroke-width%3D%222%22%20opacity%3D%22.5%22%2F%3E%20%3C%2Fsvg%3E");
}

/* frame-bronze */
#account-avatar-btn.frame-bronze.has-frame .avatar,
#account-avatar-btn.frame-bronze.has-frame #account-home-avatar {
  box-shadow: 0 0 0 4px #cd7f32, 0 0 0 8px rgba(205,127,50,0.45);
}
.gacha-reward-frame.frame-bronze.has-frame > .avatar {
  box-shadow: 0 0 0 4px #cd7f32, 0 0 0 8px rgba(205,127,50,0.45);
}
.avatar-crop-deco.frame-bronze.has-frame {
  box-shadow: 0 0 0 4px #cd7f32, 0 0 0 8px rgba(205,127,50,0.45);
}
.crop-frame-icon-av.has-frame.frame-bronze > .avatar {
  box-shadow: 0 0 0 2px #cd7f32, 0 0 0 4px rgba(205,127,50,0.45);
}
.avatar-cosmetic-wrap.has-frame.frame-bronze::before,
#account-avatar-btn.frame-bronze.has-frame::before,
.avatar-crop-deco.frame-bronze.has-frame::before,
.crop-frame-icon-av.frame-bronze.has-frame::before,
.gacha-reward-frame.frame-bronze.has-frame::before,
.unlock-carousel-frame-av.frame-bronze.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-bronze::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22none%22%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2241%22%20stroke%3D%22%23cd7f32%22%20stroke-width%3D%228%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2235.5%22%20stroke%3D%22%238a5020%22%20stroke-width%3D%222.2%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2245%22%20stroke%3D%22%23e8a860%22%20stroke-width%3D%221.6%22%20opacity%3D%22.7%22%2F%3E%20%3C%21--%20etched%20rim%20band%20--%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2241%22%20stroke%3D%22%238a5020%22%20stroke-width%3D%221.2%22%20stroke-dasharray%3D%222%203%22%20opacity%3D%22.8%22%2F%3E%20%3C%21--%20compass%20finials%20--%3E%20%3Cpath%20d%3D%22M50%202l4%208h-8z%22%20fill%3D%22%23e8a860%22%20stroke%3D%22%238a5020%22%20stroke-width%3D%221%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2212%22%20r%3D%224%22%20fill%3D%22%23d4956a%22%20stroke%3D%22%238a5020%22%2F%3E%20%3Cpath%20d%3D%22M50%2098l4-8h-8z%22%20fill%3D%22%23e8a860%22%20stroke%3D%22%238a5020%22%20stroke-width%3D%221%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2288%22%20r%3D%224%22%20fill%3D%22%23d4956a%22%20stroke%3D%22%238a5020%22%2F%3E%20%3Cpath%20d%3D%22M2%2050l8%204v-8z%22%20fill%3D%22%23e8a860%22%20stroke%3D%22%238a5020%22%20stroke-width%3D%221%22%2F%3E%3Ccircle%20cx%3D%2212%22%20cy%3D%2250%22%20r%3D%224%22%20fill%3D%22%23d4956a%22%20stroke%3D%22%238a5020%22%2F%3E%20%3Cpath%20d%3D%22M98%2050l-8%204v-8z%22%20fill%3D%22%23e8a860%22%20stroke%3D%22%238a5020%22%20stroke-width%3D%221%22%2F%3E%3Ccircle%20cx%3D%2288%22%20cy%3D%2250%22%20r%3D%224%22%20fill%3D%22%23d4956a%22%20stroke%3D%22%238a5020%22%2F%3E%20%3C%21--%20corner%20jewels%20--%3E%20%3Ccircle%20cx%3D%2218%22%20cy%3D%2218%22%20r%3D%223.5%22%20fill%3D%22%23e8a860%22%20stroke%3D%22%238a5020%22%2F%3E%3Ccircle%20cx%3D%2282%22%20cy%3D%2218%22%20r%3D%223.5%22%20fill%3D%22%23e8a860%22%20stroke%3D%22%238a5020%22%2F%3E%20%3Ccircle%20cx%3D%2218%22%20cy%3D%2282%22%20r%3D%223.5%22%20fill%3D%22%23e8a860%22%20stroke%3D%22%238a5020%22%2F%3E%3Ccircle%20cx%3D%2282%22%20cy%3D%2282%22%20r%3D%223.5%22%20fill%3D%22%23e8a860%22%20stroke%3D%22%238a5020%22%2F%3E%20%3C%2Fsvg%3E");
}

/* frame-silver */
#account-avatar-btn.frame-silver.has-frame .avatar,
#account-avatar-btn.frame-silver.has-frame #account-home-avatar {
  box-shadow: 0 0 0 4px #c0c8d0, 0 0 0 8px rgba(180,190,200,0.5), 0 0 12px rgba(220,230,240,0.4);
}
.gacha-reward-frame.frame-silver.has-frame > .avatar {
  box-shadow: 0 0 0 4px #c0c8d0, 0 0 0 8px rgba(180,190,200,0.5), 0 0 12px rgba(220,230,240,0.4);
}
.avatar-crop-deco.frame-silver.has-frame {
  box-shadow: 0 0 0 4px #c0c8d0, 0 0 0 8px rgba(180,190,200,0.5), 0 0 12px rgba(220,230,240,0.4);
}
.crop-frame-icon-av.has-frame.frame-silver > .avatar {
  box-shadow: 0 0 0 2px #c0c8d0, 0 0 0 4px rgba(180,190,200,0.5), 0 0 12px rgba(220,230,240,0.4);
}
.avatar-cosmetic-wrap.has-frame.frame-silver::before,
#account-avatar-btn.frame-silver.has-frame::before,
.avatar-crop-deco.frame-silver.has-frame::before,
.crop-frame-icon-av.frame-silver.has-frame::before,
.gacha-reward-frame.frame-silver.has-frame::before,
.unlock-carousel-frame-av.frame-silver.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-silver::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22none%22%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2241%22%20stroke%3D%22%23c0c8d0%22%20stroke-width%3D%228%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2235.5%22%20stroke%3D%22%23788090%22%20stroke-width%3D%222%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2245%22%20stroke%3D%22%23e8f0f8%22%20stroke-width%3D%221.5%22%20opacity%3D%22.75%22%2F%3E%20%3C%21--%20wave%20etchings%20on%20outer%20band%20--%3E%20%3Cpath%20d%3D%22M18%2028c6%204%2010%204%2016%200s10-4%2016%200%2010%204%2016%200%2010-4%2016%200%22%20stroke%3D%22%23a0a8b0%22%20stroke-width%3D%221.4%22%20opacity%3D%22.7%22%2F%3E%20%3Cpath%20d%3D%22M18%2072c6-4%2010-4%2016%200s10%204%2016%200%2010-4%2016%200%2010%204%2016%200%22%20stroke%3D%22%23a0a8b0%22%20stroke-width%3D%221.4%22%20opacity%3D%22.7%22%2F%3E%20%3C%21--%20finials%20--%3E%20%3Crect%20x%3D%2246%22%20y%3D%221%22%20width%3D%228%22%20height%3D%2210%22%20rx%3D%222%22%20fill%3D%22%23e8f0f8%22%20stroke%3D%22%23788090%22%2F%3E%20%3Crect%20x%3D%2246%22%20y%3D%2289%22%20width%3D%228%22%20height%3D%2210%22%20rx%3D%222%22%20fill%3D%22%23e8f0f8%22%20stroke%3D%22%23788090%22%2F%3E%20%3Crect%20x%3D%221%22%20y%3D%2246%22%20width%3D%2210%22%20height%3D%228%22%20rx%3D%222%22%20fill%3D%22%23e8f0f8%22%20stroke%3D%22%23788090%22%2F%3E%20%3Crect%20x%3D%2289%22%20y%3D%2246%22%20width%3D%2210%22%20height%3D%228%22%20rx%3D%222%22%20fill%3D%22%23e8f0f8%22%20stroke%3D%22%23788090%22%2F%3E%20%3Ccircle%20cx%3D%2218%22%20cy%3D%2218%22%20r%3D%223.2%22%20fill%3D%22%23e8f0f8%22%20stroke%3D%22%23788090%22%2F%3E%3Ccircle%20cx%3D%2282%22%20cy%3D%2218%22%20r%3D%223.2%22%20fill%3D%22%23e8f0f8%22%20stroke%3D%22%23788090%22%2F%3E%20%3Ccircle%20cx%3D%2218%22%20cy%3D%2282%22%20r%3D%223.2%22%20fill%3D%22%23e8f0f8%22%20stroke%3D%22%23788090%22%2F%3E%3Ccircle%20cx%3D%2282%22%20cy%3D%2282%22%20r%3D%223.2%22%20fill%3D%22%23e8f0f8%22%20stroke%3D%22%23788090%22%2F%3E%20%3C%2Fsvg%3E");
}

/* frame-cedar */
#account-avatar-btn.frame-cedar.has-frame .avatar,
#account-avatar-btn.frame-cedar.has-frame #account-home-avatar {
  box-shadow: 0 0 0 5px #8b5a2b, 0 0 0 9px rgba(100,60,20,0.4);
  border-radius: 8%;
}
.gacha-reward-frame.frame-cedar.has-frame > .avatar {
  box-shadow: 0 0 0 5px #8b5a2b, 0 0 0 9px rgba(100,60,20,0.4);
  border-radius: 8%;
}
.avatar-crop-deco.frame-cedar.has-frame {
  box-shadow: 0 0 0 5px #8b5a2b, 0 0 0 9px rgba(100,60,20,0.4);
  border-radius: 8%;
}
.crop-frame-icon-av.has-frame.frame-cedar > .avatar {
  box-shadow: 0 0 0 2px #8b5a2b, 0 0 0 4px rgba(100,60,20,0.4);
  border-radius: 8%;
}
.avatar-cosmetic-wrap.has-frame.frame-cedar::before,
#account-avatar-btn.frame-cedar.has-frame::before,
.avatar-crop-deco.frame-cedar.has-frame::before,
.crop-frame-icon-av.frame-cedar.has-frame::before,
.gacha-reward-frame.frame-cedar.has-frame::before,
.unlock-carousel-frame-av.frame-cedar.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-cedar::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22none%22%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2238%22%20stroke%3D%22%23a07040%22%20stroke-width%3D%224%22%20opacity%3D%22.45%22%2F%3E%20%3C%21--%20left%20beam%20--%3E%20%3Crect%20x%3D%222%22%20y%3D%2212%22%20width%3D%2214%22%20height%3D%2276%22%20rx%3D%222%22%20fill%3D%22%238b5a2b%22%20stroke%3D%22%235a3010%22%20stroke-width%3D%221.4%22%2F%3E%20%3Cpath%20d%3D%22M5%2020c4%208%204%2020%200%2028M9%2024c3%206%203%2016%200%2024M5%2056c4%208%204%2018%200%2026%22%20stroke%3D%22%23c49050%22%20stroke-width%3D%221.3%22%20opacity%3D%22.7%22%2F%3E%20%3Crect%20x%3D%222%22%20y%3D%228%22%20width%3D%2214%22%20height%3D%226%22%20rx%3D%221%22%20fill%3D%22%23a07040%22%20stroke%3D%22%235a3010%22%2F%3E%20%3Crect%20x%3D%222%22%20y%3D%2286%22%20width%3D%2214%22%20height%3D%226%22%20rx%3D%221%22%20fill%3D%22%23a07040%22%20stroke%3D%22%235a3010%22%2F%3E%20%3C%21--%20right%20beam%20--%3E%20%3Crect%20x%3D%2284%22%20y%3D%2212%22%20width%3D%2214%22%20height%3D%2276%22%20rx%3D%222%22%20fill%3D%22%238b5a2b%22%20stroke%3D%22%235a3010%22%20stroke-width%3D%221.4%22%2F%3E%20%3Cpath%20d%3D%22M87%2020c4%208%204%2020%200%2028M91%2024c3%206%203%2016%200%2024M87%2056c4%208%204%2018%200%2026%22%20stroke%3D%22%23c49050%22%20stroke-width%3D%221.3%22%20opacity%3D%22.7%22%2F%3E%20%3Crect%20x%3D%2284%22%20y%3D%228%22%20width%3D%2214%22%20height%3D%226%22%20rx%3D%221%22%20fill%3D%22%23a07040%22%20stroke%3D%22%235a3010%22%2F%3E%20%3Crect%20x%3D%2284%22%20y%3D%2286%22%20width%3D%2214%22%20height%3D%226%22%20rx%3D%221%22%20fill%3D%22%23a07040%22%20stroke%3D%22%235a3010%22%2F%3E%20%3C%21--%20top%20lintel%20--%3E%20%3Crect%20x%3D%2216%22%20y%3D%224%22%20width%3D%2268%22%20height%3D%228%22%20rx%3D%222%22%20fill%3D%22%23a07040%22%20stroke%3D%22%235a3010%22%20stroke-width%3D%221.2%22%2F%3E%20%3Cpath%20d%3D%22M24%208h52%22%20stroke%3D%22%23c49050%22%20stroke-width%3D%221%22%20opacity%3D%22.5%22%2F%3E%20%3C%21--%20bottom%20sill%20--%3E%20%3Crect%20x%3D%2216%22%20y%3D%2288%22%20width%3D%2268%22%20height%3D%228%22%20rx%3D%222%22%20fill%3D%22%23a07040%22%20stroke%3D%22%235a3010%22%20stroke-width%3D%221.2%22%2F%3E%20%3C%2Fsvg%3E");
}

/* frame-linen */
#account-avatar-btn.frame-linen.has-frame .avatar,
#account-avatar-btn.frame-linen.has-frame #account-home-avatar {
  box-shadow: 0 0 0 4px #e8e0d0, 0 0 0 8px rgba(200,190,170,0.45);
}
.gacha-reward-frame.frame-linen.has-frame > .avatar {
  box-shadow: 0 0 0 4px #e8e0d0, 0 0 0 8px rgba(200,190,170,0.45);
}
.avatar-crop-deco.frame-linen.has-frame {
  box-shadow: 0 0 0 4px #e8e0d0, 0 0 0 8px rgba(200,190,170,0.45);
}
.crop-frame-icon-av.has-frame.frame-linen > .avatar {
  box-shadow: 0 0 0 2px #e8e0d0, 0 0 0 4px rgba(200,190,170,0.45);
}
.avatar-cosmetic-wrap.has-frame.frame-linen::before,
#account-avatar-btn.frame-linen.has-frame::before,
.avatar-crop-deco.frame-linen.has-frame::before,
.crop-frame-icon-av.frame-linen.has-frame::before,
.gacha-reward-frame.frame-linen.has-frame::before,
.unlock-carousel-frame-av.frame-linen.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-linen::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22none%22%3E%20%3Crect%20x%3D%2214%22%20y%3D%2214%22%20width%3D%2272%22%20height%3D%2272%22%20rx%3D%226%22%20stroke%3D%22%23e8e0d0%22%20stroke-width%3D%227%22%20fill%3D%22none%22%2F%3E%20%3Crect%20x%3D%2218%22%20y%3D%2218%22%20width%3D%2264%22%20height%3D%2264%22%20rx%3D%224%22%20stroke%3D%22%23b0a890%22%20stroke-width%3D%221.5%22%20fill%3D%22none%22%2F%3E%20%3C%21--%20weave%20ticks%20--%3E%20%3Cpath%20d%3D%22M24%2014v-4M32%2014v-4M40%2014v-4M48%2014v-4M56%2014v-4M64%2014v-4M72%2014v-4%22%20stroke%3D%22%23d0c8b0%22%20stroke-width%3D%221.5%22%2F%3E%20%3Cpath%20d%3D%22M24%2086v4M32%2086v4M40%2086v4M48%2086v4M56%2086v4M64%2086v4M72%2086v4%22%20stroke%3D%22%23d0c8b0%22%20stroke-width%3D%221.5%22%2F%3E%20%3C%21--%20corner%20knots%20%2B%20tassels%20--%3E%20%3Ccircle%20cx%3D%2214%22%20cy%3D%2214%22%20r%3D%225%22%20fill%3D%22%23d8d0c0%22%20stroke%3D%22%23908870%22%2F%3E%3Cpath%20d%3D%22M10%2018l-4%208M14%2020v8M18%2018l4%208%22%20stroke%3D%22%23c0b8a0%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Ccircle%20cx%3D%2286%22%20cy%3D%2214%22%20r%3D%225%22%20fill%3D%22%23d8d0c0%22%20stroke%3D%22%23908870%22%2F%3E%3Cpath%20d%3D%22M82%2018l-4%208M86%2020v8M90%2018l4%208%22%20stroke%3D%22%23c0b8a0%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Ccircle%20cx%3D%2214%22%20cy%3D%2286%22%20r%3D%225%22%20fill%3D%22%23d8d0c0%22%20stroke%3D%22%23908870%22%2F%3E%3Cpath%20d%3D%22M10%2082l-4-8M14%2080v-8M18%2082l4-8%22%20stroke%3D%22%23c0b8a0%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Ccircle%20cx%3D%2286%22%20cy%3D%2286%22%20r%3D%225%22%20fill%3D%22%23d8d0c0%22%20stroke%3D%22%23908870%22%2F%3E%3Cpath%20d%3D%22M82%2082l-4-8M86%2080v-8M90%2082l4-8%22%20stroke%3D%22%23c0b8a0%22%20stroke-width%3D%221.4%22%20stroke-linecap%3D%22round%22%2F%3E%20%3C%2Fsvg%3E");
}

/* frame-mosaic */
#account-avatar-btn.frame-mosaic.has-frame .avatar,
#account-avatar-btn.frame-mosaic.has-frame #account-home-avatar {
  box-shadow: 0 0 0 4px #6a8ab0, 0 0 0 8px rgba(100,130,170,0.4);
}
.gacha-reward-frame.frame-mosaic.has-frame > .avatar {
  box-shadow: 0 0 0 4px #6a8ab0, 0 0 0 8px rgba(100,130,170,0.4);
}
.avatar-crop-deco.frame-mosaic.has-frame {
  box-shadow: 0 0 0 4px #6a8ab0, 0 0 0 8px rgba(100,130,170,0.4);
}
.crop-frame-icon-av.has-frame.frame-mosaic > .avatar {
  box-shadow: 0 0 0 2px #6a8ab0, 0 0 0 4px rgba(100,130,170,0.4);
}
.avatar-cosmetic-wrap.has-frame.frame-mosaic::before,
#account-avatar-btn.frame-mosaic.has-frame::before,
.avatar-crop-deco.frame-mosaic.has-frame::before,
.crop-frame-icon-av.frame-mosaic.has-frame::before,
.gacha-reward-frame.frame-mosaic.has-frame::before,
.unlock-carousel-frame-av.frame-mosaic.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-mosaic::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22none%22%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2240%22%20stroke%3D%22%236a8ab0%22%20stroke-width%3D%225%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2236%22%20stroke%3D%22%23405878%22%20stroke-width%3D%221.4%22%20opacity%3D%22.5%22%2F%3E%20%3C%21--%20mosaic%20tiles%20around%20rim%20--%3E%20%3Crect%20x%3D%2244%22%20y%3D%222%22%20width%3D%2212%22%20height%3D%2210%22%20rx%3D%221%22%20fill%3D%22%23e07070%22%20stroke%3D%22%23303050%22%2F%3E%20%3Crect%20x%3D%2258%22%20y%3D%224%22%20width%3D%2210%22%20height%3D%229%22%20rx%3D%221%22%20fill%3D%22%2370c0e0%22%20stroke%3D%22%23303050%22%2F%3E%20%3Crect%20x%3D%2232%22%20y%3D%224%22%20width%3D%2210%22%20height%3D%229%22%20rx%3D%221%22%20fill%3D%22%23e0c050%22%20stroke%3D%22%23303050%22%2F%3E%20%3Crect%20x%3D%2288%22%20y%3D%2244%22%20width%3D%2210%22%20height%3D%2212%22%20rx%3D%221%22%20fill%3D%22%2380d070%22%20stroke%3D%22%23303050%22%2F%3E%20%3Crect%20x%3D%2286%22%20y%3D%2230%22%20width%3D%229%22%20height%3D%2210%22%20rx%3D%221%22%20fill%3D%22%23e070a0%22%20stroke%3D%22%23303050%22%2F%3E%20%3Crect%20x%3D%2286%22%20y%3D%2260%22%20width%3D%229%22%20height%3D%2210%22%20rx%3D%221%22%20fill%3D%22%237080e0%22%20stroke%3D%22%23303050%22%2F%3E%20%3Crect%20x%3D%222%22%20y%3D%2244%22%20width%3D%2210%22%20height%3D%2212%22%20rx%3D%221%22%20fill%3D%22%23e0a040%22%20stroke%3D%22%23303050%22%2F%3E%20%3Crect%20x%3D%225%22%20y%3D%2230%22%20width%3D%229%22%20height%3D%2210%22%20rx%3D%221%22%20fill%3D%22%2350c0c0%22%20stroke%3D%22%23303050%22%2F%3E%20%3Crect%20x%3D%225%22%20y%3D%2260%22%20width%3D%229%22%20height%3D%2210%22%20rx%3D%221%22%20fill%3D%22%23c070e0%22%20stroke%3D%22%23303050%22%2F%3E%20%3Crect%20x%3D%2244%22%20y%3D%2288%22%20width%3D%2212%22%20height%3D%2210%22%20rx%3D%221%22%20fill%3D%22%2370e0b0%22%20stroke%3D%22%23303050%22%2F%3E%20%3Crect%20x%3D%2258%22%20y%3D%2287%22%20width%3D%2210%22%20height%3D%229%22%20rx%3D%221%22%20fill%3D%22%23e09050%22%20stroke%3D%22%23303050%22%2F%3E%20%3Crect%20x%3D%2232%22%20y%3D%2287%22%20width%3D%2210%22%20height%3D%229%22%20rx%3D%221%22%20fill%3D%22%239090e0%22%20stroke%3D%22%23303050%22%2F%3E%20%3Crect%20x%3D%2214%22%20y%3D%2214%22%20width%3D%229%22%20height%3D%229%22%20rx%3D%221%22%20fill%3D%22%23e0e070%22%20stroke%3D%22%23303050%22%2F%3E%20%3Crect%20x%3D%2277%22%20y%3D%2214%22%20width%3D%229%22%20height%3D%229%22%20rx%3D%221%22%20fill%3D%22%2370e0e0%22%20stroke%3D%22%23303050%22%2F%3E%20%3Crect%20x%3D%2214%22%20y%3D%2277%22%20width%3D%229%22%20height%3D%229%22%20rx%3D%221%22%20fill%3D%22%23e070d0%22%20stroke%3D%22%23303050%22%2F%3E%20%3Crect%20x%3D%2277%22%20y%3D%2277%22%20width%3D%229%22%20height%3D%229%22%20rx%3D%221%22%20fill%3D%22%2380e080%22%20stroke%3D%22%23303050%22%2F%3E%20%3C%2Fsvg%3E");
}

/* frame-stained */
#account-avatar-btn.frame-stained.has-frame .avatar,
#account-avatar-btn.frame-stained.has-frame #account-home-avatar {
  box-shadow: 0 0 0 4px #4a3060, 0 0 0 8px rgba(80,50,100,0.4);
}
.gacha-reward-frame.frame-stained.has-frame > .avatar {
  box-shadow: 0 0 0 4px #4a3060, 0 0 0 8px rgba(80,50,100,0.4);
}
.avatar-crop-deco.frame-stained.has-frame {
  box-shadow: 0 0 0 4px #4a3060, 0 0 0 8px rgba(80,50,100,0.4);
}
.crop-frame-icon-av.has-frame.frame-stained > .avatar {
  box-shadow: 0 0 0 2px #4a3060, 0 0 0 4px rgba(80,50,100,0.4);
}
.avatar-cosmetic-wrap.has-frame.frame-stained::before,
#account-avatar-btn.frame-stained.has-frame::before,
.avatar-crop-deco.frame-stained.has-frame::before,
.crop-frame-icon-av.frame-stained.has-frame::before,
.gacha-reward-frame.frame-stained.has-frame::before,
.unlock-carousel-frame-av.frame-stained.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-stained::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22none%22%3E%20%3C%21--%20outer%20stained%20segments%20as%20thick%20arcs%20via%20stroked%20paths%20with%20wide%20stroke%20--%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2242%22%20stroke%3D%22%232a1840%22%20stroke-width%3D%2210%22%2F%3E%20%3C%21--%20colored%20arc%20segments%20%28outer%20band%20only%29%20--%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2242%22%20stroke%3D%22%23c04040%22%20stroke-width%3D%227%22%20stroke-dasharray%3D%2222%20110%22%20stroke-dashoffset%3D%220%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2242%22%20stroke%3D%22%234060c0%22%20stroke-width%3D%227%22%20stroke-dasharray%3D%2222%20110%22%20stroke-dashoffset%3D%2227%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2242%22%20stroke%3D%22%23e0c040%22%20stroke-width%3D%227%22%20stroke-dasharray%3D%2222%20110%22%20stroke-dashoffset%3D%2254%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2242%22%20stroke%3D%22%2340a060%22%20stroke-width%3D%227%22%20stroke-dasharray%3D%2222%20110%22%20stroke-dashoffset%3D%2281%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2242%22%20stroke%3D%22%23a040c0%22%20stroke-width%3D%227%22%20stroke-dasharray%3D%2222%20110%22%20stroke-dashoffset%3D%22108%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2236%22%20stroke%3D%22%231a1028%22%20stroke-width%3D%222%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2247%22%20stroke%3D%22%234a3060%22%20stroke-width%3D%221.5%22%2F%3E%20%3C%21--%20lead%20spoke%20tips%20outside%20--%3E%20%3Cpath%20d%3D%22M50%203v8M50%2089v8M3%2050h8M89%2050h8M18%2018l6%206M76%2076l6%206M82%2018l-6%206M24%2076l-6%206%22%20stroke%3D%22%231a1028%22%20stroke-width%3D%222.2%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%225%22%20r%3D%222.5%22%20fill%3D%22%23e0c040%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2295%22%20r%3D%222.5%22%20fill%3D%22%23c04040%22%2F%3E%20%3Ccircle%20cx%3D%225%22%20cy%3D%2250%22%20r%3D%222.5%22%20fill%3D%22%234060c0%22%2F%3E%3Ccircle%20cx%3D%2295%22%20cy%3D%2250%22%20r%3D%222.5%22%20fill%3D%22%2340a060%22%2F%3E%20%3C%2Fsvg%3E");
}

/* frame-parchment */
#account-avatar-btn.frame-parchment.has-frame .avatar,
#account-avatar-btn.frame-parchment.has-frame #account-home-avatar {
  box-shadow: 0 0 0 4px #d4c4a0, 0 0 0 8px rgba(180,160,120,0.4);
  border-radius: 6% / 10%;
}
.gacha-reward-frame.frame-parchment.has-frame > .avatar {
  box-shadow: 0 0 0 4px #d4c4a0, 0 0 0 8px rgba(180,160,120,0.4);
  border-radius: 6% / 10%;
}
.avatar-crop-deco.frame-parchment.has-frame {
  box-shadow: 0 0 0 4px #d4c4a0, 0 0 0 8px rgba(180,160,120,0.4);
  border-radius: 6% / 10%;
}
.crop-frame-icon-av.has-frame.frame-parchment > .avatar {
  box-shadow: 0 0 0 2px #d4c4a0, 0 0 0 4px rgba(180,160,120,0.4);
  border-radius: 6% / 10%;
}
.avatar-cosmetic-wrap.has-frame.frame-parchment::before,
#account-avatar-btn.frame-parchment.has-frame::before,
.avatar-crop-deco.frame-parchment.has-frame::before,
.crop-frame-icon-av.frame-parchment.has-frame::before,
.gacha-reward-frame.frame-parchment.has-frame::before,
.unlock-carousel-frame-av.frame-parchment.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-parchment::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22none%22%3E%20%3Crect%20x%3D%2212%22%20y%3D%2212%22%20width%3D%2276%22%20height%3D%2276%22%20rx%3D%223%22%20stroke%3D%22%23d4c4a0%22%20stroke-width%3D%227%22%20fill%3D%22none%22%2F%3E%20%3Crect%20x%3D%2216%22%20y%3D%2216%22%20width%3D%2268%22%20height%3D%2268%22%20rx%3D%222%22%20stroke%3D%22%23a08050%22%20stroke-width%3D%221.4%22%20fill%3D%22none%22%2F%3E%20%3C%21--%20curled%20corners%20--%3E%20%3Cpath%20d%3D%22M12%2012c8%200%2010%208%208%2012-6-2-10-4-12-10%202-2%204-2%204-2z%22%20fill%3D%22%23e8d8b0%22%20stroke%3D%22%238a6a30%22%20stroke-width%3D%221.1%22%2F%3E%20%3Cpath%20d%3D%22M88%2012c-8%200-10%208-8%2012%206-2%2010-4%2012-10-2-2-4-2-4-2z%22%20fill%3D%22%23e8d8b0%22%20stroke%3D%22%238a6a30%22%20stroke-width%3D%221.1%22%2F%3E%20%3Cpath%20d%3D%22M12%2088c8%200%2010-8%208-12-6%202-10%204-12%2010%202%202%204%202%204%202z%22%20fill%3D%22%23e8d8b0%22%20stroke%3D%22%238a6a30%22%20stroke-width%3D%221.1%22%2F%3E%20%3Cpath%20d%3D%22M88%2088c-8%200-10-8-8-12%206%202%2010%204%2012%2010-2%202-4%202-4%202z%22%20fill%3D%22%23e8d8b0%22%20stroke%3D%22%238a6a30%22%20stroke-width%3D%221.1%22%2F%3E%20%3C%21--%20edge%20script%20ticks%20--%3E%20%3Cpath%20d%3D%22M28%2010h6M38%2010h6M48%2010h6M58%2010h6M68%2010h6%22%20stroke%3D%22%23a08050%22%20stroke-width%3D%221.2%22%20opacity%3D%22.55%22%2F%3E%20%3Cpath%20d%3D%22M28%2090h6M38%2090h6M48%2090h6M58%2090h6M68%2090h6%22%20stroke%3D%22%23a08050%22%20stroke-width%3D%221.2%22%20opacity%3D%22.55%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%226%22%20r%3D%222%22%20fill%3D%22%23c4a574%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2294%22%20r%3D%222%22%20fill%3D%22%23c4a574%22%2F%3E%20%3C%2Fsvg%3E");
}

/* frame-ivory */
#account-avatar-btn.frame-ivory.has-frame .avatar,
#account-avatar-btn.frame-ivory.has-frame #account-home-avatar {
  box-shadow: 0 0 0 4px #f5f0e6, 0 0 0 8px rgba(220,210,190,0.5);
}
.gacha-reward-frame.frame-ivory.has-frame > .avatar {
  box-shadow: 0 0 0 4px #f5f0e6, 0 0 0 8px rgba(220,210,190,0.5);
}
.avatar-crop-deco.frame-ivory.has-frame {
  box-shadow: 0 0 0 4px #f5f0e6, 0 0 0 8px rgba(220,210,190,0.5);
}
.crop-frame-icon-av.has-frame.frame-ivory > .avatar {
  box-shadow: 0 0 0 2px #f5f0e6, 0 0 0 4px rgba(220,210,190,0.5);
}
.avatar-cosmetic-wrap.has-frame.frame-ivory::before,
#account-avatar-btn.frame-ivory.has-frame::before,
.avatar-crop-deco.frame-ivory.has-frame::before,
.crop-frame-icon-av.frame-ivory.has-frame::before,
.gacha-reward-frame.frame-ivory.has-frame::before,
.unlock-carousel-frame-av.frame-ivory.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-ivory::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22none%22%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2241%22%20stroke%3D%22%23f5f0e6%22%20stroke-width%3D%228%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2235.5%22%20stroke%3D%22%23c8c0b0%22%20stroke-width%3D%221.8%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2245%22%20stroke%3D%22%23fffaf0%22%20stroke-width%3D%221.4%22%20opacity%3D%22.7%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2241%22%20stroke%3D%22%23d8d0c0%22%20stroke-width%3D%221%22%20stroke-dasharray%3D%221.5%202.5%22%20opacity%3D%22.8%22%2F%3E%20%3C%21--%20pearl%20beads%20cardinal%20%2B%20diagonal%20--%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%228%22%20r%3D%225%22%20fill%3D%22%23fffaf0%22%20stroke%3D%22%23b0a890%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2292%22%20r%3D%225%22%20fill%3D%22%23fffaf0%22%20stroke%3D%22%23b0a890%22%2F%3E%20%3Ccircle%20cx%3D%228%22%20cy%3D%2250%22%20r%3D%225%22%20fill%3D%22%23fffaf0%22%20stroke%3D%22%23b0a890%22%2F%3E%3Ccircle%20cx%3D%2292%22%20cy%3D%2250%22%20r%3D%225%22%20fill%3D%22%23fffaf0%22%20stroke%3D%22%23b0a890%22%2F%3E%20%3Ccircle%20cx%3D%2218%22%20cy%3D%2218%22%20r%3D%223.5%22%20fill%3D%22%23f0e8d8%22%20stroke%3D%22%23b0a890%22%2F%3E%3Ccircle%20cx%3D%2282%22%20cy%3D%2218%22%20r%3D%223.5%22%20fill%3D%22%23f0e8d8%22%20stroke%3D%22%23b0a890%22%2F%3E%20%3Ccircle%20cx%3D%2218%22%20cy%3D%2282%22%20r%3D%223.5%22%20fill%3D%22%23f0e8d8%22%20stroke%3D%22%23b0a890%22%2F%3E%3Ccircle%20cx%3D%2282%22%20cy%3D%2282%22%20r%3D%223.5%22%20fill%3D%22%23f0e8d8%22%20stroke%3D%22%23b0a890%22%2F%3E%20%3C%21--%20tiny%20highlight%20dots%20--%3E%20%3Ccircle%20cx%3D%2248%22%20cy%3D%226%22%20r%3D%221.2%22%20fill%3D%22%23fff%22%2F%3E%3Ccircle%20cx%3D%226%22%20cy%3D%2248%22%20r%3D%221.2%22%20fill%3D%22%23fff%22%2F%3E%20%3C%2Fsvg%3E");
}

/* frame-sapphire */
#account-avatar-btn.frame-sapphire.has-frame .avatar,
#account-avatar-btn.frame-sapphire.has-frame #account-home-avatar {
  box-shadow: 0 0 0 4px #2a5aaa, 0 0 0 8px rgba(40,90,180,0.45), 0 0 14px rgba(80,140,255,0.35);
}
.gacha-reward-frame.frame-sapphire.has-frame > .avatar {
  box-shadow: 0 0 0 4px #2a5aaa, 0 0 0 8px rgba(40,90,180,0.45), 0 0 14px rgba(80,140,255,0.35);
}
.avatar-crop-deco.frame-sapphire.has-frame {
  box-shadow: 0 0 0 4px #2a5aaa, 0 0 0 8px rgba(40,90,180,0.45), 0 0 14px rgba(80,140,255,0.35);
}
.crop-frame-icon-av.has-frame.frame-sapphire > .avatar {
  box-shadow: 0 0 0 2px #2a5aaa, 0 0 0 4px rgba(40,90,180,0.45), 0 0 14px rgba(80,140,255,0.35);
}
.avatar-cosmetic-wrap.has-frame.frame-sapphire::before,
#account-avatar-btn.frame-sapphire.has-frame::before,
.avatar-crop-deco.frame-sapphire.has-frame::before,
.crop-frame-icon-av.frame-sapphire.has-frame::before,
.gacha-reward-frame.frame-sapphire.has-frame::before,
.unlock-carousel-frame-av.frame-sapphire.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-sapphire::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22none%22%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2241%22%20stroke%3D%22%232a5aaa%22%20stroke-width%3D%228%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2235.5%22%20stroke%3D%22%231a3a70%22%20stroke-width%3D%222%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2245%22%20stroke%3D%22%236a9ae0%22%20stroke-width%3D%221.6%22%20opacity%3D%22.75%22%2F%3E%20%3C%21--%20faceted%20diamond%20tips%20--%3E%20%3Cpath%20d%3D%22M50%201l5%209h-10z%22%20fill%3D%22%2380b0ff%22%20stroke%3D%22%231a3a70%22%20stroke-width%3D%221%22%2F%3E%20%3Cpath%20d%3D%22M50%2099l5-9h-10z%22%20fill%3D%22%2380b0ff%22%20stroke%3D%22%231a3a70%22%20stroke-width%3D%221%22%2F%3E%20%3Cpath%20d%3D%22M1%2050l9%205v-10z%22%20fill%3D%22%2380b0ff%22%20stroke%3D%22%231a3a70%22%20stroke-width%3D%221%22%2F%3E%20%3Cpath%20d%3D%22M99%2050l-9%205v-10z%22%20fill%3D%22%2380b0ff%22%20stroke%3D%22%231a3a70%22%20stroke-width%3D%221%22%2F%3E%20%3Cpath%20d%3D%22M16%2016l6%202-2%206-4-4z%22%20fill%3D%22%235080d0%22%20stroke%3D%22%231a3a70%22%2F%3E%3Cpath%20d%3D%22M84%2016l-6%202%202%206%204-4z%22%20fill%3D%22%235080d0%22%20stroke%3D%22%231a3a70%22%2F%3E%20%3Cpath%20d%3D%22M16%2084l6-2-2-6-4%204z%22%20fill%3D%22%235080d0%22%20stroke%3D%22%231a3a70%22%2F%3E%3Cpath%20d%3D%22M84%2084l-6-2%202-6%204%204z%22%20fill%3D%22%235080d0%22%20stroke%3D%22%231a3a70%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2212%22%20r%3D%223%22%20fill%3D%22%23a0c8ff%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2288%22%20r%3D%223%22%20fill%3D%22%23a0c8ff%22%2F%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2250%22%20r%3D%223%22%20fill%3D%22%23a0c8ff%22%2F%3E%3Ccircle%20cx%3D%2288%22%20cy%3D%2250%22%20r%3D%223%22%20fill%3D%22%23a0c8ff%22%2F%3E%20%3C%2Fsvg%3E");
}

/* frame-coral */
#account-avatar-btn.frame-coral.has-frame .avatar,
#account-avatar-btn.frame-coral.has-frame #account-home-avatar {
  box-shadow: 0 0 0 4px #e07060, 0 0 0 8px rgba(220,100,90,0.4);
}
.gacha-reward-frame.frame-coral.has-frame > .avatar {
  box-shadow: 0 0 0 4px #e07060, 0 0 0 8px rgba(220,100,90,0.4);
}
.avatar-crop-deco.frame-coral.has-frame {
  box-shadow: 0 0 0 4px #e07060, 0 0 0 8px rgba(220,100,90,0.4);
}
.crop-frame-icon-av.has-frame.frame-coral > .avatar {
  box-shadow: 0 0 0 2px #e07060, 0 0 0 4px rgba(220,100,90,0.4);
}
.avatar-cosmetic-wrap.has-frame.frame-coral::before,
#account-avatar-btn.frame-coral.has-frame::before,
.avatar-crop-deco.frame-coral.has-frame::before,
.crop-frame-icon-av.frame-coral.has-frame::before,
.gacha-reward-frame.frame-coral.has-frame::before,
.unlock-carousel-frame-av.frame-coral.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-coral::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22none%22%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2239%22%20stroke%3D%22%23e07060%22%20stroke-width%3D%225%22%20opacity%3D%22.55%22%2F%3E%20%3C%21--%20coral%20branches%20outside%20--%3E%20%3Cpath%20d%3D%22M20%2092c-2-16%202-28%208-36-6%202-14%200-18-8%206%202%2012%208%2014%2016%202-12%208-20%2016-24%22%20stroke%3D%22%23e07060%22%20stroke-width%3D%223.2%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M80%2092c2-16-2-28-8-36%206%202%2014%200%2018-8-6%202-12%208-14%2016-2-12-8-20-16-24%22%20stroke%3D%22%23e07060%22%20stroke-width%3D%223.2%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M12%2050c-4-8-2-18%204-24M10%2060c-6-4-6-14-2-20%22%20stroke%3D%22%23f09080%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M88%2050c4-8%202-18-4-24M90%2060c6-4%206-14%202-20%22%20stroke%3D%22%23f09080%22%20stroke-width%3D%222.5%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M30%208c4%206%2010%208%2016%206M70%208c-4%206-10%208-16%206%22%20stroke%3D%22%23e07060%22%20stroke-width%3D%222.4%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Ccircle%20cx%3D%2214%22%20cy%3D%2228%22%20r%3D%223%22%20fill%3D%22%23f0a090%22%2F%3E%3Ccircle%20cx%3D%2286%22%20cy%3D%2228%22%20r%3D%223%22%20fill%3D%22%23f0a090%22%2F%3E%20%3Ccircle%20cx%3D%228%22%20cy%3D%2270%22%20r%3D%222.5%22%20fill%3D%22%23c05050%22%2F%3E%3Ccircle%20cx%3D%2292%22%20cy%3D%2270%22%20r%3D%222.5%22%20fill%3D%22%23c05050%22%2F%3E%20%3Ccircle%20cx%3D%2240%22%20cy%3D%226%22%20r%3D%222.2%22%20fill%3D%22%23f0a090%22%2F%3E%3Ccircle%20cx%3D%2260%22%20cy%3D%226%22%20r%3D%222.2%22%20fill%3D%22%23f0a090%22%2F%3E%20%3Ccircle%20cx%3D%2228%22%20cy%3D%2290%22%20r%3D%223%22%20fill%3D%22%23c05050%22%2F%3E%3Ccircle%20cx%3D%2272%22%20cy%3D%2290%22%20r%3D%223%22%20fill%3D%22%23c05050%22%2F%3E%20%3C%2Fsvg%3E");
}

/* frame-vine */
#account-avatar-btn.frame-vine.has-frame .avatar,
#account-avatar-btn.frame-vine.has-frame #account-home-avatar {
  box-shadow: 0 0 0 4px #5a8a3a, 0 0 0 8px rgba(80,130,50,0.4);
}
.gacha-reward-frame.frame-vine.has-frame > .avatar {
  box-shadow: 0 0 0 4px #5a8a3a, 0 0 0 8px rgba(80,130,50,0.4);
}
.avatar-crop-deco.frame-vine.has-frame {
  box-shadow: 0 0 0 4px #5a8a3a, 0 0 0 8px rgba(80,130,50,0.4);
}
.crop-frame-icon-av.has-frame.frame-vine > .avatar {
  box-shadow: 0 0 0 2px #5a8a3a, 0 0 0 4px rgba(80,130,50,0.4);
}
.avatar-cosmetic-wrap.has-frame.frame-vine::before,
#account-avatar-btn.frame-vine.has-frame::before,
.avatar-crop-deco.frame-vine.has-frame::before,
.crop-frame-icon-av.frame-vine.has-frame::before,
.gacha-reward-frame.frame-vine.has-frame::before,
.unlock-carousel-frame-av.frame-vine.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-vine::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22none%22%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2239%22%20stroke%3D%22%235a8a3a%22%20stroke-width%3D%224%22%20opacity%3D%22.4%22%2F%3E%20%3Cpath%20d%3D%22M8%2070c8-20%2012-36%2010-52%2010%208%2014%2022%2012%2038%208-10%2018-16%2028-16%22%20stroke%3D%22%234a7030%22%20stroke-width%3D%222.2%22%20fill%3D%22none%22%2F%3E%20%3Cpath%20d%3D%22M92%2070c-8-20-12-36-10-52-10%208-14%2022-12%2038-8-10-18-16-28-16%22%20stroke%3D%22%234a7030%22%20stroke-width%3D%222.2%22%20fill%3D%22none%22%2F%3E%20%3C%21--%20leaves%20--%3E%20%3Cellipse%20cx%3D%2212%22%20cy%3D%2230%22%20rx%3D%225%22%20ry%3D%223%22%20transform%3D%22rotate%28-40%2012%2030%29%22%20fill%3D%22%236aaa40%22%2F%3E%20%3Cellipse%20cx%3D%2214%22%20cy%3D%2248%22%20rx%3D%225%22%20ry%3D%223%22%20transform%3D%22rotate%28-20%2014%2048%29%22%20fill%3D%22%235a8a3a%22%2F%3E%20%3Cellipse%20cx%3D%2218%22%20cy%3D%2264%22%20rx%3D%224.5%22%20ry%3D%222.8%22%20transform%3D%22rotate%28-5%2018%2064%29%22%20fill%3D%22%236aaa40%22%2F%3E%20%3Cellipse%20cx%3D%2288%22%20cy%3D%2230%22%20rx%3D%225%22%20ry%3D%223%22%20transform%3D%22rotate%2840%2088%2030%29%22%20fill%3D%22%236aaa40%22%2F%3E%20%3Cellipse%20cx%3D%2286%22%20cy%3D%2248%22%20rx%3D%225%22%20ry%3D%223%22%20transform%3D%22rotate%2820%2086%2048%29%22%20fill%3D%22%235a8a3a%22%2F%3E%20%3Cellipse%20cx%3D%2282%22%20cy%3D%2264%22%20rx%3D%224.5%22%20ry%3D%222.8%22%20transform%3D%22rotate%285%2082%2064%29%22%20fill%3D%22%236aaa40%22%2F%3E%20%3Cellipse%20cx%3D%2230%22%20cy%3D%2212%22%20rx%3D%224%22%20ry%3D%222.5%22%20transform%3D%22rotate%28-70%2030%2012%29%22%20fill%3D%22%237aba50%22%2F%3E%20%3Cellipse%20cx%3D%2270%22%20cy%3D%2212%22%20rx%3D%224%22%20ry%3D%222.5%22%20transform%3D%22rotate%2870%2070%2012%29%22%20fill%3D%22%237aba50%22%2F%3E%20%3C%21--%20grapes%20clusters%20outside%20--%3E%20%3Ccircle%20cx%3D%228%22%20cy%3D%2278%22%20r%3D%223%22%20fill%3D%22%237a3a8a%22%2F%3E%3Ccircle%20cx%3D%2214%22%20cy%3D%2282%22%20r%3D%222.8%22%20fill%3D%22%236a2a7a%22%2F%3E%3Ccircle%20cx%3D%2210%22%20cy%3D%2286%22%20r%3D%222.5%22%20fill%3D%22%238a4a9a%22%2F%3E%20%3Ccircle%20cx%3D%2292%22%20cy%3D%2278%22%20r%3D%223%22%20fill%3D%22%237a3a8a%22%2F%3E%3Ccircle%20cx%3D%2286%22%20cy%3D%2282%22%20r%3D%222.8%22%20fill%3D%22%236a2a7a%22%2F%3E%3Ccircle%20cx%3D%2290%22%20cy%3D%2286%22%20r%3D%222.5%22%20fill%3D%22%238a4a9a%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%226%22%20r%3D%222.5%22%20fill%3D%22%237a3a8a%22%2F%3E%20%3C%2Fsvg%3E");
}

/* frame-pillar */
#account-avatar-btn.frame-pillar.has-frame .avatar,
#account-avatar-btn.frame-pillar.has-frame #account-home-avatar {
  box-shadow: 0 0 0 4px #c8c0b0, 0 0 0 8px rgba(160,150,130,0.4);
  border-radius: 4%;
}
.gacha-reward-frame.frame-pillar.has-frame > .avatar {
  box-shadow: 0 0 0 4px #c8c0b0, 0 0 0 8px rgba(160,150,130,0.4);
  border-radius: 4%;
}
.avatar-crop-deco.frame-pillar.has-frame {
  box-shadow: 0 0 0 4px #c8c0b0, 0 0 0 8px rgba(160,150,130,0.4);
  border-radius: 4%;
}
.crop-frame-icon-av.has-frame.frame-pillar > .avatar {
  box-shadow: 0 0 0 2px #c8c0b0, 0 0 0 4px rgba(160,150,130,0.4);
  border-radius: 4%;
}
.avatar-cosmetic-wrap.has-frame.frame-pillar::before,
#account-avatar-btn.frame-pillar.has-frame::before,
.avatar-crop-deco.frame-pillar.has-frame::before,
.crop-frame-icon-av.frame-pillar.has-frame::before,
.gacha-reward-frame.frame-pillar.has-frame::before,
.unlock-carousel-frame-av.frame-pillar.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-pillar::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22none%22%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2237%22%20stroke%3D%22%23c8c0b0%22%20stroke-width%3D%223%22%20opacity%3D%22.4%22%2F%3E%20%3C%21--%20left%20column%20--%3E%20%3Crect%20x%3D%224%22%20y%3D%2222%22%20width%3D%2212%22%20height%3D%2256%22%20fill%3D%22%23d8d0c0%22%20stroke%3D%22%23908870%22%20stroke-width%3D%221.2%22%2F%3E%20%3Cpath%20d%3D%22M6%2030v40M10%2028v44M14%2030v40%22%20stroke%3D%22%23b0a890%22%20stroke-width%3D%221%22%20opacity%3D%22.7%22%2F%3E%20%3Crect%20x%3D%222%22%20y%3D%2214%22%20width%3D%2216%22%20height%3D%2210%22%20rx%3D%221%22%20fill%3D%22%23e8e0d0%22%20stroke%3D%22%23908870%22%2F%3E%20%3Crect%20x%3D%221%22%20y%3D%2210%22%20width%3D%2218%22%20height%3D%225%22%20rx%3D%221%22%20fill%3D%22%23f0e8d8%22%20stroke%3D%22%23908870%22%2F%3E%20%3Crect%20x%3D%222%22%20y%3D%2276%22%20width%3D%2216%22%20height%3D%228%22%20fill%3D%22%23e8e0d0%22%20stroke%3D%22%23908870%22%2F%3E%20%3Crect%20x%3D%221%22%20y%3D%2284%22%20width%3D%2218%22%20height%3D%226%22%20rx%3D%221%22%20fill%3D%22%23f0e8d8%22%20stroke%3D%22%23908870%22%2F%3E%20%3C%21--%20right%20column%20--%3E%20%3Crect%20x%3D%2284%22%20y%3D%2222%22%20width%3D%2212%22%20height%3D%2256%22%20fill%3D%22%23d8d0c0%22%20stroke%3D%22%23908870%22%20stroke-width%3D%221.2%22%2F%3E%20%3Cpath%20d%3D%22M86%2030v40M90%2028v44M94%2030v40%22%20stroke%3D%22%23b0a890%22%20stroke-width%3D%221%22%20opacity%3D%22.7%22%2F%3E%20%3Crect%20x%3D%2282%22%20y%3D%2214%22%20width%3D%2216%22%20height%3D%2210%22%20rx%3D%221%22%20fill%3D%22%23e8e0d0%22%20stroke%3D%22%23908870%22%2F%3E%20%3Crect%20x%3D%2281%22%20y%3D%2210%22%20width%3D%2218%22%20height%3D%225%22%20rx%3D%221%22%20fill%3D%22%23f0e8d8%22%20stroke%3D%22%23908870%22%2F%3E%20%3Crect%20x%3D%2282%22%20y%3D%2276%22%20width%3D%2216%22%20height%3D%228%22%20fill%3D%22%23e8e0d0%22%20stroke%3D%22%23908870%22%2F%3E%20%3Crect%20x%3D%2281%22%20y%3D%2284%22%20width%3D%2218%22%20height%3D%226%22%20rx%3D%221%22%20fill%3D%22%23f0e8d8%22%20stroke%3D%22%23908870%22%2F%3E%20%3C%21--%20pediment%20top%20--%3E%20%3Cpath%20d%3D%22M22%2012h56l-6-8H28z%22%20fill%3D%22%23e8e0d0%22%20stroke%3D%22%23908870%22%20stroke-width%3D%221.2%22%2F%3E%20%3C%2Fsvg%3E");
}

/* frame-ark */
#account-avatar-btn.frame-ark.has-frame .avatar,
#account-avatar-btn.frame-ark.has-frame #account-home-avatar {
  box-shadow: 0 0 0 4px #a07040, 0 0 0 8px rgba(140,90,40,0.4);
  border-radius: 20% 20% 40% 40%;
}
.gacha-reward-frame.frame-ark.has-frame > .avatar {
  box-shadow: 0 0 0 4px #a07040, 0 0 0 8px rgba(140,90,40,0.4);
  border-radius: 20% 20% 40% 40%;
}
.avatar-crop-deco.frame-ark.has-frame {
  box-shadow: 0 0 0 4px #a07040, 0 0 0 8px rgba(140,90,40,0.4);
  border-radius: 20% 20% 40% 40%;
}
.crop-frame-icon-av.has-frame.frame-ark > .avatar {
  box-shadow: 0 0 0 2px #a07040, 0 0 0 4px rgba(140,90,40,0.4);
  border-radius: 20% 20% 40% 40%;
}
.avatar-cosmetic-wrap.has-frame.frame-ark::before,
#account-avatar-btn.frame-ark.has-frame::before,
.avatar-crop-deco.frame-ark.has-frame::before,
.crop-frame-icon-av.frame-ark.has-frame::before,
.gacha-reward-frame.frame-ark.has-frame::before,
.unlock-carousel-frame-av.frame-ark.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-ark::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22none%22%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2248%22%20r%3D%2238%22%20stroke%3D%22%23a07040%22%20stroke-width%3D%224%22%20opacity%3D%22.4%22%2F%3E%20%3C%21--%20canopy%20%2F%20sky%20arcs%20above%20%28outside%29%20--%3E%20%3Cpath%20d%3D%22M18%2022c10-14%2054-14%2064%200%22%20stroke%3D%22%23c09050%22%20stroke-width%3D%223.5%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M24%2016c8-8%2044-8%2052%200%22%20stroke%3D%22%23e0b070%22%20stroke-width%3D%222%22%20fill%3D%22none%22%20opacity%3D%22.8%22%2F%3E%20%3C%21--%20hull%20fully%20below%20crop%20--%3E%20%3Cpath%20d%3D%22M12%2078c8%2014%2068%2014%2076%200l-6%2014H18z%22%20fill%3D%22%238a5a28%22%20stroke%3D%22%235a3010%22%20stroke-width%3D%221.4%22%2F%3E%20%3Cpath%20d%3D%22M16%2078h68%22%20stroke%3D%22%23c09050%22%20stroke-width%3D%222%22%2F%3E%20%3Cpath%20d%3D%22M22%2084h56M28%2090h44%22%20stroke%3D%22%236a4018%22%20stroke-width%3D%221.2%22%20opacity%3D%22.6%22%2F%3E%20%3C%21--%20side%20posts%20--%3E%20%3Crect%20x%3D%226%22%20y%3D%2240%22%20width%3D%228%22%20height%3D%2238%22%20rx%3D%221%22%20fill%3D%22%23a07040%22%20stroke%3D%22%235a3010%22%2F%3E%20%3Crect%20x%3D%2286%22%20y%3D%2240%22%20width%3D%228%22%20height%3D%2238%22%20rx%3D%221%22%20fill%3D%22%23a07040%22%20stroke%3D%22%235a3010%22%2F%3E%20%3Ccircle%20cx%3D%2210%22%20cy%3D%2238%22%20r%3D%223%22%20fill%3D%22%23c09050%22%20stroke%3D%22%235a3010%22%2F%3E%3Ccircle%20cx%3D%2290%22%20cy%3D%2238%22%20r%3D%223%22%20fill%3D%22%23c09050%22%20stroke%3D%22%235a3010%22%2F%3E%20%3C%21--%20tiny%20dove%20hint%20top%20--%3E%20%3Cpath%20d%3D%22M50%204c4%202%208%202%2010%200-2%204-6%206-10%206s-8-2-10-6c2%202%206%202%2010%200z%22%20fill%3D%22%23e8d8b0%22%20stroke%3D%22%238a6a30%22%20stroke-width%3D%22.9%22%2F%3E%20%3C%2Fsvg%3E");
}

/* frame-marble */
#account-avatar-btn.frame-marble.has-frame .avatar,
#account-avatar-btn.frame-marble.has-frame #account-home-avatar {
  box-shadow: 0 0 0 4px #e0e4e8, 0 0 0 8px rgba(160,170,180,0.45);
}
.gacha-reward-frame.frame-marble.has-frame > .avatar {
  box-shadow: 0 0 0 4px #e0e4e8, 0 0 0 8px rgba(160,170,180,0.45);
}
.avatar-crop-deco.frame-marble.has-frame {
  box-shadow: 0 0 0 4px #e0e4e8, 0 0 0 8px rgba(160,170,180,0.45);
}
.crop-frame-icon-av.has-frame.frame-marble > .avatar {
  box-shadow: 0 0 0 2px #e0e4e8, 0 0 0 4px rgba(160,170,180,0.45);
}
.avatar-cosmetic-wrap.has-frame.frame-marble::before,
#account-avatar-btn.frame-marble.has-frame::before,
.avatar-crop-deco.frame-marble.has-frame::before,
.crop-frame-icon-av.frame-marble.has-frame::before,
.gacha-reward-frame.frame-marble.has-frame::before,
.unlock-carousel-frame-av.frame-marble.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-marble::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22none%22%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2241%22%20stroke%3D%22%23e0e4e8%22%20stroke-width%3D%228%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2235.5%22%20stroke%3D%22%23a0a8b0%22%20stroke-width%3D%221.8%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2245%22%20stroke%3D%22%23f4f6f8%22%20stroke-width%3D%221.4%22%20opacity%3D%22.7%22%2F%3E%20%3C%21--%20gray%20vein%20etchings%20on%20rim%20--%3E%20%3Cpath%20d%3D%22M20%2022c8%206%2012%204%2018-2M62%2018c6%204%2014%206%2018%202%22%20stroke%3D%22%239098a0%22%20stroke-width%3D%221.3%22%20opacity%3D%22.65%22%2F%3E%20%3Cpath%20d%3D%22M18%2070c6-4%2014-2%2020%204M64%2078c8-4%2014-6%2020-2%22%20stroke%3D%22%239098a0%22%20stroke-width%3D%221.3%22%20opacity%3D%22.65%22%2F%3E%20%3Cpath%20d%3D%22M10%2042c4%206%204%2012%200%2018M90%2042c-4%206-4%2012%200%2018%22%20stroke%3D%22%23a8b0b8%22%20stroke-width%3D%221.2%22%20opacity%3D%22.55%22%2F%3E%20%3C%21--%20corner%20finials%20--%3E%20%3Crect%20x%3D%2214%22%20y%3D%2214%22%20width%3D%228%22%20height%3D%228%22%20rx%3D%221%22%20fill%3D%22%23f4f6f8%22%20stroke%3D%22%23808890%22%20transform%3D%22rotate%2845%2018%2018%29%22%2F%3E%20%3Crect%20x%3D%2278%22%20y%3D%2214%22%20width%3D%228%22%20height%3D%228%22%20rx%3D%221%22%20fill%3D%22%23f4f6f8%22%20stroke%3D%22%23808890%22%20transform%3D%22rotate%2845%2082%2018%29%22%2F%3E%20%3Crect%20x%3D%2214%22%20y%3D%2278%22%20width%3D%228%22%20height%3D%228%22%20rx%3D%221%22%20fill%3D%22%23f4f6f8%22%20stroke%3D%22%23808890%22%20transform%3D%22rotate%2845%2018%2082%29%22%2F%3E%20%3Crect%20x%3D%2278%22%20y%3D%2278%22%20width%3D%228%22%20height%3D%228%22%20rx%3D%221%22%20fill%3D%22%23f4f6f8%22%20stroke%3D%22%23808890%22%20transform%3D%22rotate%2845%2082%2082%29%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%228%22%20r%3D%223.5%22%20fill%3D%22%23f4f6f8%22%20stroke%3D%22%23808890%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2292%22%20r%3D%223.5%22%20fill%3D%22%23f4f6f8%22%20stroke%3D%22%23808890%22%2F%3E%20%3Ccircle%20cx%3D%228%22%20cy%3D%2250%22%20r%3D%223.5%22%20fill%3D%22%23f4f6f8%22%20stroke%3D%22%23808890%22%2F%3E%3Ccircle%20cx%3D%2292%22%20cy%3D%2250%22%20r%3D%223.5%22%20fill%3D%22%23f4f6f8%22%20stroke%3D%22%23808890%22%2F%3E%20%3C%2Fsvg%3E");
}

/* frame-copper */
#account-avatar-btn.frame-copper.has-frame .avatar,
#account-avatar-btn.frame-copper.has-frame #account-home-avatar {
  box-shadow: 0 0 0 4px #b87333, 0 0 0 8px rgba(180,110,50,0.45);
}
.gacha-reward-frame.frame-copper.has-frame > .avatar {
  box-shadow: 0 0 0 4px #b87333, 0 0 0 8px rgba(180,110,50,0.45);
}
.avatar-crop-deco.frame-copper.has-frame {
  box-shadow: 0 0 0 4px #b87333, 0 0 0 8px rgba(180,110,50,0.45);
}
.crop-frame-icon-av.has-frame.frame-copper > .avatar {
  box-shadow: 0 0 0 2px #b87333, 0 0 0 4px rgba(180,110,50,0.45);
}
.avatar-cosmetic-wrap.has-frame.frame-copper::before,
#account-avatar-btn.frame-copper.has-frame::before,
.avatar-crop-deco.frame-copper.has-frame::before,
.crop-frame-icon-av.frame-copper.has-frame::before,
.gacha-reward-frame.frame-copper.has-frame::before,
.unlock-carousel-frame-av.frame-copper.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-copper::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22none%22%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2241%22%20stroke%3D%22%23b87333%22%20stroke-width%3D%228%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2235.5%22%20stroke%3D%22%237a4018%22%20stroke-width%3D%222%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2245%22%20stroke%3D%22%23d4956a%22%20stroke-width%3D%221.5%22%20opacity%3D%22.7%22%2F%3E%20%3C%21--%20patina%20arcs%20outer%20--%3E%20%3Cpath%20d%3D%22M16%2030c10-16%2058-16%2068%200%22%20stroke%3D%22%235a9a70%22%20stroke-width%3D%222%22%20opacity%3D%22.55%22%20fill%3D%22none%22%2F%3E%20%3Cpath%20d%3D%22M16%2070c10%2016%2058%2016%2068%200%22%20stroke%3D%22%235a9a70%22%20stroke-width%3D%221.6%22%20opacity%3D%22.4%22%20fill%3D%22none%22%2F%3E%20%3C%21--%20finials%20--%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%228%22%20r%3D%225%22%20fill%3D%22%23d4956a%22%20stroke%3D%22%237a4018%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%228%22%20r%3D%222%22%20fill%3D%22%23e8b888%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2292%22%20r%3D%225%22%20fill%3D%22%23d4956a%22%20stroke%3D%22%237a4018%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2292%22%20r%3D%222%22%20fill%3D%22%23e8b888%22%2F%3E%20%3Ccircle%20cx%3D%228%22%20cy%3D%2250%22%20r%3D%225%22%20fill%3D%22%23d4956a%22%20stroke%3D%22%237a4018%22%2F%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2250%22%20r%3D%222%22%20fill%3D%22%23e8b888%22%2F%3E%20%3Ccircle%20cx%3D%2292%22%20cy%3D%2250%22%20r%3D%225%22%20fill%3D%22%23d4956a%22%20stroke%3D%22%237a4018%22%2F%3E%3Ccircle%20cx%3D%2292%22%20cy%3D%2250%22%20r%3D%222%22%20fill%3D%22%23e8b888%22%2F%3E%20%3Ccircle%20cx%3D%2218%22%20cy%3D%2218%22%20r%3D%223%22%20fill%3D%22%23c88850%22%20stroke%3D%22%237a4018%22%2F%3E%3Ccircle%20cx%3D%2282%22%20cy%3D%2218%22%20r%3D%223%22%20fill%3D%22%23c88850%22%20stroke%3D%22%237a4018%22%2F%3E%20%3Ccircle%20cx%3D%2218%22%20cy%3D%2282%22%20r%3D%223%22%20fill%3D%22%23c88850%22%20stroke%3D%22%237a4018%22%2F%3E%3Ccircle%20cx%3D%2282%22%20cy%3D%2282%22%20r%3D%223%22%20fill%3D%22%23c88850%22%20stroke%3D%22%237a4018%22%2F%3E%20%3C%2Fsvg%3E");
}

/* frame-pearl */
#account-avatar-btn.frame-pearl.has-frame .avatar,
#account-avatar-btn.frame-pearl.has-frame #account-home-avatar {
  box-shadow: 0 0 0 4px #f0e8f0, 0 0 0 8px rgba(220,200,220,0.5), 0 0 12px rgba(255,240,255,0.35);
}
.gacha-reward-frame.frame-pearl.has-frame > .avatar {
  box-shadow: 0 0 0 4px #f0e8f0, 0 0 0 8px rgba(220,200,220,0.5), 0 0 12px rgba(255,240,255,0.35);
}
.avatar-crop-deco.frame-pearl.has-frame {
  box-shadow: 0 0 0 4px #f0e8f0, 0 0 0 8px rgba(220,200,220,0.5), 0 0 12px rgba(255,240,255,0.35);
}
.crop-frame-icon-av.has-frame.frame-pearl > .avatar {
  box-shadow: 0 0 0 2px #f0e8f0, 0 0 0 4px rgba(220,200,220,0.5), 0 0 12px rgba(255,240,255,0.35);
}
.avatar-cosmetic-wrap.has-frame.frame-pearl::before,
#account-avatar-btn.frame-pearl.has-frame::before,
.avatar-crop-deco.frame-pearl.has-frame::before,
.crop-frame-icon-av.frame-pearl.has-frame::before,
.gacha-reward-frame.frame-pearl.has-frame::before,
.unlock-carousel-frame-av.frame-pearl.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-pearl::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22none%22%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2240%22%20stroke%3D%22%23e8d8e8%22%20stroke-width%3D%225.5%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2236%22%20stroke%3D%22%23c8b0c8%22%20stroke-width%3D%221.4%22%20stroke-dasharray%3D%222%202.5%22%20opacity%3D%22.7%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2244%22%20stroke%3D%22%23f8f0f8%22%20stroke-width%3D%221.3%22%20opacity%3D%22.6%22%2F%3E%20%3C%21--%20pearl%20orbs%20--%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%226%22%20r%3D%226%22%20fill%3D%22%23f8f0f8%22%20stroke%3D%22%23c0a8c0%22%2F%3E%3Ccircle%20cx%3D%2248%22%20cy%3D%224%22%20r%3D%221.8%22%20fill%3D%22%23fff%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2294%22%20r%3D%226%22%20fill%3D%22%23f8f0f8%22%20stroke%3D%22%23c0a8c0%22%2F%3E%3Ccircle%20cx%3D%2248%22%20cy%3D%2292%22%20r%3D%221.8%22%20fill%3D%22%23fff%22%2F%3E%20%3Ccircle%20cx%3D%226%22%20cy%3D%2250%22%20r%3D%226%22%20fill%3D%22%23f8f0f8%22%20stroke%3D%22%23c0a8c0%22%2F%3E%3Ccircle%20cx%3D%224%22%20cy%3D%2248%22%20r%3D%221.8%22%20fill%3D%22%23fff%22%2F%3E%20%3Ccircle%20cx%3D%2294%22%20cy%3D%2250%22%20r%3D%226%22%20fill%3D%22%23f8f0f8%22%20stroke%3D%22%23c0a8c0%22%2F%3E%3Ccircle%20cx%3D%2292%22%20cy%3D%2248%22%20r%3D%221.8%22%20fill%3D%22%23fff%22%2F%3E%20%3Ccircle%20cx%3D%2216%22%20cy%3D%2216%22%20r%3D%224.5%22%20fill%3D%22%23f0e4f0%22%20stroke%3D%22%23c0a8c0%22%2F%3E%3Ccircle%20cx%3D%2284%22%20cy%3D%2216%22%20r%3D%224.5%22%20fill%3D%22%23f0e4f0%22%20stroke%3D%22%23c0a8c0%22%2F%3E%20%3Ccircle%20cx%3D%2216%22%20cy%3D%2284%22%20r%3D%224.5%22%20fill%3D%22%23f0e4f0%22%20stroke%3D%22%23c0a8c0%22%2F%3E%3Ccircle%20cx%3D%2284%22%20cy%3D%2284%22%20r%3D%224.5%22%20fill%3D%22%23f0e4f0%22%20stroke%3D%22%23c0a8c0%22%2F%3E%20%3Ccircle%20cx%3D%2228%22%20cy%3D%226%22%20r%3D%222.5%22%20fill%3D%22%23f8f0f8%22%2F%3E%3Ccircle%20cx%3D%2272%22%20cy%3D%226%22%20r%3D%222.5%22%20fill%3D%22%23f8f0f8%22%2F%3E%20%3C%2Fsvg%3E");
}

/* frame-jade */
#account-avatar-btn.frame-jade.has-frame .avatar,
#account-avatar-btn.frame-jade.has-frame #account-home-avatar {
  box-shadow: 0 0 0 4px #3a8a6a, 0 0 0 8px rgba(50,130,100,0.45);
}
.gacha-reward-frame.frame-jade.has-frame > .avatar {
  box-shadow: 0 0 0 4px #3a8a6a, 0 0 0 8px rgba(50,130,100,0.45);
}
.avatar-crop-deco.frame-jade.has-frame {
  box-shadow: 0 0 0 4px #3a8a6a, 0 0 0 8px rgba(50,130,100,0.45);
}
.crop-frame-icon-av.has-frame.frame-jade > .avatar {
  box-shadow: 0 0 0 2px #3a8a6a, 0 0 0 4px rgba(50,130,100,0.45);
}
.avatar-cosmetic-wrap.has-frame.frame-jade::before,
#account-avatar-btn.frame-jade.has-frame::before,
.avatar-crop-deco.frame-jade.has-frame::before,
.crop-frame-icon-av.frame-jade.has-frame::before,
.gacha-reward-frame.frame-jade.has-frame::before,
.unlock-carousel-frame-av.frame-jade.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-jade::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22none%22%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2241%22%20stroke%3D%22%233a8a6a%22%20stroke-width%3D%228%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2235.5%22%20stroke%3D%22%231a5a40%22%20stroke-width%3D%222%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2245%22%20stroke%3D%22%2370c0a0%22%20stroke-width%3D%221.5%22%20opacity%3D%22.7%22%2F%3E%20%3C%21--%20carved%20notch%20marks%20--%3E%20%3Cpath%20d%3D%22M46%204h8v6h-8z%22%20fill%3D%22%2370c0a0%22%20stroke%3D%22%231a5a40%22%2F%3E%3Cpath%20d%3D%22M46%2090h8v6h-8z%22%20fill%3D%22%2370c0a0%22%20stroke%3D%22%231a5a40%22%2F%3E%20%3Cpath%20d%3D%22M4%2046h6v8H4z%22%20fill%3D%22%2370c0a0%22%20stroke%3D%22%231a5a40%22%2F%3E%3Cpath%20d%3D%22M90%2046h6v8h-6z%22%20fill%3D%22%2370c0a0%22%20stroke%3D%22%231a5a40%22%2F%3E%20%3Cpath%20d%3D%22M16%2014l6%203-3%206-5-4z%22%20fill%3D%22%2350a080%22%20stroke%3D%22%231a5a40%22%2F%3E%3Cpath%20d%3D%22M84%2014l-6%203%203%206%205-4z%22%20fill%3D%22%2350a080%22%20stroke%3D%22%231a5a40%22%2F%3E%20%3Cpath%20d%3D%22M16%2086l6-3-3-6-5%204z%22%20fill%3D%22%2350a080%22%20stroke%3D%22%231a5a40%22%2F%3E%3Cpath%20d%3D%22M84%2086l-6-3%203-6%205%204z%22%20fill%3D%22%2350a080%22%20stroke%3D%22%231a5a40%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2212%22%20r%3D%223%22%20fill%3D%22%2390d8b8%22%2F%3E%3Ccircle%20cx%3D%2250%22%20cy%3D%2288%22%20r%3D%223%22%20fill%3D%22%2390d8b8%22%2F%3E%20%3Ccircle%20cx%3D%2212%22%20cy%3D%2250%22%20r%3D%223%22%20fill%3D%22%2390d8b8%22%2F%3E%3Ccircle%20cx%3D%2288%22%20cy%3D%2250%22%20r%3D%223%22%20fill%3D%22%2390d8b8%22%2F%3E%20%3C%2Fsvg%3E");
}

/* frame-onyx */
#account-avatar-btn.frame-onyx.has-frame .avatar,
#account-avatar-btn.frame-onyx.has-frame #account-home-avatar {
  box-shadow: 0 0 0 4px #2a2a30, 0 0 0 8px rgba(20,20,28,0.55), inset 0 0 0 2px #505058;
}
.gacha-reward-frame.frame-onyx.has-frame > .avatar {
  box-shadow: 0 0 0 4px #2a2a30, 0 0 0 8px rgba(20,20,28,0.55), inset 0 0 0 2px #505058;
}
.avatar-crop-deco.frame-onyx.has-frame {
  box-shadow: 0 0 0 4px #2a2a30, 0 0 0 8px rgba(20,20,28,0.55), inset 0 0 0 2px #505058;
}
.crop-frame-icon-av.has-frame.frame-onyx > .avatar {
  box-shadow: 0 0 0 2px #2a2a30, 0 0 0 4px rgba(20,20,28,0.55), inset 0 0 0 2px #505058;
}
.avatar-cosmetic-wrap.has-frame.frame-onyx::before,
#account-avatar-btn.frame-onyx.has-frame::before,
.avatar-crop-deco.frame-onyx.has-frame::before,
.crop-frame-icon-av.frame-onyx.has-frame::before,
.gacha-reward-frame.frame-onyx.has-frame::before,
.unlock-carousel-frame-av.frame-onyx.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-onyx::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22none%22%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2241%22%20stroke%3D%22%232a2a30%22%20stroke-width%3D%228%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2235.5%22%20stroke%3D%22%23505058%22%20stroke-width%3D%222.2%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2245%22%20stroke%3D%22%23101018%22%20stroke-width%3D%221.6%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2241%22%20stroke%3D%22%23606068%22%20stroke-width%3D%221%22%20stroke-dasharray%3D%221%202.5%22%20opacity%3D%22.7%22%2F%3E%20%3C%21--%20bevel%20ridges%20%2F%20finials%20--%3E%20%3Crect%20x%3D%2246%22%20y%3D%221%22%20width%3D%228%22%20height%3D%229%22%20rx%3D%221%22%20fill%3D%22%23404048%22%20stroke%3D%22%23808088%22%2F%3E%20%3Crect%20x%3D%2246%22%20y%3D%2290%22%20width%3D%228%22%20height%3D%229%22%20rx%3D%221%22%20fill%3D%22%23404048%22%20stroke%3D%22%23808088%22%2F%3E%20%3Crect%20x%3D%221%22%20y%3D%2246%22%20width%3D%229%22%20height%3D%228%22%20rx%3D%221%22%20fill%3D%22%23404048%22%20stroke%3D%22%23808088%22%2F%3E%20%3Crect%20x%3D%2290%22%20y%3D%2246%22%20width%3D%229%22%20height%3D%228%22%20rx%3D%221%22%20fill%3D%22%23404048%22%20stroke%3D%22%23808088%22%2F%3E%20%3Ccircle%20cx%3D%2218%22%20cy%3D%2218%22%20r%3D%223.5%22%20fill%3D%22%233a3a42%22%20stroke%3D%22%23909098%22%2F%3E%3Ccircle%20cx%3D%2282%22%20cy%3D%2218%22%20r%3D%223.5%22%20fill%3D%22%233a3a42%22%20stroke%3D%22%23909098%22%2F%3E%20%3Ccircle%20cx%3D%2218%22%20cy%3D%2282%22%20r%3D%223.5%22%20fill%3D%22%233a3a42%22%20stroke%3D%22%23909098%22%2F%3E%3Ccircle%20cx%3D%2282%22%20cy%3D%2282%22%20r%3D%223.5%22%20fill%3D%22%233a3a42%22%20stroke%3D%22%23909098%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%228%22%20r%3D%222%22%20fill%3D%22%23a0a0a8%22%2F%3E%3Ccircle%20cx%3D%228%22%20cy%3D%2250%22%20r%3D%222%22%20fill%3D%22%23a0a0a8%22%2F%3E%20%3C%2Fsvg%3E");
}

/* frame-rose-gold */
#account-avatar-btn.frame-rose-gold.has-frame .avatar,
#account-avatar-btn.frame-rose-gold.has-frame #account-home-avatar {
  box-shadow: 0 0 0 4px #e0a090, 0 0 0 8px rgba(200,130,120,0.45), 0 0 12px rgba(255,180,170,0.3);
}
.gacha-reward-frame.frame-rose-gold.has-frame > .avatar {
  box-shadow: 0 0 0 4px #e0a090, 0 0 0 8px rgba(200,130,120,0.45), 0 0 12px rgba(255,180,170,0.3);
}
.avatar-crop-deco.frame-rose-gold.has-frame {
  box-shadow: 0 0 0 4px #e0a090, 0 0 0 8px rgba(200,130,120,0.45), 0 0 12px rgba(255,180,170,0.3);
}
.crop-frame-icon-av.has-frame.frame-rose-gold > .avatar {
  box-shadow: 0 0 0 2px #e0a090, 0 0 0 4px rgba(200,130,120,0.45), 0 0 12px rgba(255,180,170,0.3);
}
.avatar-cosmetic-wrap.has-frame.frame-rose-gold::before,
#account-avatar-btn.frame-rose-gold.has-frame::before,
.avatar-crop-deco.frame-rose-gold.has-frame::before,
.crop-frame-icon-av.frame-rose-gold.has-frame::before,
.gacha-reward-frame.frame-rose-gold.has-frame::before,
.unlock-carousel-frame-av.frame-rose-gold.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-rose-gold::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22none%22%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2241%22%20stroke%3D%22%23e0a090%22%20stroke-width%3D%228%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2235.5%22%20stroke%3D%22%23c07060%22%20stroke-width%3D%221.8%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2245%22%20stroke%3D%22%23f0c0b0%22%20stroke-width%3D%221.5%22%20opacity%3D%22.7%22%2F%3E%20%3C%21--%20floral%20star%20crest%20top%20--%3E%20%3Cpath%20d%3D%22M50%201l4%207.5h8l-6.5%205%202.5%208L50%2017l-8%204.5%202.5-8-6.5-5h8z%22%20fill%3D%22%23f0c8b8%22%20stroke%3D%22%23c07060%22%20stroke-width%3D%221.1%22%2F%3E%20%3Cpath%20d%3D%22M34%206c5%203%2010%203%2016%200M50%206c5%203%2010%203%2016%200%22%20stroke%3D%22%23f0c0b0%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%20opacity%3D%22.85%22%2F%3E%20%3C%21--%20petal%20tips%20%2F%20jewels%20--%3E%20%3Ccircle%20cx%3D%2210%22%20cy%3D%2250%22%20r%3D%224.5%22%20fill%3D%22%23f0c0b0%22%20stroke%3D%22%23c07060%22%2F%3E%3Ccircle%20cx%3D%2290%22%20cy%3D%2250%22%20r%3D%224.5%22%20fill%3D%22%23f0c0b0%22%20stroke%3D%22%23c07060%22%2F%3E%20%3Ccircle%20cx%3D%2220%22%20cy%3D%2218%22%20r%3D%223.2%22%20fill%3D%22%23f0c0b0%22%20stroke%3D%22%23c07060%22%2F%3E%3Ccircle%20cx%3D%2280%22%20cy%3D%2218%22%20r%3D%223.2%22%20fill%3D%22%23f0c0b0%22%20stroke%3D%22%23c07060%22%2F%3E%20%3Ccircle%20cx%3D%2220%22%20cy%3D%2282%22%20r%3D%223.2%22%20fill%3D%22%23f0c0b0%22%20stroke%3D%22%23c07060%22%2F%3E%3Ccircle%20cx%3D%2280%22%20cy%3D%2282%22%20r%3D%223.2%22%20fill%3D%22%23f0c0b0%22%20stroke%3D%22%23c07060%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2292%22%20r%3D%224%22%20fill%3D%22%23f0c8b8%22%20stroke%3D%22%23c07060%22%2F%3E%20%3Cpath%20d%3D%22M46%2088l4-5%204%205%22%20fill%3D%22%23e0a090%22%20stroke%3D%22%23c07060%22%20stroke-width%3D%22.9%22%2F%3E%20%3C%2Fsvg%3E");
}

.avatar-crop-hole.has-frame.frame-scroll { border-radius: 18% / 22%; }
.avatar-crop-hole.has-frame.frame-ribbon { border-radius: 22% / 28%; }
.avatar-crop-hole.has-frame.frame-stone { border-radius: 12%; }
.avatar-crop-hole.has-frame.frame-cedar { border-radius: 8%; }
.avatar-crop-hole.has-frame.frame-ark { border-radius: 20% 20% 40% 40%; }

html.theme-desert-dawn {
  --ink: #1a1208;
  --ink-2: #24180c;
  --paper: #2e2010;
  --paper-2: #3a2a14;
  --line: rgba(255,200,120,0.14);
  --text: #fff6e8;
  --muted: #e0c49a;
  --faint: #b8966e;
  --gold: #e8a050;
  --gold-soft: rgba(232,160,80,0.18);
}
.unlock-card.unlock-card-theme.theme-desert-dawn,
.shop-item.shop-item-theme.theme-desert-dawn {
  background: linear-gradient(165deg, #3a2a14 0%, #2e2010 100%);
  border-color: rgba(255,200,120,0.35);
  color: #fff6e8;
}
.unlock-theme-swatch[data-theme="theme-desert-dawn"],
.gacha-reward-theme[data-theme="theme-desert-dawn"] {
  background: linear-gradient(135deg, rgba(232,160,80,0.5), rgba(180,100,40,0.55));
  border-color: rgba(255,200,120,0.35);
}

html.theme-deep-indigo {
  --ink: #0a0c18;
  --ink-2: #101428;
  --paper: #161c3a;
  --paper-2: #1e2648;
  --line: rgba(140,160,255,0.14);
  --text: #eef0ff;
  --muted: #a8b0d8;
  --faint: #7880ab;
  --gold: #8a9aff;
  --gold-soft: rgba(138,154,255,0.16);
}
.unlock-card.unlock-card-theme.theme-deep-indigo,
.shop-item.shop-item-theme.theme-deep-indigo {
  background: linear-gradient(165deg, #1e2648 0%, #161c3a 100%);
  border-color: rgba(140,160,255,0.35);
  color: #eef0ff;
}
.unlock-theme-swatch[data-theme="theme-deep-indigo"],
.gacha-reward-theme[data-theme="theme-deep-indigo"] {
  background: linear-gradient(135deg, rgba(90,100,200,0.5), rgba(40,50,120,0.55));
  border-color: rgba(140,160,255,0.35);
}

html.theme-olive-grove {
  --ink: #101408;
  --ink-2: #181e0c;
  --paper: #242c14;
  --paper-2: #2e3818;
  --line: rgba(180,200,100,0.14);
  --text: #f4fae8;
  --muted: #c0cc98;
  --faint: #8e9a68;
  --gold: #b8c860;
  --gold-soft: rgba(184,200,96,0.16);
}
.unlock-card.unlock-card-theme.theme-olive-grove,
.shop-item.shop-item-theme.theme-olive-grove {
  background: linear-gradient(165deg, #2e3818 0%, #242c14 100%);
  border-color: rgba(180,200,100,0.35);
  color: #f4fae8;
}
.unlock-theme-swatch[data-theme="theme-olive-grove"],
.gacha-reward-theme[data-theme="theme-olive-grove"] {
  background: linear-gradient(135deg, rgba(140,160,60,0.5), rgba(80,100,30,0.55));
  border-color: rgba(180,200,100,0.35);
}

html.theme-clay-pot {
  --ink: #1a100c;
  --ink-2: #24160f;
  --paper: #2e1c14;
  --paper-2: #3a2518;
  --line: rgba(220,160,120,0.14);
  --text: #fff4ec;
  --muted: #d8b098;
  --faint: #a88068;
  --gold: #d08050;
  --gold-soft: rgba(208,128,80,0.18);
}
.unlock-card.unlock-card-theme.theme-clay-pot,
.shop-item.shop-item-theme.theme-clay-pot {
  background: linear-gradient(165deg, #3a2518 0%, #2e1c14 100%);
  border-color: rgba(220,160,120,0.35);
  color: #fff4ec;
}
.unlock-theme-swatch[data-theme="theme-clay-pot"],
.gacha-reward-theme[data-theme="theme-clay-pot"] {
  background: linear-gradient(135deg, rgba(200,110,70,0.5), rgba(120,60,30,0.55));
  border-color: rgba(220,160,120,0.35);
}

html.theme-sea-glass {
  --ink: #081414;
  --ink-2: #0c1c1c;
  --paper: #142828;
  --paper-2: #1a3434;
  --line: rgba(120,220,200,0.14);
  --text: #e8fffa;
  --muted: #98d0c4;
  --faint: #6a9a90;
  --gold: #5ec8b0;
  --gold-soft: rgba(94,200,176,0.16);
}
.unlock-card.unlock-card-theme.theme-sea-glass,
.shop-item.shop-item-theme.theme-sea-glass {
  background: linear-gradient(165deg, #1a3434 0%, #142828 100%);
  border-color: rgba(120,220,200,0.35);
  color: #e8fffa;
}
.unlock-theme-swatch[data-theme="theme-sea-glass"],
.gacha-reward-theme[data-theme="theme-sea-glass"] {
  background: linear-gradient(135deg, rgba(60,180,160,0.5), rgba(30,100,90,0.55));
  border-color: rgba(120,220,200,0.35);
}

html.theme-candlelight {
  --ink: #1a1008;
  --ink-2: #24160a;
  --paper: #2e1c0e;
  --paper-2: #3a2412;
  --line: rgba(255,200,100,0.14);
  --text: #fff8e8;
  --muted: #e0c080;
  --faint: #b09050;
  --gold: #f0b040;
  --gold-soft: rgba(240,176,64,0.18);
}
.unlock-card.unlock-card-theme.theme-candlelight,
.shop-item.shop-item-theme.theme-candlelight {
  background: linear-gradient(165deg, #3a2412 0%, #2e1c0e 100%);
  border-color: rgba(255,200,100,0.35);
  color: #fff8e8;
}
.unlock-theme-swatch[data-theme="theme-candlelight"],
.gacha-reward-theme[data-theme="theme-candlelight"] {
  background: linear-gradient(135deg, rgba(240,160,50,0.5), rgba(160,80,20,0.55));
  border-color: rgba(255,200,100,0.35);
}

html.theme-mountain-mist {
  --ink: #0c1014;
  --ink-2: #141a20;
  --paper: #1c2830;
  --paper-2: #243440;
  --line: rgba(160,190,210,0.14);
  --text: #eef6fa;
  --muted: #a8c0d0;
  --faint: #7890a0;
  --gold: #90b8d0;
  --gold-soft: rgba(144,184,208,0.16);
}
.unlock-card.unlock-card-theme.theme-mountain-mist,
.shop-item.shop-item-theme.theme-mountain-mist {
  background: linear-gradient(165deg, #243440 0%, #1c2830 100%);
  border-color: rgba(160,190,210,0.35);
  color: #eef6fa;
}
.unlock-theme-swatch[data-theme="theme-mountain-mist"],
.gacha-reward-theme[data-theme="theme-mountain-mist"] {
  background: linear-gradient(135deg, rgba(120,160,190,0.5), rgba(50,80,100,0.55));
  border-color: rgba(160,190,210,0.35);
}

html.theme-vineyard-rose {
  --ink: #180c10;
  --ink-2: #221418;
  --paper: #2e1a22;
  --paper-2: #3a222c;
  --line: rgba(230,140,170,0.14);
  --text: #fff0f4;
  --muted: #d8a0b0;
  --faint: #a87080;
  --gold: #e080a0;
  --gold-soft: rgba(224,128,160,0.16);
}
.unlock-card.unlock-card-theme.theme-vineyard-rose,
.shop-item.shop-item-theme.theme-vineyard-rose {
  background: linear-gradient(165deg, #3a222c 0%, #2e1a22 100%);
  border-color: rgba(230,140,170,0.35);
  color: #fff0f4;
}
.unlock-theme-swatch[data-theme="theme-vineyard-rose"],
.gacha-reward-theme[data-theme="theme-vineyard-rose"] {
  background: linear-gradient(135deg, rgba(200,90,130,0.5), rgba(120,40,70,0.55));
  border-color: rgba(230,140,170,0.35);
}

html.theme-sand-stone {
  --ink: #16120c;
  --ink-2: #201a12;
  --paper: #2a2218;
  --paper-2: #362c1e;
  --line: rgba(210,180,130,0.14);
  --text: #faf4e8;
  --muted: #d0c0a0;
  --faint: #9a8a6a;
  --gold: #c8a870;
  --gold-soft: rgba(200,168,112,0.16);
}
.unlock-card.unlock-card-theme.theme-sand-stone,
.shop-item.shop-item-theme.theme-sand-stone {
  background: linear-gradient(165deg, #362c1e 0%, #2a2218 100%);
  border-color: rgba(210,180,130,0.35);
  color: #faf4e8;
}
.unlock-theme-swatch[data-theme="theme-sand-stone"],
.gacha-reward-theme[data-theme="theme-sand-stone"] {
  background: linear-gradient(135deg, rgba(190,150,90,0.5), rgba(120,90,50,0.55));
  border-color: rgba(210,180,130,0.35);
}

html.theme-night-watch {
  --ink: #060810;
  --ink-2: #0c1018;
  --paper: #121820;
  --paper-2: #1a222c;
  --line: rgba(100,140,200,0.14);
  --text: #e8eef8;
  --muted: #8898b0;
  --faint: #5a6a80;
  --gold: #6a90d0;
  --gold-soft: rgba(106,144,208,0.16);
}
.unlock-card.unlock-card-theme.theme-night-watch,
.shop-item.shop-item-theme.theme-night-watch {
  background: linear-gradient(165deg, #1a222c 0%, #121820 100%);
  border-color: rgba(100,140,200,0.35);
  color: #e8eef8;
}
.unlock-theme-swatch[data-theme="theme-night-watch"],
.gacha-reward-theme[data-theme="theme-night-watch"] {
  background: linear-gradient(135deg, rgba(60,90,160,0.5), rgba(20,30,60,0.55));
  border-color: rgba(100,140,200,0.35);
}

html.theme-honey-gold {
  --ink: #181008;
  --ink-2: #22160a;
  --paper: #2e1e0c;
  --paper-2: #3a2810;
  --line: rgba(240,190,80,0.14);
  --text: #fff8e0;
  --muted: #e0c870;
  --faint: #b09840;
  --gold: #e8c040;
  --gold-soft: rgba(232,192,64,0.18);
}
.unlock-card.unlock-card-theme.theme-honey-gold,
.shop-item.shop-item-theme.theme-honey-gold {
  background: linear-gradient(165deg, #3a2810 0%, #2e1e0c 100%);
  border-color: rgba(240,190,80,0.35);
  color: #fff8e0;
}
.unlock-theme-swatch[data-theme="theme-honey-gold"],
.gacha-reward-theme[data-theme="theme-honey-gold"] {
  background: linear-gradient(135deg, rgba(230,180,50,0.5), rgba(160,110,20,0.55));
  border-color: rgba(240,190,80,0.35);
}

html.theme-river-stone {
  --ink: #0c1012;
  --ink-2: #141a1c;
  --paper: #1c2628;
  --paper-2: #243234;
  --line: rgba(140,180,180,0.14);
  --text: #eef6f6;
  --muted: #a0b8b8;
  --faint: #708888;
  --gold: #80b0a8;
  --gold-soft: rgba(128,176,168,0.16);
}
.unlock-card.unlock-card-theme.theme-river-stone,
.shop-item.shop-item-theme.theme-river-stone {
  background: linear-gradient(165deg, #243234 0%, #1c2628 100%);
  border-color: rgba(140,180,180,0.35);
  color: #eef6f6;
}
.unlock-theme-swatch[data-theme="theme-river-stone"],
.gacha-reward-theme[data-theme="theme-river-stone"] {
  background: linear-gradient(135deg, rgba(100,150,150,0.5), rgba(50,80,80,0.55));
  border-color: rgba(140,180,180,0.35);
}

html.theme-twilight-psalm {
  --ink: #120c18;
  --ink-2: #1a1422;
  --paper: #241c30;
  --paper-2: #2e243c;
  --line: rgba(180,140,230,0.14);
  --text: #f6f0ff;
  --muted: #c0a8d8;
  --faint: #8870a8;
  --gold: #b090e0;
  --gold-soft: rgba(176,144,224,0.16);
}
.unlock-card.unlock-card-theme.theme-twilight-psalm,
.shop-item.shop-item-theme.theme-twilight-psalm {
  background: linear-gradient(165deg, #2e243c 0%, #241c30 100%);
  border-color: rgba(180,140,230,0.35);
  color: #f6f0ff;
}
.unlock-theme-swatch[data-theme="theme-twilight-psalm"],
.gacha-reward-theme[data-theme="theme-twilight-psalm"] {
  background: linear-gradient(135deg, rgba(150,100,210,0.5), rgba(80,50,130,0.55));
  border-color: rgba(180,140,230,0.35);
}

html.theme-cedar-shadow {
  --ink: #0c1008;
  --ink-2: #141810;
  --paper: #1c2418;
  --paper-2: #263020;
  --line: rgba(140,170,100,0.14);
  --text: #eef6e8;
  --muted: #a8c090;
  --faint: #789068;
  --gold: #8aaa60;
  --gold-soft: rgba(138,170,96,0.16);
}
.unlock-card.unlock-card-theme.theme-cedar-shadow,
.shop-item.shop-item-theme.theme-cedar-shadow {
  background: linear-gradient(165deg, #263020 0%, #1c2418 100%);
  border-color: rgba(140,170,100,0.35);
  color: #eef6e8;
}
.unlock-theme-swatch[data-theme="theme-cedar-shadow"],
.gacha-reward-theme[data-theme="theme-cedar-shadow"] {
  background: linear-gradient(135deg, rgba(100,130,60,0.5), rgba(50,70,30,0.55));
  border-color: rgba(140,170,100,0.35);
}

/* mem23q: keep frame SVG overlays visible on unlock/shop cards */
.unlock-card.reward-frame,
.shop-item.shop-item-frame {
  overflow: visible;
}
.unlock-card.reward-frame .unlock-card-top,
.shop-item .shop-item-top {
  overflow: visible;
}
.unlock-reward-chip.frame-chip.unlock-frame-preview {
  min-width: 64px;
  min-height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: rgba(0,0,0,0.22);
  border-radius: 14px;
  border: 1px solid rgba(232,210,176,0.22);
}
.shop-item-preview.frame.unlock-frame-preview {
  min-width: 64px;
  min-height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 8px;
  background: rgba(0,0,0,0.22);
  border-radius: 14px;
  border: 1px solid rgba(232,210,176,0.22);
}

/* mem23s: verse-gated + shop theme packs */

/* Memorize-refs unlock cards */
.unlock-memorize-refs {
  margin-top: 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.unlock-memorize-ref-list {
  margin: 0 0 6px;
  padding-left: 0;
  list-style: none;
  font-size: 12px;
  line-height: 1.35;
  color: inherit;
  opacity: 0.9;
  text-align: center;
}
.unlock-memorize-ref-list li { margin: 2px 0; }
.unlock-add-verses-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 4px auto 0;
  padding: 6px 12px;
  border-radius: 999px;
  border: 1px solid rgba(232, 199, 106, 0.55);
  background: rgba(232, 199, 106, 0.16);
  color: inherit;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.unlock-card .unlock-progress-text {
  text-align: center;
}
.unlock-add-verses-btn:active { transform: scale(0.98); }

html.theme-rainbow {
  --ink: #1a1020;
  --ink-2: #241428;
  --paper: #2e1834;
  --paper-2: #3a2044;
  --line: rgba(255,180,220,0.14);
  --text: #fff4fa;
  --muted: #e0b8d0;
  --faint: #b888a8;
  --gold: #e8a0d0;
  --gold-soft: rgba(232,160,208,0.16);
}
.unlock-card.unlock-card-theme.theme-rainbow,
.shop-item.shop-item-theme.theme-rainbow {
  background: linear-gradient(165deg, #3a2044 0%, #2e1834 100%);
  border-color: rgba(255,180,220,0.35);
  color: #fff4fa;
}
.unlock-theme-swatch[data-theme="theme-rainbow"],
.gacha-reward-theme[data-theme="theme-rainbow"] {
  background: linear-gradient(135deg, rgba(232,160,208,0.5), rgba(232,160,208,0.25));
  border-color: rgba(255,180,220,0.35);
}

html.theme-burning-bush {
  --ink: #1a1008;
  --ink-2: #24140c;
  --paper: #2e1c10;
  --paper-2: #3a2414;
  --line: rgba(255,160,80,0.14);
  --text: #fff4e8;
  --muted: #e0b090;
  --faint: #b88050;
  --gold: #e87830;
  --gold-soft: rgba(232,120,48,0.16);
}
.unlock-card.unlock-card-theme.theme-burning-bush,
.shop-item.shop-item-theme.theme-burning-bush {
  background: linear-gradient(165deg, #3a2414 0%, #2e1c10 100%);
  border-color: rgba(255,160,80,0.35);
  color: #fff4e8;
}
.unlock-theme-swatch[data-theme="theme-burning-bush"],
.gacha-reward-theme[data-theme="theme-burning-bush"] {
  background: linear-gradient(135deg, rgba(232,120,48,0.5), rgba(232,120,48,0.25));
  border-color: rgba(255,160,80,0.35);
}

html.theme-still-waters {
  --ink: #0c1418;
  --ink-2: #121c22;
  --paper: #182830;
  --paper-2: #20343c;
  --line: rgba(140,200,220,0.14);
  --text: #eef8fa;
  --muted: #a8c8d4;
  --faint: #7898a8;
  --gold: #70c0d8;
  --gold-soft: rgba(112,192,216,0.16);
}
.unlock-card.unlock-card-theme.theme-still-waters,
.shop-item.shop-item-theme.theme-still-waters {
  background: linear-gradient(165deg, #20343c 0%, #182830 100%);
  border-color: rgba(140,200,220,0.35);
  color: #eef8fa;
}
.unlock-theme-swatch[data-theme="theme-still-waters"],
.gacha-reward-theme[data-theme="theme-still-waters"] {
  background: linear-gradient(135deg, rgba(112,192,216,0.5), rgba(112,192,216,0.25));
  border-color: rgba(140,200,220,0.35);
}

html.theme-new-mercies {
  --ink: #141018;
  --ink-2: #1c1424;
  --paper: #261c30;
  --paper-2: #32243c;
  --line: rgba(200,160,230,0.14);
  --text: #f8f0ff;
  --muted: #c8b0d8;
  --faint: #9880a8;
  --gold: #c090e0;
  --gold-soft: rgba(192,144,224,0.16);
}
.unlock-card.unlock-card-theme.theme-new-mercies,
.shop-item.shop-item-theme.theme-new-mercies {
  background: linear-gradient(165deg, #32243c 0%, #261c30 100%);
  border-color: rgba(200,160,230,0.35);
  color: #f8f0ff;
}
.unlock-theme-swatch[data-theme="theme-new-mercies"],
.gacha-reward-theme[data-theme="theme-new-mercies"] {
  background: linear-gradient(135deg, rgba(192,144,224,0.5), rgba(192,144,224,0.25));
  border-color: rgba(200,160,230,0.35);
}

html.theme-armor-light {
  --ink: #141410;
  --ink-2: #1c1c14;
  --paper: #28281c;
  --paper-2: #343424;
  --line: rgba(220,210,120,0.14);
  --text: #faf8e8;
  --muted: #d0c898;
  --faint: #a09868;
  --gold: #d8c850;
  --gold-soft: rgba(216,200,80,0.16);
}
.unlock-card.unlock-card-theme.theme-armor-light,
.shop-item.shop-item-theme.theme-armor-light {
  background: linear-gradient(165deg, #343424 0%, #28281c 100%);
  border-color: rgba(220,210,120,0.35);
  color: #faf8e8;
}
.unlock-theme-swatch[data-theme="theme-armor-light"],
.gacha-reward-theme[data-theme="theme-armor-light"] {
  background: linear-gradient(135deg, rgba(216,200,80,0.5), rgba(216,200,80,0.25));
  border-color: rgba(220,210,120,0.35);
}

html.theme-good-shepherd {
  --ink: #101410;
  --ink-2: #161c16;
  --paper: #1e281e;
  --paper-2: #263426;
  --line: rgba(150,200,150,0.14);
  --text: #eef6ee;
  --muted: #a8c8a8;
  --faint: #789878;
  --gold: #80c080;
  --gold-soft: rgba(128,192,128,0.16);
}
.unlock-card.unlock-card-theme.theme-good-shepherd,
.shop-item.shop-item-theme.theme-good-shepherd {
  background: linear-gradient(165deg, #263426 0%, #1e281e 100%);
  border-color: rgba(150,200,150,0.35);
  color: #eef6ee;
}
.unlock-theme-swatch[data-theme="theme-good-shepherd"],
.gacha-reward-theme[data-theme="theme-good-shepherd"] {
  background: linear-gradient(135deg, rgba(128,192,128,0.5), rgba(128,192,128,0.25));
  border-color: rgba(150,200,150,0.35);
}

html.theme-mustard-seed {
  --ink: #141208;
  --ink-2: #1c180c;
  --paper: #282410;
  --paper-2: #343014;
  --line: rgba(200,180,60,0.14);
  --text: #faf6e0;
  --muted: #d0c480;
  --faint: #a09450;
  --gold: #c8b028;
  --gold-soft: rgba(200,176,40,0.16);
}
.unlock-card.unlock-card-theme.theme-mustard-seed,
.shop-item.shop-item-theme.theme-mustard-seed {
  background: linear-gradient(165deg, #343014 0%, #282410 100%);
  border-color: rgba(200,180,60,0.35);
  color: #faf6e0;
}
.unlock-theme-swatch[data-theme="theme-mustard-seed"],
.gacha-reward-theme[data-theme="theme-mustard-seed"] {
  background: linear-gradient(135deg, rgba(200,176,40,0.5), rgba(200,176,40,0.25));
  border-color: rgba(200,180,60,0.35);
}

html.theme-living-water {
  --ink: #0c1418;
  --ink-2: #101c24;
  --paper: #162830;
  --paper-2: #1e343c;
  --line: rgba(80,180,220,0.14);
  --text: #e8f6fc;
  --muted: #90c0d8;
  --faint: #6088a0;
  --gold: #40b0e0;
  --gold-soft: rgba(64,176,224,0.16);
}
.unlock-card.unlock-card-theme.theme-living-water,
.shop-item.shop-item-theme.theme-living-water {
  background: linear-gradient(165deg, #1e343c 0%, #162830 100%);
  border-color: rgba(80,180,220,0.35);
  color: #e8f6fc;
}
.unlock-theme-swatch[data-theme="theme-living-water"],
.gacha-reward-theme[data-theme="theme-living-water"] {
  background: linear-gradient(135deg, rgba(64,176,224,0.5), rgba(64,176,224,0.25));
  border-color: rgba(80,180,220,0.35);
}

html.theme-light-of-world {
  --ink: #18140c;
  --ink-2: #221c10;
  --paper: #2e2614;
  --paper-2: #3a3018;
  --line: rgba(255,210,100,0.14);
  --text: #fff8e8;
  --muted: #e0c890;
  --faint: #b09860;
  --gold: #f0c040;
  --gold-soft: rgba(240,192,64,0.16);
}
.unlock-card.unlock-card-theme.theme-light-of-world,
.shop-item.shop-item-theme.theme-light-of-world {
  background: linear-gradient(165deg, #3a3018 0%, #2e2614 100%);
  border-color: rgba(255,210,100,0.35);
  color: #fff8e8;
}
.unlock-theme-swatch[data-theme="theme-light-of-world"],
.gacha-reward-theme[data-theme="theme-light-of-world"] {
  background: linear-gradient(135deg, rgba(240,192,64,0.5), rgba(240,192,64,0.25));
  border-color: rgba(255,210,100,0.35);
}

html.theme-empty-tomb {
  --ink: #101218;
  --ink-2: #161a22;
  --paper: #1e2430;
  --paper-2: #262e3c;
  --line: rgba(160,180,210,0.14);
  --text: #eef2f8;
  --muted: #a8b4c8;
  --faint: #788498;
  --gold: #90a8c8;
  --gold-soft: rgba(144,168,200,0.16);
}
.unlock-card.unlock-card-theme.theme-empty-tomb,
.shop-item.shop-item-theme.theme-empty-tomb {
  background: linear-gradient(165deg, #262e3c 0%, #1e2430 100%);
  border-color: rgba(160,180,210,0.35);
  color: #eef2f8;
}
.unlock-theme-swatch[data-theme="theme-empty-tomb"],
.gacha-reward-theme[data-theme="theme-empty-tomb"] {
  background: linear-gradient(135deg, rgba(144,168,200,0.5), rgba(144,168,200,0.25));
  border-color: rgba(160,180,210,0.35);
}

html.theme-galilee-blue {
  --ink: #0c141c;
  --ink-2: #121c28;
  --paper: #182834;
  --paper-2: #203440;
  --line: rgba(100,170,230,0.14);
  --text: #e8f4ff;
  --muted: #98b8d8;
  --faint: #6888a8;
  --gold: #5090d8;
  --gold-soft: rgba(80,144,216,0.16);
}
.unlock-card.unlock-card-theme.theme-galilee-blue,
.shop-item.shop-item-theme.theme-galilee-blue {
  background: linear-gradient(165deg, #203440 0%, #182834 100%);
  border-color: rgba(100,170,230,0.35);
  color: #e8f4ff;
}
.unlock-theme-swatch[data-theme="theme-galilee-blue"],
.gacha-reward-theme[data-theme="theme-galilee-blue"] {
  background: linear-gradient(135deg, rgba(80,144,216,0.5), rgba(80,144,216,0.25));
  border-color: rgba(100,170,230,0.35);
}

html.theme-sinai-sand {
  --ink: #1a140c;
  --ink-2: #241c10;
  --paper: #2e2414;
  --paper-2: #3a2e18;
  --line: rgba(230,190,120,0.14);
  --text: #fff6e8;
  --muted: #e0c898;
  --faint: #b09868;
  --gold: #d8a850;
  --gold-soft: rgba(216,168,80,0.16);
}
.unlock-card.unlock-card-theme.theme-sinai-sand,
.shop-item.shop-item-theme.theme-sinai-sand {
  background: linear-gradient(165deg, #3a2e18 0%, #2e2414 100%);
  border-color: rgba(230,190,120,0.35);
  color: #fff6e8;
}
.unlock-theme-swatch[data-theme="theme-sinai-sand"],
.gacha-reward-theme[data-theme="theme-sinai-sand"] {
  background: linear-gradient(135deg, rgba(216,168,80,0.5), rgba(216,168,80,0.25));
  border-color: rgba(230,190,120,0.35);
}

html.theme-zion-gold {
  --ink: #181208;
  --ink-2: #22180c;
  --paper: #2e2010;
  --paper-2: #3a2a14;
  --line: rgba(255,200,80,0.14);
  --text: #fff8e0;
  --muted: #e0c880;
  --faint: #b09850;
  --gold: #e8b020;
  --gold-soft: rgba(232,176,32,0.16);
}
.unlock-card.unlock-card-theme.theme-zion-gold,
.shop-item.shop-item-theme.theme-zion-gold {
  background: linear-gradient(165deg, #3a2a14 0%, #2e2010 100%);
  border-color: rgba(255,200,80,0.35);
  color: #fff8e0;
}
.unlock-theme-swatch[data-theme="theme-zion-gold"],
.gacha-reward-theme[data-theme="theme-zion-gold"] {
  background: linear-gradient(135deg, rgba(232,176,32,0.5), rgba(232,176,32,0.25));
  border-color: rgba(255,200,80,0.35);
}

html.theme-jordan-teal {
  --ink: #0c1818;
  --ink-2: #102020;
  --paper: #162c2c;
  --paper-2: #1e3838;
  --line: rgba(80,200,190,0.14);
  --text: #e8faf8;
  --muted: #90d0c8;
  --faint: #60a098;
  --gold: #40c8b8;
  --gold-soft: rgba(64,200,184,0.16);
}
.unlock-card.unlock-card-theme.theme-jordan-teal,
.shop-item.shop-item-theme.theme-jordan-teal {
  background: linear-gradient(165deg, #1e3838 0%, #162c2c 100%);
  border-color: rgba(80,200,190,0.35);
  color: #e8faf8;
}
.unlock-theme-swatch[data-theme="theme-jordan-teal"],
.gacha-reward-theme[data-theme="theme-jordan-teal"] {
  background: linear-gradient(135deg, rgba(64,200,184,0.5), rgba(64,200,184,0.25));
  border-color: rgba(80,200,190,0.35);
}

html.theme-bethlehem-night {
  --ink: #0a0c18;
  --ink-2: #101428;
  --paper: #161c38;
  --paper-2: #1e2448;
  --line: rgba(140,160,255,0.14);
  --text: #eef0ff;
  --muted: #a8b0d8;
  --faint: #7880ab;
  --gold: #8a9aff;
  --gold-soft: rgba(138,154,255,0.16);
}
.unlock-card.unlock-card-theme.theme-bethlehem-night,
.shop-item.shop-item-theme.theme-bethlehem-night {
  background: linear-gradient(165deg, #1e2448 0%, #161c38 100%);
  border-color: rgba(140,160,255,0.35);
  color: #eef0ff;
}
.unlock-theme-swatch[data-theme="theme-bethlehem-night"],
.gacha-reward-theme[data-theme="theme-bethlehem-night"] {
  background: linear-gradient(135deg, rgba(138,154,255,0.5), rgba(138,154,255,0.25));
  border-color: rgba(140,160,255,0.35);
}

html.theme-canaan-green {
  --ink: #0c1410;
  --ink-2: #121c16;
  --paper: #18281e;
  --paper-2: #203428;
  --line: rgba(120,200,140,0.14);
  --text: #eefaf0;
  --muted: #a0c8b0;
  --faint: #709880;
  --gold: #60c880;
  --gold-soft: rgba(96,200,128,0.16);
}
.unlock-card.unlock-card-theme.theme-canaan-green,
.shop-item.shop-item-theme.theme-canaan-green {
  background: linear-gradient(165deg, #203428 0%, #18281e 100%);
  border-color: rgba(120,200,140,0.35);
  color: #eefaf0;
}
.unlock-theme-swatch[data-theme="theme-canaan-green"],
.gacha-reward-theme[data-theme="theme-canaan-green"] {
  background: linear-gradient(135deg, rgba(96,200,128,0.5), rgba(96,200,128,0.25));
  border-color: rgba(120,200,140,0.35);
}

html.theme-red-sea {
  --ink: #180c10;
  --ink-2: #241018;
  --paper: #301820;
  --paper-2: #3c2028;
  --line: rgba(230,100,120,0.14);
  --text: #fff0f2;
  --muted: #e0a0b0;
  --faint: #b07080;
  --gold: #e05070;
  --gold-soft: rgba(224,80,112,0.16);
}
.unlock-card.unlock-card-theme.theme-red-sea,
.shop-item.shop-item-theme.theme-red-sea {
  background: linear-gradient(165deg, #3c2028 0%, #301820 100%);
  border-color: rgba(230,100,120,0.35);
  color: #fff0f2;
}
.unlock-theme-swatch[data-theme="theme-red-sea"],
.gacha-reward-theme[data-theme="theme-red-sea"] {
  background: linear-gradient(135deg, rgba(224,80,112,0.5), rgba(224,80,112,0.25));
  border-color: rgba(230,100,120,0.35);
}

html.theme-upper-room {
  --ink: #14100c;
  --ink-2: #1c1610;
  --paper: #281e14;
  --paper-2: #342818;
  --line: rgba(220,160,90,0.14);
  --text: #fff4e8;
  --muted: #d8b090;
  --faint: #a88060;
  --gold: #d89040;
  --gold-soft: rgba(216,144,64,0.16);
}
.unlock-card.unlock-card-theme.theme-upper-room,
.shop-item.shop-item-theme.theme-upper-room {
  background: linear-gradient(165deg, #342818 0%, #281e14 100%);
  border-color: rgba(220,160,90,0.35);
  color: #fff4e8;
}
.unlock-theme-swatch[data-theme="theme-upper-room"],
.gacha-reward-theme[data-theme="theme-upper-room"] {
  background: linear-gradient(135deg, rgba(216,144,64,0.5), rgba(216,144,64,0.25));
  border-color: rgba(220,160,90,0.35);
}

html.theme-gethsemane {
  --ink: #101408;
  --ink-2: #161c0c;
  --paper: #1e280f;
  --paper-2: #263412;
  --line: rgba(150,180,80,0.14);
  --text: #f2fae8;
  --muted: #b0c890;
  --faint: #809060;
  --gold: #98b840;
  --gold-soft: rgba(152,184,64,0.16);
}
.unlock-card.unlock-card-theme.theme-gethsemane,
.shop-item.shop-item-theme.theme-gethsemane {
  background: linear-gradient(165deg, #263412 0%, #1e280f 100%);
  border-color: rgba(150,180,80,0.35);
  color: #f2fae8;
}
.unlock-theme-swatch[data-theme="theme-gethsemane"],
.gacha-reward-theme[data-theme="theme-gethsemane"] {
  background: linear-gradient(135deg, rgba(152,184,64,0.5), rgba(152,184,64,0.25));
  border-color: rgba(150,180,80,0.35);
}

html.theme-ascension-sky {
  --ink: #0c1420;
  --ink-2: #121c2c;
  --paper: #182838;
  --paper-2: #203444;
  --line: rgba(120,180,255,0.14);
  --text: #eef6ff;
  --muted: #a8c4e0;
  --faint: #7894b0;
  --gold: #70a8ff;
  --gold-soft: rgba(112,168,255,0.16);
}
.unlock-card.unlock-card-theme.theme-ascension-sky,
.shop-item.shop-item-theme.theme-ascension-sky {
  background: linear-gradient(165deg, #203444 0%, #182838 100%);
  border-color: rgba(120,180,255,0.35);
  color: #eef6ff;
}
.unlock-theme-swatch[data-theme="theme-ascension-sky"],
.gacha-reward-theme[data-theme="theme-ascension-sky"] {
  background: linear-gradient(135deg, rgba(112,168,255,0.5), rgba(112,168,255,0.25));
  border-color: rgba(120,180,255,0.35);
}



/* ===== mem23au: frames/stickers on avatars everywhere (after mem23at handles) ===== */
.avatar-btn,
.author .avatar-btn,
.account-nearby-row .avatar-btn,
.mem-peers-row .avatar-btn,
.mem-peers-face,
.user-profile-identity,
.comment-meta {
  overflow: visible;
}
.avatar-btn {
  border-radius: 0;
}
.avatar-btn .avatar-cosmetic-wrap,
.mem-peers-face .avatar-cosmetic-wrap,
.account-nearby-row .avatar-cosmetic-wrap,
.comment-meta .avatar-cosmetic-wrap,
.user-profile-identity .avatar-cosmetic-wrap {
  overflow: visible;
  flex-shrink: 0;
}
.avatar.avatar-sm {
  width: 28px;
  height: 28px;
}
.comment-meta {
  align-items: center;
}
.comment-meta .avatar-btn,
.comment-meta .avatar-cosmetic-wrap,
.comment-meta .avatar {
  flex-shrink: 0;
}
.comment-avatar-btn {
  margin-right: 2px;
}

/* mem25n: unlockable/shop card preview top-right, no overlap with tier/description */
.unlock-card-top,
.shop-item-top {
  justify-content: flex-end;
  align-items: flex-start;
  box-sizing: border-box;
}
/* Reserve top-row height + right gutter so left tier/copy stays readable */
.unlock-card.reward-frame .unlock-card-top,
.unlock-card.reward-sticker .unlock-card-top,
.unlock-card.reward-theme .unlock-card-top,
.shop-item.shop-item-frame .shop-item-top,
.shop-item.shop-item-sticker .shop-item-top,
.shop-item.shop-item-theme .shop-item-top {
  min-height: 72px;
  padding-right: 76px;
}
.unlock-tier,
.shop-item-tier {
  max-width: calc(100% - 86px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Pin previews to the card (same containing block as tier), top-right */
.unlock-card > .unlock-card-top > .unlock-reward-chip,
.unlock-card > .unlock-card-top > .unlock-frame-preview,
.unlock-card > .unlock-card-top > .unlock-sticker-preview,
.unlock-card > .unlock-card-top > .unlock-theme-preview,
.shop-item > .shop-item-top > .shop-item-preview {
  position: absolute;
  top: 8px;
  right: 8px;
  left: auto;
  margin: 0;
  z-index: 3;
  flex-shrink: 0;
}
.unlock-card.reward-sticker .unlock-sticker-preview {
  line-height: 1;
  font-size: 28px;
}
/* mem26v: theme reward chip — compact tint swatch + short label (not blank top-right) */
.unlock-card .unlock-theme-preview.gacha-reward-theme {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  min-width: 0;
  min-height: 0;
  max-width: 7.5rem;
  padding: 4px 8px 4px 5px;
  border-radius: 999px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.01em;
  line-height: 1.15;
  pointer-events: none;
}
.unlock-card .unlock-theme-preview-swatch {
  width: 14px;
  height: 14px;
  border-radius: 999px;
  flex: 0 0 auto;
  border: 1px solid rgba(255,255,255,0.35);
  background: inherit;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15);
}
.unlock-card .unlock-theme-preview-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 5.6rem;
}



/* v2.6 mem26f — comment menus, tip, highlight, study↔comments flip */
.comment-menu {
  position: absolute;
  top: 6px;
  right: 6px;
  z-index: 3;
}
.comment-menu-btn {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--faint);
  width: 28px;
  height: 28px;
  border-radius: 999px;
  font: 700 16px/1 "IBM Plex Sans", sans-serif;
  cursor: pointer;
  padding: 0;
}
.comment-menu-btn:hover,
.comment-menu-btn:focus {
  color: var(--gold);
  background: rgba(212, 160, 84, 0.12);
  outline: none;
}
.comment-menu-pop {
  position: absolute;
  top: 100%;
  right: 0;
  min-width: 120px;
  padding: 4px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: var(--ink-2);
  box-shadow: 0 10px 24px rgba(0,0,0,0.35);
  display: flex;
  flex-direction: column;
  gap: 2px;
  z-index: 5;
}
/* display:flex beats UA [hidden]; without this, Edit/Delete/Report pop shows on every comments open. */
.comment-menu-pop[hidden] {
  display: none !important;
}
.comment-menu-item {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  padding: 8px 10px;
  border-radius: 8px;
  font: 600 13px/1.2 "IBM Plex Sans", sans-serif;
  cursor: pointer;
}
.comment-menu-item:hover,
.comment-menu-item:focus {
  background: rgba(212, 160, 84, 0.14);
  outline: none;
}
.comment-menu-item.is-danger { color: #e8a0a0; }
.comment-edited {
  color: var(--faint);
  font-weight: 500;
  font-size: 11px;
}
.comment-item.is-comment-target {
  border-color: rgba(212, 160, 84, 0.75);
  box-shadow: 0 0 0 2px rgba(212, 160, 84, 0.28);
  transition: box-shadow 0.35s ease, border-color 0.35s ease;
}
.comment-edit-box { margin: 6px 0 4px; }
.comment-edit-input {
  width: 100%;
  min-height: 72px;
  box-sizing: border-box;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: rgba(0,0,0,0.2);
  color: var(--text);
  padding: 8px 10px;
  font: inherit;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 15px;
  line-height: 1.45;
  resize: vertical;
}
.comment-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 8px;
}
.comment-edit-actions .invite,
.comment-edit-actions .submit {
  width: auto;
  padding: 8px 14px;
  font-size: 13px;
  border-radius: 10px;
}
.comments-react-tip[hidden] {
  display: none !important;
}
.comments-react-tip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin: 0 0 10px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid rgba(212, 160, 84, 0.35);
  background: rgba(212, 160, 84, 0.1);
  color: var(--text);
  font-size: 12px;
  line-height: 1.35;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-user-drag: none;
}
.comments-react-tip * {
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.comments-react-tip p { margin: 0; }
.comments-react-tip-dismiss {
  appearance: none;
  border: 1px solid rgba(212, 160, 84, 0.55);
  background: transparent;
  color: var(--gold);
  border-radius: 999px;
  padding: 5px 10px;
  font: 700 11px/1 "IBM Plex Sans", sans-serif;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  flex-shrink: 0;
}
.comments-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.comments-sheet .comments-study-tab,
.comments-face .comments-study-tab {
  position: relative;
  right: auto;
  bottom: auto;
  height: 28px;
  min-height: 28px;
  padding: 4px 10px;
  border-bottom: 1px solid rgba(212, 160, 84, 0.55);
  border-radius: 8px;
  pointer-events: auto;
  z-index: 6; /* above Stickers FAB (z-index:4) so Study always receives taps */
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
}
.comments-flip-scene {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  transform-origin: center center;
  transform: rotateY(0deg);
  transition: transform 0.26s ease-in;
}
.comments-flip-scene.is-folding {
  transform: rotateY(90deg);
  transition: transform 0.26s ease-in;
}
.comments-flip-scene.is-unfolding {
  transform: rotateY(0deg);
  transition: transform 0.26s ease-out;
}
.comments-flip-face {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
/* Author display:flex beats UA [hidden]; without this, Study↔Comments face swap is a no-op. */
.comments-flip-face[hidden] {
  display: none !important;
}
.comments-flip-scene.is-showing-study #comments-panel {
  display: none !important;
}
.comments-flip-scene:not(.is-showing-study) #comments-study-pane {
  display: none !important;
}
.comments-face-study .comments-study-preview {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 4px 2px 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.comments-face-study .comments-study-preview .study {
  margin: 0;
  font-family: "Source Serif 4", Georgia, serif;
  font-size: 16px;
  line-height: 1.5;
}
.comments-flip-back {
  background: var(--gold-soft);
}
.comments-face {
  position: absolute;
  inset: 0;
  z-index: 5;
  border-radius: 18px;
  overflow: hidden;
  background: linear-gradient(180deg, var(--paper-2), var(--ink-2));
  border: 1px solid var(--line);
  pointer-events: none;
  visibility: hidden;
  transform-origin: 0% 50%;
  transform: rotateY(92deg);
  transition: transform 0.55s cubic-bezier(0.4, 0.12, 0.2, 1);
  box-shadow: 18px 0 28px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  padding: 0;
  box-sizing: border-box;
}
.card.is-comments-open .comments-face {
  pointer-events: auto;
  visibility: visible;
  transform: rotateY(0deg);
}
/* b70 / mem28g: empty comments face must not cover study or steal taps */
.comments-face:not(.has-comments-panel) {
  pointer-events: none !important;
}
.card.is-comments-open .comments-face:not(.has-comments-panel) {
  visibility: hidden !important;
  pointer-events: none !important;
  transform: rotateY(92deg) !important;
}
/* reply59b: demote sheet→card — skip 3D flip scrap over deck for one frame */
.card.is-comments-demoting .comments-face {
  transition: none !important;
  transform: rotateY(0deg) !important;
  perspective: none;
  visibility: visible !important;
  opacity: 1 !important;
}
/* reply62: opaque sheet cover while demoting — never flash study front */
#comments-sheet.is-comments-demoting-cover.comments-overlay {
  display: flex !important;
  background: var(--ink-2, #16110c) !important;
  opacity: 1 !important;
  z-index: 60 !important;
  pointer-events: none;
}
.card.is-comments-open .collab-tab:not(.comments-study-tab) { display: none; }
.card.is-comments-open .gw-tab { display: none; }
.card.is-gw-open .comments-face { visibility: hidden !important; pointer-events: none !important; }
/* In-card comments: same card bounds as study / Passage face */
.comments-face-mount {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.comments-face-mount #comments-panel,
.comments-face-mount .comments-face-main {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 12px 12px 0;
  box-sizing: border-box;
  background: transparent;
  border: 0;
  overflow: hidden;
}
/* b70: card-mounted panel must paint even if a stale [hidden] raced in */
.comments-face.has-comments-panel .comments-face-mount #comments-panel:not([hidden]),
.card.is-comments-open .comments-face.has-comments-panel #comments-panel:not([hidden]) {
  display: flex !important;
  visibility: visible !important;
  opacity: 1;
}
.comments-face-mount .comments-sheet-head h2 {
  font-size: 22px;
}
.comments-face-mount .comments-thread {
  min-height: 0;
  flex: 1 1 auto;
}
.comments-face-mount .comments-form {
  margin: 0 -12px 0;
  padding: 8px 12px 10px;
  padding-bottom: 10px;
  flex: 0 0 auto;
  max-height: none;
  overflow: visible;
}
.comments-face-mount .comments-replying:not([hidden]) {
  display: block;
  position: relative;
  z-index: 2;
}
.comments-face-inner {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  align-items: flex-start;
}
.comments-face-kicker {
  margin: 0;
  font: 700 11px/1 "IBM Plex Sans", sans-serif;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
}
.comments-face-hint {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.4;
  max-width: 16rem;
}
/* mem28d — Passage-style left clear so Dual gold ribbon does not cover in-card comments.
   Ribbon stays visible as branding (z:7, same as Passage); content insets ~30px. */
.card.is-dual.is-comments-open .comments-face-mount {
  margin-left: 30px;
  width: calc(100% - 30px);
  box-sizing: border-box;
}
.card.is-dual.is-comments-open .dual-ribbon { z-index: 7; }

/* v2.6 mem26g — hide avatar stickers on Passage / Comments card faces */
/* Stickers use z-index:6 (above photo/frame); Passage & Comments faces are z-index:5.
   Without containment + hide, stickers painted through the folded-open Passage card. */
.card.is-gw-open .avatar-sticker-host,
.card.is-comments-open .avatar-sticker-host {
  visibility: hidden;
  pointer-events: none;
}

/* Keep author/profile + Passage/Collaborate reachable inside the card face */
.deck .card .meta,
.flip-face .meta {
  position: relative;
  z-index: 2;
  flex-shrink: 0;
  margin-top: auto;
  padding-top: 6px;
  overflow: visible;
}
.deck:not(.is-history) .card .study,
.deck:not(.is-history) .flip-face .study {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

/* Short Android / WebView viewports: shrink chrome so the full study card fits */
@media (max-height: 740px) {
  .app {
    padding-top: calc(10px + var(--safe-top));
    padding-bottom: calc(var(--tabbar) + 16px + var(--safe-bottom));
  }
  .app:not(.is-write) .topbar { padding: 0 0 6px; }
  .app:not(.is-write) h1 { font-size: 24px; }
  .eyebrow { margin-bottom: 2px; }
  .view-read > .lede { display: none; }
  .read-controls { margin-bottom: 8px; }
  .sort-bar { margin-bottom: 0; }
  .sort-btn { padding: 6px 4px; font-size: 10px; }
  .bible-open-btn { padding: 6px 10px; font-size: 10px; }
  .gw-study-face { padding: 12px 12px 38px; }
  .flip-face { padding: 12px 12px 38px 34px; }
  .deck .card .ref { font-size: 20px; }
  .deck .card .card-title { font-size: 14px; margin-bottom: 6px; }
  .deck .card .study { font-size: 14px; line-height: 1.38; }
  .card.is-dual .flip-face { padding-bottom: 28px; }
}
@media (max-height: 620px) {
  .app:not(.is-write) h1 { font-size: 22px; }
  .topbar-actions .account-btn-label { font-size: 11px; }
  .gw-study-face { padding: 10px 10px 34px; }
  .flip-face { padding: 10px 10px 34px 30px; }
  .deck .card .meta { gap: 8px; }
  .avatar { width: 28px; height: 28px; }
  .avatar-cosmetic-wrap { --av: 28px; }
}



/* v2.6 mem26i — collab preview + dual next-step CTA */
.collab-preview-overlay {
  z-index: 55;
}
.collab-preview-card .comments-study-ref {
  margin: 0 0 10px;
  color: var(--gold);
  font-family: "Fraunces", Georgia, serif;
  font-size: 18px;
}
.collab-preview-cancel {
  display: block;
  width: 100%;
  margin-top: 12px;
  text-align: center;
  background: transparent;
  border: 0;
  color: var(--muted);
  font: inherit;
  cursor: pointer;
  padding: 8px;
}
.card:has(> .dual-next-step) {
  position: relative;
}
.dual-next-step {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: calc(12px + var(--safe-bottom, 0px));
  z-index: 12;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.dual-next-step-btn {
  pointer-events: auto;
  width: auto;
  min-width: 180px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
.card > .dual-next-step {
  /* cards are position:relative already via deck styles; ensure stacking */
}

/* v2.6 mem26l — Bible = real mode (not a sort); tappable above caught-up cards */
.bible-open-btn {
  flex: 0 0 auto;
  align-self: stretch;
  appearance: none;
  margin: 0;
  color: var(--gold);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(212, 160, 84, 0.45);
  border-radius: 999px;
  padding: 8px 14px;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  position: relative;
  z-index: 6; /* never under unlock/challenge caught-up cards */
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.bible-open-btn[aria-current="page"],
.bible-open-btn[aria-pressed="true"],
.bible-open-btn:hover { background: var(--gold-soft); color: var(--text); }

.bible-overlay {
  align-items: flex-end;
  padding: calc(12px + var(--safe-top)) 0 0;
  z-index: 45;
}
.bible-sheet {
  position: relative;
  width: min(480px, 100%);
  height: min(92dvh, 820px);
  max-height: calc(var(--vv-height, 100dvh) - var(--safe-top) - 8px);
  margin: 0 auto;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.22), transparent 18px),
    linear-gradient(180deg, #3a2f24, #241c15 40%, #1a1510);
  border: 1px solid rgba(212, 160, 84, 0.28);
  border-bottom: 0;
  border-radius: 18px 18px 0 0;
  box-shadow: 0 18px 48px rgba(0,0,0,0.45), inset 0 1px 0 rgba(232,210,176,0.12);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  padding: 14px 14px 0 22px;
}
.bible-book-chrome {
  pointer-events: none;
  position: absolute;
  inset: 0 auto 0 0;
  width: 18px;
}
.bible-spine {
  position: absolute;
  inset: 10px 0 10px 0;
  width: 10px;
  border-radius: 4px 0 0 4px;
  background: linear-gradient(180deg, #c49248, #8a6230 45%, #6e4c24);
  box-shadow: 2px 0 0 rgba(0,0,0,0.25);
}
.bible-cover-edge {
  position: absolute;
  top: 0; bottom: 0; left: 10px;
  width: 8px;
  background: repeating-linear-gradient(
    180deg,
    rgba(232,210,176,0.08) 0 2px,
    transparent 2px 5px
  );
}
.bible-sheet-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
  flex: 0 0 auto;
}
.bible-sheet-head h2 {
  margin: 2px 0 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: 26px;
  letter-spacing: -0.03em;
}
.bible-picker, .bible-reader {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding-bottom: calc(12px + var(--safe-bottom));
}
.bible-testament h3,
.bible-testament-sticky,
.bible-chapter-block h3,
.bible-chapter-ribbon-title,
.bible-quick-label,
.bible-genre-label {
  margin: 0 0 8px;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
}
.bible-testament-sticky {
  position: sticky;
  top: 0;
  z-index: 3;
  margin: 0 0 10px;
  padding: 8px 0 6px;
  background: linear-gradient(180deg, #2c241c 70%, rgba(44,36,28,0));
}
.bible-genre-label {
  color: var(--muted);
  letter-spacing: 0.08em;
  font-size: 11px;
  margin: 0 0 6px;
}
.bible-book-list, .bible-chapter-grid, .bible-verse-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bible-book-chip, .bible-chapter-chip, .bible-verse-chip {
  appearance: none;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
}
.bible-book-chip.is-active,
.bible-chapter-chip.is-active,
.bible-verse-chip.is-selected {
  border-color: rgba(212,160,84,0.55);
  background: var(--gold-soft);
  color: var(--gold);
}
.bible-verse-chip {
  position: relative;
  min-width: 34px;
  justify-content: center;
}
.bible-chip-badge {
  position: absolute;
  top: -5px;
  right: -4px;
  min-width: 14px;
  height: 14px;
  padding: 0 3px;
  border-radius: 999px;
  background: var(--gold);
  color: #1a130c;
  font-size: 9px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}
.bible-reader-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.bible-nav-btn {
  appearance: none;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.04);
  color: var(--text);
  border-radius: 10px;
  min-width: 40px;
  height: 36px;
  padding: 0 10px;
  cursor: pointer;
}
.bible-reader-heading {
  flex: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.bible-reader-heading strong {
  font-family: "Fraunces", Georgia, serif;
  font-size: 18px;
}
.bible-reader-heading span,
.bible-reader-status {
  color: var(--muted);
  font-size: 12px;
}
.bible-reader-status { margin: 0; text-align: center; }
.bible-pane-tabs {
  display: flex;
  gap: 4px;
  padding: 2px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(0,0,0,0.18);
  flex: 0 0 auto;
}
.bible-pane-tabs button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--faint);
  flex: 1;
  padding: 8px 4px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.bible-pane-tabs button.is-active {
  background: rgba(212,160,84,0.16);
  color: var(--gold);
}
.bible-page {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transform-origin: left center;
  transition: transform 0.36s ease, opacity 0.36s ease;
  background:
    linear-gradient(180deg, rgba(243,232,214,0.04), transparent 28px),
    linear-gradient(180deg, #2c241c, #221b14);
  border: 1px solid rgba(232,210,176,0.1);
  border-radius: 14px;
  padding: 10px;
  overflow: hidden;
}
.bible-page.is-turn-next {
  animation: bibleTurnNext 0.36s ease;
}
.bible-page.is-turn-prev {
  animation: bibleTurnPrev 0.36s ease;
}
@keyframes bibleTurnNext {
  0% { transform: perspective(900px) rotateY(0); opacity: 1; }
  45% { transform: perspective(900px) rotateY(-18deg); opacity: 0.55; }
  100% { transform: perspective(900px) rotateY(0); opacity: 1; }
}
@keyframes bibleTurnPrev {
  0% { transform: perspective(900px) rotateY(0); opacity: 1; }
  45% { transform: perspective(900px) rotateY(18deg); opacity: 0.55; }
  100% { transform: perspective(900px) rotateY(0); opacity: 1; }
}
.bible-pane {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
}
.bible-gw-box {
  position: relative;
  min-height: 280px;
  height: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: #1a1510;
}
.bible-gw-box .write-preview-frame {
  width: 100%;
  height: min(48dvh, 420px);
  border: 0;
  background: #fff;
}
.bible-list { display: flex; flex-direction: column; gap: 8px; }
.bible-study-row {
  appearance: none;
  text-align: left;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  cursor: pointer;
}
.bible-study-ref { color: var(--gold); font-size: 12px; font-weight: 600; }
.bible-study-title { font-family: "Fraunces", Georgia, serif; font-size: 16px; }
.bible-study-by { color: var(--muted); font-size: 12px; display: flex; gap: 8px; flex-wrap: wrap; }
.bible-study-dual {
  color: #1a130c;
  background: var(--gold);
  border-radius: 999px;
  padding: 1px 7px;
  font-weight: 700;
  font-size: 10px;
}
.bible-empty, .bible-hint, .bible-mem-ref {
  color: var(--muted);
  font-size: 13px;
  line-height: 1.45;
}
.bible-mem-box { display: flex; flex-direction: column; gap: 10px; }
.bible-secondary-btn { margin-top: 0; }
.bible-write-bar {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 2px calc(10px + var(--safe-bottom));
  border-top: 1px solid var(--line);
  background: linear-gradient(180deg, transparent, rgba(0,0,0,0.25));
}
.bible-write-kicker {
  margin: 0;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
}
.bible-write-ref {
  margin: 2px 0 0;
  font-size: 13px;
  color: var(--text);
}
html.is-bible-open .tabbar { opacity: 0.35; pointer-events: none; }


/* v2.6 mem26m — structured book browser (OT/NT genres + search + recent) */
.bible-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.bible-picker-search-row { flex: 0 0 auto; }
.bible-book-search {
  width: 100%;
  appearance: none;
  border: 1px solid rgba(212,160,84,0.35);
  background: rgba(0,0,0,0.28);
  color: var(--text);
  border-radius: 12px;
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
}
.bible-book-search::placeholder { color: var(--faint); }
.bible-quick-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 0 0 auto;
}
.bible-quick-block { min-width: 0; }
.bible-quick-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.bible-recent-chip,
.bible-pin-chip {
  appearance: none;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  border-radius: 999px;
  padding: 6px 10px;
  font-size: 12px;
  cursor: pointer;
}
.bible-recent-chip {
  border-color: rgba(212,160,84,0.4);
  color: var(--gold);
  background: rgba(212,160,84,0.08);
}
.bible-pin-chip.is-active {
  border-color: rgba(212,160,84,0.55);
  background: var(--gold-soft);
  color: var(--gold);
}
.bible-browse-wall {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bible-genre-stack {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.bible-genre-group {
  padding: 8px 0 2px;
  border-top: 1px solid rgba(232,210,176,0.08);
}
.bible-genre-group:first-child { border-top: 0; padding-top: 0; }
.bible-chapter-ribbon {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 0 0 auto;
  padding: 4px 0 8px;
  border-bottom: 1px solid rgba(232,210,176,0.1);
}
.bible-chapter-ribbon[hidden] { display: none !important; }
.bible-browse-wall[hidden],
.bible-quick-row[hidden],
.bible-picker-search-row[hidden] { display: none !important; }
.bible-chapter-ribbon-head {
  display: flex;
  align-items: center;
  gap: 10px;
}
.bible-chapter-ribbon-title {
  margin: 0;
  flex: 1;
}
.bible-all-books-btn {
  flex: 0 0 auto;
  font-size: 12px;
  min-width: 0;
  padding: 0 12px;
  height: 32px;
}
.bible-open-chapter-btn { width: 100%; }
.bible-picker[data-picker-mode="chapters"] .bible-browse-wall { display: none !important; }


/* v2.6 mem26n — tactile real-Bible feedback (swipe curl, fore-edge, thumb-index, spine) */
.bible-sheet {
  background:
    linear-gradient(90deg, rgba(0,0,0,0.22), transparent 18px),
    radial-gradient(ellipse at 30% 20%, rgba(232,210,176,0.06), transparent 55%),
    linear-gradient(180deg, #3a2f24, #241c15 40%, #1a1510);
  padding: 14px 18px 0 28px; /* room for thumb-index + fore-edge */
}
.bible-book-chrome {
  width: 22px;
  z-index: 2;
}
.bible-spine {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  overflow: hidden;
}
.bible-spine-title {
  font-family: "Fraunces", Georgia, serif;
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(26, 19, 12, 0.85);
  white-space: nowrap;
  max-height: 70%;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 700;
}
.bible-paper-grain {
  pointer-events: none;
  position: absolute;
  inset: 0 0 0 18px;
  opacity: 0.07;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  border-radius: 0 14px 0 0;
}
.bible-printed-ch {
  margin: 4px 0 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: 13px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(232, 210, 176, 0.72);
}
.bible-printed-ch[hidden] { display: none !important; }
.bible-reader-printed {
  display: block;
  font-family: "Fraunces", Georgia, serif;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(232, 210, 176, 0.55);
  margin-top: -1px;
}

/* Left thumb-index (OT/NT genre groups + scrub) */
.bible-thumb-index {
  position: absolute;
  left: 0;
  top: 64px;
  bottom: calc(18px + var(--safe-bottom));
  width: 26px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 0;
  touch-action: none;
  user-select: none;
}
.bible-thumb-index[hidden] { display: none !important; }
.bible-thumb-tab {
  appearance: none;
  flex: 1 1 0;
  min-height: 0;
  margin: 0;
  padding: 2px 0;
  border: 0;
  border-radius: 0 6px 6px 0;
  background: linear-gradient(90deg, rgba(196,146,72,0.55), rgba(138,98,48,0.35));
  color: #1a130c;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  box-shadow: 1px 0 0 rgba(0,0,0,0.25);
}
.bible-thumb-tab.is-active {
  background: linear-gradient(90deg, #e8d2b0, #c49248);
  box-shadow: 2px 0 6px rgba(212,160,84,0.35);
}
.bible-thumb-letter {
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.04em;
}
.bible-thumb-books {
  display: none;
}
@media (min-height: 700px) {
  .bible-thumb-tab.is-active .bible-thumb-books {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 2px;
    max-height: 70%;
    overflow: hidden;
  }
  .bible-thumb-book {
    font-size: 7px;
    line-height: 1.1;
    opacity: 0.7;
    font-weight: 600;
  }
  .bible-thumb-book.is-current { opacity: 1; font-weight: 800; }
}

/* Right fore-edge chapter ticks */
.bible-fore-edge {
  position: absolute;
  right: 2px;
  top: 64px;
  bottom: calc(18px + var(--safe-bottom));
  width: 16px;
  z-index: 6;
  display: flex;
  flex-direction: column;
  touch-action: none;
  user-select: none;
  padding: 2px 0;
}
.bible-fore-edge[hidden] { display: none !important; }
.bible-fore-tick {
  appearance: none;
  flex: 1 1 0;
  min-height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 2px 0 0 2px;
  background: rgba(232, 210, 176, 0.22);
  cursor: pointer;
  position: relative;
  box-shadow: inset 0 0 0 0.5px rgba(0,0,0,0.15);
}
.bible-fore-tick.is-major {
  background: rgba(232, 210, 176, 0.38);
  min-height: 2px;
}
.bible-fore-tick.is-active {
  background: var(--gold);
  box-shadow: -2px 0 6px rgba(212,160,84,0.45);
  z-index: 1;
}
.bible-fore-num {
  position: absolute;
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 4px;
  font-size: 9px;
  font-weight: 700;
  color: var(--gold);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.12s ease;
  background: rgba(26, 19, 12, 0.85);
  padding: 1px 4px;
  border-radius: 4px;
  white-space: nowrap;
}
.bible-fore-tick.is-active .bible-fore-num,
.bible-fore-tick.is-major:hover .bible-fore-num {
  opacity: 1;
}

/* Page swipe rubber-band + curl shadow */
.bible-page {
  touch-action: pan-y;
  will-change: transform, opacity, box-shadow;
  background:
    linear-gradient(90deg, rgba(0,0,0,0.12), transparent 12px),
    linear-gradient(180deg, rgba(243,232,214,0.05), transparent 28px),
    linear-gradient(180deg, #2c241c, #221b14);
}
.bible-page.is-dragging {
  transition: none !important;
  cursor: grabbing;
}
.bible-page.is-rubber {
  /* end-of-book resistance cue */
  filter: saturate(0.92);
}
.bible-page.is-rubber-back {
  animation: bibleRubberBack 0.22s ease;
}
@keyframes bibleRubberBack {
  0% { transform: perspective(900px) translateX(0); }
  40% { transform: perspective(900px) translateX(6px) rotateY(3deg); }
  100% { transform: perspective(900px) translateX(0); }
}
.bible-page.is-curl-next::after,
.bible-page.is-curl-prev::after {
  content: "";
  pointer-events: none;
  position: absolute;
  inset: 0;
  border-radius: inherit;
  z-index: 4;
}
.bible-page.is-curl-next::after {
  box-shadow: inset -18px 0 28px rgba(0,0,0,0.28), -6px 0 18px rgba(0,0,0,0.2);
  background: linear-gradient(90deg, transparent 70%, rgba(0,0,0,0.12));
}
.bible-page.is-curl-prev::after {
  box-shadow: inset 18px 0 28px rgba(0,0,0,0.28), 6px 0 18px rgba(0,0,0,0.2);
  background: linear-gradient(270deg, transparent 70%, rgba(0,0,0,0.12));
}
@keyframes bibleTurnNext {
  0% { transform: perspective(900px) rotateY(0); opacity: 1; box-shadow: none; }
  40% { transform: perspective(900px) rotateY(-22deg) translateX(-6px); opacity: 0.5; box-shadow: -14px 0 24px rgba(0,0,0,0.35); }
  100% { transform: perspective(900px) rotateY(0); opacity: 1; box-shadow: none; }
}
@keyframes bibleTurnPrev {
  0% { transform: perspective(900px) rotateY(0); opacity: 1; box-shadow: none; }
  40% { transform: perspective(900px) rotateY(22deg) translateX(6px); opacity: 0.5; box-shadow: 14px 0 24px rgba(0,0,0,0.35); }
  100% { transform: perspective(900px) rotateY(0); opacity: 1; box-shadow: none; }
}

/* Scripture loading skeleton — contained to pane, never covers painted text forever */
.bible-gw-box { position: relative; }
#bible-pane-scripture.bible-pane-scripture {
  position: relative;
}
.bible-scripture-skeleton {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 8px 0 12px;
  background: transparent;
  pointer-events: none;
}
.bible-scripture-skeleton[hidden] {
  display: none !important;
  visibility: hidden !important;
  height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  margin: 0 !important;
}
.bible-gw-box.is-loading .write-preview-frame { opacity: 0.15; }
.bible-skel-line {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, #e2d4bc 0%, #f3eadc 45%, #e2d4bc 90%);
  background-size: 200% 100%;
  animation: bibleSkelShimmer 1.1s ease-in-out infinite;
}
.bible-skel-title { height: 18px; width: 42%; margin-bottom: 6px; }
.bible-skel-short { width: 58%; }
.bible-skel-mid { width: 78%; }
@keyframes bibleSkelShimmer {
  0% { background-position: 100% 0; }
  50% { background-position: -100% 0; }
  100% { background-position: 100% 0; }
}

html.is-bible-open .bible-sheet {
  box-shadow: 0 18px 48px rgba(0,0,0,0.45), inset 0 1px 0 rgba(232,210,176,0.12), inset -10px 0 0 rgba(232,210,176,0.04);
}


/* v2.6 mem26o — physical-book browse (cover → thumb scrub → typographic TOC; no 66-book pill wall) */
.bible-sheet[data-bible-screen="cover"] {
  padding: 14px 18px calc(14px + var(--safe-bottom)) 28px;
}
.bible-sheet[data-bible-screen="cover"] .bible-sheet-head { display: none !important; }
.bible-cover {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 16px;
  padding: 8px 4px 12px;
  overflow: auto;
}
.bible-cover-close {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 4;
}
.bible-cover[hidden] { display: none !important; }
.bible-cover-board {
  position: relative;
  flex: 1 1 auto;
  min-height: 280px;
  max-height: 520px;
  border-radius: 6px 14px 14px 6px;
  border: 1px solid rgba(212,160,84,0.35);
  box-shadow:
    inset 0 0 0 1px rgba(232,210,176,0.08),
    inset 10px 0 24px rgba(0,0,0,0.35),
    0 18px 40px rgba(0,0,0,0.4);
  background:
    radial-gradient(ellipse at 35% 28%, rgba(232,210,176,0.14), transparent 55%),
    linear-gradient(135deg, #4a3828 0%, #2a1f16 42%, #1c1510 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 28px 24px;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  overflow: hidden;
}
.bible-cover-leather {
  pointer-events: none;
  position: absolute;
  inset: 10px;
  border-radius: 4px 10px 10px 4px;
  border: 1px solid rgba(212,160,84,0.22);
  box-shadow: inset 0 0 40px rgba(0,0,0,0.35);
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 3px,
      rgba(0,0,0,0.03) 3px 4px
    );
  opacity: 0.9;
}
.bible-cover-cross {
  pointer-events: none;
  position: absolute;
  top: 18%;
  width: 28px;
  height: 44px;
  opacity: 0.55;
}
.bible-cover-cross::before,
.bible-cover-cross::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: linear-gradient(180deg, #e8d2b0, #c49248);
  transform: translate(-50%, -50%);
  border-radius: 2px;
  box-shadow: 0 0 8px rgba(212,160,84,0.35);
}
.bible-cover-cross::before { width: 6px; height: 44px; }
.bible-cover-cross::after { width: 28px; height: 6px; margin-top: -8px; }
.bible-cover-kicker {
  position: relative;
  z-index: 1;
  margin: 56px 0 0;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(232,210,176,0.7);
  font-weight: 600;
}
.bible-cover-title {
  position: relative;
  z-index: 1;
  margin: 10px 0 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: clamp(32px, 8vw, 42px);
  letter-spacing: -0.03em;
  color: #f3eadc;
  font-weight: 600;
  text-shadow: 0 2px 18px rgba(0,0,0,0.45);
}
.bible-cover-subtitle {
  position: relative;
  z-index: 1;
  margin: 10px 0 0;
  font-size: 13px;
  color: rgba(232,210,176,0.65);
  letter-spacing: 0.04em;
}
.bible-cover-spine-label { display: none; }
.bible-cover-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 0 0 auto;
}
.bible-cover-actions .submit,
.bible-cover-continue { width: 100%; }
.bible-cover-continue-ref {
  margin: 0;
  text-align: center;
  font-size: 12px;
  color: var(--muted);
}
.bible-cover-continue-ref[hidden],
.bible-cover-continue[hidden] { display: none !important; }
.bible-cover-hint {
  margin: 0;
  text-align: center;
  font-size: 11px;
  line-height: 1.4;
  color: var(--faint);
  flex: 0 0 auto;
}

/* Typographic TOC — print contents, not pills */
.bible-toc-pages {
  display: flex;
  flex-direction: column;
  gap: 18px;
  padding: 4px 2px 8px;
  background:
    linear-gradient(180deg, rgba(243,232,214,0.03), transparent 24px);
}
.bible-toc-pages[hidden] { display: none !important; }
.bible-toc-lede {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: 22px;
  letter-spacing: -0.02em;
  color: var(--text);
}
.bible-toc-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bible-toc-section { padding: 0; }
.bible-toc-genre {
  margin: 0 0 6px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--gold);
  font-weight: 600;
  border-bottom: 1px solid rgba(212,160,84,0.22);
  padding-bottom: 4px;
}
.bible-toc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.bible-toc-row { margin: 0; }
.bible-toc-book {
  appearance: none;
  width: 100%;
  display: flex;
  align-items: baseline;
  gap: 8px;
  border: 0;
  background: transparent;
  color: var(--text);
  padding: 7px 2px;
  margin: 0;
  font: inherit;
  font-size: 15px;
  text-align: left;
  cursor: pointer;
  border-radius: 0;
  border-bottom: 1px dotted rgba(232,210,176,0.14);
  touch-action: manipulation;
}
.bible-toc-book:hover,
.bible-toc-book:focus-visible {
  color: var(--gold);
  outline: none;
  background: rgba(212,160,84,0.06);
}
.bible-toc-row.is-active .bible-toc-book {
  color: var(--gold);
}
.bible-toc-name {
  font-family: "Fraunces", Georgia, serif;
  font-size: 16px;
  letter-spacing: -0.01em;
  flex: 0 1 auto;
}
.bible-toc-dots {
  flex: 1 1 auto;
  min-width: 12px;
  height: 0;
  margin-bottom: 4px;
  border-bottom: 1px dotted rgba(232,210,176,0.28);
}
.bible-toc-meta {
  flex: 0 0 auto;
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}

/* Chapter page — sparse numbered grid (page-like, not book-pill wall) */
.bible-chapter-page,
.bible-chapter-grid.bible-chapter-page {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 8px;
  padding: 8px 2px 4px;
}
.bible-chapter-num {
  appearance: none;
  border: 1px solid rgba(232,210,176,0.16);
  background: rgba(255,255,255,0.02);
  color: var(--text);
  border-radius: 8px;
  min-height: 44px;
  font-family: "Fraunces", Georgia, serif;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}
.bible-chapter-num.is-active {
  border-color: rgba(212,160,84,0.55);
  background: var(--gold-soft);
  color: var(--gold);
  font-weight: 700;
}

/* Hard reject leftover book chips if any markup sneaks back */
.bible-picker .bible-book-chip,
.bible-picker .bible-book-list .bible-book-chip,
.bible-browse-wall .bible-book-chip {
  display: none !important;
}

/* Thumb-index also on cover / TOC */
.bible-sheet[data-bible-screen="cover"] .bible-thumb-index,
.bible-sheet[data-bible-screen="picker-toc"] .bible-thumb-index,
.bible-sheet[data-bible-screen="picker-chapters"] .bible-thumb-index {
  top: 72px;
}
.bible-sheet[data-bible-screen="cover"] .bible-thumb-index {
  top: 24px;
}

.bible-scrub-preview {
  position: absolute;
  left: 36px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 8;
  pointer-events: none;
  padding: 8px 12px;
  border-radius: 10px;
  background: rgba(26, 19, 12, 0.92);
  border: 1px solid rgba(212,160,84,0.45);
  color: var(--gold);
  font-family: "Fraunces", Georgia, serif;
  font-size: 18px;
  letter-spacing: -0.02em;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  max-width: min(70%, 240px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.bible-scrub-preview[hidden] { display: none !important; }


/* v2.6 mem26p — reader owns Scripture height; hide picker leftovers; collapse verse chips */
.bible-picker[hidden],
.bible-reader[hidden],
.bible-cover[hidden] {
  display: none !important;
}

.bible-sheet[data-bible-screen="reader"] #bible-picker,
.bible-sheet[data-bible-screen="reader"] #bible-cover,
.bible-sheet[data-bible-screen="reader"] #bible-chapter-ribbon,
.bible-sheet[data-bible-screen="reader"] #bible-chapter-grid,
.bible-sheet[data-bible-screen="reader"] #bible-toc-pages,
.bible-sheet[data-bible-screen="reader"] #bible-open-chapter {
  display: none !important;
}

/* Compact chrome on reader: keep Close, shrink duplicate title block */
.bible-sheet[data-bible-screen="reader"] {
  padding-top: 10px;
}
.bible-sheet[data-bible-screen="reader"] .bible-sheet-head {
  margin-bottom: 4px;
  align-items: center;
}
.bible-sheet[data-bible-screen="reader"] .bible-sheet-head .overlay-kicker,
.bible-sheet[data-bible-screen="reader"] .bible-sheet-head #bible-printed-ch {
  display: none !important;
}
.bible-sheet[data-bible-screen="reader"] .bible-sheet-head h2 {
  font-size: 15px;
  margin: 0;
  letter-spacing: -0.01em;
  color: var(--muted);
  font-weight: 600;
  font-family: inherit;
}
.bible-sheet[data-bible-screen="reader"] .bible-reader {
  overflow: hidden;
  gap: 8px;
  padding-bottom: calc(8px + var(--safe-bottom));
}
.bible-sheet[data-bible-screen="reader"] .bible-reader-toolbar {
  gap: 6px;
}
.bible-sheet[data-bible-screen="reader"] .bible-reader-heading strong {
  font-size: 16px;
}
.bible-sheet[data-bible-screen="reader"] .bible-reader-status {
  font-size: 11px;
  min-height: 0;
  line-height: 1.2;
}
.bible-sheet[data-bible-screen="reader"] .bible-pane-tabs {
  padding: 2px;
}
.bible-sheet[data-bible-screen="reader"] .bible-pane-tabs button {
  padding: 6px 4px;
}

/* Scripture pane fills remaining height — Gateway must be readable */
.bible-sheet[data-bible-screen="reader"] #bible-page.bible-page {
  flex: 1 1 auto;
  min-height: 0;
  gap: 6px;
  padding: 6px;
  overflow: hidden;
}
.bible-sheet[data-bible-screen="reader"] #bible-pane-scripture.bible-pane {
  flex: 1 1 auto;
  min-height: min(60vh, 520px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.bible-sheet[data-bible-screen="reader"] #bible-gw-box.bible-gw-box {
  flex: 1 1 auto;
  min-height: min(60vh, 520px);
  height: auto;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}
.bible-sheet[data-bible-screen="reader"] #bible-gw-frame.write-preview-frame,
.bible-sheet[data-bible-screen="reader"] .bible-gw-box .write-preview-frame {
  flex: 1 1 auto;
  width: 100%;
  height: 100% !important;
  min-height: min(60vh, 520px);
  border: 0;
  background: #fff;
  display: block;
}
.bible-sheet[data-bible-screen="reader"] #bible-gw-box.is-blocked .write-preview-frame {
  visibility: hidden;
  pointer-events: none;
  min-height: min(50vh, 420px);
}
.bible-sheet[data-bible-screen="reader"] #bible-gw-fallback.write-preview-fallback,
.bible-sheet[data-bible-screen="reader"] #bible-gw-fallback {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 20px 16px;
  min-height: min(50vh, 420px);
  background: rgba(20, 16, 12, 0.94);
  z-index: 3;
}
.bible-sheet[data-bible-screen="reader"] #bible-gw-fallback[hidden] {
  display: none !important;
}

/* Verse chips: one-line disclosure, never a tall bubble wall */
.bible-verse-chips {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 0 0 auto;
  max-height: none;
}
.bible-verse-toggle {
  appearance: none;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid rgba(232,210,176,0.18);
  background: rgba(255,255,255,0.03);
  color: var(--text);
  border-radius: 10px;
  padding: 8px 12px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  touch-action: manipulation;
}
.bible-verse-toggle-label {
  flex: 1 1 auto;
  text-align: left;
  color: var(--muted);
}
.bible-verse-chips.is-expanded .bible-verse-toggle-label {
  color: var(--gold);
}
.bible-verse-toggle-caret {
  flex: 0 0 auto;
  color: var(--faint);
  font-size: 12px;
}
.bible-verse-chip-wall {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-height: min(28vh, 180px);
  overflow: auto;
  padding: 2px 0 4px;
}
.bible-verse-chip-wall[hidden] {
  display: none !important;
}

/* Chapter picker page: compact scrollable grid, not a fake reader */
.bible-sheet[data-bible-screen="picker-chapters"] .bible-picker {
  overflow: auto;
  gap: 10px;
}
.bible-sheet[data-bible-screen="picker-chapters"] #bible-chapter-ribbon.bible-chapter-ribbon {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  border-bottom: 0;
  padding-bottom: 12px;
}
.bible-sheet[data-bible-screen="picker-chapters"] #bible-chapter-grid.bible-chapter-grid {
  flex: 0 0 auto;
  max-height: none;
}
.bible-sheet[data-bible-screen="picker-chapters"] .bible-open-chapter-btn {
  position: sticky;
  bottom: 0;
  z-index: 2;
  margin-top: 8px;
  box-shadow: 0 -10px 20px rgba(0,0,0,0.35);
}


/* v2.6 mem26q — API.Bible native reader (Scripture owns page; Gateway = ⋯ only) */
.bible-picker[hidden],
.bible-reader[hidden],
.bible-cover[hidden] {
  display: none !important;
}

.bible-sheet[data-bible-screen="reader"] #bible-picker,
.bible-sheet[data-bible-screen="reader"] #bible-cover,
.bible-sheet[data-bible-screen="reader"] #bible-chapter-ribbon,
.bible-sheet[data-bible-screen="reader"] #bible-chapter-grid,
.bible-sheet[data-bible-screen="reader"] #bible-toc-pages,
.bible-sheet[data-bible-screen="reader"] #bible-open-chapter,
.bible-sheet[data-bible-screen="reader"] .bible-fore-edge {
  display: none !important;
}
/* mem26s: left book thumb-index stays visible while reading */
.bible-sheet[data-bible-screen="reader"] .bible-thumb-index[hidden] {
  display: none !important;
}

.bible-sheet[data-bible-screen="reader"] {
  padding: 8px 12px 0 18px;
}
.bible-sheet[data-bible-screen="reader"] .bible-sheet-head {
  margin-bottom: 2px;
  align-items: center;
}
.bible-sheet[data-bible-screen="reader"] .bible-sheet-head .overlay-kicker,
.bible-sheet[data-bible-screen="reader"] .bible-sheet-head #bible-printed-ch {
  display: none !important;
}
.bible-sheet[data-bible-screen="reader"] .bible-sheet-head h2 {
  font-size: 14px;
  margin: 0;
  color: var(--muted);
  font-family: inherit;
  font-weight: 600;
}

.bible-sheet[data-bible-screen="reader"] .bible-reader {
  overflow: hidden;
  gap: 6px;
  padding-bottom: 0;
  flex: 1 1 auto;
  min-height: 0;
}
.bible-sheet[data-bible-screen="reader"] .bible-reader-toolbar {
  gap: 4px;
  flex: 0 0 auto;
}
.bible-sheet[data-bible-screen="reader"] .bible-reader-heading strong {
  font-size: 16px;
}
.bible-sheet[data-bible-screen="reader"] .bible-reader-printed {
  display: none;
}
.bible-more-btn { min-width: 36px; font-size: 18px; line-height: 1; }
.bible-more-menu {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(0,0,0,0.35);
}
.bible-more-menu[hidden] { display: none !important; }
.bible-more-menu button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text);
  text-align: left;
  padding: 10px 12px;
  border-radius: 8px;
  font: inherit;
  font-size: 14px;
  cursor: pointer;
}
.bible-more-menu button:hover { background: rgba(212,160,84,0.12); color: var(--gold); }

/* Scripture ~85–90% of reader */
.bible-sheet[data-bible-screen="reader"] #bible-page.bible-page {
  flex: 1 1 auto;
  min-height: 0;
  gap: 0;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, #2c241c, #221b14);
  border: 1px solid rgba(232,210,176,0.1);
  border-radius: 14px;
  position: relative;
}
.bible-sheet[data-bible-screen="reader"] #bible-pane-scripture.bible-pane-scripture {
  flex: 1 1 auto;
  min-height: min(85vh, 640px);
  height: 100%;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  padding: 14px 14px 18px;
  display: block;
}
.bible-scripture-text {
  font-family: "Fraunces", Georgia, "Times New Roman", serif;
  font-size: clamp(17px, 4.4vw, 20px);
  line-height: 1.65;
  color: #f3eadc;
  letter-spacing: -0.01em;
  max-width: 40rem;
}
.bible-scripture-text.is-loading { opacity: 0.35; }
.bible-verse {
  display: inline;
  border-radius: 4px;
  transition: background 0.15s ease;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bible-verse.is-selected {
  background: rgba(212,160,84,0.22);
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
}
.bible-verse-num {
  font-family: system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--gold);
  margin-right: 4px;
  user-select: none;
}
.bible-verse-body { white-space: pre-wrap; }
.bible-verse-block .bible-verse-body { white-space: pre-wrap; }
.bible-scripture-attr {
  margin: 18px 0 8px;
  font-size: 11px;
  color: var(--faint);
  letter-spacing: 0.04em;
  font-family: system-ui, sans-serif;
}
.bible-scripture-attr[hidden] { display: none !important; }
.bible-scripture-error {
  margin: 24px 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
  text-align: center;
}
.bible-scripture-error[hidden] { display: none !important; }
.bible-inline-link {
  appearance: none;
  border: 0;
  background: none;
  color: var(--gold);
  font: inherit;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}

/* Floating action bar after verse select */
.bible-action-bar {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 8px 4px;
  border-top: 1px solid rgba(232,210,176,0.12);
  background: rgba(26,19,12,0.92);
}
.bible-action-bar[hidden] { display: none !important; }
.bible-action-ref {
  font-size: 12px;
  color: var(--gold);
  font-weight: 600;
  text-align: center;
}
.bible-action-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
}
.bible-action-btns button {
  appearance: none;
  border: 1px solid rgba(212,160,84,0.35);
  background: rgba(212,160,84,0.1);
  color: var(--text);
  border-radius: 999px;
  padding: 8px 12px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}

/* Bottom tray */
.bible-tray {
  flex: 0 0 auto;
  display: flex;
  gap: 4px;
  padding: 8px 2px calc(8px + var(--safe-bottom));
  border-top: 1px solid rgba(232,210,176,0.1);
}
.bible-tray button {
  appearance: none;
  flex: 1;
  border: 1px solid rgba(232,210,176,0.14);
  background: rgba(255,255,255,0.03);
  color: var(--muted);
  border-radius: 10px;
  padding: 8px 4px;
  font: inherit;
  font-size: 11px;
  font-weight: 600;
  cursor: pointer;
}
.bible-tray button.is-active {
  color: var(--gold);
  border-color: rgba(212,160,84,0.45);
  background: var(--gold-soft);
}
.bible-tray span {
  display: inline-block;
  min-width: 1.1em;
  font-variant-numeric: tabular-nums;
  opacity: 0.85;
}

.bible-tray-panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-height: 48%;
  overflow: auto;
  z-index: 5;
  background: rgba(26, 19, 12, 0.97);
  border-top: 1px solid rgba(212,160,84,0.28);
  border-radius: 14px 14px 0 0;
  padding: 10px 12px calc(12px + var(--safe-bottom));
  box-shadow: 0 -12px 28px rgba(0,0,0,0.35);
}
.bible-tray-panel[hidden] { display: none !important; }
.bible-tray-panel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}
.bible-tray-panel-head strong {
  font-family: "Fraunces", Georgia, serif;
  font-size: 16px;
}

/* Chapter picker stays compact scroll page */
.bible-sheet[data-bible-screen="picker-chapters"] .bible-picker {
  overflow: auto;
}
.bible-sheet[data-bible-screen="picker-chapters"] #bible-chapter-ribbon {
  flex: 1 1 auto;
  min-height: 0;
  overflow: auto;
  border-bottom: 0;
}
.bible-sheet[data-bible-screen="picker-chapters"] .bible-open-chapter-btn {
  position: sticky;
  bottom: 0;
  z-index: 2;
  box-shadow: 0 -10px 20px rgba(0,0,0,0.35);
}

/* Skeleton sits above text inside scripture pane */
.bible-pane-scripture .bible-scripture-skeleton {
  margin-bottom: 12px;
}

/* v2.6 mem26r — book→reader immediate; Scripture owns page; chapter sheet; force-hide Gateway leftovers */
.bible-gw-box[hidden],
#bible-gw-box[hidden],
.bible-verse-chips[hidden],
#bible-verse-chips[hidden],
#bible-write-bar[hidden],
#bible-gw-frame[hidden],
#bible-gw-fallback[hidden],
.bible-chapter-sheet[hidden] {
  display: none !important;
}

.bible-sheet[data-bible-screen="reader"] #bible-gw-box,
.bible-sheet[data-bible-screen="reader"] #bible-verse-chips,
.bible-sheet[data-bible-screen="reader"] #bible-write-bar,
.bible-sheet[data-bible-screen="reader"] #bible-gw-frame,
.bible-sheet[data-bible-screen="reader"] #bible-gw-fallback,
.bible-sheet[data-bible-screen="reader"] .bible-pane-tabs,
.bible-sheet[data-bible-screen="reader"] #bible-picker,
.bible-sheet[data-bible-screen="reader"] #bible-cover,
.bible-sheet[data-bible-screen="reader"] #bible-chapter-ribbon,
.bible-sheet[data-bible-screen="reader"] #bible-chapter-grid,
.bible-sheet[data-bible-screen="reader"] #bible-toc-pages,
.bible-sheet[data-bible-screen="reader"] #bible-open-chapter {
  display: none !important;
  flex: 0 0 0 !important;
  min-height: 0 !important;
  height: 0 !important;
  overflow: hidden !important;
  pointer-events: none !important;
}

.bible-sheet[data-bible-screen="reader"] .bible-reader {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
  overflow: hidden;
  gap: 6px;
}

.bible-sheet[data-bible-screen="reader"] #bible-page.bible-page {
  flex: 1 1 auto;
  min-height: 60vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  position: relative;
}

.bible-sheet[data-bible-screen="reader"] #bible-pane-scripture.bible-pane-scripture,
.bible-sheet[data-bible-screen="reader"] #bible-pane-scripture.bible-pane {
  flex: 1 1 auto;
  min-height: 60vh;
  height: auto;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
  display: block !important;
  padding: 14px 14px 18px;
}

#bible-scripture-text.bible-scripture-text {
  color: #f3eadc !important;
  min-height: 4rem;
}

.bible-reader-toolbar .bible-reader-heading {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 2px 6px;
  border-radius: 8px;
  cursor: pointer;
  min-width: 0;
  flex: 1 1 auto;
}
.bible-reader-toolbar .bible-reader-heading:hover,
.bible-reader-toolbar .bible-reader-heading:focus-visible {
  background: rgba(212,160,84,0.1);
  outline: none;
}

/* Chapter jump sheet — overlays reader, does not replace Scripture */
.bible-chapter-sheet {
  position: absolute;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  pointer-events: none;
}
.bible-chapter-sheet:not([hidden]) {
  pointer-events: auto;
}
.bible-chapter-sheet-backdrop {
  appearance: none;
  border: 0;
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  cursor: pointer;
}
.bible-chapter-sheet-card {
  position: relative;
  z-index: 1;
  width: min(100%, 520px);
  max-height: min(52vh, 420px);
  overflow: auto;
  background: #1f1812;
  border: 1px solid rgba(232,210,176,0.18);
  border-radius: 18px 18px 0 0;
  padding: 12px 14px calc(14px + var(--safe-bottom));
  box-shadow: 0 -16px 40px rgba(0,0,0,0.45);
}
.bible-chapter-sheet-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}
.bible-chapter-sheet-head h3 {
  margin: 0;
  font-family: "Fraunces", Georgia, serif;
  font-size: 18px;
  color: #f3eadc;
}
.bible-chapter-sheet-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
  gap: 8px;
}

/* v2.6 mem26r-paint — Scripture text must remain visible after load */
.bible-sheet[data-bible-screen="reader"] #bible-pane-scripture {
  position: relative !important;
  z-index: 1;
  flex: 1 1 auto !important;
  min-height: 60vh !important;
  overflow: auto !important;
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #f3eadc !important;
  background: transparent !important;
}
.bible-sheet[data-bible-screen="reader"] #bible-scripture-text,
.bible-sheet[data-bible-screen="reader"] #bible-scripture-text.bible-scripture-text,
.bible-sheet[data-bible-screen="reader"] #bible-scripture-text .bible-verse,
.bible-sheet[data-bible-screen="reader"] #bible-scripture-text .bible-verse-body {
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
  color: #f3eadc !important;
}
.bible-sheet[data-bible-screen="reader"] #bible-scripture-text.bible-scripture-text {
  display: block !important;
  min-height: 4rem !important;
  position: relative !important;
  z-index: 2 !important;
}
.bible-sheet[data-bible-screen="reader"] #bible-scripture-text.is-loading {
  opacity: 1 !important; /* never dim to invisibility */
}
.bible-sheet[data-bible-screen="reader"] #bible-scripture-skeleton[hidden],
.bible-sheet[data-bible-screen="reader"] .bible-scripture-skeleton[hidden] {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  height: 0 !important;
  max-height: 0 !important;
}
.bible-sheet[data-bible-screen="reader"] #bible-page {
  opacity: 1 !important;
  visibility: visible !important;
}



/* v2.6 mem26s — staging Bible polish mock */
.bible-page.is-turn-next { animation: bibleTurnNextMem26s 0.24s ease; }
.bible-page.is-turn-prev { animation: bibleTurnPrevMem26s 0.24s ease; }
@keyframes bibleTurnNextMem26s {
  0% { transform: perspective(900px) rotateY(0); opacity: 1; }
  40% { transform: perspective(900px) rotateY(-14deg) translateX(-6px); opacity: 0.88; box-shadow: -10px 0 22px rgba(0,0,0,0.35); }
  100% { transform: perspective(900px) rotateY(0); opacity: 1; }
}
@keyframes bibleTurnPrevMem26s {
  0% { transform: perspective(900px) rotateY(0); opacity: 1; }
  40% { transform: perspective(900px) rotateY(14deg) translateX(6px); opacity: 0.88; box-shadow: 10px 0 22px rgba(0,0,0,0.35); }
  100% { transform: perspective(900px) rotateY(0); opacity: 1; }
}
.bible-sheet[data-bible-screen="reader"] #bible-pane-scripture,
.bible-sheet[data-bible-screen="reader"] #bible-scripture-text,
.bible-sheet[data-bible-screen="reader"] #bible-scripture-text .bible-verse,
.bible-sheet[data-bible-screen="reader"] #bible-scripture-text .bible-verse-body {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none;
}
.bible-sheet[data-bible-screen="reader"].is-bible-select #bible-scripture-text.is-select-mode .bible-verse.is-selected {
  background: rgba(212,160,84,0.28);
  box-shadow: inset 0 0 0 1px rgba(212,160,84,0.35);
}
.bible-select-btn.is-active {
  color: var(--gold) !important;
  border-color: rgba(212,160,84,0.55);
  background: rgba(212,160,84,0.14);
}
.bible-chapter-slider {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px 6px;
  border-top: 1px solid rgba(232,210,176,0.12);
  background: linear-gradient(180deg, rgba(26,19,12,0.55), rgba(26,19,12,0.92));
  position: relative;
}
.bible-chapter-slider[hidden] { display: none !important; }
.bible-chapter-slider-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.bible-chapter-slider-kicker {
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--faint);
}
.bible-chapter-slider-preview {
  font-size: 13px;
  color: var(--gold);
  font-variant-numeric: tabular-nums;
}
.bible-chapter-range {
  width: 100%;
  appearance: none;
  height: 28px;
  background: transparent;
  cursor: pointer;
  margin: 0;
}
.bible-chapter-range:focus { outline: none; }
.bible-chapter-range::-webkit-slider-runnable-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(212,160,84,0.25), rgba(232,210,176,0.18));
  border: 1px solid rgba(212,160,84,0.28);
}
.bible-chapter-range::-webkit-slider-thumb {
  appearance: none;
  width: 18px;
  height: 18px;
  margin-top: -7px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid #1a130c;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.bible-chapter-range::-moz-range-track {
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(90deg, rgba(212,160,84,0.25), rgba(232,210,176,0.18));
  border: 1px solid rgba(212,160,84,0.28);
}
.bible-chapter-range::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--gold);
  border: 2px solid #1a130c;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.bible-chapter-slider-ticks {
  position: relative;
  height: 14px;
  margin: 0 8px 2px;
  pointer-events: none;
}
.bible-chapter-tick {
  position: absolute;
  transform: translateX(-50%);
  font-size: 9px;
  color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.bible-sheet[data-bible-screen="reader"] .bible-thumb-index:not([hidden]) {
  display: flex !important;
}
.bible-sheet[data-bible-screen="reader"] .bible-reader {
  padding-left: 22px;
}
.bible-sheet[data-bible-screen="reader"] .bible-tray-panel {
  max-height: 35%;
}
.bible-sheet[data-bible-screen="reader"] #bible-scripture-text.is-loading {
  opacity: 0.78 !important;
}


/* v2.6 mem26t — scripture vertical finger/mouse pan (QC FAIL→fix) */
.bible-sheet[data-bible-screen="reader"] #bible-pane-scripture,
.bible-sheet[data-bible-screen="reader"] #bible-pane-scripture.bible-pane-scripture,
.bible-sheet[data-bible-screen="reader"] #bible-pane-scripture.bible-pane {
  min-height: 0 !important; /* flex shrink so overflow:auto creates a scrollport */
  flex: 1 1 auto !important;
  overflow: auto !important;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  touch-action: pan-y; /* native pan; JS may claim touch-action:none while dragging */
  cursor: grab;
}
.bible-sheet[data-bible-screen="reader"] #bible-pane-scripture.is-panning {
  cursor: grabbing;
  user-select: none;
}
.bible-sheet[data-bible-screen="reader"] #bible-scripture-text,
.bible-sheet[data-bible-screen="reader"] #bible-scripture-text.bible-scripture-text {
  touch-action: pan-y;
}
.bible-sheet[data-bible-screen="reader"] #bible-page.bible-page {
  min-height: 0;
  touch-action: pan-y;
}


/* v2.6 mem26w — Read caught-up unlockables: fit viewport + scroll list (QC FAIL→FIX mem26v) */
/* Root cause: .empty justify-content:center + min-height:auto grew a ~3400px list inside
   a ~475px Read pane; .app overflow-y:hidden for swipe Read left no usable scroll, so
   cards painted over header/sort/Bible and under the fixed tab bar. */
.view-read.is-empty #feed-empty.empty {
  flex: 1 1 auto;
  min-height: 0; /* allow shrink so overflow children can scroll */
  max-height: 100%;
  justify-content: flex-start; /* no vertical centering that pushes title/cards off-screen */
  align-items: stretch;
  overflow: hidden; /* clip; scroll lives on #feed-next-activities */
  padding: 4px 0 0;
  text-align: center;
  position: relative;
  z-index: 0;
  isolation: isolate; /* keep unlock cards under sort/Bible/topbar stacking */
}
.app > .topbar {
  position: relative;
  z-index: 6; /* above caught-up unlock cards */
}
.view-read.is-empty #feed-empty #feed-empty-copy,
.view-read.is-empty #feed-empty .empty-copy {
  flex: 0 0 auto;
  margin: 0 auto 12px;
  max-width: 22rem;
  text-align: center;
}
.view-read.is-empty #feed-next-activities.feed-next-activities {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  max-width: 28rem;
  margin: 0 auto;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  /* keep last cards clear of fixed tab bar (app already pads, extra scroll end-gap) */
  padding-bottom: calc(8px + var(--safe-bottom));
  position: relative;
  z-index: 0;
  touch-action: pan-y;
}
.view-read.is-empty .feed-next-unlockables.unlockables-grid {
  width: 100%;
  padding-bottom: 4px;
}
.view-read.is-empty .feed-next-unlockables .unlock-card {
  position: relative;
  z-index: 0;
}

/* ========== Seasons Season 1 — BP vertical tree (staging) ========== */
/* Chrome = Fortnite BP polish. Pastoral theme lives only on unlockables/missions/fork exclusives. */

/* Standout topbar Season button + strip */
.season-top-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 148px;
  padding: 6px 10px 6px 8px;
  border-radius: 10px;
  border: 1.5px solid rgba(212, 175, 55, 0.7);
  background: linear-gradient(160deg, #2a2e38 0%, #161820 100%);
  color: #f2ead0;
  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.12), 0 4px 14px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 240, 180, 0.12);
  cursor: pointer;
  font: inherit;
  line-height: 1.05;
}
.season-top-btn:hover,
.season-top-btn:focus-visible {
  border-color: rgba(240, 200, 80, 0.95);
  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.28), 0 6px 18px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 245, 200, 0.2);
  outline: none;
}
.season-top-wool { font-size: 1.05rem; flex: 0 0 auto; }
.season-top-label { display: flex; flex-direction: column; align-items: flex-start; min-width: 0; text-align: left; }
.season-top-line1 {
  font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; color: #ffe9a0;
}
.season-top-line2 {
  font-size: 0.62rem; font-weight: 600; color: #c8c4b0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 104px;
}
.season-top-dot { position: absolute; top: 2px; right: 2px; }
@media (max-width: 420px) {
  .season-top-line2 { display: none; }
  .season-top-btn { max-width: 108px; padding-right: 8px; }
}

.season-top-btn.is-strip {
  max-width: 168px; min-width: 132px; padding: 5px 10px 6px 7px; gap: 5px; align-items: stretch;
}
.season-strip-wool { font-size: 1rem; line-height: 1; align-self: center; }
.season-strip-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.season-strip-top { display: flex; justify-content: space-between; gap: 4px; align-items: baseline; }
.season-strip-name {
  font-size: 0.62rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: #ffe9a0;
}
.season-strip-lv { font-size: 0.62rem; font-weight: 750; color: #e8e4d4; }
.season-strip-meter {
  display: block; height: 6px; border-radius: 999px; background: rgba(0,0,0,0.45);
  overflow: hidden; border: 1px solid rgba(200, 180, 80, 0.28);
}
.season-strip-meter-fill {
  display: block; height: 100%; background: linear-gradient(90deg, #5a7ab8, #f0d878); border-radius: inherit;
}
.season-strip-meta {
  display: flex; justify-content: space-between; gap: 4px; font-size: 0.55rem; font-weight: 650; color: #c0bca8;
}
.season-strip-ends { color: #d4c878; }
@media (max-width: 420px) {
  .season-top-btn.is-strip { max-width: 118px; min-width: 108px; }
  .season-strip-meta .season-strip-ends { display: none; }
}

/* Hub — sticky BP header (no pastoral art wrap) */
/* season1j: only flex when active — #you-pane-season {display:flex} used to
   override .you-pane[hidden], so Season hub leaked under Unlockables/Shop. */
#you-pane-season:not([hidden]) {
  display: flex;
  flex-direction: column;
  min-height: 0;
  /* single pane scroll when active; avoid double scroll traps */
}
#you-pane-season[hidden] {
  display: none !important;
}

/* auras1b: Unlockables/Shop stay inside #view-you; scroll under body{overflow:hidden} */
#you-pane-unlockables:not([hidden]) {
  display: block;
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding-bottom: 12px;
}
#you-pane-unlockables[hidden] {
  display: none !important;
}

.season-hub-root {
  padding: 0 0 calc(1.25rem + var(--safe-bottom, 0px) + 56px);
  max-width: 720px;
  margin: 0 auto;
}
.season-hub-cover {
  position: relative;
  margin: 0 0 0.85rem;
  padding: 0.95rem 0.95rem 0.9rem;
  border-radius: 14px;
  border: 1px solid rgba(212, 175, 55, 0.32);
  background: linear-gradient(165deg, #242830 0%, #14161c 100%);
  box-shadow: inset 0 1px 0 rgba(255, 230, 150, 0.06), 0 8px 24px rgba(0,0,0,0.28);
}
.season-hub-sticky {
  position: sticky;
  top: 0;
  z-index: 6;
  /* keep current tier clear of sticky cover */
  margin-bottom: 0.75rem;
}
.season-hub-cover-body { position: relative; }
.season-hub-kicker {
  margin: 0 0 0.2rem;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #d4c878;
  font-weight: 800;
}
.season-hub-title {
  margin: 0 0 0.3rem;
  font-size: 1.28rem;
  color: #f4f0e4;
  font-weight: 800;
  letter-spacing: 0.01em;
}
.season-hub-tag {
  margin: 0 0 0.75rem;
  color: #a8a898;
  font-size: 0.88rem;
  font-style: italic;
  line-height: 1.35;
}
.season-guest-hint {
  margin: 0 0 0.75rem;
  padding: 0.65rem 0.75rem;
  border-radius: 10px;
  background: rgba(212, 160, 84, 0.1);
  border: 1px solid rgba(212, 160, 84, 0.28);
  color: #e8d8b0;
  font-size: 0.88rem;
}
.season-hub-progress-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.season-lv-badge {
  flex: 0 0 auto;
  min-width: 52px;
  height: 52px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, #3a4050, #1c2028);
  border: 2px solid rgba(240, 200, 80, 0.65);
  box-shadow: 0 0 12px rgba(212, 175, 55, 0.22);
  line-height: 1;
}
.season-lv-badge-k {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #d4c878;
}
.season-lv-badge-n {
  font-size: 1.25rem;
  font-weight: 850;
  color: #ffe9a0;
}
.season-xp-bar {
  position: relative;
  flex: 1 1 auto;
  height: 22px;
  border-radius: 999px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(200, 180, 80, 0.3);
  overflow: hidden;
}
.season-xp-bar-fill {
  height: 100%;
  width: 0;
  border-radius: inherit;
  background: linear-gradient(90deg, #4a6aa8, #c4a84a 55%, #f0d878);
  box-shadow: 0 0 12px rgba(220, 190, 80, 0.35);
  transition: width 0.45s ease;
}
.season-xp-bar-label {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 750;
  color: #1a1a10;
  text-shadow: 0 1px 0 rgba(255,255,255,0.22);
  pointer-events: none;
}
.season-level-line {
  margin: 0.45rem 0 0;
  font-size: 0.88rem;
  color: #c8c4b4;
}
.season-days-left { color: #d4c878; font-weight: 650; }
.season-track-heading {
  margin: 0.35rem 0 0.65rem;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b8a868;
  font-weight: 800;
}
.season-track-wrap { margin-bottom: 0.85rem; }
.season-track-host { position: relative; }

/* Vertical BP tree — Lv1 at top, higher levels scroll down */
.season-tree {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 0.5rem 0.35rem 1.25rem;
  /* single scroller is the app/you pane — tree itself does not nest-scroll */
  overflow: visible;
}
.season-tree-trunk {
  position: absolute;
  left: 22px;
  top: 8px;
  bottom: 28px;
  width: 3px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(80, 90, 110, 0.45), rgba(90, 110, 150, 0.35) 45%, rgba(212, 175, 55, 0.55));
  pointer-events: none;
  z-index: 0;
}
.season-tree-row {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 0.55rem;
  align-items: stretch;
  scroll-margin-top: 148px; /* sticky header clearance */
  scroll-margin-bottom: 88px; /* tabbar clearance */
}
.season-tree-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.season-tree-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #1a1c22;
  border: 2px solid rgba(212, 175, 55, 0.7);
  box-shadow: 0 0 0 3px rgba(20, 22, 28, 0.9);
}
.season-tree-row.is-milestone-row .season-tree-dot {
  width: 18px;
  height: 18px;
  border-color: #f0d878;
  box-shadow: 0 0 10px rgba(240, 200, 80, 0.45), 0 0 0 3px rgba(20, 22, 28, 0.9);
}
.season-tree-foot {
  margin: 0.35rem 0 0 44px;
  font-size: 0.68rem;
  font-weight: 750;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8a8678;
}

/* Reward tiles */
.season-node {
  position: relative;
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 0.65rem;
  align-items: center;
  padding: 0.7rem 0.75rem 0.75rem;
  border-radius: 14px;
  border: 2px solid rgba(120, 130, 150, 0.35);
  background: linear-gradient(165deg, #1e222c 0%, #14161c 100%);
  min-height: 92px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.28);
}
.season-node.band-early { border-color: rgba(140, 160, 190, 0.45); }
.season-node.band-mid { border-color: rgba(180, 140, 220, 0.5); }
.season-node.band-late { border-color: rgba(240, 180, 70, 0.55); }
.season-node.is-locked {
  opacity: 0.72;
  filter: saturate(0.55);
}
.season-node.is-locked .season-node-label { color: #b0aa98; }
.season-node.is-unlocked {
  border-color: rgba(212, 175, 55, 0.75);
  box-shadow: 0 0 0 1px rgba(212, 175, 55, 0.2), 0 0 18px rgba(180, 150, 60, 0.22);
  animation: season-node-pulse 2.2s ease-in-out infinite;
}
.season-node.is-claimed {
  border-color: rgba(100, 180, 120, 0.5);
  background: linear-gradient(165deg, #1a2820 0%, #121816 100%);
  opacity: 0.92;
}
.season-node.is-here,
.season-node.is-current {
  border-color: rgba(240, 200, 80, 0.95);
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.4), 0 0 22px rgba(200, 170, 60, 0.3);
  /* leave room under sticky season header when browser scrollIntoView is used */
  scroll-margin-top: 7.5rem;
}
.season-node.is-milestone {
  min-height: 92px;
  padding-top: 0.7rem;
}
/* Keep milestone/capstone art the SAME fixed box as ordinary tiers */
.season-node.is-milestone .season-node-art,
.season-node.is-capstone .season-node-art {
  width: 56px;
  height: 56px;
  font-size: 1.65rem;
}
.season-node.is-capstone {
  border-color: rgba(255, 210, 90, 0.9);
  background: linear-gradient(165deg, #2e2830 0%, #18141c 100%);
}
.season-node-art {
  position: relative;
  box-sizing: border-box;
  width: 56px;
  height: 56px;
  min-width: 56px;
  min-height: 56px;
  max-width: 56px;
  max-height: 56px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.65rem;
  background: radial-gradient(circle at 35% 30%, #3a4258, #161820 72%);
  border: 1.5px solid rgba(200, 180, 80, 0.35);
  flex: 0 0 56px;
  overflow: hidden;
}
.season-node.is-locked .season-node-art {
  background: #12141a;
  border-color: rgba(120, 120, 130, 0.35);
}
.season-node-icon-box {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  line-height: 0;
}
.season-node-sil {
  opacity: 0.45;
  filter: grayscale(0.85) contrast(0.85);
}
.season-node-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  max-width: 36px;
  max-height: 36px;
  line-height: 1;
  font-size: 1.65rem;
  text-align: center;
  object-fit: contain;
}
.season-node-art img,
.season-node-art svg,
.season-node-icon img,
.season-node-icon svg,
.season-node-icon-box img,
.season-node-icon-box svg {
  width: 36px;
  height: 36px;
  max-width: 36px;
  max-height: 36px;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
.season-node-star {
  position: absolute;
  top: -6px;
  right: -6px;
  font-size: 0.85rem;
  color: #f0d878;
  text-shadow: 0 0 8px rgba(240, 200, 80, 0.6);
}
.season-node-body { min-width: 0; display: flex; flex-direction: column; gap: 0.25rem; }
.season-node-topline {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.4rem;
}
.season-node-lv-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: #ffe9a0;
  background: rgba(0,0,0,0.35);
  border: 1px solid rgba(212, 175, 55, 0.35);
}
.season-node-label {
  margin: 0;
  font-size: 0.92rem;
  font-weight: 700;
  color: #f0ead8;
  line-height: 1.25;
}
.season-you-pip {
  position: absolute;
  top: -10px;
  left: 72px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  min-height: 24px;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  background: #f0d878;
  color: #1a1608;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35);
}
.season-collect-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  align-self: flex-start;
  margin-top: 0.35rem;
  min-height: 44px;
  min-width: 96px;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  border: 1px solid rgba(212, 175, 55, 0.65);
  background: linear-gradient(180deg, #e0c050, #a88428);
  color: #1a180c;
  font-size: 0.85rem;
  font-weight: 800;
  cursor: pointer;
}
.season-claimed-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  min-height: 28px;
  color: #8fd48a;
  font-weight: 900;
  font-size: 1.05rem;
}
.season-task-list {
  list-style: none;
  margin: 0.2rem 0 0;
  padding: 0;
  display: grid;
  gap: 0.2rem;
}
.season-task {
  display: flex;
  justify-content: space-between;
  gap: 0.45rem;
  font-size: 0.72rem;
  color: #a8b090;
  line-height: 1.3;
}
.season-task.is-done { color: #8fd48a; }
.season-task-prog { font-weight: 750; color: #d4c878; white-space: nowrap; }
.season-task-gate {
  display: inline-block;
  margin-top: 0.25rem;
  font-size: 0.72rem;
  font-weight: 700;
  color: #c8b86a;
}

.season-mission-badge {
  margin: 0.15rem 0 0;
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #f0d878;
  background: rgba(212, 175, 55, 0.12);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 999px;
  padding: 0.12rem 0.45rem;
}
.season-prog-doc {
  margin: 0.75rem 0.25rem 0.35rem;
  font-size: 0.78rem;
  line-height: 1.35;
  color: #b8b2a0;
}
.season-xp-catalog-wrap { margin: 0.5rem 0 0.85rem; }
.season-xp-catalog {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.season-xp-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.45rem;
  align-items: center;
  padding: 0.45rem 0.55rem;
  border-radius: 10px;
  background: rgba(0,0,0,0.22);
  border: 1px solid rgba(120, 130, 150, 0.25);
  font-size: 0.78rem;
}
.season-xp-row-label { color: #e8e2d4; font-weight: 600; }
.season-xp-row-amt { color: #f0d878; font-weight: 800; white-space: nowrap; }
.season-xp-row-cap { color: #8a8678; font-size: 0.7rem; white-space: nowrap; }
.season-node-path-theme { margin: 0.1rem 0 0; }
.season-path-chip {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  font-size: 0.62rem;
  font-weight: 750;
  color: #d4c878;
  background: rgba(0,0,0,0.28);
  border: 1px solid rgba(200, 180, 80, 0.28);
}
@keyframes season-node-pulse {
  0%, 100% { box-shadow: 0 0 0 1px rgba(212,175,55,0.2), 0 0 12px rgba(180,150,60,0.14); }
  50% { box-shadow: 0 0 0 1px rgba(240,200,80,0.4), 0 0 20px rgba(200,170,60,0.3); }
}
@media (prefers-reduced-motion: reduce) {
  .season-node.is-unlocked { animation: none; }
  .season-xp-bar-fill { transition: none; }
}

/* Fork branch limbs (A/B) then merge — BP chrome; Sheep/Shepherd content themed */
.season-fork-doc {
  margin: 0.35rem 0 0.85rem;
  font-size: 0.8rem;
  color: var(--muted, #a8a898);
  line-height: 1.4;
}
.season-fork-block {
  position: relative;
  z-index: 1;
  margin: 0.15rem 0 0.15rem 44px;
  padding: 0.75rem 0.7rem 0.8rem;
  border-radius: 14px;
  border: 1.5px dashed rgba(180, 160, 90, 0.45);
  background: rgba(18, 20, 28, 0.92);
  scroll-margin-top: 148px;
}
.season-fork-block.is-pending {
  border-style: solid;
  border-color: rgba(240, 200, 80, 0.6);
  box-shadow: 0 0 16px rgba(200, 170, 60, 0.2);
}
.season-fork-chrome {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  margin-bottom: 0.45rem;
}
.season-fork-y {
  width: 48px;
  height: 18px;
  /* Stem from top → arms open downward into path cards (Lv1-at-top tree) */
  background:
    linear-gradient(90deg, transparent 46%, rgba(212,175,55,0.7) 46%, rgba(212,175,55,0.7) 54%, transparent 54%),
    linear-gradient(135deg, transparent 48%, rgba(212,175,55,0.55) 48%, rgba(212,175,55,0.55) 52%, transparent 52%),
    linear-gradient(45deg, transparent 48%, rgba(212,175,55,0.55) 48%, rgba(212,175,55,0.55) 52%, transparent 52%);
  opacity: 0.9;
  transform: scaleY(-1);
}
.season-fork-split-label {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #d4c878;
}
.season-fork-title {
  margin: 0 0 0.5rem;
  font-size: 0.85rem;
  font-weight: 750;
  color: #f0e8c8;
  text-align: center;
}
.season-fork-paths {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
@media (max-width: 420px) {
  .season-fork-paths { grid-template-columns: 1fr; }
  .season-node { grid-template-columns: 56px 1fr; gap: 0.55rem; padding: 0.65rem; min-height: 88px; }
  .season-node-art,
  .season-node.is-milestone .season-node-art,
  .season-node.is-capstone .season-node-art {
    width: 56px; height: 56px; min-width: 56px; min-height: 56px; max-width: 56px; max-height: 56px; flex-basis: 56px; font-size: 1.65rem;
  }
  .season-you-pip { left: 56px; }
  .season-tree-trunk { left: 20px; }
  .season-fork-block { margin-left: 40px; }
}
.season-fork-path {
  padding: 0.55rem 0.55rem 0.6rem;
  border-radius: 12px;
  border: 1px solid rgba(140, 150, 170, 0.3);
  background: rgba(0,0,0,0.28);
  min-height: 88px;
}
.season-fork-path.is-chosen { border-color: rgba(140, 200, 110, 0.6); }
.season-fork-path.is-missed { opacity: 0.45; filter: grayscale(0.4); }
.season-fork-path-label { margin: 0; font-size: 0.72rem; font-weight: 800; color: #d4c878; }
.season-fork-path-flavor { margin: 0.2rem 0; font-size: 0.68rem; color: #a8a898; font-style: italic; line-height: 1.3; }
.season-fork-path-ab { font-weight: 550; opacity: 0.75; font-size: 0.9em; }
.season-fork-path-sheep { border-color: rgba(200, 180, 120, 0.4); }
.season-fork-path-shepherd { border-color: rgba(120, 160, 200, 0.45); }
.season-fork-choice-sheep { border-color: rgba(200, 180, 120, 0.45); }
.season-fork-choice-shepherd { border-color: rgba(120, 160, 200, 0.5); }
.season-fork-reward { margin: 0.25rem 0 0; font-size: 0.78rem; color: #e8e0c0; font-weight: 700; line-height: 1.3; }
.season-fork-missed { margin: 0.25rem 0 0; font-size: 0.62rem; color: #c08070; font-weight: 700; }
.season-fork-merge {
  margin: 0.55rem 0 0.35rem;
  text-align: center;
  font-size: 0.58rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #a89860;
}
.season-fork-merge::before,
.season-fork-merge::after {
  content: "";
  display: inline-block;
  width: 22px;
  height: 1px;
  margin: 0 0.35rem;
  vertical-align: middle;
  background: rgba(180, 160, 70, 0.45);
}
.season-fork-open {
  width: 100%;
  margin-top: 0.45rem;
  min-height: 44px;
  font-size: 0.85rem;
  padding: 0.45rem 0.65rem;
}
.season-fork-chosen-note,
.season-fork-locked-note {
  margin: 0.4rem 0 0;
  font-size: 0.68rem;
  color: #a8a898;
  text-align: center;
  line-height: 1.35;
}

/* Quests */
.season-quests-wrap { margin-bottom: 1rem; }
.season-quest-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.45rem; }
.season-quest {
  display: flex; justify-content: space-between; gap: 0.75rem;
  padding: 0.55rem 0.7rem; border-radius: 10px;
  border: 1px solid rgba(140, 150, 160, 0.25); background: rgba(18, 20, 26, 0.65); font-size: 0.85rem;
}
.season-quest.is-done { border-color: rgba(120, 180, 100, 0.4); opacity: 0.85; }
.season-quest-label { color: #e0e4d4; }
.season-quest-prog { color: #d4c878; font-weight: 650; white-space: nowrap; }
.season-quest-empty { color: var(--muted, #a8a898); font-size: 0.88rem; }
.season-how { margin: 0.5rem 0 1rem; color: var(--muted, #a8a898); font-size: 0.88rem; }
.season-how summary { cursor: pointer; color: #d4c878; font-weight: 650; }
.season-how-list { margin: 0.5rem 0 0; padding-left: 1.1rem; }
.season-how-note { margin: 0.45rem 0 0; font-size: 0.8rem; opacity: 0.85; }
.season-ended-stub {
  margin: 0.75rem 0 0; padding: 0.65rem 0.75rem; border-radius: 10px;
  background: rgba(100, 80, 40, 0.25); border: 1px solid rgba(200, 160, 60, 0.3); color: #e8d8b0;
}

/* Mini bar */
.season-mini-bar { margin: 0.5rem 0 0; }
.season-mini-btn {
  width: 100%; display: flex; align-items: center; gap: 0.55rem;
  padding: 0.55rem 0.7rem; border-radius: 12px;
  border: 1px solid rgba(180, 160, 70, 0.3); background: linear-gradient(145deg, #2a2e38, #161820);
  color: #f0e8c8; cursor: pointer; font: inherit; text-align: left;
}
.season-mini-meter { flex: 1; height: 8px; border-radius: 999px; background: rgba(0,0,0,0.35); overflow: hidden; }
.season-mini-meter-fill { display: block; height: 100%; background: linear-gradient(90deg, #5a7ab8, #f0d878); }

/* Level-up ceremony — full-bleed, safe margins, Skip reachable */
.season-levelup-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  padding: max(1.25rem, env(safe-area-inset-top, 0px)) max(1.25rem, env(safe-area-inset-right, 0px)) max(1.25rem, env(safe-area-inset-bottom, 0px)) max(1.25rem, env(safe-area-inset-left, 0px));
  background: rgba(8, 10, 14, 0.82);
  backdrop-filter: blur(6px);
  opacity: 0; transition: opacity 0.25s ease;
}
.season-levelup-overlay.is-show { opacity: 1; }
.season-levelup-overlay[hidden] { display: none !important; }
.season-levelup-card {
  width: min(380px, 100%);
  padding: 1.5rem 1.25rem 1.25rem;
  border-radius: 20px; text-align: center;
  border: 1.5px solid rgba(220, 190, 80, 0.45);
  background: radial-gradient(80% 60% at 50% 0%, rgba(200, 180, 80, 0.18), transparent 55%), linear-gradient(180deg, #2a2e38 0%, #12141a 100%);
  box-shadow: 0 20px 50px rgba(0,0,0,0.55); color: #f4ecd0;
}
.season-levelup-motif { font-size: 1.75rem; margin-bottom: 0.35rem; letter-spacing: 0.35rem; }
.season-levelup-ring {
  width: 88px; height: 88px; margin: 0.35rem auto 0.65rem; border-radius: 50%;
  border: 3px solid rgba(200, 180, 80, 0.25); position: relative; overflow: hidden;
}
.season-levelup-ring-fill {
  position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(#f0d878 0deg, #5a7ab8 220deg, transparent 220deg);
  opacity: 0.85; transform: scale(0.2);
  transition: transform 1.1s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.season-levelup-overlay.is-show .season-levelup-ring-fill { transform: scale(1); }
.season-levelup-overlay.is-reduced .season-levelup-ring-fill { transition: none; transform: scale(1); }
.season-levelup-kicker {
  margin: 0; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: #d4c878; font-weight: 700;
}
.season-levelup-num {
  margin: 0.15rem 0 0.25rem; font-size: 3.2rem; font-weight: 800; line-height: 1; color: #ffe9a0;
  text-shadow: 0 4px 18px rgba(240, 200, 80, 0.35);
}
.season-levelup-num.is-slam { animation: season-level-slam 0.55s cubic-bezier(0.2, 1.2, 0.3, 1); }
@keyframes season-level-slam {
  0% { transform: scale(0.4); opacity: 0; }
  60% { transform: scale(1.12); opacity: 1; }
  100% { transform: scale(1); }
}
.season-levelup-overlay.is-reduced .season-levelup-num.is-slam { animation: none; }
.season-levelup-title { margin: 0 0 0.75rem; font-size: 1.05rem; color: #e8e0c0; }
.season-levelup-reward {
  display: flex; align-items: center; justify-content: center; gap: 0.45rem;
  margin: 0 auto 0.9rem; padding: 0.45rem 0.7rem; border-radius: 999px;
  background: rgba(0,0,0,0.28); border: 1px solid rgba(200, 180, 80, 0.3); font-size: 0.88rem;
}
.season-levelup-continue { width: 100%; margin-top: 0.25rem; min-height: 44px; }
.season-levelup-continue:disabled { opacity: 0.55; }
.season-levelup-skip {
  display: block; width: 100%; margin-top: 0.45rem; min-height: 44px;
  border: 0; background: transparent; color: #c8b86a; font: inherit; font-weight: 700;
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}
.season-levelup-hint { margin: 0.55rem 0 0; font-size: 0.78rem; color: #a8a898; }

/* Fork choice sheet */
.season-fork-sheet {
  position: fixed; inset: 0; z-index: 210;
  display: flex; align-items: flex-end; justify-content: center;
  padding: max(1rem, env(safe-area-inset-bottom, 0px));
  background: rgba(8, 10, 14, 0.72); backdrop-filter: blur(5px);
  opacity: 0; transition: opacity 0.2s ease;
}
.season-fork-sheet.is-show { opacity: 1; }
.season-fork-sheet[hidden] { display: none !important; }
.season-fork-sheet-card {
  width: min(440px, 100%); max-height: min(88vh, 640px); overflow: auto;
  padding: 1.15rem 1rem 1.2rem; border-radius: 18px 18px 14px 14px;
  border: 1.5px solid rgba(220, 190, 80, 0.4);
  background: linear-gradient(180deg, #2a2e38 0%, #12141a 100%);
  color: #f4ecd0; position: relative;
}
.season-fork-sheet-close {
  position: absolute; top: 0.45rem; right: 0.55rem; border: 0; background: transparent;
  color: #c8b86a; font-size: 1.4rem; cursor: pointer; line-height: 1;
  min-width: 44px; min-height: 44px;
}
.season-fork-sheet-kicker {
  margin: 0; font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase; color: #d4c878; font-weight: 750;
}
.season-fork-sheet-title { margin: 0.25rem 0 0.35rem; font-size: 1.2rem; color: #ffe9a0; }
.season-fork-sheet-copy { margin: 0 0 0.75rem; font-size: 0.9rem; color: #c8c4b0; line-height: 1.4; }
.season-fork-sheet-grid { display: grid; gap: 0.55rem; }
.season-fork-choice {
  text-align: left; padding: 0.8rem 0.85rem; border-radius: 14px;
  border: 1px solid rgba(180, 160, 70, 0.35); background: rgba(0,0,0,0.28);
  color: inherit; cursor: pointer; font: inherit; min-height: 44px;
}
.season-fork-choice:hover,
.season-fork-choice:focus-visible { border-color: rgba(240, 200, 80, 0.7); outline: none; }
.season-fork-choice-path { display: block; font-size: 0.68rem; font-weight: 800; color: #d4c878; letter-spacing: 0.04em; }
.season-fork-choice-label { display: block; margin-top: 0.15rem; font-size: 1rem; font-weight: 750; color: #f4ecd0; }
.season-fork-choice-flavor { display: block; margin: 0.2rem 0; font-size: 0.82rem; font-style: italic; color: #a8a898; }
.season-fork-choice-reward { display: block; font-size: 0.82rem; color: #e8d8a0; font-weight: 650; }
.season-fork-sheet-note { margin: 0.75rem 0 0; font-size: 0.75rem; color: #a89870; line-height: 1.35; }
.season-fork-sheet-confirm {
  margin-top: 0.75rem; padding-top: 0.75rem; border-top: 1px solid rgba(180, 160, 70, 0.25);
}
.season-fork-sheet-confirm .invite,
.season-fork-sheet-confirm .submit { margin-top: 0.4rem; width: 100%; min-height: 44px; }

/* Season themes */
html.theme-meadow-tint {
  --ink: #121610;
  --ink-2: #181e14;
  --paper: #222c1c;
  --paper-2: #2c3824;
  --line: rgba(170, 190, 100, 0.14);
  --text: #eef4e4;
  --muted: #b0c498;
  --faint: #809870;
  --gold: #c8b050;
  --gold-soft: rgba(200, 176, 80, 0.16);
}
html.theme-pasture {
  --ink: #10140e;
  --ink-2: #161c12;
  --paper: #1e281a;
  --paper-2: #283422;
  --line: rgba(150, 190, 110, 0.14);
  --text: #eef6ea;
  --muted: #a8c898;
  --faint: #789878;
  --gold: #a8c060;
  --gold-soft: rgba(168, 192, 96, 0.16);
}
.unlock-theme-swatch[data-theme="theme-meadow-tint"],
.gacha-reward-theme[data-theme="theme-meadow-tint"] {
  background: linear-gradient(135deg, rgba(170,190,100,0.5), rgba(200,176,80,0.25));
  border-color: rgba(200,180,80,0.35);
}
.unlock-theme-swatch[data-theme="theme-pasture"],
.gacha-reward-theme[data-theme="theme-pasture"] {
  background: linear-gradient(135deg, rgba(150,190,110,0.5), rgba(168,192,96,0.25));
  border-color: rgba(150,190,110,0.35);
}/* mem28o: removed thin-ring override for .frame-wool-soft */
/* mem28o: removed thin-ring override for .frame-shepherds-watch (uses shop SVG art) */

@keyframes season-wool-shimmer {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.18); }
}
@keyframes season-watch-glow {
  0%, 100% { box-shadow: 0 0 0 3px rgba(80,120,50,0.45), 0 0 16px rgba(212,175,55,0.4); }
  50% { box-shadow: 0 0 0 3px rgba(120,160,70,0.55), 0 0 26px rgba(240,200,80,0.7); }
}
@media (prefers-reduced-motion: reduce) {
  .avatar-cosmetic-wrap.has-frame.frame-wool-animated::before,
  #account-avatar-btn.frame-wool-animated.has-frame::before,
  .unlock-carousel-frame-av.frame-wool-animated.has-frame::before,
  .avatar-crop-deco.frame-wool-animated.has-frame::before,
  .gacha-reward-frame.frame-wool-animated.has-frame::before,
  .unlock-studio-avatar-wrap.has-frame.frame-wool-animated::before,
  .crop-frame-icon-av.frame-wool-animated.has-frame::before,
  .avatar-cosmetic-wrap.has-frame.frame-shepherds-watch::before,
  #account-avatar-btn.frame-shepherds-watch.has-frame::before,
  .unlock-carousel-frame-av.frame-shepherds-watch.has-frame::before,
  .avatar-crop-deco.frame-shepherds-watch.has-frame::before,
  .gacha-reward-frame.frame-shepherds-watch.has-frame::before,
  .unlock-studio-avatar-wrap.has-frame.frame-shepherds-watch::before,
  .crop-frame-icon-av.frame-shepherds-watch.has-frame::before {
    animation: none;
  }
}




/* frame-crown-of-thorns — auras1e: thorns circle OUTSIDE face; animated brown/green breathe */
#account-avatar-btn.frame-crown-of-thorns.has-frame .avatar,
#account-avatar-btn.frame-crown-of-thorns.has-frame #account-home-avatar {
  box-shadow: 0 0 0 4px #6b4a32, 0 0 0 8px rgba(90, 60, 40, 0.4);
}
.gacha-reward-frame.frame-crown-of-thorns.has-frame > .avatar {
  box-shadow: 0 0 0 4px #6b4a32, 0 0 0 8px rgba(90, 60, 40, 0.4);
}
.avatar-crop-deco.frame-crown-of-thorns.has-frame {
  box-shadow: 0 0 0 4px #6b4a32, 0 0 0 8px rgba(90, 60, 40, 0.4);
}
.crop-frame-icon-av.has-frame.frame-crown-of-thorns > .avatar {
  box-shadow: 0 0 0 2px #6b4a32, 0 0 0 4px rgba(90, 60, 40, 0.4);
}
.avatar-cosmetic-wrap.has-frame.frame-crown-of-thorns::before,
#account-avatar-btn.frame-crown-of-thorns.has-frame::before,
.avatar-crop-deco.frame-crown-of-thorns.has-frame::before,
.crop-frame-icon-av.frame-crown-of-thorns.has-frame::before,
.gacha-reward-frame.frame-crown-of-thorns.has-frame::before,
.unlock-carousel-frame-av.frame-crown-of-thorns.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-crown-of-thorns::before {
  background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%20100%20100%22%20fill%3D%22none%22%3E%20%3C%21--%20clear%20face%3A%20no%20fill%20inside%20r~38%20--%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2250%22%20r%3D%2239%22%20stroke%3D%22%235a4030%22%20stroke-width%3D%223.2%22%20opacity%3D%22.35%22%2F%3E%20%3C%21--%20woven%20twig%20ring%20--%3E%20%3Cpath%20d%3D%22M50%208c14%201%2028%208%2036%2020-6-2-12%202-14%208%208-4%2016-2%2022%206-8%200-14%206-14%2014%2010%202%2016%2010%2016%2020-8-4-12%202-10%2010%206%206%206%2016%200%2024-4-8-12-10-18-6%200%208-6%2014-14%2016%204%206%202%2014-4%2020-6-6-14-6-20-2-2%208-10%2012-18%2012%202-8-2-14-10-16-6%206-16%204-22-2%204-6%202-14-2-20-8%200-14-6-16-14%206-2%2010-8%208-16-8-2-12-10-10-18%208%202%2012-4%2012-12-8-2-10-12-6-20%208%204%2014%202%2018-4C28%2012%2040%207%2050%208z%22%20stroke%3D%22%236b4a32%22%20stroke-width%3D%222.4%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M50%2011c12%201%2024%207%2031%2017-5-1-10%202-12%207%207-3%2014-1%2019%205-7%200-12%205-12%2012%208%202%2014%209%2014%2017-7-3-10%202-9%209%205%205%205%2014%200%2020-4-7-10-8-15-5%200%207-5%2012-12%2014%203%205%202%2012-3%2017-5-5-12-5-17-2-2%207-8%2010-15%2010%202-7-2-12-8-14-5%205-14%203-19-2%203-5%202-12-2-17-7%200-12-5-14-12%205-2%208-7%207-14-7-2-10-9-9-16%207%202%2010-3%2010-10-7-2-9-10-5-17%207%203%2012%202%2015-3C30%2014%2040%2010%2050%2011z%22%20stroke%3D%22%238a6238%22%20stroke-width%3D%221.6%22%20fill%3D%22none%22%20opacity%3D%22.85%22%2F%3E%20%3C%21--%20thorns%20pointing%20outward%20%28outside%20crop%29%20--%3E%20%3Cpath%20d%3D%22M50%206l1.5-7M46%207l-2-6.5M54%207l2-6.5%22%20stroke%3D%22%234a3020%22%20stroke-width%3D%221.6%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M72%2012l4-5.5M78%2018l5-4M82%2026l6-2.5%22%20stroke%3D%22%235a3828%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M90%2042l7-1M92%2050l7.5%200M90%2058l7%201.5%22%20stroke%3D%22%234a3020%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M82%2074l5.5%204M74%2084l4.5%205M64%2090l2.5%206%22%20stroke%3D%22%235a3828%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M50%2094l0%207M42%2092l-2%206.5M58%2092l2%206.5%22%20stroke%3D%22%234a3020%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M28%2084l-4.5%205M18%2074l-5.5%204M12%2062l-6.5%202%22%20stroke%3D%22%235a3828%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M8%2050l-7.5%200M10%2042l-7-1M12%2058l-6.5%201.5%22%20stroke%3D%22%234a3020%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%2F%3E%20%3Cpath%20d%3D%22M18%2026l-6-2.5M22%2018l-5-4M28%2012l-4-5.5%22%20stroke%3D%22%235a3828%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%2F%3E%20%3C%21--%20extra%20top%20hang%20thorns%20%28slight%20crown%20rise%29%20--%3E%20%3Cpath%20d%3D%22M40%205l-3-7M60%205l3-7M50%203l0-8M35%209l-4-5M65%209l4-5%22%20stroke%3D%22%233d2818%22%20stroke-width%3D%221.7%22%20stroke-linecap%3D%22round%22%2F%3E%20%3C%21--%20small%20green%20tips%20%28living%20vine%20hint%29%20--%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%225%22%20r%3D%221.4%22%20fill%3D%22%236a8a40%22%2F%3E%20%3Ccircle%20cx%3D%2278%22%20cy%3D%2216%22%20r%3D%221.2%22%20fill%3D%22%235a7a38%22%2F%3E%20%3Ccircle%20cx%3D%2293%22%20cy%3D%2248%22%20r%3D%221.2%22%20fill%3D%22%236a8a40%22%2F%3E%20%3Ccircle%20cx%3D%2278%22%20cy%3D%2282%22%20r%3D%221.2%22%20fill%3D%22%235a7a38%22%2F%3E%20%3Ccircle%20cx%3D%2250%22%20cy%3D%2295%22%20r%3D%221.2%22%20fill%3D%22%236a8a40%22%2F%3E%20%3Ccircle%20cx%3D%2222%22%20cy%3D%2282%22%20r%3D%221.2%22%20fill%3D%22%235a7a38%22%2F%3E%20%3Ccircle%20cx%3D%227%22%20cy%3D%2250%22%20r%3D%221.2%22%20fill%3D%22%236a8a40%22%2F%3E%20%3Ccircle%20cx%3D%2222%22%20cy%3D%2218%22%20r%3D%221.2%22%20fill%3D%22%235a7a38%22%2F%3E%20%3C%2Fsvg%3E");
  animation: crown-thorns-breathe 3.2s ease-in-out infinite;
}
@keyframes crown-thorns-breathe {
  0%, 100% { filter: brightness(1) saturate(1) hue-rotate(0deg); }
  50% { filter: brightness(1.12) saturate(1.15) hue-rotate(18deg); }
}
@media (prefers-reduced-motion: reduce) {
  .avatar-cosmetic-wrap.has-frame.frame-crown-of-thorns::before,
  #account-avatar-btn.frame-crown-of-thorns.has-frame::before,
  .avatar-crop-deco.frame-crown-of-thorns.has-frame::before,
  .crop-frame-icon-av.frame-crown-of-thorns.has-frame::before,
  .gacha-reward-frame.frame-crown-of-thorns.has-frame::before,
  .unlock-carousel-frame-av.frame-crown-of-thorns.has-frame::before,
  .unlock-studio-avatar-wrap.has-frame.frame-crown-of-thorns::before {
    animation: none;
  }
}

/* Fork exclusive themes (season-only) */
html.theme-s1-wool-dawn {
  --ink: #14120e; --ink-2: #1a1812; --paper: #262218; --paper-2: #322c1c;
  --line: rgba(220, 200, 140, 0.14); --text: #faf6e8; --muted: #d0c498;
  --faint: #a09460; --gold: #e0c878; --gold-soft: rgba(224, 200, 120, 0.16);
}
html.theme-s1-hill-watch {
  --ink: #101410; --ink-2: #161c14; --paper: #1e281c; --paper-2: #283426;
  --line: rgba(160, 190, 100, 0.14); --text: #eef6ea; --muted: #b0c8a0;
  --faint: #809870; --gold: #c8b050; --gold-soft: rgba(200, 176, 80, 0.16);
}
.unlock-theme-swatch[data-theme="theme-s1-wool-dawn"],
.gacha-reward-theme[data-theme="theme-s1-wool-dawn"] {
  background: linear-gradient(135deg, rgba(224,200,120,0.5), rgba(220,200,140,0.25));
}
.unlock-theme-swatch[data-theme="theme-s1-hill-watch"],
.gacha-reward-theme[data-theme="theme-s1-hill-watch"] {
  background: linear-gradient(135deg, rgba(160,190,100,0.5), rgba(200,176,80,0.25));
}/* mem28o: removed thin-ring override for .frame-s1-meadow-sheep (uses shop SVG art) */
/* mem28o: removed thin-ring override for .frame-s1-still-waters (uses shop SVG art) */



/* === season1i: guest shop browse + season1h type chips/auras/holofoil === */
/* === season1j: Season vs Unlockables panes fully exclusive (hidden beats #display:flex) === */
.season-kind-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.12rem 0.4rem;
  border-radius: 999px;
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  white-space: nowrap;
  max-width: 7.5rem;
  overflow: hidden;
  text-overflow: ellipsis;
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(0,0,0,0.35);
  color: #e8e2d4;
}
.season-kind-chip.kind-sticker { background: #3a2a18; color: #f0d878; border-color: rgba(240,200,80,0.45); }
.season-kind-chip.kind-frame { background: #1e2a3a; color: #9ec8f0; border-color: rgba(120,180,240,0.45); }
.season-kind-chip.kind-theme { background: #2a1e3a; color: #d0b0f0; border-color: rgba(180,140,220,0.5); }
.season-kind-chip.kind-title { background: #2a2410; color: #f0e0a0; border-color: rgba(212,175,55,0.5); }
.season-kind-chip.kind-aura { background: #1a2830; color: #a8f0e0; border-color: rgba(100,220,200,0.55); }
.season-kind-chip.kind-coins { background: #2a2810; color: #f0d878; border-color: rgba(212,175,55,0.4); }
.season-kind-chip.kind-nameplate { background: #1e3020; color: #b8e0b0; border-color: rgba(120,180,100,0.45); }
.season-kind-chip.kind-badge { background: #302010; color: #f0c878; border-color: rgba(220,160,60,0.5); }
.season-kind-chip.kind-study_card_back { background: #201828; color: #d0b8e8; border-color: rgba(160,120,200,0.45); }
.season-kind-chip.kind-share_flourish { background: #281820; color: #f0b8d0; border-color: rgba(220,140,180,0.45); }
.season-kind-chip.kind-comment_skin { background: #182028; color: #a8c8e8; border-color: rgba(100,160,220,0.45); }
.season-kind-chip.kind-dual_edge { background: #282010; color: #e8d090; border-color: rgba(200,170,80,0.5); }
.season-node-topline { flex-wrap: wrap; gap: 0.3rem; }

/* Aura FX — outer only (never cover face); stacks with frames (::before = frame, ::after = aura)
   auras1f: ALWAYS concentric on face. Size from --av (face diameter). Center with
   left/top 50% + translate:-50%/-50% (independent of transform animations). No cqmin. */
.season-aura-preview,
.aura-preview-host,
.season-fork-aura-preview {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  overflow: visible;
  flex-shrink: 0;
  --av: 56px;
}
.shop-aura-mini.aura-preview-host,
.aura-preview-host.shop-aura-mini {
  width: 48px;
  height: 48px;
  --av: 48px;
}
.unlock-aura-mini.aura-preview-host,
.aura-preview-host.unlock-aura-mini,
.unlock-aura-chip-preview.aura-preview-host {
  width: 44px;
  height: 44px;
  --av: 44px;
}
.season-aura-core,
.aura-preview-core {
  position: relative;
  z-index: 2;
  font-size: 1.35rem;
  line-height: 1;
}
/* b47: aura card previews — user PFP centered (same idea as framePreviewHtml) */
.aura-preview-host > .avatar {
  position: relative;
  z-index: 2;
  width: calc(var(--av, 56px) * 0.72) !important;
  height: calc(var(--av, 56px) * 0.72) !important;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--av, 56px) * 0.28);
  line-height: 1;
}
.aura-preview-host > .avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
/* Hosts must be face-sized squares; --av is the face diameter used by ::after */
.avatar-cosmetic-wrap.has-aura,
.unlock-studio-avatar-wrap.has-aura,
.account-avatar-btn.has-aura,
.gacha-reward-aura .aura-preview-host {
  overflow: visible;
}
/* auras1g — tighter diameters (QC); glow blur/spread via --av; concentric center kept */
.has-aura::after,
.aura-preview-host::after,
.season-aura-preview::after,
.season-fork-aura-preview::after {
  content: "";
  position: absolute;
  /* inset first so left/top below win (auras1f concentric) */
  inset: auto;
  left: 50%;
  top: 50%;
  /* translate property is separate from transform — animations keep using transform */
  translate: -50% -50%;
  width: calc(var(--av, 32px) * 1.2);
  height: calc(var(--av, 32px) * 1.2);
  margin: 0;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  z-index: 0;
  pointer-events: none;
  box-shadow: 0 0 calc(var(--av, 32px) * 0.28) calc(var(--av, 32px) * 0.1) rgba(160, 220, 200, 0.35);
  opacity: 0.75;
  will-change: transform, opacity, box-shadow;
  transform-origin: center center;
}
/* Aura uses ::after only so it stacks with frames (::before). */

/* —— Soft / girly entry ——  ~1.18–1.25× */
.aura-pink-bubbles::after{
  width: calc(var(--av, 32px) * 1.22); height: calc(var(--av, 32px) * 1.22);
  background:
    radial-gradient(circle at 20% 30%, rgba(255,150,200,0.55) 0 6%, transparent 8%),
    radial-gradient(circle at 75% 25%, rgba(255,180,220,0.45) 0 5%, transparent 7%),
    radial-gradient(circle at 30% 75%, rgba(255,120,190,0.4) 0 5%, transparent 7%),
    radial-gradient(circle at 80% 70%, rgba(255,200,230,0.5) 0 6%, transparent 8%);
  box-shadow: 0 0 calc(var(--av, 32px) * 0.32) calc(var(--av, 32px) * 0.12) rgba(255, 140, 190, 0.45);
  animation: aura-bubbles 3.2s ease-in-out infinite;
  opacity: 0.85;
}
.aura-baby-blue::after{
  width: calc(var(--av, 32px) * 1.2); height: calc(var(--av, 32px) * 1.2);
  background: radial-gradient(circle, rgba(170,220,255,0.25) 0%, transparent 65%);
  box-shadow:
    0 0 calc(var(--av, 32px) * 0.28) calc(var(--av, 32px) * 0.1) rgba(140, 200, 255, 0.5),
    0 0 calc(var(--av, 32px) * 0.5) calc(var(--av, 32px) * 0.16) rgba(180, 230, 255, 0.25);
  animation: aura-shimmer 2.8s ease-in-out infinite;
  opacity: 0.8;
}
.aura-soft-wool::after, .aura-s1-lambs-rest::after{
  box-shadow: 0 0 calc(var(--av, 32px) * 0.24) calc(var(--av, 32px) * 0.08) rgba(232, 220, 190, 0.45);
  animation: aura-breathe 3.6s ease-in-out infinite;
  opacity: 0.6;
}
.aura-meadow-haze::after{
  box-shadow:
    0 0 calc(var(--av, 32px) * 0.28) calc(var(--av, 32px) * 0.1) rgba(150, 200, 130, 0.4),
    0 0 calc(var(--av, 32px) * 0.45) calc(var(--av, 32px) * 0.16) rgba(200, 230, 160, 0.2);
  animation: aura-breathe 3.2s ease-in-out infinite;
  opacity: 0.65;
}
.aura-pearl-mist::after{
  box-shadow:
    0 0 calc(var(--av, 32px) * 0.26) calc(var(--av, 32px) * 0.08) rgba(230, 230, 240, 0.55),
    0 0 calc(var(--av, 32px) * 0.42) calc(var(--av, 32px) * 0.14) rgba(200, 210, 230, 0.25);
  animation: aura-breathe 3.4s ease-in-out infinite;
  opacity: 0.7;
}
.aura-lavender-drift::after{
  box-shadow:
    0 0 calc(var(--av, 32px) * 0.28) calc(var(--av, 32px) * 0.1) rgba(190, 160, 230, 0.5),
    0 0 calc(var(--av, 32px) * 0.5) calc(var(--av, 32px) * 0.18) rgba(210, 180, 255, 0.22);
  animation: aura-shimmer 3s ease-in-out infinite;
  opacity: 0.75;
}

/* —— Mid pulse / shimmer ——  ~1.25–1.32× */
.aura-still-ripple::after{
  animation: aura-ripple 2.6s ease-out infinite;
  box-shadow:
    0 0 0 0 rgba(100, 180, 220, 0.45),
    0 0 calc(var(--av, 32px) * 0.28) calc(var(--av, 32px) * 0.1) rgba(120, 190, 230, 0.35);
}
.aura-hill-ember::after, .aura-shepherds-watch::after{
  animation: aura-pulse 2.4s ease-in-out infinite;
  box-shadow:
    0 0 calc(var(--av, 32px) * 0.32) calc(var(--av, 32px) * 0.12) rgba(240, 160, 70, 0.5),
    0 0 calc(var(--av, 32px) * 0.5) calc(var(--av, 32px) * 0.18) rgba(255, 120, 40, 0.18);
}
.aura-cloak-mist::after, .aura-s1-shepherds-cloak::after{
  animation: aura-mist 3.5s ease-in-out infinite;
  box-shadow:
    0 0 calc(var(--av, 32px) * 0.34) calc(var(--av, 32px) * 0.12) rgba(140, 160, 180, 0.4),
    0 0 calc(var(--av, 32px) * 0.52) calc(var(--av, 32px) * 0.2) rgba(100, 120, 150, 0.2);
  background: radial-gradient(circle, rgba(180,200,220,0.2) 0%, transparent 70%);
}
.aura-rose-sparkle::after{
  /* soft tier: match Pink Bubbles footprint (~1.22×); sparkles = tiny radial dots only (no offset box-shadow discs) */
  width: calc(var(--av, 32px) * 1.22); height: calc(var(--av, 32px) * 1.22);
  animation: aura-rose-sparkle 2.2s ease-in-out infinite;
  background:
    radial-gradient(circle at 18% 28%, rgba(255,200,230,0.95) 0 5%, transparent 7%),
    radial-gradient(circle at 78% 22%, rgba(255,255,255,0.9) 0 4%, transparent 6%),
    radial-gradient(circle at 32% 78%, rgba(255,150,200,0.75) 0 5%, transparent 7%),
    radial-gradient(circle at 82% 68%, rgba(255,180,210,0.7) 0 4%, transparent 6%),
    radial-gradient(circle at 52% 48%, rgba(255,220,240,0.45) 0 3%, transparent 5%);
  box-shadow:
    0 0 calc(var(--av, 32px) * 0.22) calc(var(--av, 32px) * 0.08) rgba(255, 120, 170, 0.55),
    0 0 calc(var(--av, 32px) * 0.28) calc(var(--av, 32px) * 0.1) rgba(255, 180, 210, 0.28);
  opacity: 0.85;
}
.aura-cotton-candy::after{
  width: calc(var(--av, 32px) * 1.28); height: calc(var(--av, 32px) * 1.28);
  animation: aura-bubbles 2.8s ease-in-out infinite;
  background:
    radial-gradient(circle at 25% 20%, rgba(255,160,210,0.6) 0 7%, transparent 84%),
    radial-gradient(circle at 70% 35%, rgba(180,210,255,0.55) 0 6%, transparent 68%),
    radial-gradient(circle at 40% 80%, rgba(255,190,230,0.5) 0 8%, transparent 100%),
    radial-gradient(circle at 60% 15%, rgba(255,200,230,0.5) 0 5%, transparent 52%),
    radial-gradient(circle at 20% 60%, rgba(200,220,255,0.45) 0 5%, transparent 52%);
  box-shadow:
    0 0 calc(var(--av, 32px) * 0.36) calc(var(--av, 32px) * 0.12) rgba(255, 160, 210, 0.45),
    0 0 calc(var(--av, 32px) * 0.5) calc(var(--av, 32px) * 0.18) rgba(170, 200, 255, 0.3);
}
.aura-honey-glow::after{
  animation: aura-pulse 2.5s ease-in-out infinite;
  box-shadow:
    0 0 calc(var(--av, 32px) * 0.34) calc(var(--av, 32px) * 0.12) rgba(255, 190, 80, 0.55),
    0 0 calc(var(--av, 32px) * 0.55) calc(var(--av, 32px) * 0.2) rgba(240, 160, 40, 0.25);
  background: radial-gradient(circle, rgba(255,210,100,0.2) 0%, transparent 68%);
}
.aura-living-water::after{
  animation: aura-ripple 2.4s ease-out infinite;
  box-shadow:
    0 0 0 0 rgba(60, 180, 220, 0.5),
    0 0 calc(var(--av, 32px) * 0.32) calc(var(--av, 32px) * 0.1) rgba(80, 190, 230, 0.4);
  background: radial-gradient(circle, rgba(100,210,240,0.22) 0%, transparent 65%);
}
.aura-star-bethlehem::after{
  width: calc(var(--av, 32px) * 1.3); height: calc(var(--av, 32px) * 1.3);
  animation: aura-star-twinkle 2s ease-in-out infinite;
  background:
    radial-gradient(circle at 50% 8%, #fff9c0 0 3px, transparent 5px),
    radial-gradient(circle at 18% 40%, #fff 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 82% 45%, #ffe680 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 50% 50%, rgba(255,230,140,0.2) 0%, transparent 60%);
  box-shadow:
    0 0 calc(var(--av, 32px) * 0.36) calc(var(--av, 32px) * 0.12) rgba(255, 220, 100, 0.55),
    0 calc(var(--av, 32px) * -0.16) calc(var(--av, 32px) * 0.42) calc(var(--av, 32px) * 0.08) rgba(255, 240, 180, 0.35);
}

/* —— Epic / showpiece ——  ~1.32–1.38× (spectacle via color/anim, not diameter) */
.aura-flock-radiance::after, .aura-shepherd-glory::after, .aura-flock-keeper::after{
  width: calc(var(--av, 32px) * 1.34); height: calc(var(--av, 32px) * 1.34);
  animation: aura-epic 2.8s ease-in-out infinite;
  background: conic-gradient(from 0deg, rgba(240,200,80,0.18), transparent 40%, rgba(120,200,255,0.22), transparent 70%, rgba(240,180,100,0.2));
  box-shadow:
    0 0 calc(var(--av, 32px) * 0.38) calc(var(--av, 32px) * 0.12) rgba(255, 210, 100, 0.55),
    0 0 calc(var(--av, 32px) * 0.6) calc(var(--av, 32px) * 0.22) rgba(120, 180, 255, 0.25);
}
.aura-lambs-crown::after{
  width: calc(var(--av, 32px) * 1.38); height: calc(var(--av, 32px) * 1.38);
  animation: aura-crown-spin 4s linear infinite;
  background:
    conic-gradient(from 0deg, transparent 0 8%, rgba(255,230,140,0.4) 9% 11%, transparent 12% 20%, rgba(255,200,80,0.35) 21% 23%, transparent 24% 33%, rgba(255,240,180,0.3) 34% 36%, transparent 37% 100%),
    conic-gradient(from 40deg, rgba(255,220,120,0.3), transparent 35%, rgba(255,180,80,0.22), transparent 65%, rgba(255,240,180,0.28));
  box-shadow:
    0 0 calc(var(--av, 32px) * 0.4) calc(var(--av, 32px) * 0.14) rgba(255, 215, 100, 0.65),
    0 calc(var(--av, 32px) * -0.18) calc(var(--av, 32px) * 0.48) calc(var(--av, 32px) * 0.14) rgba(255, 230, 150, 0.4);
}
.aura-olive-corona::after{
  width: calc(var(--av, 32px) * 1.34); height: calc(var(--av, 32px) * 1.34);
  animation: aura-epic 3s ease-in-out infinite;
  box-shadow:
    0 0 calc(var(--av, 32px) * 0.38) calc(var(--av, 32px) * 0.12) rgba(140, 180, 80, 0.55),
    0 0 calc(var(--av, 32px) * 0.58) calc(var(--av, 32px) * 0.2) rgba(180, 210, 100, 0.3);
  background: radial-gradient(circle, rgba(160,200,90,0.2) 0%, transparent 65%);
}
.aura-rainbow-promise::after{
  width: calc(var(--av, 32px) * 1.36); height: calc(var(--av, 32px) * 1.36);
  animation: aura-rainbow-spin 4.5s linear infinite;
  background: conic-gradient(from 0deg, rgba(255,100,120,0.35), rgba(255,180,80,0.35), rgba(255,230,100,0.35), rgba(120,220,140,0.35), rgba(100,180,255,0.35), rgba(180,120,255,0.35), rgba(255,100,120,0.35));
  -webkit-mask: radial-gradient(circle, transparent 84%, #000 87.7%, #000 95.7%, transparent 100%);
  mask: radial-gradient(circle, transparent 84%, #000 87.7%, #000 95.7%, transparent 100%);
  opacity: 0.85;
  box-shadow: 0 0 calc(var(--av, 32px) * 0.34) calc(var(--av, 32px) * 0.1) rgba(180, 200, 255, 0.35);
}
.aura-burning-bush::after{
  width: calc(var(--av, 32px) * 1.34); height: calc(var(--av, 32px) * 1.34);
  animation: aura-flame-flicker 1.4s ease-in-out infinite;
  background:
    radial-gradient(ellipse 70% 55% at 50% 78%, rgba(255,120,40,0.55) 0%, transparent 70%),
    radial-gradient(ellipse 50% 40% at 45% 60%, rgba(255,200,60,0.4) 0%, transparent 70%),
    radial-gradient(ellipse 40% 35% at 58% 55%, rgba(255,80,30,0.35) 0%, transparent 70%),
    radial-gradient(circle at 30% 70%, rgba(255,180,60,0.9) 0 2px, transparent 3px),
    radial-gradient(circle at 60% 75%, rgba(255,100,40,0.85) 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 45% 85%, rgba(255,220,100,0.8) 0 2px, transparent 3px);
  box-shadow:
    0 calc(var(--av, 32px) * 0.16) calc(var(--av, 32px) * 0.42) calc(var(--av, 32px) * 0.12) rgba(255, 100, 30, 0.45),
    0 calc(var(--av, 32px) * -0.08) calc(var(--av, 32px) * 0.36) calc(var(--av, 32px) * 0.08) rgba(255, 200, 80, 0.25);
}
/* Daniel 3 fiery furnace — semi-transparent flame ring OUTSIDE face */
.aura-furnace-flame::after{
  width: calc(var(--av, 32px) * 1.38); height: calc(var(--av, 32px) * 1.38);
  animation: aura-furnace 1.1s ease-in-out infinite;
  background:
    radial-gradient(ellipse 80% 60% at 50% 85%, rgba(255,60,20,0.55) 0%, transparent 65%),
    radial-gradient(ellipse 55% 50% at 35% 70%, rgba(255,140,30,0.5) 0%, transparent 70%),
    radial-gradient(ellipse 50% 45% at 68% 68%, rgba(255,200,50,0.45) 0%, transparent 70%),
    radial-gradient(ellipse 40% 35% at 50% 55%, rgba(255,240,160,0.3) 0%, transparent 75%),
    radial-gradient(circle at 25% 80%, #ffcc66 0 2px, transparent 3px),
    radial-gradient(circle at 70% 85%, #ff6622 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 45% 90%, #ffe0a0 0 2px, transparent 3px),
    radial-gradient(circle at 55% 75%, #ff4411 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 35% 88%, #ffaa44 0 1px, transparent 2px);
  box-shadow:
    0 calc(var(--av, 32px) * 0.18) calc(var(--av, 32px) * 0.48) calc(var(--av, 32px) * 0.14) rgba(255, 80, 20, 0.55),
    0 0 calc(var(--av, 32px) * 0.6) calc(var(--av, 32px) * 0.22) rgba(255, 140, 40, 0.35),
    0 calc(var(--av, 32px) * -0.12) calc(var(--av, 32px) * 0.38) calc(var(--av, 32px) * 0.08) rgba(255, 220, 100, 0.25);
  opacity: 0.92;
}

@keyframes aura-breathe {
  0%, 100% { opacity: 0.5; transform: scale(0.97); }
  50% { opacity: 0.85; transform: scale(1.03); }
}
@keyframes aura-shimmer {
  0%, 100% { opacity: 0.55; filter: brightness(1); transform: scale(0.98); }
  50% { opacity: 0.95; filter: brightness(1.15); transform: scale(1.04); }
}
@keyframes aura-bubbles {
  0%, 100% { opacity: 0.7; transform: scale(0.96) translateY(0); }
  50% { opacity: 1; transform: scale(1.04) translateY(-2%); }
}
@keyframes aura-pulse {
  0%, 100% { opacity: 0.55; transform: scale(0.96); }
  50% { opacity: 0.95; transform: scale(1.04); }
}
@keyframes aura-ripple {
  /* toned: expand stays inside new epic max (~1.38× face) */
  0% {
    opacity: 0.85;
    box-shadow:
      0 0 0 0 rgba(80, 180, 220, 0.5),
      0 0 calc(var(--av, 32px) * 0.28) calc(var(--av, 32px) * 0.1) rgba(100, 190, 230, 0.35);
    transform: scale(0.96);
  }
  100% {
    opacity: 0;
    box-shadow:
      0 0 0 calc(var(--av, 32px) * 0.18) rgba(80, 180, 220, 0),
      0 0 calc(var(--av, 32px) * 0.28) calc(var(--av, 32px) * 0.1) rgba(100, 190, 230, 0);
    transform: scale(1.06);
  }
}
@keyframes aura-mist {
  0%, 100% { opacity: 0.45; transform: scale(0.95) rotate(-2deg); }
  50% { opacity: 0.85; transform: scale(1.04) rotate(3deg); }
}
@keyframes aura-sparkle {
  0%, 100% { opacity: 0.65; transform: scale(0.97); filter: brightness(1); }
  50% { opacity: 1; transform: scale(1.04); filter: brightness(1.25); }
}
@keyframes aura-rose-sparkle {
  /* quieter than shared sparkle — max scale ~1.02 so soft PFPs stay compact */
  0%, 100% { opacity: 0.7; transform: scale(0.98); filter: brightness(1); }
  50% { opacity: 1; transform: scale(1.02); filter: brightness(1.18); }
}
@keyframes aura-sparkle-orbit {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes aura-star-twinkle {
  0%, 100% { opacity: 0.7; transform: scale(0.98); filter: brightness(1); }
  40% { opacity: 1; transform: scale(1.04); filter: brightness(1.3); }
  60% { opacity: 0.8; transform: scale(1.02); filter: brightness(1.1); }
}
@keyframes aura-epic {
  0%, 100% { opacity: 0.7; transform: scale(0.98) rotate(0deg); }
  50% { opacity: 1; transform: scale(1.04) rotate(8deg); }
}
@keyframes aura-crown-rays {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
@keyframes aura-rainbow-spin {
  0% { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.03); }
  100% { transform: rotate(360deg) scale(1); }
}
@keyframes aura-flame-flicker {
  0%, 100% { opacity: 0.75; transform: scale(0.97) translateY(2%); }
  25% { opacity: 1; transform: scale(1.03) translateY(-2%) rotate(-2deg); }
  50% { opacity: 0.85; transform: scale(1.01) translateY(0) rotate(1deg); }
  75% { opacity: 0.95; transform: scale(1.04) translateY(-2%) rotate(2deg); }
}
@keyframes aura-ember-rise {
  0% { opacity: 0.9; transform: translateY(8%) scale(1); }
  100% { opacity: 0; transform: translateY(-25%) scale(1.1); }
}
@keyframes aura-furnace {
  0%, 100% { opacity: 0.8; transform: scale(0.97) translateY(3%); filter: hue-rotate(0deg); }
  33% { opacity: 1; transform: scale(1.04) translateY(-2%) rotate(-1deg); filter: hue-rotate(-8deg); }
  66% { opacity: 0.9; transform: scale(1.02) translateY(0) rotate(2deg); filter: hue-rotate(6deg); }
}
@keyframes aura-furnace-sparks {
  0% { opacity: 1; transform: translateY(5%) rotate(0deg); }
  50% { opacity: 0.7; transform: translateY(-12%) rotate(8deg); }
  100% { opacity: 0.2; transform: translateY(-28%) rotate(-4deg); }
}

@keyframes aura-crown-spin {
  0% { transform: scale(0.98) rotate(0deg); opacity: 0.75; }
  50% { transform: scale(1.04) rotate(180deg); opacity: 1; }
  100% { transform: scale(0.98) rotate(360deg); opacity: 0.75; }
}

/* Reduced motion: keep visible soft glow, drop busy motion (not blank) */
@media (prefers-reduced-motion: reduce) {
  .has-aura::after, .aura-preview-host::after, .season-aura-preview::after,
  .season-fork-aura-preview::after {
    animation: aura-breathe 4s ease-in-out infinite !important;
  }
  .aura-furnace-flame::after, .aura-burning-bush::after, .aura-lambs-crown::after,
  .aura-rainbow-promise::after{
    animation: aura-breathe 3.5s ease-in-out infinite !important;
    opacity: 0.7 !important;
  }
}

/* Avatar wraps — aura stacks with frames; face stays above FX; host box == --av */
.avatar-cosmetic-wrap.has-aura,
.unlock-studio-avatar-wrap.has-aura,
.account-avatar-btn.has-aura {
  overflow: visible;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 1 / 1;
  width: var(--av, 32px);
  height: var(--av, 32px);
  flex-shrink: 0;
}
.avatar-cosmetic-wrap.has-aura > .avatar,
.unlock-studio-avatar-wrap.has-aura > .avatar,
.avatar-cosmetic-wrap.has-aura > .unlock-studio-avatar,
.account-avatar-btn.has-aura > .avatar,
.account-avatar-btn.has-aura > #account-home-avatar {
  position: relative;
  z-index: 2;
  width: var(--av, 32px) !important;
  height: var(--av, 32px) !important;
  flex-shrink: 0;
}
/* When frame+aura stack, keep both visible outside crop */
.avatar-cosmetic-wrap.has-frame.has-aura,
.unlock-studio-avatar-wrap.has-frame.has-aura {
  overflow: visible;
}

/* Nameplate on You display name */
#account-home-name.nameplate-little-lamb,
#account-home-name.nameplate-meadow { color: #7cb87c; }
#account-home-name.nameplate-wool { color: #d8cbb0; }
#account-home-name.nameplate-still { color: #6a9bb8; }
#account-home-name.nameplate-staff,
#account-home-name.nameplate-fold { color: #c4a574; }
#account-home-name.nameplate-crown,
#account-home-name.nameplate-lamb-flock { color: #d4af37; text-shadow: 0 0 8px rgba(212,175,55,0.35); }
.account-season-title {
  display: inline-block;
  margin-left: 0.35rem;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: capitalize;
  background: rgba(212,175,55,0.15);
  border: 1px solid rgba(212,175,55,0.4);
  color: #f0d878;
}
.account-season-badge { margin-left: 0.25rem; font-size: 0.95rem; }

/* Comment skin / dual edge / study back / flourish — cheap CSS hooks */
html[class*="eq-comment-"] .comment-item {
  border-radius: 12px;
}
html.eq-comment-comment-skin-meadow .comment-item { background: rgba(120, 180, 120, 0.12); }
html.eq-comment-comment-skin-wool .comment-item { background: rgba(232, 220, 190, 0.14); }
html.eq-comment-comment-skin-still .comment-item { background: rgba(100, 160, 200, 0.12); }
html.eq-comment-comment-skin-cloak .comment-item { background: rgba(180, 120, 80, 0.12); }
html.eq-comment-comment-skin-dawn .comment-item { background: rgba(240, 180, 100, 0.12); }
html.eq-comment-comment-skin-night .comment-item { background: rgba(60, 80, 120, 0.18); }
html[class*="eq-dual-"] .card.is-dual .dual-ribbon {
  filter: saturate(1.15);
}
html.eq-dual-dual-edge-pasture .card.is-dual .dual-ribbon { box-shadow: inset 3px 0 0 #7cb87c; }
html.eq-dual-dual-edge-wool .card.is-dual .dual-ribbon { box-shadow: inset 3px 0 0 #e8dcc8; }
html.eq-dual-dual-edge-still .card.is-dual .dual-ribbon { box-shadow: inset 3px 0 0 #6a9bb8; }
html.eq-dual-dual-edge-watch .card.is-dual .dual-ribbon { box-shadow: inset 3px 0 0 #d4af37; }
html.eq-dual-dual-edge-cloak .card.is-dual .dual-ribbon { box-shadow: inset 3px 0 0 #a67c52; }
html.eq-dual-dual-edge-glory .card.is-dual .dual-ribbon { box-shadow: inset 3px 0 0 #f0d878; }
html[class*="eq-study-"] .card:not(.is-dual) {
  background-image: linear-gradient(160deg, rgba(255,255,255,0.03), transparent 40%);
}
html[class*="eq-flourish-"] .card-share {
  box-shadow: 0 0 0 1px rgba(240, 200, 120, 0.35);
}

/* Shop type tabs */
.shop-type-tabs {
  display: flex;
  flex-wrap: nowrap;
  gap: 0.35rem;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0.25rem 0 0.65rem;
  margin: 0 0 0.35rem;
  scrollbar-width: thin;
}
.shop-type-tab {
  flex: 0 0 auto;
  min-height: 36px;
  padding: 0.35rem 0.7rem;
  border-radius: 999px;
  border: 1px solid rgba(120,130,150,0.35);
  background: rgba(0,0,0,0.22);
  color: #d8d2c4;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}
.shop-type-tab.is-selected {
  background: linear-gradient(180deg, #e0c050, #a88428);
  color: #1a180c;
  border-color: rgba(212,175,55,0.7);
}

/* Shop sticker preview pair — top-right like single preview */
.shop-item-preview-pair {
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
  position: absolute;
  top: 8px;
  right: 8px;
  left: auto;
  margin: 0;
  z-index: 3;
  pointer-events: none;
}
.shop-item > .shop-item-top > .shop-item-preview-pair .shop-item-preview {
  position: static;
  top: auto;
  right: auto;
}
.shop-item.is-guest-preview .shop-item-actions .shop-buy-btn,
.shop-item.is-guest-preview .shop-item-actions .shop-foil-addon {
  font-size: 0.78em;
  font-weight: 700;
  color: #7ec8f0;
  opacity: 0.95;
}
.shop-foil-btn {
  opacity: 0.95;
}
.shop-guest-hint {
  margin: 0.35rem 0 0.75rem;
  font-size: 0.9rem;
  opacity: 0.9;
}

/* Holofoil — same-shape mask (no square chrome). Shimmer lives on .sticker-holo-shine.
   Do NOT force position:relative on placed studio/crop/avatar stickers — that collapses
   absolute overlay into a flex sibling (photo left + sticker/aura circle right). */
.is-holofoil,
.unlock-sticker-preview.is-holofoil,
.unlock-carousel-sticker-emoji.is-holofoil,
.unlock-studio-sticker.is-holofoil .unlock-studio-sticker-emoji,
.stickers-book-item.is-holofoil,
.shop-item.is-holofoil .shop-item-preview.sticker {
  background-image: none !important;
  background-color: transparent !important;
  border-radius: 0;
  box-shadow: none;
}
/* Stacking context for shine — only on non-placed / inline hosts */
.unlock-sticker-preview.is-holofoil,
.unlock-carousel-sticker-emoji.is-holofoil,
.unlock-studio-sticker.is-holofoil .unlock-studio-sticker-emoji,
.crop-stage-sticker-emoji.is-holofoil,
.stickers-book-item.is-holofoil,
.shop-item.is-holofoil .shop-item-preview.sticker {
  position: relative;
}
.sticker-holo-shine {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: inherit;
  line-height: inherit;
  pointer-events: none;
  /* Pokemon-card foil: animated rainbow sweep; art stays readable underneath */
  background-image: linear-gradient(
    115deg,
    rgba(255,255,255,0.06) 0%,
    rgba(255,255,255,0.06) 16%,
    rgba(255, 190, 90, 0.88) 26%,
    rgba(120, 220, 255, 0.92) 36%,
    rgba(255, 120, 210, 0.86) 46%,
    rgba(160, 255, 190, 0.72) 56%,
    rgba(255,255,255,0.18) 66%,
    rgba(255,255,255,0.06) 100%
  );
  background-size: 320% 320%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  animation: holofoil-shine 2.6s linear infinite;
  opacity: 0.90;
  mix-blend-mode: overlay;
  will-change: background-position;
  transform: translateZ(0);
  backface-visibility: hidden;
}
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .sticker-holo-shine {
    mix-blend-mode: soft-light;
    opacity: 0.48;
    -webkit-text-fill-color: inherit;
    color: inherit;
    background-clip: border-box;
    -webkit-background-clip: border-box;
    border-radius: 50%;
  }
}
.sticker-foil-badge,
.shop-foil-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.68rem;
  font-weight: 800;
  color: #b8e8ff;
  letter-spacing: 0.04em;
}
.shop-foil-addon {
  font-size: 0.78em;
  font-weight: 700;
  color: #7ec8f0;
  opacity: 0.95;
}
.shop-foil-btn {
  background: linear-gradient(180deg, #7ec8f0, #3a7a9a) !important;
  border-color: rgba(120, 200, 240, 0.65) !important;
  color: #071018 !important;
  font-size: 0.78rem;
  min-height: 40px;
}
/* auras1c: seamless ping-pong — no jump cut at loop */
@keyframes holofoil-shine {
  0% { background-position: 0% 40%; }
  100% { background-position: 100% 60%; }
}
@media (prefers-reduced-motion: reduce) {
  .is-holofoil .sticker-holo-shine,
  .sticker-holo-shine {
    animation: none !important;
    background-position: 35% 45% !important;
    opacity: 0.42;
    /* static foil — no rainbow sweep */
  }
}

.shop-item-preview.aura { width: 56px; height: 56px; aspect-ratio: 1 / 1; border-radius: 50%; overflow: visible; }
.shop-item-preview.nameplate {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; min-height: 28px; padding: 0.2rem 0.5rem;
  border-radius: 999px; font-weight: 800; font-size: 0.85rem;
  background: rgba(120,180,120,0.2); border: 1px solid rgba(120,180,120,0.45);
}


/* mem28i/m — comments compose keyboard (iOS WKWebView / Capacitor):
   scrollEnabled:false + contentInset:automatic + default focus-scroll fights --vv-height.
   mem28i: pin panel to vv, freeze offset, no double --safe-bottom.
   mem28m: also pin body to vv (Memorize is-mem-drill pattern) so the composer cannot
   sit under an overlay keyboard / get scrolled away; keep --kb-inset in sync. */
html.is-comments-kb {
  --comments-kb-pad-bottom: 8px;
}
html.is-comments-kb,
html.is-comments-kb body {
  overflow: hidden;
  overscroll-behavior: none;
}
/* Match Memorize: lock body to the visual viewport while composing */
html.is-comments-kb body {
  position: fixed !important;
  left: 0;
  right: 0;
  top: var(--vv-offset, 0px);
  height: var(--vv-height, 100dvh);
  max-height: var(--vv-height, 100dvh);
  width: 100%;
}
html.is-comments-kb .comments-form {
  /* vv already accounts for keyboard — do not stack home-indicator safe-bottom */
  padding-bottom: var(--comments-kb-pad-bottom) !important;
  position: sticky;
  bottom: 0;
  flex: 0 0 auto;
  z-index: 5;
  /* Keep textarea compact so caret stays on-screen above accessory bar */
}
html.is-comments-kb .comments-field textarea {
  min-height: 56px;
  max-height: 96px;
  resize: none;
}
html.is-comments-kb #comments-panel,
html.is-comments-kb .comments-face-mount #comments-panel,
html.is-comments-kb .comments-face-mount .comments-face-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}
html.is-comments-kb #comments-thread {
  flex: 1 1 auto;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
/* reply58: in-card fixed pin is NOT reliable — .deck .card perspective/transform
   creates a containing block, so position:fixed never escapes to the vv. JS promotes
   card compose to #comments-sheet for the kb session. Keep a best-effort pin only if
   promote somehow fails and panel is still on-card. */
html.is-comments-kb body.is-comments-on-card .card.is-comments-open .comments-face.has-comments-panel {
  position: fixed !important;
  left: 50%;
  top: 0;
  width: min(480px, 100%);
  height: 100%;
  max-height: 100%;
  transform: translateX(-50%) rotateY(0deg) !important;
  z-index: 55;
  border-radius: 14px 14px 0 0;
  visibility: visible !important;
  pointer-events: auto !important;
  overflow: hidden;
  background: linear-gradient(180deg, var(--paper-2), var(--ink-2)) !important;
}
html.is-comments-kb body.is-comments-on-card .card.is-dual.is-comments-open .comments-face-mount {
  margin-left: 30px;
  width: calc(100% - 30px);
  box-sizing: border-box;
}
html.is-comments-kb body.is-comments-on-card .card.is-dual.is-comments-open .dual-ribbon {
  z-index: 56;
}
/* Sheet path (primary kb compose): opaque full-height panel above keyboard */
html.is-comments-kb #comments-sheet:not([hidden]).comments-overlay {
  position: fixed !important;
  left: 0;
  right: 0;
  align-items: stretch;
  justify-content: center;
  padding: 0;
  top: 0;
  height: 100%;
  max-height: 100%;
  bottom: auto;
  z-index: 60;
  background: var(--ink-2, #16110c) !important;
  opacity: 1;
}
html.is-comments-kb #comments-sheet:not([hidden]) .comments-sheet {
  width: min(480px, 100%);
  max-height: 100%;
  height: 100%;
  min-height: 100%;
  border-radius: 14px 14px 0 0;
  padding-bottom: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(180deg, var(--paper-2), var(--ink-2)) !important;
  flex: 1 1 auto;
}
html.is-comments-kb #comments-sheet:not([hidden]) .comments-flip-scene,
html.is-comments-kb #comments-sheet:not([hidden]) #comments-panel {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: linear-gradient(180deg, var(--paper-2), var(--ink-2));
}


/* ===== mem28j: dense aura suppress + shop h-scroll lock ===== */
/* Memorize peer face stacks + overlay list: no full aura FX (frames/stickers stay). */
.mem-peers .has-aura::after,
.mem-peers-face .has-aura::after,
.mem-peers-face.has-aura::after,
.mem-peers-row .has-aura::after,
.mem-peers-row .avatar-btn.has-aura::after,
.mem-peers .avatar-cosmetic-wrap.has-aura::after,
.mem-peers-list .has-aura::after {
  content: none !important;
  display: none !important;
  animation: none !important;
  box-shadow: none !important;
  background: none !important;
  opacity: 0 !important;
  pointer-events: none !important;
}
.mem-peers .avatar-cosmetic-wrap.has-aura,
.mem-peers-face .avatar-cosmetic-wrap.has-aura,
.mem-peers-row .avatar-cosmetic-wrap.has-aura {
  /* keep layout; FX killed above */
}

/* Shop / Unlockables: lock horizontal page scroll; type tabs may scroll internally */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}
.app,
#you-pane-unlockables,
#you-pane-unlockables:not([hidden]),
#unlock-shop-panel,
.unlockables-wrap {
  overflow-x: hidden !important;
  max-width: 100%;
}
.shop-type-tabs,
.badge-type-tabs {
  max-width: 100%;
  width: 100%;
  box-sizing: border-box;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  /* prevent tab row from widening parent pane */
  min-width: 0;
}
.unlock-theme-carousel,
.unlock-aura-carousel {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  /* neutralize slight negative margins that can shift the pane */
  margin-left: 0;
  margin-right: 0;
}
/* overflow containment for studio/themes/aura moved to mem28l block */



/* ===== mem28l: auras in previewer block (under Frames/Stickers/preview) ===== */
.unlock-aura-slot:empty { display: none; }
.unlock-aura-slot {
  margin: 0 0 8px;
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
  box-sizing: border-box;
}
.unlock-aura-slot .unlock-aura-row,
.unlock-aura-slot .unlock-aura-row-in-studio {
  margin-top: 0;
  margin-bottom: 0;
}
#you-pane-account .unlock-aura-slot,
#you-pane-unlockables .unlock-aura-slot {
  margin: 0 0 8px;
}
.unlock-studio-stage,
.unlock-profile-edit,
.unlock-themes-slot,
.unlock-aura-slot {
  max-width: 100%;
  min-width: 0;
  overflow-x: hidden;
  box-sizing: border-box;
}

/* ===== mem28k-catalog: sticker/coins preview top-right + new themes/auras ===== */
.unlock-card.reward-sticker .unlock-card-top,
.unlock-card.reward-coins .unlock-card-top,
.unlock-card.reward-title .unlock-card-top,
.unlock-card.reward-aura .unlock-card-top {
  min-height: 72px;
  padding-right: 76px;
}
.unlock-card > .unlock-card-top > .unlock-reward-chip.sticker-chip,
.unlock-card > .unlock-card-top > .unlock-reward-chip.unlock-sticker-preview,
.unlock-card > .unlock-card-top > .unlock-sticker-preview {
  position: absolute;
  top: 8px;
  right: 8px;
  left: auto;
  margin: 0;
  z-index: 3;
  line-height: 1;
  font-size: 28px;
  padding: 0;
  background: transparent;
  border: none;
  pointer-events: none;
}
.unlock-card > .unlock-card-top > .unlock-reward-chip.coins-chip,
.unlock-card > .unlock-card-top > .unlock-coins-preview {
  position: absolute;
  top: 8px;
  right: 8px;
  left: auto;
  margin: 0;
  z-index: 3;
  background: transparent;
  border: none;
  padding: 0;
  max-width: 40px;
  line-height: 0;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.unlock-card > .unlock-card-top > .unlock-coins-preview .unlock-coins-mark,
.unlock-card > .unlock-card-top > .unlock-reward-chip.coins-chip .coin-stack-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
}
.unlock-card > .unlock-card-top > .unlock-coins-preview .coin-stack-svg {
  display: block;
  transform: scale(1.15);
  transform-origin: center center;
}
.unlock-card.reward-coins .unlock-coin-row {
  display: none;
  min-height: 0;
  margin: 0;
}
.unlock-card > .unlock-card-top > .unlock-reward-chip.title-chip {
  position: absolute;
  top: 8px;
  right: 8px;
  left: auto;
  margin: 0;
  z-index: 3;
  font-size: 10px;
  padding: 4px 8px;
  border-radius: 999px;
  background: var(--gold-soft);
}
/* Do not center sticker art in the chest row */
.unlock-card.reward-sticker .unlock-chest-row .unlock-sticker-preview,
.unlock-card.reward-sticker .unlock-chest-svg + .unlock-sticker-preview {
  display: none;
}

/* New hard + shop themes (tint variants) */
html.theme-sinai-storm {
  --ink:#120810; --ink-2:#1c1018; --paper:#2a1824; --paper-2:#3a2230;
  --line:rgba(200,120,160,0.16); --text:#ffe8f2; --muted:#d0a0b8; --faint:#9a7088;
  --gold:#e090b0; --gold-soft:rgba(224,144,176,0.18);
}
.unlock-card.unlock-card-theme.theme-sinai-storm,
.shop-item.shop-item-theme.theme-sinai-storm {
  background: linear-gradient(165deg, #3a2230 0%, #2a1824 100%);
  border-color: rgba(200,120,160,0.35); color:#ffe8f2;
}
.unlock-theme-swatch[data-theme="theme-sinai-storm"],
.gacha-reward-theme[data-theme="theme-sinai-storm"] {
  background: linear-gradient(135deg, rgba(224,144,176,0.55), rgba(120,40,80,0.55));
  border-color: rgba(200,120,160,0.35);
}

html.theme-red-sea-road {
  --ink:#140808; --ink-2:#1e1010; --paper:#2c1414; --paper-2:#3c1c1c;
  --line:rgba(220,100,100,0.16); --text:#ffe8e8; --muted:#d0a0a0; --faint:#9a7070;
  --gold:#e08080; --gold-soft:rgba(224,128,128,0.18);
}
.unlock-card.unlock-card-theme.theme-red-sea-road,
.shop-item.shop-item-theme.theme-red-sea-road {
  background: linear-gradient(165deg, #3c1c1c 0%, #2c1414 100%);
  border-color: rgba(220,100,100,0.35); color:#ffe8e8;
}
.unlock-theme-swatch[data-theme="theme-red-sea-road"],
.gacha-reward-theme[data-theme="theme-red-sea-road"] {
  background: linear-gradient(135deg, rgba(224,128,128,0.55), rgba(140,40,40,0.55));
}

html.theme-be-strong {
  --ink:#0c1410; --ink-2:#142018; --paper:#1c2c22; --paper-2:#263828;
  --line:rgba(120,200,140,0.16); --text:#e8ffe8; --muted:#a8d0b0; --faint:#789880;
  --gold:#80d090; --gold-soft:rgba(128,208,144,0.18);
}
.unlock-card.unlock-card-theme.theme-be-strong,
.shop-item.shop-item-theme.theme-be-strong {
  background: linear-gradient(165deg, #263828 0%, #1c2c22 100%);
  border-color: rgba(120,200,140,0.35); color:#e8ffe8;
}
.unlock-theme-swatch[data-theme="theme-be-strong"],
.gacha-reward-theme[data-theme="theme-be-strong"] {
  background: linear-gradient(135deg, rgba(128,208,144,0.55), rgba(40,100,60,0.55));
}

html.theme-valley-elah {
  --ink:#141008; --ink-2:#1e1810; --paper:#2a2418; --paper-2:#3a3220;
  --line:rgba(200,170,100,0.16); --text:#fff8e0; --muted:#d0c090; --faint:#9a9068;
  --gold:#d0b060; --gold-soft:rgba(208,176,96,0.18);
}
.unlock-card.unlock-card-theme.theme-valley-elah,
.shop-item.shop-item-theme.theme-valley-elah {
  background: linear-gradient(165deg, #3a3220 0%, #2a2418 100%);
  border-color: rgba(200,170,100,0.35); color:#fff8e0;
}
.unlock-theme-swatch[data-theme="theme-valley-elah"],
.gacha-reward-theme[data-theme="theme-valley-elah"] {
  background: linear-gradient(135deg, rgba(208,176,96,0.55), rgba(120,90,30,0.55));
}

html.theme-upper-room-hard {
  --ink:#100c14; --ink-2:#181420; --paper:#241c30; --paper-2:#302840;
  --line:rgba(160,120,220,0.16); --text:#f0e8ff; --muted:#b8a0d0; --faint:#8878a0;
  --gold:#b090e0; --gold-soft:rgba(176,144,224,0.18);
}
.unlock-card.unlock-card-theme.theme-upper-room-hard,
.shop-item.shop-item-theme.theme-upper-room-hard {
  background: linear-gradient(165deg, #302840 0%, #241c30 100%);
  border-color: rgba(160,120,220,0.35); color:#f0e8ff;
}
.unlock-theme-swatch[data-theme="theme-upper-room-hard"],
.gacha-reward-theme[data-theme="theme-upper-room-hard"] {
  background: linear-gradient(135deg, rgba(176,144,224,0.55), rgba(80,50,140,0.55));
}

html.theme-emmaus-road {
  --ink:#14120a; --ink-2:#1e1a10; --paper:#2a2618; --paper-2:#3a3420;
  --line:rgba(210,180,100,0.16); --text:#fff6d8; --muted:#d0c090; --faint:#9a8860;
  --gold:#e0c060; --gold-soft:rgba(224,192,96,0.18);
}
.unlock-card.unlock-card-theme.theme-emmaus-road,
.shop-item.shop-item-theme.theme-emmaus-road {
  background: linear-gradient(165deg, #3a3420 0%, #2a2618 100%);
  border-color: rgba(210,180,100,0.35); color:#fff6d8;
}
.unlock-theme-swatch[data-theme="theme-emmaus-road"],
.gacha-reward-theme[data-theme="theme-emmaus-road"] {
  background: linear-gradient(135deg, rgba(224,192,96,0.55), rgba(140,100,30,0.55));
}

html.theme-power-on-high {
  --ink:#080c18; --ink-2:#101828; --paper:#182438; --paper-2:#203048;
  --line:rgba(100,160,255,0.16); --text:#e8f0ff; --muted:#a0b8e0; --faint:#7080a8;
  --gold:#80a8ff; --gold-soft:rgba(128,168,255,0.18);
}
.unlock-card.unlock-card-theme.theme-power-on-high,
.shop-item.shop-item-theme.theme-power-on-high {
  background: linear-gradient(165deg, #203048 0%, #182438 100%);
  border-color: rgba(100,160,255,0.35); color:#e8f0ff;
}
.unlock-theme-swatch[data-theme="theme-power-on-high"],
.gacha-reward-theme[data-theme="theme-power-on-high"] {
  background: linear-gradient(135deg, rgba(128,168,255,0.55), rgba(40,70,160,0.55));
}

html.theme-new-jerusalem {
  --ink:#141008; --ink-2:#201810; --paper:#2e2414; --paper-2:#3e3220;
  --line:rgba(232,200,120,0.18); --text:#fff8e8; --muted:#e0c890; --faint:#a89060;
  --gold:#f0d080; --gold-soft:rgba(240,208,128,0.2);
}
.unlock-card.unlock-card-theme.theme-new-jerusalem,
.shop-item.shop-item-theme.theme-new-jerusalem {
  background: linear-gradient(165deg, #3e3220 0%, #2e2414 100%);
  border-color: rgba(232,200,120,0.4); color:#fff8e8;
}
.unlock-theme-swatch[data-theme="theme-new-jerusalem"],
.gacha-reward-theme[data-theme="theme-new-jerusalem"] {
  background: linear-gradient(135deg, rgba(240,208,128,0.6), rgba(160,120,40,0.55));
}

html.theme-galilee-morning {
  --ink:#0a1820; --ink-2:#122430; --paper:#1a3440; --paper-2:#244850;
  --line:rgba(120,200,220,0.16); --text:#e8f8ff; --muted:#a0d0e0; --faint:#7098a8;
  --gold:#70c8e0; --gold-soft:rgba(112,200,224,0.18);
}
.unlock-card.unlock-card-theme.theme-galilee-morning,
.shop-item.shop-item-theme.theme-galilee-morning {
  background: linear-gradient(165deg, #244850 0%, #1a3440 100%);
  border-color: rgba(120,200,220,0.35); color:#e8f8ff;
}
.unlock-theme-swatch[data-theme="theme-galilee-morning"],
.gacha-reward-theme[data-theme="theme-galilee-morning"] {
  background: linear-gradient(135deg, rgba(112,200,224,0.55), rgba(30,90,110,0.55));
}

html.theme-judean-hills {
  --ink:#1a140c; --ink-2:#241c10; --paper:#322818; --paper-2:#423420;
  --line:rgba(200,160,100,0.16); --text:#fff0d8; --muted:#d0b890; --faint:#9a8060;
  --gold:#d0a060; --gold-soft:rgba(208,160,96,0.18);
}
.unlock-card.unlock-card-theme.theme-judean-hills,
.shop-item.shop-item-theme.theme-judean-hills {
  background: linear-gradient(165deg, #423420 0%, #322818 100%);
  border-color: rgba(200,160,100,0.35); color:#fff0d8;
}
.unlock-theme-swatch[data-theme="theme-judean-hills"],
.gacha-reward-theme[data-theme="theme-judean-hills"] {
  background: linear-gradient(135deg, rgba(208,160,96,0.55), rgba(120,80,30,0.55));
}

html.theme-quiet-harbor {
  --ink:#0a141c; --ink-2:#101c28; --paper:#162830; --paper-2:#1e3840;
  --line:rgba(100,180,200,0.16); --text:#e0f0f8; --muted:#98c0d0; --faint:#688898;
  --gold:#70b0c8; --gold-soft:rgba(112,176,200,0.18);
}
.unlock-card.unlock-card-theme.theme-quiet-harbor,
.shop-item.shop-item-theme.theme-quiet-harbor {
  background: linear-gradient(165deg, #1e3840 0%, #162830 100%);
  border-color: rgba(100,180,200,0.35); color:#e0f0f8;
}
.unlock-theme-swatch[data-theme="theme-quiet-harbor"],
.gacha-reward-theme[data-theme="theme-quiet-harbor"] {
  background: linear-gradient(135deg, rgba(112,176,200,0.55), rgba(30,80,100,0.55));
}

html.theme-cedar-shade {
  --ink:#08140c; --ink-2:#0e1c12; --paper:#14281a; --paper-2:#1c3422;
  --line:rgba(80,160,100,0.16); --text:#e0f0e4; --muted:#98c0a0; --faint:#688870;
  --gold:#70b080; --gold-soft:rgba(112,176,128,0.18);
}
.unlock-card.unlock-card-theme.theme-cedar-shade,
.shop-item.shop-item-theme.theme-cedar-shade {
  background: linear-gradient(165deg, #1c3422 0%, #14281a 100%);
  border-color: rgba(80,160,100,0.35); color:#e0f0e4;
}
.unlock-theme-swatch[data-theme="theme-cedar-shade"],
.gacha-reward-theme[data-theme="theme-cedar-shade"] {
  background: linear-gradient(135deg, rgba(112,176,128,0.55), rgba(30,80,50,0.55));
}

html.theme-harvest-gold {
  --ink:#181208; --ink-2:#241a0c; --paper:#322414; --paper-2:#423018;
  --line:rgba(232,180,80,0.16); --text:#fff6d8; --muted:#e0c890; --faint:#a89058;
  --gold:#e8b850; --gold-soft:rgba(232,184,80,0.2);
}
.unlock-card.unlock-card-theme.theme-harvest-gold,
.shop-item.shop-item-theme.theme-harvest-gold {
  background: linear-gradient(165deg, #423018 0%, #322414 100%);
  border-color: rgba(232,180,80,0.4); color:#fff6d8;
}
.unlock-theme-swatch[data-theme="theme-harvest-gold"],
.gacha-reward-theme[data-theme="theme-harvest-gold"] {
  background: linear-gradient(135deg, rgba(232,184,80,0.6), rgba(140,100,20,0.55));
}

html.theme-midnight-watch {
  --ink:#060610; --ink-2:#0c0c1c; --paper:#121228; --paper-2:#1a1a38;
  --line:rgba(120,120,220,0.16); --text:#e8e8ff; --muted:#a8a8d8; --faint:#7878a8;
  --gold:#9090e8; --gold-soft:rgba(144,144,232,0.18);
}
.unlock-card.unlock-card-theme.theme-midnight-watch,
.shop-item.shop-item-theme.theme-midnight-watch {
  background: linear-gradient(165deg, #1a1a38 0%, #121228 100%);
  border-color: rgba(120,120,220,0.35); color:#e8e8ff;
}
.unlock-theme-swatch[data-theme="theme-midnight-watch"],
.gacha-reward-theme[data-theme="theme-midnight-watch"] {
  background: linear-gradient(135deg, rgba(144,144,232,0.55), rgba(50,50,140,0.55));
}

/* Hard unlock auras + soft shop auras */
.aura-pillar-cloud::after{
  width: calc(var(--av, 32px) * 1.36); height: calc(var(--av, 32px) * 1.36);
  animation: aura-breathe 2.8s ease-in-out infinite;
  background:
    radial-gradient(circle at 50% 45%, rgba(230,240,255,0.55) 0%, transparent 55%),
    radial-gradient(circle at 30% 60%, rgba(200,220,255,0.4) 0%, transparent 50%),
    radial-gradient(circle at 70% 55%, rgba(255,255,255,0.35) 0%, transparent 45%);
  box-shadow: 0 0 calc(var(--av, 32px) * 0.4) calc(var(--av, 32px) * 0.12) rgba(200,220,255,0.4);
}
.aura-pillar-fire::after{
  width: calc(var(--av, 32px) * 1.36); height: calc(var(--av, 32px) * 1.36);
  animation: aura-furnace 1.2s ease-in-out infinite;
  background:
    radial-gradient(ellipse 70% 55% at 50% 80%, rgba(255,80,20,0.55) 0%, transparent 65%),
    radial-gradient(ellipse 50% 45% at 40% 60%, rgba(255,160,40,0.5) 0%, transparent 70%),
    radial-gradient(ellipse 45% 40% at 60% 55%, rgba(255,220,80,0.4) 0%, transparent 70%);
  box-shadow: 0 calc(var(--av, 32px) * 0.12) calc(var(--av, 32px) * 0.4) calc(var(--av, 32px) * 0.1) rgba(255,100,30,0.45);
}
.aura-torn-veil::after{
  width: calc(var(--av, 32px) * 1.34); height: calc(var(--av, 32px) * 1.34);
  animation: aura-shimmer 2.2s ease-in-out infinite;
  background:
    linear-gradient(105deg, transparent 40%, rgba(255,230,200,0.45) 50%, transparent 60%),
    radial-gradient(circle at 50% 50%, rgba(180,140,100,0.35) 0%, transparent 60%);
  box-shadow: 0 0 calc(var(--av, 32px) * 0.35) calc(var(--av, 32px) * 0.08) rgba(200,160,100,0.35);
}
.aura-open-heaven::after{
  width: calc(var(--av, 32px) * 1.38); height: calc(var(--av, 32px) * 1.38);
  animation: aura-pulse 2s ease-in-out infinite;
  background:
    radial-gradient(circle at 50% 30%, rgba(255,255,255,0.55) 0%, transparent 45%),
    radial-gradient(circle at 50% 55%, rgba(140,190,255,0.45) 0%, transparent 60%),
    radial-gradient(circle at 50% 80%, rgba(80,120,255,0.3) 0%, transparent 55%);
  box-shadow: 0 calc(var(--av, 32px) * -0.1) calc(var(--av, 32px) * 0.45) calc(var(--av, 32px) * 0.12) rgba(140,190,255,0.45);
}
.aura-white-throne::after{
  width: calc(var(--av, 32px) * 1.38); height: calc(var(--av, 32px) * 1.38);
  animation: aura-shimmer 2.4s ease-in-out infinite;
  background:
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.65) 0%, transparent 50%),
    radial-gradient(circle at 50% 50%, rgba(240,230,180,0.4) 0%, transparent 70%);
  box-shadow:
    0 0 calc(var(--av, 32px) * 0.5) calc(var(--av, 32px) * 0.14) rgba(255,255,240,0.5),
    0 0 calc(var(--av, 32px) * 0.7) calc(var(--av, 32px) * 0.18) rgba(240,220,140,0.3);
  opacity: 0.95;
}
.aura-soft-silver::after{
  width: calc(var(--av, 32px) * 1.28); height: calc(var(--av, 32px) * 1.28);
  animation: aura-breathe 3s ease-in-out infinite;
  background: radial-gradient(circle at 50% 50%, rgba(220,230,240,0.5) 0%, transparent 65%);
  box-shadow: 0 0 calc(var(--av, 32px) * 0.3) calc(var(--av, 32px) * 0.08) rgba(200,210,220,0.4);
}
.aura-dawn-blush::after{
  width: calc(var(--av, 32px) * 1.28); height: calc(var(--av, 32px) * 1.28);
  animation: aura-breathe 2.6s ease-in-out infinite;
  background: radial-gradient(circle at 50% 55%, rgba(255,180,160,0.5) 0%, transparent 65%);
  box-shadow: 0 0 calc(var(--av, 32px) * 0.3) calc(var(--av, 32px) * 0.08) rgba(255,160,140,0.35);
}
.aura-deep-teal-drift::after{
  width: calc(var(--av, 32px) * 1.28); height: calc(var(--av, 32px) * 1.28);
  animation: aura-ripple 2.8s ease-out infinite;
  background: radial-gradient(circle at 50% 50%, rgba(40,160,170,0.45) 0%, transparent 65%);
  box-shadow: 0 0 calc(var(--av, 32px) * 0.3) calc(var(--av, 32px) * 0.08) rgba(40,160,170,0.35);
}
.aura-quiet-ember::after{
  width: calc(var(--av, 32px) * 1.28); height: calc(var(--av, 32px) * 1.28);
  animation: aura-pulse 2.2s ease-in-out infinite;
  background: radial-gradient(circle at 50% 60%, rgba(255,120,60,0.4) 0%, transparent 65%);
  box-shadow: 0 calc(var(--av, 32px) * 0.06) calc(var(--av, 32px) * 0.3) calc(var(--av, 32px) * 0.08) rgba(255,100,40,0.3);
}

/* ===== mem28o sheep-season shop themes ===== */
html.theme-meadow-mist {
  --ink:#0c1810; --ink-2:#142418; --paper:#1c3424; --paper-2:#284830;
  --line:rgba(140,200,150,0.16); --text:#e8fff0; --muted:#a8d0b8; --faint:#709888;
  --gold:#90d0a0; --gold-soft:rgba(144,208,160,0.18);
}
.unlock-card.unlock-card-theme.theme-meadow-mist,
.shop-item.shop-item-theme.theme-meadow-mist {
  background: linear-gradient(165deg, #284830 0%, #1c3424 100%);
  border-color: rgba(140,200,150,0.35); color:#e8fff0;
}
.unlock-theme-swatch[data-theme="theme-meadow-mist"],
.gacha-reward-theme[data-theme="theme-meadow-mist"] {
  background: linear-gradient(135deg, rgba(144,208,160,0.55), rgba(40,100,60,0.55));
}
html.theme-wool-soft {
  --ink:#181410; --ink-2:#221c16; --paper:#32281e; --paper-2:#403428;
  --line:rgba(220,200,160,0.16); --text:#fff8ec; --muted:#d8c8a8; --faint:#a09070;
  --gold:#e0d0b0; --gold-soft:rgba(224,208,176,0.18);
}
.unlock-card.unlock-card-theme.theme-wool-soft,
.shop-item.shop-item-theme.theme-wool-soft {
  background: linear-gradient(165deg, #403428 0%, #32281e 100%);
  border-color: rgba(220,200,160,0.35); color:#fff8ec;
}
.unlock-theme-swatch[data-theme="theme-wool-soft"],
.gacha-reward-theme[data-theme="theme-wool-soft"] {
  background: linear-gradient(135deg, rgba(230,220,200,0.55), rgba(140,120,90,0.5));
}
html.theme-pasture-light {
  --ink:#10180c; --ink-2:#182414; --paper:#283820; --paper-2:#344828;
  --line:rgba(180,220,120,0.16); --text:#f4ffe8; --muted:#c8e0a0; --faint:#90a870;
  --gold:#b8e070; --gold-soft:rgba(184,224,112,0.18);
}
.unlock-card.unlock-card-theme.theme-pasture-light,
.shop-item.shop-item-theme.theme-pasture-light {
  background: linear-gradient(165deg, #344828 0%, #283820 100%);
  border-color: rgba(180,220,120,0.35); color:#f4ffe8;
}
.unlock-theme-swatch[data-theme="theme-pasture-light"],
.gacha-reward-theme[data-theme="theme-pasture-light"] {
  background: linear-gradient(135deg, rgba(184,224,112,0.55), rgba(80,120,40,0.55));
}
html.theme-quiet-pool {
  --ink:#0a161c; --ink-2:#101e28; --paper:#162830; --paper-2:#1e3844;
  --line:rgba(100,180,200,0.16); --text:#e0f4fc; --muted:#98c4d4; --faint:#688898;
  --gold:#70b8d0; --gold-soft:rgba(112,184,208,0.18);
}
.unlock-card.unlock-card-theme.theme-quiet-pool,
.shop-item.shop-item-theme.theme-quiet-pool {
  background: linear-gradient(165deg, #1e3844 0%, #162830 100%);
  border-color: rgba(100,180,200,0.35); color:#e0f4fc;
}
.unlock-theme-swatch[data-theme="theme-quiet-pool"],
.gacha-reward-theme[data-theme="theme-quiet-pool"] {
  background: linear-gradient(135deg, rgba(112,184,208,0.55), rgba(30,90,110,0.55));
}
html.theme-hill-gold {
  --ink:#1a1408; --ink-2:#241c0c; --paper:#322810; --paper-2:#423418;
  --line:rgba(220,180,80,0.16); --text:#fff6d8; --muted:#e0c890; --faint:#a89050;
  --gold:#e0c040; --gold-soft:rgba(224,192,64,0.18);
}
.unlock-card.unlock-card-theme.theme-hill-gold,
.shop-item.shop-item-theme.theme-hill-gold {
  background: linear-gradient(165deg, #423418 0%, #322810 100%);
  border-color: rgba(220,180,80,0.35); color:#fff6d8;
}
.unlock-theme-swatch[data-theme="theme-hill-gold"],
.gacha-reward-theme[data-theme="theme-hill-gold"] {
  background: linear-gradient(135deg, rgba(224,192,64,0.55), rgba(140,100,20,0.55));
}
html.theme-fold-dusk {
  --ink:#141018; --ink-2:#1c1624; --paper:#2a2034; --paper-2:#3a2c44;
  --line:rgba(180,140,200,0.16); --text:#f8f0ff; --muted:#c8b0d8; --faint:#9078a8;
  --gold:#c0a0e0; --gold-soft:rgba(192,160,224,0.18);
}
.unlock-card.unlock-card-theme.theme-fold-dusk,
.shop-item.shop-item-theme.theme-fold-dusk {
  background: linear-gradient(165deg, #3a2c44 0%, #2a2034 100%);
  border-color: rgba(180,140,200,0.35); color:#f8f0ff;
}
.unlock-theme-swatch[data-theme="theme-fold-dusk"],
.gacha-reward-theme[data-theme="theme-fold-dusk"] {
  background: linear-gradient(135deg, rgba(192,160,224,0.5), rgba(80,50,110,0.55));
}
html.theme-shepherd-night {
  --ink:#0a0e18; --ink-2:#101828; --paper:#182030; --paper-2:#222c40;
  --line:rgba(120,160,220,0.16); --text:#e8f0ff; --muted:#a8b8d8; --faint:#7080a0;
  --gold:#90b0e0; --gold-soft:rgba(144,176,224,0.18);
}
.unlock-card.unlock-card-theme.theme-shepherd-night,
.shop-item.shop-item-theme.theme-shepherd-night {
  background: linear-gradient(165deg, #222c40 0%, #182030 100%);
  border-color: rgba(120,160,220,0.35); color:#e8f0ff;
}
.unlock-theme-swatch[data-theme="theme-shepherd-night"],
.gacha-reward-theme[data-theme="theme-shepherd-night"] {
  background: linear-gradient(135deg, rgba(80,120,180,0.55), rgba(20,40,80,0.55));
}
html.theme-flock-glory {
  --ink:#181208; --ink-2:#241a0c; --paper:#3a2a14; --paper-2:#4a3820;
  --line:rgba(240,200,100,0.18); --text:#fff8e0; --muted:#e8d0a0; --faint:#b09060;
  --gold:#f0d060; --gold-soft:rgba(240,208,96,0.2);
}
.unlock-card.unlock-card-theme.theme-flock-glory,
.shop-item.shop-item-theme.theme-flock-glory {
  background: linear-gradient(165deg, #4a3820 0%, #3a2a14 100%);
  border-color: rgba(240,200,100,0.18); color:#fff8e0;
}
.unlock-theme-swatch[data-theme="theme-flock-glory"],
.gacha-reward-theme[data-theme="theme-flock-glory"] {
  background: linear-gradient(135deg, rgba(240,208,96,0.6), rgba(160,110,30,0.55));
}
html.theme-good-shepherd-gold {
  --ink:#181408; --ink-2:#221c0c; --paper:#342810; --paper-2:#443618;
  --line:rgba(220,180,60,0.18); --text:#fff6d0; --muted:#e0c880; --faint:#a89040;
  --gold:#e8c040; --gold-soft:rgba(232,192,64,0.2);
}
.unlock-card.unlock-card-theme.theme-good-shepherd-gold,
.shop-item.shop-item-theme.theme-good-shepherd-gold {
  background: linear-gradient(165deg, #443618 0%, #342810 100%);
  border-color: rgba(220,180,60,0.18); color:#fff6d0;
}
.unlock-theme-swatch[data-theme="theme-good-shepherd-gold"],
.gacha-reward-theme[data-theme="theme-good-shepherd-gold"] {
  background: linear-gradient(135deg, rgba(232,192,64,0.6), rgba(128,192,128,0.4));
}
html.theme-lamb-crown {
  --ink:#1a1018; --ink-2:#241420; --paper:#342030; --paper-2:#442840;
  --line:rgba(240,180,200,0.16); --text:#fff0f6; --muted:#e0b8c8; --faint:#a88098;
  --gold:#f0b0c8; --gold-soft:rgba(240,176,200,0.18);
}
.unlock-card.unlock-card-theme.theme-lamb-crown,
.shop-item.shop-item-theme.theme-lamb-crown {
  background: linear-gradient(165deg, #442840 0%, #342030 100%);
  border-color: rgba(240,180,200,0.35); color:#fff0f6;
}
.unlock-theme-swatch[data-theme="theme-lamb-crown"],
.gacha-reward-theme[data-theme="theme-lamb-crown"] {
  background: linear-gradient(135deg, rgba(240,176,200,0.55), rgba(200,160,80,0.45));
}

/* ===== mem28p QC polish + mem28q residuals ===== */
/* MUST: Unlockables/Shop last row clears Privacy + tab bar */
#you-pane-unlockables:not([hidden]) {
  padding-bottom: calc(32px + var(--safe-bottom, 0px)) !important;
  scroll-padding-bottom: calc(32px + var(--safe-bottom, 0px));
}
#you-pane-unlockables .unlockables-wrap,
#you-pane-unlockables #unlock-shop-panel,
#you-pane-unlockables .shop-list,
#you-pane-unlockables .unlockables-grid {
  padding-bottom: 8px;
  margin-bottom: 4px;
}

/* 4 / mem28q: Account PFP studio chips ≥44px, labels not clipped */
.unlock-studio-stage {
  grid-template-columns: minmax(80px, 104px) minmax(0, 1fr) minmax(80px, 104px) !important;
}
@media (max-width: 380px) {
  .unlock-studio-stage {
    grid-template-columns: minmax(76px, 92px) minmax(0, 1fr) minmax(76px, 92px) !important;
  }
}
.unlock-carousel-col {
  min-width: 80px;
}
.unlock-carousel-item {
  min-height: 76px;
  min-width: 0;
  width: 100%;
  padding: 8px 4px 10px;
  box-sizing: border-box;
  touch-action: manipulation;
}
.unlock-carousel-item .unlock-carousel-label,
.unlock-carousel-label {
  display: block;
  font-size: 11px !important;
  line-height: 1.15;
  max-width: 100% !important;
  width: 100%;
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: unset !important;
  text-align: center;
  margin-top: 4px;
  word-break: break-word;
  hyphens: auto;
}
.unlock-aura-carousel {
  padding: 10px 2px 14px;
  gap: 12px;
}
.unlock-aura-chip {
  min-height: 72px !important;
  min-width: 5.75rem !important;
  max-width: 7.5rem !important;
  padding: 10px 12px 10px !important;
}
.unlock-aura-chip-name {
  overflow: visible !important;
  white-space: normal !important;
  text-overflow: unset !important;
  word-break: break-word;
}
.studio-sticker-rotate,
.studio-sticker-move,
.studio-sticker-resize {
  width: 44px !important;
  height: 44px !important;
  font-size: 16px !important;
  line-height: 42px !important;
  border-width: 1.5px;
}
.studio-sticker-rotate::before,
.studio-sticker-move::before,
.studio-sticker-resize::before {
  inset: -4px;
}

/* 5: Account achievements/points spacing tighten */
#you-pane-account .account-stats {
  gap: 6px;
  margin: 0 0 12px;
}
#you-pane-achievements .badge-type-tabs {
  margin-bottom: 10px;
  gap: 8px;
}
#you-pane-achievements .badge-type-tabs .sort-btn {
  min-height: 44px;
  padding: 10px 12px;
  font-size: 12px;
}
#you-pane-account .account-stat {
  padding: 10px 12px;
}

/* 6: Unlockables cards — align previews, normalize gaps */
.unlockables-grid {
  gap: 12px;
  align-items: stretch;
}
.unlock-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 100%;
  padding: 12px 10px 12px;
  box-sizing: border-box;
}
.unlock-chest-row {
  min-height: 80px;
  margin: 2px 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.unlock-title { margin-top: 2px; }
.unlock-subtitle { margin-top: 2px; }

/* 7: Shop Buy/Gift/Upgrade — larger hits; Buy clearer than Gift */
.shop-item-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  align-items: stretch;
}
.shop-item-actions .shop-buy-btn,
.shop-item-actions .shop-gift-btn,
.shop-item-actions .submit,
.shop-item-actions .invite {
  min-height: 44px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 700;
  box-sizing: border-box;
}
.shop-item-actions .shop-buy-btn,
.shop-item-actions .submit {
  flex: 1.35 1 0;
}
.shop-item-actions .shop-gift-btn,
.shop-item-actions .invite {
  flex: 1 1 0;
  font-weight: 600;
  opacity: 0.9;
}

/* 8: Titles empty state hierarchy */
#you-pane-titles .badges-lede {
  font-size: 14px;
  margin: 0 0 10px;
}
#titles-empty.you-empty-copy,
#titles-guest.you-empty-copy,
#you-pane-titles .you-empty-copy {
  margin: 28px 12px 12px;
  text-align: center;
  font-size: 15px;
  line-height: 1.45;
  color: var(--muted);
}

/* 9: Points category tabs — bigger targets + spacing */
.badge-type-tabs {
  gap: 8px;
  margin-bottom: 14px;
  padding-bottom: 2px;
}
.badge-type-tabs .sort-btn {
  min-height: 44px;
  padding: 10px 14px;
  font-size: 12px;
  font-weight: 650;
}

/* 10: Comments Send/reactions ≥44px; wrap comment body */
.comments-submit {
  min-height: 44px !important;
  min-width: 108px;
  padding: 10px 18px !important;
  font-size: 15px !important;
  font-weight: 700;
}
.comment-react-opt {
  width: 44px !important;
  height: 44px !important;
  font-size: 22px;
}
.comment-body,
.comment-text,
.comments-thread .comment-copy,
.comment-item .comment-body {
  overflow-wrap: anywhere;
  word-break: break-word;
  white-space: pre-wrap;
}

/* 11: Write formatting toolbar spacing/groups */
.format-bar {
  gap: 6px;
  padding: 8px 10px;
  align-items: center;
}
.format-bar .fmt-btn {
  width: 40px;
  height: 40px;
  min-width: 40px;
  border-radius: 10px;
}
.format-bar .write-gateway {
  margin-left: auto;
  width: 40px;
  height: 40px;
}
.format-bar .fmt-btn[data-cmd="underline"] {
  margin-right: 6px;
}


/* mem55: Stage 2 layout — verse pane scrolls above dock; keep stage chrome while typing */
.app.is-mem-drill .mem-card .gw-study-face {
  padding: 8px 8px 12px;
}
.app.is-mem-drill .mem-stage-body { margin-top: 6px; }
.mem-stage-layout-letters .mem-stage-toolbar { margin: 0 0 4px; gap: 6px 12px; }
.mem-stage-layout-letters .mem-hint-stage2 {
  margin: 0 0 2px;
  font-size: 13px;
  line-height: 1.3;
}
.mem-stage-layout-letters .mem-letter-row {
  flex: 1 1 auto;
  min-height: 0;
  align-content: flex-start;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 4px 4px;
  /* Pack letters at top; denser chips so the pane is not a sparse ink island. */
  padding-top: 0;
  padding-bottom: 4px;
}
.mem-stage-layout-letters .mem-letter {
  min-width: 1.55em;
  min-height: 28px;
  margin: 0 3px 4px 0;
  padding: 2px 5px;
  font-size: 16px;
  letter-spacing: 0.03em;
  border-radius: 6px;
}
.mem-stage-layout-letters .mem-entry-dock:not(:has(#mem-pool)) {
  flex: 0 0 auto;
  padding: 6px 0 4px;
}
/* mem55: keep ref + stage tabs (+ Stage 2 hint) usable with keyboard — do not hide them.
   Verse pane shrinks/scrolls in the flex space above the dock; body already tracks --vv-height. */
html.is-kb-open .app.is-mem-drill .mem-drill-head {
  flex: 0 0 auto;
}
html.is-kb-open .app.is-mem-drill .mem-drill-ref {
  display: block;
  margin: 0 0 2px;
}
html.is-kb-open .app.is-mem-drill .mem-stage-bar {
  display: flex;
}
html.is-kb-open .app.is-mem-drill .mem-stage-toolbar {
  margin-bottom: 2px;
}
html.is-kb-open .mem-stage-layout-letters .mem-stage-copy {
  display: block;
  flex: 0 0 auto;
}
html.is-kb-open .mem-stage-layout-letters .mem-hint-stage2 {
  display: block;
  margin: 0 0 2px;
  font-size: 12px;
  line-height: 1.25;
}
html.is-kb-open .mem-stage-layout-letters .mem-hint-quiet {
  display: none;
}
html.is-kb-open .mem-stage-layout-letters .mem-letter-row {
  flex: 1 1 auto;
  min-height: 0;
}
html.is-kb-open .mem-stage-layout-letters .mem-entry-dock:not(:has(#mem-pool)) {
  flex: 0 0 auto;
  padding-bottom: max(6px, var(--safe-bottom));
}

/* 12 / mem53b: Memorize stage density — Stage + small difficulty label + compact picker */
.mem-stage-btn {
  min-height: 32px;
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 700;
  border-width: 2px;
  border-color: transparent;
  touch-action: manipulation;
}
.mem-stage-btn[aria-pressed="true"] {
  background: rgba(212,160,84,0.42);
  color: var(--text);
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(212,160,84,0.45);
}
.mem-stage-cell {
  position: relative;
  padding: 4px 2px 5px;
  gap: 1px;
}
.mem-stage-diff-label {
  font-size: 11px;
  font-weight: 600;
  line-height: 1.15;
  padding: 2px 6px;
  min-height: 0;
  color: var(--muted);
}
.mem-stage-diff-label.is-current {
  color: var(--gold);
  font-weight: 700;
}
.mem-diff-pop {
  z-index: 90;
  min-width: 92px;
  padding: 4px;
}
.mem-diff-pop-opt {
  font-size: 12px;
  padding: 8px 10px;
}

/* 13: Memorize empty state spacing/hierarchy */
.mem-quiet {
  margin: 20px 8px 12px;
  text-align: center;
  font-size: 15px;
  line-height: 1.45;
}
.view-memorize .mem-quiet:first-child { margin-top: 32px; }

/* 14: Read card vertical rhythm — less empty lower face; cosmetics readable */
.deck:not(.is-history) .flip-face {
  padding: 14px 14px 36px 36px;
  justify-content: flex-start;
}
.deck:not(.is-history) .flip-face .study {
  flex: 0 1 auto;
  margin-bottom: 8px;
}
.deck:not(.is-history) .flip-face .meta {
  margin-top: 8px;
  padding-top: 4px;
  gap: 8px;
}
.deck .card .user-profile-title-chip {
  font-size: 11px;
  padding: 2px 8px;
}


/* mem28u-shop: sticker/aura/title/theme previews always top-right; Purchased tab chrome */
.shop-item.shop-item-aura .shop-item-top,
.shop-item.shop-item-title .shop-item-top,
.shop-item.shop-item-sticker .shop-item-top,
.shop-item.shop-item-frame .shop-item-top,
.shop-item.shop-item-theme .shop-item-top {
  min-height: 72px;
  padding-right: 76px;
  position: relative;
}
.shop-item > .shop-item-top > .shop-item-preview,
.shop-item > .shop-item-top > .shop-item-preview-pair {
  position: absolute;
  top: 8px;
  right: 8px;
  left: auto;
  margin: 0;
  z-index: 3;
  flex-shrink: 0;
  pointer-events: none;
}
.shop-purchased-badge {
  position: absolute;
  left: 8px;
  bottom: -2px;
  z-index: 2;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #1a180c;
  background: linear-gradient(180deg, #c8e6c9, #81c784);
  border: 1px solid rgba(56, 142, 60, 0.55);
  border-radius: 999px;
  padding: 2px 7px;
  line-height: 1.2;
  pointer-events: none;
}
.shop-purchased-badge.is-full {
  background: linear-gradient(180deg, #e0c050, #a88428);
  border-color: rgba(212, 175, 55, 0.7);
  color: #1a180c;
}

/* b76: no top owned banner — green Owned + equal Holofoil/Gift row */
.shop-item.is-owned .shop-purchased-badge,
.shop-item.is-purchased .shop-purchased-badge,
.shop-purchased-badge {
  display: none !important;
}
.shop-item-actions.has-sticker-owned-btns {
  flex-wrap: wrap;
  align-items: stretch;
}
.shop-item-actions .shop-owned-tag.shop-already-unlocked {
  flex: 0 0 auto;
  justify-content: flex-start;
  min-height: 0;
  padding: 0;
  text-align: left;
  width: 100%;
  margin: 0 0 2px;
}
.shop-sticker-owned-btns {
  display: flex;
  flex: 1 1 100%;
  gap: 8px;
  width: 100%;
  align-items: stretch;
}
.shop-sticker-owned-btns .shop-foil-btn,
.shop-sticker-owned-btns .shop-gift-btn,
.shop-sticker-owned-btns .submit,
.shop-sticker-owned-btns .invite {
  flex: 1 1 0 !important;
  width: 0;
  min-width: 0;
  min-height: 44px;
  padding: 8px 10px;
  font-size: 13px;
  font-weight: 700;
  box-sizing: border-box;
  text-align: center;
}
.shop-item.is-owned {
  box-shadow: inset 0 0 0 1px rgba(129, 199, 132, 0.45);
}
.shop-item.is-purchased {
  box-shadow: inset 0 0 0 1.5px rgba(212, 175, 55, 0.65);
  background: linear-gradient(180deg, rgba(212,175,55,0.08), transparent 40%), var(--paper-2);
}
.shop-item.is-purchased .shop-item-price {
  opacity: 0.55;
  text-decoration: line-through;
}


/* === sticker-frame-art-hero-b46 === */
/* Sticker/frame cards: art is the hero; no title/subtitle blocks */
.unlock-card.is-art-hero .unlock-card-top,
.shop-item.is-art-hero .shop-item-top {
  min-height: 1.25rem;
  padding-right: 0;
  margin-bottom: 2px;
}
.unlock-card.is-art-hero.reward-sticker .unlock-card-top,
.unlock-card.is-art-hero.reward-frame .unlock-card-top,
.shop-item.is-art-hero.shop-item-sticker .shop-item-top,
.shop-item.is-art-hero.shop-item-frame .shop-item-top {
  min-height: 1.25rem;
  padding-right: 0;
}
.unlock-art-hero,
.shop-art-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 6px 0 4px;
  min-height: 88px;
  pointer-events: none;
}
.shop-art-hero {
  min-height: 96px;
  margin: 10px 0 8px;
}
/* Large sticker disc as card hero */
.unlock-card.is-art-hero .unlock-art-hero .unlock-sticker-preview,
.unlock-card.is-art-hero .unlock-art-hero .unlock-reward-chip.sticker-chip,
.unlock-card.is-art-hero .unlock-art-hero .unlock-reward-chip.unlock-sticker-preview,
.shop-item.is-art-hero .shop-art-hero .shop-item-preview.sticker,
.shop-item.is-art-hero .shop-art-hero .shop-item-preview.sticker.unlock-sticker-preview {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  margin: 0 !important;
  font-size: 52px !important;
  width: 88px !important;
  height: 88px !important;
  min-width: 88px !important;
  border-radius: 50%;
  z-index: 1;
  filter: saturate(1.2) contrast(1.06) drop-shadow(0 4px 10px rgba(0,0,0,0.28));
}
.shop-item.is-art-hero .shop-art-hero .shop-item-preview.sticker,
.shop-item.is-art-hero .shop-art-hero .shop-item-preview.sticker.unlock-sticker-preview {
  font-size: 56px !important;
  width: 96px !important;
  height: 96px !important;
  min-width: 96px !important;
}
/* Large frame preview as card hero */
.unlock-card.is-art-hero .unlock-art-hero .unlock-frame-preview,
.unlock-card.is-art-hero .unlock-art-hero .unlock-reward-chip.frame-chip,
.shop-item.is-art-hero .shop-art-hero .shop-item-preview.frame,
.shop-item.is-art-hero .shop-art-hero .shop-item-preview.frame.unlock-frame-preview {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  z-index: 1;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.28));
}
.unlock-card.is-art-hero .unlock-art-hero .unlock-frame-mini,
.shop-item.is-art-hero .shop-art-hero .unlock-frame-mini {
  transform: scale(1.7);
  transform-origin: center center;
}
.unlock-card.is-art-hero .unlock-art-hero .unlock-frame-mini > .avatar,
.shop-item.is-art-hero .shop-art-hero .unlock-frame-mini > .avatar {
  width: 28px;
  height: 28px;
}
/* Compact chest row under hero art — status still readable, art stays dominant */
.unlock-card.is-art-hero .unlock-chest-row.is-compact {
  min-height: 72px;
  margin: 6px 0 6px;
  opacity: 1;
}
.unlock-card.is-art-hero .unlock-chest-row.is-compact .unlock-chest-svg {
  width: 68px;
  height: 58px;
}
.unlock-card.is-art-hero .unlock-chest-row.is-compact .unlock-key-wrap {
  width: auto;
  height: auto;
  right: auto;
  bottom: auto;
  position: static;
}
.unlock-card.is-art-hero .unlock-chest-row.is-compact .unlock-key-svg {
  width: 42px;
  height: 32px;
}
/* No empty title/subtitle space on art-hero cards */
.unlock-card.is-art-hero .unlock-title,
.unlock-card.is-art-hero .unlock-subtitle,
.unlock-card.is-art-hero .unlock-reward-label,
.shop-item.is-art-hero > h3,
.shop-item.is-art-hero .shop-item-sub {
  display: none !important;
}
.shop-item.is-art-hero .shop-item-price {
  margin: 4px 0 8px;
}
/* Purchased badge: keep top-right, don't collide with hero */
.shop-item.is-art-hero .shop-purchased-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 4;
}

/* === b47 unified-card QC === */

/* Themes: corner chip is swatch-only (no truncated name — title already shows it) */
.unlock-card .unlock-theme-preview.gacha-reward-theme {
  max-width: none;
  padding: 4px;
  gap: 0;
}
.unlock-card .unlock-theme-preview-label,
.unlock-theme-preview-label { display: none !important; }
.shop-item-preview.theme.unlock-theme-swatch {
  font-size: 0 !important;
  color: transparent !important;
  width: 28px;
  height: 28px;
  min-width: 28px;
  border-radius: 999px;
  padding: 0 !important;
  overflow: hidden;
  text-indent: -999px;
}

/* Frame identity: thicker/distinct chrome on art-hero so adjacent frames don't look identical */
.unlock-card.is-art-hero.reward-frame .unlock-art-hero .unlock-frame-mini,
.shop-item.is-art-hero.shop-item-frame .shop-art-hero .unlock-frame-mini {
  transform: scale(1.85);
  transform-origin: center center;
}
.unlock-card.is-art-hero.reward-frame .unlock-art-hero .avatar-cosmetic-wrap.has-frame,
.shop-item.is-art-hero.shop-item-frame .shop-art-hero .avatar-cosmetic-wrap.has-frame {
  filter: drop-shadow(0 3px 8px rgba(0,0,0,0.35));
}
.unlock-card.is-art-hero.reward-frame .unlock-art-hero .avatar-cosmetic-wrap.has-frame::before,
.shop-item.is-art-hero.shop-item-frame .shop-art-hero .avatar-cosmetic-wrap.has-frame::before {
  box-shadow:
    0 0 0 3px rgba(212,175,95,0.55),
    0 0 0 6px rgba(0,0,0,0.22),
    inset 0 0 0 2px rgba(255,255,255,0.25) !important;
}
.unlock-card.is-art-hero.reward-frame .unlock-art-hero .unlock-frame-mini > .avatar,
.shop-item.is-art-hero.shop-item-frame .shop-art-hero .unlock-frame-mini > .avatar {
  width: 28px;
  height: 28px;
  box-shadow: inset 0 0 0 1.5px rgba(0,0,0,0.25);
}
/* One-line caption under FRAME art-hero only (not stickers) — sibling ROW after hero, full card width.
   Must sit OUTSIDE .*-art-hero overflow/flex so scaled frame chrome never covers it. */
.unlock-art-caption,
.shop-art-caption {
  /* shop52: frames are nameless — captions removed */
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* Title text as hero — vertically centered on the card */
.unlock-title-hero,
.shop-title-hero {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 auto;
  align-self: stretch;
  margin: 0;
  min-height: 88px;
  padding: 18px 12px;
  pointer-events: none;
  box-sizing: border-box;
}
.unlock-title-hero-text,
.shop-title-hero-text {
  font-size: 1.05rem;
  font-weight: 750;
  letter-spacing: 0.02em;
  line-height: 1.25;
  text-align: center;
  color: var(--gold, #d4af5f);
  text-wrap: balance;
  margin: 0;
  width: 100%;
}
.unlock-card.is-title-hero,
.shop-item.is-title-hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  min-height: 168px;
}
.unlock-card.is-title-hero .unlock-card-top,
.shop-item.is-title-hero .shop-item-top {
  flex: 0 0 auto;
  min-height: 1.25rem;
  margin-bottom: 0;
  padding-right: 0;
}
.unlock-card.is-title-hero .unlock-chest-row,
.shop-item.is-title-hero .shop-item-price,
.shop-item.is-title-hero .shop-item-actions {
  flex: 0 0 auto;
  margin-top: auto;
}
.unlock-card.is-title-hero .unlock-title,
.unlock-card.is-title-hero .unlock-subtitle,
.unlock-card.is-title-hero .unlock-reward-label,
.shop-item.is-title-hero > h3,
.shop-item.is-title-hero .shop-item-sub {
  display: none !important;
}

/* Card density: tighter art-hero so ~2 rows fit; last row clears Privacy/footer */
.unlock-art-hero,
.shop-art-hero {
  margin: 2px 0 2px !important;
  min-height: 72px !important;
}
.shop-art-hero {
  min-height: 76px !important;
  margin: 4px 0 4px !important;
}
.unlock-card.is-art-hero .unlock-art-hero .unlock-sticker-preview,
.unlock-card.is-art-hero .unlock-art-hero .unlock-reward-chip.sticker-chip,
.unlock-card.is-art-hero .unlock-art-hero .unlock-reward-chip.unlock-sticker-preview,
.shop-item.is-art-hero .shop-art-hero .shop-item-preview.sticker,
.shop-item.is-art-hero .shop-art-hero .shop-item-preview.sticker.unlock-sticker-preview {
  font-size: 46px !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
}
.shop-item.is-art-hero .shop-art-hero .shop-item-preview.sticker,
.shop-item.is-art-hero .shop-art-hero .shop-item-preview.sticker.unlock-sticker-preview {
  font-size: 48px !important;
}
.unlock-card.is-art-hero .unlock-chest-row.is-compact {
  min-height: 72px !important;
  margin: 6px 0 4px !important;
}
.unlock-card.is-art-hero,
.shop-item.is-art-hero {
  padding-bottom: 8px;
}

/* No circular disc behind stickers (unlock + shop art-hero) */
.unlock-card.reward-sticker .unlock-sticker-preview,
.unlock-card.reward-sticker .unlock-reward-chip.sticker-chip,
.unlock-card.reward-sticker .unlock-reward-chip.unlock-sticker-preview,
.unlock-card.is-art-hero .unlock-art-hero .unlock-sticker-preview,
.unlock-card.is-art-hero .unlock-art-hero .unlock-reward-chip.sticker-chip,
.unlock-card.is-art-hero .unlock-art-hero .unlock-reward-chip.unlock-sticker-preview,
.shop-item.is-art-hero .shop-art-hero .shop-item-preview.sticker,
.shop-item.is-art-hero .shop-art-hero .shop-item-preview.sticker.unlock-sticker-preview,
.shop-item.shop-item-sticker .shop-item-preview.sticker {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  padding: 0 !important;
}
.unlock-card.is-art-hero .unlock-art-hero .unlock-sticker-preview,
.unlock-card.is-art-hero .unlock-art-hero .unlock-reward-chip.sticker-chip,
.unlock-card.is-art-hero .unlock-art-hero .unlock-reward-chip.unlock-sticker-preview,
.shop-item.is-art-hero .shop-art-hero .shop-item-preview.sticker,
.shop-item.is-art-hero .shop-art-hero .shop-item-preview.sticker.unlock-sticker-preview {
  filter: saturate(1.2) contrast(1.06) drop-shadow(0 4px 10px rgba(0,0,0,0.28));
}

/* Stronger bottom clearance so last grid row clears Privacy + tab bar */
#you-pane-unlockables:not([hidden]) {
  padding-bottom: calc(88px + var(--safe-bottom, 0px)) !important;
  scroll-padding-bottom: calc(88px + var(--safe-bottom, 0px)) !important;
}
#you-pane-unlockables .unlockables-wrap,
#you-pane-unlockables #unlock-shop-panel,
#you-pane-unlockables .shop-list,
#you-pane-unlockables .unlockables-grid {
  padding-bottom: 24px !important;
  margin-bottom: 12px !important;
}

/* No empty subtitle holes after dropping subtitles */
.unlock-card .unlock-subtitle,
.shop-item .shop-item-sub {
  display: none !important;
  margin: 0 !important;
  height: 0 !important;
  padding: 0 !important;
}
.unlock-card .unlock-title {
  margin-bottom: 6px;
}
.shop-item > h3 {
  margin-bottom: 6px;
}

/* Sticky You-tabs: known SHOULD — keep tabs from covering unlock filters when sticky.
   Quick fix: ensure unlock filter row has scroll-margin under sticky you-tabs height. */
#you-pane-unlockables .unlock-filters,
#you-pane-unlockables .shop-type-tabs,
#unlock-shop-panel .shop-type-tabs {
  scroll-margin-top: 52px;
}

/* b47 theme chip compact (swatch-only) */
.unlock-card .unlock-theme-preview.gacha-reward-theme {
  padding: 3px !important;
  max-width: none !important;
  gap: 0 !important;
}
.unlock-card .unlock-theme-preview-swatch {
  width: 18px !important;
  height: 18px !important;
}

/* === b48 named-hero + frame caption row + aura/theme/coins art-hero === */
/* Art-hero hosts art only (caption is sibling). Keep overflow visible for frame chrome. */
.unlock-art-hero,
.shop-art-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: visible !important;
  width: 100%;
  box-sizing: border-box;
}

/* Named art-hero (theme/aura): keep title visible under hero — override nameless hide */
.unlock-card.is-art-hero.is-named-hero .unlock-title,
.shop-item.is-art-hero.is-named-hero > h3 {
  display: block !important;
  margin: 4px 0 2px !important;
  padding: 0 8px;
  text-align: center;
  font-size: 15px;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* Aura PFP+ring as centered large art-hero (NOT ~48px top-right badge) */
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .unlock-aura-preview,
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .unlock-reward-chip.aura-chip,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .shop-item-preview.aura {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  margin: 0 !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 4px 10px rgba(0,0,0,0.28));
  z-index: 1;
}
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .aura-preview-host,
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .unlock-aura-mini,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .aura-preview-host,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .shop-aura-mini {
  width: 88px !important;
  height: 88px !important;
  min-width: 88px !important;
  min-height: 88px !important;
  --av: 56px;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  position: relative;
}
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .aura-preview-host,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .shop-aura-mini {
  width: 96px !important;
  height: 96px !important;
  min-width: 96px !important;
  min-height: 96px !important;
  --av: 60px;
}
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .aura-preview-host > .avatar,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .aura-preview-host > .avatar {
  width: var(--av, 56px) !important;
  height: var(--av, 56px) !important;
  font-size: calc(var(--av, 56px) * 0.38) !important;
}

/* Theme swatch as centered art-hero */
.unlock-card.is-art-hero.reward-theme .unlock-art-hero .unlock-theme-preview,
.unlock-card.is-art-hero.reward-theme .unlock-art-hero .unlock-reward-chip.theme-chip,
.shop-item.is-art-hero.shop-item-theme .shop-art-hero .shop-item-preview.theme,
.shop-item.is-art-hero.shop-item-theme .shop-art-hero .unlock-theme-swatch {
  position: static !important;
  top: auto !important;
  right: auto !important;
  left: auto !important;
  margin: 0 !important;
  width: 72px !important;
  height: 72px !important;
  min-width: 72px !important;
  min-height: 72px !important;
  border-radius: 18px !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 12px rgba(0,0,0,0.28), inset 0 0 0 1px rgba(255,255,255,0.18);
  filter: none;
  text-indent: 0 !important;
  font-size: 0 !important;
  overflow: hidden;
  z-index: 1;
}
.unlock-card.is-art-hero.reward-theme .unlock-art-hero .unlock-theme-preview-swatch {
  width: 100% !important;
  height: 100% !important;
  border-radius: 18px !important;
  border: none !important;
}

/* Coins art-hero: huge centered +N + one glyph (no pile) */
/* b84 superseded — see unlockables-uniform-b84 coin-hero */
/* b84: old serif coin amt superseded by unlockables-uniform-b84 */

.unlock-card.is-art-hero.reward-coins .unlock-art-hero .coin-stack-svg,
.unlock-card.is-coins-hero .unlock-art-hero .coin-stack-svg {
  height: 36px !important;
  width: auto !important;
}
.unlock-card.is-art-hero.reward-coins .unlock-art-hero .coin-stack-wrap,
.unlock-card.is-coins-hero .unlock-art-hero .coin-stack-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
/* Coins twin: never named title under art */
.unlock-card.is-coins-hero .unlock-title {
  display: none !important;
}

/* Frame art-hero: room for scaled chrome; caption is SIBLING after hero (never flex child). */
.unlock-card.is-art-hero.reward-frame,
.shop-item.is-art-hero.shop-item-frame {
  overflow: visible !important;
}
.unlock-card.is-art-hero.reward-frame .unlock-art-hero,
.shop-item.is-art-hero.shop-item-frame .shop-art-hero {
  min-height: 78px !important;
  padding: 8px 0 8px;
  margin-bottom: 0 !important;
  overflow: visible !important;
  /* Contain scaled mini visually so sibling caption starts clear of chrome */
  box-sizing: border-box;
}
.unlock-card.is-art-hero.reward-frame .unlock-art-caption,
.shop-item.is-art-hero.shop-item-frame .shop-art-caption {
  margin-top: 4px;
  margin-bottom: 8px;
  position: relative;
  z-index: 3;
}
.unlock-card.is-art-hero.reward-frame .unlock-chest-row,
.unlock-card.is-art-hero.reward-frame .unlock-coin-row,
.shop-item.is-art-hero.shop-item-frame .shop-item-price {
  margin-top: 6px;
  position: relative;
  z-index: 2;
}

/* Named-hero card top: type chip only (no corner preview badge) */
.unlock-card.is-art-hero.is-named-hero .unlock-card-top,
.shop-item.is-art-hero.is-named-hero .shop-item-top {
  min-height: 1.25rem;
  padding-right: 0;
  margin-bottom: 2px;
}

/* === b49 frame-caption-sibling-gap === */
/* Caption is a DOM sibling after .shop-art-hero / .unlock-art-hero — not a flex child inside hero.
   Extra bottom padding on frame hero + caption margin keeps chrome/glow clear of caption + coin row. */
.unlock-card.is-art-hero.reward-frame .unlock-art-hero .unlock-frame-mini,
.shop-item.is-art-hero.shop-item-frame .shop-art-hero .unlock-frame-mini {
  margin-bottom: 0;
}


/* === shop51: Privacy Account-only (You module) === */
#view-you > .module-privacy { display: none !important; }
#you-pane-account .module-privacy,
#account-guest .module-privacy {
  display: block;
  margin-top: 18px;
  padding: 12px 0 8px;
  text-align: center;
}
#you-pane-account .module-privacy[hidden],
#account-guest .module-privacy[hidden] {
  display: none !important;
}
#you-pane-unlockables .module-privacy,
#you-pane-achievements .module-privacy,
#you-pane-comments .module-privacy,
#you-pane-studies .module-privacy,
#you-pane-titles .module-privacy {
  display: none !important;
}

/* === shop51 shop-hscroll-lock === */
/* 2-col grid must stay in viewport; minmax(0,1fr) prevents intrinsic overflow from art-hero chrome */
#you-pane-unlockables,
#you-pane-unlockables:not([hidden]),
#you-pane-unlockables .unlockables-wrap,
#you-pane-unlockables #unlock-shop-panel,
#you-pane-unlockables .shop-list,
#you-pane-unlockables .unlockables-grid {
  overflow-x: hidden !important;
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  width: 100%;
}
#you-pane-unlockables .shop-list,
#you-pane-unlockables .unlockables-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
}
#you-pane-unlockables .shop-item,
#you-pane-unlockables .unlock-card {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
  width: auto;
}
/* Frame chrome may paint outside card; clip at pane so page never scrolls sideways */
#you-pane-unlockables .unlock-art-hero,
#you-pane-unlockables .shop-art-hero {
  max-width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

/* === shop51 physical sticker outline (thin black, then thicker white) === */
/* Remove circular/extra borders on studio + art-hero sticker previews */
.unlock-studio-sticker,
.unlock-studio-sticker-emoji,
.unlock-carousel-sticker-emoji,
.unlock-carousel-item .unlock-carousel-sticker-emoji,
.unlock-profile-preview .unlock-studio-sticker,
.unlock-profile-preview .avatar-sticker,
.unlock-card.is-art-hero .unlock-art-hero .unlock-sticker-preview,
.unlock-card.is-art-hero .unlock-art-hero .unlock-reward-chip.sticker-chip,
.unlock-card.is-art-hero .unlock-art-hero .unlock-reward-chip.unlock-sticker-preview,
.shop-item.is-art-hero .shop-art-hero .shop-item-preview.sticker,
.shop-item.is-art-hero .shop-art-hero .shop-item-preview.sticker.unlock-sticker-preview,
.shop-item.shop-item-sticker .shop-item-preview.sticker,
.unlock-card.reward-sticker .unlock-sticker-preview {
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
/* Physical sticker look via layered drop-shadow (works on emoji): black hairline then white bevel */
.unlock-studio-sticker-emoji,
.unlock-carousel-sticker-emoji,
.unlock-profile-preview .unlock-studio-sticker-emoji,
.unlock-profile-preview .avatar-sticker,
.unlock-card.is-art-hero .unlock-art-hero .unlock-sticker-preview,
.unlock-card.is-art-hero .unlock-art-hero .unlock-reward-chip.sticker-chip,
.unlock-card.is-art-hero .unlock-art-hero .unlock-reward-chip.unlock-sticker-preview,
.shop-item.is-art-hero .shop-art-hero .shop-item-preview.sticker,
.shop-item.is-art-hero .shop-art-hero .shop-item-preview.sticker.unlock-sticker-preview,
.shop-item.shop-item-sticker .shop-item-preview.sticker,
.unlock-card.reward-sticker .unlock-sticker-preview {
  filter:
    drop-shadow(0 0 0.45px #000)
    drop-shadow(0 0 0.9px #000)
    drop-shadow(0 0 0 #fff)
    drop-shadow(0 0 1.6px #fff)
    drop-shadow(0 0 2.8px #fff)
    drop-shadow(0 3px 8px rgba(0, 0, 0, 0.28)) !important;
}
/* Holofoil keeps shimmer — stack outline under foil animation when present */
.unlock-sticker-preview.is-holofoil,
.unlock-carousel-sticker-emoji.is-holofoil,
.unlock-studio-sticker.is-holofoil .unlock-studio-sticker-emoji {
  filter:
    drop-shadow(0 0 0.45px #000)
    drop-shadow(0 0 0.9px #000)
    drop-shadow(0 0 0 #fff)
    drop-shadow(0 0 1.6px #fff)
    drop-shadow(0 0 2.8px #fff)
    drop-shadow(0 3px 8px rgba(0, 0, 0, 0.28)) !important;
}


/* === shop52: nameless frames + title center + aura particles === */

/* Frame carousel / crop: no name labels */
.unlock-carousel-item.unlock-frame-item .unlock-carousel-label,
.unlock-frame-item .unlock-carousel-label,
.unlock-studio-banner-name,
#unlock-studio-banner-name {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
  visibility: hidden !important;
}
.unlock-carousel-item.unlock-frame-item.is-nameless {
  padding-bottom: 4px;
}
.crop-frame-icon-label { display: none !important; }
/* Keep "None" affordance tiny via aria only — visual chrome remains avatar ring */

/* Smaller frame previews on unlockable/shop art-hero cards — superseded by b66 (1.28/1.32 + 24px) */
.unlock-card.is-art-hero .unlock-art-hero .unlock-frame-mini,
.shop-item.is-art-hero .shop-art-hero .unlock-frame-mini {
  transform: scale(1.28);
  transform-origin: center center;
}
.unlock-card.is-art-hero.reward-frame .unlock-art-hero .unlock-frame-mini,
.shop-item.is-art-hero.shop-item-frame .shop-art-hero .unlock-frame-mini {
  transform: scale(1.32);
  transform-origin: center center;
}

/* Aura particle layer (sibling of ::after glow; works with frames using ::before) */
/* b79: each aura-fx-* has its own motion language so auras read as unique personalities */
.aura-particles {
  position: absolute;
  inset: -22%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}
.aura-particles > i {
  position: absolute;
  width: var(--sz, 4px);
  height: var(--sz, 4px);
  border-radius: 50%;
  left: 50%;
  top: 50%;
  opacity: 0;
  background: rgba(255,255,255,0.9);
  box-shadow: 0 0 6px rgba(255,255,255,0.7);
  animation-name: aura-mote-float;
  animation-duration: var(--dur, 2.8s);
  animation-delay: var(--delay, 0s);
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  will-change: transform, opacity;
}
.aura-particles > i:nth-child(1) { --dx: -42%; --dy: -38%; --delay: 0s; --dur: 2.6s; --sz: 4px; }
.aura-particles > i:nth-child(2) { --dx: 40%; --dy: -32%; --delay: 0.35s; --dur: 3.1s; --sz: 3px; }
.aura-particles > i:nth-child(3) { --dx: -28%; --dy: 36%; --delay: 0.7s; --dur: 2.4s; --sz: 5px; }
.aura-particles > i:nth-child(4) { --dx: 38%; --dy: 28%; --delay: 1.05s; --dur: 2.9s; --sz: 3px; }
.aura-particles > i:nth-child(5) { --dx: -8%; --dy: -48%; --delay: 1.4s; --dur: 3.3s; --sz: 4px; }
.aura-particles > i:nth-child(6) { --dx: 12%; --dy: 46%; --delay: 1.75s; --dur: 2.7s; --sz: 3px; }

@keyframes aura-mote-float {
  0% { opacity: 0; transform: translate(-50%, -50%) translate(0, 8%) scale(0.6); }
  20% { opacity: 0.95; }
  55% { opacity: 0.75; transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(calc(var(--dx) * 1.15), calc(var(--dy) * 1.2)) scale(0.4); }
}
@keyframes aura-mote-bubble {
  0% { opacity: 0; transform: translate(-50%, -50%) translate(0, 28%) scale(0.45); }
  25% { opacity: 0.95; }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(var(--dx), calc(var(--dy) - 42%)) scale(1.2); }
}
@keyframes aura-mote-bubble-duo {
  0% { opacity: 0; transform: translate(-50%, -50%) translate(calc(var(--dx)*0.2), 24%) scale(0.4); }
  30% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(calc(var(--dx)*1.1), calc(var(--dy) - 36%)) scale(1.15); }
}
@keyframes aura-mote-shimmer {
  0% { opacity: 0; transform: translate(-50%, -50%) translate(calc(var(--dx)*-0.4), var(--dy)) scale(0.5); }
  35% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(calc(var(--dx)*1.2), calc(var(--dy)*0.6)) scale(0.7); }
}
@keyframes aura-mote-pearl {
  0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.4); filter: brightness(1); }
  40% { opacity: 0.95; transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(1.1); filter: brightness(1.35); }
  70% { opacity: 0.45; transform: translate(-50%, -50%) translate(calc(var(--dx)*0.85), calc(var(--dy)*0.85)) scale(0.7); }
}
@keyframes aura-mote-wool {
  0% { opacity: 0; transform: translate(-50%, -50%) translate(0, 6%) scale(0.7); }
  40% { opacity: 0.7; transform: translate(-50%, -50%) translate(calc(var(--dx)*0.6), calc(var(--dy)*0.5)) scale(1.15); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(1.3); }
}
@keyframes aura-mote-pollen {
  0% { opacity: 0; transform: translate(-50%, -50%) translate(calc(var(--dx)*-0.3), 18%) scale(0.5); }
  25% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(calc(var(--dx)*1.3), calc(var(--dy) - 22%)) rotate(50deg) scale(0.8); }
}
@keyframes aura-mote-lavender {
  0% { opacity: 0; transform: translate(-50%, -50%) translate(0, 10%) scale(0.5); }
  30% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(calc(var(--dx)*0.9), calc(var(--dy)*0.7)) scale(1) rotate(-25deg); }
}
@keyframes aura-mote-ripple {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(0.35); }
  25% { opacity: 0.85; transform: translate(-50%, -50%) scale(0.85); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(1.4); }
}
@keyframes aura-mote-droplet {
  0% { opacity: 0; transform: translate(-50%, -50%) translate(0, -18%) scale(0.5); }
  20% { opacity: 0.95; }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(calc(var(--dx) * 0.45), 42%) scale(0.7); }
}
@keyframes aura-mote-ember {
  0% { opacity: 0; transform: translate(-50%, -50%) translate(0, 32%) scale(0.5); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(calc(var(--dx)*0.7), calc(var(--dy) - 40%)) scale(0.35); }
}
@keyframes aura-mote-ember-watch {
  0% { opacity: 0; transform: translate(-50%, -50%) translate(calc(var(--dx)*0.2), 20%) scale(0.4); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(var(--dx), calc(var(--dy) - 18%)) scale(0.6) rotate(30deg); }
}
@keyframes aura-mote-honey {
  0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.5); }
  35% { opacity: 1; transform: translate(-50%, -50%) translate(calc(var(--dx)*0.5), calc(var(--dy)*0.4)) scale(1.25); filter: brightness(1.3); }
  70% { opacity: 0.5; transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(0.8); }
}
@keyframes aura-mote-quiet-ember {
  0% { opacity: 0; transform: translate(-50%, -50%) translate(0, 16%) scale(0.4); }
  40% { opacity: 0.75; }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(calc(var(--dx)*0.45), calc(var(--dy) - 28%)) scale(0.3); }
}
@keyframes aura-mote-wisp {
  0% { opacity: 0; transform: translate(-50%, -50%) translate(calc(var(--dx)*-0.6), calc(var(--dy)*0.2)) scaleX(0.6) scaleY(0.8); }
  40% { opacity: 0.7; }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(calc(var(--dx)*1.2), calc(var(--dy)*0.15)) scaleX(1.6) scaleY(0.55); }
}
@keyframes aura-mote-silver {
  0% { opacity: 0; transform: translate(-50%, -50%) translate(0, 0) scale(0.4); }
  30% { opacity: 0.9; transform: translate(-50%, -50%) translate(calc(var(--dx)*0.4), calc(var(--dy)*0.3)) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(0.5) rotate(90deg); }
}
@keyframes aura-mote-spark {
  0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.3) rotate(0deg); }
  15% { opacity: 1; transform: translate(-50%, -50%) translate(calc(var(--dx)*0.25), calc(var(--dy)*0.25)) scale(1.3) rotate(20deg); }
  55% { opacity: 0.65; transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(0.7) rotate(55deg); }
}
@keyframes aura-mote-twinkle {
  0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.25) rotate(0deg); }
  40% { opacity: 1; transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(1.05) rotate(25deg); }
  70% { opacity: 0.4; transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(0.55) rotate(50deg); }
}
@keyframes aura-mote-ember-rise {
  0% { opacity: 0; transform: translate(-50%, -50%) translate(0, 34%) scale(0.55); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(var(--dx), calc(var(--dy) - 38%)) scale(0.3); }
}
@keyframes aura-mote-furnace {
  0% { opacity: 0; transform: translate(-50%, -50%) translate(calc(var(--dx)*0.15), 40%) scale(0.5); }
  15% { opacity: 1; }
  50% { opacity: 0.85; transform: translate(-50%, -50%) translate(calc(var(--dx)*0.7), calc(var(--dy) - 10%)) scale(0.9); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(var(--dx), calc(var(--dy) - 48%)) scale(0.25); }
}
@keyframes aura-mote-orbit {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(0deg) translateX(0); }
  18% { opacity: 0.95; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(150deg) translateX(calc(var(--av, 32px) * 0.58)); }
}
@keyframes aura-mote-crown {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(0deg) translateY(0) scale(0.4); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(80deg) translateY(calc(var(--av, 32px) * -0.55)) scale(0.7); }
}
@keyframes aura-mote-olive {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(-20deg) translate(0, 8%) scale(0.5); }
  35% { opacity: 0.9; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(35deg) translate(var(--dx), var(--dy)) scale(1); }
}
@keyframes aura-mote-rainbow {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(0deg) translateX(calc(var(--av, 32px) * 0.2)); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(200deg) translateX(calc(var(--av, 32px) * 0.62)); }
}
@keyframes aura-mote-cloud {
  0% { opacity: 0; transform: translate(-50%, -50%) translate(calc(var(--dx)*-0.5), calc(var(--dy)*0.3)) scale(0.7); }
  40% { opacity: 0.65; }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(calc(var(--dx)*1.1), calc(var(--dy)*0.1)) scale(1.4); }
}
@keyframes aura-mote-veil {
  0% { opacity: 0; transform: translate(-50%, -50%) translate(0, -8%) scaleY(0.5); }
  40% { opacity: 0.7; }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(calc(var(--dx)*0.4), calc(var(--dy)*1.1)) scaleY(1.3); }
}
@keyframes aura-mote-dawn {
  0% { opacity: 0; transform: translate(-50%, -50%) translate(0, 22%) scale(0.5); }
  30% { opacity: 0.95; }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(calc(var(--dx)*0.8), calc(var(--dy) - 30%)) scale(1.1); }
}
@keyframes aura-mote-teal {
  0% { opacity: 0; transform: translate(-50%, -50%) translate(calc(var(--dx)*-0.8), calc(var(--dy)*0.4)) scale(0.5); }
  35% { opacity: 0.85; }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(calc(var(--dx)*1.3), calc(var(--dy)*-0.2)) scale(0.9); }
}

/* —— Soft / pastel personalities —— */
.aura-fx-bubbles > i {
  background: radial-gradient(circle, #fff 0 32%, rgba(255,160,210,0.95) 38%, transparent 72%);
  box-shadow: 0 0 8px rgba(255,140,200,0.85);
  animation-name: aura-mote-bubble;
  border-radius: 50%;
}
.aura-fx-bubbles > i:nth-child(odd) { --sz: 6px; }
.aura-fx-bubbles > i:nth-child(even) { --sz: 4px; }

.aura-fx-bubbles-duo > i {
  background: radial-gradient(circle, #fff 0 30%, rgba(255,170,220,0.9) 36%, rgba(170,210,255,0.55) 55%, transparent 75%);
  box-shadow: 0 0 7px rgba(200,170,255,0.7);
  animation-name: aura-mote-bubble-duo;
}
.aura-fx-bubbles-duo > i:nth-child(3n) {
  background: radial-gradient(circle, #fff 0 30%, rgba(170,210,255,0.95) 40%, transparent 72%);
}

.aura-fx-shimmer > i {
  background: linear-gradient(135deg, #fff, rgba(160,210,255,0.95));
  box-shadow: 0 0 8px rgba(140,200,255,0.85);
  animation-name: aura-mote-shimmer;
  border-radius: 40%;
  width: 5px; height: 3px;
}
.aura-fx-shimmer > i:nth-child(1) { --dur: 2.2s; }
.aura-fx-shimmer > i:nth-child(2) { --dur: 2.6s; }

.aura-fx-pearl > i {
  background: radial-gradient(circle, #fff 0 40%, rgba(230,235,245,0.9) 55%, transparent 75%);
  box-shadow: 0 0 6px rgba(210,220,240,0.8);
  animation-name: aura-mote-pearl;
  --sz: 3px;
}

.aura-fx-wool > i {
  background: rgba(245,238,214,0.92);
  box-shadow: 0 0 8px rgba(220,210,175,0.55);
  animation-name: aura-mote-wool;
  filter: blur(0.55px);
  --sz: 7px;
}

.aura-fx-pollen > i {
  background: #c8e090;
  box-shadow: 0 0 6px rgba(160,200,90,0.7);
  animation-name: aura-mote-pollen;
  border-radius: 40% 60% 55% 45%;
  --sz: 3px;
}
.aura-fx-pollen > i:nth-child(even) { background: #9dcc6a; }

.aura-fx-lavender > i {
  background: rgba(210,180,255,0.95);
  box-shadow: 0 0 8px rgba(180,140,240,0.75);
  animation-name: aura-mote-lavender;
  --sz: 4px;
}

/* —— Mid pulse —— */
.aura-fx-ripple > i {
  background: transparent;
  border: 1.5px solid rgba(120,200,235,0.85);
  box-shadow: 0 0 6px rgba(100,190,230,0.45);
  animation-name: aura-mote-ripple;
  --sz: 8px;
}

.aura-fx-droplet > i {
  background: linear-gradient(#dff6ff, #5eb8e0);
  box-shadow: 0 0 5px rgba(80,190,230,0.75);
  animation-name: aura-mote-droplet;
  border-radius: 50% 50% 50% 50% / 40% 40% 60% 60%;
  width: 3px; height: 5px;
}

.aura-fx-ember > i {
  background: #ff9a3c;
  box-shadow: 0 0 8px rgba(255,120,30,0.9);
  animation-name: aura-mote-ember;
  border-radius: 40% 40% 20% 20%;
  width: 3px; height: 6px;
}

.aura-fx-ember-watch > i {
  background: #ffc060;
  box-shadow: 0 0 7px rgba(255,160,50,0.85);
  animation-name: aura-mote-ember-watch;
  border-radius: 2px;
  --sz: 3px;
}

.aura-fx-honey > i {
  background: radial-gradient(circle, #fff6c8 0 35%, #ffb84a 55%, transparent 75%);
  box-shadow: 0 0 9px rgba(255,190,70,0.9);
  animation-name: aura-mote-honey;
  --sz: 5px;
}

.aura-fx-quiet-ember > i {
  background: #e88940;
  box-shadow: 0 0 5px rgba(200,100,40,0.55);
  animation-name: aura-mote-quiet-ember;
  opacity: 0; /* anim drives */
  --sz: 2px;
  --dur: 3.8s;
}

.aura-fx-wisp > i {
  background: rgba(190,205,220,0.75);
  box-shadow: 0 0 10px rgba(150,170,195,0.45);
  animation-name: aura-mote-wisp;
  filter: blur(0.7px);
  border-radius: 40%;
  width: 10px; height: 4px;
}

.aura-fx-silver > i {
  background: linear-gradient(135deg, #fff, #c8d0dc);
  box-shadow: 0 0 7px rgba(190,205,220,0.8);
  animation-name: aura-mote-silver;
  clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
  border-radius: 0;
  --sz: 4px;
}

.aura-fx-sparkle > i {
  background: #fff;
  box-shadow: 0 0 6px #ff9ec8, 0 0 1px #ffd0e8;
  animation-name: aura-mote-spark;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  border-radius: 0;
  --sz: 5px;
}

/* —— Epic / sacred —— */
.aura-fx-star > i {
  background: #fff8c8;
  box-shadow: 0 0 10px rgba(255,230,120,0.95);
  animation-name: aura-mote-twinkle;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  border-radius: 0;
  --sz: 7px;
}

.aura-fx-flame > i {
  background: linear-gradient(#ffe080, #ff6020);
  box-shadow: 0 0 8px rgba(255,100,30,0.9);
  animation-name: aura-mote-ember-rise;
  border-radius: 40% 40% 20% 20%;
  width: 4px; height: 7px;
}

.aura-fx-furnace > i {
  background: linear-gradient(#ffe8a0, #ff3a10);
  box-shadow: 0 0 10px rgba(255,80,20,0.95);
  animation-name: aura-mote-furnace;
  border-radius: 45% 45% 15% 15%;
  width: 4px; height: 8px;
}
.aura-fx-furnace > i:nth-child(even) { background: linear-gradient(#ffd060, #ff6618); }

.aura-fx-rainbow > i { animation-name: aura-mote-rainbow; border-radius: 50%; --sz: 4px; box-shadow: 0 0 6px currentColor; }
.aura-fx-rainbow > i:nth-child(1) { background: #ff6b8a; }
.aura-fx-rainbow > i:nth-child(2) { background: #ffb14a; }
.aura-fx-rainbow > i:nth-child(3) { background: #ffe566; }
.aura-fx-rainbow > i:nth-child(4) { background: #6fdc8c; }
.aura-fx-rainbow > i:nth-child(5) { background: #6bb0ff; }
.aura-fx-rainbow > i:nth-child(6) { background: #b07cff; }

.aura-fx-radiance > i {
  background: #ffe9a0;
  box-shadow: 0 0 10px rgba(255,210,100,0.9);
  animation-name: aura-mote-orbit;
  --sz: 4px;
}

.aura-fx-crown > i {
  background: #ffe082;
  box-shadow: 0 0 9px rgba(255,215,100,0.95);
  animation-name: aura-mote-crown;
  clip-path: polygon(50% 0%, 100% 38%, 82% 100%, 18% 100%, 0% 38%);
  border-radius: 0;
  --sz: 5px;
}

.aura-fx-olive > i {
  background: #b5d46a;
  box-shadow: 0 0 8px rgba(140,180,70,0.8);
  animation-name: aura-mote-olive;
  border-radius: 60% 40% 55% 45%;
  width: 5px; height: 3px;
}

.aura-fx-cloud > i {
  background: rgba(235,240,248,0.9);
  box-shadow: 0 0 10px rgba(180,200,220,0.55);
  animation-name: aura-mote-cloud;
  filter: blur(0.65px);
  --sz: 8px;
}

.aura-fx-veil > i {
  background: linear-gradient(180deg, rgba(255,255,255,0.85), rgba(210,200,230,0.35));
  box-shadow: none;
  animation-name: aura-mote-veil;
  border-radius: 20%;
  width: 2px; height: 10px;
  filter: blur(0.3px);
}

.aura-fx-dawn > i {
  background: radial-gradient(circle, #fff0d0 0 35%, #ffb08a 55%, transparent 75%);
  box-shadow: 0 0 8px rgba(255,160,110,0.75);
  animation-name: aura-mote-dawn;
  --sz: 4px;
}
.aura-fx-dawn > i:nth-child(odd) { background: radial-gradient(circle, #fff 0 30%, #ffcfa0 50%, transparent 75%); }

.aura-fx-teal > i {
  background: rgba(60,180,190,0.95);
  box-shadow: 0 0 8px rgba(40,160,175,0.75);
  animation-name: aura-mote-teal;
  border-radius: 40%;
  width: 7px; height: 3px;
  filter: blur(0.35px);
}

.aura-fx-mote > i {
  animation-name: aura-mote-float;
}

@media (prefers-reduced-motion: reduce) {
  .aura-particles > i {
    animation: aura-mote-pearl 4.5s ease-in-out infinite !important;
    opacity: 0.55 !important;
  }
}

/* Ensure hosts that receive particles are positioning contexts */
.has-aura,
.aura-preview-host,
.avatar-cosmetic-wrap.has-aura,
.unlock-studio-avatar-wrap.has-aura,
.account-avatar-btn.has-aura {
  position: relative;
}



/* ===== b80: stronger unique aura FX + 20 new shop auras ===== */

/* Amplify base glow footprint / intensity so auras pop */
.has-aura::after,
.aura-preview-host::after,
.season-aura-preview::after,
.season-fork-aura-preview::after {
  width: calc(var(--av, 32px) * 1.28);
  height: calc(var(--av, 32px) * 1.28);
  box-shadow: 0 0 calc(var(--av, 32px) * 0.36) calc(var(--av, 32px) * 0.14) rgba(160, 220, 200, 0.48);
  opacity: 0.88;
}

/* Toolkit keyframes: wavy / distort / square / speckle */
@keyframes aura-wave {
  0%, 100% { opacity: 0.7; transform: scale(0.96) skewX(-1.5deg) skewY(0.8deg); }
  33% { opacity: 1; transform: scale(1.05) skewX(1.8deg) skewY(-1deg); }
  66% { opacity: 0.85; transform: scale(1.02) skewX(-1deg) skewY(1.4deg); }
}
@keyframes aura-wave-loud {
  0%, 100% { opacity: 0.75; transform: scale(0.94) skewX(-2.5deg); filter: brightness(1); }
  50% { opacity: 1; transform: scale(1.08) skewX(2.5deg); filter: brightness(1.25); }
}
@keyframes aura-distort {
  0%, 100% { opacity: 0.72; transform: scale(0.97) translateX(-1%); filter: blur(0.2px) hue-rotate(0deg); }
  25% { opacity: 0.95; transform: scale(1.04) translateX(1.5%) skewY(1deg); filter: blur(0.55px) hue-rotate(8deg); }
  50% { opacity: 0.85; transform: scale(1.02) translateX(-1.2%) skewX(-1.5deg); filter: blur(0.35px) hue-rotate(-6deg); }
  75% { opacity: 1; transform: scale(1.05) translateX(0.8%); filter: blur(0.7px) hue-rotate(4deg); }
}
@keyframes aura-square-pulse {
  0%, 100% { opacity: 0.7; transform: scale(0.96) rotate(0deg); border-radius: 18%; }
  50% { opacity: 1; transform: scale(1.05) rotate(3deg); border-radius: 12%; }
}
@keyframes aura-square-hard {
  0%, 100% { opacity: 0.8; transform: scale(0.97) rotate(-1deg); border-radius: 10%; }
  50% { opacity: 1; transform: scale(1.06) rotate(2deg); border-radius: 8%; }
}
@keyframes aura-speckle-glow {
  0%, 100% { opacity: 0.75; filter: brightness(1); transform: scale(0.98); }
  50% { opacity: 1; filter: brightness(1.35); transform: scale(1.05); }
}

/* —— Existing auras: amplify + assign toolkit personalities —— */
.aura-pink-bubbles::after{
  width: calc(var(--av, 32px) * 1.3); height: calc(var(--av, 32px) * 1.3);
  opacity: 0.95;
  box-shadow: 0 0 calc(var(--av, 32px) * 0.42) calc(var(--av, 32px) * 0.16) rgba(255, 120, 190, 0.65);
  animation: aura-bubbles 2.6s ease-in-out infinite;
}
.aura-baby-blue::after{
  width: calc(var(--av, 32px) * 1.28); height: calc(var(--av, 32px) * 1.28);
  opacity: 0.92;
  box-shadow:
    0 0 calc(var(--av, 32px) * 0.36) calc(var(--av, 32px) * 0.14) rgba(120, 190, 255, 0.65),
    0 0 calc(var(--av, 32px) * 0.58) calc(var(--av, 32px) * 0.2) rgba(180, 230, 255, 0.35);
  animation: aura-wave 2.8s ease-in-out infinite;
}
.aura-soft-wool::after, .aura-s1-lambs-rest::after{
  opacity: 0.72;
  animation: aura-wave 3.8s ease-in-out infinite;
  box-shadow: 0 0 calc(var(--av, 32px) * 0.3) calc(var(--av, 32px) * 0.1) rgba(232, 220, 190, 0.55);
}
.aura-meadow-haze::after{
  opacity: 0.88;
  animation: aura-speckle-glow 2.8s ease-in-out infinite;
  background:
    radial-gradient(circle at 22% 30%, #e8ff90 0 2px, transparent 3px),
    radial-gradient(circle at 78% 28%, #fff 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 35% 72%, #9dcc6a 0 2px, transparent 3px),
    radial-gradient(circle at 70% 68%, #c8e090 0 1.5px, transparent 2.5px),
    radial-gradient(circle, rgba(150, 200, 130, 0.28) 0%, transparent 65%);
  box-shadow:
    0 0 calc(var(--av, 32px) * 0.36) calc(var(--av, 32px) * 0.14) rgba(150, 200, 130, 0.55),
    0 0 calc(var(--av, 32px) * 0.55) calc(var(--av, 32px) * 0.18) rgba(200, 230, 160, 0.28);
}
.aura-pearl-mist::after{
  opacity: 0.88;
  animation: aura-wave 3.2s ease-in-out infinite;
  box-shadow:
    0 0 calc(var(--av, 32px) * 0.34) calc(var(--av, 32px) * 0.12) rgba(230, 230, 245, 0.7),
    0 0 calc(var(--av, 32px) * 0.52) calc(var(--av, 32px) * 0.18) rgba(200, 210, 235, 0.35);
}
.aura-lavender-drift::after{
  opacity: 0.9;
  animation: aura-wave 2.9s ease-in-out infinite;
  box-shadow:
    0 0 calc(var(--av, 32px) * 0.36) calc(var(--av, 32px) * 0.14) rgba(190, 160, 230, 0.65),
    0 0 calc(var(--av, 32px) * 0.58) calc(var(--av, 32px) * 0.2) rgba(210, 180, 255, 0.3);
}
.aura-still-ripple::after{
  animation: aura-wave 2.4s ease-in-out infinite;
  background:
    radial-gradient(circle, transparent 84%, rgba(100, 190, 230, 0.45) 87.2%, transparent 92.5%),
    radial-gradient(circle, transparent 92.5%, rgba(140, 210, 240, 0.3) 95.7%, transparent 100%);
  box-shadow:
    0 0 0 calc(var(--av, 32px) * 0.04) rgba(100, 190, 230, 0.35),
    0 0 calc(var(--av, 32px) * 0.36) calc(var(--av, 32px) * 0.14) rgba(120, 190, 230, 0.5);
  opacity: 0.92;
}
.aura-hill-ember::after, .aura-shepherds-watch::after{
  animation: aura-distort 2.2s ease-in-out infinite;
  opacity: 0.95;
  box-shadow:
    0 0 calc(var(--av, 32px) * 0.4) calc(var(--av, 32px) * 0.16) rgba(240, 160, 70, 0.65),
    0 0 calc(var(--av, 32px) * 0.6) calc(var(--av, 32px) * 0.22) rgba(255, 100, 30, 0.28);
}
.aura-cloak-mist::after, .aura-s1-shepherds-cloak::after{
  animation: aura-wave 3.2s ease-in-out infinite;
  opacity: 0.85;
  box-shadow:
    0 0 calc(var(--av, 32px) * 0.4) calc(var(--av, 32px) * 0.15) rgba(140, 160, 180, 0.55),
    0 0 calc(var(--av, 32px) * 0.6) calc(var(--av, 32px) * 0.22) rgba(100, 120, 150, 0.28);
}
.aura-rose-sparkle::after{
  opacity: 0.95;
  animation: aura-speckle-glow 1.9s ease-in-out infinite;
  background:
    radial-gradient(circle at 18% 28%, #fff 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 78% 22%, #ffe0f0 0 2px, transparent 3px),
    radial-gradient(circle at 32% 78%, #ff80c0 0 2.5px, transparent 3.5px),
    radial-gradient(circle at 82% 68%, #fff 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 52% 48%, #ffc0e0 0 2px, transparent 3px),
    radial-gradient(circle at 60% 35%, #ff4aa0 0 1.5px, transparent 2.5px);
  box-shadow:
    0 0 calc(var(--av, 32px) * 0.3) calc(var(--av, 32px) * 0.12) rgba(255, 100, 170, 0.7),
    0 0 calc(var(--av, 32px) * 0.4) calc(var(--av, 32px) * 0.14) rgba(255, 180, 210, 0.4);
}
.aura-cotton-candy::after{
  opacity: 0.95;
  width: calc(var(--av, 32px) * 1.34); height: calc(var(--av, 32px) * 1.34);
  box-shadow:
    0 0 calc(var(--av, 32px) * 0.44) calc(var(--av, 32px) * 0.16) rgba(255, 160, 210, 0.6),
    0 0 calc(var(--av, 32px) * 0.6) calc(var(--av, 32px) * 0.22) rgba(170, 200, 255, 0.4);
}
.aura-honey-glow::after{
  opacity: 0.95;
  animation: aura-distort 2.4s ease-in-out infinite;
  box-shadow:
    0 0 calc(var(--av, 32px) * 0.42) calc(var(--av, 32px) * 0.16) rgba(255, 190, 80, 0.7),
    0 0 calc(var(--av, 32px) * 0.62) calc(var(--av, 32px) * 0.24) rgba(240, 160, 40, 0.35);
}
.aura-living-water::after{
  opacity: 0.95;
  animation: aura-wave 2.5s ease-in-out infinite;
}
.aura-star-bethlehem::after{
  opacity: 0.98;
  animation: aura-speckle-glow 2s ease-in-out infinite;
}
.aura-flock-radiance::after, .aura-shepherd-glory::after, .aura-flock-keeper::after{
  opacity: 1;
  width: calc(var(--av, 32px) * 1.38); height: calc(var(--av, 32px) * 1.38);
  animation: aura-speckle-glow 2.1s ease-in-out infinite;
  background:
    radial-gradient(circle at 20% 25%, #fff 0 2px, transparent 3px),
    radial-gradient(circle at 80% 30%, #ffe080 0 2px, transparent 3px),
    radial-gradient(circle at 30% 75%, #fff8c0 0 1.5px, transparent 2.5px),
    radial-gradient(circle at 70% 70%, #fff 0 2px, transparent 3px),
    radial-gradient(circle, rgba(255, 220, 120, 0.35) 0%, transparent 65%);
  box-shadow:
    0 0 calc(var(--av, 32px) * 0.48) calc(var(--av, 32px) * 0.18) rgba(255, 210, 100, 0.65),
    0 0 calc(var(--av, 32px) * 0.7) calc(var(--av, 32px) * 0.24) rgba(255, 180, 60, 0.35);
}
.aura-lambs-crown::after{
  border-radius: 14%;
  animation: aura-square-hard 2.4s ease-in-out infinite;
  opacity: 0.98;
}
.aura-olive-corona::after{
  border-radius: 16%;
  animation: aura-square-pulse 2.8s ease-in-out infinite;
  opacity: 0.92;
}
.aura-rainbow-promise::after{
  opacity: 1;
  width: calc(var(--av, 32px) * 1.36); height: calc(var(--av, 32px) * 1.36);
}
.aura-burning-bush::after{
  animation: aura-distort 1.6s ease-in-out infinite;
  opacity: 0.98;
}
.aura-furnace-flame::after{
  opacity: 1;
  animation: aura-furnace 1.1s ease-in-out infinite;
}
.aura-pillar-cloud::after{
  animation: aura-wave 2.6s ease-in-out infinite;
  opacity: 0.92;
}
.aura-pillar-fire::after{
  animation: aura-distort 1.4s ease-in-out infinite;
  opacity: 0.98;
}
.aura-torn-veil::after{
  animation: aura-distort 2.4s ease-in-out infinite;
  opacity: 0.9;
}
.aura-open-heaven::after{
  animation: aura-wave-loud 2.2s ease-in-out infinite;
  opacity: 0.98;
}
.aura-white-throne::after{
  border-radius: 14%;
  animation: aura-square-pulse 2.6s ease-in-out infinite;
  opacity: 1;
}
.aura-soft-silver::after{
  animation: aura-wave 3.4s ease-in-out infinite;
  opacity: 0.78;
}
.aura-dawn-blush::after{
  animation: aura-wave 2.5s ease-in-out infinite;
  opacity: 0.9;
}
.aura-deep-teal-drift::after{
  animation: aura-wave 2.7s ease-in-out infinite;
  background:
    radial-gradient(circle, transparent 84%, rgba(40, 180, 190, 0.4) 89.6%, transparent 97.6%),
    radial-gradient(circle at 50% 50%, rgba(40, 160, 170, 0.4) 48%, transparent 100%);
  opacity: 0.92;
}
.aura-quiet-ember::after{
  animation: aura-distort 2.8s ease-in-out infinite;
  opacity: 0.72;
}

/* —— 20 new shop auras (distinct FX languages) —— */
/* PNG ring/halo art (transparent) + CSS glow/particles */

.aura-steadfast-hope::after {
  /* b90: PNG ring zoomed so luminous band hugs face (was contain → hole under photo) */
  background-image: url(/auras/aura-steadfast-hope.png);
  background-size: 158%;
  background-repeat: no-repeat;
  background-position: center;

  width: calc(var(--av, 32px) * 1.32); height: calc(var(--av, 32px) * 1.32);
  animation: aura-wave 2.5s ease-in-out infinite;
  box-shadow:
    0 0 calc(var(--av, 32px) * 0.4) calc(var(--av, 32px) * 0.14) rgba(90, 150, 255, 0.55),
    0 0 calc(var(--av, 32px) * 0.58) calc(var(--av, 32px) * 0.2) rgba(255, 200, 80, 0.28);
  opacity: 0.95;
}
.aura-gentle-mercy::after {
  /* b90: PNG ring zoomed so luminous band hugs face (was contain → hole under photo) */
  background-image: url(/auras/aura-gentle-mercy.png);
  background-size: 158%;
  background-repeat: no-repeat;
  background-position: center;

  width: calc(var(--av, 32px) * 1.26); height: calc(var(--av, 32px) * 1.26);
  animation: aura-wave 3.4s ease-in-out infinite;
  box-shadow: 0 0 calc(var(--av, 32px) * 0.32) calc(var(--av, 32px) * 0.1) rgba(255, 160, 190, 0.45);
  opacity: 0.72;
}
.aura-quiet-strength::after {
  /* b90: PNG ring zoomed so luminous band hugs face (was contain → hole under photo) */
  background-image: url(/auras/aura-quiet-strength.png);
  background-size: 158%;
  background-repeat: no-repeat;
  background-position: center;

  width: calc(var(--av, 32px) * 1.24); height: calc(var(--av, 32px) * 1.24);
  border-radius: 16%;
  animation: aura-square-pulse 3.6s ease-in-out infinite;
  box-shadow:
    0 0 0 2px rgba(200, 210, 220, 0.45),
    0 0 calc(var(--av, 32px) * 0.28) calc(var(--av, 32px) * 0.08) rgba(160, 170, 185, 0.4);
  opacity: 0.7;
}
.aura-faithful-light::after {
  /* b90: PNG ring zoomed so luminous band hugs face (was contain → hole under photo) */
  background-image: url(/auras/aura-faithful-light.png);
  background-size: 158%;
  background-repeat: no-repeat;
  background-position: center;

  width: calc(var(--av, 32px) * 1.38); height: calc(var(--av, 32px) * 1.38);
  animation: aura-speckle-glow 1.8s ease-in-out infinite;
  box-shadow:
    0 0 calc(var(--av, 32px) * 0.5) calc(var(--av, 32px) * 0.18) rgba(255, 210, 80, 0.7),
    0 0 calc(var(--av, 32px) * 0.72) calc(var(--av, 32px) * 0.26) rgba(255, 180, 40, 0.35);
  opacity: 1;
}
.aura-kindness-glow::after {
  /* b90: PNG ring zoomed so luminous band hugs face (was contain → hole under photo) */
  background-image: url(/auras/aura-kindness-glow.png);
  background-size: 158%;
  background-repeat: no-repeat;
  background-position: center;

  width: calc(var(--av, 32px) * 1.28); height: calc(var(--av, 32px) * 1.28);
  animation: aura-speckle-glow 2.6s ease-in-out infinite;
  box-shadow: 0 0 calc(var(--av, 32px) * 0.34) calc(var(--av, 32px) * 0.12) rgba(255, 170, 120, 0.55);
  opacity: 0.88;
}
.aura-peace-overflow::after {
  /* b90: PNG ring zoomed so luminous band hugs face (was contain → hole under photo) */
  background-image: url(/auras/aura-peace-overflow.png);
  background-size: 158%;
  background-repeat: no-repeat;
  background-position: center;

  width: calc(var(--av, 32px) * 1.34); height: calc(var(--av, 32px) * 1.34);
  animation: aura-wave 2.6s ease-in-out infinite;
  box-shadow: 0 0 calc(var(--av, 32px) * 0.42) calc(var(--av, 32px) * 0.15) rgba(40, 180, 175, 0.55);
  opacity: 0.94;
}
.aura-joyful-dawn::after {
  /* b90: PNG ring zoomed so luminous band hugs face (was contain → hole under photo) */
  background-image: url(/auras/aura-joyful-dawn.png);
  background-size: 158%;
  background-repeat: no-repeat;
  background-position: center;

  width: calc(var(--av, 32px) * 1.34); height: calc(var(--av, 32px) * 1.34);
  animation: aura-distort 2s ease-in-out infinite;
  box-shadow:
    0 calc(var(--av, 32px) * -0.06) calc(var(--av, 32px) * 0.42) calc(var(--av, 32px) * 0.14) rgba(255, 160, 90, 0.55),
    0 0 calc(var(--av, 32px) * 0.55) calc(var(--av, 32px) * 0.18) rgba(255, 100, 120, 0.25);
  opacity: 0.96;
}
.aura-pure-heart::after {
  /* b90: PNG ring zoomed so luminous band hugs face (was contain → hole under photo) */
  background-image: url(/auras/aura-pure-heart.png);
  background-size: 158%;
  background-repeat: no-repeat;
  background-position: center;

  width: calc(var(--av, 32px) * 1.32); height: calc(var(--av, 32px) * 1.32);
  animation: aura-speckle-glow 1.7s ease-in-out infinite;
  box-shadow:
    0 0 calc(var(--av, 32px) * 0.4) calc(var(--av, 32px) * 0.14) rgba(255, 80, 150, 0.55),
    0 0 calc(var(--av, 32px) * 0.58) calc(var(--av, 32px) * 0.2) rgba(255, 255, 255, 0.35);
  opacity: 0.98;
}
.aura-abiding-grace::after {
  /* b90: PNG ring zoomed so luminous band hugs face (was contain → hole under photo) */
  background-image: url(/auras/aura-abiding-grace.png);
  background-size: 158%;
  background-repeat: no-repeat;
  background-position: center;

  width: calc(var(--av, 32px) * 1.28); height: calc(var(--av, 32px) * 1.28);
  border-radius: 18%;
  animation: aura-square-pulse 3.2s ease-in-out infinite;
  box-shadow:
    0 0 0 2px rgba(255, 220, 140, 0.5),
    0 0 calc(var(--av, 32px) * 0.32) calc(var(--av, 32px) * 0.1) rgba(240, 200, 100, 0.45);
  opacity: 0.82;
}
.aura-living-hope::after {
  /* b90: PNG ring zoomed so luminous band hugs face (was contain → hole under photo) */
  background-image: url(/auras/aura-living-hope.png);
  background-size: 158%;
  background-repeat: no-repeat;
  background-position: center;

  width: calc(var(--av, 32px) * 1.38); height: calc(var(--av, 32px) * 1.38);
  animation: aura-wave-loud 2.2s ease-in-out infinite;
  box-shadow:
    0 0 calc(var(--av, 32px) * 0.48) calc(var(--av, 32px) * 0.18) rgba(70, 200, 100, 0.65),
    0 0 calc(var(--av, 32px) * 0.68) calc(var(--av, 32px) * 0.24) rgba(40, 160, 70, 0.35);
  opacity: 1;
}
.aura-tender-compassion::after {
  /* b90: PNG ring zoomed so luminous band hugs face (was contain → hole under photo) */
  background-image: url(/auras/aura-tender-compassion.png);
  background-size: 158%;
  background-repeat: no-repeat;
  background-position: center;

  width: calc(var(--av, 32px) * 1.22); height: calc(var(--av, 32px) * 1.22);
  animation: aura-wave 3.8s ease-in-out infinite;
  box-shadow: 0 0 calc(var(--av, 32px) * 0.26) calc(var(--av, 32px) * 0.08) rgba(255, 150, 180, 0.4);
  opacity: 0.62;
}
.aura-bold-courage::after {
  /* b90: PNG ring zoomed so luminous band hugs face (was contain → hole under photo) */
  background-image: url(/auras/aura-bold-courage.png);
  background-size: 158%;
  background-repeat: no-repeat;
  background-position: center;

  width: calc(var(--av, 32px) * 1.36); height: calc(var(--av, 32px) * 1.36);
  border-radius: 10%;
  animation: aura-square-hard 2s ease-in-out infinite;
  box-shadow:
    0 0 0 3px rgba(255, 100, 50, 0.65),
    0 0 calc(var(--av, 32px) * 0.45) calc(var(--av, 32px) * 0.16) rgba(255, 80, 40, 0.55),
    0 0 calc(var(--av, 32px) * 0.65) calc(var(--av, 32px) * 0.22) rgba(255, 160, 40, 0.3);
  opacity: 1;
}
.aura-humble-glory::after {
  /* b90: PNG ring zoomed so luminous band hugs face (was contain → hole under photo) */
  background-image: url(/auras/aura-humble-glory.png);
  background-size: 158%;
  background-repeat: no-repeat;
  background-position: center;

  width: calc(var(--av, 32px) * 1.26); height: calc(var(--av, 32px) * 1.26);
  animation: aura-wave 3.5s ease-in-out infinite;
  box-shadow: 0 0 calc(var(--av, 32px) * 0.3) calc(var(--av, 32px) * 0.1) rgba(190, 205, 220, 0.5);
  opacity: 0.7;
}
.aura-steadfast-love::after {
  /* b90: PNG ring zoomed so luminous band hugs face (was contain → hole under photo) */
  background-image: url(/auras/aura-steadfast-love.png);
  background-size: 158%;
  background-repeat: no-repeat;
  background-position: center;

  width: calc(var(--av, 32px) * 1.3); height: calc(var(--av, 32px) * 1.3);
  animation: aura-speckle-glow 2.3s ease-in-out infinite;
  box-shadow: 0 0 calc(var(--av, 32px) * 0.38) calc(var(--av, 32px) * 0.14) rgba(220, 50, 80, 0.55);
  opacity: 0.94;
}
.aura-wisdom-light::after {
  /* b90: PNG ring zoomed so luminous band hugs face (was contain → hole under photo) */
  background-image: url(/auras/aura-wisdom-light.png);
  background-size: 158%;
  background-repeat: no-repeat;
  background-position: center;

  width: calc(var(--av, 32px) * 1.3); height: calc(var(--av, 32px) * 1.3);
  border-radius: 14%;
  animation: aura-square-pulse 2.7s ease-in-out infinite;
  box-shadow:
    0 0 0 2px rgba(190, 140, 255, 0.55),
    0 0 calc(var(--av, 32px) * 0.38) calc(var(--av, 32px) * 0.12) rgba(160, 100, 240, 0.5);
  opacity: 0.92;
}
.aura-truth-beacon::after {
  /* b90: PNG ring zoomed so luminous band hugs face (was contain → hole under photo) */
  background-image: url(/auras/aura-truth-beacon.png);
  background-size: 158%;
  background-repeat: no-repeat;
  background-position: center;

  width: calc(var(--av, 32px) * 1.36); height: calc(var(--av, 32px) * 1.36);
  border-radius: 12%;
  animation: aura-square-hard 2.3s ease-in-out infinite;
  box-shadow:
    0 0 0 3px rgba(100, 230, 255, 0.7),
    0 0 calc(var(--av, 32px) * 0.45) calc(var(--av, 32px) * 0.16) rgba(60, 200, 255, 0.55);
  opacity: 1;
}
.aura-new-mercies::after {
  /* b90: PNG ring zoomed so luminous band hugs face (was contain → hole under photo) */
  background-image: url(/auras/aura-new-mercies.png);
  background-size: 158%;
  background-repeat: no-repeat;
  background-position: center;

  width: calc(var(--av, 32px) * 1.3); height: calc(var(--av, 32px) * 1.3);
  animation: aura-wave 2.6s ease-in-out infinite;
  box-shadow: 0 0 calc(var(--av, 32px) * 0.38) calc(var(--av, 32px) * 0.14) rgba(255, 170, 70, 0.55);
  opacity: 0.92;
}
.aura-covenant-light::after {
  /* b90: PNG ring zoomed so luminous band hugs face (was contain → hole under photo) */
  background-image: url(/auras/aura-covenant-light.png);
  background-size: 158%;
  background-repeat: no-repeat;
  background-position: center;

  width: calc(var(--av, 32px) * 1.34); height: calc(var(--av, 32px) * 1.34);
  border-radius: 16%;
  animation: aura-square-pulse 2.5s ease-in-out infinite;
  box-shadow:
    0 0 0 2px rgba(255, 220, 160, 0.55),
    0 0 calc(var(--av, 32px) * 0.42) calc(var(--av, 32px) * 0.14) rgba(180, 160, 255, 0.4);
  opacity: 0.95;
}
.aura-restored-joy::after {
  /* b90: PNG ring zoomed so luminous band hugs face (was contain → hole under photo) */
  background-image: url(/auras/aura-restored-joy.png);
  background-size: 158%;
  background-repeat: no-repeat;
  background-position: center;

  width: calc(var(--av, 32px) * 1.36); height: calc(var(--av, 32px) * 1.36);
  animation: aura-speckle-glow 1.6s ease-in-out infinite;
  box-shadow:
    0 0 calc(var(--av, 32px) * 0.48) calc(var(--av, 32px) * 0.18) rgba(255, 210, 40, 0.7),
    0 0 calc(var(--av, 32px) * 0.68) calc(var(--av, 32px) * 0.24) rgba(255, 160, 20, 0.35);
  opacity: 1;
}
.aura-patient-endurance::after {
  /* b90: PNG ring zoomed so luminous band hugs face (was contain → hole under photo) */
  background-image: url(/auras/aura-patient-endurance.png);
  background-size: 158%;
  background-repeat: no-repeat;
  background-position: center;

  width: calc(var(--av, 32px) * 1.24); height: calc(var(--av, 32px) * 1.24);
  animation: aura-distort 3.4s ease-in-out infinite;
  box-shadow: 0 0 calc(var(--av, 32px) * 0.28) calc(var(--av, 32px) * 0.1) rgba(140, 110, 70, 0.45);
  opacity: 0.68;
}

/* Particle intensity boost (existing + new) */
.aura-particles > i {
  box-shadow: 0 0 8px rgba(255,255,255,0.85);
}
.aura-fx-bubbles > i, .aura-fx-bubbles-duo > i,
.aura-fx-sparkle > i, .aura-fx-star > i,
.aura-fx-flame > i, .aura-fx-furnace > i,
.aura-fx-radiance > i, .aura-fx-rainbow > i {
  filter: brightness(1.15);
}

/* —— New particle FX toolkit —— */
@keyframes aura-mote-wave {
  0% { opacity: 0; transform: translate(-50%, -50%) translate(0, 10%) scale(0.5) skewX(-4deg); }
  30% { opacity: 0.95; }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(1.1) skewX(6deg); }
}
@keyframes aura-mote-wave-orbit {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(0deg) translateX(calc(var(--av, 32px) * 0.25)) skewY(-2deg); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(200deg) translateX(calc(var(--av, 32px) * 0.58)) skewY(3deg); }
}
@keyframes aura-mote-distort {
  0% { opacity: 0; transform: translate(-50%, -50%) translate(0, 20%) scale(0.5); filter: blur(0px); }
  25% { opacity: 1; filter: blur(0.2px); }
  55% { opacity: 0.7; transform: translate(-50%, -50%) translate(calc(var(--dx)*0.8), calc(var(--dy)*0.5)) scale(1.15) skewX(8deg); filter: blur(0.8px); }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(var(--dx), calc(var(--dy) - 25%)) scale(0.4); filter: blur(0.3px); }
}
@keyframes aura-mote-square {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(0deg) scale(0.4); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) rotate(45deg) scale(1); }
}
@keyframes aura-mote-square-orbit {
  0% { opacity: 0; transform: translate(-50%, -50%) rotate(0deg) translateX(calc(var(--av, 32px) * 0.3)); }
  20% { opacity: 1; }
  100% { opacity: 0; transform: translate(-50%, -50%) rotate(160deg) translateX(calc(var(--av, 32px) * 0.55)); }
}
@keyframes aura-mote-speckle {
  0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(0.2); }
  15% { opacity: 1; transform: translate(-50%, -50%) translate(calc(var(--dx)*0.3), calc(var(--dy)*0.3)) scale(1.4); }
  50% { opacity: 0.85; transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(0.9); }
  80% { opacity: 0.3; transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(0.4); }
}

.aura-fx-wave-ring > i {
  background: transparent;
  border: 1.5px solid rgba(100, 160, 255, 0.9);
  box-shadow: 0 0 8px rgba(90, 150, 255, 0.6), 0 0 2px #ffe080;
  animation-name: aura-mote-wave-orbit;
  border-radius: 50%;
  --sz: 9px;
}
.aura-fx-wave-ring > i:nth-child(even) { border-color: rgba(255, 210, 100, 0.9); }

.aura-fx-wave-soft > i {
  background: rgba(255, 180, 200, 0.85);
  box-shadow: 0 0 10px rgba(255, 150, 190, 0.55);
  animation-name: aura-mote-wave;
  filter: blur(0.6px);
  --sz: 6px;
}

.aura-fx-wave-quiet > i {
  background: rgba(245, 238, 214, 0.75);
  box-shadow: 0 0 6px rgba(220, 210, 175, 0.4);
  animation-name: aura-mote-wave;
  filter: blur(0.7px);
  --sz: 5px;
  opacity: 0.7;
}

.aura-fx-wave-teal > i {
  background: transparent;
  border: 1.5px solid rgba(40, 200, 190, 0.9);
  box-shadow: 0 0 8px rgba(40, 180, 175, 0.55);
  animation-name: aura-mote-wave-orbit;
  border-radius: 50%;
  --sz: 8px;
}

.aura-fx-wave-loud > i {
  background: transparent;
  border: 2px solid rgba(70, 220, 100, 0.95);
  box-shadow: 0 0 10px rgba(60, 200, 90, 0.75), 0 0 3px #fff;
  animation-name: aura-mote-wave-orbit;
  border-radius: 50%;
  --sz: 10px;
}
.aura-fx-wave-loud > i:nth-child(odd) { border-color: rgba(180, 255, 140, 0.95); }

.aura-fx-wave-silver > i {
  background: rgba(220, 230, 240, 0.9);
  box-shadow: 0 0 8px rgba(200, 215, 230, 0.65);
  animation-name: aura-mote-wave;
  border-radius: 40%;
  --sz: 4px;
}

.aura-fx-wave-amber > i {
  background: linear-gradient(#fff0c0, #ffb040);
  box-shadow: 0 0 8px rgba(255, 170, 60, 0.7);
  animation-name: aura-mote-wave;
  --sz: 5px;
}

.aura-fx-distort-dawn > i {
  background: linear-gradient(#ffe0a0, #ff7040);
  box-shadow: 0 0 10px rgba(255, 120, 60, 0.75);
  animation-name: aura-mote-distort;
  border-radius: 40% 60% 50% 45%;
  --sz: 5px;
}
.aura-fx-distort-dawn > i:nth-child(even) { background: linear-gradient(#ffc0d0, #ff5080); }

.aura-fx-distort-quiet > i {
  background: rgba(160, 130, 90, 0.85);
  box-shadow: 0 0 7px rgba(140, 110, 70, 0.5);
  animation-name: aura-mote-distort;
  filter: blur(0.45px);
  --sz: 4px;
}

.aura-fx-square-quiet > i {
  background: rgba(190, 200, 210, 0.9);
  box-shadow: 0 0 6px rgba(160, 170, 185, 0.5);
  animation-name: aura-mote-square;
  border-radius: 2px;
  --sz: 5px;
}

.aura-fx-square-soft > i {
  background: linear-gradient(135deg, #fff6c8, #e8c060);
  box-shadow: 0 0 8px rgba(240, 200, 100, 0.65);
  animation-name: aura-mote-square;
  border-radius: 2px;
  --sz: 5px;
}

.aura-fx-square-loud > i {
  background: linear-gradient(160deg, #ff6040, #ffc040);
  box-shadow: 0 0 10px rgba(255, 80, 40, 0.8), 0 0 2px #fff;
  animation-name: aura-mote-square-orbit;
  border-radius: 1px;
  --sz: 6px;
}

.aura-fx-square-wisdom > i {
  background: linear-gradient(135deg, #d0a0ff, #8040e0);
  box-shadow: 0 0 8px rgba(160, 100, 240, 0.7);
  animation-name: aura-mote-square-orbit;
  border-radius: 2px;
  --sz: 5px;
}

.aura-fx-square-speckle > i {
  background: #fff;
  box-shadow: 0 0 8px #40e0ff, 0 0 2px #fff;
  animation-name: aura-mote-speckle;
  border-radius: 1px;
  --sz: 3px;
}
.aura-fx-square-speckle > i:nth-child(even) {
  background: #40e0ff;
  border-radius: 2px;
  --sz: 4px;
  animation-name: aura-mote-square-orbit;
}

.aura-fx-square-covenant > i {
  animation-name: aura-mote-square-orbit;
  border-radius: 2px;
  --sz: 5px;
  box-shadow: 0 0 7px currentColor;
}
.aura-fx-square-covenant > i:nth-child(1) { background: #ff6b8a; }
.aura-fx-square-covenant > i:nth-child(2) { background: #ffb14a; }
.aura-fx-square-covenant > i:nth-child(3) { background: #ffe566; }
.aura-fx-square-covenant > i:nth-child(4) { background: #6fdc8c; }
.aura-fx-square-covenant > i:nth-child(5) { background: #6bb0ff; }
.aura-fx-square-covenant > i:nth-child(6) { background: #b07cff; }

.aura-fx-speckle-loud > i {
  background: #fff;
  box-shadow: 0 0 10px #ffe066, 0 0 3px #fff;
  animation-name: aura-mote-speckle;
  --sz: 3px;
}
.aura-fx-speckle-loud > i:nth-child(even) { background: #ffe040; --sz: 4px; }
.aura-fx-speckle-loud > i:nth-child(3n) { background: #ff9800; }

.aura-fx-speckle-soft > i {
  background: #fff;
  box-shadow: 0 0 7px rgba(255, 180, 120, 0.8);
  animation-name: aura-mote-speckle;
  --sz: 2.5px;
}
.aura-fx-speckle-soft > i:nth-child(even) { background: #ffd0a0; }

.aura-fx-speckle-contrast > i {
  background: #fff;
  box-shadow: 0 0 10px #ff4a90, 0 0 2px #fff;
  animation-name: aura-mote-speckle;
  --sz: 3.5px;
}
.aura-fx-speckle-contrast > i:nth-child(even) { background: #ff4a90; --sz: 3px; }
.aura-fx-speckle-contrast > i:nth-child(3n) { background: #ff80b0; }

.aura-fx-speckle-love > i {
  background: #fff;
  box-shadow: 0 0 8px #ff3040;
  animation-name: aura-mote-speckle;
  --sz: 3px;
}
.aura-fx-speckle-love > i:nth-child(even) { background: #ff2040; }
.aura-fx-speckle-love > i:nth-child(3n) { background: #ff90a0; }

.aura-fx-speckle-joy > i {
  background: #fff;
  box-shadow: 0 0 10px #ffe040, 0 0 3px #fff;
  animation-name: aura-mote-speckle;
  --sz: 3.5px;
}
.aura-fx-speckle-joy > i:nth-child(even) { background: #ffe040; --sz: 4px; }
.aura-fx-speckle-joy > i:nth-child(3n) { background: #ff9800; }

/* Quiet vs loud particle intensity helpers */
.aura-fx-wave-quiet > i, .aura-fx-square-quiet > i, .aura-fx-distort-quiet > i, .aura-fx-wave-soft > i {
  animation-duration: calc(var(--dur, 2.8s) * 1.25);
}
.aura-fx-wave-loud > i, .aura-fx-square-loud > i, .aura-fx-speckle-loud > i, .aura-fx-speckle-joy > i, .aura-fx-speckle-contrast > i {
  animation-duration: calc(var(--dur, 2.8s) * 0.85);
}

@media (prefers-reduced-motion: reduce) {
  .aura-steadfast-hope::after, .aura-gentle-mercy::after, .aura-quiet-strength::after,
  .aura-faithful-light::after, .aura-kindness-glow::after, .aura-peace-overflow::after,
  .aura-joyful-dawn::after, .aura-pure-heart::after, .aura-abiding-grace::after,
  .aura-living-hope::after, .aura-tender-compassion::after, .aura-bold-courage::after,
  .aura-humble-glory::after, .aura-steadfast-love::after, .aura-wisdom-light::after,
  .aura-truth-beacon::after, .aura-new-mercies::after, .aura-covenant-light::after,
  .aura-restored-joy::after, .aura-patient-endurance::after,
  .aura-still-ripple::after, .aura-hill-ember::after, .aura-shepherds-watch::after,
  .aura-cloak-mist::after, .aura-lambs-crown::after, .aura-olive-corona::after,
  .aura-burning-bush::after, .aura-white-throne::after, .aura-torn-veil::after{
    animation: aura-breathe 4s ease-in-out infinite !important;
    filter: none !important;
  }
}


/* === reply55: comment reactions removed; comment stickers removed === */
.comment-like,
.comment-react-counts,
.comment-react-chip,
.comment-react-picker,
.comment-react-bar,
.comment-react-opt,
.comments-react-tip {
  display: none !important;
}
.comments-thread.has-react-bar-open {
  padding-bottom: 0;
}



/* ===== Study sticker book (stbook55) ===== */
.stickers-face {
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: 18px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 18% 12%, rgba(255,255,255,0.55), transparent 42%),
    radial-gradient(ellipse at 88% 78%, rgba(212,160,84,0.14), transparent 48%),
    repeating-linear-gradient(
      0deg,
      rgba(120, 90, 40, 0.018) 0px,
      rgba(120, 90, 40, 0.018) 1px,
      transparent 1px,
      transparent 3px
    ),
    linear-gradient(165deg, #faf6ec 0%, #f3ead8 48%, #e9dcc4 100%);
  border: 1px solid var(--line);
  pointer-events: none;
  visibility: hidden;
  transform-origin: 100% 50%;
  transform: rotateY(-92deg);
  transition: transform 0.58s cubic-bezier(0.4, 0.12, 0.2, 1);
  box-shadow: -18px 0 28px rgba(0, 0, 0, 0.28);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
}
.card.is-stickers-open .stickers-face {
  pointer-events: auto;
  visibility: visible;
  transform: rotateY(0deg);
  transition: transform 0.58s cubic-bezier(0.4, 0.12, 0.2, 1), visibility 0s linear 0s;
}
/* Page-turn: comments face folds away while stickers opens (no instant cut) */
.card.is-comments-open.is-stickers-open .comments-face,
.card.is-stickers-open .comments-face {
  visibility: visible !important;
  pointer-events: none !important;
  transform: rotateY(92deg) !important;
  transition: transform 0.58s cubic-bezier(0.4, 0.12, 0.2, 1);
}
.card.is-stickers-open:not(.is-comments-open) .comments-face {
  visibility: hidden !important;
}
.card.is-stickers-open .gw-tab,
.card.is-stickers-open .collab-tab {
  display: none;
}
.card.is-gw-open .stickers-face {
  visibility: hidden !important;
  pointer-events: none !important;
}
.stickers-face-mount {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.stickers-face-mount .stickers-book-panel,
.stickers-face.has-stickers-panel .stickers-book-panel {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 12px 12px 0;
  box-sizing: border-box;
  background: transparent;
  border: 0;
  overflow: hidden;
}
.card.is-dual.is-stickers-open .stickers-face-mount {
  margin-left: 30px;
  width: calc(100% - 30px);
  box-sizing: border-box;
}

.stickers-book-panel { color: var(--ink); }
.stickers-book-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  flex: 0 0 auto;
  margin-bottom: 8px;
}
.stickers-book-head h2 {
  margin: 0;
  font-size: 22px;
  line-height: 1.15;
}
.stickers-book-mine-count {
  margin: 4px 0 0;
  font: 600 12px/1.2 "IBM Plex Sans", sans-serif;
  color: var(--muted);
}
.stickers-book-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 140px;
  border-radius: 14px;
  border: 1px solid rgba(120, 90, 40, 0.22);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.65),
    inset 0 0 40px rgba(180, 140, 80, 0.06);
  background:
    radial-gradient(circle at 14% 16%, rgba(255,255,255,0.7), transparent 40%),
    radial-gradient(circle at 86% 82%, rgba(212,160,84,0.16), transparent 44%),
    repeating-linear-gradient(
      90deg,
      rgba(90, 70, 40, 0.03) 0px,
      rgba(90, 70, 40, 0.03) 1px,
      transparent 1px,
      transparent 7px
    ),
    linear-gradient(180deg, #fffdf8 0%, #f6edd9 100%);
  overflow: hidden;
}
.stickers-book-canvas {
  position: absolute;
  inset: 0;
  touch-action: none;
}
.stickers-book-item {
  position: absolute;
  z-index: 2;
  /* b68: free natural size — no fixed square box */
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  font-size: 28px;
  line-height: 1;
  background: transparent;
  border: 0;
  padding: 0;
  border-radius: 0;
  /* Per-placer outline (shape-following via drop-shadow) */
  filter:
    drop-shadow(0 0 0.6px var(--sbook-outline, rgba(40,30,15,0.55)))
    drop-shadow(0 0 1.4px var(--sbook-outline, rgba(40,30,15,0.45)))
    drop-shadow(0 2px 3px rgba(0,0,0,0.18));
  cursor: grab;
  transform-origin: center center;
}
.stickers-book-item.is-selected {
  z-index: 4;
  /* b68: gold glow, not a circular/square outline box */
  outline: none;
  border-radius: 0;
  filter:
    drop-shadow(0 0 0.6px var(--sbook-outline, rgba(40,30,15,0.55)))
    drop-shadow(0 0 1.4px var(--sbook-outline, rgba(40,30,15,0.45)))
    drop-shadow(0 0 3px rgba(212,160,84,0.85))
    drop-shadow(0 0 8px rgba(212,160,84,0.45))
    drop-shadow(0 2px 3px rgba(0,0,0,0.18));
}
.stickers-book-item.is-theirs {
  cursor: default;
  /* Slightly stronger peer outline so others’ marks feel present */
  filter:
    drop-shadow(0 0 0.7px var(--sbook-outline, rgba(40,30,15,0.55)))
    drop-shadow(0 0 2px var(--sbook-outline, rgba(40,30,15,0.5)))
    drop-shadow(0 2px 4px rgba(0,0,0,0.16));
  opacity: 0.96;
}
/* b71: kill iOS WKWebView drop-shadow afterimage while panning */
.stickers-book-item.is-dragging,
.stickers-book-item.is-selected.is-dragging,
.stickers-book-item.is-theirs.is-dragging {
  filter: none;
  will-change: transform;
  cursor: grabbing;
}
.stickers-book-item .studio-sticker-rotate,
.stickers-book-item .studio-sticker-move,
.stickers-book-item .studio-sticker-resize {
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(0,0,0,0.18);
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  z-index: 5;
}
.stickers-book-item .studio-sticker-rotate { top: -12px; left: 50%; transform: translateX(-50%); cursor: grab; }
.stickers-book-item .studio-sticker-move { bottom: -12px; left: 50%; transform: translateX(-50%); cursor: move; }
.stickers-book-item .studio-sticker-resize { right: -12px; bottom: -12px; cursor: nwse-resize; }

/* reply62: comments face — Study only, no Close */
.comments-face-mount #comments-close,
.comments-face #comments-close,
body.is-comments-on-card #comments-close {
  display: none !important;
}

/* reply62: sticker book — multitouch only, no studio corner chrome */
.stickers-book-item .studio-sticker-rotate,
.stickers-book-item .studio-sticker-move,
.stickers-book-item .studio-sticker-resize {
  display: none !important;
}

.stickers-book-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 18px;
  text-align: center;
  box-sizing: border-box;
}
.stickers-book-empty-title {
  margin: 0;
  font: 700 16px/1.25 "Source Serif 4", Georgia, serif;
  color: var(--ink);
}
.stickers-book-empty-copy {
  margin: 0;
  max-width: 16rem;
  font-size: 13px;
  line-height: 1.4;
  color: var(--muted);
}
.stickers-book-empty-cta {
  margin-top: 6px;
}

.stickers-book-toolbar {
  flex: 0 0 auto;
  padding: 8px 0 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.stickers-book-hint {
  margin: 0 0 4px;
  font-size: 11px;
  line-height: 1.3;
  color: var(--muted);
}
.stickers-book-hint:empty { display: none; }
.stickers-book-empty-copy { display: none !important; }
.feature-tip-body:empty { display: none !important; }
.stickers-book-picker {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 2px 6px;
  min-height: 52px;
  -webkit-overflow-scrolling: touch;
}
.stickers-book-picker.is-cta-pulse {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 10px;
}
.stickers-book-picker-empty {
  margin: 0;
  font-size: 13px;
  color: var(--muted);
}
.stickers-book-pick {
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  border: 1px solid var(--line);
  background: #fff;
  font-size: 24px;
  line-height: 42px;
  text-align: center;
  cursor: pointer;
}
.stickers-book-pick.is-disabled,
.stickers-book-pick:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.stickers-book-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  align-items: center;
}
.stickers-book-report {
  font: 600 12px/1 "IBM Plex Sans", sans-serif;
  color: var(--muted);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-decoration: underline;
}
/* Stickers control — same chrome as Study tab; lives in .comments-head-actions */
.comments-stickers-fab {
  appearance: none;
  -webkit-appearance: none;
  position: relative;
  right: auto;
  top: auto;
  bottom: auto;
  z-index: 6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  box-sizing: border-box;
  margin: 0;
  height: 28px;
  min-height: 28px;
  padding: 4px 10px;
  border: 1px solid rgba(212, 160, 84, 0.55);
  border-bottom: 1px solid rgba(212, 160, 84, 0.55);
  border-radius: 8px;
  background: var(--ink-2);
  color: var(--gold, #d4a054);
  box-shadow: none;
  font: 700 10px/1 "IBM Plex Sans", sans-serif;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  pointer-events: auto;
  flex-shrink: 0;
}
.comments-stickers-fab:hover,
.comments-stickers-fab:focus {
  background: var(--gold-soft);
  outline: none;
}
.comments-stickers-fab[hidden] { display: none !important; }
.comments-stickers-fab-icon {
  font-size: 11px;
  line-height: 1;
  color: var(--gold);
}
.comments-stickers-fab-label { line-height: 1; }
.stickers-book-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  margin-left: 2px;
  border-radius: 999px;
  background: var(--gold);
  color: #1a1408;
  font: 700 10px/16px "IBM Plex Sans", sans-serif;
}

/* A) Reply / compose: hide STUDY + Stickers so they never cover "Replying to…" */
html.is-comments-kb .comments-study-tab,
html.is-comments-kb .comments-stickers-fab {
  display: none !important;
}
/* reply58: collapse title text only — keep head row + Close; never shrink the panel */
html.is-comments-kb .comments-sheet-head > div:first-child {
  visibility: hidden;
  max-height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  flex: 0 0 0;
  min-height: 0;
}
html.is-comments-kb .comments-sheet-head {
  margin-bottom: 4px;
  min-height: 36px;
  flex: 0 0 auto;
  align-items: center;
}
html.is-comments-kb .comments-form {
  z-index: 8 !important;
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  min-height: auto;
  max-height: none;
  overflow: visible;
  background: linear-gradient(180deg, rgba(22,17,12,0.98), var(--ink-2) 40%) !important;
}
html.is-comments-kb .comments-form.is-replying {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
}
html.is-comments-kb .comments-replying:not([hidden]) {
  position: relative;
  z-index: 9;
  flex: 0 0 auto;
  display: block;
}

/* reply61: Reply focus — parent comment sizes to content (max ~45%); compose fills leftover
   band only (between parent and keyboard / sheet bottom). Textarea grows to form content area.
   JS syncReplyComposeHeight() hardens vs visualViewport/kb. Full thread hidden; clone in
   #comments-reply-focus. Panel/sheet pinned to --vv-height (reply58); demote no-flash (reply59b). */
.comments-reply-focus {
  display: none;
  flex: 0 1 auto;
  min-height: 0;
  max-height: 45%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  padding: 4px 2px 8px;
  box-sizing: border-box;
}
.comments-reply-focus[hidden] {
  display: none !important;
}
.comments-reply-focus .comment-item.is-reply-focus-parent {
  margin: 0;
}
#comments-panel.is-reply-focus,
html.is-reply-focus #comments-panel,
.comments-face-mount #comments-panel.is-reply-focus {
  display: flex;
  flex-direction: column;
  min-height: 0;
  height: 100%;
  max-height: 100%;
  overflow: hidden;
}
#comments-panel.is-reply-focus #comments-thread,
html.is-reply-focus #comments-panel #comments-thread {
  display: none !important;
}
#comments-panel.is-reply-focus #comments-reply-focus,
html.is-reply-focus #comments-panel #comments-reply-focus {
  display: block !important;
  flex: 0 1 auto;
  min-height: 0;
  max-height: 45%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  box-sizing: border-box;
}
/* Compose fills leftover below parent only — no min-height that forces overflow. */
#comments-panel.is-reply-focus #comments-form,
#comments-panel.is-reply-focus #comments-form.is-replying,
html.is-reply-focus #comments-form,
html.is-reply-focus #comments-form.is-replying,
html.is-comments-kb.is-reply-focus #comments-form,
html.is-comments-kb.is-reply-focus #comments-form.is-replying,
html.is-comments-kb #comments-panel.is-reply-focus #comments-form,
html.is-comments-kb #comments-panel.is-reply-focus #comments-form.is-replying {
  flex: 1 1 0% !important;
  flex-shrink: 1 !important;
  min-height: 0 !important;
  max-height: none !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column;
  overflow: hidden;
  position: relative;
  bottom: auto;
  z-index: 8;
  box-sizing: border-box;
}
#comments-panel.is-reply-focus #comments-form .comments-field,
html.is-reply-focus #comments-form .comments-field,
html.is-comments-kb.is-reply-focus #comments-form .comments-field,
html.is-comments-kb #comments-panel.is-reply-focus #comments-form .comments-field {
  flex: 1 1 0%;
  min-height: 0;
  display: flex;
  flex-direction: column;
  margin: 0;
  overflow: hidden;
  box-sizing: border-box;
}
/* Textarea fills the form content band (not rows=3 chrome). JS may set explicit px height. */
#comments-panel.is-reply-focus #comments-form textarea,
html.is-reply-focus #comments-form textarea,
html.is-comments-kb.is-reply-focus #comments-form textarea,
html.is-comments-kb #comments-panel.is-reply-focus #comments-form textarea,
html.is-reply-focus #comments-body,
html.is-comments-kb.is-reply-focus #comments-body {
  flex: 1 1 0% !important;
  min-height: 0 !important;
  max-height: none !important;
  height: 100% !important;
  align-self: stretch;
  width: 100%;
  box-sizing: border-box;
  resize: none;
}
#comments-panel.is-reply-focus #comments-form .comments-form-row,
#comments-panel.is-reply-focus #comments-form .comments-replying,
#comments-panel.is-reply-focus #comments-form .comments-signin,
#comments-panel.is-reply-focus #comments-form .form-error,
html.is-reply-focus #comments-form .comments-form-row,
html.is-reply-focus #comments-form .comments-replying,
html.is-reply-focus #comments-form .comments-signin,
html.is-reply-focus #comments-form .form-error {
  flex: 0 0 auto;
}
html.is-reply-focus .comments-study-tab,
html.is-reply-focus .comments-stickers-fab,
#comments-panel.is-reply-focus .comments-stickers-fab {
  display: none !important;
}
/* Keep head compact in focus (with or without kb) */
html.is-reply-focus .comments-sheet-head > div:first-child {
  visibility: hidden;
  max-height: 0;
  overflow: hidden;
  margin: 0;
  padding: 0;
  flex: 0 0 0;
  min-height: 0;
}
html.is-reply-focus .comments-sheet-head {
  margin-bottom: 4px;
  min-height: 36px;
  flex: 0 0 auto;
  align-items: center;
}



/* Feature tip coach */
.feature-tip {
  position: fixed;
  left: 50%;
  bottom: max(18px, env(safe-area-inset-bottom, 0px));
  transform: translateX(-50%);
  z-index: 12000;
  width: min(92vw, 360px);
  pointer-events: auto;
}
.feature-tip[hidden] { display: none !important; }
.feature-tip-card {
  background: #1f1a12;
  color: #f7f1e4;
  border-radius: 14px;
  padding: 14px 14px 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,0.35);
  border: 1px solid rgba(212,160,84,0.35);
}
.feature-tip-title {
  margin: 0 0 4px;
  font: 700 14px/1.25 "IBM Plex Sans", sans-serif;
  color: var(--gold, #d4a054);
}
.feature-tip-body {
  margin: 0 0 10px;
  font-size: 13px;
  line-height: 1.4;
  color: rgba(247,241,228,0.9);
}
.feature-tip-gotit {
  appearance: none;
  border: 0;
  border-radius: 999px;
  padding: 8px 14px;
  background: var(--gold, #d4a054);
  color: #1a1408;
  font: 700 12px/1 "IBM Plex Sans", sans-serif;
  cursor: pointer;
}

.stickers-book-panel[hidden] { display: none !important; }

/* === b66: frame art-hero shrink — clear top-left Unlockable Type chip === */
/* Was scale(1.7)/scale(1.85) + 28px avatar; chrome + rings overlapped .unlock-tier / .shop-item-tier. */
.unlock-card.is-art-hero .unlock-art-hero .unlock-frame-mini,
.shop-item.is-art-hero .shop-art-hero .unlock-frame-mini {
  transform: scale(1.28);
  transform-origin: center center;
}
.unlock-card.is-art-hero.reward-frame .unlock-art-hero .unlock-frame-mini,
.shop-item.is-art-hero.shop-item-frame .shop-art-hero .unlock-frame-mini {
  transform: scale(1.32);
  transform-origin: center center;
}
.unlock-card.is-art-hero .unlock-art-hero .unlock-frame-mini > .avatar,
.shop-item.is-art-hero .shop-art-hero .unlock-frame-mini > .avatar,
.unlock-card.is-art-hero.reward-frame .unlock-art-hero .unlock-frame-mini > .avatar,
.shop-item.is-art-hero.shop-item-frame .shop-art-hero .unlock-frame-mini > .avatar {
  width: 24px;
  height: 24px;
  font-size: 10px;
}
/* Drop legacy 64px chip min-box so layout matches shrunk preview */
.unlock-card.is-art-hero .unlock-art-hero .unlock-frame-preview,
.unlock-card.is-art-hero .unlock-art-hero .unlock-reward-chip.frame-chip,
.shop-item.is-art-hero .shop-art-hero .shop-item-preview.frame,
.shop-item.is-art-hero .shop-art-hero .shop-item-preview.frame.unlock-frame-preview {
  min-width: 0 !important;
  min-height: 0 !important;
}
/* Slightly lower/tighter hero band so scaled chrome clears type chip with margin */
.unlock-card.is-art-hero.reward-frame .unlock-art-hero,
.shop-item.is-art-hero.shop-item-frame .shop-art-hero {
  min-height: 64px !important;
  padding: 14px 0 8px;
  margin-top: 2px;
}
/* Softer identity rings (was 3px/6px) — less sprawl into top-left chip */
.unlock-card.is-art-hero.reward-frame .unlock-art-hero .avatar-cosmetic-wrap.has-frame::before,
.shop-item.is-art-hero.shop-item-frame .shop-art-hero .avatar-cosmetic-wrap.has-frame::before {
  box-shadow:
    0 0 0 2px rgba(212,175,95,0.5),
    0 0 0 4px rgba(0,0,0,0.2),
    inset 0 0 0 1.5px rgba(255,255,255,0.22) !important;
}
/* Keep type chip above any leftover frame glow */
.unlock-card.is-art-hero .unlock-tier,
.shop-item.is-art-hero .shop-item-tier {
  z-index: 5;
}

/* === b67: sticker-book place pop / peer presence / inspect / place-only holo === */
.stickers-book-presence {
  margin: 2px 0 0;
  font: 600 12px/1.25 "IBM Plex Sans", sans-serif;
  color: var(--muted);
}
.stickers-book-presence:empty,
.stickers-book-presence[hidden] { display: none !important; }

.stickers-book-item.is-place-pop .unlock-studio-sticker-emoji {
  animation: sbook-place-pop 420ms cubic-bezier(0.22, 1.15, 0.36, 1) both;
}
@keyframes sbook-place-pop {
  /* b71: no filter keyframes — iOS compositor trails on filter anim */
  0% {
    transform: scale(1.2);
    opacity: 0.72;
  }
  55% {
    transform: scale(0.94);
    opacity: 1;
  }
  100% {
    transform: scale(1);
    opacity: 1;
  }
}

/* Book canvas: suppress always-on holo loop; one-shot place shine only */
.stickers-book-item .sticker-holo-shine {
  /* Continuous soft foil sweep on placements; place flash boosts briefly */
  animation: holofoil-shine 2.8s linear infinite;
  opacity: 0.62;
}
.stickers-book-item.is-place-shine .sticker-holo-shine {
  animation: sbook-place-holo-sweep 0.85s ease-out 1 both, holofoil-shine 2.8s linear 0.85s infinite;
  opacity: 0.85;
}
@keyframes sbook-place-holo-sweep {
  0% { background-position: -20% 50%; opacity: 0.25; }
  35% { opacity: 0.95; }
  100% { background-position: 120% 50%; opacity: 0.62; }
}
@media (prefers-reduced-motion: reduce) {
  .stickers-book-item.is-place-pop .unlock-studio-sticker-emoji,
  .stickers-book-item.is-place-shine .sticker-holo-shine {
    animation: none;
  }
}

.stickers-book-inspect {
  position: fixed;
  inset: 0;
  z-index: 12100;
  background: rgba(20, 14, 8, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 16px 16px max(16px, env(safe-area-inset-bottom, 0px));
  box-sizing: border-box;
}
.stickers-book-inspect[hidden] { display: none !important; }
.stickers-book-inspect-card {
  width: min(100%, 360px);
  /* b68: ScripShare dark scheme — cream/gold on ink (not black-on-dark paper) */
  background: linear-gradient(180deg, var(--paper-2), var(--ink-2));
  color: var(--text);
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: 0 16px 40px rgba(0,0,0,0.45);
  padding: 16px 16px 14px;
}
.stickers-book-inspect-name {
  margin: 0 0 2px;
  font: 700 16px/1.25 "IBM Plex Sans", sans-serif;
  color: var(--text);
}
.stickers-book-inspect-sub {
  margin: 0 0 12px;
  font: 500 13px/1.3 "IBM Plex Sans", sans-serif;
  color: var(--muted);
}
.stickers-book-inspect-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.stickers-book-inspect-actions .text-btn[hidden] { display: none !important; }

/* === b68: study-card sticker preview (author row) — free inline, not BR square === */
.card-sticker-preview {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
  flex-shrink: 0;
  margin: 0 0 0 4px;
  padding: 0;
  border: 0;
  background: transparent;
  line-height: 1;
  vertical-align: middle;
  cursor: pointer;
  pointer-events: auto;
  position: static; /* never absolute / corner-pinned */
  max-width: none;
  overflow: visible;
  box-shadow: none;
  border-radius: 0;
  width: auto;
  height: auto;
  aspect-ratio: auto;
}
.card-sticker-preview:focus {
  outline: none;
}
.card-sticker-preview:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: 6px;
}
.card-sticker-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  height: auto;
  min-width: 0;
  min-height: 0;
  line-height: 1;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0;
  aspect-ratio: auto;
}
.card-sticker-chip-emoji {
  font-size: 17px;
  line-height: 1;
  display: inline-block;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter:
    drop-shadow(0 0 0.45px #000)
    drop-shadow(0 0 0.9px #000)
    drop-shadow(0 0 0 #fff)
    drop-shadow(0 0 1.4px #fff)
    drop-shadow(0 0 2.4px #fff)
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.22));
}
.card-sticker-chip-emoji.is-holofoil,
.card-sticker-chip.is-holofoil .card-sticker-chip-emoji {
  filter:
    drop-shadow(0 0 0.45px #000)
    drop-shadow(0 0 0.9px #000)
    drop-shadow(0 0 0 #fff)
    drop-shadow(0 0 1.4px #fff)
    drop-shadow(0 0 2.4px #fff)
    drop-shadow(0 1px 2px rgba(0, 0, 0, 0.22));
}
.author .card-sticker-preview {
  max-width: none;
  overflow: visible;
  position: static;
}
/* Book page placements: kill b45 disc square sizing on emoji inside book items */
.stickers-book-item.unlock-studio-sticker,
.stickers-book-canvas .stickers-book-item {
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  line-height: 1 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  aspect-ratio: auto !important;
}
.stickers-book-item .unlock-studio-sticker-emoji,
.stickers-book-canvas .unlock-studio-sticker-emoji {
  display: inline-block !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  line-height: 1 !important;
  font-size: inherit !important;
  aspect-ratio: auto !important;
}
@media (max-width: 360px) {
  .card-sticker-chip-emoji { font-size: 15px; }
}

/* === b73 unlock-criteria + coin-hero QC === */
/* Sibling under hero (not inside clipped .unlock-art-hero). Answers "what do I do?" */
.unlock-card > .unlock-criteria {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin: 4px 8px 2px !important;
  padding: 0 !important;
  height: auto !important;
  max-height: calc(1.35em * 2);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 500;
  color: var(--muted);
  text-align: center;
  word-break: break-word;
}
.unlock-card > .unlock-criteria.is-unlocked {
  color: var(--up);
  font-weight: 600;
  -webkit-line-clamp: 1;
  line-clamp: 1;
  max-height: 1.35em;
}
/* Do not treat criteria as banned marketing subtitle */
.unlock-card.is-art-hero > .unlock-criteria,
.unlock-card.is-title-hero > .unlock-criteria,
.unlock-card.is-coins-hero > .unlock-criteria {
  display: -webkit-box !important;
}
.unlock-card.is-art-hero .unlock-progress,
.unlock-card.is-art-hero .unlock-progress-text,
.unlock-card.is-art-hero .unlock-memorize-refs,
.unlock-card.is-coins-hero .unlock-progress,
.unlock-card.is-coins-hero .unlock-progress-text,
.unlock-card.is-coins-hero .unlock-memorize-refs {
  margin-top: 6px;
}

/* === b74 unlock card center + top-right key + larger treasure === */
/* Type chip top-left; key badge top-right; everything else horizontally centered */
.unlock-card {
  text-align: center;
  align-items: center;
}
.unlock-card > .unlock-art-hero,
.unlock-card > .unlock-title-hero,
.unlock-card > .unlock-title,
.unlock-card > .unlock-criteria,
.unlock-card > .unlock-chest-row,
.unlock-card > .unlock-coin-row,
.unlock-card > .unlock-progress,
.unlock-card > .unlock-progress-text,
.unlock-card > .unlock-memorize-refs {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  text-align: center;
}
.unlock-card > .unlock-title {
  margin-left: auto;
  margin-right: auto;
}
.unlock-tier {
  text-align: left;
  left: 10px;
  right: auto;
  z-index: 5;
}

/* Top-right key badge — mirror of .unlock-tier; only key on the card */
.unlock-key-badge {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 34px;
  pointer-events: none;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.35));
}
.unlock-key-badge .unlock-key-svg {
  width: 40px !important;
  height: 30px !important;
  display: block;
}
.unlock-key-badge.is-missing {
  opacity: 0.75;
  color: var(--faint, #8a8490);
}
.unlock-key-badge.is-missing .unlock-key-svg {
  /* dashed outline already in SVG; keep muted */
  filter: none;
}
.unlock-key-badge.is-have {
  opacity: 1;
}
.unlock-key-badge.is-have .unlock-key-silver {
  filter: drop-shadow(0 0 3px rgba(200, 210, 230, 0.45));
}
.unlock-key-badge.is-have .unlock-key-gold {
  filter: drop-shadow(0 0 4px rgba(240, 200, 80, 0.55));
}

/* Hide any leftover chest-row key pairing (key lives top-right only) */
.unlock-chest-row .unlock-key-wrap,
.unlock-chest-row .unlock-key-status {
  display: none !important;
}

/* Centered chest / treasure — larger + readable */
.unlock-chest-row {
  position: relative;
  display: flex !important;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-height: 96px;
  margin: 6px auto 8px;
  width: 100%;
}
.unlock-treasure-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  margin: 0 auto;
}
.unlock-chest-svg {
  width: 92px;
  height: 80px;
}

/* Art-hero compact: larger chests, no key beside them */
.unlock-card.is-art-hero .unlock-chest-row.is-compact {
  min-height: 78px !important;
  margin: 6px auto 6px !important;
  gap: 0 !important;
  opacity: 1 !important;
}
.unlock-card.is-art-hero .unlock-chest-row.is-compact .unlock-chest-svg {
  width: 72px !important;
  height: 62px !important;
}
.unlock-card.is-art-hero .unlock-chest-row.is-compact .unlock-key-wrap,
.unlock-card.is-art-hero .unlock-chest-row.is-compact .unlock-key-svg,
.unlock-card.is-art-hero .unlock-chest-row.is-compact .unlock-key-status {
  display: none !important;
}

/* Criteria + progress centered */
.unlock-card > .unlock-criteria {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}
.unlock-progress {
  margin-left: auto;
  margin-right: auto;
}
.unlock-progress-text {
  text-align: center;
}


/* === write-scroll-invite b81 === */
/* Write form: outer .app is the only vertical scroller; nested overflow was trapping Invite. */
.app.is-write {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  /* Room under Share / Invite above the tab bar */
  padding-bottom: calc(var(--tabbar) + 36px + var(--safe-bottom)) !important;
  scroll-padding-bottom: calc(var(--tabbar) + 28px + var(--safe-bottom));
}
.app.is-write .view-write {
  overflow: visible;
  flex: 0 0 auto; /* don't clamp form height inside flex; allow natural growth */
  min-height: 0;
}
.app.is-write .write-form {
  padding-bottom: 24px;
}
#invite-collab,
#invite-collab-hint {
  scroll-margin-bottom: calc(var(--tabbar) + 24px + var(--safe-bottom));
}
/* Preview iframe was eating touch scroll gestures */
.write-preview-frame {
  pointer-events: none;
}
.write-preview-open,
.write-preview-fallback {
  pointer-events: auto;
}


/* === write-kb-fill b82 === */
html.is-write-kb .app.is-write {
  /* While study editor is focused, lock outer scroll so leftover band stays filled */
  overflow-y: hidden !important;
}
.editor-wrap.is-kb-fill {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.editor-wrap.is-kb-fill .format-bar {
  flex: 0 0 auto;
}
.editor-wrap.is-kb-fill .editor {
  flex: 1 1 auto;
  min-height: 0 !important;
  max-height: none !important;
  overflow-y: auto !important;
  -webkit-overflow-scrolling: touch;
}

/* === diecut-stickers-b83 === */
.sticker-diecut {
  display: block;
  width: 1em;
  height: 1em;
  object-fit: contain;
  background: transparent !important;
  border: none;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  flex-shrink: 0;
}
.shop-item-preview.sticker .sticker-diecut,
.unlock-sticker-preview .sticker-diecut,
.unlock-reward-chip.sticker-chip .sticker-diecut {
  width: 1em;
  height: 1em;
}
.shop-item.is-art-hero .shop-art-hero .shop-item-preview.sticker .sticker-diecut,
.unlock-card.is-art-hero .unlock-art-hero .unlock-sticker-preview .sticker-diecut,
.unlock-card.is-art-hero .unlock-art-hero .unlock-reward-chip .sticker-diecut {
  width: 88px;
  height: 88px;
  max-width: 100%;
  max-height: 100%;
}
.shop-item.is-art-hero .shop-art-hero .shop-item-preview.sticker .sticker-diecut {
  width: 96px;
  height: 96px;
}
/* Art-hero stickers: no circular tile behind die-cut PNGs */
.shop-item.is-art-hero .shop-art-hero .shop-item-preview.sticker,
.shop-item.is-art-hero .shop-art-hero .shop-item-preview.sticker.unlock-sticker-preview,
.unlock-card.is-art-hero .unlock-art-hero .unlock-sticker-preview,
.unlock-card.is-art-hero .unlock-art-hero .unlock-reward-chip.sticker-chip {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: none;
}
.unlock-carousel-sticker-emoji .sticker-diecut,
.unlock-studio-sticker-emoji .sticker-diecut,
.crop-stage-sticker-emoji .sticker-diecut,
.crop-sticker-tray-btn .sticker-diecut,
.gacha-reward-sticker .sticker-diecut {
  width: 1.15em;
  height: 1.15em;
}
.avatar-sticker .sticker-diecut {
  width: 100%;
  height: 100%;
}
.card-sticker-chip-emoji .sticker-diecut {
  width: 1.05em;
  height: 1.05em;
}
.stickers-book-item .unlock-studio-sticker-emoji .sticker-diecut {
  width: 72px;
  height: 72px;
}
/* Die-cut holofoil: mask-image shape (no text-clip); keep Pokemon rainbow sweep */
.sticker-holo-shine.sticker-holo-shine--diecut {
  display: block;
  -webkit-background-clip: border-box !important;
  background-clip: border-box !important;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-size: 0;
  line-height: 0;
  mix-blend-mode: overlay;
  opacity: 0.94;
  /* mask-* set inline to the same die-cut PNG URL */
}
.unlock-studio-sticker-emoji,
.unlock-carousel-sticker-emoji,
.crop-stage-sticker-emoji,
.shop-item-preview.sticker.unlock-sticker-preview,
.unlock-sticker-preview,
.card-sticker-chip-emoji,
.avatar-sticker {
  position: relative;
}
.unlock-studio-sticker-emoji.is-holofoil,
.unlock-carousel-sticker-emoji.is-holofoil,
.crop-stage-sticker-emoji.is-holofoil,
.shop-item-preview.sticker.is-holofoil,
.unlock-sticker-preview.is-holofoil,
.card-sticker-chip-emoji.is-holofoil,
.avatar-sticker.is-holofoil,
.stickers-book-item.is-holofoil .unlock-studio-sticker-emoji {
  position: relative;
}

/* === unlockables-uniform-b84 === */
/* Uniform unlockable cards: art-hero → criteria meta band → reserved Unlock slot. No chest. */

.unlock-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  box-sizing: border-box;
  min-height: 0;
  padding: 12px 10px 10px;
}

/* Drop treasure chest on unlockable reward cards entirely */
.unlock-card .unlock-chest-row,
.unlock-card .unlock-treasure-wrap,
.unlock-card .unlock-chest-svg {
  display: none !important;
  height: 0 !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

/* TYPE chip TL / key badge TR — don’t bias art center */
.unlock-card .unlock-tier {
  position: absolute;
  top: 10px;
  left: 10px;
  right: auto;
  z-index: 5;
  text-align: left;
}
.unlock-card .unlock-key-badge {
  position: absolute;
  top: 8px;
  right: 10px;
  z-index: 5;
  pointer-events: none;
}

/* Art-hero: fixed-height centered preview */
.unlock-card .unlock-art-hero {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 96px;
  margin: 4px 0 2px !important;
  box-sizing: border-box;
  overflow: visible !important;
  pointer-events: none;
}
.unlock-card .unlock-art-hero .sticker-diecut,
.unlock-card.is-art-hero .unlock-art-hero .unlock-sticker-preview .sticker-diecut,
.unlock-card.is-art-hero .unlock-art-hero .unlock-reward-chip .sticker-diecut {
  object-fit: contain;
  width: 88px;
  height: 88px;
  max-width: 100%;
  max-height: 100%;
}
.unlock-card .unlock-hero-name {
  display: block;
  margin-top: 6px;
  padding: 0 8px;
  font-size: 14px;
  font-weight: 650;
  line-height: 1.25;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}

/* Bottom meta band: criteria always here (same vertical slot on every type) */
.unlock-card .unlock-meta-band {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  width: 100%;
  margin-top: auto;
  padding: 4px 6px 0;
  box-sizing: border-box;
  min-height: 2.7em;
}
.unlock-card .unlock-meta-band .unlock-criteria {
  display: -webkit-box !important;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  margin: 0 0 4px !important;
  padding: 0 !important;
  max-height: calc(1.35em * 2);
  font-size: 12px;
  line-height: 1.35;
  font-weight: 500;
  color: var(--muted);
  text-align: center;
  width: 100%;
}
.unlock-card .unlock-meta-band .unlock-criteria.is-unlocked {
  color: var(--up);
  font-weight: 600;
  -webkit-line-clamp: 1;
  line-clamp: 1;
}
.unlock-card .unlock-meta-band .unlock-progress {
  width: 100%;
  max-width: 140px;
  margin: 2px auto;
}
.unlock-card .unlock-meta-band .unlock-progress-text {
  margin: 2px 0 0;
  font-size: 11px;
  color: var(--muted);
  text-align: center;
}

/* Reserved Unlock / Owned slot — height stable whether empty, Unlock, or Owned */
.unlock-card .unlock-action-slot {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px;
  margin-top: 8px;
  box-sizing: border-box;
}
.unlock-card .unlock-open-btn {
  width: 100%;
  min-height: 40px;
  margin: 0;
  padding: 8px 12px;
  font-size: 14px;
  font-weight: 700;
}
.unlock-card .unlock-owned-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px;
  padding: 6px 10px;
  border-radius: 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
  background: rgba(127, 127, 127, 0.12);
  border: 1px solid var(--line);
  box-sizing: border-box;
  cursor: pointer;
}

/* Coin-hero: gold glyph + amount as one row; coin-gold = balance chip gold */
.unlock-card.is-coins-hero .unlock-art-hero .unlock-coins-hero,
.unlock-card.reward-coins .unlock-art-hero .unlock-coins-hero {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.22));
}
.unlock-coins-hero-row,
.unlock-coins-hero-row {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.unlock-card .unlock-coins-hero-amt,
.unlock-card.is-coins-hero .unlock-coins-hero-amt {
  display: inline-block;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 30px !important;
  line-height: 1 !important;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: var(--gold, #d4a054) !important;
  text-shadow: none !important;
  background: none !important;
  -webkit-text-fill-color: var(--gold, #d4a054) !important;
}
.unlock-card .unlock-coins-hero-label {
  display: block;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--muted);
}
.unlock-card.is-coins-hero .unlock-art-hero .coin-stack-svg,
.unlock-card.reward-coins .unlock-art-hero .coin-stack-svg {
  height: 28px !important;
  width: auto !important;
}
.unlock-card.is-coins-hero .unlock-art-hero .coin-stack-wrap,
.unlock-card.reward-coins .unlock-art-hero .coin-stack-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
@media (max-width: 420px) {
  .unlock-card .unlock-coins-hero-amt,
  .unlock-card.is-coins-hero .unlock-coins-hero-amt {
    font-size: 24px !important;
  }
  .unlock-card.is-coins-hero .unlock-art-hero .coin-stack-svg,
  .unlock-card.reward-coins .unlock-art-hero .coin-stack-svg {
    height: 24px !important;
  }
}

/* Named art-hero: don’t also show legacy .unlock-title sibling */
.unlock-card.is-named-hero > .unlock-title {
  display: none !important;
}
.unlock-card.is-art-hero.is-named-hero .unlock-hero-name {
  display: block !important;
}

/* Shop: sticker name under art */
.shop-item.is-art-hero.shop-item-sticker > h3.shop-item-name,
.shop-item.shop-item-sticker > h3.shop-item-name {
  display: block !important;
  margin: 4px 8px 2px !important;
  padding: 0;
  text-align: center;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 100%;
}

/* Purchased sticker footer: one clean status row — no Holofoil/Owned/Gift overlap */
.shop-status-row {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  width: 100%;
}
.shop-status-row .shop-owned-tag {
  width: 100%;
  justify-content: center;
  text-align: center;
  margin: 0;
}
.shop-status-row .shop-gift-btn,
.shop-status-row .invite {
  width: 100%;
  min-height: 40px;
}
.shop-item-actions .shop-foil-tag {
  display: none !important; /* folded into Holofoil Owned label */
}

/* Sticker Book tray: one die-cut treatment (white rim via drop-shadow; no mixed white tiles) */
.stickers-book-pick {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  border-radius: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px;
}
.stickers-book-pick .sticker-diecut,
.stickers-book-pick img,
.stickers-book-pick .sticker-holo-shine {
  filter: drop-shadow(0 0 0.5px rgba(255,255,255,0.95)) drop-shadow(0 1px 2px rgba(0,0,0,0.25));
}

/* PFP studio / crop sticker tray: die-cut assets, not emoji chips */
.crop-sticker-tray-btn,
.unlock-studio-sticker,
.unlock-carousel-sticker-item {
  background: transparent !important;
}
.crop-sticker-tray-btn .sticker-diecut,
.unlock-studio-sticker-emoji .sticker-diecut,
.unlock-carousel-sticker-emoji .sticker-diecut {
  object-fit: contain;
  filter: drop-shadow(0 0 0.5px rgba(255,255,255,0.9)) drop-shadow(0 1px 2px rgba(0,0,0,0.22));
}

/* Write compose: kill twin light-blue footer pills if present; grow editor */
.app.is-write .write-form .invite.submit-alt,
.app.is-write .write-footer-pills,
.app.is-write .write-twin-pills {
  display: none !important;
}
.app.is-write .editor-wrap .editor,
.app.is-write #body.editor {
  min-height: 42vh;
  flex: 1 1 auto;
}

/* b84 write: grow editor into leftover band; Invite stays gold outline (not light-blue twin pills) */
.app.is-write .write-form .editor,
.app.is-write #body.editor {
  min-height: min(52vh, 420px) !important;
}
.app.is-write .write-form {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-height: 0;
}


/* === pfp-stack-b85 === */
/* Unified larger PFP stack (Shop + Unlockables frame/aura cards) + studio ×1.75 + sticker drag */

:root {
  --avatar-face: 128px;
  --avatar-frame: 160px;
  --avatar-aura: 144px;
  --studio-avatar-face: 116px;
  --studio-avatar-frame: 156px;
  --studio-avatar-aura: 138px;
}

/* Art-hero hosts need room for 144px aura stack (b89 hug) */
.unlock-card.is-art-hero.reward-frame .unlock-art-hero,
.unlock-card.is-art-hero.reward-aura .unlock-art-hero,
.shop-item.is-art-hero.shop-item-frame .shop-art-hero,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero {
  min-height: 200px !important;
  margin: 8px 0 6px !important;
  overflow: visible !important;
}

/* Kill tiny scaled thumbs — one real-size centered stack */
.unlock-card.is-art-hero.reward-frame .unlock-art-hero .unlock-frame-mini,
.shop-item.is-art-hero.shop-item-frame .shop-art-hero .unlock-frame-mini {
  transform: none !important;
}

.unlock-card.is-art-hero.reward-frame .unlock-art-hero .avatar-cosmetic-wrap.pfp-stack,
.unlock-card.is-art-hero.reward-frame .unlock-art-hero .unlock-frame-mini,
.shop-item.is-art-hero.shop-item-frame .shop-art-hero .avatar-cosmetic-wrap.pfp-stack,
.shop-item.is-art-hero.shop-item-frame .shop-art-hero .unlock-frame-mini,
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .aura-preview-host.pfp-stack,
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .unlock-aura-mini,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .aura-preview-host.pfp-stack,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .shop-aura-mini {
  --avatar-face: 128px;
  --avatar-frame: 160px;
  --avatar-aura: 144px;
  --av: var(--avatar-face);
  position: relative !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: var(--avatar-face) !important;
  height: var(--avatar-face) !important;
  min-width: var(--avatar-face) !important;
  min-height: var(--avatar-face) !important;
  max-width: none !important;
  max-height: none !important;
  overflow: visible !important;
  transform: none !important;
  margin: 0 auto !important;
  flex-shrink: 0;
}

.unlock-card.is-art-hero.reward-frame .unlock-art-hero .unlock-frame-mini > .avatar,
.unlock-card.is-art-hero.reward-frame .unlock-art-hero .avatar-cosmetic-wrap.pfp-stack > .avatar,
.shop-item.is-art-hero.shop-item-frame .shop-art-hero .unlock-frame-mini > .avatar,
.shop-item.is-art-hero.shop-item-frame .shop-art-hero .avatar-cosmetic-wrap.pfp-stack > .avatar,
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .aura-preview-host > .avatar,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .aura-preview-host > .avatar {
  width: var(--avatar-face) !important;
  height: var(--avatar-face) !important;
  font-size: calc(var(--avatar-face) * 0.36) !important;
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

/* Frame ring = 160px (16px beyond 128 face) */
.unlock-card.is-art-hero.reward-frame .unlock-art-hero .avatar-cosmetic-wrap.has-frame::before,
.shop-item.is-art-hero.shop-item-frame .shop-art-hero .avatar-cosmetic-wrap.has-frame::before {
  inset: calc((var(--avatar-face) - var(--avatar-frame)) / 2) !important;
  width: auto !important;
  height: auto !important;
  box-shadow:
    0 0 0 3px rgba(212,175,95,0.55),
    0 0 0 6px rgba(0,0,0,0.22),
    inset 0 0 0 2px rgba(255,255,255,0.25) !important;
}

/* Aura footprint = 144px (8px beyond face rim) for card stacks — b89 hug */
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .aura-preview-host::after,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .aura-preview-host::after,
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .avatar-cosmetic-wrap.has-aura::after,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .avatar-cosmetic-wrap.has-aura::after {
  width: var(--avatar-aura) !important;
  height: var(--avatar-aura) !important;
}

.unlock-card.is-art-hero.reward-frame .unlock-art-hero .unlock-frame-preview,
.unlock-card.is-art-hero.reward-frame .unlock-art-hero .unlock-reward-chip.frame-chip,
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .unlock-aura-preview,
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .unlock-reward-chip.aura-chip,
.shop-item.is-art-hero.shop-item-frame .shop-art-hero .shop-item-preview.frame,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .shop-item-preview.aura {
  position: static !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.3));
}

/* ===== Studio = same ratios ×1.75 (224 / 280 / 252) ===== */
.unlock-studio-stage {
  grid-template-columns: minmax(76px, 96px) minmax(0, 1fr) minmax(76px, 96px);
  gap: 10px;
  align-items: center;
}
.unlock-carousel-col {
  height: 360px;
  min-height: 360px;
  max-height: 360px;
}
.unlock-profile-preview {
  height: auto !important;
  min-height: 360px !important;
  max-height: none !important;
  padding: 28px 12px;
  overflow: visible !important;
}
.unlock-profile-preview.is-drop-target {
  border-color: var(--gold) !important;
  box-shadow:
    0 0 0 2px var(--gold),
    0 0 0 6px rgba(212, 160, 84, 0.28),
    inset 0 0 0 1px rgba(212, 160, 84, 0.35);
  outline: 2px dashed var(--gold);
  outline-offset: 6px;
}
.unlock-studio-avatar-wrap {
  --avatar-face: var(--studio-avatar-face, 224px);
  --avatar-frame: var(--studio-avatar-frame, 280px);
  --avatar-aura: var(--studio-avatar-aura, 252px);
  --av: var(--avatar-face);
  width: var(--avatar-face) !important;
  height: var(--avatar-face) !important;
  overflow: visible !important;
}
.unlock-studio-avatar-wrap > .unlock-studio-avatar,
.unlock-studio-avatar {
  width: var(--avatar-face) !important;
  height: var(--avatar-face) !important;
  font-size: calc(var(--avatar-face) * 0.34) !important;
}
.unlock-studio-avatar-wrap.has-frame::before {
  inset: calc((var(--avatar-face) - var(--avatar-frame)) / 2) !important;
}
.unlock-studio-avatar-wrap.has-aura::after,
.unlock-studio-avatar-wrap.has-aura.has-frame::after {
  width: var(--avatar-aura) !important;
  height: var(--avatar-aura) !important;
}
.unlock-studio-sticker {
  width: calc(var(--av, 224px) * 36 / 78);
  height: calc(var(--av, 224px) * 36 / 78);
  font-size: calc(var(--av, 224px) * 14 / 78);
}
.unlock-studio-sticker-emoji {
  line-height: calc(var(--av, 224px) * 36 / 78);
}
.unlock-studio-sticker-emoji .sticker-diecut {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* Sticker carousel: ≥56px tiles (prefer 64), grab + lift */
.unlock-carousel-item.unlock-sticker-item {
  min-height: 80px;
  padding: 6px 4px;
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
}
.unlock-carousel-item.unlock-sticker-item.is-dragging {
  touch-action: none;
}
.unlock-carousel-item.unlock-sticker-item:active,
.unlock-carousel-item.unlock-sticker-item.is-dragging {
  cursor: grabbing;
}
.unlock-carousel-item.unlock-sticker-item.is-dragging {
  transform: scale(1.08);
  filter: drop-shadow(0 8px 14px rgba(0,0,0,0.35));
  opacity: 0.55;
  z-index: 2;
}
.unlock-carousel-sticker-emoji {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 64px !important;
  height: 64px !important;
  min-width: 64px;
  min-height: 64px;
  font-size: 48px !important;
  line-height: 1 !important;
}
.unlock-carousel-sticker-emoji .sticker-diecut {
  width: 64px !important;
  height: 64px !important;
  max-width: 64px;
  max-height: 64px;
  object-fit: contain;
}

.studio-sticker-drag-ghost {
  position: fixed;
  z-index: 10050;
  pointer-events: none;
  width: 72px;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translate(-50%, -50%) scale(1.08);
  filter: drop-shadow(0 10px 18px rgba(0,0,0,0.4));
  left: 0;
  top: 0;
}
.studio-sticker-drag-ghost .sticker-diecut,
.studio-sticker-drag-ghost img {
  width: 64px;
  height: 64px;
  object-fit: contain;
}
.studio-sticker-drag-ghost .unlock-carousel-sticker-emoji {
  width: 64px !important;
  height: 64px !important;
  font-size: 48px !important;
}

.unlock-studio-sticker-hint {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  margin: 4px 0 0;
  padding: 5px 26px 5px 10px;
  max-width: 100%;
  font-size: 11px;
  line-height: 1.3;
  font-weight: 600;
  color: var(--gold, #d4a054);
  text-align: center;
  background: rgba(201, 162, 39, 0.12);
  border: 1px dashed rgba(212, 160, 84, 0.55);
  border-radius: 999px;
}
.unlock-studio-sticker-hint[hidden] { display: none !important; }

@media (max-width: 380px) {
  :root {
    --studio-avatar-face: 108px;
    --studio-avatar-frame: 144px;
    --studio-avatar-aura: 128px;
  }
  .unlock-profile-preview {
    min-height: 310px !important;
    padding: 20px 8px;
  }
  .unlock-carousel-col {
    height: 310px;
    min-height: 310px;
    max-height: 310px;
  }
  .unlock-carousel-sticker-emoji,
  .unlock-carousel-sticker-emoji .sticker-diecut {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px;
    min-height: 56px;
  }
}

/* SHOULD: Holofoil Owned + Gift one horizontal row */
.shop-status-row {
  display: flex !important;
  flex-direction: row !important;
  align-items: stretch !important;
  gap: 8px !important;
  width: 100%;
}
.shop-status-row .shop-owned-tag {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 40px !important;
  margin: 0 !important;
  justify-content: center !important;
  text-align: center !important;
  box-sizing: border-box;
}
.shop-status-row .shop-gift-btn,
.shop-status-row .invite {
  flex: 1 1 0 !important;
  width: auto !important;
  min-width: 0 !important;
  min-height: 40px !important;
  margin: 0 !important;
}
.shop-item-actions .shop-status-row .shop-owned-tag.shop-already-unlocked {
  width: auto !important;
  flex: 1 1 0 !important;
  margin: 0 !important;
  padding: 8px 10px !important;
  min-height: 40px !important;
  justify-content: center !important;
  text-align: center !important;
}

/* Coin +N stays coin-gold (not cyan) — reinforce */
.unlock-card .unlock-coins-hero-amt,
.unlock-card.is-coins-hero .unlock-coins-hero-amt {
  color: var(--gold, #d4a054) !important;
  -webkit-text-fill-color: var(--gold, #d4a054) !important;
}

/* === pfp-stack-b86 — critic HOLD fixes === */
/* MUST 1: force placed stickers absolute so foil never splits composite */
.unlock-profile-preview .unlock-studio-avatar-wrap,
.unlock-studio-avatar-wrap {
  display: block !important;
  position: relative !important;
  width: var(--studio-avatar-face, 224px) !important;
  height: var(--studio-avatar-face, 224px) !important;
  margin-inline: auto;
  overflow: visible !important;
  --avatar-face: var(--studio-avatar-face, 224px);
  --avatar-frame: var(--studio-avatar-frame, 280px);
  --avatar-aura: var(--studio-avatar-aura, 252px);
  --av: var(--avatar-face);
}
.unlock-profile-preview .unlock-studio-avatar-wrap > .unlock-studio-avatar,
.unlock-studio-avatar-wrap > .unlock-studio-avatar {
  display: block;
  width: var(--avatar-face) !important;
  height: var(--avatar-face) !important;
  margin: 0;
}
.unlock-profile-preview .unlock-studio-sticker,
.unlock-profile-preview .avatar-sticker,
.unlock-studio-avatar-wrap > .unlock-studio-sticker,
.unlock-studio-avatar-wrap > .avatar-sticker,
.unlock-studio-sticker.is-holofoil,
.avatar-sticker.is-holofoil {
  position: absolute !important;
}
.avatar-crop-sticker-layer .crop-stage-sticker,
.crop-stage-sticker.is-holofoil {
  position: absolute !important;
}

/* Crop composite: face 224 / frame 280 / aura 252 — one stack, no side preview */
.avatar-crop-stage {
  --crop-view: var(--studio-avatar-face, 224px);
  --avatar-face: var(--studio-avatar-face, 224px);
  --avatar-frame: var(--studio-avatar-frame, 280px);
  --avatar-aura: var(--studio-avatar-aura, 252px);
  --av: var(--crop-view);
  height: min(360px, 56vh) !important;
  overflow: visible !important;
  display: flex;
  align-items: center;
  justify-content: center;
}
.avatar-crop-hole,
.avatar-crop-deco {
  width: var(--crop-view, 224px) !important;
  height: var(--crop-view, 224px) !important;
}
.avatar-crop-deco.has-frame::before {
  inset: calc((var(--avatar-face) - var(--avatar-frame)) / 2) !important;
}
.avatar-crop-deco.has-aura {
  overflow: visible !important;
}
.avatar-crop-deco.has-aura::after {
  width: var(--avatar-aura) !important;
  height: var(--avatar-aura) !important;
}
/* Kill any side-by-side crop deco / cosmetics split */
.avatar-crop-card {
  display: flex;
  flex-direction: column;
}
.avatar-crop-cosmetics {
  display: block;
  width: 100%;
}

/* MUST 2: drag lift + dashed drop ring + dragging-over */
.unlock-carousel-item.unlock-sticker-item.is-dragging,
#unlock-sticker-carousel .unlock-sticker-item.is-dragging {
  transform: scale(1.08) !important;
  filter: drop-shadow(0 10px 16px rgba(0,0,0,0.42)) !important;
  opacity: 0.5 !important;
  z-index: 3 !important;
}
.unlock-profile-preview.is-drop-target,
.unlock-profile-preview.is-dragging-over,
.unlock-studio-avatar-wrap.is-drop-target,
.unlock-studio-avatar-wrap.is-dragging-over {
  outline: 2px dashed var(--gold, #d4a054) !important;
  outline-offset: 8px !important;
  border-color: var(--gold, #d4a054) !important;
  box-shadow:
    0 0 0 2px var(--gold, #d4a054),
    0 0 0 8px rgba(212, 160, 84, 0.28),
    inset 0 0 0 1px rgba(212, 160, 84, 0.4) !important;
}
.unlock-studio-sticker-hint:not([hidden]) {
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* MUST 3: coin +N = coin-gold (hard hex beats theme/--gold surprises) */
.unlock-coins-hero-amt,
.unlock-card .unlock-coins-hero-amt,
.unlock-card.is-coins-hero .unlock-coins-hero-amt,
.unlock-card.reward-coins .unlock-coins-hero-amt,
.unlock-card.is-art-hero .unlock-coins-hero-amt,
.unlock-art-hero .unlock-coins-hero-amt {
  color: #d4a054 !important;
  -webkit-text-fill-color: #d4a054 !important;
  background: none !important;
  background-image: none !important;
  text-shadow: none !important;
  filter: none !important;
}
.account-coins-amt,
.shop-coins-balance,
.unlock-shop-balance {
  color: #d4a054 !important;
  -webkit-text-fill-color: #d4a054 !important;
}


/* === unlockables-card-polish-b87 === */
/* Critic: aura/name overlap MUST + spacing tokens; coin stacks scaled by amount only. */

.unlock-card,
.shop-item {
  --card-pad: 16px;
  --gap-art-meta: 12px;
  --gap-name-criteria: 4px;
  --gap-criteria-bar: 10px;
  --gap-bar-stat: 6px;
  --gap-meta-action: 12px;
  --action-h: 44px;
}

.unlock-card {
  padding: var(--card-pad) !important;
  box-sizing: border-box;
}

/* Meta band starts --gap-art-meta below hero; name lives HERE (not inside art-hero) */
.unlock-card .unlock-meta-band {
  margin-top: var(--gap-art-meta) !important;
  padding: 0 !important;
  width: 100%;
  box-sizing: border-box;
  gap: 0;
}

.unlock-card .unlock-hero-name,
.unlock-card.is-art-hero.is-named-hero .unlock-hero-name,
.unlock-card .unlock-meta-band .unlock-hero-name {
  display: block !important;
  margin: 0 0 var(--gap-name-criteria) !important;
  padding: 0 4px;
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
  text-align: center;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--text);
}

.unlock-card .unlock-meta-band .unlock-criteria {
  font-size: 13px !important;
  line-height: 1.4 !important;
  font-weight: 500;
  color: var(--muted) !important;
  margin: 0 0 var(--gap-criteria-bar) !important;
}

.unlock-card .unlock-meta-band .unlock-progress {
  margin: 0 auto var(--gap-bar-stat) !important;
  width: 100%;
  max-width: 140px;
}

.unlock-card .unlock-meta-band .unlock-progress-text,
.unlock-card .unlock-meta-band .unlock-memorize-progress {
  font-size: 12px !important;
  line-height: 1.35;
  color: var(--faint, var(--muted)) !important;
  margin: 0 !important;
}

.unlock-card .unlock-action-slot {
  min-height: var(--action-h) !important;
  margin-top: var(--gap-meta-action) !important;
  padding: 0 16px !important; /* Unlock inset 16px L/R */
  box-sizing: border-box;
  width: 100%;
}

.unlock-card .unlock-open-btn,
.unlock-card .unlock-owned-tag {
  min-height: var(--action-h) !important;
  width: 100%;
  margin: 0 !important;
}

/* Aura/frame art-hero: contain --avatar-aura (144px) + ≥8px bottom pad; glow stays in hero */
.unlock-card.is-art-hero.reward-aura .unlock-art-hero,
.unlock-card.is-art-hero.reward-frame .unlock-art-hero,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero,
.shop-item.is-art-hero.shop-item-frame .shop-art-hero {
  min-height: 200px !important;
  padding: 8px 0 8px !important; /* ≥8px bottom padding under 144px aura */
  margin: 4px 0 0 !important;
  overflow: hidden !important; /* MUST: halo/glow cannot paint into meta/name */
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Clip aura layer footprint inside hero (host may still overflow:visible for ::after centering) */
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .unlock-aura-preview,
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .unlock-reward-chip.aura-chip,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .shop-item-preview.aura {
  max-width: 100%;
  overflow: hidden;
}

/* Shop named title sits under hero with same art→meta gap */
.shop-item.is-art-hero.shop-item-aura > h3.shop-item-name,
.shop-item.is-art-hero.shop-item-theme > h3.shop-item-name,
.shop-item.is-art-hero.shop-item-frame .shop-art-caption {
  margin-top: var(--gap-art-meta) !important;
  font-size: 17px !important;
  font-weight: 600 !important;
  line-height: 1.25 !important;
}

.shop-item {
  padding: var(--card-pad);
  box-sizing: border-box;
}

/* ===== Coin unlockable cards — uniform skeleton + scaled stacks ===== */
.unlock-card.is-coins-hero .unlock-art-hero,
.unlock-card.reward-coins .unlock-art-hero {
  min-height: 200px !important;
  margin: 4px 0 0 !important;
  padding: 8px 0 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.unlock-card.is-coins-hero .unlock-art-hero .unlock-coins-hero,
.unlock-card.reward-coins .unlock-art-hero .unlock-coins-hero {
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
  border: none !important;
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.22));
}

/* Kill legacy side-by-side row if any leftover markup */
.unlock-card .unlock-coins-hero-row {
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  gap: 0;
}

.unlock-card.is-coins-hero .unlock-art-hero .coin-stack-wrap,
.unlock-card.reward-coins .unlock-art-hero .coin-stack-wrap,
.unlock-card .unlock-coins-hero .unlock-coins-mark {
  display: flex !important;
  align-items: center;
  justify-content: center;
  line-height: 0;
  margin: 0 0 6px;
}

/* Stack glyph heights by tier (amount). +N typography stays ONE size. */
.unlock-card .unlock-coins-hero.coin-tier-sm .coin-stack-svg,
.unlock-card.is-coins-hero .unlock-coins-hero.coin-tier-sm .coin-stack-svg {
  height: 56px !important;
  width: auto !important;
}
.unlock-card .unlock-coins-hero.coin-tier-md .coin-stack-svg,
.unlock-card.is-coins-hero .unlock-coins-hero.coin-tier-md .coin-stack-svg {
  height: 72px !important;
  width: auto !important;
}
.unlock-card .unlock-coins-hero.coin-tier-lg .coin-stack-svg,
.unlock-card.is-coins-hero .unlock-coins-hero.coin-tier-lg .coin-stack-svg {
  height: 88px !important;
  width: auto !important;
}
.unlock-card .unlock-coins-hero.coin-tier-xl .coin-stack-svg,
.unlock-card.is-coins-hero .unlock-coins-hero.coin-tier-xl .coin-stack-svg {
  height: 96px !important;
  width: auto !important;
}

/* +N: same size all amounts (28–32px); hard coin-gold */
.unlock-coins-hero-amt,
.unlock-card .unlock-coins-hero-amt,
.unlock-card.is-coins-hero .unlock-coins-hero-amt,
.unlock-card.reward-coins .unlock-coins-hero-amt,
.unlock-card.is-art-hero .unlock-coins-hero-amt,
.unlock-art-hero .unlock-coins-hero-amt {
  display: block !important;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-weight: 700 !important;
  font-size: 30px !important; /* uniform — do NOT scale with amount */
  line-height: 1 !important;
  letter-spacing: -0.03em;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  color: #d4a054 !important;
  -webkit-text-fill-color: #d4a054 !important;
  text-shadow: none !important;
  background: none !important;
  background-image: none !important;
  filter: none !important;
  margin: 0 !important;
}

.unlock-card .unlock-coins-hero-label {
  display: block !important;
  margin-top: 4px !important; /* 4px under +N */
  font-size: 10.5px !important;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--faint, var(--muted)) !important;
}

@media (max-width: 420px) {
  .unlock-card .unlock-coins-hero-amt,
  .unlock-card.is-coins-hero .unlock-coins-hero-amt {
    font-size: 28px !important; /* still within 28–32; still uniform */
  }
}

/* === unlockables-aura-action-b88 === */
/* Bug1: b87 overflow:hidden on art-hero + aura-preview clipped aura ::after glow.
   Prefer visible auras; name stays in .unlock-meta-band (--gap-art-meta: 12px).
   Bug2: pin Unlock/Owned/empty slot to consistent card-bottom inset via flex + margin-top:auto. */

.unlock-card {
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
  box-sizing: border-box;
  padding: var(--card-pad, 16px) !important;
}

/* Meta stays below hero with fixed art→meta gap (NOT margin-top:auto — that fights action pin) */
.unlock-card .unlock-meta-band {
  margin-top: var(--gap-art-meta, 12px) !important;
  margin-bottom: 0 !important;
  flex: 0 0 auto;
  width: 100%;
}

/* Action slot pinned to bottom — same inset for Unlock / Owned / empty reserved slot */
.unlock-card .unlock-action-slot {
  margin-top: auto !important;
  min-height: var(--action-h, 44px) !important;
  height: auto;
  flex: 0 0 auto;
  padding: 0 16px !important;
  box-sizing: border-box;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.unlock-card .unlock-open-btn,
.unlock-card .unlock-owned-tag {
  min-height: var(--action-h, 44px) !important;
  width: 100%;
  margin: 0 !important;
  box-sizing: border-box;
}

/* Aura art-hero: tall enough for full --avatar-aura (144px) + pad; DO NOT clip rings/particles */
.unlock-card.is-art-hero.reward-aura .unlock-art-hero,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero {
  min-height: 220px !important;
  padding: 18px 0 !important;
  margin: 4px 0 0 !important;
  overflow: visible !important;
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
}

/* Frames: keep room for chrome; overflow visible so rings aren't clipped (still look fine) */
.unlock-card.is-art-hero.reward-frame .unlock-art-hero,
.shop-item.is-art-hero.shop-item-frame .shop-art-hero {
  min-height: 220px !important;
  padding: 18px 0 !important;
  margin: 4px 0 0 !important;
  overflow: visible !important;
  box-sizing: border-box;
}

/* Undo b87 clip on aura chip/host — ::after hugs 128px face at 144px */
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .unlock-aura-preview,
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .unlock-reward-chip.aura-chip,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .shop-item-preview.aura {
  max-width: none !important;
  overflow: visible !important;
}

.unlock-card.is-art-hero.reward-aura .unlock-art-hero .aura-preview-host,
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .unlock-aura-mini,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .aura-preview-host,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .shop-aura-mini {
  overflow: visible !important;
}

/* Card itself must not clip aura either (grid stretch + flex pin still OK) */
.unlock-card.is-art-hero.reward-aura,
.shop-item.is-art-hero.shop-item-aura {
  overflow: visible !important;
}


/* === critic-b89 — aura hug + studio PFP + sticker die-cut + Read challenges === */

:root {
  --avatar-face: 128px;
  --avatar-frame: 160px;
  --avatar-aura: 144px; /* face+16 → hard glow ≤8px past rim */
  --studio-avatar-face: 116px;
  --studio-avatar-frame: 156px;
  --studio-avatar-aura: 138px; /* hug 116/156 barely-overlap; cards stay 144 */
  --avatar-aura-max-card: 168px; /* frame+8 hard cap */
  --avatar-aura-max-studio: 153px;
}

/* Aura disc = token size (hugs face). Soft falloff only via box-shadow outside disc. */
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .aura-preview-host,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .aura-preview-host,
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .unlock-aura-mini,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .shop-aura-mini,
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .avatar-cosmetic-wrap.pfp-stack,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .avatar-cosmetic-wrap.pfp-stack {
  --avatar-aura: 144px;
  --av: var(--avatar-face, 128px);
}

.unlock-card.is-art-hero.reward-aura .unlock-art-hero .aura-preview-host::after,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .aura-preview-host::after,
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .avatar-cosmetic-wrap.has-aura::after,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .avatar-cosmetic-wrap.has-aura::after,
.unlock-studio-avatar-wrap.has-aura::after,
.unlock-studio-avatar-wrap.has-aura.has-frame::after,
.avatar-crop-deco.has-aura::after {
  /* Hard disc hugs face (≤8px past rim); soft falloff stays in each aura's own box-shadow */
  width: min(var(--avatar-aura), var(--avatar-aura-max-card, 168px)) !important;
  height: min(var(--avatar-aura), var(--avatar-aura-max-card, 168px)) !important;
}

.unlock-studio-avatar-wrap,
.unlock-studio-avatar-wrap.has-aura,
.avatar-crop-deco.has-aura,
.avatar-crop-stage {
  --avatar-aura: var(--studio-avatar-aura, 252px);
  --avatar-aura-max-card: var(--avatar-aura-max-studio, 294px);
}

.unlock-studio-avatar-wrap.has-aura::after,
.unlock-studio-avatar-wrap.has-aura.has-frame::after,
.avatar-crop-deco.has-aura::after {
  width: min(var(--avatar-aura), var(--avatar-aura-max-studio, 294px)) !important;
  height: min(var(--avatar-aura), var(--avatar-aura-max-studio, 294px)) !important;
}

/* Equipped PFPs (You / cards / comments): hug ratio 144/128 = 1.125× face */
.has-aura::after,
.aura-preview-host::after,
.season-aura-preview::after,
.season-fork-aura-preview::after {
  width: calc(var(--av, 32px) * 1.125) !important;
  height: calc(var(--av, 32px) * 1.125) !important;
}

/* Art-hero: smaller footprint for 144 aura; keep 12px name clearance (glow in hero, name in meta) */
.unlock-card.is-art-hero.reward-aura .unlock-art-hero,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero,
.unlock-card.is-art-hero.reward-frame .unlock-art-hero,
.shop-item.is-art-hero.shop-item-frame .shop-art-hero {
  min-height: 168px !important;
  padding: 12px 0 !important;
}

/* ===== Studio: preview fills ~70–80% stage; crop ring; handles in-stage ===== */
.unlock-studio-stage {
  grid-template-columns: minmax(72px, 88px) minmax(0, 1fr) minmax(72px, 88px);
  gap: 8px;
  align-items: center;
}
.unlock-carousel-col {
  height: 300px !important;
  min-height: 300px !important;
  max-height: 300px !important;
}
.unlock-profile-preview {
  min-height: 300px !important;
  height: 300px !important;
  max-height: 300px !important;
  padding: 16px 8px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
  position: relative;
}
/* One centered composite — face 224 ≈ 75% of 300 stage */
.unlock-profile-preview .unlock-studio-avatar-wrap,
.unlock-studio-avatar-wrap {
  width: var(--studio-avatar-face, 224px) !important;
  height: var(--studio-avatar-face, 224px) !important;
  margin: 0 auto !important;
  flex-shrink: 0;
}
/* Visible crop / mask ring at face size — never steal frame ::before art */
.unlock-profile-preview .unlock-studio-avatar-wrap:not(.has-frame)::before,
.unlock-studio-avatar-wrap:not(.has-frame)::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  box-shadow:
    0 0 0 2px rgba(255, 255, 255, 0.55),
    0 0 0 3px rgba(0, 0, 0, 0.35);
  pointer-events: none;
  z-index: 3;
}
.unlock-profile-preview .unlock-studio-avatar-wrap.has-frame > .unlock-studio-avatar,
.unlock-studio-avatar-wrap.has-frame > .unlock-studio-avatar {
  box-shadow:
    0 0 0 1.5px rgba(255, 255, 255, 0.45),
    0 0 0 2.5px rgba(0, 0, 0, 0.25);
}
.unlock-studio-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 0;
  min-height: 0;
}

/* Transform handles 28–32px, fully inside stage (not clipped) */
.studio-sticker-rotate,
.studio-sticker-move,
.studio-sticker-resize {
  width: 30px !important;
  height: 30px !important;
  font-size: 14px !important;
  line-height: 28px !important;
  border-width: 1.5px;
  opacity: 0.42;
  transition: opacity 0.15s ease, transform 0.12s ease, background 0.15s ease;
}
.studio-sticker-rotate::before,
.studio-sticker-move::before,
.studio-sticker-resize::before {
  inset: -4px;
}
/* Keep handles inside sticker/stage — inset from edges instead of negative overhang */
.studio-sticker-rotate {
  top: 2px !important;
  left: 50%;
  transform: translateX(-50%);
}
.studio-sticker-move {
  left: 2px !important;
  bottom: 2px !important;
}
.studio-sticker-resize {
  right: 2px !important;
  bottom: 2px !important;
}
.unlock-studio-sticker.is-selected:hover .studio-sticker-rotate,
.unlock-studio-sticker.is-selected:hover .studio-sticker-move,
.unlock-studio-sticker.is-selected:hover .studio-sticker-resize,
.unlock-studio-sticker.is-dragging .studio-sticker-rotate,
.unlock-studio-sticker.is-dragging .studio-sticker-move,
.unlock-studio-sticker.is-dragging .studio-sticker-resize,
.studio-sticker-rotate:hover,
.studio-sticker-move:hover,
.studio-sticker-resize:hover,
.studio-sticker-rotate:active,
.studio-sticker-move:active,
.studio-sticker-resize:active {
  opacity: 1;
}

/* Sticker tray tiles 56–64px + grab */
.unlock-carousel-item.unlock-sticker-item {
  cursor: grab !important;
  /* min-height owned by b98 48 tile block */
}
/* b98: was 60px tray fight — size owned by uniform 48 carousel block */

/* Auras tray reachable — compact stage so slot clears tab dock */
.unlock-aura-slot {
  margin: 4px 0 10px !important;
  padding-bottom: 2px;
  position: relative;
  z-index: 1;
}
.unlock-aura-slot .unlock-equip-label {
  font-size: 12px;
  margin-bottom: 6px;
}

@media (max-width: 380px) {
  :root {
    --studio-avatar-face: 108px;
    --studio-avatar-frame: 144px;
    --studio-avatar-aura: 128px;
  }
  .unlock-profile-preview,
  .unlock-carousel-col {
    height: 260px !important;
    min-height: 260px !important;
    max-height: 260px !important;
  }
}

/* ===== Stickers on PFPs: die-cut edge only — no outer glow/halo/bloom ===== */
.unlock-studio-sticker,
.unlock-profile-preview .unlock-studio-sticker,
.unlock-profile-preview .avatar-sticker,
.unlock-studio-avatar-wrap > .unlock-studio-sticker,
.unlock-studio-avatar-wrap > .avatar-sticker,
.avatar-cosmetic-wrap .avatar-sticker,
.avatar-sticker-host .avatar-sticker,
.account-avatar-btn .avatar-sticker,
.card .avatar-sticker,
.comment .avatar-sticker,
.crop-stage-sticker,
.unlock-carousel-item.unlock-sticker-item .unlock-carousel-sticker-emoji {
  filter: none !important;
  box-shadow: none !important;
}
/* Die-cut outline stroke only (white + hairline black); no soft bloom lift */
.unlock-studio-sticker-emoji,
.unlock-studio-sticker-emoji .sticker-diecut,
.unlock-profile-preview .unlock-studio-sticker-emoji,
.unlock-profile-preview .avatar-sticker,
.unlock-profile-preview .sticker-diecut,
.avatar-cosmetic-wrap .avatar-sticker,
.avatar-cosmetic-wrap .sticker-diecut,
.avatar-sticker-host .avatar-sticker,
.avatar-sticker .sticker-diecut,
.crop-stage-sticker-emoji,
.crop-stage-sticker-emoji .sticker-diecut,
.unlock-carousel-sticker-emoji,
.unlock-carousel-sticker-emoji .sticker-diecut,
.crop-sticker-tray-btn .sticker-diecut {
  filter:
    drop-shadow(0 0 0.4px #000)
    drop-shadow(0 0 0.8px #000)
    drop-shadow(0 0 1.4px #fff)
    drop-shadow(0 0 2.2px #fff) !important;
}
/* Drag ghost may keep light lift; no colored glow */
.studio-sticker-drag-ghost {
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.28)) !important;
}
.unlock-carousel-item.unlock-sticker-item.is-dragging {
  filter: none !important;
  opacity: 0.55 !important;
}

/* ===== Read catch-up unlockable challenges: 2-wide + module CTA ===== */
.feed-next-unlockables.unlockables-grid,
.view-read.is-empty .feed-next-unlockables.unlockables-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
  width: 100%;
  text-align: left;
}
@media (max-width: 359px) {
  .feed-next-unlockables.unlockables-grid,
  .view-read.is-empty .feed-next-unlockables.unlockables-grid {
    grid-template-columns: 1fr !important;
  }
}
.feed-next-unlockables .unlock-card,
.feed-next-unlockables .feed-challenge-card {
  width: 100%;
  padding: 16px !important;
  box-sizing: border-box;
  display: flex !important;
  flex-direction: column !important;
  align-items: center;
}
.feed-next-unlockables .feed-challenge-card .unlock-action-slot,
.feed-next-unlockables .unlock-card.feed-challenge-card .unlock-action-slot {
  margin-top: auto !important;
  padding: 0 16px !important;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  min-height: 44px;
}
.feed-next-unlockables .feed-challenge-cta {
  appearance: none;
  border: 0;
  border-radius: 12px;
  min-height: 44px;
  width: 100%;
  margin: 0;
  padding: 10px 14px;
  font: inherit;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0.02em;
  cursor: pointer;
  background: var(--gold, #d4a054);
  color: #1a140c;
  box-sizing: border-box;
}
.feed-next-unlockables .feed-challenge-cta:active {
  transform: scale(0.98);
}
.feed-next-unlockables .feed-challenge-view-unlockables {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--gold, #d4a054);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  padding: 4px 0 0;
  text-align: center;
}
/* No Unlock / Owned claim chrome on Read challenges */
.feed-next-unlockables .unlock-open-btn,
.feed-next-unlockables .unlock-owned-tag,
.feed-next-unlockables .unlock-add-verses-btn {
  display: none !important;
}

/* === critic-b90 — aura paint hugs face (not just token size) + PFP sticker zero glow === */

/*
 * MUST1 root cause: b89 set ::after to 144px but (1) all 20 shop PNG auras had
 * background-image killed by a later `background:` shorthand, then radial holes
 * painted under the face; (2) remaining CSS rings used transparent~40–60% stops;
 * (3) large box-shadow blur/spread drew soft glow from the 144 border-box far past
 * the face, so a large empty donut remained between photo rim and luminous ring.
 * Fix: PNGs restored + background-size 158%; ring stops shifted; card/studio
 * shadows tightened to ≤8px past face; particle host inset tightened on cards.
 */

/* Card / Shop aura hosts: hard disc stays 144; soft falloff ≤~8px past face rim */
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .aura-preview-host::after,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .aura-preview-host::after,
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .avatar-cosmetic-wrap.has-aura::after,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .avatar-cosmetic-wrap.has-aura::after {
  background-size: 158% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  /* Replace oversized border-box bloom with tight corona (hard edge = 144 = face+8) */
  box-shadow:
    0 0 4px 1px rgba(220, 230, 255, 0.45),
    0 0 8px 2px rgba(180, 200, 255, 0.28) !important;
}

/* Studio / crop composite: same hug ratio; keep 252 token, tighten bloom */
.unlock-studio-avatar-wrap.has-aura::after,
.unlock-studio-avatar-wrap.has-aura.has-frame::after,
.avatar-crop-deco.has-aura::after {
  background-size: 158% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  box-shadow:
    0 0 6px 1px rgba(220, 230, 255, 0.4),
    0 0 10px 3px rgba(180, 200, 255, 0.22) !important;
}

/* Equipped PFPs (You / feed / comments): hug paint + tight shadow */
.avatar-cosmetic-wrap.has-aura::after,
.account-avatar-btn.has-aura::after,
.gacha-reward-aura .aura-preview-host::after {
  background-size: 158% !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* CSS-only ring auras on cards: force luminous corona at face rim when no PNG */
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .aura-preview-host.aura-pearl-mist::after,
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .aura-preview-host.aura-lavender-drift::after,
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .aura-preview-host.aura-baby-blue::after,
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .aura-preview-host.aura-soft-wool::after,
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .aura-preview-host.aura-meadow-haze::after,
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .aura-preview-host.aura-still-ripple::after,
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .aura-preview-host.aura-hill-ember::after,
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .aura-preview-host.aura-cloak-mist::after,
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .aura-preview-host.aura-honey-glow::after,
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .aura-preview-host.aura-living-water::after,
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .aura-preview-host.aura-soft-silver::after,
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .aura-preview-host.aura-dawn-blush::after,
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .aura-preview-host.aura-deep-teal-drift::after,
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .aura-preview-host.aura-quiet-ember::after,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .aura-preview-host.aura-pearl-mist::after,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .aura-preview-host.aura-lavender-drift::after,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .aura-preview-host.aura-baby-blue::after,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .aura-preview-host.aura-soft-wool::after,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .aura-preview-host.aura-meadow-haze::after,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .aura-preview-host.aura-still-ripple::after,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .aura-preview-host.aura-hill-ember::after,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .aura-preview-host.aura-cloak-mist::after,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .aura-preview-host.aura-honey-glow::after,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .aura-preview-host.aura-living-water::after,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .aura-preview-host.aura-soft-silver::after,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .aura-preview-host.aura-dawn-blush::after,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .aura-preview-host.aura-deep-teal-drift::after,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .aura-preview-host.aura-quiet-ember::after {
  background:
    radial-gradient(circle closest-side,
      transparent 0%,
      transparent 84%,
      rgba(200, 220, 255, 0.55) 90%,
      rgba(200, 220, 255, 0.7) 96%,
      rgba(200, 220, 255, 0.35) 100%) !important;
}

/* Per-aura tint for CSS hug corona on cards */
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .aura-preview-host.aura-baby-blue::after,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .aura-preview-host.aura-baby-blue::after {
  background: radial-gradient(circle closest-side, transparent 84%, rgba(140, 200, 255, 0.6) 90%, rgba(140, 200, 255, 0.75) 96%, rgba(140, 200, 255, 0.35) 100%) !important;
}
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .aura-preview-host.aura-lavender-drift::after,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .aura-preview-host.aura-lavender-drift::after {
  background: radial-gradient(circle closest-side, transparent 84%, rgba(190, 160, 230, 0.6) 90%, rgba(190, 160, 230, 0.75) 96%, rgba(190, 160, 230, 0.35) 100%) !important;
}
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .aura-preview-host.aura-pearl-mist::after,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .aura-preview-host.aura-pearl-mist::after {
  background: radial-gradient(circle closest-side, transparent 84%, rgba(230, 230, 240, 0.65) 90%, rgba(230, 230, 240, 0.8) 96%, rgba(200, 210, 230, 0.35) 100%) !important;
}
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .aura-preview-host.aura-meadow-haze::after,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .aura-preview-host.aura-meadow-haze::after {
  background: radial-gradient(circle closest-side, transparent 84%, rgba(150, 200, 130, 0.55) 90%, rgba(150, 200, 130, 0.7) 96%, rgba(150, 200, 130, 0.3) 100%) !important;
}
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .aura-preview-host.aura-hill-ember::after,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .aura-preview-host.aura-hill-ember::after,
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .aura-preview-host.aura-quiet-ember::after,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .aura-preview-host.aura-quiet-ember::after {
  background: radial-gradient(circle closest-side, transparent 84%, rgba(240, 160, 70, 0.6) 90%, rgba(255, 140, 50, 0.75) 96%, rgba(255, 120, 40, 0.3) 100%) !important;
}
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .aura-preview-host.aura-honey-glow::after,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .aura-preview-host.aura-honey-glow::after {
  background: radial-gradient(circle closest-side, transparent 84%, rgba(255, 200, 100, 0.6) 90%, rgba(255, 190, 80, 0.75) 96%, rgba(255, 180, 60, 0.3) 100%) !important;
}
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .aura-preview-host.aura-living-water::after,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .aura-preview-host.aura-living-water::after,
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .aura-preview-host.aura-deep-teal-drift::after,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .aura-preview-host.aura-deep-teal-drift::after,
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .aura-preview-host.aura-still-ripple::after,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .aura-preview-host.aura-still-ripple::after {
  background: radial-gradient(circle closest-side, transparent 84%, rgba(60, 190, 180, 0.55) 90%, rgba(40, 180, 175, 0.75) 96%, rgba(40, 170, 165, 0.3) 100%) !important;
}
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .aura-preview-host.aura-dawn-blush::after,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .aura-preview-host.aura-dawn-blush::after {
  background: radial-gradient(circle closest-side, transparent 84%, rgba(255, 180, 160, 0.55) 90%, rgba(255, 160, 140, 0.7) 96%, rgba(255, 140, 120, 0.3) 100%) !important;
}

/* Particle host: was inset -22% (orbits far past face → empty ring look). Hug ≈ face+8. */
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .aura-particles,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .aura-particles,
.unlock-studio-avatar-wrap .aura-particles,
.avatar-crop-deco .aura-particles {
  inset: -6% !important;
}
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .aura-particles > i:nth-child(1),
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .aura-particles > i:nth-child(1) { --dx: -28%; --dy: -26%; }
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .aura-particles > i:nth-child(2),
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .aura-particles > i:nth-child(2) { --dx: 26%; --dy: -22%; }
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .aura-particles > i:nth-child(3),
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .aura-particles > i:nth-child(3) { --dx: -20%; --dy: 24%; }
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .aura-particles > i:nth-child(4),
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .aura-particles > i:nth-child(4) { --dx: 24%; --dy: 20%; }
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .aura-particles > i:nth-child(5),
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .aura-particles > i:nth-child(5) { --dx: -6%; --dy: -30%; }
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .aura-particles > i:nth-child(6),
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .aura-particles > i:nth-child(6) { --dx: 8%; --dy: 30%; }

/* Unlock aura tray chips (studio): same hug */
.unlock-aura-chip-preview.has-aura::after,
.unlock-aura-chip-preview.aura-preview-host::after {
  width: calc(var(--av, 40px) * 1.125) !important;
  height: calc(var(--av, 40px) * 1.125) !important;
  background-size: 158% !important;
  box-shadow: 0 0 3px 1px rgba(200, 220, 255, 0.4) !important;
}

/*
 * MUST2 root cause: b89 still applied white/black drop-shadow "outline" (1.4–2.2px)
 * plus older .avatar-sticker / .crop-stage-sticker-emoji / layered bloom (0 3px 8px)
 * filters — soft halo past PNG die-cut. Outline already in die-cut PNG.
 */
.unlock-studio-sticker,
.unlock-studio-sticker-emoji,
.unlock-studio-sticker-emoji .sticker-diecut,
.unlock-profile-preview .unlock-studio-sticker,
.unlock-profile-preview .unlock-studio-sticker-emoji,
.unlock-profile-preview .avatar-sticker,
.unlock-profile-preview .sticker-diecut,
.unlock-studio-avatar-wrap > .unlock-studio-sticker,
.unlock-studio-avatar-wrap > .avatar-sticker,
.avatar-cosmetic-wrap .avatar-sticker,
.avatar-cosmetic-wrap .sticker-diecut,
.avatar-sticker-host .avatar-sticker,
.avatar-sticker,
.avatar-sticker .sticker-diecut,
.account-avatar-btn .avatar-sticker,
.card .avatar-sticker,
.comment .avatar-sticker,
.crop-stage-sticker,
.crop-stage-sticker-emoji,
.crop-stage-sticker-emoji .sticker-diecut,
.crop-sticker-tray-btn,
.crop-sticker-tray-btn .sticker-diecut,
.unlock-carousel-item.unlock-sticker-item .unlock-carousel-sticker-emoji,
.unlock-carousel-sticker-emoji,
.unlock-carousel-sticker-emoji .sticker-diecut,
.card-sticker-chip-emoji,
.card-sticker-chip-emoji .sticker-diecut,
.gacha-reward-preview.gacha-reward-sticker,
.gacha-reward-sticker .sticker-diecut {
  filter: none !important;
  -webkit-filter: none !important;
  box-shadow: none !important;
}

/* Kill older physical-sticker bloom stacks on PFP contexts only (not shop art-hero product tiles) */
.unlock-profile-preview .avatar-sticker,
.unlock-studio-sticker-emoji,
.unlock-carousel-sticker-emoji,
.crop-stage-sticker-emoji {
  filter: none !important;
}

/* Drag ghost: neutral lift only, no colored bloom */
.studio-sticker-drag-ghost {
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.25)) !important;
}
.unlock-carousel-item.unlock-sticker-item.is-dragging {
  filter: none !important;
}

/* Holofoil PFP stickers: no outline bloom under shine */
.unlock-studio-sticker.is-holofoil .unlock-studio-sticker-emoji,
.crop-stage-sticker-emoji.is-holofoil,
.avatar-sticker.is-holofoil,
.unlock-carousel-sticker-emoji.is-holofoil {
  filter: none !important;
}

/* === critic-b92 — You PFP studio polish (shrink center + column center + drag-over) === */
/*
 * MUST1: studio face/frame/aura 160/200/180 (cards stay 128/160/144).
 * Face ≈50–55% of 300–320 stage. Crop ring = face size.
 * MUST2: vertical STICKERS/FRAMES columns — tiles centered H; group centered V when short.
 * MUST3: 2px dashed crop ring on drag-over; ghost 0.92 @ 1.06; handles 30px light border.
 * SHOULD: aura ≤3 chips center; quieter stage chrome; fit above dock.
 */

:root {
  --studio-avatar-face: 116px;
  --studio-avatar-frame: 156px;
  --studio-avatar-aura: 138px; /* 116/156 barely-overlap; cards stay 144 */
  --avatar-aura-max-studio: 153px; /* frame+8 */
}

/* ===== MUST1: studio stage + composite tokens ===== */
.unlock-studio-stage {
  grid-template-columns: 76px minmax(0, 1fr) 76px;
  gap: 8px;
  align-items: stretch;
  margin: 0 0 6px;
}

.unlock-carousel-col {
  width: 76px;
  max-width: 76px;
  height: 310px !important;
  min-height: 310px !important;
  max-height: 310px !important;
  box-sizing: border-box;
}

.unlock-profile-preview {
  min-height: 310px !important;
  height: 310px !important;
  max-height: 310px !important;
  padding: 12px 6px !important;
  /* Quieter stage chrome vs PFP */
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(0, 0, 0, 0.14) !important;
  box-shadow: none !important;
}

.unlock-carousel-col {
  border-color: rgba(255, 255, 255, 0.08) !important;
  background: rgba(0, 0, 0, 0.1) !important;
}

.unlock-carousel-heading {
  color: rgba(212, 160, 84, 0.7);
  border-bottom-color: rgba(255, 255, 255, 0.06);
  background: transparent;
  font-size: 8px;
  letter-spacing: 0.1em;
  padding: 4px 2px;
}

.unlock-studio-avatar-wrap,
.unlock-profile-preview .unlock-studio-avatar-wrap {
  --avatar-face: var(--studio-avatar-face, 116px);
  --avatar-frame: var(--studio-avatar-frame, 156px);
  --avatar-aura: var(--studio-avatar-aura, 130px);
  --av: var(--avatar-face);
  width: var(--studio-avatar-face, 116px) !important;
  height: var(--studio-avatar-face, 116px) !important;
}

.unlock-studio-avatar-wrap > .unlock-studio-avatar,
.unlock-studio-avatar,
.unlock-profile-preview .unlock-studio-avatar-wrap > .unlock-studio-avatar {
  width: var(--avatar-face) !important;
  height: var(--avatar-face) !important;
  font-size: calc(var(--avatar-face) * 0.34) !important;
}

.unlock-studio-avatar-wrap.has-frame::before {
  inset: calc((var(--avatar-face) - var(--avatar-frame)) / 2) !important;
}

.unlock-studio-avatar-wrap.has-aura::after,
.unlock-studio-avatar-wrap.has-aura.has-frame::after {
  width: min(var(--avatar-aura), var(--avatar-aura-max-studio, 208px)) !important;
  height: min(var(--avatar-aura), var(--avatar-aura-max-studio, 208px)) !important;
}

.unlock-studio-avatar-wrap,
.unlock-studio-avatar-wrap.has-aura,
.avatar-crop-deco.has-aura,
.avatar-crop-stage {
  --avatar-aura: var(--studio-avatar-aura, 130px);
  --avatar-aura-max-card: var(--avatar-aura-max-studio, 208px);
}

/* Crop ring = face size (not frame) */
.unlock-profile-preview .unlock-studio-avatar-wrap:not(.has-frame)::before,
.unlock-studio-avatar-wrap:not(.has-frame)::before {
  inset: 0;
  box-shadow:
    0 0 0 1.5px rgba(255, 255, 255, 0.4),
    0 0 0 2.5px rgba(0, 0, 0, 0.28);
}

.avatar-crop-stage {
  --crop-view: var(--studio-avatar-face, 116px);
  --avatar-face: var(--studio-avatar-face, 116px);
  --avatar-frame: var(--studio-avatar-frame, 156px);
  --avatar-aura: var(--studio-avatar-aura, 130px);
  --av: var(--crop-view);
  height: min(320px, 52vh) !important;
}

.avatar-crop-hole,
.avatar-crop-deco {
  width: var(--crop-view, 160px) !important;
  height: var(--crop-view, 160px) !important;
}

.unlock-studio-sticker {
  width: calc(var(--av, 160px) * 36 / 78);
  height: calc(var(--av, 160px) * 36 / 78);
  font-size: calc(var(--av, 160px) * 14 / 78);
}

.unlock-studio-sticker-emoji {
  line-height: calc(var(--av, 160px) * 36 / 78);
}

/* ===== MUST2: vertical columns — H-center tiles; V-center group when short ===== */
.unlock-carousel-col .unlock-carousel,
#unlock-frame-carousel,
#unlock-sticker-carousel,
.unlock-carousel {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important; /* tiles centered in column horizontally */
  justify-content: safe center; /* whole group vertically centered when shorter than column */
  justify-content: center;
  gap: 8px !important;
  padding: 8px 0 !important; /* kill legacy 40/48 top-bias snap padding */
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scroll-snap-type: y proximity;
  -webkit-overflow-scrolling: touch;
  box-sizing: border-box;
  width: 100%;
  min-height: 0;
  border: 0;
  background: transparent;
}

/* When overflowing, prefer start so top items aren't clipped under safe-center fallback */
@supports (justify-content: safe center) {
  .unlock-carousel-col .unlock-carousel,
  #unlock-frame-carousel,
  #unlock-sticker-carousel,
  .unlock-carousel {
    justify-content: safe center;
  }
}

.unlock-carousel-col .unlock-carousel {
  flex: 1 1 auto;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}

.unlock-carousel-item,
.unlock-carousel-item.unlock-sticker-item,
.unlock-carousel-item.unlock-frame-item {
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  justify-content: center;
  width: auto !important;
  max-width: 100%;
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  flex: 0 0 auto;
  scroll-snap-align: center;
  box-sizing: border-box;
}

/* b98: removed fighting 60px carousel sticker rules — uniform 48 square in b97/b98 block below */
.unlock-carousel-sticker-emoji,
.unlock-carousel-sticker-emoji .sticker-diecut {
  /* size owned by === b97/b98 sticker carousel block === */
}

.unlock-carousel-frame-av {
  width: 56px !important;
  height: 56px !important;
}

.unlock-carousel-frame-av > .avatar {
  width: 44px !important;
  height: 44px !important;
  font-size: 14px !important;
}

.unlock-carousel-label {
  display: none; /* nameless tiles; keep column narrow 72–80 */
}

.unlock-carousel-empty {
  align-self: center;
  margin: 0;
  padding: 8px 4px;
  font-size: 10px;
  line-height: 1.25;
  color: var(--faint);
  text-align: center;
}

/* ===== MUST3: drag-over crop ring + ghost + handles ===== */
/* Dim stage outside crop while a sticker drag is active */
.unlock-profile-preview.is-drop-target {
  outline: none !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  box-shadow: none !important;
  position: relative;
}

.unlock-profile-preview.is-drop-target::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: rgba(0, 0, 0, 0.6); /* outside ≈40% residual */
  pointer-events: none;
  z-index: 4;
}

.unlock-profile-preview.is-drop-target .unlock-studio-avatar-wrap {
  position: relative;
  z-index: 5;
}

/* 2px dashed accent on crop only — full opacity */
.unlock-studio-avatar-wrap.is-dragging-over,
.unlock-studio-avatar-wrap.is-drop-target.is-dragging-over,
.unlock-profile-preview .unlock-studio-avatar-wrap.is-dragging-over {
  outline: 2px dashed #d4a054 !important;
  outline-offset: 3px !important;
  border-color: transparent !important;
  box-shadow: none !important;
  opacity: 1 !important;
}

/* Don't paint the heavy b86 preview ring — crop ring is enough */
.unlock-profile-preview.is-drop-target.is-dragging-over,
.unlock-profile-preview.is-dragging-over {
  outline: none !important;
  box-shadow: none !important;
}

.studio-sticker-drag-ghost {
  opacity: 0.92 !important;
  transform: translate(-50%, -50%) scale(1.06) !important;
  filter: none !important; /* no sticker outer glow */
  -webkit-filter: none !important;
  width: 68px;
  height: 68px;
}

.studio-sticker-drag-ghost .sticker-diecut,
.studio-sticker-drag-ghost img,
.studio-sticker-drag-ghost .unlock-carousel-sticker-emoji {
  filter: none !important;
  box-shadow: none !important;
}

.unlock-carousel-item.unlock-sticker-item.is-dragging,
#unlock-sticker-carousel .unlock-sticker-item.is-dragging {
  transform: scale(1.06) !important;
  filter: none !important;
  opacity: 0.45 !important;
}

/* After drop: handles 28–32px, 1px light border — readable on photo */
.studio-sticker-rotate,
.studio-sticker-move,
.studio-sticker-resize {
  width: 30px !important;
  height: 30px !important;
  font-size: 13px !important;
  line-height: 28px !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  background: rgba(255, 255, 255, 0.72) !important;
  color: #1a140c !important;
  opacity: 0.95 !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

.studio-sticker-resize {
  background: rgba(255, 236, 200, 0.85) !important;
}

/* ===== SHOULD: auras ≤3 chips → center the group ===== */
.unlock-aura-carousel:not(:has(.unlock-aura-chip:nth-child(4))) {
  justify-content: center;
}

.unlock-aura-slot {
  margin: 2px 0 8px !important;
}

.unlock-studio-center {
  justify-content: center;
  gap: 2px;
}

.unlock-studio-banner-name {
  font-size: 10px;
  color: var(--faint, var(--muted));
  opacity: 0.85;
}

.unlock-studio-sticker-hint {
  font-size: 10px;
  padding: 3px 22px 3px 8px;
  background: rgba(201, 162, 39, 0.08);
  border-color: rgba(212, 160, 84, 0.35);
}

/* Fit studio above dock when possible */
#you-pane-account .unlock-profile-studio,
#you-pane-unlockables .unlock-profile-studio {
  margin: 2px 0 8px;
}

#you-pane-account .unlock-save-photo-btn,
#you-pane-unlockables .unlock-save-photo-btn {
  margin: 0 0 4px;
}

@media (max-width: 380px) {
  :root {
    --studio-avatar-face: 108px;
    --studio-avatar-frame: 144px;
    --studio-avatar-aura: 128px;
  }
  .unlock-studio-stage {
    grid-template-columns: 72px minmax(0, 1fr) 72px;
    gap: 6px;
  }
  .unlock-carousel-col {
    width: 72px;
    max-width: 72px;
    height: 300px !important;
    min-height: 300px !important;
    max-height: 300px !important;
  }
  .unlock-profile-preview {
    height: 300px !important;
    min-height: 300px !important;
    max-height: 300px !important;
    padding: 10px 4px !important;
  }
  .unlock-carousel-sticker-emoji,
  .unlock-carousel-sticker-emoji .sticker-diecut {
    width: 56px !important;
    height: 56px !important;
    min-width: 56px !important;
    min-height: 56px !important;
    font-size: 40px !important;
  }
}

/* Hard-lock: Unlockables/Shop card tokens must NOT regress */
.unlock-card.is-art-hero.reward-frame .unlock-art-hero .avatar-cosmetic-wrap.pfp-stack,
.unlock-card.is-art-hero.reward-frame .unlock-art-hero .unlock-frame-mini,
.shop-item.is-art-hero.shop-item-frame .shop-art-hero .avatar-cosmetic-wrap.pfp-stack,
.shop-item.is-art-hero.shop-item-frame .shop-art-hero .unlock-frame-mini,
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .aura-preview-host.pfp-stack,
.unlock-card.is-art-hero.reward-aura .unlock-art-hero .unlock-aura-mini,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .aura-preview-host.pfp-stack,
.shop-item.is-art-hero.shop-item-aura .shop-art-hero .shop-aura-mini {
  --avatar-face: 128px;
  --avatar-frame: 160px;
  --avatar-aura: 144px;
}


/* ===== b95 carousel diecut soft placeholders ===== */
.unlock-carousel-item.is-loading .unlock-carousel-frame-av.has-frame,
.unlock-carousel-item.is-loading .unlock-carousel-sticker-emoji {
  background: color-mix(in srgb, var(--muted, #b8a994) 28%, transparent);
  border-radius: 12px;
}
.unlock-carousel-item.is-loading img.frame-diecut,
.unlock-carousel-item.is-loading img.sticker-diecut {
  opacity: 0;
}
.unlock-carousel-item:not(.is-loading) img.frame-diecut,
.unlock-carousel-item:not(.is-loading) img.sticker-diecut {
  opacity: 1;
  transition: opacity 0.12s ease;
}

/* ===== b93 Imagine PNG frames (die-cut hollow center) ===== */
/* Default: center over host; size from --avatar-frame when set (avoids inset:-26% fighting small tiles) */
img.frame-diecut {
  position: absolute;
  inset: auto;
  left: 50%;
  top: 50%;
  width: var(--avatar-frame, 125%);
  height: var(--avatar-frame, 125%);
  max-width: none;
  object-fit: contain;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 3; /* above face (z=0/2); stickers stay 6+ */
  user-select: none;
  -webkit-user-drag: none;
}
/* Studio: frame layer sized to --avatar-frame (145) over face (116) */
#unlock-profile-preview .unlock-studio-avatar-wrap > img.frame-diecut,
.unlock-studio-avatar-wrap > img.frame-diecut,
.avatar-cosmetic-wrap.unlock-studio-avatar-wrap > img.frame-diecut {
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: var(--avatar-frame, var(--studio-avatar-frame, 156px)) !important;
  height: var(--avatar-frame, var(--studio-avatar-frame, 156px)) !important;
  max-width: none !important;
  max-height: none !important;
  transform: translate(-50%, -50%) !important;
  object-fit: contain !important;
}
/* Cards / shop previews: frame 160 over face 128 */
.unlock-frame-mini > img.frame-diecut,
.avatar-cosmetic-wrap.unlock-frame-mini > img.frame-diecut,
.pfp-stack.unlock-frame-mini > img.frame-diecut {
  inset: auto;
  left: 50%;
  top: 50%;
  width: 160px;
  height: 160px;
  transform: translate(-50%, -50%);
}
/* Carousel tiles: wrap is frame-sized (56); diecut fills wrap over 44 face */
.unlock-carousel-frame-av > img.frame-diecut,
.unlock-carousel-frame-av.has-frame > img.frame-diecut {
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  right: auto !important;
  bottom: auto !important;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  transform: translate(-50%, -50%) !important;
  object-fit: contain !important;
}
.unlock-carousel-frame-av.has-frame {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: visible;
}
.unlock-carousel-frame-av.has-frame > .avatar {
  position: relative;
  z-index: 0;
}
/* When PNG diecut present, hide CSS/SVG ::before ring art & mute gold halo rings */
.has-frame:has(> .frame-diecut)::before {
  background-image: none !important;
  background: none !important;
  box-shadow: none !important;
  animation: none !important;
  opacity: 0 !important;
}
.has-frame:has(> .frame-diecut) > .avatar,
.has-frame:has(> .frame-diecut) #account-home-avatar,
#account-avatar-btn.has-frame:has(> .frame-diecut) .avatar,
#account-avatar-btn.has-frame:has(> .frame-diecut) #account-home-avatar,
.avatar-crop-deco.has-frame:has(> .frame-diecut),
.crop-frame-icon-av.has-frame:has(> .frame-diecut) > .avatar,
.gacha-reward-frame.has-frame:has(> .frame-diecut) > .avatar,
.unlock-carousel-frame-av.has-frame:has(> .frame-diecut) > .avatar {
  box-shadow: none !important;
}
/* CSS background-image fallback on ::before for hosts that only set frame-* class (no img yet) */
.avatar-cosmetic-wrap.has-frame.frame-amber::before,
#account-avatar-btn.frame-amber.has-frame::before,
.avatar-crop-deco.frame-amber.has-frame::before,
.crop-frame-icon-av.frame-amber.has-frame::before,
.gacha-reward-frame.frame-amber.has-frame::before,
.unlock-carousel-frame-av.frame-amber.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-amber::before {
  background-image: url(/assets/frames/frame-amber.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-amethyst::before,
#account-avatar-btn.frame-amethyst.has-frame::before,
.avatar-crop-deco.frame-amethyst.has-frame::before,
.crop-frame-icon-av.frame-amethyst.has-frame::before,
.gacha-reward-frame.frame-amethyst.has-frame::before,
.unlock-carousel-frame-av.frame-amethyst.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-amethyst::before {
  background-image: url(/assets/frames/frame-amethyst.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-ark::before,
#account-avatar-btn.frame-ark.has-frame::before,
.avatar-crop-deco.frame-ark.has-frame::before,
.crop-frame-icon-av.frame-ark.has-frame::before,
.gacha-reward-frame.frame-ark.has-frame::before,
.unlock-carousel-frame-av.frame-ark.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-ark::before {
  background-image: url(/assets/frames/frame-ark.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-blossom::before,
#account-avatar-btn.frame-blossom.has-frame::before,
.avatar-crop-deco.frame-blossom.has-frame::before,
.crop-frame-icon-av.frame-blossom.has-frame::before,
.gacha-reward-frame.frame-blossom.has-frame::before,
.unlock-carousel-frame-av.frame-blossom.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-blossom::before {
  background-image: url(/assets/frames/frame-blossom.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-bronze::before,
#account-avatar-btn.frame-bronze.has-frame::before,
.avatar-crop-deco.frame-bronze.has-frame::before,
.crop-frame-icon-av.frame-bronze.has-frame::before,
.gacha-reward-frame.frame-bronze.has-frame::before,
.unlock-carousel-frame-av.frame-bronze.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-bronze::before {
  background-image: url(/assets/frames/frame-bronze.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-cedar::before,
#account-avatar-btn.frame-cedar.has-frame::before,
.avatar-crop-deco.frame-cedar.has-frame::before,
.crop-frame-icon-av.frame-cedar.has-frame::before,
.gacha-reward-frame.frame-cedar.has-frame::before,
.unlock-carousel-frame-av.frame-cedar.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-cedar::before {
  background-image: url(/assets/frames/frame-cedar.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-charcoal::before,
#account-avatar-btn.frame-charcoal.has-frame::before,
.avatar-crop-deco.frame-charcoal.has-frame::before,
.crop-frame-icon-av.frame-charcoal.has-frame::before,
.gacha-reward-frame.frame-charcoal.has-frame::before,
.unlock-carousel-frame-av.frame-charcoal.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-charcoal::before {
  background-image: url(/assets/frames/frame-charcoal.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-cloak::before,
#account-avatar-btn.frame-cloak.has-frame::before,
.avatar-crop-deco.frame-cloak.has-frame::before,
.crop-frame-icon-av.frame-cloak.has-frame::before,
.gacha-reward-frame.frame-cloak.has-frame::before,
.unlock-carousel-frame-av.frame-cloak.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-cloak::before {
  background-image: url(/assets/frames/frame-cloak.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-copper::before,
#account-avatar-btn.frame-copper.has-frame::before,
.avatar-crop-deco.frame-copper.has-frame::before,
.crop-frame-icon-av.frame-copper.has-frame::before,
.gacha-reward-frame.frame-copper.has-frame::before,
.unlock-carousel-frame-av.frame-copper.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-copper::before {
  background-image: url(/assets/frames/frame-copper.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-coral::before,
#account-avatar-btn.frame-coral.has-frame::before,
.avatar-crop-deco.frame-coral.has-frame::before,
.crop-frame-icon-av.frame-coral.has-frame::before,
.gacha-reward-frame.frame-coral.has-frame::before,
.unlock-carousel-frame-av.frame-coral.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-coral::before {
  background-image: url(/assets/frames/frame-coral.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-covenant-bow::before,
#account-avatar-btn.frame-covenant-bow.has-frame::before,
.avatar-crop-deco.frame-covenant-bow.has-frame::before,
.crop-frame-icon-av.frame-covenant-bow.has-frame::before,
.gacha-reward-frame.frame-covenant-bow.has-frame::before,
.unlock-carousel-frame-av.frame-covenant-bow.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-covenant-bow::before {
  background-image: url(/assets/frames/frame-covenant-bow.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-crest::before,
#account-avatar-btn.frame-crest.has-frame::before,
.avatar-crop-deco.frame-crest.has-frame::before,
.crop-frame-icon-av.frame-crest.has-frame::before,
.gacha-reward-frame.frame-crest.has-frame::before,
.unlock-carousel-frame-av.frame-crest.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-crest::before {
  background-image: url(/assets/frames/frame-crest.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-crimson::before,
#account-avatar-btn.frame-crimson.has-frame::before,
.avatar-crop-deco.frame-crimson.has-frame::before,
.crop-frame-icon-av.frame-crimson.has-frame::before,
.gacha-reward-frame.frame-crimson.has-frame::before,
.unlock-carousel-frame-av.frame-crimson.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-crimson::before {
  background-image: url(/assets/frames/frame-crimson.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-crown-of-thorns::before,
#account-avatar-btn.frame-crown-of-thorns.has-frame::before,
.avatar-crop-deco.frame-crown-of-thorns.has-frame::before,
.crop-frame-icon-av.frame-crown-of-thorns.has-frame::before,
.gacha-reward-frame.frame-crown-of-thorns.has-frame::before,
.unlock-carousel-frame-av.frame-crown-of-thorns.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-crown-of-thorns::before {
  background-image: url(/assets/frames/frame-crown-of-thorns.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-dawn::before,
#account-avatar-btn.frame-dawn.has-frame::before,
.avatar-crop-deco.frame-dawn.has-frame::before,
.crop-frame-icon-av.frame-dawn.has-frame::before,
.gacha-reward-frame.frame-dawn.has-frame::before,
.unlock-carousel-frame-av.frame-dawn.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-dawn::before {
  background-image: url(/assets/frames/frame-dawn.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-desert::before,
#account-avatar-btn.frame-desert.has-frame::before,
.avatar-crop-deco.frame-desert.has-frame::before,
.crop-frame-icon-av.frame-desert.has-frame::before,
.gacha-reward-frame.frame-desert.has-frame::before,
.unlock-carousel-frame-av.frame-desert.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-desert::before {
  background-image: url(/assets/frames/frame-desert.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-ember::before,
#account-avatar-btn.frame-ember.has-frame::before,
.avatar-crop-deco.frame-ember.has-frame::before,
.crop-frame-icon-av.frame-ember.has-frame::before,
.gacha-reward-frame.frame-ember.has-frame::before,
.unlock-carousel-frame-av.frame-ember.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-ember::before {
  background-image: url(/assets/frames/frame-ember.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-emerald::before,
#account-avatar-btn.frame-emerald.has-frame::before,
.avatar-crop-deco.frame-emerald.has-frame::before,
.crop-frame-icon-av.frame-emerald.has-frame::before,
.gacha-reward-frame.frame-emerald.has-frame::before,
.unlock-carousel-frame-av.frame-emerald.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-emerald::before {
  background-image: url(/assets/frames/frame-emerald.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-fold::before,
#account-avatar-btn.frame-fold.has-frame::before,
.avatar-crop-deco.frame-fold.has-frame::before,
.crop-frame-icon-av.frame-fold.has-frame::before,
.gacha-reward-frame.frame-fold.has-frame::before,
.unlock-carousel-frame-av.frame-fold.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-fold::before {
  background-image: url(/assets/frames/frame-fold.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-frost::before,
#account-avatar-btn.frame-frost.has-frame::before,
.avatar-crop-deco.frame-frost.has-frame::before,
.crop-frame-icon-av.frame-frost.has-frame::before,
.gacha-reward-frame.frame-frost.has-frame::before,
.unlock-carousel-frame-av.frame-frost.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-frost::before {
  background-image: url(/assets/frames/frame-frost.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-halo::before,
#account-avatar-btn.frame-halo.has-frame::before,
.avatar-crop-deco.frame-halo.has-frame::before,
.crop-frame-icon-av.frame-halo.has-frame::before,
.gacha-reward-frame.frame-halo.has-frame::before,
.unlock-carousel-frame-av.frame-halo.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-halo::before {
  background-image: url(/assets/frames/frame-halo.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-hill::before,
#account-avatar-btn.frame-hill.has-frame::before,
.avatar-crop-deco.frame-hill.has-frame::before,
.crop-frame-icon-av.frame-hill.has-frame::before,
.gacha-reward-frame.frame-hill.has-frame::before,
.unlock-carousel-frame-av.frame-hill.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-hill::before {
  background-image: url(/assets/frames/frame-hill.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-honeycomb::before,
#account-avatar-btn.frame-honeycomb.has-frame::before,
.avatar-crop-deco.frame-honeycomb.has-frame::before,
.crop-frame-icon-av.frame-honeycomb.has-frame::before,
.gacha-reward-frame.frame-honeycomb.has-frame::before,
.unlock-carousel-frame-av.frame-honeycomb.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-honeycomb::before {
  background-image: url(/assets/frames/frame-honeycomb.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-incense::before,
#account-avatar-btn.frame-incense.has-frame::before,
.avatar-crop-deco.frame-incense.has-frame::before,
.crop-frame-icon-av.frame-incense.has-frame::before,
.gacha-reward-frame.frame-incense.has-frame::before,
.unlock-carousel-frame-av.frame-incense.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-incense::before {
  background-image: url(/assets/frames/frame-incense.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-indigo::before,
#account-avatar-btn.frame-indigo.has-frame::before,
.avatar-crop-deco.frame-indigo.has-frame::before,
.crop-frame-icon-av.frame-indigo.has-frame::before,
.gacha-reward-frame.frame-indigo.has-frame::before,
.unlock-carousel-frame-av.frame-indigo.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-indigo::before {
  background-image: url(/assets/frames/frame-indigo.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-ivory::before,
#account-avatar-btn.frame-ivory.has-frame::before,
.avatar-crop-deco.frame-ivory.has-frame::before,
.crop-frame-icon-av.frame-ivory.has-frame::before,
.gacha-reward-frame.frame-ivory.has-frame::before,
.unlock-carousel-frame-av.frame-ivory.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-ivory::before {
  background-image: url(/assets/frames/frame-ivory.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-jade::before,
#account-avatar-btn.frame-jade.has-frame::before,
.avatar-crop-deco.frame-jade.has-frame::before,
.crop-frame-icon-av.frame-jade.has-frame::before,
.gacha-reward-frame.frame-jade.has-frame::before,
.unlock-carousel-frame-av.frame-jade.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-jade::before {
  background-image: url(/assets/frames/frame-jade.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-laurel::before,
#account-avatar-btn.frame-laurel.has-frame::before,
.avatar-crop-deco.frame-laurel.has-frame::before,
.crop-frame-icon-av.frame-laurel.has-frame::before,
.gacha-reward-frame.frame-laurel.has-frame::before,
.unlock-carousel-frame-av.frame-laurel.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-laurel::before {
  background-image: url(/assets/frames/frame-laurel.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-lavender::before,
#account-avatar-btn.frame-lavender.has-frame::before,
.avatar-crop-deco.frame-lavender.has-frame::before,
.crop-frame-icon-av.frame-lavender.has-frame::before,
.gacha-reward-frame.frame-lavender.has-frame::before,
.unlock-carousel-frame-av.frame-lavender.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-lavender::before {
  background-image: url(/assets/frames/frame-lavender.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-linen::before,
#account-avatar-btn.frame-linen.has-frame::before,
.avatar-crop-deco.frame-linen.has-frame::before,
.crop-frame-icon-av.frame-linen.has-frame::before,
.gacha-reward-frame.frame-linen.has-frame::before,
.unlock-carousel-frame-av.frame-linen.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-linen::before {
  background-image: url(/assets/frames/frame-linen.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-manna::before,
#account-avatar-btn.frame-manna.has-frame::before,
.avatar-crop-deco.frame-manna.has-frame::before,
.crop-frame-icon-av.frame-manna.has-frame::before,
.gacha-reward-frame.frame-manna.has-frame::before,
.unlock-carousel-frame-av.frame-manna.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-manna::before {
  background-image: url(/assets/frames/frame-manna.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-marble::before,
#account-avatar-btn.frame-marble.has-frame::before,
.avatar-crop-deco.frame-marble.has-frame::before,
.crop-frame-icon-av.frame-marble.has-frame::before,
.gacha-reward-frame.frame-marble.has-frame::before,
.unlock-carousel-frame-av.frame-marble.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-marble::before {
  background-image: url(/assets/frames/frame-marble.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-meadow::before,
#account-avatar-btn.frame-meadow.has-frame::before,
.avatar-crop-deco.frame-meadow.has-frame::before,
.crop-frame-icon-av.frame-meadow.has-frame::before,
.gacha-reward-frame.frame-meadow.has-frame::before,
.unlock-carousel-frame-av.frame-meadow.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-meadow::before {
  background-image: url(/assets/frames/frame-meadow.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-medal::before,
#account-avatar-btn.frame-medal.has-frame::before,
.avatar-crop-deco.frame-medal.has-frame::before,
.crop-frame-icon-av.frame-medal.has-frame::before,
.gacha-reward-frame.frame-medal.has-frame::before,
.unlock-carousel-frame-av.frame-medal.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-medal::before {
  background-image: url(/assets/frames/frame-medal.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-midnight::before,
#account-avatar-btn.frame-midnight.has-frame::before,
.avatar-crop-deco.frame-midnight.has-frame::before,
.crop-frame-icon-av.frame-midnight.has-frame::before,
.gacha-reward-frame.frame-midnight.has-frame::before,
.unlock-carousel-frame-av.frame-midnight.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-midnight::before {
  background-image: url(/assets/frames/frame-midnight.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-mosaic::before,
#account-avatar-btn.frame-mosaic.has-frame::before,
.avatar-crop-deco.frame-mosaic.has-frame::before,
.crop-frame-icon-av.frame-mosaic.has-frame::before,
.gacha-reward-frame.frame-mosaic.has-frame::before,
.unlock-carousel-frame-av.frame-mosaic.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-mosaic::before {
  background-image: url(/assets/frames/frame-mosaic.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-moss::before,
#account-avatar-btn.frame-moss.has-frame::before,
.avatar-crop-deco.frame-moss.has-frame::before,
.crop-frame-icon-av.frame-moss.has-frame::before,
.gacha-reward-frame.frame-moss.has-frame::before,
.unlock-carousel-frame-av.frame-moss.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-moss::before {
  background-image: url(/assets/frames/frame-moss.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-mustard::before,
#account-avatar-btn.frame-mustard.has-frame::before,
.avatar-crop-deco.frame-mustard.has-frame::before,
.crop-frame-icon-av.frame-mustard.has-frame::before,
.gacha-reward-frame.frame-mustard.has-frame::before,
.unlock-carousel-frame-av.frame-mustard.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-mustard::before {
  background-image: url(/assets/frames/frame-mustard.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-olive::before,
#account-avatar-btn.frame-olive.has-frame::before,
.avatar-crop-deco.frame-olive.has-frame::before,
.crop-frame-icon-av.frame-olive.has-frame::before,
.gacha-reward-frame.frame-olive.has-frame::before,
.unlock-carousel-frame-av.frame-olive.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-olive::before {
  background-image: url(/assets/frames/frame-olive.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-onyx::before,
#account-avatar-btn.frame-onyx.has-frame::before,
.avatar-crop-deco.frame-onyx.has-frame::before,
.crop-frame-icon-av.frame-onyx.has-frame::before,
.gacha-reward-frame.frame-onyx.has-frame::before,
.unlock-carousel-frame-av.frame-onyx.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-onyx::before {
  background-image: url(/assets/frames/frame-onyx.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-parchment::before,
#account-avatar-btn.frame-parchment.has-frame::before,
.avatar-crop-deco.frame-parchment.has-frame::before,
.crop-frame-icon-av.frame-parchment.has-frame::before,
.gacha-reward-frame.frame-parchment.has-frame::before,
.unlock-carousel-frame-av.frame-parchment.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-parchment::before {
  background-image: url(/assets/frames/frame-parchment.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-pearl::before,
#account-avatar-btn.frame-pearl.has-frame::before,
.avatar-crop-deco.frame-pearl.has-frame::before,
.crop-frame-icon-av.frame-pearl.has-frame::before,
.gacha-reward-frame.frame-pearl.has-frame::before,
.unlock-carousel-frame-av.frame-pearl.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-pearl::before {
  background-image: url(/assets/frames/frame-pearl.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-pillar::before,
#account-avatar-btn.frame-pillar.has-frame::before,
.avatar-crop-deco.frame-pillar.has-frame::before,
.crop-frame-icon-av.frame-pillar.has-frame::before,
.gacha-reward-frame.frame-pillar.has-frame::before,
.unlock-carousel-frame-av.frame-pillar.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-pillar::before {
  background-image: url(/assets/frames/frame-pillar.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-quill::before,
#account-avatar-btn.frame-quill.has-frame::before,
.avatar-crop-deco.frame-quill.has-frame::before,
.crop-frame-icon-av.frame-quill.has-frame::before,
.gacha-reward-frame.frame-quill.has-frame::before,
.unlock-carousel-frame-av.frame-quill.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-quill::before {
  background-image: url(/assets/frames/frame-quill.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-ribbon::before,
#account-avatar-btn.frame-ribbon.has-frame::before,
.avatar-crop-deco.frame-ribbon.has-frame::before,
.crop-frame-icon-av.frame-ribbon.has-frame::before,
.gacha-reward-frame.frame-ribbon.has-frame::before,
.unlock-carousel-frame-av.frame-ribbon.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-ribbon::before {
  background-image: url(/assets/frames/frame-ribbon.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-rose-gold::before,
#account-avatar-btn.frame-rose-gold.has-frame::before,
.avatar-crop-deco.frame-rose-gold.has-frame::before,
.crop-frame-icon-av.frame-rose-gold.has-frame::before,
.gacha-reward-frame.frame-rose-gold.has-frame::before,
.unlock-carousel-frame-av.frame-rose-gold.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-rose-gold::before {
  background-image: url(/assets/frames/frame-rose-gold.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-ruby::before,
#account-avatar-btn.frame-ruby.has-frame::before,
.avatar-crop-deco.frame-ruby.has-frame::before,
.crop-frame-icon-av.frame-ruby.has-frame::before,
.gacha-reward-frame.frame-ruby.has-frame::before,
.unlock-carousel-frame-av.frame-ruby.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-ruby::before {
  background-image: url(/assets/frames/frame-ruby.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-sapphire::before,
#account-avatar-btn.frame-sapphire.has-frame::before,
.avatar-crop-deco.frame-sapphire.has-frame::before,
.crop-frame-icon-av.frame-sapphire.has-frame::before,
.gacha-reward-frame.frame-sapphire.has-frame::before,
.unlock-carousel-frame-av.frame-sapphire.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-sapphire::before {
  background-image: url(/assets/frames/frame-sapphire.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-scripture::before,
#account-avatar-btn.frame-scripture.has-frame::before,
.avatar-crop-deco.frame-scripture.has-frame::before,
.crop-frame-icon-av.frame-scripture.has-frame::before,
.gacha-reward-frame.frame-scripture.has-frame::before,
.unlock-carousel-frame-av.frame-scripture.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-scripture::before {
  background-image: url(/assets/frames/frame-scripture.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-scroll::before,
#account-avatar-btn.frame-scroll.has-frame::before,
.avatar-crop-deco.frame-scroll.has-frame::before,
.crop-frame-icon-av.frame-scroll.has-frame::before,
.gacha-reward-frame.frame-scroll.has-frame::before,
.unlock-carousel-frame-av.frame-scroll.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-scroll::before {
  background-image: url(/assets/frames/frame-scroll.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-seafoam::before,
#account-avatar-btn.frame-seafoam.has-frame::before,
.avatar-crop-deco.frame-seafoam.has-frame::before,
.crop-frame-icon-av.frame-seafoam.has-frame::before,
.gacha-reward-frame.frame-seafoam.has-frame::before,
.unlock-carousel-frame-av.frame-seafoam.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-seafoam::before {
  background-image: url(/assets/frames/frame-seafoam.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-silver::before,
#account-avatar-btn.frame-silver.has-frame::before,
.avatar-crop-deco.frame-silver.has-frame::before,
.crop-frame-icon-av.frame-silver.has-frame::before,
.gacha-reward-frame.frame-silver.has-frame::before,
.unlock-carousel-frame-av.frame-silver.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-silver::before {
  background-image: url(/assets/frames/frame-silver.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-staff::before,
#account-avatar-btn.frame-staff.has-frame::before,
.avatar-crop-deco.frame-staff.has-frame::before,
.crop-frame-icon-av.frame-staff.has-frame::before,
.gacha-reward-frame.frame-staff.has-frame::before,
.unlock-carousel-frame-av.frame-staff.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-staff::before {
  background-image: url(/assets/frames/frame-staff.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-stained::before,
#account-avatar-btn.frame-stained.has-frame::before,
.avatar-crop-deco.frame-stained.has-frame::before,
.crop-frame-icon-av.frame-stained.has-frame::before,
.gacha-reward-frame.frame-stained.has-frame::before,
.unlock-carousel-frame-av.frame-stained.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-stained::before {
  background-image: url(/assets/frames/frame-stained.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-starfield::before,
#account-avatar-btn.frame-starfield.has-frame::before,
.avatar-crop-deco.frame-starfield.has-frame::before,
.crop-frame-icon-av.frame-starfield.has-frame::before,
.gacha-reward-frame.frame-starfield.has-frame::before,
.unlock-carousel-frame-av.frame-starfield.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-starfield::before {
  background-image: url(/assets/frames/frame-starfield.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-still::before,
#account-avatar-btn.frame-still.has-frame::before,
.avatar-crop-deco.frame-still.has-frame::before,
.crop-frame-icon-av.frame-still.has-frame::before,
.gacha-reward-frame.frame-still.has-frame::before,
.unlock-carousel-frame-av.frame-still.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-still::before {
  background-image: url(/assets/frames/frame-still.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-stone::before,
#account-avatar-btn.frame-stone.has-frame::before,
.avatar-crop-deco.frame-stone.has-frame::before,
.crop-frame-icon-av.frame-stone.has-frame::before,
.gacha-reward-frame.frame-stone.has-frame::before,
.unlock-carousel-frame-av.frame-stone.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-stone::before {
  background-image: url(/assets/frames/frame-stone.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-topaz::before,
#account-avatar-btn.frame-topaz.has-frame::before,
.avatar-crop-deco.frame-topaz.has-frame::before,
.crop-frame-icon-av.frame-topaz.has-frame::before,
.gacha-reward-frame.frame-topaz.has-frame::before,
.unlock-carousel-frame-av.frame-topaz.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-topaz::before {
  background-image: url(/assets/frames/frame-topaz.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-turquoise::before,
#account-avatar-btn.frame-turquoise.has-frame::before,
.avatar-crop-deco.frame-turquoise.has-frame::before,
.crop-frame-icon-av.frame-turquoise.has-frame::before,
.gacha-reward-frame.frame-turquoise.has-frame::before,
.unlock-carousel-frame-av.frame-turquoise.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-turquoise::before {
  background-image: url(/assets/frames/frame-turquoise.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-vine::before,
#account-avatar-btn.frame-vine.has-frame::before,
.avatar-crop-deco.frame-vine.has-frame::before,
.crop-frame-icon-av.frame-vine.has-frame::before,
.gacha-reward-frame.frame-vine.has-frame::before,
.unlock-carousel-frame-av.frame-vine.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-vine::before {
  background-image: url(/assets/frames/frame-vine.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-wave::before,
#account-avatar-btn.frame-wave.has-frame::before,
.avatar-crop-deco.frame-wave.has-frame::before,
.crop-frame-icon-av.frame-wave.has-frame::before,
.gacha-reward-frame.frame-wave.has-frame::before,
.unlock-carousel-frame-av.frame-wave.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-wave::before {
  background-image: url(/assets/frames/frame-wave.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-wheat::before,
#account-avatar-btn.frame-wheat.has-frame::before,
.avatar-crop-deco.frame-wheat.has-frame::before,
.crop-frame-icon-av.frame-wheat.has-frame::before,
.gacha-reward-frame.frame-wheat.has-frame::before,
.unlock-carousel-frame-av.frame-wheat.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-wheat::before {
  background-image: url(/assets/frames/frame-wheat.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}
.avatar-cosmetic-wrap.has-frame.frame-wool::before,
#account-avatar-btn.frame-wool.has-frame::before,
.avatar-crop-deco.frame-wool.has-frame::before,
.crop-frame-icon-av.frame-wool.has-frame::before,
.gacha-reward-frame.frame-wool.has-frame::before,
.unlock-carousel-frame-av.frame-wool.has-frame::before,
.unlock-studio-avatar-wrap.has-frame.frame-wool::before {
  background-image: url(/assets/frames/frame-wool.png);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Prefer PNG over legacy SVG data-URIs even without .frame-diecut img */

/* ===== b96 You previewer frame diecut sizing (116/145; beats legacy 78px + inset races) ===== */
#unlock-profile-preview .unlock-studio-avatar-wrap {
  --avatar-face: var(--studio-avatar-face, 116px);
  --avatar-frame: var(--studio-avatar-frame, 156px);
  --avatar-aura: var(--studio-avatar-aura, 130px);
  --av: var(--avatar-face);
  width: var(--studio-avatar-face, 116px) !important;
  height: var(--studio-avatar-face, 116px) !important;
  position: relative;
  overflow: visible;
}
#unlock-profile-preview .unlock-studio-avatar-wrap > .unlock-studio-avatar,
#unlock-profile-preview .unlock-studio-avatar {
  width: var(--avatar-face, 116px) !important;
  height: var(--avatar-face, 116px) !important;
}
#unlock-profile-preview .unlock-studio-avatar-wrap > img.frame-diecut {
  width: var(--studio-avatar-frame, 156px) !important;
  height: var(--studio-avatar-frame, 156px) !important;
}
.unlock-carousel-col .unlock-carousel-frame-av {
  width: 56px !important;
  height: 56px !important;
  position: relative;
  overflow: visible;
}
.unlock-carousel-col .unlock-carousel-frame-av > .avatar {
  width: 44px !important;
  height: 44px !important;
  font-size: 14px !important;
}
.unlock-carousel-col .unlock-carousel-frame-av > img.frame-diecut {
  width: 56px !important;
  height: 56px !important;
}

/* === b98 sticker carousel: uniform 48 square (PNG bbox-normalized); no 60px fight; no foil badge === */
#unlock-sticker-carousel .unlock-carousel-item.unlock-sticker-item,
.unlock-carousel-item.unlock-sticker-item {
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box;
  gap: 0 !important;
}
#unlock-sticker-carousel .unlock-sticker-item .sticker-foil-badge,
.unlock-carousel-item.unlock-sticker-item .sticker-foil-badge {
  display: none !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}
#unlock-sticker-carousel .unlock-carousel-sticker-emoji,
.unlock-carousel-item.unlock-sticker-item .unlock-carousel-sticker-emoji,
.unlock-carousel-sticker-emoji {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  position: relative;
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  min-height: 48px !important;
  max-width: 48px !important;
  max-height: 48px !important;
  font-size: 36px !important;
  line-height: 1 !important;
  box-sizing: border-box;
  overflow: visible;
}
#unlock-sticker-carousel .unlock-carousel-sticker-emoji .sticker-diecut,
.unlock-carousel-item.unlock-sticker-item .unlock-carousel-sticker-emoji .sticker-diecut,
.unlock-carousel-sticker-emoji .sticker-diecut,
.unlock-carousel-sticker-emoji img.sticker-diecut {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block;
}
#unlock-sticker-carousel .unlock-carousel-sticker-emoji .sticker-holo-shine,
#unlock-sticker-carousel .unlock-carousel-sticker-emoji .sticker-holo-shine--diecut,
.unlock-carousel-sticker-emoji .sticker-holo-shine,
.unlock-carousel-sticker-emoji .sticker-holo-shine.sticker-holo-shine--diecut {
  inset: 0 !important;
  left: 0 !important;
  top: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  width: 100% !important;
  height: 100% !important;
}
@media (max-width: 380px) {
  #unlock-sticker-carousel .unlock-carousel-sticker-emoji,
  .unlock-carousel-item.unlock-sticker-item .unlock-carousel-sticker-emoji,
  .unlock-carousel-sticker-emoji,
  #unlock-sticker-carousel .unlock-carousel-sticker-emoji .sticker-diecut,
  .unlock-carousel-sticker-emoji .sticker-diecut {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
  }
}


/* === b98 frames clean + tight hug === */
/* Cleaned frame-*.png (fringe/halo kill + tiny ring speckles). Studio ring 156 over face 116
   (was 145) so inner hole barely overlaps PFP rim; narrow 108/144. Still clears 76px carousels
   (not 160/200). Face under diecut z unchanged. */


/* === b98 stickers normalize === */
/* All sticker-*.png: alpha-bbox crop, max-side ~225, centered on 256×256. Cross |offset|<5.
   Carousel uses one uniform 48×48 square; diecut object-fit:contain + object-position:center. */


/* === b99 studio layout: Frames L / Auras R / Stickers under H === */
/* Stage stays 3-col. Right col = Auras (vertical). Stickers = full-width H strip under stage.
   Preview = explicit square sized to --studio-avatar-frame + pad so face+frame fit inside. */

.unlock-studio-stage {
  display: grid !important;
  grid-template-columns: 76px minmax(0, 1fr) 76px !important;
  gap: 8px !important;
  align-items: stretch !important;
  margin: 0 0 8px !important;
}

.unlock-carousel-col,
.unlock-carousel-col--auras {
  width: 76px;
  max-width: 76px;
  height: 310px !important;
  min-height: 310px !important;
  max-height: 310px !important;
  box-sizing: border-box;
}

/* Center preview: square paper sized for frame 156 + padding (~20 each side → 196) */
#unlock-profile-preview.unlock-profile-preview,
.unlock-studio-center #unlock-profile-preview {
  width: calc(var(--studio-avatar-frame, 156px) + 40px) !important;
  height: calc(var(--studio-avatar-frame, 156px) + 40px) !important;
  min-width: calc(var(--studio-avatar-frame, 156px) + 40px) !important;
  min-height: calc(var(--studio-avatar-frame, 156px) + 40px) !important;
  max-width: calc(var(--studio-avatar-frame, 156px) + 40px) !important;
  max-height: calc(var(--studio-avatar-frame, 156px) + 40px) !important;
  aspect-ratio: 1 / 1 !important;
  padding: 12px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: visible !important;
}

.unlock-studio-center {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  min-width: 0 !important;
  min-height: 0 !important;
}

/* Auras right column — vertical scroll/snap like Frames */
#unlock-aura-carousel.unlock-carousel,
.unlock-carousel-auras {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: safe center;
  justify-content: center;
  gap: 8px !important;
  padding: 8px 0 !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  scroll-snap-type: y proximity;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  min-height: 0;
  flex: 1 1 auto;
  border: 0;
  background: transparent;
  scrollbar-width: none;
}
#unlock-aura-carousel.unlock-carousel::-webkit-scrollbar { display: none; }

.unlock-aura-item,
#unlock-aura-carousel .unlock-carousel-item {
  display: flex !important;
  flex-direction: column;
  align-items: center !important;
  justify-content: center;
  width: auto !important;
  max-width: 100%;
  margin: 0 !important;
  padding: 4px !important;
  min-height: 0 !important;
  flex: 0 0 auto;
  scroll-snap-align: center;
  box-sizing: border-box;
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text);
  border-radius: 12px;
  cursor: pointer;
}
.unlock-aura-item.is-selected,
#unlock-aura-carousel .unlock-carousel-item.is-selected {
  border-color: var(--gold, #d4a054);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--gold, #d4a054) 55%, transparent);
}

.unlock-carousel-aura-preview,
#unlock-aura-carousel .unlock-carousel-aura-preview {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50%;
  overflow: visible;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
}

/* Stickers full-width horizontal strip under stage */
.unlock-sticker-strip {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0 0 10px;
  box-sizing: border-box;
  position: relative;
  z-index: 2;
}
.unlock-sticker-strip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.unlock-sticker-strip-head .unlock-carousel-heading {
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  text-align: left;
  font-size: 10px;
  letter-spacing: 0.1em;
  color: rgba(212, 160, 84, 0.85);
}
.unlock-sticker-strip #unlock-studio-sticker-hint,
.unlock-sticker-strip .unlock-studio-sticker-hint {
  position: static;
  margin: 0;
  flex: 1 1 auto;
  text-align: right;
}

#unlock-sticker-carousel.unlock-carousel-stickers--h,
.unlock-carousel-stickers--h {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 8px 6px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scroll-snap-type: x proximity;
  -webkit-overflow-scrolling: touch;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  height: auto !important;
  min-height: 64px !important;
  max-height: none !important;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.1);
  box-sizing: border-box;
  scrollbar-width: thin;
}
#unlock-sticker-carousel.unlock-carousel-stickers--h .unlock-carousel-item,
.unlock-carousel-stickers--h .unlock-carousel-item,
.unlock-carousel-stickers--h .unlock-sticker-item {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 56px !important;
  scroll-snap-align: center;
  margin: 0 !important;
}

/* Kill old under-stage aura slot / horizontal chip strip (slot removed) */
.unlock-aura-slot,
.unlock-aura-row-in-studio,
.unlock-aura-carousel:not(#unlock-aura-carousel) {
  /* legacy selectors no-op when absent */
}

@media (max-width: 380px) {
  .unlock-studio-stage {
    grid-template-columns: 72px minmax(0, 1fr) 72px !important;
  }
  .unlock-carousel-col,
  .unlock-carousel-col--auras {
    width: 72px;
    max-width: 72px;
    height: 280px !important;
    min-height: 280px !important;
    max-height: 280px !important;
  }
  #unlock-profile-preview.unlock-profile-preview,
  .unlock-studio-center #unlock-profile-preview {
    width: calc(var(--studio-avatar-frame, 144px) + 36px) !important;
    height: calc(var(--studio-avatar-frame, 144px) + 36px) !important;
    min-width: calc(var(--studio-avatar-frame, 144px) + 36px) !important;
    min-height: calc(var(--studio-avatar-frame, 144px) + 36px) !important;
    max-width: calc(var(--studio-avatar-frame, 144px) + 36px) !important;
    max-height: calc(var(--studio-avatar-frame, 144px) + 36px) !important;
  }
}


/* === b100 sticker-drag + diecut-no-glow + frame-card-hug + frame-regen === */

/* Horizontal sticker strip: allow pan-x browse; JS claims touch-action:none only after drag threshold */
#unlock-sticker-carousel.unlock-carousel-stickers--h,
.unlock-carousel-stickers--h {
  touch-action: pan-x !important;
  -webkit-overflow-scrolling: touch;
}
#unlock-sticker-carousel.unlock-carousel-stickers--h .unlock-carousel-item.unlock-sticker-item,
.unlock-carousel-stickers--h .unlock-carousel-item.unlock-sticker-item,
.unlock-carousel-stickers--h .unlock-sticker-item {
  touch-action: pan-x !important;
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
#unlock-sticker-carousel.unlock-carousel-stickers--h.is-sticker-dragging,
.unlock-carousel-stickers--h.is-sticker-dragging {
  touch-action: none !important;
  overflow-x: hidden !important;
}
#unlock-sticker-carousel.unlock-carousel-stickers--h .unlock-sticker-item.is-dragging,
.unlock-carousel-stickers--h .unlock-sticker-item.is-dragging {
  touch-action: none !important;
  cursor: grabbing;
}

/*
 * Die-cut everywhere: kill shop51 / leftover white-black drop-shadow bevels & soft glow.
 * PNG white outline IS the border. Holofoil shine overlay stays (shape-masked).
 */
.unlock-studio-sticker,
.unlock-studio-sticker-emoji,
.unlock-studio-sticker-emoji .sticker-diecut,
.unlock-profile-preview .unlock-studio-sticker,
.unlock-profile-preview .unlock-studio-sticker-emoji,
.unlock-profile-preview .avatar-sticker,
.unlock-profile-preview .sticker-diecut,
.unlock-studio-avatar-wrap > .unlock-studio-sticker,
.unlock-studio-avatar-wrap > .avatar-sticker,
.avatar-cosmetic-wrap .avatar-sticker,
.avatar-cosmetic-wrap .sticker-diecut,
.avatar-sticker-host .avatar-sticker,
.avatar-sticker,
.avatar-sticker .sticker-diecut,
.account-avatar-btn .avatar-sticker,
.card .avatar-sticker,
.comment .avatar-sticker,
.crop-stage-sticker,
.crop-stage-sticker-emoji,
.crop-stage-sticker-emoji .sticker-diecut,
.crop-sticker-tray-btn,
.crop-sticker-tray-btn .sticker-diecut,
.unlock-carousel-item.unlock-sticker-item .unlock-carousel-sticker-emoji,
.unlock-carousel-sticker-emoji,
.unlock-carousel-sticker-emoji .sticker-diecut,
.card-sticker-chip-emoji,
.card-sticker-chip-emoji .sticker-diecut,
.gacha-reward-preview.gacha-reward-sticker,
.gacha-reward-sticker .sticker-diecut,
.shop-item-preview.sticker,
.shop-item-preview.sticker.unlock-sticker-preview,
.shop-item.is-art-hero .shop-art-hero .shop-item-preview.sticker,
.unlock-sticker-preview,
.unlock-reward-chip.sticker-chip,
.unlock-card.is-art-hero .unlock-art-hero .unlock-sticker-preview,
.unlock-card.is-art-hero .unlock-art-hero .unlock-reward-chip.sticker-chip,
.unlock-card.reward-sticker .unlock-sticker-preview,
.stickers-book-item .unlock-studio-sticker-emoji,
.stickers-book-item .sticker-diecut,
.stickers-book-pick .sticker-diecut,
img.sticker-diecut {
  filter: none !important;
  -webkit-filter: none !important;
  box-shadow: none !important;
}
.unlock-studio-sticker.is-holofoil .unlock-studio-sticker-emoji,
.crop-stage-sticker-emoji.is-holofoil,
.avatar-sticker.is-holofoil,
.unlock-carousel-sticker-emoji.is-holofoil,
.unlock-sticker-preview.is-holofoil,
.shop-item-preview.sticker.is-holofoil {
  filter: none !important;
  -webkit-filter: none !important;
}
/* Ghost: neutral lift only */
.studio-sticker-drag-ghost {
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.25)) !important;
}

/*
 * Unlockable/Shop frame card previews: same barely-overlap ratio as studio (156/116 ≈ 1.345).
 * face 128 → frame 172. Diecut z above face; no gold halo wash; opaque ring on dark pad.
 */
.unlock-card.is-art-hero.reward-frame .unlock-art-hero .avatar-cosmetic-wrap.pfp-stack,
.unlock-card.is-art-hero.reward-frame .unlock-art-hero .unlock-frame-mini,
.shop-item.is-art-hero.shop-item-frame .shop-art-hero .avatar-cosmetic-wrap.pfp-stack,
.shop-item.is-art-hero.shop-item-frame .shop-art-hero .unlock-frame-mini {
  --avatar-face: 128px;
  --avatar-frame: 172px;
  --avatar-aura: 144px;
  --av: var(--avatar-face);
  width: var(--avatar-face) !important;
  height: var(--avatar-face) !important;
  min-width: var(--avatar-face) !important;
  min-height: var(--avatar-face) !important;
  overflow: visible !important;
  background: transparent !important;
}
.unlock-card.is-art-hero.reward-frame .unlock-art-hero .unlock-frame-mini > .avatar,
.unlock-card.is-art-hero.reward-frame .unlock-art-hero .avatar-cosmetic-wrap.pfp-stack > .avatar,
.shop-item.is-art-hero.shop-item-frame .shop-art-hero .unlock-frame-mini > .avatar,
.shop-item.is-art-hero.shop-item-frame .shop-art-hero .avatar-cosmetic-wrap.pfp-stack > .avatar {
  width: var(--avatar-face) !important;
  height: var(--avatar-face) !important;
  z-index: 0 !important;
  box-shadow: none !important;
  /* Solid face disc so light ring PNGs don't wash through card bg in the hollow */
  background-color: #2a241c !important;
}
.unlock-frame-mini > img.frame-diecut,
.avatar-cosmetic-wrap.unlock-frame-mini > img.frame-diecut,
.pfp-stack.unlock-frame-mini > img.frame-diecut,
.unlock-card.is-art-hero.reward-frame .unlock-art-hero .unlock-frame-mini > img.frame-diecut,
.shop-item.is-art-hero.shop-item-frame .shop-art-hero .unlock-frame-mini > img.frame-diecut {
  width: var(--avatar-frame, 172px) !important;
  height: var(--avatar-frame, 172px) !important;
  z-index: 3 !important;
  filter: none !important;
  -webkit-filter: none !important;
}
.unlock-card.is-art-hero.reward-frame .unlock-art-hero .avatar-cosmetic-wrap.has-frame::before,
.shop-item.is-art-hero.shop-item-frame .shop-art-hero .avatar-cosmetic-wrap.has-frame::before {
  inset: calc((var(--avatar-face) - var(--avatar-frame)) / 2) !important;
  box-shadow: none !important;
  opacity: 0 !important;
  background: none !important;
}
.unlock-card.is-art-hero.reward-frame .unlock-art-hero .unlock-frame-preview,
.unlock-card.is-art-hero.reward-frame .unlock-art-hero .unlock-reward-chip.frame-chip,
.shop-item.is-art-hero.shop-item-frame .shop-art-hero .shop-item-preview.frame,
.shop-item.is-art-hero.shop-item-frame .shop-art-hero .shop-item-preview.frame.unlock-frame-preview {
  filter: none !important;
  background: transparent !important;
}
/* Hard-lock card tokens (override earlier 160 face/frame locks) */
.unlock-card.is-art-hero.reward-frame .unlock-art-hero .avatar-cosmetic-wrap.pfp-stack,
.unlock-card.is-art-hero.reward-frame .unlock-art-hero .unlock-frame-mini,
.shop-item.is-art-hero.shop-item-frame .shop-art-hero .avatar-cosmetic-wrap.pfp-stack,
.shop-item.is-art-hero.shop-item-frame .shop-art-hero .unlock-frame-mini {
  --avatar-face: 128px !important;
  --avatar-frame: 172px !important;
}