:root {
  color: #332312;
  background: #fff4cf;
  font-family: ui-rounded, "Arial Rounded MT Bold", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-synthesis: none;
  -webkit-tap-highlight-color: transparent;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  min-height: 100vh;
  min-height: 100dvh;
  overflow: hidden;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
  background:
    radial-gradient(circle at 14% 8%, rgba(255, 255, 255, 0.92) 0 8%, transparent 9%),
    radial-gradient(circle at 88% 88%, rgba(255, 207, 92, 0.38) 0 13%, transparent 14%),
    #fff4cf;
}

button {
  color: inherit;
  font: inherit;
}

button:focus-visible {
  outline: 5px solid #295ab7;
  outline-offset: 4px;
}

[hidden] {
  display: none !important;
}

.app-shell {
  position: relative;
  width: min(100%, 520px);
  height: 100vh;
  height: 100dvh;
  min-height: 560px;
  margin: 0 auto;
  overflow: hidden;
  background: linear-gradient(180deg, #fff8df 0%, #ffedb6 100%);
  box-shadow: 0 0 48px rgba(97, 61, 16, 0.16);
}

.screen {
  position: absolute;
  inset: 0;
  z-index: 1;
  padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
}

.screen--active {
  animation: screen-in 240ms ease-out both;
}

.start-screen {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3.5vh, 30px);
  text-align: center;
}

.start-mark {
  font-size: clamp(7rem, 30vw, 10rem);
  line-height: 0.9;
  filter: drop-shadow(0 10px 0 rgba(103, 62, 20, 0.13));
  animation: bear-float 2.8s ease-in-out infinite;
}

.game-title,
.zoo-title {
  margin: 0;
  color: #4b2b16;
  font-weight: 900;
  letter-spacing: -0.055em;
}

.game-title {
  font-size: clamp(2.25rem, 10vw, 4rem);
  line-height: 0.95;
}

.button {
  min-width: 64px;
  min-height: 64px;
  border: 0;
  border-radius: 28px;
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  transition: transform 100ms ease, filter 100ms ease, box-shadow 100ms ease;
}

.button:hover {
  filter: brightness(1.04);
}

