/* Government Maps Viewer Pro: Walk renderer, detail panels, mobile controls, and Leaflet control refinements. */
.gmv-ascii-walk-layer{
  position:absolute;
  inset:0;
  z-index:1600;
  display:none;
  background:#05080b;
  color:#d7f7ff;
  overflow:hidden;
}

.gmv-ascii-walk-layer.on{
  display:block;
}

.gmv-ascii-walk-layer.gmv-walk-fullscreen{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  z-index:999999;
  border-radius:0;
  background:#06101a;
}

body.gmv-walk-fullscreen-body{
  overflow:hidden;
}

.gmv-ascii-walk-layer.gmv-walk-fullscreen .gmv-ascii-walk-canvas{
  width:100vw;
  height:100vh;
}

.gmv-ascii-walk-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  background:#05080b;
}

.gmv-ascii-mini-canvas{
  position:absolute;
  right:12px;
  top:12px;
  z-index:3;
  width:220px;
  height:165px;
  border:2px solid rgba(255,255,255,.62);
  border-radius:7px;
  background:rgba(0,0,0,.82);
  box-shadow:0 0 0 1px rgba(0,0,0,.55), 0 0 18px rgba(0,0,0,.42);
  pointer-events:none;
}

.gmv-ascii-detail-canvas{
  position:absolute;
  right:12px;
  top:188px;
  z-index:3;
  width:220px;
  height:150px;
  display:none;
  border:2px solid rgba(255,223,100,.72);
  border-radius:7px;
  background:rgba(0,0,0,.84);
  box-shadow:0 0 0 1px rgba(0,0,0,.55), 0 0 18px rgba(0,0,0,.42);
  pointer-events:auto;
  cursor:pointer;
  touch-action:manipulation;
  transition:width 120ms ease, height 120ms ease, top 120ms ease, right 120ms ease;
}

.gmv-ascii-walk-layer.gmv-detail-on .gmv-ascii-detail-canvas{
  display:block;
}

.gmv-ascii-walk-layer.gmv-detail-on .gmv-ascii-mini-canvas{
  width:280px;
  height:210px;
}

.gmv-ascii-walk-layer.gmv-detail-on .gmv-ascii-detail-canvas{
  width:280px;
  height:180px;
  top:236px;
}

.gmv-ascii-topbar .btn-filter.gmv-detail-active{
  background:rgba(126,78,0,.92);
  border-color:rgba(255,223,100,.72);
}

.gmv-ascii-topbar .btn-filter.gmv-detail-large-active{
  background:rgba(126,78,0,.92);
  border-color:rgba(255,223,100,.72);
}

.gmv-ascii-topbar .btn-filter.gmv-sharp-light-active{
  background:rgba(84,92,28,.92);
  border-color:rgba(230,242,116,.72);
}

.gmv-ascii-topbar .btn-filter.gmv-sharp-strong-active{
  background:rgba(118,42,26,.94);
  border-color:rgba(255,170,112,.78);
}

.gmv-ascii-topbar .btn-filter.gmv-bowl-active{
  background:rgba(24,92,118,.92);
  border-color:rgba(136,224,255,.78);
}

.gmv-ascii-topbar .btn-filter.gmv-ground-normal{
  background:rgba(35,43,62,.86);
  border-color:rgba(255,255,255,.40);
}

.gmv-ascii-topbar .btn-filter.gmv-ground-high{
  background:rgba(126,78,0,.92);
  border-color:rgba(255,223,100,.72);
}

.gmv-ascii-topbar .btn-filter.gmv-ground-ultra{
  background:rgba(104,28,128,.92);
  border-color:rgba(236,190,255,.78);
}

.gmv-ascii-hud{
  position:absolute;
  left:12px;
  top:12px;
  z-index:4;
  max-width:min(480px, calc(100% - 250px));
  box-sizing:border-box;
  padding:8px 10px;
  border:1px solid rgba(255,255,255,.35);
  border-radius:6px;
  background:rgba(0,0,0,.62);
  color:#e7f7ff;
  font-family:Consolas, Menlo, Monaco, monospace;
  font-size:12px;
  line-height:1.35;
  pointer-events:none;
}

