:root{
    --ink-900:#2B2420;
    --ink-800:#4A4137;
    --ink-700:#6B6152;
    --panel:#FFFDF6;
    --paper:#FDF8EB;
    --paper-dim:#F0E8D2;
    --line:#E3D7B8;
    --line-bright:#CBB98A;
    --mint:#8FCFC0;
    --mint-dark:#5FA894;
    --coral:#E8623D;
    --coral-bright:#F0805E;
    --brand-blue:#1863E6;
    --brand-blue-dark:#0F49B3;
    --brand-green:#22B24C;
    --brand-green-dark:#178A39;
    --brand-red:#D6392E;
    --brand-red-dark:#A82A21;
    --text:#2B2420;
    --text-dim:#8A7F6E;
    --c-single:#8FCAEA;
    --c-condo:#E3AC5C;
    --c-multi:#A9D99F;
    --c-commercial:#EFA17E;
    --c-land:#DCCFA6;
    --status-active:#7CBB8E;
    --status-pending:#E3AC5C;
    --status-sold:#B8AC94;
    --font-display:'Space Grotesk', sans-serif;
    --font-body:'Inter', sans-serif;
    --font-mono:'IBM Plex Mono', monospace;
    --font-poster:'Bodoni Moda', 'Bodoni MT', Didot, 'Playfair Display', serif; 
  }
*{box-sizing:border-box; margin:0; padding:0;}
html,body{height:100%; overflow:hidden; overscroll-behavior:none; touch-action:none;}
body{
    background:var(--paper);
    color:var(--text);
    font-family:var(--font-body);
    background-image:
      radial-gradient(var(--line) 1.1px, transparent 1.1px);
    background-size:22px 22px;
  }
#loading-overlay{
    position:fixed; inset:0; z-index:9999;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
    background:var(--paper);
    transition:opacity 0.4s ease;
  }
#loading-overlay.hidden{ opacity:0; pointer-events:none; }
.loading-emoji{ font-size:56px; animation:loading-bounce 1.1s ease-in-out infinite; }
@keyframes loading-bounce{
    0%, 100% { transform:translateY(0) scale(1); }
    50% { transform:translateY(-14px) scale(1.08); }
  }
.loading-text{
    font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--text-dim);
    letter-spacing:0.3px;
  }
::selection{ background:var(--coral); color:var(--panel); }
::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:transparent; }
::-webkit-scrollbar-thumb{ background:var(--line-bright); border-radius:4px; }
::-webkit-scrollbar-thumb:hover{ background:var(--mint-dark); }
#app{ display:grid; grid-template-columns:minmax(0, 1fr); grid-template-rows:50px 1fr; height:100vh; height:100dvh; }
header{
    grid-column:1 / -1;
    position:relative; z-index:5; 
    
    display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center;
    padding:0 10px; gap:6px;
    border-bottom:2px solid var(--ink-900);
    background:var(--panel);
    z-index:20;
    overflow:hidden; min-width:0; 
  }
.brand{ display:flex; align-items:center; gap:10px; min-width:0; flex:0 1 auto; overflow:hidden; }
.header-right{ display:flex; align-items:center; gap:7px; font-family:var(--font-mono); font-size:13px; color:var(--text-dim); flex-shrink:1; min-width:0; overflow:hidden; }
.count-badge{ display:none; }
.demo-badge{
    border:2px solid var(--mint-dark); color:var(--mint-dark); background:rgba(143,207,192,0.15);
    padding:4px 10px; border-radius:14px; letter-spacing:1px; text-transform:uppercase; font-size:13px; font-weight:600;
    flex-shrink:0;
  }
#canvas-wrap{
    position:fixed; inset:0; z-index:0; overflow:hidden; background:var(--paper);
  }
#three-canvas{ display:block; width:100%; height:100%; touch-action:none; -webkit-user-select:none; user-select:none; -webkit-touch-callout:none; }
#share-btn{
    position:fixed; right:16px; bottom:16px; z-index:30;
    background:var(--coral); color:#fff; border:2.5px solid var(--ink-900); border-radius:50%;
    width:52px; height:52px; display:flex; align-items:center; justify-content:center;
    font-size:22px; line-height:1; cursor:pointer;
    box-shadow:3px 3px 0 rgba(43,36,32,0.3);
    transition:transform .1s ease, box-shadow .1s ease;
  }
#share-btn:hover{ transform:translate(1px,1px); box-shadow:2px 2px 0 rgba(43,36,32,0.3); }
#share-btn:active{ transform:translate(2px,2px); box-shadow:1px 1px 0 rgba(43,36,32,0.3); }
body.onboarding-active #share-btn{ display:none; }
@media (max-width: 480px){
    #share-btn{ right:12px; bottom:12px; width:46px; height:46px; font-size:19px; }
  }

#stop-tour-btn{
    display:none; position:fixed; bottom:22px; left:50%; transform:translateX(-50%); z-index:30;
    background:var(--coral); color:#fff; border:2.5px solid var(--ink-900); border-radius:24px;
    padding:10px 22px; font-family:var(--font-display); font-weight:700; font-size:14px;
    cursor:pointer; box-shadow:3px 3px 0 rgba(43,36,32,0.3);
  }
#stop-tour-btn:active{ transform:translateX(-50%) translateY(2px); box-shadow:1px 1px 0 rgba(43,36,32,0.3); }
body.tour-active #stop-tour-btn{ display:block; }
body.onboarding-active #stop-tour-btn{ display:none; }
#sign-overlay-layer{ position:absolute; inset:0; pointer-events:none; overflow:hidden; z-index:6; }
.sign-tag{
    position:absolute; top:0; left:0; pointer-events:none;
    background:#FDF8EB; border:2px solid #2B2420; border-radius:6px;
    padding:2px 6px; text-align:center; white-space:nowrap;
    font-family:'Space Grotesk', sans-serif;
    box-shadow:2px 2px 0 rgba(43,36,32,0.15);
    will-change:transform;
  }
