/* Import Outfit font from Google Fonts */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;700&display=swap');

/* Character grid layout - smaller thumbnails (12 columns for 80% of previous size) */
.character-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

progress.is-info {
  background: linear-gradient(to right, rgb(41, 150, 204) 80%, rgb(91, 228, 255));
  border-radius: 0;
  height: 1.25rem;
  border: solid 1px rgb(177 243 255);
  box-shadow: 0 0 #0000, 0 0 #0000, 0 0 12px 0 #00C2FF;
}

/* Segment cards container - flow left to right */
.segments-container {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: center;
}

/* Arrow between segments */
.segment-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 0.5rem;
}

.segment-arrow img {
  height: 40px;
  width: auto;
}

.segments-container .box {
  /* Max width to fit 5 character portraits at 90px each + gaps + padding */
  /* 5 * 90px (portraits) + 4 * 0.5rem (gaps between) + 2.5rem (box padding) = ~500px */
  max-width: 477px;
  margin-bottom: 0 !important;
}

/* Badge positioning on character portraits */
.badge-top {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge-right {
  position: absolute;
  top: 50%;
  right: 4px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge-bottom-left {
  position: absolute;
  bottom: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge-bottom-right {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.badge-bottom-center {
  position: absolute;
  bottom: -4px;
  left: 50%;
  transform: translateX(-50%);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Custom progress bars for characters - matches portrait width */
.character-progress-container {
  width: 100%;
  height: 6px;
  background-color: #dbdbdb;
  border-radius: 3px;
  overflow: hidden;
  margin-top: 4px;
}

.character-progress-bar {
  height: 100%;
  transition: width 0.3s ease;
  border-radius: 3px;
}

/* Dropdown max height for ally code selection */
.navbar-dropdown {
  max-height: 80vh;
  overflow-y: auto;
  background-color: var(--background-card) !important;
  color: var(--text-main) !important;
  border: none;
}

.navbar-dropdown .navbar-item,
.navbar-dropdown .navbar-link {
  color: var(--text-main) !important;
}

.navbar-dropdown .navbar-item:hover,
.navbar-dropdown .navbar-link:hover,
.navbar-item.is-active {
  background-color: var(--accent) !important;
  color: var(--text-main) !important;
}

body {
  font-family: 'Outfit', sans-serif;
  background-color: var(--background-dark);/*#161e35;*/
  background: url('../ea/stars_background-CUxpDtSD.jpg') no-repeat center center fixed;
  background-size: cover;
  color: #fff;
  min-height: 100vh;
}

/* Ensure headings, paragraphs, and main text are white if directly on background */
h1,
h2,
h3,
h4,
h5,
h6,
p,
.title,
.subtitle {
  font-family: 'Outfit', sans-serif;
  color: #fff;
}

/* Optional: keep Bulma boxes, tables, and cards readable with their default backgrounds */
.box,
.table,
.card {
  background-color: #161e35;
  color: #fff;
}

nav {
  border-bottom: 1px solid var(--nav-nav-stroke, #0E538E);
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.6) 10.1%, rgba(20, 30, 52, 0.6) 39.9%), linear-gradient(rgba(9, 56, 111, 0.25) 0%, rgba(60, 178, 255, 0.2) 96.67%);
}

.navbar.is-dark .navbar-end .navbar-link.is-active,
.navbar.is-dark .navbar-end .navbar-link:focus,
.navbar.is-dark .navbar-end .navbar-link:hover,
.navbar.is-dark .navbar-end>a.navbar-item.is-active,
.navbar.is-dark .navbar-end>a.navbar-item:focus,
.navbar.is-dark .navbar-end>a.navbar-item:hover,
.navbar.is-dark .navbar-start .navbar-link.is-active,
.navbar.is-dark .navbar-start .navbar-link:focus,
.navbar.is-dark .navbar-start .navbar-link:hover,
.navbar.is-dark .navbar-start>a.navbar-item.is-active,
.navbar.is-dark .navbar-start>a.navbar-item:focus,
.navbar.is-dark .navbar-start>a.navbar-item:hover {
  background-color: #3cb2ff1a;
  color: #fff
}

:root {
  --primary: #143a52;
  --info: #3cb2ff;
  --success: #4fd672;
  --warning: #ffd166;
  --danger: #ff3864;
  --accent: #3cb2ff1a;
  --background-dark: #181a2a;
  --background-box: rgba(30, 30, 52, 0.85);
  --background-card: rgba(20, 30, 52, 0.92);
  --text-main: #fff;
  --text-muted: #b3b3cc;
}

.content {
  h1,h2,h3,h4,h5,h6,p,li,td,th {
    color: var(--text-main);
  }
}
/* Bulma color overrides */
.is-primary {
  background-color: var(--primary) !important;
  color: var(--text-main) !important;
}

.is-info {
  background-color: var(--info) !important;
  color: var(--background-dark) !important;
}

.is-success {
  background-color: var(--success) !important;
  color: var(--background-dark) !important;
}

.is-warning {
  background-color: var(--warning) !important;
  color: var(--background-dark) !important;
}

.is-danger {
  background-color: var(--danger) !important;
  color: var(--background-dark) !important;
}

.button.is-primary {
  background-color: var(--primary) !important;
  color: var(--text-main) !important;
}

.button.is-info {
  background-color: var(--info) !important;
  color: var(--background-dark) !important;
}

.button.is-success {
  background-color: var(--success) !important;
  color: var(--background-dark) !important;
}

.button.is-warning {
  background-color: var(--warning) !important;
  color: var(--background-dark) !important;
}

.button.is-danger {
  background-color: var(--danger) !important;
  color: var(--background-dark) !important;
}

.progress.is-info {
  background-color: var(--background-dark);
  color: var(--info);
}

.progress.is-primary {
  background-color: var(--background-dark);
  color: var(--primary);
}

.progress::-webkit-progress-value {
  background-color: var(--accent);
}

.progress::-moz-progress-bar {
  background-color: var(--accent);
}

.progress::-ms-fill {
  background-color: var(--accent);
}

.notification {
  background-color: var(--background-card);
  color: var(--text-main);
}

strong {
  color: var(--info) !important;
  font-weight: bold;
}

.box {
  background: linear-gradient(135deg, #535c72 0%, #03070e 100%) !important;
  color: #fff;
}

.has-background-light,
.has-background-white,
.background {
  background-color: #161e35 !important;
  color: #fff !important;
}

.table th {
  background-color: #232a45 !important;
  color: #fff !important;
}

.table td {
  color: #fff !important;
}

.table.is-striped tbody tr:nth-child(odd) {
  background-color: #1c2238 !important;
}

.table.is-striped tbody tr:nth-child(even) {
  background-color: transparent !important;
}

.table tr:hover,
.table.is-hoverable tbody tr:hover {
  background-color: #28304d !important;
}

/* LST Card Menu - Dropdown styling */
.dropdown.is-right .dropdown-menu {
  right: 0;
  left: auto;
}

/* Button and dropdown menu background color */
/* .button.is-text {
  background-color: #9ba0af !important;
} */

.button.is-text:hover {
  background-color: var(--accent) !important;
  color: #fff !important;
}
.button.is-text:active, .button.is-text:focus {
  background-color: var(--accent) !important;
  color: #fff !important;
}
.dropdown-menu {
  background-color: var(--background-card);
}

.dropdown-content {
  background-color: var(--background-card);
}

.dropdown-item {
  color: #fff;
}

.dropdown-item:hover {
  background-color: var(--accent) !important;
  color: #fff !important;
}
@media screen and (max-width: 1023px) {
  .navbar-menu  {
    background-color: var(--background-dark);
  }
}
.section {
  @media screen and (max-width: 1023px) {
    padding: 1rem 0.5rem;
  }
}