.numbertiles-game {
  --nt-paper: #f4e7c6;
  --nt-ink: #293f43;
  --nt-teal: #3c645f;
  --nt-gold: #efc77d;
  --nt-wood: #ba9360;
  color: var(--nt-ink);
  font-family: Georgia, "Times New Roman", serif;
}
.nt-shell { position: relative; width: min(100%, 1120px); margin: 0 auto; padding: 12px 16px 10px; border: 3px solid var(--nt-wood); background: var(--nt-paper); box-shadow: inset 0 0 0 2px #fff5dc, 0 4px 0 #806244; }
.nt-heading, .nt-toolbar, .nt-actions, .nt-readouts, .nt-sizes { display: flex; align-items: center; gap: 10px; }
.nt-heading, .nt-toolbar { justify-content: space-between; }
.nt-heading h2 { margin: 2px 0 0; color: var(--nt-ink); font: 700 clamp(1.35rem, 2.5vw, 1.8rem)/1.1 Georgia, serif; }
.nt-kicker { margin: 0; color: var(--nt-teal); font: 700 .7rem/1.2 system-ui, sans-serif; letter-spacing: .12em; }
.nt-memory { margin: 0; color: #6e5c3d; font: .78rem/1.35 system-ui, sans-serif; text-align: right; }
.nt-instructions { max-width: 820px; margin: 8px auto; color: #425b58; font: .9rem/1.4 system-ui, sans-serif; text-align: center; }
.nt-toolbar { flex-wrap: wrap; margin-top: 8px; padding: 7px 8px; border-block: 2px dashed #c6ad7d; color: #395854; font: .85rem/1.3 system-ui, sans-serif; }
.nt-readouts { flex-wrap: wrap; }
.nt-readouts span { white-space: nowrap; }
.nt-actions { justify-content: flex-end; }
.nt-actions button, .nt-sizes button, .nt-pad button, .nt-confirm button { min-height: 42px; padding: 7px 11px; border: 2px solid var(--nt-teal); border-radius: 3px; background: #fff3d5; color: var(--nt-ink); font: 700 .84rem/1.2 system-ui, sans-serif; cursor: pointer; }
.nt-sizes button[aria-pressed="true"] { background: #d7e1c9; box-shadow: inset 0 0 0 2px #6a8a67; }
.nt-actions button:hover:not(:disabled), .nt-sizes button:hover:not(:disabled), .nt-pad button:hover:not(:disabled), .nt-confirm button:hover, .nt-actions button:focus-visible, .nt-sizes button:focus-visible, .nt-pad button:focus-visible, .nt-confirm button:focus-visible { outline: 3px solid #bf7a38; outline-offset: 2px; background-color: #f7dda5; }
.nt-actions button:disabled, .nt-sizes button:disabled, .nt-pad button:disabled { cursor: default; opacity: .62; }
.nt-rewards { min-height: 1.3em; margin: 6px 0 0; color: #68522f; text-align: center; font: 700 .8rem/1.3 system-ui, sans-serif; }
.nt-play-area { display: grid; grid-template-columns: minmax(0, 1fr) minmax(148px, 210px); align-items: center; justify-items: center; gap: 18px; padding: 10px 0 4px; }
.nt-board { display: grid; grid-template-columns: repeat(var(--nt-width), minmax(0, 1fr)); gap: clamp(5px, .8vw, 9px); width: min(100%, 500px); aspect-ratio: 1; padding: clamp(8px, 1.4vw, 14px); border: 4px solid #806244; border-radius: 7px; background: #c5a16d; box-shadow: inset 0 0 0 2px #f8e6bd, 0 4px 0 #806244; }
.nt-size-3 { --nt-width: 3; }
.nt-size-4 { --nt-width: 4; }
.nt-cell { display: grid; place-items: center; min-width: 0; padding: 0; border: 2px solid #3c645f; border-radius: 5px; background: linear-gradient(145deg, #fff0c9, #edd39b); color: #293f43; box-shadow: 0 3px 0 #806244, inset 0 0 0 2px #fff9e9; font: 700 clamp(1.6rem, 5vw, 3.2rem)/1 system-ui, sans-serif; cursor: pointer; }
.nt-size-4 .nt-cell { font-size: clamp(1.3rem, 4.3vw, 2.6rem); }
.nt-cell:hover:not(:disabled) { transform: translateY(-2px); background: #ffe7ac; }
.nt-cell:focus-visible { z-index: 1; outline: 4px solid #263e43; outline-offset: 3px; }
.nt-board:focus-visible { outline: 4px solid #263e43; outline-offset: 5px; }
.nt-cell.is-blank { border-style: dashed; border-color: #8d754d; background: #e3d1a8; color: #826d49; box-shadow: inset 0 2px 5px #5e483333; cursor: default; }
.nt-pad { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; }
.nt-pad button { display: flex; align-items: center; justify-content: flex-start; gap: 8px; min-height: 48px; text-align: left; }
.nt-pad button span[aria-hidden="true"] { font-size: 1.2rem; }
.nt-status { min-height: 1.5em; margin: 3px 0 0; color: #395854; text-align: center; font: 700 .95rem/1.4 system-ui, sans-serif; }
.nt-status.is-success { color: #2e6a4c; }
.nt-status.is-paused { color: #6e5c3d; }
.nt-help { margin: 5px auto 0; color: #526660; text-align: center; font: .78rem/1.35 system-ui, sans-serif; }
.nt-confirm { position: absolute; z-index: 5; inset: 0; display: grid; place-items: center; padding: 16px; background: #293f4377; }
.nt-confirm > div { width: min(100%, 390px); padding: 18px; border: 3px solid var(--nt-wood); border-radius: 5px; background: var(--nt-paper); box-shadow: 0 8px 24px #18262666; text-align: center; }
.nt-confirm h3 { margin: 0; font-size: 1.15rem; }
.nt-confirm p { font: .9rem/1.4 system-ui, sans-serif; }
.nt-confirm p { color: #293f43; }
.nt-confirm > div > div { display: flex; justify-content: center; flex-wrap: wrap; gap: 9px; }
@media (max-width: 760px) {
  .nt-play-area { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .nt-board { box-sizing: border-box; width: min(100%, 440px); }
  .nt-pad { width: min(100%, 440px); }
}
@media (max-width: 600px) {
  .nt-shell { box-sizing: border-box; width: 100%; min-width: 0; padding: 9px 10px; }
  .nt-heading, .nt-toolbar { align-items: flex-start; flex-direction: column; }
  .nt-memory { text-align: left; }
  .nt-toolbar { gap: 8px; }
  .nt-readouts { justify-content: space-between; width: 100%; }
  .nt-actions { flex-wrap: wrap; justify-content: flex-start; }
  .nt-board { box-sizing: border-box; width: min(100%, 400px); min-width: 0; gap: 5px; padding: 8px; }
  .nt-play-area { min-width: 0; }
  .nt-pad { width: min(100%, 400px); min-width: 0; }
}
@media (max-height: 760px) and (min-width: 761px) {
  .nt-shell { padding-block: 5px 4px; }
  .nt-heading { display: none; }
  .nt-instructions { margin: 4px auto; font-size: .82rem; }
  .nt-toolbar { margin-top: 3px; padding-block: 4px; }
  .nt-play-area { padding-block: 4px 2px; gap: 12px; }
  .nt-board { width: min(56vh, 420px); }
  .nt-pad { max-width: 196px; }
  .nt-pad button { min-height: 42px; }
}
@media (prefers-reduced-motion: reduce) { .numbertiles-game *, .numbertiles-game *::before, .numbertiles-game *::after { scroll-behavior: auto; transition: none; animation: none; } }