/* ═══════════════════════════════════════════════════════════════════════════
   VEILPLATE — skóra okna powiadomień (herby + płyta + Relikwiarz)

   Cały plik działa TYLKO pod body.gv-veilplate. Bez tej klasy strona wygląda
   dokładnie tak jak dotąd, więc stary i nowy wygląd to jedna klasa różnicy —
   to jest właśnie to, co pozwala porównać oba na tych samych, prawdziwych
   powiadomieniach zamiast na makiecie.

   Herb siedzi w .rp-crest, które w starej skórze jest złotym kółkiem z emoji.
   Tutaj emoji znika (font-size:0), a tarcza wchodzi jako tło — dzięki temu
   żadne wywołanie w grze nie musi wiedzieć o Veilplate, wystarczy że poda
   data-crest. Brak data-crest = zostaje kółko z emoji, więc miejsca, których
   jeszcze nie podpięliśmy, nie robią się puste.
   ═══════════════════════════════════════════════════════════════════════════ */

body.gv-veilplate {
  --vp-ink:       #0C0719;   /* obsydian płyty */
  --vp-gold:      #C8A84E;   /* antyczne złoto rantu */
  --vp-gold-lt:   #FFD46A;
  --vp-violet:    #BF5FFF;
  --vp-crimson:   #FF4757;
  --vp-emerald:   #2ED573;
}

/* ── płyta ───────────────────────────────────────────────────────────────
   Ziarno leży na 7% krycia. Osobna warstwa, nie background-blend, bo
   blend zmieszałby je też z poświatą pod herbem i płyta zrobiłaby się
   jaśniejsza na górze niż na dole. */
body.gv-veilplate .gv-reward-pop {
  background: linear-gradient(180deg, #1A1030 0%, var(--vp-ink) 100%);
  border: 1px solid rgba(200, 168, 78, 0.55);
  border-radius: 10px;
  padding: 26px 24px 22px;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.72),
    0 0 46px rgba(191, 95, 255, 0.10),
    inset 0 1px 0 rgba(255, 232, 180, 0.16),
    inset 0 0 0 3px rgba(12, 7, 25, 0.9),
    inset 0 0 0 4px rgba(200, 168, 78, 0.30);
}

body.gv-veilplate .gv-reward-pop::after {
  content: "";
  position: absolute;
  inset: 4px;
  border-radius: 7px;
  pointer-events: none;
  background-image: url("../img/ui/crests/plate-grain.png");
  background-size: 128px 128px;
  opacity: 0.07;
  mix-blend-mode: normal;
}

/* poświata nad płytą przejmuje barwę herbu — ustawiana z JS przez --vp-glow */
body.gv-veilplate .gv-reward-pop::before {
  background: radial-gradient(ellipse 78% 54% at 50% 0%,
              var(--vp-glow, rgba(255, 210, 110, 0.22)), transparent 70%);
}

/* treść musi być nad warstwą ziarna */
body.gv-veilplate .gv-reward-pop > * { position: relative; z-index: 1; }

/* ── herb ────────────────────────────────────────────────────────────────
   96px zamiast 54px: tarcza ma rant, pole i godło, więc przy rozmiarze
   starego kółka godło robi się nieczytelne. Wystaje nad płytę o 2/3 —
   to ona ma być pierwszą rzeczą, którą widać. */
/* Bez .gv-reward-pop w tym selektorze — celowo. Z nim reguła ma wyższą
   specyficzność niż reguły per-herb niżej, a że kasuje tło skrótem, wygrywała
   z nimi i każda tarcza znikała (herb ustawiał background-image, ten skrót
   zerował je z powrotem). Teraz obie reguły są równie mocne i decyduje
   kolejność, czyli herb. */
body.gv-veilplate .rp-crest[data-crest] {
  width: 96px; height: 96px;
  margin: -68px auto 8px;
  background-color: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  font-size: 0;                       /* chowa emoji ze starej skóry */
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.75));
  animation: vp-crest-in .42s cubic-bezier(.2, 1.4, .4, 1) both;
}

