/* Keep the existing cave, wallet, paper orders and equipped heroes. */
.vein-mode #mine{background-image:radial-gradient(ellipse at 50% 55%,#ffc55e55,transparent 63%),linear-gradient(#122d3377,#152b30bb),url('../assets/cave.webp')}
.vein-mode #orders,.vein-mode #finds-dock{opacity:.45;pointer-events:none;transition:opacity .25s}
.vein-mode #bottom-nav{opacity:.45;pointer-events:none}
.vein-mode #battlefield{overflow:visible;min-height:160px}
.vein-mode .team-slot{pointer-events:none;transition:transform .35s}
.vein-mode #team .team-slot[data-slot="0"]{transform:translateX(8%) scale(1.12)}
.vein-mode #team .team-slot[data-slot="1"]{transform:translateX(-8%) scale(1.12)}
.vein-mode .slot-empty,.vein-mode .slot-level,.vein-mode .gear-notice{visibility:hidden}
.vein-mode #target .vein-rock{pointer-events:auto;touch-action:none;user-select:none;-webkit-tap-highlight-color:transparent;width:65%;max-width:270px;border:0;cursor:pointer;filter:drop-shadow(0 0 22px #ffc64199);animation:vein-approach .35s ease-out}
.vein-rock:focus-visible{outline:3px solid #fff3bd;outline-offset:2px}
.vein-rock.vein-empty{pointer-events:none;visibility:hidden}
.vein-mode #target-info{padding-top:7px}
.vein-mode .mine-progress{opacity:.7;margin-bottom:6px}
.vein-eyebrow{font-size:14px;color:#fce5b5;line-height:1.2}
.vein-title{color:#ffdc79;font-size:clamp(28px,7vw,40px);line-height:1.2;font-weight:1000;letter-spacing:.5px;text-shadow:0 3px #704824,0 0 24px #ffc34288;margin:3px 10px}
.vein-multiplier{display:inline-block;font-size:36px;line-height:1.15;font-weight:1000;color:#fff3c7;text-shadow:0 3px #785125,0 0 15px #ffb820;font-variant-numeric:tabular-nums}
.vein-instruction{margin:5px 12px 0;font-size:14px;color:#fff1cb;line-height:1.35}
.vein-bank{position:relative;border:2px solid #e4bf6e;border-radius:15px;background:linear-gradient(135deg,#5c4527,#233a37);box-shadow:0 0 22px #f6bd4233,inset 0 1px #fff1b777;padding:9px 12px;text-align:center}
.vein-bank>span{font-size:14px;color:#efd29a}.vein-bank strong{display:flex;align-items:center;justify-content:center;gap:7px;font-size:30px;font-weight:900;line-height:1.25;color:#ffe9a3;font-variant-numeric:tabular-nums}.vein-bank img{width:32px;height:32px}.vein-bank small{font-size:13px;color:#cce1cd}.vein-bank-note{font-size:13px;text-align:center;color:#d3dace;margin:5px 0 0}
.vein-particle{position:absolute;left:50%;top:50%;width:6px;height:6px;border-radius:1px;background:#ffe9a8;box-shadow:0 0 7px #ffc526;pointer-events:none}
.vein-gain{position:absolute;left:50%;top:26%;font-size:27px;font-weight:1000;color:#ffe99a;text-shadow:0 2px 3px #302516;animation:vein-gain .65s ease-out forwards;white-space:nowrap;pointer-events:none}
.vein-finale .vein-bank{box-shadow:0 0 35px #f6bd4288;border-color:#fff1bb}.vein-finale .vein-title{font-size:28px}
@keyframes vein-approach{from{transform:scale(.86);opacity:.7}to{transform:scale(1);opacity:1}}
@keyframes vein-gain{from{transform:translate(-50%,10px) scale(.8);opacity:1}35%{transform:translate(-50%,-10px) scale(1.13);opacity:1}to{transform:translate(-50%,-45px);opacity:0}}
@media(max-height:760px){.vein-mode #battlefield{min-height:140px}.vein-title{font-size:28px}.vein-multiplier{font-size:29px}.vein-instruction{font-size:13px}.vein-bank{padding:6px}.vein-bank strong{font-size:26px}}
@media(prefers-reduced-motion:reduce){.vein-rock,.vein-gain{animation:none!important}.vein-mode .team-slot{transition:none!important}.vein-particle{display:none}}
/* The bank and instructions also reserve their rows on compact screens. */
.vein-mode #battlefield{min-height:0}
@media(max-height:560px){.vein-mode #mine{min-height:380px}.vein-mode #battlefield{min-height:110px}}

/* Overlay vein modal: heroes around the rock like the main battlefield */
#overlay .modal.vein-modal {
  overflow: auto;
  padding-top: 16px;
}
#overlay .modal.vein-modal .modal-head { margin-bottom: 8px; }
#overlay .modal.vein-modal > .sub {
  text-align: center;
  color: #c5d8cd;
  font-size: 13px;
  margin: 0 0 6px;
}
.vein-scene {
  position: relative;
  width: 100%;
  height: min(300px, 46vh);
  margin: 4px 0 2px;
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 50% 55%, #ffc55e44, transparent 62%),
    linear-gradient(#122d3377, #152b30bb),
    url('../assets/cave.webp') center/cover no-repeat;
}
.vein-scene .vein-rock {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 52%;
  max-width: 200px;
  aspect-ratio: 1;
  padding: 0;
  margin: 0;
  border: 0;
  background: none;
  z-index: 2;
  cursor: pointer;
  touch-action: manipulation;
  filter: drop-shadow(0 0 18px #ffc64199) drop-shadow(0 8px 6px #0008);
}
.vein-scene .vein-rock img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.vein-scene .vein-hero {
  position: absolute;
  width: 24%;
  aspect-ratio: 1;
  z-index: 3;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vein-scene .vein-hero canvas {
  width: 100%;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
  filter: drop-shadow(0 4px 2px #0008);
}
.vein-scene .vh-0,
.vein-scene .vh-1,
.vein-scene .vh-2 { left: -1%; right: auto; }
.vein-scene .vh-3,
.vein-scene .vh-4,
.vein-scene .vh-5 { left: auto; right: -1%; }
.vein-scene .vh-0,
.vein-scene .vh-3 { top: 2%; }
.vein-scene .vh-1,
.vein-scene .vh-4 { top: 34%; }
.vein-scene .vh-2,
.vein-scene .vh-5 { top: 66%; }
#overlay .modal.vein-modal .vein-score {
  text-align: center;
  font-size: 28px;
  font-weight: 1000;
  color: #ffe09a;
  margin: 10px 0 2px;
  text-shadow: 0 2px #3a2a12;
}
#overlay .modal.vein-modal .tap-hint {
  text-align: center;
  font-size: 12px;
  color: #c0cec1;
  margin: 4px 0 0;
  height: auto;
  min-height: 0;
}