/* js/apple-pages.css - THE APPLE GAMES' OWN PAGES on the website (Goliath, 2026-10-15: "post a privacy policy just for
 * each of the games that are in Apple in their directories", and "a clean one page of How to Play for each ... that
 * states that instructions are also in the games. For these include some art for the games"):
 *
 *   /across/how-to-play/       /across/privacy/        Across the Corn
 *   /nightfall/how-to-play/    /nightfall/privacy/     NIGHTFALL
 *   /chess/how-to-play/        /chess/privacy/         The Corn Gambit
 *   /gatebattle/how-to-play/   (its privacy page is /gatebattle/privacy/, with its own sheet)
 *   /hnhsuite/how-to-play/     (its privacy page is /hnhsuite/privacy/, with its own sheet)
 *   /lands/how-to-play/        /lands/privacy/         The Corn Lands (its iPhone and iPad app, 2026-10-15)
 *   /sweetshop/how-to-play/    /sweetshop/privacy/     Tenderfoot's Sweet Shop (2026-10-18, ahead of its app)
 *   /blight/how-to-play/       /blight/privacy/        The Blight (2026-10-18)
 *   /mirelight/how-to-play/    /mirelight/privacy/     Mirelight (2026-10-18)
 *   /lastcall/how-to-play/     /lastcall/privacy/      LAST CALL (2026-10-19, a website game for now)
 *   /hustle/how-to-play/       (the site's /privacy/)  Hushling Hustle (2026-10-21, a website game for now)
 *
 * One sheet for all of them: the game's painting at the top, then one column of words made for a phone first (16px
 * gutters, no sideways scroll). Every address on the pages is absolute, so a folder asked for without its slash still
 * draws. No script and no form. The body's class picks the game's colours (ap--across, ap--nightfall, ap--chess,
 * ap--battle, ap--suite, ap--lands, ap--sweetshop, ap--blight, ap--mire, ap--lastcall, ap--hustle). apps/tools/build-www.mjs leaves these folders out of the apps: the pages live on the website.
 */

:root {
  --ink: #0F0B16;
  --panel: rgba(255, 255, 255, .045);
  --line: rgba(255, 255, 255, .12);
  --text: #F6F0E6;
  --muted: #C9BFD8;
  --accent: #F5C242;
  --accent-2: #FFE08A;
  --glow: rgba(245, 194, 66, .22);
  --gutter: 16px;
  --font: 'Trebuchet MS', 'Lucida Grande', 'Segoe UI', Verdana, sans-serif;
  --title-font: "Palatino Linotype", "Book Antiqua", Palatino, "URW Palladio L", "P052", Georgia, serif;
}
@media (min-width: 700px) { :root { --gutter: 28px; } }

