/* The look of bloodborne-wiki.com, drawn with that site's own artwork (fetched and cut by
   worker/tools/wiki_assets.py into /static/wiki/): the pillared Yharnam backdrop, the messengers'
   strip, the steel bars, the painted banner, the ornamented black boxes and the lantern sidebar,
   small Tahoma text in white and antique gold. */
:root {
  --text: #fff;
  --soft: #c3c3c3;
  --muted: #8f9396;
  --gold: #b39050;
  --gold-light: #d1a65a;
  --gold-dim: #6f5a33;
  --blood: #7d1717;
  --blood-bright: #c0392b;
  --ok: #99cc00;
  --coop: #8fb2d9;
  --sans: Tahoma, Helvetica, Arial, sans-serif;
  --serif: "Lining Digits", "Cormorant Garamond", Georgia, serif;
  --fell: "IM Fell English", "Cormorant Garamond", Georgia, serif;
  --fell-sc: "IM Fell English SC", "IM Fell English", Georgia, serif;
  color-scheme: dark;
}
/* Cormorant's old-style figures read 1 and 0 as I and O: take just the digits from a lining serif */
@font-face { font-family: "Lining Digits"; unicode-range: U+0030-0039;
  src: local("Palatino Linotype"), local("Book Antiqua"), local("Palatino"), local("Times New Roman"), local("Times"); }

