/* Bundled OFL fonts: see /fonts/CREDITS.md. */
@font-face {
  font-family: 'Russo One';
  src: url('/fonts/RussoOne-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Dela Gothic One';
  src: url('/fonts/DelaGothicOne-Regular.ttf') format('truetype');
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
:root {
  --font-display: 'Russo One', 'Dela Gothic One', sans-serif;
  --font-jp: 'Dela Gothic One', sans-serif;
}
.mode-cards button em,
.mode-cards button small,
.mallet strong,
.stage strong {
  font-weight: 400;
}
.logo,
.score,
.arena-top,
.special,
.goal-burst span,
.cutin strong,
.overlay h2,
.mallet-dialog h2 {
  font-family: var(--font-display);
  font-weight: 400;
}
body:not(.playing) .title-lockup h1 {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(80px, 9vw, 136px);
  letter-spacing: -0.055em;
  line-height: 1;
}
.mode-cards button span,
.section-title > h2,
#arcade-intro h2,
.play-panel h2,
body:not(.playing) .primary,
.rule-options strong {
  font-family: var(--font-jp);
  font-weight: 400;
}
.mode-cards button em {
  font-size: clamp(25px, 3vw, 36px);
  font-style: normal;
  letter-spacing: -0.025em;
}
body:not(.playing) .mallet strong {
  font-size: 17px;
  letter-spacing: 0;
}
body:not(.playing) .stage strong {
  font-size: 17px;
  letter-spacing: 0;
}
.cutin strong {
  font-size: clamp(24px, 5vw, 42px);
  letter-spacing: -0.035em;
  line-height: 1.25;
  overflow-wrap: anywhere;
}
body:not(.playing) .rule-adjust input {
  font-weight: 400;
  font-size: 34px;
  font-variant-numeric: tabular-nums;
}
#match-clock,
.score {
  font-variant-numeric: tabular-nums;
}
.mallet-dialog h2 {
  letter-spacing: -0.025em;
  overflow-wrap: anywhere;
}
@media (hover: hover) and (pointer: fine) {
  .playing .controls {
    width: 148px;
  }
  .playing .special span {
    max-width: 116px;
  }
}
@media (max-width: 700px) {
  body:not(.playing) .title-lockup h1 {
    font-size: clamp(66px, 19vw, 100px);
  }
  .logo {
    font-size: 30px;
  }
  .mode-cards button em {
    font-size: clamp(23px, 6.4vw, 29px);
  }
  .mode-cards button span {
    font-size: 15px;
  }
  body:not(.playing) .mallet strong {
    font-size: clamp(10px, 3vw, 15px);
  }
  body:not(.playing) .stage strong {
    font-size: 14px;
  }
  #arcade-route span {
    font-size: 13px;
  }
  .cutin strong,
  .cutin.opponent strong {
    font-size: clamp(22px, 6vw, 30px);
  }
  .score {
    letter-spacing: 0;
  }
}