/* The quest guide's pages (web/guide/pages.ts): the app's Alliance parchment, its paper tile and
   Cinzel titles over a light serif body, in one readable column on any screen width. */

@font-face {
  font-family: 'Cinzel';
  src: url('/fonts/cinzel_semibold.ttf') format('truetype');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --page: #e8d9b5;
  --card-paper: rgb(235 223 192 / 0.72);
  --ink-title: #2e2314;
  --ink-body: #382a17;
  --reading-paper: rgb(250 243 226 / 0.9);
  --ink-edge: #66502c;
  --ink-rule: #b49b6c;
  --seal: #243b6e;
  --on-seal: #ebdfc0;
  color-scheme: light;
}

/* The app's paper tile as the guide's WebP copy (pages.ts, GUIDE_ART_DIR). */
html {
  background: var(--page) url('/guide/art/parchment-tile.webp');
}

/* The text sits on a lighter, calmer sheet over the tile, so the tile's mottling never runs
   behind the letters. */
body {
  box-sizing: border-box;
  min-height: 100vh;
  max-width: 46rem;
  margin: 0 auto;
  padding: 0.5rem 1.75rem 2.5rem;
  background: var(--reading-paper);
  box-shadow: 0 0 24px rgb(46 35 20 / 0.18);
  color: var(--ink-body);
  font: 1.0625rem/1.6 Georgia, 'Times New Roman', serif;
  overflow-wrap: break-word;
}

h1,
h2,
h3,
h4,
.site-name,
.cta-title {
  color: var(--ink-title);
  font-family: 'Cinzel', Georgia, serif;
  font-weight: 600;
  line-height: 1.25;
}

/* Titles break into lines of even length instead of leaving one word on a line of its own. */
h1,
h2,
.cta-title,
.article-card-title {
  text-wrap: balance;
}

h1 {
  margin: 0.4rem 0 0.3rem;
  font-size: clamp(1.6rem, 6vw, 2.2rem);
}

h2 {
  margin: 2.2rem 0 0.9rem;
  padding-bottom: 0.3rem;
  border-bottom: 1px solid var(--ink-rule);
  font-size: 1.3rem;
}

h3 {
  margin: 0 0 0.3rem;
  font-size: 1.05rem;
}

/* A capital's page: its landmark drawing beside the title. */
.zone-title {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin: 0.4rem 0 0.3rem;
}

.zone-title h1 {
  margin: 0;
}

.city-icon {
  flex: none;
  border-radius: 8px;
}

/* The crests of the sides a zone's quests are for, at the start of the level line. */
.crest {
  margin-right: 0.4rem;
  vertical-align: middle;
}

h4 {
  margin: 1.2rem 0 0.3rem;
  font-size: 0.95rem;
}

/* Links in the text: the seal blue, a soft thick underline that fills to a highlight on hover. */
a {
  color: var(--seal);
  font-weight: 600;
  text-decoration: underline;
  text-decoration-color: rgb(36 59 110 / 0.3);
  text-decoration-thickness: 2px;
  text-underline-offset: 0.2em;
  border-radius: 3px;
  transition: background-color 0.15s ease, text-decoration-color 0.15s ease;
}

main a:not([class]):hover,
main a:not([class]):focus-visible,
.quest-link:hover,
.quest-link:focus-visible {
  background: rgb(36 59 110 / 0.1);
  text-decoration-color: var(--seal);
}

[id] {
  scroll-margin-top: 1rem;
}

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem 1rem;
  padding: 1rem 0 0.7rem;
  border-bottom: 1px solid var(--ink-rule);
}

.site-name {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 1.05rem;
  text-decoration: none;
}

/* The app's icon: beside the site name, and large at the head of every call to action. */
.site-icon {
  border-radius: 7px;
  box-shadow: 0 1px 3px rgb(46 35 20 / 0.3);
}

.cta-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.6rem;
}

.cta-head .cta-title {
  margin: 0;
  font-size: 1.2rem;
}

.cta-icon {
  flex: none;
  border-radius: 16px;
  box-shadow: 0 2px 6px rgb(46 35 20 / 0.35);
}