body.gv-veilplate .rp-crest[data-crest="arena"]  { background-image: url("../img/ui/crests/crest-arena.png"); }
body.gv-veilplate .rp-crest[data-crest="breach"] { background-image: url("../img/ui/crests/crest-breach.png"); }
body.gv-veilplate .rp-crest[data-crest="hold"]   { background-image: url("../img/ui/crests/crest-hold.png"); }
body.gv-veilplate .rp-crest[data-crest="level"]  { background-image: url("../img/ui/crests/crest-level.png"); }
body.gv-veilplate .rp-crest[data-crest="mail"]   { background-image: url("../img/ui/crests/crest-mail.png"); }
body.gv-veilplate .rp-crest[data-crest="boss"]   { background-image: url("../img/ui/crests/crest-boss.png"); }
body.gv-veilplate .rp-crest[data-crest="guild"]  { background-image: url("../img/ui/crests/crest-guild.png"); }

@keyframes vp-crest-in {
  from { transform: translateY(10px) scale(.72); opacity: 0; }
  to   { transform: none; opacity: 1; }
}

/* ── typografia ──────────────────────────────────────────────────────── */
body.gv-veilplate .gv-reward-pop .rp-title {
  font-size: 19px;
  letter-spacing: 2.4px;
  color: #FFE9B8;
  text-shadow: 0 0 16px rgba(255, 200, 90, 0.45);
}

/* Cienka złota linijka pod tytułem — bierze się z tego, że tytuł i podtytuł
   inaczej się czytają na płycie z ziarnem niż na gładkim gradiencie. */
body.gv-veilplate .gv-reward-pop .rp-title::after {
  content: "";
  display: block;
  width: 64px; height: 1px;
  margin: 8px auto 0;
  background: linear-gradient(90deg, transparent, rgba(200, 168, 78, 0.75), transparent);
}

body.gv-veilplate .gv-reward-pop .rp-sub {
  margin-top: 7px;
  color: #A99CC4;
}

/* ── kafelki nagród ──────────────────────────────────────────────────── */
body.gv-veilplate .gv-reward-pop .rp-chip {
  border-radius: 8px;
  border-color: rgba(200, 168, 78, 0.34);
  background: linear-gradient(180deg, rgba(200, 168, 78, 0.13), rgba(12, 7, 25, 0.72));
  box-shadow: inset 0 1px 0 rgba(255, 232, 180, 0.10);
}

body.gv-veilplate .gv-reward-pop .rp-btn { border-radius: 7px; }

/* ── warianty barwne ─────────────────────────────────────────────────────
   Rant płyty idzie za rantem tarczy: karmazynowe herby (wyłom, boss) dostają
   karmazynową płytę, żeby okno czytało się jako zagrożenie zanim ktokolwiek
   przeczyta tytuł. */
