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

@font-face {
  font-family:'Space Grotesk';
  src:url('../grid-rush/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-wordmark {
  position:relative;
}

.brand-wordmark small {
  display:block;
  color:var(--orange-dark);
  font-family:var(--mono);
  font-size:10px;
  line-height:1;
  letter-spacing:2.5px;
  margin-top: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;
}

.mode-options {
  border:0;
  padding:0;
  margin:20px 0 0;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

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

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

.mode-option>span {
  display:flex;
  flex-direction:column;
  gap:3px;
  min-height:66px;
  padding:10px 12px;
  border:1px solid var(--border);
  border-radius:9px;
  background:#f9f9f5;
}

.mode-option strong {
  font-family:var(--mono);
  font-size:20px;
  font-weight:500;
}

.mode-option small {
  color:#636b59;
  font-size:12.1px;
}

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

.mode-option input:checked+span:after {
  content:'✓';
  position:absolute;
  top:9px;
  right:8px;
  color:var(--orange-dark);
  font-size:12.1px;
}

.mode-option input:disabled+span {
  opacity:.6;
  cursor:default;
}

.mode-note {
  color:#636b59;
  font-size:12.1px;
  line-height:1.6;
  margin-top:12px;
}

.next-cue {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 16px;
  border:1px solid #e5d8c9;
  background:#faeee3;
  border-radius:11px;
  margin-bottom:12px;
  min-height:66px;
}

.next-cue span {
  font-family:var(--mono);
  color:#994022;
  font-size:10px;
  letter-spacing:1.2px;
}

.next-cue p {
  font-size:12.1px;
  line-height:1.5;
  color:#636b59;
  margin-top:3px;
}

.next-cue strong {
  font-family:var(--mono);
  font-size:32px;
  line-height:1;
  color:#994022;
  font-weight:500;
  min-width:42px;
  text-align:center;
}

.empty-tile {
  border:1px dashed #dce0d4;
  background:#f8f9f5;
  border-radius:7px;
  pointer-events:none;
}

.tile.is-wrong:not(:disabled) {
  outline:3px solid #292c27;
  outline-offset:-3px;
}

.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: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;
}

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

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

.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;
  }
}

.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;
}

