:root { color-scheme: dark; }
* { box-sizing: border-box; }
body {
  margin: 0; display: flex; min-height: 100vh; background: #0c0f12; color: #dde5ea;
  font-family: system-ui, -apple-system, sans-serif;
}
#panel {
  width: 308px; flex: 0 0 308px; padding: 18px 18px 24px; overflow-y: auto;
  background: #12161b; border-right: 1px solid #232b33;
}
#panel h1 { font-size: 26px; margin: 0 0 4px; letter-spacing: 0.2px; font-weight: 750; }
#panel .sub { margin: 0 0 18px; color: #93a1ad; font-size: 13px; line-height: 1.45; }
#panel section { padding: 14px 0 16px; border-top: 1px solid #232b33; }
#panel h2 { font-size: 12px; text-transform: uppercase; letter-spacing: 1.4px; color: #7ee787; margin: 0 0 10px; font-weight: 650; }
label { display: block; font-size: 13px; margin: 10px 0; color: #c3ced6; }
label output { float: right; color: #7ee787; font-variant-numeric: tabular-nums; }
label.check { display: flex; gap: 8px; align-items: center; }
.row { display: flex; gap: 8px; }
.row > * { flex: 1; }
input[type="number"], select {
  width: 100%; margin-top: 4px; background: #0a0d10; color: #e6edf3;
  border: 1px solid #2b3540; border-radius: 4px; padding: 6px 8px; font: inherit; font-size: 13px;
}
input[type="range"] { width: 100%; margin-top: 6px; accent-color: #58a83c; }
button {
  background: #1d6fb8; color: #fff; border: 0; border-radius: 4px;
  padding: 7px 10px; font: inherit; font-size: 13px; cursor: pointer; margin-top: 6px;
}
button:hover { background: #2f81f7; }
button.secondary { background: #2b3540; }
#dice { flex: 0 0 auto; }
.hint { color: #8494a2; font-size: 12px; line-height: 1.5; }
#stats { margin: 0; }
#stats > div { display: flex; justify-content: space-between; padding: 3px 0; font-size: 13px; }
#stats dt { color: #93a1ad; }
#stats dd { margin: 0; font-variant-numeric: tabular-nums; color: #e6edf3; }
#stage { flex: 1; position: relative; min-width: 0; }
#view { position: absolute; inset: 0; }
#view canvas { display: block; }
#badge {
  position: absolute; top: 14px; right: 14px; padding: 5px 10px; border-radius: 3px;
  background: rgba(10, 14, 10, 0.72); color: #7ee787; font-size: 11px;
  letter-spacing: 1.6px; font-weight: 650; pointer-events: none;
}
#badge.manual { color: #f0b35e; }
@media (max-width: 760px) {
  body { flex-direction: column; }
  #panel { width: 100%; flex: none; border-right: 0; border-bottom: 1px solid #232b33; }
  #stage { min-height: 62vh; }
}