:root { --pink:#ff4d79; --pink2:#ff8fab; --bg:#fff0f5; --ink:#3a1c2b; }
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; height:100%; background:var(--bg); color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; overscroll-behavior:none; overflow-x:hidden; }
body { touch-action:manipulation; user-select:none; -webkit-user-select:none; }
#app { min-height:100dvh; max-width:520px; margin:0 auto; position:relative;
  padding:env(safe-area-inset-top) 16px env(safe-area-inset-bottom); }
#confetti { position:fixed; inset:0; width:100%; height:100%; pointer-events:none; z-index:50; }

.screen { display:none; min-height:100dvh; padding:16px 0 24px; flex-direction:column; gap:12px; animation:fade .35s; }
.screen.active { display:flex; }
.screen.center { align-items:center; justify-content:center; text-align:center; }
@keyframes fade { from { opacity:0; transform:translateY(10px);} to { opacity:1; transform:none; } }

h1 { font-size:2rem; margin:.3em 0; color:var(--pink); }
h2 { font-size:1.5rem; margin:.2em 0; text-align:center; }
.sub, .hint { text-align:center; margin:0; opacity:.75; }
.hint { animation:pulse 1.5s infinite; }
@keyframes pulse { 50% { opacity:.3; } }

.btn { background:var(--pink); color:#fff; border:0; border-radius:999px; padding:14px 28px;
  font-size:1.1rem; font-weight:600; box-shadow:0 6px 16px rgba(255,77,121,.35); cursor:pointer; }
