*{box-sizing:border-box;margin:0;padding:0;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif}
body{
min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;padding:20px 20px 80px 20px;color:#fff;
background:linear-gradient(-45deg,#0f172a,#1e293b,#0f172a,#1e3a8a);
background-size:400% 400%;animation:bg 20s ease infinite;
}
@keyframes bg{0%{background-position:0% 50%}50%{background-position:100% 50%}100%{background-position:0% 50%}}

.seo-heading{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.app{max-width:440px;width:100%;text-align:center;background:rgba(15,23,42,.65);padding:25px;border-radius:24px;backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.05);box-shadow:0 20px 40px rgba(0,0,0,.3);position:relative;z-index:2}
.gamification-panel{background:rgba(255,255,255,.05);padding:12px;border-radius:16px;margin-bottom:12px;border:1px solid rgba(255,255,255,.05);text-align:left}
.level-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;font-size:14px}
.level-title{font-weight:700;color:#38bdf8}
.xp-text{margin-left:auto;font-size:12px;opacity:.7}
.xp-bg{height:6px;background:rgba(255,255,255,.1);border-radius:10px;overflow:hidden}
.xp-bar{height:100%;width:0%;background:linear-gradient(90deg,#38bdf8,#a78bfa);transition:width .5s ease}
.btn-reward-ad{width:100%;background:linear-gradient(135deg, #b45309, #d97706);color:#fff;border:none;padding:8px 12px;border-radius:12px;font-size:13px;font-weight:600;cursor:pointer;margin-bottom:15px;transition:.2s ease;box-shadow:0 4px 10px rgba(217,119,6,.2);display:flex;align-items:center;justify-content:center;gap:6px}
.btn-reward-ad:hover{background:linear-gradient(135deg, #d97706, #f59e0b);transform:translateY(-1px)}
.cards-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px;padding:0 4px;font-size:12px;opacity:.8;font-weight:500}
.info-trigger{cursor:pointer;background:rgba(255,255,255,.1);border:none;color:#38bdf8;width:18px;height:18px;border-radius:50%;font-size:11px;font-weight:bold;display:inline-flex;align-items:center;justify-content:center;transition:.2s}
.info-trigger:hover{background:#38bdf8;color:#0f172a}
.cards{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px;margin-bottom:20px}
.card{padding:12px 6px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);cursor:pointer;transition:.3s ease;font-size:12px;line-height:1.4}
.card strong{display:block;font-size:13px;margin-bottom:2px}
.card:hover{background:rgba(255,255,255,.08)}
.card.active{border-color:#38bdf8;background:rgba(56,189,248,.1);box-shadow:0 0 15px rgba(56,189,248,.15)}
.circle{width:240px;height:240px;margin:15px auto;border-radius:50%;overflow:hidden;position:relative;border:4px solid rgba(255,255,255,.15);box-shadow:0 0 30px rgba(0,0,0,0.2);background:rgba(255,255,255,.01)}
.liquid{position:absolute;left:0;bottom:0;width:100%;height:0%;transition:height linear,background 0.8s ease,opacity .5s ease}
.content{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:2}
.emoji{font-size:40px;animation:pulse 2s infinite ease-in-out;will-change:transform}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
.phase{font-size:22px;font-weight:600;margin-top:4px}
.timer{font-size:50px;font-weight:800;line-height:1}
.info-row{display:flex;justify-content:space-between;align-items:center;margin:15px 5px 8px;font-size:13px;opacity:.8}
.progress{height:5px;background:rgba(255,255,255,.1);border-radius:99px;overflow:hidden;margin-bottom:20px}
.bar{height:100%;width:0;background:#38bdf8;transition:width 0.3s linear}
.btn-main{width:100%;border:none;background:#2563eb;color:#fff;padding:14px;border-radius:16px;font-size:16px;font-weight:600;cursor:pointer;transition:.2s ease;box-shadow:0 4px 12px rgba(37,99,235,.25);margin-bottom:10px}
.btn-main:hover{background:#3b82f6;transform:translateY(-1px)}
.btn-main:active{transform:translateY(1px)}
.btn-audio{width:100%;border:none;background:rgba(255,255,255,.08);color:#fff;border:1px solid rgba(255,255,255,.15);padding:10px;border-radius:16px;font-size:14px;font-weight:600;cursor:pointer;transition:.2s ease}
.btn-audio:hover{background:rgba(255,255,255,.15)}
.btn-audio.muted{background:rgba(220,38,38,.15);border-color:rgba(220,38,38,.3);color:#ef4444}
.achievements{margin-top:20px;padding-top:15px;border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:space-around}
.badge{opacity:.25;transition:.5s ease;text-align:center;font-size:12px;max-width:80px}
.badge.unlocked{opacity:1;transform:scale(1.05);filter:drop-shadow(0 0 8px rgba(251,191,36,.6))}
.badge-icon{font-size:28px;margin-bottom:2px}
.modal-overlay{position:fixed;inset:0;background:rgba(15,23,42,.8);backdrop-filter:blur(8px);display:flex;justify-content:center;align-items:center;z-index:1000;opacity:0;pointer-events:none;transition:opacity .3s ease;padding:20px}
.modal-overlay.active{opacity:1;pointer-events:all}
.modal-box{background:#1e293b;border:1px solid rgba(255,255,255,.1);border-radius:20px;max-width:400px;width:100%;padding:22px;box-shadow:0 25px 50px -12px rgba(0,0,0,0.5);transform:translateY(20px);transition:transform .3s ease;text-align:left;max-height:85vh;overflow-y:auto}
.modal-overlay.active .modal-box{transform:translateY(0)}
.modal-title{font-size:18px;font-weight:700;margin-bottom:15px;display:flex;justify-content:space-between;align-items:center;color:#38bdf8}
.modal-close{background:none;border:none;color:#fff;font-size:22px;cursor:pointer;opacity:.6;transition:.2s}
.modal-close:hover{opacity:1}
.science-item{margin-bottom:16px;font-size:13px;line-height:1.5}
.science-item strong{display:block;font-size:14px;color:#fbbf24;margin-bottom:3px}
.footer-ad-container{position:fixed;bottom:0;left:0;width:100%;height:60px;background:rgba(15,23,42,.9);border-top:1px solid rgba(255,255,255,.1);display:flex;justify-content:center;align-items:center;z-index:999;backdrop-filter:blur(10px)}
.ad-slot-placeholder{width:320px;height:50px;background:rgba(255,255,255,.03);border:1px dashed rgba(255,255,255,.2);display:flex;justify-content:center;align-items:center;color:rgba(255,255,255,.4);font-size:11px;font-weight:bold;letter-spacing:1px}