* { box-sizing:border-box; }
body { margin:0; background:#edf1eb; color:#173e2c; font:600 18px/1.3 system-ui,-apple-system,"Segoe UI",sans-serif; }
main { height:100svh; padding:clamp(8px,1.5vmin,24px); }
.scorepad-app { height:100%; display:grid; grid-template-rows:auto minmax(90px,1fr) minmax(0,2fr); gap:clamp(8px,1.5vmin,24px); max-width:1800px; margin:auto; }
[hidden] { display:none !important; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.scorepad-heading { display:flex; align-items:center; gap:clamp(10px,2vw,32px); }
h1 { flex:1; margin:0; font:700 clamp(18px,2.5vw,32px)/1.1 Georgia,serif; }
.scorepad-heading label { display:flex; align-items:center; gap:10px; white-space:nowrap; font-size:clamp(14px,1.7vw,22px); }
button, select, input { font:inherit; }
button, select, .scorepad-segments label { touch-action:manipulation; cursor:pointer; }
button, select { min-height:48px; border:1px solid #c7d3c3; border-radius:10px; padding:10px 20px; background:#fffef7; color:#173e2c; }
button:hover { background:#e3ecdc; }
button:disabled { opacity:.45; cursor:default; }
:focus-visible { outline:3px solid #b38020; outline-offset:2px; }
.scorepad-scoreboard { display:grid; grid-template-columns:1fr 1fr; gap:clamp(8px,1.5vmin,24px); min-height:0; }
.scorepad-player-card { container-type:size; min-width:0; min-height:0; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px; padding:8px 16px; border:1px solid #173e2c; border-radius:16px; background:#173e2c; color:#fffbed; }
.scorepad-player-card:nth-child(2) { background:#fffbed; color:#173e2c; border-color:#d5dccb; }
.scorepad-player-name { width:100%; min-width:0; border:0; border-bottom:1px solid #ffffff30; border-radius:0; background:transparent; color:inherit; text-align:center; padding:6px; font-size:clamp(18px,2.4vmin,30px); }
.scorepad-player-card:nth-child(2) .scorepad-player-name { border-color:#173e2c20; }
.scorepad-player-card strong { font-size:min(60cqh,55cqw,180px); font-weight:650; line-height:1; letter-spacing:-.045em; font-variant-numeric:tabular-nums; }
.scorepad-player-card strong[data-digits="4"] { font-size:min(60cqh,42cqw,160px); }
.scorepad-entry { min-height:0; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:minmax(64px,1fr) minmax(76px,1.3fr) minmax(40px,.65fr) minmax(56px,1fr); gap:clamp(6px,1.2vmin,20px); padding:clamp(10px,1.5vmin,24px); border:1px solid #d5dccb; border-radius:16px; background:#fffef7; }
.scorepad-choice { min-width:0; min-height:0; padding:0; margin:0; border:0; display:flex; flex-direction:column; }
.scorepad-choice legend, .scorepad-number-field > label { font-size:clamp(13px,1.8vmin,22px); margin-bottom:5px; color:#52664e; }
.scorepad-segments { display:flex; gap:4px; padding:4px; flex:1; min-height:0; background:#edf1e7; border-radius:10px; }
.scorepad-segments label { position:relative; flex:1; min-width:0; }
.scorepad-segments input { position:absolute; opacity:0; width:1px; height:1px; }
.scorepad-segments span { height:100%; display:flex; justify-content:center; align-items:center; gap:6px; padding:6px; border-radius:7px; text-align:center; font-size:clamp(16px,2.2vmin,28px); overflow-wrap:anywhere; }
.scorepad-segments b { min-width:0; font-weight:inherit; }
.scorepad-segments input:checked + span { background:#173e2c; color:#fffbed; }
.scorepad-segments input:focus-visible + span { outline:3px solid #b38020; outline-offset:1px; }
.scorepad-number-row { grid-column:1 / -1; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(8px,1.5vmin,24px); min-height:0; }
.scorepad-number-row:not(#scorepad-knock-fields) { grid-template-columns:1fr; }
.scorepad-number-field { display:flex; flex-direction:column; min-width:0; min-height:0; }
.scorepad-number-field > label { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.scorepad-stepper { flex:1; min-height:0; display:flex; border:1px solid #bccbb4; border-radius:12px; }
.scorepad-stepper button { flex:0 0 clamp(48px,8vmin,110px); padding:0; min-height:0; border:0; background:#edf1e7; border-radius:11px 0 0 11px; font-size:clamp(26px,4vmin,48px); }
.scorepad-stepper button:last-child { border-radius:0 11px 11px 0; }
.scorepad-stepper input { width:100%; min-width:0; padding:0; border:0; background:transparent; text-align:center; color:#173e2c; font-size:clamp(30px,5vmin,64px); }
.scorepad-preview { grid-column:1 / -1; min-height:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:2px; }
.scorepad-preview strong { font-size:clamp(14px,2.4vmin,30px); }
.scorepad-preview span { font-size:clamp(12px,1.6vmin,20px); color:#5b6d54; }
.scorepad-actions { grid-column:1 / -1; display:grid; grid-template-columns:1fr 3fr; gap:clamp(8px,1.5vmin,24px); min-height:0; }
.scorepad-actions button { min-height:0; font-size:clamp(18px,2.8vmin,34px); }
.scorepad-record { background:#173e2c; color:#fffbed; border-color:#173e2c; }
.scorepad-record:hover { background:#2c5b3b; }
kbd { flex:none; border:1px solid currentColor; opacity:.65; border-radius:4px; padding:2px 4px; font:500 11px/1.2 system-ui,sans-serif; white-space:nowrap; }
.scorepad-actions kbd { margin-left:8px; }
.scorepad-result { grid-column:1; grid-row:3; z-index:1; align-self:center; justify-self:center; margin-bottom:80px; padding:20px; font:700 clamp(24px,5vmin,60px)/1.2 Georgia,serif; text-align:center; background:#fffbed; border-radius:14px; }
.is-over .scorepad-entry { grid-column:1; grid-row:3; }
.is-over .scorepad-choice, .is-over .scorepad-number-row, .is-over .scorepad-preview { visibility:hidden; }
dialog { max-width:calc(100vw - 32px); width:440px; border:1px solid #bccbb4; border-radius:16px; padding:24px; background:#fffef7; color:#173e2c; }
dialog::backdrop { background:#10281988; }
dialog h2 { margin:0 0 12px; font:700 28px/1.2 Georgia,serif; }
dialog p { margin:0 0 24px; }
dialog > div { display:flex; gap:12px; }
dialog button { flex:1; }
@media (max-width:600px) and (min-height:560px) {
  .scorepad-app { grid-template-rows:auto minmax(100px,1fr) minmax(0,3fr); }
  .scorepad-heading { gap:8px; }
  h1 { font-size:18px; } h1 span { display:block; }
  .scorepad-heading label { flex-direction:column; gap:2px; font-size:12px; }
  .scorepad-heading select { min-height:40px; padding:6px 10px; }
  .scorepad-heading button { padding:10px; font-size:14px; }
  .scorepad-entry { grid-template-columns:1fr; grid-template-rows:minmax(66px,1fr) minmax(66px,1fr) minmax(100px,1.5fr) minmax(44px,.75fr) minmax(60px,1fr); }
  .scorepad-number-row { gap:8px; }
  .scorepad-number-field > label { font-size:12px; }
  .scorepad-segments span { font-size:18px; }
  .scorepad-actions { grid-template-columns:1fr 2fr; }
  .scorepad-actions button { padding:6px; font-size:20px; }
  .scorepad-actions kbd { display:block; width:fit-content; margin:4px auto 0; }
  .scorepad-stepper button { flex-basis:44px; }
}
@media (max-height:559px) {
  .scorepad-app { grid-template-rows:auto minmax(72px,.65fr) minmax(0,2fr); gap:6px; }
  .scorepad-player-card { flex-direction:row; gap:16px; }
  .scorepad-player-name { width:50%; font-size:18px; }
  .scorepad-player-card strong { font-size:clamp(44px,10vh,65px); }
  .scorepad-entry { gap:6px; padding:8px; grid-template-rows:minmax(58px,1fr) minmax(64px,1.2fr) minmax(36px,.6fr) minmax(48px,.8fr); }
  .scorepad-choice legend, .scorepad-number-field > label { font-size:12px; margin-bottom:3px; }
  .scorepad-preview strong { font-size:14px; } .scorepad-preview span { font-size:11px; }
  .scorepad-segments span { font-size:16px; }
  .scorepad-stepper button { flex-basis:48px; }
}