/* Comments here are PUBLISHED inside style.css — never name an unannounced game in this file. */

:root{
  /* One ramp, darkest to lightest. Every colour on the site is here: there were four near-whites
     and two near-blacks scattered through the file, close enough to look like mistakes and far
     enough apart to be visible side by side. */
  --bg:#08080a;
  --surface:#0d0d10;           /* the raised square behind an icon */
  --surface-raised:#111318;    /* the arrow buttons, which sit on a photograph */
  --surface-raised-hi:#191c22; /* and their hover */
  --line:#18181d;
  --line-strong:#2b2b34;       /* the open dropdown's edge, which --line is too dark to carry */
  /* CONTRAST IS LOAD-BEARING BELOW THIS LINE, measured against --bg. --faint was #5b5b63 at 2.97:1
     and --dim #3d3d45 at 1.86:1, against the 4.5:1 that WCAG AA asks of text — and --faint colours
     EVERY section heading and EVERY form label on the site, at 9px, far too small for the
     large-text exemption. They read as grey smudges. Do not darken either one back.
     --dim is for the decorative numbering only, at the 3:1 asked of non-text; anything a reader
     has to actually read, placeholders included, takes --faint or lighter. */
  --dim:#5c5c64;               /* 3.02:1 — the "01" numbering, nothing that must be read */
  --faint:#77777f;             /* 4.51:1 — smallest passing step: headings, labels, nav */
  --soft:#87878f;
  --ink-soft:#b6b6bd;          /* the lede, between --ink and --soft */
  --ink:#e6e6e9;
  --bright:#f2f6f6;            /* focus rings, active dots, hover */

  --error:#e0938c;

  --t:.25s ease;                             /* every ordinary state change */
  --t-slide:.3s cubic-bezier(.22,.8,.3,1);   /* the indent a row takes on hover */

  --q:"Quicksand",ui-rounded,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
}

*{box-sizing:border-box}

.sr-only{
  position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;
  clip-path:inset(50%);white-space:nowrap;border:0;
}

/* Author rules beat the browser's own [hidden], so controls laid out with display:grid stayed
   visible until this. */
[hidden]{display:none !important}
/* Reserve the scrollbar's width on every page, scrolling or not. Without this a short page has no
   scrollbar and a long one does, so the viewport differs by ~15px between them and everything
   centred in it — the bar above all, because it is the one thing on screen during the change —
   slides sideways by half that as you move from page to page. Measured before this: the home page
   laid out in 1200px and the policy in 1185px. */
html{-webkit-font-smoothing:antialiased;scrollbar-gutter:stable}
body{
  margin:0;background:var(--bg);color:var(--ink);font-family:var(--q);
  font-size:16px;line-height:1.72;font-weight:400;
}

.skip{position:absolute;left:-9999px;background:var(--ink);color:var(--bg);
  padding:10px 16px;z-index:20;text-decoration:none;font-size:12px;letter-spacing:.1em}
.skip:focus{left:0;top:0}

/* The content width, and the only one — no element sets its own. The form had an exception on the
   grounds that a text field as wide as a paragraph is a worse control; it made the form sit visibly
   short of every other edge on the page, so it is gone. */
.wrap{max-width:660px;margin:0 auto;padding:0 26px}

.bar{
  position:sticky;top:0;z-index:10;
  background:rgba(8,8,10,.88);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.bar .row{display:flex;justify-content:space-between;align-items:center;gap:20px;
  flex-wrap:wrap;padding:15px 0}

.mark{text-decoration:none;color:var(--ink);border:0;display:block}
.mark .letters{display:flex;font-size:8.5px;font-weight:500}
.mark .letters span{display:block;margin-right:.44em}
.mark .letters span:last-child{margin-right:0}
.mark .letters .narrow{margin-right:.36em}
.mark .letters .wide{margin-right:.5em}
.mark:hover .letters{color:var(--bright)}

.nav{display:flex;gap:18px;flex-wrap:wrap}
.nav a{
  text-decoration:none;border:0;color:var(--faint);font-size:9px;letter-spacing:.2em;
  text-transform:uppercase;transition:color var(--t);
}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}

