/* 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);
}
/* The big "Play now" button, top left (the Login button's twin, but gold and larger).
   Until the web client is online it carries a "Coming soon" ribbon and is not a link. */
.play-button {
  position: absolute;
  top: 18px;
  left: 16px;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 30px 12px 22px;
  background: linear-gradient(rgba(232, 194, 122, 0.95), rgba(160, 110, 40, 0.95));
  border: 2px solid #1b130c;
  border-radius: 6px;
  box-shadow: inset 0 1px 0 rgba(255, 246, 220, 0.6), 0 2px 10px rgba(0, 0, 0, 0.65);
  color: #2a1a08;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  text-decoration: none;
  text-align: left;
  animation: play-glow 2.4s ease-in-out infinite;
}
a.play-button[href]:hover, a.play-button[href]:focus-visible {
  background: linear-gradient(#f5d596, #b88034);
  outline: none;
}
.play-button.is-soon { cursor: default; }
.play-icon { width: 30px; height: 30px; flex: 0 0 auto; fill: currentColor; filter: drop-shadow(0 1px 0 rgba(255, 240, 210, 0.6)); }
.play-text { display: flex; flex-direction: column; line-height: 1.1; }
.play-main { font-size: 24px; font-weight: bold; letter-spacing: 1px; text-transform: uppercase; text-shadow: 0 1px 0 rgba(255, 240, 210, 0.6); }
.play-sub { font-size: 12px; font-weight: bold; letter-spacing: 0.5px; opacity: 0.85; }
.play-ribbon {
  position: absolute;
  top: -11px;
  right: -16px;
  padding: 3px 10px;
  background: linear-gradient(#e0473a, #a82418);
  border: 1px solid #3a0c07;
  border-radius: 3px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 11px;
  font-weight: bold;
  letter-spacing: 1px;
  text-transform: uppercase;
  text-shadow: 1px 1px 0 #000;
  transform: rotate(8deg);
  white-space: nowrap;
}
.play-button:not(.is-soon) .play-ribbon { display: none; }
@keyframes play-glow {
  0%, 100% { box-shadow: inset 0 1px 0 rgba(255, 246, 220, 0.6), 0 2px 10px rgba(0, 0, 0, 0.65); }
  50% { box-shadow: inset 0 1px 0 rgba(255, 246, 220, 0.6), 0 0 22px rgba(255, 200, 110, 0.85); }
}
@media (prefers-reduced-motion: reduce) {
  .play-button { animation: none; }
}

/* Under the Play button: the phone versions, also coming soon. */
.play-mobile { position: absolute; top: 106px; left: 16px; z-index: 2; display: flex; gap: 16px; }
.play-mobile-btn {
  position: relative;
  display: inline-block;
  padding: 7px 14px;
  border: 2px solid #1b130c;
  border-radius: 5px;
  background: linear-gradient(rgba(107, 90, 63, 0.95), rgba(69, 56, 42, 0.95));
  box-shadow: inset 0 1px 0 rgba(255, 231, 201, 0.3), 0 2px 8px rgba(0, 0, 0, 0.6);
  color: #ffe7c9;
  font-family: "Trebuchet MS", Verdana, sans-serif;
  font-size: 13px;
  font-weight: bold;
  letter-spacing: 0.5px;
  text-decoration: none;
  text-shadow: 1px 1px 0 #000;
  white-space: nowrap;
}
a.play-mobile-btn:hover, a.play-mobile-btn:focus-visible { background: linear-gradient(#8a6a42, #5a4632); color: #fff; outline: none; }
.play-mobile-btn.is-soon { cursor: default; }
.play-mobile-btn .play-ribbon { top: -13px; right: -12px; padding: 1px 6px; font-size: 8px; }
.play-mobile-btn:not(.is-soon) .play-ribbon { display: none; }

#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; }


/* 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; }

/* Medium screens: a smaller Play button, so it stays clear of the logo. */
@media (max-width: 900px) {
  .play-button { padding: 9px 20px 9px 14px; gap: 8px; }
  .play-icon { width: 22px; height: 22px; }
  .play-main { font-size: 18px; }
  .play-sub { display: none; }
  .play-mobile { top: 88px; gap: 14px; }
  .play-mobile-btn { padding: 6px 10px; font-size: 12px; }
}

/* Narrow screens: the buttons sit above the logo instead of over it. */
@media (max-width: 640px) {
  .login-button { position: static; margin-top: 12px; padding: 8px 18px; font-size: 15px; }
  .play-button { position: relative; top: auto; left: auto; margin: 16px 24px 0 0; vertical-align: top; }
  .play-mobile { position: static; justify-content: center; margin-top: 18px; }
  #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; }

/* Players page (toplists.html): the Top Lists / Guilds / Market tabs. */
.player-tabs { margin: 0 0 8px; }
.player-tabs .tab { padding: 9px 22px; font-size: 15px; letter-spacing: 0.5px; text-transform: uppercase; }
.player-tabs .tab[aria-selected="true"] { background: #6b5132; color: #fff; box-shadow: inset 0 -3px 0 var(--gold); }
/* Guild and market menus: name on the left, a count on the right. */
.guild-link { justify-content: space-between; }
.guild-link .count { margin-left: auto; padding: 0 6px; border: 1px solid #6b5132; background: #33261b; font-size: 10px; }
.guild-members .pill, .guild-members td .pill { margin-left: 6px; }
.pill.rank-2 { border-color: var(--gold); color: var(--gold); }
.pill.rank-1 { border-color: #7fa4c9; color: var(--blue); }
.market-search { width: 100%; padding: 6px 8px; border: 1px solid var(--line-dark); background: #1d1610; color: var(--peach); font: inherit; }
.market-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; flex-wrap: wrap; }
.market-sort { padding: 4px 6px; border: 1px solid var(--line-dark); background: #1d1610; color: var(--peach); font: inherit; }
.market-item { display: inline-flex; align-items: center; gap: 6px; cursor: help; }
.market .price { display: inline-flex; align-items: center; justify-content: flex-end; gap: 4px; font-weight: bold; color: var(--gold); }
.market .price .ico { transform: scale(0.75); margin: -4px; }

/* Downloads and Community: a banner from a game screenshot, then big link cards. */
.hero {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 230px;
  margin-bottom: 8px;
  border: 1px solid #000;
  background: #1d1610 center / cover no-repeat;
  image-rendering: pixelated;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}
.hero-downloads { background-image: url(../img/banner-downloads.jpg); }
.hero-community { background-image: url(../img/banner-community.jpg); }
.hero-text {
  width: 100%;
  padding: 50px 22px 18px;
  background: linear-gradient(transparent, rgba(12, 8, 5, 0.92) 55%);
  image-rendering: auto;
}
.hero h1 { margin: 0 0 6px; font-family: "Trebuchet MS", Verdana, sans-serif; font-size: 30px; color: var(--gold); text-shadow: 2px 2px 0 #000; letter-spacing: 0.5px; }
.hero p { margin: 0; max-width: 640px; font-size: 14px; color: var(--peach); text-shadow: 1px 1px 0 #000; }

.link-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; margin: 4px 0 10px; }
.link-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 14px 16px;
  border: 1px solid #4a3826;
  background: linear-gradient(#34281e, #231a13);
  color: var(--peach);
  text-align: center;
  text-decoration: none;
  font-weight: normal;
  transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
}
.link-card:hover, .link-card:focus-visible { transform: translateY(-3px); border-color: var(--gold); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55); outline: none; }
.link-card.featured { border-color: #8a6a42; background: linear-gradient(#433221, #2a1f15); }
.link-card img { width: 72px; height: 72px; object-fit: contain; }
.link-card img.wide { width: 186px; height: 72px; }
.link-card .card-title, .player-card-link .card-title { font-size: 17px; font-weight: bold; color: var(--gold); }
.link-card .card-text { flex: 1; font-size: 12px; line-height: 1.5; color: var(--peach-dim); }
.cta {
  margin-top: 4px;
  padding: 8px 18px;
  border: 2px solid #1b130c;
  border-radius: 4px;
  background: linear-gradient(#e8c27a, #a06e28);
  color: #2a1a08;
  font-weight: bold;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  box-shadow: inset 0 1px 0 rgba(255, 246, 220, 0.6);
}
.link-card:hover .cta { background: linear-gradient(#f5d596, #b88034); }

.soon-note { padding: 10px 14px; border: 1px dashed #8a6a42; background: #2a1f15; text-align: center; font-size: 13px; }
.play-icon-small { color: var(--gold); }
.steps { margin: 4px 0; padding-left: 22px; font-size: 13px; line-height: 1.8; }
.invite { margin: 4px 0 0; text-align: center; color: var(--peach-dim); }

.player-links { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px; }
.player-card-link {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid #4a3826;
  border-left: 4px solid var(--gold);
  background: #2a1f15;
  color: var(--peach-dim);
  text-decoration: none;
  font-weight: normal;
  font-size: 12px;
}
.player-card-link:hover, .player-card-link:focus-visible { background: #3a2c1f; color: var(--peach); outline: none; }

@media (max-width: 640px) {
  .hero { min-height: 170px; }
  .hero h1 { font-size: 22px; }
}
@media (prefers-reduced-motion: reduce) {
  .link-card { transition: none; }
  .link-card:hover { transform: none; }
}

/* Home page: a taller banner with buttons, quick links, the news heading. */
.hero-home { min-height: 300px; background-image: url(../img/banner-home.jpg); }
.hero-side { align-items: stretch; background-position: right center; }
/* Text on a dark fade over the water on the left; the raft and the island stay visible on the right. */
.hero-side .hero-text { display: flex; flex-direction: column; justify-content: center; width: 64%; padding: 26px 24px; background: linear-gradient(90deg, rgba(12, 8, 5, 0.92) 55%, rgba(12, 8, 5, 0.55) 80%, transparent); }
.hero-screenshots { background-image: url(../img/banner-screenshots.jpg); }
.hero-home h1 { font-size: 36px; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
a.cta, span.cta { display: inline-block; position: relative; text-decoration: none; font-family: "Trebuchet MS", Verdana, sans-serif; }
a.cta:hover, a.cta:focus-visible { background: linear-gradient(#f5d596, #b88034); color: #2a1a08; outline: none; }
.cta-dark { background: linear-gradient(#4f402f, #2f241b); color: var(--peach); box-shadow: inset 0 1px 0 rgba(255, 231, 201, 0.25); }
a.cta-dark:hover, a.cta-dark:focus-visible { background: linear-gradient(#6b5132, #3d2e23); color: #fff; }
.home-links { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); margin-bottom: 10px; }
.section-title { margin: 14px 0 8px; padding: 8px 14px; border: 1px solid #000; border-left: 5px solid var(--gold); background: linear-gradient(#4f402f, #2a1f15); box-shadow: 0 2px 6px rgba(0, 0, 0, 0.45); font-family: "Trebuchet MS", Verdana, sans-serif; font-size: 20px; letter-spacing: 0.5px; color: var(--gold); text-shadow: 1px 1px 0 #000; }
.news-new { border-color: #8a6a42; box-shadow: 0 0 12px rgba(232, 194, 122, 0.25); }
.news-new .box-head { background: linear-gradient(#6b5132, #4f402f); }
.news-list { margin: 6px 0 10px; padding-left: 18px; line-height: 1.7; }

/* Screenshots: a grid of pictures and a viewer (js/gallery.js). */
.shots { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; }
.shot { display: block; overflow: hidden; border: 1px solid #000; background: #000; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.5); }
.shot img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; transition: transform 0.2s ease, filter 0.2s ease; filter: brightness(0.9); }
.shot:hover img, .shot:focus-visible img { transform: scale(1.06); filter: brightness(1.05); }
.shot:focus-visible { outline: 2px solid var(--gold); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; padding: 14px; font-size: 14px; font-weight: bold; }
dialog.viewer { max-width: 96vw; max-height: 94vh; padding: 0; border: 2px solid #8a6a42; background: #000; overflow: visible; }
dialog.viewer::backdrop { background: rgba(0, 0, 0, 0.85); }
.viewer-img { display: block; max-width: 94vw; max-height: 88vh; image-rendering: pixelated; }
.viewer-nav, .viewer-close {
  position: absolute;
  border: 1px solid #8a6a42;
  background: rgba(37, 28, 21, 0.85);
  color: var(--gold);
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}
.viewer-nav { top: 50%; width: 44px; height: 64px; transform: translateY(-50%); }
.viewer-prev { left: 8px; }
.viewer-next { right: 8px; }
.viewer-close { top: 8px; right: 8px; width: 38px; height: 38px; font-size: 24px; }
.viewer-nav:hover, .viewer-close:hover { background: #4f402f; color: #fff; }
.viewer-count { position: absolute; bottom: 8px; left: 50%; transform: translateX(-50%); padding: 2px 10px; background: rgba(0, 0, 0, 0.7); color: var(--peach); font-size: 12px; }
@media (max-width: 640px) {
  .hero-home { min-height: 240px; }
  .hero-side .hero-text { width: 100%; background: linear-gradient(90deg, rgba(12, 8, 5, 0.9), rgba(12, 8, 5, 0.6)); }
  .hero-home h1 { font-size: 26px; }
  .shots { grid-template-columns: repeat(2, 1fr); gap: 6px; }
}
@media (prefers-reduced-motion: reduce) {
  .shot img { transition: none; }
  .shot:hover img { transform: none; }
}


/* Narrow screens: the menu does not fit the one-row bar image, so the bar becomes a
   drawn panel that grows with its rows, and the links sit in even columns (4 per row). */
@media (max-width: 880px) {
  #main_nav_left, #main_nav_right { display: none; }
  #main_navigation {
    min-height: 0;
    padding: 4px;
    background: linear-gradient(#34302b, #161412);
    border: 1px solid #4a443c;
    border-radius: 8px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 2px 8px rgba(0, 0, 0, 0.6);
  }
  #main_navigation li { flex: 0 0 25%; justify-content: center; }
  #main_navigation li + li::before { display: none; }
  #main_navigation a { width: 100%; min-width: 0; height: 40px; padding: 0 4px; font-size: 15px; border-radius: 6px; }
}
@media (max-width: 420px) {
  #main_navigation a { font-size: 13px; height: 38px; }
}

/* Wall of Heroes: fallen hardcore characters, and their player cards. */
.skull { display: inline-block; margin-right: 5px; color: #e8e2d6; font-size: 14px; text-shadow: 0 0 4px rgba(255, 60, 40, 0.7), 1px 1px 0 #000; cursor: help; }
.pill.fallen { border-color: #7a1612; background: #2a0f0c; color: #ffb3a7; }
.card-skills { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }

/* My Account: the player-card switch. */
.privacy { display: flex; flex-direction: column; gap: 6px; }
.switch-row { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; }
.switch-row input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.switch { position: relative; flex: 0 0 auto; width: 42px; height: 22px; border: 1px solid #1b130c; border-radius: 12px; background: #45382a; transition: background 0.15s; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #d9bf9f; transition: transform 0.15s; }
.switch-row input:checked + .switch { background: linear-gradient(#e8c27a, #a06e28); }
.switch-row input:checked + .switch::after { transform: translateX(20px); background: #fff3e2; }
.switch-row input:focus-visible + .switch { outline: 2px solid var(--gold); outline-offset: 2px; }
.switch-row input:disabled + .switch { opacity: 0.5; }
.privacy-status { font-size: 12px; }

/* Player card: worn equipment (tooltips as on My Account). */
dialog.player-card .card-equip { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
dialog.player-card .card-equip .eq { min-width: 0; }

/* Player card badges. */
.badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.badge { padding: 3px 9px; border: 1px solid #8a6a42; border-radius: 12px; background: linear-gradient(#4f3a22, #2f2216); color: var(--gold); font-size: 11px; font-weight: bold; cursor: help; text-shadow: 1px 1px 0 #000; }

/* Home page: world numbers under the banner, newest adventurers in the sidebar. */
.world-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px; margin-bottom: 10px; }
.world-stats[hidden] { display: none; }
.world-stat { display: flex; flex-direction: column; align-items: center; padding: 8px 4px; border: 1px solid #4a3826; background: linear-gradient(#34281e, #231a13); color: var(--peach); text-align: center; text-decoration: none; font-weight: normal; }
a.world-stat:hover, a.world-stat:focus-visible { border-color: var(--gold); outline: none; }
.world-stat .v { font-family: "Trebuchet MS", Verdana, sans-serif; font-size: 20px; font-weight: bold; color: var(--gold); text-shadow: 1px 1px 0 #000; }
.world-stat .k { font-size: 10px; text-transform: uppercase; letter-spacing: 0.4px; color: var(--peach-dim); }
.newest li { margin: 3px 0; }
.small-note { margin: 0 0 6px; font-size: 11px; }
.hunters { margin: 0; padding-left: 20px; }
.hunters li { margin: 1px 0; }

/* Header: game server status under the Login button. */
.server-status { position: absolute; top: 84px; right: 16px; z-index: 2; display: flex; gap: 10px; padding: 3px 10px; border: 1px solid #1b130c; border-radius: 12px; background: rgba(20, 15, 10, 0.8); font-size: 11px; font-weight: bold; color: #ffe7c9; text-shadow: 1px 1px 0 #000; }
.server-status .server::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 5px; border-radius: 50%; vertical-align: 0; }
.server-status .up::before { background: #5fd35f; box-shadow: 0 0 6px #5fd35f; }
.server-status .down::before { background: #d9483b; }
@media (max-width: 900px) { .server-status { top: 72px; } }
@media (max-width: 640px) { .server-status { position: static; display: inline-flex; margin: 8px auto 0; } }
.fell-note { margin: 0 0 10px; padding: 6px 10px; border: 1px solid #7a1612; background: #2a0f0c; color: #ffb3a7; font-size: 12px; }

/* Game Info: crafting recipes and the exp calculator */
.needs { display: inline-flex; flex-wrap: wrap; gap: 2px 8px; }
.need { display: inline-flex; align-items: center; gap: 2px; white-space: nowrap; }
.recipe + .recipe { margin-top: 6px; }
.calc-form { display: flex; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 10px; }
.calc-form label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--peach-dim); }
.calc-form .input[type="number"] { width: 90px; }
.calc-form .select { max-width: min(260px, 100%); }
.calc-form label { max-width: 100%; }
.calc-result { line-height: 1.6; }
.calc-big { font-size: 20px; color: var(--gold); }
.calc-kills b { color: var(--gold); }
.calc-kills img, .calc-kills canvas, .calc-kills .sprite { vertical-align: middle; }
table.data.compact td { padding: 2px 6px; }

/* My Account: bestiary and badge progress */
.collection + .collection { margin-top: 14px; }
.collection h4 { margin: 0 0 4px; font-size: 12px; color: var(--gold); }
.collection h4 .muted { font-weight: normal; }
.bestiary { display: flex; flex-wrap: wrap; gap: 3px; margin-top: 8px; }
.beast { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; min-height: 36px;
  background: #1a130d; border: 1px solid #3a2d22; border-radius: 3px; }
.beast:hover, .beast:focus-visible { border-color: var(--gold); }
.beast.missing > * { filter: brightness(0) opacity(0.45); }
details.kills { margin-top: 10px; }
details.kills summary { cursor: pointer; color: var(--gold); }
.badge-progress { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.bp { background: #1a130d; border: 1px solid #3a2d22; padding: 6px 8px; border-radius: 3px; }
.bp.earned { border-color: #a0762d; }
.bp.earned b { color: var(--gold); }
.bp-head { display: flex; justify-content: space-between; gap: 8px; }
.bp .muted { font-size: 10px; margin-top: 3px; }

/* Players: Hall of Fame */
.fame-group + .fame-group { margin-top: 12px; }
.fame-group h4 { margin: 0 0 6px; font-size: 11px; color: var(--gold); text-transform: uppercase; letter-spacing: 0.5px; }
.fame-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; }
.fame { background: #1a130d; border: 1px solid #3a2d22; border-radius: 3px; padding: 6px 8px; }
.fame-list { display: flex; align-items: center; gap: 4px; font-size: 11px; color: var(--peach-dim); }
.fame-who { font-size: 13px; font-weight: bold; margin: 3px 0 2px; }
.fame-who .crown { color: var(--gold); margin-right: 4px; }

/* Header: search box (js/search.js), under the server status */
.site-search { position: absolute; top: 116px; right: 16px; z-index: 5; width: 230px; text-align: left; }
.site-search-input { width: 100%; box-sizing: border-box; padding: 5px 10px; border: 1px solid #1b130c; border-radius: 12px;
  background: rgba(20, 15, 10, 0.85); color: #ffe7c9; font: inherit; font-size: 12px; }
.site-search-input::placeholder { color: #b89c7c; }
.site-search-input:focus { outline: none; border-color: var(--gold); }
.site-search-results { position: absolute; top: calc(100% + 4px); right: 0; width: 300px; max-width: calc(100vw - 24px); max-height: 420px; overflow-y: auto;
  background: #1f1710; border: 1px solid #6b4f2e; border-radius: 4px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.7); padding: 4px 0; }
.site-search-group { padding: 6px 10px 2px; font-size: 10px; font-weight: bold; color: var(--gold); text-transform: uppercase; letter-spacing: 0.5px; }
.site-search-results a { display: flex; align-items: center; gap: 6px; min-height: 26px; padding: 2px 10px; color: var(--peach); text-decoration: none; font-size: 12px; }
.site-search-results a:hover, .site-search-results a.active { background: #4a3826; color: #fff; }
.site-search-results a .name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.site-search-results a .note { color: var(--peach-dim); font-size: 11px; }
.site-search-results .ico.item { transform: scale(0.75); margin: -4px; }
.site-search-results .ico.npc.small { transform: scale(0.4); margin: -19px; }
.site-search-none { padding: 6px 10px; color: var(--peach-dim); font-size: 12px; }
@media (max-width: 900px) { .site-search { top: 102px; width: 190px; } }
@media (max-width: 640px) {
  .site-search { position: relative; top: auto; right: auto; width: auto; max-width: 320px; margin: 10px auto 0; }
  .site-search-results { left: 0; right: 0; width: auto; }
}

/* Home: monster of the day */
.motd-body { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1.3fr) minmax(0, 0.8fr); gap: 14px; align-items: start; }
.motd-pic { display: flex; align-items: center; justify-content: center; width: 96px; height: 96px; background: radial-gradient(#3a2d22, #1a130d); border: 1px solid #3a2d22; border-radius: 50%; }
.motd-pic .ico.npc { transform: translateY(-12px) scale(1.4); }
.motd-facts h3 { margin: 0 0 4px; color: var(--gold); font-size: 18px; }
.motd-facts > div { margin-bottom: 3px; }
.motd-col h4 { margin: 0 0 4px; font-size: 11px; color: var(--gold); text-transform: uppercase; letter-spacing: 0.5px; }
.motd-col .ico.item { transform: scale(0.75); margin: -4px; }
.motd-col p { margin: 0; }
@media (max-width: 900px) { .motd-body { grid-template-columns: auto 1fr; } }
@media (max-width: 480px) { .motd-body { grid-template-columns: 1fr; } .motd-pic { margin: 0 auto; } }

/* Screenshots: captions (web client pictures) */
.shot { position: relative; text-decoration: none; }
.shot-cap { display: block; text-decoration: none; padding: 5px 8px; background: #1a130d; color: var(--peach); font-size: 12px; border-top: 1px solid #000; }
.shots-intro { margin: 0 0 10px; }
.play-ribbon.inline-ribbon { position: static; display: inline-block; margin-left: 10px; transform: rotate(-3deg); vertical-align: middle; }

/* Players: compare two players */
.compare-pick { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.compare-pick .input { flex: 1 1 180px; min-width: 0; }
.compare-pick .vs { color: var(--gold); font-weight: bold; }
.compare-score { margin: 0 0 8px; }
table.data.compare th[scope="row"] { text-align: left; font-weight: normal; color: var(--peach-dim); background: none; }
table.data.compare td.num, table.data.compare thead th.num { width: 38%; }
table.data.compare td.better { color: var(--gold); font-weight: bold; }
table.data.compare td.better::before { content: "\25B2 "; font-size: 9px; }
table.data.compare tr.compare-group th { padding-top: 10px; color: var(--gold); text-align: left; text-transform: uppercase; font-size: 10px; letter-spacing: 0.5px; background: none; }
.compare-item { display: inline-flex; align-items: center; gap: 6px; justify-content: flex-end; }
.slot.mini { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; }
.slot.mini .ico { transform: scale(0.75); margin: -4px; }
.private { font-style: italic; }
.compare-btn { margin-right: 8px; padding: 3px 10px; font-size: 12px; }

/* Home: guess the monster */
.guess-body { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 16px; align-items: start; }
.guess-pic { display: flex; align-items: center; justify-content: center; width: 120px; height: 120px; border-radius: 50%;
  background: radial-gradient(#4a3826, #1a130d); border: 1px solid #3a2d22; }
.guess-pic .ico.npc { transform: translateY(-14px) scale(1.7); filter: brightness(0) drop-shadow(0 0 1px #e8c27a); transition: filter 0.6s ease; }
.guess-pic.solved .ico.npc { filter: none; }
.guess-form { display: flex; gap: 8px; }
.guess-form .input { flex: 1; min-width: 0; }
.guess-note { margin: 4px 0 6px; }
.guess-tries { margin: 0 0 6px; padding-left: 20px; }
.guess-tries .mark { font-weight: bold; }
.guess-tries .right .mark { color: #5fd35f; }
.guess-tries .wrong .mark { color: #d9483b; }
.guess-hints { margin: 0 0 6px; padding-left: 18px; color: var(--gold); }
.guess-result p { margin: 4px 0; }
.guess-result .win { color: #5fd35f; font-weight: bold; }
.guess-result .lose { color: #ffb3a7; font-weight: bold; }
.guess-result a { font-size: 16px; font-weight: bold; }
@media (max-width: 480px) { .guess-body { grid-template-columns: 1fr; } .guess-pic { margin: 0 auto; } }

/* Players: the player card as a picture */
dialog.picture-dialog { max-width: min(640px, calc(100vw - 24px)); }
.card-picture { display: block; width: 100%; height: auto; border: 1px solid #000; }
.picture-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.picture-actions a.btn { text-decoration: none; }

/* Game Info: character planner */
.planner h4 { margin: 14px 0 6px; color: var(--gold); font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px; }
.planner h5 { margin: 10px 0 4px; color: var(--gold); font-size: 11px; }
.planner .small { font-size: 11px; }
.planner-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.planner-head { display: flex; flex-wrap: wrap; gap: 8px 14px; margin-bottom: 10px; }
.planner-head label { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--peach-dim); }
.planner-head .input { width: 90px; }
.planner-pools { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.planner-pools .card.over { border-color: #d9483b; }
.planner-pools .card.over .v { color: #ffb3a7; }
.planner-warn { margin: 8px 0 0; padding-left: 18px; color: #ffb3a7; }
.planner-warn:empty { display: none; }
.planner-cols { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; }
.planner-stat { display: flex; align-items: center; gap: 4px; margin: 3px 0; }
.planner-stat .name { width: 90px; }
.planner-stat .input { width: 70px; }
.planner-stat .btn { padding: 2px 8px; min-width: 28px; }
.planner-total { margin-left: 6px; color: var(--gold); white-space: nowrap; }
.planner-equip { display: grid; gap: 4px; }
.planner-slot { display: grid; grid-template-columns: 70px 30px minmax(0, 1fr); align-items: center; gap: 6px; }
.planner-slot .lbl { color: var(--peach-dim); font-size: 11px; }
.planner-slot .select { width: 100%; min-width: 0; }
.planner-slot.locked .select, .planner-skill.locked { outline: 1px solid #d9483b; }
.planner-results { background: #1a130d; border: 1px solid #3a2d22; border-radius: 3px; padding: 4px 12px 8px; }
.planner-line { display: flex; justify-content: space-between; gap: 10px; padding: 2px 0; border-bottom: 1px solid #2a2018; }
.planner-line b { color: var(--peach); }
.planner-line.strong b, .planner-line.strong span { color: var(--gold); }
.planner-skill-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 4px 12px; }
.planner-skill { display: flex; align-items: center; gap: 6px; padding: 1px 2px; }
.planner-skill .ico { transform: scale(0.75); margin: -4px; }
.planner-skill .name { flex: 1; min-width: 0; }
.planner-skill .input { width: 58px; }
@media (max-width: 700px) { .planner-cols { grid-template-columns: 1fr; } }

/* Header: the server status as a realm picker (js/header.js) */
.realm-picker { padding: 0; }
.realm-current { display: inline-flex; align-items: center; gap: 10px; padding: 3px 10px; border: 0; background: none; color: inherit;
  font: inherit; font-weight: bold; cursor: pointer; border-radius: 12px; }
.realm-current:hover, .realm-current:focus-visible, .realm-current[aria-expanded="true"] { background: rgba(107, 81, 50, 0.6); outline: none; }
.realm-arrow { font-size: 12px; line-height: 1; padding-left: 9px; border-left: 1px solid #6b4f2e; color: var(--gold); text-shadow: 1px 1px 0 #000; }
.realm-current:hover .realm-arrow, .realm-current[aria-expanded="true"] .realm-arrow { color: #fff; }
.server-status .unknown::before { background: #888; }
.realm-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 6; min-width: 250px; padding: 6px 0; text-align: left;
  background: #1f1710; border: 1px solid #6b4f2e; border-radius: 4px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.7); text-shadow: none; }
.realm-menu-title { padding: 2px 12px 6px; font-size: 10px; color: var(--gold); text-transform: uppercase; letter-spacing: 0.5px; }
.realm-option { display: grid; grid-template-columns: 16px 1fr auto; align-items: center; gap: 6px; width: 100%; padding: 6px 12px;
  border: 0; background: none; color: var(--peach); font: inherit; font-size: 12px; text-align: left; cursor: pointer; }
.realm-option:hover, .realm-option:focus-visible { background: #4a3826; color: #fff; outline: none; }
.realm-option.is-current .realm-name { color: var(--gold); }
.realm-check { color: var(--gold); }
.realm-servers { display: inline-flex; gap: 8px; font-size: 11px; }
.realm-menu-note { padding: 6px 12px 2px; font-size: 10px; font-weight: normal; color: var(--peach-dim); white-space: normal; }
@media (max-width: 640px) { .realm-picker { position: relative; } .realm-menu { right: auto; left: 50%; transform: translateX(-50%); } }
.server-status.realm-picker { z-index: 7; } /* above the search box when the menu opens */

/* Home: guess the monster, the name field with its own list (js/guess.js) */
.guess-field { position: relative; flex: 1; min-width: 0; display: flex; }
.guess-field .input { flex: 1; min-width: 0; padding-right: 40px; }
.guess-browse { position: absolute; top: 1px; right: 1px; bottom: 1px; width: 34px; border: 0; border-left: 1px solid #6b4f2e;
  background: #3a2b1d; color: var(--gold); font-size: 17px; line-height: 1; cursor: pointer; border-radius: 0 3px 3px 0; }
.guess-browse:hover, .guess-browse:focus-visible { background: #4a3826; color: #fff; outline: none; }
.guess-list { position: absolute; top: calc(100% + 2px); left: 0; right: 0; z-index: 4; max-height: 260px; overflow-y: auto; margin: 0; padding: 4px 0;
  list-style: none; background: #1f1710; border: 1px solid #6b4f2e; border-radius: 3px; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.7); }
.guess-list li { padding: 4px 10px; cursor: pointer; color: var(--peach); font-size: 12px; }
.guess-list li:hover, .guess-list li.active { background: #4a3826; color: #fff; }
.guess-list li.guessed { color: var(--peach-dim); text-decoration: line-through; }
.guess-list li.none { color: var(--peach-dim); cursor: default; }
.guess-list li.none:hover { background: none; }