* {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
  min-height: 100%;
  background: var(--bg);
  color: var(--ink);
  overscroll-behavior: none;
}
body,
button,
select,
input {
  font-family: var(--font-body);
}
body {
  display: flex;
  justify-content: center;
  font-size: var(--font-size-16px);
}
button,
a,
select,
input {
  -webkit-tap-highlight-color: transparent;
}
button,
select {
  font: inherit;
}
a {
  color: inherit;
  text-decoration: none;
}
button {
  cursor: pointer;
}
a:not(.ui-button):focus-visible,
select:focus-visible,
input:focus-visible + .slider,
input:focus-visible + .checkbox-visual {
  color: var(--green-ink);
  outline: var(--stroke-3px) solid var(--palette-focus);
  outline-offset: var(--space-5px);
}
h1,
h2,
p {
  margin: 0;
}
h1 {
  font-size: var(--font-size-25px);
  font-weight: var(--font-weight-850);
  letter-spacing: var(--tracking-tight-0-5px);
  line-height: var(--leading-1-25);
  text-align: center;
}
h2 {
  font-size: var(--font-size-17px);
  font-weight: var(--font-weight-800);
}
.screen {
  display: none;
}
.screen.active {
  display: grid;
}
.splash {
  width: 100%;
  max-width: var(--size-560px);
  height: 100dvh;
  min-height: var(--size-500px);
  grid-template-rows: minmax(0, 1fr) auto;
  background: var(--surface);
  position: relative;
  overflow: hidden;
}
.splash-center {
  min-height: 0;
  padding: var(--space-32px) var(--space-28px) var(--space-20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-28px);
  overflow: auto;
  overscroll-behavior: none;
  scrollbar-width: thin;
}
.splash-actions {
  padding: var(--space-20px) var(--space-28px)
    max(var(--space-28px), env(safe-area-inset-bottom));
  display: flex;
  flex-direction: column;
  gap: var(--space-16px);
  background: var(--surface);
  z-index: var(--layer-1);
}
.full-width {
  width: 100%;
}
.btn {
  --button-bg: var(--surface);
  --button-border: var(--line);
  --button-ink: var(--ink);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-8px);
  --button-size: var(--size-56px);
  --button-padding: var(--space-14px) var(--space-20px);
  --button-radius: var(--radius);
  --button-font-size: var(--font-size-15px);
  --button-font-weight: var(--font-weight-850);
  --button-tracking: var(--tracking-0-6px);
  --button-leading: var(--leading-1-4);
}
.btn-green {
  --button-bg: var(--primary);
  --button-border: var(--primary-border);
  --button-ink: var(--primary-ink);
}
.btn-mint {
  --button-bg: var(--mint);
  --button-border: var(--mint-border);
  --button-ink: var(--ink);
}
.btn-red {
  --button-bg: var(--danger-bg);
  --button-border: var(--danger-border);
  --button-ink: var(--danger-ink);
}
.btn-pink {
  --button-bg: var(--pink);
  --button-border: var(--pink-border);
  --button-ink: var(--ink);
}
.btn-blue {
  --button-bg: var(--blue);
  --button-border: var(--blue-border);
  --button-ink: var(--ink);
}
[data-screen="home"] {
  grid-template-rows: auto minmax(var(--size-80px), 1fr) auto;
}
.splash-header {
  padding: var(--space-36px) var(--space-28px) 0;
  text-align: center;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: var(--space-9px);
}
.brand-logo {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-10px);
  width: max-content;
  max-width: 100%;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  box-shadow: none;
}
.header-logo {
  display: block;
  width: var(--size-74px);
  height: auto;
}
.brand {
  font-size: var(--font-size-29px);
  font-weight: var(--font-weight-900);
  letter-spacing: var(--tracking-tight-1px);
}
.author {
  font-size: var(--font-size-13px);
  color: var(--muted);
}
.hello-bot-container {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-height: 0;
  padding: 0 var(--space-16px);
  overflow: hidden;
}
.hello-bot-container apsua-mascot.hello-bot {
  display: block;
  height: min(100%, var(--size-180px));
  width: auto;
  max-width: 75%;
}
.hello-bot-container apsua-mascot.hello-bot > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.socials {
  display: flex;
  justify-content: center;
  gap: var(--space-12px);
  margin-top: var(--space-10px);
}
.socials .btn {
  --button-size: var(--size-48px);
  width: var(--size-68px);
  --button-padding: var(--space-10px);
}
.socials i {
  font-size: var(--font-size-22px);
}
.settings-center {
  gap: var(--space-30px);
}
.settings-group-wrapper {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-24px);
}
.settings-group {
  width: 100%;
}
.settings-label {
  font-size: var(--font-size-14px);
  font-weight: var(--font-weight-800);
  margin-bottom: var(--space-11px);
  color: var(--muted);
}
.segment-box,
.choice-group {
  display: flex;
  gap: var(--space-8px);
}
.segment-btn,
.choice-button {
  flex: 1;
  --button-size: var(--size-52px);
  --button-border: var(--line);
  --button-padding: var(--space-9px) var(--space-2px);
  --button-radius: var(--radius-sm);
  --button-bg: var(--surface);
  --button-ink: var(--ink);
  --button-font-size: var(--font-size-14px);
  --button-font-weight: var(--font-weight-750);
}
.segment-btn.active,
.choice-button[aria-checked="true"] {
  --button-bg: var(--soft);
  --button-ink: var(--ink);
}
.toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-20px);
  padding: var(--space-18px) 0;
  border-top: var(--stroke-2px) solid var(--line);
  font-size: var(--font-size-14px);
  font-weight: var(--font-weight-800);
}
.switch {
  position: relative;
  display: block;
  width: var(--size-54px);
  height: var(--size-44px);
  flex: none;
}
.switch input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  z-index: var(--layer-1);
  cursor: pointer;
}
.slider {
  position: absolute;
  inset: var(--space-6px) 0;
  border-radius: var(--radius-12px);
  background: var(--line);
}
.slider:before {
  content: "";
  position: absolute;
  width: var(--size-24px);
  height: var(--size-24px);
  left: var(--space-4px);
  top: var(--space-4px);
  border-radius: var(--radius-8px);
  background: var(--surface);
  transition: transform var(--t-fast);
}
.switch input:checked + .slider {
  background: var(--green);
}
.switch input:checked + .slider:before {
  transform: translateX(22px);
}
.choice-button {
  --button-font-size: var(--font-size-13px);
}
.teams-center {
  gap: var(--space-26px);
}
.current-team-card,
.winner-card,
.result-score {
  width: 100%;
  background: var(--soft);
  color: var(--ink);
  border: var(--stroke-2px) solid var(--mint-border);
  border-radius: var(--radius-lg);
  padding: var(--space-27px) var(--space-20px);
  text-align: center;
  box-shadow: 0 var(--shadow-offset-5px) 0 var(--mint-border);
}
.current-team-name {
  font-size: var(--font-size-29px);
  line-height: var(--leading-1-3);
  font-weight: var(--font-weight-900);
  overflow-wrap: anywhere;
}
.current-team-sub {
  font-size: var(--font-size-13px);
  color: var(--muted);
  margin-top: var(--space-8px);
}
.rating-title {
  align-self: flex-start;
  margin-top: var(--space-8px);
  color: var(--muted);
  font-size: var(--font-size-13px);
  letter-spacing: var(--tracking-1px);
}
.rating-list,
.final-rating {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-14px);
}
.rating-item,
.final-rating-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-16px);
  padding: var(--space-18px);
  border: var(--stroke-2px) solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  box-shadow: var(--shadow);
}
.rating-left,
.final-rating-left {
  display: flex;
  align-items: center;
  gap: var(--space-14px);
  font-size: var(--font-size-15px);
  font-weight: var(--font-weight-800);
  min-width: 0;
}
.nm,
.final-rating-name {
  overflow-wrap: anywhere;
}
.idx,
.final-rating-idx {
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.rating-score,
.final-rating-score {
  font-size: var(--font-size-23px);
  font-weight: var(--font-weight-900);
  font-variant-numeric: tabular-nums;
}
.game-screen {
  grid-template-rows: auto auto minmax(0, 1fr) auto;
}
.game-header {
  padding: var(--space-24px) var(--space-28px) var(--space-8px);
}
.timer-row,
.timer-container {
  display: flex;
  align-items: center;
  gap: var(--space-12px);
}
.timer-container {
  gap: var(--space-7px);
}
.timer-icon {
  width: var(--size-23px);
  color: var(--muted);
}
.timer-text {
  font-size: var(--font-size-25px);
  font-weight: var(--font-weight-900);
  font-variant-numeric: tabular-nums;
  min-width: var(--size-34px);
}
.progress-bar {
  height: var(--size-17px);
  background: var(--line);
  border-radius: var(--radius-20px);
  overflow: hidden;
  flex: 1;
}
.progress-fill {
  height: 100%;
  background: var(--green);
  border-radius: var(--radius-20px);
  position: relative;
  transition: width var(--motion-100ms) var(--ease-linear);
}
.progress-fill:after {
  content: "";
  position: absolute;
  height: var(--size-4px);
  inset: var(--space-3px) var(--space-8px) auto;
  background: var(--palette-progress-highlight);
  border-radius: var(--radius-6px);
}
.pause-btn-icon {
  --button-bg: none;
  display: flex;
  --button-padding: 0;
  --button-radius: var(--radius-round);
}
.game-action-top {
  padding: var(--space-16px) var(--space-28px) 0;
}
.game-action-bottom {
  padding: 0 var(--space-28px)
    max(var(--space-28px), env(safe-area-inset-bottom));
}
.game-action-top .btn,
.game-action-bottom .btn {
  --button-size: var(--size-76px);
  flex-direction: column;
  gap: var(--space-4px);
}
.btn-number {
  font-size: var(--font-size-29px);
  font-weight: var(--font-weight-900);
  line-height: var(--leading-1-15);
  max-width: 100%;
  overflow-wrap: anywhere;
}
.btn-label {
  font-size: var(--font-size-12px);
  font-weight: var(--font-weight-750);
  letter-spacing: var(--tracking-0-2px);
}
.game-center {
  padding: var(--space-24px) var(--space-36px);
  justify-content: center;
  overflow: hidden;
}
.word-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  max-height: var(--size-380px);
  min-height: var(--size-150px);
  padding: var(--space-58px) var(--space-14px);
  background: var(--raised);
  border: var(--stroke-2px) solid var(--line);
  border-radius: var(--radius-xl);
  box-shadow: 0 var(--shadow-offset-6px) 0 var(--line);
  user-select: none;
  touch-action: none;
  cursor: grab;
  transition: transform var(--t-base) var(--ease);
}
.word-card.swiping {
  transition: none;
  cursor: grabbing;
}
.word-content {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-15px);
}
.word-main {
  font-size: var(--alias-word-size);
  font-weight: var(--font-weight-900);
  line-height: var(--leading-1-2);
  text-align: center;
  text-transform: uppercase;
  overflow-wrap: anywhere;
  max-width: 100%;
  letter-spacing: var(--tracking-0-8px);
}
.word-translation {
  font-size: var(--font-size-15px);
  font-weight: var(--font-weight-650);
  color: var(--muted);
  text-align: center;
  overflow-wrap: anywhere;
}
.card-nav-arrow {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: var(--size-48px);
  display: flex;
  align-items: center;
  justify-content: center;
  --button-radius: var(--radius-sm);
  --button-bg: none;
}
.card-nav-up {
  top: var(--space-5px);
}
.card-nav-down {
  bottom: var(--space-5px);
}
.pause-play-overlay {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: var(--raised);
  border-radius: var(--radius-xl);
  z-index: var(--layer-2);
}
.game-screen.paused .word-content {
  visibility: hidden;
}
.game-screen.paused .card-nav-arrow {
  pointer-events: none;
}
.swipe-indicator {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: var(--size-72px);
  height: var(--size-72px);
  border-radius: var(--radius-round);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  z-index: var(--layer-3);
}
.swipe-indicator-up {
  color: var(--green-ink);
  background: var(--green);
}
.swipe-indicator-down {
  color: var(--negative-ink);
  background: var(--red);
}
.swipe-indicator.show {
  opacity: 1;
}
.word-card.swipe-up {
  animation: swipeUp var(--motion-400ms) var(--ease) forwards;
}
.word-card.swipe-down {
  animation: swipeDown var(--motion-400ms) var(--ease) forwards;
}
@keyframes swipeUp {
  to {
    transform: translateY(-80vh) rotate(-8deg);
    opacity: 0;
  }
}
@keyframes swipeDown {
  to {
    transform: translateY(80vh) rotate(8deg);
    opacity: 0;
  }
}
.result-center {
  gap: var(--space-26px);
}
.result-score {
  display: flex;
  flex-direction: column;
  gap: var(--space-3px);
  padding: var(--space-20px);
}
.score-value {
  font-size: var(--font-size-52px);
  line-height: var(--leading-1-15);
  font-weight: var(--font-weight-900);
}
.team-name {
  font-size: var(--font-size-14px);
  font-weight: var(--font-weight-750);
  color: var(--muted);
}
.result-score.negative {
  background: var(--red);
  border-color: var(--red-border);
  box-shadow: 0 var(--shadow-offset-5px) 0 var(--red-border);
  color: var(--negative-ink);
}
.negative .team-name {
  color: var(--negative-ink);
}
.words-list {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--space-14px);
}
.word-result-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-15px);
  padding: var(--space-17px);
  border: var(--stroke-2px) solid var(--line);
  border-radius: var(--radius);
  background: var(--surface);
  cursor: pointer;
  min-height: var(--size-74px);
}
.word-result-text {
  min-width: 0;
  overflow-wrap: anywhere;
}
.word-result-main {
  font-size: var(--font-size-16px);
  font-weight: var(--font-weight-800);
}
.word-result-translation {
  font-size: var(--font-size-13px);
  color: var(--muted);
  margin-top: var(--space-5px);
}
.word-checkbox {
  position: relative;
  width: var(--size-28px);
  height: var(--size-28px);
  flex: none;
}
.word-checkbox input {
  position: absolute;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  z-index: var(--layer-1);
  cursor: pointer;
}
.checkbox-visual {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border: var(--stroke-2px) solid var(--line);
  border-radius: var(--radius-9px);
  background: var(--raised);
}
.checkbox-visual svg {
  width: var(--size-17px);
  height: var(--size-17px);
  opacity: 0;
}
.word-checkbox input:checked + .checkbox-visual {
  background: var(--green);
  border-color: var(--green-border);
}
.word-checkbox input:checked + .checkbox-visual svg {
  opacity: 1;
}
.winner-card {
  padding: var(--space-32px) var(--space-20px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-16px);
}
.winner-label {
  font-size: var(--font-size-23px);
  font-weight: var(--font-weight-850);
  overflow-wrap: anywhere;
}
.winner-score {
  font-size: var(--font-size-68px);
  font-weight: var(--font-weight-900);
  line-height: var(--leading-1);
}
.rules-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-18px);
  width: 100%;
}
.rule-item {
  display: flex;
  gap: var(--space-16px);
  align-items: flex-start;
  padding: var(--space-20px) var(--space-18px);
  background: var(--raised);
  border: var(--stroke-2px) solid var(--line);
  border-radius: var(--radius);
}
.rule-number {
  width: var(--size-38px);
  height: var(--size-38px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex: none;
  background: var(--soft);
  color: var(--ink);
  border-radius: var(--radius-sm);
}
.rule-text {
  font-size: var(--font-size-14px);
  line-height: var(--leading-1-7);
  overflow-wrap: anywhere;
}
.rule-text strong {
  display: block;
  margin-bottom: var(--space-6px);
  font-size: var(--font-size-15px);
  font-weight: var(--font-weight-850);
}
@media (min-width: 650px) {
  body {
    align-items: center;
    padding: var(--space-24px);
    min-height: 100dvh;
  }
  .splash {
    height: min(var(--size-850px), calc(100dvh - var(--size-48px)));
    border: var(--stroke-2px) solid var(--line);
    border-radius: var(--radius-xl);
    box-shadow: 0 var(--shadow-offset-10px) 0 var(--line);
  }
  .splash-center {
    padding-top: var(--space-38px);
  }
  .splash-header {
    padding-top: var(--space-40px);
  }
}
@media (max-width: 360px) {
  .splash-center {
    padding: var(--space-26px) var(--space-20px) var(--space-16px);
  }
  .splash-actions {
    padding-left: var(--space-20px);
    padding-right: var(--space-20px);
  }
  .segment-box,
  .choice-group {
    gap: var(--space-5px);
  }
  .segment-btn,
  .choice-button {
    --button-font-size: var(--font-size-12px);
  }
  .game-header,
  .game-action-top {
    padding-left: var(--space-20px);
    padding-right: var(--space-20px);
  }
  .game-action-bottom {
    padding-left: var(--space-20px);
    padding-right: var(--space-20px);
  }
  .game-center {
    padding: var(--space-20px) var(--space-25px);
  }
  h1 {
    font-size: var(--font-size-22px);
  }
}
@media (max-height: 670px) {
  .splash-header {
    padding-top: var(--space-20px);
    gap: var(--space-5px);
  }
  .brand {
    font-size: var(--font-size-25px);
  }
  .hello-bot-container apsua-mascot.hello-bot {
    max-height: var(--size-170px);
  }
  .splash-actions {
    gap: var(--space-12px);
    padding-top: var(--space-14px);
    padding-bottom: max(var(--space-20px), env(safe-area-inset-bottom));
  }
  .btn {
    --button-size: var(--size-50px);
    --button-padding: var(--space-11px) var(--space-16px);
  }
  .game-action-top .btn,
  .game-action-bottom .btn {
    --button-size: var(--size-60px);
    --button-padding: var(--space-8px) var(--space-14px);
  }
  .game-center {
    padding-top: var(--space-17px);
    padding-bottom: var(--space-17px);
  }
  .btn-number {
    font-size: var(--font-size-25px);
  }
  .game-header {
    padding-top: var(--space-14px);
  }
  .word-main {
    --alias-word-size: var(--font-size-27px);
    font-size: var(--alias-word-size);
  }
  .settings-center {
    gap: var(--space-22px);
  }
  .settings-group-wrapper {
    gap: var(--space-20px);
  }
}
@media (prefers-reduced-motion: reduce) {
  *,
  *:before,
  *:after {
    animation: none;
    transition: none;
    scroll-behavior: auto;
  }
}

.social-icon {
  width: var(--size-24px);
  height: var(--size-24px);
  fill: currentColor;
}
.rule-number svg {
  width: var(--size-23px);
  height: var(--size-23px);
}

.screen-nav {
  position: absolute;
  left: var(--space-26px);
  top: var(--space-24px);
  z-index: var(--layer-3);
}
.back-button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-7px);
  flex: none;
  width: var(--size-44px);
  min-width: var(--size-44px);
  --button-padding: var(--space-8px) var(--space-13px);
  --button-radius: var(--radius-14px);
  --button-bg: var(--soft);
  --button-ink: var(--ink);
  --button-font-size: var(--font-size-14px);
  --button-font-weight: var(--font-weight-800);
}
.back-button svg {
  width: var(--size-24px);
  height: var(--size-24px);
}
.screen:not(.game-screen):has(.screen-nav) > .splash-center {
  padding-top: var(--space-90px);
}
.timer-row {
  gap: var(--space-10px);
}
.timer-container {
  gap: var(--space-5px);
}
.game-header {
  padding-left: var(--space-20px);
  padding-right: var(--space-20px);
}
.timer-text {
  font-size: var(--font-size-23px);
  min-width: var(--size-29px);
}
.timer-icon {
  width: var(--size-20px);
}