main{padding:62px 0 96px}

h1{
  font-weight:300;font-size:clamp(1.9rem,4.4vw,2.7rem);line-height:1.12;
  letter-spacing:-.03em;margin:0 0 10px;
}
.updated{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);
  margin:0 0 42px}
.lede{font-size:1.12rem;color:var(--ink-soft);font-weight:300;margin:0 0 8px;line-height:1.6}

h2{
  font-size:9px;letter-spacing:.32em;text-transform:uppercase;color:var(--faint);
  font-weight:600;margin:58px 0 13px;
  scroll-margin-top:74px;
}
h3{font-weight:400;font-size:1.04rem;margin:32px 0 6px;letter-spacing:-.005em;color:var(--ink);
  scroll-margin-top:74px}

p,li{color:var(--soft)}
strong{color:var(--ink);font-weight:500}
ul{padding-left:1.15em;margin:0 0 16px}
li{margin:.42em 0}
p{margin:0 0 15px}

a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--line);
  transition:border-color var(--t)}
a:hover{border-bottom-color:var(--soft)}
/* Two focus rings on the whole site: this one on the page, and --bright for controls sitting on
   a photograph. There were five, differing in width, colour and offset -- the topic dropdown and
   the Send button directly beneath it had different rings purely because nobody wrote one. */
a:focus-visible,button:focus-visible{outline:2px solid var(--soft);outline-offset:3px}

.index{border-top:1px solid var(--line);margin:0}
.index a{
  display:grid;grid-template-columns:24px 1fr auto;gap:18px;align-items:baseline;
  padding:20px 0;border-bottom:1px solid var(--line);border-top:0;
  transition:padding-left var(--t-slide);
}
.index a:hover{padding-left:8px}
.index em{font-style:normal;font-size:8.5px;color:var(--dim);letter-spacing:.1em}
.index b{font-weight:400;font-size:1.14rem;letter-spacing:-.01em;color:var(--ink)}
.index span{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);
  text-align:right}
.index a:hover b{color:var(--bright)}

/* The support routes: the same rows as the games list, carrying only their name. One column, not
   the games list's three -- the base rule would otherwise drop the name into the 24px slot the
   numbering sits in and squeeze it to nothing. */
.index.routes a{grid-template-columns:1fr}


/* ── the contact form ────────────────────────────────────────────────────────
   Fields drawn the way links are drawn here: a rule underneath and nothing else. Boxes would be
   the only enclosed shapes on the site. */
.form{margin:34px 0 0;display:grid;gap:26px}
.field{display:grid;gap:9px}
.field label{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint)}
.field input,.field textarea{
  font:inherit;font-size:1rem;color:var(--ink);background:transparent;
  border:0;border-bottom:1px solid var(--line);border-radius:0;padding:8px 0;
  transition:border-color var(--t);
}
.field input::placeholder,.field textarea::placeholder{color:var(--faint)}
.field input:focus,.field textarea:focus{border-bottom-color:var(--soft)}
.field textarea{resize:vertical;min-height:132px;line-height:1.62}

/* The choice of topic, as rows rather than a dropdown. Same hairlines as every list on the
   site, and the whole row is the target — not a 13px circle. */
.choice{border:0;padding:0;margin:0;display:grid;gap:0}
/* 9px below, the same as every .field puts between its label and its input. It was 4px, so the
   two dropdowns sat visibly tighter to their labels than the text fields did. */
.choice legend{font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);padding:0;margin:0 0 9px}
.choice label{
  display:grid;grid-template-columns:16px 1fr;gap:14px;align-items:center;
  padding:15px 0;border-bottom:1px solid var(--line);cursor:pointer;
  transition:padding-left var(--t-slide);
}
.choice label:hover{padding-left:6px}
.choice label:first-of-type{border-top:1px solid var(--line)}
/* The real radio still does the work — it is only moved out of sight, so keyboard focus, arrow
   keys and form submission all behave exactly as the browser intends. */
