/* ==========================================================================
   Alduin Online — community pages (live status, who's online, leaderboards, updates)
   Extends main.css: same tokens, buttons, chips, parchment and panel styles.
   1. Navigation dropdown   4. Updates            7. Server status
   2. Live badges & states  5. Who's online       8. Admin
   3. Homepage live section 6. Leaderboards       9. Responsive
   ========================================================================== */

/* 1. Navigation dropdown ---------------------------------------------------- */
.nav__item--menu { position: relative; }
.nav__toggle { border: 0; background: none; cursor: pointer; }
.nav__chev { width: 14px; height: 14px; opacity: .7; transition: transform .25s var(--ease-out); }
.nav__item--menu.is-open .nav__chev { transform: rotate(180deg); }
.nav__menu {
  position: absolute; top: calc(100% + 10px); left: 50%; z-index: 60;
  display: grid; gap: 2px; min-width: 15rem; padding: .55rem;
  background: linear-gradient(180deg, rgba(58, 43, 120, .97), rgba(29, 21, 67, .98));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transform: translate(-50%, -6px); opacity: 0; visibility: hidden;
  transition: opacity .2s var(--ease-out), transform .2s var(--ease-out), visibility 0s .2s;
}
.nav__item--menu.is-open .nav__menu { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.nav__menu a {
  position: relative; z-index: 1; display: flex; align-items: center; gap: .7rem;
  padding: .7rem .85rem; border-radius: var(--r-sm);
  font: 700 .98rem/1.1 var(--font-display); color: var(--light-soft); text-decoration: none;
}
.nav__menu a svg { width: 18px; height: 18px; color: var(--gold-300); flex: none; }
.nav__menu a:hover, .nav__menu a:focus-visible { color: #fff; background: rgba(255, 255, 255, .09); }
.nav__menu a[aria-current="page"] { color: #fff; background: rgba(255, 255, 255, .12); }
.nav__menu small { display: block; margin-top: .2rem; font: 600 .78rem/1.3 var(--font-body); color: var(--light-faint); }
.mobile-menu__group { margin: 1rem 0 .55rem .25rem; color: var(--gold-300); font-weight: 800; letter-spacing: .2em; text-transform: uppercase; font-size: .72rem; }

/* 2. Live badges & states --------------------------------------------------- */
a.badge--online { text-decoration: none; transition: border-color .2s; }
a.badge--online:hover { border-color: var(--mint-300); }
[data-live-state="offline"] .status-dot, .status-dot--off { background: var(--ember-400); box-shadow: 0 0 10px var(--ember-400); }
[data-live-state="offline"] .status-dot::after, .status-dot--off::after { border-color: var(--ember-400); }
[data-live-state="unknown"] .status-dot, .status-dot--unknown { background: var(--light-faint); box-shadow: none; }
[data-live-state="unknown"] .status-dot::after, .status-dot--unknown::after { display: none; }
.live-empty { padding: 1.4rem; text-align: center; color: var(--ink-soft); font-weight: 700; }
.on-dark .live-empty, .panel .live-empty { color: var(--light-soft); }
.live-note { font-size: var(--fs-small); color: var(--ink-faint); font-weight: 600; }
.live-skeleton { display: block; height: 1.1em; border-radius: var(--r-xs); background: linear-gradient(90deg, var(--lilac-100), var(--lilac-50), var(--lilac-100)); background-size: 200% 100%; animation: live-shimmer 1.4s linear infinite; }
@keyframes live-shimmer { to { background-position: -200% 0; } }

/* 3. Homepage live section -------------------------------------------------- */
.live__grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); align-items: start; margin-top: clamp(2rem, 4vw, 3rem); }
.live__col-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.live__col-head h3 { display: flex; align-items: center; gap: .6rem; font-size: var(--fs-h3); color: var(--ink); }
.live__col-head h3 svg { width: 28px; height: 28px; padding: 5px; border-radius: 10px; color: #5a3100; background: linear-gradient(180deg, var(--gold-300), var(--gold-500)); }
.news-list { display: grid; gap: 1rem; }
.news-card { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.1rem; padding: 1.15rem 1.25rem; align-items: start; }
.news-card--noimg { grid-template-columns: minmax(0, 1fr); }
.news-card__img { width: clamp(84px, 12vw, 132px); aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-sm); border: 2px solid #f0dcc0; position: relative; z-index: 1; }
.news-card__body { position: relative; z-index: 1; display: grid; gap: .45rem; }
.news-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; color: var(--ink-faint); font-size: .85rem; font-weight: 700; }
.news-card__title { font: 800 1.2rem/1.2 var(--font-display); color: var(--ink); }
.news-card__title a { color: inherit; text-decoration: none; }
.news-card__title a:hover { color: var(--violet-500); }
.news-card p { color: #463b6e; line-height: 1.6; }
.top-board { padding: 1.2rem 1.2rem 1.4rem; }
.top-board__list { position: relative; z-index: 1; display: grid; gap: .3rem; list-style: none; margin: 0; padding: 0; }
.top-board__row { display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto; gap: .7rem; align-items: center; padding: .5rem .65rem; border-radius: var(--r-sm); }
.top-board__row:nth-child(odd) { background: rgba(255, 255, 255, .05); }
.top-board__name { font: 700 1.02rem/1.2 var(--font-display); color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.top-board__name small { display: block; font: 600 .78rem/1.3 var(--font-body); color: var(--light-faint); }
.top-board__lvl { font: 800 .9rem/1 var(--font-display); color: var(--gold-200); white-space: nowrap; }
.top-board__foot { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .8rem; margin-top: 1rem; padding-top: 1rem; border-top: 1px dashed rgba(255, 255, 255, .16); }
.top-board__foot .link-arrow { --link: var(--pink-300); }
.rank { display: grid; place-items: center; width: 2.1rem; height: 2.1rem; border-radius: 10px; font: 800 .95rem/1 var(--font-display); color: var(--light); background: rgba(255, 255, 255, .1); }
.rank--1 { color: #5a3100; background: linear-gradient(180deg, #fff1a6, var(--gold-400)); box-shadow: var(--glow-gold); }
.rank--2 { color: #2a1f52; background: linear-gradient(180deg, #ffffff, #c9c3e8); }
.rank--3 { color: #4a1d00; background: linear-gradient(180deg, #ffd0a8, #e08b4a); }
.parchment .rank, .lb-table .rank { color: var(--night-700); background: var(--lilac-100); }
.parchment .rank--1, .lb-table .rank--1 { color: #5a3100; background: linear-gradient(180deg, #fff1a6, var(--gold-400)); }
.parchment .rank--2, .lb-table .rank--2 { color: #2a1f52; background: linear-gradient(180deg, #ffffff, #c9c3e8); }
.parchment .rank--3, .lb-table .rank--3 { color: #4a1d00; background: linear-gradient(180deg, #ffd0a8, #e08b4a); }

/* shared page body for the community pages */
.cm-section { position: relative; padding: clamp(2.5rem, 5vw, 4rem) 0 var(--section-y); background: linear-gradient(180deg, var(--dawn-50), var(--lilac-50)); }
.cm-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .8rem; margin-bottom: 1.2rem; }
.cm-toolbar__grow { flex: 1 1 14rem; }
.cm-search { position: relative; display: block; }
.cm-search svg { position: absolute; left: .9rem; top: 50%; width: 18px; height: 18px; transform: translateY(-50%); color: var(--ink-faint); pointer-events: none; }
.cm-input, .cm-select {
  width: 100%; padding: .8rem 1rem; border-radius: var(--r-pill);
  font: 700 1rem/1.2 var(--font-body); color: var(--ink);
  background: #fff; border: 2px solid var(--lilac-200); box-shadow: inset 0 2px 0 rgba(42, 31, 82, .05);
  transition: border-color .2s, box-shadow .2s;
}
.cm-search .cm-input { padding-left: 2.6rem; }
.cm-input:focus, .cm-select:focus { outline: none; border-color: var(--violet-400); box-shadow: 0 0 0 4px rgba(164, 139, 255, .25); }
.cm-select { width: auto; padding-right: 2.4rem; appearance: none; cursor: pointer;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%237b5cff' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right .9rem center / 16px no-repeat; }
.cm-stat-row { display: flex; flex-wrap: wrap; gap: .6rem; }
.cm-pill { display: inline-flex; align-items: center; gap: .5rem; padding: .5rem 1rem; border-radius: var(--r-pill); font-weight: 800; font-size: .92rem; color: var(--night-700); background: #fff; border: 2px solid var(--lilac-100); }
.cm-pill svg { width: 16px; height: 16px; color: var(--violet-500); }
.cm-table-wrap { overflow-x: auto; border-radius: var(--r-md); border: 2px solid var(--lilac-100); background: #fff; position: relative; z-index: 1; }
.cm-table { width: 100%; border-collapse: collapse; font-size: 1rem; }
.cm-table th, .cm-table td { padding: .75rem 1rem; text-align: left; border-bottom: 1px solid var(--lilac-100); color: #463b6e; white-space: nowrap; }
.cm-table th { font: 800 .76rem/1 var(--font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--ink-faint); background: var(--lilac-50); }
.cm-table th button { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: .35rem; }
.cm-table th button:hover, .cm-table th button:focus-visible { color: var(--violet-500); }
.cm-table th[aria-sort="ascending"] button::after { content: "▲"; font-size: .7em; }
.cm-table th[aria-sort="descending"] button::after { content: "▼"; font-size: .7em; }
.cm-table tbody tr:hover td { background: var(--lilac-50); }
.cm-table tr:last-child td { border-bottom: 0; }
.cm-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.cm-name { font: 800 1.02rem/1.2 var(--font-display); color: var(--ink); }
.cm-name small { display: block; font: 600 .8rem/1.3 var(--font-body); color: var(--ink-faint); }
.cm-online { display: inline-flex; align-items: center; gap: .45rem; font-weight: 800; color: #1f8a5b; }
.cm-pager { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .8rem; margin-top: 1.4rem; }
.cm-pager span { font-weight: 800; color: var(--ink-soft); }

/* 4. Updates ---------------------------------------------------------------- */
.upd-list { display: grid; gap: 1.6rem; max-width: 52rem; margin-inline: auto; }
.upd-card { padding: clamp(1.4rem, 3.5vw, 2.4rem); scroll-margin-top: calc(var(--header-h) + 1.5rem); }
.upd-card > * { position: relative; z-index: 1; }
.upd-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; color: var(--ink-faint); font-weight: 700; font-size: .92rem; }
.upd-card__meta svg { width: 16px; height: 16px; }
.upd-card h2 { margin-top: .6rem; font-size: clamp(1.5rem, 1.25rem + 1vw, 2.1rem); line-height: 1.15; color: var(--ink); }
.upd-card h2 a { color: inherit; text-decoration: none; }
.upd-card__summary { margin-top: .6rem; font-size: 1.08rem; font-weight: 700; color: var(--ink-soft); line-height: 1.6; }
.upd-card__img { margin-top: 1.2rem; width: 100%; max-height: 26rem; object-fit: cover; border-radius: var(--r-md); border: 2px solid #f0dcc0; }
.upd-card .doc { padding: 0; margin-top: 1.2rem; }
.upd-card .doc h3 { margin-top: 1.4rem; }
.upd-filters { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-bottom: 1.8rem; }
.upd-filters button { cursor: pointer; font-family: inherit; }
.upd-filters button[aria-pressed="true"] { --chip-fg: #fff; --chip-bg: var(--violet-500); --chip-border: var(--violet-500); }
.upd-more { display: flex; justify-content: center; margin-top: 2rem; }

/* 5. Who's online ----------------------------------------------------------- */
.who__count { font: 800 clamp(2.4rem, 1.8rem + 2vw, 3.4rem)/1 var(--font-display); color: var(--gold-300); text-shadow: var(--glow-gold); }

/* 6. Leaderboards ----------------------------------------------------------- */
.lb-tabs { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.2rem; }
.lb-tabs button { cursor: pointer; font-family: inherit; font-size: .9rem; padding: .55rem 1rem; }
.lb-tabs button[aria-selected="true"] { --chip-fg: #fff; --chip-bg: var(--violet-500); --chip-border: var(--violet-500); }
.lb-desc { margin: -.3rem 0 1.1rem; color: var(--ink-soft); font-weight: 600; }
.lb-table td.rank-cell { width: 3.2rem; }

/* 7. Server status ---------------------------------------------------------- */
.st-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.st-card { padding: 1.2rem 1.25rem; display: grid; gap: .35rem; align-content: start; }
.st-card > * { position: relative; z-index: 1; }
.st-card__label { display: flex; align-items: center; gap: .45rem; font: 800 .74rem/1 var(--font-body); letter-spacing: .14em; text-transform: uppercase; color: var(--ink-faint); }
.st-card__label svg { width: 16px; height: 16px; color: var(--violet-500); }
.st-card__value { font: 800 clamp(1.5rem, 1.2rem + 1vw, 2.1rem)/1.1 var(--font-display); color: var(--ink); }
.st-card__sub { font-size: .86rem; font-weight: 600; color: var(--ink-faint); }
.st-state { display: inline-flex; align-items: center; gap: .6rem; }
.st-state .status-dot { width: .8rem; height: .8rem; }
.st-chart { margin-top: 1.4rem; padding: 1.3rem 1.3rem 1rem; }
.st-chart > * { position: relative; z-index: 1; }
.st-chart h2 { font-size: var(--fs-h3); color: var(--ink); }
.st-chart svg { display: block; width: 100%; height: 220px; margin-top: .8rem; overflow: visible; }
.st-chart .axis { stroke: var(--lilac-200); stroke-width: 1; }
.st-chart .axis-label { fill: var(--ink-faint); font: 700 11px var(--font-body); }
.st-chart .area { fill: url(#st-area); }
.st-chart .line { fill: none; stroke: var(--violet-500); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.st-chart .gap { fill: rgba(255, 138, 92, .12); }

/* 8. Admin ------------------------------------------------------------------ */
.admin main { min-height: 100vh; }
.admin__wrap { display: grid; gap: 1.4rem; max-width: 60rem; }
.admin__brand { display: flex; align-items: center; gap: 1rem; font: 800 1.1rem/1 var(--font-display); color: var(--ink-soft); }
.admin__card { display: grid; gap: 1rem; max-width: 26rem; padding: 2rem; }
.admin__card--wide { max-width: none; }
.admin__card > * { position: relative; z-index: 1; }
.admin__field { display: grid; gap: .4rem; font-weight: 800; color: var(--ink); }
.admin__field input, .admin__field select, .admin__field textarea {
  width: 100%; padding: .75rem .9rem; border-radius: var(--r-sm); font: 600 1rem/1.5 var(--font-body); color: var(--ink);
  background: #fff; border: 2px solid var(--lilac-200);
}
.admin__field input:focus, .admin__field select:focus, .admin__field textarea:focus { outline: none; border-color: var(--violet-400); box-shadow: 0 0 0 4px rgba(164, 139, 255, .25); }
.admin__field small { font-weight: 600; color: var(--ink-faint); }
.ad-dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: .45rem 1rem; margin: 0; }
.ad-dl dt { font-weight: 800; color: var(--ink-faint); font-size: .9rem; }
.ad-dl dd { margin: 0; color: var(--ink); overflow-wrap: anywhere; }
.admin__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.admin__image { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.admin__image input { flex: 1 1 16rem; }
.admin__buttons, .admin__head-actions, .admin__actions { display: flex; flex-wrap: wrap; gap: .6rem; align-items: center; }
.admin__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; }
.admin__error { padding: .8rem 1rem; border-radius: var(--r-sm); color: #8a1f3d; background: #ffe3ec; border: 2px solid #ffb3c9; font-weight: 700; list-style: none; }
.admin__ok { padding: .8rem 1rem; border-radius: var(--r-sm); color: #165c3d; background: #dcfaec; border: 2px solid var(--mint-300); font-weight: 700; }
.admin__note { color: var(--ink-soft); }
.admin .doc-table td:nth-child(2) { white-space: normal; }

/* 10. Player reports -------------------------------------------------------- */
.rp-layout { display: grid; grid-template-columns: minmax(0, 1fr) 20rem; gap: 1.5rem; align-items: start; }
.rp-layout--narrow { grid-template-columns: minmax(0, 34rem); justify-content: center; }
.rp-form, .rp-done, .rp-aside { padding: clamp(1.3rem, 3vw, 2.1rem); }
.rp-form__inner { position: relative; z-index: 1; display: grid; gap: 1rem; }
.rp-form .h-card, .rp-done .h-card, .rp-aside .h-card { font-size: 1.25rem; color: var(--ink); }
.rp-done { grid-column: 1; }
.rp-done code { font: 800 1.15rem/1.3 ui-monospace, Menlo, monospace; padding: .25rem .55rem; border-radius: var(--r-xs); background: #fff; border: 2px dashed var(--gold-500); user-select: all; }
.rp-files { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .4rem; }
.rp-files li { font-size: .85rem; font-weight: 700; color: var(--ink-soft); background: var(--lilac-50); border: 1px solid var(--lilac-100); border-radius: var(--r-pill); padding: .2rem .7rem; }
.rp-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.rp-tips { display: grid; gap: .5rem; padding-left: 1.1rem; color: #463b6e; }
.rp-h3 { font-size: 1.05rem; color: var(--ink); margin-top: .6rem; }
.rp-response { white-space: pre-wrap; background: #fff; border: 1.5px solid var(--lilac-100); border-radius: var(--r-sm); padding: .8rem 1rem; color: #463b6e; }
.admin__field small { font-weight: 600; color: var(--ink-faint); }
@media (max-width: 900px) { .rp-layout { grid-template-columns: minmax(0, 1fr); } }

/* 9. Responsive ------------------------------------------------------------- */
@media (max-width: 1100px) {
  .st-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .live__grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) {
  .news-card { grid-template-columns: minmax(0, 1fr); }
  .news-card__img { width: 100%; }
  .st-grid { grid-template-columns: minmax(0, 1fr); }
  .admin__row { grid-template-columns: minmax(0, 1fr); }
  .cm-table th, .cm-table td { padding: .65rem .7rem; }
  .cm-hide-sm { display: none; }
  .cm-online__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
@media (prefers-reduced-motion: reduce) {
  .live-skeleton { animation: none; }
}