/* ══════════════════════════════════════════════════════════════════════════════
   STLW CARD STOCK — anaglyph holographic card design (compartit)
   ══════════════════════════════════════════════════════════════════════════════

   Mateix disseny de carta que el CARD STOCK del dashboard (#panell/stlwgame/magik).
   S'inclou a les pagines publiques (home / finger) perque els reptes de la
   HipHopDex es vegin amb la mateixa carta.

   TITOL: va a la part superior de la foto, sobre un fons opac, en blanc i
   sencer (pot ocupar 2+ linies, mai es talla amb "...").
   Si edites aquesta regla, edita tambe .stlw-c-title / .stlw-cm-title
   inline a stalow-dashboard-unified.html.
   ══════════════════════════════════════════════════════════════════════════════ */

.stlw-c {
  --cat: #e8b030;
  --cat-deep: #2a1c00;
  --anaglyph-red: #E63946;
  --anaglyph-blue: #2D7FFF;
  position: relative; width: 172px; height: 246px;
  border-radius: 10px; overflow: hidden;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--cat-deep) 50%, #14161a) 0%,
    #0a0b0d 100%);
  box-shadow:
    0 12px 28px -8px color-mix(in oklab, var(--cat) 50%, transparent),
    0 0 0 1px color-mix(in oklab, var(--cat) 25%, rgba(255, 255, 255, 0.08)),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  cursor: pointer; flex-shrink: 0;
  transition: transform .25s ease, box-shadow .25s ease;
  font-family: 'Montserrat', sans-serif;
}
.stlw-c:hover {
  transform: translateY(-5px);
  box-shadow:
    0 20px 38px -10px color-mix(in oklab, var(--cat) 65%, transparent),
    0 0 0 1px color-mix(in oklab, var(--cat) 50%, rgba(255, 255, 255, 0.12)),
    inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.stlw-c::before {
  content: ""; position: absolute; inset: 0; border-radius: 10px; padding: 1.5px;
  background: conic-gradient(from 0deg,
    transparent 0deg, var(--cat) 40deg, transparent 90deg,
    transparent 180deg, var(--cat) 220deg, transparent 270deg,
    transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: stlw-c-spin 8s linear infinite;
  pointer-events: none; opacity: .7; z-index: 9;
}
@keyframes stlw-c-spin { to { transform: rotate(360deg); } }

.stlw-c-content { position: relative; z-index: 10; padding: 8px 10px; height: 100%; display: flex; flex-direction: column; }
.stlw-c-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 6px; }
/* La pindola ha de cabre sencera al costat de les 5 estrelles dins dels 172px de
   la carta: tracking curt i min-width:0 perque etiquetes llargues (BOARDER /
   FINGERB.) no quedin tallades. */
.stlw-c-cat {
  font-family: 'Montserrat', monospace;
  font-size: 5.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  color: #f5f3ee; padding: 3px 3px;
  background: rgba(0, 0, 0, .55);
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 999px; display: inline-flex; align-items: center; gap: 2px;
  white-space: nowrap; min-width: 0; overflow: hidden;
  backdrop-filter: blur(4px);
}
.stlw-c-cat > span:last-child { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.stlw-c-dot { width: 5px; height: 5px; border-radius: 50%; background: var(--cat); box-shadow: 0 0 4px var(--cat); animation: stlw-c-pulse 1.6s ease-in-out infinite; flex-shrink: 0; }
@keyframes stlw-c-pulse { 0%, 100% { opacity: 1; transform: scale(1) } 50% { opacity: .55; transform: scale(.78) } }
.stlw-c-stars { display: flex; gap: 1px; flex-shrink: 0; }
.stlw-c-stars svg { width: 9px; height: 9px; color: var(--cat); filter: drop-shadow(0 0 2px color-mix(in oklab, var(--cat) 60%, transparent)); }
.stlw-c-stars svg.off { color: rgba(255, 255, 255, .18); filter: none; }

.stlw-c-frame {
  margin-top: 6px; flex: 1; min-height: 0; position: relative;
  border-radius: 6px; overflow: hidden; background: #000;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}
.stlw-c-frame::after {
  content: ""; position: absolute; inset: 4px; pointer-events: none; z-index: 4;
  background:
    linear-gradient(#f5f3ee, #f5f3ee) top left/9px 1.5px no-repeat,
    linear-gradient(#f5f3ee, #f5f3ee) top left/1.5px 9px no-repeat,
    linear-gradient(#f5f3ee, #f5f3ee) top right/9px 1.5px no-repeat,
    linear-gradient(#f5f3ee, #f5f3ee) top right/1.5px 9px no-repeat,
    linear-gradient(#f5f3ee, #f5f3ee) bottom left/9px 1.5px no-repeat,
    linear-gradient(#f5f3ee, #f5f3ee) bottom left/1.5px 9px no-repeat,
    linear-gradient(#f5f3ee, #f5f3ee) bottom right/9px 1.5px no-repeat,
    linear-gradient(#f5f3ee, #f5f3ee) bottom right/1.5px 9px no-repeat;
  opacity: .6;
}
.stlw-c-img { position: absolute; inset: 0; background-position: center; background-size: cover; filter: grayscale(1) contrast(1.05); }
.stlw-c-img-r, .stlw-c-img-b { position: absolute; inset: 0; background-position: center; background-size: cover; filter: grayscale(1) contrast(1.1); mix-blend-mode: screen; background-blend-mode: multiply; }
.stlw-c-img-r { background-color: var(--anaglyph-red); opacity: .5; animation: stlw-c-anar 3.2s ease-in-out infinite; }
.stlw-c-img-b { background-color: var(--anaglyph-blue); opacity: .4; animation: stlw-c-anab 3.2s ease-in-out infinite; }
@keyframes stlw-c-anar { 0%, 100% { transform: translate(0, 0); opacity: .4 } 50% { transform: translate(-2px, 0); opacity: .6 } }
@keyframes stlw-c-anab { 0%, 100% { transform: translate(0, 0); opacity: .35 } 50% { transform: translate(2px, 0); opacity: .55 } }
.stlw-c-emoji { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 48px; z-index: 1; filter: drop-shadow(0 4px 12px rgba(0, 0, 0, .6)); }
.stlw-c-splash {
  position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; opacity: .7;
  background:
    radial-gradient(circle at 20% 90%, color-mix(in oklab, var(--cat) 70%, transparent) 0%, transparent 38%),
    radial-gradient(circle at 90% 10%, color-mix(in oklab, var(--cat) 45%, transparent) 0%, transparent 32%);
  animation: stlw-c-splash 4s ease-in-out infinite;
}
@keyframes stlw-c-splash { 0%, 100% { opacity: .5; transform: scale(1) } 50% { opacity: .8; transform: scale(1.04) } }

/* TITOL sobre la foto — MAJUSCULES, fons opac, lletra blanca amb brillo propi,
   sencer (2+ linies, sense "..."). */
.stlw-c-title {
  position: absolute; top: 0; left: 0; right: 0; z-index: 5;
  padding: 5px 6px;
  font-weight: 900; font-size: 11.5px; line-height: 1.15; letter-spacing: .01em;
  color: #fff; text-align: center; text-transform: uppercase;
  background: linear-gradient(180deg, rgba(0, 0, 0, .90) 0%, rgba(0, 0, 0, .74) 68%, rgba(0, 0, 0, .38) 100%);
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  white-space: normal; overflow: visible; text-overflow: clip;
  overflow-wrap: anywhere;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, .95),
    0 0 5px rgba(255, 255, 255, .45),
    0 0 12px color-mix(in oklab, var(--cat) 70%, transparent);
  animation: stlw-c-title-glow 2.8s ease-in-out infinite;
}
@keyframes stlw-c-title-glow {
  0%, 100% {
    text-shadow:
      0 1px 3px rgba(0, 0, 0, .95),
      0 0 4px rgba(255, 255, 255, .35),
      0 0 10px color-mix(in oklab, var(--cat) 55%, transparent);
  }
  50% {
    text-shadow:
      0 1px 3px rgba(0, 0, 0, .95),
      0 0 8px rgba(255, 255, 255, .75),
      0 0 18px color-mix(in oklab, var(--cat) 90%, transparent);
  }
}

.stlw-c-stats {
  margin-top: 5px; padding: 4px 4px;
  background: linear-gradient(180deg,
    color-mix(in oklab, var(--cat) 92%, #000),
    color-mix(in oklab, var(--cat) 75%, #000));
  border-radius: 5px;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 2px;
  box-shadow:
    0 3px 8px -3px color-mix(in oklab, var(--cat) 60%, transparent),
    inset 0 1px 0 rgba(255, 255, 255, .18),
    inset 0 -1px 0 rgba(0, 0, 0, .3);
}
.stlw-c-stat { display: flex; align-items: center; justify-content: center; gap: 2px; font-weight: 900; color: #f5f3ee; font-size: 10px; text-shadow: 0 1px 0 rgba(0, 0, 0, .35); }
.stlw-c-stat svg { width: 9px; height: 9px; flex-shrink: 0; }
.stlw-c-special { font-family: 'Montserrat', monospace; font-size: 7px; color: rgba(255, 255, 255, .55); margin-top: 3px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding: 0 2px; }
.stlw-c-foot {
  margin-top: auto; padding-top: 4px;
  display: flex; justify-content: space-between; align-items: center;
  font-family: 'Montserrat', monospace; font-size: 6px; letter-spacing: .15em;
  color: rgba(255, 255, 255, .35); text-transform: uppercase;
}

.stlw-c-scan, .stlw-c-shine, .stlw-c-holo { position: absolute; inset: 0; border-radius: 10px; pointer-events: none; overflow: hidden; }
.stlw-c-scan { z-index: 6; }
.stlw-c-scan::before {
  content: ""; position: absolute; left: -10%; right: -10%; height: 30px;
  background: linear-gradient(180deg, transparent 0%, rgba(255, 255, 255, .12) 50%, transparent 100%);
  filter: blur(2px); animation: stlw-c-scanmv 5.5s linear infinite;
}
@keyframes stlw-c-scanmv { 0% { top: -10% } 100% { top: 110% } }
.stlw-c-shine { z-index: 7; }
.stlw-c-shine::before {
  content: ""; position: absolute; top: -50%; left: -60%; width: 60%; height: 200%;
  background: linear-gradient(110deg, transparent 0%, transparent 40%, rgba(255, 255, 255, .18) 50%, transparent 60%, transparent 100%);
  transform: rotate(18deg); animation: stlw-c-shinemv 6s ease-in-out infinite;
}
@keyframes stlw-c-shinemv { 0% { left: -80% } 60% { left: 130% } 100% { left: 130% } }
.stlw-c-holo {
  z-index: 8;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 30%),
    rgba(255, 255, 255, .22) 0%, rgba(255, 255, 255, .05) 18%, transparent 40%);
  mix-blend-mode: overlay; opacity: 0; transition: opacity .25s ease;
}
.stlw-c:hover .stlw-c-holo { opacity: .9; }

/* ── Graella de cartes (pagines publiques) ─────────────────────────────────── */
.stlw-cs-group {
  display: flex; align-items: center; gap: 10px;
  margin: 24px 0 12px; padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}
.stlw-cs-group-title { font-size: 11px; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; color: var(--cs-cat, #ff9f47); }
.stlw-cs-group-badge {
  font-size: 8px; font-family: 'Montserrat', monospace; padding: 2px 8px; border-radius: 8px;
  background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.12); color: rgba(255, 255, 255, 0.55);
}
.stlw-cs-grid { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 8px; }
.stlw-cs-msg { font-size: 12px; color: rgba(255, 255, 255, 0.45); padding: 18px 0; font-family: 'Montserrat', sans-serif; }

@media (max-width: 600px) {
  .stlw-cs-grid { gap: 10px; justify-content: center; }
}