/* =====================================================================
   Norynex v1.71 · Tages-Shop (Fortnite-Stil), Bundles, neue Sticker & Kosmetik
   ===================================================================== */

/* ---------- Shop-Kopf ---------- */
.sh-hero { position: relative; display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; padding: 22px 22px 20px; margin-bottom: 14px; border-radius: 20px; overflow: hidden;
  background: radial-gradient(120% 140% at 0% 0%, rgba(168,59,255,.38), transparent 55%), radial-gradient(120% 140% at 100% 100%, rgba(59,130,246,.30), transparent 60%), var(--bg-card);
  border: 1px solid var(--ax-line-strong); }
.sh-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(115deg, rgba(255,255,255,.035) 0 14px, transparent 14px 28px); }
.sh-hero > * { position: relative; z-index: 1; }
.sh-hero-kicker { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--text-secondary); }
.sh-hero h1 { margin: 4px 0 6px; font-size: clamp(30px, 5vw, 44px); font-weight: 900; letter-spacing: -0.035em; line-height: 1; color: var(--text-primary); text-transform: uppercase; font-style: italic; }
.sh-hero-timer { display: inline-flex; align-items: center; gap: 7px; padding: 7px 12px; border-radius: 99px; background: rgba(0,0,0,.28); color: #fff; font-size: 13px; font-weight: 600; }
.sh-hero-timer b { font-variant-numeric: tabular-nums; }
[data-theme="light"] .sh-hero-timer { background: rgba(15,23,42,.08); color: var(--text-primary); }
.sh-sec h2 > i { color: var(--accent-text); font-size: 15px; }
.sh-sub { font-size: 12.5px; font-weight: 600; color: var(--ax-text-dim); letter-spacing: 0; }
.sh-fine--center { text-align: center; margin: -8px 0 22px; font-size: 12.5px; color: var(--ax-text-dim); }
.sh-fine--center i { color: #facc15; }

/* ---------- Artikel-Karten (kräftiger, Rarity-Verlauf) ---------- */
.si-top { background: radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--rc) 45%, transparent), color-mix(in srgb, var(--rc) 10%, var(--bg-secondary)) 70%); }
.si-top::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.03) 0 10px, transparent 10px 20px); }
.si-top > .si-prev { position: relative; z-index: 1; }
.rar-legendary .si-top, .si-detail-top.rar-legendary { box-shadow: inset 0 -30px 50px -30px rgba(255,200,0,.35); }
.si--sm .si-top { height: 104px; }
.si--sm .si-name { font-size: 13px; }
.si--sm .si-info { padding: 9px 10px 10px; }
.si-flag { position: absolute; top: 8px; left: 8px; z-index: 2; padding: 3px 8px; border-radius: 6px; font-size: 11px; font-weight: 900; letter-spacing: .04em; }
.si-flag--new { background: #facc15; color: #1a1300; }
.si-flag--sale { background: #22c55e; color: #03140a; }
.si-flag--inline { position: static; margin-left: 6px; }
.si-xp { display: inline-flex; align-items: center; gap: 3px; }
.si-xp i { color: #facc15; font-size: 10px; }
.si-owned--off { color: var(--ax-text-dim); background: var(--ax-surface-2); }
.co-btn--xp { background: rgba(250,204,21,.12); border: 1px solid rgba(250,204,21,.45); color: var(--text-primary); }
.co-btn--xp i { color: #facc15; }
.co-btn--xp:disabled { opacity: .55; }
.co-strike { opacity: .65; font-weight: 600; margin-right: 2px; }
.si-bundle-hint { display: flex; align-items: center; gap: 10px; width: 100%; padding: 11px 13px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--bc) 55%, transparent); background: color-mix(in srgb, var(--bc) 12%, transparent); color: var(--text-primary); font-size: 13px; text-align: left; }
.si-bundle-hint span { flex: 1; min-width: 0; }
.si-bundle-hint > i:first-child { color: var(--bc); }
.si-bundle-hint > i:last-child { color: var(--ax-text-dim); font-size: 11px; }
.si-prev--sticker { padding: 14px; }

/* ---------- Bundles ---------- */
.sh-bundles { display: flex; flex-direction: column; gap: 16px; }
.sh-bundle-row { display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: 12px; padding: 12px; border-radius: 18px; background: linear-gradient(135deg, color-mix(in srgb, var(--bc) 16%, transparent), transparent 60%); border: 1px solid color-mix(in srgb, var(--bc) 30%, var(--ax-line)); }
.sh-bundle-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; align-content: start; }
.sb { position: relative; display: flex; flex-direction: column; text-align: left; border-radius: 14px; overflow: hidden; min-height: 280px; border: 2px solid var(--bc);
  background: radial-gradient(120% 90% at 50% 0%, color-mix(in srgb, var(--bc) 60%, #000) , color-mix(in srgb, var(--bc) 18%, #0b0b12) 75%); transition: transform .15s, box-shadow .15s; }
.sb:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -10px color-mix(in srgb, var(--bc) 70%, transparent); }
.sb::before { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient(135deg, rgba(255,255,255,0.05) 0 12px, transparent 12px 24px); }
.sb.is-owned { opacity: .8; }
.sb-art { position: relative; flex: 1; display: grid; gap: 4px; padding: 14px 12px 4px; grid-template-columns: 1fr 1fr; place-items: center; }
.sb-art--3 { grid-template-columns: 1fr 1fr 1fr; }
.sb-art--5 { grid-template-columns: repeat(3, 1fr); }
.sb-art-cell { width: 100%; height: 100%; min-height: 84px; display: grid; place-items: center; }
.sb-art-cell .si-prev { padding: 0; }
.sb-art-cell .nx-sticker-img.is-lg { width: 96px; height: 96px; }
.sb-art-cell .nx-sticker.is-lg { font-size: 15px; padding: 6px 10px; }
.sb-art-cell .nx-sticker.st-icon.is-lg { width: 46px; height: 46px; font-size: 20px; }
.sb-art-cell .si-prev--name .nx-name { font-size: 15px; max-width: 120px; }
.sb-art-cell .si-prev--badge i { font-size: 30px; }
.sb-art-cell .si-bubble { font-size: 10px; padding: 6px 8px; }
.sb-info { position: relative; padding: 12px 14px 14px; background: linear-gradient(transparent, rgba(0,0,0,.55) 40%); color: #fff; }
.sb-kicker { font-size: 11px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: color-mix(in srgb, var(--bc) 50%, #fff); display: inline-flex; gap: 6px; align-items: center; }
.sb-name { font-size: 22px; font-weight: 900; letter-spacing: -0.02em; line-height: 1.1; margin: 3px 0 8px; text-transform: uppercase; font-style: italic; text-shadow: 0 2px 10px rgba(0,0,0,.4); }
.sb-bottom { display: flex; align-items: center; gap: 8px; }
.sb-price { font-size: 18px; font-weight: 900; font-variant-numeric: tabular-nums; }
.sb-price s { font-size: 13px; font-weight: 600; opacity: .6; margin-right: 6px; }
.sb-save { font-size: 11px; font-weight: 900; padding: 3px 7px; border-radius: 6px; background: #22c55e; color: #03140a; }
.sb .si-flag { top: 10px; left: 10px; }
.sb .si-owned { color: #4ade80; }
/* Bundle-Detail */
.sb-detail-top { height: 230px; display: grid; background: radial-gradient(120% 100% at 50% 0%, color-mix(in srgb, var(--bc) 60%, #000), color-mix(in srgb, var(--bc) 15%, #0b0b12) 80%); border-bottom: 2px solid var(--bc); }
.sb-detail .sb-kicker { color: var(--bc); }
.sb-list { display: flex; flex-direction: column; gap: 6px; }
.sb-list-row { display: flex; align-items: center; gap: 12px; padding: 8px 10px; border-radius: 11px; border: 1px solid var(--ax-line); background: var(--ax-surface-2); text-align: left; border-left: 3px solid var(--rc); }
.sb-list-row:hover { border-color: var(--ax-line-strong); border-left-color: var(--rc); }
.sb-list-art { width: 44px; height: 44px; flex-shrink: 0; display: grid; place-items: center; color: var(--rc); font-size: 16px; }
.sb-list-art .nx-badge { font-size: 20px; margin: 0; }
.sb-list-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.sb-list-main b { font-size: 14px; color: var(--text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sb-list-main small { font-size: 11.5px; color: var(--ax-text-dim); }
.sb-list-price { font-size: 13px; font-weight: 800; color: var(--text-secondary); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) {
  .sh-bundle-row { grid-template-columns: 1fr; padding: 10px; }
  .sb { min-height: 250px; }
  .sh-bundle-items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sh-hero { padding: 18px 16px; }
}

/* ---------- Sticker: Die-Cut-Look ---------- */
.nx-sticker { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 10px; font-weight: 900; font-size: 14px; letter-spacing: .04em; line-height: 1; user-select: none;
  color: #fff; border: 0; background: linear-gradient(160deg, var(--c), var(--c2));
  box-shadow: 0 0 0 3px #fff, 0 0 0 4px rgba(0,0,0,.18), 0 5px 12px rgba(0,0,0,.35);
  text-shadow: 0 1px 0 rgba(0,0,0,.25), 0 2px 6px rgba(0,0,0,.25); transform: rotate(-3deg); margin: 4px; }
.nx-sticker b { font-weight: 900; }
.nx-sticker i { filter: drop-shadow(0 1px 1px rgba(0,0,0,.3)); }
.nx-sticker.st-big { font-size: 20px; padding: 4px 13px; font-style: italic; }
.nx-sticker.st-tilt-r { transform: rotate(4deg); }
.nx-sticker.st-stamp { transform: rotate(-7deg); font-size: 16px; background: linear-gradient(160deg, var(--c), var(--c2)); outline: 2px dashed rgba(255,255,255,.7); outline-offset: -6px; padding: 8px 13px; }
.nx-sticker.st-icon { border-radius: 50%; width: 38px; height: 38px; padding: 0; justify-content: center; font-size: 18px; transform: rotate(-6deg); }
.nx-sticker.is-lg { font-size: 24px; padding: 10px 18px; border-radius: 14px; box-shadow: 0 0 0 5px #fff, 0 0 0 6px rgba(0,0,0,.15), 0 10px 22px rgba(0,0,0,.4); margin: 8px; }
.nx-sticker.st-big.is-lg { font-size: 40px; padding: 6px 22px; }
.nx-sticker.st-icon.is-lg { width: 70px; height: 70px; font-size: 32px; padding: 0; border-radius: 50%; }
.nx-sticker.is-sm { font-size: 11px; padding: 4px 8px; box-shadow: 0 0 0 2px #fff, 0 3px 6px rgba(0,0,0,.3); margin: 3px; }
.nx-sticker.st-icon.is-sm { width: 28px; height: 28px; font-size: 13px; padding: 0; border-radius: 50%; }
.nx-sticker.st-big.is-sm { font-size: 14px; padding: 3px 9px; }
.st-legend { background: linear-gradient(120deg, #f59e0b, #fde68a 45%, #f59e0b 55%, #b45309) 0 0 / 250% 100% !important; color: #3b1d00; text-shadow: 0 1px 0 rgba(255,255,255,.5); animation: stShine 3s linear infinite, stGlow 2s ease-in-out infinite alternate; }
@keyframes stShine { from { background-position: 150% 0; } to { background-position: -100% 0; } }
@keyframes stGlow { from { filter: drop-shadow(0 0 0 rgba(245,158,11,0)); } to { filter: drop-shadow(0 0 8px rgba(245,158,11,.7)); } }
.st-wobble { animation: stWobble 2.4s ease-in-out infinite; }
@keyframes stWobble { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
.nx-sticker.st-boing { animation: stPopA 1.8s ease-in-out infinite; }
@keyframes stPopA { 0%, 70%, 100% { transform: rotate(-3deg) scale(1); } 80% { transform: rotate(-3deg) scale(1.12); } }
.nx-sticker.st-shake { animation: stShake 1.6s ease-in-out infinite; }
.nx-sticker-img { width: 72px; height: 72px; object-fit: contain; display: inline-block; vertical-align: middle; filter: drop-shadow(0 4px 8px rgba(0,0,0,.35)); transform-origin: 50% 90%; transition: transform .2s; user-select: none; -webkit-user-drag: none; }
.nx-sticker-img:hover { transform: rotate(-4deg) scale(1.05); }
.nx-sticker-img.is-lg { width: 132px; height: 132px; }
.si--lg .nx-sticker-img.is-lg { width: 168px; height: 168px; }
.si--sm .nx-sticker-img.is-lg { width: 88px; height: 88px; }
.si-detail-top .nx-sticker-img.is-lg { width: 196px; height: 196px; animation: stFloat 3s ease-in-out infinite; }
@keyframes stFloat { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-6px) rotate(2deg); } }
.nx-sticker-img.is-sm { width: 48px; height: 48px; }
.comment-sticker .nx-sticker-img { width: 96px; height: 96px; }
.stp-item { height: 72px; }
.stp-item.is-locked { height: 86px; }
.stp-art .nx-sticker-img.is-sm { width: 50px; height: 50px; }
.nx-sticker-chip .nx-sticker-img.is-sm { width: 34px; height: 34px; }
@media (prefers-reduced-motion: reduce) { .nx-sticker, .nx-sticker i, .nx-sticker-img { animation: none !important; } }

/* ---------- Neue Namensstile ---------- */
.nx-name.ns-bubblegum { color: #f472b6; }
.nx-name.ns-sunset { background: linear-gradient(90deg, #f97316, #ec4899); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.nx-name.ns-toxic { color: #a3e635; text-shadow: 0 0 8px rgba(163,230,53,.55), 0 0 1px #365314; }
.nx-name.ns-frost { color: #e0f2fe; text-shadow: 0 0 6px rgba(125,211,252,.9), 0 0 14px rgba(56,189,248,.5); animation: nsFrost 2.6s ease-in-out infinite alternate; }
@keyframes nsFrost { to { text-shadow: 0 0 3px rgba(125,211,252,.6), 0 0 8px rgba(56,189,248,.3); } }
.nx-name.ns-rainbow { background: linear-gradient(90deg, #ef4444, #f59e0b, #eab308, #22c55e, #3b82f6, #a855f7, #ef4444) 0 0 / 200% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: nsRainbow 4s linear infinite; }
@keyframes nsRainbow { to { background-position: -200% 0; } }
.nx-name.ns-cosmic { background: linear-gradient(100deg, #8b5cf6, #22d3ee 30%, #f0abfc 50%, #8b5cf6 70%, #22d3ee) 0 0 / 250% 100%; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: nsShine 5s linear infinite; filter: drop-shadow(0 0 6px rgba(139,92,246,.55)); }
[data-theme="light"] .nx-name.ns-frost { color: #0284c7; }

/* ---------- Abzeichen (Vorschau) ---------- */
.si-prev--badge i { color: var(--c); filter: drop-shadow(0 4px 12px color-mix(in srgb, var(--c) 60%, transparent)); }

/* ---------- Neue Kommentar-Stile ---------- */
.nx-bubble.cb-mint { background: rgba(52,211,153,0.07); border: 1px solid rgba(52,211,153,0.45); }
.nx-bubble.cb-rose { background: rgba(244,114,182,0.07); border: 1px solid rgba(244,114,182,0.45); }
.nx-bubble.cb-ember { background: linear-gradient(180deg, rgba(249,115,22,0.10), rgba(220,38,38,0.05)); border: 1px solid rgba(249,115,22,0.55); box-shadow: inset 0 -2px 0 rgba(220,38,38,.5); }
.nx-bubble.cb-toxic { background: rgba(163,230,53,0.06); border: 1px solid rgba(163,230,53,0.55); box-shadow: 0 0 10px rgba(163,230,53,.12); }
.nx-bubble.cb-galaxy { background: radial-gradient(120% 120% at 0% 0%, rgba(139,92,246,.18), rgba(34,211,238,.06)); border: 1px solid rgba(139,92,246,.55); }
.nx-bubble.cb-rainbow { position: relative; background: var(--bg-card); border: 1px solid transparent; background-image: linear-gradient(var(--bg-card), var(--bg-card)), linear-gradient(90deg, #ef4444, #f59e0b, #22c55e, #3b82f6, #a855f7); background-origin: border-box; background-clip: padding-box, border-box; }