.camp-player-card, .camp-player-invite {
  position: fixed; z-index: 40; box-sizing: border-box;
  width: min(22rem, calc(100vw - 2rem)); padding: 1rem;
  color: #f4e7c7; background: #192b28; border: 1px solid #9b8250;
  border-radius: .65rem; box-shadow: 0 10px 36px #0009;
  font: 14px/1.4 system-ui, sans-serif;
}
.camp-player-card { inset: max(3.8rem, env(safe-area-inset-top)) 1rem auto auto; margin: 0; }
.camp-player-invite { inset: auto 1rem max(5rem, env(safe-area-inset-bottom)) auto; }
.camp-player-card header, .camp-player-card [data-actions], .camp-player-invite [data-actions] {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
}
.camp-player-card header { justify-content: space-between; }
.camp-player-card h2 { font-size: 1.18rem; margin: 0; overflow-wrap: anywhere; }
.camp-player-card p, .camp-player-invite p { margin: .4rem 0 .65rem; }
.camp-player-card dl { display: grid; grid-template-columns: 1fr auto; gap: .25rem .6rem; }
.camp-player-card dd { margin: 0; font-variant-numeric: tabular-nums; }
.camp-player-card button, .camp-player-invite button {
  cursor: pointer; padding: .45rem .65rem; color: inherit; background: #294037;
  border: 1px solid #9b8250; border-radius: .35rem; font: inherit;
}
.camp-player-card button:disabled { opacity: .6; cursor: default; }
.original-world-labels button.camp-player-nameplate {
  pointer-events: auto; cursor: pointer; min-height: 24px; padding: 2px 6px;
  background: #192b28df; border: 1px solid #ae986c; border-radius: .4rem;
}
.camp-player-nameplate:focus-visible, .camp-player-card button:focus-visible,
.camp-player-invite button:focus-visible { outline: 2px solid #f8d683; }

.material-trade { max-height: calc(100dvh - 5rem); overflow: auto; }
.material-trade::backdrop { background: #08141088; }
.material-trade form:not([hidden]) { display: grid; grid-template-columns: 1fr 5rem; gap: .65rem; }
.material-trade form p, .material-trade form [type="submit"] { grid-column: 1 / -1; }
.material-trade label { display: grid; gap: .25rem; min-width: 0; }
.material-trade input, .material-trade select {
  box-sizing: border-box; width: 100%; padding: .35rem; color: inherit;
  background: #223731; border: 1px solid #9b8250; border-radius: .3rem; font: inherit;
}
.material-trade-alert { bottom: max(10rem, env(safe-area-inset-bottom)); cursor: pointer; }

.hero-heading { display: flex; align-items: center; gap: .5rem; margin-bottom: .3rem; }
#game-hud .hero-vitals { min-width: 0; width: min(11rem, 44vw); padding: .55rem .65rem; }
#game-hud .hero-heading strong { font-size: .9rem; line-height: 1.15; overflow-wrap: anywhere; }
#game-hud .hero-heading small { display: block; margin-top: .1rem; font-size: .63rem; }
#hero-level { flex: none; color: #ffe5aa; background: #344437; border: 1px solid #8f7c52;
  border-radius: .35rem; padding: .25rem .35rem; font-size: .72rem; font-weight: 700; }
#party-mini { list-style: none; margin: .4rem 0 0; padding: .3rem 0 0; border-top: 1px solid #ffffff30; }
#party-mini li { display: flex; align-items: center; gap: .3rem; min-height: .95rem; }
#game-hud #party-mini strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; font-size: .68rem; font-weight: 600; }
#game-hud #party-mini small { flex: none; font-size: .6rem; }
.party-health { flex: 0 0 1.7rem; height: .2rem; border-radius: 1rem;
  background: linear-gradient(to right, #86ba87 var(--party-health), #ffffff26 var(--party-health)); }