/*
  Josh's Custom CSS Reset
  https://www.joshwcomeau.com/css/custom-css-reset/
*/
body {line-height:1.5;}
* {margin:0; /*line-height:calc(1em + 0.5rem);*/}
*, *::before, *::after {box-sizing:border-box;}
img, picture, video, canvas, svg {display:block; max-width:100%;}
input, button, textarea, select {font:inherit;}
h1, h2, h3, h4, h5, h6, p {overflow-wrap:break-word;}
h1, h2, h3, h4, h5, h6 {text-wrap:balance;}
p {text-wrap:pretty;}
#root, #__next {isolation:isolate;}
@media (prefers-reduced-motion: no-preference) { html {interpolate-size:allow-keywords;} }

/**/

:root {
--s-1em-px: round(up,1em,1px);
--s-01vw-px: round(up,.1vw,1px);
--s-02vw-px: round(up,.2vw,1px);
--s-025vw-px: round(up,.25vw,1px);
--s-03vw-px: round(up,.3vw,1px);
--s-04vw-px: round(up,.4vw,1px);
--s-05vw-px: round(up,.5vw,1px);
--s-0625vw-px: round(up,.625vw,1px);
--s-2-3rds: round(calc(200vw/3),2px);

--s-fluid-0125rem: round(max(5vw/48,5vw/96 + .0625rem),.05px);
--s-fluid-025rem: round(max(5vw/24,5vw/48 + .125rem),.05px);
--s-fluid-0375rem: round(max(5vw/16,5vw/32 + .1875rem),.05px);
--s-fluid-05rem: round(max(5vw/12,5vw/24 + .25rem),.05px);
--s-fluid-0625rem: round(max(25vw/48,25vw/96 + .3125rem),.05px);
--s-fluid-075rem: round(max(5vw/8,5vw/16 + .375rem),.05px);
--s-fluid-0875rem: round(max(35vw/48,35vw/96 + .4375rem),.05px);
--s-fluid-1rem: round(max(5vw/6,5vw/12 + .5rem),.05px);
--s-fluid-1125rem: round(max(15vw/16,15vw/32 + .5625rem),.05px);
--s-fluid-125rem: round(max(25vw/24,25vw/48 + .625rem),.05px);
--s-fluid-1375rem: round(max(55vw/48,55vw/96 + .6875rem),.05px);
--s-fluid-15rem: round(max(5vw/4,5vw/8 + .75rem),.05px);
--s-fluid-175rem: round(max(35vw/24,35vw/48 + .875rem),.05px);
--s-fluid-2rem: round(max(5vw/3,5vw/6 + 1rem),.05px);
--s-fluid-225rem: round(max(15vw/8,15vw/16 + 1.125rem),.05px);
--s-fluid-25rem: round(max(25vw/12,25vw/24 + 1.25rem),.05px);
--s-fluid-3rem: round(max(5vw/2,5vw/4 + 1.5rem),.05px);
--s-fluid-325rem: round(max(65vw/24,65vw/48 + 1.625rem),.05px);
--s-fluid-35rem: round(max(35vw/12,35vw/24 + 1.75rem),.05px);
--s-fluid-375rem: round(max(25vw/8,25vw/16 + 1.875rem),.05px);
--s-fluid-4rem: round(max(10vw/3,5vw/3 + 2rem),.05px);
--s-fluid-24rem: round(max(20vw,10vw + 12rem),.05px);

--c-text:#CCC;
--c-subheading:#EEE;
--c-main-heading:#FFF;
--c-bg-green:#004A1F;
--c-highlight1:#F70;
--c-highlight2:#FF1800;
}

/**/

