:root{--bg:#10110e;--panel:#181a16;--lime:#d0ff40;--ink:#f4f5ec;--muted:#b1b5a7;--line:#363a2f;--font:'Noto Sans JP','Yu Gothic',sans-serif;--display:'Barlow Condensed',Impact,sans-serif;color-scheme:dark} *{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:105px}body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.9}a{color:inherit;text-decoration:none}button,a{-webkit-tap-highlight-color:transparent}a:focus-visible,button:focus-visible{outline:3px solid var(--lime);outline-offset:6px}img{display:block;max-width:100%}figure,p,h1,h2,h3{margin:0}em{font-style:normal}::selection{background:var(--lime);color:var(--bg)}.container{width:min(1280px,calc(100% - 112px));margin-inline:auto}.skip-link{position:fixed;top:8px;left:16px;z-index:50;transform:translateY(-180%);background:var(--lime);color:var(--bg);padding:8px 20px}.skip-link:focus{transform:none}.site-header{height:100px;display:flex;align-items:center;justify-content:space-between;gap:32px;padding:0 56px;border-bottom:1px solid var(--line);background:#10110ef5;position:relative;z-index:10}.wordmark{display:inline-flex;flex-direction:column;line-height:1.05;flex-shrink:0}.wordmark>span{font-family:var(--display);font-weight:900;font-style:italic;font-size:32px;letter-spacing:-.5px}.wordmark-accent{color:var(--lime)}.wordmark small{font-size:12px;font-weight:700;letter-spacing:.3em;margin-top:7px}.site-header nav{display:flex;gap:32px;font-size:14px;font-weight:600}.site-header nav a{transition:color .2s}.site-header nav a:hover{color:var(--lime)}.header-platform{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.07em;color:var(--muted)}.hero{position:relative;isolation:isolate;min-height:720px;overflow:hidden}.hero-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:70% 50%;z-index:-3}.hero-shade{position:absolute;inset:0;background:linear-gradient(90deg,#10110ef0 0%,#10110eb8 42%,#10110e12 85%),linear-gradient(0deg,#10110e95,transparent 28%);z-index:-1}.hero-inner{padding-top:66px;padding-bottom:28px;min-height:720px;display:flex;flex-direction:column;align-items:flex-start}.eyebrow{display:flex;align-items:center;flex-wrap:wrap;gap:16px;font-size:12px;font-weight:600;letter-spacing:.04em}.tag{border:1px solid var(--lime);color:var(--lime);padding:4px 10px;font-family:var(--display);font-size:14px;letter-spacing:.1em}.hero h1{font-size:clamp(42px,5.15vw,78px);font-weight:900;letter-spacing:-.045em;line-height:1.42;margin-top:28px;text-shadow:0 2px 25px #10110e20}.hero h1 em{color:var(--lime)}.hero-copy{font-size:18px;line-height:1.9;margin-top:20px;color:#e0e2d9}.button{display:inline-flex;align-items:center;justify-content:space-between;gap:56px;padding:17px 26px;font-weight:800;font-size:16px;transition:background .2s,transform .2s}.button span{font-size:24px;line-height:1}.button-lime{background:var(--lime);color:var(--bg);margin-top:30px}.button-lime:hover{background:#e0ff89;transform:translateY(-2px)}.hero-bottom{width:100%;margin-top:auto;padding-top:55px;display:flex;justify-content:space-between;gap:20px;align-items:center}.hero-genre{font-size:14px;font-weight:600;letter-spacing:.1em}.capture-label{font-size:12px;color:#dde0d3;background:#10110e60;padding:2px 8px}.hero-side{position:absolute;right:20px;top:70px;writing-mode:vertical-rl;font-family:var(--display);font-size:14px;letter-spacing:.18em;color:#dce0d0}.training-strip{display:flex;justify-content:center;align-items:center;gap:clamp(16px,3vw,50px);padding:20px 24px;background:var(--lime);color:var(--bg);font-family:var(--display);font-weight:800;font-size:clamp(26px,4.4vw,66px);line-height:1}.training-strip i{font-style:normal;color:#10110e45;font-weight:500}.section{padding-block:116px}.section-kicker{font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:.13em;color:var(--lime);margin-bottom:26px}h2{font-weight:900;font-size:clamp(32px,3.6vw,54px);letter-spacing:-.04em;line-height:1.5}.text-lime{color:var(--lime)}.about{display:grid;grid-template-columns:1fr 1fr;gap:100px}.about h2{font-size:clamp(50px,5.6vw,82px);line-height:1.3}.about-copy{padding-top:62px;max-width:475px}.about-copy p{color:var(--muted);margin-bottom:22px}.about-copy .large-copy{font-size:26px;font-weight:700;line-height:1.65;color:var(--ink);margin-bottom:28px}.text-link{display:inline-flex;gap:35px;padding-bottom:9px;border-bottom:1px solid var(--lime);font-size:14px;font-weight:600}.text-link:hover{color:var(--lime)}.gameplay{border-top:1px solid var(--line)}.section-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-bottom:64px}.section-heading>p{font-size:14px;color:var(--muted);white-space:nowrap}.feature-row{display:grid;grid-template-columns:1.25fr 1fr;gap:72px;align-items:center}.feature-row figure{position:relative}.feature-row img{width:100%;aspect-ratio:4/3;object-fit:cover}.feature-row figcaption{font-family:var(--display);font-size:13px;letter-spacing:.09em;color:var(--muted);padding-top:10px}.feature-copy{position:relative;padding-top:24px}.feature-number{position:absolute;right:0;top:-42px;font-family:var(--display);font-size:120px;font-weight:800;color:#292d22;line-height:1;z-index:-1}.feature-en{font-family:var(--display);color:var(--lime);font-size:16px;letter-spacing:.12em;margin-bottom:12px}.feature-copy h3{font-size:clamp(30px,3.2vw,46px);font-weight:900;line-height:1.5;letter-spacing:-.04em;margin-bottom:23px}.feature-copy>p:last-of-type{color:var(--muted);font-size:16px}.muscle-tags{display:flex;flex-wrap:wrap;gap:8px;margin-top:22px}.muscle-tags span{border:1px solid #4d5638;width:42px;height:36px;text-align:center;font-size:14px;line-height:34px;color:#d2d9c2}.release{background:var(--panel);text-align:center;border-top:1px solid var(--line)}.release h2{font-size:clamp(34px,4.1vw,62px);margin-bottom:24px}.release>.container>p:not(.section-kicker){color:var(--muted)}.store-action{margin-top:34px}.store-status{display:inline-block;background:#303627;border:1px solid #687752;color:#d4e6b6;padding:15px 45px;font-size:17px;font-weight:700}.store-action p{margin-top:12px;font-size:13px;color:var(--muted)}.game-info{max-width:780px;margin:65px auto 0;text-align:left;display:grid;grid-template-columns:1fr 1fr;gap:28px 52px}.game-info>div{border-top:1px solid #414837;padding-top:15px}.game-info dt{font-size:12px;color:var(--muted);margin-bottom:6px}.game-info dd{margin:0;font-size:15px;font-weight:500}.site-footer{display:flex;justify-content:space-between;align-items:center;gap:30px;padding-block:40px}.site-footer p{font-size:12px;color:var(--muted)}.footer-domain{font-family:var(--display);font-size:15px;letter-spacing:.1em;color:var(--muted)} .hero-image{left:24%;width:76%;object-position:50% 40%}.hero-shade{background:linear-gradient(90deg,#10110e 18%,#10110ef0 31%,#10110ea0 48%,#10110e00 76%),linear-gradient(0deg,#10110ea0,transparent 25%)}.feature-contest{grid-template-columns:1fr 1.25fr}.feature-contest img{aspect-ratio:16/10;object-fit:cover}.feature-copy .contest-caption{color:var(--lime);font-size:14px;border-left:2px solid var(--lime);padding-left:14px;margin-top:22px}.recovery{display:grid;grid-template-columns:1fr 1.15fr;gap:70px;background:var(--lime);color:var(--bg);padding:52px 48px;margin:90px 0;position:relative}.recovery .feature-en{color:#35421c}.recovery h3{font-size:clamp(30px,3.2vw,46px);font-weight:900;line-height:1.5;letter-spacing:-.04em}.recovery h3 span{border-bottom:3px solid currentColor}.recovery-copy>p{font-size:16px;line-height:1.9}.daily-routine{list-style:none;padding:0;margin:30px 0 0;display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.daily-routine li{border-top:1px solid #10110e60;padding-top:12px;display:flex;flex-direction:column}.daily-routine li>span{font-family:var(--display);font-size:14px;font-weight:600;line-height:1.2;margin-bottom:9px}.daily-routine strong{font-size:18px;font-weight:800;white-space:nowrap}.daily-routine small{font-size:12px;color:#3f4d23;margin-top:3px} @media(min-width:1600px){.hero{min-height:790px}.hero-inner{min-height:790px;padding-top:90px}} @media(max-width:1050px){.container{width:calc(100% - 64px)}.site-header{padding-inline:32px;gap:24px}.header-platform{display:none}.hero h1{font-size:clamp(42px,6.6vw,68px)}.about{gap:50px}.feature-row{gap:36px}.section{padding-block:86px}.feature-number{font-size:100px;top:-30px}.footer-domain{display:none}} @media(max-width:680px){html{scroll-padding-top:25px}.container{width:calc(100% - 40px)}.site-header{height:auto;min-height:108px;padding:16px 20px;align-items:flex-start;gap:15px;flex-wrap:wrap}.wordmark>span{font-size:28px}.wordmark small{font-size:12px;letter-spacing:.21em}.site-header nav{width:100%;gap:24px;font-size:12px;justify-content:space-between}.hero,.hero-inner{min-height:660px}.hero-inner{padding-top:40px;padding-bottom:24px}.hero h1{font-size:clamp(31px,7.7vw,50px);letter-spacing:-.055em;margin-top:28px;line-height:1.55}.hero-copy{font-size:16px;margin-top:22px}.hero-image{object-position:65% 50%}.hero-shade{background:linear-gradient(90deg,#10110ee0,#10110e55),linear-gradient(0deg,#10110ecd,transparent 55%)}.eyebrow{gap:10px;font-size:12px;flex-direction:column;align-items:flex-start}.tag{font-size:13px}.hero-bottom{align-items:flex-start;gap:12px;flex-direction:column;padding-top:45px}.hero-genre{font-size:12px}.hero-side{right:7px;top:45px;font-size:12px}.button{gap:46px;padding:15px 22px}.training-strip{font-size:29px;padding:21px 12px;gap:12px}.section{padding-block:68px}.about{grid-template-columns:1fr;gap:24px}.about h2{font-size:52px}.about-copy{padding-top:0;max-width:100%}.about-copy .large-copy{font-size:23px}.section-kicker{font-size:14px;margin-bottom:20px}.section-heading{display:block;margin-bottom:38px}.section-heading h2{font-size:31px}.section-heading>p{margin-top:18px;white-space:normal}.feature-row{grid-template-columns:1fr;gap:32px}.feature-row img{aspect-ratio:4/3}.feature-copy{padding-top:0}.feature-number{top:-12px;font-size:100px}.feature-copy h3{font-size:34px}.release h2{font-size:33px}.release>.container>p:not(.section-kicker){font-size:15px}.store-status{padding:15px 25px;font-size:16px}.game-info{grid-template-columns:1fr;gap:20px;margin-top:45px}.site-footer{align-items:flex-start;flex-direction:column;gap:22px;padding-block:35px}.site-footer p{font-size:12px}} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*,*::before,*::after{animation:none!important;transition:none!important}} @media(max-width:1050px){.recovery{gap:38px;padding:38px 32px}.daily-routine{gap:12px}.daily-routine strong{font-size:16px}} @media(max-width:680px){.hero-image{left:0;width:100%;object-position:53% 50%}.hero-shade{background:linear-gradient(90deg,#10110ee0,#10110e55),linear-gradient(0deg,#10110ef5,transparent 50%)}.site-header nav{font-size:14px;gap:15px}.feature-contest{grid-template-columns:1fr}.feature-contest figure{grid-row:1}.feature-contest img{aspect-ratio:16/10}.recovery{grid-template-columns:1fr;gap:25px;margin:58px -20px;padding:38px 24px}.recovery h3{font-size:34px}.daily-routine{gap:14px}.daily-routine strong{font-size:16px}.daily-routine small{font-size:12px}.feature-number{z-index:0;opacity:.6;pointer-events:none}.feature-copy>*:not(.feature-number){position:relative}} /* The original game title artwork, with its original colors and proportions. */ .wordmark .game-logo{width:245px;height:auto;object-fit:contain}.site-footer .game-logo{width:230px}@media(max-width:680px){.wordmark .game-logo{width:215px}.site-header{padding-block:12px}.site-footer .game-logo{width:215px}} /* --- Structure and conversion path, 2026-09-13 --- */ /* Release status, stated up front in the hero. */ .hero-release{display:flex;flex-direction:column;gap:5px;margin-top:26px;border-left:2px solid var(--lime);padding-left:16px} .hero-release-main{font-size:20px;font-weight:800;letter-spacing:-.01em} .hero-release-sub{font-size:13px;color:#d3d7c8;letter-spacing:.04em} /* The hero pairs a navigational button with the store status. */ .hero-actions{display:flex;align-items:center;flex-wrap:wrap;gap:20px} .hero-actions .button-lime{margin-top:30px} .store-action-hero{margin-top:30px} .store-action-hero .store-status{padding:14px 30px;font-size:15px} /* The store status repeats at the end of the gameplay section. */ .section-cta{margin-top:92px;border-top:1px solid var(--line);padding-top:46px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:22px} .section-cta-lead{font-size:23px;font-weight:800;letter-spacing:-.02em} .store-action-inline{margin-top:0} .store-action-inline .store-status{padding:14px 34px;font-size:15px} /* The release section restates the title, the date, then the store. */ .release-logo{width:270px;height:auto;object-fit:contain;margin:42px auto 0} .release-date{display:inline-flex;align-items:baseline;gap:14px;margin-top:26px;border-top:1px solid #414837;border-bottom:1px solid #414837;padding:13px 30px} .release-date-label{font-size:12px;color:var(--muted);letter-spacing:.1em} .release-date-value{font-family:var(--display);font-size:40px;font-weight:800;line-height:1;letter-spacing:.02em} /* The official trailer, loaded only when the viewer asks for it. */ .trailer .section-heading{margin-bottom:44px} .video-frame{position:relative;border:1px solid var(--line);background:#000} .video-play{display:block;width:100%;padding:0;border:0;background:none;cursor:pointer;position:relative;color:inherit} /* height:auto is required, or the width/height attributes fix the box and the aspect-ratio is ignored. */ .video-play img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;display:block;opacity:.82;transition:opacity .25s} .video-play:hover img,.video-play:focus-visible img{opacity:1} /* A lime triangle marks the play control without an image asset. */ .video-play-icon{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:0;height:0;border-style:solid;border-width:26px 0 26px 44px;border-color:transparent transparent transparent var(--lime);filter:drop-shadow(0 2px 14px #10110e90);transition:transform .25s} .video-play:hover .video-play-icon{transform:translate(-50%,-50%) scale(1.08)} .video-play-label{position:absolute;left:0;bottom:0;background:var(--lime);color:var(--bg);font-size:14px;font-weight:800;padding:10px 22px} .video-note{margin-top:14px;font-size:13px;color:var(--muted)} .video-frame iframe{display:block;width:100%;aspect-ratio:16/9;border:0} /* Sections arrive as the viewer reaches them. */ [data-reveal]{opacity:0;transform:translateY(22px);transition:opacity .7s ease,transform .7s ease} [data-reveal].is-visible{opacity:1;transform:none} /* A persistent bar keeps the store status reachable at any scroll depth. It stays hidden until the hero is behind us, so the first view is intact. */ .fixed-cta{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;align-items:center;gap:24px;padding:12px 40px;background:#0d0e0b;border-top:1px solid var(--line);transform:translateY(105%);transition:transform .35s ease;visibility:hidden} .fixed-cta.is-shown{transform:none;visibility:visible} .fixed-cta-title{font-size:15px;font-weight:800;white-space:nowrap} .fixed-cta-meta{font-size:12px;color:var(--muted);letter-spacing:.04em;white-space:nowrap} .store-action-fixed{margin-top:0;margin-left:auto} .store-action-fixed .store-status{padding:10px 26px;font-size:14px} /* Reserve room so the bar never covers the last line of the footer. */ body{padding-bottom:84px} /* The hero's last row is pinned to the bottom of a flex column, so padding on the row itself only pushes it past the fold. Shrink the column instead, and keep the hero at least the bar's height clear of the viewport bottom. */ .hero,.hero-inner{min-height:min(720px,calc(100vh - 100px - 74px))} .hero-inner{padding-bottom:24px} @media(max-width:1050px){ .fixed-cta{padding-inline:24px;gap:16px} .release-logo{width:230px} } /* Below ~400px the four-word strip no longer fits on one line, so the type and the gaps both have to come down. */ @media(max-width:400px){ .training-strip{font-size:clamp(19px,6.2vw,26px);gap:8px;padding:18px 10px} .training-strip i{font-weight:400} } @media(max-width:680px){ .hero-release{margin-top:22px;padding-left:13px} .hero-release-main{font-size:17px} .hero-release-sub{font-size:12px} .hero-actions{gap:12px;width:100%} .hero-actions .button-lime,.store-action-hero{margin-top:24px} .hero-actions .button{gap:30px} .store-action-hero .store-status{padding:13px 22px;font-size:14px} .section-cta{margin-top:58px;padding-top:34px;display:block} .section-cta-lead{font-size:19px} .store-action-inline{margin-top:18px} .store-action-inline .store-status{display:block;text-align:center;padding:14px 20px} .release-logo{width:200px;margin-top:32px} .release-date{margin-top:22px;padding:11px 22px;gap:12px} .release-date-value{font-size:32px} /* Stacking the bar would eat the small viewport, so it stays on one line. */ .fixed-cta{padding:10px 16px;gap:10px} .fixed-cta-meta{display:none} .fixed-cta-title{font-size:13px} .store-action-fixed .store-status{padding:9px 18px;font-size:13px} body{padding-bottom:66px} } /* --- Scenes from the game, 2026-09-13b --- Appended last so these rules win on order; the media queries below the base rules follow the same pattern as the rest of the file. */ /* An establishing shot of the gym, full-bleed under the gameplay heading. */ .scene-wide{margin:0 0 78px;position:relative} .scene-wide img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover} .scene-wide figcaption{font-family:var(--display);font-size:13px;letter-spacing:.09em;color:var(--muted);padding-top:10px} /* "Eat. Rest." is claimed in the copy above; these are the two places it happens. Two images, equal weight, captioned in Japanese. */ /* Two scenes that back the "eat / rest" claim. This is a full-width row of its own, below the recovery block - nested inside that block's right column it measured 596x756 per figure and left a dead lime slab. */ .scene-pair{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin:64px 0 90px} .scene-pair figure{margin:0} .scene-pair img{width:100%;height:auto;aspect-ratio:16/9;object-fit:cover} .scene-pair figcaption{padding-top:11px;font-size:13px;color:var(--muted);font-weight:500} @media(max-width:680px){ .scene-wide{margin-bottom:52px} .scene-pair{grid-template-columns:1fr;gap:20px;margin:44px 0 62px} .scene-pair figcaption{padding-top:9px} } /* The 2026-09-13 hero capture frames the character tighter and more centrally than the one it replaces. The desktop rule above shifts the image box right (left:24%;width:76%), which pushed the subject against the right edge and clipped the arm. Pull the framing back toward the subject. */ @media(min-width:681px){ .hero-image{object-position:38% 46%} } /* Mobile hero framing: left at the base 680px rule (53% 50%). The 4:5 crop puts the character's head near the top centre, which is where the headline block sits at 390px, so the face is partly behind the type. 53% 50% / 62% 62% / 72% 42% were each measured and none clears it; panning alone cannot fix it at this crop. Left as-is (no worse than the previous wide hero, which cut the character off entirely). A dedicated phone crop with the character lower in frame would be the real fix. */ /* --- Hero gate footage, 2026-09-16 --- The hero background is now the 8s silent gate loop. The headline and CTAs are unchanged; only what sits behind them changed. A