/* ============ DM Tavern — uploads, animated cards, animated titles, shop ============ */
@property --ang { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@keyframes angSpin { to { --ang: 360deg; } }

/* ---------- uploaded pictures ---------- */
.av-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.av:has(.av-img) { background: #111; }
.upload-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.upload-btn { cursor: pointer; }
.upload-btn.busy-btn { opacity: .6; pointer-events: none; }
.custom-banner { background-size: cover; background-position: center; }
.custom-banner.empty { display: grid; place-items: center; background: repeating-linear-gradient(45deg, #1d1a1c 0 8px, #232022 8px 16px); }
.custom-banner.empty span { font-size: 11px; color: var(--dim); }

/* ---------- animated profile cards ---------- */
.pcard > .pbanner, .pcard > .pcard-body { position: relative; z-index: 1; }
.card-fx { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.mini-card { position: relative; width: 100%; height: 58px; border-radius: 6px; overflow: hidden; background: var(--surface); border: 1px solid var(--border); }
.mini-card > span { position: absolute; left: 12px; right: 30%; bottom: 12px; height: 6px; border-radius: 3px; background: var(--surface-3); }
/* Gilded edge: light runs around the border */
.card-gilded::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 2px; z-index: 3; pointer-events: none;
  background: conic-gradient(from var(--ang), #6b4a1c, #c9a45c 10%, #fff6d8 16%, #c9a45c 22%, #6b4a1c 34%, #6b4a1c);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: angSpin 4s linear infinite; }
/* Runebound: a ring of runes turns behind the avatar */
.card-runebound .card-fx i { position: absolute; left: 50%; top: 120px; width: 200px; height: 200px; margin: -100px 0 0 -100px; border-radius: 50%; border: 1px dashed rgba(201,164,92,.45);
  color: rgba(227,200,143,.55); font-style: normal; font-size: 13px; letter-spacing: 6px; display: grid; place-items: center; text-align: center; padding: 26px; line-height: 2.2;
  box-shadow: 0 0 30px rgba(201,164,92,.12) inset; animation: spin 30s linear infinite; }
.mini-card.card-runebound .card-fx i { top: 29px; width: 70px; height: 70px; margin: -35px 0 0 -35px; font-size: 6px; letter-spacing: 2px; padding: 8px; line-height: 1.6; }
.card-runebound { border-color: rgba(201,164,92,.4); }
/* Frosted glass */
.card-frost { border-color: rgba(159,212,255,.45); box-shadow: inset 0 0 30px rgba(159,212,255,.12); }
.card-frost::after { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; border-radius: inherit;
  background: linear-gradient(115deg, transparent 35%, rgba(220,240,255,.18) 45%, transparent 55%); background-size: 250% 100%; animation: frostSweep 5s ease-in-out infinite; }
@keyframes frostSweep { 0% { background-position: 120% 0; } 60%, 100% { background-position: -120% 0; } }
/* Holographic foil: tilts to the mouse with a rainbow sheen */
.pcard.card-holo { transform: perspective(900px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); transition: transform .15s ease-out; border-color: rgba(200,190,255,.45); }
.card-holo .card-fx { z-index: 3; }
.card-holo .card-fx i { position: absolute; inset: 0; mix-blend-mode: color-dodge; opacity: .55;
  background: radial-gradient(circle at var(--mx, 30%) var(--my, 20%), rgba(255,255,255,.45), transparent 40%),
    linear-gradient(115deg, rgba(255,0,128,.25), rgba(255,200,0,.22), rgba(0,255,170,.22), rgba(0,140,255,.25), rgba(200,0,255,.25));
  background-size: 100% 100%, 300% 300%; animation: holoShift 6s linear infinite; }
@keyframes holoShift { to { background-position: 0 0, 300% 300%; } }
/* Ember storm */
.card-embers { border-color: rgba(224,112,58,.45); }
.card-embers .card-fx { z-index: 2; }
.card-embers .card-fx::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; background: linear-gradient(transparent, rgba(180,50,20,.25)); }
.card-embers .card-fx i { position: absolute; bottom: -6px; left: calc(var(--i) * 7.2% + 2%); width: 4px; height: 4px; border-radius: 50%; background: #ffb02e; box-shadow: 0 0 6px 2px rgba(255,106,31,.75);
  animation: cardEmber calc(3s + var(--i) * .17s) linear calc(var(--i) * -.37s) infinite; }
@keyframes cardEmber { 0% { transform: translate(0, 0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate(calc((var(--i) - 7) * 3px), -420px); opacity: 0; } }
/* Starlit night */
.card-starlit { background: radial-gradient(ellipse at 50% 120%, #1e1838, var(--surface) 70%); border-color: rgba(199,178,255,.35); }
.card-starlit .card-fx i { position: absolute; inset: 0; background-image: radial-gradient(1.5px 1.5px at 10% 20%, #fff, transparent), radial-gradient(1px 1px at 35% 70%, #ffd98a, transparent),
  radial-gradient(1.5px 1.5px at 60% 35%, #fff, transparent), radial-gradient(1px 1px at 85% 80%, #c7b2ff, transparent), radial-gradient(1px 1px at 75% 10%, #fff, transparent);
  background-size: 180px 160px; animation: starDrift 20s linear infinite; opacity: .8; }
.card-starlit .card-fx i:nth-child(2) { background-size: 120px 110px; animation-duration: 12s; opacity: .5; }
.card-starlit .card-fx b { position: absolute; top: 15%; left: 110%; width: 80px; height: 1.5px; background: linear-gradient(90deg, #fff, transparent); transform: rotate(-25deg); animation: cardShoot 7s ease-in 2s infinite; }
@keyframes cardShoot { 0% { left: 110%; top: 10%; opacity: 1; } 12% { left: -30%; top: 45%; opacity: 0; } 100% { left: -30%; opacity: 0; } }
/* Shadow veil */
.card-veil { border-color: rgba(140,130,160,.35); }
.card-veil .card-fx i { position: absolute; bottom: -60px; width: 220px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(90,80,110,.55), transparent 65%); filter: blur(14px);
  animation: smoke 9s ease-in-out infinite; }
.card-veil .card-fx i:nth-child(1) { left: -40px; } .card-veil .card-fx i:nth-child(2) { left: 30%; animation-delay: -3s; } .card-veil .card-fx i:nth-child(3) { right: -50px; animation-delay: -6s; }
@keyframes smoke { 0% { transform: translateY(40px) scale(.8); opacity: 0; } 40% { opacity: .9; } 100% { transform: translateY(-260px) scale(1.4); opacity: 0; } }
/* entrance when a card opens */
.pcard.reveal:not(.card-plain) { animation: cardReveal .6s cubic-bezier(.2,.8,.2,1); }
@keyframes cardReveal { from { transform: perspective(900px) rotateY(80deg) scale(.9); opacity: 0; } }

/* ---------- animated titles ---------- */
.ptitle.sample { font-size: 15px; text-align: center; padding: 8px 2px; }
.tfx-gilded { background: linear-gradient(90deg, #a07a3c, #ffe9b0, #c9a45c, #fff6d8, #a07a3c); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: shimmer 4s linear infinite; }
.tfx-ember { color: #ffb070 !important; animation: emberText 2.2s ease-in-out infinite; }
@keyframes emberText { 0%, 100% { text-shadow: 0 0 6px rgba(255,106,31,.6); } 45% { text-shadow: 0 0 14px rgba(255,140,40,.95), 0 0 2px #fff3c4; } 60% { text-shadow: 0 0 4px rgba(255,106,31,.4); } }
.tfx-frost { background: linear-gradient(90deg, #9fd4ff, #ffffff, #bfe6ff, #7ab8e8, #9fd4ff); background-size: 250% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: shimmer 5s linear infinite; filter: drop-shadow(0 0 4px rgba(159,212,255,.5)); }
.tfx-runes { color: #c9a45c !important; }
.tfx-runes span { display: inline-block; animation: runeLetter 2.6s ease-in-out calc(var(--i) * .11s) infinite; }
@keyframes runeLetter { 0%, 70%, 100% { color: #c9a45c; text-shadow: none; transform: none; } 15% { color: #fff6d8; text-shadow: 0 0 10px #ffd98a, 0 0 2px #fff; transform: translateY(-2px); } }
.tfx-prism { background: linear-gradient(90deg, #ff6a8a, #ffd24a, #6aff9a, #6ad2ff, #b06aff, #ff6a8a); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent !important; animation: shimmer 3s linear infinite; }
.tfx-void { position: relative; color: #b98cff !important; text-shadow: 0 0 10px rgba(122,60,255,.6); }
.tfx-void::before, .tfx-void::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; }
.tfx-void::before { color: #ff5ad9; clip-path: inset(0 0 55% 0); animation: glitch 3s steps(1) infinite; opacity: .7; }
.tfx-void::after { color: #5ad9ff; clip-path: inset(55% 0 0 0); animation: glitch 3s steps(1) -.7s infinite reverse; opacity: .7; }
@keyframes glitch { 0%, 88%, 100% { transform: none; } 90% { transform: translate(-2px, 0); } 93% { transform: translate(2px, 1px); } 96% { transform: translate(-1px, -1px); } }
.tfx-blood { color: #ff4a3d !important; animation: bloodPulse 2.8s ease-in-out infinite; }
@keyframes bloodPulse { 0%, 100% { text-shadow: 0 0 4px rgba(160,10,10,.6); } 50% { text-shadow: 0 0 14px rgba(220,20,20,.95), 0 2px 0 #5a0505; } }

/* ---------- shop ---------- */
.shop-hero { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 18px; padding: 26px; border-radius: 10px;
  border: 1px solid var(--border); background: radial-gradient(ellipse at 0% 0%, rgba(201,164,92,.12), transparent 50%), radial-gradient(ellipse at 100% 100%, rgba(110,70,170,.15), transparent 50%), var(--surface); }
.shop-hero h1 { font-family: var(--display); margin: 0 0 6px; font-size: 30px; }
.shop-hero p { margin: 0 0 4px; color: var(--muted); max-width: 640px; }
.shop-h { font-family: var(--body); font-weight: 600; font-size: 18px; margin: 26px 0 12px; }
.shop-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px; }
.shop-item { display: flex; flex-direction: column; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); overflow: hidden; }
.shop-item.have { border-color: rgba(120,177,132,.35); }
.si-preview { height: 104px; display: grid; place-items: center; padding: 10px; background: var(--surface-2); border-bottom: 1px solid var(--border); }
.si-preview .mini-banner, .si-preview .mini-card { width: 100%; height: 70px; }
.si-body { padding: 12px 14px 4px; flex: 1; }
.si-kind { font-size: 12px; color: var(--dim); display: flex; align-items: center; gap: 6px; }
.si-body h3 { margin: 4px 0 4px; font-size: 15.5px; font-weight: 600; }
.si-body p { margin: 0; font-size: 13px; color: var(--muted); }
.si-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px 14px; flex-wrap: wrap; }
.si-price { font-weight: 700; font-size: 16px; }
.si-status { font-size: 13px; color: var(--ok); }
.si-equipped { font-size: 12.5px; color: var(--gold-2); border: 1px solid rgba(201,164,92,.4); padding: 2px 8px; border-radius: 99px; }
.lock-tag.inline { position: static; }
.lock-tag.owned { color: #b9dcc0; border: 1px solid rgba(120,177,132,.5); }
.bundle-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.bundle { display: flex; flex-direction: column; border-radius: 10px; border: 1px solid rgba(201,164,92,.35); overflow: hidden;
  background: radial-gradient(ellipse at 100% 0%, rgba(201,164,92,.12), transparent 60%), var(--surface); }
.b-head { padding: 16px 16px 6px; }
.b-head h3 { margin: 0; font-family: var(--display); font-size: 20px; color: var(--gold-2); }
.b-head p { margin: 4px 0 0; font-family: var(--prose); font-style: italic; color: var(--muted); }
.b-items { list-style: none; margin: 0; padding: 6px 16px; flex: 1; }
.b-items li { display: flex; justify-content: space-between; gap: 10px; padding: 5px 0; border-top: 1px solid var(--border); font-size: 13.5px; }
.b-items li:first-child { border-top: 0; }
.b-items li span { color: var(--dim); }
.b-items li.have b { color: var(--ok); }
.buy-list { list-style: none; margin: 0 0 12px; padding: 0; }
.buy-list li { display: flex; gap: 10px; padding: 6px 0; border-top: 1px solid var(--border); font-size: 14px; }
.buy-list li span { color: var(--dim); min-width: 92px; }

/* the Shop link made the top bar too wide: drop the campaign jump picker first (Search covers it) */
@media (max-width: 1200px) { .nav .select[data-change="jump"] { display: none; } }
/* below 900px: logo and buttons on the first row, page links in a full-width second row */
@media (max-width: 900px) {
  .nav { height: auto; min-height: 56px; flex-wrap: wrap; row-gap: 0; padding-top: 8px; }
  .nav-links { order: 10; flex: 1 0 100%; height: 44px; max-width: 100%; overflow-x: auto; scrollbar-width: none; }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { flex-shrink: 0; }
}
@media (max-width: 720px) {
  .nav-links a { padding: 0 6px; }
  .nav .role-chip { display: none; }
}
@media (max-width: 900px) { .profile-layout { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 520px) { .compare { font-size: 13px; } .compare th, .compare td { padding: 9px 5px; } .compare th { font-size: 12px; } }
.compare-wrap { overflow-x: auto; }
.tier-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }