/* PIXEL FOUNDRY — an arcade sprite forge. dark cabinet, sprites bring the color.
   accent is forge-amber (this place MAKES things). */
:root{
  --bg:#14121b; --panel:#1f1b29; --panel2:#241f31; --line:#34304a;
  --text:#e9e4f2; --muted:#8b84a3; --amber:#f0a64e;
}
*{ box-sizing:border-box; }
html,body{ margin:0; min-height:100%; }
body{
  background:
    radial-gradient(130% 80% at 50% -10%, #221c30 0%, var(--bg) 60%);
  color:var(--text);
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  padding:22px; -webkit-user-select:none; user-select:none;
}
header{ max-width:920px; margin:0 auto 18px; }
h1{ font-size:15px; letter-spacing:0.32em; font-weight:600; margin:0; color:var(--amber); }
.sub{ font-size:11px; color:var(--muted); margin:6px 0 0; letter-spacing:0.03em; }

.toolbar{
  max-width:920px; margin:0 auto 18px;
  display:flex; flex-wrap:wrap; gap:8px; align-items:center;
}
.types{ display:flex; gap:6px; flex-wrap:wrap; }
.type{
  padding:7px 13px; background:var(--panel); border:1px solid var(--line);
  color:var(--muted); font:inherit; font-size:12px; letter-spacing:0.08em; cursor:pointer;
}
.type:hover{ color:var(--text); }
.type.active{ color:var(--bg); background:var(--amber); border-color:var(--amber); font-weight:600; }
.spacer{ flex:1; }
.ctrl{ display:flex; align-items:center; gap:8px; font-size:11px; color:var(--muted); letter-spacing:0.06em; }
.ctrl input[type=range]{ width:96px; accent-color:var(--amber); }
button.action{
  padding:7px 14px; background:var(--panel); border:1px solid var(--line);
  color:var(--text); font:inherit; font-size:12px; letter-spacing:0.1em; cursor:pointer;
}
button.action:hover{ border-color:var(--amber); color:var(--amber); }
button.action.primary{ background:var(--amber); border-color:var(--amber); color:var(--bg); font-weight:600; }
button.action.primary:hover{ color:var(--bg); filter:brightness(1.08); }

.grid{
  max-width:920px; margin:0 auto;
  display:grid; grid-template-columns:repeat(auto-fill, minmax(112px,1fr)); gap:12px;
}
.tile{
  background:var(--panel);
  border:1px solid var(--line);
  padding:14px 8px 8px;
  display:flex; flex-direction:column; align-items:center; gap:8px;
  cursor:pointer; transition:transform .08s ease, border-color .08s ease, background .08s ease;
}
.tile:hover{ transform:translateY(-2px); border-color:var(--amber); background:var(--panel2); }
.tile canvas{ image-rendering:pixelated; image-rendering:crisp-edges; }
.tile .seed{ font-size:9px; color:var(--muted); letter-spacing:0.08em; }
.tile:hover .seed{ color:var(--amber); }