/* Unified top-page CSS for JA / ZH-TW / KO / EN */
.scene{position:relative;background-position:top center;background-repeat:no-repeat;background-size:1920px auto}
.scene-forest{background-color:#a8cf6d}
.scene-wood{background-color:#4c2c1b}
.scene-inn{background-color:#9ecf78}
.scene-lower{background-color:#4a2b1b;background-repeat:repeat-y}

/* language-specific background artwork */
body.lang-ja .scene-forest{background-image:url('../img/ja/bg_01_forest.png')}
body.lang-ja .scene-wood{background-image:url('../img/ja/bg_02_wood.png')}
body.lang-ja .scene-inn{background-image:url('../img/ja/bg_03_inn.png')}
body.lang-ja .scene-lower{background-image:url('../img/ja/bg_04_wood.png')}
body.lang-zhtw .scene-forest{background-image:url('../img/zhtw/bg_01_forest.png')}
body.lang-zhtw .scene-wood{background-image:url('../img/zhtw/bg_02_wood.png')}
body.lang-zhtw .scene-inn{background-image:url('../img/zhtw/bg_03_inn.png')}
body.lang-zhtw .scene-lower{background-image:url('../img/zhtw/bg_04_wood.png')}
body.lang-ko .scene-forest{background-image:url('../img/ko/bg_01_forest.png')}
body.lang-ko .scene-wood{background-image:url('../img/ko/bg_02_wood.png')}
body.lang-ko .scene-inn{background-image:url('../img/ko/bg_03_inn.png')}
body.lang-ko .scene-lower{background-image:url('../img/ko/bg_04_wood.png')}
body.lang-en .scene-forest{background-image:url('../img/en/bg_01_forest.png')}
body.lang-en .scene-wood{background-image:url('../img/en/bg_02_wood.png')}
body.lang-en .scene-inn{background-image:url('../img/en/bg_03_inn.png')}
body.lang-en .scene-lower{background-image:url('../img/en/bg_04_wood.png')}

/* first view */
.scene-forest .content-column{padding-bottom:76px}
.hero-map,.campaign-image{width:750px;max-width:100%;margin:0 auto}
.hero-map>img{width:100%;height:auto}
.hero-appstore{left:30%;top:74%;width:26.8%;height:6%}
.hero-googleplay{left:58.8%;top:74%;width:32.8%;height:6%}

/* story: language image heights differ, so use document flow instead of fixed y-coordinates */
.story-inner{padding-top:18px;padding-bottom:150px}
.story-copy{display:block;margin:0 auto;max-width:none}
body.lang-ja .story-copy{width:711px}
body.lang-zhtw .story-copy{width:707px}
body.lang-ko .story-copy{width:723px}
body.lang-en .story-copy{width:713px}
.story-characters{display:block;width:585px;max-width:none;height:auto;margin:67px auto 0}

/* gameplay */
.gameplay-section .content-column{padding-bottom:29px}
.gameplay-panel{display:block;margin:-128px auto 0;max-width:none;height:auto}
body.lang-ja .gameplay-panel,body.lang-zhtw .gameplay-panel,body.lang-ko .gameplay-panel{width:814px}
body.lang-en .gameplay-panel{width:864px}
.prereg-banner-map{width:807px;max-width:none;margin:21px auto 0}
.prereg-banner-map>img{display:block;width:100%;height:auto}
.banner-appstore{left:29%;top:45.2%;width:27%;height:28%}
.banner-googleplay{left:58%;top:37%;width:32.8%;height:27%}

/* lower section: same spacing logic for every language */
.lower-inner{display:flex;flex-direction:column;align-items:center;padding:88px 0 80px;min-height:0}
.other-lead{display:block;height:auto;margin:0 auto;max-width:none}
body.lang-ja .other-lead{width:649px}
body.lang-zhtw .other-lead{width:528px}
body.lang-ko .other-lead{width:643px}
body.lang-en .other-lead{width:713px}
.other-games-map{width:753px;max-width:none;margin:61px auto 0}
.minna-appstore{left:20.2%;top:46.6%;width:31.8%;height:5.7%}
.minna-googleplay{left:54.8%;top:46.6%;width:38.5%;height:5.7%}
.ganso-appstore{left:20.8%;top:88.3%;width:31.3%;height:5.3%}
.ganso-googleplay{left:54%;top:88.3%;width:38.8%;height:5.3%}
.footer-lead{display:block;height:auto;margin:64px auto 0;max-width:none}
body.lang-ja .footer-lead{width:727px}
body.lang-zhtw .footer-lead{width:666px}
body.lang-ko .footer-lead{width:650px}
body.lang-en .footer-lead{width:598px}
.official-links{display:flex;flex-direction:column;align-items:center;gap:86px;width:753px;max-width:100%;margin:63px auto 0}

/* Namepara banner: common responsive rule for all languages.
   Supports both the legacy .namepara-link and the newer .namepara-btn HTML. */
.namepara-link,
.namepara-btn{
  display:block;
  width:520px;
  max-width:calc(100% - 32px);
  margin-left:auto;
  margin-right:auto;
  text-decoration:none;
}
.namepara-link img,
.namepara-btn img{
  display:block;
  width:100%;
  max-width:100%;
  height:auto;
  border:0;
}

/* Fallback only: remove this once every language uses an image banner. */
.namepara-text-link{display:flex;align-items:center;justify-content:center;width:520px;max-width:calc(100% - 32px);min-height:92px;margin-left:auto;margin-right:auto;padding:14px 24px;border:3px solid #fff;border-radius:14px;background:#f3cf32;color:#5a2b13;text-decoration:none;font-weight:800;font-size:24px;text-align:center;box-shadow:0 2px 0 rgba(0,0,0,.25)}
.sns-links{display:flex;gap:116px;align-items:center;justify-content:center}
.sns-links a{display:block;width:92px}
.sns-links img{display:block;width:100%;height:auto}
.site-footer{width:670px;max-width:89%;margin:59px auto 0;text-align:center;color:#fff;font-size:20px;line-height:1.55}
.app-info{margin:0 auto 34px;text-align:left;display:grid;gap:7px}
.app-info>div{display:grid;grid-template-columns:6.5em 1fr;gap:10px}
.app-info dt{font-weight:700}.app-info dd{margin:0}
.store-note{opacity:.96;font-size:16px;margin:28px 0 24px;text-align:left;line-height:1.55}
.trademark-note{margin-top:30px}
.page-top{display:block;width:172px;margin:68px auto 0;border:0;outline:0;box-shadow:none;text-decoration:none}
.page-top img{display:block;width:100%;height:auto;border:0;outline:0;box-shadow:none}

.legal-footer{background:#4b2b1d;color:#fff;text-align:center;padding:22px 16px 28px;font-size:12px;line-height:1.7}
.legal-footer nav{display:flex;flex-wrap:wrap;justify-content:center;gap:6px 0;margin:0 auto 12px}
.legal-footer nav a{text-decoration:underline;padding:0 12px;border-right:1px solid rgba(255,255,255,.55)}
.legal-footer nav a:last-child{border-right:0}.legal-footer .copyright{margin:0}

@media(max-width:753px){
 html,body,main{width:100%;max-width:100%;overflow-x:hidden}
 .content-column{width:100%;max-width:100%}
 .scene{background-position:top center;background-size:auto 100%}
 .scene-forest .content-column{padding-bottom:10vw}
 .hero-map,.campaign-image{width:100%;max-width:100%}
 .story-inner{padding:2.4vw 0 20vw}
 .story-copy{width:auto!important;max-width:94vw;height:auto}
 .story-characters{width:78vw;max-width:585px;margin-top:8vw}
 .gameplay-section .content-column{padding-bottom:4vw}
 .gameplay-panel{width:auto!important;max-width:108vw;margin-top:-17vw}
 .prereg-banner-map{width:100%;max-width:100%;margin-top:2.8vw}
 .lower-inner{padding:11.7vw 0 10vw}
 .other-lead{width:auto!important;max-width:94vw}
 .other-games-map{width:100%;max-width:100%;margin-top:8vw}
 .footer-lead{width:auto!important;max-width:94vw;margin-top:8vw}
 .official-links{width:100%;gap:11vw;margin-top:8vw}
 .namepara-link,.namepara-btn{width:86%;max-width:520px}
 .namepara-text-link{width:86%;max-width:520px;min-height:0;padding:3.2vw 4vw;font-size:clamp(16px,4vw,24px)}
 .sns-links{gap:15vw}.sns-links a{width:12.2vw;max-width:92px}
 .site-footer{width:89vw;max-width:89vw;margin-top:8vw;font-size:clamp(11px,2.7vw,16px)}
 .app-info>div{grid-template-columns:6em 1fr;gap:2vw}
 .store-note{font-size:clamp(10px,2.2vw,14px);margin:4vw 0}
 .page-top{width:22.8vw;max-width:172px;margin-top:8vw}
 .legal-footer{font-size:10px;padding:18px 10px 24px}
 .legal-footer nav{display:block}.legal-footer nav a{display:block;border-right:0;padding:3px 0}
}

/* v2: center the oversized gameplay panel itself, not its visible character edge.
   This intentionally allows both Croche and Kobo to crop symmetrically outside the 753px content column. */
.gameplay-panel{
  position:relative;
  left:50%;
  transform:translateX(-50%);
  margin-left:0;
  margin-right:0;
}
@media(max-width:753px){
  .gameplay-panel{
    left:50%;
    transform:translateX(-50%);
    margin-left:0;
    margin-right:0;
  }
}

/* v3: keep the ground visible through the gameplay/store CTA transition.
   The bg_03 images are extended downward, and fallback colors match the ground artwork. */
body.lang-ja .scene-inn{background-color:#c7bd86}
body.lang-zhtw .scene-inn{background-color:#b8c1aa}
body.lang-ko .scene-inn{background-color:#bdb99c}
body.lang-en .scene-inn{background-color:#b4c1a7}

/* Coming Soon state: App Store areas are intentionally non-clickable. */
.hotspot.is-disabled{pointer-events:none;cursor:default}

/* 2026-10-01 Coming Soon corrections ----------------------------------
   - Use one divider-free wood texture for the entire OTHER GAMES/lower area.
   - Precisely align Google Play hotspots to each language's Coming Soon artwork.
*/
.scene-lower{
  background-image:url('../img/common/bg_wood_no_divider.png') !important;
  background-repeat:repeat-y;
  background-position:top center;
  background-size:1920px auto;
  background-color:#4a2b1b;
}

/* FV Google Play buttons */
body.lang-ja .hero-googleplay{left:59.07%;top:71.79%;width:32.53%;height:4.73%}
body.lang-zhtw .hero-googleplay{left:59.20%;top:71.01%;width:32.40%;height:4.70%}
body.lang-ko .hero-googleplay{left:62.27%;top:69.74%;width:32.27%;height:4.67%}
body.lang-en .hero-googleplay{left:62.80%;top:70.22%;width:31.73%;height:4.64%}

/* Google Play buttons below the gameplay panel */
body.lang-ja .banner-googleplay{left:58.00%;top:38.02%;width:32.59%;height:23.35%}
body.lang-zhtw .banner-googleplay{left:58.24%;top:41.23%;width:32.34%;height:23.69%}
body.lang-ko .banner-googleplay{left:60.72%;top:39.33%;width:32.22%;height:23.17%}
body.lang-en .banner-googleplay{left:60.47%;top:34.27%;width:32.47%;height:21.35%}