.site-header nav,
.site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 1.1rem;
}

.breadcrumbs {
  margin: 1rem 0 0;
  font-size: 0.9rem;
  font-style: italic;
}

/* Every header, footer and breadcrumb link is a tap target at least 24 px tall, apart from the
   next one (the nav gaps, the breadcrumbs' separators). */
.site-header nav a,
.site-footer nav a,
.breadcrumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 1.5rem;
}

.lede {
  margin-top: 0;
  color: var(--ink-edge);
  font-style: italic;
}

/* Starts below a floating locator map, so its title and badges keep the full column. */
.cta {
  clear: right;
  margin: 1.5rem 0;
  padding: 1rem 1.1rem;
  border: 1px solid var(--ink-rule);
  border-radius: 10px;
  background: var(--card-paper);
}

.cta p {
  margin: 0 0 0.6rem;
}

.cta-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.6rem;
}

/* Same height as the App Store badge and the visible part of the Google Play one. */
.cta-button {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  min-height: 40px;
  padding: 0 1.1rem;
  border: 1px solid #16264a;
  border-radius: 8px;
  background: var(--seal);
  box-shadow: 0 1px 3px rgb(22 38 74 / 0.35);
  color: var(--on-seal);
  font: 600 0.95rem/1 'Cinzel', Georgia, serif;
  letter-spacing: 0.02em;
  text-decoration: none;
}

.cta-button:hover,
.cta-button:focus-visible {
  background: #2f4c8a;
}

.cta .cta-note {
  margin: 0;
  font-size: 0.9rem;
  font-style: italic;
}

.chain-list,
.quest-list,
.zone-index {
  margin: 0;
  padding: 0;
  list-style: none;
}

.chain {
  margin: 0 0 1rem;
}

.chain ol {
  margin: 0.2rem 0 0;
  padding-left: 1.6rem;
}

.level,
.zone-facts,
.quest-meta {
  color: var(--ink-edge);
  font-style: italic;
}

.quest {
  margin: 0 0 0.8rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--ink-rule);
  border-radius: 8px;
  background: var(--card-paper);
}

.quest-meta {
  margin: 0 0 0.5rem;
  font-size: 0.95rem;
}

/* A class, race or profession quest: the app's icon after the title. */
.quest-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.3rem;
  margin: 0 0 0.3rem;
}

.quest-head h3 {
  margin: 0 0.2rem 0 0;
}

.quest-icon {
  flex: none;
}

.quest-facts {
  margin: 0;
}

.quest-facts div {
  margin: 0.15rem 0;
}

.quest-facts dt {
  display: inline;
  color: var(--ink-title);
  font-weight: bold;
}

.quest-facts dt::after {
  content: ': ';
}

.quest-facts dd {
  display: inline;
  margin: 0;
}

.quest-lore {
  margin-top: 0.6rem;
  padding-top: 0.5rem;
  border-top: 1px dashed var(--ink-rule);
}

.quest-lore p {
  margin: 0 0 0.3rem;
}

.lore-credit {
  font-size: 0.85rem;
  font-style: italic;
}

.zone-index li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.2rem 1rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--ink-rule);
}

.zone-index a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

/* On a line of their own (a long name on a phone) the facts stay at the right. */
.zone-index .zone-facts {
  margin-left: auto;
}

.zone-thumb {
  flex: none;
}

img.zone-thumb {
  border-radius: 6px;
}

.zone-thumb path {
  fill: var(--ink-rule);
  fill-opacity: 0.6;
  stroke: var(--ink-edge);
  stroke-width: 1px;
}

.coming {
  font-size: 0.95rem;
  font-style: italic;
}

/* The maps (maps.ts): the land on the parchment sea, the zones in the zone list's ink. Strokes keep
   their width at every drawing size; the view box scales the rest with the column. */
.continent-map,
.locator-map {
  display: block;
  box-sizing: border-box;
  max-width: 100%;
  height: auto;
  padding: 0.3rem;
  border: 1px solid var(--ink-rule);
  border-radius: 8px;
  background: var(--page);
}

