/* Rankings, guilds, news and events pages, plus the news / events strip on the home page */

.sp-body .table-wrap { max-height: none; }

.sp-count { color: var(--muted); font-size: 0.88rem; margin: 0 0 1rem; }
.sp-count strong { color: var(--gold-bright); }

.sp-search { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.25rem; }
.sp-search .db-input { max-width: 22rem; }
.sp-search button, .sp-search a.sp-clear {
  padding: 0.55rem 0.9rem; border: 1px solid var(--line-strong); background: rgba(212, 175, 110, 0.05);
  color: var(--gold-bright); font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; cursor: pointer;
}

.sp-table { width: 100%; border-collapse: collapse; }
.sp-table th, .sp-table td { padding: 0.6rem 0.8rem; text-align: left; white-space: nowrap; border-bottom: 1px solid rgba(232, 160, 110, 0.1); }
.sp-table th { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); font-weight: 600; }
.sp-table td.num, .sp-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.sp-table td.is-sorted { color: var(--gold-bright); font-weight: 600; }
.sp-table .sp-rank { color: var(--muted); width: 3rem; }
.sp-table tr.top .sp-rank { color: var(--ember); font-family: var(--font-display); }
.sp-table .sp-guild { color: var(--muted); font-size: 0.85rem; }

.db-pager a, .db-pager span.cur { padding: 0.4rem 0.75rem; border: 1px solid var(--line); color: var(--muted); }
.db-pager span.cur { color: var(--ember); border-color: var(--line-strong); }
.db-pager a:hover { color: var(--ember); border-color: var(--line-strong); }
.db-pager .sp-info { margin-right: auto; }

.sp-guild-card { display: flex; flex-direction: column; gap: 0.5rem; }
.sp-guild-head { display: flex; align-items: center; gap: 0.6rem; }
.sp-guild-head h3 { margin: 0; font-size: 1.05rem; color: var(--gold-bright); }
.sp-guild-head .guild-logo { width: 36px; height: 24px; }
.sp-guild-head .sp-place { margin-left: auto; color: var(--ember); font-family: var(--font-display); }
.sp-guild-card .sp-line { color: var(--muted); font-size: 0.82rem; margin: 0; }
.sp-guild-card .sp-line strong { color: var(--text); font-weight: 500; }

.sp-section-title { font-family: var(--font-display); color: var(--gold-bright); font-size: 1.25rem; letter-spacing: 0.04em; margin: 2.25rem 0 1rem; }
.sp-section-title:first-of-type { margin-top: 0; }

.sp-post-title { margin: 0.5rem 0 0; font-family: var(--font-display); font-size: 1.3rem; letter-spacing: 0.03em; }
.sp-post-title a { color: var(--gold-bright); }
.sp-post-title a:hover { color: var(--ember); }
.sp-post-top { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem; color: var(--muted); font-size: 0.78rem; }
.sp-post-img { display: block; max-width: 100%; height: auto; margin: 1rem 0 0; border: 1px solid var(--line); }
.sp-post-body p { margin: 0.9rem 0 0; }
.sp-post-body a { color: var(--ember); border-bottom: 1px solid rgba(255, 106, 61, 0.35); word-break: break-word; }
.sp-back { display: inline-block; margin-bottom: 1.25rem; }

