/* The tower base (tower_base.py): the mine card under the tower and the mine sheet. Colors follow
   the tower screen's blue glass (today-card) with the crystal-blue accent of the art. */

/* The mine button in the tower shortcuts: the cart, a fill bar and the whole crystals waiting. */
.tower-shortcuts .shortcut-mine { overflow:visible; }
.shortcut-mine__n { position:absolute; top:-7px; right:-7px; min-width:20px; height:20px; padding:0 5px; border:2px solid #a6eeff; border-radius:10px; font:11px/16px DraklyBold,'Trebuchet MS',sans-serif; font-style:normal; color:#fff; background:#0a3f73; box-shadow:0 2px 0 #062b52; }
.shortcut-mine__bar { position:absolute; left:8px; right:8px; bottom:-6px; height:4px; border-radius:3px; overflow:hidden; background:#03182aa6; }
.shortcut-mine__bar b { display:block; height:100%; background:linear-gradient(90deg,#4fc3ff,#9ff0ff); transition:width .6s ease; }
.tower-shortcuts .shortcut-mine.is-full { border-color:#bff6ff; box-shadow:inset 0 2px #e9fbff8a,0 3px 0 #08417f,0 0 16px #39c6ffaa; }
.shortcut-mine.is-full img { animation:mine-glow 2s ease-in-out infinite; }
@keyframes mine-glow { 50% { filter:drop-shadow(0 0 8px #6fd8ffcc); } }

/* The mine entrance and Drakly digging at the tower's foot (decor in .tower-foundation, like the
   Halloween pumpkins: it scales and zooms with the tower). */
.mine-decor { position:absolute; pointer-events:none; user-select:none; height:auto; }
.mine-decor--entrance { z-index:7; left:1%; bottom:1%; width:23%; filter:drop-shadow(0 6px 6px #03182a88); }
.mine-decor--drakly { z-index:8; left:19%; bottom:0; width:11%; animation:mine-dig 2.4s ease-in-out infinite; transform-origin:50% 90%; filter:drop-shadow(0 3px 3px #03182aaa); }
@keyframes mine-dig { 0%,100% { transform:rotate(-3deg); } 50% { transform:rotate(4deg) translateY(-2px); } }
.mine-bar { height:8px; border-radius:6px; overflow:hidden; background:#08306a; box-shadow:inset 0 1px 2px #000a; }
.mine-bar i { display:block; height:100%; border-radius:6px; background:linear-gradient(90deg,#4fc3ff,#9ff0ff); box-shadow:0 0 8px #6fd8ff; transition:width .6s ease; }

.mine-sheet .sheet__body { display:flex; flex-direction:column; gap:10px; }
.mine-sheet h4 { margin:6px 0 0; font-size:15px; }
.mine-sheet-head { display:grid; grid-template-columns:96px 1fr; gap:12px; align-items:center; }
.mine-sheet-head img { width:96px; height:auto; }
.mine-sheet-head > div { display:flex; flex-direction:column; gap:4px; min-width:0; }
.mine-sheet-head strong { font-size:20px; }
.mine-slot { display:grid; grid-template-columns:52px 1fr auto; gap:10px; align-items:center; width:100%; padding:8px 10px; border:2px solid #92e3ff; border-radius:16px; color:#fff; background:linear-gradient(145deg,#2e83c3,#0e4e96 66%,#0a3675); box-shadow:inset 0 2px #fff8,0 4px 0 #0a4c94,0 8px 14px #032f6566; text-align:left; font:inherit; }
.mine-slot img { width:52px; height:52px; object-fit:contain; }
.mine-slot strong { display:block; font-size:15px; }
.mine-slot small { display:block; font-size:12px; opacity:.85; }
.mine-slot--drakly { border-color:#ffe08a; background:linear-gradient(145deg,#3a8fcf,#1257a0 66%,#0b3b7c); }
.mine-slot--empty { grid-template-columns:52px 1fr; border-style:dashed; background:#115794aa; box-shadow:none; cursor:pointer; }
.mine-slot__plus { display:grid; place-items:center; width:52px; height:52px; border-radius:50%; font-size:28px; font-weight:700; color:#fff; border:2px solid #8de2ff; background:radial-gradient(circle at 50% 40%,#5fc3ee55,#0b3b7c 72%); box-shadow:inset 0 3px 6px #021b4a99; }
.mine-slot__btns { display:flex; flex-direction:column; gap:4px; }
.mine-slot__btns .btn { min-height:30px; padding:4px 10px; font-size:12px; }
.mine-vip { display:flex; justify-content:space-between; align-items:center; width:100%; padding:10px 12px; border:1px solid #ffe08a; border-radius:14px; color:#fff; font:inherit; font-weight:600; background:linear-gradient(#f3b73a,#c9771a 60%,#9a4f12); box-shadow:inset 0 2px #fff6; cursor:pointer; }
.mine-up { padding:10px 12px; border:2px solid #92e3ff; border-radius:16px; color:#fff; background:linear-gradient(145deg,#2e83c3,#0e4e96 66%,#0a3675); box-shadow:inset 0 2px #fff8,0 4px 0 #0a4c94,0 8px 14px #032f6566; }
.mine-up h4 { margin:0 0 4px; }
.mine-up p { margin:0 0 8px; font-size:13px; opacity:.9; }
.mine-up__buy { display:flex; gap:8px; }
.mine-up__buy .btn { flex:1; }
.mine-hint { margin:0; font-size:12px; opacity:.8; }
.mine-picks { display:flex; flex-direction:column; gap:6px; max-height:52vh; overflow-y:auto; }
.mine-pick { display:grid; grid-template-columns:52px 1fr; gap:10px; align-items:center; width:100%; padding:8px 10px; border:2px solid #92e3ff; border-radius:16px; color:#fff; background:linear-gradient(145deg,#2e83c3,#0e4e96 66%,#0a3675); box-shadow:inset 0 2px #fff8,0 4px 0 #0a4c94,0 8px 14px #032f6566; text-align:left; font:inherit; cursor:pointer; }
.mine-pick img { width:52px; height:52px; object-fit:contain; }
.mine-pick strong { display:block; }
.mine-pick small,.mine-pick em { display:block; font-size:12px; font-style:normal; opacity:.85; }
.mine-pick em.moves { color:#ffcf7a; opacity:1; }

@media (prefers-reduced-motion:reduce) { .mine-decor--drakly,.shortcut-mine.is-full img { animation:none; } }