body.gv-veilplate .gv-reward-pop.vp-crimson {
  border-color: rgba(255, 71, 87, 0.50);
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.72),
    0 0 46px rgba(255, 71, 87, 0.14),
    inset 0 1px 0 rgba(255, 200, 200, 0.14),
    inset 0 0 0 3px rgba(12, 7, 25, 0.9),
    inset 0 0 0 4px rgba(255, 71, 87, 0.28);
}
body.gv-veilplate .gv-reward-pop.vp-crimson .rp-title { color: #FFD9DC; text-shadow: 0 0 16px rgba(255, 71, 87, 0.45); }
body.gv-veilplate .gv-reward-pop.vp-crimson .rp-title::after { background: linear-gradient(90deg, transparent, rgba(255, 71, 87, 0.7), transparent); }

body.gv-veilplate .gv-reward-pop.vp-emerald { border-color: rgba(46, 213, 115, 0.42); }
body.gv-veilplate .gv-reward-pop.vp-violet  { border-color: rgba(191, 95, 255, 0.45); }

/* ── Relikwiarz ──────────────────────────────────────────────────────────
   Tylko mityczny drop, pokonany boss i koniec sezonu. To jedyny wariant z
   ramką 9-slice: inset 144 px przy pliku 768x512 (tam kończy się narożny
   ornament i zaczyna równy pasek — zmierzone na alfie, nie na oko).
   fill trzyma środek pusty, bo płyta rysuje się osobno pod spodem. */
body.gv-veilplate .gv-reward-pop.vp-reliquary {
  border: 34px solid transparent;
  border-image: url("../img/ui/crests/frame-reliquary.png") 144 / 34px / 0 stretch;
  border-radius: 0;
  padding: 10px 16px 16px;
  /* border-box, nie padding-box: ornament ramki ma między złoceniami prześwity,
     a przy padding-box płyta kończyła się na jej wewnętrznej krawędzi i przez te
     prześwity widać było tło gry. Płyta ma iść pod ramkę.

     Poświata jedzie tu jako warstwa tła, a nie przez ::before jak w zwykłym
     oknie. ::before jest pozycjonowany absolutnie, więc jego inset liczy się od
     PADDING-boxa — przy rancie 34 px zaczynał się 34 px poniżej górnej krawędzi
     okna i czerwień urywała się prostą poziomą linią pod ramką. Warstwa tła zna
     border-box, a przy okazji rysuje się POD border-image, więc złocenia
     zostają złote zamiast łapać czerwony nalot. */
  background:
    radial-gradient(ellipse 78% 42% at 50% 0%, var(--vp-glow, rgba(255,210,110,0.22)), transparent 72%) border-box,
    linear-gradient(180deg, #1A1030 0%, var(--vp-ink) 100%) border-box;
  box-shadow: 0 26px 80px rgba(0, 0, 0, 0.78), 0 0 56px rgba(191, 95, 255, 0.18);
}
body.gv-veilplate .gv-reward-pop.vp-reliquary::before { display: none; }
body.gv-veilplate .gv-reward-pop.vp-reliquary::after { inset: 0; border-radius: 0; }
body.gv-veilplate .gv-reward-pop.vp-reliquary .rp-crest[data-crest] { margin-top: -54px; }

/* ── wspólna karta okna ──────────────────────────────────────────────────
   #modalCard to JEDNA karta, na której stoi 56 okien w grze: awans, ataki
   areny, sklep, ekwipunek, gildia. Płyta wchodzi na nią globalnie, a nie po
   jednym oknie — inaczej gracz trafia raz na Veilplate, raz na starą fioletową
   kartę i wygląda to jak niedokończona zmiana, a nie jak dwa różne okna.

   Ziarno jedzie jako WARSTWA TŁA, nie przez ::after jak w powiadomieniu.
   .modal-card ma overflow-y:auto, więc pseudoelement odjechałby razem z
   przewijaną treścią przy dłuższych oknach (ekwipunek, sklep). Tło zostaje na
   miejscu. Krycie robi się przez alfę płyty leżącej NA ziarnie — 0.93 zostawia
   te 7%, których background nie umie ustawić osobno na warstwę.

   Okna, które już dziś zdejmują sobie tło (np. .modal-card:has(.chat-profile)
   z !important), zdejmują je nadal — nic tu tego nie przebija. */
body.gv-veilplate .modal-card {
  background:
    linear-gradient(180deg, rgba(26, 16, 48, 0.93) 0%, rgba(12, 7, 25, 0.93) 100%),
    url("../img/ui/crests/plate-grain.png") 0 0 / 128px 128px repeat,
    #0C0719;
  border: 1px solid rgba(200, 168, 78, 0.55);
  border-radius: 10px;
  box-shadow:
    0 24px 70px rgba(0, 0, 0, 0.72),
    0 0 46px rgba(191, 95, 255, 0.10),
    inset 0 1px 0 rgba(255, 232, 180, 0.16),
    inset 0 0 0 3px rgba(12, 7, 25, 0.9),
    inset 0 0 0 4px rgba(200, 168, 78, 0.30);
}

body.gv-veilplate .modal-card .level-up-big {
  color: #FFE9B8;
  text-shadow: 0 0 18px rgba(255, 200, 90, 0.45);
}

/* ── herby w oknach opartych o wspólną kartę ─────────────────────────────
   Te okna mają własne miejsce na godło, więc herb wchodzi tam, gdzie dotąd
   stała emoji albo ikonka — kółko i jego poświata schodzą, bo tarcza ma
   własny rant i pod obwódką robi się z tego dwie ramki jedna w drugiej. */
body.gv-veilplate .modal-icon[data-crest="level"] {
  width: 104px; height: 104px;
  margin: 0 auto 6px;
  font-size: 0;
  background: url("../img/ui/crests/crest-level.png") center / contain no-repeat;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, 0.7));
  animation: vp-crest-in .42s cubic-bezier(.2, 1.4, .4, 1) both;
}