.ap--across { --ink: #0E1410; --accent: #F2C14E; --accent-2: #FFE39A; --glow: rgba(242, 193, 78, .22); --muted: #CFD8C2; }
.ap--nightfall { --ink: #0C0918; --accent: #FF8A3D; --accent-2: #FFC27A; --glow: rgba(255, 138, 61, .24); --muted: #C7BEE0; }
.ap--chess { --ink: #0D0F17; --accent: #E8C66A; --accent-2: #FFF0B8; --glow: rgba(232, 198, 106, .2); --muted: #C3CAD9; }
.ap--battle { --ink: #120A0B; --accent: #F5C242; --accent-2: #FFE08A; --glow: rgba(214, 64, 52, .26); --muted: #D9C3BE; }
.ap--lands { --ink: #0F1410; --accent: #9FD36A; --accent-2: #D8F2A8; --glow: rgba(159, 211, 106, .2); --muted: #CFD9C4; }
.ap--sweetshop { --ink: #1C1230; --accent: #FF8CC0; --accent-2: #FFD3E6; --glow: rgba(255, 140, 192, .22); --muted: #D6C6E4; }
.ap--suite { --ink: #0B0814; --accent: #F0A94B; --accent-2: #FFD79A; --glow: rgba(240, 169, 75, .22); --muted: #D2C4DE; }
.ap--blight { --ink: #1A120C; --accent: #F2B33D; --accent-2: #FFD98A; --glow: rgba(242, 179, 61, .22); --muted: #D8C9B4; }
.ap--mire { --ink: #08181C; --accent: #F2C46A; --accent-2: #FFE2A6; --glow: rgba(94, 214, 200, .2); --muted: #BFD6D4; }
.ap--lastcall { --ink: #140A14; --accent: #F2C46D; --accent-2: #FFE3A6; --glow: rgba(214, 92, 140, .22); --muted: #DCCFF0; }
.ap--hustle { --ink: #1E1206; --accent: #F5C242; --accent-2: #FFE3B0; --glow: rgba(255, 143, 199, .2); --muted: #E2D2BC; }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; min-height: 100vh; background: var(--ink); color: var(--text); font-family: var(--font); font-size: 17px; line-height: 1.6; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--accent-2); text-underline-offset: 3px; }
a:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; border-radius: 4px; }

.skip { position: absolute; left: -9999px; top: 8px; z-index: 10; padding: 10px 14px; background: var(--accent); color: #1A1206; font-weight: bold; border-radius: 8px; }
.skip:focus { left: var(--gutter); }

/* the bar */
.bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: max(10px, env(safe-area-inset-top)) var(--gutter) 10px; background: rgba(10, 8, 14, .82); border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.bar__brand { display: flex; align-items: center; gap: 10px; min-height: 44px; color: #fff; text-decoration: none; font-family: var(--title-font); font-weight: bold; font-size: 17px; letter-spacing: .03em; min-width: 0; }
.bar__brand img { width: 36px; height: 36px; border-radius: 9px; flex: none; }
.bar__brand span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar__nav { display: flex; gap: 6px; flex: none; }
.bar__nav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; border-radius: 22px; color: var(--text); text-decoration: none; font-size: 15px; border: 1px solid var(--line); }
.bar__nav a[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: #1A1206; font-weight: bold; }

/* the painting at the top */
.hero { position: relative; margin: 0; min-height: 300px; display: flex; align-items: flex-end; overflow: hidden; }
.hero__art { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .05) 20%, rgba(0, 0, 0, .35) 55%, var(--ink) 100%); }
.hero__words { position: relative; z-index: 1; width: 100%; max-width: 820px; margin: 0 auto; padding: 120px var(--gutter) 22px; }
.hero__kicker { margin: 0 0 6px; color: var(--accent-2); font-size: 13px; font-weight: bold; letter-spacing: .14em; text-transform: uppercase; text-shadow: 0 1px 6px rgba(0, 0, 0, .8); }
.hero__title { margin: 0; font-family: var(--title-font); font-size: clamp(34px, 8vw, 56px); line-height: 1.05; color: #fff; text-shadow: 0 2px 18px rgba(0, 0, 0, .85); }
.hero__lead { margin: 10px 0 0; max-width: 40em; font-size: 18px; color: #fff; text-shadow: 0 1px 10px rgba(0, 0, 0, .9); }
@media (min-width: 700px) { .hero { min-height: 420px; } }

/* the column */
.sheet { max-width: 820px; margin: 0 auto; padding: 8px var(--gutter) 40px; }
.sheet h2 { margin: 34px 0 10px; font-family: var(--title-font); font-size: 26px; line-height: 1.2; color: var(--accent-2); }
.sheet h3 { margin: 18px 0 4px; font-size: 18px; color: #fff; }
.sheet p, .sheet li, .sheet dd { color: var(--text); }
.sheet ul { padding-left: 1.2em; }
.sheet li { margin: 6px 0; }
.sheet .muted { color: var(--muted); }
.date { margin: 14px 0 0; color: var(--muted); font-size: 15px; }

/* "the instructions are also in the game" */
.ingame { display: flex; gap: 14px; align-items: center; margin: 18px 0 6px; padding: 14px 16px; border-radius: 14px;
  background: linear-gradient(135deg, var(--glow), rgba(255, 255, 255, .04)); border: 1px solid var(--accent); }
.ingame img { width: 56px; height: 56px; border-radius: 13px; flex: none; }
.ingame p { margin: 0; }
.ingame b { color: var(--accent-2); }

/* the short version, and each step of play */
.cards, .sheet .cards { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 12px 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .cards { grid-template-columns: 1fr 1fr; } }
.cards li { margin: 0; padding: 14px 16px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.cards b { display: block; margin-bottom: 2px; color: var(--accent-2); font-size: 17px; }
.cards span { display: block; color: var(--text); }

/* one wide picture of play (the Sweet Shop's floor) */
.shot { margin: 22px 0 6px; }
.shot img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); }
.shot figcaption { margin-top: 6px; font-size: 14px; color: var(--muted); text-align: center; }

/* a row of pictures from the game */
.strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 26px 0 6px; }
.strip--two { grid-template-columns: repeat(2, 1fr); }
.strip figure { margin: 0; }
.strip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 12px; border: 1px solid var(--line); }
.strip--tall img { aspect-ratio: 3 / 4; }
.strip figcaption { margin-top: 6px; font-size: 14px; color: var(--muted); text-align: center; }

/* a row of cut-out pictures from the game (a plant, a tool, a fish), each whole on its own small panel */
.icons, .sheet .icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 10px; margin: 14px 0 6px; padding: 0; list-style: none; }
.icons li { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px 6px 8px; border-radius: 12px;
  background: radial-gradient(circle at 50% 38%, var(--glow), rgba(255, 255, 255, .03) 70%); border: 1px solid var(--line); }
.icons img { width: 64px; height: 64px; object-fit: contain; }
@media (min-width: 640px) { .icons, .sheet .icons { grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); } .icons img { width: 72px; height: 72px; } }
.icons span { font-size: 14px; line-height: 1.25; color: var(--muted); text-align: center; }
.icons--faces img { width: 68px; height: 68px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; border: 2px solid var(--accent); }

/* a key of the game's own drawn buttons or clues (LAST CALL), a picture and its words on each row */
.keys, .sheet .keys { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 12px 0; padding: 0; list-style: none; }
@media (min-width: 640px) { .keys, .sheet .keys { grid-template-columns: 1fr 1fr; } }
.keys li { margin: 0; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.keys .pic { width: 40px; height: 40px; flex: none; color: var(--accent-2); }
.keys span { font-size: 16px; line-height: 1.35; color: var(--text); }
.keys--clues .pic { color: #2A1A12; padding: 3px; border-radius: 10px; background: #F3E6CC; }

/* a game's steps in pictures (LAST CALL's iPhone screens, 3 by 4): each picture on the left, its step's words on the right */
.steps, .sheet .steps { display: grid; grid-template-columns: 1fr; gap: 12px; margin: 14px 0; padding: 0; list-style: none; counter-reset: step; }
@media (min-width: 760px) { .steps, .sheet .steps { grid-template-columns: 1fr 1fr; } }
.steps li { margin: 0; display: flex; gap: 14px; align-items: flex-start; padding: 10px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); }
.steps img { flex: none; width: 132px; height: auto; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 10px; border: 1px solid var(--line); }
.steps span { display: block; min-width: 0; font-size: 16px; line-height: 1.4; color: var(--text); }
.steps b { display: block; margin: 2px 0 4px; color: var(--accent-2); font-size: 18px; }
.steps b::before { counter-increment: step; content: counter(step) ". "; }

/* tables (the Corn Gambit's armies) scroll inside their own box */
.table { overflow-x: auto; margin: 12px 0; border-radius: 12px; border: 1px solid var(--line); }
table { width: 100%; border-collapse: collapse; font-size: 16px; }
th, td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--line); white-space: nowrap; }
th { color: var(--accent-2); background: var(--panel); }
tr:last-child td { border-bottom: 0; }

.go { display: inline-flex; align-items: center; min-height: 48px; padding: 0 20px; margin: 8px 8px 0 0; border-radius: 24px; background: var(--accent); color: #1A1206; font-weight: bold; text-decoration: none; }
.go--ghost { background: transparent; color: var(--text); border: 1px solid var(--line); }

.foot { border-top: 1px solid var(--line); padding: 18px var(--gutter) max(22px, env(safe-area-inset-bottom)); text-align: center; color: var(--muted); font-size: 15px; }
.foot p { margin: 4px 0; }

@media (prefers-reduced-motion: no-preference) { .go, .bar__nav a { transition: filter .15s ease; } .go:hover, .bar__nav a:hover { filter: brightness(1.12); } }