/* The Nunito webfont is loaded non-blocking from index.html, so the game is
   laid out and playable immediately even if fonts.googleapis.com is slow or
   unreachable. "Nunito" falls back to sans-serif until it arrives. */

*,
*::before,
*::after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

html {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 10px;
  height: 100%;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;

  /* Nothing may ever scroll: no horizontal scrollbars, no rubber-banding. */
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  touch-action: manipulation;

  /* Size of one square hole cell. Everything on the board is derived from it,
     so the whole game scales perfectly to any screen. Overwritten at runtime
     by fitBoard() in script.js, together with --cols / --rows so the board
     is 3x2 on wide screens and 2x3 on tall (portrait) screens. */
  --u: 120px;
  --cols: 3;
  --rows: 2;

  --pad: clamp(0.6rem, 2.4vmin, 2rem);
  --ink: #3b1010;
  --accent: #ff7660;
  --cream: #fff9e2;
  --tap: 44px;

  /* Height of the floating full screen toggle. Kept as a variable so the
     space the play area reserves for it can never drift out of step with
     the button's real height. */
  --fs-h: clamp(2.75rem, 9vmin, 3.4rem);
  --sky: #ffe9b8;
  --leaf: #dff3d8;
  --card: #fffdf6;
}

body {
  padding: 0;
  margin: 0;
  width: 100%;
  font-family: "Nunito", sans-serif;
  background: var(--cream);
  color: var(--ink);
  text-align: center;
  min-height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  touch-action: manipulation;
}

/* ------------------------------------------------------------------ layout */

/* One fixed viewport-sized shell. Exactly one .screen fills it at a time, so
   there is never a gap, never a scrollbar and never a second column. */
.app {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  isolation: isolate;
}

.screen {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  padding: var(--pad);
  padding: calc(var(--pad) + env(safe-area-inset-top)) calc(var(--pad) + env(safe-area-inset-right))
    calc(var(--pad) + env(safe-area-inset-bottom)) calc(var(--pad) + env(safe-area-inset-left));
  animation: screenIn 0.28s ease both;
}

.screen[hidden] {
  display: none !important;
}

@keyframes screenIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@-webkit-keyframes screenIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.screen--menu {
  align-items: center;
  justify-content: center;
}

.screen--game {
  align-items: center;
  gap: clamp(0.3rem, 1.4vmin, 1rem);
}

.hud {
  flex: 0 0 auto;
  width: 100%;
  max-width: 64rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: clamp(0.4rem, 1.6vmin, 1.2rem);
}

.hud-side {
  display: flex;
  align-items: center;
  gap: clamp(0.4rem, 1.6vmin, 1rem);
  min-width: 0;
  overflow: hidden;
}

.hud-side--left,
.hud-side--right {
  flex: 1 1 auto;
}

.hud-side--right {
  justify-content: flex-end;
}

