:root {
  --size: 5;
  --gap: clamp(0.24rem, 0.9vmin, 0.52rem);
  --slide-ms: 420ms;
}

.working-memory-game {
  --hud-w: 90vw;
  --content-w: 90vw;
}

.countFill {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  opacity: 0;
  transition: opacity 120ms ease;
  background: rgba(8, 69, 52, 0.08);
}

.countFill.active {
  opacity: 1;
}

.countFill::before,
.countFill::after {
  content: "";
  position: absolute;
  left: -4%;
  width: 108%;
  pointer-events: none;
}

.countFill::before {
  top: calc(100% - var(--p, 0%));
  bottom: 0;
  background:
    radial-gradient(circle at 18% 16%, rgba(255, 255, 255, 0.22), transparent 18%),
    radial-gradient(circle at 78% 22%, rgba(255, 255, 255, 0.16), transparent 16%),
    linear-gradient(180deg, rgba(220, 255, 241, 0.84) 0%, rgba(144, 231, 197, 0.72) 45%, rgba(65, 184, 133, 0.54) 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.34);
  animation: liquidBody 3.8s ease-in-out infinite alternate;
}

.countFill::after {
  top: calc(100% - var(--p, 0%) - 1.15rem);
  height: 2.3rem;
  background:
    radial-gradient(1.8rem 1rem at 8% 90%, rgba(220, 255, 241, 0.95) 48%, transparent 52%),
    radial-gradient(2.6rem 1.1rem at 26% 100%, rgba(200, 251, 230, 0.92) 48%, transparent 52%),
    radial-gradient(2rem 1rem at 46% 88%, rgba(220, 255, 241, 0.94) 48%, transparent 52%),
    radial-gradient(2.8rem 1.2rem at 66% 98%, rgba(196, 248, 226, 0.9) 48%, transparent 52%),
    radial-gradient(2rem 1rem at 86% 86%, rgba(220, 255, 241, 0.96) 48%, transparent 52%);
  opacity: 0.92;
  animation: liquidWave 2.4s ease-in-out infinite;
}

@keyframes liquidBody {
  from {
    transform: translateY(0) scaleX(1);
  }

  to {
    transform: translateY(0.2rem) scaleX(1.015);
  }
}

@keyframes liquidWave {
  0% {
    transform: translateX(-1.2%) translateY(0);
  }

  50% {
    transform: translateX(1.1%) translateY(0.14rem);
  }

  100% {
    transform: translateX(-0.8%) translateY(-0.08rem);
  }
}

.timerChip {
  transition: opacity 150ms ease, transform 150ms ease;
}

.timerChip:not(.show) {
  opacity: 0.78;
}

.timerChip.show {
  opacity: 1;
  transform: translateY(-0.08rem);
}

.gridWrap {
  height: min(calc(100svh - var(--hud-top) - var(--hud-h) - 0.35rem), 50rem);
  padding: clamp(0.95rem, 2.4vmin, 1.2rem);
  display: grid;
  place-items: center;
}

.grid {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--gap);
  touch-action: manipulation;
  user-select: none;
}

.row {
  position: relative;
  width: 100%;
  display: grid;
  grid-template-columns: repeat(var(--size), minmax(0, 1fr));
  gap: var(--gap);
  padding: clamp(0.42rem, 1.1vmin, 0.56rem);
  border-radius: 18px;
  overflow: hidden;
  background: rgba(13, 74, 57, 0.08);
}

.cell {
  width: 100%;
  aspect-ratio: 1;
  border: 0;
  border-radius: 14px;
  background: linear-gradient(180deg, #21bb86 0%, #13a875 100%);
  color: #ffffff;
  cursor: pointer;
  display: grid;
  place-items: center;
  position: relative;
  transition: transform 90ms ease, filter 130ms ease, box-shadow 130ms ease;
  box-shadow: 0 12px 22px rgba(19, 168, 117, 0.2);
  font-size: 90%;
}

.cell:active {
  transform: scale(0.97);
  filter: brightness(0.96);
}

.cell.pressed {
  transform: scale(0.98);
  box-shadow:
    0 0 0 0.28rem rgba(255, 255, 255, 0.2),
    0 12px 22px rgba(19, 168, 117, 0.22);
  filter: brightness(1.03);
}

.cell.correct {
  box-shadow:
    0 0 0 0.3rem rgba(53, 185, 124, 0.25),
    0 12px 22px rgba(19, 168, 117, 0.22);
}

.cell.wrong {
  box-shadow:
    0 0 0 0.3rem rgba(231, 106, 114, 0.24),
    0 12px 22px rgba(19, 168, 117, 0.22);
}

.cell.reward-show::after {
  content: "\1F347";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: clamp(2.1rem, 11vmin, 3.3rem);
  filter: drop-shadow(0 0.6rem 1rem rgba(0, 0, 0, 0.22));
  animation: pop 260ms ease;
}

@keyframes pop {
  from {
    transform: scale(0.85);
    opacity: 0.2;
  }

  to {
    transform: scale(1);
    opacity: 1;
  }
}

.blocker {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: linear-gradient(90deg, rgba(7, 64, 47, 0.84), rgba(0, 132, 73, 0.92));
  backdrop-filter: blur(0.2rem);
  transform: translateX(108%);
  transition: transform var(--slide-ms) ease;
  pointer-events: none;
}

.row.blocked .blocker {
  transform: translateX(0%);
  pointer-events: auto;
}

.wait {
  position: absolute;
  inset: 0;
  z-index: 55;
  display: none;
  place-items: center;
  pointer-events: none;
}

.wait.show {
  display: grid;
}

.waitText {
  padding: 0.95rem 1.45rem;
  border-radius: 18px;
  background: rgba(7, 64, 47, 0.84);
  color: #ffffff;
  font-family: "custom_heading_font", "Comic Sans MS", dk-new-beginnings, "custom_body_font", system-ui, sans-serif;
  font-size: clamp(2rem, 7vmin, 4.2rem);
  line-height: 1;
  font-weight: 1000;
  letter-spacing: 0.04em;
  box-shadow: var(--kiosk-shadow);
  animation: waitPop 220ms ease;
}

@keyframes waitPop {
  from {
    transform: scale(0.92) rotate(-2deg);
    opacity: 0.2;
  }

  to {
    transform: scale(1) rotate(-2deg);
    opacity: 1;
  }
}

@media (max-height: 760px) {
  .gridWrap {
    padding: 0.8rem;
  }
}