* { box-sizing: border-box; }
html, body { width: 100%; height: 100%; margin: 0; }
body { background: #c0c0c0; min-height: 100dvh; height: auto; padding: 12px; display: grid; place-items: center; overflow-x: hidden; }
main { position: relative; display: flex; align-items: center; gap: 16px; line-height: 0; }
canvas { display: block; width: min(960px, calc(100vw - 240px), calc((100dvh - 24px) * 1.5)); height: auto; aspect-ratio: 3 / 2; background: white; image-rendering: pixelated; outline: none; border: 2px inset #eee; cursor: default; touch-action: none; }
.gameplay { width: 200px; flex: 0 0 200px; padding: 2px; background: #c0c0c0; border: 2px outset #eee; color: #000; font: 12px Arial, sans-serif; line-height: 1.35; }
.options-body { padding: 12px 9px 7px; }
.option { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.option input { width: 13px; height: 13px; margin: 0; accent-color: #000080; }
.original { margin-bottom: 12px; font-weight: bold; }
fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
legend { padding: 0; margin-bottom: 7px; font-weight: bold; }
.difficulty { display: flex; align-items: center; justify-content: space-between; margin-bottom: 13px; }
select { background: #fff; border: 2px inset #eee; color: #000; font: inherit; padding: 1px 4px; }
.option-note { font-size: 11px; margin: 3px 0 13px 19px; }
fieldset:disabled { color: #777; }
fieldset:disabled .option { cursor: default; }
.mouse-note { border-top: 1px solid #808080; padding-top: 9px; margin: 2px 0 0; font-size: 11px; }
@media (max-width: 999px) {
  body { place-items: start center; padding: 12px 0; }
  main { width: calc(100vw - 24px); flex-direction: column; gap: 12px; }
  canvas { width: 100%; }
  .gameplay { width: 100%; flex-basis: auto; }
  fieldset { display: grid; grid-template-columns: 1fr 1fr; column-gap: 12px; }
  .difficulty { grid-column: 1 / -1; justify-content: flex-start; gap: 12px; }
}
dialog { width: 276px; padding: 2px; border: 2px outset #eee; background: #c0c0c0; color: #000; font: 12px Arial, sans-serif; line-height: normal; }
dialog::backdrop { background: transparent; }
.caption { background: #000080; color: white; font-weight: bold; padding: 3px 5px; text-align: left; }
.score-body { padding: 8px 22px 12px; text-align: center; }
.score-body p { margin: 5px 0 10px; }
ol { padding-left: 28px; margin: 0 0 12px; text-align: right; font-family: 'Courier New', monospace; }
li { min-height: 15px; padding-right: 24px; }
li.current { font-weight: bold; }
button { background: #c0c0c0; border: 2px outset #eee; color: #000; font: 12px Arial, sans-serif; padding: 3px 26px; outline: 1px solid #000; outline-offset: 1px; }
button:active { border-style: inset; }