/* GUIDES - made to be read: a 42rem column of light 18px text, the game's display font for headings only, two
   highlighted objects per page (the quick answer and the play box), everything else calm. Brand colours, light only. */
:root {
  --ink: #1b2142; --text: #2c3358; --muted: #636a93; --line: #e6e0d2; --paper: #fff8ec; --white: #ffffff;
  --yellow: #ffd23f; --pink: #ff5fa8; --cyan: #4fe3ff; --sky: #63b0ff; --soft: #fff1c2;
  --f-display: "Lilita One", "Arial Rounded MT Bold", sans-serif;
  --f-body: "Nunito", -apple-system, "Segoe UI", system-ui, sans-serif;
  --col: 42rem;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 80px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--paper); color: var(--text); font-family: var(--f-body); font-size: 1.125rem; line-height: 1.75; font-weight: 400; }
a { color: var(--ink); text-decoration-color: var(--pink); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:focus-visible, summary:focus-visible, button:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; border-radius: 4px; }
b, strong { color: var(--ink); font-weight: 800; }

/* reading progress: a thin line along the top */
.progress { position: fixed; inset: 0 0 auto; height: calc(4px + env(safe-area-inset-top, 0px)); padding-top: env(safe-area-inset-top, 0px); z-index: 20; pointer-events: none; }
.progress i { display: block; height: 4px; width: 0; background: var(--pink); }

