/* ABOUTME: Visual design for the sandbox page, built on Hello Gravel's brand tokens. */
/* ABOUTME: Dark bedrock page, chalk dock, orange for the active tool; lays out for phone and desktop. */
/* Self-hosted display face (see index.html for why the Google Fonts link went). */
@font-face {
  font-family: "Plus Jakarta Sans";
  src: url("/fonts/plus-jakarta-sans-latin-wght-normal.woff2") format("woff2");
  font-weight: 200 800;
  font-display: swap;
}

:root {
  --hello-orange: #F5841F;
  --hello-orange-hover: #E0730E;
  --chalk: #F7F5F0;
  --ite: #EAE6DE;
  --seam: #D4CEC5;
  --clay: #A3978C;
  --shale: #6B6560;
  --bedrock: #1A1714;
  --core-blue: #2E4057;
  --orange-bg: #FEF3E8;
  --display: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif;
  --body: "Instrument Sans", ui-sans-serif, system-ui, sans-serif;
  --mono: "JetBrains Mono", ui-monospace, monospace;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bedrock);
  color: var(--bedrock);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}

.app {
  max-width: 1180px;
  margin: 0 auto;
  padding: 16px;
  display: grid;
  gap: 12px;
}

.bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  color: var(--chalk);
}

.brand { display: flex; align-items: baseline; gap: 14px; }
.wordmark { font-family: var(--display); font-weight: 800; letter-spacing: 0.04em; font-size: 14px; color: var(--seam); }
.wordmark b { color: var(--hello-orange); }
h1 { margin: 0; font-family: var(--display); font-weight: 800; font-size: 26px; letter-spacing: -0.01em; }

.stage {
  position: relative;
  border-radius: 14px;
  overflow: hidden;
  background: var(--chalk);
  box-shadow: 0 0 0 1px #3a342e, 0 18px 40px rgba(0, 0, 0, 0.35);
}

#world {
  display: block;
  width: 100%;
  height: auto;
  image-rendering: pixelated;
  touch-action: none;
  cursor: none;
}

.dock {
  display: grid;
  gap: 10px;
  background: var(--chalk);
  border-radius: 14px;
  padding: 12px;
}

.tools, .materials { display: flex; flex-wrap: wrap; gap: 6px; }

.tool, .chip {
  font: 600 13px var(--body);
  border: 1px solid var(--seam);
  background: var(--white, #fff);
  color: var(--bedrock);
  border-radius: 10px;
  padding: 8px 11px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  transition: transform 80ms ease, background 120ms ease;
}
.tool:active, .chip:active { transform: scale(0.96); }
.tool kbd { font: 500 10px var(--mono); color: var(--clay); }
.tool[aria-pressed="true"] { background: var(--hello-orange); border-color: var(--hello-orange); }
.tool[aria-pressed="true"] kbd { color: var(--bedrock); }

.chip { padding: 6px 10px 6px 7px; font-weight: 500; }
.chip .swatch { width: 16px; height: 16px; border-radius: 4px; box-shadow: inset 0 0 0 1px rgba(0,0,0,0.15); }
.chip[aria-checked="true"] { border-color: var(--bedrock); box-shadow: inset 0 0 0 1px var(--bedrock); background: var(--orange-bg); }
.materials.idle { opacity: 0.45; }

.dock-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.brush { font: 500 13px var(--body); color: var(--shale); display: flex; align-items: center; gap: 8px; }
.brush input { accent-color: var(--hello-orange); }
.ghost {
  font: 600 12px var(--body);
  background: none;
  border: 1px solid var(--seam);
  color: var(--shale);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
}
.ghost:hover { color: var(--bedrock); border-color: var(--clay); }

@media (max-width: 860px) {
  h1 { font-size: 20px; }
  .tools, .materials { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
  .tool, .chip { flex: none; }
}

@media (prefers-reduced-motion: reduce) {
  .tool, .chip { transition: none; }
}

/* Wayfinding back to the site — the artifact had none, since it was a standalone page. */
.bar .fine { margin: 0; font: 500 13px var(--body); color: var(--clay); }
.bar .fine a { color: var(--seam); text-decoration: none; }
.bar .fine a:hover { color: var(--hello-orange); text-decoration: underline; }
@media (max-width: 860px) { .bar .fine { display: none; } }