:root,
[data-theme="dark"] {
  --tile-size: 36px;
  --tile-font-size: clamp(1.3rem, 4.5vw, 2.1rem);
  --key-font-size: 1.35rem;
  --key-action-font-size: 1.3rem;
  --color-bg: #121213;
  --color-surface: #1a1a1b;
  --color-border: #3a3a3c;
  --color-text: #d7dadc;
  --color-text-muted: #818384;
  --color-text-bright: #ffffff;
  --color-key: #818384;
  --color-key-action: #565758;
  --color-key-hover: #6a6a6c;
  --color-btn: #3a3a3c;
  --color-btn-hover: #525356;
  --color-selected-bg: rgba(215, 218, 220, 0.1);
  --color-overlay: rgba(0, 0, 0, 0.7);
  --color-tile-current-border: #565758;
  --color-star-empty: #3a3a3c;
  --color-disabled-text: #6a6a6c;
  --color-solved-overlay: rgba(0, 0, 0, 0.45);
  --color-correct: #538d4e;
  --color-correct-hover: #6aaa64;
  --color-present: #b59f3b;
  --color-absent: #3a3a3c;
  --color-error: #e74c3c;
  --color-star: #ffd700;
  --color-star-silver: #b8bcc0;
  --color-solved-label: #6aaa64;
  --color-key-label-shadow: rgba(0, 0, 0, 0.8);
}

[data-text-size="1"] {
  --tile-font-size: clamp(1rem, 3.5vw, 1.6rem);
  --key-font-size: 1.05rem;
  --key-action-font-size: 1rem;
}

[data-text-size="2"] {
  --tile-font-size: clamp(1.15rem, 4vw, 1.85rem);
  --key-font-size: 1.2rem;
  --key-action-font-size: 1.15rem;
}

[data-text-size="4"] {
  --tile-font-size: clamp(1.45rem, 5vw, 2.35rem);
  --key-font-size: 1.5rem;
  --key-action-font-size: 1.45rem;
}

[data-text-size="5"] {
  --tile-font-size: clamp(1.6rem, 5.5vw, 2.6rem);
  --key-font-size: 1.65rem;
  --key-action-font-size: 1.6rem;
}

[data-theme="light"] {
  --color-bg: #ffffff;
  --color-surface: #f6f7f8;
  --color-border: #d3d6da;
  --color-text: #1a1a1b;
  --color-text-muted: #787c7e;
  --color-text-bright: #1a1a1b;
  --color-key: #818384;
  --color-key-text: #ffffff;
  --color-key-action: #818384;
  --color-key-hover: #6a6a6c;
  --color-key-absent: #b8bcc0;
  --color-btn: #d3d6da;
  --color-btn-hover: #b8bcc0;
  --color-selected-bg: rgba(26, 26, 27, 0.08);
  --color-overlay: rgba(0, 0, 0, 0.4);
  --color-tile-current-border: #878a8c;
  --color-star-empty: #d3d6da;
  --color-disabled-text: #a0a4a8;
  --color-solved-overlay: rgba(255, 255, 255, 0.55);
  --color-key-label-shadow: rgba(0, 0, 0, 0.45);
  --key-outline-shadow:
    -0.5px -0.5px 0 rgba(0, 0, 0, 0.35),
    0.5px -0.5px 0 rgba(0, 0, 0, 0.35),
    -0.5px 0.5px 0 rgba(0, 0, 0, 0.35),
    0.5px 0.5px 0 rgba(0, 0, 0, 0.35);
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: "Helvetica Neue", Arial, sans-serif;
  background: var(--color-bg);
  color: var(--color-text);
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

header {
  width: 100%;
  max-width: 700px;
  padding: 12px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--color-border);
  flex-wrap: wrap;
  gap: 8px;
}

#header-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}

header h1 {
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

#settings-btn,
#help-btn {
  background: none;
  border: none;
  padding: 2px 4px;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  color: var(--color-text);
  opacity: 0.75;
}

#settings-btn:hover,
#help-btn:hover {
  opacity: 1;
}

#help-btn {
  font-weight: 700;
}

#controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

#controls button {
  background: var(--color-btn);
  color: var(--color-text);
  border: none;
  border-radius: 4px;
  padding: 4px 10px;
  font-size: 1rem;
  cursor: pointer;
}

#controls button:hover {
  background: var(--color-btn-hover);
}

#level-label {
  font-size: 0.95rem;
  font-weight: 600;
  min-width: 70px;
  text-align: center;
}

#stats {
  display: flex;
  align-items: center;
  gap: 12px;
}

#stars-display {
  display: flex;
  gap: 4px;
}

