/* PIXEL PUSHER — built on the house tokens (hankelsner-ui-tokens.css).
   Light + corporate by default, dark via the top switch, trust-blue accent.
   The only place this app departs from the house look is the board itself,
   which is deliberately dark in both themes: pixel art needs a neutral ground,
   and a board that changes colour with the theme would misrepresent the
   canvas's own declared background. */

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  background:var(--bg); color:var(--ink); font-family:var(--sans);
  line-height:1.55; -webkit-font-smoothing:antialiased;
}
code,.mono{font-family:var(--mono)}
a{color:var(--accent); text-decoration:none}
a:hover{text-decoration:underline}
.dim{color:var(--dim)}
.tiny{font-size:.8rem}
.grow{flex:1}

/* ---- header ---- */
.top{
  display:flex; align-items:center; gap:1rem; flex-wrap:wrap;
  padding:1rem clamp(1rem,4vw,2.5rem); background:var(--surface);
  border-bottom:1px solid var(--line);
}
.brand{display:flex; align-items:center; gap:.85rem}
.logo{
  width:34px; height:34px; border-radius:8px; display:block;
  background:
    linear-gradient(90deg,#ff00aa 25%,transparent 25% 50%,#00ff88 50% 75%,transparent 75%),
    linear-gradient(0deg,#1f5fa8 25%,transparent 25% 50%,#ffb400 50% 75%,transparent 75%),
    #101820;
  background-size:16px 16px;
}
.top h1{font-size:1.05rem; letter-spacing:.14em; margin:0}
.tag{margin:0; font-size:.8rem; color:var(--dim)}
.top-right{margin-left:auto; display:flex; gap:.5rem; align-items:center}
.ghost{
  background:var(--surface-2); color:var(--ink-2); border:1px solid var(--line);
  border-radius:var(--r-pill); padding:.4rem .85rem; font:inherit; font-size:.85rem;
  cursor:pointer;
}
.ghost:hover{border-color:var(--line-2); color:var(--ink)}

.lede{
  max-width:70ch; margin:0 auto; padding:1.5rem clamp(1rem,4vw,2.5rem) .5rem;
  color:var(--ink-2);
}
.lede code{background:var(--inset); padding:.1em .35em; border-radius:4px; font-size:.9em}

/* ---- layout ---- */
main{
  display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:1.25rem;
  align-items:start; padding:1rem clamp(1rem,4vw,2.5rem) 2rem;
  max-width:1500px; margin:0 auto;
}
@media (max-width:960px){ main{grid-template-columns:minmax(0,1fr)} }

.board-wrap{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow); overflow:hidden;
}
.board-tools{
  display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
  padding:.6rem .75rem; border-bottom:1px solid var(--line); background:var(--surface-2);
}
.tool-group{display:flex; align-items:center; gap:.3rem}
.tool{
  background:var(--surface); border:1px solid var(--line); color:var(--ink-2);
  border-radius:var(--r-sm); padding:.35rem .7rem; font:inherit; font-size:.85rem;
  cursor:pointer;
}
.tool:hover{border-color:var(--line-2)}
.tool.sel{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)}
.zoom{font-family:var(--mono); font-size:.8rem; color:var(--dim); min-width:3.2em; text-align:center}
.swatch-wrap{display:flex; align-items:center; gap:.4rem}
#color{
  width:34px; height:28px; padding:0; border:1px solid var(--line-2);
  border-radius:6px; background:none; cursor:pointer;
}
#colorhex{font-size:.8rem; color:var(--dim)}
.time{gap:.5rem; font-size:.8rem; color:var(--dim)}
.time input[type=range]{width:130px; accent-color:var(--accent)}

.board{
  position:relative; background:#0b1118; overflow:hidden;
  aspect-ratio:1/1; max-height:min(78vh,1000px); touch-action:none; cursor:crosshair;
}
.board canvas{
  position:absolute; top:0; left:0; transform-origin:0 0;
  image-rendering:pixelated; image-rendering:crisp-edges;
}
.cursor{
  position:absolute; border:1px solid #fff; box-shadow:0 0 0 1px #000;
  pointer-events:none; mix-blend-mode:difference;
}
.selbox{
  position:absolute; border:1.5px dashed var(--accent-2);
  background:rgba(79,155,230,.16); pointer-events:none;
}
.loading{
  position:absolute; inset:0; display:grid; place-items:center;
  color:#8595a4; font-family:var(--mono); font-size:.85rem; background:#0b1118;
}
.board-foot{
  display:flex; gap:1rem; padding:.5rem .75rem; font-size:.78rem;
  color:var(--dim); border-top:1px solid var(--line); background:var(--surface-2);
}

/* ---- side panels ---- */
.side{display:flex; flex-direction:column; gap:1rem}
.card{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:1rem 1.1rem; box-shadow:var(--shadow);
}
.card h2{margin:0 0 .6rem; font-size:.78rem; letter-spacing:.13em; text-transform:uppercase; color:var(--dim)}
.card p{margin:.4rem 0 .8rem; font-size:.86rem}
.empty{color:var(--dim); font-size:.86rem; padding:.5rem 0}