.sign-tag .sign-name{ font-weight:700; font-size:13px; color:#2B2420; line-height:1.3; }
.sign-tag .sign-price{ font-weight:600; font-size:12px; line-height:1.3; }
.sign-tag.visited{ border-color:#2e8b3d; }
.sign-tag.visited .sign-name{ color:#173d1c; }
.sign-photo{
    position:absolute; top:0; left:0; pointer-events:none;
    width:64px; height:64px; background:#EFE6CC;
    border:2.5px solid #2B2420; border-radius:8px; overflow:hidden;
    box-shadow:2px 2px 0 rgba(43,36,32,0.15);
    will-change:transform;
  }
.sign-photo img{ width:100%; height:100%; object-fit:cover; display:block; }
#legend{
    position:absolute; left:16px; bottom:16px; z-index:10;
    background:var(--panel); border:2px solid var(--ink-900); border-radius:12px;
    padding:10px 14px; font-family:var(--font-mono); font-size:13px;
    box-shadow:3px 3px 0 rgba(43,36,32,0.12);
  }
.legend-row{ display:flex; align-items:center; gap:7px; margin-bottom:5px; color:var(--text-dim); }
.legend-row:last-child{ margin-bottom:0; }
.legend-dot{ width:9px; height:9px; border-radius:3px; flex-shrink:0; }
.legend-dot.outline{ background:transparent; border:1.5px dashed var(--c-land); }
.header-btn{
    display:flex; align-items:center; gap:5px; flex-shrink:0;
    border:2px solid var(--ink-900); border-radius:10px;
    padding:4px 8px; font-family:var(--font-display); font-weight:700; font-size:13px;
    letter-spacing:0.2px; cursor:pointer; white-space:nowrap;
    box-shadow:2px 2px 0 rgba(43,36,32,0.25);
    transition:transform .1s ease, box-shadow .1s ease;
  }
.header-btn:hover{ transform:translate(1px,1px); box-shadow:1px 1px 0 rgba(43,36,32,0.25); }
.header-btn:active{ transform:translate(2px,2px); box-shadow:0 0 0 rgba(43,36,32,0.25); }
#tour-icon, #list-icon, .lance-icon{ font-size:17px; line-height:1; }
.menu-current{ background:var(--mint); }
#hammer-btn{ background:var(--paper); color:var(--ink-900); width:32px; height:32px; padding:0; justify-content:center; font-size:18px; }
.theme-btn{ background:var(--paper); color:var(--ink-900); width:34px; height:34px; padding:0; justify-content:center; font-size:16px; }
.theme-btn.active{ background:var(--mint); box-shadow:2px 2px 0 rgba(43,36,32,0.25), 0 0 0 3px rgba(143,191,143,0.45); cursor:default; }
#hammer-btn.active{ background:var(--coral); box-shadow:2px 2px 0 rgba(43,36,32,0.25), 0 0 0 3px rgba(232,98,61,0.35); }
#ask-lance-btn{
    background:var(--paper); color:var(--ink-900);
    width:34px; height:34px; padding:0; justify-content:center; font-size:19px;
  }
.header-tools{ display:flex; align-items:center; gap:7px; min-width:0; overflow:hidden; }
.header-worlds{ display:flex; align-items:center; gap:7px; min-width:0; overflow:visible; justify-content:flex-end; position:relative; }
.header-center{ display:flex; align-items:center; gap:8px; min-width:0; overflow:hidden; justify-content:center; }
.header-group-label{ font-family:var(--font-mono); font-size:13px; text-transform:uppercase; letter-spacing:1px; color:var(--text-dim); white-space:nowrap; }
.btn-label{ display:none; }
@media (min-width: 901px) and (min-height: 481px){
    .btn-label{ display:inline; }
  }
#menu-btn{ width:34px; height:34px; padding:0; justify-content:center; font-size:19px; background:var(--paper); color:var(--ink-900); }
#brand-logo{ max-height:34px; max-width:min(280px, 60vw); width:auto; height:auto; display:block; object-fit:contain; }
#main-menu{
    display:none; position:fixed;
    
    top:58px; bottom:12px; overflow-y:auto;
    background:var(--panel); border:2.5px solid var(--ink-900); border-radius:12px;
    box-shadow:3px 3px 0 rgba(43,36,32,0.25);
    flex-direction:column; padding:6px; gap:2px; min-width:210px; z-index:1000;
  }
#main-menu.open{ display:flex; }
#main-menu-status{
    display:flex; align-items:center; gap:8px; padding:6px 10px 8px;
    border-bottom:1.5px solid var(--line); margin-bottom:4px;
  }
.main-menu-item{
    display:flex; align-items:center; gap:10px; padding:9px 10px; width:100%;
    border:none; border-radius:8px; background:transparent; cursor:pointer;
    font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--ink-900);
    text-align:left; white-space:nowrap;
  }
.main-menu-item:hover{ background:var(--paper); }
.main-menu-item.active{ background:var(--mint); cursor:default; }
.main-menu-item span:first-child{ font-size:18px; line-height:1; flex-shrink:0; }
.main-menu-divider{ height:1.5px; background:var(--line); margin:5px 6px; }
.themes-toggle{ justify-content:space-between; }
.themes-toggle-chevron{ margin-left:auto; font-size:13px; flex-shrink:0; transition:transform 0.2s ease; }
.themes-toggle[aria-expanded="true"] .themes-toggle-chevron{ transform:rotate(180deg); }
.themes-sublist{
    display:flex; flex-direction:column; gap:2px;
    padding-left:20px; 
    max-height:0; overflow:hidden;
    transition:max-height 0.25s ease;
  }
.themes-sublist.expanded{ max-height:220px; }
.themes-sublist .main-menu-item{ padding-top:7px; padding-bottom:7px; font-size:13px; }
.themes-sublist .main-menu-item span:first-child{ font-size:16px; }
#ability-dock{
    position:absolute; left:50%; bottom:16px; transform:translateX(-50%);
    display:flex; align-items:center; gap:8px; z-index:25; 
  }
#ability-dock .header-btn{ box-shadow:3px 3px 0 rgba(43,36,32,0.18); }
body.onboarding-active #ability-dock{ display:none; }
body.detail-open #ability-dock{ display:none; }
@media (max-width: 900px), (max-height: 480px){
    
    .header-group-label{ display:none; } 
    .header-btn{ padding:7px 9px; }
    .header-tools, .header-worlds, .header-center{ gap:6px; }
    
    header .count-badge{ display:none; }
    header .demo-badge{ display:none; } 
  }
header.header-compact .btn-label{ display:none; }
header.header-compact .header-group-label{ display:none; }
header.header-compact .header-btn{ padding:7px 9px; }
header.header-compact .brand{ gap:6px; }
header.header-compact .demo-badge{ display:none; }
#list-modal{
    display:none; position:fixed; top:50px; left:0; right:0; bottom:0; z-index:2;
    background:var(--panel);
  }
#list-modal.open{ display:flex; }
#search-modal{
    display:none; position:fixed; inset:0; z-index:41;
    background:rgba(43,36,32,0.88);
    align-items:center; justify-content:center;
  }
#search-modal.open{ display:flex; }
#search-modal.onboarding{ background:none; }
#search-modal.onboarding #search-close{ display:none; }
#search-modal.onboarding #search-header{ display:none; }
#search-modal.onboarding #search-panel{ background:none; border:none; box-shadow:none; max-height:96vh; }
#search-modal.onboarding #search-form label,
  #search-modal.onboarding #sf-view-label,
  #search-modal.onboarding #sf-status-msg,
  #search-modal.onboarding #current-count-msg{ color:#fff; text-shadow:0 1px 4px rgba(0,0,0,0.85); }
#search-modal.onboarding #sf-status-msg.error{ color:#ff5c5c; font-weight:700; text-shadow:0 1px 4px rgba(0,0,0,0.9); }
body.onboarding-active #app-header{ display:none; }
#onboarding-headline{ display:none; padding:20px 20px 6px; text-align:center; }
#search-modal.onboarding #onboarding-headline{ display:block; }
#onboarding-title{ font-family:var(--font-display); font-weight:700; font-size:20px; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,0.85); }
#onboarding-sub{ font-family:var(--font-body); font-size:13px; color:#fff; text-shadow:0 1px 4px rgba(0,0,0,0.85); margin-top:4px; }
.view-choice-btn{
    display:flex; align-items:center; justify-content:center; gap:8px;
    width:100%; padding:14px; background:var(--brand-green); border:2.5px solid var(--brand-green-dark); border-radius:12px;
    font-family:var(--font-display); font-weight:700; font-size:15px; color:#fff;
    cursor:pointer; box-shadow:3px 3px 0 rgba(43,36,32,0.2);
    transition:transform .1s ease, box-shadow .1s ease;
  }
