* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, sans-serif; background: #10131a; color: #f2f4f8; }
header { text-align: center; padding: 16px; }
h1 { margin: 0 0 4px; font-size: 1.4rem; }
.instructions { margin: 0 0 10px; opacity: 0.8; }
#reset { padding: 6px 14px; border: 0; border-radius: 6px; cursor: pointer; background: #3b82f6; color: #fff; }
#reset:hover { background: #2563eb; }
main { display: flex; justify-content: center; padding: 12px; }
#stage { max-width: 100%; border-radius: 8px; background: #1b2030; }
/* Scale the fixed-size portrait board down to fit narrow (mobile) screens. */
#puzzle canvas { max-width: 100%; height: auto; }
.done-banner {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  background: #16a34a; color: #fff; padding: 12px 22px; border-radius: 8px;
  font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .4s;
}
.done-banner.show { opacity: 1; }