/* DOYSE v33 (docs/QARORLAR-v33.md, tasdiqlangan namuna dizayn/v33/namuna.html) — talaba ilovasining oxirgi qatlami.
   Tokenlar: DOYSE logo ranglari (zumrad #1A9E89, marjon #F57A5D, oltin #F5B83D) + chuqurlashtirish; tema Telegram'ga ergashadi (html.dk).
   Komponentlar «y» prefiksi bilan (eski .btn/.card/.chip bilan to'qnashmaydi). Har animatsiya ≤ 300 ms; html.lite va reduced-motion — o'chadi.
   Shrift: Bricolage Grotesque (sarlavha) + Manrope (matn, namunadagidek) — ikkalasi site/fonts da (Google Fonts so'rovisiz). */
html.x{--x-bg:#EDF3F1;--x-card:#FFFFFF;--x-ink:#0C221E;--x-mute:#62786F;--x-hint:#62786F;--x-line:rgba(12,52,44,.09);--x-sf:#F4F8F6;--x-soft:rgba(20,163,139,.12);
 --y-tx2:#2C4740;--y-ok:#12B76A;--y-okbg:#E3F8EE;--y-bad:#E5484D;--y-badbg:#FDECEC;--y-gold:#E9A31B;--y-coral:#F57A5D;
 --y-sh:0 1px 2px rgba(12,52,44,.05),0 10px 26px -14px rgba(12,52,44,.22);--y-sh2:0 2px 4px rgba(12,52,44,.06),0 18px 40px -18px rgba(12,52,44,.35);
 --y-glass:rgba(255,255,255,.72);--y-glassl:rgba(12,52,44,.08);
 --ac:#14A38B;--ac2:#5FD6C1;--acd:#00594A;--actx:#fff;--grad:linear-gradient(140deg,#25C2A4 0%,#0B8C76 42%,#00594A 78%,#003A31 100%);--soft:rgba(20,163,139,.12)}
html.x.dk{--x-bg:#061210;--x-card:#0E201C;--x-ink:#EAF5F2;--x-mute:#86A29A;--x-hint:#86A29A;--x-line:rgba(255,255,255,.07);--x-sf:#132A25;--x-soft:rgba(20,163,139,.16);
 --y-tx2:#C3D6D1;--y-ok:#2FD58A;--y-okbg:rgba(47,213,138,.14);--y-bad:#FF6B70;--y-badbg:rgba(255,107,112,.14);--y-gold:#F5B83D;
 --y-sh:inset 0 1px 0 rgba(255,255,255,.04),0 12px 30px -16px rgba(0,0,0,.8);--y-sh2:inset 0 1px 0 rgba(255,255,255,.06),0 22px 44px -18px rgba(0,0,0,.9);
 --y-glass:rgba(10,24,21,.72);--y-glassl:rgba(255,255,255,.08)}
/* fan rangi: DHN — ko'k (namuna), boshqalar — zumrad */
html.x.f-dhn{--ac:#2E7CF6;--ac2:#8DBEFF;--acd:#173E9A;--grad:linear-gradient(140deg,#5AA2FF 0%,#2E6FE6 42%,#1A45B0 78%,#0F2C78 100%);--soft:rgba(46,124,246,.13)}
/* «Tungi sud» mavzusi (do'kon) — doim qorong'i, oltin urg'u */
html.x.th-tungi{--x-bg:#0B0906;--x-card:#17120A;--x-sf:#211A0F;--x-ink:#FBEFD9;--x-mute:#B8A585;--x-line:rgba(245,184,61,.12);--y-tx2:#E8D8B8;
 --ac:#E9A31B;--ac2:#FFD98A;--acd:#6E4A08;--grad:linear-gradient(140deg,#FFD56E 0%,#E7A62C 40%,#A86C0E 75%,#5C3A06 100%);--soft:rgba(233,163,27,.15);color-scheme:dark}

/* Manrope (namuna matn shrifti) — o'zimizda: @fontsource-variable/manrope 5.3.0 (npm), SIL OFL 1.1 (fonts/OFL-manrope.txt) */
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/manrope-latin.woff2?v=1) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/manrope-latin-ext.woff2?v=1) format('woff2');unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Manrope';font-style:normal;font-weight:200 800;font-display:swap;src:url(fonts/manrope-cyrillic.woff2?v=1) format('woff2');unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
html.x.y33{--fb:Manrope,'Golos Text',system-ui,-apple-system,sans-serif;--fd:'Bricolage Grotesque',Manrope,system-ui,sans-serif}
html.x.y33 body{font-family:var(--fb)}
html.x.y33 body::after{display:none!important}   /* eski v32 jonli fon — o'rniga fan to'lqini */
.dsp{font-family:var(--fd);letter-spacing:-.02em}
/* fon: yuqorida fan rangidagi nur + sekin to'lqin */
#yBg{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;
 background:radial-gradient(120% 55% at 85% -12%,color-mix(in srgb,var(--ac) 26%,transparent),transparent 62%),radial-gradient(90% 40% at -10% 8%,color-mix(in srgb,var(--y-coral) 11%,transparent),transparent 60%)}
#yBg .wave{position:absolute;left:0;right:0;top:70px;height:190px;opacity:.9}
#yBg .wave svg{position:absolute;left:0;bottom:0;width:200%;height:100%;animation:ywv 16s linear infinite}
#yBg .wave svg+svg{animation-duration:23s;animation-direction:reverse;opacity:.7}
#yBg .wave path{fill:color-mix(in srgb,var(--ac) 9%,transparent)}
@keyframes ywv{to{transform:translateX(-50%)}}
html.paused #yBg .wave svg{animation-play-state:paused}

/* ---------- sarlavha + rol almashtirgich ---------- */
#yHdr{position:relative;z-index:2;display:flex;align-items:center;gap:10px;padding:calc(16px + env(safe-area-inset-top)) 16px 8px;max-width:520px;margin:0 auto}
#yHdr .lg{display:flex;align-items:center;gap:7px;cursor:pointer}
#yHdr .lg svg{width:30px;height:30px;filter:drop-shadow(0 3px 6px rgba(0,0,0,.18))}
#yHdr .wm{font:800 20px var(--fd);letter-spacing:-.03em;line-height:1;color:var(--x-ink)}
#yHdr .wm u{display:flex;height:3px;margin-top:3px;border-radius:2px;overflow:hidden}#yHdr .wm u s{flex:1}
#yHdr .sp{flex:1}
#yHdr .yib{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;background:var(--x-card);border:1px solid var(--x-line);box-shadow:var(--y-sh);position:relative;cursor:pointer;padding:0;flex:none}
#yHdr .yib svg{width:19px;height:19px;stroke:var(--y-tx2);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
#yHdr .yib .nd{position:absolute;top:7px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--y-coral);box-shadow:0 0 0 2px var(--x-card)}
#yHdr .yib:active{transform:scale(.94)}
body.ko #yHdr{padding-top:44px}
.yroles{margin:0 auto 6px;max-width:488px;display:grid;grid-template-columns:repeat(var(--n,3),1fr);position:relative;background:var(--x-sf);border:1px solid var(--x-line);border-radius:14px;padding:3px;z-index:2}
.yroles button{position:relative;z-index:1;padding:7px 0;font:800 13px var(--fb);color:var(--x-mute);border-radius:11px;display:flex;align-items:center;justify-content:center;gap:6px;background:none;border:0;cursor:pointer}
.yroles button i{width:7px;height:7px;border-radius:50%;background:var(--c);opacity:.8}
.yroles button.on{color:var(--actx)}
.yroles .thumb{position:absolute;top:3px;bottom:3px;left:3px;width:calc((100% - 6px)/var(--n,3));border-radius:11px;background:var(--grad);box-shadow:0 6px 16px -6px var(--acd),inset 0 1px 0 rgba(255,255,255,.35)}
#yRoleW{padding:0 16px}
.yseg{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;background:var(--x-sf);border:1px solid var(--x-line);border-radius:14px;padding:3px;position:relative;margin:0 0 4px}
.yseg button{padding:8px 4px;font:800 13px var(--fb);color:var(--x-mute);border-radius:11px;position:relative;z-index:1;background:none;border:0;cursor:pointer;transition:color .2s}
.yseg button.on{color:var(--x-ink)}
.yseg .th{position:absolute;top:3px;bottom:3px;left:3px;border-radius:11px;background:var(--x-card);box-shadow:var(--y-sh);transition:transform .26s cubic-bezier(.3,1.2,.5,1)}
.ylink{color:var(--ac);font-weight:800;text-decoration:none;cursor:pointer}

