/* HiveDash's simpler, higher contrast community theme. */
:root {
  --gold: #65c9a9;
  --gold-bright: #c0f1dd;
  --amber: #2d806c;
  --ink: #111715;
  --muted: #b6c2bb;
  --line: #3d4b45;
  --panel: #1b2320;
  --panel-light: #242e29;
  font-size: 16px;
}

body {
  color: #eef3ef;
  background: #0b0b12;
}

/* Deep violet ambient light behind the existing leaderboard panel. */
.site-wrap { position: relative; isolation: isolate; }
.site-wrap::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 260px 0 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 18% 36%, rgb(95 48 164 / 31%), transparent 34%),
    radial-gradient(ellipse at 78% 24%, rgb(61 55 142 / 24%), transparent 34%),
    radial-gradient(ellipse at 61% 78%, rgb(111 46 139 / 23%), transparent 38%),
    linear-gradient(135deg, #101019, #14111d 48%, #0b0c13);
  filter: blur(18px);
  animation: violet-drift 34s ease-in-out infinite alternate;
  transform: translate3d(0,0,0);
}
@keyframes violet-drift {
  from { transform: translate3d(-2%, -1%, 0) scale(1); }
  to { transform: translate3d(2%, 1%, 0) scale(1.04); }
}
@media (prefers-reduced-motion: reduce) {
  .site-wrap::before { animation: none; }
}

.masthead {
  border-bottom: 1px solid #3c4943;
  background: #141a17;
}

.masthead-art {
  filter: saturate(.68) brightness(.72);
}

