:root {
  --g-sky: #e7eff1;
  --g-chalk: #f7f8f3;
  --g-paper: #eef3f0;
  --g-ink: #15242c;
  --g-ink-soft: #40565f;
  --g-muted: #718087;
  --g-line: #cbd7d5;
  --g-field: #3A3F40;
  --g-field-soft: #dfeae3;
  --g-clay: #C48E55;
  --g-clay-soft: #f2ded8;
  --g-gold: #C6A064;
  --g-green: #6F8A78;
  --g-shadow: 0 20px 46px rgba(21, 36, 44, .12);
  --g-display: Bahnschrift, "Arial Narrow", "Microsoft JhengHei", sans-serif;
  --g-sans: "Microsoft JhengHei", "PingFang TC", system-ui, sans-serif;
}

:root[data-theme="dark"] {
  --g-sky: #111e24;
  --g-chalk: #182830;
  --g-paper: #1e3037;
  --g-ink: #f0f5f2;
  --g-ink-soft: #c2d0d1;
  --g-muted: #8fa1a5;
  --g-line: #30444b;
  --g-field: #65a38c;
  --g-field-soft: #213c34;
  --g-clay: #ee8469;
  --g-clay-soft: #3e2926;
  --g-gold: #d8ad60;
  --g-green: #74b497;
  --g-shadow: 0 22px 52px rgba(0, 0, 0, .28);
  color-scheme: dark;
}

.g-system-nav {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 32px;
  width: min(1384px, calc(100% - 56px));
  min-height: 72px;
  margin: 0 auto;
  border-bottom: 1px solid var(--g-line);
  color: var(--g-ink);
  font-family: var(--g-sans);
}

.g-system-brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-height: 48px;
  color: inherit;
  text-decoration: none;
}

.g-system-brand img {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--g-clay) 12%, transparent);
}

.g-system-brand span { display: grid; line-height: 1; }
.g-system-brand small,
.g-system-links a small {
  color: var(--g-muted);
  font: 700 9px/1 var(--g-display);
  letter-spacing: .14em;
}
.g-system-brand strong { margin-top: 5px; font: 760 14px/1 var(--g-display); letter-spacing: .08em; }

.g-system-links { display: flex; align-items: stretch; gap: 4px; min-width: 0; }
.g-system-links a {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 15px;
  color: var(--g-muted);
  font-size: 13px;
  font-weight: 750;
  text-decoration: none;
  white-space: nowrap;
}
.g-system-links a::after {
  content: "";
  position: absolute;
  right: 15px;
  bottom: 4px;
  left: 15px;
  height: 7px;
  border-radius: 50%;
  background: var(--g-clay);
  opacity: 0;
  transform: scaleX(.2);
  transition: opacity 160ms ease, transform 160ms ease;
}
.g-system-links a:hover,
.g-system-links a[aria-current="page"] { color: var(--g-ink); }
.g-system-links a[aria-current="page"]::after { opacity: .9; transform: scaleX(1); }

.g-theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid var(--g-line);
  border-radius: 50% 50% 50% 16px;
  background: transparent;
  color: var(--g-ink-soft);
  font: 700 11px/1 var(--g-sans);
}
.g-theme-toggle svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.8; }

@media (max-width: 840px) {
  .g-system-nav { grid-template-columns: 1fr auto; gap: 8px 18px; width: calc(100% - 32px); padding-top: 7px; }
  .g-system-links { grid-column: 1 / -1; order: 3; overflow-x: auto; border-top: 1px solid var(--g-line); }
  .g-system-links a { flex: 1 0 auto; justify-content: center; min-height: 46px; padding-inline: 12px; }
}

@media (max-width: 480px) {
  .g-system-nav { width: calc(100% - 24px); }
  .g-system-brand strong { font-size: 12px; }
  .g-system-links { margin-inline: -12px; padding-inline: 12px; }
  .g-system-links a { font-size: 12px; }
  .g-theme-toggle { width: 44px; padding: 0; }
  .g-theme-toggle span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}

@media (prefers-reduced-motion: reduce) {
  .g-system-links a::after { transition: none; }
}

/* The `hidden` attribute must always win: component rules such as `.card-art-fallback { display: grid }`
   otherwise re-show fallbacks that the markup deliberately hides (e.g. initials circles over every card). */
[hidden]:not([hidden="until-found"]) {
  display: none !important;
}

/* iOS Safari enlarges some text blocks on its own ("text autosizing"), which made wrapped skill lines look bigger
   than the rest of the card. Keep the designed sizes on every V4 page. */
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Scrolling to the end of a dropdown must not carry on into the list behind it (e.g. the player picker). */
.v4-select-menu,
.filter-menu,
.quick-skill-popover {
  overscroll-behavior: contain;
}