@font-face { font-family: "Gloock"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/gloock-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/figtree-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 600; font-display: swap; src: url(/fonts/figtree-latin-600-normal.woff2) format("woff2"); }
@font-face { font-family: "Courier Prime"; font-style: normal; font-weight: 400; font-display: swap; src: url(/fonts/courier-prime-latin-400-normal.woff2) format("woff2"); }
@font-face { font-family: "Courier Prime"; font-style: normal; font-weight: 700; font-display: swap; src: url(/fonts/courier-prime-latin-700-normal.woff2) format("woff2"); }

:root {
  /* Idea: a drawing board. Warm paper, thin ink lines, one vermilion pencil marks the part you point at. */
  --paper: #f0e8d6;
  --ink: #1d1712;
  --muted: #5f5448;
  --rule: #cfc3aa;
  --accent: #d93a1c;
  --on-accent: #fff7ec;
  --panel: #e8dec7;
  --sheet: #f8f2e4;
  --grid: #e9dfc9;
  --grid-major: #dccfb3;
  --wash: rgba(217, 58, 28, .12);
  --font-display: "Gloock", "Iowan Old Style", Georgia, serif;
  --font-body: "Figtree", "Helvetica Neue", Arial, sans-serif;
  --font-type: "Courier Prime", "Courier New", ui-monospace, monospace;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #17120e;
    --ink: #f1e8d6;
    --muted: #b3a690;
    --rule: #3a3025;
    --accent: #ff5a38;
    --on-accent: #1d0f08;
    --panel: #211a14;
    --sheet: #1d1712;
    --grid: #261e17;
    --grid-major: #31271d;
    --wash: rgba(255, 90, 56, .16);
    color-scheme: dark;
  }
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: 1.0625rem; line-height: 1.55;
}
.wrap { max-width: 80rem; margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 2.5rem); }
a { color: inherit; }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
p { margin: 0; max-width: 60ch; }
h1, h2, h3 { font-family: var(--font-display); font-weight: 400; margin: 0; text-wrap: balance; letter-spacing: -0.01em; }
h2 { font-size: clamp(2rem, 5vw, 3.25rem); line-height: 1.05; }
section { padding: clamp(3rem, 8vw, 6rem) 0; }

/* top bar */
.bar { display: flex; justify-content: space-between; align-items: center; gap: .5rem 1.5rem; flex-wrap: wrap; padding: 1.25rem 0; border-bottom: 2px solid var(--ink); }
.bar strong { font-family: var(--font-display); font-weight: 400; font-size: 1.5rem; }
.bar span { color: var(--muted); font-size: .9375rem; }
.bar .logo { font-family: var(--font-display); font-size: 1.5rem; text-decoration: none; }
.bar nav { display: flex; align-items: center; gap: .75rem 1.5rem; font-size: .9375rem; }
.bar nav a { text-decoration: none; }
.bar nav a:hover { text-decoration: underline; }
.bar .pill { background: var(--ink); color: var(--paper); font-weight: 600; padding: .5rem 1rem; border-radius: 999px; }
.bar .pill:hover { text-decoration: none; }
@media (max-width: 24.99rem) { .bar { gap: .5rem; } .bar nav { gap: .75rem; } }
.hero-label { margin-bottom: 1.25rem; }

/* site pages built from the canvas: phone layout below 64rem, desktop above */
.v-dk { display: none; }
@media (min-width: 64rem) { .v-ph { display: none; } .v-dk { display: block; } }

