:root {
  /* Palette */
  --nearly-black: #191716ff;
  --blue: #004fffff;
  --pink: #b6174bff;
  --green: #81f495ff;
  --yellow: #fbb13cff;
  --orange: #ff9f1cff;
  --teal: #2ec4b6ff;
  --paper: #f7f2e8;
  --shadow: rgba(0, 0, 0, 0.18);

  /* Accents */
  --tape-blue: #6fb3ffff;
  --tape-yellow: #ffe38bff;
  --fridge: #e4edf4;
  --fridge-edge: #c2d2e0;
}

@font-face {
  font-family: 'Cexsons';
  src: url('../Cexsons.otf') format('opentype');
}

@font-face {
  font-family: 'Lokka';
  src: url('../Lokka.otf') format('opentype');
}

html,
body {
  height: 100%;
  margin: 0;
  background: radial-gradient(circle at 10% 0%, rgba(255, 255, 255, 0.65), transparent 55%),
    radial-gradient(circle at 85% 15%, rgba(255, 255, 255, 0.6), transparent 55%),
    var(--fridge);
  font-family: 'Lokka', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: var(--nearly-black);
}

/* Fridge door panel with taped paper */
#wrap {
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
  padding: 30px;
  box-sizing: border-box;
}

main {
  position: relative;
  flex: 1;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  max-width: 1100px;
  margin: 0 auto;
  /* Irregular border for torn paper look */
  border-radius: 4px 10px 3px 12px / 12px 3px 10px 4px;
  background:
    url('../paper_bg.png') center/cover no-repeat,
    var(--paper);
  box-shadow:
    2px 5px 15px rgba(0, 0, 0, 0.2),
    0 0 0 2px rgba(255, 255, 255, 0.9);
}







canvas {
  display: block;
  width: 100%;
  flex: 1;
  min-height: 0;
  border-bottom: 2px dashed rgba(0, 0, 0, 0.18);
}

/* Typography */
h1, h2, h3, h4, h5 {
  font-family: 'Cexsons', 'Lokka', system-ui;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--nearly-black);
}

.small,
.hintkeys,
label,
input,
button,
.mono,
.stat span {
  font-family: 'Lokka', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  font-weight: 800;
  color: var(--nearly-black);
}

/* Subtle paper grain overlay (kept but softened) */
#grain {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 12% 32%, rgba(0, 0, 0, .03), transparent 35%),
    radial-gradient(circle at 72% 18%, rgba(0, 0, 0, .03), transparent 30%),
    radial-gradient(circle at 60% 80%, rgba(0, 0, 0, .03), transparent 40%),
    repeating-linear-gradient(0deg, rgba(0, 0, 0, .015), rgba(0, 0, 0, .015) 1px, transparent 1px, transparent 3px);
  mix-blend-mode: multiply;
  opacity: .18;
  pointer-events: none;
}