/* ═══════════════════════════════════════════════════════════════════
   hero-panel-v7.css — „Wielka Szczelina" (panel profilu, lewa kolumna)

   Siodma wersja, 07.09.2026. Po v6 („Portal": male rozdarcie nad
   kamienna tablica) Mark: „ok lepiej, tylko gracz wybiera sobie ramke,
   ktorej chce uzywac; lubie koncept szczelin, ale urozmaic je i cale
   menu, nowe tlo, moze cala kolumna jako jedna wielka szczelina?".

   Wiec CALA KOLUMNA JEST JEDNYM ROZDARCIEM. Na zewnatrz — pustka: czarne
   niebo z pekniecia mi (img/rift/sky-bg-portrait.webp przyciemnione).
   W srodku — tamten swiat (img/home/bg-portrait.webp: zamek w zorzy,
   do czasu ilustracji per klasa z notes/profil-v7-grafiki.md), ktory
   plynie, ma smuge swiatla i unoszace sie pylki. Wzdluz poszarpanej
   krawedzi biegna dwa blyski, a z krawedzi lecs iskry. Wszystko, co jest
   profilem, STOI W SRODKU szczeliny:

     .h7-top     nad szpicem, w pustce: ⚙ · zloto · diamenty · ✉
     .h7-stage   medalion z portretem W RAMCE GRACZA (gv-frame-*, na
                 dziecku .hero-profile-avatar-wrap — tak, jak ramki sa
                 napisane), za nim runiczny pierscien (img/rift/rune-ring)
                 obraca sie powoli; pety jako kule swiatla po bokach;
                 poziom na tabliczce pod medalionem
     .h7-name    imie zlotym rytem + klasa
     .h7-tablet  polprzezroczysta kamienna tablica: arena · MOC · iLvl,
                 XP, zakladki, gniazda, klejnoty, plecak
     .h7-ground  Premium / Przepustka i cztery ikony przy dolnym szpicu

   Ksztalt rozdarcia (_H7_TEAR w js/ui.js) jest w jednostkach 0..1
   (clipPathUnits=objectBoundingBox), wiec rozciaga sie na cala kolumne
   bez wzgledu na to, ile tresci ma w srodku. Krawedz rysuje SVG
   z preserveAspectRatio=none i vector-effect=non-scaling-stroke, zeby
   linia miala te sama grubosc niezaleznie od skali.

   Kolor rozdarcia (--pc): wojownik zar, mag arkana, tancerz wiatr,
   Zalozyciel zloto (+ promienie). Frakcja: sygnet w rogu pustki.
   ═══════════════════════════════════════════════════════════════════ */