.sp-event-when { color: var(--gold-bright); font-size: 0.9rem; margin: 0.5rem 0 0; }
.sp-live { color: #6ec4ac; border-color: rgba(61, 143, 122, 0.45); }
.sp-past { opacity: 0.7; }

/* Home page strip */
.sp-home-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.sp-home-col h3 { margin: 0 0 0.75rem; font-family: var(--font-display); color: var(--gold-bright); letter-spacing: 0.04em; }
.sp-home-item { display: block; padding: 0.85rem 0; border-top: 1px solid rgba(232, 160, 110, 0.1); }
.sp-home-item:first-of-type { border-top: 0; padding-top: 0; }
.sp-home-item strong { display: block; color: var(--text); font-weight: 600; }
.sp-home-item span { display: block; color: var(--muted); font-size: 0.82rem; margin-top: 0.2rem; }
.sp-home-item:hover strong { color: var(--ember); }
.sp-home-more { display: inline-block; margin-top: 0.9rem; }

@media (max-width: 960px) {
  .sp-home-grid { grid-template-columns: 1fr; }
}

/* Information pages: about, rules, terms, privacy, refund, contact */
.ip-nav { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1.75rem; }
.ip-nav a { padding: 0.4rem 0.75rem; border: 1px solid var(--line); color: var(--muted); font-size: 0.72rem; letter-spacing: 0.06em; text-transform: uppercase; }
.ip-nav a:hover, .ip-nav a.is-active { color: var(--ember); border-color: var(--line-strong); }
.ip-body { line-height: 1.7; }
.ip-body > * { max-width: 54rem; }
.ip-body h2 { font-family: var(--font-display); color: var(--gold-bright); font-size: 1.12rem; letter-spacing: 0.03em; margin: 1.9rem 0 0.5rem; }
.ip-body h2:first-child { margin-top: 0; }
.ip-body p { margin: 0.75rem 0 0; }
.ip-body > p:first-child { margin-top: 0; }
.ip-body ul, .ip-body ol { margin: 0.6rem 0 0; padding-left: 1.3rem; }
.ip-body ul { list-style: disc; }
.ip-body ol { list-style: decimal; }
.ip-body li { margin-top: 0.4rem; }
.ip-body a { color: var(--ember); border-bottom: 1px solid rgba(255, 106, 61, 0.35); }
.ip-updated { color: var(--muted); font-size: 0.8rem; }
.ip-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); gap: 1rem; margin: 1.5rem 0 0; max-width: none; }
.ip-card { border: 1px solid var(--line); background: rgba(212, 175, 110, 0.04); padding: 1.1rem; }
.ip-card h3 { margin: 0 0 0.4rem; font-family: var(--font-display); font-size: 0.98rem; color: var(--gold); }
.ip-card p { margin: 0; color: var(--muted); font-size: 0.9rem; }
.ip-contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; align-items: start; }
.ip-contact .db-article + .db-article { margin-top: 0; }
.ip-list { list-style: none; margin: 0; padding: 0; }
.ip-body ul.ip-list { list-style: none; padding-left: 0; }
.ip-list li { margin: 0; padding: 0.65rem 0; border-top: 1px solid rgba(232, 160, 110, 0.1); }
.ip-list li:first-child { border-top: 0; padding-top: 0; }
.ip-list span { display: block; color: var(--muted); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; }
.ip-form label { display: block; margin: 0.9rem 0 0.3rem; color: var(--muted); font-size: 0.74rem; letter-spacing: 0.06em; text-transform: uppercase; }
.ip-form input, .ip-form textarea { width: 100%; padding: 0.65rem 0.8rem; background: rgba(0, 0, 0, 0.35); border: 1px solid var(--line); color: var(--text); font: inherit; }
.ip-form input:focus, .ip-form textarea:focus { outline: none; border-color: var(--line-strong); }
.ip-form textarea { min-height: 9rem; resize: vertical; }
.ip-form button { margin-top: 1rem; }
.ip-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.ip-note { margin: 0 0 1rem; padding: 0.75rem 0.9rem; border: 1px solid var(--line-strong); }
.ip-note.ok { color: #6ec4ac; border-color: rgba(61, 143, 122, 0.45); }
.ip-note.bad { color: var(--red); }

/* Information links in the footer of every page */
.footer-links { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: 0.4rem 1.1rem; padding-top: 1rem; border-top: 1px solid rgba(232, 160, 110, 0.1); }
.footer-links a { color: var(--muted); font-size: 0.78rem; }
.footer-links a:hover { color: var(--ember); }

/* A Facebook post shown inside a news post or an event */
.sp-fb { margin: 1rem 0 0; max-width: 500px; }
.sp-fb .fb-post, .sp-fb .fb-video, .sp-fb .fb-page { display: block; background: #fff; min-height: 2rem; }
.sp-fb p { margin: 0.6rem 0 0; }

@media (max-width: 960px) {
  .ip-contact { grid-template-columns: 1fr; }
}

/* Guides: the list of cards and one guide */
.gd-inline { color: var(--ember); border-bottom: 1px solid rgba(255, 106, 61, 0.35); }
.gd-n { color: var(--muted); margin-left: 0.25rem; }
.gd-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 1rem; }
.gd-card { display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--panel); transition: border-color 0.15s; }
.gd-card:hover { border-color: var(--line-strong); }
.gd-card-img { display: flex; align-items: center; justify-content: center; height: 9.5rem; background: #07080a; border-bottom: 1px solid var(--line); overflow: hidden; }
.gd-card-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.gd-card-img span { color: var(--muted); font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; }
.gd-card-body { display: block; padding: 0.9rem 1rem 1rem; }
.gd-card-body strong { display: block; font-family: var(--font-display); color: var(--gold-bright); font-size: 1rem; letter-spacing: 0.03em; }
.gd-card:hover .gd-card-body strong { color: var(--ember); }
.gd-card-body span { display: block; margin-top: 0.35rem; color: var(--muted); font-size: 0.84rem; }
.gd-cover { max-height: 22rem; width: auto; }
.gd-body h3 { margin: 1.6rem 0 0; font-family: var(--font-display); color: var(--gold-bright); font-size: 1.05rem; letter-spacing: 0.03em; }
.gd-body h3:first-child { margin-top: 0; }
.gd-body hr { margin: 1.6rem 0 0; border: 0; border-top: 1px solid var(--line); }
.gd-pics { display: grid; grid-template-columns: repeat(auto-fill, minmax(8.5rem, 1fr)); gap: 0.75rem; margin: 0.9rem 0 0; }
.gd-pics figure { margin: 0; padding: 0.5rem; border: 1px solid var(--line); background: rgba(0, 0, 0, 0.3); text-align: center; }
.gd-pics img { display: block; max-width: 100%; max-height: 9rem; margin: 0 auto; }
.gd-pics figcaption { margin-top: 0.4rem; color: var(--muted); font-size: 0.76rem; overflow-wrap: anywhere; }
.gd-more { grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); margin-top: 1.25rem; }
.gd-more img { max-height: 16rem; }
.gd-video { position: relative; aspect-ratio: 16 / 9; max-width: 46rem; margin: 1.25rem 0 0; background: #000; border: 1px solid var(--line); }
.gd-video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; }

