:root {
  --bg: #ffffff;
  --fg: #050505;
  --muted: #555555;
  --line: #050505;
  --soft: #f3f3f3;
}

* {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
}

html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--fg);
  font-family: Arial, Helvetica, sans-serif;
}

button,
input,
label {
  font-family: inherit;
}

.page {
  min-height: 100vh;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.topbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  border-bottom: 4px solid var(--line);
  padding-bottom: 14px;
}

.title {
  margin: 0;
  font-size: clamp(28px, 5vw, 72px);
  line-height: 1;
  letter-spacing: -0.06em;
  text-transform: uppercase;
}

.meta {
  color: var(--muted);
  font-weight: 700;
  font-size: clamp(14px, 2vw, 22px);
  margin-top: 6px;
}

.matchbox {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}

.matchbox input {
  width: 110px;
  border: 3px solid var(--line);
  background: var(--bg);
  color: var(--fg);
  border-radius: 0;
  padding: 12px;
  font-weight: 900;
  font-size: 20px;
  text-transform: uppercase;
}

.btn {
  border: 3px solid var(--line);
  background: var(--bg);
  color: var(--fg);
  border-radius: 0;
  padding: 12px 16px;
  font-weight: 900;
  font-size: 18px;
  cursor: pointer;
  text-transform: uppercase;
}

.btn:active,
.remote-btn:active,
.team:active {
  background: var(--fg);
  color: var(--bg);
}

.scoreboard {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.team {
  border: 5px solid var(--line);
  background: var(--bg);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 10px;
  min-height: 470px;
  cursor: pointer;
  user-select: none;
}

.team-name {
  width: 92%;
  border: 0;
  border-bottom: 4px solid var(--line);
  background: var(--bg);
  color: var(--fg);
  text-align: center;
  font-size: clamp(28px, 5vw, 78px);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: -0.05em;
  outline: 0;
}

.points {
  font-size: clamp(120px, 22vw, 330px);
  font-weight: 900;
  line-height: 0.88;
  letter-spacing: -0.1em;
  padding-right: 0.1em;
}

.subscore {
  display: flex;
  gap: 24px;
  font-size: clamp(24px, 4vw, 52px);
  font-weight: 900;
  text-transform: uppercase;
}

.server {
  min-height: 48px;
  font-size: clamp(20px, 3vw, 38px);
  font-weight: 900;
  text-transform: uppercase;
}

.controls {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}

.switch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.switch input {
  width: 24px;
  height: 24px;
  accent-color: black;
}

.remote-page {
  min-height: 100vh;
  padding: 14px;
  display: grid;
  grid-template-rows: auto 1fr 1fr 0.55fr;
  gap: 12px;
}

.remote-top {
  border: 4px solid var(--line);
  padding: 10px;
  display: flex;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.remote-top input {
  width: 86px;
  border: 3px solid var(--line);
  padding: 9px;
  font-size: 18px;
  font-weight: 900;
}

.remote-btn {
  border: 5px solid var(--line);
  background: var(--bg);
  color: var(--fg);
  font-weight: 900;
  font-size: clamp(34px, 12vw, 86px);
  text-transform: uppercase;
}

.remote-small {
  font-size: clamp(24px, 8vw, 50px);
}

.statusline {
  font-weight: 900;
  font-size: 16px;
  text-transform: uppercase;
}

@media (max-width: 850px) {
  .page {
    padding: 12px;
  }

  .topbar {
    align-items: flex-start;
    flex-direction: column;
  }

  .scoreboard {
    grid-template-columns: 1fr;
  }

  .team {
    min-height: 260px;
  }

  .controls {
    grid-template-columns: 1fr 1fr;
  }
}
/* --- Galaxy Watch Remote Layout v2 --- */

.watch-remote-body {
  margin: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  background: #ffffff;
  color: #000000;
}

.watch-remote {
  width: 100vw;
  height: 100vh;
  padding: 7px;
  display: grid;
  grid-template-rows: 26% 54% 20%;
  background: #ffffff;
  color: #000000;
}

.watch-head {
  border-bottom: 3px solid #000000;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 3px;
  min-height: 0;
}

.watch-title {
  font-weight: 900;
  font-size: clamp(15px, 7vw, 28px);
  line-height: 1;
  letter-spacing: -0.04em;
}

.watch-status {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
  font-size: clamp(8px, 3.5vw, 14px);
  font-weight: 800;
  white-space: nowrap;
  overflow: hidden;
}

.watch-status #status {
  max-width: 74px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.watch-status .dot {
  font-size: 13px;
  line-height: 1;
}

.watch-status input {
  width: 48px;
  height: 28px;
  border: 3px solid #000000;
  background: #ffffff;
  color: #000000;
  padding: 0 3px;
  font-size: 15px;
  font-weight: 900;
  text-align: center;
}

.watch-ok {
  width: 38px;
  height: 28px;
  border: 3px solid #000000;
  background: #ffffff;
  color: #000000;
  padding: 0;
  font-size: 10px;
  font-weight: 900;
}

.watch-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 3px solid #000000;
  min-height: 0;
}

.watch-side {
  border: 0;
  background: #ffffff;
  color: #000000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-width: 0;
  min-height: 0;
  padding: 0;
}

.watch-left {
  border-right: 3px solid #000000;
}

.watch-main {
  font-size: clamp(42px, 21vw, 86px);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.09em;
}

.watch-sub {
  font-size: clamp(12px, 5.2vw, 24px);
  font-weight: 900;
  text-transform: uppercase;
  border-bottom: 3px solid #000000;
  padding-bottom: 3px;
}

.watch-side:active,
.watch-undo:active,
.watch-ok:active {
  background: #000000;
  color: #ffffff;
}

.watch-bottom {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 0;
}

.watch-undo {
  width: 58%;
  height: 58%;
  min-height: 40px;
  border: 4px solid #000000;
  background: #ffffff;
  color: #000000;
  font-size: clamp(18px, 8vw, 34px);
  font-weight: 900;
  line-height: 1;
}

@media (max-width: 450px) and (max-height: 450px) {

  .watch-remote {
    padding: 10px 14px 9px 14px;
    grid-template-rows: 24% 56% 20%;
  }

  .watch-title {
    font-size: 20px;
  }

  .watch-status {
    font-size: 10px;
    gap: 4px;
  }

  .watch-status #status {
    max-width: 58px;
  }

  .watch-status input {
    width: 43px;
    height: 25px;
    font-size: 13px;
    border-width: 2px;
  }

  .watch-ok {
    width: 31px;
    height: 25px;
    border-width: 2px;
    font-size: 9px;
  }

  .watch-head,
  .watch-actions {
    border-bottom-width: 3px;
  }

  .watch-left {
    border-right-width: 3px;
  }

  .watch-main {
    font-size: 50px;
  }

  .watch-sub {
    font-size: 13px;
    border-bottom-width: 2px;
  }

  .watch-undo {
    width: 54%;
    height: 55%;
    min-height: 35px;
    border-width: 3px;
    font-size: 22px;
  }
}

