/* Bulmaca ölçüleri ön izleme alanının genişliğine bağlıdır. */
.game-frame { position: relative; width: 100%; aspect-ratio: 9 / 18.5; container-type: inline-size; border-radius: 24px; overflow: hidden; background: #eff3d7; }
.game {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center;
  padding: 8cqw 5cqw 5cqw;
  background: url(/img/dg/background.webp) center / cover;
  color: #24452f;
  user-select: none; -webkit-user-select: none;
}
.game-title { font: 700 7.4cqw/1.1 "Fredoka", sans-serif; color: #1f4a2e; margin: 0; text-shadow: 0 1px 0 rgb(255 255 255 / 70%); }
.game-sub { font: 800 3.6cqw var(--sans); color: #3d5c3f; margin: 1cqw 0 0; }
.pots { display: flex; gap: 2.5cqw; margin: 4cqw 0 1cqw; }
.pot { position: relative; width: 13cqw; height: 18cqw; }
.pot img { position: absolute; left: 50%; translate: -50% 0; }
.pot .body { bottom: 0; width: 100%; z-index: 2; }
.pot .stem { bottom: 7.5cqw; width: 80%; z-index: 1; }
.pot .flower { bottom: 9cqw; width: 62%; z-index: 3; transition: scale .5s cubic-bezier(.3, 1.6, .5, 1), opacity .3s; }
.pot .bloom { scale: 0; opacity: 0; }
.pot.open .bud { opacity: 0; scale: .4; }
.pot.open .bloom { scale: 1; opacity: 1; transition-delay: .1s; }
.count { font: 800 3.8cqw var(--sans); color: #24452f; margin: 1.5cqw 0 2.5cqw; }

.words { display: grid; gap: 1.6cqw; justify-items: center; }
.word { display: flex; gap: 1.2cqw; }
.slot {
  width: 9.4cqw; aspect-ratio: 236 / 245;
  display: grid; place-items: center;
  background: url(/img/dg/cell_empty.webp) center / contain no-repeat;
  font: 700 5cqw "Fredoka", sans-serif; color: transparent;
}
.word.found .slot { background-image: url(/img/dg/cell_filled.webp); color: #fff; text-shadow: 0 1px 1px rgb(0 60 0 / 35%); }
.word.pop .slot { animation: pop .5s cubic-bezier(.3, 1.6, .5, 1) both; animation-delay: calc(var(--i) * 60ms); }
@keyframes pop { 0% { transform: scale(.4); } 100% { transform: scale(1); } }

.guess {
  margin: auto 0 2cqw; min-height: 9cqw; min-width: 24cqw; padding: 0 4cqw;
  border: 0; border-radius: 999px; cursor: pointer;
  background: #fffaf0; color: #1f4a2e;
  font: 700 5.6cqw/9cqw "Fredoka", sans-serif; letter-spacing: .08em;
  box-shadow: 0 .8cqw 0 #e2d3ad, 0 2cqw 4cqw rgb(22 77 55 / 18%);
}
.guess:empty { visibility: hidden; }
.guess.ok { background: #6cc93a; color: #fff; box-shadow: 0 .8cqw 0 #3f9a1f; }
.guess.no { animation: shake .35s; }
@keyframes shake { 25% { translate: -6px 0; } 75% { translate: 6px 0; } }

.wheel {
  touch-action: none; position: relative; width: 64cqw; aspect-ratio: 1; flex: none;
  background: url(/img/dg/wheel.webp) center / contain no-repeat;
}
.wheel svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; }
.wheel polyline { fill: none; stroke: #5db52f; stroke-width: 4.5; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.key {
  position: absolute; z-index: 2; width: 26%; aspect-ratio: 1; translate: -50% -50%;
  border: 0; padding: 0; cursor: pointer;
  background: url(/img/dg/letter.webp) center / contain no-repeat;
  color: #1f4a2e; font: 700 8.6cqw "Fredoka", sans-serif;
  transition: scale .15s;
}
.key.on { background-image: url(/img/dg/letter_active.webp); color: #fff; scale: 1.06; }
.wheel .bloom {
  position: absolute; left: 50%; top: 50%; width: 34%; translate: -50% -50%; z-index: 1;
  pointer-events: none; scale: 0; rotate: -30deg;
  transition: scale .8s cubic-bezier(.3, 1.5, .5, 1) .25s, rotate .8s ease-out .25s;
  filter: drop-shadow(0 6px 8px rgb(22 77 55 / 30%));
}
.game.done .bloom { scale: 1; rotate: 0deg; }
.shuffle, .replay {
  margin-top: 2cqw; border: 0; background: rgb(255 255 255 / 70%); color: #24452f;
  font: 800 3.6cqw var(--sans); cursor: pointer; padding: 1.6cqw 4cqw; border-radius: 999px;
}
.shuffle:hover, .replay:hover { background: #fff; }

.game-actions { display: flex; gap: 2cqw; }
.key:focus-visible { border-radius: 50%; outline-offset: 1px; }
.game:focus-visible { outline-offset: -5px; }