body {
  font-family: Arial, sans-serif;
  text-align: center;
  padding: 2vw;
  max-width: 100vw;
  margin: 0 auto;
}

h1 {
  margin: 0;
  padding: 2vw;
  display: flex;
  align-items: center;
  justify-content: center;
}

.word {
  font-family: "Montserrat", sans-serif;
  font-size: clamp(32px, 10vw, 42px);
  color: #000000;
}

.sum {
  font-family: "Roboto", sans-serif;
  font-size: clamp(32px, 10vw, 42px);
  color: #000000;
}

.logo {
  height: 40px !important;
  width: auto !important;
  margin-left: clamp(10px, 3vw, 15px);
  image-rendering: crisp-edges;
  image-rendering: -webkit-optimize-contrast;
}

#mode-select {
  margin: 2vw 0;
  display: flex;
  justify-content: center;
  gap: 2vw;
}

.mode-btn, #help-btn {
  width: clamp(40px, 12vw, 40px);
  height: clamp(40px, 12vw, 40px);
  font-size: clamp(18px, 6vw, 18px);
  color: #333;
  background-color: transparent;
  border: 3px solid #d3d6da;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
}

#help-btn {
  background-color: #fdd835;
  border: 3px solid #000 !important;
}

.mode-btn:hover, #help-btn:hover {
  border-color: #bbb;
}

.mode-btn.active {
  background-color: #e0e0e0;
}

.mode-btn.solved {
  border-color: #6aaa64;
  color: #6aaa64;
}

.mode-btn.failed {
  border-color: #d9534f;
  color: #d9534f;
}

#game {
  max-width: 100vw;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#grid {
  display: inline-block;
  margin: 2vw 0;
}

.grid-row {
  display: flex;
  justify-content: center;
}

.grid-cell {
  width: clamp(48px, 14vw, 50px);
  height: clamp(56px, 16vw, 60px);
  border: 2px solid #ccc;
  margin: clamp(2px, 1vw, 2px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: #fff;
}

.filled {
  background-color: #f0f0f0;
}

.blue {
  background-color: #87ceeb;
  color: white;
  border-color: #87ceeb;
}

.green {
  background-color: #6aaa64;
  color: white;
  border-color: #6aaa64;
}

.gray {
  background-color: #787c7e;
  color: white;
  border-color: #787c7e;
}

.empty {
  background-color: #fff;
  border-color: #ccc;
}

.grid-cell .letter {
  font-size: clamp(24px, 7vw, 24px);
  font-weight: bold;
}

.key .letter {
  font-size: clamp(18px, 5vw, 18px);
  font-weight: normal;
}

.value {
  font-size: clamp(12px, 3.5vw, 12px);
  line-height: clamp(12px, 3.5vw, 12px);
  margin-top: clamp(2px, 1vw, 2px);
}

.sum-cell {
  width: clamp(48px, 14vw, 50px);
  height: clamp(56px, 16vw, 60px);
  border: 2px solid #ccc;
  margin: clamp(2px, 1vw, 2px) 0 clamp(2px, 1vw, 2px) clamp(4px, 2vw, 8px);
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: clamp(16px, 6vw, 18px);
  background-color: #f0f0f0;
  color: #333;
}

#feedback {
  margin-top: 2vw;
  font-size: clamp(20px, 6vw, 20px);
  font-weight: bold;
  white-space: nowrap;
  color: #000;
  width: clamp(320px, 100vw, 380px);
  display: grid;
  grid-template-columns: 2fr 1fr;
  align-items: center;
  gap: 10px;
}

#feedback.invalid {
  color: #d9534f;
  display: block;
}

#feedback.completed {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

.feedback-left {
  text-align: center;
  border: 2px solid #d3d6da;
  padding: 5px;
  height: clamp(60px, 16vw, 70px);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.feedback-right {
  font-weight: normal;
  color: #787c7e;
  text-align: center;
  border: 2px solid #d3d6da;
  height: clamp(60px, 16vw, 70px);
  box-sizing: border-box;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(24px, 7vw, 24px);
  line-height: 1;
  padding: 0;
  margin: 0;
}

.difference {
  font-size: clamp(16px, 5vw, 16px);
  font-weight: normal;
  display: block;
  margin-top: 2px;
}

#keyboard {
  margin-top: 2vw;
  width: clamp(320px, 100vw, 380px);
  max-width: 380px;
}

.keyboard-row {
  display: flex;
  justify-content: center;
  margin: clamp(2px, 1vw, 5px) 0;
}

.key {
  width: calc((clamp(320px, 100vw, 380px) - 28px) / 10);
  height: clamp(48px, 14vw, 50px);
  margin: clamp(2px, 1vw, 2px);
  font-size: clamp(18px, 5vw, 18px);
  background-color: #d3d6da;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  touch-action: manipulation;
}

.key.blue {
  background-color: #87ceeb;
  color: white;
}

.key.gray {
  background-color: #787c7e;
  color: white;
}

.enter-key, .backspace-key {
  width: calc((clamp(320px, 100vw, 380px) - 28px) / 10 * 2 + clamp(2px, 1vw, 4px));
}

.wide-key {
  width: calc((clamp(320px, 100vw, 380px) - 28px) / 10 * 2 + clamp(2px, 1vw, 4px));
}