/* --- Watch Live Score --- */

.watch-live-score {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
  margin-bottom: 4px;
}

.watch-line {
  display: flex;
  gap: 3px;
  align-items: center;
  font-size: clamp(10px, 4vw, 16px);
  font-weight: 900;
  line-height: 1;
}

.watch-line span:first-child {
  opacity: 0.6;
}

.watch-points-line {
  font-size: clamp(12px, 5vw, 18px);
}

@media (max-width: 450px) and (max-height: 450px) {

  .watch-live-score {
    gap: 7px;
    margin-bottom: 3px;
  }

  .watch-line {
    font-size: 11px;
  }

  .watch-points-line {
    font-size: 13px;
  }
}

/* --- Watch Button Background Score v3 --- */

.watch-live-score.compact {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 2px 0 3px 0;
  font-size: clamp(9px, 3.8vw, 15px);
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.watch-live-score.compact b {
  font-size: 1.15em;
}

.watch-side {
  position: relative;
  overflow: hidden;
}

.watch-bgscore {
  position: absolute;
  inset: 0;
  z-index: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: clamp(70px, 31vw, 150px);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.12em;
  opacity: 0.13;
  transform: translateX(-0.04em);
  pointer-events: none;
}

.watch-main,
.watch-sub {
  position: relative;
  z-index: 1;
}

.watch-main {
  text-shadow:
    0 0 5px #ffffff,
    0 0 12px #ffffff,
    0 0 18px #ffffff;
}

.watch-sub {
  background: rgba(255,255,255,0.75);
  padding-left: 4px;
  padding-right: 4px;
}

@media (max-width: 450px) and (max-height: 450px) {
  .watch-bgscore {
    font-size: 88px;
    opacity: 0.15;
  }

  .watch-live-score.compact {
    font-size: 10px;
    gap: 8px;
  }

  .watch-main {
    font-size: 46px;
  }
}

/* ==== WATCH UI FINAL DESIGN ==== */

.watch-top {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 12px 4px 12px;
  border-bottom: 2px solid #e5e5e5;
}

.watch-time {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 6px;
}

.clock-icon {
  font-size: 18px;
  color: #111;
  opacity: 0.8;
}

.watch-score-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.info-item {
  text-align: center;
  min-width: 60px;
}

.info-label {
  font-size: 8px;
  color: #666;
  letter-spacing: 1px;
  margin-bottom: 2px;
}

.info-value {
  font-size: 18px;
  color: #000;
  font-weight: 900;
}

.divider {
  width: 1px;
  height: 20px;
  background: #e0e0e0;
  margin: 0 10px;
}

.match-id-area {
  display: flex;
  align-items: center;
  gap: 6px;
}

.match-id-area input {
  width: 60px;
  height: 26px;
  border: 2px solid #dcdcdc;
  border-radius: 6px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
}

.watch-score-area {
  display: flex;
  align-items: stretch;
  height: 58%;
  position: relative;
}

.score-btn {
  flex: 1;
  position: relative;
  border: none;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding: 0;
  transition: background 0.15s ease,
              transform 0.1s ease;
}

.score-btn:active {
  transform: scale(0.98);
}

.team-a {
  border-right: 1px solid #ececec;
}

.score-value {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;

  display: flex;
  align-items: center;
  justify-content: center;

  font-size: 92px;
  line-height: 1;

  font-weight: 900;

  color: #000;

  opacity: 0.12;

  letter-spacing: -0.08em;

  z-index: 0;
}

.btn-content {
  position: relative;
  z-index: 1;

  display: flex;
  align-items: center;
  gap: 3px;

  padding: 14px 18px;

  border-radius: 22px;

  background: linear-gradient(
    145deg,
    #ffffff 0%,
    #e9e9e9 100%
  );

  border: 1px solid #d9d9d9;

  box-shadow:
    inset 0 1px 0 #ffffff,
    0 2px 8px rgba(0,0,0,0.08);
}

.plus,
.letter {
  position: relative;
  z-index: 1;
}

.plus {
  font-size: 26px;
  font-weight: 900;
  color: #bdbdbd;
  margin-right: 6px;
}

.letter {
  font-size: 34px;
  font-weight: 900;
  color: #bdbdbd;
}

.team-a .btn-content {
  box-shadow:
    0 0 0 2px #dfeafe,
    inset 0 0 1px #bfeafe;
}

.team-b .btn-content {
  box-shadow:
    0 0 0 2px #fee2e2,
    inset 0 0 1px #ffdede;
}

.watch-undo-area {
  height: 18%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.btn-undo {
  height: 46px;
  padding: 0 24px;

  border: 2px solid #000;

  background: #fff;

  border-radius: 16px;

  font-size: 15px;

  font-weight: 900;

  display: flex;
  align-items: center;
  gap: 8px;
}

.undo-icon {
  font-size: 18px;
}

.btn-ok {
  height: 26px;
  padding: 0 10px;

  border: 2px solid #000;
  background: #fff;

  border-radius: 6px;

  font-weight: 800;
  font-size: 13px;
}

@media (max-width: 450px) and (max-height: 450px) {

  #currentTime {
    font-size: 26px;
  }

  .info-value {
    font-size: 16px;
  }

  .score-value {
    font-size: 84px;
  }

  .plus {
    font-size: 24px;
  }

  .letter {
    font-size: 32px;
  }

  .btn-content {
    padding: 12px 16px;
  }

  .btn-undo {
    height: 40px;
    font-size: 14px;
  }
}

/* ==== STRONG WATCH FIX - HIGH CONTRAST ==== */

.watch-remote-body {
  background: #fff !important;
  color: #000 !important;
  overflow: hidden !important;
}

.watch-remote {
  width: 100vw !important;
  height: 100vh !important;
  padding: 8px 12px 10px 12px !important;
  display: grid !important;
  grid-template-rows: 29% 53% 18% !important;
  background: #fff !important;
}

.watch-top {
  border-bottom: 3px solid #000 !important;
  padding: 0 4px 6px 4px !important;
  justify-content: center !important;
}

.watch-time {
  margin: 0 0 4px 0 !important;
  font-weight: 900 !important;
}

#currentTime {
  font-size: 24px !important;
  font-weight: 900 !important;
  color: #000 !important;
}

