*{box-sizing:border-box}
html,body{margin:0;background:#101216;color:#fff;font-family:Arial,Helvetica,sans-serif}
body{min-height:100vh;display:flex;justify-content:center}
.app{width:100%;max-width:560px;min-height:100vh;background:#25272b;padding:132px 12px 22px}
.start{position:fixed;inset:0;background:radial-gradient(circle at 50% 30%,#3d5f67,#16191d 58%);z-index:50;display:flex;align-items:center;justify-content:center;padding:22px}
.startbox{width:100%;max-width:500px;text-align:center;background:rgba(25,27,31,.96);border:1px solid #4e5960;border-radius:26px;padding:34px 22px;box-shadow:0 20px 70px rgba(0,0,0,.55)}
.startbox h1{font-size:32px;line-height:1.04;margin:0 0 20px;font-weight:1000}
.startbox p{font-size:22px;line-height:1.18;margin:0 auto 28px;font-weight:800}
.startbox button{width:100%;border:0;border-radius:15px;padding:17px;background:#60b0b8;color:#fff;font-size:22px;font-weight:1000;cursor:pointer}
.top{position:fixed;top:0;left:50%;transform:translateX(-50%);width:100%;max-width:560px;z-index:10000;background:#25272b;padding:10px 12px 10px;border-bottom:1px solid #454950;box-shadow:0 5px 16px rgba(0,0,0,.55);isolation:isolate}
.header{display:flex;align-items:center;gap:8px}
.qnum{width:55px;height:55px;border-radius:11px;background:#61aeb8;display:flex;align-items:center;justify-content:center;font-size:27px;font-weight:1000}
.title{flex:1;text-align:center;font-size:25px;line-height:1.05;font-weight:1000;white-space:nowrap}
.progress{font-size:13px;color:#bfc3c8;text-align:center;margin-top:6px}
.hearts{display:flex;justify-content:center;gap:3px;margin:6px 0 0;font-size:20px;line-height:1}
.heart{transition:opacity .2s,transform .2s}
.heart.lost{opacity:.13;transform:scale(.85)}
.question{margin-top:8px;position:relative;z-index:1}
.card{position:relative;height:335px;border-radius:20px;overflow:hidden;background:#333;margin-bottom:13px;border:2px solid #3d4147;box-shadow:0 8px 22px rgba(0,0,0,.28);z-index:1}
.card img{width:100%;height:100%;object-fit:cover;display:block;filter:saturate(.92) contrast(1.03)}
.card::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(0,0,0,.76),rgba(0,0,0,.03) 66%);pointer-events:none}
.card .label{position:absolute;left:14px;right:80px;bottom:18px;z-index:7;text-align:left;font-size:29px;font-weight:1000;line-height:1.05;text-shadow:0 2px 7px #000,0 0 3px #000}
.card .count{position:absolute;left:18px;right:18px;top:50%;transform:translateY(-50%);z-index:8;text-align:center;font-size:36px;font-weight:1000;color:#ffe65a;text-shadow:0 3px 10px #000,0 0 4px #000;opacity:0;transition:opacity .12s;line-height:1.05}
.card.revealed .count{opacity:1}.count-number{display:block;font-size:1.28em}.count-caption{display:block;margin-top:7px;font-size:.52em;color:#fff}
.card .select{position:absolute;z-index:5;width:58px;height:58px;border:0;font-size:30px;font-weight:1000;color:#fff;cursor:pointer;box-shadow:0 3px 10px rgba(0,0,0,.4)}
.card.top .select{right:12px;bottom:12px;border-radius:15px;background:#83c63d}
.card.bottom .select{right:12px;top:12px;border-radius:15px;background:#e45a50}
.card.correct::before,.card.wrong::before{content:"";position:absolute;inset:0;z-index:3;pointer-events:none}
.card.correct::before{background:rgba(47,190,79,.48)}
.card.wrong::before{background:rgba(224,53,53,.48)}
.result{display:none;position:absolute;left:12px;z-index:6;padding:7px 11px;border-radius:11px;font-size:17px;font-weight:1000;background:rgba(0,0,0,.58)}
.card.top .result{bottom:15px}
.card.bottom .result{top:15px}
.card.correct .result,.card.wrong .result{display:block}
.card.correct .result{border:2px solid #55e87c}
.card.wrong .result{border:2px solid #ff6969}
.vs{height:0;position:relative;z-index:7}
.vs span{position:absolute;left:50%;top:-43px;transform:translateX(-50%);width:82px;height:82px;border-radius:50%;background:#58a9b5;display:flex;align-items:center;justify-content:center;font-size:28px;font-weight:1000;box-shadow:0 4px 10px rgba(0,0,0,.4);border:3px solid #25272b}
.note{font-size:11px;color:#8f959d;text-align:center;margin-top:8px}
.overlay{position:fixed;inset:0;background:rgba(9,10,12,.84);z-index:30;display:none;align-items:center;justify-content:center;padding:20px}
.overlay.show{display:flex}
.modal{width:100%;max-width:480px;background:#26292e;border:1px solid #4b5058;border-radius:24px;padding:28px 22px;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.55)}
.modal .big{font-size:29px;font-weight:1000;line-height:1.08;margin-bottom:12px}
.modal .sub{font-size:20px;font-weight:800;color:#ffd94a;line-height:1.15}
.modal .bonus{font-size:38px;font-weight:1000;color:#fff;margin:16px 0 18px}
.modal .chance{font-size:26px;color:#fff;font-weight:1000;margin-bottom:14px;line-height:1.08}
.final-cta{display:flex;align-items:center;gap:12px;margin-top:16px}
.final-logo{width:82px;height:82px;object-fit:cover;border-radius:18px;box-shadow:0 4px 14px rgba(0,0,0,.4);flex:0 0 82px}
.install{margin-top:0;flex:1;padding:17px;border:0;border-radius:14px;background:#58a9b5;color:#fff;font-size:20px;font-weight:1000;cursor:pointer}
@media(max-width:420px){
 .title{font-size:22px}
 .qnum{width:50px;height:50px;font-size:24px}
 .card{height:300px}
 .card .label{font-size:27px}
 .card .count{font-size:24px}
}
/* Working PWA/CRM archive compatibility layer */
.start{display:flex}
.overlay{display:none}
.overlay.show{display:flex!important}