/* Key To Heaven website. The look follows the original key2heaven.com
   (scripts/global.css): dark page, tan wrapper, brown panels, peach text. */

:root {
  --peach: #ffe7c9;
  --peach-dim: #d9bf9f;
  --gold: #e8c27a;
  --panel: #251c15;
  --panel-2: #2f241b;
  --panel-3: #3d2e23;
  --panel-head: #4f402f;
  --line: #3e4753;
  --line-dark: #15110d;
  --green: #9be07a;
  --red: #ff8a7a;
  --blue: #9cc8ff;
  --rare-common: #bb9cfa;
  --rare-fine: #98fb98;
  --rare-rare: #ffff00;
  --rare-epic: #afeeee;
}

* { box-sizing: border-box; }

html { background: #19191d; }

body {
  margin: 0;
  background: #19191d url(../img/background.png) repeat-x center top;
  background-attachment: fixed;
  color: var(--peach);
  font-family: Verdana, Geneva, sans-serif;
  font-size: 12px;
  line-height: 1.45;
}

a { color: var(--peach); font-weight: bold; }
a:hover { color: #fff; }
img { border: 0; }
button, input, select { font: inherit; }

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

#header { position: relative; max-width: 1028px; margin: 0 auto; text-align: center; }

/* The big Login button at the top right of the header. */
.login-button {
  position: absolute;
  top: 22px;
  right: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 11px 26px;
  /* 10% see-through, so the header art shows faintly behind it. */
  background: linear-gradient(rgba(138, 106, 66, 0.9), rgba(90, 65, 40, 0.9));
  border: 2px solid #1b130c;
  border-radius: 4px;
  box-shadow: inset 0 1px 0 rgba(255, 231, 201, 0.35), 0 2px 8px rgba(0, 0, 0, 0.6);
  color: #ffe7c9;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-decoration: none;
  text-shadow: 1px 1px 0 #000;
}
.login-button:hover, .login-button:focus-visible {
  background: linear-gradient(rgba(168, 131, 79, 0.9), rgba(110, 80, 49, 0.9));
  color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 231, 201, 0.45), 0 0 12px rgba(255, 200, 120, 0.55);
  outline: none;
}
.login-button[aria-current="page"] { box-shadow: inset 0 -3px 0 var(--gold), 0 2px 8px rgba(0, 0, 0, 0.6); }
/* The key icon (inline SVG in each page), in the text colour with the same shadow. */
.login-key {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
  fill: currentColor;
  filter: drop-shadow(1px 1px 0 #000);
  transform: rotate(-35deg);
}
#logo { padding: 28px 0 10px; }
#logo_img {
  display: block;
  width: 220px;
  height: 207px;
  margin: 0 auto;
  background: url(../img/xlogo.png) center / contain no-repeat;
}

#nav_wrapper {
  display: flex;
  max-width: 1028px;
  margin: 0 auto 12px;
  padding: 0 8px;
}
#main_nav_left, #main_nav_right { flex: 0 0 14px; height: 53px; }
#main_nav_left { background: url(../img/xnav_left.png) no-repeat left top; }
#main_nav_right { background: url(../img/xnav_right.png) no-repeat left top; }
#main_navigation {
  flex: 1;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 0;
  padding: 0;
  list-style: none;
  min-height: 53px;
  background: url(../img/xmain_nav.png) repeat-x left top;
}
#main_navigation li { display: flex; }
#main_navigation li + li::before {
  content: "";
  width: 12px;
  height: 53px;
  background: url(../img/xnav_sep.png) no-repeat;
}
#main_navigation a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 108px;
  height: 53px;
  padding: 0 10px;
  color: #f7cfa2;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 16px;
  font-weight: normal;
  text-decoration: none;
  letter-spacing: 0.3px;
}
#main_navigation a:hover,
#main_navigation a:focus-visible,
#main_navigation a[aria-current="page"] {
  color: #fff3e2;
  text-shadow: 0 0 6px rgba(255, 231, 201, 0.9), 0 0 14px rgba(255, 200, 120, 0.6);
  background: radial-gradient(ellipse at center, rgba(255, 220, 170, 0.18) 0%, rgba(0, 0, 0, 0) 70%);
  outline: none;
}

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

.wrapper {
  max-width: 1000px;
  margin: 0 auto;
  padding: 6px;
  background: #b6a695 url(../img/xwrapper_bg.png) repeat-x center top;
  border: 2px solid #000;
  box-shadow: 0 0 2px 1px #000;
}

