@import url("/mobile-polish.css?v=12");

/* The homepage is a sequence of encounters: character, story, art, play, objects. */
:root{--ink:#101820;--white:#fff;--muted:#59636b;--quiet:#59636b;--line:#dce0e3;--soft:#f5f6f6;--sans:"Alibaba PuHuiTi","PingFang SC",sans-serif;--display:"QianTu HouHei","Alibaba PuHuiTi",sans-serif;--page-pad:clamp(20px,5vw,88px);--ease:cubic-bezier(.16,1,.3,1)}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;color:var(--ink);background:#fff;font-family:var(--sans);-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%;height:auto}
figure,p,h1,h2,h3,h4{margin:0}
a{color:inherit;text-decoration:none}
button,a{-webkit-tap-highlight-color:transparent}
.icon-sprite{position:absolute;width:0;height:0;overflow:hidden}
.link-icon,.card-arrow svg{display:block;width:20px;height:20px;flex:0 0 20px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
::selection{color:#fff;background:var(--ink)}
a:focus-visible,button:focus-visible{outline:2px solid var(--ink);outline-offset:5px}
.skip-link{position:fixed;top:12px;left:16px;z-index:200;padding:14px 20px;background:var(--ink);color:#fff;transform:translateY(-160%)}
.skip-link:focus{transform:none}
.site-header nav{display:flex;white-space:nowrap}

/* A generous, quiet first encounter with the original character. */
.hero{position:relative;display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:0;min-height:min(900px,100svh);padding:132px var(--page-pad) 100px;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-copy{position:relative;z-index:2;max-width:660px}
.hero-intro{margin:0 0 30px;font-size:12px;font-weight:500;letter-spacing:.15em;line-height:1.7}
.hero h1{font-family:var(--display);font-size:clamp(68px,7.2vw,112px);font-weight:800;line-height:1.13;letter-spacing:0}
.hero h1 span{display:inline-block;position:relative}
.hero-summary{max-width:24em;margin:28px 0 32px;color:var(--muted);font-size:17px;line-height:1.9}
.hero-actions{display:flex;align-items:center;gap:24px;flex-wrap:wrap}
.button{display:inline-flex;min-height:52px;align-items:center;justify-content:center;gap:26px;padding:0 23px;border:1px solid transparent;border-radius:5px;font-size:15px;font-weight:500;line-height:1.5;transition:background .2s,color .2s}
.button-dark{color:#fff;background:var(--ink)}
.button-quiet{padding-inline:0;border-radius:0;border-bottom-color:var(--ink)}
.hero-stage{position:relative;align-self:stretch;display:grid;place-items:center;min-width:0;min-height:520px}
.hero-word{position:absolute;top:12%;left:-5%;font-family:var(--display);font-size:clamp(100px,14.5vw,240px);font-weight:800;line-height:1;letter-spacing:-.04em;color:#f0f2f3;pointer-events:none}
.hero-figure{position:relative;width:min(100%,660px);margin:0;z-index:1}
.hero-figure img{width:100%;height:auto;object-fit:contain}
.hero-caption{position:absolute;bottom:5%;left:53.428571%;transform:translateX(-50%);white-space:nowrap;text-align:center;color:var(--quiet);font-size:13px;letter-spacing:.03em}
.hero-foot{position:absolute;bottom:28px;left:var(--page-pad);right:var(--page-pad);display:flex;justify-content:space-between;align-items:center;color:var(--quiet);font-size:12px;line-height:1.8}
.hero-foot a{display:flex;flex-shrink:0;align-items:center;gap:20px;min-height:44px;white-space:nowrap}
.hero-foot svg{transform:rotate(90deg);width:16px;height:16px}

/* Story: full, uncropped art opposite a short invitation to read. */
.story,.worlds,.home-games,.goods{padding:clamp(76px,8vw,128px) var(--page-pad)}
.story-heading,.section-heading{display:grid;grid-template-columns:1fr .72fr;align-items:end;gap:48px;margin-bottom:44px}
.story-heading h2,.section-heading h2{font-size:clamp(36px,4.1vw,64px);line-height:1.25}
.story-heading p,.home-hub-summary>p{max-width:33em;font-size:16px;color:var(--muted);line-height:1.85}
.section-kicker{display:block;margin-bottom:18px;color:var(--quiet);font-size:12px;font-weight:500;letter-spacing:.12em}
.story-card{display:grid;grid-template-columns:1.2fr 1fr;align-items:center;overflow:hidden;background:var(--ink);color:#fff;border-radius:6px}
.story-art{display:block;position:relative;width:100%;overflow:hidden;align-self:center}
.story-panorama{width:100%;height:auto;object-fit:contain}
.story-copy{padding:clamp(32px,4vw,64px)}
.story-meta{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;color:#c6cdd2;font-size:12px;line-height:1.7}
.story-copy h3{margin:24px 0;font-size:clamp(38px,4.1vw,62px);line-height:1.2}
.story-copy>p{max-width:30em;color:#d2d7db;font-size:16px;line-height:1.9}
.story-copy blockquote{margin:24px 0 22px;padding:0;color:#aab6be;font-size:14px;line-height:1.8}
.text-link,.section-link{display:inline-flex;align-items:center;gap:24px;min-height:44px;border-bottom:1px solid currentColor;font-size:14px;font-weight:500;line-height:1.6}
.text-link .link-icon,.section-link .link-icon{transition:transform .35s var(--ease)}
.story-copy .text-link{color:#fff}
.story-copy a:focus-visible{outline-color:#fff}

/* Artwork stays on the page as artwork, with captions outside its frame. */
.worlds{border-top:1px solid var(--line)}
.home-hub-heading{margin-bottom:64px}
.home-hub-nav{display:flex;flex-wrap:wrap;gap:24px;margin-top:12px}
.home-hub-nav a{display:inline-flex;align-items:center;min-height:44px;font-size:14px;color:var(--muted)}
.home-hub-summary .section-link{margin-top:16px}
.home-category-heading{display:flex;justify-content:space-between;align-items:baseline;gap:28px;margin-bottom:30px;padding-top:24px;border-top:1px solid var(--line)}
.home-category-heading h3{flex:0 0 auto;font-size:clamp(26px,2.4vw,36px);line-height:1.3}
.home-category-heading>p{max-width:39em;color:var(--muted);font-size:15px;line-height:1.85;text-wrap:pretty}
.world-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:44px 28px;align-items:start}
.world-card{display:block;min-width:0}
.world-card-botanical{grid-column:1/-1}
.world-card figure{overflow:hidden;background:#f7f8f8}
.world-card img{width:100%;height:auto;object-fit:contain;transition:opacity .3s}
.world-card-copy{position:relative;display:grid;grid-template-columns:1fr auto;gap:9px;padding:20px 30px 0 0}
.world-card-copy h4{grid-column:1/-1;font-size:clamp(24px,2vw,30px)}
.world-card-copy>span:not(.card-arrow){grid-column:1/-1;color:var(--quiet);font-size:12px;line-height:1.7}
.world-card-copy p{grid-column:1/-1;color:var(--muted);font-size:15px;line-height:1.8}
.world-card-copy .card-arrow{position:absolute;right:0;top:24px;transition:transform .35s var(--ease)}
.world-card-botanical .world-card-copy{grid-template-columns:1fr 1fr}
.world-card-botanical .world-card-copy h4{grid-column:1;grid-row:1}
.world-card-botanical .world-card-copy>span:not(.card-arrow){grid-column:1;grid-row:2}
.world-card-botanical .world-card-copy p{grid-column:2;grid-row:1/3;align-self:center}
.home-art-2d>.section-link,.home-actual-products>.section-link{margin-top:28px}
.home-pen-feature{margin:0 0 56px;scroll-margin-top:108px}
.home-pen-art{display:block;width:min(100%,1680px,calc((100svh - 300px)*2));margin-inline:auto}
.home-pen-art img{width:100%;height:auto;object-fit:contain}
.home-pen-feature figcaption{display:flex;justify-content:space-between;align-items:flex-end;gap:24px 40px;flex-wrap:wrap;margin-top:24px}
.home-pen-copy{display:grid;gap:10px;min-width:0}
.home-pen-copy>span{font-size:13px;color:var(--muted);line-height:1.8}
.home-pen-feature h4{margin:0;font-size:clamp(26px,2.4vw,36px);line-height:1.35}
.home-pen-copy>p{max-width:38em;font-size:15px;color:var(--muted);line-height:1.85;text-wrap:pretty}
.home-pen-feature .home-product-detail-link{flex-shrink:0}
.partner-intro{padding:88px 0 0;background:#fff}
.partner-intro-art{display:block}
.partner-intro-art img{width:100%;height:auto;object-fit:contain}
.partner-poster-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:32px;margin-top:32px}
.partner-poster{min-width:0}
.partner-poster img{width:100%;height:auto}
.partner-poster figcaption{padding-top:20px}
.partner-poster h4{font-size:clamp(23px,2vw,30px);line-height:1.35}
.partner-poster p{margin-top:9px;font-size:15px;line-height:1.8;color:var(--muted);text-wrap:pretty}
.partner-intro-foot{display:flex;justify-content:space-between;align-items:center;gap:24px;padding-top:24px}
.partner-intro-foot>p{font-size:14px;color:var(--muted);line-height:1.8}

/* Two categories, four complete posters. Compact on both desktop and phone. */
.home-games{background:#f5f6f6;border-block:1px solid var(--line)}
.home-game-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px}
.home-game-group{min-width:0}
.home-game-group .home-category-heading{display:block;border-color:#ced4d8}
.home-game-group .home-category-heading p{margin-top:12px}
.home-game-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.home-game-card{display:block;min-width:0}
.home-game-card figure{margin:0}
.home-game-card figure>span{display:block;aspect-ratio:1003/1568;overflow:hidden;border-radius:4px;box-shadow:0 8px 22px #1018200d;transition:translate .45s var(--ease),box-shadow .45s var(--ease)}
.home-game-card img{width:100%;height:100%;object-fit:contain}
.home-game-card>div{padding-top:20px}
.home-game-card p{font-size:12px;color:var(--quiet);line-height:1.7}
.home-game-card h4{margin:8px 0;font-size:clamp(20px,1.7vw,27px);line-height:1.4}
.home-game-card>div>span{display:inline-flex;align-items:center;gap:16px;min-height:44px;font-size:13px}
.home-game-card>div>span::after{content:"";width:6px;height:6px;border-top:1px solid;border-right:1px solid;transform:rotate(45deg)}
.home-game-group>.section-link{margin-top:24px}

/* Objects: a coherent shelf, followed by a small and honest future space. */
.home-product-posters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px 32px}
.home-product-posters figure{margin:0;min-width:0}
.home-product-posters img{display:block;width:100%;height:auto;object-fit:contain}
.home-product-posters figcaption{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px 24px;margin-top:20px}
.home-product-posters h4{margin:0;font-size:clamp(24px,2.2vw,32px);line-height:1.45}
.home-product-detail-link{display:inline-flex;align-items:center;gap:16px;min-height:44px;font-size:14px;border-bottom:1px solid var(--ink)}
@media(max-width:700px){.home-product-posters{grid-template-columns:1fr;gap:36px}}
.goods-stage{--goods-gap:24px;display:flex;gap:var(--goods-gap);align-items:flex-start}
.goods-item{display:block;min-width:0;flex:1 1 0}
.goods-item-fan{flex-grow:.706667}
.goods-item-notebook,.goods-item-tote{flex-grow:.665625}
.goods-item>img{display:block;width:100%;height:auto;aspect-ratio:auto;object-fit:contain;background:transparent;transition:translate .4s var(--ease)}
.goods-item>div{display:grid;gap:8px;margin-top:20px}
.goods-item span{color:var(--quiet);font-size:12px;line-height:1.7}
.goods-item strong{font-size:clamp(20px,1.7vw,26px);font-weight:800;line-height:1.5}
.home-concept-products{display:grid;grid-template-columns:1fr 1fr;gap:48px;margin-top:72px;padding-top:28px;border-top:1px solid var(--line)}
.home-concept-products .home-category-heading{display:block;border:0;padding:0;margin:0}
.home-concept-products .home-category-heading p{margin-top:12px}
.home-concept-empty{padding:24px 28px;background:#f5f6f6;border-radius:4px}
.home-concept-status{font-size:24px;color:var(--ink)}
.home-concept-empty>p:not(.home-concept-status){margin-top:12px;color:var(--muted);font-size:14px;line-height:1.8}
.home-concept-empty .section-link{margin-top:14px}

.closing{position:relative;display:grid;justify-items:center;text-align:center;padding:88px var(--page-pad) 96px;border-top:1px solid var(--line)}
.closing>img{width:110px;height:110px;object-fit:contain;margin-bottom:24px}
.closing h2{font-size:clamp(34px,4.8vw,72px);line-height:1.3}
.closing>p{max-width:34em;margin-top:22px;color:var(--muted);font-size:16px;line-height:1.85}
.closing>div{margin-top:30px}
footer{display:grid;grid-template-columns:200px 1fr auto;align-items:center;gap:30px;padding:28px var(--page-pad);border-top:1px solid var(--line);font-size:12px;line-height:1.8;color:var(--quiet)}
footer>img{width:180px;height:70px;object-fit:cover}
footer nav{display:flex;justify-content:center;flex-wrap:wrap;gap:24px}
footer nav a{min-height:44px;display:inline-flex;align-items:center;font-size:14px}
footer>span{max-width:none;white-space:nowrap;text-align:right}

/* Only near-viewport content is prepared for an entrance. It is visible by default. */
@media(prefers-reduced-motion:no-preference){
  .hero-copy{animation:junyu-copy-in .9s var(--ease) both}
  .hero-figure{animation:junyu-character-in 1.2s .1s var(--ease) both}
}
@keyframes junyu-copy-in{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes junyu-character-in{from{opacity:0;transform:translateY(28px) scale(.98)}to{opacity:1;transform:none}}
@media(hover:hover) and (pointer:fine){
  .button-dark:hover{background:#34424d}
  .home-hub-nav a:hover,footer a:hover{text-decoration:underline;text-underline-offset:6px}
}
@media(hover:hover) and (pointer:fine) and (prefers-reduced-motion:no-preference){
  .text-link:hover .link-icon{transform:translate(3px,-3px)}
  .section-link:hover .link-icon{transform:translateX(5px)}
  .world-card:hover .card-arrow{transform:translate(3px,-3px)}
}
@media(min-width:1700px){.hero{min-height:900px}.hero-stage{min-height:640px}}
@media(max-width:1080px){
  .hero{min-height:760px;grid-template-columns:1fr 1fr;padding-top:130px;padding-bottom:100px}
  .hero-stage{min-height:430px}.hero h1{font-size:clamp(64px,7.7vw,90px)}.hero-actions{gap:18px}
  .story-card{grid-template-columns:1.1fr 1fr}.story-copy{padding:32px}.story-copy h3{font-size:42px}
  .story-copy blockquote{display:none}.story-copy .text-link{margin-top:20px}
  .home-game-groups{gap:32px}.home-game-grid{gap:18px}
  footer{display:flex;flex-direction:column;align-items:center;text-align:center}footer nav{justify-content:center}footer>span{max-width:100%;text-align:center}
}
@media(max-width:760px){
  .hero{display:grid;grid-template-columns:1fr;min-height:0;padding:116px var(--page-pad) 78px;gap:12px}
  .hero-copy{max-width:540px}.hero-intro{margin-bottom:20px;font-size:11px}.hero h1{font-size:clamp(56px,11vw,82px);line-height:1.15}
  .hero-summary{font-size:16px;margin:22px 0 24px;max-width:27em}.hero-actions{gap:24px}.button{min-height:48px;font-size:14px;padding-inline:18px}.button-quiet{padding-inline:0}
  /* Keep the grid item's intrinsic image size inside the mobile stage. */
  .hero-stage{min-height:0;height:clamp(290px,75vw,440px);margin-top:-2px}.hero-figure{height:100%;width:100%;min-height:0;min-width:0;aspect-ratio:auto}.hero-figure img{height:100%;width:100%;object-fit:contain}
  .hero-word{top:12%;left:50%;transform:translateX(-50%);font-size:25vw}.hero-caption{display:none}.hero-foot{bottom:14px;font-size:11px}.hero-foot>span{display:none}.hero-foot a{margin-left:auto}
  .story-heading,.section-heading{grid-template-columns:1fr;gap:18px;margin-bottom:32px}.section-kicker{margin-bottom:14px;font-size:11px}.story-heading h2,.section-heading h2{font-size:clamp(32px,8.9vw,50px)}
  .story-heading p,.home-hub-summary>p{font-size:15px}.story-card{grid-template-columns:1fr}.story-copy{padding:30px 24px 34px}.story-copy h3{font-size:42px;margin:20px 0}.story-copy>p{font-size:15px}.story-copy blockquote{display:block;margin:22px 0 8px}.story-copy .text-link{margin-top:16px}
  .home-hub-heading{margin-bottom:38px}.home-hub-nav{margin-top:8px;gap:22px}.home-hub-nav a{font-size:13px}.home-hub-summary .section-link{margin-top:10px}
  .home-category-heading{display:block;margin-bottom:24px;padding-top:22px}.home-category-heading h3{font-size:27px}.home-category-heading>p{font-size:14px;margin-top:12px}
  .home-pen-art{width:100%}
  .world-card-copy{padding-top:16px;padding-right:0;gap:7px}.world-card-copy h4{font-size:23px}.world-card-copy p{font-size:14px}.world-card-copy .card-arrow{display:none}.world-card-botanical .world-card-copy{display:block}.world-card-botanical .world-card-copy p{margin-top:8px}.world-card-botanical .world-card-copy>span{display:block;margin-top:7px}
  .partner-intro{padding-top:60px}.partner-intro-foot{align-items:flex-start;flex-direction:column;gap:10px;padding-top:16px}
  .partner-poster-grid{grid-template-columns:1fr;gap:32px;margin-top:24px}.partner-poster figcaption{padding-top:16px}.partner-poster p{font-size:14px;margin-top:7px}
  .home-game-groups{grid-template-columns:1fr;gap:48px}.home-game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}.home-game-card h4{font-size:22px}.home-game-card>div{padding-top:16px}.home-game-card>div>span{font-size:12px}.home-game-group>.section-link{margin-top:14px}
  .goods-stage{--goods-gap:20px;flex-wrap:wrap;gap:32px var(--goods-gap)}.goods-item{flex:0 0 calc((100% - var(--goods-gap))/2)}.goods-item-mouse{flex-basis:calc((100% - var(--goods-gap))*.5859375)}.goods-item-fan{flex-basis:calc((100% - var(--goods-gap))*.4140625)}.goods-item strong{font-size:22px}.goods-item>div{margin-top:16px}.goods-item span{font-size:11px}
  .home-concept-products{grid-template-columns:1fr;gap:24px;margin-top:52px}.home-concept-empty{padding:24px}.home-concept-status{font-size:23px}
  .closing{padding-block:60px 72px}.closing>img{width:88px;height:88px;margin-bottom:18px}.closing h2{max-width:8em;font-size:42px}.closing>p{font-size:15px}
  footer{gap:12px;padding-block:20px 32px}footer>img{width:155px;height:65px}footer nav{justify-content:center;gap:24px}footer nav a{font-size:13px}footer>span{font-size:11px;text-align:center}
}
@media(max-width:768px){
  .world-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 20px}
  .world-card-mountain{grid-column:1/-1;width:100%;display:block}
  .world-card-mountain .world-card-copy{padding:16px 0 0}
}
@media(max-width:359px){.hero-actions{gap:16px}.button{gap:12px;font-size:13px}.hero h1{font-size:56px}.world-card-copy h4,.home-game-card h4,.goods-item strong{font-size:20px}.home-game-grid,.world-grid{column-gap:14px}.goods-stage{--goods-gap:14px}}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}}
@media(forced-colors:active){.story-card{background:Canvas;color:CanvasText;border:1px solid CanvasText}.story-copy :is(p,span,a,blockquote){color:CanvasText}.button{border:1px solid ButtonText}.hero-word{display:none}}

/* The introduction is short enough to balance naturally without orphaned punctuation. */
.home-fantasy-story{margin-top:48px;scroll-margin-top:100px}
.story-copy h3{text-wrap:balance}
.home-fantasy-story h3 span{white-space:nowrap}
@media(max-width:760px){.home-fantasy-story{margin-top:42px}}
.worlds .partner-intro .home-category-heading > p {max-width:none;text-wrap:balance;}
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion:no-preference) and (min-width:761px) {
    .hero {view-timeline-name:--junyu-hello;view-timeline-axis:block;}
    .hero-word {animation:junyu-type-drift linear both;animation-timeline:--junyu-hello;animation-range:exit 0% exit 100%;}
    @keyframes junyu-type-drift {from{translate:0 0;}to{translate:0 100px;}}
  }
}

/* Equal caption tracks keep paired game entry points on the same baseline. */
@supports (grid-template-rows:subgrid) {
  .home-game-grid { row-gap:0; }
  .home-game-card { display:grid; grid-template-rows:subgrid; grid-row:span 4; }
  .home-game-card>div { display:contents; }
  .home-game-card p { margin-top:20px; }
  .home-game-card h4 { align-self:start; }
  .home-game-card>div>span { align-self:start; }
}

.home-game-card .game-title-phrase { white-space:nowrap; }