html, body { height: 100%; overflow: hidden; background: #10281a; }
#app { height: 100dvh; }
.view { display: none; flex-direction: column; min-height: 0; }
.view.active { display: flex; height: 100dvh; overflow: hidden; }
.view[hidden] { display: none !important; }
.colour-bar, .play-chrome, .picker-intro, .palette-wrap, .save-note { flex: none; }
.play-chrome, .picker-intro, .colour-bar { padding-left: 12px; padding-right: 12px; }
.picker-intro h1, .colour-bar h2 { margin: 0; letter-spacing: -0.03em; }
.play-chrome { position: relative; z-index: 20; display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; padding-top: calc(8px + env(safe-area-inset-top)); padding-bottom: 8px; background: #10281a; overflow: visible; }
.colour-bar { flex-direction: column; align-items: stretch; gap: 8px; }
.chrome-nav, .colour-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; overflow: visible; min-width: 0; }
.chrome-title { min-width: 0; width: 100%; }
.chrome-title h2, .chrome-title p { margin: 0; white-space: normal; overflow: visible; text-overflow: unset; }
.chrome-title h2 { font-size: clamp(1.15rem, 4.4vw, 1.5rem); line-height: 1.2; }
.colour-actions .text-btn, .chrome-nav .text-btn { font-size: 1rem; }
.play-chrome .brand img { height: 40px; }
.pick-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; padding: 14px; overflow: auto; }
.card { border: 0; padding: 0; border-radius: 18px; overflow: hidden; background: #1b3d2a; color: inherit; text-align: left; cursor: pointer; }
.card-art { position: relative; background: #fff; }
.card-thumb { width: 100%; aspect-ratio: 1; object-fit: contain; background: #fff; }
.card-flag { position: absolute; left: 8px; top: 8px; }
.badge { position: absolute; right: 8px; bottom: 8px; background: #e23d32; color: white; border-radius: 999px; padding: 4px 8px; font-size: 0.75rem; }
.card-meta { padding: 8px 10px 12px; }
.card-country { color: #f0b429; font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; }
.card-char { font-weight: 800; }
.canvas-wrap { flex: 1 1 auto; min-height: 0; display: grid; place-items: center; padding: 8px; position: relative; z-index: 1; overflow: hidden; contain: paint; }
#colour-canvas { background: white; border-radius: 12px; touch-action: none; visibility: hidden; pointer-events: none; }
#colour-canvas.is-ready { visibility: visible; pointer-events: auto; }
.colour-loading {
  position: absolute; inset: 16px; display: grid; place-items: center;
  color: #f7f1e6; text-align: center; padding: 16px;
}
.colour-loading[hidden] { display: none !important; }
.save-note { margin: 0 14px; color: #f0b429; }
.save-note:empty { display: none; }
.palette-wrap {
  position: relative; z-index: 20; bottom: auto;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  background: #0c1c13;
}
.palette { display: flex; gap: 8px; overflow-x: auto; }
.swatch {
  width: 44px; height: 44px; min-width: 44px; border-radius: 50%; border: 3px solid transparent; cursor: pointer;
}
.swatch[aria-selected="true"] { border-color: #fff8ee; }
.swatch.eraser { background: #fff; box-shadow: inset 0 0 0 2px #142117; }
@media (max-width: 800px) { .pick-grid { grid-template-columns: repeat(2, 1fr); } }