/* Avatar frames (Profile COSMETICS.frame): Gemini-made art in assets/ui/frames/ (tools/make_frames.py).
   Put `fr fr-<id>` on any round avatar element. ::before = the frame image (--frk = frame size / avatar size),
   ::after = a light sweep masked to the frame, plus a soft glow on premium frames. */
.fr { position: relative; isolation: isolate; }
.fr::before, .fr::after { content: ''; position: absolute; inset: calc((var(--frk, 1.3) - 1) * -50%); pointer-events: none; z-index: 1; }
.fr::before { background: var(--frimg) center / contain no-repeat; }
.fr::after {
  background: linear-gradient(115deg, transparent 38%, rgba(255, 255, 255, 0.85) 50%, transparent 62%) 0 0 / 300% 100%;
  -webkit-mask: var(--frimg) center / contain no-repeat; mask: var(--frimg) center / contain no-repeat;
  mix-blend-mode: soft-light; animation: fr-shine 3.2s ease-in-out infinite; display: none;
}
.fr-plain::before, .fr-plain::after { display: none; }
.fr.prem::after, .fr-gold::after, .fr-frost::after, .fr-shadow::after, .fr-prism::after, .fr-sakura::after, .fr-flame::after, .fr-thunder::after, .fr-crown::after, .fr-cosmic::after { display: block; }
.fr-gold::before, .fr-crown::before { filter: drop-shadow(0 0 4px rgba(255, 200, 60, 0.7)); }
.fr-flame::before { animation: fr-burn 0.9s ease-in-out infinite alternate; }
.fr-thunder::before { animation: fr-zap 2.2s linear infinite; }
.fr-shadow::before { animation: fr-aura 2s ease-in-out infinite; }
.fr-cosmic::before, .fr-prism::before { animation: fr-hue 6s ease-in-out infinite; }
.fr-sakura::before, .fr-frost::before { animation: fr-float 3s ease-in-out infinite; }
@keyframes fr-shine { 0% { background-position: 120% 0; } 60%, 100% { background-position: -20% 0; } }
@keyframes fr-burn { from { filter: drop-shadow(0 0 3px rgba(255, 90, 20, 0.7)) brightness(1); } to { filter: drop-shadow(0 0 9px rgba(255, 140, 30, 0.95)) brightness(1.12); } }
@keyframes fr-zap { 0%, 44%, 52%, 100% { filter: drop-shadow(0 0 2px rgba(90, 150, 255, 0.6)); } 46%, 50% { filter: drop-shadow(0 0 10px rgba(255, 240, 90, 1)) brightness(1.3); } }
@keyframes fr-aura { 0%, 100% { filter: drop-shadow(0 0 3px rgba(140, 60, 230, 0.6)); } 50% { filter: drop-shadow(0 0 10px rgba(160, 80, 255, 0.95)); } }
@keyframes fr-hue { 0%, 100% { filter: drop-shadow(0 0 4px rgba(150, 120, 255, 0.6)) hue-rotate(0deg); } 50% { filter: drop-shadow(0 0 8px rgba(255, 120, 220, 0.8)) hue-rotate(25deg); } }
@keyframes fr-float { 0%, 100% { filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.6)); transform: translateY(0); } 50% { filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.9)); transform: translateY(-2%); } }
@media (prefers-reduced-motion: reduce) { .fr::before, .fr::after { animation: none !important; } }

/* sizes (generated by tools/make_frames.py) */
.fr-berry { --frk: 1.457; --frimg: url("../assets/ui/frames/berry.webp"); }
.fr-cosmic { --frk: 1.431; --frimg: url("../assets/ui/frames/cosmic.webp"); }
.fr-crown { --frk: 2.322; --frimg: url("../assets/ui/frames/crown.webp"); }
.fr-flame { --frk: 1.660; --frimg: url("../assets/ui/frames/flame.webp"); }
.fr-frost { --frk: 1.818; --frimg: url("../assets/ui/frames/frost.webp"); }
.fr-gold { --frk: 1.960; --frimg: url("../assets/ui/frames/gold.webp"); }
.fr-leaf { --frk: 1.356; --frimg: url("../assets/ui/frames/leaf.webp"); }
.fr-prism { --frk: 1.748; --frimg: url("../assets/ui/frames/prism.webp"); }
.fr-sakura { --frk: 2.001; --frimg: url("../assets/ui/frames/sakura.webp"); }
.fr-shadow { --frk: 1.880; --frimg: url("../assets/ui/frames/shadow.webp"); }
.fr-sky { --frk: 1.424; --frimg: url("../assets/ui/frames/sky.webp"); }
.fr-thunder { --frk: 1.911; --frimg: url("../assets/ui/frames/thunder.webp"); }

