/* pages.css — every page that is not the home page (join, ask to join, privacy, terms, contact).
   The home page is a poster; these are for READING, so they borrow its palette, its gold double
   frame, its Cinzel headings and its panel-card, and put the text on a card over the same art,
   dimmed far enough that a paragraph stays readable at any size. */
@font-face { font-family: ModdyDecorative; src: url('cinzel-decorative-bold.ttf?v=e854e68a38') format('truetype');
             font-weight: 700; font-style: normal; font-display: swap; }
:root {
  color-scheme: dark;
  --ink: #050504; --paper: #eee0bf; --paper-muted: #b8aa8c; --body: #d2c6aa;
  --gold: #d5ae57; --gold-soft: #8f7138; --violet: #c565ff;
  --frame: rgba(224, 192, 119, .42);
}
* { box-sizing: border-box; }
html { background: var(--ink); }
body {
  margin: 0; min-height: 100svh; color: var(--paper);
  font-family: Georgia, "Times New Roman", serif;
  /* no background here: html carries the ink, and an opaque body would paint OVER the art below
     (a negative z-index layer sits under in-flow backgrounds) — measured, the art was invisible. */
  -webkit-text-size-adjust: 100%;
}
/* The art, fixed behind everything and dimmed: the same world as the home page. */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -2;
  background: url('art/moddy-wish-factory-v5.webp?v=78b9671ec7') center 40% / cover no-repeat;
  filter: brightness(.4) saturate(.6) blur(1.5px); transform: scale(1.04);
}
/* The home page's gold double frame, around the whole PAGE. It was `position: fixed` (around the
   window), which on a page taller than the window draws its bottom edge straight across the text
   wherever the window ends — on account.html, through "What you've made" (owner, T20.7b). Absolute
   on a positioned body, it is one frame from the top of the page to the end of the footer. */
