/* ═══════════════════════════════════════════════════════
   DNA POOL — VIRTUAL HOMES & LAND PARCEL STYLES v1.0
   ═══════════════════════════════════════════════════════ */

/* ═ HOME DETAIL PANEL — CENTERED FIXED MODAL ═ */
#homeDetailPanel{
  position:fixed;
  top:50%;left:50%;
  transform:translate(-50%,-50%) scale(0.9);
  z-index:500;
  width:360px;max-width:92vw;
  max-height:80vh;
  overflow-y:auto;
  background:linear-gradient(165deg,rgba(8,12,28,.97) 0%,rgba(14,8,32,.97) 100%);
  backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  box-shadow:0 24px 80px rgba(0,0,0,.7),0 0 60px rgba(0,200,255,.04);
  transition:opacity .3s,transform .3s;
  opacity:0;
  pointer-events:none;
}
#homeDetailPanel.show{
  transform:translate(-50%,-50%) scale(1);
  opacity:1;
  pointer-events:auto;
}
/* No pull indicator for centered modal */

.home-panel-inner{padding:16px 18px 20px}

.home-panel-close{
  position:absolute;top:12px;right:14px;
  width:30px;height:30px;border-radius:50%;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:rgba(255,255,255,.4);
  font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:all .2s;z-index:5;
}
.home-panel-close:hover{background:rgba(255,80,80,.15);color:#ff6b6b;border-color:rgba(255,80,80,.2)}

/* ═ Header with house image ═ */
.home-panel-header{
  display:flex;align-items:center;gap:14px;
  padding:8px 0 14px;
}
.home-panel-house{width:72px;height:72px;flex-shrink:0}
.home-panel-house img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 4px 12px rgba(0,0,0,.4))}
.home-panel-title h3{
  font-family:'Cinzel',serif;
  font-size:16px;font-weight:700;
  color:#fff;margin:0 0 4px;
  line-height:1.2;
}
.home-panel-level{
  font-size:12px;
  color:rgba(255,215,0,.7);
  letter-spacing:.3px;
}

/* ═ Owner row ═ */
.home-panel-owner{
  display:flex;align-items:center;gap:10px;
  padding:10px 12px;
  background:rgba(255,255,255,.03);
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  margin-bottom:14px;
}
.home-panel-owner img{
  width:36px;height:36px;border-radius:10px;
  object-fit:cover;
  border:1.5px solid rgba(255,255,255,.1);
}
.home-panel-owner-name{font-size:13px;font-weight:600;color:#fff}
.home-panel-owner-civ{font-size:11px;color:rgba(255,255,255,.35)}

/* ═ Info rows ═ */
.home-panel-info{
  background:rgba(0,200,255,.03);
  border:1px solid rgba(0,200,255,.08);
  border-radius:12px;
  padding:4px 12px;
  margin-bottom:14px;
}
.home-panel-row{
  display:flex;justify-content:space-between;align-items:center;
  padding:8px 0;
  border-bottom:1px solid rgba(255,255,255,.04);
  font-size:12px;
}
.home-panel-row:last-child{border-bottom:none}
.home-panel-row span:first-child{color:rgba(255,255,255,.4)}
.home-panel-row span:last-child{color:rgba(255,255,255,.7);font-weight:500}
.home-parcel-id{
  font-family:'Orbitron',monospace;
  font-size:10px;
  color:rgba(0,200,255,.7)!important;
  background:rgba(0,200,255,.06);
  padding:2px 6px;
  border-radius:4px;
}

/* ═ Interior preview ═ */
.home-panel-interior{margin-bottom:14px}
.home-interior-preview{
  border-radius:12px;overflow:hidden;
  border:1px solid rgba(255,255,255,.06);
}
.home-interior-bg{
  height:80px;
  display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  position:relative;
}
.home-interior-icon{font-size:28px;margin-bottom:4px}
.home-interior-label{font-size:10px;color:rgba(255,255,255,.3);text-transform:uppercase;letter-spacing:1px;font-weight:600}

/* ═ Action buttons ═ */
.home-panel-actions{
  display:flex;gap:8px;
  margin-bottom:14px;
}
.home-btn{
  flex:1;
  padding:12px 8px;
  border-radius:12px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
  color:#fff;
  font-size:13px;font-weight:600;
  cursor:pointer;
  font-family:'Outfit',sans-serif;
  transition:all .25s;
  text-align:center;
}
.home-btn:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(0,0,0,.3)}
.home-btn-enter{
  background:linear-gradient(135deg,rgba(0,200,255,.12),rgba(99,102,241,.12));
  border-color:rgba(0,200,255,.2);
  color:#00c8ff;
}
.home-btn-enter:hover{background:linear-gradient(135deg,rgba(0,200,255,.2),rgba(99,102,241,.2))}
.home-btn-fly{
  background:rgba(168,85,247,.06);
  border-color:rgba(168,85,247,.2);
  color:#a855f7;
}
.home-btn-fly:hover{background:rgba(168,85,247,.15)}