.gmv-ascii-hud-title{
  display:block;
  margin-bottom:2px;
  color:#9ee6ff;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}

.gmv-ascii-topbar{
  position:absolute;
  left:12px;
  bottom:12px;
  z-index:8;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.gmv-ascii-topbar .btn-filter{
  border-color:rgba(255,255,255,.40);
  background:rgba(35,43,62,.86);
}

.gmv-ascii-topbar .btn-filter:hover{
  background:rgba(15,20,32,.94);
}

.gmv-ascii-mobile-controls{
  position:absolute;
  left:10px;
  right:10px;
  bottom:56px;
  z-index:6;
  display:none;
  justify-content:space-between;
  align-items:flex-end;
  gap:10px;
  pointer-events:none;
}

.gmv-ascii-mobile-controls.on{
  display:flex;
}

.gmv-ascii-pad{
  display:grid;
  grid-template-columns:repeat(3, 54px);
  grid-template-rows:repeat(3, 48px);
  gap:6px;
  padding:8px;
  border:1px solid rgba(255,255,255,.34);
  border-radius:12px;
  background:rgba(0,0,0,.42);
  backdrop-filter:blur(3px);
  pointer-events:auto;
}

.gmv-ascii-pad.look{
  grid-template-columns:repeat(2, 62px);
  grid-template-rows:repeat(3, 48px);
}

.gmv-ascii-touch-btn{
  border:1px solid rgba(255,255,255,.48);
  border-radius:10px;
  background:rgba(28,36,54,.82);
  color:#fff;
  font:700 13px/1.1 Consolas, Menlo, Monaco, monospace;
  text-align:center;
  touch-action:none;
  user-select:none;
  -webkit-user-select:none;
  box-shadow:0 2px 8px rgba(0,0,0,.38);
}

.gmv-ascii-touch-btn:active,
.gmv-ascii-touch-btn.active{
  background:rgba(255,223,100,.88);
  color:#111;
  border-color:rgba(255,255,255,.86);
}

.gmv-ascii-touch-spacer{
  visibility:hidden;
}

.gmv-ascii-compass{
  position:absolute;
  left:50%;
  top:calc(50% - 42px);
  transform:translateX(-50%);
  z-index:4;
  min-width:108px;
  padding:3px 8px;
  border:1px solid rgba(255,255,255,.28);
  border-radius:999px;
  background:rgba(0,0,0,.30);
  color:#fff;
  font-family:Consolas, Menlo, Monaco, monospace;
  font-size:12px;
  font-weight:700;
  line-height:1.05;
  text-align:center;
  letter-spacing:.04em;
  text-shadow:0 1px 0 rgba(0,0,0,.90);
  pointer-events:none;
  box-shadow:0 1px 5px rgba(0,0,0,.24);
}

.gmv-ascii-compass small{
  display:inline;
  margin-left:5px;
  color:#ffdf64;
  font-size:8px;
  font-weight:700;
  letter-spacing:.04em;
}

.gmv-ascii-crosshair{
  position:absolute;
  left:50%;
  top:50%;
  z-index:4;
  transform:translate(-50%,-50%);
  color:rgba(255,255,255,.72);
  font-family:Consolas, Menlo, Monaco, monospace;
  font-size:22px;
  pointer-events:none;
}

@media (max-width:520px){
  .gmv-ascii-mini-canvas{
    width:150px;
    height:112px;
    right:8px;
    top:8px;
  }


  .gmv-ascii-detail-canvas{
    width:150px;
    height:100px;
    right:8px;
    top:128px;
  }

  .gmv-ascii-walk-layer.gmv-detail-on .gmv-ascii-mini-canvas{
    width:168px;
    height:126px;
  }

  .gmv-ascii-walk-layer.gmv-detail-on .gmv-ascii-detail-canvas{
    width:168px;
    height:108px;
    top:142px;
  }

  .gmv-ascii-hud{
    left:8px;
    top:8px;
    max-width:calc(100% - 180px);
    font-size:10px;
    padding:6px 7px;
  }

  .gmv-ascii-compass{
    top:calc(50% - 34px);
    min-width:94px;
    padding:3px 6px;
    font-size:11px;
  }

  .gmv-ascii-compass small{
    font-size:7px;
  }

  .gmv-ascii-topbar{
    left:8px;
    right:8px;
    bottom:8px;
  }

  .gmv-ascii-topbar .btn-filter{
    flex:1 1 auto;
  }

  .gmv-ascii-mobile-controls{
    bottom:58px;
    gap:6px;
  }

  .gmv-ascii-pad{
    grid-template-columns:repeat(3, 44px);
    grid-template-rows:repeat(3, 42px);
    gap:5px;
    padding:6px;
  }

  .gmv-ascii-pad.look{
    grid-template-columns:repeat(2, 50px);
    grid-template-rows:repeat(3, 42px);
  }

  .gmv-ascii-touch-btn{
    font-size:11px;
    border-radius:9px;
  }
}


.gmv-ascii-walk-layer{
  cursor:crosshair;
}

.gmv-ascii-walk-layer.on{
  box-shadow:inset 0 0 110px rgba(0,0,0,.80);
}

.gmv-ascii-walk-canvas{
  image-rendering:auto;
}

.gmv-ascii-hud{
  backdrop-filter:blur(3px);
}

.gmv-ascii-hud-title::after{
  content:' MAP STREET VIEW';
  color:#ffdf64;
  font-weight:700;
}

.gmv-ascii-crosshair{
  text-shadow:0 0 8px rgba(255,255,255,.65), 0 1px 0 rgba(0,0,0,.9);
}

.leaflet-control-layers,
.leaflet-bar{
  box-shadow:none !important;
  border:1px solid #5a607d !important;
  border-radius:3px !important;
  overflow:hidden;
}

.leaflet-touch .leaflet-bar a,
.leaflet-touch .leaflet-control-layers-toggle,
.leaflet-bar a{
  width:34px;
  height:34px;
  line-height:30px;
  box-shadow:none !important;
}

.leaflet-bar a{
  border-bottom:1px solid #5a607d !important;
}

.leaflet-bar a:last-child{
  border-bottom:none !important;
}


.gmv-ascii-status{
  display:block;
}

.gmv-ascii-help{
  display:block;
  margin-top:3px;
  opacity:.84;
}

@media (max-width:720px){
  .gmv-ascii-hud{
    left:7px;
    top:7px;
    max-width:calc(100% - 188px);
    max-height:72px;
    padding:5px 6px;
    font-size:9px;
    line-height:1.16;
    overflow:hidden;
  }

  .gmv-ascii-hud-title{
    margin-bottom:1px;
    letter-spacing:.035em;
  }

  .gmv-ascii-help{
    display:none;
  }

  .gmv-ascii-status{
    display:-webkit-box;
    -webkit-line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }

  .gmv-ascii-mini-canvas{
    width:154px;
    height:116px;
    right:7px;
    top:7px;
  }

  .gmv-ascii-detail-canvas{
    width:154px;
    height:92px;
    right:7px;
    top:131px;
  }

  .gmv-ascii-walk-layer.gmv-detail-on .gmv-ascii-mini-canvas{
    width:166px;
    height:124px;
  }

  .gmv-ascii-walk-layer.gmv-detail-on .gmv-ascii-detail-canvas{
    width:166px;
    height:96px;
    top:137px;
  }

  .gmv-ascii-topbar{
    left:6px;
    right:6px;
    bottom:calc(6px + env(safe-area-inset-bottom, 0px));
    z-index:8;
    display:grid;
    grid-template-columns:repeat(4, minmax(0, 1fr));
    gap:5px;
  }

  .gmv-ascii-topbar .btn-filter{
    min-width:0;
    width:auto;
    height:32px;
    min-height:32px;
    padding:0 4px;
    font-size:9px;
    line-height:30px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:clip;
  }

  .gmv-ascii-mobile-controls{
    left:6px;
    right:6px;
    bottom:calc(88px + env(safe-area-inset-bottom, 0px));
    z-index:6;
    gap:5px;
    justify-content:space-between;
    align-items:flex-end;
  }

  .gmv-ascii-pad{
    grid-template-columns:repeat(3, 39px);
    grid-template-rows:repeat(3, 34px);
    gap:4px;
    padding:5px;
    border-radius:10px;
    background:rgba(0,0,0,.30);
  }

  .gmv-ascii-pad.look{
    grid-template-columns:repeat(2, 43px);
    grid-template-rows:repeat(3, 34px);
  }

  .gmv-ascii-touch-btn{
    min-width:0;
    padding:0;
    border-radius:8px;
    font-size:9px;
    line-height:1;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:clip;
  }

  .gmv-ascii-compass{
    top:calc(50% - 30px);
    min-width:78px;
    padding:2px 6px;
    font-size:10px;
  }

  .gmv-ascii-compass small{
    margin-left:3px;
    font-size:6px;
  }
}

@media (max-width:720px) and (max-height:620px){
  .gmv-ascii-mobile-controls{
    bottom:calc(84px + env(safe-area-inset-bottom, 0px));
  }

  .gmv-ascii-pad{
    grid-template-columns:repeat(3, 36px);
    grid-template-rows:repeat(3, 30px);
    gap:3px;
    padding:4px;
  }

  .gmv-ascii-pad.look{
    grid-template-columns:repeat(2, 40px);
    grid-template-rows:repeat(3, 30px);
  }

  .gmv-ascii-touch-btn{
    font-size:8px;
  }
}

.gmv-ascii-walk-layer.gmv-detail-on.gmv-detail-large .gmv-ascii-detail-canvas{
  width:min(560px, calc(100vw - 24px));
  height:min(360px, calc(100vh - 260px));
  top:236px;
  right:12px;
}

@media (max-width:720px){
  .gmv-ascii-walk-layer.gmv-detail-on.gmv-detail-large .gmv-ascii-detail-canvas{
    width:min(332px, calc(100vw - 14px));
    height:min(192px, calc(100vh - 154px));
    top:137px;
    right:7px;
  }
}

@media (max-width:520px){
  .gmv-ascii-walk-layer.gmv-detail-on.gmv-detail-large .gmv-ascii-detail-canvas{
    width:min(336px, calc(100vw - 16px));
    height:min(216px, calc(100vh - 158px));
    top:142px;
    right:8px;
  }
}
