/* /calc — the ship's calculator, tactical dress. Big touch targets for thumbs. */
.calc-wrap {
  max-width: 520px;
  margin: 0 auto;
  padding: 18px 16px 22px;
}
.calc-display {
  background: #0a0a0c;
  border: 1px solid #5a0f14;
  border-radius: 14px;
  box-shadow: inset 0 0 24px rgba(255, 30, 40, 0.08), 0 0 0 1px #000;
  padding: 18px 16px 14px;
  margin-bottom: 14px;
  min-height: 96px;
  overflow-x: auto;
}
.calc-expr {
  color: #ff8f96;
  font-size: 30px;
  line-height: 1.25;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.calc-result {
  color: #ffd98a;
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  text-align: right;
  white-space: nowrap;
  text-shadow: 0 0 18px rgba(255, 200, 90, 0.35);
  font-variant-numeric: tabular-nums;
  min-height: 48px;
}
.calc-keys {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.calc-key {
  appearance: none;
  border: 1px solid #3d0d11;
  border-radius: 12px;
  background: linear-gradient(180deg, #1c1214 0%, #120c0d 100%);
  color: #f3d9d9;
  font-size: 26px;
  padding: 18px 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  transition: transform 60ms ease, background 120ms ease, box-shadow 120ms ease;
}
.calc-key:active, .calc-key.hit {
  transform: scale(0.94);
  background: linear-gradient(180deg, #4a1015 0%, #2a0b0e 100%);
  box-shadow: 0 0 14px rgba(255, 45, 60, 0.45);
}
.calc-key.fn {
  color: #ffb3b8;
  border-color: #6b1420;
}
.calc-key.eq {
  background: linear-gradient(180deg, #7a1620 0%, #4a0e15 100%);
  color: #ffe9c4;
  font-weight: 700;
  border-color: #a32430;
}
.calc-key.eq:active, .calc-key.eq.hit {
  box-shadow: 0 0 18px rgba(255, 120, 60, 0.6);
}
.calc-note {
  text-align: center;
  margin-top: 14px;
}
@media (max-width: 420px) {
  .calc-key { font-size: 24px; padding: 16px 0; }
  .calc-expr { font-size: 27px; }
  .calc-result { font-size: 36px; }
}