/* Reusable retro chunks: buttons, the three card variants (.prog .w
   .feat), and the modal dialogs. Animations live here too. */

/* ── buttons ─────────────────────────────────────────────────────── */
.btn{
  display:inline-block;margin:18px 6px 0;
  font-family:"Press Start 2P";font-size:11px;text-decoration:none;
  color:#fff;background:var(--hot);
  border:3px solid var(--ink);padding:12px 16px;
  box-shadow:4px 4px 0 var(--ink);
  transition:transform .14s, box-shadow .14s, background .2s;
}
.btn:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.btn:active{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink)}
.btn.alt{background:var(--cyan)}
.btn.alt2{background:#fff;color:var(--ink)}

/* ── program tile (home) ─────────────────────────────────────────── */
.prog{
  display:block;text-decoration:none;color:var(--ink);
  border:3px solid var(--ink);background:#fff;
  padding:16px;box-shadow:4px 4px 0 var(--ink);
  transition:.12s;cursor:pointer;
}
.prog:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
a.prog:hover{background:#fffdf5}
.prog:active{transform:translate(4px,4px);box-shadow:1px 1px 0 var(--ink)}
.prog.pressed{animation:press .19s ease}
.prog .ic{font-size:34px;line-height:1}
.prog .pix{font-size:10px;margin:10px 0 6px;display:block}
.prog p{font-size:15px;color:#4a4360}
.prog.p1 .pix{color:var(--hot)}
.prog.p3 .pix{color:var(--purple)}
.prog.soon{
  position:relative;overflow:hidden;
  border-style:dashed;background:#f3ead0;
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  opacity:.9;box-shadow:4px 4px 0 rgba(26,19,64,.35);
}
.prog.soon .ic{opacity:.7}
.prog.soon .pix{color:#8a7fa0}
.prog.soon p{color:#6b6390}

/* Locked: hovering/clicking the "Coming soon" tile turns it red,
   reveals the lock overlay, and (in JS) plays the WONK sound. */
.prog.soon .lock{
  position:absolute;inset:0;display:none;
  align-items:center;justify-content:center;
  z-index:2;font-size:54px;color:#fff;
  background:rgba(196,52,47,.88);
  text-shadow:0 2px 0 rgba(0,0,0,.25);
}
.prog.soon:hover{
  background:#ffe5e5;border-color:#c4342f;
  box-shadow:6px 6px 0 #c4342f;
}
.prog.soon:hover .lock{display:flex;animation:lockPop .25s ease}
.prog.soon.pressed{animation:deny .38s ease}
@keyframes lockPop{from{opacity:0;transform:scale(.6)}to{opacity:1;transform:scale(1)}}
@keyframes deny{
  0%,100%{transform:translate(0,0)}
  18%{transform:translate(-7px,2px)}
  46%{transform:translate(7px,2px)}
  72%{transform:translate(-4px,1px)}
}

.tagrow{display:flex;gap:6px;margin-top:10px;flex-wrap:wrap}
.tagrow b{font-family:"Press Start 2P";font-size:7px;background:var(--ink);color:#fff;padding:4px 6px}
.open{display:inline-block;margin-top:10px;font-family:"Press Start 2P";font-size:8px;color:var(--hot)}

@keyframes press{
  0%{transform:translate(0,0);box-shadow:4px 4px 0 var(--ink)}
  45%{transform:translate(5px,5px);box-shadow:0 0 0 var(--ink)}
  100%{transform:translate(0,0);box-shadow:4px 4px 0 var(--ink)}
}

/* ── why card (home) ─────────────────────────────────────────────── */
.why .w{
  border:3px solid var(--ink);background:#fff;
  padding:14px 16px;box-shadow:4px 4px 0 var(--ink);
  cursor:default;transition:transform .15s, box-shadow .15s;
}
.why .w:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.why .w .pix{font-size:9px;display:block;margin-bottom:7px}
.why .w p{font-size:15px;color:#4a4360}
.why .w:nth-child(1) .pix{color:var(--hot)}
.why .w:nth-child(2) .pix{color:var(--cyan)}
.why .w:nth-child(3) .pix{color:var(--purple)}
.why .w:nth-child(4) .pix{color:#0891b2}
.why .w:nth-child(5) .pix{color:#16a34a}
/* The big OPEN SOURCE banner stretches across the grid */
.why .w.big{
  grid-column:1/-1;
  display:flex;align-items:center;justify-content:center;
  text-decoration:none;padding:30px;
  background:var(--ink);box-shadow:6px 6px 0 rgba(0,0,0,.4);
}
.why .w.big .pix{margin:0;color:var(--yellow);font-size:clamp(20px,6vw,40px);letter-spacing:.04em}
.why .w.big:hover{transform:translate(-2px,-2px);box-shadow:8px 8px 0 rgba(0,0,0,.45);background:#241a52}
.why .w.big:hover .pix{color:#fff}
.why .w.big.pressed{animation:pressBig .2s ease}
@keyframes pressBig{
  0%{transform:translate(0,0);box-shadow:6px 6px 0 rgba(0,0,0,.4)}
  45%{transform:translate(7px,7px);box-shadow:0 0 0 rgba(0,0,0,.4)}
  100%{transform:translate(0,0);box-shadow:6px 6px 0 rgba(0,0,0,.4)}
}

/* ── feature card (ping) ─────────────────────────────────────────── */
.feat{
  border:3px solid var(--ink);background:#fff;padding:14px;
  box-shadow:4px 4px 0 var(--ink);
  transition:transform .15s, box-shadow .15s;
}
.feat:hover{transform:translate(-2px,-2px);box-shadow:6px 6px 0 var(--ink)}
.feat .ic{font-size:24px}
.feat .pix{font-size:9px;display:block;margin:8px 0 6px}
.feat p{font-size:14px;color:#4a4360}
.feat:nth-child(1) .pix{color:var(--hot)}
.feat:nth-child(2) .pix{color:var(--cyan)}
.feat:nth-child(3) .pix{color:var(--lime)}
.feat:nth-child(4) .pix{color:var(--purple)}
.feat:nth-child(5) .pix{color:#d97706}

/* ── modal dialog (ping) ─────────────────────────────────────────── */
.overlay{
  position:fixed;inset:0;background:rgba(19,25,58,.72);
  display:none;align-items:center;justify-content:center;
  z-index:60;padding:20px;
}
.overlay.show{display:flex;animation:pop .15s ease}
@keyframes pop{from{opacity:0}to{opacity:1}}

.modal{
  max-width:580px;width:100%;max-height:88vh;overflow:auto;
  background:var(--panel);
  border:3px solid var(--ink);box-shadow:10px 10px 0 rgba(0,0,0,.5);
}
.modal .tb{
  background:var(--titlebar-grad);color:#fff;padding:8px 12px;
  display:flex;justify-content:space-between;align-items:center;
  border-bottom:3px solid var(--ink);
  position:sticky;top:0;
}
.modal .tb .pix{font-size:11px}
.modal .x{
  cursor:pointer;width:22px;height:22px;
  background:var(--panel);border:2px solid var(--ink);color:var(--ink);
  font-family:"Press Start 2P";font-size:9px;
  display:flex;align-items:center;justify-content:center;line-height:1;
}
.modal .x:hover{background:var(--hot);color:#fff}
.modal .body{padding:20px}
.modal .lede{font-size:16px;color:#4a4360;margin-bottom:18px}

.step{display:flex;gap:14px;margin-bottom:16px}
.step .num{
  flex:0 0 auto;
  font-family:"Press Start 2P";font-size:11px;color:#fff;background:var(--ink);
  width:34px;height:34px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:3px 3px 0 var(--ink);
}
.step h4{font-family:"Press Start 2P";font-size:10px;margin:4px 0 6px}
.step p{font-size:15px;color:#4a4360}
.step:nth-child(1) h4{color:var(--hot)}
.step:nth-child(2) h4{color:var(--cyan)}
.step:nth-child(3) h4{color:var(--lime)}
.step:nth-child(4) h4{color:var(--purple)}
.step:nth-child(5) h4{color:#d97706}

.ops{border:3px dashed var(--ink);background:#fff;padding:14px;margin-top:6px}
.ops .pix{font-size:9px;display:block;margin-bottom:8px;color:var(--ink)}
.ops p{font-size:14px;color:#4a4360}

/* marketplace listing rows (built by src/marketplace.js) */
.mkt-list{display:flex;flex-direction:column;margin-top:10px}
.mkt-row{display:flex;align-items:center;gap:12px;padding:10px 2px;border-bottom:2px solid var(--ink)}
.mkt-row:last-child{border-bottom:none}
.mkt-name{flex:1;font-weight:800;min-width:0;overflow:hidden;text-overflow:ellipsis}
.mkt-kind{font-size:10px;opacity:.55;text-transform:uppercase;letter-spacing:.04em;margin-left:6px;font-weight:700}
.mkt-listed{font-size:10px;text-transform:uppercase;letter-spacing:.04em;margin-left:6px;font-weight:800;color:#b45309;background:#fde68a;border:2px solid var(--ink);padding:1px 6px;border-radius:4px}
.mkt-price{font-weight:800;white-space:nowrap}
/* Browse controls: search + sort dropdown + listing count, and the page nav below. */
.mkt-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:12px}
.mkt-search{display:flex;align-items:stretch;gap:8px;flex:1 1 240px;min-width:200px}
.mkt-qinput{flex:1;min-width:0;font-family:"VT323",monospace;font-size:18px;line-height:1;padding:6px 10px;border:2px solid var(--ink);background:#fff;color:var(--ink);border-radius:4px;outline:none}
.mkt-search .btn{margin:0;padding:8px 14px;font-size:9px;align-self:stretch}
.linklike{background:none;border:none;color:var(--purple);font:inherit;cursor:pointer;text-decoration:underline;padding:0}
.mkt-sortlabel{display:flex;align-items:center;gap:8px;font-size:9px;color:var(--ink)}
.mkt-sort{font-family:"VT323",monospace;font-size:18px;line-height:1;padding:3px 8px;border:2px solid var(--ink);background:#fff;color:var(--ink);border-radius:4px;cursor:pointer}
.mkt-count{font-size:17px}
.mkt-pager{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:12px}
.mkt-pager .btn{margin:0}
.mkt-pageno{font-size:9px;min-width:120px;text-align:center}
.btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:2px 2px 0 var(--ink);transform:none}