/* RETRO-KIT site styles. Colours = the locked HAMMO-16 palette (assets/palette.json), nothing else. */
@font-face { font-family: 'Press Start 2P'; src: url('/fonts/press-start-2p-latin.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'Silkscreen'; src: url('/fonts/silkscreen-latin.woff2') format('woff2'); font-display: swap; }

:root {
  --K: #2b230f; --D: #533f1f; --B: #ab6f43; --O: #ffa35b; --L: #ffc79b; --C: #ffebdb; --P: #e78f8f;
  --R: #cb0000; --M: #6b0f0f; --G: #5b6347; --g: #7b7f63; --S: #4f4f4f; --s: #9f9f9f; --W: #d3d3d3; --Y: #ebdb57; --w: #ffffff;
  --px: 4px;
  --head: 'Press Start 2P', ui-monospace, monospace;
  --body: 'Silkscreen', ui-monospace, monospace;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--K); color: var(--C); font-family: var(--body); font-size: 18px; line-height: 1.45; }
img.px, canvas { image-rendering: pixelated; image-rendering: crisp-edges; }
a { color: var(--Y); }
h1, h2, h3, .btn, .tag { font-family: var(--head); font-weight: 400; letter-spacing: 0; }
h2 { font-size: 22px; line-height: 1.5; margin: 0 0 20px; color: var(--Y); text-shadow: 3px 3px 0 var(--M); }
h3 { font-size: 13px; margin: 0 0 10px; color: var(--O); }
p { margin: 0 0 12px; }

/* chunky pixel box: stepped corners via box-shadow, no blur */
.box {
  background: var(--D); color: var(--C); padding: 18px 20px; position: relative;
  box-shadow: 0 -4px 0 0 var(--K), 0 4px 0 0 var(--K), -4px 0 0 0 var(--K), 4px 0 0 0 var(--K), inset 0 4px 0 0 var(--B), inset 0 -4px 0 0 var(--M);
  margin: 4px;
}
.btn {
  display: inline-block; cursor: pointer; border: 0; font-size: 16px; padding: 16px 22px; color: var(--K); background: var(--Y);
  text-decoration: none; text-transform: uppercase;
  box-shadow: 0 -4px 0 0 var(--K), 0 4px 0 0 var(--K), -4px 0 0 0 var(--K), 4px 0 0 0 var(--K), inset 0 -6px 0 0 var(--O), inset 0 4px 0 0 var(--w);
  margin: 4px;
}
.btn:hover { transform: translateY(-2px); }
.btn:active { transform: translateY(2px); box-shadow: 0 -4px 0 0 var(--K), 0 4px 0 0 var(--K), -4px 0 0 0 var(--K), 4px 0 0 0 var(--K), inset 0 4px 0 0 var(--O); }
.btn.red { background: var(--R); color: var(--w); box-shadow: 0 -4px 0 0 var(--K), 0 4px 0 0 var(--K), -4px 0 0 0 var(--K), 4px 0 0 0 var(--K), inset 0 -6px 0 0 var(--M), inset 0 4px 0 0 var(--P); }
.btn.ghost { background: var(--D); color: var(--C); box-shadow: 0 -4px 0 0 var(--K), 0 4px 0 0 var(--K), -4px 0 0 0 var(--K), 4px 0 0 0 var(--K), inset 0 -6px 0 0 var(--K), inset 0 4px 0 0 var(--B); }
.btn.big { font-size: 22px; padding: 22px 34px; }
.tag { display: inline-block; font-size: 10px; padding: 6px 8px; background: var(--M); color: var(--C); }
.tag.y { background: var(--Y); color: var(--K); }
.tag.g { background: var(--G); color: var(--C); }
input {
  font-family: var(--body); font-size: 18px; background: var(--K); color: var(--C); border: 0; padding: 12px; width: 100%;
  box-shadow: inset 0 0 0 4px var(--B);
}
input:focus { outline: 4px solid var(--Y); outline-offset: 0; }
.mono { font-family: ui-monospace, Consolas, monospace; }
.muted { color: var(--L); opacity: .85; }
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 50; pointer-events: none;
  font-family: var(--head); font-size: 12px; background: var(--K); color: var(--Y); padding: 12px 16px; box-shadow: 0 0 0 4px var(--Y);
}
:focus-visible { outline: 4px solid var(--Y); outline-offset: 2px; }