:root {
  color-scheme: dark;
  --bg: #1e1e24;
  --bg-alt: #26262e;
  --border: #3a3a45;
  --text: #e8e8ea;
  --text-dim: #9a9aa2;
  --accent: #69e15e;
  /* Per the user, modeled on myaion.eu/PvERanking - a Bootstrap .container-style fixed width,
     centered, rather than stretching edge-to-edge on a wide monitor. Used by header/breadcrumb/
     main alike so the whole page reads as one consistently-bounded column, not just the content
     area while the header bar above it still spans full width. */
  --content-max-width: 1140px;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: system-ui, -apple-system, "Segoe UI", sans-serif;
}

/* The dark band spans the full window width (same idea as myaion's navbar-dark bg-dark); only
   .header-inner is width-constrained, so the background still reaches both edges on a wide
   monitor while the actual logo/title/search stay in the same centered column as everything
   else. */
header {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
}

.header-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 10px 16px;
}

header .logo {
  width: 32px;
  height: 32px;
}

header h1 {
  font-size: 18px;
  margin: 0;
  flex-shrink: 0;
}

header h1 a {
  color: inherit;
  text-decoration: none;
}

.nav-download-link {
  color: var(--bg);
  background: var(--accent);
  font-weight: 600;
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 4px;
  text-decoration: none;
  white-space: nowrap;
}

.server-indicator {
  color: var(--text-dim);
  font-size: 13px;
  white-space: nowrap;
}

.server-indicator a {
  color: var(--accent);
  margin-left: 6px;
}

.lang-switcher {
  margin-left: auto;
  flex-shrink: 0;
}

.search {
  display: flex;
  gap: 6px;
}

.search input {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 8px;
  min-width: 200px;
}

.search button,
select,
.link-button {
  background: var(--bg);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 10px;
  cursor: pointer;
}

.breadcrumb {
  max-width: var(--content-max-width);
  margin: 0 auto;
  padding: 8px 16px;
  font-size: 13px;
  color: var(--text-dim);
}

.breadcrumb a {
  color: var(--text-dim);
  text-decoration: underline;
  cursor: pointer;
}

main {
  padding: 16px;
  max-width: var(--content-max-width);
  margin: 0 auto;
}

h2 {
  font-size: 16px;
  margin: 20px 0 8px;
}

ul.plain {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

ul.plain li a {
  display: block;
  padding: 8px 10px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--text);
  text-decoration: none;
}

ul.plain li a:hover {
  border-color: var(--accent);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

th,
td {
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
}

th {
  color: var(--text-dim);
  font-weight: normal;
}

/* One full-width block per class, stacked - not a multi-column grid: each block now holds a full
   6-column ranked-table (rank/player/DPS/damage/heal/buffs, see app.js rankedTable), which needs
   far more room than the old 3-column mini table this grid was originally sized for. A narrow
   grid column just clipped the table's right-hand columns instead of wrapping them. */
.class-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.class-block {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px;
}

.class-block h3 {
  margin: 0 0 8px;
  font-size: 14px;
}

/* Download page (#/download) - see app.js renderDownload. */
.download-hero {
  display: flex;
  align-items: center;
  gap: 20px;
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 20px;
}

.download-hero img {
  width: 64px;
  height: 64px;
  flex-shrink: 0;
}

.download-hero h2 {
  margin: 0 0 4px;
  font-size: 22px;
}

.download-hero p {
  margin: 0;
  color: var(--text-dim);
}

.download-cta {
  display: inline-block;
  background: var(--accent);
  color: var(--bg);
  font-weight: 700;
  font-size: 16px;
  padding: 12px 24px;
  border-radius: 6px;
  text-decoration: none;
  margin: 4px 0 6px;
}

.download-meta {
  color: var(--text-dim);
  font-size: 12px;
}

.download-meta a {
  color: var(--text-dim);
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
  margin: 16px 0 24px;
}

.feature-card {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 14px;
}

.feature-card h3 {
  margin: 0 0 6px;
  font-size: 14px;
}

.feature-card p {
  margin: 0;
  color: var(--text-dim);
  font-size: 13px;
}

.steps {
  padding-left: 20px;
}

.steps li {
  margin-bottom: 8px;
}

.steps code {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 1px 5px;
}

/* Instance picker (#/) - per the user, real client loading-screen art per instance with the name
   overlaid in light text, 3-per-row on desktop. auto-fit/minmax (not a fixed repeat(3, ...) or a
   manual @media breakpoint) mirrors .feature-grid's existing pattern: 300px keeps exactly 3 columns
   at this page's real content width (1140px minus padding) while still collapsing gracefully on a
   narrow viewport. */
.poster-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin: 12px 0 24px;
}