.watch-score-info {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 8px !important;
}

.info-item {
  min-width: 48px !important;
}

.info-label {
  font-size: 9px !important;
  font-weight: 900 !important;
  color: #555 !important;
}

.info-value {
  font-size: 22px !important;
  font-weight: 900 !important;
  color: #000 !important;
}

.divider {
  width: 2px !important;
  height: 30px !important;
  background: #000 !important;
  opacity: .45 !important;
  margin: 0 3px !important;
}

.match-id-area input {
  width: 48px !important;
  height: 28px !important;
  border: 3px solid #000 !important;
  color: #000 !important;
  background: #fff !important;
  font-size: 14px !important;
}

.btn-ok {
  width: 34px !important;
  height: 28px !important;
  border: 3px solid #000 !important;
  color: #000 !important;
  background: #fff !important;
  font-size: 10px !important;
  padding: 0 !important;
}

.watch-score-area {
  height: auto !important;
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  border-bottom: 3px solid #000 !important;
}

.score-btn {
  background: #fff !important;
  border: 0 !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 0 !important;
}

.team-a {
  border-right: 3px solid #000 !important;
}

.score-value {
  position: absolute !important;
  top: 8px !important;
  left: 0 !important;
  right: 0 !important;
  bottom: auto !important;
  z-index: 2 !important;

  display: block !important;
  text-align: center !important;

  font-size: 76px !important;
  line-height: .9 !important;
  font-weight: 900 !important;
  letter-spacing: -0.08em !important;

  color: #000 !important;
  opacity: 1 !important;
}

