/* main.css — mobile-first, no render-blocking imports */
:root{--bg:#000048;--panel:#000090;--line:#0000ff;--accent:#5c99fe;--text:#fff;--muted:#c9d6ff}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:"Dosis",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--bg);color:var(--text);line-height:1.5}
a{color:#fff;text-decoration:none}
img{max-width:100%;display:block}
.container{max-width:420px;margin:0 auto;background:var(--panel);padding:12px 15px 90px;border-radius:0 0 10px 10px}
.site-header{display:flex;align-items:center;justify-content:space-between;padding:6px 0 4px}
.logo{font-weight:800;font-size:20px;letter-spacing:.5px}
.logo span{color:var(--accent)}

/* ---------- Ads: reserved space = zero layout shift ---------- */
.ad-wrap{margin:22px -15px;text-align:center;contain:layout}
.ad-label{font-size:10px;letter-spacing:1px;text-transform:uppercase;color:var(--muted);opacity:.7;margin-bottom:4px}
.ad-slot{min-height:280px;width:100%;display:flex;justify-content:center;align-items:center}
.ad-slot > div{margin:0 auto}
.ad-wrap.is-empty{display:none}
@media (max-width:359px){.ad-slot{min-height:250px}}

/* ---------- Video grid ---------- */
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:10px}
.card{position:relative;display:block;border-radius:8px;overflow:hidden;background:#00005e}
.card img{width:100%;aspect-ratio:3/4;object-fit:cover;filter:blur(2.7px);transition:filter .3s ease}
.card .title{display:block;font-size:13px;font-weight:600;padding:6px 6px 8px;text-align:center}
.play-button{position:absolute;top:42%;left:50%;width:40px;height:40px;background:rgba(255,255,255,.85);border-radius:50%;transform:translate(-50%,-50%);display:flex;justify-content:center;align-items:center;animation:pulse 1.5s infinite;cursor:pointer;z-index:2}
.play-button::before{content:'';margin-left:4px;border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent var(--bg)}
@keyframes pulse{0%{background:rgba(255,255,255,.85);transform:translate(-50%,-50%) scale(1);opacity:1}100%{transform:translate(-50%,-50%) scale(1.2);opacity:.6}}

/* ---------- Tutorial box (play pages) ---------- */
.tutorial-box{background:linear-gradient(to bottom right,#0707bc,#000048);border-radius:12px;padding:25px;max-width:340px;color:#fff;text-align:center;box-shadow:0 4px 12px rgba(0,0,0,.3);margin:30px auto}
.tutorial-box h2{font-size:20px;margin-bottom:20px}
.button-action{display:inline-block;width:80%;padding:14px 24px;margin:15px auto;text-align:center;border-radius:10px;font-weight:600;color:#fff;text-decoration:none;font-size:18px;position:relative;overflow:hidden;background:linear-gradient(to right,#0000ff,#000048);border:1px solid #0000fe;box-shadow:0 0 15px rgba(255,193,7,.5);transition:transform .3s ease,box-shadow .3s ease;animation:pulse-glow 2s infinite}
.button-action:hover{transform:scale(1.05);box-shadow:0 0 25px rgba(233,30,99,.6)}
.button-action.download{background:linear-gradient(to right,#000056,#0000da)}
@keyframes pulse-glow{0%{box-shadow:0 0 15px #2077fe}50%{box-shadow:0 0 25px #0248b1}100%{box-shadow:0 0 15px #00193f}}
.info-text{font-size:14px;margin:15px 0;color:#f5f5f5}
.alarm-bell{display:inline-block;animation:bell-jingle 1s ease-in-out infinite;transform-origin:top center}
@keyframes bell-jingle{0%{transform:rotate(0)}15%{transform:rotate(15deg)}30%{transform:rotate(-12deg)}45%{transform:rotate(10deg)}60%{transform:rotate(-8deg)}75%{transform:rotate(6deg)}100%{transform:rotate(0)}}

/* ---------- Blurred image (video/play pages) ---------- */
.video-bg1{width:90%;height:265px;filter:blur(2.8px);transition:filter .3s ease;display:block;margin:0 auto;border-radius:8px;object-fit:cover}
.cent{display:flex;justify-content:center}

/* ---------- Play/Next buttons row ---------- */
.button-row{display:flex;justify-content:center;gap:10px;margin-top:15px}
.btn-play{background:#007bff;color:#fff;padding:10px 20px;border-radius:8px;text-decoration:none;font-weight:600;display:inline-block}
.btn-next{background:#28a745;color:#fff;padding:10px 20px;border-radius:8px;text-decoration:none;font-weight:600;display:inline-block}

/* ---------- Age gate ---------- */
.age{text-align:center;color:#fff}
.age-message{font-weight:600;color:#5c99f7}
.age-button{margin-bottom:15px;padding:12px 25px;font-size:16px;font-weight:700;color:#fff;background:linear-gradient(to right,#0000ff,#000048);border:none;border-radius:30px;cursor:pointer;animation:zoomPulse 1.5s infinite;transition:transform .2s,box-shadow .2s}
.age-button:hover{transform:scale(1.05);box-shadow:0 6px 20px #35a2ff}
@keyframes zoomPulse{0%{transform:scale(1)}50%{transform:scale(1.07)}100%{transform:scale(1)}}

/* ---------- Badge chips ---------- */
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:14px 0}
.chips a{background:linear-gradient(45deg,#4d81e7,#00009e);padding:8px 16px;border-radius:30px;font-size:13px;font-weight:800;text-transform:uppercase}

/* ---------- Player ---------- */
h1{font-size:22px;margin:10px 0 8px;text-align:center}
.player{position:relative;border-radius:10px;overflow:hidden;background:#000;aspect-ratio:16/9}
.player video{width:100%;height:100%;display:block;background:#000;object-fit:contain}
.player .soon{display:none;position:absolute;inset:0;align-items:center;justify-content:center;background:rgba(0,0,40,.65);font-weight:700;font-size:18px}
.player.no-video .soon{display:flex}
.player.no-video video{pointer-events:none}
.nav-row{display:flex;gap:10px;justify-content:space-between;margin:14px 0 6px}
.btn{flex:1;text-align:center;padding:12px 14px;border-radius:10px;font-weight:700;background:linear-gradient(to right,#0000ff,#000048);border:1px solid #2a4dff}
.btn.alt{background:#1f8a3b;border-color:#2fb352}
.section-title{text-transform:uppercase;color:var(--accent);font-size:16px;text-align:center;margin:24px 0 6px}

/* ---------- Article ---------- */
.article-title{text-transform:uppercase;color:var(--accent);font-size:1.15em;margin:28px 0 6px;text-align:center}
.paragraph-box{padding:14px;margin-bottom:14px;border-radius:6px;border:1px solid var(--line)}
.paragraph-box strong{color:#66a0e0;font-weight:600}
.paragraph-box ul{padding-left:18px;margin:8px 0 0}
.chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:14px 0}
.chips a{background:linear-gradient(45deg,#4d81e7,#00009e);padding:8px 16px;border-radius:30px;font-size:13px;font-weight:800;text-transform:uppercase}
footer{text-align:center;font-size:13px;color:var(--muted);margin-top:30px}
footer a{color:#fbd700;margin:0 8px}

/* ---------- Rewarded / coins ---------- */
.reward-box{display:flex;align-items:center;justify-content:space-between;gap:10px;background:#ffefce;border:1px solid #ffb000;border-radius:10px;padding:8px 10px;margin:6px 0}
.coin-badge{display:flex;align-items:center;gap:8px;background:#fff;border-radius:30px;padding:5px 12px;border:2px solid #dead00;color:#000;font-weight:700}
.coin-icon{width:22px;height:22px;background:#f3b400;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:12px;font-weight:700}
.earn-btn,.watch-btn{border:0;border-radius:25px;padding:10px 18px;font:inherit;font-weight:800;color:#fff;background:linear-gradient(135deg,#4caf50,#3c9a40);cursor:pointer}
.earn-btn[disabled],.watch-btn[disabled]{opacity:.7}
.ad-tag{font-size:9px;opacity:.8;margin-left:6px;border:1px solid rgba(255,255,255,.6);border-radius:3px;padding:0 3px}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.6);display:none;align-items:center;justify-content:center;z-index:50;padding:16px}
.overlay.open{display:flex}
.popup{position:relative;background:#fff;color:#111;border-radius:14px;padding:22px 18px;max-width:340px;width:100%;text-align:center}
.popup .close{position:absolute;top:6px;right:12px;font-size:26px;cursor:pointer;color:#555}
.popup .divider{margin:14px 0;color:#888;font-size:12px}
.play-anyway{color:#0040d0;font-weight:700}
.toast{position:fixed;left:50%;bottom:110px;transform:translateX(-50%);background:#111;color:#fff;padding:10px 16px;border-radius:20px;z-index:60;font-size:14px}


/* ---------- Tutorial Box & Buttons ---------- */
.tutorial-box{background:linear-gradient(135deg,#0707bc 0%,#000048 100%);border-radius:14px;padding:24px 20px;max-width:360px;width:92%;margin:25px auto;text-align:center;box-shadow:0 8px 24px rgba(0,0,0,.45);border:1px solid rgba(255,255,255,.15);box-sizing:border-box;display:block}
.tutorial-box h2{font-size:20px;font-weight:800;color:#fff;margin:0 0 18px;text-transform:uppercase;letter-spacing:.5px;text-align:center}
.button,.button-action,a.button,a.button-action,a.play-video{display:flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;width:90%!important;max-width:290px!important;margin:14px auto!important;padding:14px 20px!important;border-radius:12px!important;font-size:18px!important;font-weight:700!important;color:#fff!important;text-decoration:none!important;background:linear-gradient(90deg,#0055ff 0%,#000088 100%)!important;border:2px solid #3377ff!important;box-shadow:0 4px 15px rgba(0,85,255,.45)!important;transition:transform .2s ease,box-shadow .2s ease!important;cursor:pointer!important;box-sizing:border-box!important;animation:pulse-glow 2s infinite!important}
.button:hover,.button-action:hover,a.button:hover,a.button-action:hover,a.play-video:hover{transform:scale(1.04)!important;box-shadow:0 6px 22px rgba(0,102,255,.75)!important}
.download-now,.button-action.download,a.download-now,a.button-action.download{background:linear-gradient(90deg,#001188 0%,#0044ee 100%)!important;border:2px solid #2a66ff!important;box-shadow:0 4px 15px rgba(0,68,238,.45)!important}
.download-now:hover,.button-action.download:hover,a.download-now:hover,a.button-action.download:hover{transform:scale(1.04)!important;box-shadow:0 6px 22px rgba(42,102,255,.75)!important}
.play-icon{display:inline-block!important;font-size:16px!important}