/* Global CSS variables and base theme */
@font-face {
  font-family: "Rodchenko Bold";
  src: url("./assets/fonts/Rodchenko-Bold.ttf") format("truetype");
  font-weight: bold;
  font-display: block;
}

:root{--bg:#f8f8f8;--text:#0a0f1c;--muted:#5b6476;--ring:rgba(17,24,39,.08)}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:"Plus Jakarta Sans",system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,Noto Sans,sans-serif;overflow:auto;padding-top:72px}
.scroll-lock{overflow:hidden !important}
.preloader{position:fixed;inset:0;background:#ffffff;display:flex;align-items:center;justify-content:center;z-index:9999;transition:opacity .3s ease;transform:translateZ(0);backface-visibility:hidden;will-change:opacity;contain:paint;isolation:isolate}
.preloader.hidden{opacity:0;visibility:hidden}
.spinner{position:relative;width:48px;height:48px;display:flex;align-items:center;justify-content:center}
.spinner::before{content:"";position:absolute;inset:0;border-radius:999px;border:3px solid #e5e7eb;border-top-color:#07738e;animation:spin .8s linear infinite}
.spinner-icon{width:30px;height:20px;display:block}
@keyframes spin{to{transform:rotate(360deg)}}
.container{width:min(1100px,92vw);margin-inline:auto}
img{max-width:100%;height:auto;display:block}
/* Sticky site header with translucent background and blur */
.site-header{position:fixed;top:0;left:0;right:0;height:72px;display:flex;align-items:center;background:rgba(255,255,255,.75);backdrop-filter:saturate(140%) blur(6px);-webkit-backdrop-filter:saturate(140%) blur(6px);border-bottom:1px solid var(--ring);z-index:100;transform:translateZ(0);backface-visibility:hidden;will-change:transform}
html.is-loading .site-header{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.95)}
.header-inner{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:72px}
.brand{position:absolute;left:12px;top:50%;transform:translateY(-50%);white-space:nowrap}
.brand a{display:block;text-decoration:none}
.header-logo{height:clamp(32px,4.5vw,48px);width:auto;display:block;transition:transform .2s ease}
.header-logo:hover{transform:scale(1.05)}
.header-nav{display:flex;gap:16px;align-items:center}
/* Reusable pill-style header buttons */
.header-link{text-decoration:none;color:#111827;font-weight:700;border:1px solid #e5e7eb;border-radius:999px;padding:10px 16px;background:#ffffff;transition:transform .18s ease,background-color .18s ease,color .18s ease,border-color .18s ease,box-shadow .18s ease;display:inline-flex;align-items:center;gap:8px;position:relative}
.header-link:hover{transform:translateY(-2px);background:#f8fafc}
.header-link img{transition:filter .18s ease}
.header-link--steam{background:#16a34a;border-color:#16a34a;color:#ffffff;box-shadow:0 6px 22px rgba(22,163,74,.35)}
.header-link--presskit:hover{background:#00adee;border-color:#00adee;color:#ffffff;box-shadow:0 6px 22px rgba(0,173,238,.35)}
.header-link--steam:hover{background:#16a34a;border-color:#16a34a;color:#ffffff;box-shadow:0 6px 22px rgba(22,163,74,.35)}
.header-link--discord:hover{background:#5865F2;border-color:#5865F2;color:#ffffff;box-shadow:0 6px 22px rgba(88,101,242,.35)}
.header-link--steam:hover img,.header-link--discord:hover img{filter:brightness(0) invert(1)}
.header-link img,.header-link svg{width:16px;height:16px;display:block}

/* Non-interactive Press Kit with badge */
.header-link--presskit.is-disabled{cursor:not-allowed}
.header-link--presskit.is-disabled::after{content:unset}
.presskit-badge{position:absolute;top:calc(100% + 2px);left:50%;transform:translateX(-50%) scale(0.72);transform-origin:center;font-size:clamp(10px,1.8vw,14px);line-height:1;color:var(--muted);white-space:nowrap;pointer-events:none}
.badge-emoji{display:inline-block;will-change:transform;animation:sandRotate180 4s steps(1,end) infinite}
.badge-text{display:inline-block;margin-left:4px;background:linear-gradient(90deg,#ff6b6b 0%,#f59e0b 20%,#34d399 40%,#60a5fa 60%,#a78bfa 80%,#ff6b6b 100%);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:titleWave 6s ease-in-out infinite alternate,titleHue 12s linear infinite}
main{position:relative}
/* Background glow accents behind hero */
main::before{content:"";position:absolute;inset:-20% -10% auto -10%;height:60vh;background:radial-gradient(40% 35% at 15% 10%,rgba(88,101,242,.14),transparent 60%);filter:blur(40px);z-index:-1;will-change:opacity,transform;opacity:1;transition:opacity .25s ease}
main::after{content:"";position:absolute;inset:auto -10% -20% -10%;height:60vh;background:radial-gradient(40% 35% at 85% 90%,rgba(0,181,173,.12),transparent 60%);filter:blur(40px);z-index:-1;will-change:opacity,transform;opacity:1;transition:opacity .25s ease}
html.is-loading main::before,html.is-loading main::after{opacity:0}
/* Hero section container */
.hero{position:relative;padding:clamp(16px,2vw,28px) 0;--grid-center-y:65%;contain:paint}
.hero::before{content:"";position:absolute;inset:0;opacity:.4;pointer-events:none;z-index:0;background-image:repeating-linear-gradient(0deg,rgba(96,165,250,1) 0 1px,rgba(96,165,250,0) 1px 24px),repeating-linear-gradient(90deg,rgba(96,165,250,1) 0 1px,rgba(96,165,250,0) 1px 24px);background-size:cover;mask-image:radial-gradient(closest-side at 50% var(--grid-center-y),rgba(0,0,0,1) 35%,rgba(0,0,0,.35) 65%,rgba(0,0,0,0) 88%);-webkit-mask-image:radial-gradient(closest-side at 50% var(--grid-center-y),rgba(0,0,0,1) 35%,rgba(0,0,0,.35) 65%,rgba(0,0,0,0) 88%)}
/* Centered hero content */
.hero-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px}
/* Brand logo and name container */
.hero-brand{display:flex;align-items:center;gap:10px;margin-bottom:8px;opacity:1;transform:none;transition:opacity 0.8s ease, transform 0.8s ease}
html.is-loading .hero-brand{opacity:0;transform:translateY(30px)}
.hero-brand.animate{opacity:1;transform:translateY(0)}
/* Brand logo in hero */
.hero-logo{height:clamp(120px,20vw,205px);width:auto;max-width:80%;display:block}
/* Brand name styling - multi-line */
.hero-brand-name{font-size:clamp(45px,8vw,75px);font-weight:800;font-family:"Rodchenko Bold",sans-serif;color:var(--text);margin:0;line-height:1;text-align:left;display:flex;flex-direction:column;text-transform:uppercase;background:linear-gradient(90deg,#61c8d4,#27a1bf,#61c8d4);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:brandGradientMove 3s ease-in-out infinite alternate}
.hero-brand-name span{margin-top:-10px}
.hero-brand-name span:first-child{margin-top:0}
/* Animated gradient page title */
.hero-title{font-size:clamp(28px,4.8vw,56px);line-height:1.06;margin:0;font-weight:800;background:linear-gradient(90deg,#ff6b6b 0%,#f59e0b 20%,#34d399 40%,#60a5fa 60%,#a78bfa 80%,#ff6b6b 100%);background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;filter:hue-rotate(var(--title-hue));animation:titleWave 6s ease-in-out infinite alternate,titleHue 12s linear infinite}
/* Per-word fade-up animation for hero title; inherit the original gradient */
.hero-title .word{display:inline-block;opacity:0;transform:translateY(12px);background:inherit;background-size:inherit;background-position:inherit;-webkit-background-clip:text;background-clip:text;color:transparent}
.hero-title.animate .word{animation:wordFadeUp .6s ease forwards}
/* Subtitle under the main title */
.hero-sub{max-width:760px;color:var(--muted);font-size:clamp(14px,1.6vw,18px);margin:0}
/* Preview media container with framing */
.hero-media{position:relative;width:80%;max-width:980px;aspect-ratio:16/9;border-radius:24px;overflow:hidden;background:#ffffff;border:4px solid rgba(15,23,42,.22);box-shadow:0 12px 28px rgba(15,23,42,.12),0 24px 56px rgba(15,23,42,.18);filter:drop-shadow(0 0 12px rgba(15,23,42,.18));margin-top:8px;transform:translateZ(0);backface-visibility:hidden;will-change:transform}
.hero-media::before{content:"";position:absolute;inset:0;opacity:.4;pointer-events:none;z-index:0;background-image:repeating-linear-gradient(0deg,rgba(96,165,250,1) 0 1px,rgba(96,165,250,0) 1px 24px),repeating-linear-gradient(90deg,rgba(96,165,250,1) 0 1px,rgba(96,165,250,0) 1px 24px);mask-image:radial-gradient(ellipse 70% 95% at 50% 50%,rgba(0,0,0,1) 40%,rgba(0,0,0,.35) 65%,rgba(0,0,0,0) 90%);-webkit-mask-image:radial-gradient(ellipse 70% 95% at 50% 50%,rgba(0,0,0,1) 40%,rgba(0,0,0,.35) 65%,rgba(0,0,0,0) 90%)}
.hero-media img{position:relative;z-index:1;width:100%;height:100%;object-fit:cover;display:block;border-radius:22px}
.game-description{position:absolute;bottom:0;left:0;right:0;z-index:2;color:#ffffff;background:linear-gradient(to top,rgba(0,0,0,0.8) 0%,rgba(0,0,0,0.4) 60%,transparent 100%);padding:clamp(10px,1.8vw,20px) clamp(14px,2.2vw,26px) clamp(6px,1.2vw,12px) clamp(14px,2.2vw,26px);margin:0;font-size:clamp(10px,1.6vw,16px);line-height:1.3;text-shadow:0 2px 4px rgba(0,0,0,0.5);border-radius:0 0 22px 22px}
.game-description.will-reveal{opacity:0;transform:translateY(30px);transition:opacity 0.8s ease,transform 0.8s ease}
.game-description.will-reveal.is-visible{opacity:1;transform:translateY(0)}
/* CTA badges row */
.actions{display:flex;gap:16px;justify-content:center;align-items:center;flex-wrap:wrap;margin-top:12px;isolation:isolate}
.actions a{display:inline-flex;align-items:center;justify-content:center;transition:transform .18s ease}
.actions a:hover{transform:translateY(-2px)}
.actions img{height:44px;width:auto}
/* Always-on glow for CTA badges under the preview */
.actions a[href*="store.steampowered.com"] img{filter:drop-shadow(0 6px 22px rgba(0,0,0,.35))}
.actions a[href*="discord.gg"] img{filter:drop-shadow(0 6px 22px rgba(88,101,242,.35))}
.newsletter{margin-top:64px;padding:0}
.newsletter-card{position:relative;width:min(680px,92vw);margin:0 auto;border-radius:20px;overflow:hidden;background:#ffffff;border:4px solid rgba(15,23,42,.22);box-shadow:0 6px 14px rgba(15,23,42,.06),0 12px 28px rgba(15,23,42,.09);filter:drop-shadow(0 0 6px rgba(15,23,42,.09));display:flex;align-items:center;justify-content:center}
.newsletter-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:8px;padding:clamp(16px,2.5vw,24px);min-height:clamp(120px,18vw,160px)}
.newsletter-card .container{width:100%;margin-inline:0}
.newsletter-title{font-size:clamp(22px,3.6vw,32px);line-height:1.2;margin:0;font-weight:800}
.newsletter-sub{max-width:680px;color:var(--muted);font-size:clamp(14px,1.6vw,18px);margin:0}
.newsletter-form{display:flex;gap:8px;align-items:center;justify-content:center;width:100%;max-width:560px}
.newsletter-input{flex:1;min-width:0;height:48px;border:1px solid #e5e7eb;border-radius:999px;padding:0 16px;background:#fff;color:#111827;font-size:16px;outline:none;transition:border-color .16s ease,box-shadow .16s ease}
.newsletter-input:focus{border-color:#9aa4b2;box-shadow:0 0 0 4px rgba(17,24,39,.06)}
.newsletter-button{height:48px;border-radius:999px;padding:0 18px;border:1px solid #111827;background:#111827;color:#ffffff;font-weight:800;cursor:pointer;transition:transform .14s ease,box-shadow .14s ease,background-color .14s ease,border-color .14s ease;box-shadow:0 6px 22px rgba(17,24,39,.35)}
.newsletter-button:hover{transform:translateY(-1px);background:#0b1224;border-color:#0b1224;box-shadow:0 8px 26px rgba(17,24,39,.35)}
.newsletter-note{font-size:13px;color:var(--muted);margin:4px 0 0}
.newsletter-success{
  background: linear-gradient(135deg, #10b981 0%, #059669 100%);
  color: #ffffff;
  padding: 16px 24px;
  border-radius: 12px;
  font-weight: 600;
  font-size: 16px;
  text-align: center;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.3);
  animation: successFadeIn 0.5s ease-out;
}
@keyframes successFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
@media (max-width:600px){.newsletter-form{flex-direction:column;align-items:stretch}.newsletter-button{width:100%}}
.newsletter-card.will-reveal{opacity:0;transform:translateY(48px);transition:transform .7s cubic-bezier(0.22,1,0.36,1),opacity .7s ease-out;will-change:transform,opacity}
.newsletter-card.will-reveal.is-visible{opacity:1;transform:translateY(0)}
/* Footer with social links and copy */
.site-footer{border-top:1px solid var(--ring);padding:22px 0;margin-top:64px;color:var(--muted);background:#fff}
.footer-inner{display:flex;flex-direction:column;gap:14px;align-items:center}
/* Social icons grid */
.socials{display:flex;gap:12px;flex-wrap:wrap;justify-content:center}
.social{display:inline-flex;align-items:center;justify-content:center;height:40px;width:40px;border-radius:999px;border:1px solid #e4e8f0;background:#fafbff;color:#111827;text-decoration:none}
.social img{width:18px;height:18px}
.social:hover{transform:translateY(-1px)}
.social--x:hover{background:#000000;border-color:#000000;box-shadow:0 6px 22px rgba(0,0,0,.35)}
.social--facebook:hover{background:#1877F2;border-color:#1877F2;box-shadow:0 6px 22px rgba(24,119,242,.35)}
.social--instagram:hover{background:#E4405F;border-color:#E4405F;box-shadow:0 6px 22px rgba(228,64,95,.35)}
.social--tiktok:hover{background:#010101;border-color:#010101;box-shadow:0 6px 22px rgba(1,1,1,.35)}
.social--youtube:hover{background:#FF0000;border-color:#FF0000;box-shadow:0 6px 22px rgba(255,0,0,.35)}
.social--discord:hover{background:#5865F2;border-color:#5865F2;box-shadow:0 6px 22px rgba(88,101,242,.35)}
.social--steam:hover{background:#171a21;border-color:#171a21;box-shadow:0 6px 22px rgba(23,26,33,.35)}
.social--x:hover img,.social--facebook:hover img,.social--instagram:hover img,.social--tiktok:hover img,.social--youtube:hover img,.social--discord:hover img,.social--steam:hover img{filter:brightness(0) invert(1)}
.copy{font-size:14px}
/* Clickable animated game name */
.game-name{position:relative;display:inline-block;font-weight:800;letter-spacing:.2px;background:linear-gradient(90deg,#111827,#4f46e5 50%,#06b6d4 75%,#111827);-webkit-background-clip:text;background-clip:text;color:transparent;background-size:300% 100%;background-repeat:repeat;animation:gameNameGradientSeamless 8s linear infinite,gameNameWiggle 2.2s ease-in-out infinite;transform-origin:50% 70%}
/* Animation definitions */
@keyframes titleWave{0%{background-position:0% 50%}100%{background-position:100% 50%}}
@property --title-hue{syntax:'<angle>';inherits:false;initial-value:0deg}
@keyframes titleHue{to{--title-hue:360deg}}
@keyframes wordFadeUp{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:translateY(0)}}
@keyframes gameNameGradientSeamless{0%{background-position:0% 50%}100%{background-position:200% 50%}}
@keyframes gameNameWiggle{0%,100%{transform:rotate(0deg) translateY(0)}20%{transform:rotate(-2deg) translateY(0)}40%{transform:rotate(2deg) translateY(1px)}60%{transform:rotate(-1.6deg) translateY(0)}80%{transform:rotate(1.4deg) translateY(1px)}}
@keyframes sandRotate180{0%{transform:rotate(0deg)}50%{transform:rotate(180deg)}100%{transform:rotate(360deg)}}
@keyframes brandGradientMove{0%{background-position:0% 50%}100%{background-position:100% 50%}}
@keyframes gameDescriptionSlideUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@media (max-width:520px){.actions img{height:40px}.hero-media{width:92vw}.game-description{font-size:clamp(9px,3vw,12px);padding:clamp(6px,2.5vw,10px) clamp(10px,3.5vw,14px) clamp(4px,1.5vw,8px) clamp(10px,3.5vw,14px);line-height:1.25}}
@media (min-width:1200px){.game-description{font-size:clamp(14px,1.5vw,16px);padding:clamp(16px,1.8vw,22px) clamp(20px,2.2vw,28px) clamp(10px,1.2vw,14px) clamp(20px,2.2vw,28px)}}

/* Responsive header scaling */
@media (max-width:780px){
  body{padding-top:92px}
  .site-header{height:auto}
  .header-inner{height:auto;padding:10px 0}
  .header-nav{flex-wrap:wrap;gap:10px;justify-content:center}
  .header-link{padding:8px 12px;font-size:14px}
  .header-link img,.header-link svg{width:14px;height:14px}
}

@media (max-width:520px){
  body{padding-top:104px}
  .header-nav{gap:8px}
  .header-link{padding:6px 10px;font-size:13px}
  .header-link img,.header-link svg{width:13px;height:13px}
}

/* Mobile portrait mode adjustments */
@media (max-width:780px) and (orientation: portrait){
  .brand{display:none}
  .header-inner{justify-content:center;padding:8px 0}
  .game-description{font-size:10px}
  .game-description.will-reveal{opacity:0;transform:translateY(30px);animation:gameDescriptionSlideUp 0.8s ease 1.2s forwards;transition:none}
  body{padding-top:76px}
  .hero{padding:8px 0}
}

/* Mobile landscape mode adjustments */
@media (max-width:780px) and (orientation: landscape){
  .brand{display:block}
  .header-inner{justify-content:center}
}