.perk-list {
  position: absolute;
  left: calc(var(--u) * 48);
  right: calc(var(--u) * 48);
  top: calc(var(--u) * 260);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 28);
}
.perk-tile {
  display: grid;
  grid-template-columns: calc(var(--u) * 96) 1fr;
  grid-template-rows: auto auto;
  column-gap: calc(var(--u) * 22);
  row-gap: calc(var(--u) * 6);
  align-items: center;
  min-height: calc(var(--u) * 200);
  padding: calc(var(--u) * 24) calc(var(--u) * 30);
  cursor: pointer;
  filter: saturate(0.7) brightness(0.8);
  transition: transform 160ms ease-out, filter 160ms, box-shadow 160ms;
  animation: title-drop 420ms ease-out backwards;
}
.perk-tile .bp-icon { grid-row: 1 / span 2; width: 100%; height: calc(var(--u) * 96); color: var(--gold); filter: drop-shadow(0 calc(var(--u) * 4) 0 #3a2605); }
.perk-name { font-family: var(--display); font-size: calc(var(--u) * 40); line-height: 1.05; text-transform: uppercase; color: var(--gold); align-self: end; min-width: 0; }
.perk-text { font-size: calc(var(--u) * 26); font-weight: 700; color: #fff4d0; align-self: start; min-width: 0; }
.perk-tile.is-selected {
  filter: none;
  transform: scale(1.03);
  border-color: var(--gold-hi);
  box-shadow: 0 0 0 calc(var(--u) * 3) var(--gold), 0 0 calc(var(--u) * 36) calc(var(--u) * 8) rgba(242, 182, 50, 0.55);
}
.perk-owned {
  position: absolute;
  left: calc(var(--u) * 48);
  right: calc(var(--u) * 48);
  bottom: calc(var(--u) * 200);
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 4);
  font-size: calc(var(--u) * 22);
  color: #e9dcb8;
}
.perk-owned b { font-size: calc(var(--u) * 18); letter-spacing: 0.1em; text-transform: uppercase; color: var(--gold); }

[data-layout="landscape"] .perk-list { top: calc(var(--u) * 170); left: calc(var(--u) * 90); right: calc(var(--u) * 90); flex-direction: row; }
[data-layout="landscape"] .perk-tile { flex: 1 1 0; min-width: 0; min-height: calc(var(--u) * 240); }
[data-layout="landscape"] .perk-owned { bottom: calc(var(--u) * 132); left: calc(var(--u) * 90); right: calc(var(--u) * 90); text-align: center; }