:root {
  --sky-top:   #8FDCFA;
  --sky-bot:   #5FC4F2;
  --ink:       #0C3550;
  --ink-soft:  #2F6180;
  --card:      #FFFFFF;
  --gold:      #FAC74D;
  --gold-dk:   #D89A2E;
  --green:     #8CCC6B;
  --green-dk:  #6BA84D;
  --green-dpr: #46802F;

  --round: 26px;

  /* Studio grid = the phone launch card's grid (official branding, art-source/tools/brand_kit.py):
     one cell is 210 card-px per lock-up, i.e. 0.18588 x the lock-up image's width, line 4/210 of a cell,
     a vertical line through the page centre. --lk is the homepage lock-up's width; every page uses the
     same cell so the wash looks identical site-wide. */
  --lk: min(600px, calc(100vw - 2.8rem));
  --cell: calc(var(--lk) * 0.18588);
  --gline: max(1px, calc(var(--cell) * 0.019));
  --lift:
    0 2px 0 rgba(12,53,80,.10),
    0 10px 20px -6px rgba(12,53,80,.22),
    0 28px 44px -20px rgba(12,53,80,.30);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--ink);
  background: linear-gradient(180deg, var(--sky-top) 0%, var(--sky-bot) 100%) fixed;
  font-family: ui-rounded, "SF Pro Rounded", "Hiragino Maru Gothic ProN",
               system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* Faint grid wash — the studio mark at page scale, kept almost subliminal. */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.30) var(--gline), transparent var(--gline)),
    linear-gradient(90deg, rgba(255,255,255,.30) var(--gline), transparent var(--gline));
  background-size: var(--cell) var(--cell);
  /* A vertical line through the page centre, as on the launch card: the tile's left edge (where the
     line is drawn) sits on the centre — 50% centres the tile, + half a cell moves its edge there. */
  background-position: calc(50% + var(--cell) / 2) 0;
  mask-image: radial-gradient(120% 85% at 50% 0%, #000 20%, transparent 78%);
  -webkit-mask-image: radial-gradient(120% 85% at 50% 0%, #000 20%, transparent 78%);
}
/* Homepage: like the card, the lock-up sits mid-cell vertically — horizontal lines half a cell above
   and below its centre. Centre = image top (~116 px under the nav, measured 113-119 across widths)
   + 0.26864 x --lk (image height 0.54614 x width, block centre at 49.19 % of it). */
body.home::before {
  background-position: calc(50% + var(--cell) / 2) calc(116px + var(--lk) * .26864 + var(--cell) / 2);
}

.wrap {
  position: relative;
  max-width: 44rem;
  margin: 0 auto;
  padding: 0 1.4rem;
}

/* ---------- nav ---------- */
/* The nav is an "island": a floating frosted pill rather than a bar welded to the
   top of the page. It works here because the background is a sky gradient with a
   grid wash — a translucent panel over that reads as depth, where an opaque bar
   would just cut the sky in half.
   Sticky rather than fixed, so it scrolls with the page for a moment and then
   parks: fixed would overlap the hero wordmark immediately on short screens. */
.nav {
  position: sticky;
  top: .85rem;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* A real floor, not a token one. space-between only distributes SLACK, so once the
     brand and the links nearly fill the pill there is nothing left to distribute and
     the wordmark ends up touching the first link. This keeps them apart. */
  gap: 1.6rem;
  margin: 1.1rem 0 .25rem;
  padding: .5rem .6rem .5rem .72rem;
  border-radius: 999px;
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(255,255,255,.75);
  /* Lighter than --lift. The island should hover just off the page, not loom. */
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 2px 6px -1px rgba(12,53,80,.10),
    0 14px 28px -12px rgba(12,53,80,.28);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
}
/* Small brand lock-up on the left. The hero repeats the wordmark at full size
   just below; that is the convention rather than a duplication bug — the nav
   mark is what stays with you once the hero has scrolled away. */
.brand {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  /* Never break the studio name across two lines — that turns the island into a
     slab and reads as a layout bug rather than a wordmark. The breakpoints below
     shrink the type instead, which is the honest way to make it fit. */
  white-space: nowrap;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--ink);
  border-bottom: 0;
}
.brand .glyph { font-size: 1.55rem; margin: 0; transform: none; }
.nav ul {
  display: flex;
  flex: 0 0 auto;
  white-space: nowrap;
  gap: .35rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav ul a {
  display: block;
  padding: .42rem .78rem;
  border-radius: 999px;
  border-bottom: 0;
  font-size: .95rem;
  font-weight: 700;
  color: var(--ink);
}
.nav ul a:hover { background: rgba(255,255,255,.72); border-bottom: 0; }
/* The current page is marked by a solid pill, so you can see where you are without
   reading the labels. aria-current already says it; this is the visual half. */
.nav ul a[aria-current="page"] {
  background: #fff;
  box-shadow: 0 1px 2px rgba(12,53,80,.14);
}

/* The island stays a single row on phones rather than stacking. A two-line nav
   turns the pill into a slab and costs a third of the first screen; keeping the row
   and shrinking the type keeps it reading as one object. Everything below is
   proportional, not a separate layout. */
/* The squeeze starts long before phone widths. Between roughly 46rem and 34rem the
   pill is still wide but the brand and links have grown into each other, so the
   wordmark steps down here rather than waiting for a phone breakpoint. */
@media (max-width: 46rem) {
  .nav { gap: 1.1rem; padding: .46rem .5rem .46rem .66rem; }
  .brand { font-size: .96rem; gap: .42rem; }
  .brand .glyph { font-size: 1.42rem; }
  .nav ul a { padding: .4rem .68rem; font-size: .92rem; }
}

@media (max-width: 34rem) {
  .nav {
    gap: .5rem;
    padding: .42rem .42rem .42rem .58rem;
  }
  .brand { font-size: .92rem; gap: .38rem; }
  .brand .glyph { font-size: 1.32rem; }
  .nav ul { gap: .12rem; }
  .nav ul a { padding: .36rem .55rem; font-size: .88rem; }
}

/* Narrowest phones: the wordmark STAYS. It is the studio's name and it belongs in
   the corner at every width — shrinking the type is the right trade, hiding it is not. */
@media (max-width: 26rem) {
  .nav { gap: .35rem; padding: .38rem .38rem .38rem .5rem; }
  .brand { font-size: .8rem; gap: .3rem; }
  .brand .glyph { font-size: 1.12rem; }
  .nav ul a { padding: .32rem .42rem; font-size: .8rem; }
}

/* 360–384px (most Android phones). Browsers without SF Pro Rounded fall back to a
   wider rounded face, and at the 26rem sizes "Contact" ran into the pill's edge. */
@media (max-width: 24rem) {
  .nav { gap: .28rem; padding: .36rem .32rem .36rem .46rem; }
  .brand { font-size: .76rem; gap: .28rem; }
  .brand .glyph { font-size: 1.05rem; }
  .nav ul { gap: 0; }
  .nav ul a { padding: .3rem .36rem; font-size: .76rem; }
}

/* 320px — the narrowest phones still in use (iPhone SE 1st gen and similar). At the
   sizes above the row needs ~316px against ~292px of usable width, so it would
   overflow the pill rather than wrap. One more step down fixes it; nothing is
   hidden, the type just gets smaller. */
@media (max-width: 21rem) {
  .nav { gap: .2rem; padding: .32rem .26rem .32rem .38rem; }
  .brand { font-size: .68rem; gap: .22rem; }
  .brand .glyph { font-size: .95rem; }
  .nav ul a { padding: .28rem .28rem; font-size: .7rem; }
}

/* ---------- masthead ---------- */
header { padding: 2.6rem 0 3.25rem; text-align: center; }

/* Anchored sections must clear the top of the viewport when jumped to. */
section[id] { scroll-margin-top: 1.5rem; }

/* Glyph badge — above the wordmark, but shifted to sit over the gap between
   "Solo" and "Games" rather than the centre of the box. Those differ because
   "Games" is the wider word, so a plain centre lands right of the word space.
   Inherits the title's clamped size so its em units and the nudge track it. */
.glyph {
  position: relative;
  display: grid;
  width: max-content;
  font-size: clamp(1.85rem, 9.1vw, 4.05rem);
  /* Centred now that the wordmark sits on a single line. The old -.52em nudge existed
     to centre the badge over the gap between "Solo" and "Games" when the title broke
     across two lines; with one line there is no gap to sit over. */
  transform: none;
  grid-template-columns: repeat(2, .35em);
  grid-template-rows: repeat(2, .35em);
  gap: .088em;
  margin: 0 auto .3em;
  padding: .195em;
  border-radius: .3em;
  background: linear-gradient(165deg, #FFFFFF, #E8F5FC);
  box-shadow:
    0 .035em 0 rgba(12,53,80,.14),
    0 .13em .22em -.08em rgba(12,53,80,.34);
  overflow: hidden;
}
.glyph::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 48%;
  background: linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,0));
  pointer-events: none;
}
.glyph i {
  position: relative;
  display: block;
  border-radius: .075em;
  background: #D9E9F2;
  box-shadow: inset 0 -.025em 0 rgba(12,53,80,.10);
}
.glyph i:nth-child(1) { background: var(--green); box-shadow: inset 0 -.035em 0 var(--green-dk); }
.glyph i:nth-child(4) { background: var(--gold);  box-shadow: inset 0 -.035em 0 var(--gold-dk); }

