/* story.css: the Games → About scroll story (story.js). Neutral surfaces, the site's own cards, buttons and type. */
section.sec#games{padding:0;scroll-margin-top:0;display:block}
.ss-run{position:relative}
.ss-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--bg)}
.ss-head{position:absolute;left:max(5vw,24px);top:calc(var(--navh) + 18px);margin:0;z-index:5}
.ss-ring{position:absolute;inset:0;z-index:2;outline:none;touch-action:pan-y}
.ss-ring:focus-visible::after{content:"";position:absolute;inset:calc(var(--navh) + 8px) 8px 8px;border:1px solid var(--g5);border-radius:var(--r-panel);pointer-events:none}
.ss-slot{position:absolute;left:0;top:0;transform-origin:50% 50%;will-change:transform,opacity;pointer-events:auto}
.ss-ring.ss-drag,.ss-ring.ss-drag *{user-select:none;-webkit-user-select:none;cursor:grabbing}
/* phones: a plain horizontal scroller, snapping gently to the middle card */
.ss-ring.ss-native{will-change:transform,opacity;inset:auto 0 auto 0;display:flex;align-items:center;gap:12px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x pan-y;-webkit-overflow-scrolling:touch}
.ss-ring.ss-native::-webkit-scrollbar{display:none}
.ss-ring.ss-native .gcard{touch-action:pan-x pan-y}   /* the site card allows only vertical panning; here a swipe moves the cards */
.ss-ring.ss-native .ss-slot{position:relative;flex:0 0 auto;transform:none;will-change:auto;scroll-snap-align:center;scroll-snap-stop:normal}
.ss-ring.ss-native:focus-visible::after{display:none}
/* nothing animates while the scene is off screen */
.ss-off .gcard *{animation-play-state:paused!important}
.ss-slot .gcard{min-height:0;padding:18px 20px 18px;box-shadow:none}
.ss-slot .gcard .art{height:var(--ss-art,170px);margin:10px 0 12px}
.ss-slot .gcard h3{min-height:0;margin-bottom:6px}
.ss-slot .gcard .gmeta{margin:10px 0 10px}
/* the featured card: flat, readable, a slightly stronger neutral edge. Any visible card takes the site's hover
   treatment (light card, dark text) and plays its illustration while the pointer is on it */
