:root{--bg-color:#f2f8f9;--text-dark:#2c4c5b;--primary:#92d0cd;--primary-dark:#6eb9b6;--accent:#ffeaaf;--girl-color:#ffd1dc;--girl-text:#e88ea2;--boy-color:#a2cffe;--boy-text:#65a1e6;--card-bg:#ffffffe6}*{box-sizing:border-box;-webkit-tap-highlight-color:transparent;margin:0;padding:0;font-family:Nunito,sans-serif}body{color:var(--text-dark);background-color:#2c4c5b;background-image:url(/bg.png);background-position:50%;background-repeat:no-repeat;background-size:cover;justify-content:center;align-items:center;height:100vh;display:flex;overflow:hidden}@keyframes panBackground{0%{background-position:0%}50%{background-position:100%}to{background-position:0%}}@media (width<=768px){body{background-size:auto 100%;animation:35s ease-in-out infinite panBackground}}#app{background:0 0;width:100%;max-width:450px;height:100vh;position:relative}.view{opacity:0;pointer-events:none;flex-direction:column;justify-content:center;width:100%;height:100%;padding:25px;transition:opacity .4s,transform .4s cubic-bezier(.2,.8,.2,1);display:flex;position:absolute;top:0;left:0;transform:translateY(10px)scale(.98)}.view.active{opacity:1;pointer-events:auto;transform:translateY(0)scale(1)}.header{text-align:center;margin-bottom:2rem}.logo-title{color:var(--text-dark);letter-spacing:-.5px;font-size:2.8rem;font-weight:800}.logo-subtitle{opacity:.7;font-size:1.1rem;font-weight:700}.countdown-wrapper{justify-content:center;margin-bottom:3.5rem;display:flex}.countdown{text-align:center;color:#2c4c5b;font-variant-numeric:tabular-nums;text-shadow:1px 1px 2px #0000000d;background:#fffffff2;border:4px solid #fff;border-radius:35px;padding:25px 40px;font-size:3.8rem;font-weight:800;box-shadow:0 15px 40px #00000040}.countdown span{opacity:.8;font-size:1.8rem;font-weight:800}.card{background:var(--card-bg);-webkit-backdrop-filter:blur(15px);text-align:center;border-radius:30px;margin-bottom:20px;padding:30px;box-shadow:0 10px 30px #0000000a}.transparent-card{background:#fff9;border:1px solid #fffc}label{margin-bottom:12px;font-size:1.1rem;font-weight:800;display:block}input{text-align:center;background:#fff;border:2px solid #e1e9ec;border-radius:18px;outline:none;width:100%;margin-bottom:15px;padding:18px;font-size:1.2rem;font-weight:700;transition:border-color .2s;box-shadow:inset 0 2px 4px #00000005}input:focus{border-color:var(--primary)}.error{color:#e74c3c;min-height:20px;margin-top:10px;font-size:1rem;font-weight:700}.btn{cursor:pointer;border:none;border-radius:18px;width:100%;padding:18px;font-size:1.2rem;font-weight:800;transition:transform .1s,box-shadow .2s}.btn:active:not(:disabled){transform:scale(.96)}.btn.primary{background-color:var(--primary);color:#fff;box-shadow:0 6px 15px #92d0cd66}.btn:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.gender-buttons{gap:15px;margin-top:25px;display:flex}.gender-btn{cursor:pointer;background:#fff;border:4px solid #0000;border-radius:25px;flex:1;padding:35px 15px;font-size:1.3rem;font-weight:800;transition:transform .2s,border-color .2s;box-shadow:0 6px 20px #0000000f}.gender-btn .icon{margin-bottom:15px;font-size:2.8rem;display:block}.gender-btn.girl{color:var(--girl-text)}.gender-btn.boy{color:var(--boy-text)}.gender-btn:active{transform:scale(.95)}.options-grid{flex-direction:column;gap:12px;margin:25px 0;display:flex}.option-btn{color:var(--text-dark);cursor:pointer;text-align:center;background:#ffffffd9;border:2px solid #ffffffb3;border-radius:20px;justify-content:center;align-items:center;padding:16px 20px;font-size:1rem;font-weight:800;transition:all .2s;display:flex;box-shadow:0 4px 15px #00000008}.option-btn.selected{border-color:var(--primary);background-color:#f1fafa;transform:translateY(-2px);box-shadow:0 4px 10px #92d0cd33}.bar-container{color:#fff;border-radius:18px;height:35px;margin-top:15px;font-size:1rem;font-weight:800;line-height:35px;display:flex;overflow:hidden}.bar{justify-content:center;align-items:center;min-width:15%;transition:width 1s cubic-bezier(.2,.8,.2,1);display:flex}.bar-girl{background-color:var(--girl-color);text-shadow:0 1px 2px #0000001a}.bar-boy{background-color:var(--boy-color);text-shadow:0 1px 2px #0000001a}#view-recap .card{max-height:90vh;padding:30px 20px;overflow-y:auto}#view-recap .card::-webkit-scrollbar{width:6px}#view-recap .card::-webkit-scrollbar-thumb{background:var(--primary-dark);border-radius:10px}h2{margin-bottom:8px;font-size:1.8rem;font-weight:800}.subtitle{opacity:.6;margin-bottom:5px;font-weight:700}.question-text{margin-top:15px;font-size:1.3rem;font-weight:800;line-height:1.4}@media (width<=768px){.view{padding:15px}.countdown-wrapper{margin-bottom:1.5rem}.countdown{border-radius:20px;padding:15px 25px;font-size:2.2rem}.countdown span{font-size:1.1rem}.card{border-radius:20px;padding:20px 15px}h2{margin-bottom:5px;font-size:1.3rem}.subtitle{margin-bottom:15px;font-size:.9rem}.question-text{margin-top:5px;margin-bottom:15px;font-size:1.1rem}.option-btn{border-width:1px;border-radius:14px;min-height:45px;padding:12px 15px;font-size:.95rem}.gender-btn{border-radius:16px;padding:15px 5px;font-size:1rem}.gender-btn .icon{margin-bottom:5px;font-size:2.2rem}#view-recap .card{padding:20px 10px}}