/* Gizmo Garage website. Colours follow the game's own (www/css/style.css). No inline styles anywhere: the
   Content-Security-Policy allows only this file. */
/* Inter, the game's one font (the user, 2026-10-24): build.py puts www/css/style.css's @font-face blocks here, with
   font-display swap, and copies www/fonts/ to /fonts/, so the font is declared and stored once. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/inter-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url(../fonts/inter-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
:root {
  --bg: #171b22;
  --bg-2: #1d222a;
  --panel: #262b33;
  --panel-2: #2f3743;
  --line: rgba(255, 255, 255, 0.08);
  --text: #f6f1e7;
  --soft: #d7dce3;
  --muted: #aab3bf;
  --faint: #8f99a6;
  --accent: #ffb020;
  --accent-dark: #b97800;
  --logo: #ffcc33;
  --logo-shadow: #b36b00;
  --gear: #ff8a3d;
  --go: #36b86a;
  --blue: #4b88e0;
  --blue-dark: #2d5ea8;
  --wall: #e2c895;
  /* Behind a part's picture: in HD the game's own HD tray card (www/css/style.css body.look-hd .tray-item), on which its
     lit parts, drawn without outlines, are made to be seen: on the pegboard's beige they were lost (the user, 2026-10-29:
     "the hd parts on the website, they are very hard to see against the background"); in SD the pegboard's beige, under
     its inked parts. HD is the pages' look, so it's the default; look.js marks SD (html[data-look]). */
  --icon-bg: radial-gradient(120% 90% at 50% 20%, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.03)), linear-gradient(180deg, #1a1f28, #0f1218);
  --icon-edge: rgba(255, 255, 255, 0.08);
  --scrim: rgba(34, 40, 49, 0.74);
  color-scheme: dark;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--text);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 76px; }
