@font-face {
  font-family:'DM Sans';
  src:url('./assets/fonts/DMSans.woff2') format('woff2');
  font-weight:100 1000;
  font-style:normal;
  font-display:swap;
}

@font-face {
  font-family:'Space Grotesk';
  src:url('./assets/fonts/SpaceGrotesk.woff2') format('woff2');
  font-weight:300 700;
  font-style:normal;
  font-display:swap;
}
:root {
  font-family:'DM Sans',sans-serif;
  color:#292c27;
  background:#f7f7f2;
  font-synthesis:none;
  --paper:#f7f7f2;
  --ink:#292c27;
  --muted:#777a72;
  --orange:#e8683e;
  --orange-dark:#bd4420;
  --border:#e1e2d9;
  --mono:'Space Grotesk',monospace;
}

* {
  box-sizing:border-box;
}

html {
  scroll-behavior:smooth;
  scroll-padding-top:24px;
}

body {
  margin:0;
}

button,input,a {
  -webkit-tap-highlight-color:transparent;
}

button,a,input {
  touch-action:manipulation;
}

button {
  font:inherit;
}

button {
  cursor:pointer;
}

a {
  color:inherit;
  text-decoration:none;
}

button:disabled {
  cursor:default;
}

button:focus-visible,a:focus-visible,input:focus-visible+span {
  outline:3px solid #285b89;
  outline-offset:5px;
}

button {
  color:inherit;
}

h1,h2,h3,p {
  margin:0;
}

svg.icon {
  width:21px;
  height:21px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex-shrink:0;
}

.icon-definitions {
  position:absolute;
  width:0;
  height:0;
  overflow:hidden;
}

.orange {
  color:var(--orange);
}

[hidden] {
  display:none!important;
}

.sr-only {
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}

.site-header {
  max-width:1256px;
  margin:auto;
  height:100px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-bottom:1px solid var(--border);
  padding:0 8px;
}

.brand {
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--mono);
  font-size:30px;
  font-weight:700;
  letter-spacing:-1.8px;
}

.brand-mark {
  display:grid;
  grid-template-columns:repeat(2,10px);
  gap:3px;
  transform:rotate(-8deg);
}

.brand-mark i {
  background:var(--orange);
  width:10px;
  height:10px;
  border-radius:2px;
}

.brand-rush {
  font-weight:400;
}

.brand-period {
  color:var(--orange);
}

nav {
  display:flex;
  gap:34px;
  font-size:12px;
  font-weight:600;
  margin-left:72px;
}

nav a {
  position:relative;
  padding:15px 0;
  color:#636b59;
}

nav .nav-active {
  color:var(--ink);
}

nav .nav-active:after {
  content:'';
  position:absolute;
  bottom:4px;
  height:4px;
  width:4px;
  border-radius:50%;
  background:var(--orange);
  left:50%;
}

nav a:hover {
  color:var(--orange-dark);
}

nav span {
  margin-left:5px;
}

.header-motto {
  font-family:var(--mono);
  font-size:10px;
  font-weight:500;
  letter-spacing:1.2px;
  display:flex;
  align-items:center;
  gap:9px;
}

.header-motto>span {
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--orange);
}

main {
  max-width:1180px;
  padding:0 16px;
  margin:auto;
}

.intro {
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  padding:43px 0 39px;
}

.eyebrow {
  font-family:var(--mono);
  font-size:12.1px;
  font-weight:600;
  letter-spacing:1.6px;
  display:flex;
  align-items:center;
  gap:8px;
}

.intro .eyebrow {
  color:#9c4a2e;
}

.tiny-cross {
  font-size:17px;
  color:var(--orange);
}

h1 {
  font-family:var(--mono);
  font-size:63px;
  letter-spacing:-4px;
  line-height:1.16;
  font-weight:600;
  margin-top:12px;
}

h1>span {
  position:relative;
  color:var(--orange);
}

h1>span:after {
  content:'';
  position:absolute;
  left:0;
  bottom:-5px;
  width:96%;
  height:5px;
  border-top:2px solid var(--orange);
  border-radius:50%;
  transform:rotate(-3deg);
}

.intro-copy {
  font-size:12px;
  color:#636b59;
  line-height:1.9;
  padding-bottom:6px;
  max-width:290px;
}

.arena {
  display:grid;
  grid-template-columns:234px minmax(0,430px) 260px;
  gap:44px;
  align-items:start;
  justify-content:space-between;
}

.setup-panel,.records-panel {
  padding-top:20px;
}

