/* =====================================================================================================
   POZIOMY (js/levels.js + js/app/lvl.js) — styl „dżungla”: zielone ramki, złote XP, papuzie rangi.
   Rangi mają własną parę kolorów (--k1/--k2) w klasach .rk-0 … .rk-8 (od pisklęcia do króla papug).
   ===================================================================================================== */
.rk-0 { --k1: #a6f27a; --k2: #33b524; }
.rk-1 { --k1: #7aecc9; --k2: #14a37f; }
.rk-2 { --k1: #86d8ff; --k2: #2a8ee6; }
.rk-3 { --k1: #aeaeff; --k2: #5b5be0; }
.rk-4 { --k1: #d8a9ff; --k2: #9a4fe0; }
.rk-5 { --k1: #ffa6c9; --k2: #e0508a; }
.rk-6 { --k1: #ffbb66; --k2: #e0701a; }
.rk-7 { --k1: #ffe46e; --k2: #e0a100; }
.rk-8 { --k1: #ffd23d; --k2: #ff5f3a; }

/* ---------- awatar w pasku statusu: pierścień postępu do następnego poziomu + znaczek z numerem poziomu ---------- */
.hero .statusbar .flag.avatar { position: relative; overflow: visible; isolation: isolate; border: 3px solid #3bdc1e; box-shadow: 0 0 0 3px #fff, 0 8px 14px -4px rgba(20, 110, 10, 0.55); }
.hero .statusbar .flag.avatar img { border-radius: 50%; }
.hero .statusbar .flag.avatar:hover { box-shadow: 0 0 0 3px #fff, 0 12px 20px -4px rgba(20, 110, 10, 0.6); }
.hero .statusbar .flag.avatar::before { content: ""; position: absolute; inset: -11px; border-radius: 50%; z-index: -1; pointer-events: none;
  background: conic-gradient(from 0deg, #ffd23d 0, #ff9f1a calc(var(--xp, 0) * 1%), rgba(255, 255, 255, 0.75) calc(var(--xp, 0) * 1%));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); mask: radial-gradient(farthest-side, transparent calc(100% - 7px), #000 calc(100% - 6px)); }
.hero .statusbar .flag.avatar::after { content: attr(data-lv); position: absolute; right: -15px; bottom: -13px; min-width: 30px; height: 30px; padding: 0 6px; box-sizing: border-box; border-radius: 15px; display: grid; place-items: center; z-index: 2;
  font-family: var(--display); font-size: 16px; font-weight: 800; line-height: 1; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4); background: linear-gradient(180deg, var(--k1), var(--k2)); border: 3px solid #fff; box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2); }
:root[data-theme="dark"] .hero .statusbar .flag.avatar { box-shadow: 0 0 0 3px #201d2a, 0 8px 14px -4px rgba(0, 0, 0, 0.5); }
:root[data-theme="dark"] .hero .statusbar .flag.avatar::before { background: conic-gradient(from 0deg, #ffd23d 0, #ff9f1a calc(var(--xp, 0) * 1%), rgba(255, 255, 255, 0.18) calc(var(--xp, 0) * 1%)); }
:root[data-theme="dark"] .hero .statusbar .flag.avatar::after { border-color: #201d2a; }
@media (max-width: 440px) {
  .hero .statusbar .flag.avatar::before { inset: -9px; -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 5px)); }
  .hero .statusbar .flag.avatar::after { right: -12px; bottom: -11px; min-width: 26px; height: 26px; font-size: 14px; border-width: 2.5px; border-radius: 13px; }
}

/* ---------- medal z numerem poziomu ---------- */
.lv-medal { flex-shrink: 0; width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; font-family: var(--display); font-weight: 800; font-size: 22px; line-height: 1; color: #fff; text-shadow: 0 2px 2px rgba(0, 0, 0, 0.35);
  background: radial-gradient(circle at 35% 28%, var(--k1), var(--k2)); border: 3px solid #fff; box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2), 0 8px 14px -6px rgba(0, 0, 0, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.5); }
.lv-medal b { font-weight: 800; }
.lv-medal.big { width: 84px; height: 84px; font-size: 40px; border-width: 4px; }

/* ---------- pasek XP ---------- */
.lv-bar { height: 12px; border-radius: 999px; background: rgba(35, 168, 15, 0.16); overflow: hidden; box-shadow: inset 0 2px 3px rgba(20, 90, 10, 0.22); }
.lv-bar.big { height: 18px; }
.lv-bar i { display: block; height: 100%; min-width: 8px; border-radius: 999px; background: linear-gradient(90deg, #ffe066, #f0a500); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.45); transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1); }

/* ---------- karta w Profilu ---------- */
.lv-card { border: 2.5px solid rgba(59, 220, 30, 0.55); background: linear-gradient(180deg, #ffffff 0%, #f4fff0 100%); }
.lv-top { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; }
.lv-who { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.lv-who .overline { color: #23a80f; }
.lv-rank { margin: 0; font-family: var(--display); font-size: 28px; font-weight: 800; line-height: 1.1; color: #0c4a1c; }
.lv-who small { font-size: 13px; font-weight: 600; color: #4a8a4f; line-height: 1.3; }
.lv-xp { display: flex; justify-content: space-between; gap: 10px; margin-top: 8px; font-size: 13px; font-weight: 700; color: #3f7a46; }
.lv-ranks { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 8px; margin-top: 16px; }
.lv-rk { display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px; border-radius: 16px; text-align: center; background: #f1f4ee; color: #8a9a88; opacity: 0.6; filter: grayscale(0.7); }
.lv-rk i { font-style: normal; font-size: 22px; line-height: 1.1; }
.lv-rk b { font-family: var(--display); font-size: 13px; font-weight: 800; line-height: 1.15; }
.lv-rk small { font-size: 11px; font-weight: 700; }
.lv-rk.got { opacity: 1; filter: none; background: #fff; color: #1d5a26; box-shadow: inset 0 0 0 2px var(--k1), 0 3px 0 var(--k2); }
.lv-rk.cur { opacity: 1; filter: none; color: #fff; background: linear-gradient(180deg, var(--k1), var(--k2)); box-shadow: 0 4px 0 rgba(0, 0, 0, 0.2), inset 0 2px 0 rgba(255, 255, 255, 0.45); text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35); }
.lv-how { margin-top: 14px; }
.lv-how summary { cursor: pointer; font-family: var(--display); font-weight: 800; font-size: 15px; color: #17751a; padding: 4px 0; }
.lv-how ul { list-style: none; margin: 8px 0; padding: 0; display: grid; gap: 4px; }
.lv-how li { display: flex; align-items: baseline; gap: 8px; padding: 6px 10px; border-radius: 12px; background: #f1faed; font-size: 14px; font-weight: 600; color: #2f5d36; }
.lv-how li span { flex: 1; } .lv-how li em { font-style: normal; color: #7a9a7e; font-size: 13px; } .lv-how li b { min-width: 52px; text-align: right; font-family: var(--display); color: #c98200; }

/* ---------- po sesji ---------- */
.lv-strip { display: flex; align-items: center; gap: 14px; margin: 14px 0; padding: 12px 16px; border-radius: 22px; background: linear-gradient(180deg, #ffffff 0%, #f2ffe9 100%); border: 2.5px solid #3bdc1e; box-shadow: 0 4px 0 #23a80f, 0 14px 22px -12px rgba(20, 110, 10, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.9); animation: lv-in 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) 0.3s backwards; }
.lv-strip-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.lv-strip-top { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.lv-gain { font-family: var(--display); font-size: 24px; font-weight: 800; color: #c98200; text-shadow: 0 1px 0 #fff; }
.lv-strip-top span { font-family: var(--display); font-size: 15px; font-weight: 800; color: #17751a; }
.lv-strip small { font-size: 12.5px; font-weight: 700; color: #4a8a4f; }
@keyframes lv-in { from { opacity: 0; transform: translateY(18px) scale(0.92); } }

/* ---------- okienko awansu ---------- */
.lv-overlay { position: fixed; inset: 0; z-index: 1500; display: grid; place-items: center; padding: 20px; overflow: hidden; background: rgba(8, 44, 14, 0.58); backdrop-filter: blur(3px); animation: lv-fade 0.25s ease; }
.lv-overlay.out { opacity: 0; transition: opacity 0.2s ease; }
@keyframes lv-fade { from { opacity: 0; } }
.lv-up { position: relative; width: min(330px, 100%); padding: 56px 22px 22px; text-align: center; border-radius: 30px; background: linear-gradient(180deg, #ffffff 0%, #effde6 100%); border: 4px solid #3bdc1e; box-shadow: 0 7px 0 #23a80f, 0 30px 50px -16px rgba(0, 0, 0, 0.55); animation: lv-card 0.6s cubic-bezier(0.34, 1.56, 0.64, 1); overflow: visible; }
@keyframes lv-card { from { opacity: 0; transform: scale(0.6) translateY(40px); } }
.lv-rays { position: absolute; left: 50%; top: 96px; width: 340px; height: 340px; margin: -170px 0 0 -170px; border-radius: 50%; z-index: 0; pointer-events: none; opacity: 0.8; animation: hf-spin 24s linear infinite;
  background: repeating-conic-gradient(from 0deg, rgba(255, 224, 102, 0.6) 0 8deg, rgba(255, 224, 102, 0) 8deg 24deg); -webkit-mask-image: radial-gradient(closest-side, #000 20%, transparent 72%); mask-image: radial-gradient(closest-side, #000 20%, transparent 72%); }
.lv-bird { position: absolute; right: -26px; top: -58px; width: 112px; z-index: 3; filter: drop-shadow(0 10px 8px rgba(20, 90, 10, 0.35)); animation: lv-bird 3.2s ease-in-out infinite alternate; }
@keyframes lv-bird { from { transform: translate(0, 4px) rotate(-6deg); } to { transform: translate(-6px, -8px) rotate(4deg); } }
.lv-over { position: relative; z-index: 1; display: inline-block; padding: 4px 16px; border-radius: 999px; font-family: var(--display); font-size: 14px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; color: #fff; background: linear-gradient(180deg, #8ff04f 0%, #33c515 100%); box-shadow: 0 3px 0 #1f9a0c, inset 0 2px 0 rgba(255, 255, 255, 0.5); text-shadow: 0 1px 0 #1c7a0b; }
.lv-up .lv-medal { position: relative; z-index: 1; margin: 18px auto 10px; animation: lv-medal 0.9s cubic-bezier(0.34, 1.56, 0.64, 1) 0.25s backwards; }
.lv-up .lv-medal.big { width: 104px; height: 104px; font-size: 52px; }
@keyframes lv-medal { from { opacity: 0; transform: scale(0.1) rotate(-200deg); } }
.lv-up .lv-rank { position: relative; z-index: 1; font-size: 30px; }
.lv-reward { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; margin: 12px 0 16px; font-size: 16px; font-weight: 700; color: #4a8a4f; }
.lv-reward img { width: 30px; height: 30px; object-fit: contain; }
.lv-reward b { font-family: var(--display); font-size: 22px; color: #c98200; }
.lv-go { position: relative; z-index: 1; width: 100%; height: 52px; border: 0; border-radius: 999px; cursor: pointer; font-family: var(--display); font-size: 20px; font-weight: 800; color: #fff; background: linear-gradient(180deg, #8ff04f 0%, #2fbf12 100%); box-shadow: 0 5px 0 #1f9a0c, 0 14px 20px -8px rgba(20, 110, 10, 0.6), inset 0 2px 0 rgba(255, 255, 255, 0.5); text-shadow: 0 1px 0 #1c7a0b; transition: transform 0.12s ease, box-shadow 0.12s ease; }
.lv-go:active { transform: translateY(4px); box-shadow: 0 1px 0 #1f9a0c; }

/* ---------- ciemny motyw ---------- */
:root[data-theme="dark"] .lv-card, :root[data-theme="dark"] .lv-strip, :root[data-theme="dark"] .lv-up { background: #24212f; border-color: #3bdc1e; }
:root[data-theme="dark"] .lv-rank, :root[data-theme="dark"] .lv-how li { color: #e4e6f0; }
:root[data-theme="dark"] .lv-how li, :root[data-theme="dark"] .lv-rk.got { background: #2d2a3a; }
:root[data-theme="dark"] .lv-rk { background: #2a2733; }
:root[data-theme="dark"] .lv-who small, :root[data-theme="dark"] .lv-xp, :root[data-theme="dark"] .lv-strip small, :root[data-theme="dark"] .lv-reward { color: #a8c8ad; }
:root[data-theme="dark"] .lv-rk.got { color: #d6f5da; }
:root[data-theme="dark"] .lv-bar { background: rgba(255, 255, 255, 0.12); }

@media (prefers-reduced-motion: reduce) { .lv-rays, .lv-bird, .lv-medal, .lv-up, .lv-strip { animation: none !important; } }