/* Approved game-window design: shared by Japanese, English and Chinese pages. */
/* --gutter is the side margin of the story / system / VR sections; --edge is the slim margin of the header, opening and information. */
:root { --window:#f2f3d9; --rim:#3e4237; --ink:#30332b; --cut:12px; --gutter:7%; --edge:8px; }
* { box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { max-width:1400px; margin:0 auto; position:relative; background:#030403; color:var(--window); font-family:'Hiragino Kaku Gothic ProN','Hiragino Sans',Meiryo,sans-serif; line-height:1.9; }
html:lang(en) body { font-family:'Helvetica Neue',Arial,'Hiragino Kaku Gothic ProN',Meiryo,sans-serif; }
html:lang(zh) body { font-family:'PingFang SC','Hiragino Sans GB','Microsoft YaHei','Noto Sans CJK SC','Noto Sans SC',sans-serif; }
a { color:inherit; text-decoration:none; }
button { font:inherit; cursor:pointer; }
a:focus-visible,button:focus-visible,video:focus-visible { outline:3px solid #a1bd75; outline-offset:5px; }
h1,h2,p { margin:0; }
h2 { font-size:30px; letter-spacing:.12em; }
p { font-size:15px; line-height:2.2; }
/* Ambient game footage has no interactive controls. */
video { pointer-events:none; }

/* Header */
header { height:85px; margin:0 var(--edge); position:absolute; inset:0 0 auto; z-index:10; display:flex; align-items:center; justify-content:space-between; gap:20px; border-bottom:1px solid #f2f3d933; }
header>a { display:flex; align-items:center; min-height:44px; line-height:1; }
header img { width:210px; display:block; }
header nav { display:flex; align-items:center; gap:28px; min-height:44px; font-size:12px; line-height:1; }
header nav>a { display:flex; align-items:center; min-height:44px; letter-spacing:.05em; }
header nav>a:hover { color:#cdd6ae; }

/* Chamfered frames reproduce the game's ivory command windows. */
.hero-copy,.game-panel,.commands,.nav-product,.information .wrapper>.container,.stores a {
 position:relative; isolation:isolate; color:var(--ink); border:0;
 background:var(--rim);
 clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut));
}
.hero-copy:before,.game-panel:before,.commands:before,.nav-product:before,.information .wrapper>.container:before,.stores a:before {
 content:''; position:absolute; inset:5px; z-index:-1;
 background:var(--window);
 clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);
}
.nav-product { padding:10px 18px; font-weight:700; }
header nav>.nav-product:hover { color:var(--ink); }

/* Opening: full-bleed scene with title and trailer command, then introduction and commands. */
.hero { display:flex; flex-direction:column; gap:30px; padding:125px 0 30px; }
.hero-stack,.hero-stores { margin-inline:var(--edge); }
.hero-film { position:relative; overflow:hidden; aspect-ratio:16/9; background:#080c08; }
.hero-film>video { width:100%; height:100%; display:block; object-fit:contain; object-position:center; opacity:.88; filter:brightness(.88) saturate(.86); }
.hero-film:after { content:''; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,#03040388,transparent 48%,#03040344); }
.hero-logo { position:absolute; z-index:2; top:12%; left:0; right:0; width:min(700px,84%); margin:0 auto; pointer-events:none; filter:drop-shadow(0 5px 0 #000a) drop-shadow(0 0 22px #f5e5a014); }
.hero-stack { display:grid; grid-template-columns:minmax(0,1fr) 260px; align-items:start; gap:28px; }
.hero-copy { display:flex; flex-direction:column; justify-content:center; min-height:180px; padding:25px 32px; }
.hero-copy h1 { font-size:clamp(24px,2.8vw,36px); line-height:1.5; font-weight:800; }
.hero-copy p { margin-top:12px; font-size:18px; line-height:1.9; font-weight:600; }
.commands { padding:18px; display:grid; align-content:center; }
.commands a { display:block; position:relative; padding:8px 10px 8px 27px; font-size:16px; font-weight:800; transition:background .15s; }
.commands a:before { content:'▶'; position:absolute; left:7px; top:12px; font-size:11px; opacity:0; }
.commands a:first-child:before,.commands a:hover:before,.commands a:focus-visible:before { opacity:1; }
.commands:has(a:hover) a:first-child:not(:hover):before,.commands:has(a:focus-visible) a:first-child:not(:focus-visible):before { opacity:0; }
.commands a:hover,.commands a:focus-visible { background:#d4dfb6; }
.hero-stores { scroll-margin-top:24px; }

/* Trailer command and dialog. */
.trailer-open { position:absolute; z-index:1; left:50%; top:55%; transform:translate(-50%,-50%); width:66px; height:66px; padding:14px; border:0; background:var(--rim); isolation:isolate; clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px); }
.trailer-open:before { content:''; position:absolute; inset:3px; z-index:-1; background:var(--window); clip-path:polygon(5px 0,calc(100% - 5px) 0,100% 5px,100% calc(100% - 5px),calc(100% - 5px) 100%,5px 100%,0 calc(100% - 5px),0 5px); }
.trailer-open:hover { filter:brightness(1.15); }
.trailer-open img { width:100%; height:100%; object-fit:contain; filter:brightness(0); opacity:.8; }
.trailer-modal { width:min(900px,calc(100vw - 32px),calc((100dvh - 100px) * 16 / 9)); max-width:none; max-height:none; margin:auto; border:0; padding:60px 0 0; background:transparent; color:#fff; overflow:visible; }
.trailer-modal::backdrop { background:#000c; }
.trailer-modal iframe { width:100%; aspect-ratio:16/9; display:block; border:0; }
.trailer-close { position:absolute; top:0; right:0; width:44px; height:48px; padding:0; background:transparent; color:#fff; border:0; font-family:Arial,sans-serif; font-size:40px; font-weight:bold; line-height:1; }
body:has(.trailer-modal[open]) { overflow:hidden; }

/* Overlapping story / system / VR compositions. */
.story,.system,.vr { isolation:isolate; position:relative; overflow:hidden; padding:90px var(--gutter); min-height:520px; --message-width:calc(86vw / 2.35); }
.scene-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:-2; pointer-events:none; opacity:.21; filter:blur(2px) saturate(.7); }
.story:after,.system:after,.vr:after { content:''; position:absolute; inset:0; z-index:-1; pointer-events:none; background:linear-gradient(90deg,#ffffff12,transparent 50%,#17231712); }
/* Footage uses the same chamfer and outer rim as the message windows. */
.media-frame {
 padding:5px; background:var(--rim);
 clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% var(--cut),100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,var(--cut) 100%,0 calc(100% - var(--cut)),0 var(--cut));
}
.media-frame video {
 width:100%; display:block;
 clip-path:polygon(8px 0,calc(100% - 8px) 0,100% 8px,100% calc(100% - 8px),calc(100% - 8px) 100%,8px 100%,0 calc(100% - 8px),0 8px);
}
.game-panel { padding:30px; filter:drop-shadow(0 13px 18px #25322344); }
.game-panel h2 { margin:0 0 16px; font-size:30px; letter-spacing:.12em; }
.story-copy p,.system-copy p,.vr-heading p { margin-bottom:9px; font-weight:500; }
.story { background:linear-gradient(180deg,#6d7164,#999e87 45%,#9da58a); color:#20291c; }
.story .scene-bg { opacity:.29; filter:blur(2px) brightness(.66) saturate(.6); }
.story-layout { display:grid; grid-template-columns:1.35fr 1fr; align-items:center; }
.story-film { margin-right:-55px; filter:drop-shadow(0 20px 24px #35372540); min-width:0; }
.story-film video { aspect-ratio:16/10; object-fit:cover; filter:brightness(.88) saturate(.82); }
.story-copy { z-index:2; }
.system { display:grid; grid-template-columns:.85fr 1.35fr; align-items:center; padding-block:105px; background:linear-gradient(180deg,#9da58a,#8f9f6a 45%,#a0b2a2); }
.system-copy { margin-right:-55px; z-index:3; align-self:center; }
.system-film { min-width:0; filter:drop-shadow(0 20px 24px #263b2444); }
.system-film video { object-fit:contain; background:#030403; filter:saturate(1.07); }
.vr { display:grid; grid-template-columns:1.3fr 1fr; align-items:center; padding-bottom:110px; background:linear-gradient(180deg,#a0b2a2,#bdd6dd 42%,#a4c6d5); }
.vr .scene-bg { opacity:.16; filter:blur(2px) saturate(.65); }
.vr-film { grid-column:1; grid-row:1; min-width:0; margin-right:-55px; }
.vr-film video { aspect-ratio:16/10; object-fit:cover; filter:brightness(1.06) saturate(.9) drop-shadow(0 20px 24px #25445144); }
.vr-heading { grid-column:2; grid-row:1; margin-left:-55px; z-index:3; }
/* Match only the message widths; preserve each footage grid and ratio. */
@media(min-width:601px) {
 .story-copy,.system-copy,.vr-heading { width:var(--message-width); }
 .story-copy,.vr-heading { justify-self:end; }
 .system-copy { justify-self:start; }
}

/* Store and product information. */
.stores { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.stores a { display:flex; justify-content:center; align-items:center; height:86px; padding:5px; }
.stores a:before { background:#fff; }
.stores img { max-width:70%; max-height:42px; object-fit:contain; }
/* The supplied Oculus Go image includes substantial transparent padding. */
.stores img[src*="oculus_go_logo_black-"] { width:100%; max-width:100%; max-height:none; }
.information { margin:30px var(--edge) 55px; }
.information .wrapper>.container { padding:36px; }
.information .title { font-size:27px; font-weight:700; border-bottom:2px solid #686e53; padding-bottom:20px; margin-bottom:20px; }
dl { margin:1em 0; }
.item { display:flex; border-bottom:1px solid #646c4933; font-size:13px; padding:16px 0; }
.item dt { width:25%; flex-shrink:0; font-weight:700; color:#3f4931; }
.item dd { width:75%; margin:0; overflow-wrap:anywhere; }
.item dd a { text-decoration:underline; text-underline-offset:4px; }
.item dd img { width:12px; }
.sns { display:flex; justify-content:center; gap:20px; margin:35px 0 22px; }
.sns a { width:32px; height:32px; display:flex; align-items:center; justify-content:center; }
.sns img { width:27px; height:27px; object-fit:contain; display:block; }
.sns .twitter img { width:20px; height:20px; }
.language { text-align:center; font-size:12px; }
.language span { margin:0 14px; }
.footer { border-top:1px solid #e8e9cf24; text-align:center; padding:24px; }
.footer p { color:#bec4ad; font-size:10px; }

/* Motion is progressive enhancement; content remains visible without JS. */
@media(prefers-reduced-motion:no-preference) {
 .motion-enabled .hero-logo,.motion-enabled .hero-copy,.motion-enabled .hero .commands { animation:arrive .8s both; }
 .motion-enabled .hero-copy { animation-delay:.3s; }
 .motion-enabled .hero .commands { animation-delay:.6s; }
 .motion-enabled .reveal-panel { opacity:0; transform:translateY(20px); transition:opacity .8s ease var(--reveal-delay,0ms),transform .8s cubic-bezier(.22,1,.36,1) var(--reveal-delay,0ms); }
 .motion-enabled .reveal-panel.is-visible,.motion-enabled .reveal-panel:focus-within { opacity:1; transform:none; }
 .motion-enabled .story-film.reveal-panel,.motion-enabled .system-film.reveal-panel,.motion-enabled .vr-film.reveal-panel { transform:none; transition:opacity .8s ease var(--reveal-delay,0ms); }
 @keyframes arrive { from { opacity:0; transform:translateY(9px); } to { opacity:1; transform:none; } }
}
@media(prefers-reduced-motion:reduce) {
 html { scroll-behavior:auto; }
 *,*:before,*:after { animation:none!important; transition:none!important; }
 .reveal-panel { opacity:1!important; transform:none!important; }
}

/* Tablet */
@media(min-width:601px) and (max-width:1049px) {
 :root { --gutter:5%; }
 .story,.system,.vr { padding-block:60px; min-height:0; --message-width:calc(90vw / 2.35); }
 .story-film,.system-copy { margin-right:-25px; }
 .vr-film { margin-right:-35px; }
 .vr-heading { margin-left:-25px; }
 .game-panel { padding:24px; }
 .game-panel h2 { font-size:25px; }
 .hero-copy p { font-size:14px; }
 .story-copy p,.system-copy p,.vr-heading p { font-size:12px; }
 .story-film video { aspect-ratio:1.3; }
 .vr-film video { aspect-ratio:1.2; }
 .stores { gap:12px; }
 .stores a { height:72px; }
 .information { margin-block:25px 40px; }
 .information .wrapper>.container { padding:27px; }
 .item { font-size:12px; }
}
@media(max-width:700px) {
 header { height:72px; }
 header img { width:175px; }
 header nav { gap:12px; font-size:11px; }
 header nav>a:not(.nav-product) { display:none; }
 .nav-product { padding:8px 12px; }
 .hero { padding:110px 0 24px; gap:24px; }
 .hero-stack { display:flex; flex-direction:column; align-items:stretch; gap:20px; }
 .hero-copy { padding:24px; }
 .hero-copy h1 { font-size:25px; }
 .hero-copy p { font-size:14px; }
 .trailer-open { width:52px; height:52px; padding:10px; }
}
/* Smartphone */
@media(max-width:600px) {
 :root { --gutter:6%; }
 .story,.system,.vr { padding-block:42px; min-height:0; }
 .story-layout { display:flex; flex-direction:column; gap:20px; }
 .story-film { margin:0; }
 .system,.vr { display:flex; flex-direction:column-reverse; gap:20px; }
 .system-film { width:100%; }
 .vr-film { width:100%; margin:0; }
 .story-copy,.system-copy,.vr-heading { margin:0; align-self:stretch; width:100%; }
 .game-panel { padding:23px; }
 .game-panel h2 { font-size:26px; }
 .story-copy p,.system-copy p,.vr-heading p { font-size:12px; }
 .stores { grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
 .stores a { height:70px; }
 .information { margin-block:20px 35px; }
 .information .wrapper>.container { padding:22px; }
 .item { font-size:11px; }
 .item dt { width:28%; }
 .item dd { width:72%; }
}
@media(max-width:380px) {
 header { gap:12px; }
 header img { width:44vw; }
}
/* Wide screens: keep content at 1200px inside the 1400px page. */
@media(min-width:1400px) {
 :root { --gutter:calc((100% - 1200px) / 2); }
 .story,.system,.vr { --message-width:calc(1200px / 2.35); }
}