body { margin: 0; background: var(--bg); line-height: 1.5; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; height: auto; }
h1, h2, h3 { line-height: 1.15; }
.wrap { width: min(1200px, 100% - 32px); margin: 0 auto; }
:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 20; padding: 10px 14px; border-radius: 10px; background: var(--accent); color: #2a1d00; font-weight: 800; }
.skip:focus { top: 12px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.prose a, a.link { color: var(--accent); text-decoration: underline; text-underline-offset: 2px; }

/* Top bar */
.nav { position: sticky; top: 0; z-index: 10; background: rgba(23, 27, 34, 0.9); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line); }
.nav .wrap { display: flex; align-items: center; gap: 28px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 900; letter-spacing: 0.5px; text-transform: uppercase; color: var(--logo); font-size: 18px; text-shadow: 0 2px 0 var(--logo-shadow); white-space: nowrap; }
.brand svg { flex: none; width: 30px; height: 30px; fill: var(--gear); stroke: #23262d; stroke-width: 5; }
.brand svg circle { fill: #23262d; }
.brand img { flex: none; display: block; width: 30px; height: 30px; max-width: none; } /* (HD's gear, build.py BRAND_GEAR; never squeezed, as SD's isn't) */
.nav-links { display: flex; gap: 22px; margin-left: auto; font-weight: 600; font-size: 15px; color: var(--muted); }
.nav-links a:hover, .nav-links a[aria-current] { color: var(--text); }
.nav-cta { height: 40px; padding: 0 18px; border-radius: 20px; background: var(--accent); color: #2a1d00; font-weight: 800; display: inline-flex; align-items: center; box-shadow: 0 3px 0 var(--accent-dark); white-space: nowrap; }
/* The sandbox, right of Get the game: the game's own blue Sandbox button (www/css/style.css .big-btn.alt), its colour,
   pill and press shadow, at the top bar's size (the user, 2026-10-19) */
.nav-sandbox { height: 40px; margin-left: -16px; padding: 0 18px; border-radius: 20px; background: var(--blue); color: #fff; font-weight: 800; display: inline-flex; align-items: center; box-shadow: 0 3px 0 var(--blue-dark); white-space: nowrap; }
.nav-sandbox:active, .btn.sandbox:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--blue-dark); }
/* The SD/HD switch (look.js, site.js): the game's pictures in either look, as the game's own toggle on its title */
.look-pick { display: none; padding: 3px; border-radius: 18px; background: var(--panel-2); border: 1px solid var(--line); }
html[data-look="sd"] { --icon-bg: var(--wall); --icon-edge: rgba(0, 0, 0, 0.12); } /* (SD's part pictures: --icon-bg above) */
html[data-look] .look-pick { display: inline-flex; } /* (without look.js, no switch: the pages show HD) */
.look-pick button { height: 30px; min-width: 40px; padding: 0 10px; border: 0; border-radius: 15px; background: none; color: var(--muted); font: inherit; font-size: 13px; font-weight: 800; cursor: pointer; }
.look-pick button:hover { color: var(--text); }
/* the look in use, from html[data-look] (look.js, in the head): right from the first frame */
html[data-look="sd"] .look-pick [data-look="sd"], html[data-look="hd"] .look-pick [data-look="hd"] { background: var(--accent); color: #2a1d00; }
.look-pick button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.menu { display: none; margin-left: auto; position: relative; }
.menu summary { list-style: none; width: 44px; height: 44px; border-radius: 12px; background: var(--panel-2); display: grid; place-items: center; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary svg { width: 22px; height: 22px; stroke: var(--text); stroke-width: 2.2; fill: none; stroke-linecap: round; }
.menu nav { position: absolute; right: 0; top: 52px; width: 220px; padding: 8px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 16px 40px rgba(0, 0, 0, 0.5); display: grid; }
.menu nav a { padding: 12px 14px; border-radius: 10px; font-weight: 700; }
.menu nav a:hover { background: var(--panel-2); }
/* Get the game and Sandbox in the opened menu (phones): plain links, their text the bar's buttons' colours, the yellow
   and the blue (the user, 2026-10-19) */
.menu nav .menu-sandbox { color: var(--blue); }
.menu nav .menu-get { color: var(--accent); }

/* The title-screen logo */
.logo { display: flex; align-items: center; gap: 18px; }
.logo h1 { margin: 0; font-size: 84px; line-height: 0.9; font-weight: 900; letter-spacing: 1px; text-align: left; text-transform: uppercase; color: var(--logo); text-shadow: 0 5px 0 var(--logo-shadow), 0 12px 28px rgba(0, 0, 0, 0.55); } /* (left-aligned beside the gear, as HD's lettering; the user, 2026-10-29) */
.gear { width: 130px; height: 130px; fill: var(--gear); stroke: #23262d; stroke-width: 4; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.5)); animation: spin 9s linear infinite; }
.gear circle { fill: #23262d; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .gear { animation: none; } html { scroll-behavior: auto; } }
/* HD's logo (build.py HD_LOGO): the game's own pictures, laid out as the game lays them (www/css/style.css .hd-logo, in
   the logo's 500 x 172 units), in place of SD's drawn gear and lettering while the pages are in HD. A look's pieces:
   .sd-only and .hd-only, from html[data-look] (look.js; without it, HD). In HD the heading stays, for screen readers
   and search, out of sight. */
html[data-look="sd"] .hd-only, html:not([data-look="sd"]) .sd-only { display: none; }
html:not([data-look="sd"]) .logo h1 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hd-logo { position: relative; display: block; flex: none; width: min(494px, calc(100vw - 32px)); aspect-ratio: 500 / 172; }
.hd-logo > img { position: absolute; display: block; max-width: none; pointer-events: none; user-select: none; }
.hd-logo > .hd-logo-gear { left: 0.2%; top: 2.907%; width: 32.4%; height: 94.186%; }
.hd-logo > .hd-logo-gear-shadow { left: -4%; top: -5.233%; width: 40.8%; height: 118.605%; }
.hd-logo > .hd-logo-gear, .hd-logo > .hd-logo-gear-shadow { animation: spin 9s linear infinite; will-change: transform; }
.hd-logo > .hd-logo-words { left: 0; top: 0; width: 100%; height: 100%; }
.hd-logo > .hd-logo-words-shadow { left: 29.6%; top: -9.302%; width: 75.2%; height: 126.744%; }
/* the shine: a band 90 units wide slanted 18 degrees, swept behind the letters' mask in the first 30% of 5.5 s */
.hd-logo-shine {
  position: absolute; left: 34.4%; top: 0; width: 65.6%; height: 100%; overflow: hidden; pointer-events: none;
  -webkit-mask: url(/img/logo-hd/logo-mask.webp) 0 0 / 100% 100% no-repeat; mask: url(/img/logo-hd/logo-mask.webp) 0 0 / 100% 100% no-repeat;
}
.hd-logo-shine i {
  position: absolute; left: 0; top: 0; width: 27.439%; height: 100%; transform-origin: 0 0; will-change: transform;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0));
  animation: hd-shine 5.5s linear infinite;
}
@keyframes hd-shine {
  0% { transform: translateX(-346.67%) skewX(-18deg); }
  30%, 100% { transform: translateX(520%) skewX(-18deg); }
}
@media (prefers-reduced-motion: reduce) { .hd-logo > img { animation: none; } .hd-logo-shine { display: none; } }
.tagline { margin: 0; padding: 7px 20px; border-radius: 999px; background: rgba(22, 26, 33, 0.8); font-size: 19px; font-weight: 600; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35); }

/* Store buttons: "coming soon" until a store is live, then that store's official badge */
.stores { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.soon, .badge { display: flex; align-items: center; gap: 10px; height: 58px; min-width: 196px; padding: 0 18px 0 14px; border-radius: 12px; }
.soon { background: rgba(22, 26, 33, 0.82); border: 1.5px dashed #6b7480; color: #dfe4ea; }
.soon svg { width: 28px; height: 28px; flex: none; color: var(--muted); fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.soon > span { text-align: left; }
.soon small { display: block; font-size: 11px; font-weight: 800; letter-spacing: 0.4px; line-height: 1.1; text-transform: uppercase; color: #8fb8f2; }
.soon b { display: block; font-size: 20px; font-weight: 600; line-height: 1.15; }
.badge { padding: 0; min-width: 0; }
/* Google's badge PNG keeps its clear space (41 of its 250 px on each side): sized so the badge itself is 58 px tall,
   with the clear space over the gap beside it. The file is used as Google ships it. No max-width: the img rule's 100%
   squeezed it to its box (the negative margins make the box narrower than the picture), unevening the gaps. */
.badge img { height: 86px; width: auto; max-width: none; margin: -14px; }
.soon.sm { height: 46px; min-width: 0; padding: 0 14px 0 10px; }
.soon.sm svg { width: 22px; height: 22px; }
.soon.sm b { font-size: 16px; }
.soon.sm small { font-size: 9.5px; }
.facts { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; list-style: none; }
.facts li { padding: 5px 12px; border-radius: 999px; background: rgba(22, 26, 33, 0.72); color: #dfe4ea; font-size: 14px; font-weight: 600; }

/* Home: the game's title screen, with store buttons where Play and Sandbox are */
.hero { position: relative; height: min(760px, calc(100svh - 64px)); min-height: 600px; overflow: hidden; background: #3a3530; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; padding: 0 16px; }
.hero > .hero-pic { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The game's own title-screen shading (www/css/style.css), applied once: the picture is captured without it */
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: radial-gradient(ellipse at center, rgba(22, 26, 33, 0.35), rgba(22, 26, 33, 0.82)); }
.hero > :not(.hero-pic) { position: relative; z-index: 2; }
.hero .stores { margin-top: 10px; }

section.block { padding: 88px 0; }
section.block.alt { background: var(--bg-2); }
.eyebrow { color: var(--accent); font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; font-size: 13px; margin: 0 0 8px; }
h2.title { margin: 0 0 14px; font-size: 40px; font-weight: 900; }
.lead { margin: 0; color: var(--muted); font-size: 18px; line-height: 1.55; max-width: 640px; }
.center { text-align: center; }
.center .lead { margin: 0 auto; }
.left { text-align: left; }
.row-head { display: flex; align-items: end; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.row-head h2.title { margin: 0; }

.how { display: grid; grid-template-columns: 1.35fr 1fr; gap: 56px; align-items: center; }
.device { position: relative; padding: 14px; border-radius: 34px; background: #0d0f13; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5), inset 0 0 0 2px #2b2f36; }
.device img { border-radius: 20px; width: 100%; }
/* The gameplay video (tools/video.py): its still shows instead when the visitor has turned motion off */
.device video { display: block; width: 100%; height: auto; aspect-ratio: 1280 / 592; object-fit: cover; border-radius: 20px; background: #0d0f13; }
.device .still { display: none; }
.device .pause { position: absolute; right: 26px; bottom: 26px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(13, 15, 19, 0.7); color: var(--text); cursor: pointer; opacity: 0.8; }
.device .pause:hover, .device .pause:focus-visible { opacity: 1; }
.device .pause svg { width: 18px; height: 18px; fill: currentColor; }
@media (prefers-reduced-motion: reduce) {
  .device video, .device .pause { display: none; }
  .device .still { display: block; }
}
.steps { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 18px; }
.steps li { display: grid; grid-template-columns: 48px 1fr; gap: 16px; align-items: start; }
.steps .n { width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: #2a1d00; font-weight: 900; font-size: 22px; box-shadow: 0 3px 0 var(--accent-dark); }
.steps h3 { margin: 4px 0 4px; font-size: 20px; }
.steps p { margin: 0; color: var(--muted); }

.features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 40px; text-align: left; }
.feature { padding: 26px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); }
.ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 16px; }
.ic svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ic.amber { background: rgba(255, 176, 32, 0.15); color: #ffb020; }
.ic.green { background: rgba(54, 184, 106, 0.15); color: #6fdc98; }
.ic.violet { background: rgba(126, 87, 232, 0.18); color: #b39cf5; }
.ic.blue { background: rgba(75, 136, 224, 0.18); color: #8fb8f2; }
.ic.yellow { background: rgba(255, 204, 51, 0.15); color: #ffcc33; }
.ic.orange { background: rgba(239, 108, 58, 0.15); color: #ff9a6b; }
.ic.grey { background: rgba(170, 179, 191, 0.15); color: var(--muted); }
.feature h3 { margin: 0 0 6px; font-size: 19px; }
.feature p { margin: 0; color: var(--muted); font-size: 15px; }

/* Chapters */
.chapters { margin-left: 0; margin-right: 0; padding: 0; list-style: none; }
.chapters { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; margin-top: 40px; text-align: left; }
/* A card is a column: picture, text, then its Free, Expansion or Bonus tag pushed to the bottom, so a row's tags
   line up whatever the text above them (the user, 2026-10-19) */
.chapter { border-radius: 16px; overflow: hidden; background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; }
.chapter > a { display: flex; flex-direction: column; flex: 1; }
.chapter .pic { flex: none; }
.chapter:hover { border-color: #4a5462; }
.chapter .pic { position: relative; aspect-ratio: 2 / 1; background: var(--wall); }
.chapter .pic img { width: 100%; height: 100%; object-fit: cover; }
.chapter .pic::after { content: ""; position: absolute; inset: 0; background: linear-gradient(transparent 40%, rgba(23, 27, 34, 0.6)); }
.chapter .num { position: absolute; left: 10px; bottom: 6px; z-index: 1; font-weight: 900; font-size: 26px; color: var(--accent); text-shadow: 0 2px 6px rgba(0, 0, 0, 0.6); }
.chapter .body { flex: 1; display: flex; flex-direction: column; align-items: stretch; padding: 12px 14px 14px; }
.chapter .body > .tag { align-self: flex-start; margin-top: auto; }
.chapter .body > :has(+ .tag) { margin-bottom: 8px; } /* the tag's own gap, which margin-top: auto replaces */
.chapter h3 { margin: 0 0 4px; font-size: 16px; }
.chapter p { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.4; }
.tag { display: inline-block; margin-top: 8px; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: 0.4px; text-transform: uppercase; }
/* The three packs' tags, none of them amber (the par pills' colour): Free green, Expansion blue, Bonus purple */
.tag.free { background: rgba(54, 184, 106, 0.18); color: #6fdc98; }
.tag.exp { background: rgba(75, 136, 224, 0.2); color: #8fb8f2; }
.tag.bonus { background: rgba(126, 87, 232, 0.24); color: #c3b0f7; }

/* A padlock: in a chapter card's top-right corner (chapters 6-20 keep it once unlocked on the site, the user,
   2026-10-18), beside a level card's dots, and big in the middle of a locked bonus level's darkened picture */
.lock { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: rgba(0, 0, 0, 0.5); }
.lock svg { width: 13px; height: 13px; fill: #dfe4ea; }
.chapter .pic > .lock { position: absolute; z-index: 2; right: 8px; top: 8px; }
.lock.big { position: absolute; z-index: 2; left: 50%; top: 50%; width: 46px; height: 46px; transform: translate(-50%, -50%); background: rgba(13, 15, 19, 0.6); box-shadow: 0 0 0 2px rgba(195, 176, 247, 0.35); }
.lock.big svg { width: 22px; height: 22px; fill: #e6defc; }
.chapter .pic > .lock.big, .card .pic > .lock.big { left: 50%; top: 50%; right: auto; }
.chapter.bonus .pic::before, .card.locked .pic::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(23, 27, 34, 0.6); }
/* A bonus slot not built yet: a plain picture (the pegboard's colour, darkened, with a faint gear), no link */
.pic.plain, .card .pic.plain { display: grid; place-items: center; background: #6b5d44; overflow: hidden; }
.pic.plain > svg:first-child { width: 42%; height: auto; fill: rgba(255, 255, 255, 0.07); }
.pic.plain > svg:first-child circle { fill: #6b5d44; }
.chapter.coming { background: #20252d; }
.chapter.coming h3 { color: #c9d0da; }
.chapter .pic.icons { display: flex; align-items: center; justify-content: center; gap: 14px; background: var(--icon-bg); }
.chapter .pic.icons img { width: 64px; height: auto; }

.expansion { margin-top: 56px; }
.expansion.centered .row-head { flex-direction: column; align-items: center; text-align: center; gap: 12px; }
.expansion.centered .lead { margin: 0 auto; }
.unlock { margin: 0; display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(75, 136, 224, 0.16); color: #b5d0f7; font-weight: 700; font-size: 15px; }
.unlock svg { width: 14px; height: 14px; fill: currentColor; flex: none; }
.chapters.more, .chapters.bonus-levels { margin-top: 26px; }

/* Level cards, as in the game's "Pick a Contraption" */
.grid { display: grid; gap: 12px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
/* A level: its starting layout whole and bright, then its number and name in a caption bar */
.card { position: relative; border-radius: 14px; border: 2px solid #3b4452; background: var(--panel); overflow: hidden; display: flex; flex-direction: column; }
.card .pic { position: relative; display: block; aspect-ratio: 2 / 1; background: var(--wall); }
.card .pic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card .cap { display: flex; align-items: center; gap: 7px; padding: 6px 8px; min-height: 40px; }
.card .num { flex: none; font-size: 20px; font-weight: 900; line-height: 1; color: var(--accent); }
.card .name { font-size: 12.5px; font-weight: 600; line-height: 1.15; -webkit-hyphens: manual; hyphens: manual; overflow-wrap: break-word; min-width: 0; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; }
/* Top right: the difficulty dots, and on the expansion's levels a padlock beside them */
.card .marks { position: absolute; z-index: 3; top: 5px; right: 5px; display: flex; align-items: center; gap: 3px; }
.card .diff { display: flex; gap: 2px; padding: 3px 5px; border-radius: 999px; background: rgba(23, 27, 34, 0.8); }
.card .marks .lock { width: 17px; height: 17px; background: rgba(23, 27, 34, 0.8); }
.card .marks .lock svg { width: 10px; height: 10px; fill: #b5d0f7; }
.diff i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); }
.diff i.on { background: var(--accent); }
.card:hover, .card[aria-current] { border-color: var(--accent); }
.card[aria-current] { box-shadow: 0 0 0 3px rgba(255, 176, 32, 0.25); }
.card[hidden] { display: none; }
.card.locked .lock.big { width: 34px; height: 34px; }
.card.locked .lock.big svg { width: 16px; height: 16px; }
.card.locked .num { color: #c3b0f7; }
.card.slot, .card.slot:hover { border-color: #313945; background: #20252d; }
.card.slot .num, .card.slot .name { color: var(--faint); }

.btn { display: inline-flex; align-items: center; gap: 8px; height: 50px; padding: 0 26px; border-radius: 25px; font-weight: 800; font-size: 17px; border: 0; cursor: pointer; font-family: inherit; }
.btn.primary { background: var(--accent); color: #2a1d00; box-shadow: 0 4px 0 var(--accent-dark); }
.btn.ghost { background: var(--panel-2); color: var(--text); }
.btn.sandbox { background: var(--blue); color: #fff; box-shadow: 0 4px 0 var(--blue-dark); }
/* Home: the sandbox on this site, under the "Why you'll keep tinkering" cards (the user, 2026-10-19) */
.try-sandbox { margin-top: 30px; display: flex; flex-direction: column; align-items: center; gap: 10px; }
.try-sandbox p { margin: 0; color: var(--muted); font-size: 15px; }

.faq { max-width: 820px; margin: 36px auto 0; display: grid; gap: 10px; text-align: left; }
.faq details { background: var(--panel); border: 1px solid var(--line); border-radius: 14px; padding: 18px 22px; }
.faq summary { font-weight: 700; font-size: 17px; list-style: none; display: flex; justify-content: space-between; gap: 12px; cursor: pointer; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--accent); font-weight: 900; }
.faq details[open] summary::after { content: "–"; }
.faq p { margin: 10px 0 0; color: var(--muted); }

.cta-band { position: relative; padding: 80px 0; overflow: hidden; text-align: center; }
.cta-band > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 70%; }
.cta-band::before { content: ""; position: absolute; inset: 0; z-index: 1; background: rgba(22, 26, 33, 0.74); }
.cta-band > .wrap { position: relative; z-index: 2; }
.cta-band .lead { margin: 0 auto 26px; color: #dfe4ea; }

footer { padding: 48px 0 40px; border-top: 1px solid var(--line); color: var(--muted); font-size: 14px; }
footer .cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 28px; }
footer h2 { margin: 0 0 10px; color: var(--text); font-size: 14px; }
footer .cols a { display: block; margin: 6px 0; }
footer .cols a.brand { display: inline-flex; margin: 0; } /* the gear and the name side by side, as in the top bar */
footer .cols a:hover { color: var(--text); }
footer .cols p { margin: 10px 0 0; }
footer .legal { margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; gap: 12px; font-size: 13px; }

/* Levels */
.page-head { padding: 36px 0 18px; }
.page-head h1 { margin: 0 0 6px; font-size: 38px; font-weight: 900; }
.page-head p { margin: 0; color: var(--muted); font-size: 16px; }
.tools { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.field { flex: 1; min-width: 220px; height: 44px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); display: flex; align-items: center; gap: 10px; padding: 0 14px; color: var(--muted); }
.field svg { width: 18px; height: 18px; stroke: var(--muted); fill: none; stroke-width: 2; flex: none; }
.field input { flex: 1; min-width: 0; height: 100%; border: 0; background: none; color: var(--text); font: inherit; font-size: 15px; outline: none; }
.field:focus-within { outline: 3px solid var(--accent); outline-offset: 2px; }
.tools select { height: 44px; padding: 0 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); color: var(--text); font: inherit; font-size: 15px; font-weight: 600; }
.no-match { margin: 24px 0 0; color: var(--muted); }
/* Five tabs, five chapters (50 levels) at most on screen at once (the user, 2026-10-18): 1-5, 6-10, 11-15, 16-20 and
   the bonus chapter, each with its pack's colour */
.strip { display: flex; flex-wrap: wrap; gap: 6px; padding: 6px 0 4px; }
.strip a { flex: none; min-width: 40px; height: 36px; padding: 0 14px; border-radius: 10px; background: var(--panel-2); color: #c9d0da; font-weight: 800; font-size: 14px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.strip a:hover { background: #3b4452; }
.strip a::before { content: ""; width: 8px; height: 8px; border-radius: 50%; flex: none; background: #6fdc98; }
.strip a.exp::before { background: #8fb8f2; }
.strip a.bonus::before { background: #c3b0f7; }
.strip a[aria-current] { background: var(--accent); color: #2a1d00; box-shadow: 0 3px 0 var(--accent-dark); }
.strip a[aria-current]::before { box-shadow: 0 0 0 2px rgba(42, 29, 0, 0.55); }
.strip .hits { min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: rgba(0, 0, 0, 0.3); font-size: 12px; display: inline-grid; place-items: center; }
.strip .hits[hidden] { display: none; }
.browser { display: grid; grid-template-columns: minmax(0, 1fr) 470px; gap: 28px; align-items: start; padding: 18px 0 0; }
.ch-head { display: flex; align-items: baseline; gap: 10px; margin: 18px 0 10px; flex-wrap: wrap; }
.ch-head h2 { margin: 0; font-size: 20px; }
.ch-head span { color: var(--muted); font-size: 14px; font-weight: 600; }
.ch-head .tag { margin: 0; }
/* The chapter's difficulty, right-aligned on its title's line: the word, then five amber dots (as in the game) */
.ch-head .ch-diff { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; align-self: center; }
.ch-head .ch-diff b { color: var(--text); font-size: 14px; }
.ch-diff .diff { display: flex; gap: 3px; }
.ch-diff .diff i { width: 9px; height: 9px; }
.chapter-levels[hidden] { display: none; }
.pane-note { margin: 14px 0 0; display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14px; font-weight: 600; }
.pane-note svg { width: 14px; height: 14px; flex: none; fill: currentColor; }
/* Previous and next under a tab's cards (the user, 2026-10-19): the tabs' look, next on the right */
.pane-pn { display: flex; justify-content: space-between; gap: 10px; margin: 22px 0 6px; }
.pane-step { height: 40px; padding: 0 16px; border-radius: 10px; background: var(--panel-2); color: #c9d0da; font-weight: 800; font-size: 14px; display: inline-flex; align-items: center; }
.pane-step:hover { background: #3b4452; color: var(--text); }
.pane-step.next { margin-left: auto; }
.tab-pane > .chapter-levels:first-of-type .ch-head { margin-top: 14px; }
/* Without the script, a tab's link still shows its chapters (and a link to a chapter, its tab) */
[data-levels]:not(.tabs-js) .tab-pane[hidden]:is(:target, :has(:target)) { display: block; }
[data-levels]:not(.tabs-js):has(.tab-pane[hidden]:is(:target, :has(:target))) .tab-pane:not([hidden]) { display: none; }

.detail { border-radius: 20px; background: var(--panel); border: 1px solid var(--line); overflow: hidden; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35); }
/* The side panel starts level with the first chapter's heading (its 18 px top margin), then stays in view under
   the top bar as the grid scrolls. The panel box sticks, not the card: a card that sticks inside a box its own
   height never moves. */
.browser > #panel { position: sticky; top: 82px; margin-top: 18px; }
/* Room below the last row, so the panel (nearly a screen tall) can keep following down to the last levels */
@media (min-width: 1101px) { .browser > [data-levels] { padding-bottom: 300px; } }
.detail .shot { position: relative; background: #1d2229; }
.detail .shot img { width: 100%; aspect-ratio: 1280 / 592; }
/* In the levels page's side panel only: a way to the level's own page */
.detail .open-page { position: absolute; right: 10px; bottom: 10px; padding: 6px 12px; border-radius: 999px; background: var(--accent); color: #2a1d00; font-size: 13px; font-weight: 800; box-shadow: 0 2px 0 var(--accent-dark), 0 4px 12px rgba(0, 0, 0, 0.35); }
.detail .open-page:hover { background: #ffc24d; }
.level-page .open-page { display: none; }
.detail .shot span { position: absolute; left: 10px; bottom: 10px; padding: 3px 9px; border-radius: 8px; background: rgba(0, 0, 0, 0.6); font-size: 12px; font-weight: 600; color: #dfe4ea; }
.detail .shot .shot-note.locked { display: inline-flex; align-items: center; gap: 6px; background: rgba(43, 30, 82, 0.88); color: #e6defc; font-weight: 800; }
.detail .shot .shot-note.locked svg { width: 12px; height: 12px; fill: currentColor; }
.detail .shot .shot-note.locked.exp { background: rgba(18, 40, 78, 0.88); color: #d3e3fa; } /* the expansion's blue */
/* The picture opens enlarged (site.js's lightbox; the user, 2026-10-19). The whole picture is the link; its visible
   control is a translucent expand button in the top-right corner, clear of the label (bottom left) and the panel's
   "Open level page" (bottom right), a little darker on hover and focus. The label lets taps through to the picture. */
.detail .shot .zoom { position: absolute; inset: 0; cursor: zoom-in; }
.detail .shot .zoom:focus-visible { outline: none; }
.detail .shot .shot-note { pointer-events: none; }
.zoom-btn { position: absolute; top: 10px; right: 10px; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(12, 14, 18, 0.5); border: 1px solid rgba(255, 255, 255, 0.28); color: #fff; transition: background-color 0.15s; }
.zoom-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.zoom:hover .zoom-btn, .zoom:focus-visible .zoom-btn { background: rgba(12, 14, 18, 0.78); }
.zoom:focus-visible .zoom-btn { outline: 3px solid var(--accent); outline-offset: 2px; }
/* The lightbox: the page dims and the picture sits centred in a thin light frame with a soft shadow, at most about 90%
   of the screen's width and height (never past the picture's own 1280 px), its label under it with a close button.
   It grows and fades in, unless motion is turned off. The page behind it doesn't scroll (site.js: html.lb-open). */
html.lb-open { overflow: hidden; }
html.lb-open.lb-gutter { scrollbar-gutter: stable; } /* a desktop scroll bar's room stays, so nothing shifts */
.lightbox { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(8, 10, 14, 0.82); color: var(--text); overflow: hidden; }
.lightbox[open] { display: grid; place-items: center; animation: lb-fade 0.2s ease-out; }
.lightbox::backdrop { background: transparent; }
.lightbox figure { margin: 0; animation: lb-grow 0.24s cubic-bezier(0.2, 0.8, 0.3, 1); }
.lb-frame { padding: 4px; border-radius: 12px; background: #eee8dc; box-shadow: 0 18px 50px rgba(0, 0, 0, 0.55), 0 4px 14px rgba(0, 0, 0, 0.35); }
.lb-frame img { width: min(1280px, 90vw - 8px, (90vh - 56px) * 1280 / 592); width: min(1280px, 90vw - 8px, (90dvh - 56px) * 1280 / 592); height: auto; aspect-ratio: 1280 / 592; border-radius: 8px; background: #1d2229; }
.lightbox figcaption { display: flex; align-items: center; gap: 12px; padding: 8px 2px 0; }
.lb-cap { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--soft); }
.lb-cap.locked { color: #e6defc; }
.lb-cap.locked.exp { color: #d3e3fa; }
.lb-cap svg { width: 13px; height: 13px; flex: none; fill: currentColor; }
.lb-close { flex: none; width: 36px; height: 36px; padding: 0; border: 0; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, 0.14); color: var(--text); cursor: pointer; }
.lb-close:hover { background: rgba(255, 255, 255, 0.26); }
.lb-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
@keyframes lb-fade { from { background-color: rgba(8, 10, 14, 0); } }
@keyframes lb-grow { from { opacity: 0; transform: scale(0.9); } }
@media (prefers-reduced-motion: reduce) { .lightbox[open], .lightbox figure { animation: none; } .zoom-btn { transition: none; } }
.crumb .tag { margin: 0 0 0 8px; vertical-align: 1px; }
.locked-note { margin: 14px 0 0; padding: 10px 14px; border-radius: 12px; background: rgba(126, 87, 232, 0.14); border: 1px solid rgba(195, 176, 247, 0.25); display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.45; color: #ddd4fa; }
.locked-note svg { flex: none; width: 16px; height: 16px; margin-top: 2px; fill: #c3b0f7; }
/* The expansion's levels: the same note in the expansion's blue */
.locked-note.exp { background: rgba(75, 136, 224, 0.14); border-color: rgba(143, 184, 242, 0.28); color: #d3e3fa; }
.locked-note.exp svg { fill: #8fb8f2; }
.detail .body { padding: 18px 22px 22px; }
.crumb { color: var(--muted); font-size: 13px; font-weight: 600; }
.crumb b { color: var(--accent); }
.detail h1, .detail h2 { margin: 4px 0 10px; font-size: 30px; font-weight: 900; }
.detail h1 em, .detail h2 em { font-style: normal; color: var(--accent); margin-right: 6px; }
.diff-row { display: flex; align-items: center; gap: 10px; }
.gears { display: flex; gap: 3px; }
.gears svg { width: 22px; height: 22px; fill: #3b4452; }
.gears svg circle { fill: var(--panel); }
.gears svg.on { fill: var(--gear); }
.diff-row b { font-size: 16px; }
.diff-row small { color: var(--muted); font-size: 13px; }
.goal { margin: 16px 0 0; padding: 12px 14px; border-radius: 12px; background: #1d2229; display: flex; gap: 10px; align-items: flex-start; font-weight: 600; line-height: 1.4; }
.goal svg { flex: none; width: 20px; height: 20px; fill: var(--accent); margin-top: 1px; }
.about { margin: 14px 0 0; color: #cfd5dd; line-height: 1.55; font-size: 15px; }
.label, .detail .label { margin: 16px 0 8px; color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.parts { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.parts a { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 12px 0 4px; border-radius: 10px; background: var(--panel-2); font-size: 14px; font-weight: 600; }
.parts a:hover { background: #3b4452; }
.parts img { width: 44px; height: 30px; object-fit: contain; border-radius: 7px; background: var(--icon-bg); }
.parts b { color: var(--accent); }
.parts .dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.dot.red { background: #e5484d; } .dot.blue { background: #4b88e0; } .dot.yellow { background: #f5c518; }
.meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 16px; }
.par-list { display: flex; gap: 10px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.par-list li { display: inline-flex; align-items: center; gap: 7px; height: 36px; padding: 0 14px 0 10px; border-radius: 999px; border: 2px solid var(--accent); }
.par-list svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--accent); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.par-list svg .solid { fill: var(--accent); stroke: none; } /* the stopwatch's crown and wedge, solid as in the game */
.par-list b { font-size: 16px; font-weight: 900; color: var(--accent); }
.par-list small { color: var(--muted); font-size: 13px; font-weight: 700; }
.meta div { padding: 10px; border-radius: 12px; background: #1d2229; text-align: center; }
.meta b { display: block; font-size: 15px; }
.meta small { color: var(--muted); font-size: 12px; }
.play { margin-top: 18px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.play { gap: 6px; }
.play .soon.sm { padding: 0 10px 0 8px; gap: 7px; }
.play .soon.sm svg { width: 20px; height: 20px; }
.play .badge { height: 46px; }
.play .badge img { height: 68px; margin: -11px; }
.play .soon.sm { width: auto; height: 46px; } /* not the hero's fixed phone width */
.nospoil { margin: 14px 0 0; display: flex; gap: 8px; color: var(--muted); font-size: 13px; line-height: 1.4; }
.nospoil svg { flex: none; width: 16px; height: 16px; stroke: var(--accent); fill: none; stroke-width: 2; }
.pn { display: flex; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); padding: 12px 22px; font-size: 14px; font-weight: 700; color: var(--muted); }
.pn a:hover { color: var(--text); }
.level-page { padding: 24px 0 64px; }
.level-page .detail { max-width: 860px; margin: 0 auto; }
.crumbs { margin: 0 auto 14px; max-width: 860px; font-size: 13px; color: var(--muted); font-weight: 600; }
.crumbs ol { display: flex; gap: 6px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.crumbs li + li::before { content: "›"; margin-right: 6px; }
.crumbs a:hover { color: var(--text); }
.crumbs [aria-current] { color: var(--text); }

/* Help */
.help-hero { padding: 44px 0 26px; }
.help-hero h1 { margin: 0 0 6px; font-size: 40px; font-weight: 900; }
.help-hero p { margin: 0; color: var(--muted); font-size: 17px; }
.topics { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.topic { padding: 18px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); display: grid; grid-template-columns: 44px 1fr; gap: 4px 14px; align-items: start; }
.topic:hover { border-color: #4a5462; }
.topic .ic { grid-row: span 2; width: 44px; height: 44px; border-radius: 12px; margin: 0; }
.topic .ic svg { width: 24px; height: 24px; }
.topic b { font-size: 16px; }
.topic small { color: var(--muted); font-size: 13px; line-height: 1.4; }
.help-body { display: grid; grid-template-columns: 230px minmax(0, 1fr); gap: 44px; padding: 44px 0 72px; }
.side { position: sticky; top: 84px; align-self: start; font-size: 14px; }
.side b { display: block; margin: 0 0 8px; color: var(--muted); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.side a { display: block; padding: 6px 0 6px 12px; border-left: 2px solid var(--line); color: #c9d0da; }
.side a:hover { color: var(--text); border-color: #4a5462; }
.side a[aria-current] { border-color: var(--accent); color: var(--text); font-weight: 700; }
.side a.sub { padding-left: 24px; font-size: 13px; color: var(--muted); }
.prose h2 { margin: 44px 0 10px; font-size: 26px; }
.prose > h2:first-child, .prose section:first-child > h2 { margin-top: 0; }
.prose h3 { margin: 22px 0 6px; font-size: 18px; }
.prose p, .prose li { color: var(--soft); font-size: 16.5px; line-height: 1.7; }
.prose ul, .prose ol { padding-left: 22px; }
.prose .note { padding: 12px 16px; border-radius: 12px; background: #1d2229; border-left: 3px solid var(--blue); color: #c9d0da; font-size: 15px; }
.box { padding: 22px 24px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); }
.controls { width: 100%; border-collapse: collapse; font-size: 15px; }
.controls th { text-align: left; color: var(--muted); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; padding: 0 12px 8px 0; }
.controls td { padding: 10px 12px 10px 0; border-top: 1px solid var(--line); vertical-align: top; line-height: 1.45; color: var(--soft); }
.controls td:first-child { font-weight: 700; color: var(--text); white-space: nowrap; }
.k { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; background: var(--panel-2); margin-right: 8px; vertical-align: middle; }
.k svg { width: 18px; height: 18px; fill: none; stroke: var(--text); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.k.run { width: auto; padding: 0 10px; background: var(--go); color: #0f2418; font-size: 13px; font-weight: 800; }
.stars-list { display: grid; gap: 8px; margin: 12px 0; padding: 0; list-style: none; }
.stars-list li { display: flex; gap: 10px; align-items: center; padding: 10px 14px; border-radius: 12px; background: #1d2229; }
.stars-list li::before { content: "★"; color: var(--accent); font-size: 18px; }

/* Parts guide */
.pg-head { display: flex; align-items: end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pg-head h1, .pg-head h2 { margin: 0 0 4px; font-size: 32px; font-weight: 900; }
.pg-head p { margin: 0; color: var(--muted); }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chips button { height: 34px; padding: 0 14px; border-radius: 17px; border: 0; background: var(--panel-2); color: #c9d0da; font: inherit; font-size: 14px; font-weight: 700; cursor: pointer; }
.chips button[aria-pressed="true"] { background: var(--accent); color: #2a1d00; }
.group { margin-top: 30px; }
.group[hidden], .part[hidden] { display: none; }
.group h2 { margin: 0 0 12px; font-size: 18px; display: flex; align-items: center; gap: 10px; }
.group h2 small { color: var(--muted); font-size: 13px; font-weight: 600; }
.parts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.part { display: grid; grid-template-columns: 96px 1fr; gap: 14px; padding: 12px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.part:hover { border-color: #4a5462; }
.tile { width: 96px; height: 80px; border-radius: 10px; background: var(--icon-bg); display: grid; place-items: center; box-shadow: inset 0 0 0 2px var(--icon-edge); }
.tile img { width: 88px; height: auto; }
.part b { font-size: 16px; }
.part .ch { margin-left: 6px; color: var(--accent); font-size: 12px; font-weight: 800; }
.part .ch.exp { color: #8fb8f2; }
.part .ch.bonus { color: #c3b0f7; }
.part p { margin: 4px 0 0; color: #c9d0da; font-size: 14px; line-height: 1.45; }
.part-page { padding: 24px 0 64px; }
.part-page .inner { max-width: 860px; margin: 0 auto; }
.part-top { display: grid; grid-template-columns: 300px 1fr; gap: 28px; align-items: center; }
.part-top .big { aspect-ratio: 4 / 3; border-radius: 18px; background: var(--icon-bg); display: grid; place-items: center; box-shadow: inset 0 0 0 3px var(--icon-edge); }
.part-top .big img { width: 70%; }
.part-top h1 { margin: 8px 0 8px; font-size: 40px; font-weight: 900; }
.part-top .lede { margin: 0; font-size: 18px; line-height: 1.55; color: #e6eaef; }
.works, .prose .works { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.prose .works a { color: var(--text); text-decoration: none; }
.works a { display: inline-flex; align-items: center; gap: 6px; height: 42px; padding: 0 12px 0 4px; border-radius: 10px; background: var(--panel-2); font-size: 14px; font-weight: 600; }
.works a:hover { background: #3b4452; }
.works img { width: 48px; height: 34px; object-fit: contain; border-radius: 7px; background: var(--icon-bg); }

/* Privacy and other documents */
.doc-head { padding: 44px 0 10px; }
.doc-head h1 { margin: 0 0 6px; font-size: 40px; font-weight: 900; }
.doc-head p { margin: 0; color: var(--muted); }
.doc { display: grid; grid-template-columns: 240px minmax(0, 720px); gap: 48px; padding: 26px 0 72px; }
.toc { position: sticky; top: 84px; align-self: start; font-size: 14px; }
.toc b { display: block; margin-bottom: 10px; color: var(--muted); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; }
.toc a { display: block; padding: 6px 0 6px 12px; border-left: 2px solid var(--line); color: #c9d0da; }
.toc a:hover { border-color: var(--accent); color: var(--text); }
.short h2 { margin: 0 0 14px; font-size: 20px; }
.short ul { margin: 0; padding: 0; list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; }
.short li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.4; font-weight: 600; color: var(--text); font-size: 16px; }
.short li::before { content: "✓"; flex: none; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; background: rgba(54, 184, 106, 0.2); color: #6fdc98; font-size: 13px; font-weight: 900; }

/* Press kit */
.press { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: 36px; padding-bottom: 72px; align-items: start; }
.facts-card { position: sticky; top: 84px; }
.facts-card h2 { margin: 0 0 12px; font-size: 18px; }
.facts-card dl { margin: 0; display: grid; gap: 12px; }
.facts-card dt { color: var(--muted); font-size: 12px; font-weight: 800; letter-spacing: 1px; text-transform: uppercase; }
.facts-card dd { margin: 2px 0 0; font-size: 15px; line-height: 1.45; }
.facts-card a { color: var(--accent); }
.shots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.shots img { width: 100%; aspect-ratio: 1280 / 592; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.shots span { display: block; margin-top: 6px; color: var(--muted); font-size: 12px; }
.art { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 0; padding: 0; list-style: none; }
.art li { border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--panel); }
.art .pic { height: 130px; display: flex; align-items: center; justify-content: center; padding: 14px; background: #171b22; }
.art .pic.light { background: var(--wall); }
.art .pic img { width: auto; height: 100%; max-width: 100%; object-fit: contain; }
.art p { margin: 0; padding: 8px 12px 10px; font-size: 13px; color: #c9d0da; display: flex; justify-content: space-between; }
.art p a { color: var(--accent); }

/* 404 */
.lost { min-height: 60vh; display: grid; place-items: center; text-align: center; padding: 60px 0; }
.lost h1 { margin: 16px 0 8px; font-size: 40px; font-weight: 900; }
.lost p { color: var(--muted); }
.lost .gear { width: 110px; height: 110px; transform: rotate(18deg); animation: none; }
/* HD's gear, tilted and still as SD's: the logo's gear and its shadow (.hd-logo: the shadow 204 units square, 21 left
   of the gear's 162 and 14 above) */
.lost-gear { position: relative; display: inline-block; vertical-align: top; width: 110px; height: 110px; }
.lost-gear img { position: absolute; display: block; max-width: none; transform: rotate(18deg); }
.lost-gear .hd-logo-gear-shadow { left: -12.963%; top: -8.642%; width: 125.926%; height: 125.926%; }
.lost-gear .hd-logo-gear { left: 0; top: 0; width: 100%; height: 100%; }
.lost .row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin-top: 18px; }

/* Tablets */
@media (max-width: 1100px) {
  .browser { grid-template-columns: 1fr; }
  .browser > #panel { display: none; }
  .chapters { grid-template-columns: repeat(3, 1fr); }
  /* The bonus chapter's ten levels: two rows of five down to phone widths */
  .chapters.bonus-levels { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
  .chapters.bonus-levels .body { padding: 9px 10px 11px; }
  .chapters.bonus-levels h3 { font-size: 14px; }
  .chapters.bonus-levels .num { font-size: 20px; }
  .chapters.bonus-levels .lock.big { width: 32px; height: 32px; }
  .chapters.bonus-levels .lock.big svg { width: 15px; height: 15px; }
  .topics { grid-template-columns: repeat(2, 1fr); }
  .features { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 860px) {
  /* The links go into the menu; Get the game and Sandbox stay in the bar while they fit */
  .nav .wrap { gap: 10px; }
  .nav-links, .menu .menu-get, .menu .menu-sandbox { display: none; }
  .look-pick { margin-left: auto; }
  .nav-cta { margin-left: 0; }
  .nav-sandbox { margin-left: 0; }
  .menu { display: block; margin-left: 0; }
  .how { grid-template-columns: 1fr; gap: 28px; }
  .help-body, .doc, .press { grid-template-columns: 1fr; gap: 20px; }
  .side { position: static; display: none; }
  .toc { position: static; padding: 14px 16px; border-radius: 14px; background: var(--panel); }
  .facts-card { position: static; }
  .part-top { grid-template-columns: 220px 1fr; gap: 20px; }
  footer .cols { grid-template-columns: 1fr 1fr; }
}
/* Phones */
/* Too narrow for the brand, both buttons and the menu (they need about 545 px; 360 px phones held upright): both go into the menu */
@media (max-width: 580px) {
  .nav-cta, .nav-sandbox { display: none; }
  .menu { margin-left: 0; }
  .menu .menu-get, .menu .menu-sandbox { display: block; }
}
/* Narrow phones held upright (the user, 2026-10-29: on a phone in portrait the SD/HD switch and the menu button covered
   part of the name): the name, the SD/HD switch and the menu button made smaller to share the top bar, down to 320 px */
@media (max-width: 420px) {
  .nav .wrap { gap: 8px; }
  .nav .brand { gap: 8px; font-size: clamp(14px, 4.4vw, 18px); }
  .nav .brand svg, .nav .brand img { width: 26px; height: 26px; }
  .look-pick button { min-width: 34px; padding: 0 8px; }
}
@media (max-width: 600px) {
  .nav .wrap { height: 56px; }
  html { scroll-padding-top: 68px; }
  .hero { height: auto; min-height: 640px; gap: 14px; padding: 40px 16px; }
  .hero > .hero-pic { object-position: 30% center; }
  /* the gear beside the name, as in HD's logo, sized to the screen */
  .logo { gap: 12px; }
  .gear { width: min(84px, 23vw); height: min(84px, 23vw); }
  .logo h1 { font-size: min(48px, 13vw); }
  .hd-logo { width: min(320px, calc(100vw - 32px)); }
  .tagline { font-size: 15px; padding: 6px 14px; }
  .stores { flex-direction: column; align-items: center; gap: 12px; }
  .soon { width: 230px; height: 54px; }
  .badge { height: 54px; } /* the badge as tall as the buttons beside it (the user, 2026-10-29), its clear space as at 58 px */
  .badge img { height: 80px; margin: -13px; }
  .facts li { font-size: 12px; }
  section.block { padding: 56px 0; }
  h2.title { font-size: 30px; }
  .lead { font-size: 16px; }
  .device { padding: 8px; border-radius: 22px; }
  .device img, .device video { border-radius: 14px; }
  .device .pause { right: 12px; bottom: 12px; width: 30px; height: 30px; }
  .device .pause svg { width: 13px; height: 13px; }
  .features { grid-template-columns: 1fr; gap: 12px; }
  .feature { padding: 18px; display: grid; grid-template-columns: 52px 1fr; column-gap: 14px; }
  .feature .ic { margin: 0; grid-row: span 2; }
  .chapters, .chapters.bonus-levels { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .chapters .chapter:last-child:nth-child(odd) { grid-column: span 2; } /* chapters 5 and 20 alone on their rows */
  .strip .word { display: none; }
  .strip a { padding: 0 11px; }
  .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .card { border-radius: 12px; }
  .card .cap { gap: 5px; padding: 5px 6px; min-height: 36px; }
  .card .num { font-size: 16px; }
  .card .name { font-size: 11px; }
  .card .marks { top: 4px; right: 4px; }
  .card .diff { padding: 2px 4px; }
  .card .diff i { width: 5px; height: 5px; }
  .card .marks .lock { width: 14px; height: 14px; }
  .card .marks .lock svg { width: 8px; height: 8px; }
  .card.locked .lock.big { width: 28px; height: 28px; }
  .card.locked .lock.big svg { width: 13px; height: 13px; }
  .ch-head .ch-diff { gap: 6px; }
  .home-levels .card:nth-child(n+7) { display: none; }
  .page-head { padding: 22px 0 10px; }
  .page-head h1, .help-hero h1, .doc-head h1 { font-size: 28px; }
  .tools select { flex: 1; }
  .strip a { min-width: 36px; height: 30px; padding: 0 8px; font-size: 13px; }
  .detail h1, .detail h2 { font-size: 26px; }
  .detail .body { padding: 16px; }
  .level-page { padding-top: 12px; }
  .level-page .detail { border-radius: 16px; }
  .topics { grid-template-columns: 1fr 1fr; gap: 10px; }
  .topic { grid-template-columns: 1fr; gap: 6px; padding: 14px; }
  .topic .ic { grid-row: auto; width: 36px; height: 36px; }
  .topic .ic svg { width: 20px; height: 20px; }
  .part-top { grid-template-columns: 1fr; }
  .part-top .big { max-width: 360px; }
  .parts-grid { grid-template-columns: minmax(0, 1fr); }
  .part { grid-template-columns: 72px minmax(0, 1fr); gap: 12px; }
  .part .tile { width: 72px; height: 60px; }
  .part .tile img { width: 64px; }
  .part-top h1 { font-size: 30px; }
  .short ul { grid-template-columns: 1fr; }
  .prose p, .prose li { font-size: 16px; }
  .controls th:nth-child(3), .controls td:nth-child(3) { display: none; }
  .controls thead { display: none; }
  .controls, .controls tbody, .controls tr, .controls td { display: block; }
  .controls tr { padding: 10px 0; border-top: 1px solid var(--line); }
  .controls tbody tr:first-child { border-top: 0; padding-top: 0; }
  .controls td { border: 0; padding: 2px 0; }
  .controls td:first-child { white-space: normal; margin-bottom: 4px; }
  .shots, .art { grid-template-columns: 1fr 1fr; }
  footer .legal { flex-direction: column; }
}
.part-page .prose { margin-top: 30px; }
.part-top .tag { margin-top: 0; }
.home-levels { margin-top: 28px; }

/* Phones on their side (short screens): a slimmer top bar, and the hero's logo, tagline and store buttons in one screen */
@media (max-height: 500px) and (orientation: landscape) {
  .nav .wrap { height: 52px; }
  html { scroll-padding-top: 64px; }
  .menu nav { top: 46px; max-height: calc(100vh - 60px); overflow-y: auto; }
  .hero { height: auto; min-height: calc(100svh - 52px); padding: 14px 16px; gap: 10px; }
  .logo { flex-direction: row; gap: 12px; }
  .gear { width: 70px; height: 70px; }
  .logo h1 { font-size: 46px; }
  .hd-logo { width: 262px; }
  .tagline { font-size: 14px; padding: 5px 14px; }
  .hero .stores, .cta-band .stores { flex-direction: row; gap: 10px; margin-top: 2px; }
  .hero .soon, .cta-band .soon { width: auto; min-width: 0; height: 46px; padding: 0 12px 0 10px; }
  .hero .badge, .cta-band .badge { height: 46px; } /* (as tall as the buttons, as .play's) */
  .hero .badge img, .cta-band .badge img { height: 68px; margin: -11px; }
  .hero .soon svg, .cta-band .soon svg { width: 22px; height: 22px; }
  .hero .soon b, .cta-band .soon b { font-size: 16px; }
  .hero .soon small, .cta-band .soon small { font-size: 9.5px; }
  .facts li { font-size: 12px; padding: 4px 10px; }
  .browser > #panel { top: 64px; }
}