.view-choice-btn span:first-child{ font-size:19px; }
.view-choice-btn:hover{ background:var(--brand-green-dark); transform:translate(1px,1px); box-shadow:2px 2px 0 rgba(43,36,32,0.2); }
.view-choice-btn:disabled{ background:var(--mint); border-color:var(--ink-900); color:var(--ink-900); }
#search-panel{
    width:min(420px, 92vw); max-height:88vh;
    background:var(--panel); color:var(--ink-900);
    border:3px solid var(--ink-900); border-radius:16px;
    display:flex; flex-direction:column; overflow:hidden;
    box-shadow:6px 6px 0 rgba(43,36,32,0.3);
  }
#search-header{
    display:flex; align-items:center; justify-content:space-between;
    padding:16px 20px; border-bottom:2.5px solid var(--ink-900); flex-shrink:0;
  }
#search-title{ font-family:var(--font-display); font-weight:700; font-size:16px; }
#search-title-sub{ display:block; font-family:var(--font-body); font-weight:500; font-size:13px; color:var(--text-dim); margin-top:1px; }
/* Clear now lives only at the bottom, next to Lookup -- one button, not a second copy up here. */
#search-close{
    background:none; border:none; cursor:pointer;
    font-family:var(--font-display); font-weight:800; font-size:28px; color:var(--ink-900); line-height:1; opacity:.75;
  }
#search-close:hover{ opacity:1; }
#search-form{
    display:flex; flex-direction:column; gap:3px;
    padding:8px 16px 10px; overflow-y:auto;
  }
.sf-field{ display:flex; flex-direction:column; min-width:0; }
#search-form label{
    font-family:var(--font-mono); font-size:13px; font-weight:700; color:var(--text-dim);
    letter-spacing:0.3px; text-transform:uppercase; margin-bottom:1px; display:block; line-height:1.2;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
#search-form input[type="text"]{
    font-family:var(--font-body); font-size:13.5px; color:var(--ink-900);
    background:var(--paper); border:2px solid var(--ink-900); border-radius:8px;
    padding:3px 8px; width:100%; box-sizing:border-box; height:29px;
  }
#search-form select{
    font-family:var(--font-body); font-size:13.5px; color:var(--ink-900);
    background:var(--paper); border:2px solid var(--ink-900); border-radius:8px;
    padding:3px 26px 3px 8px; width:100%; box-sizing:border-box; appearance:none; height:29px;
    text-overflow:ellipsis;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat:no-repeat; background-position:right 10px center; background-size:16px;
  }
/* Min–Max rows use the same two equal columns and gap as the paired fields above and below
   them, so every half-width box lines up down the form; the dash sits in the gap between. */
.search-field-row{ display:grid; grid-template-columns:1fr 1fr; gap:8px; position:relative; align-items:center; }
.search-field-row input{ min-width:0; }
.search-field-sep{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); pointer-events:none; color:var(--text-dim); font-family:var(--font-body); font-size:13px; line-height:1; }
.search-field-pair{ display:flex; gap:8px; }
.search-field-pair > div{ flex:1 1 0; min-width:0; }
/* A bare match to the ordinary 3px row gap read as scrunched once actual buttons this size
   (44px, see #sf-search/#sf-clear-inline) sit right under a small input -- the same numeric gap
   carries a lot more visual weight next to a big solid-color button than between two beige
   boxes. Real margin on both sides, not just the shared inter-row gap. */
#sf-action-row{ display:flex; gap:8px; margin-top:12px; margin-bottom:10px; }
#sf-search{
    flex:1 1 auto; font-family:var(--font-display); font-weight:700; font-size:15px;
    color:#fff; background:var(--brand-blue); border:2px solid var(--brand-blue-dark); border-radius:10px;
    padding:9px; height:44px; box-sizing:border-box; cursor:pointer;
  }
#sf-search:hover{ background:var(--brand-blue-dark); }
/* The opening screen has no header to hold a Clear button, so it sits beside Lookup there.
   In the regular search menu the header already has "Clear results", so this one is hidden. */
#sf-clear-inline{
    flex:0 0 auto; font-family:var(--font-display); font-weight:700; font-size:14px;
    color:#fff; background:var(--brand-red); border:2px solid var(--brand-red-dark); border-radius:10px;
    padding:9px 16px; height:44px; box-sizing:border-box; cursor:pointer;
  }
#sf-clear-inline:active{ transform:translateY(1px); background:var(--brand-red-dark); }
@media (hover: hover){ #sf-clear-inline:hover{ background:var(--brand-red-dark); } }
#sf-search:active{ transform:translateY(1px); }
#sf-search:disabled{ opacity:.5; cursor:default; }
/* Hidden until a search has actually been run (see revealViewOptions/hideViewOptions in
   engine.js) -- the view choice only makes sense once Lookup has been pressed. */
#sf-view-label{ display:none; font-family:var(--font-body); font-size:13px; color:var(--ink-700); margin-top:6px; text-align:center; }
#sf-view-buttons{ display:none; gap:8px; margin-top:6px; }

/* Simple search is the default (Type, location, Price only); "More options" reveals the rest
   -- a mode of this SAME form/modal (no separate page, so switching never reloads anything).
   The toggle class lives on #search-panel, the shared ancestor of both header rows and the
   form, so the mode buttons (in either header) and .sf-advanced (in the form) can react to it. */
.sf-advanced{ display:none; }
#search-panel.full-options-mode .search-field-pair.sf-advanced{ display:flex; }
#search-panel.full-options-mode .sf-field.sf-advanced{ display:flex; }

#sf-mode-actions-row{ display:flex; justify-content:center; gap:10px; margin:10px 0; flex-wrap:wrap; }
#sf-more-btn, #sf-fewer-btn, #sf-blank-search-btn{
    font-family:var(--font-display); font-weight:700; font-size:12.5px; white-space:nowrap;
    color:#fff; background:var(--brand-blue); border:2px solid var(--brand-blue-dark); border-radius:999px;
    padding:7px 14px; cursor:pointer;
  }
@media (hover: hover){ #sf-more-btn:hover, #sf-fewer-btn:hover, #sf-blank-search-btn:hover{ background:var(--brand-blue-dark); } }
#sf-fewer-btn, #sf-blank-search-btn{ display:none; }
#search-panel.full-options-mode #sf-more-btn{ display:none; }
#search-panel.full-options-mode #sf-fewer-btn, #search-panel.full-options-mode #sf-blank-search-btn{ display:inline-block; }

/* A min-only numeric field's stepper (Beds, Baths, Finished square footage, Lot size): one
   bordered box holding the input and, in its own narrow column on the right, a stacked up/down
   pair of arrow buttons -- rather than the previous separate "-" and "+" buttons flanking the
   input, which read as unrelated controls instead of one connected control. */
.sf-stepper{
    display:flex; align-items:stretch; background:var(--paper); border:2px solid var(--ink-900); border-radius:8px;
    overflow:hidden;
  }
#search-form .sf-stepper input{
    flex:1 1 auto; min-width:0; text-align:left; border:none; border-radius:0; background:transparent;
  }
.sf-stepper input:focus{ outline:none; }
.sf-stepper-arrows{ display:flex; flex-direction:column; flex:0 0 auto; width:26px; border-left:2px solid var(--ink-900); }
.sf-step-btn{
    flex:1 1 0; display:flex; align-items:center; justify-content:center; min-height:0;
    background:var(--paper); border:none; padding:0; cursor:pointer; position:relative;
  }