.choice input{position:absolute;opacity:0;width:0;height:0}
.choice span{position:relative;color:var(--soft);font-size:1rem;transition:color var(--t)}
.choice label::before{
  content:"";width:13px;height:13px;border-radius:50%;
  border:1px solid var(--soft);transition:border-color var(--t),box-shadow var(--t);
}
.choice label:has(:checked)::before{border-color:var(--ink);box-shadow:inset 0 0 0 3.5px var(--ink)}
.choice label:has(:checked) span{color:var(--ink)}
.choice label:has(:focus-visible)::before{outline:2px solid var(--soft);outline-offset:3px}

/* Once the script has built the menu, the rows step aside and the button stands in for them. The
   radios stay in the document — hidden, still checked, still what gets posted. */
.choice.is-menu{position:relative}
.choice.is-menu label{display:none}
.choice-button{
  font:inherit;font-size:1rem;color:var(--ink);background:transparent;text-align:left;
  border:0;border-bottom:1px solid var(--line);padding:8px 22px 8px 0;cursor:pointer;width:100%;
  transition:border-color var(--t);
  background-image:linear-gradient(45deg,transparent 50%,var(--soft) 50%),
                   linear-gradient(135deg,var(--soft) 50%,transparent 50%);
  background-position:calc(100% - 9px) 58%,calc(100% - 4px) 58%;
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;
}
.choice-button:hover{border-bottom-color:var(--soft)}
/* Open: the field and the list read as one object, so the line between them goes. */
.choice-button[aria-expanded="true"]{border-bottom-color:var(--line-strong)}
.choice-button:focus-visible{outline:2px solid var(--soft);outline-offset:3px}
/* NOT A RAISED CARD. A rounded panel with a lighter fill, a shadow and pill-shaped highlights is
   the house style of a different site — nothing here is a box. So the list is the page's own
   background, separated by the same hairlines as every other list, and it reads as the options
   unfolding in place rather than as a card floating over them.

   Opaque, because it does cover the field below while it is open. */
.choice-panel{
  position:absolute;left:0;right:0;top:100%;z-index:5;
  /* The page's own background. What makes the list readable as a list is the OUTLINE, not a
     lighter fill — the site's usual hairline sits at 1.13:1 here, so the border is the one place
     a brighter line is needed. */
  background:var(--bg);
  border:1px solid var(--line-strong);border-top:0;
}
.choice-option{
  padding:15px 15px 15px 0;color:var(--soft);cursor:pointer;
  border-top:1px solid var(--line);
  transition:color var(--t),background var(--t);
}
.choice-option:first-child{border-top:0}
/* A full-width wash, not a rounded pill — and no sideways nudge. In a list of rows a slide reads
   as movement; in a menu, where the options must line up under the field, it reads as one of
   them being out of alignment. */
.choice-option:hover,.choice-option.is-active{color:var(--ink);background:rgba(242,246,246,.04)}
.choice-option[aria-selected="true"]{color:var(--ink)}

/* [type=submit] specifically: as ".form button" this also caught the topic menu's button and
   set it in 9px letterspaced capitals. */
/* Right-aligned, where the eye lands after reading down the form. Done on a wrapper rather than
   with justify-self on the button, so it does not depend on the button being a direct child of
   the grid — which it was not. */
.actions{display:flex;justify-content:flex-end}
.form button[type="submit"]{font:inherit;font-size:9px;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--soft);
  padding:0 0 9px;cursor:pointer;transition:border-color var(--t);
}
.form button[type="submit"]:hover{border-bottom-color:var(--ink)}
/* The honeypot: gone from the page, from the tab order and from screen readers. Not display:none
   on the input alone, because some bots skip anything obviously hidden. */
