:root {
  color-scheme: dark;
  --paper: #f3dfb0;
  --text: #c6d6cc;
  --line: #456163;
  --brass: #d7aa62;
  --water: #88dcd3;
  font-family: "Avenir Next", system-ui, sans-serif;
  background: #10272d;
  color: var(--text);
}
* { box-sizing: border-box; }
body { margin: 0; }
[hidden] { display: none !important; }
h1, h2, p { margin: 0; }
h1, h2 { font-family: Georgia, "Times New Roman", serif; font-weight: 400; color: var(--paper); }
.workshop {
  width: min(100%, 980px);
  min-height: 440px;
  height: 100svh;
  height: 100dvh;
  margin: auto;
  padding: max(10px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
}
.masthead { padding: 0 4px 8px; }
.brand { color: #e6b875; font: 400 15px/1.1 Georgia, serif; margin-bottom: 4px; }
h1 { font-size: clamp(26px, 8vw, 39px); line-height: 1.04; letter-spacing: -.04em; }
.goal { font-size: 14px; line-height: 1.35; margin-top: 4px; }
.stage {
  position: relative;
  min-width: 0;
  min-height: 0;
  isolation: isolate;
}
#game, .moves { position: absolute; inset: 0; }
#game { touch-action: none; overflow: hidden; border-radius: 10px; }
canvas { display: block; }
.moves { pointer-events: none; }
button {
  min-width: 48px;
  min-height: 48px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #19353a;
  color: var(--paper);
  font: 600 14px/1 system-ui, sans-serif;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
}
button:focus-visible { outline: 2px solid #ffe0a0; outline-offset: 2px; }
button:disabled { color: #a0afaa; opacity: .65; cursor: default; }
button:active:not(:disabled) { background: #41615c; }
.move {
  position: absolute;
  width: 48px;
  height: 48px;
  padding: 0;
  display: grid;
  place-items: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: auto;
}
.move span {
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border: 1px solid #d8f2e5;
  border-radius: 50%;
  background: #183e3deb;
  color: #e1fbeb;
  font-size: 15px;
  box-shadow: 0 1px 4px #081c20;
  pointer-events: none;
}
.move[data-push] span { width: 25px; height: 25px; border-color: #ffe4ad; background: #624923; color: #fff0cd; }
.move:active:not(:disabled) { background: transparent; }
.move:active span, .move:hover span { background: #c9e6d7; color: #15342f; }
.dock { padding-top: 7px; }
.guidance { display: flex; align-items: baseline; gap: 9px; padding: 0 3px 8px; }
.progress { display: inline-flex; align-items: center; gap: 4px; color: var(--paper); font-size: 12px; white-space: nowrap; }
.lamp { width: 8px; height: 8px; border: 1px solid #c8a572; border-radius: 50%; }
.lamp.lit { border-color: #cef9e8; background: var(--water); }
#hint { font-size: 13px; line-height: 1.35; }
nav { display: grid; grid-template-columns: 1fr 1fr 48px; gap: 8px; }
nav span { font-size: 18px; margin-right: 3px; vertical-align: -1px; }
#sound { font-size: 21px; }
.ending {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 8px;
  background: #09181c99;
  border-radius: 10px;
}
.ending-copy { max-width: 320px; padding: 16px; text-align: center; background: #142c30f8; border-block: 1px solid var(--brass); }
.ending h2 { font-size: clamp(23px, 5vw, 36px); }
.ending p { margin: 6px 0 11px; font-size: 13px; line-height: 1.4; }
.ending button { color: #13282c; background: #edc582; }
dialog {
  width: min(330px, calc(100% - 32px));
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #163135;
  color: var(--text);
}
dialog::backdrop { background: #09181cb8; }
dialog p { margin: 8px 0 15px; }
.dialog-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.sr-only { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
@media (min-width: 680px) and (min-height: 510px) {
  .workshop { padding: 18px 25px 15px; }
  .masthead { padding-bottom: 12px; }
  .dock { width: min(100%, 470px); margin: auto; }
}
@media (max-height: 510px) and (orientation: landscape) {
  .workshop { min-height: 270px; grid-template: auto minmax(0, 1fr) / minmax(0, 1fr) 170px; column-gap: 10px; }
  .masthead { grid-column: 1 / -1; padding-bottom: 5px; }
  h1 { font-size: 23px; }
  .goal { font-size: 13px; }
  .dock { align-self: center; }
  .guidance { display: grid; gap: 6px; }
  nav { grid-template-columns: 1fr 48px; }
  #undo { grid-column: 1 / -1; }
}