:root {
  --u: min(5.9vw, 8.2vh);
  --ink: #3d2f6b; --ink-soft: #8477ad;
  --coral: #ff6f61; --sun: #ffc83d; --orange: #ff9838; --mint: #46cf91; --card: #ffffff;
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Arial Rounded MT Bold", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body {
  font-family: var(--font); font-weight: 800; color: var(--ink);
  background: linear-gradient(165deg, #fff3cf 0%, #ffdfe6 42%, #d6e6ff 100%);
  user-select: none; -webkit-user-select: none; cursor: default;
  display: flex; flex-direction: column; align-items: center;
}

/* мягкие пятна на фоне */
.blob { position: fixed; border-radius: 50%; filter: blur(7vh); opacity: .55; z-index: -1; animation: drift 18s ease-in-out infinite alternate; }
.blob.a { width: 46vh; height: 46vh; left: -10vh; top: 8vh; background: #ffd27a; }
.blob.b { width: 54vh; height: 54vh; right: -14vh; top: -12vh; background: #ffb3d1; animation-duration: 23s; }
.blob.c { width: 60vh; height: 60vh; left: 30vw; bottom: -30vh; background: #a8d4ff; animation-duration: 27s; }

/* панель для взрослого */
#bar {
  position: fixed; top: 10px; right: 12px; z-index: 11; display: flex; gap: 4px; padding: 4px;
  border-radius: 999px; background: rgba(255,255,255,.75); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 2px 10px rgba(61,47,107,.12); opacity: .85; transition: opacity .2s;
}
#bar:hover { opacity: 1; }
#bar button {
  font: 800 13px var(--font); color: var(--ink); background: transparent; border: 0; border-radius: 999px;
  padding: 6px 12px; cursor: pointer; transition: background .15s;
}
#bar button:hover { background: rgba(255,255,255,.8); }
#bar button.on { background: var(--sun); }
#bar button:disabled { color: var(--ink-soft); cursor: default; }
#bar .sep { width: 1px; margin: 5px 3px; background: rgba(61,47,107,.18); }

#stage { flex: 1; padding-top: 3vh; display: flex; align-items: center; justify-content: center; gap: 5vw; min-height: 0; }
#target {
  width: 35vh; height: 35vh; border-radius: 7vh; background: var(--card); cursor: pointer;
  box-shadow: 0 1.6vh 0 #e9dcf7, 0 4vh 6vh rgba(91,61,150,.22);
  display: flex; align-items: center; justify-content: center;
  animation: float 4s ease-in-out infinite alternate;
}
#target b {
  font-size: 25vh; line-height: 1; font-weight: 900;
  background: linear-gradient(160deg, var(--orange), var(--coral) 70%); -webkit-background-clip: text; background-clip: text; color: transparent;
}
#target.new b { display: block; animation: pop .5s cubic-bezier(.3,1.6,.5,1); }
#reward {
  width: 35vh; height: 35vh; border-radius: 50%; position: relative;
  background: rgba(255,255,255,.35); border: .5vh dashed rgba(255,255,255,.9);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  transition: background .3s, border-color .3s;
}
#reward.show { background: var(--card); border-color: transparent; box-shadow: 0 4vh 6vh rgba(91,61,150,.22); }
#reward .pic { font-size: 19vh; line-height: 1.1; text-align: center; }
#reward.many .pic { font-size: 6.5vh; max-width: 26vh; }
#reward.show .pic { animation: bounce 1.6s; }
#reward .word { font-size: 3.2vh; color: var(--ink-soft); height: 4vh; margin-top: -.5vh; }

