/* The game's look for the website: the palette of tools/art/lib.lua (L.PAL) and the interface pieces of
   tools/art/ui.lua (carved-wood panels with a gold trim, raised blue buttons, sunk steel fields), drawn at 2x
   like the game draws its art. Fonts follow client/main.cpp: Georgia bold titles, Trebuchet bold labels.
   Loaded after style.css and wiki.css; layout stays there, this file only changes how things look. */

:root {
  color-scheme: dark;
  /* L.PAL */
  --outline: #221c24;
  --parchment: #f4efe6;
  --stone-1: #3a3540; --stone-2: #4a4650; --stone-3: #6d6873; --stone-4: #9690a0; --stone-5: #c4bfcc;
  --wood-1: #3a2420; --wood-2: #4a2f25; --wood-3: #6e4632; --wood-4: #93613f; --wood-5: #b88554;
  --gold-1: #6e4a1e; --gold-2: #a8702a; --gold-3: #d99a35; --gold-4: #f2c14e; --gold-5: #fbe58a;
  --blue-1: #1f2547; --blue-2: #2c3a63; --blue-3: #3f5592; --blue-4: #5f7dbf; --blue-5: #8fb0e0;
  --steel-1: #2e2f3f; --steel-2: #4f5266;
  --red-1: #4a1e2a; --red-3: #9c3a36; --red-4: #c95a45; --red-5: #e08a5c;
  --purple-2: #4a2f6e; --purple-3: #6a3f8f; --purple-5: #c79ae0;
  --leaf-3: #2f6a3e; --leaf-5: #6eae4a;

  /* the variables style.css and wiki.css are written against */
  --bg: #2c2832;          /* sunk areas inside a panel */
  --surface: var(--stone-1);
  --text: var(--parchment);
  --muted: #b3adbd;
  --border: var(--stone-2);
  --accent: var(--gold-4);
  --accent-text: var(--outline);
  --error-bg: var(--red-1);
  --error: #f4b3a0;
  --warrior: var(--red-3);
  --sura: var(--purple-3);
  --shaman: var(--leaf-3);
  --ninja: var(--steel-2);
  --ok: var(--leaf-3);
  --bad: var(--red-3);

  --title-font: Georgia, "Times New Roman", serif;
  --label-font: "Trebuchet MS", "Segoe UI", sans-serif;
  --px: 2px; /* one art pixel at the game's 2x */
}

/* ---------------------------------------------------------------- page */

body {
  background-color: #17131b;
  background-image:
    radial-gradient(ellipse 80% 60% at 50% 0%, rgba(63, 85, 146, .22), transparent 70%),
    radial-gradient(ellipse 60% 50% at 50% 110%, rgba(110, 74, 30, .25), transparent 70%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .015) 0 2px, transparent 2px 4px);
  background-attachment: fixed;
  color: var(--text);
  font-family: var(--label-font);
}
::selection { background: var(--gold-3); color: var(--outline); }
a { color: var(--gold-4); text-underline-offset: 2px; }
a:hover { color: var(--gold-5); }
h1, h2, h3, .brand { font-family: var(--title-font); font-weight: 700; color: var(--gold-4); }
h1 { text-shadow: var(--px) var(--px) 0 var(--outline); letter-spacing: .01em; }
.muted { color: var(--muted); }
code, kbd {
  font-size: .88em;
  padding: .05rem .35rem;
  background: var(--steel-1);
  border: var(--px) solid var(--outline);
  color: var(--gold-5);
}
kbd { box-shadow: inset 0 calc(-1 * var(--px)) 0 var(--steel-2); font-family: var(--label-font); font-weight: 700; }
.sprite { image-rendering: pixelated; }

/* ---------------------------------------------------------------- top bar */

.topbar { padding-top: 1.1rem; padding-bottom: 1.1rem; }
.brand {
  font-size: 1.7rem;
  letter-spacing: .04em;
  color: var(--gold-4);
  text-shadow: 0 var(--px) 0 var(--gold-1), var(--px) calc(2 * var(--px)) 0 var(--outline);
}
.brand:hover { color: var(--gold-5); }
.nav > a, .who {
  font-weight: 700;
  color: var(--parchment);
  text-decoration: none;
  text-shadow: var(--px) var(--px) 0 var(--outline);
}
.nav > a:hover, .who:hover { color: var(--gold-4); }
button.link { color: var(--stone-5); font-weight: 700; }
button.link:hover { color: var(--gold-4); }

/* ---------------------------------------------------------------- panels: ui.lua "panel" and "panel_dark" */