.section-index {
  font-family:var(--mono);
  color:var(--orange-dark);
  font-size:10px;
  letter-spacing:1px;
  margin-bottom:17px;
}

.section-index>span {
  color:#636b59;
  margin-left:7px;
}

h2 {
  font-family:var(--mono);
  font-size:22px;
  font-weight:600;
  letter-spacing:-.9px;
  line-height:1.3;
}

.panel-description {
  font-size:12.1px;
  color:#636b59;
  line-height:1.7;
  margin-top:7px;
}

.grid-options {
  border:0;
  padding:0;
  margin:23px 0 0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
}

.grid-option {
  position:relative;
  cursor:pointer;
  min-width:0;
}

.grid-option input {
  position:absolute;
  opacity:0;
  width:1px;
  height:1px;
}

.grid-option-content {
  border:1px solid #dedfd5;
  border-radius:11px;
  padding:14px 13px 11px;
  display:flex;
  min-height:113px;
  flex-direction:column;
  background:#f9f9f5;
  transition:background .15s,border-color .15s,transform .15s;
}

.mini-grid {
  display:grid;
  grid-template-columns:repeat(var(--size),1fr);
  width:26px;
  height:26px;
  gap:2px;
  margin-bottom:9px;
}

.mini-grid i {
  background:#777e70;
  border-radius:1px;
}

.grid-option strong {
  font-family:var(--mono);
  font-weight:600;
  font-size:17px;
  letter-spacing:-.7px;
}

.grid-option small {
  font-size:12.1px;
  color:#636b59;
  margin-top:2px;
}

.grid-option input:checked+.grid-option-content {
  border-color:var(--orange);
  background:#faeee3;
  box-shadow:0 0 0 .5px var(--orange);
}

.grid-option input:checked+.grid-option-content .mini-grid i {
  background:var(--orange);
}

.grid-option input:checked+.grid-option-content:after {
  content:'✓';
  position:absolute;
  right:11px;
  top:12px;
  color:var(--orange-dark);
  font-size:12px;
  font-weight:700;
}

.grid-option:hover .grid-option-content {
  border-color:var(--orange);
  transform:translateY(-2px);
}

.grid-option input:disabled+.grid-option-content {
  opacity:.6;
  cursor:default;
}

.grid-option:has(input:disabled):hover .grid-option-content {
  transform:none;
}

.size-note {
  display:flex;
  gap:7px;
  align-items:center;
  font-size:12.1px;
  color:#636b59;
  margin-top:14px;
}

.status-dot {
  width:5px;
  height:5px;
  border-radius:50%;
  background:#829477;
  flex-shrink:0;
}

.how-to-play {
  border-top:1px solid var(--border);
  padding-top:24px;
  margin-top:29px;
  scroll-margin-top:25px;
}

.how-to-play summary {
  font-family:var(--mono);
  font-size:10px;
  font-weight:500;
  letter-spacing:1.4px;
}

.how-to-play ol {
  list-style:none;
  padding:0;
  margin:20px 0 0;
  display:flex;
  flex-direction:column;
  gap:18px;
}

.how-to-play li {
  display:flex;
  gap:11px;
  align-items:flex-start;
  font-size:12.1px;
  font-weight:600;
  line-height:1.5;
}

.step-number {
  font-family:var(--mono);
  display:grid;
  place-items:center;
  border:1px solid #dedfd5;
  width:22px;
  height:22px;
  border-radius:50%;
  font-size:10px;
  flex-shrink:0;
  color:#636b59;
}

.how-to-play small {
  display:block;
  font-size:10px;
  color:#636b59;
  font-weight:400;
  margin-top:2px;
}

.timer-block {
  text-align:center;
  padding:0 0 17px;
}

.timer-label {
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:1.3px;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;
  color:#636b59;
}

.timer-label .icon {
  width:13px;
  height:13px;
  color:var(--orange);
  stroke-width:1.7;
}

.timer {
  font-family:var(--mono);
  font-variant-numeric:tabular-nums;
  line-height:1.08;
  font-weight:500;
  font-size:72px;
  letter-spacing:-5px;
  margin-top:4px;
  white-space:nowrap;
}

.timer-unit {
  font-size:25px;
  color:#636b59;
  letter-spacing:-1px;
  margin-left:7px;
  font-weight:400;
}

.board-frame {
  position:relative;
  padding:16px;
  background:#fff;
  border:1px solid #e0e3d9;
  border-radius:17px;
  box-shadow:0 7px 16px -12px #434c3c25;
}

