:root {
  --bg: #000;
  --ink: #e6e6e6;
  --muted: #8a8a8a;
  --line: rgba(255, 255, 255, 0.16);
  --panel: rgba(8, 8, 8, 0.92);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--ink);
  font: 14px/1.5 Inter, system-ui, sans-serif;
}

canvas#game { position: fixed; inset: 0; width: 100vw; height: 100vh; touch-action: none; }

.title {
  position: fixed; top: 38%; left: 0; right: 0; text-align: center; pointer-events: none;
  font: italic 300 clamp(32px, 6vw, 72px) 'Cormorant Garamond', serif; letter-spacing: 0.04em;
  opacity: 0;
}
.title.loading { opacity: 0.7; font-size: 32px; }
.title[hidden] { display: none; }
.title.show { animation: title 4s ease-in-out forwards; }
@keyframes title { 0% { opacity: 0; } 20%, 60% { opacity: 0.85; } 100% { opacity: 0; } }

.won {
  position: fixed; bottom: 20%; left: 0; right: 0; text-align: center; pointer-events: none;
  font: italic 300 28px 'Cormorant Garamond', serif; color: #111;
  opacity: 0; transition: opacity 0.6s;
}
.won.show { opacity: 0.8; }

.foot {
  position: fixed; bottom: 14px; left: 16px; pointer-events: none;
  font-size: 12px; color: var(--muted); letter-spacing: 0.02em;
}
.foot.right { left: auto; right: 16px; }

.start, .setup aside {
  background: var(--panel);
  border: 1px solid var(--line);
}

.start {
  position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: min(460px, calc(100vw - 32px)); padding: 32px;
}
.start[hidden], .setup[hidden] { display: none; }

h1, h2 { margin: 0 0 10px; font: 300 44px/1.1 'Cormorant Garamond', serif; letter-spacing: 0.02em; }
h2 { font-size: 32px; }
p { color: #bdbdbd; }
.small { font-size: 12px; color: var(--muted); }

.setup { position: fixed; inset: 0; display: flex; background: #000; }
.setup canvas#setupCanvas { flex: 1; min-width: 0; height: 100%; cursor: crosshair; touch-action: none; }
.setup aside { width: 320px; padding: 24px; overflow-y: auto; border-width: 0 0 0 1px; }
.setup ol { padding-left: 18px; color: #bdbdbd; }
#setupPreview { width: 100%; aspect-ratio: 16 / 9; image-rendering: pixelated; border: 1px solid var(--line); margin: 8px 0 12px; }

.row { display: block; margin: 14px 0; color: #bdbdbd; }
.row input[type=range] { display: block; width: 100%; margin-top: 6px; accent-color: #ddd; }
.row.check { display: flex; gap: 8px; align-items: center; }

.buttons { display: flex; gap: 10px; margin-top: 16px; }
button {
  flex: 1; height: 40px; padding: 0 14px;
  border: 1px solid #ddd; background: #ddd; color: #000;
  font: 500 14px Inter, sans-serif; cursor: pointer;
}
button.ghost { background: transparent; color: var(--ink); border-color: var(--line); }
button:hover { filter: brightness(1.1); }
#capture { width: 100%; }

kbd {
  display: inline-block; padding: 0 5px; margin-left: 4px;
  border: 1px solid currentColor; border-radius: 3px; opacity: 0.6;
  font: 11px/1.5 ui-monospace, monospace;
}

@media (max-width: 700px) {
  .setup { flex-direction: column; }
  .setup aside { width: 100%; border-width: 1px 0 0; max-height: 55vh; }
  .buttons { flex-direction: column; }
}