* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  color: #222; background: #fff; overflow: hidden;
}

/* Full-screen, plain white play area. */
#board {
  position: fixed; inset: 0; width: 100vw; height: 100vh; display: block;
  background: #fff; touch-action: none;
}

/* Discreet settings button, top-right. */
.gear {
  position: fixed; top: 12px; right: 12px; z-index: 10;
  width: 40px; height: 40px; display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 10px; background: rgba(0, 0, 0, .04); color: #8a8a90;
  cursor: pointer; opacity: .45;
  transition: opacity .2s ease, background .2s ease, color .2s ease;
}
.gear:hover, .gear:focus-visible { opacity: 1; background: rgba(0, 0, 0, .08); color: #444; outline: none; }

/* Discreet play/pause control, bottom-right. Hidden until the puzzle is solved. */
.audio {
  position: fixed; bottom: 12px; right: 12px; z-index: 10;
  width: 40px; height: 40px; display: none; align-items: center; justify-content: center;
  border: none; border-radius: 10px; background: rgba(0, 0, 0, .05); color: #666; cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.audio.show { display: flex; }
.audio:hover, .audio:focus-visible { background: rgba(0, 0, 0, .09); color: #222; outline: none; }

/* Settings popup. */
.modal { position: fixed; inset: 0; z-index: 20; display: none; align-items: center; justify-content: center; }
.modal.open { display: flex; }
.modalBackdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, .28); }
.modalCard {
  position: relative; background: #fff; color: #222;
  border: 1px solid #e6e6e8; border-radius: 12px; box-shadow: 0 12px 40px rgba(0, 0, 0, .18);
  padding: 22px; width: min(360px, 92vw); display: flex; flex-direction: column; gap: 14px;
}
.settingsTitle { font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #9a9aa0; }
.close {
  position: absolute; top: 8px; right: 10px; border: none; background: none; cursor: pointer;
  font-size: 22px; line-height: 1; color: #b0b0b6; padding: 4px;
}
.close:hover { color: #666; }

.row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row > label[for=count] { font-size: 14px; color: #555; }

.btn {
  cursor: pointer; border: 1px solid #d8d8dc; border-radius: 8px; padding: 9px 14px;
  font-size: 14px; font-weight: 500; background: #fafafa; color: #222;
}
.btn:hover { background: #f0f0f2; }
.btn.file { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; }
.btn.primary { background: #2b2b2e; border-color: #2b2b2e; color: #fff; width: 100%; text-align: center; }
.btn.primary:hover { background: #1c1c1f; }

input[type=number] { width: 84px; padding: 8px 10px; border-radius: 8px; border: 1px solid #d8d8dc; font-size: 14px; }
.hint { font-size: 12px; color: #9a9aa0; }
.toggle { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; color: #444; cursor: pointer; }