.sf-step-btn:first-child{ border-bottom:1.5px solid var(--line-bright); }
.sf-step-btn:active{ background:var(--paper-dim); }
/* The up/down arrowheads, drawn in CSS rather than a character or icon font so they stay crisp
   and perfectly centered at any size. */
.sf-step-btn::before{
    content:""; width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent;
  }
.sf-step-btn:first-child::before{ border-bottom:5px solid var(--ink-700); }
.sf-step-btn:last-child::before{ border-top:5px solid var(--ink-700); }

#sf-view-label.revealed{ display:block; }
#sf-view-buttons.revealed{ display:flex; }
#sf-view-buttons .view-choice-btn{
    flex:1 1 0; padding:8px 6px; font-size:13px;
  }
#sf-view-buttons .view-choice-btn span:first-child{ font-size:16px; }
#sf-view-buttons .view-choice-btn:disabled{ opacity:.5; cursor:default; pointer-events:none; }
#sf-status-msg{
    font-family:var(--font-body); font-size:13px; color:var(--text-dim);
    min-height:16px; text-align:center;
  }
#sf-status-msg.error{ color:#d32f2f; font-weight:700; }
#current-count-msg{
    font-family:var(--font-mono); font-size:13px; color:var(--text-dim);
    text-align:center; letter-spacing:0.3px; margin-top:2px;
  }
/* The search form has to fit with no scrollbar. Shorter windows tighten it a step at a time... */
@media (max-height: 800px){
  #onboarding-headline{ padding:6px 20px 2px; }
  #onboarding-title{ font-size:18px; }
  #onboarding-sub{ margin-top:1px; }
  #search-form{ gap:0px; padding:3px 14px 5px; }
  #search-form input[type="text"], #search-form select{ height:25px; font-size:13px; }
  #sf-action-row{ margin-top:9px; margin-bottom:7px; }
  #sf-search, #sf-clear-inline{ padding-top:5px; padding-bottom:5px; }
  #sf-view-label{ margin-top:2px; }
  #sf-view-buttons .view-choice-btn{ padding:4px 6px; }
  #sf-mode-actions-row{ margin:6px 0; gap:8px; }
  #sf-more-btn, #sf-fewer-btn, #sf-blank-search-btn{ padding:5px 11px; font-size:11.5px; }
  .sf-stepper-arrows{ width:23px; }
  #sf-status-msg{ min-height:14px; }
}
@media (max-height: 640px){
  #onboarding-headline{ padding:3px 20px 1px; }
  #onboarding-title{ font-size:16px; }
  #onboarding-sub{ }
  #search-form{ gap:0px; padding:1px 12px 3px; }
  #search-form label{ margin-bottom:0; }
  #search-form input[type="text"], #search-form select{ height:23px; font-size:13px; }
  #sf-search, #sf-clear-inline{ padding-top:3px; padding-bottom:3px; font-size:14px; }
  #sf-action-row{ margin-top:6px; margin-bottom:5px; }
  #sf-view-label{ margin-top:1px; }
  #sf-view-buttons{ margin-top:2px; }
  #sf-view-buttons .view-choice-btn{ padding:3px 6px; font-size:13px; }
  #sf-mode-actions-row{ margin:4px 0; gap:6px; }
  #sf-more-btn, #sf-fewer-btn, #sf-blank-search-btn{ padding:4px 10px; font-size:11px; }
  .sf-stepper-arrows{ width:21px; }
  #sf-status-msg{ min-height:12px; }
}
/* ...and a phone on its side (wide but short) lays the form out in two columns. */
@media (orientation: landscape) and (max-height: 560px){
  #search-panel{ width:min(780px, 96vw); }
  #onboarding-headline{ padding:2px 20px 0px; }
  #onboarding-title{ font-size:15px; }
  #onboarding-sub{ margin-top:0px; }
  #search-form{ display:grid; grid-template-columns:1fr 1fr; column-gap:14px; row-gap:0px; padding:0px 14px 0px; }
  #search-form input[type="text"], #search-form select{ height:17px; }
  #search-form > #sf-action-row, #search-form > #sf-view-label, #search-form > #sf-view-buttons,
  #search-form > #sf-status-msg, #search-form > #current-count-msg{ grid-column:1 / -1; }
  #search-form label{ margin-bottom:0; }
  #sf-action-row{ margin-top:4px; margin-bottom:3px; }
  #sf-view-label{ margin-top:0px; }
  #sf-mode-actions-row{ margin:0; gap:6px; }
  #sf-more-btn, #sf-fewer-btn, #sf-blank-search-btn{ padding:2px 8px; font-size:10.5px; }
  .sf-stepper-arrows{ width:19px; }
  #sf-view-buttons{ margin-top:1px; }
  #sf-view-buttons .view-choice-btn{ padding:2px 6px; }
  #sf-status-msg{ min-height:9px; font-size:13px; }
  #search-header{ padding:1px 16px; }
  #current-count-msg{ margin-top:0px; }
  #search-title{ font-size:15px; }
  #search-title-sub{ font-size:11px; }
}
#list-title .list-title-count{
    font-family:var(--font-mono); font-size:13px; font-weight:400;
    color:var(--text-dim); letter-spacing:0.3px; margin-left:6px;
  }
#list-panel{
    width:100%; height:100%;
    background:var(--panel); color:var(--ink-900);
    display:flex; flex-direction:column; overflow:hidden;
  }
#list-header, #map-header, .dp-header, #price-game-header{
    display:flex; align-items:center; justify-content:space-between;
    padding:9px 16px; border-bottom:2.5px solid var(--ink-900); flex-shrink:0;
  }
#list-title{ font-family:var(--font-display); font-weight:700; font-size:16px; }
#list-close, #map-close, .dp-close, #price-game-close{
    background:none; border:none; cursor:pointer; flex-shrink:0; margin-left:10px;
    font-family:var(--font-mono); font-size:18px; color:var(--ink-900); line-height:1; opacity:.6;
  }
#list-close:hover, #map-close:hover, .dp-close:hover, #price-game-close:hover{ opacity:1; }
#map-modal{
    display:none; position:fixed; top:50px; left:0; right:0; bottom:0; z-index:2;
    background:var(--panel);
  }
#map-modal.open{ display:flex; }
#map-panel{
    width:100%; height:100%;
    background:var(--panel); color:var(--ink-900);
    display:flex; flex-direction:column; overflow:hidden;
  }
#map-title{ font-family:var(--font-display); font-weight:700; font-size:16px; }
#map-title .list-title-count{
    font-family:var(--font-mono); font-size:13px; font-weight:400;
    color:var(--text-dim); letter-spacing:0.3px; margin-left:6px;
  }
#map-canvas{ flex:1 1 auto; min-height:0; background:var(--paper-dim); }
#map-empty{
    display:none; flex:1 1 auto; align-items:center; justify-content:center;
    font-family:var(--font-body); font-size:13px; color:var(--text-dim); text-align:center; padding:20px;
  }
