/* rpg.css — dipisahkan dari learnai-dashboard.html (baris 5736-5876).
   Urutan muat dipertahankan persis: <link> menggantikan blok di posisi yang sama. */
    /* ---------- #3 SIDEBAR: hover hidup + active berdenyut ---------- */
    #nav-main button { position: relative; overflow: hidden; transition: transform .18s cubic-bezier(.34,1.56,.64,1), background .2s ease, color .2s ease, box-shadow .25s ease; }
    #nav-main button .text-base { display: inline-block; transition: transform .2s cubic-bezier(.34,1.56,.64,1); }
    #nav-main button:hover .text-base { transform: scale(1.28) rotate(-6deg); }
    #nav-main button.nav-idle:hover { transform: translateX(4px); box-shadow: inset 0 0 0 1.5px rgba(251,191,36,.45), 0 0 14px rgba(251,191,36,.12); }
    /* Garis emas mengalir dari kiri saat hover */
    #nav-main button::before {
      content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
      background: linear-gradient(180deg, transparent, var(--px-yellow, #fbbf24), transparent);
      transform: scaleY(0); transform-origin: center; transition: transform .28s ease;
    }
    #nav-main button:hover::before, #nav-main button.nav-active::before { transform: scaleY(1); }
    #nav-main button.nav-active { animation: rpgNavPulse 2.6s ease-in-out infinite; }
    @keyframes rpgNavPulse {
      0%, 100% { box-shadow: inset 0 0 0 1.5px rgba(251,191,36,.5), 0 0 0 0 rgba(251,191,36,.35); }
      50%      { box-shadow: inset 0 0 0 1.5px rgba(251,191,36,.85), 0 0 16px 2px rgba(251,191,36,.22); }
    }

    /* ---------- #6 CARD MODE: lift + glow + icon float + tilt ---------- */
    .px-panel { transition: transform .22s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease, border-color .25s ease, background .25s ease; transform-style: preserve-3d; will-change: transform; }
    .px-panel:hover { box-shadow: 0 14px 30px rgba(0,0,0,.4), 0 0 20px rgba(251,191,36,.15); }
    .px-panel:hover > div:first-child, .px-panel:hover .text-3xl, .px-panel:hover .text-2xl { animation: rpgFloat 1.8s ease-in-out infinite; }
    @keyframes rpgFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }

    /* ---------- #5 HERO BUTTON "Mulai Belajar" ---------- */
    .btn-hero-solid { position: relative; overflow: visible; transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, filter .2s ease; }
    .btn-hero-solid:hover { box-shadow: 0 0 22px rgba(99,132,241,.6), 0 6px 0 rgba(30,40,90,.5); filter: brightness(1.08); }
    .btn-hero-solid .rpg-hero-char {
      position: absolute; left: 50%; bottom: 100%; width: 84px; margin-left: -42px;
      opacity: 0; transform: translateY(24px) scale(.9); pointer-events: none;
      transition: opacity .3s ease, transform .45s cubic-bezier(.34,1.56,.64,1);
      image-rendering: pixelated; filter: drop-shadow(0 6px 10px rgba(0,0,0,.5));
    }
    .btn-hero-solid:hover .rpg-hero-char { opacity: 1; transform: translateY(6px) scale(1); }

    /* ---------- #10 CURSOR: sparkle pixel ---------- */
    .rpg-spark { position: fixed; z-index: 9998; pointer-events: none; image-rendering: pixelated; border-radius: 1px; will-change: transform, opacity; animation: rpgSparkFade .7s ease-out forwards; }
    @keyframes rpgSparkFade { from { opacity: .9; transform: translate(0,0) scale(1); } to { opacity: 0; transform: translate(var(--sx,0), var(--sy,10px)) scale(.2); } }

    /* ---------- Partikel emas serba-guna (chest, klik, XP) ---------- */
    .rpg-px { position: fixed; z-index: 9990; pointer-events: none; image-rendering: pixelated; border-radius: 1px; box-shadow: 0 0 6px 1px rgba(251,191,36,.55); will-change: transform, opacity; animation: rpgPxFly var(--life,.7s) cubic-bezier(.2,.8,.3,1) forwards; }
    @keyframes rpgPxFly { from { opacity: 1; transform: translate(0,0) scale(1); } to { opacity: 0; transform: translate(var(--dx,0), var(--dy,-40px)) scale(.25); } }

    /* Flash singkat saat klik kartu / tombol */
    .rpg-flash { position: fixed; z-index: 9989; pointer-events: none; border-radius: 14px; background: radial-gradient(circle, rgba(255,247,237,.85), rgba(251,191,36,.35) 45%, transparent 72%); opacity: 0; animation: rpgFlash .45s ease-out forwards; }
    @keyframes rpgFlash { 0% { opacity: 0; transform: scale(.4); } 30% { opacity: .9; } 100% { opacity: 0; transform: scale(1.5); } }

    /* Ripple pixel di titik klik tombol hero */
    .rpg-ripple { position: fixed; z-index: 9991; pointer-events: none; border: 2px solid rgba(251,191,36,.8); border-radius: 50%; opacity: .8; animation: rpgRipple .55s ease-out forwards; }
    @keyframes rpgRipple { from { opacity: .8; transform: translate(-50%,-50%) scale(.2); } to { opacity: 0; transform: translate(-50%,-50%) scale(2.6); } }

    /* ---------- #8 XP FLOAT + LEVEL UP ---------- */
    .rpg-xp-float { position: fixed; z-index: 9995; pointer-events: none; font-family: 'VT323', monospace; font-weight: 700; font-size: 22px; color: #fde68a; text-shadow: 0 0 8px rgba(251,191,36,.8), 2px 2px 0 rgba(0,0,0,.5); will-change: transform, opacity; animation: rpgXpFloat 1.15s ease-out forwards; }
    @keyframes rpgXpFloat { 0% { opacity: 0; transform: translateY(6px) scale(.7); } 18% { opacity: 1; transform: translateY(0) scale(1.1); } 100% { opacity: 0; transform: translateY(-42px) scale(1); } }

    .rpg-levelup { position: fixed; left: 50%; top: 34%; z-index: 9996; transform: translate(-50%,-50%) scale(.6); opacity: 0; pointer-events: none; text-align: center; }
    .rpg-levelup.show { animation: rpgLevelIn 2.4s cubic-bezier(.22,1.4,.4,1) forwards; }
    @keyframes rpgLevelIn { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.6); } 12% { opacity: 1; transform: translate(-50%,-50%) scale(1.05); } 78% { opacity: 1; transform: translate(-50%,-50%) scale(1); } 100% { opacity: 0; transform: translate(-50%,-58%) scale(1); } }
    .rpg-levelup .lv-badge { font-family: 'VT323', monospace; font-size: 15px; letter-spacing: 4px; color: #fde68a; margin-bottom: 6px; }
    .rpg-levelup .lv-title { font-size: 40px; font-weight: 800; color: #fff; text-shadow: 0 0 22px rgba(251,191,36,.9), 3px 3px 0 rgba(0,0,0,.6); }
    .rpg-levelup .lv-sub { font-family: 'VT323', monospace; font-size: 20px; color: #fbbf24; letter-spacing: 2px; }
    /* Cahaya emas ledakan level up */
    .rpg-goldburst { position: fixed; left: 50%; top: 34%; z-index: 9994; width: 10px; height: 10px; margin: -5px 0 0 -5px; pointer-events: none; border-radius: 50%; background: radial-gradient(circle, rgba(255,247,237,.9), rgba(251,191,36,.5) 40%, transparent 70%); animation: rpgGoldBurst .8s ease-out forwards; }
    @keyframes rpgGoldBurst { 0% { opacity: 0; transform: scale(1); } 20% { opacity: .95; } 100% { opacity: 0; transform: scale(46); } }
    .rpg-confetti { position: fixed; z-index: 9995; pointer-events: none; image-rendering: pixelated; will-change: transform, opacity; }

    /* ---------- Toast (Level Up bar & Achievement) ---------- */
    #rpg-toasts { position: fixed; top: 74px; right: 18px; z-index: 9997; display: flex; flex-direction: column; gap: 10px; pointer-events: none; }
    .rpg-toast {
      display: flex; align-items: center; gap: 12px; min-width: 250px; max-width: 320px;
      background: rgba(9,13,34,.94); border: 2px solid rgba(251,191,36,.6); border-radius: 12px;
      padding: 12px 14px; box-shadow: 0 0 26px rgba(251,191,36,.18), 0 16px 34px -14px rgba(0,0,0,.8);
      transform: translateX(120%); opacity: 0; animation: rpgToastIn .5s cubic-bezier(.22,1.3,.4,1) forwards;
    }
    .rpg-toast.out { animation: rpgToastOut .45s ease forwards; }
    @keyframes rpgToastIn { to { transform: translateX(0); opacity: 1; } }
    @keyframes rpgToastOut { to { transform: translateX(120%); opacity: 0; } }
    .rpg-toast .rt-ico { font-size: 30px; line-height: 1; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); flex-shrink: 0; }
    .rpg-toast .rt-name { font-weight: 700; font-size: 14px; color: #fff; }
    .rpg-toast .rt-desc { font-size: 11.5px; color: #cbd5e1; line-height: 1.45; }
    .rpg-toast .rt-xp { font-family: 'VT323', monospace; font-size: 15px; color: #fde68a; margin-top: 2px; }

    /* ---------- Topbar notification panel ---------- */
    .notif-panel { position: absolute; right: 0; top: calc(100% + 12px); width: min(360px, calc(100vw - 24px)); z-index: 9800;
      background: rgba(9,13,34,.98); border: 2px solid rgba(251,191,36,.48); border-radius: 18px; overflow: hidden;
      box-shadow: 0 26px 70px -24px rgba(0,0,0,.9), 0 0 0 1px rgba(255,255,255,.04) inset; color: #e5edff;
      transform-origin: top right; animation: notifIn .18s cubic-bezier(.22,1.2,.4,1) both; }
    @keyframes notifIn { from { opacity: 0; transform: translateY(-8px) scale(.96); } to { opacity: 1; transform: translateY(0) scale(1); } }
    .notif-head { display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:14px 14px 12px; border-bottom:1px solid rgba(148,163,184,.18); background:linear-gradient(135deg, rgba(251,191,36,.11), rgba(99,102,241,.10)); }
    .notif-title { font-weight:800; font-size:15px; color:#fff; line-height:1.1; }
    .notif-sub { font-size:11px; color:#94a3b8; margin-top:3px; }
    .notif-read { font-size:11px; font-weight:700; color:#fde68a; border:1px solid rgba(251,191,36,.35); border-radius:999px; padding:5px 8px; background:rgba(251,191,36,.08); }
    .notif-reminder { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:12px 14px; border-bottom:1px solid rgba(148,163,184,.14); }
    .notif-toggle { min-width:42px; border-radius:999px; padding:5px 9px; font-size:11px; font-weight:900; background:#334155; color:#cbd5e1; box-shadow:0 3px 0 rgba(0,0,0,.35); }
    .notif-toggle.on { background:#16a34a; color:#ecfdf5; }
    .notif-list { max-height:320px; overflow-y:auto; padding:8px; }
    .notif-item { display:flex; gap:10px; padding:10px; border-radius:14px; border:1px solid rgba(148,163,184,.13); background:rgba(15,23,42,.56); margin-bottom:8px; }
    .notif-item.unread { border-color:rgba(251,191,36,.42); background:rgba(251,191,36,.08); }
    .notif-ico { width:34px; height:34px; border-radius:12px; display:grid; place-items:center; background:rgba(59,130,246,.16); flex-shrink:0; font-size:18px; }
    .notif-name { font-size:13px; font-weight:800; color:#fff; line-height:1.25; }
    .notif-desc { font-size:11.5px; color:#cbd5e1; line-height:1.35; margin-top:2px; }
    .notif-time { font-size:10px; color:#94a3b8; margin-top:5px; }
    .notif-empty { text-align:center; padding:24px 12px; color:#94a3b8; font-size:12px; }

    /* ---------- #1/#2/#14 HERO AMBIENT + PARALLAX ---------- */
    .rpg-hero-fx { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 1; }
    .rpg-hero-fx > * { position: absolute; will-change: transform; }
    .rpg-star { width: 2px; height: 2px; background: #fff7ed; border-radius: 1px; animation: rpgTwinkle 2.6s steps(1) infinite; }
    @keyframes rpgTwinkle { 0%, 60% { opacity: .8; } 61%, 100% { opacity: .15; } }
    .rpg-fly { width: 4px; height: 4px; background: #ffe9a8; border-radius: 1px; box-shadow: 0 0 8px 2px rgba(255,233,168,.6); animation: rpgFlyPath 9s ease-in-out infinite, rpgFlyBlink 1.2s steps(1) infinite; }
    @keyframes rpgFlyPath { 0% { transform: translate(0,0); } 25% { transform: translate(24px,-16px); } 50% { transform: translate(48px,6px); } 75% { transform: translate(18px,20px); } 100% { transform: translate(0,0); } }
    @keyframes rpgFlyBlink { 0%,100% { opacity: 1; } 50% { opacity: .15; } }
    .rpg-mist { width: 160%; height: 60%; left: -30%; bottom: -6%; background: radial-gradient(ellipse at 50% 100%, rgba(255,255,255,.10), transparent 62%); animation: rpgMist 14s ease-in-out infinite alternate; }
    @keyframes rpgMist { from { transform: translateX(-4%); } to { transform: translateX(6%); } }
    .rpg-beam { left: 50%; top: 42%; width: 3px; height: 60%; transform-origin: top center; background: linear-gradient(rgba(255,226,150,.55), transparent); filter: blur(3px); animation: rpgBeam 9s linear infinite; }
    @keyframes rpgBeam { from { transform: translateX(-50%) rotate(-34deg); } to { transform: translateX(-50%) rotate(34deg); } }
    .rpg-bird { font-size: 11px; color: rgba(15,20,40,.55); animation: rpgBird 20s linear infinite; }
    @keyframes rpgBird { from { transform: translate(-40px,0) scaleY(-1); } 50% { transform: translate(46vw,-20px) scaleY(-1); } to { transform: translate(100vw,0) scaleY(-1); } }

    /* ---------- #15 EMPTY STATE ---------- */
    .rpg-empty { text-align: center; padding: 26px 16px; color: #94a3b8; }
    .rpg-empty .re-emoji { font-size: 40px; display: block; margin-bottom: 8px; animation: rpgFloat 2.6s ease-in-out infinite; }
    .rpg-empty .re-title { font-weight: 700; color: #cbd5e1; font-size: 14px; margin-bottom: 3px; }
    .rpg-empty .re-sub { font-size: 12px; color: #7c86ab; }

    /* Tombol mute global di topbar */
    #rpg-mute { cursor: pointer; }

    /* ---------- #12 PAGE TRANSITION: pixel dissolve ---------- */
    #rpg-wipe { position: fixed; inset: 0; z-index: 9999; pointer-events: none; opacity: 0;
      background:
        radial-gradient(circle at 20% 30%, #0b1026 0 8px, transparent 9px),
        radial-gradient(circle at 70% 60%, #0b1026 0 8px, transparent 9px),
        #0b1026;
      background-size: 22px 22px; }
    #rpg-wipe.run { animation: rpgWipe .55s ease forwards; }
    @keyframes rpgWipe { 0% { opacity: 0; } 40% { opacity: 1; } 100% { opacity: 0; } }

    @media (pointer: coarse) { .rpg-spark { display: none; } }