.game-header {
  padding: var(--space-12px) var(--space-20px) var(--space-8px);
}
[data-screen="home"] .splash-header {
  padding-top: var(--space-36px);
}
[data-screen="home"] .splash-actions {
  padding-top: var(--space-6px);
}
@media (max-height: 670px) {
  [data-screen="home"] .splash-header {
    padding-top: var(--space-24px);
  }
  .header-logo {
    width: var(--size-58px);
  }
}

.app-settings-button {
  position: absolute;
  top: var(--space-24px);
  right: var(--space-26px);
  z-index: var(--layer-3);
  width: var(--size-44px);
  --button-padding: var(--space-9px);
  --button-border: var(--mint-border);
  --button-radius: var(--radius-14px);
  --button-bg: var(--soft);
  --button-ink: var(--ink);
}
.app-settings-button svg {
  display: block;
  width: var(--size-22px);
  height: var(--size-22px);
}
.preferences-center {
  width: 100%;
}
.preferences-center > .settings-group-wrapper {
  max-width: var(--size-420px);
}

.btn {
  --button-depth: var(--space-4px);
}
.segment-btn,
.choice-button {
  --button-depth: var(--space-3px);
  --button-hover-bg: var(--hover);
}
.segment-btn.active,
.choice-button[aria-checked="true"] {
  --button-border: var(--green-border);
  --button-hover-bg: var(--soft);
}
.back-button,
.pause-btn-icon,
.card-nav-arrow,
.app-settings-button {
  --button-depth: var(--space-3px);
  --button-size: var(--size-44px);
  --button-radius: var(--radius-14px);
  --button-bg: var(--raised);
  --button-border: var(--line);
  --button-ink: var(--ink);
}
.app-settings-button {
  --button-border: var(--mint-border);
  --button-bg: var(--soft);
}
.back-button {
  --button-depth: var(--space-2px);
  --button-border: var(--line);
  --button-bg: var(--surface);
  --button-ink: var(--muted);
  --button-padding: var(--space-8px);
}
.pause-btn-icon {
  width: var(--size-44px);
  --button-padding: var(--space-2px);
  flex: none;
}
.pause-btn-icon svg {
  width: var(--size-24px);
  height: var(--size-24px);
}
.card-nav-arrow {
  width: var(--size-48px);
  --button-padding: var(--space-4px);
}
.card-nav-up {
  top: var(--space-8px);
}
.card-nav-down {
  bottom: var(--space-8px);
}
.word-card {
  min-height: var(--size-210px);
}