.ss-slot .gcard{border-color:color-mix(in srgb,var(--g6) calc(var(--hl,0) * 100%),var(--g4))}
.ss-slot .gcard.on{border-color:var(--card-edge-on)}
.ss-slot:not(.ss-centre) .gcard:not(.on) *{animation-play-state:paused!important}
.ss-slot:not(.ss-centre) .gcard{cursor:pointer}
.ss-ring.ss-moving .ss-slot{pointer-events:none!important}
.ss-ring.ss-away .ss-slot{pointer-events:none!important}
.ss-slot:not(.ss-centre) .gcard:not(.on) .acts{opacity:.55}
.ss-rooms{position:absolute;left:50%;transform:translateX(-50%);z-index:4;display:grid;grid-template-columns:1fr 1fr;gap:12px;width:min(380px,calc(100vw - 40px))}
.ss-rooms .roombtn{min-height:48px;width:100%}
.ss-rooms .roombtn span{opacity:var(--ss-lab,1);transition:none}
.ss-rooms.ss-gone{visibility:hidden;pointer-events:none}
.ss-arrow{position:absolute;z-index:6;width:48px;height:48px;border:none;border-radius:12px;background:var(--ctl-bg);color:var(--fg);font:600 16px var(--font-sans);cursor:pointer;transform:translateY(-50%);transition:background .15s}
.ss-arrow:hover:not(:disabled){background:var(--ctl-bg-hi)}
.ss-arrow:disabled{opacity:.3;cursor:default}
.ss-arrow:focus-visible{outline:2px solid var(--fg);outline-offset:3px}
#ssPrev{left:max(3vw,18px)}#ssNext{right:max(3vw,18px)}
.ss-foot{position:absolute;left:50%;transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:18px}
.ss-foot .ind{font:500 14px var(--font-mono);letter-spacing:.02em;color:var(--g6)}
/* See all games: a clear secondary button, set apart from the small counter */
.ss-foot{gap:26px}
.ss-foot .viewall{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:0 18px 0 20px;border:1.5px solid var(--g5);border-radius:var(--r-ctl);background:transparent;font:650 17px var(--font-sans);color:var(--fg);text-decoration:none;white-space:nowrap;transition:background .15s,border-color .15s}
.ss-foot .viewall .arr{font-size:1.05em;transition:transform .15s}
.ss-foot .viewall:hover{background:var(--surf2);border-color:var(--fg)}
.ss-foot .viewall:hover .arr{transform:translate(2px,-2px)}
.ss-foot .viewall:focus-visible{outline:2px solid var(--fg);outline-offset:3px;border-color:var(--fg)}
/* the face: behind the cards while they sit on its crown (inside the stage), then in the overlay, above About */
.ss-ov{position:fixed;inset:0;z-index:45;pointer-events:none;background:none!important}
.ss-ov[data-ssmode="still"]{display:none}
.ss-face{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
.ss-stage>.ss-face{z-index:1}
.ss-face.live .ssf{pointer-events:visiblePainted;cursor:pointer}
/* Create/Join while they are eyes: the visible shape is the link */
.ss-face .ss-eye{pointer-events:none}
.ss-face .ss-eye.go{pointer-events:visiblePainted;cursor:pointer}
.ss-face .ss-eye:focus{outline:none}
.ss-face .ss-eye.go:focus-visible .rim{stroke-dasharray:6 4}
.ssf .ln{fill:none;stroke:#0a0a0a;stroke-width:var(--sw,4px);vector-effect:non-scaling-stroke;stroke-linecap:round;stroke-linejoin:round}
.ssf .ln.fl{fill:#fffdf6}
.ssf .ln.bill{fill:#e2cd8f;stroke-width:var(--swb,4px)}
.ssf .ln.sm{stroke-width:var(--sws,3px)}
.ssf .ink{fill:#0a0a0a}
.ssf .lab{font-size:16px;dominant-baseline:central}
.ssf .hf{fill:#fffdf6}
.ssf .pu{fill:#0a0a0a}
.ssf .sh{fill:rgba(10,10,10,.06)}
.ssf .grd{fill:rgba(255,255,255,.12)}
.ss-ov[data-tone="light"] .ssf .grd{fill:rgba(0,0,0,.09)}
html[data-inv="1"] .ss-ov[data-tone="dark"] .ssf .grd{fill:rgba(0,0,0,.09)}
html[data-inv="1"] .ss-ov[data-tone="light"] .ssf .grd{fill:rgba(255,255,255,.12)}
.ss-wing .ln{stroke:#0a0a0a}
.ssf .ln.star{fill:#fffdf6;pointer-events:none}.ssf .ln.star.g{fill:#e2cd8f}
.ss-face .ss-wing{pointer-events:none!important}
.ss-pixel{position:absolute;left:0;top:0;image-rendering:pixelated;image-rendering:crisp-edges;will-change:transform}
/* while the real Create/Join buttons sit under the featured card, the header pair steps back (one pair per view) */
body.ss-rooms-here nav .roomnav{visibility:hidden}

/* phones: arrows and counter sit in one row under the buttons, See all games at its end */
#games[data-ssmode="phone"] .ss-head{font-size:clamp(30px,8vw,40px);top:calc(var(--navh) + 10px);left:20px}
#games[data-ssmode="phone"] .ss-arrow{top:auto;bottom:max(14px,2vh);transform:none;width:44px;height:44px}
#games[data-ssmode="phone"] #ssPrev{left:20px}
#games[data-ssmode="phone"] #ssNext{left:74px}
#games[data-ssmode="phone"] .ss-foot{left:auto;transform:none;top:auto;right:20px;bottom:max(14px,2vh);gap:12px}
#games[data-ssmode="phone"] .ss-foot .ind{display:none}
#games[data-short="1"] .ss-arrow{display:none}
/* phones: "All games" sits in the heading row, so the full list is one tap away without swiping */
.ss-all{display:none}
#games[data-native="1"] .ss-head{right:auto}
#games[data-native="1"] .ss-all{display:inline-flex;align-items:center;position:absolute;z-index:6;right:20px;top:calc(var(--navh) + 10px);min-height:44px;padding:0 2px;font:600 16px/1 var(--font-sans);color:var(--fg);text-decoration:none;border-bottom:2px solid var(--g4)}
#games[data-native="1"] .ss-all:active{border-bottom-color:var(--fg)}
#games[data-native="1"] .ss-foot .viewall{display:none}
@media (max-width:359px){ #games[data-native="1"] .ss-head{font-size:27px} #games[data-native="1"] .ss-all{font-size:15px;right:14px} #games[data-native="1"] .ss-head{left:14px} }

/* About slides up over the pinned stage like the next page */
#about.ss-cover{position:relative;z-index:2;box-shadow:0 -1px 0 var(--nav-line)}

/* reduced motion: one still curved carousel; no pinning */
#games[data-ssmode="still"] .ss-stage{position:relative}

/* quiet traces behind the deck (desktop) */
.ss-traces{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden;color:var(--fg)}
.ss-trace{position:absolute;opacity:0;transition:opacity 3.2s ease;pointer-events:none;user-select:none}
.ss-trace.on{opacity:.055}
.ss-traces[data-tone="light"] .ss-trace.on{opacity:.075}
.ss-trace svg{display:block;width:100%;height:100%;overflow:visible}
@media (prefers-reduced-motion:reduce){.ss-trace{transition:none}}

/* "Find a game…" (game-search.js). Laptop: a compact field on the right of the Games heading, on the section's margin.
   Phone: a search button after the heading; it opens the field as a row under the heading, over the deck */
.gs-find{position:absolute;z-index:9;top:var(--gs-top,calc(var(--navh) + 24px));right:max(5vw,24px);width:min(320px,34vw)}
.gs-open{display:none}
.gs-field{position:relative;display:flex;align-items:center;height:44px;border:1.5px solid var(--g4);border-radius:var(--r-ctl);background:var(--bg);transition:border-color .15s}
.gs-field:hover{border-color:var(--g5)}
.gs-field:focus-within{border-color:var(--fg)}
.gs-ic{display:flex;padding:0 4px 0 12px;color:var(--g6)}
.gs-ic svg,.gs-open svg,.gs-clear svg{width:19px;height:19px}
.gs-field input{flex:1;min-width:0;height:100%;border:none;background:transparent;color:var(--fg);font:500 15.5px var(--font-sans);padding:0 6px;outline:none;-webkit-appearance:none;appearance:none}
.gs-field input::placeholder{color:var(--g5)}
.gs-field input::-webkit-search-cancel-button{display:none}
.gs-clear{display:flex;align-items:center;justify-content:center;width:40px;height:40px;margin-right:1px;border:none;border-radius:10px;background:transparent;color:var(--g6);cursor:pointer}
.gs-clear:hover,.gs-clear:focus-visible{color:var(--fg);background:var(--surf2)}
.gs-clear:focus-visible{outline:2px solid var(--fg);outline-offset:-2px}
.gs-clear[hidden]{display:none}
.gs-cancel{display:none}
.gs-pop{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--bg);border:1.5px solid var(--g4);border-radius:var(--r-ctl);padding:6px;box-shadow:0 18px 40px rgba(0,0,0,.28)}
.gs-pop[hidden]{display:none}
.gs-list{list-style:none;margin:0;padding:0;max-height:min(420px,55vh);overflow:auto}
.gs-opt{display:flex;flex-direction:column;gap:2px;padding:9px 11px;border-radius:9px;color:var(--fg);text-decoration:none}
.gs-opt[aria-selected="true"]{background:var(--surf3)}
.gs-opt:focus-visible{outline:2px solid var(--fg);outline-offset:-2px}
.gs-name{font:650 15.5px/1.25 var(--font-sans)}
.gs-meta{font:500 12.5px/1.3 var(--font-mono);letter-spacing:.01em;color:var(--g6)}
.gs-more{display:block;width:100%;min-height:40px;margin-top:4px;border:none;border-top:1px solid var(--g2);border-radius:0 0 8px 8px;background:transparent;color:var(--fg);font:600 14px var(--font-sans);cursor:pointer}
.gs-more:hover,.gs-more:focus-visible{background:var(--surf2)}
.gs-more[hidden],.gs-empty[hidden]{display:none}
.gs-empty{margin:0;padding:10px 11px;font:500 14.5px/1.45 var(--font-sans);color:var(--g6)}
.gs-empty a{color:var(--fg);font-weight:600;text-decoration:underline;text-underline-offset:3px}
#games[data-ssmode="still"] .gs-find{top:calc(var(--navh) + 24px)}
@media (max-width:699px){
  .gs-find{left:var(--gs-left,150px);right:auto;width:auto;top:var(--gs-top,calc(var(--navh) + 10px))}
  .gs-open{display:flex;align-items:center;justify-content:center;width:44px;height:44px;border:none;border-radius:var(--r-ctl);background:var(--ctl-bg);color:var(--fg);cursor:pointer}
  .gs-open:active{background:var(--ctl-bg-hi)}
  .gs-open:focus-visible{outline:2px solid var(--fg);outline-offset:2px}
  .gs-field,.gs-pop{display:none}
  .gs-find.open{position:absolute;left:14px;right:14px;top:var(--gs-row,calc(var(--navh) + 64px))}
  .gs-find.open .gs-open{display:none}
  .gs-find.open .gs-field{display:flex;height:48px;box-shadow:0 10px 30px rgba(0,0,0,.25)}
  .gs-find.open .gs-field input{font-size:16px}
  .gs-find.open .gs-cancel{display:flex;align-items:center;height:44px;padding:0 12px 0 6px;border:none;background:transparent;color:var(--fg);font:600 15px var(--font-sans);cursor:pointer}
  .gs-find.open .gs-pop:not([hidden]){display:block}
  body.gs-on .ss-pixel{visibility:hidden}
}