/* Wordmark: white fill, deep-green outline offset down-right, exactly the
   Outline(2,-2) treatment the game uses on its own titles. */
h1 {
  margin: 0;
  /* Sized to keep "Solo Games Studio" on ONE line at every width. The cap is set by
     the container: .wrap is 44rem with 1.4rem padding either side, so roughly 659px
     of usable width, and this string runs about 9.4x the font size in this face.
     4.05rem lands near 610px and leaves the stroke room to breathe.
     ⚠️ If the wordmark ever changes, re-derive the cap — a longer name will wrap
     again and nowrap will push it out of the container instead. */
  font-size: clamp(1.85rem, 9.1vw, 4.05rem);
  white-space: nowrap;
  font-weight: 800;
  /* Open, not tight: a thick outline swells inward, so tracking that looks
     fine on plain text closes the counters here and the letters merge. */
  letter-spacing: .01em;
  text-indent: .01em;   /* letter-spacing also trails the last glyph, which drags centred text left */
  line-height: 1.05;
  color: #FFFFFF;
  -webkit-text-stroke: 6px var(--green-dpr);
  paint-order: stroke fill;
  text-shadow: 3px 3px 0 var(--green-dk);
}
/* Homepage lock-up (an image: the studio's official letters, not live text). The image carries a soft
   halo margin and its lock-up block sits 0.45 % left of the image centre (the shadow offset pads the
   right), so it is nudged right to centre the block itself. */