.btn-content {
  position: absolute !important;
  left: 50% !important;
  bottom: 14px !important;
  transform: translateX(-50%) !important;

  z-index: 3 !important;

  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;

  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 2px !important;
}

.plus,
.letter {
  color: #bcbcbc !important;
  font-weight: 900 !important;
  opacity: 1 !important;
}

.plus {
  font-size: 34px !important;
}

.letter {
  font-size: 56px !important;
}

.watch-undo-area {
  height: auto !important;
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
}

.btn-undo {
  height: 42px !important;
  min-width: 130px !important;
  border: 3px solid #000 !important;
  border-radius: 13px !important;
  background: #fff !important;
  color: #000 !important;
  font-size: 18px !important;
  font-weight: 900 !important;
}

.undo-icon {
  display: none !important;
}

.score-btn:active,
.btn-undo:active,
.btn-ok:active {
  background: #eee !important;
  transform: none !important;
}

@media (max-width: 450px) and (max-height: 450px) {

  .watch-remote {
    padding: 8px 14px 9px 14px !important;
    grid-template-rows: 28% 54% 18% !important;
  }

  #currentTime {
    font-size: 23px !important;
  }

  .info-value {
    font-size: 20px !important;
  }

  .score-value {
    font-size: 78px !important;
    top: 10px !important;
  }

  .plus {
    font-size: 31px !important;
  }

  .letter {
    font-size: 52px !important;
  }

  .btn-content {
    bottom: 13px !important;
  }

  .btn-undo {
    height: 39px !important;
    min-width: 122px !important;
    font-size: 17px !important;
  }
}

/* ==== WATCH HEXAGON BUTTON DESIGN ==== */

