/* ============================================================
   Quiz Layout — 3-column page layout + sidebar cards
   ============================================================ */

/* ── Page loader overlay ────────────────────────────────────── */
body.is-loading {
  overflow: hidden;
}
body.is-loading > *:not(#page-loader) {
  filter: blur(6px);
  pointer-events: none;
  user-select: none;
}
#page-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 38vh;
  background: rgba(15, 12, 41, 0.4);
  transition: opacity 0.4s ease;
}
#page-loader.loader-hidden {
  opacity: 0;
  pointer-events: none;
}
.loader-spinner {
  width: 36px;
  height: 36px;
  border: 3px solid rgba(102, 126, 234, 0.2);
  border-top-color: #667eea;
  border-radius: 50%;
  animation: loaderSpin 0.7s linear infinite;
}
@keyframes loaderSpin {
  to { transform: rotate(360deg); }
}

/* ── Profile header (persistent bar) ─────────────────────── */
#profile-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  background: rgba(15, 12, 41, 0.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(102, 126, 234, 0.15);
  transition: opacity 0.3s, transform 0.3s;
}
#profile-header.ph-hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-100%);
  position: absolute;
}
#profile-header:not(.ph-hidden) ~ .page-layout,
#profile-header:not(.ph-hidden) ~ .container,
#profile-header:not(.ph-hidden) ~ .playlist-container {
  padding-top: 80px;
}

.ph-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 10px 20px;
  text-decoration: none;
  color: inherit;
  transition: background 0.2s;
}
.ph-inner:hover {
  background: rgba(102, 126, 234, 0.08);
}

.ph-emoji {
  font-size: 1.5rem;
  line-height: 1;
}
.ph-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
}
.ph-title {
  font-size: 0.95rem;
  color: #fff;
  font-weight: 600;
}
.ph-teaser {
  font-size: 0.72rem;
  color: #8888aa;
}
.ph-desc {
  font-size: 0.72rem;
  color: #8888aa;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 320px;
}

.ph-dots {
  display: flex;
  gap: 5px;
  margin-left: auto;
}
.ph-dot {
  display: block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.15);
}
.ph-dot-done {
  background: #667eea;
  border-color: #667eea;
}

.ph-count {
  font-size: 0.75rem;
  color: #667eea;
  font-weight: 600;
}

.ph-karma {
  display: flex;
  gap: 8px;
  margin-left: 6px;
}
.ph-karma-badge {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  min-width: 26px;
  height: 28px;
  padding: 0 9px 0 6px;
  border-radius: 50px;
  font-size: 0.75rem;
  font-weight: 700;
  cursor: default;
  transition: transform 0.15s;
}
.ph-karma-badge svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.ph-karma-badge:hover {
  transform: scale(1.12);
}
.ph-karma-giving {
  background: rgba(102,126,234,0.15);
  border: 1px solid rgba(102,126,234,0.3);
  color: #667eea;
}
.ph-karma-goodness {
  background: rgba(74,222,128,0.15);
  border: 1px solid rgba(74,222,128,0.3);
  color: #4ade80;
}

/* Tooltip DOWN for header badges (header is at top of screen) */
.ph-karma-badge[data-tip]::after {
  bottom: auto;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
}
.ph-karma-badge[data-tip]::before {
  content: '';
  position: absolute;
  top: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-bottom-color: rgba(102, 126, 234, 0.35);
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 200;
  pointer-events: none;
}
.ph-karma-badge[data-tip]:hover::before {
  opacity: 1;
}

/* First-time intro animation */
@keyframes karmaIntro {
  0%   { transform: scale(0); opacity: 0; }
  50%  { transform: scale(1.35); }
  70%  { transform: scale(0.9); }
  100% { transform: scale(1); opacity: 1; }
}
@keyframes karmaGlow {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  30%  { box-shadow: 0 0 12px 4px rgba(102,126,234,0.5); }
  60%  { box-shadow: 0 0 6px 2px rgba(102,126,234,0.3); }
}
@keyframes karmaGlowGreen {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  30%  { box-shadow: 0 0 12px 4px rgba(74,222,128,0.5); }
  60%  { box-shadow: 0 0 6px 2px rgba(74,222,128,0.3); }
}
.ph-karma-badge.karma-new {
  animation: karmaIntro 0.6s cubic-bezier(0.34,1.56,0.64,1) both;
}
.ph-karma-giving.karma-new {
  animation: karmaIntro 0.6s cubic-bezier(0.34,1.56,0.64,1) both,
             karmaGlow 1.8s ease 0.6s both;
}
.ph-karma-goodness.karma-new {
  animation: karmaIntro 0.6s cubic-bezier(0.34,1.56,0.64,1) both,
             karmaGlowGreen 1.8s ease 0.6s both;
}