.continent-map *,
.locator-map *,
.zone-thumb path {
  vector-effect: non-scaling-stroke;
  stroke-linejoin: round;
}

.map-land {
  fill: var(--reading-paper);
  stroke: var(--ink-edge);
  stroke-width: 1px;
}

.map-zones,
.map-lakes {
  stroke: var(--ink-rule);
  stroke-width: 0.6px;
}

.map-zones {
  fill: none;
}

.map-lakes {
  fill: var(--page);
  pointer-events: none;
}

.map-zone {
  fill: var(--ink-rule);
  fill-opacity: 0.6;
  stroke: var(--ink-edge);
  stroke-width: 0.8px;
}

.map-city {
  fill: var(--ink-title);
  stroke: var(--reading-paper);
  stroke-width: 1.2px;
}

.continent-map a:hover .map-zone,
.continent-map a:focus-visible .map-zone {
  fill: var(--seal);
  fill-opacity: 0.55;
  stroke: var(--seal);
}

.continent-map a:hover .map-city,
.continent-map a:focus-visible .map-city {
  fill: var(--seal);
}

.map-here,
.map-host {
  fill: var(--seal);
  stroke: var(--seal);
  stroke-width: 1px;
}

path.map-here {
  fill-opacity: 0.75;
}

circle.map-here {
  stroke: var(--reading-paper);
  stroke-width: 1.5px;
}

.map-host {
  fill-opacity: 0.25;
}

/* The continent's map heads its zone list; beside it where the column has room. */
.continent-index .continent-map {
  width: 13rem;
  margin: 0 auto 1rem;
}

@media (min-width: 40rem) {
  .continent-index {
    display: grid;
    grid-template-columns: 13rem 1fr;
    gap: 1.5rem;
    align-items: start;
  }

  .continent-index .continent-map {
    margin: 0.45rem 0 0;
  }
}

/* A zone's locator floats beside the opening text of its page or article. */
.locator-map {
  float: right;
  width: 9rem;
  margin: 0.3rem 0 1rem 1.5rem;
}

/* An article as a card (articleCardHtml in pages.ts): on the blog's pages, under every article
   and on a zone page that has an article. The whole card is the link; it lifts and its arrow
   moves on hover. */
.article-cards {
  display: grid;
  gap: 0.7rem;
  margin: 1.25rem 0;
  padding: 0;
  list-style: none;
}

.article-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.75rem 1rem;
  border: 1px solid var(--ink-rule);
  border-left: 4px solid var(--seal);
  border-radius: 10px;
  background: var(--card-paper);
  box-shadow: 0 1px 3px rgb(46 35 20 / 0.15);
  color: var(--ink-body);
  font-weight: normal;
  text-decoration: none;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}

.article-card:hover,
.article-card:focus-visible {
  background: rgb(250 243 226);
  box-shadow: 0 4px 12px rgb(46 35 20 / 0.22);
  transform: translateY(-2px);
}

.article-card-picture {
  flex: none;
  border-radius: 8px;
}

.article-card-text {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.15rem;
  min-width: 0;
}

.article-card-title {
  color: var(--seal);
  font: 600 1.05rem/1.3 'Cinzel', Georgia, serif;
}

.article-card-description {
  font-size: 0.92rem;
  line-height: 1.45;
}

.article-card-arrow {
  flex: none;
  color: var(--seal);
  font-size: 1.3rem;
  transition: transform 0.15s ease;
}

.article-card:hover .article-card-arrow,
.article-card:focus-visible .article-card-arrow {
  transform: translateX(4px);
}

@media (prefers-reduced-motion: reduce) {
  .article-card,
  .article-card-arrow {
    transition: none;
  }

  .article-card:hover,
  .article-card:focus-visible,
  .article-card:hover .article-card-arrow,
  .article-card:focus-visible .article-card-arrow {
    transform: none;
  }
}

.post-date {
  color: var(--ink-edge);
  font-size: 0.9rem;
}

/* A row of app screenshots (screenshots.ts), on the guide index and under every article. */
.app-screens {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin: 2rem 0 0;
  padding: 0;
  list-style: none;
}