.board-topline {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:1px;
  color:#636b59;
  padding-bottom:13px;
}

.board-status {
  display:flex;
  align-items:center;
  gap:5px;
  font-size:10px;
  letter-spacing:.8px;
}

.board-status i {
  width:4px;
  height:4px;
  border-radius:50%;
  background:#9aa38e;
}

.board-status.is-playing {
  color:var(--orange-dark);
}

.board-status.is-playing i {
  background:var(--orange);
}

.board-status.is-completed {
  color:#4f7543;
}

.board {
  display:grid;
  grid-template-columns:repeat(var(--size,3),minmax(0,1fr));
  grid-template-rows:repeat(var(--size,3),minmax(0,1fr));
  gap:9px;
  aspect-ratio:1;
  isolation:isolate;
}

.board.is-playing {
  touch-action:none;
}

.tile {
  position:relative;
  display:grid;
  place-items:center;
  border:0;
  border-radius:9px;
  background:#c44d28;
  box-shadow:inset 0 -3px 0 #c9502b2e;
  color:#fffaf1;
  font-family:var(--mono);
  font-size:29px;
  font-weight:500;
  transition:background .12s,box-shadow .12s;
  user-select:none;
  -webkit-user-select:none;
  padding:0;
  min-width:0;
  min-height:0;
}

.tile .tile-corner {
  position:absolute;
  top:10px;
  left:10px;
  line-height:1;
  opacity:.52;
  font-size:10px;
  font-weight:400;
  letter-spacing:.4px;
}

.tile .tile-number {
  line-height:1;
}

.tile .tile-number:has(.tile-art) {
  position:absolute;
  inset:8%;
}

.tile-art {
  display:block;
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:5px;
  pointer-events:none;
  transition:transform 90ms ease-out;
}

.tile:not(:disabled):active .tile-art {
  transform:scale(.9);
}

.tile:disabled {
  opacity:1;
}

.tile:not(:disabled):hover {
  background:#c0441d;
  box-shadow:inset 0 -3px 0 #ad3e2433,0 4px 7px #c9502b20;
}

.tile:not(:disabled):active {
  background:#c0441d;
  box-shadow:none;
}

.tile:focus-visible {
  outline-offset:-5px;
  outline-color:#fff;
  z-index:1;
}

.tile.clicked {
  background:#eef1e9;
  box-shadow:inset 0 0 0 1px #e5e9de;
  color:#5c774c;
  opacity:.85;
}

.tile.clicked .tile-corner {
  opacity:.8;
  color:#7d8c74;
}

.tile.clicked .icon {
  width:30px;
  height:30px;
  stroke-width:1.7;
}

/* Animate the artwork and feedback inside the fixed button hit area. */
.tile.clicked::before {
  content:'';
  position:absolute;
  inset:8%;
  border-radius:5px;
  background:url('./assets/icons/playground-source.png') center/contain no-repeat;
  opacity:0;
  pointer-events:none;
  animation:tile-icon-clear 160ms ease-out;
}

.tile.clicked::after {
  content:'';
  position:absolute;
  inset:3px;
  border:2px solid currentColor;
  border-radius:inherit;
  opacity:0;
  pointer-events:none;
  animation:tile-clear-ring 360ms ease-out;
}

.board .tile.clicked .icon {
  animation:tile-check-arrive 320ms ease-out;
}

@keyframes tile-icon-clear {
  from { opacity:1;transform:scale(1); }
  45% { opacity:.7;transform:scale(.86) rotate(-6deg); }
  to { opacity:0;transform:scale(.55) rotate(-10deg); }
}

@keyframes tile-check-arrive {
  from { opacity:0;transform:scale(.35) rotate(-12deg);stroke-dashoffset:32; }
  45% { opacity:1;transform:scale(1.16) rotate(4deg);stroke-dashoffset:0; }
  72% { transform:scale(.95) rotate(-2deg); }
  to { opacity:1;transform:scale(1) rotate(0);stroke-dashoffset:0; }
}

@keyframes tile-clear-ring {
  from { opacity:.45;transform:scale(.68); }
  to { opacity:0;transform:scale(1); }
}

.board[data-size="5"],.board[data-size="6"] {
  gap:7px;
}

.board[data-size="5"] .tile,.board[data-size="6"] .tile {
  border-radius:7px;
  font-size:20px;
}

.board[data-size="5"] .tile-corner,.board[data-size="6"] .tile-corner {
  display:none;
}