/* profile sheet: frame + premium avatar pickers */
.fr-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 17), 1fr)); gap: calc(var(--u) * 3); padding: calc(var(--u) * 2) calc(var(--u) * 1); }
.fr-tile { display: grid; justify-items: center; gap: calc(var(--u) * 3); background: none; border: 0; padding: calc(var(--u) * 3.6) 0 calc(var(--u) * 1.4); border-radius: calc(var(--u) * 2.4); font: inherit; color: var(--ink, #23314d); cursor: pointer; }
.fr-face { width: calc(var(--u) * 10); aspect-ratio: 1; border-radius: 50%; background-size: 280%; background-position: 50% 24%; background-color: #fff; box-shadow: 0 0 0 calc(var(--u) * 0.5) #fff; }
.fr-tile small { font-size: calc(var(--u) * 2.1); font-weight: 800; line-height: 1.1; text-align: center; }
.fr-tile em { font-style: normal; font-size: calc(var(--u) * 1.8); opacity: 0.7; text-align: center; line-height: 1.15; }
.fr-tile.on { background: rgba(79, 124, 255, 0.12); box-shadow: inset 0 0 0 2px var(--accent, #4f7cff); }
.fr-tile.lock .fr-face { opacity: 0.85; }
.fr-tile.lock small::before { content: '🔒 '; }
.fr-tile.prem small { color: #b86a12; }
.av-prem { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 15), 1fr)); gap: calc(var(--u) * 2); padding: calc(var(--u) * 1); }

/* Daily Market (Shop › Market) */
.mk-head { display: flex; align-items: center; gap: calc(var(--u) * 2.4); padding: calc(var(--u) * 2.6) calc(var(--u) * 3); margin-bottom: calc(var(--u) * 2.6); border-radius: calc(var(--u) * 4); color: #fff;
  background: linear-gradient(120deg, #ff7a3c, #ff4f7a 55%, #8a5cff); box-shadow: 0 6px 16px rgba(255, 80, 110, 0.3); }
.mk-head > div:first-child { flex: 1; display: grid; }
.mk-head b { font-size: calc(var(--u) * 3.6); font-weight: 900; }
.mk-head small { font-size: calc(var(--u) * 2.2); opacity: 0.92; }
.mk-time { display: grid; text-align: right; }
.mk-time b { font-size: calc(var(--u) * 3.2); font-variant-numeric: tabular-nums; }
.mk-head .price3 i { font-style: normal; font-weight: 900; }
.mk-norefresh { font-size: calc(var(--u) * 2.2); font-weight: 800; opacity: 0.85; }
.mk-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(var(--u) * 2.4); }
.mk3 { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.6); padding: calc(var(--u) * 3.4) calc(var(--u) * 2) calc(var(--u) * 2.4);
  border-radius: calc(var(--u) * 4); text-align: center; background: #fff; box-shadow: 0 4px 12px rgba(30, 40, 80, 0.12); animation: pop 0.45s calc(var(--i) * 0.05s) cubic-bezier(.3,1.6,.5,1) both; }
.mk3.hot { background: linear-gradient(170deg, #fff6d6, #fff 60%); box-shadow: 0 0 0 3px #ffc83d, 0 6px 16px rgba(255, 170, 40, 0.35); }
.mk3.sold { filter: grayscale(0.8); opacity: 0.6; }
.mk-off { position: absolute; top: calc(var(--u) * 1.4); right: calc(var(--u) * 1.4); padding: 1px calc(var(--u) * 1.6); border-radius: 99px; background: #ff3b5c; color: #fff; font-weight: 900; font-size: calc(var(--u) * 2.3); }
.mk-hot { position: absolute; top: calc(var(--u) * 1.4); left: calc(var(--u) * 1.4); padding: 1px calc(var(--u) * 1.4); border-radius: 99px; background: #ffc83d; color: #6b3a00; font-weight: 900; font-size: calc(var(--u) * 1.9); animation: pulse 1.4s infinite; }
.mk-art { position: relative; height: calc(var(--u) * 15); display: grid; place-items: center; }
.mk-art img { height: calc(var(--u) * 15); width: auto; max-width: calc(var(--u) * 18); object-fit: contain; filter: drop-shadow(0 5px 7px rgba(0, 0, 0, 0.2)); }
.mk-art.wide img { border-radius: calc(var(--u) * 1); }
.mk-art i { position: absolute; right: calc(var(--u) * -1.6); bottom: 0; font-style: normal; font-size: calc(var(--u) * 2.4); font-weight: 900; color: #fff; background: #23314d; padding: 0 calc(var(--u) * 1.4); border-radius: 99px; box-shadow: 0 0 0 2px #fff; }
.mk3 > b { font-size: calc(var(--u) * 2.6); font-weight: 900; line-height: 1.15; min-height: 2.3em; display: grid; place-items: center; }
.mk3 > s { display: inline-flex; align-items: center; gap: 3px; min-height: 1.2em; font-size: calc(var(--u) * 2.1); font-weight: 800; color: #9aa3b5; }
.mk3 > s img { width: calc(var(--u) * 2.4); }
.mk3 .price3 { width: 100%; }
.mk-sold { font-weight: 900; font-size: calc(var(--u) * 2.4); color: #8a93a6; padding: calc(var(--u) * 1.4) 0; }
.mk-sub { font-style: normal; font-size: calc(var(--u) * 1.9); color: var(--ink-2, #6b7690); line-height: 1.25; margin-top: calc(var(--u) * -0.4); }

/* sale flair shared by the Daily Market and the NPC card Market: light sweep, wobbling discount tag */
.mk3::after, .nm3::after { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background: linear-gradient(110deg, transparent 35%, rgba(255, 255, 255, 0.55) 50%, transparent 65%) 0 0 / 260% 100%; animation: sale-sweep 4.5s calc(var(--i) * 0.35s) ease-in-out infinite; }
.mk3.sold::after, .nm3.sold::after { display: none; }
.mk-off, .nm-off { animation: sale-wobble 2.4s calc(var(--i) * 0.2s) ease-in-out infinite; transform-origin: 70% 30%; }
@keyframes sale-sweep { 0% { background-position: 130% 0; } 45%, 100% { background-position: -30% 0; } }
@keyframes sale-wobble { 0%, 70%, 100% { transform: rotate(0) scale(1); } 76% { transform: rotate(-8deg) scale(1.12); } 84% { transform: rotate(6deg) scale(1.08); } 92% { transform: rotate(-3deg); } }

/* NPC card Market (left nav › Market): flash-sale shelf */
.nm-banner { position: relative; overflow: hidden; display: flex; align-items: center; gap: calc(var(--u) * 2.6); padding: calc(var(--u) * 2.6) calc(var(--u) * 3.4); margin: calc(var(--u) * 1) 0 calc(var(--u) * 3);
  border-radius: calc(var(--u) * 4); color: #fff; background: linear-gradient(115deg, #ff3b5c, #ff8a1f 45%, #ffc83d); box-shadow: 0 8px 22px rgba(255, 90, 60, 0.35); }
.nm-banner::before { content: ''; position: absolute; inset: 0; background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.08) 0 14px, transparent 14px 28px); animation: nm-stripes 1.6s linear infinite; }
.nm-banner > * { position: relative; }
.nm-bolt { font-size: calc(var(--u) * 6); animation: pulse 1.2s infinite; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25)); }
.nm-banner > div:nth-child(2) { flex: 1; display: grid; }
.nm-banner b { font-size: calc(var(--u) * 4.4); font-weight: 900; letter-spacing: 0.02em; text-shadow: 0 2px 0 rgba(150, 30, 0, 0.35); }
.nm-banner small { font-size: calc(var(--u) * 2.3); opacity: 0.95; }
.nm-time { display: grid; text-align: right; padding: calc(var(--u) * 1) calc(var(--u) * 2.4); border-radius: calc(var(--u) * 2.4); background: rgba(80, 10, 0, 0.25); }
.nm-time b { font-size: calc(var(--u) * 3.4); font-variant-numeric: tabular-nums; }
.nm-banner .pill { background: #fff; color: #e2442b; }
@keyframes nm-stripes { to { background-position: 40px 0; } }
.nm-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(calc(var(--u) * 30), 1fr)); gap: calc(var(--u) * 2.6); margin-bottom: calc(var(--u) * 4); }
.nm3 { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: calc(var(--u) * 0.6); padding: calc(var(--u) * 3.6) calc(var(--u) * 2) calc(var(--u) * 2.4);
  border-radius: calc(var(--u) * 4); background: #fff; text-align: center; box-shadow: 0 4px 14px rgba(30, 40, 80, 0.1); animation: pop 0.45s calc(var(--i) * 0.05s) cubic-bezier(.3,1.6,.5,1) both; }
.nm3.r4 { background: linear-gradient(170deg, #eef4ff, #fff 55%); }
.nm3.r5, .nm3.r6 { background: linear-gradient(170deg, #fff1fb, #f4efff 45%, #fff); box-shadow: 0 0 0 2px #d9b8ff, 0 6px 16px rgba(150, 90, 255, 0.25); }
.nm3.hot { background: linear-gradient(170deg, #fff4cf, #fff 60%); box-shadow: 0 0 0 3px #ffc83d, 0 8px 22px rgba(255, 170, 40, 0.45); animation: pop 0.45s both, nm-hot 2s 0.5s ease-in-out infinite; }
@keyframes nm-hot { 0%, 100% { box-shadow: 0 0 0 3px #ffc83d, 0 8px 22px rgba(255, 170, 40, 0.4); } 50% { box-shadow: 0 0 0 3px #ffb21f, 0 8px 30px rgba(255, 140, 20, 0.7); } }
.nm3.sold { filter: grayscale(0.7); opacity: 0.65; }
.nm-hot { position: absolute; top: calc(var(--u) * 1.4); left: calc(var(--u) * 1.4); z-index: 2; padding: 2px calc(var(--u) * 1.6); border-radius: 99px; background: linear-gradient(90deg, #ff3b1f, #ff8a1f); color: #fff; font-weight: 900; font-size: calc(var(--u) * 2); }
.nm-off { position: absolute; top: calc(var(--u) * 1.4); right: calc(var(--u) * 1.4); z-index: 2; padding: 2px calc(var(--u) * 1.6); border-radius: 99px; background: #ff3b5c; color: #fff; font-weight: 900; font-size: calc(var(--u) * 2.5); box-shadow: 0 3px 8px rgba(255, 40, 80, 0.4); }
.nm-art { position: relative; margin: calc(var(--u) * 1.6) 0 calc(var(--u) * 1); }
.nm-art img { height: calc(var(--u) * 24); aspect-ratio: 0.716; border-radius: 4.5% / 3.2%; box-shadow: 0 6px 14px rgba(30, 40, 80, 0.25); transform: rotate(-3deg); transition: transform 0.25s; }
.nm3:hover .nm-art img { transform: rotate(0) scale(1.05); }
.nm-new { position: absolute; left: calc(var(--u) * -1.4); bottom: calc(var(--u) * 1.6); font-style: normal; font-weight: 900; font-size: calc(var(--u) * 1.9); color: #fff; background: #2f9e5a; padding: 1px calc(var(--u) * 1.4); border-radius: 99px; box-shadow: 0 0 0 2px #fff; }
.nm-stamp { position: absolute; inset: 35% -10% auto; text-align: center; font-style: normal; font-weight: 900; font-size: calc(var(--u) * 3.6); color: #e2442b; border: 3px solid #e2442b; border-radius: 8px; transform: rotate(-14deg); background: rgba(255, 255, 255, 0.85); }
.nm3 > b { font-size: calc(var(--u) * 2.8); font-weight: 900; line-height: 1.15; }
.nm3 > small { font-size: calc(var(--u) * 2.1); color: var(--ink-2, #6b7690); }
.nm3 > s { display: inline-flex; align-items: center; gap: 3px; font-size: calc(var(--u) * 2.2); font-weight: 800; color: #9aa3b5; }
.nm3 > s img { width: calc(var(--u) * 2.6); }
.nm3 .price3 { width: 100%; margin-top: calc(var(--u) * 0.6); }

/* Same outer size for every frame: a frame with big ornaments (high --frk) shrinks the avatar inside it instead. */
.fr-face.fr { scale: calc(1.6 / var(--frk, 1.6)); }
.topbar .avatar.fr { scale: calc(1.3 / var(--frk, 1.3)); }
.topbar .me:has(.avatar.fr:not(.fr-plain)) .me-text { margin-left: calc(var(--u) * 1.8); }
.lv-face.fr { scale: calc(1.25 / var(--frk, 1.25)); }
/* breathing room: art never touches the name under it */
.mk-art { margin-bottom: calc(var(--u) * 1.6); }
.mk-art i { bottom: calc(var(--u) * -0.4); }
.mk3 > b { margin-top: calc(var(--u) * 0.6); }
.nm3 > b { margin-top: calc(var(--u) * 0.4); }
.cos3-art:has(.fr-face) { overflow: visible; height: calc(var(--u) * 21); }

/* hero slide whose art is a card (World Boss): blurred colour field + the whole card, tilted, on the right */
.hero-bg.blur { filter: blur(28px) brightness(0.55) saturate(1.3); transform: scale(1.2); }
.hero-card { position: absolute; right: 15%; top: 50%; height: 84%; aspect-ratio: 0.716; border-radius: 4.5% / 3.2%; transform: translateY(-50%) rotate(5deg);
  box-shadow: 0 0 0 4px rgba(255, 255, 255, 0.9), 0 18px 40px rgba(0, 0, 0, 0.5), 0 0 60px rgba(255, 120, 200, 0.45); animation: hero-card-float 4s ease-in-out infinite; z-index: 1; }
@keyframes hero-card-float { 0%, 100% { transform: translateY(-50%) rotate(5deg); } 50% { transform: translateY(-53%) rotate(3deg); } }
/* full-art hero slides: the picture sits on the right, its left edge melts into a blurred copy under the text */
.hero-bg.art { left: 30%; background-position: center 38%;
  -webkit-mask: linear-gradient(90deg, transparent, #000 28%); mask: linear-gradient(90deg, transparent, #000 28%); }
.hero-bg.art::after { background: linear-gradient(0deg, rgba(18, 26, 60, 0.45), transparent 45%); }