.map-popup-price{ font-family:var(--font-display); font-weight:700; font-size:14px; color:var(--ink-900); }
.map-popup-addr{ font-family:var(--font-body); font-size:13px; color:var(--ink-800); margin-top:2px; }
.map-popup-photo{ width:100%; height:80px; object-fit:cover; border-radius:6px; margin-bottom:6px; }
.map-popup-box{ cursor:pointer; }
.map-popup-box:hover .map-popup-view-btn{ transform:translate(1px,1px); box-shadow:1px 1px 0 rgba(43,36,32,0.25); }
.map-popup-view-btn{
    display:block; width:100%; margin-top:8px; padding:6px 8px;
    background:var(--coral); color:#FFFDF6; border:2px solid var(--ink-900); border-radius:8px;
    font-family:var(--font-display); font-weight:700; font-size:13px; letter-spacing:0.2px;
    cursor:pointer; text-align:center; box-shadow:2px 2px 0 rgba(43,36,32,0.25);
  }
.map-popup-view-btn:hover{ transform:translate(1px,1px); box-shadow:1px 1px 0 rgba(43,36,32,0.25); }
#price-game-modal{
    display:none; position:fixed; top:50px; left:0; right:0; bottom:0; z-index:40;
    background:rgba(43,36,32,0.92);
    align-items:center; justify-content:center; padding:16px; box-sizing:border-box;
  }
#price-game-modal.open{ display:flex; }
#price-game-panel{
    position:relative;
    width:min(480px, 94vw);
    /* Mobile browsers report `vh` against the tallest the page COULD be (address bar
       hidden), not the shorter space actually visible with it shown, which let this
       overflow past the bottom of the screen even though the number "94%" looked safe.
       `dvh` tracks the real, currently-visible height; kept plain "94%" first for the
       (rare) browser that doesn't support dvh at all. */
    max-height:94%;
    max-height:94dvh;
    box-sizing:border-box;
    border:4px solid var(--ink-900); border-radius:20px;
    box-shadow:8px 8px 0 rgba(43,36,32,0.35);
    display:flex; flex-direction:column; align-items:stretch; overflow:hidden;
    background:#3a2f28; color:#FFFDF6;
  }
#price-game-header{
    border-bottom-color:rgba(255,255,255,0.25);
  }
#price-game-title{ font-family:var(--font-display); font-weight:700; font-size:15px; }
#price-game-body{
    flex:1; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch;
    padding:16px 20px 46px; box-sizing:border-box;
    display:flex; flex-direction:column; align-items:stretch; gap:14px;
  }
#price-game-close{
    position:static; flex-shrink:0; margin-left:10px;
    width:auto; height:auto; border-radius:0;
    background:none; border:none; color:#fff; opacity:.75;
    font-family:var(--font-mono); font-size:18px; line-height:1; cursor:pointer;
  }
#price-game-close:hover{ opacity:1; }
#pg-marquee{
    text-align:center; font-family:var(--font-display); font-weight:700;
    font-size:15px; letter-spacing:3px; padding:8px 10px; border-radius:10px;
  }
#pg-marquee-sub{
    display:block; font-size:13px; font-weight:600; letter-spacing:1.5px;
    margin-top:3px; opacity:0.85;
  }
#pg-cabinet{ display:flex; align-items:stretch; gap:10px; }
#pg-screen-bezel{
    position:relative;
    flex:1 1 auto; min-width:0; border-radius:12px; padding:16px;
    border:3px solid rgba(0,0,0,0.4); box-shadow:inset 0 0 0 3px rgba(255,255,255,0.15);
  }
#pg-screen{
    position:relative; width:100%; aspect-ratio:4/3; border-radius:8px;
    overflow:hidden; background:#1a1410;
    box-shadow:inset 0 0 24px rgba(0,0,0,0.6);
  }
#pg-photo{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    display:block;
  }
#pg-empty-state{
    display:none; position:absolute; inset:0; align-items:center; justify-content:center;
    text-align:center; padding:16px; box-sizing:border-box;
    font-family:var(--font-body); font-weight:600; font-size:13px; color:#FFFDF6;
    background:rgba(0,0,0,0.55);
  }
#price-game-panel.pg-empty #pg-empty-state{ display:flex; }
#price-game-panel.pg-empty #pg-photo{ display:none; }
#pg-loading-state{
    display:none; position:absolute; inset:0; align-items:center; justify-content:center;
    text-align:center; padding:16px; box-sizing:border-box;
    font-family:var(--font-body); font-weight:600; font-size:13px; color:#FFFDF6;
    background:rgba(0,0,0,0.55);
  }
#price-game-panel.pg-loading #pg-loading-state{ display:flex; }
#price-game-panel.pg-loading #pg-photo{ display:none; }
#pg-reveal-price{
    display:none; position:absolute; left:0; right:0; bottom:0;
    padding:8px 10px; text-align:center;
    font-family:var(--font-poster); font-weight:900; font-size:22px; letter-spacing:0.5px;
    color:#fff; background:rgba(0,0,0,0.55);
  }
#price-game-panel.pg-revealed #pg-reveal-price{ display:block; }
#pg-screen.pg-scrambling #pg-photo{ animation:pg-scramble-filter 0.12s steps(1) infinite; }
@keyframes pg-scramble-filter{
    0%{ filter:brightness(1.3) contrast(1.2) hue-rotate(0deg); transform:scale(1.02) translateY(0); }
    33%{ filter:brightness(0.7) contrast(1.4) hue-rotate(40deg); transform:scale(1.04) translateY(-2%); }
    66%{ filter:brightness(1.5) saturate(1.6) hue-rotate(-30deg); transform:scale(1.03) translateY(2%); }
    100%{ filter:brightness(1) contrast(1) hue-rotate(0deg); transform:scale(1.02) translateY(0); }
  }
#pg-banner-wrap{
    display:none; position:absolute; top:0; left:0; right:0; bottom:38px; align-items:center; justify-content:center;
    pointer-events:none; overflow:hidden;
  }
#price-game-panel.pg-revealed #pg-banner-wrap{ display:flex; }
#pg-banner{
    font-family:var(--font-poster); font-weight:900; font-size:clamp(16px, 5.5vw, 26px);
    letter-spacing:1px; text-transform:uppercase; text-align:center; line-height:1.1;
    color:#fff; background:var(--coral); padding:10px 16px; border:3px solid var(--ink-900);
    box-shadow:4px 4px 0 rgba(0,0,0,0.5);
    max-width:88%;
    transform:rotate(-6deg) scale(0);
    animation:pg-banner-smash 0.45s cubic-bezier(.2,1.4,.5,1) 0.05s forwards;
  }
@keyframes pg-banner-smash{
    0%{ transform:rotate(-6deg) scale(0); }
    70%{ transform:rotate(-6deg) scale(1.15); }
    100%{ transform:rotate(-6deg) scale(1); }
  }
#pg-lever-track{
    flex:0 0 auto; width:34px; display:flex; flex-direction:column; align-items:center;
    justify-content:flex-end; padding-bottom:6px;
    perspective:300px; 
  }
#pg-lever{
    width:8px; height:120px; border-radius:6px;
    background:linear-gradient(90deg, #888, #ddd 40%, #888);
    
    transform-origin:bottom center;
    transform:rotate(-8deg) rotateY(25deg);
    box-shadow:1px 0 2px rgba(0,0,0,0.4);
  }
#pg-lever.pg-pulled{ animation:pg-lever-pull 0.9s cubic-bezier(.4,0,.2,1) forwards; }
@keyframes pg-lever-pull{
    0%{ transform:rotate(-8deg) rotateY(25deg); }
    35%{ transform:rotate(34deg) rotateY(25deg); }
    60%{ transform:rotate(34deg) rotateY(25deg); }
    100%{ transform:rotate(-8deg) rotateY(25deg); }
  }
