/* Game page (slice S2). Uses the design system tokens and components in ds.css; only the player and the page's own
   layout live here. Class prefix gp-. No 100vw anywhere, so a classic 17px Windows scrollbar never causes sideways scroll. */
.sc-game .sc-main{padding-top:var(--sc-3)}
.gp{display:grid;gap:var(--sc-3);min-width:0}
.gp>*{min-width:0}
.gp-head{display:grid;gap:6px}
.gp-titlerow{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sc-2) var(--sc-3)}
.gp-h1{font-size:clamp(26px,1.4vw + 18px,40px)}
.gp-badges{display:flex;flex-wrap:wrap;gap:6px}
.gp-hook{flex:1 1 320px;min-width:0;font-size:clamp(15px,.3vw + 14px,17px);line-height:1.35;color:var(--sc-ink-2);text-wrap:pretty}
@media(min-width:1024px){.gp-hook{padding-left:var(--sc-3);border-left:1px solid var(--sc-line)}}

/* ---- player ---- */
.gp-player{display:grid;gap:var(--sc-2)}
.gp-shell{display:grid;min-width:0;background:var(--sc-navy-950);border-radius:var(--sc-r-md);overflow:hidden;box-shadow:var(--sc-sh-2)}
.gp-stage{position:relative;width:100%;aspect-ratio:16/9;min-height:240px;max-height:max(240px,calc(100svh - var(--gp-chrome,250px)));background:#05070c;overflow:hidden;isolation:isolate}
.sc .gp-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.gp-frame{position:absolute;inset:0;z-index:1}
.gp-frame iframe{display:block;width:100%;height:100%;border:0;background:#000}
.gp-cover{position:absolute;inset:0;z-index:2;display:grid;place-items:center;padding:var(--sc-4)}
.gp-player:not([data-state=poster]) .gp-cover{background:rgba(10,29,61,.78)}
.gp-player[data-state=ready] :is(.gp-cover,.gp-art){display:none}
.sc .gp-play{position:absolute;inset:0;display:grid;grid-template-rows:1fr auto;justify-items:stretch;width:100%;padding:0;border:0;background:none;color:#fff;font:inherit;text-align:left;cursor:pointer}
.sc .gp-play[hidden]{display:none}
.gp-play-disc{place-self:center;display:grid;place-items:center;width:clamp(64px,7vw,96px);aspect-ratio:1;border-radius:50%;background:var(--sc-orange-600);border:3px solid #fff;box-shadow:var(--sc-sh-3);transition:transform .14s ease,background .14s ease}
.gp-play-disc::after{content:"";border:clamp(11px,1.2vw,16px) solid transparent;border-left:clamp(18px,2vw,26px) solid #fff;border-right:0;margin-left:14%}
.gp-play-cap{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px var(--sc-4);padding:var(--sc-3) var(--sc-4);background:rgba(10,29,61,.9)}
.gp-play-label{font:900 clamp(22px,1.2vw + 16px,34px)/1.05 var(--sc-display);letter-spacing:.4px;text-transform:uppercase}
.gp-play-facts{font-size:var(--sc-fs-14);font-weight:700;line-height:1.35;color:var(--sc-navy-200)}
@media(hover:hover){.gp-play:hover .gp-play-disc{transform:scale(1.07);background:var(--sc-orange-500)}}
.sc .gp-play:focus-visible{outline:3px solid #fff;outline-offset:-6px;box-shadow:inset 0 0 0 9px var(--sc-orange-600);border-radius:0}
.gp-noscript{position:relative;z-index:3;padding:var(--sc-3) var(--sc-4);border-radius:var(--sc-r-md);background:#fff;color:var(--sc-ink);font-weight:700}

.gp-panel{position:relative;display:grid;gap:var(--sc-3);width:min(100%,460px);padding:var(--sc-5);border-radius:var(--sc-r-lg);background:var(--sc-surface);color:var(--sc-ink);box-shadow:var(--sc-sh-3);justify-items:start}
.gp-panel[hidden]{display:none}
.gp-panel>*{min-width:0;max-width:100%}
.gp-panel-title{font:800 var(--sc-fs-22)/1.2 var(--sc-body);color:var(--sc-navy-900)}
.gp-panel-text{font-size:var(--sc-fs-16);line-height:1.5;color:var(--sc-ink-2)}
.gp-panel-hint{font-size:var(--sc-fs-13);line-height:1.45;color:var(--sc-ink-3)}
.sc .gp-panel a:not(.sc-btn){font-weight:700}
.gp-form{display:grid;gap:var(--sc-3);width:100%;justify-items:start}
.gp-field{font-size:var(--sc-fs-14);font-weight:800;margin-bottom:-6px}
.sc .gp-form select{width:100%;min-height:44px;padding:0 var(--sc-3);border:1px solid #aab6ca;border-radius:var(--sc-r-md);background:#fff;color:var(--sc-ink);font:400 var(--sc-fs-16)/1.2 var(--sc-body)}
.sc .gp-form select:hover{border-color:var(--sc-navy-700)}
.gp-check{display:flex;align-items:flex-start;gap:10px;font-size:var(--sc-fs-14);line-height:1.45;cursor:pointer}
.gp-check[hidden]{display:none}
.gp-check input{flex:none;width:20px;height:20px;margin:1px 0 0;accent-color:var(--sc-navy-700)}
.sc .gp-form .sc-btn:disabled{background:var(--sc-ink-3);opacity:1}
.gp-actions{display:flex;flex-wrap:wrap;gap:var(--sc-2)}
.gp-loadbar{position:relative;display:block;width:100%;height:5px;border-radius:var(--sc-r-pill);background:var(--sc-navy-100);overflow:hidden}
.gp-loadbar::after{content:"";position:absolute;inset:0 60% 0 0;border-radius:inherit;background:var(--sc-orange-600);animation:gp-load 1.3s ease-in-out infinite alternate}
@keyframes gp-load{to{transform:translateX(150%)}}
/* a gate or an error can be taller than a short stage: let the stage grow with it instead of scrolling inside */
.gp-player:is([data-state=gate],[data-state=error],[data-state=checking]) .gp-stage{aspect-ratio:auto;height:auto;max-height:none;min-height:min(440px,max(240px,calc(100svh - var(--gp-chrome,250px))))}
.gp-player:is([data-state=gate],[data-state=error],[data-state=checking]) .gp-cover{position:relative;min-height:inherit}

.gp-toolbar{display:flex;align-items:center;justify-content:space-between;gap:var(--sc-3);min-height:48px;padding:6px var(--sc-3);background:var(--sc-navy-900);color:#fff}
.gp-now{display:flex;align-items:center;gap:var(--sc-2);min-width:0;font-size:var(--sc-fs-14);line-height:1.2}
.gp-now b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;flex:0 1 auto;min-width:0}
.gp-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--sc-navy-200)}
.gp-shell.is-live .gp-dot{background:#58d68d}
.gp-save{color:var(--sc-navy-200);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;flex:0 1 auto}
.gp-save:empty{display:none}
.sc .gp-link{flex:none;padding:0;border:0;background:none;color:#fff;font:700 var(--sc-fs-13)/1.2 var(--sc-body);text-decoration:underline;text-underline-offset:3px;cursor:pointer;white-space:nowrap}
.sc .gp-link[hidden]{display:none}
.gp-tools{display:flex;flex:none;gap:2px}
.sc .gp-tool{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:40px;min-height:36px;padding:0 10px;border:0;border-radius:var(--sc-r-sm);background:transparent;color:#fff;font:700 var(--sc-fs-13)/1 var(--sc-body);cursor:pointer;white-space:nowrap}
.sc .gp-tool:hover{background:var(--sc-navy-700)}
.sc .gp-tool[aria-pressed=true]{background:var(--sc-navy-700)}
.gp-tool.is-saved svg{fill:var(--sc-orange-500);stroke:var(--sc-orange-500)}
.gp-player[data-state=poster] #gp-restart{display:none}
.sc .gp-shell :is(a,button):focus-visible{outline-color:#fff;box-shadow:0 0 0 4px var(--sc-orange-600)}
.gp-note{padding:var(--sc-2) var(--sc-3);border-radius:var(--sc-r-md);background:var(--sc-navy-900);color:#fff;font-size:var(--sc-fs-14);font-weight:700}
.gp-note[hidden]{display:none}
@media(max-width:899px){.sc .gp-tool span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.sc .gp-tool{padding:0}}
/* playing on a desktop-width window: the player takes the whole window height (it is scrolled to the top on Play), so a
   16:9 game menu is not cropped to the strip left under the header */
@media(min-width:700px){.gp-player:is([data-state=loading],[data-state=slow],[data-state=ready]) .gp-stage{max-height:max(240px,calc(100svh - var(--gp-bar,58px)))}}
@media(max-width:699px){
  /* phones: the stage runs edge to edge and is tall enough for thumbs */
  .gp-shell{margin-inline:calc(var(--sc-gutter)*-1);border-radius:0}
  .gp-stage{aspect-ratio:auto;height:max(240px,min(calc(100svh - var(--gp-chrome,300px)),max(56.25vw,62svh)))}
  .gp-toolbar{flex-wrap:wrap;row-gap:2px}
  .gp-now [data-gp-signed-out]{display:none}
  .gp-panel{padding:var(--sc-4)}
}
/* Expand: the shell fills the window, the toolbar moves on top so Exit is always in reach. Fullscreen hides it. */
html.gp-expanded{overflow:hidden}
html.gp-expanded .gp-shell{position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;margin:0;border-radius:0}
html.gp-expanded .gp-toolbar{order:-1;padding-left:max(var(--sc-3),env(safe-area-inset-left));padding-right:max(var(--sc-3),env(safe-area-inset-right));padding-top:max(6px,env(safe-area-inset-top))}
html.gp-expanded .gp-stage{flex:1 1 0;aspect-ratio:auto;height:auto;min-height:0;max-height:none}
html.gp-expanded .gp-player:is([data-state=gate],[data-state=error],[data-state=checking]) .gp-stage{overflow:auto}
html.gp-fullscreen .gp-toolbar,.gp-shell:fullscreen .gp-toolbar{display:none}
.gp-shell:fullscreen{display:flex;flex-direction:column}
.gp-shell:fullscreen .gp-stage{flex:1 1 0;aspect-ratio:auto;height:auto;min-height:0;max-height:none}

/* ---- Steam and showcase pages: trailer or key art where the player would be ---- */
.gp-showcase{display:grid;gap:var(--sc-4);align-items:center}
.gp-showcase-media{min-width:0;border-radius:var(--sc-r-md);overflow:hidden;box-shadow:var(--sc-sh-2);background:#000}
.sc .gp-showcase .sc-video{color:#fff}
.gp-keyart{aspect-ratio:16/9}
.sc .gp-keyart img{display:block;width:100%;height:100%;object-fit:cover}
.gp-showcase-body{display:grid;gap:var(--sc-3);justify-items:start}
@media(max-width:599px){.gp-showcase-body .sc-actions{flex-direction:column;align-items:stretch;width:100%}}
@media(min-width:1024px){.gp-showcase{grid-template-columns:minmax(0,1.7fr) minmax(280px,1fr);gap:var(--sc-6)}.gp-showcase-body .sc-actions{flex-direction:column;align-items:stretch;width:min(100%,320px)}}

/* ---- write-up ---- */
.gp-cols{margin-top:var(--sc-5)}
.gp-main{display:grid;gap:var(--sc-6);min-width:0}
.gp-main>*{min-width:0}
.gp-section{display:grid;gap:var(--sc-3)}
.gp-section>*{min-width:0}
.gp-content{display:flex;gap:var(--sc-2);align-items:flex-start;font-size:var(--sc-fs-14);color:var(--sc-ink-2)}
.gp-content .sc-badge{flex:none;margin-top:2px}
.sc .gp-list{display:grid;gap:var(--sc-2);padding-left:1.2em;list-style:disc;max-width:72ch;font-size:17px;line-height:1.55}
.gp-list li::marker{color:var(--sc-orange-600)}
.gp-shots{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr));gap:var(--sc-4) var(--sc-3)}
.gp-shots figure{margin:0;display:grid;gap:6px;align-content:start}
.gp-shots a{display:block;border-radius:var(--sc-r-md);overflow:hidden;background:var(--sc-navy-900)}
.sc .gp-shots img{display:block;width:100%;height:auto;border-radius:var(--sc-r-md)}
.gp-shots figcaption{font-size:var(--sc-fs-13);line-height:1.4;color:var(--sc-ink-2)}
.gp-modes{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:var(--sc-3)}
.gp-modes .sc-box-body{display:grid;gap:6px;padding:var(--sc-4)}
.gp-tablewrap{overflow-x:auto;border:1px solid var(--sc-line);border-radius:var(--sc-r-md);background:var(--sc-surface)}
.gp-table{width:100%;border-collapse:collapse;font-size:var(--sc-fs-14)}
.gp-table :is(th,td){text-align:left;padding:var(--sc-2) var(--sc-3);border-bottom:1px solid var(--sc-line-2);vertical-align:top}
.gp-table thead th{background:var(--sc-surface-2);font-weight:800}
.gp-table tbody tr:last-child :is(th,td){border-bottom:0}
.gp-table tbody th{font-weight:800;white-space:nowrap}
.gp-facts{grid-template-columns:repeat(2,minmax(0,1fr));border:0;border-radius:0 0 7px 7px}
.gp-facts>div:last-child:nth-child(odd){grid-column:1/-1}
.gp-facts dd{font-size:var(--sc-fs-14);line-height:1.3}
.gp-related{padding-block:var(--sc-2)}
@media(min-width:600px) and (max-width:1023px){.gp-side{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.gp-side>.gp-publish{grid-column:1/-1}}

/* Miniclip pass (Nov 14 evening): the write-up sits in one white box beside the navy-barred side boxes */
.sc-game .gp-main{gap:28px;padding:var(--sc-4);background:var(--sc-surface);border:1px solid var(--sc-line);border-radius:var(--sc-r-md);box-shadow:var(--sc-sh-1)}
@media(min-width:700px){.sc-game .gp-main{padding:var(--sc-5)}}
/* r11: the player column is the shell's own width. A long no-wrap toolbar line (Slop Gulch "Guest play · Practice and public
   matches") used to size the grid column to 596 px inside a 390 px phone, so the stage and the game's right third were cut off. */
.gp-shell{grid-template-columns:minmax(0,1fr)}
/* r11: phones get the desktop treatment while a game runs. The page scrolls the player to the top on Play and the stage takes the
   window height under the toolbar, so a game lays out for a tall phone screen instead of the 390x416 strip left under the title
   (which clipped the right side of Stick Slop's menu). */
@media(max-width:699px){.gp-player:is([data-state=loading],[data-state=slow],[data-state=ready]) .gp-stage{height:max(240px,calc(100svh - var(--gp-bar,58px)));max-height:none}}