.board-bottomline {
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 0 9px;
}

.board-bottomline>span:first-child {
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.7px;
  color:#636b59;
}

.progress-count {
  font-family:var(--mono);
  font-size:12.1px;
  font-weight:500;
}

.progress-divider {
  color:#636b59;
  margin:0 5px;
}

.progress-count>span:last-child {
  color:#636b59;
}

.progress-track {
  height:3px;
  background:#f0f1eb;
  border-radius:5px;
  overflow:hidden;
}

.progress-track>div {
  height:100%;
  width:0;
  background:var(--orange);
  transition:width .12s;
  border-radius:5px;
}

.primary-button {
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--ink);
  color:#fffef7;
  border:1px solid var(--ink);
  border-radius:10px;
  min-height:51px;
  padding:0 20px;
  font-size:12px;
  font-weight:600;
  transition:background .15s,transform .15s,box-shadow .15s;
}

.primary-button:hover {
  background:#454c3d;
  transform:translateY(-1px);
  box-shadow:0 4px 9px #282f231a;
}

.primary-button:active {
  transform:translateY(1px);
}

.primary-button .icon {
  width:19px;
  height:19px;
}

.start-button {
  width:100%;
  margin-top:14px;
}

.board-hint {
  text-align:center;
  color:#636b59;
  font-size:12.1px;
  line-height:1.7;
  margin-top:12px;
}

.board-hint>span {
  color:#5f6558;
}

.restart-button {
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  background:transparent;
  border:1px solid var(--border);
  border-radius:10px;
  width:100%;
  min-height:51px;
  margin-top:14px;
  color:#646d5b;
  font-size:12.1px;
}

.restart-button:hover {
  background:#eceee5;
}

.restart-button .icon {
  width:15px;
  height:15px;
}

.records-heading {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:7px;
}

.records-heading h2 {
  font-size:21px;
}

.records-heading>.icon {
  color:#636b59;
  width:20px;
  height:20px;
}

.record-grid-label {
  display:flex;
  justify-content:space-between;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.7px;
  margin-top:27px;
  padding-bottom:12px;
  border-bottom:1px solid var(--border);
}

.record-grid-label>span:first-child {
  font-weight:600;
}

.record-grid-label>span:last-child {
  font-size:10px;
  color:#636b59;
}

.leaderboard {
  list-style:none;
  margin:0;
  padding:0;
}

.leaderboard li {
  display:flex;
  align-items:center;
  gap:13px;
  padding:17px 1px;
  border-bottom:1px solid var(--border);
  position:relative;
}

.record-rank {
  font-family:var(--mono);
  font-size:12.1px;
  width:23px;
  color:#636b59;
  flex-shrink:0;
}

.record-detail {
  flex:1;
  min-width:0;
}

.record-time {
  font-family:var(--mono);
  font-size:23px;
  line-height:1.1;
  font-weight:500;
  letter-spacing:-1px;
}

.record-time>span {
  font-size:12px;
  font-weight:400;
  margin-left:3px;
  color:#636b59;
}

.record-date {
  font-size:12.1px;
  color:#636b59;
  margin-top:5px;
}

.record-empty .record-time {
  color:#636b59;
  font-size:21px;
  letter-spacing:2px;
}

.record-empty .record-date {
  color:#636b59;
}

.record-first .record-rank {
  background:#f7e7cc;
  color:#885b20;
  width:23px;
  height:27px;
  display:grid;
  place-items:center;
  border-radius:6px;
}

.record-first:not(.record-empty) .record-time {
  color:#a5401e;
}

.record-medal {
  color:#b19360;
  font-size:17px;
}

.new-record-badge {
  font-family:var(--mono);
  font-size:10px;
  font-weight:600;
  letter-spacing:.4px;
  padding:4px 5px;
  border-radius:4px;
  background:#fae6d8;
  color:#a64021;
}

.record-new {
  background:#faf0e5;
}

.records-caption {
  color:#636b59;
  font-size:12.1px;
  line-height:1.6;
  margin-top:14px;
}

.personal-best-card {
  position:relative;
  overflow:hidden;
  background:#e9eddf;
  border:1px solid #dce1d1;
  border-radius:11px;
  margin-top:28px;
  padding:17px 18px;
}

.best-card-label {
  display:flex;
  align-items:center;
  gap:5px;
  color:#59634d;
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:1px;
  font-weight:500;
}

.best-card-label .icon {
  width:12px;
  height:12px;
}