/* carved wood, lit from the top-left, then a gold trim and a dark stone inside */
.card, .wiki-main, .admin-page {
  background: var(--stone-1);
  border: var(--px) solid;
  border-color: var(--wood-5) var(--wood-2) var(--wood-2) var(--wood-5);
  border-radius: calc(2 * var(--px));
  box-shadow:
    0 0 0 var(--px) var(--outline),
    inset calc(2 * var(--px)) calc(2 * var(--px)) 0 var(--wood-4),
    inset calc(-2 * var(--px)) calc(-2 * var(--px)) 0 var(--wood-3),
    inset calc(3 * var(--px)) calc(3 * var(--px)) 0 var(--gold-4),
    inset calc(-3 * var(--px)) calc(-3 * var(--px)) 0 var(--gold-2),
    inset 0 0 0 calc(4 * var(--px)) var(--outline),
    0 calc(4 * var(--px)) 0 rgba(0, 0, 0, .35);
}
.card { padding: 2rem; }
.wiki-main, .admin-page { padding: 2rem 2.25rem 2.25rem; }
.admin-page { margin-bottom: 2rem; }
.admin-page .item-editor fieldset { background: #2f2b35; }

/* slim frame for things that sit next to a panel */
.side, .stage, .notice, .preview, .wiki-title-icon, .stats div, .gear li, details.confirm form, .item-editor fieldset, .tile {
  background: var(--stone-1);
  border: var(--px) solid var(--outline);
  border-radius: var(--px);
  box-shadow: inset var(--px) var(--px) 0 var(--stone-3), inset calc(-1 * var(--px)) calc(-1 * var(--px)) 0 var(--steel-1);
}
.stats div, .gear li, .wiki-title-icon { background: #2f2b35; }
.stage { background: var(--stage-bg); box-shadow: 0 0 0 var(--px) var(--wood-2); }
.preview { padding: 1rem 1.25rem; }
.item-editor legend { font-family: var(--title-font); color: var(--gold-4); }

/* gold divider lines under headings, like the game's window titles */
.wiki-main h2 {
  border-bottom: var(--px) solid var(--gold-2);
  box-shadow: 0 var(--px) 0 var(--outline);
  padding-bottom: .35rem;
}
.facts div, .details div, table.data td { border-color: var(--stone-2); }
.facts dt, .details dt, .stats dt { color: var(--stone-5); font-weight: 700; }
.stats dd { color: var(--gold-4); font-family: var(--title-font); text-shadow: var(--px) var(--px) 0 var(--outline); }

/* ---------------------------------------------------------------- wiki side menu: ui.lua "tab" / "tab_active" */

.wiki-side-label { color: var(--gold-3); font-family: var(--label-font); }
.wiki-side nav a { color: var(--parchment); font-weight: 700; border: var(--px) solid transparent; border-radius: var(--px); }
.wiki-side nav a:hover {
  background: var(--stone-2);
  border-color: var(--outline);
  box-shadow: inset 0 var(--px) 0 var(--stone-4);
}
.wiki-side nav a.wiki-new { color: var(--gold-4); }
.crumbs, .crumbs a { color: var(--stone-4); }

/* ---------------------------------------------------------------- tables */

table.data th {
  color: var(--gold-3);
  font-family: var(--label-font);
  font-weight: 700;
  border-bottom: var(--px) solid var(--gold-2);
}
table.data tbody tr:nth-child(even) td { background: rgba(0, 0, 0, .12); }
table.data tbody tr:hover td { background: rgba(242, 193, 78, .07); }
table.data tr.mark td { background: rgba(242, 193, 78, .14); color: var(--gold-5); }

/* ---------------------------------------------------------------- buttons: ui.lua "button" (raised plate) */

button, a.button, .button {
  font-family: var(--label-font);
  font-weight: 700;
  color: var(--parchment);
  text-shadow: var(--px) var(--px) 0 var(--outline);
  background: var(--blue-3);
  border: var(--px) solid var(--outline);
  border-radius: calc(2 * var(--px));
  box-shadow:
    inset 0 var(--px) 0 var(--blue-5),
    inset var(--px) 0 0 var(--blue-5),
    inset 0 calc(-2 * var(--px)) 0 var(--blue-2),
    inset calc(-1 * var(--px)) 0 0 var(--blue-2);
}
button:hover, a.button:hover, .button:hover {
  color: #fff;
  background: var(--blue-4);
  box-shadow:
    inset 0 var(--px) 0 var(--parchment),
    inset var(--px) 0 0 var(--parchment),
    inset 0 calc(-2 * var(--px)) 0 var(--blue-3),
    inset calc(-1 * var(--px)) 0 0 var(--blue-3);
}
button:active, a.button:active, .button:active {
  background: var(--blue-2);
  box-shadow: inset 0 calc(2 * var(--px)) 0 var(--blue-1);
  transform: translateY(var(--px));
}
button:focus-visible, a.button:focus-visible, a:focus-visible { outline: var(--px) solid var(--gold-4); outline-offset: var(--px); }

/* quiet buttons: ui.lua "tab" (stone plate) */
.ghost, button.ghost, .tabs button, .stage-tools button, button.player {
  color: var(--parchment);
  background: var(--stone-2);
  box-shadow: inset 0 var(--px) 0 var(--stone-4), inset 0 calc(-2 * var(--px)) 0 var(--stone-1);
}
.ghost:hover, button.ghost:hover, .tabs button:hover, .stage-tools button:hover, button.player:hover {
  background: var(--stone-3);
  box-shadow: inset 0 var(--px) 0 var(--stone-5), inset 0 calc(-2 * var(--px)) 0 var(--stone-2);
}
/* the chosen one: ui.lua "tab_active" (gold plate) */
.tabs button[aria-selected="true"], button.player.active {
  color: var(--outline);
  text-shadow: none;
  background: var(--gold-3);
  border-color: var(--outline);
  box-shadow: inset 0 var(--px) 0 var(--gold-5), inset 0 calc(-2 * var(--px)) 0 var(--gold-2);
}
button.player.active .pmeta { color: var(--wood-2); }
button.danger { background: var(--red-3); box-shadow: inset 0 var(--px) 0 var(--red-5), inset 0 calc(-2 * var(--px)) 0 var(--red-1); }
button.danger:hover { background: var(--red-4); }
button.link, button.link:hover, button.link:active {
  background: none; border: 0; box-shadow: none; text-shadow: none; transform: none;
}

/* ---------------------------------------------------------------- fields: ui.lua "input" / "input_focus" */

form input, form select, .item-editor select, .editor textarea, .wiki-search input, .search-big input {
  color: var(--parchment);
  background: var(--steel-1);
  border: var(--px) solid var(--outline);
  border-radius: var(--px);
  box-shadow: inset 0 var(--px) 0 var(--outline), inset 0 calc(-1 * var(--px)) 0 var(--steel-2);
}
form input:focus, form select:focus, .item-editor select:focus, .editor textarea:focus, .wiki-search input:focus, .search-big input:focus {
  outline: none;
  border-color: var(--gold-4);
}
form input:disabled { color: var(--stone-4); background: #26262f; }
input[type="checkbox"] { accent-color: var(--gold-3); }
form label, .field-label { color: var(--stone-5); font-weight: 700; }
::placeholder { color: var(--stone-3); }

/* ---------------------------------------------------------------- small pieces */

.error {
  background: var(--red-1);
  color: var(--error);
  border: var(--px) solid var(--outline);
  box-shadow: inset 0 var(--px) 0 var(--red-3);
  border-radius: var(--px);
}
.notice { color: var(--parchment); }
.tag { border-radius: var(--px); border: var(--px) solid var(--outline); background: var(--stone-2); color: var(--stone-5); }
.tag.boss { background: var(--red-3); color: var(--parchment); }
.tag.riftstone { background: var(--purple-3); color: var(--parchment); }
.pill { border-radius: var(--px); border: var(--px) solid var(--outline); background: var(--stone-2); color: var(--stone-5); }
.pill.ok { background: var(--leaf-3); color: var(--parchment); }
.pill.bad { background: var(--red-3); color: var(--parchment); }
.count { border-radius: var(--px); background: var(--steel-1); color: var(--gold-4); }

/* bars like the HUD's: dark trough, a shine on top */
.hpbar { height: 6px; border-radius: 0; background: var(--outline); box-shadow: 0 0 0 1px var(--outline); }
.hpbar span { background: linear-gradient(#e05a5a 0 35%, var(--red-3) 35%); }
.manabar span { background: linear-gradient(var(--blue-5) 0 35%, var(--blue-3) 35%); }

/* class badge on the account page: the round emblem from assets/ui (class_<id>) when there is one */
.badge { border: var(--px) solid var(--gold-2); box-shadow: 0 0 0 var(--px) var(--outline), inset 0 0 0 var(--px) var(--gold-4); font-family: var(--title-font); }
.badge.emblem { width: auto; height: auto; background: none; border: 0; box-shadow: none; }

.tooltip, .follow, .overlay { border: var(--px) solid var(--outline); border-radius: var(--px); box-shadow: inset var(--px) var(--px) 0 var(--stone-3); }
.tooltip, .follow { background: rgba(58, 53, 64, .95); color: var(--parchment); }
.tt-title { color: var(--gold-4); }

.prose blockquote { border-left: calc(2 * var(--px)) solid var(--gold-2); color: var(--stone-5); }
.prose th, .prose td { border-color: var(--stone-2); }
.prose th { background: var(--steel-1); color: var(--gold-3); }
.prose pre { background: var(--steel-1); border: var(--px) solid var(--outline); }
a.missing { color: var(--red-5); }

@media (max-width: 860px) {
  .wiki-side nav a { background: var(--stone-1); border-color: var(--outline); }
  .wiki-main { padding: 1.5rem 18px; }
}
@media (prefers-reduced-motion: reduce) {
  button:active, a.button:active, .button:active { transform: none; }
}