#menu {display:block; position:fixed; top:2vw; right:2vw; z-index:3; padding:0; font-size:var(--s-fluid-175rem); text-align:right; transition:all 0.2s ease-out;}
#menu * {cursor:pointer; line-height:1.5;}
#menu label {display:block; padding:var(--s-fluid-1rem); font-size:0; line-height:0;}
#menu .menu-content {pointer-events:none; display:block; opacity:0; width:auto; height:auto; font-size:0; transition:all 0.2s ease;}
#menu #menu-status:checked ~ .menu-content {pointer-events:auto; opacity:1; margin-top:-0.35em; padding-bottom:0.5em; font-size:inherit;}
#menu a {display:block; margin:0; padding:0 var(--s-fluid-1rem); transition:all 0.2s ease-out; text-transform:uppercase; text-decoration:none;}
#menu a span {font-size:0.6em; margin-right:0.5em;}
#menu #menu-status {display:none!important;}
#menu .menu-toggle {position:relative; cursor:pointer; margin-left:auto; min-width:20px; width:round(1.5vw,10px); height:auto; aspect-ratio:1;}
#menu .menu-toggle span {pointer-events:none; position:absolute; left:0; width:100%; height:10%; background-color:#FFF; border-radius:5% / 50%;}
#menu .menu-toggle span:nth-of-type(1) {top:10%; transition:top 100ms ease-out 150ms, transform 100ms ease-out 50ms;}
#menu .menu-toggle span:nth-of-type(2) {top:45%; transition:background-color 50ms ease-out 100ms;}
#menu .menu-toggle span:nth-of-type(3) {top:80%; transition:top 100ms ease-out 150ms, transform 100ms ease-out 50ms;}
#menu #menu-status:checked ~ label .menu-toggle span:nth-of-type(1),
#menu #menu-status:checked ~ label .menu-toggle span:nth-of-type(3) {top:45%; transition:top 100ms ease-out 50ms, transform 100ms ease-out 150ms;}
#menu #menu-status:checked ~ label .menu-toggle span:nth-of-type(1) {transform:rotate(45deg) scale(1.28);}
#menu #menu-status:checked ~ label .menu-toggle span:nth-of-type(2) {background:transparent;}
#menu #menu-status:checked ~ label .menu-toggle span:nth-of-type(3) {transform:rotate(-45deg) scale(1.28);}
#menu::selection, #menu *::selection, #menu #menu-content a::selection {background:transparent!important;}

#menu {background:#F70C; border-radius:var(--s-fluid-025rem);}
#menu:hover {background:#F70F;}
#menu a {color:#FFF; font-weight:800; -webkit-text-stroke:var(--s-fluid-0375rem) #000; paint-order:stroke fill;}
#menu a:hover {color:#FFF; background:var(--c-highlight2); /*box-shadow:0 0 1rem 0 #FFF;*/}


#page-top {display:block; position:fixed; z-index:2; bottom:2vw; right:2vw;}
#page-top button {display:block; position:relative; box-sizing:content-box; min-width:20px; width:round(1.5vw,10px); height:auto; aspect-ratio:1; padding:var(--s-fluid-1rem); border:0; border-radius:var(--s-fluid-0375rem); background:#F70C; transition:background-color 0.4s ease; cursor:pointer;}
#page-top button:hover {background:var(--c-highlight2);}
#page-top button img {width:100%; height:auto; margin:auto;}


