/* A game's page (server/listing.ts): its name and the ways in, a stage with the
   clip or picture that is showing, a rail of the others, the description and
   the devices. The colours, the bar, the buttons and the footer are the
   landing page's (landing.css), which every page of the Studio loads first. */
.game{align-items:stretch;width:min(1360px,calc(100% - 2 * clamp(16px,4vw,40px)));margin:0 auto;padding:clamp(8px,3vh,36px) 0 clamp(56px,9vh,96px)}

/* the hero: the name and the ways in beside the stage, as the landing page sets its pitch beside its film */
.g-hero{display:grid;grid-template-columns:minmax(300px,5fr) minmax(0,8fr);align-items:center;gap:clamp(24px,4vw,64px)}
.g-hero.alone{grid-template-columns:minmax(0,1fr)}
.g-head{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
.g-head h1{font:900 clamp(40px,4.6vw,70px)/1 var(--display);letter-spacing:-.02em;color:var(--ink);text-shadow:0 .07em 0 var(--drop);text-wrap:balance}
.g-line{margin-top:clamp(14px,2.2vh,22px);font:600 clamp(19px,1.75vw,25px)/1.36 var(--round);color:var(--ink-2);max-width:22em;text-wrap:pretty}
.g-by{margin-top:12px;font-size:15px;line-height:1.5;color:var(--muted)}
.g-buttons{display:flex;flex-wrap:wrap;gap:16px 12px;margin-top:clamp(20px,3.2vh,30px)}
.g-buttons .btn{margin-top:0}
.btn.second{background:var(--panel);color:var(--ink)}
.g-share{display:flex;gap:22px;margin-top:22px;font:600 15px/1.2 var(--round);color:var(--ink-2)}
.g-share a,.g-share button{color:inherit;text-decoration:underline;text-decoration-color:rgba(203,189,226,.45);text-underline-offset:.22em}
.g-share button{font:inherit;background:none;border:0;cursor:pointer}
.g-share a:hover,.g-share button:hover{color:var(--ink);text-decoration-color:currentColor}
.g-share button:focus-visible,.g-rail a:focus-visible{outline:3px solid var(--cyan);outline-offset:3px;border-radius:8px}

/* the stage: the frame the landing page's film has, at the picture's own shape */
.g-show{min-width:0}
.g-frame{overflow:hidden;background:var(--shade);border-radius:clamp(14px,1.8vw,24px);border:4px solid var(--out);
  box-shadow:0 9px 0 var(--drop),0 34px 80px rgba(8,4,18,.5)}
.g-frame video,.g-frame img{display:block;width:100%;height:auto}
.g-frame.cover img{max-height:70vh;object-fit:contain}
.g-stage figcaption{margin-top:22px;font-size:16.5px;line-height:1.5;color:var(--ink-2);text-wrap:pretty}

/* the rail: every clip and picture, small, in the listing's order */
.g-rail{display:flex;gap:12px;margin-top:16px;padding:4px 4px 10px;list-style:none;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;scrollbar-color:var(--out) transparent}
/* five across; a sixth shows its edge, so the rail reads as one that scrolls */
.g-rail li{flex:0 0 calc((100% - 48px) / 5);scroll-snap-align:start}
.g-rail a{position:relative;display:block;overflow:hidden;border-radius:12px;border:3px solid var(--out);background:var(--shade);box-shadow:0 4px 0 var(--drop);
  transition:transform .12s ease,border-color .12s ease}
.g-rail a:hover{transform:translateY(-2px)}
.g-rail a[aria-current="true"]{border-color:var(--yellow)}
.g-rail img{display:block;width:100%;aspect-ratio:16/9;height:auto;object-fit:cover}
/* a clip's mark: a small triangle in the corner */
.g-clip{position:absolute;left:7px;bottom:7px;width:22px;height:22px;border-radius:50%;background:rgba(14,9,26,.82)}
.g-clip::after{content:"";position:absolute;left:8.5px;top:6px;border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent var(--ink)}
.g-from{margin-top:8px;font-size:14.5px;line-height:1.5;color:var(--muted);max-width:52em;text-wrap:pretty}

/* under the hero, on its two columns: the devices under the ways in, the description under the pictures */
.g-more{display:grid;grid-template-columns:minmax(300px,5fr) minmax(0,8fr);align-items:start;gap:clamp(24px,4vw,64px);margin-top:clamp(36px,6vh,64px)}
.g-about{grid-column:2;grid-row:1;max-width:46em}
.g-get{grid-column:1;grid-row:1}
.g-more > :only-child{grid-column:1 / -1}
.g-about p{font-size:17.5px;line-height:1.62;color:var(--ink-2);text-wrap:pretty}
.g-about p + p{margin-top:16px}
.g-get{padding:22px 24px 24px;border-radius:20px;background:var(--panel);border:3px solid var(--out);box-shadow:0 6px 0 var(--drop)}
.g-get h2{font:800 22px/1.15 var(--round);color:var(--yellow)}
.g-get ul{margin-top:12px;list-style:none}
.g-get li{display:flex;justify-content:space-between;gap:16px;padding:9px 0;border-bottom:2px dashed rgba(169,139,255,.22);font:600 16.5px/1.3 var(--round);color:var(--ink)}
.g-get li span:last-child{color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.g-get p{margin-top:14px;font-size:15px;line-height:1.5;color:var(--ink-2)}
.g-get a{color:var(--cyan)}

@media (max-width:900px){
  .g-hero{grid-template-columns:minmax(0,1fr);gap:28px}
  .g-more{grid-template-columns:minmax(0,1fr)}
  .g-about,.g-get{grid-column:1;grid-row:auto}
}
@media (max-width:480px){
  .g-buttons{width:100%}
  .g-buttons .btn{flex:1 1 100%;justify-content:center;height:54px;padding:0 20px;font-size:18px}
  .g-frame{border-width:3px;box-shadow:0 6px 0 var(--drop)}
  .g-rail li{flex-basis:calc((100% - 36px) / 3.4)}
  .g-get{padding:18px 18px 20px}
}