.phrase-game-backdrop { background: rgb(7 10 27 / 28%); }
.phrase-game {
  position: relative;
  z-index: 2;
  width: min(100%, 520px);
  max-height: 100%;
  padding: clamp(18px, 5vmin, 30px);
  overflow: hidden;
  border: 1px solid rgb(255 255 255 / 30%);
  border-radius: 28px;
  background: rgb(255 255 255 / 9%);
  backdrop-filter: blur(14px) saturate(125%);
  -webkit-backdrop-filter: blur(14px) saturate(125%);
  color: #fff;
  text-align: center;
}
.phrase-game-backdrop--level-2 .phrase-game { pointer-events: none; }
.phrase-game-level { display: inline-block; margin-bottom: 5px; font-size: 12px; font-weight: 800; letter-spacing: .16em; opacity: .72; }
.phrase-game h2 { margin: 0 0 8px; font-size: clamp(21px, 6vw, 30px); }
.phrase-game-hint { margin: 0 0 14px; }
.phrase-game-answer {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: 6px;
  min-height: 54px;
  padding: 8px;
  border: 1px dashed rgb(255 255 255 / 30%);
  border-radius: 18px;
}
.phrase-game-answer span { padding: 5px 9px; border-radius: 99px; background: rgb(255 255 255 / 16%); }
.phrase-game-field { overflow: hidden; contain: layout paint; }
.phrase-game-backdrop--level-1 .phrase-game-field { position: relative; height: clamp(220px, 42vh, 340px); margin: 10px 0 4px; }
.phrase-game-backdrop--level-2 .phrase-game-field { position: absolute; z-index: 1; inset: 0; }
.phrase-word-bubble {
  position: absolute;
  left: 0;
  top: 0;
  min-width: 82px;
  min-height: 82px;
  padding: 10px;
  border: 1px solid rgb(255 255 255 / 55%);
  border-radius: 50%;
  background: radial-gradient(circle at 30% 24%, rgb(255 255 255 / 28%), rgb(153 196 255 / 9%) 55%, rgb(255 255 255 / 4%));
  box-shadow: inset 0 0 16px rgb(255 255 255 / 12%), 0 8px 24px rgb(0 0 0 / 16%);
  color: #fff;
  font: 700 clamp(24px, 8vw, 38px) / 1 "Josefin Sans", sans-serif;
  text-shadow: 0 0 14px rgb(255 255 255 / 55%);
  cursor: pointer;
  touch-action: manipulation;
  will-change: transform;
}
.phrase-word-bubble:disabled { opacity: .16; pointer-events: none; }
.phrase-word-bubble:focus-visible, .phrase-game-close:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.phrase-game-feedback { min-height: 1.4em; margin: 2px 0 8px; font-weight: 700; }
.phrase-game-close { min-height: 44px; padding: 10px 18px; border: 1px solid rgb(255 255 255 / 48%); border-radius: 99px; background: rgb(255 255 255 / 12%); color: #fff; font: inherit; pointer-events: auto; }
.phrase-game--wrong { animation: phrase-wrong 240ms ease-in-out 2; }
.phrase-game--complete .phrase-game-answer { border-style: solid; background: rgb(118 255 196 / 10%); }
@keyframes phrase-wrong { 50% { transform: translateX(7px); } }
@media (max-height: 650px) { .phrase-game-backdrop--level-1 .phrase-game-field { height: 190px; } .phrase-word-bubble { min-width: 70px; min-height: 70px; font-size: 26px; } }
@media (prefers-reduced-motion: reduce) { .phrase-game--wrong { animation: none; } }