/* hero */
.hero { padding: clamp(2.5rem, 7vw, 5rem) 0 clamp(2rem, 5vw, 3.5rem); }
.hero-grid { display: grid; gap: 2rem; grid-template-columns: 1fr; align-items: end; }
.hero h1 { font-size: clamp(2.9rem, 9vw, 6.5rem); line-height: .96; letter-spacing: -0.025em; max-width: 12ch; }
.hero p.sub { font-size: clamp(1.125rem, 2.2vw, 1.375rem); color: var(--muted); max-width: 30ch; }
.cta { margin-top: 1.75rem; display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.5rem; }
.btn { display: inline-block; background: var(--accent); color: var(--on-accent); font-weight: 600; text-decoration: none; padding: .9rem 1.6rem; border-radius: 999px; box-shadow: 0 3px 0 var(--ink); transition: transform .12s, box-shadow .12s; }
.btn:hover { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.cta .addr { font-family: var(--font-type); font-size: 1rem; overflow-wrap: anywhere; }
@media (min-width: 56rem) { .hero-grid { grid-template-columns: 1.65fr 1fr; gap: 3rem; } .hero-side { padding-bottom: .6rem; } }

/* blueprint */
.bp { padding-top: clamp(1rem, 3vw, 2rem); }
.bp-head { display: flex; flex-direction: column; gap: .6rem; margin-bottom: clamp(1.75rem, 4vw, 2.75rem); }
.bp-label { font-family: var(--font-type); font-size: 1rem; color: var(--muted); display: flex; align-items: center; gap: .75rem; }
.bp-label::before { content: ""; width: 2.25rem; border-top: 1.5px solid var(--accent); }
.bp-grid { display: grid; gap: 2.25rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 68rem) { .bp-grid { grid-template-columns: minmax(0, 1fr) 19rem; gap: 3rem; } }

.sheet {
  margin: 0; position: relative; background: var(--sheet);
  border: 1.5px solid var(--ink);
  box-shadow: 7px 7px 0 -1.5px var(--panel), 7px 7px 0 0 var(--ink);
}
.drawing { display: block; width: 100%; height: auto; --k: 1; --hatch: url(#hatch); --solid: var(--ink); stroke: var(--ink); fill: none; stroke-width: calc(var(--k) * 1.25px); stroke-linecap: round; stroke-linejoin: round; }
.drawing text { stroke: none; fill: var(--ink); font-family: var(--font-type); }
.drawing .heavy { stroke-width: calc(var(--k) * 1.8px); }
.drawing .fine { stroke-width: calc(var(--k) * .8px); }
.drawing .pf { fill: var(--sheet); }
.drawing .fi { fill: var(--ink); stroke: none; }
.g-minor { stroke: var(--grid); stroke-width: .6px; }
.g-major { stroke: var(--grid-major); stroke-width: .8px; }
.hl { stroke: var(--ink); stroke-width: 1.1px; }
.hl-on { stroke: var(--accent); stroke-width: 1.3px; }
.mk { fill: var(--muted); stroke: none; }

.frame { stroke: var(--ink); }
.frame text { font-size: 12px; fill: var(--muted); text-anchor: middle; dominant-baseline: central; }
.dim { stroke: var(--muted); }
.dim text { fill: var(--muted); font-size: 15px; text-anchor: middle; }
.tb text.l { font-size: 11px; fill: var(--muted); }
.tb text.v { font-size: 15px; }
.tb text.name { font-family: var(--font-display); font-size: 27px; }
.detail-t { font-size: 15px; text-anchor: middle; }
.box-t { font-size: 15px; text-anchor: middle; dominant-baseline: central; }
.mark-t { font-size: 15px; font-weight: 700; }

/* parts and callouts */
.part, .base, .co { transition: opacity .25s ease; }
.part.on { stroke: var(--accent); --hatch: url(#hatch-on); --solid: var(--accent); }
.part.on .pf { fill: var(--wash); }
.part.on .fi { fill: var(--accent); }
.part.on text { fill: var(--accent); }
.part.on .heavy, .part.on { stroke-width: calc(var(--k) * 1.8px); }
.drawing.active .part:not(.on), .drawing.active .base, .drawing.active .co:not(.on) { opacity: .35; }

.co { cursor: pointer; outline: none; }
.co .ld { stroke: var(--ink); stroke-width: calc(var(--k) * .9px); }
.co .dot { fill: var(--ink); stroke: none; r: 3.5px; }
.co .bl { fill: var(--sheet); stroke: var(--ink); stroke-width: calc(var(--k) * 1.4px); r: 17px; }
.co .ring { fill: none; stroke: var(--accent); stroke-width: 2px; stroke-dasharray: 3 4; r: 23px; opacity: 0; }
.co .bl-n { font-family: var(--font-display); font-size: 19px; text-anchor: middle; dominant-baseline: central; }
.co .bl-t { font-size: 17px; font-weight: 700; dominant-baseline: central; }
.co .bl-t.end { text-anchor: end; }
.co.on .ld { stroke: var(--accent); stroke-width: calc(var(--k) * 1.4px); }
.co.on .dot { fill: var(--accent); }
.co.on .bl { fill: var(--accent); stroke: var(--accent); }
.co.on .bl-n { fill: var(--on-accent); }
.co.on .bl-t { fill: var(--accent); }
.co:focus-visible .ring { opacity: 1; }

/* parts list */
.parts { list-style: none; margin: 0; padding: 0; border-top: 1.5px solid var(--ink); display: grid; grid-template-columns: 1fr; }
.parts li { display: grid; grid-template-columns: 2.4rem 1fr; gap: .9rem; align-items: start; padding: .8rem .6rem .85rem 0; border-bottom: 1px dashed var(--rule); cursor: default; outline: none; transition: background-color .2s; }
.parts .pn { width: 2.1rem; height: 2.1rem; border-radius: 50%; border: 1.5px solid var(--ink); display: grid; place-items: center; font-family: var(--font-display); font-size: 1.1rem; line-height: 1; background: var(--paper); transition: background-color .2s, color .2s, border-color .2s; }
.parts h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.0625rem; letter-spacing: 0; line-height: 1.3; }
.parts p { color: var(--muted); font-size: .975rem; line-height: 1.45; margin-top: .1rem; }
.parts li.on { background: var(--wash); }
.parts li.on .pn { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.parts li:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
@media (min-width: 40rem) and (max-width: 67.99rem) {
  .parts { grid-template-columns: 1fr 1fr; column-gap: 2rem; }
}

/* narrow: numbers only */
@media (max-width: 39.99rem) {
  .drawing { --k: 1.9; }
  .drawing .bl-t, .drawing .tb, .drawing .frame, .drawing .dim text, .drawing .detail-t, .drawing .mark-t, .drawing .box-t { display: none; }
  .co .bl { r: 32px; }
  .co .ring { r: 40px; }
  .co .dot { r: 7px; }
  .co .bl-n { font-size: 34px; }
}

/* steps */
.steps { background: var(--panel); border-block: 2px solid var(--ink); }
.steps ol { list-style: none; margin: 2.5rem 0 0; padding: 0; display: grid; gap: 2rem; grid-template-columns: 1fr; }
.steps li { position: relative; padding-left: 4.25rem; }
.steps li::before { content: ""; position: absolute; left: 1.4rem; top: 3rem; bottom: -2rem; border-left: 2px dashed var(--ink); }
.steps li:last-child::before { display: none; }
.num { position: absolute; left: 0; top: 0; width: 2.9rem; height: 2.9rem; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; font-family: var(--font-display); font-size: 1.4rem; }
.steps h3 { font-size: 1.6rem; line-height: 1.15; }
.steps li p { margin-top: .4rem; color: var(--muted); }
@media (min-width: 52rem) {
  .steps ol { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; }
  .steps li { padding: 4.25rem 0 0; }
  .steps li::before { left: 3.2rem; right: -2.5rem; top: 1.4rem; bottom: auto; border-left: 0; border-top: 2px dashed var(--ink); }
}

/* what you get */
.get { border-bottom: 2px solid var(--ink); }
.get-list { margin-top: 2.5rem; display: grid; gap: 2rem 2.5rem; grid-template-columns: 1fr; }
.get-item { border-top: 2px solid var(--ink); padding-top: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.get-item h3 { font-size: 1.75rem; }
.get-item p { color: var(--muted); }
.get-item a { font-weight: 600; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .25em; }
@media (min-width: 52rem) { .get-list { grid-template-columns: repeat(3, 1fr); } }

/* audience */
.who-list { margin-top: 2.5rem; display: grid; gap: 0; grid-template-columns: 1fr; border-top: 1px solid var(--rule); }
.who-item { padding: 1.5rem 0; border-bottom: 1px solid var(--rule); }
.who-item h3 { font-size: 1.75rem; }
.who-item p { margin-top: .4rem; color: var(--muted); }
@media (min-width: 52rem) {
  .who-list { grid-template-columns: repeat(4, 1fr); border-top: 0; }
  .who-item h3 { font-size: 1.5rem; }
  .who-item { padding: 0 1.75rem 0 0; border-bottom: 0; }
  .who-item + .who-item { padding-left: 1.75rem; border-left: 1px solid var(--rule); }
}

/* contact */
.contact { background: var(--accent); color: var(--on-accent); }
.contact p { margin-top: 1rem; font-size: 1.25rem; }
.mail { display: inline-block; margin-top: 1.5rem; font-family: var(--font-display); font-size: clamp(1.45rem, 7.2vw, 4.25rem); line-height: 1.1; text-decoration-thickness: 3px; text-underline-offset: .15em; overflow-wrap: anywhere; }
.contact a:focus-visible { outline-color: currentColor; }
footer { padding: 1.5rem 0 2rem; color: var(--muted); font-size: .9375rem; }
footer .wrap { display: flex; justify-content: space-between; flex-wrap: wrap; gap: .5rem 1.5rem; }
footer nav { display: flex; flex-wrap: wrap; gap: .4rem 1.5rem; }
footer a { text-underline-offset: .2em; }
footer a:hover { color: var(--ink); }

/* draw-in on load (added by script only when motion is allowed) */
.drawin { stroke-dasharray: 1 1; stroke-dashoffset: 1; animation: draw .9s cubic-bezier(.65, 0, .35, 1) both; }
.fadein { animation: fade .6s ease both; }
@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .btn, .part, .base, .co, .parts li, .parts .pn { transition: none; }
  .drawin, .fadein { animation: none; stroke-dasharray: none; }
}

/* legal pages */
.bar a { text-decoration: none; }
.legal { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(3rem, 8vw, 6rem); }
.legal h1 { font-size: clamp(2.25rem, 6vw, 3.75rem); line-height: 1.05; }
.legal .lead { margin-top: 1rem; color: var(--muted); }
.legal h2 { font-size: clamp(1.4rem, 3vw, 1.85rem); margin-top: 2.75rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); }
.legal p, .legal ul { margin-top: .75rem; max-width: 65ch; }
.legal ul { padding-left: 1.25rem; }
.legal li + li { margin-top: .35rem; }
.legal dl { display: grid; grid-template-columns: minmax(0, 14rem) minmax(0, 1fr); gap: .75rem 2rem; margin: 2rem 0 0; max-width: 52rem; }
.legal dt { font-family: var(--font-type); color: var(--muted); }
.legal dd { margin: 0; }
@media (max-width: 39.99rem) { .legal dl { grid-template-columns: minmax(0, 1fr); gap: .15rem; } .legal dd { margin-bottom: .9rem; } }

/* ===== new home sections ===== */
svg { overflow: visible; }
.ic { flex: none; width: 2.5rem; height: 2.5rem; border-radius: .6rem; background: var(--wash); color: var(--accent); display: grid; place-items: center; }
.ic svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ic.big { width: 3rem; height: 3rem; border-radius: .75rem; }
.ic.big svg { width: 1.6rem; height: 1.6rem; }
.lead { margin-top: .9rem; font-size: clamp(1.125rem, 2vw, 1.3rem); color: var(--muted); max-width: 44ch; }
.sub-h { font-size: clamp(1.6rem, 3.4vw, 2.2rem); margin-top: clamp(3rem, 6vw, 4.5rem); }
.note { margin-top: 1rem; font-size: .9375rem; color: var(--muted); }
.chips { list-style: none; margin: .6rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.chips li { font-size: .875rem; font-weight: 600; line-height: 1; padding: .45rem .65rem; border: 1.5px solid var(--ink); border-radius: 999px; background: var(--sheet); }
.ticks { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .55rem; }
.ticks li { display: flex; gap: .6rem; align-items: flex-start; }
.ticks svg { flex: none; width: 1.2rem; height: 1.2rem; margin-top: .2rem; fill: none; stroke: var(--accent); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.btn.ghost { background: transparent; color: var(--ink); border: 1.5px solid var(--ink); box-shadow: 0 3px 0 var(--ink); }
.games, .options, .platform { border-top: 2px solid var(--ink); }
.modes { background: var(--panel); border-block: 2px solid var(--ink); }

/* game types */
.types { margin-top: 2.25rem; display: grid; gap: .9rem; grid-template-columns: 1fr 1fr; }
.type { background: var(--sheet); border: 1.5px solid var(--ink); border-radius: .9rem; padding: 1rem; display: flex; flex-direction: column; gap: .5rem; }
.type h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.125rem; letter-spacing: 0; margin-top: .25rem; }
.type p { font-size: .9375rem; color: var(--muted); line-height: 1.4; }
.type .tag { margin-top: auto; align-self: flex-start; font-family: var(--font-type); font-size: .8125rem; padding: .2rem .5rem; border-radius: .35rem; background: var(--panel); }
.type .tag.many { background: var(--ink); color: var(--paper); }
.type.own { grid-column: 1 / -1; background: var(--ink); color: var(--paper); border-color: var(--ink); }
.type.own p { color: inherit; opacity: .8; }
.type.own .ic { background: var(--accent); color: var(--on-accent); }
.type.own .tag { background: var(--accent); color: var(--on-accent); }
@media (min-width: 52rem) {
  .types { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
  .type { padding: 1.4rem; }
  .type.own { grid-column: span 1; }
}

/* screenshots */
.shots { margin: 1.75rem calc(-1 * clamp(1.25rem, 4vw, 2.5rem)) 0; padding: 0 clamp(1.25rem, 4vw, 2.5rem) .5rem; display: grid; grid-auto-flow: column; grid-auto-columns: 15rem; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.shots::-webkit-scrollbar { display: none; }
.shot { scroll-snap-align: start; text-decoration: none; display: flex; flex-direction: column; }
.phone { border-radius: 1.6rem; overflow: hidden; border: 1.5px solid var(--ink); background: var(--sheet); box-shadow: 6px 6px 0 -1.5px var(--panel), 6px 6px 0 0 var(--ink); }
.phone img { display: block; width: 100%; height: auto; }
.shot h4 { margin: 1.1rem 0 0; font-family: var(--font-display); font-weight: 400; font-size: 1.6rem; }
.go { margin-top: .9rem; align-self: flex-start; display: inline-flex; align-items: center; gap: .45rem; font-weight: 600; background: var(--accent); color: var(--on-accent); padding: .6rem 1.1rem; border-radius: 999px; box-shadow: 0 3px 0 var(--ink); }
.go svg { width: 1rem; height: 1rem; fill: currentColor; }
@media (min-width: 52rem) {
  .shots { margin: 1.75rem 0 0; padding: 0; grid-auto-flow: row; grid-template-columns: repeat(3, 1fr); gap: 2.5rem; overflow: visible; }
  .shot .phone { max-width: 19rem; }
}

/* single and multiplayer */
.mode-grid { margin-top: 2.25rem; display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
.mode { background: var(--sheet); border: 1.5px solid var(--ink); border-radius: .9rem; padding: 1.4rem; }
.mode h3 { font-size: 1.9rem; margin-top: 1.1rem; }
.mode-pic { display: flex; align-items: center; gap: .4rem; }
.mode-pic .dot { width: 2.6rem; height: 2.6rem; border-radius: 50%; border: 1.5px solid var(--ink); display: grid; place-items: center; background: var(--paper); }
.mode-pic .dot + .dot { margin-left: -.9rem; }
.mode-pic .dot svg { width: 1.3rem; height: 1.3rem; fill: none; stroke: var(--ink); stroke-width: 1.8; }
.mode-pic .line { flex: 1; border-top: 2px dashed var(--ink); min-width: 1.5rem; }
.mode-pic .box { font-family: var(--font-type); font-weight: 700; font-size: .9375rem; padding: .5rem .75rem; border: 1.5px solid var(--accent); color: var(--accent); background: var(--wash); border-radius: .4rem; white-space: nowrap; }
.engine { margin-top: 1.25rem; display: flex; gap: 1rem; align-items: flex-start; background: var(--ink); color: var(--paper); border-radius: .9rem; padding: 1.4rem; }
.engine .ic { background: var(--accent); color: var(--on-accent); }
.engine h3 { font-size: 1.6rem; line-height: 1.15; }
.engine p { margin-top: .4rem; opacity: .8; }
@media (min-width: 52rem) {
  .mode-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .mode { padding: 2rem; }
  .engine { padding: 1.75rem 2rem; align-items: center; }
  .engine h3 { font-size: 2rem; }
}

/* options */
.opt-grid { margin-top: 2.25rem; display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
.opt-group { background: var(--sheet); border: 1.5px solid var(--ink); border-radius: .9rem; padding: 1.25rem 1.25rem .5rem; }
.opt-group h3 { font-family: var(--font-type); font-weight: 700; font-size: .9375rem; letter-spacing: .06em; text-transform: uppercase; color: var(--accent); }
.opt-group ul { list-style: none; margin: .75rem 0 0; padding: 0; }
.opt-group li { display: flex; gap: .85rem; align-items: flex-start; padding: .8rem 0; border-top: 1px solid var(--rule); }
.opt-group li b { display: block; font-weight: 600; line-height: 1.3; }
.opt-group li span:not(.ic) { display: block; margin-top: .15rem; font-size: .9375rem; color: var(--muted); line-height: 1.4; }
.options .de { margin: 0; max-width: 15rem; }
.options figcaption { margin-top: 1rem; font-size: .9375rem; color: var(--muted); }
@media (min-width: 52rem) {
  .opt-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
  .options .de { max-width: none; padding: 0 1.5rem; }
}

/* design */
.design-grid { margin-top: 2.25rem; display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
.dcard { border-top: 2px solid var(--ink); padding-top: 1.25rem; }
.dcard h3 { margin-top: 1rem; font-size: 1.75rem; }
.dcard p { margin-top: .35rem; color: var(--muted); }
.design-note { margin-top: 2rem; font-weight: 600; font-size: 1.125rem; }
@media (min-width: 52rem) { .design-grid { grid-template-columns: repeat(3, 1fr); gap: 2.5rem; } }

/* platform */
.env { margin-top: 2.25rem; display: grid; gap: 1.75rem; background: var(--sheet); border: 1.5px solid var(--ink); border-radius: .9rem; padding: 1.4rem; box-shadow: 7px 7px 0 -1.5px var(--panel), 7px 7px 0 0 var(--ink); }
.env h3 { margin-top: 1rem; font-size: clamp(1.75rem, 3.4vw, 2.4rem); line-height: 1.08; max-width: 18ch; }
.env-pic { display: grid; gap: 1rem; grid-template-columns: 1fr; font-family: var(--font-type); }
.env-col { display: flex; flex-direction: column; gap: .75rem; }
.env-box { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .8rem 1rem; border: 1.5px solid var(--ink); border-radius: .5rem; background: var(--paper); }
.env-box b { font-size: 1.125rem; }
.env-box small { color: var(--muted); font-size: .875rem; }
.env-box.live { border-color: var(--accent); background: var(--wash); }
.env-box.live b { color: var(--accent); }
.env-kids { display: flex; flex-direction: column; gap: .5rem; margin-left: 1.25rem; padding-left: 1rem; border-left: 2px dashed var(--ink); }
.env-box.kid { padding: .55rem .8rem; font-size: .9375rem; position: relative; }
.env-box.kid::before { content: ""; position: absolute; left: calc(-1rem - 1.5px); top: 50%; width: 1rem; border-top: 2px dashed var(--ink); }
@media (min-width: 52rem) {
  .env { grid-template-columns: 1.1fr 1fr; padding: 2.25rem; gap: 2.5rem; align-items: center; }
  .env-pic { grid-template-columns: 1fr 1.3fr; align-items: start; }
}
.feat-grid { margin-top: 1.5rem; display: grid; gap: 1.25rem; grid-template-columns: 1fr; }
.feat { display: flex; flex-direction: column; gap: .5rem; background: var(--sheet); border: 1.5px solid var(--ink); border-radius: .9rem; padding: 1.4rem; text-decoration: none; }
.feat h3 { margin-top: .5rem; font-size: 1.6rem; }
.feat p { color: var(--muted); }
.feat .more { margin-top: auto; padding-top: .5rem; font-weight: 600; text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 2px; text-underline-offset: .25em; }
@media (min-width: 52rem) { .feat-grid { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.ent { margin-top: 1.5rem; display: grid; gap: 1.5rem; background: var(--ink); color: var(--paper); border-radius: .9rem; padding: 1.6rem 1.4rem; align-items: center; }
.ent .ic { background: var(--accent); color: var(--on-accent); }
.ent h3 { margin-top: 1rem; font-size: clamp(2rem, 4vw, 2.75rem); }
.ent-text p { margin-top: .3rem; opacity: .8; }
.ent-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
.ent-list li { display: flex; gap: .8rem; align-items: flex-start; }
.ent-list svg { flex: none; width: 1.5rem; height: 1.5rem; margin-top: .1rem; fill: none; stroke: var(--accent); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ent-list b { display: block; }
.ent-list span { display: block; opacity: .8; font-size: .9375rem; }
.ent .btn { justify-self: start; box-shadow: none; }
@media (min-width: 52rem) { .ent { grid-template-columns: 1fr 1.4fr auto; padding: 2.25rem; gap: 2.5rem; } }

/* hero second button */
.cta .btn.ghost:hover { transform: translateY(2px); box-shadow: 0 1px 0 var(--ink); }
.bar .hide-s { }
@media (max-width: 39.99rem) { .bar .hide-s { display: none; } }
/* fixes, round 2 */
@media (min-width: 52rem) {
  .type.own { grid-column: span 2; }
  .opt-grid { align-items: start; }
  .options .de { max-width: 16rem; padding: 0; justify-self: center; }
}
.flow { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.fb { display: inline-flex; align-items: center; gap: .45rem; font-family: var(--font-type); font-size: .875rem; font-weight: 700; padding: .5rem .7rem; border: 1.5px solid var(--ink); border-radius: .45rem; background: var(--sheet); white-space: nowrap; }
.fb svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fb.on { border-color: var(--accent); background: var(--wash); color: var(--accent); }
.fa { width: 1.1rem; height: 1.1rem; fill: none; stroke: var(--ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

.ent.start { background: var(--panel); color: var(--ink); border: 2px solid var(--ink); }
.ent.start .ent-text p, .ent.start .ent-list span { opacity: 1; color: var(--muted); }
.ent.start .btn { box-shadow: 0 3px 0 var(--ink); }

/* draft 2 Nov: selling first screen */
.bar .pill.go-up { background: var(--accent); color: var(--on-accent); }
.hero2 { padding: clamp(2rem, 5vw, 4rem) 0 clamp(2rem, 5vw, 3.5rem); }
.hero2 .grid { display: grid; gap: 2.5rem; align-items: center; }
.hero2 h1 { font-size: clamp(2.7rem, 7.2vw, 5.6rem); line-height: .97; letter-spacing: -0.025em; max-width: 13ch; }
.hero2 p.sub { font-size: clamp(1.125rem, 2vw, 1.375rem); color: var(--muted); max-width: 34ch; margin-top: 1.25rem; }
.hero2 .fine2 { margin-top: .9rem; font-size: .9375rem; color: var(--muted); }
.hero2 .pics { position: relative; display: flex; justify-content: center; gap: 1.25rem; }
.hero2 .pics .phone { width: min(17rem, 70vw); }
.hero2 .pics .phone.back { width: 14rem; margin-top: 3.5rem; display: none; }
@media (min-width: 56rem) { .hero2 .grid { grid-template-columns: 1.25fr 1fr; gap: 3rem; } .hero2 .pics .phone.back { display: block; } }
.get4 { display: grid; gap: 1rem; margin-bottom: clamp(2.5rem, 6vw, 4.5rem); }
.get4 a, .get4 div.g { display: flex; flex-direction: column; gap: .35rem; background: var(--sheet); border: 1.5px solid var(--ink); border-radius: .9rem; padding: 1.2rem 1.3rem; text-decoration: none; }
.get4 h3 { font-size: 1.45rem; margin-top: .4rem; }
.get4 p { color: var(--muted); font-size: .975rem; }
@media (min-width: 52rem) { .get4 { grid-template-columns: repeat(4, 1fr); } }
.where { display: grid; gap: 1.25rem; margin-top: 1.75rem; }
.where .w { background: var(--sheet); border: 1.5px solid var(--ink); border-radius: .9rem; padding: 1.5rem; display: flex; flex-direction: column; gap: .6rem; }
.where .w h3 { font-size: 1.7rem; }
.where .w ul { margin: .4rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .45rem; }
.where .w li { display: flex; gap: .6rem; align-items: flex-start; }
.where .w li svg { width: 1.1rem; height: 1.1rem; flex: none; margin-top: .25rem; stroke: var(--accent); fill: none; stroke-width: 2.2; }
.where .w.dark { background: var(--ink); color: var(--paper); }
@media (min-width: 52rem) { .where { grid-template-columns: 1fr 1fr; } }
.contact .cta2 { display: flex; flex-wrap: wrap; gap: 1rem 1.5rem; align-items: center; margin-top: 1.5rem; }
.contact .btn.light { background: var(--paper); color: var(--ink); }
section[aria-label="What you get"] { padding: 0; }
.where-s { border-top: 2px solid var(--ink); }
.where-s .w.dark .ic { background: var(--accent); color: var(--on-accent); }

/* ===== 2 Nov: smaller sizes, quiet icons, chapters ===== */
body { font-size: 1rem; }
h2 { font-size: clamp(1.6rem, 3.2vw, 2.25rem); line-height: 1.1; }
section { padding: clamp(2.5rem, 5.5vw, 4.25rem) 0; }
.hero2 h1 { font-size: clamp(2.2rem, 5vw, 3.9rem); line-height: 1; }
.hero2 p.sub, .hero p.sub { font-size: clamp(1.0625rem, 1.5vw, 1.1875rem); }
.lead { font-size: 1.0625rem; }
.sub-h { font-size: clamp(1.3rem, 2.4vw, 1.6rem); margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.bp-label { font-size: .875rem; }
.bp-label::before { border-top-color: var(--muted); }
.get-item h3, .dcard h3 { font-size: 1.3rem; }
.steps h3, .engine h3, .feat h3 { font-size: 1.2rem; }
.who-item h3 { font-size: 1.2rem; }
@media (min-width: 52rem) { .who-item h3 { font-size: 1.2rem; } .engine h3 { font-size: 1.3rem; } }
.mode h3 { font-size: 1.4rem; }
.where .w h3 { font-size: 1.35rem; }
.env h3 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
.ent h3 { font-size: clamp(1.4rem, 2.6vw, 1.8rem); }
.shot h4 { font-size: 1.25rem; }
.num { width: 2.2rem; height: 2.2rem; font-size: 1.05rem; }
.steps li { padding-left: 3.4rem; } .steps li::before { left: 1.05rem; top: 2.4rem; }
@media (min-width: 52rem) { .steps li { padding: 3.2rem 0 0; } .steps li::before { left: 2.6rem; top: 1.05rem; } }
.contact p { font-size: 1.0625rem; }
.mail { font-size: clamp(1.3rem, 4.5vw, 2.5rem); }
.type h3 { font-size: 1.0625rem; }

/* icons: ink line drawings, no tile. Red is for buttons and links only. */
.ic, .ic.big { width: auto; height: auto; background: none; border-radius: 0; color: var(--ink); display: inline-flex; justify-content: flex-start; }
.ic svg { width: 1.5rem; height: 1.5rem; stroke-width: 1.6; }
.ic.big svg { width: 1.75rem; height: 1.75rem; }
.type.own .ic, .engine .ic, .ent .ic, .where-s .w.dark .ic { background: none; color: var(--paper); }
.type.own .tag { background: var(--paper); color: var(--ink); }
.ticks svg, .where .w li svg, .ent-list svg { stroke: currentColor; opacity: .7; }
.opt-group h3 { color: var(--muted); }
.mode-pic .box { border-color: var(--ink); color: var(--ink); background: var(--sheet); }
.fb.on { border-color: var(--ink); background: var(--ink); color: var(--paper); }
.env-box.live b { color: inherit; }

/* chapters: a path through the page */
.tour { position: sticky; top: 0; z-index: 20; background: var(--paper); border-block: 1.5px solid var(--ink); }
.tour ol { list-style: none; margin: 0; padding: 0; display: flex; gap: .25rem; overflow-x: auto; scrollbar-width: none; }
.tour ol::-webkit-scrollbar { display: none; }
.tour li { flex: 1 0 auto; }
.tour a { display: flex; align-items: flex-start; gap: .6rem; padding: .9rem .75rem .9rem 0; text-decoration: none; color: var(--muted); font-weight: 600; font-size: .9375rem; white-space: nowrap; }
.tour a b { flex: none; width: 1.6rem; height: 1.6rem; border-radius: 50%; border: 1.5px solid currentColor; display: grid; place-items: center; font-family: var(--font-display); font-weight: 400; font-size: .9rem; line-height: 1; }
.tour a span { display: flex; flex-direction: column; padding-top: .1rem; }
.tour small { font-weight: 400; font-size: .875rem; color: var(--muted); }
.tour a:hover, .tour a[aria-current] { color: var(--ink); }
.tour a[aria-current] b { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.tour.stuck small { display: none; }
.tour.stuck a { padding-block: .6rem; align-items: center; }
.tour.stuck a span { padding-top: 0; }
@media (max-width: 51.99rem) { .tour small { display: none; } .tour a { align-items: center; padding-block: .7rem; } .tour li { flex: none; } }
.bp-label.ch { color: var(--ink); font-weight: 700; font-family: var(--font-body); font-size: .9375rem; }
.bp-label.ch::before { display: none; }
.bp-label.ch b { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--ink); color: var(--paper); display: grid; place-items: center; font-family: var(--font-display); font-weight: 400; font-size: .9rem; }
.chapter { scroll-margin-top: 3.5rem; }
.chapter > section:first-child { border-top: 0; }
.contact .bp-label.ch { color: inherit; }

/* 3 Nov: section 1. One colour per chapter, picture cards, game categories, hover motion. */
:root { --c1: #b7791f; --c2: #2f5fb3; --c3: #2e7d4f; --c4: #6b4fb3; --c5: #d93a1c; }
@media (prefers-color-scheme: dark) { :root { --c1: #e0a83e; --c2: #7fa6ef; --c3: #5fbf86; --c4: #a58cf0; --c5: #ff5a38; } }
.c-1, .t1 { --c: var(--c1); } .c-2, .t2 { --c: var(--c2); } .c-3, .t3 { --c: var(--c3); } .c-4, .t4 { --c: var(--c4); } .c-5, .t5 { --c: var(--c5); }
.chapter { --tint: color-mix(in srgb, var(--c) 13%, var(--paper)); --tint2: color-mix(in srgb, var(--c) 24%, var(--paper)); }
.bp-label.ch { color: var(--c, var(--ink)); }
.bp-label.ch b { background: var(--c, var(--ink)); color: var(--paper); }

/* first screen */
.hero2 h1 { max-width: 15ch; }
.hero2 .for { margin-top: clamp(2rem, 4vw, 3rem); display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .7rem; font-weight: 600; font-size: .9375rem; max-width: none; }
.hero2 .for span { font-family: var(--font-type); font-weight: 400; color: var(--muted); margin-right: .2rem; }
.hero2 .for i { width: .3rem; height: .3rem; border-radius: 50%; background: var(--muted); }

/* chapter bar: each number in its chapter colour */
.tour a b { color: var(--c); border-color: var(--c); }
.tour a:hover b { background: color-mix(in srgb, var(--c) 15%, transparent); }
.tour a[aria-current] { color: var(--ink); box-shadow: inset 0 -3px 0 var(--c); }
.tour a[aria-current] b { background: var(--c); color: var(--paper); border-color: var(--c); }
.tour a { transition: color .15s; }

/* game categories */
.games h2 { max-width: none; }
.cats { margin-top: 1.5rem; display: flex; flex-wrap: wrap; gap: .5rem; }
.cats button { font: inherit; font-weight: 600; font-size: .9375rem; color: var(--ink); background: var(--sheet); border: 1.5px solid var(--ink); border-radius: 999px; padding: .5rem .95rem; display: inline-flex; align-items: center; gap: .45rem; cursor: pointer; transition: transform .15s, background .15s; }
.cats button span { font-family: var(--font-type); font-weight: 400; font-size: .8125rem; min-width: 1.3rem; padding: .05rem .3rem; border-radius: 999px; background: var(--tint2); text-align: center; }
.cats button:hover { transform: translateY(-1px); }
.cats button[aria-pressed="true"] { background: var(--ink); color: var(--paper); }
.cats button[aria-pressed="true"] span { background: var(--c); color: var(--paper); }
.cats button:focus-visible { outline: 3px solid var(--c); outline-offset: 2px; }

.glist { margin: 1.5rem calc(-1 * clamp(1.25rem, 4vw, 2.5rem)) 0; padding: .25rem clamp(1.25rem, 4vw, 2.5rem) .75rem; display: grid; grid-auto-flow: column; grid-auto-columns: 13.5rem; gap: 1.25rem; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.glist::-webkit-scrollbar { display: none; }
.game { scroll-snap-align: start; text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.game[hidden] { display: none; }
.game .phone { transition: transform .2s ease, box-shadow .2s ease; }
.game .cat { margin-top: 1rem; align-self: flex-start; font-family: var(--font-type); font-size: .8125rem; padding: .15rem .5rem; border-radius: .35rem; background: var(--tint2); color: var(--ink); }
.game h4 { margin: .45rem 0 0; font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; }
.game .go { transition: transform .15s, box-shadow .15s; }
.game:hover .phone { transform: translateY(-4px) rotate(-1deg); box-shadow: 8px 10px 0 -1.5px var(--tint2), 8px 10px 0 0 var(--ink); }
.game:hover .go { transform: translateY(-1px); box-shadow: 0 4px 0 var(--ink); }
@media (min-width: 52rem) {
  .glist { margin: 1.75rem 0 0; padding: 0; grid-auto-flow: row; grid-template-columns: repeat(4, 1fr); gap: 2rem; overflow: visible; }
}

/* kinds of games: picture cards */
.games .sub-h { margin-top: clamp(3rem, 6vw, 4.5rem); font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.1; }
.kinds { margin-top: 1.75rem; display: grid; gap: .9rem; grid-template-columns: 1fr 1fr; }
.kind { background: var(--tint); border: 1.5px solid color-mix(in srgb, var(--c) 45%, var(--paper)); border-radius: .9rem; padding: .9rem; display: flex; flex-direction: column; gap: .4rem; transition: transform .2s ease, box-shadow .2s ease, border-color .2s; }
.kind:hover { transform: translateY(-3px); border-color: var(--c); box-shadow: 0 6px 0 -1px color-mix(in srgb, var(--c) 35%, var(--paper)); }
.kind h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.0625rem; letter-spacing: 0; margin-top: .4rem; }
.kind p { font-size: .9375rem; color: var(--muted); line-height: 1.4; }
.kind .tag { margin-top: auto; align-self: flex-start; font-family: var(--font-type); font-size: .8125rem; padding: .15rem .5rem; border-radius: .35rem; background: var(--paper); }
.kind .tag.many { background: var(--c); color: var(--paper); }
.kind.own { grid-column: 1 / -1; background: var(--ink); color: var(--paper); border-color: var(--ink); }
.kind.own p { color: inherit; opacity: .8; }
.kind.own .tag { background: var(--c); color: var(--ink); }
@media (min-width: 52rem) {
  .kinds { grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
  .kind { padding: 1.1rem; }
  .kind.own { grid-column: span 2; flex-direction: row; align-items: center; gap: 1.25rem; }
  .kind.own .pic { flex: none; width: 46%; }
  .kind.own > div { display: flex; flex-direction: column; gap: .4rem; height: 100%; justify-content: center; }
  .kind.own .tag { margin-top: .4rem; }
}

/* the pictures */
.pic { display: block; width: 100%; height: auto; fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.pic .t { fill: var(--paper); stroke: color-mix(in srgb, var(--c) 40%, var(--paper)); stroke-width: 1.5; }
.kind.own .pic .t { fill: color-mix(in srgb, var(--c) 18%, var(--ink)); stroke: none; }
.pic text { fill: var(--c); stroke: none; font-family: var(--font-display); font-size: 20px; text-anchor: middle; }
.k-slot .win rect { fill: var(--sheet); stroke-width: 1.5; }
.k-slot .reel circle, .k-slot .reel rect { fill: var(--c); stroke: none; }
.k-instant .tiles rect { fill: color-mix(in srgb, var(--c) 22%, var(--paper)); stroke: none; }
.k-instant .gems path, .k-instant .flip path { fill: var(--c); stroke: none; }
.k-instant .flip rect { fill: var(--paper); stroke-width: 1.5; }
.k-instant .flip { opacity: 0; }
.k-table .wheel > circle:first-child { fill: color-mix(in srgb, var(--c) 14%, var(--paper)); }
.k-table .ball { fill: var(--ink); stroke: none; }
.k-table .chips2 ellipse { fill: var(--paper); stroke-width: 1.5; }
.k-table .chips2 .top { fill: var(--c); }
.k-crash .axis { stroke: color-mix(in srgb, var(--c) 40%, var(--paper)); stroke-width: 1.5; }
.k-crash .curve { stroke-width: 3; stroke-dasharray: 110; stroke-dashoffset: 0; }
.k-crash .tip { fill: var(--c); stroke: none; }
.k-crash .mult { font-family: var(--font-type); font-size: 13px; text-anchor: start; }
.k-bingo .ball circle { fill: var(--paper); stroke-width: 1.5; }
.k-bingo .ball text { font-family: var(--font-type); font-size: 9px; }
.k-bingo .b2 circle { fill: var(--c); } .k-bingo .b2 text { fill: var(--paper); }
.k-skill .fan rect { fill: var(--paper); stroke-width: 1.5; transform-box: view-box; transform-origin: 60px 56px; }
.k-skill .c1 { transform: rotate(-16deg); } .k-skill .c3 { transform: rotate(16deg); }
.k-skill .suit { fill: var(--c); stroke: none; transform: rotate(16deg); transform-box: view-box; transform-origin: 60px 56px; }
.own .sketch { stroke: var(--paper); stroke-dasharray: 4 4; stroke-width: 1.5; opacity: .7; }
.own .pencil path { fill: var(--c); stroke: none; }
.own .spark { stroke: var(--c); }

/* tiny motion on hover */
@media (prefers-reduced-motion: no-preference) {
  .pic * { transition: transform .5s ease, opacity .3s ease; }
  .k-slot .reel { transform: translateY(0); }
  .k-slot:hover .r1 { animation: spin .7s ease-out; } .k-slot:hover .r2 { animation: spin .9s ease-out; } .k-slot:hover .r3 { animation: spin 1.1s ease-out; }
  @keyframes spin { 0% { transform: translateY(0); } 60% { transform: translateY(-50px); } 61% { transform: translateY(0); } 100% { transform: translateY(0); } }
  .k-instant:hover .flip { opacity: 1; }
  .k-instant:hover .gems path { transform: scale(1.15); transform-box: fill-box; transform-origin: center; }
  .k-table .wheel { transform-box: view-box; transform-origin: 42px 32px; }
  .k-table:hover .wheel { transform: rotate(150deg); transition: transform 1s cubic-bezier(.2,.7,.2,1); }
  .k-crash:hover .curve { animation: draw .8s ease-out; }
  @keyframes draw { from { stroke-dashoffset: 110; } to { stroke-dashoffset: 0; } }
  .k-crash:hover .tip { animation: pop .8s ease-out; }
  @keyframes pop { 0%, 80% { transform: scale(0); } 100% { transform: scale(1); } }
  .k-crash .tip { transform-box: fill-box; transform-origin: center; }
  .k-bingo .ball { transform-box: fill-box; transform-origin: center; }
  .k-bingo:hover .ball { animation: hop .45s ease-out; }
  .k-bingo:hover .b1 { animation-delay: .06s; } .k-bingo:hover .b2 { animation-delay: .12s; } .k-bingo:hover .b3 { animation-delay: .18s; } .k-bingo:hover .b4 { animation-delay: .24s; }
  @keyframes hop { 50% { transform: translateY(-6px); } }
  .k-skill:hover .c1 { transform: rotate(-26deg); } .k-skill:hover .c3, .k-skill:hover .suit { transform: rotate(26deg); }
  .own .pencil { transform-box: view-box; transform-origin: 80px 50px; }
  .own:hover .pencil { animation: draw2 .9s ease-in-out; }
  @keyframes draw2 { 25% { transform: translate(-6px, 2px); } 50% { transform: translate(-2px, -3px); } 75% { transform: translate(-8px, 0); } }
}
/* dark cards stay dark in both themes */
.kind.own, .engine { background: #1d1712; color: #f1e8d6; border-color: #1d1712; }
.kind.own .pic .t { fill: color-mix(in srgb, var(--c) 20%, #1d1712); }
.own .sketch { stroke: #f1e8d6; }
.kind.own .tag { color: #1d1712; }
.engine .ic { color: #f1e8d6; }
@media (prefers-color-scheme: dark) { .kind.own, .engine { background: #0f0b08; border: 1.5px solid var(--c, var(--rule)); } }
.chapter.c-1 .modes .bp-label::before { border-top-color: var(--c); }
.glist { scroll-padding-inline: clamp(1.25rem, 4vw, 2.5rem); }

/* 3 Nov: section 2, Make it yours. Labels always shown, no hover needed. */
.yours .sub-h { margin-top: clamp(3rem, 6vw, 4.5rem); font-family: var(--font-display); font-weight: 400; font-size: clamp(1.6rem, 3vw, 2.2rem); line-height: 1.1; }
.ways { margin-top: 1.75rem; display: grid; gap: 2rem; }
.way { margin: 0; display: grid; grid-template-columns: 8.5rem 1fr; gap: 1.1rem; align-items: center; }
.way .phone { transition: transform .2s ease, box-shadow .2s ease; box-shadow: 6px 6px 0 -1.5px var(--tint2), 6px 6px 0 0 var(--ink); }
.way:hover .phone { transform: translateY(-4px) rotate(-1deg); }
.way figcaption { display: flex; flex-direction: column; align-items: flex-start; gap: .3rem; }
.way .step { width: 1.6rem; height: 1.6rem; border-radius: 50%; background: var(--c); color: var(--paper); display: grid; place-items: center; font-family: var(--font-display); font-size: .9rem; }
.way b { font-family: var(--font-display); font-weight: 400; font-size: 1.35rem; line-height: 1.1; }
.way figcaption > span:not(.step) { color: var(--muted); font-size: .9375rem; }
.way .chips { margin-top: .3rem; }
.way .chips li { border-color: var(--c); background: var(--tint); }
.ways .arrow { display: none; }
@media (min-width: 52rem) {
  .ways { grid-template-columns: 1fr auto 1fr auto 1fr; gap: 1.25rem; align-items: start; }
  .way { grid-template-columns: 1fr; gap: 1rem; }
  .way .phone { max-width: 15rem; }
  .ways .arrow { display: block; align-self: center; margin-top: -6rem; }
  .ways .arrow svg { width: 2.5rem; height: 1rem; fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
}

.opts { margin-top: 1.75rem; display: grid; gap: .9rem; grid-template-columns: 1fr; }
.opt { background: var(--tint); border: 1.5px solid color-mix(in srgb, var(--c) 45%, var(--paper)); border-radius: .9rem; padding: .9rem; display: grid; grid-template-columns: 6.5rem 1fr; gap: .4rem 1rem; align-items: start; transition: transform .2s ease, box-shadow .2s ease, border-color .2s; }
.opt:hover { transform: translateY(-3px); border-color: var(--c); box-shadow: 0 6px 0 -1px color-mix(in srgb, var(--c) 35%, var(--paper)); }
.opt .pic { grid-row: span 2; }
.opt h3 { font-family: var(--font-body); font-weight: 600; font-size: 1.0625rem; letter-spacing: 0; }
.tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .35rem; }
.tags li { font-size: .875rem; line-height: 1.25; padding: .3rem .55rem; border-radius: .4rem; background: var(--paper); }
@media (min-width: 40rem) { .opts { grid-template-columns: 1fr 1fr; } }
@media (min-width: 64rem) {
  .opts { grid-template-columns: repeat(5, 1fr); gap: 1rem; }
  .opt { grid-template-columns: 1fr; padding: 1rem; }
  .opt .pic { grid-row: auto; }
  .opt h3 { margin-top: .5rem; }
  .tags { flex-direction: column; align-items: flex-start; }
}

/* section 2 pictures */
.o-bets .btn { fill: var(--paper); stroke-width: 1.5; }
.o-bets text { font-family: var(--font-type); font-size: 15px; }
.o-bets .val2 { opacity: 0; }
.o-math .arc { stroke: color-mix(in srgb, var(--c) 30%, var(--paper)); stroke-width: 7; }
.o-math .arc.on { stroke: var(--c); }
.o-math .needle path { stroke: var(--ink); stroke-width: 2.5; } .o-math .needle circle { fill: var(--ink); stroke: none; }
.o-math .small { font-family: var(--font-type); font-size: 12px; }
.o-players .bars rect { fill: color-mix(in srgb, var(--c) 30%, var(--paper)); stroke: none; }
.o-players .bars .b3 { fill: var(--c); }
.o-players .crown { fill: var(--c); stroke: none; }
.o-markets .globe circle:first-child { fill: color-mix(in srgb, var(--c) 14%, var(--paper)); }
.o-markets .cur text { font-family: var(--font-type); font-size: 17px; }
.o-markets .cur circle { fill: var(--c); stroke: none; }
.o-look .s1 { fill: var(--c); stroke: none; } .o-look .s2 { fill: color-mix(in srgb, var(--c) 45%, var(--paper)); stroke: none; } .o-look .s3 { fill: var(--paper); stroke-width: 1.5; }

.dways { margin-top: 1.5rem; display: grid; gap: .9rem; }
.dway { border: 1.5px solid color-mix(in srgb, var(--c) 45%, var(--paper)); border-radius: .9rem; padding: 1rem; transition: transform .2s ease, border-color .2s; }
.dway:hover { transform: translateY(-3px); border-color: var(--c); }
.flow2 { display: flex; align-items: center; gap: .5rem; font-weight: 600; font-size: .875rem; }
.flow2 span { padding: .3rem .6rem; border-radius: .4rem; border: 1.5px dashed var(--c); }
.flow2 span.on { background: var(--c); color: var(--paper); border-style: solid; border-color: var(--c); }
.flow2 svg { width: 1.8rem; height: .8rem; fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.dway h3 { margin-top: .9rem; font-family: var(--font-body); font-weight: 600; font-size: 1.0625rem; letter-spacing: 0; }
.dway p { color: var(--muted); font-size: .9375rem; }
.yours .design-note { margin-top: 1rem; font-weight: 600; }
@media (min-width: 52rem) { .dways { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }

@media (prefers-reduced-motion: no-preference) {
  .o-bets .val, .o-bets .val2 { transition: transform .35s ease, opacity .35s ease; }
  .o-bets:hover .val { transform: translateY(-10px); opacity: 0; }
  .o-bets .val2 { transform: translateY(10px); }
  .o-bets:hover .val2 { transform: translateY(0); opacity: 1; }
  .o-math .needle { transform-box: view-box; transform-origin: 60px 50px; transform: rotate(-60deg); }
  .o-math:hover .needle { transform: rotate(0deg); transition: transform .7s cubic-bezier(.2,.8,.2,1.2); }
  .o-players .bars rect { transform-box: fill-box; transform-origin: bottom; }
  .o-players:hover .bars rect { animation: grow .6s ease-out; }
  .o-players:hover .b2 { animation-delay: .08s; } .o-players:hover .b3 { animation-delay: .16s; }
  @keyframes grow { from { transform: scaleY(.3); } to { transform: scaleY(1); } }
  .o-markets:hover .globe ellipse { animation: turn 1s ease-in-out; transform-box: fill-box; transform-origin: center; }
  @keyframes turn { 50% { transform: scaleX(-1); } }
  .o-look .sw rect { transform-box: fill-box; transform-origin: center bottom; }
  .o-look:hover .s1 { transform: rotate(-8deg); } .o-look:hover .s3 { transform: rotate(8deg); }
}
/* section 2 fixes */
.o-math .needle { transform-origin: 50px 50px !important; }
.o-math .small { font-size: 15px; }
@media (prefers-color-scheme: light) {
  .chapter.c-2 { --tint: #dfe6f3; --tint2: #c9d6ee; }
  .chapter.c-3 { --tint: #dcebe0; --tint2: #c3dfcb; }
  .chapter.c-4 { --tint: #e6e0f3; --tint2: #d4caee; }
}
@media (min-width: 52rem) { .way .phone { max-width: 12rem; } .ways .arrow { margin-top: -4rem; } }
.opt > .pic { width: 100%; height: auto; aspect-ratio: 120 / 64; }
.opt { align-content: start; }
/* 3 Nov: section 2 v2, try-it phone and design cards */
.yours h2 { max-width: 16ch; }
.try { margin-top: 2rem; display: grid; gap: 1.75rem; align-items: center; background: var(--tint); border: 1.5px solid color-mix(in srgb, var(--c) 40%, var(--paper)); border-radius: 1.25rem; padding: 1.25rem; }
.tphone { width: min(17rem, 100%); justify-self: center; border: 1.5px solid var(--ink); border-radius: 1.6rem; overflow: hidden; background: #17120e; color: #f1e8d6; box-shadow: 8px 8px 0 -1.5px var(--tint2), 8px 8px 0 0 var(--ink); }
.reels { position: relative; aspect-ratio: 390 / 612; overflow: hidden; }
.reels .lk { position: absolute; inset: 0; opacity: 0; transition: opacity .35s ease; }
.reels .lk.on { opacity: 1; }
.reels img { display: block; width: 100%; height: auto; }
.tbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: .5rem; padding: .9rem .9rem 1.1rem; }
.tv { display: flex; flex-direction: column; min-width: 0; }
.tv.r { text-align: right; }
.tv small, .tspin small { font-size: .8rem; color: #c9bba3; }
.tv b { font-family: var(--font-type); font-size: 1.05rem; white-space: nowrap; }
.tspin { display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.tspin .btn { width: 3.4rem; height: 3.4rem; border-radius: 50%; background: #ff5a38; display: grid; place-items: center; box-shadow: 0 3px 0 #f1e8d6; }
.tspin svg { width: 1.5rem; height: 1.5rem; fill: none; stroke: #17120e; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.flash { border-radius: .3rem; animation: flash 1s ease-out; }
@keyframes flash { 0% { background: var(--c); color: #fff; box-shadow: 0 0 0 4px var(--c); } 100% { background: transparent; box-shadow: 0 0 0 4px transparent; } }
.try-h { font-size: 1.125rem; margin: 0 0 1rem; }
.try-h span { font-family: var(--font-display); font-size: 1.75rem; color: var(--c); margin-right: .3rem; }
.ctl { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; padding: .7rem 0; border-top: 1.5px solid color-mix(in srgb, var(--c) 30%, var(--paper)); }
.ctl .cl { width: 100%; font-weight: 700; font-size: .9375rem; }
.ctl button { font: inherit; font-weight: 600; font-size: 1rem; min-height: 2.75rem; padding: 0 1.1rem; border-radius: 999px; border: 1.5px solid var(--c); background: var(--paper); color: var(--ink); cursor: pointer; transition: transform .15s ease, background .15s; }
.ctl button:hover { transform: translateY(-2px); }
.ctl button[aria-pressed="true"] { background: var(--c); color: var(--paper); }
.ctl button:focus-visible { outline: 3px solid var(--ink); outline-offset: 2px; }
.same { list-style: none; margin: .9rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem 1.1rem; font-weight: 700; }
.same li::before { content: "✓"; color: var(--c); margin-right: .35rem; }
@media (min-width: 52rem) {
  .try { grid-template-columns: auto 1fr; gap: 3.5rem; padding: 2.25rem 3rem; }
  .tphone { width: 17rem; }
  .ctl { flex-wrap: nowrap; }
  .ctl .cl { width: 6.5rem; flex: none; }
}
.dcards { margin-top: 1.5rem; display: grid; gap: 1rem; }
.dcard { border: 1.5px solid color-mix(in srgb, var(--c) 40%, var(--paper)); border-radius: 1rem; padding: 1rem; background: var(--paper); transition: transform .2s ease, border-color .2s; }
.dcard:hover { transform: translateY(-3px); border-color: var(--c); }
.dpic { background: var(--tint); border-radius: .7rem; height: 10rem; display: flex; align-items: center; justify-content: center; gap: .8rem; }
.dpic .sk { width: 4.6rem; height: auto; fill: none; stroke: var(--c); stroke-width: 2; stroke-dasharray: 4 3; stroke-linecap: round; stroke-linejoin: round; }
.dpic .sk .bulb { fill: color-mix(in srgb, var(--c) 25%, var(--paper)); stroke-dasharray: none; }
.dpic .arr { width: 2.2rem; height: 1rem; fill: none; stroke: var(--c); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s ease; }
.dcard:hover .arr { transform: translateX(4px); }
.mini { width: 4.6rem; aspect-ratio: 390 / 560; border: 1.5px solid var(--ink); border-radius: .7rem; overflow: hidden; background: #17120e; }
.mini img { display: block; width: 100%; height: auto; }
.mini.app { width: 7rem; aspect-ratio: 4 / 3.4; border-radius: .5rem; padding: .9rem .5rem .5rem 1.6rem; position: relative; background: var(--sheet); }
.mini.app i { position: absolute; inset: 0 0 auto 0; height: .5rem; border-bottom: 1.5px solid var(--ink); }
.mini.app picture { display: block; height: 100%; overflow: hidden; border-radius: .3rem; border: 1px solid var(--ink); }
.dcard h3 { margin-top: .9rem; font-size: 1.35rem; }
.dcard p { color: var(--muted); }
@media (prefers-reduced-motion: no-preference) {
  .dcard:hover .sk .dr { animation: dash 1.2s linear infinite; }
  .dcard:hover .sk .bulb { animation: glow 1s ease-in-out infinite alternate; }
}
@keyframes dash { to { stroke-dashoffset: -14; } }
@keyframes glow { to { fill: var(--c); } }
@media (min-width: 52rem) { .dcards { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } }
@media (prefers-color-scheme: light) {
  .tphone { background: #f8f2e4; color: #1d1712; }
  .tv small, .tspin small { color: #5f5448; }
  .tspin .btn { background: #d93a1c; box-shadow: 0 3px 0 #1d1712; }
  .tspin svg { stroke: #fff7ec; }
}
.dpic { height: 12.5rem; gap: 1.1rem; }
.dpic .sk { width: 6rem; }
.mini { width: 6.2rem; }
.mini.app { width: 9.5rem; }
.tbar { grid-template-columns: 1fr 1fr; grid-template-areas: "a b" "s s"; row-gap: .6rem; }
.tbar .tv:first-child { grid-area: a; } .tbar .tv.r { grid-area: b; } .tspin { grid-area: s; }
.reels { aspect-ratio: 390 / 580; }
/* 3 Nov: section 2 v3, game builder window (no blue panel) */
.bld { margin-top: 2rem; border: 1.5px solid var(--ink); border-radius: 1.25rem; background: var(--sheet); overflow: hidden; box-shadow: 8px 8px 0 -1.5px var(--panel), 8px 8px 0 0 var(--ink); }
.bld-top { display: flex; align-items: center; gap: .45rem; padding: .7rem 1rem; border-bottom: 1.5px solid var(--ink); }
.bld-top i { width: .7rem; height: .7rem; border-radius: 50%; border: 1.5px solid var(--ink); }
.bld-top i:first-child { background: var(--c); border-color: var(--c); }
.bld-top span { margin-left: .6rem; font-family: var(--font-type); font-size: .95rem; color: var(--muted); }
.bld-body { display: grid; }
.stage { padding: 2rem 1.25rem; display: grid; place-items: center; background-color: var(--paper); background-image: radial-gradient(circle, var(--grid-major) 1.2px, transparent 1.6px); background-size: 18px 18px; }
.bld .ctrls { padding: 1.5rem 1.25rem 1.25rem; }
.bld .ctl { border-top: 1.5px solid var(--rule); padding: .55rem 0; }
.bld .ctl[hidden], .bld button[hidden] { display: none; }
.bld .ctl button { background: var(--sheet); border-color: var(--rule); min-height: 2.6rem; }
.bld .ctl button:hover { border-color: var(--c); }
.bld .ctl button[aria-pressed="true"] { background: var(--c); border-color: var(--c); color: var(--on-c, #fff); }
.bld .tog button[aria-pressed="true"]::before { content: "✓ "; }
.bld .try-h span { font-size: 1.9rem; color: var(--ink); }
.bld-more { border-top: 1.5px solid var(--ink); padding: 1.1rem 1.25rem 1.25rem; }
.bld-more p { margin: 0 0 .7rem; color: var(--muted); }
.bld-more p b { color: var(--ink); }
.bld-more .tags { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.bld-more .tags li { font-size: .9375rem; padding: .3rem .7rem; border-radius: .5rem; border: 1.5px dashed var(--rule); }
.tphone { position: relative; box-shadow: 8px 8px 0 -1.5px var(--panel), 8px 8px 0 0 var(--ink); }
.xlogo { position: absolute; top: 0; left: 0; right: 0; height: 9%; display: flex; align-items: center; gap: .4rem; padding: 0 .8rem; background: var(--c); color: #fff; }
.xlogo svg { width: 1.1rem; height: 1.1rem; fill: none; stroke: currentColor; stroke-width: 2; }
.xlogo b { font-size: .95rem; letter-spacing: .02em; }
.xjack { position: absolute; left: 8%; right: 8%; bottom: 3%; border-radius: .6rem; padding: .35rem .6rem; text-align: center; background: #1d1712; color: #ffd36b; border: 2px solid #ffd36b; box-shadow: 0 0 0 3px #1d1712; }
.xjack small { display: block; font-size: .7rem; font-weight: 700; letter-spacing: .14em; }
.xjack b { font-family: var(--font-type); font-size: 1.1rem; }
.tbar { grid-template-columns: 1fr 1fr; grid-template-areas: "a b" "s s" "i i"; }
.tact { grid-area: s; display: flex; align-items: center; justify-content: center; gap: 1rem; }
.tact .tspin { grid-area: auto; }
.xauto, .xbuy { display: flex; flex-direction: column; align-items: center; gap: .2rem; }
.xauto[hidden], .xbuy[hidden], .xlogo[hidden], .xjack[hidden] { display: none; }
.xauto .rb { width: 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; border: 1.5px solid currentColor; font-size: 1.1rem; }
.xauto small { font-size: .8rem; }
.xbuy .rb { font-size: .8rem; font-weight: 700; padding: .45rem .6rem; border-radius: .6rem; border: 1.5px solid currentColor; line-height: 1.1; text-align: center; max-width: 5rem; }
.tinfo { grid-area: i; margin: 0; text-align: center; font-size: .8rem; font-family: var(--font-type); opacity: .8; }
.tspin .i-play { display: none; fill: currentColor; stroke: none; }
.tphone.inst .tspin .i-spin { display: none; }
.tphone.inst .tspin .i-play { display: block; fill: #fff7ec; }
.pop { animation: pop .45s cubic-bezier(.2,.8,.2,1.3); }
@keyframes pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.dpic { background-color: var(--paper); background-image: radial-gradient(circle, var(--grid-major) 1.2px, transparent 1.6px); background-size: 18px 18px; border: 1.5px solid var(--rule); }
.dcard { border-color: var(--rule); }
@media (min-width: 52rem) {
  .bld-body { grid-template-columns: 1fr 1.15fr; }
  .stage { padding: 2.5rem 2rem; border-right: 1.5px solid var(--ink); }
  .bld .ctrls { padding: 2rem 2.25rem 1.75rem; }
  .bld .ctl .cl { width: 5.5rem; }
  .bld .ctl { flex-wrap: wrap; }
  .bld .ctl .cl { flex: none; }
  .bld-more { padding: 1.25rem 2.25rem 1.5rem; }
}
@media (prefers-reduced-motion: reduce) { .pop, .flash { animation: none; } }
.tphone.inst .reels { aspect-ratio: 390 / 445; }
.bld-more .tags { flex-direction: row; align-items: center; }
@media (min-width: 52rem) {
  .bld .ctl.tog { position: relative; padding-left: 6rem; }
  .bld .ctl.tog .cl { position: absolute; left: 0; top: 1.25rem; }
}
.stage { align-items: start; }
/* phones: the game stays in view while the buttons scroll under it */
.bld { overflow: clip; }
@media (max-width: 51.99rem) {
  .stage { position: sticky; top: 0; z-index: 2; padding: .75rem 1rem; border-bottom: 1.5px solid var(--ink); }
  .stage .tphone { width: 12.5rem; border-radius: 1.2rem; }
  .stage .tbar { padding: .5rem .6rem .6rem; row-gap: .35rem; }
  .stage .tv b { font-size: .85rem; }
  .stage .tv small, .stage .tspin small { font-size: .7rem; }
  .stage .tinfo { margin: 0; font-size: .7rem; }
}
@media (max-width: 51.99rem) {
  .stage .tphone { width: 10.5rem; }
  .stage .tact { gap: .4rem; }
  .stage .tspin { transform: scale(.8); }
  .stage .xauto, .stage .xbuy { transform: scale(.85); }
}

/* 3 Nov: section 3, where it runs (map you can switch) and grows with you */
.run { margin-top: 1.75rem; }
.run-tabs { display: flex; gap: .5rem; padding: 1rem 1.25rem 0; flex-wrap: wrap; }
.run-tabs button { font: inherit; font-weight: 600; min-height: 2.6rem; padding: 0 1.1rem; border-radius: 999px; border: 1.5px solid var(--rule); background: var(--sheet); color: var(--ink); cursor: pointer; transition: transform .15s ease, background .15s; }
.run-tabs button:hover { transform: translateY(-2px); border-color: var(--c); }
.run-tabs button[aria-pressed="true"] { background: var(--c); border-color: var(--c); color: #fff; }
.run-body { display: grid; }
.map-wrap { padding: 1rem 1.25rem; }
.map { width: 100%; height: auto; display: block; font-family: var(--font-sans, Figtree), sans-serif; }
.map .zone { fill: color-mix(in srgb, var(--c) 10%, transparent); stroke: var(--c); stroke-width: 2; stroke-dasharray: 7 6; transition: opacity .35s ease; }
.map .zl { fill: var(--c); font-weight: 700; font-size: 17px; transition: opacity .35s ease; }
.run.ours .z-yours, .run.ours .zl-yours, .run.yours .z-ours, .run.yours .zl-ours { opacity: 0; }
.map .node rect:first-child { fill: var(--sheet); stroke: var(--ink); stroke-width: 2; }
.map .node text { fill: var(--ink); font-size: 16px; font-weight: 700; text-anchor: middle; }
.map .ph { fill: var(--paper); stroke: var(--ink); stroke-width: 1.6; }
.map .chip { fill: var(--c); }
.map .ct { fill: #fff !important; font-size: 14px !important; }
.map .tile { stroke: var(--ink); stroke-width: 1.6; }
.map .t-a { fill: #f2b544; } .map .t-b { fill: #e0533d; } .map .t-c { fill: #6b8fd6; }
.map .wire { stroke: var(--ink); stroke-width: 2; fill: none; }
.map .wl { fill: var(--muted); font-size: 13px; text-anchor: middle; font-family: var(--font-type, monospace); }
.map .flow { fill: var(--c); offset-rotate: 0deg; }
.map .f1 { offset-path: path("M138 170 H236"); animation: flow 1.8s linear infinite; }
.map .f2 { offset-path: path("M392 170 H492"); animation: flow 1.8s linear infinite .9s; }
@keyframes flow { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.run-info { padding: 0 1.25rem 1.4rem; }
.run-info ul { margin: 0 0 1rem; padding: 0; list-style: none; display: grid; gap: .45rem; }
.run-info li { display: flex; gap: .6rem; align-items: flex-start; }
.run-info li svg { width: 1.1rem; height: 1.1rem; flex: none; margin-top: .25rem; stroke: var(--c); fill: none; stroke-width: 2.4; }
.run-info [hidden] { display: none; }
.grow-h { margin-top: 2.75rem; font-size: 1.7rem; }
.grow { display: grid; gap: 1rem; margin-top: 1rem; }
.g { border: 1.5px solid var(--rule); border-radius: 1rem; background: var(--sheet); padding: 1rem 1.1rem 1.2rem; transition: transform .2s ease, border-color .2s; }
.g:hover { transform: translateY(-3px); border-color: var(--c); }
.g svg { width: 100%; max-width: 12rem; height: auto; display: block; margin-bottom: .5rem; overflow: visible; }
.g h4 { margin: 0; font-size: 1.15rem; }
.g p { margin: .25rem 0 0; color: var(--muted); }
.g .k { fill: var(--sheet); stroke: var(--ink); stroke-width: 2; transform-box: fill-box; transform-origin: 50% 100%; transition: transform .35s ease; }
.g .k4 { fill: var(--c); }
.g-games:hover .k1 { transform: translateX(-22px) rotate(-12deg); }
.g-games:hover .k2 { transform: translateX(-8px) rotate(-4deg); }
.g-games:hover .k3 { transform: translateX(8px) rotate(4deg); }
.g-games:hover .k4 { transform: translateX(22px) rotate(12deg); }
.g .pp { fill: none; stroke: var(--ink); stroke-width: 2.4; stroke-linecap: round; transition: opacity .3s ease, transform .3s ease; transform-box: fill-box; transform-origin: 50% 100%; }
.g .pp circle { fill: var(--c); }
.g .p4, .g .p5 { opacity: 0; transform: scale(.6); }
.g-players:hover .p4, .g-players:hover .p5 { opacity: 1; transform: none; }
.g .gl { fill: none; stroke: var(--ink); stroke-width: 2; }
.g .mer { transform-box: fill-box; transform-origin: center; }
.g-world:hover .mer { animation: spin-x 1.6s ease-in-out; }
@keyframes spin-x { 0% { transform: scaleX(1); } 50% { transform: scaleX(-1); } 100% { transform: scaleX(1); } }
.g .cur circle { fill: var(--c); }
.g .cur text { fill: #fff; font-weight: 700; font-size: 15px; text-anchor: middle; font-family: var(--font-type, monospace); }
.g .cur { transition: transform .3s ease; transform-box: fill-box; transform-origin: center; }
.g-world:hover .cur { transform: scale(1.08); }
@media (min-width: 52rem) {
  .run-body { grid-template-columns: 1.6fr 1fr; align-items: center; }
  .map-wrap { padding: 1.5rem 1.75rem; border-right: 1.5px solid var(--ink); }
  .run-tabs { padding: 1.25rem 1.75rem 0; }
  .run-info { padding: 1.5rem 1.75rem; }
  .grow { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .map .flow { animation: none; } .g-world:hover .mer { animation: none; } }
@media (prefers-color-scheme: dark) {
  .run-tabs button[aria-pressed="true"], .bld .ctl button[aria-pressed="true"] { color: var(--paper); }
  .map .ct, .g .cur text { fill: var(--paper) !important; }
}
.map .f3 { offset-path: path("M160 90 V150"); animation: flow 1.6s linear infinite; }
.map .f4 { offset-path: path("M160 250 V320"); animation: flow 1.6s linear infinite .8s; }
.map-v { max-width: 20rem; margin: 0 auto; }
.map-h { display: none; }
@media (max-width: 51.99rem) {
  .g { display: grid; grid-template-columns: 6.5rem 1fr; gap: .25rem 1rem; align-items: center; }
  .g svg { grid-row: span 2; margin: 0; }
  .g p { align-self: start; }
  .g h4 { align-self: end; }
}
@media (min-width: 52rem) { .map-h { display: block; } .map-v { display: none; } }
@media (prefers-reduced-motion: reduce) { .map .f3, .map .f4 { animation: none; } }

/* 3 Nov: section 4, connect (one window you can click: API, environments, back office, your app) */
.con-pic [hidden], .con .run-info [hidden] { display: none !important; }
.con-pic { min-height: 17rem; display: grid; align-items: center; }
.cp-api { display: grid; gap: 1.25rem; align-items: center; }
.code { font-family: var(--font-type); font-size: .95rem; line-height: 1.55; background: var(--ink); color: var(--paper); border-radius: .8rem; padding: 1rem 1.1rem; overflow-wrap: anywhere; }
.code b { color: var(--c); }
.code .ans { margin-top: .6rem; padding-top: .6rem; border-top: 1px dashed color-mix(in srgb, var(--paper) 35%, transparent); }
.code .ln { opacity: 0; animation: ln-in .35s ease forwards; }
.code .l1 { animation-delay: .1s; } .code .l2 { animation-delay: .35s; } .code .l3 { animation-delay: .55s; } .code .l4 { animation-delay: .75s; } .code .l5 { animation-delay: 1.25s; }
@keyframes ln-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.mini-ph { justify-self: center; width: 8.5rem; aspect-ratio: 9/16; border: 2px solid var(--ink); border-radius: 1.1rem; background: var(--paper); display: grid; grid-template-rows: 1fr auto; padding: .9rem .6rem .6rem; gap: .4rem; }
.mini-ph .mg { display: grid; grid-template-columns: repeat(4, 1fr); gap: .3rem; align-content: center; }
.mini-ph .mg i { aspect-ratio: 1; border-radius: .3rem; background: var(--c); opacity: 0; transform: scale(.4); animation: pop .3s ease forwards; }
.mini-ph .mg i:nth-child(n) { animation-delay: calc(1.5s + var(--d, 0s)); }
.mini-ph .mg i:nth-child(4n+2) { --d: .05s; } .mini-ph .mg i:nth-child(4n+3) { --d: .1s; } .mini-ph .mg i:nth-child(4n) { --d: .15s; }
.mini-ph .mg i:nth-child(6) { background: #f2b544; } .mini-ph .mg i:nth-child(11) { background: #f2b544; }
.mini-ph span { text-align: center; font-weight: 700; font-size: .85rem; }
@keyframes pop { to { opacity: 1; transform: none; } }
.tree { display: grid; gap: 1rem; font-family: var(--font-type); }
.tcol { display: flex; flex-direction: column; gap: .6rem; }
.tbox { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: .7rem .9rem; border: 1.5px solid var(--ink); border-radius: .5rem; background: var(--paper); }
.tbox b { font-size: 1.05rem; } .tbox small { color: var(--muted); font-size: .85rem; }
.tbox.live { border-color: var(--c); background: color-mix(in srgb, var(--c) 12%, var(--paper)); } .tbox.live b { color: var(--c); }
.tkids { display: flex; flex-direction: column; gap: .5rem; padding-left: 1.4rem; border-left: 2px dashed var(--rule); margin-left: .9rem; }
.tbox.kid { padding: .45rem .8rem; font-size: .95rem; transition: transform .15s ease, border-color .15s; }
.tbox.kid:hover { transform: translateX(3px); border-color: var(--c); }
.tbox.new { border-color: var(--c); color: var(--c); font-weight: 700; animation: pop-in .4s ease; }
@keyframes pop-in { from { opacity: 0; transform: translateY(-6px) scale(.9); } to { opacity: 1; transform: none; } }
.tadd { align-self: flex-start; margin-left: 2.3rem; font: inherit; font-weight: 700; font-size: .9rem; padding: .45rem .9rem; border-radius: 999px; border: 1.5px dashed var(--c); background: transparent; color: var(--c); cursor: pointer; transition: transform .15s ease; }
.tadd:hover:not(:disabled) { transform: translateY(-2px); } .tadd:disabled { border-style: solid; opacity: .7; cursor: default; }
.bo { border: 1.5px solid var(--ink); border-radius: .7rem; background: var(--paper); overflow: hidden; font-size: .95rem; }
.bo-h, .bo-r { display: grid; grid-template-columns: 1fr 3.2rem 6.5rem; gap: .6rem; align-items: center; padding: .55rem .9rem; }
.bo-h { font-family: var(--font-type); font-size: .8rem; color: var(--muted); border-bottom: 1.5px solid var(--ink); }
.bo-r + .bo-r { border-top: 1px solid var(--rule); }
.bo-r { transition: background .15s; } .bo-r:hover { background: color-mix(in srgb, var(--c) 7%, transparent); }
.bo .bet { font-family: var(--font-type); font-size: .85rem; text-align: right; }
.sw { width: 2.6rem; height: 1.5rem; border-radius: 999px; border: 1.5px solid var(--ink); background: var(--rule); position: relative; cursor: pointer; padding: 0; transition: background .2s; }
.sw::after { content: ""; position: absolute; top: .12rem; left: .14rem; width: 1rem; height: 1rem; border-radius: 50%; background: var(--sheet); border: 1.5px solid var(--ink); transition: transform .2s ease; }
.sw[aria-pressed="true"] { background: var(--c); } .sw[aria-pressed="true"]::after { transform: translateX(1.05rem); }
.bo-r:has(.sw[aria-pressed="false"]) > span { opacity: .45; }
.bo-f { display: flex; justify-content: space-between; gap: 1rem; padding: .6rem .9rem; border-top: 1.5px solid var(--ink); font-family: var(--font-type); font-size: .82rem; color: var(--muted); }
.bo-f .rp { color: var(--c); font-weight: 700; white-space: nowrap; }
.plats { display: flex; flex-wrap: wrap; gap: .45rem; margin-bottom: 1.1rem; }
.plats button { font: inherit; font-size: .9rem; font-weight: 600; padding: .35rem .8rem; border-radius: 999px; border: 1.5px solid var(--rule); background: var(--paper); color: var(--ink); cursor: pointer; transition: transform .15s ease; }
.plats button:hover { transform: translateY(-2px); border-color: var(--c); }
.plats button[aria-pressed="true"] { border-color: var(--c); color: var(--c); font-weight: 700; }
.evs { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.evs li { display: flex; justify-content: space-between; gap: 1rem; align-items: baseline; padding: .6rem .9rem; border: 1.5px solid var(--ink); border-left: 6px solid var(--c); border-radius: .5rem; background: var(--paper); opacity: 0; animation: ln-in .4s ease forwards; }
.evs li span { font-family: var(--font-type); font-size: .85rem; color: var(--muted); text-align: right; } .evs em { font-style: normal; }
.evs .e1 { animation-delay: .2s; } .evs .e2 { animation-delay: .8s; } .evs .e3 { animation-delay: 1.4s; }
.evs.go li { animation-name: ln-in2; } @keyframes ln-in2 { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (min-width: 40rem) { .cp-api { grid-template-columns: 1fr auto; } .tree { grid-template-columns: 1fr 1.3fr; align-items: start; } }
@media (prefers-reduced-motion: reduce) { .code .ln, .mini-ph .mg i, .evs li { animation: none; opacity: 1; transform: none; } }
@media (prefers-color-scheme: dark) { .code { background: #0f0c09; color: #f0e8d6; border: 1.5px solid var(--rule); } .sw::after { background: var(--paper); } }
.code b { color: #b9a4f5; }
.bo-h span:last-child { text-align: right; }
@media (min-width: 52rem) { .con-pic { min-height: 23rem; } }
@media (max-width: 39.99rem) { .evs li { flex-direction: column; gap: .1rem; } .evs li span { text-align: left; } .code { font-size: .85rem; } }

/* 3 Nov: section 5, start */
.s5 { background: var(--tint); }
.s5w { margin-top: 2rem; display: grid; gap: 1.5rem; }
@media (min-width: 52rem) { .s5w { grid-template-columns: 1fr 1fr; } }
.s5c { text-align: left; background: var(--paper); border: 2px solid var(--ink); border-radius: .9rem; padding: 1.4rem; display: flex; flex-direction: column; gap: .5rem; transition: transform .15s, box-shadow .15s; box-shadow: 0 4px 0 var(--ink); }
.s5c:hover { transform: translateY(-4px); box-shadow: 0 8px 0 var(--ink); }
.s5c h3 { font-size: clamp(1.7rem, 3.4vw, 2.25rem); margin-top: .6rem; }
.s5c > p { color: var(--muted); }
.s5c .btn { align-self: flex-start; margin-top: auto; }
.wpic { height: 11rem; border-radius: .7rem; background: var(--tint2); background-image: radial-gradient(color-mix(in srgb, var(--ink) 18%, transparent) 1px, transparent 1.2px); background-size: 14px 14px; display: grid; place-items: center; position: relative; overflow: hidden; }
/* try: a phone in sandbox */
.tph { width: 8.5rem; padding: .55rem; border: 2px solid var(--ink); border-radius: 1rem; background: var(--paper); display: grid; gap: .4rem; justify-items: center; }
.sbx { font: 700 .7rem/1 var(--font-body, Figtree, sans-serif); text-transform: uppercase; letter-spacing: .06em; background: var(--c); color: #fff7ec; padding: .25rem .5rem; border-radius: 99px; }
.tg { display: grid; grid-template-columns: repeat(3, 1.6rem); gap: .3rem; }
.tg i { height: 1.6rem; border-radius: .3rem; background: var(--tint2); border: 1.5px solid var(--ink); animation: s5flip .5s both; }
.tg i:nth-child(2){animation-delay:.08s}.tg i:nth-child(3){animation-delay:.16s}.tg i:nth-child(4){animation-delay:.24s}.tg i:nth-child(5){animation-delay:.32s;background:var(--c)}.tg i:nth-child(6){animation-delay:.4s}.tg i:nth-child(7){animation-delay:.48s}.tg i:nth-child(8){animation-delay:.56s;background:var(--c)}.tg i:nth-child(9){animation-delay:.64s}
.s5c:hover .tg i { animation-name: s5flip2; }
.tm { font: .7rem/1 'Courier Prime', monospace; }
@keyframes s5flip { from { transform: rotateY(90deg); } to { transform: none; } }
@keyframes s5flip2 { from { transform: rotateY(90deg); } to { transform: none; } }
/* own: a track with three stops */
.own-pic { place-items: stretch; padding: 1.2rem 1.4rem; }
.trk { position: absolute; left: 16%; right: 16%; top: 3.1rem; border-top: 3px dashed var(--ink); }
.trk .dot { position: absolute; top: -.6rem; left: 0; width: 1.05rem; height: 1.05rem; border-radius: 50%; background: var(--c); border: 2px solid var(--ink); animation: s5go 2.4s ease-in-out both; }
.s5c:hover .trk .dot { animation-name: s5go2; }
@keyframes s5go { 0% { left: 0; } 45%,55% { left: calc(50% - .5rem); } 100% { left: calc(100% - 1rem); } }
@keyframes s5go2 { 0% { left: 0; } 45%,55% { left: calc(50% - .5rem); } 100% { left: calc(100% - 1rem); } }
.stops { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); align-items: start; }
.st { display: grid; justify-items: center; gap: .55rem; }
.st small { font-weight: 700; font-size: .85rem; }
.bub, .mk, .lv { width: 3.6rem; height: 3.6rem; border: 2px solid var(--ink); background: var(--paper); display: grid; align-content: center; justify-items: start; gap: .3rem; padding: 0 .55rem; }
.bub { border-radius: 1rem 1rem 1rem .2rem; }
.bub i { height: .25rem; border-radius: 9px; background: var(--ink); width: 100%; }
.bub i:last-child { width: 60%; }
.mk { border-radius: .6rem; grid-template-columns: repeat(3, 1fr); gap: .2rem; padding: .55rem .4rem; }
.mk i { height: 2.2rem; border-radius: .25rem; border: 1.5px dashed var(--ink); animation: s5fill .4s both; animation-delay: 1s; }
.mk i:nth-child(2) { animation-delay: 1.15s; } .mk i:nth-child(3) { animation-delay: 1.3s; }
.s5c:hover .mk i { animation-name: s5fill2; }
@keyframes s5fill { from { background: transparent; } to { background: var(--c); border-style: solid; } }
@keyframes s5fill2 { from { background: transparent; } to { background: var(--c); border-style: solid; } }
.lv { border-radius: .8rem; justify-items: center; font-size: 1.6rem; color: var(--c); animation: s5pop .4s both; animation-delay: 2.2s; }
.s5c:hover .lv { animation-name: s5pop2; }
@keyframes s5pop { 0% { transform: scale(.6); } 70% { transform: scale(1.15); } 100% { transform: none; background: color-mix(in srgb, var(--c) 18%, var(--paper)); } }
@keyframes s5pop2 { 0% { transform: scale(.6); } 70% { transform: scale(1.15); } 100% { transform: none; background: color-mix(in srgb, var(--c) 18%, var(--paper)); } }
/* steps as a red path */
.path { list-style: none; margin: .6rem 0 .4rem; padding: 0; counter-reset: s5; display: grid; gap: .8rem; }
.path li { counter-increment: s5; position: relative; padding-left: 2.6rem; }
.path li::before { content: counter(s5); position: absolute; left: 0; top: 0; width: 1.8rem; height: 1.8rem; border-radius: 50%; background: var(--c); color: #fff7ec; font-weight: 700; display: grid; place-items: center; }
.path li:not(:last-child)::after { content: ""; position: absolute; left: .85rem; top: 1.9rem; bottom: -.8rem; border-left: 2px dashed var(--c); }
.path b { display: block; }
.path span { display: block; color: var(--muted); font-size: .9375rem; }
.wnote { font-size: .9rem; color: var(--muted); border-left: 4px solid var(--c); padding-left: .6rem; margin-bottom: .8rem; }
/* enterprise band */
.ent5 { margin-top: 1.5rem; display: grid; gap: 1.4rem; background: var(--ink); color: var(--paper); border-radius: .9rem; padding: 1.6rem 1.4rem; align-items: center; }
.ent5 h3 { font-size: clamp(1.8rem, 3.6vw, 2.4rem); }
.ent5-text > p { opacity: .8; margin-top: .2rem; }
.s5chips { list-style: none; margin: .9rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.s5chips li { border: 1.5px solid currentColor; border-radius: 99px; padding: .3rem .8rem; font-size: .9rem; }
.ent5 .btn { justify-self: start; box-shadow: none; }
.rack { position: relative; width: 7rem; display: grid; gap: .35rem; }
.rack > span { height: 1.4rem; border-radius: .3rem; border: 2px solid var(--paper); display: flex; gap: .3rem; align-items: center; padding-left: .4rem; }
.rack i { width: .4rem; height: .4rem; border-radius: 50%; background: var(--c); animation: s5blink 1.6s infinite; }
.rack span:nth-child(2) i { animation-delay: .5s; } .rack span:nth-child(3) i { animation-delay: 1s; }
.rack i + i { background: #5fbf86; }
.lock { position: absolute; right: -.7rem; bottom: -.7rem; width: 1.9rem; height: 1.6rem; border-radius: .35rem; background: var(--c); border: 2px solid var(--paper); }
.lock::before { content: ""; position: absolute; left: .3rem; right: .3rem; top: -.75rem; height: .8rem; border: 2px solid var(--paper); border-bottom: 0; border-radius: .6rem .6rem 0 0; }
@keyframes s5blink { 50% { opacity: .25; } }
@media (min-width: 52rem) { .ent5 { grid-template-columns: auto 1fr auto; padding: 2rem 2.25rem; gap: 2.5rem; } }
@media (prefers-reduced-motion: reduce) { .s5 *, .ent5 * { animation: none !important; transition: none !important; } .mk i { background: var(--c); border-style: solid; } }
.own-pic { align-content: center; }
.trk { top: 50%; margin-top: -1.15rem; }
.tph { width: 10rem; } .tm { font-size: .65rem; white-space: nowrap; }
@keyframes s5go { 0% { left: 0; } 40%,55% { left: calc(50% - 3rem); } 100% { left: calc(100% - 3rem); } }
@keyframes s5go2 { 0% { left: 0; } 40%,55% { left: calc(50% - 3rem); } 100% { left: calc(100% - 3rem); } }
/* resting state = end of the move, so a still picture or reduced motion shows the finished path */
.mk { justify-items: stretch; }
.mk i { background: var(--c); border-style: solid; animation-fill-mode: backwards; }
.trk .dot { left: calc(100% - 3rem); animation-fill-mode: backwards; z-index: 1; }
.lv { background: color-mix(in srgb, var(--c) 18%, var(--paper)); animation-fill-mode: backwards; }

/* 3 Nov: one text scale for the whole home page. Main title > section title > sub title > card title > body. */
.hero2 h1, .hero h1 { font-size: clamp(2rem, 4.2vw, 3.25rem); line-height: 1.04; }
h2 { font-size: clamp(1.6rem, 3vw, 2.25rem); }
.games .sub-h, .yours .sub-h, .grow-h { font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
.s5c h3, .ent5 h3 { font-size: clamp(1.3rem, 2.2vw, 1.6rem); }
.try-h span, .bld .try-h span { font-size: 1.4rem; }
.mail { font-size: clamp(1.3rem, 4vw, 2.25rem); }
.contact p.ask { margin-top: 2rem; font-size: 1rem; }
.contact p.ask a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: .2em; }