/* Mine screen: image-backed scene with interactive HTML overlays. */
#view-shakhta { position: relative; padding-bottom: 12px; }

#view-shakhta > .skill-shaft,
#view-shakhta > .mine-stage,
#view-shakhta > .active-heading,
#view-shakhta > .section-title,
#view-shakhta > #oreUnlockedList,
#view-shakhta > #oreLockedList { display: none !important; }

.resource-bar {
  position: sticky;
  top: 0;
  z-index: 30;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 5px;
  margin: 7px -10px 8px;
}

.resource-pill {
  position: relative;
  min-width: 0;
  padding: 7px 5px 6px 28px;
  border: 2px solid #704522;
  border-radius: 9px;
  background: linear-gradient(180deg, #283e51, #101b27);
  box-shadow: inset 0 0 0 2px #0b1118, inset 0 1px rgba(255,255,255,.18), 0 3px 7px rgba(0,0,0,.45);
}
.resource-pill > span { position:absolute;left:7px;top:9px;font-size:17px;color:#69d9ed;text-shadow:0 0 7px currentColor; }
.resource-pill b { display:block;overflow:hidden;text-overflow:ellipsis;font:800 11px var(--sans);color:#fff; }
.resource-pill small { display:block;overflow:hidden;text-overflow:ellipsis;font:700 7px var(--sans);color:#6fcf7f;text-transform:uppercase; }
.resource-pill.coin > span { color:#ffd047; }.resource-pill.gold > span { color:#ffae32; }.resource-pill.gem > span { color:#c366ff; }

#view-shakhta .mine-depths {
  aspect-ratio: 2 / 3;
  min-height: 0;
  isolation: isolate;
  background:
    linear-gradient(180deg, transparent 82%, rgba(5, 3, 2, .42)),
    url("../assets/images/medieval-mine-v1.webp") center / cover no-repeat;
}

#view-shakhta + * { scroll-margin-top: 80px; }
body:has(#view-shakhta.active) .app { padding-bottom:68px; }
body:has(#view-shakhta.active) header.top { display:none; }
body:has(#view-shakhta.active) main { padding-top:0; }

@media (max-width:380px){.resource-pill{padding-left:23px}.resource-pill>span{left:5px;font-size:14px}}

.mineral-catalog{
  position:relative;margin:10px -10px 0;padding:9px 0 10px;border-top:2px solid #744820;border-bottom:2px solid #241308;
  background:linear-gradient(180deg,#3c2514,#1c1009);box-shadow:inset 0 1px rgba(255,255,255,.08);
}
.catalog-title{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:0 10px 7px;color:#f1d094;}
.catalog-title b{font:800 12px var(--display)}.catalog-title small{font:600 8px var(--sans);color:#a98d66}
.mineral-rail{display:flex;gap:6px;overflow-x:auto;padding:2px 10px 7px;scroll-snap-type:x proximity;scrollbar-width:none;}
.mineral-rail::-webkit-scrollbar{display:none}
.mineral-chip{
  flex:0 0 112px;display:flex;align-items:center;gap:7px;padding:7px;border:1px solid #73502e;border-radius:8px;
  background:linear-gradient(180deg,#334251,#16202a);box-shadow:inset 0 0 0 1px #0b1117,0 2px 5px rgba(0,0,0,.4);scroll-snap-align:start;
}
.mineral-chip .icon-wrap{width:29px;height:29px}.mineral-chip span{min-width:0}.mineral-chip b,.mineral-chip small{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mineral-chip b{font:800 9px var(--sans);color:#f5e4bd}.mineral-chip small{margin-top:2px;font:700 8px var(--mono);color:#72d881}
.mineral-chip.locked{filter:saturate(.25);opacity:.62}.mineral-chip.locked small{color:#c39a65}

#view-shakhta .mine-depths::before {
  /* The lift is part of the artwork; keep only a subtle moving cable. */
  right: 11.5%;
  left: auto;
  width: 2px;
  border: 0;
  background: repeating-linear-gradient(180deg, #ba8a51 0 4px, #342012 4px 8px);
  box-shadow: 1px 0 #130b06;
  opacity: .72;
  animation: mine-cable 1.8s linear infinite;
}

#view-shakhta .mine-depths::after { display: none; }

#view-shakhta .depth-head {
  position: absolute;
  inset: 12px 12px auto;
  border: 2px solid #b77a32;
  border-radius: 8px;
  background: linear-gradient(180deg, rgba(83, 49, 23, .96), rgba(32, 18, 9, .96));
  box-shadow: inset 0 0 0 2px #180d06, 0 4px 12px rgba(0, 0, 0, .55);
}

#view-shakhta .depth-floor {
  position: absolute;
  left: 0;
  right: 17%;
  height: 16%;
  padding: 8px 8px 8px 10px;
  border: 0;
  background: none;
  box-shadow: none;
}

#view-shakhta .depth-floor:nth-of-type(2) { top: 31%; }
#view-shakhta .depth-floor:nth-of-type(3) { top: 47%; }
#view-shakhta .depth-floor:nth-of-type(4) { top: 63%; }
#view-shakhta .depth-floor:nth-of-type(5) { top: 79%; }
#view-shakhta .depth-floor::before,
#view-shakhta .depth-beams,
#view-shakhta .depth-gems,
#view-shakhta .depth-cart,
#view-shakhta .depth-lamp { display: none; }

#view-shakhta .depth-info {
  position: absolute;
  left: 7px;
  top: 5px;
  display: block;
  max-width: 47%;
  padding: 5px 7px;
  border: 1px solid rgba(194, 135, 61, .75);
  border-radius: 6px;
  background: rgba(19, 11, 6, .83);
  box-shadow: 0 2px 7px rgba(0, 0, 0, .55);
  backdrop-filter: blur(3px);
}

#view-shakhta .depth-level { display: block; font-size: 10px; }
#view-shakhta .depth-rate {
  display: inline-block;
  margin-top: 3px;
  padding: 1px 4px;
  font-size: 7px;
}

#view-shakhta .depth-worker {
  left: 47%;
  bottom: 16%;
  font-size: clamp(20px, 7vw, 31px);
  filter: drop-shadow(0 3px 2px #000);
}

#view-shakhta .depth-worker.second { left: 68%; }

@keyframes mine-cable { to { background-position-y: 16px; } }

@media (min-width: 440px) {
  #view-shakhta .depth-level { font-size: 12px; }
  #view-shakhta .depth-rate { font-size: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  #view-shakhta .mine-depths::before { animation: none; }
}

/* Every mineral owns one vertically scrollable mine tier. */
#view-shakhta .mine-depths {
  aspect-ratio: auto;
  padding-top: 230px;
  overflow: visible;
  background:
    linear-gradient(180deg,transparent 0 215px,#17100b 310px),
    url("../assets/images/medieval-mine-v1.webp") top center / 100% auto no-repeat,
    #17100b;
}
#view-shakhta .mine-depths::before{display:none}
#view-shakhta .depth-head{position:absolute;top:12px}
.mine-strata{position:relative;z-index:8;border-top:5px solid #39200f;background:#120c08;}
.strata-floor{
  position:relative;height:126px;overflow:hidden;border-bottom:7px solid #3f2412;
  background:
    radial-gradient(circle at 12% 50%,color-mix(in srgb,var(--mineral) 58%,transparent),transparent 24%),
    radial-gradient(circle at 88% 28%,rgba(255,180,70,.12),transparent 18%),
    linear-gradient(100deg,#17100b,#332217 47%,#15100c);
  box-shadow:inset 0 9px 15px rgba(0,0,0,.55),inset 0 -10px 13px rgba(0,0,0,.7);
}
.strata-floor::before{content:"";position:absolute;left:0;right:0;bottom:18px;height:5px;border-block:2px solid #170c06;background:#704725;box-shadow:0 7px 0 #3d2413;}
.strata-floor::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 22%,#583820 22% 24%,transparent 24% 72%,#583820 72% 74%,transparent 74%);pointer-events:none;opacity:.8}
.strata-rocks{position:absolute;z-index:2;left:3%;bottom:20px;width:118px;height:70px;filter:drop-shadow(0 0 10px var(--mineral));}
.strata-rocks i{position:absolute;display:block;font-style:normal}.strata-rocks i:nth-child(1){left:25px;bottom:0}.strata-rocks i:nth-child(2){left:0;bottom:2px;transform:rotate(-16deg)}.strata-rocks i:nth-child(3){left:62px;bottom:1px;transform:rotate(13deg)}.strata-rocks i:nth-child(4){left:43px;bottom:30px;transform:scale(.72)}
.strata-rocks i:nth-child(1) .icon-wrap{width:64px;height:64px}.strata-rocks i:nth-child(2) .icon-wrap{width:48px;height:48px}.strata-rocks i:nth-child(3) .icon-wrap{width:52px;height:52px}.strata-rocks i:nth-child(4) .icon-wrap{width:43px;height:43px}
.strata-floor:not(.locked) .strata-rocks{animation:ore-vein-pulse 3s ease-in-out infinite}.strata-floor:nth-child(3n) .strata-rocks{animation-delay:-1s}.strata-floor:nth-child(3n+1) .strata-rocks{animation-delay:-2s}
.strata-label{position:absolute;z-index:5;left:8px;top:8px;width:43%;padding:6px 7px;border:1px solid color-mix(in srgb,var(--mineral) 65%,#8b6135);border-radius:6px;background:rgba(17,10,6,.88);box-shadow:0 2px 7px #000;}
.strata-label small,.strata-label b,.strata-label span{display:block}.strata-label small{font:700 7px var(--sans);color:#b99d74;text-transform:uppercase}.strata-label b{font:800 12px var(--display);color:#ffe2a5}.strata-label span{margin-top:2px;font:700 7px var(--sans);color:#77d887}
.strata-scene{position:absolute;z-index:4;inset:0}.strata-worker{position:absolute;left:49%;bottom:22px;font-size:28px;filter:drop-shadow(0 3px 2px #000);animation:depth-work .9s ease-in-out infinite}.strata-cart{position:absolute;right:10%;bottom:20px;font-size:30px;filter:drop-shadow(0 3px 2px #000)}
.strata-lamp{position:absolute;left:63%;top:17px;width:6px;height:7px;border-radius:50%;background:#ffe5a0;box-shadow:0 0 8px 4px #e99832}
.strata-floor.locked{filter:saturate(.25) brightness(.58)}.strata-floor.locked .strata-label span{color:#d2a46a}.strata-floor.locked .strata-worker{left:58%;font-size:22px;animation:none}
@keyframes ore-vein-pulse{0%,100%{filter:drop-shadow(0 0 8px var(--mineral));transform:scale(1)}50%{filter:drop-shadow(0 0 16px var(--mineral));transform:scale(1.035)}}

/* One shared bottom navigation for every game screen. */
nav.tabs{
  z-index:60!important;gap:5px!important;padding:6px 7px calc(6px + env(safe-area-inset-bottom))!important;
  border-top:2px solid #a06b30!important;background:linear-gradient(180deg,#4a2e19,#1d1008)!important;
  box-shadow:0 -5px 18px rgba(0,0,0,.62),inset 0 1px rgba(255,231,177,.12)!important;
}
nav.tabs button{
  min-height:55px!important;border:1px solid #684322!important;border-radius:9px!important;padding:5px 2px!important;
  background:linear-gradient(180deg,#34475a,#152330)!important;box-shadow:inset 0 0 0 2px #0c151e,0 3px 0 #100904!important;
  color:#cbd7df!important;font:700 9px var(--sans)!important;text-transform:none!important;
}
nav.tabs button .ic{font-size:22px!important;filter:drop-shadow(0 2px 1px #000)}
nav.tabs button.active{border-color:#e2a640!important;color:#ffe3a0!important;background:linear-gradient(180deg,#5a4528,#2d2114)!important;box-shadow:inset 0 0 0 2px #1b1108,0 0 10px rgba(236,172,59,.55)!important}
.nav-item-wrap{min-width:18%;}.nav-item-wrap>button{height:100%}