#pg-lever-knob{
    width:26px; height:26px; border-radius:50%; margin:-4px 0 0 -9px;
    background:radial-gradient(circle at 35% 30%, #ff8a6b, var(--coral) 60%, #a03d20);
    border:2px solid var(--ink-900);
  }
#pg-controls{ display:flex; flex-direction:column; align-items:center; gap:8px; }
#pg-guess-label{
    font-family:var(--font-mono); font-size:13px; letter-spacing:1.5px; text-transform:uppercase;
    color:rgba(255,255,255,0.75);
  }
#pg-input-row{
    display:flex; align-items:center; gap:6px;
    background:#FFFDF6; border:3px solid var(--ink-900); border-radius:10px;
    padding:8px 14px; width:min(220px, 100%); box-sizing:border-box;
  }
#pg-dollar-sign{ font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--ink-900); }
#pg-guess-input{
    flex:1 1 auto; min-width:0; border:none; outline:none; background:none;
    font-family:var(--font-display); font-weight:700; font-size:18px; color:var(--ink-900);
  }
#pg-again-btn{
    display:none; position:absolute; right:14px; bottom:14px; z-index:2;
    background:rgba(0,0,0,0.35); border:2px solid rgba(255,255,255,0.6); color:#fff;
    border-radius:20px; padding:7px 14px; font-family:var(--font-display); font-weight:700;
    font-size:13px; cursor:pointer;
  }
#price-game-panel:not(.pg-empty):not(.pg-loading) #pg-again-btn{ display:inline-block; }
#price-game-panel.pg-revealed #pg-guess-btn,
  #price-game-panel.pg-revealed #pg-input-row{ opacity:0.5; pointer-events:none; }
#pg-view-listing-btn{
    display:none; position:absolute; left:14px; bottom:14px; z-index:2;
    background:rgba(0,0,0,0.35); border:2px solid rgba(255,255,255,0.6); color:#fff;
    border-radius:20px; padding:7px 14px; font-family:var(--font-display); font-weight:700;
    font-size:13px; cursor:pointer;
  }
#price-game-panel:not(.pg-empty):not(.pg-loading) #pg-view-listing-btn{ display:inline-block; }
#pg-reels{ display:flex; align-items:center; justify-content:center; gap:8px; }
.pg-reel{
    width:44px; height:44px; border-radius:6px; display:flex; align-items:center; justify-content:center;
    background:#1a1410; border:2px solid rgba(255,255,255,0.35); box-shadow:inset 0 0 8px rgba(0,0,0,0.6);
    font-size:24px; line-height:1;
  }
.pg-reel.pg-spinning{ animation:pg-reel-spin 0.08s steps(1) infinite; }
@keyframes pg-reel-spin{
    0%{ transform:translateY(0); filter:brightness(1.4); }
    50%{ transform:translateY(3px); filter:brightness(0.8); }
    100%{ transform:translateY(0); filter:brightness(1.4); }
  }
#pg-guess-btn{
    width:75px; height:75px; border-radius:50%; cursor:pointer;
    background:radial-gradient(circle at 35% 30%, #6fd68f, #3fae63 55%, #1f7a3f);
    border:3px solid #d9a635; box-shadow:0 0 0 2px var(--ink-900), 0 4px 0 #14512a, 0 5px 10px rgba(0,0,0,0.4);
    color:#fff; font-family:var(--font-display); font-weight:700; font-size:13px; line-height:1.15;
    text-transform:uppercase; letter-spacing:0.2px;
    display:flex; flex-direction:column; align-items:center; justify-content:center;
  }
#pg-guess-btn span{ display:block; }
#pg-guess-btn:active{ box-shadow:0 0 0 2px var(--ink-900), 0 1px 0 #14512a, 0 2px 5px rgba(0,0,0,0.4); transform:translateY(3px); }
#pg-guess-btn:disabled{ opacity:0.6; cursor:default; }
.pg-decor{ display:none; position:absolute; pointer-events:none; z-index:5; }
.pg-decor-tl{ position:static; top:auto; left:auto; width:46px; height:46px; }
.pg-decor-tr{ position:static; top:auto; right:auto; width:46px; height:46px; }
.pg-decor-flapper{ left:2px; top:50%; width:34px; height:auto; transform:translateY(-50%); }
.pg-decor-bowler{ right:2px; top:50%; width:34px; height:auto; transform:translateY(-50%); }
.pg-theme-egypt{
    background-color:#a97c2f;
    background-image:
      radial-gradient(circle, rgba(240,201,90,0.55) 0 2px, transparent 2.5px),
      linear-gradient(180deg, #cfa34d, #a97c2f 60%, #8a611f);
    background-size:26px 26px, 100% 100%;
    background-position:0 0, 0 0;
  }
.pg-theme-egypt #pg-marquee{ background:#1f2d4a; color:#f0c95a; border:2px solid #f0c95a; }
.pg-theme-egypt #pg-screen-bezel{
    
    background-color:#1f2d4a;
    background-image:
      radial-gradient(circle, rgba(240,201,90,0.7) 0 2px, transparent 2.5px);
    background-size:20px 20px;
  }
.pg-theme-egypt #pg-banner{ background:#f0c95a; color:#1f2d4a; }
.pg-theme-egypt #pg-again-btn,
  .pg-theme-egypt #pg-view-listing-btn{ background:#1f2d4a; border-color:#f0c95a; color:#f0c95a; }
.pg-theme-egypt .pg-decor-pharaoh{ display:block; }
.pg-theme-jungle{
    background-image: repeating-linear-gradient(115deg, #e8792e 0 22px, #1a1410 22px 30px, #e8792e 30px 55px, #1a1410 55px 62px);
  }
.pg-theme-jungle #pg-marquee{ background:#1a1410; color:#f4a83f; border:2px solid #f4a83f; }
.pg-theme-jungle #pg-screen-bezel{
    background-image: repeating-linear-gradient(115deg, #e8792e 0 12px, #1a1410 12px 16px, #e8792e 16px 28px, #1a1410 28px 32px);
  }
.pg-theme-jungle #pg-banner{ background:#d9852f; color:#1f2d0f; }
.pg-theme-jungle #pg-again-btn,
  .pg-theme-jungle #pg-view-listing-btn{ background:#1f2d0f; border-color:#f4a83f; color:#f4a83f; }
.pg-theme-jungle .pg-decor-tiger{ display:block; }
.pg-theme-saloon{
    background-image: repeating-linear-gradient(90deg, #4a2f22 0 58px, #3a2419 58px 64px);
    background-color:#2a1916;
  }
.pg-theme-saloon #pg-marquee{ background:#c7a252; color:#2a1916; border:2px solid #e8c878; }
.pg-theme-saloon #pg-screen-bezel{
    background-image: repeating-linear-gradient(90deg, #4a2f22 0 26px, #3a2419 26px 30px);
    background-color:#2a1916;
    position:relative;
  }
.pg-theme-saloon #pg-banner{ background:#e8c878; color:#2a1916; }
.pg-theme-saloon #pg-again-btn,
  .pg-theme-saloon #pg-view-listing-btn{ background:#2a1916; border-color:#e8c878; color:#e8c878; }
.pg-theme-saloon .pg-decor-flapper,
  .pg-theme-saloon .pg-decor-bowler{ display:block; }
/* Guess the Price: the photo box alone runs ~360px tall at full panel width, so the
   normal single-column layout only fits comfortably in a tall window. Any window that's
   wider than it is tall (a phone turned sideways, a PC browser that isn't maximized) needs
   the compact side-by-side layout much sooner than a plain height check alone would catch —
   a landscape PC window is very often 550-800px tall, well above the old 500px cutoff, and
   was overflowing there. (max-height:500px) alone still covers short windows of any shape. */
@media (max-height: 500px), (max-height: 760px) and (orientation: landscape){
    #price-game-panel{
      width:min(640px, 96vw);
      max-height:96vh;
      max-height:96dvh;
    }
    #price-game-header{ padding:6px 14px; }
    #price-game-body{
      padding:8px 14px 10px; gap:5px;
      display:grid; align-items:start;
      grid-template-columns:1fr 1fr;
      grid-template-areas:
        "marquee marquee"
        "cabinet reels"
        "cabinet controls";
    }
    #price-game-close{ width:20px; font-size:13px; }
    #pg-marquee{ grid-area:marquee; font-size:13px; padding:5px 8px; letter-spacing:1.5px; }
    #pg-marquee-sub{ font-size:13px; margin-top:1px; }
    #pg-cabinet{ grid-area:cabinet; }
    #pg-reels{ grid-area:reels; margin-top:0; }
    /* The 3-line "GUESS THE PRICE" text is taller now that it's at least 10pt (was 8px here),
       so it needs to sit higher, clear of the New Property pill absolutely-positioned at this
       panel's bottom-right corner. */
    #pg-controls{ grid-area:controls; gap:5px; padding-bottom:34px; }
    #pg-screen-bezel{ padding:10px; }
    #pg-guess-btn{ width:60px; height:60px; font-size:13px; }
    #pg-input-row{ padding:5px 10px; }
  }
