:root {
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
  color: #fff;
  background: #080b10;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: linear-gradient(180deg, #111722, #070a0f);
  min-height: 100vh;
}

button, input { font: inherit; }

.phone {
  max-width: 620px;
  margin: auto;
  padding: 14px 12px 34px;
}

header {
  text-align: center;
  padding: 6px 0 12px;
}

.brand {
  font-weight: 950;
  letter-spacing: .18em;
  color: #e7333f;
}

h1 {
  font-size: 23px;
  margin: 5px 0;
}

#connectionText {
  color: #9aa5b5;
  font-size: 14px;
}

.card {
  background: #151b25;
  border: 1px solid #2c3544;
  border-radius: 16px;
  padding: 15px;
}

.hidden { display: none !important; }

label {
  display: grid;
  gap: 7px;
  font-weight: 800;
  margin-bottom: 12px;
}

.optional {
  color: #8d98a8;
  font-size: 12px;
  font-weight: 700;
}

input {
  width: 100%;
  min-height: 50px;
  font-size: 18px;
  padding: 12px 13px;
  border-radius: 11px;
  border: 1px solid #3b4658;
  background: #0b1119;
  color: #fff;
}

input:disabled {
  opacity: .45;
}

button {
  min-height: 50px;
  border-radius: 11px;
  border: 1px solid #46536a;
  background: #222b38;
  color: #fff;
  font-size: 15px;
  font-weight: 900;
  padding: 9px 11px;
  touch-action: manipulation;
}

button:active { transform: scale(.98); }
button:disabled { opacity: .55; }

.primary {
  background: #be2632;
  border-color: #e23c48;
}

.full { width: 100%; }

.message {
  min-height: 22px;
  margin-top: 10px;
  text-align: center;
  font-weight: 800;
  color: #9fe0ae;
}

.message.bad { color: #ff8791; }

.matchup {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 8px;
  text-align: center;
  font-weight: 900;
  margin-bottom: 12px;
  color: #aeb9c8;
}

.scores {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.scorebox {
  background: #0e141d;
  border: 1px solid #303a4a;
  border-radius: 14px;
  padding: 10px;
}

.team {
  text-align: center;
  font-size: 14px;
  font-weight: 950;
  margin-bottom: 7px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.stepper {
  display: grid;
  grid-template-columns: 50px 1fr 50px;
  gap: 6px;
  align-items: center;
}

.stepper strong {
  text-align: center;
  font-size: 36px;
  line-height: 1;
}

.stepper button {
  font-size: 26px;
  padding: 4px;
}

.section-block {
  margin-top: 15px;
}

.section-label {
  margin-bottom: 7px;
  color: #aeb9c8;
  font-size: 12px;
  font-weight: 950;
  letter-spacing: .11em;
}

.period-buttons {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 7px;
}

.period-buttons button:nth-child(5),
.period-buttons button:nth-child(6),
.period-buttons button:nth-child(7) {
  grid-column: span 1;
}

.period-buttons button.active,
.update-buttons button.active,
.toggle-button.active {
  border-color: #ff5964;
  background: #61242c;
  box-shadow: inset 0 0 0 1px #ff5964;
}

.clock-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 130px;
  gap: 8px;
  align-items: end;
}

.clock-inputs {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18px minmax(0, 1fr);
  gap: 5px;
  align-items: end;
}

.clock-field {
  margin: 0;
  gap: 4px;
}

.clock-field span {
  color: #8d98a8;
  font-size: 11px;
  font-weight: 900;
  text-align: center;
  letter-spacing: .08em;
}

.clock-field input {
  text-align: center;
  font-weight: 950;
  font-size: 22px;
  padding-left: 6px;
  padding-right: 6px;
}

.clock-separator {
  align-self: end;
  min-height: 50px;
  display: grid;
  place-items: center;
  font-size: 27px;
  font-weight: 950;
  color: #aeb9c8;
}

.toggle-button {
  font-size: 13px;
}

.quick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.update-buttons button {
  min-height: 48px;
  font-size: 13px;
}

.note-label {
  margin-top: 15px;
}

.send {
  margin-top: 2px;
  min-height: 58px;
  font-size: 19px;
  letter-spacing: .03em;
}

@media (max-width: 430px) {
  .phone { padding: 10px 9px 28px; }
  .card { padding: 12px; }
  .scores { gap: 7px; }
  .scorebox { padding: 9px 7px; }
  .stepper { grid-template-columns: 46px 1fr 46px; }
  .stepper strong { font-size: 32px; }
  .period-buttons { grid-template-columns: repeat(4, 1fr); gap: 6px; }
  .period-buttons button { min-height: 46px; padding: 6px; font-size: 13px; }
  .quick { gap: 6px; }
  .update-buttons button { padding: 6px; font-size: 12px; }
  .clock-row { grid-template-columns: minmax(0, 1fr) 104px; }
}