/* ── games area: a calm opening, then the games themselves, big ── */
.gh-hero{--hd:clamp(88px,5.6vw,112px);--kid:max(400px,min(34vw,calc(100svh - 430px)));position:relative;isolation:isolate;height:calc(var(--kid) + var(--hd) + 38px);overflow:hidden;color:#fff;
  background:radial-gradient(70% 95% at 50% 62%,var(--hero-in) 0%,var(--hero-mid) 42%,var(--hero-out) 100%)}
/* same opening as the printable sheets: Skoli on the left, the text on the right, the white area laps over the foot */
.gh-hero .wrap{position:relative;height:100%;display:flex;justify-content:space-between;align-items:center;gap:32px;padding-top:var(--hd);padding-bottom:40px;padding-inline:clamp(0px,6.5vw,170px)}
.gh-copy{position:relative;z-index:2;flex:0 1 auto;min-width:0}
.gh-copy h1{font-family:Anomalia,Ploni,sans-serif;font-weight:400;font-size:clamp(40px,3.5vw,76px);line-height:1.1;letter-spacing:-.01em;margin:0 0 12px}
.gh-copy h1 .ln{display:block;overflow:hidden;padding-bottom:.12em;margin-bottom:-.12em}
.gh-copy h1 .ln > *{display:block;font-style:normal;translate:0 110%;transition:translate .9s cubic-bezier(.2,.75,.2,1)}
.gh-copy h1 em{color:var(--sun);transition-delay:.12s!important}
.gh-copy p{font-size:clamp(18px,1.15vw,22px);line-height:1.5;color:rgba(255,255,255,.88);max-width:26em;text-wrap:pretty;margin:0;opacity:0;translate:0 16px;transition:opacity .7s .35s,translate .7s .35s cubic-bezier(.2,.75,.2,1)}
.gh-copy .ctas{margin-top:clamp(20px,1.7vw,32px);opacity:0;translate:0 16px;transition:opacity .7s .45s,translate .7s .45s cubic-bezier(.2,.75,.2,1)}
.gh-in .gh-copy h1 .ln > *{translate:none}
.gh-in .gh-copy p,.gh-in .gh-copy .ctas{opacity:1;translate:none}
/* Skoli stands behind the white area, seen down to just under the controller */
.gh-sk{--h:calc(var(--kid) * 1.08 + 16px);position:relative;z-index:1;flex:none;align-self:flex-end;margin-bottom:calc(var(--h) * -.11);height:var(--h);aspect-ratio:1224/1500;translate:0 16%;opacity:0;transition:translate .9s cubic-bezier(.2,.8,.25,1) .1s,opacity .5s .1s}
.gh-sk img{display:block;height:calc(var(--h) * 1.15);width:auto;margin-inline:auto;max-width:none}
.gh-in .gh-sk{translate:none;opacity:1}
/* small 3D game pieces only around Skoli, nothing by the text: some sharp, some blurred and further away */
.gh-parts{position:absolute;inset:0;z-index:0;pointer-events:none;opacity:0;transition:opacity .8s .3s}
.gh-in .gh-parts{opacity:1}
.gh-parts img{position:absolute;left:var(--x);top:var(--y);width:calc(var(--kid) * var(--s));height:auto;translate:-50% -50%;rotate:var(--r,0deg);filter:blur(var(--b,0px));opacity:var(--o,1);animation:sjFloat var(--t,9s) ease-in-out var(--d,0s) infinite;will-change:transform}