.hud-title {
  font-size: clamp(1.4rem, 5.2vmin, 3.2rem);
  line-height: 1.05;
  margin: 0;
  color: var(--accent);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.hud-score {
  font-size: clamp(1.2rem, 4.4vmin, 2.6rem);
  color: var(--ink);
  margin: 0;
  line-height: 1.1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.timerbar {
  flex: 0 0 auto;
  width: 100%;
  max-width: 64rem;
  height: clamp(0.5rem, 1.6vmin, 1rem);
  border-radius: 999px;
  background: #ffe5cf;
  overflow: hidden;
}

.timerbar-fill {
  display: block;
  height: 100%;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #ff7660, #ffb347, #8fd18a);
  transform-origin: left center;
  transform: scaleX(1);
}

.stage {
  flex: 1 1 auto;
  min-height: 0;
  min-width: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ------------------------------------------------------------------ header */

h1 {
  font-size: clamp(2rem, 8.5vmin, 4.5rem);
  line-height: 1.05;
  margin: 0;
  color: var(--accent);
  text-wrap: balance;
}

h2 {
  font-size: clamp(1.4rem, 5.5vmin, 3rem);
  color: var(--ink);
  margin: 0;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}

.score {
  background: #ffe5cf;
  padding: 0 clamp(0.8rem, 4vmin, 3rem);
  line-height: 1.25;
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  border-radius: 1rem;
  color: var(--ink);
  display: inline-block;
  min-width: 1.6em;
  font-variant-numeric: tabular-nums;
}

/* ----------------------------------------------------------------- buttons */

.controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: clamp(0.6rem, 2.4vmin, 1.2rem);
  max-width: 100%;
}

#start,
.btn,
.icon-btn,
.seg-btn,
.toggle {
  font-family: "Nunito", sans-serif;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  text-decoration: none;
  border: 0;
  -webkit-border-radius: 1rem;
  -moz-border-radius: 1rem;
  border-radius: 1rem;
  background: var(--ink);
  color: #fff;
  font-size: clamp(1.3rem, 4.6vmin, 2rem);
  font-weight: 700;
  line-height: 1.1;
  padding: clamp(0.7rem, 2.4vmin, 1rem) clamp(1rem, 4vmin, 2rem);
  margin: 0;
  cursor: pointer;
  position: relative;

  /* Comfortable touch target on every device, never larger than the row. */
  min-height: var(--tap);
  min-width: var(--tap);
  max-width: 100%;
  white-space: nowrap;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  -webkit-appearance: none;
  appearance: none;
  touch-action: manipulation;
  transition: opacity 0.15s ease, transform 0.1s ease, background-color 0.15s ease;
}

#start:hover,
.btn:hover,
.icon-btn:hover,
.seg-btn:hover,
.toggle:hover {
  opacity: 0.8;
}

#start:active,
.btn:active,
.icon-btn:active,
.seg-btn:active,
.toggle:active {
  transform: scale(0.96);
}

#start:focus-visible,
.btn:focus-visible,
.icon-btn:focus-visible,
.seg-btn:focus-visible,
.toggle:focus-visible {
  outline: 0.3rem solid var(--ink);
  outline-offset: 0.3rem;
}

/* Touch devices have no hover: never leave a button stuck in hover state. */
@media (hover: none) {
  #start:hover,
  .btn:hover,
  .icon-btn:hover,
  .seg-btn:hover,
  .toggle:hover {
    opacity: 1;
  }
}

/* ------------------------------------------------------------ menu buttons */

.btn {
  width: 100%;
  padding: clamp(0.65rem, 2.2vmin, 1.05rem) clamp(0.8rem, 3vmin, 1.6rem);
  font-size: clamp(1.05rem, 3.9vmin, 1.7rem);
  background: #fff;
  color: var(--ink);
  -webkit-box-shadow: 0 0.3rem 0 rgba(59, 16, 16, 0.16);
  box-shadow: 0 0.3rem 0 rgba(59, 16, 16, 0.16);
}

.btn--primary {
  background: var(--accent);
  color: #fff;
  font-size: clamp(1.2rem, 4.6vmin, 2rem);
}

.btn-ico {
  flex: 0 0 auto;
  font-size: 0.95em;
  line-height: 1;
}

.btn-text {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Icon-only square buttons used in the in-game header. */
.icon-btn {
  flex: 0 0 auto;
  width: var(--tap);
  height: var(--tap);
  min-height: var(--tap);
  padding: 0;
  font-size: clamp(1.1rem, 3.6vmin, 1.5rem);
  background: #fff;
  color: var(--ink);
  -webkit-border-radius: 50%;
  border-radius: 50%;
  -webkit-box-shadow: 0 0.25rem 0 rgba(59, 16, 16, 0.16);
  box-shadow: 0 0.25rem 0 rgba(59, 16, 16, 0.16);
}

/* --------------------------------------------------------- full screen toggle */

/* One floating control for both screens. It lives outside .screen, so it
   needs its own typography and hit area instead of borrowing .btn's. */
.fs-toggle {
  position: absolute;
  right: calc(var(--pad) + env(safe-area-inset-right));
  bottom: calc(var(--pad) + env(safe-area-inset-bottom));
  z-index: 30;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;

  margin: 0;
  padding: 0 clamp(0.7rem, 2.6vmin, 1.1rem);
  height: var(--fs-h);
  min-height: var(--tap);
  min-width: var(--tap);
  max-width: 45vw;

  font-family: "Nunito", sans-serif;
  font-size: clamp(0.95rem, 3.4vmin, 1.3rem);
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  color: #fff;
  background: var(--ink);
  border: 0;
  -webkit-border-radius: 999px;
  border-radius: 999px;
  -webkit-box-shadow: 0 0.3rem 0 rgba(59, 16, 16, 0.22);
  box-shadow: 0 0.3rem 0 rgba(59, 16, 16, 0.22);

  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
  transition: background-color 0.15s ease, opacity 0.15s ease, transform 0.1s ease;
}

/* `display` above beats the hidden attribute, so restore it explicitly. */
.fs-toggle[hidden] {
  display: none;
}

.fs-toggle:hover {
  opacity: 0.85;
}

.fs-toggle:active {
  transform: scale(0.94);
}

.fs-toggle:focus-visible {
  outline: 0.3rem solid var(--accent);
  outline-offset: 0.3rem;
}

@media (hover: none) {
  .fs-toggle:hover {
    opacity: 1;
  }
}

/* On = the game is filling the screen, so the button says "leave". */
.fs-toggle[aria-pressed="true"] {
  background: #2f7d32;
}

.fs-toggle__icon {
  display: block;
  flex: 0 0 auto;
  overflow: visible;
}

.fs-toggle__exit {
  opacity: 0;
  -webkit-transition: opacity 0.15s ease;
  transition: opacity 0.15s ease;
}

.fs-toggle__enter {
  -webkit-transition: opacity 0.15s ease;
  transition: opacity 0.15s ease;
}

.fs-toggle[aria-pressed="true"] .fs-toggle__enter {
  opacity: 0;
}

.fs-toggle[aria-pressed="true"] .fs-toggle__exit {
  opacity: 1;
}

.fs-toggle__label {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ------------------------------------------------------------- menu screen */

.menu-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
  background: linear-gradient(180deg, var(--sky) 0%, var(--cream) 46%, var(--leaf) 100%);
}

.menu-sun {
  position: absolute;
  top: 4%;
  right: 8%;
  width: clamp(3.5rem, 15vmin, 10rem);
  height: clamp(3.5rem, 15vmin, 10rem);
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 32%, #fff6c4, #ffd166 70%, #ffc247);
  opacity: 0.9;
  animation: sunPulse 6s ease-in-out infinite;
}

@keyframes sunPulse {
  0%,
  100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.06);
  }
}

.hill {
  position: absolute;
  bottom: -22%;
  width: 150%;
  height: 62%;
  -webkit-border-radius: 50% 50% 0 0;
  border-radius: 50% 50% 0 0;
}

.hill--back {
  left: -25%;
  background: #ffdfa0;
  opacity: 0.85;
}

.hill--front {
  left: 25%;
  bottom: -30%;
  background: #ffd27a;
}

/* Decorative moles bobbing in the menu background. */
.float-mole {
  position: absolute;
  bottom: 4%;
  width: clamp(3rem, 11vmin, 7rem);
  height: clamp(3rem, 11vmin, 7rem);
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1159990/mole.svg") bottom center no-repeat;
  background-size: 100% 100%;
  opacity: 0.55;
  transform-origin: 50% 100%;
  animation: moleFloat 4.2s ease-in-out infinite;
}

.float-mole--1 {
  left: 6%;
  animation-duration: 4.2s;
}

.float-mole--2 {
  left: 44%;
  bottom: 2%;
  opacity: 0.4;
  animation-duration: 5.1s;
  animation-delay: -1.2s;
}

.float-mole--3 {
  right: 6%;
  bottom: 3%;
  opacity: 0.5;
  animation-duration: 4.7s;
  animation-delay: -2.4s;
}

@keyframes moleFloat {
  0% {
    transform: scale(0.9, 1.1) translateY(18%);
    opacity: 0;
  }
  25% {
    opacity: 0.55;
  }
  60% {
    transform: scale(1.04, 0.96) translateY(0);
    opacity: 0.55;
  }
  80% {
    transform: scale(0.9, 1.12) translateY(16%);
    opacity: 0.5;
  }
  100% {
    opacity: 0;
  }
}

.menu-card {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 42rem;
  max-height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(0.35rem, 1.4vmin, 1rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}

.menu-mole {
  flex: 0 1 auto;
  min-height: 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  width: 100%;
}

.menu-mole-svg {
  display: block;
  width: clamp(4.5rem, 21vmin, 12rem);
  height: auto;
  max-height: 34vh;
  overflow: visible;
  filter: drop-shadow(0 0.5rem 0.5rem rgba(59, 16, 16, 0.18));
}

.mm-bob {
  transform-origin: 70px 140px;
  animation: mmIdle 2.4s ease-in-out infinite;
}

@keyframes mmIdle {
  0%,
  100% {
    transform: translateY(0) scale(0.94, 1.06) rotate(-2deg);
  }
  35% {
    transform: translateY(-4%) scale(1.05, 0.95) rotate(2deg);
  }
  70% {
    transform: translateY(-1%) scale(0.99, 1.01) rotate(-1deg);
  }
}

.mm-body {
  fill: #8a5a3b;
}
.mm-belly {
  fill: #d9a06b;
}
.mm-ear {
  fill: #a76b45;
}
.mm-claw {
  fill: #f3e2c7;
}
.mm-eye {
  fill: #fff8ec;
}
.mm-pupil {
  fill: #3b1010;
  transform-origin: center;
  animation: mmBlink 4.6s ease-in-out infinite;
}
.mm-brow {
  fill: none;
  stroke: #6d4429;
  stroke-width: 5;
  stroke-linecap: round;
}
.mm-snout {
  fill: #e8b98a;
}
.mm-nose {
  fill: #3b1010;
}
.mm-tooth {
  fill: #fffdf6;
}
.mm-split {
  fill: none;
  stroke: #cbb79b;
  stroke-width: 3;
  stroke-linecap: round;
}

@keyframes mmBlink {
  0%,
  92%,
  100% {
    transform: scaleY(1);
  }
  95% {
    transform: scaleY(0.12);
  }
}

.menu-title {
  font-size: clamp(2.2rem, 9.5vmin, 5rem);
  line-height: 1;
  margin: 0;
  color: var(--accent);
  text-shadow: 0 0.2rem 0 rgba(59, 16, 16, 0.1);
  text-wrap: balance;
}

.menu-sub {
  font-size: clamp(0.95rem, 3.4vmin, 1.5rem);
  line-height: 1.3;
  margin: 0;
  max-width: 30ch;
  color: #6b3b2b;
  text-wrap: balance;
}

.menu-actions {
  width: 100%;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.5rem, 1.8vmin, 1rem);
  margin-top: clamp(0.2rem, 1.2vmin, 0.8rem);
}

.menu-actions > * {
  grid-column: 1 / -1;
  width: 100%;
}

.menu-actions > #howBtn,
.menu-actions > #settingsBtn {
  grid-column: auto;
}

