/* ═══════════════════════════════════════════════════════════════
   SZCZELINA — TABLICA MISJI (js/rift-board.js)

   Wersja 4, 05.09 noc. Trzy poprzednie krecily sie wokol OKRAGLEGO
   PORTALU z ilustracji i kazda konczyla sie tym samym: kolko, w nim
   kolko, krzywo, „nie podoba mi sie ten caly koncept" (Mark).

   Teraz doslownie z nazwy: SZCZELINA TO ROZDARCIE W NIEBIE. Kazda misja
   jest pionowa, poszarpana, swiecaca szczelina w nocnym niebie (SVG),
   przez ktora przeswituje kawalek tamtego swiata — ilustracja toru
   przycieta ksztaltem rozdarcia, powoli plynaca. Wokol iskry, wzdluz
   krawedzi biegnie blysk. Pod kazda kamienna tablica ze zlotym rytem.
   Aktywna misja: jedno wielkie, rozwarte rozdarcie, ktore ZASKLEPIA
   SIE z czasem — zloty szew biegnie po krawedzi (to jest postep).

   Zadnych okien, zadnych kol. Animacje CSS/SVG, gasna przy
   prefers-reduced-motion. Poprzednie wersje sa w historii gita.
   ═══════════════════════════════════════════════════════════════ */

#panelTavern.rift2 {
  --rf2-text: var(--text, #F0EAFF);
  --rf2-dim: #CBC2E8;
  --rf2-gold: #FFD46A;
  --rf2-gold-deep: #C8A84E;
  --rf2-line: rgba(200, 168, 78, 0.5);
  --rf2-swift: #2ED573;
  --rf2-arcane: #4FACFE;
  --rf2-mystic: #BF5FFF;
  --rf2-shadow-text: 0 2px 10px rgba(0, 0, 0, 0.85), 0 0 2px rgba(0, 0, 0, 0.9);
  color: var(--rf2-text);
  overflow: hidden !important;
}
#panelTavern.rift2 > .rf2 {
  position: absolute !important; inset: 0; overflow-x: hidden; overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  font-family: var(--font-body); z-index: 2 !important;
}

/* Tlo: sky-bg.webp, gdy jest (patrz bg() w module); bez pliku warstwa
   jest pusta i przeswituje tlo z reguly #panelTavern. Lezy w PANELU obok
   .rf2 (ktory przewija tresc), wiec stoi w miejscu i siega do dna.
   `!important`, bo style.css nadaje dzieciom panelu position: relative. */
#panelTavern.rift2 > .rf2-bg { position: absolute !important; inset: 0; overflow: hidden; z-index: 1 !important; pointer-events: none; }
.rf2-bg picture { position: absolute; inset: 0; display: block; }
.rf2-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 60%; display: block; }
.rf2-bg::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 5, 25, 0.75) 0%, rgba(10, 5, 25, 0.35) 22%, rgba(10, 5, 25, 0) 45%);
}
/* Poswiata przy ziemi. */
.rf2-bg::after {
  content: ''; position: absolute; left: -10%; right: -10%; bottom: 0; height: 46%;
  background: radial-gradient(ellipse 60% 70% at 50% 100%, rgba(191, 95, 255, 0.22) 0%, rgba(191, 95, 255, 0) 70%),
              linear-gradient(180deg, rgba(20, 10, 40, 0) 0%, rgba(20, 10, 40, 0.45) 60%, rgba(14, 8, 30, 0.75) 100%);
}
/* Scena SCHODZI DO KOLORU PASKA (#060212) TAM, GDZIE PASEK SIE ZACZYNA —
   a nie na dnie panelu. To byl blad dwoch poprzednich prob: na komputerze
   panel siega dna okna, a pasek PLYWA NAD NIM (`position: absolute`
   w style.css), wiec wygaszanie liczone od dolu panelu dzialo sie POD
   paskiem i na jego gornej krawedzi grafika nadal byla jasna. Stad
   „ucieta" posadzka, ktorej dwa razy nie udalo mi sie zdjac.

   Jeden pas robi obie rzeczy: wygasza az do koloru paska, a ponizej jego
   gornej krawedzi jest juz tylko ten kolor. Wysokosc paska mierzy js/ui.js
   do `--gv-nav-h`. */