.btn-content {
  width: 112px !important;
  height: 78px !important;
  bottom: 12px !important;

  border: 3px solid #9d9d9d !important;
  background:
    linear-gradient(145deg, #ffffff 0%, #eeeeee 55%, #fafafa 100%) !important;

  clip-path: polygon(
    17% 0%,
    83% 0%,
    100% 50%,
    83% 100%,
    17% 100%,
    0% 50%
  ) !important;

  box-shadow:
    inset 0 0 0 5px rgba(255,255,255,0.75),
    0 3px 9px rgba(0,0,0,0.16) !important;

  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.btn-content::before {
  content: "" !important;
  position: absolute !important;
  inset: 7px !important;
  border: 2px solid #dddddd !important;
  clip-path: polygon(
    17% 0%,
    83% 0%,
    100% 50%,
    83% 100%,
    17% 100%,
    0% 50%
  ) !important;
  pointer-events: none !important;
}

.btn-content::after {
  content: "" !important;
  position: absolute !important;
  inset: -4px !important;
  pointer-events: none !important;
  clip-path: polygon(
    17% 0%,
    83% 0%,
    100% 50%,
    83% 100%,
    17% 100%,
    0% 50%
  ) !important;
  opacity: 0.9 !important;
}

.team-a .btn-content::after {
  border-left: 6px solid #2f80ed !important;
  border-top: 4px solid #2f80ed !important;
  border-bottom: 4px solid #2f80ed !important;
}

.team-b .btn-content::after {
  border-right: 6px solid #ef4444 !important;
  border-top: 4px solid #ef4444 !important;
  border-bottom: 4px solid #ef4444 !important;
}

.hex-inner {
  position: relative !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: baseline !important;
  justify-content: center !important;
  gap: 3px !important;
}

.hex-corner {
  position: absolute !important;
  z-index: 2 !important;
  width: 38px !important;
  height: 38px !important;
  opacity: 0.23 !important;
  pointer-events: none !important;
}

.hex-corner-a {
  left: 7px !important;
  bottom: 7px !important;
  border-left: 3px solid #2f80ed !important;
  border-bottom: 3px solid #2f80ed !important;
}

.hex-corner-b {
  right: 7px !important;
  bottom: 7px !important;
  border-right: 3px solid #ef4444 !important;
  border-bottom: 3px solid #ef4444 !important;
}

.plus,
.letter {
  color: #8d8d8d !important;
}

.plus {
  font-size: 31px !important;
}

.letter {
  font-size: 54px !important;
  letter-spacing: -0.07em !important;
}

.score-value {
  top: 5px !important;
  font-size: 76px !important;
}

.score-btn:active .btn-content {
  transform: translateX(-50%) scale(0.94) !important;
  background: #e9e9e9 !important;
}

@media (max-width: 450px) and (max-height: 450px) {
  .btn-content {
    width: 104px !important;
    height: 72px !important;
    bottom: 11px !important;
  }

  .score-value {
    top: 5px !important;
    font-size: 73px !important;
  }

  .plus {
    font-size: 28px !important;
  }

  .letter {
    font-size: 49px !important;
  }
}

/* ==== CLEAN MINIMAL WATCH UI ==== */

.watch-remote-body {
  margin: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  overflow: hidden !important;
  background: #fff !important;
  color: #000 !important;
}

.clean-watch {
  width: 100vw !important;
  height: 100vh !important;
  padding: 8px 14px 9px 14px !important;
  display: grid !important;
  grid-template-rows: 30% 53% 17% !important;
  background: #fff !important;
}

.clean-watch .watch-top {
  border-bottom: 3px solid #000 !important;
  padding: 0 4px 7px 4px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
}

.clean-watch .watch-time {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
  margin: 0 0 5px 0 !important;
  font-weight: 900 !important;
}

.clean-watch #currentTime {
  font-size: 25px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  color: #000 !important;
}

.clean-watch .clock-icon {
  font-size: 15px !important;
  color: #000 !important;
}

.clean-watch .watch-score-info {
  width: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
}

.clean-watch .info-item {
  min-width: 47px !important;
  text-align: center !important;
}

.clean-watch .info-label {
  font-size: 9px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  color: #555 !important;
  letter-spacing: .8px !important;
  margin-bottom: 3px !important;
}

.clean-watch .info-value {
  font-size: 21px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  color: #000 !important;
}

.clean-watch .divider {
  width: 2px !important;
  height: 32px !important;
  background: #000 !important;
  opacity: .5 !important;
  margin: 0 2px !important;
}

.clean-watch .match-id-area {
  display: flex !important;
  align-items: center !important;
  gap: 5px !important;
}

.clean-watch .match-id-area input {
  width: 48px !important;
  height: 28px !important;
  border: 3px solid #000 !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: #000 !important;
  text-align: center !important;
  font-size: 14px !important;
  font-weight: 900 !important;
  padding: 0 !important;
}

.clean-watch .btn-ok {
  width: 34px !important;
  height: 28px !important;
  border: 3px solid #000 !important;
  border-radius: 6px !important;
  background: #fff !important;
  color: #000 !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  padding: 0 !important;
}

.clean-watch .watch-score-area {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  height: auto !important;
  border-bottom: 3px solid #000 !important;
}

.clean-watch .score-btn {
  position: relative !important;
  overflow: hidden !important;
  border: 0 !important;
  background: #fff !important;
  padding: 0 !important;
}

.clean-watch .team-a {
  border-right: 3px solid #000 !important;
}

.clean-watch .team-bg-letter {
  position: absolute !important;
  inset: 0 !important;
  z-index: 1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 118px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  color: #000 !important;
  opacity: .06 !important;
  transform: translateY(-2px) !important;
  pointer-events: none !important;
}

.clean-watch .score-value {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  transform: translateY(-8px) !important;
  font-size: 104px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: -0.09em !important;
  color: #000 !important;
  opacity: 1 !important;
  pointer-events: none !important;
}

.clean-watch .tap-plus {
  position: absolute !important;
  left: 50% !important;
  bottom: 17px !important;
  z-index: 4 !important;
  transform: translateX(-50%) !important;
  font-size: 47px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  color: #d9d9d9 !important;
  pointer-events: none !important;
}

.clean-watch .watch-undo-area {
  height: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.clean-watch .btn-undo {
  min-width: 125px !important;
  height: 40px !important;
  border: 3px solid #000 !important;
  border-radius: 13px !important;
  background: #fff !important;
  color: #000 !important;
  font-size: 17px !important;
  font-weight: 900 !important;
  padding: 0 18px !important;
}

.clean-watch .score-btn:active,
.clean-watch .btn-undo:active,
.clean-watch .btn-ok:active {
  background: #eee !important;
}

@media (max-width: 450px) and (max-height: 450px) {

  .clean-watch {
    padding: 8px 14px 9px 14px !important;
    grid-template-rows: 29% 54% 17% !important;
  }

  .clean-watch #currentTime {
    font-size: 24px !important;
  }

  .clean-watch .info-value {
    font-size: 20px !important;
  }

  .clean-watch .score-value {
    font-size: 102px !important;
    transform: translateY(-8px) !important;
  }

  .clean-watch .team-bg-letter {
    font-size: 116px !important;
  }

  .clean-watch .tap-plus {
    font-size: 45px !important;
    bottom: 15px !important;
  }

  .clean-watch .btn-undo {
    height: 38px !important;
    font-size: 16px !important;
  }
}

/* ==== BIG SCOREBOARD DESIGN ==== */

.topbar {
  display: grid !important;
  grid-template-columns: 1fr auto 1fr !important;
  align-items: start !important;
  gap: 20px !important;
  padding-bottom: 18px !important;
  border-bottom: 4px solid #000 !important;
}

.topbar-left h1,
.topbar-left .title {
  font-size: 52px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
  margin: 0 0 8px 0 !important;
}

.topbar-center {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.scoreboard-clock {
  font-size: 108px !important;
  line-height: .9 !important;
  font-weight: 900 !important;
  letter-spacing: -0.06em !important;
  color: #000 !important;
  white-space: nowrap !important;
}

.topbar-right {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 12px !important;
}

.topbar-right button,
.topbar-right input {
  height: 58px !important;
  border: 4px solid #000 !important;
  background: #fff !important;
  color: #000 !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  padding: 0 22px !important;
}

.topbar-right input {
  width: 120px !important;
  text-align: center !important;
}

.team-title {
  margin-top: -10px !important;
  margin-bottom: 18px !important;
  font-size: 74px !important;
  line-height: 1 !important;
  font-weight: 900 !important;
  letter-spacing: -0.04em !important;
}

.team-panel hr,
.team-divider {
  height: 4px !important;
  border: 0 !important;
  background: #000 !important;
  margin: 0 0 24px 0 !important;
}

.score-value,
.score,
.points {
  font-size: 360px !important;
  line-height: .82 !important;
  font-weight: 900 !important;
  letter-spacing: -0.08em !important;
  margin: 10px 0 26px 0 !important;
}

.team-meta,
.score-meta {
  font-size: 42px !important;
  line-height: 1.1 !important;
  font-weight: 900 !important;
  margin-top: 12px !important;
}

.service-indicator,
.server-indicator {
  font-size: 32px !important;
  margin-top: 14px !important;
  font-weight: 900 !important;
}

.controls-row button,
.controls-row label {
  height: 78px !important;
  border: 4px solid #000 !important;
  background: #fff !important;
  color: #000 !important;
  font-size: 28px !important;
  font-weight: 900 !important;
  padding: 0 34px !important;
}

.footer-remote {
  font-size: 24px !important;
  margin-top: 14px !important;
  opacity: .9 !important;
}

@media (max-width: 1400px) {

  .scoreboard-clock {
    font-size: 82px !important;
  }

  .team-title {
    font-size: 58px !important;
  }

  .score-value,
  .score,
  .points {
    font-size: 260px !important;
  }
}