* { box-sizing: border-box; }
html, body { margin: 0; }
html { background: #000 url("/static/wiki/backdrop.jpg") center top repeat-y; }
body {
  background: url("/static/wiki/backdrop-top.jpg") center top no-repeat;
  color: var(--soft);
  font: 13px/14px var(--sans);
  min-height: 100vh;
}
a { color: var(--text); text-decoration: none; }
a:hover { color: var(--gold); }
h1, h2, h3 { margin: 0 0 .5em; font-weight: 400; }
h1 { font: italic 17px/1.3 var(--sans); color: var(--gold); }
h2 { font: 700 12px/1.4 var(--sans); color: var(--gold); }
h3 { font: 13px/1.4 var(--sans); color: var(--gold-light); }
p { margin: 0 0 1em; }
small, .muted { color: var(--muted); }
hr { border: 0; height: 21px; background: url("/static/wiki/ornament.jpg") center / 100% 21px no-repeat; margin: .6rem -10px; }

/* ---- the column: 986 pixels between the pillars ---- */
.frame { position: relative; width: 986px; margin: 0 auto; padding: 0 0 1.5rem; }

/* the messengers' strip with the search box on its stone plate */
.top { position: relative; height: 75px; margin: 0 -63.5px; background: url("/static/wiki/header.png") left top no-repeat; }
.messengers { display: none; }
.search { position: absolute; left: 705px; top: 15px; width: 310px; }
.search input { width: 100%; height: 55px; border-radius: 5px; border: 0; background: #fff; color: #000;
  font: 15px Arial, sans-serif; padding: 0 .3rem; box-shadow: none; }
.search input::placeholder { color: #333; }
.search input:focus { outline: 0; }

/* the steel bars: the server's line, the news line, the footer */
.infobar { height: 24px; display: flex; align-items: center; justify-content: space-around; padding: 0 1.5rem;
  background: url("/static/wiki/bar.jpg") center / 100% 24px no-repeat; font: 11px/24px var(--sans); color: var(--soft); white-space: nowrap; overflow: hidden; }
.infobar b { color: var(--text); margin-left: .35em; }
.infobar b::before { content: "\25CF"; color: var(--gold); font-size: 9px; margin-right: .4em; vertical-align: 1px; }
.infobar b.up::after { content: "\2713"; color: var(--ok); font-size: 14px; margin-left: .15em; }
.strip { position: relative; min-height: 36px; padding: 11px 1.2rem 9px 55px; font-size: 11px; line-height: 14px; color: var(--text);
  background: url("/static/wiki/strip.jpg") left top / 986px 100% no-repeat; }

/* the plain white menu */
.navbar { height: 27px; }
.nav { display: flex; justify-content: space-around; align-items: center; height: 27px; padding: 0 .5rem; }
.nav a { color: var(--text); font: 700 11px/27px var(--sans); padding: 0 .3rem; }
.nav a:hover, .nav a.active { color: var(--gold); }
.badge {
  display: inline-block; min-width: 1.4em; padding: 0 .3em; margin-left: .3em; vertical-align: 1px;
  border-radius: 2px; background: var(--blood); border: 1px solid var(--blood-bright); color: #fff; font: 700 9px/1.35 var(--sans); text-align: center;
}
.menu-toggle { display: none; }

/* the banner: the painting, the site's name lettered over it, two smudged plates on the right */
.banner { position: relative; height: 119px; background: url("/static/wiki/banner.png") left top / 986px 119px no-repeat; }
.logo { position: absolute; left: 190px; top: 20px; display: flex; flex-direction: column; line-height: 1; }
.logo:hover { color: inherit; }
.logo-name { font: 400 47px/1 var(--fell); color: #fff; letter-spacing: -.01em; white-space: nowrap;
  text-shadow: 0 0 1px #000, 1px 1px 0 #222, -1px -1px 0 #333, 0 0 8px rgba(0, 0, 0, .9); }
.logo-tail { font: 400 34px var(--fell-sc); color: #121212; margin-left: .08em; text-shadow: 0 0 6px rgba(255, 255, 255, .7); }
.logo-sub { margin-top: 6px; font: 300 28px/1 "Open Sans", var(--sans); color: rgba(225, 228, 230, .35); -webkit-text-stroke: .8px #1f2326; white-space: nowrap; }
.me { position: absolute; left: 612px; top: 22px; width: 190px; display: flex; flex-direction: column; gap: 10px; }
.me a, .me button {
  display: flex; align-items: center; justify-content: center; gap: .4rem; height: 34px; padding: 0 .6rem;
  color: #e6e6e6; font: 400 20px var(--fell); text-shadow: 0 0 2px #000, 1px 1px 1px #000; cursor: pointer; border: 0; outline: 0; border-radius: 0;
  background: radial-gradient(closest-side, rgba(12, 12, 14, .92), rgba(20, 20, 22, .75) 70%, rgba(30, 30, 32, 0));
}
.me a:hover, .me button:hover { color: var(--gold-light); outline: 0; }

.ticker b { color: var(--gold-light); }
.ticker a { font-weight: 700; }
.foot { text-align: center; color: var(--soft); }
.foot a { font-weight: 700; }
.foot-orn { height: 21px; background: url("/static/wiki/ornament.jpg") center / 986px 21px no-repeat; }
.backtotop { position: fixed; right: 16px; bottom: 16px; width: 40px; height: 40px; background: url("/static/wiki/top.png") center / contain no-repeat; opacity: .8; z-index: 20; }
.backtotop:hover { opacity: 1; }

/* ---- the front page's bands ---- */
.wide:empty { display: none; }
.intro { display: grid; grid-template-columns: 490px 1fr; height: 336px; padding: 14px 14px 30px; overflow: hidden;
  background: url("/static/wiki/intro.jpg") left top / 986px 336px no-repeat; }
.intro p, .intro li { color: #e3e3e3; }
.intro-left { padding: 2px 12px 0 2px; text-align: justify; }
.intro-left ul.bul { padding-left: 1.5rem; }
.intro-left ul.bul li { margin: 0 0 .55em; }
.intro-right { padding: 2px 0 0 18px; }
.intro-right h2 { margin: 0 0 3px; }
.intro-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; margin-top: .6rem; }
.dyk { position: relative; display: grid; grid-template-columns: 1fr 1fr; height: 106px; background: url("/static/wiki/dyk.png") center / 986px 106px no-repeat; }
.dyk > div { padding: 18px 20px 0; }
.dyk > div:first-child { padding-right: 205px; text-align: right; }
.dyk > div:last-child { padding-left: 105px; text-align: left; }
.dyk .big { display: block; font: 400 38px/1.05 var(--serif); color: #ececec; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dyk .small { display: block; font: 400 22px/1.2 var(--serif); color: #dcdcdc; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dyk-text { padding: 8px 33px 10px; color: var(--text); }
.dyk-text b { color: #fff; }
.dyk-text i { color: #ddd; }
.trinkets { height: 66px; background: url("/static/wiki/trinkets.png") center / 986px 66px no-repeat; }
.welcome { height: 111px; padding: 14px 20px 0 155px; background: url("/static/wiki/welcome.png") left top / 986px 111px no-repeat; overflow: hidden; }
.welcome h3 { margin: 0 0 4px; color: #e6a54c; font-size: 14px; }
.welcome ul.bul { margin: 0; }
.welcome li { margin: 0 0 5px; line-height: 14px; }
.icon-tiles { display: flex; justify-content: space-between; padding: 18px 10px 6px; background: url("/static/wiki/ornament.jpg") center top / 986px 21px no-repeat; }
.icon-tile { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 90px; color: #a9a9a9; font-size: 11px; text-align: center; }
.icon-tile img { width: 84px; height: 85px; display: block; transition: filter .15s; }
.icon-tile:hover { color: var(--gold); }
.icon-tile:hover img { filter: brightness(1.25) drop-shadow(0 0 6px rgba(209, 166, 90, .45)); }
.hunter-art { float: right; width: 186px; margin: -10px -14px 0 12px; filter: drop-shadow(0 0 8px #000); }

/* ---- the page: the lantern sidebar and the framed content beside it ---- */
.page { display: grid; grid-template-columns: 196px 790px; align-items: stretch; margin-top: 6px; }
.side { position: relative; padding: 0 0 46px; overflow: hidden;
  background: url("/static/wiki/side-top.png") left top no-repeat, url("/static/wiki/side-foot.png") left bottom no-repeat,
              url("/static/wiki/side-tile.png") left top repeat-y; }
.side .group { padding-bottom: 10px; }
.side h4 { height: 36px; margin: 0; padding: 10px 0 0 44px; font: 700 12px/16px var(--sans); color: #1b1b1b;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .35); background: url("/static/wiki/side-head.png") left top no-repeat; white-space: nowrap; }
.side .group:first-child h4 { margin-top: 2px; }
.side ul { list-style: none; margin: -2px 0 0 44px; padding: 0; }
.side li { position: relative; line-height: 14px; }
.side li::before { content: "\2022"; position: absolute; left: -12px; color: #fff; }
.side a { color: #fff; font-size: 12px; }
.side a:hover, .side a.active { color: var(--gold); }
.side .badge { font-size: 9px; }
.view { min-width: 0; padding: 16px 34px 50px 44px; color: var(--text);
  background: url("/static/wiki/content-top.png") left top no-repeat, url("/static/wiki/content-foot.png") left bottom no-repeat,
              url("/static/wiki/content-tile.png") left top repeat-y; }
.view::after { content: ""; display: block; clear: both; }
.view > h1:first-child { margin: 0 0 18px 8px; }
.view > * + * { margin-top: 12px; }
.view p, .view li { color: #e6e6e6; }
.view > h2 { margin-top: 16px; }

/* ---- framed boxes: the wiki's ornamented black panel, stretched to fit ---- */
.panel {
  position: relative; padding: 16px 18px 18px; color: var(--soft);
  border: 1px solid transparent; border-image: url("/static/wiki/box.png") 60 60 36 60 fill / 30px 30px 18px 30px stretch;
}
.panel.bump::before { content: ""; position: absolute; left: 0; right: 0; top: -10px; height: 21px;
  background: url("/static/wiki/ornament.jpg") center / 100% 21px no-repeat; mix-blend-mode: lighten; pointer-events: none; }
.panel h1 { font-size: 17px; }
.title { font: italic 400 16px var(--sans); color: var(--gold); margin: 0 0 .7rem; }
.panel p, .panel li { color: var(--text); }
.panel .muted, .panel small { color: var(--muted); }
.panel > header.bar { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; margin: -4px -4px 10px; padding: 0 4px 6px;
  border-bottom: 1px solid #3a3d40; }
.panel > header.bar h2 { margin: 0; font-size: 12px; color: var(--gold); }
.panel > header.bar span { color: var(--muted); font-size: 11px; }

/* page headings: the wiki's italic gold title on the content's plate */
.page-head { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }
.page-head h1 { margin: 0 0 6px 8px; flex-basis: 100%; }
.page-head h1 img { display: none; }
.page-head .cards { flex: 1; }
.page-head .sub { flex-basis: 100%; color: var(--muted); font: italic 12px var(--sans); }

/* ---- layout helpers ---- */
.grid { display: grid; gap: .9rem; }
.grid.two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid.three { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid.aside { grid-template-columns: 260px minmax(0, 1fr); }
.row { display: flex; gap: .6rem; align-items: center; flex-wrap: wrap; }
.row.between { justify-content: space-between; }
.stack > * + * { margin-top: .7rem; }
.hero { text-align: center; padding: .4rem 1rem .8rem; }
.hero h1 { font-size: 2.6rem; margin-bottom: .1em; }
.hero .motd { font: italic 400 1.25rem var(--serif); color: #a9a9ad; }
.attrs { display: grid; grid-template-columns: repeat(3, 1fr); gap: .3rem 1.2rem; }
.attrs div { display: flex; justify-content: space-between; border-bottom: 1px dotted #3a4045; color: var(--text); }
.attrs div span:first-child { color: var(--gold); }
.bosses { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: .35rem; }
.boss { padding: .3rem .55rem; border: 1px solid #2a2f33; color: var(--muted); background: rgba(0, 0, 0, .35); }
.boss.done { border-color: #5a1a1a; color: var(--text); background: linear-gradient(90deg, rgba(125, 23, 23, .4), rgba(0, 0, 0, .3)); }
.boss.done::before { content: "\2020  "; color: var(--blood-bright); }
.boss .dlc { font-size: 10px; color: var(--gold); margin-left: .3em; }

/* plain lists with the wiki's bullets */
.list { list-style: none; margin: 0; padding: 0; }
.list li { display: flex; align-items: center; gap: .6rem; padding: .38rem .2rem; border-bottom: 1px solid #2a2f33; color: var(--text); }
.list li:last-child { border-bottom: 0; }
.list .grow { flex: 1; min-width: 0; }
.list .sub { color: var(--muted); font-size: 11px; }
.feed li { align-items: baseline; }
.feed time { color: var(--muted); font-size: 11px; margin-left: auto; white-space: nowrap; }
.empty { color: var(--muted); font-style: italic; padding: .35rem 0; }
ul.bul { margin: .2rem 0 .5rem; padding-left: 1.2rem; }
ul.bul li { color: var(--text); margin: .12rem 0; }
ul.bul li::marker { color: var(--soft); }
.gold { color: var(--gold-light); }

.dot { width: .6rem; height: .6rem; border-radius: 50%; flex: none; background: #3a3f42; display: inline-block; box-shadow: inset 0 0 0 1px #000; }
.dot.online { background: var(--ok); }
.dot.in_game { background: var(--gold-light); box-shadow: 0 0 6px var(--gold); }
.dot.in_coop { background: var(--coop); box-shadow: 0 0 8px var(--coop); }
.status-text.in_coop { color: var(--coop); }
.status-text.in_game { color: var(--gold-light); }
.status-text.online { color: var(--ok); }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: .38rem .5rem; border-bottom: 1px solid #262b2e; color: var(--text); }
tbody tr:nth-child(odd) td { background: rgba(255, 255, 255, .025); }
tbody tr:hover td { background: rgba(179, 144, 80, .08); }
th { font: 700 10px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--gold); border-bottom: 1px solid var(--gold-dim); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.faded td { opacity: .5; }
tr.me-row td { color: var(--gold-light); }
.rank { width: 2.5rem; color: var(--muted); font-size: 11px; }
.barcell { width: 32%; }
.barcell .track { height: 8px; background: #07080a; border: 1px solid #2c3236; }
.barcell .fill { height: 100%; background: linear-gradient(180deg, #d24a3a, #8e1b17 60%, #4d0b0a); }

/* ---- forms ---- */
label { display: block; font-size: 11px; font-weight: 700; color: var(--gold); margin-bottom: .2rem; }
input, textarea, select {
  width: 100%; padding: .42rem .6rem; border: 1px solid #454d52; border-radius: 2px;
  background: #0b0d0f; color: var(--text); font: 13px var(--sans); box-shadow: inset 0 1px 3px #000;
}
input:focus, textarea:focus, select:focus { outline: 1px solid var(--gold); outline-offset: 0; border-color: var(--gold-dim); }
input[type=checkbox] { width: auto; accent-color: var(--gold); }
.check { display: flex; gap: .5rem; align-items: center; font: 13px var(--sans); color: var(--text); }
.field + .field { margin-top: .7rem; }
.form { max-width: 440px; margin: .5rem auto; }
.form h1 { text-align: center; }
.error { color: #e06a6a; min-height: 1.2em; }
button, .button {
  display: inline-flex; align-items: center; justify-content: center; gap: .35rem;
  padding: .38rem .9rem; border-radius: 2px; border: 1px solid #000; outline: 1px solid #66717a; outline-offset: -2px;
  background: linear-gradient(180deg, #3b4247, #1d2124 55%, #121517); color: var(--text);
  font: 700 12px var(--sans); cursor: pointer; white-space: nowrap; text-shadow: 0 1px 0 #000;
}
button:hover, .button:hover { outline-color: var(--gold); color: var(--gold-light); text-decoration: none; }
button.primary, .button.primary { background: linear-gradient(180deg, #8c2222, #4e0f0f 60%, #300909); outline-color: #a33b3b; }
button.primary:hover, .button.primary:hover { outline-color: var(--gold-light); color: #fff; }
button.ghost { background: transparent; outline-color: #3a4045; }
button.small, .button.small { padding: .18rem .55rem; font-size: 11px; }
button:disabled { opacity: .45; cursor: default; }
.secret { display: inline-block; max-width: 100%; overflow-wrap: anywhere; line-height: 1.35; font-family: ui-monospace, Consolas, monospace; font-size: 1.2rem; letter-spacing: .1em; color: var(--gold-light); background: #07080a; padding: .3rem .7rem; border: 1px dashed var(--gold-dim); user-select: all; }
.callout { border-left: 3px solid var(--blood-bright); background: rgba(125, 23, 23, .2); padding: .55rem .85rem; color: var(--text); }
.callout.gold { border-left-color: var(--gold); background: rgba(179, 144, 80, .1); }
.tabs { display: flex; gap: .3rem; flex-wrap: wrap; margin-bottom: .8rem; }
.tabs button { background: transparent; }
.tabs button.on { outline-color: var(--gold); color: var(--gold-light); }
.filters { display: flex; gap: .5rem; flex-wrap: wrap; }
.filters > * { flex: 1 1 140px; width: auto; }
.filters button { flex: 0 0 auto; }
code, pre { font-family: ui-monospace, Consolas, monospace; font-size: 12px; }
pre { background: #07080a; border: 1px solid #2c3236; padding: .7rem; overflow-x: auto; white-space: pre-wrap; color: var(--soft); }
.tag { display: inline-block; margin-left: .4rem; vertical-align: 1px; font: 700 10px var(--sans); color: var(--gold-light); border: 1px solid var(--gold-dim); padding: 0 .35rem; }
.tag.red { color: #f0a0a0; border-color: var(--blood-bright); }

/* ---- toasts ---- */
.toasts { position: fixed; right: 1rem; bottom: 1rem; display: flex; flex-direction: column; gap: .5rem; z-index: 50; max-width: min(380px, calc(100vw - 2rem)); }
.toast { background: rgba(20, 23, 25, .97); border: 1px solid #000; box-shadow: inset 0 0 0 1px #6a747a, 0 4px 14px #000; border-left: 3px solid var(--gold); padding: .6rem .8rem; color: var(--text); animation: rise .25s ease-out; }
.toast.boss { border-left-color: var(--blood-bright); }
.toast.coop, .toast.party_invite { border-left-color: var(--coop); }
.toast strong { display: block; color: var(--gold-light); font-size: 12px; }
.toast .actions { margin-top: .4rem; display: flex; gap: .4rem; }
@keyframes rise { from { transform: translateY(10px); opacity: 0; } to { transform: none; opacity: 1; } }

.prey { color: var(--blood-bright); font-size: 1.05rem; text-shadow: 0 0 10px rgba(192, 57, 43, .6); }

/* ---- smaller screens: the column narrows, the pictures scale down with it ---- */
@media (max-width: 1000px) {
  .frame { width: 100%; padding: 0 8px 1rem; }
  .top { margin: 0 -8px; background-position: 30% top; }
  .search { left: auto; right: 16px; width: min(310px, 45%); top: 18px; }
  .search input { height: 40px; }
  .infobar { justify-content: flex-start; gap: 1.2rem; overflow-x: auto; }
  .strip { background-size: 100% 100%; }
  .banner { background-size: cover; background-position: 20% top; }
  .intro { height: auto; grid-template-columns: 1fr; background-size: 100% 100%; gap: 1rem; }
  .intro-right { padding: 0; }
  .dyk { background-size: cover; }
  .welcome { height: auto; padding: 16px 16px 12px 130px; background-size: auto 111px; background-color: #121314; }
  .icon-tiles { flex-wrap: wrap; justify-content: center; gap: 8px; background-size: 100% 21px; }
  .page { grid-template-columns: 1fr; }
  .side { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); padding-bottom: 8px;
    background-size: 100% 6px, 100% 44px, 196px 40px; background-repeat: no-repeat, no-repeat, repeat; }
  .view { padding: 16px 18px 40px; background-size: 100% 52px, 100% 44px, 100% 40px; }
  .hunter-art { display: none; }
  .grid.two, .grid.three, .grid.aside { grid-template-columns: 1fr; }
  .attrs { grid-template-columns: repeat(2, 1fr); }
  .foot-orn { background-size: 100% 21px; }
}
@media (max-width: 720px) {
  .top { height: 64px; }
  .search { left: 16px; right: 16px; width: auto; top: 12px; }
  .banner { height: auto; min-height: 119px; display: flex; flex-direction: column; align-items: flex-start; padding: 12px 16px; gap: 10px; }
  .logo { position: static; }
  .logo-name { font-size: 34px; }
  .logo-tail { font-size: 25px; }
  .logo-sub { font-size: 18px; white-space: normal; }
  .me { position: static; width: auto; flex-direction: row; flex-wrap: wrap; }
  .me a, .me button { font-size: 17px; }
  .menu-toggle { display: block; width: 100%; outline: 0; border: 0; background: transparent; padding: .55rem; }
  .navbar, .nav { height: auto; }
  .nav { display: none; flex-direction: column; padding: 0 0 .4rem; }
  .nav.open { display: flex; }
  .nav a { text-align: center; }
  .dyk { grid-template-columns: 1fr; height: auto; padding: 10px 0; }
  .dyk > div, .dyk > div:first-child, .dyk > div:last-child { padding: 4px 12px; text-align: center; }
  .dyk .big { font-size: 30px; }
  .dyk .small { font-size: 18px; }
  .trinkets { background-size: cover; height: 50px; }
  .welcome { padding-left: 16px; background-image: none; }
}