:root { color-scheme: light dark; }
body { font-family: system-ui, sans-serif; margin: 0; background: Canvas; color: CanvasText; }
.page { max-width: 60em; margin: 0 auto; padding: 1em; display: grid; gap: 1em; }
h1 { font-size: 1.4em; margin: 0; }
h2 { font-size: 1.05em; margin: 0 0 .5em; }
h3 { font-size: .95em; margin: 0 0 .3em; }
.sub { color: GrayText; font-size: .85em; }
.card { border: 1px solid color-mix(in srgb, CanvasText 20%, transparent); border-radius: 8px; padding: .8em 1em; }
.row { display: flex; gap: .5em; flex-wrap: wrap; align-items: center; margin-top: .5em; }
button { padding: .35em .9em; border-radius: 6px; border: 1px solid color-mix(in srgb, CanvasText 30%, transparent); background: Canvas; color: CanvasText; cursor: pointer; }
button:hover { background: color-mix(in srgb, CanvasText 8%, Canvas); }
button:disabled { opacity: .45; cursor: not-allowed; }
button.danger { border-color: #b3261e; color: #b3261e; }
input { padding: .35em .6em; border-radius: 6px; border: 1px solid color-mix(in srgb, CanvasText 30%, transparent); background: Canvas; color: CanvasText; }
.error { color: #b3261e; min-height: 1.2em; font-size: .85em; }
.tiers { display: grid; grid-template-columns: repeat(auto-fit, minmax(13em, 1fr)); gap: .8em; }
.tier { border: 1px solid color-mix(in srgb, CanvasText 15%, transparent); border-radius: 8px; padding: .6em; }
.hud { display: flex; gap: 1.2em; align-items: center; margin-bottom: .6em; flex-wrap: wrap; }
.board { display: grid; gap: 2px; overflow: auto; max-width: 100%; }
.cell { width: 1.9em; height: 1.9em; padding: 0; display: grid; place-items: center; font-size: .8em; border-radius: 3px;
  background: color-mix(in srgb, CanvasText 12%, Canvas); border: 1px solid color-mix(in srgb, CanvasText 25%, transparent); }
.cell.open { background: Canvas; }
.cell.flag { background: color-mix(in srgb, #f9a825 25%, Canvas); }
.cell.detonated { background: #b3261e; color: #fff; }
.result { margin-top: .6em; font-weight: 600; }
.boards { display: grid; grid-template-columns: repeat(auto-fit, minmax(12em, 1fr)); gap: .8em; }
.board-lb ol { margin: 0; padding-left: 1.4em; }
.log { margin: 0; padding-left: 1.4em; max-height: 12em; overflow: auto; font-size: .82em; color: GrayText; }
[hidden] { display: none !important; }
label { display: flex; flex-direction: column; gap: .25em; }
label:has(input[type=checkbox]) { flex-direction: row; align-items: center; }
#recovery-code { display: block; overflow-wrap: anywhere; padding: .8em; border: 1px solid currentColor; }
.cell { touch-action: manipulation; }
.tier button { margin: .2em; }