@charset "UTF-8";
:root{
  --paper:#f7f6ee;
  --ink:#203e6c;
  --blue:#254dc0;
  --blue-dark:#1c3c9c;
  --orange:#c95630;
  --line:#d9dece;
  --muted:#59645f;
  --mint:#e6eddf;
  --white:#fffef9;
  --radius:20px;
  --shadow:0 7px 0 rgba(32,62,108,.07);
  --content:1160px;
  --mobile-page-gutter:18px;
  --font:"Yu Gothic UI","Hiragino Kaku Gothic ProN",Meiryo,sans-serif
}
*{
  box-sizing:border-box
}
html{
  scroll-behavior:smooth;
  scroll-padding-top:30px
}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--font);
  font-size:16px;
  line-height:1.85;
  -webkit-font-smoothing:antialiased
}
a{
  color:inherit;
  text-decoration:none
}
button{
  font:inherit;
  color:inherit;
  cursor:pointer
}
img{
  display:block;
  max-width:100%;
  height:auto
}
h1,h2,h3,p{
  margin:0
}
h1,h2,h3{
  line-height:1.4
}
button,a,summary{
  -webkit-tap-highlight-color:transparent
}
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:3px solid var(--orange);
  outline-offset:6px;
  border-radius:5px
}
a:hover{
  text-decoration:underline;
  text-underline-offset:5px
}
button:hover{
  filter:brightness(.94)
}
[hidden]{
  display:none!important
}
.wrap{
  width:min(var(--content),calc(100% - 96px));
  margin-inline:auto
}
.sr-only{
  position:absolute;
  width:1px;
  height:1px;
  padding:0;
  margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0
}
.skip-link{
  position:fixed;
  top:-100px;
  left:20px;
  background:var(--ink);
  color:white;
  padding:12px 20px;
  z-index:10
}
.skip-link:focus{
  top:12px
}
.site-header{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:114px;
  border-bottom:1px solid var(--line);
  gap:24px
}
.brand{
  display:inline-flex;
  align-items:center;
  gap:12px;
  font-size:19px;
  font-weight:850;
  line-height:1.45;
  white-space:nowrap;
  letter-spacing:.04em
}
.brand small{
  display:block;
  font-size:10px;
  font-weight:600;
  letter-spacing:.12em;
  margin-top:3px
}
.brand img{
  flex:none
}
.site-header nav{
  display:flex;
  align-items:center;
  gap:36px;
  font-size:13px;
  font-weight:700
}
.nav-itch{
  border:1px solid var(--ink);
  border-radius:100px;
  padding:8px 18px
}
.nav-itch span{
  margin-left:14px
}
.hero{
  display:grid;
  grid-template-columns:1fr 1fr;
  align-items:center;
  min-height:592px;
  gap:16px;
  padding-block:56px 62px
}
.eyebrow{
  font-family:Arial,var(--font);
  font-size:11px;
  font-weight:700;
  letter-spacing:.16em;
  line-height:1.5
}
.live-dot{
  display:inline-block;
  width:7px;
  height:7px;
  background:var(--orange);
  border-radius:50%;
  margin-right:8px;
  vertical-align:1px
}
.hero h1{
  font-size:clamp(36px,4.1vw,58px);
  font-weight:900;
  letter-spacing:.025em;
  line-height:1.45;
  margin:24px 0 20px
}
.orange{
  color:var(--orange)
}
.hero-description{
  font-size:15px;
  font-weight:600;
  line-height:2.1;
  letter-spacing:.045em
}
.button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:30px;
  min-height:54px;
  border-radius:100px;
  padding:13px 26px;
  border:1px solid transparent;
  font-size:14px;
  font-weight:700;
  line-height:1.5;
  text-align:center;
  transition:transform .18s,background .18s
}
.button:hover{
  text-decoration:none;
  transform:translateY(-2px)
}
.primary{
  background:var(--blue);
  color:#fff
}
.primary:hover{
  background:var(--blue-dark)
}
.hero .button{
  margin-top:29px;
  min-width:226px
}
.hero-note{
  font-size:11px;
  color:var(--muted);
  margin-top:13px;
  padding-left:7px
}
.hero-art{
  position:relative;
  min-width:0;
  display:grid;
  place-items:center;
  align-self:stretch;
  isolation:isolate
}
.hero-art:before{
  content:"";
  position:absolute;
  inset:8% 2% 2%;
  border-radius:50%;
  background:#eaeddf;
  z-index:-1;
  transform:rotate(-12deg);
  border:1px solid #e1e4d4
}
.hero-art>img{
  width:112%;
  max-width:none;
  transform:rotate(-6deg);
  margin-left:-4%
}
.orbit-label{
  position:absolute;
  top:25px;
  left:45px;
  font:700 11px Arial,sans-serif;
  letter-spacing:.15em;
  transform:rotate(-9deg)
}
.hero-sticker{
  position:absolute;
  right:-10px;
  bottom:40px;
  display:grid;
  place-content:center;
  width:120px;
  height:120px;
  background:#f3c85e;
  border-radius:50%;
  border:1px solid #bc983e;
  color:#65481f;
  text-align:center;
  font-size:13px;
  font-weight:800;
  line-height:1.7;
  transform:rotate(12deg)
}
.hero-coordinate{
  position:absolute;
  bottom:-16px;
  left:28%;
  font:9px Arial,sans-serif;
  letter-spacing:.12em
}
.marquee{
  overflow:hidden;
  border-block:1px solid var(--line);
  padding:14px 0;
  color:var(--blue);
  background:#eef0e4;
  white-space:nowrap
}
.marquee>div{
  display:flex;
  gap:45px;
  justify-content:center;
  align-items:center;
  font-size:12px;
  font-weight:800;
  letter-spacing:.11em
}
.marquee span{
  font-size:23px;
  line-height:1
}
.games-section{
  padding-block:86px 78px;
  scroll-margin-top:20px
}
.section-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:24px
}
.section-head h2{
  font-size:32px;
  letter-spacing:.035em;
  margin-top:12px;
  font-weight:850
}
.section-head>p{
  font-size:13px;
  color:var(--muted);
  padding-bottom:6px
}
.filter-bar{
  display:flex;
  align-items:center;
  gap:10px;
  margin:30px 0 26px
}
.filter-bar button{
  border:1px solid var(--line);
  border-radius:100px;
  background:transparent;
  padding:8px 21px;
  font-size:12px;
  font-weight:700;
  min-height:42px
}
.filter-bar button[aria-pressed=true]{
  background:var(--ink);
  border-color:var(--ink);
  color:white
}
.filter-bar button span{
  margin-left:12px;
  font:11px Arial,sans-serif;
  opacity:.8
}
.filter-note{
  margin-left:auto;
  font-size:11px;
  color:var(--muted)
}
.game-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:30px;
  margin-top:26px
}
.game-card{
  overflow:hidden;
  border:1px solid #d7dccf;
  border-radius:var(--radius);
  background:var(--white);
  box-shadow:var(--shadow);
  transition:transform .2s
}
.game-card:hover{
  transform:translateY(-4px)
}
.game-art{
  display:block;
  position:relative;
  aspect-ratio:1.55;
  overflow:hidden;
  border-bottom:1px solid var(--line);
  background:#e3eddf
}
.game-art>img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center 72%;
  transition:transform .4s
}
.poppon-basket .game-art{
  background:#e8ecd8
}
.poppon-basket .game-art>img{
  width:83%;
  height:124%;
  max-width:none;
  margin:0 auto;
  object-fit:cover;
  object-position:50% 100%;
  transform:translateY(-19%);
  border-inline:1px solid #d8d8bf
}
.one-push-tower .game-art>img{
  position:absolute;
  width:137%;
  max-width:none;
  height:auto;
  left:-9%;
  top:-23%
}
.game-card:hover .game-art>img{
  filter:saturate(1.08)
}
.art-label{
  position:absolute;
  top:17px;
  left:18px;
  background:var(--white);
  padding:4px 12px;
  border-radius:100px;
  font:9px/1.8 Arial,sans-serif;
  letter-spacing:.13em;
  border:1px solid #dce0d1
}
.art-open{
  position:absolute;
  bottom:16px;
  right:16px;
  display:grid;
  place-items:center;
  width:38px;
  height:38px;
  border-radius:50%;
  background:var(--white);
  font-size:24px;
  box-shadow:0 2px 6px #203e6c11
}
.game-copy{
  padding:26px 28px 21px
}
.card-meta{
  display:flex;
  gap:8px;
  align-items:center;
  font-size:10px;
  font-weight:600;
  color:var(--muted)
}
.card-meta span:first-child{
  background:var(--mint);
  border-radius:4px;
  padding:2px 8px;
  color:#385044
}
.game-copy h3{
  font-size:27px;
  letter-spacing:.02em;
  margin:13px 0 8px
}
.game-copy>p{
  font-size:13px;
  color:var(--muted);
  letter-spacing:.03em
}
.card-bottom{
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--line);
  margin-top:26px;
  padding-top:17px;
  font-size:11px;
  gap:15px
}
.card-bottom>a{
  font-size:13px;
  font-weight:700
}
.card-bottom>a>span:first-child{
  margin-left:20px
}
.card-bottom>span{
  color:var(--muted)
}
.room-note{
  display:flex;
  align-items:center;
  gap:15px;
  margin-top:27px;
  color:var(--muted);
  font-size:11px
}
.room-note>span{
  font-size:24px;
  color:var(--orange)
}
.empty-state{
  padding:40px;
  background:var(--mint);
  border-radius:var(--radius);
  margin-top:24px
}
.about-section{
  background:#e8ecdf;
  border-block:1px solid var(--line)
}
.about-inner{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:80px;
  align-items:center;
  padding-block:73px
}
.about-art{
  position:relative;
  justify-self:center;
  text-align:center;
  width:300px;
  height:280px;
  display:grid;
  align-content:center;
  transform:rotate(-7deg)
}
.about-art:before{
  position:absolute;
  content:"";
  inset:0;
  border:1px solid #b5c4b0;
  border-radius:48% 45% 44% 50%;
  transform:rotate(15deg)
}
.about-art>span{
  font-size:100px;
  font-weight:400;
  line-height:1.2
}
.about-art>p{
  font:900 24px/1 Arial,sans-serif;
  letter-spacing:-.04em;
  margin-top:8px
}
.about-art>i{
  position:absolute;
  right:1px;
  top:20px;
  font:40px Arial,sans-serif;
  font-style:normal;
  color:var(--orange)
}
.about-copy h2{
  font-size:33px;
  margin:16px 0 23px;
  letter-spacing:.055em
}
.about-copy>p:not(.eyebrow){
  font-size:13px;
  margin-bottom:20px;
  line-height:2.1
}
.text-link{
  display:inline-flex;
  align-items:center;
  gap:32px;
  border:0;
  border-bottom:1px solid currentColor;
  background:transparent;
  padding:5px 0;
  font-size:12px;
  font-weight:700;
  border-radius:0
}
.play-guide{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:80px;
  padding-block:75px 86px
}
.play-guide h2{
  font-size:27px;
  margin-top:16px
}
.play-guide details{
  border-bottom:1px solid var(--line);
  padding-block:21px
}
.play-guide details:first-child{
  padding-top:0
}
.play-guide summary{
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  padding-right:25px
}
.play-guide details p{
  font-size:13px;
  color:var(--muted);
  padding-top:16px
}
.site-footer{
  display:flex;
  align-items:center;
  gap:40px;
  padding-block:35px;
  border-top:1px solid var(--line);
  font-size:11px
}
.site-footer .brand{
  font-size:15px
}
.site-footer .brand small{
  font-size:8px
}
.site-footer .brand img{
  width:36px;
  height:36px
}
.site-footer>div{
  margin-left:auto;
  color:var(--muted)
}
.site-footer>div span{
  font:10px Arial,sans-serif
}
.site-footer>a:last-child{
  margin-left:15px
}
.mobile-only{
  display:none
}
.back-link{
  display:inline-block;
  font-size:12px;
  margin-block:28px 38px
}
.detail-hero{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:60px;
  align-items:center;
  padding-bottom:65px
}
.detail-hero h1{
  font-size:clamp(30px,3.3vw,44px);
  margin-top:15px;
  letter-spacing:.025em
}
.detail-hero .eyebrow{
  margin-bottom:15px
}
.pill{
  display:inline-block;
  font-size:11px;
  font-weight:700;
  background:var(--mint);
  border-radius:100px;
  padding:5px 12px;
  white-space:nowrap
}
.detail-tagline{
  font-size:20px;
  font-weight:700;
  margin:14px 0 18px
}
.detail-hero>div>p:not(.eyebrow):not(.detail-tagline){
  font-size:14px
}
.detail-hero .button{
  margin:26px 0 15px;
  min-width:220px
}
.detail-image{
  border-radius:var(--radius);
  overflow:hidden;
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  aspect-ratio:1.1;
  background:var(--mint)
}
.detail-image img{
  width:100%;
  height:100%;
  object-fit:cover
}
.detail-image.one-push-tower img{
  object-position:27% center;
  width:145%;
  max-width:none
}
.how-to{
  display:grid;
  grid-template-columns:1fr 1.3fr;
  gap:60px;
  padding-block:40px 50px;
  border-block:1px solid var(--line)
}
.how-to h2{
  font-size:28px;
  margin:12px 0 20px
}
.how-to p:not(.eyebrow){
  font-size:13px;
  color:var(--muted)
}
.how-to ol{
  list-style:none;
  counter-reset:steps;
  margin:0;
  padding:0
}
.how-to li{
  counter-increment:steps;
  display:flex;
  align-items:center;
  gap:18px;
  padding-block:12px;
  font-size:14px
}
.how-to li:before{
  content:counter(steps,decimal-leading-zero);
  font:700 16px Arial,sans-serif;
  color:var(--orange)
}
.muted{
  color:var(--muted)
}
.muted a{
  text-decoration:underline;
  text-underline-offset:3px
}
.small{
  font-size:11px!important
}
.external-play{
  text-align:center;
  background:var(--mint);
  border-radius:var(--radius);
  margin-block:50px;
  padding:45px 25px
}
.external-play h2{
  font-size:28px;
  margin:14px 0
}
.external-play p{
  font-size:14px
}
.external-play .button{
  margin-block:25px
}
.detail-note{
  margin-block:35px 50px;
  background:#eeefe5;
  padding:25px 30px;
  border-radius:14px
}
.detail-note h2{
  font-size:15px;
  margin-bottom:10px
}
.detail-note p{
  font-size:12px;
  color:var(--muted);
  margin-top:8px
}
.more-game{
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--line);
  padding-block:25px 50px;
  font-size:14px
}
.more-game a{
  font-size:18px;
  font-weight:700
}
.prose{
  max-width:800px;
  padding-bottom:80px
}
.prose h1{
  font-size:40px;
  margin:18px 0 35px
}
.prose .lead{
  font-size:27px;
  font-weight:700;
  line-height:1.6;
  margin-bottom:28px
}
.prose h2{
  font-size:21px;
  margin:36px 0 14px
}
.prose>p:not(.eyebrow):not(.lead){
  font-size:14px;
  margin-bottom:18px
}
.prose .button{
  margin-top:24px
}
.not-found{
  text-align:center;
  padding-block:100px 120px
}
.not-found h1{
  font-size:40px;
  margin:20px 0
}
.not-found .button{
  margin-top:30px
}
@media(min-width:1450px){
  .hero{
    min-height:650px
  }
  .hero h1{
    font-size:59px
  }
}
@media(max-width:950px){
  .wrap{
    width:calc(100% - 56px)
  }
  .site-header nav{
    gap:20px
  }
  .hero{
    min-height:550px
  }
  .hero h1{
    font-size:42px
  }
  .hero-description{
    font-size:14px
  }
  .hero-sticker{
    width:90px;
    height:90px;
    font-size:11px;
    right:-10px;
    bottom:30px
  }
  .orbit-label{
    font-size:9px;
    top:60px;
    left:16px
  }
  .hero-coordinate{
    left:10%;
    bottom:20px;
    font-size:8px
  }
  .section-head h2{
    font-size:29px
  }
  .game-grid{
    gap:22px
  }
  .game-copy{
    padding:22px
  }
  .game-copy h3{
    font-size:23px
  }
  .about-inner{
    gap:35px
  }
  .play-guide{
    gap:40px
  }
  .detail-hero,.how-to{
    gap:35px
  }
  .detail-hero h1{
    font-size:30px
  }
  .detail-tagline{
    font-size:17px
  }
  .site-footer{
    gap:20px
  }
  .site-footer>a:last-child{
    margin-left:0
  }
}
@media(max-width:680px){
  html{
    scroll-padding-top:16px
  }
  .wrap{
    width:calc(100% - 36px)
  }
  .site-header{
    min-height:90px;
    gap:10px
  }
  .brand{
    font-size:15px;
    gap:8px
  }
  .brand img{
    width:36px;
    height:36px
  }
  .brand small{
    font-size:8px
  }
  .site-header nav{
    gap:17px;
    font-size:11px
  }
  .site-header .nav-itch{
    display:none
  }
  .site-header nav a:nth-child(2){
    font-size:10px
  }
  .hero{
    grid-template-columns:1fr;
    gap:15px;
    padding-block:35px 33px;
    min-height:0
  }
  .hero-copy{
    position:relative;
    z-index:1
  }
  .hero h1{
    font-size:clamp(34px,8.3vw,48px);
    margin:20px 0 16px;
    line-height:1.45;
    letter-spacing:.02em
  }
  .hero-description{
    font-size:13px;
    line-height:1.95
  }
  .hero .button{
    margin-top:22px;
    min-height:49px;
    min-width:216px;
    font-size:13px
  }
  .hero-note{
    font-size:10px;
    margin-top:12px
  }
  .hero-art{
    min-height:290px;
    width:min(100%,420px);
    justify-self:center;
    margin-top:4px
  }
  .hero-art>img{
    width:100%;
    margin:0;
    transform:rotate(-5deg)
  }
  .hero-art:before{
    inset:7% 8% 3%
  }
  .orbit-label{
    top:20px;
    left:28px;
    font-size:9px
  }
  .hero-sticker{
    right:2px;
    bottom:30px;
    width:86px;
    height:86px;
    font-size:10px
  }
  .hero-coordinate{
    bottom:0;
    left:20%;
    font-size:8px
  }
  .marquee{
    padding:11px 0
  }
  .marquee>div{
    gap:25px;
    font-size:10px
  }
  .marquee span{
    font-size:19px
  }
  .games-section{
    padding-block:49px 44px
  }
  .eyebrow{
    font-size:10px
  }
  .section-head{
    display:block
  }
  .section-head h2{
    font-size:27px;
    margin-top:9px
  }
  .section-head>p{
    margin-top:12px;
    font-size:11px
  }
  .filter-bar{
    margin:22px 0;
    gap:7px;
    flex-wrap:wrap
  }
  .filter-bar button{
    padding:7px 16px;
    font-size:11px;
    min-height:40px
  }
  .filter-note{
    display:none
  }
  .game-grid{
    grid-template-columns:1fr;
    gap:25px;
    margin-top:22px
  }
  .game-art{
    aspect-ratio:1.5
  }
  .game-copy{
    padding:22px 23px 18px
  }
  .game-copy h3{
    font-size:26px;
    margin-top:12px
  }
  .game-copy>p{
    font-size:12px
  }
  .card-bottom{
    margin-top:23px;
    padding-top:15px
  }
  .card-bottom>a{
    font-size:12px
  }
  .room-note{
    font-size:10px;
    gap:10px;
    margin-top:22px
  }
  .mobile-only{
    display:block
  }
  .about-inner{
    grid-template-columns:1fr;
    gap:25px;
    padding-block:40px 45px
  }
  .about-art{
    width:210px;
    height:200px
  }
  .about-art>span{
    font-size:75px
  }
  .about-art>p{
    font-size:20px
  }
  .about-art>i{
    font-size:30px
  }
  .about-copy{
    padding-inline:8px
  }
  .about-copy h2{
    font-size:30px;
    margin:15px 0 21px
  }
  .about-copy>p:not(.eyebrow){
    font-size:13px
  }
  .about-copy .eyebrow{
    font-size:9px
  }
  .play-guide{
    grid-template-columns:1fr;
    gap:26px;
    padding-block:44px 50px
  }
  .play-guide h2{
    font-size:25px
  }
  .play-guide summary{
    font-size:13px
  }
  .site-footer{
    flex-wrap:wrap;
    gap:22px;
    padding-block:28px
  }
  .site-footer .brand{
    width:100%;
    font-size:15px
  }
  .site-footer>div{
    margin:0;
    font-size:10px
  }
  .site-footer>a:last-child{
    margin-left:auto;
    font-size:10px
  }
  .back-link{
    margin-block:23px 28px
  }
  .detail-hero{
    grid-template-columns:1fr;
    gap:28px;
    padding-bottom:35px
  }
  .detail-hero h1{
    font-size:32px
  }
  .detail-tagline{
    font-size:18px
  }
  .detail-hero>div>p:not(.eyebrow):not(.detail-tagline){
    font-size:13px
  }
  .detail-image{
    max-height:390px;
    aspect-ratio:1.2
  }
  .how-to{
    grid-template-columns:1fr;
    gap:13px;
    padding-block:30px
  }
  .how-to h2{
    font-size:25px;
    margin:8px 0 12px
  }
  .how-to li{
    font-size:13px;
    gap:15px
  }
  .detail-note{
    padding:20px;
    margin-block:24px 35px
  }
  .more-game{
    display:block;
    padding-bottom:35px
  }
  .more-game p{
    font-size:12px;
    margin-bottom:10px
  }
  .more-game a{
    font-size:18px
  }
  .external-play{
    margin-block:30px;
    padding-inline:16px
  }
  .external-play h2{
    font-size:24px
  }
  .external-play p{
    font-size:12px
  }
  .prose h1{
    font-size:30px
  }
  .prose .lead{
    font-size:24px
  }
  .not-found{
    padding-block:70px
  }
  .not-found h1{
    font-size:30px
  }
}
@media(prefers-reduced-motion:reduce){
  html{
    scroll-behavior:auto
  }
  *,*:before,*:after{
    transition:none!important;
    animation:none!important
  }
}
.one-push-tower .game-art>img{
  position:static;
  width:100%;
  height:100%;
  left:auto;
  top:auto;
  object-fit:cover;
  object-position:center 64%
}
.detail-image.one-push-tower img{
  width:100%;
  object-fit:contain;
  object-position:center
}
.site-header nav a{
  display:inline-flex;
  align-items:center;
  min-height:44px
}
.site-header .brand{
  min-height:44px
}
.brand>img{width:64px;height:60px;object-fit:contain}
.site-footer .brand>img{width:48px;height:46px}
.official-logo:before{display:none}
.hero-art.official-logo>img{width:100%;max-width:480px;height:auto;margin:0;transform:none;border-radius:20px}
.hero-art.official-logo{padding:15px 8px 30px}
.official-logo .hero-coordinate{left:auto;bottom:0}
.hero-actions{display:flex;align-items:center;gap:22px;flex-wrap:wrap;margin-top:29px}
.hero-actions .button{margin-top:0}
.steam-section{background:#eeefe7;padding-block:65px 70px;border-top:1px solid var(--line)}
.steam-section .game-grid{margin-top:32px}
.steam-card .game-art{aspect-ratio:920/430}
.steam-card .game-art>img{width:100%;height:100%;object-fit:contain;position:static;transform:none;margin:0}
.steam-card .art-label{top:auto;bottom:15px;background:#fffef9f0;font-family:var(--font);letter-spacing:.02em}
.steam-card .game-copy>p{min-height:1.85em}
.steam-note{font-size:12px;color:var(--muted);margin-top:24px}
.detail-image.steam-image{aspect-ratio:920/430;border-radius:14px}
.detail-image.steam-image img{object-fit:contain}
.about-art.brand-art{width:300px;height:auto;transform:none}
.about-art.brand-art:before{display:none}
.brand-art img{border-radius:16px}
.local-play{padding-block:45px 15px}
.local-play>.section-head{margin-bottom:24px}
.player{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--mint);margin-top:20px}
.player-placeholder{display:grid;justify-items:center;align-content:center;min-height:380px;padding:30px;text-align:center;gap:17px}
.player-placeholder>span{font-size:40px;color:var(--orange)}
.player-placeholder h3{font-size:26px}
.player-placeholder p{font-size:13px}
.player iframe{display:block;width:100%;height:950px;border:0;background:var(--paper)}
.player-tools{display:flex;gap:25px;justify-content:center;padding-inline:18px;flex-wrap:wrap}
.player-status{font-size:12px;color:var(--muted);text-align:center;padding:10px 18px 14px}
.player:fullscreen{border:0;border-radius:0;background:var(--paper);overflow:auto;height:100%;width:100%}
.direct-game{text-align:center;font-size:13px;margin-top:20px}
.direct-game a{text-decoration:underline;text-underline-offset:4px}
.direct-game span{display:block;font-size:11px;color:var(--muted);margin-top:5px}
.ranking-note{padding:15px 20px;background:#eeefe5;border-radius:12px;font-size:12px;color:var(--muted);margin-top:25px}
@media(max-width:950px){.site-header nav{gap:19px;font-size:12px}}
@media(max-width:680px){
  .site-header{flex-wrap:wrap;padding-block:15px;gap:9px}
  .site-header .brand>img{width:48px;height:45px}
  .site-header nav{width:100%;justify-content:space-between;gap:12px;font-size:11px}
  .site-header nav a:nth-child(2){font-size:11px}
  .site-header nav a{min-height:36px}
  .hero-actions{margin-top:23px;gap:16px}
  .hero-actions .text-link{font-size:11px}
  .hero-art.official-logo{min-height:0;padding:12px 12px 27px}
  .hero-art.official-logo>img{max-width:340px}
  .steam-section{padding-block:42px 45px}
  .steam-section .game-grid{margin-top:25px}
  .steam-note{font-size:11px}
  .about-art.brand-art{width:225px}
  .local-play{padding-top:32px}
  .local-play .pill{margin-top:14px}
  .player-placeholder{min-height:330px;padding-inline:15px}
  .player-placeholder h3{font-size:23px}
  .player-tools{gap:20px}
  .player-tools .text-link{font-size:11px}
}

/* Studio directory: neutral typography and compact, scalable catalog layouts. */
:root{--paper:#f6f7f8;--ink:#283444;--blue:#355c7d;--blue-dark:#264862;--orange:#446e91;--line:#dce1e5;--muted:#606b75;--mint:#edf1f4;--white:#fff;--radius:8px;--shadow:none;--content:1200px}
body{font-size:14px;line-height:1.75}
.site-header{min-height:96px;gap:24px}
.brand{font-size:18px;font-weight:700;letter-spacing:.02em}
.brand>img{width:56px;height:53px}
.site-header nav{font-size:13px;font-weight:500;gap:28px}
.hero{min-height:0;grid-template-columns:minmax(0,1fr) 180px;padding-block:38px;gap:48px}
.hero .eyebrow{font-size:11px;color:var(--muted);letter-spacing:.1em}
.hero h1{font-size:32px;font-weight:700;letter-spacing:.025em;line-height:1.5;margin:8px 0 12px}
.hero-description{font-size:14px;font-weight:400;line-height:1.9;letter-spacing:0}
.hero-art.official-logo{padding:0;min-height:0;align-self:center}
.hero-art.official-logo>img{width:180px;max-width:100%;border-radius:0}
.hero-actions{margin-top:22px;gap:12px}
.button{min-height:44px;border-radius:6px;padding:11px 20px;font-size:13px;font-weight:600;gap:18px}
.hero .button{min-width:0;min-height:44px;margin:0}
.button:hover{transform:none}
.button.secondary{border-color:var(--blue);background:var(--white);color:var(--blue)}
.catalog-section{padding-block:38px 42px;border-top:1px solid var(--line);scroll-margin-top:20px}
.section-head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px}
.section-head h2{font-size:25px;font-weight:650;letter-spacing:.01em;margin:0}
.catalog-description{font-size:13px;color:var(--muted);margin-top:8px}
.catalog-total{font-size:12px;color:var(--muted);white-space:nowrap;padding-top:9px}
.catalog-controls{display:grid;grid-template-columns:minmax(200px,1fr) minmax(145px,.65fr) 125px 100px auto;gap:12px;align-items:end;background:#eef1f3;padding:16px;border:1px solid var(--line);border-radius:6px;margin-top:24px}
.catalog-controls label{display:grid;gap:6px;min-width:0;font-size:11px;font-weight:600;color:var(--muted)}
.catalog-controls input,.catalog-controls select{width:100%;min-width:0;min-height:42px;padding:8px 10px;border:1px solid #cbd3da;border-radius:4px;background:white;color:var(--ink);font:13px var(--font)}
.catalog-controls input:focus-visible,.catalog-controls select:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
.reset-button{border:1px solid #cbd3da;border-radius:4px;background:#fff;min-height:42px;padding:8px 12px;font-size:12px;white-space:nowrap}
.catalog-result{font-size:12px;color:var(--muted);margin:17px 0 14px;outline-offset:4px}
.game-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;margin-top:0}
.game-card{border-radius:7px;box-shadow:none;transition:border-color .15s;display:flex;flex-direction:column}
.game-card:hover{transform:none;border-color:#9baebd}
.game-art{aspect-ratio:16/9;border-radius:0;flex-shrink:0;background:#edf1eb}
.poppon-basket .game-art>img{position:static;width:100%;height:100%;max-width:100%;margin:0;object-fit:cover;object-position:center bottom;transform:none;border:0}
.one-push-tower .game-art>img{object-position:center 67%}
.steam-card .game-art{aspect-ratio:920/430}
.game-copy{padding:16px;flex:1;display:flex;flex-direction:column}
.card-meta{gap:7px;font-size:10px;font-weight:500;flex-wrap:wrap}
.card-meta span:first-child{padding:2px 6px;border-radius:3px;color:var(--muted);background:#edf1f4}
.game-copy h3{font-size:19px;font-weight:650;letter-spacing:0;margin:11px 0 7px;line-height:1.5;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden}
.game-copy>p{font-size:12px;letter-spacing:0;line-height:1.8;min-height:43px;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden;margin-bottom:16px}
.card-bottom{margin-top:auto;padding-top:12px;font-size:11px;gap:10px}
.card-bottom>a{font-size:12px;font-weight:600;white-space:nowrap}
.card-bottom>a>span:first-child{margin-left:8px}
.catalog-pagination{display:flex;justify-content:center;align-items:center;gap:20px;margin-top:26px;font-size:12px}
.catalog-pagination button{min-height:40px;padding:8px 14px;border:1px solid #cbd3da;border-radius:4px;background:#fff;font-size:12px}
.catalog-pagination button:disabled{opacity:.45;cursor:default}
.empty-state{padding:30px;font-size:13px;background:#edf1f4;border:1px solid var(--line)}
.about-section{background:#edf1f3}
.about-inner{grid-template-columns:.6fr 1.4fr;gap:48px;padding-block:36px;align-items:start}
.about-inner h2{font-size:22px;font-weight:650;margin-top:9px}
.about-copy>p:not(.eyebrow){font-size:13px;font-weight:400;line-height:1.9;margin-bottom:16px}
.text-link{font-size:12px;font-weight:500;gap:16px}
.play-guide{grid-template-columns:.6fr 1.4fr;gap:48px;padding-block:40px}
.play-guide h2{font-size:22px;font-weight:650;margin:0}
.play-guide summary{font-size:13px;font-weight:600}
.play-guide details p{font-size:12px}
.site-footer{padding-block:25px;font-size:11px}
.site-footer .brand{font-size:15px}
.site-footer .brand>img{width:40px;height:38px}
.detail-hero h1{font-weight:700;font-size:32px}
.detail-tagline{font-size:18px;font-weight:600}
.pill{border-radius:4px;font-weight:500}
.how-to h2,.local-play .section-head h2,.external-play h2{font-size:24px;font-weight:650}
.player-placeholder h3{font-weight:600;font-size:23px}
.external-play{border-radius:8px}
.prose .lead{font-size:22px;font-weight:600}
.not-found h1{font-size:30px;font-weight:650}
@media(max-width:1000px){
  .catalog-controls{grid-template-columns:minmax(160px,1fr) minmax(130px,.8fr) 110px 90px}
  .reset-button{grid-column:4}
  .game-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:680px){
  .wrap{width:calc(100% - var(--mobile-page-gutter) - var(--mobile-page-gutter))}
  .site-header{padding-block:14px;min-height:0;gap:7px}
  .site-header .brand>img{width:42px;height:40px}
  .site-header .brand{font-size:15px}
  .site-header nav{gap:12px;font-size:11px;font-weight:500}
  .hero{grid-template-columns:1fr;gap:0;padding-block:26px}
  .hero h1{font-size:26px;margin:6px 0 11px;letter-spacing:.01em}
  .hero-description{font-size:12px;line-height:1.9}
  .hero-art.official-logo{display:none}
  .hero-actions{margin-top:18px;gap:10px}
  .hero .button{font-size:12px;padding:11px 14px;min-height:44px}
  .catalog-section{padding-block:28px 32px}
  .section-head{display:flex;gap:10px}
  .section-head h2{font-size:22px;margin:0}
  .catalog-description{font-size:12px;margin-top:7px}
  .catalog-total{font-size:11px;padding-top:7px}
  .catalog-controls{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:12px;margin-top:19px}
  .catalog-controls .search-field{grid-column:1/-1}
  .catalog-controls input,.catalog-controls select{font-size:13px;min-height:44px}
  .reset-button{grid-column:2;min-height:44px;font-size:11px;padding-inline:8px}
  .game-grid{grid-template-columns:1fr;gap:17px}
  .game-copy{padding:15px}
  .game-copy h3{font-size:20px}
  .game-copy>p{font-size:12px;min-height:0}
  .catalog-pagination{gap:10px;font-size:11px}
  .catalog-pagination button{padding:8px 10px;font-size:11px}
  .about-inner,.play-guide{grid-template-columns:1fr;gap:20px;padding-block:28px}
  .about-inner h2,.play-guide h2{font-size:21px}
  .about-copy{padding:0}
  .site-footer{gap:18px}
  .detail-hero h1{font-size:28px}
  .detail-tagline{font-size:17px}
  .how-to h2,.local-play .section-head h2,.external-play h2{font-size:22px}
}
/* Compact studio header and immediate browser play. */
.site-header{min-height:64px;padding-block:8px;gap:18px}
.site-header .brand>img{width:40px;height:38px}
.site-header .brand{font-size:16px}
.site-header .brand small{font-size:9px}
.browser-play-main{padding-top:14px}
.play-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:12px}
.play-heading h1{font-size:21px;font-weight:650;letter-spacing:0}
.play-heading>a{font-size:12px;white-space:nowrap;color:var(--muted)}
.instant-play .player{margin-top:0;background:#fff}
.instant-play .player iframe{height:760px}
.instant-play .player-tools{padding:12px;gap:24px;font-size:12px;border-top:1px solid var(--line)}
.instant-play .player-status{padding-bottom:10px}
.browser-play-main .how-to{margin-top:28px;padding-block:26px}
.browser-play-main .how-to h2,.play-ranking h2{font-size:22px}
.play-ranking{border-top:1px solid var(--line);padding-block:26px}
.play-ranking p{font-size:13px;color:var(--muted);margin-top:10px}
.browser-play-main .detail-note{margin-top:0;padding-block:22px}
.browser-play-main .more-game{display:flex;gap:24px;flex-wrap:wrap}
@media(max-width:680px){
 .site-header{padding-block:6px;gap:2px}
 .site-header .brand>img{width:32px;height:30px}
 .site-header .brand{font-size:14px}
 .site-header nav a{min-height:30px}
 .site-header nav{gap:10px}
 .browser-play-main{padding-top:10px}
 .instant-play .player{margin-inline:calc(0px - var(--mobile-page-gutter));border-inline:0;border-radius:0}
 .play-heading{gap:10px;margin-bottom:8px}
 .play-heading h1{font-size:18px}
 .play-heading>a{font-size:10px}
 .instant-play .player-tools{gap:14px;font-size:11px;padding:10px}
 .browser-play-main .how-to{margin-top:20px;padding-block:22px}
}
/* Information belongs to the surrounding page, independent of the game canvas. */
.game-description{border-top:1px solid var(--line);padding-block:26px}
.game-description h2{font-size:22px;margin-bottom:14px}
.game-description>p{font-size:13px;margin-top:10px;max-width:78ch}
.page-evolution{margin-top:24px;padding:20px;background:#fff;border:1px solid var(--line);border-radius:var(--radius)}
.page-evolution h3{font-size:17px}
.page-evolution ol{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px 10px;list-style:none;padding:0;margin:20px 0 0}
.page-evolution li{display:flex;flex-direction:column;align-items:center;gap:9px;font-size:12px}
.page-evolution-icon{min-height:80px;display:flex;align-items:center;justify-content:center}
.ranking-list{padding-left:28px;margin-top:16px;max-width:680px}
.ranking-list li{padding:10px 12px;border-bottom:1px solid var(--line);font-size:13px}
.ranking-list li>span{display:inline-block;max-width:75%;overflow-wrap:anywhere}
.ranking-list strong{float:right;font-variant-numeric:tabular-nums}
.play-ranking .ranking-policy{font-size:12px}
#how-title,#ranking-title,#description-title{scroll-margin-top:20px;outline-offset:5px}
@media(max-width:680px){.page-evolution{padding:14px}.page-evolution ol{grid-template-columns:repeat(3,minmax(0,1fr))}.play-ranking .section-head{flex-wrap:wrap}.game-description h2{font-size:21px}}
.ranking-boards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;margin-top:20px}
.ranking-boards>section{padding:18px;border:1px solid var(--line);border-radius:var(--radius);background:var(--white);min-width:0}
.ranking-boards h3{font-size:17px}
.ranking-boards p{font-size:12px}
.ranking-boards .ranking-list{max-width:none;margin-bottom:0}
.ranking-boards .ranking-list li{padding-inline:5px}
@media(max-width:680px){.ranking-boards{grid-template-columns:1fr;gap:14px}.ranking-boards>section{padding:14px}}