/* RETRO-KIT site styles. Colours = the locked Sweetie 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 {
  /* Sweetie 16 mapped onto the kit's colour roles: K page, D panel, B panel light, M panel shadow, Y main accent,
     O second accent, L muted text, C body text */
  --K: #1a1c2c; --D: #333c57; --B: #566c86; --O: #ef7d57; --L: #94b0c2; --C: #f4f4f4; --P: #ef7d57;
  --R: #b13e53; --M: #29366f; --G: #257179; --g: #38b764; --S: #566c86; --s: #94b0c2; --W: #94b0c2; --Y: #ffcd75; --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; }