:root{
  --bg:#101014;
  --panel:#1a1a21;
  --panel2:#22222b;
  --ink:#f4f4f0;
  --muted:#9a9aa6;
  --border:#f4f4f0;
  --lime:#c9f73a;
  --pink:#ff5ca8;
  --cyan:#4fd6ff;
  --yellow:#ffc93a;
  --red:#ff4d3d;
  --green:#3ddc84;
  --shadow:#000;
  --mono:"Courier New",ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--mono);
  min-height:100vh;
  padding:20px 12px 90px;
}
.wrap{max-width:900px;margin:0 auto}
h1{
  font-family:"Arial Black","Archivo Black",Impact,sans-serif;
  font-size:clamp(34px,8vw,58px);
  text-transform:uppercase;
  letter-spacing:-.02em;
  line-height:.95;
  margin-bottom:4px;
}
h1 .hl{background:var(--lime);color:#101014;padding:0 8px;display:inline-block;transform:rotate(-1deg)}
.tag{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.14em;margin-bottom:18px}

.brut{
  background:var(--panel);
  border:3px solid var(--border);
  box-shadow:6px 6px 0 var(--shadow);
}
button.brut,.btn{
  font-family:"Arial Black",Impact,sans-serif;
  text-transform:uppercase;
  cursor:pointer;
  transition:transform .06s ease,box-shadow .06s ease;
}
button.brut:hover:not(:disabled),.btn:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 var(--shadow)}
button.brut:active,.btn:active{transform:translate(3px,3px);box-shadow:2px 2px 0 var(--shadow)}
button.brut:disabled{opacity:.4;cursor:default}