.star {
  width: 20px;
  height: 20px;
  display: inline-block;
  position: relative;
}

.star::before {
  content: "☆";
  font-size: 1.25rem;
  color: var(--color-star-empty);
  line-height: 1;
}

.star.filled::before {
  content: "★";
  color: var(--color-star);
}

.star.silver::before {
  content: "★";
  color: var(--color-star-silver);
}

.star.grand-slam::before {
  content: "🌟";
}

#strikes-display {
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}

#strikes-display:hover {
  color: var(--color-text-bright);
}

main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-height: 0;
  padding: 16px;
  width: 100%;
  max-width: 700px;
}

.play-area {
  flex: 1;
  overflow-y: auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#level-results-line {
  width: 100%;
  margin-bottom: 12px;
  padding: 10px 14px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  color: var(--color-text);
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  text-align: center;
}

#level-results-line:hover {
  background: var(--color-btn);
}

#level-results-line.hidden {
  display: none;
}

.grids-2x2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
  width: 100%;
}

.puzzle-grid {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  position: relative;
  padding: 8px;
  min-height: calc(5 * var(--tile-size) + 4 * 3px);
}

.puzzle-grid.selectable {
  cursor: pointer;
}

.puzzle-grid.selected {
  background: var(--color-selected-bg);
  border-radius: 6px;
}

.puzzle-grid.solved::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--color-solved-overlay);
  border-radius: 6px;
  pointer-events: none;
}

body.admiring .puzzle-grid.solved::after {
  display: none;
}

.puzzle-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 2px;
  color: var(--color-text-muted);
}

.puzzle-grid.solved .puzzle-label {
  color: var(--color-solved-label);
}

.guess-row {
  display: flex;
  gap: 3px;
}

.tile {
  width: var(--tile-size);
  height: var(--tile-size);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--tile-font-size);
  font-weight: 700;
  text-transform: uppercase;
  border-radius: 3px;
  border: 2px solid var(--color-border);
}

.guess-row.current .tile {
  border-color: var(--color-tile-current-border);
}

.tile.green {
  background: var(--color-correct);
  border-color: var(--color-correct);
  color: #fff;
}

.tile.yellow {
  background: var(--color-present);
  border-color: var(--color-present);
  color: #fff;
}

.tile.gray {
  background: var(--color-absent);
  border-color: var(--color-absent);
  color: #fff;
}

.guess-row.presolved .tile {
  opacity: 0.45;
}

.guess-row.presolved .tile.green {
  background: var(--color-correct);
  border-color: var(--color-correct);
}

.guess-row.presolved .tile.yellow {
  background: var(--color-present);
  border-color: var(--color-present);
}

.guess-row.presolved .tile.gray {
  background: var(--color-absent);
  border-color: var(--color-absent);
}

#hint-area {
  width: 100%;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

#hint-controls {
  display: flex;
  align-items: center;
  gap: 10px;
}

#hint-label {
  font-size: 0.9rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
}

#hint-buttons {
  display: flex;
  gap: 8px;
}

.hint-btn {
  background: var(--color-btn);
  color: var(--color-text);
  border: none;
  border-radius: 4px;
  width: 36px;
  height: 36px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
}

.hint-btn:hover:not(:disabled) {
  background: var(--color-btn-hover);
}

.hint-btn.revealed,
.hint-btn.revealed:disabled {
  background: var(--color-correct);
  color: #fff;
  cursor: not-allowed;
}

.hint-btn:disabled:not(.revealed) {
  background: var(--color-surface);
  color: var(--color-disabled-text);
  cursor: not-allowed;
}

#keyboard {
  width: 100%;
  max-width: 500px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex-shrink: 0;
  position: sticky;
  bottom: 0;
  background: var(--color-bg);
  padding: 8px 0 calc(8px + env(safe-area-inset-bottom));
  z-index: 10;
}

.keyboard-row {
  display: flex;
  justify-content: center;
  gap: 4px;
}

.key {
  position: relative;
  background: var(--color-key);
  color: var(--color-key-text, #fff);
  border: none;
  border-radius: 4px;
  min-width: 32px;
  height: 52px;
  font-size: var(--key-font-size);
  font-weight: 700;
  cursor: pointer;
  padding: 2px;
  overflow: hidden;
  flex: 1;
  max-width: 44px;
}

.key-action {
  flex: 1.5;
  max-width: 64px;
  font-size: var(--key-action-font-size);
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-key-action);
}

.key.key-enter {
  font-size: calc(var(--key-font-size) * 0.85);
}

