/* The server pages in every interface language: how to play and the bosses
   (templates/site/). The pixel dungeon of game.css without the game: dark
   stone with its 48x24 mortar grid, purple frames, gold and torch orange,
   Pixeloid Sans Bold for labels and Pixeloid Sans for text, bevels drawn
   with inset box-shadows. Phones from 360px first, a wider column on desktop */

@font-face {
  font-family: "Pixeloid Label";
  src: url("../fonts/PixeloidSans-Bold.woff2") format("woff2");
  font-weight: 100 900;
  size-adjust: 112.5%;
  font-display: swap;
}
@font-face {
  font-family: "Pixeloid Text";
  src: url("../fonts/PixeloidSans.woff2") format("woff2");
  font-weight: 100 500;
  size-adjust: 84.375%;
  font-display: swap;
}
@font-face {
  font-family: "Pixeloid Text";
  src: url("../fonts/PixeloidSans-Bold.woff2") format("woff2");
  font-weight: 600 900;
  size-adjust: 84.375%;
  font-display: swap;
}
/* digits and signs only, for the languages whose letters come from the system font */
@font-face {
  font-family: "Pixeloid Label Signs";
  src: url("../fonts/PixeloidSans-Bold.woff2") format("woff2");
  font-weight: 100 900;
  size-adjust: 112.5%;
  unicode-range: U+0023, U+0025, U+002B-003A, U+00B7, U+00D7, U+2039-203A, U+2190-2193;
  font-display: swap;
}

:root {
  --bg: #14101f;
  --grid: #20182e;
  --panel: #241d36;
  --frame: #5b4b80;
  --line: #3a2f55;
  --well: #191423;
  --deep: #0c0912;
  --ink: #f2ead7;
  --dim: #bfb1d4;
  --soft: #c3b6d6;
  --muted: #a99cc4;
  --gold: #e8b730;
  --gold-hi: #f8d971;
  --gold-lo: #a87520;
  --gold-sh: #71441d;
  --torch: #f08a24;
  --torch-hi: #ffbb57;
  --torch-lo: #aa571b;
  --torch-edge: #ffc06b;
  --green: #2f8f4a;
  --green-hi: #59b86b;
  --green-lo: #1b5c2f;
  --blue: #7fb2ff;
  --epic: #c6b4f2;
  --p2p: "Pixeloid Label", system-ui, sans-serif;
  --pix: "Pixeloid Text", system-ui, sans-serif;
  --abc: "Pixeloid Label", system-ui, sans-serif;
  --drop: 0 4px 0 var(--deep);
  --bev: 4px;
  color-scheme: dark;
}
/* Pixeloid lacks a few letters of Vietnamese, Tajik and Yoruba: their text
   takes every letter from the system font, as in game.css */
:root:is(:lang(vi), :lang(tg), :lang(yo)) {
  --p2p: "Pixeloid Label Signs", system-ui, sans-serif;
  --pix: system-ui, sans-serif;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  margin: 0;
  background-color: var(--bg);
  background-image: linear-gradient(var(--grid) 2px, transparent 2px), linear-gradient(90deg, var(--grid) 2px, transparent 2px);
  background-size: 48px 24px;
  color: var(--ink);
  font: 17px/1.55 var(--pix);
  overflow-wrap: break-word;
}
a {
  color: var(--gold);
}
a:hover {
  color: var(--torch);
}
p {
  margin: 0 0 14px;
}
.dim {
  color: var(--dim);
}

/* ---------------------------------------------------------------- header */

