* { margin: 0; padding: 0; box-sizing: border-box; }
:root { --ink: #2a1a3a; }
html, body { width: 100%; height: 100%; overflow: hidden;
  font-family: 'Nunito', 'Segoe UI', system-ui, Arial, sans-serif;
  background: #12071f; color: #fff; user-select: none; -webkit-user-select: none; }

.phase { position: fixed; inset: 0; display: none; }
.phase.active { display: block; }

/* ---------- ФАЗА 1: Открытка ---------- */
#phase-card {
  background: radial-gradient(120% 90% at 50% 0%, #ff8fb1 0%, #b57cf0 42%, #6a5cf0 100%);
  overflow: hidden;
}
.balloons { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.balloons span { position: absolute; left: var(--x); bottom: -140px; width: 54px; height: 66px;
  background: var(--c); border-radius: 50% 50% 48% 48%;
  box-shadow: inset -8px -8px 0 rgba(0,0,0,.08);
  animation: float 9s var(--d) linear infinite; opacity: .9; }
.balloons span::after { content: ''; position: absolute; left: 50%; top: 100%;
  width: 2px; height: 90px; background: rgba(255,255,255,.5); transform: translateX(-50%); }
@keyframes float { to { transform: translateY(-118vh) rotate(8deg); } }

#playfield { position: relative; z-index: 2; width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; }

.card { margin-top: 6vh; text-align: center; max-width: 680px; padding: 0 22px;
  animation: pop .7s cubic-bezier(.2,1.4,.4,1) both; }
.hb { font-size: clamp(15px, 2.4vw, 20px); font-weight: 900; letter-spacing: 2px;
  background: rgba(255,255,255,.22); display: inline-block; padding: 8px 20px; border-radius: 30px; }
.name { font-size: clamp(40px, 8vw, 82px); font-weight: 900; margin: 14px 0 6px;
  text-shadow: 0 6px 0 #00000022, 0 10px 30px #0004;
  background: linear-gradient(#fff, #ffe4b0); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.wish { font-size: clamp(15px, 2.4vw, 21px); font-weight: 700; line-height: 1.5; opacity: .96; }
@keyframes pop { from { transform: scale(.7); opacity: 0 } }

#continueBtn { position: absolute; left: 50%; top: 44%; transform: translate(-50%,-50%);
  z-index: 5; cursor: pointer; border: none; border-radius: 20px;
  padding: 18px 48px; font-family: inherit; font-weight: 900; font-size: clamp(20px, 3.4vw, 30px);
  color: #fff; background: linear-gradient(#3ad06a, #16a34a);
  box-shadow: 0 8px 0 #0f7a37, 0 14px 30px #0006; transition: box-shadow .1s, filter .2s;
  white-space: nowrap; }
#continueBtn.locked { background: linear-gradient(#9aa0a6, #6b7076); box-shadow: 0 8px 0 #4a4e52;
  cursor: not-allowed; filter: grayscale(.4); }
#continueBtn.ready { animation: btnpulse 1s ease-in-out infinite; }
@keyframes btnpulse { 50% { transform: scale(1.08); } }

/* Режим сборки пазла: открытка прячется, всё в аккуратном столбце */
#playfield.solving { justify-content: flex-start; padding-top: 2.4vh; }
#playfield.solving .card { display: none; }
#playfield.solving #continueBtn,
#playfield.solving #taunt,
#playfield.solving #puzzleWrap { position: static; transform: none; }
#playfield.solving #taunt { order: 1; opacity: 1; margin-bottom: 12px; }
#playfield.solving #puzzleWrap { order: 2; opacity: 1; pointer-events: auto; }
#playfield.solving #continueBtn { order: 3; margin-top: 18px; }

#taunt { position: absolute; left: 50%; top: 55%; transform: translateX(-50%);
  z-index: 4; width: min(88%, 620px); text-align: center; font-size: clamp(15px, 2.4vw, 20px);
  font-weight: 800; line-height: 1.5; background: rgba(20,8,30,.55); padding: 14px 20px; border-radius: 18px;
  opacity: 0; pointer-events: none; transition: opacity .4s; }
#taunt.show { opacity: 1; }

#puzzleWrap { position: absolute; left: 50%; bottom: 3vh; transform: translateX(-50%);
  z-index: 4; text-align: center; opacity: 0; pointer-events: none; transition: opacity .5s .2s; }
#puzzleWrap.show { opacity: 1; pointer-events: auto; }
.puzzle-title { font-weight: 900; font-size: clamp(18px,3vw,26px); margin-bottom: 10px; }
#puzzle { margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr);
  gap: 3px; background: #0004; padding: 5px; border-radius: 14px; box-shadow: 0 12px 40px #0007; }
#puzzle .tile { border-radius: 6px; cursor: pointer; background-size: 300% 300%;
  transition: transform .12s, outline .12s; outline: 0 solid #ffd93d; }
#puzzle .tile:hover { transform: scale(.97); }
#puzzle .tile.sel { outline: 4px solid #ffd93d; transform: scale(.93); z-index: 2; }
#puzzle .tile.done { cursor: default; }
#puzzleMsg { margin-top: 10px; font-weight: 800; font-size: clamp(13px,2.2vw,17px); opacity: .95; }

/* ---------- ФАЗА 2: Игра ---------- */
#gameFrame { width: 100%; height: 100%; border: 0; display: block; background: #0a1520; }

/* ---------- ФАЗА 3: Подарок ---------- */
#phase-gift { background: radial-gradient(120% 100% at 50% 10%, #241436 0%, #0d0618 70%); }
#fw { position: absolute; inset: 0; width: 100%; height: 100%; }
/* 3D-коробка на весь экран (прозрачный canvas), салют #fw — сзади */
#gift3d { position: absolute; inset: 0; z-index: 2; }
.gift-head { position: absolute; top: 4vh; left: 0; width: 100%; z-index: 3;
  text-align: center; pointer-events: none; }
.gift-title { font-size: clamp(26px, 5.2vw, 54px); font-weight: 900;
  background: linear-gradient(#fff, #ffd93d); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  text-shadow: 0 8px 40px #ffd93d55; }
.gift-sub { font-weight: 800; font-size: clamp(15px, 2.6vw, 22px); margin-top: 6px; opacity: .95; }
#tap3d { position: absolute; bottom: 6vh; left: 50%; transform: translateX(-50%); z-index: 3;
  font-weight: 800; font-size: clamp(15px, 2.4vw, 19px); opacity: .9; pointer-events: none;
  animation: bob 1.1s ease-in-out infinite; }
#tap3d.hide { display: none; }
@keyframes bob { 50% { transform: translate(-50%,-7px); } }

#reward { position: absolute; left: 50%; top: 50%; transform: translate(-50%, 40px) scale(.6);
  z-index: 4; opacity: 0; pointer-events: none; transition: transform .6s cubic-bezier(.2,1.4,.4,1) .15s, opacity .5s .15s; }
#reward.show { transform: translate(-50%, -50%) scale(1); opacity: 1; pointer-events: auto; }
.reward-card { width: min(88vw, 380px); background: linear-gradient(160deg, #fff, #f3ecff);
  color: var(--ink); border-radius: 22px; padding: 26px 24px; text-align: center;
  box-shadow: 0 24px 70px #000a, 0 0 0 4px #ffffff44; }
.reward-logo { font-size: 44px; }
.reward-h { font-size: clamp(22px, 4vw, 30px); font-weight: 900; margin: 6px 0; }
.reward-p { font-size: 16px; font-weight: 700; line-height: 1.5; opacity: .85; }
.reward-btn { display: inline-block; margin-top: 18px; padding: 15px 30px; border-radius: 16px;
  background: linear-gradient(#e8842c, #d0641c); color: #fff; font-weight: 900; font-size: 20px;
  text-decoration: none; box-shadow: 0 8px 0 #a04c14, 0 14px 26px #0005; }
.reward-btn:active { transform: translateY(4px); box-shadow: 0 4px 0 #a04c14; }
.reward-note { margin-top: 10px; font-size: 12px; font-weight: 700; opacity: .5; }