/* Let's play: all browser games (/play). Builds on style.css, home.css (section width, eyebrow, h1) and catalog.css. */
.play-page main>section h1{font-size:clamp(48px,5vw,72px);margin:0 0 20px}
.pl{padding-top:24px;margin-bottom:110px}
.pl-head .intro{margin:0;max-width:520px}
.js-reveal .pl-head>*,.js-reveal .pl-art,.js-reveal .pl-grid>li{animation:pgUp .8s cubic-bezier(.2,.7,.2,1) both}
.js-reveal .pl-head h1{animation-delay:.08s}.js-reveal .pl-head .intro{animation-delay:.18s}.js-reveal .pl-head .pl-notes{animation-delay:.24s}.js-reveal .pl-art{animation-delay:.12s}
.js-reveal .pl-grid>li:nth-child(1){animation-delay:.3s}.js-reveal .pl-grid>li:nth-child(2){animation-delay:.38s}.js-reveal .pl-grid>li:nth-child(3){animation-delay:.46s}

/* hero: copy left; right the desk photo with Cubi playing on a gamepad, in the panel shape of the other pages */
.pl-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(40px,6vw,96px);align-items:center;margin-bottom:clamp(88px,9vw,128px)}
.pl-art{position:relative;aspect-ratio:1/.8;background:#f5ddad;border-radius:120px 28px 28px 28px;overflow:hidden}
.pl-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 72%}
/* on the wall above Cubi: a printed maze and a memory card, stuck on with washi tape (like the tape on the desk) */
.pl-pin{position:absolute;background:#fff;box-shadow:0 6px 14px -6px #8a5a2455,0 1px 2px #8a5a2422}
.pl-pin img{display:block;width:100%;height:100%;object-fit:cover}
.pl-pin i{position:absolute;left:50%;top:-7%;width:46%;height:13%;transform:translateX(-50%) rotate(-4deg);background:#b0a3efd9}
.pl-pin.p1{left:35%;top:13%;width:17%;aspect-ratio:.707;transform:rotate(-5deg);border-radius:3px}
.pl-pin.p2{left:56%;top:17%;width:13%;aspect-ratio:1;transform:rotate(6deg);border-radius:14%;overflow:visible}
.pl-pin.p2 img{border-radius:14%}
.pl-pin.p2 i{background-color:#51f4d8cc;width:58%;transform:translateX(-50%) rotate(5deg)}
/* Cubi sits on the desk between the paper and the game console, rocking a little as if playing */
.pl-cubi{position:absolute;left:38%;bottom:16%;width:31%;height:auto;transform-origin:40% 100%;filter:drop-shadow(0 12px 10px #8a5a2433);animation:pl-play 1.4s ease-in-out infinite}
@keyframes pl-play{0%,100%{transform:rotate(-2deg)}50%{transform:rotate(2deg) translateY(-3px)}}

.pl-grid{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
/* each game is a white tile with a soft shadow: the picture on top, the text below, Play at the bottom (level across tiles);
   on hover the tile lifts a little, its picture plays and the d-pad turns */
.pl-card{position:relative;display:flex;flex-direction:column;gap:20px;height:100%;background:#fff;border-radius:28px;padding:18px 18px 26px;
  box-shadow:0 1px 2px #2024280f,0 16px 36px -18px #20242838;transition:transform .3s cubic-bezier(.3,1.4,.5,1)}
.pl-card:hover,.pl-card:focus-visible{transform:translateY(-3px)}
.pl-pic{display:grid;place-items:center;aspect-ratio:1.6;border-radius:20px;overflow:hidden}
.pl-pic .pl-mm{inset:8% 26%}.pl-pic .pl-mz{width:44%}.pl-pic .pl-yw{width:42%}
.pl-memory .pl-pic{background:#efeafd}
.pl-maze .pl-pic{background:#d3faf2}
.pl-yarn .pl-pic{background:#ffe0f3}
.pl-memory .pl-pic{position:relative}
/* the next game, still being drawn: a dashed place in the grid with Mini */
.pl-soon{height:100%;min-height:300px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;text-align:center;border:2px dashed #20242826;border-radius:28px;padding:28px;color:#45484b}
.pl-soon img{width:90px;height:auto;transform:rotate(-6deg)}
.pl-soon b{font:600 22px Rubik,sans-serif;color:var(--ink)}
.pl-soon span{font-size:14px;line-height:1.5;max-width:230px}

.pl-body{flex:1;display:flex;flex-direction:column;gap:10px;padding:0 8px}
.pl-title{font:600 clamp(24px,2.2vw,30px)/1.15 Rubik,sans-serif;letter-spacing:-.03em}
.pl-text{font-size:15px;line-height:1.55;color:#45484b}
.pl-meta{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
/* chips in the game's colour, like the picture above them (no outline) */
.pl-meta span{font-size:12px;font-weight:600;padding:5px 11px;border-radius:20px;background:var(--chip,#f6f2e6)}
.pl-memory{--chip:#efeafd}.pl-maze{--chip:#d9f8f1}.pl-yarn{--chip:#ffe0f3}
.pl-cta{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:auto;background:var(--ink);color:#fff;border-radius:40px;padding:12px 20px;font-weight:600;font-size:15px;line-height:1;transition:transform .25s cubic-bezier(.25,.8,.3,1)}
/* the d-pad: on a card hover it turns a quarter round; the whole button grows a little when the pointer is on it */
.pl-cta svg{display:block;width:15px;height:15px;margin-right:-1px}
.pl-card:hover .pl-pad,.pl-card:focus-visible .pl-pad{animation:pl-turn .6s cubic-bezier(.3,1.5,.5,1)}
@keyframes pl-turn{to{transform:rotate(90deg)}}
.pl-cta:hover{transform:scale(1.05)}
/* notes for grown-ups in the hero, under the intro: three soft chips with an icon, one under another */
.pl-notes{list-style:none;margin:28px 0 0;padding:0;display:flex;flex-direction:column;align-items:flex-start;gap:8px}
.pl-notes li{display:flex;align-items:center;gap:8px;background:#f6f2e6;border-radius:40px;padding:8px 16px 8px 12px;font-size:13px;line-height:1.35;color:#45484b}
.pl-notes svg{flex:none;width:18px;height:18px;display:block}
.pl-notes b{font-weight:700;color:var(--ink)}


/* balance banner after the games: a small taped postcard of the view break, and why the games stay small */
.pl-balance{display:grid;grid-template-columns:auto 1fr;gap:clamp(40px,7vw,104px);align-items:center;margin-top:clamp(88px,9vw,120px);background:#fff0bf;border-radius:28px 120px 28px 28px;padding:44px clamp(28px,6vw,96px) 44px 52px}
.pl-post{position:relative;width:210px;background:#fff;padding:10px 10px 30px;border-radius:6px;transform:rotate(-3deg);box-shadow:0 14px 26px -12px #20242840}
.pl-post::before{content:"";position:absolute;left:50%;top:-11px;width:80px;height:22px;transform:translateX(-50%) rotate(3deg);background:#b0a3efd9}
.pl-post .view{display:block;width:100%;height:auto;aspect-ratio:1.15;object-fit:cover;object-position:50% 100%;border-radius:3px}
.pl-post .cubi{position:absolute;right:-22px;bottom:-14px;width:70px;height:auto;transform:rotate(6deg)}
.pl-post span{position:absolute;left:12px;bottom:8px;font:600 12px Rubik,sans-serif;color:#626466}
.pl-balance .eyebrow{margin:0 0 10px}
.pl-balance h2{font:700 clamp(28px,2.8vw,40px)/1.1 Rubik,sans-serif;letter-spacing:-.04em;margin:0 0 16px;max-width:860px}
.pl-balance p.tx{margin:0 0 10px;font-size:16px;line-height:1.6;color:#45484b;max-width:780px}
.pl-balance p.tx:last-child{margin-bottom:0}
.pl-balance b{color:var(--ink)}

/* two columns on tablets: the next game turns into a low strip across the whole row */
@media(max-width:860px){
  .pl-grid{grid-template-columns:repeat(2,1fr)}
  .pl-grid>li:has(.pl-soon){grid-column:1/-1}
  .pl-soon{min-height:0;display:grid;grid-template-columns:auto auto;grid-template-rows:auto auto;column-gap:16px;row-gap:2px;justify-content:center;text-align:left;padding:20px 24px}
  .pl-soon img{width:56px;grid-row:1/3}.pl-soon b{align-self:end}.pl-soon span{max-width:none;align-self:start}
}
@media(max-width:640px){.pl-grid{grid-template-columns:1fr}}
@media(max-width:900px){.pl-hero{grid-template-columns:1fr;gap:32px}.pl-art{max-width:520px}}
@media(max-width:560px){
  .pl{padding-top:12px;margin-bottom:72px}.pl-hero{margin-bottom:56px}
  .pl-art{border-radius:72px 22px 22px 22px}
  .pl-notes li{border-radius:16px}
  .pl-card{padding:16px 16px 22px;gap:18px}.pl-body{padding:0 4px}
  .pl-balance{grid-template-columns:1fr;border-radius:28px 72px 28px 28px;padding:36px 22px 28px;gap:30px}.pl-post{width:180px;margin:0 auto}
}
@media(prefers-reduced-motion:reduce){
  .js-reveal .pl-head>*,.js-reveal .pl-art,.js-reveal .pl-grid>li{animation:none}
  .pl-cubi{animation:none}
  .pl-cta,.pl-card{transition:none}
  .pl-pad{animation:none!important}
}