.menu-hint {
  margin: 0.2rem 0 0;
  font-size: clamp(0.85rem, 2.8vmin, 1.15rem);
  color: #6b3b2b;
  display: flex;
  align-items: center;
  gap: 0.6em;
  flex-wrap: wrap;
  justify-content: center;
}

.menu-hint-dot {
  opacity: 0.6;
}

/* ------------------------------------------------------- overlays / modals */

.overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--pad) + env(safe-area-inset-top)) calc(var(--pad) + env(safe-area-inset-right))
    calc(var(--pad) + env(safe-area-inset-bottom)) calc(var(--pad) + env(safe-area-inset-left));
  background: rgba(59, 16, 16, 0.5);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  animation: screenIn 0.2s ease both;
}

.overlay[hidden] {
  display: none !important;
}

.card {
  width: 100%;
  max-width: 34rem;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: var(--card);
  -webkit-border-radius: 1.6rem;
  border-radius: 1.6rem;
  -webkit-box-shadow: 0 0.8rem 2rem rgba(59, 16, 16, 0.28);
  box-shadow: 0 0.8rem 2rem rgba(59, 16, 16, 0.28);
  padding: clamp(1.1rem, 4vmin, 2.2rem);
  display: flex;
  flex-direction: column;
  gap: clamp(0.7rem, 2.2vmin, 1.2rem);
  text-align: center;
}

