/* Shardkeep — interfejs. Jeden styl dla wszystkich okien: ciemny kamień (granat/grafit) z niebieską poświatą kryształu
   i cienką, świecącą błękitną krawędzią — jak logo i menu główne (0.8.1). Przyciski to kamienne płyty.
   Kolory informacyjne zostają: esencja błękitna, złoto (monety) żółte, życie zielone, obrażenia czerwone, kategorie kart (--cat). */
:root {
  /* ramy i akcenty */
  --edge: rgba(110, 190, 255, .55); --edge-hi: #9fd0ff; --edge-dim: rgba(120, 165, 215, .32); --steel: #8fa0b8;
  --accent: #8fc8ff; --title: #eef4ff; --title-glow: 0 2px 0 #1a2030, 0 0 10px rgba(110, 190, 255, .4);
  /* kamienne panele: ciemny granat z poświatą u góry, krawędź świeci lekko na niebiesko */
  --panel: rgba(12, 15, 22, .94);
  --panel-bg: radial-gradient(ellipse 90% 60% at 50% 0%, rgba(70, 150, 255, .13), transparent 70%), linear-gradient(rgba(17, 21, 30, .96), rgba(10, 13, 20, .96));
  --panel-glow: 0 0 0 1px #05070b, 0 10px 34px #000b, 0 0 18px rgba(80, 160, 255, .18), inset 0 1px 0 rgba(170, 215, 255, .12);
  --well: rgba(4, 7, 12, .55);   /* wnęka w panelu (grupy, wiersze, pola) */
  /* kamienna płyta przycisku */
  --plate: linear-gradient(#636a78, #474d59 48%, #3a3f4a 52%, #2c3139);
  --plate-shadow: 0 0 0 1px #12151c, 0 3px 10px #0009, inset 0 1px 0 rgba(255, 255, 255, .22), inset 0 -2px 0 rgba(0, 0, 0, .32), inset 0 0 16px rgba(90, 170, 255, .1);
  --plate-hover: 0 0 0 1px #12151c, 0 4px 14px #000a, 0 0 16px rgba(80, 170, 255, .42), inset 0 1px 0 rgba(255, 255, 255, .28), inset 0 0 20px rgba(90, 170, 255, .24);
  /* złoto zostaje tylko jako kolor informacyjny (elity, monety) */
  --gold: #c9a24a;
  --ink: #e6ecf5; --dim: #9eaabd; --hp: #2fae3a; --enemy: #c8362c; --mana: #2f7fe0; --stamina: #e0b02f; }
* { box-sizing: border-box; }
/* pasek przewijania w stylu ramek: ciemny rowek, stalowo-błękitny uchwyt (Chrome/Edge przez ::-webkit-scrollbar, Firefox przez scrollbar-color) */
* { scrollbar-width: thin; scrollbar-color: #4a5a72 #07090d; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #07090dcc; border-left: 1px solid #000; border-radius: 0 6px 6px 0; }
::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #36404f, #56667e 45%, #36404f); border: 2px solid #07090d; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: linear-gradient(90deg, #44536a, #7f9cc0 45%, #44536a); }
::-webkit-scrollbar-button { display: none; height: 0; width: 0; }
::-webkit-scrollbar-corner { background: transparent; }
html, body { margin: 0; height: 100%; overflow: hidden; background: #0c0d10; color: var(--ink); font: 14px/1.35 "Segoe UI", system-ui, sans-serif; user-select: none; }
canvas#game { position: fixed; inset: 0; width: 100%; height: 100%; display: block; }
.hidden { display: none !important; }
/* przycisk = kamienna płyta jak w menu głównym (bez run); najechanie zapala błękitną poświatę */
button { font: inherit; color: #eef4ff; text-shadow: 0 1px 0 #1a2030; background: var(--plate); border: 1px solid var(--steel); border-radius: 6px; padding: 9px 16px; cursor: pointer;
  box-shadow: var(--plate-shadow); transition: box-shadow .14s, border-color .14s, filter .14s, transform .14s; }
button:hover { filter: brightness(1.1); border-color: #b8d8ff; box-shadow: var(--plate-hover); }
button:active { transform: translateY(1px); }
button:focus-visible { outline: 2px solid var(--edge-hi); outline-offset: 2px; }
/* cichy przycisk: ciemniejszy kamień tej samej rodziny (wróć, anuluj) */
button.quiet { color: #d6e0ee; background: linear-gradient(#323845, #232832 50%, #1b1f27); border-color: #5d6b80; }
button.quiet:hover { border-color: #9fc4ec; }
input, select { font: inherit; color: var(--ink); background: #0b0e14; border: 1px solid #4a5a72; border-radius: 5px; padding: 8px 10px; }
input:focus-visible, select:focus-visible { outline: none; border-color: var(--edge-hi); box-shadow: 0 0 10px rgba(80, 160, 255, .35); }
input[type=range], input[type=checkbox] { accent-color: #5aa8ff; }
select option { background: #10141c; }

/* --- HUD */
#hud { position: fixed; inset: 0; pointer-events: none; }
#hud button, #bar .slot { pointer-events: auto; }
.unit { position: absolute; top: 18px; display: flex; gap: 8px; align-items: flex-start; width: 290px; }
#me { left: 18px; }
#target { left: 322px; width: 268px; }
@media (max-width: 1500px) { #target { left: 18px; top: 112px; } }
.portrait { width: 54px; height: 54px; border-radius: 50%; border: 2px solid #8fb8e0; background: var(--face, none) center / cover no-repeat, radial-gradient(circle at 35% 30%, var(--tint, #5a6a80), #10141c 75%); display: grid; place-items: end center; box-shadow: 0 2px 8px #000a, 0 0 10px rgba(80, 160, 255, .35); flex: none; }
/* portret z grafiki klasy (medalion z własną ramką): bez kółka i obwódki, trochę większy */
.portrait.medal { width: 66px; height: 66px; margin: -6px -4px 0 -6px; border: 0; border-radius: 0; background: var(--face) center / contain no-repeat; box-shadow: none; filter: drop-shadow(0 3px 6px #000c); }
.portrait.medal b { transform: translateY(2px); }
/* ramki drużyny: pod własną ramką, mniejsze; kolor imienia = kolor gracza (znaczniki, minimapa) */
#party { position: absolute; left: 18px; top: 104px; display: grid; gap: 6px; width: 210px; pointer-events: auto; }
#party.hidden { display: none; }
.mate { display: flex; gap: 6px; align-items: center; padding: 3px 8px 3px 3px; border-radius: 22px 6px 6px 22px; background: linear-gradient(90deg, #0a0d14cc, #0a0d1466); border: 1px solid var(--edge-dim); }
.mate:hover { border-color: var(--pc); box-shadow: 0 0 10px color-mix(in srgb, var(--pc) 50%, transparent); }
.mate .face { position: relative; width: 38px; height: 38px; flex: none; border-radius: 50%; display: grid; place-items: end center;
  background: radial-gradient(circle at 35% 30%, var(--tint, #5a6a80), #10141c 75%); border: 2px solid #8fb8e0; }
.mate .face.medal { border: 0; border-radius: 0; background: var(--face) center / contain no-repeat; filter: drop-shadow(0 2px 4px #000c); }
.mate .face b { font-size: 10px; background: #0c1018; border: 1px solid var(--edge-hi); border-radius: 8px; padding: 0 4px; transform: translateY(4px); }
.mate .name { font-size: 12px; color: var(--pc); }
.mate .bar { height: 9px; margin-top: 2px; }
.mate.low .bar i { animation: lowhp .7s infinite alternate; }
.mate.dead { opacity: .65; }
.mate.dead .face { filter: grayscale(1) brightness(.6) drop-shadow(0 2px 4px #000c); }
.mate.dead .name { color: #ff9a80; }
.portrait b { font-size: 12px; background: #0c1018; border: 1px solid var(--edge-hi); border-radius: 9px; padding: 0 6px; transform: translateY(6px); }
.bars { flex: 1; min-width: 0; }
.name { font-weight: 600; text-shadow: 0 1px 2px #000, 0 0 6px #000; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.name em { font-style: normal; font-size: 11px; color: #ffcf5a; margin-left: 6px; text-transform: uppercase; letter-spacing: .06em; }
.bar { position: relative; height: 17px; margin-top: 3px; background: #07090dd9; border: 1px solid #000; outline: 1px solid var(--edge-dim); border-radius: 3px; overflow: hidden; }
.bar i { position: absolute; inset: 0 auto 0 0; width: 100%; background: linear-gradient(#ffffff40, transparent 55%), var(--c); transition: width .12s linear; }
/* „duch” paska: po stracie życia jasny ślad zostaje na chwilę i dopiero potem się zwija — widać, ile ubyło */
.bar s, .plate .hpbar s { position: absolute; inset: 0 auto 0 0; width: 100%; background: #fff3c4; opacity: .85; transition: width .7s cubic-bezier(.3, .7, .3, 1) .16s; }
.bar.jolt { animation: jolt .28s; }
@keyframes jolt { 0% { transform: translate(0, 0) scale(1.04); filter: brightness(2.2); } 30% { transform: translate(-3px, 1px); } 60% { transform: translate(3px, -1px); } 100% { transform: none; filter: none; } }
.bar.mend { animation: mend .5s; }
@keyframes mend { 0% { box-shadow: 0 0 0 0 #6aff7a; filter: brightness(1.7); } 100% { box-shadow: 0 0 14px 6px #6aff7a00; filter: none; } }
.bar.hp.low i { animation: lowhp .7s infinite alternate; }
@keyframes lowhp { from { filter: brightness(.8); } to { filter: brightness(1.6) saturate(1.4); } }
/* czerwona winieta: błysk przy trafieniu, stałe tętno przy niskim życiu */
#vignette { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, transparent 48%, #c8100088 100%); transition: opacity .45s; }
#vignette.low { animation: vign 1s infinite alternate; }
@keyframes vign { from { opacity: .25; } to { opacity: .6; } }
.bar u { position: absolute; inset: 0 auto 0 0; width: 0; background: #b89cff99; }
.bar span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; text-shadow: 0 1px 2px #000; }
.bar.hp { --c: var(--hp); } .bar.hp.enemy { --c: var(--enemy); } .bar.stamina { --c: var(--stamina); height: 7px; }
/* IKONKI WZMOCNIEŃ (styl WoW, hud.buffs): kafelek z ikoną umiejętności, ciemne kółko odliczania (--k = upłynęło 0..1),
   sekundy w rogu (< 10 s), licznik nałożeń, miganie w ostatnich 3 s; ramka zielona (dobre) / czerwona (złe);
   aura (obszar odnawiający buff) bez odliczania; podpowiedź po najechaniu */
#me-buffs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
#me-buffs .buff { --ring: #4fd26a; position: relative; width: 32px; height: 32px; box-sizing: border-box; border: 1px solid #000; border-radius: 4px; outline: 1px solid var(--ring); box-shadow: 0 0 5px color-mix(in srgb, var(--ring) 45%, transparent), 0 2px 4px #000a; background: radial-gradient(circle at 40% 30%, color-mix(in srgb, var(--tint, #333) 60%, #000), #14110e 85%); display: grid; place-items: center; pointer-events: auto; }
#me-buffs .buff.bad { --ring: #e04a3a; }
#me-buffs .buff.aura { --ring: #8fe3a0; }
#me-buffs .buff .glyph { font-size: 18px; line-height: 1; filter: drop-shadow(0 1px 2px #000); }
#me-buffs .buff .sw { position: absolute; inset: 0; border-radius: 3px; background: conic-gradient(#000000b0 calc(var(--k, 0) * 1turn), transparent 0); pointer-events: none; }
#me-buffs .buff b { position: absolute; right: 1px; bottom: -1px; font-size: 11px; font-weight: 800; color: #fff3c4; text-shadow: 0 0 2px #000, 0 1px 2px #000, 0 0 3px #000; pointer-events: none; }
#me-buffs .buff small { position: absolute; left: 2px; top: 0; font-size: 10px; font-weight: 800; color: #fff; text-shadow: 0 0 2px #000, 0 1px 2px #000; pointer-events: none; }
#me-buffs .buff.ending > :not(em) { animation: buff-end .45s ease-in-out infinite alternate; }
@keyframes buff-end { from { opacity: 1; } to { opacity: .3; } }
#me-buffs .buff em { display: none; position: absolute; left: 0; top: calc(100% + 6px); z-index: 20; width: max-content; max-width: 280px; padding: 6px 8px; font-style: normal; font-size: 11.5px; line-height: 1.35; color: #d8d2c0; background: #0d0b09ee; border: 1px solid #7a6230; border-radius: 4px; box-shadow: 0 4px 12px #000c; white-space: normal; }
#me-buffs .buff em strong { display: block; font-size: 13px; color: #ffe9b0; margin-bottom: 2px; }
#me-buffs .buff em span { display: block; color: #9fe0a8; }
#me-buffs .buff.bad em span { color: #ff9b8a; }
#me-buffs .buff:hover em { display: block; }
#target-note { font-size: 12px; color: #ffb45a; margin-top: 3px; text-shadow: 0 1px 2px #000; font-weight: 600; }
#crosshair { position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px; border-radius: 50%; background: #fffc; box-shadow: 0 0 0 1px #0008; }
#zone-banner { position: absolute; left: 0; right: 0; top: 17%; text-align: center; font: 600 44px Georgia, serif; letter-spacing: .12em; color: var(--title); text-shadow: 0 2px 10px #000; opacity: 0; transition: opacity 1.2s; }
#zone-banner.show { opacity: 1; }
/* wejście bossa: pas rozsuwa się od środka, imię wjeżdża z rozmycia i zostaje z czerwoną poświatą */
/* VAELOR: niebo ciemnieje przy czerwonych piorunach; baner daru w czerni i czerwieni z okiem (tylko dla niego) */
body.vaelor-storm::after { content: ''; position: fixed; inset: 0; z-index: 5; pointer-events: none; background: radial-gradient(ellipse at 50% 0%, rgba(120, 0, 0, .28), rgba(10, 0, 0, .38) 70%); animation: vaelor-dark .5s ease-out both; }
@keyframes vaelor-dark { from { opacity: 0; } to { opacity: 1; } }
/* zwarta plakietka (Topek 16.10: pas na całą szerokość zabierał za dużo miejsca) */
#vaelor-banner { position: fixed; z-index: 21; left: 0; right: 0; margin: 0 auto; width: max-content; max-width: calc(100vw - 32px); top: 17%; display: flex; justify-content: center; align-items: center; gap: 8px;
  padding: 5px 16px 5px 12px; pointer-events: none; opacity: 0; border-radius: 18px; background: rgba(20, 2, 4, .78); border: 1px solid #ff3a3a;
  box-shadow: 0 0 14px rgba(255, 30, 30, .35), 0 3px 10px #000a; }
#vaelor-banner i { font-style: normal; font-size: 18px; filter: drop-shadow(0 0 6px #ff2020) saturate(2) hue-rotate(-30deg); }
#vaelor-banner b { font: 700 16px Georgia, serif; letter-spacing: .05em; color: #ffd0c8; text-shadow: 0 0 8px #ff2020, 0 1px 3px #000; }
#vaelor-banner.show { animation: vaelor-banner 4.2s ease-out both; }
@keyframes vaelor-banner { 0% { opacity: 0; transform: scaleY(.3); } 8% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; } }
#boss-intro { position: fixed; z-index: 20; left: 0; right: 0; top: 15%; display: grid; justify-items: center; gap: 2px; padding: 18px 0 16px; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, rgba(30, 4, 2, .82) 18%, rgba(30, 4, 2, .9) 50%, rgba(30, 4, 2, .82) 82%, transparent);
  border-top: 2px solid rgba(220, 70, 40, .0); border-bottom: 2px solid rgba(220, 70, 40, .0); clip-path: inset(0 50% 0 50%); }
#boss-intro::before, #boss-intro::after { content: ''; position: absolute; left: 12%; right: 12%; height: 2px; background: linear-gradient(90deg, transparent, #ff6a3a, #ffd27a, #ff6a3a, transparent); }
#boss-intro::before { top: 0; } #boss-intro::after { bottom: 0; }
#boss-intro small { font: 700 14px "Segoe UI", sans-serif; letter-spacing: .5em; text-transform: uppercase; color: #ff8a5a; text-shadow: 0 0 8px rgba(255, 60, 20, .8); }
#boss-intro b { font: 700 64px Georgia, serif; letter-spacing: .08em; color: #ffe2b0; line-height: 1.05;
  text-shadow: 0 0 2px #000, 0 3px 0 #5a0d04, 0 0 18px rgba(255, 70, 30, .85), 0 0 46px rgba(255, 40, 10, .6); }
#boss-intro em { font: italic 600 17px Georgia, serif; color: #e8c890; letter-spacing: .12em; }
#boss-intro.show { animation: boss-band 4.6s ease forwards; }
#boss-intro.show b { animation: boss-name 4.6s cubic-bezier(.2, .9, .3, 1) forwards; }
@keyframes boss-band { 0% { opacity: 0; clip-path: inset(0 50% 0 50%); } 8% { opacity: 1; } 18% { clip-path: inset(0 0 0 0); } 84% { opacity: 1; clip-path: inset(0 0 0 0); } 100% { opacity: 0; clip-path: inset(0 0 0 0); } }
@keyframes boss-name { 0% { transform: scale(1.6); filter: blur(10px); opacity: 0; } 16% { transform: scale(1.6); filter: blur(10px); opacity: 0; } 30% { transform: scale(.97); filter: none; opacity: 1; } 36% { transform: none; } 100% { transform: scale(1.04); } }
#alert { position: absolute; left: 0; right: 0; top: 23%; text-align: center; font-weight: 600; font-size: 17px; color: #ff6a5a; text-shadow: 0 1px 3px #000; opacity: 0; transition: opacity .3s; }
#alert.show { opacity: 1; }
#alert.say { color: #ffcf5a; font-size: 20px; }
#feed { position: absolute; right: 18px; bottom: 150px; width: 300px; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
#feed div { background: rgba(10, 13, 20, .82); border: 1px solid rgba(120, 165, 215, .22); border-left: 2px solid var(--edge); border-radius: 4px; padding: 3px 9px; text-shadow: 0 1px 2px #000; animation: feed 5s forwards; }
@keyframes feed { 0%, 80% { opacity: 1; } 100% { opacity: 0; } }
#bottom { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; }
#bars { display: flex; gap: 14px; align-items: flex-end; }
#bar, #towers { display: flex; gap: 5px; padding: 6px; background: rgba(18, 16, 14, .9); border: 1px solid #7a6230; border-radius: 6px; }
#build { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
#essence { font: 800 22px Georgia, serif; color: #bff4ff; text-shadow: 0 0 2px #002a40, 0 2px 0 #002a40, 0 -1px 0 #002a40, 0 0 10px #00b4ff; padding: 1px 10px; background: #06141ccc; border: 1px solid #2a7a9a; border-radius: 14px; transform-origin: right center; }
#essence.bump { animation: bump .6s; }
#gold { font: 800 17px Georgia, serif; color: #ffe08a; text-shadow: 0 0 2px #3a2400, 0 2px 0 #3a2400, 0 0 8px #ffb92a; padding: 0 9px; background: #1c1406cc; border: 1px solid #8a6a2a; border-radius: 12px; }
#gold.bump { animation: bump .6s; }
#cur-row { display: flex; gap: 6px; align-items: center; }
#tower-count { font: 800 15px Georgia, serif; color: #e6edf6; padding: 1px 9px; background: #10141ccc; border: 1px solid #5a6a80; border-radius: 12px; text-shadow: 0 1px 2px #000; }
#tower-count.full { color: #ffb0a0; border-color: #c0503a; background: #2a0e0acc; }
/* kowal: dwa przedmioty (broń, pancerz) — ikona, nazwa, poziomy, opis, zmiana liczb, przycisk z ceną w złocie */
#win-smith { left: 50%; top: 120px; transform: translateX(-50%); width: min(560px, calc(100vw - 32px)); padding: 16px 22px 10px; }
#win-smith h2 { margin: 0 0 4px; font: 700 24px Georgia, serif; color: var(--title); text-align: center; letter-spacing: .08em; }
#smith-gold { margin: 0 0 12px; text-align: center; color: #ffe08a; font-weight: 700; }
#smith-items { display: grid; gap: 10px; }
.smith-item { display: grid; grid-template-columns: 52px 1fr auto; gap: 4px 14px; align-items: center; padding: 10px 12px; background: var(--well); border: 1px solid var(--edge-dim); border-radius: 8px; }
.smith-item .art { grid-row: span 3; width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; font-size: 28px; background: radial-gradient(circle at 38% 30%, #56647a, #10141c); border: 2px solid #8fb8e0; box-shadow: 0 0 10px rgba(80, 160, 255, .3); }
.smith-item b { font: 700 17px Georgia, serif; color: var(--title); }
.smith-item small { color: #c8d2e0; font-size: 12.5px; line-height: 1.35; }
.smith-item .fx { color: var(--dim); font-size: 13px; } .smith-item .fx b { font: inherit; font-weight: 700; color: #8fe08a; }
.smith-item button { grid-row: span 3; min-width: 104px; padding: 9px 12px; font-weight: 700; color: #ffe08a; }
.smith-item button:disabled { opacity: .45; cursor: default; filter: none; }
@keyframes bump { 0% { transform: scale(1.6); color: #fff; background: #1a6a8a; box-shadow: 0 0 26px #4cf; } 100% { transform: scale(1); } }
#towers .slot { width: 46px; height: 46px; pointer-events: auto; cursor: pointer; }
#towers .slot .glyph { font-size: 23px; }
#towers .slot .cost { position: absolute; right: 2px; bottom: 0; font-size: 11px; font-weight: 700; color: #8fe8ff; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
#towers .slot.locked { display: none; }
#towers .slot.poor .cost { color: #ff8a7a; }
#towers .slot.on { outline: 2px solid #8fe8ff; box-shadow: 0 0 12px #4cf; }
/* --- obrona: fala, Kryształ, radar, wieżyczka na celowniku */
#td { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); width: 380px; text-align: center; }
#td-wave { font: 700 24px Georgia, serif; color: var(--title); text-shadow: 0 2px 6px #000, 0 0 12px rgba(110, 190, 255, .45); letter-spacing: .06em; }
/* tabliczka bossa pod paskiem Kryształu: ciemnoczerwona, z pulsującą obwódką */
#td-boss { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px auto 0; width: max-content; max-width: 420px; padding: 4px 18px;
  background: linear-gradient(90deg, rgba(60, 6, 2, .0), rgba(60, 6, 2, .92) 15%, rgba(60, 6, 2, .92) 85%, rgba(60, 6, 2, .0));
  border-top: 1px solid #ff7a4a; border-bottom: 1px solid #ff7a4a; animation: boss-plate 2.4s ease-in-out infinite; }
#td-boss.hidden { display: none; }
#td-boss b { font: 700 19px Georgia, serif; letter-spacing: .14em; text-transform: uppercase; color: #ffe2b0; text-shadow: 0 2px 0 #4a0a02, 0 0 10px rgba(255, 70, 30, .9); }
#td-boss i { font-style: normal; font-size: 15px; color: #ff8a5a; text-shadow: 0 0 6px #ff3a10; }
@keyframes boss-plate { 50% { box-shadow: 0 0 18px rgba(255, 60, 20, .45); border-color: #ffb07a; } }
#td-wave em { font-style: normal; font-size: 13px; color: #ff9a5a; margin-left: 8px; letter-spacing: .08em; text-transform: uppercase; }
.bar.crystal { --c: linear-gradient(90deg, #2ad4c8, #6ae8ff); height: 19px; margin-top: 4px; }
.bar.crystal.low { --c: linear-gradient(90deg, #d8402a, #ff8a4a); }
.bar.crystal.hit { animation: hitbar .3s; }
@keyframes hitbar { 0% { outline: 2px solid #ff5a4a; box-shadow: 0 0 14px #f43; } 100% { box-shadow: none; } }
#td-status { margin-top: 5px; font-weight: 600; text-shadow: 0 1px 3px #000, 0 0 5px #000; font-size: 15px; }
#td-status.go { animation: td-go .6s ease-out; } #td-status.go kbd { animation: td-go-key .6s ease-out; }
@keyframes td-go { 0% { filter: brightness(2.2) drop-shadow(0 0 12px #ffd24a); transform: scale(1.06); } 100% { filter: none; transform: none; } }
@keyframes td-go-key { 0% { background: #ffd24a; color: #142033; box-shadow: 0 0 14px #ffd24a; } 100% { } }
#td-status b { color: #ffd24a; } #td-status kbd { font: inherit; background: #000a; border: 1px solid var(--edge-dim); border-radius: 3px; padding: 0 6px; color: var(--title); }
#radar-box { position: absolute; right: 16px; top: 14px; width: 200px; text-align: right; }
#radar { width: 200px; height: 200px; border-radius: 50%; border: 2px solid var(--edge); background: #0a0f16cc; box-shadow: 0 2px 10px #000a, 0 0 14px rgba(80, 160, 255, .3); }
#radar-lanes { font-size: 12px; font-weight: 600; text-shadow: 0 1px 2px #000, 0 0 4px #000; color: #ff9a8a; margin-top: 4px; }
#tower-info { position: absolute; left: 50%; bottom: 150px; transform: translateX(-50%); background: var(--panel-bg); border: 1px solid var(--edge); border-radius: 8px; box-shadow: var(--panel-glow); padding: 9px 18px; line-height: 2.05; text-align: center; white-space: nowrap; }
#tower-info b { color: var(--title); } #tower-info kbd { display: inline-block; min-width: 30px; text-align: center; font: 800 11px/18px "Segoe UI", sans-serif; color: #142033; background: linear-gradient(#f2f7ff, #c4d6ec); border: 1px solid #fff; border-radius: 4px; box-shadow: 0 2px 0 #4a6a90; padding: 0 5px; margin: 0 5px 2px 0; vertical-align: middle; }
#tower-info .ess { color: #8fe8ff; font-weight: 700; } #tower-info .bad { color: #ff8a7a; } #tower-info small { color: var(--dim); display: block; }
.plate.tower { color: #cfe8ff; font-size: 11px; } .plate.tower .hpbar { width: 60px; height: 5px; } .plate.tower .hpbar i { background: #4cc8ff; }
.plate.portal { color: #ff8a7a; font-size: 13px; }
#essence-gain { position: absolute; right: 6px; bottom: 100%; font: 800 20px Georgia, serif; color: #eaffff; text-shadow: 0 0 2px #003a55, 0 2px 0 #003a55, 0 0 12px #00c8ff; pointer-events: none; animation: gain 1.3s ease-out forwards; white-space: nowrap; }
@keyframes gain { 0% { transform: translateY(14px) scale(.6); opacity: 0; } 20% { transform: translateY(0) scale(1.25); opacity: 1; } 100% { transform: translateY(-34px) scale(1); opacity: 0; } }
#build { position: relative; }
#micro button { position: relative; }
#points { position: absolute; right: -5px; top: -7px; min-width: 19px; height: 19px; border-radius: 10px; background: #ffd24a; color: #201400; font-size: 12px; line-height: 19px; font-weight: 800; animation: pulse 1.2s infinite; }
@keyframes pulse { 50% { box-shadow: 0 0 0 5px #ffd24a44; } }
.slot { position: relative; width: 52px; height: 52px; border: 1px solid #000; outline: 1px solid #7a6230; border-radius: 4px; background: radial-gradient(circle at 40% 30%, color-mix(in srgb, var(--tint, #333) 55%, #000), #14110e 80%); display: grid; place-items: center; }
.slot .glyph { font-size: 27px; line-height: 1; filter: drop-shadow(0 1px 2px #000); }
.slot.empty { background: #14110e; }
.slot .role { display: none; position: absolute; left: 1px; right: 1px; bottom: 3px; font-size: 7.4px; line-height: 1.05; text-align: center; color: #8d8470; text-transform: uppercase; letter-spacing: 0; overflow-wrap: normal; word-break: keep-all; pointer-events: none; }
.slot.empty .role { display: block; }
.slot .key { position: absolute; left: 3px; top: 1px; font-size: 11px; font-weight: 700; color: #ffe9b0; text-shadow: 0 1px 2px #000, 0 0 3px #000; z-index: 1; }
.slot .cd { position: absolute; inset: 0; border-radius: 3px; background: conic-gradient(#000b calc(var(--k, 0) * 1turn), transparent 0); display: grid; place-items: center; font-weight: 700; font-size: 16px; text-shadow: 0 1px 3px #000; pointer-events: none; }
.slot.off .glyph { filter: grayscale(1) brightness(.5); }
.slot.over { outline: 2px solid #fff; }
.slot.flash { animation: flash .25s; }
@keyframes flash { 0% { box-shadow: 0 0 0 3px #fff; } 100% { box-shadow: 0 0 0 0 #fff0; } }
/* umiejętność znów gotowa: slot rozbłyska jasno w kolorze ikony, a po ikonie przechodzi smuga światła */
.slot.ready { animation: ready .6s ease-out; }
.slot.ready::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  background: linear-gradient(115deg, transparent 30%, #ffffffcc 48%, transparent 66%) no-repeat; background-size: 250% 100%; animation: readysweep .5s ease-out forwards; }
@keyframes ready { 0% { transform: scale(1); box-shadow: 0 0 0 0 #fff0; filter: brightness(1); } 25% { transform: scale(1.14); box-shadow: 0 0 0 3px #fff8d0, 0 0 22px 6px var(--tint, #ffd24a); filter: brightness(1.9); } 100% { transform: scale(1); box-shadow: 0 0 0 0 #fff0; filter: brightness(1); } }
@keyframes readysweep { from { background-position: 120% 0; } to { background-position: -40% 0; opacity: 0; } }
/* ładunki (dar Rozpęd): liczba w lewym górnym rogu slotu */
.slot[data-charges]::before { content: attr(data-charges); position: absolute; right: 4px; top: 1px; z-index: 4; font: 700 13px "Segoe UI", sans-serif; color: #8ff0d8; text-shadow: 0 1px 2px #000, 0 0 3px #000; }
.slot[data-charges="0"]::before { color: #ff8a7a; }
#xp { position: relative; width: 100%; height: 9px; background: #0b0a09d9; border: 1px solid #000; outline: 1px solid #7a6230; border-radius: 3px; overflow: hidden; }
#xp i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(90deg, #5a2fa6, #9a5ff0 70%, #c9a0ff); transition: width .6s cubic-bezier(.2, .8, .3, 1); box-shadow: 0 0 6px rgba(160, 100, 255, .5); }
/* błysk na krawędzi nabijania: jasna kreska z poświatą na końcu paska, przy przyroście PD rozbłyska */
#xp i s { position: absolute; right: -2px; top: -2px; bottom: -2px; width: 4px; border-radius: 2px; background: #f4e8ff; box-shadow: 0 0 6px 2px rgba(210, 170, 255, .9); opacity: .55; }
#xp i.gain s { animation: xp-edge .9s ease-out; }
#xp i.gain { animation: xp-glow .9s ease-out; }
@keyframes xp-edge { 0% { opacity: 1; box-shadow: 0 0 14px 6px rgba(230, 200, 255, 1); width: 8px; } 100% { opacity: .55; } }
@keyframes xp-glow { 0% { filter: brightness(1.7); } 100% { filter: none; } }
#xp span { position: absolute; inset: 0; font-size: 9px; line-height: 8px; text-align: center; text-shadow: 0 1px 1px #000; }
#castbar { position: relative; width: 300px; height: 20px; background: #07090dd9; border: 1px solid var(--edge-dim); border-radius: 3px; overflow: hidden; margin-bottom: 4px; }
#castbar i { position: absolute; inset: 0 auto 0 0; background: linear-gradient(#ffd24a, #c9852a); }
#castbar span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 12px; text-shadow: 0 1px 2px #000; }
#micro { position: absolute; right: 16px; bottom: 14px; display: flex; gap: 5px; align-items: center; }
#micro button { width: 40px; height: 40px; padding: 0; font-size: 19px; }
#click { position: absolute; left: 50%; top: 60%; transform: translateX(-50%); background: var(--panel-bg); border: 1px solid var(--edge); border-radius: 8px; box-shadow: var(--panel-glow); padding: 8px 18px; }
#death { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; background: radial-gradient(#40000066, #000000b0); }
#gameover { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(#30080899, #000000d8); animation: overin 1.2s; z-index: 5; }
@keyframes overin { from { opacity: 0; } }
#gameover > div { text-align: center; padding: 30px 60px; border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge); border-image: linear-gradient(90deg, transparent, rgba(150, 215, 255, .85) 20%, rgba(150, 215, 255, .85) 80%, transparent) 1; background: linear-gradient(90deg, transparent, rgba(12, 15, 22, .9) 20%, rgba(12, 15, 22, .9) 80%, transparent); }
#gameover h2 { margin: 0; font: 700 54px Georgia, serif; letter-spacing: .1em; color: #ff6a4a; text-shadow: 0 3px 14px #000, 0 0 30px #f204; }
#over-wave { font: 600 26px Georgia, serif; color: var(--title); margin: 12px 0 14px; }
#over-stats { list-style: none; margin: 0 0 18px; padding: 0; display: flex; gap: 34px; justify-content: center; font-size: 16px; color: var(--dim); }
#over-stats b { display: block; font: 700 26px Georgia, serif; color: var(--ink); }
#over-next { font-size: 17px; color: #8fe8ff; margin: 0; } #over-next b { font-size: 22px; color: #fff; }
#death h2 { font: 600 46px Georgia, serif; color: #ff5a4a; margin: 0; text-shadow: 0 2px 10px #000; }
#version { position: absolute; left: 12px; bottom: 8px; font-size: 11px; color: #fff8; text-shadow: 0 1px 2px #000; }
body.probe #click { display: none; }

/* tabliczki nad głowami i liczby obrażeń */
#plates { position: absolute; inset: 0; overflow: hidden; }
.plate { position: absolute; transform: translate(-50%, -100%); text-align: center; white-space: nowrap; text-shadow: 0 1px 2px #000, 0 0 4px #000; font-size: 12px; font-weight: 600; }
.plate .hpbar { position: relative; width: 78px; height: 7px; margin: 2px auto 0; background: #000c; border: 1px solid #000; border-radius: 2px; overflow: hidden; }
.plate .hpbar i { position: relative; display: block; height: 100%; background: var(--enemy); transition: width .1s linear; }
.plate.struck .hpbar { animation: jolt .25s; }
.plate.enemy { color: #ffb0a0; } .plate.elite { color: #ffcf5a; font-size: 13px; } .plate.elite .hpbar { width: 110px; outline: 1px solid var(--gold); }
.plate.npc { color: #8fe08a; } .plate.npc small { display: block; font-weight: 400; color: #cfe8cc; }
.plate.player { color: #9fcfff; } .plate.player .hpbar i { background: var(--hp); }
.plate.target { filter: drop-shadow(0 0 4px #fff); }
.plate.cc::after { content: attr(data-cc); display: block; color: #9fd8ff; font-size: 11px; }
/* ładunki trucizny i żaru: wyraźny licznik pod paskiem życia */
.plate.stk::after { font-size: 15px; font-weight: 700; color: #e8ffd0; text-shadow: 0 0 4px #000, 0 1px 2px #000; letter-spacing: 0.5px; }
/* kolor licznika wg rodzaju ładunku: trucizna zielona, żar pomarańczowy, wychłodzenie niebieskie, porażenie żółte */
.plate.stk-poison::after { color: #c4f07a; } .plate.stk-burn::after { color: #ffb070; } .plate.stk-chill::after { color: #8fd0ff; } .plate.stk-shock::after { color: #ffe680; }

/* --- okna */
.window { position: fixed; background: var(--panel-bg); border: 1px solid var(--edge); border-radius: 10px; box-shadow: var(--panel-glow); padding: 10px; }
.window header { display: flex; align-items: center; justify-content: space-between; margin: -4px 0 8px; }
.window h3 { margin: 0; font: 600 16px Georgia, serif; color: var(--title); text-shadow: var(--title-glow); }
.window .close, #join .close { padding: 0 8px; background: none; border-color: transparent; box-shadow: none; color: #b8c8dc; font-size: 20px; line-height: 1.2; }
.window .close:hover, #join .close:hover { color: #fff; border-color: transparent; box-shadow: none; text-shadow: 0 0 8px rgba(110, 190, 255, .9); }
.window .note { margin: 0 0 8px; color: var(--dim); font-size: 12px; }
#win-book { left: 50%; top: 84px; transform: translateX(-50%); width: max-content; max-width: calc(100vw - 40px); max-height: calc(100vh - 110px); overflow-y: auto; padding: 14px 22px 8px; }
/* X zamykania zawsze w prawym górnym rogu okna (standard); okno przewijane (K) — X przyklejony do góry przy przewijaniu */
.window > .close { position: absolute; top: 8px; right: 8px; z-index: 2; }
#win-skills > .close { position: sticky; top: 0; float: right; margin: -8px -14px 0 0; background: rgba(12, 16, 24, .92); border-radius: 50%; width: 32px; height: 32px; padding: 0; }
/* nagłówek kart ma stałą poświatę (dawniej pulsował) */
/* karty rozwoju: trzy duże karty do wyboru po każdym poziomie. Kolor kategorii (--cat): umiejętność złota, ranga
   pomarańczowa, wieżyczka błękitna, mistrzostwo niebieskie, dar fioletowy; --tint to kolor samej umiejętności / wieżyczki */
#cards-box { text-align: center; margin-bottom: 16px; padding-bottom: 4px; }
#cards-box h2 { margin: 2px 0 14px; font: 700 26px Georgia, serif; color: var(--title); letter-spacing: .1em; text-shadow: var(--title-glow); }
#cards { display: grid; grid-auto-flow: column; grid-auto-columns: 262px; justify-content: center; gap: 18px; padding: 10px 6px 4px; perspective: 1100px; }
.card { --cat: #ffd24a; position: relative; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0 14px 14px; min-height: 384px; text-align: center; overflow: hidden; text-shadow: none;
  border-radius: 12px; border: 2px solid #3c4a5e; outline: 1px solid #000; color: var(--ink);
  background: radial-gradient(130% 62% at 50% 0%, color-mix(in srgb, var(--cat) 34%, transparent), transparent 72%), linear-gradient(#1a1f2a, #0b0e14);
  box-shadow: 0 8px 22px #000b, inset 0 0 0 1px color-mix(in srgb, var(--cat) 60%, transparent), inset 0 0 38px color-mix(in srgb, var(--cat) 15%, transparent);
  transition: transform .13s, box-shadow .13s, border-color .13s; animation: deal .55s cubic-bezier(.2, .8, .3, 1) backwards; animation-delay: calc(var(--i, 0) * .12s); }
.card.form { --cat: #b48cff; } .card.rank { --cat: #ff9a3a; } .card.tower { --cat: #6ae8ff; } .card.mastery { --cat: #4aa8ff; } .card.boon { --cat: #c58aff; }
.card.still { animation: none; }
/* odkrycie: karta obraca się z boku, rozbłyska i siada */
@keyframes deal { 0% { transform: rotateY(86deg) translateY(34px) scale(.88); opacity: 0; filter: brightness(2.6); } 55% { transform: rotateY(-9deg) translateY(-4px) scale(1.02); opacity: 1; filter: brightness(1.35); } 100% { transform: none; filter: none; } }
/* połysk: jasna smuga przesuwa się po karcie co kilka sekund */
.card .shine { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient(112deg, transparent 36%, #ffffff3d 47%, #ffffff12 53%, transparent 63%); transform: translateX(-130%); animation: shine 4.2s ease-in-out infinite; animation-delay: calc(.75s + var(--i, 0) * .28s); }
@keyframes shine { 0% { transform: translateX(-130%); } 26%, 100% { transform: translateX(130%); } }
.card:hover, .card:focus-visible { transform: translateY(-9px) scale(1.035); filter: none; border-color: #d8ecff; outline: 1px solid #000; box-shadow: 0 14px 30px #000c, 0 0 30px color-mix(in srgb, var(--cat) 75%, transparent), inset 0 0 0 1px var(--cat), inset 0 0 44px color-mix(in srgb, var(--cat) 26%, transparent); }
.card kbd { position: absolute; left: 8px; top: 6px; z-index: 2; font: 700 14px inherit; background: #05070bcc; border: 1px solid var(--edge); border-radius: 4px; padding: 0 8px; color: var(--title); }
.card .cat { align-self: stretch; margin: 0 -14px; padding: 8px 38px 7px; font-style: normal; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 2px #000;
  background: linear-gradient(color-mix(in srgb, var(--cat) 62%, #000), color-mix(in srgb, var(--cat) 28%, #000)); border-bottom: 1px solid var(--cat); }
.card .art { flex: none; width: 108px; height: 108px; margin-top: 12px; border-radius: 50%; display: grid; place-items: center; font-size: 58px; line-height: 1; border: 2px solid var(--cat);
  background: radial-gradient(circle at 38% 28%, color-mix(in srgb, var(--tint) 78%, #fff), color-mix(in srgb, var(--tint) 34%, #000) 62%, #0c0a08);
  box-shadow: 0 0 0 3px #000, 0 0 0 4px #5d6b80, 0 0 26px color-mix(in srgb, var(--tint) 70%, transparent), inset 0 -10px 18px #0009; }
.card .art span { filter: drop-shadow(0 3px 5px #000); }
/* portret klasy (grafika z ramką, public/classes/<id>.webp): bez tła i obwódki ikony, z poświatą w kolorze klasy */
.card .art.portrait { width: 172px; height: 172px; margin-top: 2px; border: 0; background: none; box-shadow: none; border-radius: 0; }
.card .art.portrait img { width: 100%; height: 100%; object-fit: contain; filter: drop-shadow(0 6px 10px #000c) drop-shadow(0 0 14px color-mix(in srgb, var(--cat) 45%, transparent)); transition: transform .25s, filter .25s; }
.card.cls:hover .art.portrait img { transform: scale(1.05) rotate(-1.5deg); filter: drop-shadow(0 8px 14px #000c) drop-shadow(0 0 22px color-mix(in srgb, var(--cat) 75%, transparent)); }
.card .name { font: 700 21px Georgia, serif; color: var(--title); margin-top: 4px; text-shadow: 0 2px 4px #000; }
.card .pips { margin: -2px 0 0; }
.card .pips i.next { border-color: var(--cat); background: color-mix(in srgb, var(--cat) 55%, transparent); animation: pipnext 1s infinite alternate; }
@keyframes pipnext { from { box-shadow: 0 0 0 0 transparent; } to { box-shadow: 0 0 8px 2px var(--cat); } }
.card .desc { color: #ccd5e2; font-size: 13px; line-height: 1.38; }
/* „co to zmienia”: liczby przed → po, klawisz */
.card .delta { align-self: stretch; margin-top: auto; min-height: 58px; display: grid; align-content: center; padding: 8px 8px; border-radius: 7px; font-size: 13px; line-height: 1.5; color: #c8d1de; background: #000a; border: 1px solid color-mix(in srgb, var(--cat) 50%, #000); }
.card .delta b { font: inherit; font-weight: 700; color: #8fe08a; } .card .delta s { text-decoration: none; color: var(--dim); } .card .delta b.ess { color: #8fe8ff; }
.card .delta kbd { position: static; display: inline-block; font-size: 13px; padding: 0 7px; margin: 0 1px; border-color: var(--cat); }
/* wybór: wybrana rozbłyska i odlatuje, pozostałe gasną */
.card.chosen { z-index: 3; border-color: #d8ecff; animation: chosen .36s ease-out forwards; }
@keyframes chosen { 0% { transform: scale(1); } 38% { transform: scale(1.1); filter: brightness(1.9); box-shadow: 0 0 70px var(--cat), 0 0 0 3px #d8ecff; } 100% { transform: scale(1.04) translateY(-22px); filter: brightness(1.3); opacity: 0; } }
.card.passed { animation: passed .3s ease-in forwards; }
@keyframes passed { to { transform: translateY(20px) scale(.93); opacity: 0; filter: grayscale(1) brightness(.6); } }
/* przycisk „LEVEL UP!”: czeka wybór karty (klik po uwolnieniu kursora Altem albo klawisz K). Kamienna płyta jak w menu głównym,
   z mocną, STAŁĄ błękitną poświatą — widać go od razu, ale nie pulsuje i nie miga */
#levelup { position: absolute; right: 22px; top: 37%; display: grid; grid-template-columns: auto; justify-items: center; gap: 2px; padding: 12px 30px 11px; border-radius: 10px; overflow: visible;
  background: radial-gradient(ellipse 80% 70% at 50% 40%, rgba(90, 170, 255, .28), transparent 75%), var(--plate); border: 1px solid #b8dcff; outline: none; color: #eef4ff; cursor: pointer;
  box-shadow: 0 0 0 1px #12151c, 0 6px 18px #000a, 0 0 26px rgba(80, 170, 255, .6), inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 -2px 0 rgba(0, 0, 0, .35), inset 0 0 22px rgba(90, 170, 255, .3); }
#levelup b { font: 700 30px Georgia, serif; letter-spacing: .1em; text-transform: uppercase; color: #f4f9ff; text-shadow: 0 2px 0 #1a2030, 0 0 14px rgba(120, 200, 255, .8); white-space: nowrap; }
#levelup small { font-size: 13px; font-weight: 600; color: #cfe0f4; white-space: nowrap; text-shadow: 0 1px 0 #1a2030; }
#levelup small kbd { font: 700 12px inherit; background: linear-gradient(#f2f7ff, #c4d6ec); color: #142033; text-shadow: none; border-radius: 3px; padding: 0 7px; margin-right: 5px; box-shadow: 0 2px 0 #4a6a90; }
#levelup em { position: absolute; right: -12px; top: -13px; min-width: 32px; height: 32px; padding: 0 7px; border-radius: 16px; font: 800 18px/30px "Segoe UI", sans-serif; font-style: normal; color: #fff; background: #d8362c; border: 2px solid #fff3b0; box-shadow: 0 2px 6px #000a; }
#levelup i { display: none; }
/* (dawny przebłysk po przycisku usunięty — przycisk ma być spokojny) */
#levelup:hover { filter: brightness(1.12); transform: translateY(-2px); border-color: #e0f0ff; box-shadow: 0 0 0 1px #12151c, 0 8px 20px #000b, 0 0 34px rgba(80, 170, 255, .8), inset 0 1px 0 rgba(255, 255, 255, .35), inset 0 0 26px rgba(90, 170, 255, .38); }

#cards-cat { margin: -8px 0 12px; font-size: 16px; color: #cfe0f4; }
.spell .slot .key { font-size: 10px; }
#book-list, #book-towers { display: grid; gap: 4px; }
.spell { display: flex; gap: 10px; align-items: center; padding: 4px; border-radius: 4px; }
.spell:hover { background: #ffffff10; }
.spell > div:nth-child(2) { flex: 1; min-width: 0; }
.spell b { display: block; } .spell small { color: var(--dim); display: block; }
.spell.locked { opacity: .45; }
.spell .slot { flex: none; width: 46px; height: 46px; } .spell .slot .glyph { font-size: 23px; }
.pips { display: inline-flex; gap: 3px; margin-left: 8px; vertical-align: middle; }
.pips i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--edge-dim); background: #0006; }
.pips i.on { background: radial-gradient(circle at 35% 30%, #fff3b0, #ffb92a); border-color: #ffd24a; box-shadow: 0 0 5px #ffb92a; }
.spell .plus { flex: none; width: 34px; height: 34px; padding: 0; font-size: 20px; font-weight: 700; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #ffe27a, #c9852a); color: #2a1800; border-color: #fff3b0; box-shadow: 0 0 10px #ffb92a99; }
.spell .plus:disabled { background: #ffffff10; color: #fff3; border-color: transparent; box-shadow: none; cursor: default; filter: none; }
.spell .next { color: #8fe08a; }
#tooltip { position: fixed; z-index: 50; max-width: 290px; background: var(--panel-bg); border: 1px solid var(--edge); border-radius: 7px; padding: 8px 10px; pointer-events: none; font-size: 13px; box-shadow: var(--panel-glow); }
#tooltip b { font-size: 15px; display: block; } #tooltip .dim { color: var(--dim); } #tooltip .good { color: #6aff7a; } #tooltip .bad { color: #ff6a5a; } #tooltip .use { color: #6aff7a; } #tooltip p { margin: 5px 0 0; color: #d4e4f7; }

/* --- menu, ekran startowy, wczytywanie */
#menu { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(4, 7, 12, .6); }
#menu > div { background: var(--panel-bg); border: 1px solid var(--edge); border-radius: 10px; box-shadow: var(--panel-glow); padding: 22px 26px; width: 330px; display: grid; gap: 12px; }
#menu h2 { margin: 0 0 2px; font: 700 23px Georgia, serif; letter-spacing: .1em; text-transform: uppercase; color: var(--title); text-shadow: var(--title-glow); text-align: center; }
#menu label { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
#menu label.check { justify-content: flex-start; }
/* MENU GŁÓWNE (0.8.1): szeroki pas w stylu logo — ciemny kamień z niebieską poświatą kryształu za logo, runiczna krawędź */
#start { position: fixed; inset: 0 0 0 auto; width: min(760px, 100vw); display: grid; align-content: center; justify-items: center; padding: 30px 70px 30px 190px;
  background:
    radial-gradient(ellipse 46% 30% at 62% 36%, rgba(70, 150, 255, .22), transparent 70%),
    linear-gradient(90deg, transparent, rgba(10, 13, 20, .78) 20%, rgba(12, 15, 22, .94) 38%, rgba(14, 17, 25, .97));
}
/* pionowa, świecąca krawędź pasa z runami */
#start::before { content: ''; position: absolute; top: 0; bottom: 0; left: 170px; width: 2px;
  background: linear-gradient(transparent, rgba(110, 190, 255, .55) 20%, rgba(150, 215, 255, .8) 50%, rgba(110, 190, 255, .55) 80%, transparent);
  box-shadow: 0 0 14px 2px rgba(80, 160, 255, .35); }
#start > div { width: 100%; max-width: 440px; display: grid; justify-items: center; }
#start h1 { position: relative; margin: 0 0 6px; line-height: 0; isolation: isolate; }
#logo { position: relative; width: 100%; max-width: 520px; height: auto; margin: 0 0 8px; filter: drop-shadow(0 8px 22px #000d) drop-shadow(0 0 30px rgba(70, 150, 255, .25));
  animation: logo-aura 3.2s ease-in-out infinite; }
/* kryształ w logo (środek, ok. 30% wysokości) oddycha światłem: poświata za logo + błysk nałożony na sam kryształ */
#start h1::before, #start h1::after { content: ''; position: absolute; left: 50%; top: 30%; border-radius: 50%; pointer-events: none; transform: translate(-50%, -50%); }
#start h1::before { z-index: -1; width: 62%; height: 78%;
  background: radial-gradient(closest-side, rgba(130, 205, 255, .85), rgba(60, 140, 255, .35) 45%, transparent 100%);
  filter: blur(6px); animation: logo-glow 3.2s ease-in-out infinite; }
#start h1::after { z-index: 1; width: 26%; height: 50%; mix-blend-mode: screen;
  background: radial-gradient(closest-side, rgba(235, 250, 255, 1), rgba(130, 205, 255, .6) 38%, transparent 100%);
  animation: logo-flare 3.2s ease-in-out infinite; }
@keyframes logo-glow { 0%, 100% { opacity: .45; transform: translate(-50%, -50%) scale(.9); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); } }
@keyframes logo-flare { 0%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(.8); } 50% { opacity: .85; transform: translate(-50%, -50%) scale(1.05); } }
@keyframes logo-aura {
  0%, 100% { filter: drop-shadow(0 8px 22px #000d) drop-shadow(0 0 22px rgba(70, 150, 255, .2)); }
  50% { filter: drop-shadow(0 8px 22px #000d) drop-shadow(0 0 48px rgba(110, 190, 255, .85)); }
}
@media (prefers-reduced-motion: reduce) { #logo, #start h1::before, #start h1::after { animation: none; } }
#start section { display: grid; gap: 9px; }
#start h3 { margin: 0; font: 600 15px Georgia, serif; color: var(--title); text-shadow: var(--title-glow); }
#langs { display: flex; gap: 6px; }
#langs button { padding: 4px 12px; font-size: 12px; }
#langs button.on { border-color: var(--edge-hi); background: radial-gradient(ellipse at 50% 40%, rgba(90, 170, 255, .35), transparent 80%), var(--plate); box-shadow: var(--plate-hover); }
/* menu główne: trzy duże przyciski pod logo */
#start h1 + section { margin-top: 26px; }
#start-home { width: 100%; max-width: 360px; gap: 14px !important; }
/* przyciski menu jak kamienne płyty z logo: szary kamień, jasna faza, runiczna niebieska poświata przy krawędziach */
#start-home button.big { position: relative; padding: 15px 22px; font: 700 21px Georgia, serif; letter-spacing: .12em; text-transform: uppercase; color: #eef4ff;
  text-shadow: 0 2px 0 #1a2030, 0 0 10px rgba(110, 190, 255, .45);
  background: linear-gradient(#6c7280, #4a505c 48%, #3c414c 52%, #2e333d); border: 1px solid #8fa0b8; border-radius: 8px;
  box-shadow: 0 0 0 1px #1a1e26, 0 4px 14px #000a, inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 -2px 0 rgba(0, 0, 0, .35), inset 0 0 18px rgba(90, 170, 255, .12);
  transition: transform .14s, box-shadow .14s, filter .14s; overflow: hidden; }
/* runy po bokach przycisku */
#start-home button.big::before, #start-home button.big::after { content: 'ᚱᚢᚾ'; position: absolute; top: 50%; transform: translateY(-50%); font: 600 12px Georgia, serif; letter-spacing: .2em;
  color: rgba(130, 205, 255, .55); text-shadow: 0 0 6px rgba(90, 180, 255, .9); transition: color .14s; }
#start-home button.big::before { left: 12px; } #start-home button.big::after { right: 12px; content: 'ᛊᚺᚨ'; }
#start-home button.big:hover { transform: translateY(-2px); filter: brightness(1.12);
  box-shadow: 0 0 0 1px #1a1e26, 0 6px 18px #000b, 0 0 18px rgba(80, 170, 255, .45), inset 0 1px 0 rgba(255, 255, 255, .3), inset 0 0 22px rgba(90, 170, 255, .25); border-color: #b8d8ff; }
#start-home button.big:hover::before, #start-home button.big:hover::after { color: rgba(170, 225, 255, .95); }
#start-home button.big:active { transform: translateY(1px); }
/* główny przycisk (Kampania) świeci mocniej, jak kryształ w logo */
#start-home #home-campaign { border-color: #9fd0ff; box-shadow: 0 0 0 1px #1a1e26, 0 4px 14px #000a, 0 0 14px rgba(80, 170, 255, .35), inset 0 1px 0 rgba(255, 255, 255, .25), inset 0 0 22px rgba(90, 170, 255, .2); }
#start-home button.big.quiet { font-size: 21px; color: #eef4ff; }
button.big { padding: 14px 18px; font: 700 19px Georgia, serif; letter-spacing: .08em; color: #eef4ff; border-radius: 8px; text-shadow: 0 2px 0 #1a2030, 0 0 10px rgba(110, 190, 255, .45); }
button.big:hover { filter: brightness(1.12); }
button.big.quiet { color: #d6e0ee; font-size: 17px; }
/* wybór klasy przed wejściem do gry (układ MOBA — reszta stylów w bloku „WYBÓR KLASY (MOBA)” na końcu pliku) */
#pick { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: radial-gradient(ellipse 60% 45% at 50% 30%, rgba(40, 90, 160, .25), transparent 70%), radial-gradient(ellipse at center, rgba(4, 7, 12, .5), rgba(4, 7, 12, .85)); }
#pick h2 { margin: 0; font: 700 30px Georgia, serif; color: var(--title); letter-spacing: .1em; text-shadow: 0 2px 8px #000, 0 0 14px rgba(110, 190, 255, .45); }
#pick-for { margin: -6px 0 0; color: var(--accent); font-size: 15px; text-shadow: 0 1px 4px #000; } #pick-for.bad { color: #ff9a80; }
#pick-skulls { display: flex; align-items: center; gap: 12px; padding: 8px 16px; background: var(--panel-bg); border: 1px solid var(--edge); border-radius: 8px; box-shadow: var(--panel-glow); }
#pick-skulls > span { color: var(--accent); font: 600 12px "Segoe UI", sans-serif; letter-spacing: .12em; text-transform: uppercase; }
#skulls { display: flex; gap: 2px; }
#skulls button { width: 34px; height: 34px; padding: 3px; background: none; border: none; box-shadow: none; cursor: pointer; transition: transform .1s; }
#skulls button:hover { transform: scale(1.18); }
#skulls svg { width: 100%; height: 100%; fill: #3a404c; filter: drop-shadow(0 1px 2px #000); }
#skulls button.on svg { fill: #ff8a5c; filter: drop-shadow(0 0 5px #ff6a3a); }
#skulls-name { min-width: 90px; font-style: normal; font-weight: 700; color: #ffd0b0; }
body.picking #start, body.picking #lobby-bar { display: none; }
/* czaszki trudności wolnej gry na liście gier */
#join-table .skulls { display: inline-flex; gap: 1px; margin-left: 8px; vertical-align: -3px; } #join-table .skulls svg { width: 15px; height: 15px; fill: #ff8a5c; }
body.joining #start { display: none; }
/* ustawienia otwarte z menu głównego: bez przycisków dotyczących trwającej gry */
#menu.home #menu-map, #menu.home #menu-newmap, #menu.home #menu-exit { display: none; }
/* lista gier do dołączenia */
#join { position: fixed; inset: 0; z-index: 30; display: grid; place-items: center; background: radial-gradient(ellipse at center, rgba(4, 7, 12, .45), rgba(4, 7, 12, .78)); }
/* okno ma STAŁY rozmiar (nie skacze, gdy pokoi przybywa); przewija się tylko #join-list — z przyklejonymi nagłówkami */
#join > div { width: min(1040px, calc(100vw - 32px)); height: min(680px, calc(100vh - 60px)); background: var(--panel-bg); border: 1px solid var(--edge); border-radius: 10px; box-shadow: var(--panel-glow); padding: 18px 22px 16px; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto; gap: 12px; }
#join-list { position: relative; min-height: 0; overflow-y: auto; overflow-x: auto; padding: 0 8px 0 6px; border-radius: 8px; background: rgba(0, 0, 0, .22); box-shadow: inset 0 0 0 1px rgba(120, 165, 215, .14), inset 0 8px 18px #0006;
  scrollbar-width: thin; scrollbar-color: #7f9cc0 rgba(0, 0, 0, .45); scrollbar-gutter: stable; }
#join-list::-webkit-scrollbar { width: 12px; }
#join-list::-webkit-scrollbar-track { margin: 34px 0 6px; background: rgba(0, 0, 0, .35); border: 0; border-radius: 6px; }
#join-list::-webkit-scrollbar-thumb { background: linear-gradient(90deg, #3e4d63, #7f9cc0 45%, #3e4d63); border: 2px solid #0b0f16; border-radius: 6px; min-height: 40px; }
#join-list::-webkit-scrollbar-thumb:hover { background: linear-gradient(90deg, #4a5f7c, #a8c6ec 45%, #4a5f7c); }
#join-table thead th { position: sticky; top: 0; z-index: 1; padding-top: 11px; padding-bottom: 9px; background: #0f141d; box-shadow: 0 1px 0 rgba(120, 165, 215, .22), 0 6px 10px -4px #000c; }
#join-list #join-none { position: absolute; inset: 0; display: grid; place-items: center; margin: 0; }
#join-list #join-none.hidden { display: none; }
#join header { display: flex; align-items: center; justify-content: space-between; }
#join h2 { margin: 0; font: 700 26px Georgia, serif; color: var(--title); letter-spacing: .06em; text-shadow: var(--title-glow); }
#join .close { font-size: 22px; }
#join-server { margin: 0; color: var(--dim); font-size: 13px; } #join-server b { color: var(--ink); }
#join-table { width: 100%; border-collapse: separate; border-spacing: 0 6px; font-size: 14px; }
#join-table th { text-align: left; padding: 0 10px; color: var(--accent); font: 600 11px "Segoe UI", sans-serif; letter-spacing: .12em; text-transform: uppercase; }
#join-table td { padding: 10px; background: var(--well); border-top: 1px solid rgba(120, 165, 215, .14); border-bottom: 1px solid #00000066; white-space: nowrap; }
#join-table td:first-child { border-left: 3px solid var(--edge); border-radius: 6px 0 0 6px; } #join-table td:last-child { border-radius: 0 6px 6px 0; text-align: right; }
#join-table tr:hover td { background: rgba(60, 120, 200, .14); }
#join-table .host b { color: var(--title); }
#join-table .game { white-space: normal; min-width: 180px; }
#join-table .game[class*="biome-"]::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 7px; border-radius: 50%; background: var(--b); box-shadow: 0 0 6px var(--b); }
#join-table .biome-meadow { --b: #7fd25a; } #join-table .biome-forest { --b: #2f9e5a; } #join-table .biome-ice { --b: #9fdcff; } #join-table .biome-volcano { --b: #ff7a3a; }
#join-table .biome-desert { --b: #f2b13a; } #join-table .biome-jungle { --b: #5fd23a; } #join-table .biome-archipelago { --b: #2ec8e6; } #join-table .biome-spires { --b: #a47cf2; } #join-table .biome-skyisles { --b: #ff5a82; }
#join-table .heroes { white-space: normal; }
#join-table .hero { display: inline-flex; align-items: center; gap: 5px; margin: 2px 6px 2px 0; padding: 2px 8px 2px 4px; border-radius: 11px; background: #00000055; border: 1px solid rgba(120, 165, 215, .3); font-size: 12px; }
#join-table .hero i { width: 12px; height: 12px; border-radius: 50%; background: var(--tint); border: 1px solid #d8e8ff88; }
#join-table button { padding: 7px 18px; }
#join-table button:disabled { opacity: .45; cursor: default; filter: none; }
.ping { font-variant-numeric: tabular-nums; font-weight: 600; } .ping.good { color: #7fe07a; } .ping.mid { color: #ffd36a; } .ping.bad { color: #ff8a70; }
#join-none { margin: 18px 0; text-align: center; color: var(--dim); font-size: 15px; }
#join-back { justify-self: start; }
#loader { position: fixed; inset: 0; display: none; place-content: center; justify-items: center; gap: 14px; color: #cfe0f4; background: radial-gradient(ellipse at 50% 45%, #18233a, #07090d 70%); z-index: 80; }
body.loading #loader { display: grid; }
#loader i { width: 44px; height: 44px; border: 4px solid rgba(120, 165, 215, .2); border-top-color: var(--edge-hi); border-radius: 50%; box-shadow: 0 0 14px rgba(80, 160, 255, .3); animation: spin 1s linear infinite; }
@keyframes spin { to { transform: rotate(1turn); } }
body:not(.intro) #start { display: none; }

/* --- plansza kampanii w HUD: nazwa, zegar, podpowiedź biomu */
#td-level { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); text-shadow: 0 1px 3px #000; }
#td-wave small { margin-left: 10px; font: 600 13px "Segoe UI", system-ui, sans-serif; color: #c8d2e0; letter-spacing: 0; text-shadow: 0 1px 3px #000; }
#td-status .storm { color: #bfe6ff; }
#td-biome { margin-top: 4px; font-size: 12px; text-shadow: 0 1px 3px #000, 0 0 5px #000; color: #c8d2e0; pointer-events: auto; }
#td-biome b { display: inline-block; margin: 0 3px; padding: 0 7px; border-radius: 8px; font-weight: 600; background: rgba(8, 11, 17, .8); }
#td-biome .weak { color: #ffdc9a; border: 1px solid #ffbe5a99; } #td-biome .strong { color: #cfd6e4; border: 1px solid #a0aabe88; }
.plate.shielded .hpbar { position: relative; }
.plate.shielded .hpbar::before { content: ""; position: absolute; left: 0; bottom: calc(100% + 1px); height: 3px; width: var(--shield, 0%); background: #7fe4ff; box-shadow: 0 0 6px #7fe4ff; }
/* --- podsumowanie obrony */
#summary { position: fixed; inset: 0; display: grid; place-items: center; background: radial-gradient(#30080899, #000000d8); animation: overin .9s; z-index: 60; }
#summary.won { background: radial-gradient(ellipse at center, rgba(30, 70, 130, .55), #000000d8); }
#summary > div { text-align: center; padding: 26px 64px 28px; min-width: 520px; max-width: 760px; border-top: 1px solid var(--edge); border-bottom: 1px solid var(--edge); border-image: linear-gradient(90deg, transparent, rgba(150, 215, 255, .85) 20%, rgba(150, 215, 255, .85) 80%, transparent) 1; background: linear-gradient(90deg, transparent, rgba(12, 15, 22, .93) 16%, rgba(12, 15, 22, .93) 84%, transparent); }
#sum-level { margin: 0 0 4px; font-size: 13px; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); }
#summary h2 { margin: 0; font: 700 54px Georgia, serif; letter-spacing: .1em; color: #ff6a4a; text-shadow: 0 3px 14px #000, 0 0 30px #f204; }
#summary.won h2 { color: #f2f8ff; text-shadow: 0 3px 14px #000, 0 2px 0 #1a2030, 0 0 26px rgba(110, 190, 255, .75); }
#sum-sub { margin: 6px 0 12px; color: #dbe4f0; font-size: 16px; }
#sum-stars { display: flex; justify-content: center; gap: 14px; margin: 12px 0 2px; }
#sum-stars i { width: 62px; height: 62px; display: block; }
#sum-stars svg { width: 100%; height: 100%; fill: #232833; stroke: #4e5a6c; stroke-width: 1; }
#sum-stars i.old svg { fill: #8a7434; stroke: #c9a24a; }
#sum-stars i.now svg { fill: #ffd24a; stroke: #fff2b0; filter: drop-shadow(0 0 10px #ffc83a); }
#sum-stars i.now { animation: starpop .5s cubic-bezier(.3, 1.6, .5, 1) backwards; animation-delay: calc(var(--i) * .22s + .3s); }
@keyframes starpop { from { transform: scale(0) rotate(-40deg); opacity: 0; } }
#sum-goals { list-style: none; margin: 8px auto 12px; padding: 0; display: grid; gap: 5px; text-align: left; max-width: 560px; }
#sum-goals li { display: flex; gap: 10px; align-items: baseline; padding: 5px 12px; border-radius: 6px; background: var(--well); border: 1px solid rgba(120, 165, 215, .2); }
#sum-goals li b { font-size: 18px; color: #4e5a6c; } #sum-goals li.ok b { color: #ffd24a; } #sum-goals li.old b { color: #a88c40; }
#sum-goals li.ok { border-color: var(--edge); background: rgba(60, 120, 200, .14); }
#sum-goals em { font-style: normal; font-weight: 700; color: var(--title); margin-right: 8px; } #sum-goals span { color: #c8d2e0; font-size: 14px; }
#sum-goals li.no em { color: #9eaabd; } #sum-goals u { text-decoration: none; color: #a88c40; font-size: 12px; }
#sum-stats { list-style: none; margin: 0 0 10px; padding: 0; display: flex; justify-content: center; gap: 26px; flex-wrap: wrap; }
#sum-stats li { display: grid; font-size: 12px; color: #9eaabd; text-transform: uppercase; letter-spacing: .06em; } #sum-stats b { font: 700 24px Georgia, serif; color: #fff; }
#sum-unlock { min-height: 18px; margin: 6px 0 14px; color: #9fe08a; font-weight: 600; }
#sum-map { font: 700 18px Georgia, serif; padding: 12px 34px; border: 1px solid #9fd0ff; border-radius: 8px; letter-spacing: .1em; text-transform: uppercase; text-shadow: 0 2px 0 #1a2030, 0 0 10px rgba(110, 190, 255, .45); box-shadow: var(--plate-shadow), 0 0 14px rgba(80, 170, 255, .35); }
#sum-map kbd { font: 600 11px "Segoe UI", system-ui, sans-serif; margin-left: 10px; padding: 2px 6px; border: 1px solid rgba(190, 220, 255, .45); border-radius: 4px; background: rgba(0, 0, 0, .25); text-transform: none; letter-spacing: 0; vertical-align: 2px; }
/* --- mapa świata jako ekran główny (poczekalnia) */
#worldmap { position: fixed; inset: 0; z-index: 40; }
body.lobby #start { display: none; }
#lobby-bar { position: fixed; left: 290px; top: 16px; z-index: 41; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; max-width: 40vw; padding: 7px 12px; border: 1px solid var(--edge); border-radius: 18px; background: var(--panel-bg); box-shadow: var(--panel-glow); color: var(--ink); font-size: 13px; }
#lobby-bar button { font: 600 13px inherit; padding: 6px 13px; border-radius: 14px; }
#lobby-bar button.join { border-color: var(--edge-hi); }
#lobby-note { color: #ffb8a0; } #lobby-note:empty { display: none; }

/* --- liczby obrażeń (hud.float). Wyskok ze „sprężyną”, potem dryf w górę i w bok (--dx z hud.js) i gaśnięcie.
   Obrys z ośmiu ostrych cieni (--o) + miękki cień pod spodem — czytelne i na jasnej trawie, i na ciemnym tle. */
.float { --o: #0b0806; --dx: 0px; position: absolute; translate: -50% -50%; white-space: nowrap; pointer-events: none; z-index: 1;
  font: 900 21px/1 "Segoe UI", system-ui, sans-serif; font-variant-numeric: tabular-nums; letter-spacing: .01em; color: #fff;
  --ow: 2px; --od: calc(var(--ow) * .7);
  text-shadow: var(--ow) 0 0 var(--o), calc(var(--ow) * -1) 0 0 var(--o), 0 var(--ow) 0 var(--o), 0 calc(var(--ow) * -1) 0 var(--o), var(--od) var(--od) 0 var(--o), calc(var(--od) * -1) var(--od) 0 var(--o), var(--od) calc(var(--od) * -1) 0 var(--o), calc(var(--od) * -1) calc(var(--od) * -1) 0 var(--o), 0 3px 7px #000b;
  animation: fpop .95s cubic-bezier(.2, .7, .3, 1) forwards; will-change: transform, opacity; }
@keyframes fpop {
  0% { transform: translate(0, 8px) scale(.3); opacity: 0; }
  9% { transform: translate(calc(var(--dx) * .12), -8px) scale(1.3); opacity: 1; }
  20% { transform: translate(calc(var(--dx) * .22), -12px) scale(1); }
  68% { opacity: 1; }
  100% { transform: translate(var(--dx), -64px) scale(.82); opacity: 0; } }
/* spokojniejsze: obrażenia w czasie, cudze, wieżyczek, napisy — bez przeskoku, krótszy lot */
@keyframes fsoft {
  0% { transform: translate(0, 4px) scale(.7); opacity: 0; }
  14% { transform: translate(calc(var(--dx) * .15), -4px) scale(1.04); opacity: 1; }
  28% { transform: translate(calc(var(--dx) * .25), -6px) scale(1); }
  65% { opacity: .95; }
  100% { transform: translate(calc(var(--dx) * .6), -42px) scale(.9); opacity: 0; } }
.float.dmg { color: #fff; }
/* krytyk: duży, złoty gradient, ciemnobrązowy obrys i ciepła poświata; wpada z obrotem, dłużej stoi */
.float.crit { z-index: 3; font-size: 34px; letter-spacing: -.01em; color: #ffd84a; text-shadow: none;
  background: linear-gradient(180deg, #fffbe0 0%, #ffe46a 38%, #ffb21e 72%, #ff8a10 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(1.5px 0 0 #3a1a00) drop-shadow(-1.5px 0 0 #3a1a00) drop-shadow(0 1.5px 0 #3a1a00) drop-shadow(0 -1.5px 0 #3a1a00) drop-shadow(0 0 8px #ffae00b0);
  animation: fcrit 1.25s cubic-bezier(.2, .7, .3, 1) forwards; }
.float.crit::after { content: "!"; margin-left: 1px; font-size: .7em; vertical-align: .32em; }
@keyframes fcrit {
  0% { transform: translate(0, -10px) scale(2.3) rotate(-10deg); opacity: 0; }
  8% { transform: translate(0, -6px) scale(.88) rotate(2deg); opacity: 1; }
  15% { transform: translate(calc(var(--dx) * .1), -10px) scale(1.14) rotate(-1deg); }
  26% { transform: translate(calc(var(--dx) * .15), -12px) scale(1) rotate(0); }
  74% { opacity: 1; }
  100% { transform: translate(calc(var(--dx) * .5), -52px) scale(.9); opacity: 0; } }
/* wrażliwy na żywioł — większa, w kolorze ognia; odporny — mała, szara, spokojna */
.float.weak { --o: #3a1600; z-index: 2; color: #ffb23a; font-size: 26px; }
.float.resist { --ow: 1.5px; --o: #14161c; color: #a8b0c0; font-size: 15px; font-weight: 700; animation-name: fsoft; }
/* obrażenia w czasie: mniejsze, ciemny obrys w kolorze żywiołu */
.float.bleed { --ow: 1.5px; --o: #3a0004; color: #ff5a5a; font-size: 16px; animation-name: fsoft; }
.float.poison { --ow: 1.5px; --o: #0e2a00; color: #a6f06a; font-size: 16px; animation-name: fsoft; }
.float.burn { --ow: 1.5px; --o: #3a1200; color: #ffa848; font-size: 16px; animation-name: fsoft; }
.float.wet { --ow: 1.5px; --o: #08263a; color: #9fdcff; font-size: 14px; animation-name: fsoft; } .float.tagwet { --o: #08263a; color: #c4ecff; }
.float.shield { --ow: 1.5px; --o: #002a3a; color: #a8ecff; font-size: 17px; animation-name: fsoft; }
/* wieżyczki i cudze trafienia — tło walki, nie mogą krzyczeć */
.float.tower { --ow: 1.5px; --o: #10141c; color: #d4dcea; font-size: 14px; font-weight: 700; opacity: .9; animation-name: fsoft; }
.float.note { --ow: 1.5px; --o: #10141c; color: #d4dcea; font-size: 15px; font-weight: 700; animation-name: fsoft; }
/* obrażenia bohatera: czerwone, drgają i opadają zamiast lecieć w górę */
.float.hurt { --o: #2a0000; color: #ff4a3a; font-size: 22px; animation-name: fhurt; }
@keyframes fhurt {
  0% { transform: scale(1.5); opacity: 0; }
  10% { transform: translate(-3px, 0) scale(1.1); opacity: 1; }
  18% { transform: translate(3px, 0) scale(1); }
  26% { transform: translate(0, 0); }
  70% { opacity: 1; }
  100% { transform: translate(var(--dx), 34px) scale(.9); opacity: 0; } }
.float.heal { --o: #00290a; color: #7aff8a; font-size: 20px; }
/* tyknięcie leczenia w czasie (zbiorczo co ok. 1 s): mniejsze i spokojniejsze niż rzucone leczenie */
.float.heal.tick { font-size: 15px; color: #a8ffb4; opacity: .9; }
/* pasek życia gracza przy leczeniu: zielony błysk (mocny przy rzuconym leczeniu, delikatny przy tyknięciu) */
.heal-big { animation: hp-heal-big .7s ease-out; }
.heal-tick { animation: hp-heal-tick .5s ease-out; }
@keyframes hp-heal-big { 0% { box-shadow: 0 0 0 2px #7aff8a, 0 0 18px #3cff6a; filter: brightness(1.5); } 100% { box-shadow: none; filter: none; } }
@keyframes hp-heal-tick { 0% { box-shadow: 0 0 0 1px #7aff8a99, 0 0 8px #3cff6a88; } 100% { box-shadow: none; } }
/* napisy pod liczbą (WEAK, RESIST, POISON…): drobne kapitaliki */
.float[class*=" tag"] { font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; animation-name: fsoft; animation-duration: .9s;
  text-shadow: 1px 0 0 var(--o), -1px 0 0 var(--o), 0 1px 0 var(--o), 0 -1px 0 var(--o), 0 2px 5px #000c; }
.float.tagpoison { --o: #0e2a00; color: #c0f49a; } .float.tagburn { --o: #3a1200; color: #ffc884; } .float.tagbleed { --o: #3a0004; color: #ff8a8a; }
.float.exploit { --ow: 2px; --o: #2a0e00; color: #ffe27a; font-size: 22px; font-weight: 900; letter-spacing: .04em; animation-name: fcrit; animation-duration: 1.4s; }
.float.tagweak { --o: #3a1600; color: #ffd98a; font-size: 12px; } .float.tagresist { --o: #14161c; color: #a8b0c0; } .float.tagshield { --o: #002a3a; color: #a8ecff; }
/* esencja z zabitego wroga: niebieska poświata */
.float.ess { --o: #003a55; z-index: 2; color: #eaffff; font-size: 24px; text-shadow: 2px 0 0 var(--o), -2px 0 0 var(--o), 0 2px 0 var(--o), 0 -1px 0 var(--o), 0 0 14px #00c8ff, 0 0 26px #00a0ff; animation: fess 1.5s ease-out forwards; }
@keyframes fess { 0% { transform: scale(.5); opacity: 0; } 15% { transform: translateY(-6px) scale(1.35); opacity: 1; } 30% { transform: translateY(-10px) scale(1); } 100% { transform: translateY(-95px); opacity: 0; } }

/* --- hitmarker przy celowniku (hud.hitmarker): cztery kreski na skos, rozsuwają się (--gap) i gasną */
@property --gap { syntax: "<length>"; inherits: true; initial-value: 5px; }
@property --hc { syntax: "<color>"; inherits: true; initial-value: #fff; }
.hitmarker { --len: 10px; --w: 2px; --hc: #fff; position: absolute; left: 50%; top: 50%; width: 0; height: 0; opacity: 0; pointer-events: none;
  filter: drop-shadow(0 0 1px #000) drop-shadow(0 1px 1px #000a); }
.hitmarker i { position: absolute; left: calc(var(--w) / -2); top: 0; width: var(--w); height: var(--len); border-radius: 2px; background: var(--hc);
  transform-origin: 50% 0; transform: rotate(var(--a)) translateY(var(--gap)); }
.hitmarker i:nth-child(1) { --a: 45deg; } .hitmarker i:nth-child(2) { --a: 135deg; } .hitmarker i:nth-child(3) { --a: 225deg; } .hitmarker i:nth-child(4) { --a: 315deg; }
.hitmarker b { position: absolute; left: -11px; top: -11px; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--hc); opacity: 0; }
.hitmarker.hit { animation: hm .23s ease-out forwards; }
@keyframes hm { 0% { opacity: 1; --gap: 3px; } 45% { opacity: 1; } 100% { opacity: 0; --gap: 9px; } }
.hitmarker.dot { --len: 5px; --w: 1.5px; --hc: #ffffffb8; animation: hmdot .17s ease-out forwards; }
@keyframes hmdot { 0% { opacity: .85; --gap: 3px; } 100% { opacity: 0; --gap: 6px; } }
.hitmarker.crit { --len: 12px; --w: 3px; --hc: #ffd23a; animation: hmcrit .3s cubic-bezier(.2, .8, .3, 1) forwards;
  filter: drop-shadow(0 0 1px #3a1a00) drop-shadow(0 0 1px #3a1a00) drop-shadow(0 0 6px #ffae00); }
@keyframes hmcrit { 0% { opacity: 1; --gap: 2px; --hc: #fffbe0; scale: 1.2; } 25% { --hc: #ffd23a; scale: 1; } 50% { opacity: 1; } 100% { opacity: 0; --gap: 12px; } }
/* zabicie: czerwone kreski z białym błyskiem na starcie i pierścień, który się rozchodzi */
.hitmarker.kill { --len: 13px; --w: 3px; --hc: #ff3b2f; animation: hmkill .36s cubic-bezier(.2, .8, .3, 1) forwards;
  filter: drop-shadow(0 0 1px #2a0000) drop-shadow(0 0 1px #2a0000) drop-shadow(0 0 6px #ff2a1a); }
.hitmarker.kill b { animation: hmring .36s ease-out forwards; }
@keyframes hmkill { 0% { opacity: 1; --gap: 2px; --hc: #fff; scale: 1.25; } 30% { --hc: #ff3b2f; scale: 1; } 55% { opacity: 1; } 100% { opacity: 0; --gap: 13px; } }
@keyframes hmring { 0% { opacity: .9; transform: scale(.4); } 100% { opacity: 0; transform: scale(2.3); border-width: .5px; } }

/* --- poświata brzegów ekranu po zabiciu elity / bossa (hud.killFlash) */
.killflash { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.killflash { mix-blend-mode: screen; }
.killflash.elite { background: radial-gradient(ellipse 80% 75% at center, transparent 62%, #ffb02a30 82%, #ffc04a99 100%); animation: kflash .9s ease-out forwards; }
.killflash.boss { background: radial-gradient(ellipse 78% 72% at center, transparent 52%, #ffc85a38 74%, #ffe08ad0 100%);
  box-shadow: inset 0 0 0 2px #fff6d0, inset 0 0 40px #ffd77ab0; animation: kflashboss 1.6s cubic-bezier(.2, .7, .3, 1) forwards; }
@keyframes kflash { 0% { opacity: 0; } 12% { opacity: 1; } 100% { opacity: 0; } }
@keyframes kflashboss { 0% { opacity: 0; } 6% { opacity: 1; } 18% { opacity: .7; } 28% { opacity: .95; } 100% { opacity: 0; } }

/* --- seria zabójstw pod celownikiem (hud.streak): „×n” i kreska czasu serii (--life) */
.streak { position: absolute; left: calc(50% + 46px); top: calc(50% + 26px); display: flex; align-items: baseline; gap: 1px; opacity: 0; pointer-events: none;
  font: italic 900 24px/1 "Segoe UI", system-ui, sans-serif; color: #f4f0e6; transition: opacity .35s;
  text-shadow: 1.5px 0 0 #0b0806, -1.5px 0 0 #0b0806, 0 1.5px 0 #0b0806, 0 -1.5px 0 #0b0806, 0 2px 6px #000b; }
.streak em { font-size: 19px; font-style: normal; font-weight: 800; color: #cfc6b0; }
.streak i { position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; border-radius: 2px; background: currentColor; box-shadow: 0 0 0 1px #0008; transform-origin: 0 50%; }
.streak.show { opacity: .95; }
.streak.bump b, .streak.milestone b { display: inline-block; animation: spop .3s cubic-bezier(.3, 1.6, .5, 1); }
.streak.bump i, .streak.milestone i { animation: slife var(--life, 4s) linear forwards; }
.streak.milestone b { animation: spopbig .5s cubic-bezier(.3, 1.6, .5, 1); }
.streak.hot { color: #ffd84a; } .streak.hot b { text-shadow: 1.5px 0 0 #3a1a00, -1.5px 0 0 #3a1a00, 0 1.5px 0 #3a1a00, 0 -1.5px 0 #3a1a00, 0 0 10px #ffae0080; }
.streak.blaze { color: #ff9a3a; } .streak.blaze b { text-shadow: 1.5px 0 0 #3a0a00, -1.5px 0 0 #3a0a00, 0 1.5px 0 #3a0a00, 0 -1.5px 0 #3a0a00, 0 0 14px #ff5a1a; }
@keyframes spop { 0% { transform: scale(1.5); } 100% { transform: scale(1); } }
@keyframes spopbig { 0% { transform: scale(2); filter: brightness(2); } 100% { transform: scale(1); filter: none; } }
@keyframes slife { from { transform: scaleX(1); } to { transform: scaleX(0); } }

/* moduł ze skrzyni na umiejętności: złota gwiazdka w rogu slotu, nazwa modułu nad slotem po najechaniu */
/* gwiazdka modułu: na pasku umiejętności obok klawisza (prawy górny róg należy do licznika ładunków — wcześniej go zasłaniała) */
#towers .slot.modded::before { content: '★'; position: absolute; top: 1px; right: 3px; z-index: 3; font-size: 12px; color: #ffd24a; text-shadow: 0 0 4px #ff9a2a, 0 1px 1px #000; pointer-events: none; }
#bar .slot.modded .key::after { content: '★'; margin-left: 3px; font-size: 12px; color: #ffd24a; text-shadow: 0 0 4px #ff9a2a, 0 1px 1px #000; }
.slot.modded:hover::after { content: attr(data-mods); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); white-space: nowrap; padding: 3px 8px; border-radius: 6px; background: rgba(12, 15, 22, .95); border: 1px solid #ffd24a88; color: #ffe8a0; font-size: 12px; z-index: 5; }

/* menu debugu (ui/debug-menu.js): „idkfa”, potem O */
#debug-menu { position: fixed; right: 16px; top: 70px; bottom: 16px; z-index: 60; width: min(560px, calc(100vw - 32px)); overflow-y: auto; padding: 12px 14px; border: 1px solid #4fb6d8; border-radius: 10px; background: rgba(8, 16, 22, .94); color: #dff4ff; font: 13px/1.35 "Segoe UI", system-ui, sans-serif; box-shadow: 0 6px 30px rgba(0, 0, 0, .6); }
#debug-menu.hidden { display: none; }
#debug-menu header { display: flex; justify-content: space-between; align-items: center; font-size: 16px; margin-bottom: 6px; }
#debug-menu header em { font-style: normal; font-size: 12px; color: #8fb8c8; }
#debug-menu h4 { margin: 12px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: #8fd8f0; }
#debug-menu .dbg-row { display: flex; gap: 8px; align-items: flex-start; margin: 4px 0; }
#debug-menu .dbg-row > span { flex: 0 0 44px; padding-top: 5px; color: #b8d8e8; }
#debug-menu .dbg-row > div { display: flex; flex-wrap: wrap; gap: 5px; }
#debug-menu button { padding: 4px 10px; border: 1px solid #3b7f99; border-radius: 6px; background: #12303d; color: #dff4ff; font: 600 12px inherit; cursor: pointer; box-shadow: none; text-shadow: none; }
#debug-menu button:hover { background: #1c4a5c; filter: none; box-shadow: none; }
#debug-menu button.on { background: #2f8fb8; border-color: #bff0ff; color: #fff; }
#debug-menu .dbg-warn { margin: 4px 0; padding: 6px 8px; border-radius: 6px; background: #5a2a14; color: #ffd2b0; }
#debug-menu .dbg-skills .dbg-row:first-child { padding-bottom: 6px; border-bottom: 1px dashed #3b7f99; }

/* znaczniki graczy (środkowy przycisk myszy) i sojusznicy poza ekranem — strzałka przy krawędzi w kolorze gracza */
#edge-marks { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
#edge-marks .mark { position: absolute; left: 0; top: 0; display: grid; justify-items: center; gap: 2px; transform: translate(-50%, -50%); --c: #fff; }
#edge-marks .mark i { width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-bottom: 16px solid var(--c); filter: drop-shadow(0 0 4px #000) drop-shadow(0 0 6px var(--c)); }
#edge-marks .mark.on i { display: none; }
#edge-marks .mark b { width: 16px; height: 16px; border-radius: 50%; border: 3px solid var(--c); background: rgba(0, 0, 0, .35); box-shadow: 0 0 8px var(--c); display: none; }
#edge-marks .mark.ping b { display: block; animation: mark-pulse 1s ease-in-out infinite; }
#edge-marks .mark.ping.mob b { border-radius: 3px; transform: rotate(45deg); }
#edge-marks .mark span { font: 700 12px "Segoe UI", sans-serif; color: #fff; white-space: nowrap; padding: 1px 6px; border-radius: 4px; background: rgba(0, 0, 0, .55); border-bottom: 2px solid var(--c); text-shadow: 0 1px 2px #000; }
@keyframes mark-pulse { 50% { box-shadow: 0 0 16px var(--c), 0 0 4px var(--c); } }
/* pytanie o imię */
#name-ask { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; background: rgba(4, 7, 12, .6); }
#name-ask.hidden { display: none; }
#name-ask > div { display: grid; gap: 12px; justify-items: center; min-width: 360px; padding: 26px 30px; background: var(--panel-bg); border: 1px solid var(--edge); border-radius: 10px; box-shadow: var(--panel-glow); }
#name-ask h2 { margin: 0; color: var(--title); font: 700 26px Georgia, serif; letter-spacing: .06em; text-shadow: var(--title-glow); }
#name-ask p { margin: 0; color: var(--dim); font-size: 14px; text-align: center; max-width: 340px; }
#name-ask input { width: 100%; box-sizing: border-box; padding: 10px 14px; font: 600 20px Georgia, serif; text-align: center; color: var(--ink); background: #07090d; border: 1px solid #4a5a72; border-radius: 6px; outline: none; }
#name-ask input:focus { border-color: var(--edge-hi); box-shadow: 0 0 12px rgba(80, 160, 255, .4); }
#name-ask .row { display: flex; gap: 10px; }
#who { position: fixed; left: 18px; bottom: 16px; z-index: 45; padding: 7px 14px; font: 600 13px "Segoe UI", sans-serif; color: var(--ink); background: var(--panel-bg); border: 1px solid var(--edge-dim); border-radius: 8px; box-shadow: 0 2px 10px #0009; cursor: pointer; }
#who:hover { border-color: var(--edge-hi); box-shadow: 0 2px 10px #0009, 0 0 12px rgba(80, 160, 255, .35); }
#who.hidden { display: none; }

/* okno ustawień: grupy (grafika, dźwięk, sterowanie, język) */
#settings { position: fixed; inset: 0; z-index: 55; display: grid; place-items: center; background: rgba(4, 7, 12, .6); }
#settings.hidden { display: none; }
#settings > div { background: var(--panel-bg); border: 1px solid var(--edge); border-radius: 10px; box-shadow: var(--panel-glow); padding: 16px 24px; width: min(880px, calc(100vw - 32px)); max-height: calc(100vh - 32px); overflow-y: auto; box-sizing: border-box;
  display: grid; grid-template-columns: 1fr 1fr; grid-auto-flow: row dense; gap: 12px; align-content: start; }
/* dwie kolumny: po lewej grafika, dźwięk, sterowanie i język, po prawej ściąga pada na całą wysokość */
#settings h2, #settings-back { grid-column: 1 / -1; }
#settings section { grid-column: 1; }
#settings #set-pad { grid-column: 2; grid-row: 2 / span 4; align-content: start; }
#settings-back { justify-self: center; min-width: 200px; }
@media (max-width: 760px) {
  #settings > div { grid-template-columns: 1fr; padding: 16px; }
  #settings #set-pad { grid-column: 1; grid-row: auto; }
}
#settings h2 { margin: 0; font: 700 23px Georgia, serif; letter-spacing: .1em; text-transform: uppercase; color: var(--title); text-shadow: var(--title-glow); text-align: center; }
#settings section { display: grid; gap: 9px; padding: 10px 12px 12px; border: 1px solid var(--edge-dim); border-radius: 7px; background: var(--well); }
#settings h3 { margin: 0 0 2px; font: 700 12px "Segoe UI", sans-serif; letter-spacing: .14em; text-transform: uppercase; color: var(--accent); }
#settings label { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
#settings label.check { justify-content: flex-start; }
#settings input[type=range] { width: min(220px, 45%); }
#settings label.off { opacity: .45; }
/* podpowiedź działania (kowal): klawisz-kapsel i krótki opis nad paskiem umiejętności */
#interact { position: absolute; left: 50%; bottom: 128px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px; padding: 8px 18px 8px 10px;
  background: var(--panel-bg); border: 1px solid var(--edge); border-radius: 10px; box-shadow: var(--panel-glow); animation: interact-in .25s ease-out; }
#interact.hidden { display: none; }
#interact kbd { display: grid; place-items: center; min-width: 34px; height: 34px; padding: 0 6px; font: 800 19px "Segoe UI", sans-serif; color: #142033;
  background: linear-gradient(#f2f7ff, #c4d6ec); border: 1px solid #fff; border-radius: 7px; box-shadow: 0 4px 0 #4a6a90, 0 5px 8px #000a, 0 0 10px rgba(110, 190, 255, .35); }
#interact span { font: 600 17px Georgia, serif; color: var(--title); text-shadow: 0 1px 3px #000, 0 0 10px rgba(110, 190, 255, .35); }
@keyframes interact-in { from { opacity: 0; transform: translate(-50%, 8px); } }
/* licznik klatek */
#fps { position: fixed; right: 8px; bottom: 6px; z-index: 70; font: 600 12px Consolas, monospace; color: #b8ffb0; text-shadow: 0 1px 2px #000; pointer-events: none; }
#fps.hidden { display: none; }
#gpu-warn { position: fixed; left: 50%; top: 8px; transform: translateX(-50%); z-index: 90; max-width: calc(100vw - 32px); padding: 6px 14px; border-radius: 8px; background: #6a1a12e6; color: #ffe0d8; font: 600 13px system-ui, sans-serif; text-align: center; pointer-events: none; }
#gpu-warn.hidden { display: none; }

/* okno umiejętności (K): wiersz na slot paska */
#win-skills { left: 50%; top: 70px; transform: translateX(-50%); width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 100px); overflow-y: auto; padding: 16px 22px 10px; }
#win-skills h2 { margin: 0 0 10px; font: 700 24px Georgia, serif; color: var(--title); text-shadow: var(--title-glow); text-align: center; letter-spacing: .08em; }
#skills-list { display: grid; gap: 8px; }
.skill-row { display: grid; grid-template-columns: 46px 52px 1fr; gap: 4px 12px; align-items: start; padding: 8px 10px; border: 1px solid var(--edge-dim); border-radius: 8px; background: var(--well); }
.skill-row kbd { grid-row: span 2; align-self: center; display: grid; place-items: center; min-width: 38px; height: 30px; font: 800 13px "Segoe UI", sans-serif; color: #142033; background: linear-gradient(#f2f7ff, #c4d6ec); border: 1px solid #fff; border-radius: 6px; box-shadow: 0 3px 0 #4a6a90; }
.skill-row .ic { grid-row: span 2; align-self: center; width: 46px; height: 46px; border-radius: 8px; display: grid; place-items: center; font-size: 26px; background: radial-gradient(circle at 35% 30%, var(--tint), #0d1118 80%); border: 1px solid #5d6b80; }
.skill-row .head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.skill-row .head b { font: 700 16px Georgia, serif; color: var(--title, #e6f2ff); }
.skill-row .head span { font-size: 12px; color: var(--dim); }
.skill-row .head .good { color: #ffd27a; font-weight: 700; }
.skill-row p { margin: 0; font-size: 13px; line-height: 1.45; color: var(--ink); }
/* cechy pasywne i wieżyczki w oknie K: bez klawisza (ikona zajmuje dwie pierwsze kolumny) */
.skills-sub { margin: 14px 0 6px; font: 700 15px Georgia, serif; letter-spacing: .1em; text-transform: uppercase; color: var(--title); border-bottom: 1px solid var(--edge-dim); padding-bottom: 4px; }
.skill-row.passive, .skill-row.tower { grid-template-columns: 52px 1fr; }
.skill-row.passive .ic { --tint: #6a5a9a; }
.skill-row.tower.locked { opacity: .62; }
.skill-row .mods { color: #ffd24a; font-size: 12px; }
.skill-row.empty { opacity: .45; }

/* kolorowe liczby w opisach (ui/desc-color.js): korzyść dla gracza / kara albo koszt / liczba neutralna */
.up { color: #7ee08a; font-weight: 700; white-space: nowrap; }
.down { color: #ffad5a; font-weight: 700; white-space: nowrap; }
.num { color: #f4f8ff; font-weight: 600; white-space: nowrap; }

/* zakładka „K Umiejętności” przyczepiona nad lewym końcem paska umiejętności (nie poszerza dolnej belki) */
#bar-wrap { position: relative; }
#skills-btn { position: absolute; left: 0; bottom: calc(100% + 5px); display: flex; align-items: center; gap: 7px; padding: 3px 10px 3px 4px; pointer-events: auto; cursor: pointer;
  background: rgba(18, 16, 14, .9); border: 1px solid #7a6230; border-radius: 6px; font: 600 13px Georgia, serif; color: #ffe9b0; text-shadow: 0 1px 2px #000; white-space: nowrap; }
#skills-btn kbd { display: grid; place-items: center; min-width: 22px; height: 20px; padding: 0 4px; font: 800 12px "Segoe UI", sans-serif; color: #142033;
  background: linear-gradient(#f2f7ff, #c4d6ec); border: 1px solid #fff; border-radius: 4px; box-shadow: 0 2px 0 #4a6a90; }
#skills-btn:hover { border-color: #c9a24a; color: #fff6d8; box-shadow: 0 0 10px rgba(255, 210, 100, .3); }

/* ── pad Xbox: ikony przycisków w tekście, podświetlenie w menu, ściąga w ustawieniach (ui/pad-glyphs.js, ui/pad-nav.js) */
.pad-g { display: inline-flex; vertical-align: middle; margin: 0 3px 1px 0; line-height: 0; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .6)); }
.pad-g svg { display: block; }
kbd.pad-k .pad-g { font-size: max(1em, 14px); }
kbd.pad-k { background: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; min-width: 0 !important; }
#interact kbd.pad-k { font-size: 24px; }
#skills-btn kbd.pad-k { font-size: 15px; height: auto; }
.slot .key .pad-g { margin: 0; }
.slot .key:has(.pad-g) { left: 1px; top: 0; font-size: 17px; }
#towers-pad { align-self: center; font-size: 22px; margin-right: 2px; }
#towers-pad.hidden { display: none; }
html.pad-mode #towers .slot .key { display: none; }
.spell .slot .key:has(.pad-g) { font-size: 14px; }
#tower-info .pad-g, #td-status .pad-g, #levelup .pad-g, .card .pad-g { font-size: 16px; }
.skill-row kbd.pad-k { font-size: 20px; }
html.pad-mode .card > kbd { display: none; }
html.pad-mode #click { display: none; }
html.pad-mode body.playing, html.pad-mode canvas { cursor: none; }
.pad-focus { outline: 3px solid #ffd24a !important; outline-offset: 3px; box-shadow: 0 0 0 6px rgba(255, 210, 74, .25), 0 0 18px rgba(255, 210, 74, .55) !important; position: relative; z-index: 1; }
label:has(> .pad-focus[type="checkbox"]) { outline: 3px solid #ffd24a; outline-offset: 3px; border-radius: 4px; }
label:has(> .pad-focus[type="checkbox"]) > .pad-focus { outline: 0 !important; box-shadow: none !important; }
button.armed { color: #ffd0a0 !important; border-color: #ff9a50 !important; }
#set-pad .pad-row { display: grid; grid-template-columns: minmax(64px, auto) 1fr; align-items: center; gap: 12px; padding: 2px 0; font-size: 14px; }
#set-pad .pad-keys { display: inline-flex; flex-wrap: wrap; gap: 2px; font-size: 18px; }
#set-pad .pad-keys .pad-g { margin: 0; }
#set-pad .pad-state { margin: 0 0 6px; font-size: 13px; opacity: .8; } #set-pad .pad-state.on { color: #9fe8a0; opacity: 1; }
#set-pad .pad-state small { opacity: .6; margin-left: 6px; }
#set-pad .pad-note { margin: 8px 0 0; font-size: 12px; opacity: .75; }

/* KARTA ULEPSZENIA nad slotem (hud.modCard): mała karta jak karty poziomu — złota gwiazdka, ikona, nazwa, opis; strzałka do slotu */
.modcard { --cat: #ffd24a; position: fixed; z-index: 58; width: 250px; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 0 12px 11px; text-align: center; pointer-events: none;
  border-radius: 10px; border: 2px solid var(--cat); outline: 1px solid #000; color: var(--ink);
  background: radial-gradient(130% 70% at 50% 0%, color-mix(in srgb, var(--cat) 34%, transparent), transparent 72%), linear-gradient(#1a1f2a, #0b0e14);
  box-shadow: 0 10px 26px #000c, 0 0 26px color-mix(in srgb, var(--cat) 55%, transparent), inset 0 0 30px color-mix(in srgb, var(--cat) 15%, transparent);
  transform-origin: var(--arrow) 100%; animation: modcard-in .6s cubic-bezier(.2, .8, .3, 1) backwards; }
.modcard.tower { --cat: #6ae8ff; }
.modcard::after { content: ''; position: absolute; left: var(--arrow); bottom: -11px; width: 16px; height: 16px; margin-left: -8px; transform: rotate(45deg); background: #0b0e14; border-right: 2px solid var(--cat); border-bottom: 2px solid var(--cat); }
.modcard.out { animation: modcard-out .45s ease-in forwards; }
.modcard .cat { align-self: stretch; margin: 0 -12px 4px; padding: 16px 0 5px; border-radius: 8px 8px 0 0; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #fff; text-shadow: 0 1px 2px #000;
  background: linear-gradient(color-mix(in srgb, var(--cat) 62%, #000), color-mix(in srgb, var(--cat) 28%, #000)); border-bottom: 1px solid var(--cat); }
.modcard .star { position: absolute; top: -17px; left: 50%; z-index: 2; width: 30px; height: 30px; margin-left: -15px; display: grid; place-items: center; border-radius: 50%; font-style: normal; font-size: 19px; color: #fff3b0;
  background: radial-gradient(circle at 40% 35%, #ffe680, #c98a12); border: 2px solid #000; box-shadow: 0 0 0 1px #ffd24a, 0 0 16px #ffb020; animation: modcard-star 1.6s ease-in-out infinite; }
.modcard .art { width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; font-size: 30px; line-height: 1; border: 2px solid var(--cat);
  background: radial-gradient(circle at 38% 28%, #4a4030, #0c0a08 70%); box-shadow: 0 0 0 2px #000, 0 0 18px color-mix(in srgb, var(--cat) 60%, transparent); }
.modcard .name { font: 700 17px Georgia, serif; color: var(--title); text-shadow: 0 2px 4px #000; }
.modcard .for { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--cat); }
.modcard .desc { margin: 2px 0 0; font-size: 13px; line-height: 1.35; color: #dfe6f0; }
.modcard .shine { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(112deg, transparent 36%, #ffffff30 47%, #ffffff10 53%, transparent 63%) no-repeat; background-size: 300% 100%; background-position: 100% 0; animation: modcard-shine 2.6s ease-in-out .5s infinite; }
/* połysk przesuwa sam gradient (nie element), więc nie wychodzi poza kartę — karta nie przycina, bo wystaje z niej gwiazdka i strzałka */
@keyframes modcard-shine { 0% { background-position: 100% 0; } 26%, 100% { background-position: 0% 0; } }
@keyframes modcard-in { 0% { transform: translateY(26px) scale(.6); opacity: 0; filter: brightness(2.4); } 60% { transform: translateY(-4px) scale(1.03); opacity: 1; filter: brightness(1.3); } 100% { transform: none; filter: none; } }
@keyframes modcard-out { to { transform: translateY(12px) scale(.75); opacity: 0; } }
@keyframes modcard-star { 50% { transform: scale(1.15) rotate(8deg); box-shadow: 0 0 0 1px #ffd24a, 0 0 26px #ffc840; } }
/* slot, którego dotyczy nowe ulepszenie: świeci, póki widać kartę */
.slot.mod-new { animation: slot-mod 1s ease-in-out infinite; z-index: 2; }
@keyframes slot-mod { 50% { box-shadow: 0 0 0 2px #ffd24a, 0 0 18px #ffb020; } }

/* ================================================================ WYBÓR KLASY (MOBA) — public/js/ui/class-pick.js
   Po lewej podgląd wybranej klasy (portret z poświatą w jej kolorze --cls, nazwa, role, opis, paski cech, pasek 8
   umiejętności), po prawej siatka kafli wszystkich klas i przycisk „Graj”. Kolor klasy: --cls (podgląd), --c (kafel). */
#pick { overflow-y: auto; }
#pick > div { position: relative; display: grid; grid-template-rows: auto minmax(0, 1fr); justify-items: center; gap: clamp(8px, 2vh, 18px);
  width: 100%; max-width: 1320px; height: 100vh; box-sizing: border-box; padding: clamp(12px, 3vh, 28px) 24px clamp(14px, 3.4vh, 32px); }
.pk-head { display: grid; justify-items: center; gap: 8px; }
.pk-head #pick-for { margin: -2px 0 0; }
.pk-head #pick-for:empty { display: none; }
#pick-back { position: absolute; left: 24px; top: clamp(12px, 3vh, 28px); }
#pick-classes { --cls: #8fc8ff; position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: clamp(16px, 2.2vw, 30px); width: 100%; min-height: 0; }
#pick { overflow-x: hidden; }
#pick-classes::before { content: ''; position: absolute; inset: 0 35% 0 0; pointer-events: none; z-index: -1;
  background: radial-gradient(ellipse at 40% 50%, color-mix(in srgb, var(--cls) 22%, transparent), transparent 65%); transition: background .4s; }
/* podgląd */
.pk-hero { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) auto; align-items: center; gap: 12px clamp(18px, 2.4vw, 34px);
  min-height: 0; padding: clamp(14px, 2.6vh, 26px) clamp(16px, 2.2vw, 32px); border-radius: 14px; overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--cls) 55%, #2a3446);
  background: radial-gradient(ellipse 48% 70% at 22% 42%, color-mix(in srgb, var(--cls) 26%, transparent), transparent 72%), var(--panel-bg);
  box-shadow: var(--panel-glow), 0 0 42px color-mix(in srgb, var(--cls) 20%, transparent); transition: border-color .3s, box-shadow .3s; }
.pk-art { --sz: clamp(160px, 43vh, 380px); position: relative; width: var(--sz); height: var(--sz); }
.pk-rays { position: absolute; inset: -16%; border-radius: 50%; opacity: .75; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, color-mix(in srgb, var(--cls) 34%, transparent) 0 4deg, transparent 4deg 22deg);
  -webkit-mask: radial-gradient(circle, #000 28%, transparent 68%); mask: radial-gradient(circle, #000 28%, transparent 68%); animation: pk-spin 40s linear infinite; }
.pk-hero .pk-face { position: absolute; inset: 0; display: grid; place-items: center; border-radius: 50%; animation: pk-in .45s cubic-bezier(.2, .9, .3, 1.15) both; }
.pk-face img { display: block; width: 100%; height: 100%; object-fit: contain; }
.pk-hero .pk-face img { filter: drop-shadow(0 10px 18px #000c) drop-shadow(0 0 26px color-mix(in srgb, var(--cls) 60%, transparent)); }
/* medalion zastępczy (popiersie z modelu 3D albo inicjał): ciemne tło, pierścień w kolorze klasy */
.pk-face:not(.ok) { overflow: hidden; background: radial-gradient(circle at 42% 30%, color-mix(in srgb, var(--cls, var(--c)) 50%, #1a1f2a), #07090d 72%);
  box-shadow: inset 0 0 0 3px color-mix(in srgb, var(--cls, var(--c)) 75%, #000), inset 0 0 0 6px #2a2f38, inset 0 0 0 8px #6a5a40, inset 0 -18px 30px #000a; }
.pk-face.bust img { object-fit: cover; border-radius: 50%; -webkit-mask: radial-gradient(circle, #000 64%, transparent 70%); mask: radial-gradient(circle, #000 64%, transparent 70%); }
.pk-face b { font: 700 calc(var(--sz, 90px) * .42) Georgia, serif; color: #f4f8ff; text-shadow: 0 3px 0 #000, 0 0 18px var(--cls, var(--c)); }
.pk-tile .pk-face b { font-size: 40px; }
.pk-info { display: grid; align-content: center; gap: clamp(7px, 1.4vh, 12px); min-width: 0; animation: pk-slide .4s cubic-bezier(.2, .8, .3, 1) both; }
.pk-info h3 { margin: 0; font: 700 clamp(30px, 5.4vh, 48px) Georgia, serif; letter-spacing: .05em; color: var(--title); line-height: 1.05;
  text-shadow: 0 3px 0 #0a0d14, 0 0 24px color-mix(in srgb, var(--cls) 70%, transparent); }
.pk-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.pk-tags span { padding: 3px 11px; border-radius: 999px; font: 700 11px "Segoe UI", sans-serif; letter-spacing: .12em; text-transform: uppercase; color: #fff;
  background: color-mix(in srgb, var(--cls) 28%, #0a0d14); border: 1px solid color-mix(in srgb, var(--cls) 70%, #000); text-shadow: 0 1px 2px #000; }
.pk-blurb { margin: 0; max-width: 48ch; color: #ccd5e2; font-size: clamp(13px, 1.9vh, 16px); line-height: 1.45; }
.pk-stats { display: grid; gap: clamp(5px, 1vh, 8px); max-width: 400px; margin-top: 2px; }
.pk-stat { display: grid; grid-template-columns: 96px minmax(0, 1fr) 32px; align-items: center; gap: 10px; }
.pk-stat em { font: 600 11px "Segoe UI", sans-serif; font-style: normal; letter-spacing: .08em; text-transform: uppercase; color: var(--dim); }
.pk-stat i { position: relative; height: 8px; border-radius: 4px; overflow: hidden; background: #05070b; border: 1px solid #2a3446; }
.pk-stat i::after { content: ''; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); border-radius: 3px; transform-origin: left;
  background: linear-gradient(90deg, color-mix(in srgb, var(--cls) 50%, #000), var(--cls)); box-shadow: 0 0 8px color-mix(in srgb, var(--cls) 70%, transparent); animation: pk-fill .7s .1s cubic-bezier(.2, .8, .3, 1) both; }
.pk-stat small { font-size: 13px; font-weight: 700; color: var(--title); }
/* pasek umiejętności klasy (domyślne warianty 8 slotów) */
.pk-kit { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; padding-top: clamp(10px, 1.8vh, 16px); border-top: 1px solid color-mix(in srgb, var(--cls) 30%, #1e2634); }
.pk-ab { display: grid; justify-items: center; align-content: start; gap: 6px; min-width: 0; animation: pk-pop .35s cubic-bezier(.2, .9, .3, 1.2) both; animation-delay: calc(.12s + var(--s) * .04s); }
.pk-ab i { --a: clamp(38px, 6.2vh, 54px); position: relative; width: var(--a); height: var(--a); display: grid; place-items: center; font-style: normal; font-size: calc(var(--a) * .52); line-height: 1; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--tint) 70%, #000); background: radial-gradient(circle at 38% 28%, color-mix(in srgb, var(--tint) 70%, #fff), color-mix(in srgb, var(--tint) 32%, #000) 62%, #0c0a08);
  box-shadow: 0 0 0 2px #000, 0 0 14px color-mix(in srgb, var(--tint) 45%, transparent), inset 0 -8px 14px #0008; text-shadow: 0 2px 4px #000; }
.pk-ab.empty i { background: #0b0e14; border: 1px dashed #3c4a5e; box-shadow: none; }
.pk-ab kbd { position: absolute; right: -7px; bottom: -7px; padding: 0 4px; font: 700 10px "Segoe UI", sans-serif; line-height: 15px; border-radius: 4px; color: var(--title); background: #05070bee; border: 1px solid var(--edge); text-shadow: none; }
.pk-ab kbd.pad-k { padding: 0; border: 0; background: none; } .pk-ab kbd.pad-k svg { width: 17px; height: 17px; }
.pk-ab small { max-width: 100%; font-size: 11.5px; line-height: 1.2; text-align: center; color: #c8d1de; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
/* siatka klas */
.pk-side { display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 14px; min-height: 0; }
.pk-grid { --t: clamp(66px, 11.4vh, 104px); display: grid; grid-template-columns: repeat(3, var(--t)); grid-auto-rows: var(--t); gap: 10px; align-content: center; justify-content: center;
  min-height: 0; overflow-y: auto; padding: 14px; border-radius: 14px; background: var(--panel-bg); border: 1px solid var(--edge-dim); box-shadow: var(--panel-glow); }
.pk-tile { --c: #8fa0b8; position: relative; padding: 0; border-radius: 12px; overflow: hidden; cursor: pointer; border: 2px solid #2c3646; outline: none;
  background: radial-gradient(circle at 50% 38%, color-mix(in srgb, var(--c) 34%, #10141c), #07090d 76%); box-shadow: 0 4px 12px #000a, inset 0 0 0 1px #000;
  filter: saturate(.7) brightness(.8); transition: transform .14s, border-color .14s, box-shadow .14s, filter .14s;
  animation: pk-tile-in .5s cubic-bezier(.2, .9, .3, 1.2) both; animation-delay: calc(var(--i) * .045s); }
.pk-tile .pk-face { position: absolute; inset: 5%; display: grid; place-items: center; border-radius: 50%; }
.pk-tile:hover, .pk-tile:focus-visible, .pk-tile.pad-focus { filter: none; transform: translateY(-3px) scale(1.05); border-color: color-mix(in srgb, var(--c) 60%, #fff); box-shadow: 0 8px 18px #000c, 0 0 16px color-mix(in srgb, var(--c) 55%, transparent); }
.pk-tile.sel { filter: none; border-color: var(--c); box-shadow: 0 0 0 2px #000, 0 0 24px color-mix(in srgb, var(--c) 80%, transparent), inset 0 0 20px color-mix(in srgb, var(--c) 45%, transparent); }
.pk-tile.sel::after { content: ''; position: absolute; inset: 0; border-radius: 10px; pointer-events: none; box-shadow: inset 0 0 0 2px #ffffff55; }
.pk-play { --cls: #8fc8ff; width: 100%; padding: clamp(10px, 2vh, 16px) 18px; font-size: clamp(20px, 3.2vh, 26px); letter-spacing: .22em; text-transform: uppercase;
  border-color: color-mix(in srgb, var(--cls) 70%, #fff); background: linear-gradient(color-mix(in srgb, var(--cls) 46%, #3a3f4a), color-mix(in srgb, var(--cls) 18%, #161a22));
  box-shadow: 0 0 0 1px #12151c, 0 6px 18px #000a, 0 0 22px color-mix(in srgb, var(--cls) 50%, transparent), inset 0 1px 0 rgba(255, 255, 255, .3); transition: background .3s, box-shadow .3s, transform .1s; }
.pk-play:hover, .pk-play.pad-focus { box-shadow: 0 0 0 1px #12151c, 0 6px 18px #000a, 0 0 34px color-mix(in srgb, var(--cls) 80%, transparent), inset 0 1px 0 rgba(255, 255, 255, .35); }
/* potwierdzenie: wybrany kafel rozbłyska, reszta gaśnie, podgląd się rozjaśnia */
.pk-tile.chosen { animation: pk-chosen .5s ease-out forwards; }
.pk-tile.passed { animation: pk-passed .35s ease-in forwards; }
#pick-classes.going .pk-hero { animation: pk-go .6s ease-out forwards; }
@keyframes pk-spin { to { transform: rotate(360deg); } }
@keyframes pk-in { from { opacity: 0; transform: scale(.86); filter: brightness(2); } }
@keyframes pk-slide { from { opacity: 0; transform: translateX(16px); } }
@keyframes pk-pop { from { opacity: 0; transform: translateY(8px) scale(.8); } }
@keyframes pk-fill { from { transform: scaleX(0); } }
@keyframes pk-tile-in { from { opacity: 0; transform: translateY(14px) scale(.8); } }
@keyframes pk-chosen { 40% { transform: scale(1.16); filter: brightness(1.9); box-shadow: 0 0 40px var(--c), 0 0 0 3px #fff; } to { transform: scale(1.08); filter: brightness(1.2); } }
@keyframes pk-passed { to { opacity: .25; transform: scale(.92); filter: grayscale(1) brightness(.6); } }
@keyframes pk-go { 35% { filter: brightness(1.5); box-shadow: var(--panel-glow), 0 0 80px var(--cls); } to { filter: brightness(1.15); box-shadow: var(--panel-glow), 0 0 60px var(--cls); } }
/* wąski ekran: podgląd nad siatką, całość przewijana */
@media (max-width: 900px) {
  #pick { place-items: start center; }
  #pick > div { height: auto; min-height: 100vh; padding: 64px 12px 20px; }
  #pick-skulls { flex-wrap: wrap; justify-content: center; gap: 6px 12px; }
  #pick-back { left: 12px; }
  #pick-classes { grid-template-columns: minmax(0, 1fr); }
  .pk-hero { grid-template-columns: minmax(0, 1fr); justify-items: center; text-align: center; }
  .pk-art { --sz: min(52vw, 220px); }
  .pk-info { justify-items: center; } .pk-tags { justify-content: center; } .pk-stats { width: 100%; }
  .pk-kit { grid-template-columns: repeat(4, minmax(0, 1fr)); row-gap: 12px; }
  .pk-grid { --t: min(21vw, 92px); grid-template-columns: repeat(auto-fill, var(--t)); }
}

/* ikony-grafiki umiejętności (public/icons, ui/icons.js): obrazek wypełnia kafelek; klawisz, odliczanie i liczniki leżą nad nim */
img.ab-art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; pointer-events: none; user-select: none; }
.glyph.has-art { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; filter: none; }
.slot.off .glyph.has-art { filter: grayscale(1) brightness(.5); }
.slot .glyph.has-art { border-radius: 3px; box-shadow: inset 0 0 0 1px #0008; }
.skill-row .ic:has(img.ab-art) { position: relative; overflow: hidden; }
.card .art:has(img.ab-art) { position: relative; overflow: hidden; }
.card .art:has(img.ab-art) > span { position: absolute; inset: 0; filter: none; }
.pk-ab i:has(img.ab-art) { background: #05070b; }

/* pasek umiejętności w stylu ekranu wyboru klasy (.pk-ab): zaokrąglony kafelek z obwódką i poświatą w kolorze umiejętności,
   klawisz w plakietce w prawym dolnym rogu (nie na grafice), ładunki zostają w prawym górnym */
#bar { gap: 9px; padding: 8px 10px 10px; }
#bar .slot { border-radius: 9px; border: 1px solid color-mix(in srgb, var(--tint, #4a4030) 70%, #000); outline: none;
  box-shadow: 0 0 0 2px #000, 0 0 12px color-mix(in srgb, var(--tint, #000) 40%, transparent); }
#bar .slot.empty { border: 1px dashed #4a4030; box-shadow: 0 0 0 2px #000; }
#bar .slot .glyph.has-art { border-radius: 8px; box-shadow: none; }
#bar .slot .glyph.has-art::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 -9px 14px #0008, inset 0 1px 0 #ffffff2a; }
#bar .slot .cd { border-radius: 8px; }
#bar .slot.over { outline: 2px solid #fff; outline-offset: 1px; }
#bar .slot .key { left: auto; top: auto; right: -7px; bottom: -7px; z-index: 4; padding: 0 4px; font: 700 10px "Segoe UI", sans-serif; line-height: 15px; border-radius: 4px;
  color: #ffe9b0; background: #05070bee; border: 1px solid #7a6230; text-shadow: none; white-space: nowrap; }
#bar .slot .key:has(.pad-g) { left: auto; top: auto; right: -8px; bottom: -8px; padding: 0; border: 0; background: none; font-size: 17px; line-height: 1; }
#bar .slot.empty .key { color: #8d8470; }

/* mapa świata (kampania): bez „Grasz jako …” — imię zmienia się w menu głównym */
body.lobby #who { display: none; }

/* pasek budowy w tym samym stylu co pasek umiejętności: zaokrąglone kafelki z poświatą, numer klawisza w plakietce
   w lewym górnym rogu, koszt w prawym dolnym */
#towers { gap: 9px; padding: 8px 10px 10px; }
#towers .slot { border-radius: 9px; border: 1px solid color-mix(in srgb, var(--tint, #4a4030) 70%, #000); outline: none;
  box-shadow: 0 0 0 2px #000, 0 0 12px color-mix(in srgb, var(--tint, #000) 40%, transparent); }
#towers .slot .glyph.has-art { border-radius: 8px; }
#towers .slot .glyph.has-art::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; box-shadow: inset 0 -12px 14px #000a, inset 0 1px 0 #ffffff2a; }
#towers .slot .key { left: -7px; top: -7px; z-index: 4; padding: 0 4px; font: 700 10px "Segoe UI", sans-serif; line-height: 15px; border-radius: 4px;
  color: #ffe9b0; background: #05070bee; border: 1px solid #7a6230; text-shadow: none; }
#towers .slot .cost { z-index: 2; }

/* kapłan: umiejętności wzmocnione Aureolą świecą na pasku (priest-client.js: dimSlots → .halo-on) */
#bar .slot.halo-on { border-color: #ffe08a; box-shadow: 0 0 0 2px #000, 0 0 16px 3px #ffd860; animation: halo-slot 1.3s ease-in-out infinite; }
#bar .slot.halo-on .glyph { filter: brightness(1.25) drop-shadow(0 0 6px #ffe08a); }
@keyframes halo-slot { 50% { box-shadow: 0 0 0 2px #000, 0 0 24px 6px #ffe9a0; } }

/* PODZIEMIE (dungeon-client.js): zamiast stanu obrony — cel przygody, pasek bossa z zapowiedzią mechaniki, opowieść */
body.dungeon #td, body.dungeon #build, body.dungeon #radar-lanes { display: none; }
#dg-goal { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); min-width: 300px; padding: 7px 18px 8px; text-align: center; border-radius: 10px;
  background: linear-gradient(#1a1416e6, #0d0a0ce6); border: 1px solid #ff7a2a66; box-shadow: 0 6px 18px #000a; }
#dg-goal b { display: block; font: 700 15px Georgia, serif; color: #ffcf8a; letter-spacing: .04em; }
#dg-goal span { font-size: 13px; color: #e8dccb; }
#dg-goal.gather { border-color: #ffd04a; box-shadow: 0 0 16px #ffc04a88; }
#dg-goal.gather span { color: #ffe27a; font-weight: 700; }
#dg-boss { position: absolute; left: 50%; top: 72px; transform: translateX(-50%); width: min(560px, 80vw); text-align: center; pointer-events: none; }
#dg-boss .name { font: 700 17px Georgia, serif; color: #ffd9a8; text-shadow: 0 2px 4px #000; margin-bottom: 4px; }
#dg-boss .bar { position: relative; height: 18px; border-radius: 9px; background: #1b0f0f; border: 2px solid #000; outline: 1px solid #ff6a2a88; overflow: hidden; }
#dg-boss .bar i { position: absolute; left: 0; top: 0; bottom: 0; width: 100%; background: linear-gradient(#ff7a3a, #b8281a); transition: width .25s; }
#dg-boss .bar .pip { position: absolute; top: 0; bottom: 0; width: 2px; background: #fff9; }
#dg-boss .bar span { position: relative; font-size: 12px; font-weight: 700; color: #fff; line-height: 18px; text-shadow: 0 1px 2px #000; }
#dg-boss .cast { position: relative; margin: 6px auto 0; width: 80%; height: 22px; border-radius: 6px; background: #120c06; border: 1px solid #ffb04a; overflow: hidden; }
#dg-boss .cast i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(90deg, #ffb04a44, #ffd060cc); }
#dg-boss .cast span { position: relative; font-size: 13px; font-weight: 700; color: #fff; line-height: 22px; text-shadow: 0 1px 2px #000; }
#dg-boss .cast .bad { color: #ff6a5a; }
#dg-boss .cast .ok { color: #8aff7a; }
#dg-boss.danger .cast { border-color: #ff3a2a; animation: dg-pulse .45s infinite alternate; }
@keyframes dg-pulse { from { box-shadow: 0 0 8px #ff3a2a; } to { box-shadow: 0 0 30px #ff5a2a; } }
#dg-story { position: absolute; left: 50%; bottom: 200px; width: min(640px, 86vw); padding: 12px 20px; border-radius: 10px; background: #0d0a0cd9; border-left: 3px solid #ff9a4a;
  box-shadow: 0 8px 24px #000a; opacity: 0; transform: translate(-50%, 10px); transition: opacity .6s, transform .6s; pointer-events: none; }
#dg-story.show { opacity: 1; transform: translate(-50%, 0); }
#dg-story p { margin: 0; font: italic 15px/1.45 Georgia, serif; color: #f2e6d6; }
#dg-frost { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity .6s;
  background: radial-gradient(ellipse at center, transparent 45%, #bfe8ff66 75%, #e8f8ffcc 100%); }

/* mistrz ostrzy: dwie szable w rękach i stopień Mistrzostwa ostrza pod paskiem staminy (blademaster-client.js: hudPips) */
#bm-blades { display: flex; align-items: center; gap: 8px; margin: 5px 0 0 2px; pointer-events: none; }
#bm-blades .bm-sw { display: flex; gap: 4px; }
#bm-blades .bm-sw i { width: 4px; height: 14px; border-radius: 2px 2px 1px 1px; transform: skewX(-14deg); background: rgba(20, 20, 30, .6); border: 1px solid #8a94a8; transition: background .15s, box-shadow .15s; }
#bm-blades .bm-sw i.on { background: linear-gradient(#f4f6fa, #9aa4b8); box-shadow: 0 0 6px #8ad0ff; border-color: #dfe8f4; }
#bm-blades .bm-tier { display: flex; gap: 3px; }
#bm-blades .bm-tier b { width: 6px; height: 6px; transform: rotate(45deg); border: 1px solid #d8a050; background: rgba(30, 16, 8, .6); }
#bm-blades .bm-tier b.on { background: #ffb040; box-shadow: 0 0 6px #ff8a2a; }
#bm-blades .bm-prog { width: 46px; height: 3px; background: rgba(0, 0, 0, .45); border-radius: 2px; overflow: hidden; }
#bm-blades .bm-prog u { display: block; height: 100%; background: linear-gradient(90deg, #ff8a2a, #ffd080); }