/* ===== Base ===== */
body {
  margin: 0;
  font-family: system-ui, Arial, sans-serif;
  background:
    linear-gradient(180deg, rgba(16, 24, 28, 0.2), rgba(16, 24, 28, 0.08)),
    linear-gradient(135deg, #24343c 0%, #3f564f 36%, #64776c 68%, #899287 100%);
  min-height: 100vh;
  color: #24302c;
}

/* ===== Header ===== */
.site-header-image {
  width: 100%;
  height: 250px;
  background-image: url("./images/header.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  z-index: 1;
}

.site-header-image::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(18, 28, 30, 0.14), rgba(18, 28, 30, 0.4)),
    rgba(36, 44, 40, 0.08);
  z-index: 1;
}

/* ===== Site Notice ===== */
.site-notice {
  position: fixed;
  top: 90px;
  right: 20px;
  z-index: 9999;
  min-width: 280px;
  max-width: 420px;
  background: rgba(241, 239, 232, 0.98);
  border: 1px solid rgba(126, 137, 129, 0.18);
  border-left: 5px solid #7c978b;
  color: #2d3a36;
  border-radius: 12px;
  box-shadow: 0 14px 30px rgba(22, 26, 25, 0.18);
  padding: 0.95rem 1rem 0.9rem 1rem;
  backdrop-filter: blur(5px);
}

.site-notice-title {
  font-weight: 700;
  margin-bottom: 0.25rem;
}

.site-notice-close {
  border: 0;
  background: transparent;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  color: #50665d;
}

.site-notice-close:hover {
  color: #2d3a36;
}

/* ===== World Clock ===== */
.world-clock-strip {
  width: 100%;
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 2500;
  margin-top: -150px;
  margin-bottom: 90px;
  pointer-events: none;
}

.world-clock-text {
  background: rgba(241, 239, 233, 0.88);
  border: 1px solid rgba(126, 136, 128, 0.22);
  color: #33413c;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 700;
  box-shadow: 0 8px 18px rgba(21, 26, 24, 0.14);
  backdrop-filter: blur(5px);
}

/* ===== Navbar / layers ===== */
.nav-wrapper {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 14px 0;
  margin-top: -34px;
  position: relative;
  z-index: 3000;
}

.nav-box {
  width: 100%;
  padding: 8px 14px;
  background: rgba(237, 235, 228, 0.92);
  border: 1px solid rgba(123, 136, 127, 0.26);
  box-shadow: 0 10px 24px rgba(23, 28, 27, 0.22);
  backdrop-filter: blur(5px);
  position: relative;
  z-index: 3001;
  border-radius: 0;
}

.navbar,
.navbar-collapse,
.navbar .dropdown-menu {
  position: relative;
  z-index: 3002;
}

.dropdown-menu {
  z-index: 4000 !important;
  border-radius: 10px;
  border: 1px solid rgba(126, 136, 128, 0.22);
  background: rgba(241, 239, 233, 0.98);
  box-shadow: 0 10px 22px rgba(21, 26, 24, 0.14);
}

.navbar .dropdown-toggle {
  cursor: pointer;
}

.dropdown-menu-end {
  right: 0;
  left: auto;
}

.navbar .nav-link,
.navbar .navbar-brand {
  font-weight: 600;
  color: #2f3b37 !important;
}

.navbar .nav-link:hover,
.navbar .navbar-brand:hover,
.dropdown-item:hover {
  color: #557064 !important;
}

.dropdown-item:active {
  background: rgba(110, 134, 125, 0.14);
  color: #2f3b37;
}

/* ===== Main layout boxes ===== */
.main-box,
.sidebar-box,
.footer-box,
.section-card,
.stat-card,
.masterlist-card,
.user-card {
  position: relative;
  z-index: 1;
}

.user-card-clickable {
  cursor: pointer;
}

.user-card-clickable:focus {
  outline: 2px solid rgba(124, 151, 139, 0.5);
  outline-offset: 2px;
}

.main-box {
  background: rgba(241, 239, 232, 0.93);
  border: 1px solid rgba(126, 137, 129, 0.15);
  border-radius: 12px;
  box-shadow: 0 14px 30px rgba(22, 26, 25, 0.18);
  backdrop-filter: blur(5px);
}

.sidebar-box {
  background: rgba(233, 232, 224, 0.84);
  border: 1px solid rgba(128, 138, 130, 0.13);
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(22, 26, 25, 0.12);
  backdrop-filter: blur(4px);
}

.footer-box {
  background: rgba(233, 232, 224, 0.86);
  border: 1px solid rgba(128, 138, 130, 0.13);
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(22, 26, 25, 0.12);
  backdrop-filter: blur(4px);
}

.footer-link {
  color: #3a4742;
  text-decoration: none;
  font-weight: 600;
}

.footer-link:hover {
  text-decoration: underline;
  color: #5d786d;
}

/* ===== Profile ===== */
.profile-header {
  border-bottom: 1px solid rgba(98, 112, 106, 0.14);
  padding-bottom: 0.85rem;
}