.card-title {
  font-size: clamp(1.4rem, 5.2vmin, 2.4rem);
  margin: 0;
  color: var(--accent);
}

.card-kicker {
  margin: 0;
  font-size: clamp(1.2rem, 4.6vmin, 2rem);
  font-weight: 700;
  color: var(--ink);
}

.card-score {
  margin: 0;
  font-size: clamp(3.4rem, 16vmin, 7rem);
  font-weight: 700;
  line-height: 1;
  color: var(--accent);
  font-variant-numeric: tabular-nums;
}

.card-note {
  margin: 0;
  font-size: clamp(1.2rem, 3.6vmin, 1.45rem);
  color: #6b3b2b;
}

.card-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(0.5rem, 1.8vmin, 1rem);
  margin-top: clamp(0.2rem, 1vmin, 0.6rem);
}

.how-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(0.5rem, 1.8vmin, 0.9rem);
  text-align: left;
  font-size: clamp(1.25rem, 3.8vmin, 1.5rem);
  line-height: 1.35;
}

.how-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6em;
  padding: clamp(0.7rem, 2.2vmin, 1rem);
  -webkit-border-radius: 0.9rem;
  border-radius: 0.9rem;
  background: #fff3e0;
}

.how-ico {
  flex: 0 0 auto;
  font-size: 1.15em;
  line-height: 1.2;
}

kbd {
  font-family: inherit;
  font-size: 0.85em;
  font-weight: 700;
  background: var(--ink);
  color: #fff;
  padding: 0.1em 0.45em;
  -webkit-border-radius: 0.4rem;
  border-radius: 0.4rem;
}

/* --------------------------------------------------------------- settings */

.set-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: clamp(0.5rem, 1.8vmin, 1rem);
  padding: clamp(0.5rem, 1.6vmin, 0.9rem);
  -webkit-border-radius: 0.9rem;
  border-radius: 0.9rem;
  background: #fff3e0;
  text-align: left;
}

.set-label {
  font-weight: 700;
  font-size: clamp(0.95rem, 3.4vmin, 1.3rem);
}