/* list */
.gh-list{position:relative;z-index:3;margin-top:-40px;background:var(--paper);border-radius:40px 40px 0 0;padding:clamp(28px,2.2vw,44px) 0 clamp(72px,6vw,130px)}
.gh-bar{display:flex;align-items:center;justify-content:space-between;gap:12px 28px;flex-wrap:wrap;margin-bottom:clamp(18px,1.6vw,30px)}
.gh-bar h2{font-family:Anomalia,Ploni,sans-serif;font-weight:400;font-size:clamp(30px,2.6vw,52px);line-height:1.1;color:var(--ink)}
.gh-bar h2 span{color:var(--blue)}
.gh-filters{position:relative;display:flex;flex-wrap:wrap;gap:4px}
.gh-filters .ind{position:absolute;top:0;left:0;border-radius:999px;background:var(--blue);transition:transform .45s cubic-bezier(.3,.85,.3,1),width .45s cubic-bezier(.3,.85,.3,1)}
.gh-filters button{position:relative;border:0;background:none;border-radius:999px;padding:10px 18px;font:inherit;font-weight:600;font-size:clamp(15px,1.05vw,19px);color:var(--ink);cursor:pointer;transition:color .3s}
.gh-filters button:hover{color:var(--blue)}
.gh-filters button.on{color:#fff}
.gh-filters button:focus-visible{outline:2px solid var(--flame);outline-offset:2px}

/* the open games: picture first, one colour block each */
.gh-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.4vw,28px)}
.gh-tile{display:flex;flex-direction:column;min-width:0;border-radius:clamp(22px,2vw,36px);overflow:hidden;background:var(--soft);color:var(--ink);opacity:0;translate:0 26px;transition:opacity .7s,translate .8s cubic-bezier(.2,.75,.2,1)}
.gh-tile.in{opacity:1;translate:none}
.gh-tile .art{display:block;flex:none;aspect-ratio:16/9;background:var(--c);position:relative;overflow:hidden}
.gh-tile .art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform-origin:50% 100%;transition:scale .9s cubic-bezier(.2,.7,.2,1)}
.gh-tile:hover .art img{scale:1.05}
.gh-tile .gh-ft{flex:1;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:clamp(12px,1.1vw,22px) clamp(16px,1.4vw,28px)}
.gh-tile .tx{display:flex;flex-direction:column;gap:2px;min-width:0}
.gh-tile b{font-family:Anomalia,Ploni,sans-serif;font-weight:400;font-size:clamp(22px,1.75vw,34px);line-height:1.1}
.gh-tile small{font-weight:600;font-size:clamp(13px,.95vw,17px);color:var(--mute)}
.gh-tile .go{flex:none;position:relative;width:clamp(40px,3vw,58px);aspect-ratio:1;border-radius:50%;background:var(--c);transition:scale .45s cubic-bezier(.34,1.56,.64,1)}
.gh-tile .go::before{content:"";position:absolute;left:50%;top:50%;translate:-42% -50%;border-style:solid;border-width:.62em 0 .62em 1em;border-color:transparent transparent transparent var(--t);font-size:clamp(10px,.8vw,14px);rotate:180deg;transform-origin:50% 50%}
.gh-tile:hover .go{scale:1.1}
.gh-tile:focus-visible{outline:3px solid var(--flame);outline-offset:3px}

/* still to come: smaller, quiet, plainly not clickable */
.gh-later{margin-top:clamp(40px,4vw,80px)}
.gh-later h3{font-family:Anomalia,Ploni,sans-serif;font-weight:400;font-size:clamp(24px,2vw,40px);line-height:1.1;color:var(--ink);margin:0 0 clamp(14px,1.2vw,24px)}
.gh-soons{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:clamp(12px,1.2vw,24px)}
.gh-soon{opacity:0;translate:0 20px;transition:opacity .7s,translate .8s cubic-bezier(.2,.75,.2,1)}
.gh-soon.in{opacity:1;translate:none}
.gh-soon img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:clamp(14px,1.2vw,22px)}
.gh-soon b{display:block;margin-top:8px;font-weight:600;font-size:clamp(15px,1.05vw,19px);line-height:1.25;color:var(--mute)}
.gh-tile.hide,.gh-soon.hide,.gh-later.hide{display:none}
.gh-empty{display:none;text-align:center;padding:40px;color:var(--mute);font-size:18px}

/* narrower screens: the two pieces nearest the text step aside */
@media (max-width:1100px){.gh-parts img:nth-child(5),.gh-parts img:nth-child(7){display:none}}
@media (max-width:1240px){.gh-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:900px){
  html,body{overflow-x:hidden}
  /* phone: the text beside Skoli, the games start right under */
  .gh-hero{--kid:min(52vw,300px);height:auto}
  .gh-hero .wrap{display:block;height:auto;padding-inline:0;padding-bottom:calc(40px + 22px)}
  .gh-copy{max-width:calc(100% - var(--kid) * .72 - 8px)}
  .gh-copy h1{font-size:clamp(36px,9.4vw,60px)}
  .gh-copy p{display:none}
  .gh-sk{--h:calc(var(--kid) + 12px);position:absolute;left:8px;bottom:calc(40px - var(--h) * .02);margin:0}
  .gh-parts img:nth-child(n+3){display:none}
  .gh-soons{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:640px){
  .gh-grid{grid-template-columns:minmax(0,1fr)}
  .gh-soons{grid-template-columns:repeat(2,minmax(0,1fr))}
  .gh-filters{margin-inline:-6px}
  .gh-filters button{padding:9px 14px}
}
@media (prefers-reduced-motion:reduce){
  .gh-copy h1 .ln > *,.gh-copy p,.gh-sk,.gh-tile,.gh-soon{transition-duration:.01s!important;transition-delay:0s!important}
  .gh-parts{transition:none}
  .gh-parts img{animation:none}
}