h1.lockup {
  width: var(--lk);
  margin: 0 auto;
  line-height: 0;
  -webkit-text-stroke: 0;
  text-shadow: none;
}
h1.lockup img { display: block; width: 100%; height: auto; transform: translateX(.45%); }

.tagline {
  margin: 1.15rem auto 0;
  max-width: 22rem;
  color: var(--ink);
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: -.005em;
  text-wrap: balance;
}

/* ---------- games ---------- */
.eyebrow {
  margin: 0 0 1rem;
  padding-left: .2rem;
  color: rgba(12,53,80,.62);
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

/* The card look is shared by the game card and the about panel; only the game
   card lays its contents out in a row. */
.game, .panel {
  position: relative;
  padding: 1.5rem;
  background: var(--card);
  border-radius: var(--round);
  box-shadow: var(--lift);
  overflow: hidden;
}
.game {
  display: flex;
  gap: 1.4rem;
  align-items: center;
}
/* gloss along the top edge — the same treatment as the game's buttons */
.game::after, .panel::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 46%;
  background: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,0));
  pointer-events: none;
}
.game > *, .panel > * { position: relative; z-index: 1; }

/* The real app icon, filling the box the CSS placeholder tile used to occupy.
   Width and height are both set so the space is reserved before the PNG loads —
   otherwise the card reflows and the text jumps. */