/* ---------- shisha tab-bar (5 tab) ---------- */
html.x.y33 #nav{left:0;right:0;bottom:0;padding:0 12px max(22px,calc(8px + env(safe-area-inset-bottom)));pointer-events:none}
html.x.y33 #navIn{pointer-events:auto;position:relative;max-width:496px;height:66px;border-radius:24px!important;padding:6px!important;gap:0;display:flex;align-items:stretch;
 background:var(--y-glass)!important;border:1px solid var(--y-glassl)!important;backdrop-filter:blur(22px) saturate(1.6)!important;-webkit-backdrop-filter:blur(22px) saturate(1.6)!important;box-shadow:0 16px 36px -14px rgba(0,0,0,.35)}
#navIn .yind{position:absolute;top:6px;bottom:6px;left:0;border-radius:18px;background:var(--soft);transition:transform .28s cubic-bezier(.3,1.25,.5,1),width .28s}
html.x.y33 #navIn .ytab{flex:1;position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font:800 10.5px var(--fb);color:var(--x-mute);cursor:pointer;padding:0;transition:color .2s;background:none;border:0}
#navIn .ytab svg{width:23px;height:23px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s cubic-bezier(.3,1.5,.5,1)}
html.x.y33 #navIn .ytab.on{color:var(--ac)}#navIn .ytab.on svg{transform:translateY(-1px) scale(1.08);fill:color-mix(in srgb,var(--ac) 18%,transparent)}
#navIn .ytab .bd{position:absolute;top:4px;left:calc(50% + 6px);min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--y-coral);color:#fff;font-size:10px;display:grid;place-items:center;box-shadow:0 0 0 2px var(--x-card)}
html.x.y33 #app{padding-bottom:118px}

/* ---------- ko'rinish va kirish animatsiyasi ---------- */
.yv{position:relative;z-index:1;padding:4px 16px 16px;max-width:520px;margin:0 auto}
.yvin{animation:yvin .26s cubic-bezier(.2,.8,.2,1) both}
@keyframes yvin{from{opacity:0;transform:translateX(calc(var(--dir,1)*14px))}to{opacity:1;transform:none}}
.yst{animation:yup .28s cubic-bezier(.2,.8,.2,1) both;animation-delay:calc(var(--i,0)*38ms)}
@keyframes yup{from{opacity:0;transform:translateY(12px) scale(.985)}to{opacity:1;transform:none}}