body { position: relative; }
body::after {
  content: ""; position: absolute; inset: 12px; z-index: 5; pointer-events: none;
  border: 1px solid var(--frame); outline: 1px solid rgba(213,174,87,.15); outline-offset: -7px;
}
a { color: var(--gold); text-underline-offset: .18em; }
a:hover, a:focus-visible { color: #f6cc74; }
:focus-visible { outline: 2px solid #f6cc74; outline-offset: 3px; }

.top {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: max(28px, env(safe-area-inset-top)) 24px 0; text-align: center;
}
.top .title-art { display: block; width: min(78vw, 420px); line-height: 0; }
.top .title-art img { width: 100%; height: auto; display: block; }
.top nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-top: 6px; }
.top nav a {
  color: var(--paper-muted); text-decoration: none; font-size: .8rem;
  letter-spacing: .16em; text-transform: uppercase; padding: 6px 2px;
}
.top nav a[aria-current] { color: var(--gold); }

main { width: min(760px, 100% - 40px); margin: 22px auto 0; }
.card {
  position: relative; padding: clamp(26px, 6vw, 58px);
  border: 1px solid var(--gold-soft);
  background: linear-gradient(145deg, rgba(21,17,9,.96), rgba(8,7,5,.96) 62%);
  box-shadow: 0 35px 100px #000, inset 0 0 0 7px #090705, inset 0 0 0 8px rgba(213,174,87,.22);
}
.kicker { margin: 0 0 8px; color: var(--gold); font-size: .74rem; letter-spacing: .26em; text-transform: uppercase; }
h1 {
  margin: 0 0 22px; font-family: ModdyDecorative, Georgia, serif; font-weight: 700;
  font-size: clamp(1.9rem, 6vw, 3.2rem); line-height: 1.02; color: #f1d28c;
  text-shadow: 0 1px 0 #694416, 0 0 14px rgba(216,174,87,.2); text-wrap: balance;
}
h2 {
  margin: 2.2rem 0 .7rem; font-family: ModdyDecorative, Georgia, serif; font-weight: 700;
  font-size: clamp(1.15rem, 3.4vw, 1.5rem); color: var(--gold); line-height: 1.2;
}
p, li, td { color: var(--body); font-size: 1.06rem; line-height: 1.68; }
strong { color: var(--paper); }
ul, ol { padding-left: 1.3em; }
li { margin: .3em 0; }
code {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-size: .92em; color: var(--paper);
  background: #1a140c; border: 1px solid rgba(213,174,87,.3); border-radius: 4px; padding: .05em .35em;
  overflow-wrap: anywhere;
}
.steps { margin: 18px 0 0; padding: 0; list-style: none; counter-reset: steps; }
.steps li { position: relative; padding: 0 0 18px 48px; counter-increment: steps; }
.steps li::before {
  content: counter(steps); position: absolute; left: 0; top: 0; width: 30px; height: 30px;
  display: grid; place-items: center; border: 1px solid var(--gold); border-radius: 50%;
  color: var(--gold); font-weight: 700;
}
/* Tables become stacked rows on a phone rather than scrolling sideways. */
table { width: 100%; border-collapse: collapse; margin: .5rem 0 1rem; }
th { text-align: left; color: var(--gold); font-weight: 400; font-size: .74rem; letter-spacing: .2em;
     text-transform: uppercase; padding: 0 12px 8px 0; border-bottom: 1px solid var(--gold-soft); }
td { padding: 12px 12px 12px 0; border-bottom: 1px solid rgba(143,113,56,.35); vertical-align: top; }
@media (max-width: 560px) {
  thead { display: none; }
  table, tbody, tr, td { display: block; width: 100%; }
  tr { padding: 10px 0; border-bottom: 1px solid rgba(143,113,56,.35); }
  td { border: 0; padding: 2px 0; }
  td + td { color: var(--paper-muted); }
}
.notice {
  margin: 0 0 24px; padding: 14px 18px; border: 1px solid rgba(197,101,255,.45);
  background: rgba(40,16,56,.55); color: #e8d6ff; font-size: .98rem; line-height: 1.55;
}
.notice a { color: #e6b8ff; }
.versions td:first-child { color: var(--paper); font-size: 1.15rem; font-weight: 700; }   /* not Cinzel: its 1 reads as I */
/* The server address is the one thing a child must type exactly, so it never breaks mid-name. */
.address { display: block; width: max-content; max-width: 100%; margin: .45em 0 .2em; padding: .35em .6em;
           font-size: clamp(.82rem, 3.9vw, 1.05rem); white-space: nowrap; overflow-wrap: normal;
           user-select: all; }
/* Inside a numbered step the line starts 48px in, and the longest address (workshop.…) needs a little
   less: smaller, still never broken, never under the 11.5 px floor check-layout.py holds text to. */
.steps .address { font-size: clamp(.72rem, 3.3vw, 1.05rem); }

/* "Getting in" (T20.6b): one card per world, from the world manifests (the old Ask-to-join form is retired). */
.world-card { margin: 14px 0; padding: 4px 18px 10px; border: 1px solid var(--frame); border-radius: 6px; background: rgba(0,0,0,.28); }
.world-card h2 { margin-top: .8rem; }
.world-card code { overflow-wrap: anywhere; }
.small { color: var(--paper-muted); font-size: .88rem; }

footer {
  width: min(760px, 100% - 40px); margin: 0 auto;
  padding: 26px 0 max(34px, env(safe-area-inset-bottom)); text-align: center;
  color: var(--paper-muted); font-size: .82rem; line-height: 1.6;
}
footer p { color: inherit; font-size: inherit; margin: .35em 0; }
.disclaimer { font-size: .72rem; letter-spacing: .06em; opacity: .8; }
/* #1556: our own line, set apart from Mojang's (sentence case, no tracking, a gap above) so it never
   reads as part of the disclaimer. */
footer .copyright { margin-top: .9em; font-size: .78rem; letter-spacing: normal; }

/* Landscape phones: tight vertical space, so the title shrinks rather than the text. */
@media (max-height: 500px) and (orientation: landscape) {
  .top .title-art { width: min(40vw, 300px); }
  main { margin-top: 12px; }
}
@media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto; } }

/* T7.3: the how-to-wish film on the join page. Full card width at every size; the poster holds
   the 16:9 box before the video loads, so nothing below it jumps. */
.demo { margin: 22px 0 8px; }
.demo video { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; background: #000;
              border: 1px solid var(--gold-soft); }
.demo figcaption { margin-top: 8px; color: var(--paper-muted); font-size: .9rem; line-height: 1.45; }

/* the one line under the access form's username field saying where to find it */
form.ask p.find { margin: -0.25rem 0 0.75rem; color: var(--paper-muted); font-size: .95rem; }

/* the join page's "Trouble joining?" list */
dl.faq dt { margin-top: 1.1rem; color: var(--paper); font-weight: 600; }
dl.faq dd { margin: 0.35rem 0 0; }
dl.faq table.versions { margin: 0.6rem 0; }

