/* Full Items Only button distinct style */
.full-items-btn {
  background: linear-gradient(90deg, #14b8a6 0%, #06b6d4 100%);
  color: #fff;
  border: 2px solid #14b8a6;
  font-weight: 700;
  border-radius: 18px;
  box-shadow: 0 2px 12px rgba(20,184,166,0.12);
  margin-left: 16px;
  padding: 10px 22px;
  font-size: 15px;
  letter-spacing: 0.03em;
  transition: background 0.2s, color 0.2s, border 0.2s;
}
.full-items-btn.active {
  background: linear-gradient(90deg, #06b6d4 0%, #14b8a6 100%);
  color: #fff;
  border-color: #06b6d4;
}
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@500;600;700&display=swap');

:root{
  --bg:#0b0f16; --fg:#e6edf3; --muted:#9aa4b2; --border:#1e2633;
  --thead:#121826; --row:#0f1520; --accent:#93c5fd;
}
*{box-sizing:border-box}
body{
  margin:24px; background:var(--bg); color:var(--fg);
  font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans";
}
.header{margin-bottom:12px}
.title{margin:0; font-weight:750}
.subtitle{color:var(--muted); font-size:12px}
.controls{display:flex; gap:12px; align-items:end; margin:16px 0 8px}
.control{display:flex; flex-direction:column; gap:6px}
.control label{font-size:12px; color:var(--muted)}
.control.grow{flex:1}
.control input, .control select{
  background:var(--row); color:var(--fg); border:1px solid var(--border);
  border-radius:10px; padding:8px 10px; outline:none;
}
.card{
  border:1px solid var(--border); background:var(--row);
  border-radius:12px; padding:12px 14px; overflow:auto;
}
.alert{
  border:1px solid #7c2d12; background:#1f130a; color:#fdba74;
  padding:8px 10px; border-radius:8px; margin-bottom:10px; font-size:13px;
}
table{border-collapse:collapse; width:100%}
th,td{border-bottom:1px solid var(--border); padding:10px 12px; font-size:14px; vertical-align:top}
thead th{position:sticky; top:0; background:var(--thead); cursor:pointer; user-select:none; position:relative; padding-right:24px}
thead th:hover{background:color-mix(in oklab, var(--thead), white 8%)}
thead th.sorted-asc::after{content:"▲"; position:absolute; right:8px; top:50%; transform:translateY(-50%); color:var(--accent); font-size:10px}
thead th.sorted-desc::after{content:"▼"; position:absolute; right:8px; top:50%; transform:translateY(-50%); color:var(--accent); font-size:10px}
tbody tr:nth-child(even){background:color-mix(in oklab, var(--row), black 4%)}
tbody tr:hover{background:color-mix(in oklab, var(--row), white 6%)}
.left{text-align:left}
.right{text-align:right; font-variant-numeric:tabular-nums}

/* Item name and icon styling */
.item-cell{display:flex; align-items:center; gap:12px}
.item-cell a{
  color:inherit; text-decoration:none; display:flex; align-items:center; gap:12px;
  transition:all 0.2s ease;
}
.item-cell a:hover{color:var(--accent)}
.item-cell a:hover .item-icon{border-color:var(--accent); transform:scale(1.05)}
.item-icon{
  width:52px; height:52px; border-radius:8px; 
  border:2px solid var(--border); 
  object-fit:cover; flex-shrink:0;
  transition:all 0.2s ease;
  background:linear-gradient(135deg, rgba(0,0,0,0.3), rgba(0,0,0,0.1));
}
.item-name{
  font-family:'Inter', ui-sans-serif, system-ui, -apple-system, sans-serif;
  font-weight:600; font-size:14px; letter-spacing:0.01em;
  line-height:1.3;
}

/* Stats cell styling */
.passives-column{min-width:260px; max-width:380px}
.passives-list{display:flex; flex-direction:column; gap:6px; font-size:13px; line-height:1.35}
.passive-item{display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 8px; padding-left:8px; border-left:2px solid var(--accent); cursor:help}
.passive-name{font-weight:600}
.passive-stat{color:var(--fg)}
.passive-stat.zero{color:var(--muted)}
.passive-stat.uncounted{color:var(--muted); text-decoration:line-through; text-decoration-color:#b45309}
.passive-item.unvalued{border-left:2px dashed #b45309; background:color-mix(in oklab, var(--row), #fbbf24 8%); border-radius:0 6px 6px 0; padding:2px 6px 2px 8px}
.passive-item.unvalued .passive-name{color:#fbbf24; font-style:italic; font-weight:500}
.passive-tag{font-size:10px; text-transform:uppercase; letter-spacing:.04em; color:#fbbf24; border:1px solid #b45309; border-radius:999px; padding:0 6px}
.passives-legend{font-size:12px; color:var(--muted); margin:0 0 10px; line-height:1.9}
.passives-legend .sample{display:inline-flex; margin:0 2px; cursor:default}
.method-note{font-size:12px; color:var(--muted); margin:0 0 10px}

/* Two method columns (ItemLOL Model, Wiki) share one table */
thead th.group-head{text-align:center; cursor:default; padding-right:12px; border-bottom:1px solid var(--border)}
thead th.group-head:hover{background:var(--thead)}
thead th.group-start, td.group-start{border-left:1px solid var(--border)}
td.eff{font-weight:600}
td.eff.predicted{font-style:italic; color:var(--muted); font-weight:500}
.eff-alt{font-size:11px; color:var(--muted); font-weight:400; font-style:normal; white-space:nowrap}

/* A stat inside a passive: label, its gold value, and where the price came from */
.passive-stat-wrap{display:inline-flex; align-items:baseline; gap:4px; cursor:help}
.passive-gold{color:var(--accent); font-variant-numeric:tabular-nums; white-space:nowrap}
.passive-gold.none{color:var(--muted)}
.passive-gold.not-counted{color:var(--muted); font-style:italic}
.passive-estimate .passive-gold{color:var(--muted)}
.src-badge{font-size:10px; text-transform:uppercase; letter-spacing:.04em; border:1px solid var(--border); color:var(--muted); border-radius:999px; padding:0 6px; white-space:nowrap}
.src-fitted, .src-wiki{color:#86efac; border-color:#166534}
.src-wiki-same-stat, .src-converted{color:#93c5fd; border-color:#1e3a8a}
.src-proxy, .src-merged{color:#fbbf24; border-color:#b45309}
.src-rough, .src-unpriced{color:var(--muted); border-color:var(--border)}
.src-typical{color:#c4b5fd; border-color:#5b21b6}
.passive-gold.typical-only{color:#c4b5fd; font-style:italic}
.stats-list{display:flex; flex-direction:column; gap:4px; font-size:13px; line-height:1.3}
.stat-item{color:var(--fg); white-space:nowrap}
.stat-item:not(:last-child){margin-bottom:2px}

.footer{color:var(--muted); font-size:12px; margin-top:16px; display:grid; gap:4px}
.legal-links{margin-top:8px}
.legal-links a{color:var(--accent); text-decoration:none; transition:color 0.2s ease}
.legal-links a:hover{color:color-mix(in oklab, var(--accent), white 20%); text-decoration:underline}

/* Filter Buttons */
.filters{margin:12px 0; display:flex; flex-direction:column; gap:12px}
.filter-group{display:flex; flex-wrap:wrap; gap:8px; align-items:flex-start}
.filter-label{font-size:12px; color:var(--muted); min-width:80px; font-weight:500; display:flex; gap:8px; align-items:center; flex-shrink:0}
.stat-groups{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.stat-group{
  display:flex; flex-wrap:wrap; gap:6px; padding:4px 8px;
  border:1px solid var(--border); border-radius:8px;
  background:color-mix(in oklab, var(--row), transparent 50%);
}
.clear-btn{
  background:transparent; color:var(--accent); border:none;
  font-size:11px; cursor:pointer; padding:2px 6px; text-decoration:underline;
  transition:color 0.2s ease;
}
.clear-btn:hover{color:color-mix(in oklab, var(--accent), white 20%)}
.filter-btn{
  background:var(--row); color:var(--fg); border:1px solid var(--border);
  border-radius:8px; padding:6px 14px; font-size:13px; cursor:pointer;
  transition:all 0.2s ease; outline:none; font-weight:500;
}
.filter-btn:hover{background:color-mix(in oklab, var(--row), white 8%); border-color:var(--accent)}
.filter-btn.active{background:var(--accent); color:#0b0f16; border-color:var(--accent)}
.filter-btn.active:hover{background:color-mix(in oklab, var(--accent), white 12%)}

/* Privacy Policy Styles */
.privacy-content{max-width:800px; line-height:1.6}
.privacy-content h2{color:var(--accent); margin-top:0}
.privacy-content h3{color:var(--fg); margin-top:2em; margin-bottom:0.5em}
.privacy-content h4{color:var(--fg); margin-top:1.5em; margin-bottom:0.5em}
.privacy-content ul{margin:0.5em 0; padding-left:1.5em}
.privacy-content li{margin:0.25em 0}
.privacy-content a{color:var(--accent); text-decoration:underline}
.privacy-content a:hover{text-decoration:none}

/* Cookie Banner Styles */
.cookie-banner{
  position:fixed; bottom:0; left:0; right:0; background:var(--row);
  border-top:1px solid var(--border); padding:16px; z-index:1000;
  box-shadow:0 -2px 10px rgba(0,0,0,0.3);
}
.cookie-banner.hidden{display:none}
.cookie-content{max-width:1200px; margin:0 auto; display:flex; align-items:center; gap:16px; flex-wrap:wrap}
.cookie-text{flex:1; min-width:300px; font-size:14px; line-height:1.4}
.cookie-buttons{display:flex; gap:8px; flex-wrap:wrap}
.cookie-btn{
  background:var(--accent); color:var(--bg); border:none; border-radius:6px;
  padding:8px 16px; cursor:pointer; font-size:13px; font-weight:500;
}
.cookie-btn.secondary{background:var(--border); color:var(--fg)}
.cookie-btn:hover{opacity:0.9}
.cookie-link{color:var(--accent); text-decoration:underline; font-size:13px}
.cookie-link:hover{text-decoration:none}

/* Accessibility */
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}

/* SEO and Semantic Improvements */
main{display:block}
[role="columnheader"]:focus{outline:2px solid var(--accent); outline-offset:2px}

/* ===== Footer: feedback link and visit counter ===== */
.link-btn{
  background:none; border:none; padding:0; margin:0; font:inherit; cursor:pointer;
  color:var(--accent); text-decoration:none; transition:color 0.2s ease;
}
.link-btn:hover{color:color-mix(in oklab, var(--accent), white 20%); text-decoration:underline}
.link-btn:focus-visible, .legal-links a:focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:3px}
.visit-counter{color:var(--muted); white-space:nowrap}
.visit-icon{vertical-align:-2px; margin-right:2px}
.visit-counter[hidden], #feedback-link-wrap[hidden], .feedback-fab[hidden]{display:none !important}

/* ===== Persistent feedback button (desktop only) ===== */
.feedback-fab{
  position:fixed; right:16px; bottom:16px; z-index:900;
  background:var(--row); color:var(--muted); border:1px solid var(--border); border-radius:999px;
  padding:7px 14px; font-size:12px; font-weight:500; cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,0.35);
  transition:color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.feedback-fab:hover{color:var(--fg); border-color:var(--accent)}
.feedback-fab:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
/* Small screens and touch devices: the footer link is enough, and a floating button could cover
   controls, tables, dropdowns or links. Also hidden while the cookie banner is showing, and in print. */
@media (max-width: 899px), (hover: none){ .feedback-fab{display:none} }
body:has(.cookie-banner:not(.hidden)) .feedback-fab{display:none}
@media print{ .feedback-fab, .feedback-dialog{display:none !important} }

/* ===== Feedback dialog ===== */
.feedback-dialog{
  width:min(480px, calc(100vw - 32px)); max-height:calc(100vh - 32px); overflow:auto;
  padding:0; border:1px solid var(--border); border-radius:14px;
  background:var(--row); color:var(--fg); box-shadow:0 16px 48px rgba(0,0,0,0.6);
}
.feedback-dialog::backdrop{background:rgba(5,8,13,0.72)}
.feedback-dialog form{padding:18px 20px 16px; display:flex; flex-direction:column; gap:14px}
.fb-head{display:flex; align-items:center; justify-content:space-between; gap:12px}
.fb-head h2{margin:0; font-size:18px; font-weight:700}
.fb-x{
  background:none; border:none; color:var(--muted); font-size:24px; line-height:1; cursor:pointer;
  padding:2px 8px; border-radius:6px;
}
.fb-x:hover{color:var(--fg)}
.fb-desc{margin:-6px 0 0; color:var(--muted); font-size:13px}
.fb-field{display:flex; flex-direction:column; gap:6px}
.fb-field label{font-size:13px; color:var(--fg); font-weight:500}
.fb-req{color:var(--muted); font-weight:400}
.fb-field select, .fb-field input, .fb-field textarea{
  background:var(--bg); color:var(--fg); border:1px solid var(--border); border-radius:10px;
  padding:9px 11px; font:inherit; font-size:14px; width:100%;
}
.fb-field textarea{resize:vertical; min-height:120px; line-height:1.45}
.fb-field select:focus-visible, .fb-field input:focus-visible, .fb-field textarea:focus-visible{
  outline:2px solid var(--accent); outline-offset:1px; border-color:var(--accent);
}
.fb-hint{font-size:11px; color:var(--muted); text-align:right}
/* honeypot: off-screen (not display:none, which some bots detect) and invisible to people and screen readers */
.fb-hp{position:absolute; left:-10000px; top:auto; width:1px; height:1px; overflow:hidden}
.fb-context{margin:0; font-size:11px; color:var(--muted); line-height:1.45}
.fb-context a{color:var(--accent)}
.fb-status{min-height:0; font-size:13px}
.fb-status.ok{
  color:#86efac; background:#0f2318; border:1px solid #166534; border-radius:8px; padding:8px 10px;
}
.fb-error{
  border:1px solid #7c2d12; background:#1f130a; color:#fdba74; border-radius:8px; padding:8px 10px; font-size:13px;
}
.fb-error a{color:#fed7aa; text-decoration:underline}
.fb-actions{display:flex; justify-content:flex-end; gap:8px}
.fb-btn{
  background:var(--accent); color:var(--bg); border:1px solid var(--accent); border-radius:8px;
  padding:8px 16px; font-size:13px; font-weight:600; cursor:pointer;
}
.fb-btn.secondary{background:transparent; color:var(--fg); border-color:var(--border)}
.fb-btn:hover:not(:disabled){filter:brightness(1.08)}
.fb-btn:disabled{opacity:0.6; cursor:default}
.fb-btn:focus-visible, .fb-x:focus-visible{outline:2px solid var(--fg); outline-offset:2px}
@media (max-width: 480px){ .feedback-dialog form{padding:16px 14px 14px} }

/* ===== Feedback button in the page header (top right on desktop) ===== */
.header{position:relative}
.header-feedback{
  background:var(--row); color:var(--muted); border:1px solid var(--border); border-radius:999px;
  padding:7px 14px; font-size:12px; font-weight:500; cursor:pointer;
  transition:color 0.2s ease, border-color 0.2s ease;
}
.header-feedback:hover{color:var(--fg); border-color:var(--accent)}
.header-feedback:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
.header-feedback[hidden]{display:none !important}
@media (min-width: 900px){ .header-feedback{position:absolute; top:6px; right:0} }
@media (max-width: 899px){ .header-feedback{margin-top:10px} }
@media print{ .header-feedback{display:none !important} }


/* ===== Stat values, efficiency readings and tooltips ===== */
.stat-item{display:flex; align-items:baseline; gap:6px; white-space:nowrap}
.stat-item .passive-gold{margin-left:2px}
.has-tip{cursor:help}
.eff-main.has-tip, .eff-alt.has-tip{text-decoration:underline dotted color-mix(in oklab, var(--muted), transparent 50%); text-underline-offset:3px}
.eff-alt{white-space:normal}
.eff-grow{font-size:11px; color:#c4b5fd; font-weight:400; font-style:normal; margin-top:2px; max-width:210px; margin-left:auto; line-height:1.3}
.eff-path{font-size:11px; color:#86efac; font-weight:400; font-style:normal; max-width:210px; margin-left:auto; line-height:1.3}
.eff-grow.more, .eff-path.more{color:var(--muted)}
.eff-grow + .eff-path, .eff-alt + .eff-grow{margin-top:4px}

.tip{
  position:fixed; z-index:1200; min-width:200px; max-width:min(380px, calc(100vw - 16px));
  background:#0e1420; border:1px solid #2b364b; border-radius:10px; padding:10px 12px;
  box-shadow:0 10px 30px rgba(0,0,0,.6); font-size:12.5px; line-height:1.4; pointer-events:none; text-align:left;
  font-weight:400; font-style:normal; white-space:normal;
}
.tip[hidden]{display:none}
.tip-head{font-weight:700; font-size:13px}
.tip-sub{color:var(--muted); margin-top:1px}
.tip-rows{display:grid; grid-template-columns:auto auto 1fr; gap:3px 12px; margin:8px 0 2px}
.tip-row{display:contents}
.tip-v{text-align:right; font-variant-numeric:tabular-nums; color:var(--accent)}
.tip-s{color:var(--muted)}
.tip-row.strong .tip-l{font-weight:600}
.tip-row.muted .tip-l, .tip-row.muted .tip-v{color:var(--muted)}
.tip-notes{margin:8px 0 0; padding-left:16px; color:#c7d0dc}
.tip-notes li{margin:3px 0}
.tip-foot{margin-top:8px; padding-top:6px; border-top:1px solid var(--border); color:var(--muted); font-variant-numeric:tabular-nums}

/* ===== The legend above the table ===== */
.legend{border:1px solid var(--border); border-radius:10px; margin:0 0 12px; background:color-mix(in oklab, var(--row), black 8%)}
.legend[hidden]{display:none}
.legend summary{cursor:pointer; padding:9px 14px; font-size:13px; font-weight:600; list-style:none; user-select:none}
.legend summary::-webkit-details-marker{display:none}
.legend summary::before{content:"\25B8"; display:inline-block; width:14px; color:var(--accent); transition:transform .15s}
.legend[open] summary::before{transform:rotate(90deg)}
.legend-hint{color:var(--muted); font-weight:400; font-size:11px}
.legend-grid{display:grid; grid-template-columns:repeat(auto-fit, minmax(280px, 1fr)); gap:4px 26px; padding:2px 14px 14px}
.legend-col h3{margin:6px 0 6px; font-size:12px; text-transform:uppercase; letter-spacing:.05em; color:var(--accent)}
.legend-lead{margin:0 0 8px; font-size:12px; color:var(--muted); line-height:1.5}
.legend dl{margin:0; display:grid; grid-template-columns:max-content 1fr; gap:6px 12px; align-items:baseline; font-size:12px; line-height:1.45}
.legend dt{white-space:nowrap; color:var(--fg)}
.legend dd{margin:0; color:var(--muted)}
.mark-grow{color:#c4b5fd}
.mark-path{color:#86efac}

/* ===== Column headings that follow the window, and the back-to-top button ===== */
#sticky-head{position:fixed; top:0; z-index:800; overflow:hidden; background:var(--thead); border-bottom:1px solid var(--border); box-shadow:0 6px 16px rgba(0,0,0,.45)}
#sticky-head[hidden]{display:none}
.sticky-table{table-layout:fixed; border-collapse:collapse; width:auto}
.sticky-table thead th{cursor:pointer}
.to-top{
  position:fixed; right:16px; bottom:64px; z-index:890; background:var(--row); color:var(--fg);
  border:1px solid var(--border); border-radius:999px; padding:8px 14px; font-size:12px; font-weight:600; cursor:pointer;
  box-shadow:0 2px 10px rgba(0,0,0,0.35); opacity:0; pointer-events:none; transform:translateY(8px);
  transition:opacity .2s ease, transform .2s ease, border-color .2s ease;
}
.to-top.show{opacity:1; pointer-events:auto; transform:none}
.to-top:hover{border-color:var(--accent); color:var(--accent)}
.to-top:focus-visible{outline:2px solid var(--accent); outline-offset:2px}
@media (max-width: 899px), (hover: none){ .to-top{bottom:16px} }
body:has(.cookie-banner:not(.hidden)) .to-top{bottom:96px}
@media print{ .to-top, #sticky-head, .tip{display:none !important} }


/* ===== The selector in a Gold Efficiency header: which efficiency the column sorts on ===== */
.basis-select{
  display:block; margin:4px 0 0 auto; background:var(--row); color:var(--accent); border:1px solid var(--border);
  border-radius:6px; padding:1px 4px; font-size:11px; font-weight:500; cursor:pointer; max-width:100%;
}
.basis-select:hover{border-color:var(--accent)}
.basis-select:focus-visible{outline:2px solid var(--accent); outline-offset:1px}