.best-time {
  font-family:var(--mono);
  font-size:39px;
  letter-spacing:-2px;
  line-height:1.3;
  margin:10px 0 4px;
  color:#46543b;
  position:relative;
  z-index:1;
}

.best-time>span+span {
  font-size:17px;
  margin-left:3px;
  letter-spacing:0;
  color:#636b59;
}

.personal-best-card>p {
  font-size:10px;
  color:#5e6853;
  position:relative;
  z-index:1;
}

.best-card-spark {
  position:absolute;
  font-size:106px;
  line-height:1;
  right:-12px;
  top:33px;
  color:#dbe1cf;
  transform:rotate(8deg);
}

.storage-note {
  display:flex;
  gap:8px;
  align-items:flex-start;
  font-size:12.1px;
  line-height:1.8;
  color:#636b59;
  margin:18px 5px;
}

.storage-note .icon {
  width:12px;
  height:12px;
  margin-top:2px;
}

.bottom-strip {
  margin:32px 0 0;
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
  padding:18px 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

.bottom-strip>div {
  display:flex;
  align-items:center;
  gap:10px;
  color:#636b59;
  font-size:12.1px;
}

.bottom-strip .icon {
  width:16px;
  height:16px;
  color:var(--orange);
}

.bottom-strip strong {
  font-weight:500;
  color:#5e6853;
}

.bottom-coordinates {
  font-family:var(--mono);
  font-size:10px;
  color:#636b59;
  letter-spacing:1px;
}

.bottom-coordinates>span {
  margin:0 9px;
  color:var(--orange);
}

.site-footer {
  max-width:1180px;
  margin:0 auto;
  padding:24px 16px 26px;
  display:flex;
  justify-content:space-between;
  font-size:10px;
  color:#636b59;
}

.site-footer>span+span {
  font-size:12.1px;
  color:#636b59;
}

.noscript-notice {
  text-align:center;
  padding:20px;
  background:#f5d5c3;
}

.result-overlay {
  position:absolute;
  inset:0;
  z-index:3;
  background:#fffdf7f7;
  backdrop-filter:blur(9px);
  border-radius:16px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:35px 24px;
  text-align:center;
  overflow:hidden;
  animation:result-arrive .3s ease-out;
}

.result-icon {
  display:grid;
  place-items:center;
  width:61px;
  height:61px;
  background:#fae9d5;
  color:#b35a2e;
  border:1px solid #f0d7b9;
  border-radius:50%;
  margin-bottom:23px;
}

.result-icon .icon {
  width:30px;
  height:30px;
}

.result-overlay .eyebrow {
  font-size:10px;
  color:#ad502b;
  letter-spacing:1.2px;
}

.result-overlay h2 {
  font-size:31px;
  letter-spacing:-1.7px;
  margin-top:9px;
}

.result-time {
  font-family:var(--mono);
  font-size:65px;
  letter-spacing:-4px;
  line-height:1.2;
  margin-top:9px;
  font-weight:500;
}

.result-time>span+span {
  font-size:24px;
  letter-spacing:-1px;
  color:#636b59;
  margin-left:4px;
}

.result-message {
  font-size:12.1px;
  color:#636b59;
  line-height:1.7;
  max-width:260px;
  margin:9px 0 23px;
  min-height:19px;
}

.result-overlay .primary-button {
  width:230px;
  max-width:100%;
}

.text-button {
  background:none;
  border:0;
  font-size:12.1px;
  color:#636b59;
  min-height:40px;
  margin-top:7px;
  padding:7px 12px;
}

.text-button:hover {
  color:var(--orange-dark);
}

.text-button>span {
  margin-left:4px;
}

.result-decoration>span {
  position:absolute;
  color:#d6a16b;
  font-size:21px;
  left:19%;
  top:21%;
  transform:rotate(20deg);
}

.result-decoration>span:nth-child(2) {
  left:auto;
  right:16%;
  top:16%;
  font-size:31px;
  color:#b7c3a2;
}

.result-decoration>span:nth-child(3) {
  left:auto;
  right:11%;
  top:39%;
  font-size:13px;
  color:#e8a98b;
}

@keyframes result-arrive {
  from {
    opacity:0;
    transform:translateY(6px);
  }
  to {
    opacity:1;
    transform:translateY(0);
  }
}

@media(min-width:1500px) {
  .site-header {
    height:110px;
  }
  .intro {
    padding-top:53px;
    padding-bottom:48px;
  }
  .arena {
    gap:51px;
  }
  .bottom-strip {
    margin-top:42px;
  }
}

@media(max-width:1200px) {
  .site-header {
    margin:0 30px;
  }
  .arena {
    grid-template-columns:210px minmax(0,400px) 230px;
    gap:28px;
  }
  main {
    max-width:1080px;
    padding:0 30px;
  }
  .intro-copy {
    font-size:12.1px;
  }
  .records-heading h2 {
    font-size:19px;
  }
  h1 {
    font-size:58px;
  }
  .site-footer {
    padding-left:30px;
    padding-right:30px;
  }
}

@media(max-width:1000px) {
  .arena {
    grid-template-columns:180px minmax(0,390px) 200px;
    gap:24px;
  }
  main {
    padding:0 25px;
  }
  .site-header {
    margin:0 25px;
  }
  h1 {
    font-size:51px;
    letter-spacing:-3px;
  }
  .intro-copy {
    max-width:235px;
    font-size:12.1px;
  }
  .header-motto {
    font-size:10px;
    letter-spacing:.7px;
  }
  nav {
    margin-left:0;
    gap:24px;
  }
  .grid-option-content {
    padding:12px 11px;
    min-height:107px;
  }
  .grid-options {
    gap:8px;
  }
  .how-to-play small {
    font-size:10px;
  }
  .records-heading h2 {
    font-size:18px;
  }
  .records-heading>.icon {
    display:none;
  }
  .board-frame {
    padding:13px;
  }
  .board {
    gap:7px;
  }
  .tile {
    font-size:25px;
    border-radius:7px;
  }
  .board-bottomline>span:first-child {
    font-size:10px;
  }
  .timer {
    font-size:65px;
  }
  .panel-description {
    font-size:12.1px;
  }
  .record-grid-label {
    font-size:10px;
  }
  .record-grid-label>span:last-child {
    font-size:10px;
  }
  .best-card-label {
    font-size:10px;
  }
  .personal-best-card {
    padding:16px 13px;
  }
  .best-time {
    font-size:35px;
  }
  .storage-note {
    font-size:10px;
  }
}

@media(max-width:800px) {
  .site-header {
    height:78px;
  }
  .brand {
    font-size:26px;
  }
  .header-motto {
    display:none;
  }
  .intro {
    padding:32px 0;
  }
  .intro-copy {
    font-size:12.1px;
    max-width:210px;
  }
  .arena {
    grid-template-columns:190px minmax(0,400px);
    gap:28px;
    justify-content:center;
  }
  .records-panel {
    grid-column:1/-1;
    border-top:1px solid var(--border);
    padding-top:25px;
    display:grid;
    grid-template-columns:1fr 1fr;
    column-gap:30px;
  }
  .records-panel .section-index,.records-heading,.records-panel>.panel-description,.record-grid-label,.leaderboard,.records-caption {
    grid-column:1;
  }
  .records-panel>.section-index {
    margin-bottom:10px;
  }
  .records-panel>.panel-description {
    margin-top:5px;
  }
  .record-grid-label {
    margin-top:20px;
  }
  .records-heading h2 {
    font-size:22px;
  }
  .leaderboard li {
    padding:13px 1px;
  }
  .personal-best-card {
    grid-column:2;
    grid-row:2/6;
    align-self:start;
    margin-top:0;
    min-height:170px;
    padding:23px;
  }
  .best-time {
    font-size:49px;
    margin-top:14px;
  }
  .best-card-label {
    font-size:10px;
  }
  .personal-best-card>p {
    font-size:12.1px;
  }
  .storage-note {
    grid-column:2;
    grid-row:5/7;
    align-self:end;
    font-size:10px;
    margin:0 5px 15px;
  }
  .records-caption {
    margin-top:12px;
  }
  .bottom-strip {
    margin-top:28px;
  }
  .setup-panel {
    padding-top:19px;
  }
  .how-to-play {
    margin-top:24px;
  }
  .board-hint {
    font-size:10px;
  }
  .timer {
    font-size:69px;
  }
  h1 {
    font-size:46px;
  }
  .section-index {
    font-size:10px;
  }
  .tile {
    font-size:28px;
  }
  .record-grid-label {
    font-size:10px;
  }
  .record-grid-label>span:last-child {
    font-size:10px;
  }
  .board-bottomline>span:first-child {
    font-size:10px;
  }
  .bottom-coordinates {
    font-size:10px;
  }
}

@media(max-width:600px) {
  .site-header {
    height:71px;
    margin:0 20px;
  }
  .brand {
    font-size:25px;
    gap:10px;
  }
  .brand-mark {
    grid-template-columns:repeat(2,8px);
    gap:3px;
  }
  .brand-mark i {
    width:8px;
    height:8px;
  }
  nav {
    font-size:12.1px;
    gap:21px;
  }
  main {
    padding:0 20px;
  }
  .intro {
    display:block;
    padding:30px 0 27px;
  }
  .intro .eyebrow {
    font-size:10px;
    letter-spacing:1.2px;
  }
  .tiny-cross {
    font-size:14px;
  }
  h1 {
    font-size:clamp(37px,8.4vw,51px);
    letter-spacing:-2.6px;
    margin-top:10px;
    white-space:nowrap;
  }
  .intro-copy {
    font-size:12.1px;
    max-width:none;
    line-height:1.7;
    padding:0;
    margin-top:16px;
  }
  .intro-copy br {
    display:none;
  }
  .arena {
    display:flex;
    flex-direction:column;
    gap:25px;
    align-items:stretch;
    max-width:430px;
    margin:auto;
  }
  .setup-panel {
    padding-top:0;
  }
  .section-index {
    font-size:10px;
    margin-bottom:8px;
  }
  h2 {
    font-size:20px;
  }
  .setup-panel>h2 {
    display:inline-block;
  }
  .setup-panel>.panel-description {
    display:inline-block;
    margin:0 0 0 8px;
    font-size:10px;
  }
  .grid-options {
    grid-template-columns:repeat(4,minmax(0,1fr));
    margin-top:15px;
    gap:8px;
  }
  .grid-option-content {
    min-height:99px;
    padding:10px 8px 9px;
    border-radius:9px;
  }
  .mini-grid {
    width:22px;
    height:22px;
    margin-bottom:8px;
    gap:1.5px;
  }
  .grid-option strong {
    font-size:16px;
  }
  .grid-option small {
    font-size:10px;
  }
  .grid-option input:checked+.grid-option-content:after {
    top:9px;
    right:8px;
    font-size:12.1px;
  }
  .size-note {
    font-size:10px;
    margin-top:10px;
  }
  .how-to-play {
    display:block;
    margin-top:17px;
    padding-top:15px;
  }
  .how-to-play ol {
    margin-top:16px;
    gap:13px;
  }
  .play-panel {
    width:100%;
    min-width:0;
  }
  .timer-block {
    padding-bottom:13px;
  }
  .timer-label {
    font-size:10px;
  }
  .timer {
    font-size:69px;
    margin-top:5px;
  }
  .timer-unit {
    font-size:23px;
  }
  .board-frame {
    border-radius:14px;
    padding:14px;
  }
  .board-topline {
    font-size:10px;
    padding-bottom:12px;
  }
  .board-status {
    font-size:10px;
  }
  .board {
    gap:8px;
  }
  .tile {
    font-size:27px;
  }
  .tile .tile-corner {
    font-size:10px;
    top:9px;
    left:9px;
  }
  .board[data-size="5"],.board[data-size="6"] {
    gap:6px;
  }
  .board[data-size="6"] .tile {
    font-size:17px;
  }
  .board[data-size="6"] .tile.clicked .icon {
    width:23px;
    height:23px;
  }
  .board-bottomline {
    padding-top:13px;
  }
  .start-button,.restart-button {
    margin-top:12px;
    min-height:51px;
  }
  .board-hint {
    font-size:10px;
    margin-top:10px;
  }
  .records-panel {
    margin-top:4px;
    display:block;
    padding-top:24px;
  }
  .records-heading {
    margin-top:8px;
  }
  .records-heading>.icon {
    display:block;
  }
  .records-panel>.panel-description {
    font-size:12.1px;
  }
  .record-grid-label {
    margin-top:20px;
  }
  .record-grid-label>span:last-child {
    font-size:10px;
  }
  .leaderboard li {
    padding:15px 2px;
  }
  .record-time {
    font-size:25px;
  }
  .record-date {
    font-size:10px;
  }
  .personal-best-card {
    min-height:0;
    margin-top:22px;
    padding:19px 21px;
  }
  .best-time {
    font-size:44px;
    margin-top:7px;
  }
  .storage-note {
    margin:16px 4px 0;
    font-size:10px;
  }
  .bottom-strip {
    max-width:430px;
    margin:26px auto 0;
    padding:17px 0;
  }
  .bottom-coordinates {
    display:none;
  }
  .bottom-strip>div {
    font-size:10px;
    gap:8px;
  }
  .site-footer {
    font-size:10px;
    padding:21px 20px 24px;
    gap:14px;
  }
  .site-footer>span+span {
    font-size:10px;
  }
  .result-overlay {
    padding:18px;
  }
  .result-icon {
    width:50px;
    height:50px;
    margin-bottom:15px;
  }
  .result-overlay h2 {
    font-size:28px;
  }
  .result-time {
    font-size:58px;
  }
  .result-message {
    margin:7px 0 17px;
    font-size:12.1px;
  }
  .result-overlay .primary-button {
    min-height:45px;
  }
  .text-button {
    min-height:37px;
    margin-top:3px;
  }
  .result-decoration>span {
    top:16%;
  }
}

@media(max-width:360px) {
  main {
    padding:0 15px;
  }
  .site-header {
    margin:0 15px;
  }
  nav {
    gap:15px;
  }
  .setup-panel>.panel-description {
    font-size:10px;
    margin-left:5px;
  }
  .grid-options {
    gap:6px;
  }
  .grid-option small {
    font-size:10px;
  }
  .board-frame {
    padding:11px;
  }
  .board[data-size="6"] {
    gap:4px;
  }
  .board[data-size="6"] .tile {
    border-radius:5px;
  }
  .board-bottomline>span:first-child {
    font-size:10px;
  }
  .result-icon {
    width:39px;
    height:39px;
    margin-bottom:10px;
  }
  .result-icon .icon {
    width:24px;
    height:24px;
  }
  .result-overlay h2 {
    font-size:24px;
  }
  .result-time {
    font-size:49px;
  }
  .result-message {
    margin-bottom:11px;
  }
  .result-overlay .primary-button {
    min-height:42px;
  }
}

@media(prefers-reduced-motion:reduce) {
  html {
    scroll-behavior:auto;
  }
  *,*::before,*::after {
    animation:none!important;
    transition:none!important;
    scroll-behavior:auto!important;
  }
  .tile:not(:disabled):active .tile-art {
    transform:none;
  }
}

.how-to-play summary {
  list-style:none;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:24px;
}

.how-to-play summary::-webkit-details-marker {
  display:none;
}

.how-to-play summary::after {
  content:"+";
  font-size:14px;
  color:#636b59;
}

.how-to-play[open] summary::after {
  content:"−";
}

.site-footer .orange {
  color:var(--orange-dark);
}

.install-banner {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-top:30px;
  padding:20px 23px;
  border:1px solid #dce1d1;
  border-radius:12px;
  background:#e9eddf;
}

.install-banner h2 {
  font-size:20px;
}

.install-banner p {
  margin-top:5px;
  color:#59634d;
  font-size:12.1px;
  line-height:1.6;
}

.install-banner .primary-button {
  flex-shrink:0;
  min-height:44px;
  gap:24px;
}

.install-dialog {
  width:min(420px, calc(100% - 32px));
  max-height:calc(100dvh - 40px);
  overflow:auto;
  padding:28px;
  border:1px solid var(--border);
  border-radius:18px;
  color:var(--ink);
  background:var(--paper);
  box-shadow:0 20px 80px #292c2733;
}

.install-dialog::backdrop {
  background:#292c2766;
}

.install-dialog h2 {
  font-size:25px;
}

.install-dialog p,.install-dialog li {
  font-size:12px;
  line-height:1.8;
  color:#59634d;
}

.install-dialog p {
  margin-top:14px;
}

.install-dialog ul {
  padding-left:18px;
  margin:16px 0;
}

.install-dialog li+li {
  margin-top:10px;
}

.install-dialog #offline-status {
  padding:12px;
  background:#e9eddf;
  border-radius:8px;
  margin-bottom:20px;
  font-size:12.1px;
}

.install-dialog .primary-button {
  width:100%;
}

@media(max-width:600px) {
  .install-banner {
    max-width:430px;
    margin:26px auto 0;
    padding:17px 15px;
    gap:12px;
  }
  .install-banner h2 {
    font-size:16px;
    letter-spacing:-.5px;
  }
  .install-banner p {
    font-size:12.1px;
  }
  .install-banner .primary-button {
    padding:0 13px;
    gap:10px;
    font-size:12.1px;
  }
  .install-dialog {
    padding:23px;
  }
}

.how-to-play summary:focus-visible {
  outline:3px solid #285b89;
  outline-offset:5px;
  border-radius:3px;
}