/* Our games (stage.js): the newest release big, then the other Stake games as a list. Plain dark, no colour wash. */
.so-im{ position:relative; display:block; aspect-ratio:3/4; border-radius:16px; overflow:hidden; background:#1c1c22; box-shadow:0 0 0 1px rgba(255,255,255,.08); }
.so-im img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:scale .6s cubic-bezier(.2,.8,.2,1); }
.so-im.ph img{ opacity:.14; } /* the light striped placeholder, dimmed for the dark room */
a:hover .so-im img{ scale:1.04; }
.so-st{ display:inline-flex; align-items:center; gap:7px; font:600 11px/1 var(--head); letter-spacing:.12em; text-transform:uppercase; color:#b9b9bf; white-space:nowrap; }
.so-st i{ width:7px; height:7px; border-radius:50%; background:#e0a800; } .so-st.live i{ background:#2ab24a; }

/* the featured release: at the top of the section, above the heading (user), with room before the heading */
.so-feat{ margin-bottom:clamp(64px,8vw,120px); }
.so-feat{ display:grid; grid-template-columns:minmax(0,4fr) minmax(0,7fr); gap:clamp(28px,5vw,80px); align-items:center; }
.so-big{ display:block; max-width:400px; }
.so-big .so-im{ border-radius:22px; box-shadow:0 0 0 1px rgba(255,255,255,.1), 0 40px 80px -40px color-mix(in srgb, var(--c) 85%, #000); }
.so-info h3{ margin:14px 0 0; font:800 clamp(44px, 4vw + 16px, 96px)/.9 var(--head); letter-spacing:-.05em; }
.so-info h3 a{ color:inherit; text-decoration:none; }
.so-info p{ margin:18px 0 0; max-width:48ch; color:#c4c4ca; font-size:17px; }
.so-info dl{ display:flex; flex-wrap:wrap; gap:14px 40px; margin:28px 0 0; padding-top:20px; border-top:1px solid var(--line); }
.so-info dt{ font:600 11px/1 var(--head); letter-spacing:.14em; text-transform:uppercase; color:#9a9aa3; }
.so-info dd{ margin:8px 0 0; font:800 26px/1 var(--head); letter-spacing:-.02em; }
.so-acts{ display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }

/* the rest: a row of tiles, side by side, each with its status, name, RTP and max win */
.so-row{ display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:clamp(14px,1.8vw,26px); }
.so-row a{ display:grid; align-content:start; gap:10px; color:#fff; text-decoration:none; }
.so-row .so-im{ margin-bottom:6px; transition:translate .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s; }
.so-row a:hover .so-im{ translate:0 -6px; box-shadow:0 0 0 1px rgba(255,255,255,.14), 0 30px 50px -26px color-mix(in srgb, var(--c) 90%, #000); }
.so-row .t{ font:800 clamp(20px, 1vw + 12px, 28px)/1.05 var(--head); letter-spacing:-.03em; }
.so-row a.soon .t{ color:#c4c4ca; }
.so-row .fx{ display:flex; flex-wrap:wrap; gap:4px 16px; font:500 13px/1.3 var(--head); color:#9a9aa3; }
.so-row .fx b{ color:#fff; font-weight:700; }

/* tablets and phones: no sideways scrolling anywhere. Tablets: tile and words side by side, games three across.
   Phones: the feature centred (tile, words, numbers, buttons), games two across. */
@media (max-width:900px){
  .so-feat{ grid-template-columns:minmax(0,2fr) minmax(0,3fr); gap:28px; }
  .so-big{ max-width:none; }
  .so-info h3{ font-size:clamp(56px, 7vw + 20px, 88px); } /* portrait: big (user) */
  .so-info p{ font-size:16px; }
  /* a wrapping row; a gap left on the last line gets the "more on the way" card (stage.js) */
  .so-row{ display:flex; flex-wrap:wrap; gap:28px 18px; } .so-row a{ width:calc((100% - 36px) / 3); }
  .so-row a.so-gap{ width:calc((100% - 36px) / 3 * var(--span) + 18px * (var(--span) - 1)); }
}
@media (max-width:600px){
  .so-feat{ grid-template-columns:minmax(0,1fr); justify-items:center; text-align:center; gap:24px; }
  .so-big{ width:min(260px, 68vw); }
  .so-info p{ margin-inline:auto; }
  .so-info dl{ justify-content:center; gap:14px 28px; }
  .so-acts{ justify-content:center; }
  .so-row{ gap:26px 14px; } .so-row a{ width:calc((100% - 14px) / 2); }
  .so-row a.so-gap{ width:calc((100% - 14px) / 2 * var(--span) + 14px * (var(--span) - 1)); }
  .so-row .t{ font-size:19px; }
  .so-row .fx{ flex-direction:column; gap:3px; font-size:12px; } /* RTP and max win on their own lines on every tile */
}

/* behind the featured game: a full-width band of its colour, fading in at the top and out at the bottom, a little
   stronger behind the tile (user's pick over one blur, two glows, a halo and none) */
.so-feat{ position:relative; isolation:isolate; }
.so-feat::before{ content:""; position:absolute; z-index:-1; top:-90px; bottom:-90px; left:-50vw; right:-50vw; pointer-events:none;
  background:linear-gradient(180deg, transparent, color-mix(in srgb, var(--c) 16%, transparent) 30%, color-mix(in srgb, var(--c) 16%, transparent) 70%, transparent),
    radial-gradient(40% 70% at 32% 50%, color-mix(in srgb, var(--c) 22%, transparent), transparent 70%); }

/* the "Your game here?" card at the end of the games row (stage.js): dashed, as tall as the tiles, links to Work with us */
.so-row a.so-gap{ display:grid; align-content:center; justify-items:center; gap:10px; padding:22px 16px; box-sizing:border-box; text-align:center;
  border-radius:16px; border:1.5px dashed rgba(255,255,255,.18); color:#fff; text-decoration:none; transition:border-color .2s, background .2s; }
.so-row a.so-gap:hover{ border-color:var(--juice-now, var(--pine)); background:rgba(255,255,255,.03); }
.so-gap b{ font:800 clamp(18px, 1vw + 12px, 24px)/1.05 var(--head); letter-spacing:-.03em; }
.so-gap span{ color:#9a9aa3; font-size:13.5px; line-height:1.4; max-width:22ch; }
.so-gap .go{ color:var(--juice-now, var(--pine)); font:600 14px/1 var(--head); }
.so-gap.wide{ min-height:0; padding:24px 22px; gap:8px; } /* a full line of its own (shortened at the user's ask) */
.so-gap.wide b{ font-size:clamp(24px, 1.4vw + 14px, 32px); }
.so-gap.wide span{ font-size:15px; }
.so-gap.wide .go{ font-size:15px; }
/* wide screens: the games in one line, the card a strip on its own line under them */
@media (min-width:901px){ .so-row{ grid-auto-flow:row; grid-template-columns:repeat(var(--n, 6), minmax(0,1fr)); row-gap:28px; }
  .so-row a.so-gap{ grid-column:1 / -1; } .so-row .t{ font-size:clamp(17px, .7vw + 10px, 22px); } }
/* a strip (wide screens and tablets): words in a line, the link on the right */
@media (min-width:601px){
  .so-row a.so-gap.wide{ display:flex; align-items:center; gap:10px 32px; min-height:0; padding:26px clamp(28px,4vw,48px); text-align:left; }
  .so-gap.wide b{ white-space:nowrap; } .so-gap.wide span{ max-width:none; } .so-gap.wide .go{ margin-left:auto; white-space:nowrap; }
}
/* phones: the stacked card, compact (user) */
@media (max-width:600px){ .so-row a.so-gap.wide{ min-height:0; padding:20px 18px; gap:6px; } .so-gap.wide b{ font-size:24px; } }

/* the featured game's backdrop (games.js `backdrop`): its own background painting, full width from the section's top,
   darkened, fading into the page at the bottom (user's pick: Overgrown's base jungle, over its temple scene and cut-outs) */
.so-bd{ position:absolute; z-index:-2; pointer-events:none; left:calc((100vw - 100%) / -2); right:calc((100vw - 100%) / -2);
  top:calc(-1 * clamp(72px,9vw,128px)); bottom:-110px; overflow:hidden;
  -webkit-mask:linear-gradient(180deg, #000 60%, transparent); mask:linear-gradient(180deg, #000 60%, transparent); }
.so-bd img{ width:100%; height:100%; object-fit:cover; object-position:50% 40%; filter:brightness(.45) saturate(1.05); }
.so-bd::after{ content:""; position:absolute; inset:0; background:radial-gradient(60% 75% at 62% 50%, rgba(10,14,12,.55), transparent 75%); } /* a little darker behind the words */
.so-feat:has(.so-bd)::before{ opacity:.5; } /* the colour band, quieter over a painting */
/* the featured game's character instead of its tile (games.js `mascot`): big, cut off below the knees (user's pick over
   thighs / waist up / huge), fading into the jungle. --bh: the frame's height; --cut: how much of her (from the top) fits */
.so-big.so-mascot{ --bh:clamp(560px, 50vw, 780px); --cut:.7; justify-self:center; max-width:none; height:var(--bh); overflow:hidden; margin-block:-40px -60px;
  /* room above and to the sides (the padding is inside the clip), so the hover lift and lean never hit an edge; only the
     bottom cuts her off */
  --room:60px; padding:var(--room) var(--room) 0; margin-top:calc(-40px - var(--room)); margin-inline:calc(-1 * var(--room));
  -webkit-mask:linear-gradient(180deg, #000 82%, transparent); mask:linear-gradient(180deg, #000 82%, transparent); }
.so-mascot .mc{ position:relative; display:block; height:calc(var(--bh) / var(--cut)); aspect-ratio:890 / 2000; transform-origin:50% 90%;
  animation:mc-bob 5s ease-in-out infinite; transition:translate .45s cubic-bezier(.2,.8,.2,1), rotate .45s cubic-bezier(.2,.8,.2,1), scale .45s cubic-bezier(.2,.8,.2,1); }
.so-mascot img{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.so-mascot img.shut{ opacity:0; } .so-mascot.blink img.shut{ opacity:1; }
@keyframes mc-bob{ 50%{ translate:0 -5px; } }  /* breathing */
/* hover: she lifts and leans in a touch, and the jungle behind eases closer */
.so-mascot:hover .mc{ animation-play-state:paused; translate:0 -10px; rotate:-1.5deg; scale:1.03; }
.so-bd img{ transition:scale 1.2s cubic-bezier(.2,.8,.2,1); }
.so-feat:has(.so-mascot:hover) .so-bd img{ scale:1.04; }
/* portrait: cut off higher (user), around the hips on tablets and the waist on phones, so she doesn't take over the screen */
@media (max-width:900px){ .so-big.so-mascot{ --bh:480px; --cut:.56; margin-block:calc(-20px - var(--room)) -30px; } }
@media (max-width:600px){ .so-big.so-mascot{ --bh:min(380px, 96vw); --cut:.5; --room:36px; width:auto; margin-block:calc(-10px - var(--room)) -20px; } }
/* her entrance: hidden below the frame until the section scrolls into view (stage.js adds .in), then she rises up */
.so-mascot .rise{ display:block; translate:0 55%; opacity:0; transition:translate 1.1s cubic-bezier(.16,.9,.24,1), opacity .5s ease; }
.so-mascot.in .rise{ translate:0 0; opacity:1; }
@media (max-width:600px){ .so-info h3{ font-size:clamp(50px, 16vw, 76px); } } /* phones: as big as fits on one line */