/* PizziaMia — мобильная тема (основа: 390–414px, iPhone XS Max / Poco F3) */
:root{
  --primary:#F4511E; --primary-dark:#E8491D; --deep:#C62828;
  --yellow:#FFC93C; --cream:#FFF6EC; --text:#3A1F14; --muted:#8A5A44;
  --ok:#2E9E5B; --bad:#E53935; --radius:22px;
  --shadow:0 10px 30px rgba(140,40,10,.18);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
[hidden]{display:none!important}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(160deg,#FF7043 0%,var(--primary) 45%,var(--primary-dark) 100%);
  min-height:100vh; min-height:100dvh; overflow-x:hidden;
  -webkit-text-size-adjust:100%;
}
.app{
  width:100%; max-width:430px; margin:0 auto; min-height:100vh; min-height:100dvh;
  padding:calc(16px + env(safe-area-inset-top)) 16px calc(20px + env(safe-area-inset-bottom));
  display:flex; flex-direction:column;
  background:
    radial-gradient(circle at 15% 8%,rgba(255,201,60,.35) 0 60px,transparent 61px),
    radial-gradient(circle at 92% 30%,rgba(255,255,255,.12) 0 80px,transparent 81px),
    radial-gradient(circle at 10% 85%,rgba(255,201,60,.22) 0 70px,transparent 71px);
}
@media (min-width:600px){ .app{box-shadow:0 0 60px rgba(0,0,0,.2)} }

/* шапка */
.brand{display:flex;align-items:center;justify-content:center;gap:10px;padding:6px 0 14px}
.logo-wrap{width:56px;height:56px;border-radius:50%;background:#fff;display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.15);overflow:hidden}
.logo{width:46px;height:46px;object-fit:contain}
.logo-fallback{display:none}
.logo-wrap.no-img .logo-fallback{display:block}
.brand-name{font-size:28px;font-weight:900;color:#fff;letter-spacing:.3px;text-shadow:0 2px 0 rgba(0,0,0,.12)}

/* экраны */
.screen{display:none;flex:1;flex-direction:column}
.screen--active{display:flex;animation:pop .35s ease-out}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}

.card{background:var(--cream);border-radius:var(--radius);padding:22px 18px;box-shadow:var(--shadow)}
.center{text-align:center}
h1{font-size:26px;line-height:1.2;margin:6px 0 10px;font-weight:900;color:var(--deep)}
h2{font-size:22px;line-height:1.25;margin:4px 0 10px;font-weight:800;color:var(--deep)}
.lead{font-size:17px;line-height:1.45;color:var(--muted);margin:0 0 16px}
.emoji-row{font-size:40px;text-align:center;letter-spacing:6px}
.hero h1,.hero .lead{text-align:center}

.steps{list-style:none;padding:0;margin:4px 0 20px;display:grid;gap:10px}
.steps li{display:flex;align-items:center;gap:12px;font-size:16px;font-weight:600;background:#fff;border-radius:14px;padding:12px 14px}
.steps span{flex:0 0 30px;height:30px;border-radius:50%;background:var(--yellow);color:var(--deep);display:grid;place-items:center;font-weight:900}

/* кнопки */
.btn{display:block;width:100%;min-height:56px;border:0;border-radius:18px;font-size:18px;font-weight:800;cursor:pointer;font-family:inherit;transition:transform .08s,filter .15s}
.btn:active{transform:scale(.97)}
.btn--primary{background:linear-gradient(180deg,#FF6E3A,var(--primary-dark));color:#fff;box-shadow:0 6px 0 #B2330F,0 10px 20px rgba(178,51,15,.3)}
.btn--primary:active{box-shadow:0 2px 0 #B2330F}
.btn--next{margin-top:14px}

/* прогресс */
.progress-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;color:#fff;font-weight:700}
.layer-badge{background:var(--yellow);color:var(--deep);padding:6px 12px;border-radius:999px;font-size:14px;font-weight:900}
.counter{font-size:15px}
.progress{height:10px;background:rgba(255,255,255,.3);border-radius:999px;overflow:hidden;margin-bottom:14px}
.progress-bar{height:100%;width:0;background:var(--yellow);border-radius:999px;transition:width .35s ease}

/* вопрос и варианты */
.question{font-size:21px;margin:0 0 16px;color:var(--text)}
.options{display:grid;gap:10px}
.option{
  display:flex;align-items:center;gap:12px;width:100%;min-height:56px;padding:12px 14px;text-align:left;
  background:#fff;border:2.5px solid #FFD9C7;border-radius:16px;font-size:17px;font-weight:600;color:var(--text);
  font-family:inherit;cursor:pointer;transition:border-color .15s,background .15s,transform .08s;
}
.option:active{transform:scale(.98)}
.option .letter{flex:0 0 32px;height:32px;border-radius:10px;background:#FFE8DC;color:var(--primary-dark);display:grid;place-items:center;font-weight:900}
.option.is-correct{border-color:var(--ok);background:#E8F7EE}
.option.is-correct .letter{background:var(--ok);color:#fff}
.option.is-wrong{border-color:var(--bad);background:#FDECEC;animation:shake .35s}
.option.is-wrong .letter{background:var(--bad);color:#fff}
.option:disabled{cursor:default}
@keyframes shake{25%{transform:translateX(-6px)}50%{transform:translateX(6px)}75%{transform:translateX(-3px)}}

.feedback{min-height:26px;margin-top:14px;font-size:17px;font-weight:700;text-align:center}
.feedback.ok{color:var(--ok)} .feedback.bad{color:var(--bad)}
.lock-hint{margin-top:14px;text-align:center;color:#fff;font-weight:700;font-size:15px;opacity:.95}

/* разблокировка */
.unlock-icon{font-size:72px;animation:unlock .8s ease-out}
@keyframes unlock{0%{transform:scale(.3) rotate(-25deg);opacity:0}60%{transform:scale(1.25) rotate(8deg);opacity:1}100%{transform:scale(1)}}
.confetti-emoji{font-size:48px;animation:unlock .8s ease-out}

/* форма */
.claim{display:grid;gap:12px;text-align:left}
.claim label{display:grid;gap:6px;font-size:15px;font-weight:700;color:var(--muted)}
.claim input{width:100%;min-height:52px;border:2px solid #FFD9C7;border-radius:14px;padding:12px 14px;font-size:17px;font-family:inherit;background:#fff;color:var(--text)}
.claim input:focus{outline:none;border-color:var(--primary)}
.claim .btn{margin-top:6px}

.foot{text-align:center;color:rgba(255,255,255,.85);font-size:13px;margin-top:auto;padding-top:18px}

/* конфетти */
.confetti{position:fixed;inset:0;pointer-events:none;overflow:hidden;z-index:50}
.confetti i{position:absolute;top:-30px;font-style:normal;font-size:24px;animation:fall linear forwards}
@keyframes fall{to{transform:translateY(110vh) rotate(540deg)}}

@media (max-width:360px){ h1{font-size:23px} .question{font-size:19px} .option{font-size:16px} }
@media (prefers-reduced-motion:reduce){ *{animation:none!important;transition:none!important} }