/* Article styles. Loaded inside the article's shadow root, so Wikipedia's own class names
   can't collide with the game's, and the game's can't leak into articles. Colour and font
   tokens come from :root in style.css (custom properties inherit into the shadow root). */
:host { display: block; }
.doc { color: var(--ink); }
:focus-visible { outline: 3px solid var(--link); outline-offset: 2px; border-radius: 6px; }
img { max-width: 100%; height: auto; }

.art-head { margin-bottom: 24px; }
.art-head h1 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: clamp(2.2rem, 8vw, 3.25rem);
  line-height: 1.1;
  margin: 0;
  padding-bottom: .1em;
  border-bottom: 1px solid var(--line);
  text-wrap: balance;
  overflow-wrap: anywhere;
}
.art-head .desc { margin: 10px 0 0; color: var(--muted); font-size: 1rem; }
.attrib { margin-top: 48px; padding-top: 16px; border-top: 1px solid var(--line); font-size: .8125rem; color: var(--muted); line-height: 1.5; }
.attrib a { color: inherit; }

/* Article typography */
.prose { font-family: var(--f-read); font-size: 1.0625rem; line-height: 1.65; overflow-wrap: break-word; }
.prose::after { content: ""; display: table; clear: both; }
.prose p { margin: 0 0 1em; max-width: 72ch; }
.prose h2 {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.75rem;
  line-height: 1.25;
  margin: 1.4em 0 .5em;
  padding-bottom: .1em;
  border-bottom: 1px solid var(--line);
  text-wrap: balance;
}
.prose h3, .prose h4, .prose h5 { font-family: var(--f-ui); font-weight: 700; line-height: 1.3; margin: 1.4em 0 .4em; }
.prose h3 { font-size: 1.2rem; }
.prose h4, .prose h5 { font-size: 1.02rem; }
.prose ul, .prose ol { padding-left: 1.4em; margin: 0 0 1em; max-width: 68ch; }
.prose li { margin: .2em 0; }
.prose blockquote { margin: 1em 0; padding-left: 1em; border-left: 3px solid var(--line); color: var(--muted); }
.prose dl { margin: 0 0 1em; }
.prose dt { font-family: var(--f-ui); font-weight: 800; }
.prose dd { margin: 0 0 .5em 1em; }
.prose .hatnote { font-family: var(--f-ui); font-size: .9rem; color: var(--muted); margin: 0 0 1em; }
.prose sup, .prose sub { line-height: 0; }

a.bl {
  color: var(--link);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--link) 32%, transparent);
  text-decoration-thickness: .08em;
  text-underline-offset: .2em;
  border-radius: 4px;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  transition: background-color .1s, color .1s, text-decoration-color .1s;
  cursor: pointer;
}
a.bl:hover { text-decoration-color: var(--link); }
a.bl:active, a.bl.hit {
  background: var(--link);
  color: var(--paper);
  text-decoration-color: transparent;
  box-shadow: 0 0 0 2px var(--link);
}

/* Images */
.prose figure { margin: 1.4em 0; display: table; max-width: 100%; }
.prose figure img, .prose .thumb img { border-radius: 8px; }
.prose figcaption, .prose .thumbcaption, .prose .gallerytext {
  font-family: var(--f-ui);
  font-size: .85rem;
  line-height: 1.4;
  color: var(--muted);
  margin-top: .5em;
  caption-side: bottom;
}
.prose .thumb { margin: 1.4em 0; }
.prose .thumbinner { max-width: 100%; }
.prose .gallery { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; padding: 0; }
.prose .gallerybox { max-width: 180px; }