.key.key-enter:not(:disabled) {
  background: var(--color-key-action);
  color: var(--color-key-text, #fff);
}

.key.key-enter:disabled {
  background: var(--color-key-absent, var(--color-absent));
  color: var(--color-disabled-text);
  cursor: not-allowed;
}

.key-action:hover:not(:disabled) {
  background: var(--color-key-hover);
}

.key:hover:not(:disabled) {
  background: var(--color-key-hover);
}

.key:disabled {
  cursor: not-allowed;
  color: var(--color-disabled-text);
}

.key:disabled .key-label {
  color: var(--color-disabled-text);
  text-shadow: none;
}

.key-label {
  position: relative;
  z-index: 1;
  text-shadow: 0 0 3px var(--color-key-label-shadow);
}

.key-quadrants {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template: 1fr 1fr / 1fr 1fr;
  gap: 1px;
}

.key-quadrant {
  background: var(--color-key);
}

.key-quadrant.green {
  background: var(--color-correct);
}

.key-quadrant.yellow {
  background: var(--color-present);
}

.key-quadrant.gray {
  background: var(--color-absent);
}

#keyboard.filtered .key-quadrants {
  display: none;
}

#keyboard.filtered .key.green {
  background: var(--color-correct);
}

#keyboard.filtered .key.yellow {
  background: var(--color-present);
}

#keyboard.filtered .key.gray {
  background: var(--color-absent);
}

#keyboard.filtered .key.green:hover:not(:disabled),
#keyboard.filtered .key.yellow:hover:not(:disabled),
#keyboard.filtered .key.gray:hover:not(:disabled) {
  filter: brightness(1.1);
}

[data-theme="light"] .key-action:not(.key-enter),
[data-theme="light"] .key:has(.key-quadrant.green),
[data-theme="light"] .key:has(.key-quadrant.yellow),
[data-theme="light"] #keyboard.filtered .key.green,
[data-theme="light"] #keyboard.filtered .key.yellow {
  color: #fff;
}

[data-theme="light"] .key:not(:disabled) .key-label {
  text-shadow: var(--key-outline-shadow);
}

[data-theme="light"] .key-quadrant.gray,
[data-theme="light"] #keyboard.filtered .key.gray {
  background: var(--color-key-absent);
}

[data-theme="light"] .key-action:not(.key-enter) {
  text-shadow: var(--key-outline-shadow);
}

[data-theme="light"] .key.key-enter:not(:disabled) {
  text-shadow: var(--key-outline-shadow);
}

[data-theme="light"] .key.key-enter:disabled {
  text-shadow: none;
}

[data-theme="light"] .key:has(.key-quadrant.green) .key-label,
[data-theme="light"] .key:has(.key-quadrant.yellow) .key-label,
[data-theme="light"] #keyboard.filtered .key.green .key-label,
[data-theme="light"] #keyboard.filtered .key.yellow .key-label {
  text-shadow: var(--key-outline-shadow);
}

[data-theme="light"] .key:disabled,
[data-theme="light"] .key:disabled .key-label {
  color: var(--color-disabled-text);
  text-shadow: none;
}

#message {
  margin-top: 12px;
  font-size: 0.9rem;
  font-weight: 600;
  min-height: 1.4em;
  text-align: center;
  cursor: pointer;
}

#message:hover {
  opacity: 0.85;
}

#message:focus-visible {
  outline: 2px solid var(--color-present);
  outline-offset: 2px;
}

#message.error {
  color: var(--color-error);
}

#message.success {
  color: var(--color-correct-hover);
}

#message.info {
  color: var(--color-present);
}

#level-complete-overlay,
#strike-log-overlay,
#help-overlay,
#config-overlay {
  position: fixed;
  inset: 0;
  background: var(--color-overlay);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
}

#level-complete-overlay.hidden,
#strike-log-overlay.hidden,
#help-overlay.hidden,
#config-overlay.hidden {
  display: none;
}

#level-complete-card,
#strike-log-card,
#help-card,
#config-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  text-align: center;
}

#level-complete-card {
  padding: 32px 40px;
  max-width: 360px;
}

#level-complete-card h2 {
  font-size: 1.4rem;
  margin-bottom: 12px;
}

#complete-summary {
  margin-bottom: 16px;
}

#complete-level {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 8px;
}

#complete-stars {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 8px;
}

#complete-stars .star {
  width: 24px;
  height: 24px;
}

#complete-stars .star::before {
  font-size: 1.5rem;
}

#complete-strikes {
  font-size: 1rem;
  margin-bottom: 12px;
}

#complete-actions {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 12px;
}

#copy-summary-btn,
#admire-puzzle-btn,
#close-strike-log-btn,
#close-help-btn,
#close-config-btn {
  background: var(--color-btn);
  color: var(--color-text);
  border: none;
  border-radius: 6px;
  padding: 8px 20px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  text-transform: uppercase;
}

