@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 400 900;
  font-display: swap;
  src: url("/fonts/montserrat-latin.woff2") format("woff2");
}

:root {
  color-scheme: light;
  --yellow: #ffe600;
  --black: #111111;
  --white: #ffffff;
  --muted-yellow: #f3d900;
  --shadow: 0 7px 0 var(--black);
  --font-ui: "Montserrat", Arial, Helvetica, sans-serif;
  --font-display: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif;
  font-family: var(--font-ui);
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  min-height: 100dvh;
  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
  background: var(--yellow);
  color: var(--black);
  font-family: var(--font-ui);
  overflow-x: hidden;
}

#app {
  min-height: 100dvh;
}

button,
select,
input {
  font: inherit;
}

button,
a {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
  touch-action: manipulation;
  transition: scale 80ms ease, translate 80ms ease, filter 80ms ease;
}

button:active:not(:disabled),
a:active {
  filter: brightness(.94);
  scale: .98;
  translate: 0 2px;
}

.start-screen,
.ready-screen,
.play-screen {
  -webkit-user-select: none;
  user-select: none;
}

button:focus-visible,
a:focus-visible,
select:focus-visible,
input:focus-visible {
  outline: 4px solid var(--white);
  outline-offset: 3px;
}

.screen {
  position: relative;
  width: min(100%, 560px);
  min-height: 100dvh;
  margin: 0 auto;
  padding: clamp(20px, 5vw, 34px);
}

.start-screen,
.ready-screen {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
  isolation: isolate;
}

.start-screen::before,
.ready-screen::before {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(circle at 15% 20%, rgb(255 255 255 / 35%) 0 2px, transparent 3px),
    repeating-linear-gradient(118deg, transparent 0 16px, rgb(255 255 255 / 12%) 17px 18px),
    var(--yellow);
  content: "";
}

.start-screen::before {
  animation: stadium-recoil .55s cubic-bezier(.2, .8, .3, 1) .26s both;
}

.brand {
  display: flex;
  position: relative;
  z-index: 2;
  align-items: stretch;
  align-self: center;
  transform: rotate(-1deg);
  color: var(--yellow);
  font-family: var(--font-display);
  letter-spacing: .04em;
  text-transform: uppercase;
}

.brand-talk,
.brand-describe {
  display: grid;
  place-items: center;
  background: var(--black);
}

.brand-talk {
  width: clamp(170px, 44vw, 210px);
}

.brand-talk-logo {
  display: block;
  width: 100%;
  height: auto;
}

.brand-describe {
  position: relative;
  min-width: 76px;
  grid-template-rows: auto auto;
  gap: 4px;
  border-left: 2px solid var(--yellow);
  padding: 7px 11px 8px;
  font-size: .75rem;
  line-height: 1;
}

.brand-describe > span {
  display: block;
  line-height: 1;
}

.brand-describe strong {
  display: block;
  font-size: 2.25rem;
  line-height: .75;
}

.opening-seven-stage {
  display: grid;
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  margin: clamp(10px, 2dvh, 18px) 0 clamp(12px, 2dvh, 18px);
  place-items: end center;
}

.opening-seven {
  display: block;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  min-height: 0;
  overflow: visible;
  filter: drop-shadow(12px 15px 0 rgb(17 17 17 / 14%));
  transform-origin: 50% 100%;
  animation: stadium-slam .72s cubic-bezier(.16, .84, .28, 1.3) both;
}

.opening-seven-shape,
.opening-seven-glint {
  font-family: var(--font-display);
  font-size: 740px;
  font-weight: 900;
}

.opening-seven-shape {
  fill: var(--white);
  stroke: var(--black);
  stroke-linejoin: miter;
  stroke-width: 12px;
  paint-order: stroke fill;
}

.opening-seven-glint {
  fill: none;
  stroke: var(--yellow);
  stroke-dasharray: 130 2400;
  stroke-linecap: round;
  stroke-width: 12px;
  opacity: 0;
  filter: drop-shadow(0 0 5px var(--white));
  animation: stadium-border-glint .62s linear .46s both;
}