.app-screens img {
  display: block;
  width: 180px;
  max-width: 28vw;
  height: auto;
  border: 1px solid var(--ink-rule);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgb(46 35 20 / 0.25);
}

/* The page's one ad unit, below its content (pages.ts). A slot AdSense could not fill (it marks it
   unfilled) goes with its margin, so no empty gap stays above the footer; AdSense writes an inline
   display on the slot, hence !important. */
.guide-ad {
  margin: 2rem 0 0;
}

.guide-ad:has(ins.adsbygoogle[data-ad-status='unfilled']),
ins.adsbygoogle[data-ad-status='unfilled'] {
  display: none !important;
}

.site-footer {
  margin-top: 2.5rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--ink-rule);
  font-size: 0.9rem;
}

@media (max-width: 30rem) {
  body {
    padding: 0 0.9rem 2rem;
    font-size: 1rem;
  }

  .quest {
    padding: 0.75rem 0.8rem;
  }

  .locator-map {
    width: 6.5rem;
    margin-left: 1rem;
  }

  .continent-index .continent-map {
    width: 11rem;
  }
}

/* The stores' official badges (Apple: black "Download on the App Store"; Google: "Get it on Google
   Play", whose PNG carries its own clear space). Shown unaltered at the guidelines' minimum sizes. */
.store-badge {
  display: inline-flex;
  align-items: center;
}
.store-badge-apple {
  height: 40px;
  width: auto;
}
.store-badge-google {
  height: 60px;
  width: auto;
}

/* The site's start page (landing.ts startPage): a centred hero with the store badges and the web
   app button, a scrolling strip of every store screenshot, feature cards, a facts table and the
   covered zones in columns. */
.start-hero {
  margin: 1.5rem 0 0.5rem;
  text-align: center;
}
.start-hero .lede {
  font-size: 1.15rem;
}
.start-hero .cta-links {
  justify-content: center;
  margin: 1.2rem 0 0.4rem;
}
.start-hero .cta-note {
  margin: 0;
  font-size: 0.9rem;
  font-style: italic;
}
.start-icon {
  display: block;
  width: 112px;
  height: auto;
  margin: 0 auto 0.6rem;
  border-radius: 24px;
  box-shadow: 0 3px 10px rgb(46 35 20 / 0.35);
}
.start-shots {
  display: flex;
  gap: 0.9rem;
  margin: 0 -0.5rem;
  padding: 0.5rem 0.5rem 1rem;
  list-style: none;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
}
.start-shots li {
  flex: none;
  scroll-snap-align: start;
}
.start-shots figure {
  width: 180px;
  margin: 0;
}
.start-shots img {
  display: block;
  width: 180px;
  height: auto;
  border: 1px solid var(--ink-rule);
  border-radius: 8px;
  box-shadow: 0 2px 8px rgb(46 35 20 / 0.25);
}
.start-shots figcaption {
  margin-top: 0.4rem;
  font-size: 0.85rem;
  line-height: 1.35;
  text-align: center;
}
.start-features {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
  gap: 0.8rem;
  margin: 0;
  padding: 0;
  list-style: none;
}
.start-features li {
  padding: 0.8rem 1rem;
  border: 1px solid var(--ink-rule);
  border-radius: 10px;
  background: var(--card-paper);
}
.start-features h3 {
  margin: 0 0 0.3rem;
  font-size: 1rem;
}
.start-features p {
  margin: 0;
  font-size: 0.95rem;
}
.start-glance {
  width: 100%;
  border-collapse: collapse;
}
.start-glance th,
.start-glance td {
  padding: 0.45rem 0.6rem;
  border-bottom: 1px solid var(--ink-rule);
  text-align: left;
  vertical-align: top;
}
.start-glance th {
  width: 8rem;
  color: var(--ink-title);
}
.start-zones {
  columns: 2 14rem;
  column-gap: 1.5rem;
  margin: 0 0 1rem;
  padding: 0;
  list-style: none;
}
.start-zones li {
  break-inside: avoid;
  margin: 0 0 0.35rem;
}
.start-zone-count {
  display: block;
  color: var(--ink-edge);
  font-size: 0.85rem;
}