.site-head {
  border-bottom: 2px solid var(--line);
  background: rgba(12, 9, 18, 0.72);
}
.site-bar {
  max-width: 960px;
  margin: 0 auto;
  padding: 14px 16px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 20px;
}
.site-logo {
  font-family: var(--abc);
  font-size: 16px;
  line-height: 20px;
  color: var(--gold);
  text-shadow: 3px 3px 0 var(--gold-sh);
  text-decoration: none;
  white-space: nowrap;
}
.site-logo:hover {
  color: var(--gold-hi);
}
.site-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.site-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 6px 10px;
  border: 2px solid var(--line);
  background: var(--well);
  color: var(--ink);
  font-family: var(--p2p);
  font-size: 8px;
  line-height: 12px;
  text-transform: uppercase;
  text-decoration: none;
}
.site-nav a:hover {
  border-color: var(--frame);
  color: var(--gold);
}
.site-nav a[aria-current="page"] {
  border-color: var(--gold);
  color: var(--gold);
}
.site-nav a.is-play {
  border-color: var(--torch-edge);
  background: var(--torch);
  color: var(--bg);
  box-shadow: inset -3px -3px 0 var(--torch-lo), inset 3px 3px 0 var(--torch-hi);
}
.site-nav a.is-play:hover {
  color: var(--deep);
  background: var(--torch-hi);
}

/* ---------------------------------------------------------------- the column */

.site-main {
  max-width: 820px;
  margin: 0 auto;
  padding: 18px 16px 40px;
}
.crumbs ol {
  list-style: none;
  margin: 0 0 22px;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  font-family: var(--p2p);
  font-size: 8px;
  line-height: 14px;
  color: var(--dim);
  text-transform: uppercase;
}
/* the separator, a chevron drawn with two borders rather than a character, so
   no font and no bidi mirroring decides its way: it points to the next step,
   right in left-to-right pages, left in right-to-left ones */
.crumbs li {
  display: inline-flex;
  align-items: center;
}
.crumbs li + li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin-inline-end: 8px;
  border-top: 2px solid var(--frame);
  border-right: 2px solid var(--frame);
  transform: rotate(45deg);
}
[dir="rtl"] .crumbs li + li::before {
  transform: rotate(-135deg);
}
.crumbs a {
  color: var(--dim);
}
.crumbs a:hover {
  color: var(--gold);
}
.crumbs [aria-current] {
  color: var(--ink);
}
h1 {
  margin: 0 0 18px;
  font-family: var(--p2p);
  font-size: 16px;
  line-height: 26px;
  font-weight: normal;
  color: var(--gold);
  text-shadow: 3px 3px 0 var(--gold-sh);
}
h2 {
  margin: 40px 0 14px;
  font-family: var(--p2p);
  font-size: 12px;
  line-height: 20px;
  font-weight: normal;
  color: var(--gold);
}
.lead {
  font-size: 18px;
  color: var(--ink);
}
.doc-sec p,
.boss-sec > p {
  color: var(--soft);
}
.more {
  margin-top: 14px;
}

.panel {
  border: 2px solid var(--frame);
  background: var(--panel);
  box-shadow: inset 0 0 0 2px var(--bg), inset 0 0 0 4px var(--line), var(--drop);
}
.slot {
  background: var(--bg);
  box-shadow: inset 2px 2px 0 var(--deep), inset -2px -2px 0 var(--line);
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 10px 28px;
  border: 2px solid var(--torch-edge);
  background: var(--torch);
  color: var(--bg);
  box-shadow: inset -4px -4px 0 var(--torch-lo), inset 4px 4px 0 var(--torch-hi), var(--drop);
  font-family: var(--p2p);
  font-size: 13px;
  line-height: 18px;
  text-transform: uppercase;
  text-decoration: none;
}
.btn:hover {
  color: var(--deep);
  background: var(--torch-hi);
}
.btn:active {
  transform: translateY(2px);
  --drop: 0 2px 0 var(--deep);
}
.cta {
  margin: 40px 0 0;
  text-align: center;
}
.updated {
  margin-top: 28px;
  text-align: center;
  font-size: 15px;
  color: var(--dim);
}

/* ---------------------------------------------------------------- tiles: what the colors mean */