.masthead-shade {
  background: linear-gradient(90deg, rgb(10 15 13 / 80%), rgb(10 15 13 / 28%) 55%, rgb(10 15 13 / 68%)),
    linear-gradient(0deg, #121816 0%, rgb(18 24 22 / 8%) 58%, rgb(18 24 22 / 20%));
}

.brand { color: #f1f6f3; }
.brand-bee {
  border: 1px solid #4b927b;
  border-radius: 10px;
  background: #23634f;
  box-shadow: 0 3px 12px #0005;
  color: #effaf4;
  font-size: 23px;
  font-weight: 800;
}
.brand-name span { color: #79d5b5; }

.join-button {
  border: 1px solid #477765;
  border-radius: 6px;
  outline: 0;
  background: #1c3028;
  box-shadow: 0 3px 12px #0005;
  color: #e9f6f0;
}
.join-button:hover { background: #264236; }
.join-button small { color: #b1d7c6; }

.main-nav {
  overflow: hidden;
  border: 1px solid #46544d;
  border-radius: 7px;
  background: #202a25;
  box-shadow: 0 5px 18px #0007;
}
.main-nav a {
  border-right-color: #39463f;
  color: #d9e3dc;
  font-size: 12px;
}
.main-nav a:hover,
.main-nav a.selected {
  background: #2a3b32;
  color: #f3fbf7;
}
.main-nav a.selected { box-shadow: inset 0 -2px 0 #65c9a9; }

.content { color: #eef3ef; }
.heading-copy p { color: #bdc7c1; font-size: 14px; }
.breadcrumb { color: #b3beb7; font-size: 11px; }
.breadcrumb a { color: #8fd2b7; }

.search-box {
  border-color: #46544d;
  border-radius: 7px;
  background: #1b2420;
}
.search-icon { color: #8fd7ba; }
.search-box input { color: #f1f7f3; font-size: 14px; }
.search-box input::placeholder { color: #b0bbb4; }
.search-box button#search-submit {
  width: 36px;
  height: 31px;
  flex-basis: 36px;
  border-radius: 5px;
  background: #29463a;
  color: #c9f0de;
  font-size: 21px;
}
.search-box button#search-submit:hover { background: #35604d; }
.search-suggestions {
  border-color: #48584f;
  border-radius: 8px;
  background: #1b2420;
  box-shadow: 0 12px 28px #0009;
}
.search-option { color: #e6eee9; font-size: 13px; }
.search-option:hover,
.search-option[aria-selected="true"] { background: #293b32; color: #c4eedb; }
.search-option small { color: #a5b7ab; font-size: 9px; }
.search-message { color: #bdc9c1; font-size: 11px; }

.leaderboard-card {
  border: 1px solid #46544d;
  border-radius: 11px;
  background: #1b211f;
  box-shadow: 0 10px 30px #0005;
}
.leaderboard-card:before { border-color: #303b36; }
.card-ornament { display: none; }
.card-heading,
.filter-area,
.board-caption { border-color: #39443f; }
.heading-kicker { color: #a4c4b3; font-size: 11px; letter-spacing: .12em; }
.card-heading h2 { color: #eff7f2; font-size: 21px; letter-spacing: .08em; }
.api-status { color: #c0cbc4; font-size: 10px; }

.period { border-color: #46534b; background: #161c19; color: #cad4cd; font-size: 13px; }
.period:hover { border-color: #72b99d; color: #f3faf6; }
.period.active {
  transform: none;
  border-color: #58967d;
  background: #2a4338;
  box-shadow: none;
  color: #d8f3e6;
}
.section-label { color: #b9c4bd; font-size: 11px; }
.section-label span { background: #26372e; color: #a5e0c3; }
.game {
  min-height: 35px;
  border-color: #3d4943;
  border-radius: 6px;
  background: #171e1b;
  color: #cbd5cf;
  font-size: 12px;
}
.game:hover { border-color: #6c9c84; background: #26362e; color: #f0f8f3; }
.game.active { border-color: #5b9b80; background: #294239; box-shadow: inset 0 0 0 1px #395d4b; color: #d5f1e2; }
.game-emoji,
.game.active .game-emoji { color: #9adbbc; }

.stat-picker {
  display: flex;
  align-items: end;
  gap: 18px;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #39443f;
}
.stat-picker label { display: grid; gap: 7px; min-width: min(280px, 100%); }
.stat-picker .section-label { margin: 0; }
.stat-picker select {
  width: 100%; min-height: 44px; padding: 0 40px 0 13px;
  appearance: none; border: 1px solid #587362; border-radius: 7px;
  color: #f0f7f2; background-color: #1b2821;
  background-image: linear-gradient(45deg, transparent 50%, #b8e5ce 50%), linear-gradient(135deg, #b8e5ce 50%, transparent 50%);
  background-position: calc(100% - 19px) 18px, calc(100% - 13px) 18px;
  background-size: 6px 6px, 6px 6px; background-repeat: no-repeat;
  font: 700 16px Arial, Helvetica, sans-serif; cursor: pointer;
}
.stat-picker select:focus-visible { outline: 3px solid #99d7b7; outline-offset: 2px; }
.stat-picker select option { color: #f5f7f5; background: #18211c; }
.stat-picker p { margin: 0 0 3px; max-width: 610px; color: #c3ccc6; font-size: 14px; line-height: 1.45; }

.chosen-game-icon { border-color: #486052; background: #26382e; color: #b4e7ce; }
.chosen-game small { color: #b5c1b9; font-size: 10px; }
.chosen-game strong { color: #f1f7f3; font-size: 15px; }
.period-chip { border-color: #496657; background: #24382e; color: #c4ecd8; font-size: 10px; }
.period-note { color: #bec8c1; font-size: 11px; }
.history-toggle {
  height: 34px;
  border-color: #4a5b50;
  background: #202c25;
  color: #c8e9d7;
  font-size: 10px;
}
.history-toggle:hover,
.history-toggle[aria-expanded="true"] { border-color: #75b79a; background: #2b4035; color: #e1f6ea; }
.history-toggle > span { font-size: 9px; }
.refresh-button { width: 32px; height: 32px; border-color: #46554d; background: #202a25; color: #b4e3cc; font-size: 20px; }
.refresh-button:hover { background: #2d4035; }

.archive-panel { border-color: #3b4841; background: #1d2722; }
.archive-intro h3 { color: #f0f7f2; font-size: 19px; }
.archive-intro p { color: #c1cbc4; font-size: 12px; }
.archive-mode-button { border-color: #46524a; background: #171e1a; color: #c6d0ca; font-size: 11px; }
.archive-mode-button:hover { border-color: #72a78d; color: #edf7f0; }
.archive-mode-button.active { border-color: #5a997d; background: #2a4338; color: #d7f1e4; }
.archive-controls label > span { color: #c0c9c1; font-size: 10px; }
.archive-controls input,
.archive-controls select { height: 40px; border-color: #4c5b51; background: #151c19; color: #edf3ef; font-size: 13px; }
.archive-controls input:focus,
.archive-controls select:focus { border-color: #7bc6a7; box-shadow: 0 0 0 2px #7bc6a91c; }
.archive-load { height: 40px; border: 1px solid #588e75; background: #2b5a46; box-shadow: none; color: #e4f5eb; font-size: 10px; }
.archive-load:hover { transform: translateY(-1px); background: #376b54; filter: none; }
.archive-footnote { color: #b6c1b9; font-size: 11px; }

.table-head,
.row { grid-template-columns: 62px minmax(190px, 1fr) minmax(130px, 190px) minmax(130px, 165px); }
.table-head { height: 43px; background: #293a33; color: #dfebe4; font-size: 11px; letter-spacing: .09em; }
.row { min-height: 60px; border-bottom-color: #303a35; background: #171d1a; }
.row:nth-child(even) { background: #1e2621; }
.row:hover { background: #29352e; }
.rank { font-size: 13px; }
.rank-medal { background: #2a3a31; color: #b2ddc5; font-size: 11px; }
.rank.top .rank-medal { background: #3d5e4b; color: #e4f5e9; }
.head-wrap { width: 36px; height: 36px; flex-basis: 36px; box-shadow: 0 0 0 1px #4b6254; }
.player { gap: 12px; }
.player-name { font-size: 14px; }
.player-name,
.player-name-text,
.player-name.profile-trigger { color: #f5f8f6 !important; opacity: 1 !important; visibility: visible !important; filter: none !important; -webkit-text-fill-color: #f5f8f6 !important; forced-color-adjust: none; }
.player-name-text { display: inline-block; }
.player-sub { color: #aebbb2; font-size: 10px; }
.value { color: #e3eee6; font-size: 13px; }
.value.gain { color: #b2e4b7; }
.empty-state,
.loading { font-size: 13px; }
.collecting strong,
.error-state strong { font-size: 15px; }
.collecting > span:not(.collecting-icon),
.error-state span { font-size: 12px; }
.collecting small { font-size: 10px; }
.table-footer { color: #b1bdb5; font-size: 10px; letter-spacing: .025em; }
.table-footer a { color: #8ed9b8; }
.page-footer { color: #aebbb2; font-size: 10px; letter-spacing: .04em; }
.page-footer a { color: #9ac7ae; }
.page-footer i { color: #93c7ad; }
.footer-mark { font-size: 12px; }

.profile-dialog { border-color: #47574e; background: #1a221e; }
.profile-close { border-color: #4b5c50; background: #25332a; color: #d3ebde; font-size: 24px; }
.profile-close:hover { background: #34483a; }
#profile-content { padding: 28px; }
.profile-identity small,
.profile-games-heading small,
.profile-totals small,
.profile-game-stat small,
.profile-level small { color: #bcc9bf; font-size: 10px; letter-spacing: .08em; }
.profile-identity h2 { font-size: 29px; }
.profile-identity > span { color: #c0cbc4; font-size: 13px; }
.profile-totals > div { border-color: #47564b; background: #222e27; }
.profile-totals strong { color: #bcebd4; font-size: 25px; }
.profile-games-heading h3 { font-size: 19px; }
.profile-games-heading > span { color: #b7c2ba; font-size: 10px; }
.profile-game { min-height: 70px; border-color: #3e4c43; background: #202923; }
.profile-game:hover { border-color: #698c76; background: #28372d; }
.profile-game-title strong { color: #e5eee7; font-size: 12px; }
.profile-game-icon { background: #2c4033; color: #b2e4c8; }
.profile-level strong,
.profile-game-stat strong { color: #e7f1e9; font-size: 12px; }
.profile-level small,
.profile-game-stat small { font-size: 8px; letter-spacing: .03em; }
.profile-prestige { color: #b8c6b9; font-size: 8px; }
.profile-level-note { color: #b7c2b9; font-size: 11px; }
.profile-loading { font-size: 14px; }
.profile-error > span { color: #add9c1; font-size: 10px; }
.profile-error h2 { font-size: 23px; }
.profile-error p { color: #c4cec7; font-size: 13px; }
.profile-retry { border-color: #578d71; background: #294536; color: #def2e6; font-size: 12px; }
.profile-retry:hover { background: #355b45; }

@media (max-width: 760px) {
  .main-nav a { font-size: 10px; }
  .table-head,
  .row { grid-template-columns: 48px minmax(170px, 1fr) minmax(112px, 145px) minmax(110px, 130px); }
  .table-footer,
  .page-footer { font-size: 9px; }
}

@media (max-width: 480px) {
  .brand-name { font-size: 19px; }
  .main-nav a { font-size: 10px; }
  .period { font-size: 11px; }
  .game { min-height: 32px; font-size: 11px; }
  .period-chip { font-size: 8px; }
  .period-note { font-size: 9px; }
  .history-toggle { height: 32px; font-size: 9px; }
  .archive-mode-button { font-size: 10px; }
  .archive-intro p { font-size: 11px; }
  .table-head,
  .row { grid-template-columns: 42px minmax(152px, 1fr) minmax(100px, 125px) minmax(98px, 112px); }
  .table-head { font-size: 10px; }
  .player-name { font-size: 13px; }
  .player-sub { font-size: 10px; }
  .value { font-size: 12px; }
  .table-footer,
  .page-footer { font-size: 9px; }
  #profile-content { padding: 23px 15px; }
  .profile-identity h2 { font-size: 23px; }
  .profile-game-title strong { font-size: 11px; }
  .profile-level strong,
  .profile-game-stat strong { font-size: 11px; }
  .profile-level small,
  .profile-game-stat small { font-size: 8px; }
}

/* Readable system typography; the gold is limited to the raised navigation. */
html,
body,
body *,
body *::before,
body *::after {
  font-family: Arial, Helvetica, sans-serif !important;
}

html { font-size: 17px; }
body { font-size: 17px; line-height: 1.5; }
.about-top { color: #eff5f1; font-size: 17px; font-weight: 700; text-decoration: none; }
.about-top:hover { color: #bcebd4; text-decoration: underline; text-underline-offset: 4px; }
.masthead-inner { align-items: flex-start; }

.main-nav {
  height: 58px;
  border: 4px ridge #8a6328;
  border-radius: 7px;
  background: linear-gradient(#f4cf78, #cb9234);
  box-shadow: 0 4px 0 #523813, 0 8px 18px #0008;
}
.main-nav a {
  border-right: 2px groove #a97b32;
  background: linear-gradient(#f7db91, #d9a540);
  color: #33240d;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .02em;
  text-shadow: 0 1px #fff4;
}
.main-nav a:hover,
.main-nav a.selected {
  background: linear-gradient(#fff0b7, #e6b74d);
  color: #241a0b;
}
.main-nav a.selected { box-shadow: inset 0 -3px 0 #8b5d1d, inset 0 2px 0 #fff8; }
.main-nav a.nav-end { border-right: 0; }

h1 { font-size: clamp(36px, 4vw, 48px); }
.heading-copy p { font-size: 16px; }
.search-box { min-height: 50px; }
.search-box input { font-size: 17px; }
.search-box button#search-submit { height: 38px; width: 42px; flex-basis: 42px; font-size: 25px; }
.search-option { font-size: 16px; }
.search-option small { font-size: 12px; }
.search-message { font-size: 14px; }
.card-heading { min-height: 84px; }
.heading-kicker { font-size: 13px; }
.card-heading h2 { font-size: 27px; }
.api-status { font-size: 12px; }
.period { min-width: 105px; padding: 12px 18px; font-size: 16px; }
.section-label { font-size: 14px; }
.section-label span { width: 22px; height: 22px; }
.game { min-height: 42px; padding-inline: 14px; font-size: 15px; }
.game-emoji { font-size: 17px; }
.chosen-game-icon { width: 42px; height: 42px; font-size: 23px; }
.chosen-game small { font-size: 12px; }
.chosen-game strong { font-size: 18px; }
.period-chip { min-height: 29px; font-size: 12px; }
.period-note { font-size: 13px; }
.history-toggle { min-height: 40px; height: 40px; padding-inline: 13px; font-size: 13px; }
.history-toggle > span { font-size: 12px; }
.history-toggle > span { text-transform: none; }
.refresh-button { width: 40px; height: 40px; font-size: 24px; }
.archive-intro h3 { font-size: 23px; }
.archive-intro p { font-size: 15px; }
.archive-mode-button { padding: 11px 14px; font-size: 14px; }
.archive-controls label > span { font-size: 12px; }
.archive-controls input,
.archive-controls select { height: 46px; font-size: 16px; }
.archive-load { height: 46px; padding-inline: 18px; font-size: 13px; }
.archive-footnote { font-size: 14px; }
.table-head { height: 52px; font-size: 14px; }
.row { min-height: 70px; }
.table-head,
.row { grid-template-columns: 70px minmax(230px, 1fr) minmax(155px, 200px) minmax(155px, 190px); }
.rank { font-size: 16px; }
.rank-medal { width: 23px; height: 23px; font-size: 14px; }
.head-wrap { width: 44px; height: 44px; flex-basis: 44px; }
.player-name { font-size: 17px; }
.player-sub { margin-top: 3px; font-size: 12px; }
.value { font-size: 16px; }
.table-footer { min-height: 48px; font-size: 12px; }
.page-footer { font-size: 13px; }
.profile-identity small,
.profile-games-heading small,
.profile-totals small,
.profile-game-stat small,
.profile-level small { font-size: 13px; }
.profile-identity h2 { font-size: 34px; }
.profile-identity > span { font-size: 16px; }
.profile-totals strong { font-size: 29px; }
.profile-games-heading h3 { font-size: 23px; }
.profile-games-heading > span { font-size: 13px; }
.profile-game { min-height: 78px; }
.profile-game-title strong { font-size: 15px; }
.profile-level strong,
.profile-game-stat strong { font-size: 15px; }
.profile-level small,
.profile-game-stat small,
.profile-prestige { font-size: 11px; }
.profile-level-note { font-size: 14px; }
.profile-error h2 { font-size: 29px; }
.profile-error p { font-size: 16px; }
.profile-retry { font-size: 15px; }

.profile-name-line { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.profile-name-line h2 { margin: 4px 0 3px; }
.presence-chip { display: inline-flex; align-items: center; min-height: 26px; padding: 3px 9px; border: 1px solid #56665c; border-radius: 5px; color: #d4dfd7; font-size: 12px; font-weight: 700; letter-spacing: .04em; white-space: nowrap; }
.presence-online { border-color: #439b6a; background: #1e3c2b; color: #a8e4bb; }
.presence-offline { border-color: #985c59; background: #392424; color: #efb1ad; }
.presence-unknown { border-color: #59645c; background: #242c27; color: #c7d0c9; }
.profile-activity { margin: 22px 0 12px; padding: 19px; border: 1px solid #3f5146; border-radius: 9px; background: #1f2923; }
.activity-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.activity-heading small { color: #c1d0c5; font-size: 13px; letter-spacing: .08em; }
.activity-heading h3 { margin: 4px 0 0; color: #edf4ee; font-size: 23px; }
.last-activity { margin: 14px 0; color: #b8c8bd; font-size: 12px; }
.last-activity strong { display: block; margin-top: 4px; color: #e6f0e8; font-size: 16px; font-weight: 600; }
.activity-empty { margin: 16px 0; color: #c6d0c8; font-size: 15px; }
.activity-list { display: grid; gap: 8px; }
.activity-item { display: flex; align-items: center; gap: 11px; min-height: 50px; padding: 9px 11px; border: 1px solid #34443a; border-radius: 7px; background: #1a231e; }
.activity-dot { width: 9px; height: 9px; flex: 0 0 9px; border-radius: 50%; background: #84938a; }
.activity-dot.activity-win { background: #72c99b; box-shadow: 0 0 0 3px #72c99b20; }
.activity-item > div { display: grid; gap: 2px; min-width: 0; }
.activity-item strong { color: #e5eee7; font-size: 15px; }
.activity-item span:not(.activity-dot) { color: #b5c3b9; font-size: 13px; }
.activity-item time { margin-left: auto; color: #b4c1b8; font-size: 12px; text-align: right; white-space: nowrap; }
.activity-note { margin: 12px 0 0; color: #aebdb2; font-size: 12px; line-height: 1.5; }

.trend-badge { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; line-height: 1; }
.trend-hot { font-size: 18px; filter: none; }
.trend-flat { width: 16px; height: 14px; }
.trend-flat i { width: 14px; height: 3px; display: block; border-radius: 2px; background: #de6969; box-shadow: 0 0 0 1px #de696925; }
.profile-trigger .profile-link-icon { margin-left: 1px; font-size: 13px; }
.profile-trigger .trend-badge { opacity: 1; transform: none; }
.profile-trigger .trend-flat { display: inline-flex; }
.profile-trigger:hover .trend-flat,
.profile-trigger:focus-visible .trend-flat { opacity: 1; }

.about-footer {
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  margin-top: 22px;
  padding: 23px 20px;
  border: 1px solid #394a40;
  border-radius: 9px;
  background: #19221d;
}
.about-footer h2 { margin: 0 0 8px; color: #edf4ee; font-size: 25px; letter-spacing: 0; }
.about-footer p { max-width: 760px; margin: 0; color: #c4d0c7; font: 16px/1.6 Arial, Helvetica, sans-serif; letter-spacing: 0; }
.about-footer .about-disclaimer { margin-top: 6px; color: #aebbb2; font-size: 13px; }
.about-footer > a { align-self: center; color: #9ac7ae; font-size: 13px; }

@media (max-width: 760px) {
  .main-nav { height: 54px; }
  .main-nav a { font-size: 13px; }
  .table-head,
  .row { grid-template-columns: 52px minmax(190px, 1fr) minmax(122px, 155px) minmax(122px, 145px); }
  .page-footer { font-size: 12px; }
  .about-footer { padding: 18px 14px; }
  .about-footer h2 { font-size: 23px; }
  .about-footer p { font-size: 15px; }
}

@media (max-width: 480px) {
  html,
  body { font-size: 16px; }
  .about-top { font-size: 15px; }
  .main-nav { height: 50px; border-width: 3px; }
  .main-nav a { padding-inline: 4px; font-size: 11px; letter-spacing: 0; }
  .main-nav a.nav-end { display: flex; flex: .9; }
  .join-button { min-width: 140px; }
  .join-button span { font-size: 10px; }
  .join-button small { font-size: 8px; }
  .heading-copy p { font-size: 14px; }
  .period { min-width: 0; padding: 10px 5px; font-size: 13px; }
  .game { min-height: 37px; padding-inline: 9px; font-size: 13px; }
  .period-chip { font-size: 10px; }
  .period-note { font-size: 11px; }
  .history-toggle { min-height: 36px; height: 36px; font-size: 11px; }
  .history-toggle > span { display: inline; font-size: 10px; }
  .stat-picker { align-items: stretch; flex-direction: column; gap: 8px; }
  .stat-picker label { min-width: 0; }
  .stat-picker p { font-size: 13px; }
  .table-head,
  .row { grid-template-columns: 43px minmax(168px, 1fr) minmax(105px, 130px) minmax(105px, 124px); }
  .table-head { font-size: 11px; }
  .player-name { font-size: 15px; }
  .player-sub { font-size: 11px; }
  .value { font-size: 14px; }
  .profile-game-title strong { font-size: 13px; }
  .profile-level strong,
  .profile-game-stat strong { font-size: 13px; }
  .profile-level small,
  .profile-game-stat small { font-size: 10px; }
  .about-footer { gap: 12px; }
  .about-footer > a { align-self: flex-start; }
  .activity-item { flex-wrap: wrap; }
  .activity-item time { width: 100%; margin-left: 20px; text-align: left; }
}