/* wmgames.online (portal/site.go): the public landing of WM GAMES, drawn as a game designer's notebook (Alberto, 30 Oct
   2026: "quaderno di sviluppo", "scritto a mano", "creativita' vera, umanita' vera", "non mettere tutto lilla", "usa altri
   colori di spicco", "la sezione in the making va bene ma non esagerare").
   Squared paper, blue-black ink, two hands (a pen for titles and notes, a marker for the rest) and four markers that stand
   out, one per part of the page: coral, cobalt, violet, mint. A red pen for the notes in the margin. Under the page, torn
   at its foot, the night where the little game runs: the game and its ridges stay exactly as they were. */

@font-face { font-family: "Nanum Pen"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/nanum-pen-script-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Shantell"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/shantell-sans-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Shantell"; font-style: normal; font-weight: 700; font-display: swap; src: url("fonts/shantell-sans-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Martian Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/martian-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Martian Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("fonts/martian-mono-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Martian Mono"; font-style: normal; font-weight: 800; font-display: swap; src: url("fonts/martian-mono-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Lato"; font-style: normal; font-weight: 400; font-display: swap; src: url("fonts/lato-latin-400-normal.woff2") format("woff2"); }

:root {
  --paper: #f6f1e7;
  --paper-hi: #fffdf7;
  --grid: rgba(47, 98, 255, 0.085);
  --ink: #1b2340;
  --ink-soft: #46506f;
  --pencil: #7d8396;
  --line: rgba(27, 35, 64, 0.16);
  --red: #d6283b;
  --coral: #ff4f6d;
  --cobalt: #2f62ff;
  --violet: #7b5cff;
  --mint: #0fb582;
  --sun: #ffc83d;
  --c: var(--coral);            /* the marker of the part of the page you are in */
  --night: #121c38;
  --pen: "Nanum Pen", "Shantell", cursive;
  --hand: "Shantell", system-ui, sans-serif;
  --gutter: clamp(16px, 4vw, 48px);
  --wide: 1120px;
  /* a box drawn by hand: no two corners alike */
  --sketch: 255px 18px 225px 18px / 18px 225px 18px 255px;
  --sketch-2: 18px 225px 18px 255px / 255px 18px 225px 18px;
}

* { box-sizing: border-box; }
html { background: var(--paper); color-scheme: light; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; overflow-x: hidden;
  font: 400 17px/1.65 var(--hand); color: var(--ink); -webkit-font-smoothing: antialiased;
  background-color: var(--paper);
  background-image: linear-gradient(var(--grid) 1px, transparent 1px), linear-gradient(90deg, var(--grid) 1px, transparent 1px);
  background-size: 26px 26px;
  background-position: -1px -1px;
}
/* the red margin line of a notebook, on a wide screen only */
@media (min-width: 1000px) {
  body::before { content: ""; position: absolute; top: 0; bottom: 0; left: 72px; width: 2px; background: rgba(214, 40, 59, 0.28); pointer-events: none; z-index: 0; }
}
body > * { position: relative; z-index: 1; }
a { color: var(--cobalt); text-decoration-thickness: 2px; text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
::selection { background: rgba(123, 92, 255, 0.28); color: var(--ink); }

/* ---------- bar ---------- */
.bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px var(--gutter); }
.brand { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); text-decoration: none; }
.brand img { width: 40px; height: 40px; filter: drop-shadow(0 0 0 #fff) drop-shadow(1.5px 0 0 #fff) drop-shadow(-1.5px 0 0 #fff) drop-shadow(0 1.5px 0 #fff) drop-shadow(0 -1.5px 0 #fff) drop-shadow(0 3px 4px rgba(27, 35, 64, 0.25)); transform: rotate(-6deg); }
.brand span { font-weight: 700; font-size: 16px; letter-spacing: 0.16em; }
.pill {
  position: relative; display: inline-flex; align-items: center; padding: 6px 4px; font-size: 15px; font-weight: 700;
  color: var(--ink); text-decoration: none; white-space: nowrap;
}
.pill::after {
  content: ""; position: absolute; left: -2px; right: -2px; bottom: -2px; height: 10px;
  background: var(--coral); -webkit-mask: url("img/site/squiggle.svg") center / 100% 100% no-repeat; mask: url("img/site/squiggle.svg") center / 100% 100% no-repeat;
  transition: transform 0.2s ease;
}
.pill:hover::after { transform: scaleX(1.08) translateY(1px); }

/* ---------- hero: the first page of the notebook ---------- */
/* Under the page, the night where the game runs. The ridges sit under the buttons, never behind them: the highest crest is
   19% of the drawing's width above its foot (2400x560, top crest at y 100). The canvas is that drawing's height and 48 px
   more; the night band is the canvas and 56 px more, its top torn like a page, so the game always runs on the night. */
.hero {
  --rw: max(1600px, 100vw);
  --canvas-h: calc(var(--rw) * 0.2333333 + 48px);
  --band: calc(var(--canvas-h) + 56px);
  --night-bg: url("img/site/night-tear.svg"), linear-gradient(180deg, var(--night), #070b15);
  position: relative; overflow-x: clip; text-align: center;
  padding: clamp(28px, 5vw, 64px) var(--gutter) calc(var(--band) + 44px);
  background-image: url("img/site/ridges.svg"), var(--night-bg);
  background-repeat: no-repeat;
  background-position: center bottom, left 0 bottom calc(var(--band) - 64px), left 0 bottom;
  background-size: var(--rw) auto, 100% 64px, 100% calc(var(--band) - 60px);
}
/* the ridges as a little game (web/assets/site-game.js): the canvas lies on the very place and size of the ridges. At rest
   it adds only the runner; once a run starts it carries the same drawing and only the ridges layer goes: the night stays */
.hero.has-game { background-image: none, var(--night-bg); }
.hero > * { position: relative; z-index: 1; }
.hero > .game-canvas {
  position: absolute; z-index: 0; left: 50%; bottom: 0; width: var(--rw); height: var(--canvas-h);
  transform: translateX(-50%); pointer-events: none;
}
.hero > .game-hit {
  position: absolute; z-index: 1; left: 0; right: 0; bottom: 0; height: calc(var(--rw) * 0.2 + 24px);
  margin: 0; padding: 0; border: 0; border-radius: 0; background: none; cursor: pointer;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.hero.game-playing > .game-hit { touch-action: none; }
.hero::after {
  content: ""; position: absolute; z-index: 1; left: 0; right: 0; bottom: -1px; height: 24px; pointer-events: none;
  background: url("img/site/page-tear.svg") center / 100% 100% no-repeat;
}
.hero > .game-hit:focus-visible { outline: 3px dashed #fffaf0; outline-offset: -10px; border-radius: 20px; }
.hero.game-started > .game-hit:focus-visible { outline: none; } /* once playing, the game itself shows where you are */

/* the WM GAMES mark, stuck on the page like a sticker */
.hero-mark { width: clamp(120px, 15vw, 172px); margin: 0 auto 18px; transform: rotate(-5deg); }
.hero-mark img {
  width: 100%; height: auto;
  filter: drop-shadow(3px 0 0 #fff) drop-shadow(-3px 0 0 #fff) drop-shadow(0 3px 0 #fff) drop-shadow(0 -3px 0 #fff)
    drop-shadow(0 8px 10px rgba(27, 35, 64, 0.28));
}
.kicker { margin: 0 0 4px; font-size: 15px; font-weight: 700; letter-spacing: 0.08em; color: var(--c); }
.hero .kicker { --c: var(--coral); }
/* line height 1 and room under it: the tails of g and the like stay inside the title's box, never against the words
   below (Alberto, 30 Oct 2026: on a phone "la g di making era tagliata") */
.hero h1 {
  position: relative; display: inline-block; margin: 0; padding: 0 0.12em 0.16em;
  font: 400 clamp(76px, 12.5vw, 150px)/1 var(--pen); color: var(--ink); letter-spacing: 0.01em;
}
/* one swipe of the violet marker under the title, a little crooked */
.hero h1::before {
  content: ""; position: absolute; z-index: -1; left: 0.02em; right: -0.04em; bottom: 0.3em; height: 0.34em;
  background: rgba(123, 92, 255, 0.34); border-radius: 40% 12% 46% 10% / 60% 30% 70% 40%; transform: rotate(-1.4deg);
}
.lead { max-width: 600px; margin: 22px auto 0; font-size: clamp(17px, 2vw, 19px); color: var(--ink-soft); text-wrap: balance; }
h1, h2, .sub { text-wrap: balance; }
.actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; margin-top: 28px; }

/* the note in the margin, in red pen: AI helps, the heart is his (Alberto, 30 Oct 2026: "pur capendosi che sviluppo con
   ai, ci metto passione anima e cuore"). From 1280 px the title is 800 px wide whatever the window, so the note sits just
   right of its box and the arrow runs down the title's right side, never across a letter (Alberto: the arrow "tagliava"
   the g of making), to the Join the wishlist button. Narrower, the note goes under the buttons, without arrow. */
.note { position: static; max-width: 330px; margin: 30px auto 0; font: 400 26px/1.05 var(--pen); color: var(--red); transform: rotate(-2deg); }
@media (min-width: 1280px) {
  .note {
    position: absolute; z-index: 2; left: calc(50% + 428px); top: 282px; width: min(212px, calc(50% - 428px - var(--gutter)));
    max-width: none; margin: 0; font-size: 25px; text-align: left; transform: rotate(4deg);
  }
  /* fixed to the note's top, not its foot (the note has 3 or 4 lines), and turned back by the note's own 4 degrees about
     the note's centre: the tip lands 14 px right of the button, at mid height, at every width from 1280 px */
  .note::after {
    content: ""; position: absolute; left: -170px; top: 120px; width: 184px; height: 249px; pointer-events: none;
    background: url("img/site/arrow-pen.svg") center / 100% 100% no-repeat;
    transform: rotate(-4deg); transform-origin: 276px -68px;
  }
}

/* ---------- buttons: drawn by hand ---------- */
.cta {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 28px; border: 0; cursor: pointer; text-decoration: none; white-space: nowrap;
  font: 700 17px/1 var(--hand); letter-spacing: 0.01em; color: var(--paper-hi); background: none;
  transition: transform 0.18s ease;
}
/* the ink fill, and the same box drawn a second time a little off, as a pen does */
.cta::before, .cta::after { content: ""; position: absolute; pointer-events: none; }
.cta::before { inset: 0; z-index: -1; background: var(--ink); border-radius: var(--sketch); }
.cta::after { inset: -4px -3px -2px -5px; z-index: -2; border: 2px solid var(--ink); border-radius: var(--sketch-2); transform: rotate(-1.2deg); transition: transform 0.18s ease; }
.cta:hover { transform: rotate(-1.2deg) translateY(-2px); }
.cta:hover::after { transform: rotate(1deg) translate(3px, 2px); }
.cta:active { transform: translateY(1px); }
.cta:focus-visible, .pill:focus-visible, .post:focus-visible, .shop-card:focus-visible { outline: 3px dashed var(--c); outline-offset: 6px; border-radius: 12px; }
/* the second button: only the pen line, and the marker of the page under it when you point at it */
.cta.ghost { color: var(--ink); }
.cta.ghost::before { background: transparent; border: 2.5px solid var(--ink); }
.cta.ghost::after { border-color: transparent; background: rgba(255, 79, 109, 0); border-radius: 30% 12% 40% 10% / 70% 30% 60% 40%; inset: 30% -2px 2px -4px; transform: rotate(-1deg); transition: background 0.2s ease, transform 0.18s ease; }
.cta.ghost:hover::after { background: rgba(255, 79, 109, 0.3); }
.ig { flex: none; }

/* ---------- sections ---------- */
.posts, .wishlist, .console, .shop { width: min(100% - 2 * var(--gutter), var(--wide)); margin-left: auto; margin-right: auto; }
.posts { --c: var(--cobalt); margin-top: clamp(56px, 8vw, 96px); }
.wishlist { --c: var(--violet); }
.shop { --c: var(--mint); }
.head { text-align: center; margin-bottom: 30px; }
.head h2 { margin: 0; font: 400 clamp(46px, 6.4vw, 72px)/1 var(--pen); color: var(--ink); }
/* under every title, the marker of its part of the page */
.head h2::after {
  content: ""; display: block; width: min(240px, 60%); height: 16px; margin: 6px auto 0; background: var(--c);
  -webkit-mask: url("img/site/squiggle.svg") center / 100% 100% no-repeat; mask: url("img/site/squiggle.svg") center / 100% 100% no-repeat;
}
.sub { margin: 12px auto 0; max-width: 540px; color: var(--ink-soft); }

/* Instagram: three photos stuck on the page with a strip of tape, each a little crooked */
.grid { list-style: none; margin: 0; padding: 18px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 40px); }
.grid li { --tilt: calc(var(--t2) + var(--t3)); --tape-rot: calc(var(--r2) + var(--r5)); --tape-x: var(--x3); --tape-w: var(--w5); }
/* nothing alike (law, Alberto 30 Oct 2026: "devono essere casuali, tutti random, no uguali"): every value is the sum of
   pieces that repeat every 2, 3 and 5 items, so two neighbours never match and the pattern only comes back after 30 */
.grid li:nth-child(2n+1) { --t2: -1.3deg; --r2: -3deg; }
.grid li:nth-child(2n) { --t2: 0.9deg; --r2: 2deg; }
.grid li:nth-child(3n+1) { --t3: -0.6deg; --x3: 34%; }
.grid li:nth-child(3n+2) { --t3: 0.5deg; --x3: 58%; }
.grid li:nth-child(3n) { --t3: 1.1deg; --x3: 46%; }
.grid li:nth-child(5n+1) { --r5: -4deg; --w5: 104px; }
.grid li:nth-child(5n+2) { --r5: 5deg; --w5: 86px; }
.grid li:nth-child(5n+3) { --r5: -1deg; --w5: 96px; }
.grid li:nth-child(5n+4) { --r5: 6deg; --w5: 80px; }
.grid li:nth-child(5n) { --r5: -6deg; --w5: 112px; }
.post {
  position: relative; display: block; padding: 10px 10px 40px; background: var(--paper-hi); aspect-ratio: auto;
  box-shadow: 0 1px 1px rgba(27, 35, 64, 0.12), 0 14px 26px rgba(27, 35, 64, 0.16); transform: rotate(var(--tilt));
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.post img { width: 100%; aspect-ratio: 3 / 4; height: auto; object-fit: cover; }
.post::before { /* a piece of clear tape */
  content: ""; position: absolute; top: -13px; left: var(--tape-x); width: var(--tape-w); height: 27px; translate: -50% 0; rotate: var(--tape-rot);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(232, 232, 220, 0.55) 55%, rgba(255, 255, 255, 0.64));
  border-left: 1px solid rgba(27, 35, 64, 0.1); border-right: 1px solid rgba(27, 35, 64, 0.1);
  box-shadow: 0 1px 2px rgba(27, 35, 64, 0.16);
}
.post:hover { transform: rotate(0deg) translateY(-4px); box-shadow: 0 1px 1px rgba(27, 35, 64, 0.12), 0 22px 34px rgba(27, 35, 64, 0.2); }
.more { text-align: center; margin: 30px 0 0; font-weight: 700; }
.more a { color: var(--ink); text-decoration: none; background: linear-gradient(transparent 58%, color-mix(in srgb, var(--c) 30%, transparent) 58%); padding: 0 4px; }
.more a:hover { background: linear-gradient(transparent 30%, color-mix(in srgb, var(--c) 36%, transparent) 30%); }

/* Hear it first: an index card taped to the page. The words on the left, the form on the right; one above the other on a
   phone. The form fields are lines to write on. */
.wishlist {
  position: relative; margin-top: clamp(80px, 11vw, 130px); margin-bottom: clamp(70px, 10vw, 120px);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(24px, 4vw, 56px);
  padding: clamp(30px, 5vw, 60px); background: var(--paper-hi);
  background-image: linear-gradient(transparent calc(100% - 1px), rgba(47, 98, 255, 0.16) calc(100% - 1px));
  background-size: 100% 34px; background-position: 0 30px;
  border-top: 3px solid rgba(214, 40, 59, 0.45);
  box-shadow: 0 1px 1px rgba(27, 35, 64, 0.12), 0 18px 34px rgba(27, 35, 64, 0.14); transform: rotate(-0.6deg);
}
.wishlist::before, .wishlist::after { content: ""; position: absolute; pointer-events: none; }
.wishlist::before, .wishlist::after { /* a piece of clear tape at each top corner, each its own */
  top: -14px; height: 28px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(232, 232, 220, 0.55) 55%, rgba(255, 255, 255, 0.64));
  border-left: 1px solid rgba(27, 35, 64, 0.1); border-right: 1px solid rgba(27, 35, 64, 0.1);
  box-shadow: 0 1px 2px rgba(27, 35, 64, 0.16);
}
.wishlist::before { left: 22px; width: 116px; rotate: -8deg; }
.wishlist::after { right: 34px; width: 92px; rotate: 5deg; top: -11px; }
.wishlist .wish { position: relative; }
.wishlist .wish::after { /* a coffee ring: somebody works on this */
  content: ""; position: absolute; z-index: -1; right: -58px; bottom: -92px; width: 128px; height: 128px; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, transparent 54%, rgba(120, 76, 32, 0.14) 57%, rgba(120, 76, 32, 0.05) 63%, transparent 66%);
}
.wishlist .head { margin: 0; text-align: left; }
.wishlist .head h2 { font-size: clamp(54px, 7vw, 84px); }
.wishlist .head h2::after { margin-left: 0; }
.wishlist .sub { margin: 12px 0 0; font-size: 18px; }
@media (max-width: 820px) {
  .wishlist { grid-template-columns: minmax(0, 1fr); transform: rotate(-0.4deg); }
  .wishlist .head { text-align: center; }
  .wishlist .head h2::after { margin-left: auto; }
  .wishlist .sub { margin-inline: auto; }
  .wishlist .wish::after { right: -30px; bottom: -88px; }
}
.wish, .soon { width: min(100%, 520px); margin: 0 auto; }
.soon { color: var(--ink-soft); }
.wishlist .soon { text-align: left; font: 400 26px/1.15 var(--pen); color: var(--red); transform: rotate(-1deg); }
.wish { display: grid; gap: 18px; }
.wish-field { display: grid; gap: 2px; font-size: 15px; font-weight: 700; color: var(--pencil); }
.wish-field input {
  width: 100%; min-width: 0; height: 50px; padding: 0 4px; font: 400 26px var(--pen); color: var(--ink);
  background: transparent; border: 0; border-bottom: 2.5px solid var(--ink); border-radius: 0 0 6px 30px / 0 0 4px 6px;
}
.wish-field input::placeholder { color: rgba(27, 35, 64, 0.32); }
.wish-field input:focus { outline: none; border-bottom-color: var(--violet); box-shadow: 0 10px 0 -6px rgba(123, 92, 255, 0.3); }
.wish-consent { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.45; color: var(--ink-soft); cursor: pointer; }
.wish-consent input {
  appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 1px 0 0; cursor: pointer;
  border: 2.2px solid var(--ink); border-radius: 4px 7px 3px 6px / 6px 3px 7px 4px; background: transparent no-repeat 3px -3px / 24px 24px;
}
.wish-consent input:checked { background-image: url("img/site/check-hand.svg"); }
.wish-consent input:focus-visible { outline: 3px dashed var(--violet); outline-offset: 4px; }
.wish-error { margin: 0; font: 400 24px/1.1 var(--pen); color: var(--red); }
.wish-error::before { content: "! "; }
.wish .cta { width: 100%; }
.wish-note { margin: 0; text-align: center; font-size: 14px; color: var(--pencil); }
.trap { position: absolute; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* ---------- WM CONSOLE MODE (Alberto, 30 Oct 2026: "dobbiamo assolutamente fare una sezione WM CONSOLE MODE: activated") ----------
   31 Oct: "fai un background figo, di nostri giochi in foto, un collage", "meno quadernato", "un po piu tech". Console mode on
   and the notebook stops: from edge to edge this is the home screen of a console. Its library is the wall, a collage of real
   frames (tools/console-parete.py), the hardware stands in front of it, a status line says what is on. Straight lines, one
   mono type, the section's yellow marker as the only signal: no glow, no blur, no gradient on the type, the look every
   agent makes. Text on the wall sits on the wash or on a dark label, measured for contrast on the worst frame. */
.console {
  --c: var(--sun); --on: #f5f6f9; --off: #b9bdc9; --rim: rgba(245, 246, 249, 0.26); --deep: #0a0b0e;
  --mono: "Martian Mono", ui-monospace, monospace; --plain: "Lato", system-ui, sans-serif;
  position: relative; isolation: isolate; width: 100%; margin: 0 0 clamp(70px, 10vw, 120px);
  padding: clamp(52px, 7vw, 92px) max(var(--gutter), calc((100% - var(--wide)) / 2)) clamp(44px, 6vw, 72px);
  overflow: clip; color: var(--on); background: var(--deep);
}
.console-wall { position: absolute; inset: 0; z-index: -2; }
.console-wall img { width: 100%; height: 100%; max-width: none; object-fit: cover; }
.console-wall::after { /* a first wash on the whole wall, lighter up there where nothing stands on it */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(8, 9, 12, 0.28) 0 250px, rgba(8, 9, 12, 0.6) 520px);
}
.console::before { /* the second one follows the title and fades out under it: no line where it ends, the games in full colour at its sides */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(8, 9, 12, 0.5) 0, rgba(8, 9, 12, 0.92) max(0px, calc(50% - 600px)), rgba(8, 9, 12, 0.92) calc(50% + 150px), rgba(8, 9, 12, 0) calc(50% + 500px));
  -webkit-mask: linear-gradient(180deg, #000 0 380px, transparent 540px); mask: linear-gradient(180deg, #000 0 380px, transparent 540px);
}
.console::after { /* on the TV the room goes darker */
  content: ""; position: absolute; inset: 0; z-index: -1; background: #08090c; opacity: 0; transition: opacity 0.5s ease; pointer-events: none;
}
.console.is-tv::after { opacity: 0.46; }
.console .head { max-width: 720px; margin: 0; text-align: left; }
.console .kicker { font: 500 14px/1.4 var(--mono); letter-spacing: -0.02em; color: var(--c); }
.console .head h2 { margin-top: 10px; font: 800 clamp(26px, 4.3vw, 52px)/1.12 var(--mono); letter-spacing: -0.05em; word-spacing: -0.2em; color: var(--on); text-wrap: wrap; }
.console .head h2::after { content: none; }
.console-stamp { display: block; width: fit-content; margin-top: 0.16em; padding: 0.05em 0.26em 0.07em; color: var(--deep); background: var(--c); }
.console-stamp::after { /* the caret of a screen that is waiting */
  content: ""; display: inline-block; width: 0.42em; height: 0.84em; margin-left: 0.16em; vertical-align: -0.08em; background: currentColor;
  animation: console-caret 1.06s steps(1) infinite;
}
@keyframes console-caret { 50% { opacity: 0; } }
.console .sub { margin: 20px 0 0; max-width: 620px; font: 400 18px/1.6 var(--plain); color: #e8eaf0; text-wrap: pretty; }
/* the status line, made by the script with the switch */
.console-bar {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 28px;
  margin-top: clamp(30px, 4vw, 44px); padding: 8px 14px; background: rgba(10, 11, 14, 0.88); border: 1px solid var(--rim); border-radius: 3px;
}
.console-swap {
  display: inline-flex; align-items: center; gap: 12px; min-height: 44px; padding: 0; border: 0; background: none; cursor: pointer;
  font: 500 14px/1 var(--mono); letter-spacing: -0.03em; color: var(--on); -webkit-tap-highlight-color: transparent;
}
.console-swap span { white-space: nowrap; transition: color 0.2s ease; }
.console-swap span:last-of-type, .console-swap[aria-checked="true"] span:first-of-type { color: var(--off); }
.console-swap[aria-checked="true"] span:last-of-type { color: var(--on); }
.console-swap i { position: relative; flex: none; width: 64px; height: 30px; border: 1.5px solid var(--on); border-radius: 3px; background: var(--deep); }
.console-swap i::after { /* the ribbed slider of a real switch */
  content: ""; position: absolute; top: 3px; bottom: 3px; left: 3px; width: 28px; border-radius: 1.5px;
  background: repeating-linear-gradient(90deg, rgba(10, 11, 14, 0.6) 0 1.5px, transparent 1.5px 4.5px) center / 15px 62% no-repeat, var(--c);
  transition: translate 0.2s cubic-bezier(0.3, 0, 0.2, 1);
}
.console-swap[aria-checked="true"] i::after { translate: 27px 0; }
/* said once: gone at the first swap */
.console-swap::after { content: "<- flip it"; margin-left: -2px; font-size: 12px; font-weight: 400; color: var(--c); white-space: nowrap; transition: opacity 0.2s ease; }
.console-swap.used::after { opacity: 0; }
.console-swap:focus-visible { outline: 2px solid var(--c); outline-offset: 4px; border-radius: 3px; }
.console-status { display: flex; flex-wrap: wrap; gap: 2px 20px; margin: 0; font: 400 12px/1.6 var(--mono); letter-spacing: -0.03em; color: var(--off); }
.console-status b { font-weight: 500; color: var(--on); }
.console-setup {
  list-style: none; display: grid; grid-template-columns: minmax(0, 1.3fr) 132px minmax(0, 1fr); align-items: center;
  gap: clamp(12px, 2.2vw, 28px); margin: clamp(30px, 4vw, 46px) 0 0; padding: 0;
}
/* the two pieces differ in height: each sits in the middle of its cell, their captions on one line */
.console-step { display: grid; grid-template-rows: 1fr auto; align-self: stretch; text-align: center; }
.console-phone, .console-tv { position: relative; align-self: center; width: 100%; height: auto; }
.console-phone { isolation: isolate; }
.console-phone img, .console-tv img { width: 100%; height: auto; }
/* The game on the phone lying in the controller (Alberto: "ruin a vox in video per almeno 10 sec", "dentro a schermo di
   quel mobile super portable"): the clip sits on the drawing's screen, measured on console-pad-3.svg (the screen from
   147,33 to 536,221 of 680x296, rounded 13: the clip stays inside its line). No name and no HUD in it. Asked for less
   motion, the still frame instead */
.console-clip, .console-phone::after {
  position: absolute; left: 21.88%; top: 11.71%; width: 56.76%; height: 62.3%; border-radius: 2.98% / 6.24%;
  object-fit: cover; background: #070b15 url("img/site/console-clip-2.webp") center / cover no-repeat; z-index: 1;
}
@media (prefers-reduced-motion: reduce) {
  .console-clip { display: none; }
  .console-phone::after { content: ""; }
}
/* The swap (Alberto, 31 Oct 2026: "si vedra' prima portable con extended come gia fatto, e se si swappa, si ha tv con gioco su
   schermo, e portable extended con schermo spento come controller bt", "che e' proprio come funziona"). Only with the
   script (site-game.js adds has-swap and the switch): without it the section stays as it was. Each screen has a dark glass
   under its picture: a picture that goes off shrinks to a line and leaves the glass, as a screen does. The TV's screen is
   measured on console-tv-2.svg (from 30,24 of 520x336, 460x258.8, rounded 3); its clip is cut to 16:9 at the sides */
.console-dark { display: none; position: absolute; left: 21.88%; top: 11.71%; width: 56.76%; height: 62.3%; border-radius: 2.98% / 6.24%; background: linear-gradient(118deg, #0a0e1a 0 42%, #1b2233 49%, #0a0e1a 57%); }
.console-tv .console-dark, .console-clip-tv { position: absolute; left: 5.769%; top: 7.143%; width: 88.462%; height: 77.024%; border-radius: 0.65% / 1.16%; }
.console-clip-tv { z-index: 1; object-fit: cover; background: #070b15; transform: scaleY(0.012); opacity: 0; }
.has-swap .console-dark { display: block; }
.has-swap .console-clip, .has-swap .console-clip-tv { transition: transform 0.26s cubic-bezier(0.6, 0, 0.9, 0.4), opacity 0.1s linear 0.22s; }
.has-swap.is-tv .console-clip { transform: scaleY(0.012); opacity: 0; }
.has-swap.is-tv .console-phone::after { opacity: 0; }
.has-swap.is-tv .console-clip-tv { transform: none; opacity: 1; transition: transform 0.34s cubic-bezier(0.1, 0.7, 0.3, 1) 0.3s, opacity 0.05s linear 0.3s; }
.has-swap:not(.is-tv) .console-clip { transition-delay: 0.3s, 0.3s; }
/* The keys, made by the script over the drawing: they play the clip, on the phone and on the TV alike (tools/console-tasti.py).
   Positions measured on console-pad-3.svg, 680x296: the left stick at 94.2,91, the right at 574.7,164.2, each in a well of
   radius 28.6; the blue button at 557.2,90.3. The stick's cap is smaller than the drawn one, so that it has room to move in
   its well; the rim says which way it is pushed. The triggers took the place of the white shoulders of the drawing, cut out of
   the body (Alberto: "vedo bianco di mesh controller in tasti"): a full shape of 56x24 along the body's edge, which falls 14
   degrees from 123.5,31 to 73.2,43.5 and from 555.8,31 to 605.4,43.5, half under it, so that it goes down into it. They are in
   the page, for those without the script too; the phone is a stacking context of its own, or behind the body would also mean
   behind the room going dark on the TV */
.pad-stick { position: absolute; z-index: 2; width: 8.412%; aspect-ratio: 1; border-radius: 50%; background: #14161c; }
.pad-stick.left { left: 9.647%; top: 21.08%; }
.pad-stick.right { left: 80.31%; top: 45.81%; }
.pad-stick b { position: absolute; inset: 18.5%; border-radius: 50%; background: radial-gradient(circle at 50% 44%, #4a5270 0 30%, #2b3148 33% 100%); box-shadow: 0 0 0 1.5px #3a3f4d; }
.pad-stick u {
  position: absolute; inset: 0; border-radius: 50%; opacity: 0; background: conic-gradient(from -42deg, var(--c) 0 84deg, transparent 0);
  -webkit-mask: radial-gradient(closest-side, transparent 80%, #000 83%); mask: radial-gradient(closest-side, transparent 80%, #000 83%);
}
.pad-button { position: absolute; z-index: 2; left: 79.96%; top: 25.95%; width: 3.97%; aspect-ratio: 1; border-radius: 50%; background: #14161c; }
.pad-button b { position: absolute; inset: 6%; border-radius: 50%; background: #2f62ff; transition: transform 0.06s ease-out; }
.pad-button.down b { transform: scale(0.74); }
.pad-trigger {
  position: absolute; z-index: -1; top: 8.21%; width: 8.235%; height: 8.108%; border-radius: 46% 46% 14% 14% / 92% 92% 28% 28%;
  background: linear-gradient(180deg, #8d93a2 0, #5b606e 46%, #474b57 100%); transition: transform 0.05s ease-out;
}
.pad-trigger.left { left: 10.31%; rotate: -14deg; }
.pad-trigger.right { left: 81.37%; rotate: 14deg; }
.pad-trigger.down { transform: translateY(20%); background: var(--c); }
/* a label under each piece, in the yellow of the signal on the one that has the game */
.console-step p {
  justify-self: center; width: fit-content; margin: 16px 0 0; padding: 6px 10px; background: rgba(10, 11, 14, 0.88); border-radius: 2px;
  font: 500 14px/1.35 var(--mono); letter-spacing: -0.03em; color: var(--on); transition: color 0.3s ease;
}
.has-swap .console-step p { color: var(--off); }
.has-swap:not(.is-tv) .console-step:nth-child(1) p, .has-swap.is-tv .console-step:nth-child(3) p { color: var(--c); }
.console-step .console-cap { display: grid; justify-items: center; width: 100%; padding: 0; background: none; }
.console-cap span { grid-area: 1 / 1; padding: 6px 10px; background: rgba(10, 11, 14, 0.88); border-radius: 2px; transition: opacity 0.3s ease; }
.console-cap span:last-child, .has-swap.is-tv .console-cap span:first-child { opacity: 0; }
.has-swap.is-tv .console-cap span:last-child { opacity: 1; }
.console-way { text-align: center; }
.console-way p { width: fit-content; margin: 0 auto 10px; padding: 6px 8px; background: rgba(10, 11, 14, 0.88); border-radius: 2px; font: 400 12px/1.45 var(--mono); letter-spacing: -0.03em; color: var(--on); }
/* the signal going to the TV: a line of dashes that runs only while it does */
.console-link {
  position: relative; display: block; height: 14px; overflow: hidden; transition: opacity 0.3s ease;
  clip-path: polygon(0 5.5px, calc(100% - 12px) 5.5px, calc(100% - 12px) 0, 100% 7px, calc(100% - 12px) 100%, calc(100% - 12px) 8.5px, 0 8.5px);
}
.console-link::before { content: ""; position: absolute; inset: 0 0 0 -18px; background: repeating-linear-gradient(90deg, var(--c) 0 11px, transparent 11px 18px); }
.console-link::after { content: ""; position: absolute; inset: 0 0 0 auto; width: 12px; background: var(--c); }
.has-swap:not(.is-tv) .console-link { opacity: 0.4; }
.has-swap.is-tv .console-link::before { animation: console-signal 0.5s linear infinite; }
@keyframes console-signal { to { transform: translateX(18px); } }
.console .more { margin: 28px 0 0; }
.console .more a { display: inline-block; padding: 10px 14px; font: 500 14px/1 var(--mono); letter-spacing: -0.03em; color: var(--c); background: rgba(10, 11, 14, 0.88); border: 1.5px solid var(--c); border-radius: 3px; }
.console .more a:hover { color: var(--deep); background: var(--c); }
/* The plate with the logo, like the one under a console. Unity's rules for it: unchanged, never the biggest thing here,
   with room around it: on its own plain ground, nothing behind it */
.console-unity {
  display: grid; grid-template-columns: 200px minmax(0, 1fr) auto; align-items: center; gap: clamp(26px, 4vw, 48px);
  margin-top: clamp(34px, 4.6vw, 52px); padding: clamp(26px, 3.6vw, 38px); color: var(--deep); background: #f1f2f5; border-radius: 3px;
}
.console-unity > img { width: 200px; height: auto; }
.console-why h3 { margin: 0; font: 800 clamp(19px, 2vw, 24px)/1.2 var(--mono); letter-spacing: -0.05em; color: var(--deep); }
.console-why p { margin: 8px 0 0; font: 400 16px/1.55 var(--plain); color: #3a3f4d; text-wrap: pretty; }
.console-input { list-style: none; display: grid; gap: 9px; margin: 0; padding: 0; font: 500 13px/1.2 var(--mono); letter-spacing: -0.03em; color: var(--deep); white-space: nowrap; }
.console-input li { position: relative; padding-left: 36px; }
.console-input li::before { content: "[x]"; content: "[x]" / ""; position: absolute; left: 0; font-weight: 800; color: #7a5200; }
@media (max-width: 900px) {
  .console-unity { grid-template-columns: minmax(0, 1fr) auto; }
  .console-unity > img { grid-column: 1 / -1; justify-self: center; }
}
@media (max-width: 720px) {
  .console-wall::after { background: rgba(8, 9, 12, 0.5); }
  .console::before { background: rgba(8, 9, 12, 0.72); -webkit-mask: linear-gradient(180deg, #000 0 400px, transparent 540px); mask: linear-gradient(180deg, #000 0 400px, transparent 540px); }
  .console .kicker { font-size: 13px; }
  .console .sub { font-size: 17px; }
  .console-bar { padding: 6px 12px 10px; }
  .console-swap { gap: 8px; font-size: 13px; }
  .console-swap::after { font-size: 11.5px; margin-left: 0; }
  .console-swap i { width: 56px; }
  .console-swap i::after { width: 24px; }
  .console-swap[aria-checked="true"] i::after { translate: 23px 0; }
  .console-setup { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .console-phone, .console-tv { max-width: 420px; margin-inline: auto; }
  .console-way { display: flex; align-items: center; justify-content: center; gap: 14px; }
  .console-way p { margin: 0; max-width: 170px; }
  .console-link { flex: none; width: 58px; rotate: 90deg; }
  .console-unity { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .console-input { justify-content: center; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
  .console-stamp::after, .has-swap.is-tv .console-link::before { animation: none; }
  .console::after, .has-swap .console-clip, .has-swap .console-clip-tv, .console-cap span, .console-link, .console-step p, .console-swap i::after, .console-swap::after { transition: none; }
}

/* ---------- recommended gear: the portal's shop window (portal/site.go siteShop) ----------
   A row that scrolls sideways and snaps, no script: on a phone a card and the edge of the next, on a computer the cards
   side by side, centred while they fit. Each card hangs on a jute twine by a wooden clothespin; TESTED a red rubber stamp.
   The one script here (web/assets/site-game.js) does the clothespins and the two hands that pull the twine: without it the
   cards simply stay on the twine and the row moves by touch, trackpad or shift and wheel. */
.shop { position: relative; margin-bottom: clamp(70px, 10vw, 120px); }
.shop-aff { margin: 14px auto 0; font-size: 14px; color: var(--pencil); }
.shop-aff b { color: var(--ink); font-weight: 700; }
.shop-track {
  list-style: none; display: grid; grid-auto-flow: column; grid-auto-columns: min(84%, 340px);
  justify-content: safe center; gap: clamp(22px, 3vw, 36px);
  overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scrollbar-width: none;
  /* room for the clothespins, the tilt and the shadow, which a scrolling box would cut */
  margin: -6px -16px -34px; padding: 130px 16px 60px; scroll-padding-inline: 16px;   /* the twine and the pegs sit under the legend, never on it */
  /* the jute twine the cards hang on: it scrolls with them */
  background: url("img/site/twine.svg") 0 119px / 12px 8px repeat-x;
  background-attachment: local;
}
.shop-track::-webkit-scrollbar { display: none; }
.shop-item { position: relative; display: flex; scroll-snap-align: center; --tilt: calc(var(--s2) + var(--s3)); --pin-x: calc(var(--p3) + var(--p5)); --pin-rot: calc(var(--q2) + var(--q5)); }
.shop-item:nth-child(4n+1) .peg, .peg.wood-1 { --peg: url("img/site/peg-1.svg"); }
.shop-item:nth-child(4n+2) .peg, .peg.wood-2 { --peg: url("img/site/peg-2.svg"); }
.shop-item:nth-child(4n+3) .peg, .peg.wood-3 { --peg: url("img/site/peg-3.svg"); }
.shop-item:nth-child(4n) .peg, .peg.wood-4 { --peg: url("img/site/peg-4.svg"); }
.shop-item:nth-child(2n+1) { --s2: -1.1deg; --q2: -6deg; }
.shop-item:nth-child(2n) { --s2: 0.8deg; --q2: 5deg; }
.shop-item:nth-child(3n+1) { --s3: -0.4deg; --p3: 66%; }
.shop-item:nth-child(3n+2) { --s3: 0.6deg; --p3: 52%; }
.shop-item:nth-child(3n) { --s3: -0.9deg; --p3: 41%; }
.shop-item:nth-child(5n+1) { --p5: 6%; --q5: -4deg; }
.shop-item:nth-child(5n+2) { --p5: -4%; --q5: 3deg; }
.shop-item:nth-child(5n+3) { --p5: 13%; --q5: 7deg; }
.shop-item:nth-child(5n+4) { --p5: 0%; --q5: -6deg; }
.shop-item:nth-child(5n) { --p5: -2%; --q5: 1deg; }
.shop-card {
  position: relative; display: flex; flex-direction: column; width: 100%; text-decoration: none; color: var(--ink);
  background: var(--paper-hi); box-shadow: 0 1px 1px rgba(27, 35, 64, 0.12), 0 14px 26px rgba(27, 35, 64, 0.15);
  transform: rotate(var(--tilt)); transition: transform 0.2s ease, box-shadow 0.25s ease;
}
/* the wooden clothespin, seen from the front as in Alberto's photo (30 Oct 2026): its jaws grip the card's top edge. One
   drawing, two layers: the jaw behind stands still, the jaw in front pivots on the spring when the peg opens. Only the
   top of the peg can be grabbed, the rest lets clicks through. Pulled off the twine, a copy stays on the cursor */
.peg {
  position: absolute; z-index: 2; top: -112px; left: var(--pin-x); width: 23px; height: 146px; translate: -50% 0;
  rotate: var(--pin-rot); transform-origin: 50% 72%;   /* turns around the point that sits on the twine */
  pointer-events: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  background: var(--peg) 100% 0 / 200% 100% no-repeat;
  filter: drop-shadow(1px 3px 2px rgba(27, 35, 64, 0.28));
}
.peg i {
  position: absolute; inset: 0; background: var(--peg) 0 0 / 200% 100% no-repeat;
  transform: perspective(280px) rotateX(0deg); transform-origin: 50% 61%;
  transition: transform 0.13s cubic-bezier(0.3, 1.7, 0.5, 1);   /* the spring snaps it shut */
}
.peg.open i { transform: perspective(280px) rotateX(22deg); transition: transform 0.18s ease-out; }
.peg::after { content: ""; position: absolute; top: -6px; left: 50%; width: 46px; height: 64%; translate: -50% 0; pointer-events: auto; cursor: grab; }
.peg.open::after { cursor: grabbing; }
.peg.loose { position: fixed; z-index: 6; left: 0; top: 0; filter: drop-shadow(5px 11px 6px rgba(27, 35, 64, 0.32)); }
.peg.loose::after { display: none; }
.peg-in-hand, .peg-in-hand * { cursor: grabbing !important; }
.shop-item.gone .shop-card, .shop-item.gone .peg { visibility: hidden; }
/* the falling copy slides out from under the pegs (z-index 2) and, while it falls, the page sits over the footer */
.shop-card.falling { position: fixed; z-index: 1; margin: 0; pointer-events: none; transform: none; transition: none; }
main:has(.falling, .loose) { z-index: 2; }
.shop-card:hover { transform: rotate(0deg) translateY(-3px); box-shadow: 0 1px 1px rgba(27, 35, 64, 0.12), 0 22px 34px rgba(27, 35, 64, 0.2); }
.shop-pic { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; margin: 10px 10px 0; background: #fff; }
.shop-pic img { width: 100%; height: 100%; object-fit: contain; padding: 5%; transition: transform 0.35s ease; }
.shop-pic.is-photo img { object-fit: cover; padding: 0; }
.shop-card:hover .shop-pic img { transform: scale(1.04); }
.shop-text { flex: 1 0 auto; display: flex; flex-direction: column; gap: 6px; padding: 16px 20px 0; }
.shop-text b { font-size: 18px; font-weight: 700; line-height: 1.25; }
/* two lines, always: the same height in every card, so the links line up */
.shop-text small {
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden;
  min-height: 3em; font-size: 14.5px; line-height: 1.5; color: var(--ink-soft); text-wrap: pretty;
}
.shop-go {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; margin: 14px 20px 20px; padding: 2px 4px;
  font-size: 16px; font-weight: 700; color: var(--ink);
  background: linear-gradient(transparent 56%, color-mix(in srgb, var(--c) 34%, transparent) 56%);
}
.shop-go svg { width: 18px; height: 18px; flex: none; color: var(--c); }
.shop-card:hover .shop-go { background: linear-gradient(transparent 28%, color-mix(in srgb, var(--c) 40%, transparent) 28%); }

/* TESTED (Alberto, 29 Oct 2026: "tested certificato da me"): his rubber stamp, in red ink, on what he tried himself */
.shop-tested {
  position: absolute; top: 12px; left: 12px; z-index: 1; display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px 3px 8px; font-size: 13px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--red); border: 2.5px solid var(--red); border-radius: 6px 4px 7px 3px; background: rgba(255, 253, 247, 0.82);
  transform: rotate(-9deg); opacity: 0.92;
}
.shop-tested svg { width: 14px; height: 14px; flex: none; }
.shop-legend { margin: 8px auto 0; font-size: 14px; color: var(--pencil); }
.shop-legend b { color: var(--red); font-weight: 700; letter-spacing: 0.14em; }
@supports selector(::scroll-marker) {
  .shop-track { scroll-marker-group: after; }
  .shop-track::scroll-marker-group { display: flex; justify-content: center; gap: 12px; margin: 4px 0 14px; }
  .shop-item::scroll-marker { content: ""; width: 10px; height: 10px; border: 2px solid var(--ink); border-radius: 46% 54% 40% 60%; }
  .shop-item::scroll-marker:target-current { background: var(--c); border-color: var(--c); }
  @media (min-width: 820px) { .shop-track { scroll-marker-group: none; } }
}
/* no bar under the row (Alberto, 30 Oct 2026: "togli barra scorrevole carosello prodotti da sotto") and no arrows ("e la
   corda mollette, devono apparire due mani, e come in tiro alla fune si tira di qua e di la la lista prodotti, quindi no
   arrows"): two hands traced from a photo of a tug of war grip the twine at its ends, placed and moved by site-game.js.
   The button is the fist. On the left its drawing is the fingers, over the twine, and the arm is under it; the darker hand is
   all in front of the twine, as in the photo. The arms run out past the page: main cuts them, or the page would scroll
   sideways (clip, not hidden: nothing else changes, and the pegs and cards that fall are fixed to the window) */
main { overflow-x: clip; }
.tug-arm { position: absolute; z-index: 3; pointer-events: none; }
.tug-arm.right { z-index: 5; }
.tug-twine {
  position: absolute; z-index: 4; height: 8px; pointer-events: none; background: url("img/site/twine.svg") 0 0 / 12px 8px repeat-x;
  filter: drop-shadow(0 1px 1px rgba(27, 35, 64, 0.22));
}
.tug-hand {
  position: absolute; z-index: 5; padding: 0; margin: 0; border: 0; background: none; cursor: grab;
  touch-action: pan-y; user-select: none; -webkit-user-select: none; -webkit-tap-highlight-color: transparent;
}
.tug-hand.held { cursor: grabbing; }
.tug-arm img, .tug-hand img { position: absolute; max-width: none; pointer-events: none; }
.tug-arm img { filter: drop-shadow(2px 7px 5px rgba(27, 35, 64, 0.22)); }
.tug-hand img { filter: drop-shadow(0 1px 1px rgba(27, 35, 64, 0.25)); }
.tug-hand:focus-visible { outline: 3px dashed var(--c); outline-offset: 4px; border-radius: 42% 58% 46% 54%; }

/* ---------- short pages: one index card ---------- */
.msg { --c: var(--violet); padding: clamp(40px, 9vw, 110px) var(--gutter) clamp(60px, 10vw, 120px); }
.msg .card {
  position: relative; width: min(100%, 580px); margin: 0 auto; padding: clamp(26px, 4vw, 40px); text-align: center;
  background: var(--paper-hi); border-top: 3px solid rgba(214, 40, 59, 0.45);
  box-shadow: 0 1px 1px rgba(27, 35, 64, 0.12), 0 18px 34px rgba(27, 35, 64, 0.14); transform: rotate(-0.5deg);
}
.msg .card::before {
  content: ""; position: absolute; top: -14px; left: 47%; width: 108px; height: 28px; translate: -50% 0; rotate: -3deg;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(232, 232, 220, 0.55) 55%, rgba(255, 255, 255, 0.64));
  border-left: 1px solid rgba(27, 35, 64, 0.1); border-right: 1px solid rgba(27, 35, 64, 0.1);
  box-shadow: 0 1px 2px rgba(27, 35, 64, 0.16);
}
.msg h1 { margin: 0; font: 400 clamp(42px, 6vw, 58px)/1.02 var(--pen); color: var(--ink); }
.msg .lead { margin-top: 14px; }
.msg form { margin-top: 24px; }
.msg .wish { margin-top: 22px; text-align: left; }
.msg .actions { margin-top: 26px; }
.prose .card { text-align: left; }
.prose h2 { margin: 26px 0 4px; font: 400 32px/1.05 var(--pen); color: var(--ink); }
.prose p { margin: 0 0 6px; color: var(--ink-soft); }
.prose .lead { margin: 14px 0 0; }

/* ---------- foot ---------- */
.foot {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 22px; padding: 26px var(--gutter) 34px;
  font-size: 14px; color: var(--pencil); border-top: 2px dashed var(--line);
}
.foot a { color: var(--ink-soft); text-decoration: none; }
.foot a:hover { color: var(--ink); text-decoration: underline; text-decoration-color: var(--coral); }
.foot-tm { flex-basis: 100%; max-width: 760px; margin-top: 6px; font-size: 12.5px; line-height: 1.45; text-align: center; color: var(--pencil); }

/* ---------- phone ---------- */
@media (max-width: 720px) {
  .hero { --rw: 1100px; }
  .grid {
    display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 22px; scrollbar-width: none;
    margin: 0 calc(-1 * var(--gutter)); padding: 26px var(--gutter) 26px; scroll-padding: 0 var(--gutter);
  }
  .grid::-webkit-scrollbar { display: none; }
  .grid li { flex: 0 0 72%; scroll-snap-align: start; }
  .actions .cta { width: 100%; }
  .actions { gap: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .cta, .cta::after, .post, .pill::after, .shop-card, .shop-pic img { transition: none; }
}

/* ---------- apps.wmgames.online: the short list (portal/apps.go) ---------- */
/* A page of the notebook with the list of the special testers: every name crossed out with a marker (tools/scarabocchi.py,
   there is no name under the ink), the last line a question. Nothing to press but the way to the wishlist: there is no
   access yet (Alberto, 31 Oct 2026: "per ora niente accesso", "solo pagina presentazione"). */
body:has(> .apps) { position: relative; } /* the margin line goes down the whole sheet: nothing here hides its end */
.apps-top { --c: var(--red); text-align: center; padding: clamp(28px, 5vw, 64px) var(--gutter) 0; }
.apps-top h1 {
  position: relative; display: inline-block; margin: 0; padding: 0 0.12em 0.16em;
  font: 400 clamp(72px, 12vw, 140px)/1 var(--pen); color: var(--ink); letter-spacing: 0.01em;
}
.apps-top h1::before {
  content: ""; position: absolute; z-index: -1; left: 0.04em; right: -0.02em; bottom: 0.32em; height: 0.3em;
  background: rgba(255, 79, 109, 0.3); border-radius: 12% 44% 10% 40% / 30% 60% 40% 70%; transform: rotate(1.2deg);
}
.apps-stamp {
  display: inline-block; margin: 28px 0 0; padding: 7px 16px 6px; font: 700 15px/1.2 var(--hand); letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--red); border: 3px solid var(--red); border-radius: var(--sketch); transform: rotate(-4deg);
}
.apps-list {
  position: relative; width: min(100% - 2 * var(--gutter), 540px); margin: clamp(44px, 6vw, 64px) auto 0; padding: 38px clamp(22px, 5vw, 46px) 30px;
  background: var(--paper-hi); box-shadow: 0 1px 1px rgba(27, 35, 64, 0.12), 0 14px 26px rgba(27, 35, 64, 0.16); transform: rotate(-1deg);
}
.apps-list::before { /* the same piece of clear tape as the photos of the landing */
  content: ""; position: absolute; top: -13px; left: 44%; width: 112px; height: 27px; rotate: 3deg;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(232, 232, 220, 0.55) 55%, rgba(255, 255, 255, 0.64));
  border-left: 1px solid rgba(27, 35, 64, 0.1); border-right: 1px solid rgba(27, 35, 64, 0.1); box-shadow: 0 1px 2px rgba(27, 35, 64, 0.16);
}
.apps-list h2 { margin: 0 0 4px; font: 400 clamp(46px, 6vw, 58px)/1 var(--pen); color: var(--ink); }
.shortlist { list-style: none; margin: 0; padding: 0; counter-reset: line; }
.shortlist li { display: flex; align-items: center; gap: 14px; min-height: 58px; border-bottom: 2px solid rgba(47, 98, 255, 0.16); counter-increment: line; --tilt: calc(var(--r2) + var(--r3)); }
.shortlist li::before { content: counter(line) "."; flex: none; width: 28px; font: 400 32px/1 var(--pen); color: var(--ink-soft); }
.shortlist img { width: auto; height: 36px; max-width: calc(100% - 42px); object-fit: fill; transform: translateX(var(--x3)) rotate(var(--tilt)); }
/* nothing alike: pieces that repeat every 2 and 3 lines, on drawings already all different */
.shortlist li:nth-child(2n+1) { --r2: -1.3deg; }
.shortlist li:nth-child(2n) { --r2: 0.9deg; }
.shortlist li:nth-child(3n+1) { --r3: 0.4deg; --x3: 6px; }
.shortlist li:nth-child(3n+2) { --r3: -0.8deg; --x3: 16px; }
.shortlist li:nth-child(3n) { --r3: 1.1deg; --x3: 0px; }
.shortlist .free { border-bottom: 0; }
.shortlist .free span { font: 400 38px/1 var(--pen); color: var(--red); transform: rotate(-2deg); }
.apps-margin { position: absolute; right: 22px; bottom: 16px; margin: 0; font: 400 22px/1 var(--pen); color: var(--pencil); transform: rotate(-3deg); }
.apps-how, .apps-closed { width: min(100% - 2 * var(--gutter), var(--wide)); margin: clamp(64px, 9vw, 100px) auto 0; }
.apps-how { --c: var(--violet); }
.apps-closed { --c: var(--mint); margin-bottom: clamp(56px, 8vw, 90px); text-align: center; }
.steps { list-style: none; margin: 0; padding: 8px 0 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(22px, 3vw, 38px); align-items: start; counter-reset: step; }
.steps li {
  counter-increment: step; margin-top: var(--drop); padding: 18px 24px 24px; background: var(--paper-hi); transform: rotate(var(--t));
  box-shadow: 0 1px 1px rgba(27, 35, 64, 0.12), 0 12px 22px rgba(27, 35, 64, 0.13);
}
.steps li::before { content: counter(step); display: block; font: 400 64px/1 var(--pen); color: var(--m); }
.steps h3 { margin: 2px 0 6px; font: 700 19px/1.25 var(--hand); color: var(--ink); }
.steps p { margin: 0; color: var(--ink-soft); }
.steps li:nth-child(1) { --t: -1.3deg; --m: var(--coral); --drop: 0px; }
.steps li:nth-child(2) { --t: 0.8deg; --m: var(--cobalt); --drop: 14px; }
.steps li:nth-child(3) { --t: -0.5deg; --m: var(--mint); --drop: 5px; }
@media (max-width: 820px) {
  .steps { grid-template-columns: minmax(0, 1fr); max-width: 440px; margin-inline: auto; }
  .steps li { margin-top: 0; }
}