#list-toolbar{
    display:flex; flex-wrap:wrap; align-items:center; gap:8px;
    padding:10px 14px; border-bottom:2px solid var(--line); flex-shrink:0;
    background:var(--paper);
  }
#list-toolbar label{
    font-family:var(--font-mono); font-size:13px; color:var(--text-dim);
    letter-spacing:0.3px; text-transform:uppercase; margin-right:2px;
  }
#search-input{
    font-family:var(--font-body); font-size:13px; color:var(--ink-900);
    background:var(--panel); border:2px solid var(--ink-900); border-radius:8px;
    padding:6px 10px; flex:1 1 160px; min-width:120px;
  }
#search-input::placeholder{ color:var(--text-dim); }
#sort-field, #sort-dir-btn{
    font-family:var(--font-body); font-size:13px; color:var(--ink-900);
    background:var(--panel); border:2px solid var(--ink-900); border-radius:8px;
    padding:5px 8px; cursor:pointer;
  }
#sort-dir-btn{
    display:flex; align-items:center; gap:4px; font-weight:600;
    box-shadow:2px 2px 0 rgba(43,36,32,0.12);
    transition:transform .1s ease, box-shadow .1s ease;
  }
#sort-dir-btn:hover{ transform:translate(1px,1px); box-shadow:1px 1px 0 rgba(43,36,32,0.12); }
#list-items{ flex:1; overflow-y:auto; padding:10px; touch-action:pan-y; }
.list-item{
    display:flex; align-items:center; gap:12px; width:100%;
    background:var(--paper); border:2px solid var(--ink-900); border-radius:12px;
    padding:9px; margin-bottom:9px; cursor:pointer; text-align:left;
    font-family:var(--font-body); box-shadow:2px 2px 0 rgba(43,36,32,0.12);
    transition:transform .1s ease, box-shadow .1s ease;
  }
.list-item:hover{ transform:translate(1px,1px); box-shadow:1px 1px 0 rgba(43,36,32,0.12); }
.list-item:last-child{ margin-bottom:0; }
.list-item-photo{
    width:64px; height:64px; border-radius:8px; object-fit:cover; flex-shrink:0;
    border:1.5px solid var(--ink-900); background:var(--paper-dim);
  }
.list-item-photo-empty{ display:flex; align-items:center; justify-content:center; }
.list-item-info{ min-width:0; flex:1; }
.list-item-price{ font-family:var(--font-display); font-weight:700; font-size:15px; color:var(--coral); }
.list-item-addr{ font-size:13px; font-weight:500; line-height:1.35; margin-top:1px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.list-item-meta{ font-family:var(--font-mono); font-size:13px; color:var(--text-dim); margin-top:3px; letter-spacing:0.3px; }
@media (max-width: 860px), (max-height: 500px){
    .brand-mark{ font-size:16px; }
  }
#detail-panel{
    position:fixed; top:50px; left:0; right:0; bottom:0; z-index:15;
    background:var(--panel); color:var(--ink-900);
    transform:translateX(100%); transition:transform .35s cubic-bezier(.4,0,.2,1);
    display:flex; flex-direction:column; overflow:hidden;
  }
#detail-panel.open{ transform:translateX(0); }
#detail-panel.pg-elevated{ z-index:45; }
.dp-header-title{ font-family:var(--font-display); font-weight:700; font-size:15px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.dp-body{ flex:1; min-height:0; overflow-y:auto; touch-action:pan-y; -webkit-overflow-scrolling:touch; }
.dp-eyebrow{ font-family:var(--font-mono); font-size:13px; letter-spacing:1.5px; text-transform:uppercase; color:var(--text-dim); margin-bottom:8px; }
.dp-price{ font-family:var(--font-display); font-weight:700; font-size:32px; color:var(--coral); margin-bottom:4px; }
.dp-addr{ font-size:15px; font-weight:500; line-height:1.4; margin-bottom:10px; }
.dp-status-badge{
    display:inline-block; font-family:var(--font-mono); font-size:13px; letter-spacing:1px; text-transform:uppercase;
    padding:3px 9px; border-radius:10px; background:var(--ink-900); color:var(--paper);
  }
.dp-body{ padding:10px 18px; }
.dp-photo{
    display:none; width:100%; aspect-ratio:4/3; object-fit:cover;
    border-radius:10px; border:2px solid var(--ink-900); margin-bottom:8px;
    cursor:zoom-in;
  }
.dp-photo.show{ display:block; }
.dp-stat-grid{ display:grid; grid-template-columns:1fr 1fr; gap:8px 14px; margin-bottom:10px; }
.dp-stat .val{ font-family:var(--font-display); font-weight:700; font-size:19px; }
.dp-stat .lbl{ font-family:var(--font-mono); font-size:13px; letter-spacing:1px; text-transform:uppercase; color:var(--text-dim); margin-top:2px; }
.dp-divider{ height:1.5px; background:var(--line); margin:8px 0; }
.dp-photos-btn{
    width:100%; background:var(--mint); border:2px solid var(--ink-900); border-radius:12px;
    padding:8px; font-family:var(--font-display); font-weight:700; font-size:13px; color:var(--ink-900);
    cursor:pointer; margin-bottom:8px; box-shadow:3px 3px 0 rgba(43,36,32,0.15);
    transition:transform .1s ease, box-shadow .1s ease;
    display:block; text-align:center; text-decoration:none; box-sizing:border-box;
  }
.dp-photos-btn:hover{ transform:translate(1px,1px); box-shadow:2px 2px 0 rgba(43,36,32,0.15); }
.dp-tour-link{ background:var(--paper); display:none; margin-bottom:8px; }
.dp-tour-link.show{ display:block; }
.dp-section{ margin-bottom:8px; }
.dp-section-title{ font-family:var(--font-mono); font-size:13px; letter-spacing:1px; text-transform:uppercase; color:var(--text-dim); margin-bottom:6px; }
.dp-description{ font-size:13px; line-height:1.6; color:var(--ink-800); white-space:pre-line; }
.dp-notes{ font-size:13px; line-height:1.6; color:var(--ink-800); }
.dp-mls{ font-family:var(--font-mono); font-size:13px; color:var(--text-dim); margin-top:18px; padding-top:12px; border-top:1.5px dashed var(--line-bright); }
#lance-bubble{
    display:none; position:absolute; top:0; left:0;
    max-width:min(72vw, 320px); padding:10px 14px;
    background:var(--paper); border:2.5px solid var(--ink-900); border-radius:16px;
    font-family:var(--font-body); font-weight:600; font-size:13px; line-height:1.35;
    color:var(--ink-900); text-align:center; box-shadow:3px 3px 0 rgba(43,36,32,0.25);
    pointer-events:auto; cursor:pointer;
  }