.seg {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.seg-btn {
  min-height: var(--tap);
  padding: 0.4rem 1.1rem;
  font-size: clamp(0.95rem, 3.2vmin, 1.2rem);
  background: #fff;
  color: var(--ink);
  -webkit-box-shadow: 0 0.2rem 0 rgba(59, 16, 16, 0.18);
  box-shadow: 0 0.2rem 0 rgba(59, 16, 16, 0.18);
}

.seg-btn[aria-pressed="true"] {
  background: var(--accent);
  color: #fff;
}

.toggle {
  min-height: var(--tap);
  padding: 0.35rem 1rem 0.35rem 0.4rem;
  font-size: clamp(0.95rem, 3.2vmin, 1.2rem);
  background: #fff;
  color: var(--ink);
  -webkit-box-shadow: 0 0.2rem 0 rgba(59, 16, 16, 0.18);
  box-shadow: 0 0.2rem 0 rgba(59, 16, 16, 0.18);
  -webkit-border-radius: 999px;
  border-radius: 999px;
}

.toggle-knob {
  flex: 0 0 auto;
  width: 1.7em;
  height: 1.7em;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  background: #d9c6b4;
  -webkit-transition: background-color 0.18s ease, transform 0.18s ease;
  transition: background-color 0.18s ease, transform 0.18s ease;
}

.toggle-text {
  min-width: 2.2em;
  text-align: left;
}

.toggle[aria-checked="true"] {
  background: #e6f6e4;
  color: #2f7d32;
}

.toggle[aria-checked="true"] .toggle-knob {
  background: #2f7d32;
  transform: translateX(0.2em);
}

/* ------------------------------------------------------------------- board */

.game {
  flex: 0 0 auto;
  width: calc(var(--u) * var(--cols));
  height: calc(var(--u) * var(--rows));
  max-width: 100%;
  max-height: 100%;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  flex-wrap: wrap;
  align-content: stretch;
  margin: 0 auto;

  /* The board owns every gesture: dragging a finger across it whacks moles
     and can never be turned into a scroll, zoom or native drag. */
  touch-action: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}

.hole {
  flex: 1 0 calc(100% / var(--cols));
  overflow: hidden;
  position: relative;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
}

.hole:focus-within {
  -webkit-box-shadow: none;
  box-shadow: none;
}

.hole:after {
  display: block;
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1159990/dirt.svg")
    bottom center no-repeat;
  background-size: contain;
  content: "";
  width: 100%;
  height: calc(var(--u) * 0.35);
  position: absolute;
  z-index: 2;
  bottom: calc(var(--u) * -0.15);
  pointer-events: none;
  transform-origin: 50% 100%;
}

/* ------------------------------------------------------------------- moles */

/* Every mole is a springy character: it stretches tall as it shoots out of the
   hole, squashes on impact, keeps breathing while it waits, and squeezes back
   into the dirt on the way down. transform-origin is the bottom of the mole so
   the motion always pivots from inside the hole. */
.mole {
  background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1159990/mole.svg")
    bottom center no-repeat;
  background-size: 60%;
  position: absolute;
  top: 100%;
  left: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  padding: 0;
  transform-origin: 50% 100%;
  transform: scale(0.68, 1.34);
  transition: top 0.4s ease, transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
  cursor: pointer;
  outline: none;
  touch-action: none;
  -webkit-user-drag: none;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  -moz-user-select: none;
  user-select: none;
  will-change: transform, top;
}

.hole.up .mole,
.hole.up .mole.hit,
.mole.hit {
  top: 0;
}

.hole.up .mole {
  transform: scale(1, 1);
  animation: molePop var(--pop-dur, 0.46s) cubic-bezier(0.18, 1.45, 0.4, 1) both,
    moleIdle var(--idle-dur, 1.9s) ease-in-out var(--idle-delay, 0s) infinite;
}

@keyframes molePop {
  0% {
    transform: scale(0.5, 1.75) translateY(6%);
  }
  30% {
    transform: scale(1.22, 0.78) translateY(-3%);
  }
  52% {
    transform: scale(0.9, 1.14) translateY(0);
  }
  74% {
    transform: scale(1.07, 0.94);
  }
  88% {
    transform: scale(0.98, 1.03);
  }
  100% {
    transform: scale(1, 1) translateY(0);
  }
}

/* The idle loop animates the individual transform properties (translate /
   rotate / scale) so it composes with the pop keyframes instead of fighting
   them for the transform property. */
@keyframes moleIdle {
  0%,
  100% {
    translate: 0 0;
    rotate: -1.6deg;
    scale: 1 1;
  }
  28% {
    translate: 0 -2.4%;
    rotate: 1.6deg;
    scale: 1.04 0.96;
  }
  62% {
    translate: 0 -1%;
    rotate: -0.9deg;
    scale: 0.98 1.02;
  }
}

/* Short tap feedback: the mole stretches, squashes, then drops back into the
   hole. */
.mole.hit {
  -webkit-animation: bonk 0.22s ease;
  animation: bonk 0.22s ease;
}

.hole.bonked:after {
  -webkit-animation: dirtKick 0.26s ease;
  animation: dirtKick 0.26s ease;
}

@-webkit-keyframes bonk {
  0% {
    -webkit-transform: scale(1, 1) rotate(0deg);
    transform: scale(1, 1) rotate(0deg);
  }
  32% {
    -webkit-transform: scale(0.72, 1.44) rotate(7deg) translateY(-3%);
    transform: scale(0.72, 1.44) rotate(7deg) translateY(-3%);
  }
  60% {
    -webkit-transform: scale(1.24, 0.74) rotate(-5deg);
    transform: scale(1.24, 0.74) rotate(-5deg);
  }
  82% {
    -webkit-transform: scale(0.94, 1.08) rotate(2deg);
    transform: scale(0.94, 1.08) rotate(2deg);
  }
  100% {
    -webkit-transform: scale(1, 1) rotate(0deg);
    transform: scale(1, 1) rotate(0deg);
  }
}

@keyframes bonk {
  0% {
    transform: scale(1, 1) rotate(0deg);
  }
  32% {
    transform: scale(0.72, 1.44) rotate(7deg) translateY(-3%);
  }
  60% {
    transform: scale(1.24, 0.74) rotate(-5deg);
  }
  82% {
    transform: scale(0.94, 1.08) rotate(2deg);
  }
  100% {
    transform: scale(1, 1) rotate(0deg);
  }
}

@-webkit-keyframes dirtKick {
  0% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
  35% {
    -webkit-transform: scale(1.14, 0.8) translateY(-6%);
    transform: scale(1.14, 0.8) translateY(-6%);
  }
  100% {
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
  }
}

@keyframes dirtKick {
  0% {
    transform: scale(1, 1);
  }
  35% {
    transform: scale(1.14, 0.8) translateY(-6%);
  }
  100% {
    transform: scale(1, 1);
  }
}

/* Keyboard players: tabbing to a mole pops it up so it can actually be hit.
   The indicator is a dark outline rather than a red ring, so it reads as
   "this has keyboard focus" and never looks like part of the artwork. */
.mole:focus-visible {
  top: 0;
  outline: 0.3rem solid var(--ink);
  outline-offset: -0.4rem;
  -webkit-box-shadow: inset 0 0 0 0.15rem rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 0 0 0.15rem rgba(255, 255, 255, 0.55);
  -webkit-border-radius: 0.6rem;
  border-radius: 0.6rem;
}

/* ================================================== hammer + hit effects
   Every whack plays one short, self-contained sequence. It is a single master
   timeline so the impact, the flash, the ring, the sparks and the POW tag can
   never drift apart from each other.

     MASTER TIMELINE  -  one pass = 600ms, spark stagger adds up to 35ms,
                         the pooled node is recycled at 780ms
     -----------------
       0ms    0%    hammer cocks back, fades in
      84ms   14%    swing starts
     120ms   20%    * IMPACT *  flash + ring + sparks + POW all fire here
     132ms   22%    hammer squashes through the strike
     168ms   28%    recoil
     240ms   40%    settle wobble
     360ms   60%    hammer lifts away and fades out
     600ms  100%    hammer finished (impact effects finish at 720ms)
   ---------------------------------------------------------------------- */

.fx {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 10;
  pointer-events: none;
  overflow: visible;
}

.whack {
  --fx-dur: 600ms;
  --fx-lead: 120ms;
  /* The hammer grows with the cell but is capped, so on a big screen the swing
     stays compact around the mole instead of reaching off the top of the page. */
  --ham-w: min(calc(var(--u) * 0.68), 210px);
  --ham-h: calc(var(--ham-w) * 0.5);
  --flash: min(calc(var(--u) * 0.7), 300px);
  --ring: min(calc(var(--u) * 0.52), 230px);
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  pointer-events: none;
  visibility: hidden;
}

.whack.play {
  visibility: visible;
}

/* ------------------------------------------------------------ the hammer */

.whack-hammer {
  position: absolute;
  top: calc(var(--ham-h) * -0.5);
  left: calc(var(--ham-w) * -0.2);
  width: var(--ham-w);
  height: var(--ham-h);
}

/* Near the right edge the hammer swings in from the left instead, so the
   handle can never run off the screen. */
.whack.flip .whack-hammer {
  left: calc(var(--ham-w) * -0.8);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

.whack-hammer > svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
  transform-origin: 100% 50%;
}

.whack.play .whack-hammer > svg {
  -webkit-animation: hammerSwing var(--fx-dur) linear 1 both;
  animation: hammerSwing var(--fx-dur) linear 1 both;
}

.wh-head {
  fill: #f0b27a;
}

.wh-band {
  fill: #d9834a;
}

.wh-handle {
  fill: #b9713c;
}

.wh-grip {
  fill: #6b3a1e;
}

.wh-nail {
  fill: #fff3d6;
}

@-webkit-keyframes hammerSwing {
  0% {
    opacity: 0;
    transform: rotate(42deg);
  }
  6% {
    opacity: 1;
    transform: rotate(42deg);
  }
  14% {
    transform: rotate(45deg);
  }
  17% {
    transform: rotate(27deg);
  }
  20% {
    transform: rotate(4deg);
  }
  22% {
    transform: rotate(-3deg) scale(1.07, 0.9);
  }
  28% {
    transform: rotate(17deg);
  }
  36% {
    transform: rotate(2deg);
  }
  44% {
    transform: rotate(11deg);
  }
  52% {
    transform: rotate(4deg);
  }
  62% {
    opacity: 1;
    transform: rotate(13deg) translateY(-10%);
  }
  100% {
    opacity: 0;
    transform: rotate(28deg) translateY(-34%);
  }
}

@keyframes hammerSwing {
  0% {
    opacity: 0;
    transform: rotate(42deg);
  }
  6% {
    opacity: 1;
    transform: rotate(42deg);
  }
  14% {
    transform: rotate(45deg);
  }
  17% {
    transform: rotate(27deg);
  }
  20% {
    transform: rotate(4deg);
  }
  22% {
    transform: rotate(-3deg) scale(1.07, 0.9);
  }
  28% {
    transform: rotate(17deg);
  }
  36% {
    transform: rotate(2deg);
  }
  44% {
    transform: rotate(11deg);
  }
  52% {
    transform: rotate(4deg);
  }
  62% {
    opacity: 1;
    transform: rotate(13deg) translateY(-10%);
  }
  100% {
    opacity: 0;
    transform: rotate(28deg) translateY(-34%);
  }
}

/* --------------------------------------------------------- the impact fx */

.whack-flash {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--flash);
  height: var(--flash);
  translate: -50% -50%;
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(255, 255, 255, 0.98) 0%,
    rgba(255, 238, 158, 0.9) 28%,
    rgba(255, 138, 92, 0.4) 56%,
    rgba(255, 138, 92, 0) 74%
  );
  scale: 0.12;
  opacity: 0;
}

