/* Houses page (/houses), same look as the online page */
.hs { --ink:#d9e6e4; --mute:#8fa9a5; --line:rgba(143,196,190,.22); --gold:#f6c85a;
  --free:#5dea6f; --rented:#8fc4be; --reserved:#6c7a79;
  font-family:Roboto,Arial,sans-serif; color:var(--ink); margin:0 0 20px; }

.hs-hero { display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:18px 22px; border:1px solid rgba(143,196,190,.35); border-radius:10px;
  background:radial-gradient(120% 140% at 0% 0%, #2c4744 0%, #182224 55%, #121819 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 8px 24px rgba(0,0,0,.25); }
.hs-kicker { display:inline-flex; align-items:center; gap:7px; padding:3px 10px; border-radius:99px;
  background:rgba(246,200,90,.12); color:var(--gold); font-size:11px; font-weight:700; letter-spacing:1.5px; text-transform:uppercase; }
.hs-hero__title { margin:8px 0 2px; font-size:26px !important; font-weight:400; color:#fff; }
#page .hs-hero__title b { color:var(--gold); font-size:38px; font-weight:700; margin-right:4px; }
.hs-hero__sub { margin:0; color:var(--mute); font-size:12px; }
.hs-hero__stats { display:flex; gap:20px; margin:0; padding-left:18px; border-left:1px solid var(--line); }
.hs-hero__stats div { text-align:right; }
.hs-hero__stats dt { color:var(--mute); font-size:10px; letter-spacing:1px; text-transform:uppercase; }
.hs-hero__stats dd { margin:0; color:#fff; font-size:22px; font-weight:700; font-variant-numeric:tabular-nums; }

.hs-bar { display:flex; height:6px; margin:12px 2px 10px; border-radius:99px; overflow:hidden; gap:2px; }
.hs-bar .is-rented { background:var(--rented); } .hs-bar .is-reserved { background:var(--reserved); } .hs-bar .is-free { background:var(--free); }

.hs-how { margin:0 0 12px; border:1px solid var(--line); border-radius:8px; background:#192324; }
.hs-how summary { padding:9px 14px; cursor:pointer; color:#fff; font-weight:600; font-size:13px; }
.hs-how summary i { color:var(--gold); margin-right:6px; }
.hs-how ul { margin:0; padding:0 18px 12px 34px; font-size:13px; line-height:1.6; color:var(--ink); }
.hs-how code { padding:1px 6px; border-radius:4px; background:#0f1516; color:var(--gold); font-size:12px; }

.hs-towns { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
.hs-town { display:flex; align-items:center; gap:8px; padding:8px 12px; cursor:pointer; text-align:left;
  border:1px solid var(--line); border-left:3px solid var(--free); border-radius:7px;
  background:#1f2c2e; color:var(--ink); font:600 13px Roboto,Arial,sans-serif; transition:.15s; }
.hs-town span { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
#page .hs-town b { margin-left:auto; color:var(--free); font-size:16px; white-space:nowrap; }
#page .hs-town small { color:var(--mute); font-size:11px; font-weight:400; }
.hs-town.is-full { border-left-color:var(--reserved); }
#page .hs-town.is-full b { color:var(--mute); }
.hs-town:hover { background:#26383a; }
.hs-town.is-on { background:#2c4744; border-color:var(--gold); color:#fff; }

.hs-tools { display:flex; align-items:center; gap:10px; margin:14px 0 10px; flex-wrap:wrap; }
.hs-search { flex:1; position:relative; min-width:180px; max-width:260px; }
.hs-search i { position:absolute; left:11px; top:50%; transform:translateY(-50%); color:var(--mute); font-size:12px; }
#page .hs-search input { width:100%; box-sizing:border-box; padding:8px 12px 8px 31px; border:1px solid var(--line);
  border-radius:7px; background:#121819; color:#fff; font-size:13px; }
.hs-search input:focus { outline:none; border-color:var(--gold); }
.hs-seg { display:flex; align-items:center; gap:4px; color:var(--mute); font-size:12px; }
.hs-seg[data-group=sort] { margin-left:auto; }
.hs-seg span { margin-right:4px; text-transform:uppercase; letter-spacing:1px; font-size:10px; font-weight:700; }
#page .hs-seg button { padding:6px 11px; border:1px solid var(--line); border-radius:6px; background:#1f2c2e;
  color:var(--ink); cursor:pointer; font:600 12px Roboto,Arial,sans-serif; }
#page .hs-seg button:hover { background:#26383a; }
#page .hs-seg button.is-on { background:var(--gold); color:#1d2a2c; border-color:var(--gold); }

.hs-head, .hs-row { display:grid; grid-template-columns:1fr 74px 36px 60px 196px; align-items:center; gap:12px; }
.hs-head { padding:0 12px 4px 17px; color:var(--mute); font-size:10px; font-weight:700; letter-spacing:1px; text-transform:uppercase; }
.hs-head span:nth-child(n+2):nth-child(-n+4) { text-align:right; }
.hs-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:4px; }
.hs-row { min-height:44px; padding:4px 12px 4px 14px; border-radius:8px; border:1px solid rgba(143,196,190,.12);
  border-left:3px solid var(--c); background:linear-gradient(90deg, #1f2c2e 0%, #192324 100%); transition:transform .12s, border-color .12s; }
.hs-row:hover { transform:translateX(3px); border-color:color-mix(in srgb, var(--c) 60%, transparent); }
.hs-row.is-free { --c:var(--free); } .hs-row.is-rented { --c:var(--rented); } .hs-row.is-reserved { --c:var(--reserved); }
.hs-row[hidden] { display:none; }
.hs-name { display:flex; flex-direction:column; gap:2px; min-width:0; }
#page .hs-name b { color:#fff; font-size:14px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hs-name em { color:var(--mute); font-style:normal; font-size:11px; }
.hs-num { text-align:right; font-size:14px; font-variant-numeric:tabular-nums; }
#page .hs-num small { margin-left:3px; color:var(--mute); font-size:10px; }
.hs-owner { display:flex; align-items:center; gap:8px; min-width:0; }
.hs-badge { padding:2px 10px; border-radius:99px; font:600 11px Roboto,Arial,sans-serif; color:var(--c);
  background:color-mix(in srgb, var(--c) 14%, transparent); border:1px solid color-mix(in srgb, var(--c) 35%, transparent); }
.hs-outfit { flex:none; width:44px; height:44px; border-radius:6px; overflow:hidden; background:#121819; }
.hs-outfit img { width:64px; height:64px; margin:-16px 0 0 -16px; image-rendering:pixelated; }
.hs-who { display:flex; flex-direction:column; min-width:0; }
.hs-who a { color:#fff !important; font-weight:700; font-size:13px; text-decoration:none; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hs-who a:hover { color:var(--gold) !important; }
#page .hs-who small { color:var(--mute); font-size:11px; white-space:nowrap; }
.hs-on { display:inline-block; width:7px; height:7px; margin-right:5px; border-radius:50%; background:var(--free); }
.hs-empty { padding:24px; text-align:center; color:var(--mute); }

@media (max-width:760px) {
  .hs-hero { flex-direction:column; align-items:flex-start; }
  .hs-hero__stats { padding-left:0; border-left:0; }
  .hs-towns { grid-template-columns:repeat(2,1fr); }
  .hs-head { display:none; }
  .hs-row { grid-template-columns:1fr 70px 70px; }
  .hs-row > :nth-child(3) { display:none; }
  .hs-owner { grid-column:1 / -1; }
}