.rf2-bg-foot {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 1; pointer-events: none;
  height: calc(var(--gv-nav-h, 128px) + var(--gv-safe-b, env(safe-area-inset-bottom, 0px)) + 130px);
  background: linear-gradient(180deg,
    rgba(6, 2, 18, 0) 0px,
    rgba(6, 2, 18, 0.5) 70px,
    rgba(6, 2, 18, 0.9) 110px,
    #060212 130px);
}

.rf2-wrap {
  position: relative; z-index: 1;
  max-width: 1140px; margin: 0 auto;
  /* Zapas na pasek nawigacji NA DOLE PRZEWIJANEJ TRESCI.
     Na komputerze `#tabBar` jest `position: absolute` i PLYWA NAD panelem
     (style.css, @media min-width 960px) — panel siega dna okna, a pasek
     zakrywa jego ostatnie ~120 px. Bez tego zapasu przycisk „Wejdz do
     portalu" siedzial pod paskiem i nie dalo sie go klilknac: przewiniecie
     do konca nic nie dawalo, bo tresc konczyla sie dokladnie tam, gdzie
     zaczynal sie pasek. Kilku graczy zglosilo, ze nie moga wystartowac
     misji (05.09). Wysokosc paska mierzy js/ui.js do `--gv-nav-h` — pasek
     rosnie, gdy dochodzi wstega Swiatowego Bossa, wiec liczba na sztywno
     starcza tylko do pierwszej takiej zmiany. */
  padding: 10px 16px calc(var(--gv-nav-h, 128px) + var(--gv-safe-b, env(safe-area-inset-bottom, 0px)) + 28px);
  display: flex; flex-direction: column; gap: 6px;
}

/* ── Naglowek ─────────────────────────────────────────────────── */
.rf2-head { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 2px; padding: 4px 0 0; }
.rf2-emblem { width: 44px; height: 44px; object-fit: contain; filter: drop-shadow(0 0 12px rgba(191, 95, 255, 0.6)); margin-bottom: -4px; }
.rf2-head-txt { display: flex; flex-direction: column; align-items: center; }
.rf2-head h1 {
  position: relative; margin: 0; padding: 0 22px;
  font-family: var(--font-display); font-size: 26px; font-weight: 600; letter-spacing: 4px; text-transform: uppercase;
  color: var(--rf2-gold); line-height: 1.15; text-shadow: var(--rf2-shadow-text), 0 0 24px rgba(255, 212, 106, 0.25);
}
.rf2-head h1::before, .rf2-head h1::after {
  content: ''; position: absolute; top: 55%; width: 70px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--rf2-gold-deep));
}
.rf2-head h1::before { right: 100%; }
.rf2-head h1::after { left: 100%; transform: scaleX(-1); }
.rf2-head p { margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: #DCD4F5; max-width: 600px; text-shadow: var(--rf2-shadow-text); }

/* ── Stamina: cienki pasek ────────────────────────────────────── */
.rf2-stam { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 0 2px; }
.rf2-stam-gauge { display: grid; grid-template-columns: 26px minmax(220px, 380px) auto; grid-template-rows: auto auto; align-items: center; column-gap: 10px; row-gap: 1px; }
.rf2-stam-pot { grid-row: 1 / 3; width: 26px; height: 26px; object-fit: contain; filter: drop-shadow(0 0 7px rgba(110, 215, 255, 0.55)); }
.rf2-stam-track {
  position: relative; height: 9px; 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), 0 0 10px rgba(0, 0, 0, 0.5);
}
.rf2-stam-track > i {
  display: block; height: 100%; border-radius: 999px;
  background: linear-gradient(180deg, #d6f7ff 0%, #58c8f5 55%, #2a8ad6 100%);
  box-shadow: 0 0 10px rgba(110, 215, 255, 0.8);
  transition: width 320ms cubic-bezier(.4, 0, .2, 1);
}
.rf2-stam-track > u { position: absolute; top: 1px; bottom: 1px; width: 1px; background: rgba(200, 168, 78, 0.45); }
.rf2-stam-val { font-family: var(--font-display); font-size: 18px; color: var(--rf2-gold); line-height: 1; white-space: nowrap; text-shadow: var(--rf2-shadow-text); }
.rf2-stam-val em { font-style: normal; font-size: 11px; color: var(--rf2-dim); }
.rf2-stam-lbl { grid-column: 2 / 4; font-size: 8.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--rf2-dim); text-shadow: var(--rf2-shadow-text); }
.rf2-stam.empty .rf2-stam-track { border-color: rgba(255, 71, 87, 0.6); }
.rf2-stam-buys { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.rf2-buy {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: 999px; cursor: pointer;
  background: rgba(6, 3, 14, 0.55); border: 1px solid rgba(200, 168, 78, 0.35);
  color: var(--rf2-text); font-family: var(--font-body);
  transition: transform .12s ease, border-color .15s ease, background .15s ease;
}
.rf2-buy:hover { border-color: var(--rf2-gold); background: rgba(58, 32, 104, 0.6); }
.rf2-buy:active { transform: scale(0.96); }
.rf2-buy b { font-family: var(--font-display); font-size: 13px; color: #9fe6ff; }
.rf2-buy span { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 800; color: var(--rf2-gold); }
.rf2-buy span img { width: 12px; height: 12px; object-fit: contain; }
.rf2-buy i { font-style: normal; font-size: 8.5px; letter-spacing: 0.5px; color: var(--rf2-dim); text-transform: uppercase; }
.rf2-buy.fill { border-color: rgba(255, 212, 106, 0.55); }
.rf2-stam-reset { font-size: 10.5px; color: var(--rf2-dim); text-shadow: var(--rf2-shadow-text); }
.rf2-stam-reset span { font-weight: 800; color: var(--rf2-text); font-variant-numeric: tabular-nums; }
.rf2-stam-empty {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 10px;
  padding: 5px 14px; border-radius: 999px;
  background: rgba(255, 71, 87, 0.12); border: 1px solid rgba(255, 71, 87, 0.4);
}
.rf2-stam-empty b { color: #ff8a94; font-size: 12px; }
.rf2-stam-empty span { font-size: 11px; color: var(--rf2-dim); }

/* ── Trzy rozdarcia w niebie ─────────────────────────────────── */
.rf2-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; padding-top: 4px; }
.rf2-card { display: flex; flex-direction: column; align-items: center; min-width: 0; text-align: center; --pc: var(--rf2-arcane); }
.rf2-card.tier-swift  { --pc: var(--rf2-swift); }
.rf2-card.tier-arcane { --pc: var(--rf2-arcane); }
.rf2-card.tier-mystic { --pc: var(--rf2-mystic); }

/* Rozdarcie: SVG 1:2. Warstwy od spodu: poswiata (ten sam ksztalt,
   rozmyty), swiat za rozdarciem (ilustracja przycieta ksztaltem, plynie),
   winieta, jasna krawedz i blysk biegnacy po niej. */
.rf3-tear { position: relative; width: min(100%, 240px); aspect-ratio: 1 / 2; z-index: 2; }
.rf3-svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transition: transform .35s cubic-bezier(.2, .8, .2, 1); transform-origin: 50% 50%; }
.rf3-glow { fill: var(--pc); opacity: 0.9; animation: rf3Pulse 3.6s ease-in-out infinite; transform-origin: 50% 50%; transform-box: fill-box; }
/* druga, szersza poswiata: sam SVG-owy blur konczyl sie za blisko krawedzi */
.rf3-tear::before { content: ''; position: absolute; inset: 10% -30%; border-radius: 50%; background: radial-gradient(ellipse 45% 50% at 50% 50%, color-mix(in srgb, var(--pc) 45%, transparent) 0%, color-mix(in srgb, var(--pc) 12%, transparent) 50%, transparent 75%); filter: blur(10px); animation: rf3Pulse 3.6s ease-in-out infinite; pointer-events: none; }
/* Scena po tamtej stronie ma ZYC. Petla jest zamknieta (wraca do tego
   samego kadru), a nie `alternate` — odwracanie ruchu widac golym okiem
   i od razu czuc, ze to plik, a nie okno. */
.rf3-scene { animation: rf3Drift 28s linear infinite; transform-origin: 50% 50%; transform-box: fill-box; }
.rf3-tint { pointer-events: none; }
/* Smuga swiatla po szkle — jak odblask na czyms, co sie rusza. */
.rf3-sheen { transform-box: view-box; animation: rf3Sweep 9s linear infinite; pointer-events: none; }
/* Pylki unoszace sie PO TAMTEJ STRONIE (grupa jest przycieta ksztaltem,
   wiec nie wychodza poza szczeline — inaczej niz iskry na zewnatrz). */
.rf3-in {
  fill: #fffbe8; transform-box: view-box; opacity: 0;
  animation: rf3InUp 6s ease-out infinite; animation-delay: var(--d, 0s);
}
.rf3-edge { fill: none; stroke: #fff7d6; stroke-width: 1.6; stroke-linejoin: round; filter: drop-shadow(0 0 3px #fff) drop-shadow(0 0 8px var(--pc)); opacity: 0.95; animation: rf3Flicker 5s steps(1, end) infinite; }
.rf3-bolt { fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 9 191; stroke-dashoffset: 0; filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 10px var(--rf2-gold)); animation: rf3Run 4.5s linear infinite; }
.rf2-card:hover .rf3-svg { transform: scaleX(1.14) scaleY(1.03); }
.rf2-card:hover .rf3-glow { opacity: 1; }

/* Iskry wylatuja z rozdarcia i gasna. */
.rf2-motes { position: absolute; inset: 0; pointer-events: none; }
.rf2-motes i {
  position: absolute; top: 50%; left: 50%; width: 4px; height: 4px; margin: -2px 0 0 -2px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 6px #fff, 0 0 12px var(--pc);
  opacity: 0; animation: rf3Spark 3.2s ease-out infinite; animation-delay: var(--d, 0s);
  --dx: 0px; --dy: -60px;
}
.rf2-motes i:nth-child(1) { --dx: -46px; --dy: -70px; top: 30%; }
.rf2-motes i:nth-child(2) { --dx: 52px; --dy: -40px; top: 45%; width: 3px; height: 3px; }
.rf2-motes i:nth-child(3) { --dx: -38px; --dy: 30px; top: 60%; }
.rf2-motes i:nth-child(4) { --dx: 44px; --dy: 62px; top: 72%; width: 3px; height: 3px; }
.rf2-motes i:nth-child(5) { --dx: -20px; --dy: -90px; top: 22%; }
.rf2-motes i:nth-child(6) { --dx: 30px; --dy: -80px; top: 36%; width: 5px; height: 5px; }
.rf2-motes i:nth-child(7) { --dx: -56px; --dy: 10px; top: 52%; width: 3px; height: 3px; }
.rf2-motes i:nth-child(8) { --dx: 48px; --dy: 24px; top: 66%; }

.rf2-tier {
  position: absolute; left: 50%; top: -8px; transform: translateX(-50%); z-index: 3;
  font-size: 9px; letter-spacing: 1.4px; text-transform: uppercase; font-weight: 800; white-space: nowrap;
  padding: 3px 10px; border-radius: 999px;
  color: #fff; background: var(--pc); box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6), 0 0 14px color-mix(in srgb, var(--pc) 60%, transparent);
}

/* Swiatlo rozdarcia na posadzce. */
.rf3-ground {
  position: relative; width: 120%; height: 54px; margin: -30px 0 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 50% 60% at 50% 40%, color-mix(in srgb, var(--pc) 55%, transparent) 0%, color-mix(in srgb, var(--pc) 18%, transparent) 45%, transparent 72%);
  filter: blur(6px); animation: rf3Pulse 3.6s ease-in-out infinite;
}

