@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&family=Inter:wght@400;600;700&display=swap');
:root {
  --bg-dark: #151010; --bg-medium: #1e1812; --bg-panel: #2a2218; --bg-panel-light: #3d3224;
  --gold: #d4a044; --gold-bright: #f0c868; --blood: #8c1c1c; --blood-bright: #c42a2a;
  --bronze: #b07840; --bronze-bright: #d49a58; --sand: #c8b494; --sand-dark: #8a7a60;
  --text: #ece0cc; --text-dim: #a09480; --text-disabled: #5c5040;
  --hp-green: #5a9044; --mana-blue: #4a6a8c; --xp-purple: #7a4a90;
  --common: #908070; --uncommon: #5a9a44; --rare: #4488cc; --epic: #9a44bb; --legendary: #d4aa22; --cursed: #cc2222;
  --font-pixel: 'Press Start 2P', monospace; --font-ui: 'Inter', sans-serif;
  --radius: 3px;
}
* { margin:0; padding:0; box-sizing:border-box; }
html { overflow-y: scroll; scrollbar-gutter: stable; }
body { background:var(--bg-dark); color:var(--text); font-family:var(--font-ui); min-height:100vh; }
h1,h2,h3 { font-family:var(--font-pixel); color:var(--gold); }
h1 { font-size:1.2rem; } h2 { font-size:0.85rem; } h3 { font-size:0.7rem; }
a { color:var(--gold); text-decoration:none; }
button,.btn { background:var(--bg-panel-light); color:var(--gold); border:1px solid var(--gold); padding:8px 16px; border-radius:var(--radius); cursor:pointer; font-family:var(--font-pixel); font-size:0.6rem; transition:all .2s; }
button:hover,.btn:hover { background:var(--gold); color:var(--bg-dark); }
button.primary { background:var(--blood); border-color:var(--blood-bright); color:#fff; }
button.primary:hover { background:var(--blood-bright); }
button:disabled { opacity:.4; cursor:not-allowed; }
input,select { background:var(--bg-dark); color:var(--text); border:1px solid var(--bg-panel-light); padding:8px 12px; border-radius:var(--radius); font-family:var(--font-ui); font-size:.9rem; width:100%; }
input:focus,select:focus { outline:none; border-color:var(--gold); }
.container { max-width:900px; margin:0 auto; padding:12px; }
.panel { background:var(--bg-panel); border:1px solid var(--bg-panel-light); border-radius:var(--radius); padding:16px; margin-bottom:12px; }
.panel-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; padding-bottom:8px; border-bottom:1px solid var(--bg-panel-light); }
.grid { display:grid; gap:8px; } .grid-2 { grid-template-columns:1fr 1fr; } .grid-3 { grid-template-columns:1fr 1fr 1fr; }
.stat-bar { display:flex; align-items:center; gap:8px; margin:4px 0; font-size:.85rem; }
.stat-bar .label { min-width:40px; font-weight:700; color:var(--gold); }
.stat-bar .bar { flex:1; height:10px; background:var(--bg-dark); border-radius:2px; overflow:hidden; }
.stat-bar .bar .fill { height:100%; border-radius:2px; transition:width .3s; }
.stat-bar .val { min-width:30px; text-align:right; font-size:.8rem; }
.fill-str { background:var(--blood-bright); } .fill-dex { background:var(--gold); } .fill-agi { background:var(--hp-green); }
.fill-con { background:#8b6914; } .fill-int { background:var(--mana-blue); } .fill-cha { background:var(--xp-purple); }
.fill-hp { background:var(--hp-green); } .fill-xp { background:var(--xp-purple); } .fill-gold { background:var(--gold); }
.class-card { text-align:center; padding:16px; cursor:pointer; transition:all .2s; border:2px solid transparent; }
.class-card:hover,.class-card.selected { border-color:var(--gold); background:var(--bg-panel-light); }
.class-card h3 { margin:8px 0 4px; } .class-card p { font-size:.75rem; color:var(--text-dim); }
.class-icon { font-size:2.5rem; }
.item-row { display:flex; align-items:center; gap:8px; padding:8px; border-bottom:1px solid var(--bg-dark); cursor:pointer; }
.item-row:hover { background:var(--bg-panel-light); }
.item-row .rarity-dot { width:8px; height:8px; border-radius:50%; }
.item-row .details { flex:1; } .item-row .details .name { font-weight:600; } .item-row .details .sub { font-size:.75rem; color:var(--text-dim); }
.item-row .actions { display:flex; gap:4px; }
.item-row .actions button { font-size:.5rem; padding:4px 8px; }
.battle-log { max-height:300px; overflow-y:auto; font-size:.75rem; }
.battle-log .turn { padding:4px 0; border-bottom:1px solid var(--bg-dark); }
.battle-log .crit { color:var(--gold-bright); font-weight:700; }
.battle-log .dodge { color:var(--hp-green); font-style:italic; }
.battle-log .block { color:var(--mana-blue); }
.nav-bar { display:flex; justify-content:center; gap:2px; padding:8px; background:var(--bg-medium); position:sticky; top:36px; z-index:100; border-bottom:1px solid var(--bg-panel-light); flex-wrap:wrap; }
.nav-bar button { font-size:.5rem; padding:6px 10px; border:none; background:transparent; color:var(--text-dim); }
.nav-bar button.active { color:var(--gold); border-bottom:2px solid var(--gold); }
.nav-bar button:hover { color:var(--gold-bright); background:transparent; }
.top-bar { display:flex; justify-content:space-between; align-items:center; padding:8px 12px; background:var(--bg-medium); border-bottom:1px solid var(--bg-panel-light); font-size:.75rem; position:sticky; top:0; z-index:101; }
.top-bar .gold { color:var(--gold); } .top-bar .gems { color:var(--mana-blue); }
/* Desktop: side spans get EQUAL flex so the middle (gold/gems/energy) cluster centers on the PAGE,
   not merely between an uneven nick and button cluster (Erak 19.07: "przesuniete w lewo") */
@media(min-width:701px) {
  .top-bar > span:first-child { flex:1 1 0; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .top-bar > span:last-child { flex:1 1 0; display:flex; justify-content:flex-end; align-items:center; }
}
.opponent-card { padding:12px; margin-bottom:8px; display:flex; justify-content:space-between; align-items:center; }
.opponent-card .info { flex:1; } .opponent-card .info .name { font-weight:700; font-size:.9rem; }
.opponent-card .info .meta { font-size:.75rem; color:var(--text-dim); }
.result-panel { text-align:center; padding:24px; }
.result-panel.win { border-color:var(--hp-green); } .result-panel.lose { border-color:var(--blood); }
.result-panel h2 { font-size:1.1rem; margin-bottom:12px; }
.result-panel .rewards { font-size:.85rem; color:var(--gold); margin:8px 0; }
.toast { position:fixed; top:20px; right:20px; background:var(--bg-panel); border:1px solid var(--gold); padding:12px 20px; border-radius:var(--radius); z-index:999; animation:fadeIn .3s; }
@keyframes fadeIn { from{opacity:0;transform:translateY(-10px)} to{opacity:1;transform:translateY(0)} }
.hidden { display:none!important; }
@media(max-width:600px) { .grid-2{grid-template-columns:1fr;} .grid-3{grid-template-columns:1fr 1fr;} h1{font-size:.9rem;} }
@media(max-width:900px) { [style*="grid-template-columns:1fr 1fr 1fr"] { grid-template-columns:1fr !important; } }

/* === FULL PAGE BACKGROUND === */
body { background-color:var(--bg-dark); background-size:cover; background-position:center; background-repeat:no-repeat; background-attachment:fixed; }
#bg-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(18,14,10,0.74); z-index:0; pointer-events:none; }
#auth-screen, #game-screen { position:relative; z-index:2; }
.top-bar { background:rgba(22,18,12,0.94); backdrop-filter:blur(8px); border-bottom:1px solid rgba(176,120,64,0.2); }
.nav-bar { background:rgba(22,18,12,0.94); backdrop-filter:blur(8px); border-bottom:1px solid rgba(176,120,64,0.15); z-index:100; }
.panel { background:rgba(34,28,18,0.92); backdrop-filter:blur(4px); border:1px solid rgba(176,120,64,0.12); box-shadow:0 2px 12px rgba(0,0,0,0.4); }

/* === POLISHED UI === */
.panel { transition: border-color 0.2s; }
.panel:hover { border-color:rgba(176,120,64,0.25); }
.panel-header { border-bottom:1px solid rgba(176,120,64,0.15); }
.panel-header h2 { font-size:0.8rem; letter-spacing:1px; }
h3 { letter-spacing:0.5px; }
.stat-bar { padding:3px 0; }
.stat-bar .bar { height:14px; border-radius:3px; border:1px solid rgba(255,255,255,0.05); }
.stat-bar .fill { border-radius:2px; box-shadow:inset 0 1px 0 rgba(255,255,255,0.15); }
.stat-bar .label { font-size:.82rem; min-width:100px; }
.stat-bar .val { font-size:.85rem; font-weight:600; color:var(--gold); min-width:35px; }
button,.btn { letter-spacing:0.5px; text-transform:uppercase; transition:all .2s; border-radius:3px; }
button:hover,.btn:hover { transform:translateY(-1px); box-shadow:0 2px 8px rgba(176,120,64,0.3); }
button.primary { background:linear-gradient(180deg,#8c2020,#5c1010); border-color:#a03030; color:#ece0cc; text-shadow:0 1px 2px rgba(0,0,0,0.5); }
button.primary:hover { background:linear-gradient(180deg,#a82828,#7c1818); border-color:#c43030; }
.item-row { border-radius:4px; transition:background .2s; border-bottom:1px solid rgba(176,120,64,0.08); }
.opponent-card { border-radius:4px; transition:border-color .2s; }
.opponent-card:hover { border-color:rgba(176,120,64,0.3); }
.top-bar { font-size:.8rem; padding:10px 16px; }
.nav-bar button { font-size:.55rem; padding:8px 12px; border-radius:0; border:none; transition:all .15s; letter-spacing:0.5px; }
.nav-bar button.active { color:var(--gold-bright); border-bottom:2px solid var(--gold); background:rgba(176,120,64,0.08); }
.nav-bar button:hover { color:var(--gold); background:rgba(176,120,64,0.05); transform:none; box-shadow:none; }
input,select { background:rgba(18,14,10,0.8); border:1px solid rgba(176,120,64,0.2); border-radius:3px; transition:border-color .2s; }
input:focus,select:focus { border-color:var(--gold); box-shadow:0 0 6px rgba(176,120,64,0.15); }
.toast { background:rgba(34,28,18,0.95); border:1px solid var(--gold); backdrop-filter:blur(8px); box-shadow:0 4px 16px rgba(0,0,0,0.5); }
.result-panel.win { border:1px solid var(--hp-green); box-shadow:0 0 20px rgba(74,140,74,0.15); }
.result-panel.lose { border:1px solid var(--blood); box-shadow:0 0 20px rgba(140,32,32,0.15); }
.class-card { border-radius:6px; transition:all .25s; }
.class-card:hover,.class-card.selected { box-shadow:0 0 15px rgba(176,120,64,0.2); }
.battle-log { background:rgba(18,14,10,0.5); border-radius:4px; padding:8px; margin-top:8px; }
.battle-log .turn { padding:5px 4px; border-bottom:1px solid rgba(255,255,255,0.04); font-size:.78rem; }
::-webkit-scrollbar { width:6px; } ::-webkit-scrollbar-track { background:rgba(18,14,10,0.5); } ::-webkit-scrollbar-thumb { background:rgba(176,120,64,0.3); border-radius:3px; }

/* === ROMAN STONE ACCENTS === */
.panel { border-top:2px solid rgba(176,120,64,0.18); }
.panel-header h2 { text-shadow:0 1px 3px rgba(0,0,0,0.5); }
.top-bar { border-top:2px solid var(--bronze); background:linear-gradient(180deg,rgba(30,24,16,0.96),rgba(22,18,12,0.94)); }
.nav-bar { border-top:1px solid rgba(176,120,64,0.1); }
h1 { text-shadow:0 2px 4px rgba(0,0,0,0.6); }
.class-card { background:rgba(34,28,18,0.6); border:1px solid rgba(176,120,64,0.1); }
.class-card:hover,.class-card.selected { background:rgba(44,36,24,0.8); border-color:var(--bronze); }
.result-panel { background:rgba(28,22,14,0.95); }
button,.btn { border-color:var(--bronze); color:var(--sand); }
button:hover,.btn:hover { background:var(--bronze); color:#151010; box-shadow:0 2px 8px rgba(176,120,64,0.25); }
.stat-bar .bar { background:rgba(18,14,10,0.6); border:1px solid rgba(176,120,64,0.08); }
.opponent-card { background:rgba(34,28,18,0.5); border:1px solid rgba(176,120,64,0.1); }
input,select { background:rgba(18,14,10,0.9); border:1px solid rgba(176,120,64,0.18); color:var(--text); }

/* === EQUIPMENT TOOLTIP === */
.equip-slot { position:relative; transition:border-color .2s, transform .15s; }
.equip-slot.equipped:hover { transform:translateY(-2px); border-color:var(--gold) !important; z-index:10; }

/* === GAME MODAL === */
.game-modal-overlay { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(10,8,6,0.85); z-index:9999; display:flex; align-items:center; justify-content:center; animation:modalFadeIn .2s; }
.game-modal { background:linear-gradient(180deg,#2a2218,#1e1812); border:2px solid var(--bronze); border-radius:6px; padding:0; min-width:320px; max-width:480px; width:90%; box-shadow:0 8px 40px rgba(0,0,0,0.8),0 0 20px rgba(176,120,64,0.1); animation:modalSlideIn .25s; max-height:86vh; display:flex; flex-direction:column; }
.game-modal-header { padding:14px 18px; border-bottom:1px solid rgba(176,120,64,0.2); background:rgba(176,120,64,0.06); display:flex; align-items:center; gap:10px; flex-shrink:0; }
.game-modal-header .modal-icon { font-size:1.5rem; }
.game-modal-header h3 { font-size:.75rem; color:var(--gold); letter-spacing:1px; }
.game-modal-body { padding:18px; color:var(--text); font-size:.88rem; line-height:1.6; overflow-y:auto; flex:1 1 auto; }
.game-modal-footer { padding:12px 18px; border-top:1px solid rgba(176,120,64,0.12); display:flex; gap:8px; justify-content:flex-end; flex-shrink:0; }
.game-modal-footer button { min-width:100px; }
.game-modal-footer .btn-cancel { background:transparent; border:1px solid var(--text-disabled); color:var(--text-dim); }
.game-modal-footer .btn-cancel:hover { background:rgba(176,120,64,0.1); border-color:var(--bronze); color:var(--text); }
@keyframes modalFadeIn { from{opacity:0} to{opacity:1} }
@keyframes modalSlideIn { from{opacity:0;transform:translateY(-20px) scale(0.95)} to{opacity:1;transform:translateY(0) scale(1)} }

/* === COSMETICS === */
/* gold-frame: puls byl 12->18px / 40->60% - roznica niemal niewidoczna (Erak 18.08).
   Teraz oddech 6->22px + druga warstwa 14->44px + delikatny blask wewnetrzny.
   Gracz placi za ten kosmetyk gemami - MA byc widac, ze zyje. */
/* SEDNO BUGA: nizej w pliku jest `.panel { animation:fadeInUp }` - ta sama specyficznosc,
   pozniejsza w zrodle, wiec CALKOWICIE nadpisywala goldPulse i ramka stala jak martwa.
   Selektor podbity do .panel.gold-frame + obie animacje na liscie (wjazd + puls). */
.gold-frame, .panel.gold-frame { border:2px solid var(--frame-color, var(--gold)) !important; box-shadow:0 0 6px color-mix(in srgb, var(--frame-color, var(--gold)) 35%, transparent),0 0 14px color-mix(in srgb, var(--frame-color, var(--gold)) 12%, transparent), inset 0 0 6px color-mix(in srgb, var(--frame-color, var(--gold)) 10%, transparent); animation:fadeInUp .22s ease-out, goldPulse 3s ease-in-out infinite; }
@keyframes goldPulse { 0%,100%{box-shadow:0 0 6px color-mix(in srgb, var(--frame-color, var(--gold)) 35%, transparent),0 0 14px color-mix(in srgb, var(--frame-color, var(--gold)) 12%, transparent), inset 0 0 6px color-mix(in srgb, var(--frame-color, var(--gold)) 10%, transparent)} 50%{box-shadow:0 0 22px color-mix(in srgb, var(--frame-color, var(--gold)) 85%, transparent),0 0 44px color-mix(in srgb, var(--frame-color, var(--gold)) 40%, transparent), inset 0 0 12px color-mix(in srgb, var(--frame-color, var(--gold)) 25%, transparent)} }
.glow-nick { color:var(--gold-bright) !important; text-shadow:0 0 8px rgba(240,200,104,0.6),0 0 16px rgba(240,200,104,0.3); animation:nickGlow 2s ease-in-out infinite; }
@keyframes nickGlow { 0%,100%{text-shadow:0 0 8px rgba(240,200,104,0.6),0 0 16px rgba(240,200,104,0.3)} 50%{text-shadow:0 0 14px rgba(240,200,104,0.8),0 0 28px rgba(240,200,104,0.4)} }
.vip-badge::after { content:'👑'; margin-left:4px; font-size:.7rem; }
/* vault-mini: emoji .55rem bylo nieczytelne (Erak 18.08) - teraz pixelowa strzalka 14px + wieksze pole kliku */
.vault-mini { background:rgba(212,160,68,0.12); border:1px solid rgba(212,160,68,0.35); color:var(--gold); border-radius:3px; font-size:.62rem; padding:2px 5px; margin-left:3px; cursor:pointer; vertical-align:middle; line-height:1; }
.vault-mini img { width:14px; height:14px; image-rendering:pixelated; vertical-align:middle; display:inline-block; }
.vault-mini:hover { background:rgba(212,160,68,0.3); }

/* === NAV ICONS === */
.nav-icon { width:22px; height:22px; image-rendering:pixelated; vertical-align:middle; margin-right:3px; margin-top:-2px; filter:brightness(0.7); }
.nav-bar button.active .nav-icon { filter:brightness(1.2) drop-shadow(0 0 3px rgba(240,200,104,0.5)); }
.nav-bar button:hover .nav-icon { filter:brightness(1); }

/* === NAV ICONS === */
.nav-icon { width:16px; height:16px; image-rendering:pixelated; vertical-align:middle; margin-right:2px; filter:brightness(0.8); }
.nav-bar button.active .nav-icon { filter:brightness(1.2) drop-shadow(0 0 3px rgba(240,200,104,0.4)); }
.nav-bar button:hover .nav-icon { filter:brightness(1.1); }
/* Emoji w nav (Codex) siedzialo na baseline tekstu i odstawalo od pixelowych ikon.
   .nav-emoji wciska emoji w te same metryki co .nav-icon: 16x16, middle, 2px odstepu. */
.nav-emoji { display:inline-block; width:16px; height:16px; line-height:16px; font-size:13px; text-align:center; vertical-align:middle; margin-right:2px; margin-top:-2px; }
/* Ikony top-baru (18.08): pixelowe zamiast emoji - 16px, zeby nie rozpychaly paska */
.tb-ico { width:16px; height:16px; image-rendering:pixelated; vertical-align:middle; margin-top:-2px; }

/* === INLINE PIXEL ICONS (ujednolicone 18.08.2026 - Erak: "zrownac i dac troszke wieksze") ===
   Byly tu DWIE zdublowane definicje .ico/.ico-sm (14/12px martwe, nadpisane przez 22/18px).
   Duplikat usuniety, rozmiary lekko podniesione i trzymane w jednym miejscu. */
.ico { width:22px; height:22px; image-rendering:pixelated; vertical-align:middle; margin-top:-2px; }
.ico-sm { width:20px; height:20px; image-rendering:pixelated; vertical-align:middle; margin-top:-1px; }
.ico-lg { width:28px; height:28px; image-rendering:pixelated; vertical-align:middle; margin-top:-2px; }
.stat-ico { width:20px; height:20px; image-rendering:pixelated; vertical-align:middle; }

/* === MOBILE OVERHAUL 2026-07-18 === */
@media(max-width:700px) {
  /* Nav: scrollowalny pasek zamiast zawijania na 3 linie */
  .nav-bar { flex-wrap:nowrap; overflow-x:auto; justify-content:flex-start; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding:6px 8px; }
  .nav-bar::-webkit-scrollbar { display:none; }
  .nav-bar button { font-size:.55rem; padding:9px 12px; flex:0 0 auto; min-height:38px; }
  .container { padding:8px; }
  /* Wieksze pola dotykowe */
  button { min-height:34px; }
  .item-row .actions { display:flex; flex-wrap:wrap; gap:4px; }
  .item-row .actions button { padding:6px 10px; font-size:.6rem; }
  /* Modale na pelna szerokosc */
  .game-modal { max-width:94vw !important; width:94vw; max-height:86vh; overflow-y:auto; }
  /* iOS: input >=16px nie zoomuje strony */
  input, select, textarea { font-size:16px !important; }
  /* Paperdoll i staty ciasniej */
  [style*="grid-template-columns:repeat(3,1fr)"] { grid-template-columns:repeat(2,1fr) !important; }
}
@media(max-width:420px) {
  .nav-bar button { font-size:.5rem; padding:8px 10px; }
  h1 { font-size:.8rem; }
}
@media(max-width:700px) {
  /* Top bar: emoji-chipy bez tekstu, luz zamiast scisku */
  .tb-label { display:none; }
  .top-bar { flex-wrap:wrap; gap:4px 8px; padding:6px 8px; font-size:.7rem; }
  .top-bar > span:last-child { display:flex; align-items:center; gap:6px; }
  .top-bar > span:last-child > *, .top-bar > span:last-child span[onclick] { margin-right:0 !important; }
  /* Mobile: top-bar wraps (variable height), so let it scroll and pin the nav to the very top instead - no overlap, no gap */
  .top-bar { position:static; }
  .nav-bar { top:0; }
}
@media(max-width:700px) {
  /* Pod-zakladki (gildia itp.): przewijalne, bez ucinania */
  .sub-tabs { flex-wrap:nowrap; overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none; padding-bottom:2px; }
  .sub-tabs::-webkit-scrollbar { display:none; }
  .sub-tabs button { flex:0 0 auto !important; min-width:64px; padding:8px 10px; min-height:36px; }
}

/* === ANIMATIONS v1 (18.07.2026) - transform/opacity only, GPU-friendly === */
@keyframes fadeInUp { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:none; } }
.panel { animation: fadeInUp .22s ease-out; }

/* Buttons: weight on hover/press */
button { transition: transform .08s ease, box-shadow .18s ease, filter .18s ease; }
button:hover:not(:disabled) { filter: brightness(1.12); box-shadow: 0 0 8px rgba(212,160,68,.35); }
button:active:not(:disabled) { transform: scale(.96); }
@keyframes ctaPulse { 0%,100% { box-shadow:0 0 0 rgba(212,160,68,0); } 50% { box-shadow:0 0 14px rgba(212,160,68,.55); } }
.pulse-cta { animation: ctaPulse 2.2s ease-in-out infinite; }

/* Progress bars glide instead of jumping */
div[id$="-bar"] { transition: width .45s ease; }

/* Scene banners fade in (pixel art: NO scaling, opacity only) */
img[src*="/img/scenes/"] { animation: sceneFade .35s ease-out; }
@keyframes sceneFade { from { opacity:0; } to { opacity:1; } }

/* Fight result: stamp-in title, defeat shake */
@keyframes stampIn { from { opacity:0; transform:scale(1.6); } 60% { transform:scale(.95); } to { opacity:1; transform:scale(1); } }
.result-panel h2 { animation: stampIn .35s ease-out; }
@keyframes shakeX { 0%,100% { transform:none; } 20% { transform:translateX(-6px); } 40% { transform:translateX(5px); } 60% { transform:translateX(-3px); } 80% { transform:translateX(2px); } }
.result-panel.lose { animation: fadeInUp .22s ease-out, shakeX .45s ease-out .1s; }

/* Toast: slide in from the right */
@keyframes toastIn { from { opacity:0; transform:translateX(40px); } to { opacity:1; transform:none; } }
.toast { animation: toastIn .28s ease-out; }

/* Starter offer shimmer */
.shimmer { position:relative; overflow:hidden; }
.shimmer::after { content:''; position:absolute; top:0; left:-60%; width:40%; height:100%; pointer-events:none;
  background:linear-gradient(100deg, transparent, rgba(255,215,100,.16), transparent); animation: shimmerSweep 2.8s ease-in-out infinite; }
@keyframes shimmerSweep { 0% { left:-60%; } 60% { left:110%; } 100% { left:110%; } }

/* Drop reveal: loot pops in a beat after the result */
@keyframes dropPop { from { opacity:0; transform:scale(.6); } 70% { transform:scale(1.08); } to { opacity:1; transform:scale(1); } }
.drop-reveal { display:inline-block; animation: dropPop .5s ease-out .25s backwards; }

/* Countdown pulse under 10s */
@keyframes tickPulse { 0%,100% { transform:scale(1); } 50% { transform:scale(1.08); color:#ff5544; } }
.tick-pulse { animation: tickPulse 1s ease-in-out infinite; }

/* Accessibility: system-level reduced motion wins */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ============================================================
   UNIKATY - swiecaca ramka  (16.08.2026)
   Unikaty mialy dotad zwykla obwodke 1px w kolorze #ff8000, nierozroznialna
   na pierwszy rzut oka od legendarnych. Teraz pulsujaca poswiata + narozniki,
   zeby w plecaku od razu bylo widac, ze to JEST to.
   ============================================================ */
.uniq-frame {
  border: 1px solid #ff8000 !important;
  box-shadow: 0 0 6px rgba(255,128,0,0.55), inset 0 0 10px rgba(255,128,0,0.12);
  animation: uniqPulse 2.4s ease-in-out infinite;
  position: relative;
}
@keyframes uniqPulse {
  0%, 100% { box-shadow: 0 0 5px rgba(255,128,0,0.45), inset 0 0 8px rgba(255,128,0,0.10); }
  50%      { box-shadow: 0 0 13px rgba(255,128,0,0.85), inset 0 0 14px rgba(255,128,0,0.20); }
}
/* Narozniki - drobny akcent, ktory czyta sie nawet na malym kafelku */
.uniq-frame::before, .uniq-frame::after {
  content: ''; position: absolute; width: 7px; height: 7px; pointer-events: none;
  border-color: #ffb14d; border-style: solid;
}
.uniq-frame::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; }
.uniq-frame::after  { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; }
@media (prefers-reduced-motion: reduce) { .uniq-frame { animation: none; } }

/* ============================================================
   PAKIET WIZUALNY 2 (18.08.2026, przed Steam) - Erak: "pasuje! lecisz"
   1) Okucia narozy paneli - TL i BR, czysty CSS, rzymski akcent.
   2) Przyciski: cieply gradient + glebia zamiast plaskiego prostokata
      z pelna zlota obwodka; hover podswietla krawedz, :active wciska 1px.
   Nav-bar i vault-mini CELOWO wylaczone z gradientu (maja byc plaskie).
   ============================================================ */
.panel { position:relative; }
.panel::before, .panel::after {
  content:''; position:absolute; width:11px; height:11px; pointer-events:none;
  border-color:rgba(212,160,68,0.6); border-style:solid; z-index:1;
}
.panel::before { top:-1px; left:-1px; border-width:2px 0 0 2px; }
.panel::after  { bottom:-1px; right:-1px; border-width:0 2px 2px 0; }

button, .btn {
  background:linear-gradient(180deg, rgba(74,58,38,0.95), rgba(46,36,24,0.95));
  border:1px solid rgba(176,120,64,0.55);
  box-shadow:0 1px 0 rgba(240,200,104,0.08) inset, 0 1px 3px rgba(0,0,0,0.4);
}
button:hover, .btn:hover {
  background:linear-gradient(180deg, rgba(94,74,48,1), rgba(58,46,30,1));
  border-color:var(--gold); color:var(--gold-bright);
  transform:translateY(-1px);
  box-shadow:0 0 8px rgba(212,160,68,0.25), 0 2px 6px rgba(0,0,0,0.4);
}
button:active, .btn:active { transform:translateY(1px); box-shadow:0 1px 2px rgba(0,0,0,0.5) inset; }
button:disabled { transform:none; box-shadow:none; }

/* wyjatki: nav i mini-przyciski skarbca zostaja plaskie jak byly */
.nav-bar button, .nav-bar button:hover, .nav-bar button:active {
  background:transparent; border:none; box-shadow:none; transform:none;
}
.nav-bar button { background:transparent; }
.nav-bar button.active { color:var(--gold-bright); border-bottom:2px solid var(--gold); background:rgba(176,120,64,0.08); }
.vault-mini, .vault-mini:hover, .vault-mini:active {
  background:rgba(212,160,68,0.12); border:1px solid rgba(212,160,68,0.35);
  box-shadow:none; transform:none;
}
.vault-mini:hover { background:rgba(212,160,68,0.3); }

/* ============================================================
   PAKIET WIZUALNY 3 (18.08.2026): czytelnosc pod Steam Decka.
   Baza 16px -> 18px (+12.5%) - wszystko w rem, wiec skaluje sie rownomiernie.
   Na mobile (<=700px) zostaje 16px: tamten uklad byl strojony pod ta baze.
   ============================================================ */
html { font-size:18px; }
@media(max-width:700px) { html { font-size:16px; } }

/* ============================================================
   MODALE WALKI (18.08.2026) - sprite w oprawie + nagrody jako pigulki
   zamiast golego tekstu. Uzywane w dungeonFight/garnizonie.
   ============================================================ */
.fight-sprite { text-align:center; margin:2px 0 10px; }
.fight-sprite img {
  width:72px; height:72px; image-rendering:pixelated; padding:10px;
  background:radial-gradient(circle, rgba(176,120,64,0.16), rgba(0,0,0,0.38) 72%);
  border:1px solid rgba(176,120,64,0.35); border-radius:8px;
  box-shadow:0 2px 12px rgba(0,0,0,0.55) inset;
}
.reward-row { display:flex; gap:6px; justify-content:center; flex-wrap:wrap; margin:8px 0 2px; }
.pill {
  display:inline-flex; align-items:center; gap:4px; padding:3px 10px;
  border:1px solid rgba(212,160,68,0.4); border-radius:12px;
  background:rgba(212,160,68,0.08); font-size:.72rem; color:var(--gold); white-space:nowrap;
}
.pill img { width:16px; height:16px; image-rendering:pixelated; }
.pill.exp { color:#b8e08a; border-color:rgba(150,200,110,0.4); background:rgba(150,200,110,0.07); }
.pill.hp  { color:var(--hp-green); border-color:rgba(90,200,120,0.35); background:rgba(90,200,120,0.06); }
.pill.gems{ color:var(--mana-blue); border-color:rgba(90,140,220,0.4); background:rgba(90,140,220,0.07); }
/* toast: zloty akcent z lewej, zeby "wyskakujace" mialy charakter */
.toast { border-left:3px solid var(--gold); }

/* ============================================================
   FACELIFT OGOLNY (18.08.2026) - globalne klocki oprawy ekranow:
   .screen-title + .ornament (korona ekranu), .tabs2 (zakladki-choragwie),
   .lvl-band (opaski sekcji), .sk2* (karty skilli, pilot: ekran Skills).
   ============================================================ */
.screen-title { text-align:center; margin:6px 0 2px; }
.screen-title h1 { font-size:1.05rem; color:var(--gold-bright); letter-spacing:3px; text-shadow:0 2px 6px rgba(0,0,0,0.8), 0 0 18px rgba(212,160,68,0.25); }
.screen-title .sub { font-size:.6rem; color:var(--text-dim); letter-spacing:2px; }
.ornament { display:flex; align-items:center; gap:10px; margin:6px auto 14px; max-width:420px; }
.ornament::before, .ornament::after { content:''; flex:1; height:1px; background:linear-gradient(90deg, transparent, rgba(212,160,68,0.7)); }
.ornament::after { background:linear-gradient(90deg, rgba(212,160,68,0.7), transparent); }
.ornament img { width:18px; height:18px; image-rendering:pixelated; filter:drop-shadow(0 1px 2px rgba(0,0,0,0.6)); }

.tabs2 { display:flex; gap:4px; margin-bottom:12px; }
.tabs2 button { flex:1; padding:9px 4px; font-size:.62rem; border:1px solid rgba(176,120,64,0.3); border-bottom:2px solid rgba(176,120,64,0.3);
  background:linear-gradient(180deg, rgba(40,32,20,0.9), rgba(28,22,14,0.9)); color:var(--text-dim); border-radius:5px 5px 0 0; box-shadow:none; }
.tabs2 button:hover { transform:none; color:var(--gold); border-bottom-color:rgba(212,160,68,0.5); }
.tabs2 button.on { color:var(--gold-bright); border-color:rgba(212,160,68,0.6); border-bottom:2px solid var(--gold);
  background:linear-gradient(180deg, rgba(64,50,30,0.95), rgba(40,32,20,0.95)); box-shadow:0 -2px 10px rgba(212,160,68,0.12) inset; }
.tabs2 .pts { display:block; font-size:.52rem; opacity:.75; margin-top:2px; }

.lvl-band { display:flex; align-items:center; gap:10px; margin:14px 0 8px; }
.lvl-band::after { content:''; flex:1; height:1px; background:linear-gradient(90deg, rgba(212,160,68,0.5), transparent); }
.lvl-band span { font-size:.66rem; color:var(--gold); font-weight:700; letter-spacing:1px; }
.lvl-band .req { font-size:.6rem; color:var(--text-disabled); font-weight:400; letter-spacing:0; }

.sk2-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
@media(max-width:700px) { .sk2-grid { grid-template-columns:1fr; } }
.sk2 { padding:10px; background:rgba(0,0,0,0.28); border-radius:6px; border:1px solid rgba(176,120,64,0.15); border-left:3px solid rgba(176,120,64,0.2); display:flex; gap:10px; }
.sk2.got { border-left-color:var(--uncommon); }
.sk2.max { border-left-color:var(--legendary); }
.sk2-ico { flex:0 0 44px; width:44px; height:44px; border-radius:6px; background:radial-gradient(circle, rgba(176,120,64,0.18), rgba(0,0,0,0.4) 75%); border:1px solid rgba(176,120,64,0.3); display:flex; align-items:center; justify-content:center; }
.sk2-ico img { width:32px; height:32px; image-rendering:pixelated; }
.sk2-body { flex:1; min-width:0; }
.sk2-top { display:flex; justify-content:space-between; align-items:center; }
.sk2-name { font-weight:700; font-size:.8rem; }
.sk2-rank { font-size:.72rem; font-weight:700; }
.sk2-desc { font-size:.68rem; color:var(--text-dim); margin:3px 0; }
.sk2-eff { font-size:.66rem; color:var(--bronze-bright); }
.sk2-eff b { color:var(--hp-green); }
.sk2-pips { display:flex; gap:3px; margin:6px 0; }
.sk2-pips i { flex:1; height:7px; border-radius:2px; background:rgba(176,120,64,0.12); }
.sk2-pips i.on { background:linear-gradient(180deg,var(--gold-bright),var(--gold)); box-shadow:0 0 4px rgba(240,200,104,0.4); }
.sk2-pips i.onmax { background:linear-gradient(180deg,#ffb84d,var(--legendary)); box-shadow:0 0 4px rgba(255,150,50,0.4); }
.sk2-btn { font-size:.55rem; padding:4px 10px; float:right; }
.sk2-max-tag { text-align:right; font-size:.6rem; color:var(--legendary); font-weight:700; }

/* Winieta ekranu gry (18.08): dociemnia rogi, tlo per-ekran zyskuje glebie.
   pointer-events:none - czysto dekoracyjna, nie lapie klikniec. */
#game-screen::before { content:''; position:fixed; inset:0; background:radial-gradient(ellipse at 50% 30%, transparent 42%, rgba(10,7,4,0.5) 100%); pointer-events:none; }

/* Poprawka Skills (18.08, po tescie Eraka): s.icon to 2-literowy kod, nie sciezka -
   odznaka z kodem zamiast pustej ramki; chip "LV X" na karcie zamiast opasek,
   bo przy 1 skillu na poziom opaski robily drabinke z pusta prawa kolumna. */
.sk2-badge { width:32px; height:32px; border-radius:4px; display:flex; align-items:center; justify-content:center;
  font-family:var(--font-pixel); font-size:.6rem; font-weight:700; color:#fff; text-shadow:0 1px 2px rgba(0,0,0,0.7); }
.sk2-lvl { font-size:.56rem; color:var(--text-dim); border:1px solid rgba(176,120,64,0.3); border-radius:8px; padding:1px 6px; margin-left:6px; vertical-align:middle; white-space:nowrap; }
.sk2.locked { opacity:.45; }
.sk2-req { font-size:.62rem; color:var(--blood-bright); margin-top:2px; }

/* Spinner logowania Steam (18.08) */
@keyframes spin { to { transform: rotate(360deg); } }

/* ============================================================
   PAPER DOLL EKWIPUNKU (18.08.2026) - Erak: "jak w diablo".
   Sloty ukladaja sie w SYLWETKE CIALA (D2), zamiast siatki 2 kolumn:
   helm+amulet gora, bron i tarcza wysokie po bokach, napiersnik w srodku,
   pas -> nogi -> buty schodza pionem w dol. Zadnej grafiki postaci.
   Kolumny we frakcjach + aspect-ratio, wiec doll skaluje sie do szerokosci
   panelu (~250px na desktopie, szerzej na mobile).
   ============================================================ */
/* 3 kolumny, nie 5: panel na dashboardzie ma ~250px, przy 5 kolumnach bron
   scieskala sie do paska, a srodek rozdymal wiersze. 3x5 = zero pustych pol
   i proporcje jak w oryginalnym D2. Wiersze stale, bo tall (bron/tarcza/korpus)
   zajmuja po 2 wiersze i same nie nadaja im wysokosci. */
.pdoll {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  grid-template-rows:repeat(5,74px);
  grid-template-areas:
    "neck      head   back"
    "main      chest  offhand"
    "main      chest  offhand"
    "shoulders waist  finger"
    "hands     legs   feet";
  gap:5px;
}
.pd-slot {
  position:relative; height:100%;
  background:radial-gradient(circle at 50% 35%, rgba(42,31,18,.85), rgba(10,7,4,.92));
  border:1px solid rgba(176,120,64,.28); border-radius:5px;
  display:flex; align-items:center; justify-content:center;
  cursor:help; transition:border-color .15s, box-shadow .15s, transform .15s;
}
.pd-cap { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; padding:0 2px; }
.pd-slot:hover { border-color:var(--gold) !important; transform:translateY(-1px); z-index:10; }
.pd-slot img { width:66%; height:66%; object-fit:contain; image-rendering:pixelated;
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.65)); }
.pd-cap { position:absolute; top:2px; left:0; right:0; text-align:center; font-size:.4rem;
  letter-spacing:.3px; color:rgba(200,170,120,.5); text-transform:uppercase; pointer-events:none; }
.pd-up { position:absolute; bottom:1px; right:3px; font-size:.5rem; font-weight:700;
  color:var(--gold); text-shadow:0 1px 2px #000; pointer-events:none; }
.pd-slot.empty { border-style:dashed; border-color:rgba(176,120,64,.14);
  background:rgba(0,0,0,.18); cursor:default; }
.pd-slot.empty img { opacity:.15; filter:grayscale(1); }
.pd-slot.empty:hover { transform:none; border-color:rgba(176,120,64,.14) !important; }
@media(max-width:700px) { .pdoll { max-width:330px; margin:0 auto; } .pd-cap { font-size:.44rem; } }
/* Doll na ekranie Equipment: panel jest tam szeroki, wiec wieksze sloty + klikalne.
   Kolumny STALE (nie 1fr): przy 1fr grid potrafil sie zapasc do ~50px na kolumne,
   gdy rodzic nie narzucal szerokosci. 3x108 + 2x6 gap = 336px, zawsze tak samo. */
.pdoll-lg { grid-template-columns:repeat(3,108px); grid-template-rows:repeat(5,94px);
  gap:6px; justify-content:center; margin:0 0 6px; }
/* Uklad ekranu Equipment: doll + podsumowanie obok, zamiast pustki po bokach */
.eq-layout { display:flex; flex-wrap:wrap; gap:16px; align-items:flex-start; justify-content:center; }
.gear-sum { flex:1 1 240px; min-width:220px; max-width:420px; align-self:stretch;
  background:rgba(0,0,0,.22); border:1px solid rgba(176,120,64,.18); border-radius:7px; padding:12px 14px; }
@media(max-width:700px) {
  .pdoll-lg { grid-template-columns:repeat(3,96px); grid-template-rows:repeat(5,86px); }
  .eq-layout { gap:10px; }
  .gear-sum { flex:1 1 100%; max-width:none; }
}
.pdoll-lg .pd-cap { font-size:.46rem; }
.pdoll-lg .pd-up { font-size:.58rem; }
.pd-slot.equipped { cursor:pointer; }
.pd-slot.empty { cursor:pointer; }
.pd-slot.empty:hover { border-color:rgba(212,160,68,.45) !important; background:rgba(212,160,68,.05); }

/* ============================================================
   MODAL NAGRODY ZA LOGOWANIE (19.08) - bylo: 30 dni w siatce 6 kolumn
   czcionka .5rem, dzisiejsza nagroda ginela wsrod 29 innych.
   Teraz: hero-karta z DZISIEJSZA nagroda + kompaktowy tor 30 dni pod spodem.
   ============================================================ */
.dr-streak { text-align:center; font-size:.72rem; color:var(--text-dim); margin-bottom:10px; }
.dr-streak b { font-family:var(--font-pixel); font-size:.95rem; color:var(--gold-bright); }
.dr-hero { position:relative; text-align:center; padding:14px 12px 12px; margin-bottom:12px;
  background:linear-gradient(180deg, rgba(72,56,30,.85), rgba(28,21,13,.92));
  border:2px solid var(--gold); border-radius:8px;
  box-shadow:0 0 18px rgba(212,160,68,.22), inset 0 0 26px rgba(212,160,68,.07); }
.dr-hero::before, .dr-hero::after { content:''; position:absolute; width:12px; height:12px;
  border-color:var(--gold-bright); border-style:solid; }
.dr-hero::before { top:-1px; left:-1px; border-width:2px 0 0 2px; }
.dr-hero::after  { bottom:-1px; right:-1px; border-width:0 2px 2px 0; }
.dr-hero .dr-day { font-size:.56rem; letter-spacing:2px; color:var(--gold); text-transform:uppercase; }
.dr-hero .dr-grand { font-size:.6rem; color:var(--legendary); font-weight:700; letter-spacing:1px; margin-top:3px; }
.dr-rewards { display:flex; justify-content:center; gap:18px; flex-wrap:wrap; margin-top:8px; }
.dr-rw { display:flex; align-items:center; gap:6px; font-family:var(--font-pixel); font-size:1.05rem; }
.dr-rw img { width:26px; height:26px; image-rendering:pixelated; }
.dr-track { display:grid; grid-template-columns:repeat(10,1fr); gap:3px; margin:4px 0 8px; }
.dr-cell { aspect-ratio:1; min-height:20px; border-radius:3px; display:flex; align-items:center; justify-content:center;
  font-size:.52rem; font-weight:700; color:var(--text-dim);
  border:1px solid rgba(176,120,64,.15); background:rgba(0,0,0,.25); cursor:help; }
.dr-cell.done  { background:rgba(74,140,74,.25); border-color:rgba(74,140,74,.5); color:#7fc97f; }
.dr-cell.gem   { background:rgba(120,90,200,.16); border-color:rgba(140,120,220,.55); color:#b9a8f0; }
.dr-cell.grand { background:rgba(240,160,60,.16); border-color:var(--legendary); color:var(--legendary); }
.dr-cell.today { background:rgba(212,160,68,.4); border-color:var(--gold); color:#fff;
  animation:drPulse 2s ease-in-out infinite; }
@keyframes drPulse { 0%,100% { box-shadow:0 0 5px rgba(212,160,68,.45); } 50% { box-shadow:0 0 13px rgba(212,160,68,.9); } }
.dr-legend { display:flex; justify-content:center; gap:12px; flex-wrap:wrap; font-size:.56rem; color:var(--text-dim); margin-bottom:8px; }
.dr-legend i { display:inline-block; width:8px; height:8px; border-radius:2px; margin-right:3px; vertical-align:middle; }
.dr-note { font-size:.62rem; color:var(--text-dim); text-align:center; line-height:1.5; }