.colors {
  padding: 18px;
}
.tiles {
  display: flex;
  justify-content: center;
  gap: 6px;
}
.tile {
  width: 50px;
  height: 50px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: var(--abc);
  font-size: 24px;
  line-height: 1;
  color: var(--ink);
}
.tile-sm {
  width: 32px;
  height: 32px;
  font-size: 16px;
  --bev: 3px;
}
.m-c {
  background: var(--green);
  box-shadow: inset calc(var(--bev) * -1) calc(var(--bev) * -1) 0 var(--green-lo), inset var(--bev) var(--bev) 0 var(--green-hi);
}
.m-p {
  background: var(--gold);
  color: var(--bg);
  box-shadow: inset calc(var(--bev) * -1) calc(var(--bev) * -1) 0 var(--gold-lo), inset var(--bev) var(--bev) 0 var(--gold-hi);
}
.m-a {
  background: var(--panel);
  color: var(--muted);
  box-shadow: inset calc(var(--bev) * -1) calc(var(--bev) * -1) 0 var(--bg), inset var(--bev) var(--bev) 0 var(--line);
}
.legend {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.legend li {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--ink);
}

/* ---------------------------------------------------------------- sprites from the boss sheet */

/* --x and --y: the boss's place in the sheet, in sprites (seo.sheet_offset);
   --cols and the picture come from the page's head */
.spr {
  --s: 64px;
  flex: none;
  width: var(--s);
  height: var(--s);
  background-repeat: no-repeat;
  background-size: calc(var(--cols) * var(--s)) auto;
  background-position: calc(var(--x) * var(--s) * -1) calc(var(--y) * var(--s) * -1);
  image-rendering: pixelated;
}

.boss-examples {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.boss-examples li {
  display: flex;
}
.boss-mini {
  flex: 1;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  color: var(--ink);
  text-decoration: none;
}
.boss-mini:hover {
  border-color: var(--gold);
  color: var(--ink);
}
.boss-mini-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.boss-mini-name {
  font-family: var(--p2p);
  font-size: 12px;
  line-height: 18px;
  color: var(--gold);
}
.boss-mini-trial {
  font-size: 16px;
  line-height: 1.45;
  color: var(--soft);
}
.boss-floor {
  margin: 0;
  font-family: var(--p2p);
  font-size: 8px;
  line-height: 12px;
  color: var(--dim);
  text-transform: uppercase;
}

/* ---------------------------------------------------------------- relics */

.relics {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.relic {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 16px;
}
.relic-icon {
  width: 48px;
  height: 48px;
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.relic-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
.relic-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 10px;
}
.relic-name {
  font-family: var(--p2p);
  font-size: 12px;
  line-height: 18px;
  color: var(--ink);
}
.relic-desc {
  font-size: 16px;
  line-height: 1.45;
  color: var(--soft);
}
.rarity {
  padding: 3px 6px;
  border: 2px solid var(--line);
  font-family: var(--p2p);
  font-size: 8px;
  line-height: 10px;
  color: var(--dim);
  white-space: nowrap;
}
.rarity.is-rare {
  border-color: var(--blue);
  color: var(--blue);
}
.rarity.is-epic {
  border-color: var(--epic);
  color: var(--epic);
}
.rarity.is-legendary {
  border-color: var(--gold);
  color: var(--gold);
}

.word-langs {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.word-langs li {
  padding: 6px 10px;
  border: 2px solid var(--line);
  background: var(--well);
  font-size: 16px;
  line-height: 1.3;
}

/* ---------------------------------------------------------------- the bosses */

.jump {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 20px 0 0;
}
.jump a {
  padding: 8px 10px;
  border: 2px solid var(--line);
  background: var(--well);
  font-family: var(--p2p);
  font-size: 8px;
  line-height: 12px;
  color: var(--gold);
  text-decoration: none;
}
.jump a:hover {
  border-color: var(--gold);
}
.boss-sec h2 {
  padding-bottom: 8px;
  border-bottom: 2px solid var(--frame);
}
.boss {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-top: 12px;
  padding: 16px;
  scroll-margin-top: 12px;
}
.boss:target {
  border-color: var(--gold);
}
.boss-body {
  flex: 1;
  min-width: 0;
}
.boss-name {
  margin: 6px 0 8px;
  font-family: var(--p2p);
  font-size: 12px;
  line-height: 18px;
  font-weight: normal;
}
.boss-name a {
  color: var(--gold);
  text-decoration: none;
}
.boss-name a:hover {
  color: var(--torch);
}
.tags,
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 0 0 10px;
}
.tag {
  padding: 4px 6px;
  border: 2px solid var(--gold);
  color: var(--gold);
  font-family: var(--p2p);
  font-size: 8px;
  line-height: 10px;
}
.chip {
  padding: 5px 7px;
  border: 2px solid var(--line);
  background: var(--well);
  font-family: var(--p2p);
  font-size: 8px;
  line-height: 10px;
  color: var(--ink);
}
.boss-trial {
  color: var(--ink);
  font-size: 16px;
  line-height: 1.5;
}
.boss-quote {
  margin: 0;
  font-size: 15px;
  line-height: 1.45;
  color: var(--dim);
  font-style: italic;
}
q {
  quotes: auto;
}

/* ---------------------------------------------------------------- footer */

.site-foot {
  border-top: 2px solid var(--line);
  background: rgba(12, 9, 18, 0.72);
}
.site-foot-in {
  max-width: 960px;
  margin: 0 auto;
  padding: 28px 16px 40px;
}
.foot-h {
  margin: 0 0 14px;
  font-size: 10px;
  line-height: 18px;
}
.seo-lang-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
  font-size: 15px;
  line-height: 1.5;
}
.seo-lang-list a {
  color: var(--soft);
  text-decoration: none;
}
.seo-lang-list a:hover {
  color: var(--gold);
  text-decoration: underline;
}
.seo-lang-current {
  color: var(--gold);
}
.seo-lang-list :is(:lang(vi), :lang(tg), :lang(yo)) {
  font-family: system-ui, sans-serif;
}
.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 24px;
  font-family: var(--p2p);
  font-size: 8px;
  line-height: 14px;
  text-transform: uppercase;
}
.foot-links a {
  color: var(--dim);
}
.foot-links a:hover {
  color: var(--gold);
}
.foot-note {
  margin: 18px 0 0;
  font-size: 14px;
  color: var(--muted);
}

