/* Stage 1 layout. Every visible control here is PLACEHOLDER UI: right size and
   position for touch, final art comes from the purchased UI kit. */
:root {
  --bg: #f2b3d6;
  --bar: rgba(70, 18, 82, 0.82);
  --ink: #fff;
  --accent: #ff4fa3;
}
* { box-sizing: border-box; }
html, body {
  margin: 0; height: 100%; overflow: hidden;
  background: var(--bg);
  font-family: -apple-system, system-ui, sans-serif;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
}
#stage { position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none; }

#loading {
  position: fixed; inset: 0; display: grid; place-items: center;
  color: #6b1f73; font-size: 20px; font-weight: 700; pointer-events: none;
}
#hud {
  position: fixed; left: 10px; top: calc(env(safe-area-inset-top, 0px) + 10px);
  padding: 8px 12px; border-radius: 12px; background: rgba(40, 10, 48, 0.7);
  color: #ffd6ef; font: 12px/1.45 ui-monospace, Menlo, monospace; white-space: pre;
  pointer-events: none;
}
#placeholder-tag {
  position: fixed; right: 10px; top: calc(env(safe-area-inset-top, 0px) + 10px);
  padding: 4px 10px; border: 2px dashed #8e2f8e; border-radius: 10px;
  color: #8e2f8e; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; pointer-events: none;
}

.bar {
  position: fixed; left: 50%; transform: translateX(-50%);
  display: flex; gap: 10px; padding: 10px 14px; border-radius: 28px;
  background: var(--bar); border: 2px dashed rgba(255, 255, 255, 0.35);
  max-width: calc(100% - 20px); overflow-x: auto;
}
#colours { bottom: calc(env(safe-area-inset-bottom, 0px) + 86px); }
#tools { bottom: calc(env(safe-area-inset-bottom, 0px) + 12px); }
#shapes { display: flex; gap: 8px; }

button { font: inherit; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.chip {
  width: 56px; height: 56px; flex: 0 0 auto; border-radius: 50%;
  background: var(--c); border: 4px solid rgba(255, 255, 255, 0.85);
}
.chip.on { outline: 4px solid var(--accent); outline-offset: 2px; }
.tool {
  min-width: 56px; height: 56px; padding: 0 14px; border-radius: 18px; flex: 0 0 auto;
  background: #8e2f8e; color: var(--ink); font-size: 14px; font-weight: 700;
}
.tool.on { background: var(--accent); }
.sep { width: 2px; background: rgba(255, 255, 255, 0.3); flex: 0 0 auto; }