.tabs{display:flex;gap:12px;margin-bottom:22px;flex-wrap:wrap}
.tabs button{
  flex:1;min-width:150px;
  padding:14px 10px;
  font-size:15px;letter-spacing:.04em;
  background:var(--panel);color:var(--ink);
}
.tabs button.on{background:var(--pink);color:#101014;box-shadow:6px 6px 0 var(--shadow)}

.page{display:none}
.page.on{display:block}

/* ============ GAME ============ */
.gamehead{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.stat-pill{
  padding:10px 16px;font-size:12px;text-transform:uppercase;letter-spacing:.1em;
  background:var(--panel);
}
.stat-pill b{font-family:"Arial Black",Impact,sans-serif;font-size:18px;color:var(--lime);margin-left:6px}

.searchbox{position:relative;margin-bottom:14px}
.searchbox input{
  width:100%;padding:16px;font-family:var(--mono);font-size:17px;font-weight:bold;
  background:var(--panel2);border:3px solid var(--border);color:var(--ink);
  box-shadow:6px 6px 0 var(--shadow);outline:none;
}
.searchbox input:focus{border-color:var(--lime)}
.dropdown{
  position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:30;
  background:var(--panel2);border:3px solid var(--border);box-shadow:6px 6px 0 var(--shadow);
  max-height:280px;overflow-y:auto;display:none;
}
.dropdown.open{display:block}
.dropdown button{
  display:block;width:100%;text-align:left;padding:12px 14px;
  background:none;border:none;border-bottom:2px solid #333;
  color:var(--ink);font-family:var(--mono);font-size:15px;font-weight:bold;cursor:pointer;
}
.dropdown button:hover,.dropdown button.active{background:var(--lime);color:#101014}
.dropdown .none{padding:12px 14px;color:var(--muted);font-size:13px}

.hintbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:18px}
#hintBtn{padding:10px 16px;font-size:12px;background:var(--cyan);color:#101014;border:3px solid var(--border)}
#hintText{font-size:14px;font-weight:bold;color:var(--cyan)}

.startcue{
  padding:34px 20px;text-align:center;margin-bottom:18px;
  background:var(--lime);color:#101014;border:3px solid var(--border);box-shadow:8px 8px 0 var(--shadow);
  transform:rotate(-.6deg);
}
.startcue h2{font-family:"Arial Black",Impact,sans-serif;font-size:clamp(20px,5vw,30px);text-transform:uppercase;line-height:1.05}
.startcue p{margin-top:8px;font-size:13px;font-weight:bold}

.legendbar{
  display:flex;flex-wrap:wrap;gap:14px;font-size:11px;color:var(--muted);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:12px;
}
.chip{display:inline-block;width:13px;height:13px;border:2px solid var(--ink);vertical-align:-2px;margin-right:5px}
.chip.g{background:var(--green)}

.colhead{
  display:grid;grid-template-columns:minmax(120px,1.7fr) repeat(7,1fr);
  gap:5px;padding:0 2px 8px;
  font-size:10px;letter-spacing:.1em;color:var(--muted);text-transform:uppercase;text-align:center;
}
.colhead div:first-child{text-align:left}
.guessrow{
  display:grid;grid-template-columns:minmax(120px,1.7fr) repeat(7,1fr);
  gap:5px;margin-bottom:8px;animation:slam .28s ease;
}
@keyframes slam{from{opacity:0;transform:translateY(-10px) scale(1.02)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.guessrow{animation:none}}
.cell{
  background:var(--panel2);border:3px solid var(--border);box-shadow:3px 3px 0 var(--shadow);
  padding:8px 3px;text-align:center;min-height:56px;
  display:flex;flex-direction:column;justify-content:center;gap:2px;
}
.cell .val{font-family:"Arial Black",Impact,sans-serif;font-size:19px}
.cell .dir{font-size:11px;line-height:1;font-weight:bold}
.cell.match{background:var(--green);border-color:var(--ink)}
.cell.match .val{color:#101014}
.cell.higher .dir{color:var(--pink)}
.cell.lower .dir{color:var(--yellow)}
.namecell{align-items:flex-start;text-align:left;padding-left:10px}
.namecell .val{font-size:13px;font-family:var(--mono)}
.namecell.win{background:var(--green)}
.namecell.win .val{color:#101014}

.banner{display:none;text-align:center;padding:22px;margin-bottom:18px;border:3px solid var(--border);box-shadow:8px 8px 0 var(--shadow)}
.banner.show{display:block}
.banner.win{background:var(--green);color:#101014}
.banner.lose{background:var(--red);color:#101014}
.banner h2{font-family:"Arial Black",Impact,sans-serif;font-size:30px;text-transform:uppercase}
.banner p{font-size:14px;font-weight:bold;margin-top:6px}
.banner button{margin-top:14px;padding:12px 28px;font-size:15px;background:#101014;color:var(--ink);border:3px solid #101014}

/* ============ TRACKER ============ */
.trackpanel{padding:16px;margin-bottom:18px}
.trackpanel h3{
  font-family:"Arial Black",Impact,sans-serif;font-size:18px;text-transform:uppercase;margin-bottom:12px;
}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.filters select,.filters input[type=text]{
  flex:1;min-width:130px;padding:11px;font-family:var(--mono);font-weight:bold;font-size:14px;
  background:var(--panel2);color:var(--ink);border:3px solid var(--border);outline:none;
}
.filters select:focus,.filters input:focus{border-color:var(--cyan)}
#clearFilters{width:100%;padding:12px;font-size:13px;background:var(--yellow);color:#101014;border:3px solid var(--border)}

details.explain{border:3px solid var(--border);background:var(--panel2);box-shadow:5px 5px 0 var(--shadow);margin-bottom:14px}
details.explain summary{
  padding:13px;cursor:pointer;font-family:"Arial Black",Impact,sans-serif;font-size:13px;
  text-transform:uppercase;list-style:none;
}
details.explain summary::before{content:"+ "}
details.explain[open] summary::before{content:"- "}
details.explain .inner{padding:0 14px 14px;font-size:13px;line-height:1.55;color:var(--muted)}
.weightgrid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:12px;
}
.wcell label{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--ink);margin-bottom:4px}
.wcell input{
  width:100%;padding:9px;font-family:var(--mono);font-weight:bold;font-size:15px;
  background:#101014;color:var(--lime);border:3px solid var(--border);outline:none;
}
.wcell input:focus{border-color:var(--lime)}
#resetWeights{margin-top:12px;padding:10px 18px;font-size:12px;background:var(--pink);color:#101014;border:3px solid var(--border)}

.pcard{
  margin-bottom:18px;padding:16px;
  background:var(--panel);border:3px solid var(--border);box-shadow:6px 6px 0 var(--shadow);
}
.pcard .toprow{display:flex;align-items:flex-start;gap:12px;margin-bottom:10px}
.rank{
  font-family:"Arial Black",Impact,sans-serif;font-size:26px;min-width:56px;text-align:center;
  background:var(--ink);color:#101014;border:3px solid var(--border);padding:6px 4px;
  box-shadow:3px 3px 0 var(--shadow);
}
.pname{font-family:"Arial Black",Impact,sans-serif;font-size:clamp(18px,4.5vw,24px);text-transform:uppercase;line-height:1}
.pmeta{font-size:12px;color:var(--muted);margin-top:4px;font-weight:bold}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin:10px 0}
.badge{
  padding:6px 10px;font-size:12px;font-weight:bold;border:3px solid var(--border);
  box-shadow:3px 3px 0 var(--shadow);color:#101014;
}
.badge.grey{background:#b9b9c4}
.badge.gold{background:var(--yellow)}
.badge.blue{background:var(--cyan)}
.badge.score{background:var(--red);font-family:"Arial Black",Impact,sans-serif;font-size:14px}
.statgrid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:6px;
}
.sg{
  background:var(--panel2);border:2px solid #3a3a46;text-align:center;padding:8px 2px;
}
.sg b{display:block;font-family:"Arial Black",Impact,sans-serif;font-size:16px}
.sg span{font-size:9px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
#moreBtn{display:block;margin:0 auto;padding:13px 30px;font-size:14px;background:var(--lime);color:#101014;border:3px solid var(--border)}
.count{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.1em;margin-bottom:12px}

footer{margin-top:30px;font-size:11px;color:var(--muted);line-height:1.6;text-align:center}
@media (max-width:640px){
  .colhead,.guessrow{grid-template-columns:minmax(84px,1.5fr) repeat(7,1fr)}
  .cell .val{font-size:13px}
  .namecell .val{font-size:10px}
  .cell{min-height:46px;padding:5px 1px;box-shadow:2px 2px 0 var(--shadow)}
  .statgrid{grid-template-columns:repeat(4,1fr)}
}

/* live season line on tracker cards */
.liveline{
  margin:-2px 0 10px;font-size:12px;font-weight:bold;color:var(--lime);
  text-transform:uppercase;letter-spacing:.06em;
}
.liveline.pending{display:none}