.opening-seven-sparkle {
  fill: var(--white);
  stroke: var(--black);
  stroke-width: 4px;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  animation: stadium-sparkle .48s cubic-bezier(.15, .85, .25, 1.45) .92s both;
}

.start-actions {
  display: grid;
  z-index: 2;
  gap: 13px;
}

.button {
  min-height: 58px;
  border: 4px solid var(--black);
  border-radius: 11px;
  padding: 12px 18px;
  font-family: var(--font-ui);
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: .045em;
  text-transform: uppercase;
  cursor: pointer;
}

.button-primary {
  background: var(--black);
  color: var(--yellow);
  box-shadow: 0 5px 0 rgb(255 255 255 / 80%);
}

.button-primary:active:not(:disabled) {
  box-shadow: 0 2px 0 rgb(255 255 255 / 80%);
}

.button-secondary {
  background: var(--white);
  color: var(--black);
}

.button:disabled {
  cursor: wait;
  opacity: .65;
}

.text-button,
.more-games,
.preview-button,
.icon-button {
  min-height: 44px;
  border: 0;
  background: transparent;
  color: var(--black);
  font-family: var(--font-ui);
  font-weight: 800;
  letter-spacing: .04em;
  text-align: center;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-transform: uppercase;
  cursor: pointer;
}

.more-games {
  display: grid;
  place-items: center;
  font-size: .85rem;
}

.notice {
  min-height: 1.4em;
  margin: 10px 0 0;
  font-weight: 700;
  text-align: center;
}

.content-screen {
  padding-inline: 14px;
}

.content-header {
  display: grid;
  grid-template-columns: 74px 1fr 74px;
  align-items: center;
  gap: 8px;
  margin-bottom: 16px;
}

.content-header h1 {
  grid-column: 2;
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2rem, 10vw, 3rem);
  letter-spacing: .03em;
  text-align: center;
  text-transform: uppercase;
}

.icon-button {
  display: flex;
  align-items: center;
  gap: 5px;
  text-decoration: none;
}

.content-card {
  border: 4px solid var(--black);
  border-radius: 20px;
  padding: 20px;
  background: var(--white);
  box-shadow: var(--shadow);
}

.rules-section + .rules-section {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 3px solid var(--yellow);
}