/* ═ Market section ═ */
.home-panel-market{
  padding:10px 12px;
  background:rgba(255,140,0,.03);
  border:1px solid rgba(255,140,0,.1);
  border-radius:12px;
}
.home-market-label{
  font-size:10px;font-weight:700;
  color:rgba(255,140,0,.7);
  text-transform:uppercase;
  letter-spacing:.5px;
  margin-bottom:6px;
}
.home-market-status{
  display:flex;align-items:center;gap:8px;
}
.home-market-tag{
  font-size:9px;font-weight:800;
  padding:3px 8px;
  border-radius:4px;
  letter-spacing:.5px;
}
.home-market-tag.owned{
  background:rgba(34,197,94,.12);
  color:#22c55e;
  border:1px solid rgba(34,197,94,.2);
}
.home-market-tag.available{
  background:rgba(0,200,255,.12);
  color:#00c8ff;
  border:1px solid rgba(0,200,255,.2);
}
.home-market-tag.premium{
  background:rgba(255,215,0,.1);
  color:#ffd700;
  border:1px solid rgba(255,215,0,.2);
}
.home-market-note{
  font-size:11px;
  color:rgba(255,255,255,.35);
}

/* ═══ HOME INTERIOR MODAL ═══ */
#homeInteriorModal{
  display:none;
  position:fixed;inset:0;
  z-index:9999;
  background:rgba(0,0,0,.75);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  align-items:center;justify-content:center;
  padding:20px;
}
.home-interior-modal{
  position:relative;
  width:420px;max-width:95vw;
  max-height:85vh;overflow-y:auto;
  background:linear-gradient(170deg,rgba(8,12,28,.98),rgba(14,8,32,.98));
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  box-shadow:0 24px 80px rgba(0,0,0,.7);
  animation:homeModalIn .4s cubic-bezier(.23,1,.32,1);
}
@keyframes homeModalIn{
  from{opacity:0;transform:scale(.9) translateY(20px)}
  to{opacity:1;transform:scale(1) translateY(0)}
}
.home-interior-close{
  position:absolute;top:12px;right:14px;
  width:30px;height:30px;border-radius:50%;
  border:1px solid rgba(255,255,255,.1);
  background:rgba(0,0,0,.3);
  color:rgba(255,255,255,.5);
  font-size:16px;cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  z-index:5;transition:all .2s;
}
.home-interior-close:hover{background:rgba(255,80,80,.2);color:#ff6b6b}

.home-interior-header{
  padding:28px 20px 20px;
  text-align:center;
  border-radius:20px 20px 0 0;
}
.home-interior-h-icon{font-size:40px;margin-bottom:8px}
.home-interior-header h3{
  font-family:'Cinzel',serif;
  font-size:18px;font-weight:700;
  color:#fff;margin:0 0 4px;
}
.home-interior-header p{
  font-size:12px;
  color:rgba(255,255,255,.4);
  margin:0;
}

/* ═ Rooms ═ */
.home-interior-rooms{padding:8px 16px}
.home-room{
  display:flex;align-items:center;gap:12px;
  padding:12px;
  border:1px solid rgba(255,255,255,.06);
  border-radius:12px;
  margin-bottom:8px;
  background:rgba(255,255,255,.02);
  cursor:pointer;
  transition:all .25s;
  animation:homeRoomIn .4s cubic-bezier(.23,1,.32,1) backwards;
}
@keyframes homeRoomIn{
  from{opacity:0;transform:translateX(-10px)}
  to{opacity:1;transform:translateX(0)}
}
.home-room:hover{
  background:rgba(0,200,255,.05);
  border-color:rgba(0,200,255,.15);
  transform:translateX(4px);
}
.home-room-icon{
  font-size:24px;
  width:44px;height:44px;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.04);
  border-radius:10px;
  flex-shrink:0;
}
.home-room-info{flex:1;min-width:0}
.home-room-name{font-size:13px;font-weight:600;color:#fff;margin-bottom:2px}
.home-room-desc{font-size:11px;color:rgba(255,255,255,.35);line-height:1.4}
.home-room-arrow{color:rgba(255,255,255,.15);font-size:16px;transition:color .2s}
.home-room:hover .home-room-arrow{color:rgba(0,200,255,.5)}

.home-interior-footer{
  display:flex;justify-content:center;gap:20px;
  padding:16px;
  border-top:1px solid rgba(255,255,255,.06);
}
.home-interior-stat{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  font-size:11px;color:rgba(255,255,255,.35);
}
.home-interior-stat span:first-child{font-size:18px}

/* ═══ LAYER TOGGLE BUTTONS — left side, above nav guide ═══ */
.dp-layer-toggles{
  position:absolute;
  bottom:160px;left:20px;
  z-index:25;
  display:flex;flex-direction:column;gap:6px;
}
.dp-layer-btn{
  display:flex;align-items:center;gap:6px;
  padding:8px 14px;
  background:rgba(8,12,28,.92);
  border:1px solid rgba(255,255,255,.1);
  border-radius:10px;
  color:rgba(255,255,255,.45);
  font-size:11px;font-weight:600;
  font-family:'Outfit',sans-serif;
  cursor:pointer;
  transition:all .2s;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
}
.dp-layer-btn:hover{border-color:rgba(255,255,255,.2);color:rgba(255,255,255,.7)}
.dp-layer-btn.active{
  border-color:rgba(0,200,255,.3);
  background:rgba(0,200,255,.1);
  color:#00c8ff;
}
.dp-layer-btn span{font-size:14px}

/* Fullscreen: fixed position */
body.dp-fullscreen .dp-layer-toggles{
  position:fixed;
  bottom:80px;left:20px;
  z-index:590;
}

/* Mobile: smaller, bottom-left */
@media(max-width:900px){
  .dp-layer-toggles{bottom:80px;left:10px}
  .dp-layer-btn{padding:6px 10px;font-size:10px}
}

/* ═══ MOBILE ADJUSTMENTS ═══ */
@media(max-width:768px){
  #homeDetailPanel{
    width:92vw;
    max-height:75vh;
  }
  .home-interior-modal{
    width:100%;max-width:100%;
    border-radius:16px 16px 0 0;
    position:fixed;
    bottom:0;left:0;right:0;
    max-height:85vh;
    animation:homeMobileIn .35s ease;
  }
  @keyframes homeMobileIn{
    from{transform:translateY(100%)}
    to{transform:translateY(0)}
  }
  .home-panel-house{width:56px;height:56px}
  .home-panel-title h3{font-size:14px}
  .home-btn{padding:10px 6px;font-size:12px}
}

/* ═══ FULLSCREEN COMPATIBILITY ═══ */
body.dp-fullscreen #homeDetailPanel{z-index:600}

/* ═══ SCROLLBAR ═══ */
#homeDetailPanel::-webkit-scrollbar{width:4px}
#homeDetailPanel::-webkit-scrollbar-track{background:transparent}
#homeDetailPanel::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:2px}
.home-interior-modal::-webkit-scrollbar{width:4px}
.home-interior-modal::-webkit-scrollbar-track{background:transparent}
.home-interior-modal::-webkit-scrollbar-thumb{background:rgba(255,255,255,.08);border-radius:2px}