#lance-bubble::after{
    content:""; position:absolute; left:50%; bottom:-11px; transform:translateX(-50%);
    border-width:11px 9px 0 9px; border-style:solid;
    border-color:var(--ink-900) transparent transparent transparent;
  }
#lance-bubble::before{
    content:""; position:absolute; left:50%; bottom:-7.5px; transform:translateX(-50%);
    border-width:8px 7px 0 7px; border-style:solid;
    border-color:var(--paper) transparent transparent transparent; z-index:1;
  }
#share-modal{
    display:none; position:fixed; inset:0; z-index:50;
    background:rgba(43,36,32,0.88);
    align-items:center; justify-content:center; padding:24px;
  }
#share-modal.open{ display:flex; }
#share-panel{
    position:relative; width:min(94vw, 460px); max-height:92vh; overflow-y:auto;
    background:var(--paper); border-radius:14px; border:3px solid var(--ink-900);
    padding:22px 20px 20px; box-shadow:5px 5px 0 rgba(43,36,32,0.25);
  }
#share-close{
    position:absolute; top:8px; right:10px; z-index:2;
    background:var(--paper); border:2.5px solid var(--ink-900); border-radius:10px;
    width:40px; height:40px; font-family:var(--font-display); font-weight:800; font-size:24px;
    line-height:1; cursor:pointer; color:var(--ink-900);
    box-shadow:3px 3px 0 rgba(43,36,32,0.25);
  }
#share-close:hover{ background:var(--coral); }
#share-title{ font-family:var(--font-display); font-size:22px; margin:0 40px 14px 0; }
#share-view-options{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px; }
.share-view-btn{
    font-family:var(--font-mono); font-size:13px; font-weight:600; padding:8px 12px;
    border:2.5px solid var(--ink-900); border-radius:8px; background:var(--card);
    cursor:pointer; box-shadow:2px 2px 0 rgba(43,36,32,0.2);
  }
.share-view-btn.active{ background:var(--coral); color:#fff; }
.share-view-btn:disabled{ opacity:0.4; cursor:not-allowed; }
#share-preview{
    background:var(--card); border:2px solid var(--ink-900); border-radius:10px;
    padding:12px 14px; margin-bottom:16px;
  }
#share-preview-text{ font-family:var(--font-body); font-size:14px; white-space:pre-line; margin-bottom:8px; }
#share-preview-link{ font-family:var(--font-mono); font-size:13px; color:var(--ink-700); word-break:break-all; }
#share-actions{ display:flex; flex-wrap:wrap; gap:8px; }
.share-action-btn{
    flex:1 1 auto; text-align:center; font-family:var(--font-mono); font-size:13px; font-weight:700;
    padding:10px 12px; border:2.5px solid var(--ink-900); border-radius:8px; background:var(--paper);
    color:var(--ink-900); cursor:pointer; text-decoration:none; box-shadow:2px 2px 0 rgba(43,36,32,0.2);
  }
.share-action-btn:hover{ background:var(--coral); color:#fff; }

#lance-modal{
    display:none; position:fixed; inset:0; z-index:50;
    background:rgba(43,36,32,0.88);
    align-items:center; justify-content:center; padding:24px;
  }
#lance-modal.open{ display:flex; }
#lance-panel{
    position:relative; width:min(94vw, 700px); height:min(92vh, 820px); max-height:92vh;
    background:var(--paper); border-radius:14px; border:3px solid var(--ink-900);
    display:flex; flex-direction:column; overflow:hidden;
  }
#lance-close{
    position:absolute; top:8px; right:10px; z-index:2;
    background:var(--paper); border:2.5px solid var(--ink-900); border-radius:10px;
    width:46px; height:46px; font-family:var(--font-display); font-weight:800; font-size:28px;
    line-height:1; cursor:pointer; color:var(--ink-900);
    box-shadow:3px 3px 0 rgba(43,36,32,0.25);
  }
#lance-close:hover{ background:var(--coral); }
#lance-scroll{ flex:1; min-height:0; padding:56px 0 0; box-sizing:border-box; }
#lance-form-wrap{ width:100%; height:100%; overflow:hidden; }
#lance-form-wrap iframe{ display:block; width:100%; height:100%; border:none; }
@media (max-width: 480px){
    #lance-modal{ padding:6px; }
    #lance-panel{ width:99vw; border-radius:10px; }
    #lance-scroll{ padding:60px 0 0; }
  }
#gallery-modal{
    display:none; position:fixed; inset:0; z-index:40;
    background:rgba(43,36,32,0.88);
    align-items:center; justify-content:center; flex-direction:column;
  }
#gallery-modal.open{ display:flex; }
#gallery-stage{
    position:relative; width:min(92vw, 900px); height:min(78vh, 620px);
    display:flex; align-items:center; justify-content:center;
    background:var(--ink-900); border-radius:14px; overflow:hidden;
    border:3px solid var(--paper);
    touch-action:none; 
  }
#gallery-img{
    max-width:100%; max-height:100%; object-fit:contain; display:none;
    transform-origin:0 0; cursor:zoom-in; will-change:transform;
  }
#gallery-zoom-hint{
    color:var(--paper); font-family:var(--font-mono); font-size:13px; letter-spacing:0.5px;
    margin-top:10px; opacity:0.7;
  }
#gallery-close{
    position:absolute; top:-44px; right:0; background:none; border:none; color:var(--paper);
    font-size:26px; cursor:pointer; line-height:1;
  }

/* Theme ability buttons (added to #ability-dock by ui.js for the themes that use them) */
#syringe-btn{ background:var(--paper); color:var(--ink-900); width:32px; height:32px; padding:0; justify-content:center; font-size:18px; }
#syringe-btn.active{ background:var(--coral); box-shadow:2px 2px 0 rgba(43,36,32,0.25), 0 0 0 3px rgba(232,98,61,0.35); }
#laser-btn, #wand-btn{ display:none; background:var(--paper); color:var(--ink-900); width:34px; height:34px; padding:0; justify-content:center; font-size:16px; }
#laser-btn.active, #wand-btn.active{ background:var(--coral); box-shadow:2px 2px 0 rgba(43,36,32,0.25), 0 0 0 3px rgba(232,98,61,0.35); }
#laser-btn.visible, #wand-btn.visible{ display:flex; }