.icon {
  width: 104px; height: 104px;
  flex: none;
  display: block;
  border-radius: 23px;
  box-shadow: 0 4px 12px -2px rgba(12,53,80,.28);
}

/* ---------- screenshots ---------- */
/* Served at 2x the display width and scaled down, so they stay sharp on the
   retina screens most visitors — and every App Review machine — are using. */
.shots {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.1rem;
  margin-top: 1.3rem;
}
.shots img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
  box-shadow: var(--lift);
}

.game h2 {
  margin: 0 0 .35rem;
  font-size: 1.42rem;
  font-weight: 800;
  letter-spacing: -.015em;
}
.game p {
  margin: 0 0 .95rem;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.55;
}
.status {
  display: inline-block;
  padding: .34rem .8rem;
  border-radius: 999px;
  background: var(--gold);
  color: #4B3606;
  font-size: .8rem;
  font-weight: 800;
  box-shadow: 0 2px 0 var(--gold-dk);
}

/* ---------- released game card ---------- */
/* The pre-launch card put the icon beside the copy. A released game earns the
   centred treatment: icon first, then the name, then somewhere to go. The old
   side-by-side version is kept at snippets/in-the-works-card.html for the next game. */
.game--hero {
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
  padding: 2rem 1.6rem 1.6rem;
}
.game--hero .icon {
  width: 132px; height: 132px;
  border-radius: 29px;
  margin-bottom: 1.1rem;
}
.game--hero h2 { font-size: 1.72rem; margin-bottom: .5rem; }
.game--hero p { max-width: 34rem; margin-bottom: 1.5rem; }

/* Store badges, side by side and centred. No panel behind them — the reference
   layouts all sit the badges directly on the card, and a box around trademarked
   artwork starts to look like a frame Google and Apple did not approve. */
.stores {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  /* ⚠️ flex-start, not center. The App Store badge carries a label underneath, so its
     column is taller — centring the columns would push that badge UP and leave the two
     sitting at different heights. Aligning the tops puts the badges themselves on one
     level and lets the label hang below. */
  align-items: flex-start;
  /* Google's badge guidelines require clear space around the badge of at least a
     quarter of its height — 12px at our 48px. 1.15rem (18.4px) clears that with
     room, and keeps the two badges from crowding each other. */
  gap: 1.15rem;
  margin-top: .3rem;
}
.badge {
  position: relative;
  display: inline-flex;
  border-bottom: 0;
  line-height: 0;
}
/* Both badges are now the official SVGs, straight from Google's brand page and
   Apple's marketing toolbox. Neither carries transparent padding, so a single shared
   height renders them at matching visual size — which the earlier PNG could not do,
   because Google's web PNG bakes in a third of its height as clear space. */
.badge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .62rem;
  border-bottom: 0;
  line-height: 0;
}
.badge img { display: block; height: 48px; width: auto; }
.badge:not(.badge--soon):hover { transform: translateY(-1px); border-bottom: 0; }

/* Not shipped yet, so this one is NOT a link — Apple's guidelines expect their badge
   to open the app's store page, and one that goes nowhere is a broken promise. The
   label below says why; the badge itself stays unaltered, because recolouring or
   fading trademarked artwork is exactly what the guidelines forbid. */
.badge--soon { cursor: default; }
/* Quiet on purpose: it is a footnote about availability, not a badge of its own.
   Anything louder competes with the two store marks it sits under. */
.badge-flag {
  padding: .08rem .46rem;
  border-radius: 999px;
  background: rgba(140,204,107,.22);
  color: #587A44;
  font-size: .64rem;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: .03em;
  white-space: nowrap;
}