/* Infobox and sidebars */
.ibox { margin: 0 0 1.5em; }
.ibox > table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--f-ui);
  font-size: .875rem;
  line-height: 1.4;
  background: var(--surface);
  border-radius: 14px;
  overflow: hidden;
}
.ibox th, .ibox td { padding: 7px 12px; vertical-align: top; text-align: left; border-top: 1px solid var(--line); }
.ibox tr:first-child > * { border-top: 0; }
.ibox .infobox-above, .ibox .sidebar-title {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.15;
  text-align: center;
  padding: 14px 12px;
}
.ibox .infobox-image, .ibox .infobox-caption, .ibox .sidebar-image { text-align: center; }
.ibox .infobox-caption { color: var(--muted); font-size: .8rem; border-top: 0; }
.ibox .infobox-header, .ibox .infobox-subheader, .ibox .sidebar-heading { text-align: center; font-weight: 800; }
.ibox ul { padding-left: 1.1em; margin: 0; }
.ibox img { border-radius: 6px; }
.ibox .infobox-image img, .ibox .sidebar-image img { max-height: 280px; width: auto; }
@media (min-width: 760px) {
  .ibox { float: right; clear: right; width: 300px; margin: 0 0 1.25em 1.75em; }
  .prose figure.mw-halign-right, .prose figure[typeof~="mw:File/Thumb"]:not(.mw-halign-left):not(.mw-halign-center),
  .prose .thumb.tright {
    float: right;
    clear: right;
    max-width: 260px;
    margin: .3em 0 1em 1.75em;
  }
  .prose figure.mw-halign-left, .prose .thumb.tleft { float: left; clear: left; max-width: 260px; margin: .3em 1.75em 1em 0; }
}

/* Tables */
.tbl { overflow-x: auto; margin: 1.2em 0; max-width: 100%; }
.tbl table { border-collapse: collapse; font-family: var(--f-ui); font-size: .85rem; line-height: 1.4; }
.tbl th, .tbl td { border: 1px solid var(--line); padding: 5px 9px; vertical-align: top; text-align: left; }
.tbl th { background: var(--surface); }
.tbl caption { font-weight: 800; text-align: left; padding: 0 0 6px; }

/* Inline lists used by navboxes and infoboxes */
.hlist ul, .hlist ol { list-style: none; padding: 0; margin: 0; display: inline; }
.hlist li { display: inline; margin: 0; }
.hlist li:not(:last-child)::after { content: " · "; color: var(--muted); font-weight: 700; }
.hlist li ul::before { content: " ("; }
.hlist li ul::after { content: ")"; }

/* Related-topics boxes (Wikipedia navboxes), collapsed */
.nbs { margin-top: 40px; border-top: 1px solid var(--line); font-family: var(--f-ui); }
.nbs-h { font-family: var(--f-ui) !important; font-size: .875rem !important; font-weight: 700; border: 0 !important; padding: 0 !important; color: var(--muted); margin: 16px 0 4px !important; }
.nb { border-bottom: 1px solid var(--line); }
.nb summary { cursor: pointer; padding: 12px 0; font-weight: 800; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.nb summary::-webkit-details-marker { display: none; }
.nb summary::after { content: "+"; color: var(--muted); }
.nb[open] summary::after { content: "−"; }
.nb-body { overflow-x: auto; padding-bottom: 12px; }
.nb table { width: 100%; border-collapse: collapse; font-size: .875rem; line-height: 1.55; }
.nb th { text-align: left; vertical-align: top; padding: 6px 12px 6px 0; color: var(--muted); font-weight: 700; width: 26%; }
.nb td { padding: 6px 0; vertical-align: top; }
.nb .navbox-abovebelow, .nb .navbox-group, .nb .navbox-image { font-size: .8rem; }
.nb img { display: none; }


/* Infobox titles that don't use .infobox-above (e.g. military conflicts) */
.ibox > table > caption,
.ibox > table > tbody > tr:first-child > th[colspan] {
  font-family: var(--f-display);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1.15;
  text-align: center;
  padding: 14px 12px;
}
.ibox td[colspan], .ibox th[colspan] { text-align: center; }
.ibox td[colspan] table { width: 100%; border-collapse: collapse; }
.ibox td[colspan] table th, .ibox td[colspan] table td { text-align: left; }

/* Multi-image collages */
.tmulti { margin: 0 auto; }
.tmulti .multiimageinner { display: flex; flex-direction: column; gap: 8px; }
.tmulti .trow { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
.tmulti .tsingle { flex: 1 1 120px; min-width: 0; display: flex; flex-direction: column; gap: 4px; font-size: .78rem; line-height: 1.35; color: var(--muted); }
.tmulti .tsingle img { width: 100%; height: auto; border-radius: 6px; }
.tmulti .thumbcaption { font-size: .8rem; color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}