.h7 {
  --rf2-text: #F0EAFF;
  --rf2-dim: #CBC2E8;
  --rf2-gold: #FFD46A;
  --rf2-gold-deep: #C8A84E;
  --rf2-line: rgba(200, 168, 78, 0.5);
  --rf2-shadow-text: 0 2px 10px rgba(0, 0, 0, 0.85), 0 0 2px rgba(0, 0, 0, 0.9);
  --pc: #BF5FFF;
  --pc-soft: color-mix(in srgb, var(--pc) 35%, transparent);
  --h7-r-common: #B0B0B0; --h7-r-uncommon: #5ED87A; --h7-r-rare: #4FACFE;
  --h7-r-epic: #BF5FFF; --h7-r-legendary: #FFB340; --h7-r-mythic: #FF4757;
  position: relative; min-height: 100%;
  color: var(--rf2-text); font-family: var(--font-body, 'Inter', sans-serif); font-size: 13px; line-height: 1.3;
  background: #040110;
  isolation: isolate; overflow: hidden;
  -webkit-user-select: none; user-select: none;
}
.h7.hp-class-warrior      { --pc: #FF8A5B; }
.h7.hp-class-mage         { --pc: #4FACFE; }
.h7.hp-class-blade_dancer { --pc: #2ED573; }
.h7.founder               { --pc: #FFD46A; }

.h7 *, .h7 *::before, .h7 *::after { box-sizing: border-box; }
.h7 button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.h7 img { display: block; }

body.gv-hero-v5 #sidebarLeft { padding: 0 !important; background: #040110 !important; }
body.gv-hero-v5 #sidebarHeroContent { min-height: 100%; }
body.gv-hero-v5 #sidebarHeroContent > .h7 { min-height: 100%; }
#panelHero > .h7 { max-width: 440px; margin: 0 auto; border-radius: 14px; }

/* ─── Warstwy sceny (wszystkie absolutne, tresc lezy nad nimi) ───── */
.h7-layer { position: absolute; inset: 0; pointer-events: none; }
/* Pustka: osobna, niemal czarna warstwa; rozdarcie pozostaje jedynym zrodlem swiatla. */
.h7-void { z-index: 0; background: #040110 url('../img/profile/void.webp') center / cover no-repeat; opacity: 1; }
/* Poswiata rozdarcia: ten sam ksztalt, rozmyty, w kolorze klasy. */
.h7-glow { z-index: 1; overflow: visible; }
.h7-glow svg { width: 100%; height: 100%; overflow: visible; filter: blur(16px); }
.h7-glow path { fill: var(--pc); opacity: .55; animation: h7Pulse 4s ease-in-out infinite; }
@keyframes h7Pulse { 0%, 100% { opacity: .45; } 50% { opacity: .75; } }
/* Tamten swiat, przyciety ksztaltem rozdarcia. */
.h7-world { z-index: 2; overflow: hidden; background: #0d0724; }
.h7-world > img { position: absolute; left: -6%; top: -4%; width: 112%; height: 108%; object-fit: cover; object-position: center 30%; animation: rf3Drift 32s linear infinite; }
/* Tint: kolor klasy od gory, ciemnosc od dolu (pod tablica i posadzka). */
.h7-world::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 40% at 50% 18%, var(--pc-soft) 0%, transparent 70%), linear-gradient(180deg, rgba(6, 2, 18, 0.15) 0%, rgba(6, 2, 18, 0.05) 25%, rgba(6, 2, 18, 0.55) 55%, rgba(6, 2, 18, 0.85) 80%, #060212 100%); }
/* Smuga swiatla po szkle. */
.h7-world::after { content: ''; position: absolute; top: -10%; bottom: -10%; left: -40%; width: 30%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.10), transparent); transform: skewX(-12deg); animation: h7Sweep 11s linear infinite; }
@keyframes h7Sweep { 0%, 50% { left: -40%; } 100% { left: 130%; } }
/* Pylki unoszace sie po tamtej stronie. */
.h7-motes i { position: absolute; bottom: 8%; width: 3px; height: 3px; border-radius: 50%; background: #fffbe8; box-shadow: 0 0 6px #fff, 0 0 12px var(--pc); opacity: 0; animation: h7Rise 7s ease-out infinite; animation-delay: var(--d, 0s); left: var(--x, 50%); }
.h7-motes i:nth-child(odd) { width: 2px; height: 2px; }
@keyframes h7Rise { 0% { transform: translateY(0) scale(.6); opacity: 0; } 12% { opacity: .9; } 100% { transform: translateY(-380px) translateX(var(--sx, 10px)) scale(1); opacity: 0; } }
/* Krawedz: jasna linia, migoce; po niej biegna dwa blyski. */
.h7-edge { z-index: 3; overflow: visible; }
.h7-edge svg { width: 100%; height: 100%; overflow: visible; }
.h7-edge .e { fill: none; stroke: #fff7d6; stroke-width: 1.6px; vector-effect: non-scaling-stroke; stroke-linejoin: round; filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 9px var(--pc)); opacity: .95; animation: rf3Flicker 5s steps(1, end) infinite; }
.h7-edge .b { fill: none; stroke: #fff; stroke-width: 2.4px; vector-effect: non-scaling-stroke; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 10px var(--rf2-gold)); }
.h7-edge .b1 { stroke-dasharray: 7 193; animation: rf3Run 5.5s linear infinite; }
.h7-edge .b2 { stroke-dasharray: 4 196; animation: rf3Run 8s linear infinite; animation-delay: -3.7s; stroke: var(--pc); filter: drop-shadow(0 0 6px var(--pc)); }
/* Iskry wylatuja z krawedzi na zewnatrz. */
.h7-sparks { z-index: 4; }
.h7-sparks i { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #fff; box-shadow: 0 0 6px #fff, 0 0 12px var(--pc); opacity: 0; animation: rf3Spark 3.4s ease-out infinite; animation-delay: var(--d, 0s); left: var(--x); top: var(--y); }
.h7-sparks i:nth-child(even) { width: 3px; height: 3px; }

.h7 > .h7-c { position: relative; z-index: 5; }

/* ─── Gorny pasek w pustce ─────────────────────────────────────────── */
.h7-top { display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px 0 8px; z-index: 6; }
.h7-ibtn { width: 32px; height: 32px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; position: relative; opacity: .85; transition: opacity .15s, filter .15s; }
.h7-ibtn img { width: 18px; height: 18px; filter: drop-shadow(0 1px 3px rgba(0,0,0,.9)); }
.h7-ibtn:hover { opacity: 1; filter: drop-shadow(0 0 6px rgba(255, 212, 106, 0.6)); }
.h7-badge { position: absolute; top: 1px; right: -1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #FF4757; color: #fff; font: 700 10px/16px var(--font-body); text-align: center; box-shadow: 0 0 0 2px #0a0518; }
.h7-cur { flex: 1; display: flex; align-items: center; justify-content: center; gap: 14px; min-width: 0; }
.h7-cur-item { display: inline-flex; align-items: center; gap: 5px; font: 600 13px/1 var(--font-display); letter-spacing: .3px; text-shadow: var(--rf2-shadow-text); white-space: nowrap; }
.h7-cur-item img { width: 16px; height: 16px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.9)); }
.h7-cur-item.gold { color: var(--rf2-gold); }
.h7-cur-item.dia { color: #9fe6ff; cursor: pointer; }
.h7-topup { width: 16px; height: 16px; border-radius: 50%; margin-left: 1px; border: 1px solid rgba(159, 230, 255, 0.6); color: #9fe6ff; font: 700 12px/13px var(--font-body); text-align: center; transition: background .15s, color .15s; }
.h7-topup:hover { background: #9fe6ff; color: #06121a; }
.h7 .hpv9-gear-wrap { position: relative; }
.h7 .hpv9-dropdown { display: none; position: absolute; left: 0; top: 36px; z-index: 40; min-width: 210px; padding: 6px; border-radius: 10px; background: rgba(10, 5, 26, 0.97); border: 1px solid var(--rf2-line); box-shadow: 0 14px 34px rgba(0,0,0,.6); }
.h7 .hpv9-gear-wrap.open .hpv9-dropdown { display: block; }
.h7 .hpv9-dd-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; cursor: pointer; color: var(--rf2-text); font-size: 13px; }
.h7 .hpv9-dd-item:hover { background: rgba(255, 212, 106, 0.08); }
.h7 .hpv9-dd-item.danger { color: #ff7b86; }
.h7 .hpv9-dd-item .ic img { width: 16px; height: 16px; }
.h7 .hpv9-dd-tx { display: flex; flex-direction: column; }
.h7 .hpv9-dd-sub { font-size: 10px; color: var(--rf2-dim); }
.h7 .hpv9-dd-sep { height: 1px; margin: 4px 8px; background: rgba(200, 168, 78, 0.2); }

.h7-sigil { position: absolute; right: 12px; top: 46px; z-index: 6; width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 16px; color: var(--rf2-gold); text-shadow: 0 0 10px var(--rf2-gold), var(--rf2-shadow-text); border: 1px solid var(--rf2-line); background: rgba(6, 3, 14, 0.55); cursor: pointer; }
.h7-sigil:hover { box-shadow: 0 0 12px rgba(255, 212, 106, 0.5); }

.h7-event { display: flex; align-items: center; gap: 10px; width: 62%; margin: 2px auto 0; padding: 5px 10px; border-radius: 999px; text-align: left; background: rgba(255, 71, 87, 0.16); border: 1px solid rgba(255, 71, 87, 0.5); }
.h7-event-ttl { font: 600 11px/1.2 var(--font-display); color: #ffd9dc; letter-spacing: .4px; }
.h7-event-sub { font-size: 10px; color: var(--rf2-dim); }
.h7-event-live { margin-left: auto; font: 800 10px/1 var(--font-body); color: #FF4757; letter-spacing: 1px; animation: rf3Flicker 5s steps(1, end) infinite; }

/* ─── Scena: medalion w ramce gracza ──────────────────────────────── */
.h7-stage { position: relative; display: flex; flex-direction: column; align-items: center; padding: 22px 0 0; }
.h7-medal { position: relative; width: 150px; height: 150px; }
/* Runiczny pierscien za medalionem — obraca sie, swieci kolorem klasy. */
.h7-rune { position: absolute; left: 50%; top: 50%; width: 232px; height: 232px; transform: translate(-50%, -50%); z-index: 0; pointer-events: none; opacity: .85; filter: drop-shadow(0 0 10px var(--pc-soft)); }
.h7-rune img { width: 100%; height: 100%; animation: h7Turn 70s linear infinite; }
@keyframes h7Turn { to { transform: rotate(360deg); } }
.h7-rays { position: absolute; left: 50%; top: 50%; width: 320px; height: 320px; transform: translate(-50%, -50%); z-index: 0; pointer-events: none; background: url('../img/profile/founder-rays.webp') center / contain no-repeat; opacity: .6; animation: h7Spin 45s linear infinite; -webkit-mask: radial-gradient(circle, #000 30%, transparent 72%); mask: radial-gradient(circle, #000 30%, transparent 72%); }
@keyframes h7Spin { to { transform: translate(-50%, -50%) rotate(360deg); } }
/* Poswiata klasy za samym portretem. */
.h7-medal::before { content: ''; position: absolute; inset: -30px; border-radius: 50%; background: radial-gradient(circle, var(--pc-soft) 0%, transparent 65%); z-index: 0; animation: h7Pulse 4s ease-in-out infinite; }
/* .hero-profile-avatar-wrap = klik do wyboru; RAMKA GRACZA na dziecku
   (.h7-medal-in.gv-frame-*), bo tak sa napisane reguly ramek w style.css
   (aureole Zalozyciela: `.hero-profile-avatar-wrap .gv-frame-founder::before`). */
.h7-medal .hero-profile-avatar-wrap { position: absolute; inset: 0; z-index: 1; width: 100% !important; height: 100% !important; margin: 0 !important; cursor: pointer; border-radius: 50%; }
.h7-medal-in { position: absolute; inset: 0; border-radius: 50%; overflow: visible; background: radial-gradient(circle at 50% 42%, #2a1a4a 0%, #0d0720 78%); box-shadow: 0 12px 30px rgba(0,0,0,.7), inset 0 0 22px rgba(0,0,0,.6); transition: transform .2s; }
.h7-medal .hero-profile-avatar-wrap:hover .h7-medal-in { transform: scale(1.03); }
.h7-medal-in .hero-profile-avatar { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 20%; border-radius: 50% !important; animation: h7Breathe 6s ease-in-out infinite; }
@keyframes h7Breathe { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.02); } }
.h7-lv { position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); z-index: 3; width: 96px; height: 28px; display: flex; align-items: center; justify-content: center; font: 700 12px/1 var(--font-display); letter-spacing: .8px; color: var(--rf2-gold); text-shadow: var(--rf2-shadow-text); filter: drop-shadow(0 4px 8px rgba(0,0,0,.7)); }
.h7-lv img { position: absolute; inset: -2px -10px; width: calc(100% + 20px); height: calc(100% + 4px); object-fit: fill; z-index: -1; }
.h7-lv span { position: relative; }

.h7-pets { position: absolute; left: 0; right: 0; top: 96px; z-index: 3; display: flex; justify-content: space-between; padding: 0 30px; pointer-events: none; }
.h7-pet { width: 44px; height: 44px; border-radius: 50%; position: relative; pointer-events: auto; cursor: pointer; background: radial-gradient(circle at 50% 38%, #2a1a4a, #0b0618 75%); border: 1.5px solid rgba(200, 168, 78, 0.45); box-shadow: 0 0 14px var(--pc-soft), 0 6px 14px rgba(0,0,0,.7); display: flex; align-items: center; justify-content: center; transition: transform .15s; }
.h7-pet:hover { transform: scale(1.1); }
.h7-pet img { width: 32px; height: 32px; object-fit: contain; border-radius: 50%; }
.h7-pet.empty { box-shadow: 0 6px 14px rgba(0,0,0,.7); border-style: dashed; }
.h7-pet.empty img { opacity: .22; filter: grayscale(1); }
.h7-pet.filled.r-uncommon { border-color: var(--h7-r-uncommon); }
.h7-pet.filled.r-rare { border-color: var(--h7-r-rare); }
.h7-pet.filled.r-epic { border-color: var(--h7-r-epic); }
.h7-pet.filled.r-legendary { border-color: var(--h7-r-legendary); }
.h7-pet.filled.r-mythic { border-color: var(--h7-r-mythic); }
.h7-pet-lvl { position: absolute; right: -5px; bottom: -4px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #0a0518; border: 1px solid var(--rf2-line); color: var(--rf2-gold); font: 700 9px/14px var(--font-body); text-align: center; }

/* ─── Imie ────────────────────────────────────────────────────────── */
.h7-name-wrap { display: flex; flex-direction: column; align-items: center; padding: 22px 30px 0; text-align: center; }
.h7-name { position: relative; margin: 0; padding: 0 18px; max-width: 100%; font: 700 22px/1.15 var(--font-display); letter-spacing: 1.5px; text-transform: uppercase; color: var(--rf2-gold); text-shadow: var(--rf2-shadow-text), 0 0 24px rgba(255, 212, 106, 0.3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h7-name::before, .h7-name::after { content: ''; position: absolute; top: 55%; width: 40px; height: 1px; background: linear-gradient(90deg, transparent, var(--rf2-gold-deep)); }
.h7-name::before { right: 100%; }
.h7-name::after { left: 100%; transform: scaleX(-1); }
.h7-name .prem-name, .h7-name .gv-prem-name { color: inherit; }
.h7-sub { margin-top: 3px; font-size: 9.5px; letter-spacing: 1.8px; text-transform: uppercase; color: var(--rf2-dim); text-shadow: var(--rf2-shadow-text); display: flex; align-items: center; gap: 8px; }
.h7-sub b { color: var(--pc); font-weight: 800; text-shadow: 0 0 8px var(--pc-soft), var(--rf2-shadow-text); }
.h7-sub .dot { width: 3px; height: 3px; border-radius: 50%; background: var(--rf2-gold-deep); }

/* ─── Tablica: kamien, przez ktory przeswituje tamten swiat ────────── */
.h7-tablet { position: relative; margin: 12px 26px 0; padding: 18px 12px 12px; background: linear-gradient(180deg, rgba(58, 38, 96, 0.5) 0%, rgba(24, 14, 46, 0.82) 18%, rgba(12, 7, 26, 0.88) 100%); border: 1px solid rgba(200, 168, 78, 0.42); border-radius: 22px 22px 8px 8px; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 -12px 24px rgba(0, 0, 0, 0.45); backdrop-filter: blur(2px); }
.h7-tablet::before { content: ''; position: absolute; top: 9px; left: 14%; right: 14%; height: 1px; background: linear-gradient(90deg, transparent, var(--pc) 30%, var(--pc) 70%, transparent); box-shadow: 0 0 8px var(--pc-soft); }
.h7-tablet::after { content: ''; position: absolute; top: 5px; left: 50%; width: 8px; height: 8px; margin-left: -4px; background: var(--rf2-gold); transform: rotate(45deg); box-shadow: 0 0 8px rgba(255, 212, 106, 0.8); }

.h7-facts { display: flex; align-items: stretch; justify-content: center; padding: 2px 0 6px; }
.h7-fact { position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 2px 4px; border-radius: 10px; color: inherit; text-align: center; transition: background .15s; }
.h7-fact:hover { background: rgba(255, 212, 106, 0.06); }
.h7-fact + .h7-fact::before { content: ''; position: absolute; left: 0; top: 20%; height: 60%; width: 1px; background: rgba(200, 168, 78, 0.35); }
.h7-fact b { font: 700 20px/1.05 var(--font-display); color: #fff; text-shadow: var(--rf2-shadow-text); }
.h7-fact.power { flex: 1.3; }
.h7-fact.power b { font-size: 24px; color: var(--rf2-gold); text-shadow: var(--rf2-shadow-text), 0 0 18px rgba(255, 212, 106, 0.35); animation: h7Glow 3s ease-in-out infinite; }
@keyframes h7Glow { 0%, 100% { text-shadow: var(--rf2-shadow-text), 0 0 14px rgba(255, 212, 106, 0.25); } 50% { text-shadow: var(--rf2-shadow-text), 0 0 26px rgba(255, 212, 106, 0.6); } }
.h7-fact i { font-style: normal; font-size: 8.5px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--rf2-dim); }
.h7-fact img { width: 22px; height: 22px; object-fit: contain; margin-bottom: -2px; filter: drop-shadow(0 0 6px rgba(255, 212, 106, 0.4)); }
.h7-fact .rk { font-size: 8px; letter-spacing: 1px; text-transform: uppercase; font-weight: 800; }

.h7-xp { padding: 2px 4px 8px; }
.h7-xp-track { position: relative; height: 7px; border-radius: 999px; overflow: hidden; background: rgba(6, 3, 14, 0.75); border: 1px solid rgba(200, 168, 78, 0.45); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.8); }
.h7-xp-track > i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(180deg, #fff1c2 0%, var(--rf2-gold) 55%, #b8862a 100%); box-shadow: 0 0 10px rgba(255, 212, 106, 0.8); transition: width .6s ease; }
.h7-xp-txt { display: flex; justify-content: space-between; margin-top: 4px; font-size: 9.5px; letter-spacing: .3px; color: var(--rf2-dim); }
.h7-xp-txt b { color: var(--rf2-text); font-weight: 700; }

.h7-tabs { display: flex; justify-content: center; gap: 26px; border-top: 1px solid rgba(200, 168, 78, 0.16); border-bottom: 1px solid rgba(200, 168, 78, 0.16); }
.h7-tab { position: relative; padding: 8px 2px; font: 700 10.5px/1 var(--font-display); letter-spacing: 1.6px; text-transform: uppercase; color: var(--rf2-dim); opacity: .7; transition: color .15s, opacity .15s; }
.h7-tab:hover { opacity: 1; }
.h7-tab.on { color: var(--rf2-gold); opacity: 1; text-shadow: 0 0 10px rgba(255, 212, 106, 0.45); }
.h7-tab.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; background: var(--rf2-gold); box-shadow: 0 0 8px rgba(255, 212, 106, 0.6); }
.h7 .hb-hide { display: none !important; }

.h7-gear { padding: 10px 0 0; }
.h7-eq-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 7px; }
.h7-eq { position: relative; aspect-ratio: 1; min-width: 0; border-radius: 10px; cursor: pointer; background: #0b0618 url('../img/profile/v5-socket.webp') center / 100% 100% no-repeat; border: 1px solid rgba(255, 255, 255, 0.06); box-shadow: inset 0 2px 8px rgba(0,0,0,.8); display: flex; align-items: center; justify-content: center; transition: transform .15s; }
.h7-eq:hover { transform: translateY(-2px); }
.h7-eq.empty { cursor: default; border-style: dashed; border-color: rgba(200, 168, 78, 0.2); }
.h7-eq.empty:hover { transform: none; }
.h7-eq-empty { font: 700 9.5px/1 var(--font-display); letter-spacing: 1px; color: rgba(200, 168, 78, 0.4); }
.h7-eq img, .h7-eq .item-icon, .h7-eq .gv-item-icon { width: 78% !important; height: 78% !important; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0,0,0,.8)); }
.h7-eq .item-icon-wrap, .h7-eq .gv-icon-wrap { width: 78%; height: 78%; }
.h7-eq.filled.r-common    { border-color: rgba(176,176,176,.45); }
.h7-eq.filled.r-uncommon  { border-color: var(--h7-r-uncommon);  box-shadow: inset 0 2px 8px rgba(0,0,0,.8), 0 0 10px rgba(94,216,122,.25); }
.h7-eq.filled.r-rare      { border-color: var(--h7-r-rare);      box-shadow: inset 0 2px 8px rgba(0,0,0,.8), 0 0 10px rgba(79,172,254,.28); }
.h7-eq.filled.r-epic      { border-color: var(--h7-r-epic);      box-shadow: inset 0 2px 8px rgba(0,0,0,.8), 0 0 12px rgba(191,95,255,.32); }
.h7-eq.filled.r-legendary { border-color: var(--h7-r-legendary); box-shadow: inset 0 2px 8px rgba(0,0,0,.8), 0 0 14px rgba(255,179,64,.38); }
.h7-eq.filled.r-mythic    { border-color: var(--h7-r-mythic);    box-shadow: inset 0 2px 8px rgba(0,0,0,.8), 0 0 14px rgba(255,71,87,.42); }
.h7-eq-ilvl { position: absolute; right: 3px; bottom: 2px; padding: 0 4px; border-radius: 4px; background: rgba(6, 3, 14, 0.85); color: var(--rf2-gold); font: 700 9px/14px var(--font-body); }
.h7-eq.drop-hover { border-color: var(--rf2-gold); box-shadow: 0 0 14px rgba(255, 212, 106, 0.6); }
.h7-eq.drop-invalid { border-color: #FF4757; }

.h7-gems { margin-top: 8px; }
.h7 .sf-hero-section { background: none !important; border: 0 !important; padding: 0 !important; margin: 0 !important; box-shadow: none !important; }
.h7 .sf-hero-title { font: 700 8.5px/1 var(--font-body) !important; letter-spacing: 1.6px; text-transform: uppercase; color: var(--rf2-dim) !important; margin: 0 0 6px !important; text-align: center; }
.h7 .sf-hero-grid { display: flex !important; justify-content: center; gap: 8px !important; }
.h7 .sf-hero-slot { width: 28px !important; height: 28px !important; border-radius: 50% !important; background: radial-gradient(circle, #1b1134, #0b0618) !important; border: 1px solid rgba(200, 168, 78, 0.28) !important; }
.h7 .sf-hero-slot.filled { border-color: var(--pc) !important; box-shadow: 0 0 10px var(--pc-soft); }

.h7-inv { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 10px; padding: 7px 12px; border-radius: 999px; color: var(--rf2-gold); background: rgba(6, 3, 14, 0.55); border: 1px solid var(--rf2-gold-deep); text-align: left; box-shadow: 0 0 18px rgba(255, 212, 106, 0.1), inset 0 0 12px rgba(255, 212, 106, 0.05); transition: background .2s, color .2s; }
.h7-inv:hover { background: linear-gradient(135deg, var(--rf2-gold), #F4B740); color: #1a1208; }
.h7-inv:hover .h7-inv-cnt { color: #1a1208; }
.h7-inv img { width: 20px; height: 20px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.8)); }
.h7-inv-lbl { flex: 1; font: 700 11.5px/1 var(--font-display); letter-spacing: 1.2px; text-transform: uppercase; }
.h7-inv-cnt { font: 700 12px/1 var(--font-body); color: var(--rf2-dim); }
.h7-inv-new { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--rf2-gold); color: #1a1035; font: 800 10px/18px var(--font-body); text-align: center; }

.h7-char { padding: 10px 0 0; }
.h7 .hbc-sec { margin: 0 0 8px; }
.h7 .hbc-sec-h { font: 700 8.5px/1 var(--font-body); letter-spacing: 1.6px; text-transform: uppercase; color: var(--rf2-dim); margin: 6px 0 6px; text-align: center; }
.h7 .hbc-grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 0 12px !important; }
.h7 .hbc-cell { display: flex !important; justify-content: space-between; align-items: baseline; gap: 8px; background: none !important; border: 0 !important; border-bottom: 1px solid rgba(200, 168, 78, 0.12) !important; border-radius: 0 !important; padding: 5px 2px !important; box-shadow: none !important; }
.h7 .hbc-k { font-size: 11px !important; color: var(--rf2-dim) !important; text-transform: none; letter-spacing: 0; }
.h7 .hbc-v { font: 700 12px/1 var(--font-display) !important; color: var(--rf2-text) !important; }
.h7 .hbc-m.up, .h7 .hbc-chip.up { color: #2ED573; }
.h7 .hbc-m.down, .h7 .hbc-chip.down { color: #FF4757; }
.h7 .hbc-chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.h7 .hbc-chip { font-size: 11px; padding: 2px 8px; border-radius: 999px; border: 1px solid rgba(200, 168, 78, 0.2); }
.h7 .hbc-cap { font-size: 10px; color: var(--rf2-dim); }
.h7 .hbc-cap.over { color: #FF4757; }

/* ─── Posadzka przy dolnym szpicu ──────────────────────────────────── */
.h7-ground { padding: 8px 34px 26px; }
.h7-row { display: flex; align-items: center; gap: 10px; width: 100%; padding: 7px 4px; text-align: left; color: var(--rf2-text); border-radius: 8px; transition: background .15s; }
.h7-row:hover { background: rgba(255, 212, 106, 0.06); }
.h7-row + .h7-row { border-top: 1px solid rgba(200, 168, 78, 0.12); }
.h7-row img { width: 22px; height: 22px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.9)); }
.h7-row-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.h7-row-t { font: 700 11px/1 var(--font-display); letter-spacing: 1.2px; text-transform: uppercase; color: var(--rf2-gold); text-shadow: var(--rf2-shadow-text); }
.h7-row-s { font-size: 10.5px; color: var(--rf2-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; text-shadow: var(--rf2-shadow-text); }
.h7-dot { width: 7px; height: 7px; border-radius: 50%; background: #4a4162; flex: 0 0 auto; }
.h7-row.on .h7-dot { background: #2ED573; box-shadow: 0 0 8px rgba(46, 213, 115, 0.8); }
.h7-row .prem-tag { display: none; }
.h7-row-num { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--rf2-gold); color: #1a1035; font: 800 10px/18px var(--font-body); text-align: center; box-shadow: 0 0 10px rgba(255, 212, 106, 0.5); }
.h7-row-star { color: var(--rf2-gold); font-size: 12px; }
/* Ikony blizej srodka — tu szczelina juz sie zweza. */
.h7-foot { display: flex; justify-content: center; gap: 2px; padding: 6px 6% 0; }
.h7-fbtn { display: flex; flex-direction: column; align-items: center; gap: 4px; flex: 1 1 0; min-width: 0; padding: 6px 2px; color: var(--rf2-dim); text-decoration: none; border-radius: 8px; position: relative; transition: color .15s, background .15s; }
.h7-fbtn:hover { color: var(--rf2-text); background: rgba(255, 212, 106, 0.06); }
.h7-fbtn > img:first-child { width: 28px; height: 28px; object-fit: contain; filter: drop-shadow(0 0 5px rgba(255, 212, 106, 0.35)) drop-shadow(0 1px 2px rgba(0,0,0,.8)); }
.h7-fbtn:hover > img:first-child { filter: drop-shadow(0 0 9px rgba(255, 212, 106, 0.65)); }
.h7-fbtn span.l { font-size: 7.5px; line-height: 1.15; letter-spacing: .5px; text-transform: uppercase; text-align: center; max-width: 100%; text-shadow: var(--rf2-shadow-text); }
.h7-fbonus { position: absolute; top: 0; right: 0; display: inline-flex; align-items: center; gap: 2px; padding: 0 4px; border-radius: 7px; background: rgba(6, 3, 14, 0.9); border: 1px solid var(--rf2-line); color: var(--rf2-gold); font: 700 9px/13px var(--font-body); }
.h7-fbonus img { width: 9px !important; height: 9px !important; }

/* ─── Waska kolumna (landscape 260 px) ─────────────────────────────── */
html.gv-land-mobile .h7-medal { width: 118px; height: 118px; }
html.gv-land-mobile .h7-rune { width: 182px; height: 182px; }
html.gv-land-mobile .h7-pets { top: 78px; padding: 0 14px; }
html.gv-land-mobile .h7-pet { width: 36px; height: 36px; }
html.gv-land-mobile .h7-name { font-size: 17px; }
html.gv-land-mobile .h7-tablet { margin: 10px 18px 0; }
html.gv-land-mobile .h7-fact.power b { font-size: 20px; }
html.gv-land-mobile .h7-fbtn span.l { display: none; }
html.gv-land-mobile .h7-fbtn > img:first-child { width: 24px; height: 24px; }
html.gv-land-mobile .h7-ground { padding: 6px 24px 22px; }

@media (prefers-reduced-motion: reduce) {
  .h7-world > img, .h7-world::after, .h7-motes i, .h7-sparks i, .h7-rune img, .h7-rays, .h7-medal-in .hero-profile-avatar, .h7-glow path, .h7-edge .b, .h7-event-live { animation: none; }
}

/* ═══════════════════════════════════════════════════════════════════
   v7.1 — po zrzucie Marka ze stagingu (07.09, 00:09):
   „nadal jest w kolumnie prostokatnej ten wylom — dac na tle bez kolumny,
   ladne przejscie do tla po prawej bez kreski; wiele rzeczy malo
   widocznych, itemki za male i nie wycentrowane, tekst za maly; wylom
   adekwatny do wybranej strony Veil War".
   Ponizsze reguly stoja PO regulach bazowych i je nadpisuja — celowo
   osobno, zeby bylo widac, co zmienil zrzut.
   ═══════════════════════════════════════════════════════════════════ */

/* 1. Bez kolumny: kreska z prawej znika, pustka rozplywa sie w tlo gry. */
body.gv-hero-v5 #sidebarLeft, html.gv-land-mobile body.gv-hero-v5 #sidebarLeft { border-right: 0 !important; background: transparent !important; }
.h7 { background: transparent; overflow: visible; }
.h7-void { -webkit-mask: linear-gradient(90deg, #000 0%, #000 78%, transparent 100%); mask: linear-gradient(90deg, #000 0%, #000 78%, transparent 100%); }
#panelHero > .h7 { border-radius: 0; }

/* 2. Strona Veil War wybiera kolor wylomu. Klasa zostaje na medalionie (--cc). */
.h7 { --cc: var(--pc); }
.h7.hp-class-warrior      { --cc: #FF8A5B; }
.h7.hp-class-mage         { --cc: #4FACFE; }
.h7.hp-class-blade_dancer { --cc: #2ED573; }
.h7.f-none   { --pc: #A66BFF; }                      /* bez frakcji: fiolet Szczeliny */
.h7.f-warden { --pc: #FFC46A; --h7-edge: #FFF6D6; }  /* Straz Switu: zloto, cieply swit */
.h7.f-seeker { --pc: #B04CFF; --h7-edge: #E9D2FF; }  /* Poszukiwacze: glebszy fiolet, chlod */
.h7.founder.f-none { --pc: #FFD46A; }
.h7-edge .e { stroke: var(--h7-edge, #fff7d6); }
.h7.f-warden .h7-world::before { background: radial-gradient(ellipse 80% 45% at 50% 16%, rgba(255, 196, 106, 0.42) 0%, transparent 70%), linear-gradient(180deg, rgba(40, 20, 10, 0.05) 0%, rgba(6, 2, 18, 0.05) 30%, rgba(6, 2, 18, 0.55) 58%, rgba(6, 2, 18, 0.86) 82%, #060212 100%); }
.h7.f-seeker .h7-world::before { background: radial-gradient(ellipse 80% 45% at 50% 16%, rgba(176, 76, 255, 0.42) 0%, transparent 70%), linear-gradient(180deg, rgba(20, 4, 40, 0.25) 0%, rgba(6, 2, 18, 0.1) 30%, rgba(6, 2, 18, 0.6) 58%, rgba(6, 2, 18, 0.88) 82%, #060212 100%); }
.h7.f-seeker .h7-world > img { filter: saturate(.9) hue-rotate(-8deg) brightness(.92); }
.h7.f-warden .h7-world > img { filter: saturate(1.05) brightness(1.06); }
.h7.f-warden .h7-glow path { opacity: .7; }
.h7-medal::before { background: radial-gradient(circle, color-mix(in srgb, var(--cc) 40%, transparent) 0%, transparent 65%); }
.h7-rune { filter: drop-shadow(0 0 10px color-mix(in srgb, var(--cc) 40%, transparent)); }
.h7-sub b { color: var(--cc); text-shadow: 0 0 8px color-mix(in srgb, var(--cc) 40%, transparent), var(--rf2-shadow-text); }
.h7-sigil { width: 36px; height: 36px; font-size: 19px; right: 14px; top: 44px; color: var(--pc); text-shadow: 0 0 12px var(--pc), var(--rf2-shadow-text); border-color: color-mix(in srgb, var(--pc) 60%, transparent); }
.h7-tablet::before { background: linear-gradient(90deg, transparent, var(--pc) 30%, var(--pc) 70%, transparent); box-shadow: 0 0 8px var(--pc-soft); }

/* 3. Wieksze i czytelniejsze. */
.h7 { font-size: 14px; }
.h7-cur-item { font-size: 15px; }
.h7-cur-item img { width: 18px; height: 18px; }
.h7-ibtn img { width: 20px; height: 20px; }
.h7-stage { padding-top: 26px; }
.h7-medal { width: 172px; height: 172px; }
.h7-rune { width: 264px; height: 264px; }
.h7-pets { top: 108px; padding: 0 22px; }
.h7-pet { width: 50px; height: 50px; }
.h7-pet img { width: 36px; height: 36px; }
.h7-lv { width: 112px; height: 32px; font-size: 14px; bottom: -16px; }
.h7-name-wrap { padding-top: 26px; }
.h7-name { font-size: 26px; }
.h7-sub { font-size: 11px; margin-top: 5px; }
.h7-tablet { margin: 14px 14px 0; padding: 20px 12px 14px; }
.h7-fact b { font-size: 24px; }
.h7-fact.power b { font-size: 31px; }
.h7-fact i { font-size: 10px; }
.h7-fact img { width: 26px; height: 26px; }
.h7-fact .rk { font-size: 9.5px; }
.h7-xp-track { height: 9px; }
.h7-xp-txt { font-size: 11.5px; margin-top: 5px; }
.h7-tab { font-size: 12.5px; padding: 10px 2px; }
.h7-tabs { gap: 30px; }
.h7-eq-grid { gap: 6px; }
.h7-eq { border-radius: 12px; }
.h7-eq-empty { font-size: 11px; }
/* renderItemIcon zwraca .item-icon-wrap z width/height INLINE (56 px) i wlasna
   ramka rzadkosci — tu gniazdo jest ramka, wiec opakowanie ma wypelnic gniazdo
   i nic nie rysowac. Wlasny znaczek poziomu tez chowamy (mamy .h7-eq-ilvl). */
.h7-eq .item-icon-wrap { width: 100% !important; height: 100% !important; border: 0 !important; box-shadow: none !important; animation: none !important; background: transparent !important; border-radius: 11px; display: flex; align-items: center; justify-content: center; }
.h7-eq .item-icon-wrap .item-img { width: 96% !important; height: 96% !important; margin: 0 !important; object-fit: contain; filter: drop-shadow(0 3px 6px rgba(0,0,0,.8)); }
.h7-eq .item-lvl-badge { display: none !important; }
.h7-eq > img { width: 88% !important; height: 88% !important; }
.h7-eq-ilvl { font-size: 11px; line-height: 16px; padding: 0 5px; right: 4px; bottom: 3px; }
.h7-gems { margin-top: 10px; }
.h7 .sf-hero-title { font-size: 10px !important; }
.h7 .sf-hero-slot { width: 34px !important; height: 34px !important; }
.h7-inv { padding: 9px 14px; margin-top: 12px; }
.h7-inv img { width: 24px; height: 24px; }
.h7-inv-lbl { font-size: 13px; }
.h7-inv-cnt { font-size: 13px; }
.h7-ground { padding: 10px 26px 30px; }
.h7-row { padding: 9px 4px; }
.h7-row img { width: 26px; height: 26px; }
.h7-row-t { font-size: 13px; }
.h7-row-s { font-size: 12px; }
.h7-dot { width: 9px; height: 9px; }
.h7-foot { padding: 8px 2% 0; gap: 4px; }
.h7-fbtn > img:first-child { width: 32px; height: 32px; }
.h7-fbtn span.l { font-size: 9.5px; }
.h7 .hbc-k { font-size: 12.5px !important; }
.h7 .hbc-v { font-size: 14px !important; }
.h7 .hbc-sec-h { font-size: 10px; }

/* Imie nad jasnym swiatem (zar wojownika, zloto Zalozyciela) ginelo: zloty
   napis na pomaranczu. Ciemna, rozmyta plama za imieniem i klasa — swiat
   dalej przeswituje, tekst znow czyta sie na kazdym tle. */
.h7-name-wrap { position: relative; }
.h7-name-wrap::before { content: ''; position: absolute; left: 10%; right: 10%; top: 6px; bottom: -8px; border-radius: 50%; background: radial-gradient(ellipse at 50% 50%, rgba(6, 2, 18, 0.82) 0%, rgba(6, 2, 18, 0.55) 55%, transparent 100%); filter: blur(6px); z-index: 0; pointer-events: none; }
.h7-name, .h7-sub { position: relative; z-index: 1; }
.h7-name { text-shadow: 0 2px 4px #000, 0 0 12px rgba(0, 0, 0, 0.9), 0 0 24px rgba(255, 212, 106, 0.35); }
.h7-sub b { color: #fff; text-shadow: 0 0 10px var(--cc), 0 0 3px var(--cc), var(--rf2-shadow-text); }
.h7-lv { text-shadow: 0 1px 2px #000, var(--rf2-shadow-text); }

/* ═══════════════════════════════════════════════════════════════════
   v7.2 (07.09, 01:20) — Mark: „usun ten rift efekt z profilu, zostawmy
   tlo, ladnie wyglada". Rozdarcie znika (warstwy klipu, poswiaty,
   krawedzi i iskier nie sa juz renderowane), swiat klasy wypelnia cala
   kolumne i miekko schodzi w tlo gry z prawej — bez kreski. Pylki zostaja.
   ═══════════════════════════════════════════════════════════════════ */
.h7-void, .h7-glow, .h7-edge, .h7-sparks { display: none !important; }
.h7-world { clip-path: none !important; -webkit-mask: linear-gradient(90deg, #000 0%, #000 82%, rgba(0,0,0,.6) 92%, transparent 100%); mask: linear-gradient(90deg, #000 0%, #000 82%, rgba(0,0,0,.6) 92%, transparent 100%); }
.h7-world > img { left: 0; top: 0; width: 100%; height: 100%; }
#panelHero > .h7 .h7-world { -webkit-mask: none; mask: none; border-radius: 14px; }
/* Bez rozdarcia tresc moze siegac szerzej — tablica i posadzka rowno z medalionem. */
.h7-tablet { margin: 14px 12px 0; }
.h7-ground { padding: 10px 18px 26px; }
.h7-foot { padding: 8px 0 0; }
.h7-stage { padding-top: 18px; }

/* v7.3 (07.09, 01:10) — Mark: „sa jakby 2 linie, 2 okienka". Swiat gasl
   do PRZEZROCZYSTOSCI, a pod spodem przeswitywalo jasniejsze tlo strony
   (#1a1035): pas miedzy tlem a panelem po prawej, obok obwodki
   szybkiego paska. Teraz swiat schodzi w CIEMNY kolor paneli gry i kolumna
   ma ten sam kolor pod spodem — jeden brzeg, zadnego pasa. */
.h7-world { -webkit-mask: none; mask: none; }
.h7-world::after { content: ''; position: absolute; top: 0; bottom: 0; right: 0; width: 40px; left: auto; transform: none; animation: none; background: linear-gradient(90deg, rgba(11, 7, 22, 0) 0%, rgba(11, 7, 22, 0.75) 60%, #0b0716 100%); }
body.gv-hero-v5 #sidebarLeft { background: #0b0716 !important; }
.h7 .ilvl-ic { width: 26px; height: 26px; object-fit: contain; margin-bottom: -2px; filter: drop-shadow(0 0 6px rgba(255, 212, 106, 0.4)); }
/* Ikona Premium ma w pliku mniej marginesu niz ikona Przepustki, wiec przy tej
   samej ramce wychodzila wieksza (Mark, 01:12). Oba obrazki siedza w pudelku
   26 px, Premium rysowane w 20 px. */
.h7-row img { width: 26px; height: 26px; object-fit: contain; }
.h7-row img[src*="premium-icon"] { width: 20px; height: 20px; margin: 0 3px; }

/* v7.4 (07.09, 01:25) — Premium i Przepustka jako dwie plakietki obok siebie:
   ciemne szklo z cienka zlota krawedzia (jak przycisk „Wejdz" w Szczelinie),
   ikona, tytul, stan; aktywna ma jasniejsza krawedz i zielona kropke w rogu.
   Widoczne, ale nie trzecie okno pod tablica. */
.h7-plaques { display: flex; gap: 8px; padding: 2px 0 4px; }
.h7-plaque {
  position: relative; flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 8px;
  padding: 8px 10px 8px 9px; border-radius: 14px; text-align: left; color: var(--rf2-text);
  background: linear-gradient(180deg, rgba(40, 26, 70, 0.55), rgba(8, 4, 18, 0.7));
  border: 1px solid rgba(200, 168, 78, 0.3);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(2px); transition: border-color .15s, box-shadow .15s, transform .12s;
}
.h7-plaque:hover { border-color: var(--rf2-gold); box-shadow: 0 6px 18px rgba(0,0,0,.5), 0 0 14px rgba(255, 212, 106, 0.18); transform: translateY(-1px); }
.h7-plaque.on { border-color: rgba(255, 212, 106, 0.55); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45), 0 0 12px rgba(255, 212, 106, 0.12), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.h7-plaque img { width: 26px; height: 26px; object-fit: contain; flex: 0 0 26px; filter: drop-shadow(0 1px 2px rgba(0,0,0,.9)); }
.h7-plaque img[src*="premium-icon"] { width: 20px; height: 20px; margin: 0 3px; flex-basis: 20px; }
.h7-plq-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.h7-plq-t { font: 700 10.5px/1 var(--font-display); letter-spacing: 1px; text-transform: uppercase; color: var(--rf2-gold); text-shadow: var(--rf2-shadow-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h7-plq-s { font-size: 10px; color: var(--rf2-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.h7-plaque.on .h7-plq-s { color: var(--rf2-text); }
.h7-plaque .h7-dot { position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border: 2px solid #0b0716; box-sizing: content-box; background: #3b3352; }
.h7-plaque.on .h7-dot { background: #2ED573; box-shadow: 0 0 8px rgba(46, 213, 115, 0.9); }
.h7-plq-num { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--rf2-gold); color: #1a1035; font: 800 10px/18px var(--font-body); text-align: center; box-shadow: 0 0 10px rgba(255, 212, 106, 0.5); flex: 0 0 auto; }
.h7-plq-star { color: var(--rf2-gold); font-size: 12px; flex: 0 0 auto; }
html.gv-land-mobile .h7-plq-s { display: none; }
html.gv-land-mobile .h7-plaque { padding: 7px 8px; gap: 6px; }
/* Dwie obok siebie nie miescily napisow („VEIL PA…"): plakietki jedna pod
   druga, tytul z lewej, stan z prawej, w jednej linii. */
.h7-plaques { flex-direction: column; gap: 6px; }
.h7-plaque { padding: 7px 12px 7px 10px; border-radius: 999px; gap: 10px; }
.h7-plq-body { flex-direction: row; align-items: baseline; justify-content: space-between; gap: 10px; }
.h7-plq-t { font-size: 11.5px; flex: 0 0 auto; }
.h7-plq-s { font-size: 11px; text-align: right; }
.h7-plaque .h7-dot { top: 50%; right: 12px; transform: translateY(-50%); border: 0; width: 8px; height: 8px; position: static; transform: none; flex: 0 0 auto; }
html.gv-land-mobile .h7-plq-s { display: block; }

/* v7.5 (07.09, 01:35) — Mark: „co do linii, nadal sa" (zrzut: ciemny pas,
   potem jasna kreska, potem panel). Ciemny pas to bylo MOJE przejscie do
   #0b0716 — na jasnym niebie maga wyglada jak pas. Jasna kreska: obwodka
   kolumny / zlota poswiata szybkiego paska / tlo strony (#1a1035)
   przeswitujace w szparze. Zdejmujemy wszystko: swiat idzie do samej
   krawedzi (i 1 px dalej, na zaokraglenia skali), kolumna i uklad pod
   spodem sa ciemne, szybki pasek bez zlotej poswiaty przy tej krawedzi. */
.h7-world::after { display: none; }
.h7-world { right: -1px; }
body.gv-hero-v5 #sidebarLeft, body.gv-hero-v5 .desktop-sidebar { border: 0 !important; box-shadow: none !important; outline: 0 !important; }
body.gv-hero-v5 #gameLayout, body.gv-hero-v5 #mainContent { background-color: #0b0716; border-left: 0 !important; }
body.gv-hero-v5 .quick-panel { box-shadow: 3px 0 16px rgba(0, 0, 0, 0.5) !important; }

/* v7.6 (07.09, 01:45) — Mark: „czarna przestrzen miedzy tlem a linia".
   To PASEK PRZEWIJANIA kolumny: #sidebarLeft ma overflow-y:auto i cienki
   scrollbar z przezroczystym torem (czarny pas) i jasnym suwakiem (kreska
   na cala wysokosc). Panel ma min-height 100%, wiec przy zaokragleniach
   skali wychodzi o pare pikseli za kolumne i pasek sie pojawia. Pasek
   znika (kolko myszy dalej przewija), a tlo idzie pod jego miejsce. */
body.gv-hero-v5 #sidebarLeft { scrollbar-width: none !important; -ms-overflow-style: none; }
body.gv-hero-v5 #sidebarLeft::-webkit-scrollbar { display: none; width: 0; height: 0; }
body.gv-hero-v5 #sidebarHeroContent { min-height: 0; }

/* v7.7 (07.09, 01:50) — Mark: „na dole jest uciecie tla". Po zdjeciu
   min-height panel konczyl sie z trescia, a _fitHeroSidebar i tak skaluje
   tresc, wiec przeskalowany panel jest nizszy niz kolumna. Na komputerze
   swiat lezy wiec na SAMEJ KOLUMNIE (obraz przez --h7-world z JS), a warstwa
   w panelu tylko pylki. Telefon (#panelHero) zostaje jak byl. */
body.gv-hero-v5 #sidebarLeft {
  background: linear-gradient(180deg, rgba(6, 2, 18, 0.15) 0%, rgba(6, 2, 18, 0.05) 25%, rgba(6, 2, 18, 0.55) 55%, rgba(6, 2, 18, 0.85) 80%, #060212 100%),
              var(--h7-world, none) center 30% / cover no-repeat,
              #0b0716 !important;
}
body.gv-hero-v5 #sidebarHeroContent .h7-world > img,
body.gv-hero-v5 #sidebarHeroContent .h7-world::before { display: none; }
body.gv-hero-v5 #sidebarHeroContent .h7-world { background: transparent; }
body.gv-hero-v5 #sidebarHeroContent > .h7 { min-height: 0; }

/* v7.8 (07.09, 01:55) — Mark: „usuneles cale tlo". Korzen panelu nosil
   .hero-profile-card ze style.css: wlasne tlo panel-bg.webp, obwodka 2 px,
   zaokraglenie, padding 16 px, margin-bottom 12 px, plus ::before. Dopoki
   swiat lezal W panelu, przykrywal to tlo; po przeniesieniu swiata na
   kolumne karta zaslonila go w calosci. Klasa zdjeta w JS; tu na wszelki
   wypadek te same wlasnosci wyzerowane. */
.h7, .h7.hero-class-warrior, .h7.hero-class-mage, .h7.hero-class-blade_dancer { background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; }
.h7::before { display: none !important; }
#panelHero > .h7 { border-radius: 14px !important; overflow: hidden !important; }

/* v7.9 (07.09, 02:05) — tlo kolumny jako ELEMENT (.h7-colbg w #sidebarLeft),
   nie zmienna CSS: na zywo obraz nie wchodzil, w rigu tak, a bez wgladu
   w przegladarke Marka nie da sie tego rozstrzygnac. Element widac w DOM
   i nie zalezy od skrotu `background` z !important. Kolumna jest
   position:relative, tresc nad tlem. */
body.gv-hero-v5 #sidebarLeft { position: relative; background: #0b0716 !important; }
body.gv-hero-v5 #sidebarHeroContent { position: relative; z-index: 1; }
.h7-colbg { position: absolute; left: 0; top: 0; right: 0; height: 100%; min-height: 100%; z-index: 0; overflow: hidden; pointer-events: none; }
.h7-colbg img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; animation: rf3Drift 32s linear infinite; }
.h7-colbg::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 70% 40% at 50% 18%, rgba(166, 107, 255, 0.28) 0%, transparent 70%), linear-gradient(180deg, rgba(6, 2, 18, 0.15) 0%, rgba(6, 2, 18, 0.05) 25%, rgba(6, 2, 18, 0.55) 55%, rgba(6, 2, 18, 0.85) 80%, #060212 100%); }
.h7-colbg.f-warden::after { background: radial-gradient(ellipse 80% 45% at 50% 16%, rgba(255, 196, 106, 0.42) 0%, transparent 70%), linear-gradient(180deg, rgba(40, 20, 10, 0.05) 0%, rgba(6, 2, 18, 0.05) 30%, rgba(6, 2, 18, 0.55) 58%, rgba(6, 2, 18, 0.86) 82%, #060212 100%); }
.h7-colbg.f-seeker::after { background: radial-gradient(ellipse 80% 45% at 50% 16%, rgba(176, 76, 255, 0.42) 0%, transparent 70%), linear-gradient(180deg, rgba(20, 4, 40, 0.25) 0%, rgba(6, 2, 18, 0.1) 30%, rgba(6, 2, 18, 0.6) 58%, rgba(6, 2, 18, 0.88) 82%, #060212 100%); }
.h7-colbg.f-seeker img { filter: saturate(.9) hue-rotate(-8deg) brightness(.92); }
.h7-colbg.f-warden img { filter: saturate(1.05) brightness(1.06); }
@media (prefers-reduced-motion: reduce) { .h7-colbg img { animation: none; } }

/* v7.10 (07.09, 02:15) — Mark: „tlo bardzo przyciemnione, szczegolnie na
   dole". Gradient zaciemniajacy zluzowany: dol schodzi do ~55% zamiast
   do pelnej czerni, srodek prawie nietkniety. Tablica jest polprzezroczysta,
   wiec tekst i tak stoi na swoim ciemnym szkle. */
.h7-colbg::after { background: radial-gradient(ellipse 70% 40% at 50% 18%, rgba(166, 107, 255, 0.22) 0%, transparent 70%), linear-gradient(180deg, rgba(6, 2, 18, 0.10) 0%, rgba(6, 2, 18, 0) 22%, rgba(6, 2, 18, 0.18) 55%, rgba(6, 2, 18, 0.42) 82%, rgba(6, 2, 18, 0.6) 100%); }
.h7-colbg.f-warden::after { background: radial-gradient(ellipse 80% 45% at 50% 16%, rgba(255, 196, 106, 0.34) 0%, transparent 70%), linear-gradient(180deg, rgba(40, 20, 10, 0.05) 0%, rgba(6, 2, 18, 0) 25%, rgba(6, 2, 18, 0.18) 58%, rgba(6, 2, 18, 0.42) 82%, rgba(6, 2, 18, 0.6) 100%); }
.h7-colbg.f-seeker::after { background: radial-gradient(ellipse 80% 45% at 50% 16%, rgba(176, 76, 255, 0.34) 0%, transparent 70%), linear-gradient(180deg, rgba(20, 4, 40, 0.18) 0%, rgba(6, 2, 18, 0.02) 25%, rgba(6, 2, 18, 0.2) 58%, rgba(6, 2, 18, 0.45) 82%, rgba(6, 2, 18, 0.62) 100%); }
.h7-colbg.f-seeker img { filter: saturate(.95) hue-rotate(-8deg) brightness(.98); }

/* v7.11 (07.09, rano) — Mark: „dodaj tam ikonke do drzewka skili
   i osiagniecia, tak zeby wypelnila ta przestrzen wolna (...) przenies
   drzewko i osiagniecia z paska menu z dolu ekranu na profil".
   Dwa kafle miedzy plakietkami a ikonami stopki: to samo ciemne szklo
   ze zlota krawedzia co plakietki, ale wyzsze, z duza ikona i nazwa.
   .ready (sa punkty / nieodebrane nagrody) = zielony brzeg i liczba,
   ten sam jezyk co .tbr.ready na dolnym pasku, skad przyszly. */
.h7-acts { display: flex; gap: 8px; padding: 8px 0 2px; }
.h7-act {
  position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 12px 6px 10px; border-radius: 14px; color: var(--rf2-text);
  background: linear-gradient(180deg, rgba(40, 26, 70, 0.55), rgba(8, 4, 18, 0.7));
  border: 1px solid rgba(200, 168, 78, 0.3);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(2px); transition: border-color .15s, box-shadow .15s, transform .12s;
}
.h7-act:hover { border-color: var(--rf2-gold); box-shadow: 0 6px 18px rgba(0,0,0,.5), 0 0 14px rgba(255, 212, 106, 0.18); transform: translateY(-1px); }
.h7-act > img { width: 38px; height: 38px; object-fit: contain; filter: drop-shadow(0 0 6px rgba(255, 212, 106, 0.35)) drop-shadow(0 2px 3px rgba(0,0,0,.9)); }
.h7-act-t { font: 700 10.5px/1.1 var(--font-display); letter-spacing: 1px; text-transform: uppercase; color: var(--rf2-gold); text-shadow: var(--rf2-shadow-text); text-align: center; max-width: 100%; }
.h7-act.ready { border-color: rgba(46, 213, 115, 0.6); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45), 0 0 14px rgba(46, 213, 115, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.08); }
.h7-act.ready > img { filter: drop-shadow(0 0 7px rgba(46, 213, 115, 0.55)) drop-shadow(0 2px 3px rgba(0,0,0,.9)); }
.h7-act-num { position: absolute; top: -6px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #2ED573; color: #06210f; font: 800 10px/18px var(--font-body); text-align: center; box-shadow: 0 0 10px rgba(46, 213, 115, 0.6); }
html.gv-land-mobile .h7-acts { gap: 6px; padding-top: 6px; }
html.gv-land-mobile .h7-act { padding: 9px 4px 8px; gap: 4px; }
html.gv-land-mobile .h7-act > img { width: 30px; height: 30px; }
html.gv-land-mobile .h7-act-t { font-size: 9px; }

/* v7.12 (07.09, rano) — Mark: „logo dalej daj na sam dol tego filara
   profilowego". Na komputerze panel konczy sie z trescia, a wolne miejsce
   jest miedzy nim a dnem kolumny — wiec logo (.h7-collogo) siedzi
   w #sidebarLeft, przypiete do dna, jak tlo .h7-colbg. _fitHeroSidebar
   chowa je (.h7-collogo-off), gdy tresc i logo nie mieszcza sie razem bez
   skalowania. Na telefonie logo lezy w toku panelu (.h7-logo), pod ikonami. */
.h7-collogo { position: absolute; left: 0; right: 0; bottom: 16px; z-index: 2; display: flex; justify-content: center; pointer-events: none; }
.h7-collogo img { width: 60%; max-width: 200px; aspect-ratio: 512 / 289; height: auto; display: block; opacity: .92; filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 16px rgba(255, 212, 106, 0.16)); }
.h7-collogo.h7-collogo-off { display: none; }
.h7-logo { display: flex; justify-content: center; padding: 12px 0 0; }
.h7-logo img { width: 54%; max-width: 180px; display: block; opacity: .9; filter: drop-shadow(0 3px 10px rgba(0, 0, 0, 0.75)) drop-shadow(0 0 16px rgba(255, 212, 106, 0.16)); }
body.gv-hero-v5 #sidebarHeroContent .h7-logo { display: none; }
html.gv-land-mobile .h7-logo { padding-top: 8px; }

/* ── Poradnik: szeroki kafel pod dwoma kwadratowymi ──────────────────
   Ten sam material co .h7-act (ciemny gradient, zlota krawedz, napis
   wersalikami krojem naglowkowym), tylko polozony poziomo i na cala
   szerokosc. Nowy gracz ma go ZOBACZYC, wiec nie moze wygladac jak
   kolejny maly guzik z .h7-foot. */
.h7 .h7-guide {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  margin-top: 8px;
  padding: 12px 14px;
  border-radius: 14px;
  text-align: left;
  color: var(--rf2-text);
  background: linear-gradient(180deg, rgba(40, 26, 70, 0.55), rgba(8, 4, 18, 0.7));
  border: 1px solid rgba(200, 168, 78, 0.3);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(2px);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .12s;
}
.h7 .h7-guide:hover {
  border-color: var(--rf2-gold);
  box-shadow: 0 6px 18px rgba(0, 0, 0, .5), 0 0 14px rgba(255, 212, 106, 0.18);
  transform: translateY(-1px);
}
.h7 .h7-guide:focus-visible { outline: 2px solid var(--rf2-gold); outline-offset: 2px; }
.h7 .h7-guide > img {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  object-fit: contain;
  filter: drop-shadow(0 0 6px rgba(255, 212, 106, 0.35)) drop-shadow(0 2px 3px rgba(0,0,0,.9));
}
.h7 .h7-guide-tx { display: block; min-width: 0; }
.h7 .h7-guide-tx b {
  display: block;
  font: 700 12.5px/1.1 var(--font-display);
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--rf2-gold);
  text-shadow: var(--rf2-shadow-text);
}
.h7 .h7-guide-tx i {
  display: block;
  margin-top: 4px;
  font: 400 11px/1.3 var(--font-body);
  font-style: normal;
  color: var(--rf2-dim);
}

/* Telefon: wiecej powietrza, tak jak reszta filaru w tym trybie. */
html.gv-phone .h7-guide { padding: 14px 16px; }
html.gv-phone .h7-guide > img { width: 38px; height: 38px; }
html.gv-phone .h7-guide-tx b { font-size: 14px; }
html.gv-phone .h7-guide-tx i { font-size: 12px; }

@media (prefers-reduced-motion: reduce) {
  .h7-guide { transition: none; }
}