/* the join page's folded "Multiplayer button greyed out?" help */
details.help { margin: 1rem 0 1.5rem; border: 1px solid var(--frame); border-radius: 6px; padding: 0.6rem 0.9rem; }
details.help summary { cursor: pointer; color: var(--gold); font-weight: 600; padding: 0.55rem 0; }
details.help[open] summary { margin-bottom: 0.4rem; }
details.help summary:focus-visible, a.button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
a.button { display: inline-block; background: var(--gold); color: var(--ink); font-weight: 600; text-decoration: none;
  padding: 0.7rem 1.1rem; border-radius: 6px; min-height: 44px; box-sizing: border-box; }
a.button:hover { background: #f6cc74; }
/* The handoff inside "Multiplayer button greyed out?" (join.html): the player passes the steps on. */
.handoff { border-left: 3px solid var(--gold); padding: 0.2rem 0 0.2rem 0.9rem; margin: 1rem 0; }
.handoff a { overflow-wrap: anywhere; }
.handoff h3 { margin: 0.2rem 0 0.4rem; font-size: 1.05rem; }
button.button { font: inherit; font-weight: 600; background: var(--gold); color: var(--ink); border: 0;
  padding: 0.7rem 1.1rem; border-radius: 6px; min-height: 44px; cursor: pointer; }
button.button:hover { background: #f6cc74; }
button.button:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
figure.qr { margin: 0.8rem 0 0.4rem; }
figure.qr img { display: block; width: 180px; height: 180px; image-rendering: pixelated; border-radius: 4px; }
figure.qr figcaption { font-size: 0.9rem; margin-top: 0.35rem; }

/* T7.9 (#1072): a page is a stack of sections, one card each — guide.html's four steps, legal.html's
   privacy, terms and contact. An old address redirects to its section (/join → guide#join), and a
   jump to a card stops a little above it so its frame shows. */
main > .card + .card { margin-top: 26px; }
main > .card[id] { scroll-margin-top: 18px; }
main > .notice { margin: 0 0 18px; }

/* T7.10 (#1073): how to use Moddy — the steps as numbered screenshots, then the starter wishes as
   cards, grouped by class. Pictures are lazy: the guide is long and a phone should fetch only what
   it scrolls to. */
.shots { list-style: none; counter-reset: shot; padding: 0; margin: 1rem 0 1.5rem; display: grid; gap: 18px; }
.shots li { counter-increment: shot; margin: 0; }
.shots figure { margin: 0; }
.shots img, .wishcard img, .wishcard video { display: block; width: 100%; height: auto; border: 1px solid var(--gold-soft);
  border-radius: 4px; background: #111; }
.shots figcaption { margin-top: 6px; color: var(--body); font-size: 1rem; line-height: 1.5; }
.shots figcaption::before { content: counter(shot) ". "; color: var(--gold); font-weight: 700; }
.wishes { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 18px;
  margin: 0.6rem 0 1.6rem; }
.wishcard { border: 1px solid var(--frame); border-radius: 6px; padding: 12px; background: rgba(0,0,0,.25); }
.wishcard h4 { margin: 10px 0 4px; font-family: ModdyDecorative, Georgia, serif; color: #f1d28c; font-size: 1.05rem; }
.wishcard p { font-size: .98rem; line-height: 1.5; margin: .4em 0; }
.wishcard .also { color: var(--paper-muted); }
h3 { margin: 1.6rem 0 .2rem; font-family: ModdyDecorative, Georgia, serif; color: var(--gold); font-size: 1.1rem; }
ul.cant li { margin: .5em 0; }

/* #beyond (owner, 2026-10-15): the owner's open-source projects, one card each, with a three-gear
   difficulty badge. Same frame as the wish cards. */
.beyond-link { margin-top: 1rem; }
.pack { border-left: 3px solid var(--gold); padding: 0.2rem 0 0.2rem 0.9rem; }
.expeditions { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 18px;
  margin: 1rem 0 0.6rem; }
.expedition { border: 1px solid var(--frame); border-radius: 6px; padding: 14px 16px; background: rgba(0,0,0,.25); }
.expedition h4 { margin: 6px 0 4px; font-family: ModdyDecorative, Georgia, serif; color: #f1d28c; font-size: 1.05rem;
  overflow-wrap: anywhere; }
.expedition .level { margin: 0; color: var(--gold); font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; }
.expedition .level span { color: var(--gold-soft); opacity: .45; letter-spacing: .05em; }
.expedition .level span.on { color: var(--gold); opacity: 1; }
.expedition .tagline { font-style: italic; color: var(--paper); }