/* BiS List (bis.html) */
[hidden] { display: none !important; }
:root { --cc: var(--gold); --q2: #1eff00; --q3: #0070dd; --q3t: #4aa3ff; --q4: #a335ee; --q4t: #c77dff; }
.bis { max-width: 1240px; margin: 0 auto; padding: 34px 16px 10px; }
.bis-top { text-align: center; }
.bis-top h1 { margin: 0; font-family: var(--display); font-weight: 800; letter-spacing: 1.5px; color: #f3ead0; font-size: clamp(28px, 4vw, 44px); }
.bis-top > p { margin: 10px auto 22px; color: var(--muted); max-width: 680px; }

/* class, spec and list buttons */
.bis-classes { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; }
.bc { --cc: var(--gold); display: inline-flex; align-items: center; gap: 8px; padding: 9px 15px 9px 11px; cursor: pointer; font: inherit; font-weight: 700;
  color: var(--cc); border-radius: 11px; background: #131828; border: 1px solid #2a3150; transition: transform .15s, border-color .15s, background .15s; }
.bc svg { width: 24px; height: 24px; }
.bc:hover { transform: translateY(-1px); border-color: color-mix(in srgb, var(--cc) 60%, transparent); }
.bc[aria-pressed="true"] { background: color-mix(in srgb, var(--cc) 16%, #131828); border-color: var(--cc);
  box-shadow: 0 0 0 1px var(--cc) inset, 0 0 18px color-mix(in srgb, var(--cc) 25%, transparent); }
.bis-specs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; animation: bis-in .25s ease; }
.bs { font: inherit; font-weight: 700; font-size: 15px; cursor: pointer; padding: 10px 22px; border-radius: 999px; color: #e6e1cf; background: #171c2e;
  border: 1px solid color-mix(in srgb, var(--cc) 40%, #2c3350); }
.bs:hover { border-color: var(--cc); color: #fff; }
.bs[aria-pressed="true"] { color: #10131c; background: var(--cc); border-color: var(--cc); }
.bis-lists { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 14px; margin-top: 18px; animation: bis-in .25s ease; }
.bl { font: inherit; font-weight: 800; font-size: 15.5px; cursor: pointer; padding: 12px 26px; border-radius: 12px; display: inline-flex; align-items: center; gap: 9px;
  color: #e6e1cf; background: #151a2b; border: 1px solid #2c3350; transition: transform .15s; }
.bl i { width: 12px; height: 12px; border-radius: 3px; }
.bl[data-list="dungeon"] i { background: var(--q3); box-shadow: 0 0 10px var(--q3); }
.bl[data-list="raid"] i { background: var(--q4); box-shadow: 0 0 10px var(--q4); }
.bl:hover { transform: translateY(-1px); }
.bl[data-list="dungeon"][aria-pressed="true"] { color: #fff; background: linear-gradient(180deg, #0a3f7d, #072a54); border-color: #2f8bff; }
.bl[data-list="raid"][aria-pressed="true"] { color: #fff; background: linear-gradient(180deg, #5a1e86, #3b1258); border-color: #b66cff; }
.bis-levels { display: inline-flex; border-radius: 10px; overflow: hidden; border: 1px solid #2c3350; }
.bis-levels span { padding: 0 10px; color: var(--muted); font-size: 13px; align-self: center; }
.bis-levels button { font: inherit; font-weight: 700; font-size: 13.5px; cursor: pointer; padding: 8px 12px; color: #c9cfdf; background: #151a2b; border: 0; border-left: 1px solid #2c3350; }
.bis-levels button[aria-pressed="true"] { color: #1b1300; background: linear-gradient(#ffcc33, #e0a000); }
@keyframes bis-in { from { opacity: 0; transform: translateY(-4px); } }

/* results */
.bis-out { margin-top: 26px; }
.bis-hint { text-align: center; color: var(--muted); padding: 40px 0; } .bis-hint.err { color: #ff9b8a; }
.bis-head h2 { margin: 0; font-family: var(--display); color: #f3ead0; font-size: clamp(22px, 3vw, 30px); }
.bis-head h2 .q3 { color: var(--q3t); } .bis-head h2 .q4 { color: var(--q4t); }
.bis-head p { margin: 8px 0 18px; color: var(--muted); } .bis-head a, .bis-note a { color: var(--gold); }
.bis-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.slot { padding: 12px 12px 10px; border-radius: 12px; background: #11151f; border: 1px solid #232a40; min-width: 0; }
.slot.wide { grid-column: 1 / -1; }
.slot h3 { margin: 0 0 8px; font-size: 13px; letter-spacing: 1.5px; text-transform: uppercase; color: color-mix(in srgb, var(--cc) 75%, #f3ead0); }
.slot .none { margin: 6px 0; color: var(--muted); font-size: 13.5px; }
.bi-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); gap: 6px; }
.bi { min-width: 0; } .alt, .wopt { min-width: 0; }
.bi { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: 9px; cursor: default; background: #0e121c; border: 1px solid #1d2336; }
.bi:hover { border-color: #3a4262; background: #131829; }
.bi.best { background: linear-gradient(90deg, color-mix(in srgb, var(--cc) 10%, #0e121c), #0e121c 70%); border-color: #2a3150; }
.bi-ic { flex: none; width: 36px; height: 36px; border-radius: 6px; overflow: hidden; display: grid; place-items: center; background: #0b0b0b; border: 2px solid #555; }
.bi-ic.big { width: 46px; height: 46px; }
.bi-ic img, .bi-ic .ic-letter { width: 100%; height: 100%; object-fit: cover; display: grid; place-items: center; }
.bi-ic .ic-letter { font-family: var(--display); font-weight: 800; color: #cfc6a6; background: radial-gradient(circle at 40% 30%, #3a3f55, #15182a); }
.bi-ic.q3 { border-color: var(--q3); } .bi-ic.q4 { border-color: var(--q4); } .bi-ic.q2 { border-color: var(--q2); }
.bi-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.bi-txt b { font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
b.q3, .q3 { color: var(--q3t); } b.q4, .q4 { color: var(--q4t); } b.q2 { color: var(--q2); }
.bi-meta { color: #9aa1b5; font-size: 12px; }
.bi-stats { color: #c9cfdf; font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bi-tag { flex: none; font-size: 11px; font-weight: 800; letter-spacing: .5px; padding: 2px 8px; border-radius: 999px; color: #1b1300; background: linear-gradient(#ffcc33, #e0a000); }
.bi-rank { flex: none; color: var(--muted); font-size: 12px; font-weight: 700; }
.alt { margin-top: 6px; } .alt summary { cursor: pointer; color: var(--muted); font-size: 13px; padding: 2px 4px; }
.alt summary:hover { color: #fff; } .alt .bi-list { margin-top: 6px; }
.wpn { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.wopt { padding: 10px; border-radius: 10px; border: 1px dashed #2a3150; }
.wopt.on { border-style: solid; border-color: color-mix(in srgb, var(--cc) 55%, #2a3150); }
.wopt h4 { margin: 0 0 8px; color: #f3ead0; font-size: 14.5px; display: flex; align-items: center; gap: 8px; }
.wopt .sub { margin: 8px 0 4px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: 1px; }
.bis-note { margin: 18px 0 0; color: var(--muted); font-size: 13px; }

/* item tooltip (game style) */
.bis-tip { position: fixed; z-index: 50; max-width: 330px; padding: 9px 11px; pointer-events: none; border-radius: 5px; font-size: 13.5px; line-height: 1.4;
  background: rgba(7, 10, 26, .97); border: 1px solid #5d6177; box-shadow: 0 8px 26px rgba(0, 0, 0, .6); }
.tt-n { font-weight: 800; font-size: 15px; } .tt-n.q3 { color: var(--q3t); } .tt-n.q4 { color: var(--q4t); }
.tt-l { color: #ffd100; } .tt-w { color: #fff; } .tt-g { color: #1eff00; } .tt-s { color: var(--muted); margin-top: 4px; font-size: 12px; }
.tt-row { display: flex; justify-content: space-between; gap: 18px; }

@media (max-width: 1000px) { .bis-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  .bis-grid, .wpn { grid-template-columns: 1fr; }
  .bc { padding: 7px 10px 7px 8px; font-size: 13.5px; } .bc svg { width: 18px; height: 18px; }
  .bl { padding: 10px 18px; }
}