.profile-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 8px 18px rgba(23, 28, 27, 0.18);
  border: 2px solid rgba(220, 217, 208, 0.95);
  background: #ddd7ce;
}

.profile-species-name {
  font-weight: 700;
  color: #547063;
}

.profile-text-preserve {
  white-space: pre-line;
}

.stat-card {
  background: rgba(246, 244, 238, 0.88);
  border: 1px solid rgba(129, 139, 131, 0.11);
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(22, 26, 25, 0.08);
}

.stat-label {
  font-size: 0.84rem;
  color: #6f7d77;
  margin-bottom: 0.25rem;
}

.stat-value {
  font-size: 1.45rem;
  font-weight: 700;
  color: #2d3a36;
}

.section-card {
  background: rgba(246, 244, 238, 0.88);
  border: 1px solid rgba(129, 139, 131, 0.11);
  border-radius: 12px;
  box-shadow: 0 8px 18px rgba(22, 26, 25, 0.08);
}

/* ===== Masterlist ===== */
.masterlist-search {
  max-width: 280px;
  border-radius: 10px;
  border: 1px solid rgba(130, 141, 133, 0.22);
  background: rgba(249, 247, 242, 0.96);
}

.masterlist-search:focus {
  border-color: #7c978b;
  box-shadow: 0 0 0 0.2rem rgba(124, 151, 139, 0.16);
}

.masterlist-card {
  background: rgba(242, 240, 234, 0.94);
  border: 1px solid rgba(128, 139, 130, 0.14);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 22px rgba(22, 26, 25, 0.1);
  height: 100%;
}

.masterlist-card .p-3 {
  padding: 0.8rem !important;
}

.masterlist-card-image {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  background:
    radial-gradient(circle at top, rgba(255, 255, 255, 0.42), rgba(226, 231, 225, 0.3)),
    rgba(226, 230, 223, 0.72);
  display: block;
  padding: 6px;
}

.masterlist-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: #2c3934;
  line-height: 1.2;
}

.masterlist-card-code {
  font-size: 0.82rem;
  color: #74827b;
}

.masterlist-card-owner {
  color: #50665d;
  font-size: 0.88rem;
}

.masterlist-card-text {
  color: #46534d;
  font-size: 0.9rem;
  line-height: 1.35;
}

.masterlist-stage-badge {
  background: #d8e1db;
  color: #41534b;
  border: 1px solid rgba(96, 111, 103, 0.12);
  border-radius: 999px;
  padding: 0.24rem 0.58rem;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: capitalize;
  white-space: nowrap;
}

/* ===== Users ===== */
.user-card {
  background: rgba(242, 240, 234, 0.94);
  border: 1px solid rgba(128, 139, 130, 0.14);
  border-radius: 14px;
  box-shadow: 0 10px 22px rgba(22, 26, 25, 0.1);
}

.user-card-avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  object-fit: cover;
  background: #ddd7ce;
  border: 2px solid rgba(222, 219, 210, 0.95);
  box-shadow: 0 8px 18px rgba(22, 26, 25, 0.12);
}

.user-card-name {
  font-size: 1rem;
  font-weight: 700;
  color: #2c3934;
}

.user-card-species {
  color: #547063;
  font-weight: 600;
  font-size: 0.92rem;
}

.user-card-stat {
  color: #48554f;
  font-size: 0.9rem;
}

/* ===== Clickable cards ===== */
.user-card-link,
.skeif-card-link {
  display: block;
  color: inherit;
  text-decoration: none;
}

.user-card-link:hover,
.skeif-card-link:hover {
  color: inherit;
  text-decoration: none;
}

.user-card,
.masterlist-card {
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

.user-card:hover,
.masterlist-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 28px rgba(22, 26, 25, 0.14);
}

/* ===== Skeif detail ===== */
.skeif-detail-image {
  width: 100%;
  max-width: 420px;
  aspect-ratio: 1 / 1;
  object-fit: contain;
  display: block;
  margin: 0 auto;
  background: rgba(226, 230, 223, 0.74);
  border: 1px solid rgba(128, 139, 130, 0.14);
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 10px 22px rgba(22, 26, 25, 0.08);
}

.skeif-pretty-json {
  white-space: pre-wrap;
  font-size: 0.88rem;
  color: #3f4d47;
  background: rgba(255, 255, 255, 0.34);
  border-radius: 10px;
  padding: 0.75rem;
}

/* ===== Wider masterlist grid ===== */
.masterlist-wide .col-lg-8 {
  width: 100%;
}

.masterlist-grid-3 > * {
  width: 100%;
}

@media (min-width: 768px) {
  .masterlist-grid-3 > * {
    width: 50%;
  }
}

@media (min-width: 1200px) {
  .masterlist-grid-3 > * {
    width: 33.333333%;
  }
}

/* Force 5 cards per row on wide screens */
@media (min-width: 1200px) {
  #masterlist-grid > div {
    width: 20%;
  }
}

.masterlist-card-title {
  font-size: 0.95rem;
}

.masterlist-card-text {
  font-size: 0.85rem;
}

.masterlist-card-code {
  font-size: 0.78rem;
}