:root{
  --bg:#131216;
  --panel:#1b1a1f;
  --line:#2c2a31;
  --dim:#6f6a64;
  --txt:#b9b2a8;
  --hi:#efe9df;
  --accent:#c4593f;
  --pw:304px;
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; background:var(--bg); color:var(--txt);
  font:12px/1.45 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  letter-spacing:.05em; overflow:hidden;
  -webkit-font-smoothing:antialiased;
}
button,input{font:inherit;letter-spacing:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}

/* ---------- stage ---------- */
#wrap{
  position:fixed; inset:0; display:grid; place-items:center;
  padding-bottom:34px; transition:padding-right .26s cubic-bezier(.4,0,.2,1);
}
body.panel #wrap{padding-right:var(--pw)}
#stage{
  position:relative; cursor:pointer; line-height:0;
  box-shadow:0 20px 64px rgba(0,0,0,.6);
  transition:opacity .1s;
}
#stage:active{opacity:.93}
#stage canvas{display:block;width:100%;height:100%}
body.grid #wrap{display:none}

/* ---------- hud ---------- */
.hud{
  position:fixed; left:0; right:0; bottom:0; z-index:4;
  display:flex; align-items:center; gap:16px;
  padding:20px 18px 13px; opacity:.52; transition:opacity .2s,right .26s;
  pointer-events:none; text-transform:uppercase; font-size:11px;
  background:linear-gradient(to bottom,rgba(19,18,22,0),var(--bg) 62%);
}
body.panel .hud{right:var(--pw)}
.hud:hover{opacity:1}
.hud .seed,.hud .piece{color:var(--hi);font-weight:600;letter-spacing:.16em;white-space:nowrap}
.hud .meta{color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hud .keys{margin-left:auto;color:#4e4a46;white-space:nowrap}
.hud b{color:var(--dim);font-weight:600}
body.grid .hud{display:none}
@media (max-width:780px){ .hud .keys{display:none} }

/* ---------- tab ---------- */
#tab{
  position:fixed; top:16px; right:16px; z-index:6;
  width:38px; height:38px; display:grid; place-items:center;
  border:1px solid var(--line); background:var(--panel); color:var(--txt);
  transition:right .26s cubic-bezier(.4,0,.2,1),color .15s,border-color .15s;
}
#tab:hover{color:var(--hi);border-color:#443f48}
#tab svg{fill:currentColor;stroke:currentColor;stroke-width:1.4}
#tab path{stroke-linecap:round}
body.panel #tab{right:calc(var(--pw) + 16px)}

/* ---------- panel ---------- */
#panel{
  position:fixed; top:0; right:0; bottom:0; width:var(--pw); z-index:5;
  background:var(--panel); border-left:1px solid var(--line);
  overflow-y:auto; overscroll-behavior:contain;
  transform:translateX(100%); transition:transform .26s cubic-bezier(.4,0,.2,1);
  padding:0 16px 22px;
}
body.panel #panel{transform:none}
#panel header{
  display:flex; align-items:center; justify-content:space-between;
  padding:16px 0 4px; position:sticky; top:0; background:var(--panel); z-index:2;
}
#panel h1{margin:0;font-size:13px;letter-spacing:.3em;text-transform:uppercase;color:var(--hi);font-weight:600}
#close{font-size:20px;line-height:1;color:var(--dim);padding:0 2px}
#close:hover{color:var(--hi)}
.blurb{margin:0 0 4px;color:#5d5852;font-size:11px;line-height:1.6;letter-spacing:.02em}
#panel section{padding:14px 0 0;border-top:1px solid var(--line);margin-top:14px}
#panel section:first-of-type{border-top:0}
#panel h2{
  margin:0 0 9px; font-size:10px; font-weight:600; letter-spacing:.22em;
  text-transform:uppercase; color:var(--dim);
}
.count{color:var(--hi)}

/* seed bar */
.seedbar{display:flex;gap:5px;align-items:stretch}
.sq{
  width:30px;height:30px;border:1px solid var(--line);color:var(--txt);
  display:grid;place-items:center;flex:none;
}
.sq.wide{width:auto;padding:0 10px;font-size:10px;text-transform:uppercase;letter-spacing:.14em;margin-left:auto}
.sq:hover{border-color:#4a444f;color:var(--hi)}
#seedIn{
  flex:1;min-width:0;height:30px;background:#141318;border:1px solid var(--line);
  padding:0 8px;color:var(--hi);text-align:center;letter-spacing:.14em;font-weight:600;
  -moz-appearance:textfield;
}
#seedIn::-webkit-outer-spin-button,#seedIn::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
#seedIn:focus{outline:1px solid var(--accent);outline-offset:-1px}

