:root { color-scheme: dark; }
* { box-sizing: border-box; }

/* brick texture, pure CSS — same pattern as the logo */
body {
  margin: 0;
  font-family: ui-monospace, monospace;
  background:
    repeating-linear-gradient(0deg, transparent 0 40px, rgba(0,0,0,.35) 40px 44px),
    repeating-linear-gradient(90deg, transparent 0 96px, rgba(0,0,0,.35) 96px 100px),
    repeating-linear-gradient(0deg, #1c1c22 0 40px, #232329 40px 44px),
    #16161b;
  background-attachment: fixed;
  color: #e8e8ea;
}

header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 14px 20px;
  background: #0a0a0c;
  border-bottom: 4px solid #000;
  box-shadow: 0 4px 0 rgba(255,215,0,.25);
}
h1 {
  font-family: "Press Start 2P", ui-monospace, monospace;
  font-size: 18px; letter-spacing: 4px; margin: 0; color: #ffd700;
  text-shadow: 3px 3px 0 #000;
}
#wallet-bar { display: flex; gap: 8px; align-items: center; }

/* chunky pixel buttons — logo style, monospace text */
button {
  background: #1c1c22; color: #e8e8ea;
  border: 2px solid #3a3a44;
  box-shadow: inset -3px -3px 0 rgba(0,0,0,.55), inset 3px 3px 0 rgba(255,255,255,.07);
  padding: 10px 14px; cursor: pointer; font: inherit; font-size: 12px;
}
button:hover { border-color: #ffd700; color: #ffd700; }
button:active { box-shadow: inset 3px 3px 0 rgba(0,0,0,.55); transform: translate(1px, 1px); }
#release { border-color: #ffd700; color: #ffd700; }

#subbar {
  display: flex; gap: 18px; justify-content: center;
  padding: 6px 12px; font-size: 12px; color: #999;
  background: rgba(10,10,12,.85); border-bottom: 2px solid #000;
  min-height: 28px; align-items: center;
}
#mode { color: #4aa8ff; }
#painters { color: #00e5a0; }
#bag { color: #ffd700; }

#chrome { position: fixed; top: 0; left: 0; right: 0; z-index: 10; }

main { width: 100%; line-height: 0; padding-top: var(--chrome-h, 150px); }
#wall {
  display: block; width: 100vw; aspect-ratio: 1; margin: 0 auto;
  background: #111114; cursor: crosshair;
  image-rendering: pixelated; touch-action: none;
  border-top: 4px solid #000; border-bottom: 4px solid #000;
}

#palette {
  display: flex; gap: 8px; justify-content: center; padding: 12px; flex-wrap: wrap;
  background: rgba(10,10,12,.85);
}
.swatch {
  width: 30px; height: 30px; cursor: pointer;
  border: 2px solid #333;
  box-shadow: inset -2px -2px 0 rgba(0,0,0,.4);
}
.swatch.active { border-color: #ffd700; box-shadow: 0 0 10px rgba(255,215,0,.7); }

#toast {
  position: fixed; top: 76px; left: 50%; transform: translateX(-50%);
  background: #ffd700; color: #0a0a0c;
  padding: 12px 22px; font-size: 14px; font-weight: bold; line-height: 1.4; z-index: 10;
  border: 2px solid #000;
  box-shadow: 4px 4px 0 rgba(0,0,0,.6);
}