/* ===================================================================
   EGGO "MORE MORNING" CONNECTIONS — the playable game (by Leila Garrison)
   Used by partials/embeds/eggo-connections.njk on the Eggo campaign page.

   Every rule is scoped to .eggo-* classes, so nothing here can touch the
   rest of the site and the site's styles cannot leak into the game
   (each control resets its own box, font and spacing).

   The game board is laid over the blank phone picture with percentages,
   so it lines up at any width. Below 440px the empty margin around the
   phone is cropped so the tiles stay big enough to tap.
   =================================================================== */
.eggo-game-crop {
  container-name: eggo-crop;
  container-type: inline-size;
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
}

.eggo-game-crop *,
.eggo-game-crop *::before,
.eggo-game-crop *::after {
  box-sizing: border-box;
}

.eggo-game {
  position: relative;
  width: 100%;
  /* the phone picture has empty space above and below it; tuck that away */
  margin: -17% 0;
}

.eggo-game > img {
  width: 100%;
  max-width: none;
  height: auto;
  object-fit: contain;
  display: block;
  margin: 0;
}

.eggo-game-board {
  position: absolute;
  left: 22.13%;
  top: 32.92%;
  width: 55.74%;
  container-type: inline-size;
  font-family: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;
  line-height: 1.2;
  color: #181A18;
}

.eggo-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: calc((100cqw - 7.8cqw) / 4);
  gap: 2.6cqw;
}

.eggo-tile {
  box-shadow: none;
  letter-spacing: normal;
  min-width: 0;
  min-height: 0;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
  margin: 0;
  border: 0;
  padding: 1cqw;
  border-radius: 1.7cqw;
  background: #F8C85E;
  color: #DA291C;
  font-family: inherit;
  font-weight: 800;
  font-size: 3.6cqw;
  line-height: 1.15;
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
}

.eggo-tile.is-long {
  font-size: 3.2cqw;
}

.eggo-tile.is-longer {
  font-size: 2.8cqw;
}

.eggo-tile[aria-pressed="true"] {
  background: #DA291C;
  color: #F8C85E;
}

.eggo-tile:active {
  transform: scale(0.96);
}

.eggo-tile.is-jump {
  animation: eggo-jump 0.3s ease;
}

.eggo-tile.is-shake {
  animation: eggo-shake 0.4s ease;
}

.eggo-solved {
  grid-column: 1 / -1;
  border-radius: 1.7cqw;
  padding: 0 3cqw;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.eggo-solved.is-new {
  animation: eggo-pop 0.35s ease-out;
}

.eggo-solved-name {
  font-weight: 800;
  font-size: 3.8cqw;
  text-transform: uppercase;
}

.eggo-solved-words {
  font-size: 3.4cqw;
  margin-top: 0.8cqw;
}

.eggo-solved--syrup {
  background: #8A4B1F;
  color: #FFFEEF;
}

.eggo-solved--sky {
  background: #A9D8F0;
  color: #181A18;
}

.eggo-solved--lemon {
  background: #FFE45C;
  color: #181A18;
}

.eggo-solved--steel {
  background: #C9CDD2;
  color: #181A18;
}

.eggo-toast {
  position: absolute;
  top: -9cqw;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  background: #181A18;
  color: #FFFFFF;
  font-size: 3.6cqw;
  padding: 1.8cqw 3.6cqw;
  border-radius: 1.2cqw;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.eggo-toast.is-visible {
  opacity: 1;
}

.eggo-status {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.4cqw;
  min-height: 5cqw;
  margin-top: 5.2cqw;
  font-size: 3.7cqw;
  color: #5E5E5E;
  text-align: center;
}

.eggo-dots {
  display: flex;
  gap: 2.6cqw;
}

.eggo-dot {
  width: 4.6cqw;
  height: 4.6cqw;
  border-radius: 50%;
  background: #5C606A;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.eggo-dot.is-used {
  transform: scale(0);
  opacity: 0;
}

.eggo-controls {
  display: flex;
  justify-content: center;
  gap: 2.9cqw;
  margin-top: 6.4cqw;
}

.eggo-btn {
  box-shadow: none;
  letter-spacing: normal;
  min-width: 0;
  min-height: 0;
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  height: 13cqw;
  padding: 0 5cqw;
  border: 1px solid #181A18;
  border-radius: 999px;
  background: #FFFFFF;
  color: #181A18;
  font-family: inherit;
  font-size: 3.9cqw;
  font-weight: 500;
  line-height: 1;
  text-transform: none;
  cursor: pointer;
}

.eggo-btn[hidden] {
  display: none;
}

.eggo-btn[aria-disabled="true"] {
  border-color: #8A8A8A;
  color: #8A8A8A;
  cursor: default;
}

.eggo-btn--primary:not([aria-disabled="true"]) {
  background: #181A18;
  color: #FFFFFF;
}

/* spoken-only updates for screen readers */
.eggo-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.eggo-tile:focus-visible,
.eggo-btn:focus-visible {
  outline: 2px solid #181A18;
  outline-offset: 2px;
}

@keyframes eggo-jump {
  50% { transform: translateY(-2.5cqw); }
}

@keyframes eggo-shake {
  20%, 60% { transform: translateX(-1.5cqw); }
  40%, 80% { transform: translateX(1.5cqw); }
}

@keyframes eggo-pop {
  from { transform: scale(0.9); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .eggo-tile.is-jump,
  .eggo-tile.is-shake,
  .eggo-solved.is-new {
    animation: none;
  }
}

/* When the game is displayed small, crop the white space around the phone so the tiles are bigger */
@container eggo-crop (max-width: 440px) {
  .eggo-game {
    width: 153%;
    margin: -26.6% 0 -26.6% -26.6%;
  }
}

.eggo-game-crop {
  overflow: hidden;
}