.whack-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--ring);
  height: var(--ring);
  translate: -50% -50%;
  border-radius: 50%;
  border: calc(var(--u) * 0.022) solid rgba(255, 255, 255, 0.9);
  scale: 0.2;
  opacity: 0;
}

.whack-spark {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(var(--u) * 0.26 * var(--k));
  height: calc(var(--u) * 0.05);
  margin-top: calc(var(--u) * -0.025);
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    #fff3b0 38%,
    #ff8a5c 100%
  );
  rotate: var(--a);
  transform-origin: 0 50%;
  translate: 0 0;
  scale: 0.2 1;
  opacity: 0;
}

.whack-pow {
  position: absolute;
  top: 0;
  left: 0;
  font-size: calc(var(--u) * 0.2);
  font-weight: 900;
  line-height: 1;
  color: #ffe14d;
  white-space: nowrap;
  -webkit-text-stroke: calc(var(--u) * 0.016) var(--ink);
  paint-order: stroke fill;
  scale: 0.2;
  opacity: 0;
}

.whack.play .whack-flash {
  -webkit-animation: impactFlash var(--fx-dur) ease-out var(--fx-lead) 1 both;
  animation: impactFlash var(--fx-dur) ease-out var(--fx-lead) 1 both;
}

.whack.play .whack-ring {
  -webkit-animation: impactRing var(--fx-dur) ease-out var(--fx-lead) 1 both;
  animation: impactRing var(--fx-dur) ease-out var(--fx-lead) 1 both;
}

.whack.play .whack-spark {
  -webkit-animation: sparkFly var(--fx-dur) ease-out calc(var(--fx-lead) + var(--i) * 5ms)
    1 both;
  animation: sparkFly var(--fx-dur) ease-out calc(var(--fx-lead) + var(--i) * 5ms) 1
    both;
}

.whack.play .whack-pow {
  -webkit-animation: powPop var(--fx-dur) ease-out var(--fx-lead) 1 both;
  animation: powPop var(--fx-dur) ease-out var(--fx-lead) 1 both;
}

@-webkit-keyframes impactFlash {
  0% {
    scale: 0.12;
    opacity: 0;
  }
  6% {
    scale: 0.5;
    opacity: 1;
  }
  16% {
    scale: 1;
    opacity: 0.75;
  }
  34% {
    scale: 1.34;
    opacity: 0;
  }
  100% {
    scale: 1.34;
    opacity: 0;
  }
}