.pixel-head{display:flex; gap:.75rem; align-items:center; margin-bottom:.75rem}
.chip{width:42px; height:42px; border-radius:8px; border:1px solid var(--line-2); display:block}
.big{font-size:1.1rem}

.history{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.5rem}
.history li{
  border-left:2px solid var(--line-2); padding:.35rem 0 .35rem .7rem; font-size:.8rem;
}
.history li:first-child{border-left-color:var(--accent)}
.history .who{font-family:var(--mono); color:var(--ink-2); word-break:break-all}
.history .when{color:var(--dim)}

.queue{list-style:none; margin:0 0 .75rem; padding:0; display:flex; flex-direction:column; gap:.35rem}
.queue li{
  display:flex; align-items:center; gap:.5rem; font-family:var(--mono); font-size:.8rem;
  background:var(--inset); border-radius:var(--r-sm); padding:.35rem .5rem;
}
.queue .sw{width:16px; height:16px; border-radius:4px; border:1px solid var(--line-2)}
.queue button{margin-left:auto; background:none; border:0; color:var(--dim); cursor:pointer; font-size:1rem}

.payload-wrap{margin:.75rem 0}
.payload-wrap label{font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dim)}
.payload{
  display:block; background:var(--inset); border:1px solid var(--line);
  border-radius:var(--r-sm); padding:.5rem .6rem; margin:.3rem 0 .2rem;
  font-size:.78rem; word-break:break-all; color:var(--ink-2);
}
.payload-wrap .mono{font-size:.72rem}
.over{color:var(--warn); font-weight:600}

.field{display:block; margin:.6rem 0 .3rem}
.field span{display:block; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:var(--dim); margin-bottom:.25rem}
.field input{
  width:100%; padding:.5rem .6rem; border:1px solid var(--line); border-radius:var(--r-sm);
  background:var(--inset); color:var(--ink); font:inherit; font-family:var(--mono); font-size:.82rem;
}
.field input:focus{outline:2px solid var(--accent-soft); border-color:var(--accent)}

.primary{
  width:100%; margin-top:.75rem; padding:.65rem 1rem; font:inherit; font-weight:600;
  background:var(--accent); color:var(--accent-ink); border:0; border-radius:var(--r-sm);
  cursor:pointer;
}
.primary:hover:not(:disabled){background:var(--accent-2)}
.primary:disabled{opacity:.45; cursor:not-allowed}

.cost{font-size:.8rem; color:var(--ink-2); margin-top:.6rem}
.result{
  margin-top:.75rem; padding:.6rem .7rem; border-radius:var(--r-sm); font-size:.82rem;
  background:var(--ok-soft); color:var(--ok); word-break:break-all;
}
.result.bad{background:var(--warn-soft); color:var(--warn)}

.facts{margin:0; display:grid; grid-template-columns:auto 1fr; gap:.3rem .8rem; font-size:.82rem}
.facts dt{color:var(--dim)}
.facts dd{margin:0; font-family:var(--mono); word-break:break-all; text-align:right}

.sel-preview{
  background:#0b1118; border-radius:var(--r-sm); padding:.5rem; margin-bottom:.75rem;
  display:grid; place-items:center;
}
.sel-preview img{max-width:100%; image-rendering:pixelated; display:block}

/* ---- editions ---- */
.editions{
  border-top:1px solid var(--line); background:var(--surface);
  padding:2.25rem clamp(1rem,4vw,2.5rem);
}
.editions-head{max-width:70ch; margin:0 auto 1.5rem}
.editions-head h2{font-size:1.15rem; letter-spacing:.08em; margin:0 0 .5rem}
.editions-head p{margin:0; color:var(--ink-2); font-size:.9rem}
.edition-grid{
  display:grid; gap:1rem; max-width:1400px; margin:0 auto;
  grid-template-columns:repeat(auto-fill,minmax(215px,1fr));
}
.edition{
  border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
  background:var(--surface-2); display:flex; flex-direction:column;
}
.edition .art{background:#0b1118; aspect-ratio:1/1; display:block; width:100%;
  image-rendering:pixelated; object-fit:contain}
.edition .meta{padding:.7rem .8rem; display:flex; flex-direction:column; gap:.25rem}
.edition .day{font-weight:600; font-size:.92rem}
.edition .sub{font-size:.75rem; color:var(--dim); font-family:var(--mono)}
.edition .buy{
  margin-top:.5rem; padding:.45rem; text-align:center; border-radius:var(--r-sm);
  background:var(--accent); color:var(--accent-ink); font-size:.82rem; font-weight:600;
}
.edition .buy.soon{background:var(--inset); color:var(--dim); font-weight:400}
.badge{
  display:inline-block; font-size:.68rem; letter-spacing:.08em; text-transform:uppercase;
  padding:.1rem .45rem; border-radius:var(--r-pill); background:var(--accent-soft); color:var(--accent);
}
.badge.sold{background:var(--inset); color:var(--dim)}

.foot{
  padding:2rem clamp(1rem,4vw,2.5rem); border-top:1px solid var(--line);
  color:var(--ink-2); font-size:.85rem;
}
.foot p{margin:.5rem 0 0}