/* A compact framed chart fixed directly to the lower face of the main mast.
   Source-image coordinates in script.js keep it inside the marked pole area. */
.treasure-map-anchor{
  position:absolute;
  z-index:8;
  display:block;
  aspect-ratio:1574/999;
  margin:0;
  padding:0;
  border:0;
  background:transparent;
  pointer-events:auto;
  cursor:zoom-in;
  transform:translate(var(--deck-x),var(--deck-y)) rotate(var(--look-rotate));
  transform-origin:var(--rig-origin-x) var(--rig-origin-y);
  filter:drop-shadow(0 7px 5px rgba(0,0,0,.82));
}
.treasure-map-card{
  position:absolute;
  inset:0;
  display:block;
  padding:8.5% 8%;
  border:1px solid #2b1300;
  border-radius:4px;
  background:
    linear-gradient(145deg,transparent 0 7%,rgba(255,236,151,.32) 8%,transparent 15%) 0 0/22% 100%,
    linear-gradient(90deg,#3a1b00 0%,#a86a13 7%,#f0c65e 15%,#744008 27%,#d9a83b 42%,#5a2d03 57%,#efc85f 72%,#7c4509 86%,#321600 100%);
  box-shadow:
    inset 0 0 0 2px #e9bd54,
    inset 0 0 0 5px #5a2e04,
    inset 0 0 0 7px rgba(255,222,121,.62),
    0 2px 0 #160900,
    0 6px 9px rgba(0,0,0,.72);
  transform:rotate(.35deg);
}
.treasure-map-card>img{
  position:absolute;
  z-index:1;
  inset:9%;
  display:block;
  width:82%;
  height:82%;
  object-fit:cover;
  border:0;
  clip-path:polygon(
    3% 5%,8% 2%,14% 4%,21% 1%,29% 3%,37% 0%,45% 3%,53% 1%,61% 4%,69% 1%,77% 3%,85% 1%,92% 4%,98% 2%,97% 10%,100% 17%,97% 25%,99% 34%,96% 42%,99% 51%,97% 60%,100% 68%,96% 76%,98% 85%,95% 93%,88% 97%,80% 95%,72% 99%,64% 96%,55% 99%,47% 96%,38% 100%,30% 96%,22% 99%,15% 95%,7% 98%,3% 92%,5% 84%,1% 76%,4% 68%,1% 59%,4% 51%,1% 42%,4% 34%,1% 25%,4% 17%,1% 10%
  );
  filter:sepia(.12) saturate(.92) contrast(1.06) drop-shadow(0 1px 2px #160800);
}
.treasure-map-card:before,.treasure-map-card:after{
  content:"";
  position:absolute;
  z-index:2;
  pointer-events:none;
}
.treasure-map-card:before{
  inset:6.5%;
  border:1px solid rgba(39,17,0,.9);
  box-shadow:0 0 0 1px rgba(255,221,119,.45),inset 0 0 8px 4px rgba(36,9,0,.8);
}
.treasure-map-card:after{
  z-index:3;
  inset:9%;
  clip-path:polygon(
    3% 5%,8% 2%,14% 4%,21% 1%,29% 3%,37% 0%,45% 3%,53% 1%,61% 4%,69% 1%,77% 3%,85% 1%,92% 4%,98% 2%,97% 10%,100% 17%,97% 25%,99% 34%,96% 42%,99% 51%,97% 60%,100% 68%,96% 76%,98% 85%,95% 93%,88% 97%,80% 95%,72% 99%,64% 96%,55% 99%,47% 96%,38% 100%,30% 96%,22% 99%,15% 95%,7% 98%,3% 92%,5% 84%,1% 76%,4% 68%,1% 59%,4% 51%,1% 42%,4% 34%,1% 25%,4% 17%,1% 10%
  );
  box-shadow:inset 0 0 13px 5px rgba(47,12,0,.92);
}
.frame-studs{
  position:absolute;
  z-index:4;
  inset:0;
  border-radius:4px;
  background:
    radial-gradient(circle at 6% 10%,#fff0a0 0 1.2%,#b46f15 1.6% 3.1%,#301400 3.5% 4%,transparent 4.4%),
    radial-gradient(circle at 94% 10%,#fff0a0 0 1.2%,#b46f15 1.6% 3.1%,#301400 3.5% 4%,transparent 4.4%),
    radial-gradient(circle at 6% 90%,#fff0a0 0 1.2%,#b46f15 1.6% 3.1%,#301400 3.5% 4%,transparent 4.4%),
    radial-gradient(circle at 94% 90%,#fff0a0 0 1.2%,#b46f15 1.6% 3.1%,#301400 3.5% 4%,transparent 4.4%);
  pointer-events:none;
}
.treasure-map-anchor:hover .treasure-map-card{filter:brightness(1.12)}
.treasure-map-anchor:focus-visible{outline:2px solid #f6d574;outline-offset:4px}

.treasure-map-viewer[hidden]{display:none}
.treasure-map-viewer{
  position:fixed;
  z-index:1200;
  inset:0;
  display:grid;
  place-items:center;
  padding:clamp(14px,4vw,48px);
  background:radial-gradient(circle at 50% 45%,rgba(59,35,14,.42),rgba(2,4,5,.96) 68%);
  backdrop-filter:blur(10px);
}
.treasure-map-viewer>img{
  display:block;
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  border:clamp(5px,.65vw,11px) ridge #d5a23a;
  clip-path:polygon(1% 2%,8% 0,15% 2%,23% 0,31% 1%,39% 0,47% 2%,55% 0,63% 2%,71% 0,79% 2%,87% 0,96% 2%,100% 8%,98% 17%,100% 26%,98% 35%,100% 44%,98% 53%,100% 62%,98% 71%,100% 80%,97% 91%,92% 98%,84% 96%,76% 100%,68% 97%,60% 100%,52% 97%,44% 100%,36% 97%,28% 100%,20% 97%,12% 100%,3% 97%,0 90%,2% 80%,0 70%,2% 60%,0 50%,2% 40%,0 30%,2% 20%,0 10%);
  box-shadow:0 28px 80px #000,0 0 55px rgba(223,165,70,.22);
}
.treasure-map-close{
  position:absolute;
  z-index:2;
  top:max(12px,env(safe-area-inset-top));
  right:max(12px,env(safe-area-inset-right));
  width:46px;
  height:46px;
  border:1px solid #d6b766;
  border-radius:50%;
  background:#160a05;
  color:#ffe9a2;
  font:700 30px/1 sans-serif;
  cursor:pointer;
}
body.treasure-map-open{overflow:hidden!important}

@media(max-width:850px){
  .treasure-map-anchor{
    transform:none!important;
    filter:drop-shadow(0 4px 4px rgba(0,0,0,.78));
  }
}