@keyframes impactFlash {
  0% {
    scale: 0.12;
    opacity: 0;
  }
  6% {
    scale: 0.5;
    opacity: 1;
  }
  16% {
    scale: 1;
    opacity: 0.75;
  }
  34% {
    scale: 1.34;
    opacity: 0;
  }
  100% {
    scale: 1.34;
    opacity: 0;
  }
}

@-webkit-keyframes impactRing {
  0% {
    scale: 0.2;
    opacity: 0;
  }
  4% {
    opacity: 0.95;
  }
  40% {
    scale: 1;
    opacity: 0;
  }
  100% {
    scale: 1;
    opacity: 0;
  }
}

@keyframes impactRing {
  0% {
    scale: 0.2;
    opacity: 0;
  }
  4% {
    opacity: 0.95;
  }
  40% {
    scale: 1;
    opacity: 0;
  }
  100% {
    scale: 1;
    opacity: 0;
  }
}

@-webkit-keyframes sparkFly {
  0% {
    translate: 0 0;
    scale: 0.2 1;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  55% {
    scale: 1 0.6;
    opacity: 1;
  }
  100% {
    translate: min(calc(var(--u) * 0.32 * var(--k)), 150px) 0;
    scale: 1 0.15;
    opacity: 0;
  }
}

@keyframes sparkFly {
  0% {
    translate: 0 0;
    scale: 0.2 1;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  55% {
    scale: 1 0.6;
    opacity: 1;
  }
  100% {
    translate: min(calc(var(--u) * 0.32 * var(--k)), 150px) 0;
    scale: 1 0.15;
    opacity: 0;
  }
}

@-webkit-keyframes powPop {
  0% {
    translate: -30% -30%;
    scale: 0.2;
    rotate: -14deg;
    opacity: 0;
  }
  14% {
    translate: -22% -62%;
    scale: 1.25;
    rotate: 6deg;
    opacity: 1;
  }
  30% {
    translate: -20% -80%;
    scale: 0.95;
    rotate: -3deg;
    opacity: 1;
  }
  46% {
    translate: -18% -98%;
    scale: 1.02;
    rotate: 1deg;
    opacity: 1;
  }
  70% {
    translate: -16% -124%;
    scale: 0.9;
    opacity: 0.8;
  }
  100% {
    translate: -14% -155%;
    scale: 0.82;
    opacity: 0;
  }
}

@keyframes powPop {
  0% {
    translate: -30% -30%;
    scale: 0.2;
    rotate: -14deg;
    opacity: 0;
  }
  14% {
    translate: -22% -62%;
    scale: 1.25;
    rotate: 6deg;
    opacity: 1;
  }
  30% {
    translate: -20% -80%;
    scale: 0.95;
    rotate: -3deg;
    opacity: 1;
  }
  46% {
    translate: -18% -98%;
    scale: 1.02;
    rotate: 1deg;
    opacity: 1;
  }
  70% {
    translate: -16% -124%;
    scale: 0.9;
    opacity: 0.8;
  }
  100% {
    translate: -14% -155%;
    scale: 0.82;
    opacity: 0;
  }
}

/* --------------------------------------------------------- full screen mode */

/* Two ways of being full screen, one set of rules.
 *
 *   :fullscreen           the browser did it for real (script.js added nothing)
 *   html.pseudo-fullscreen the CSS-only stand-in used where the Fullscreen API
 *                         is missing or was refused (iOS Safari, embedded
 *                         webviews, an expired user gesture)
 *
 * Both get the same treatment, so switching between them is invisible. */
html:fullscreen,
html:-webkit-full-screen,
html.pseudo-fullscreen,
html.pseudo-fullscreen body {
  height: 100%;
  width: 100%;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 0;
  background: var(--sky);
  overflow: hidden;
}

html:fullscreen .app,
html:-webkit-full-screen .app,
html.pseudo-fullscreen .app {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: auto;
  max-width: none;
  height: 100vh;
  height: 100dvh;
  min-height: 0;
  z-index: 2147483000;
  overflow: hidden;
}

html:fullscreen .hud,
html:fullscreen .timerbar,
html:-webkit-full-screen .hud,
html:-webkit-full-screen .timerbar,
html.pseudo-fullscreen .hud,
html.pseudo-fullscreen .timerbar {
  max-width: none;
}

/* --------------------------------------------------------------- responsive */

/* Short / landscape phones: the whole header already sits on one row, so only
   the vertical rhythm is tightened to give the board as much height as
   possible. */
@media (orientation: landscape) and (max-height: 620px) {
  .screen {
    gap: clamp(0.25rem, 1vmin, 0.6rem);
  }

  .menu-card {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas:
      "mole title"
      "mole sub"
      "mole actions"
      "mole hint";
    align-items: center;
    justify-items: start;
    text-align: left;
    column-gap: clamp(0.8rem, 3vmin, 2rem);
    row-gap: clamp(0.2rem, 1vmin, 0.6rem);
    max-width: 52rem;
  }

  .menu-mole {
    grid-area: mole;
    align-self: center;
    width: auto;
  }

  .menu-mole-svg {
    width: clamp(3.5rem, 26vmin, 9rem);
    max-height: 46vh;
  }

  .menu-title {
    grid-area: title;
    align-self: end;
  }

  .menu-sub {
    grid-area: sub;
    max-width: 34ch;
  }

  .menu-actions {
    grid-area: actions;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-top: 0.2rem;
  }

  .menu-actions > * {
    grid-column: auto;
  }

  .menu-hint {
    grid-area: hint;
    justify-content: flex-start;
  }

  .hud {
    gap: clamp(0.4rem, 1.6vmin, 0.9rem);
  }

  .hud-title {
    font-size: clamp(1.15rem, 5vmin, 2.2rem);
  }

  .hud-score {
    font-size: clamp(1.05rem, 4.6vmin, 1.9rem);
  }
}

@media (max-height: 480px) {
  .hud-title {
    font-size: clamp(1.05rem, 4.5vmin, 1.7rem);
  }

  .hud-score {
    font-size: clamp(1rem, 4.2vmin, 1.6rem);
  }

  .menu-sub {
    font-size: clamp(0.85rem, 3vmin, 1.05rem);
  }

  /* Text shrinks, but the tap target never does: the board simply gives up a
     little height, which it can easily afford. */
  #start,
  .btn,
  .icon-btn {
    font-size: clamp(1rem, 3.8vmin, 1.35rem);
    padding: 0.5rem clamp(0.8rem, 3vmin, 1.2rem);
  }
}

/* Very short landscape (e.g. a phone on its side): drop the menu decoration so
   the menu and the board both stay comfortable. */
@media (orientation: landscape) and (max-height: 430px) {
  .menu-mole-svg {
    width: clamp(3rem, 24vmin, 7rem);
    max-height: 40vh;
  }

  .card {
    padding: clamp(0.8rem, 3vmin, 1.5rem);
  }
}

/* Narrow portrait phones: the board is already 2x3 there, so let the HUD
   breathe instead of squeezing the cells. */
@media (orientation: portrait) and (max-width: 40rem) {
  .hud,
  .timerbar {
    max-width: 40rem;
  }
}

/* Very narrow phones: the toggle drops its text and stays a round icon-only
   button so it never crowds the board. The label is kept for screen readers. */
@media (max-width: 30rem) {
  html {
    --fs-h: var(--tap);
  }

  .fs-toggle {
    padding: 0;
    width: var(--tap);
    height: var(--tap);
    min-height: var(--tap);
    min-width: var(--tap);
    max-width: none;
  }

  .fs-toggle__label {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
  }
}

/* Big screens (laptops, desktops, TVs): scale the whole interface up so it
   matches the larger board instead of looking like a phone app. */
@media (min-width: 90rem) {
  html {
    --pad: 2.2rem;
    --fs-h: 5.6rem;
  }

  .hud,
  .timerbar {
    max-width: 72rem;
    gap: 1.4rem;
  }

  .hud-title {
    font-size: 3.6rem;
  }

  .hud-score {
    font-size: 3rem;
  }

  #start,
  .btn,
  .icon-btn {
    font-size: 2.2rem;
    padding: 1.1rem 2.4rem;
    min-height: 5.6rem;
    min-width: 5.6rem;
  }

  .fs-toggle {
    font-size: 2rem;
    min-height: 5.6rem;
    padding: 0 2.4rem;
  }

  .icon-btn {
    width: 5.6rem;
    height: 5.6rem;
    padding: 0;
  }

  .menu-card {
    max-width: 52rem;
  }

  .card {
    max-width: 40rem;
  }
}

/* Very large screens: keep growing so the board never looks lost in a sea of
   empty background. */
@media (min-width: 150rem) {
  html {
    --pad: 3rem;
    --fs-h: 6.4rem;
  }

  .hud,
  .timerbar {
    max-width: 90rem;
    gap: 1.8rem;
  }

  .hud-title {
    font-size: 4.6rem;
  }

  .hud-score {
    font-size: 3.8rem;
  }

  #start,
  .btn,
  .icon-btn {
    font-size: 2.6rem;
    padding: 1.3rem 2.8rem;
    min-height: 6.4rem;
    min-width: 6.4rem;
  }

  .icon-btn {
    width: 6.4rem;
    height: 6.4rem;
  }

  .fs-toggle {
    font-size: 2.4rem;
    min-height: 6.4rem;
    padding: 0 2.8rem;
  }

  .menu-card {
    max-width: 62rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mole,
  #start,
  .btn,
  .icon-btn,
  .toggle-knob,
  .fs-toggle,
  .fs-toggle__enter,
  .fs-toggle__exit {
    transition-duration: 0.01ms;
  }

  .mole.hit {
    -webkit-animation: none;
    animation: none;
  }

  .hole.up .mole,
  .float-mole,
  .mm-bob,
  .mm-pupil,
  .menu-sun,
  .hole.bonked:after {
    -webkit-animation: none;
    animation: none;
  }

  .screen,
  .overlay {
    -webkit-animation: none;
    animation: none;
  }

  /* The strike still has to read as a strike, so the flash stays - it just
     stops moving. The hammer, sparks, ring and POW tag are dropped. */
  .whack-hammer,
  .whack-ring,
  .whack-spark,
  .whack-pow {
    display: none;
  }
}

/* Same switch, driven by Settings instead of the OS. */
html.reduce-motion .mole {
  transition-duration: 0.01ms;
  transform: none;
  will-change: top;
}

html.reduce-motion .mole.hit,
html.reduce-motion .hole.up .mole,
html.reduce-motion .hole.bonked:after,
html.reduce-motion .float-mole,
html.reduce-motion .mm-bob,
html.reduce-motion .mm-pupil,
html.reduce-motion .menu-sun,
html.reduce-motion .screen,
html.reduce-motion .overlay {
  -webkit-animation: none;
  animation: none;
}

html.reduce-motion .whack-hammer,
html.reduce-motion .whack-ring,
html.reduce-motion .whack-spark,
html.reduce-motion .whack-pow {
  display: none;
}