html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

body { background: #ffffff; color: #32323c; }
body[data-theme="dark"] { background: #12131a; color: #d9d7df; }

canvas { display: block; width: 100vw; height: 100vh; }

#bar {
  position: fixed;
  top: 14px;
  left: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  transition: opacity 0.4s;
}

/* While playing, the toolbar fades until the mouse moves. */
body.playing.idle #bar { opacity: 0; pointer-events: none; }
body.playing.idle canvas { cursor: none; }

#bar button, #bar input {
  font: inherit;
  color: inherit;
  background: transparent;
  border: 1px solid rgba(128, 128, 140, 0.5);
  border-radius: 4px;
  padding: 6px 11px;
}

#bar button { cursor: pointer; }
#bar button:hover { border-color: currentColor; }
#bar button.primary { background: #46588C; border-color: #46588C; color: #fff; min-width: 64px; }
#bar input { width: 130px; }
#bar label { display: flex; align-items: center; gap: 6px; opacity: 0.85; }

/* --- Setup panel --------------------------------------------------------- */

#setup {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: 460px;
  max-width: 100vw;
  box-sizing: border-box;
  overflow-y: auto;
  padding: 14px 18px 40px;
  font-size: 13px;
  background: #f4f4f7;
  border-left: 1px solid rgba(128, 128, 140, 0.35);
}
#setup[hidden] { display: none; }
body[data-theme="dark"] #setup { background: #1b1c25; }

.setup-head, .card-head { display: flex; justify-content: space-between; align-items: baseline; }
.setup-head h2 { margin: 0 0 10px; font-size: 18px; font-weight: 500; }

.card {
  margin: 0 0 12px;
  padding: 12px 12px 4px;
  border-radius: 6px;
  background: #ffffff;
  border: 1px solid rgba(128, 128, 140, 0.25);
}
body[data-theme="dark"] .card { background: #12131a; }
.card-head { margin-bottom: 8px; }

.hint { margin: 0 0 10px; opacity: 0.7; line-height: 1.4; }

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 10px; margin-bottom: 10px; align-items: end; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; align-items: end; }
.field { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.field.wide, .grid > .pair { grid-column: 1 / -1; }
.field span { font-size: 11px; opacity: 0.7; }

#setup input, #setup select, #setup textarea {
  font: inherit;
  color: inherit;
  width: 100%;
  box-sizing: border-box;
  padding: 6px 8px;
  border-radius: 4px;
  border: 1px solid rgba(128, 128, 140, 0.5);
  background: transparent;
}
#setup textarea { resize: vertical; font-family: ui-monospace, Menlo, monospace; font-size: 12px; }
body[data-theme="dark"] #setup select option { background: #1b1c25; }

#setup button { font: inherit; color: inherit; cursor: pointer; }
#setup button.tool {
  padding: 6px 11px;
  border-radius: 4px;
  background: transparent;
  border: 1px solid rgba(128, 128, 140, 0.6);
}
#setup button.tool:hover { border-color: currentColor; }
#setup button.link { border: 0; background: none; padding: 0; opacity: 0.7; text-decoration: underline; }

.setup-actions { display: flex; gap: 8px; margin-bottom: 12px; }
#setup-status { margin: 0; opacity: 0.75; line-height: 1.5; }
#setup-status.error { color: #B5533C; opacity: 1; }

/* Keep the toolbar visible while setting up. */
body.setup-open.playing.idle #bar { opacity: 1; pointer-events: auto; }

.hint.wide { grid-column: 1 / -1; margin: 0; }

.check { display: flex; align-items: center; gap: 8px; padding: 6px 0; cursor: pointer; }
#setup .check input { width: auto; }

.hint.mono { font-family: ui-monospace, Menlo, monospace; font-size: 12px; opacity: 0.85; }

.credit { margin: 14px 0 4px; font-size: 12px; opacity: 0.6; }