.btn:active { transform:scale(.96); }
.btn.ghost { background:#fff; color:var(--pink); box-shadow:0 2px 8px rgba(0,0,0,.1); }

.gift { font-size:7rem; background:none; border:0; cursor:pointer; animation:bounce 1.2s infinite; }
@keyframes bounce { 50% { transform:translateY(-14px) rotate(-6deg); } }

.top { display:flex; align-items:center; justify-content:space-between; width:100%; min-height:44px; font-weight:600; }
.back { background:#fff; border:0; border-radius:50%; width:44px; height:44px; font-size:1.3rem; box-shadow:0 2px 8px rgba(0,0,0,.12); }

.progress { height:10px; background:#ffd6e2; border-radius:99px; overflow:hidden; }
#progress-bar { height:100%; width:0; background:linear-gradient(90deg,var(--pink2),var(--pink)); transition:width .5s; }
.menu { display:grid; gap:12px; }
.card { display:flex; align-items:center; gap:14px; background:#fff; border:0; border-radius:20px; padding:16px;
  text-align:left; font-size:1rem; box-shadow:0 4px 14px rgba(255,77,121,.15); color:var(--ink); width:100%; }
.card:active { transform:scale(.98); }
.card .ico { font-size:2rem; }
.card b { display:block; font-size:1.1rem; }
.card small { opacity:.7; }
.card .state { margin-left:auto; font-size:1.4rem; }
.card.locked { opacity:.5; filter:grayscale(.6); }

.options { display:grid; gap:10px; margin-top:8px; }
.opt { background:#fff; border:2px solid #ffd6e2; border-radius:16px; padding:16px; font-size:1.05rem; color:var(--ink); }
.opt.ok { background:#c8f7d4; border-color:#3ac46b; }
.opt.bad { background:#ffd3d3; border-color:#e55; }

.grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-top:8px; }
.tile { aspect-ratio:1; perspective:600px; background:none; border:0; padding:0; }
.tile .in { position:relative; width:100%; height:100%; transition:transform .4s; transform-style:preserve-3d; }
.tile.flip .in { transform:rotateY(180deg); }
.tile .f, .tile .b { position:absolute; inset:0; border-radius:16px; display:flex; align-items:center; justify-content:center;
  backface-visibility:hidden; -webkit-backface-visibility:hidden; font-size:2.4rem; }
.tile .f { background:linear-gradient(135deg,var(--pink2),var(--pink)); color:#fff; }
.tile .b { background:#fff; transform:rotateY(180deg); box-shadow:inset 0 0 0 3px var(--pink2); }
.tile.done .b { background:#ffe3ec; }

.catch-area { position:relative; flex:1; min-height:60dvh; background:linear-gradient(#ffe3ec,#fff); border-radius:20px;
  overflow:hidden; touch-action:none; }
.overlay { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:12px; text-align:center; padding:20px; background:rgba(255,255,255,.85); z-index:5; }
.faller { position:absolute; top:-60px; font-size:2.6rem; padding:8px; animation:fall linear forwards; cursor:pointer; }
@keyframes fall { to { transform:translateY(110dvh); } }
.pop { animation:pop .25s forwards !important; }
@keyframes pop { to { transform:scale(1.8); opacity:0; } }

.ttt { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; width:100%; max-width:340px; }
.cell { aspect-ratio:1; background:#fff; border:0; border-radius:18px; font-size:3rem; box-shadow:0 4px 14px rgba(255,77,121,.2); }
.cell.win { background:#ffe3ec; box-shadow:inset 0 0 0 3px var(--pink); }
.btn[hidden] { display:none; }
a.btn { text-decoration:none; display:inline-block; }

#scratch-canvas { position:absolute; inset:0; width:100%; height:100%; touch-action:none; transition:opacity .6s; }

.cake { font-size:5rem; animation:bounce 1.2s infinite; }
.final-msg { font-size:1.2rem; line-height:1.5; max-width:420px; }
.sign { font-style:italic; font-size:1.2rem; color:var(--pink); }

.scratch-stage { position:relative; width:100%; max-width:320px; }
.scratch-wrap { position:relative; width:100%; aspect-ratio:1; border-radius:24px; overflow:hidden;
  box-shadow:0 8px 24px rgba(255,77,121,.25); }
.scratch-wrap.revealed { animation:reveal 1s cubic-bezier(.2,1.4,.4,1) forwards, glow 2s 1s infinite; }
@keyframes reveal { 0% { transform:scale(.88) rotate(-2deg); } 60% { transform:scale(1.07) rotate(1deg); } 100% { transform:scale(1); } }
@keyframes glow { 50% { box-shadow:0 0 38px 8px rgba(255,200,87,.75); } }
.scratch-prize { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:6px; padding:26px 22px; text-align:center; color:var(--ink);
  background:radial-gradient(circle at 30% 20%,#fffbe8,#ffe9a8 60%,#ffd166);
  border:4px double #e0a82e; border-radius:24px; }
.p-ico { font-size:3.4rem; }
.scratch-wrap.revealed .p-ico { animation:bounce 1.2s 1s infinite; }
.p-label { font-size:.8rem; letter-spacing:.25em; text-transform:uppercase; color:#a8741a; font-weight:700; }
.p-title { font-size:1.4rem; font-weight:800; line-height:1.2; color:var(--pink); }
.p-detail { font-size:1rem; opacity:.8; }
.shine { position:absolute; top:0; bottom:0; width:40%; left:-60%; background:linear-gradient(105deg,transparent,rgba(255,255,255,.75),transparent);
  transform:skewX(-20deg); pointer-events:none; }
.scratch-wrap.revealed .shine { animation:shine 1.4s .5s 2; }
@keyframes shine { to { left:130%; } }
#scratch-canvas { position:absolute; inset:0; width:100%; height:100%; touch-action:none; transition:opacity .7s, transform .7s; }
#scratch-canvas.gone { opacity:0; transform:scale(1.15); pointer-events:none; }
.sparkles { position:absolute; inset:0; pointer-events:none; }
.spark { position:absolute; left:50%; top:50%; font-size:1.6rem; opacity:0; animation:spark 1.6s ease-out forwards; }
@keyframes spark { 0% { opacity:1; transform:translate(-50%,-50%) scale(.3); } 100% { opacity:0; transform:translate(calc(-50% + var(--dx)),calc(-50% + var(--dy))) scale(1.2) rotate(180deg); } }
.actions { display:flex; flex-direction:column; gap:10px; align-items:center; animation:fade .6s; }
.actions[hidden] { display:none; }