*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font:16px/1.35 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;background:#f6f4ef;color:#1d1d1f;padding-bottom:env(safe-area-inset-bottom)}
a{color:inherit;text-decoration:none}
button{font:inherit;cursor:pointer;border:0;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}

.topwrap{position:sticky;top:0;z-index:5}
.top{display:flex;align-items:center;gap:10px;padding:10px max(14px,env(safe-area-inset-left));padding-top:max(10px,env(safe-area-inset-top));background:#14213d;color:#fff}
.logo{display:flex;align-items:center;gap:8px;font-weight:800;font-size:20px;min-width:0}
.logo img{width:34px;height:34px}
.logo span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.top .flag{font-size:22px}
.agebtn{margin-left:auto;background:#ffb703;color:#14213d;border-radius:20px;padding:7px 14px;font-size:15px;font-weight:800;white-space:nowrap}
.agebtn+.lockbtn{margin-left:0}
.lockbtn{margin-left:auto;background:rgba(255,255,255,.12);color:#fff;border-radius:20px;padding:7px 12px;font-size:14px;white-space:nowrap}

/* разделы: крупные кнопки под палец, на узком экране — прокрутка вбок */
.secs{display:flex;gap:10px;overflow-x:auto;padding:10px max(14px,env(safe-area-inset-left));background:#fff;box-shadow:0 2px 10px rgba(20,33,61,.08);scrollbar-width:none;-webkit-overflow-scrolling:touch;scroll-padding:0 14px}
.secs::-webkit-scrollbar{display:none}
.sec-b{flex:0 0 auto;display:flex;align-items:center;gap:8px;min-height:56px;padding:8px 18px 8px 12px;border-radius:18px;background:#f0ede6;color:#14213d;font-size:18px;font-weight:800;white-space:nowrap;border:3px solid transparent}
.sec-b .ic{font-size:28px;line-height:1}
.sec-b.on{background:var(--c);color:#fff;box-shadow:0 3px 10px rgba(0,0,0,.18)}
.sec-b:not(.on):active{border-color:var(--c)}
@media (min-width:1000px){.secs{justify-content:center}}
@media (max-width:560px){.sec-b{font-size:16px;min-height:52px;padding:6px 14px 6px 10px}.sec-b .ic{font-size:24px}}
/* телефон боком: шапка не прилипает, чтобы не отнимать полэкрана */
@media (max-height:500px){.topwrap{position:static}.secs{padding-block:6px}.sec-b{min-height:44px;padding:4px 12px 4px 8px;font-size:15px}.sec-b .ic{font-size:21px}}
/* полоска не влезает — справа затухание: видно, что её можно листать */
.secs.more{-webkit-mask-image:linear-gradient(to right,#000 82%,transparent);mask-image:linear-gradient(to right,#000 82%,transparent)}
.psec-hint{margin:-4px 0 8px;font-size:13px;color:#777;text-align:left}
#psave{position:sticky;bottom:0;box-shadow:0 -8px 12px #fff}
.psecs{display:flex;flex-direction:column;gap:8px;text-align:left}
.psec{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:12px;background:#f6f4ef;cursor:pointer;font-weight:700}
.psec input{width:24px;height:24px;margin:0;accent-color:#fb8500;flex:none}
.psec .ic{font-size:22px}
.psec small{margin-left:auto;color:#999;font-weight:400;font-size:12px}
.psec.na b{color:#888}

/* первый вход */
#setup{display:flex;justify-content:center;padding:24px 14px 40px}
.card-setup{background:#fff;border-radius:22px;max-width:560px;width:100%;padding:28px 24px;box-shadow:0 6px 30px rgba(20,33,61,.08);text-align:center}
.card-setup .hero-art{display:block;width:calc(100% + 48px);max-width:none;height:auto;margin:-28px -24px 6px;border-radius:22px 22px 0 0}
.card-setup h1{font-size:28px;margin:10px 0 8px;line-height:1.15}
.tag{margin:0 0 10px;color:#fb8500;font-weight:800;font-size:18px}
.lead{color:#555;margin:0 0 20px}
.fld{display:block;text-align:left;font-weight:700;margin:16px 0 8px}
.fld small{font-weight:400;color:#888}
.fld input{display:block;width:100%;margin-top:8px;font:inherit;font-size:18px;padding:12px 14px;border:2px solid #e3e0d8;border-radius:12px;background:#fbfaf7}
.ages{display:flex;flex-direction:column;gap:10px;text-align:left}
.grp small{display:block;color:#888;font-size:13px;margin-bottom:4px}
.grp div{display:flex;gap:8px;flex-wrap:wrap}
.age{width:54px;height:54px;border-radius:14px;background:#f0ede6;font-size:22px;font-weight:800;color:#14213d}
.age.on{background:#ffb703;box-shadow:0 0 0 3px #14213d inset}
.go{display:block;width:100%;margin-top:22px;padding:15px;border-radius:14px;background:#fb8500;color:#fff;font-size:19px;font-weight:800}
.go:disabled{background:#d9d4c7}
.fine{font-size:13px;color:#888;margin-top:14px}
.fine a{text-decoration:underline}
.link{background:none;color:#2f80ed;margin-top:12px;font-size:15px}

/* главная */
#grid{padding:14px max(14px,env(safe-area-inset-left)) 30px}
.empty{padding:30px;text-align:center;color:#777}
.hero{display:flex;gap:16px;align-items:center;background:#fff;border-radius:20px;padding:12px;box-shadow:0 3px 14px rgba(0,0,0,.06);border-left:8px solid var(--c);margin-bottom:16px}
.hth{position:relative;flex:0 0 46%;max-width:420px;aspect-ratio:16/9;border-radius:14px;overflow:hidden;background:#ddd}
.hth img{width:100%;height:100%;object-fit:cover}
.hplay{position:absolute;inset:0;margin:auto;width:64px;height:64px;border-radius:50%;background:rgba(0,0,0,.55);color:#fff;font-size:30px;display:flex;align-items:center;justify-content:center;padding-left:5px}
.htx small{color:var(--c);font-weight:800;text-transform:uppercase;font-size:13px}
.htx b{display:block;font-size:20px;margin:4px 0}
.htx i{color:#777;font-style:normal}
.tiles{display:flex;gap:12px;overflow-x:auto;padding:4px 2px 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.tiles::-webkit-scrollbar{display:none}
.tile{flex:0 0 132px;text-align:center}
.tile img{width:112px;height:112px;border-radius:50%;object-fit:cover;border:5px solid var(--c);background:#ddd}
.tile b{display:block;font-size:14px;margin-top:4px;line-height:1.2}
.tile i{display:block;font-size:12px;color:#888;font-style:normal}
.sec{margin-top:14px}
.sec h2{font-size:20px;margin:6px 0 10px;color:#14213d;border-left:6px solid var(--c);padding-left:10px}
.sec h2 small{color:#999;font-weight:400;font-size:14px}
.rowx{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.rowx::-webkit-scrollbar{display:none}
.rowx .card{flex:0 0 240px}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:14px}
.card b{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14px;margin-top:6px;font-weight:600}
.th{position:relative;aspect-ratio:16/9;border-radius:12px;overflow:hidden;background:#ddd}
.th img{width:100%;height:100%;object-fit:cover;display:block}
.d{position:absolute;right:6px;bottom:6px;background:rgba(0,0,0,.75);color:#fff;font-size:12px;padding:1px 5px;border-radius:4px}
.mark{position:absolute;left:6px;top:6px;font-size:12px;font-weight:800;padding:2px 7px;border-radius:6px;color:#fff}
.mark.ok{background:rgba(39,174,96,.92)}
.mark.new{background:#e63946}
.pg{position:absolute;left:0;bottom:0;height:4px;background:#e63946}
.foot{text-align:center;margin-top:30px}

/* просмотр: плеер YouTube целиком, ничего поверх */
#watch{display:flex;gap:18px;padding:14px max(14px,env(safe-area-inset-left))}
.wmain{flex:1;min-width:0}
#stage{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:14px;overflow:hidden}
#frame,#frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.wbar{display:flex;gap:10px;margin-top:12px}
.pill{background:#fff;border-radius:24px;padding:11px 18px;font-weight:700;box-shadow:0 2px 8px rgba(0,0,0,.08)}
.go2{margin-left:auto;background:#fb8500;color:#fff}
.pulse{animation:pulse 1s ease-in-out infinite alternate}
@keyframes pulse{to{transform:scale(1.08)}}
#vtitle{font-size:20px;margin:12px 0 4px}
#vser{color:#666}
#vser a{color:#2f80ed}
.side{flex:0 0 340px;display:flex;flex-direction:column;gap:12px}
.side h3{margin:0}
@media (max-width:900px){#watch{flex-direction:column}.side{flex:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}.side h3{grid-column:1/-1}}
@media (max-width:560px){.hero{flex-direction:column;align-items:stretch}.hth{flex:none;max-width:none}.rowx .card{flex-basis:200px}.lockbtn span{display:none}.card-setup h1{font-size:24px}.age{width:48px;height:48px}}

/* окна */
.modal{position:fixed;inset:0;z-index:20;background:rgba(10,15,30,.55);display:flex;align-items:center;justify-content:center;padding:16px}
.box{background:#fff;border-radius:20px;padding:22px;width:100%;max-width:420px;text-align:center;max-height:92vh;overflow:auto}
.box h2{margin:0 0 8px}
.gin{font-size:30px;font-weight:800;letter-spacing:4px;height:44px;border-bottom:2px solid #ddd;margin:8px auto 14px;width:140px}
.pad{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;max-width:260px;margin:0 auto}
.pad button{height:54px;border-radius:12px;background:#f0ede6;font-size:22px;font-weight:700}
#toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#14213d;color:#fff;padding:10px 18px;border-radius:12px;z-index:30;font-weight:600}