/* ============================================================
   DUNGEON OF SHADOWS II — SERCE OTCHŁANI — style
   ============================================================ */
*{margin:0;padding:0;box-sizing:border-box}
:root{
  --bg:#07050c;
  --panel:#120d1d;
  --panel2:#1a1229;
  --border:#3a2a5a;
  --gold:#e8c368;
  --hp:#e04545;
  --mp:#3d7bff;
  --xp:#9c5bff;
  --txt:#cfc4e6;
  --dim:#7a6f96;
  --r-common:#b8b8b8;
  --r-magic:#5aa0ff;
  --r-rare:#ffd84d;
  --r-epic:#c05aff;
  --r-legend:#ff8c2e;
  --r-set:#3ddc84;
}
html,body{width:100%;height:100%;overflow:hidden;background:var(--bg);color:var(--txt);
  font-family:'Segoe UI',system-ui,sans-serif;user-select:none}
button{background:linear-gradient(180deg,#2a1d45,#1a1229);border:1px solid var(--border);color:var(--txt);
  padding:8px 18px;font-size:14px;border-radius:6px;cursor:pointer;font-family:inherit;transition:all .15s}
button:hover{background:linear-gradient(180deg,#3d2b63,#241938);border-color:#6a4fa8;color:#fff;transform:translateY(-1px)}
button:active{transform:translateY(1px)}
canvas#gameCanvas{position:fixed;inset:0;display:block;background:#000}

/* ============ TYTUŁ ============ */
#title-screen{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;
  background:radial-gradient(ellipse at 50% 30%,#1a0f2e 0%,#0a0614 55%,#050309 100%);text-align:center;
  overflow-y:auto;overflow-x:hidden}
.title-inner{margin:auto;display:flex;flex-direction:column;align-items:center;
  text-align:center;padding:26px 12px;width:100%}
.title-logo{position:relative;margin-bottom:6px}
#title-screen h1{font-size:52px;letter-spacing:12px;color:#e8dcff;
  text-shadow:0 0 24px #7a3aff,0 0 60px #4a1a9f,0 2px 0 #000;font-weight:800}
.title-ii{font-size:74px;font-weight:900;color:var(--gold);letter-spacing:6px;line-height:.9;
  text-shadow:0 0 30px #ff5a2e,0 0 80px #a02a10,0 3px 0 #000;animation:pulse-ii 3s ease-in-out infinite}
@keyframes pulse-ii{0%,100%{text-shadow:0 0 30px #ff5a2e,0 0 80px #a02a10}50%{text-shadow:0 0 46px #ff7a4e,0 0 110px #c03a18}}
#title-screen .subtitle{font-size:20px;letter-spacing:14px;color:#c98a9a;margin-top:4px;
  text-shadow:0 0 16px #8a2a3a}
.title-lore{color:#9a8bbf;font-size:13.5px;line-height:1.75;margin:22px 0 10px;max-width:640px}
.title-lore b{color:#ff7a6a}
.title-keys{color:#6a5f88;font-size:12.5px;line-height:1.9;margin-bottom:24px}
.title-keys b{color:#b9a8e8}
.class-cards{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;max-width:980px}
.class-card{display:flex;flex-direction:column;align-items:center;gap:5px;width:148px;padding:16px 8px 12px;
  background:linear-gradient(180deg,#191030 0%,#0f0a1d 100%);border:1px solid #33235a;border-radius:10px;
  cursor:pointer;transition:all .18s;position:relative;overflow:hidden}
.class-card:hover{border-color:#8a5fff;transform:translateY(-4px) scale(1.03);
  box-shadow:0 8px 30px rgba(120,60,255,.35);background:linear-gradient(180deg,#241745 0%,#150e28 100%)}
.class-card.locked{opacity:.45;cursor:default}
.class-card.locked:hover{transform:none;box-shadow:none}
.cc-icon{font-size:38px;filter:drop-shadow(0 0 8px rgba(160,100,255,.6))}
.cc-name{font-size:15px;font-weight:700;color:#e8dcff}
.cc-desc{font-size:10.5px;color:#8a7fa8;line-height:1.4;min-height:29px}
.cc-stats{font-size:10.5px;color:#6a5f88}
.cc-new{position:absolute;top:6px;right:-26px;background:#c03a5a;color:#fff;font-size:9px;font-weight:700;
  padding:2px 28px;transform:rotate(38deg);letter-spacing:1px}
.diff-row{display:flex;gap:8px;align-items:center;margin-top:20px;flex-wrap:wrap;justify-content:center}
.diff-label{color:var(--dim);font-size:12.5px;letter-spacing:1px}
.diff-btn{padding:7px 18px;font-size:13px;border-radius:18px;opacity:.5}
.diff-btn:hover{opacity:.85}
.diff-btn.active{opacity:1;border-color:var(--dc);color:#fff;box-shadow:0 0 12px var(--dc)}
.diff-desc{margin-top:9px;color:#8a7fa8;font-size:12px;min-height:15px}
.pact-row{margin-top:14px}
.pact-btn{padding:6px 14px;font-size:12px;border-radius:16px;opacity:.45}
.pact-btn:hover{opacity:.8}
.pact-btn.active{opacity:1;border-color:#c03a5a;color:#ffd8e0;background:linear-gradient(180deg,#4a1730,#2a0d1c);
  box-shadow:0 0 12px rgba(200,50,90,.45)}
.pact-desc{max-width:720px;margin-left:auto;margin-right:auto;line-height:1.5;font-size:11.5px}
.title-buttons{margin-top:24px;display:flex;gap:10px;flex-wrap:wrap;justify-content:center}
.title-buttons button{padding:10px 22px;font-size:14px}
.title-crosslink{display:inline-block;margin-top:16px;color:#9a8bbf;font-size:13px;text-decoration:none;
  border:1px solid #3a2a5a;border-radius:20px;padding:7px 20px;transition:all .15s}
.title-crosslink:hover{color:#fff;border-color:#8a5fff;background:rgba(120,60,255,.15);transform:translateY(-1px)}
.title-meta-line{margin-top:16px;color:#8a6fd8;font-size:13px}
.title-embers{position:fixed;inset:0;pointer-events:none;overflow:hidden}
.title-embers i{position:absolute;bottom:-10px;width:4px;height:4px;border-radius:50%;
  background:#ff7a3e;box-shadow:0 0 8px #ff5a2e;opacity:0;animation:ember 7s linear infinite}
.title-embers i:nth-child(1){left:8%;animation-delay:0s}.title-embers i:nth-child(2){left:18%;animation-delay:1.2s;background:#a05aff;box-shadow:0 0 8px #8a3aff}
.title-embers i:nth-child(3){left:28%;animation-delay:2.6s}.title-embers i:nth-child(4){left:38%;animation-delay:.7s;background:#a05aff;box-shadow:0 0 8px #8a3aff}
.title-embers i:nth-child(5){left:48%;animation-delay:3.4s}.title-embers i:nth-child(6){left:58%;animation-delay:1.9s}
.title-embers i:nth-child(7){left:68%;animation-delay:4.2s;background:#a05aff;box-shadow:0 0 8px #8a3aff}.title-embers i:nth-child(8){left:78%;animation-delay:2.2s}
.title-embers i:nth-child(9){left:88%;animation-delay:5s}.title-embers i:nth-child(10){left:95%;animation-delay:3.1s;background:#a05aff;box-shadow:0 0 8px #8a3aff}
.title-embers i:nth-child(11){left:13%;animation-delay:5.6s}.title-embers i:nth-child(12){left:83%;animation-delay:6.3s;background:#ff4a6a;box-shadow:0 0 8px #ff2a4a}
@keyframes ember{0%{transform:translateY(0) translateX(0);opacity:0}8%{opacity:.9}
  60%{opacity:.7}100%{transform:translateY(-105vh) translateX(30px);opacity:0}}

/* ============ EKRANY KOŃCOWE ============ */
.end-screen{position:fixed;inset:0;z-index:120;display:none;flex-direction:column;align-items:center;
  justify-content:center;background:rgba(5,2,10,.94);text-align:center}
#death-screen h1{font-size:64px;color:#e03a3a;letter-spacing:10px;text-shadow:0 0 40px #a01a1a;margin-bottom:8px}
#win-screen h1{font-size:52px;color:var(--gold);letter-spacing:6px;text-shadow:0 0 40px #c08a20;margin-bottom:8px}
.end-sub{color:#9a8bbf;font-size:16px;margin-bottom:14px}
.end-stats{font-size:14.5px;color:#aaa;line-height:2;margin-bottom:10px}
.end-essence{font-size:17px;color:#b98aff;margin-bottom:22px;text-shadow:0 0 12px #7a3aff}
.end-screen button{margin:4px 6px;padding:11px 30px;font-size:15px}
.end-hint{color:#6a5f88;font-size:12px;margin-top:14px;max-width:520px;line-height:1.6}

/* ============ AWANS ============ */
#level-up-screen{position:fixed;inset:0;z-index:110;display:none;flex-direction:column;align-items:center;
  justify-content:center;background:rgba(8,4,18,.88);backdrop-filter:blur(3px)}
#level-up-screen h2{font-size:38px;color:var(--gold);text-shadow:0 0 24px #c08a20;letter-spacing:4px;margin-bottom:6px}
#level-up-info{color:#9a8bbf;font-size:14px;margin-bottom:22px}
.choices{display:flex;gap:14px;flex-wrap:wrap;justify-content:center;max-width:860px}
.talent-card{width:230px;padding:18px 14px;background:linear-gradient(180deg,#1c1233 0%,#120b22 100%);
  border:1px solid #3a2a5a;border-radius:10px;cursor:pointer;transition:all .16s;text-align:center}
.talent-card:hover{border-color:#a07aff;transform:translateY(-4px);box-shadow:0 8px 28px rgba(130,80,255,.35)}
.talent-card .t-icon{font-size:34px;display:block;margin-bottom:8px}
.talent-card .t-name{font-size:15px;font-weight:700;color:#e8dcff;margin-bottom:6px}
.talent-card .t-rank{font-size:11px;color:var(--gold);margin-bottom:6px}
.talent-card .t-desc{font-size:12px;color:#9a8bbf;line-height:1.5}

/* ============ DAR OTCHŁANI ============ */
#boon-screen{position:fixed;inset:0;z-index:115;display:none;flex-direction:column;align-items:center;
  justify-content:center;background:rgba(10,4,22,.9);backdrop-filter:blur(4px)}
#boon-screen h2{font-size:36px;color:#c79aff;text-shadow:0 0 26px #7a3aff;letter-spacing:6px;margin-bottom:6px}
#boon-info{color:#9a8bbf;font-size:14px;margin-bottom:22px}
.boon-card{width:236px;padding:18px 14px;border-radius:12px;cursor:pointer;transition:all .16s;
  text-align:center;background:linear-gradient(180deg,#1b1030 0%,#100a1e 100%);border:1px solid #3a2a5a}
.boon-card:hover{transform:translateY(-5px);border-color:#b06aff;box-shadow:0 10px 32px rgba(140,70,255,.4)}
.boon-card .b-icon{font-size:36px;display:block;margin-bottom:8px;filter:drop-shadow(0 0 10px rgba(160,100,255,.6))}
.boon-card .b-name{font-size:15.5px;font-weight:700;color:#e8dcff;margin-bottom:4px}
.boon-card .b-rank{font-size:10.5px;color:#8a7fa8;letter-spacing:1px;margin-bottom:7px}
.boon-card .b-desc{font-size:12px;color:#a99cc8;line-height:1.55}
.boon-card.tier-2{border-color:#5a3fa0}
.boon-card.tier-2 .b-name{color:#c9b0ff}
.boon-card.tier-3{border-color:#8a5a20;background:linear-gradient(180deg,#2a1a10 0%,#150d18 100%)}
.boon-card.tier-3 .b-name{color:var(--gold)}
.boon-card.tier-3::after{content:'POTĘŻNY';position:absolute;top:8px;right:-24px;background:var(--gold);
  color:#1a1005;font-size:8.5px;font-weight:800;padding:2px 26px;transform:rotate(38deg);letter-spacing:1px}
.boon-card.tier-3{position:relative;overflow:hidden}

/* ============ SKRZYNIA ============ */
#chest-screen{position:fixed;inset:0;z-index:115;display:none;flex-direction:column;align-items:center;
  justify-content:center;background:rgba(16,10,4,.92);backdrop-filter:blur(4px)}
#chest-screen h2{font-size:34px;color:#e8c368;text-shadow:0 0 26px #7a5a10;letter-spacing:6px;margin-bottom:6px}
#chest-info{color:#a3906f;font-size:14px;margin-bottom:22px}
.chest-card{width:210px;padding:16px 13px;border-radius:12px;cursor:pointer;transition:all .16s;
  text-align:center;background:linear-gradient(180deg,#1e1810 0%,#120e08 100%);border:1px solid #4a3a20}
.chest-card:hover{transform:translateY(-5px);box-shadow:0 10px 32px rgba(200,160,70,.3)}
.chest-card .c-icon{font-size:34px;display:block;margin-bottom:8px;filter:drop-shadow(0 0 10px rgba(230,190,110,.5))}
.chest-card .c-name{font-size:14.5px;font-weight:700;margin-bottom:5px;line-height:1.3}
.chest-card .c-meta{font-size:11px;color:#8f7f66;letter-spacing:.5px}

/* ============ PAKT KRWI (Ołtarz) ============ */
/* pod minimapą — pasek buffów się zawija, więc pod nim znacznik by na niego wchodził */
#awakening-mark{position:absolute;top:212px;right:14px;width:168px;display:none;padding:5px 8px;
  border-radius:7px;text-align:center;box-sizing:border-box;
  background:rgba(40,6,10,.88);border:1px solid #8a2028;color:#ff8a90;font-size:11.5px;
  font-weight:700;letter-spacing:1px;box-shadow:0 0 14px rgba(190,30,40,.28) inset}
#awakening-mark .aw-sub{display:block;font-weight:400;font-size:10px;color:#c08088;letter-spacing:0}

/* ============ STUDNIA DUSZ ============ */
#well-screen{position:fixed;inset:0;z-index:115;display:none;flex-direction:column;align-items:center;
  justify-content:center;background:rgba(4,12,22,.92);backdrop-filter:blur(4px)}
#well-screen h2{font-size:34px;color:#8ad8ff;text-shadow:0 0 26px #1a6a9a;letter-spacing:6px;margin-bottom:6px}
#well-info{color:#7f9ab0;font-size:14px;margin-bottom:22px}
.well-hint{margin-top:20px;font-size:11.5px;color:#5f7a90;letter-spacing:1px}
.well-card{width:252px;padding:18px 15px;border-radius:12px;cursor:pointer;transition:all .16s;
  text-align:center;background:linear-gradient(180deg,#0e1c2a 0%,#081220 100%);border:1px solid #2a4a64}
.well-card:hover{transform:translateY(-5px);border-color:#7ad8ff;box-shadow:0 10px 32px rgba(60,160,220,.35)}
.well-card .w-icon{font-size:36px;display:block;margin-bottom:8px;filter:drop-shadow(0 0 10px rgba(120,200,255,.55))}
.well-card .w-name{font-size:15.5px;font-weight:700;color:#dcefff;margin-bottom:4px}
.well-card .w-cost{font-size:10.5px;color:#6f8ca4;letter-spacing:1px;margin-bottom:8px;text-transform:uppercase}
.well-card .w-desc{font-size:12px;color:#a3bccf;line-height:1.55}
.well-card .w-desc .w-sub{color:#7f9ab0;font-style:italic}
.well-card.soul{border-color:#4a6a9a}
.well-card.soul .w-name{color:#bfefff}
.well-card.soul .w-cost{color:#e07a8a}
.well-card.bottom{border-color:#6a5a2a;background:linear-gradient(180deg,#1c1a0e 0%,#12100a 100%)}
.well-card.bottom .w-name{color:var(--gold)}
.well-card.bottom .w-cost{color:#e0864a}
.well-card.off{opacity:.42;cursor:not-allowed}
.well-card.off:hover{transform:none;border-color:#2a4a64;box-shadow:none}

/* ============ HUD ============ */
#ui-overlay{position:fixed;inset:0;pointer-events:none;z-index:20;display:none}
#hud{position:absolute;top:14px;left:14px;width:250px;background:rgba(14,9,26,.86);
  border:1px solid var(--border);border-radius:10px;padding:10px 12px;backdrop-filter:blur(4px)}
.hud-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
#hud-portrait{position:relative;width:46px;height:46px;background:radial-gradient(circle,#2a1d45,#150e28);
  border:1px solid #5a3fa0;border-radius:8px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
#hud-portrait-icon{font-size:26px}
#hud-level{position:absolute;bottom:-5px;right:-5px;background:var(--gold);color:#1a1005;font-size:10.5px;
  font-weight:800;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 3px}
.hud-title{flex:1;min-width:0}
#hud-name{font-size:14.5px;font-weight:700;color:#e8dcff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#hud-stats-line{display:flex;gap:9px;font-size:11.5px;color:#9a8bbf;margin-top:3px}
#hud .label{font-size:9.5px;color:var(--dim);letter-spacing:2px;margin:4px 0 2px}
.bar{position:relative;height:17px;background:#0a0714;border:1px solid #2a1d45;border-radius:4px;overflow:hidden}
.bar-thin{height:11px}
.bar-fill{position:absolute;left:0;top:0;bottom:0;transition:width .18s ease-out}
.hp-fill{background:linear-gradient(180deg,#ff6a5a,#c02a2a)}
.mp-fill{background:linear-gradient(180deg,#5a8aff,#2a4ad0)}
.xp-fill{background:linear-gradient(180deg,#b97aff,#7a3ad0)}
.bar-ghost{position:absolute;left:0;top:0;bottom:0;background:#8a4040;transition:width .7s ease-out .25s}
.bar-shield{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(180deg,rgba(230,240,255,.85),rgba(140,180,255,.55));mix-blend-mode:screen;transition:width .18s}
.bar-text{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:10.5px;
  color:#fff;text-shadow:0 1px 2px #000;font-weight:600}
.hud-bottom{display:flex;justify-content:space-between;margin-top:8px;font-size:12.5px;color:#c9b880}
#dash-pips{display:flex;gap:5px;margin-top:7px}
.dash-pip{flex:1;height:6px;border-radius:3px;background:#241938;border:1px solid #3a2a5a;overflow:hidden}
.dash-pip i{display:block;height:100%;background:linear-gradient(90deg,#4adfff,#2a9adf);width:0%}
.dash-pip.full i{width:100%;box-shadow:0 0 6px #4adfff}

#low-hp-overlay{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .4s;
  background:radial-gradient(ellipse at center,transparent 55%,rgba(200,20,20,.45) 100%)}
#low-hp-overlay.active{opacity:1;animation:lowhp 1.1s ease-in-out infinite}
@keyframes lowhp{0%,100%{opacity:.55}50%{opacity:1}}

#buff-bar{position:absolute;top:14px;left:274px;display:flex;gap:6px;flex-wrap:wrap;max-width:44vw}
.buff-icon{position:relative;width:36px;height:36px;background:rgba(14,9,26,.86);border:1px solid #4a3a7a;
  border-radius:7px;display:flex;align-items:center;justify-content:center;font-size:19px}
.buff-icon.debuff{border-color:#8a3a3a;background:rgba(40,10,14,.86)}
/* błogosławieństwa kapliczek — liczone w piętrach, nie w sekundach */
.buff-icon.floor-buff{border-color:#c8a24a;box-shadow:0 0 10px rgba(200,162,74,.35) inset}
.buff-icon.floor-buff .bt{background:rgba(120,86,14,.9)}
.buff-icon.floor-buff.debuff{border-color:#8a3aff;box-shadow:0 0 10px rgba(138,58,255,.35) inset}
.buff-icon.floor-buff.debuff .bt{background:rgba(70,24,130,.9)}
.buff-icon .bt{position:absolute;bottom:-2px;right:0;font-size:9px;color:#fff;background:rgba(0,0,0,.7);
  border-radius:3px;padding:0 2px;font-weight:700}

#minimap{position:absolute;top:14px;right:14px;background:rgba(8,5,16,.88);border:1px solid var(--border);border-radius:8px}
#minimap-label{position:absolute;top:186px;right:14px;width:168px;text-align:center;font-size:11.5px;color:#9a8bbf}

#boss-hp{position:absolute;top:18px;left:50%;transform:translateX(-50%);width:min(560px,52vw);display:none}
#boss-hp .name{display:flex;justify-content:space-between;font-size:14px;color:#ffb0a0;font-weight:700;
  text-shadow:0 0 10px #a02a1a;margin-bottom:4px;letter-spacing:1px}
#boss-hp .bar{height:20px;border-color:#5a2030}
#boss-hp .fill{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(180deg,#ff5a4a,#a01a20);transition:width .2s}
#boss-hp .ghost{position:absolute;left:0;top:0;bottom:0;background:#7a3040;transition:width .8s ease-out .3s}
#boss-hp .tick{position:absolute;top:0;bottom:0;width:1px;background:rgba(255,255,255,.35)}
#boss-hp .tick.t66{left:66%}#boss-hp .tick.t33{left:33%}

#quickslots{position:absolute;bottom:14px;left:14px;display:flex;gap:7px}
.qslot{position:relative;width:46px;height:46px;background:rgba(14,9,26,.86);border:1px solid var(--border);
  border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:22px;pointer-events:auto;cursor:pointer}
.qslot:hover{border-color:#8a5fff}
.qslot .qk{position:absolute;top:1px;left:4px;font-size:9.5px;color:var(--dim);font-weight:700}
.qslot .qn{position:absolute;bottom:1px;right:4px;font-size:10px;color:#fff;font-weight:700;text-shadow:0 1px 2px #000}
.qslot.empty{opacity:.4}

#spell-bar{position:absolute;bottom:14px;left:50%;transform:translateX(-50%);display:flex;gap:8px}
.spell-slot{position:relative;width:54px;height:54px;background:rgba(14,9,26,.9);border:1px solid var(--border);
  border-radius:9px;display:flex;align-items:center;justify-content:center;font-size:26px;pointer-events:auto;cursor:pointer;overflow:hidden}
.spell-slot:hover{border-color:#8a5fff}
.spell-slot .sk{position:absolute;top:1px;left:5px;font-size:10px;color:var(--dim);font-weight:700;z-index:3}
.spell-slot .smp{position:absolute;bottom:1px;right:5px;font-size:9.5px;color:#6a9aff;font-weight:600;z-index:3}
.spell-slot .cd-overlay{position:absolute;left:0;right:0;bottom:0;background:rgba(5,2,12,.82);z-index:2;
  display:flex;align-items:center;justify-content:center;font-size:13px;color:#fff;font-weight:700}
.spell-slot.nomana .s-ic{filter:grayscale(1) brightness(.5)}
.spell-slot.ult{border-color:#8a5a20}
.spell-slot.ult.ready{border-color:var(--gold);box-shadow:0 0 14px rgba(232,195,104,.5);animation:ultpulse 1.6s infinite}
@keyframes ultpulse{0%,100%{box-shadow:0 0 10px rgba(232,195,104,.35)}50%{box-shadow:0 0 20px rgba(232,195,104,.7)}}

#message-log{position:absolute;bottom:82px;left:14px;width:330px;max-height:180px;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;font-size:12.5px;line-height:1.55}
#message-log div{text-shadow:0 1px 3px #000;animation:msg-in .25s ease-out;color:#b9aed6}
#message-log .m-good{color:#7ae08a}#message-log .m-bad{color:#ff7a6a}#message-log .m-gold{color:#e8c368}
#message-log .m-magic{color:#b98aff}#message-log .m-sys{color:#6a8aff}
@keyframes msg-in{from{opacity:0;transform:translateX(-12px)}to{opacity:1;transform:none}}

#combo-display{position:absolute;top:34%;right:8%;font-size:30px;font-weight:900;color:#ffb84d;
  text-shadow:0 0 16px #c06a10,0 2px 0 #000;opacity:0;transition:opacity .2s;transform:rotate(6deg)}
#combo-display.show{opacity:1}
#combo-display .cx{font-size:15px;color:#ffdfa0;display:block;text-align:right}

#achievement-toast{position:absolute;top:78px;left:50%;transform:translateX(-50%) translateY(-16px);
  background:linear-gradient(180deg,#2a1d45,#170f2c);border:1px solid var(--gold);border-radius:10px;
  padding:10px 22px;text-align:center;opacity:0;transition:all .35s;pointer-events:none}
#achievement-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#achievement-toast .at-title{font-size:11px;color:var(--gold);letter-spacing:3px}
#achievement-toast .at-name{font-size:15.5px;color:#fff;font-weight:700;margin-top:2px}

#interact-hint{position:absolute;bottom:150px;left:50%;transform:translateX(-50%);background:rgba(10,6,20,.85);
  border:1px solid #4a3a7a;border-radius:8px;padding:6px 16px;font-size:13px;color:#d8cef0;display:none}
#interact-hint b{color:var(--gold)}

#talent-hint{position:absolute;bottom:84px;left:50%;transform:translateX(-50%);background:rgba(24,15,40,.92);
  border:1px solid var(--gold);border-radius:20px;padding:7px 20px;font-size:13px;color:#ffe9b0;display:none;
  pointer-events:auto;cursor:pointer;animation:talentpulse 1.7s ease-in-out infinite;white-space:nowrap}
#talent-hint:hover{background:rgba(45,28,70,.95)}
@keyframes talentpulse{0%,100%{box-shadow:0 0 8px rgba(232,195,104,.25)}50%{box-shadow:0 0 22px rgba(232,195,104,.65)}}

.log-ver{font-size:15px;font-weight:700;color:var(--gold);margin:14px 0 6px;border-bottom:1px solid #241938;padding-bottom:4px}
.log-ver:first-of-type{margin-top:4px}
.log-date{font-size:11px;color:var(--dim);font-weight:400;float:right}
.log-list{list-style:none;font-size:12.5px;color:#b9aed6;line-height:1.7}
.log-list li{padding-left:4px;margin-bottom:3px}
.log-list b{color:#e8dcff}

/* ============ PANELE WSPÓLNE ============ */
.panel{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);background:linear-gradient(180deg,#151024 0%,#0e0918 100%);
  border:1px solid var(--border);border-radius:14px;padding:20px 24px;z-index:130;display:none;
  box-shadow:0 20px 80px rgba(0,0,0,.8),0 0 0 100vmax rgba(4,2,10,.55);max-height:88vh;overflow-y:auto}
.panel h3{color:#e8dcff;font-size:19px;letter-spacing:2px;margin-bottom:4px}
.panel .p-sub{color:var(--dim);font-size:12px;margin-bottom:14px}
.panel-close{position:absolute;top:12px;right:14px;background:none;border:none;color:var(--dim);font-size:20px;padding:2px 8px}
.panel-close:hover{color:#fff;transform:none}
.panel::-webkit-scrollbar{width:8px}
.panel::-webkit-scrollbar-thumb{background:#3a2a5a;border-radius:4px}

/* ============ EKWIPUNEK ============ */
#inventory-panel{width:820px;max-width:94vw}
.inv-layout{display:flex;gap:18px}
.inv-left{width:250px;flex-shrink:0;min-width:0}
.inv-right{flex:1;min-width:0}
.equip-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px;margin-bottom:12px}
.equip-slot{position:relative;height:58px;background:#0d0918;border:1px dashed #3a2a5a;border-radius:8px;
  display:flex;align-items:center;gap:8px;padding:0 9px;cursor:pointer}
.equip-slot:hover{border-color:#8a5fff}
.equip-slot .es-icon{font-size:24px;width:30px;text-align:center}
.equip-slot .es-info{flex:1;min-width:0}
.equip-slot .es-name{font-size:11px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.equip-slot .es-type{font-size:9.5px;color:var(--dim)}
.char-stats{background:#0d0918;border:1px solid #241938;border-radius:8px;padding:10px 12px;font-size:12px;line-height:1.9;color:#b9aed6}
.char-stats b{color:#e8dcff;float:right}
.inv-tabs{display:flex;gap:6px;margin-bottom:10px}
.inv-tab{padding:6px 16px;font-size:12.5px;border-radius:6px 6px 0 0}
.inv-tab.active{background:#2d1f4d;border-color:#8a5fff;color:#fff}
.inv-grid{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:7px}
.inv-cell{position:relative;aspect-ratio:1;background:#0d0918;border:1px solid #241938;border-radius:8px;
  display:flex;align-items:center;justify-content:center;font-size:24px;cursor:pointer}
.inv-cell:hover{border-color:#8a5fff;background:#161028}
.inv-cell .ic-qty{position:absolute;bottom:1px;right:4px;font-size:10px;color:#fff;font-weight:700;text-shadow:0 1px 2px #000}
.inv-cell .ic-plus{position:absolute;top:1px;left:4px;font-size:9px;color:var(--gold);font-weight:700}
.inv-cell.r-common{border-color:#3a3a3a}.inv-cell.r-magic{border-color:#2a5090}.inv-cell.r-rare{border-color:#8a7020}
.inv-cell.r-epic{border-color:#6a2a90}.inv-cell.r-legend{border-color:#904a10;box-shadow:inset 0 0 10px rgba(255,140,46,.25)}
.inv-cell.r-set{border-color:#1f7a4a;box-shadow:inset 0 0 10px rgba(61,220,132,.22)}
.forge-box{background:#0d0918;border:1px solid #241938;border-radius:10px;padding:14px;margin-top:6px}
.forge-box .f-row{display:flex;align-items:center;gap:12px;margin-bottom:10px}
.forge-sel{width:64px;height:64px;background:#080512;border:1px dashed #4a3a7a;border-radius:10px;
  display:flex;align-items:center;justify-content:center;font-size:30px}
.forge-info{flex:1;font-size:12.5px;line-height:1.7;color:#b9aed6}
.forge-actions{display:flex;gap:8px;flex-wrap:wrap}
.forge-actions button{font-size:12.5px;padding:7px 14px}
.inv-hint{font-size:11px;color:var(--dim);margin-top:10px;line-height:1.6}

/* ============ TOOLTIPY ============ */
#tooltip,#item-tooltip{position:fixed;z-index:200;background:rgba(12,7,22,.96);border:1px solid var(--border);
  border-radius:9px;padding:10px 13px;font-size:12.5px;max-width:290px;display:none;pointer-events:none;line-height:1.55;
  box-shadow:0 8px 30px rgba(0,0,0,.7)}
.tt-name{font-size:14px;font-weight:700;margin-bottom:2px}
.tt-type{font-size:10.5px;color:var(--dim);margin-bottom:7px}
.tt-stat{color:#9ad0ff}
.tt-affix{color:#7ae08a}
.tt-legend{color:var(--r-legend);font-style:italic;margin-top:5px}
.tt-flavor{color:#7a6f96;font-style:italic;margin-top:6px;font-size:11.5px}
.tt-actions{margin-top:7px;color:var(--dim);font-size:11px;border-top:1px solid #241938;padding-top:6px}
.rc{font-weight:700}
.rc.common{color:var(--r-common)}.rc.magic{color:var(--r-magic)}.rc.rare{color:var(--r-rare)}
.rc.epic{color:var(--r-epic)}.rc.legend{color:var(--r-legend)}.rc.set{color:var(--r-set)}
.tt-set{margin-top:6px;border-top:1px solid #1c3a28;padding-top:5px}
.tt-set-name{color:var(--r-set);font-weight:700;font-size:12px}
.tt-set-b{color:#5a6f60;font-size:11.5px;margin-top:2px}
.tt-set-b.on{color:var(--r-set)}

/* ============ SKLEP ============ */
#shop-panel{width:700px;max-width:92vw}
.shop-gold{font-size:14px;color:var(--gold);margin-bottom:12px}
.shop-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}
.shop-item{display:flex;align-items:center;gap:10px;background:#0d0918;border:1px solid #241938;border-radius:9px;
  padding:9px 11px;cursor:pointer}
.shop-item:hover{border-color:#8a5fff;background:#161028}
.shop-item.sold{opacity:.35;pointer-events:none}
.shop-item .si-icon{font-size:26px;width:34px;text-align:center}
.shop-item .si-body{flex:1;min-width:0}
.shop-item .si-name{font-size:12.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.shop-item .si-desc{font-size:10.5px;color:var(--dim);margin-top:1px}
.shop-item .si-price{font-size:13px;color:var(--gold);font-weight:700;white-space:nowrap}
.shop-sell-hint{margin-top:12px;font-size:11.5px;color:var(--dim);line-height:1.6}
.shop-sub{margin:14px 0 8px;font-size:13px;color:#b9aed6;letter-spacing:1px}
.shop-biome-line{color:#6a5f88;font-size:11.5px;font-style:italic;margin:-8px 0 10px}
.shop-rep{margin-bottom:12px}
.shop-rep .rep-head{display:flex;justify-content:space-between;font-size:11.5px;color:#b9aed6;margin-bottom:4px;gap:10px}
.shop-rep .rep-next{color:var(--dim)}
.shop-rep .rep-bar{height:5px;background:#0a0714;border:1px solid #2a1d45;border-radius:3px;overflow:hidden}
.shop-rep .rep-bar i{display:block;height:100%;background:linear-gradient(90deg,#8a5fff,#e8c368);transition:width .3s}
.shop-item.under{border-color:#8a2a4a;background:linear-gradient(180deg,#1e0a16 0%,#120a12 100%);
  box-shadow:inset 0 0 18px rgba(255,90,140,.12)}
.shop-item.under:hover{border-color:#ff5a8a}
.shop-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.shop-actions button{font-size:12px;padding:7px 14px}
.shop-actions button:disabled{opacity:.38;cursor:default;transform:none}
.si-price.cant{color:#a05a5a}
.shop-item.featured{border-color:#8a6a20;background:linear-gradient(180deg,#1e1704 0%,#14100a 100%);
  box-shadow:inset 0 0 18px rgba(232,195,104,.12);position:relative;overflow:hidden}
.shop-item.featured:hover{border-color:var(--gold)}
.si-badge{position:absolute;top:5px;right:-24px;background:var(--gold);color:#1a1005;font-size:8.5px;
  font-weight:800;padding:2px 26px;transform:rotate(38deg);letter-spacing:1px}

/* hazard */
.gamble-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.gamble-box{background:linear-gradient(180deg,#1a1030 0%,#0e0a1c 100%);border:1px solid #4a3a7a;
  border-radius:10px;padding:16px 8px 12px;text-align:center;cursor:pointer;transition:all .16s}
.gamble-box:hover{border-color:#a07aff;transform:translateY(-3px);box-shadow:0 8px 24px rgba(130,80,255,.3)}
.gb-icon{font-size:38px;filter:drop-shadow(0 0 10px rgba(160,100,255,.5))}
.gb-name{font-size:12px;color:#d8cef0;margin-top:6px}
.gb-price{font-size:13px;color:var(--gold);font-weight:700;margin-top:6px}
.gb-price.cant{color:#a05a5a}

#gamble-reveal{position:fixed;top:26%;left:50%;transform:translate(-50%,-50%) scale(.86);z-index:210;
  text-align:center;opacity:0;pointer-events:none;transition:all .4s ease-out}
#gamble-reveal.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
#gamble-reveal .gr-icon{font-size:64px;filter:drop-shadow(0 0 22px rgba(255,220,120,.7))}
#gamble-reveal .gr-name{font-size:24px;font-weight:800;text-shadow:0 2px 6px #000;margin-top:4px}
#gamble-reveal .gr-rar{font-size:13px;letter-spacing:3px;margin-top:2px;opacity:.85}

/* ============ META / SANKTUARIUM ============ */
#meta-panel{width:760px;max-width:94vw}
.meta-essence{font-size:17px;color:#b98aff;margin-bottom:14px;text-shadow:0 0 12px #7a3aff}
.meta-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.meta-up{display:flex;gap:11px;align-items:center;background:#0d0918;border:1px solid #241938;border-radius:10px;padding:11px 13px}
.meta-up .mu-icon{font-size:28px;width:36px;text-align:center}
.meta-up .mu-body{flex:1;min-width:0}
.meta-up .mu-name{font-size:13.5px;font-weight:700;color:#e8dcff}
.meta-up .mu-desc{font-size:11px;color:#9a8bbf;margin-top:2px;line-height:1.4}
.meta-up .mu-rank{font-size:10.5px;color:var(--gold);margin-top:3px}
.meta-up button{font-size:12px;padding:7px 12px;white-space:nowrap}
.meta-up button:disabled{opacity:.38;cursor:default;transform:none}
.beast-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.beast-card{background:#0d0918;border:1px solid #241938;border-radius:9px;padding:9px;display:flex;gap:9px;align-items:center}
.beast-card.unknown{opacity:.4}
.beast-card .b-icon{font-size:24px}
.beast-card .b-name{font-size:11.5px;font-weight:600}
.beast-card .b-kills{font-size:10px;color:var(--dim)}
.ach-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.ach-card{display:flex;gap:11px;align-items:center;background:#0d0918;border:1px solid #241938;border-radius:9px;padding:10px 12px}
.ach-card.locked{opacity:.38}
.ach-card .a-icon{font-size:24px}
.ach-card .a-name{font-size:12.5px;font-weight:700}
.ach-card .a-desc{font-size:10.5px;color:var(--dim);margin-top:1px}

/* ============ TABLICA CHWAŁY ============ */
#lb-submit, #lb-submit-win{margin:6px 0 14px}
.lb-form{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;align-items:center}
.lb-form input{background:#0d0918;border:1px solid var(--border);border-radius:6px;color:var(--txt);
  padding:9px 14px;font-size:14px;font-family:inherit;width:190px;text-align:center}
.lb-form input:focus{outline:none;border-color:#8a5fff}
.lb-form button{padding:9px 18px;font-size:13.5px}
.lb-status{margin-top:8px;font-size:12.5px;min-height:16px}
.lb-note{margin-top:6px;font-size:11px;color:var(--dim)}
.lb-done{font-size:14px;color:#7ae08a;line-height:1.9}
.lb-done button{margin-left:10px;padding:6px 14px;font-size:12.5px}
.lb-filters{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.lb-filters select{background:#0d0918;border:1px solid var(--border);border-radius:6px;
  color:var(--txt);padding:6px 10px;font-size:12px;font-family:inherit}
.lb-list{display:flex;flex-direction:column;gap:5px;margin-top:4px;min-width:520px}
.lb-row{display:flex;align-items:center;gap:12px;background:#0d0918;border:1px solid #241938;
  border-radius:8px;padding:8px 12px}
.lb-row.top{border-color:#5a3fa0;background:linear-gradient(90deg,#1a1030,#0d0918)}
.lb-pos{width:34px;font-size:14px;font-weight:700;color:var(--gold);text-align:center;flex-shrink:0}
.lb-nick{width:140px;font-size:13.5px;font-weight:600;color:#e8dcff;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis;flex-shrink:0}
.lb-meta{flex:1;min-width:0;font-size:12.5px}
.lb-dim{display:block;font-size:10.5px;color:var(--dim)}
.lb-main{font-size:14px;font-weight:700;color:#c9b0ff;white-space:nowrap}

/* ============ USTAWIENIA ============ */
#settings-panel{width:420px}
.set-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;font-size:13.5px}
.set-row input[type=range]{width:150px;accent-color:#8a5fff}
.set-buttons{display:flex;flex-direction:column;gap:8px;margin-top:16px}
.set-buttons button{width:100%}
.save-slots{display:flex;flex-direction:column;gap:7px;margin-top:8px}
.save-slot{display:flex;justify-content:space-between;align-items:center;background:#0d0918;
  border:1px solid #241938;border-radius:8px;padding:9px 12px;font-size:12px}
.save-slot .ss-info{color:#9a8bbf;line-height:1.4}
.save-slot .ss-info b{color:#e8dcff}
.save-slot .ss-btns{display:flex;gap:6px}
.save-slot button{font-size:11px;padding:5px 10px}

#save-toast{position:fixed;bottom:24px;right:24px;background:rgba(20,12,38,.95);border:1px solid #5a3fa0;
  border-radius:9px;padding:10px 18px;font-size:13px;color:#d8cef0;z-index:150;opacity:0;transition:opacity .3s;pointer-events:none}
#save-toast.show{opacity:1}

/* ============ PRZEJŚCIE PIĘTRA ============ */
#floor-transition{position:fixed;inset:0;z-index:80;background:#000;display:none;flex-direction:column;
  align-items:center;justify-content:center;text-align:center}
#floor-transition h1{font-size:40px;color:#e8dcff;letter-spacing:8px;text-shadow:0 0 30px #7a3aff}
#floor-transition .floor-sub{color:#8a7fa8;font-size:15px;margin-top:12px;letter-spacing:2px}
#floor-transition .floor-stats{color:#6a5f88;font-size:13.5px;margin-top:18px;letter-spacing:1px}

#challenge-banner{position:absolute;top:14px;left:50%;transform:translateX(-50%) translateY(-12px);
  background:linear-gradient(180deg,#2a1145,#170b28);border:1px solid #8a4aff;border-radius:20px;
  padding:6px 22px;font-size:13.5px;color:#d8c0ff;letter-spacing:2px;opacity:0;
  transition:all .3s;text-shadow:0 0 10px #7a3aff}
#challenge-banner.show{opacity:1;transform:translateX(-50%) translateY(0)}
#challenge-banner b{color:#fff}

#boss-intro{position:fixed;top:30%;left:50%;transform:translate(-50%,-50%) scale(.92);z-index:60;
  text-align:center;opacity:0;pointer-events:none;transition:all .5s ease-out}
#boss-intro.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
#boss-intro .bi-icon{font-size:60px;filter:drop-shadow(0 0 26px #a02a1a)}
#boss-intro .bi-name{font-size:36px;font-weight:900;letter-spacing:7px;color:#ffb0a0;
  text-shadow:0 0 30px #a02a1a,0 2px 0 #000;margin-top:4px}
#boss-intro .bi-taunt{margin-top:8px;font-size:15px;color:#c9a0a0;font-style:italic;text-shadow:0 1px 3px #000}

/* ============ DUŻA MAPA ============ */
#map-overlay{position:fixed;inset:0;z-index:70;background:rgba(4,2,9,.92);display:none;
  align-items:center;justify-content:center;flex-direction:column}
#bigmap{border:1px solid var(--border);border-radius:10px;background:#0a0714}
#map-overlay .map-hint{margin-top:12px;color:var(--dim);font-size:12.5px}

/* ============ STEROWANIE DOTYKOWE ============ */
canvas#gameCanvas{touch-action:none}
#touch-controls{position:absolute;inset:0;pointer-events:none;display:none;z-index:25;
  -webkit-touch-callout:none}
body.touch #touch-controls{display:block}
body.touch #spell-bar,body.touch #quickslots,body.touch #interact-hint{display:none!important}
#tc-joyzone{position:absolute;left:0;top:0;bottom:0;width:45%;pointer-events:auto;touch-action:none}
#tc-joy{position:absolute;width:116px;height:116px;border:2px solid rgba(150,120,230,.45);
  border-radius:50%;background:rgba(20,12,40,.35);display:none;transform:translate(-50%,-50%);pointer-events:none}
#tc-knob{position:absolute;left:50%;top:50%;width:50px;height:50px;border-radius:50%;
  background:rgba(170,140,255,.55);transform:translate(-50%,-50%)}
.tc-btn{pointer-events:auto;touch-action:none;width:52px;height:52px;border-radius:50%;
  background:rgba(20,12,40,.78);border:1.5px solid #4a3a7a;display:flex;align-items:center;
  justify-content:center;font-size:22px;position:relative;user-select:none;flex-shrink:0}
.tc-btn:active{background:rgba(90,55,160,.85);border-color:#8a5fff}
#tc-attack{width:86px;height:86px;font-size:38px;border-color:#8a5fff;
  box-shadow:0 0 16px rgba(120,70,220,.4)}
#tc-dash{border-color:#2a9adf}
.tc-skill{width:48px;height:48px;font-size:20px}
.tc-skill.tc-ult{border-color:#8a5a20}
.tc-btn .cd{position:absolute;inset:0;border-radius:50%;background:rgba(5,2,12,.78);
  display:none;align-items:center;justify-content:center;font-size:15px;color:#fff;font-weight:700}
.tc-btn.nomana{filter:grayscale(.8) brightness(.55)}
.tc-n{position:absolute;bottom:0;right:2px;font-size:11px;color:#fff;font-weight:700;text-shadow:0 1px 2px #000}
.tc-cluster{position:absolute;right:calc(10px + env(safe-area-inset-right,0px));
  bottom:calc(14px + env(safe-area-inset-bottom,0px));display:flex;flex-direction:column;
  align-items:flex-end;gap:9px;pointer-events:none}
body.touch .shop-sell-hint,body.touch .inv-hint{display:none}
.tc-row{display:flex;gap:9px;align-items:flex-end;pointer-events:none}
#tc-interact{position:absolute;right:calc(16px + env(safe-area-inset-right,0px));bottom:220px;
  width:62px;height:62px;font-size:26px;
  border-color:var(--gold);display:none;box-shadow:0 0 14px rgba(232,195,104,.4)}
.tc-top{position:absolute;top:12px;left:50%;transform:translateX(-50%);display:flex;gap:10px}
.tc-top .tc-btn{width:44px;height:44px;font-size:18px}

/* ============ MAŁE EKRANY (szerokość LUB urządzenie dotykowe) ============ */
@media (max-width:900px), (pointer:coarse){
  #title-screen h1{font-size:28px;letter-spacing:5px}
  .title-ii{font-size:42px}
  #title-screen .subtitle{font-size:12px;letter-spacing:8px}
  .title-lore{font-size:11px;margin:10px 14px 4px;line-height:1.5}
  .title-keys{display:none}
  .class-cards{gap:7px;max-width:97vw}
  .class-card{width:102px;padding:9px 5px 7px}
  .cc-icon{font-size:26px}
  .cc-name{font-size:12px}
  .cc-desc{display:none}
  .cc-stats{font-size:9px}
  .cc-new{font-size:8px;right:-30px;top:4px}
  .diff-row{margin-top:10px}
  .diff-btn{padding:6px 10px;font-size:11.5px}
  .diff-desc{font-size:10.5px;padding:0 12px}
  .title-buttons{margin-top:12px;gap:6px}
  .title-buttons button{padding:7px 10px;font-size:11.5px}
  .title-crosslink{margin-top:10px;font-size:11px;padding:5px 14px}
  .title-meta-line{margin-top:8px;font-size:10.5px}
  #hud{transform:scale(.78);transform-origin:top left}
  #minimap{transform:scale(.62);transform-origin:top right}
  #minimap-label{display:none}
  /* pod panelem HUD (kończy się ~176px po przeskalowaniu), nie na nim */
  #buff-bar{top:186px;left:12px;max-width:60vw}
  /* minimapa jest przeskalowana do .62, więc kończy się ok. 118px */
  #awakening-mark{top:130px;right:12px;width:auto;max-width:44vw;font-size:10px}
  #message-log{width:52vw;font-size:10.5px;bottom:190px;max-height:100px}
  #boss-hp{width:72vw;top:64px}
  #boss-intro .bi-name{font-size:24px;letter-spacing:3px}
  #boss-intro .bi-icon{font-size:44px}
  .end-screen h1{font-size:34px!important}
  #level-up-screen h2{font-size:26px}
  .talent-card{width:150px;padding:12px 8px}
  .talent-card .t-icon{font-size:26px}
  .talent-card .t-desc{font-size:10.5px}
  .panel{padding:14px 12px;max-height:92vh;max-width:96vw!important}
  .inv-layout{flex-direction:column}
  .inv-left{width:100%}
  .inv-grid{grid-template-columns:repeat(6,minmax(0,1fr))}
  .shop-grid{grid-template-columns:minmax(0,1fr)}
  .gamble-grid{grid-template-columns:minmax(0,1fr);gap:7px}
  .gamble-box{display:flex;align-items:center;gap:10px;padding:9px 12px;text-align:left}
  .gb-icon{font-size:26px}
  .gb-name{flex:1;margin-top:0}
  .gb-price{margin-top:0}
  #gamble-reveal .gr-icon{font-size:48px}
  #gamble-reveal .gr-name{font-size:19px}
  .meta-grid{grid-template-columns:minmax(0,1fr)}
  .ach-grid{grid-template-columns:minmax(0,1fr)}
}

/* telefon w poziomie: mało wysokości — ściśnij ekran tytułowy */
@media (max-height:620px){
  .title-inner{padding:12px 10px}
  #title-screen h1{font-size:24px;letter-spacing:4px}
  .title-ii{font-size:36px}
  #title-screen .subtitle{font-size:11px;letter-spacing:6px;margin-top:2px}
  .title-lore{display:none}
  .title-keys{display:none}
  .class-cards{gap:6px}
  .class-card{width:98px;padding:7px 4px 6px}
  .cc-icon{font-size:22px}
  .cc-name{font-size:11.5px}
  .cc-desc{display:none}
  .cc-stats{font-size:9px}
  .diff-row{margin-top:8px}
  .diff-desc{font-size:10px;margin-top:5px}
  .title-buttons{margin-top:10px;gap:6px}
  .title-buttons button{padding:6px 10px;font-size:11.5px}
  .title-crosslink{margin-top:8px;font-size:10.5px;padding:4px 12px}
  .title-meta-line{margin-top:6px;font-size:10px}
  .panel{max-height:96vh}
}

/* ============ SPRITE'Y W PANELACH ============ */
/* Ikona wycięta z arkusza jako tło. `pixelated` jest tu obowiązkowe —
   bez tego przeglądarka rozmywa 16-pikselowe ikony przy powiększaniu. */
.spr{display:inline-block;vertical-align:middle;background-repeat:no-repeat;
  image-rendering:pixelated;image-rendering:crisp-edges}