.wildroot-homestead {
  --hs-surface: #172729;
  --hs-card: #213334;
  --hs-border: #526960;
  --hs-ink: #fff0d8;
  --hs-muted: #d2d6c7;
  --hs-gold: #edbf82;
  --hs-mint: #bfe1b3;
  box-sizing: border-box;
  width: min(790px, calc(100vw - 1.5rem));
  max-width: none;
  max-height: 90dvh;
  padding: 0;
  border: 1px solid #90a78d;
  border-radius: 16px;
  background: var(--hs-surface);
  color: var(--hs-ink);
  box-shadow: 0 20px 80px #081212b8;
  overflow: auto;
  overscroll-behavior: contain;
}
.wildroot-homestead::backdrop { background: #091415c9; backdrop-filter: blur(3px); }
.wildroot-homestead [hidden] { display: none !important; }
.wildroot-homestead h2, .wildroot-homestead h3, .wildroot-homestead p { margin: 0; }
.wildroot-homestead .hs-kicker {
  display: block;
  margin: 0 0 .35rem;
  color: var(--hs-gold);
  font-size: .67rem;
  font-weight: 780;
  line-height: 1.22;
  text-transform: uppercase;
  letter-spacing: .13em;
}
.hs-banner {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: .85rem;
  align-items: center;
  padding: 1.08rem 1.25rem;
  border-bottom: 1px solid var(--hs-border);
  background: linear-gradient(105deg,#132625fa 9%,#233b37da 59%,#25392b6b),
    url("./art/wildroot-valley.webp") center 47% / cover;
}
.hs-sigil {
  display: grid;
  place-items: center;
  width: 3.65rem;
  aspect-ratio: 1;
  border: 1px solid #859f83;
  border-radius: .85rem;
  background: #192e28eb;
}
.hs-sigil svg { width: 83%; }
.hs-heading h2 {
  color: var(--hs-ink);
  font: 760 clamp(1.52rem, 4.6vw, 2.4rem)/1.04 var(--title, system-ui);
  letter-spacing: -.025em;
}
.wildroot-homestead .hs-heading > p:last-child {
  margin-top: .45rem;
  color: #e6e8d6;
  font-size: .83rem;
  line-height: 1.4;
}
.hs-action, .hs-close {
  box-sizing: border-box;
  min-height: 44px;
  padding: .49rem .72rem;
  border: 1px solid #819c7f;
  border-radius: 8px;
  background: #314b41;
  color: var(--hs-ink);
  font: 760 .78rem/1.2 system-ui;
  cursor: pointer;
}
.hs-close {
  align-self: start;
  width: 44px;
  padding: 0;
  background: #192c28;
  font-size: 1.32rem;
}
.hs-action:hover:not(:disabled), .hs-close:hover { background: #426151; }
.hs-primary { background: var(--hs-gold); color: #1d2b26; border-color: #ffdb9c; }
.hs-primary:hover:not(:disabled) { background: #ffd69a; }
.hs-action:disabled { cursor: default; opacity: .6; }
.wildroot-homestead :is(button, input, select):focus-visible {
  outline: 2px solid #ffe0a0;
  outline-offset: 3px;
}
.hs-invite {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: .75rem;
  padding: .85rem 1.25rem;
  border-bottom: 1px solid var(--hs-border);
  background: #1d302e;
}
.hs-invite > div:first-child { min-width: 0; }
.hs-invite input {
  box-sizing: border-box;
  width: 8.5rem;
  max-width: 100%;
  min-height: 38px;
  padding: .42rem .56rem;
  border: 1px solid #728f77;
  border-radius: 6px;
  background: #122522;
  color: #ffe6ba;
  font: 770 .96rem/1 ui-monospace,monospace;
  letter-spacing: .16em;
}
.hs-content {
  display: grid;
  grid-template-columns: minmax(235px, .93fr) minmax(245px, 1.07fr);
  align-items: start;
  gap: .8rem;
  padding: .9rem 1.25rem;
}
.hs-map-panel, .hs-panel {
  box-sizing: border-box;
  min-width: 0;
  padding: .83rem;
  border: 1px solid var(--hs-border);
  border-radius: 10px;
  background: var(--hs-card);
}
.hs-section { display: flex; align-items: center; justify-content: space-between; gap: .45rem; }
.hs-content h3 { font: 740 clamp(.99rem, 2.3vw, 1.27rem)/1.2 var(--title, system-ui); overflow-wrap: anywhere; }
.hs-compass { flex: 0 0 auto; color: var(--hs-mint); font: 750 .75rem/1 ui-monospace,monospace; }
.hs-survey {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .35rem .6rem;
  margin-top: .63rem;
  color: var(--hs-mint);
  font: 740 .75rem/1.35 system-ui;
}
.hs-survey select {
  min-width: 0;
  max-width: 100%;
  min-height: 36px;
  padding: .32rem .48rem;
  border: 1px solid #728f77;
  border-radius: 6px;
  background: #122522;
  color: var(--hs-ink);
  font: 690 .76rem/1.2 system-ui;
}
.wildroot-homestead p.hs-range { margin-top: .25rem; font-size: .69rem; }
.hs-map {
  display: grid;
  grid-template-columns: repeat(var(--hs-plot-columns, 8), minmax(0, 1fr));
  gap: 2px;
  margin-top: .68rem;
  padding: 4px;
  border: 1px solid #627867;
  border-radius: 7px;
  background: #122322;
}
.hs-tile {
  position: relative;
  display: block;
  min-width: 0;
  aspect-ratio: 1;
  border: 1px solid #43584e;
  border-radius: 2px;
  background: #354f45;
}
.hs-tile[data-state="reserved"] { background: repeating-linear-gradient(135deg,#415c5b 0 3px,#364b4b 3px 6px); }
.hs-tile[data-state="claimed"] { background: #6c7253; border-color: #a7a984; }
.hs-tile[data-state="home"] { background: #af7b43; border-color: #f5c68b; }
.hs-tile[data-state="available"] { background: #507f59; border-color: #cce6be; }
.hs-tile.hs-current::after {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 35%;
  height: 35%;
  border: 1px solid #20322d;
  background: #fff3d5;
  box-shadow: 0 0 4px #13231f;
  content: '';
  transform: translate(-50%,-50%) rotate(45deg);
}
.hs-legend {
  display: flex;
  flex-wrap: wrap;
  gap: .32rem .6rem;
  margin-top: .5rem;
  color: #e4e8da;
  font: 650 .66rem/1.25 system-ui;
}
.hs-legend span::before {
  display: inline-block;
  width: .55rem;
  height: .55rem;
  margin-right: .23rem;
  border: 1px solid #9ea99a;
  border-radius: 2px;
  background: #415c5b;
  content: '';
}
.hs-legend .hs-legend-home::before { background: #af7b43; }
.hs-legend .hs-legend-claimed::before { background: #6c7253; }
.hs-legend .hs-legend-you::before { background: #fff3d5; transform: rotate(45deg); }
.hs-side { display: grid; gap: .72rem; }
.wildroot-homestead p.hs-detail { margin-top: .48rem; color: var(--hs-muted); font: 510 .78rem/1.48 system-ui; }
.hs-panel > button { margin-top: .67rem; }
.hs-panel fieldset { margin: .69rem 0 0; padding: 0; border: 0; }
.hs-panel legend { margin-bottom: .27rem; color: var(--hs-mint); font: 740 .76rem/1.35 system-ui; }
.hs-panel fieldset label {
  display: flex;
  align-items: center;
  gap: .45rem;
  min-height: 41px;
  padding: .2rem .42rem;
  border: 1px solid #546b60;
  border-radius: 6px;
  font: 660 .76rem/1.24 system-ui;
}
.hs-panel fieldset label + label { margin-top: .28rem; }
.wildroot-homestead .hs-panel fieldset input {
  flex: 0 0 1rem;
  width: 1rem;
  min-width: 1rem;
  height: 1rem;
  min-height: 1rem;
  margin: 0;
  padding: 0;
  appearance: auto;
  accent-color: var(--hs-mint);
}
.wildroot-homestead .hs-status {
  min-height: 1.15rem;
  padding: .62rem 1.25rem .8rem;
  border-top: 1px solid var(--hs-border);
  color: var(--hs-mint);
  font: 700 .77rem/1.4 system-ui;
}
.hs-sr { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden; white-space: nowrap; }
@media (max-width: 580px) {
  .hs-banner, .hs-invite, .hs-content { padding-inline: .74rem; }
  .hs-banner { gap: .55rem; }
  .hs-sigil { width: 2.63rem; }
  .hs-content { grid-template-columns: minmax(0, 1fr); gap: .62rem; }
  .hs-map { width: min(100% - 8px, 15.5rem); margin-inline: auto; }
  .wildroot-homestead .hs-status { padding-inline: .74rem; }
}