/* Roll Odds — leans on /shared/tokens.css for the palette. */

*{box-sizing:border-box}
body{
  margin:0;background:var(--bg);color:var(--txt);font-family:var(--font);
  -webkit-text-size-adjust:100%;
}

header{
  display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:14px 20px;border-bottom:1px solid var(--edge);background:var(--panel);
}
.kit{
  font-weight:800;letter-spacing:.5px;text-decoration:none;color:var(--txt);
  font-size:15px;
}
.kit span{color:var(--acc)}
header h1{font-size:16px;margin:0;font-weight:600}
header h1 .beta{color:var(--acc2)}
.setname{color:var(--dim);font-size:12px}
.spacer{flex:1}

.wrap{
  max-width:1100px;margin:0 auto;padding:20px;
  display:grid;gap:16px;grid-template-columns:minmax(0,340px) minmax(0,1fr);
  align-items:start;
}
.panel{
  background:var(--panel);border:1px solid var(--edge);border-radius:12px;
  padding:16px;
}
.odds{grid-column:1/-1}

/* ---- controls ---- */
.field{margin-bottom:16px}
.field:last-child{margin-bottom:0}
label{
  display:block;font-size:12px;color:var(--dim);margin-bottom:7px;
  text-transform:uppercase;letter-spacing:.4px;
}
label b{color:var(--txt);text-transform:none;letter-spacing:0}
.hint{float:right;color:var(--acc);font-weight:700;text-transform:none}

.seg{display:flex;flex-wrap:wrap;gap:4px}
/* Levels are a fixed 11-item set; a plain flex-wrap leaves the last row
   stretched into odd wide buttons. A grid keeps every cell the same size. */
.seg#levelSeg{display:grid;grid-template-columns:repeat(6,1fr)}
/* Star buttons carry a second line ("3 copies"), so they need to stack. */
.seg.star button{display:flex;flex-direction:column;gap:2px;padding:6px 0;line-height:1.15}
.seg.star button small{font-size:10px;font-weight:600;color:var(--dim);letter-spacing:.2px}
.seg.star button[aria-pressed="true"] small{color:inherit;opacity:.85}
.seg button{
  flex:1 1 auto;min-width:34px;padding:7px 0;cursor:pointer;
  background:var(--panel2);color:var(--txt);border:1px solid var(--edge);
  border-radius:7px;font:inherit;font-size:13px;font-weight:600;
  transition:background .12s,border-color .12s;
}
.seg button:hover{background:var(--edge)}
.seg button[aria-pressed=true]{
  background:var(--acc);border-color:var(--acc);color:#06210f;
}
.seg.cost button[data-cost="1"][aria-pressed=true]{background:var(--c1);border-color:var(--c1);color:#0b0e14}
.seg.cost button[data-cost="2"][aria-pressed=true]{background:var(--c2);border-color:var(--c2);color:#06210f}
.seg.cost button[data-cost="3"][aria-pressed=true]{background:var(--c3);border-color:var(--c3);color:#06210f}
.seg.cost button[data-cost="4"][aria-pressed=true]{background:var(--c4);border-color:var(--c4);color:#1a0b26}
.seg.cost button[data-cost="5"][aria-pressed=true]{background:var(--c5);border-color:var(--c5);color:#2a1c00}
.seg button[disabled]{opacity:.32;cursor:not-allowed}

input[type=range]{width:100%;accent-color:var(--acc);margin:2px 0}
.ticks{display:flex;justify-content:space-between;color:var(--dim);font-size:11px}

.adv{border-top:1px solid var(--edge);padding-top:12px;margin-top:4px}
.adv summary{
  cursor:pointer;font-size:12px;color:var(--acc2);
  text-transform:uppercase;letter-spacing:.4px;font-weight:600;
}
.adv[open] summary{margin-bottom:12px}
.note{color:var(--dim);font-size:12px;line-height:1.5;margin:0 0 12px}
.note.tiny{font-size:11px;margin:6px 0 0}
.note em{color:var(--acc);font-style:normal}

/* ---- results ---- */
.headline{text-align:center;padding:6px 0 16px;border-bottom:1px solid var(--edge)}
.big{font-size:56px;font-weight:800;line-height:1;color:var(--acc);font-variant-numeric:tabular-nums}
.big.warn{color:var(--c5)}
.big.bad{color:var(--red)}
.bigsub{color:var(--dim);font-size:12px;margin-top:8px}

.statgrid{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));
  gap:1px;background:var(--edge);border:1px solid var(--edge);
  border-radius:9px;overflow:hidden;margin:16px 0;
}
.stat{background:var(--panel);padding:11px 12px;display:flex;flex-direction:column;gap:5px}
.stat .k{color:var(--dim);font-size:11px;text-transform:uppercase;letter-spacing:.4px}
.stat .v{font-size:17px;font-weight:700;font-variant-numeric:tabular-nums}

.chartwrap{margin:16px 0 6px}
#chart{width:100%;height:200px;display:block;background:var(--panel2);border-radius:9px}
.axis{display:flex;justify-content:space-between;color:var(--dim);font-size:11px;margin-top:5px}

table{width:100%;border-collapse:collapse;font-size:13px}
caption{
  text-align:left;color:var(--dim);font-size:11px;padding:14px 0 7px;
  text-transform:uppercase;letter-spacing:.4px;
}
th,td{padding:7px 9px;text-align:right;border-bottom:1px solid var(--edge)}
th:first-child,td:first-child{text-align:left}
thead th{color:var(--dim);font-weight:600;font-size:11px}
tbody tr:last-child td{border-bottom:0}
td{font-variant-numeric:tabular-nums}
.conf td.g{color:var(--acc);font-weight:700}
.conf td.none{color:var(--red)}

/* ---- odds reference ---- */
.odds h2{font-size:13px;margin:0 0 12px;color:var(--dim);text-transform:uppercase;letter-spacing:.4px}
.tablescroll{overflow-x:auto}
/* Six short numeric columns fit a 390px phone once the padding is trimmed,
   so let the table be fluid rather than forcing a min-width that clipped
   the 5-cost column off the right edge. The scroll wrapper stays as a
   safety net for very narrow screens. */
.oddstable{width:100%}
.oddstable th,.oddstable td{padding:7px 4px}
.oddstable td.z{color:var(--dim);opacity:.4}
.oddstable tr.on{background:var(--panel2)}
.oddstable tr.on td{font-weight:700}
.oddstable td.hi{color:var(--acc)}
#poolLine{color:var(--txt)}

footer{
  max-width:1100px;margin:0 auto;padding:22px 20px 40px;
  color:var(--dim);font-size:12px;display:flex;flex-wrap:wrap;gap:7px;align-items:center;
}
footer a{color:var(--acc2);text-decoration:none}
footer a:hover{text-decoration:underline}
.dot{opacity:.5}
.fine{flex-basis:100%;opacity:.7;font-size:11px;line-height:1.5}

@media (max-width:860px){
  .wrap{grid-template-columns:minmax(0,1fr)}
  .big{font-size:44px}
}