.rf2-card.lack .rf3-scene { filter: saturate(0.2) brightness(0.55); }
.rf2-card.lack .rf3-glow, .rf2-card.lack .rf3-ground, .rf2-card.lack .rf2-motes { opacity: 0.2; animation: none; }
.rf2-card.lack .rf3-bolt { display: none; }

/* ── Kamienna tablica z rytem ─────────────────────────────────── */
.rf2-body {
  position: relative; z-index: 2; width: min(100%, 300px); margin-top: -14px;
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 22px 14px 16px;
  background: linear-gradient(180deg, rgba(58, 38, 96, 0.55) 0%, rgba(24, 14, 46, 0.92) 18%, rgba(12, 7, 26, 0.96) 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);
}
.rf2-body::before, .rf2-plaque::before {
  content: ''; position: absolute; top: 9px; left: 14%; right: 14%; height: 1px;
  background: linear-gradient(90deg, transparent, var(--rf2-gold-deep) 30%, var(--rf2-gold-deep) 70%, transparent);
}
.rf2-body::after, .rf2-plaque::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);
}
.rf2-name {
  margin: 2px 0 0; font-family: var(--font-display); font-size: 18px; font-weight: 700; letter-spacing: 0.5px;
  color: var(--rf2-gold); line-height: 1.2; min-height: 2.4em; display: flex; align-items: flex-end; justify-content: center;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.9), 0 0 14px rgba(255, 212, 106, 0.2);
}
.rf3-sub { font-size: 9.5px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--rf2-dim); }
.rf3-sub b { color: var(--pc); font-weight: 800; }

