/* guide.css - the game guide as "the traveller's codex" (owner 2026-10-16: a legendary, unique design for every page).
   Signature: the codex opens. "Start here" is an open book spread: the road of three stops runs down the left page, a hero
   stands on the right page, and both pages swing open from the spine. Below it the bound book: the five topics are ribbon
   bookmarks that stay with the reader, the cards are its pages, and the codex closes on a gold plate.
   (app.js shows/hides .guide-grid > [data-cat]; a card that comes back from display:none replays its page turn.) */

/* ---------- start here: an open book spread ---------- */
.guide-start { position: relative; margin-bottom: var(--sp-9); }
.spread { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); max-width: 1100px; min-height: 480px; margin-inline: auto;
  perspective: 1800px; }
/* each page is a sheet of the book: night paper, an inset gold rule, a shadow that deepens towards the spine */
.spread-page { position: relative; isolation: isolate; margin: 0;
  background: linear-gradient(180deg, var(--night-800), var(--night-900));
  box-shadow: 0 0 0 1px rgba(226, 169, 59, .22), inset 0 0 0 8px rgba(7, 11, 23, .55), inset 0 0 0 9px rgba(226, 169, 59, .12), 0 50px 90px -50px #000; }
.spread-text { padding: var(--sp-7) var(--sp-7) var(--sp-6); text-align: start;
  background: linear-gradient(90deg, transparent 82%, rgba(4, 7, 16, .5)), linear-gradient(180deg, var(--night-800), var(--night-900)); }
[dir="rtl"] .spread-text { background: linear-gradient(270deg, transparent 82%, rgba(4, 7, 16, .5)), linear-gradient(180deg, var(--night-800), var(--night-900)); }
.spread-art { display: grid; place-items: end center; overflow: hidden; padding-top: var(--sp-5);
  background: radial-gradient(70% 55% at 50% 40%, rgba(43, 76, 160, .32), transparent 72%), linear-gradient(270deg, transparent 82%, rgba(4, 7, 16, .5)), linear-gradient(180deg, var(--night-800), var(--night-900)); }
[dir="rtl"] .spread-art { background: radial-gradient(70% 55% at 50% 40%, rgba(43, 76, 160, .32), transparent 72%), linear-gradient(90deg, transparent 82%, rgba(4, 7, 16, .5)), linear-gradient(180deg, var(--night-800), var(--night-900)); }
.spread-art img { display: block; width: auto; height: 440px; max-width: 100%; object-fit: contain; object-position: 50% 100%; filter: drop-shadow(0 18px 24px rgba(4, 7, 16, .8)); }
/* a pool of gold light where the hero stands */
.spread-art::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(42% 12% at 50% 94%, rgba(226, 169, 59, .34), transparent 72%); }
/* the spine between the two pages */
.spread::before { content: ""; position: absolute; z-index: 2; inset-block: 0; left: calc(50% - 30px); width: 60px; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(7, 11, 23, .75) 42%, rgba(226, 169, 59, .32) 50%, rgba(7, 11, 23, .75) 58%, transparent); }

