.score-calculator {
  margin: 2rem 0 3.5rem;
  padding: clamp(1.1rem, 4vw, 2rem);
  border: 1px solid rgba(89, 71, 31, .24);
  border-radius: 1rem;
  background: #f8f4eb;
  box-shadow: 0 1.2rem 3rem rgba(19, 38, 30, .1);
}

.score-calculator h2 { margin: 0 0 .7rem; font-size: clamp(2rem, 8vw, 3rem); }
.score-calculator > p { margin: 0 0 1.5rem; }
.calculator-grid { display: grid; gap: 1rem; }
.calculator-field { display: grid; align-content: start; gap: .45rem; }
.calculator-field label, .meld-fieldset legend { color: #172d23; font-size: .88rem; font-weight: 760; }
.calculator-field small, .meld-help { color: #64756c; font-size: .78rem; line-height: 1.45; }
.calculator-field input, .calculator-field select {
  width: 100%; min-height: 3rem; padding: .65rem .75rem; border: 1px solid rgba(19, 38, 30, .28);
  border-radius: .55rem; background: #fffdf8; color: #13261e; font: 700 1rem/1.2 var(--sans);
}
.calculator-field input:focus-visible, .calculator-field select:focus-visible, .calculator-reset:focus-visible {
  outline: .1875rem solid #8b6c2e; outline-offset: .15rem;
}
.card-counter { margin: 0; padding: 0; border: 0; }
.card-counter legend { color: #172d23; font-size: .88rem; font-weight: 760; }
.card-counts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: .55rem; }
.card-count { display: grid; grid-template-columns: 1fr 3.6rem; align-items: center; gap: .5rem; padding: .55rem .65rem; border: 1px solid rgba(19, 38, 30, .18); border-radius: .55rem; background: #fffdf8; }
.card-count label { color: #253c31; font-size: .83rem; font-weight: 700; }
.card-count input { width: 100%; min-height: 2.6rem; padding: .45rem; border: 1px solid rgba(19, 38, 30, .25); border-radius: .4rem; background: #fff; color: #13261e; font: 700 1rem/1 var(--sans); text-align: center; }
.card-total { display: inline-block; margin-top: .65rem; color: #59471f; font-weight: 800; }
.meld-fieldset { margin: 0; padding: 0; border: 0; }
.meld-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; margin-top: .55rem; }
.meld-option { min-height: 3rem; display: flex; align-items: center; gap: .55rem; padding: .55rem .65rem; border: 1px solid rgba(19, 38, 30, .18); border-radius: .55rem; background: #fffdf8; cursor: pointer; }
.meld-option input { width: 1.15rem; height: 1.15rem; margin: 0; accent-color: #765f37; }
.meld-option span { color: #253c31; font-size: .88rem; }
.calculator-result { margin-top: 1.35rem; padding: 1.25rem; border-radius: .8rem; background: #102b20; color: #f5f0e5; }
.calculator-result[data-state="warning"] { background: #4a231d; }
.calculator-result[data-state="barrier"] { background: #3b3422; }
.calculator-result-label { margin: 0; color: #c7d1cc; font-size: .75rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.calculator-result-main { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .7rem 1rem; margin-top: .35rem; }
.calculator-result .calculator-delta { color: #f3d28c; font: 400 clamp(2.4rem, 12vw, 4rem)/1 var(--serif); }
.calculator-result .calculator-delta[data-result="negative"] { color: #ffc0ad; }
.calculator-next { color: #fff; font-size: 1rem; font-weight: 760; }
.calculator-result p { margin: .65rem 0 0; color: #ced8d2; }
.calculator-result .calculator-note { color: #f5f0e5; }
.calculator-actions { margin-top: 1rem; display: flex; justify-content: flex-end; }
.calculator-reset { min-height: 3rem; padding: .55rem 1rem; border: 1px solid rgba(19, 38, 30, .24); border-radius: 999px; background: transparent; color: #4f411f; font-weight: 760; cursor: pointer; }
[hidden] { display: none !important; }

@media (min-width: 42rem) {
  .calculator-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .calculator-wide { grid-column: 1 / -1; }
  .meld-options { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .card-counts { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

@media (prefers-reduced-motion: reduce) {
  .score-calculator *, .score-calculator *::before, .score-calculator *::after { scroll-behavior: auto !important; transition: none !important; }
}