/* Six-scene narrative structure. The technical illustration remains a replaceable mock. */
.site-nav{gap:clamp(12px,2vw,34px)}
.scene{scroll-margin-top:18px}

/* The first proof: one game, its layers, and a route to a cartridge. */
.real-game{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(320px,.88fr);align-items:center;column-gap:clamp(35px,5vw,100px);padding:66px clamp(20px,5vw,88px) 95px}
.real-game .exploded{grid-column:1;grid-row:1;width:100%;height:840px;max-width:none;margin:28px 0 0}
.real-game .box-intro{grid-column:2;grid-row:1;text-align:left;margin:0;max-width:590px}
.real-game h2{font-size:clamp(5.2rem,7.1vw,9rem);line-height:.88}
.real-game .real-game-main{display:block;color:#fff}
.real-game .real-game-main em{color:var(--yellow)}
.real-game .real-game-follow{display:block;color:#fff;font-size:clamp(2.2rem,3.4vw,4.5rem);line-height:.95;letter-spacing:-.018em;margin-top:20px}
.real-game .box-intro>p:last-of-type{font-size:clamp(1.1rem,1.6vw,1.4rem);font-weight:600;line-height:1.4;max-width:550px;margin:28px 0 23px}
.real-game-choice{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.real-game-choice span{display:inline-block;border:2px solid #fff;padding:8px 10px;font-size:.62rem;font-weight:900;letter-spacing:.08em}
.real-game-choice span:last-child{border-color:var(--yellow);color:var(--yellow)}
.real-game-choice b{color:var(--yellow);font-size:1.3rem}
.real-game .box-tail{grid-column:1/-1;margin-top:10px}
.real-game .layer-screen:after{content:'';position:absolute;inset:34px 10px 10px;z-index:2;pointer-events:none;background:linear-gradient(90deg,#ffffff22 1px,transparent 1px) 0 0/15px 15px,linear-gradient(#ffffff22 1px,transparent 1px) 0 0/15px 15px;mix-blend-mode:screen}

/* The toolbench follows the proof of the game. */
.bench{padding-top:58px}
.bench-heading{padding-top:25px}
.bench-heading>p:last-child{max-width:480px}
.bench .game-first{max-width:1060px}
.bench .game-first>div{justify-content:center}

/* Sharing and collaboration use the same finished game in multiple contexts. */
.community{background:#f7f2e7}
.community .world-title{margin-top:30px}
.community-intro{font-size:clamp(1.05rem,1.8vw,1.35rem);line-height:1.43;font-weight:650;text-align:center;max-width:780px;margin:12px auto 28px}
.community .world-collage{height:840px;margin-top:25px}
.community .wip-post{left:2%;top:2%;width:30%;height:270px;z-index:4;background:#fff9ed;border:3px solid var(--ink);padding:20px;transform:rotate(-7deg)}
.wip-post strong{display:block;font-family:Impact,'Arial Black',sans-serif;font-size:clamp(1.3rem,2.2vw,2rem);line-height:.95}
.wip-post small{display:block;margin-top:10px;font-size:.55rem;font-weight:900;letter-spacing:.09em}
.wip-level{position:relative;height:115px;margin-top:12px;overflow:hidden;background:linear-gradient(#7657dc 0 75%,#4443b1 75% 100%)}
.wip-level:after{content:'';position:absolute;left:0;right:0;bottom:0;height:27px;background:repeating-linear-gradient(90deg,#9d723d 0 16px,#b98343 16px 32px);border-top:8px solid #77c548}
.wip-level i{position:absolute;left:35%;top:39%;z-index:2;color:#17151b;font-size:2.2rem;font-style:normal;text-shadow:2px 2px 0 #fff}
.wip-level b{position:absolute;right:25%;top:25%;color:var(--yellow);font-size:1.7rem}
.community .game-page{left:37%;top:3%;width:43%;height:370px;z-index:3}
.community .team-board{right:2%;top:47%;width:31%;height:260px;z-index:3;background:#e7d9ff;border:3px solid var(--ink);padding:22px;transform:rotate(5deg)}
.team-board strong{display:block;font-family:Impact,'Arial Black',sans-serif;font-size:clamp(1.4rem,2.2vw,2rem);line-height:.95}
.team-board p{font-family:monospace;font-size:.78rem;line-height:1.65;margin:14px 0}
.team-board p span{display:inline-block;min-width:70px;color:var(--violet);font-weight:900}
.team-board small{font-size:.55rem;font-weight:900;letter-spacing:.08em}
.community .forum{left:3%;right:auto;top:49%;width:36%;height:245px;transform:rotate(5deg);z-index:2}
.community .price-tag{left:42%;top:53%;width:24%;height:190px;z-index:4}
.community .price-tag strong{font-size:2.3rem}
.community .lu-world-label{left:79%;bottom:4%;width:85px;height:65px}
.community .lu-world-label b{font-size:.45rem;line-height:1.1;margin-top:37px}
.community .ann-play{left:73%;top:2%;font-size:.85rem}
.community .world-footnote{margin-top:15px}

/* Founder motive and time-based pricing have their own visual language. */
.why{z-index:2;background:#e8dabb;color:var(--ink);padding-top:70px;padding-bottom:80px;background-image:repeating-linear-gradient(0deg,transparent 0 27px,#5d42220a 28px)}
.why-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.86fr);gap:clamp(50px,7vw,130px);align-items:center;max-width:1320px;margin:35px auto 0}
.why-story h2{font-size:clamp(5rem,8.2vw,10rem);margin:0 0 25px}
.why-story h2 span{color:var(--violet)}
.why-story>p:last-of-type{max-width:560px;font-size:clamp(1.1rem,1.7vw,1.38rem);font-weight:650;line-height:1.45}
.why-scribble{display:inline-block;margin:15px 0 0 15%;font-family:Georgia,serif;font-style:italic;font-weight:900;font-size:1.45rem;line-height:1.1;transform:rotate(-7deg);color:var(--violet)}
.usage-card{background:#fff8e9;border:4px solid var(--ink);box-shadow:13px 16px 0 #261c2c55;padding:32px 34px 34px;transform:rotate(3deg)}
.usage-stamp{font-size:.7rem;font-weight:900;letter-spacing:.14em;color:var(--violet)}
.usage-card h3{font-family:Impact,'Arial Black',sans-serif;font-size:clamp(2.5rem,4.3vw,4.5rem);line-height:.92;letter-spacing:-.02em;margin:16px 0 22px}
.usage-row{display:grid;grid-template-columns:48px 1fr;gap:13px;border-top:2px solid var(--ink);padding:16px 0 14px}
.usage-row>strong{font-family:Impact,'Arial Black',sans-serif;color:var(--violet);font-size:1.55rem}
.usage-row b{display:block;font-size:.84rem;letter-spacing:.04em}
.usage-row small{display:block;font-size:.8rem;line-height:1.35;margin-top:5px}
.free-hours{position:relative;bottom:-52px;z-index:3;max-width:730px;margin:40px auto 0;padding:20px 25px 18px;border:3px solid var(--ink);background:var(--yellow);box-shadow:9px 10px 0 #17151b;transform:rotate(-2deg);text-align:center}
.free-hours strong{font-family:Impact,'Arial Black',sans-serif;font-size:2rem}
.free-hours p{font-size:.96rem;line-height:1.35;font-weight:700;margin:5px auto 10px;max-width:530px}
.free-hours>span{display:inline-block;border-bottom:2px solid var(--ink);padding-bottom:3px;font-size:.73rem;font-weight:900;letter-spacing:.1em}
.free-hours small{display:block;font-size:.62rem;margin-top:7px}
.ending{z-index:1;padding-top:145px;overflow:hidden}
.ending>.ending-link{margin-bottom:40px}

@media(max-width:1150px){
  .real-game{display:block}
  .real-game .box-intro{text-align:center;margin:56px auto 0;max-width:800px}
  .real-game h2{font-size:clamp(5.2rem,10vw,9rem)}
  .real-game .real-game-follow{font-size:clamp(2.4rem,5.1vw,4.5rem)}
  .real-game .box-intro>p:last-of-type{margin:23px auto;max-width:650px}
  .real-game-choice{justify-content:center}
  .real-game .exploded{height:920px;max-width:900px;margin:35px auto 0}
  .why-layout{gap:35px}
  .why-story h2{font-size:clamp(5rem,8vw,7rem)}
}
@media(max-width:900px){
  .community .world-collage{height:900px}
  .community .wip-post{width:33%;padding:13px;height:245px}
  .community .game-page{left:35%;width:55%}
  .community .forum{width:42%;top:51%}
  .community .team-board{width:39%;top:48%;height:250px;padding:15px}
  .community .price-tag{left:41%;top:69%;width:29%}
  .why-layout{display:block;max-width:700px}
  .why-story{text-align:center}
  .why-story>p:last-of-type{margin:0 auto}
  .why-scribble{margin:22px auto 25px}
  .usage-card{max-width:560px;margin:45px auto 0}
}
@media(max-width:650px){
  .real-game{padding-top:75px}
  .real-game .box-intro{margin-top:0}
  .real-game h2{font-size:clamp(4.8rem,19vw,7rem)}
  .real-game .real-game-follow{font-size:clamp(2rem,8.6vw,3.2rem);margin-top:14px}
  .real-game .box-intro>p:last-of-type{font-size:1rem;line-height:1.42}
  .real-game-choice{gap:5px}
  .real-game-choice span{font-size:.47rem;padding:6px}
  .real-game .exploded{height:1050px;margin-top:27px}
  .real-game .box-tail{font-size:.92rem;margin-top:5px}
  .bench{padding-top:42px}
  .bench-heading{padding-top:10px}
  .bench .game-first{margin-right:0}
  .bench .game-first>div{justify-content:flex-start}
  .community .world-title{margin-top:18px}
  .community h2{font-size:clamp(3.5rem,13vw,5.8rem)}
  .community-intro{font-size:.92rem;line-height:1.4;margin:13px auto 24px}
  .community .world-collage{height:1170px;margin-top:24px}
  .community .wip-post{left:1%;top:0;width:81%;height:220px;padding:12px}
  .wip-post strong{font-size:1.3rem}
  .wip-level{height:93px}
  .community .game-page{left:10%;top:19%;width:86%;height:260px}
  .community .team-board{left:1%;right:auto;top:43%;width:78%;height:185px;padding:11px}
  .team-board strong{font-size:1.4rem}
  .team-board p{font-size:.62rem;line-height:1.35;margin:8px 0}
  .team-board p span{min-width:48px}
  .team-board small{font-size:.42rem}
  .community .forum{left:auto;right:0;top:60%;width:87%;height:180px;padding:12px}
  .community .price-tag{left:1%;top:78%;width:55%;height:155px;padding:15px}
  .community .price-tag strong{font-size:1.75rem}
  .community .lu-world-label{left:auto;right:5%;bottom:5%}
  .community .ann-play{left:72%;top:17%;font-size:.7rem}
  .community .world-footnote{font-size:.91rem}
  .why{padding-top:65px;padding-bottom:65px}
  .why-layout{margin-top:10px}
  .why-story h2{font-size:clamp(4.5rem,15vw,6rem)}
  .why-story>p:last-of-type{font-size:1rem}
  .why-scribble{font-size:1.18rem}
  .usage-card{margin:35px auto 0;padding:20px 19px 16px;transform:rotate(1deg)}
  .usage-card h3{font-size:2.6rem}
  .usage-row{grid-template-columns:32px 1fr;gap:8px;padding:12px 0}
  .usage-row>strong{font-size:1.2rem}
  .usage-row b{font-size:.73rem}
  .usage-row small{font-size:.73rem}
  .free-hours{bottom:-43px;margin:18px auto 0;padding:16px 14px;transform:rotate(-1deg)}
  .free-hours strong{font-size:1.5rem}
  .free-hours p{font-size:.83rem}
  .ending{padding-top:125px}
}