/* ---------------------------------------------------------------- scripts in a system font */

/* Arabic, Hindi, Chinese and the rest the pixel font lacks, and Vietnamese,
   Tajik and Yoruba: the tiny pixel labels would be unreadable, so they grow
   (seo.WIDE_SCRIPTS sets the class, as static/js/i18n.js does in the game) */
.wide-script :is(.site-nav a, .crumbs ol, .boss-floor, .rarity, .tag, .chip, .jump a, .foot-links) {
  font-size: 12px;
  line-height: 1.35;
}
.wide-script :is(h2, .boss-mini-name, .relic-name, .boss-name, .foot-h) {
  font-size: 15px;
  line-height: 1.4;
}
.wide-script h1 {
  font-size: 20px;
  line-height: 1.4;
}
.wide-script .btn {
  font-size: 16px;
}

/* ---------------------------------------------------------------- wider screens */

@media (min-width: 640px) {
  .boss-examples {
    grid-template-columns: 1fr 1fr;
  }
  .relics {
    grid-template-columns: 1fr 1fr;
  }
  .spr {
    --s: 80px;
  }
  .boss-examples .spr {
    --s: 64px;
  }
  .boss {
    gap: 20px;
    padding: 18px 20px;
  }
}
@media (min-width: 1024px) {
  .site-main {
    padding-top: 28px;
  }
  /* the bosses two to a row: 200 cards one under another would be a very long page */
  .site-main.is-bosses {
    max-width: 1120px;
  }
  .is-bosses .lead,
  .is-bosses .dim {
    max-width: 820px;
  }
  .boss-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
  }
  h1 {
    font-size: 24px;
    line-height: 36px;
    text-shadow: 4px 4px 0 var(--gold-sh);
  }
  .site-logo {
    font-size: 24px;
    line-height: 30px;
  }
}
@media (max-width: 380px) {
  .site-main {
    padding-inline: 12px;
  }
  .tile {
    width: 44px;
    height: 44px;
    font-size: 16px;
  }
  .spr {
    --s: 48px;
  }
  .boss {
    gap: 12px;
    padding: 14px 12px;
  }
}