:root{
  color-scheme:dark;
  --bg:#11140f;
  --panel:#1a1e17;
  --lime:#d5f65a;
  --text:#f0f0e8;
  --muted:#929989;
  --line:#ffffff14;
  font-family:"Segoe UI",Arial,sans-serif;
  font-synthesis:none
}
*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth;
  scroll-padding-top:24px
}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  background-image:radial-gradient(ellipse at 88% 4%,#53672412,transparent 42%)
}
a{
  color:inherit;
  text-decoration:none
}
button{
  font:inherit
}
a:focus-visible{
  outline:2px solid var(--lime);
  outline-offset:6px
}
.page-shell{
  width:min(1200px,90%);
  margin:auto
}
.skip-link{
  position:fixed;
  top:-60px;
  left:20px;
  z-index:10;
  background:var(--lime);
  color:var(--bg);
  padding:12px
}
.skip-link:focus{
  top:12px
}
.site-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:24px;
  height:84px;
  border-bottom:1px solid var(--line)
}
.studio-brand{
  display:flex;
  align-items:center;
  gap:12px
}
.studio-brand>span{
  display:flex;
  flex-direction:column;
  gap:6px
}
.studio-brand strong{
  font-size:13px;
  font-weight:800;
  letter-spacing:.055em
}
.studio-brand small{
  font:9px ui-monospace,monospace;
  letter-spacing:.14em;
  color:var(--muted)
}
.brand-separator{
  color:#687259;
  padding:0 5px
}
.site-header nav{
  display:flex;
  gap:30px;
  font-size:12px
}
.site-header nav a:last-child{
  color:var(--muted)
}
.site-header nav a:hover{
  color:var(--lime)
}
.site-header nav span{
  margin-left:8px;
  color:var(--lime)
}
.intro-section{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:40px;
  padding:32px 0 24px
}
.eyebrow{
  display:flex;
  align-items:center;
  gap:9px;
  font:9px ui-monospace,monospace;
  letter-spacing:.13em;
  color:var(--lime);
  margin:0 0 18px
}
.eyebrow>span{
  height:1px;
  width:26px;
  background:var(--lime)
}
h1{
  font-size:clamp(34px,4vw,46px);
  line-height:1.09;
  letter-spacing:-2.7px;
  font-weight:650;
  margin:0
}
h1 em{
  font-style:normal;
  color:var(--lime)
}
.intro-description{
  font-size:13px;
  line-height:1.7;
  color:var(--muted);
  margin:15px 0 0
}
.studio-stamp{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:9px;
  transform:rotate(8deg);
  width:156px;
  flex-shrink:0;
  border:1px solid #d5f65a40;
  border-radius:18px;
  padding:15px;
  color:var(--lime);
  background:#d5f65a05
}
.studio-stamp img{
  width:57px;
  height:57px;
  margin:3px 0
}
.studio-stamp>span,.studio-stamp small{
  font:7px ui-monospace,monospace;
  letter-spacing:.08em
}
.studio-stamp strong{
  font-size:16px;
  font-style:italic
}
.section-heading,.section-heading>div{
  display:flex;
  align-items:center;
  gap:14px
}
.section-heading{
  justify-content:space-between;
  margin-bottom:20px
}
.section-number{
  font:9px ui-monospace,monospace;
  color:var(--lime);
  white-space:nowrap
}
h2{
  font-size:18px;
  font-weight:500;
  letter-spacing:-.3px;
  margin:0
}
.catalog-count{
  font:9px ui-monospace,monospace;
  color:var(--muted)
}
.game-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));
  gap:24px
}
.game-card{
  display:flex;
  flex-direction:column;
  background:var(--panel);
  border:1px solid #ffffff19;
  border-radius:16px;
  overflow:hidden;
  transition:transform .2s,border-color .2s,box-shadow .2s
}
.game-card:hover{
  transform:translateY(-4px);
  border-color:#d5f65a60;
  box-shadow:0 20px 60px #0004
}
.game-image{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  background:#4b5c3c;
  aspect-ratio:16/9
}
.game-image>img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s
}
.game-card:hover .game-image>img{
  transform:scale(1.025)
}
.game-image::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,#0a16051a,transparent 45%,#0a160587);
  z-index:1;
  pointer-events:none
}
.game-category{
  position:absolute;
  left:22px;
  top:22px;
  background:#11140fe0;
  color:var(--lime);
  border:1px solid #d5f65a38;
  font:8px ui-monospace,monospace;
  letter-spacing:.1em;
  padding:8px 10px;
  border-radius:5px;
  z-index:2
}
.image-caption{
  position:absolute;
  left:22px;
  bottom:22px;
  z-index:2;
  font:7px ui-monospace,monospace;
  letter-spacing:.15em;
  color:#fff9
}
.image-arrow{
  position:absolute;
  right:22px;
  bottom:20px;
  z-index:2;
  font-size:26px;
  background:#12190d70;
  border:1px solid #ffffff30;
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:50%;
  color:var(--lime)
}
.game-info{
  padding:28px;
  display:flex;
  flex-direction:column;
  flex:1
}
.game-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  font:8px ui-monospace,monospace;
  letter-spacing:.08em;
  color:var(--muted);
  gap:12px
}
.availability{
  display:flex;
  align-items:center;
  gap:6px;
  color:var(--lime)
}
.availability i{
  height:5px;
  width:5px;
  border-radius:50%;
  background:var(--lime)
}
.game-subtitle{
  font:8px ui-monospace,monospace;
  letter-spacing:.17em;
  color:var(--muted);
  margin:26px 0 8px
}
.game-info h3{
  font-size:36px;
  line-height:1.05;
  letter-spacing:-1.4px;
  font-weight:700;
  max-width:250px;
  margin:0
}
.game-info h3>span{
  color:var(--lime)
}
.game-description{
  font-size:12px;
  line-height:1.7;
  color:#a7ae9d;
  margin:16px 0 17px
}
.game-modes{
  display:flex;
  gap:7px;
  flex-wrap:wrap
}
.game-modes span{
  border:1px solid #ffffff18;
  border-radius:5px;
  color:#c9d0bd;
  font-size:9px;
  padding:6px 9px
}
.play-line{
  margin-top:26px;
  padding-top:18px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px
}
.play-line strong{
  font-size:10px;
  letter-spacing:.06em;
  display:flex;
  align-items:center;
  gap:12px;
  color:var(--lime)
}
.play-line strong>span{
  font-size:20px
}
.play-line small{
  font-size:8px;
  color:var(--muted)
}
.game-grid:has(>.game-card:only-child) .game-card{
  display:grid;
  grid-template-columns:1.32fr 1fr
}
.game-grid:has(>.game-card:only-child) .game-image{
  aspect-ratio:auto;
  min-height:360px
}
.studio-note{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:26px;
  padding:40px 0 44px
}
.studio-note>div{
  display:flex;
  align-items:center;
  gap:14px;
  max-width:350px
}
.studio-note h2{
  font-size:15px
}
.studio-note p{
  font-size:11px;
  line-height:1.8;
  color:var(--muted);
  margin:0
}
.note-illustration{
  font-size:44px;
  line-height:1;
  color:#d5f65a85;
  padding-right:10px;
  transform:rotate(10deg)
}
.site-footer{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  min-height:68px;
  border-top:1px solid var(--line);
  font:7px ui-monospace,monospace;
  letter-spacing:.08em;
  color:var(--muted)
}
.site-footer b{
  font-weight:400;
  color:#c5ccb8
}
.site-footer a:hover{
  color:var(--lime)
}
@media(max-width:900px){
  .intro-section{
    padding:28px 0 22px
  }
  .studio-stamp{
    width:132px;
    padding:12px
  }
  .game-info{
    padding:24px
  }
  .game-info h3{
    font-size:31px
  }
  .game-grid:has(>.game-card:only-child) .game-card{
    grid-template-columns:1.15fr 1fr
  }
  .game-description{
    font-size:11px
  }
  .game-grid:has(>.game-card:only-child) .game-image{
    min-height:360px
  }
  .play-line{
    gap:6px
  }
  .play-line small{
    font-size:7px
  }
  .studio-note{
    gap:18px
  }
  .studio-note>div{
    max-width:230px
  }
  .site-footer span:nth-child(2){
    display:none
  }
}
@media(max-width:650px){
  .page-shell{
    width:90%
  }
  .site-header{
    height:83px;
    gap:10px
  }
  .studio-brand{
    gap:9px
  }
  .studio-brand img{
    width:38px;
    height:38px
  }
  .studio-brand strong{
    font-size:10px;
    letter-spacing:.02em
  }
  .studio-brand small{
    font-size:7px
  }
  .site-header nav{
    gap:16px;
    font-size:10px
  }
  .site-header nav a:last-child{
    display:none
  }
  .intro-section{
    padding:34px 0 30px
  }
  .eyebrow{
    font-size:7px;
    letter-spacing:.05em;
    margin-bottom:16px
  }
  h1{
    font-size:35px;
    letter-spacing:-1.7px
  }
  .intro-description{
    font-size:12px;
    margin-top:16px
  }
  .studio-stamp{
    display:none
  }
  .desktop-break{
    display:none
  }
  .section-heading{
    gap:8px
  }
  .section-heading>div{
    gap:9px
  }
  h2{
    font-size:15px
  }
  .catalog-count{
    font-size:8px
  }
  .game-grid:has(>.game-card:only-child) .game-card{
    display:flex
  }
  .game-grid:has(>.game-card:only-child) .game-image{
    aspect-ratio:16/10;
    min-height:0
  }
  .game-info{
    padding:23px
  }
  .game-info h3{
    font-size:35px;
    max-width:none
  }
  .game-subtitle{
    margin-top:20px
  }
  .game-description{
    font-size:12px
  }
  .play-line small{
    font-size:8px
  }
  .studio-note{
    align-items:start;
    flex-direction:column;
    gap:16px;
    padding:32px 0
  }
  .studio-note>div{
    max-width:none
  }
  .studio-note p{
    font-size:11px;
    padding-left:29px
  }
  .note-illustration{
    display:none
  }
  .site-footer{
    font-size:6px;
    gap:10px;
    min-height:62px
  }
  .game-category{
    left:16px;
    top:16px
  }
  .image-caption{
    left:16px;
    bottom:16px
  }
  .image-arrow{
    right:16px;
    bottom:16px
  }
}
@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto
  }
  .game-card,.game-image>img{
    transition:none
  }
  .game-card:hover{
    transform:none
  }
}