.start-title { font-size: var(--fs-h3); color: var(--sand-50); }
.start-title::after { content: ""; display: block; width: 168px; height: 12px; margin-top: 12px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='12' viewBox='0 0 168 12'%3E%3Cpath d='M0 6h70M98 6h70' stroke='%23E2A93B' stroke-width='1.4'/%3E%3Cpath d='M58 6h12M98 6h12' stroke='%23FFE7A3' stroke-width='2'/%3E%3Crect x='78' y='0' width='12' height='12' transform='rotate(45 84 6)' fill='none' stroke='%23F4C65C' stroke-width='1.4'/%3E%3Crect x='81' y='3' width='6' height='6' transform='rotate(45 84 6)' fill='%23F4C65C'/%3E%3C/svg%3E") no-repeat; }
.start-lead { margin-top: var(--sp-4); max-width: 40ch; color: var(--sand-300); font-size: 1.0625rem; }

/* the road down the page: three medals on a dotted gold line; a gold fill runs down it */
.start-path { position: relative; list-style: none; margin: var(--sp-6) 0 0; padding: 0; display: grid; gap: 0; max-width: 420px; }
.start-path::before, .start-path::after { content: ""; position: absolute; z-index: 0; top: 36px; bottom: 60px; inset-inline-start: 35px; width: 2px; }
.start-path::before { background: repeating-linear-gradient(180deg, rgba(226, 169, 59, .7) 0 4px, transparent 4px 14px); }
.start-path::after { opacity: 0; transform-origin: 50% 0; background: linear-gradient(180deg, #FFE7A3, #F4C65C 70%, rgba(244, 198, 92, 0)); box-shadow: 0 0 10px 2px rgba(244, 198, 92, .35); }
.start-path li { position: relative; z-index: 1; display: flex; }
.start-stop { flex: 1; display: grid; grid-template-columns: 72px 1fr; column-gap: var(--sp-4); row-gap: 2px; align-content: start; padding: 0 0 var(--sp-5);
  color: var(--text); text-decoration: none; }
.start-stop .medal { --m: 72px; grid-row: span 2; background-color: var(--night-900);
  box-shadow: 0 0 0 8px var(--night-800), 0 0 0 9px rgba(226, 169, 59, .28), 0 0 30px 6px rgba(226, 169, 59, .18); }
.start-stop b { align-self: end; font: 400 1.3125rem/1.25 var(--font-head); color: var(--sand-50); transition: color var(--t-base); }
.start-stop small { max-width: 30ch; color: var(--text-3); font-size: .9375rem; line-height: 1.5; }
.start-stop:hover b, .start-stop:focus-visible b { color: var(--gold-2, #F4C65C); }
.start-stop:focus-visible { outline: 2px solid var(--turq-300); outline-offset: 4px; }
/* the road remembers: a stop the reader has opened turns into a minted gold coin (app.js sets li.is-visited, per browser) */
.start-path li.is-visited .medal { color: #3A2408; border-color: #FFE7A3; background-image: radial-gradient(circle at 50% 30%, #FFF3CC, #F4C65C 45%, #B47A1E 100%); }
.start-path li.is-visited b { color: var(--gold-2, #F4C65C); }

/* phones and small tablets: one page, no art, no spine */
@media (max-width: 759px) {
  .spread { grid-template-columns: 1fr; min-height: 0; }
  .spread::before, .spread-art { display: none; }
  .spread-text { padding: var(--sp-6) var(--sp-5) var(--sp-4); background: linear-gradient(180deg, var(--night-800), var(--night-900)); }
}
@media (min-width: 760px) and (max-width: 959px) { .spread-text { padding: var(--sp-6) var(--sp-5); } .spread-art img { height: 380px; } }

/* ---------- the codex: a bound book with ribbon bookmarks on its top edge ---------- */
.codex { position: relative; overflow-x: clip; }
.codex-title { margin-bottom: var(--sp-6); font-size: var(--fs-h2); color: var(--sand-50); text-align: center; }
.codex-title::after { content: ""; display: block; width: 168px; height: 12px; margin: 14px auto 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='168' height='12' viewBox='0 0 168 12'%3E%3Cpath d='M0 6h70M98 6h70' stroke='%23E2A93B' stroke-width='1.4'/%3E%3Cpath d='M58 6h12M98 6h12' stroke='%23FFE7A3' stroke-width='2'/%3E%3Crect x='78' y='0' width='12' height='12' transform='rotate(45 84 6)' fill='none' stroke='%23F4C65C' stroke-width='1.4'/%3E%3Crect x='81' y='3' width='6' height='6' transform='rotate(45 84 6)' fill='%23F4C65C'/%3E%3C/svg%3E") no-repeat; }
/* the bookmarks stay under the header while the reader scrolls the book */
.guide-page .codex .tabs { position: sticky; top: 76px; z-index: 5; gap: 6px; margin: 0; padding-inline: var(--sp-6); padding-top: 10px; align-items: flex-end;
  flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity; scroll-padding-inline: var(--sp-4); scrollbar-width: none;
  /* the head edge of the book: an opaque night band behind the ribbons, so the pages never show through when the strip sticks
     (on the element itself: overflow-x clips a ::before strip; the phone mask below fades this band with the ribbons) */
  background: linear-gradient(180deg, rgba(11, 17, 36, .97) 0 calc(100% - 6px), transparent); box-shadow: 0 14px 18px -14px rgba(4, 7, 16, .9); }
.guide-page .codex .tabs::-webkit-scrollbar { display: none; }
.guide-page .codex .tab { flex: none; scroll-snap-align: start; padding: 12px 18px 14px; min-height: 48px; color: var(--sand-300);
  background: linear-gradient(180deg, var(--night-700), var(--night-800)); box-shadow: inset 0 0 0 1px rgba(226, 169, 59, .18);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); transition: color var(--t-base), background var(--t-base); }
.guide-page .codex .tab:hover { color: var(--sand-50); }
/* the picked bookmark: a gold ribbon that stands taller and joins the page */
.guide-page .codex .tab[aria-selected="true"] { color: #1C0D00; font-weight: 600; translate: 0 -6px; padding-bottom: 20px; margin-bottom: -6px;
  background: linear-gradient(180deg, #FFE7A3, #E2A93B 60%, #B47A1E); box-shadow: 0 -6px 20px -6px rgba(226, 169, 59, .55);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% calc(100% - 8px), 0 100%); }
.guide-page .codex .tab[aria-selected="true"]::after { display: none; }
.guide-page .codex .tab:focus-visible { outline: 2px solid var(--turq-300); outline-offset: -4px; }
/* turquoise on the gold ribbon is invisible: the picked ribbon takes a dark ring (9:1 on #E2A93B) */
.guide-page .codex .tab[aria-selected="true"]:focus-visible { outline: 2px solid #1C0D00; outline-offset: -6px; }
.codex-book { position: relative; padding: var(--sp-6) var(--sp-6) var(--sp-6) calc(var(--sp-6) + 18px);
  background: linear-gradient(180deg, rgba(26, 38, 72, .55), rgba(11, 17, 36, .75));
  box-shadow: 0 0 0 1px rgba(226, 169, 59, .22), inset 0 0 0 7px rgba(7, 11, 23, .55), inset 0 0 0 8px rgba(226, 169, 59, .12), 0 50px 90px -50px #000; }
[dir="rtl"] .codex-book { padding: var(--sp-6) calc(var(--sp-6) + 18px) var(--sp-6) var(--sp-6); }
/* the binding: stitches down the inline-start edge of the book */
.codex-book::before { content: ""; position: absolute; inset-block: 18px; inset-inline-start: 14px; width: 6px; pointer-events: none;
  background: repeating-linear-gradient(180deg, rgba(226, 169, 59, .55) 0 10px, transparent 10px 18px);
  box-shadow: 6px 0 0 -2px rgba(7, 11, 23, .7); }

/* ---------- the pages ---------- */
.codex-book .guide-grid { perspective: 1400px; }
.guide-card { scroll-margin-top: 150px; overflow: hidden; isolation: isolate;
  background-color: rgba(13, 20, 41, .94);
  background-image: radial-gradient(120% 60% at 50% 0%, rgba(246, 238, 223, .055), transparent 70%); }
@media (hover: hover) {
  /* keep the shared gold spotlight that follows the pointer (legend.css) on top of the page's own soft light */
  .guide-card { background-image: radial-gradient(360px circle at var(--mx, -999px) var(--my, -999px), rgba(244, 198, 92, .10), transparent 62%),
    radial-gradient(120% 60% at 50% 0%, rgba(246, 238, 223, .055), transparent 70%); }
}
.guide-top .medal { --m: 58px; box-shadow: 0 0 0 2px #3A2408, 0 0 0 3px rgba(255, 210, 120, .6), 0 0 22px 2px rgba(226, 169, 59, .22); }
.guide-facts { box-shadow: none; padding-top: var(--sp-5); background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='10' viewBox='0 0 120 10'%3E%3Cpath d='M0 5h50M70 5h50' stroke='%23E2A93B' stroke-opacity='.45'/%3E%3Crect x='55' y='0' width='10' height='10' transform='rotate(45 60 5)' fill='none' stroke='%23E2A93B' stroke-opacity='.7'/%3E%3C/svg%3E") 50% 0 / 120px 10px no-repeat; }
.guide-card h2 { text-wrap: balance; }
.guide-card .link { display: inline-flex; align-items: center; min-height: 44px; }
/* the first page opens the book: two columns wide on large screens (it also closes the last row: 12 slots for 11 pages),
   with a larger lead (no drop initial: a floated letter read as a typo, "P ick", review item 11) */
@media (min-width: 1080px) {
  .codex-book .guide-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #first-steps { grid-column: span 2;
    background-color: rgba(18, 27, 54, .96); box-shadow: inset 0 0 0 1px rgba(226, 169, 59, .2), 0 0 40px -12px rgba(226, 169, 59, .35); }
  #first-steps .guide-lead { font: 400 1.375rem/1.45 var(--font-head); color: var(--sand-50); max-width: 40ch; }
  #first-steps .guide-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--sp-5); }
}
:lang(ar) .guide-card h2, :lang(ar) .start-stop b, :lang(ar) .codex-title, :lang(ar) .start-title, :lang(ar) .guide-end-title { letter-spacing: 0; }

/* ---------- the closing plate ---------- */
.guide-end { display: grid; justify-items: center; gap: var(--sp-4); max-width: 560px; margin: var(--sp-8) auto 0; padding: var(--sp-7) var(--sp-6); text-align: center;
  box-shadow: 0 0 0 1px rgba(226, 169, 59, .25), inset 0 0 0 7px rgba(7, 11, 23, .5), inset 0 0 0 8px rgba(226, 169, 59, .12);
  background: radial-gradient(80% 70% at 50% 0%, rgba(226, 169, 59, .12), transparent 70%), rgba(13, 20, 41, .7); }
.guide-end .medal { --m: 64px; }
.guide-end-title { font: 400 1.375rem/1.35 var(--font-head); color: var(--sand-50); }

@media (max-width: 959px) { .guide-page .codex .tab { padding-inline: 13px; } .guide-page .codex .tabs { padding-inline: var(--sp-3); } }
@media (max-width: 719px) {
  /* the strip scrolls sideways: the trailing edge fades so the hidden bookmarks show they are there */
  .guide-page .codex .tabs { top: 76px; padding-inline: 0; margin-inline: calc(var(--sp-3) * -1); padding-inline: var(--sp-3);
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 44px), transparent); }
  [dir="rtl"] .guide-page .codex .tabs { -webkit-mask-image: linear-gradient(270deg, #000 calc(100% - 44px), transparent); mask-image: linear-gradient(270deg, #000 calc(100% - 44px), transparent); }
  .codex-book { padding: var(--sp-4) var(--sp-3) var(--sp-4) calc(var(--sp-3) + 16px); }
  [dir="rtl"] .codex-book { padding: var(--sp-4) calc(var(--sp-3) + 16px) var(--sp-4) var(--sp-3); }
  .codex-book::before { inset-inline-start: 8px; }
  .guide-end { padding: var(--sp-6) var(--sp-5); }
}

/* ---------- motion: the book opens from its spine, gold runs down the road, the pages turn in when a bookmark is picked ---------- */
@media (prefers-reduced-motion: no-preference) {
  @media (min-width: 760px) {
    .spread-text { transform-origin: 100% 50%; animation: guide-open-left 1.1s cubic-bezier(.2, .8, .2, 1) both; }
    .spread-art { transform-origin: 0 50%; animation: guide-open-right 1.1s cubic-bezier(.2, .8, .2, 1) both; }
    [dir="rtl"] .spread-text { transform-origin: 0 50%; animation-name: guide-open-right; }
    [dir="rtl"] .spread-art { transform-origin: 100% 50%; animation-name: guide-open-left; }
    .spread-art img { animation: guide-hero-rise 1.3s .5s cubic-bezier(.16, 1, .3, 1) both, guide-hero-float 7s 1.8s ease-in-out infinite alternate; }
  }
  @keyframes guide-open-left { from { rotate: y 24deg; opacity: .2; } to { rotate: y 0deg; opacity: 1; } }
  @keyframes guide-open-right { from { rotate: y -24deg; opacity: .2; } to { rotate: y 0deg; opacity: 1; } }
  @keyframes guide-hero-rise { from { translate: 0 40px; opacity: 0; } to { translate: 0 0; opacity: 1; } }
  @keyframes guide-hero-float { from { translate: 0 0; } to { translate: 0 -10px; } }
  /* gold fills the road from the first stop to the last, then fades and runs again; each medal glows as the gold reaches it */
  .start-path::after { animation: guide-road-fill 5.5s cubic-bezier(.5, 0, .3, 1) 1s infinite; }
  @keyframes guide-road-fill { 0% { opacity: 1; scale: 1 0; } 70% { opacity: 1; scale: 1 1; } 90%, 100% { opacity: 0; scale: 1 1; } }
  .start-stop .medal { transition: scale var(--t-base) var(--ease); animation: guide-stop-glow 5.5s ease-in-out 1s infinite; }
  .start-path li:nth-child(2) .medal { animation-delay: 2.9s; }
  .start-path li:nth-child(3) .medal { animation-delay: 4.8s; }
  @keyframes guide-stop-glow {
    0%, 22%, 100% { box-shadow: 0 0 0 8px var(--night-800), 0 0 0 9px rgba(226, 169, 59, .28), 0 0 30px 6px rgba(226, 169, 59, .18); }
    8% { box-shadow: 0 0 0 8px var(--night-800), 0 0 0 10px rgba(255, 231, 163, .9), 0 0 44px 12px rgba(244, 198, 92, .5); } }
  .start-stop:hover .medal { scale: 1.08; }
  .start-path li.is-visited .medal { animation: guide-stop-stamp .6s cubic-bezier(.2, .9, .3, 1.4) both, guide-stop-glow 5.5s ease-in-out 1s infinite; }
  .start-path li:nth-child(2).is-visited .medal { animation-delay: 0s, 2.9s; }
  .start-path li:nth-child(3).is-visited .medal { animation-delay: 0s, 4.8s; }
  @keyframes guide-stop-stamp { from { scale: 1.3; rotate: -12deg; } to { scale: 1; rotate: 0deg; } }
  .guide-card { transform-origin: 0 50%; animation: guide-page-turn .7s cubic-bezier(.2, .8, .2, 1) both; }
  [dir="rtl"] .guide-card { transform-origin: 100% 50%; animation-name: guide-page-turn-rtl; }
  .guide-card:nth-child(3n + 2) { animation-delay: .08s; }
  .guide-card:nth-child(3n + 3) { animation-delay: .16s; }
  @keyframes guide-page-turn { from { rotate: y -28deg; } to { rotate: y 0deg; } }
  @keyframes guide-page-turn-rtl { from { rotate: y 28deg; } to { rotate: y 0deg; } }
  .guide-page .codex .tab { transform-origin: 50% 100%; transition-property: color, background, translate; transition-duration: var(--t-base); transition-timing-function: var(--ease); }
  .guide-page .codex .tab[aria-selected="true"] { animation: guide-ribbon-drop .45s cubic-bezier(.2, .9, .3, 1.3); }
  @keyframes guide-ribbon-drop { from { scale: 1 .7; } to { scale: 1 1; } }
  .guide-end .medal { animation: guide-end-glow 4s ease-in-out infinite; }
  @keyframes guide-end-glow { 50% { box-shadow: 0 0 0 2px #3A2408, 0 0 0 3px rgba(255, 210, 120, .9), 0 0 30px 6px rgba(226, 169, 59, .45); } }
}