/*!
 * mcr-map3d.css  1.1.0
 * Chrome for the MCR.CITY 3D map at /wot-map/. Reuses the existing WOT tokens
 * (--pink, --ink, --soft, --panel, --line, --acc) and the existing .mcr-pin
 * markup, so the pins look the same in 2D and 3D.
 * 1.1.0 (MCR-WOT-MAP-02): the stage and the no WebGL still are light by
 * default and dark only under body.skin-dark, matching the template.
 */

.wot-stage{position:absolute;inset:0}
.wot-stage.is-off{visibility:hidden;pointer-events:none}

#mcr3d{position:absolute;inset:0;background:#f2ecf6;touch-action:none;cursor:grab}
body.skin-dark #mcr3d{background:#0b0c10}
#mcr3d:active{cursor:grabbing}
.mcr3d-canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.mcr3d-pins{position:absolute;inset:0;pointer-events:none}
.mcr3d-pin{position:absolute;left:0;top:0;width:0;height:0;pointer-events:auto;
  will-change:transform;transform-origin:50% 100%}
.mcr3d-pin .mcr-pin{position:absolute;left:-45px;bottom:0;width:90px;height:74px}
/* ODbL credit. A licence condition, so it is read first and decorated second.
   .wot-mapview carries margin-top:6px and a 1px border from the theme's own
   style.min.css, so the bottom 7px of this fixed box sits under the fold.
   bottom:10px clears that. The pill is what carries the contrast: at .9 and .92
   alpha the composite is near constant whatever the ground does under it, so the
   credit reads on all three skins instead of only on DARK.
   z-index 950 clears .tray, which is 900 and was covering the credit outright.
   The 2D map already draws Leaflet's attribution over the same tray card, so
   this matches what /wot-map/ does today rather than inventing a placement. */
.mcr3d-attr{position:absolute;right:10px;bottom:10px;z-index:950;font-size:9px;line-height:1.4;
  color:#fff;background:rgba(6,7,11,.9);padding:2px 8px;border-radius:99px;
  max-width:calc(100% - 20px);pointer-events:auto}
.mcr3d-attr a{color:inherit}
body:not(.skin-dark) .mcr3d-attr{color:#0a0a0d;background:rgba(255,255,255,.92)}

/* Depth grade over the ground plane. Colour only comes from the pins. */
.mcr3d-grade{position:absolute;inset:0;pointer-events:none;z-index:2;
  background:
    radial-gradient(120% 78% at 50% 92%,transparent 0 34%,rgba(6,7,11,.34) 72%,rgba(6,7,11,.72) 100%),
    linear-gradient(to top,rgba(6,7,11,.28) 0%,transparent 26%,transparent 58%,rgba(9,11,17,.86) 100%)}
body:not(.skin-dark) .mcr3d-grade{
  background:
    radial-gradient(120% 78% at 50% 92%,transparent 0 36%,rgba(246,241,249,.30) 74%,rgba(246,241,249,.70) 100%),
    linear-gradient(to top,rgba(246,241,249,.24) 0%,transparent 28%,transparent 58%,rgba(246,241,249,.88) 100%)}

/* Horizon band, sits where the ground meets the fog. */
.mcr3d-horizon{position:absolute;left:0;right:0;top:0;height:44%;pointer-events:none;z-index:3;
  background:linear-gradient(to bottom,rgba(9,11,17,.96) 0%,rgba(9,11,17,.55) 62%,transparent 100%)}
body:not(.skin-dark) .mcr3d-horizon{
  background:linear-gradient(to bottom,rgba(246,241,249,.98) 0%,rgba(246,241,249,.6) 62%,transparent 100%)}

/* 2D / 3D toggle. Same pill language as .skins and .daycorner. */
.modesw{display:flex;gap:2px;background:var(--panel);border:1px solid var(--line);
  border-radius:99px;padding:2px;backdrop-filter:blur(10px)}
.modesw button{padding:6px 11px;border-radius:99px;border:0;background:none;cursor:pointer;
  font-family:inherit;font-size:9px;font-weight:800;letter-spacing:.09em;color:var(--soft)}
.modesw button.on{background:var(--acc);color:#fff}
body.skin-dark .modesw button.on{background:#fff;color:#0a0a0d}
body.skin-pink .modesw button.on{background:linear-gradient(135deg,#E8237B,#FF6BB5);color:#fff}

/* WebGL missing. A still of the city with the 2D map one tap away. */
.mcr3d-still{position:absolute;inset:0;z-index:4;display:none;
  background-size:cover;background-position:center;filter:grayscale(.2) contrast(1.06)}
.mcr3d-still.show{display:block}
.mcr3d-still::after{content:"";position:absolute;inset:0;
  background:linear-gradient(to top,rgba(246,241,249,.9),rgba(246,241,249,.3) 52%,rgba(246,241,249,.78))}
body.skin-dark .mcr3d-still::after{
  background:linear-gradient(to top,rgba(6,7,11,.86),rgba(6,7,11,.28) 52%,rgba(6,7,11,.72))}
.mcr3d-nogl{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);z-index:6;display:none;
  text-align:center;color:var(--soft);font-size:11px;font-weight:700;letter-spacing:.05em;line-height:1.6;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 16px;
  backdrop-filter:blur(10px);max-width:260px}
.mcr3d-nogl.show{display:block}
.mcr3d-nogl b{display:block;font-size:12px;color:var(--ink);margin-bottom:3px}

@media(max-width:640px){
  .modesw button{padding:6px 10px;font-size:8.5px}
  .mcr3d-pin .mcr-pin .tag{max-width:78px}
}

@media(prefers-reduced-motion:reduce){
  .mcr3d-pin .mcr-pin .v{animation:none}
}