.enter-key {
  font-size: clamp(14px, 5vw, 14px);
  background-color: #6aaa64;
  color: white;
}

.backspace-key {
  font-size: clamp(24px, 7vw, 24px);
}

.win-popup, .loss-popup, .help-popup, .stats-popup, .all-levels-popup {
  background-color: #fff;
  padding: clamp(10px, 3vw, 10px);
  font-size: clamp(16px, 5vw, 16px);
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
  z-index: 1001;
  width: calc(100vw - 4vw);
  text-align: center;
  white-space: pre-line;
  position: fixed;
  top: 10%;
  left: 50%;
  transform: translate(-50%, 0);
}

.all-levels-popup .level-timer {
  font-size: clamp(20px, 7vw, 20px);
}

.all-levels-popup .mode-btn {
  width: clamp(30px, 9vw, 30px);
  height: clamp(30px, 9vw, 30px);
  font-size: clamp(14px, 4.5vw, 14px);
}

.all-levels-popup .results-box {
  border: 2px solid #d3d6da;
  border-radius: 4px;
  padding: clamp(5px, 1.5vw, 10px) clamp(2px, 1vw, 5px);
  background-color: #f9f9f9;
  width: clamp(120px, 35vw, 120px); /* Matches share-btn */
  margin: 0 auto;
}

.all-levels-popup .share-btn {
  margin-top: clamp(5px, 1.5vw, 10px); /* Reduced spacing */
}

.popup-title {
  font-size: clamp(24px, 7vw, 24px);
  font-weight: bold;
}

.popup-content {
  margin-bottom: clamp(10px, 3vw, 10px);
}

.popup-content strong {
  font-weight: bold;
}

.level-circles {
  display: flex;
  justify-content: center;
  gap: clamp(10px, 3vw, 20px);
}

.level-circle {
  width: clamp(30px, 8vw, 40px);
  height: clamp(30px, 8vw, 40px);
  font-size: clamp(16px, 5vw, 20px);
  border: 3px solid;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.level-circle.solved {
  border-color: #6aaa64;
  color: #6aaa64;
}

.level-circle.failed {
  border-color: #d9534f;
  color: #d9534f;
}

.completed-grid {
  display: inline-block;
  text-align: center;
  margin: clamp(5px, 2vw, 10px) 0;
}

.completed-grid .grid-row {
  display: flex;
  justify-content: center;
}

.completed-grid .grid-cell {
  width: clamp(32px, 10vw, 40px);
  height: clamp(40px, 12vw, 48px);
  margin: clamp(1px, 0.5vw, 2px);
}

.congrats {
  font-size: clamp(20px, 6vw, 20px);
  font-weight: bold;
  color: #6aaa64;
}

.stats-title {
  font-size: clamp(18px, 5.5vw, 18px);
  font-weight: bold;
  margin-bottom: clamp(10px, 3vw, 10px);
}

.close-btn {
  position: absolute;
  top: clamp(4px, 1.5vw, 5px);
  right: clamp(4px, 1.5vw, 5px);
  width: clamp(20px, 6vw, 20px);
  height: clamp(20px, 6vw, 20px);
  font-size: clamp(14px, 4vw, 14px);
  color: #333;
  background-color: #d3d6da;
  border: none;
  border-radius: 50%;
  cursor: pointer;
}

.close-btn:hover {
  background-color: #bbb;
}

.help-popup .intro {
  font-size: clamp(18px, 5.5vw, 18px);
  font-weight: bold;
  margin: 0 0 clamp(10px, 3vw, 10px);
}

.help-popup p {
  margin: clamp(10px, 3vw, 10px) 0;
}

.overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 1000;
}

#footer {
  width: 100vw;
  max-width: 100vw;
  display: flex;
  justify-content: center;
  gap: clamp(40px, 20vw, 80px);
  margin-top: clamp(15px, 5vw, 25px);
}

#feedback-btn {
  width: clamp(120px, 35vw, 120px);
  padding: clamp(8px, 3vw, 8px) 0;
  font-size: clamp(14px, 5vw, 14px);
  color: #333;
  background-color: #fdd835;
  border: none;
  border-radius: 4px;
  text-decoration: none;
  cursor: pointer;
  text-align: center;
}

#feedback-btn:hover {
  background-color: #e6c32f;
}

#results-btn {
  width: clamp(120px, 35vw, 120px) !important;
  padding: clamp(8px, 3vw, 8px) 0 !important;
  font-size: clamp(14px, 5vw, 14px) !important;
  color: #fff;
  background-color: #87ceeb;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-align: center;
}

#results-btn:hover {
  background-color: #5ab8e5;
}

.share-btn {
  width: clamp(120px, 35vw, 120px);
  padding: clamp(8px, 3vw, 8px);
  font-size: clamp(14px, 5vw, 14px);
  color: #333;
  background-color: #fdd835;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  margin-top: clamp(10px, 3vw, 10px);
}

.share-btn:hover {
  background-color: #e6c32f;
}

@media (max-width: 600px) {
  body {
    padding: 2vw;
  }
}

@media (min-width: 381px) {
  body, #game, #footer {
    max-width: 100vw;
    width: clamp(320px, 100vw, 380px);
  }
}