.card-nav-arrow {
  --button-depth: var(--space-2px);
  --button-border: transparent;
  --button-bg: transparent;
  --button-hover-bg: var(--hover);
}

/* A common compact rhythm keeps short screens complete without smaller hit areas. */
@media (max-height: 670px) {
  .screen:not(.game-screen):has(.screen-nav) > .splash-center {
    padding-top: var(--space-80px);
  }
  .settings-center {
    gap: var(--space-18px);
  }
  .settings-group-wrapper {
    gap: var(--space-14px);
  }
  .settings-label {
    margin-bottom: var(--space-8px);
  }
  .segment-btn,
  .choice-button {
    --button-size: var(--size-44px);
  }
  .toggle-row {
    padding: var(--space-8px) 0;
  }
  .teams-center,
  .finish-center {
    gap: var(--space-20px);
  }
  .current-team-card,
  .winner-card {
    padding: var(--space-20px) var(--space-16px);
  }
  .rating-item,
  .final-rating-item {
    padding: var(--space-14px);
  }
}
@media (max-height: 670px) {
  .finish-center {
    gap: var(--space-16px);
  }
  .winner-card {
    padding: var(--space-16px);
    gap: var(--space-8px);
  }
  .winner-label {
    font-size: var(--font-size-20px);
  }
  .winner-score {
    font-size: var(--font-size-48px);
  }
}

/* Sprite glyphs use the same semantic direction colors as the game actions. */
.card-nav-up {
  --button-ink: var(--primary);
}
.card-nav-down {
  --button-ink: var(--icon-danger);
}