/* Ataki areny: 42px kółko z piąstką zamienia się w herb areny — to pierwsze
   miejsce w grze, gdzie ten herb ma co robić. */
body.gv-veilplate .def-notif-crest {
  width: 52px; height: 52px;
  background: url("../img/ui/crests/crest-arena.png") center / contain no-repeat;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.7));
}
body.gv-veilplate .def-notif-crest img { display: none; }

/* ── panel wyzwalacza (tylko staging/localhost) ─────────────────────────── */
#vpDebug {
  position: fixed; right: 12px; bottom: 92px; z-index: 100000;
  font-family: Inter, system-ui, sans-serif;
}
#vpDebug .vpd-toggle {
  display: flex; align-items: center; gap: 7px;
  padding: 9px 13px; border-radius: 9px; cursor: pointer;
  background: linear-gradient(180deg, #241640, #0C0719);
  border: 1px solid rgba(200, 168, 78, 0.6);
  color: #FFE9B8; font: 800 11px/1 Inter, system-ui, sans-serif;
  letter-spacing: 1.3px; text-transform: uppercase;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6);
}
#vpDebug .vpd-panel {
  display: none;
  width: 232px; margin-bottom: 8px; padding: 12px;
  border-radius: 10px;
  background: linear-gradient(180deg, #1A1030, #0C0719);
  border: 1px solid rgba(200, 168, 78, 0.45);
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.7);
}
#vpDebug.open .vpd-panel { display: block; }
#vpDebug .vpd-h {
  font: 800 9px/1 Inter, system-ui, sans-serif; letter-spacing: 1.5px;
  text-transform: uppercase; color: #8D80AB; margin: 0 0 7px;
}
#vpDebug .vpd-h + .vpd-h { margin-top: 13px; }
#vpDebug button.vpd-fire {
  display: flex; align-items: center; gap: 9px; width: 100%;
  margin-bottom: 4px; padding: 6px 8px; cursor: pointer;
  border-radius: 7px; border: 1px solid rgba(200, 168, 78, 0.22);
  background: rgba(200, 168, 78, 0.07);
  color: #EFE9FF; font: 700 12px/1 Inter, system-ui, sans-serif; text-align: left;
}
#vpDebug button.vpd-fire:hover { border-color: rgba(200, 168, 78, 0.6); background: rgba(200, 168, 78, 0.14); }
#vpDebug button.vpd-fire i {
  width: 26px; height: 26px; flex: 0 0 26px;
  background: center / contain no-repeat;
}
#vpDebug .vpd-skin {
  display: flex; gap: 6px; margin-top: 4px;
}
#vpDebug .vpd-skin button {
  flex: 1; padding: 7px 4px; cursor: pointer; border-radius: 7px;
  border: 1px solid rgba(200, 168, 78, 0.28);
  background: rgba(200, 168, 78, 0.06); color: #A99CC4;
  font: 800 10px/1 Inter, system-ui, sans-serif; letter-spacing: 0.6px; text-transform: uppercase;
}
#vpDebug .vpd-skin button.on {
  border-color: rgba(200, 168, 78, 0.75);
  background: linear-gradient(180deg, rgba(255, 215, 140, 0.26), rgba(200, 140, 50, 0.12));
  color: #FFE9B8;
}

/* ═══════════════════════════════════════════════════════════════════════════
   KRAWĘDŹ KOLUMNY — styk panelu profilowego ze sceną

   Dziś kolumna kończy się włoskową kreską i zaraz za nią zaczyna się malowane
   tło. Dwa materiały spotykają się bez niczego pomiędzy, więc czyta się to jak
   wycięcie w obrazku, a nie jak krawędź czegokolwiek.

   Nakładka jest position:fixed, nie ::before wewnątrz kolumny ani wewnątrz
   #mainContent — obie te rzeczy scrollują (kolumna ma overflow-y:auto, główna
   treść też), więc pseudoelement odjechałby razem z treścią. Fixed trzyma się
   krawędzi, bo kolumna zaczyna się przy lewej krawędzi okna i ma stałą szerokość.
   Stąd --gv-col-w: jedna liczba na breakpoint zamiast powtarzania 300/340/260
   przy każdym wariancie.
   ═══════════════════════════════════════════════════════════════════════════ */