/* Pointer arrow for first-time badge */
@keyframes pointerBounce {
  0%, 100% { transform: translateY(0); opacity: 1; }
  50% { transform: translateY(5px); opacity: 0.7; }
}
.karma-pointer {
  position: absolute;
  top: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: pointerBounce 1s ease-in-out infinite;
  pointer-events: none;
  z-index: 201;
}
.karma-pointer-arrow {
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-bottom: 7px solid rgba(255,255,255,0.7);
  margin-bottom: 3px;
  transform: rotate(180deg);
}
.karma-pointer-text {
  background: rgba(15,12,41,0.95);
  border: 1px solid rgba(168,85,247,0.4);
  color: #e0e0e0;
  font-size: 0.68rem;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 8px;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0,0,0,0.4);
}

/* ── Rarity system ───────────────────────────────────────────── */
.rarity-badge {
  display: inline-block;
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 4px;
  margin-top: 3px;
  line-height: 1.4;
}
.rarity-0 { color: #b0b0b0; border: 1px solid rgba(176,176,176,0.3); background: rgba(176,176,176,0.08); }
.rarity-1 { color: #5b9bd5; border: 1px solid rgba(91,155,213,0.3); background: rgba(91,155,213,0.08); }
.rarity-2 { color: #a855f7; border: 1px solid rgba(168,85,247,0.3); background: rgba(168,85,247,0.08); }
.rarity-3 { color: #4ade80; border: 1px solid rgba(74,222,128,0.3); background: rgba(74,222,128,0.08); }
.rarity-4 { color: #fbbf24; border: 1px solid rgba(251,191,36,0.3); background: rgba(251,191,36,0.08); }
.rarity-5 { color: #fb923c; border: 1px solid rgba(251,146,60,0.3); background: rgba(251,146,60,0.08); }
.rarity-6 { color: #e879f9; border: 1px solid rgba(232,121,249,0.4); background: rgba(232,121,249,0.1);
  text-shadow: 0 0 6px rgba(232,121,249,0.4); }

/* Prize card rarity border accents */
.prize-card.rarity-border-0 { border-left: 3px solid #b0b0b0; }
.prize-card.rarity-border-1 { border-left: 3px solid #5b9bd5; }
.prize-card.rarity-border-2 { border-left: 3px solid #a855f7; }
.prize-card.rarity-border-3 { border-left: 3px solid #4ade80; }
.prize-card.rarity-border-4 { border-left: 3px solid #fbbf24; }
.prize-card.prize-gold {
  border: 1px solid rgba(251,191,36,0.45);
  border-left: 3px solid #fbbf24;
  background: linear-gradient(135deg, rgba(251,191,36,0.12) 0%, rgba(245,158,11,0.06) 100%);
  box-shadow: 0 0 12px rgba(251,191,36,0.1), inset 0 0 20px rgba(251,191,36,0.04);
}
.prize-card.rarity-border-5 {
  border: 1px solid rgba(251,146,60,0.45);
  border-left: 3px solid #fb923c;
  background: linear-gradient(135deg, rgba(251,146,60,0.12) 0%, rgba(234,88,12,0.06) 100%);
  box-shadow: 0 0 12px rgba(251,146,60,0.15);
}
.prize-card.rarity-border-6 {
  border: 1px solid rgba(232,121,249,0.45);
  border-left: 3px solid #e879f9;
  background: linear-gradient(135deg, rgba(232,121,249,0.12) 0%, rgba(168,85,247,0.06) 100%);
  box-shadow: 0 0 12px rgba(232,121,249,0.15);
}

/* Prize quantity badge */
.prize-qty {
  position: absolute;
  top: 6px;
  right: 8px;
  background: rgba(102,126,234,0.2);
  border: 1px solid rgba(102,126,234,0.35);
  color: #667eea;
  font-size: 0.65rem;
  font-weight: 700;
  padding: 1px 6px;
  border-radius: 50px;
  line-height: 1.4;
}
.prize-card { position: relative; }
.prize-card.prize-gold .prize-qty {
  background: rgba(251,191,36,0.2);
  border-color: rgba(251,191,36,0.4);
  color: #fbbf24;
}
.prize-card.rarity-border-5 .prize-qty {
  background: rgba(251,146,60,0.2);
  border-color: rgba(251,146,60,0.4);
  color: #fb923c;
}
.prize-card.rarity-border-6 .prize-qty {
  background: rgba(232,121,249,0.2);
  border-color: rgba(232,121,249,0.4);
  color: #e879f9;
}

.ph-arrow {
  font-size: 1rem;
  color: #667eea;
  opacity: 0.6;
  transition: opacity 0.2s, transform 0.2s;
}
.ph-inner:hover .ph-arrow {
  opacity: 1;
  transform: translateX(3px);
}

/* Bright CTA when profile not yet visited */
.ph-cta-bright {
  background: linear-gradient(135deg, #667eea, #764ba2);
  animation: ph-pulse 2s ease-in-out infinite;
}
.ph-cta-bright .ph-title {
  font-size: 1rem;
}
.ph-cta-bright .ph-desc {
  color: rgba(255, 255, 255, 0.7);
}
.ph-cta-bright .ph-arrow {
  color: #fff;
  opacity: 1;
  font-size: 1.2rem;
}
.ph-cta-bright:hover {
  background: linear-gradient(135deg, #7b93ff, #8b5cbf);
}
@keyframes ph-pulse {
  0%, 100% { box-shadow: 0 0 8px rgba(102, 126, 234, 0.3); }
  50% { box-shadow: 0 0 20px rgba(102, 126, 234, 0.6); }
}

/* ── Page wrapper ─────────────────────────────────────────── */
body {
  padding: 0;
}

.page-layout {
  display: flex;
  gap: 20px;
  max-width: 1080px;
  margin: 0 auto;
  padding: 32px 16px;
  align-items: flex-start;
  min-height: 100vh;
}

/* ── Sidebars ─────────────────────────────────────────────── */
.sidebar-left,
.sidebar-right {
  width: 210px;
  flex-shrink: 0;
  position: sticky;
  top: 24px;
}

/* ── Sidebar title ──────────────────────────────────────────*/
.sidebar-title {
  font-size: 0.7rem;
  color: #667eea;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 10px;
  padding: 0 2px;
}

.sidebar-empty-hint {
  font-size: 0.8rem;
  color: #555577;
  background: rgba(255,255,255,0.03);
  border: 1px dashed rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 14px 10px;
  text-align: center;
  line-height: 1.5;
}

/* ── Prize cards (left sidebar) ──────────────────────────── */
.prize-card {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  background: rgba(102,126,234,0.07);
  border: 1px solid rgba(102,126,234,0.18);
  border-radius: 12px;
  padding: 10px 10px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: transform 0.15s, border-color 0.15s;
  text-decoration: none;
  color: inherit;
}
.prize-card:hover {
  transform: translateX(3px);
  border-color: rgba(102,126,234,0.4);
}
.prize-video { border-left: 3px solid #2AABEE; }
.prize-book  { border-left: 3px solid #8b5cf6; }
.prize-course{ border-left: 3px solid #a855f7; }

.prize-icon {
  font-size: 1.4rem;
  line-height: 1;
  margin-top: 1px;
}
.prize-body { flex: 1; min-width: 0; }
.prize-type {
  font-size: 0.65rem;
  color: #8888aa;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 2px;
}
.prize-title {
  font-size: 0.8rem;
  color: #e0e0e0;
  font-weight: 600;
  line-height: 1.3;
}
.prize-quiz {
  font-size: 0.65rem;
  color: #667eea;
  margin-top: 2px;
}

/* ── Char cards (right sidebar) ──────────────────────────── */
.char-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 10px;
  padding: 10px 10px;
  margin-bottom: 8px;
}
.char-done {
  border-color: rgba(102,126,234,0.25);
  background: rgba(102,126,234,0.06);
}
.char-empty {
  opacity: 0.45;
  border-style: dashed;
}
.char-label {
  font-size: 0.65rem;
  color: #8888aa;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 4px;
}
.char-value {
  font-size: 0.85rem;
  color: #fff;
  font-weight: 600;
}
.char-level {
  font-size: 0.65rem;
  color: #667eea;
  margin-top: 3px;
}
.char-placeholder { color: #444466; }
.char-desc {
  font-size: 0.7rem;
  color: #8888aa;
  line-height: 1.45;
  margin-top: 6px;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 6px;
}

/* ── Soul path header (top of result card) ───────────────── */
.soul-path-header {
  background: linear-gradient(135deg, rgba(102,126,234,0.12), rgba(168,85,247,0.08));
  border: 1px solid rgba(102,126,234,0.2);
  border-radius: 14px;
  padding: 14px 16px;
  margin-bottom: 24px;
}

.soul-level-current {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.soul-path-emoji {
  font-size: 2rem;
  line-height: 1;
}
.soul-path-label {
  font-size: 0.7rem;
  color: #667eea;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 2px;
}
.soul-path-title {
  font-size: 1.25rem;
  color: #fff;
  font-weight: 700;
}

/* Soul steps (path-mini) — reuse existing .pm-* but override sizes */
.soul-path-header .path-mini {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 0;
  overflow-x: auto;
  padding: 0;
  margin: 0;
}
.soul-path-header .pm-step { min-width: 38px; }
.soul-path-header .pm-label { font-size: 0.55rem; }

/* ── Next quiz CTA ───────────────────────────────────────── */
.next-quiz-cta {
  text-align: center;
  margin: 24px 0 8px;
}
.next-quiz-cta.sticky {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  margin: 0;
  padding: 16px 16px 20px;
  background: linear-gradient(to top, rgba(15,12,41,0.97) 50%, transparent);
  z-index: 900;
}
.next-quiz-cta.sticky .next-quiz-label {
  margin-bottom: 6px;
  color: #b0b0d0;
}
.next-quiz-label {
  display: block;
  font-size: 0.75rem;
  color: #8888aa;
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: 10px;
}
.btn-next-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #667eea, #764ba2);
  color: #fff;
  border: none;
  padding: 16px 36px;
  font-size: 1.05rem;
  font-weight: 600;
  border-radius: 50px;
  cursor: pointer;
  text-decoration: none;
  box-shadow: 0 4px 20px rgba(102,126,234,0.45);
  transition: transform 0.2s, box-shadow 0.2s;
}
.btn-next-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 28px rgba(102,126,234,0.65);
}

/* ── 7-level archetype bar colours (global) ──────────────── */
/* levels 0-3 are also defined per-quiz; 4-6 are new */
.bar-color-0 { background: #6b8cba; }
.bar-color-1 { background: #5b9bd5; }
.bar-color-2 { background: #667eea; }
.bar-color-3 { background: #8b5cf6; }
.bar-color-4 { background: #a855f7; }
.bar-color-5 { background: #c026d3; }
.bar-color-6 { background: #ec4899; }

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .page-layout {
    flex-direction: column;
    align-items: stretch;
  }
  .sidebar-left,
  .sidebar-right {
    width: 100%;
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }
  .sidebar-left .sidebar-title,
  .sidebar-right .sidebar-title {
    width: 100%;
  }
  .prize-card,
  .char-card {
    width: calc(50% - 4px);
    margin-bottom: 0;
  }
}

@media (max-width: 480px) {
  .page-layout { padding: 16px 8px; gap: 12px; }
  .prize-card, .char-card { width: 100%; }
  .btn-next-primary { font-size: 1rem; padding: 16px 28px; min-height: 48px; }
  .ph-inner { padding: 10px 14px; gap: 8px; }
  .ph-emoji { font-size: 1.2rem; }
  .ph-title { font-size: 0.88rem; }
  .ph-teaser { font-size: 0.72rem; }
  .ph-count { font-size: 0.7rem; }
  .rarity-badge { font-size: 0.65rem; padding: 3px 8px; }
  .prize-type { font-size: 0.72rem; }
  .prize-title { font-size: 0.82rem; }
  .next-quiz-cta.sticky { padding: 14px 16px calc(14px + env(safe-area-inset-bottom)); }
  .next-quiz-label { font-size: 0.72rem; }
}

/* ── Extra small devices (< 360px) ──────────────────────── */
@media (max-width: 360px) {
  .page-layout { padding: 12px 6px; }
  .btn-next-primary { font-size: 0.9rem; padding: 14px 20px; }
  .ph-inner { padding: 8px 10px; }
}

/* ── Tooltips (hover) ──────────────────────────────────────── */
[data-tip] {
  position: relative;
}
[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(15, 12, 41, 0.96);
  border: 1px solid rgba(102, 126, 234, 0.35);
  color: #c0c0dd;
  font-size: 0.73rem;
  font-weight: 400;
  line-height: 1.45;
  padding: 7px 11px;
  border-radius: 8px;
  white-space: normal;
  width: max-content;
  max-width: 240px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 200;
  text-align: center;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
}
[data-tip]:hover::after {
  opacity: 1;
}
/* On mobile, don't show hover tooltips */
@media (max-width: 520px) {
  [data-tip]::after { display: none; }
}

/* ── Detail panel (click) ──────────────────────────────────── */
.qs-detail {
  position: absolute;
  background: rgba(26, 22, 64, 0.97);
  border: 1px solid rgba(168, 85, 247, 0.35);
  border-radius: 16px;
  padding: 20px 18px;
  z-index: 300;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.qs-detail-show {
  opacity: 1;
  transform: translateY(0);
}
.qs-detail-close {
  position: absolute;
  top: 8px;
  right: 10px;
  background: none;
  border: none;
  color: #667eea;
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
}
.qs-detail-title {
  font-size: 0.95rem;
  color: #fff;
  font-weight: 600;
  margin-bottom: 8px;
  padding-right: 20px;
}
.qs-detail-body {
  font-size: 0.83rem;
  color: #b0b0d0;
  line-height: 1.55;
}

/* ── New-material celebration ─────────────────────────────── */
.prize-card.prize-new {
  animation: prizeAppear 0.6s cubic-bezier(0.34,1.56,0.64,1) both;
  border-color: rgba(168,85,247,0.6);
  box-shadow: 0 0 18px rgba(168,85,247,0.25), inset 0 0 8px rgba(168,85,247,0.08);
  position: relative;
  overflow: hidden;
}
.prize-card.prize-new::before {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,0.12) 50%, transparent 60%);
  animation: prizeShimmer 1.8s ease-in-out 0.5s;
}
@keyframes prizeAppear {
  0%   { opacity: 0; transform: translateY(12px) scale(0.92); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes prizeShimmer {
  0%   { transform: translateX(-120%); }
  100% { transform: translateX(120%); }
}

/* Toast overlay */
#prize-toast-overlay {
  position: fixed; inset: 0;
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.55);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
}
#prize-toast-overlay.show {
  opacity: 1;
  pointer-events: auto;
}
.prize-toast {
  background: linear-gradient(145deg, #1a1640 0%, #0f0c29 100%);
  border: 1px solid rgba(168,85,247,0.4);
  border-radius: 20px;
  padding: 32px 28px 24px;
  max-width: 380px;
  width: 90vw;
  text-align: center;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5), 0 0 60px rgba(102,126,234,0.15);
  transform: translateY(30px) scale(0.9);
  transition: transform 0.45s cubic-bezier(0.34,1.56,0.64,1);
  position: relative;
  overflow: hidden;
}
#prize-toast-overlay.show .prize-toast {
  transform: translateY(0) scale(1);
}
.prize-toast-icon {
  font-size: 3rem;
  margin-bottom: 8px;
  animation: toastBounce 0.6s 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}
@keyframes toastBounce {
  0%   { transform: scale(0); }
  100% { transform: scale(1); }
}
.prize-toast-title {
  font-size: 1.2rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 6px;
}
.prize-toast-sub {
  font-size: 0.85rem;
  color: #b0b0d0;
  margin-bottom: 18px;
}
.prize-toast-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 20px;
}
.prize-toast-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(102,126,234,0.1);
  border: 1px solid rgba(102,126,234,0.2);
  border-radius: 12px;
  padding: 10px 12px;
  text-align: left;
  animation: toastItemIn 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
}
.prize-toast-item:nth-child(2) { animation-delay: 0.15s; }
.prize-toast-item:nth-child(3) { animation-delay: 0.3s; }
.prize-toast-item:nth-child(4) { animation-delay: 0.45s; }
@keyframes toastItemIn {
  0%   { opacity: 0; transform: translateX(-16px); }
  100% { opacity: 1; transform: translateX(0); }
}
.prize-toast-item-icon {
  font-size: 1.3rem;
  flex-shrink: 0;
}
.prize-toast-item-title {
  font-size: 0.82rem;
  color: #e0e0e0;
  font-weight: 600;
  line-height: 1.3;
}
.prize-toast-btn {
  display: inline-block;
  background: linear-gradient(135deg, #667eea, #a855f7);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 12px 32px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.prize-toast-btn:hover {
  transform: scale(1.04);
  box-shadow: 0 4px 20px rgba(102,126,234,0.4);
}

/* Particles canvas */
#prize-particles {
  position: fixed; inset: 0;
  z-index: 10000;
  pointer-events: none;
}