/* Jogu portal — a shared, responsive shell for discovery and the library. */
:root{--night:#121418;--deep:#191c22;--cream:#f4f5f0;--text:#e9eae7;--muted:#a2a5af;--muted-dim:#858994;--mint:#d0f88b;--mint-2:#d0f88b;--line:#ffffff12;--grad-brand:linear-gradient(120deg,#d0f88b,#bae96d)}
body.portal{height:auto;min-height:100dvh;overflow:visible;background:#121418;font-size:14px;line-height:1.5}
body.portal::before,body.portal::after{display:none}
.portal a:hover{text-decoration:none}.portal svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round;flex:none}
.skip-link{position:fixed;top:-100px;left:20px;z-index:120;padding:12px 24px;color:#131711;background:#d0f88b;border-radius:10px}.skip-link:focus{top:12px}
.sidebar{position:fixed;inset:0 auto 0 0;width:232px;background:#17191e;border-right:1px solid var(--line);z-index:40;padding:32px 20px 20px;display:flex;flex-direction:column;overflow-y:auto}
.portal-brand{display:flex;align-items:center;font-size:36px;font-weight:850;letter-spacing:-2px;color:#f6f7ee;line-height:1;gap:10px;padding:0 13px 28px}.brand-dot{color:var(--mint);margin-left:-10px}.brand-symbol{background:var(--mint);color:#203016;width:36px;height:33px;border-radius:11px;display:grid;place-items:center;transform:rotate(-7deg)}.brand-symbol svg{width:25px}
.nav-caption{font-size:9px;letter-spacing:1.7px;color:#777d89;font-weight:750;padding:13px 13px 12px}
.side-nav{display:grid;gap:5px}.side-nav a{display:flex;align-items:center;gap:12px;padding:13px 12px;color:#aaadb7;font-size:12px;border-radius:9px;font-weight:550;min-height:45px;transition:background .18s,color .18s}.side-nav svg{width:18px;height:18px}.side-nav a:hover,.genre-nav a:hover{background:#ffffff08;color:#fff}.side-nav a.active{background:#d0f88b11;color:var(--mint)}.nav-count{margin-left:auto;font-size:10px;color:#969da8;border:1px solid #ffffff18;padding:1px 5px;border-radius:4px}.side-nav a.active .nav-count{color:var(--mint);border-color:#d0f88b33}.genre-nav{display:grid;gap:2px;margin-bottom:25px}.genre-nav a{display:flex;align-items:center;gap:13px;padding:10px 13px;color:#a4a8b2;border-radius:8px;font-size:12px}.genre-nav i{width:7px;height:7px;border:1px solid var(--genre);border-radius:3px;background:color-mix(in srgb,var(--genre) 30%,transparent)}.genre-nav a.active{color:var(--mint);background:#d0f88b0a}
.sidebar-bottom{margin-top:auto}.mini-note{background:linear-gradient(140deg,#2b3034,#222529);border:1px solid #ffffff0c;padding:17px 13px;border-radius:12px;display:flex;align-items:flex-start;gap:10px;margin:8px 0 22px}.mini-note svg{color:#d0f88b;width:19px}.mini-note strong{font-size:12px;line-height:1.6;font-weight:600}.mini-note span{display:block;font-size:10px;color:#888e97;margin-top:9px}.side-about{color:#90949e;font-size:11px;display:flex;justify-content:space-between;padding:0 12px}
.portal-body{margin-left:232px;min-height:100dvh;display:flex;flex-direction:column}.topbar{height:86px;display:flex;align-items:center;padding:0 44px;border-bottom:1px solid var(--line);gap:30px}.topbar-label{font-weight:600;color:#d6d8dd;font-size:13px}.portal-search{margin-left:auto;display:flex;align-items:center;gap:12px;max-width:440px;width:40%;background:#1d2026;border:1px solid #ffffff08;border-radius:9px;padding:10px 13px}.portal-search svg{width:18px;height:18px;color:#777f8c}.portal-search input{width:100%;border:0;outline:0;background:transparent;min-width:0;font-size:12px;color:#eaede7}.portal-search:focus-within{border-color:#c8e8a44d;box-shadow:0 0 0 3px #d0f88b08}.portal-search input::placeholder{color:#868b96}.portal-search input::-webkit-search-cancel-button{cursor:pointer}.portal-search kbd{border:1px solid #ffffff1a;border-radius:4px;font:10px inherit;color:#777f8c;padding:0 5px}.profile-link{display:flex;gap:9px;align-items:center;color:#b6bac4;font-size:12px;white-space:nowrap}.profile-link svg{background:#2b2f37;width:31px;height:31px;padding:7px;border-radius:50%;color:#c6cdda}.menu-button{display:none}.menu-scrim[hidden]{display:none}
.portal main{width:100%;max-width:1600px;margin:0 auto;padding:36px 44px 60px;outline:none;flex:1}.page-intro{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:27px}.portal .eyebrow{font-size:9px;letter-spacing:2px;color:#b9d78f;line-height:1.6}.page-intro h1{font-size:clamp(23px,2vw,32px);font-weight:650;letter-spacing:-1px;margin-top:9px;line-height:1.3}.page-intro h1>span{color:var(--mint)}.page-intro p{font-size:12px;color:#8f95a0;margin-top:8px}.surprise-button{flex:none;border:1px solid #ffffff1a;border-radius:8px;display:flex;align-items:center;gap:8px;font-size:11px;color:#c6c9d1;padding:10px 13px;min-height:40px}.surprise-button:hover{border-color:#c6ec9355;background:#ffffff05}.surprise-button span{font-size:18px;color:var(--mint)}
.feature-grid{display:grid;grid-template-columns:minmax(0,1.95fr) minmax(260px,1fr);gap:20px}.feature-city{position:relative;min-height:408px;border-radius:17px;overflow:hidden;background:#254c40}.feature-city__art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:68% 51%}.feature-city::after{content:'';position:absolute;inset:0;background:linear-gradient(90deg,#082f28ed 0%,#103b30ce 30%,#143e3150 64%,#173f2920),linear-gradient(0deg,#05291d77,transparent 60%)}.feature-content{position:relative;z-index:1;min-height:408px;padding:27px 32px 21px;display:flex;flex-direction:column;align-items:flex-start}.feature-label{font-size:8px;letter-spacing:1.8px;font-weight:650;display:flex;align-items:center;gap:8px;color:#fff9e4}.feature-label i{width:5px;height:5px;border-radius:50%;background:#d0f88b;box-shadow:0 0 10px #d0f88b55}.feature-city .feature-label{border:1px solid #eeffe72c;border-radius:5px;padding:6px 8px;background:#122a2166}.feature-city__copy{padding:30px 0 22px}.feature-kicker{font-size:8px;letter-spacing:1.8px;font-weight:600;color:#d1dabb}.feature-city h2{font-size:clamp(32px,3.1vw,48px);font-weight:700;line-height:1.04;letter-spacing:-1.6px;margin:10px 0 14px;color:#ffffeb}.feature-city h2 em{color:#d0f88b;font-style:normal}.feature-city__copy>p:not(.feature-kicker){max-width:285px;font-size:11px;line-height:1.7;color:#d8e4d9}.play-button{display:inline-flex;align-items:center;justify-content:center;gap:13px;border-radius:8px;background:#d0f88b;color:#263516;font-size:11px;font-weight:750;padding:13px 18px;min-height:44px;transition:background .18s,transform .18s}.play-button:hover{background:#e0ffad;transform:translateY(-2px)}.feature-city .play-button{margin-top:20px}.feature-city .play-button span:first-child{font-size:9px}.feature-city .play-button span:last-child{font-size:16px;margin-left:8px}.feature-footnote{font-size:7px;letter-spacing:1.8px;color:#c2d6c397;margin-top:auto}
.feature-rpg{position:relative;border-radius:17px;overflow:hidden;background:linear-gradient(140deg,#472f29,#281f25);display:flex;flex-direction:column;isolation:isolate}.rpg-top{display:flex;align-items:center;justify-content:space-between;padding:27px 25px;position:relative;z-index:1}.rpg-top .feature-label{font-size:8px;color:#f0c49c}.rpg-orbit{width:24px;height:24px;display:grid;place-items:center;background:#ffca9710;border:1px solid #ffce9622;border-radius:50%;color:#f3bc85}.feature-rpg>img{position:absolute;top:5px;left:0;width:100%;height:260px;object-fit:cover;mix-blend-mode:screen;opacity:.9;z-index:-1}.feature-rpg::after{content:'';position:absolute;inset:0;background:linear-gradient(0deg,#291f25 10%,#291f25cc 34%,transparent 78%);z-index:-1}.feature-rpg__copy{padding:0 27px 22px;margin-top:auto;padding-top:150px}.feature-rpg .feature-kicker{color:#f0ba89;font-size:7px;letter-spacing:1.5px}.feature-rpg h2{font-size:27px;line-height:1.14;letter-spacing:-.8px;margin:10px 0;color:#ffe5d1;font-weight:650}.feature-rpg__copy>p{font-size:11px;color:#cfb7ae}.feature-rpg__copy>a{border-top:1px solid #ffdda61c;margin-top:20px;padding-top:14px;font-size:11px;font-weight:650;color:#f8d7b7;display:flex;justify-content:space-between}.feature-rpg__copy>a:hover{color:#fff}.feature-rpg__copy>a>span{font-size:16px}
.quick-genres{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin:20px 0 38px}.quick-genres a{padding:13px 13px;background:#1b1e24;border:1px solid #ffffff0c;border-radius:8px;display:flex;align-items:center;justify-content:space-between;font-size:10px;font-weight:550;color:#b5bac6;gap:8px}.quick-genres a:first-child{color:var(--mint)}.quick-genres span{color:#626a78;font-size:10px}.quick-genres a:hover{border-color:#d0f88b44;color:var(--mint)}
.game-section{margin-top:34px}.section-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;gap:20px}.section-heading h2{font-size:20px;font-weight:600;letter-spacing:-.5px}.section-heading p{font-size:11px;color:#8b919d;margin-top:7px}.section-heading>a{font-size:10px;color:#b7bdc7;white-space:nowrap}.section-heading>a>span{margin-left:9px;color:#b9d78f}.game-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:21px}.game-card{position:relative;min-width:0;transition:transform .2s}.game-card:hover{transform:translateY(-3px)}.game-card__cover{position:relative;display:block;border-radius:11px;overflow:hidden;aspect-ratio:16/9;background:#242730;border:1px solid #ffffff08}.game-card__cover img{width:100%;height:100%;object-fit:cover;transition:transform .35s}.game-card:hover img{transform:scale(1.035)}.cover-play{position:absolute;inset:0;display:grid;place-content:center;background:#0003;color:#fff;font-size:22px;opacity:0;transition:opacity .2s}.game-card__cover:hover .cover-play,.game-card__cover:focus-visible .cover-play{opacity:1}.cover-badge{position:absolute;top:10px;left:10px;background:#272024cc;color:#ffe3bd;font-size:8px;padding:4px 7px;border:1px solid #fff2;border-radius:4px}.game-card__body{padding:9px 1px 1px}.game-card__topline{display:flex;align-items:center;justify-content:space-between;gap:10px;color:#7f8794;font-size:8px;letter-spacing:.3px}.favorite{width:32px;height:30px;display:grid;place-content:center;color:#838b98;border-radius:5px;margin-right:-4px}.favorite svg{width:16px;height:16px;stroke-width:1.5}.favorite:hover{color:#d0f88b;background:#d0f88b0d}.favorite[aria-pressed=true]{color:#d0f88b}.favorite[aria-pressed=true] svg{fill:#d0f88b}.game-card h3{font-size:14px;font-weight:600;letter-spacing:-.2px;line-height:1.4}.game-card h3 a{color:#ebede6}.game-card h3 a:hover{color:#d0f88b}.game-card__desc{font-size:10px;color:#8d94a0;margin-top:7px;line-height:1.65;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.duo-banner{margin-top:40px;padding:30px 34px;display:flex;align-items:center;gap:28px;border-radius:13px;border:1px solid #c4afea20;background:radial-gradient(ellipse at 5% 80%,#57406b50,transparent 60%),#22202b}.duo-symbol{font-size:55px;font-weight:300;color:#d5f4a7;letter-spacing:-7px;transform:rotate(-10deg);flex:none}.duo-symbol span{color:#cdb5f0;display:inline-block;transform:translateY(18px)}.duo-banner .eyebrow{font-size:8px;color:#b5a4d3}.duo-banner h2{font-size:22px;line-height:1.2;margin:6px 0 8px;letter-spacing:-.5px;font-weight:600}.duo-banner p{font-size:10px;color:#a09aaa;max-width:370px}.duo-banner .play-button{margin-left:auto;flex:none;background:#dad0ee;color:#30283e}.duo-banner .play-button:hover{background:#efe8fb}
.portal-footer{margin:0 44px;padding:23px 0 30px;border-top:1px solid var(--line);display:flex;align-items:center;gap:25px;font-size:9px;color:#747c89}.footer-wordmark{font-size:23px;font-weight:800;letter-spacing:-1.5px;color:#c0c4ca}.portal-footer>span:last-child{margin-left:auto;display:flex;align-items:center;gap:7px}.portal-footer i{width:5px;height:5px;border-radius:50%;background:#a1c376}
.catalog-toolbar{margin-top:32px}.category-chips{display:flex;gap:8px;flex-wrap:wrap}.category-chips button{min-height:38px;font-size:11px;padding:8px 15px;border:1px solid #ffffff12;border-radius:7px;color:#9fa7b4;transition:color .2s,background .2s}.category-chips button:hover{color:#d0f88b}.category-chips button[aria-pressed=true]{background:#d0f88b;color:#28321c;border-color:#d0f88b;font-weight:650}.catalog-meta{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:#9ba3b0;margin:26px 0 23px;gap:15px}.catalog-meta label{display:flex;align-items:center;gap:12px;font-size:10px}.catalog-meta select{padding:8px 28px 8px 10px;border:1px solid #ffffff15;border-radius:6px;background:#1d2128;color:#cbd1dc;font-size:11px}.catalog-grid{row-gap:29px}.catalog-empty{grid-column:1/-1;text-align:center;padding:70px 20px;background:#1b1e2480;border:1px dashed #ffffff19;border-radius:14px}.catalog-empty>span{font-size:42px;color:var(--mint)}.catalog-empty h2{font-size:23px;margin-top:15px;letter-spacing:-.5px}.catalog-empty p{font-size:13px;color:var(--muted);margin:12px 0 24px}.initial-state,.no-script{padding:40px}.initial-state h1{margin:15px 0}.initial-state p{color:var(--muted)}
.toast-host{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);z-index:120;width:min(440px,calc(100vw - 32px));pointer-events:none;display:grid;gap:8px}.toast{display:flex;align-items:center;gap:12px;padding:14px 18px;background:#2b3330;border:1px solid #d0f88b44;border-radius:10px;box-shadow:0 12px 25px #0004;color:#eaf4df;font-size:12px;transition:opacity .28s}.toast.is-out{opacity:0}.toast__ico{color:var(--mint)}
@media(min-width:1800px){.feature-city,.feature-content{min-height:460px}.feature-city__copy{padding-top:45px}.feature-rpg__copy{padding-bottom:30px}.feature-rpg>img{height:320px}.game-card h3{font-size:17px}.game-card__desc{font-size:12px}.game-card__topline{font-size:10px}.page-intro p,.section-heading p{font-size:13px}.feature-city__copy>p:not(.feature-kicker){font-size:13px}.feature-label,.feature-kicker{font-size:9px}.play-button{font-size:13px}.feature-rpg h2{font-size:33px}.feature-rpg__copy>p,.feature-rpg__copy>a{font-size:13px}.quick-genres a{font-size:12px}.feature-city h2{font-size:52px}}
@media(max-width:1200px){.sidebar{width:208px;padding-inline:14px}.portal-body{margin-left:208px}.portal main{padding:30px 28px 50px}.topbar{padding:0 28px;gap:20px}.portal-footer{margin-inline:28px}.feature-grid{gap:15px;grid-template-columns:minmax(0,1.6fr) minmax(235px,1fr)}.feature-content{padding:25px}.game-grid{gap:17px;grid-template-columns:repeat(3,minmax(0,1fr))}.game-section .game-card:last-child:nth-child(4){display:none}.quick-genres{grid-template-columns:repeat(3,1fr)}.duo-symbol{display:none}.portal-footer>span:last-child{max-width:140px}}
@media(max-width:960px){.sidebar{width:205px;transform:translateX(-100%);transition:transform .2s}.portal-body{margin-left:0}.menu-button{display:grid;place-content:center;width:36px;height:40px;color:#c7cdd5}.topbar{height:74px;gap:15px}.menu-open .sidebar{transform:translateX(0)}.menu-scrim{position:fixed;inset:0;background:#0009;z-index:35}.portal-search{width:45%}.menu-open .menu-button{position:relative;z-index:45;background:#20252c;border-radius:8px}.feature-city,.feature-content{min-height:415px}}
@media(max-width:650px){.topbar{padding:13px 18px;height:auto;flex-wrap:wrap;gap:10px}.topbar-label{font-size:12px}.portal-search{order:4;width:100%;max-width:none;height:42px;margin:0}.portal-search input{font-size:13px}.profile-link{margin-left:auto}.profile-link span{display:none}.portal main{padding:27px 18px 38px}.page-intro{align-items:flex-start;margin-bottom:22px;gap:15px}.page-intro h1{font-size:26px;letter-spacing:-.7px;max-width:350px}.page-intro p{font-size:12px;line-height:1.6}.page-intro .surprise-button{display:none}.feature-grid{grid-template-columns:1fr;gap:15px}.feature-city,.feature-content{min-height:421px}.feature-city h2{font-size:43px}.feature-content{padding:24px}.feature-city__art{object-position:62% 50%}.feature-city__copy{padding:26px 0 20px}.feature-city__copy>p:not(.feature-kicker){max-width:235px;font-size:12px}.feature-city::after{background:linear-gradient(90deg,#082f28ef,#123d31a1 58%,#173f2933),linear-gradient(0deg,#05291d55,transparent)}.feature-label{font-size:8px;letter-spacing:1.1px}.play-button{font-size:12px}.feature-rpg{min-height:212px}.rpg-top{padding:18px 20px}.feature-rpg>img{left:auto;right:-45px;top:0;width:80%;height:220px}.feature-rpg::after{background:linear-gradient(90deg,#291f25,#291f25be 35%,transparent)}.feature-rpg__copy{padding:4px 20px 18px}.feature-rpg h2{font-size:24px}.feature-rpg .feature-kicker{font-size:7px;letter-spacing:.9px}.feature-rpg__copy>a{max-width:155px;margin-top:12px;padding-top:9px}.rpg-orbit{display:none}.quick-genres{grid-template-columns:repeat(3,1fr);gap:7px;margin:16px 0 28px}.quick-genres a{padding:11px 10px;font-size:10px}.section-heading{margin-bottom:17px;align-items:flex-start;gap:10px}.section-heading h2{font-size:19px;max-width:245px;line-height:1.3}.section-heading p{font-size:11px;max-width:250px}.section-heading>a{padding-top:5px}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:21px 13px}.game-section .game-card:last-child:nth-child(4){display:block}.game-card h3{font-size:13px}.game-card__cover{border-radius:9px}.game-card__desc{font-size:10px;-webkit-line-clamp:3}.game-card__topline{font-size:7px;gap:2px}.favorite{min-width:32px;height:32px}.duo-banner{padding:24px;display:block;margin-top:30px}.duo-banner h2{font-size:23px}.duo-banner p{font-size:11px}.duo-banner .play-button{margin-top:20px}.portal-footer{margin:0 18px;padding:20px 0 26px;flex-wrap:wrap;gap:10px 20px}.portal-footer>span:last-child{margin:0;max-width:none;width:100%;font-size:8px}.category-chips{gap:7px}.category-chips button{font-size:10px;padding:8px 11px}.catalog-meta{font-size:10px;align-items:flex-start}.catalog-meta label{font-size:0;gap:0}.catalog-meta select{font-size:11px}.catalog-empty{padding:50px 15px}.catalog-empty h2{font-size:21px}.catalog-empty p{font-size:12px}.catalog-toolbar{margin-top:22px}.cover-badge{font-size:7px;left:7px;top:7px}}
.feature-rpg>img{mask-image:linear-gradient(#000 65%,transparent 100%)}
.game-card--logo .game-card__cover{background:#455b62}
.game-card--logo .game-card__cover img{object-fit:contain}
.feature-rpg--logo>img{top:62px;left:25px;right:auto;width:calc(100% - 50px);height:170px;object-fit:contain;mix-blend-mode:normal;opacity:1;mask-image:none}
.feature-rpg--logo::after{display:none}
@media(max-width:650px){.feature-rpg--logo{min-height:300px}.feature-rpg--logo>img{top:15px;left:auto;right:15px;width:46%;height:190px}.feature-rpg--logo .feature-rpg__copy{padding-top:65px;max-width:65%}}
@media(max-width:960px){.menu-open .menu-button{position:fixed;top:20px;left:218px;z-index:45}.menu-open{overflow:hidden!important}}
@media(max-width:650px){.portal-search input{font-size:16px}.game-card h3{font-size:14px}.game-card__desc{font-size:11px}.game-card__topline{font-size:8px}.category-chips button{font-size:11px;min-height:40px}}
@media(prefers-reduced-motion:reduce){.game-card:hover,.play-button:hover,.game-card:hover img{transform:none}}