/* RWC Classic theme for ROCPJS pages.
   nginx injects this (and rocpjs-theme.js) into every ROCPJS HTML response so the
   account, download, community and wiki pages match the landing page (tools/rwc-landing).
   Only looks change; markup, forms and sessions are ROCPJS's own. */
@import url("https://fonts.googleapis.com/css2?family=Cinzel:wght@700;900&family=Nunito:wght@400;600;700;800;900&display=swap");

:root {
  /* ROCPJS tokens, remapped to the RWC brand */
  --bg: #f8f5ee; --bg2: #fffdf8; --header: transparent; --card: #ffffff; --card2: #fffaf0;
  --table: #ffffff; --table2: #fffaf0; --text: #2a2a40; --muted: #66667f;
  --yellow: #a5761c; --blue: #7b52e0; --blue2: #7b52e0; --green: #2f9e6c;
  --border: #ebe4d4; --line: #ebe4d4; --shadow: 0 10px 30px rgba(60,48,20,.12);
  /* RWC tokens */
  --rwc-night: #1a1b2e; --rwc-gold: #c9a04a; --rwc-gold-deep: #a5761c; --rwc-gold-hot: #ffcf5a; --rwc-gold-text: #f2d58a;
  --rwc-violet: #7b52e0; --rwc-violet-soft: #efe9fd; --rwc-sky-1: #a9d3ef; --rwc-sky-2: #dcedf7; --rwc-dawn: #fde6bd;
  --rwc-brand: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  --rwc-orn: "Cinzel", "Trajan Pro", Georgia, serif;
  color-scheme: light;
}
html, body { background: var(--bg); }
body { color: var(--text); font-family: var(--rwc-brand); font-size: 15px; line-height: 1.6; }
a { color: var(--rwc-violet); }
a:hover { color: #5b36c4; }
:focus-visible { outline: 3px solid var(--rwc-violet); outline-offset: 2px; }

/* Header: sky band, Poring logo, landing-page menu */
.site-header { position: relative; background: linear-gradient(180deg, var(--rwc-sky-1), var(--rwc-sky-2) 70%, #eef6fa); border-bottom: 1px solid rgba(255,255,255,.7); box-shadow: 0 6px 20px rgba(60,48,20,.06); }
.nav-shell { min-height: 76px; grid-template-columns: auto 1fr auto; gap: 24px; }
.brand { color: var(--rwc-night); text-transform: none; letter-spacing: 0; gap: 10px; }
.brand-mark img { width: 48px; height: 48px; filter: drop-shadow(0 3px 4px rgba(60,40,10,.22)); }
.brand-text { font: 900 24px/1 var(--rwc-brand); color: var(--rwc-night); text-shadow: 0 2px 0 rgba(255,255,255,.7); }
.brand-text em { font-style: normal; color: var(--rwc-gold-deep); }
.brand-text small { display: block; font: 700 9.5px/1 var(--rwc-orn); letter-spacing: .26em; color: var(--rwc-night); margin-top: 5px; text-transform: uppercase; }
.main-nav { justify-content: flex-end; gap: 24px; height: auto; flex-wrap: wrap; }
.nav-link, .dropdown-trigger { color: var(--rwc-night); font: 800 13px/1 var(--rwc-brand); letter-spacing: .08em; padding: 8px 0; border-bottom: 2px solid transparent; white-space: nowrap; }
.nav-link:hover { color: var(--rwc-night); border-color: var(--rwc-gold); }
.nav-link .new { font: 900 9.5px/1 var(--rwc-brand); letter-spacing: .06em; color: #fff; background: #e2384d; border-radius: 999px; padding: 3px 6px; margin-left: 4px; vertical-align: 2px; }
.chevron { color: var(--rwc-night); }
.dropdown-menu { background: #fff; border-color: var(--border); box-shadow: var(--shadow); }
.dropdown-menu a { color: var(--rwc-night); }
.dropdown-menu a:hover { background: #fffaf0; }
/* Database and wiki stay reachable by link but are not in the menu */
.main-nav .nav-dropdown:has(a[href="/items"]), .main-nav a[href="/wiki"] { display: none; }
.discord-login, .account-link, .logout-link { font: 900 12px/1 var(--rwc-brand); letter-spacing: .06em; text-transform: uppercase; }
.discord-login { color: #2a1d05; background: linear-gradient(180deg, #ffe9a6, var(--rwc-gold-hot) 50%, #e0a52e); border: 1px solid #c4891d; padding: 10px 18px; box-shadow: 0 8px 20px rgba(224,165,46,.35), inset 0 1px 0 rgba(255,255,255,.7); }
.discord-login:hover { color: #2a1d05; background: linear-gradient(180deg, #fff0bf, #ffd56e 50%, #e5ad3a); }
.discord-login .fa-discord { display: none; }
.account-link, .logout-link { color: var(--rwc-night); }

/* Page */
.page { padding-top: 40px; }
h1, h2, h3 { color: var(--rwc-night); font-family: var(--rwc-brand); }
.page > h1, .page-title h1, .form-card h1 { font: 900 clamp(26px, 3.6vw, 34px)/1.1 var(--rwc-brand); text-transform: uppercase; color: var(--rwc-night); text-shadow: none; letter-spacing: 0; }
.page > h1 { text-align: center; margin: 0 0 24px; }
.page-title p, .breadcrumb { color: var(--muted); }
.breadcrumb strong { color: var(--rwc-gold-deep); }
.eyebrow { font: 700 12px/1 var(--rwc-orn); letter-spacing: .26em; color: var(--rwc-gold-deep); }
.muted { color: var(--muted); }

/* Cards and forms */
.card, .filter-card, .note-card { background: #fff; border: 1px solid #fff; border-radius: 14px; box-shadow: var(--shadow); color: var(--text); }
.note-card i { color: var(--rwc-violet); }
.page > form.card.form, .form-card { max-width: 520px; margin-left: auto; margin-right: auto; }
.form-card h1 { margin: 8px 0 18px; }
.form label { color: var(--rwc-night); font-weight: 800; }
.filter-card select, .form input, .form select, .search input {
  background: #fff; color: var(--text); border: 1px solid var(--border); border-radius: 10px; padding: 11px 14px; font: 600 15px var(--rwc-brand);
  box-shadow: inset 0 1px 2px rgba(60,48,20,.04);
}
.form input:focus, .form select:focus, .search input:focus { border-color: var(--rwc-violet); outline: none; box-shadow: 0 0 0 3px var(--rwc-violet-soft); }
.check { color: var(--text); font-weight: 700 !important; }
.check input { accent-color: var(--rwc-violet); }
.btn { font: 900 13px/1 var(--rwc-brand); letter-spacing: .06em; text-transform: uppercase; color: #2a1d05; border-radius: 999px; padding: 14px 24px;
  background: linear-gradient(180deg, #ffe9a6, var(--rwc-gold-hot) 50%, #e0a52e); border: 1px solid #c4891d; box-shadow: 0 8px 20px rgba(224,165,46,.35), inset 0 1px 0 rgba(255,255,255,.7); }
.btn:hover { color: #2a1d05; background: linear-gradient(180deg, #fff0bf, #ffd56e 50%, #e5ad3a); transform: translateY(-1px); }
.form .btn { width: 100%; margin-top: 6px; }
.btn.ghost, .ghost-dark { background: #fff; color: var(--rwc-night); border: 1px solid var(--border); box-shadow: var(--shadow); }
.alert.success { background: #e3f5ec; color: #1f7a52; }
.alert.error { background: #fbe4e7; color: #b8364d; }
.divider { color: var(--muted); }
.divider:before, .divider:after { background: var(--border); }

/* Tables */
.rank-table, .data-table, table { background: #fff; border: 1px solid #fff; border-radius: 14px; box-shadow: var(--shadow); }
th { background: #fffaf0; color: var(--rwc-gold-deep); font: 800 11px/1.2 var(--rwc-brand); letter-spacing: .1em; }
td { color: var(--text); }
tbody tr:nth-child(even) { background: #fffdf8; }
tbody tr:hover { background: #fff6e2; }
.char-name { color: var(--rwc-violet); }
.rank-avatar { color: var(--text); }
.rank-cell { color: var(--muted); } .rank-cell.top-1 { color: var(--rwc-gold-deep); } .rank-cell.top-2 { color: #8a8fa0; } .rank-cell.top-3 { color: #c47a2c; }
.level-pill.base { background: var(--rwc-violet); } .level-pill.job { background: #2f9e6c; }
.tabs a { background: #fff; border-color: var(--border); color: var(--rwc-night); border-radius: 999px; }
.tabs a.active { background: var(--rwc-night); color: var(--rwc-gold-text); }
.online { color: #2f9e6c; } .offline { color: #d0465a; }
.feature-card { color: var(--text); }
.feature-card:hover { border-color: var(--rwc-gold); }

/* Footer */
.site-footer { background: var(--rwc-night); color: #c9c4dc; padding: 30px 0; }
.site-footer a { color: var(--rwc-gold-text); }
.site-footer .socials a { background: rgba(255,255,255,.08); color: var(--rwc-gold-text); }
.site-footer .socials a:hover { background: var(--rwc-violet); color: #fff; }

/* Wiki (its own stylesheet uses fixed dark colors) */
.wiki-shell { background: #fff !important; color: var(--text) !important; border-color: #fff !important; box-shadow: var(--shadow); }
.wiki-shell [class*="wiki-"] { background-color: transparent !important; color: inherit !important; border-color: var(--border) !important; }
.wiki-shell .wiki-sidebar { background-color: #fffaf0 !important; }
.wiki-shell .wiki-topbar { background-color: #fffdf8 !important; }
.wiki-shell a, .wiki-shell .wiki-nav-link, .wiki-shell .wiki-nav-group-link { color: var(--rwc-night) !important; }
.wiki-shell a:hover, .wiki-shell .wiki-nav-link:hover { color: var(--rwc-violet) !important; }
.wiki-shell .is-active, .wiki-shell [aria-current] { color: var(--rwc-violet) !important; background-color: var(--rwc-violet-soft) !important; }
.wiki-shell h1, .wiki-shell h2, .wiki-shell h3, .wiki-shell strong { color: var(--rwc-night) !important; }
.wiki-shell input { background: #fff !important; color: var(--text) !important; border: 1px solid var(--border) !important; }
.wiki-shell table th { background: #fffaf0 !important; color: var(--rwc-gold-deep) !important; }
.wiki-shell table td { color: var(--text) !important; }

/* ROCPJS centers the header below 900px; keep logo left, Login right, menu as a swipeable row */
@media (max-width: 900px) {
  .nav-shell { grid-template-columns: minmax(0,1fr) auto; justify-items: stretch; padding: 10px 18px; gap: 10px 16px; }
  .brand { justify-self: start; }
  .auth-actions { justify-content: flex-end; }
  .main-nav { grid-column: 1 / -1; grid-row: 2; justify-self: stretch; min-width: 0; justify-content: flex-start; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; gap: 18px; margin-inline: -18px; padding-inline: 18px; }
  .main-nav::-webkit-scrollbar { display: none; }
}
@media (max-width: 760px) {
  .brand-text { font-size: 21px; }
  .grid.two, .grid.three { grid-template-columns: minmax(0,1fr); }
  .page { padding-top: 24px; }
}