/* NovaPix v21: opening screen, glow accents, light colours, free/paid, characters, app */
#splash{position:fixed;inset:0;z-index:1000;display:grid;place-items:center;background:radial-gradient(60% 45% at 50% 45%,rgba(249,115,22,.28),transparent 70%),#09090b;transition:opacity .45s,visibility .45s}
#splash.out{opacity:0;visibility:hidden}
#splash .sp-in{display:flex;flex-direction:column;align-items:center;gap:16px;animation:spIn .8s cubic-bezier(.2,.8,.2,1) both}
#splash svg{width:88px;height:88px;filter:drop-shadow(0 0 28px rgba(249,115,22,.55));animation:spGlow 1.6s ease-in-out infinite alternate}
#splash b{font-size:1.6rem;font-weight:850;letter-spacing:-.02em;color:#fafafa}#splash em{font-style:normal;background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
@keyframes spIn{from{opacity:0;transform:scale(.86) translateY(8px)}to{opacity:1;transform:none}}
@keyframes spGlow{from{filter:drop-shadow(0 0 14px rgba(249,115,22,.35))}to{filter:drop-shadow(0 0 34px rgba(225,29,72,.6))}}
@media (prefers-reduced-motion:reduce){#splash .sp-in,#splash svg{animation:none}}

/* glow accents */
.btn-main{position:relative;box-shadow:0 10px 28px rgba(249,115,22,.32),0 0 0 1px rgba(255,255,255,.06) inset}
.btn-main:hover{box-shadow:0 12px 36px rgba(249,115,22,.45),0 0 24px rgba(225,29,72,.25)}
.cd{transition:transform .2s,box-shadow .25s,border-color .25s}
@media (hover:hover){.cd:hover{transform:translateY(-3px);box-shadow:0 22px 50px rgba(0,0,0,.35),0 0 0 1px rgba(249,115,22,.35),0 0 40px rgba(249,115,22,.12)}}
.cd.flag{box-shadow:0 0 0 1px rgba(249,115,22,.55),0 18px 60px rgba(249,115,22,.18)}
.sec h2{position:relative}

/* header buttons: socials, app, colours */
.hd-r{gap:8px}
.ib{display:inline-grid;place-items:center;width:40px;height:40px;border:0;border-radius:12px;background:#1c1c21;color:var(--tx);cursor:pointer;flex:none}
.ib svg{width:20px;height:20px}
.ib:hover{box-shadow:0 0 0 1px rgba(249,115,22,.5),0 0 18px rgba(249,115,22,.25)}
.hd-soc .soc a{width:36px;height:36px}
@media (max-width:899px){.hd-soc{display:none}}
@media (max-width:420px){.lang button{min-width:38px}.ib{width:36px;height:36px}.logo span{font-size:1rem}}
.soc{display:inline-flex;gap:8px;align-items:center;flex-wrap:wrap}
.soc a{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;background:#1c1c21;color:var(--tx);text-decoration:none;transition:transform .15s,box-shadow .2s}
.soc a svg{width:20px;height:20px}
.soc a:hover{transform:translateY(-2px)}
.soc .soc-telegram:hover{box-shadow:0 0 18px rgba(42,171,238,.6)}.soc .soc-tiktok:hover{box-shadow:0 0 18px rgba(255,0,80,.5)}.soc .soc-facebook:hover{box-shadow:0 0 18px rgba(24,119,242,.6)}.soc .soc-instagram:hover{box-shadow:0 0 18px rgba(225,48,108,.6)}
.ft-c{align-items:center}
.ft-app{margin:14px 0 0}

/* character mosaic on the flagship card + characters gallery */
.cmos{display:grid!important;grid-template-columns:1fr 1fr;gap:2px}
.cmos img{width:100%;height:100%;object-fit:cover}
.chars{margin-top:26px}
.chars .sh h3{font-size:1.3rem;margin:0 0 4px}.chars .sh p{color:var(--tx2);margin:0 0 14px}
.chg{display:grid;grid-auto-flow:column;grid-auto-columns:120px;grid-template-rows:auto;gap:10px;overflow-x:auto;padding:4px 2px 12px;scroll-snap-type:x mandatory;scrollbar-width:thin}
@media (min-width:768px){.chg{grid-auto-flow:row;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));overflow:visible}}
.chc{scroll-snap-align:start;display:flex;flex-direction:column;gap:6px;padding:0;border:0;background:none;color:var(--tx);font:inherit;font-size:.82rem;font-weight:700;cursor:pointer;text-align:center}
.chc img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:14px;background:#1f1f25;transition:transform .2s,box-shadow .2s}
.chc:hover img{transform:translateY(-2px);box-shadow:0 0 0 2px #f97316,0 10px 30px rgba(249,115,22,.3)}

/* free vs paid */
.sec-free .grid .cd .cm img{object-fit:cover}
.fv{margin:0 0 20px;padding:18px;border-radius:22px;background:linear-gradient(160deg,rgba(245,158,11,.10),rgba(225,29,72,.08));border:1px solid rgba(249,115,22,.28)}
.fv h3{margin:0 0 12px;font-size:1.15rem}
.fv-g{display:grid;gap:12px}@media (min-width:640px){.fv-g{grid-template-columns:1fr 1fr}}
.fv-c{padding:14px 16px;border-radius:16px;background:var(--card);border:1px solid var(--line)}
.fv-c b{display:block;font-size:1.05rem;margin-bottom:8px}.fv-paid b{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.fv-c ul{list-style:none;margin:0;padding:0;display:grid;gap:6px;color:var(--tx2);font-size:.95rem}
.fv-c li{display:flex;gap:8px;align-items:flex-start}.fv-c li svg{width:18px;height:18px;flex:none;margin-top:3px;color:#f97316}
.freecd .gift{background:linear-gradient(135deg,#22c55e,#16a34a)!important;color:#fff}

/* character video form */
.cvw{display:grid;gap:14px}
.cvl>b{display:block;font-weight:750;font-size:.95rem;margin-bottom:8px}
.cvp{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:92px;gap:8px;overflow-x:auto;padding:2px 2px 10px;scrollbar-width:thin}
.cvc{display:flex;flex-direction:column;gap:4px;padding:0;border:0;background:none;color:var(--tx);font:inherit;font-size:.72rem;font-weight:700;cursor:pointer;text-align:center;line-height:1.2}
.cvc img{width:92px;height:122px;object-fit:cover;border-radius:12px;border:2px solid transparent;background:#1f1f25}
.cvc.on img{border-color:#f97316;box-shadow:0 0 0 2px rgba(249,115,22,.35),0 0 20px rgba(249,115,22,.4)}
.cvo{display:flex;flex-wrap:wrap;gap:8px}
.cvo button{border:1px solid var(--line);background:#1d1d22;color:var(--tx);font:inherit;font-weight:700;font-size:.9rem;min-height:44px;padding:0 14px;border-radius:999px;cursor:pointer}
.cvo button.on{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 6px 18px rgba(249,115,22,.3)}
#of textarea[name=cv_text]{min-height:96px}
.cv-tpl{justify-self:start;margin-top:-6px}

/* done screen */
.om-share{padding:14px;border-radius:16px;background:#1d1d22;border:1px solid var(--line)}
.om-share p{margin:0 0 10px;font-weight:700}
.om-follow{display:flex;flex-direction:column;align-items:center;gap:10px;padding-top:6px}
.om-follow b{font-size:.95rem;color:var(--tx2)}
.om-gate{padding:16px;border-radius:16px;background:#1d1d22;text-align:center}

/* install sheet */
.np-sheet{position:fixed;inset:0;z-index:200;background:rgba(0,0,0,.6);display:flex;align-items:flex-end;justify-content:center}
.np-sheet-c{width:min(460px,100%);margin:0 0 env(safe-area-inset-bottom);padding:22px 20px calc(22px + env(safe-area-inset-bottom));border-radius:24px 24px 0 0;background:var(--card);display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center}
.np-sheet-c img{border-radius:14px}.np-sheet-c p{margin:0;color:var(--tx2)}.np-sheet-c .btn{width:100%}
@media (min-width:640px){.np-sheet{align-items:center}.np-sheet-c{border-radius:24px}}
.is-app .bar{padding-bottom:calc(12px + env(safe-area-inset-bottom))}

/* tablet: 2 → 3 columns, comfortable spacing */
@media (min-width:768px) and (max-width:1023px){.grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.hero-g{gap:28px}}

/* ---------- light colours ---------- */
html[data-theme=light]{--bg:#faf7f2;--bg2:#f2ede4;--card:#ffffff;--line:#e6dfd3;--tx:#18161a;--tx2:#4a4550;--mute:#7a7480}
html[data-theme=light] body{background:var(--bg);color:var(--tx)}
html[data-theme=light] .hd{background:rgba(250,247,242,.86)}
html[data-theme=light] .hn{background:rgba(250,247,242,.97)}
html[data-theme=light] .hn a:hover,html[data-theme=light] .hn a.on{color:var(--tx);background:#efe8dc}
html[data-theme=light] .hb,html[data-theme=light] .lang,html[data-theme=light] .ib,html[data-theme=light] .soc a,html[data-theme=light] .cn a{background:#efe8dc;color:var(--tx)}
html[data-theme=light] .hb span{background:var(--tx)}
html[data-theme=light] .lang button.on{background:#fff;color:var(--tx);box-shadow:0 1px 4px rgba(0,0,0,.08)}
html[data-theme=light] .hero h1{background:linear-gradient(180deg,#18161a 30%,#9a3412);-webkit-background-clip:text;background-clip:text;color:transparent}
html[data-theme=light] .btn-ghost{background:#ece5d9;color:var(--tx)}
html[data-theme=light] .cm,html[data-theme=light] .chc img,html[data-theme=light] .cvc img{background:#ece5d9}
html[data-theme=light] .cd{background:var(--card);box-shadow:0 8px 26px rgba(60,40,20,.08);border-color:var(--line)}
html[data-theme=light] .sec.soft,html[data-theme=light] .soft{background:var(--bg2)}
html[data-theme=light] .om-c,html[data-theme=light] .np-sheet-c{background:#fff;color:var(--tx)}
html[data-theme=light] .om-x,html[data-theme=light] .cp{background:#efe8dc;color:var(--tx)}
html[data-theme=light] #of input,html[data-theme=light] #of select,html[data-theme=light] #of textarea,html[data-theme=light] .find input{background:#fff;border-color:#d9d0c2;color:var(--tx)}
html[data-theme=light] .om-sv,html[data-theme=light] .pay,html[data-theme=light] .om-share,html[data-theme=light] .om-gate,html[data-theme=light] .wcar,html[data-theme=light] .cvo button{background:#f6f1e8;color:var(--tx)}
html[data-theme=light] .cvo button.on{background:var(--grad);color:#fff}
html[data-theme=light] .file-b{color:var(--tx)}
html[data-theme=light] .bar{background:rgba(250,247,242,.94)}
html[data-theme=light] .hv-tag{background:rgba(255,255,255,.85);color:var(--tx)}
html[data-theme=light] .ft-c a:hover,html[data-theme=light] .ptable tr:hover td{color:var(--tx)}
html[data-theme=light] .om{background:rgba(30,20,10,.45)}
html[data-theme=light] .ad .ad-in{background:#fff}
@media (max-width:599px){#inst{display:none}.hd-in{gap:8px}.hd-r{gap:6px}.lang{padding:2px}.lang button{min-width:36px;min-height:36px;font-size:.78rem}.ib{width:36px;height:36px}.hb{width:40px;height:40px;padding:0 9px}.logo{font-size:1.02rem;gap:7px}.logo svg{width:26px;height:26px}}
@media (max-width:359px){.logo em{display:none}}
.hn-app{font-weight:800}
@media (min-width:1200px){.hn-app{display:none!important}}
.om-rc svg{width:24px;height:24px;flex:none}
#of>*,.cvw,.cvw>*,.cvl{min-width:0;max-width:100%}
.cvp{max-width:100%}