.honey{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* The one warm tone on the site, and it is here because an error has to be distinguishable from
   a label rather than merely present. 8.3:1 against the page, so it is a signal and not a
   decoration. */
.field-error{
  margin:9px 0 0;font-size:.86rem;color:var(--error);
}

/* The consent box. Square rather than round, so it is never mistaken for one of the radio rows,
   and the whole line is the target. */
.consent label{display:grid;grid-template-columns:15px 1fr;gap:13px;align-items:start;cursor:pointer}
.consent input{position:absolute;opacity:0;width:0;height:0}
/* Same size as the rest of the form. Consent set smaller than the fields it governs is the
   definition of fine print. */
.consent span{color:var(--soft);font-size:1rem;line-height:1.6}
.consent label::before{
  content:"";width:15px;height:15px;margin-top:3px;border:1px solid var(--soft);border-radius:3px;
  transition:border-color var(--t),background var(--t),box-shadow var(--t);
}
.consent label:has(:checked)::before{
  border-color:var(--ink);background:var(--ink);
  box-shadow:inset 0 0 0 2px var(--bg),inset 0 0 0 5px var(--ink);
}
.consent label:has(:focus-visible)::before{outline:2px solid var(--soft);outline-offset:3px}
.consent label:has([aria-invalid="true"])::before{border-color:var(--error)}
.consent .field-error{margin-left:28px}
.field [aria-invalid="true"]{border-bottom-color:var(--error)}

/* Must stay after the .index rules: same weight, so order decides. Nothing is pinned to a
   column — pinning columns without rows once pushed the whole text row onto a second line. */
.games a{grid-template-columns:24px 56px 1fr auto;align-items:center;padding:14px 0}
.games .icon{
  width:56px;height:56px;display:block;border-radius:13px;background:var(--surface);
  opacity:.92;transition:opacity var(--t);
}
.games a:hover .icon,
.games a:focus-visible .icon{opacity:1}
.games .noicon{background:var(--surface)}


/* Tables: hairlines only, and allowed to scroll sideways on a narrow screen rather than making
   the whole page do it. */


.hero{position:relative;height:min(48vh,400px);overflow:hidden;background:var(--bg)}
.hero img{width:100%;height:100%;object-fit:cover;object-position:center;display:block}
.hero::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(to bottom,rgba(8,8,10,.30) 0%,rgba(8,8,10,0) 30%,rgba(8,8,10,.72) 74%,var(--bg) 100%);
}
main.under-hero{padding-top:0}

.gamehead{display:flex;align-items:center;gap:20px;margin:0 0 18px;position:relative;z-index:1}
/* min-width:0 is what lets a long title wrap; without it the heading claims more width than
   exists and shoves the store button onto its own line. */
.gamehead h1{flex:1 1 auto;min-width:0;margin:0}
/* The head rides up over the hero's fade. margin-top on its own, NOT the margin shorthand: written
   as `margin:-58px 0 0` it also reset the 18px underneath, so on this page alone the lede sat flush
   against the title while every other page had a gap there. */
main.under-hero .gamehead{margin-top:-58px}
.gamehead img{
  width:84px;height:84px;flex:none;border-radius:20px;display:block;
  box-shadow:0 10px 34px rgba(0,0,0,.62);
}


.slides{position:relative;margin:26px 0 40px}
.slides-view{
  display:flex;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;
  scrollbar-width:none;
}
.slides-view::-webkit-scrollbar{display:none}
.slides-view img{
  /* width and min-width:0, not flex-basis: a flex item will not shrink below a picture's own
     1280px, so a basis alone is ignored. */
  flex:0 0 auto;width:100%;min-width:0;
  height:auto;display:block;scroll-snap-align:start;
  border-radius:10px;background:var(--surface);
}

/* One round icon button. The strip and the viewer built the same thing separately -- 42px against
   38px, opaque against translucent, one with a drop shadow -- and they appear on screen together,
   because the viewer reuses .slides-nav for its own arrows. The translucent-and-blurred recipe is
   the one kept: it reads better over a photograph than a solid fill does. */
.slides-nav,.lightbox-close{
  position:absolute;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:rgba(242,246,246,.13);border:1px solid rgba(242,246,246,.22);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  color:var(--bright);cursor:pointer;padding:0;
  transition:background var(--t),border-color var(--t),opacity var(--t);
}
.slides-nav{top:50%;transform:translateY(-50%)}
.lightbox-close{top:16px;right:16px}
.slides-nav:hover:not(:disabled),.lightbox-close:hover{background:rgba(242,246,246,.26)}
/* Both scrollers are focusable and their labels tell people to use the arrow keys, but neither had
   a ring of ours -- they showed the browser default, inches from an arrow wearing the site’s. */