.rules-section h2 {
  margin: 0 0 8px;
  font-family: var(--font-display);
  font-size: 1.55rem;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.rules-section p {
  margin: 8px 0;
  font-size: 1rem;
  line-height: 1.4;
}

.settings-card {
  display: grid;
  gap: 12px;
}

.setting-row {
  display: flex;
  min-height: 52px;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  border-bottom: 2px solid var(--black);
  font-weight: 800;
}

.setting-row input {
  width: 28px;
  height: 28px;
  accent-color: var(--black);
}

.setting-row select {
  max-width: 58%;
  border: 2px solid var(--black);
  border-radius: 6px;
  padding: 8px;
  background: var(--yellow);
}

.preview-button {
  justify-self: start;
  font-family: var(--font-ui);
  font-size: .9rem;
  text-transform: none;
}

.credits {
  margin-top: 10px;
  border-top: 3px solid var(--black);
  padding-top: 15px;
}

.credits summary {
  min-height: 44px;
  font-family: var(--font-display);
  font-size: 1.4rem;
  cursor: pointer;
}

.credits li {
  margin-block: 12px;
  line-height: 1.45;
}

.credits a {
  color: var(--black);
  font-weight: 700;
}

.build-info {
  display: grid;
  margin-top: 10px;
  border-top: 1px solid color-mix(in srgb, var(--black) 35%, transparent);
  padding-top: 16px;
  color: color-mix(in srgb, var(--black) 62%, transparent);
  font-size: .78rem;
  line-height: 1.35;
}

.build-info strong {
  font-size: .9rem;
}

.ready-launch {
  display: grid;
  width: min(100%, 430px);
  margin: auto;
  padding: 0;
  border: 0;
  gap: clamp(12px, 2vh, 18px);
  place-items: center;
  background: transparent;
  color: var(--black);
  cursor: pointer;
}

.ready-launch:disabled {
  cursor: wait;
}

.ready-copy {
  display: grid;
  gap: clamp(12px, 2.2vh, 20px);
  margin: 0;
  place-items: center;
  font-family: var(--font-display);
  line-height: 1;
}

.ready-copy span {
  font-size: 2rem;
}

.ready-copy strong {
  font-size: clamp(8.5rem, 40vw, 15rem);
  line-height: .82;
}

.ready-copy small {
  font-size: 1.25rem;
  letter-spacing: .2em;
  line-height: 1;
}

.ready-cta {
  display: grid;
  width: min(82%, 340px);
  min-height: 58px;
  padding: 12px 18px;
  border: 4px solid var(--black);
  border-radius: 12px;
  place-items: center;
  background: var(--black);
  box-shadow: 0 6px 0 rgb(255 255 255 / 80%);
  color: var(--yellow);
  font-family: var(--font-ui);
  font-size: 1.3rem;
  font-weight: 900;
  letter-spacing: .045em;
  line-height: 1;
  transition: transform 100ms ease, box-shadow 100ms ease;
}

.ready-launch:not(:disabled) .ready-cta {
  animation: ready-nudge 12s ease-in-out 10s infinite;
}

.motion-reduced .ready-launch .ready-cta {
  animation: none;
}

.ready-launch:active:not(:disabled) .ready-cta {
  transform: translateY(3px);
  box-shadow: 0 3px 0 rgb(255 255 255 / 80%);
}

.ready-nav {
  display: flex;
  justify-content: center;
  gap: 22px;
  margin-top: 12px;
}

.play-screen {
  display: grid;
  grid-template-rows: auto auto auto minmax(0, 1fr) auto;
  gap: 8px;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 28%, rgb(255 255 255 / 42%) 0 2px, transparent 3px),
    repeating-linear-gradient(112deg, transparent 0 22px, rgb(255 255 255 / 13%) 23px 24px),
    var(--yellow);
}

.play-header {
  display: flex;
  z-index: 5;
  grid-row: 1;
  align-items: center;
  justify-content: space-between;
}

.play-header .brand {
  margin: 0;
  transform: scale(.72) rotate(-1deg);
  transform-origin: left center;
}

.mute-button,
.undo-button {
  display: grid;
  width: 48px;
  min-width: 48px;
  height: 48px;
  border: 3px solid var(--black);
  border-radius: 50%;
  place-items: center;
  background: var(--white);
  color: var(--black);
  box-shadow: 0 3px 0 var(--black);
  font-size: 1.7rem;
  font-weight: 900;
  cursor: pointer;
}

.timer {
  display: grid;
  z-index: 5;
  grid-row: 2;
  grid-template-columns: 1fr 38px;
  align-items: center;
  gap: 10px;
}

.timer-track {
  height: 10px;
  overflow: hidden;
  border: 2px solid var(--black);
  border-radius: 99px;
  background: rgb(255 255 255 / 75%);
}

.timer-track span {
  display: block;
  width: calc(var(--timer-progress) * 100%);
  height: 100%;
  transform-origin: left;
  background: var(--black);
}

.timer[data-timer-tone="warning"] .timer-track span,
.timer[data-timer-tone="warning"] strong {
  color: #7a4a00;
  background-color: #c77700;
}

.timer[data-timer-tone="danger"] .timer-track span,
.timer[data-timer-tone="danger"] strong {
  color: #9e0011;
  background-color: #d8001d;
}

.timer strong {
  background: transparent !important;
  color: var(--black);
  font-family: var(--font-ui);
  font-size: 1.35rem;
  font-weight: 900;
  text-align: right;
}

.timer.countdown-tick strong {
  animation: countdown-punch .46s cubic-bezier(.16, .84, .3, 1.45);
}

.timer[data-countdown-stage="final"].countdown-tick strong {
  animation-name: countdown-punch-final;
  animation-duration: .54s;
}

