/* ================================================
       TOKENS — Light
       ================================================ */
    .dlbox-wrapper {
      --dlbox-bg:            linear-gradient(145deg, #fff0f9, #fdf4ff, #fff5fb);
      --dlbox-border:        #f0c6e8;
      --dlbox-shadow:        0 8px 32px rgba(205,95,181,.12), 0 2px 8px rgba(205,95,181,.08);
      --dlbox-title:         #7a2060;
      --dlbox-subtitle:      #c07ab0;
      --dlbox-divider:       #f0c6e8;
      --dlbox-meta-text:     #a0508a;
      --dlbox-note-bg:       rgba(205,95,181,.06);
      --dlbox-note-border:   rgba(205,95,181,.15);
      --dlbox-note-text:     #b06090;
      --dlbox-btn2-bg:       linear-gradient(135deg, #fff0f9, #fce4f7);
      --dlbox-btn2-bg-hover: linear-gradient(135deg, #fce4f7, #f8d0f0);
      --dlbox-btn2-text:     #b84da0;
      --dlbox-btn2-border:   #e8a8d8;
      --dlbox-btn2-shadow:   0 4px 14px rgba(205,95,181,.15);
      --dlbox-pulse:         rgba(205,95,181,.4);
      --dlbox-deco:          rgba(205,95,181,.25);
    }

    /* ================================================
       TOKENS — Dark
       ================================================ */
    .dark .dlbox-wrapper {
      --dlbox-bg:            linear-gradient(145deg, #1e1020, #180d1a, #1e1020);
      --dlbox-border:        #6b3560;
      --dlbox-shadow:        0 4px 20px rgba(0,0,0,.4), 0 1px 6px rgba(0,0,0,.3);
      --dlbox-title:         #f0b8e0;
      --dlbox-subtitle:      #9a6888;
      --dlbox-divider:       #6b3560;
      --dlbox-meta-text:     #c898b8;
      --dlbox-note-bg:       rgba(205,95,181,.07);
      --dlbox-note-border:   rgba(205,95,181,.2);
      --dlbox-note-text:     #c898b8;
      --dlbox-btn2-bg:       linear-gradient(135deg, #2c1628, #3a1e32);
      --dlbox-btn2-bg-hover: linear-gradient(135deg, #3a1e32, #4a2840);
      --dlbox-btn2-text:     #f0b8e0;
      --dlbox-btn2-border:   #6b3560;
      --dlbox-btn2-shadow:   0 3px 12px rgba(0,0,0,.35);
      --dlbox-pulse:         rgba(205,95,181,.3);
      --dlbox-deco:          rgba(205,95,181,.1);
    }

    /* ================================================
       LAYOUT
       ================================================ */

    .dlbox-card {
      background: var(--dlbox-bg);
      border: 1.5px solid var(--dlbox-border);
      border-radius: 24px;
      padding: 28px 24px 20px;
      box-shadow: var(--dlbox-shadow), inset 0 1px 0 rgba(255,255,255,.9);
      position: relative;
      overflow: hidden;
      transition: background .35s, border-color .35s, box-shadow .35s;
    }

    .dlbox-card::before,
    .dlbox-card::after {
      content: '';
      position: absolute;
      background: radial-gradient(circle, rgba(205,95,181,.07) 0%, transparent 70%);
      pointer-events: none;
    }
    .dlbox-card::before { top: -40px; left: -40px; width: 120px; height: 120px; }
    .dlbox-card::after  { bottom: -30px; right: -30px; width: 100px; height: 100px; }

    /* ================================================
       HEADER
       ================================================ */
    .dlbox-header {
      display: flex;
      align-items: center;
      gap: 14px;
      margin-bottom: 20px;
    }

    .dlbox-game-icon {
      width: 72px; height: 72px;
      border-radius: 18px;
      object-fit: cover;
      border: 2px solid var(--dlbox-border);
      box-shadow: 0 4px 16px rgba(205,95,181,.2);
      flex-shrink: 0;
      transition: transform .3s, box-shadow .3s, border-color .35s;
    }
    .dlbox-game-icon:hover {
      transform: scale(1.05) rotate(-2deg);
      box-shadow: 0 6px 20px rgba(205,95,181,.35);
    }

    .dlbox-game-title h3 {
      margin: 0 0 4px;
      font-size: 1.05rem;
      font-weight: 700;
      color: var(--dlbox-title);
      transition: color .35s;
    }
    .dlbox-game-title span {
      font-size: .78rem;
      color: var(--dlbox-subtitle);
      transition: color .35s;
    }

    /* ================================================
       DIVIDER & META
       ================================================ */
    .dlbox-divider {
      height: 1px;
      background: linear-gradient(to left, transparent, var(--dlbox-divider), transparent);
      margin-bottom: 18px;
      transition: background .35s;
    }

    .dlbox-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 10px 18px;
      margin-bottom: 22px;
    }

    .dlbox-meta-item {
      display: flex;
      align-items: center;
      gap: 6px;
      font-size: .8rem;
      font-weight: 500;
      color: var(--dlbox-meta-text);
      transition: color .35s;
    }
    .dlbox-meta-item img {
      width: 16px; height: 16px;
      object-fit: contain;
    }

    /* ================================================
       BUTTONS
       ================================================ */
    .dlbox-buttons {
      display: flex;
      flex-direction: column;
      gap: 12px;
      margin-bottom: 16px;
    }

    .dlbox-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 14px 20px;
      border-radius: 50px;
      border: none;
      cursor: pointer;
      font-size: .92rem;
      font-weight: 700;
      font-family: inherit;
      text-decoration: none;
      position: relative;
      overflow: hidden;
      transition: transform .2s, box-shadow .2s, background .35s, color .35s, border-color .35s;
    }

    .dlbox-btn::before {
      content: '';
      position: absolute;
      inset: 50% 50%;
      width: 0; height: 0;
      background: rgba(255,255,255,.25);
      border-radius: 50%;
      transform: translate(-50%,-50%);
      transition: width .5s, height .5s, opacity .5s;
      opacity: 0;
    }
    .dlbox-btn:active::before { width: 300px; height: 300px; opacity: 1; transition: 0s; }

    .dlbox-btn:hover  { transform: translateY(-2px); }
    .dlbox-btn:active { transform: scale(.98); }

    .dlbox-btn img {
      width: 20px; height: 20px;
      object-fit: contain;
    }

    /* Primary */
    .dlbox-btn-primary {
      background: linear-gradient(135deg, #cd5fb5, #b84da0, #a03d8e);
      color: #fff;
      box-shadow: 0 6px 20px rgba(205,95,181,.4), 0 2px 6px rgba(205,95,181,.2), inset 0 1px 0 rgba(255,255,255,.2);
    }
    .dlbox-btn-primary:hover {
      color: #fff;
      box-shadow: 0 10px 28px rgba(205,95,181,.5), 0 4px 10px rgba(205,95,181,.3), inset 0 1px 0 rgba(255,255,255,.2);
    }

    .dlbox-btn-primary::after {
      content: '';
      position: absolute;
      top: 0; left: -100%;
      width: 60%; height: 100%;
      background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
      animation: dlbox-shimmer 3s infinite;
    }
    @keyframes dlbox-shimmer {
      0%, 100% { left: -100%; }
      40%       { left: 150%; }
    }

    .dlbox-btn-primary-wrap { position: relative; }
    .dlbox-pulse-ring {
      position: absolute;
      inset: -3px;
      border-radius: 50px;
      border: 2px solid var(--dlbox-pulse);
      animation: dlbox-pulse 2.5s ease-out infinite;
      pointer-events: none;
      transition: border-color .35s;
    }
    @keyframes dlbox-pulse {
      0%   { opacity: .7; transform: scale(1); }
      70%  { opacity: 0;  transform: scale(1.04); }
      100% { opacity: 0;  transform: scale(1.04); }
    }

    /* Secondary */
    .dlbox-btn-secondary {
      background: var(--dlbox-btn2-bg);
      color: var(--dlbox-btn2-text);
      border: 1.5px solid var(--dlbox-btn2-border);
      box-shadow: var(--dlbox-btn2-shadow), inset 0 1px 0 rgba(255,255,255,.8);
    }
    .dlbox-btn-secondary:hover {
      background: var(--dlbox-btn2-bg-hover);
      color: var(--dlbox-btn2-text);
      box-shadow: 0 8px 20px rgba(205,95,181,.25), inset 0 1px 0 rgba(255,255,255,.8);
    }

    /* ================================================
       NOTE
       ================================================ */
    .dlbox-note {
      display: flex;
      align-items: flex-start;
      gap: 6px;
      background: var(--dlbox-note-bg);
      border: 1px solid var(--dlbox-note-border);
      border-radius: 12px;
      padding: 8px 12px;
      transition: background .35s, border-color .35s;
    }
    .dlbox-note img {
      width: 14px; height: 14px;
      object-fit: contain;
      margin-top: 1px;
      flex-shrink: 0;
    }
    .dlbox-note p {
      margin: 0;
      font-size: .72rem;
      color: var(--dlbox-note-text);
      line-height: 1.6;
      transition: color .35s;
    }

    /* ================================================
       DECO
       ================================================ */
    .dlbox-deco {
      position: absolute;
      top: 14px; left: 18px;
      font-size: .65rem;
      color: var(--dlbox-deco);
      pointer-events: none;
      letter-spacing: 4px;
      animation: dlbox-float 4s ease-in-out infinite;
      transition: color .35s;
    }
    @keyframes dlbox-float {
      0%, 100% { transform: translateY(0); }
      50%       { transform: translateY(-4px); }
    }


/* ================================================
   TOKENS — Light
   ================================================ */
.slbox-wrapper {
  --slbox-bg:            linear-gradient(145deg, #fff1f1, #ffe5e5, #fff5f5);
  --slbox-border:        #ffb3b3;
  --slbox-shadow:        0 8px 32px rgba(255,77,77,.12), 0 2px 8px rgba(255,77,77,.08);
  --slbox-title:         #a00000;
  --slbox-subtitle:      #d65c5c;
  --slbox-divider:       #ffb3b3;
  --slbox-meta-text:     #c14444;
  --slbox-note-bg:       rgba(255,77,77,.06);
  --slbox-note-border:   rgba(255,77,77,.15);
  --slbox-note-text:     #c94a4a;
  --slbox-btn2-bg:       linear-gradient(135deg, #fff1f1, #ffd6d6);
  --slbox-btn2-bg-hover: linear-gradient(135deg, #ffd6d6, #ffb3b3);
  --slbox-btn2-text:     #d32f2f;
  --slbox-btn2-border:   #ff9999;
  --slbox-btn2-shadow:   0 4px 14px rgba(255,77,77,.15);
  --slbox-pulse:         rgba(255,77,77,.4);
  --slbox-deco:          rgba(255,77,77,.25);
}

/* ================================================
   TOKENS — Dark
   ================================================ */
.dark .slbox-wrapper {
  --slbox-bg:            linear-gradient(145deg, #2a0d0d, #1f0808, #2a0d0d);
  --slbox-border:        #7a1f1f;
  --slbox-shadow:        0 4px 20px rgba(0,0,0,.4), 0 1px 6px rgba(0,0,0,.3);
  --slbox-title:         #ffb3b3;
  --slbox-subtitle:      #cc7a7a;
  --slbox-divider:       #7a1f1f;
  --slbox-meta-text:     #e08f8f;
  --slbox-note-bg:       rgba(255,77,77,.07);
  --slbox-note-border:   rgba(255,77,77,.2);
  --slbox-note-text:     #e08f8f;
  --slbox-btn2-bg:       linear-gradient(135deg, #3a1111, #4a1616);
  --slbox-btn2-bg-hover: linear-gradient(135deg, #4a1616, #5e1d1d);
  --slbox-btn2-text:     #ffb3b3;
  --slbox-btn2-border:   #7a1f1f;
  --slbox-btn2-shadow:   0 3px 12px rgba(0,0,0,.35);
  --slbox-pulse:         rgba(255,77,77,.3);
  --slbox-deco:          rgba(255,77,77,.1);
}

/* ================================================
   LAYOUT
   ================================================ */

.slbox-card {
  background: var(--slbox-bg);
  border: 1.5px solid var(--slbox-border);
  border-radius: 24px;
  padding: 28px 24px 20px;
  box-shadow: var(--slbox-shadow), inset 0 1px 0 rgba(255,255,255,.9);
  position: relative;
  overflow: hidden;
  transition: background .35s, border-color .35s, box-shadow .35s;
}

.slbox-card::before,
.slbox-card::after {
  content: '';
  position: absolute;
  background: radial-gradient(circle, rgba(255,77,77,.07) 0%, transparent 70%);
  pointer-events: none;
}
.slbox-card::before { top: -40px; left: -40px; width: 120px; height: 120px; }
.slbox-card::after  { bottom: -30px; right: -30px; width: 100px; height: 100px; }

/* ================================================
   HEADER
   ================================================ */
.slbox-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 20px;
}

.slbox-game-icon {
  width: 72px; height: 72px;
  border-radius: 18px;
  object-fit: cover;
  border: 2px solid var(--slbox-border);
  box-shadow: 0 4px 16px rgba(255,77,77,.2);
  flex-shrink: 0;
  transition: transform .3s, box-shadow .3s, border-color .35s;
}
.slbox-game-icon:hover {
  transform: scale(1.05) rotate(-2deg);
  box-shadow: 0 6px 20px rgba(255,77,77,.35);
}

.slbox-game-title h3 {
  margin: 0 0 4px;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--slbox-title);
  transition: color .35s;
}
.slbox-game-title span {
  font-size: .78rem;
  color: var(--slbox-subtitle);
  transition: color .35s;
}

/* ================================================
   DIVIDER & META
   ================================================ */
.slbox-divider {
  height: 1px;
  background: linear-gradient(to left, transparent, var(--slbox-divider), transparent);
  margin-bottom: 18px;
  transition: background .35s;
}

.slbox-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin-bottom: 22px;
}

.slbox-meta-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  font-weight: 500;
  color: var(--slbox-meta-text);
  transition: color .35s;
}
.slbox-meta-item img {
  width: 16px; height: 16px;
  object-fit: contain;
}

/* ================================================
   BUTTONS
   ================================================ */
.slbox-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.slbox-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 20px;
  border-radius: 50px;
  border: none;
  cursor: pointer;
  font-size: .92rem;
  font-weight: 700;
  font-family: inherit;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform .2s, box-shadow .2s, background .35s, color .35s, border-color .35s;
}

.slbox-btn::before {
  content: '';
  position: absolute;
  inset: 50% 50%;
  width: 0; height: 0;
  background: rgba(255,255,255,.25);
  border-radius: 50%;
  transform: translate(-50%,-50%);
  transition: width .5s, height .5s, opacity .5s;
  opacity: 0;
}
.slbox-btn:active::before { width: 300px; height: 300px; opacity: 1; transition: 0s; }

.slbox-btn:hover  { transform: translateY(-2px); }
.slbox-btn:active { transform: scale(.98); }

.slbox-btn img {
  width: 20px; height: 20px;
  object-fit: contain;
}

/* Primary */
.slbox-btn-primary {
  background: linear-gradient(135deg, #ff3b3b, #e60000, #ff6b6b);
  color: #fff;
  box-shadow: 0 6px 20px rgba(255,77,77,.4), 0 2px 6px rgba(255,77,77,.2), inset 0 1px 0 rgba(255,255,255,.2);
}
.slbox-btn-primary:hover {
  color: #fff;
  box-shadow: 0 10px 28px rgba(255,77,77,.5), 0 4px 10px rgba(255,77,77,.3), inset 0 1px 0 rgba(255,255,255,.2);
}

.slbox-btn-primary::after {
  content: '';
  position: absolute;
  top: 0; left: -100%;
  width: 60%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.18), transparent);
  animation: slbox-shimmer 3s infinite;
}
@keyframes slbox-shimmer {
  0%, 100% { left: -100%; }
  40%       { left: 150%; }
}

.slbox-btn-primary-wrap { position: relative; }
.slbox-pulse-ring {
  position: absolute;
  inset: -3px;
  border-radius: 50px;
  border: 2px solid var(--slbox-pulse);
  animation: slbox-pulse 2.5s ease-out infinite;
  pointer-events: none;
  transition: border-color .35s;
}
@keyframes slbox-pulse {
  0%   { opacity: .7; transform: scale(1); }
  70%  { opacity: 0;  transform: scale(1.04); }
  100% { opacity: 0;  transform: scale(1.04); }
}

/* Secondary */
.slbox-btn-secondary {
  background: var(--slbox-btn2-bg);
  color: var(--slbox-btn2-text);
  border: 1.5px solid var(--slbox-btn2-border);
  box-shadow: var(--slbox-btn2-shadow), inset 0 1px 0 rgba(255,255,255,.8);
}
.slbox-btn-secondary:hover {
  background: var(--slbox-btn2-bg-hover);
  color: var(--slbox-btn2-text);
  box-shadow: 0 8px 20px rgba(255,77,77,.25), inset 0 1px 0 rgba(255,255,255,.8);
}

/* ================================================
   NOTE
   ================================================ */
.slbox-note {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  background: var(--slbox-note-bg);
  border: 1px solid var(--slbox-note-border);
  border-radius: 12px;
  padding: 8px 12px;
  transition: background .35s, border-color .35s;
}
.slbox-note img {
  width: 14px; height: 14px;
  object-fit: contain;
  margin-top: 1px;
  flex-shrink: 0;
}
.slbox-note p {
  margin: 0;
  font-size: .72rem;
  color: var(--slbox-note-text);
  line-height: 1.6;
  transition: color .35s;
}

/* ================================================
   DECO
   ================================================ */
.slbox-deco {
  position: absolute;
  top: 14px; left: 18px;
  font-size: .65rem;
  color: var(--slbox-deco);
  pointer-events: none;

  animation: slbox-float 4s ease-in-out infinite;
  transition: color .35s;
}
@keyframes slbox-float {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-4px); }
}