/* ---------- komponentlar ---------- */
.ycard{background:var(--x-card);border:1px solid var(--x-line);border-radius:22px;padding:14px;box-shadow:var(--y-sh);margin-bottom:12px;position:relative;overflow:hidden;color:var(--x-ink)}
.ypr{transition:transform .14s;cursor:pointer}.ypr:active{transform:scale(.97)}
.yh2{font:800 19px var(--fd);letter-spacing:-.02em;margin:6px 2px 10px;display:flex;align-items:center;gap:8px;color:var(--x-ink)}
.yh2 small{margin-left:auto;font:700 12.5px var(--fb);color:var(--ac);letter-spacing:0}
.yt1{font:800 15.5px var(--fb);letter-spacing:-.01em}
.yt2{font-size:12.5px;color:var(--x-mute);font-weight:600}
.yrow{display:flex;align-items:center;gap:12px}
.ycol{flex:1;min-width:0}
.yg2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}.yg2 .ycard{margin:0}
.yg3{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:12px}.yg3 .ycard{margin:0}
.ychip{display:inline-flex;align-items:center;gap:5px;font:800 11.5px var(--fb);padding:4px 10px;border-radius:99px;background:var(--x-sf);color:var(--y-tx2);border:1px solid var(--x-line);white-space:nowrap;cursor:default}
.ychip.ac{background:var(--soft);color:var(--ac);border-color:transparent}
.ychip.ok{background:var(--y-okbg);color:var(--y-ok);border-color:transparent}
.ychip.bad{background:var(--y-badbg);color:var(--y-bad);border-color:transparent}
.ychip.gold{background:rgba(233,163,27,.15);color:#B5780A;border-color:transparent}
html.dk .ychip.gold{color:#FFD07A}
.ychip.rank{background:linear-gradient(140deg,#F1F5F9,#B8C4D0);color:#334155;border:0;box-shadow:inset 0 1px 0 #fff;cursor:pointer}
html.dk .ychip.rank{background:linear-gradient(140deg,#5B6B7C,#2D3A47);color:#E2E8F0}
.ybtn{display:inline-flex;align-items:center;justify-content:center;gap:7px;height:46px;padding:0 18px;border-radius:15px;font:800 14.5px var(--fb);background:var(--grad);color:var(--actx);border:0;cursor:pointer;
 box-shadow:0 10px 22px -10px var(--acd),inset 0 1px 0 rgba(255,255,255,.3);transition:transform .14s,filter .14s;text-decoration:none}
.ybtn:active{transform:scale(.96);filter:brightness(.95)}
.ybtn.w{width:100%}.ybtn.s{height:36px;font-size:13px;padding:0 13px;border-radius:12px}
.ybtn.gh{background:var(--x-sf);color:var(--x-ink);box-shadow:none;border:1px solid var(--x-line)}
.ybtn.wh{background:#fff;color:#0C221E;box-shadow:0 10px 22px -10px rgba(0,0,0,.5)}
.ybtn.gold{background:linear-gradient(140deg,#FFD978,#E3920F);color:#1E1404;box-shadow:0 10px 22px -10px #6E4A08}
.ybtn[disabled]{opacity:.5;pointer-events:none}
.yli{display:flex;align-items:center;gap:12px;padding:10px 0;border-top:1px solid var(--x-line)}
.yli:first-child{border-top:0;padding-top:2px}.yli:last-child{padding-bottom:2px}
.ychev{width:18px;height:18px;stroke:var(--x-mute);fill:none;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none}
.ybar{height:7px;border-radius:9px;background:var(--x-sf);overflow:hidden;border:1px solid var(--x-line)}
.ybar i{display:block;height:100%;border-radius:9px;background:var(--grad);width:0;transition:width .3s cubic-bezier(.2,.8,.2,1)}
.ynum{font:800 24px var(--fd);letter-spacing:-.03em;line-height:1.05}
.ylock{position:absolute;top:10px;right:10px;font:800 10.5px var(--fb);padding:3px 8px;border-radius:99px;background:rgba(0,0,0,.35);color:#FFE29A;z-index:2}
/* 3D ikonka plitkalari */
.ytile{--a:#3BE0C4;--b:#0E8F7A;width:44px;height:44px;flex:none;border-radius:14px;display:grid;place-items:center;font-size:22px;position:relative;
 background:linear-gradient(150deg,var(--a),var(--b));box-shadow:inset 0 1.5px 0 rgba(255,255,255,.55),inset 0 -4px 8px rgba(0,0,0,.18),0 8px 16px -8px var(--b)}
.ytile::after{content:"";position:absolute;left:5px;right:5px;top:3px;height:45%;border-radius:11px 11px 50% 50%;background:linear-gradient(rgba(255,255,255,.45),rgba(255,255,255,0))}
.ytile>span{position:relative;z-index:1;filter:drop-shadow(0 2px 2px rgba(0,0,0,.25));line-height:1}
.ytile.sm{width:36px;height:36px;border-radius:11px;font-size:18px}
.ytile.lg{width:54px;height:54px;border-radius:17px;font-size:27px}
.ytile .fl{animation:yflick 1.8s ease-in-out infinite;transform-origin:50% 85%;display:inline-block}
@keyframes yflick{0%,100%{transform:scale(1) rotate(0)}25%{transform:scale(1.08,1.13) rotate(-4deg)}50%{transform:scale(.97,1.02) rotate(3deg)}75%{transform:scale(1.05,1.09) rotate(-1deg)}}
.ytile .sh{position:absolute;inset:0;border-radius:inherit;overflow:hidden;z-index:2;pointer-events:none}
.ytile .sh::before{content:"";position:absolute;top:-30%;bottom:-30%;width:45%;left:0;background:linear-gradient(105deg,transparent,rgba(255,255,255,.85),transparent);transform:translateX(-160%) skewX(-12deg);animation:yshine 3.4s ease-in-out infinite}
@keyframes yshine{0%,72%{transform:translateX(-160%) skewX(-12deg)}100%{transform:translateX(330%) skewX(-12deg)}}
/* hero */
.yhero{border-radius:28px;padding:18px;color:#fff;background:var(--grad);position:relative;overflow:hidden;margin-bottom:12px;box-shadow:0 22px 40px -20px var(--acd),inset 0 1px 0 rgba(255,255,255,.3)}
.yhero::before{content:"";position:absolute;width:260px;height:260px;right:-90px;top:-120px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.28),transparent 65%)}
.yhero::after{content:"";position:absolute;width:200px;height:200px;left:-70px;bottom:-110px;border-radius:50%;background:radial-gradient(circle,color-mix(in srgb,var(--y-coral) 55%,transparent),transparent 70%);opacity:.7}
.yhero>*{position:relative;z-index:1}
.yhero .yt2{color:rgba(255,255,255,.78)}
.yfan{display:flex;height:4px;border-radius:3px;overflow:hidden;width:66px;margin-bottom:10px}.yfan s{flex:1}
.yring{position:relative;display:grid;place-items:center;flex:none}
.yring svg{transform:rotate(-90deg)}
.yring .rv{position:absolute;text-align:center;line-height:1}
.yring circle{fill:none;stroke-linecap:round}
.yring .rp{transition:stroke-dashoffset .3s cubic-bezier(.2,.8,.2,1)}
.yweek{display:flex;gap:4px;margin-top:8px}.yweek i{flex:1;height:6px;border-radius:4px;background:var(--x-sf);border:1px solid var(--x-line)}.yweek i.on{background:linear-gradient(90deg,#FFB547,#F5703C);border:0}
.ylive{display:inline-flex;align-items:center;gap:6px;font:800 11.5px var(--fb);color:var(--y-bad)}
.ylive::before{content:"";width:8px;height:8px;border-radius:50%;background:currentColor;animation:ypulse 1.4s infinite}
@keyframes ypulse{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--y-bad) 60%,transparent)}100%{box-shadow:0 0 0 9px transparent}}
.ymix{display:flex;gap:5px;flex-wrap:wrap;margin:2px 0 8px}
.ymix span{font:800 11.5px var(--fb);padding:4px 8px;border-radius:99px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.25)}
.yduo{display:flex;align-items:center;flex:none}
.yava{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;font:800 14px var(--fb);color:#fff;background:var(--grad);box-shadow:0 6px 14px -6px var(--acd);flex:none}
.yduo .yava{width:40px;height:40px;border-radius:50%;border:3px solid var(--x-card);font-size:13px}
.yduo .fx{width:30px;height:30px;margin:0 -8px;z-index:1;border-radius:50%;display:grid;place-items:center;background:linear-gradient(140deg,#FFB547,#F5703C);font-size:16px;border:3px solid var(--x-card)}
.yduo .fx span{animation:yflick 1.8s ease-in-out infinite;display:inline-block}
.yserial{background:linear-gradient(135deg,#17102B 0%,#2E1748 55%,#4A1D3F 100%);color:#fff;border-color:rgba(255,255,255,.08)}
.yserial::before{content:"";position:absolute;right:-40px;top:-50px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(245,122,93,.45),transparent 65%)}
.yserial>*{position:relative}.yserial .yt2{color:rgba(255,255,255,.7)}
.yeps{display:flex;gap:4px;margin:10px 0 2px}.yeps i{flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.18)}.yeps i.on{background:linear-gradient(90deg,#FFB547,#F57A5D)}.yeps i.cur{background:#fff}
.ysud{background:linear-gradient(135deg,#1E1206 0%,#3B2309 60%,#5A3610 100%);color:#FBEFD9;border-color:rgba(245,184,61,.35)}
.ysud .yt2{color:rgba(251,239,217,.7)}
.ysud::after{content:"⚖️";position:absolute;right:-6px;bottom:-22px;font-size:110px;opacity:.12;transform:rotate(-12deg)}
.ysud>*{position:relative;z-index:1}
.yprem{background:linear-gradient(135deg,#1F1A0A,#3A2A08);border-color:rgba(245,184,61,.35);color:#fff}
/* karusel (O'yinlar) */
.ycar{display:flex;gap:10px;overflow-x:auto;margin:0 -16px 12px;padding:2px 16px 14px;scroll-snap-type:x mandatory;scrollbar-width:none}
.ycar::-webkit-scrollbar{display:none}
.ygc{flex:none;width:142px;height:170px;border-radius:24px;scroll-snap-align:start;position:relative;overflow:hidden;text-align:left;padding:14px;display:flex;flex-direction:column;justify-content:flex-end;color:#fff;border:0;cursor:pointer;font-family:var(--fb);
 background:linear-gradient(155deg,var(--a),var(--b));box-shadow:inset 0 1px 0 rgba(255,255,255,.45),inset 0 -6px 14px rgba(0,0,0,.15),0 14px 24px -14px var(--b)}
.ygc::before{content:"";position:absolute;width:170px;height:170px;right:-70px;top:-80px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.42),transparent 65%)}
.ygc .ge{position:absolute;top:14px;left:14px;width:54px;height:54px;border-radius:18px;display:grid;place-items:center;font-size:29px;background:rgba(255,255,255,.22);border:1px solid rgba(255,255,255,.4)}
.ygc .gn{font:800 16px var(--fd);line-height:1.1;position:relative;text-shadow:0 1px 2px rgba(0,0,0,.2)}
.ygc .gd{font-size:11.5px;font-weight:700;opacity:.88;margin-top:4px;position:relative;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ygc.soon{filter:saturate(.3) brightness(.92)}
/* reyting podiumi */
.ypod{display:flex;align-items:flex-end;justify-content:center;gap:8px;margin:6px 0 4px}
.ypod>div{flex:1;text-align:center;min-width:0}
.ypod .av{width:46px;height:46px;border-radius:50%;margin:0 auto 6px;display:grid;place-items:center;font-weight:800;color:#fff;font-size:15px;border:3px solid var(--x-card);box-shadow:0 6px 14px -6px rgba(0,0,0,.4)}
.ypod .st2{border-radius:14px 14px 6px 6px;display:grid;place-items:center;font:800 20px var(--fd);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.yme{background:var(--soft)!important;margin:0 -14px;padding:10px 14px!important;border-radius:14px;border-color:transparent!important}
/* toggle */
.ytg{width:48px;height:29px;border-radius:99px;background:var(--x-sf);border:1px solid var(--x-line);position:relative;flex:none;transition:background .2s;cursor:pointer;padding:0}
.ytg::after{content:"";position:absolute;top:2px;left:2px;width:23px;height:23px;border-radius:50%;background:#fff;box-shadow:0 2px 6px rgba(0,0,0,.25);transition:transform .22s cubic-bezier(.3,1.4,.5,1)}
.ytg.on{background:var(--ac);border-color:transparent}.ytg.on::after{transform:translateX(19px)}
.yshop{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:12px}
.yshop .ycard{margin:0;padding:12px}
.yprice{display:inline-flex;align-items:center;gap:4px;margin-top:8px;font:800 12.5px var(--fb);padding:5px 10px;border-radius:99px;background:rgba(233,163,27,.14);color:#B5780A}
html.dk .yprice{color:#FFD07A}
.yinp{width:100%;height:46px;border-radius:15px;background:var(--x-card);border:1px solid var(--x-line);padding:0 14px;font:700 16px var(--fb);color:var(--x-ink);letter-spacing:4px;text-align:center;text-transform:uppercase;outline:0}

/* ---------- to'liq ekran qatlami (savol, natija, reyting, serial, simulyator) ---------- */
#yL{position:fixed;inset:0;z-index:100;background:var(--x-bg);color:var(--x-ink);transform:translateY(100%);transition:transform .3s cubic-bezier(.2,.85,.25,1),visibility 0s .3s;display:flex;flex-direction:column;visibility:hidden}
#yL.open{transform:none;visibility:visible;transition-delay:0s}
#yL::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(110% 45% at 50% -10%,color-mix(in srgb,var(--ac) 28%,transparent),transparent 65%)}
#yL>*{max-width:560px;width:100%;margin:0 auto}
#yL>.ytimer{width:calc(100% - 32px);max-width:528px;margin:0 auto}
.yqtop{padding:calc(14px + env(safe-area-inset-top)) 16px 10px;display:flex;align-items:center;gap:12px}
.yqx{width:38px;height:38px;border-radius:13px;display:grid;place-items:center;background:var(--x-card);border:1px solid var(--x-line);font-size:18px;color:var(--x-mute);cursor:pointer;flex:none}
.yqdots{flex:1;display:flex;gap:4px}.yqdots i{flex:1;height:7px;border-radius:5px;background:var(--x-sf);border:1px solid var(--x-line);transition:background .25s}
.yqdots i.ok{background:var(--y-ok);border:0}.yqdots i.bad{background:var(--y-bad);border:0}.yqdots i.cur{background:var(--ac);border:0}
.ytimer{height:5px;margin:0 16px;border-radius:4px;background:var(--x-sf);overflow:hidden}
.ytimer i{display:block;height:100%;background:linear-gradient(90deg,var(--ac2),var(--ac),var(--y-coral));transform-origin:left;transition:transform 1s linear}
.ytimer i.yrun{transition:none;animation:ytm 30s linear forwards}@keyframes ytm{to{transform:scaleX(0)}}
.yqbody{flex:1;overflow-y:auto;padding:14px 16px calc(24px + env(safe-area-inset-bottom));scrollbar-width:none;-webkit-overflow-scrolling:touch}
.yqcase{font-size:16.5px;font-weight:700;line-height:1.5;margin:8px 0 16px}
.yopt{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:13px 14px;border-radius:18px;background:var(--x-card);border:1.5px solid var(--x-line);box-shadow:var(--y-sh);margin-bottom:9px;font:700 14.5px/1.35 var(--fb);color:var(--x-ink);cursor:pointer;transition:transform .14s,border-color .2s,background .2s}
.yopt:active{transform:scale(.98)}
.yopt .k{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;flex:none;background:var(--x-sf);font-weight:800;font-size:13px;color:var(--x-mute);transition:all .2s}
.yopt.sel{border-color:var(--ac);background:var(--soft)}.yopt.sel .k{background:var(--ac);color:#fff}
.yopt.ok{border-color:var(--y-ok);background:var(--y-okbg)}.yopt.ok .k{background:var(--y-ok);color:#fff}
.yopt.bad{border-color:var(--y-bad);background:var(--y-badbg)}.yopt.bad .k{background:var(--y-bad);color:#fff}
.yopt.dim{opacity:.55}
.yshake{animation:yshake .28s cubic-bezier(.36,.07,.19,.97)}
@keyframes yshake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.yglow{animation:yglow .3s ease-out}
@keyframes yglow{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--y-ok) 60%,transparent)}100%{box-shadow:0 0 0 12px transparent;transform:scale(1.02)}}
.yexp{border-radius:20px;padding:14px;margin-top:6px;border:1px solid var(--x-line);background:var(--x-card);box-shadow:var(--y-sh);animation:yup .28s cubic-bezier(.2,.8,.2,1) both}
.yexp .src{margin-top:10px;padding-top:10px;border-top:1px dashed var(--x-line);font-size:13px;font-weight:800;color:var(--y-tx2)}
.ysay{display:inline-flex;align-items:center;gap:8px;margin-top:10px;padding:7px 12px;border-radius:12px;background:var(--soft);color:var(--ac);font:800 12.5px var(--fb);border:0;cursor:pointer}
.yeq{display:inline-flex;gap:2px;align-items:flex-end;height:14px}.yeq i{width:3px;height:5px;border-radius:2px;background:currentColor}
.ysay.on .yeq i{animation:yeq .5s ease-in-out infinite alternate}.ysay.on .yeq i:nth-child(2){animation-delay:.12s}.ysay.on .yeq i:nth-child(3){animation-delay:.24s}.ysay.on .yeq i:nth-child(4){animation-delay:.36s}
@keyframes yeq{to{height:14px}}
.yxp{position:fixed;right:22px;top:110px;z-index:120;font:800 15px var(--fd);color:var(--y-ok);animation:yxp .6s ease-out forwards;pointer-events:none}
@keyframes yxp{from{opacity:0;transform:translateY(10px)}30%{opacity:1}to{opacity:0;transform:translateY(-26px)}}
canvas.ycf{position:fixed;inset:0;z-index:150;pointer-events:none}
.yres{flex:1;display:flex;flex-direction:column;align-items:center;padding:calc(44px + env(safe-area-inset-top)) 20px calc(24px + env(safe-area-inset-bottom));text-align:center;overflow-y:auto}
.yres .big{font:800 54px var(--fd);letter-spacing:-.04em;line-height:1}
.ystory-p{font-size:15.5px;line-height:1.6;font-weight:600;margin:0 2px 12px;color:var(--y-tx2)}
/* overlay: tantana, story */
#yOv{position:fixed;inset:0;z-index:140;display:none;flex-direction:column;align-items:center;justify-content:center;padding:24px;text-align:center}
#yOv.open{display:flex;animation:yfade .22s ease-out}
@keyframes yfade{from{opacity:0}}
#yOv.cel{background:radial-gradient(70% 50% at 50% 38%,#5C3D06 0%,#1B1203 60%,#0B0702 100%);color:#FFF4D6}
#yOv .rays{position:absolute;left:50%;top:38%;width:760px;height:760px;margin:-380px 0 0 -380px;background:repeating-conic-gradient(rgba(255,214,110,.16) 0 9deg,transparent 9deg 22deg);border-radius:50%;-webkit-mask:radial-gradient(circle,#000 20%,transparent 62%);mask:radial-gradient(circle,#000 20%,transparent 62%);animation:yspin 14s linear infinite}
@keyframes yspin{to{transform:rotate(1turn)}}
.ydrop{animation:ydrop .3s cubic-bezier(.25,1.6,.45,1) both}
@keyframes ydrop{from{transform:translateY(-340px) scale(.6) rotate(-14deg);opacity:0}to{transform:none;opacity:1}}
.yfloaty{animation:yfloaty 2.6s ease-in-out .3s infinite}
@keyframes yfloaty{50%{transform:translateY(-8px)}}
.yladder{display:flex;gap:10px;justify-content:center;margin:16px 0 22px}
.yladder div{font-size:10.5px;font-weight:800;opacity:.45}.yladder div.on{opacity:1}.yladder div.cur{opacity:1;transform:scale(1.15)}
#yOv.st9{background:rgba(5,10,9,.86)}
#yOv .stimg{width:234px;height:416px;border-radius:26px;box-shadow:0 30px 60px -20px rgba(0,0,0,.7);display:block}
.ytoast{position:fixed;left:50%;top:calc(14px + env(safe-area-inset-top));z-index:200;transform:translate(-50%,-20px);opacity:0;background:#0C221E;color:#fff;font:700 13px var(--fb);padding:10px 16px;border-radius:14px;box-shadow:0 12px 30px -10px rgba(0,0,0,.5);transition:all .25s cubic-bezier(.2,.9,.3,1.2);pointer-events:none;max-width:90vw;text-align:center}
html.dk .ytoast{background:#EAF5F2;color:#0C221E}
.ytoast.on{opacity:1;transform:translate(-50%,0)}

/* eski bosh sahifa qismlari — v33 Boshi o'rnida (kod ishlashda davom etadi, ko'rinmaydi) */
html.y33 #homeA>*:not(#yB){display:none!important}
html.y33 #homeA{padding:0}
html.y33 #mashq,html.y33 #doy,html.y33 #stat{padding:0}
html.y33 #mqTools>*:not(#yM){display:none!important}
html.y33 #path .mqG,html.y33 #path>.xrow,html.y33 #path>.xsec:first-child,html.y33 #path>.secH:first-child{display:none!important}
html.y33 #mashq #path{padding:0 16px 20px;max-width:520px;margin:0 auto;position:relative;z-index:1}
html.y33 #mashq #path.y0{padding:0}
html.y33 #mashq #path.y0>.yv{padding-top:0}
html.y33 #yM>.yv{padding-bottom:0}
html.y33 #cls>.xhdr{display:none}
html.y33 #cls.y0{padding:0}

/* ---------- Oddiy (lite) rejim va kamaytirilgan harakat ---------- */
html.lite #yBg .wave,html.lite #yOv .rays,html.lite .ytile::after,html.lite .yhero::before,html.lite .yhero::after,html.lite .ygc::before{display:none}
html.lite .yv *,html.lite #yL *,html.lite #yOv *,html.lite #navIn *,html.lite .yroles *{animation:none!important;transition:none!important}
html.lite #yL,html.lite .ytoast{transition:none!important}
html.lite .ycard,html.lite .ytile,html.lite .ybtn,html.lite .yhero,html.lite .yopt,html.lite .yava,html.lite .ygc,html.lite .yexp,html.lite .yroles .thumb{box-shadow:none!important}
html.lite.y33 #navIn{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:var(--x-card)!important;box-shadow:none}
@media (prefers-reduced-motion:reduce){#yBg .wave{display:none}.yv *,#yL *,#yOv *,#navIn *{animation-duration:1ms!important;animation-delay:0ms!important;transition-duration:1ms!important}}

/* ---------- eski oynalar va tugmalar — namuna uslubida (gradient, katta harflarsiz, yumshoq soya) ---------- */
html.x.y33 .btn{background:var(--grad)!important;color:var(--actx)!important;border:0!important;border-radius:15px;font:800 15px var(--fb)!important;letter-spacing:0;text-transform:none;box-shadow:0 10px 22px -10px var(--acd),inset 0 1px 0 rgba(255,255,255,.3)!important;min-height:48px;transition:transform .14s,filter .14s}
html.x.y33 .btn:active{transform:scale(.96)!important;filter:brightness(.95);box-shadow:0 6px 14px -8px var(--acd)!important}
html.x.y33 .btn.ghost{background:var(--x-sf)!important;color:var(--x-ink)!important;border:1px solid var(--x-line)!important;box-shadow:none!important;font:800 15px var(--fb)!important}
html.x.y33 .btn.small{min-height:0}
html.x.y33 .xb{background:var(--grad);color:var(--actx);border-radius:15px;font:800 15px var(--fb);letter-spacing:0;box-shadow:0 10px 22px -10px var(--acd),inset 0 1px 0 rgba(255,255,255,.3);transition:transform .14s}
html.x.y33 .xb:active{transform:scale(.96);box-shadow:0 6px 14px -8px var(--acd)}
html.x.y33 .xb.ghost{background:var(--x-sf);color:var(--x-ink);border:1px solid var(--x-line);box-shadow:none}
html.x.y33 .xb.danger{background:linear-gradient(140deg,#FF7A7F,#D63A44);color:#fff;box-shadow:0 10px 22px -10px #A3222B}
html.x.y33 #xSh,html.x.y33 #sheetIn,html.x.y33 #v3Sh{border-radius:30px 30px 0 0!important}
html.x.y33 #xSh h2,html.x.y33 #sheetIn h2,html.x.y33 #v3Sh h2{font:800 21px var(--fd);letter-spacing:-.02em}
html.x.y33 #introW{background:rgba(6,18,16,.55)!important;backdrop-filter:blur(8px)}
html.x.y33 #introCard{background:var(--x-card)!important;color:var(--x-ink)!important;border:1px solid var(--x-line)!important;border-radius:28px!important;box-shadow:var(--y-sh2)!important}
html.x.y33 #introBody>div:nth-child(2){font:800 22px var(--fd)!important;letter-spacing:-.02em}
html.x.y33 #introCard>div:last-child>button:last-child{background:var(--x-sf)!important;border:1px solid var(--x-line)!important;color:var(--x-ink)!important;border-radius:15px!important;font:800 14.5px var(--fb)!important}
html.lite.y33 .btn,html.lite.y33 .xb{box-shadow:none!important}

/* ---------- Premium «Kristall» (11.10: Premium Aurora 8-poll, B varianti — dizayn/v33/premium-aurora/namuna.html?v=b) ----------
   Premium — o'z «tungi osmoni»ga ega dunyo: aurora fon (siljuvchi rang dog'lari), shisha panellar, kristall qirralar, aylanuvchi kamalak chegara,
   ~4 s da kamalak yaltirash, uchqunlar (canvas, ≤ 40), 3D egilish. Faqat transform/opacity animatsiyalari; ekrandan tashqarida va
   yashirin oynada to'xtaydi (.ypoff, html.paused). Lite / reduced-motion: statik aurora (CSS gradient), harakat, uchqun, blur yo'q. */
html.x{--p-n0:#050816;--p-ink:#F2F5FF;--p-tx2:#C9D3F5;--p-line:rgba(200,212,255,.16);--p-glass:rgba(255,255,255,.07);
 --p-btn:linear-gradient(110deg,#7CF5D0 0%,#9ADFFF 48%,#C9B8FF 100%);--p-btnink:#06122A;
 --p-conic:conic-gradient(from 0deg,#2EE6A8,#22D3EE,#3B82F6,#8B5CF6,#F0ABFC,#2EE6A8);
 --p-sh:0 26px 50px -24px rgba(40,24,120,.55),0 2px 6px rgba(5,8,22,.18)}
html.x.dk{--p-sh:0 26px 50px -22px rgba(0,0,0,.95),0 0 0 1px rgba(160,180,255,.08)}
/* aurora qatlami: statik gradient (lite'da shu qoladi) + 3 ta siljuvchi dog' + kristall qirralar */
.ypa{position:absolute;inset:0;overflow:hidden;pointer-events:none;
 background:radial-gradient(60% 50% at 8% 4%,rgba(139,92,246,.55),transparent 70%),radial-gradient(60% 55% at 100% 100%,rgba(46,230,168,.42),transparent 70%),radial-gradient(45% 40% at 58% 52%,rgba(34,211,238,.26),transparent 70%),linear-gradient(160deg,#0B0F2E 0%,#150C36 50%,#062029 100%)}
.ypa i{position:absolute;display:block}
.ypa .bl{width:78%;aspect-ratio:1;border-radius:50%;filter:blur(30px);mix-blend-mode:screen;will-change:transform}
.ypa .b1{left:-22%;top:-26%;background:radial-gradient(circle,#8B5CF6 0%,transparent 68%);animation:ypbd1 14s ease-in-out infinite alternate}
.ypa .b2{right:-26%;bottom:-30%;background:radial-gradient(circle,#2EE6A8 0%,transparent 68%);animation:ypbd2 16s ease-in-out infinite alternate}
.ypa .b3{left:28%;top:22%;width:60%;opacity:.7;background:radial-gradient(circle,#22D3EE 0%,transparent 68%);animation:ypbd1 11s ease-in-out infinite alternate-reverse}
.ypa .fc{position:absolute;inset:0;width:100%;height:100%}
@keyframes ypbd1{to{transform:translate3d(22%,18%,0) scale(1.15)}}
@keyframes ypbd2{to{transform:translate3d(-20%,-14%,0) scale(.9)}}
.ypcv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ypscr{position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(180deg,rgba(5,8,22,.05) 0%,rgba(5,8,22,.35) 55%,rgba(5,8,22,.7) 100%)}
.ypglare{position:absolute;inset:0;pointer-events:none;z-index:2;background:radial-gradient(circle at var(--gx,70%) var(--gy,0%),rgba(255,255,255,.16),transparent 48%)}
/* kamalak qirra: aylanuvchi konus gradient faqat chegarada ko'rinadi */
.yedge{position:absolute;inset:0;border-radius:inherit;padding:1.5px;pointer-events:none;z-index:3;overflow:hidden;
 -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box exclude,linear-gradient(#000 0 0)}
.yedge i{position:absolute;left:50%;top:50%;width:200%;aspect-ratio:1;margin:-100% 0 0 -100%;background:var(--p-conic);animation:yspin 6s linear infinite}
.ypgb{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:18px;backdrop-filter:blur(14px) saturate(1.4);-webkit-backdrop-filter:blur(14px) saturate(1.4);box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
svg.ypi{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* Bosh: hero karta (~45% ekran) */
.yphero{position:relative;border-radius:28px;overflow:hidden;color:var(--p-ink);margin-bottom:12px;isolation:isolate;display:flex;min-height:clamp(340px,45vh,400px);
 background:var(--p-n0);box-shadow:var(--p-sh);transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));cursor:pointer;-webkit-mask-image:-webkit-radial-gradient(white,black);touch-action:pan-y}
.yphero.sm{min-height:0}
.yphero::after{content:"";position:absolute;top:-30%;bottom:-30%;left:0;width:42%;z-index:5;pointer-events:none;
 background:linear-gradient(100deg,transparent,rgba(240,171,252,.18) 38%,rgba(255,255,255,.4) 48%,rgba(154,223,255,.25) 56%,rgba(124,245,208,.15) 62%,transparent);
 transform:translateX(-160%) skewX(-14deg);animation:ypshim 4s cubic-bezier(.45,.05,.25,1) infinite}
@keyframes ypshim{0%{transform:translateX(-160%) skewX(-14deg)}30%,100%{transform:translateX(330%) skewX(-14deg)}}
.yphc{position:relative;z-index:4;display:flex;flex-direction:column;gap:14px;padding:18px;width:100%}
.ypht{display:flex;align-items:center;gap:14px}
html.x .ypht h2{font-size:27px;font-weight:800;line-height:1.05;margin:0;color:var(--p-ink)!important}
html.x .ypht h2.s24{font-size:24px}
.ypht p{font-size:14px;font-weight:600;color:var(--p-tx2);margin:4px 0 0;line-height:1.35}
.ypbens{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px 6px}
.ypben{display:flex;flex-direction:column;align-items:center;gap:7px;text-align:center;font-size:12.5px;font-weight:700;color:#DDE4FF;line-height:1.25}
.ypben .ti{width:48px;height:48px;border-radius:16px;display:grid;place-items:center;background:var(--p-glass);border:1px solid var(--p-line);box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
.ypben .ti svg,.yplose svg{stroke:url(#ypag)}
.ypgrow{flex:1}
.yppbx{padding:12px 14px;display:flex;flex-direction:column;gap:10px}
.ypdeal{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.yoff{display:inline-flex;align-items:center;gap:5px;background:linear-gradient(135deg,#FF7A7F,#E5484D);color:#fff;border-radius:99px;padding:5px 11px;font:800 12.5px var(--fb);box-shadow:0 6px 14px -6px #E5484D}
.yoff.tm{background:linear-gradient(135deg,#5CA8FF,#2E63E6);box-shadow:0 6px 14px -6px #2E63E6}
.ytmr{display:inline-flex;align-items:center;gap:3px;font:800 15px var(--fb);font-variant-numeric:tabular-nums;color:var(--p-ink)}
.ytmr b{min-width:30px;text-align:center;padding:4px 0;border-radius:9px;background:rgba(255,255,255,.1);border:1px solid var(--p-line)}
.ytmr i{font-style:normal;opacity:.6}
.ypx{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap;color:var(--p-ink)}
.ypx b{font:800 34px var(--fd);letter-spacing:-.02em;line-height:1;font-variant-numeric:tabular-nums}
.ypx span{font-size:14px;font-weight:700;color:var(--p-tx2)}
.ypx s{font-size:16px;font-weight:700;color:var(--p-tx2);opacity:.75}
.ypacts{display:flex;gap:8px}
.yppb{flex:1.7;height:52px;border-radius:16px;border:0;background:var(--p-btn);color:var(--p-btnink);font:800 16px var(--fb);display:flex;align-items:center;justify-content:center;gap:8px;cursor:pointer;
 box-shadow:0 14px 30px -12px rgba(46,230,168,.55),inset 0 1px 0 rgba(255,255,255,.75);transition:transform .14s}
.yppb.s{flex:none;height:40px;padding:0 11px;font-size:13px;border-radius:13px}
.ypgbtn{flex:1;height:52px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.2);color:#EAF0FF;font:800 14.5px var(--fb);cursor:pointer;transition:transform .14s;padding:0 8px}
.yppb:active,.ypgbtn:active{transform:scale(.97)}
.yppb:focus-visible,.ypgbtn:focus-visible,.yphero:focus-visible,#yPm button:focus-visible{outline:2px solid #9ADFFF;outline-offset:2px}
/* faol Premium — ixcham chiziq */
.yphc.mini{flex-direction:row;align-items:center;gap:10px;padding:14px 12px 14px 14px}
.yphc.mini .tx{flex:1;min-width:0}
.yphc.mini .tx b{display:flex;align-items:center;gap:5px;font-size:14px;font-weight:800;white-space:nowrap;min-width:0}
.yphc.mini .tx b>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.yphc.mini .tx b svg{width:17px;height:17px;fill:#FFE38A;stroke:none;flex:none}
.yphc.mini small{display:block;font-size:12px;font-weight:600;color:var(--p-tx2);margin-top:5px}
.ypdays{height:5px;border-radius:5px;background:rgba(255,255,255,.12);margin-top:8px;overflow:hidden}
.ypdays i{display:block;height:100%;border-radius:5px;background:linear-gradient(90deg,#2EE6A8,#22D3EE,#8B5CF6)}
/* ≤ 3 kun: katta eslatma */
.ypwarn{display:inline-flex;align-items:center;gap:6px;align-self:flex-start;background:rgba(245,122,93,.18);border:1px solid rgba(255,150,120,.5);color:#FFD3C6;font-weight:800;font-size:12.5px;padding:5px 11px;border-radius:99px}
.ypwarn::before{content:"";width:7px;height:7px;border-radius:50%;background:#FF8A6B;box-shadow:0 0 0 3px rgba(255,138,107,.25);animation:ypuls 1.6s ease-in-out infinite}
@keyframes ypuls{50%{opacity:.35}}
.yplose{display:flex;flex-direction:column;gap:7px;font-size:13.5px;font-weight:700;color:#DDE4FF}
.yplose div{display:flex;align-items:center;gap:9px}.yplose svg{width:18px;height:18px}
.ypbonus{font-size:13px;font-weight:600;color:var(--p-tx2);margin:0}.ypbonus b{color:#FFE38A}
.ypcdn{display:flex;gap:6px}
.ypcdn div{flex:1;text-align:center;padding:8px 0;border-radius:13px;background:rgba(255,255,255,.08);border:1px solid var(--p-line)}
.ypcdn b{display:block;font:800 22px var(--fd);font-variant-numeric:tabular-nums;line-height:1.05}
.ypcdn small{font-size:11px;font-weight:700;color:var(--p-tx2)}

/* emblema: toj + DOYSE logosi + porlovchi aylanuvchi halqa */
.yemb{--s:68px;width:var(--s);height:var(--s);position:relative;flex:none;margin-top:calc(var(--s)*.18);transform:translate(var(--px,0px),var(--py,0px))}
.yemb i{position:absolute;display:block}
.yemb .eg{inset:-6px;border-radius:50%;background:var(--p-conic);filter:blur(10px);opacity:.7;animation:yspin 6s linear infinite,ypglow 3s ease-in-out infinite}
.yemb .er{inset:0;border-radius:50%;background:var(--p-conic);animation:yspin 6s linear infinite;
 -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px));mask:radial-gradient(farthest-side,transparent calc(100% - 3px),#000 calc(100% - 2.5px))}
.yemb .ec{position:absolute;inset:5px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 35% 28%,#24326E,#0A0F2C 72%);box-shadow:inset 0 1px 0 rgba(255,255,255,.2),inset 0 -6px 12px rgba(0,0,0,.45)}
.yemb .ec svg{width:60%;height:60%;margin-top:6%}
.yemb .crw{position:absolute;width:50%;left:25%;top:-31%;filter:drop-shadow(0 3px 4px rgba(0,0,0,.55));animation:ypbob 3.2s ease-in-out infinite;transform-origin:50% 100%}
.yemb.s{--s:42px}.yemb.s .eg{inset:-3px;filter:blur(6px)}
.yemb.xs{--s:28px;margin-top:6px}.yemb.xs .eg{display:none}
.yemb.big{--s:96px}
@keyframes ypglow{50%{opacity:.35}}
@keyframes ypbob{50%{transform:translateY(-2px) rotate(-4deg)}}

/* toj nishoni — ism yonida */
.ycb{display:inline-grid;place-items:center;width:20px;height:20px;border-radius:7px;flex:none;vertical-align:-3px;margin-left:6px;background:var(--p-btn);
 box-shadow:0 0 0 1.5px rgba(139,92,246,.22),0 4px 10px -3px rgba(139,92,246,.7)}
.ycb svg{width:14px;height:11px}
/* Profil sarlavhasi — Premium talabada Kristall aurora */
.ycard.yprof{background:var(--p-n0);border-color:transparent;color:var(--p-ink);isolation:isolate;-webkit-mask-image:-webkit-radial-gradient(white,black);box-shadow:var(--p-sh);
 --x-ink:#F2F5FF;--x-mute:#C9D3F5;--y-tx2:#C9D3F5;--x-sf:rgba(255,255,255,.14);--x-card:#0B1030}
.ycard.yprof{position:relative;overflow:hidden}
.yprof>.yppc{position:relative;z-index:4}
.yprof .ybar{background:rgba(255,255,255,.14)}
/* reyting: Premium qator ramkasi */
.yli.yprr{background:linear-gradient(100deg,rgba(139,92,246,.13),rgba(34,211,238,.09) 50%,rgba(46,230,168,.12))!important;position:relative;isolation:isolate}
.yli.yprr>b.dsp{background:var(--p-btn);color:var(--p-btnink);padding:3px 9px;border-radius:99px;font-size:13px}
.yli.yprr .yava{box-shadow:0 0 0 2px var(--x-card),0 0 0 4px #9ADFFF}
/* tab-bar ustida ingichka aurora chizig'i (Premium talaba) */
html.yprm.y33 #navIn::before{content:"";position:absolute;left:22px;right:22px;top:-1px;height:2px;border-radius:2px;z-index:2;pointer-events:none;
 background:linear-gradient(90deg,transparent,#2EE6A8 18%,#22D3EE 38%,#8B5CF6 62%,#F0ABFC 80%,transparent);background-size:200% 100%;animation:ypline 6s linear infinite;box-shadow:0 0 10px rgba(110,140,255,.7)}
@keyframes ypline{to{background-position:-200% 0}}
/* yumshoq taklif kartasi (natija ekrani) */
.ypc{border-radius:22px;padding:14px;margin-bottom:12px;position:relative;overflow:hidden;color:var(--p-ink);cursor:pointer;isolation:isolate;
 background:radial-gradient(70% 90% at 0% 0%,rgba(139,92,246,.5),transparent 70%),radial-gradient(70% 90% at 100% 100%,rgba(46,230,168,.38),transparent 70%),linear-gradient(160deg,#0B0F2E,#150C36 50%,#062029);box-shadow:var(--p-sh)}
.ypc>.yrow{position:relative;z-index:4}
.ypc .yt1{color:var(--p-ink)!important}.ypc .yt2{color:var(--p-tx2)!important}
.ybtn.shine{position:relative;overflow:hidden}
.ybtn.shine::after{content:"";position:absolute;top:-20%;bottom:-20%;width:40%;left:0;background:linear-gradient(105deg,transparent,rgba(255,255,255,.7),transparent);animation:yshine 3.2s ease-in-out infinite;pointer-events:none}
.yplk{flex:none;font:800 11px var(--fb);padding:4px 9px;border-radius:99px;background:rgba(233,163,27,.15);color:#B5780A;white-space:nowrap}
html.dk .yplk{color:#FFD07A}

/* Premium sahifasi — to'liq ekran Kristall aurora */
#yPm{position:fixed;inset:0;z-index:130;display:none;flex-direction:column;color:var(--p-ink);overflow:hidden;background:var(--p-n0)}
#yPm.open{display:flex;animation:yppin .3s cubic-bezier(.2,.8,.2,1)}
@keyframes yppin{from{opacity:0;transform:scale(1.04)}}
#yPm>.ypa,#yPm>.ypcv{z-index:0}
#yPm>.ypscr{background:linear-gradient(180deg,rgba(5,8,22,.25),rgba(5,8,22,.15) 40%,rgba(5,8,22,.75))}
#yPm>*:not(.ypa):not(.ypcv):not(.ypscr){position:relative;z-index:4;max-width:520px;width:100%;margin-left:auto;margin-right:auto;box-sizing:border-box}
#yPm .bars{display:flex;gap:5px;padding:max(14px,env(safe-area-inset-top)) 16px 0}
#yPm .bars i{flex:1;height:3.5px;border-radius:3px;background:rgba(255,255,255,.22);overflow:hidden}
#yPm .bars b{display:block;height:100%;width:0;background:#fff;border-radius:3px}
#yPm .bars i.done b{width:100%}#yPm .bars i.run b{animation:ypbar 3.75s linear forwards}
@keyframes ypbar{to{width:100%}}
#yPm .top{display:flex;align-items:center;gap:10px;padding:12px 16px}
#yPm .yqx{background:rgba(255,255,255,.1);border-color:var(--p-line);color:var(--p-ink)}
#yPm .yqx svg{width:18px;height:18px}
#yPm .br{display:flex;align-items:center;gap:8px;font:800 15px var(--fd)}
#yPm .skip{margin-left:auto;background:none;border:0;color:var(--p-tx2);font:800 13.5px var(--fb);cursor:pointer;padding:10px 4px}
#yPm.end .skip{visibility:hidden}
#yPm .ypwhy{margin:2px 16px 0;width:auto;padding:10px 12px;border-radius:14px;background:rgba(229,72,77,.2);border:1px solid rgba(255,140,140,.45);font:800 13.5px var(--fb);text-align:center}
#yPm .stage{flex:1;display:flex;flex-direction:column;align-items:center;text-align:center;padding:0 26px;min-height:0;cursor:pointer;overflow-x:hidden;overflow-y:auto;scrollbar-width:none}
#yPm .stage>*{margin:auto 0}
#yPm.end .stage{cursor:default}
#yPm .foot{padding:14px 16px max(22px,env(safe-area-inset-bottom))}
#yPm .foot .yppb{width:100%;height:58px;font-size:17px}
#yPm .foot .ypgbtn{width:100%;margin-top:8px;height:48px}
.ypsl{display:flex;flex-direction:column;align-items:center;animation:ypin .5s cubic-bezier(.2,.85,.25,1) both}
@keyframes ypin{from{opacity:0;transform:translateY(18px) scale(.96)}}
.ypt{font-size:29px;font-weight:800;line-height:1.08;margin:26px 0 10px;letter-spacing:-.02em}
.ypx2{font-size:15px;line-height:1.5;color:var(--p-tx2);font-weight:600;max-width:330px}
.ypill{height:230px;width:100%;display:grid;place-items:center;position:relative;perspective:700px}
.ypflt{animation:ypflt 3.6s ease-in-out infinite}
@keyframes ypflt{0%,100%{transform:translateY(0) rotateX(8deg) rotateY(-10deg)}50%{transform:translateY(-10px) rotateX(-4deg) rotateY(10deg)}}
/* 1: cheksizlik + chaqmoq */
.ypinf svg{width:270px;max-width:80vw;filter:drop-shadow(0 22px 26px rgba(0,0,0,.55))}
.ypinf .ext{stroke:#24185E;stroke-width:26;fill:none}
.ypinf .base{stroke:url(#ypig);stroke-width:24;fill:none}
.ypinf .hl{stroke:rgba(255,255,255,.55);stroke-width:3.5;fill:none;stroke-linecap:round}
.ypinf .run{stroke:#fff;stroke-width:7;fill:none;stroke-linecap:round;stroke-dasharray:12 88;animation:yprun 2.4s linear infinite;filter:drop-shadow(0 0 6px #9ADFFF)}
@keyframes yprun{to{stroke-dashoffset:-100}}
.ypbolt{position:absolute;right:calc(50% - 120px);top:18px;width:64px;height:64px;border-radius:20px;display:grid;place-items:center;background:linear-gradient(150deg,#FFE38A,#F5A524);transform:rotate(12deg);
 box-shadow:inset 0 2px 0 rgba(255,255,255,.6),inset 0 -6px 0 rgba(120,60,0,.25),0 16px 26px -10px rgba(245,165,36,.7);animation:ypzap 1.8s ease-in-out infinite}
.ypbolt svg{width:34px;height:34px;fill:#3A2205;stroke:none}
@keyframes ypzap{0%,100%{transform:rotate(12deg) scale(1)}10%{transform:rotate(4deg) scale(1.12)}20%{transform:rotate(14deg) scale(1)}}
/* 2: o'yin plitkalari */
.yptiles{display:flex;align-items:center;gap:14px}
.yptiles i{width:84px;height:84px;border-radius:26px;display:grid;place-items:center;background:linear-gradient(150deg,var(--c1),var(--c2));color:#fff;
 box-shadow:inset 0 2px 0 rgba(255,255,255,.5),inset 0 -9px 0 rgba(0,0,0,.22),0 26px 34px -14px rgba(0,0,0,.75);
 animation:yptin .6s cubic-bezier(.2,.85,.25,1.3) both,yptfl 2.6s ease-in-out infinite;animation-delay:calc(var(--i)*.14s),calc(.6s + var(--i)*.35s)}
.yptiles i:nth-child(2){width:104px;height:104px;border-radius:30px;margin-top:-28px}
.yptiles i svg{width:42px;height:42px;stroke-width:2.1}
@keyframes yptin{from{opacity:0;transform:translateY(-60px) rotate(-14deg)}}
@keyframes yptfl{0%,100%{transform:translateY(0) rotate(-4deg)}50%{transform:translateY(-10px) rotate(4deg)}}
/* 3: simulyator — shkala + bitiruvchi qalpog'i */
.ypgau{position:relative;width:190px;height:190px;margin-top:30px}
.ypgau svg.g{width:100%;height:100%;transform:rotate(-90deg)}
.ypgau .tr{fill:none;stroke:rgba(255,255,255,.12);stroke-width:14}
.ypgau .pg{fill:none;stroke:url(#ypig);stroke-width:14;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:100;animation:ypgauge 1.6s .3s cubic-bezier(.2,.8,.2,1) forwards;filter:drop-shadow(0 0 8px rgba(34,211,238,.6))}
@keyframes ypgauge{to{stroke-dashoffset:14}}
.ypgau .num{position:absolute;inset:0;display:grid;place-content:center;text-align:center;font:800 46px var(--fd);line-height:1}
.ypgau .num small{font:700 13px var(--fb);color:var(--p-tx2)}
.ypgau .cap{position:absolute;width:120px;left:50%;top:-40px;margin-left:-60px;filter:drop-shadow(0 14px 14px rgba(0,0,0,.55))}
/* 4: kartochka + tahlil */
.ypc4{display:flex;align-items:center;gap:16px}
.ypflip{width:150px;height:190px;position:relative;transform-style:preserve-3d;animation:ypflip 3.4s ease-in-out infinite}
.ypflip>div{position:absolute;inset:0;border-radius:22px;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:14px;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:inset 0 2px 0 rgba(255,255,255,.4),0 22px 32px -14px rgba(0,0,0,.7)}
.ypflip .fr{background:linear-gradient(150deg,#A78BFA,#6D3FE0);font:800 30px var(--fd);color:#fff}
.ypflip .bk{background:#F2F5FF;color:#14183A;font-weight:800;font-size:15px;line-height:1.3;transform:rotateY(180deg)}
@keyframes ypflip{0%,30%{transform:rotateY(-12deg)}50%,80%{transform:rotateY(168deg)}100%{transform:rotateY(348deg)}}
.ypchart{width:120px;padding:12px;border-radius:20px;background:rgba(255,255,255,.08);border:1px solid var(--p-line);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.ypchart .bs{display:flex;align-items:flex-end;gap:7px;height:96px}
.ypchart .bs i{flex:1;border-radius:6px 6px 3px 3px;background:linear-gradient(180deg,#7CF5D0,#3B82F6);height:var(--h);transform-origin:bottom;animation:ypgrow .8s cubic-bezier(.2,.85,.25,1.2) both;animation-delay:calc(var(--i)*.1s + .3s)}
.ypchart .bs i.lo{background:linear-gradient(180deg,#FF9F87,#E5484D)}
.ypchart small{display:block;margin-top:8px;font-size:11.5px;font-weight:800;color:var(--p-tx2)}
@keyframes ypgrow{from{transform:scaleY(0)}}
/* yakuniy narx bloki */
.ypend{display:flex;flex-direction:column;align-items:center;width:100%;animation:ypin .5s cubic-bezier(.2,.85,.25,1) both}
.ypend .ypt{font-size:30px;margin:22px 0 4px}
.ypend .ypx2{margin-bottom:14px}
.ypchk{list-style:none;display:flex;flex-direction:column;gap:9px;align-self:stretch;margin:0 4px 16px;padding:0}
.ypchk li{display:flex;align-items:center;gap:10px;font-weight:700;font-size:14.5px;text-align:left}
.ypchk li span{width:26px;height:26px;border-radius:9px;display:grid;place-items:center;background:rgba(46,230,168,.16);flex:none}
.ypchk li svg{width:16px;height:16px;stroke:#7CF5D0;stroke-width:2.6}
.ypbig{align-self:stretch;padding:14px 16px;display:flex;flex-direction:column;gap:10px;text-align:left}
.ypbig .yt2{color:var(--p-tx2)!important}

/* pauza: ekrandan tashqarida (IntersectionObserver) va yashirin oynada */
.ypoff *,.ypoff::after,html.paused .ypfx *,html.paused .ypfx::after,html.paused #navIn::before{animation-play-state:paused!important}
/* Lite / kamroq harakat: statik aurora, animatsiyasiz, uchqunsiz, egilishsiz, blursiz */
html.lite .ypa .bl,html.lite .ypcv,html.lite .yphero::after,html.lite .ypglare,html.lite .yemb .eg{display:none}
html.lite .ypfx *,html.lite .ypfx::after,html.lite #yPm *,html.lite.yprm #navIn::before{animation:none!important;transition:none!important}
html.lite .yphero{transform:none!important}
html.lite .ypgb,html.lite .ypchart{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:rgba(255,255,255,.09)}
html.lite #yPm .bars i.run b{width:55%}
html.lite .ypgau .pg{stroke-dashoffset:14}
html.lite .ypflip{transform:rotateY(-12deg)}
html.lite .ybtn.shine::after{display:none}
@media (prefers-reduced-motion:reduce){
 .ypa .bl,.ypcv,.yphero::after,.ypglare,.yemb .eg{display:none}
 .ypfx *,.ypfx::after,#yPm *,html.yprm #navIn::before{animation:none!important;transition:none!important}
 .yphero{transform:none!important}
 #yPm .bars i.run b{width:55%}.ypgau .pg{stroke-dashoffset:14}.ypflip{transform:rotateY(-12deg)}
}

/* 13.10 (QARORLAR-QUIZ-NURPAY 92): tab-bar — har bo'lim o'z rangidagi yaltiroq ikonka */
html.x.y33 #navIn .yind{display:none}
html.x.y33 #navIn .ytab{gap:4px}
#navIn .ytab svg{width:36px;height:36px;padding:8px;border-radius:13px;stroke:#fff;stroke-width:2.1;background:linear-gradient(145deg,var(--ta,#2BC4A8),var(--tb,#0E7F6E));opacity:.78;filter:saturate(.8);box-shadow:inset 0 1px 0 rgba(255,255,255,.45);transition:transform .25s cubic-bezier(.3,1.5,.5,1),opacity .2s,filter .2s,box-shadow .2s}
#navIn .ytab.on svg{opacity:1;filter:none;fill:rgba(255,255,255,.28);transform:translateY(-3px) scale(1.08);box-shadow:0 8px 16px -6px var(--tb),inset 0 1px 0 rgba(255,255,255,.6)}
html.x.y33 #navIn .ytab.on{color:var(--tb)}
#navIn .ytab[data-v=home]{--ta:#2BC4A8;--tb:#0E7F6E}#navIn .ytab[data-v=mashq]{--ta:#9A80FF;--tb:#4B2FC9}#navIn .ytab[data-v=doy]{--ta:#FFD56E;--tb:#D1830A}#navIn .ytab[data-v=cls]{--ta:#5AA2FF;--tb:#1A45B0}#navIn .ytab[data-v=stat]{--ta:#FF9A7A;--tb:#D9472B}
html.lite #navIn .ytab.on svg,.lite #navIn .ytab.on svg{box-shadow:none}

/* 13.10 (qaror 108): Tayyorlov mashqlari — ilova rangi, Bugungi vazifa kartasi uslubi */
.ymx{padding:14px 16px;margin-bottom:10px;border-radius:24px}
.ymx .ymi{flex:none;width:52px;height:52px;border-radius:17px;display:grid;place-items:center;font-size:27px;background:rgba(255,255,255,.2);border:1px solid rgba(255,255,255,.35);box-shadow:inset 0 1px 0 rgba(255,255,255,.4)}
.ymx .ymlim{height:6px;border-radius:3px;background:rgba(255,255,255,.22);margin-top:12px;overflow:hidden}.ymx .ymlim i{display:block;height:100%;border-radius:3px;background:#fff}
html.x.y33 #navIn .ytab.on{color:var(--tb)!important}

/* 13.10: kanal a'zoligi oynasi — pastdan, test orqada ko'rinadi */
.ygate{position:fixed;inset:0;z-index:120;display:flex;align-items:flex-end;justify-content:center}
.ygate .ygs{position:absolute;inset:0;background:rgba(4,12,10,.35)}
.ygate .ygp{position:relative;width:100%;max-width:520px;background:var(--x-card);border-radius:26px 26px 0 0;padding:18px 16px calc(18px + env(safe-area-inset-bottom));box-shadow:0 -12px 30px -12px rgba(0,0,0,.35);animation:ygUp .28s cubic-bezier(.2,.9,.25,1)}
@keyframes ygUp{from{transform:translateY(100%)}to{transform:none}}

/* 13.10 (qaror 95): Ustoz vazifasi — Bugungi vazifa kartasi ichida */
.yqvz{margin-top:10px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28);font:800 13px/1.35 var(--fb);color:#fff;cursor:pointer}

/* 13.10 (qaror 38): test va mashqlar — butun ekran (yarim oyna emas) */
#sheet.full{align-items:stretch}
html #sheet.full #sheetIn{max-width:none;max-height:none;height:100%;border-radius:0!important;padding-top:calc(16px + env(safe-area-inset-top))!important}
#sheet.full #sheetIn::before{display:none}
#sheet.full .fsx{float:right;margin:0 0 8px 10px;position:sticky;top:0;z-index:2}

/* 13.10 (QARORLAR-QUIZ-NURPAY 109–110): Bo'ron, Juftlash, Tasnif */
.bt-ring{width:110px;height:110px;margin:6px auto 10px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--ac);box-shadow:inset 0 0 0 10px var(--x-card),0 10px 24px -10px var(--ac);color:var(--x-ink)}
.bt-ring b{font:800 44px/1 var(--fd)}.bt-ring small{font:700 11px var(--fb);color:var(--x-mute)}
.combo{display:inline-flex;gap:6px;align-items:center;font:800 13px var(--fb);padding:5px 10px;border-radius:99px;background:linear-gradient(90deg,#FFB547,#F57A5D);color:#fff}
.tcard{font-size:16.5px;font-weight:700;line-height:1.5;padding:18px;margin-bottom:12px;border-left:4px solid var(--ac)}
.tcats{display:grid;grid-template-columns:1fr 1fr;gap:8px}.tcats .yopt{margin:0;min-height:58px;font-weight:800;font-size:13.5px;justify-content:center;text-align:center}
.pjG{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.ypj{display:block;width:100%;text-align:left;margin:0 0 8px;padding:12px 10px 12px 34px;border-radius:14px;border:1.5px solid var(--x-line);background:var(--x-card);color:var(--x-ink);font:700 13px/1.35 var(--fb);position:relative;min-height:58px;cursor:pointer;box-shadow:var(--y-sh);overflow-wrap:anywhere}
.ypj .pjn{position:absolute;left:8px;top:50%;transform:translateY(-50%);width:20px;height:20px;border-radius:50%;border:1px dashed var(--x-mute);font-size:12px;font-weight:900;display:flex;align-items:center;justify-content:center}
.ypj.on{border-color:var(--pc);box-shadow:inset 0 0 0 2px var(--pc)}.ypj.on .pjn{background:var(--pc);border-color:var(--pc);color:#111}
.ypj.cur{border-color:var(--pc);box-shadow:0 0 0 3px var(--pc);transform:translateY(-1px)}
.ypj.ok::after{content:'✓';position:absolute;right:8px;top:6px;color:var(--y-ok);font-weight:900}.ypj.bad::after{content:'✗';position:absolute;right:8px;top:6px;color:var(--y-bad);font-weight:900}
body.kob #yL,body.kob #sheet.full{top:36px}
.bt-ring b,.bt-ring small{color:#fff}.bt-ring small{opacity:.85}
/* 14.10: uzun mavzu nomi test yorlig'ida ekrandan chiqmasin */
#yL .ychip.ac{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}
/* 14.10: admin/ustoz demo talabasi — Bepul | Premium */
.yroles.ytier{margin-top:-1px}.yroles.ytier.p .thumb{background:linear-gradient(135deg,#F6C163,#D99A1E);box-shadow:0 6px 16px -6px rgba(217,154,30,.6),inset 0 1px 0 rgba(255,255,255,.4)}.yroles.ytier.p button.on{color:#3a2604}