/* Ścieżka poziomów: ramki portretu, tytuł, „Następna nagroda”, wybór stylu i ceremonia awansu. */
:root{--lvl-mint:#25f4c8;--lvl-violet:#755cff;--lvl-ink:#f6f7ff;--lvl-muted:#9aa4ca}

/* Ramka = świetlista aureola za postacią; kolor rośnie z kamieniami milowymi. */
.lvl-frame{position:relative;isolation:isolate}
.lvl-frame::before{content:"";position:absolute;z-index:-1;left:50%;top:50%;width:min(92%,210px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;padding:5px;background:var(--lvl-frame);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0);box-shadow:0 0 28px var(--lvl-glow);pointer-events:none}
.lvl-frame--bronze{--lvl-frame:conic-gradient(from 40deg,#8a4b22,#e3a66b,#a85d2c,#f2c28e,#8a4b22);--lvl-glow:rgba(227,166,107,.35)}
.lvl-frame--silver{--lvl-frame:conic-gradient(from 40deg,#7d8794,#f4f7fb,#a9b3c0,#ffffff,#7d8794);--lvl-glow:rgba(220,230,245,.35)}
.lvl-frame--gold{--lvl-frame:conic-gradient(from 40deg,#a8780f,#ffe27a,#c9930f,#fff3b0,#a8780f);--lvl-glow:rgba(255,214,90,.45)}
.lvl-frame--legend{--lvl-frame:conic-gradient(from 0deg,#25f4c8,#5be1ff,#755cff,#ff3e9d,#ffd65a,#25f4c8);--lvl-glow:rgba(117,92,255,.55)}
.lvl-frame--legend::before{animation:lvl-spin 9s linear infinite}

.lvl-title{display:inline-block;margin:4px auto 0;padding:3px 10px;border:1px solid rgba(37,244,200,.35);border-radius:999px;background:rgba(37,244,200,.08);color:var(--lvl-mint);font:700 .72rem/1.3 'Chakra Petch','Manrope',system-ui,sans-serif;letter-spacing:.12em;text-transform:uppercase}
.gh-bohater .lvl-title{display:table;margin:6px auto 0}

/* Najbliższa nagroda pod paskiem XP. */
.lvl-next{width:min(380px,100%);margin:12px auto 0;padding:10px 14px;border:1px solid rgba(117,92,255,.42);border-radius:14px;background:linear-gradient(135deg,rgba(117,92,255,.14),rgba(37,244,200,.07));text-align:left;display:grid;gap:4px;color:var(--lvl-ink)}
.lvl-next.is-milestone{border-color:rgba(255,214,90,.55);background:linear-gradient(135deg,rgba(255,214,90,.14),rgba(117,92,255,.1))}
.lvl-next-label{font:700 .66rem/1.3 'Chakra Petch','Manrope',system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--lvl-muted)}
.lvl-next ul{list-style:none;margin:0;padding:0;display:grid;gap:2px;font-size:.9rem;font-weight:600}
.lvl-next b{font-size:.9rem}
.lvl-next small{color:var(--lvl-mint);font-size:.78rem;font-weight:700}
.lvl-unlock{display:flex;gap:7px;align-items:baseline}
.lvl-unlock>span{flex:none;width:1.2em;text-align:center}

.lvl-style{width:min(380px,100%);margin:8px auto 0;text-align:left;font-size:.85rem;color:var(--lvl-muted)}
.lvl-style>summary{cursor:pointer;color:var(--lvl-mint);font-weight:700}
.lvl-style label{display:grid;gap:4px;margin-top:8px}
.lvl-style select{min-height:40px;padding:0 10px;border:1px solid rgba(117,92,255,.45);border-radius:10px;background:rgba(5,8,18,.75);color:var(--lvl-ink);font:inherit}
.lvl-style-status{min-height:1em;margin:6px 0 0;color:var(--lvl-mint)}

/* Legenda poziomów: kamienie milowe wyróżnione, przyszłe nagrody przygaszone. */
.gh-level-panel li.is-next em{opacity:.75}
.gh-level-panel li.is-milestone b{color:#ffd65a}

/* Ceremonia awansu. */
.lvl-ceremony{margin:auto;width:min(520px,calc(100vw - 24px));max-height:calc(100svh - 24px);overflow:auto;padding:30px 22px 24px;border:1px solid rgba(117,92,255,.5);border-radius:22px;background:radial-gradient(circle at 50% 22%,rgba(37,244,200,.16),transparent 45%),#0a0d1a;color:var(--lvl-ink);text-align:center;box-shadow:0 30px 100px rgba(0,0,0,.6)}
.lvl-ceremony::backdrop{background:rgba(3,5,12,.78);backdrop-filter:blur(4px)}
.lvl-ceremony-kicker{font:700 .72rem/1.2 'Chakra Petch','Manrope',system-ui,sans-serif;letter-spacing:.28em;color:var(--lvl-mint)}
.lvl-ceremony-portrait{position:relative;width:200px;height:200px;margin:12px auto 0;display:grid;place-items:center;animation:lvl-pop .7s cubic-bezier(.16,1,.3,1) backwards}
.lvl-ceremony-portrait img{width:180px;height:180px;object-fit:contain;filter:drop-shadow(0 16px 36px rgba(117,92,255,.45))}
.lvl-ceremony-badge{position:absolute;right:4px;bottom:14px;padding:6px 10px;border-radius:8px;background:linear-gradient(110deg,var(--lvl-mint),#5be1ff);color:#06110f;font:700 .82rem/1 'Chakra Petch','Manrope',system-ui,sans-serif;letter-spacing:.1em;box-shadow:0 0 22px rgba(37,244,200,.4)}
.lvl-ceremony h2{margin:10px 0 2px;font:700 clamp(2.2rem,9vw,3.2rem)/1 'Chakra Petch','Manrope',system-ui,sans-serif;letter-spacing:-.02em;color:#fff}
.lvl-ceremony-sub{margin:8px 0 0;color:var(--lvl-muted);font-size:.9rem}
.lvl-ceremony-gain{display:inline-block;margin:14px 0 0;padding:8px 14px;border-radius:12px;background:rgba(37,244,200,.1);color:var(--lvl-mint);font-weight:800}
.lvl-ceremony-levels{display:grid;gap:10px;margin-top:16px;text-align:left}
.lvl-ceremony-level{padding:10px 14px;border:1px solid rgba(117,92,255,.35);border-radius:14px;background:rgba(117,92,255,.08)}
.lvl-ceremony-level.is-milestone{border-color:rgba(255,214,90,.55);background:rgba(255,214,90,.08)}
.lvl-ceremony-level h3{margin:0 0 6px;font:700 .76rem/1.2 'Chakra Petch','Manrope',system-ui,sans-serif;letter-spacing:.16em;text-transform:uppercase;color:var(--lvl-muted)}
.lvl-ceremony-level ul{list-style:none;margin:0;padding:0;display:grid;gap:4px;font-weight:600}
.lvl-ceremony-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px;margin-top:20px}
.lvl-ceremony-confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.lvl-ceremony-confetti i{position:absolute;top:-4%;width:6px;height:13px;background:var(--lvl-mint);opacity:0;animation:lvl-fall 1.8s ease-out both}
.lvl-ceremony-confetti i:nth-child(3n){background:#ff3e9d}.lvl-ceremony-confetti i:nth-child(3n+1){background:#806cff}
.lvl-ceremony-confetti i:nth-child(1){left:6%;animation-delay:.05s}.lvl-ceremony-confetti i:nth-child(2){left:14%;animation-delay:.2s}.lvl-ceremony-confetti i:nth-child(3){left:22%;animation-delay:.1s}.lvl-ceremony-confetti i:nth-child(4){left:30%;animation-delay:.3s}.lvl-ceremony-confetti i:nth-child(5){left:38%}.lvl-ceremony-confetti i:nth-child(6){left:46%;animation-delay:.25s}.lvl-ceremony-confetti i:nth-child(7){left:54%;animation-delay:.12s}.lvl-ceremony-confetti i:nth-child(8){left:62%;animation-delay:.35s}.lvl-ceremony-confetti i:nth-child(9){left:70%;animation-delay:.08s}.lvl-ceremony-confetti i:nth-child(10){left:78%;animation-delay:.22s}.lvl-ceremony-confetti i:nth-child(11){left:86%;animation-delay:.15s}.lvl-ceremony-confetti i:nth-child(12){left:94%;animation-delay:.4s}.lvl-ceremony-confetti i:nth-child(13){left:10%;animation-delay:.5s}.lvl-ceremony-confetti i:nth-child(14){left:34%;animation-delay:.45s}.lvl-ceremony-confetti i:nth-child(15){left:58%;animation-delay:.55s}.lvl-ceremony-confetti i:nth-child(16){left:82%;animation-delay:.6s}.lvl-ceremony-confetti i:nth-child(17){left:50%;animation-delay:.65s}
@keyframes lvl-spin{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes lvl-pop{from{opacity:0;transform:scale(.7)}to{opacity:1;transform:none}}
@keyframes lvl-fall{0%{opacity:0;transform:translateY(0) rotate(0)}10%{opacity:1}100%{opacity:0;transform:translateY(520px) rotate(540deg)}}
@media(prefers-reduced-motion:reduce){.lvl-frame--legend::before,.lvl-ceremony-portrait,.lvl-ceremony-confetti i{animation:none!important}.lvl-ceremony-confetti{display:none}}
/* Na ekranie karty NFC aureola zastępuje poświatę portretu (ten sam ::before). */
.nfc-player-portrait.lvl-frame::before{inset:auto;left:50%;top:50%;width:196px}
@media(max-width:560px){.nfc-player-portrait.lvl-frame::before{width:160px}}
/* Profil: kontener portretu rozciąga się na wysokość wiersza — aureola wokół obrazka 140×210 u góry. */
.adventure-profile-portrait.lvl-frame::before{top:105px;width:168px}