/* JoyHop: a dark game portal. Original game artwork remains unchanged. */
:root{color-scheme:dark;--page:#101116;--surface:#191b24;--surface-raised:#232631;--text:#f4f5fa;--ink:var(--text);--muted:#adb2c1;--line:#2d303d;--accent:#8963ff;--accent-dark:#c2adff;--accent-soft:#302644;--font:Arial,Helvetica,system-ui,"PingFang SC","Microsoft YaHei",sans-serif;--rail:184px}
body{background:var(--page);font-family:var(--font);color:var(--text)}
body>main,body>.site-footer{margin-left:var(--rail)}
html{scroll-padding-top:88px}::selection{background:#6343aa;color:#fff}
h1,h2,h3{letter-spacing:-.025em}button,input,select,textarea{font-family:inherit}
:focus-visible{outline-color:#b59bff;outline-offset:4px}.skip-link{background:var(--surface);color:var(--text)}
.site-header{background:#181a22;border-color:var(--line)}
.header-inner{max-width:1800px;min-height:68px;padding:0 24px;gap:26px}
.brand{gap:8px;min-width:134px}.brand-word{color:#fff;font-size:29px;font-weight:800;letter-spacing:-1.2px}
.brand-mark,.brand-mark .icon{width:36px;height:36px}
.header-search{display:flex;max-width:600px;background:#2a2d3c;border:1px solid transparent;box-shadow:none;border-radius:10px;padding:0 14px;color:var(--muted)}
.header-search:focus-within{border-color:var(--accent)}.header-search input{font-size:14px;color:var(--text);padding:12px 0}
input::placeholder,textarea::placeholder{color:#a6aabd;opacity:1}
.header-nav{flex-direction:row;gap:24px;font-size:13px}.header-nav a{flex-direction:row;gap:7px;padding:20px 0;font-weight:600;color:#b9bdcb}
.header-nav a.active,.header-nav a:hover{color:#fff}.header-nav .icon{width:20px;height:20px}
.language-control{border:1px solid var(--line);border-radius:9px;padding:2px 8px;color:#e5e5ef;background:var(--surface-raised);box-shadow:none}
.language-control .icon{width:18px;height:18px}.language-control select{color:var(--text);min-height:36px;font-size:12px}
.category-bar{display:none}
.mobile-global-nav{display:block;position:fixed;top:68px;bottom:0;left:0;z-index:40;width:var(--rail);padding:25px 12px;background:#171920;border:0;border-right:1px solid var(--line);overflow:auto;overscroll-behavior:contain}
.sidebar-label{display:block;font-size:10px;line-height:1.5;text-transform:uppercase;letter-spacing:.12em;color:#9298ad;padding:0 11px;margin-bottom:12px;font-weight:700}
.collection-label{margin-top:30px}.category-link{padding:11px 10px;min-height:44px;gap:10px;border-radius:8px;color:#b9bdcb;font-size:13px;margin:3px 0}
.category-link .icon{width:22px;height:22px;object-fit:contain}.category-link.active,.category-link:hover{background:#302746;color:#e0d4ff}
.category-link.active{box-shadow:inset 3px 0 var(--accent)}.nav-backdrop{display:none}
.compact-library{max-width:1536px;margin:auto;padding:25px 26px 48px}.compact-library .library{background:none;border:0;padding:0}
.compact-library .section-heading{margin-bottom:15px}.compact-library .section-heading h1{font-size:23px;letter-spacing:-.04em;font-weight:700}
.section-heading h1::before,.section-heading h2::before,.featured-heading h2::before{display:none}
.compact-library .result-count,.compact-library .result-count b{color:var(--muted);font-size:12px;font-weight:400}
.compact-library .library-tools{gap:18px;flex-direction:row;align-items:center}.compact-library .library-tools select{color:#c5c8d4;max-width:150px;background:var(--surface);border:1px solid var(--line);border-radius:7px;padding:7px 9px;font-size:12px;min-height:34px}
.compact-library .game-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:16px 13px}
.game-card{background:var(--surface);border-radius:11px;overflow:hidden}.compact-library .game-card{background:var(--surface)}
.compact-library .game-cover,.compact-library .cover-pattern{aspect-ratio:1.55}
.compact-library .cover-link{border-radius:10px 10px 0 0;box-shadow:none}
.cover-pattern,.compact-library .cover-pattern{background:#282533}.compact-library .game-thumbnail{object-fit:cover}
.compact-library .compact-game-card .game-card-body{padding:10px 11px;min-height:37px}
.compact-library .compact-game-card .game-card-heading{height:auto;min-height:18px}
.compact-library .compact-game-card h3{font-size:13px;line-height:1.35;font-weight:600;color:#f1f2f8;letter-spacing:0}
.game-card-heading a:hover{color:#c9b7ff}.game-card{transition:box-shadow .18s,transform .18s}.game-card:hover{box-shadow:0 0 0 2px #8c6ad1;transform:translateY(-2px)}
.favorite-button,.compact-library .favorite-button{width:34px;height:34px;right:6px;top:6px;background:#181925d9;border:1px solid #ffffff2b;box-shadow:none;color:#fff}
.favorite-button .icon,.compact-library .favorite-button .icon{width:19px;height:19px}
.favorite-button:hover,.favorite-button[aria-pressed=true]{background:#49304e;border-color:#ff8dab}
[data-favorite][aria-pressed=false] .icon{filter:grayscale(1) brightness(1.7);opacity:.85}
.featured-section{display:block;margin-bottom:29px}.featured-heading{margin-bottom:15px}
.featured-heading h2{font-size:23px;letter-spacing:-.04em;font-weight:700}
.featured-controls{gap:7px}.carousel-button{width:31px;height:31px;border:1px solid var(--line);background:var(--surface-raised);color:#d8c9ff;box-shadow:none}
.carousel-button:hover{background:#363047}.featured-track{display:grid;grid-template-columns:2fr 1fr 1fr;gap:13px;border-radius:12px;overflow:hidden}
.feature-cover{min-width:0;height:246px;aspect-ratio:auto;border-radius:12px;background:#262334}
.feature-cover img{width:100%;height:100%;object-fit:cover}.feature-cover-icon img{object-fit:contain}
.feature-cover::after{inset:35% 0 0;background:linear-gradient(transparent,#0e0b19dd)}
.feature-cover h3{font-size:20px;letter-spacing:-.02em;bottom:16px;left:17px;font-weight:700;text-shadow:0 2px 6px #0007}
.feature-cover:first-child h3{font-size:30px}.home-guides{margin-top:32px}
.home-guides .section-heading h2{font-size:21px;font-weight:700}.all-guides-link{display:flex;align-items:center;gap:7px;font-size:12px;color:#c3b2fa}.all-guides-link .icon{width:14px;height:14px}
.home-guide-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.home-guide-grid .guide-card{align-items:center;padding:16px;gap:12px;flex-direction:row}
.home-guide-grid .guide-card-preview{width:58px;height:58px;border-radius:9px}
.home-guide-grid .guide-card-body{display:block}.home-guide-grid .guide-card h3{font-size:13px;font-weight:600;line-height:1.5}
.home-guide-grid .guide-type{font-size:10px;margin-bottom:4px}.home-guide-grid .guide-game{display:none}
.content-width{max-width:1320px;width:100%;padding:25px 28px 52px;margin:auto}
.game-detail.content-width{max-width:1600px;padding:22px 26px 52px}.game-detail .detail-heading{margin-bottom:18px}
.game-detail .detail-heading h1{font-family:inherit;font-size:27px;font-weight:700;letter-spacing:-.035em}
.game-detail .detail-summary{color:#b8bdcd;line-height:1.5}.game-detail .detail-icon{width:52px;height:52px;border-radius:11px}
.game-detail .play-layout{grid-template-columns:minmax(0,1fr) 250px;gap:20px}.game-detail .play-panel{height:clamp(420px,calc(100dvh - 270px),880px);background:var(--surface);border-color:var(--line);border-radius:12px}
.play-panel-top{background:#1d2029;color:var(--text);border-color:var(--line)}.game-detail .play-panel-top{min-height:50px;padding:8px 12px}
.player-name{font-size:13px;font-weight:600}.player-button{min-height:34px;background:#2b2e3b;border-color:#3b3f50;color:#e9e6f6;font-size:12px;border-radius:7px}
.player-button:hover{border-color:#9e7aff;color:white;background:#3c3353}.player-button[data-fullpage]{background:#7952ea;border-color:#7952ea;color:white}
.player-button .icon{width:17px;height:17px}.play-recommendations{padding:17px;background:var(--surface);border-color:var(--line);border-radius:12px}
.play-recommendations h2{color:#f6f5ff;font-size:16px;font-weight:600;margin-bottom:16px}
.recommendation-grid{gap:15px 10px}.recommendation-grid .game-card{background:none;border-radius:8px}.recommendation-grid .game-card:hover{transform:none;box-shadow:none}
.recommendation-grid .game-cover,.recommendation-grid .cover-pattern{aspect-ratio:1.2}.recommendation-grid .cover-link{border-radius:8px}
.recommendation-grid .game-card-body{padding:7px 0 0}.recommendation-grid h3{font-size:11px;line-height:1.4;font-weight:500}
.player-library-link{color:#c9b6ff;font-size:12px}.game-root.h5-container{background:#13151e}
.game-detail .play-panel[data-play-mode=page],.game-detail .play-panel:fullscreen{height:var(--joyhop-viewport-height,100dvh);background:#101116;border-radius:0}
.game-detail .play-panel[data-play-mode=page] .play-panel-top,.game-detail .play-panel:fullscreen .play-panel-top{min-height:44px;padding:5px max(12px,env(safe-area-inset-right)) 5px max(12px,env(safe-area-inset-left))}
.game-detail .play-panel[data-play-mode=page] .game-root,.game-detail .play-panel:fullscreen .game-root{padding-bottom:env(safe-area-inset-bottom,0px)}
.game-detail .game-facts>span{background:#2b283b;color:#d4c6ef}.game-detail .game-reading-layout{gap:28px}
.game-instructions,.related-guide-list>a,.guide-card,.article-body,.article-game-card,.information-layout>.prose,.info-links{background:var(--surface);border-color:var(--line);color:var(--text)}
.related-guide-list>a:hover{background:#252332}.prose p,.prose li{color:#c2c6d2}.prose h2{font-size:21px;font-weight:600}.prose a,.guide-type,.eyebrow,.section-number,.article-toc>a>span{color:#c5b3ff}
.prose h3,.prose summary{color:#eceef8}.prose details{border-color:var(--line)}.article-toc{border-color:var(--line)}
.article-heading h1{font-size:36px;letter-spacing:-.04em}.article-heading>p,.article-meta,.guide-card p{color:#b6bbcb}
.article-end{background:#302640}.article-end h2{color:#f2eaff}.article-game-card>strong{font-size:22px;font-weight:600}
.guide-figure img{border-color:#4c465a;background:#292432}.guide-figure figcaption{color:#b8bdcd}
.information-heading{border-color:var(--line)}.information-heading p,.info-links>a{color:var(--muted)}
.button{background:#292c39;border-color:#3e4254;color:var(--text);border-radius:8px}.button:hover{background:#393348;border-color:#9c7de8;color:white}
.button-primary{background:#7952ea;border-color:#7952ea;color:white}.button-primary:hover{background:#8f6af3;color:white}
input,textarea,select{color:var(--text);background:#222532;border-color:#404455}input:focus,textarea:focus{border-color:#a383ef}
.feedback-form .form-help,.feedback-form [data-feedback-status]{color:#c4badc}.notice{border-color:#51435d;background:#2d2537}.notice p{color:#e0d8ec}
.local-data{background:#222431;border-color:var(--line)}.local-data [data-clear-status]{color:#d5c4ff}
.toast{background:#2d2540;border-color:#786195;color:#f2e9ff;z-index:500;box-shadow:0 6px 25px #0005}
.site-footer{background:#161820;border-top:1px solid var(--line);padding:35px 28px 0;color:var(--muted)}
.footer-top,.footer-bottom{max-width:1480px;margin:auto}.footer-top{gap:40px;grid-template-columns:minmax(0,1fr) 160px 160px}
.footer-brand{color:#f1f2f8;font-size:24px;font-weight:700;letter-spacing:-1px}.footer-intro p{color:#a9afc0;font-size:13px;max-width:420px}
.footer-column{font-size:13px}.footer-column h2{color:#e2e4ee;font-weight:600}.footer-bottom{border-color:var(--line);font-size:11px;line-height:1.8}
@media(min-width:1600px){.feature-cover{height:280px}}
@media(min-width:1001px) and (max-width:1270px){.compact-library .game-grid{grid-template-columns:repeat(5,minmax(0,1fr))}.header-inner{gap:20px}.header-nav{gap:16px}.header-nav .icon{display:none}.feature-cover{height:210px}.feature-cover h3{font-size:18px}.feature-cover:first-child h3{font-size:26px}.game-detail .play-layout{grid-template-columns:minmax(0,1fr) 215px}}
@media(max-width:1000px){
 :root{--rail:0px}body>main,body>.site-footer{margin-left:0}
 .header-inner{min-height:64px;padding:0 20px;gap:20px}.brand-word{font-size:27px}.brand{min-width:128px}
 .mobile-menu{display:grid;flex-shrink:0;width:36px;height:40px;border:0;background:none;color:#d9ccff}
 .header-nav{gap:16px}.header-nav a{padding:18px 0}.header-nav .icon{display:none}
 .mobile-global-nav{display:none;top:64px;width:260px;border-right:1px solid var(--line);padding:24px 16px;z-index:130}
 .nav-open .mobile-global-nav{display:block;background:#1b1d27;max-height:calc(100dvh - 64px)}
 .nav-open .nav-backdrop{display:block;position:fixed;inset:64px 0 0;z-index:120;border:0;padding:0;background:#0009;width:100%;height:calc(100dvh - 64px)}
 .category-bar{display:block;padding:0 20px;background:#181a22;border-bottom:1px solid var(--line)}
 .category-bar-inner{min-height:48px;gap:7px;padding:6px 0;overflow:auto;scrollbar-width:none;border-radius:0;background:none;box-shadow:none}
 .category-bar-inner>a{flex:0 0 auto;min-height:34px;padding:6px 12px;font-size:12px;border-radius:7px;gap:7px;color:#c5c9d9;border:0}
 .category-bar-inner>a.active,.category-bar-inner>a.active:hover{background:#372b50;color:#e3d6ff;box-shadow:none}.category-bar-inner>a:hover{background:#282a38;color:white}
 .category-bar-inner .icon,.category-bar-inner>a.active .icon{width:21px;height:21px;flex-basis:21px;padding:1px;background:none;border-radius:0}
 .compact-library{padding:22px 20px 40px}.compact-library .game-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
 .feature-cover{height:210px}.featured-heading h2,.compact-library .section-heading h1{font-size:22px}
 .feature-cover:first-child h3{font-size:27px}.feature-cover h3{font-size:18px;left:14px}
 .game-detail .play-layout{grid-template-columns:minmax(0,1fr)}.play-recommendations{padding:18px}
 .recommendation-grid{grid-template-columns:repeat(6,minmax(0,1fr));gap:13px}.play-recommendations .favorite-button{display:none}
 .recommendation-grid .game-cover,.recommendation-grid .cover-pattern{aspect-ratio:1.3}
 .play-recommendations h2{margin-bottom:13px}.player-library-link{margin-top:17px}
 .home-guide-grid .guide-card{padding:13px}.home-guide-grid .guide-card-preview{width:46px;height:46px}
}
@media(max-width:740px){
 .header-search{display:none}.header-nav{margin-left:auto}.header-inner{gap:16px}.language-control{margin-left:0}
 .compact-library .mobile-search{display:flex;background:#242737;border:1px solid #3a3e51;border-radius:10px;padding:0 13px;color:#c9b9fc;margin-bottom:22px}
 .mobile-search input{color:var(--text);font-size:14px;padding:12px 0;background:none}.mobile-search:focus-within{border-color:#a486ed}
 .featured-track{display:flex;overflow-x:auto;gap:12px;scroll-snap-type:x mandatory;border-radius:11px}
 .feature-cover{flex:0 0 62%;height:auto;aspect-ratio:1.75}.feature-cover:first-child h3{font-size:24px}.feature-cover h3{font-size:23px}
 .compact-library .game-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:13px 11px}
 .home-guide-grid{grid-template-columns:1fr}.home-guide-grid .guide-card{padding:15px;align-items:center;flex-direction:row}
 .home-guide-grid .guide-card-body{display:block}.home-guide-grid .guide-card-preview{width:48px;height:48px}
 .article-heading h1{font-size:29px}.content-width{padding:22px 20px 40px}
}
@media(max-width:620px){
 .header-inner{min-height:60px;padding:0 12px;gap:10px}.brand{gap:7px;min-width:0}.brand-word{font-size:25px;letter-spacing:-1px}
 .brand-mark,.brand-mark .icon{width:31px;height:31px}.header-nav{display:none}.mobile-menu{width:32px;height:40px}
 .language-control{margin-left:auto;padding:1px 7px;border-radius:8px}.language-control .icon{width:16px;height:16px}.language-control select{min-height:34px;font-size:12px}
 .category-bar{padding:0 12px}.category-bar-inner{min-height:46px}.category-bar-inner>a{font-size:12px;padding:6px 10px}
 .mobile-global-nav{top:60px;width:min(280px,calc(100vw - 48px))}.nav-open .mobile-global-nav{top:60px;max-height:calc(100dvh - 60px)}
 .nav-open .nav-backdrop{top:60px;height:calc(100dvh - 60px)}
 .compact-library{padding:17px 12px 32px}.compact-library .mobile-search{margin-bottom:20px}.compact-library .section-heading{align-items:center;gap:9px;margin-bottom:13px}
 .featured-heading h2,.compact-library .section-heading h1{font-size:21px;max-width:none}.featured-heading{margin-bottom:12px}
 .featured-section{margin-bottom:24px}.feature-cover{flex-basis:86%;aspect-ratio:1.85}.feature-cover h3,.feature-cover:first-child h3{font-size:23px;bottom:14px;left:15px}
 .compact-library .game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:13px 11px}
 .compact-library .compact-game-card .game-card-body{padding:10px 9px}.compact-library .compact-game-card h3{font-size:12px;line-height:1.35}
 .compact-library .library-tools{gap:8px}.compact-library .result-count{display:block;font-size:10px}.compact-library .library-tools select{font-size:10px;min-width:0;max-width:114px;padding:6px;min-height:32px}
 .compact-library .favorite-button{opacity:1;width:36px;height:36px;background:#191926d9}.compact-library .favorite-button .icon{width:19px;height:19px}
 .compact-library .favorite-button::before{content:"";position:absolute;inset:-4px}
 .game-detail.content-width{padding:12px 12px 32px}.game-detail>.breadcrumb{display:none}.game-detail .detail-heading{margin:0 0 12px;gap:10px;min-height:48px}
 .game-detail .detail-identity{gap:10px}.game-detail .detail-icon{width:42px;height:42px;border-radius:9px}.game-detail .detail-heading h1{font-size:21px;font-weight:700;margin:0 0 4px}
 .game-detail .detail-summary{display:none}.game-detail .detail-category{font-size:11px}.game-detail .detail-heading>.button{min-height:36px;padding:7px 9px;font-size:11px}
 body[data-path^="games/"] .category-bar{display:none}
 .game-detail .play-panel{height:min(calc((100vw - 24px)*16/9 + 48px),calc(100svh - 138px));min-height:210px;border-radius:10px}
 .game-detail .play-panel-top{min-height:44px;padding:6px 8px;gap:7px}.player-name{font-size:11px}.player-controls{gap:5px}
 .player-button{font-size:11px;padding:6px 8px;min-height:32px;gap:4px}.player-button .icon{width:15px;height:15px}
 .game-detail .play-panel[data-play-mode=page],.game-detail .play-panel:fullscreen{height:var(--joyhop-viewport-height,100dvh);min-height:0;border-radius:0}
 .game-detail .play-panel[data-play-mode=page] .play-panel-top,.game-detail .play-panel:fullscreen .play-panel-top{padding-top:max(5px,env(safe-area-inset-top));min-height:44px}
 .game-detail .play-layout{gap:20px}.play-recommendations{padding:15px}.recommendation-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px 8px}
 .recommendation-grid .compact-game-card h3{font-size:10px;line-height:1.35}.game-reading-layout{gap:20px}.game-detail .game-instructions{padding:21px 18px}
 .content-width{padding:20px 16px 34px}.article-heading{padding-top:0}.article-heading h1{font-size:28px;line-height:1.25}.article-body{padding:22px 18px}
 .article-meta{gap:10px}.article-end{padding:18px;gap:12px}.article-end h2{font-size:18px}.prose h2{font-size:20px}
 .guide-archive-grid .guide-card{padding:17px}.guide-archive-grid h3{font-size:17px}.information-layout>.prose{padding:21px 18px}
 .home-guides{margin-top:27px}.site-footer{padding:28px 16px 0}.footer-top{gap:25px;grid-template-columns:1fr 1fr}.footer-intro{grid-column:1/-1}
 .footer-bottom{flex-direction:column;gap:9px;padding:20px 0 23px}.footer-intro p{font-size:12px}
}
@media(max-width:360px){.brand-word{font-size:23px}.brand-mark,.brand-mark .icon{width:28px;height:28px}.header-inner{gap:8px}.game-detail .player-name{max-width:84px}.game-detail .detail-heading h1{font-size:19px}.player-button{padding:6px;font-size:10px}.compact-library .library-tools .result-count{display:none}}
@media(orientation:landscape) and (max-height:500px){.game-detail .play-panel{min-height:185px}.game-detail .play-panel[data-play-mode=page],.game-detail .play-panel:fullscreen{min-height:0}.feature-cover{height:200px}}
@media(prefers-reduced-motion:reduce){.game-card,.feature-cover img{transition:none}.game-card:hover{transform:none}}