@media (max-width: 32rem) {
  .game { flex-direction: column; align-items: flex-start; gap: 1.15rem; }
  .game--hero { align-items: center; }
  .badge img { height: 42px; }
}

/* ---------- about ---------- */
.about { margin-top: 3.1rem; }
.panel h2 {
  margin: 0 0 .6rem;
  font-size: 1.42rem;
  font-weight: 800;
  letter-spacing: -.015em;
}
.panel p {
  margin: 0 0 .85rem;
  color: var(--ink-soft);
  font-size: 1rem;
  line-height: 1.6;
}
.panel p:last-child { margin-bottom: 0; }
.panel strong { color: var(--ink); font-weight: 800; }

/* ---------- footer ---------- */
/* Full-bleed: the footer sits OUTSIDE .wrap, so it is not held to the 44rem reading
   column. The nav island is that narrow because it runs alongside the content; the
   footer closes the page and takes the whole width, which is also the only way four
   columns fit without crushing the labels. */
footer {
  margin-top: 3.4rem;
  padding: 0 1.4rem 2.8rem;
}

/* Same frosted material as the nav pill — identical glass, border and shadow. Only the
   radius and the padding differ, because a 999px pill at this width reads as a lozenge. */
.fbox {
  max-width: 72rem;
  margin: 0 auto;
  padding: 2.1rem 2.4rem 1.35rem;
  border-radius: var(--round);
  background: rgba(255,255,255,.58);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow:
    0 1px 0 rgba(255,255,255,.55) inset,
    0 2px 6px -1px rgba(12,53,80,.10),
    0 14px 28px -12px rgba(12,53,80,.28);
  backdrop-filter: blur(14px) saturate(140%);
  -webkit-backdrop-filter: blur(14px) saturate(140%);
  color: var(--ink-soft);
  font-size: .93rem;
  font-weight: 600;
}

/* Six tracks, four of them used. Columns 2 and 5 hold nothing — they are pure elastic
   spacers, which is the only way to give one gap a different width from another (grid has
   a single `column-gap` and no per-gap control). The two link lists sit side by side in
   tracks 3 and 4 with just the base gap between them, while the brand and the store column
   are held out to the edges by the 2fr / 1fr spacers on either side. */
.fgrid {
  display: grid;
  grid-template-columns: max-content 2fr max-content max-content 1fr max-content;
  /* The column gap is what separates Studio from Legal — the two lists sit in adjacent
     tracks, so nothing else is between them. The elastic spacers absorb the change, which
     is why widening it here does not push Legal across the box. */
  gap: 2rem 3.6rem;
  align-items: start;
  padding-bottom: 1.6rem;
}
/* Scoped to the four-column layout. An nth-child selector outbids .fbrand on specificity,
   so if these placements were unscoped they would beat the stacked breakpoints' own rules
   and the brand would never get its full-width row back. */
@media (min-width: 54.01rem) {
  .fgrid > :nth-child(1) { grid-column: 1; }   /* brand   */
  .fgrid > :nth-child(2) { grid-column: 3; }   /* Studio  */
  .fgrid > :nth-child(3) { grid-column: 4; }   /* Legal   */
  .fgrid > :nth-child(4) { grid-column: 6; }   /* stores  */
}
.fbrand .brand { margin-bottom: .6rem; }
.ftag {
  margin: 0;
  font-size: .95rem;
  font-weight: 600;
  color: var(--ink-soft);
}

/* Social profiles under the tagline. Same muted ink as the footer links, darker on hover;
   each icon sits in a 32px hit area so a thumb can find it. */
.fsocial {
  margin: .9rem 0 0 -.4rem;
  padding: 0;
  list-style: none;
  display: flex;
  gap: .35rem;
}
.fsocial a {
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-bottom: 0;
  border-radius: 999px;
  color: var(--ink-soft);
  transition: color .15s ease, background-color .15s ease;
}
.fsocial a:hover { color: var(--ink); background: rgba(255,255,255,.7); border-bottom: 0; }
.fsocial a:focus-visible { outline: 3px solid var(--ink); outline-offset: 1px; }

