* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --ink: #2b2160;
  --card-w: 100%;
  --radius: 26px;
}

html, body { height: 100%; }

body {
  font-family: "Segoe UI", "Nunito", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background: linear-gradient(150deg, #5b8cff 0%, #8b5cf6 42%, #ff7ac8 78%, #ffc857 100%);
  background-attachment: fixed;
  min-height: 100%;
  overflow-x: hidden;
}

/* --- фоновые капли --- */
.blobs { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.blob { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .45; animation: float 14s ease-in-out infinite; }
.b1 { width: 340px; height: 340px; background: #ffe066; top: -80px; left: -60px; }
.b2 { width: 300px; height: 300px; background: #4be1c3; bottom: -90px; right: -50px; animation-delay: -5s; }
.b3 { width: 260px; height: 260px; background: #ff9ae0; top: 45%; left: 55%; animation-delay: -9s; }
@keyframes float { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-38px) scale(1.08); } }

.app {
  position: relative; z-index: 1;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 28px 18px 40px;
}

.screen { display: none; width: min(1080px, 100%); text-align: center; }
.screen.active { display: block; animation: screen-in .45s ease both; }
@keyframes screen-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* --- шапка --- */
.game-head { margin-bottom: 22px; }

.turn-badge {
  display: inline-block; background: rgba(255,255,255,.85);
  padding: 7px 18px; border-radius: 999px; font-weight: 800; font-size: 15px;
  box-shadow: 0 6px 18px rgba(43,33,96,.18); margin-bottom: 12px;
}

.title {
  color: #fff; font-size: clamp(34px, 6vw, 58px); font-weight: 900;
  text-shadow: 0 6px 0 rgba(43,33,96,.22); letter-spacing: .5px;
  animation: pop .5s cubic-bezier(.2,1.6,.4,1) both;
}
@keyframes pop { from { transform: scale(.85); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.subtitle {
  color: #fff; font-size: clamp(17px, 2.4vw, 23px); font-weight: 600;
  margin-top: 10px; opacity: .95; text-shadow: 0 3px 8px rgba(43,33,96,.25);
}

/* --- выбор количества детей --- */
.kids-row { margin-top: 18px; display: inline-flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: center; }
.kids-label { color: #fff; font-weight: 800; font-size: 16px; }
.kids-picker { display: flex; gap: 8px; background: rgba(255,255,255,.25); padding: 6px; border-radius: 999px; }
.kid-opt {
  width: 44px; height: 44px; border: 0; border-radius: 50%;
  background: #fff; color: var(--ink); font-size: 19px; font-weight: 900;
  cursor: pointer; transition: transform .2s, background .2s, color .2s;
  box-shadow: 0 4px 10px rgba(43,33,96,.18);
}
.kid-opt:hover { transform: translateY(-3px) scale(1.06); }
.kid-opt.sel { background: #ff5f9e; color: #fff; transform: scale(1.1); }

/* --- точки детей --- */
.kid-dots { display: flex; gap: 10px; justify-content: center; margin-top: 16px; }
.kid-dot {
  width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.45);
  color: var(--ink); font-weight: 900; font-size: 17px;
  display: flex; align-items: center; justify-content: center;
  transition: all .3s;
}
.kid-dot.now { background: #fff; box-shadow: 0 0 0 4px #ffe066, 0 8px 18px rgba(43,33,96,.25); transform: scale(1.12); }
.kid-dot.done { background: #3ddc97; color: #fff; }

/* --- доска карточек --- */
.board {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.card {
  position: relative; border: 0; padding: 0; background: none;
  perspective: 1100px; cursor: pointer; aspect-ratio: 4 / 3;
  transition: transform .25s;
}
.card:hover:not(.checked):not(.flipped) { transform: translateY(-8px) scale(1.03); }
.card:active:not(.checked) { transform: scale(.97); }
.card.checked { cursor: default; }

.card-inner {
  position: relative; width: 100%; height: 100%;
  transform-style: preserve-3d; transition: transform .65s cubic-bezier(.4,1.3,.4,1);
}
.card.flipped .card-inner { transform: rotateY(180deg); }

.face {
  position: absolute; inset: 0;
  -webkit-backface-visibility: hidden; backface-visibility: hidden;
  border-radius: var(--radius); overflow: hidden;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 16px; box-shadow: 0 14px 30px rgba(43,33,96,.28);
}

/* рубашка */
.face.back { gap: 6px; }
.back-badge {
  width: clamp(58px, 26%, 84px); aspect-ratio: 1; border-radius: 50%;
  background: rgba(255,255,255,.92); color: #7c3aed;
  font-size: clamp(30px, 4vw, 44px); font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 8px 16px rgba(43,33,96,.25);
}
.back-hint { color: #fff; font-weight: 800; font-size: 15px; opacity: .95; text-shadow: 0 2px 5px rgba(0,0,0,.2); }

/* лицо с вопросом */
.face.front { transform: rotateY(180deg); background: #fff; flex-direction: column; gap: 8px; }
.front-emoji { font-size: clamp(24px, 3vw, 34px); }
.front-q { font-size: clamp(17px, 1.7vw, 23px); font-weight: 800; line-height: 1.25; color: var(--ink); }
.front-label { font-size: 13px; font-weight: 800; color: #a78bfa; letter-spacing: 1px; text-transform: uppercase; }

/* узоры рубашек */
.pattern-1 { background: #ff5f9e; background-image: radial-gradient(rgba(255,255,255,.6) 14%, transparent 15%); background-size: 30px 30px; }
.pattern-2 { background: #38bdf8; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.35) 0 12px, transparent 12px 26px); }
.pattern-3 { background: #7c5cff; background-image: radial-gradient(circle at 50% 50%, rgba(255,255,255,.4) 18%, transparent 19%); background-size: 46px 46px; }
.pattern-4 { background: #3ddc97; background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,.4) 0 10px, transparent 10px 30px); }
.pattern-5 { background: #ff9a3c; background-image: repeating-radial-gradient(circle at 0 50%, rgba(255,255,255,.4) 0 8px, transparent 8px 22px); }
.pattern-6 { background: #ff5470; background-image: repeating-conic-gradient(rgba(255,255,255,.35) 0 25%, transparent 0 50%); background-size: 34px 34px; }

/* галочка */
.check {
  position: absolute; top: -12px; right: -12px; z-index: 3;
  width: 54px; height: 54px; border-radius: 50%;
  background: #2ee59d; color: #fff; font-size: 30px; font-weight: 900;
  display: flex; align-items: center; justify-content: center;
  border: 5px solid #fff; box-shadow: 0 8px 18px rgba(43,33,96,.3);
  transform: scale(0); transition: transform .4s cubic-bezier(.2,1.8,.4,1);
}
.card.checked .check { transform: scale(1); }
.card.checked .card-inner { filter: saturate(.75) brightness(.96); }

/* --- панель вопроса --- */
.q-panel {
  margin-top: 26px;
  background: rgba(255,255,255,.97);
  border-radius: 36px;
  padding: clamp(20px, 4vw, 34px) clamp(18px, 4vw, 44px) clamp(22px, 4vw, 32px);
  box-shadow: 0 24px 55px rgba(43,33,96,.35);
  border: 5px solid #ffe066;
}
.q-panel.q-in { animation: q-pop .5s cubic-bezier(.2,1.5,.4,1) both; }
@keyframes q-pop { from { opacity: 0; transform: translateY(26px) scale(.94); } to { opacity: 1; transform: none; } }

.q-bubble { display: flex; align-items: center; gap: 18px; text-align: left; }
.q-emoji {
  font-size: clamp(38px, 6vw, 62px); flex: 0 0 auto;
  animation: wobble 2.4s ease-in-out infinite;
}
@keyframes wobble { 0%,100% { transform: rotate(-8deg); } 50% { transform: rotate(8deg) scale(1.08); } }
.q-text {
  font-size: clamp(22px, 3.4vw, 40px); font-weight: 900;
  color: var(--ink); line-height: 1.22;
}

/* --- кнопки --- */
.controls { margin-top: 26px; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.q-panel .controls { margin-top: 22px; }
.controls-row { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 16px; }
.controls-hint { color: #fff; font-size: 14px; font-weight: 700; opacity: .85; }

.btn {
  border: 0; cursor: pointer; font-family: inherit;
  font-size: clamp(19px, 2.4vw, 26px); font-weight: 900;
  padding: 16px 40px; border-radius: 999px;
  transition: transform .2s, box-shadow .2s, filter .2s;
  animation: pop .35s cubic-bezier(.2,1.6,.4,1) both;
}
.btn:hover { transform: translateY(-4px) scale(1.04); }
.btn:active { transform: scale(.96); }
.btn-primary {
  background: linear-gradient(180deg, #ffe066, #ffb020); color: #5b3200;
  box-shadow: 0 10px 0 #e08900, 0 18px 30px rgba(43,33,96,.3);
}
.btn-primary:active { box-shadow: 0 5px 0 #e08900, 0 10px 18px rgba(43,33,96,.25); }
.btn-ghost {
  background: rgba(255,255,255,.92); color: #6d28d9;
  box-shadow: 0 8px 20px rgba(43,33,96,.22);
}
.btn-big { font-size: clamp(21px, 2.8vw, 30px); padding: 20px 52px; }

.hidden { display: none !important; }

/* --- финал --- */
#screen-final { position: relative; }
.final-card {
  background: rgba(255,255,255,.96); border-radius: 40px;
  padding: clamp(32px, 6vw, 64px) clamp(22px, 5vw, 60px);
  box-shadow: 0 30px 70px rgba(43,33,96,.35);
  animation: pop .6s cubic-bezier(.2,1.5,.4,1) both;
}
.final-star { font-size: clamp(60px, 12vw, 110px); animation: spin-star 3s ease-in-out infinite; }
@keyframes spin-star { 0%,100% { transform: rotate(-8deg) scale(1); } 50% { transform: rotate(8deg) scale(1.12); } }
.final-title { font-size: clamp(26px, 4.6vw, 46px); font-weight: 900; color: var(--ink); margin-top: 10px; line-height: 1.2; }
.final-sub { font-size: clamp(19px, 3vw, 30px); font-weight: 800; color: #7c3aed; margin-top: 14px; }
.final-card .btn { margin-top: 30px; }

.confetti { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.confetti span {
  position: absolute; top: -60px; font-size: 34px;
  animation: fall linear forwards;
}
@keyframes fall {
  to { transform: translateY(115vh) rotate(720deg); opacity: .9; }
}

@media (max-width: 640px) {
  .board { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .card { aspect-ratio: 1 / 1; }
  .btn { padding: 14px 28px; width: min(340px, 100%); }
  .controls { align-items: stretch; padding: 0 10px; }
}