/* Ordered challenges: keep cleared values visible and preserve every grid track. */
.setup-panel .mode-options { grid-template-columns:repeat(2,minmax(0,1fr)); }
.setup-panel .mode-option>span { min-height:76px; }
.mode-option .colour-mode-mark { background:linear-gradient(90deg,#b83c39 32%,#087576 32% 66%,#265fb0 66%);background-clip:text;-webkit-background-clip:text;color:transparent;letter-spacing:-2px; }
.order-control { display:flex;flex-direction:column;gap:7px;margin-top:16px;font-size:12.1px;font-weight:600;color:#454e3d; }
.order-control select { width:100%;min-height:44px;padding:9px 12px;border:1px solid #d5d9cd;border-radius:9px;background:#fffdf7;color:#292c27;font:500 12px 'DM Sans',sans-serif; }
.order-control select:focus-visible { outline:3px solid #285b89;outline-offset:3px; }
.order-control select:disabled { opacity:.6; }
.play-panel .next-cue { height:78px;min-height:78px; }
.next-cue>div { min-width:0; }
/* Keep the colour cue readable throughout its shared movement animation. */
.next-cue strong.is-color { min-width:74px;padding:9px;border:1px solid #293226;border-radius:8px;background:var(--cue-color);color:var(--cue-ink);font-size:18px;opacity:1!important; }
.color-key { margin:0 0 12px;padding:12px;border:1px solid #e1e2d9;border-radius:11px;background:#fafbf7; }
.color-key-heading { display:flex;justify-content:space-between;gap:8px;font-family:var(--mono);font-size:10px;letter-spacing:.6px;color:#636b59; }
.color-key ol { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;list-style:none;margin:10px 0 0;padding:0; }
.color-key li { position:relative;display:flex;flex-direction:column;align-items:center;gap:5px;padding:9px 3px;border-radius:8px;box-shadow:inset 0 0 0 1px #e1e2d9;transition:opacity .15s,background .15s,box-shadow .15s; }
.color-key li i { width:17px;height:17px;border:1px solid #293226;border-radius:50%; }
.color-key li span { font-size:12.1px;font-weight:600; }
.color-key li small { font:500 10px var(--mono);color:#636b59; }
.color-key li.is-current { background:#fff;box-shadow:inset 0 0 0 2px #454e3d; }
.color-key li.is-cleared { opacity:.75; }
.color-key li.is-cleared small:after { content:' ✓'; }
.board .tile.tile-color { background:var(--tile-color);color:var(--tile-ink);border:1px solid #293226; }
.board .tile-color .tile-number { font-size:14px;padding:2px; }
.board .tile.tile-color:not(:disabled):hover { background:var(--tile-color);box-shadow:inset 0 0 0 2px #ffffff70; }
.board .tile.clicked { background:var(--tile-color,#c44d28);color:#fffaf1;opacity:.55;box-shadow:none; }
.board .tile.tile-color.clicked { color:var(--tile-ink);opacity:.7; }
.board .tile-color:focus-visible { outline:3px solid var(--tile-ink);outline-offset:-4px; }
.board .tile.clicked .tile-corner { display:none; }
.board .tile-check { position:absolute;right:5px;top:5px;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#fff;color:#182316; }
.board .tile .tile-check .icon { width:15px;height:15px;stroke-width:2.5; }
.board[data-size="6"] .tile-check { width:15px;height:15px;right:3px;top:3px; }
.board[data-size="6"] .tile .tile-check .icon { width:11px;height:11px; }
.board[data-mode="alphanumeric"] .tile { font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-weight:600; }
/* Fit the longest signed value to the actual board width at every grid size. */
.board[data-mode="number-range"] { container-type:inline-size; }
.board[data-mode="number-range"] .tile { font-family:ui-monospace,SFMono-Regular,Consolas,monospace;font-variant-numeric:tabular-nums;font-size:16px;font-size:clamp(13px,calc(100cqw / var(--size) / 3),26px); }
.board[data-mode="number-range"] .tile-corner { display:none; }
.board[data-mode="number-range"] .tile-check { width:12px;height:12px;top:2px;right:2px; }
.board[data-mode="number-range"] .tile .tile-check .icon { width:9px;height:9px; }
.board-frame .result-overlay { position:relative;inset:auto;z-index:auto;margin-top:16px;padding:24px 18px;border:1px solid #dce4cf;border-radius:12px;background:#f4f7ee;backdrop-filter:none; }
.board-frame .result-icon { width:44px;height:44px;margin-bottom:12px; }
.board-frame .result-icon .icon { width:24px;height:24px; }
.board-frame .result-time { font-size:48px; }
.board-frame .result-message { margin-bottom:16px; }
@media(max-width:600px) {
  .setup-panel .mode-options { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .setup-panel .mode-option>span { min-height:78px;padding:10px 8px; }
  .setup-panel .mode-option small { font-size:12.1px;line-height:1.35; }
  .order-control { margin-top:13px; }
  .board[data-size="6"] .tile-color .tile-number { font-size:12.1px; }
  .board-frame .result-overlay h2 { font-size:25px; }
}

/* Shape groups use the same left-to-right key and stable cells as colours. */
.shape-icon { display:block;flex-shrink:0;width:28px;height:28px;fill:currentColor; }
.color-key li[data-shape] { color:#293226; }
.color-key li[data-shape] span { text-align:center;line-height:1.3;overflow-wrap:anywhere; }
.next-cue strong.is-shape { display:flex;align-items:center;gap:6px;min-width:0;max-width:48%;font-family:inherit;text-align:left;color:#293226; }
.next-cue strong.is-shape .shape-icon { width:32px;height:32px; }
.next-cue strong.is-shape span { color:inherit;font:600 12.1px/1.3 'DM Sans',sans-serif;letter-spacing:0;overflow-wrap:anywhere; }
.board .tile.tile-shape { background:#f5f7ef;color:#293226;border:1px solid #a8b19b;box-shadow:none; }
.board .tile-shape .tile-number { position:absolute;inset:0;display:grid;place-items:center; }
.board .tile-shape .shape-icon { width:74%;height:74%;max-width:56px;max-height:56px; }
.board .tile-shape .tile-corner { display:none; }
.board .tile.tile-shape:not(:disabled):hover { background:#e8eddd;box-shadow:inset 0 0 0 1px #59634d; }
.board .tile.tile-shape.clicked { background:#f5f7ef;color:#293226;opacity:.6; }
.board .tile-shape:focus-visible { outline:3px solid #285b89;outline-offset:-4px; }