/* Column heading. A <p>, not an <h*>: the nav landmarks are already labelled for screen
   readers, and four more headings on every page would wreck the document outline of the
   legal pages, which are read by structure. */
.fh {
  margin: 0 0 .8rem;
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink);
}
.fcol ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .5rem;
}
/* Footer links drop the site-wide underline. Nine rules stacked in columns read as a
   grid of stripes rather than as lists; hover carries the affordance instead. */
.fcol a {
  border-bottom: 0;
  font-weight: 600;
  color: var(--ink-soft);
  transition: color .15s ease;
}
.fcol a:hover { color: var(--ink); border-bottom: 0; }

/* Store badges, same pattern as the hero card: each badge is its own column so the
   "In progress" label sits under the App Store one without shifting the other.
   ⚠️ Height is the only thing sizing these — `width: auto` keeps the official artwork
   undistorted, and 36px clears Google's 28px minimum with room to spare. Google's badge
   stays the wider of the two, which their guidelines require. */
.fstores {
  display: grid;
  justify-items: start;
  gap: .55rem;
}
.fbadge {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .38rem;
  line-height: 0;
  border-bottom: 0;
}
.fbadge:hover { border-bottom: 0; }
.fbadge img { display: block; height: 36px; width: auto; }
.fbadge--soon { cursor: default; }

/* ---- bottom bar ---- */
.fbar {
  display: flex;
  flex-wrap: wrap;
  gap: 1.1rem 2rem;
  align-items: flex-end;
  justify-content: space-between;
  padding-top: 1.3rem;
  border-top: 1px solid rgba(12,53,80,.14);
}
/* Let the meta block shrink rather than push the badge onto its own line. */
.fmeta { flex: 1 1 18rem; min-width: 0; }
.fcopy {
  margin: 0 0 .3rem;
  font-size: .88rem;
  font-weight: 700;
  color: var(--ink-soft);
}
/* The entity line. Apple's organisation enrolment checks that the website is
   associated with the legal entity being enrolled, and nothing else on the site
   names it — the brand is all a visitor otherwise sees. */
.legal {
  margin: 0;
  font-size: .84rem;
  font-weight: 600;
  color: rgba(12,53,80,.66);
}
/* The entity name never splits across lines ("Anyphorel" / "LLC." read as two things). */
.nowrap { white-space: nowrap; }

/* Article 27 representative badge. Deliberately quiet: it is a legal marker, not
   a selling point, so it sits at the end of the bottom bar at a size that reads as a
   footer mark rather than a trust seal.
   ⚠️ The image is HOT-LINKED from Euverify, as their badge guidance proposes. That
   makes it the site's only third-party request, so every visitor's IP reaches them —
   which is why Euverify is named as a website-visitor recipient in the privacy policy
   and the ROPA. If that entry is ever removed, self-host the PNG instead (a copy is
   kept at public/img/gdpr-representative.png). */
.gdpr-badge {
  margin: 0 0 0 auto;   /* auto: stays at the right edge on desktop even if it wraps */
  line-height: 0;
  text-align: right;
}
.gdpr-badge a { border-bottom: 0; }
.gdpr-badge img {
  width: 150px;
  height: auto;
  opacity: .82;
  transition: opacity .15s ease;
}
.gdpr-badge img:hover { opacity: 1; }

/* "Compliant under Article 27" — Euverify's own wording, and the scope matters: it
   says compliant UNDER ARTICLE 27, not compliant generally. Clause 12.2 of the
   representation agreement disclaims the broader reading, so the qualifier stays. */
.gdpr-status {
  display: inline-flex;
  align-items: center;
  gap: .32rem;
  margin-top: .3rem;
  color: #1f9d55;
  font-size: .78rem;
  font-weight: 700;
  line-height: 1.3;
}

/* Four columns need roughly 46rem of content width. Below that the brand takes a row of
   its own and the three link columns share the next one; on phones everything stacks. */