.modal {display:none; position:fixed; z-index:1000; inset:0; background-color:#101C; backdrop-filter:blur(5px);}
.modal.show {display:flex; align-items:center; justify-content:center; animation:modalFadeIn 0.3s ease; overflow-y:auto; padding:40px 20px;}
.modal-content {position:relative; max-width:min(90vw, 100vw - 40px); width:auto; animation:modalZoomIn 0.3s ease; margin:auto; display:inline-block;}
.modal-content img {display:block; border-radius:10px; box-shadow:0 0 50px #FBC; width:100%; height:auto; max-width:min(90vw, 100vw - 40px); max-height:90vh;}
.modal .close {display:flex; align-items:center; justify-content:center; position:absolute; top:-15px; right:-15px; color:#FFF; font-family:Arial,Helvetica,sans-serif; font-size:45px; line-height:1; font-weight:bold; cursor:pointer; transition:background-color 0.3s ease; background:#F37; width:49px; height:auto; aspect-ratio:1; border-radius:50%; backdrop-filter:blur(10px); z-index:1001; opacity:1; pointer-events:auto;}

@keyframes modalFadeIn { from { opacity:0; } to { opacity:1; } }
@keyframes modalFadeOut { from { opacity:1; } to { opacity:0; } }
@keyframes modalZoomIn { from { opacity:0; transform:scale(0.7); } to { opacity:1; transform:scale(1); } }
@keyframes modalZoomOut { from { opacity:1; transform:scale(1); } to { opacity:0; transform:scale(0.7); } }

/**/

body {font-family:"M PLUS 2","BIZ UDPGothic",sans-serif; font-size:var(--s-fluid-125rem); line-height:1.5; color:#CCC; background-color:var(--c-bg-green); background-image:url("../img/bg-tile.png"); background-position:0 56.25vw; background-size:calc(40vw / 3); overflow-x:hidden;}
/*body {background-image:url("../img/bg-tile.png"), url("../img/bg-tile.png"), linear-gradient(#0000 56.25vw,#000A); background-position:left top, right top, center; background-repeat:repeat-y; background-size:calc(40% / 3), calc(40% / 3), calc(220% / 3);}*/

h2 {color:var(--c-mainheading); font-family:Graduate,"BIZ UDPGothic",sans-serif; font-size:var(--s-fluid-35rem); line-height:var(--s-1em-px); font-weight:700; -webkit-text-stroke:var(--s-fluid-0375rem) #000; paint-order:stroke fill; text-align:right; margin-bottom:var(--s-fluid-075rem);}
h3 {color:var(--c-subheading); font-size:var(--s-fluid-225rem); line-height:var(--s-1em-px); font-weight:800; -webkit-text-stroke:var(--s-fluid-025rem) #000; paint-order:stroke fill; margin-bottom:var(--s-fluid-1rem);}
h4 {color:var(--c-subheading); font-size:var(--s-fluid-175rem); line-height:var(--s-1em-px); font-weight:700; margin-bottom:var(--s-fluid-05rem);}
a {color:var(--c-highlight1); font-weight:700; text-decoration:underline;}
a:hover {color:var(--c-highlight2); text-decoration:none;}

section {display:block; position:relative; width:100%; /*padding:var(--s-fluid-3rem) 0*/;}
.container {display:block; position:relative; width:1280px; min-width:var(--s-2-3rds); max-width:calc(100% - 10vw/3 - 2rem); margin:auto; padding:var(--s-fluid-3rem) var(--s-fluid-4rem); box-sizing:content-box; background:var(--c-bg-green);}
.section-character {position:absolute; z-index:1; left:0; bottom:var(--s-fluid-075rem); width:var(--s-fluid-24rem); height:auto; transform:translateX(-10vw); pointer-events:none;}
.content {display:block; width:100%; min-height:20vw; padding:var(--s-fluid-3rem); padding-left:round(7.5vw,1px); background:linear-gradient(45deg,#000A,#0006); border-radius:var(--s-fluid-1rem);}
.inner {padding:var(--s-fluid-15rem); border-radius:var(--s-fluid-1rem); background:var(--c-bg-green);}
.inner:not(:last-of-type) {margin-bottom:var(--s-fluid-3rem);}

.cta-holder {width:100%; display:flex; flex-direction:column; justify-content:space-between; align-items:center; gap:var(--s-fluid-075rem);}
.cta-holder .cta-button {width:100%;}
.cta-button {display:block; position:relative; margin:4px; padding:var(--s-fluid-0625rem) var(--s-fluid-2rem); outline:2px solid #CCC; border:1px solid #000; border-radius:1.5em; font-size:var(--s-fluid-15rem); line-height:1; font-weight:700; text-align:center; text-decoration:none; color:#FFF; background:#F70; cursor:pointer; -webkit-text-stroke:4px #000; paint-order:stroke fill; transition:background-color 0.075s ease-out;}
.cta-button:hover {background:var(--c-highlight2); color:#FFF; outline:2px solid #FFF;}
.cta-button.disabled {background:linear-gradient(180deg,#999,#BBB); color:#666; border-color:#666; -webkit-text-stroke:0; outline:2px solid #AAA; cursor:default;}

.key-visual {display:block; position:relative; /*margin-bottom:2vw;*/ z-index:1;}
.key-visual .key-visual-image {display:block; width:100%; height:auto;}
.key-visual .trailer {position:absolute; left:12.5vw; top:2vw; width:25vw; height:auto; aspect-ratio:16/9; background:#000; outline:1px solid #FFF;}
.key-visual .trailer iframe {display:block; width:100%; height:auto; aspect-ratio:16/9;}
.key-visual .release-date {position:absolute; display:flex; flex-direction:column; flex-wrap:nowrap; gap:var(--s-fluid-1rem);; left:12vw; top:42vw; width:26vw;}
.key-visual .release-date .subheading {font-family:"M PLUS 2","BIZ UDPGothic",sans-serif; font-size:var(--s-fluid-25rem); color:#FFF; -webkit-text-stroke:var(--s-fluid-0375rem) #000; paint-order:stroke fill; text-align:center; margin:auto;}
.key-visual .release-date .cta-holder {width:20em; margin:auto;}

/*.key-visual .release-date .cta-button {width:20vw; margin:auto;}*/

dl > * {display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:center; align-items:stretch; width:100%; text-decoration:none; transition:background-color 0.1s ease-out;}
dl > *:nth-of-type(2n-1) {background:#DDD; color:var(--c-bg-green);}
dl > *:nth-of-type(2n) {background:var(--c-bg-green); color:#EEE;}
dt, dd {font-size:var(--s-fluid-125rem); line-height:var(--s-1em-px); padding:var(--s-fluid-1125rem) var(--s-fluid-125rem);}

#news dl dt {flex:1 0 8em;}
#news dl dd {flex:1 1 100%;}
#news dl > *:hover {background:#F70; color:#000;}

#about p {margin-bottom:var(--s-1em-px);}
#about .screenshots {display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; gap:var(--s-fluid-1rem); width:100%; margin:auto;}
#about .screenshots a {flex:1 0 26%; border:var(--s-fluid-0125rem) solid #FFF; transition:border 0.2s ease-out; border-radius:var(--s-fluid-05rem); overflow:hidden;}
#about .screenshots a:hover {border:0px solid #F70; outline:1px solid #F70;}

#music .musician {display:flex; flex-direction:row; align-items:center; gap:var(--s-fluid-2rem); width:100%; margin:var(--s-fluid-1rem) auto; padding:var(--s-fluid-2rem); border-radius:var(--s-fluid-1rem); background:var(--c-bg-green);}
#music .musician img {image-rendering:crisp-edges; flex:0 1 round(up,10vw,64px); transition:flex 0.2s ease-out; border-radius:var(--s-fluid-05rem);}
#music .musician text {flex:0 1 50%;}

#spec dl dt {flex:1 0 12em;}
#spec dl dd {flex:1 1 100%; font-weight:bold;}

#buy .inner {background:transparent; padding:0;}
#buy .packages {display:flex; flex-direction:row; flex-wrap:nowrap; justify-content:space-between; align-items:stretch; gap:var(--s-fluid-1rem); width:100%;}
#buy .packages>div {display:flex; flex-direction:column; flex-wrap:nowrap; justify-content:flex-start; align-items:center; gap:var(--s-fluid-075rem); padding:var(--s-fluid-125rem); border-radius:var(--s-fluid-1rem); background:var(--c-bg-green);}
#buy .packages .package {flex:1 0 34%;}
#buy .packages .preorder {flex:1 0 34%;}
#buy .packages img {width:352px;}

#buy .downloads {display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; align-items:stretch; gap:var(--s-fluid-1rem); width:100%; background:var(--c-bg-green); padding:var(--s-fluid-125rem); border-radius:var(--s-fluid-1rem);}
#buy .downloads a {flex:1 1 21%; display:flex; flex-direction:column; flex-wrap:nowrap; justify-content:center; align-items:center; gap:var(--s-fluid-05rem); padding:var(--s-fluid-1rem) var(--s-fluid-05rem); border-radius:var(--s-fluid-1rem); font-size:var(--s-fluid-125rem); line-height:1.2;}
#buy .downloads a div {flex:1 0 auto; display:flex; justify-content:center; align-items:center; height:var(--s-fluid-4rem);}
#buy .downloads a img {display:block; width:auto; /*max-width:10vw;*/ height:100%; margin:auto;}

#buy .stores {display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-between; align-items:stretch; gap:var(--s-fluid-1rem); width:100%;}
#buy .stores .store {flex:1 1 26%; display:flex; flex-direction:column; flex-wrap:nowrap; justify-content:space-between; align-items:stretch; gap:var(--s-fluid-075rem); padding:var(--s-fluid-125rem); border-radius:var(--s-fluid-1rem); background:var(--c-bg-green);}
#buy .stores .store h4,
#buy .stores .store .item {text-align:center;}
#buy .stores .store span {display:block; color:var(--c-subheading); font-weight:600;}
#buy .stores .store .item-note {color:inherit; font-size:0.75em; line-height:1.2; font-weight:400;}

footer {background-color:#001D0E;}
footer .container {background:transparent;}
footer .footer-logo-list {display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; gap:round(6vw,1px); margin-bottom:var(--s-fluid-2rem);}
footer .footer-logo-list img {display:block; width:auto; height:var(--s-fluid-4rem); opacity:1; transition:opacity 0.15s ease-out;}
footer .footer-logo-list img:hover {opacity:0.6;}
footer .copyright {text-align:center; margin:var(--s-fluid-1rem) auto;}
footer .twitter-share-button {display:block; margin:var(--s-fluid-1rem) auto;}

@media (max-width:1280px) {
.key-visual {padding-bottom:calc(6vw + 12em + 360px + 3vw);}
.key-visual .release-date {top:58.25vw; left:50%; transform:translateX(-50%); width:90%; max-width:50em; background:var(--c-bg-green); padding:var(--s-fluid-1rem);}
.key-visual .trailer {top:calc(60.25vw + 12em); left:50%; transform:translateX(-50%); width:90%; max-width:640px;}
.container {padding:var(--s-fluid-15rem);}
.content {padding:var(--s-fluid-15rem);}
.section-character {z-index:0; left:-25%;}
#buy .stores .store {flex:1 1 34%; max-width:50%;}
}

@media (max-width:640px) {
#about .screenshots,
#buy .packages,
#buy .downloads,
#buy .stores {flex-direction:column; gap:var(--s-fluid-3rem);}
#buy .stores .store {flex:1 1 100%; max-width:none;}
}