/* max-width, not just the grid's own minmax(300px, 1fr): auto-fit gives a lone leftover card (an
   instance with only 1 boss so far, or a 4th instance wrapping to its own row) the ENTIRE row's
   free space via that 1fr, ballooning it far past the ~360px the track-sizing implies for a real
   3-per-row - fine for a landscape instance photo, but it stretched a boss's tall portrait render
   into an unrecognizable sliver (found by the user against a real single-boss instance page). */
.poster-card {
  display: block;
  position: relative;
  height: 200px;
  max-width: 360px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
  text-decoration: none;
  color: inherit;
  background: var(--bg-alt);
  transition: border-color 0.15s ease, transform 0.15s ease;
}

.poster-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

/* No image mapped for this instance yet (see app.js's INSTANCE_IMAGES) - the card still works as a
   plain dark tile, same fallback spirit as icon()'s onerror removal elsewhere in this file. */
.poster-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.poster-card:hover .poster-photo {
  transform: scale(1.05);
}

.poster-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.82) 100%);
}

.poster-title {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 12px;
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  text-shadow: 0 1px 4px rgba(0, 0, 0, 0.6);
}

.empty {
  color: var(--text-dim);
  font-style: italic;
}

.error {
  color: #ff6b6b;
}

.icon-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.class-icon,
.faction-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.skill-icon {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  border-radius: 3px;
}

/* Per the user: a small marker next to a boss leaderboard's group heading when loot_rules has
   known drops documented for it - see renderLeaderboard's own remarks. */
.loot-known-badge {
  font-size: 0.85em;
  cursor: help;
}

h3 .icon-label {
  gap: 8px;
}

/* Boss leaderboard's top 10 groups/solo rows, and an encounter's own roster - both render through
   the same rankedRow/rankedTable (see app.js), so one style covers both. */
.ranked-table td {
  vertical-align: middle;
}

/* A top-10-groups row's "Player" cell - every member's icon-label, not just one representative
   (see app.js groupPlayersCell). */
.group-players {
  display: flex;
  flex-wrap: wrap;
  row-gap: 4px;
  column-gap: 14px;
}

.buffs-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
}

.buffs-row .icon-label {
  gap: 3px;
  font-size: 11px;
  color: var(--text-dim);
}

/* Compact key/value block (NAME/Zeitpunkt/Dauer/App Version) at the top of an encounter's detail
   page - deliberately not full-width like a roster/skill table, so a 2-column fact sheet doesn't
   stretch its right column across the whole content width. */
.meta-table {
  width: auto;
  max-width: 420px;
  margin-bottom: 8px;
}

.meta-table td:first-child {
  color: var(--text-dim);
  padding-right: 24px;
  white-space: nowrap;
}

.contribution-chart {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 8px 0 20px;
}

.contribution-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.contribution-label {
  font-size: 13px;
  color: var(--text-dim);
}

.contribution-track {
  background: var(--bg-alt);
  border: 1px solid var(--border);
  border-radius: 4px;
  height: 18px;
  overflow: hidden;
}

.contribution-bar {
  background: var(--accent);
  height: 100%;
}