.navigation {
  color: #000;
  margin: 2px 2px 8px;
}
.navigation a { color: #000; text-decoration: none; }
.navigation a:hover { text-decoration: underline; color: #000; }

.columns { display: flex; gap: 8px; align-items: flex-start; }
.columns > .main { flex: 1 1 auto; min-width: 0; }
.columns > .side { flex: 0 0 248px; }

/* A titled box: .box > .box-head + .box-body */
.box { margin-bottom: 8px; border: 1px solid #343a42; }
.box-head {
  background: var(--panel-head) url(../img/xportal_ann_header.png) repeat-x center top;
  border: 1px solid var(--line-dark);
  color: var(--peach);
  padding: 7px 9px;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.box-head .sub { font-weight: normal; font-size: 10px; color: var(--peach-dim); }
.box-head .grow { flex: 1; }
.box-body {
  background: var(--panel);
  border-left: 1px solid var(--line);
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding: 10px;
}
.box-foot {
  background: var(--panel-3);
  border: 1px solid var(--line);
  border-top: 0;
  padding: 5px 9px;
  font-size: 10px;
  font-weight: bold;
}

/* News posts (home) */
.post { display: flex; gap: 12px; }
.post-avatar { flex: 0 0 110px; text-align: center; padding-top: 8px; }
.post-avatar img { width: 97px; height: 97px; }
.post-text { flex: 1; }
.post-date { font-weight: normal; font-size: 10px; color: var(--peach-dim); display: block; }

.hero { display: block; width: 100%; height: auto; margin-bottom: 8px; border: 1px solid #000; }

/* Sidebar image buttons from the old site */
.img-button { display: block; width: 230px; height: 42px; margin: 0 auto 8px; background-repeat: no-repeat; }
.img-button span { position: absolute; left: -9999px; }
.btn-discord { background-image: url(../img/xstarted.png); }
.btn-discord:hover { background-image: url(../img/xstarted_h.png); }
.btn-steam { background-image: url(../img/xgameplay.png); }
.btn-steam:hover { background-image: url(../img/xgameplay_h.png); }
.trailer { display: block; width: 232px; height: 162px; margin: 0 auto; background: url(../img/xvideo_prev.png); }
.side-title { height: 27px; width: 126px; margin: 1px 0 1px 2px; }
.side-title.trailer-title { background: url(../img/xtrailer.png); }
.side-title.guides-title { background: url(../img/xguides.png); }
.side .box-head { padding: 0; }

.store-links { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; margin: 10px 0; }
.big { font-size: 18px; font-weight: bold; }

.gallery { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.gallery img { width: 150px; height: 100px; object-fit: cover; border: 1px solid #000; }

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

#footer { max-width: 1028px; margin: 0 auto 30px; padding: 0 8px; }
#footer .lower {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  background: #000 url(../img/xfooter_icon.png) no-repeat left center;
  padding: 10px 12px 10px 44px;
  font-size: 10px;
  color: #989898;
}
#footer .lower strong { color: var(--peach); font-size: 11px; }
#footer a { color: #aaa; }

/* ---- controls ------------------------------------------------------------ */

.btn {
  display: inline-block;
  padding: 5px 14px;
  border: 1px solid #000;
  background: #2b3643;
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
}
.btn:hover, .btn:focus-visible { background: #6f849d; color: #000; }
.btn[disabled] { opacity: 0.5; cursor: default; }
.btn-gold { background: #6b5132; border-color: #1b130c; color: var(--peach); }
.btn-gold:hover { background: #8a6a42; color: #fff; }

.input, .select {
  background: #fff;
  color: #000;
  border: 1px solid #31261e;
  padding: 5px 6px;
}
.input:focus, .select:focus { outline: 2px solid var(--gold); outline-offset: 0; }

.tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.tab {
  padding: 6px 14px;
  border: 1px solid var(--line-dark);
  background: var(--panel-3);
  color: var(--peach);
  font-weight: bold;
  cursor: pointer;
}
.tab:hover { background: #5a4632; }
.tab[aria-selected="true"] {
  background: var(--panel-head) url(../img/xportal_ann_header.png) repeat-x center top;
  color: #fff;
  box-shadow: inset 0 -2px 0 var(--gold);
}

.toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px; }
.toolbar .count { margin-left: auto; color: var(--peach-dim); font-size: 11px; }

.muted { color: var(--peach-dim); font-weight: normal; }
.good { color: var(--green); }
.bad { color: var(--red); }
.hidden { display: none !important; }

.notice { padding: 8px 10px; border: 1px solid #6b5132; background: #33261b; margin-bottom: 8px; }
.notice.error { border-color: #a5161a; background: #3a1a17; color: #ffd6cf; }

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

.table-wrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; color: var(--peach); font-size: 11px; }
table.data th {
  position: sticky;
  top: 0;
  background: #0f0f0f url(../img/xtcat.png) repeat-x;
  color: #fff;
  text-align: left;
  padding: 5px 6px;
  border-bottom: 1px solid #000;
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
}
table.data th.num, table.data td.num { text-align: right; }
table.data th[aria-sort="ascending"]::after { content: " \25B2"; font-size: 9px; }
table.data th[aria-sort="descending"]::after { content: " \25BC"; font-size: 9px; }
table.data th.nosort { cursor: default; }
table.data td { padding: 3px 6px; border-bottom: 1px solid #3a2d22; vertical-align: middle; }
table.data tbody tr.row { cursor: pointer; }
table.data tbody tr.row:nth-child(4n+1) { background: #2a2018; }
table.data tbody tr.row:hover, table.data tbody tr.row.open { background: #4a3826; }
table.data td.icon { width: 40px; padding: 2px 4px; }
tr.detail > td { background: #1d1611; padding: 10px 12px; border-bottom: 2px solid #6b5132; cursor: default; }

/* Sprites from the generated atlases (site/gfx) */
.ico { display: inline-block; width: 32px; height: 32px; background-repeat: no-repeat; image-rendering: pixelated; vertical-align: middle; }
.ico.item { background-image: url(../gfx/items.png); }
.ico.spell { background-image: url(../gfx/spells.png); }
.ico.skill { background-image: url(../gfx/skills.png); }
.ico.npc { width: 64px; height: 64px; background-image: url(../gfx/npcs.png); }
.ico.npc.small { transform: scale(0.5); margin: -16px; }
.ico.empty { background: none; }

.detail-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.detail-grid h4 { margin: 0 0 4px; font-size: 11px; color: var(--gold); text-transform: uppercase; letter-spacing: 0.5px; }
.detail-grid .lines { white-space: pre-line; }
.linklist { margin: 0; padding: 0; list-style: none; }
.linklist li { margin: 1px 0; }
.link { background: none; border: 0; padding: 0; color: var(--peach); font-weight: bold; text-decoration: underline; cursor: pointer; }
.link:hover { color: #fff; }

.quest-text { white-space: pre-line; max-width: 70ch; }

/* ---- account ------------------------------------------------------------- */

.signin { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.signin form { display: grid; gap: 8px; max-width: 320px; }
.signin label { display: grid; gap: 3px; font-weight: bold; }
.steam-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 9px 16px;
  background: linear-gradient(#2a475e, #1b2838);
  border: 1px solid #0e1620;
  color: #c7d5e0;
  font-weight: bold;
  text-decoration: none;
}
.steam-btn:hover { background: linear-gradient(#3b6180, #22384d); color: #fff; }
.steam-btn .dot { width: 18px; height: 18px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff 0 18%, #66c0f4 20% 60%, #1b2838 62%); }

.stat-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px; }
.card { background: var(--panel-2); border: 1px solid #4a3a2b; padding: 6px 8px; }
.card .k { display: block; font-size: 10px; color: var(--peach-dim); text-transform: uppercase; letter-spacing: 0.4px; }
.card .v { font-size: 14px; font-weight: bold; }

.bar { height: 10px; background: #120d09; border: 1px solid #000; margin-top: 3px; }
.bar > span { display: block; height: 100%; background: linear-gradient(#e8c27a, #a0762d); }

.char-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; }
.char-head .name { font-size: 18px; font-weight: bold; color: #fff; }
.pill { display: inline-block; padding: 1px 7px; border: 1px solid #6b5132; background: #33261b; font-size: 10px; font-weight: bold; }
.pill.hc { border-color: #a5161a; color: #ffb3a7; }

.slots { display: grid; grid-template-columns: repeat(auto-fill, 42px); gap: 4px; }
.slot {
  position: relative;
  width: 42px;
  height: 42px;
  padding: 4px;
  background: #140f0b;
  border: 1px solid #5a4632;
  cursor: pointer;
}
.slot:hover, .slot:focus-visible { border-color: var(--gold); outline: none; }
.slot.empty { cursor: default; opacity: 0.45; }
.slot .qty { position: absolute; right: 2px; bottom: 0; font-size: 9px; font-weight: bold; color: #fff; text-shadow: 1px 1px 0 #000, -1px -1px 0 #000; }
.slot.worn { border-color: #8a6a42; box-shadow: inset 0 0 0 1px #8a6a42; }

.equip { display: grid; grid-template-columns: repeat(4, auto); gap: 6px 10px; justify-content: start; }
.equip .eq { display: flex; align-items: center; gap: 6px; min-width: 170px; }
.equip .eq .slot { flex: 0 0 auto; }
.equip .eq .lbl { font-size: 10px; color: var(--peach-dim); text-transform: uppercase; }

.skills { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 3px 12px; }
.skills div { display: flex; justify-content: space-between; border-bottom: 1px dotted #4a3a2b; }
.skills div.zero { opacity: 0.45; }

.tip {
  position: fixed;
  z-index: 50;
  max-width: 300px;
  padding: 8px 10px;
  background: #0f0b08;
  border: 1px solid var(--gold);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.7);
  white-space: pre-line;
  pointer-events: none;
  font-size: 11px;
}
.tip .req { display: block; margin-top: 6px; color: var(--peach-dim); }

.toplist-menu { padding: 4px; }
.toplist-link {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 26px;
  padding: 2px 6px;
  background: none;
  border: 0;
  border-bottom: 1px dotted #4a3a2b;
  color: var(--peach);
  text-align: left;
  cursor: pointer;
}
.toplist-link .ico { flex: 0 0 auto; transform: scale(0.75); margin: -4px; }
.toplist-link .ico.npc.small { transform: scale(0.4); margin: -19px; }
.toplist-link:hover { background: #3a2b1f; color: #fff; }
.toplist-link[aria-current="true"] { background: #4a3826; color: #fff; font-weight: bold; box-shadow: inset 3px 0 0 var(--gold); }
table.data.toplist td { padding: 4px 8px; }
table.data.toplist tr.rank1 td { color: #ffd76a; font-weight: bold; }
table.data.toplist tr.rank2 td { color: #e6e6e6; font-weight: bold; }
table.data.toplist tr.rank3 td { color: #e0a060; font-weight: bold; }

/* Top lists: names open a player card. */
.player-link { background: none; border: 0; padding: 0; color: inherit; font: inherit; font-weight: bold; cursor: pointer; text-decoration: underline dotted; text-underline-offset: 3px; }
.player-link:hover, .player-link:focus-visible { color: #fff; text-decoration-style: solid; outline: none; }
dialog.player-card {
  width: min(640px, calc(100vw - 24px));
  max-height: calc(100vh - 40px);
  padding: 0;
  border: 2px solid #000;
  background: var(--panel);
  color: var(--peach);
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8);
  overflow: auto;
}
dialog.player-card::backdrop { background: rgba(10, 7, 4, 0.7); }
dialog.player-card .box-head { position: sticky; top: 0; z-index: 1; }
dialog.player-card .close { background: none; border: 0; color: var(--peach); font-size: 24px; line-height: 1; cursor: pointer; padding: 0 4px; }
dialog.player-card .close:hover { color: #fff; }
dialog.player-card h3 { margin: 14px 0 6px; font-size: 11px; color: var(--gold); text-transform: uppercase; letter-spacing: 0.5px; }
dialog.player-card .card.gather, dialog.player-card .card.fav { display: flex; align-items: center; gap: 8px; }
dialog.player-card .card.gather .k, dialog.player-card .card.fav .k { display: block; }
dialog.player-card .card.fav .ico.npc { transform: scale(0.75); margin: -10px -12px -10px -14px; }
dialog.player-card .card.fav { grid-column: span 2; }

.quest-list { list-style: none; margin: 0; padding: 0; columns: 2 280px; column-gap: 20px; }
.quest-list li { break-inside: avoid; padding: 1px 0; }
.quest-list .st { display: inline-block; width: 22px; font-weight: bold; }
.st-f { color: #adff2f; }
.st-s { color: #ffa500; }
.st-n { color: #eee8aa; opacity: 0.7; }

/* Narrow screens: the button sits above the logo instead of over it. */
@media (max-width: 640px) {
  .login-button { position: static; margin-top: 12px; padding: 8px 18px; font-size: 15px; }
  #logo { padding-top: 12px; }
}

@media (max-width: 780px) {
  .columns { flex-direction: column; }
  .columns > .side { flex-basis: auto; width: 100%; }
  .signin { grid-template-columns: 1fr; }
  .post { flex-direction: column; }
  .post-avatar { flex-basis: auto; }
  #main_navigation a { min-width: 0; font-size: 14px; padding: 0 8px; }
  #main_navigation li + li::before { display: none; }
  #footer .lower { flex-direction: column; align-items: flex-start; }
  .equip { grid-template-columns: repeat(2, auto); }
}

/* Privacy policy and terms (policy.html) */
.policy h3 { margin: 14px 0 4px; font-size: 12px; color: var(--gold); }
.policy p { margin: 0 0 6px; }