/* thrill.css — Thrill Pack styles: wheel, badges, mystery box, fire, levels. */

/* ---- Nav thrill pills ---- */
.pill-fire { background: linear-gradient(135deg, #ff6b35, #f7c548); color: #fff; font-weight: bold; }
.pill-lvl { background: linear-gradient(135deg, #7c3aed, #4f46e5); color: #fff; font-weight: bold; }
.dot-new { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #ff3b3b; margin-left: 2px; vertical-align: super; animation: pulse 1.2s infinite; }
@keyframes pulse { 0%,100% { opacity: 1; transform: scale(1);} 50% { opacity: .4; transform: scale(.7);} }

/* ---- Streak fire ---- */
.streak-fire { display: inline-flex; align-items: center; gap: 6px; font-weight: bold; }
.streak-fire .flame { display: inline-block; animation: flick 0.9s ease-in-out infinite alternate; transform-origin: 50% 90%; }
.streak-fire.hot .flame { animation-duration: 0.5s; filter: drop-shadow(0 0 6px #ff8c00); }
.streak-fire.blazing .flame { animation-duration: 0.3s; filter: drop-shadow(0 0 10px #ff4500); font-size: 1.4em; }
@keyframes flick { from { transform: scale(1) rotate(-3deg);} to { transform: scale(1.15) rotate(3deg);} }

/* ---- XP bar ---- */
.xpbar { height: 14px; background: #22262e; border-radius: 8px; overflow: hidden; margin: 8px 0; }
.xpbar > div { height: 100%; background: linear-gradient(90deg, #7c3aed, #06b6d4); border-radius: 8px; transition: width 0.8s ease; }

/* ---- Thrill hub card ---- */
.thrill-hub { border: 2px solid #7c3aed; background: linear-gradient(180deg, rgba(124,58,237,.12), transparent); }

/* ---- Badge grid ---- */
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }
.badge-card { text-align: center; padding: 14px 8px; border-radius: 12px; background: #161a22; border: 2px solid #2a2f3a; }
.badge-card.earned { border-color: #ffd54a; background: linear-gradient(180deg, rgba(255,213,74,.14), transparent); box-shadow: 0 0 12px rgba(255,213,74,.25); }
.badge-card.locked { opacity: .55; filter: grayscale(.8); }
.badge-card .bemoji { font-size: 2.4rem; line-height: 1; }
.badge-card h3 { margin: 8px 0 4px; font-size: .95rem; }
.badge-card p { margin: 0; font-size: .78rem; }
.badge-card .pbar { height: 8px; background: #22262e; border-radius: 5px; overflow: hidden; margin-top: 8px; }
.badge-card .pbar > div { height: 100%; background: linear-gradient(90deg, #f7c548, #ff6b35); }

/* ---- Spin wheel ---- */
.spin-wrap { text-align: center; padding: 12px 0; }
.spin-pointer { font-size: 2rem; margin-bottom: -14px; position: relative; z-index: 2; filter: drop-shadow(0 2px 2px rgba(0,0,0,.5)); }
#spin-wheel { width: min(78vw, 320px); height: min(78vw, 320px); border-radius: 50%; margin: 0 auto; position: relative;
  border: 8px solid #ffd54a; box-shadow: 0 0 24px rgba(255,213,74,.35);
  background: conic-gradient(
    #ff6b6b 0deg 51.4deg, #f7c548 51.4deg 102.8deg, #4ecdc4 102.8deg 154.2deg,
    #a78bfa 154.2deg 205.6deg, #ff9f43 205.6deg 257deg, #54a0ff 257deg 308.4deg, #ffd54a 308.4deg 360deg);
}
#spin-wheel .seg-labels { position: absolute; inset: 0; }
#spin-wheel .seg { position: absolute; left: 50%; top: 50%; transform-origin: 0 0; font-weight: bold; font-size: .8rem; color: #10131a; text-shadow: 0 1px 0 rgba(255,255,255,.5); }
#spin-wheel .hub { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -28px 0 0 -28px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #ffd54a); border: 3px solid #a86e00; font-size: 1.6rem; line-height: 50px; }
.spin-win { border: 2px solid #ffd54a; background: linear-gradient(180deg, rgba(255,213,74,.15), transparent); text-align: center; animation: popin .5s ease; }
@keyframes popin { from { transform: scale(.8); opacity: 0;} to { transform: scale(1); opacity: 1;} }

/* ---- Mystery box ---- */
.mystery-wrap { text-align: center; padding: 20px 0; }
#mystery-box { font-size: 6rem; cursor: pointer; display: inline-block; transition: transform .2s; user-select: none; }
#mystery-box:hover { transform: scale(1.06); }
#mystery-box.shaking { animation: shake .9s ease; }
#mystery-box.opened { animation: popin .6s ease; filter: drop-shadow(0 0 18px #ffd54a); }
@keyframes shake { 0%,100% { transform: rotate(0);} 15% { transform: rotate(-12deg) scale(1.05);} 30% { transform: rotate(10deg);} 45% { transform: rotate(-8deg) scale(1.08);} 60% { transform: rotate(7deg);} 75% { transform: rotate(-5deg) scale(1.1);} }

/* ---- Level list ---- */
.lvl-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid #22262e; }
.lvl-row.current { background: rgba(124,58,237,.12); border-radius: 8px; padding: 8px; }
.lvl-row .le { font-size: 1.6rem; }

/* ---- SFX toggle ---- */
.switch { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; font-size: 1rem; }
.switch input { width: 22px; height: 22px; accent-color: #7c3aed; }