.round-score-keypad {
  position: relative;
  width: 100%;
  max-width: 360px;
  margin: 18px auto 0;
  padding: 14px;
  border: 1px solid rgba(241, 207, 105, 0.48);
  border-radius: 22px;
  background:
    radial-gradient(circle at top right, rgba(255, 228, 145, 0.16), transparent 38%),
    linear-gradient(180deg, rgba(61, 26, 9, 0.98), rgba(27, 11, 4, 0.99));
  box-shadow:
    inset 0 1px 0 rgba(255, 243, 197, 0.18),
    0 22px 36px rgba(0, 0, 0, 0.42);
}

.round-score-keypad::before {
  content: "✦";
  position: absolute;
  top: -14px;
  left: 50%;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  transform: translateX(-50%);
  border: 2px solid #9f6b15;
  border-radius: 999px;
  color: #f7df9a;
  font: 700 18px/1 Georgia, serif;
  background:
    linear-gradient(100deg, #0000 16%, #fff9bfb8 42%, #0000 66%),
    linear-gradient(#744012 0%, #43200a 100%);
  box-shadow: inset 0 0 0 1px #fff5b366, 0 10px 18px rgba(0, 0, 0, 0.35);
}

.round-score-keypad-title {
  margin: 0 0 12px;
  color: #f7df9a;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font: 700 14px/1.2 Georgia, serif;
}

.round-score-keypad-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 8px;
}

.round-score-keypad-button {
  min-height: 46px;
  padding: 0 10px;
  border: 2px solid #9f6b15;
  border-radius: 10px;
  color: #3a1600;
  cursor: pointer;
  text-shadow: 0 1px #fff4b8cc;
  font: 700 18px/1 Georgia, serif;
  background:
    linear-gradient(100deg, #0000 16%, #fff9bfb8 42%, #0000 66%),
    linear-gradient(#fff0a6 0%, #dcae42 32%, #b77a16 64%, #f1cf69 100%);
  box-shadow: inset 0 0 0 2px #fff5b3b8, 0 8px 18px #00000055;
}

.round-score-keypad-button:active {
  transform: translateY(1px) scale(0.985);
}

.round-score-keypad-button--wide {
  grid-column: span 2;
  font-size: 15px;
}

.round-score-keypad-button--small {
  font-size: 15px;
}

@media (max-height: 430px) {
  .round-score-keypad {
    max-width: 340px;
    margin-top: 14px;
    padding: 10px;
  }

  .round-score-keypad-button {
    min-height: 38px;
    font-size: 16px;
  }
}