/* клавиатура */
#kb {
  padding: calc(var(--u) * .55); margin-bottom: 2.6vh; border-radius: calc(var(--u) * .5);
  background: rgba(255,255,255,.5); box-shadow: 0 .8vh 3vh rgba(61,47,107,.14), inset 0 0 0 2px rgba(255,255,255,.7);
  display: flex; flex-direction: column; gap: calc(var(--u) * .12);
}
.row { width: calc(var(--u) * 14.5); height: calc(var(--u) * .9); display: flex; gap: calc(var(--u) * .1); position: relative; border-radius: calc(var(--u) * .22); transition: background .3s, box-shadow .3s; }
.row.active { background: #ffe7a3; box-shadow: 0 0 0 calc(var(--u) * .1) #ffe7a3, 0 0 0 calc(var(--u) * .16) var(--orange); }
.row.active::before {
  content: ""; position: absolute; left: calc(var(--u) * -.5); top: 50%; margin-top: calc(var(--u) * -.2);
  border: calc(var(--u) * .2) solid transparent; border-left-color: var(--orange); border-right-width: 0;
  animation: nudge .6s ease-in-out infinite alternate;
}
.key {
  flex-basis: 0; border-radius: calc(var(--u) * .2); position: relative;
  background: linear-gradient(#ffffff, #f3eefb); color: var(--ink);
  box-shadow: 0 calc(var(--u) * .08) 0 #cbbfe3;
  display: flex; align-items: center; justify-content: center; font-size: calc(var(--u) * .5);
}
.key.off { background: rgba(255,255,255,.45); box-shadow: 0 calc(var(--u) * .06) 0 rgba(203,191,227,.55); }
.key.target.hint {
  background: linear-gradient(#ffe27a, var(--sun)); z-index: 2;
  box-shadow: 0 calc(var(--u) * .08) 0 #e0a100, 0 0 0 calc(var(--u) * .09) var(--coral), 0 0 calc(var(--u) * .6) rgba(255,111,97,.6);
  animation: pulse .7s ease-in-out infinite alternate;
}
.key.wrong { animation: shake .35s; }
.key.right { background: linear-gradient(#8ff0bd, var(--mint)); color: #fff; box-shadow: 0 calc(var(--u) * .08) 0 #2a9d68; animation: pop .5s; }

/* игра на слух: три картинки вместо буквы и клавиатуры */
#spy { display: none; gap: 5vw; }
body.spy #spy { display: flex; }
body.spy #target, body.spy #reward, body.spy #kb { display: none; }
.card {
  width: 32vh; height: 32vh; border-radius: 7vh; background: var(--card); cursor: pointer; font-size: 18vh;
  box-shadow: 0 1.6vh 0 #e9dcf7, 0 4vh 6vh rgba(91,61,150,.22);
  display: flex; align-items: center; justify-content: center; transition: opacity .3s, transform .3s;
}
.card.gone { opacity: .3; transform: scale(.85); cursor: default; }
.card.right { box-shadow: 0 0 0 1.2vh var(--mint), 0 4vh 6vh rgba(91,61,150,.22); animation: pop .5s; }

/* планшет: буквы-плитки вместо клавиатуры, размеры от меньшей стороны экрана */
#tiles, #gear { display: none; }
body.touch { --s: min(34vh, 42vw); touch-action: manipulation; -webkit-touch-callout: none; -webkit-tap-highlight-color: transparent; }
body.touch #kb { display: none; }
body.touch #stage { gap: 4vw; }
body.touch #target, body.touch #reward { width: var(--s); height: var(--s); }
body.touch #target { border-radius: calc(var(--s) * .2); }
body.touch #target b { font-size: calc(var(--s) * .7); }
body.touch #reward .pic { font-size: calc(var(--s) * .54); }
body.touch #reward.many .pic { font-size: calc(var(--s) * .18); max-width: calc(var(--s) * .75); }
body.touch #reward .word { font-size: calc(var(--s) * .09); height: calc(var(--s) * .12); }
body.touch #tiles { display: flex; justify-content: center; gap: 3vw; margin-bottom: max(7vh, env(safe-area-inset-bottom)); min-height: min(19vw, 26vh); }
body.touch.spy #tiles { display: none; }
.tile { --u: min(19vw, 26vh); flex: none; width: var(--u); height: var(--u); font-size: calc(var(--u) * .62); font-weight: 900; cursor: pointer; }
body.touch .card { width: min(32vh, 28vw); height: min(32vh, 28vw); border-radius: min(7vh, 6vw); font-size: min(18vh, 16vw); }
body.touch #spy { gap: 3vw; }
body.touch #gear {
  display: block; position: fixed; top: 10px; right: 12px; z-index: 12; border: 0; border-radius: 999px; padding: 8px 14px;
  font: 800 13px var(--font); color: var(--ink-soft); background: rgba(255,255,255,.6);
}
body.touch #bar { display: none; top: 52px; max-width: calc(100vw - 24px); flex-wrap: wrap; justify-content: flex-end; border-radius: 22px; opacity: 1; }
body.touch.open #bar { display: flex; }
body.touch #bar button { font-size: 15px; padding: 10px 14px; }
body.touch #start h1 { font-size: min(9vh, 11vw); }
body.touch #start p { font-size: min(2.3vh, 3.4vw); padding: 0 6vw; }

/* заставка */
#start {
  position: fixed; inset: 0; z-index: 10; cursor: pointer;
  background: linear-gradient(165deg, #fff3cf 0%, #ffdfe6 42%, #d6e6ff 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5vh;
}
#start h1 { margin: 0; font-size: 9vh; font-weight: 900; letter-spacing: -.02em; }
#start .play {
  width: 28vh; height: 28vh; border-radius: 50%; background: var(--card);
  box-shadow: 0 1.6vh 0 #e9dcf7, 0 4vh 6vh rgba(91,61,150,.25);
  display: flex; align-items: center; justify-content: center; animation: pulse 1s ease-in-out infinite alternate;
}
#start .play::after { content: ""; margin-left: 2.4vh; border: 7vh solid transparent; border-left: 11vh solid var(--coral); border-right-width: 0; }
#start p { margin: 0; font-size: 2.3vh; font-weight: 700; color: var(--ink-soft); text-align: center; line-height: 1.5; }

.confetti { position: fixed; top: -10vh; pointer-events: none; z-index: 4; animation: fall linear forwards; }
.confetti.pic { font-size: 6vh; }
.confetti.bit { width: 1.6vh; height: 2.6vh; border-radius: .4vh; }

@keyframes drift { to { transform: translate(6vw, 5vh) scale(1.15); } }
@keyframes float { to { transform: translateY(-1.4vh) rotate(-1.5deg); } }
@keyframes nudge { to { transform: translateX(40%); } }
@keyframes pulse { to { transform: scale(1.14); } }
@keyframes pop { 0% { transform: scale(.3); } 100% { transform: scale(1); } }
@keyframes shake { 25% { transform: translateX(-12%); } 75% { transform: translateX(12%); } }
@keyframes bounce {
  0% { transform: scale(0) rotate(-20deg); } 25% { transform: scale(1.25) rotate(8deg); }
  45% { transform: scale(1); } 60% { transform: translateY(-12%); }
  75% { transform: translateY(0); } 88% { transform: translateY(-6%); } 100% { transform: none; }
}
@keyframes fall { to { transform: translateY(125vh) rotate(600deg); } }