#panel-houma.panel[hidden] { display: none !important; }
#panel-houma.panel.active {
  display: flex;
  flex-direction: column;
  padding: 0;
  margin: 0;
  min-height: calc(100dvh - 5rem);
  max-height: calc(100dvh - 5rem);
  overflow: hidden;
  background: #0b0610;
}
body.hm-tab-active #panel-houma.panel.active {
  min-height: 100dvh;
  max-height: 100dvh;
}
body.hm-tab-active .site-footer,
body.hm-tab-active .site-header .subtitle { display: none; }
body.hm-tab-active .site-header { padding-top: 0.3rem; padding-bottom: 0.3rem; }

.hm-shell {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  color: #f3ece3;
}
.hm-hud {
  flex: 0 0 auto;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 0.8rem;
  align-items: center;
  padding: 0.4rem 0.7rem;
  background: linear-gradient(180deg, #1a0c18, #0e0810);
  border-bottom: 1px solid rgba(232, 90, 160, 0.35);
  font-family: "Bahnschrift", "Trebuchet MS", sans-serif;
}
.hm-title {
  font-weight: 800;
  letter-spacing: 0.18em;
  color: #ff4fa3;
  text-shadow: 0 0 12px rgba(255, 79, 163, 0.45);
}
.hm-stars { color: #ffd24a; letter-spacing: 0.12em; }
.hm-cash { color: #7dffb3; }
.hm-dist { color: #9ad4ff; }
.hm-miss { flex: 1 1 12rem; color: #ffe7c2; font-size: 0.82rem; }
.hm-stage {
  flex: 1;
  min-height: 0;
  position: relative;
  background: #14081a;
}
#hm-canvas {
  display: block;
  width: 100%;
  height: 100%;
}
.hm-help {
  position: absolute;
  left: 0.6rem;
  bottom: 0.6rem;
  padding: 0.45rem 0.55rem;
  background: rgba(8, 4, 12, 0.72);
  border: 1px solid rgba(255, 79, 163, 0.3);
  font-size: 0.72rem;
  line-height: 1.4;
  color: #d8c8d4;
  pointer-events: none;
}
.hm-toast {
  position: absolute;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  padding: 0.55rem 0.9rem;
  background: rgba(20, 6, 18, 0.88);
  border: 1px solid #ff4fa3;
  color: #fff;
  font-weight: 700;
  letter-spacing: 0.04em;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s;
}
.hm-toast.show { opacity: 1; }
.hm-radio {
  position: absolute;
  left: 0.6rem;
  top: 0.6rem;
  max-width: 22rem;
  padding: 0.55rem 0.7rem 0.65rem;
  background: rgba(12, 6, 10, 0.82);
  border: 1px solid rgba(255, 210, 74, 0.35);
  pointer-events: none;
}
.hm-radio-kicker {
  margin: 0 0 0.25rem;
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #ffd24a;
  font-family: Bahnschrift, "Trebuchet MS", sans-serif;
}
.hm-radio-copy {
  margin: 0;
  font-size: 0.84rem;
  line-height: 1.4;
  color: #f3ece3;
}

/* Property table / owners (Terrebonne Assessor data) */
.hp-tabs { display: inline-flex; gap: 0.25rem; }
.hp-tabs button { background: #22121f; color: #f3ece3; border: 1px solid rgba(232,90,160,0.4); border-radius: 6px; padding: 0.2rem 0.6rem; cursor: pointer; font: inherit; font-size: 0.85rem; }
.hp-tabs button.active { background: #ff4fa3; color: #12070f; font-weight: 700; }
.hp-view { flex: 1; min-height: 0; display: flex; flex-direction: column; padding: 0.5rem 0.7rem; gap: 0.45rem; color: #f3ece3; background: #0e0810; font-family: "Bahnschrift","Trebuchet MS",sans-serif; }
.hp-view[hidden], .hm-stage[hidden] { display: none !important; }
.hp-bar { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.hp-bar input, .hp-bar select { background: #1b0f19; color: #f3ece3; border: 1px solid #5a2f4c; border-radius: 6px; padding: 0.35rem 0.5rem; font: inherit; font-size: 0.9rem; }
.hp-bar input { flex: 1 1 14rem; min-width: 0; }
.hp-meta { font-size: 0.75rem; color: #b9a8b3; }
.hp-scroll { flex: 1; min-height: 0; overflow: auto; -webkit-overflow-scrolling: touch; border: 1px solid #3a2034; border-radius: 6px; }
.hp-table { border-collapse: collapse; width: 100%; font-size: 0.8rem; }
.hp-table th { position: sticky; top: 0; background: #2a1426; text-align: left; padding: 0.4rem; cursor: pointer; white-space: nowrap; user-select: none; }
.hp-table th.asc::after { content: " ▲"; color: #ff4fa3; } .hp-table th.desc::after { content: " ▼"; color: #ff4fa3; }
.hp-table td { padding: 0.3rem 0.4rem; border-top: 1px solid #2a1a26; vertical-align: top; }
.hp-table tbody tr:nth-child(even) { background: #150b14; }
.hp-biz { display: inline-block; font-size: 0.65rem; background: #3d6cff; color: #fff; border-radius: 3px; padding: 0 0.25rem; margin-left: 0.25rem; }
.hp-pager { display: flex; gap: 0.3rem; align-items: center; justify-content: center; font-size: 0.82rem; }
.hp-pager button { background: #22121f; color: #f3ece3; border: 1px solid #5a2f4c; border-radius: 5px; min-width: 2rem; padding: 0.25rem; cursor: pointer; }
.hp-pager button:disabled { opacity: 0.35; cursor: default; }
.hp-owner { border-bottom: 1px solid #2a1a26; padding: 0.35rem 0.5rem; }
.hp-owner summary { cursor: pointer; display: flex; gap: 0.5rem; align-items: baseline; flex-wrap: wrap; }
.hp-cnt { min-width: 2.2rem; text-align: center; background: #ff4fa3; color: #12070f; font-weight: 800; border-radius: 10px; padding: 0 0.35rem; }
.hp-on { font-weight: 600; flex: 1 1 10rem; } .hp-tot { color: #7dffb3; font-size: 0.78rem; }
.hp-owner ul { margin: 0.3rem 0 0.2rem 2.6rem; padding: 0; font-size: 0.8rem; color: #ddd; }
.hp-empty { padding: 1rem; color: #b9a8b3; }
.hp-az { margin-left: 0.35rem; vertical-align: middle; background: #1b0f19; color: #f3ece3; border: 1px solid #5a2f4c; border-radius: 4px; padding: 0 0.35rem; font: inherit; font-size: 0.7rem; line-height: 1.5; cursor: pointer; }
.hp-az.on { border-color: #ff4fa3; color: #ff9cd0; }
.hp-az-bar { display: none; }
@media (max-width: 720px) {
  .hp-az-bar { display: flex; align-items: center; gap: 0.3rem; position: sticky; top: 0; z-index: 1; padding: 0.35rem 0.45rem; background: #2a1426; font-size: 0.8rem; font-weight: 600; }
  .hp-table thead { display: none; }
  .hp-table, .hp-table tbody, .hp-table tr, .hp-table td { display: block; width: 100%; }
  .hp-table tr { padding: 0.4rem; border-top: 1px solid #3a2034; }
  .hp-table td { border: 0; padding: 0.1rem 0; display: flex; gap: 0.5rem; }
  .hp-table td::before { content: attr(data-l); flex: 0 0 7rem; color: #b9a8b3; }
  .hp-table td:empty { display: none; }
  .hp-owner ul { margin-left: 1rem; }
}
.hp-go { color: #9ad4ff; }

/* 3D view (js/houma3d.js): WebGL world under the 2D HUD canvas */
.hm-stage .hm-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.hm-stage.hm-3d #hm-canvas { position: relative; z-index: 1; pointer-events: none; }
.hm-stage > .hm-toast, .hm-stage > .hm-radio, .hm-stage > .hm-help { z-index: 3; }
.hm3-labels { position: absolute; inset: 0; pointer-events: none; z-index: 2; overflow: hidden; }
.hm3-label { position: absolute; left: 0; top: 0; padding: 0.2rem 0.45rem; border-radius: 0.4rem; background: rgba(20, 24, 32, 0.72); color: #fff; font: 600 0.72rem/1.25 system-ui, sans-serif; text-align: center; white-space: nowrap; box-shadow: 0 2px 6px rgba(0,0,0,0.25); }
.hm3-label b { display: block; font-weight: 700; }
.hm3-label span { display: block; font-weight: 500; opacity: 0.8; font-size: 0.66rem; }
.hm3-label.biz { background: rgba(120, 60, 20, 0.78); }
.hm3-ctl { position: absolute; right: 0.6rem; bottom: 0.6rem; z-index: 3; display: none; gap: 0.5rem; align-items: center; padding: 0.35rem 0.5rem; background: rgba(8, 4, 12, 0.72); border: 1px solid rgba(255, 79, 163, 0.3); font-size: 0.72rem; color: #d8c8d4; }
.hm-stage.hm-3d .hm3-ctl { display: flex; }
.hm3-ctl select { font: inherit; background: #1d1424; color: #f1e6ee; border: 1px solid #5a3b52; padding: 0.1rem 0.2rem; }
@media (max-width: 640px) { .hm3-ctl #hm3-fps { display: none; } }
.hp-links{display:inline-flex;gap:4px;margin-left:6px;vertical-align:middle;flex-wrap:wrap}
.hp-links a{font-size:10px;line-height:1;padding:2px 5px;border-radius:8px;border:1px solid rgba(120,200,255,.45);color:#9fd8ff;text-decoration:none;white-space:nowrap}
.hp-links a:hover{background:rgba(120,200,255,.18)}
.hp-links a[title="Official website"]{border-color:#7fe0a0;color:#9ff0b8}
.hp-seg{display:inline-flex;margin:6px 0 8px;border:1px solid rgba(255,120,200,.5);border-radius:10px;overflow:hidden}
.hp-seg button{background:transparent;color:#f6d;border:0;padding:5px 12px;font:inherit;font-size:12px;cursor:pointer}
.hp-seg button+button{border-left:1px solid rgba(255,120,200,.5)}
.hp-seg button.on{background:#ff4fa8;color:#fff}
.hp-sec{margin:0 0 18px}
.hp-sec+.hp-sec{border-top:2px dashed rgba(255,255,255,.25);padding-top:10px}
.hp-sec-h{margin:4px 0 6px;font-size:14px;letter-spacing:.06em;text-transform:uppercase;color:#ffd27a}
.hp-sec-ind .hp-sec-h{color:#9fd8ff}
.hp-sec-h span{font-size:12px;opacity:.75;margin-left:6px;letter-spacing:0;text-transform:none}
.hp-sec .hp-table thead th{top:0}

/* GPS "Drive to" (under the minimap) */
.hm-gps { position: absolute; top: 186px; right: 9px; width: 230px; z-index: 6; font: 12px/1.35 system-ui, sans-serif; color: #eef3ea; }
.hm-gps-row { display: flex; gap: 4px; }
.hm-gps input { flex: 1; min-width: 0; padding: 6px 8px; border-radius: 6px; border: 1px solid #3c4a3a; background: rgba(8,12,8,0.88); color: #eef3ea; font-size: 12px; }
.hm-gps-row button { border: 1px solid #3c4a3a; background: rgba(8,12,8,0.88); color: #cfd8c8; border-radius: 6px; cursor: pointer; padding: 0 8px; }
.hm-gps-list { display: flex; flex-direction: column; max-height: 230px; overflow: auto; margin-top: 3px; }
.hm-gps-list button { text-align: left; border: 0; border-bottom: 1px solid #24301f; background: rgba(8,12,8,0.92); color: #e6eddf; padding: 5px 8px; cursor: pointer; font-size: 12px; }
.hm-gps-list button:hover { background: #1e3a2a; }
.hm-gps-turn { margin-top: 5px; padding: 8px 10px; border-radius: 8px; background: rgba(10,40,60,0.92); border: 1px solid #35d0ff; font-size: 13px; }
.hm-gps-turn small { display: block; opacity: 0.75; font-size: 11px; margin-top: 2px; }
.hm-gps-arrow { font-size: 20px; margin-right: 6px; vertical-align: middle; color: #35d0ff; }
.hm-speed { color: #ffd76a; font-variant-numeric: tabular-nums; min-width: 4.5em; }

.hm-auto-row { margin-top: 5px; align-items: center; }
.hm-auto-row #hm-auto { padding: 6px 10px; font-weight: 600; color: #bff0ff; border-color: #35d0ff; }
.hm-auto-row #hm-auto.on { background: #0f5d7a; color: #fff; }
.hm-auto-st { font-size: 11px; opacity: 0.85; }
.hm-auto-st.on { color: #7dff9a; opacity: 1; }