/* Plaivo gaming portal: original character art, real game covers, accessible controls. */
body{--bg:#0d0b18;--bg-2:#141021;--surface:#1b162b;--surface-2:#251d38;--surface-3:#332747;--accent:#a981ff;--grad:linear-gradient(115deg,#9a35ee,#7744f3);--text:#f6f3ff;--text-2:#b7aecb;--text-3:#8f829f;--font-head:"Manrope",system-ui,sans-serif;background:#0d0b18}
.topbar,.topbar::before{background:#100d1c}.topbar{border-bottom:1px solid #ffffff08;box-shadow:none}
.ex-home-v2{padding-top:14px;background:radial-gradient(ellipse 95% 320px at 95% 0,#7147bf18,transparent)}
.portal-hero{position:relative;isolation:isolate;overflow:hidden;margin:0 16px 25px;min-height:216px;border:1px solid #a85af66b;border-radius:24px;background:#16112c;box-shadow:0 12px 32px #0003,inset 0 0 0 1px #ffffff0c}
.portal-hero>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:67% 50%;z-index:-2}
.portal-hero:after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#110c29bb 0%,#120c2875 42%,transparent 76%)}
.portal-hero-copy{position:relative;width:62%;min-height:216px;display:flex;flex-direction:column;align-items:flex-start;padding:19px 0 19px 19px}
.portal-hero-copy>small{font:650 8px/1.4 var(--font);letter-spacing:1.1px;color:#d3c0f3;margin-bottom:9px}
.portal-hero h1{font:800 clamp(22px,6.2vw,31px)/1.09 var(--font)!important;letter-spacing:-.65px;margin:0;color:#fff}
.portal-hero h1 em{font-style:normal;color:#d39cff;background:linear-gradient(90deg,#f2bcff,#bd8aff);background-clip:text;-webkit-background-clip:text;-webkit-text-fill-color:transparent}
.portal-hero p{font:500 10px/1.45 var(--font);color:#cec2e0;max-width:20ch;margin:9px 0 12px}
.portal-hero-cta{display:flex;align-items:center;justify-content:center;gap:8px;min-height:38px;margin-top:auto;padding:10px 12px;border:1px solid #ce8aff4a;border-radius:11px;background:linear-gradient(110deg,#a537f1,#773eee);color:white;font:700 11px var(--font);box-shadow:0 4px 16px #822dce32;white-space:nowrap}
.portal-hero-cta .ex-icon{width:16px;height:16px}.portal-hero-cta:focus-visible{outline:2px solid #f3d7ff;outline-offset:3px}.portal-hero-cta:active{transform:scale(.97)}
.ex-portal-genres{padding:0 16px;margin:0 0 25px}.ex-portal-heading{margin-bottom:13px;gap:12px}.ex-portal-heading h2{font:750 18px/1.3 var(--font)!important;letter-spacing:-.5px;color:#f3eefa}
.ex-portal-heading>button{font:650 11px var(--font);color:#baa0ea;min-height:38px;background:transparent;border:0;box-shadow:none;padding:6px 0;gap:5px}.ex-portal-heading>button .ex-icon{width:16px;height:16px;flex:none}
.ex-portal-genre-grid{display:flex;flex-wrap:nowrap;overflow:auto;gap:8px;margin:0 -16px;padding:2px 16px 8px;scrollbar-width:none;mask-image:linear-gradient(90deg,#000 95%,transparent)}
.ex-portal-genre-grid::-webkit-scrollbar{display:none}.ex-portal-genre-grid button{flex:0 0 82px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9px;min-height:88px;padding:11px 7px;background:linear-gradient(145deg,#241d39,#171326);border:1px solid #bca5e319;border-radius:17px;box-shadow:inset 0 1px #ffffff04;aspect-ratio:auto;position:relative;overflow:visible}
.ex-portal-genre-grid button:after{display:none}.ex-portal-genre-grid span{font:650 10px/1.35 var(--font);color:#dcd1ed;text-shadow:none;position:static;white-space:normal;text-align:center}
.ex-portal-genre-grid .portal-genre-symbol{width:29px;height:29px;display:block;color:#c38ef7}.portal-genre-symbol svg{width:100%;height:100%;filter:drop-shadow(0 3px 7px #9453ce2c)}
.ex-portal-genre-grid button:nth-child(2) .portal-genre-symbol{color:#ff827e}.ex-portal-genre-grid button:nth-child(4) .portal-genre-symbol{color:#5dd4ee}.ex-portal-genre-grid button:nth-child(5) .portal-genre-symbol{color:#f3bf74}.ex-portal-genre-grid button:nth-child(6) .portal-genre-symbol{color:#b2b9f3}.ex-portal-genre-grid button:nth-child(7) .portal-genre-symbol{color:#eac072}
.ex-portal-genre-grid .portal-genre-all{border-color:#b06bff88;background:linear-gradient(145deg,#6335a049,#31204c);box-shadow:inset 0 0 0 1px #b07bec19,0 3px 15px #9141ce12}.portal-genre-all img{width:32px;height:32px;object-fit:contain;position:static;opacity:1}
.ex-portal-genre-grid button:hover{background:#332244;border-color:#bc87e85c}.ex-portal-genre-grid button:focus-visible{outline:2px solid #ceabff;outline-offset:-2px}
.ex-catalog-entry{padding:0 16px;margin:0 0 30px}.ex-catalog-entry-grid{gap:12px;grid-template-columns:repeat(2,minmax(0,1fr))}
.ex-catalog-entry-card,.ex-catalog-entry-card:nth-child(n){display:flex;flex-direction:column;align-items:stretch;grid-column:auto;grid-row:auto;min-height:0;gap:0;padding:0;border:1px solid #bfa4e72a;background:linear-gradient(150deg,#261c38,#181323);box-shadow:0 5px 16px #0002,inset 0 1px #ffffff05;border-radius:20px;overflow:hidden;min-width:0;transition:border-color .18s,transform .18s}
.ex-catalog-entry-art{display:block;aspect-ratio:1.12;width:100%;background:#252033;position:relative}.ex-catalog-entry-art:after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#21182f6b,transparent 45%);pointer-events:none}.ex-catalog-entry-cover{width:100%;height:100%;filter:none;opacity:1;object-fit:cover}
.ex-catalog-entry-copy{display:flex;flex-direction:column;flex:1;padding:11px 11px 12px;gap:5px}.ex-catalog-entry-copy small{font:600 9px/1.3 var(--font);color:#c4a5e4;letter-spacing:.1px}.ex-catalog-entry-copy b{font:750 14px/1.3 var(--font)!important;color:#f5efff;letter-spacing:-.25px;min-height:36px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ex-catalog-entry-copy>span{font:450 10px/1.5 var(--font);color:#bfb0d1;min-height:30px;-webkit-line-clamp:2;display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical}
.ex-catalog-entry-copy strong{display:flex;align-items:center;justify-content:center;min-height:40px;margin-top:8px;padding:10px 8px;border:1px solid #c590fb35;border-radius:11px;background:linear-gradient(115deg,#9638ed,#7737ec);box-shadow:0 4px 12px #6f29b31c;color:#fff;font:750 12px/1.3 var(--font);gap:7px}
.ex-catalog-entry-copy strong .ex-icon{width:15px;height:15px;padding:0;background:none;color:white;border-radius:0;order:0;fill:currentColor;stroke:none}
.ex-catalog-entry-card:hover{border-color:#b57df268;background:#271d36}.ex-catalog-entry-card:active{transform:scale(.98)}.ex-catalog-entry-card:focus-visible{outline:2px solid #cfa7ff;outline-offset:3px}
.ex-catalog-entry-all{display:flex;justify-content:center;gap:10px;min-height:46px;background:#251b35;border:1px solid #c3a8ee2a;border-radius:13px;color:#dac8f2;box-shadow:none;font:650 12px var(--font)!important;margin-top:16px}.ex-catalog-entry-all .ex-icon{width:17px;height:17px}.ex-portal-status{font:450 11px/1.5 var(--font);color:#bda4d7;margin:-4px 0 14px}
.ex-originals,.ex-popular,.ex-hero,.ex-shortcuts{margin-left:16px;margin-right:16px}.ex-slide,.ex-carousel{border-radius:20px}.ex-popular-card{background:#21182f;border:1px solid #b69ac720;box-shadow:none;border-radius:16px}
.ex-home-v2 .section-title,.ex-home-v2 h2{font-family:var(--font)!important;letter-spacing:-.45px}.ex-home-v2 .section-title{font-size:19px;font-weight:750}.ex-home-v2 .btn-primary{background:var(--grad);color:white;box-shadow:0 4px 15px #763bb41a}.ex-home-v2 .ex-shortcuts button{background:#241a34;border-color:#c2a2e21e;box-shadow:none}.ex-home-v2 .ex-hero{border:1px solid #bb8cec24;box-shadow:none}
.tabbar{background:#191224f5;border:1px solid #b087d532;border-radius:23px;box-shadow:0 7px 35px #0005,inset 0 1px #e1c8ff0b;backdrop-filter:blur(20px);padding:5px}.tabbar .tab{border-radius:17px;color:#aa92c3}.tabbar .tab span{color:#b7a4cb;font:650 9px var(--font)}.tabbar .tab svg{width:22px;height:22px;stroke:#b8a0d7;filter:none}
.tabbar .tab.active{background:linear-gradient(145deg,#8241cc36,#5c328a26);box-shadow:inset 0 1px #c997ff15}.tabbar .tab.active svg{stroke:#ecd0ff;filter:drop-shadow(0 0 4px #b04dec38)}.tabbar .tab.active span{color:#f1deff}.tabbar .tab.active:after{display:block;position:absolute;bottom:3px;left:35%;right:35%;height:2px;width:auto;background:#bc79f1;border-radius:2px;box-shadow:none}
@media(max-width:349px){.portal-hero{min-height:204px;margin-left:12px;margin-right:12px;border-radius:21px}.portal-hero-copy{min-height:204px;padding:17px 0 17px 16px;width:63%}.portal-hero-copy>small{font-size:7px;letter-spacing:.6px}.portal-hero h1{font-size:22px!important}.portal-hero p{font-size:9px;max-width:19ch}.portal-hero-cta{font-size:10px;padding:9px 10px;min-height:36px;gap:5px}.ex-portal-genres,.ex-catalog-entry{padding-left:12px;padding-right:12px}.ex-portal-genre-grid{margin:0 -12px;padding-left:12px;padding-right:12px;gap:7px}.ex-portal-genre-grid button{flex-basis:76px;min-height:84px}.ex-catalog-entry-grid{gap:10px}.ex-catalog-entry-copy{padding:10px}.ex-catalog-entry-copy b{font-size:12px!important;min-height:32px}.ex-catalog-entry-copy>span{font-size:9px;min-height:27px}.ex-catalog-entry-copy strong{font-size:11px;min-height:38px}.ex-portal-heading h2{font-size:16px!important}}
@media(min-width:500px){.portal-hero{min-height:255px}.portal-hero-copy{min-height:255px;padding:25px}.portal-hero h1{font-size:31px!important}.portal-hero-copy>small{font-size:9px}.portal-hero p{font-size:12px;max-width:24ch}.portal-hero-cta{font-size:12px;min-height:42px}.ex-portal-genre-grid button{flex-basis:88px;min-height:94px}.ex-catalog-entry-art{aspect-ratio:1.3}.ex-catalog-entry-copy b{font-size:17px!important;min-height:44px}.ex-catalog-entry-copy>span{font-size:12px;min-height:36px}.ex-catalog-entry-copy strong{font-size:14px;min-height:44px}}
@media(prefers-reduced-motion:reduce){.ex-catalog-entry-card,.portal-hero-cta{transition:none}}

.ex-catalog-entry{scroll-margin-top:calc(var(--app-safe-top,0px) + var(--top-h,60px) + 14px)}

body[data-plaivo-view="home"] .toast{top:auto;bottom:calc(var(--tabbar-h,68px) + var(--safe-b,0px) + var(--viewport-cutoff,0px) + 26px);transform:translate(-50%,12px);font-size:12px}body[data-plaivo-view="home"] .toast.show{transform:translate(-50%,0)}

.ex-portal-genre-grid .portal-genre-symbol{width:44px;height:44px;flex:none}.ex-portal-genre-grid .portal-genre-symbol img,.ex-portal-genre-grid .portal-genre-all img{position:static;inset:auto;width:44px;height:44px;opacity:1;object-fit:contain;filter:drop-shadow(0 3px 5px #08020e35)}.ex-portal-genre-grid button{min-height:99px;gap:8px;padding-top:10px;padding-bottom:10px}.ex-portal-genre-grid .portal-genre-all{box-shadow:inset 0 0 0 1px #b07bec19,0 3px 15px #9141ce12}@media(max-width:349px){.ex-portal-genre-grid button{min-height:94px}.ex-portal-genre-grid .portal-genre-symbol,.ex-portal-genre-grid .portal-genre-all img{width:40px;height:40px}.ex-portal-genre-grid .portal-genre-symbol img{width:40px;height:40px}}