/* Small pictures in the home page news strip and in the news list */
.sp-home-item.has-thumb { display: grid; grid-template-columns: 5rem minmax(0, 1fr); column-gap: 0.8rem; align-items: start; }
.sp-home-thumb { grid-row: span 2; width: 5rem; height: 3.6rem; object-fit: cover; border: 1px solid var(--line); }
.sp-list-img { max-height: 16rem; width: auto; }
#written-guides .gd-list { margin-bottom: 0.5rem; }

/* Home page: the seasons section */
.sn-top { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.5fr); gap: 1rem; align-items: stretch; }
.sn-now, .sn-reach { border: 1px solid var(--line); background: var(--panel); padding: 1.6rem; }
.sn-now { display: flex; flex-direction: column; background: linear-gradient(160deg, rgba(255, 106, 61, 0.14), rgba(16, 19, 24, 0.9) 55%); border-color: var(--line-strong); }
.sn-now h3 { margin: 0; font-family: var(--font-display); font-size: 1.5rem; line-height: 1.2; color: var(--gold-bright); }
.sn-now p { margin: 0.7rem 0 0; color: var(--muted); }
.sn-points { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: 0.5rem; }
.sn-points li { position: relative; padding-left: 1.3rem; font-size: 0.92rem; }
.sn-points li::before { content: ""; position: absolute; left: 0.1rem; top: 0.45em; width: 0.45rem; height: 0.45rem; background: var(--ember); transform: rotate(45deg); }
.sn-now p.sn-when { margin-top: 1.3rem; font-size: 0.86rem; }
.sn-when strong { color: var(--gold-bright); font-weight: 600; }
.sn-count { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.45rem; margin-top: 0.7rem; }
.sn-count div { padding: 0.7rem 0.3rem; text-align: center; border: 1px solid var(--line); background: rgba(10, 12, 14, 0.5); }
.sn-count strong { display: block; font-family: var(--font-display); font-size: 1.4rem; line-height: 1; color: var(--ember); }
.sn-count span { font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.sn-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: auto; padding-top: 1.4rem; }
.sn-reach h4, .sn-road-title { margin: 0 0 1rem; font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--gold); }
.sn-reach h4.sn-sub { margin-top: 1.4rem; }
.sn-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.75rem; }
.sn-card { display: flex; flex-direction: column; border: 1px solid var(--line); background: rgba(10, 12, 14, 0.45); transition: border-color 0.15s; }
.sn-card:hover { border-color: var(--line-strong); }
.sn-card-img { display: flex; align-items: center; justify-content: center; height: 8.5rem; background: #07080a; border-bottom: 1px solid var(--line); overflow: hidden; }
.sn-card-img img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sn-card-body { display: block; padding: 0.8rem 0.85rem 0.9rem; }
.sn-card-body em { display: block; font-style: normal; font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ember); }
.sn-card-body strong { display: block; margin-top: 0.25rem; font-family: var(--font-display); font-size: 0.98rem; line-height: 1.25; color: var(--gold-bright); }
.sn-card:hover .sn-card-body strong { color: var(--ember); }
.sn-card-body span { display: block; margin-top: 0.35rem; color: var(--muted); font-size: 0.82rem; }
.sn-max { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
.sn-max div { padding: 0.6rem 0.75rem; border-left: 2px solid var(--ember); background: var(--ember-dim); }
.sn-max span { display: block; font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.sn-max b { display: block; margin-top: 0.15rem; font-weight: 500; font-size: 0.86rem; color: var(--gold-bright); }
.sn-road-title { margin: 2rem 0 1rem; }
.sn-road { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.5rem; }
.sn-road li { padding: 1rem 0.9rem 1.1rem; border: 1px solid var(--line); background: rgba(18, 21, 26, 0.7); }
.sn-road li.is-live { border-color: var(--line-strong); background: linear-gradient(160deg, rgba(255, 106, 61, 0.16), rgba(18, 21, 26, 0.85)); }
.sn-road .sn-num { display: block; font-family: var(--font-display); font-size: 1.6rem; line-height: 1; color: var(--muted); }
.sn-road li.is-live .sn-num { color: var(--ember); }
.sn-road strong { display: block; margin-top: 0.45rem; font-family: var(--font-display); color: var(--gold-bright); }
.sn-road em { display: inline-block; margin-top: 0.45rem; padding: 0.15rem 0.45rem; font-style: normal; font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; border: 1px solid var(--line); color: var(--muted); }
.sn-road li.is-live em { background: var(--ember); border-color: var(--ember); color: #1a0c08; }
.sn-road p { margin: 0.6rem 0 0; color: var(--muted); font-size: 0.82rem; }
@media (max-width: 1100px) {
  .sn-top { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .sn-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sn-max, .sn-road { grid-template-columns: 1fr; }
}

/* Home page: the class panel under the class picker */
.cl-panel { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 1.5rem; align-items: center; margin-top: 1.25rem; padding: 1.5rem; border: 1px solid var(--line); background: var(--panel); }
.cl-text h3 { margin: 0; font-family: var(--font-display); font-size: 1.4rem; color: var(--gold-bright); }
.cl-text #guideText { margin: 0.7rem 0 0; color: var(--muted); max-width: 30rem; }
.cl-img { display: block; max-width: 100%; max-height: 16rem; margin: 0 auto; }

/* Home page: one card for each group of guides */
.hg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); gap: 1rem; }
.hg-card { display: flex; flex-direction: column; border: 1px solid var(--line); background: var(--panel); transition: border-color 0.15s; }
.hg-card:hover { border-color: var(--line-strong); }
.hg-img { position: relative; display: block; height: 10.5rem; overflow: hidden; background: #07080a; }
.hg-img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s; }
.hg-card:hover .hg-img img { transform: scale(1.04); }
.hg-img::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: linear-gradient(180deg, rgba(7, 8, 10, 0) 20%, rgba(7, 8, 10, 0.78) 62%, rgba(7, 8, 10, 0.96)); }
.hg-name { text-shadow: 0 1px 6px #000; position: absolute; left: 1rem; right: 1rem; bottom: 0.8rem; z-index: 1; font-family: var(--font-display); font-size: 1.15rem; letter-spacing: 0.03em; color: var(--gold-bright); }
.hg-body { display: flex; flex-direction: column; flex: 1; padding: 0.9rem 1rem 1rem; }
.hg-body p { margin: 0; color: var(--muted); font-size: 0.86rem; }
.hg-actions { display: flex; flex-wrap: wrap; gap: 0.2rem 1.2rem; margin-top: auto; }
.hg-actions .text-link { border-top: 0; border-left: 0; border-right: 0; font-family: inherit; }
@media (max-width: 760px) {
  .cl-panel { grid-template-columns: 1fr; }
}

/* ---------- Server pages: server-info, economy, missions, rewards ---------- */
.gi-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 1rem; margin: 0 0 2.25rem; }
.gi-stat { border: 1px solid var(--line); background: rgba(212, 175, 110, 0.04); padding: 1rem 1.1rem; }
.gi-stat span { display: block; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.gi-stat strong { display: block; margin-top: 0.35rem; font-family: var(--font-display); font-size: 1.7rem; line-height: 1.1; color: var(--gold-bright); }
.gi-stat em { display: block; margin-top: 0.3rem; font-style: normal; font-size: 0.78rem; color: var(--muted); min-height: 1em; }
.gi-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 1.75rem 2rem; align-items: start; }
.gi-cols > div { min-width: 0; }
.gi-sub { font-family: var(--font-display); color: var(--gold); font-size: 1.02rem; letter-spacing: 0.03em; margin: 0 0 0.5rem; }
.gi-note { color: var(--muted); font-size: 0.86rem; margin: 0 0 0.9rem; }
.gi-stamp { margin: 2rem 0 0; font-size: 0.78rem; }
.gi-table th, .gi-table td { white-space: normal; vertical-align: top; }
.gi-table tbody th { width: 11rem; }
.gi-table td.num, .gi-table th.num { white-space: nowrap; }
.gi-table td strong { color: var(--gold-bright); font-weight: 600; }
.gi-table .gi-level { width: 4.5rem; font-family: var(--font-display); color: var(--ember); }
.gi-own { color: var(--muted); font-size: 0.8rem; margin-left: 0.4rem; }
.gi-table td.gi-barcell { width: 45%; vertical-align: middle; }
.gi-bar { display: block; height: 0.45rem; background: rgba(232, 160, 110, 0.12); }
.gi-bar span { display: block; height: 100%; background: linear-gradient(90deg, var(--ember), var(--gold-bright)); }
.gi-rewards { display: grid; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); gap: 0.5rem; }
.gi-reward { display: flex; align-items: center; gap: 0.7rem; border: 1px solid var(--line); padding: 0.55rem 0.75rem; font-size: 0.9rem; }
.gi-reward span { flex: 0 0 1.9rem; text-align: center; font-family: var(--font-display); color: var(--ember); }
@media (max-width: 560px) {
  .gi-stat strong { font-size: 1.4rem; }
  .gi-table tbody th { width: auto; }
  .gi-barcell { display: none; }
}

/* ---------- Top menu: it has more links than the first design, so it gets tighter, then turns into the menu button earlier ---------- */
@media (max-width: 1500px) {
  .site-header .nav { gap: 0.8rem; }
  .site-header .nav a { letter-spacing: 0.08em; }
}
@media (max-width: 1400px) {
  .site-header .status-chip { display: none; }
}
@media (max-width: 1320px) {
  .site-header .nav { position: fixed; inset: var(--header-h) 0 auto; display: none; flex-direction: column; gap: 0; margin: 0; padding: 0.4rem 0; background: rgba(10, 12, 14, 0.98); border-bottom: 1px solid var(--line); }
  .site-header .nav.is-open { display: flex; }
  .site-header .nav a { padding: 0.85rem 1.25rem; letter-spacing: 0.12em; }
  .site-header .nav-toggle { display: grid; }
  .site-header .header-actions { margin-left: auto; }
}