:root {
  font-family:"SQ WenKai";
  font-synthesis:none;
  color:#fff0ce;
  background:#102c27;
  line-height:1.5;
}
* { box-sizing:border-box; }
body { margin:0; min-height:100dvh; display:flex; flex-direction:column; }
button,input,a { -webkit-tap-highlight-color:transparent; outline:none; }
button,input { font-family:inherit; font-synthesis:none; }
button { cursor:pointer; }
a { color:inherit; text-decoration:none; }
[hidden] { display:none!important; }
button,a { transition:filter .16s,transform .16s; }
button:focus-visible,a:focus-visible { filter:brightness(1.25) drop-shadow(0 0 5px #ffdf88); }
.landscape {
  position:fixed; inset:0; pointer-events:none; z-index:-2;
  background:#23473a url('/art/valley-keyart-v1.png') center/cover no-repeat;
}
.landscape:after {
  content:""; position:absolute; inset:0;
  background:linear-gradient(#102c2733,transparent 20%,transparent 64%,#09251ec9),linear-gradient(90deg,transparent 58%,#0a211a5c);
}
body:has(#releases-view:not([hidden])) .landscape:after { background:linear-gradient(#082a22b0,#0a241deb); }
header { position:relative; z-index:3; display:flex; align-items:center; justify-content:space-between; min-height:108px; padding:22px 4.5vw; }
.brand { display:block; width:64px; height:64px; }
.brand img { display:block; width:100%; height:100%; border-radius:16px; box-shadow:0 3px 16px #09251e66; }
main { flex:1; width:100%; }
.intro { position:relative; min-height:max(570px,calc(100dvh - 152px)); }
.intro-copy { position:absolute; width:min(520px,32vw); left:43%; top:12%; transform:translateX(-50%); }
.intro-copy h1 { margin:0; }
.game-wordmark { display:block; width:100%; height:auto; filter:drop-shadow(0 5px 8px #153b2a99); }
.game-frame,.release-card {
  border:1px solid transparent;
  border-image:url('/art/ui/panel-v1.png') 280 270 fill / 64px / 0 stretch;
  background:none; box-shadow:none; position:relative;
}
.login-card { position:absolute; right:5.5vw; top:48%; transform:translateY(-50%); width:430px; padding:46px 46px 42px; text-align:center; }
.login-card h2 { color:#fff2d5; font-size:32px; font-weight:700; letter-spacing:5px; margin:0; line-height:1.4; }
form { position:relative; z-index:1; margin-top:28px; text-align:left; }
label { display:block; font-size:18px; font-weight:700; letter-spacing:2px; color:#fff0cd; margin:20px 0 8px; }
label:first-child { margin-top:0; }
.field-shell { height:62px; padding:7px 22px; background:url('/art/ui/input-v1.png') center/105% 160% no-repeat; transition:filter .15s; }
.field-shell:focus-within { filter:brightness(1.09) drop-shadow(0 0 4px #f1d39e70); }
input {
  appearance:none; -webkit-appearance:none; width:100%; height:48px;
  border:0; border-radius:0; outline:none; background:transparent; box-shadow:none;
  padding:0; color:#1d3528; font-size:19px; font-weight:700; line-height:48px; caret-color:#1d3528;
}
input::placeholder { color:#515f4c; font-family:inherit; font-size:18px; font-weight:500; opacity:1; }
input:-webkit-autofill { -webkit-background-clip:text; -webkit-text-fill-color:#1d3528; transition:background-color 99999s; }
.error { color:#ffe0ce; font-size:16px; min-height:28px; margin:12px 0; line-height:1.7; }
.error:empty { visibility:hidden; }
.primary,.download-row a {
  appearance:none; -webkit-appearance:none; display:flex; align-items:center; justify-content:center;
  border:0; border-radius:0; background:url('/art/ui/primary-v1.png') center/107% 184% no-repeat;
  box-shadow:none; color:#3b2916; font-weight:700; letter-spacing:3px;
}
.primary { width:100%; height:68px; padding:0 25px; font-size:24px; }
.primary:hover,.download-row a:hover { filter:brightness(1.12); transform:translateY(-1px); }
.primary:active,.download-row a:active { filter:brightness(.92); transform:translateY(1px); }
.primary:disabled { filter:grayscale(.7) brightness(.75); cursor:wait; transform:none; }
.quiet { appearance:none; -webkit-appearance:none; background:url('/art/ui/secondary-v1.png') center/104% 152% no-repeat; border:0; border-radius:0; color:#fff0ce; padding:10px 27px; font-size:17px; letter-spacing:1px; min-width:128px; min-height:48px; }
.quiet:hover { filter:brightness(1.2); }
#releases-view { width:min(1080px,calc(100% - 64px)); margin:0 auto 40px; }
.page-title { padding:24px 0; }
.page-title h1 { font-size:36px; font-weight:700; letter-spacing:3px; margin:0; color:#fff0ce; }
.empty-card { padding:90px 40px; text-align:center; }
.empty-card h2 { font-size:25px; font-weight:700; color:#fff0ce; letter-spacing:2px; margin:0; }
.release-card { padding:36px 42px; margin-bottom:22px; }
.release-top { display:flex; justify-content:space-between; gap:16px; align-items:center; }
.release-top h2 { margin:5px 0; font-size:28px; font-weight:700; color:#fff0ce; }
.card-kicker,.release-meta { font-size:15px; color:#e6d3a7; }
.release-card ul { list-style:none; padding-left:0; font-size:17px; line-height:2; color:#e4ebd9; }
.release-card li { padding-left:24px; background:url('/art/ui/medallion-v1.png') left 7px/17px 19px no-repeat; }
.compatibility { font-size:16px; color:#e2d4b3; }
.download-row { display:flex; gap:20px; align-items:center; padding-top:20px; margin-top:14px; background:url('/art/ui/divider-v1.png') center top/240px 25px no-repeat; }
.download-row a { font-size:18px; white-space:nowrap; min-height:58px; padding:0 33px; min-width:218px; }
.package-info { font-size:14px; color:#d2dfc7; overflow-wrap:anywhere; min-width:0; }
footer { padding:13px 4.5vw; font-size:12px; color:#d0dbbf; position:relative; z-index:1; }
@media(min-width:1700px) {
  .login-card { right:8vw; width:450px; padding:48px 50px 44px; }
  .intro-copy { top:13%; left:44%; width:560px; }
}
@media(max-width:1100px) and (min-width:801px) {
  .login-card { width:370px; right:3vw; padding:40px 35px 36px; }
  .intro-copy { left:34%; top:13%; width:350px; }
  .intro { min-height:570px; }
}
@media(max-width:800px) {
  header { min-height:94px; padding:18px 20px; }
  .brand { width:58px; height:58px; }
  .brand img { border-radius:14px; }
  .quiet { min-width:122px; padding:10px 24px; font-size:16px; }
  .landscape { background-image:url('/art/valley-mobile-v1.png'); background-position:center top; background-size:auto 100dvh; }
  .landscape:after { background:linear-gradient(#122f2722,transparent 28%,#102c2744 53%,#0c2b22fa); }
  .intro { min-height:0; display:flex; align-items:center; flex-direction:column; padding:0 16px 24px; }
  .intro-copy { position:relative; left:auto; top:auto; transform:none; width:min(360px,100%); margin:0 0 clamp(110px,18vh,180px); }
  .game-wordmark { width:100%; height:auto; }
  .login-card { position:relative; right:auto; top:auto; transform:none; width:min(395px,100%); padding:34px 32px 32px; }
  .login-card h2 { font-size:29px; }
  form { margin-top:24px; }
  .field-shell { padding-inline:20px; }
  .primary { font-size:23px; }
  #releases-view { width:calc(100% - 30px); }
  .page-title { padding:20px 0; }
  .page-title h1 { font-size:30px; }
  .empty-card { padding:75px 25px; }
  .empty-card h2 { font-size:23px; letter-spacing:1px; }
  .release-card { padding:30px; }
  .release-top { align-items:flex-start; }
  .release-meta { font-size:14px; }
  .download-row { flex-direction:column; align-items:stretch; gap:12px; }
  .download-row a { text-align:center; }
  footer { padding:14px 20px; font-size:12px; }
}
@media(prefers-reduced-motion:reduce) { button,a,.field-shell { transition:none; } }