:root { --accent: #b1298f; --canvas: #fbf7fc; }
.saved { color: #30815a; background: #edf9f3; border-radius: 11px; padding: 8px 11px; font-size: 13px; font-weight: 700; }
.editor-layout { display: grid; grid-template-columns: minmax(340px, .85fr) minmax(360px, 1.15fr); gap: 28px; align-items: stretch; }
.editor { padding: 30px; box-shadow: none; }
.editor h1 { font-size: 40px; letter-spacing: -.05em; }
.form-grid { display: grid; gap: 18px; }
.field textarea { resize: vertical; }
.steps { display: grid; gap: 10px; margin: 22px 0; }
.steps div { display: flex; align-items: center; gap: 11px; padding: 11px; border-radius: 13px; background: #faf3fb; font-size: 14px; }
.steps strong { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; color: #fff; background: var(--accent); }
.full { width: 100%; }
.phone-wrap { display: grid; place-items: center; min-height: 650px; border-radius: 28px; background: radial-gradient(circle at 70% 20%, #fff 0 7%, transparent 8%), linear-gradient(145deg, #f5dbf3, #e6e1ff); overflow: hidden; }
.phone { width: min(390px, calc(100% - 30px)); min-height: 580px; padding: 54px 32px 32px; text-align: center; position: relative; overflow: hidden; border: 8px solid rgba(255,255,255,.82); border-radius: 38px; box-shadow: 0 30px 70px rgba(96,40,111,.2); }
.theme-violet { background: linear-gradient(155deg, #c8a4ff, #ffe0ed); }
.theme-sunset { background: linear-gradient(155deg, #ffb36b, #ffe8ba); }
.theme-mint { background: linear-gradient(155deg, #8ee4ca, #e9ffd9); }
.phone::before, .mini-game::before { content: ""; position: absolute; width: 300px; height: 300px; border-radius: 45%; right: -140px; bottom: -130px; background: rgba(255,255,255,.28); transform: rotate(25deg); }
.photo, .final-photo { width: 92px; height: 92px; display: grid; place-items: center; margin: 0 auto 20px; overflow: hidden; border: 5px solid rgba(255,255,255,.75); border-radius: 50%; color: #fff; background: #9d66da; font-size: 38px; font-weight: 900; box-shadow: 0 12px 25px rgba(77,43,104,.16); }
.photo img, .final-photo img { width: 100%; height: 100%; object-fit: cover; }
.phone .small { font-size: 13px; font-weight: 800; color: rgba(42,20,61,.63); }
.phone h2 { font-size: 34px; margin-bottom: 10px; }
.phone > p:not(.small) { min-height: 48px; color: #594562; }
.gift-hero { display: block; width: 150px; height: 150px; object-fit: contain; margin: 12px auto; animation: float 2s ease-in-out infinite alternate; }
.game-modal { position: fixed; inset: 0; z-index: 40; padding: 18px; background: rgba(31,18,38,.56); backdrop-filter: blur(10px); }
.game-modal[hidden] { display: none; }
.mini-game { width: min(900px, 100%); height: min(720px, calc(100vh - 36px)); margin: auto; border-radius: 28px; overflow: hidden; position: relative; box-shadow: 0 30px 90px rgba(0,0,0,.25); }
.game-hud { height: 66px; display: flex; align-items: center; justify-content: space-between; padding: 0 22px; position: relative; z-index: 5; background: rgba(255,255,255,.62); backdrop-filter: blur(8px); }
.game-hud button { width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(255,255,255,.7); font-size: 24px; }
.game-hud > span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; color: #fff; background: #9b267d; font-weight: 900; }
.game-copy { position: relative; z-index: 2; text-align: center; padding: 24px 20px 0; }
.game-copy h2 { font-size: clamp(28px, 5vw, 48px); margin-bottom: 6px; }
.drop-zone { position: absolute; inset: 145px 0 0; overflow: hidden; }
.falling { position: absolute; width: 78px; height: 78px; object-fit: contain; border: 0; background: transparent; animation: fall 4s linear forwards; filter: drop-shadow(0 9px 9px rgba(58,28,78,.16)); }
.falling:hover { animation-play-state: paused; }
.falling:active { transform: scale(.8); }
.final-message { position: absolute; z-index: 10; inset: 50% auto auto 50%; transform: translate(-50%, -50%); width: min(420px, calc(100% - 32px)); padding: 32px; text-align: center; }
.final-message[hidden] { display: none; }
.final-photo { width: 78px; height: 78px; }
@keyframes float { to { transform: translateY(-10px) rotate(3deg); } }
@keyframes fall { from { transform: translateY(-120px) rotate(-8deg); } to { transform: translateY(620px) rotate(14deg); } }
@media (max-width: 800px) { .editor-layout { grid-template-columns: 1fr; } .phone-wrap { min-height: 620px; } .saved { display: none; } }