:root { color-scheme: dark; --cream: #f1e8cf; --ink: #000; }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--ink); color: var(--cream); font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; }
img { display: block; max-width: 100%; height: auto; }
.hero { overflow: hidden; background: linear-gradient(180deg, transparent 0%, #00000014 22%, #00000070 48%, #000000d9 76%, #000 100%), url("assets/title-background.webp") center top / cover no-repeat; }
.hero-inner { position: relative; display: grid; grid-template-columns: .85fr 1.15fr; align-items: center; max-width: 1250px; min-height: min(780px, 82svh); padding: 24px 42px 0; margin: 0 auto; }
.hero-art { grid-column: 2; grid-row: 1; position: relative; width: 130%; margin-left: -12%; }
.hero-art img { width: 100%; filter: drop-shadow(0 20px 24px #0006); mask-image: linear-gradient(#000 65%, transparent 100%); }
.hero-copy { grid-column: 1; grid-row: 1; position: relative; z-index: 1; text-align: center; }
h1 { margin: 0; }
.logo { width: min(350px, 85%); margin: 0 auto; filter: drop-shadow(0 4px 10px #000b); }
.download { position: relative; z-index: 2; display: flex; justify-content: center; padding: 24px 24px 32px; }
.store-link { display: block; border-radius: 10px; }
.store-link img { width: auto; height: 56px; }
.store-link:focus-visible { outline: 3px solid var(--cream); outline-offset: 8px; }
footer { padding: 12px 20px calc(24px + env(safe-area-inset-bottom)); text-align: center; color: #a8a49b; }
footer small { font-size: 10px; letter-spacing: .08em; }
.footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 24px; margin-bottom: 22px; }
.footer-links a { color: inherit; font-size: 11px; text-decoration: underline; text-underline-offset: 4px; padding: 10px 0; }
.footer-links a:focus-visible { outline: 2px solid var(--cream); outline-offset: 5px; }
@media (max-width: 760px) {
  .hero-inner { display: flex; flex-direction: column; min-height: 0; padding: 0 18px; }
  .hero-art { flex: none; width: 128%; margin: 6px 0 0 12%; }
  .hero-copy { margin-top: -27%; width: 100%; }
  .logo { width: min(300px, 75%); }
  .download { padding: 24px 24px 30px; }
}
@media (min-width: 761px) and (max-width: 1000px) {
  .hero-inner { padding-inline: 25px; min-height: 620px; }
  .hero-art { width: 155%; margin-left: -18%; }
}

a { color: inherit; text-underline-offset: 5px; }
a:focus-visible { outline: 2px solid var(--cream); outline-offset: 6px; }
/* Plain language links, matching the owner's JA / EN reference. */
.language { position: absolute; top: 18px; right: 24px; z-index: 3; display: flex; align-items: center; gap: 3px; color: #29251e; }
.language-icon { flex: none; margin-right: 5px; opacity: .8; }
.language a { display: grid; place-items: center; min-width: 36px; min-height: 44px; padding: 0 4px; color: inherit; font-size: 13px; font-weight: 500; letter-spacing: .04em; line-height: 1; text-decoration: none; }
.language-divider { color: #6b6255; font-size: 18px; font-weight: 400; }
.language a[aria-current="page"] { font-weight: 750; }
.language a:hover { text-decoration: underline; text-underline-offset: 5px; }
.language a:focus-visible { outline: 2px solid currentColor; outline-offset: 1px; }
.introduction, .trailer { max-width: 960px; margin: auto; padding: 60px 24px; text-align: center; }
.introduction { padding-top: 24px; }
h2 { font-family: inherit; font-weight: 400; font-size: clamp(26px, 4vw, 42px); line-height: 1.5; margin: 12px 0 24px; text-wrap: balance; }
p { font-size: 17px; line-height: 2; }
.introduction > p:not(.eyebrow):not(.fine-print) { max-width: 700px; margin-inline: auto; }
.eyebrow { color: #dfbb71; font-size: 12px; letter-spacing: .18em; }
.fine-print { color: #aaa69e; font-size: 12px; margin-top: 0; }
.download-text { display: inline-block; padding: 15px 28px; border: 1px solid #b79a62; border-radius: 4px; background: #191711; text-decoration: none; font-size: 16px; }

.trailer { padding-top: 0; }
.trailer iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; border: 0; }
@media (max-width: 600px) { .introduction { padding: 24px 22px; } .trailer { padding: 0 22px 32px; } .language { top: 10px; right: 12px; } p { font-size: 16px; } }

@font-face { font-family: "Reggae One"; src: url("/assets/fonts/reggae-one-ja.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
@font-face { font-family: "New Rocker"; src: url("/assets/fonts/new-rocker-en.woff2") format("woff2"); font-style: normal; font-weight: 400; font-display: swap; }
html[lang="ja"] body { font-family: "Reggae One", sans-serif; }
html[lang="en"] body { font-family: "New Rocker", serif; }
.language, footer { font-family: "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif; }

.introduction h2 span { display: inline-block; }