#copy-summary-btn:hover,
#admire-puzzle-btn:hover,
#close-strike-log-btn:hover,
#close-help-btn:hover,
#close-config-btn:hover {
  background: var(--color-btn-hover);
}

#next-level-btn {
  background: var(--color-correct);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 10px 28px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  text-transform: uppercase;
}

#next-level-btn:hover {
  background: var(--color-correct-hover);
}

#strike-log-card {
  padding: 24px 32px;
  max-width: 400px;
  width: 90%;
}

#strike-log-card h2 {
  font-size: 1.2rem;
  margin-bottom: 16px;
}

#strike-log-list {
  list-style: none;
  text-align: left;
  margin-bottom: 20px;
  max-height: 240px;
  overflow-y: auto;
}

#strike-log-list li {
  padding: 8px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 0.9rem;
}

#strike-log-list li:last-child {
  border-bottom: none;
}

#strike-log-list li.empty {
  color: var(--color-text-muted);
  text-align: center;
  border-bottom: none;
}

#help-card {
  padding: 24px 32px;
  max-width: 420px;
  width: 90%;
  max-height: 85vh;
  overflow-y: auto;
}

#help-card h2 {
  font-size: 1.2rem;
  margin-bottom: 16px;
}

#help-content {
  text-align: left;
  margin-bottom: 20px;
  font-size: 0.9rem;
  line-height: 1.5;
}

#help-content p {
  margin-bottom: 12px;
}

#help-content ul {
  margin: 0 0 12px 1.2em;
}

#help-content li {
  margin-bottom: 6px;
}

#config-card {
  padding: 24px 32px;
  max-width: 400px;
  width: 90%;
}

#config-card h2 {
  font-size: 1.2rem;
  margin-bottom: 20px;
}

.setting-group {
  margin-bottom: 20px;
  text-align: left;
}

.setting-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--color-text-muted);
  margin-bottom: 8px;
}

.setting-options {
  display: flex;
  gap: 0;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.setting-options button {
  flex: 1;
  background: var(--color-bg);
  color: var(--color-text);
  border: none;
  border-right: 1px solid var(--color-border);
  padding: 8px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

.setting-options button:last-child {
  border-right: none;
}

.setting-options button:hover:not(.active) {
  background: var(--color-surface);
}

#clear-progress-btn {
  width: 100%;
  background: var(--color-bg);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: 6px;
  padding: 8px 16px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  text-transform: uppercase;
}

#clear-progress-btn:hover {
  background: var(--color-btn-hover);
}

.setting-options button.active {
  background: var(--color-btn);
  color: var(--color-text-bright);
}

#close-config-btn {
  margin-top: 4px;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
}

.shake {
  animation: shake 0.4s ease-in-out;
}

@media (max-width: 520px) {
  :root,
  [data-theme="dark"],
  [data-theme="light"] {
    --tile-size: clamp(22px, calc((100vw - 48px - 8px) / 10 - 3px), 30px);
    --key-font-size: 1.3rem;
    --key-action-font-size: 1.25rem;
  }

  [data-text-size="1"] {
    --key-font-size: 1rem;
    --key-action-font-size: 0.95rem;
  }

  [data-text-size="2"] {
    --key-font-size: 1.15rem;
    --key-action-font-size: 1.1rem;
  }

  [data-text-size="4"] {
    --key-font-size: 1.45rem;
    --key-action-font-size: 1.4rem;
  }

  [data-text-size="5"] {
    --key-font-size: 1.6rem;
    --key-action-font-size: 1.55rem;
  }

  header {
    padding: 8px 12px;
  }

  header h1 {
    font-size: 0.85rem;
  }

  #settings-btn,
  #help-btn {
    font-size: 0.95rem;
  }

  main {
    padding: 8px 12px;
  }

  .grids-2x2 {
    gap: 8px;
    margin-bottom: 12px;
  }

  .puzzle-grid {
    padding: 4px;
  }

  .puzzle-label {
    font-size: 0.55rem;
  }

  .hint-btn {
    width: 30px;
    height: 30px;
    font-size: 0.8rem;
  }

  #hint-buttons {
    gap: 6px;
  }

  #keyboard {
    gap: 4px;
  }

  .key {
    height: 40px;
    min-width: 28px;
    max-width: 36px;
    font-size: var(--key-font-size);
  }

  .key-action {
    max-width: 52px;
    font-size: var(--key-action-font-size);
  }

  .setting-options button {
    padding: 8px 6px;
    font-size: 0.75rem;
  }
}