.button:active {
  transform: translateY(5px);
  box-shadow: 0 2px 0 var(--button-edge, #8a431f);
}

.button:disabled {
  cursor: default;
}

.button--play {
  --button-edge: #a33624;
  width: clamp(210px, 40vw, 360px);
  min-height: 96px;
  padding: 14px 32px;
  border-bottom: 9px solid var(--button-edge);
  color: #fff;
  background: #ed513b;
  box-shadow: 0 8px 0 var(--button-edge), 0 16px 24px rgba(119, 49, 24, 0.2);
  font-size: clamp(2.2rem, 9vw, 3.2rem);
  font-weight: 900;
}

.button--icon {
  --button-edge: #b96819;
  width: 68px;
  height: 68px;
  border-bottom: 6px solid var(--button-edge);
  background: #ff9f2e;
  box-shadow: 0 5px 0 var(--button-edge), 0 9px 16px rgba(105, 62, 14, 0.16);
  font-size: 2rem;
  line-height: 1;
}

.start-zoo-button {
  position: absolute;
  top: max(18px, env(safe-area-inset-top));
  right: max(18px, env(safe-area-inset-right));
}

.voice-note {
  width: min(88%, 390px);
  margin: 0;
  color: #65543e;
  font-size: 0.88rem;
  font-weight: 650;
  line-height: 1.35;
}

.play-screen {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.play-topbar {
  display: grid;
  grid-template-columns: 68px 1fr 68px;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
}

.button--repeat {
  --button-edge: #2267a0;
  background: #55afe5;
}

.stars {
  display: flex;
  min-width: 0;
  align-items: center;
  justify-content: center;
  gap: clamp(1px, 1vw, 6px);
}

.star {
  color: #d0b88b;
  font-size: clamp(1.5rem, 7vw, 2.3rem);
  line-height: 1;
  filter: grayscale(1);
  opacity: 0.58;
  transform: scale(0.86);
}

.star--filled {
  color: #f7b916;
  filter: none;
  opacity: 1;
  transform: scale(1);
  animation: star-pop 300ms cubic-bezier(0.2, 1.6, 0.5, 1) both;
}

.round-stage {
  display: flex;
  min-height: 0;
  flex: 1 1 auto;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 3vh, 28px);
  padding: clamp(14px, 3vh, 28px) 0 4px;
  text-align: center;
}

.letter-choices {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(8px, 2.5vw, 15px);
}

.letter-button {
  --button-edge: #1f608d;
  width: 100%;
  min-height: clamp(132px, 28vh, 220px);
  padding: 8px 2px;
  border-bottom: 10px solid var(--button-edge);
  background: #57b8e8;
  box-shadow: 0 8px 0 var(--button-edge), 0 14px 20px rgba(31, 84, 111, 0.17);
  font-size: clamp(4.4rem, 15vw, 7rem);
  font-weight: 900;
  line-height: 1;
}

.letter-button:nth-child(2) {
  --button-edge: #a54177;
  background: #ef72ae;
}

.letter-button:nth-child(3) {
  --button-edge: #387529;
  background: #7fca4b;
}

.friend-reveal {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: friend-pop 700ms cubic-bezier(0.18, 1.5, 0.45, 1) both;
}

.friend-reveal__emoji {
  font-size: clamp(8.5rem, 38vw, 13rem);
  line-height: 1;
  filter: drop-shadow(0 12px 0 rgba(86, 56, 23, 0.13));
}

.friend-reveal__word {
  margin-top: 10px;
  color: #4b2b16;
  font-size: clamp(2.25rem, 10vw, 4rem);
  font-weight: 900;
  letter-spacing: 0.03em;
}

.word-emoji {
  font-size: clamp(6rem, 26vw, 9rem);
  line-height: 1;
  filter: drop-shadow(0 9px 0 rgba(86, 56, 23, 0.12));
  animation: word-emoji-in 450ms cubic-bezier(0.2, 1.4, 0.5, 1) both;
}

.word-slots {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: clamp(4px, 1.6vw, 10px);
}

.word-slot {
  display: grid;
  width: clamp(46px, 13vw, 64px);
  height: clamp(58px, 15vw, 74px);
  place-items: center;
  border-bottom: 7px solid #6a4e2a;
  border-radius: 12px 12px 6px 6px;
  background: rgba(255, 255, 255, 0.75);
  font-size: clamp(2rem, 9vw, 3.3rem);
  font-weight: 900;
}

.word-slot--filled {
  color: #244e99;
  animation: slot-pop 250ms cubic-bezier(0.2, 1.6, 0.5, 1) both;
}

.letter-bank {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(4, minmax(64px, 1fr));
  gap: 9px;
}

.bank-button {
  --button-edge: #9c4a20;
  min-width: 64px;
  min-height: 72px;
  border-bottom: 7px solid var(--button-edge);
  background: #ff8851;
  box-shadow: 0 6px 0 var(--button-edge);
  font-size: clamp(2rem, 9vw, 3.1rem);
  font-weight: 900;
}

.bank-button:nth-child(3n + 2) {
  --button-edge: #34702f;
  background: #7bc960;
}

.bank-button:nth-child(3n + 3) {
  --button-edge: #2e6399;
  background: #68b2ec;
}

.bank-button--used {
  border-bottom-color: #a79778;
  color: transparent;
  background: #d9cdb3;
  box-shadow: none;
  opacity: 0.68;
  transform: translateY(6px);
}

.is-wrong {
  animation: shake 360ms ease-in-out;
}

.is-hint {
  animation: wiggle 650ms ease-in-out infinite;
}

.zoo-screen {
  display: flex;
  flex-direction: column;
  gap: 18px;
  overflow: hidden;
}

.zoo-header {
  display: grid;
  grid-template-columns: 78px 1fr 32px;
  align-items: center;
  flex: 0 0 auto;
  gap: 8px;
  text-align: center;
}

.button--back {
  --button-edge: #a33d28;
  width: 72px;
  height: 72px;
  border-bottom: 7px solid var(--button-edge);
  background: #ef694f;
  box-shadow: 0 6px 0 var(--button-edge);
  color: #fff;
  font-size: 2.8rem;
  font-weight: 900;
  line-height: 1;
}

.zoo-title {
  font-size: clamp(2rem, 9vw, 3.2rem);
  line-height: 1;
}

.zoo-count {
  margin: 5px 0 0;
  color: #5b4933;
  font-size: 1rem;
  font-weight: 800;
}

.zoo-grid {
  display: grid;
  min-height: 0;
  flex: 1 1 auto;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-content: start;
  gap: 10px;
  padding: 2px 2px calc(12px + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.zoo-tile {
  --button-edge: #d0a846;
  display: flex;
  min-width: 0;
  min-height: 116px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 7px 3px;
  border-bottom: 7px solid var(--button-edge);
  background: #fff2a7;
  box-shadow: 0 5px 0 var(--button-edge);
}

.zoo-tile--locked {
  border-bottom-color: #aa9d83;
  background: #d9d2c1;
  box-shadow: 0 5px 0 #aa9d83;
  cursor: default;
  filter: grayscale(0.8);
  opacity: 0.6;
}

.zoo-tile__emoji {
  font-size: clamp(2.5rem, 12vw, 4rem);
  line-height: 1;
}

.zoo-tile__word {
  width: 100%;
  overflow: hidden;
  font-size: clamp(0.7rem, 3.2vw, 1rem);
  font-weight: 900;
  letter-spacing: 0.015em;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.confetti-layer {
  position: absolute;
  inset: 0;
  z-index: 10;
  overflow: hidden;
  pointer-events: none;
}

.confetti-piece {
  position: absolute;
  top: -20px;
  left: var(--x);
  width: var(--size);
  height: var(--size);
  border-radius: var(--radius);
  background: var(--color);
  opacity: 0;
  animation: confetti-fall var(--duration) var(--delay) cubic-bezier(0.15, 0.7, 0.45, 1) forwards;
}

@keyframes screen-in {
  from { opacity: 0; transform: scale(0.98); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes bear-float {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50% { transform: rotate(3deg) translateY(-10px); }
}

@keyframes star-pop {
  from { transform: scale(0.5) rotate(-20deg); }
  to { transform: scale(1) rotate(0); }
}

@keyframes friend-pop {
  0% { opacity: 0; transform: translateY(70px) scale(0.4) rotate(-10deg); }
  65% { opacity: 1; transform: translateY(-12px) scale(1.1) rotate(5deg); }
  100% { opacity: 1; transform: translateY(0) scale(1) rotate(0); }
}

@keyframes word-emoji-in {
  from { opacity: 0; transform: scale(0.5); }
  to { opacity: 1; transform: scale(1); }
}

@keyframes slot-pop {
  from { transform: translateY(-12px) scale(1.2); }
  to { transform: translateY(0) scale(1); }
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-10px) rotate(-3deg); }
  40% { transform: translateX(9px) rotate(3deg); }
  60% { transform: translateX(-7px) rotate(-2deg); }
  80% { transform: translateX(5px) rotate(1deg); }
}

@keyframes wiggle {
  0%, 100% { transform: rotate(0) scale(1); }
  25% { transform: rotate(-5deg) scale(1.04); }
  50% { transform: rotate(5deg) scale(1.08); }
  75% { transform: rotate(-3deg) scale(1.04); }
}

@keyframes confetti-fall {
  0% { opacity: 1; transform: translate3d(0, -10px, 0) rotate(0); }
  100% { opacity: 0.98; transform: translate3d(var(--drift), 108vh, 0) rotate(var(--spin)); }
}

@media (max-height: 680px) {
  .round-stage {
    gap: 12px;
    padding-top: 10px;
  }

  .letter-button {
    min-height: 130px;
  }

  .word-emoji {
    font-size: 5.4rem;
  }

  .word-slot {
    height: 54px;
  }

  .bank-button {
    min-height: 64px;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
  }

  .start-mark,
  .is-wrong {
    animation: none;
  }

  /* the hint must survive without motion — static highlight instead of wiggle */
  .is-hint {
    animation: none;
    outline: 6px solid #295ab7;
    outline-offset: 4px;
    filter: brightness(1.1);
  }

  .friend-reveal,
  .star--filled,
  .word-emoji,
  .word-slot--filled {
    animation-duration: 0.01ms;
  }
}