/* palette chips */
.chips{display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.chip{
  border:1px solid var(--line); padding:4px 4px 3px; text-align:left;
  display:flex; flex-direction:column; gap:4px;
}
.chip:hover{border-color:#4a444f}
.chip[aria-pressed=true]{border-color:var(--hi)}
.chip .bars{display:flex;height:16px;gap:0;overflow:hidden}
.chip .bars i{flex:1}
.chip span{
  font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.chip[aria-pressed=true] span{color:var(--hi)}
.chip.auto .bars{background:
  repeating-linear-gradient(45deg,#2a282e 0 5px,#211f25 5px 10px)}

/* pills */
.pills{display:flex;flex-wrap:wrap;gap:5px}
.pills button{
  border:1px solid var(--line); padding:5px 9px; color:var(--dim);
  font-size:10px; letter-spacing:.12em; text-transform:uppercase;
}
.pills button:hover{border-color:#4a444f;color:var(--txt)}
.pills button[aria-pressed=true]{background:var(--hi);border-color:var(--hi);color:#17161a;font-weight:600}

/* buttons */
.row{display:flex;gap:6px;margin-top:9px}
.btn{
  flex:1; border:1px solid var(--line); padding:8px 6px; color:var(--txt);
  font-size:10px; letter-spacing:.14em; text-transform:uppercase;
}
.btn:hover{border-color:#4a444f;color:var(--hi)}
.btn.primary{background:var(--hi);border-color:var(--hi);color:#17161a;font-weight:600}
.btn.primary:hover{background:#fff;border-color:#fff}
.btn.ghost{width:100%;margin-top:6px;color:#55504b;border-color:#232128}
.btn.ghost:hover{color:var(--accent);border-color:#3a2a28}
.btn.on{border-color:var(--accent);color:var(--accent)}

#panel footer{
  display:flex;flex-wrap:wrap;gap:4px 12px;
  margin-top:18px;padding-top:14px;border-top:1px solid var(--line);
  font-size:10px;color:#4b4742;text-transform:uppercase;letter-spacing:.1em;
}
#panel footer b{color:var(--dim);font-weight:600}

/* ---------- grid ---------- */
#grid{
  position:fixed; inset:0; z-index:3; background:var(--bg); display:none;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:10px; padding:10px; align-content:start; overflow:auto;
}
body.grid #grid{display:grid}
body.panel #grid{right:var(--pw)}
#grid figure{margin:0;position:relative;cursor:pointer;line-height:0}
#grid canvas{width:100%;height:auto;display:block}
#grid figcaption{
  position:absolute;left:5px;bottom:4px;line-height:1;font-size:9px;
  color:#fff;mix-blend-mode:difference;letter-spacing:.12em;
}
#grid figure:hover{outline:2px solid var(--hi);outline-offset:-2px}
#grid .empty{
  grid-column:1/-1;padding:40px 10px;text-align:center;color:var(--dim);
  text-transform:uppercase;letter-spacing:.18em;font-size:11px;
}

/* ---------- reroll + rarity ---------- */
.btn.wide{width:100%;margin-top:7px;padding:10px 6px;display:flex;align-items:center;justify-content:center;gap:8px}
.held{font-weight:600;letter-spacing:.1em;opacity:.62}
.held:empty{display:none}
.hold-note{font-size:9px;letter-spacing:.14em;color:var(--accent);margin-left:6px}
.hold-note:empty{display:none}

.rarity{display:flex;flex-direction:column;gap:5px}
.rarity div{display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.1em;text-transform:uppercase}
.rarity dt{flex:none;width:74px;color:var(--dim);margin:0}
.rarity b{flex:none;width:40px;text-align:right;color:var(--txt);font-weight:600}
.rarity .bar{flex:1;height:3px;background:#262430;position:relative}
.rarity .bar i{position:absolute;inset:0 auto 0 0;background:var(--dim)}
.rarity .rare .bar i{background:var(--accent)}
.rarity .rare b{color:var(--accent)}

/* ---------- entry ---------- */
.entry{
  position:fixed; inset:0; z-index:20; display:grid; place-items:center;
  background:rgba(14,13,17,.86); backdrop-filter:blur(3px);
  padding:28px; text-align:center;
  transition:opacity .35s ease, visibility .35s;
}
body.entered .entry{opacity:0;visibility:hidden;pointer-events:none}
.entry-inner{max-width:430px}
.entry .eyebrow{
  display:block;font-size:10px;letter-spacing:.3em;text-transform:uppercase;
  color:var(--dim);margin-bottom:18px;
}
.entry h2{
  margin:0 0 20px; font-weight:600; color:var(--hi);
  font-size:clamp(30px,7vw,46px); line-height:1; letter-spacing:.04em;
  text-transform:uppercase;
}
.entry h2 span{display:block;color:#4a6aa8;margin-top:4px}
.entry-rule{
  margin:0 0 14px;color:var(--txt);font-size:12px;line-height:1.75;
  letter-spacing:.04em;text-transform:none;
}
.entry-meta{
  margin:0 0 24px;color:#56514c;font-size:10px;
  letter-spacing:.2em;text-transform:uppercase;
}
.entry-actions{display:flex;gap:8px;justify-content:center}
.entry-actions .btn{flex:0 1 150px;padding:11px 14px}

/* ---------- toast ---------- */
#toast{
  position:fixed; left:50%; bottom:46px; transform:translate(-50%,10px);
  background:var(--hi); color:#17161a; padding:7px 15px; z-index:9;
  font-size:10px; letter-spacing:.16em; text-transform:uppercase; font-weight:600;
  opacity:0; pointer-events:none; transition:opacity .2s,transform .2s;
}
#toast.on{opacity:1;transform:translate(-50%,0)}

:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* ---------- phones ---------- */
@media (max-width:620px){
  :root{--pw:100vw}
  body.panel #wrap{padding-right:0}
  body.panel .hud,body.panel #grid{right:0}
  body.panel #tab{right:16px;top:12px;z-index:7}
  #panel{border-left:0}
  .chips{grid-template-columns:repeat(3,1fr)}
  #grid{grid-template-columns:repeat(2,1fr)}
  .hud{font-size:10px;gap:10px;padding:18px 12px 11px}
  #stage{box-shadow:0 10px 32px rgba(0,0,0,.5)}
  .entry-actions{flex-direction:column}
  .entry-actions .btn{flex:none}
  .rarity dt{width:62px}
}