/* header: logo, Guides, a small play link */
.top { display: flex; align-items: center; gap: 1rem; max-width: 64rem; margin: 0 auto; padding-block: 1rem; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.logo { font-family: var(--f-display); font-size: 1.4rem; text-decoration: none; white-space: nowrap; -webkit-text-stroke: .14em var(--ink); paint-order: stroke fill; }
.logo b { font-weight: 400; } .logo b:nth-child(5n+1) { color: var(--pink); } .logo b:nth-child(5n+2) { color: var(--yellow); } .logo b:nth-child(5n+3) { color: var(--cyan); }
.logo b:nth-child(5n+4) { color: #5ee86a; } .logo b:nth-child(5n+5) { color: #ff9a2e; }
.top nav { margin-left: auto; display: flex; align-items: center; gap: 1rem; font-weight: 800; font-size: 1rem; }
.top nav a { text-decoration: none; }
.top .play { background: var(--yellow); border: 2px solid var(--ink); border-radius: 999px; padding: .25em .9em; }

/* the article column */
main { max-width: var(--col); margin: 0 auto; padding-block: .5rem 3rem; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
.kicker { font-weight: 800; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); margin: 1rem 0 .4rem; }
h1, h2, h3 { font-family: var(--f-display); font-weight: 400; color: var(--ink); text-wrap: balance; letter-spacing: .005em; }
h1 { font-size: clamp(2.1rem, 1.4rem + 3vw, 3.1rem); line-height: 1.04; margin: 0 0 .9rem; }
h2 { font-size: clamp(1.5rem, 1.25rem + 1vw, 1.85rem); line-height: 1.15; margin: 2.6rem 0 .7rem; }
p { margin: 0 0 1.1rem; }
.lede { font-size: 1.3rem; line-height: 1.6; color: var(--ink); margin-bottom: 1rem; }
.meta { color: var(--muted); font-size: .95rem; font-weight: 600; margin-bottom: 1.4rem; }
.hero-shot { display: block; width: 100%; max-width: 100%; height: auto; border-radius: 18px; border: 3px solid var(--ink); margin: 0 0 1.8rem; background: var(--sky); }

/* in this guide: jump links */
.toc { border-block: 2px solid var(--line); padding-block: .9rem; margin: 0 0 1.8rem; }
.toc p { margin: 0 0 .3rem; font-weight: 800; font-size: .8rem; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.toc ol { margin: 0; padding-left: 1.3rem; font-size: 1rem; line-height: 1.55; }
.toc li { margin: .2rem 0; }
.toc a { text-decoration: none; font-weight: 700; }
.toc a:hover { text-decoration: underline; text-decoration-color: var(--pink); }

/* the one highlighted answer near the top */
.short { background: var(--soft); border: 3px solid var(--ink); border-radius: 18px; padding: 1rem 1.3rem .4rem; margin: 0 0 2rem; }
.short h2 { font-size: 1.25rem; margin: 0 0 .4rem; }
.short ul { padding-left: 1.1rem; margin: 0 0 .6rem; }
.short li { margin: .35rem 0; }

ul, ol { padding-left: 1.3rem; margin: 0 0 1.2rem; }
li { margin: .45rem 0; }
li::marker { color: var(--pink); font-weight: 800; }

/* a real sequence of steps: numbered circles */
.steps { list-style: none; padding: 0; counter-reset: s; }
.steps li { position: relative; padding-left: 3.1rem; margin: .9rem 0; min-height: 2.2rem; }
.steps li::before { counter-increment: s; content: counter(s); position: absolute; left: 0; top: .1rem; width: 2.1rem; height: 2.1rem; display: grid; place-items: center;
  font-family: var(--f-display); font-size: 1.1rem; color: var(--ink); background: var(--yellow); border: 2px solid var(--ink); border-radius: 50%; }
/* kinds of things (not a sequence): the name stands out, no numbers */
.kinds { list-style: none; padding: 0; }
.kinds li { padding-left: 1.1rem; border-left: 3px solid var(--line); margin: 1rem 0; }

/* a photo beside the text on wide screens, full width on phones */
.side { margin: .4rem 0 1.4rem; }
.side img { display: block; width: 100%; max-width: 100%; height: auto; border-radius: 16px; border: 3px solid var(--ink); }
.side figcaption { font-size: .9rem; color: var(--muted); margin-top: .4rem; line-height: 1.45; }
@media (min-width: 760px) { .side { float: right; width: 15rem; margin: .4rem -4rem 1rem 1.6rem; } }

.tip { border-left: 4px solid var(--cyan); padding: .2rem 0 .2rem 1rem; margin: 1.4rem 0; }
.tip p { margin: 0; }
.wide { overflow-x: auto; margin: 0 0 1.4rem; clear: both; }
table { width: 100%; min-width: 32rem; border-collapse: collapse; font-size: 1rem; line-height: 1.5; }
th, td { text-align: left; vertical-align: top; padding: .6rem .7rem; border-bottom: 2px solid var(--line); }
th { color: var(--ink); font-weight: 800; }
td:first-child { font-weight: 800; color: var(--ink); }

/* the play box */
.cta { clear: both; background: var(--ink); color: #e9ecff; border-radius: 22px; padding: 1.6rem 1.4rem 1.8rem; margin: 2.8rem 0 1rem; text-align: center; }
.cta h2 { color: var(--white); margin: 0 0 .3rem; }
.cta p { margin: 0 0 1.1rem; }
.btn { display: inline-block; font-family: var(--f-display); font-size: 1.25rem; text-decoration: none; color: var(--ink); background: var(--yellow); border: 3px solid var(--ink); border-radius: 14px; padding: .45em 1.1em .5em; box-shadow: 4px 4px 0 #0b0e1f; }
.btn:hover { transform: translate(-1px, -1px); }

/* questions: calm, one line each until opened */
.faq { margin-top: 2.6rem; }
details { border-bottom: 2px solid var(--line); padding: .7rem 0; }
details:first-of-type { border-top: 2px solid var(--line); }
summary { cursor: pointer; font-weight: 800; color: var(--ink); list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
summary::-webkit-details-marker { display: none; }
summary::after { content: "+"; color: var(--pink); font-weight: 900; }
details[open] summary::after { content: "\2013"; }
details p { margin: .5rem 0 .2rem; }

/* more guides */
.more { margin-top: 2.6rem; }
.more ul { list-style: none; padding: 0; margin: 0; }
.more li { border-top: 2px solid var(--line); padding: .9rem 0; margin: 0; }
.more a { font-family: var(--f-display); font-size: 1.2rem; text-decoration: none; line-height: 1.25; }
.more a:hover { text-decoration: underline; text-decoration-color: var(--pink); }
.more p { margin: .2rem 0 0; font-size: 1rem; color: var(--muted); line-height: 1.5; }

/* the small play bar: shows up once someone has read a good part, can be closed */
.bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; display: flex; justify-content: center; padding-block: .6rem calc(.6rem + env(safe-area-inset-bottom, 0px));
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); transform: translateY(120%); transition: transform .35s ease; pointer-events: none; }
.bar.on { transform: none; pointer-events: auto; }
.bar div { display: flex; align-items: center; gap: .8rem; background: var(--ink); color: #e9ecff; border-radius: 999px; padding: .45rem .5rem .45rem 1.1rem; font-weight: 700; font-size: 1rem; box-shadow: 0 6px 20px rgba(27,33,66,.25); max-width: 100%; }
.bar a { background: var(--yellow); color: var(--ink); text-decoration: none; font-family: var(--f-display); border-radius: 999px; padding: .3em .9em; white-space: nowrap; }
.bar button { background: none; border: 0; color: #c9cdf0; font-size: 1.3rem; line-height: 1; cursor: pointer; padding: .2rem .4rem; }
@media (max-width: 440px) { .bar span { display: none; } }
@media (prefers-reduced-motion: reduce) { .bar { transition: none; } }

footer { display: flex; flex-wrap: wrap; gap: 1.2rem; justify-content: center; padding-block: 1.4rem 5rem; border-top: 2px solid var(--line); font-size: .95rem; font-weight: 700;
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)); }
footer a { text-decoration: none; }

/* the guide list page */
.list { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 1.2rem; }
.list li { margin: 0; display: grid; grid-template-columns: 9rem minmax(0, 1fr); gap: 1.1rem; align-items: start; }
.list img { width: 100%; max-width: 100%; height: auto; border-radius: 12px; border: 2px solid var(--ink); }
.list a { font-family: var(--f-display); font-size: 1.3rem; text-decoration: none; line-height: 1.2; }
.list p { margin: .3rem 0 0; font-size: 1rem; color: var(--muted); line-height: 1.5; }
@media (max-width: 520px) { .list li { grid-template-columns: 1fr; } }