:root { --gv-col-w: 300px; }
@media (min-width: 1200px) { :root { --gv-col-w: 340px; } }
html.gv-land-mobile { --gv-col-w: 260px; }

/* Poniżej 960 px kolumny nie ma wcale — nakładka nie ma czego łączyć.
   UWAGA: ta bramka stała tu wcześniej jako `@media (max-width:959px)
   { html:not(.gv-land-mobile) #gameLayout::after { display:none } }`, a trzy
   linijki niżej warianty włączały nakładkę z powrotem selektorem o TEJ SAMEJ
   specyficzności (`html.gv-edge-rule` = 0,1,1 tak samo jak
   `html:not(.gv-land-mobile)`), więc wygrywała reguła późniejsza. Efekt:
   na telefonie 56-pikselowy pas ze złotą kreską rysował się na `left:300px`
   jako `position:fixed` — pionowa kreska przez środek ekranu na KAŻDYM
   widoku. Zgłosił Roo. Włączanie jest teraz zabramkowane u źródła, zamiast
   być odbramkowywane po fakcie. */

#gameLayout::after {
  content: "";
  position: fixed;
  top: 0; bottom: 0;
  left: var(--gv-col-w);
  width: 0;
  pointer-events: none;
  z-index: 1;
  display: none;
}
@media (min-width: 960px) {
  html.gv-edge-mist #gameLayout::after,
  html.gv-edge-rule #gameLayout::after,
  html.gv-edge-pillar #gameLayout::after { display: block; }
}
/* Poziom na telefonie MA kolumnę (260 px), więc tam nakładka ma co łączyć. */
html.gv-land-mobile.gv-edge-mist #gameLayout::after,
html.gv-land-mobile.gv-edge-rule #gameLayout::after,
html.gv-land-mobile.gv-edge-pillar #gameLayout::after { display: block; }

/* Własna kreska kolumny znika, gdy wariant rysuje swoją — inaczej stoją dwie
   linie obok siebie i krawędź robi się grubsza, nie miększa. */
html.gv-edge-mist   #sidebarLeft,
html.gv-edge-pillar #sidebarLeft { border-right: 0; }

/* ── 1. MGŁA ── scena wtapia się w kolumnę, twarda linia znika zupełnie ── */
html.gv-edge-mist #gameLayout::after {
  width: 110px;
  background: linear-gradient(90deg,
    rgba(8, 5, 18, 0.95) 0%,
    rgba(8, 5, 18, 0.72) 22%,
    rgba(8, 5, 18, 0.34) 55%,
    transparent 100%);
}

/* ── 2. LISTWA ── włoskowe złoto plus cień rzucany na scenę ── */
html.gv-edge-rule #sidebarLeft { border-right-color: rgba(200, 168, 78, 0.42); }
html.gv-edge-rule #gameLayout::after {
  width: 56px;
  background: linear-gradient(90deg, rgba(4, 2, 10, 0.62), transparent 100%);
  box-shadow: inset 1px 0 0 rgba(255, 212, 106, 0.16);
}

/* ── 3. FILAR ── kolumna jako kamienna płyta stojąca PRZED sceną ──
   Ziarno wchodzi jako dodatkowa warstwa tła, a nie przez ::before, bo
   pseudoelement w scrollowanej kolumnie jechałby razem z ekwipunkiem. */
html.gv-edge-pillar .desktop-sidebar {
  background:
    url("../img/ui/crests/plate-grain.png") 0 0 / 128px 128px repeat,
    radial-gradient(ellipse 120% 80% at 50% 0%, rgba(40,25,70,0.35), transparent 60%),
    radial-gradient(ellipse 100% 60% at 50% 100%, rgba(30,15,50,0.3), transparent 60%),
    linear-gradient(180deg, #0c0814 0%, #0a0612 50%, #080510 100%);
}
html.gv-edge-pillar #gameLayout::after {
  width: 84px;
  background: linear-gradient(90deg,
    rgba(0, 0, 0, 0.78) 0%,
    rgba(0, 0, 0, 0.42) 30%,
    rgba(0, 0, 0, 0.14) 62%,
    transparent 100%);
  box-shadow:
    inset 1px 0 0 rgba(255, 224, 160, 0.13),   /* światło na fazie płyty */
    inset 3px 0 6px -3px rgba(0, 0, 0, 0.9);   /* cień tuż pod nią */
}