/* Pal Atlas details + element palette v83 */
:root {
  --pal-element-neutral: #b7988f;
  --pal-element-fire: #db5f3a;
  --pal-element-water: #1f7bdb;
  --pal-element-grass: #67ad0c;
  --pal-element-electric: #d4af0c;
  --pal-element-ice: #2eb8c6;
  --pal-element-ground: #975d2d;
  --pal-element-dragon: #c05ce7;
  --pal-element-dark: #603d78;
}

/* Colors sampled from the actual Palworld element icon assets bundled with the site. */
.pal-atlas-layout .element-badge.element-neutral,
.pal-atlas-layout button.element-neutral,
.pal-atlas-layout span.element-neutral { background: var(--pal-element-neutral) !important; border-color: var(--pal-element-neutral) !important; color: #111218 !important; }
.pal-atlas-layout .element-badge.element-fire,
.pal-atlas-layout button.element-fire,
.pal-atlas-layout span.element-fire { background: var(--pal-element-fire) !important; border-color: var(--pal-element-fire) !important; color: #fff !important; }
.pal-atlas-layout .element-badge.element-water,
.pal-atlas-layout button.element-water,
.pal-atlas-layout span.element-water { background: var(--pal-element-water) !important; border-color: var(--pal-element-water) !important; color: #fff !important; }
.pal-atlas-layout .element-badge.element-grass,
.pal-atlas-layout button.element-grass,
.pal-atlas-layout span.element-grass { background: var(--pal-element-grass) !important; border-color: var(--pal-element-grass) !important; color: #fff !important; }
.pal-atlas-layout .element-badge.element-electric,
.pal-atlas-layout button.element-electric,
.pal-atlas-layout span.element-electric { background: var(--pal-element-electric) !important; border-color: var(--pal-element-electric) !important; color: #171500 !important; }
.pal-atlas-layout .element-badge.element-ice,
.pal-atlas-layout button.element-ice,
.pal-atlas-layout span.element-ice { background: var(--pal-element-ice) !important; border-color: var(--pal-element-ice) !important; color: #07181b !important; }
.pal-atlas-layout .element-badge.element-ground,
.pal-atlas-layout button.element-ground,
.pal-atlas-layout span.element-ground { background: var(--pal-element-ground) !important; border-color: var(--pal-element-ground) !important; color: #fff !important; }
.pal-atlas-layout .element-badge.element-dragon,
.pal-atlas-layout button.element-dragon,
.pal-atlas-layout span.element-dragon { background: var(--pal-element-dragon) !important; border-color: var(--pal-element-dragon) !important; color: #fff !important; }
.pal-atlas-layout .element-badge.element-dark,
.pal-atlas-layout button.element-dark,
.pal-atlas-layout span.element-dark { background: var(--pal-element-dark) !important; border-color: var(--pal-element-dark) !important; color: #fff !important; }

.pal-atlas-layout .element-badge {
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
  font-weight: 900 !important;
}

/* Loose panel flow: shorter cards slide into available vertical space rather than leaving a blank grid cell. */
.pal-detail-masonry {
  columns: 2 360px;
  column-gap: 12px;
  width: 100%;
}
.pal-detail-masonry > .detail-panel {
  display: inline-block;
  width: 100% !important;
  margin: 0 0 12px !important;
  break-inside: avoid;
  page-break-inside: avoid;
  vertical-align: top;
}
.pal-detail-masonry .info-row { min-height: 31px; }
.pal-detail-masonry .detail-section-heading { margin-bottom: 9px; }
.pal-detail-masonry .rich-data-list { grid-template-columns: 1fr !important; }
.raw-pal-data-panel { margin-top: 0 !important; }

@media (max-width: 820px) {
  .pal-detail-masonry { columns: 1; }
}