@media (max-width: 54rem) {
  .fgrid {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.8rem 1.6rem;
  }
  .fbrand { grid-column: 1 / -1; }
}
@media (max-width: 36rem) {
  .fbox { padding: 1.7rem 1.4rem 1.2rem; }
  .fgrid { grid-template-columns: 1fr 1fr; gap: 1.6rem 1.4rem; }
  .fbrand, .fget { grid-column: 1 / -1; }
  .fstores { grid-auto-flow: column; justify-content: start; gap: .9rem; align-items: start; }
  .fbar { align-items: flex-start; }
  .legal { font-size: .78rem; }   /* fits the whole entity line on one row on a phone */
  .gdpr-badge { margin-left: 0; text-align: left; }   /* stacked: lines up with the text above it */
}
@media (max-width: 23rem) {
  .fgrid { grid-template-columns: 1fr; }
  .fbrand, .fget { grid-column: auto; }
  .fbadge img { height: 33px; }
}

/* The © glyph is drawn larger than the cap height in most faces, so at the
   same size it looms over the text beside it. Scaled down to sit level. */
.c {
  font-size: 1.15em;
  font-weight: 800;
}
a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 2px solid rgba(12,53,80,.22);
  padding-bottom: 1px;
}
a:hover { border-bottom-color: var(--gold-dk); }
a:focus-visible {
  outline: 3px solid var(--ink);
  outline-offset: 3px;
  border-radius: 4px;
  border-bottom-color: transparent;
}

/* ---------- multi-page additions ---------- */

/* Current page in the nav. Marked with aria-current in the markup so the state is
   announced, not only coloured — colour alone is not an accessible indicator. */
.nav ul a[aria-current="page"] {
  background: rgba(255,255,255,.72);
  box-shadow: 0 2px 0 rgba(12,53,80,.10);
}

/* Inner pages lead with a heading instead of the full hero, so the masthead does
   not push the actual content below the fold on every one of them. */
.pagehead {
  padding: 2.4rem 0 1.9rem;
}
.pagehead h1 {
  margin: 0;
  font-size: clamp(1.9rem, 7vw, 3rem);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1.12;
  color: #FFFFFF;
  /* Long titles ("Advertising & Analytics Partners") must wrap on phones; the hero's
     nowrap is only right for the short studio wordmark. Balance keeps the lines even. */
  white-space: normal;
  text-wrap: balance;
  overflow-wrap: anywhere;
  /* Outline drawn with round text-shadows, not -webkit-text-stroke: the stroke has
     mitred joins that shoot spikes off sharp corners (A, &, d) at this size. */
  -webkit-text-stroke: 0;
  text-shadow:
    2px 0 0 var(--green-dpr), -2px 0 0 var(--green-dpr), 0 2px 0 var(--green-dpr), 0 -2px 0 var(--green-dpr),
    1.4px 1.4px 0 var(--green-dpr), -1.4px 1.4px 0 var(--green-dpr), 1.4px -1.4px 0 var(--green-dpr), -1.4px -1.4px 0 var(--green-dpr),
    1.85px .77px 0 var(--green-dpr), -1.85px .77px 0 var(--green-dpr), 1.85px -.77px 0 var(--green-dpr), -1.85px -.77px 0 var(--green-dpr),
    .77px 1.85px 0 var(--green-dpr), -.77px 1.85px 0 var(--green-dpr), .77px -1.85px 0 var(--green-dpr), -.77px -1.85px 0 var(--green-dpr),
    3.5px 3.5px 0 var(--green-dk);
}

/* Postal address. `address` is italic by default in every browser. */
.addr {
  font-style: normal;
  margin: 0;
  color: var(--ink-soft);
  line-height: 1.65;
}
.addr strong { color: var(--ink); font-weight: 800; }

/* Closing line on the About page. Set apart with a rule and centred so it reads as
   a sign-off rather than another body paragraph. */
.motto {
  margin: 1.5rem 0 0;
  padding-top: 1.3rem;
  border-top: 2px solid rgba(12,53,80,.12);
  text-align: center;
  font-size: 1.18rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--ink);
}