.slides-view:focus-visible,.lightbox-view:focus-visible{outline:2px solid var(--bright);outline-offset:3px}
.slides-nav:disabled{opacity:0;pointer-events:none}
.slides-nav:focus-visible,.lightbox-close:focus-visible{outline:2px solid var(--bright);outline-offset:3px}
.slides-prev{left:-21px}
.slides-next{right:-21px}
.slides-nav svg,.lightbox-close svg{width:16px;height:16px;display:block}

.slides-dots{
  display:flex;gap:8px;align-items:center;justify-content:center;
  margin:16px 0 0;
}
.slides-dots button{
  width:6px;height:6px;border-radius:50%;padding:0;border:0;cursor:pointer;
  background:rgba(242,246,246,.34);transition:background var(--t),transform var(--t);
}
.slides-dots button[aria-current="true"]{background:var(--bright);transform:scale(1.25)}
.slides-dots button:focus-visible{outline:2px solid var(--bright);outline-offset:3px}

.slides.can-open .slides-view img{cursor:pointer}


.lightbox{
  position:fixed;inset:0;padding:0;border:0;background:transparent;
  width:100vw;max-width:100vw;height:100dvh;max-height:100dvh;overflow:hidden;
}
.lightbox::backdrop{background:rgba(8,8,10,.95)}
.lightbox-view{
  display:flex;width:100%;height:100%;
  overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;
}
.lightbox-view::-webkit-scrollbar{display:none}
.lightbox-view img{
  width:100vw;flex:none;height:100%;object-fit:contain;scroll-snap-align:center;
  padding:60px 16px 76px;box-sizing:border-box;
}
.lightbox-prev{left:18px}
.lightbox-next{right:18px}
.lightbox-dots{
  position:absolute;bottom:24px;left:50%;transform:translateX(-50%);margin:0;
}

.cta{display:inline-block;margin:22px 0 0;line-height:0;border-bottom:0}
/* Google's artwork, used unmodified as their brand terms require. The empty space around the
   button is the clear space they mandate, baked into the file — do not crop it out. */
.cta img{width:200px;height:auto;display:block;transition:opacity var(--t)}
.gamehead .cta{flex:none;margin:0 0 0 auto}
.gamehead .cta img{width:150px}
.cta:hover img{opacity:.86}
.cta:focus-visible{border-radius:4px}


code{word-break:break-word;overflow-wrap:anywhere}



/* One mobile block, and it lives at the END. It used to be five blocks scattered through the
   file, and two of them sat ABOVE the desktop rules they were meant to override: the store
   badge's indent lost on source order, the hero overlap lost on specificity. Both were dead on
   every phone, and the overlap was the worse kind of dead -- its `gap` half applied while its
   `margin-top` half did not, so the rule looked like it was working. */
@media (max-width:560px){
  .bar .row{padding:13px 0}
  main{padding:44px 0 72px}

  .games a{grid-template-columns:44px 1fr auto;gap:14px}
  .games em{display:none}
  .games .icon{width:44px;height:44px;border-radius:11px}

  .hero{height:min(38vh,260px)}
  .gamehead{flex-wrap:wrap;gap:14px}
  .gamehead img{width:66px;height:66px;border-radius:16px}
  /* main.under-hero, matching the desktop selector, or the three-part one above wins. */
  main.under-hero .gamehead{margin-top:-44px}
  /* 80px = the mobile icon (66) plus the mobile gap (14), so the badge sits under the title.
     It read 92px, which was the desktop icon plus gap from two sizes ago. */
  .gamehead .cta{margin:14px 0 0 80px}

  .slides-nav{display:none}
  .lightbox-prev,.lightbox-next{display:none}
  .lightbox-view img{padding:56px 8px 68px}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none!important;animation:none!important}
  .slides-view,.lightbox-view{scroll-behavior:auto}
}