.rf2-facts { display: flex; align-items: center; justify-content: center; gap: 16px; padding: 4px 0 2px; }
.rf2-fact { position: relative; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.rf2-fact + .rf2-fact::before { content: ''; position: absolute; left: -9px; top: 20%; height: 60%; width: 1px; background: rgba(200, 168, 78, 0.35); }
.rf2-fact b { font-family: var(--font-display); font-size: 21px; color: #fff; line-height: 1.05; }
.rf2-fact i { font-style: normal; font-size: 9px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--rf2-dim); }
.rf2-fact em { position: absolute; top: -2px; right: -26px; font-style: normal; font-size: 9px; font-weight: 800; color: var(--rf2-swift); }
.rf2-fact.lack b { color: #ff9aa2; }

.rf2-rw { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; }
.rf2-chip { display: inline-flex; align-items: center; gap: 5px; }
.rf2-chip img { width: 16px; height: 16px; object-fit: contain; }
.rf2-chip b { font-family: var(--font-display); font-size: 14.5px; line-height: 1; }
.rf2-chip i { font-style: normal; font-size: 10px; color: var(--rf2-dim); }
.rf2-chip.gold b { color: #FFD46A; }
.rf2-chip.xp b   { color: #8FC2FF; }
.rf2-chip.loot b { color: #8fe8b4; }
.rf2-chip.dia b  { color: #8fe4ff; }
.rf2-chip.veil b { color: #d1b0ff; }

.rf2-rate { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 4px 10px; padding-top: 6px; border-top: 1px solid rgba(200, 168, 78, 0.16); width: 100%; }
.rf2-rate > i { font-style: normal; font-size: 9px; letter-spacing: 1.4px; text-transform: uppercase; color: var(--rf2-dim); flex: 1 1 100%; text-align: center; }
.rf2-rate span { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px 2px 4px; border-radius: 999px; border: 1px solid transparent; }
.rf2-rate span img { width: 13px; height: 13px; object-fit: contain; }
.rf2-rate span b { font-family: var(--font-display); font-size: 12.5px; color: var(--rf2-text); }
.rf2-rate span em { font-style: normal; font-size: 8px; letter-spacing: 0.8px; text-transform: uppercase; font-weight: 800; color: var(--rf2-gold); }
.rf2-rate span.best { border-color: rgba(255, 212, 106, 0.5); background: rgba(255, 212, 106, 0.08); }
.rf2-rate span.best b { color: var(--rf2-gold); }

.rf2-go {
  margin-top: 4px; width: 100%; padding: 10px 14px; border-radius: 999px; cursor: pointer;
  font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--rf2-gold); background: rgba(6, 3, 14, 0.55); border: 1px solid var(--rf2-gold-deep);
  box-shadow: 0 0 18px rgba(255, 212, 106, 0.12), inset 0 0 12px rgba(255, 212, 106, 0.06);
  transition: transform .12s ease, background .2s ease, color .2s ease, box-shadow .2s ease;
}
.rf2-go:hover:not(:disabled) { background: linear-gradient(135deg, var(--rf2-gold), #F4B740); color: #1a1208; box-shadow: 0 6px 22px rgba(244, 183, 64, 0.45); }
.rf2-go:active:not(:disabled) { transform: scale(0.97); }
.rf2-go:disabled { opacity: 0.5; cursor: default; }
.rf2-need {
  margin-top: 4px; width: 100%; padding: 7px 12px; border-radius: 999px; text-align: center;
  font-size: 11px; font-weight: 700; color: #ff9aa2;
  background: rgba(255, 71, 87, 0.12); border: 1px solid rgba(255, 71, 87, 0.4);
}
.rf2-none { padding: 40px 16px; text-align: center; color: var(--rf2-dim); font-size: 14px; }

/* ── Stopka ───────────────────────────────────────────────────── */
.rf2-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 22px; padding: 12px 4px 0; }
.rf2-refresh { font-size: 11.5px; color: var(--rf2-dim); text-shadow: var(--rf2-shadow-text); }
.rf2-refresh b { color: var(--rf2-text); font-variant-numeric: tabular-nums; }
.rf2-pills { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.rf2-pills > i { font-style: normal; font-size: 8.5px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--rf2-dim); margin-right: 2px; text-shadow: var(--rf2-shadow-text); }
.rf2-pill { font-size: 10px; font-weight: 800; padding: 2px 8px; border-radius: 999px; background: rgba(6, 3, 14, 0.55); border: 1px solid rgba(255, 255, 255, 0.1); }
.rf2-pill.speed { color: var(--rf2-swift); }
.rf2-pill.gold  { color: var(--rf2-gold); }
.rf2-pill.xp    { color: #8FC2FF; }
.rf2-pill.prem  { color: var(--rf2-gold); border-color: rgba(200, 168, 78, 0.5); }

/* ═══════════════════════════════════════════════════════════════
   AKTYWNA MISJA — rozwarte rozdarcie, ktore sie zasklepia
   ═══════════════════════════════════════════════════════════════ */
.rf2-stage { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 6px; --pc: var(--rf2-arcane); }
.rf2-active.tier-swift  .rf2-stage { --pc: var(--rf2-swift); }
.rf2-active.tier-arcane .rf2-stage { --pc: var(--rf2-arcane); }
.rf2-active.tier-mystic .rf2-stage { --pc: var(--rf2-mystic); }

.rf2-tunnel {
  position: absolute; left: 50%; top: -10px; width: 560px; height: 560px; max-width: 170vw;
  transform: translateX(-50%); border-radius: 50%; overflow: hidden; z-index: 0; pointer-events: none;
  background: radial-gradient(circle, rgba(255, 230, 160, 0.3) 0%, rgba(140, 63, 214, 0.32) 28%, rgba(30, 15, 60, 0.5) 58%, transparent 72%);
  -webkit-mask: radial-gradient(circle, #000 35%, transparent 70%);
          mask: radial-gradient(circle, #000 35%, transparent 70%);
  opacity: 0.85;
}
.rf2-tunnel img { width: 100%; height: 100%; object-fit: cover; display: block; animation: rf2Spin 90s linear infinite; }

.rf3-tear.big { width: min(100%, 300px); z-index: 2; }
.rf3-tear.big .rf3-svg { transform: scaleX(1.3); }
.rf3-tear.big .rf3-glow { opacity: 0.9; }
.rf3-seam { fill: none; stroke: var(--rf2-gold); stroke-width: 3; stroke-linejoin: round; stroke-linecap: round; stroke-dasharray: 100; filter: drop-shadow(0 0 4px var(--rf2-gold)) drop-shadow(0 0 10px rgba(255, 212, 106, 0.6)); transition: stroke-dashoffset 1s linear; }

.rf2-time {
  position: relative; z-index: 3; margin-top: 6px;
  display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap;
  font-size: 11px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--rf2-dim); text-shadow: var(--rf2-shadow-text);
}
.rf2-time b { font-family: var(--font-display); font-size: 44px; line-height: 1; color: var(--rf2-gold); font-variant-numeric: tabular-nums; text-shadow: var(--rf2-shadow-text), 0 0 26px rgba(255, 212, 106, 0.35); }
.rf2-stage .rf3-ground { width: 420px; max-width: 100%; height: 70px; margin-top: -36px; }

.rf2-plaque {
  position: relative; z-index: 2; width: min(100%, 520px); margin-top: 8px;
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 22px 18px 18px; text-align: center;
  background: linear-gradient(180deg, rgba(58, 38, 96, 0.55) 0%, rgba(24, 14, 46, 0.92) 18%, rgba(12, 7, 26, 0.96) 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);
}
.rf2-plaque .rf2-name { min-height: 0; font-size: 21px; }
.rf2-sub { font-size: 10px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--rf2-dim); }
.rf2-plaque .rf2-go { width: min(100%, 300px); }
.rf2-acts { display: flex; gap: 10px; justify-content: center; margin-top: 4px; width: 100%; }
.rf2-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-width: 150px; padding: 9px 16px; border-radius: 999px; cursor: pointer;
  background: rgba(6, 3, 14, 0.55); border: 1px solid rgba(200, 168, 78, 0.4);
  color: var(--rf2-text); font-family: var(--font-body); font-size: 12px; font-weight: 800; letter-spacing: 0.4px;
  transition: transform .12s ease, border-color .15s ease, background .15s ease;
}
.rf2-btn img { width: 14px; height: 14px; object-fit: contain; }
.rf2-btn:hover:not(:disabled) { border-color: var(--rf2-gold); background: rgba(58, 32, 104, 0.6); }
.rf2-btn:active:not(:disabled) { transform: scale(0.96); }
.rf2-btn:disabled { opacity: 0.5; cursor: default; }
.rf2-btn.danger { border-color: rgba(255, 71, 87, 0.45); color: #ff8a94; }

.rf2-active.ready .rf2-stage { --pc: #FFD46A; }
.rf2-active.ready .rf3-seam { stroke-dashoffset: 0 !important; }
.rf2-active.ready .rf3-tear.big .rf3-svg { animation: rf3Throb 1.8s ease-in-out infinite; }
.rf2-active.ready .rf2-time b { font-size: 20px; letter-spacing: 2px; }
.rf2-active.ready .rf2-go { background: linear-gradient(135deg, var(--rf2-gold), #F4B740); color: #1a1208; }
.rf2-go.pulse { animation: rf2Pulse 1.6s ease-in-out infinite; }

/* ── Ruch ─────────────────────────────────────────────────────── */
@keyframes rf2Spin { to { transform: rotate(360deg); } }
@keyframes rf3Pulse { 0%, 100% { opacity: 0.7; transform: scale(1); } 50% { opacity: 1; transform: scale(1.06); } }
@keyframes rf3Drift {
  0%   { transform: translate(0, 0) scale(1.06); }
  25%  { transform: translate(-1.6%, -1.1%) scale(1.11); }
  50%  { transform: translate(-3%, 0.6%) scale(1.08); }
  75%  { transform: translate(-1.3%, 1.6%) scale(1.11); }
  100% { transform: translate(0, 0) scale(1.06); }
}
@keyframes rf3Sweep { 0%, 55% { transform: translateX(0); } 100% { transform: translateX(430px); } }
@keyframes rf3InUp {
  0%   { transform: translateY(0) scale(0.7); opacity: 0; }
  12%  { opacity: 0.9; }
  70%  { opacity: 0.7; }
  100% { transform: translateY(-150px) scale(1.05); opacity: 0; }
}
@keyframes rf3Flicker { 0%, 100% { opacity: 0.95; } 7% { opacity: 0.55; } 9% { opacity: 1; } 43% { opacity: 0.8; } 45% { opacity: 1; } 71% { opacity: 0.6; } 73% { opacity: 0.95; } }
@keyframes rf3Run { to { stroke-dashoffset: -200; } }
@keyframes rf3Spark { 0% { transform: translate(0, 0) scale(0.6); opacity: 0; } 10% { opacity: 1; } 100% { transform: translate(var(--dx), var(--dy)) scale(1.1); opacity: 0; } }
@keyframes rf3Throb { 0%, 100% { transform: scaleX(1.3) scaleY(1); } 50% { transform: scaleX(1.38) scaleY(1.02); } }
@keyframes rf2Pulse { 0%, 100% { box-shadow: 0 4px 16px rgba(244, 183, 64, 0.35); } 50% { box-shadow: 0 4px 30px rgba(244, 183, 64, 0.85), 0 0 0 6px rgba(255, 212, 106, 0.18); } }

/* ── Telefon ──────────────────────────────────────────────────────
   CALA TABLICA MA SIE MIESCIC W OKNIE. Zgloszenie _VOJTA_ (06.09):
   „sometimes is problem to scroll down in the rift on mobile, need to
   scroll down 5 times", i decyzja Marka: gracz ma widziec misje RAZEM
   z przyciskiem, bez przewijania.

   Pomiar przed zmiana (scripts/rift-visual-rig.html, 390x844): do
   dyspozycji 722 px, tresc 1104 px. Rozklad: naglowek 97, energia 129,
   trzy karty 829, stopka 29. Karty byly wiec calym problemem — jedna
   miala 267 px, a na trzy zostawalo okolo 450.

   Zasada ciecia: NIE wyrzucamy niczego, co gracz czyta, i nie ruszamy
   oprawy — rozdarcia, poswiaty, kamiennej tablicy. Scinamy powietrze
   (odstepy, wyscielenie, puste etykiety) i skladamy to, co i tak stalo
   obok siebie, w jeden wiersz. Wysokosci ida z `vh`, wiec na mniejszym
   telefonie karta kurczy sie sama, zamiast wypychac przycisk pod ekran. */
@media (max-width: 719px), (max-height: 600px) {
  .rf2-wrap { padding: 6px 10px 14px; gap: 2px; }

  /* Godlo wchodzi w wiersz z tytulem — samo zajmowalo 38 px wysokosci
     tylko dlatego, ze stalo nad nim. */
  .rf2-head { flex-direction: row; gap: 8px; padding: 0; }
  .rf2-emblem { width: 26px; height: 26px; margin-bottom: 0; }
  .rf2-head h1 { font-size: 18px; letter-spacing: 2.5px; padding: 0 12px; }
  .rf2-head h1::before, .rf2-head h1::after { width: 22px; }
  .rf2-head-txt { align-items: flex-start; }
  .rf2-head p { font-size: 10.5px; line-height: 1.25; margin: 0; text-align: left; }

  .rf2-stam { gap: 3px; padding: 4px 0 0; }
  .rf2-stam-gauge { grid-template-columns: 22px minmax(120px, 1fr) auto; column-gap: 8px; }
  .rf2-stam-pot { width: 22px; height: 22px; }
  .rf2-stam-val { font-size: 16px; }
  /* Doladowania w JEDNYM wierszu: cztery pigulki lamaly sie na dwa
     i zjadaly 58 px. Wiersz przewija sie w bok, gdy jest ich wiecej. */
  .rf2-stam-buys {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    max-width: 100%; gap: 5px; padding-bottom: 1px;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .rf2-stam-buys::-webkit-scrollbar { display: none; }
  .rf2-buy { flex: 0 0 auto; padding: 3px 8px; gap: 4px; }
  .rf2-buy b { font-size: 12px; }
  .rf2-buy i { display: none; }     /* „10/10" powtarza sie na kazdej pigulce */
  .rf2-stam-reset { font-size: 10px; }
  .rf2-fact em { position: static; }

  /* Rozdarcie z lewej, tablica z prawej: rozdarcie jest pionowe, wiec
     w takim ukladzie nic nie traci, a trzy misje mieszcza sie na ekranie.
     Szerokosc rozdarcia idzie z WYSOKOSCI okna — na niskim ekranie karta
     jest niska, a rozdarcie ma proporcje 1:2, wiec musi sie zwezic razem
     z nia, inaczej rozpychalo by wiersz. */
  .rf2-cards { grid-template-columns: 1fr; gap: 8px; padding-top: 2px; }
  /* Szerokosc rozdarcia jest ZWIAZANA z jego wysokoscia: `aspect-ratio: 1/2`
     znaczy, ze kazde 10 px szerokosci to 20 px wysokosci wiersza. Przy 112 px
     (tak bylo) rozdarcie mialo 224 px i to ONO ustawialo wysokosc karty —
     tablica z trescia ma okolo 150. Karta rosla wiec o 70 px na kazda misje
     tylko po to, zeby zmiescic obrazek, i to tym bardziej, im WYZSZY byl
     telefon. Gorne 72 px trzyma rozdarcie tuz pod wysokoscia tresci, wiec
     o wysokosci karty decyduje to, co gracz czyta. */
  .rf2-card {
    display: grid; grid-template-columns: clamp(56px, 9vh, 72px) minmax(0, 1fr);
    column-gap: 8px; align-items: center; text-align: left;
  }
  .rf3-tear { width: 100%; }
  .rf3-ground { display: none; }
  .rf2-tier { top: -5px; font-size: 7.5px; padding: 2px 7px; letter-spacing: 1px; }
  /* Tablica misji sklada sie w wiersze, zamiast szesciu pieter jedno pod
     drugim. Nazwa i tor („Guard the Caravan" / „GOLD RUN") to jedno
     zdanie i staly w dwoch wierszach tylko dlatego, ze to dwa elementy;
     reszta bierze caly wiersz, tak jak brala. */
  .rf2-body {
    width: 100%; margin-top: 0;
    display: flex; flex-flow: row wrap; align-items: baseline;
    column-gap: 8px; row-gap: 3px;
    padding: 11px 11px 9px; border-radius: 8px 18px 8px 8px;
  }
  .rf2-name, .rf3-sub { flex: 0 1 auto; }
  .rf2-facts, .rf2-rw, .rf2-rate, .rf2-go, .rf2-need { flex: 0 0 100%; }
  .rf2-body::before { left: 8%; right: 8%; top: 5px; }
  .rf2-body::after { top: 2px; width: 6px; height: 6px; margin-left: -3px; }
  .rf2-name { font-size: 15px; min-height: 0; justify-content: flex-start; text-align: left; }
  .rf2-facts, .rf2-rw, .rf2-rate { justify-content: flex-start; }
  .rf2-rate > i { text-align: left; }

  /* Czas, energia i nagrody staly w trzech osobnych wierszach, kazdy
     z wlasnym odstepem. To jedna informacja — „co to kosztuje i co daje"
     — wiec jedzie jednym wierszem, ktory sie zawija dopiero, gdy musi. */
  .rf3-sub { font-size: 9px; letter-spacing: 1.2px; }
  /* Liczba i jej podpis obok siebie, nie jedno nad drugim: „3m DURATION"
     czyta sie tak samo, a zajmuje jeden wiersz zamiast dwoch. */
  .rf2-facts { gap: 12px; padding: 0; }
  .rf2-fact { flex-direction: row; align-items: baseline; gap: 4px; }
  .rf2-fact b { font-size: 16px; }
  .rf2-fact i { font-size: 8px; letter-spacing: 1px; }
  .rf2-fact + .rf2-fact::before { left: -7px; top: 10%; height: 80%; }
  .rf2-rw { gap: 2px 10px; }
  .rf2-chip b { font-size: 13px; }
  .rf2-chip img { width: 14px; height: 14px; }

  /* „PER STAMINA" bylo wlasnym wierszem z gorna kreska i wlasnym
     naglowkiem — 49 px na dwie liczby. Naglowek znika (pigulki i tak
     mowia, czego dotycza), reszta doklada sie do wiersza nagrod. */
  .rf2-rate { padding-top: 3px; gap: 3px 8px; }
  .rf2-rate > i { display: none; }
  .rf2-rate span { padding: 1px 7px 1px 3px; }
  .rf2-rate span b { font-size: 11.5px; }

  .rf2-go { margin-top: 2px; padding: 8px 12px; font-size: 12px; }
  .rf2-need { margin-top: 2px; padding: 5px 10px; font-size: 10.5px; }

  /* Stopka: odliczanie do nowych misji i plakietki premii. Przy graczu
     z frakcja Zaslony i premium plakietek jest piec („-15% czasu",
     „+30% zlota", „+25% XP", „Premium") i lamaly sie na TRZY wiersze —
     70 px zamiast 23. To bylo drugie zrodlo przewijania, obok kart, i
     dotyczylo dokladnie tych graczy, ktorzy graja najwiecej. Teraz
     jeden wiersz, przewijany w bok, tak samo jak doladowania energii. */
  .rf2-foot {
    flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden;
    justify-content: flex-start; gap: 12px; padding: 6px 4px 0;
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
  }
  .rf2-foot::-webkit-scrollbar { display: none; }
  .rf2-refresh { flex: 0 0 auto; white-space: nowrap; }
  .rf2-pills { flex: 0 0 auto; flex-wrap: nowrap; }
  .rf2-pill { white-space: nowrap; }

  /* MISJA W TOKU. Wielkie rozdarcie mialo tu 200 px szerokosci, czyli
     — przy proporcji 1:2 — CZTERYSTA wysokosci, na ekranie, w ktorym
     do dyspozycji jest 544. Sam obrazek zajmowal wiec wiecej niz cala
     reszta ekranu razem i zegar z przyciskami „przerwij / pomin"
     lezaly 185 px pod krawedzia. Szerokosc idzie teraz z wysokosci
     okna, tak samo jak przy kartach: rozdarcie zostaje najwiekszym
     elementem ekranu, ale przestaje byc jedynym. */
  .rf3-tear.big { width: clamp(80px, 12.5vh, 200px); }
  /* Poswiata za rozdarciem jest ozdoba i lezy w warstwie bezwzglednej,
     wiec nie doklada wysokosci — ale przy stalych 400 px potrafila byc
     czterokrotnie wieksza od samego rozdarcia. Idzie za nim. */
  .rf2-tunnel { width: min(90vw, 52vh); height: min(90vw, 52vh); top: 0; }
  .rf2-time b { font-size: 34px; }
  .rf2-stage .rf3-ground { display: block; width: min(70vw, 280px); height: clamp(28px, 6vh, 50px); margin-top: -26px; }
  .rf2-btn { min-width: 0; flex: 1 1 0; padding: 9px 8px; white-space: nowrap; font-size: 11.5px; }
}

/* ── NISKIE EKRANY ────────────────────────────────────────────────
   Szerokosc nie jest tu problemem — problemem jest WYSOKOSC. Na 390x844
   tablica miesci sie z zapasem 33 px, na 344x736 brakuje 54. Te same
   karty, ten sam uklad; rozni je 108 px ekranu.

   Dlatego progi ida po `max-height`, nie po szerokosci. To jest to samo,
   o co prosil Mark: „musi skalowac wszystko do okienka" — im nizsze okno,
   tym mniej powietrza, zamiast staleg­o ukladu i przewijania na koncu.

   Zdanie wstepne („Send your hero through the rift…") schodzi jako
   pierwsze i to jest swiadomy wybor, a nie oszczednosc na chybil trafil:
   tlumaczy ekran, ktory PO ZOBACZENIU tlumaczy sie sam — trzy misje,
   przy kazdej czas, koszt, nagroda i przycisk. Na niskim telefonie
   kosztowalo 29 px, czyli dokladnie tyle, ile dzielilo trzeci przycisk
   od krawedzi. Gracz, ktory nie moze przyjac misji, nie ma z tego zdania
   zadnego pozytku. */
@media (max-width: 719px) and (max-height: 860px), (max-height: 600px) {
  .rf2-head p { display: none; }
  .rf2-cards { gap: 7px; }

  /* Podpisy przy nagrodach („Gold", „XP", „Loot", „Veil Points") schodza,
     zostaja ikona i liczba. Powod jest policzalny: gracz z frakcja
     Zaslony ma na karcie CZTERY zetony, a w tablicy szerokiej na 250 px
     mieszcza sie trzy — czwarty spadal do drugiego wiersza i kazda karta
     rosla o 17 px, czyli trzy karty o 51. Ikony w tej grze sa te same
     wszedzie (moneta, gwiazda, worek, diament, znak Zaslony), wiec sama
     ikona z liczba czyta sie bez podpisu. Na wysokim telefonie podpisy
     zostaja — tam miejsce jest. */
  .rf2-chip i { display: none; }
  .rf2-chip { gap: 4px; }
}

@media (max-width: 719px) and (max-height: 770px), (max-height: 600px) {
  /* Najnizsze telefony (344x736 i podobne). Nic tu nie znika — wszystko
     robi sie ciasniejsze o wlos, lacznie ze stopka, zeby odliczanie do
     nowych misji tez zostalo NAD krawedzia, a nie tylko przyciski. */
  .rf2-stam { gap: 2px; padding: 2px 0 0; }
  .rf2-stam-buys { gap: 4px; }
  .rf2-buy { padding: 2px 7px; }
  .rf2-stam-reset { font-size: 9.5px; }
  .rf2-body { padding: 8px 10px 6px; }
  .rf2-go { padding: 6px 12px; font-size: 11.5px; }
  .rf2-cards { gap: 5px; }
  .rf2-foot { padding-top: 3px; gap: 3px 14px; }
  .rf2-refresh { font-size: 10px; }
}

/* ── TELEFON W POZIOMIE ───────────────────────────────────────────
   Obrocony telefon to 844x390: SZEROKO i BARDZO NISKO. Do v23.0.1601
   nie dostawal ani jednej reguly telefonu, bo wszystkie wisialy na
   `max-width: 719px`, a on ma 844 — wchodzil wiec w uklad komputerowy
   (trzy pionowe rozdarcia po 240 px szerokosci, czyli 480 px wysokosci)
   na ekranie, w ktorym po odjeciu naglowka i nawigacji zostaje 288 px.
   Pomiar: tresc 1038 px na 288 px miejsca, przycisk 700 px pod krawedzia.

   Dlatego progi wyzej pytaja takze o `max-height: 620px` — nizsze okno
   dostaje zwiezly uklad telefonu niezaleznie od szerokosci. Tu zostaje
   jedna rzecz do odkrecenia: w poziomie NIE chcemy jednej kolumny.
   Miejsca w bok jest az nadto, a w dol nie ma go wcale, wiec trzy misje
   stoja obok siebie — kazda z tym samym zwiezlym wnetrzem, co w pionie. */
@media (min-width: 720px) and (max-height: 600px) {
  .rf2-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
  /* Pasek energii i doladowania w jednym wierszu — w pionie stoja
     jedno pod drugim, bo tam brakuje szerokosci, a nie wysokosci. */
  .rf2-stam { flex-direction: row; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 14px; }
  .rf2-head { padding: 0; }
  .rf2-wrap { padding-top: 4px; }

  /* MISJA W TOKU w poziomie. Scena jest slupkiem: rozdarcie, pod nim
     zegar, pod nim tablica — i w 288 px wysokosci nie miesci sie nawet
     po zwezeniu rozdarcia (451 px, przyciski 144 px pod krawedzia).
     W poziomie ustawiamy ja w RZAD: rozdarcie, zegar, tablica obok
     siebie. Ta sama tresc, ten sam porzadek czytania — tyle ze w te
     strone, w ktora ekran ma miejsce. */
  .rf2-stage { flex-direction: row; justify-content: center; align-items: center; gap: 14px; padding-top: 0; }
  .rf2-stage .rf3-ground { display: none; }
  .rf3-tear.big { width: clamp(60px, 17vh, 120px); }
  .rf2-time { margin-top: 0; }
  .rf2-time b { font-size: clamp(24px, 9vh, 44px); }
  .rf2-plaque { margin-top: 0; width: min(58vw, 460px); padding: 12px 14px 12px; }
}

/* ── Waskie telefony (344-379 px) ─────────────────────────────────
   Na 344x736 wiersz nagrod „800 Gold · 2400 XP · 3% Diamond" lamal sie
   na dwa i sama ta jedna karta rosla o 17 px — akurat tyle, ile
   brakowalo, zeby trzeci przycisk zszedl pod krawedz. Scinamy odstepy
   w wierszu nagrod, a nie same nagrody. */
@media (max-width: 379px) {
  .rf2-rw { gap: 2px 7px; }
  .rf2-chip { gap: 4px; }
  .rf2-chip b { font-size: 12.5px; }
  .rf2-chip i { font-size: 9.5px; }
  .rf2-chip img { width: 13px; height: 13px; }
  .rf2-rate { gap: 3px 6px; }
  .rf2-rate span { padding: 1px 6px 1px 3px; }
  .rf2-body { padding: 10px 10px 8px; row-gap: 2px; }
  .rf2-head p { font-size: 10px; }
}

html.gv-land-mobile #panelTavern.rift2 .rf2-wrap { padding: 6px 10px 14px; gap: 4px; }

@media (prefers-reduced-motion: reduce) {
  .rf3-glow, .rf3-scene, .rf3-edge, .rf3-bolt, .rf3-sheen, .rf3-in, .rf3-ground, .rf2-motes i, .rf2-tunnel img, .rf2-go.pulse, .rf2-active.ready .rf3-tear.big .rf3-svg { animation: none; }
  .rf2-motes, .rf3-bolt, .rf3-sheen, .rf3-in { display: none; }
  .rf3-svg, .rf2-go, .rf2-buy, .rf2-stam-track > i { transition: none; }
}