.timer.countdown-tick .timer-track {
  animation: timer-flash .42s ease-out;
}

.score-tools {
  grid-row: 3;
  display: flex;
  z-index: 6;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
}

.score-badge {
  display: flex;
  align-items: baseline;
  gap: 7px;
  border: 2px solid var(--black);
  border-radius: 99px;
  padding: 6px 12px;
  background: rgb(255 255 255 / 82%);
  font-family: var(--font-ui);
  font-weight: 900;
}

.score-badge span {
  font-size: 1.35rem;
}

.score-badge small {
  font-family: var(--font-ui);
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.undo-button {
  width: 44px;
  min-width: 44px;
  height: 44px;
}

.undo-button:disabled {
  cursor: default;
  opacity: .35;
  box-shadow: none;
}

.seven-button {
  display: grid;
  position: relative;
  z-index: 1;
  grid-row: 4;
  width: min(100%, 430px);
  min-height: 0;
  margin: -54px auto -18px;
  border: 0;
  padding: 0;
  place-items: center;
  background: transparent;
  cursor: pointer;
}

.seven-button:disabled {
  cursor: default;
}

.seven-button:active:not(:disabled) {
  scale: .985;
}

.score-seven {
  width: 100%;
  height: 100%;
  min-height: 390px;
  overflow: visible;
  filter: drop-shadow(10px 13px 0 rgb(17 17 17 / 14%));
}

.score-seven [data-fill-shape] {
  transition: fill .2s ease;
}

.goal-button {
  position: relative;
  z-index: 8;
  width: 100%;
  min-height: 68px;
  overflow: visible;
  padding-inline: 84px;
  grid-row: 5;
}

.goal-button-label {
  position: relative;
  z-index: 1;
}

.score-football {
  position: absolute;
  top: -31px;
  left: clamp(10px, 4vw, 20px);
  width: clamp(104px, 24vw, 116px);
  height: auto;
  pointer-events: none;
  filter: drop-shadow(5px 6px 0 rgb(255 230 0 / 42%));
  transform: rotate(-8deg);
  transform-origin: 50% 68%;
}

.result-banner {
  position: absolute;
  top: 44%;
  left: 50%;
  z-index: 7;
  width: calc(100% - 38px);
  transform: translate(-50%, -50%) rotate(-2deg);
  border: 5px solid var(--black);
  padding: 16px 10px;
  background: var(--white);
  box-shadow: 9px 9px 0 var(--black);
  text-align: center;
  text-transform: uppercase;
}

.play-screen[data-phase="timeUp"] .result-banner {
  top: 49%;
}

.play-screen[data-phase="perfect7"] .result-banner {
  top: 52%;
}

.result-banner h1 {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(3rem, 15vw, 5.2rem);
  letter-spacing: .02em;
  line-height: .9;
}

.result-banner p {
  margin: 9px 0 0;
  font-weight: 900;
  letter-spacing: .08em;
}

.confetti {
  position: absolute;
  inset: 0;
  z-index: 6;
  overflow: hidden;
  pointer-events: none;
}

.confetti-burst-field {
  position: absolute;
  inset: 0;
}

.confetti-piece {
  position: absolute;
  top: 50%;
  left: 50%;
  width: clamp(8px, 2.1vw, 13px);
  height: clamp(15px, 3.5vw, 22px);
  border: 2px solid var(--black);
  background: var(--white);
  opacity: 0;
  animation: confetti-burst var(--duration) cubic-bezier(.12, .62, .25, 1) var(--delay) both;
}

.confetti-piece:nth-child(3n) {
  border-radius: 50%;
  background: var(--black);
}

.confetti-piece:nth-child(4n) {
  width: clamp(14px, 3.2vw, 21px);
  height: clamp(8px, 1.9vw, 12px);
  background: var(--black);
}

.hype-low .score-seven {
  animation: score-low .26s cubic-bezier(.2, .8, .3, 1);
}

.hype-mid .score-seven {
  animation: score-mid .34s cubic-bezier(.18, .84, .26, 1.35);
}

.hype-high .score-seven {
  animation: score-high .42s cubic-bezier(.15, .86, .2, 1.4);
}

.hype-perfect .score-seven {
  animation: score-perfect .62s cubic-bezier(.12, .8, .2, 1.4);
}

.hype-low .score-football,
.hype-mid .score-football,
.hype-high .score-football {
  animation: score-ball-kick .48s cubic-bezier(.18, .84, .24, 1.35);
}

.retract .score-seven {
  animation: score-retract .24s ease-out;
}

.motion-reduced .score-seven,
.motion-reduced .score-football,
.motion-reduced .confetti,
.motion-reduced .result-action,
.motion-reduced .timer strong,
.motion-reduced .timer-track,
.motion-reduced .opening-seven,
.motion-reduced.start-screen::before {
  animation: none;
}

.motion-reduced .opening-seven-glint,
.motion-reduced .opening-seven-sparkle {
  display: none;
}

.result-action {
  animation: ready-nudge 12s ease-in-out 10s infinite;
}

.motion-reduced .confetti {
  display: none;
}

@keyframes score-ball-kick {
  0% {
    transform: translate(0, 0) rotate(-8deg) scale(1);
  }
  36% {
    transform: translate(-8px, -22px) rotate(24deg) scale(1.12);
  }
  68% {
    transform: translate(3px, 4px) rotate(-14deg) scale(.97);
  }
  100% {
    transform: translate(0, 0) rotate(-8deg) scale(1);
  }
}

@keyframes stadium-slam {
  0% {
    opacity: 0;
    filter: drop-shadow(3px 4px 0 rgb(17 17 17 / 8%));
    transform: translate3d(0, 18%, 0) scale(.82) rotate(-3deg);
  }
  54% {
    opacity: 1;
    filter: drop-shadow(18px 23px 0 rgb(17 17 17 / 18%));
    transform: translate3d(0, -3%, 0) scale(1.06) rotate(1.2deg);
  }
  74% {
    filter: drop-shadow(9px 11px 0 rgb(17 17 17 / 12%));
    transform: translate3d(0, 1.2%, 0) scale(.97) rotate(-.4deg);
  }
  100% {
    opacity: 1;
    filter: drop-shadow(12px 15px 0 rgb(17 17 17 / 14%));
    transform: none;
  }
}

@keyframes stadium-border-glint {
  0% { opacity: 0; stroke-dashoffset: 200; }
  12%, 82% { opacity: 1; }
  100% { opacity: 0; stroke-dashoffset: -1750; }
}

@keyframes stadium-sparkle {
  0% { opacity: 0; transform: scale(0) rotate(-20deg); }
  55% { opacity: 1; transform: scale(1.12) rotate(8deg); }
  100% { opacity: 0; transform: scale(.35) rotate(20deg); }
}

@keyframes stadium-recoil {
  0%, 28% { transform: none; }
  58% { transform: translate3d(0, 3px, 0) scale(1.012); }
  100% { transform: none; }
}

@keyframes score-low {
  0% { transform: scale(.97) translateY(8px); }
  65% { transform: scale(1.035) translateY(-4px); }
  100% { transform: none; }
}

@keyframes score-mid {
  0% { transform: scale(.95) translateY(13px) rotate(-1deg); }
  60% { transform: scale(1.055) translateY(-8px) rotate(1deg); }
  100% { transform: none; }
}

@keyframes score-high {
  0% { transform: scale(.92) translateY(18px) rotate(-2deg); }
  58% { transform: scale(1.075) translateY(-13px) rotate(1.4deg); }
  100% { transform: none; }
}

@keyframes score-perfect {
  0% { transform: scale(.88) translateY(26px) rotate(-2.5deg); }
  45% { transform: scale(1.11) translateY(-18px) rotate(2deg); }
  72% { transform: scale(.98) rotate(-.5deg); }
  100% { transform: none; }
}

@keyframes score-retract {
  0% { transform: none; }
  45% { transform: scale(.94) translateY(10px); }
  100% { transform: none; }
}

@keyframes confetti-burst {
  0% {
    opacity: 0;
    transform: translate3d(-50%, -50%, 0) scale(.25) rotate(0deg);
  }
  10% {
    opacity: 1;
    transform: translate3d(calc(-50% + var(--pop-x)), calc(-50% + var(--pop-y)), 0) scale(1.35) rotate(35deg);
  }
  52% {
    opacity: 1;
    transform: translate3d(calc(-50% + var(--mid-x)), calc(-50% + var(--mid-y)), 0) scale(1.08) rotate(var(--mid-spin));
  }
  100% {
    opacity: 0;
    transform: translate3d(calc(-50% + var(--burst-x)), calc(-50% + var(--burst-y)), 0) scale(.55) rotate(var(--spin));
  }
}

@keyframes countdown-punch {
  0% { transform: scale(.82) translateY(3px); opacity: .55; }
  58% { transform: scale(1.24) rotate(-3deg); opacity: 1; }
  100% { transform: none; opacity: 1; }
}

@keyframes countdown-punch-final {
  0% { transform: scale(.72) translateY(5px); opacity: .45; }
  52% { transform: scale(1.42) rotate(4deg); opacity: 1; }
  76% { transform: scale(1.12) rotate(-2deg); }
  100% { transform: none; opacity: 1; }
}

@keyframes timer-flash {
  0%, 100% { filter: none; box-shadow: none; }
  42% { filter: brightness(1.3) contrast(1.5); box-shadow: 0 0 0 4px rgb(255 255 255 / 90%); }
}

@keyframes ready-nudge {
  0%, 6%, 100% { translate: 0; rotate: 0deg; scale: 1; }
  1% { translate: -5px 0; rotate: -1.4deg; scale: 1.025; }
  2% { translate: 5px 0; rotate: 1.4deg; scale: 1.025; }
  3% { translate: -4px 0; rotate: -1deg; scale: 1.02; }
  4% { translate: 4px 0; rotate: 1deg; scale: 1.02; }
  5% { translate: 0; rotate: 0deg; scale: 1; }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  .confetti {
    display: none;
  }

  .opening-seven,
  .start-screen::before {
    animation: none !important;
  }

  .opening-seven-glint,
  .opening-seven-sparkle {
    display: none;
  }
}

@media (orientation: landscape) and (min-aspect-ratio: 4 / 3) and (max-height: 760px) {
  .play-screen {
    width: min(100%, 960px);
    height: 100dvh;
    min-height: 0;
    grid-template-columns: minmax(260px, 1fr) minmax(300px, 1fr);
    grid-template-rows: auto auto 1fr auto;
    column-gap: 24px;
    padding-block: 14px;
  }

  .play-header,
  .timer,
  .score-tools {
    grid-column: 1;
  }

  .seven-button {
    width: 100%;
    height: 100%;
    min-height: 0;
    contain: size;
    grid-row: 1 / 5;
    grid-column: 2;
    margin: -28px 0 -22px;
  }

  .score-seven {
    min-height: 0;
  }

  .goal-button {
    grid-row: 4;
    grid-column: 1;
  }

  .score-football {
    top: -50px;
  }

  .result-banner {
    left: 73%;
    width: 45%;
  }
}

@media (orientation: landscape) and (min-aspect-ratio: 4 / 3) and (max-height: 520px) {
  .screen {
    min-height: 100vh;
    padding-block: 12px;
  }

  .opening-seven-stage {
    margin-block: 6px;
  }

  .brand-talk,
  .brand-describe {
    min-height: 48px;
  }

  .play-screen {
    height: 100dvh;
    min-height: 0;
    grid-template-columns: 1fr minmax(260px, 42vw);
    grid-template-rows: auto auto 1fr auto;
  }

  .play-header,
  .timer,
  .score-tools {
    grid-column: 1;
  }

  .seven-button {
    grid-row: 1 / 5;
    grid-column: 2;
    margin: -45px 0 -30px;
  }

  .goal-button {
    grid-column: 1;
  }
}