/* ============================================================
   XXXOTS.WIKI — czarno-złota stylistyka zgodna z xxxots.pl
   Wszystko w przestrzeni .xw, żeby nie gryzło się z layoutem MyAAC.
   ============================================================ */

.xw, .xw * { box-sizing: border-box; }

.xw {
    --gold: #e7b83e;
    --gold-light: #ffd86b;
    --gold-dark: #8d650d;
    --border: rgba(212,175,55,.22);
    --border-strong: rgba(224,174,43,.46);
    --card: #11100d;
    --card-2: #18150f;
    --text: #e8e0d3;
    --muted: #9a9184;
    --dim: #6f685e;
    --red: 197,78,68;
    --blue: 82,149,190;
    --green: 78,165,134;
    --purple: 171,121,190;
    --serif: Georgia, "Times New Roman", serif;

    width: 100%;
    min-width: 0;
    max-width: 100%;
    overflow-wrap: break-word;
    color: var(--text);
    font-family: Inter, Arial, Helvetica, sans-serif;
    font-size: 13px;
    line-height: 1.55;
}

.xw a { color: var(--gold-light); text-decoration: none !important; }
.xw a:hover { color: #fff0aa; }
.xw img { image-rendering: pixelated; }
.xw h1, .xw h2, .xw h3, .xw h4 { margin: 0; }

/* ---------- HERO ---------- */
.xw-hero {
    position: relative;
    z-index: 30; /* lista wyników wyszukiwania ma być nad przyklejonym paskiem .xw-nav (z-index 20) */
    overflow: visible;
    padding: 26px 24px 22px;
    border: 1px solid var(--border-strong);
    border-radius: 14px;
    background:
        radial-gradient(circle at 86% 8%, rgba(53,117,176,.10), transparent 24%),
        radial-gradient(circle at 10% 88%, rgba(133,48,37,.13), transparent 28%),
        radial-gradient(circle at 68% 20%, rgba(212,175,55,.09), transparent 27%),
        linear-gradient(135deg, #1a160e 0%, #0e0c09 52%, #070706 100%);
    box-shadow: 0 15px 34px rgba(0,0,0,.35);
    text-align: center;
}
.xw-hero::before {
    content: ""; position: absolute; top: 0; left: 6%; right: 6%; height: 2px;
    background: linear-gradient(90deg, transparent, #9e7010 16%, #f1c750 50%, #9e7010 84%, transparent);
    box-shadow: 0 0 12px rgba(229,179,48,.24);
}
.xw-kicker {
    color: #a98d50; font-size: 10px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase;
}
.xw-kicker i { color: #ddb13a; margin-right: 6px; }
.xw-title {
    margin: 6px 0 0 !important;
    color: #efc557;
    font-family: var(--serif);
    font-size: clamp(30px, 4.4vw, 46px);
    font-weight: 700;
    line-height: 1.05;
    letter-spacing: .8px;
    text-shadow: 0 2px 2px #000, 0 0 18px rgba(228,177,45,.16);
}
.xw-title span { color: #fff0aa; }
.xw-lead { max-width: 640px; margin: 10px auto 0; color: #b6ac9d; font-size: 13px; }

.xw-search { position: relative; max-width: 620px; margin: 18px auto 0; text-align: left; }
.xw-search > i { position: absolute; left: 14px; top: 15px; color: #a77b18; font-size: 13px; }
.xw-search input {
    width: 100%; height: 44px; padding: 0 14px 0 38px; outline: none;
    border: 1px solid rgba(212,175,55,.31); border-radius: 8px;
    color: #eee5d7; font: inherit; font-size: 13px;
    background: linear-gradient(180deg, rgba(8,8,7,.98), rgba(13,11,8,.98));
    box-shadow: inset 0 2px 5px rgba(0,0,0,.38);
}
.xw-search input:focus { border-color: rgba(237,190,55,.65); }
.xw-results {
    position: absolute; z-index: 50; left: 0; right: 0; top: 48px;
    max-height: 360px; overflow-y: auto;
    border: 1px solid var(--border-strong); border-radius: 9px;
    background: #0d0c0a; box-shadow: 0 16px 30px rgba(0,0,0,.6);
}
.xw-results[hidden] { display: none; }
.xw-result {
    display: flex; align-items: center; gap: 10px; padding: 8px 12px;
    border-bottom: 1px solid rgba(212,175,55,.08); color: var(--text) !important;
}
.xw-result:hover, .xw-result.is-active { background: rgba(212,175,55,.08); }
.xw-result img { width: 32px; height: 32px; object-fit: contain; }
.xw-result small { margin-left: auto; color: var(--dim); font-size: 10px; text-transform: uppercase; letter-spacing: .6px; }
.xw-result-empty { padding: 12px; color: var(--muted); }

/* ---------- NAV (chips) ---------- */
.xw-nav {
    position: sticky; top: 0; z-index: 20;
    display: flex; flex-wrap: wrap; gap: 6px;
    margin: 12px 0 0; padding: 10px;
    border: 1px solid var(--border); border-radius: 11px;
    background: linear-gradient(180deg, rgba(23,20,14,.97), rgba(10,9,8,.98));
    backdrop-filter: blur(4px);
}
.xw-nav a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 6px 10px; border: 1px solid rgba(212,175,55,.16); border-radius: 7px;
    color: #cdbf9f !important; background: rgba(0,0,0,.25);
    font-size: 11px; font-weight: 700; letter-spacing: .3px; white-space: nowrap;
    flex: 0 0 auto !important; width: auto !important; max-width: none !important;
}
.xw-nav a i { color: var(--gold); font-size: 11px; }
.xw-nav a:hover { border-color: rgba(212,175,55,.42); color: #fff !important; }
.xw-nav a.is-active {
    color: #251801 !important; border-color: rgba(247,201,68,.82);
    background: linear-gradient(180deg, #f4cf62 0%, #d6a72b 54%, #a8730c 100%);
}
.xw-nav a.is-active i { color: #251801; }

/* ---------- SECTION / PANEL ---------- */
.xw-page { margin-top: 12px; }
.xw-section {
    margin-top: 12px; overflow: hidden;
    border: 1px solid var(--border); border-radius: 12px;
    background:
        radial-gradient(circle at 50% 0%, rgba(212,175,55,.025), transparent 40%),
        linear-gradient(155deg, rgba(17,15,12,.985), rgba(7,7,6,.995));
    box-shadow: 0 10px 25px rgba(0,0,0,.25);
}
.xw-section-head {
    min-height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 15px;
    border-bottom: 1px solid rgba(212,175,55,.14);
    background: linear-gradient(180deg, rgba(29,25,16,.98), rgba(13,12,9,.99));
    color: #e6b943;
}
.xw-section-head > i {
    flex: 0 0 28px; width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(212,175,55,.24); border-radius: 7px; background: rgba(78,54,11,.45); font-size: 12px;
}
.xw-section-head h2 { font-size: 12px; font-weight: 900; letter-spacing: .8px; text-transform: uppercase; color: #e6b943; }
.xw-section-head .xw-count { margin-left: auto; color: var(--dim); font-size: 11px; }
.xw-section-body { padding: 15px; }
.xw-intro { margin: 0 0 12px; color: #b9ae9c; }
.xw-note { color: var(--muted); font-size: 12px; }

/* ---------- HOME CARDS ---------- */
.xw-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
.xw-card {
    --accent: 212,175,55;
    position: relative; display: flex; flex-direction: column; gap: 6px;
    padding: 14px; min-height: 128px;
    border: 1px solid rgba(var(--accent),.22); border-radius: 10px;
    color: var(--text) !important;
    background:
        radial-gradient(circle at 18% 18%, rgba(var(--accent),.13), transparent 38%),
        linear-gradient(160deg, rgba(27,23,15,.96), rgba(8,8,7,.99));
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.xw-card::before {
    content: ""; position: absolute; left: 18%; right: 18%; top: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(var(--accent),.78), transparent);
}
.xw-card:hover {
    transform: translateY(-3px); border-color: rgba(var(--accent),.5);
    box-shadow: 0 10px 20px rgba(0,0,0,.24), 0 0 14px rgba(var(--accent),.08);
}
.xw-card-icon {
    width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(var(--accent),.4); border-radius: 11px; color: rgb(var(--accent));
    background: radial-gradient(circle at 35% 25%, rgba(var(--accent),.26), rgba(var(--accent),.06) 62%, rgba(13,12,9,.84));
    font-size: 16px;
}
.xw-card-title { color: rgb(var(--accent)); font-family: var(--serif); font-size: 15px; font-weight: 700; }
.xw-card-desc { color: #8d8578; font-size: 11.5px; line-height: 1.45; }
.xw-card-badge {
    position: absolute; top: 12px; right: 12px; padding: 2px 7px; border-radius: 5px;
    background: rgba(var(--accent),.14); color: rgb(var(--accent)); font-size: 10px; font-weight: 800;
}
.xw-a-gold { --accent: 224,177,59; } .xw-a-red { --accent: 197,78,68; } .xw-a-blue { --accent: 82,149,190; }
.xw-a-purple { --accent: 171,121,190; } .xw-a-green { --accent: 78,165,134; } .xw-a-orange { --accent: 207,112,53; }
.xw-a-steel { --accent: 126,149,175; } .xw-a-pink { --accent: 196,96,150; }

.xw-stats { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 9px; margin-top: 12px; }
.xw-stat {
    --accent: 212,175,55;
    padding: 11px 13px; border: 1px solid rgba(var(--accent),.22); border-radius: 9px;
    background: radial-gradient(circle at 0% 50%, rgba(var(--accent),.10), transparent 40%), linear-gradient(145deg, rgba(24,21,15,.9), rgba(8,8,7,.97));
    box-shadow: inset 2px 0 0 rgba(var(--accent),.72);
}
.xw-stat b { display: block; color: rgb(var(--accent)); font-family: var(--serif); font-size: 22px; line-height: 1.1; }
.xw-stat span { color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; font-weight: 700; }

/* ---------- TABLES ---------- */
.xw-table-wrap { overflow-x: auto; border: 1px solid rgba(212,175,55,.13); border-radius: 9px; }
.xw-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.xw-table th {
    position: sticky; top: 0; padding: 9px 11px; text-align: left; white-space: nowrap;
    color: #c9a54a; font-size: 10.5px; font-weight: 800; letter-spacing: .7px; text-transform: uppercase;
    background: #16130d; border-bottom: 1px solid rgba(212,175,55,.2);
}
.xw-table td { padding: 8px 11px; border-bottom: 1px solid rgba(212,175,55,.07); vertical-align: middle; }
.xw-table tr:nth-child(even) td { background: rgba(255,255,255,.012); }
.xw-table tr:hover td { background: rgba(212,175,55,.045); }
.xw-table tr[data-href] { cursor: pointer; }
.xw-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.xw-table code, .xw code {
    padding: 2px 6px; border: 1px solid rgba(212,175,55,.2); border-radius: 5px;
    background: rgba(0,0,0,.4); color: var(--gold-light); font-family: Consolas, monospace; font-size: 12px; white-space: nowrap;
}
.xw-cell-img { display: flex; align-items: center; gap: 9px; }
.xw-cell-img img { width: 32px; height: 32px; object-fit: contain; flex: 0 0 32px; }
.xw-before { color: #b98a80; text-decoration: line-through; text-decoration-color: rgba(197,78,68,.55); }
.xw-after { color: #9fd3a8; font-weight: 700; }

/* ---------- FILTERS ---------- */
.xw-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.xw-filters input, .xw-filters select {
    height: 36px; padding: 0 11px; border: 1px solid rgba(212,175,55,.25); border-radius: 7px;
    background: #0b0a08; color: var(--text); font: inherit; font-size: 12.5px; outline: none;
}
.xw-filters input { flex: 1 1 200px; }
.xw-pill {
    height: 36px; padding: 0 12px; border: 1px solid rgba(212,175,55,.22); border-radius: 7px;
    background: rgba(0,0,0,.3); color: #cdbf9f; font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
}
.xw-pill.is-active { color: #251801; border-color: #f0c552; background: linear-gradient(180deg, #f4cf62, #b9861a); }
/* drugi rząd filtrów (profesje) i sortowanie po kolumnach w dziale Ekwipunek */
.xw-filters--voc { margin-top: -4px; }
.xw-filters--voc .xw-pill { height: 30px; padding: 0 10px; font-size: 11.5px; }
.xw-sort { cursor: pointer; user-select: none; white-space: nowrap; }
.xw-sort:hover { color: var(--gold-light); }
.xw-sort i { font-size: 9px; color: var(--gold); margin-left: 3px; }

/* ---------- TOC ---------- */
.xw-toc { display: flex; flex-wrap: wrap; gap: 6px; }
.xw-toc a {
    display: inline-flex; align-items: center; gap: 7px; padding: 5px 10px 5px 6px;
    border: 1px solid rgba(212,175,55,.15); border-radius: 7px; background: rgba(0,0,0,.25);
    color: #ddd0b4 !important; font-size: 12px;
}
.xw-toc a img { width: 26px; height: 26px; object-fit: contain; }
.xw-toc a:hover { border-color: rgba(212,175,55,.45); }
.xw-toc-group { margin: 12px 0 6px; color: #a98d50; font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }
.xw-toc-group:first-child { margin-top: 0; }

/* ---------- ENTITY (boss / monster / npc) ---------- */
.xw-entity { display: grid; grid-template-columns: 150px 1fr; gap: 16px; }
.xw-portrait {
    position: relative; display: flex; align-items: center; justify-content: center;
    min-height: 150px; border: 1px solid rgba(212,175,55,.25); border-radius: 11px;
    background: radial-gradient(circle at 50% 55%, rgba(212,175,55,.14), transparent 55%), radial-gradient(circle, rgba(60,40,10,.35), rgba(12,10,7,.95) 70%);
}
.xw-portrait img { width: 96px; height: 96px; object-fit: contain; filter: drop-shadow(0 4px 6px rgba(0,0,0,.6)); }
.xw-portrait img.is-ph { width: 56px; height: 56px; opacity: .55; }
.xw-portrait .xw-ph { font-size: 44px; color: rgba(212,175,55,.35); }
.xw-portrait-tag {
    position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%);
    padding: 2px 8px; border-radius: 5px; background: rgba(0,0,0,.6); color: #cfa94a;
    font-size: 10px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; white-space: nowrap;
}
.xw-entity-name { color: #efc557; font-family: var(--serif); font-size: 24px; font-weight: 700; line-height: 1.15; }
.xw-entity-sub { margin-top: 3px; color: var(--muted); font-size: 12px; }
.xw-kv { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin-top: 12px; }
.xw-kv div { padding: 8px 10px; border: 1px solid rgba(212,175,55,.13); border-radius: 8px; background: rgba(0,0,0,.28); }
.xw-kv span { display: block; color: var(--dim); font-size: 10px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; }
.xw-kv b { display: block; color: #f1e6cf; font-size: 14px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.xw-block { margin-top: 14px; }
.xw-block h3 {
    margin-bottom: 8px !important; color: #d8b04a; font-size: 11px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase;
}
.xw-block p { margin: 0 0 6px; color: #c7bcaa; }
.xw-back { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 12px; font-weight: 700; }

/* elementy */
.xw-elements { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; }
.xw-el { padding: 6px 8px; border: 1px solid rgba(255,255,255,.06); border-radius: 7px; background: rgba(0,0,0,.3); font-size: 11.5px; }
.xw-el span { display: flex; align-items: center; gap: 5px; color: var(--muted); }
.xw-el b { font-size: 13px; }
.xw-el .pos { color: #9fd3a8; } .xw-el .neg { color: #e58f84; } .xw-el .zero { color: var(--dim); }
.xw-el-physical i { color: #c9b8a0; } .xw-el-energy i { color: #b98cf0; } .xw-el-earth i { color: #7bc46a; }
.xw-el-fire i { color: #f08a3c; } .xw-el-ice i { color: #7cc9f0; } .xw-el-holy i { color: #f3dc7a; } .xw-el-death i { color: #b07070; }

.xw-tags { display: flex; flex-wrap: wrap; gap: 5px; }
.xw-tag {
    padding: 3px 8px; border: 1px solid rgba(212,175,55,.2); border-radius: 5px; background: rgba(0,0,0,.3);
    color: #cdbf9f; font-size: 11px;
}
.xw-tag--red { border-color: rgba(197,78,68,.35); color: #e59a90; }
.xw-tag--green { border-color: rgba(78,165,134,.35); color: #8fd1b9; }

/* loot */
.xw-loot { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 6px; align-items: start; }
.xw-loot-item {
    position: relative; display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: 6px 4px 5px; border: 1px solid rgba(212,175,55,.14); border-radius: 8px;
    background: radial-gradient(circle at 50% 35%, rgba(212,175,55,.07), transparent 60%), rgba(0,0,0,.35);
    cursor: help;
}
.xw-loot-item img { width: 32px; height: 32px; object-fit: contain; }
.xw-loot-item .cnt { position: absolute; top: 3px; right: 5px; color: #fff; font-size: 10px; font-weight: 800; text-shadow: 0 1px 2px #000; }
.xw-loot-item.r-rare { border-color: rgba(171,121,190,.45); }
.xw-loot-item.r-vrare { border-color: rgba(231,184,62,.6); box-shadow: 0 0 10px rgba(231,184,62,.12); }
.xw-loot-item .nm {
    display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
    width: 100%; min-height: 3.75em; overflow: hidden;
    color: #9b927f; font-size: 9.5px; line-height: 1.25; text-align: center;
    overflow-wrap: anywhere;
}

.xw-list { margin: 0; padding-left: 18px; color: #c7bcaa; }
.xw-list li { margin: 3px 0; }
.xw-steps { counter-reset: s; list-style: none; margin: 0; padding: 0; }
.xw-steps li { counter-increment: s; position: relative; margin: 0 0 7px; padding: 7px 10px 7px 38px; border: 1px solid rgba(212,175,55,.1); border-radius: 8px; background: rgba(0,0,0,.25); color: #cfc4b1; }
.xw-steps li::before {
    content: counter(s); position: absolute; left: 9px; top: 7px; width: 20px; height: 20px; border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    background: linear-gradient(180deg, #f4cf62, #a8730c); color: #251801; font-size: 11px; font-weight: 900;
}

/* karty listowe (questy / systemy / npc / itemy) */
.xw-cards { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 10px; }
.xw-box {
    padding: 13px; border: 1px solid rgba(212,175,55,.16); border-radius: 10px;
    background: linear-gradient(160deg, rgba(24,21,15,.9), rgba(8,8,7,.97));
}
.xw-box-head { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.xw-box-head img { width: 40px; height: 40px; object-fit: contain; }
.xw-box-head .xw-ico {
    flex: 0 0 36px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(212,175,55,.3); border-radius: 9px; background: rgba(78,54,11,.35); color: var(--gold);
}
.xw-box-title { color: #efc557; font-family: var(--serif); font-size: 16px; font-weight: 700; line-height: 1.2; }
.xw-box-sub { color: var(--dim); font-size: 11px; }
.xw-box p { margin: 0 0 6px; color: #c1b6a3; font-size: 12.5px; }
.xw-box--wide { grid-column: 1 / -1; }

.xw-callout {
    display: flex; gap: 10px; padding: 11px 13px; margin-bottom: 12px;
    border: 1px solid rgba(212,175,55,.25); border-left: 3px solid var(--gold); border-radius: 8px;
    background: rgba(212,175,55,.05); color: #d7cbb4; font-size: 12.5px;
}
.xw-callout i { color: var(--gold); margin-top: 3px; }

details.xw-details { border: 1px solid rgba(212,175,55,.14); border-radius: 9px; background: rgba(0,0,0,.22); margin-bottom: 8px; }
details.xw-details > summary {
    list-style: none; cursor: pointer; padding: 10px 13px; color: #e2c472; font-weight: 700; display: flex; align-items: center; gap: 8px;
}
details.xw-details > summary::-webkit-details-marker { display: none; }
details.xw-details > summary::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; margin-left: auto; font-size: 10px; color: var(--dim); transition: transform .15s; }
details.xw-details[open] > summary::after { transform: rotate(180deg); }
details.xw-details > div { padding: 0 13px 12px; }

/* ---------- PIERWSZE KROKI ---------- */
.xw-fs-welcome {
    position: relative; overflow: hidden; margin-top: 12px; padding: 24px 20px 20px; text-align: center;
    border: 1px solid var(--border-strong); border-radius: 12px;
    background:
        radial-gradient(circle at 50% -20%, rgba(231,184,62,.20), transparent 55%),
        radial-gradient(circle at 12% 110%, rgba(78,165,134,.10), transparent 40%),
        radial-gradient(circle at 90% 110%, rgba(197,78,68,.10), transparent 40%),
        linear-gradient(160deg, #1b170f, #080807);
}
.xw-fs-welcome::before {
    content: ""; position: absolute; top: 0; left: 10%; right: 10%; height: 2px;
    background: linear-gradient(90deg, transparent, #9e7010 16%, #f1c750 50%, #9e7010 84%, transparent);
}
.xw-fs-kicker { color: #a98d50; font-size: 10px; font-weight: 800; letter-spacing: 1.6px; text-transform: uppercase; }
.xw-fs-kicker i { color: var(--gold); margin-right: 6px; }
.xw-fs-title {
    margin-top: 6px !important; color: #efc557; font-family: var(--serif); font-size: clamp(24px, 4vw, 34px); font-weight: 700; line-height: 1.15;
    text-shadow: 0 2px 2px #000, 0 0 16px rgba(228,177,45,.18);
}
.xw-fs-lead { max-width: 560px; margin: 8px auto 0; color: #c2b7a4; font-size: 13.5px; }
.xw-fs-facts { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 14px; }
.xw-fs-facts span {
    display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
    border: 1px solid rgba(212,175,55,.28); background: rgba(0,0,0,.35); color: #f1e6cf; font-size: 12px; font-weight: 700;
}
.xw-fs-facts i { color: var(--gold); font-size: 11px; }

.xw-fs-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 10px; }
.xw-fs-step {
    position: relative; display: flex; flex-direction: column; gap: 6px; padding: 14px 13px 13px;
    border: 1px solid rgba(var(--accent),.3); border-radius: 11px;
    background: radial-gradient(circle at 20% 0%, rgba(var(--accent),.16), transparent 55%), linear-gradient(165deg, rgba(27,23,15,.97), rgba(8,8,7,.99));
}
.xw-fs-step-top { display: flex; align-items: center; justify-content: space-between; }
.xw-fs-num {
    width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%;
    background: linear-gradient(180deg, #f4cf62, #a8730c); color: #251801; font-family: var(--serif); font-size: 15px; font-weight: 900;
    box-shadow: 0 0 12px rgba(231,184,62,.25);
}
.xw-fs-step-top i { color: rgb(var(--accent)); font-size: 22px; opacity: .9; }
.xw-fs-step h3 { color: #f1e6cf; font-size: 14.5px; font-weight: 800; }
.xw-fs-step p { margin: 0; color: #b3a893; font-size: 12.5px; flex: 1; }
.xw-fs-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px; margin-top: 6px; padding: 8px 10px;
    border: 1px solid rgba(var(--accent),.55); border-radius: 7px;
    background: linear-gradient(180deg, rgba(var(--accent),.22), rgba(var(--accent),.08));
    color: #fff0cc !important; font-size: 12px; font-weight: 800; letter-spacing: .3px; text-align: center;
    transition: background .15s, transform .15s;
}
.xw-fs-btn:hover { background: linear-gradient(180deg, rgba(var(--accent),.38), rgba(var(--accent),.14)); transform: translateY(-1px); }
.xw-fs-btn i { font-size: 10px; }

.xw-fs-tips { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; }
.xw-fs-tip {
    display: flex; gap: 11px; padding: 13px; border: 1px solid rgba(var(--accent),.22); border-radius: 10px;
    background: linear-gradient(160deg, rgba(24,21,15,.9), rgba(8,8,7,.97));
}
.xw-fs-tip > i {
    flex: 0 0 36px; width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center;
    border: 1px solid rgba(var(--accent),.4); border-radius: 9px; background: rgba(var(--accent),.12); color: rgb(var(--accent)); font-size: 15px;
}
.xw-fs-tip > div { min-width: 0; }
.xw-fs-tip h3 { color: #efc557; font-family: var(--serif); font-size: 14.5px; font-weight: 700; margin-bottom: 3px !important; }
.xw-fs-tip p { margin: 0 0 5px; color: #b3a893; font-size: 12.5px; }
.xw-fs-tip a { font-size: 12px; font-weight: 700; }

.xw-fs-qol { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px; }
.xw-fs-qol span {
    display: flex; align-items: center; gap: 9px; padding: 9px 11px; border: 1px solid rgba(212,175,55,.14); border-radius: 8px;
    background: rgba(0,0,0,.3); color: #dcd0bb; font-size: 12.5px; font-weight: 600;
}
.xw-fs-qol i { flex: 0 0 18px; text-align: center; color: var(--gold); }

@media (max-width: 640px) {
    .xw-fs-welcome { padding: 20px 14px 16px; }
    .xw-fs-steps, .xw-fs-tips, .xw-fs-qol { grid-template-columns: 1fr; }
    .xw-fs-facts span { font-size: 11.5px; padding: 4px 9px; }
}

/* ---------- TASKI I DELIVERY ---------- */
#xw-task-master, #xw-delivery { scroll-margin-top: 70px; }
.xw-cmd {
    display: inline-block; padding: 1px 7px; border: 1px solid rgba(212,175,55,.3); border-radius: 5px;
    background: rgba(78,54,11,.28); color: #ffd86b; font-family: Consolas, "Courier New", monospace; font-size: 11.5px; white-space: nowrap;
}
.xw-kv .xw-cmd { font-size: 13px; }
.xw-cmds { display: flex; flex-wrap: wrap; gap: 4px; }
.xw-table td .xw-cmds { min-width: 0; }
.xw-list { margin: 0; padding-left: 18px; color: #c7bcaa; }
.xw-list li { margin: 0 0 5px; }
.xw-tiers { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 8px; }
.xw-tier { --t: 78,165,134; padding: 11px 12px; border: 1px solid rgba(var(--t),.35); border-radius: 9px; background: linear-gradient(160deg, rgba(var(--t),.09), rgba(0,0,0,.3)); }
.xw-tier--medium { --t: 212,175,55; }
.xw-tier--hard { --t: 197,78,68; }
.xw-tier-head { display: flex; align-items: center; gap: 9px; margin-bottom: 7px; }
.xw-tier-head i { flex: 0 0 30px; width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; border-radius: 8px; background: rgba(var(--t),.18); color: rgb(var(--t)); }
.xw-tier-head b { display: block; color: #f1e6cf; font-size: 14px; }
.xw-tier-head small { display: block; color: rgb(var(--t)); font-size: 11px; font-weight: 700; }
.xw-tier ul { margin: 0; padding: 0; list-style: none; }
.xw-tier li { padding: 3px 0; border-top: 1px solid rgba(255,255,255,.05); color: #c7bcaa; font-size: 12px; }
.xw-pool > summary small { margin-left: 6px; color: var(--dim); font-size: 11px; font-weight: 600; }
.xw-pool--easy > summary i { color: rgb(78,165,134); }
.xw-pool--medium > summary i { color: var(--gold); }
.xw-pool--hard > summary i { color: rgb(197,78,68); }
.xw-pool-group { display: grid; grid-template-columns: 78px minmax(0,1fr); gap: 8px; padding: 7px 0; border-top: 1px solid rgba(255,255,255,.05); }
.xw-pool-group:first-child { border-top: 0; }
.xw-pool-range { color: #e2c472; font-size: 11.5px; font-weight: 800; padding-top: 5px; white-space: nowrap; }
.xw-pool-items { display: flex; flex-wrap: wrap; gap: 5px; }
.xw-pool-item {
    display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px 2px 4px; min-height: 30px;
    border: 1px solid rgba(212,175,55,.14); border-radius: 6px; background: rgba(0,0,0,.3); color: #d6cab5; font-size: 11.5px;
}
.xw-pool-item img { width: 24px; height: 24px; object-fit: contain; }

.xw-footer { margin-top: 14px; color: var(--dim); font-size: 11px; text-align: center; }

/* ---------- RWD ---------- */
@media (max-width: 900px) {
    .xw-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .xw-stats { grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 640px) {
    .xw { font-size: 13.5px; }
    .xw-hero { padding: 22px 14px 18px; }
    .xw-grid, .xw-cards { grid-template-columns: 1fr; }
    /* na telefonie wszystkie zakładki mają być widoczne naraz (bez przewijania w bok), więc mniejsze i zawijane */
    /* przy kilku rzędach przyklejony pasek zasłaniałby treść, więc na telefonie przewija się razem ze stroną */
    /* na telefonie wszystkie zakładki widoczne naraz i równe: siatka 3 w rzędzie zamiast przewijania w bok */
    .xw-nav { position: static; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; padding: 8px; overflow-x: visible; max-width: 100%; }
    .xw-nav a {
        justify-content: center; text-align: center; min-height: 40px; padding: 5px 4px; gap: 4px;
        font-size: 9.5px; letter-spacing: 0; white-space: normal; line-height: 1.15;
    }
    .xw-nav a i { font-size: 10px; flex: 0 0 auto; }
    .xw-entity { grid-template-columns: 1fr; }
    .xw-portrait { min-height: 120px; }
    .xw-section-body { padding: 12px; }
    .xw-card { min-height: 0; }
    .xw-table { font-size: 12px; }
    .xw-sort { white-space: normal; }
    .xw-hide-sm { display: none; }
    .xw-tiers { grid-template-columns: 1fr; }
    .xw-pool-group { grid-template-columns: 1fr; gap: 4px; }
    .xw-pool-range { padding-top: 0; }
    .xw-pool > summary { flex-wrap: wrap; }
    .xw-pool > summary small { flex-basis: 100%; margin-left: 24px; }
}

/* ============================================================
   XXXOTS vs TIBIA — kafelki, drabinka stages, karty
   ============================================================ */
.xw-vs-hero { display: grid; grid-template-columns: repeat(6, minmax(0,1fr)); gap: 9px; margin-top: 12px; }
.xw-vs-hl {
    position: relative; overflow: hidden;
    display: flex; flex-direction: column; align-items: center; gap: 3px;
    padding: 14px 8px 12px; text-align: center;
    border: 1px solid rgba(var(--accent),.3); border-radius: 11px;
    background:
        radial-gradient(circle at 50% 0%, rgba(var(--accent),.22), transparent 62%),
        linear-gradient(165deg, rgba(27,23,15,.97), rgba(8,8,7,.99));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.03), 0 8px 18px rgba(0,0,0,.25);
}
.xw-vs-hl::before {
    content: ""; position: absolute; left: 20%; right: 20%; top: 0; height: 2px;
    background: linear-gradient(90deg, transparent, rgba(var(--accent),.9), transparent);
}
.xw-vs-hl i { color: rgb(var(--accent)); font-size: 17px; opacity: .9; }
.xw-vs-hl b {
    color: rgb(var(--accent)); font-family: var(--serif); font-size: 26px; line-height: 1.05;
    text-shadow: 0 2px 2px #000, 0 0 14px rgba(var(--accent),.25);
}
.xw-vs-hl span { color: #a39a8b; font-size: 10.5px; font-weight: 700; letter-spacing: .3px; line-height: 1.3; }

.xw-vs-rates { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; }
.xw-vs-sub { margin-bottom: 9px; color: #a98d50; font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; }
.xw-stage { display: grid; grid-template-columns: 82px 1fr 44px; align-items: center; gap: 10px; margin-bottom: 8px; }
.xw-stage-lvl { color: #cfc4b1; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.xw-stage-bar { height: 12px; border-radius: 6px; background: rgba(0,0,0,.45); border: 1px solid rgba(212,175,55,.14); overflow: hidden; }
.xw-stage-bar span {
    display: block; height: 100%; border-radius: 6px;
    background: linear-gradient(90deg, #8d650d, #e7b83e 70%, #ffe08a);
    box-shadow: 0 0 10px rgba(231,184,62,.35);
}
.xw-stage-x { color: #efc557; font-family: var(--serif); font-size: 17px; text-align: right; }
.xw-vs-mini { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
.xw-vs-mini div {
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
    padding: 9px 11px; border: 1px solid rgba(212,175,55,.14); border-radius: 8px; background: rgba(0,0,0,.3);
}
.xw-vs-mini span { color: #a39a8b; font-size: 11.5px; }
.xw-vs-mini b { color: #efc557; font-family: var(--serif); font-size: 16px; }

.xw-vs-grid { columns: 2; column-gap: 11px; margin-top: 12px; }
.xw-vs-card {
    position: relative; overflow: hidden; padding: 15px 16px 13px;
    border: 1px solid rgba(var(--accent),.24); border-radius: 12px;
    background:
        radial-gradient(circle at 0% 0%, rgba(var(--accent),.13), transparent 42%),
        linear-gradient(160deg, rgba(24,21,15,.97), rgba(8,8,7,.99));
    box-shadow: inset 3px 0 0 rgba(var(--accent),.65), 0 10px 22px rgba(0,0,0,.24);
    transition: border-color .18s ease, transform .18s ease;
}
.xw-vs-card:hover { border-color: rgba(var(--accent),.45); }
.xw-vs-card { display: block; width: 100%; margin: 0 0 11px; break-inside: avoid; -webkit-column-break-inside: avoid; }
.xw-vs-card-head { display: flex; align-items: center; gap: 11px; margin-bottom: 10px; }
.xw-vs-card-head .xw-card-icon { width: 36px; height: 36px; font-size: 14px; }
.xw-vs-card-head h3 { margin: 0 !important; color: rgb(var(--accent)); font-family: var(--serif); font-size: 17px; font-weight: 700; }
.xw-vs-list { list-style: none; margin: 0; padding: 0; }
.xw-vs-list li {
    position: relative; margin: 0 0 7px; padding-left: 22px; color: #cfc4b1; font-size: 12.8px; line-height: 1.5;
}
.xw-vs-list li:last-child { margin-bottom: 0; }
.xw-vs-list li::before {
    content: "\f00c"; font-family: "Font Awesome 6 Free"; font-weight: 900;
    position: absolute; left: 0; top: 1px; color: rgb(var(--accent)); font-size: 11px;
}
.xw-vs-list b { color: #f3e7c9; }

@media (max-width: 900px) {
    .xw-vs-hero { grid-template-columns: repeat(3, minmax(0,1fr)); }
}
@media (max-width: 640px) {
    .xw-vs-hero { grid-template-columns: repeat(2, minmax(0,1fr)); }
    .xw-vs-hl b { font-size: 22px; }
    .xw-vs-rates { grid-template-columns: 1fr; }
    .xw-vs-grid { columns: 1; }
    .xw-stage { grid-template-columns: 84px 1fr 38px; gap: 8px; }
    .xw-stage-lvl { white-space: nowrap; font-size: 12px; }
}
/* ============================================================
   KALENDARZ EVENTÓW
   ============================================================ */
.xw-cals { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; }
.xw-cal { padding: 12px; border: 1px solid rgba(212,175,55,.14); border-radius: 10px; background: rgba(0,0,0,.28); }
.xw-cal-title {
    margin-bottom: 9px; color: #e2c472; font-family: var(--serif); font-size: 15px; text-align: center; text-transform: capitalize;
}
.xw-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; }
.xw-cal-dow { color: #8a8175; font-size: 9.5px; font-weight: 800; text-align: center; text-transform: uppercase; padding-bottom: 3px; }
.xw-cal-day {
    position: relative; aspect-ratio: 1 / 1;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid transparent; border-radius: 6px;
    color: #9a9184; font-size: 11.5px; font-variant-numeric: tabular-nums;
}
.xw-cal-day.is-empty { border: 0; }
.xw-cal-day.has-ev {
    color: #1a1407; font-weight: 800;
    background: linear-gradient(160deg, rgba(var(--evc),1), rgba(var(--evc),.72));
    box-shadow: 0 2px 8px rgba(var(--evc),.22);
    cursor: help;
}
.xw-cal-day.is-today { border-color: #fff0aa; box-shadow: 0 0 0 1px rgba(255,240,170,.35); }
.xw-cal-more {
    position: absolute; top: 1px; right: 3px; font-size: 8px; font-style: normal; font-weight: 900; color: rgba(0,0,0,.55);
}

.xw-evs { display: grid; gap: 9px; }
.xw-ev {
    display: grid; grid-template-columns: 54px 1fr; gap: 12px; align-items: center;
    padding: 11px 13px; border: 1px solid rgba(var(--evc),.28); border-radius: 10px;
    background: linear-gradient(120deg, rgba(var(--evc),.10), rgba(8,8,7,.96) 45%);
}
.xw-ev.is-live { border-color: rgba(var(--evc),.6); box-shadow: 0 0 14px rgba(var(--evc),.12); }
.xw-ev-date {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 6px 0; border: 1px solid rgba(var(--evc),.35); border-radius: 9px; background: rgba(0,0,0,.35);
}
.xw-ev-date b { color: rgb(var(--evc)); font-family: var(--serif); font-size: 21px; line-height: 1; }
.xw-ev-date span { color: #8a8175; font-size: 9.5px; text-transform: uppercase; letter-spacing: .5px; }
.xw-ev-name { color: #f1e6cf; font-family: var(--serif); font-size: 16px; }
.xw-ev-when { color: #9a9184; font-size: 11.5px; font-variant-numeric: tabular-nums; }

@media (max-width: 640px) {
    .xw-cals { grid-template-columns: 1fr; }
    .xw-ev { grid-template-columns: 46px 1fr; gap: 10px; }
}
/* minimapa na stronie bossa */
.xw-minimap { float: right; width: 190px; margin: 0 0 10px 14px; text-align: center; }
.xw-minimap img {
    width: 100%; border: 1px solid rgba(212,175,55,.3); border-radius: 9px; background: #0b0a08;
    box-shadow: 0 8px 18px rgba(0,0,0,.35);
}
.xw-minimap span { display: block; margin-top: 4px; color: #6f685e; font-size: 10px; letter-spacing: .4px; text-transform: uppercase; }
@media (max-width: 640px) {
    .xw-minimap { float: none; width: 100%; max-width: 260px; margin: 0 auto 10px; }
}
/* przycisk "i N innych" + okienko ze zrodlami */
.xw-more {
    padding: 3px 9px; border: 1px dashed rgba(212,175,55,.45); border-radius: 5px;
    background: rgba(212,175,55,.06); color: #e2c472; font: inherit; font-size: 11px; font-weight: 700; cursor: pointer;
    white-space: nowrap;
}
.xw-more:hover { border-style: solid; background: rgba(212,175,55,.14); color: #fff0aa; }

.xw-modal {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center; padding: 16px;
    background: rgba(0,0,0,.72); backdrop-filter: blur(2px);
}
.xw-modal[hidden] { display: none; }
.xw-modal-box {
    width: 100%; max-width: 560px; max-height: 80vh; overflow-y: auto;
    border: 1px solid var(--border-strong); border-radius: 12px;
    background: linear-gradient(155deg, rgba(19,17,13,.99), rgba(8,8,7,.995));
    box-shadow: 0 24px 60px rgba(0,0,0,.6);
}
.xw-modal-top {
    position: sticky; top: 0; z-index: 2;
    display: flex; align-items: center; gap: 10px; padding: 12px 14px;
    border-bottom: 1px solid rgba(212,175,55,.18);
    background: linear-gradient(180deg, rgba(29,25,16,.99), rgba(13,12,9,.99));
}
.xw-modal-head { display: flex; align-items: center; gap: 10px; color: #efc557; font-family: var(--serif); font-size: 17px; }
.xw-modal-head img { width: 32px; height: 32px; object-fit: contain; }
.xw-modal-x {
    margin-left: auto; width: 30px; height: 30px; flex: 0 0 30px;
    border: 1px solid rgba(212,175,55,.25); border-radius: 7px; background: rgba(0,0,0,.35);
    color: #cdbf9f; font-size: 13px; cursor: pointer;
}
.xw-modal-x:hover { color: #fff; border-color: rgba(212,175,55,.5); }
.xw-modal-body { padding: 4px 14px 14px; }
.xw-modal-body .xw-block { margin-top: 12px; }
@media (max-width: 640px) {
    .xw-modal { padding: 10px; align-items: flex-end; }
    .xw-modal-box { max-height: 88vh; }
}
/* siatka minimapek (np. skrzynie w questach) */
.xw-maps { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.xw-maps figure { margin: 0; text-align: center; }
.xw-maps img {
    width: 100%; border: 1px solid rgba(212,175,55,.25); border-radius: 9px; background: #0b0a08;
    box-shadow: 0 6px 14px rgba(0,0,0,.3);
}
.xw-maps figcaption { margin-top: 4px; color: #8a8175; font-size: 10.5px; }
/* Weekly Delivery: lista przedmiotow z pul (szukajka + zwijane pule) */
.xw-del-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.xw-del-item {
    display: grid; grid-template-columns: 32px 1fr; grid-template-rows: auto auto; align-items: center;
    column-gap: 8px; padding: 6px 8px;
    border: 1px solid rgba(212,175,55,.12); border-radius: 8px; background: rgba(0,0,0,.28);
}
.xw-del-item img { grid-row: span 2; width: 32px; height: 32px; object-fit: contain; }
.xw-del-name { color: #e8e0d3; font-size: 12px; line-height: 1.25; }
.xw-del-count { color: #e2c472; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
.xw-del-mon { grid-column: 2; color: #7d756a; font-size: 10px; line-height: 1.2; }
@media (max-width: 640px) {
    .xw-del-items { grid-template-columns: 1fr 1fr; gap: 5px; }
    .xw-del-item { grid-template-columns: 26px 1fr; padding: 5px 6px; }
    .xw-del-item img { width: 26px; height: 26px; }
    .xw-del-name { font-size: 11px; }
    .xw-del-mon { display: none; }
}

/* zrzut ekranu z gry (np. NPC przy opisie systemu) */
.xw-shot { float: right; width: 300px; max-width: 45%; margin: 0 0 12px 16px; }
.xw-shot img {
    width: 100%; display: block; image-rendering: pixelated;
    border: 1px solid rgba(212,175,55,.35); border-radius: 10px;
    box-shadow: 0 10px 24px rgba(0,0,0,.45);
}
.xw-shot figcaption { margin-top: 5px; color: #8a8175; font-size: 10.5px; text-align: center; }
@media (max-width: 640px) {
    .xw-shot { float: none; width: 100%; max-width: 100%; margin: 0 0 12px; }
}

/* screen obok tresci: wspolny wiersz z krokami, wyrownany gora i dolem */
.xw-shotrow { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: stretch; }
.xw-shotrow .xw-steps { margin: 0; }
.xw-shotrow .xw-steps li:last-child { margin-bottom: 0; }
.xw-shotrow .xw-shot { float: none; width: 100%; max-width: 100%; margin: 0; display: flex; flex-direction: column; }
.xw-shotrow .xw-shot img { flex: 1 1 auto; height: 100%; min-height: 0; object-fit: cover; object-position: center; }
@media (max-width: 860px) {
    .xw-shotrow { grid-template-columns: 1fr; }
    .xw-shotrow .xw-shot { order: -1; margin: 0 0 12px; }
    .xw-shotrow .xw-shot img { height: auto; object-fit: contain; }
}