/* ---------- legal documents ---------- */
/* Long-form text sets narrower and looser than the marketing pages: these are read
   in sequence rather than scanned, and a legal clause is punishing at full width. */
/* Only the document column narrows. Narrowing the whole .wrap also squeezed the nav
   island and the page title, so the legal pages' header no longer matched the rest. */
.legal-doc main, .legal-doc .pagehead { max-width: 38rem; margin-left: auto; margin-right: auto; }
.legal-doc .panel { padding: 1.9rem 1.8rem; }
.legal-doc main h2 {
  margin: 2.1rem 0 .6rem;
  font-size: 1.16rem;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--ink);
}
.legal-doc main h2:first-of-type { margin-top: 0; }
.legal-doc main h3 {
  margin: 1.3rem 0 .45rem;
  font-size: 1rem;
  font-weight: 800;
  color: var(--ink);
}
.legal-doc main p, .legal-doc main li {
  color: var(--ink-soft);
  font-size: .97rem;
  line-height: 1.68;
}
.legal-doc main p { margin: 0 0 .8rem; }
.legal-doc main ul, .legal-doc main ol { margin: 0 0 .9rem; padding-left: 1.25rem; }
.legal-doc main li { margin-bottom: .35rem; }
.legal-doc main strong { color: var(--ink); font-weight: 800; }
.updated {
  margin: 0 0 1.6rem;
  font-size: .87rem;
  font-weight: 700;
  color: rgba(12,53,80,.6);
}
/* Wide tables must scroll inside their own box rather than widening the page. */
.tablewrap { overflow-x: auto; margin: 0 0 1.1rem; }
.legal-doc main table { border-collapse: collapse; width: 100%; font-size: .9rem; }
.legal-doc main th, .legal-doc main td {
  padding: .5rem .6rem;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid rgba(12,53,80,.12);
  color: var(--ink-soft);
}
.legal-doc main th { color: var(--ink); font-weight: 800; white-space: nowrap; }

/* Callout pointing at the separate partners page. The partner list is kept off the policy so
   that adding or dropping an ad network does not force a re-dated legal document — so the
   pointer has to read as part of the disclosure, not as a footnote. */
.partners-cta {
  margin: 0 0 1.1rem;
  padding: .85rem 1rem;
  border-left: 3px solid var(--sky-bot);
  background: rgba(95,196,242,.09);
  border-radius: 0 10px 10px 0;
  font-size: .93rem;
}
.partners-cta a { font-weight: 800; }


/* ---------- game page (/toucandoku) ---------- */
/* The hero card is followed by panels, so the panels need the same gap the home page
   uses between its sections. */
.gamepage .game--hero h2 { font-size: 1.5rem; text-wrap: balance; }
.rules, .facts {
  margin: 0 0 1rem;
  padding-left: 1.3rem;
  color: var(--ink-soft);
  line-height: 1.6;
}
.rules li, .facts li { margin-bottom: .55rem; }
.facts { padding-left: 1.1rem; margin-bottom: 0; }
.facts li:last-child { margin-bottom: 0; }

/* Four screenshots side by side on a laptop; on a phone they become a strip that
   scrolls sideways INSIDE its own box, so the page itself never scrolls horizontally. */
.shotstrip {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(150px, 1fr);
  gap: 1rem;
  margin-top: 2rem;
  padding: .3rem .2rem 1.1rem;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}
.shotstrip img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 18px;
  box-shadow: var(--lift);
  scroll-snap-align: start;
}
@media (max-width: 560px) {
  .shotstrip { grid-auto-columns: 62%; }
}

.faq h3 {
  margin: 1.2rem 0 .35rem;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--ink);
}
.faq h3:first-child { margin-top: 0; }

.cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .9rem 1.1rem;
  margin: 2.4rem 0 .6rem;
}
.cta .badge img { height: 56px; }

/* "More about the game" link under the home page's hero text. */
.more {
  display: inline-block;
  margin: -.6rem 0 1.3rem;
  font-weight: 800;
}